zidane-ui 9.1.1 → 9.1.3

package/src/chat/transcript/fold.tsx

@@ -1,522 +0,0 @@
-/**
- * Compact density's exchange fold: everything an exchange did behind one
- * row under its prompt, live as a rising stack of its latest steps, settled
- * as a summary that opens onto every step (`ExchangeFoldRow`). Each step
- * opens onto its details in place: a tool call's payload (`ToolDetails`),
- * a thought, a worker's own folded progress (`fold-worker.tsx`).
- */
-import { memo, useCallback, useMemo, useState } from 'react';
-import type { LiveRunStatus } from 'zidane/chat/pure';
-
-import { useStaysMounted } from '../../motion/collapse';
-import { Grow, GrowPresence } from '../../motion/grow';
-import { Crossfade, useCadencedValue } from '../../motion/swap';
-import { foldActionItems, type FoldActionItem, dotVariantFor, type Cluster, type Row } from '../headless/transcript';
-import { foldAttachments, sameAttachments, type FoldAttachment } from '../headless/transcript/fold-attachments';
-import { useChatLabels } from '../useChatLabels';
-import { useModelName } from './actions';
-import { FoldAttachments } from './fold-attachments';
-import { WorkerDetails } from './fold-worker';
-import { FoldStatusTime, useLiveFoldStatus } from './fold-status';
-import { Caret, Dot, RowFrame } from './frame';
-import { createRecentMap } from './recent-map';
-import { ToolDetails } from './tool-details';
-import { ToolTiming } from './tool-parts';
-import { ModelVerdict } from './tool-row';
-
-/**
- * Open/closed memory per fold id, outliving the component: the fold's id
- * is stable for the exchange's life (keyed off its first folded row), and
- * the live → settled swap must not reset what the user chose. Capped like
- * the tool batch's: a forgotten fold reopens collapsed.
- */
-const FOLD_OPEN_STATE = createRecentMap<boolean>(500);
-
-/*
- * Compact density: one row for everything an exchange did, right under the
- * prompt, on the transcript's own text size (`text-sm`, the 22.4px line the
- * prose and the prompt use, so it reads as part of the conversation, not as
- * a footnote).
- *
- *   - Live (the run is going): "Working" and, under it, the last three
- *     actions as a stack. A new action rises in at the bottom, the oldest
- *     leaves at the top, each line's glyph tweens running → done in place.
- *     It stays up for the whole run, prose included. While the provider is
- *     retried or the run waits on the model, the header says so instead,
- *     with how long it has lasted in a chip (`fold-status.tsx`).
- *   - Settled (the run ended): the stack folds away and the header becomes
- *     the summary ("Read a file, ran a command +3") with its duration; the
- *     caret expands the full list, painted by the transcript's own renderer.
- *   - With Tool attachments on, live or settled: the images the calls
- *     returned, as a strip under the steps (`fold-attachments.tsx`).
- *
- * The dot is the shared timeline `Dot`, so the running arc and the ok /
- * error states tween exactly as on a tool row.
- */
-const FOLD_LINE = '22.4px';
-const NO_FOLD_ACTIONS: readonly FoldActionItem[] = [];
-const NO_OPEN_IDS: ReadonlySet<string> = new Set();
-const NO_ATTACHMENTS: readonly FoldAttachment[] = [];
-/** How many of the latest actions the live fold shows under its header. */
-const FOLD_STACK_SIZE = 3;
-/** One stack step at most this often (a readability cadence; each step's motion is the `Grow` on `settle`). */
-const FOLD_STACK_CADENCE_MS = 200;
-
-/** Props for {@link ExchangeFoldRow}. */
-export interface ExchangeFoldRowProps {
-  /** The folded exchange. */
-  row: Extract<Row, { kind: 'exchange-fold' }>;
-  /** Renders clusters with the transcript's row components, for the open list and worker steps. */
-  renderRows: (c: readonly Cluster[]) => React.ReactNode[];
-  /** The live run's status, which the header names ("Waiting for the model", "Retrying 2/3"). Set on the transcript's live fold only. */
-  status?: LiveRunStatus;
-  /** Gathers the images the exchange's tool calls returned in a strip under its steps (the Tool attachments setting). @default false */
-  showAttachments?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: React.CSSProperties;
-}
-
-/** Renders a folded exchange: one header line summarizing the work, a live stack of the latest steps while it runs, and the full step list when expanded. */
-export const ExchangeFoldRow = memo(
-  ({ row, renderRows, status: runStatus, showAttachments = false, className, style }: ExchangeFoldRowProps) => {
-    const labels = useChatLabels();
-    const [openState, setOpenState] = useState(() => FOLD_OPEN_STATE.get(row.id) ?? false);
-    // Which actions show their details: one set for the stack and the full
-    // list, so a step opened in the stack stays open when the fold opens.
-    const [openIds, setOpenIds] = useState<ReadonlySet<string>>(NO_OPEN_IDS);
-    const setOpen = (next: boolean) => {
-      FOLD_OPEN_STATE.set(row.id, next);
-      setOpenState(next);
-      // Closing the group closes its steps: nothing stays open under a shut header.
-      if (!next) setOpenIds(NO_OPEN_IDS);
-    };
-    // One overview line per action (`foldActionItems`), for the live
-    // stack and the expanded list alike.
-    const items = useMemo(() => foldActionItems(row.rows), [row.rows]);
-    const attachments = useStableAttachments(
-      useMemo(() => (showAttachments ? foldAttachments(row.rows) : NO_ATTACHMENTS), [showAttachments, row.rows]),
-    );
-    const actions = items.length;
-    const live = useLiveFoldStatus(row.live ? runStatus : undefined);
-    const head = !row.live
-      ? row.summary
-      : live.status.kind === 'retrying'
-        ? labels.runRetrying(live.status.retry.attempt, live.status.retry.max, retrySource(live.status.retry.source))
-        : live.status.kind === 'waiting'
-          ? labels.runWaiting
-          : labels.working;
-    const settledMs =
-      !row.live && row.stats.durationMs !== undefined && row.stats.durationMs >= 1000
-        ? row.stats.durationMs
-        : undefined;
-    const outcomes = !row.live && row.stats.tools > 0;
-    const state = row.live ? 'live' : 'settled';
-    // The stack shows while the run is live and the list is closed (open, the
-    // full list says it all). A burst of quick calls is held to a readable
-    // cadence (newest wins, last lands) so each step can play its motion.
-    const recent = useMemo(() => items.slice(-FOLD_STACK_SIZE), [items]);
-    // The group opens only onto something more: a live fold whose steps all
-    // already show in its stack (or a fold with no steps) has no arrow and no
-    // toggle, so opening never changes nothing.
-    // Steps opened from the stack count as shown while the group is closed
-    // (closing the group closes them, so they never strand it open).
-    const hidden = useMemo(() => {
-      const visible = new Set((row.live ? recent : []).map((i) => i.id));
-      return items.filter((i) => !visible.has(i.id) && (openState || !openWithin(i, openIds))).length;
-    }, [items, recent, openIds, openState, row.live]);
-    const expandable = hidden > 0;
-    const open = openState && expandable;
-    // Tracked while the list is open too, so closing it lands on the current
-    // stack at once instead of an empty one for the cadence's first beat.
-    const cadenced = useCadencedValue(row.live ? recent : NO_FOLD_ACTIONS, FOLD_STACK_CADENCE_MS);
-    const toggleAction = useCallback(
-      (id: string) =>
-        setOpenIds((prev) => {
-          const next = new Set(prev);
-          if (next.has(id)) next.delete(id);
-          else next.add(id);
-          return next;
-        }),
-      [],
-    );
-    // One list, two views. Open: every step. Closed: the live stack's last
-    // steps (at their latest state) and any step opened from it, which stays
-    // (in order) until closed, however many newer steps pushed it out of the
-    // stack, and after the run ends. A line on screen in both views is the
-    // same element: opening the group grows the earlier steps in above it
-    // instead of swapping one list for another.
-    const shown = useMemo(() => {
-      if (open) return items;
-      const inStack = new Set(cadenced.map((i) => i.id));
-      const kept = items.filter((i) => inStack.has(i.id) || openWithin(i, openIds));
-      return kept.length > 0 ? kept : NO_FOLD_ACTIONS;
-    }, [open, cadenced, items, openIds]);
-
-    return (
-      <div
-        className={['group relative', className].filter(Boolean).join(' ')}
-        style={style}
-        data-testid="exchange-fold"
-        data-state={state}
-        data-open={open}
-      >
-        <RowFrame>
-          <Dot variant={dotVariantFor(row)} line={FOLD_LINE} />
-          <div className="flex-1 min-w-0 pb-3 text-sm leading-[1.6]">
-            <FoldHeader expandable={expandable} open={open} onToggle={() => setOpen(!open)}>
-              <Crossfade activeKey={head} variant="text" className="min-w-0">
-                <span className="block truncate">{head}</span>
-              </Crossfade>
-              {row.live && <FoldStatusTime elapsedSec={live.elapsedSec} />}
-              {row.live && actions > FOLD_STACK_SIZE && (
-                <span className="shrink-0 tabular-nums text-xs text-[var(--zg-text-subtle)]">
-                  {labels.foldSteps(actions)}
-                </span>
-              )}
-              {settledMs !== undefined && <ToolTiming durationMs={settledMs} />}
-              {outcomes && <FoldOutcomes ok={row.stats.tools - row.stats.failed} failed={row.stats.failed} />}
-            </FoldHeader>
-
-            <FoldActions items={shown} all={open} openIds={openIds} onToggle={toggleAction} renderRows={renderRows} />
-            {attachments.length > 0 && <FoldAttachments attachments={attachments} className="pt-2" />}
-          </div>
-        </RowFrame>
-      </div>
-    );
-  },
-);
-
-/**
- * `next`, or the equal list an earlier render kept (`sameAttachments`): a
- * live fold's rows change on every stream tick, and a tick that brought no
- * image must leave the strip as it is.
- */
-function useStableAttachments(next: readonly FoldAttachment[]): readonly FoldAttachment[] {
-  const [kept, setKept] = useState(next);
-  if (sameAttachments(kept, next)) return kept;
-  setKept(next);
-  return next;
-}
-
-/** A retried stream's owner as the retry label names it: none for the session's own. */
-function retrySource(source: string | undefined): string | undefined {
-  return source && source !== 'parent' ? source : undefined;
-}
-
-/** A settled exchange's calls: those that went through and, split off, those that failed. */
-function FoldOutcomes({ ok, failed }: { ok: number; failed: number }) {
-  const labels = useChatLabels();
-  return (
-    <span
-      role="img"
-      aria-label={labels.foldOutcomes(ok, failed)}
-      title={labels.foldOutcomes(ok, failed)}
-      data-testid="fold-outcomes"
-      className="zg-fold-outcomes zg-meta shrink-0 self-center tabular-nums"
-    >
-      <span className={`inline-flex items-center gap-1 pl-1.5 ${failed > 0 ? 'pr-1' : 'pr-1.5'}`}>
-        <span aria-hidden className="zg-soft-tint zg-tint-success i-ph-check-bold text-[9px]" />
-        {ok}
-      </span>
-      {failed > 0 && (
-        <>
-          <span aria-hidden className="w-px self-stretch bg-[var(--zg-hairline)]" />
-          <span className="inline-flex items-center gap-1 pl-1 pr-1.5">
-            <span aria-hidden className="zg-soft-tint zg-tint-danger i-ph-x-bold text-[9px]" />
-            {failed}
-          </span>
-        </>
-      )}
-    </span>
-  );
-}
-
-/** Props for {@link FoldHeader}. */
-export interface FoldHeaderProps {
-  /** Makes the line a toggle with a caret. When false the line is inert. */
-  expandable: boolean;
-  /** The fold is expanded. Drives `aria-expanded` and the caret. */
-  open: boolean;
-  /** Called when the user toggles the header. */
-  onToggle: () => void;
-  /** The header line's content. */
-  children: React.ReactNode;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: React.CSSProperties;
-}
-
-/**
- * A fold's header line (the exchange's work, a group of earlier messages):
- * a toggle with its caret when opening shows something more, otherwise the
- * same line, inert. Same box, tone and spacing either way.
- *
- * @param props - Header props: `expandable`, `open`, `onToggle`, and the `children` of the line.
- */
-export function FoldHeader({ expandable, open, onToggle, children, className, style }: FoldHeaderProps) {
-  const line = 'flex items-baseline gap-2 h-[22.4px] min-w-0 max-w-full text-[var(--zg-text-muted)]';
-  if (!expandable) {
-    return (
-      <div data-testid="fold-head" className={[line, className].filter(Boolean).join(' ')} style={style}>
-        {children}
-      </div>
-    );
-  }
-  return (
-    <button
-      type="button"
-      onClick={onToggle}
-      aria-expanded={open}
-      className={[`zg-disclosure zg-press-subtle ${line}`, className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      {children}
-      <Caret open={open} className="shrink-0 self-center" />
-    </button>
-  );
-}
-
-/**
- * The fold's steps, oldest first: every step when the group is open, the
- * live stack otherwise (see `ExchangeFoldRow`). A burst of new steps rises
- * in at the bottom as the oldest of the stack shrinks out at the top.
- */
-function FoldActions({
-  items,
-  all,
-  openIds,
-  onToggle,
-  renderRows,
-}: {
-  items: readonly FoldActionItem[];
-  all: boolean;
-  openIds: ReadonlySet<string>;
-  onToggle: (id: string) => void;
-  renderRows: (c: readonly Cluster[]) => React.ReactNode[];
-}) {
-  // What the list first rendered with is already there; what comes later grows in.
-  const [firstIds] = useState(() => new Set(items.map((i) => i.id)));
-  return (
-    <ul className="list-none m-0 p-0" data-testid={all ? 'fold-action-list' : 'fold-actions'}>
-      <GrowPresence initial={false}>
-        {items.map((item) => (
-          // The inline padding (pulled back by the margin) leaves room for the line's
-          // hover pill, which bleeds 6px past the text on each side; the clip is vertical.
-          <Grow key={item.id} as="li" appear={!firstIds.has(item.id)} className="-mx-1.5 px-1.5">
-            {/* The fold's rhythm, above each step (the header included); inside the
-                step, so it grows in with it instead of appearing at once. */}
-            <div className="pt-[var(--zg-fold-gap)]">
-              <ActionWithDetails item={item} openIds={openIds} onToggle={onToggle} renderRows={renderRows} />
-            </div>
-          </Grow>
-        ))}
-      </GrowPresence>
-    </ul>
-  );
-}
-
-/** An action's line, opening its details in place when it has any. */
-function ActionWithDetails({
-  item,
-  openIds,
-  onToggle,
-  renderRows,
-}: {
-  item: FoldActionItem;
-  openIds: ReadonlySet<string>;
-  onToggle: (id: string) => void;
-  renderRows: (c: readonly Cluster[]) => React.ReactNode[];
-}) {
-  const open = openIds.has(item.id);
-  const expandable = hasActionDetails(item);
-  // Mounted through the collapse: unmounting at once would drop the details on
-  // the first frame and snap everything below up.
-  const mounted = useStaysMounted(open);
-  return (
-    <>
-      <ActionLine item={item} open={open} onToggle={expandable ? () => onToggle(item.id) : undefined} />
-      {expandable && (
-        <div className="zg-collapsible" data-open={open}>
-          <div className="zg-collapsible-inner">{mounted && <ActionDetails item={item} renderRows={renderRows} />}</div>
-        </div>
-      )}
-      {/* The calls this one made, one step in, open or not: its children, not its details. */}
-      {item.children && item.children.length > 0 && (
-        <ul className="list-none m-0 p-0 pl-7" data-testid="fold-action-children">
-          {item.children.map((child) => (
-            <li key={child.id} className="pt-[var(--zg-fold-gap)]">
-              <ActionWithDetails item={child} openIds={openIds} onToggle={onToggle} renderRows={renderRows} />
-            </li>
-          ))}
-        </ul>
-      )}
-    </>
-  );
-}
-
-/** The item or one of the calls nested under it has its details open. */
-function openWithin(item: FoldActionItem, openIds: ReadonlySet<string>): boolean {
-  return openIds.has(item.id) || (item.children ?? []).some((child) => openWithin(child, openIds));
-}
-
-function hasActionDetails(item: FoldActionItem): boolean {
-  if (item.kind === 'thought') return (item.thoughts ?? []).some((t) => t.text.trim() !== '');
-  if (item.kind === 'worker') return (item.workerRows ?? []).length > 0;
-  return item.tool !== undefined;
-}
-
-/**
- * One action, one line, on the conversation's text size: state glyph, the
- * overview label (a quiet hint after it), edit counts, then its duration at
- * the far end. While running the label carries a soft light sweep.
- */
-function ActionLine({ item, open = false, onToggle }: { item: FoldActionItem; open?: boolean; onToggle?: () => void }) {
-  const labels = useChatLabels();
-  const modelName = useModelName();
-  const running = item.state === 'running';
-  const content = (
-    <>
-      <ActionGlyph state={item.state} />
-      <span className="min-w-0 flex items-baseline gap-2">
-        <span className="min-w-0 flex items-baseline gap-2 overflow-hidden">
-          <span className={`truncate ${running ? 'zg-shimmer' : ''}`}>{item.label}</span>
-          {item.hint && <span className="min-w-0 truncate text-[var(--zg-text-subtle)]">{item.hint}</span>}
-          {item.model && (
-            <span
-              data-testid="agent-model"
-              title={item.model}
-              className="zg-meta-chip shrink-0 text-[11px] text-[var(--zg-text-muted)]"
-            >
-              {modelName(item.model)}
-            </span>
-          )}
-        </span>
-        {(item.added !== undefined || item.removed !== undefined) && (
-          <span className="zg-meta shrink-0 inline-flex gap-1.5">
-            <span className="text-zg-success">+{item.added ?? 0}</span>
-            <span className="text-zg-danger">−{item.removed ?? 0}</span>
-          </span>
-        )}
-        {item.tool?.approval && <ModelVerdict approval={item.tool.approval} />}
-        {/* Duration right after the content (like the settled header), never
-          pushed to the far edge where it loses its line on a wide window. */}
-        <span className="shrink-0 flex items-baseline gap-1.5">
-          {item.waitingFor ? (
-            <span
-              data-testid="action-waiting"
-              title={labels.waitingForSlot(item.waitingFor.max)}
-              className="zg-meta whitespace-nowrap"
-            >
-              {labels.stepWaiting}
-            </span>
-          ) : running && item.startedAt !== undefined ? (
-            <>
-              {item.resuming && (
-                <span data-testid="action-resuming" className="zg-meta whitespace-nowrap">
-                  {labels.stepResuming}
-                </span>
-              )}
-              <ToolTiming startedAt={item.startedAt} running />
-            </>
-          ) : item.durationMs !== undefined ? (
-            <ToolTiming durationMs={item.durationMs} />
-          ) : null}
-          {onToggle && (
-            <span
-              aria-hidden
-              className="zg-caret i-ph-caret-right text-[11px] self-center opacity-0 group-hover/action:opacity-100"
-              style={{ transform: open ? 'rotate(90deg)' : 'rotate(0deg)', ...(open ? { opacity: 1 } : {}) }}
-            />
-          )}
-        </span>
-      </span>
-    </>
-  );
-  const cls =
-    // The hover pill hugs the content, like the fold header's. The glyph takes the
-    // timeline's 16px slot and 12px gap, so a step's text lines up with a message's,
-    // on the conversation's 14px / 22.4px line (`text-sm` would reset it to 20px and
-    // open up the space between steps).
-    'group/action flex items-center gap-3 w-fit max-w-full h-[22.4px] min-w-0 text-[14px] leading-[1.6] text-[var(--zg-text-muted)] -mx-1.5 px-1.5 rounded-[var(--zg-radius-sm)]';
-  if (!onToggle) {
-    return (
-      <div className={cls} title={item.title} data-state={item.state} data-kind={item.kind}>
-        {content}
-      </div>
-    );
-  }
-  return (
-    <button
-      type="button"
-      onClick={onToggle}
-      aria-expanded={open}
-      title={item.title}
-      data-state={item.state}
-      data-kind={item.kind}
-      className={`${cls} zg-disclosure zg-press-subtle text-left`}
-    >
-      {content}
-    </button>
-  );
-}
-
-/**
- * The action's state in a 14px slot. Waiting (a worker every slot is taken
- * for): a pause mark. Running: a thin arc sweeping round a faint ring (the
- * same drawing as the timeline dot's running arc, so the fold's dot and its
- * lines agree). Done: a check. Failed: a red cross. The states cross-fade
- * in place.
- */
-function ActionGlyph({ state }: { state: FoldActionItem['state'] }) {
-  const labels = useChatLabels();
-  return (
-    <span className="w-4 shrink-0 inline-flex items-center justify-center">
-      <Crossfade activeKey={state}>
-        {state === 'waiting' ? (
-          <span
-            role="status"
-            aria-label={labels.stepWaiting}
-            className="i-ph-pause-fill text-[11px] text-[var(--zg-text-subtle)]"
-          />
-        ) : state === 'running' ? (
-          <span role="status" aria-label={labels.stepRunning} className="zg-arc" />
-        ) : state === 'err' ? (
-          <span aria-label={labels.stepFailed} className="i-ph-x text-[12px] text-zg-danger" />
-        ) : (
-          <span aria-label={labels.stepDone} className="i-ph-check text-[12px] text-[var(--zg-text-subtle)]" />
-        )}
-      </Crossfade>
-    </span>
-  );
-}
-
-/**
- * What an action did, in full, under its line and indented to its label.
- * Code stays code (monospace, 12px); reasoning stays prose.
- */
-function ActionDetails({
-  item,
-  renderRows,
-}: {
-  item: FoldActionItem;
-  renderRows: (c: readonly Cluster[]) => React.ReactNode[];
-}) {
-  const body = (() => {
-    if (item.kind === 'thought') {
-      return (
-        <div className="text-[13px] italic leading-relaxed text-[var(--zg-text-muted)] whitespace-pre-line">
-          {(item.thoughts ?? []).map((t) => t.text.replace(/\n{2,}/g, '\n')).join('\n\n')}
-        </div>
-      );
-    }
-    // An agent, started or still waiting for a slot (its `spawn` call alone): the task, never the call's JSON.
-    if (item.kind === 'worker' || item.tool?.name === 'spawn')
-      return <WorkerDetails item={item} renderRows={renderRows} />;
-    if (item.tool) return <ToolDetails tool={item.tool} />;
-    return null;
-  })();
-  return <div className="pl-7 pt-1">{body}</div>;
-}