@workerdeck/ui 0.16.0 → 0.17.0

package/src/components/agent/SessionBrowser.tsx

@@ -20,6 +20,8 @@ import {
   filterRows,
   groupRows,
   hasFacetFilter,
+  projectLabel,
+  projectsOf,
   sessionLabel,
   subsetSummary,
 } from '@workerdeck/protocol'
@@ -36,6 +38,7 @@ import { Empty } from '../ui/Empty.tsx'
 import { Input } from '../ui/Input.tsx'
 import { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from '../ui/Select.tsx'
 import { Spinner } from '../ui/Spinner.tsx'
+import { ProjectIcon } from './ProjectIcon.tsx'
 import { cn } from '../../lib/utils.ts'
 import { formatCost, formatRelativeTime, friendlyModel } from '../../lib/format.ts'
 
@@ -88,6 +91,15 @@ export interface SessionBrowserProps {
    * filtered by a control you can't currently see still says so.
    */
   showControls?: boolean
+  /**
+   * Resolved project-icon bytes by content hash — `useProjectIcons`' output.
+   *
+   * Passed in rather than fetched here for the reason `ProjectIcon` states: the
+   * wire carries an *address*, and who can fetch it differs per client. Absent,
+   * or a hash not in it yet, simply draws no picture; the project's name is
+   * already there.
+   */
+  projectIcons?: Record<string, string>
   className?: string
 }
 
@@ -125,6 +137,7 @@ export function SessionBrowser({
   onRename,
   emptyState,
   showControls = true,
+  projectIcons,
   className,
 }: SessionBrowserProps) {
   const visible = useMemo(() => filterRows(rows, config, scope), [rows, config, scope])
@@ -133,6 +146,7 @@ export function SessionBrowser({
   // Derived, not enumerated: a new engine or a new gateway needs no change here,
   // and a facet with one possible value is not a choice worth showing.
   const adapters = useMemo(() => adaptersOf(rows), [rows])
+  const projects = useMemo(() => projectsOf(rows), [rows])
   const gateways = useMemo(() => {
     const seen = new Map<string, string>()
     for (const row of rows) seen.set(row.hostId, row.hostName)
@@ -187,6 +201,16 @@ export function SessionBrowser({
             />
           </FilterRow>
         ) : null}
+        {projects.length > 1 ? (
+          <FilterRow label='Project'>
+            <FacetSelect
+              label='Project'
+              value={config.projects ?? []}
+              options={projects.map((p) => ({ value: p.key, label: p.label }))}
+              onChange={(next) => set({ projects: next })}
+            />
+          </FilterRow>
+        ) : null}
         <FilterRow label='Group'>
           <OneOfSelect
             label='Group'
@@ -195,6 +219,7 @@ export function SessionBrowser({
               { value: 'none', label: 'No grouping' },
               { value: 'state', label: 'By state' },
               { value: 'adapter', label: 'By engine' },
+              ...(projects.length > 1 ? [{ value: 'project' as const, label: 'By project' }] : []),
               ...(gateways.length > 1 ? [{ value: 'gateway' as const, label: 'By gateway' }] : []),
             ]}
             onChange={(groupBy) => set({ groupBy: groupBy as GroupBy })}
@@ -208,6 +233,7 @@ export function SessionBrowser({
               { value: 'recent', label: 'Recent' },
               { value: 'name', label: 'Name' },
               { value: 'state', label: 'State' },
+              ...(projects.length > 1 ? [{ value: 'project' as const, label: 'Project' }] : []),
               ...(gateways.length > 1 ? [{ value: 'gateway' as const, label: 'Gateway' }] : []),
             ]}
             onChange={(sortBy) => set({ sortBy: sortBy as SortBy })}
@@ -253,7 +279,16 @@ export function SessionBrowser({
           {groups.map((group) => (
             <div key={group.key} className='flex flex-col gap-1'>
               {config.groupBy !== 'none' && group.label ? (
-                <div className='flex items-baseline gap-2 px-3 text-label font-medium text-fg-4'>
+                <div className='flex items-center gap-2 px-3 text-label font-medium text-fg-4'>
+                  {/* Only the project facet has a mark of its own, and a group
+                      IS one project root, so the first row is a fair source. */}
+                  {config.groupBy === 'project' ? (
+                    <ProjectIcon
+                      icon={group.rows[0]?.info.project?.icon}
+                      src={iconSrcOf(group.rows[0], projectIcons)}
+                      name={group.label}
+                    />
+                  ) : null}
                   <span className='uppercase tracking-wide'>{group.label}</span>
                   <span className='text-fg-4/70'>{group.rows.length}</span>
                 </div>
@@ -264,6 +299,8 @@ export function SessionBrowser({
                   row={row}
                   active={row.info.id === activeId}
                   showGateway={gateways.length > 1}
+                  showProject={config.groupBy !== 'project'}
+                  projectIcons={projectIcons}
                   onSelect={onSelect}
                   onDelete={onDelete}
                   onRename={onRename}
@@ -277,10 +314,27 @@ export function SessionBrowser({
   )
 }
 
+/** The bytes for a row's project icon, if it has an image one and the caller has
+ * fetched it yet. Shared by the row and its group header so the two cannot draw
+ * different pictures for one project. */
+function iconSrcOf(
+  row: SessionRow | undefined,
+  icons: Record<string, string> | undefined,
+): string | undefined {
+  const icon = row?.info.project?.icon
+  return icon?.type === 'image' ? icons?.[icon.hash] : undefined
+}
+
 interface SessionRowItemProps {
   row: SessionRow
   active?: boolean
   showGateway?: boolean
+  /** False when the list is already grouped by project — the header has said
+   * the name, so the slot goes back to the cwd's basename, which inside a
+   * project group is the one thing the header cannot say. The rule `showGateway`
+   * follows one facet over. */
+  showProject?: boolean
+  projectIcons?: Record<string, string>
   onSelect?: (row: SessionRow) => void
   onDelete?: (row: SessionRow) => void
   onRename?: (row: SessionRow, title: string) => void
@@ -290,6 +344,8 @@ function SessionRowItem({
   row,
   active,
   showGateway,
+  showProject = true,
+  projectIcons,
   onSelect,
   onDelete,
   onRename,
@@ -300,13 +356,23 @@ function SessionRowItem({
   // What it is and what it has spent, in one line — the same set the extension
   // shows, joined the same way, so the two lists read as one product.
   const folder = info.cwd.split('/').filter(Boolean).pop() ?? info.cwd
+  // protocol's own spelling, so this row, the group header above it and the
+  // project facet cannot disagree about what a project is called. It falls back
+  // to exactly the basename this line drew before the feature existed.
+  const project = showProject ? projectLabel(row) : folder
+  const projectIcon = showProject ? info.project?.icon : undefined
   const details = [
     showGateway ? row.hostName : undefined,
     friendlyModel(info.model),
-    folder,
+    project,
     info.profile ? `@${info.profile}` : undefined,
     formatCost(info.totalCostUsd),
   ].filter(Boolean)
+  // Where the icon goes: immediately before the project's own name, wherever
+  // that landed in the joined line. Split rather than interleaved as nodes,
+  // because everything here is one truncating mono run and a flex of pieces
+  // would each shrink a little and leave several half-words.
+  const cut = details.indexOf(project)
 
   return (
     <div
@@ -371,7 +437,22 @@ function SessionRowItem({
           type='button'
           tabIndex={-1}
           className='min-w-0 flex-1 truncate text-left font-mono outline-none'>
-          {details.join(' · ')}
+          {cut < 0 ? (
+            details.join(' · ')
+          ) : (
+            <>
+              {details.slice(0, cut).map((part) => `${part} · `)}
+              <ProjectIcon
+                icon={projectIcon}
+                src={iconSrcOf(row, projectIcons)}
+                name={project}
+                /* Nudged onto the text baseline: a 12px glyph box against an
+                   11px line sits a hair proud without it. */
+                className='mr-1 align-[-0.2em]'
+              />
+              {details.slice(cut).join(' · ')}
+            </>
+          )}
         </button>
         {onRename && !editing ? (
           <Button

package/src/components/agent/SessionPanel.tsx

@@ -63,6 +63,8 @@ import type { TerminalAffordances } from '../terminal/affordances.tsx'
 import { SessionInfoDialog } from './SessionInfoDialog.tsx'
 import { StatusBar } from './StatusBar.tsx'
 import { Transcript } from './Transcript.tsx'
+import { ToolResultFetchProvider } from './tool-result-fetch.tsx'
+import { ToolResultImageProvider, useToolResultImages } from './tool-result-image.tsx'
 import {
   TranscriptDensityProvider,
   TranscriptVariantProvider,
@@ -227,6 +229,14 @@ export interface SessionPanelProps {
    * client's watermarks; a shared one is session metadata on the gateway).
    */
   scrubberMarks?: readonly number[]
+  /**
+   * Scroll a tool call into view; bump `nonce` to ask again for the same one.
+   * See {@link TranscriptProps.reveal} — this is the panel's pass-through, and
+   * exists so a surface *outside* the panel (a sessions list showing a session's
+   * running sub-agents) can say "take me to that one" without opening a second
+   * attach to find out where it is.
+   */
+  reveal?: { toolUseId: string; nonce: number }
   /**
    * Terminal theme only: hold the prompt of the turn you are reading at the top
    * of the transcript, as the Claude Code CLI does. The **real row** is pinned
@@ -441,6 +451,7 @@ export function SessionPanel({
   terminalMetrics,
   scrubber = false,
   scrubberMarks,
+  reveal,
   stickyPrompt = false,
   controlsSurface = 'internal',
   onControls,
@@ -479,6 +490,7 @@ export function SessionPanel({
     setModel,
     setPermissionMode,
     reconnectNow,
+    loadFullResult,
   } = useClaudeSession(client, sessionId, { onProtocolError: setProtocolError, cacheTranscript })
   // Callers are told to remount on a session switch, but a changed prop must not leave
   // the previous session's failure on screen.
@@ -630,6 +642,10 @@ export function SessionPanel({
   // path, never bytes). Stable and memoized per path: transcript rows re-render
   // on every delta, and a fresh function would re-fetch each time.
   const hostImage = useHostImage(client, sessionId, state.producedFiles)
+  // The other picture route, and the other store: an image *part* of a tool
+  // result, which an opted-in replay delivered as a reference rather than half a
+  // megabyte of base64. Bounded, unlike `useHostImage` — see the module.
+  const resultImages = useToolResultImages(client, sessionId)
   const composerRef = useRef<ComposerHandle>(null)
   // The catch-up strip's way of scrolling the (virtualized, usually unmounted)
   // recap row into view — the transcript fills it in. See TranscriptProps.
@@ -807,6 +823,12 @@ export function SessionPanel({
     // run, and they read it from this context rather than a prop chain.
     <TranscriptVariantProvider value={transcriptVariant}>
       <TranscriptDensityProvider value={transcriptDensity}>
+      {/* The panel owns the session's one attach, so it is the only thing that
+          can answer a row asking for the rest of a truncated tool result. Rows
+          rendered anywhere else fall back to the context's no-op, which is
+          correct for them: nothing truncates a replay they never asked for. */}
+      <ToolResultFetchProvider value={loadFullResult}>
+      <ToolResultImageProvider value={resultImages}>
       <div
         data-slot='session-panel'
         // The typeface is a cascade fact, not a React one — one attribute here,
@@ -848,6 +870,7 @@ export function SessionPanel({
               ? { from: catchUp.itemCount, since: catchUp.since }
               : undefined
           }
+          reveal={reveal}
           jumpToRecapRef={jumpToRecap}
           repinRef={repinTranscript}
         />
@@ -1009,6 +1032,8 @@ export function SessionPanel({
           </>
         ) : null}
       </div>
+      </ToolResultImageProvider>
+      </ToolResultFetchProvider>
       </TranscriptDensityProvider>
     </TranscriptVariantProvider>
   )

package/src/components/agent/ToolCallCard.tsx

@@ -7,6 +7,14 @@ import { Spinner } from '../ui/Spinner.tsx'
 import { cn } from '../../lib/utils.ts'
 import { toolInputPreview } from '../../lib/format.ts'
 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' }>
 
@@ -81,6 +89,8 @@ type Status = keyof typeof STATE_BADGE
 export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps) {
   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]
@@ -88,8 +98,14 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
   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
 
   const details = open ? (
     <div className='flex flex-col gap-2 border-t border-border p-2.5'>
@@ -109,12 +125,21 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
             label={isError ? 'Error' : 'Result'}
                 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>
@@ -126,6 +151,18 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
   // tool's own output would be if the engine had sent bytes.
   const image = imagePath && hostImage ? <HostImage path={imagePath} load={hostImage} /> : null
 
+  // 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
       data-slot='tool-call'
@@ -158,6 +195,7 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
         />
       </button>
       {image}
+      {resultImages}
       {details}
     </div>
   )
@@ -178,6 +216,35 @@ function PlainPayload({
   return <CodeBlock code={code} label={label} variant='panel' className={className} />
 }
 
+/** One image part of a tool result, as the reducer holds it. */
+type ToolResultImage = NonNullable<NonNullable<ToolCallItem['result']>['images']>[number]
+
+/**
+ * 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>
+  )
+}
+
 /**
  * A picture that lives on the host, fetched through the gateway's host-file
  * route and shown inline.

package/src/components/agent/Transcript.tsx

@@ -25,15 +25,15 @@ import { Response } from './Response.tsx'
 import { SessionEmptyState } from './SessionEmptyState.tsx'
 import { ToolCallCard } from './ToolCallCard.tsx'
 import { resolveAffordances, type TerminalAffordances } from '../terminal/affordances.tsx'
-import { ToolRunRow, WorkingRow, terminalBlocks } from '../terminal/items.tsx'
+import { ToolRunRow, WorkingRow, parentOf, terminalBlocks } from '../terminal/items.tsx'
 import { estimateBlockPx } from '../terminal/height.ts'
 import { TerminalScrubber } from '../terminal/scrubber.tsx'
-import { gapBefore, rowIndexForItem, type TranscriptRow } from './transcript-rows.ts'
+import { gapBefore, positionInRow, rowIndexForItem, type TranscriptRow } from './transcript-rows.ts'
 import { useHeightEpoch } from './use-height-epoch.ts'
 import { useTranscriptJumps } from './use-transcript-jumps.ts'
 import { Row } from '../terminal/row.tsx'
 import { TerminalSurface } from '../terminal/surface.tsx'
-import { TerminalItemView } from '../terminal/TerminalTranscript.tsx'
+import { TaskRow, TerminalItemView } from '../terminal/TerminalTranscript.tsx'
 import {
   ROW_GAP,
   TranscriptVariantProvider,
@@ -443,6 +443,7 @@ function TranscriptRows({
   hostImage,
   jumpToRecapRef,
   repinRef,
+  reveal,
 }: {
   rows: TranscriptRow[]
   boundary: number | undefined
@@ -473,6 +474,7 @@ function TranscriptRows({
   hostImage?: (path: string) => Promise<string | undefined>
   jumpToRecapRef?: RefObject<(() => void) | null>
   repinRef?: RefObject<(() => void) | null>
+  reveal?: { toolUseId: string; nonce: number }
 }) {
   const stick = useStickToBottomContext()
   // The scroll element belongs to an ancestor — `StickToBottom.Content`
@@ -487,7 +489,15 @@ function TranscriptRows({
   // changes, so the per-scroll work below is a walk over prompts rather than
   // over the transcript.
   const promptRows = useMemo(
-    () => rows.flatMap((row, index) => ('item' in row && row.item.kind === 'user' ? [index] : [])),
+    // Top-level prompts only: a subagent's brief is a `user` item too, and one
+    // that escaped absorption (an orphan) must not become the pinned prompt —
+    // it is not what the answer on screen belongs to.
+    () =>
+      rows.flatMap((row, index) =>
+        'item' in row && row.item.kind === 'user' && parentOf(row.item) === undefined
+          ? [index]
+          : [],
+      ),
     [rows],
   )
   // The pinned row must stay mounted even when it is far above the window, so
@@ -603,7 +613,7 @@ function TranscriptRows({
       if (terminal && epoch) {
         const row = rows[index]
         const gapPx = index > 0 && gapBefore(rows, index) ? epoch.line : 0
-        if (row && ('item' in row || 'run' in row))
+        if (row && !('line' in row))
           return estimateBlockPx(row, epoch) + gapPx
         return epoch.line + gapPx // recap: one Row, one line
       }
@@ -715,6 +725,34 @@ function TranscriptRows({
     repinRef,
   })
 
+  // Reveal a tool call from outside the transcript — a sub-agent picked in a
+  // sessions list, whose `Task` row is the thing the reader asked for.
+  //
+  // Keyed on the **nonce**, never on the id: asking for the same sub-agent twice
+  // is a second request, and a props-equal effect would answer only the first.
+  // The lookup goes through `rowIndexForItem` for the reason that function
+  // exists — a row covers a *membership*, not a contiguous span, so a Task's id
+  // resolves to the folded row that absorbed it rather than to a position. That
+  // also makes a nested child's id work, which is what a client holding only a
+  // `parentToolUseId` can offer.
+  //
+  // `'start'`, like the recap seam and the scrubber's marks: the sub-agent's
+  // work runs *downward* from its row, so the reader wants the screen below it.
+  const revealNonce = reveal?.nonce
+  const revealId = reveal?.toolUseId
+  useEffect(() => {
+    if (revealId === undefined) return
+    const itemIndex = items.findIndex(
+      (item) => item.kind === 'tool_call' && item.id === revealId,
+    )
+    // Not here: a compaction, a `/clear`, or simply a client whose list knows
+    // about a Task this transcript has not replayed yet. Staying put beats
+    // jumping somewhere arbitrary.
+    if (itemIndex < 0) return
+    jumpToRow(rowIndexForItem(rows, itemIndex), 'start')
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- the nonce IS the trigger
+  }, [revealNonce])
+
   // The scrubber. Interactivity follows the hover affordance — with
   // `affordances={false}` the rail is passive paint (pointer-events off) and
   // the native scrollbar stays; interactive, the rail IS the scrollbar, so the
@@ -808,8 +846,16 @@ function TranscriptRows({
                 terminal={terminal}
               />
             </div>
-          ) : (
+          ) : 'line' in row ? (
             <RecapRow line={row.line} since={since} terminal={terminal} />
+          ) : (
+            // A task block. No `nestedClass` here: the rule belongs *inside*
+            // the row, around the children it opens onto — the collapsed line
+            // is the main thread's, and stepping it in would say a `Task` call
+            // happened somewhere else.
+            <div className={cn(read(boundary, row.index) && 'opacity-45')}>
+              <TaskRow block={row} fileUrl={fileUrl} />
+            </div>
           )
         // A prompt row's sticky lane — see the pinned-prompt comment above.
         // The lane is sized to the turn; the sticky **head** (one clipped
@@ -824,7 +870,15 @@ function TranscriptRows({
         // paint-only, so under a translate the head would stick against the
         // lane's un-translated box at the top of the list — observed as the
         // row clamped to its lane's bottom edge, never pinning at all.
-        if (terminal && stickyPrompt && 'item' in row && row.item.kind === 'user') {
+        // Same predicate as `promptRows` above — the lane and the forced range
+        // must agree on which rows are prompts.
+        if (
+          terminal &&
+          stickyPrompt &&
+          'item' in row &&
+          row.item.kind === 'user' &&
+          parentOf(row.item) === undefined
+        ) {
           const next = promptRows.find((index) => index > virtualRow.index)
           const laneEnd =
             next === undefined
@@ -868,6 +922,7 @@ function TranscriptRows({
               recapRow={recapRow}
               bookmarks={scrubberMarks ?? []}
               rowIndexFor={(itemIndex) => rowIndexForItem(rows, itemIndex)}
+              positionInRow={(itemIndex) => positionInRow(rows, itemIndex)}
               // The public memoized measurements array — `getTotalSize()` just
               // above refreshed it, and with the calculator feeding
               // `estimateSize` these starts are honest for unmounted rows too.
@@ -976,6 +1031,19 @@ export interface TranscriptProps {
    * message look like it did nothing at all.
    */
   repinRef?: RefObject<(() => void) | null>
+  /**
+   * Scroll a tool call into view — bump `nonce` to ask again for the same one.
+   *
+   * The seam a *list* needs: sub-agent work is nested inside the `Task` call
+   * that spawned it, so "open that sub-agent" can only ever mean "take me to its
+   * row". A `parentToolUseId` works here as well as the Task's own id, since the
+   * lookup resolves an absorbed child to the row that folded it.
+   *
+   * A prop rather than a ref (the shape `jumpToRecapRef` uses) because the asker
+   * is outside this webview entirely and the request travels as data; a ref
+   * would need a live closure at the other end of a postMessage bridge.
+   */
+  reveal?: { toolUseId: string; nonce: number }
   className?: string
 }
 
@@ -997,6 +1065,7 @@ export function Transcript({
   catchUp,
   jumpToRecapRef,
   repinRef,
+  reveal,
   className,
 }: TranscriptProps) {
   const terminal = variant === 'terminal'
@@ -1080,6 +1149,7 @@ export function Transcript({
               hostImage={hostImage}
               jumpToRecapRef={jumpToRecapRef}
               repinRef={repinRef}
+              reveal={reveal}
             />
           )}
           {showLoader(state) ? (

package/src/components/agent/tool-result-fetch.tsx

@@ -0,0 +1,36 @@
+import { createContext, useContext, type ReactNode } from 'react'
+
+/**
+ * How a row gets back the part of a tool result the replay did not send.
+ *
+ * A **context**, not a prop chain, for the same reason the variant is one: the
+ * rows that need it are drawn by `terminalBlocks` and by the cards theme's
+ * `ToolCallCard`, several layers below whoever holds the session, and a row
+ * composed by hand should get the same behaviour without threading a callback
+ * through everything in between.
+ *
+ * The default is a no-op resolving `false`, which is exactly right for every
+ * surface that never asked for truncation (the playground, a fixture, an
+ * embedder rendering rows by hand): `result.truncated` is only ever set by a
+ * replay a renderer opted into, so a row that has no fetcher also has no head to
+ * complete. A press still opens the row; it simply has everything already.
+ */
+export type ToolResultFetcher = (toolUseId: string) => Promise<boolean>
+
+const FetchContext = createContext<ToolResultFetcher>(async () => false)
+
+export function ToolResultFetchProvider({
+  value,
+  children,
+}: {
+  value: ToolResultFetcher | undefined
+  children: ReactNode
+}) {
+  return <FetchContext.Provider value={value ?? noop}>{children}</FetchContext.Provider>
+}
+
+const noop: ToolResultFetcher = async () => false
+
+export function useToolResultFetcher(): ToolResultFetcher {
+  return useContext(FetchContext)
+}