@workerdeck/ui 2.15.0 → 3.1.0

package/src/components/agent/SessionSteps.tsx

@@ -1,28 +1,52 @@
-import { ArrowRight, Check, CircleAlert } from 'lucide-react'
-import { isAgentRecord, promotedShells, subagentLabel, visibleSubagents } from '@workerdeck/protocol'
-import type { SessionInfo, ShellInfo, SubagentDisplay, SubagentInfo } from '@workerdeck/protocol'
+import { ArrowRight, Check, Circle, CircleAlert } from 'lucide-react'
+import { displayedTasks, isAgentRecord, subagentLabel, visibleShells, visibleSubagents } from '@workerdeck/protocol'
+import type { SessionInfo, SessionTask, ShellInfo, StepDisplay, SubagentDisplay, SubagentInfo } from '@workerdeck/protocol'
 import { Spinner } from '../ui/Spinner.tsx'
 import { cn } from '../../lib/utils.ts'
-import { SHELL_GLYPH, SHELL_KILL_GLYPH, shellInfoFailed, shellInfoLabel, shellInfoStatusText, shellTitle } from '../terminal/shell-row.ts'
+import { AgentWriteIcon } from '../terminal/affordances.tsx'
+import {
+  SHELL_AGENT_WRITE_NOTE,
+  SHELL_GLYPH,
+  SHELL_KILL_GLYPH,
+  shellAgentWriteLabel,
+  shellGrantable,
+  shellInfoFailed,
+  shellInfoLabel,
+  shellInfoStatusText,
+  shellTitle,
+} from '../terminal/shell-row.ts'
 
-export type StepKind = 'agent' | 'shell'
+export type StepKind = 'agent' | 'shell' | 'task'
 
 export type Step = {
   key: string
   kind: StepKind
   label: string
   noun: string
-  state: 'done' | 'running' | 'failed'
+  state: 'done' | 'running' | 'failed' | 'pending'
   detail?: string
   title: string
   onSelect: () => void
   onKill?: () => void
+  killLabel?: string
+  agentWrite?: { granted: boolean; label: string; toggle: () => void }
 }
 
 export type ShellStepOptions = {
   now: number
+  show?: StepDisplay
   onSelect: (shellId: string) => void
   onKill?: (shellId: string) => void
+  // Offered only where the session's agent holds the shell write tools.
+  onAgentWrite?: (shellId: string, enabled: boolean) => void
+}
+
+export type TaskStepOptions = {
+  show: StepDisplay
+  // Whether the session is still working: a checklist item left in progress after the turn ended is not running.
+  live: boolean
+  onSelect: (task: SessionTask) => void
+  onStop?: (toolUseId: string) => void
 }
 
 export function sessionSteps(
@@ -30,6 +54,7 @@ export function sessionSteps(
   onSelect: (toolUseId: string) => void,
   show: SubagentDisplay = 'all',
   shells?: ShellStepOptions,
+  tasks?: TaskStepOptions,
 ): Step[] {
   const agents: Step[] = visibleSubagents(info, show)
     .filter(isAgentRecord)
@@ -43,13 +68,33 @@ export function sessionSteps(
       title: `${subagentLabel(sub)} · ${sub.toolCount} tool${sub.toolCount === 1 ? '' : 's'}`,
       onSelect: () => onSelect(sub.toolUseId),
     }))
+  const taskSteps = tasks === undefined ? [] : displayedTasks(info, tasks.show).map((task) => taskStep(task, tasks))
   if (shells === undefined) {
-    return agents
+    return [...agents, ...taskSteps]
+  }
+  const grants = info.shellAgentWrite !== undefined
+  const shellSteps = visibleShells(info, shells.show ?? 'active', shells.now).map((shell) => shellStep(shell, shells, grants))
+  return [...agents, ...taskSteps, ...shellSteps]
+}
+
+function taskStep(task: SessionTask, options: TaskStepOptions): Step {
+  const stalled = task.source === 'checklist' && task.state === 'running' && !options.live
+  const toolUseId = task.toolUseId
+  return {
+    key: task.key,
+    kind: 'task',
+    label: task.label,
+    noun: 'task',
+    state: stalled ? 'pending' : task.state,
+    detail: task.detail,
+    title: stalled ? `${task.label} · left in progress` : task.label,
+    onSelect: () => options.onSelect(task),
+    onKill: task.stoppable && toolUseId !== undefined && options.onStop ? () => options.onStop?.(toolUseId) : undefined,
+    killLabel: 'Stop this task',
   }
-  return [...agents, ...promotedShells(info, shells.now).map((shell) => shellStep(shell, shells))]
 }
 
-function shellStep(shell: ShellInfo, options: ShellStepOptions): Step {
+function shellStep(shell: ShellInfo, options: ShellStepOptions, grants: boolean): Step {
   const status = shellInfoStatusText(shell)
   const running = shell.status === 'running'
   return {
@@ -58,10 +103,19 @@ function shellStep(shell: ShellInfo, options: ShellStepOptions): Step {
     label: shellInfoLabel(shell),
     noun: 'shell',
     state: shellInfoFailed(shell) ? 'failed' : running ? 'running' : 'done',
-    detail: running ? undefined : status,
+    detail: running ? (shell.agentWrite === true ? SHELL_AGENT_WRITE_NOTE : undefined) : status,
     title: `${shellTitle(shell)} · ${status}`,
     onSelect: () => options.onSelect(shell.id),
     onKill: running && options.onKill ? () => options.onKill?.(shell.id) : undefined,
+    killLabel: 'Kill this shell',
+    agentWrite:
+      grants && options.onAgentWrite && shellGrantable(shell)
+        ? {
+            granted: shell.agentWrite === true,
+            label: shellAgentWriteLabel(shell),
+            toggle: () => options.onAgentWrite?.(shell.id, shell.agentWrite !== true),
+          }
+        : undefined,
   }
 }
 
@@ -80,7 +134,16 @@ function stepState(status: SubagentInfo['status']): Step['state'] {
 }
 
 export function StepRow({ step, active = false, onSelect }: { step: Step; active?: boolean; onSelect: () => void }) {
-  const body = step.state === 'failed' ? 'text-danger' : step.kind === 'shell' ? 'text-[var(--wd-shell-accent)]' : 'text-success'
+  const body =
+    step.state === 'failed'
+      ? 'text-danger'
+      : step.kind === 'shell'
+        ? 'text-[var(--wd-shell-accent)]'
+        : step.kind === 'task'
+          ? step.state === 'pending'
+            ? 'text-fg-4'
+            : 'text-fg-2'
+          : 'text-success'
   return (
     <div className={cn('flex w-full items-center rounded-[4px] pr-1.5', active ? 'bg-row-selected' : 'hover:bg-row-active', body)}>
       <button
@@ -96,13 +159,31 @@ export function StepRow({ step, active = false, onSelect }: { step: Step; active
         <StepIcon step={step} />
         <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}
-        <ArrowRight className="size-3.5 shrink-0 text-fg-4" />
+        {step.kind === 'agent' ? <ArrowRight className="size-3.5 shrink-0 text-fg-4" /> : null}
       </button>
+      {step.agentWrite ? (
+        <button
+          type="button"
+          aria-label={step.agentWrite.label}
+          aria-pressed={step.agentWrite.granted}
+          title={step.agentWrite.label}
+          onClick={(e) => {
+            e.stopPropagation()
+            step.agentWrite?.toggle()
+          }}
+          className={cn(
+            'shrink-0 px-1 text-micro leading-none outline-none',
+            step.agentWrite.granted ? 'text-warning' : 'text-fg-4 hover:text-fg-1',
+          )}
+        >
+          <AgentWriteIcon granted={step.agentWrite.granted} className="size-3.5" />
+        </button>
+      ) : null}
       {step.onKill ? (
         <button
           type="button"
-          aria-label={`Kill ${step.label}`}
-          title="Kill this shell"
+          aria-label={`${step.kind === 'task' ? 'Stop' : 'Kill'} ${step.label}`}
+          title={step.killLabel}
           onClick={(e) => {
             e.stopPropagation()
             step.onKill?.()
@@ -127,6 +208,9 @@ function StepIcon({ step }: { step: Step }) {
     case 'failed': {
       return <CircleAlert className="size-[11px] shrink-0" />
     }
+    case 'pending': {
+      return <Circle className="size-[11px] shrink-0" />
+    }
     default: {
       return <Check className="size-[11px] shrink-0" />
     }

package/src/components/agent/SessionWorkspace.tsx

@@ -17,8 +17,8 @@ export interface SessionWorkspaceProps {
   sessionId: string | undefined
   header?: SessionPanelProps['header']
   transcriptVariant?: SessionPanelProps['transcriptVariant']
-  transcriptDensity?: SessionPanelProps['transcriptDensity']
   transcriptFont?: SessionPanelProps['transcriptFont']
+  affordances?: SessionPanelProps['affordances']
   scrubber?: SessionPanelProps['scrubber']
   bookmarks?: SessionPanelProps['bookmarks']
   onToggleBookmark?: SessionPanelProps['onToggleBookmark']
@@ -54,8 +54,8 @@ export function SessionWorkspace({
   sessionId,
   header,
   transcriptVariant,
-  transcriptDensity,
   transcriptFont,
+  affordances,
   scrubber,
   bookmarks,
   onToggleBookmark,
@@ -217,8 +217,8 @@ export function SessionWorkspace({
             sessionId={sessionId}
             header={hoisted}
             transcriptVariant={transcriptVariant}
-            transcriptDensity={transcriptDensity}
             transcriptFont={transcriptFont}
+            affordances={affordances}
             scrubber={scrubber}
             bookmarks={bookmarks}
             onToggleBookmark={onToggleBookmark}

package/src/components/agent/ShellStrip.tsx

@@ -1,11 +1,9 @@
-import { ArrowLeft, X } from 'lucide-react'
+import { X } from 'lucide-react'
 import type { ShellInfo } from '@workerdeck/protocol'
 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 { shellInfoFailed, shellInfoStatusText, shellTitle } from '../terminal/shell-row.ts'
-import { KillShellAction, WithActions } from '../terminal/affordances.tsx'
+import { shellAgentWriteLabel, shellGrantable, shellInfoFailed, shellInfoStatusText, shellTitle } from '../terminal/shell-row.ts'
+import { AgentWriteAction, AgentWriteIcon, KillShellAction } from '../terminal/affordances.tsx'
+import { FrameStrip } from './FrameStrip.tsx'
 
 export interface ShellStripProps {
   shell: ShellInfo | undefined
@@ -13,48 +11,41 @@ export interface ShellStripProps {
   cols?: number
   onBack: () => void
   onKill?: () => void
+  onAgentWrite?: (enabled: boolean) => void
   terminal: boolean
   fontSize?: number
   lineHeight?: number
 }
 
-export function ShellStrip({ shell, label, cols, onBack, onKill, terminal, fontSize, lineHeight }: ShellStripProps) {
+export function ShellStrip({ shell, label, cols, onBack, onKill, onAgentWrite, terminal, fontSize, lineHeight }: ShellStripProps) {
   const running = shell?.status === 'running'
   const failed = shell ? shellInfoFailed(shell) : false
   const name = shell ? shellTitle(shell) : label
   const status = shell ? shellInfoStatusText(shell) : undefined
   const width = cols ?? shell?.cols
   const detail = width === undefined ? undefined : `${width} cols`
+  const granted = shell?.agentWrite === true
+  const grant = shell && onAgentWrite && shellGrantable(shell) ? () => onAgentWrite(!granted) : undefined
 
-  if (terminal) {
-    return (
-      <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} className="shrink-0">
-        <WithActions actions={running && onKill ? <KillShellAction onKill={onKill} /> : null}>
-          <Row glyph="←" glyphTone="dim" indent={1} tone={failed ? 'red' : 'magenta'}>
-            <button type="button" onClick={onBack} aria-label="Back to the session" className="cursor-pointer text-left">
-              {name}
-            </button>
-            {status ? <Ink tone={failed ? 'red' : running ? 'magenta' : 'dim'}> · {status}</Ink> : null}
-            {detail ? <Ink tone="faint"> · {detail}</Ink> : null}
-          </Row>
-        </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 font-mono text-body-sm', failed ? 'text-danger' : 'text-fg-2')}>{name}</span>
-      {status ? (
-        <span className={cn('shrink-0 text-label', failed ? 'text-danger' : running ? 'text-[var(--wd-shell-accent)]' : 'text-fg-3')}>
-          {status}
-        </span>
+  const actions = terminal ? (
+    <>
+      {grant && shell ? <AgentWriteAction granted={granted} label={shellAgentWriteLabel(shell)} onToggle={grant} /> : null}
+      {running && onKill ? <KillShellAction onKill={onKill} /> : null}
+    </>
+  ) : (
+    <>
+      {grant && shell ? (
+        <button
+          type="button"
+          aria-label={shellAgentWriteLabel(shell)}
+          aria-pressed={granted}
+          title={shellAgentWriteLabel(shell)}
+          className={cn('shrink-0 text-label', granted ? 'text-warning' : 'text-fg-3 hover:text-fg-1')}
+          onClick={grant}
+        >
+          <AgentWriteIcon granted={granted} className="size-3.5" />
+        </button>
       ) : null}
-      {detail ? <span className="shrink-0 text-label text-fg-4">{detail}</span> : null}
       {running && onKill ? (
         <button
           type="button"
@@ -66,6 +57,22 @@ export function ShellStrip({ shell, label, cols, onBack, onKill, terminal, fontS
           <X className="size-3.5" />
         </button>
       ) : null}
-    </div>
+    </>
+  )
+
+  return (
+    <FrameStrip
+      kind="shell"
+      name={name}
+      status={status}
+      detail={detail}
+      failed={failed}
+      live={running}
+      onBack={onBack}
+      actions={actions}
+      terminal={terminal}
+      fontSize={fontSize}
+      lineHeight={lineHeight}
+    />
   )
 }

package/src/components/agent/ShellTerminal.tsx

@@ -126,7 +126,7 @@ export function ShellTerminal({ handle, shellId, onEnded, onShell, fontSize, cla
   }, [ready])
 
   return (
-    <div className={cn('relative min-h-0 flex-1 overflow-hidden px-2 py-1', className)}>
+    <div className={cn('wd-shell-term relative min-h-0 flex-1 overflow-hidden px-2 py-1', className)}>
       <div ref={host} className="h-full w-full" onClick={() => term.current?.focus()} />
       {ready && shell.status !== 'idle' ? null : (
         <div className="absolute inset-0 grid place-items-center">

package/src/components/agent/SubagentStrip.tsx

@@ -1,14 +1,10 @@
-import { ArrowLeft } from 'lucide-react'
 import type { TranscriptItem } from '@workerdeck/react'
-import { cn } from '../../lib/utils.ts'
 import { formatDuration } from '../../lib/format.ts'
-import { Button } from '../ui/Button.tsx'
-import { Ink, Row } from '../terminal/row.tsx'
-import { TerminalSurface } from '../terminal/surface.tsx'
 import { taskBusy, taskFailed, taskIdentity } from '../terminal/tool-run.ts'
 import type { ToolCallItem } from '../terminal/blocks.ts'
 import { usePulse } from './pulse.tsx'
 import { useTicker } from '../terminal/items.tsx'
+import { FrameStrip } from './FrameStrip.tsx'
 
 export function SubagentStrip({
   task,
@@ -39,31 +35,18 @@ export function SubagentStrip({
   const status = !task ? undefined : failed ? 'failed' : busy ? `${pulse} working…` : 'done'
   const detail = [tools > 0 ? `${tools} tool${tools === 1 ? '' : 's'}` : undefined, elapsed].filter(Boolean).join(' · ')
 
-  if (terminal) {
-    return (
-      <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} className="shrink-0">
-        <button type="button" onClick={onBack} aria-label="Back to the session" className="block w-full cursor-pointer text-left">
-          <Row glyph="←" glyphTone="dim" indent={1} tone={failed ? 'red' : 'green'}>
-            {name}
-            {status ? <Ink tone={failed ? 'red' : busy ? 'mark' : 'dim'}> · {status}</Ink> : null}
-            {detail ? <Ink tone="faint"> · {detail}</Ink> : null}
-          </Row>
-        </button>
-      </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', failed ? 'text-danger' : 'text-fg-2')}>{name}</span>
-      {status ? (
-        <span className={cn('shrink-0 text-label', failed ? 'text-danger' : busy ? 'text-accent' : 'text-fg-3')}>{status}</span>
-      ) : null}
-      {detail ? <span className="shrink-0 text-label text-fg-4">{detail}</span> : null}
-    </div>
+    <FrameStrip
+      kind="subagent"
+      name={name}
+      status={status}
+      detail={detail}
+      failed={failed}
+      live={busy}
+      onBack={onBack}
+      terminal={terminal}
+      fontSize={fontSize}
+      lineHeight={lineHeight}
+    />
   )
 }

package/src/components/agent/ToolCallCard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import type { TranscriptItem } from '@workerdeck/react'
 import { ChevronDown, Clock } from 'lucide-react'
 import { Badge } from '../ui/Badge.tsx'
@@ -9,27 +9,17 @@ import { toolInputPreview } from '../../lib/format.ts'
 import { toolIcon } from '../../lib/tool-icon.ts'
 import { useToolResultFetcher } from './tool-result-fetch.tsx'
 import { useToolTitle } from './tool-titles.tsx'
-import { useToolResultImageSrc } from './tool-result-image.tsx'
-import { IMAGE_UNAVAILABLE, imagePlaceholder } from '../terminal/image-box.ts'
+import { useHostImageSrc, useToolResultImageSrc, type HostImageLoader } from './tool-result-image.tsx'
+import { ViewableImage } from './image-viewer.tsx'
+import { IMAGE_UNAVAILABLE, baseName, hostImagePathOf, imagePlaceholder, resultImageName } from '../terminal/image-box.ts'
 
 export type ToolCallItem = Extract<TranscriptItem, { kind: 'tool_call' }>
 
 const RESULT_PREVIEW_CHARS = 2000
 
-const IMAGE_TOOLS = new Set(['CodexImageGeneration', 'CodexImageView'])
-
-function imagePathOf(item: ToolCallItem): string | undefined {
-  if (!IMAGE_TOOLS.has(item.name)) {
-    return undefined
-  }
-  const input = item.input as { savedPath?: unknown; path?: unknown } | null
-  const path = input?.savedPath ?? input?.path
-  return typeof path === 'string' ? path : undefined
-}
-
 export interface ToolCallCardProps {
   item: ToolCallItem
-  hostImage?: (path: string) => Promise<string | undefined>
+  hostImage?: HostImageLoader
   className?: string
 }
 
@@ -106,7 +96,7 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
   const [fullResult, setFullResult] = useState(false)
   const [fetching, setFetching] = useState(false)
   const fetchResult = useToolResultFetcher()
-  const imagePath = imagePathOf(item)
+  const imagePath = hostImagePathOf(item)
   const status: Status = item.status ?? (item.result === undefined ? 'running' : 'settled')
   const badge = STATE_BADGE[status]
   const isError = status === 'failed' || item.result?.isError === true
@@ -155,12 +145,12 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
     </div>
   ) : null
 
-  const image = imagePath && hostImage ? <HostImage path={imagePath} load={hostImage} /> : null
+  const image = imagePath ? <HostImage path={imagePath} load={hostImage} /> : null
 
   const resultImages = item.result?.images?.length ? (
     <div className="flex flex-col gap-2 border-t border-border p-2.5">
       {item.result.images.map((ref) => (
-        <ResultImage key={ref.partIndex} toolUseId={item.id} image={ref} />
+        <ResultImage key={ref.partIndex} toolUseId={item.id} name={resultImageName(item.name, ref)} image={ref} />
       ))}
     </div>
   ) : null
@@ -209,12 +199,14 @@ function PlainPayload({ code, label, className }: { code: string; label: string;
 
 type ToolResultImage = NonNullable<NonNullable<ToolCallItem['result']>['images']>[number]
 
-function ResultImage({ toolUseId, image }: { toolUseId: string; image: ToolResultImage }) {
+function ResultImage({ toolUseId, name, image }: { toolUseId: string; name: string; image: ToolResultImage }) {
   const { src, failed } = useToolResultImageSrc({ toolUseId, ...image })
   return (
     <div className="flex h-60 items-start overflow-hidden rounded-md border border-border bg-surface-hover">
       {src ? (
-        <img src={src} alt={imagePlaceholder(image)} className="h-full max-w-full object-contain" />
+        <ViewableImage image={{ src, name }} className="h-full max-w-full">
+          <img src={src} alt={name} className="h-full max-w-full object-contain" />
+        </ViewableImage>
       ) : (
         <span className="p-2 text-label text-fg-4">{failed ? IMAGE_UNAVAILABLE : imagePlaceholder(image)}</span>
       )}
@@ -222,32 +214,17 @@ function ResultImage({ toolUseId, image }: { toolUseId: string; image: ToolResul
   )
 }
 
-function HostImage({ path, load }: { path: string; load: (path: string) => Promise<string | undefined> }) {
-  const [src, setSrc] = useState<string | undefined>()
-  useEffect(() => {
-    let cancelled = false
-    setSrc(undefined)
-    load(path)
-      .then((url) => {
-        if (!cancelled) {
-          setSrc(url)
-        }
-      })
-      .catch(() => {})
-    return () => {
-      cancelled = true
-    }
-  }, [path, load])
+function HostImage({ path, load }: { path: string; load?: HostImageLoader }) {
+  const { src } = useHostImageSrc(path, load)
   if (!src) {
     return null
   }
+  const name = baseName(path)
   return (
     <div className="border-t border-border p-2.5">
-      <img
-        src={src}
-        alt={path.split('/').pop() ?? 'Generated image'}
-        className="max-h-96 w-auto max-w-full rounded-md border border-border"
-      />
+      <ViewableImage image={{ src, name }} className="block max-w-full">
+        <img src={src} alt={name} className="max-h-96 w-auto max-w-full rounded-md border border-border" />
+      </ViewableImage>
     </div>
   )
 }