@workerdeck/ui 2.15.0 → 3.1.0

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

@@ -0,0 +1,326 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from 'react'
+import { Download, Maximize, Minus, Plus, X } from 'lucide-react'
+import { Button } from '../ui/Button.tsx'
+import { cn } from '../../lib/utils.ts'
+
+export type ViewedImage = { src: string; name: string }
+
+export type OpenImage = (image: ViewedImage) => void
+
+type Zoom = number | 'fit'
+
+type Size = { width: number; height: number }
+
+type Anchor = { x: number; y: number; viewX: number; viewY: number }
+
+type Focus = { clientX: number; clientY: number }
+
+const ZOOM_STEPS = [0.1, 0.25, 0.33, 0.5, 0.67, 0.75, 1, 1.25, 1.5, 2, 3, 4, 6, 8]
+
+const STAGE_PADDING = 16
+
+const DRAG_SLOP = 4
+
+const WHEEL_ZOOM_RATE = 0.01
+
+const WHEEL_DELTA_CAP = 25
+
+const ViewerContext = createContext<OpenImage | undefined>(undefined)
+
+export function useOpenImage(): OpenImage | undefined {
+  return useContext(ViewerContext)
+}
+
+export function ImageViewerProvider({ children }: { children: ReactNode }) {
+  const [image, setImage] = useState<ViewedImage>()
+  const close = useCallback(() => setImage(undefined), [])
+  return (
+    <ViewerContext.Provider value={setImage}>
+      {children}
+      {image ? <ImageViewer key={image.src} image={image} onClose={close} /> : null}
+    </ViewerContext.Provider>
+  )
+}
+
+export function ViewableImage({ image, className, children }: { image: ViewedImage; className?: string; children: ReactNode }) {
+  const open = useOpenImage()
+  if (!open) {
+    return <>{children}</>
+  }
+  return (
+    <button
+      type="button"
+      aria-label={`View ${image.name}`}
+      title={image.name}
+      data-slot="viewable-image"
+      className={cn('cursor-zoom-in', className)}
+      onClick={(event) => {
+        event.stopPropagation()
+        open(image)
+      }}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function ImageViewer({ image, onClose, className }: { image: ViewedImage; onClose: () => void; className?: string }) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const stageRef = useRef<HTMLDivElement>(null)
+  const [natural, setNatural] = useState<Size>()
+  const [stage, setStage] = useState<Size>()
+  const [zoom, setZoom] = useState<Zoom>('fit')
+  const [failed, setFailed] = useState(false)
+  const anchor = useRef<Anchor | undefined>(undefined)
+  const wheelScale = useRef<number | undefined>(undefined)
+  const drag = useRef<{ x: number; y: number; left: number; top: number } | undefined>(undefined)
+  const dragged = useRef(false)
+
+  const fitScale =
+    natural && stage
+      ? Math.min(1, (stage.width - STAGE_PADDING * 2) / natural.width, (stage.height - STAGE_PADDING * 2) / natural.height)
+      : 1
+  const scale = zoom === 'fit' ? Math.max(fitScale, 0.01) : zoom
+  const scrollable =
+    natural !== undefined && stage !== undefined && (natural.width * scale > stage.width || natural.height * scale > stage.height)
+
+  useEffect(() => {
+    const previous = document.activeElement as HTMLElement | null
+    rootRef.current?.focus()
+    return () => previous?.focus?.()
+  }, [])
+
+  useEffect(() => {
+    const element = stageRef.current
+    if (!element) {
+      return
+    }
+    const observer = new ResizeObserver(() => setStage({ width: element.clientWidth, height: element.clientHeight }))
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [])
+
+  useLayoutEffect(() => {
+    const element = stageRef.current
+    const point = anchor.current
+    if (!element || !point) {
+      return
+    }
+    anchor.current = undefined
+    wheelScale.current = undefined
+    element.scrollLeft = point.x * element.scrollWidth - point.viewX
+    element.scrollTop = point.y * element.scrollHeight - point.viewY
+  }, [scale])
+
+  const zoomTo = useCallback((next: Zoom, focus?: Focus) => {
+    const element = stageRef.current
+    if (element && element.scrollWidth > 0 && element.scrollHeight > 0) {
+      const rect = element.getBoundingClientRect()
+      const viewX = focus ? focus.clientX - rect.left : element.clientWidth / 2
+      const viewY = focus ? focus.clientY - rect.top : element.clientHeight / 2
+      anchor.current = {
+        x: (element.scrollLeft + viewX) / element.scrollWidth,
+        y: (element.scrollTop + viewY) / element.scrollHeight,
+        viewX,
+        viewY,
+      }
+    }
+    setZoom(next)
+  }, [])
+
+  const step = (direction: 1 | -1) => {
+    const next =
+      direction > 0 ? ZOOM_STEPS.find((value) => value > scale + 0.001) : ZOOM_STEPS.filter((value) => value < scale - 0.001).at(-1)
+    zoomTo(next ?? (direction > 0 ? ZOOM_STEPS[ZOOM_STEPS.length - 1] : ZOOM_STEPS[0]))
+  }
+
+  const onKeyDown = (event: ReactKeyboardEvent) => {
+    event.stopPropagation()
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      onClose()
+    } else if (event.key === '+' || event.key === '=') {
+      event.preventDefault()
+      step(1)
+    } else if (event.key === '-' || event.key === '_') {
+      event.preventDefault()
+      step(-1)
+    } else if (event.key === '0') {
+      event.preventDefault()
+      zoomTo('fit')
+    } else if (event.key === '1') {
+      event.preventDefault()
+      zoomTo(1)
+    }
+  }
+
+  const scaleRef = useRef(scale)
+  scaleRef.current = scale
+
+  useEffect(() => {
+    const element = stageRef.current
+    if (!element) {
+      return
+    }
+    const onWheel = (event: WheelEvent) => {
+      if (!event.ctrlKey && !event.metaKey) {
+        return
+      }
+      event.preventDefault()
+      const delta = Math.max(-WHEEL_DELTA_CAP, Math.min(WHEEL_DELTA_CAP, event.deltaY))
+      const base = wheelScale.current ?? scaleRef.current
+      const next = Math.min(ZOOM_STEPS[ZOOM_STEPS.length - 1]!, Math.max(ZOOM_STEPS[0]!, base * Math.exp(-delta * WHEEL_ZOOM_RATE)))
+      wheelScale.current = next
+      zoomTo(next, event)
+    }
+    element.addEventListener('wheel', onWheel, { passive: false })
+    return () => element.removeEventListener('wheel', onWheel)
+  }, [zoomTo])
+
+  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const element = stageRef.current
+    if (!scrollable || !element || event.button !== 0) {
+      return
+    }
+    dragged.current = false
+    drag.current = { x: event.clientX, y: event.clientY, left: element.scrollLeft, top: element.scrollTop }
+    element.setPointerCapture(event.pointerId)
+  }
+
+  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const element = stageRef.current
+    const start = drag.current
+    if (!element || !start) {
+      return
+    }
+    if (Math.abs(event.clientX - start.x) + Math.abs(event.clientY - start.y) > DRAG_SLOP) {
+      dragged.current = true
+    }
+    element.scrollLeft = start.left - (event.clientX - start.x)
+    element.scrollTop = start.top - (event.clientY - start.y)
+  }
+
+  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
+    drag.current = undefined
+    stageRef.current?.releasePointerCapture?.(event.pointerId)
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      role="dialog"
+      aria-modal="true"
+      aria-label={image.name}
+      tabIndex={-1}
+      data-slot="image-viewer"
+      onKeyDown={onKeyDown}
+      onClick={(event) => event.stopPropagation()}
+      className={cn('absolute inset-0 z-50 flex flex-col bg-bg outline-none', className)}
+    >
+      <div className="flex shrink-0 items-center gap-1 border-b border-border px-2 py-1.5">
+        <div className="min-w-0 flex-1 px-1">
+          <div className="truncate font-mono text-body-sm text-fg-1" title={image.name}>
+            {image.name}
+          </div>
+          {natural ? (
+            <div className="text-label text-fg-4">
+              {natural.width} × {natural.height}
+            </div>
+          ) : null}
+        </div>
+        <Button variant="ghost" size="icon-sm" aria-label="Zoom out" title="Zoom out (-)" onClick={() => step(-1)} disabled={failed}>
+          <Minus />
+        </Button>
+        <span className="w-12 text-center font-mono text-label text-fg-3 tabular-nums">{Math.round(scale * 100)}%</span>
+        <Button variant="ghost" size="icon-sm" aria-label="Zoom in" title="Zoom in (+)" onClick={() => step(1)} disabled={failed}>
+          <Plus />
+        </Button>
+        <Button
+          variant={zoom === 'fit' ? 'secondary' : 'ghost'}
+          size="icon-sm"
+          aria-label="Fit to view"
+          aria-pressed={zoom === 'fit'}
+          title="Fit to view (0)"
+          onClick={() => zoomTo('fit')}
+          disabled={failed}
+        >
+          <Maximize />
+        </Button>
+        <Button
+          variant={zoom === 1 ? 'secondary' : 'ghost'}
+          size="sm"
+          aria-label="Actual size"
+          aria-pressed={zoom === 1}
+          title="Actual size (1)"
+          onClick={() => zoomTo(1)}
+          disabled={failed}
+          className="font-mono"
+        >
+          1:1
+        </Button>
+        <a
+          href={image.src}
+          download={image.name}
+          aria-label="Download"
+          title="Download"
+          className="inline-flex size-7 items-center justify-center rounded-md text-fg-2 transition-colors hover:bg-surface-hover hover:text-foreground"
+        >
+          <Download className="size-4" />
+        </a>
+        <Button variant="ghost" size="icon-sm" aria-label="Close" title="Close (Esc)" onClick={onClose}>
+          <X />
+        </Button>
+      </div>
+      <div
+        ref={stageRef}
+        data-slot="image-viewer-stage"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+        onClick={(event) => {
+          if (dragged.current) {
+            dragged.current = false
+            return
+          }
+          if (event.target === event.currentTarget || event.target === event.currentTarget.firstElementChild) {
+            onClose()
+          }
+        }}
+        className={cn('min-h-0 flex-1 overflow-auto bg-surface-hover/40', scrollable && 'cursor-grab active:cursor-grabbing')}
+      >
+        <div className="flex min-h-full w-max min-w-full items-center justify-center" style={{ padding: STAGE_PADDING }}>
+          {failed ? (
+            <span className="text-body-sm text-fg-4">Image could not be displayed</span>
+          ) : (
+            <img
+              src={image.src}
+              alt={image.name}
+              draggable={false}
+              onLoad={(event) => setNatural({ width: event.currentTarget.naturalWidth, height: event.currentTarget.naturalHeight })}
+              onError={() => setFailed(true)}
+              onDoubleClick={() => zoomTo(zoom === 'fit' ? 1 : 'fit')}
+              className="block max-w-none select-none"
+              style={
+                natural
+                  ? { width: natural.width * scale, height: natural.height * scale, imageRendering: scale > 2 ? 'pixelated' : undefined }
+                  : { maxWidth: '100%', maxHeight: '100%', visibility: 'hidden' }
+              }
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,139 @@
+import { defaultRehypePlugins, type StreamdownProps } from 'streamdown'
+import { parseFileLink } from '../../lib/file-link.ts'
+import { useFileLinks } from '../terminal/file-link.tsx'
+import { IMAGE_BOX_LINES, IMAGE_UNAVAILABLE, baseName } from '../terminal/image-box.ts'
+import { ViewableImage } from './image-viewer.tsx'
+import { useHostImageSrc } from './tool-result-image.tsx'
+
+// Streamdown's sanitize drops `file:` sources and its harden step blocks or re-roots relative ones, so
+// a host path is carried through both as an address on a reserved, never-resolving host.
+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() {
+  return (tree: HastNode) => {
+    walk(tree)
+  }
+}
+
+function walk(node: HastNode): void {
+  if (node.type === 'element' && node.tagName === 'img' && node.properties) {
+    const src = node.properties.src
+    if (typeof src === 'string' && src.trim() && !WEB_SOURCE.test(src.trim())) {
+      node.properties.src = LOCAL_PREFIX + encodeURIComponent(src.trim())
+    }
+  }
+  for (const child of node.children ?? []) {
+    walk(child)
+  }
+}
+
+export const MARKDOWN_REHYPE_PLUGINS: NonNullable<StreamdownProps['rehypePlugins']> = [
+  shieldLocalImages,
+  ...Object.values(defaultRehypePlugins),
+]
+
+export function localImagePath(src: string | undefined): string | undefined {
+  if (!src?.startsWith(LOCAL_PREFIX)) {
+    return undefined
+  }
+  try {
+    return decodeURIComponent(src.slice(LOCAL_PREFIX.length))
+  } catch {
+    return 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 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)
+  const resolved = local === undefined ? raw : host.src
+  const label = typeof alt === 'string' && alt ? alt : undefined
+  const name = path ? baseName(path) : (label ?? 'image')
+  const failed = local !== undefined && (path === undefined || host.failed)
+
+  if (terminal) {
+    return (
+      <span
+        className="term-image"
+        data-state={resolved ? 'loaded' : failed ? 'failed' : 'pending'}
+        style={{ height: `calc(var(--term-line) * ${IMAGE_BOX_LINES})` }}
+      >
+        {resolved ? (
+          <ViewableImage image={{ src: resolved, name }}>
+            <img src={resolved} alt={label ?? name} />
+          </ViewableImage>
+        ) : (
+          <span data-tone="faint">{failed ? `${IMAGE_UNAVAILABLE} · ${local ?? name}` : name}</span>
+        )}
+      </span>
+    )
+  }
+
+  if (!resolved) {
+    return (
+      <span className="my-1 inline-block rounded-md border border-border bg-surface-hover px-2 py-1 text-label text-fg-4">
+        {failed ? `${IMAGE_UNAVAILABLE} · ${local ?? name}` : name}
+      </span>
+    )
+  }
+  return (
+    <ViewableImage image={{ src: resolved, name }} className="my-1 block max-w-full">
+      <img src={resolved} alt={label ?? name} className="max-h-96 w-auto max-w-full rounded-md border border-border" />
+    </ViewableImage>
+  )
+}

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]) {

package/src/components/agent/scrubber-peek.tsx

@@ -0,0 +1,122 @@
+import type { ReactNode } from 'react'
+import type { PermissionRequest } from '@workerdeck/protocol'
+import type { TranscriptItem } from '@workerdeck/react'
+import { toolInputPreview } from '../../lib/format.ts'
+import { permissionPromptModel } from '../../lib/permission-prompt.ts'
+import { doneLine, excerpt, KIND_NAME, type Cluster, type Mark } from './scrubber-marks.ts'
+
+export type PeekSkin = {
+  excerptClass: string
+  muted: string
+  danger: string
+  glyph: string
+  text?: string
+  strong?: string
+  detail?: string
+  answerGlyph?: string
+}
+
+export const CARD_PEEK: PeekSkin = { excerptClass: 'wd-scrub-ex', muted: 'muted', danger: 'danger', glyph: 'muted', detail: 'muted' }
+
+export const TERMINAL_PEEK: PeekSkin = {
+  excerptClass: 'term-scrub-ex',
+  muted: 'faint',
+  danger: 'red',
+  glyph: 'dim',
+  text: 'fg',
+  strong: 'bright',
+  detail: 'fg',
+  answerGlyph: '● ',
+}
+
+export interface PeekInput {
+  cluster: Cluster
+  first: Mark | undefined
+  items: readonly TranscriptItem[]
+  pendingApprovals: readonly PermissionRequest[]
+  recapLabel?: string
+}
+
+export function peekContent({ cluster, first, items, pendingApprovals, recapLabel }: PeekInput, skin: PeekSkin): ReactNode {
+  const more = cluster.marks.length > 1 ? ` · ${cluster.marks.length} marks` : ''
+  const kind = first?.kind ?? cluster.kind
+  return (
+    <>
+      <div data-tone={skin.muted}>
+        {KIND_NAME[kind]}
+        {more}
+      </div>
+      {cluster.kind === 'approval'
+        ? approvalBody(pendingApprovals[0], skin)
+        : kind === 'recap'
+          ? recapBody(recapLabel, skin)
+          : markBody(first, items, skin)}
+    </>
+  )
+}
+
+function approvalBody(request: PermissionRequest | undefined, skin: PeekSkin): ReactNode {
+  if (!request) {
+    return null
+  }
+  return (
+    <>
+      <div data-tone={skin.strong}>{permissionPromptModel(request).heading}</div>
+      <div className={skin.excerptClass} data-tone={skin.detail}>
+        {`${request.displayName ?? request.toolName}(${toolInputPreview(request.input)})`}
+      </div>
+    </>
+  )
+}
+
+function recapBody(label: string | undefined, skin: PeekSkin): ReactNode {
+  return label === undefined ? null : <div data-tone={skin.muted}>※ {label}</div>
+}
+
+function markBody(first: Mark | undefined, items: readonly TranscriptItem[], skin: PeekSkin): ReactNode {
+  if (!first) {
+    return null
+  }
+  const item = items[first.itemIndex]
+  if (first.kind === 'turn' || first.kind === 'turnFailed') {
+    const turn = first.turnIndex === undefined ? undefined : items[first.turnIndex]
+    return (
+      <>
+        {item?.kind === 'assistant_text' ? (
+          <div className={skin.excerptClass} data-tone={skin.text}>
+            {skin.answerGlyph ? <span data-tone={skin.glyph}>{skin.answerGlyph}</span> : null}
+            {item.text}
+          </div>
+        ) : null}
+        {turn?.kind === 'turn_result' ? (
+          <>
+            <div data-tone={turn.isError ? skin.danger : skin.muted}>{doneLine(turn)}</div>
+            {turn.errors?.map((message, index) => (
+              <div key={index} data-tone={skin.danger}>
+                {message}
+              </div>
+            ))}
+          </>
+        ) : null}
+      </>
+    )
+  }
+  if (!item) {
+    return null
+  }
+  const failure =
+    first.kind === 'toolFailed' && item.kind === 'tool_call' ? item.result?.text.split('\n').find((line) => line.trim() !== '') : undefined
+  return (
+    <>
+      <div className={skin.excerptClass} data-tone={first.kind === 'error' || first.kind === 'toolFailed' ? skin.danger : skin.text}>
+        {first.kind === 'user' ? <span data-tone={skin.glyph}>{'❯ '}</span> : null}
+        {excerpt(item)}
+      </div>
+      {failure ? (
+        <div className={skin.excerptClass} data-tone={skin.danger}>
+          {failure}
+        </div>
+      ) : null}
+    </>
+  )
+}