zidane-ui 9.0.4 → 9.1.3

package/src/chat/Transcript.tsx

@@ -1,461 +0,0 @@
-/**
- * The chat transcript: zidane events in, the rows of a session out. Runs the
- * headless pipeline (`use-transcript-rows.ts`) with the display options,
- * walks the rows into subagent blocks and lazy root rows, and paints the
- * select-turn cursor when the app drives that mode.
- *
- *   <Transcript events={events} streaming={running} sessionId={id} options={{ transcriptDensity: 'compact' }} />
- *
- * What a row draws through the app's services comes from the renderer
- * slots (`TranscriptRenderersProvider`) and what it asks of the app from
- * the actions (`TranscriptActionsProvider`), both provided around it.
- * `HostTranscript` is this component over a `ChatHost`.
- *
- * Scroll performance (keep it at frame rate on 3,000+ turn sessions): rows
- * keep their identity across stream ticks, each renders through the
- * memoized `TranscriptRow` with one shared `RowContext`, a root row whose
- * inputs did not change reuses its element (React skips it without a props
- * compare), and root rows mount on approach (`LazyRow`) except the last
- * `EAGER_TAIL`.
- */
-import { memo, useCallback, useMemo, useRef, type CSSProperties, type ReactElement, type ReactNode } from 'react';
-import type { Settings } from 'zidane/chat';
-import { DEFAULT_SETTINGS, type LiveRunStatus, type RunRetry, runTailActivity } from 'zidane/chat/pure';
-
-import type { ChatEvent } from './headless/host';
-import { type Cluster, firstRowId, type GroupCluster, type Row, stopForRow } from './headless/transcript';
-import { useTranscriptActions } from './transcript/actions';
-import { RowIconsContext } from './transcript/frame';
-import { CvRow, TranscriptSettling } from './transcript/LazyRow';
-import { rowCvStyle, rowEstimatePx } from './transcript/row-estimate';
-import { SelectCursor } from './transcript/SelectCursor';
-import { SubagentBlock } from './transcript/SubagentBlock';
-import {
-  isHiddenRow,
-  type RowContext,
-  type SlotEntry,
-  TranscriptRow,
-  TranscriptRowSlot,
-  type TranscriptTurnMenu,
-} from './transcript/TranscriptRow';
-import { useSelectStops, useTranscriptRows } from './transcript/use-transcript-rows';
-import { useTranscriptSelectionCopy } from './transcript/useTranscriptSelectionCopy';
-import type { SelectStops } from './headless/transcript';
-
-export type { TranscriptTurnMenu, TurnMenuTarget } from './transcript/TranscriptRow';
-
-/** The display settings a transcript reads: zidane's `Settings` fields of the same names. */
-export type TranscriptOptions = Pick<
-  Settings,
-  | 'showRowIcons'
-  | 'showThinking'
-  | 'showToolResults'
-  | 'showEditDiffs'
-  | 'showFullShellOutput'
-  | 'groupToolCalls'
-  | 'toolCallDisplay'
-  | 'transcriptDensity'
-  | 'hideSubagentOutput'
-  | 'showRunReceipt'
-  | 'thinkingAutoExpand'
-  | 'showCacheNotices'
-  | 'codemodeShowCalls'
-  | 'showToolAttachments'
->;
-
-/** zidane's defaults for those settings. */
-export const DEFAULT_TRANSCRIPT_OPTIONS: TranscriptOptions = {
-  showRowIcons: DEFAULT_SETTINGS.showRowIcons,
-  showThinking: DEFAULT_SETTINGS.showThinking,
-  showToolResults: DEFAULT_SETTINGS.showToolResults,
-  showEditDiffs: DEFAULT_SETTINGS.showEditDiffs,
-  showFullShellOutput: DEFAULT_SETTINGS.showFullShellOutput,
-  groupToolCalls: DEFAULT_SETTINGS.groupToolCalls,
-  toolCallDisplay: DEFAULT_SETTINGS.toolCallDisplay,
-  transcriptDensity: DEFAULT_SETTINGS.transcriptDensity,
-  hideSubagentOutput: DEFAULT_SETTINGS.hideSubagentOutput,
-  showRunReceipt: DEFAULT_SETTINGS.showRunReceipt,
-  thinkingAutoExpand: DEFAULT_SETTINGS.thinkingAutoExpand,
-  showCacheNotices: DEFAULT_SETTINGS.showCacheNotices,
-  codemodeShowCalls: DEFAULT_SETTINGS.codemodeShowCalls,
-  showToolAttachments: DEFAULT_SETTINGS.showToolAttachments,
-};
-
-/** Select-turn mode, driven by the app (its keys move `selected`). */
-export interface TranscriptSelection {
-  /** The selected turn while the mode is on in this transcript; null when off. */
-  selected: string | null;
-  /**
-   * Receives a function answering the turns the cursor can walk, from the
-   * rows painted right now (ask it on entering the mode and on every move).
-   * Returns the unregister.
-   */
-  registerStops?(source: () => SelectStops): () => void;
-}
-
-/** Props for {@link Transcript}. */
-export interface TranscriptProps {
-  /** The session's events, oldest first. The transcript turns them into rows. */
-  events: readonly ChatEvent[];
-  /** A run is in flight: the last reply may still be streaming. */
-  streaming: boolean;
-  /** The session shown; switching it replays the first-paint settle (no enter animations). */
-  sessionId: string | null;
-  /** Memoize it: a new object re-renders the transcript. Missing fields take `DEFAULT_TRANSCRIPT_OPTIONS`. */
-  options?: Partial<TranscriptOptions>;
-  /** Absent: no select-turn mode. Memoize it. */
-  selection?: TranscriptSelection;
-  /** Absent: turns have no menu. Memoize it. */
-  turnMenu?: TranscriptTurnMenu;
-  /**
-   * Opts the live work row (compact density's fold) in to naming the run's
-   * status: "Retrying 2/3" while `retry` is set, "Waiting for the model"
-   * once nothing has moved on screen for a moment, each with how long it has
-   * lasted in a chip. Absent: the row says "Working". Memoize it.
-   */
-  runStatus?: { retry: RunRetry | null };
-  /** Extra class names for the transcript's root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-  /** Rendered after the rows, inside the transcript (a menu the app owns). */
-  children?: ReactNode;
-}
-
-/**
- * Top-level rows at the end of the transcript that mount at once (the rest
- * mount on approach, `LazyRow`): enough to fill the window when the session
- * opens pinned to the bottom, so the first frame shows real rows. Sized by
- * the rows' estimated heights (`EAGER_SCREENS` windows' worth), never fewer
- * than `EAGER_MIN` rows nor more than `EAGER_MAX`: mounting forty rows when
- * eight fill the window made every conversation switch pay for the other
- * thirty-two in its frame. Rows above mount next, from the viewport
- * observers, and the ones within a viewport of the view mount at once.
- */
-const EAGER_SCREENS = 1.5;
-const EAGER_MIN = 6;
-const EAGER_MAX = 40;
-
-/**
- * Index of the first root cluster that mounts at once (`EAGER_SCREENS`).
- *
- * @param list - The root clusters.
- * @param hidden - Rows that render nothing (they take no room).
- */
-function eagerTailStart(list: readonly Cluster[], hidden: (row: Row) => boolean): number {
-  // `innerHeight` reads no layout. The transcript's own viewport is shorter (header, composer).
-  const budget = (typeof window === 'undefined' ? 1000 : window.innerHeight) * EAGER_SCREENS;
-  let px = 0;
-  let rows = 0;
-  for (let i = list.length - 1; i >= 0; i--) {
-    const cluster = list[i]!;
-    if (cluster.kind === 'single') {
-      if (hidden(cluster.row)) continue;
-      px += rowEstimatePx(cluster.row);
-    }
-    // A subagent block always renders whole; counting it as no height keeps the tail generous.
-    rows++;
-    if (rows >= EAGER_MAX || (rows >= EAGER_MIN && px >= budget)) return i;
-  }
-  return 0;
-}
-/** How long after a conversation first paints its rows count as already there. */
-const SETTLE_MS = 400;
-
-/** A subagent block's id among the rows: its first row's, not its position (a prepended page shifts every position). */
-const groupRowId = (cluster: GroupCluster, index: number) => `group-${firstRowId(cluster) ?? index}-${cluster.childId}`;
-
-/** Renders a session's events as transcript rows: messages, tool calls grouped by the display options, subagent blocks, notices, and the select-turn cursor. Rows mount lazily as they near the viewport. */
-export const Transcript = memo(function Transcript({
-  events,
-  streaming,
-  sessionId,
-  options,
-  selection,
-  turnMenu,
-  runStatus,
-  className,
-  style,
-  children,
-}: TranscriptProps) {
-  const o = options ? { ...DEFAULT_TRANSCRIPT_OPTIONS, ...options } : DEFAULT_TRANSCRIPT_OPTIONS;
-  const { showThinking, showToolResults, showEditDiffs, toolCallDisplay, thinkingAutoExpand, showToolAttachments } = o;
-  const showFullShellOutput = Boolean(o.showFullShellOutput);
-  const collapseSubagents = o.hideSubagentOutput;
-  const { openSession, resume } = useTranscriptActions();
-
-  // A conversation's first paint (switching to it, its history landing) is
-  // not new content: rows mounted in that window skip their enter animation.
-  const settle = useRef({ sessionId: null as string | null, shown: false, until: 0 });
-  if (settle.current.sessionId !== sessionId) settle.current = { sessionId, shown: false, until: 0 };
-  if (!settle.current.shown && events.length > 0) {
-    settle.current.shown = true;
-    settle.current.until = performance.now() + SETTLE_MS;
-  }
-  const settling = useCallback(() => performance.now() < settle.current.until, []);
-
-  const { visibleRows, receiptByRowId, resumableId, clusters, lastStreamingRow } = useTranscriptRows(
-    events,
-    streaming,
-    {
-      showCacheNotices: o.showCacheNotices,
-      codemodeShowCalls: o.codemodeShowCalls,
-      showEditDiffs,
-      groupToolCalls: o.groupToolCalls,
-      showRunReceipt: o.showRunReceipt,
-      compact: o.transcriptDensity === 'compact',
-    },
-  );
-
-  const selectedTurnId = selection?.selected ?? null;
-  const stops = useSelectStops(visibleRows, events, showThinking, selectedTurnId !== null, selection?.registerStops);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const rowCtx = useMemo<RowContext>(
-    () => ({
-      sessionId,
-      settings: {
-        showThinking,
-        showToolResults,
-        showEditDiffs,
-        showFullShellOutput,
-        toolCallDisplay,
-        thinkingAutoExpand,
-        showToolAttachments,
-      },
-      turnMenu,
-      openSession,
-      resume,
-    }),
-    [
-      sessionId,
-      showThinking,
-      showToolResults,
-      showEditDiffs,
-      showFullShellOutput,
-      toolCallDisplay,
-      thinkingAutoExpand,
-      showToolAttachments,
-      turnMenu,
-      openSession,
-      resume,
-    ],
-  );
-
-  /*
-   * A fold's body is this walk again. It runs through a ref, so the function
-   * handed to folds keeps its identity across stream ticks and a settled fold
-   * doesn't re-render per token; it changes identity (re-rendering every
-   * fold) only when something a fold body shows changes. A live fold still
-   * re-renders each tick: its own row object changes.
-   */
-  const slotCache = useRef(new Map<string, SlotEntry>());
-  const groupCache = useRef(new WeakMap<GroupCluster, SlotEntry>());
-  const renderClustersRef = useRef<(list: readonly Cluster[], lazy?: boolean) => ReactNode[]>(() => []);
-  const foldEpoch = useMemo(
-    () => ({}),
-    [rowCtx, selectedTurnId, stops, resumableId, showThinking, collapseSubagents, streaming],
-  );
-  const renderFoldRows = useMemo(
-    () => (list: readonly Cluster[], lazy?: boolean) => renderClustersRef.current(list, lazy),
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- the epoch is the dependency
-    [foldEpoch],
-  );
-
-  /*
-   * The live run's status, for the root live fold's header. It changes only
-   * when the retry or the wait does, so a stream tick re-renders no fold.
-   */
-  const waiting = runStatus !== undefined && streaming && runTailActivity(events) === 'waiting';
-  const liveStatus = useMemo<LiveRunStatus | undefined>(
-    () => (runStatus && streaming ? { retry: runStatus.retry, waiting } : undefined),
-    [runStatus, streaming, waiting],
-  );
-
-  // `root`: a row of the transcript's own walk, not of a fold or a worker's body.
-  const rowProps = (row: Row, root = false) => ({
-    row,
-    showCaret: row === lastStreamingRow,
-    receipt: receiptByRowId.get(row.id),
-    resumable: row.id === resumableId,
-    ctx: rowCtx,
-    renderRows: row.kind === 'exchange-fold' || row.kind === 'message-group' ? renderFoldRows : undefined,
-    status: root && row.kind === 'exchange-fold' && row.live ? liveStatus : undefined,
-  });
-
-  /*
-   * Walk clusters into row nodes. Shared by the transcript root and the body
-   * of an open exchange fold. In select-turn mode each selectable row carries
-   * `data-stop` (hover / click target) and the selected ones `data-sel`; the
-   * highlight itself is ONE element (`SelectCursor`) that measures them. Rows
-   * are never wrapped or moved, so moving the cursor re-renders attributes,
-   * not rows.
-   *
-   * A subagent block: its own rows, with the blocks of the workers it
-   * started nested where they ran (`clusterByOwner`). A nested block indents
-   * relative to its spawner's block, not to the transcript.
-   *
-   * Like a root row, a block whose inputs didn't change reuses its element
-   * (`clusterByOwner` keeps the cluster's identity while its rows hold), so
-   * a tick elsewhere doesn't re-render it. Its inputs: everything below
-   * reads, per member row too (the caret and receipt move between rows).
-   */
-  const groupDeps = (cluster: GroupCluster, deps: unknown[]) => {
-    for (const item of cluster.body) {
-      if (item.kind === 'group') {
-        groupDeps(item, deps);
-        continue;
-      }
-      const row = item.row;
-      deps.push(
-        row === lastStreamingRow,
-        receiptByRowId.get(row.id),
-        row.kind === 'exchange-fold' || row.kind === 'message-group' ? renderFoldRows : undefined,
-      );
-    }
-    return deps;
-  };
-
-  const renderGroup = (cluster: GroupCluster, ci: number, parentDepth?: number): ReactNode => {
-    const key = groupRowId(cluster, ci);
-    const deps = groupDeps(cluster, [
-      key,
-      parentDepth,
-      collapseSubagents,
-      streaming,
-      showThinking,
-      rowCtx,
-      resumableId,
-    ]);
-    const hit = groupCache.current.get(cluster);
-    if (hit && hit.deps.length === deps.length && hit.deps.every((d, i) => Object.is(d, deps[i]))) {
-      return hit.element;
-    }
-    const element = buildGroup(cluster, key, parentDepth);
-    groupCache.current.set(cluster, { deps, element });
-    return element;
-  };
-
-  const buildGroup = (cluster: GroupCluster, key: string, parentDepth?: number): ReactElement => (
-    <SubagentBlock
-      // Keyed by its first row, not its position: a prepended page shifts
-      // every position and would remount every group below it.
-      key={key}
-      data-row={key}
-      childId={cluster.childId}
-      depth={cluster.depth}
-      {...(parentDepth !== undefined ? { parentDepth } : {})}
-      rows={cluster.rows}
-      defaultCollapsed={collapseSubagents}
-      streaming={streaming}
-    >
-      {cluster.body.map((item, i) => {
-        if (item.kind === 'group') return renderGroup(item, i, cluster.depth);
-        const row = item.row;
-        if (isHiddenRow(row, showThinking)) return null;
-        return (
-          <CvRow key={row.id} style={rowCvStyle(row)} data-row={row.id}>
-            <TranscriptRow {...rowProps(row)} />
-          </CvRow>
-        );
-      })}
-    </SubagentBlock>
-  );
-
-  const renderClusters = (list: readonly Cluster[], lazy = false): ReactNode[] => {
-    const out: ReactNode[] = [];
-    // Only the root walk is lazy; it rebuilds the cache with the rows it used (no growth).
-    const nextSlotCache = lazy ? new Map<string, SlotEntry>() : slotCache.current;
-    const eagerFrom = lazy ? eagerTailStart(list, (row) => isHiddenRow(row, showThinking)) : 0;
-
-    list.forEach((cluster, ci) => {
-      if (cluster.kind === 'single') {
-        // Rows that render null (hidden thinking) must not get a cv
-        // wrapper: an EMPTY skipped element still reserves its
-        // contain-intrinsic-size placeholder offscreen but collapses to
-        // 0 on screen — systematic scrollbar drift.
-        if (isHiddenRow(cluster.row, showThinking)) return;
-
-        const stop = stops ? stopForRow(cluster.row, stops) : null;
-        // Keyed by ROW id, not cluster position, so upstream regrouping
-        // never remounts later rows.
-        const sel = stop !== null && stop === selectedTurnId ? '' : undefined;
-        if (lazy) {
-          /*
-           * The same element for a row whose inputs didn't change: React skips it
-           * without even comparing props, so a stream tick costs the rows that
-           * changed, not one element and one memo check per row of the transcript.
-           */
-          const props = rowProps(cluster.row, true);
-          const eager = ci >= eagerFrom;
-          const deps = [
-            props.row,
-            props.showCaret,
-            props.receipt,
-            props.resumable,
-            props.ctx,
-            props.renderRows,
-            props.status,
-            eager,
-            stop,
-            sel,
-          ];
-          const hit = slotCache.current.get(cluster.row.id);
-          const element =
-            hit && hit.deps.every((d, i) => Object.is(d, deps[i])) ? (
-              hit.element
-            ) : (
-              <TranscriptRowSlot
-                key={cluster.row.id}
-                eager={eager}
-                estimatePx={rowEstimatePx(cluster.row)}
-                style={rowCvStyle(cluster.row)}
-                stop={stop ?? undefined}
-                sel={sel}
-                {...props}
-              />
-            );
-          nextSlotCache.set(cluster.row.id, { deps, element });
-          out.push(element);
-          return;
-        }
-        out.push(
-          <CvRow
-            key={cluster.row.id}
-            style={rowCvStyle(cluster.row)}
-            data-stop={stop ?? undefined}
-            data-sel={sel}
-            data-row={cluster.row.id}
-          >
-            <TranscriptRow {...rowProps(cluster.row)} />
-          </CvRow>,
-        );
-        return;
-      }
-
-      out.push(renderGroup(cluster, ci));
-    });
-    if (lazy) slotCache.current = nextSlotCache;
-    return out;
-  };
-
-  renderClustersRef.current = renderClusters;
-  const rootRows = renderClusters(clusters, true);
-
-  useTranscriptSelectionCopy(containerRef);
-
-  return (
-    <TranscriptSettling.Provider value={settling}>
-      {/* Every row's icon reads it: off, the icon column goes and lines carry what it said. */}
-      <RowIconsContext.Provider value={o.showRowIcons}>
-        <div ref={containerRef} className={className} style={style}>
-          <div className="zg-timeline relative pl-2 pr-1 py-1">
-            <SelectCursor selected={selectedTurnId} layout={stops} />
-            {rootRows}
-          </div>
-          {children}
-        </div>
-      </RowIconsContext.Provider>
-    </TranscriptSettling.Provider>
-  );
-});

package/src/chat/composer/AgentPicker.tsx

@@ -1,155 +0,0 @@
-/**
- * The agent profile pill of the composer's controls and its menu: every
- * profile offered, the current one checked. The desktop app feeds it its
- * profile catalog and decides what a pick does.
- *
- *   - `onChange` returning a promise (a live session being switched) keeps
- *     the menu open, rows disabled and "switching…" on the picked one, until
- *     it settles, so a slow write doesn't look instant.
- *   - `draft` (no session yet): the pick is a default for the next chat; the
- *     menu says so.
- */
-import { useState, type CSSProperties, type ReactNode } from 'react';
-
-import { Popover, type PopoverTriggerProps } from '../../components/floating/Popover';
-import type { Align, Side } from '../../components/floating/useAnchoredPosition';
-import { Menu, MenuNote, MenuRow } from '../../components/Menu';
-import { useChatLabels } from '../useChatLabels';
-import { PickerPill } from './PickerPill';
-
-/** An agent profile the picker offers. */
-export interface AgentProfile {
-  /** Stable profile id. Passed to `onChange` and compared with `value`. */
-  id: string;
-  /** Name shown in the pill and the menu. */
-  label: string;
-  /** Short text shown under the label in the menu. */
-  description?: string;
-  /** A dim note at the end of the profile's menu row (what picking it would cost). */
-  hint?: string;
-}
-
-/** Props for {@link AgentPicker}. */
-export interface AgentPickerProps {
-  /** The profiles to offer. With none, the picker renders nothing. */
-  profiles: readonly AgentProfile[];
-  /** The current profile id. */
-  value: string;
-  /** The profile the pill names when `value` is not offered (a session saved on a removed profile). */
-  fallback?: string;
-  /** Called with the picked profile id. Return a promise to keep the menu open and show "switching" on the picked row until it settles. */
-  onChange(id: string): void | Promise<void>;
-  /** No session yet: the pick applies to the next chat. */
-  draft?: boolean;
-  /** Draws the trigger in place of the pill (a settings row): spread the props onto it. */
-  trigger?: (props: PopoverTriggerProps, open: boolean) => ReactNode;
-  /**
-   * Preferred side of the trigger for the menu. It flips when it does not fit.
-   * @default 'top'
-   */
-  side?: Side;
-  /**
-   * How the menu lines up along the trigger's edge.
-   * @default 'start'
-   */
-  align?: Align;
-  /** Called when the menu opens or closes. */
-  onOpenChange?: (open: boolean) => void;
-  /** Extra classes on the root element (the default trigger pill; ignored with `trigger`). */
-  className?: string;
-  /** Inline styles on the root element (the default trigger pill; ignored with `trigger`). */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the agent profile pill of the composer controls and its menu, with the current profile checked.
- *
- * @param props - The {@link AgentPickerProps}.
- */
-export function AgentPicker({
-  profiles,
-  value,
-  fallback,
-  onChange,
-  draft = false,
-  trigger,
-  side,
-  align,
-  onOpenChange,
-  className,
-  style,
-}: AgentPickerProps) {
-  const labels = useChatLabels();
-  const [busy, setBusy] = useState<string | null>(null);
-  const profile = profiles.find((p) => p.id === value) ?? profiles.find((p) => p.id === fallback);
-
-  const select = async (id: string, close: () => void) => {
-    if (busy) return;
-    const pending = onChange(id);
-    if (!pending) {
-      close();
-      return;
-    }
-    try {
-      setBusy(id);
-      await pending;
-      close();
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  if (profiles.length === 0) return null;
-
-  return (
-    <Popover
-      ariaLabel={draft ? labels.defaultAgent : labels.switchAgent}
-      width={288}
-      {...(side ? { side } : {})}
-      {...(align ? { align } : {})}
-      {...(onOpenChange ? { onOpenChange } : {})}
-      trigger={
-        trigger ??
-        ((props) => (
-          <PickerPill
-            {...props}
-            title={draft ? labels.defaultAgent : labels.switchAgent}
-            className={className}
-            style={style}
-          >
-            <span className="text-xs font-medium min-w-0 truncate">{profile?.label ?? value}</span>
-          </PickerPill>
-        ))
-      }
-    >
-      {(close) => (
-        <Menu aria-label={labels.agentProfiles}>
-          {profiles.map((p) => {
-            const current = p.id === value;
-            return (
-              <MenuRow
-                key={p.id}
-                size="lg"
-                role="menuitemradio"
-                aria-checked={current}
-                checked={current}
-                title={p.label}
-                description={p.description}
-                trailing={
-                  busy === p.id ? (
-                    <span className="zg-meta">{labels.switchingAgent}</span>
-                  ) : p.hint ? (
-                    <span className="zg-meta">{p.hint}</span>
-                  ) : undefined
-                }
-                disabled={busy !== null}
-                onClick={() => void select(p.id, close)}
-              />
-            );
-          })}
-          {draft && <MenuNote icon="i-ph-info">{labels.agentDraftNote}</MenuNote>}
-        </Menu>
-      )}
-    </Popover>
-  );
-}