zidane-ui 9.0.4 → 9.1.3

package/src/chat/transcript/run-rows.tsx

@@ -1,291 +0,0 @@
-/**
- * The run's boundary lines: the per-run receipt (`RunReceiptInline`, docked
- * under a run's closing reply or standalone as `RunSummaryRow`) and the
- * compaction card (`CompactSummaryRow`), which share its cells and tints.
- */
-import { memo, useState, type CSSProperties } from 'react';
-import type { StreamEvent } from 'zidane/chat';
-import {
-  formatCostUsd,
-  formatRunReceiptCells,
-  formatTokenCount,
-  type RunReceipt,
-  type RunReceiptCell,
-  type RunReceiptSegment,
-  RUN_RECEIPT_SWITCH_GLYPH,
-  RUN_RECEIPT_TURN_GLYPH,
-} from 'zidane/chat/pure';
-import { Tooltip } from '../../components/Tooltip';
-import { useStaysMounted } from '../../motion/collapse';
-import type { ChatLabels } from '../headless/labels';
-import type { Row } from '../headless/transcript';
-import { useChatLabels } from '../useChatLabels';
-import { useModelName } from './actions';
-import { Caret } from './frame';
-import { useTranscriptRenderers } from './renderers';
-
-/**
- * The per-run receipt: agent, model, time, round trips, cost, tokens, speed. Content
- * comes from `formatRunReceiptCells`, the same cells the TUI and replay use.
- */
-/*
- * Tints by MEANING, every one a THEME slot (see ThemeProvider), so the receipt
- * recolors with the palette exactly as the TUI's does:
- *   model → `--zg-model`            turns `↻n` → `--zg-accent` (brand)
- *   cost → `--zg-money`             ↑ sent → brand
- *   ↓ received → `--zg-accent-alt` (the theme's accent)
- *   tk/s → `--zg-warn`
- * Each tint is blended halfway into the muted text (`.zg-soft-tint`), as the
- * fold's outcome chip is: the receipt and the compaction card read as detail
- * under the answer, still told apart by meaning. The neutral cells (time, tokens) sit at 80% of the text color, not
- * the muted tone, so the small mono stays readable; the receipt recedes
- * through its `.zg-meta` size and the hairline-only chips.
- */
-const RUN_RECEIPT_TINT: Record<RunReceiptCell['kind'], string> = {
-  agent: 'text-zg-text/80',
-  model: 'zg-soft-tint zg-tint-model',
-  turns: 'zg-soft-tint zg-tint-accent',
-  cost: 'zg-soft-tint zg-tint-money',
-  duration: 'text-zg-text/80',
-  tokens: 'text-zg-text/80',
-  speed: 'zg-soft-tint zg-tint-warn',
-};
-
-const RUN_RECEIPT_SEGMENT_TINT: Record<RunReceiptSegment['kind'], string> = {
-  'tokens-in': 'zg-soft-tint zg-tint-accent',
-  'tokens-out': 'zg-soft-tint zg-tint-accent-alt',
-};
-
-/*
- * The receipt's leading glyphs, drawn as icons. In the mono stack `↻ ↑ ↓`
- * come from a fallback font that draws them small and on the baseline, below
- * the middle of the digits beside them; an icon the height of a digit sits
- * centered on them.
- *
- * Centred on the digits' cap height from the baseline, not on the line box:
- * the line box's middle depends on the font's rounded ascent/descent (SF Mono
- * at 11px puts it 3.5px over the baseline, the digits' middle is at 4.1px).
- * The icon is 0.8em, so raising its bottom by half the parent's cap height
- * less half its own height is `0.5cap / 0.8 - 0.5em` in its own units.
- */
-const RECEIPT_GLYPH_ICON: Readonly<Record<string, string>> = {
-  [RUN_RECEIPT_TURN_GLYPH]: 'i-ph-arrow-clockwise-bold',
-  [RUN_RECEIPT_SWITCH_GLYPH]: 'i-ph-arrows-left-right-bold',
-  '↑': 'i-ph-arrow-up-bold',
-  '↓': 'i-ph-arrow-down-bold',
-};
-
-/** A receipt value (`↻3`, `↑520k`), its leading glyph as an icon. */
-function ReceiptValue({ text, className }: { text: string; className: string }) {
-  const icon = RECEIPT_GLYPH_ICON[text.charAt(0)];
-  if (!icon) {
-    return <span className={className}>{text}</span>;
-  }
-  return (
-    <span className={className}>
-      {/* An icon, so a copy gets only the digits; a screen reader still hears the glyph. */}
-      <span
-        role="img"
-        aria-label={text.charAt(0)}
-        className={`${icon} inline-block mr-px text-[0.8em] align-[calc(0.625cap_-_0.5em)]`}
-      />
-      {text.slice(1)}
-    </span>
-  );
-}
-
-/** What each chip means, shown on hover. */
-function receiptTooltip(cell: RunReceiptCell, receipt: RunReceipt, labels: ChatLabels): string {
-  switch (cell.kind) {
-    case 'agent':
-      return receipt.agentSwitched ? labels.receiptAgentSwitched : labels.receiptAgent;
-    case 'model':
-      return receipt.otherModels ? labels.receiptModelOthers(receipt.otherModels) : labels.receiptModel;
-    case 'duration':
-      return labels.receiptDuration;
-    case 'turns':
-      return labels.receiptTurns(receipt.turns ?? 0);
-    case 'cost':
-      return labels.receiptCost;
-    case 'tokens':
-      return labels.receiptTokens(formatTokenCount(receipt.tokensIn ?? 0), formatTokenCount(receipt.tokensOut ?? 0));
-    case 'speed':
-      return labels.receiptSpeed;
-  }
-}
-
-/** Props for {@link RunReceiptInline}. */
-export interface RunReceiptInlineProps {
-  /** The run's summary: model, time, round trips, cost, tokens, and speed. */
-  receipt: RunReceipt;
-  /** Extra class names for the receipt's root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The run receipt as a row of small chips (model, time, round trips, cost,
- * tokens, speed), each tinted by meaning and explained on hover. The
- * hairline chips (`.zg-meta-chip`) keep the values apart.
- *
- * @param props - Receipt props: the `receipt` and an optional `className`.
- */
-export function RunReceiptInline({ receipt, className = '', style }: RunReceiptInlineProps) {
-  const labels = useChatLabels();
-  const modelName = useModelName();
-  const cells = formatRunReceiptCells(receipt, modelName);
-  if (cells.length === 0) {
-    return null;
-  }
-  return (
-    <div
-      className={`zg-meta flex flex-wrap items-center gap-1 min-w-0 leading-none ${className}`}
-      style={style}
-      aria-label={labels.runReceipt}
-      role="group"
-    >
-      {cells.map((cell, i) => (
-        <Tooltip
-          key={`${cell.kind}-${i}`}
-          label={receiptTooltip(cell, receipt, labels)}
-          side="top"
-          portal
-          maxWidth={260}
-          className="shrink-0"
-        >
-          <span className="zg-meta-chip shrink-0 gap-1 cursor-default" data-cell={cell.kind}>
-            {cell.segments ? (
-              cell.segments.map((seg, j) => (
-                <ReceiptValue key={`${seg.kind}-${j}`} text={seg.text} className={RUN_RECEIPT_SEGMENT_TINT[seg.kind]} />
-              ))
-            ) : (
-              <ReceiptValue text={cell.text} className={RUN_RECEIPT_TINT[cell.kind]} />
-            )}
-          </span>
-        </Tooltip>
-      ))}
-    </div>
-  );
-}
-
-/** Props for {@link RunSummaryRow}. */
-export interface RunSummaryRowProps {
-  /** The run's summary row: its receipt, or a plain line when it has none. */
-  event: Extract<Row, { kind: 'run-summary' }>;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** Standalone receipt row — only for a run whose closing turn has no assistant row to dock onto. */
-export const RunSummaryRow = memo(({ event, className, style }: RunSummaryRowProps) => {
-  if (!event.runSummary) {
-    return event.text ? (
-      <div
-        className={['text-xs text-[var(--zg-text-muted)] truncate', className].filter(Boolean).join(' ')}
-        style={style}
-      >
-        {event.text}
-      </div>
-    ) : null;
-  }
-  return (
-    <div className={['py-1.5', className].filter(Boolean).join(' ')} style={style}>
-      <RunReceiptInline receipt={event.runSummary} />
-    </div>
-  );
-});
-
-/** Props for {@link CompactSummaryRow}. */
-export interface CompactSummaryRowProps {
-  /** The summary the model wrote for the compacted turns, as markdown. Shown when the row is expanded. */
-  text: string;
-  /** Details of the compaction: turns replaced, model, cost, and token counts. */
-  meta: NonNullable<StreamEvent['compact']>;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a compaction boundary: how many turns were compacted, the model, cost, and tokens, with the summary text behind a toggle.
- *
- * @param props - Row props: the summary `text` and its `meta`.
- */
-export function CompactSummaryRow({ text, meta, className, style }: CompactSummaryRowProps) {
-  const [open, setOpen] = useState(false);
-  const mounted = useStaysMounted(open);
-  const labels = useChatLabels();
-  const modelName = useModelName();
-  const { Markdown } = useTranscriptRenderers();
-
-  /**
-   * Effective `in` tokens: providers with prompt caching (Anthropic,
-   * OpenRouter→Anthropic, Gemini) report `inputTokens` as ONLY the new
-   * uncached prefix — the cached prefix lives in `cacheReadTokens` and
-   * any newly-cached tokens in `cacheCreationTokens`. The model still
-   * saw all three buckets, so the realistic input figure is their sum.
-   * Non-caching providers leave the cache fields at 0 and this
-   * collapses to `inputTokens` alone.
-   */
-  const effectiveInputTokens = meta.inputTokens + (meta.cacheReadTokens ?? 0) + (meta.cacheCreationTokens ?? 0);
-
-  /**
-   * A context boundary, set in a tray so the summary never reads as agent
-   * output: the count, then the run receipt's chips (model, cost, sent /
-   * received, same tints). One line: the chips keep their size and the label
-   * ellipsizes before anything wraps. No border: the dot's `compact` line height counts
-   * on that (see frame.tsx).
-   */
-  return (
-    <div
-      className={['zg-tray text-xs mt-1 rounded-zg-lg overflow-hidden', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      <button
-        type="button"
-        onClick={() => setOpen((c) => !c)}
-        aria-expanded={open}
-        className="zg-press-subtle flex items-center gap-2 w-full min-w-0 bg-transparent border-0 cursor-pointer text-[var(--zg-text-muted)] px-3 py-1.5 hover:before:bg-[var(--zg-row-hover)] transition-colors"
-      >
-        <span className="font-medium text-[var(--zg-text)] truncate whitespace-nowrap min-w-0 text-left">
-          <span className="tabular-nums">{meta.replacedCount}</span>
-          {` ${labels.turnsCompacted}`}
-        </span>
-        <span className="zg-meta flex items-center gap-1 shrink-0 leading-none">
-          <span className="zg-meta-chip" title={meta.model}>
-            <span className={RUN_RECEIPT_TINT.model}>{modelName(meta.model, meta.providerKey)}</span>
-          </span>
-          {meta.costUsd !== undefined && (
-            <span className="zg-meta-chip shrink-0">
-              <span className={RUN_RECEIPT_TINT.cost}>{formatCostUsd(meta.costUsd)}</span>
-            </span>
-          )}
-          <span className="zg-meta-chip shrink-0 gap-1">
-            <ReceiptValue
-              text={`↑${formatTokenCount(effectiveInputTokens)}`}
-              className={RUN_RECEIPT_SEGMENT_TINT['tokens-in']}
-            />
-            <ReceiptValue
-              text={`↓${formatTokenCount(meta.outputTokens)}`}
-              className={RUN_RECEIPT_SEGMENT_TINT['tokens-out']}
-            />
-          </span>
-        </span>
-        <Caret open={open} className="ml-auto shrink-0" />
-      </button>
-      <div className="zg-collapsible" data-open={open}>
-        <div className="zg-collapsible-inner">
-          {mounted && (
-            <div className="px-3 pb-3 pt-2 text-[var(--zg-text-muted)] text-xs leading-relaxed border-t border-[var(--zg-hairline)]">
-              <Markdown>{text}</Markdown>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/chat/transcript/site-icons.ts

@@ -1,27 +0,0 @@
-/** A link's site icon in components, from the host's `siteIcons` (`ChatHost.siteIcons`). */
-import { useEffect, useSyncExternalStore } from 'react';
-
-import { useOptionalChatHost } from '../ChatProvider';
-import { siteOrigin } from '../headless/site-icons';
-
-const NO_UNSUBSCRIBE = () => {};
-const NO_SUBSCRIBE = () => NO_UNSUBSCRIBE;
-
-/**
- * The site icon of `url` once loaded; `null` until then, for a site without one, or without a host's icons.
- *
- * @param url - The link.
- */
-export function useSiteIcon(url: string): string | null {
-  const icons = useOptionalChatHost()?.siteIcons;
-  const origin = siteOrigin(url);
-  useEffect(() => {
-    if (origin) icons?.request(origin);
-  }, [icons, origin]);
-  return useSyncExternalStore(
-    icons ? icons.subscribe : NO_SUBSCRIBE,
-    () => (origin && icons ? icons.get(origin) : null),
-    // Server render: no icon yet, as on the first client paint before a load.
-    () => null,
-  );
-}

package/src/chat/transcript/thumbnails.ts

@@ -1,146 +0,0 @@
-/**
- * Small thumbnails of large images, for tiles that show a big image at a
- * small size (the fold's attachments strip: 64px tiles of screenshots that
- * are 1440×900 and more).
- *
- * Why: an `<img>` of a large image at a small size still decodes it at full
- * resolution, on every mount, in the raster workers the compositor waits on
- * to draw the tiles in view. Scrolling a session with dozens of screenshots
- * then drops every other frame. Here each image is decoded once, off the main
- * thread (`createImageBitmap` from a blob, scaled while it decodes), encoded
- * as a small WebP and kept as an object URL: a tile then decodes a few
- * kilobytes, and a tile mounting again (a row scrolled back into view)
- * decodes nothing new.
- *
- * At most {@link CONCURRENCY} thumbnails are made at once, the most recently
- * asked for first: during a flick, the images where the reader stopped come
- * before the ones they flew past. The last {@link MAX_THUMBNAILS} are kept.
- * Where the platform lacks what this needs (server rendering, jsdom), or a
- * thumbnail cannot be made, the image's own address is used: the `<img>`
- * then loads it (and reports its failure) as before.
- */
-import { useEffect, useState } from 'react';
-
-/** Thumbnails made at once. */
-const CONCURRENCY = 2;
-/** Thumbnails kept: each is a few kilobytes. */
-const MAX_THUMBNAILS = 240;
-
-/** Ready thumbnails by key, least recently used first. */
-const ready = new Map<string, string>();
-/** Thumbnails being made (or waiting their turn) by key. */
-const making = new Map<string, Promise<string>>();
-/** Jobs waiting for a slot; the last one in goes first. */
-const waiting: (() => void)[] = [];
-let running = 0;
-let scheduled = false;
-
-const supported = (): boolean =>
-  typeof createImageBitmap === 'function' &&
-  typeof OffscreenCanvas !== 'undefined' &&
-  typeof fetch === 'function' &&
-  typeof URL.createObjectURL === 'function';
-
-/** The image at `src`, scaled so its shorter side is `edge` pixels, as an object URL. */
-async function make(src: string, edge: number): Promise<string> {
-  const res = await fetch(src, { priority: 'low' } as RequestInit);
-  if (!res.ok) throw new Error(`thumbnail: ${res.status}`);
-  const blob = await res.blob();
-  // Landscape (a screenshot) is the common case: scale by height, and by width when that left it narrower.
-  let bitmap = await createImageBitmap(blob, { resizeHeight: edge, resizeQuality: 'medium' });
-  if (bitmap.width < edge) {
-    bitmap.close();
-    bitmap = await createImageBitmap(blob, { resizeWidth: edge, resizeQuality: 'medium' });
-  }
-  const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
-  canvas.getContext('bitmaprenderer')!.transferFromImageBitmap(bitmap);
-  return URL.createObjectURL(await canvas.convertToBlob({ type: 'image/webp', quality: 0.85 }));
-}
-
-function keep(key: string, url: string): void {
-  ready.set(key, url);
-  for (const [oldest, old] of ready) {
-    if (ready.size <= MAX_THUMBNAILS) break;
-    ready.delete(oldest);
-    URL.revokeObjectURL(old);
-  }
-}
-
-function next(): void {
-  while (running < CONCURRENCY && waiting.length > 0) waiting.pop()!();
-}
-
-/** Starts jobs once the current burst of asks is in (a frame mounting many tiles): the last asked goes first. */
-function scheduleNext(): void {
-  if (scheduled) return;
-  scheduled = true;
-  queueMicrotask(() => {
-    scheduled = false;
-    next();
-  });
-}
-
-/** The ready thumbnail under `key`, marked as just used. */
-function readyThumbnail(key: string): string | undefined {
-  const url = ready.get(key);
-  if (url !== undefined) {
-    ready.delete(key);
-    ready.set(key, url);
-  }
-  return url;
-}
-
-/** The thumbnail of `src` at `edge`: made once, then shared; `src` itself when it cannot be made. */
-function thumbnail(src: string, edge: number, key: string): Promise<string> {
-  const pending = making.get(key);
-  if (pending) return pending;
-  const job = new Promise<string>((resolve) => {
-    waiting.push(() => {
-      running += 1;
-      make(src, edge)
-        .then((url) => {
-          keep(key, url);
-          resolve(url);
-        })
-        .catch(() => resolve(src))
-        .finally(() => {
-          running -= 1;
-          making.delete(key);
-          next();
-        });
-    });
-  });
-  making.set(key, job);
-  scheduleNext();
-  return job;
-}
-
-/**
- * The address to show `src` at in a box of `size` CSS pixels: a small
- * thumbnail once made, `null` until then (show the box empty), `src` itself
- * where none can be made.
- *
- * @param src - The image's address.
- * @param size - The box's shorter side, in CSS pixels; the thumbnail matches it on screen pixels (up to 2×).
- */
-export function useThumbnail(src: string, size: number): string | null {
-  const ratio = typeof devicePixelRatio === 'number' ? Math.min(2, Math.max(1, devicePixelRatio)) : 1;
-  const edge = Math.round(size * ratio);
-  const key = `${edge} ${src}`;
-  const [shown, setShown] = useState<{ key: string; url: string | null }>(() => ({
-    key,
-    url: supported() ? (readyThumbnail(key) ?? null) : src,
-  }));
-  const current = shown.key === key ? shown.url : supported() ? (readyThumbnail(key) ?? null) : src;
-  useEffect(() => {
-    if (current !== null) return undefined;
-    let live = true;
-    void thumbnail(src, edge, key).then((url) => {
-      if (live) setShown({ key, url });
-    });
-    return () => {
-      live = false;
-    };
-  }, [current, src, edge, key]);
-  return current;
-}

package/src/chat/transcript/tool-batch.tsx

@@ -1,111 +0,0 @@
-/**
- * A run of consecutive tool calls behind one header (`batchToolRuns`):
- * collapsed by default, expanding to each call's `ToolRow`.
- */
-import { Fragment, memo, useState, type CSSProperties } from 'react';
-
-import type { ToolRowModel } from '../headless/transcript';
-import { Caret, FailedMark, type LineState } from './frame';
-import { ToolTiming } from './tool-parts';
-import { NestedToolCalls, ToolRow } from './tool-row';
-
-/** Props for {@link ToolBatchRow}. */
-export interface ToolBatchRowProps {
-  /** The batch's id (its first tool's row id): keys its open state. */
-  id: string;
-  /** The batched tool calls, in order. */
-  tools: ReadonlyArray<ToolRowModel>;
-  /** The header's one-line summary of the calls. */
-  summary: string;
-  /** How each call's input shows (`Settings.toolCallDisplay`). */
-  mode: 'hidden' | 'formatted' | 'full';
-  /** Each call shows its result. */
-  showResult: boolean;
-  /** Each edit shows its diff. */
-  showDiff: boolean;
-  /** The batch's worst state, for its header line to show when the transcript draws no row icons (`ToolRowProps.lineState`). */
-  lineState?: LineState;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Expanded/collapsed memory per batch id, outliving the component: the
- * first tool of a live run renders as a plain `ToolRow`, and the moment a
- * second call lands the same position becomes a `ToolBatchRow` — a
- * different component type, so React remounts and `useState` would reset.
- * Keyed by the batch id (= the first tool's row id), which is stable for
- * the batch's whole life. Module-global, so it is capped: past
- * `BATCH_OPEN_STATE_MAX` ids the least recently toggled entry goes (a
- * forgotten batch just reopens collapsed, its default).
- */
-const BATCH_OPEN_STATE = new Map<string, boolean>();
-const BATCH_OPEN_STATE_MAX = 500;
-
-function rememberBatchOpen(id: string, open: boolean) {
-  // Re-insert so Map order is recency order, then drop the oldest.
-  BATCH_OPEN_STATE.delete(id);
-  BATCH_OPEN_STATE.set(id, open);
-  if (BATCH_OPEN_STATE.size > BATCH_OPEN_STATE_MAX) {
-    BATCH_OPEN_STATE.delete(BATCH_OPEN_STATE.keys().next().value!);
-  }
-}
-
-/**
- * Claude-Code-style batch header — collapsed by default, expands to
- * reveal each child `ToolRow`. Mirrors the chevron / press-soft pattern
- * the rest of the transcript already uses so the user reads it as
- * "the same affordance" even though the underlying row is synthetic.
- */
-export const ToolBatchRow = memo(
-  ({ id, tools, summary, mode, showResult, showDiff, lineState, className, style }: ToolBatchRowProps) => {
-    const [open, setOpenState] = useState(() => BATCH_OPEN_STATE.get(id) ?? false);
-    const setOpen = (next: boolean) => {
-      rememberBatchOpen(id, next);
-      setOpenState(next);
-    };
-    // A spawn waiting for a slot has not started: it doesn't count as running.
-    const running = tools.filter((t) => t.ok === null && !t.waitingFor && t.startedAt !== undefined);
-    const totalMs = tools.reduce((n, t) => n + (t.durationMs ?? 0), 0);
-
-    return (
-      <div className={['text-xs', className].filter(Boolean).join(' ')} style={style}>
-        <button
-          type="button"
-          onClick={() => setOpen(!open)}
-          aria-expanded={open}
-          className="zg-press-subtle flex items-baseline gap-2 w-full zg-disclosure py-0.5"
-        >
-          {/* Single line, left-aligned, ellipsis on overflow — long batch
-            summaries would otherwise wrap into a centered multi-line block. The
-            summary itself is also phrase-capped with a "+N" tail. */}
-          <span className={`min-w-0 truncate text-left${lineState === 'running' ? ' zg-shimmer' : ''}`}>{summary}</span>
-          {/* Live tail: what is running right now with its elapsed; once the
-            batch is quiet, the summed duration (live-watched calls only). */}
-          {running.length > 0 ? (
-            <ToolTiming startedAt={running[running.length - 1].startedAt} running />
-          ) : totalMs > 0 ? (
-            <ToolTiming durationMs={totalMs} />
-          ) : null}
-          {lineState === 'failed' && <FailedMark />}
-          <Caret open={open} className="self-center" />
-        </button>
-
-        <div className="zg-collapsible" data-open={open}>
-          <div className="zg-collapsible-inner">
-            <div className="pt-1 flex flex-col gap-0.5">
-              {tools.map((tool) => (
-                <Fragment key={tool.id}>
-                  <ToolRow tool={tool} mode={mode} showResult={showResult} showDiff={showDiff} />
-                  <NestedToolCalls tools={tool.children} mode={mode} showResult={showResult} showDiff={showDiff} />
-                </Fragment>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-);

package/src/chat/transcript/tool-details.tsx

@@ -1,77 +0,0 @@
-/**
- * A tool call's payload on its own, outside a `ToolRow` (a fold's step,
- * opened): the diff, the app's body for it (the `ToolBody` slot), the file
- * it read, or its input and output.
- */
-import type { CSSProperties } from 'react';
-
-import type { ToolRowModel } from '../headless/transcript';
-import { EditDiffBlock } from './EditDiffBlock';
-import { useTranscriptRenderers } from './renderers';
-import { ToolMedia, useToolMedia } from './tool-media';
-import { CODE_PANEL, LoadFullOutputButton, ReadFileBlock, ToolInput, useFullOutput } from './tool-parts';
-
-/** Props for {@link ToolDetails}. */
-export interface ToolDetailsProps {
-  /** The tool call whose payload to show. */
-  tool: ToolRowModel;
-  /** Extra classes on the root element (not passed to an app's `ToolBody`). */
-  className?: string;
-  /** Inline styles on the root element (not passed to an app's `ToolBody`). */
-  style?: CSSProperties;
-}
-
-/**
- * A tool call's payload: the command and its output, the diff, the file read, or input and output.
- *
- * @param props - Component props: the `tool` to show.
- */
-export function ToolDetails({ tool, className, style }: ToolDetailsProps) {
-  const { ToolBody, hasToolBody } = useTranscriptRenderers();
-  const { full, load, available, ready } = useFullOutput(tool);
-  const output = typeof full === 'string' ? full : tool.result;
-  const media = useToolMedia(tool, output);
-  const pre = `${CODE_PANEL} m-0 break-words max-h-80 overflow-auto`;
-  const loadButton = available && tool.resultClipped && typeof full !== 'string' && (
-    <LoadFullOutputButton loading={full === 'loading'} disabled={!ready} onClick={load} className="self-start" />
-  );
-
-  const root = ['flex flex-col gap-1.5', className].filter(Boolean).join(' ');
-
-  if (tool.edit) return <EditDiffBlock edit={tool.edit} className={className} style={style} />;
-  if (ToolBody && hasToolBody?.(tool)) return <ToolBody tool={tool} />;
-  // An image the call read, or a screenshot it took: the media itself, then any text around it.
-  if (media) {
-    return (
-      <div className={root} style={style}>
-        {tool.name !== 'read_file' && tool.rawInput && Object.keys(tool.rawInput).length > 0 && (
-          <ToolInput name={tool.name} input={tool.rawInput} />
-        )}
-        <ToolMedia media={media.media} url={media.url} name={readPath(tool)} />
-        {tool.name !== 'read_file' && media.rest !== '' && <pre className={pre}>{media.rest}</pre>}
-      </div>
-    );
-  }
-  if (tool.name === 'read_file' && output !== null) {
-    return (
-      <div className={root} style={style}>
-        {loadButton}
-        <ReadFileBlock tool={tool} output={output} />
-      </div>
-    );
-  }
-  return (
-    <div className={root} style={style}>
-      {/* Shell commands, Codemode scripts and JSON inputs, each highlighted (`ToolInput`). */}
-      {tool.rawInput && Object.keys(tool.rawInput).length > 0 && <ToolInput name={tool.name} input={tool.rawInput} />}
-      {loadButton}
-      {output !== null && output.trim() !== '' && <pre className={pre}>{output}</pre>}
-    </div>
-  );
-}
-
-/** The file a `read_file` call read: the name its images go by. */
-function readPath(tool: ToolRowModel): string | undefined {
-  const path = tool.rawInput?.path;
-  return typeof path === 'string' ? path.slice(path.lastIndexOf('/') + 1) : undefined;
-}