experimental-a2 0.8.0 → 0.8.1

package/examples/playground/app/chat/[chatId]/chat-client.tsx

@@ -0,0 +1,922 @@
+'use client'
+import type {
+  FormEvent,
+  KeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+} from 'react'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { inputs } from 'experimental-a2/ai'
+import { ActivityFeed } from '@/app/components/activity-feed'
+import { ConnectionPill } from '@/app/components/connection-pill'
+import {
+  AgentStreamDrawer,
+  type AgentStreamStatus,
+} from './agent-stream-drawer'
+import {
+  buildChatTranscript,
+  selectAgentStream,
+  type AgentMessageMetadata,
+} from './chat-view'
+import { insertComposerText, isComposerTypingKey } from './composer'
+import { useSession } from './session'
+
+/** Max one durable presence ping per author in this window. */
+const TYPING_PUSH_INTERVAL_MS = 4_000
+/** Presence expiry is render-time view logic; the reducer stays pure. */
+const TYPING_TTL_MS = 6_000
+const FOLLOW_DISTANCE_PX = 64
+const MENTION_LIST_ID = 'chat-mention-list'
+const COMPOSER_MODE_DESCRIPTION_ID = 'chat-composer-mode-description'
+const IMPORTANT_FOCUS_SELECTOR = [
+  'a[href]',
+  'button',
+  'input',
+  'label',
+  'select',
+  'summary',
+  'textarea',
+  '[contenteditable]:not([contenteditable="false"])',
+  '[role="combobox"]',
+  '[role="dialog"]',
+  '[role="textbox"]',
+].join(',')
+
+const NAME_KEY = 'a2-playground-chat-name'
+const GUESTS = [
+  'lovelace',
+  'hopper',
+  'turing',
+  'curie',
+  'noether',
+  'hamilton',
+  'ritchie',
+] as const
+
+function loadName(): string {
+  try {
+    const stored = sessionStorage.getItem(NAME_KEY)
+    if (stored) return stored
+  } catch {
+    // Storage may be unavailable; a tab-local identity still works.
+  }
+  const pick = new Uint32Array(1)
+  crypto.getRandomValues(pick)
+  const name = `guest-${GUESTS[pick[0]! % GUESTS.length]!}`
+  try {
+    sessionStorage.setItem(NAME_KEY, name)
+  } catch {
+    // In-memory identity is enough for this visit.
+  }
+  return name
+}
+
+function withMentions(text: string): ReactNode {
+  return text.split(/(@[\w-]+)/g).map((part, i) =>
+    part.startsWith('@') ? (
+      // oxlint-disable-next-line no-array-index-key -- static split, never reorders
+      <mark className="mention" key={i}>
+        {part}
+      </mark>
+    ) : (
+      part
+    ),
+  )
+}
+
+function mentionQuery(
+  value: string,
+  caret: number,
+): { query: string; start: number } | null {
+  const upToCaret = value.slice(0, caret)
+  const match = /(?:^|\s)@([\w-]*)$/.exec(upToCaret)
+  if (!match) return null
+  const query = match[1] ?? ''
+  return { query, start: caret - query.length - 1 }
+}
+
+const names = (authors: string[]): string =>
+  authors.length <= 2
+    ? authors.join(' and ')
+    : `${authors.slice(0, -1).join(', ')} and ${authors.at(-1)}`
+
+function presenceLine(
+  authors: string[],
+  agentActivity: 'thinking' | 'writing' | null,
+): string | null {
+  const human =
+    authors.length === 0
+      ? null
+      : `${names(authors)} ${authors.length === 1 ? 'is' : 'are'} typing`
+  const agent = agentActivity ? `agent is ${agentActivity}` : null
+  if (!human && !agent) return null
+  return `${[human, agent].filter(Boolean).join('; ')}…`
+}
+
+const usageLabel = (metadata: AgentMessageMetadata | null): string | null => {
+  if (!metadata) return null
+  const trigger = metadata.mode === 'ambient' ? 'ambient' : '@agent'
+  if (metadata.steps.length === 0) return `${trigger} · agent stream`
+  const tokens = metadata.steps.reduce(
+    (total, step) => total + (step.usage.totalTokens ?? 0),
+    0,
+  )
+  const calls = metadata.steps.length
+  return `${trigger} · ${tokens.toLocaleString()} ${tokens === 1 ? 'token' : 'tokens'} · ${calls} model ${calls === 1 ? 'step' : 'steps'}`
+}
+
+function AgentStreamTrigger({
+  metadata,
+  responseMessageId,
+  onOpen,
+}: {
+  metadata: AgentMessageMetadata | null
+  responseMessageId: string
+  onOpen: () => void
+}): ReactNode {
+  const label = usageLabel(metadata)
+  if (!metadata || !label) return null
+  return (
+    <button
+      type="button"
+      className="agent-stream-trigger"
+      aria-label={`${label}. View full agent stream`}
+      aria-haspopup="dialog"
+      aria-controls="agent-stream-drawer"
+      data-agent-stream-id={responseMessageId}
+      onClick={onOpen}
+    >
+      <span>{label}</span>
+      <span aria-hidden="true">View stream →</span>
+    </button>
+  )
+}
+
+const messageTime = (at: string): string =>
+  new Date(at).toLocaleTimeString([], {
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+
+const compactMessageTime = (at: string): string =>
+  new Date(at).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  })
+
+const avatarText = (author: string): string =>
+  author === 'agent' ? 'A' : author.slice(0, 1).toUpperCase()
+
+const hasImportantFocus = (element: EventTarget | null): boolean =>
+  element instanceof Element &&
+  (element.matches(IMPORTANT_FOCUS_SELECTOR) ||
+    element.closest('dialog[open]') !== null)
+
+export function ChatClient({ chatId }: { chatId: string }): ReactNode {
+  const { state, push, events, index, connection } = useSession()
+
+  const [name, setName] = useState('')
+  const [draft, setDraft] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [retrying, setRetrying] = useState(false)
+  const [openResponseId, setOpenResponseId] = useState<string | null>(null)
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const [now, setNow] = useState(() => Date.now())
+  const [mention, setMention] = useState<{
+    query: string
+    start: number
+  } | null>(null)
+  const [selected, setSelected] = useState(0)
+  const lastTypingPush = useRef(0)
+  const followTranscript = useRef(true)
+  const previousTranscriptSize = useRef(0)
+  const focusedComposerOnLoad = useRef(false)
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  const transcriptRef = useRef<HTMLDivElement>(null)
+  const transcriptContentRef = useRef<HTMLDivElement>(null)
+  const composerDockRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => setName(loadName()), [])
+
+  useEffect(() => {
+    if (!name || focusedComposerOnLoad.current) return
+    focusedComposerOnLoad.current = true
+    const activeElement = document.activeElement
+    if (
+      (activeElement !== document.body &&
+        activeElement !== document.documentElement) ||
+      document.querySelector('dialog[open]') !== null
+    ) {
+      return
+    }
+    requestAnimationFrame(() =>
+      inputRef.current?.focus({ preventScroll: true }),
+    )
+  }, [name])
+
+  useLayoutEffect(() => {
+    const input = inputRef.current
+    if (!input) return
+    input.style.height = 'auto'
+    input.style.height = `${input.scrollHeight}px`
+    input.style.overflowY =
+      input.scrollHeight > input.clientHeight ? 'auto' : 'hidden'
+  }, [draft])
+
+  const hasTyping = Object.keys(state.lastTypingAt).length > 0
+  useEffect(() => {
+    if (!hasTyping) return
+    const timer = setInterval(() => setNow(Date.now()), 1_000)
+    return () => clearInterval(timer)
+  }, [hasTyping])
+
+  const transcriptSize = state.messages.length + state.posts.length
+  useEffect(() => {
+    const el = transcriptRef.current
+    if (
+      el &&
+      (previousTranscriptSize.current === 0 || followTranscript.current)
+    ) {
+      el.scrollTop = el.scrollHeight
+    }
+    previousTranscriptSize.current = transcriptSize
+  }, [transcriptSize])
+
+  useEffect(() => {
+    const dock = composerDockRef.current
+    const transcriptElement = transcriptRef.current
+    const transcriptContent = transcriptContentRef.current
+    if (
+      !dock ||
+      !transcriptElement ||
+      !transcriptContent ||
+      typeof ResizeObserver === 'undefined'
+    ) {
+      return
+    }
+    const observer = new ResizeObserver(() => {
+      if (followTranscript.current) {
+        transcriptElement.scrollTop = transcriptElement.scrollHeight
+      }
+    })
+    observer.observe(dock)
+    observer.observe(transcriptContent)
+    return () => observer.disconnect()
+  }, [])
+
+  const typingAuthors = Object.entries(state.lastTypingAt)
+    .filter(([author]) => author !== name)
+    .filter(([, at]) => now - Date.parse(at) < TYPING_TTL_MS)
+    .map(([author]) => author)
+
+  const runningTool = state.ai.tools.find((tool) => tool.status === 'running')
+  const activeResponseId =
+    state.ai.activeGeneration?.responseMessageId ??
+    state.ai.activeResponseMessageId ??
+    runningTool?.messageId ??
+    null
+  const activeMessage = activeResponseId
+    ? state.ai.messages.find((message) => message.id === activeResponseId)
+    : undefined
+  const writing =
+    activeMessage?.parts.some(
+      (part) =>
+        part.type === 'tool-post' &&
+        (part.state === 'input-streaming' || part.state === 'input-available'),
+    ) === true ||
+    (runningTool?.toolName === 'post' && runningTool.status === 'running')
+  const agentActivity =
+    state.ai.status === 'generating' ? (writing ? 'writing' : 'thinking') : null
+  const presence = presenceLine(typingAuthors, agentActivity)
+
+  const aiMessages = new Map(
+    state.ai.messages.map((message) => [message.id, message]),
+  )
+  const lastPostByResponse = new Map<string, (typeof state.posts)[number]>()
+  for (const post of state.posts) {
+    const current = lastPostByResponse.get(post.responseMessageId)
+    if (current === undefined || current.index < post.index) {
+      lastPostByResponse.set(post.responseMessageId, post)
+    }
+  }
+  const transcript = buildChatTranscript(state.messages, state.posts)
+  const selectedAgentStream = openResponseId
+    ? selectAgentStream(state.ai.messages, openResponseId)
+    : null
+  const selectedStreamSummary = usageLabel(
+    selectedAgentStream?.metadata ?? null,
+  )
+  const selectedStreamLive =
+    openResponseId !== null &&
+    openResponseId === activeResponseId &&
+    state.ai.status === 'generating'
+  const selectedStreamStatus = (() => {
+    if (selectedStreamLive) return 'streaming'
+    if (openResponseId === null) return 'completed'
+    for (const event of events.toReversed()) {
+      if (
+        event.type === 'ai.message.interrupted' &&
+        event.payload.messageId === openResponseId
+      ) {
+        return 'interrupted'
+      }
+      if (
+        event.type === 'ai.generation.failed' &&
+        event.payload.responseMessageId === openResponseId
+      ) {
+        return 'failed'
+      }
+      if (
+        event.type === 'ai.message.completed' &&
+        event.payload.messageId === openResponseId
+      ) {
+        return 'completed'
+      }
+    }
+    return 'completed'
+  })() satisfies AgentStreamStatus
+
+  const participants = useMemo(() => {
+    const seen = new Set<string>(['agent'])
+    for (const message of state.messages) seen.add(message.author)
+    for (const author of Object.keys(state.lastTypingAt)) seen.add(author)
+    seen.delete(name)
+    return [...seen]
+  }, [state.messages, state.lastTypingAt, name])
+
+  const candidates = mention
+    ? participants.filter((participant) =>
+        participant.toLowerCase().startsWith(mention.query.toLowerCase()),
+      )
+    : []
+
+  const totalTokens = state.ai.usage.reduce(
+    (total, entry) => total + (entry.usage.totalTokens ?? 0),
+    0,
+  )
+  const failedGeneration =
+    state.ai.status === 'failed'
+      ? events.findLast(
+          (
+            event,
+          ): event is Extract<
+            (typeof events)[number],
+            { type: 'ai.generation.failed' }
+          > =>
+            event.type === 'ai.generation.failed' &&
+            event.payload.superseded !== true,
+        )
+      : undefined
+  const failedRootMessageId = failedGeneration
+    ? state.messages.find(
+        (message) =>
+          `${message.id}:assistant` ===
+          failedGeneration.payload.responseMessageId,
+      )?.id
+    : undefined
+
+  const sendTypingPing = useCallback((): void => {
+    if (!name) return
+    const nowMs = Date.now()
+    if (nowMs - lastTypingPush.current < TYPING_PUSH_INTERVAL_MS) return
+    lastTypingPush.current = nowMs
+    push({ type: 'typed', payload: { author: name } }).catch(() => {
+      lastTypingPush.current = 0
+    })
+  }, [name, push])
+
+  const onDraftChange = useCallback(
+    (value: string, caret: number | null): void => {
+      setDraft(value)
+      if (value.trim()) sendTypingPing()
+      const next = mentionQuery(value, caret ?? value.length)
+      setMention(next)
+      if (next) setSelected(0)
+    },
+    [sendTypingPing],
+  )
+
+  useEffect(() => {
+    const routeTypingToComposer = (event: globalThis.KeyboardEvent): void => {
+      const input = inputRef.current
+      const selection = window.getSelection()
+      if (
+        !name ||
+        !input ||
+        input.disabled ||
+        !isComposerTypingKey(event) ||
+        hasImportantFocus(event.target) ||
+        hasImportantFocus(document.activeElement) ||
+        document.querySelector('dialog[open]') !== null ||
+        (selection !== null && !selection.isCollapsed)
+      ) {
+        return
+      }
+
+      const insertion = insertComposerText(
+        input.value,
+        event.key,
+        input.selectionStart,
+        input.selectionEnd,
+      )
+      event.preventDefault()
+      input.focus({ preventScroll: true })
+      onDraftChange(insertion.value, insertion.caret)
+      requestAnimationFrame(() =>
+        input.setSelectionRange(insertion.caret, insertion.caret),
+      )
+    }
+    document.addEventListener('keydown', routeTypingToComposer)
+    return () => document.removeEventListener('keydown', routeTypingToComposer)
+  }, [name, onDraftChange])
+
+  const acceptMention = (candidate: string): void => {
+    if (!mention) return
+    const caret = inputRef.current?.selectionStart ?? draft.length
+    const next = `${draft.slice(0, mention.start)}@${candidate} ${draft.slice(caret)}`
+    setDraft(next)
+    setMention(null)
+    const pos = mention.start + candidate.length + 2
+    requestAnimationFrame(() => {
+      inputRef.current?.focus()
+      inputRef.current?.setSelectionRange(pos, pos)
+    })
+  }
+
+  const onComposerKeys = (event: KeyboardEvent<HTMLTextAreaElement>): void => {
+    if (event.nativeEvent.isComposing) return
+    if (mention && candidates.length > 0 && event.key === 'ArrowDown') {
+      event.preventDefault()
+      setSelected((value) => (value + 1) % candidates.length)
+    } else if (mention && candidates.length > 0 && event.key === 'ArrowUp') {
+      event.preventDefault()
+      setSelected(
+        (value) => (value - 1 + candidates.length) % candidates.length,
+      )
+    } else if (
+      mention &&
+      candidates.length > 0 &&
+      !event.shiftKey &&
+      (event.key === 'Enter' || event.key === 'Tab')
+    ) {
+      event.preventDefault()
+      acceptMention(candidates[selected]!)
+    } else if (event.key === 'Escape') {
+      setMention(null)
+    } else if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+      event.currentTarget.form?.requestSubmit()
+    }
+  }
+
+  const focusComposerSurface = (
+    event: ReactPointerEvent<HTMLFormElement>,
+  ): void => {
+    if (
+      event.button !== 0 ||
+      (event.target as Element).closest(IMPORTANT_FOCUS_SELECTOR) !== null
+    ) {
+      return
+    }
+    event.preventDefault()
+    inputRef.current?.focus({ preventScroll: true })
+  }
+
+  const trackTranscriptPosition = (): void => {
+    const el = transcriptRef.current
+    if (!el) return
+    followTranscript.current =
+      el.scrollHeight - el.scrollTop - el.clientHeight < FOLLOW_DISTANCE_PX
+  }
+
+  const send = async (event: FormEvent): Promise<void> => {
+    event.preventDefault()
+    const text = draft.trim()
+    if (!text || !name) return
+    const messageId = crypto.randomUUID()
+    setError(null)
+    setDraft('')
+    setMention(null)
+    followTranscript.current = true
+    lastTypingPush.current = 0
+    requestAnimationFrame(() =>
+      inputRef.current?.focus({ preventScroll: true }),
+    )
+    try {
+      // The browser authors only the room fact. A serialized server handler
+      // derives AI metadata and generation policy from its durable log index.
+      await push({
+        type: 'message.sent',
+        id: messageId,
+        payload: { author: name, text },
+      })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+      setDraft((current) => (current.length === 0 ? text : current))
+    }
+  }
+
+  const changeAmbient = async (enabled: boolean): Promise<void> => {
+    if (!name) return
+    setError(null)
+    try {
+      await push({
+        type: 'agent.ambient.changed',
+        payload: { enabled, author: name },
+      })
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    }
+  }
+
+  const stopAgent = async (): Promise<void> => {
+    if (!activeResponseId) return
+    const target = state.ai.activeGeneration
+      ? { generationId: state.ai.activeGeneration.generationId }
+      : runningTool
+        ? { generationId: runningTool.generationId }
+        : state.ai.activeRequestId
+          ? { requestId: state.ai.activeRequestId }
+          : null
+    if (target === null) return
+    setError(null)
+    try {
+      await push(
+        ...inputs.interrupt({
+          messageId: activeResponseId,
+          ...target,
+          reason: 'a chat participant stopped the agent',
+          lastSeenIndex: index,
+        }),
+      )
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    }
+  }
+
+  const retryAgent = async (): Promise<void> => {
+    if (!failedGeneration || !failedRootMessageId) return
+    setError(null)
+    setRetrying(true)
+    try {
+      await push(
+        ...inputs.retry({
+          messageId: failedRootMessageId,
+          responseMessageId: failedGeneration.payload.responseMessageId,
+          retryId: crypto.randomUUID(),
+        }),
+      )
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setRetrying(false)
+    }
+  }
+
+  const rename = (value: string): void => {
+    const next = value.slice(0, 40)
+    setName(next)
+    try {
+      sessionStorage.setItem(NAME_KEY, next)
+    } catch {
+      // In-memory identity is enough.
+    }
+  }
+
+  const closeAgentStream = (): void => {
+    const responseMessageId = openResponseId
+    setOpenResponseId(null)
+    if (responseMessageId === null) return
+    requestAnimationFrame(() => {
+      document
+        .querySelector<HTMLButtonElement>(
+          `[data-agent-stream-id="${CSS.escape(responseMessageId)}"]`,
+        )
+        ?.focus()
+    })
+  }
+
+  return (
+    <article className="chat-page">
+      <header className="session-header chat-page-header">
+        <div className="chat-page-title">
+          <p className="eyebrow">Multiplayer room</p>
+          <h1>
+            Chat <code>{chatId}</code>
+          </h1>
+        </div>
+        <div className="chat-header-meta">
+          <ConnectionPill connection={connection} />
+          <span className="badge">
+            {state.messages.length}{' '}
+            {state.messages.length === 1 ? 'message' : 'messages'}
+          </span>
+          {state.ai.usage.length > 0 ? (
+            <span className="badge">
+              {totalTokens.toLocaleString()} AI tokens
+            </span>
+          ) : null}
+          {state.ai.status === 'failed' ? (
+            <span className="badge cut">agent paused</span>
+          ) : null}
+        </div>
+        <label className="identity-field chat-identity">
+          <span>You are</span>
+          <input
+            aria-label="Your chat name"
+            value={name}
+            onChange={(event) => rename(event.target.value)}
+            placeholder="Joining…"
+            disabled={!name && draft.length === 0}
+          />
+        </label>
+      </header>
+
+      <div className="chat-workspace">
+        <section className="chat" aria-label="Conversation">
+          <div
+            className="chat-scroll"
+            ref={transcriptRef}
+            onScroll={trackTranscriptPosition}
+          >
+            <div className="chat-scroll-content" ref={transcriptContentRef}>
+              {transcript.length === 0 ? (
+                <p className="chat-empty hint">
+                  {state.ambient.enabled
+                    ? 'No messages yet. Say something; the agent is listening.'
+                    : 'No messages yet. Say something, or mention @agent to invite it.'}
+                </p>
+              ) : (
+                <ol
+                  className="chat-transcript"
+                  role="log"
+                  aria-live="polite"
+                  aria-relevant="additions"
+                  aria-atomic="false"
+                >
+                  {transcript.map((entry) => {
+                    const author = entry.author
+                    const at = entry.at
+                    const text =
+                      entry.kind === 'participant'
+                        ? entry.message.text
+                        : entry.post.text
+                    const key =
+                      entry.kind === 'participant'
+                        ? `message:${entry.message.id}`
+                        : `post:${entry.post.generationId}:${entry.post.toolCallId}`
+                    const responseMessageId =
+                      entry.kind === 'agent'
+                        ? entry.post.responseMessageId
+                        : null
+                    const responseMessage = responseMessageId
+                      ? aiMessages.get(responseMessageId)
+                      : undefined
+                    const metadata =
+                      responseMessage?.metadata?.kind === 'agent'
+                        ? responseMessage.metadata
+                        : null
+                    const showStreamTrigger =
+                      entry.kind === 'agent' &&
+                      lastPostByResponse.get(entry.post.responseMessageId)
+                        ?.index === entry.post.index
+
+                    return (
+                      <li
+                        className={`msg ${entry.kind}${
+                          author === name ? ' mine' : ''
+                        }${entry.showHeader ? ' group-start' : ' grouped'}`}
+                        key={key}
+                      >
+                        <div className="msg-gutter">
+                          {entry.showHeader ? (
+                            <span className="msg-avatar" aria-hidden="true">
+                              {avatarText(author)}
+                            </span>
+                          ) : (
+                            <time
+                              className="msg-compact-time"
+                              dateTime={at}
+                              title={new Date(at).toLocaleString()}
+                              aria-hidden="true"
+                            >
+                              {compactMessageTime(at)}
+                            </time>
+                          )}
+                        </div>
+                        <div className="msg-body">
+                          {entry.showHeader ? (
+                            <header>
+                              <span className="msg-author">{author}</span>
+                              <time dateTime={at}>{messageTime(at)}</time>
+                            </header>
+                          ) : (
+                            <span className="sr-only">
+                              {author} at {messageTime(at)}
+                            </span>
+                          )}
+                          <p className="msg-text">{withMentions(text)}</p>
+                          {showStreamTrigger && responseMessageId ? (
+                            <AgentStreamTrigger
+                              metadata={metadata}
+                              responseMessageId={responseMessageId}
+                              onOpen={() =>
+                                setOpenResponseId(responseMessageId)
+                              }
+                            />
+                          ) : null}
+                        </div>
+                      </li>
+                    )
+                  })}
+                </ol>
+              )}
+            </div>
+          </div>
+
+          <div className="chat-composer-dock" ref={composerDockRef}>
+            {state.ai.status === 'failed' ? (
+              <div className="chat-agent-error" role="alert">
+                <p>
+                  <strong>Agent paused.</strong>{' '}
+                  {state.ai.error ?? 'The model step failed.'}
+                </p>
+                <button
+                  type="button"
+                  className="secondary compact"
+                  disabled={
+                    !failedGeneration || !failedRootMessageId || retrying
+                  }
+                  onClick={() => void retryAgent()}
+                >
+                  {retrying ? 'Retrying…' : 'Retry agent'}
+                </button>
+              </div>
+            ) : null}
+
+            {error ? (
+              <p className="error chat-send-error" role="alert">
+                {error}
+              </p>
+            ) : null}
+
+            <form
+              className="composer"
+              onPointerDown={focusComposerSurface}
+              onSubmit={(event) => void send(event)}
+            >
+              {mention && candidates.length > 0 ? (
+                <ul
+                  className="mention-popover"
+                  id={MENTION_LIST_ID}
+                  role="listbox"
+                >
+                  {candidates.map((candidate, candidateIndex) => (
+                    <li key={candidate}>
+                      <button
+                        id={`${MENTION_LIST_ID}-${candidateIndex}`}
+                        type="button"
+                        role="option"
+                        aria-selected={candidateIndex === selected}
+                        className={candidateIndex === selected ? 'active' : ''}
+                        onMouseDown={(event) => {
+                          event.preventDefault()
+                          acceptMention(candidate)
+                        }}
+                      >
+                        @{candidate}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+              <div className="composer-input-surface">
+                <textarea
+                  ref={inputRef}
+                  value={draft}
+                  rows={3}
+                  onChange={(event) =>
+                    onDraftChange(
+                      event.target.value,
+                      event.target.selectionStart,
+                    )
+                  }
+                  onKeyDown={onComposerKeys}
+                  placeholder={
+                    state.ambient.enabled
+                      ? 'Message the room'
+                      : 'Message the room — @agent to invite the agent'
+                  }
+                  role="combobox"
+                  aria-label="Message"
+                  aria-multiline="true"
+                  aria-autocomplete="list"
+                  aria-expanded={mention !== null && candidates.length > 0}
+                  aria-controls={
+                    mention !== null && candidates.length > 0
+                      ? MENTION_LIST_ID
+                      : undefined
+                  }
+                  aria-activedescendant={
+                    mention !== null && candidates.length > 0
+                      ? `${MENTION_LIST_ID}-${selected}`
+                      : undefined
+                  }
+                  disabled={!name}
+                />
+              </div>
+              <div className="composer-toolbar">
+                <div className="composer-mode-group">
+                  <label className="composer-mode-selector">
+                    <input
+                      type="checkbox"
+                      checked={state.ambient.enabled}
+                      disabled={!name}
+                      aria-describedby={COMPOSER_MODE_DESCRIPTION_ID}
+                      onChange={(event) =>
+                        void changeAmbient(event.target.checked)
+                      }
+                    />
+                    <span>Ambient</span>
+                  </label>
+                  <span
+                    className="composer-mode-description"
+                    id={COMPOSER_MODE_DESCRIPTION_ID}
+                  >
+                    {state.ambient.enabled
+                      ? 'Agent sees every message'
+                      : 'Mention @agent to invite it'}
+                  </span>
+                </div>
+                <span className="composer-key-hint" aria-hidden="true">
+                  Shift + Enter for a new line
+                </span>
+                <button
+                  type="submit"
+                  className="composer-send"
+                  disabled={!draft.trim() || !name}
+                >
+                  <span>Send</span>
+                  <span aria-hidden="true">↑</span>
+                </button>
+              </div>
+            </form>
+
+            <div className="chat-presence-row">
+              <p
+                className="presence"
+                role="status"
+                aria-live="polite"
+                aria-atomic="true"
+              >
+                {presence}
+              </p>
+              {activeResponseId ? (
+                <button
+                  type="button"
+                  className="danger compact"
+                  onClick={() => void stopAgent()}
+                >
+                  Stop agent
+                </button>
+              ) : null}
+            </div>
+          </div>
+        </section>
+
+        <aside className={`chat-sidebar${sidebarOpen ? ' open' : ''}`}>
+          <button
+            type="button"
+            className="chat-sidebar-toggle"
+            aria-expanded={sidebarOpen}
+            aria-controls="chat-sidebar-body"
+            onClick={() => setSidebarOpen((open) => !open)}
+          >
+            <span>Room details</span>
+            <span className="badge">{events.length} events</span>
+          </button>
+          <div className="chat-sidebar-body" id="chat-sidebar-body">
+            <ActivityFeed events={events} index={index} />
+          </div>
+        </aside>
+      </div>
+
+      <AgentStreamDrawer
+        responseMessageId={openResponseId}
+        selection={selectedAgentStream}
+        summary={selectedStreamSummary}
+        status={selectedStreamStatus}
+        onClose={closeAgentStream}
+      />
+    </article>
+  )
+}