zidane-ui 9.0.4 → 9.1.3

package/src/chat/transcript/TranscriptRow.tsx

@@ -1,356 +0,0 @@
-/**
- * One transcript row: the switch from a pipeline `Row` to its component,
- * and the lazy slot a root row mounts through. `TranscriptRow` is memoized
- * on the row's own inputs plus ONE shared `RowContext` per transcript, so a
- * render (a stream tick, a page of history arriving) builds one element per
- * row and bails out for every row that did not change.
- */
-import { memo, type CSSProperties, type MouseEvent, type ReactElement, type ReactNode } from 'react';
-import type { Settings } from 'zidane/chat';
-import type { LiveRunStatus, RunReceipt } from 'zidane/chat/pure';
-
-import { type Cluster, dotVariantFor, type Row } from '../headless/transcript';
-import { ExchangeFoldRow } from './fold';
-import { Dot, lineStateOf, RowFrame, useRowIcons } from './frame';
-import { LazyRow } from './LazyRow';
-import { MessageGroupRow } from './messages';
-import {
-  COMMAND_DETAIL_LINE,
-  CommandDetailRow,
-  CommandNoteRow,
-  ErrorRow,
-  FailureRow,
-  InfoRow,
-  NoticeRow,
-  SessionEventRow,
-  SpawnEndRow,
-  SpawnStartRow,
-} from './notices';
-import { UserPromptRow } from './prompt';
-import { PromptOriginLabel } from './PromptOriginLabel';
-import { TextRow, ThinkingBatchRow, ThinkingRow } from './prose';
-import { CompactSummaryRow, RunReceiptInline, RunSummaryRow } from './run-rows';
-import { ToolBatchRow } from './tool-batch';
-import { NestedToolCalls, ToolRow } from './tool-row';
-import { UserBashRow } from './user-bash';
-
-/** A turn's actions on its prompt bubble and settled replies (the app's turn menu). */
-export interface TranscriptTurnMenu {
-  /** The pointer entered a turn's bubble or reply: warm what the menu will show. */
-  prefetch?(turnId: string): void;
-  /** Right-click on a turn's bubble or reply. */
-  onContextMenu(event: MouseEvent<HTMLElement>, target: TurnMenuTarget): void;
-}
-
-/** What a turn-menu right-click landed on. */
-export interface TurnMenuTarget {
-  /** Id of the turn the row belongs to. */
-  turnId: string;
-  /** The user's prompt bubble (editable) or a settled reply (rewindable to). */
-  kind: 'prompt' | 'reply';
-  /** The row's text: what Copy falls back to before the turn loads. */
-  text: string;
-}
-
-/** What every row reads besides its own data: one memoized object per transcript. */
-export interface RowContext {
-  /** Id of the session on screen, or `null`. The turn menu needs it. */
-  sessionId: string | null;
-  /** The display settings rows read: thinking, tool results, edit diffs, full shell output, and how tool calls are shown. */
-  settings: {
-    showThinking: boolean;
-    showToolResults: boolean;
-    showEditDiffs: boolean;
-    showFullShellOutput: boolean;
-    toolCallDisplay: Settings['toolCallDisplay'];
-    /** A thought still streaming opens on its own. */
-    thinkingAutoExpand: boolean;
-    /** Compact density's fold gathers the images its tool calls returned in a strip. */
-    showToolAttachments: boolean;
-  };
-  /** The app's turn menu, or `undefined` when turns have none. */
-  turnMenu: TranscriptTurnMenu | undefined;
-  /** Opens another session by id, or `undefined` when the app cannot. Names stay plain text then. */
-  openSession: ((id: string) => void) | undefined;
-  /** Sends a prompt as the user's next message, or `undefined` when the app cannot. Failure rows then offer no continue button. */
-  resume: ((prompt: string) => void) | undefined;
-}
-
-/** Props for {@link TranscriptRow}. */
-export interface TranscriptRowProps {
-  /** The row to render. Its `kind` picks the component. */
-  row: Row;
-  /** Shows the streaming caret on this reply, which is the last one still arriving. */
-  showCaret: boolean;
-  /** The run receipt docked under this row, if any. */
-  receipt: RunReceipt | undefined;
-  /** This is the transcript's last row, so a failed run can offer a button to continue or retry. */
-  resumable: boolean;
-  /** The shared {@link RowContext} of the transcript. */
-  ctx: RowContext;
-  /** Renders nested clusters, for rows that hold other rows such as folds and message groups. */
-  renderRows?: (list: readonly Cluster[]) => ReactNode[];
-  /** The live run's status, which the transcript's live fold names in its header. Absent on every other row. */
-  status?: LiveRunStatus;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Reasoning rows render nothing while `showThinking` is off (and get no wrapper).
- *
- * @param row - The transcript row.
- * @param showThinking - Whether reasoning rows are shown.
- */
-export function isHiddenRow(row: Row, showThinking: boolean): boolean {
-  return (row.kind === 'thinking' || row.kind === 'thinking-batch') && !showThinking;
-}
-
-const NO_ROWS = (): ReactNode[] => [];
-
-/** A cached root row element and the inputs it was built from. The transcript reuses the element while the inputs are unchanged. */
-export interface SlotEntry {
-  /** The inputs the element was built from. The element is reused while they are unchanged. */
-  deps: unknown[];
-  /** The cached row element. */
-  element: ReactElement;
-}
-
-/** Props for {@link TranscriptRowSlot}: the {@link TranscriptRowProps} of its row, plus its lazy wrapper's. */
-export interface TranscriptRowSlotProps extends Omit<TranscriptRowProps, 'className' | 'style'> {
-  /** Mounts the row at once instead of waiting for it to approach (the transcript's tail). */
-  eager: boolean;
-  /** Height in pixels of the placeholder box before the row mounts. */
-  estimatePx: number;
-  /** Inline style for the row's wrapper, usually its content-visibility sizing. */
-  style: CSSProperties;
-  /** The select-turn stop the row belongs to; set only in select mode. */
-  stop: string | undefined;
-  /** Marks the row as part of the selected stop. */
-  sel: string | undefined;
-  /** Extra classes on the root element. */
-  className?: string;
-}
-
-/** One root transcript row in its lazy wrapper, memoised on the row's own inputs. */
-export const TranscriptRowSlot = memo(function TranscriptRowSlot({
-  eager,
-  estimatePx,
-  style,
-  stop,
-  sel,
-  className,
-  ...row
-}: TranscriptRowSlotProps) {
-  return (
-    <LazyRow
-      className={className}
-      eager={eager}
-      estimatePx={estimatePx}
-      style={style}
-      data-stop={stop}
-      data-sel={sel}
-      data-row={row.row.id}
-      // Counted by an app's scrollback fill: the wrapper exists while the row is not mounted.
-      data-prompt={row.row.kind === 'user-prompt' ? '' : undefined}
-    >
-      <TranscriptRow {...row} />
-    </LazyRow>
-  );
-});
-
-/** Renders one transcript row by switching on its `kind`: prompts, replies, thinking, tool calls, notices, folds, and groups. */
-export const TranscriptRow = memo(function TranscriptRow({
-  row,
-  showCaret,
-  receipt,
-  resumable,
-  ctx,
-  renderRows,
-  status,
-  className,
-  style,
-}: TranscriptRowProps) {
-  const { sessionId, settings, turnMenu } = ctx;
-  const icons = useRowIcons();
-
-  if (isHiddenRow(row, settings.showThinking)) {
-    return null;
-  }
-
-  if (row.kind === 'user-prompt') {
-    /*
-     * The prompt is shown as typed: plain text, whitespace kept, file chips
-     * where it mentions files. Never markdown: a prompt is not a document,
-     * and markdown reflowed it (single line breaks joined, blank lines turned
-     * into paragraph gaps, a leading `1.` into a list), and differently
-     * depending on whether this copy had completion refs.
-     */
-    // Right-click opens the turn's actions (the turn menu): nothing reserved under the bubble.
-    const turnId = sessionId && turnMenu ? row.turnId : undefined;
-    // A prompt from a channel or an event names its sender on a line above; without an origin the row is just the prompt.
-    const origin = row.origin;
-
-    const prompt = (
-      <UserPromptRow
-        className={origin ? undefined : className}
-        style={origin ? undefined : style}
-        row={row}
-        onBubblePointerEnter={turnId && turnMenu?.prefetch ? () => turnMenu.prefetch?.(turnId) : undefined}
-        onBubbleContextMenu={
-          turnId && turnMenu ? (e) => turnMenu.onContextMenu(e, { turnId, kind: 'prompt', text: row.text }) : undefined
-        }
-      />
-    );
-    if (!origin) return prompt;
-    return (
-      <div className={className} style={style}>
-        <PromptOriginLabel origin={origin} indent={icons} />
-        {prompt}
-      </div>
-    );
-  }
-
-  if (row.kind === 'separator') {
-    /*
-     * Run boundary. Deliberately wider than the gap between rows INSIDE a
-     * turn: a turn ending is a stronger break than one tool call following
-     * another, and the transcript should read that way at a glance.
-     */
-    return <div className={['h-5', className].filter(Boolean).join(' ')} style={style} />;
-  }
-
-  /*
-   * Compact density: the exchange's work behind one header. The body
-   * paints the folded rows through this same row and the same owner
-   * clustering, so an open fold looks exactly like full density.
-   */
-  if (row.kind === 'exchange-fold') {
-    return (
-      <ExchangeFoldRow
-        className={className}
-        style={style}
-        row={row}
-        renderRows={renderRows ?? NO_ROWS}
-        status={status}
-        showAttachments={ctx.settings.showToolAttachments}
-      />
-    );
-  }
-
-  // Compact density: an exchange's earlier messages, folded like its work.
-  if (row.kind === 'message-group') {
-    return <MessageGroupRow className={className} style={style} row={row} renderRows={renderRows ?? NO_ROWS} />;
-  }
-
-  /*
-   * `command-detail` is a disclosure like a tool call: the info Dot, the
-   * label, a trailing caret. Its own branch only because its `text-sm`
-   * header needs a taller Dot line than the `info` variant's 16px.
-   */
-  if (row.kind === 'command-detail') {
-    return (
-      <RowFrame className={className} style={style}>
-        <Dot variant="info" line={COMMAND_DETAIL_LINE} />
-        <div className="flex-1 min-w-0 pb-[var(--zg-row-gap,12px)]">
-          <CommandDetailRow label={row.label} text={row.text} syntax={row.syntax} />
-        </div>
-      </RowFrame>
-    );
-  }
-
-  /*
-   * A settled reply opens its turn's actions on right-click (the turn menu).
-   * The run receipt, when shown, is one line under the run's closing reply.
-   */
-  const reply = row.kind === 'markdown' && !row.streaming && sessionId && turnMenu ? row : undefined;
-  const turnId = reply?.turnId;
-  const variant = dotVariantFor(row);
-  // Without its icon, the row's line says what only the icon did: running, failed.
-  const lineState = icons ? undefined : lineStateOf(variant);
-
-  return (
-    <div
-      className={['relative', className].filter(Boolean).join(' ')}
-      style={style}
-      onPointerEnter={turnId && turnMenu?.prefetch ? () => turnMenu.prefetch?.(turnId) : undefined}
-      onContextMenu={
-        reply && turnId && turnMenu
-          ? (e) => turnMenu.onContextMenu(e, { turnId, kind: 'reply', text: reply.text })
-          : undefined
-      }
-    >
-      <RowFrame>
-        <Dot variant={variant} />
-        <div className="flex-1 min-w-0 pb-[var(--zg-row-gap,12px)]">
-          {row.kind === 'thinking' && (
-            <ThinkingRow
-              text={row.text}
-              thinkingMs={row.thinkingMs}
-              live={row.live}
-              autoExpand={settings.thinkingAutoExpand}
-            />
-          )}
-          {row.kind === 'thinking-batch' && (
-            <ThinkingBatchRow thoughts={row.thoughts} totalMs={row.totalMs} autoExpand={settings.thinkingAutoExpand} />
-          )}
-          {row.kind === 'markdown' && <TextRow text={row.text} streaming={row.streaming && showCaret} />}
-          {row.kind === 'info' &&
-            (row.notice ? <NoticeRow notice={row.notice} text={row.text} /> : <InfoRow text={row.text} />)}
-          {row.kind === 'error' &&
-            (row.failure ? (
-              <FailureRow
-                text={row.text}
-                detail={row.detail}
-                failure={row.failure}
-                resumable={resumable}
-                onResume={ctx.resume}
-              />
-            ) : (
-              <ErrorRow text={row.text} />
-            ))}
-          {row.kind === 'session-event' && <SessionEventRow event={row} onOpenSession={ctx.openSession} />}
-          {row.kind === 'run-summary' && <RunSummaryRow event={row} />}
-          {row.kind === 'command-note' && <CommandNoteRow text={row.text} />}
-          {row.kind === 'tool' && (
-            <>
-              <ToolRow
-                tool={row}
-                mode={settings.toolCallDisplay}
-                showResult={settings.showToolResults}
-                showDiff={settings.showEditDiffs}
-                lineState={lineState}
-              />
-              <NestedToolCalls
-                tools={row.children}
-                mode={settings.toolCallDisplay}
-                showResult={settings.showToolResults}
-                showDiff={settings.showEditDiffs}
-              />
-            </>
-          )}
-          {row.kind === 'user-bash' && (
-            <UserBashRow row={row} showFull={settings.showFullShellOutput} lineState={lineState} />
-          )}
-          {row.kind === 'tool-batch' && (
-            <ToolBatchRow
-              id={row.id}
-              tools={row.tools}
-              summary={row.summary}
-              mode={settings.toolCallDisplay}
-              showResult={settings.showToolResults}
-              showDiff={settings.showEditDiffs}
-              lineState={lineState}
-            />
-          )}
-          {row.kind === 'spawn-start' && <SpawnStartRow row={row} />}
-          {row.kind === 'spawn-end' && <SpawnEndRow row={row} />}
-          {row.kind === 'compact-summary' && <CompactSummaryRow text={row.text} meta={row.compact} />}
-          {receipt && <RunReceiptInline receipt={receipt} className="mt-1.5" />}
-        </div>
-      </RowFrame>
-    </div>
-  );
-});

package/src/chat/transcript/TranscriptSearch.tsx

@@ -1,171 +0,0 @@
-/**
- * TranscriptSearch — ⌘F in-conversation search overlay. GUI parity with
- * the TUI's transcript-search mode: query input, live match counter,
- * Enter / Shift+Enter (and ▲/▼ buttons) to hop between matches, Esc to
- * close, matches highlighted in place.
- *
- * The match-scan / highlight / navigation engine lives in
- * `useTranscriptSearch` — shared with the composer's `?` search mode —
- * so this component only owns the floating input UI and its keyboard
- * lifecycle.
- *
- * Opened from a palette match inside the conversation, it starts on that
- * query (`initialQuery`) and, while the query is left as it came, matches
- * its terms the way the content search did and jumps to the first match
- * once the transcript has loaded. Editing the query is a plain ⌘F search.
- */
-import { useEffect, useRef, useState, type CSSProperties, type RefObject } from 'react';
-
-import { useModal } from '../../app/ModalProvider';
-import { IconButton } from '../../components/IconButton';
-import { keyScopeOf } from '../../keybindings/headless/key-scope';
-import { useChatLabels } from '../useChatLabels';
-import { MAX_MATCHES, SearchHighlightStyle, useTranscriptSearch } from './useTranscriptSearch';
-
-/** Props for {@link TranscriptSearch}. */
-export interface TranscriptSearchProps {
-  /** The transcript's scroll container — the walk + jump targets live inside it. */
-  container: RefObject<HTMLElement | null>;
-  /** Changes identity when the transcript re-renders (its events): matches track streaming updates. */
-  revision: unknown;
-  /** The query to open on: a palette match's. */
-  initialQuery?: string;
-  /** Splits the opening query into the terms its content search matched (see `TranscriptSearchOptions.terms`). */
-  terms?: (query: string) => readonly string[];
-  /** Closes the search. */
-  onClose: () => void;
-  /** Extra classes on the overlay. */
-  className?: string;
-  /** Inline style on the overlay. */
-  style?: CSSProperties;
-}
-
-/**
- * The ⌘F overlay: the query, the match counter, ▲▼ and Esc (see the module comment). Needs the app's `ModalProvider`.
- *
- * @param props - The {@link TranscriptSearchProps}.
- */
-export function TranscriptSearch({
-  container,
-  revision,
-  initialQuery,
-  terms,
-  onClose,
-  className,
-  style,
-}: TranscriptSearchProps) {
-  const labels = useChatLabels();
-  const modal = useModal();
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const [query, setQuery] = useState(initialQuery ?? '');
-  // The palette's query, untouched: its terms, and its first match once the transcript is there.
-  const seeded = Boolean(initialQuery) && query === initialQuery;
-  const { count, capped, activeIndex, hasNeedle, goTo } = useTranscriptSearch(container, query, revision, {
-    ...(seeded && terms ? { terms } : {}),
-    revealFirstMatch: seeded,
-  });
-
-  /** Focus + select on open so a stale query is overtype-able immediately. */
-  useEffect(() => {
-    inputRef.current?.select();
-  }, []);
-
-  /**
-   * While open, ⌘F/Ctrl+F re-focuses the input (App's opener is a no-op
-   * once `searchOpen` is true), and Esc closes — unless a modal is
-   * stacked on top, in which case ModalProvider's document-level Esc
-   * handler owns the key and closing both at once would feel like a
-   * double-dismiss.
-   */
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
-      // The code editor has its own find; leave Cmd+F to it while focused.
-      // Already taken: the editor's find, or Files / Diffs (App routes it there first).
-      if (keyScopeOf(event) === 'editor' || event.defaultPrevented) return;
-      if (event.key.toLowerCase() === 'f' && (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey) {
-        event.preventDefault();
-        inputRef.current?.select();
-
-        return;
-      }
-
-      if (event.key === 'Escape' && !modal.isOpen) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClose();
-      }
-    };
-
-    window.addEventListener('keydown', onKey);
-
-    return () => window.removeEventListener('keydown', onKey);
-  }, [modal.isOpen, onClose]);
-
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      goTo(event.shiftKey ? -1 : 1);
-    } else if (event.key === 'Escape') {
-      // Handled here (not only via the window listener) so the close
-      // wins before any other document-level Esc consumer sees the key.
-      event.preventDefault();
-      event.stopPropagation();
-      onClose();
-    }
-  };
-
-  const total = capped ? `${MAX_MATCHES}+` : String(count);
-
-  return (
-    <div
-      className={`zg-float absolute top-3 right-6 z-40 flex items-center gap-1 p-1${className ? ` ${className}` : ''}`}
-      style={style}
-    >
-      <SearchHighlightStyle />
-      <label className="zg-well flex items-center gap-1.5 h-7 pl-2 pr-2 cursor-text">
-        <span className="i-ph-magnifying-glass text-sm text-[var(--zg-text-muted)] shrink-0" aria-hidden />
-        <input
-          ref={inputRef}
-          type="text"
-          value={query}
-          onChange={(event) => setQuery(event.target.value)}
-          onKeyDown={onInputKeyDown}
-          placeholder={labels.findInConversation}
-          aria-label={labels.findInConversation}
-          // The overlay exists to be typed into: ⌘F without focus is dead weight.
-          autoFocus
-          className="w-44 bg-transparent border-0 outline-none p-0 text-zg-ui text-[var(--zg-text)] placeholder:text-[var(--zg-text-muted)]"
-        />
-        {hasNeedle && (
-          <span className="zg-meta shrink-0 select-none" aria-live="polite">
-            {count === 0 ? '0/0' : `${activeIndex + 1}/${total}`}
-          </span>
-        )}
-      </label>
-      <IconButton
-        icon="i-ph-caret-up"
-        label={labels.findPrevious}
-        title={labels.findPreviousHint}
-        size="sm"
-        disabled={count === 0}
-        onClick={() => goTo(-1)}
-      />
-      <IconButton
-        icon="i-ph-caret-down"
-        label={labels.findNext}
-        title={labels.findNextHint}
-        size="sm"
-        disabled={count === 0}
-        onClick={() => goTo(1)}
-      />
-      <IconButton
-        icon="i-ph-x"
-        label={labels.findInConversationClose}
-        title={labels.findCloseHint}
-        size="sm"
-        onClick={onClose}
-      />
-    </div>
-  );
-}