zidane-ui 9.0.4 → 9.1.3

package/src/chat/rich-composer/RichComposer.tsx

@@ -1,1036 +0,0 @@
-/**
- * The desktop app's rich composer: a Tiptap editor set in the chatbox card,
- * with `@` `/` `#` and extension completions, typed badges, inline ghost
- * text and the next-prompt suggestion, shell (`!`) and transcript-search
- * (`?`) modes, ↑/↓ prompt history, staged attachments, the shared
- * per-session draft and the composer bus. Data comes from `ComposerHost`
- * (`useComposerHost`); sending is the app's (`onSend`).
- *
- * Its modules: `use-composer-editor.ts` (the editor: `composer-extensions.ts`,
- * `composer-keys.ts`), `use-ghost-lifecycle.ts`, `use-draft-mirror.ts`,
- * `use-composer-sources.ts`, `use-composer-bus.ts`, `use-staged-attachments.ts`,
- * `composer-controls.tsx`.
- */
-import { EditorContent, useEditorState, type Editor } from '@tiptap/react';
-import {
-  type ChangeEvent,
-  type ComponentType,
-  type CSSProperties,
-  type MouseEvent as ReactMouseEvent,
-  type ReactNode,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { createSkillsCompletionProvider, type InlineGhost, uniqueSkillNamesFromReferences } from 'zidane/chat/pure';
-
-import { useLightbox } from '../../components/Lightbox';
-import { basename } from '../../path';
-import { AttachmentNotices, attachmentLightboxItems } from '../composer/attachments';
-import { type AttachmentLabelFn, AttachmentRow } from '../composer/AttachmentTiles';
-import { useComposerHost, useComposerLabels } from '../composer/ComposerHostProvider';
-import { usePromptHistory } from '../composer/PromptHistoryProvider';
-import { plainTextToDocJson } from '../composer/prompt-history-nav';
-import { composeSubmitText, type ComposerMode, unsentDraft } from '../headless/composer-modes';
-import { findCommand } from '../headless/composer/commands';
-import { draftTextToDocJson } from '../headless/composer/draft-sync';
-import { editorJsonToMarkdown, type JsonNode } from '../headless/composer/editor-markdown';
-import type { GhostController, PromptGhostOffer } from '../headless/composer/ghost-autocomplete';
-import type { ComposerAttachment, ComposerCommandArgs } from '../headless/composer/host';
-import type { ChatSiteIcons } from '../headless/transcript-host';
-import type { TextPreviewSlotProps } from '../transcript/renderers';
-import { badgeDecorationsKey, createBadgeDecorationsPlugin, refreshBadgeDecorations } from './badge-decorations';
-import { MODE_CHIP, modeChipTone, PlusButton, SendStopButton } from './composer-controls';
-import { ghostTextPluginKey } from './ghost-plugin';
-import { createPopoverGate } from './mention-popover';
-import { useComposerBus } from './use-composer-bus';
-import { useComposerEditor } from './use-composer-editor';
-import { useComposerSources } from './use-composer-sources';
-import { serializeDraftText, useDraftMirror } from './use-draft-mirror';
-import { type GhostLifecycle, useGhostLifecycle, useSharedGhost } from './use-ghost-lifecycle';
-import { usePromptGhost } from './use-prompt-ghost';
-import { useStagedAttachments } from './use-staged-attachments';
-
-/**
- * Once-latch for the `useEditorState` selector's `getText()` catch —
- * see the comment at the catch site. Module-level (not a ref) because
- * the selector can run before any render commits, and one warning per
- * app lifetime is the point.
- */
-let warnedEditorGetText = false;
-
-const NO_ARGS: ReadonlySet<string> = new Set();
-
-/** Props for {@link RichComposer}. */
-export interface RichComposerProps {
-  /** No folder picked: read-only, with its own placeholder. */
-  disabled: boolean;
-  /** The folder the session runs in (`''`: none; `null`: none picked yet). */
-  folderPath: string | null;
-
-  /**
-   * Where `@` file mentions list from, when it isn't `folderPath`: a sandbox
-   * session's virtual root (`SidebarSession.workspace`).
-   */
-  fileRoot?: string;
-  /** The session the composer writes to (`null`: a new chat). */
-  activeSessionId?: string | null;
-
-  /**
-   * The server the session (or the draft) runs on: `/` commands, their
-   * arguments and the ghost text come from it; this window's extension
-   * popups don't apply there. Absent = This computer.
-   */
-  hostId?: string | null;
-
-  /** When true, the send button is replaced by a stop button that calls `onStop`. */
-  running?: boolean;
-  /** Stops the run. */
-  onStop?: () => void;
-  /** Sends a prompt. Rejecting puts the prompt back in an empty composer. */
-  onSend: (
-    text: string,
-    attachments: ComposerAttachment[],
-    skills: string[],
-    opts?: { keepDraft?: boolean },
-  ) => void | Promise<void>;
-
-  /**
-   * Rendered next to the `+` attachment button — typically the inline
-   * AgentPicker. Kept as a slot so the Chatbox doesn't need to know
-   * which app-level controls the user wants inline.
-   */
-  leadingActions?: React.ReactNode;
-
-  /**
-   * Rendered on the right side of the controls row, immediately before
-   * the Send / Stop button — the per-session context gauge + cost pill
-   * cluster lives here. Slot keeps Chatbox agnostic of the actual
-   * pills (App.tsx owns the state, Center.tsx threads the node in).
-   * Children are responsible for their own collapse behavior; the
-   * Chatbox surface declares a CSS container so container queries on
-   * descendants can react to the prompt's inline-size.
-   */
-  trailingActions?: React.ReactNode;
-
-  /**
-   * The badge strip (`ConversationBadges`, the kit's `ComposerBadges`): the
-   * band at the top of the tray ring, above the card, the git bar's mirror.
-   * Built by `ConversationComposer`, so a keystroke here never re-renders it.
-   */
-  badges?: React.ReactNode;
-
-  /*
-   * ---- `?` transcript-search mode (TUI parity) --------------------
-   * The Chatbox owns the MODE (entered by typing `?` into an empty
-   * composer, exited by Esc / Backspace-at-start); the host owns the
-   * search ENGINE (`useTranscriptSearch` needs the transcript's scroll
-   * container + events, which live in Center). Query changes stream
-   * out through `onSearchQueryChange` (`null` = mode exited), match
-   * hops go through `onSearchNavigate`, and the counter state comes
-   * back in as `searchStatus`.
-   */
-  /** The search engine's counter while in search mode: matches, whether capped, the active one, whether a query is typed. */
-  searchStatus?: { count: number; capped: boolean; activeIndex: number; hasNeedle: boolean } | null;
-  /** The search query as typed (`null`: search mode exited). */
-  onSearchQueryChange?: (query: string | null) => void;
-  /** Hops to the next (`1`) or previous (`-1`) match. */
-  onSearchNavigate?: (direction: 1 | -1) => void;
-
-  /**
-   * True while the ⌘F overlay is open. The overlay and the composer
-   * mode drive the same document-wide highlight registry, so opening
-   * the overlay force-exits the composer's search mode.
-   */
-  searchOverlayOpen?: boolean;
-
-  /**
-   * Shared-search application (daemon mode) — Center threads the active
-   * session's `search:changed` signals here so the composer's `?` mode
-   * mirrors a search driven from another window. `seq` forces the apply
-   * effect to re-fire on every signal (values alone can repeat).
-   */
-  remoteSearchApply?: { active: boolean; query: string; seq: number } | null;
-  /** Pasted and dropped files become attachments (off: images and long pastes stay inline, drops are ignored). Default true. */
-  attachmentsEnabled?: boolean;
-  /** Inline ghost-text autocomplete (`ComposerHost.autocomplete`). Default false. */
-  inlineAutocomplete?: boolean;
-  /** The next-prompt suggestion as a ghost while the composer is empty (`ComposerHost.suggestions`). Default false. */
-  promptSuggestions?: boolean;
-  /** The composer's scope on the composer bus (`composer-bus.ts`): pushes aimed at it land here. */
-  scopeKey?: string | null;
-  /** The commands' fixed argument values (the command badge, the `/` popover's arguments). */
-  commandArgs?: ComposerCommandArgs;
-  /** Site icons for link badges. Absent: links show the globe. */
-  siteIcons?: ChatSiteIcons;
-  /** The icon and name an attachment tile shows. */
-  attachmentLabel?: AttachmentLabelFn;
-  /** What a text attachment opens as in the lightbox. Default: the kit's `TextPreview`. */
-  textPreview?: ComponentType<TextPreviewSlotProps>;
-  /** Rendered in the tray under the card (the desktop app's git bar). */
-  footer?: ReactNode;
-  /** Classes merged on the root. */
-  className?: string;
-  /** Styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Search-mode tint — the TUI paints its search-mode prompt border with
- * `COLOR.warn`; the GUI uses the themable `--zg-warn` token (tokens.css
- * defaults it to amber, theme packs can override). Shell mode reuses the
- * accent, exactly like the TUI.
- */
-const SEARCH_MODE_COLOR = 'var(--zg-warn)';
-
-/** What the composer's editor-state selector returns for a non-empty draft outside search mode. */
-const DRAFT_HAS_TEXT = '\u0000draft';
-
-/**
- * The desktop app's composer card: the editor, its completions and modes, staged attachments and Send / Stop.
- *
- * @param props - What the composer edits and sends, and its slots.
- */
-export function RichComposer({
-  disabled,
-  folderPath,
-  fileRoot,
-  activeSessionId = null,
-  hostId = null,
-  running = false,
-  onStop,
-  onSend,
-  leadingActions,
-  trailingActions,
-  badges,
-  searchStatus = null,
-  onSearchQueryChange,
-  onSearchNavigate,
-  searchOverlayOpen = false,
-  remoteSearchApply = null,
-  attachmentsEnabled = true,
-  inlineAutocomplete = false,
-  promptSuggestions = false,
-  scopeKey = null,
-  commandArgs,
-  siteIcons,
-  attachmentLabel,
-  textPreview,
-  footer,
-  className,
-  style,
-}: RichComposerProps) {
-  const { completions, autocomplete } = useComposerHost();
-  const labels = useComposerLabels();
-
-  /*
-   * Prompt history — the provider owns the per-session ring (draft
-   * stash, cursor, persistence); the Chatbox owns the keyboard edge
-   * conditions and the "history N/M" indicator.
-   */
-  const history = usePromptHistory();
-  const [historyStatus, setHistoryStatus] = useState<{ position: number; total: number } | null>(null);
-
-  /*
-   * `editorRef` exposes the live TipTap editor to closures captured by
-   * `editorProps.handleKeyDown` (which is evaluated when `useEditor`
-   * builds the editor — at that point the `editor` const itself is still
-   * undefined). The ref is wired below via `useEffect`.
-   */
-  const editorRef = useRef<Editor | null>(null);
-  // TipTap's destroy() nulls the command manager while the ref still holds the
-  // editor: `editor.commands` then throws. Effects reach the editor through this.
-  const liveEditor = () => {
-    const ed = editorRef.current;
-    return ed && !ed.isDestroyed ? ed : null;
-  };
-
-  /*
-   * Completion catalogs (`chatbox/use-composer-sources.ts`): one stable handle
-   * the editor's callbacks read per call (the popover re-renders itself,
-   * `chatbox/mention-popover.ts`). A commands or skills change re-reads the
-   * typed `/name` badges.
-   */
-  const [refreshBadges] = useState(() => () => {
-    const ed = editorRef.current;
-    if (ed && !ed.isDestroyed) refreshBadgeDecorations(ed.view);
-  });
-  const { sources, providers: extensionCompletionProviders } = useComposerSources(
-    folderPath,
-    fileRoot ?? null,
-    hostId,
-    refreshBadges,
-  );
-  const [mentionPopovers] = useState(createPopoverGate);
-  const staged = useStagedAttachments();
-  const {
-    attachments,
-    setAttachments,
-    addFiles: addAttachmentFiles,
-    replace: replaceAttachments,
-    notices: attachmentNotices,
-    exitingIds,
-    removeAttachment,
-    finalizeRemove,
-  } = staged;
-  // Synchronous re-entry guard: React state updates flush async, so two rapid
-  // Enter presses could both pass a state check across the submit-hook await.
-  // A ref claimed synchronously closes that window; `submitting` state only
-  // drives the button's disabled visual.
-  const submittingRef = useRef(false);
-  const [submitting, setSubmitting] = useState(false);
-
-  /*
-   * Composer prompt mode — TUI parity (src/tui/prompt/). `!` typed
-   * into an empty composer enters SHELL mode (the bang is consumed;
-   * submit re-attaches it), `?` enters transcript-SEARCH mode (the
-   * draft drives the host's match engine). Stateful — NOT derived from
-   * the draft text — so the sentinel never sits in the buffer and
-   * pasted/recalled `!cmd` stays literal.
-   *
-   * `modeRef` is the synchronous mirror for the `editorProps.handleKeyDown`
-   * closure (captured at `useEditor` build time) and for same-tick
-   * reads after a flip — the TUI's `setShellModeNow` pattern.
-   */
-  const [composerMode, setComposerMode] = useState<ComposerMode>('normal');
-  const modeRef = useRef<ComposerMode>('normal');
-
-  /*
-   * Edit-less ghost-gate transitions (popover closed, prompt mode
-   * flipped, setting toggled) re-evaluate the ghost through here —
-   * assigned by the ghost lifecycle effect below, no-op until the
-   * editor mounts. The TUI gets this for free from its trigger effect's
-   * dependency list (`useInlineGhostQuery`, src/tui/prompt/use-inline-ghost-query.ts);
-   * the GUI's transaction listener
-   * only sees edits, so the gate-flag owners call this explicitly.
-   */
-  const ghostGateChangedRef = useRef<() => void>(() => {});
-
-  const applyMode = (next: ComposerMode) => {
-    const prev = modeRef.current;
-
-    if (prev === next) {
-      return;
-    }
-
-    modeRef.current = next;
-    setComposerMode(next);
-
-    /*
-     * Search mode is a live wire to the host's engine: entering opens
-     * the (empty) query, leaving sends `null` so the host clears the
-     * highlights + counter.
-     */
-    if (next === 'search') {
-      live.current.onSearchQueryChange?.('');
-    } else if (prev === 'search') {
-      live.current.onSearchQueryChange?.(null);
-    }
-
-    /*
-     * The mode is a ghost-gate input that just flipped WITHOUT an edit
-     * — e.g. shell mode exiting on Backspace-at-start keeps the buffer.
-     * The TUI's trigger effect re-runs on `shellMode`/`searchMode`
-     * (`useInlineGhostQuery`, src/tui/prompt/use-inline-ghost-query.ts)
-     * and re-queries; mirror that here.
-     */
-    ghostGateChangedRef.current();
-  };
-
-  /*
-   * ---- Inline ghost-text autocomplete (TUI parity) -----------------
-   * State is a ref + a ProseMirror plugin, not React state: the ghost
-   * changes per keystroke and is consumed by `editorProps.handleKeyDown`
-   * (captured at `useEditor` build time) and painted by the plugin's
-   * decoration — a re-render would buy nothing. `applyGhost` keeps the
-   * ref and the plugin's display string in lockstep. The canonical
-   * provider engine runs main-side behind `autocomplete:inline`; the
-   * snapshot/patch machinery is the canonical `patchInlineGhost`
-   * (core `zidane/chat/pure`, `inline-ghost.ts`).
-   */
-  const ghostRef = useRef<InlineGhost | null>(null);
-  // Bumped per transaction — an IPC reply whose sequence is stale is
-  // dropped (latest-wins), the renderer half of the TUI's abort-on-edit
-  // (`useInlineGhostQuery`, src/tui/prompt/use-inline-ghost-query.ts).
-  const inlineAutocompleteEnabled = !disabled && inlineAutocomplete;
-  // True only while a prompt-history recall's own setContent/focus
-  // transactions run — browsing history must not pop ghosts, but editing
-  // the recalled text afterwards queries normally.
-  const historyRecallRef = useRef(false);
-
-  // The next-prompt suggestion rides the same ghost plugin while the doc is empty (`chatbox/use-prompt-ghost.ts`).
-  const promptGhost = usePromptGhost(activeSessionId, running, !disabled && promptSuggestions, () =>
-    ghostGateChangedRef.current(),
-  );
-
-  const applyGhost = (next: InlineGhost | null, prompt?: PromptGhostOffer) => {
-    ghostRef.current = next;
-    promptGhost.setPainted(next ? (prompt ?? null) : null);
-
-    const ed = editorRef.current;
-
-    if (!ed || ed.isDestroyed) {
-      return;
-    }
-
-    const display = next ? next.suffixes[next.index] : null;
-
-    if (ghostTextPluginKey.getState(ed.state) !== display) {
-      ed.view.dispatch(ed.state.tr.setMeta(ghostTextPluginKey, display));
-    }
-  };
-
-  // Read by callbacks registered once (editor plugins, IPC listeners, mount-keyed effects): current as of the last commit.
-  const live = useRef({
-    activeSessionId,
-    folderPath,
-    hostId,
-    inlineAutocompleteEnabled,
-    onSearchQueryChange,
-    applyMode,
-    applyGhost,
-  });
-  useLayoutEffect(() => {
-    live.current = {
-      activeSessionId,
-      folderPath,
-      hostId,
-      inlineAutocompleteEnabled,
-      onSearchQueryChange,
-      applyMode,
-      applyGhost,
-    };
-  });
-  // Live controller handle for the remote-mirror path — its `hasPending()`
-  // is the "this window is the active typist" test.
-  const ghostControllerRef = useRef<GhostController | null>(null);
-
-  const [isDragOver, setIsDragOver] = useState(false);
-  const lightbox = useLightbox();
-  const openLightbox = (id: string, origin: HTMLElement) => {
-    const items = attachmentLightboxItems(attachments, textPreview);
-    lightbox.open(
-      items,
-      items.findIndex((item) => item.key === id),
-      origin,
-    );
-  };
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- stable handles (refs, built-once sources and host); the effect keys on what it re-runs for
-  const skillsProvider = useMemo(() => createSkillsCompletionProvider({ getCatalog: () => sources.skills() }), []);
-
-  const editor = useComposerEditor({
-    disabled,
-    folderPath,
-    extensionCompletionProviders,
-    sources,
-    skillsProvider,
-    mentionPopovers,
-    promptGhost,
-    editorRef,
-    modeRef,
-    ghostRef,
-    historyRecallRef,
-    ghostGateChangedRef,
-    attachmentsEnabled,
-    history,
-    activeSessionId,
-    hostId,
-    // Declared below: it reads the editor.
-    send: () => send(),
-    onSearchNavigate,
-    applyMode,
-    applyGhost,
-    addFiles: addAttachmentFiles,
-    setHistoryStatus,
-    commandArgs,
-  });
-
-  /*
-   * Mirror `editor` into `editorRef` so the `editorProps.handleKeyDown`
-   * closure can reach the live TipTap commands API (e.g. for the
-   * history-cycle setContent). `useEditor` returns a fresh instance
-   * when its deps change, so we re-pin each render.
-   */
-  useEffect(() => {
-    editorRef.current = editor;
-  }, [editor]);
-
-  // Links and a leading command's `/name` read as badges while typed (see badge-decorations.ts).
-  useEffect(() => {
-    if (!editor || editor.isDestroyed) {
-      return;
-    }
-
-    const scope = () => ({ cwd: live.current.folderPath ?? '', hostId: live.current.hostId });
-    editor.registerPlugin(
-      createBadgeDecorationsPlugin(
-        {
-          isCommand: (name) => findCommand(sources.commands.peek(), name) !== undefined,
-          args: (name) => commandArgs?.args(scope(), name) ?? NO_ARGS,
-          request: (name) => commandArgs?.request(scope(), name),
-          ...(commandArgs ? { subscribe: (listener: () => void) => commandArgs.subscribe(listener) } : {}),
-          isSkill: (name) => sources.skills().some((skill) => skill.name === name),
-        },
-        siteIcons,
-      ),
-    );
-
-    return () => {
-      if (!editor.isDestroyed) {
-        editor.unregisterPlugin(badgeDecorationsKey);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- stable handles (refs, built-once sources and host); the effect keys on what it re-runs for
-  }, [editor]);
-
-  const ghost: GhostLifecycle = {
-    editor,
-    editorRef,
-    live,
-    autocomplete,
-    inlineAutocompleteEnabled,
-    mentionPopovers,
-    modeRef,
-    historyRecallRef,
-    ghostRef,
-    promptGhost,
-    ghostGateChangedRef,
-    ghostControllerRef,
-  };
-  useGhostLifecycle(ghost);
-
-  /*
-   * Fresh session, fresh navigation: a cursor parked by an earlier
-   * visit shouldn't make the first ↑ resume mid-ring, and the "history
-   * N/M" indicator belongs to the session it was navigating.
-   */
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- resets with the scope it keys on
-    setHistoryStatus(null);
-
-    if (activeSessionId) {
-      history.reset(activeSessionId);
-    }
-  }, [activeSessionId, history]);
-
-  const send = () => {
-    if (!editor) {
-      return;
-    }
-
-    /*
-     * Serialize through the JSON walker rather than `getText()` (which drops
-     * the mention nodes' ids), with ONE newline per line
-     * break: the prompt is sent, stored, shown and recalled exactly as it
-     * looks in the composer. The markdown paragraph gap (`\n\n` per block)
-     * doubled every line break and tripled every blank line in the
-     * transcript, the TUI and ↑ history recall.
-     */
-    const raw = editorJsonToMarkdown(editor.getJSON() as JsonNode, { blockGap: '\n' }).trim();
-
-    /*
-     * Shell mode re-attaches the consumed bang so the submit contract
-     * stays `!cmd` end to end (Center's handleSend + prompt history —
-     * TUI `submit` in src/tui/prompt/use-composer-actions.ts). A blank
-     * shell command never submits,
-     * even with attachments staged; search mode never submits at all.
-     */
-    const text = composeSubmitText(modeRef.current, raw);
-
-    if (text === null || (!text && attachments.length === 0) || disabled || submittingRef.current) {
-      return;
-    }
-
-    // Submit leaves shell mode — the next prompt starts normal (TUI
-    // `submit` in src/tui/prompt/use-composer-actions.ts).
-    live.current.applyMode('normal');
-
-    const submitted = attachments;
-
-    // Clear the composer optimistically: the box empties on the same tick the
-    // user hits Enter, and a second Enter can't re-submit the same text while
-    // the submit-hook IPC is in flight.
-    editor.commands.clearContent();
-    replaceAttachments([]);
-    mirror.dropStash();
-    // Submitting exits history navigation (the host's `push` resets the
-    // provider cursor); drop the indicator on the same tick.
-    setHistoryStatus(null);
-    dispatch(text, submitted);
-  };
-
-  /*
-   * A prompt sent from elsewhere (Continue / Retry, the palette): the same
-   * dispatch as Enter, without reading or clearing the composer.
-   */
-  const sendText = (raw: string) => {
-    const text = raw.trim();
-    if (!text || disabled || submittingRef.current) {
-      return;
-    }
-    dispatch(text, [], { keepDraft: true });
-  };
-
-  const dispatch = (text: string, submitted: typeof attachments, opts?: { keepDraft?: boolean }) => {
-    /*
-     * Submit-time skill activation. `parseReferences` runs against the
-     * editor's rendered plain text — TipTap mention nodes serialize back
-     * to `/<name>` / `@<path>` / `#<chat>`, matching the chat providers'
-     * reference grammars. Same code path the TUI calls before `agent.run()`.
-     */
-    const references = skillsProvider.parseReferences(text, { text, cursor: text.length });
-    const skills = uniqueSkillNamesFromReferences(references);
-    mirror.promoteNewChat(live.current.activeSessionId === null);
-    submittingRef.current = true;
-    setSubmitting(true);
-
-    // Run extension submit hooks (resolveReferences/onSubmit) before the turn
-    // is dispatched so their side effects land first, then send.
-    void (async () => {
-      try {
-        if (folderPath !== null) {
-          await completions?.submit?.({ cwd: folderPath, hostId }, text, text.length).catch(() => undefined);
-        }
-        await onSend(text, submitted, skills, opts);
-      } catch {
-        /*
-         * Not sent (the host says why, e.g. a new chat's server went
-         * offline): the box was cleared on Enter, so put the prompt back,
-         * unless something was typed since or it came from elsewhere.
-         */
-        mirror.promoteNewChat(false);
-        const ed = editorRef.current;
-        if (!opts?.keepDraft && ed && !ed.isDestroyed && serializeDraftText(ed) === '') {
-          const draft = unsentDraft(text);
-          mirror.applyDraft(draft.text, draft.shell);
-          setAttachments((current) => (current.length === 0 ? [...submitted] : current));
-        }
-      } finally {
-        submittingRef.current = false;
-        setSubmitting(false);
-      }
-    })();
-  };
-
-  /*
-   * Live plain-text mirror of the draft. TipTap v3's `useEditor` does
-   * NOT re-render the host component on transactions (its internal
-   * `shouldRerenderOnTransaction` selector short-circuits to `null`
-   * when the option is unset), so render-time `editor.getText()` reads
-   * — as a draft-derived `hasContent` or shell flag would do — only
-   * ever see the state from the LAST unrelated re-render, so the send
-   * button and the `!` affordance would look dead while typing.
-   * `useEditorState` subscribes to transactions and re-renders
-   * exactly when the selected string changes.
-   *
-   * Outside search mode only emptiness is selected (`DRAFT_HAS_TEXT`), so
-   * the composer does not re-render on every keystroke for a send button
-   * that only cares whether there is anything to send. Search mode selects
-   * the text itself (it drives the match engine per edit).
-   */
-  const searchingDraft = composerMode === 'search';
-  const editorPlainText =
-    useEditorState({
-      editor,
-      /*
-       * Defensive beyond the null check: on the very first render the
-       * editor INSTANCE can exist while its state/schema is still being
-       * constructed — `getText()` then dereferences a null schema inside
-       * `getTextSerializersFromSchema` and the whole app white-screens
-       * (this exact crash shipped once; caught by the e2e launch test).
-       * A mid-construction snapshot is worthless anyway: the store
-       * notifies again the moment the editor is ready.
-       */
-      selector: (ctx) => {
-        const ed = ctx.editor;
-
-        if (!ed || ed.isDestroyed) {
-          return '';
-        }
-
-        try {
-          const text = ed.getText({ blockSeparator: '\n' });
-          if (searchingDraft) return text;
-          return text.trim().length > 0 ? DRAFT_HAS_TEXT : '';
-        } catch (error) {
-          /*
-           * Once-latched: the selector runs per transaction, so an
-           * editor whose serialization is persistently broken would
-           * otherwise spam a warn per keystroke — but swallowing
-           * silently forever hides the breakage (send button dead with
-           * no trace). One warning is enough to diagnose.
-           */
-          if (!warnedEditorGetText) {
-            warnedEditorGetText = true;
-            console.warn('[chatbox] editor.getText() threw; treating the draft as empty.', error);
-          }
-
-          return '';
-        }
-      },
-    }) ?? '';
-
-  const hasContent = editorPlainText.trim().length > 0 || attachments.length > 0;
-  const canSend = !disabled && !submitting && hasContent && composerMode !== 'search';
-
-  const shellMode = !disabled && composerMode === 'shell';
-  const searchMode = !disabled && composerMode === 'search';
-
-  /*
-   * Search mode is a live wire: every draft edit re-drives the host's
-   * match engine (TUI parity — `syncBuffer` pushes `onSearchQueryChange`
-   * per keystroke, src/tui/prompt/use-sync-buffer.ts).
-   */
-  useEffect(() => {
-    if (composerMode === 'search') {
-      live.current.onSearchQueryChange?.(editorPlainText);
-    }
-  }, [composerMode, editorPlainText]);
-
-  /*
-   * Mode flips happen on consumed keystrokes (no transaction), so the
-   * Placeholder decoration — recomputed only per state update — would
-   * keep the previous copy. A no-op dispatch repaints it.
-   */
-  useEffect(() => {
-    const ed = editorRef.current;
-
-    if (ed && !ed.isDestroyed) {
-      ed.view.dispatch(ed.state.tr);
-    }
-  }, [composerMode]);
-
-  /*
-   * Session switch tears the mode down: a shell/search mode armed on
-   * one conversation must not leak into the next (the TUI's modes are
-   * per-prompt-block state with the same lifetime). Search also drops
-   * its query text — it belongs to the previous transcript.
-   */
-  useEffect(() => {
-    if (modeRef.current === 'search') {
-      liveEditor()?.commands.clearContent(true);
-    }
-
-    live.current.applyMode('normal');
-  }, [activeSessionId]);
-
-  /*
-   * The ⌘F overlay owns the same document-wide highlight registry —
-   * opening it while the composer is searching would leave two writers
-   * fighting per stream tick. The overlay wins; the composer exits.
-   */
-  useEffect(() => {
-    if (searchOverlayOpen && modeRef.current === 'search') {
-      liveEditor()?.commands.clearContent(true);
-      live.current.applyMode('normal');
-    }
-  }, [searchOverlayOpen]);
-
-  // The shared per-session draft and the buffers kept across session switches (`chatbox/use-draft-mirror.ts`).
-  const mirror = useDraftMirror({
-    editor,
-    editorRef,
-    modeRef,
-    composerMode,
-    activeSessionId,
-    staged,
-    applyMode,
-    resetHistoryStatus: () => setHistoryStatus(null),
-  });
-
-  // Far-away producers (review comments, palette prompts, Edit message) push into this composer.
-  useComposerBus(scopeKey, {
-    attachment: staged.add,
-    mention: (path) => {
-      liveEditor()
-        ?.chain()
-        .focus('end')
-        .insertContent([
-          { type: 'mention', attrs: { id: path, label: basename(path) } },
-          { type: 'text', text: ' ' },
-        ])
-        .run();
-    },
-    insert: (text) => {
-      liveEditor()?.chain().focus('end').insertContent(text).run();
-    },
-    focus: () => {
-      liveEditor()?.commands.focus('end');
-    },
-    // Sent as is, beside the draft: whatever the user was typing stays put.
-    prompt: sendText,
-    // The draft is replaced, not merged.
-    draft: ({ text, attachments: next }) => {
-      const ed = liveEditor();
-      if (!ed) return;
-      live.current.applyMode('normal');
-      ed.chain().setContent(draftTextToDocJson(text), { emitUpdate: true }).focus('end').run();
-      replaceAttachments([...next]);
-    },
-  });
-
-  useSharedGhost(ghost);
-
-  /*
-   * Shared-search application (daemon mode). Mode + buffer are set
-   * directly (NOT via `applyMode`) so no `onSearchQueryChange` fires —
-   * Center already holds the remote value; re-emitting the transient ''
-   * from `applyMode('search')` would publish it back and clobber the
-   * remote query. The live-wire effect above re-emits the final query
-   * after `setContent`, which Center's echo guard absorbs.
-   */
-  useEffect(() => {
-    if (!remoteSearchApply) {
-      return;
-    }
-
-    const ed = editorRef.current;
-
-    if (!ed || ed.isDestroyed) {
-      return;
-    }
-
-    if (remoteSearchApply.active) {
-      if (modeRef.current !== 'search') {
-        modeRef.current = 'search';
-        setComposerMode('search');
-      }
-
-      if (ed.getText({ blockSeparator: '\n' }) !== remoteSearchApply.query) {
-        ed.commands.setContent(plainTextToDocJson(remoteSearchApply.query), { emitUpdate: true });
-      }
-    } else if (modeRef.current === 'search') {
-      ed.commands.clearContent(true);
-      modeRef.current = 'normal';
-      setComposerMode('normal');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed by seq: values alone can repeat across signals.
-  }, [remoteSearchApply?.seq]);
-
-  const onPlusClick = () => fileInputRef.current?.click();
-
-  const onFilesPicked = (event: ChangeEvent<HTMLInputElement>) => {
-    /*
-     * The picker offers every file (no `accept`): what can attach is
-     * `readAttachment`'s call, the same for paste and drop, and a refused
-     * file says why in the card. Images become `PromptImagePart`s, PDFs
-     * and text `PromptDocumentPart`s (the engine's media-type branch).
-     */
-    const picked = Array.from(event.target.files ?? []);
-    addAttachmentFiles(picked);
-    event.target.value = '';
-  };
-
-  /*
-   * A click on the chatbox's empty surface focuses the composer. Clicks
-   * that land on a control (a pill, a button, a popover's search field)
-   * belong to that control: focusing the composer from their bubbling click
-   * stole focus from, e.g., the model picker's search right after it opened.
-   */
-  const focusEditor = (event: ReactMouseEvent) => {
-    const target = event.target as HTMLElement | null;
-    if (
-      target?.closest('button, a, input, textarea, select, [role="dialog"], [role="listbox"], [contenteditable="true"]')
-    )
-      return;
-    editor?.commands.focus();
-  };
-
-  return (
-    /*
-     * The composer is a raised card set in a tray (gui/CLAUDE.md "Surfaces").
-     * The tray's 4px ring comes out of the footer's budget (Center.tsx: px-5,
-     * pb-2), so the card keeps its size, its edges on the transcript column,
-     * and the + button's center on the sidebar footer separator (H − 37).
-     * Radius 28 = the card's 24 + the 4px ring: concentric.
-     */
-    <div
-      className={`zg-chatbox-surface zg-tray relative rounded-[28px] p-1${className ? ` ${className}` : ''}`}
-      style={style}
-    >
-      {badges}
-      <input ref={fileInputRef} type="file" multiple onChange={onFilesPicked} className="hidden" />
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- a click on the card's empty surface focuses the editor, which has its own keyboard */}
-      <div
-        onClick={focusEditor}
-        onDragOver={(event) => {
-          event.preventDefault();
-
-          // Any file: the drop decides what attaches. A file's type is often empty mid-drag.
-          if (attachmentsEnabled && Array.from(event.dataTransfer.types).includes('Files')) {
-            setIsDragOver(true);
-          }
-        }}
-        onDragLeave={(event) => {
-          if (event.currentTarget === event.target) {
-            setIsDragOver(false);
-          }
-        }}
-        onDrop={(event) => {
-          event.preventDefault();
-          setIsDragOver(false);
-
-          if (!attachmentsEnabled) {
-            return;
-          }
-
-          addAttachmentFiles(Array.from(event.dataTransfer.files));
-        }}
-        /*
-         * Vertical padding is INTENTIONALLY asymmetric (pt-4/pb-2 = 16/8px):
-         *   1. The controls row mixes heights (24px pills, 30px scope toggle,
-         *      32px + / send circles) all centered on one axis via
-         *      `items-center` on the row and both subgroups. The row's 32px
-         *      box is set by the two circles, but its dominant visual mass —
-         *      the 24px pills — floats 4px above the box bottom. A symmetric
-         *      pb-3 stacked 12px under that built-in optical padding, so the
-         *      bottom band read 13–17px against a crisp 13px above the
-         *      cap-trimmed editor text (measured in an 800px window: text top
-         *      at card+13, pill bottoms at card_bottom−17) — bottom-heavy.
-         *      pb-2 puts the pill bottoms 13px from the border, matching the
-         *      13px the text then sat below the top (pt-3). pt-4 leaves
-         *      ~17px above the text on purpose: a roomier prompt; the bottom
-         *      band keeps its 13px.
-         *   2. Concentric corner nesting (send circle ⇄ card corner): the
-         *      card radius is rounded-3xl (24px) so the corner arc's center
-         *      lands 1.4px from the send circle's center — the circle inset
-         *      is 8px content + 1px border = 9px on BOTH axes (pb-2 below;
-         *      px-1 + the controls row's pr-1 on the right). Measured gaps
-         *      button-edge → outer card border: right 9.0, bottom 9.0,
-         *      45° diagonal 9.4 — uniform within ±1px, so the circle reads
-         *      as following the curve. At rounded-2xl (16px) the
-         *      gaps would be 5 / 9 / 10.05 (the unnested look) and the only
-         *      uniform inset is ≈2.4px — too cramped. Rule: concentric when
-         *      R ≈ button inset(outer) + button radius (= 9 + 16 = 25 here;
-         *      24 is the nearest Tailwind step). Re-measure if either moves.
-         *   3. Cross-app alignment invariant: with the outer footer's pb-3
-         *      (12px, Center.tsx) + 1px card border + 8px here + 16px half
-         *      of the 32px + button, the + button's center lands at
-         *      windowH − 37 — exactly the sidebar footer's top separator
-         *      (28px h-7 row + 2×4px py-1 + 1px border-t = 37px,
-         *      Footer.tsx). Both are bottom-anchored fixed heights, so the
-         *      equality holds at every window size. If you change this
-         *      padding, retune Footer.tsx's py to keep separator-y ==
-         *      plus-center-y.
-         */
-        className="zg-raised relative rounded-3xl border pt-4 pb-2 px-1 flex flex-col cursor-text"
-        // Lifts one step while a run streams; settles when it ends.
-        data-live={running ? '' : undefined}
-        style={
-          {
-            /*
-             * Mode border repaint — the TUI's visual contract for prompt
-             * modes (`PromptBlock`, src/tui/prompt/prompt-block.tsx):
-             * shell = accent, search = warn (`--zg-warn`). Drag-over keeps accent.
-             */
-            borderColor:
-              isDragOver || shellMode ? 'var(--zg-accent)' : searchMode ? SEARCH_MODE_COLOR : 'var(--zg-hairline)',
-            // Transitions live on `.zg-raised` (primitives.css) so motion-off can stop them.
-            // ONE structural knob for the composer text column — consumed by
-            // .zg-editor-scroll's padding-inline (rich-composer.css). See the editor
-            // wrapper comment below for the alignment contract.
-            '--zg-composer-inset': '12px',
-          } as CSSProperties
-        }
-      >
-        {/*
-         * Always mounted — the collapse animation handles both the row's
-         * inner content (grid-template-rows) and its own outer spacing
-         * (margin-bottom), so unmounting on `attachments.length === 0`
-         * would yank the 12px gap and produce a visible jump on
-         * removing the LAST attachment. The CSS hides it at zero
-         * height + zero margin when empty.
-         */}
-        <AttachmentNotices notices={attachmentNotices.notices} onDismiss={attachmentNotices.dismiss} />
-        <AttachmentRow
-          attachments={attachments}
-          exitingIds={exitingIds}
-          onRemove={removeAttachment}
-          onExited={finalizeRemove}
-          onOpenLightbox={openLightbox}
-          attachmentLabel={attachmentLabel}
-        />
-        {/*
-         * Height-capped scroll region — the editor grows with content up
-         * to `.zg-editor-scroll`'s max-height, then scrolls internally
-         * (TUI parity: the textarea grows to MAX_CONTENT_LINES then
-         * scrolls, `PromptBlock` in src/tui/prompt/prompt-block.tsx). The
-         * cap lives on this wrapper
-         * (not `.ProseMirror`) so ProseMirror's own scrollIntoView finds
-         * a scrollable ANCESTOR and keeps the caret visible while typing
-         * at the cap. Attachment row + controls row are siblings outside
-         * the region, so the card's bottom-band geometry (separator ==
-         * plus-center == H−37, concentric corner nesting — see the card
-         * comment above) is unaffected by content height.
-         */}
-        {/* Text inset comes from --zg-composer-inset (declared on the card,
-            consumed in rich-composer.css) — ONE structural knob placing the editor
-            text's left edge against the + button's glyph column (8px sat
-            exactly on the glyph; 12px sits 4px inside it, for room). The card's own
-            px-1 is dictated by the send-button corner nesting; changing that
-            or the button width means retuning the variable in ONE place. */}
-        {/* min-h-12 (two leading-6 lines even when empty) sits here, not on .ProseMirror: its
-            overflow-clip must hug the trimmed text so the line-tall caret Chrome draws after a
-            badge is clipped to the plain caret's height. */}
-        <div className="zg-editor-scroll min-w-0 min-h-12">
-          <EditorContent editor={editor} />
-        </div>
-        {/*
-         * One line at every width (`zg-chatbox` container tiers in
-         * composer.css): the left group shrinks, its names truncating; the
-         * right group (status, a draft's pickers, send) never shrinks, its
-         * parts fold instead.
-         */}
-        <div className="zg-chatbox-controls flex items-center justify-between gap-2 mt-3 min-w-0">
-          <div className="flex items-center gap-1 flex-1 min-w-0">
-            <PlusButton onClick={onPlusClick} />
-            {leadingActions}
-            {shellMode && (
-              <span className={MODE_CHIP} style={modeChipTone('var(--zg-accent)')}>
-                <span className="i-ph-terminal-window text-zg-meta" />
-                {labels.modeShell}
-              </span>
-            )}
-            {searchMode && (
-              <span className={MODE_CHIP} style={modeChipTone(SEARCH_MODE_COLOR)}>
-                <span className="i-ph-magnifying-glass text-zg-meta" />
-                {labels.modeSearch}
-                {searchStatus?.hasNeedle && (
-                  <span className="opacity-90">
-                    {searchStatus.count === 0
-                      ? '0/0'
-                      : `${searchStatus.activeIndex + 1}/${searchStatus.capped ? `${searchStatus.count}+` : searchStatus.count}`}
-                  </span>
-                )}
-              </span>
-            )}
-            {historyStatus && (
-              <span className={MODE_CHIP}>
-                <span className="i-ph-clock text-zg-meta" />
-                {labels.historyPosition(historyStatus.position, historyStatus.total)}
-              </span>
-            )}
-          </div>
-          {/*
-           * pr-1 equalizes the send button's right inset with its bottom
-           * one (4px px-1 + 4px here = 8px content, 9px to the outer
-           * border) — the concentric-nesting invariant documented on the
-           * card's padding comment above. Horizontal only: the row's
-           * shared vertical center axis is untouched.
-           */}
-          <div className="flex items-center gap-2 shrink-0 pr-1">
-            {trailingActions}
-            <SendStopButton running={running && Boolean(onStop)} canSend={canSend} onSend={send} onStop={onStop} />
-          </div>
-        </div>
-      </div>
-      {/* The tray showing under the card (the desktop app: where the checkout stands). */}
-      {footer}
-      {lightbox.element}
-    </div>
-  );
-}