@workerdeck/ui 3.0.1 → 3.2.0

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,8 +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 { shellRequestLines, shellRequestPayload, shellRequestTitle } from '../../lib/shell-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'
 
@@ -29,8 +29,9 @@ export function PermissionPrompt({ request, onApprove, onDeny, className }: Perm
     setDenying(false)
   }
 
-  const plan = planFromRequest(request)
-  const shell = plan ? undefined : shellRequestPayload(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)
 
@@ -39,15 +40,9 @@ 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'
-              : shell
-                ? shellRequestTitle(shell)
-                : (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>
@@ -84,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>
@@ -108,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

package/src/components/agent/Scrubber.tsx

@@ -1,19 +1,17 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import type { PermissionRequest } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
-import { toolInputPreview } from '../../lib/format.ts'
 import { cn } from '../../lib/utils.ts'
 import {
   approvalCluster,
   buildMarks,
   clusterMarks,
-  doneLine,
-  excerpt,
-  KIND_NAME,
   nearestMember,
+  proportionalPlacement,
   type Cluster,
   type Mark,
 } from './scrubber-marks.ts'
+import { CARD_PEEK, peekContent } from './scrubber-peek.tsx'
 
 export interface ScrubberProps {
   items: readonly TranscriptItem[]
@@ -26,74 +24,6 @@ export interface ScrubberProps {
   className?: string
 }
 
-function peekContent(
-  cluster: Cluster,
-  first: Mark | undefined,
-  items: readonly TranscriptItem[],
-  pendingApprovals: readonly PermissionRequest[],
-): 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>{request.title ?? 'Permission required'}</div>
-        <div className="wd-scrub-ex" data-tone="muted">
-          {`${request.displayName ?? request.toolName}(${toolInputPreview(request.input)})`}
-        </div>
-      </>
-    ) : null
-  } else if (first && first.kind !== 'recap') {
-    const item = items[first.itemIndex]
-    if (first.kind === 'turn' || first.kind === 'turnFailed') {
-      const turn = first.turnIndex === undefined ? undefined : items[first.turnIndex]
-      body = (
-        <>
-          {item?.kind === 'assistant_text' ? <div className="wd-scrub-ex">{item.text}</div> : null}
-          {turn?.kind === 'turn_result' ? (
-            <>
-              <div data-tone={turn.isError ? 'danger' : 'muted'}>{doneLine(turn)}</div>
-              {turn.errors?.map((message, index) => (
-                <div key={index} data-tone="danger">
-                  {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="wd-scrub-ex" data-tone={first.kind === 'error' || first.kind === 'toolFailed' ? 'danger' : undefined}>
-            {first.kind === 'user' ? <span data-tone="muted">{'❯ '}</span> : null}
-            {excerpt(item)}
-          </div>
-          {failure ? (
-            <div className="wd-scrub-ex" data-tone="danger">
-              {failure}
-            </div>
-          ) : null}
-        </>
-      )
-    }
-  }
-  return (
-    <>
-      <div data-tone="muted">
-        {KIND_NAME[first?.kind ?? cluster.kind]}
-        {more}
-      </div>
-      {body}
-    </>
-  )
-}
-
 export function Scrubber({
   items,
   pendingApprovals,
@@ -138,7 +68,8 @@ export function Scrubber({
     if (railH <= 0) {
       return []
     }
-    const built = clusterMarks(buildMarks(items, { frameParentId, bookmarks, recapItemIndex }), railH, items.length)
+    const marks = buildMarks(items, { frameParentId, bookmarks, recapItemIndex })
+    const built = clusterMarks(marks, proportionalPlacement(railH, items.length))
     if (pendingApprovals.length > 0) {
       built.push(approvalCluster(railH))
     }
@@ -191,7 +122,7 @@ export function Scrubber({
       ))}
       {peek ? (
         <div ref={peekRef} className="wd-scrub-peek" style={{ top: peek.y }}>
-          {peekContent(peek.cluster, peek.mark, items, pendingApprovals)}
+          {peekContent({ cluster: peek.cluster, first: peek.mark, items, pendingApprovals }, CARD_PEEK)}
         </div>
       ) : null}
     </div>