@workerdeck/ui 3.0.1 → 3.1.0

package/src/components/terminal/scrubber.tsx

@@ -1,110 +1,15 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { useStickToBottomContext } from 'use-stick-to-bottom'
 import type { PermissionRequest } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
-import { formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
-import { parentOf } from './blocks.ts'
+import { approvalCluster, buildMarks, clusterMarks, MIN_MARK, nearestMember, type Cluster, type Mark } from '../agent/scrubber-marks.ts'
+import { peekContent, TERMINAL_PEEK } from '../agent/scrubber-peek.tsx'
 import { TerminalSurface } from './surface.tsx'
 
-type Lane = 'l' | 'r' | 'f'
-type MarkKind = 'user' | 'subagent' | 'shell' | 'turn' | 'turnFailed' | 'toolFailed' | 'error' | 'approval' | 'recap' | 'bookmark'
-
-type Mark = {
-  kind: MarkKind
-  itemIndex: number
-  rowIndex: number
-  turnIndex?: number
-}
-
-type Cluster = { lane: Lane; kind: MarkKind; y: number; h: number; marks: { mark: Mark; y: number }[] }
-
-function nearestMember(cluster: Cluster, y: number): Mark | undefined {
-  let best: { mark: Mark; y: number } | undefined
-  for (const member of cluster.marks) {
-    if (!best || Math.abs(member.y - y) < Math.abs(best.y - y)) {
-      best = member
-    }
-  }
-  return best?.mark
-}
-
-const LANE: Record<MarkKind, Lane> = {
-  user: 'l',
-  subagent: 'l',
-  shell: 'l',
-  turn: 'r',
-  turnFailed: 'r',
-  toolFailed: 'r',
-  error: 'r',
-  approval: 'f',
-  recap: 'f',
-  bookmark: 'f',
-}
-
-const LOUDNESS: Record<MarkKind, number> = {
-  approval: 7,
-  error: 6,
-  turnFailed: 5,
-  toolFailed: 4,
-  user: 3,
-  turn: 2,
-  bookmark: 1,
-  subagent: 1,
-  shell: 1,
-  recap: 0,
-}
-
-const KIND_NAME: Record<MarkKind, string> = {
-  user: 'you',
-  subagent: 'sub-agent',
-  shell: 'shell',
-  turn: 'response · turn end',
-  turnFailed: 'turn failed',
-  toolFailed: 'tool failed',
-  error: 'error',
-  approval: 'pending approval',
-  recap: 'catch-up boundary',
-  bookmark: 'bookmark',
-}
-
-const MIN_MARK = 2
-
 export function railScale(railH: number, totalSize: number, viewportH: number): number {
   return totalSize > 0 ? railH / Math.max(totalSize, viewportH) : 0
 }
 
-type Segment = { response?: number; turn?: number; failed?: boolean }
-
-function doneLine(turn: Extract<TranscriptItem, { kind: 'turn_result' }>): string {
-  return `${turn.isError ? turn.subtype : 'done'} · ${formatDuration(turn.durationMs)} · ${formatCost(turn.totalCostUsd)}`
-}
-
-function excerpt(item: TranscriptItem): string {
-  switch (item.kind) {
-    case 'user':
-    case 'assistant_text':
-    case 'thinking':
-    case 'notice': {
-      return item.text
-    }
-    case 'shell': {
-      return item.shell.command
-    }
-    case 'tool_call': {
-      return `${item.name}(${toolInputPreview(item.input)})`
-    }
-    case 'turn_result': {
-      return doneLine(item)
-    }
-    case 'file_delivered': {
-      return item.path
-    }
-    default: {
-      return ''
-    }
-  }
-}
-
 export interface TerminalScrubberProps {
   items: readonly TranscriptItem[]
   pendingApprovals: readonly PermissionRequest[]
@@ -139,189 +44,28 @@ export function buildClusters(props: TerminalScrubberProps, railH: number): Clus
     totalSize,
     viewportH,
   } = props
-  const marks: Mark[] = []
-  const subagentParents = new Set<string>()
-  for (const item of items) {
-    const parent = parentOf(item)
-    if (parent !== undefined) {
-      subagentParents.add(parent)
-    }
-  }
-  const rowOutcome = new Map<number, number>()
-  items.forEach((item, index) => {
-    if (item.kind !== 'tool_call' || parentOf(item) !== frameParentId) {
-      return
-    }
-    rowOutcome.set(rowIndexFor(index), index)
-  })
-  let segment: Segment = {}
-  const closeSegment = () => {
-    const anchor = segment.response ?? segment.turn
-    if (anchor !== undefined) {
-      marks.push({
-        kind: segment.failed ? 'turnFailed' : 'turn',
-        itemIndex: anchor,
-        rowIndex: rowIndexFor(anchor),
-        turnIndex: segment.turn,
-      })
-    }
-    segment = {}
-  }
-  items.forEach((item, index) => {
-    if (item.kind === 'tool_call' && subagentParents.has(item.id)) {
-      marks.push({ kind: 'subagent', itemIndex: index, rowIndex: rowIndexFor(index) })
-    }
-    if (item.kind === 'user' && parentOf(item) === frameParentId) {
-      closeSegment()
-      marks.push({ kind: 'user', itemIndex: index, rowIndex: rowIndexFor(index) })
-    } else if (item.kind === 'turn_result') {
-      segment.turn = index
-      segment.failed = item.isError
-      closeSegment()
-    } else if (item.kind === 'notice' && item.level === 'error') {
-      marks.push({ kind: 'error', itemIndex: index, rowIndex: rowIndexFor(index) })
-    } else if (item.kind === 'shell') {
-      marks.push({ kind: 'shell', itemIndex: index, rowIndex: rowIndexFor(index) })
-    } else if (
-      item.kind === 'tool_call' &&
-      (item.status === 'failed' || item.result?.isError === true) &&
-      rowOutcome.get(rowIndexFor(index)) === index
-    ) {
-      marks.push({ kind: 'toolFailed', itemIndex: index, rowIndex: rowIndexFor(index) })
-    } else if (item.kind === 'assistant_text' && parentOf(item) === frameParentId) {
-      if (frameParentId !== undefined) {
-        marks.push({ kind: 'turn', itemIndex: index, rowIndex: rowIndexFor(index) })
-        return
-      }
-      segment.response = index
-    }
-  })
-  closeSegment()
-  for (const index of bookmarks) {
-    if (index >= 0 && index < items.length) {
-      marks.push({ kind: 'bookmark', itemIndex: index, rowIndex: rowIndexFor(index) })
-    }
-  }
+  const marks: Mark[] = buildMarks(items, { frameParentId, bookmarks, rowIndexFor }).map((mark) => ({
+    ...mark,
+    rowIndex: rowIndexFor(mark.itemIndex),
+  }))
   if (recapRow) {
     marks.push({ kind: 'recap', itemIndex: -1, rowIndex: recapRow.rowIndex })
   }
-
   const scale = railScale(railH, totalSize, viewportH)
-  const lanes = new Map<Lane, { mark: Mark; y: number; h: number }[]>()
-  for (const mark of marks) {
+  const clusters = clusterMarks(marks, (mark) => {
+    const rowIndex = mark.rowIndex ?? rowIndexFor(mark.itemIndex)
     const within = mark.itemIndex >= 0 ? positionInRow?.(mark.itemIndex) : undefined
-    const rowH = sizeOfRow(mark.rowIndex)
+    const rowH = sizeOfRow(rowIndex)
     const h = within ? MIN_MARK : Math.max(MIN_MARK, Math.round(rowH * scale))
-    const y = Math.min(
-      Math.max(0, railH - h),
-      Math.round((offsetOfRow(mark.rowIndex) + (within ? (within.ordinal / within.count) * rowH : 0)) * scale),
-    )
-    const lane = LANE[mark.kind]
-    const list = lanes.get(lane) ?? []
-    list.push({ mark, y, h })
-    lanes.set(lane, list)
-  }
-  const clusters: Cluster[] = []
-  for (const [lane, list] of lanes) {
-    list.sort((a, b) => a.y - b.y)
-    let current: Cluster | null = null
-    for (const { mark, y, h } of list) {
-      if (current && y <= current.y + current.h + 1) {
-        current.h = Math.max(current.h, y + h - current.y)
-        if (LOUDNESS[mark.kind] > LOUDNESS[current.kind]) {
-          current.kind = mark.kind
-        }
-        current.marks.push({ mark, y })
-      } else {
-        current = { lane, kind: mark.kind, y, h, marks: [{ mark, y }] }
-        clusters.push(current)
-      }
-    }
-  }
+    const offset = offsetOfRow(rowIndex) + (within ? (within.ordinal / within.count) * rowH : 0)
+    return { y: Math.min(Math.max(0, railH - h), Math.round(offset * scale)), h }
+  })
   if (pendingApprovals.length > 0) {
-    clusters.push({
-      lane: LANE.approval,
-      kind: 'approval',
-      y: Math.max(0, railH - MIN_MARK),
-      h: MIN_MARK,
-      marks: [],
-    })
+    clusters.push(approvalCluster(railH))
   }
   return clusters
 }
 
-function peekContent(cluster: Cluster, first: Mark | undefined, { items, pendingApprovals, recapRow }: TerminalScrubberProps): ReactNode {
-  const more = cluster.marks.length > 1 ? ` · ${cluster.marks.length} marks` : ''
-  let body: ReactNode = null
-  if (cluster.kind === 'approval') {
-    const request = pendingApprovals[0]
-    body = request ? (
-      <>
-        <div data-tone="bright">{request.title ?? 'Permission required'}</div>
-        <div className="term-scrub-ex" data-tone="fg">
-          {`${request.displayName ?? request.toolName}(${toolInputPreview(request.input)})`}
-        </div>
-      </>
-    ) : null
-  } else if (cluster.kind === 'recap' && !first) {
-    body = <div data-tone="faint">※ {recapRow?.label}</div>
-  } else if (first) {
-    const item = items[first.itemIndex]
-    if (first.kind === 'recap') {
-      body = <div data-tone="faint">※ {recapRow?.label}</div>
-    } else if (first.kind === 'turn' || first.kind === 'turnFailed') {
-      const turn = first.turnIndex === undefined ? undefined : items[first.turnIndex]
-      body = (
-        <>
-          {item?.kind === 'assistant_text' ? (
-            <div className="term-scrub-ex" data-tone="fg">
-              <span data-tone="dim">● </span>
-              {item.text}
-            </div>
-          ) : null}
-          {turn?.kind === 'turn_result' ? (
-            <>
-              <div data-tone={turn.isError ? 'red' : 'faint'}>{doneLine(turn)}</div>
-              {turn.errors?.map((message, index) => (
-                <div key={index} data-tone="red">
-                  {message}
-                </div>
-              ))}
-            </>
-          ) : null}
-        </>
-      )
-    } else if (item) {
-      const failure =
-        first.kind === 'toolFailed' && item.kind === 'tool_call'
-          ? item.result?.text.split('\n').find((line) => line.trim() !== '')
-          : undefined
-      body = (
-        <>
-          <div className="term-scrub-ex" data-tone={first.kind === 'error' || first.kind === 'toolFailed' ? 'red' : 'fg'}>
-            {first.kind === 'user' ? <span data-tone="dim">{'❯ '}</span> : null}
-            {excerpt(item)}
-          </div>
-          {failure ? (
-            <div className="term-scrub-ex" data-tone="red">
-              {failure}
-            </div>
-          ) : null}
-        </>
-      )
-    }
-  }
-  return (
-    <>
-      <div data-tone="faint">
-        {KIND_NAME[first?.kind ?? cluster.kind]}
-        {more}
-      </div>
-      {body}
-    </>
-  )
-}
-
 export function TerminalScrubber(props: TerminalScrubberProps) {
   const { scrollOffset, viewportH, totalSize, onJumpToRow, interactive, fontSize, lineHeight } = props
   const stick = useStickToBottomContext()
@@ -420,7 +164,7 @@ export function TerminalScrubber(props: TerminalScrubberProps) {
     }
     const mark = nearestMember(cluster, railY(clientY))
     if (mark) {
-      onJumpToRow(mark.rowIndex)
+      onJumpToRow(mark.rowIndex ?? props.rowIndexFor(mark.itemIndex))
     }
   }
 
@@ -515,7 +259,16 @@ export function TerminalScrubber(props: TerminalScrubberProps) {
         ))}
         {peek ? (
           <div ref={peekRef} className="term-scrub-peek" style={{ top: peek.y }}>
-            {peekContent(peek.cluster, peek.mark, props)}
+            {peekContent(
+              {
+                cluster: peek.cluster,
+                first: peek.mark,
+                items: props.items,
+                pendingApprovals: props.pendingApprovals,
+                recapLabel: props.recapRow?.label,
+              },
+              TERMINAL_PEEK,
+            )}
           </div>
         ) : null}
       </div>

package/src/components/ui/Popover.tsx

@@ -0,0 +1,29 @@
+import { type FunctionComponent } from 'react'
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover'
+import { cn } from '../../lib/utils.ts'
+import { PortalScope } from './PortalScope.tsx'
+
+export const Popover = PopoverPrimitive.Root
+export const PopoverTrigger = PopoverPrimitive.Trigger
+
+export const PopoverContent: FunctionComponent<
+  PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'side' | 'sideOffset'>
+> = ({ className, align = 'end', side = 'bottom', sideOffset = 6, ...props }) => (
+  <PopoverPrimitive.Portal>
+    <PortalScope>
+      <PopoverPrimitive.Positioner align={align} side={side} sideOffset={sideOffset} className="isolate z-80 outline-none">
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            'rounded-md border border-border bg-surface p-2 text-fg-1 shadow-(--shadow-lg) outline-none',
+            'transition-[opacity,transform] duration-(--motion-base)',
+            'data-starting-style:scale-95 data-starting-style:opacity-0',
+            'data-ending-style:scale-95 data-ending-style:opacity-0',
+            className,
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PortalScope>
+  </PopoverPrimitive.Portal>
+)

package/src/components/ui/Select.tsx

@@ -68,3 +68,28 @@ export const SelectItem: FunctionComponent<SelectPrimitive.Item.Props> = ({ clas
     </SelectPrimitive.ItemIndicator>
   </SelectPrimitive.Item>
 )
+
+export interface OptionSelectProps<T extends string> {
+  label: string
+  value: T
+  options: readonly { value: T; label: string }[]
+  onChange: (value: T) => void
+  className?: string
+}
+
+export function OptionSelect<T extends string>({ label, value, options, onChange, className }: OptionSelectProps<T>) {
+  return (
+    <Select value={value} onValueChange={(next) => onChange(next as T)}>
+      <SelectTrigger aria-label={label} className={className}>
+        <SelectValue>{options.find((o) => o.value === value)?.label ?? label}</SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            <SelectItemText>{option.label}</SelectItemText>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/index.ts

@@ -3,7 +3,16 @@ export { Badge, badgeVariants, type BadgeProps } from './components/ui/Badge.tsx
 export { Card, CardContent, CardHeader, CardTitle } from './components/ui/Card.tsx'
 export { Input } from './components/ui/Input.tsx'
 export { Textarea } from './components/ui/Textarea.tsx'
-export { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from './components/ui/Select.tsx'
+export {
+  OptionSelect,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+  type OptionSelectProps,
+} from './components/ui/Select.tsx'
 export {
   AlertDialog,
   AlertDialogClose,
@@ -13,6 +22,7 @@ export {
   AlertDialogTrigger,
 } from './components/ui/AlertDialog.tsx'
 export { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from './components/ui/Menu.tsx'
+export { Popover, PopoverContent, PopoverTrigger } from './components/ui/Popover.tsx'
 export { Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger } from './components/ui/Dialog.tsx'
 export { Tip, TooltipContent, TooltipProvider } from './components/ui/Tooltip.tsx'
 export { Toaster, toast } from './components/ui/Sonner.tsx'
@@ -51,9 +61,9 @@ export {
   type SessionVitals,
   type TerminalMetrics,
 } from './components/agent/SessionPanel.tsx'
-export { Transcript, type TranscriptProps } from './components/agent/Transcript.tsx'
+export { TerminalTranscript, Transcript, type TerminalTranscriptProps, type TranscriptProps } from './components/agent/Transcript.tsx'
 export { TerminalSurface, type TerminalSurfaceProps } from './components/terminal/surface.tsx'
-export { TerminalTranscript, TerminalItemView, type TerminalTranscriptProps } from './components/terminal/TerminalTranscript.tsx'
+export { TerminalItemView } from './components/terminal/TerminalTranscript.tsx'
 export { TerminalStatusLine, type TerminalStatusLineProps } from './components/terminal/StatusLine.tsx'
 export { TerminalPermissionPrompt, type TerminalPermissionPromptProps } from './components/terminal/PermissionPrompt.tsx'
 export { TerminalQuestionPrompt, type TerminalQuestionPromptProps } from './components/terminal/QuestionPrompt.tsx'
@@ -123,21 +133,49 @@ export {
   type PermissionModeSelectProps,
 } from './components/agent/PermissionModeSelect.tsx'
 export { StatusBar, type StatusBarProps } from './components/agent/StatusBar.tsx'
-export { ContextDialog, type ContextDialogProps } from './components/agent/ContextDialog.tsx'
+export { ContextDialog, ContextPanel, type ContextDialogProps, type ContextPanelProps } from './components/agent/ContextDialog.tsx'
 export { UsageDialog, type UsageDialogProps } from './components/agent/UsageDialog.tsx'
 export { TaskList, type TaskListProps } from './components/agent/TaskList.tsx'
 export { TasksDialog, type TasksDialogProps } from './components/agent/TasksDialog.tsx'
 export { UsageMeters, useMinuteClock } from './components/agent/UsageMeters.tsx'
-export { SessionInfoDialog, type SessionInfoDialogProps } from './components/agent/SessionInfoDialog.tsx'
-export { McpDialog, type McpDialogProps } from './components/agent/McpDialog.tsx'
+export {
+  SessionInfoDialog,
+  SessionInfoPanel,
+  type SessionInfoDialogProps,
+  type SessionInfoPanelProps,
+} from './components/agent/SessionInfoDialog.tsx'
+export {
+  McpDialog,
+  McpPanel,
+  McpPanelActions,
+  useMcpPanel,
+  type McpDialogProps,
+  type McpPanelModel,
+  type McpPanelProps,
+} from './components/agent/McpDialog.tsx'
 export { SkillsDialog, type SkillsDialogProps } from './components/agent/SkillsDialog.tsx'
 export { HostFilesDialog, type HostFilesDialogProps } from './components/agent/HostFilesDialog.tsx'
 export { SessionList, SessionListItem, type SessionListItemProps, type SessionListProps } from './components/agent/SessionList.tsx'
-export { SessionBrowser, rowShapeClass, type SessionBrowserProps } from './components/agent/SessionBrowser.tsx'
+export { SessionBrowser, SessionSearch, rowShapeClass, type SessionBrowserProps } from './components/agent/SessionBrowser.tsx'
+export {
+  STEP_DISPLAY_OPTIONS,
+  SessionFilters,
+  SessionFiltersButton,
+  StepDisplayControl,
+  type SessionFiltersButtonProps,
+  type SessionFiltersProps,
+} from './components/agent/SessionFilters.tsx'
 export { SessionItem, type SelectModifiers, type SessionItemProps } from './components/agent/SessionItem.tsx'
 export { SessionStatusIcon } from './components/agent/SessionStatusIcon.tsx'
 export { EngineIcon, engineMark, vendorMarkClass, vendorTextClass } from './components/agent/EngineIcon.tsx'
-export { type ShellStepOptions, type Step, type StepKind, StepRow, sessionSteps } from './components/agent/SessionSteps.tsx'
+export {
+  type ShellStepOptions,
+  type Step,
+  type StepKind,
+  type TaskStepOptions,
+  StepRow,
+  sessionSteps,
+} from './components/agent/SessionSteps.tsx'
 export {
   SUBAGENT_DISPLAY_META,
   SUBAGENT_DISPLAY_ORDER,

package/src/lib/file-link.ts

@@ -1,3 +1,5 @@
+import { resolvePosix } from '@workerdeck/protocol'
+
 export type FileLink = {
   path: string
   line?: number
@@ -45,7 +47,7 @@ export function parseFileLink(href: string | undefined, cwd: string | undefined)
     return undefined
   }
 
-  const path = target.startsWith('/') ? normalize(target) : cwd ? normalize(`${cwd}/${target}`) : undefined
+  const path = resolvePosix(target, cwd)
   return path ? { path, ...(line === undefined ? {} : { line }) } : undefined
 }
 
@@ -53,18 +55,3 @@ function readLine(value: string | undefined): number | undefined {
   const parsed = value === undefined ? Number.NaN : Number(value)
   return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined
 }
-
-function normalize(path: string): string {
-  const out: string[] = []
-  for (const part of path.split('/')) {
-    if (part === '' || part === '.') {
-      continue
-    }
-    if (part === '..') {
-      out.pop()
-      continue
-    }
-    out.push(part)
-  }
-  return `/${out.join('/')}`
-}

package/src/lib/permission-prompt.ts

@@ -0,0 +1,57 @@
+import type { PermissionRequest } from '@workerdeck/protocol'
+import { planFromRequest } from './plan-request.ts'
+import { shellRequestPayload, shellRequestTitle, type ShellRequestPayload } from './shell-request.ts'
+
+export type PermissionChoiceKey = 'allow' | 'deny' | 'stop'
+
+export type PermissionChoice = {
+  key: PermissionChoiceKey
+  button: string
+  option: string
+  danger?: boolean
+}
+
+export type PermissionPromptModel = {
+  plan?: string
+  shell?: ShellRequestPayload
+  heading: string
+  question: string
+  description?: string
+  decisionReason?: string
+  choices: [PermissionChoice, PermissionChoice, PermissionChoice]
+  denyPlaceholder: string
+}
+
+type PermissionRequestLike = Pick<PermissionRequest, 'toolName' | 'input' | 'title' | 'displayName' | 'description' | 'decisionReason'>
+
+export function permissionPromptModel(request: PermissionRequestLike): PermissionPromptModel {
+  const plan = planFromRequest(request)
+  const shell = plan ? undefined : shellRequestPayload(request)
+  const context = { description: request.description, decisionReason: request.decisionReason }
+  if (plan) {
+    return {
+      plan,
+      heading: 'Plan ready for review',
+      question: 'Ready to implement this plan?',
+      ...context,
+      choices: [
+        { key: 'allow', button: 'Approve plan', option: 'Approve plan' },
+        { key: 'deny', button: 'Keep planning', option: 'Keep planning - tell it what to change' },
+        { key: 'stop', button: 'Stop the turn', option: 'No, and stop the turn', danger: true },
+      ],
+      denyPlaceholder: 'What should change? (optional) - the agent keeps planning and reads this',
+    }
+  }
+  return {
+    shell,
+    heading: shell ? shellRequestTitle(shell) : (request.title ?? request.displayName ?? 'Permission needed'),
+    question: shell ? 'Do you want to let it?' : 'Do you want to proceed?',
+    ...context,
+    choices: [
+      { key: 'allow', button: 'Allow', option: 'Yes' },
+      { key: 'deny', button: 'Deny', option: 'No, and tell the agent what to do differently' },
+      { key: 'stop', button: 'Deny & stop', option: 'No, and stop the turn', danger: true },
+    ],
+    denyPlaceholder: 'Reason (optional) - the agent reads this and can try something else',
+  }
+}

package/src/lib/question-answers.ts

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+import type { UserQuestion } from '@workerdeck/protocol'
+
+export type Selection = { labels: string[]; other: string; otherActive: boolean }
+
+export const EMPTY_SELECTION: Selection = { labels: [], other: '', otherActive: false }
+
+export function answerFor(selection: Selection): string {
+  const parts = [...selection.labels]
+  if (selection.otherActive && selection.other.trim()) {
+    parts.push(selection.other.trim())
+  }
+  return parts.join(', ')
+}
+
+export function toggleLabel(selection: Selection, label: string, multiSelect: boolean): Selection {
+  if (!multiSelect) {
+    return { ...selection, labels: [label], otherActive: false }
+  }
+  const labels = selection.labels.includes(label) ? selection.labels.filter((l) => l !== label) : [...selection.labels, label]
+  return { ...selection, labels }
+}
+
+export function toggleOther(selection: Selection, multiSelect: boolean): Selection {
+  const otherActive = !selection.otherActive
+  return { ...selection, otherActive, labels: otherActive && !multiSelect ? [] : selection.labels }
+}
+
+export function answersFor(questions: readonly UserQuestion[], selections: readonly Selection[]): Record<string, string> {
+  const answers: Record<string, string> = {}
+  questions.forEach((question, index) => {
+    answers[question.question] = answerFor(selections[index] ?? EMPTY_SELECTION)
+  })
+  return answers
+}
+
+export interface QuestionAnswers {
+  selections: Selection[]
+  selectionFor: (index: number) => Selection
+  answered: (index: number) => boolean
+  complete: boolean
+  update: (index: number, patch: Partial<Selection>) => void
+  toggle: (index: number, label: string) => void
+  toggleOther: (index: number) => void
+  answers: () => Record<string, string>
+}
+
+export function useQuestionAnswers(questions: readonly UserQuestion[]): QuestionAnswers {
+  const [selections, setSelections] = useState<Selection[]>(() => questions.map(() => EMPTY_SELECTION))
+  const selectionFor = (index: number) => selections[index] ?? EMPTY_SELECTION
+  const answered = (index: number) => answerFor(selectionFor(index)) !== ''
+  const edit = (index: number, change: (selection: Selection) => Selection) =>
+    setSelections((prev) => questions.map((_, i) => (i === index ? change(prev[i] ?? EMPTY_SELECTION) : (prev[i] ?? EMPTY_SELECTION))))
+  const multiSelect = (index: number) => questions[index]?.multiSelect === true
+  return {
+    selections,
+    selectionFor,
+    answered,
+    complete: questions.every((_, index) => answered(index)),
+    update: (index, patch) => edit(index, (selection) => ({ ...selection, ...patch })),
+    toggle: (index, label) => edit(index, (selection) => toggleLabel(selection, label, multiSelect(index))),
+    toggleOther: (index) => edit(index, (selection) => toggleOther(selection, multiSelect(index))),
+    answers: () => answersFor(questions, selections),
+  }
+}