@workerdeck/ui 1.3.0 → 2.0.0

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

@@ -99,6 +99,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'