@workerdeck/ui 2.15.0 → 3.1.0

package/src/components/terminal/height.ts

@@ -2,7 +2,7 @@ import type { FilePatch, PatchHunk } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { compactionText, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
 import { taskChildItems, type TerminalBlock, type ToolCallItem } from './blocks.ts'
-import { IMAGE_BOX_LINES } from './image-box.ts'
+import { IMAGE_BOX_LINES, hostImagePathOf } from './image-box.ts'
 import { collapsedResult } from './result-preview.ts'
 import { shellBodyLines, shellFooterText, shellHeaderText } from './shell-row.ts'
 import { todoLine, todoPreview } from './todos.ts'
@@ -60,6 +60,10 @@ export function measureCh(surface: HTMLElement): number {
   return width
 }
 
+const MARKDOWN_IMAGE = /!\[[^\]]*\]\([^)]*\)/
+
+const MARKDOWN_IMAGE_LINE = /^\s*!\[[^\]]*\]\([^)\s]+\)\s*$/
+
 const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' })
 
 const WIDE_RANGES: [number, number][] = [
@@ -276,7 +280,8 @@ function stripInline(s: string): string {
 }
 
 type MdBlock =
-  | { t: 'p'; lines: string[] }
+  | { t: 'p'; lines: string[]; images: boolean }
+  | { t: 'image' }
   | { t: 'h'; text: string }
   | { t: 'fence'; code: string }
   | { t: 'list'; items: { lines: string[]; gutter: number; indent: number }[] }
@@ -302,11 +307,37 @@ function hardLines(source: string[]): string[] {
   return out
 }
 
+function isBlank(s: string | undefined): boolean {
+  return s !== undefined && s.trim() === ''
+}
+
+function listMarker(s: string): { depth: number; ordered: boolean; text: string } | undefined {
+  const m = /^(\s*)([-*+]|\d+\.)\s+(.*)$/.exec(s)
+  if (!m) {
+    return undefined
+  }
+  return { depth: Math.floor(m[1]!.length / 2), ordered: /\d/.test(m[2]!), text: m[3]! }
+}
+
+function numberHunk(hunk: PatchHunk): { number: number; text: string }[] {
+  let newLine = hunk.newStart
+  let oldLine = hunk.oldStart
+  return hunk.lines.map((line) => {
+    const kind = line.startsWith('+') ? 'add' : line.startsWith('-') ? 'remove' : 'context'
+    const text = line.slice(1)
+    const number = kind === 'add' ? newLine++ : kind === 'remove' ? oldLine++ : newLine
+    if (kind === 'context') {
+      oldLine++
+      newLine++
+    }
+    return { number, text }
+  })
+}
+
 function parseBlocks(md: string): MdBlock[] {
   const lines = md.split('\n')
   const blocks: MdBlock[] = []
   let i = 0
-  const isBlank = (s: string | undefined) => s !== undefined && s.trim() === ''
   while (i < lines.length) {
     const line = lines[i]!
     if (line.trim() === '') {
@@ -359,15 +390,6 @@ function parseBlocks(md: string): MdBlock[] {
       blocks.push({ t: 'quote', paras })
       continue
     }
-    const listMarker = (s: string) => {
-      const m = /^(\s*)([-*+]|\d+\.)\s+(.*)$/.exec(s)
-      if (!m) {
-        return undefined
-      }
-      const depth = Math.floor(m[1]!.length / 2)
-      const ordered = /\d/.test(m[2]!)
-      return { depth, ordered, text: m[3]! }
-    }
     if (listMarker(line)) {
       const items: { lines: string[]; gutter: number; indent: number }[] = []
       const gutters: number[] = []
@@ -431,7 +453,11 @@ function parseBlocks(md: string): MdBlock[] {
       para.push(lines[i]!)
       i += 1
     }
-    blocks.push({ t: 'p', lines: hardLines(para) })
+    if (para.length === 1 && MARKDOWN_IMAGE_LINE.test(para[0]!)) {
+      blocks.push({ t: 'image' })
+    } else {
+      blocks.push({ t: 'p', lines: hardLines(para), images: para.some((row) => MARKDOWN_IMAGE.test(row)) })
+    }
   }
   return blocks
 }
@@ -449,10 +475,14 @@ export function markdownHeight(md: string, m: CellMetrics, extraPx = 0): Acc {
       case 'p': {
         for (const line of block.lines) {
           const r = textLines(line, cols)
-          acc = add(acc, { px: r.lines * m.line, exact: r.exact })
+          acc = add(acc, { px: r.lines * m.line, exact: r.exact && !block.images })
         }
         break
       }
+      case 'image': {
+        acc = add(acc, { px: IMAGE_BOX_LINES * m.line, exact: true })
+        break
+      }
       case 'h': {
         const r = textLines(block.text, cols)
         acc = add(acc, { px: r.lines * m.line, exact: r.exact })
@@ -512,21 +542,7 @@ export function markdownHeight(md: string, m: CellMetrics, extraPx = 0): Acc {
 }
 
 function diffHeight(patch: FilePatch, m: CellMetrics, extraPx = 0): Acc {
-  const walk = (hunk: PatchHunk) => {
-    let newLine = hunk.newStart
-    let oldLine = hunk.oldStart
-    return hunk.lines.map((line) => {
-      const kind = line.startsWith('+') ? 'add' : line.startsWith('-') ? 'remove' : 'context'
-      const text = line.slice(1)
-      const number = kind === 'add' ? newLine++ : kind === 'remove' ? oldLine++ : newLine
-      if (kind === 'context') {
-        oldLine++
-        newLine++
-      }
-      return { number, text }
-    })
-  }
-  const hunks = patch.hunks.map(walk)
+  const hunks = patch.hunks.map(numberHunk)
   const numbered = patch.hunks.some((hunk) => hunk.newStart > 0)
   const width = numbered ? String(Math.max(...hunks.flat().map((row) => row.number), 1)).length : 0
   const columns = numbered ? width + 3 : 2
@@ -551,9 +567,9 @@ function toolRowHeight(item: ToolCallItem, m: CellMetrics, extraPx: number): Acc
   const backend = item.backend && item.backend !== 'server' ? ` · ${item.backend}` : ''
   let acc = rowH(`${item.name}(${preview})${backend}`, m, { gutterCells: 2, extraPx })
 
-  const images = item.result?.images
-  if (images?.length) {
-    acc = add(acc, { px: images.length * IMAGE_BOX_LINES * m.line, exact: true })
+  const boxes = (item.result?.images?.length ?? 0) + (hostImagePathOf(item) === undefined ? 0 : 1)
+  if (boxes > 0) {
+    acc = add(acc, { px: boxes * IMAGE_BOX_LINES * m.line, exact: true })
   }
 
   if (item.patch) {

package/src/components/terminal/image-box.ts

@@ -1,9 +1,40 @@
+import type { TranscriptItem } from '@workerdeck/react'
 import { formatBytes } from '../../lib/format.ts'
 
+type ToolCallItem = Extract<TranscriptItem, { kind: 'tool_call' }>
+
 export const IMAGE_BOX_LINES = 12
 
+const HOST_IMAGE_TOOLS = new Set(['CodexImageGeneration', 'CodexImageView'])
+
+const MEDIA_EXTENSIONS: Record<string, string> = {
+  'image/png': 'png',
+  'image/jpeg': 'jpg',
+  'image/gif': 'gif',
+  'image/webp': 'webp',
+  'image/svg+xml': 'svg',
+}
+
 export function imagePlaceholder(image: { bytes: number }): string {
   return `image · ${formatBytes(image.bytes)}`
 }
 
 export const IMAGE_UNAVAILABLE = 'image unavailable'
+
+export function hostImagePathOf(item: ToolCallItem): string | undefined {
+  if (!HOST_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 function baseName(path: string): string {
+  return path.split(/[\\/]/).pop() || path
+}
+
+export function resultImageName(toolName: string, image: { partIndex: number; mediaType: string }): string {
+  const extension = MEDIA_EXTENSIONS[image.mediaType] ?? image.mediaType.split('/').pop() ?? 'img'
+  return `${toolName.toLowerCase()}-${image.partIndex + 1}.${extension}`
+}

package/src/components/terminal/items.tsx

@@ -1,23 +1,24 @@
-import { useEffect, useState, type ReactNode } from 'react'
+import { Fragment, useEffect, useState, type ReactNode } from 'react'
 import type { MessageOrigin } from '@workerdeck/protocol'
 import type { ShellItem, TranscriptItem } from '@workerdeck/react'
 import { compactionText, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
 import { isMutatingTool } from '../../lib/tool-icon.ts'
 import { usePulse } from '../agent/pulse.tsx'
 import { PromptTokenText } from '../agent/PromptTokenText.tsx'
-import { BookmarkAction, CopyAction, KillShellAction, OpenShellAction, WithActions } from './affordances.tsx'
+import { ActionPlacementProvider, BookmarkAction, CopyAction, WithActions } from './affordances.tsx'
 import { TerminalDiff } from './diff.tsx'
 import { TerminalMarkdown } from './markdown.tsx'
 import { usePeerNames } from './peer-names.tsx'
 import { Pressable, useRevealOnOpen, type PressModifiers } from './press.tsx'
-import { IMAGE_BOX_LINES, IMAGE_UNAVAILABLE, imagePlaceholder } from './image-box.ts'
+import { IMAGE_BOX_LINES, IMAGE_UNAVAILABLE, baseName, hostImagePathOf, imagePlaceholder, resultImageName } from './image-box.ts'
 import { collapsedResult } from './result-preview.ts'
 import { useToolResultFetcher } from '../agent/tool-result-fetch.tsx'
 import { useToolTitle } from '../agent/tool-titles.tsx'
-import { useToolResultImageSrc } from '../agent/tool-result-image.tsx'
+import { useHostImageSrc, useToolResultImageSrc, type ToolResultImageState } from '../agent/tool-result-image.tsx'
+import { ViewableImage, useOpenImage } from '../agent/image-viewer.tsx'
 import { isPeerSend, peerName, peerOneLine, peerSendTarget, peerSendText, planRun, runFailed, runSummary } from './tool-run.ts'
 import { todoLine, todoPreview, type TodoPreview, type TodoStatus } from './todos.ts'
-import { useShellActions } from '../agent/shell-actions.tsx'
+import { ShellItemActions, useShellActions, useVerifyRunning } from '../agent/shell-actions.tsx'
 import { SHELL_GLYPH, shellBodyLines, shellFailed, shellFooterText, shellLabel, shellStatusText } from './shell-row.ts'
 import { type ToolCallItem } from './blocks.ts'
 import { Band, Blank, Ink, Row, type Tone } from './row.tsx'
@@ -101,13 +102,24 @@ export function PeerSendRow({ item }: { item: ToolCallItem }) {
   )
 }
 
-export function UserRow({ item }: { item: Extract<TranscriptItem, { kind: 'user' }> }) {
+export function UserRow({
+  item,
+  attachmentUrl,
+}: {
+  item: Extract<TranscriptItem, { kind: 'user' }>
+  attachmentUrl?: (attachmentId: string) => string
+}) {
   return (
     <WithActions actions={<BookmarkAction id={item.id} />}>
       <div className="term-user" data-peer={item.origin ? '' : undefined}>
         {item.attachments?.length ? (
           <Row glyph={PROMPT_GLYPH} glyphTone="dim" tone="dim">
-            {item.attachments.map((attachment) => attachment.name).join(', ')}
+            {item.attachments.map((attachment, index) => (
+              <Fragment key={attachment.id}>
+                {index > 0 ? ', ' : null}
+                <AttachmentName attachment={attachment} href={attachmentUrl?.(attachment.id)} />
+              </Fragment>
+            ))}
           </Row>
         ) : null}
         {item.text
@@ -195,6 +207,7 @@ export function ToolRow({ item }: { item: ToolCallItem }) {
   const copyable = typeof command === 'string' ? command : text
   const todos = todoPreview(item.name, item.input)
   const title = useToolTitle(item.name)
+  const hostPath = hostImagePathOf(item)
 
   return (
     <div ref={reveal} className={open ? 'term-open' : undefined}>
@@ -216,8 +229,9 @@ export function ToolRow({ item }: { item: ToolCallItem }) {
             {item.backend && item.backend !== 'server' ? <Ink tone="faint"> · {item.backend}</Ink> : null}
           </Row>
         </Pressable>
+        {hostPath !== undefined ? <TerminalHostImage path={hostPath} /> : null}
         {item.result?.images?.map((image) => (
-          <TerminalImage key={image.partIndex} toolUseId={item.id} image={image} />
+          <TerminalImage key={image.partIndex} toolUseId={item.id} name={resultImageName(item.name, image)} image={image} />
         ))}
         {item.patch && !open ? (
           <TerminalDiff patch={item.patch} />
@@ -298,10 +312,39 @@ function TerminalTodos({ preview }: { preview: TodoPreview }) {
   )
 }
 
+function AttachmentName({ attachment, href }: { attachment: { name: string; mediaType: string }; href?: string }) {
+  const open = useOpenImage()
+  if (!open || !href || !attachment.mediaType.startsWith('image/')) {
+    return <>{attachment.name}</>
+  }
+  return (
+    <button
+      type="button"
+      className="term-press term-link"
+      onClick={(event) => {
+        event.stopPropagation()
+        open({ src: href, name: attachment.name })
+      }}
+    >
+      {attachment.name}
+    </button>
+  )
+}
+
 type ToolResultImage = NonNullable<NonNullable<ToolCallItem['result']>['images']>[number]
 
-function TerminalImage({ toolUseId, image }: { toolUseId: string; image: ToolResultImage }) {
-  const { src, failed } = useToolResultImageSrc({ toolUseId, ...image })
+function TerminalImage({ toolUseId, name, image }: { toolUseId: string; name: string; image: ToolResultImage }) {
+  const state = useToolResultImageSrc({ toolUseId, ...image })
+  return <TerminalImageBox state={state} name={name} placeholder={imagePlaceholder(image)} />
+}
+
+function TerminalHostImage({ path }: { path: string }) {
+  const state = useHostImageSrc(path)
+  return <TerminalImageBox state={state} name={baseName(path)} placeholder={baseName(path)} />
+}
+
+function TerminalImageBox({ state, name, placeholder }: { state: ToolResultImageState; name: string; placeholder: string }) {
+  const { src, failed } = state
   return (
     <Row indent={1} columns={3}>
       <div
@@ -310,9 +353,11 @@ function TerminalImage({ toolUseId, image }: { toolUseId: string; image: ToolRes
         style={{ height: `calc(var(--term-line) * ${IMAGE_BOX_LINES})` }}
       >
         {src ? (
-          <img src={src} alt={imagePlaceholder(image)} />
+          <ViewableImage image={{ src, name }}>
+            <img src={src} alt={name} />
+          </ViewableImage>
         ) : (
-          <Ink tone="faint">{failed ? IMAGE_UNAVAILABLE : imagePlaceholder(image)}</Ink>
+          <Ink tone="faint">{failed ? IMAGE_UNAVAILABLE : placeholder}</Ink>
         )}
       </div>
     </Row>
@@ -338,8 +383,17 @@ export function ToolRunRow({ items }: { items: ToolCallItem[] }) {
       </Pressable>
       {open ? (
         <div>
-          {items.map((item) => (
-            <ToolRow key={item.id} item={item} />
+          {items.map((item, index) => (
+            <Fragment key={item.id}>
+              {index > 0 ? <Blank /> : null}
+              {index < items.length - 1 ? (
+                <ActionPlacementProvider value="below">
+                  <ToolRow item={item} />
+                </ActionPlacementProvider>
+              ) : (
+                <ToolRow item={item} />
+              )}
+            </Fragment>
           ))}
         </div>
       ) : null}
@@ -400,12 +454,7 @@ export function ShellRow({ item }: { item: ShellItem }) {
   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)
 
   const press = (modifiers: PressModifiers) => {
     if ((modifiers.meta || modifiers.ctrl) && actions.open) {
@@ -423,16 +472,7 @@ export function ShellRow({ item }: { item: ShellItem }) {
 
   return (
     <div ref={reveal} className={open ? 'term-open' : undefined}>
-      <WithActions
-        actions={
-          <>
-            {actions.open ? <OpenShellAction onOpen={() => actions.open?.(shellId)} /> : 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} />}>
         <Pressable onPress={press} expanded={open}>
           <Row glyph={SHELL_GLYPH} glyphTone={tone} tone="fg">
             <Ink bold tone="bright">

package/src/components/terminal/markdown.tsx

@@ -5,6 +5,7 @@ import { parseFileLink } from '../../lib/file-link.ts'
 import { CopyAction, WithActions } from './affordances.tsx'
 import { useFileLinks } from './file-link.tsx'
 import { Band } from './row.tsx'
+import { MARKDOWN_REHYPE_PLUGINS, MarkdownImage } from '../agent/markdown-image.tsx'
 
 function codeText(node: ReactNode): string {
   if (node === null || node === undefined || typeof node === 'boolean') {
@@ -29,7 +30,7 @@ function fenceLanguage(node: ReactNode): string | undefined {
 
 function CodeBand({ code, language }: { code: string; language?: string }) {
   return (
-    <WithActions className="term-block" actions={<CopyAction text={code} label="Copy code" />}>
+    <WithActions className="term-block" placement="inline" actions={<CopyAction text={code} label="Copy code" />}>
       <Band className="term-code" data-language={language}>
         <pre className="term-pre">{code}</pre>
       </Band>
@@ -116,6 +117,7 @@ const TERMINAL_COMPONENTS: Components = {
   ),
   em: ({ children }) => <em className="term-em">{children}</em>,
   a: ({ children, href }) => <Link href={href}>{children}</Link>,
+  img: ({ src, alt }) => <MarkdownImage src={src} alt={alt} terminal />,
 
   table: ({ children }) => (
     <div className="term-block term-table-wrap">
@@ -148,6 +150,7 @@ export const TerminalMarkdown = memo(
         parseIncompleteMarkdown={streaming}
         controls={false}
         components={TERMINAL_COMPONENTS}
+        rehypePlugins={MARKDOWN_REHYPE_PLUGINS}
         className={cn('term-md', className)}
       >
         {children}