@workerdeck/ui 1.4.0 → 2.1.0

package/src/components/agent/SessionSteps.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, Check, ChevronDown, ChevronRight, CircleAlert, Dot, PauseCircle } from 'lucide-react'
+import { ArrowRight, Check, ChevronDown, ChevronRight, CircleAlert } from 'lucide-react'
 import { isAgentRecord, subagentLabel } from '@workerdeck/protocol'
 import type { SessionInfo, SubagentInfo } from '@workerdeck/protocol'
 import { Spinner } from '../ui/Spinner.tsx'
@@ -8,28 +8,22 @@ export type Step = {
   key: string
   label: string
   noun: string
-  kind: 'agent' | 'task'
-  state: 'done' | 'running' | 'pending' | 'failed'
+  state: 'done' | 'running' | 'failed'
   detail?: string
   title: string
   onSelect: () => void
 }
 
-export function sessionSteps(info: SessionInfo, onSelect: (toolUseId: string, kind: Step['kind']) => void): Step[] {
-  const steps = (info.subagents ?? []).map((sub) => {
-    const kind = isAgentRecord(sub) ? ('agent' as const) : ('task' as const)
-    return {
-      key: sub.toolUseId,
-      label: subagentLabel(sub),
-      noun: 'agent',
-      kind,
-      state: stepState(sub.status),
-      detail: sub.toolCount > 0 ? String(sub.toolCount) : undefined,
-      title: `${subagentLabel(sub)} · ${sub.toolCount} tool${sub.toolCount === 1 ? '' : 's'}`,
-      onSelect: () => onSelect(sub.toolUseId, kind),
-    }
-  })
-  return [...steps.filter((s) => s.kind === 'agent'), ...steps.filter((s) => s.kind === 'task')]
+export function sessionSteps(info: SessionInfo, onSelect: (toolUseId: string) => void): Step[] {
+  return (info.subagents ?? []).filter(isAgentRecord).map((sub) => ({
+    key: sub.toolUseId,
+    label: subagentLabel(sub),
+    noun: 'agent',
+    state: stepState(sub.status),
+    detail: sub.toolCount > 0 ? String(sub.toolCount) : undefined,
+    title: `${subagentLabel(sub)} · ${sub.toolCount} tool${sub.toolCount === 1 ? '' : 's'}`,
+    onSelect: () => onSelect(sub.toolUseId),
+  }))
 }
 
 function stepState(status: SubagentInfo['status']): Step['state'] {
@@ -89,14 +83,12 @@ export function StepToggle({
 }
 
 export function StepRow({ step, active = false, onSelect }: { step: Step; active?: boolean; onSelect: () => void }) {
-  const agent = step.kind === 'agent'
-  const selected = active && agent
-  const body = step.state === 'failed' ? 'text-danger' : agent ? 'text-success' : 'text-fg-4'
+  const body = step.state === 'failed' ? 'text-danger' : 'text-success'
   return (
     <button
       type="button"
       title={step.title}
-      aria-current={selected || undefined}
+      aria-current={active || undefined}
       onClick={(e) => {
         e.stopPropagation()
         onSelect()
@@ -104,22 +96,19 @@ export function StepRow({ step, active = false, onSelect }: { step: Step; active
       className={cn(
         'flex w-full items-center gap-1.5 rounded-[4px] py-1 pr-2.5 pl-3.5',
         'text-left text-micro outline-none',
-        selected ? 'bg-row-selected' : 'hover:bg-row-active',
+        active ? 'bg-row-selected' : 'hover:bg-row-active',
         body,
       )}
     >
-      <StepIcon state={step.state} kind={step.kind} />
+      <StepIcon state={step.state} />
       <span className="min-w-0 flex-1 truncate">{step.label}</span>
       {step.detail ? <span className="shrink-0 tabular-nums text-fg-4">{step.detail}</span> : null}
-      {agent ? <ArrowRight className="size-3.5 shrink-0 text-fg-4" /> : null}
+      <ArrowRight className="size-3.5 shrink-0 text-fg-4" />
     </button>
   )
 }
 
-function StepIcon({ state, kind }: { state: Step['state']; kind: Step['kind'] }) {
-  if (kind === 'task' && state !== 'running' && state !== 'failed') {
-    return <Dot className="size-[11px] shrink-0" />
-  }
+function StepIcon({ state }: { state: Step['state'] }) {
   switch (state) {
     case 'running': {
       return <Spinner className="size-[11px] shrink-0" />
@@ -127,9 +116,6 @@ function StepIcon({ state, kind }: { state: Step['state']; kind: Step['kind'] })
     case 'failed': {
       return <CircleAlert className="size-[11px] shrink-0" />
     }
-    case 'pending': {
-      return <PauseCircle className="size-[11px] shrink-0" />
-    }
     default: {
       return <Check className="size-[11px] shrink-0" />
     }

package/src/components/agent/SessionWorkspace.tsx

@@ -19,13 +19,13 @@ export interface SessionWorkspaceProps {
   transcriptVariant?: SessionPanelProps['transcriptVariant']
   transcriptDensity?: SessionPanelProps['transcriptDensity']
   transcriptFont?: SessionPanelProps['transcriptFont']
-  midTurnSend?: SessionPanelProps['midTurnSend']
   scrubber?: SessionPanelProps['scrubber']
   bookmarks?: SessionPanelProps['bookmarks']
   onToggleBookmark?: SessionPanelProps['onToggleBookmark']
   stickyPrompt?: SessionPanelProps['stickyPrompt']
   openSubagent?: SessionPanelProps['openSubagent']
   reveal?: SessionPanelProps['reveal']
+  subagents?: SessionPanelProps['subagents']
   onSubagentChange?: SessionPanelProps['onSubagentChange']
   statusPlacement?: SessionPanelProps['statusPlacement']
   controlsSurface?: SessionPanelProps['controlsSurface']
@@ -52,13 +52,13 @@ export function SessionWorkspace({
   transcriptVariant,
   transcriptDensity,
   transcriptFont,
-  midTurnSend,
   scrubber,
   bookmarks,
   onToggleBookmark,
   stickyPrompt,
   openSubagent,
   reveal,
+  subagents,
   onSubagentChange,
   statusPlacement,
   controlsSurface,
@@ -211,13 +211,13 @@ export function SessionWorkspace({
             transcriptVariant={transcriptVariant}
             transcriptDensity={transcriptDensity}
             transcriptFont={transcriptFont}
-            midTurnSend={midTurnSend}
             scrubber={scrubber}
             bookmarks={bookmarks}
             onToggleBookmark={onToggleBookmark}
             stickyPrompt={stickyPrompt}
             openSubagent={openSubagent}
             reveal={reveal}
+            subagents={subagents}
             onSubagentChange={onSubagentChange}
             controlsSurface={controlsSurface}
             fontSize={fontSize}

package/src/components/agent/StatusBar.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, type ReactNode } from 'react'
 import type { ConnectionState, TranscriptState } from '@workerdeck/react'
-import type { ContextUsage, ProfileEngine, RateLimitInfo } from '@workerdeck/protocol'
+import type { ContextUsage, ProfileEngine, RateLimitInfo, SessionTask } from '@workerdeck/protocol'
+import { taskCountLabel, taskSummary } from '@workerdeck/protocol'
 import { RefreshCw, WifiOff } from 'lucide-react'
 import { Badge } from '../ui/Badge.tsx'
 import { ProgressRing } from '../ui/ProgressRing.tsx'
@@ -23,6 +24,8 @@ export interface StatusBarProps {
   onOpenStatus?: () => void
   onOpenContext?: () => void
   onOpenUsage?: () => void
+  tasks?: readonly SessionTask[]
+  onOpenTasks?: () => void
   controls?: ReactNode
   actions?: ReactNode
   placement?: 'top' | 'bottom'
@@ -134,6 +137,8 @@ export function StatusBar({
   onOpenStatus,
   onOpenContext,
   onOpenUsage,
+  tasks,
+  onOpenTasks,
   controls,
   actions,
   placement = 'top',
@@ -146,6 +151,7 @@ export function StatusBar({
   const weekly = windows?.seven_day
   const link: ConnectionState = connection ?? (connected === false ? 'reconnecting' : 'live')
   const terminal = useTranscriptVariant() === 'terminal'
+  const taskCount = tasks && tasks.length > 0 ? taskSummary(tasks) : undefined
   return (
     <div
       data-slot="status-bar"
@@ -185,6 +191,13 @@ export function StatusBar({
           </span>
         </Slot>
       ) : null}
+      {taskCount ? (
+        <Slot onClick={onOpenTasks} hint="Tasks">
+          <span className="text-label text-fg-3">
+            <span className={cn('tabular-nums', taskCount.running > 0 ? 'text-info' : undefined)}>{taskCountLabel(taskCount)}</span> tasks
+          </span>
+        </Slot>
+      ) : null}
       {controls ? <span className="self-center">{controls}</span> : null}
       <span className="flex-1" />
       <span className="font-mono text-label text-fg-3">{formatCost(state.totalCostUsd)}</span>

package/src/components/agent/TaskList.tsx

@@ -0,0 +1,89 @@
+import { ArrowRight, Check, CircleAlert, Circle } from 'lucide-react'
+import { taskSummary, visibleTasks } from '@workerdeck/protocol'
+import type { SessionTask } from '@workerdeck/protocol'
+import { Spinner } from '../ui/Spinner.tsx'
+import { cn } from '../../lib/utils.ts'
+
+export interface TaskListProps {
+  tasks: readonly SessionTask[]
+  showCompleted: boolean
+  // Absent where the toggle lives outside this list — VS Code puts it in the view's title bar.
+  onShowCompletedChange?: (showCompleted: boolean) => void
+  onSelectTask?: (task: SessionTask) => void
+  className?: string
+}
+
+export function TaskList({ tasks, showCompleted, onShowCompletedChange, onSelectTask, className }: TaskListProps) {
+  const summary = taskSummary(tasks)
+  const shown = visibleTasks(tasks, showCompleted)
+  const hidden = tasks.length - shown.length
+  return (
+    <div className={cn('flex flex-col', className)}>
+      <div className="flex items-baseline justify-between gap-4 pb-1.5">
+        <span className="text-label text-fg-3">
+          {summary.done} of {summary.total} done
+          {summary.failed > 0 ? ` · ${summary.failed} failed` : ''}
+        </span>
+        {summary.done > 0 && onShowCompletedChange ? (
+          <button
+            type="button"
+            onClick={() => onShowCompletedChange(!showCompleted)}
+            className="shrink-0 rounded-[4px] px-1 py-0.5 text-label text-fg-4 outline-none hover:bg-row-hover hover:text-fg-2"
+          >
+            {showCompleted ? 'Hide completed' : `Show completed (${summary.done})`}
+          </button>
+        ) : null}
+      </div>
+      {shown.length === 0 ? (
+        <p className="py-6 text-center text-body-sm text-fg-4">
+          {tasks.length === 0 ? 'No tasks yet — a checklist appears once the agent plans one.' : `${hidden} completed, all hidden.`}
+        </p>
+      ) : (
+        <div className="flex flex-col">
+          {shown.map((task) => (
+            <TaskRow key={task.key} task={task} onSelect={onSelectTask} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function TaskRow({ task, onSelect }: { task: SessionTask; onSelect?: (task: SessionTask) => void }) {
+  const pressable = onSelect !== undefined && task.toolUseId !== undefined
+  const body = task.state === 'failed' ? 'text-danger' : task.state === 'done' ? 'text-fg-4' : 'text-fg-2'
+  const row = (
+    <>
+      <TaskIcon state={task.state} />
+      <span className={cn('min-w-0 flex-1 truncate text-left', task.state === 'done' ? 'line-through' : undefined)}>{task.label}</span>
+      {task.detail ? <span className="shrink-0 tabular-nums text-fg-4">{task.detail}</span> : null}
+      {pressable ? <ArrowRight className="size-3.5 shrink-0 text-fg-4" /> : null}
+    </>
+  )
+  const className = cn('flex w-full items-center gap-1.5 rounded-[4px] px-1.5 py-1 text-body-sm outline-none', body)
+  if (!pressable) {
+    return <div className={className}>{row}</div>
+  }
+  return (
+    <button type="button" title={task.label} onClick={() => onSelect(task)} className={cn(className, 'hover:bg-row-active')}>
+      {row}
+    </button>
+  )
+}
+
+function TaskIcon({ state }: { state: SessionTask['state'] }) {
+  switch (state) {
+    case 'running': {
+      return <Spinner className="size-[13px] shrink-0" />
+    }
+    case 'failed': {
+      return <CircleAlert className="size-[13px] shrink-0" />
+    }
+    case 'done': {
+      return <Check className="size-[13px] shrink-0" />
+    }
+    default: {
+      return <Circle className="size-[13px] shrink-0 text-fg-4" />
+    }
+  }
+}

package/src/components/agent/TasksDialog.tsx

@@ -0,0 +1,46 @@
+import type { SessionTask } from '@workerdeck/protocol'
+import { Dialog, DialogBody, DialogContent, DialogHeader } from '../ui/Dialog.tsx'
+import { TaskList } from './TaskList.tsx'
+
+export interface TasksDialogProps {
+  tasks: readonly SessionTask[]
+  showCompleted: boolean
+  onShowCompletedChange: (showCompleted: boolean) => void
+  onSelectTask?: (task: SessionTask) => void
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  className?: string
+}
+
+export function TasksDialog({
+  tasks,
+  showCompleted,
+  onShowCompletedChange,
+  onSelectTask,
+  open,
+  onOpenChange,
+  className,
+}: TasksDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={className}>
+        <DialogHeader title="Tasks" description="The agent's checklist and the tasks it has spawned" />
+        <DialogBody>
+          <TaskList
+            tasks={tasks}
+            showCompleted={showCompleted}
+            onShowCompletedChange={onShowCompletedChange}
+            onSelectTask={
+              onSelectTask
+                ? (task) => {
+                    onOpenChange(false)
+                    onSelectTask(task)
+                  }
+                : undefined
+            }
+          />
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/terminal/todos.ts

@@ -1,6 +1,9 @@
-export type TodoStatus = 'pending' | 'in_progress' | 'completed'
+import type { ChecklistItem, ChecklistStatus } from '@workerdeck/protocol'
+import { parseTodoWriteInput } from '@workerdeck/protocol'
 
-export type TodoEntry = { status: TodoStatus; text: string }
+export type TodoStatus = ChecklistStatus
+
+export type TodoEntry = ChecklistItem
 
 export type TodoPreview = { summary: string; shown: TodoEntry[]; more?: string }
 
@@ -8,46 +11,12 @@ const PREVIEW_TODOS = 8
 
 const GLYPH: Record<TodoStatus, string> = { pending: '☐', in_progress: '◐', completed: '☒' }
 
-function todoEntry(value: unknown): TodoEntry | undefined {
-  if (typeof value !== 'object' || value === null) {
-    return undefined
-  }
-  const raw = value as { content?: unknown; status?: unknown; activeForm?: unknown }
-  const status = raw.status
-  if (status !== 'pending' && status !== 'in_progress' && status !== 'completed') {
-    return undefined
-  }
-  const content = typeof raw.content === 'string' ? raw.content.trim() : ''
-  if (content === '') {
-    return undefined
-  }
-  const active = typeof raw.activeForm === 'string' ? raw.activeForm.trim() : ''
-  return { status, text: status === 'in_progress' && active !== '' ? active : content }
-}
-
-// Whole-or-nothing: a malformed entry (streaming, partial input) falls back to the generic preview rather than a half-drawn checklist.
-export function parseTodos(input: unknown): TodoEntry[] | undefined {
-  const todos = (input as { todos?: unknown } | null)?.todos
-  if (!Array.isArray(todos) || todos.length === 0) {
-    return undefined
-  }
-  const out: TodoEntry[] = []
-  for (const value of todos) {
-    const entry = todoEntry(value)
-    if (entry === undefined) {
-      return undefined
-    }
-    out.push(entry)
-  }
-  return out
-}
-
 export function todoPreview(name: string, input: unknown): TodoPreview | undefined {
   if (name !== 'TodoWrite') {
     return undefined
   }
-  const todos = parseTodos(input)
-  if (todos === undefined) {
+  const todos = parseTodoWriteInput(input)
+  if (todos === undefined || todos.length === 0) {
     return undefined
   }
   const done = todos.reduce((n, todo) => n + (todo.status === 'completed' ? 1 : 0), 0)

package/src/index.ts

@@ -75,7 +75,6 @@ export { Reasoning, type ReasoningProps } from './components/agent/Reasoning.tsx
 export { Loader } from './components/agent/Loader.tsx'
 export { ToolCallCard, type ToolCallCardProps, type ToolCallItem } from './components/agent/ToolCallCard.tsx'
 export { ToolTitleProvider, useToolTitle } from './components/agent/tool-titles.tsx'
-export { HeldSendsBar, useHeldSends, type HeldSend, type HeldSends } from './components/agent/held-sends.tsx'
 export { FileCard, type FileCardProps, type FileDeliveredItem } from './components/agent/FileCard.tsx'
 export { PermissionPrompt, type PermissionPromptProps } from './components/agent/PermissionPrompt.tsx'
 export {
@@ -99,6 +98,8 @@ export {
 export { StatusBar, type StatusBarProps } from './components/agent/StatusBar.tsx'
 export { ContextDialog, type ContextDialogProps } 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'