@workerdeck/ui 2.15.0 → 3.1.0

package/src/components/agent/ContextDialog.tsx

@@ -14,81 +14,89 @@ export interface ContextDialogProps {
   className?: string
 }
 
+export interface ContextPanelProps {
+  usage?: ContextUsage
+  engine?: ProfileEngine
+}
+
 export function ContextDialog({ usage, engine, open, onOpenChange, className }: ContextDialogProps) {
-  const note = contextNote(engine)
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className={className}>
         <DialogHeader title="Context" description={usage?.model} />
         <DialogBody>
-          {!usage ? (
-            <p className="py-6 text-center text-body-sm text-fg-4">
-              No reading yet - the context window is measured after a turn completes.
-            </p>
-          ) : (
-            <>
-              <div className="flex items-baseline justify-between gap-4">
-                <span className="text-label text-fg-3">Used</span>
-                <span className="font-mono text-body-sm text-fg-1">
-                  {formatTokens(usage.totalTokens)} / {formatTokens(usage.maxTokens)} · {usage.percentage.toFixed(0)}%
-                </span>
-              </div>
-              <div className="mt-2 h-2 overflow-hidden rounded-full bg-border">
-                <div
-                  className={cn('h-full rounded-full', meterTintClass(usage.percentage))}
-                  style={{ width: `${Math.min(100, Math.max(2, usage.percentage))}%` }}
-                />
-              </div>
-              {usage.categories.length > 0 ? (
-                <div className="mt-5">
-                  <h3 className="text-label font-medium text-fg-3">Breakdown</h3>
-                  <div className="mt-2 flex flex-col gap-3">
-                    {usage.categories.map((category) => {
-                      const share = (category.tokens / Math.max(usage.maxTokens, 1)) * 100
-                      const color = cssColor(category.color)
-                      return (
-                        <div key={category.name}>
-                          <div className="flex items-baseline justify-between gap-3">
-                            <span className="flex min-w-0 items-center gap-2">
-                              <span
-                                className="size-2 shrink-0 rounded-full bg-fg-4"
-                                style={color ? { backgroundColor: color } : undefined}
-                              />
-                              <span className="truncate text-body-sm text-fg-1">{category.name}</span>
-                            </span>
-                            <span className="shrink-0 font-mono text-label text-fg-3">{formatTokens(category.tokens)}</span>
-                          </div>
-                          <div className="mt-1 h-1 overflow-hidden rounded-full bg-border">
-                            <div
-                              className="h-full rounded-full bg-fg-4"
-                              style={{
-                                width: `${Math.min(100, share)}%`,
-                                backgroundColor: color,
-                              }}
-                            />
-                          </div>
-                        </div>
-                      )
-                    })}
-                  </div>
-                </div>
-              ) : null}
-            </>
-          )}
-          {note ? (
-            <div className="mt-5 border-t border-border pt-4">
-              <h3 className="text-label font-medium text-fg-3">Why this window is 272K</h3>
-              <p className="mt-2 text-body-sm text-fg-2">{note.summary}</p>
-              {note.detail.map((line) => (
-                <p key={line} className="mt-2 text-body-sm text-fg-3">
-                  {line}
-                </p>
-              ))}
-              <p className="mt-2 text-body-sm text-warning">{note.caveat}</p>
-            </div>
-          ) : null}
+          <ContextPanel usage={usage} engine={engine} />
         </DialogBody>
       </DialogContent>
     </Dialog>
   )
 }
+
+export function ContextPanel({ usage, engine }: ContextPanelProps) {
+  const note = contextNote(engine)
+  return (
+    <>
+      {!usage ? (
+        <p className="py-6 text-center text-body-sm text-fg-4">No reading yet - the context window is measured after a turn completes.</p>
+      ) : (
+        <>
+          <div className="flex items-baseline justify-between gap-4">
+            <span className="text-label text-fg-3">Used</span>
+            <span className="font-mono text-body-sm text-fg-1">
+              {formatTokens(usage.totalTokens)} / {formatTokens(usage.maxTokens)} · {usage.percentage.toFixed(0)}%
+            </span>
+          </div>
+          <div className="mt-2 h-2 overflow-hidden rounded-full bg-border">
+            <div
+              className={cn('h-full rounded-full', meterTintClass(usage.percentage))}
+              style={{ width: `${Math.min(100, Math.max(2, usage.percentage))}%` }}
+            />
+          </div>
+          {usage.categories.length > 0 ? (
+            <div className="mt-5">
+              <h3 className="text-label font-medium text-fg-3">Breakdown</h3>
+              <div className="mt-2 flex flex-col gap-3">
+                {usage.categories.map((category) => {
+                  const share = (category.tokens / Math.max(usage.maxTokens, 1)) * 100
+                  const color = cssColor(category.color)
+                  return (
+                    <div key={category.name}>
+                      <div className="flex items-baseline justify-between gap-3">
+                        <span className="flex min-w-0 items-center gap-2">
+                          <span className="size-2 shrink-0 rounded-full bg-fg-4" style={color ? { backgroundColor: color } : undefined} />
+                          <span className="truncate text-body-sm text-fg-1">{category.name}</span>
+                        </span>
+                        <span className="shrink-0 font-mono text-label text-fg-3">{formatTokens(category.tokens)}</span>
+                      </div>
+                      <div className="mt-1 h-1 overflow-hidden rounded-full bg-border">
+                        <div
+                          className="h-full rounded-full bg-fg-4"
+                          style={{
+                            width: `${Math.min(100, share)}%`,
+                            backgroundColor: color,
+                          }}
+                        />
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          ) : null}
+        </>
+      )}
+      {note ? (
+        <div className="mt-5 border-t border-border pt-4">
+          <h3 className="text-label font-medium text-fg-3">Why this window is 272K</h3>
+          <p className="mt-2 text-body-sm text-fg-2">{note.summary}</p>
+          {note.detail.map((line) => (
+            <p key={line} className="mt-2 text-body-sm text-fg-3">
+              {line}
+            </p>
+          ))}
+          <p className="mt-2 text-body-sm text-warning">{note.caveat}</p>
+        </div>
+      ) : null}
+    </>
+  )
+}

package/src/components/agent/FrameStrip.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+import { ArrowLeft } from 'lucide-react'
+import { cn } from '../../lib/utils.ts'
+import { Button } from '../ui/Button.tsx'
+import { Ink, Row } from '../terminal/row.tsx'
+import { TerminalSurface } from '../terminal/surface.tsx'
+import { WithActions } from '../terminal/affordances.tsx'
+
+export type FrameKind = 'shell' | 'subagent'
+
+export interface FrameStripProps {
+  kind: FrameKind
+  name: string
+  status?: string
+  detail?: string
+  failed: boolean
+  live: boolean
+  onBack: () => void
+  // Drawn at the strip's trailing edge; a terminal strip then hangs them inline, which is why only the name stays the Back target.
+  actions?: ReactNode
+  terminal: boolean
+  fontSize?: number
+  lineHeight?: number
+}
+
+const TERMINAL_TONE = { shell: { name: 'magenta', live: 'magenta' }, subagent: { name: 'green', live: 'mark' } } as const
+const CARDS_LIVE_CLASS: Record<FrameKind, string> = { shell: 'text-[var(--wd-shell-accent)]', subagent: 'text-accent' }
+
+export function FrameStrip({ kind, name, status, detail, failed, live, onBack, actions, terminal, fontSize, lineHeight }: FrameStripProps) {
+  if (terminal) {
+    const tones = TERMINAL_TONE[kind]
+    const line = (label: ReactNode) => (
+      <Row glyph="←" glyphTone="dim" indent={1} tone={failed ? 'red' : tones.name}>
+        {label}
+        {status ? <Ink tone={failed ? 'red' : live ? tones.live : 'dim'}> · {status}</Ink> : null}
+        {detail ? <Ink tone="faint"> · {detail}</Ink> : null}
+      </Row>
+    )
+    return (
+      <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} className="shrink-0">
+        {actions === undefined ? (
+          <button type="button" onClick={onBack} aria-label="Back to the session" className="block w-full cursor-pointer text-left">
+            {line(name)}
+          </button>
+        ) : (
+          <WithActions placement="inline" actions={actions}>
+            {line(
+              <button type="button" onClick={onBack} aria-label="Back to the session" className="cursor-pointer text-left">
+                {name}
+              </button>,
+            )}
+          </WithActions>
+        )}
+      </TerminalSurface>
+    )
+  }
+
+  return (
+    <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5">
+      <Button variant="ghost" size="sm" onClick={onBack} className="h-6 gap-1 px-1.5">
+        <ArrowLeft className="size-3.5" />
+        Back
+      </Button>
+      <span className={cn('min-w-0 flex-1 truncate text-body-sm', kind === 'shell' && 'font-mono', failed ? 'text-danger' : 'text-fg-2')}>
+        {name}
+      </span>
+      {status ? (
+        <span className={cn('shrink-0 text-label', failed ? 'text-danger' : live ? CARDS_LIVE_CLASS[kind] : 'text-fg-3')}>{status}</span>
+      ) : null}
+      {detail ? <span className="shrink-0 text-label text-fg-4">{detail}</span> : null}
+      {actions}
+    </div>
+  )
+}

package/src/components/agent/HostFilesDialog.tsx

@@ -1,3 +1,4 @@
+import { errorMessage } from '@workerdeck/protocol'
 import { useCallback, useEffect, useState } from 'react'
 import type { WorkerDeckClient } from '@workerdeck/client'
 import type { HostDirEntry, HostFileMatch } from '@workerdeck/protocol'
@@ -37,7 +38,7 @@ export function HostFilesDialog({ client, cwd, open, onOpenChange }: HostFilesDi
         setEntries(response.entries)
         setTruncated(response.truncated ?? false)
       } catch (e) {
-        setError(e instanceof Error ? e.message : 'Could not read that directory')
+        setError(errorMessage(e, 'Could not read that directory'))
       } finally {
         setLoading(false)
       }
@@ -87,7 +88,7 @@ export function HostFilesDialog({ client, cwd, open, onOpenChange }: HostFilesDi
         content: response.encoding === 'utf8' ? response.content : '(binary file - not shown)',
       })
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not read that file')
+      setError(errorMessage(e, 'Could not read that file'))
     } finally {
       setLoading(false)
     }

package/src/components/agent/McpDialog.tsx

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import type { WorkerDeckClient } from '@workerdeck/client'
-import type { McpServerActionRequest, McpServerStatusInfo, McpServerToolInfo } from '@workerdeck/protocol'
+import { useAsync } from '@workerdeck/react'
+import { errorMessage, type McpServerActionRequest, type McpServerStatusInfo, type McpServerToolInfo } from '@workerdeck/protocol'
 import { ChevronLeft, ChevronRight, Power, PowerOff, RotateCw } from 'lucide-react'
 import { Badge, type BadgeProps } from '../ui/Badge.tsx'
 import { Button } from '../ui/Button.tsx'
@@ -17,6 +18,27 @@ export interface McpDialogProps {
   className?: string
 }
 
+export interface McpPanelModel {
+  servers: McpServerStatusInfo[] | undefined
+  server: McpServerStatusInfo | undefined
+  tool: McpServerToolInfo | undefined
+  loading: boolean
+  busyServer: string | undefined
+  error: string | undefined
+  title: string
+  description: string | undefined
+  selectServer: (name: string | undefined) => void
+  selectTool: (name: string | undefined) => void
+  back: (() => void) | undefined
+  reload: () => void
+  act: (name: string, action: McpServerActionRequest['action']) => Promise<void>
+}
+
+export interface McpPanelProps {
+  model: McpPanelModel
+  canManageServers?: boolean
+}
+
 const STATUS_VARIANT: Record<string, NonNullable<BadgeProps['variant']>> = {
   connected: 'success',
   failed: 'danger',
@@ -26,94 +48,106 @@ const STATUS_VARIANT: Record<string, NonNullable<BadgeProps['variant']>> = {
 }
 
 export function McpDialog({ client, sessionId, open, onOpenChange, canManageServers = true, className }: McpDialogProps) {
-  const [servers, setServers] = useState<McpServerStatusInfo[] | undefined>()
-  const [error, setError] = useState<string | undefined>()
-  const [loading, setLoading] = useState(false)
+  const mcp = useMcpPanel(client, sessionId, open)
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={className}>
+        <DialogHeader title={mcp.title} description={mcp.description} actions={<McpPanelActions model={mcp} />} />
+        <DialogBody>
+          <McpPanel model={mcp} canManageServers={canManageServers} />
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function useMcpPanel(client: WorkerDeckClient | undefined, sessionId: string | undefined, active = true): McpPanelModel {
+  const listed = useAsync(() => client!.listMcpServers(sessionId!), [client, sessionId], { enabled: active && !!client && !!sessionId })
+  const [actError, setActError] = useState<string | undefined>()
   const [busyServer, setBusyServer] = useState<string | undefined>()
   const [selectedServer, setSelectedServer] = useState<string | undefined>()
   const [selectedTool, setSelectedTool] = useState<string | undefined>()
 
-  const load = useCallback(async () => {
-    if (!sessionId) {
-      return
-    }
-    setLoading(true)
-    setError(undefined)
-    try {
-      setServers(await client.listMcpServers(sessionId))
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not read MCP status')
-    } finally {
-      setLoading(false)
-    }
-  }, [client, sessionId])
-
   useEffect(() => {
-    if (!open) {
-      return
+    if (active) {
+      setSelectedServer(undefined)
+      setSelectedTool(undefined)
+      setActError(undefined)
     }
-    setSelectedServer(undefined)
-    setSelectedTool(undefined)
-    void load()
-  }, [open, load])
-
-  const act = async (name: string, action: McpServerActionRequest['action']) => {
-    if (!sessionId) {
-      return
-    }
-    setBusyServer(name)
-    setError(undefined)
-    try {
-      setServers(await client.mcpServerAction(sessionId, name, action))
-    } catch (e) {
-      setError(e instanceof Error ? e.message : `Could not ${action} ${name}`)
-    } finally {
-      setBusyServer(undefined)
-    }
-  }
+  }, [active, client, sessionId])
 
+  const servers = listed.data
   const server = servers?.find((s) => s.name === selectedServer)
   const tool = server?.tools?.find((t) => t.name === selectedTool)
-  const title = tool?.name ?? server?.name ?? 'MCP servers'
+  return {
+    servers,
+    server,
+    tool,
+    loading: listed.loading,
+    busyServer,
+    error: actError ?? (listed.error === undefined ? undefined : errorMessage(listed.error, 'Could not read MCP status')),
+    title: tool?.name ?? server?.name ?? 'MCP servers',
+    description: tool ? `${server?.name} tool` : server ? server.serverInfo?.name : undefined,
+    selectServer: setSelectedServer,
+    selectTool: setSelectedTool,
+    back: selectedServer ? () => (selectedTool ? setSelectedTool(undefined) : setSelectedServer(undefined)) : undefined,
+    reload: () => {
+      setActError(undefined)
+      void listed.reload()
+    },
+    act: async (name, action) => {
+      if (!client || !sessionId) {
+        return
+      }
+      setBusyServer(name)
+      setActError(undefined)
+      try {
+        listed.setData(await client.mcpServerAction(sessionId, name, action))
+      } catch (e) {
+        setActError(errorMessage(e, `Could not ${action} ${name}`))
+      } finally {
+        setBusyServer(undefined)
+      }
+    },
+  }
+}
 
+export function McpPanelActions({ model }: { model: McpPanelModel }) {
+  if (model.back) {
+    return (
+      <Button variant="ghost" size="xs" onClick={model.back}>
+        <ChevronLeft className="size-3.5" />
+        Back
+      </Button>
+    )
+  }
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={className}>
-        <DialogHeader
-          title={title}
-          description={tool ? `${server?.name} tool` : server ? server.serverInfo?.name : undefined}
-          actions={
-            selectedServer ? (
-              <Button variant="ghost" size="xs" onClick={() => (selectedTool ? setSelectedTool(undefined) : setSelectedServer(undefined))}>
-                <ChevronLeft className="size-3.5" />
-                Back
-              </Button>
-            ) : (
-              <Button variant="ghost" size="xs" onClick={() => void load()} disabled={loading}>
-                {loading ? <Spinner className="size-3 text-current" /> : <RotateCw className="size-3" />}
-                Refresh
-              </Button>
-            )
-          }
+    <Button variant="ghost" size="xs" onClick={model.reload} disabled={model.loading}>
+      {model.loading ? <Spinner className="size-3 text-current" /> : <RotateCw className="size-3" />}
+      Refresh
+    </Button>
+  )
+}
+
+export function McpPanel({ model, canManageServers = true }: McpPanelProps) {
+  const { error, servers, server, tool } = model
+  return (
+    <>
+      {error ? <div className="mb-3 rounded-md bg-danger-bg px-3 py-2 text-body-sm text-danger">{error}</div> : null}
+      {tool ? (
+        <ToolView tool={tool} />
+      ) : server ? (
+        <ServerView
+          server={server}
+          busy={model.busyServer === server.name}
+          canManage={canManageServers}
+          onAct={(action) => void model.act(server.name, action)}
+          onSelectTool={model.selectTool}
         />
-        <DialogBody>
-          {error ? <div className="mb-3 rounded-md bg-danger-bg px-3 py-2 text-body-sm text-danger">{error}</div> : null}
-          {tool ? (
-            <ToolView tool={tool} />
-          ) : server ? (
-            <ServerView
-              server={server}
-              busy={busyServer === server.name}
-              canManage={canManageServers}
-              onAct={(action) => void act(server.name, action)}
-              onSelectTool={setSelectedTool}
-            />
-          ) : error && !servers ? null : (
-            <ServerList servers={servers} loading={loading} onSelect={setSelectedServer} />
-          )}
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
+      ) : error && !servers ? null : (
+        <ServerList servers={servers} loading={model.loading} onSelect={model.selectServer} />
+      )}
+    </>
   )
 }
 

package/src/components/agent/PermissionPrompt.tsx

@@ -5,7 +5,8 @@ import { Button } from '../ui/Button.tsx'
 import { Input } from '../ui/Input.tsx'
 import { cn } from '../../lib/utils.ts'
 import { toolInputPreview } from '../../lib/format.ts'
-import { planFromRequest } from '../../lib/plan-request.ts'
+import { permissionPromptModel } from '../../lib/permission-prompt.ts'
+import { shellRequestLines } from '../../lib/shell-request.ts'
 import { toolIcon } from '../../lib/tool-icon.ts'
 import { Response } from './Response.tsx'
 
@@ -28,7 +29,9 @@ export function PermissionPrompt({ request, onApprove, onDeny, className }: Perm
     setDenying(false)
   }
 
-  const plan = planFromRequest(request)
+  const model = permissionPromptModel(request)
+  const { plan, shell } = model
+  const [allow, keep, stop] = model.choices
   const summary = toolInputPreview(request.input)
   const ToolIcon = toolIcon(request.toolName)
 
@@ -37,21 +40,27 @@ export function PermissionPrompt({ request, onApprove, onDeny, className }: Perm
       <div className="flex items-start gap-2.5">
         <Hand className="mt-0.5 size-4 shrink-0 text-warning" />
         <div className="min-w-0 flex-1">
-          <div className="text-body-sm font-medium text-fg-1">
-            {plan ? 'Plan ready for review' : (request.title ?? request.displayName ?? 'Permission needed')}
-          </div>
-          {request.description ? <div className="mt-0.5 text-label text-fg-3">{request.description}</div> : null}
-          {request.decisionReason ? <div className="mt-0.5 text-label text-fg-4">{request.decisionReason}</div> : null}
+          <div className="text-body-sm font-medium text-fg-1">{model.heading}</div>
+          {model.description ? <div className="mt-0.5 text-label text-fg-3">{model.description}</div> : null}
+          {model.decisionReason ? <div className="mt-0.5 text-label text-fg-4">{model.decisionReason}</div> : null}
           {plan ? (
             <div className="mt-1.5 max-h-72 overflow-y-auto rounded-md bg-code-bg px-2.5 py-2 text-body-sm text-fg-2">
               <Response>{plan}</Response>
             </div>
           ) : (
             <>
+              {shell ? (
+                <pre
+                  data-slot="shell-request"
+                  className="mt-1.5 max-h-48 overflow-auto rounded-md bg-code-bg px-2.5 py-1.5 font-mono text-body-sm whitespace-pre-wrap text-fg-1"
+                >
+                  {shellRequestLines(shell).join('\n')}
+                </pre>
+              ) : null}
               <div className="mt-1.5 flex min-w-0 items-center gap-2">
                 <ToolIcon className="size-3 shrink-0 text-fg-3" />
                 <span className="shrink-0 font-mono text-label font-medium text-fg-2">{request.toolName}</span>
-                {summary ? <span className="min-w-0 truncate font-mono text-label text-fg-4">{summary}</span> : null}
+                {summary && !shell ? <span className="min-w-0 truncate font-mono text-label text-fg-4">{summary}</span> : null}
               </div>
               <button
                 type="button"
@@ -70,13 +79,13 @@ export function PermissionPrompt({ request, onApprove, onDeny, className }: Perm
         </div>
         <div className="flex shrink-0 flex-wrap justify-end gap-1.5">
           <Button size="sm" onClick={() => onApprove(request.id)}>
-            {plan ? 'Approve plan' : 'Allow'}
+            {allow.button}
           </Button>
           <Button size="sm" variant="outline" onClick={() => setDenying((v) => !v)}>
-            {plan ? 'Keep planning' : 'Deny'}
+            {keep.button}
           </Button>
           <Button size="sm" variant="outline" onClick={() => deny(true)}>
-            {plan ? 'Stop the turn' : 'Deny & stop'}
+            {stop.button}
           </Button>
         </div>
       </div>
@@ -94,18 +103,14 @@ export function PermissionPrompt({ request, onApprove, onDeny, className }: Perm
                 setDenying(false)
               }
             }}
-            placeholder={
-              plan
-                ? 'What should change? (optional) - the agent keeps planning and reads this'
-                : 'Reason (optional) - the agent reads this and can try something else'
-            }
+            placeholder={model.denyPlaceholder}
             className="h-7 flex-1"
           />
           <Button size="sm" variant="outline" onClick={() => setDenying(false)}>
             Cancel
           </Button>
           <Button size="sm" variant="destructive" onClick={() => deny(false)}>
-            {plan ? 'Keep planning' : 'Deny'}
+            {keep.button}
           </Button>
         </div>
       ) : null}

package/src/components/agent/QuestionPrompt.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { parseUserQuestions, type PermissionRequest, type QuestionBehavior } from '@workerdeck/protocol'
 
 // Re-exported, not redefined: the parse moved to protocol so the CLI's Live Activity builder could
@@ -7,6 +6,7 @@ import { MessageCircleQuestion, X } from 'lucide-react'
 import { Badge } from '../ui/Badge.tsx'
 import { Button } from '../ui/Button.tsx'
 import { Textarea } from '../ui/Textarea.tsx'
+import { useQuestionAnswers } from '../../lib/question-answers.ts'
 import { cn } from '../../lib/utils.ts'
 
 export { parseUserQuestions }
@@ -23,18 +23,6 @@ export const QUESTION_BEHAVIORS: QuestionBehaviorMeta[] = [
   { value: 'deny', label: 'Disabled', description: 'the agent is told to decide on its own' },
 ]
 
-type Selection = { labels: string[]; other: string; otherActive: boolean }
-
-const EMPTY_SELECTION: Selection = { labels: [], other: '', otherActive: false }
-
-function answerFor(selection: Selection): string {
-  const parts = [...selection.labels]
-  if (selection.otherActive && selection.other.trim()) {
-    parts.push(selection.other.trim())
-  }
-  return parts.join(', ')
-}
-
 export interface QuestionPromptProps {
   request: PermissionRequest
   onAnswer: (requestId: string, updatedInput: Record<string, unknown>) => void
@@ -44,32 +32,9 @@ export interface QuestionPromptProps {
 
 export function QuestionPrompt({ request, onAnswer, onDismiss, className }: QuestionPromptProps) {
   const questions = parseUserQuestions(request.input)
-  const [selections, setSelections] = useState<Selection[]>(() => questions.map(() => EMPTY_SELECTION))
-
-  const update = (index: number, patch: Partial<Selection>) => {
-    setSelections((prev) => prev.map((s, i) => (i === index ? { ...s, ...patch } : s)))
-  }
-
-  const toggle = (index: number, label: string, multiSelect: boolean) => {
-    const current = selections[index] ?? EMPTY_SELECTION
-    if (multiSelect) {
-      update(index, {
-        labels: current.labels.includes(label) ? current.labels.filter((l) => l !== label) : [...current.labels, label],
-      })
-    } else {
-      update(index, { labels: current.labels[0] === label ? [] : [label], otherActive: false })
-    }
-  }
-
-  const complete = questions.every((_, i) => answerFor(selections[i] ?? EMPTY_SELECTION) !== '')
+  const { selectionFor, update, toggle, toggleOther, complete, answers } = useQuestionAnswers(questions)
 
-  const submit = () => {
-    const answers: Record<string, string> = {}
-    questions.forEach((q, i) => {
-      answers[q.question] = answerFor(selections[i] ?? EMPTY_SELECTION)
-    })
-    onAnswer(request.id, { ...request.input, answers })
-  }
+  const submit = () => onAnswer(request.id, { ...request.input, answers: answers() })
 
   return (
     <div data-slot="question-prompt" className={cn('rounded-lg border border-info/40 bg-info-bg p-3', className)}>
@@ -77,7 +42,7 @@ export function QuestionPrompt({ request, onAnswer, onDismiss, className }: Ques
         <MessageCircleQuestion className="mt-0.5 size-4 shrink-0 text-info" />
         <div className="flex min-w-0 flex-1 flex-col gap-3">
           {questions.map((q, index) => {
-            const selection = selections[index] ?? EMPTY_SELECTION
+            const selection = selectionFor(index)
             return (
               <div key={index} className="flex flex-col gap-1.5">
                 <div className="flex items-center gap-2">
@@ -91,7 +56,7 @@ export function QuestionPrompt({ request, onAnswer, onDismiss, className }: Ques
                       <button
                         key={option.label}
                         type="button"
-                        onClick={() => toggle(index, option.label, q.multiSelect === true)}
+                        onClick={() => toggle(index, option.label)}
                         className={cn(
                           'rounded-md border px-2.5 py-1.5 text-left transition-colors',
                           selected ? 'border-info bg-bg' : 'border-border bg-bg/50 hover:border-border-strong hover:bg-bg',
@@ -110,7 +75,7 @@ export function QuestionPrompt({ request, onAnswer, onDismiss, className }: Ques
                   <div className="flex items-center gap-2">
                     <button
                       type="button"
-                      onClick={() => update(index, { otherActive: !selection.otherActive })}
+                      onClick={() => toggleOther(index)}
                       className={cn(
                         'shrink-0 rounded-md border px-2.5 py-1.5 text-body-sm font-medium transition-colors',
                         selection.otherActive