zidane-ui 9.0.4 → 9.1.3

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

@@ -1,489 +0,0 @@
-/**
- * One tool call as a transcript row: a header line (glyph, name, target,
- * edit counts, meta, timing) that opens onto the call's panels: its diff,
- * the app's body for it (the `ToolBody` slot), its input, its output. A
- * clipped output loads in full through `TranscriptActions.toolOutput`; a
- * session the call addresses is the `SessionTitle` slot.
- */
-import { Fragment, memo, useMemo, useState, type CSSProperties } from 'react';
-import type { ToolFormatLine } from 'zidane/chat';
-import { computeLineDiff } from 'zidane/chat/pure';
-
-import { useStaysMounted } from '../../motion/collapse';
-import type { ToolRowModel } from '../headless/transcript';
-import { useChatLabels } from '../useChatLabels';
-import { useModelName } from './actions';
-import { EditDiffBlock } from './EditDiffBlock';
-import { Caret, FailedMark, type LineState } from './frame';
-import { useTranscriptRenderers } from './renderers';
-import {
-  CODE_PANEL,
-  LoadFullOutputButton,
-  ReadFileBlock,
-  ToolGlyph,
-  ToolInput,
-  ToolTiming,
-  useFullOutput,
-} from './tool-parts';
-import { drawsImageGeneration, ImageGenerationBlock } from './ImageGenerationBlock';
-import { ToolMedia, useToolMedia } from './tool-media';
-
-/** Props for {@link ToolRow}. */
-export interface ToolRowProps {
-  /** The tool call to render. */
-  tool: ToolRowModel;
-  /** How the call is shown. `hidden` drops the row unless it has a diff, `formatted` shows a one-line target with an input panel, and `full` shows the raw input. */
-  mode: 'hidden' | 'formatted' | 'full';
-  /** Shows the call's output panel when the row is open. When false the user can still reveal it on demand. */
-  showResult: boolean;
-  /** Shows the edit diff for edit tools, even when `mode` is `hidden`. */
-  showDiff: boolean;
-  /**
-   * The call's state, for its line to show: a light sweep over the name while
-   * it runs, a red cross once it failed. `TranscriptRow` sets it when the
-   * transcript draws no row icons (the `showRowIcons` option), where the icon
-   * would have said it. Absent: the line shows neither.
-   */
-  lineState?: LineState;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Custom equality — the parent's `collapseEvents` rebuilds the `tool`
- * Row object on every render (closes over a fresh `formatted`
- * `formatToolCall` result). Default `React.memo` would reject the new
- * reference and re-render every tool row on every delta. Shallow-compare
- * the fields ToolRow actually reads: `name`, `displayName`, `result`,
- * `ok`, `edit`, `rawInput`, and the formatted summary's primitive bits.
- */
-function toolRowPropsEqual(prev: ToolRowProps, next: ToolRowProps): boolean {
-  if (
-    prev.mode !== next.mode ||
-    prev.showResult !== next.showResult ||
-    prev.showDiff !== next.showDiff ||
-    prev.lineState !== next.lineState ||
-    prev.className !== next.className ||
-    prev.style !== next.style
-  ) {
-    return false;
-  }
-
-  const a = prev.tool;
-  const b = next.tool;
-
-  return (
-    a.name === b.name &&
-    a.displayName === b.displayName &&
-    a.result === b.result &&
-    a.ok === b.ok &&
-    a.edit === b.edit &&
-    a.rawInput === b.rawInput &&
-    a.resultClipped === b.resultClipped &&
-    a.callId === b.callId &&
-    a.startedAt === b.startedAt &&
-    a.durationMs === b.durationMs &&
-    a.waitingFor === b.waitingFor &&
-    a.resuming === b.resuming &&
-    a.approval === b.approval &&
-    formattedEqual(a.formatted, b.formatted)
-  );
-}
-
-function formattedEqual(a: ToolFormatLine | null, b: ToolFormatLine | null): boolean {
-  if (a === b) {
-    return true;
-  }
-
-  if (!a || !b) {
-    return false;
-  }
-
-  if (a.target !== b.target || a.detail !== b.detail || a.sessionId !== b.sessionId) {
-    return false;
-  }
-
-  const ma = a.meta;
-  const mb = b.meta;
-
-  if (ma === mb) {
-    return true;
-  }
-
-  if (!ma || !mb || ma.length !== mb.length) {
-    return false;
-  }
-
-  for (let i = 0; i < ma.length; i++) {
-    if (ma[i] !== mb[i]) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-/** Props for {@link ModelVerdict}. */
-export interface ModelVerdictProps {
-  /** The call's approval record: the choice, the deciding model and its confidence (`p`). */
-  approval: NonNullable<ToolRowModel['approval']>;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The decision model's verdict on the call. A denial reads "auto-denied"
- * with the model and its confidence as chips; an approval is only a sparkle
- * (most calls of a model-approved session are), its verdict in the tooltip.
- *
- * @param props - Component props.
- */
-export function ModelVerdict({ approval, className, style }: ModelVerdictProps) {
-  const labels = useChatLabels();
-  const modelName = useModelName();
-  const approved = approval.choice === 'approve';
-  const model = modelName(approval.model);
-  const confidence = approval.p !== undefined ? `${Math.round(approval.p * 100)}%` : null;
-  const title = labels.modelVerdictTitle(approved, model, confidence);
-  if (approved) {
-    return (
-      <span
-        data-testid="tool-model-verdict"
-        role="img"
-        aria-label={title}
-        title={title}
-        className={['i-ph-sparkle zg-meta shrink-0 self-center', className].filter(Boolean).join(' ')}
-        style={style}
-      />
-    );
-  }
-  return (
-    <span
-      data-testid="tool-model-verdict"
-      title={title}
-      className={['zg-meta shrink-0 inline-flex items-center gap-1', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      <span aria-hidden className="i-ph-prohibit text-zg-danger" />
-      {labels.autoDenied}
-      {model && <span className="zg-meta-chip">{model}</span>}
-      {confidence && <span className="zg-meta-chip">{confidence}</span>}
-    </span>
-  );
-}
-
-/** Renders a tool call as a collapsible row: glyph, name and target, timing, and, when opened, its input, output, diff, or media. */
-export const ToolRow = memo(({ tool, mode, showResult, showDiff, lineState, className, style }: ToolRowProps) => {
-  const labels = useChatLabels();
-  const { SessionTitle, ToolBody, hasToolBody } = useTranscriptRenderers();
-  const [open, setOpen] = useState(false);
-  /** Output revealed on demand while the "Tool outputs" setting is off. */
-  const [revealOutput, setRevealOutput] = useState(false);
-
-  /* Lazy full-output fetch for clipped results (`useFullOutput`). */
-  const { full: fullResult, load: loadFullResult, available: canLoadFull, ready: fullReady } = useFullOutput(tool);
-  /*
-   * A closed row renders only its header: its panels (the output text, the
-   * pretty-printed input, a highlighted file, the diff) mount on open and
-   * stay through the collapse. Otherwise every settled tool call in a long
-   * transcript would carry all of that, invisible, in the DOM.
-   */
-  const bodyMounted = useStaysMounted(open);
-  // Images, video and audio in the result, served by the app (`toolMediaUrl`).
-  const media = useToolMedia(tool, typeof fullResult === 'string' ? fullResult : tool.result);
-
-  /*
-   * When the user picked "hidden" tool display AND there's no edit-diff to show
-   * for this tool, we suppress the row entirely. Errors still surface — they
-   * arrived as `kind: 'error'` rows, not tool-rows.
-   */
-  const hasDiff = showDiff && tool.edit;
-
-  /*
-   * +N / −N counts surfaced inline on the header row for
-   * edit / multi_edit / write_file. Kept lazy (only when we have an edit
-   * payload) so the typical read/grep/shell row pays nothing.
-   */
-  const editCounts = useMemo(() => {
-    if (!tool.edit) {
-      return null;
-    }
-
-    let added = 0;
-    let removed = 0;
-
-    for (const h of tool.edit.hunks) {
-      const lines = computeLineDiff(h.oldString, h.newString);
-
-      for (const d of lines) {
-        if (d.op === 'add') {
-          added++;
-        } else if (d.op === 'remove') {
-          removed++;
-        }
-      }
-    }
-
-    return { added, removed };
-  }, [tool.edit]);
-
-  if (mode === 'hidden' && !hasDiff) {
-    return null;
-  }
-
-  /*
-   * Expandable whenever there is SOMETHING behind the header: the call's
-   * input (always, unless the header already prints the raw JSON in `full`
-   * mode), its output (when tool outputs are on), or a diff. The input does
-   * not depend on the "Tool outputs" toggle: an `Ask user` row with
-   * the toggle off still opens onto its questions and answers.
-   */
-  const hasInput = tool.rawInput !== undefined && Object.keys(tool.rawInput).length > 0;
-  // A call the app draws itself (the `ToolBody` slot: a plan, a question form,
-  // a todo list) renders that way instead of as input / output JSON.
-  const interaction = mode === 'formatted' && ToolBody !== undefined && hasToolBody?.(tool) === true;
-  const showInputPanel = mode === 'formatted' && hasInput && !interaction;
-  /*
-   * "Tool outputs" OFF hides result plumbing by default, it does not make
-   * it unreachable: the output stays one click away behind a "Show output"
-   * link inside the expanded row (`revealOutput`). ON shows it with the
-   * input as soon as the row opens.
-   */
-  const hasOutput = tool.result !== null && !interaction;
-  const showOutputPanel = hasOutput && (showResult || revealOutput);
-  const hasExpandable = interaction || showInputPanel || hasOutput || (mode === 'full' && tool.rawInput) || hasDiff;
-  // A spawn waiting for a slot says so itself (its "waiting" chip): it is not running yet.
-  const sweep = lineState === 'running' && !tool.waitingFor;
-
-  return (
-    <div className={['text-xs', className].filter(Boolean).join(' ')} style={style}>
-      {/* Tool header — formatted summary, hidden, or full JSON */}
-      {mode !== 'hidden' && (
-        <button
-          type="button"
-          onClick={() => setOpen((current) => !current)}
-          aria-expanded={open}
-          className="zg-press-subtle flex flex-col items-stretch w-full zg-disclosure !text-[var(--zg-text)] text-left py-0.5"
-        >
-          <span className="flex items-baseline gap-2 min-w-0">
-            <ToolGlyph name={tool.name} />
-            <span className={`font-medium shrink-0${sweep ? ' zg-shimmer' : ''}`}>{tool.displayName}</span>
-            {/* Width truncation is CSS's job: no fixed max-w — the target uses
-              whatever room the row has (a 420px cap ellipsized spawn tasks
-              at ~60 chars with half the row empty). min-w-0 lets it shrink
-              FIRST; the meta/count siblings are shrink-0. */}
-            {mode === 'formatted' && tool.formatted?.target && (
-              // A session title is prose, not a path/command: same face as the
-              // session-event card's title (proportional, medium, accent) so
-              // the two rows name the session identically.
-              <span
-                className={`min-w-0 truncate ${
-                  tool.formatted.sessionId
-                    ? 'font-medium text-[var(--zg-accent)]'
-                    : 'font-mono text-[var(--zg-accent-hover)]'
-                }`}
-              >
-                {tool.formatted.sessionId ? (
-                  <SessionTitle id={tool.formatted.sessionId} fallback={tool.formatted.target} />
-                ) : (
-                  tool.formatted.target
-                )}
-              </span>
-            )}
-            {editCounts && (editCounts.added > 0 || editCounts.removed > 0) && (
-              <span className="zg-meta inline-flex items-baseline gap-1.5 shrink-0">
-                <span className="text-zg-success">+{editCounts.added}</span>
-                <span className="text-zg-danger">−{editCounts.removed}</span>
-              </span>
-            )}
-            {mode === 'formatted' && tool.formatted?.meta && tool.formatted.meta.length > 0 && (
-              <span className="zg-meta shrink-0 self-center inline-flex items-center gap-1">
-                {tool.formatted.meta.map((value, i) => (
-                  <span key={i} className="zg-meta-chip">
-                    {value}
-                  </span>
-                ))}
-              </span>
-            )}
-            {mode === 'full' && tool.rawInput && (
-              <span className="font-mono text-[var(--zg-text-muted)] min-w-0 truncate">
-                {JSON.stringify(tool.rawInput)}
-              </span>
-            )}
-            {tool.approval && <ModelVerdict approval={tool.approval} />}
-            {tool.waitingFor ? (
-              <span
-                data-testid="tool-waiting"
-                title={labels.waitingForSlot(tool.waitingFor.max)}
-                className="zg-meta shrink-0 inline-flex items-baseline gap-1"
-              >
-                <span aria-hidden className="i-ph-pause-fill text-zg-badge self-center" />
-                {labels.stepWaiting}
-              </span>
-            ) : tool.ok === null && tool.startedAt !== undefined ? (
-              <>
-                {tool.resuming && (
-                  <span data-testid="tool-resuming" className="zg-meta shrink-0">
-                    {labels.stepResuming}
-                  </span>
-                )}
-                <ToolTiming startedAt={tool.startedAt} running />
-              </>
-            ) : tool.durationMs !== undefined ? (
-              <ToolTiming durationMs={tool.durationMs} />
-            ) : null}
-            {lineState === 'failed' && <FailedMark />}
-            {hasExpandable ? <Caret open={open} className="self-center" /> : null}
-          </span>
-          {/* Second line: the payload behind the action (a prompt sent to
-              another session), dimmed and clamped — prompts run long. */}
-          {mode === 'formatted' && tool.formatted?.detail && (
-            <span className="zg-line-clamp-2 mt-0.5 text-[var(--zg-text-muted)]">{tool.formatted.detail}</span>
-          )}
-        </button>
-      )}
-
-      {/* Generated images: always shown, the loader while the call runs. */}
-      {mode !== 'hidden' && drawsImageGeneration(tool) && <ImageGenerationBlock tool={tool} />}
-
-      {/* Edit diff — collapsed by default; expands with the row's chevron. */}
-      {hasDiff && tool.edit && (
-        <div className="zg-collapsible" data-open={open}>
-          <div className="zg-collapsible-inner">{bodyMounted && <EditDiffBlock edit={tool.edit} />}</div>
-        </div>
-      )}
-
-      {/*
-       * The panels below the header (an app-drawn body, input, output, raw
-       * input) each sit in their own `.zg-collapsible` and span the content
-       * column at its natural width: they start on the header label's left
-       * edge (the header button's `.zg-disclosure` bleed is only its hover
-       * pill), with no negative margin of their own.
-       */}
-      {interaction && ToolBody && (
-        <div className="zg-collapsible" data-open={open}>
-          <div className="zg-collapsible-inner">
-            <div className="pt-2 pb-1">{bodyMounted && <ToolBody tool={tool} />}</div>
-          </div>
-        </div>
-      )}
-
-      {/* Input first, output second — the order the call happened in. Each
-          gets a caption only when both are present, so a lone output panel
-          looks exactly as before. */}
-      {showInputPanel && (
-        <div className="zg-collapsible" data-open={open}>
-          <div className="zg-collapsible-inner">
-            {bodyMounted && (
-              <>
-                {showOutputPanel && <PanelCaption>{labels.inputCaption}</PanelCaption>}
-                <ToolInput name={tool.name} input={tool.rawInput!} />
-              </>
-            )}
-          </div>
-        </div>
-      )}
-      {hasOutput && !showOutputPanel && (
-        <div className="zg-collapsible" data-open={open}>
-          <div className="zg-collapsible-inner">
-            <button
-              type="button"
-              onClick={() => setRevealOutput(true)}
-              className="zg-press-subtle mt-1.5 text-zg-meta text-[var(--zg-accent)] bg-transparent border-0 cursor-pointer px-0"
-            >
-              {labels.showOutput}
-            </button>
-          </div>
-        </div>
-      )}
-      {showOutputPanel && (
-        <div className="zg-collapsible" data-open={open}>
-          <div className="zg-collapsible-inner">
-            {bodyMounted && showInputPanel && <PanelCaption>{labels.outputCaption}</PanelCaption>}
-            {bodyMounted && canLoadFull && tool.resultClipped && typeof fullResult !== 'string' && (
-              <LoadFullOutputButton
-                loading={fullResult === 'loading'}
-                disabled={!fullReady}
-                onClick={loadFullResult}
-                className="mt-1.5"
-              />
-            )}
-            {!bodyMounted ? null : media ? (
-              // An image the call read, or a screenshot it took: the media itself, then any text around it.
-              <div className="mt-1.5 flex flex-col gap-1.5">
-                {/* A generate_image row already shows its images above; a failed one draws none there. */}
-                {(!drawsImageGeneration(tool) || tool.ok === false) && (
-                  <ToolMedia media={media.media} url={media.url} />
-                )}
-                {tool.name !== 'read_file' && media.rest !== '' && <pre className={CODE_PANEL}>{media.rest}</pre>}
-              </div>
-            ) : tool.name === 'read_file' ? (
-              /*
-               * Render `read_file` results as a syntax-highlighted code
-               * block — the `CodeBlock` slot the assistant's fenced
-               * markdown uses. Language is inferred from the file
-               * extension; unknown extensions fall through to plaintext.
-               */
-              <ReadFileBlock tool={tool} output={typeof fullResult === 'string' ? fullResult : (tool.result ?? '')} />
-            ) : (
-              <pre className={`${CODE_PANEL} mt-1.5`}>{typeof fullResult === 'string' ? fullResult : tool.result}</pre>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Full raw input — same outer rectangle as the result body / header collapsible. */}
-      {mode === 'full' && tool.rawInput && (
-        <div className="zg-collapsible" data-open={open}>
-          <div className="zg-collapsible-inner">
-            {bodyMounted && <ToolInput name={tool.name} input={tool.rawInput} />}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}, toolRowPropsEqual);
-
-/** Tiny caption above an expanded tool panel when input and output are both shown. */
-function PanelCaption({ children }: { children: React.ReactNode }) {
-  return <div className="zg-section-label mt-2">{children}</div>;
-}
-
-/** Props for {@link NestedToolCalls}: the display props every nested `ToolRow` gets, plus the child calls. */
-export interface NestedToolCallsProps extends Omit<ToolRowProps, 'tool' | 'className' | 'style'> {
-  /** The child calls, drawn recursively; empty or absent renders nothing. */
-  tools: ToolRowModel['children'];
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The calls a tool made (a codemode script's `tools.*`, its row's
- * `children`), one step in under its row, open or not: they are the call's
- * children, not its body. Each one is a regular `ToolRow` with its own state.
- *
- * @param props - The child calls, plus the display props every nested `ToolRow` gets.
- */
-export function NestedToolCalls({ tools, className, style, ...display }: NestedToolCallsProps) {
-  if (!tools || tools.length === 0) return null;
-  return (
-    <div
-      className={['pl-4 pt-0.5 flex flex-col gap-0.5', className].filter(Boolean).join(' ')}
-      style={style}
-      data-testid="nested-tool-calls"
-    >
-      {tools.map((tool) => (
-        <Fragment key={tool.id}>
-          <ToolRow tool={tool} {...display} />
-          <NestedToolCalls tools={tool.children} {...display} />
-        </Fragment>
-      ))}
-    </div>
-  );
-}

package/src/chat/transcript/turn-commands.ts

@@ -1,101 +0,0 @@
-/**
- * The turn commands the turn menu and select-turn share, so a copy, a rewind
- * or an edit behaves the same from both: over the session host's stored turns
- * (`SessionHost.turns`), the clipboard and the composer bus.
- */
-import { useMemo } from 'react';
-import { turnAsText } from 'zidane/chat/pure';
-
-import { useSessionHost } from '../../session/SessionProvider';
-import type { SessionTurns } from '../../session/headless/host';
-import { hasComposerFor, pushComposerDraft } from '../composer/composer-bus';
-import { wireAttachmentsToChat } from '../headless/composer/draft-sync';
-import type { ChatEvent } from '../headless/host';
-import { TURN_LABELS } from '../headless/turn-labels';
-import { promptDraftOf } from '../headless/turn-prompt';
-
-/** What {@link createTurnCommands} returns. */
-export interface TurnCommands {
-  /** The turn's text as the transcript copies it, `fallback` when it cannot be loaded. */
-  turnText(sessionId: string, turnId: string, fallback?: string): Promise<string>;
-  /** Copies the turn. `false` when there was nothing to copy or the write failed. */
-  copyTurn(sessionId: string, turnId: string, fallback?: string): Promise<boolean>;
-  /** Keeps the history up to and including the turn. Absent: the host cannot rewind. */
-  rewindToTurn?(sessionId: string, turnId: string): Promise<void>;
-  /**
-   * Cuts the history just before the prompt and puts its text and attachments back in the session's
-   * composer. Rejects, keeping the history, when that composer is not open. Absent: the host cannot rewind.
-   */
-  editPrompt?(sessionId: string, turnId: string, events: readonly ChatEvent[], fallbackText?: string): Promise<void>;
-}
-
-/** Options of {@link createTurnCommands}. */
-export interface TurnCommandsOptions {
-  /** Writes the clipboard. Default: `navigator.clipboard.writeText`. */
-  writeText?(text: string): Promise<void>;
-  /** The edit's refusal when the composer is gone. */
-  labels?: Pick<typeof TURN_LABELS, 'turnMenuEditNeedsComposer'>;
-}
-
-/**
- * Creates the turn commands over a session host's stored turns.
- *
- * @param turns - The stored turns.
- * @param options - The clipboard and the refusal wording.
- */
-export function createTurnCommands(turns: SessionTurns, options: TurnCommandsOptions = {}): TurnCommands {
-  const writeText = options.writeText ?? ((text: string) => navigator.clipboard.writeText(text));
-  const labels = options.labels ?? TURN_LABELS;
-  const turnText = async (sessionId: string, turnId: string, fallback = '') => {
-    try {
-      const turn = await turns.get(sessionId, turnId);
-      return turn ? turnAsText(turn) : fallback;
-    } catch {
-      return fallback;
-    }
-  };
-  const rewind = turns.rewind?.bind(turns);
-  return {
-    turnText,
-    async copyTurn(sessionId, turnId, fallback = '') {
-      const text = await turnText(sessionId, turnId, fallback);
-      if (!text) return false;
-      try {
-        await writeText(text);
-        return true;
-      } catch {
-        return false;
-      }
-    },
-    ...(rewind
-      ? {
-          rewindToTurn: (sessionId: string, turnId: string) => rewind(sessionId, turnId, { inclusive: true }),
-          async editPrompt(sessionId: string, turnId: string, events: readonly ChatEvent[], fallbackText = '') {
-            const draft = promptDraftOf(events, turnId, fallbackText);
-            // Staged as data URLs first: a PDF's `zg-media:` address is served from the turn the cut removes.
-            const staged = await wireAttachmentsToChat(draft.attachments);
-            // The composer went away while staging: cutting now would lose the prompt.
-            if (!hasComposerFor(sessionId)) throw new Error(labels.turnMenuEditNeedsComposer);
-            await rewind(sessionId, turnId, { inclusive: false });
-            pushComposerDraft({ scopeKey: sessionId, text: draft.text, attachments: staged });
-          },
-        }
-      : {}),
-  };
-}
-
-/**
- * The turn commands over the session host's turns (stable while they are); `null` when the host has none.
- *
- * @param options - The clipboard and the refusal wording.
- */
-export function useTurnCommands(options?: TurnCommandsOptions): TurnCommands | null {
-  const turns = useSessionHost().turns;
-  const writeText = options?.writeText;
-  const labels = options?.labels;
-  return useMemo(
-    () =>
-      turns ? createTurnCommands(turns, { ...(writeText ? { writeText } : {}), ...(labels ? { labels } : {}) }) : null,
-    [turns, writeText, labels],
-  );
-}