@workerdeck/ui 3.0.1 → 3.1.0

package/src/components/agent/SessionSteps.tsx

@@ -1,6 +1,6 @@
-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 { AgentWriteIcon } from '../terminal/affordances.tsx'
@@ -16,34 +16,45 @@ import {
   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(
   info: SessionInfo,
   onSelect: (toolUseId: string) => void,
   show: SubagentDisplay = 'all',
   shells?: ShellStepOptions,
+  tasks?: TaskStepOptions,
 ): Step[] {
   const agents: Step[] = visibleSubagents(info, show)
     .filter(isAgentRecord)
@@ -57,11 +68,30 @@ 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
-  return [...agents, ...promotedShells(info, shells.now).map((shell) => shellStep(shell, shells, grants))]
+  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',
+  }
 }
 
 function shellStep(shell: ShellInfo, options: ShellStepOptions, grants: boolean): Step {
@@ -77,6 +107,7 @@ function shellStep(shell: ShellInfo, options: ShellStepOptions, grants: boolean)
     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)
         ? {
@@ -103,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
@@ -119,7 +159,7 @@ 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}
-        {step.kind === 'shell' ? 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
@@ -142,8 +182,8 @@ export function StepRow({ step, active = false, onSelect }: { step: Step; active
       {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?.()
@@ -168,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/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 { shellAgentWriteLabel, shellGrantable, shellInfoFailed, shellInfoStatusText, shellTitle } from '../terminal/shell-row.ts'
-import { AgentWriteAction, AgentWriteIcon, KillShellAction, WithActions } from '../terminal/affordances.tsx'
+import { AgentWriteAction, AgentWriteIcon, KillShellAction } from '../terminal/affordances.tsx'
+import { FrameStrip } from './FrameStrip.tsx'
 
 export interface ShellStripProps {
   shell: ShellInfo | undefined
@@ -29,43 +27,13 @@ export function ShellStrip({ shell, label, cols, onBack, onKill, onAgentWrite, t
   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
-          placement="inline"
-          actions={
-            <>
-              {grant && shell ? <AgentWriteAction granted={granted} label={shellAgentWriteLabel(shell)} onToggle={grant} /> : null}
-              {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>
-      ) : null}
-      {detail ? <span className="shrink-0 text-label text-fg-4">{detail}</span> : null}
+  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"
@@ -89,6 +57,22 @@ export function ShellStrip({ shell, label, cols, onBack, onKill, onAgentWrite, t
           <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/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/Transcript.tsx

@@ -243,3 +243,16 @@ export function Transcript({
     </TranscriptVariantProvider>
   )
 }
+
+export interface TerminalTranscriptProps {
+  state: TranscriptState
+  fileUrl?: (path: string) => string
+  fontSize?: number
+  lineHeight?: number
+  affordances?: TerminalAffordances | boolean
+  className?: string
+}
+
+export function TerminalTranscript(props: TerminalTranscriptProps) {
+  return <Transcript {...props} variant="terminal" />
+}

package/src/components/agent/TranscriptItemView.tsx

@@ -1,5 +1,5 @@
 import type { MessageAttachment } from '@workerdeck/protocol'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import type { ShellItem, TranscriptItem } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
 import { compactionText, formatCost, formatDuration, formatRelativeTime } from '../../lib/format.ts'
@@ -13,17 +13,9 @@ import { Row } from '../terminal/row.tsx'
 import { TerminalItemView } from '../terminal/TerminalTranscript.tsx'
 import { ViewableImage } from './image-viewer.tsx'
 import { peerLabel } from '../terminal/items.tsx'
-import { useShellActions } from './shell-actions.tsx'
-import { AgentWriteAction, BookmarkAction, CopyAction, KillShellAction, OpenShellAction, WithActions } from '../terminal/affordances.tsx'
-import {
-  shellAgentWriteLabel,
-  shellBodyLines,
-  shellFailed,
-  shellFooterText,
-  shellGrantable,
-  shellLabel,
-  shellStatusText,
-} from '../terminal/shell-row.ts'
+import { ShellItemActions, useShellActions, useVerifyRunning } from './shell-actions.tsx'
+import { BookmarkAction, CopyAction, WithActions } from '../terminal/affordances.tsx'
+import { shellBodyLines, shellFailed, shellFooterText, shellLabel, shellStatusText } from '../terminal/shell-row.ts'
 
 function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind: 'turn_result' }> }) {
   return (
@@ -166,37 +158,15 @@ function ToolCard({
 function ShellCard({ item }: { item: ShellItem }) {
   const [open, setOpen] = useState(false)
   const actions = useShellActions()
-  const running = item.shell.status === 'running'
   const failed = shellFailed(item)
   const lines = shellBodyLines(item, open)
   const footer = shellFooterText(item, open, lines.length)
 
   const shellId = item.shell.id
-  const verify = actions.verify
-  useEffect(() => {
-    if (running) {
-      void verify(shellId)
-    }
-  }, [running, shellId, verify])
+  useVerifyRunning(item)
 
   return (
-    <WithActions
-      actions={
-        <>
-          {actions.open ? <OpenShellAction onOpen={() => actions.open?.(shellId)} /> : null}
-          {actions.agentWrite && shellGrantable(item.shell) ? (
-            <AgentWriteAction
-              granted={item.shell.agentWrite === true}
-              label={shellAgentWriteLabel(item.shell)}
-              onToggle={() => void actions.agentWrite?.(shellId, item.shell.agentWrite !== true)}
-            />
-          ) : null}
-          {running ? <KillShellAction onKill={() => void actions.kill(shellId)} /> : null}
-          <BookmarkAction id={item.id} />
-          <CopyAction text={item.shell.command} label="Copy command" />
-        </>
-      }
-    >
+    <WithActions actions={<ShellItemActions item={item} />}>
       <div data-slot="shell" className="overflow-hidden rounded-md border border-border bg-surface">
         <div className="flex items-center gap-2 px-3 py-1.5">
           <span className="font-mono text-label text-[var(--wd-shell-accent)]">$</span>

package/src/components/agent/composer-commands.ts

@@ -1,4 +1,4 @@
-import type { SkillInfo, SlashCommandInfo } from '@workerdeck/protocol'
+import type { EngineCapabilities, PermissionMode, SkillInfo, SlashCommandInfo } from '@workerdeck/protocol'
 
 export type ClientCommand = {
   name: string
@@ -170,3 +170,82 @@ export function composerCommandRows(rows: readonly ComposerRow[]): ComposerComma
         },
   )
 }
+
+export type ClientCommandPanel = 'info' | 'context' | 'usage' | 'mcp' | 'skills'
+
+export type ClientCommandSources = {
+  capabilities: Pick<EngineCapabilities, 'permissionModes' | 'clearContext' | 'mcpStatus' | 'contextUsage' | 'rateLimits' | 'skillsList'>
+  hasModels: boolean
+  setModel: (model: string) => void
+  setPermissionMode: (mode: PermissionMode) => void
+  clearContext: () => void
+  openPanel: (panel: ClientCommandPanel) => void
+}
+
+export function buildClientCommands({
+  capabilities,
+  hasModels,
+  setModel,
+  setPermissionMode,
+  clearContext,
+  openPanel,
+}: ClientCommandSources): ClientCommand[] {
+  const modes = capabilities.permissionModes
+  const built: ClientCommand[] = []
+  if (hasModels) {
+    built.push({
+      name: 'model',
+      description: 'Switch the model for this session',
+      argumentHint: '<model>',
+      requiresArgs: true,
+      run: (args) => {
+        const wanted = args.split(/\s+/)[0]
+        if (!wanted) {
+          return false
+        }
+        setModel(wanted)
+        return true
+      },
+    })
+  }
+  if (modes.length > 1) {
+    built.push({
+      name: 'permissions',
+      description: `Set the permission mode (${modes.join(', ')})`,
+      argumentHint: '<mode>',
+      requiresArgs: true,
+      run: (args) => {
+        const wanted = args.split(/\s+/)[0] as PermissionMode
+        if (!modes.includes(wanted)) {
+          return false
+        }
+        setPermissionMode(wanted)
+        return true
+      },
+    })
+  }
+  if (capabilities.clearContext) {
+    built.push({
+      name: 'clear',
+      description: 'Clear the conversation - the session keeps running and the old one stays resumable',
+      run: () => {
+        clearContext()
+        return true
+      },
+    })
+  }
+  if (capabilities.mcpStatus) {
+    built.push({ name: 'mcp', description: 'MCP servers and their status', run: () => (openPanel('mcp'), true) })
+  }
+  if (capabilities.contextUsage) {
+    built.push({ name: 'context', description: 'Context window usage', run: () => (openPanel('context'), true) })
+  }
+  built.push({ name: 'status', description: 'Session details', run: () => (openPanel('info'), true) })
+  if (capabilities.rateLimits) {
+    built.push({ name: 'usage', description: 'Rate limits and spend', run: () => (openPanel('usage'), true) })
+  }
+  if (capabilities.skillsList) {
+    built.push({ name: 'skills', description: 'Browse the skills this session can use', run: () => (openPanel('skills'), true) })
+  }
+  return built
+}

package/src/components/agent/markdown-image.tsx

@@ -11,6 +11,10 @@ const LOCAL_PREFIX = 'https://local-image.invalid/'
 
 const WEB_SOURCE = /^(?:https?:|data:image\/|blob:)/i
 
+const REMOTE_SOURCE = /^https?:/i
+
+export const REMOTE_IMAGE_NOTICE = 'remote image, not loaded'
+
 type HastNode = { type: string; tagName?: string; properties?: Record<string, unknown>; children?: HastNode[] }
 
 function shieldLocalImages() {
@@ -47,9 +51,53 @@ export function localImagePath(src: string | undefined): string | undefined {
   }
 }
 
+// A remote image loads the moment it renders, so a transcript an agent was talked into writing could beacon out
+// whatever it can read. It is shown as a link instead: opening it is the user's decision, and a navigation, not a load.
+export function remoteImageHost(src: string | undefined): string | undefined {
+  if (!src || !REMOTE_SOURCE.test(src.trim()) || localImagePath(src) !== undefined) {
+    return undefined
+  }
+  try {
+    return new URL(src.trim()).host
+  } catch {
+    return undefined
+  }
+}
+
 export function MarkdownImage({ src, alt, terminal }: { src?: unknown; alt?: unknown; terminal?: boolean }) {
-  const links = useFileLinks()
   const raw = typeof src === 'string' ? src : undefined
+  const remoteHost = remoteImageHost(raw)
+  if (remoteHost !== undefined) {
+    return <RemoteImageLink href={raw!.trim()} host={remoteHost} alt={alt} terminal={terminal} />
+  }
+  return <LoadedMarkdownImage raw={raw} alt={alt} terminal={terminal} />
+}
+
+function RemoteImageLink({ href, host, alt, terminal }: { href: string; host: string; alt?: unknown; terminal?: boolean }) {
+  const label = typeof alt === 'string' && alt ? `${alt} · ` : ''
+  const text = `${label}${host} (${REMOTE_IMAGE_NOTICE})`
+  if (terminal) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" data-tone="faint" title={href}>
+        {text}
+      </a>
+    )
+  }
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      title={href}
+      className="my-1 inline-block rounded-md border border-border bg-surface-hover px-2 py-1 text-label text-fg-4"
+    >
+      {text}
+    </a>
+  )
+}
+
+function LoadedMarkdownImage({ raw, alt, terminal }: { raw?: string; alt?: unknown; terminal?: boolean }) {
+  const links = useFileLinks()
   const local = localImagePath(raw)
   const path = local === undefined ? undefined : parseFileLink(local, links?.cwd)?.path
   const host = useHostImageSrc(path)

package/src/components/agent/scrubber-marks.ts

@@ -8,9 +8,12 @@ export type MarkKind = 'user' | 'subagent' | 'shell' | 'turn' | 'turnFailed' | '
 export type Mark = {
   kind: MarkKind
   itemIndex: number
+  rowIndex?: number
   turnIndex?: number
 }
 
+export type Placement = (mark: Mark) => { y: number; h: number }
+
 export type Cluster = {
   lane: Lane
   kind: MarkKind
@@ -106,11 +109,30 @@ export interface BuildMarksOptions {
   frameParentId?: string
   bookmarks?: readonly number[]
   recapItemIndex?: number
+  rowIndexFor?: (itemIndex: number) => number
+}
+
+export function toolCallFailed(item: TranscriptItem): boolean {
+  return item.kind === 'tool_call' && (item.status === 'failed' || item.result?.isError === true)
+}
+
+export function rowOutcomes(
+  items: readonly TranscriptItem[],
+  frameParentId: string | undefined,
+  rowIndexFor: (itemIndex: number) => number,
+): Set<number> {
+  const outcome = new Map<number, number>()
+  items.forEach((item, index) => {
+    if (item.kind === 'tool_call' && parentOf(item) === frameParentId) {
+      outcome.set(rowIndexFor(index), index)
+    }
+  })
+  return new Set(outcome.values())
 }
 
 export function buildMarks(
   items: readonly TranscriptItem[],
-  { frameParentId, bookmarks = [], recapItemIndex }: BuildMarksOptions = {},
+  { frameParentId, bookmarks = [], recapItemIndex, rowIndexFor = (index) => index }: BuildMarksOptions = {},
 ): Mark[] {
   const marks: Mark[] = []
   const subagentParents = new Set<string>()
@@ -120,6 +142,7 @@ export function buildMarks(
       subagentParents.add(parent)
     }
   }
+  const outcomes = rowOutcomes(items, frameParentId, rowIndexFor)
   let segment: Segment = {}
   const closeSegment = () => {
     const anchor = segment.response ?? segment.turn
@@ -147,11 +170,7 @@ export function buildMarks(
       marks.push({ kind: 'error', itemIndex: index })
     } else if (item.kind === 'shell') {
       marks.push({ kind: 'shell', itemIndex: index })
-    } else if (
-      item.kind === 'tool_call' &&
-      parentOf(item) === frameParentId &&
-      (item.status === 'failed' || item.result?.isError === true)
-    ) {
+    } else if (toolCallFailed(item) && outcomes.has(index)) {
       marks.push({ kind: 'toolFailed', itemIndex: index })
     } else if (item.kind === 'assistant_text' && parentOf(item) === frameParentId) {
       if (frameParentId !== undefined) {
@@ -173,22 +192,25 @@ export function buildMarks(
   return marks
 }
 
-export function clusterMarks(marks: readonly Mark[], railH: number, itemCount: number): Cluster[] {
+export function proportionalPlacement(railH: number, itemCount: number): Placement {
   const count = Math.max(1, itemCount)
   const h = Math.max(MIN_MARK, Math.round(railH / count))
-  const lanes = new Map<Lane, { mark: Mark; y: number }[]>()
+  return (mark) => ({ y: Math.min(Math.max(0, railH - h), Math.round((mark.itemIndex / count) * railH)), h })
+}
+
+export function clusterMarks(marks: readonly Mark[], place: Placement): Cluster[] {
+  const lanes = new Map<Lane, { mark: Mark; y: number; h: number }[]>()
   for (const mark of marks) {
-    const y = Math.min(Math.max(0, railH - h), Math.round((mark.itemIndex / count) * railH))
     const lane = LANE[mark.kind]
     const list = lanes.get(lane) ?? []
-    list.push({ mark, y })
+    list.push({ mark, ...place(mark) })
     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 } of list) {
+    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]) {