zidane-ui 9.0.4 → 9.1.3

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

@@ -1,132 +0,0 @@
-/**
- * A tool result's images, video and audio, inline. The transcript carries
- * each media block as a text stand-in (`[image: image/png, 742500 b64
- * bytes]`, `toolResultToText`); with an app that serves the bytes
- * (`TranscriptActions.toolMediaUrl`) the stand-ins become the media itself.
- *
- * Nothing loads until a result is opened (its panel mounts then), images
- * decode off the main thread, and a video or audio fetches only its first
- * frame and length until played. An item that fails to load reads as its
- * stand-in again, never a broken-image glyph.
- */
-import { useMemo, useState, type CSSProperties } from 'react';
-
-import { type LightboxItem, useLightbox } from '../../components/Lightbox';
-import type { ToolRowModel } from '../headless/transcript';
-import { parseToolMedia, type ToolMediaItem } from '../headless/transcript/tool-media';
-import { useChatLabels } from '../useChatLabels';
-import { useTranscriptActions } from './actions';
-
-export { parseToolMedia, type ToolMediaItem } from '../headless/transcript/tool-media';
-
-/**
- * The media a result shows inline, with the text left around it; `null` when it shows none.
- *
- * @param tool - The tool row; its `callId` addresses the media.
- * @param output - The tool result's text, or `null` before it has one.
- */
-export function useToolMedia(
-  tool: Pick<ToolRowModel, 'callId'>,
-  output: string | null,
-): { media: ToolMediaItem[]; rest: string; url: (index: number) => string } | null {
-  const { toolMediaUrl } = useTranscriptActions();
-  const callId = tool.callId;
-  return useMemo(() => {
-    if (!toolMediaUrl || !callId || !output || !output.includes('[')) return null;
-    const parsed = parseToolMedia(output);
-    return parsed.media.length > 0 ? { ...parsed, url: (index: number) => toolMediaUrl(callId, index) } : null;
-  }, [toolMediaUrl, callId, output]);
-}
-
-/** Props for {@link ToolMedia}. */
-export interface ToolMediaProps {
-  /** The media items the tool result carries, in order. */
-  media: readonly ToolMediaItem[];
-  /** Returns the address of the item at an index. */
-  url: (index: number) => string;
-  /** What the images are of (the file read), for their names in the lightbox. */
-  name?: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a tool result's media inline: images as thumbnails that open the lightbox, video and audio with native controls. An item that fails to load shows its stand-in text.
- *
- * @param props - Component props: the `media` items, `url` to address each by index, and an optional `name`.
- */
-export function ToolMedia({ media, url, name, className, style }: ToolMediaProps) {
-  const labels = useChatLabels();
-  const lightbox = useLightbox();
-  const [failed, setFailed] = useState<ReadonlySet<number>>(() => new Set());
-  const fail = (index: number) => setFailed((prev) => new Set(prev).add(index));
-  const images = media.filter((m) => m.kind === 'image' && !failed.has(m.index));
-  const gallery: LightboxItem[] = images.map((m) => ({
-    key: String(m.index),
-    name: name ?? m.mediaType,
-    src: url(m.index),
-  }));
-
-  return (
-    <div
-      className={['flex flex-col gap-1.5', className].filter(Boolean).join(' ')}
-      style={style}
-      data-testid="tool-media"
-    >
-      {media.map((m) => {
-        if (failed.has(m.index)) {
-          return (
-            <span key={m.index} className="zg-meta">
-              {m.marker}
-            </span>
-          );
-        }
-        if (m.kind === 'image') {
-          const position = images.indexOf(m);
-          return (
-            <button
-              key={m.index}
-              type="button"
-              aria-label={labels.viewAttachment(name ?? m.mediaType)}
-              onClick={(event) => lightbox.open(gallery, position, event.currentTarget)}
-              className="zg-press-subtle self-start max-w-full p-0 border-0 bg-transparent cursor-zoom-in rounded-zg-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--zg-ring)]"
-            >
-              <img
-                src={url(m.index)}
-                alt=""
-                loading="lazy"
-                decoding="async"
-                onError={() => fail(m.index)}
-                className="block max-w-full max-h-80 w-auto h-auto object-contain rounded-zg-md bg-[var(--zg-tray)] shadow-[inset_0_0_0_1px_var(--zg-hairline)]"
-              />
-            </button>
-          );
-        }
-        return m.kind === 'video' ? (
-          // eslint-disable-next-line jsx-a11y/media-has-caption -- tool output carries no caption source to point a track at
-          <video
-            key={m.index}
-            src={url(m.index)}
-            controls
-            preload="metadata"
-            onError={() => fail(m.index)}
-            className="block self-start max-w-full max-h-80 rounded-zg-md bg-[var(--zg-tray)]"
-          />
-        ) : (
-          // eslint-disable-next-line jsx-a11y/media-has-caption -- tool output carries no caption source to point a track at
-          <audio
-            key={m.index}
-            src={url(m.index)}
-            controls
-            preload="metadata"
-            onError={() => fail(m.index)}
-            className="block self-start max-w-full"
-          />
-        );
-      })}
-      {lightbox.element}
-    </div>
-  );
-}

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

@@ -1,358 +0,0 @@
-/**
- * The pieces every tool row shares: the code panel's classes, a call's
- * highlighted input (through the `CodeBlock` slot), the read-file helpers,
- * the per-tool glyph, the live timing cell and the on-demand fetch of a
- * clipped output (`TranscriptActions.toolOutput`).
- */
-import { useEffect, useState, type CSSProperties } from 'react';
-import { formatRunDuration, toolInputCode } from 'zidane/chat/pure';
-
-import type { ToolRowModel } from '../headless/transcript';
-import { useChatLabels } from '../useChatLabels';
-import { useTranscriptActions } from './actions';
-import { useTranscriptRenderers } from './renderers';
-
-/** Tool input / output panels: set into the row on the code tone (quiet text, the code panel's inset edge). */
-export const CODE_PANEL = 'zg-code-panel px-3 py-2 text-xs !text-[var(--zg-text-muted)] whitespace-pre-wrap font-mono';
-
-/** Props for {@link ToolInput}. */
-export interface ToolInputProps {
-  /** The tool's name. Some tools (Codemode) show their script instead of JSON. */
-  name: string;
-  /** The tool call's raw input, shown as JSON when no script is extracted. */
-  input: Record<string, unknown>;
-}
-
-/**
- * A tool call's input panel, syntax-highlighted: the code it runs
- * (Codemode's script, via `toolInputCode`), or else its JSON input.
- *
- * @param props - Panel props: the tool `name` and its `input`.
- */
-export function ToolInput({ name, input }: ToolInputProps) {
-  const { CodeBlock } = useTranscriptRenderers();
-  const script = toolInputCode(name, input);
-  if (script) return <CodeBlock code={script.code} language={script.language} />;
-  return <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />;
-}
-
-/** Props for {@link ReadFileBlock}. */
-export interface ReadFileBlockProps {
-  /** The `read_file` call. Its `path` input picks the language. */
-  tool: ToolRowModel;
-  /** The call's result text, with line numbers. They are stripped before display. */
-  output: string;
-}
-
-/**
- * The highlighted file a `read_file` call returned, its language from the path it read.
- *
- * @param props - Block props: the `tool` and its `output`.
- */
-export function ReadFileBlock({ tool, output }: ReadFileBlockProps) {
-  const { CodeBlock } = useTranscriptRenderers();
-  return (
-    <CodeBlock
-      code={stripReadFileLineNumbers(output)}
-      language={langFromPath(stringInputField(tool.rawInput, 'path'))}
-    />
-  );
-}
-
-/**
- * Map a file path to a Shiki language id: a small extension table, keyed
- * off the path alone (`read_file`'s input is just a path).
- */
-function langFromPath(path: string | undefined): string {
-  if (!path) {
-    return 'plaintext';
-  }
-
-  const lower = path.toLowerCase();
-  const slash = lower.lastIndexOf('/');
-  const name = slash >= 0 ? lower.slice(slash + 1) : lower;
-
-  if (name === 'dockerfile') {
-    return 'docker';
-  }
-
-  const dot = name.lastIndexOf('.');
-
-  if (dot < 0) {
-    return 'plaintext';
-  }
-
-  const ext = name.slice(dot + 1);
-
-  const byExt: Record<string, string> = {
-    ts: 'ts',
-    tsx: 'tsx',
-    js: 'js',
-    jsx: 'jsx',
-    mjs: 'js',
-    cjs: 'js',
-    json: 'json',
-    jsonc: 'jsonc',
-    md: 'md',
-    markdown: 'md',
-    yaml: 'yaml',
-    yml: 'yaml',
-    toml: 'toml',
-    xml: 'xml',
-    html: 'html',
-    htm: 'html',
-    css: 'css',
-    scss: 'scss',
-    sass: 'sass',
-    less: 'less',
-    py: 'python',
-    rb: 'ruby',
-    go: 'go',
-    rs: 'rust',
-    java: 'java',
-    c: 'c',
-    h: 'c',
-    cc: 'cpp',
-    cpp: 'cpp',
-    hpp: 'cpp',
-    cs: 'csharp',
-    swift: 'swift',
-    kt: 'kotlin',
-    kts: 'kotlin',
-    sh: 'bash',
-    bash: 'bash',
-    zsh: 'bash',
-    sql: 'sql',
-    vue: 'vue',
-    svelte: 'svelte',
-    ini: 'ini',
-    cfg: 'ini',
-    conf: 'ini',
-    env: 'bash',
-  };
-
-  return byExt[ext] ?? 'plaintext';
-}
-
-/**
- * `read_file` results are prefixed with a `<line>\t<text>` gutter (the
- * canonical zidane format). Strip it so the syntax highlighter sees real
- * source text — leaving the gutter in confuses every grammar and
- * produces uniformly-uncolored output.
- */
-function stripReadFileLineNumbers(s: string): string {
-  return s
-    .split('\n')
-    .map((line) => {
-      const tab = line.indexOf('\t');
-
-      if (tab < 0) {
-        return line;
-      }
-
-      const head = line.slice(0, tab);
-
-      // Only strip when the prefix is purely digits — otherwise it's
-      // genuine content that happens to contain a tab.
-      return /^\d+$/.test(head) ? line.slice(tab + 1) : line;
-    })
-    .join('\n');
-}
-
-function stringInputField(input: Record<string, unknown> | undefined, key: string): string | undefined {
-  if (!input) {
-    return undefined;
-  }
-
-  const v = input[key];
-  return typeof v === 'string' ? v : undefined;
-}
-
-/**
- * The whole text of a clipped tool result, fetched on demand through
- * `TranscriptActions.toolOutput`. `full`: `null` = not fetched, a string =
- * the full text (replaces the clipped preview), `'loading'` while the
- * roundtrip runs. `available` is false when the app cannot fetch outputs:
- * the row then offers no button.
- *
- * @param tool - The clipped tool row. Its `callId` is passed to `TranscriptActions.toolOutput`.
- */
-export function useFullOutput(tool: ToolRowModel) {
-  const { sessionId, toolOutput } = useTranscriptActions();
-  const [full, setFull] = useState<string | 'loading' | null>(null);
-  const ready = Boolean(sessionId && tool.callId);
-  const load = () => {
-    if (!toolOutput || !ready || full !== null) return;
-    setFull('loading');
-    toolOutput(tool.callId!, tool.turnId)
-      .then((text) => setFull(text ?? tool.result ?? ''))
-      .catch(() => setFull(null));
-  };
-  return { full, load, available: toolOutput !== undefined, ready };
-}
-
-/** Props for {@link LoadFullOutputButton}. */
-export interface LoadFullOutputButtonProps {
-  /** The full output is being fetched. Disables the button and changes its label. */
-  loading: boolean;
-  /** Disables the button, for example when the call has no id to fetch by. */
-  disabled: boolean;
-  /** Called when the user asks for the full output. */
-  onClick: () => void;
-  /** Extra class names for the button. */
-  className: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * "Load full output" under a clipped result.
- *
- * @param props - Button props: `loading`, `disabled`, `onClick`, and `className`.
- */
-export function LoadFullOutputButton({ loading, disabled, onClick, className, style }: LoadFullOutputButtonProps) {
-  const labels = useChatLabels();
-  return (
-    <button
-      type="button"
-      disabled={loading || disabled}
-      onClick={onClick}
-      className={`zg-press-subtle ${className} text-zg-meta text-[var(--zg-accent)] bg-transparent border-0 cursor-pointer px-0 disabled:opacity-zg-disabled`}
-      style={style}
-    >
-      {loading ? labels.loadingFullOutput : labels.loadFullOutput}
-    </button>
-  );
-}
-
-/** Props for {@link ToolTiming}. */
-export interface ToolTimingProps {
-  /** Epoch milliseconds the call started. While `running`, the elapsed time counts up from it. */
-  startedAt?: number;
-  /** Final duration in milliseconds. Shown once the call is no longer `running`. */
-  durationMs?: number;
-  /**
-   * The call is still running. Shows live elapsed time instead of the final duration.
-   * @default false
-   */
-  running?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Live elapsed while the call runs, the final duration once it lands, both
- * from the host's timing (the row's `startedAt` / `durationMs`). Same data
- * the TUI shows for running work; muted mono so it reads as a receipt cell.
- * No spinner: the ticking number is the progress cue, and the tool glyph
- * already anchors the row's left edge.
- *
- * @param props - Timing props: `startedAt`, `durationMs`, and `running`.
- */
-export function ToolTiming({ startedAt, durationMs, running = false, className, style }: ToolTimingProps) {
-  const elapsed = useElapsedMs(running ? startedAt : undefined);
-  const ms = running ? elapsed : durationMs;
-  if (ms === undefined) {
-    return null;
-  }
-  // On the line's baseline, not centered as a box: the 11px `.zg-meta` digits then
-  // span the label's x-height, so they read centered on the line (a centered box rides high).
-  return (
-    <span className={['zg-meta shrink-0', className].filter(Boolean).join(' ')} style={style}>
-      {formatToolMs(ms)}
-    </span>
-  );
-}
-
-/** Ticks 4×/s while `startedAt` is set; frozen (0) otherwise. */
-function useElapsedMs(startedAt: number | undefined): number {
-  const [now, setNow] = useState(() => Date.now());
-  useEffect(() => {
-    if (startedAt === undefined) {
-      return undefined;
-    }
-    setNow(Date.now());
-    const timer = setInterval(() => setNow(Date.now()), 250);
-    return () => clearInterval(timer);
-  }, [startedAt]);
-  return startedAt === undefined ? 0 : Math.max(0, now - startedAt);
-}
-
-function formatToolMs(ms: number): string {
-  if (ms < 1000) {
-    return `${Math.round(ms)}ms`;
-  }
-  if (ms < 60_000) {
-    return `${(ms / 1000).toFixed(ms < 10_000 ? 1 : 0)}s`;
-  }
-  return formatRunDuration(ms);
-}
-
-/**
- * Per-tool glyph on the row's left edge, so a run of tool calls scans by
- * shape (read / edit / shell / search / spawn…) before the label is read.
- * Keyed by the WIRE name, not the display name: `displayNameFor` folds
- * several tools into one label (`edit` and `multi_edit` are both "Edit").
- * MCP tools share one puzzle-piece glyph — the server is already in their label.
- */
-const TOOL_GLYPH: Readonly<Record<string, string>> = {
-  read_file: 'i-ph-file-text',
-  list_files: 'i-ph-folder',
-  glob: 'i-ph-file-magnifying-glass',
-  grep: 'i-ph-magnifying-glass',
-  shell: 'i-ph-terminal-window',
-  shell_kill: 'i-ph-stop-circle',
-  wait_task: 'i-ph-clock',
-  edit: 'i-ph-note-pencil',
-  multi_edit: 'i-ph-note-pencil',
-  write_file: 'i-ph-file-plus',
-  fetch_url: 'i-ph-globe',
-  web_search: 'i-ph-magnifying-glass',
-  generate_image: 'i-ph-image',
-  spawn: 'i-ph-robot',
-  tool_search: 'i-ph-wrench',
-  skills_use: 'i-ph-graduation-cap',
-  skills_read: 'i-ph-book-open',
-  skills_run_script: 'i-ph-play-fill',
-  todowrite: 'i-ph-clipboard-text',
-  todoread: 'i-ph-clipboard-text',
-  ask_user: 'i-ph-question',
-  present_plan: 'i-ph-map-trifold',
-  record_artifact: 'i-ph-cube',
-  read_chat_turns: 'i-ph-chats',
-  sessions: 'i-ph-stack',
-};
-
-function toolGlyphFor(name: string): string {
-  return TOOL_GLYPH[name] ?? (name.startsWith('mcp_') ? 'i-ph-puzzle-piece' : 'i-ph-wrench');
-}
-
-/** Props for {@link ToolGlyph}. */
-export interface ToolGlyphProps {
-  /** The tool's name. */
-  name: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the icon for a tool: a glyph by tool name, a puzzle piece for MCP tools, and a wrench otherwise.
- *
- * @param props - Glyph props: the tool `name`.
- */
-export function ToolGlyph({ name, className, style }: ToolGlyphProps) {
-  return (
-    <span
-      aria-hidden
-      className={[`${toolGlyphFor(name)} text-zg-meta shrink-0 self-center text-[var(--zg-text-muted)]`, className]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-      data-tool={name}
-    />
-  );
-}