@workerdeck/ui 2.15.0 → 3.0.1

package/src/components/agent/TranscriptItemView.tsx

@@ -11,9 +11,19 @@ import { Response } from './Response.tsx'
 import { ToolCallCard } from './ToolCallCard.tsx'
 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 { shellBodyLines, shellFailed, shellFooterText, shellLabel, shellStatusText } from '../terminal/shell-row.ts'
+import { AgentWriteAction, BookmarkAction, CopyAction, KillShellAction, OpenShellAction, WithActions } from '../terminal/affordances.tsx'
+import {
+  shellAgentWriteLabel,
+  shellBodyLines,
+  shellFailed,
+  shellFooterText,
+  shellGrantable,
+  shellLabel,
+  shellStatusText,
+} from '../terminal/shell-row.ts'
 
 function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind: 'turn_result' }> }) {
   return (
@@ -67,36 +77,47 @@ export function TranscriptItemView({
   terminal?: boolean
 }) {
   if (terminal) {
-    return <TerminalItemView item={item} fileUrl={fileUrl} />
+    return <TerminalItemView item={item} fileUrl={fileUrl} attachmentUrl={attachmentUrl} />
   }
   switch (item.kind) {
     case 'user': {
       return (
-        <Message from="user">
-          {item.origin ? <div className="wd-peer-origin text-xs text-muted-foreground">{peerLabel(item.origin)}</div> : null}
-          {item.attachments?.length ? <SentAttachments attachments={item.attachments} attachmentUrl={attachmentUrl} /> : null}
-          {item.text ? (
-            <MessageContent>
-              <PromptTokenText text={item.text} />
-            </MessageContent>
-          ) : null}
-        </Message>
+        <WithActions actions={<BookmarkAction id={item.id} />}>
+          <Message from="user">
+            {item.origin ? <div className="wd-peer-origin text-xs text-muted-foreground">{peerLabel(item.origin)}</div> : null}
+            {item.attachments?.length ? <SentAttachments attachments={item.attachments} attachmentUrl={attachmentUrl} /> : null}
+            {item.text ? (
+              <MessageContent>
+                <PromptTokenText text={item.text} />
+              </MessageContent>
+            ) : null}
+          </Message>
+        </WithActions>
       )
     }
     case 'assistant_text': {
       return (
-        <Message from="assistant">
-          <MessageContent>
-            <Response streaming={item.streaming}>{item.text}</Response>
-          </MessageContent>
-        </Message>
+        <WithActions
+          actions={
+            <>
+              <BookmarkAction id={item.id} />
+              {item.streaming ? null : <CopyAction text={item.text} label="Copy message" />}
+            </>
+          }
+        >
+          <Message from="assistant">
+            <MessageContent>
+              <Response streaming={item.streaming}>{item.text}</Response>
+            </MessageContent>
+          </Message>
+        </WithActions>
       )
     }
     case 'thinking': {
       return <Reasoning isStreaming={item.id === 'streaming-thinking'}>{item.text}</Reasoning>
     }
     case 'tool_call': {
-      return <ToolCallCard item={item} hostImage={hostImage} />
+      return <ToolCard item={item} hostImage={hostImage} />
     }
     case 'turn_result': {
       return <TurnResultRow item={item} />
@@ -119,6 +140,29 @@ export function TranscriptItemView({
   }
 }
 
+function ToolCard({
+  item,
+  hostImage,
+}: {
+  item: Extract<TranscriptItem, { kind: 'tool_call' }>
+  hostImage?: (path: string) => Promise<string | undefined>
+}) {
+  const command = (item.input as { command?: unknown } | null)?.command
+  const copyable = typeof command === 'string' ? command : (item.result?.text ?? '')
+  return (
+    <WithActions
+      actions={
+        <>
+          <BookmarkAction id={item.id} />
+          {copyable ? <CopyAction text={copyable} label="Copy" /> : null}
+        </>
+      }
+    >
+      <ToolCallCard item={item} hostImage={hostImage} />
+    </WithActions>
+  )
+}
+
 function ShellCard({ item }: { item: ShellItem }) {
   const [open, setOpen] = useState(false)
   const actions = useShellActions()
@@ -136,53 +180,50 @@ function ShellCard({ item }: { item: ShellItem }) {
   }, [running, shellId, verify])
 
   return (
-    <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>
-        <button
-          type="button"
-          aria-expanded={open}
-          className="min-w-0 flex-1 truncate text-left font-mono text-label text-fg-1"
-          onClick={() => {
-            const next = !open
-            setOpen(next)
-            if (next && item.truncated && item.expanded === undefined && !item.missing) {
-              void actions.loadOutput(shellId)
-            }
-          }}
-        >
-          {shellLabel(item)}
-        </button>
-        <span className={cn('shrink-0 text-label', failed ? 'text-danger' : 'text-fg-4')}>{shellStatusText(item)}</span>
-        {actions.open ? (
-          <button
-            type="button"
-            aria-label="Open terminal"
-            title="Open terminal"
-            className="shrink-0 text-label text-fg-3 hover:text-fg-1"
-            onClick={() => actions.open?.(shellId)}
-          >
-            ⤢
-          </button>
-        ) : null}
-        {running ? (
+    <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" />
+        </>
+      }
+    >
+      <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>
           <button
             type="button"
-            aria-label="Kill this shell"
-            className="shrink-0 text-label text-fg-3"
-            onClick={() => void actions.kill(shellId)}
+            aria-expanded={open}
+            className="min-w-0 flex-1 truncate text-left font-mono text-label text-fg-1"
+            onClick={() => {
+              const next = !open
+              setOpen(next)
+              if (next && item.truncated && item.expanded === undefined && !item.missing) {
+                void actions.loadOutput(shellId)
+              }
+            }}
           >
-            ✕
+            {shellLabel(item)}
           </button>
+          <span className={cn('shrink-0 text-label', failed ? 'text-danger' : 'text-fg-4')}>{shellStatusText(item)}</span>
+        </div>
+        {lines.length > 0 ? (
+          <pre className="overflow-x-auto border-t border-border px-3 py-2 font-mono text-label whitespace-pre-wrap text-fg-2">
+            {lines.join('\n')}
+          </pre>
         ) : null}
+        {footer ? <div className="px-3 pb-2 text-label text-fg-4">{footer}</div> : null}
       </div>
-      {lines.length > 0 ? (
-        <pre className="overflow-x-auto border-t border-border px-3 py-2 font-mono text-label whitespace-pre-wrap text-fg-2">
-          {lines.join('\n')}
-        </pre>
-      ) : null}
-      {footer ? <div className="px-3 pb-2 text-label text-fg-4">{footer}</div> : null}
-    </div>
+    </WithActions>
   )
 }
 
@@ -233,7 +274,9 @@ function SentAttachments({
       {attachments.map((attachment) => {
         const href = attachmentUrl?.(attachment.id)
         return attachment.mediaType.startsWith('image/') && href ? (
-          <img key={attachment.id} src={href} alt={attachment.name} className="size-20 rounded-md border border-border object-cover" />
+          <ViewableImage key={attachment.id} image={{ src: href, name: attachment.name }} className="rounded-md">
+            <img src={href} alt={attachment.name} className="size-20 rounded-md border border-border object-cover" />
+          </ViewableImage>
         ) : (
           <span key={attachment.id} className="rounded-full border border-border bg-surface px-2.5 py-1 text-body-xs text-fg-3">
             {attachment.name}

package/src/components/agent/TranscriptRows.tsx

@@ -5,7 +5,7 @@ import { useStickToBottomContext } from 'use-stick-to-bottom'
 import type { PermissionRequest } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
-import { resolveAffordances, type TerminalAffordances } from '../terminal/affordances.tsx'
+import { ActionPlacementProvider, resolveAffordances, type TerminalAffordances } from '../terminal/affordances.tsx'
 import { RunRow } from '../terminal/items.tsx'
 import { parentOf } from '../terminal/blocks.ts'
 import { briefPx, estimateBlockPx } from '../terminal/height.ts'
@@ -324,7 +324,8 @@ export function TranscriptRows({
         {virtualizer.getVirtualItems().map((virtualRow) => {
           const row = rows[virtualRow.index]
           const gapClass = virtualRow.index > 0 && (!terminal || gapBefore(rows, virtualRow.index)) ? gap.className : undefined
-          const content =
+          const flushBelow = terminal && virtualRow.index < rows.length - 1 && !gapBefore(rows, virtualRow.index + 1)
+          const view =
             'run' in row ? (
               <div className={cn(read(boundary, row.index) && 'opacity-45')}>
                 <RunRow items={row.run} />
@@ -348,6 +349,7 @@ export function TranscriptRows({
                 <TaskRow block={row} fileUrl={fileUrl} onOpenSubagent={onOpenSubagent} />
               </div>
             )
+          const content = <ActionPlacementProvider value={flushBelow ? 'inline' : 'below'}>{view}</ActionPlacementProvider>
           if (stickyPrompt && 'item' in row && row.item.kind === 'user' && parentOf(row.item) === undefined) {
             const next = promptRows.find((index) => index > virtualRow.index)
             const laneEnd = next === undefined ? virtualizer.getTotalSize() : (measurements[next]?.start ?? virtualRow.start)

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,91 @@
+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
+
+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
+  }
+}
+
+export function MarkdownImage({ src, alt, terminal }: { src?: unknown; alt?: unknown; terminal?: boolean }) {
+  const links = useFileLinks()
+  const raw = typeof src === 'string' ? src : undefined
+  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/shell-actions.tsx

@@ -6,6 +6,8 @@ export type ShellActions = {
   kill: (shellId: string) => Promise<boolean>
   // Drill in to the shell's terminal. Absent when the host has no frame to open one in.
   open?: (shellId: string) => void
+  // Grant or revoke the agent's hand on a shell the user started. Absent where the agent holds no write tools.
+  agentWrite?: (shellId: string, enabled: boolean) => Promise<boolean>
 }
 
 const NOOP: ShellActions = {