@workerdeck/ui 0.15.0 → 0.17.0

package/src/components/agent/ToolCallCard.tsx

@@ -6,10 +6,15 @@ import { CodeBlock } from '../ui/CodeBlock.tsx'
 import { Spinner } from '../ui/Spinner.tsx'
 import { cn } from '../../lib/utils.ts'
 import { toolInputPreview } from '../../lib/format.ts'
-import { isMutatingTool, toolIcon } from '../../lib/tool-icon.ts'
-import { LINE_INDENT, LinePayload } from './line-prompt.tsx'
-import { usePulse } from './pulse.tsx'
-import { LineGlyph, useLines } from './transcript-variant.tsx'
+import { toolIcon } from '../../lib/tool-icon.ts'
+import { useToolResultFetcher } from './tool-result-fetch.tsx'
+import { useToolResultImageSrc } from './tool-result-image.tsx'
+// From the terminal folder, which is where the box's one spelling lives: the
+// height calculator is the reason it is a constant at all, and a second copy
+// here would be a second thing to keep in step for no gain. Cards has no
+// calculator — this frame is about not reflowing a virtualized list when the
+// bytes land, which is a claim both themes make.
+import { IMAGE_UNAVAILABLE, imagePlaceholder } from '../terminal/image-box.ts'
 
 export type ToolCallItem = Extract<TranscriptItem, { kind: 'tool_call' }>
 
@@ -51,15 +56,6 @@ const STATE_BADGE = {
   failed: { label: 'Error', variant: 'danger', busy: false },
 } as const
 
-/** The gutter dot's colour in `lines`: the state, said without a badge. */
-const STATE_GLYPH = {
-  running: 'text-info',
-  pending: 'text-info',
-  deferred: 'text-accent',
-  settled: 'text-fg-4',
-  failed: 'text-danger',
-} as const
-
 /**
  * The language to highlight a payload as.
  *
@@ -91,54 +87,59 @@ function resultLanguage(item: ToolCallItem): string | undefined {
 type Status = keyof typeof STATE_BADGE
 
 export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps) {
-  const lines = useLines()
   const [open, setOpen] = useState(false)
   const [fullResult, setFullResult] = useState(false)
+  const [fetching, setFetching] = useState(false)
+  const fetchResult = useToolResultFetcher()
   const imagePath = imagePathOf(item)
   const status: Status = item.status ?? (item.result === undefined ? 'running' : 'settled')
   const badge = STATE_BADGE[status]
   const isError = status === 'failed' || item.result?.isError === true
-  // Ticks only while this row is actually running, and only in the variant with a
-  // gutter to pulse in — an idle transcript of a hundred settled tools starts no
-  // timers at all.
-  const pulse = usePulse(lines && badge.busy)
   const Icon = toolIcon(item.name)
 
   const resultText = item.result?.text ?? ''
-  const truncated = !fullResult && resultText.length > RESULT_PREVIEW_CHARS
-  const shownResult = truncated ? resultText.slice(0, RESULT_PREVIEW_CHARS) : resultText
+  const clipped = !fullResult && resultText.length > RESULT_PREVIEW_CHARS
+  const shownResult = clipped ? resultText.slice(0, RESULT_PREVIEW_CHARS) : resultText
+  // The replay sent a head (see protocol's `ToolResultBlock.truncated`): what is
+  // on screen is not merely clipped, it is all this client was given. The press
+  // therefore fetches rather than only lifting the clip, and the count has to be
+  // the real one — `resultText.length` here is the head's.
+  const headOnly = item.result?.truncated === true
+  const totalChars = item.result?.totalChars ?? resultText.length
 
-  // In `lines` the payloads are dim label + highlighted band, not framed cards:
-  // a tool call is already one row, and boxing what it expands into puts back
-  // the chrome the variant exists to remove.
-  const blockVariant = lines ? 'plain' : 'panel'
-  const Payload = lines ? HighlightedPayload : PlainPayload
   const details = open ? (
-    <div className={cn('flex flex-col', lines ? 'gap-1 py-1' : 'gap-2 border-t border-border p-2.5')}>
-      <Payload
+    <div className='flex flex-col gap-2 border-t border-border p-2.5'>
+      <PlainPayload
         code={JSON.stringify(item.input, null, 2)}
         language='json'
         label='Parameters'
-        variant={blockVariant}
       />
       {item.logs?.length ? (
-        <Payload code={item.logs.join('\n')} label='Logs' variant={blockVariant} />
+        <PlainPayload code={item.logs.join('\n')} label='Logs'/>
       ) : null}
       {item.result !== undefined ? (
         <div>
-          <Payload
+          <PlainPayload
             code={shownResult || '(empty result)'}
             language={resultLanguage(item)}
             label={isError ? 'Error' : 'Result'}
-            variant={blockVariant}
-            className={cn(isError && (lines ? '[&_pre]:text-danger' : 'border-danger/40 [&_pre]:text-danger'))}
+                className={cn(isError && 'border-danger/40 [&_pre]:text-danger')}
           />
-          {truncated ? (
+          {fetching ? (
+            <p className='mt-1 text-label text-fg-3'>
+              Fetching {totalChars.toLocaleString()} chars…
+            </p>
+          ) : clipped || headOnly ? (
             <button
               type='button'
               className='mt-1 text-label text-fg-3 underline-offset-2 hover:underline'
-              onClick={() => setFullResult(true)}>
-              Show all {resultText.length.toLocaleString()} chars
+              onClick={() => {
+                setFullResult(true)
+                if (!headOnly) return
+                setFetching(true)
+                void fetchResult(item.id).finally(() => setFetching(false))
+              }}>
+              Show all {totalChars.toLocaleString()} chars
             </button>
           ) : null}
         </div>
@@ -148,63 +149,19 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
 
   // The picture is the point of the call — shown without expanding, the way the
   // tool's own output would be if the engine had sent bytes.
-  const image = imagePath && hostImage ? <HostImage path={imagePath} load={hostImage} lines={lines} /> : null
+  const image = imagePath && hostImage ? <HostImage path={imagePath} load={hostImage} /> : null
 
-  if (lines) {
-    return (
-      <div data-slot='tool-call' data-state={status} className={cn('w-full', className)}>
-        <button
-          type='button'
-          onClick={() => setOpen((v) => !v)}
-          className='flex w-full items-baseline gap-2 text-left outline-none'>
-          <LineGlyph
-            className={
-              // A settled write is green: skimming a run, "what did it change"
-              // is the question you come back to, and it is the one you might
-              // need to undo. Every other state keeps its own colour — a failed
-              // write is a failure first.
-              status === 'settled' && !isError && isMutatingTool(item.name)
-                ? 'text-success'
-                : STATE_GLYPH[status]
-            }>
-            {/* Running: the mark's own pulse, so a working tool row and the
-                transcript's working line beat together. Settled: a plain dot,
-                which reads as "done" precisely by not moving. */}
-            {badge.busy ? pulse : '●'}
-          </LineGlyph>
-          <span className='min-w-0 flex-1 truncate text-body-sm leading-5 text-fg-3'>
-            <span className='font-medium text-fg-1'>{item.name}</span>
-            <span className='text-fg-4'>({toolInputPreview(item.input)})</span>
-          </span>
-          {item.backend && item.backend !== 'server' ? (
-            <span className='shrink-0 text-label text-fg-4'>{item.backend}</span>
-          ) : null}
-          {/* No Spinner here: the gutter glyph animates now, and two spinners on
-              one row is one too many. `cards` keeps its own — it has no gutter. */}
-          {status === 'deferred' ? <Clock className='size-3 shrink-0 self-center text-fg-4' /> : null}
-          {isError && !badge.busy ? (
-            <span className='shrink-0 text-label text-danger'>error</span>
-          ) : null}
-        </button>
-        {/* Collapsed, the first line of the output is the whole story most of
-            the time — a summary line costs one row and saves an expand. */}
-        {!open && resultText ? (
-          <div className='flex items-baseline gap-2'>
-            <LineGlyph className='text-fg-4'>⎿</LineGlyph>
-            <span
-              className={cn(
-                'min-w-0 flex-1 truncate text-label leading-5',
-                isError ? 'text-danger' : 'text-fg-4',
-              )}>
-              {resultSummary(resultText)}
-            </span>
-          </div>
-        ) : null}
-        {image}
-        {details ? <div className={LINE_INDENT}>{details}</div> : null}
-      </div>
-    )
-  }
+  // Beside the host-path picture above, never instead of it: that one is a file
+  // the engine wrote, read back through `/produced` or `/fs`; these are image
+  // parts of the result itself, addressed by `(seq, toolUseId, part)`. Different
+  // store, different route, and a call can plausibly have both.
+  const resultImages = item.result?.images?.length ? (
+    <div className='flex flex-col gap-2 border-t border-border p-2.5'>
+      {item.result.images.map((ref) => (
+        <ResultImage key={ref.partIndex} toolUseId={item.id} image={ref} />
+      ))}
+    </div>
+  ) : null
 
   return (
     <div
@@ -238,36 +195,54 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
         />
       </button>
       {image}
+      {resultImages}
       {details}
     </div>
   )
 }
 
-/** The first line worth showing of a tool result, for the collapsed summary. */
-function resultSummary(text: string): string {
-  const first = text.split('\n').find((line) => line.trim() !== '') ?? ''
-  const rest = text.trimEnd().split('\n').length - 1
-  const trimmed = first.trim()
-  return rest > 0 ? `${trimmed} (+${rest} lines)` : trimmed
-}
-
-type PayloadProps = {
+/** The framed card the `cards` transcript expands into. Unhighlighted by
+ * design: it is structured data in a panel, not a file. */
+function PlainPayload({
+  code,
+  label,
+  className,
+}: {
   code: string
   label: string
   language?: string
-  variant: 'panel' | 'plain'
   className?: string
+}) {
+  return <CodeBlock code={code} label={label} variant='panel' className={className} />
 }
 
-/** The framed card, for the `cards` transcript. Unhighlighted by design: it is
- * structured data in a panel, not a file. */
-function PlainPayload({ code, label, variant, className }: PayloadProps) {
-  return <CodeBlock code={code} label={label} variant={variant} className={className} />
-}
+/** One image part of a tool result, as the reducer holds it. */
+type ToolResultImage = NonNullable<NonNullable<ToolCallItem['result']>['images']>[number]
 
-/** The terminal payload — shared with the line-shaped prompts. */
-function HighlightedPayload({ code, label, language, className }: PayloadProps) {
-  return <LinePayload code={code} label={label} language={language} className={className} />
+/**
+ * An image part of the result, fetched by reference.
+ *
+ * The frame is a **fixed height in all three states** — placeholder, picture,
+ * failure — which is the one rule this shares with the terminal theme and the
+ * only reason it is worth a component: the transcript is virtualized in both,
+ * and a box that appears when the bytes land shoves every row below it down
+ * while the reader is mid-sentence. Unlike `HostImage`, a failure here is *said*
+ * rather than swallowed: there is no host path in the result text to fall back
+ * on, so silence would be a blank frame with no account of itself.
+ */
+function ResultImage({ toolUseId, image }: { toolUseId: string; image: ToolResultImage }) {
+  const { src, failed } = useToolResultImageSrc({ toolUseId, ...image })
+  return (
+    <div className='flex h-60 items-start overflow-hidden rounded-md border border-border bg-surface-hover'>
+      {src ? (
+        <img src={src} alt={imagePlaceholder(image)} className='h-full max-w-full object-contain' />
+      ) : (
+        <span className='p-2 text-label text-fg-4'>
+          {failed ? IMAGE_UNAVAILABLE : imagePlaceholder(image)}
+        </span>
+      )}
+    </div>
+  )
 }
 
 /**
@@ -282,11 +257,9 @@ function HighlightedPayload({ code, label, language, className }: PayloadProps)
 function HostImage({
   path,
   load,
-  lines,
 }: {
   path: string
   load: (path: string) => Promise<string | undefined>
-  lines?: boolean
 }) {
   const [src, setSrc] = useState<string | undefined>()
   useEffect(() => {
@@ -305,7 +278,7 @@ function HostImage({
   }, [path, load])
   if (!src) return null
   return (
-    <div className={cn(lines ? cn('py-1', LINE_INDENT) : 'border-t border-border p-2.5')}>
+    <div className='border-t border-border p-2.5'>
       <img
         src={src}
         alt={path.split('/').pop() ?? 'Generated image'}