#AgentStateProvider

import { useState } from 'react';
import { AgentStateProvider, useAgentState, CharacterMark, ActivityTicker } from '@aora-bot/react';

function Sessions() {
  const agent = useAgentState();
  // The provider only re-renders when the *displayed* state changes, so a
  // table of every session needs its own nudge.
  const [, bump] = useState(0);
  const update = (u: Parameters<typeof agent.update>[0]) => (agent.update(u), bump((n) => n + 1));
  const remove = (id: string) => (agent.remove(id), bump((n) => n + 1));
  const sessions = Array.from(agent.arbiter.sessions().entries());
  return (
    <table style={{ margin: 0, fontSize: 13 }}>
      <tbody>
        {sessions.length === 0 && (
          <tr>
            <td style={{ opacity: 0.6 }}>no sessions</td>
          </tr>
        )}
        {sessions.map(([id, s]) => (
          <tr key={id}>
            <td>
              <code>{id}</code>
            </td>
            <td>{s.state}</td>
            <td>{s.headless ? 'headless' : ''}</td>
            <td>
              <button className="site-btn" onClick={() => remove(id)}>
                end
              </button>
            </td>
          </tr>
        ))}
        <tr>
          <td colSpan={4}>
            <div className="site-controls">
              <button className="site-btn" onClick={() => update({ sessionId: 'chat', state: 'thinking' })}>
                chat: thinking
              </button>
              <button className="site-btn" onClick={() => update({ sessionId: 'chat', state: 'composing' })}>
                chat: composing
              </button>
              <button
                className="site-btn"
                onClick={() => update({ sessionId: 'build', state: 'working', headless: true })}
              >
                build: working (headless)
              </button>
              <button
                className="site-btn"
                onClick={() => update({ sessionId: 'build', emotionId: '34', tips: 'Build failed' })}
              >
                build: 34 error
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  );
}

function Face() {
  const { state, tips } = useAgentState();
  return (
    <div className="site-demo site-demo--column" style={{ alignItems: 'center' }}>
      <CharacterMark shape="mochi" color="cyan" state={state} sizePx={96} />
      <ActivityTicker text={tips ?? state} />
    </div>
  );
}

export default function Demo() {
  return (
    <AgentStateProvider minDisplayMs={600}>
      <div className="site-demo" style={{ alignItems: 'flex-start' }}>
        <Face />
        <Sessions />
      </div>
    </AgentStateProvider>
  );
}

import { AgentStateProvider, CharacterMark, useAgentState } from '@aora-bot/react';

function Face() {
  const { state, hud, update } = useAgentState();
  return (
    <div className="site-demo site-demo--center">
      <CharacterMark shape="tofu" color="blue" state={state} hud={hud ?? null} sizePx={110} />
      <div className="site-controls">
        <button
          className="site-btn"
          onClick={() => update({ sessionId: 's1', state: 'working', hud: { kind: 'progress', value: 0.4 } })}
        >
          working, 40%
        </button>
        <button
          className="site-btn"
          onClick={() => update({ sessionId: 's1', state: 'working', hud: { kind: 'progress', value: 0.9 } })}
        >
          working, 90%
        </button>
        <button className="site-btn" onClick={() => update({ sessionId: 's1', state: 'idle' })}>
          idle, no dial
        </button>
      </div>
    </div>
  );
}

export default function Demo() {
  return (
    <AgentStateProvider minDisplayMs={0}>
      <Face />
    </AgentStateProvider>
  );
}