@kortix/ui 0.0.0-stage → 0.14.4

package/dist/session/composer/composer.js

@@ -0,0 +1,1426 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { errorToast } from '../../primitives/toast.js';
+import { useTranslations } from '../../i18n/index.js';
+import { cn } from '../../lib/utils.js';
+import { isImageFile } from '../../internal/lib/utils/file-utils.js';
+import { usePromptAttachments, useRuntimeSessions } from '@kortix/sdk/react';
+import { newPastedContentId, splitPastedContent, trimPastedText } from '../../_vendor/kortix-shared.js';
+import { memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { extractClipboardFiles } from './clipboard-files.js';
+import { mergeFailedSubmissionFiles } from './composer-draft-recovery.js';
+import { resolveComposerResetOnSend } from './composer-reset.js';
+import { disownSentAttachmentPreviews, revokeUnsentPreview } from './sent-attachment-previews.js';
+import { isModelRequiredButUnavailable, NO_MODEL_AVAILABLE_ACTION_MESSAGE, NO_MODEL_AVAILABLE_MESSAGE, resolveAvailableSelectedModel, modelRejectingAttachedImages, } from '../models/model-availability.js';
+import { useModelConnectionGate } from '../models/use-model-connection-gate.js';
+import { NO_AGENT_ACCESS_HINT, NO_AGENT_ACCESS_LABEL } from './composer-agent-access.js';
+import { useComposerDropZone } from './composer-drop-zone.js';
+import { useComposerEscapeStop } from './hooks/use-composer-escape-stop.js';
+import { finishedDraftUploads, keepUnsentUploadFile, restoreDraftUploads } from './draft/draft-uploads.js';
+import { useComposerDraft } from './draft/use-composer-draft.js';
+import { commandBlocker, sendBlocker, sendBlockerMessage } from './send-blockers.js';
+import { ComposerAboveCard, } from './ComposerAboveCard.js';
+import { ComposerCard } from './ComposerCard.js';
+import { handleBillingError } from '../../internal/lib/error-handler.js';
+import { attachedFileUploadId, attachmentsBlockSend, captureAttachmentSubmission, dispatchLatched, planAttachmentReplacement, refusedFilesToast, runComposerSend, heldTraySizes, splitComposerFiles, stageComposerFiles, takeNewBillingRefusals, } from './attachment-submission.js';
+import { draftWillRunCommand, planCommandAttachments, planUnresolvedCommandChip, readCommandChipLabel, } from './command-attachments.js';
+import { appendComposerQuote, classifyPaste, isUndoKey, popPasteUndo, extractReplyQuotes, nextPastedTextFileName, planDraftSubmission, planFailedSendRecovery, planPrefillMerge, planQuoteRequests, removeComposerQuote, resolveEditorPlaceholder, restoreComposerQuotes, shouldApplyPrefill, shouldSubmitPrefill, textToDocument, } from './composer-logic.js';
+import { getContextUsage } from './context-ring.js';
+import { useComposerFocus } from './hooks/use-composer-focus.js';
+import { useMenuRevalidation } from './hooks/use-file-search.js';
+import { controlToOpenFor, localizedSlashActions } from './menus/slash-actions.js';
+import { createSubmitLatch } from './submit-latch.js';
+/**
+ * The composer's outer shell — max width, centering, and the horizontal gutter
+ * everything in the composer (notice bar, card, under-row, model connection
+ * bar) is measured from.
+ *
+ * The BASE gutter is `px-4` and it carries no breakpoint, deliberately. This
+ * was `px-2 sm:px-0`, and `sm:` is a VIEWPORT query answering a CONTAINER
+ * question. This element's width is set by the session layout — sidebar,
+ * action-panel column, and the browser/terminal/files detail panel — never by
+ * the window:
+ *
+ *  - Action panel or a detail tab open on a 1512px screen: the viewport is
+ *    still ≥640px, so `sm:px-0` zeroed the gutter while the chat column was
+ *    only ~600px wide. The column is narrower than `max-w-210`, so `mx-auto`
+ *    has no slack to donate and the card sat flush against the panel divider.
+ *  - Everything closed: the column grows past `max-w-210`, `mx-auto` produces
+ *    slack on both sides, and the gutter appears to "work" again.
+ *
+ * Same class, opposite result, decided by a query that cannot see the panel —
+ * which is exactly the "sometimes there's padding, sometimes there isn't" bug.
+ * A constant gutter is correct in all of them: when the column is wide the
+ * 16px is invisible inside the centering slack, and when it is narrow it is
+ * the only thing keeping the card off the edge.
+ *
+ * 16px is not arbitrary — it is the transcript's own gutter (`session-chat.tsx`:
+ * `mx-auto w-full max-w-3xl min-w-0 px-4 pt-6`). Whenever the column is
+ * narrower than either max-width — every panel-open case — the card's edges
+ * land on exactly the same rails as the messages above it.
+ *
+ * The gutter is equal on both sides. It used to carry `md:pr-1`, a right-side
+ * trim against the collapsed action-panel chevron rail, which then took ~37px
+ * of the row's width. That rail now takes no width (`COLLAPSED_RAIL_OFFSET` in
+ * `session-action-panel-column.tsx`), so the trim only shifted the card 5.5px
+ * right of center. A breakpoint may never ZERO this gutter — zero is what let
+ * the card touch the panel divider, and `composer-underbar.test.tsx` guards
+ * exactly that line.
+ *
+ * Do not add breakpoints. If this needs to respond to width,
+ * it has to be a container query on the chat column, not a media query — the
+ * media query cannot see the panel, which is the whole reason it broke before.
+ */
+export const COMPOSER_SHELL_CLASS = 'relative z-10 mx-auto w-full max-w-210 shrink-0 px-4';
+/**
+ * The inset strip above the card that hosts `inputSlot` — the queued messages,
+ * the approval notice, the permission notice, and `QuestionPrompt`.
+ *
+ * `items-center` is load-bearing and it BITES: a flex column sizes each child
+ * to its content unless the child says otherwise, so anything mounted here that
+ * omits `w-full` renders as a narrow box floating in the middle of the strip,
+ * with a width that tracks whatever text happens to be inside it. Exported so
+ * the invariant is pinned by a test (composer-input-slot.test.tsx) rather than
+ * rediscovered by the next notice that gets added.
+ */
+export const COMPOSER_INPUT_SLOT_CLASS = 'bg-sidebar border-border flex w-full flex-col items-center gap-2 rounded-t-xl border border-b-0 p-1 empty:hidden';
+/** Stable empty defaults so a fresh `[]` per render never breaks memoization. */
+export const EMPTY_AGENTS = [];
+export const EMPTY_COMMANDS = [];
+export const EMPTY_MODELS = [];
+export const EMPTY_VARIANTS = [];
+export const EMPTY_SLASH_FILES = [];
+const NO_QUOTE_REQUESTS = [];
+/** Stable identities for the command-chip subscription below. */
+const NO_SUBSCRIPTION = () => { };
+const NO_COMMAND_CHIP = () => null;
+const EMPTY_DOCUMENT = textToDocument('');
+function setDocumentWithoutStealingFocus(handle, doc) {
+    if (!handle)
+        return;
+    const el = handle.getElement();
+    const wasFocused = !!el && (document.activeElement === el || el.contains(document.activeElement));
+    const previouslyFocused = wasFocused ? null : document.activeElement;
+    handle.setDocument(doc);
+    if (!wasFocused) {
+        previouslyFocused?.focus?.();
+    }
+}
+function ComposerImpl(props) {
+    const { onSend, promptAttachments: hostPromptAttachments, isBusy = false, sessionWorking, runtimeReady = true, onStop, stopDisabled = false, canStop = true, isSending = false, rewind, agents = EMPTY_AGENTS, selectedAgent = null, onAgentChange, noAccessibleAgents = false, commands = EMPTY_COMMANDS, 
+    /** Whether the live command list has EVER resolved — see `planUnresolvedCommandChip`. */
+    commandsResolved = false, slashFiles = EMPTY_SLASH_FILES, onCommand, onHoldCommand, models = EMPTY_MODELS, selectedModel = null, onModelChange, modelDefaultControls, variants = EMPTY_VARIANTS, selectedVariant = null, onVariantChange, messages, sessionId, projectId, draftScope = null, draftActive = true, disabled = false, notice = null, onNoticeRetry, clearOnSend = true, modelRequired = false, modelsLoading = false, autoFocus, placeholder = 'Ask anything…', hint, onArrowUpAtStart, prefill = null, onPrefillApplied, attachRequestId = null, providers, onContextClick, onCompactClick, inputSlot, toolbarSlot, underbarPlacement = 'below', slashMenuPlacement = 'above', cardClassName, quoteRequests = NO_QUOTE_REQUESTS, onQuoteRequestsApplied, lockForQuestion = false, lockForApproval = false, onCustomAnswer, questionButtonLabel = null, questionCanAct = true, onQuestionAction, escCount = 0, parentClassName, } = props;
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tModelGate = useTranslations('sessionUi.modelGate');
+    const tComposerAttachments = useTranslations('hardcodedUi.composerAttachments');
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const tThreads = useTranslations('threads');
+    const dockId = `composer-slash-dock-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+    const [attachedFiles, setAttachedFiles] = useState([]);
+    // Synchronous mirror of `attachedFiles`, for the one reader that cannot
+    // wait for a React flush: the submit latch's stash (see `handleSubmit`).
+    const attachedFilesRef = useRef([]);
+    useEffect(() => {
+        attachedFilesRef.current = attachedFiles;
+    }, [attachedFiles]);
+    /**
+     * The reply quotes, in send order — the card above the input. Not part of
+     * the editor document: a send prepends them (`planDraftSubmission`).
+     * `quotesRef` is the synchronous mirror, for the same reader
+     * `attachedFilesRef` exists for, and `setQuoteList` writes both.
+     */
+    const [quotes, setQuotes] = useState([]);
+    const quotesRef = useRef([]);
+    const nextQuoteIdRef = useRef(0);
+    const setQuoteList = useCallback((update) => {
+        const next = update(quotesRef.current);
+        if (next === quotesRef.current)
+            return;
+        quotesRef.current = next;
+        setQuotes(next);
+    }, []);
+    /** Append quote texts, each with a fresh local id. Blank and repeated texts are skipped. */
+    const appendQuoteTexts = useCallback((texts) => {
+        setQuoteList((current) => texts.reduce((list, text) => {
+            const next = appendComposerQuote(list, text, `quote-${nextQuoteIdRef.current + 1}`);
+            if (next !== list)
+                nextQuoteIdRef.current += 1;
+            return next;
+        }, current));
+    }, [setQuoteList]);
+    /** Put quotes that left with a draft back at the head of the list (`restoreComposerQuotes`). */
+    const restoreQuoteTexts = useCallback((texts) => {
+        setQuoteList((current) => restoreComposerQuotes(current, texts, () => `quote-${++nextQuoteIdRef.current}`));
+    }, [setQuoteList]);
+    const handleRemoveQuote = useCallback((id) => setQuoteList((current) => removeComposerQuote(current, id)), [setQuoteList]);
+    const quoteTexts = useMemo(() => quotes.map((quote) => quote.text), [quotes]);
+    /**
+     * The pasted-text tiles, in send order. Like the quotes, not part of the
+     * editor document: a send writes each as a `<pasted_content>` block ahead of
+     * the typed text (`planDraftSubmission`). `pastesRef` is the synchronous
+     * mirror, and `setPasteList` writes both.
+     */
+    const [pastes, setPastes] = useState([]);
+    const pastesRef = useRef([]);
+    const setPasteList = useCallback((update) => {
+        const next = update(pastesRef.current);
+        if (next === pastesRef.current)
+            return;
+        pastesRef.current = next;
+        setPastes(next);
+    }, []);
+    /** Put tiles that left with a draft back at the head of the row, skipping ids already there. */
+    const restorePastes = useCallback((restored) => {
+        if (restored.length === 0)
+            return;
+        setPasteList((current) => [
+            ...restored,
+            ...current.filter((paste) => !restored.some((r) => r.id === paste.id)),
+        ]);
+    }, [setPasteList]);
+    const removePaste = useCallback((id) => setPasteList((current) => current.filter((paste) => paste.id !== id)), [setPasteList]);
+    const quoteListLabels = useMemo(() => ({
+        count: tThreads('quoteCount', { count: quotes.length }),
+        expand: tThreads('expandQuotes'),
+        collapse: tThreads('collapseQuotes'),
+        remove: tHardcodedUi.raw('componentsSessionSessionChatInput.removeQuoteAriaLabel'),
+    }), [tThreads, tHardcodedUi, quotes.length]);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [isEmpty, setIsEmpty] = useState(true);
+    const [menuOpen, setMenuOpen] = useState(false);
+    useMenuRevalidation(menuOpen, projectId);
+    const fileInputRef = useRef(null);
+    const dragDepthRef = useRef(0);
+    const savedDocBeforeQuestionRef = useRef(null);
+    // A host that owns the controller leaves this composer's own one idle: hooks
+    // run unconditionally, and a controller without a project does nothing.
+    const ownPromptAttachments = usePromptAttachments(hostPromptAttachments ? null : projectId);
+    const promptAttachments = hostPromptAttachments ?? ownPromptAttachments;
+    const promptAttachmentsRef = useRef(promptAttachments);
+    useEffect(() => {
+        promptAttachmentsRef.current = promptAttachments;
+    }, [promptAttachments]);
+    const activeSubmissionIdsRef = useRef(new Set());
+    const { addMany: addPromptAttachments, attachments: promptAttachmentItems, remove: removePromptAttachment, retry: retryPromptAttachment, } = promptAttachments;
+    // A plan or credit refusal at attach (402) opens the billing path once per refusal. The tile
+    // keeps saying why; Retry cannot fix it.
+    const seenBillingRefusalsRef = useRef(new WeakSet());
+    useEffect(() => {
+        const [refusal] = takeNewBillingRefusals(promptAttachmentItems, seenBillingRefusalsRef.current);
+        if (refusal)
+            handleBillingError(refusal, tI18nComplete);
+    }, [promptAttachmentItems, tI18nComplete]);
+    const editorRef = useRef(null);
+    const [editorElement, setEditorElement] = useState(null);
+    const setEditorRef = useCallback((handle) => {
+        editorRef.current = handle;
+        setEditorElement(handle?.getElement() ?? null);
+    }, []);
+    /**
+     * The tray's finished uploads. The draft keeps their handles, so a session
+     * switch or a reload brings the files back (`draft/draft-uploads.ts`).
+     */
+    const finishedUploads = useMemo(() => finishedDraftUploads(attachedFiles, promptAttachmentItems), [attachedFiles, promptAttachmentItems]);
+    const draftUploads = useMemo(() => finishedUploads.map(({ upload }) => upload), [finishedUploads]);
+    const finishedUploadsRef = useRef(finishedUploads);
+    useEffect(() => {
+        finishedUploadsRef.current = finishedUploads;
+    }, [finishedUploads]);
+    const keepFilesForThisTab = useCallback(() => {
+        for (const { upload, file } of finishedUploadsRef.current) {
+            if (file)
+                keepUnsentUploadFile(upload.attachment_id, file);
+        }
+    }, []);
+    // A replacement composer (the boot shell hands its draft to the live chat)
+    // restores in a passive effect, after this layout effect: keep the Files
+    // first, so its tiles come back with their pictures.
+    useLayoutEffect(() => {
+        if (draftActive === false)
+            keepFilesForThisTab();
+    }, [draftActive, keepFilesForThisTab]);
+    // A finished upload outlives this composer while a draft keeps its handle:
+    // release it from the controller, so the controller's dispose does not delete
+    // it. Without a draft scope nothing keeps the handle, and dispose deletes it.
+    const draftScopedRef = useRef(!!draftScope);
+    useEffect(() => {
+        draftScopedRef.current = !!draftScope;
+    }, [draftScope]);
+    useEffect(() => () => {
+        if (!draftScopedRef.current)
+            return;
+        keepFilesForThisTab();
+        promptAttachmentsRef.current.forget(finishedUploadsRef.current.map(({ uploadId }) => uploadId));
+    }, [keepFilesForThisTab]);
+    /**
+     * Put a stored draft back into the live editor.
+     *
+     * `setDocumentWithoutStealingFocus`, not `setDocument`: this fires on mount,
+     * and `setDocument` force-focuses the document end — a session page would
+     * yank focus into the composer on every reload.
+     *
+     * Attachments are only seeded into an EMPTY tray. Anything already attached
+     * was added by the person in this mount and outranks a stored list. A
+     * finished upload comes back by its handle (`restoreDraftUploads`); an
+     * unfinished one was never stored.
+     */
+    const handleDraftRestore = useCallback((draft) => {
+        setDocumentWithoutStealingFocus(editorRef.current, draft.doc);
+        const uploads = draft.uploads ?? [];
+        if ((draft.files.length > 0 || uploads.length > 0) && attachedFilesRef.current.length === 0) {
+            let restored = [];
+            try {
+                restored = restoreDraftUploads(uploads, {
+                    restore: promptAttachmentsRef.current.restore,
+                    createObjectURL: (file) => URL.createObjectURL(file),
+                });
+            }
+            catch (error) {
+                // Over a message limit: the stored files are not restored.
+                errorToast(error instanceof Error ? error.message : tComposerAttachments('couldNotAttach'));
+            }
+            const next = [...draft.files, ...restored];
+            attachedFilesRef.current = next;
+            setAttachedFiles(next);
+        }
+        restoreQuoteTexts(draft.quotes ?? []);
+        restorePastes(draft.pastes ?? []);
+    }, [restoreQuoteTexts, restorePastes, tComposerAttachments]);
+    const { handleDocChange, clearSavedDraft } = useComposerDraft({
+        active: draftActive,
+        scope: draftScope,
+        editorRef,
+        editorReady: editorElement != null,
+        attachedFiles,
+        quotes: quoteTexts,
+        pastes,
+        uploads: draftUploads,
+        hasPrefill: !!prefill,
+        onRestore: handleDraftRestore,
+    });
+    /**
+     * Tiles pasted since the editor last changed, newest last. A tile paste never
+     * reaches the editor's history, so Mod-z takes these back first (`isUndoKey`);
+     * any document change clears them, and undo is the editor's again.
+     */
+    const pasteUndoRef = useRef([]);
+    const handleEditorDocChange = useCallback((doc, isEmpty) => {
+        pasteUndoRef.current = [];
+        handleDocChange(doc, isEmpty);
+    }, [handleDocChange]);
+    const { data: allSessions } = useRuntimeSessions();
+    const primaryAgents = useMemo(() => agents.filter((a) => !a.hidden && a.mode !== 'subagent'), [agents]);
+    const editorDisabled = disabled || lockForApproval;
+    const appendAttachedFiles = useCallback((files) => {
+        // One empty or oversized file must not refuse the whole drop: the SDK
+        // checks a batch at once, so the files that fit are split off first and
+        // each refused one is named (KRTX-2557).
+        const held = heldTraySizes(attachedFilesRef.current);
+        const { accepted, refused } = splitComposerFiles(Array.from(files), {
+            count: held.length,
+            bytes: held.reduce((sum, size) => sum + size, 0),
+        });
+        if (refused.length > 0) {
+            const toast = refusedFilesToast(refused, tComposerAttachments);
+            errorToast(toast.title, { description: toast.description });
+        }
+        try {
+            const newFiles = stageComposerFiles(accepted, {
+                addMany: addPromptAttachments,
+                createObjectURL: (file) => URL.createObjectURL(file),
+                isImage: isImageFile,
+            });
+            if (newFiles.length === 0)
+                return;
+            const next = [...attachedFilesRef.current, ...newFiles];
+            attachedFilesRef.current = next;
+            setAttachedFiles(next);
+        }
+        catch (error) {
+            errorToast(error instanceof Error ? error.message : tComposerAttachments('couldNotAttach'));
+        }
+    }, [addPromptAttachments, tComposerAttachments]);
+    useEffect(() => () => {
+        for (const file of attachedFilesRef.current) {
+            if (file.kind === 'local')
+                revokeUnsentPreview(file.localUrl);
+        }
+    }, []);
+    const handleFileSelect = useCallback((e) => {
+        if (disabled || lockForQuestion) {
+            e.target.value = '';
+            return;
+        }
+        const files = e.target.files;
+        if (!files)
+            return;
+        appendAttachedFiles(Array.from(files));
+        e.target.value = '';
+    }, [disabled, lockForQuestion, appendAttachedFiles]);
+    const handleAttachClick = useCallback(() => {
+        fileInputRef.current?.click();
+    }, []);
+    // "Add context" (Task 5): a fresh `attachRequestId` opens the same file
+    // picker `handleAttachClick` opens for a manual click or the `/attach-file`
+    // command — see `session-composer-prefill-store.ts` for the held/id-keyed
+    // handoff this consumes.
+    useEffect(() => {
+        if (attachRequestId == null)
+            return;
+        handleAttachClick();
+    }, [attachRequestId, handleAttachClick]);
+    const dragHasFiles = useCallback((e) => {
+        return Array.from(e.dataTransfer?.types ?? []).includes('Files');
+    }, []);
+    const handleDragEnter = useCallback((e) => {
+        if (disabled || lockForQuestion || !dragHasFiles(e))
+            return;
+        e.preventDefault();
+        dragDepthRef.current += 1;
+        setIsDragOver(true);
+    }, [disabled, lockForQuestion, dragHasFiles]);
+    const handleDragOver = useCallback((e) => {
+        if (disabled || lockForQuestion || !dragHasFiles(e))
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+    }, [disabled, lockForQuestion, dragHasFiles]);
+    const handleDragLeave = useCallback((e) => {
+        if (!dragHasFiles(e))
+            return;
+        e.preventDefault();
+        dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+        if (dragDepthRef.current === 0) {
+            setIsDragOver(false);
+        }
+    }, [dragHasFiles]);
+    const handleDropFiles = useCallback((e) => {
+        if (disabled || lockForQuestion || !dragHasFiles(e))
+            return;
+        e.preventDefault();
+        dragDepthRef.current = 0;
+        setIsDragOver(false);
+        const dropped = e.dataTransfer.files;
+        if (!dropped || dropped.length === 0)
+            return;
+        appendAttachedFiles(Array.from(dropped));
+    }, [appendAttachedFiles, disabled, lockForQuestion, dragHasFiles]);
+    // On the session page a file dropped anywhere in the column lands here
+    // (`ComposerDropZone`), and the editor takes focus for the message.
+    const acceptZoneDrop = useCallback((files) => {
+        appendAttachedFiles(files);
+        editorRef.current?.focus();
+    }, [appendAttachedFiles]);
+    const inDropZone = useComposerDropZone(disabled || lockForQuestion ? null : acceptZoneDrop);
+    const removeAttachedFile = useCallback((index) => {
+        const removed = attachedFilesRef.current[index];
+        if (!removed)
+            return;
+        if (removed.kind === 'local')
+            revokeUnsentPreview(removed.localUrl);
+        const next = attachedFilesRef.current.filter((_, i) => i !== index);
+        attachedFilesRef.current = next;
+        setAttachedFiles(next);
+        const uploadId = attachedFileUploadId(removed);
+        // Aborts a running upload. The server DELETE is best-effort; this never rejects.
+        if (uploadId)
+            void removePromptAttachment(uploadId);
+    }, [removePromptAttachment]);
+    const retryAttachedFile = useCallback((id) => {
+        try {
+            retryPromptAttachment(id);
+        }
+        catch (error) {
+            errorToast(error instanceof Error ? error.message : tComposerAttachments('couldNotRetry'));
+        }
+    }, [retryPromptAttachment, tComposerAttachments]);
+    useEffect(() => {
+        if (!editorElement)
+            return;
+        const onPasteCapture = (e) => {
+            if (disabled || lockForQuestion)
+                return;
+            const files = extractClipboardFiles(e.clipboardData);
+            if (files.length > 0) {
+                e.preventDefault();
+                appendAttachedFiles(files);
+                return;
+            }
+            // A long paste becomes a tile instead of flooding the editor; one too
+            // large to send inline goes out as a `.txt` attachment (`classifyPaste`).
+            const text = e.clipboardData?.getData('text/plain') ?? '';
+            const kind = classifyPaste(text, editorRef.current?.getContent().text ?? '', pastesRef.current);
+            if (kind === 'inline')
+                return;
+            e.preventDefault();
+            if (kind === 'tile') {
+                const id = newPastedContentId();
+                pasteUndoRef.current.push(id);
+                setPasteList((current) => [...current, { id, text: trimPastedText(text) }]);
+                return;
+            }
+            const names = attachedFilesRef.current.map((af) => af.kind === 'local' ? af.file.name : af.filename);
+            appendAttachedFiles([
+                new File([text], nextPastedTextFileName(names), { type: 'text/plain' }),
+            ]);
+        };
+        // Capture, so this runs before the editor's own undo keymap.
+        const onKeyDownCapture = (e) => {
+            if (!isUndoKey(e))
+                return;
+            const id = popPasteUndo(pasteUndoRef.current, pastesRef.current);
+            if (id === undefined)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            setPasteList((current) => current.filter((paste) => paste.id !== id));
+        };
+        editorElement.addEventListener('paste', onPasteCapture, true);
+        editorElement.addEventListener('keydown', onKeyDownCapture, true);
+        return () => {
+            editorElement.removeEventListener('paste', onPasteCapture, true);
+            editorElement.removeEventListener('keydown', onKeyDownCapture, true);
+        };
+    }, [editorElement, disabled, lockForQuestion, appendAttachedFiles, setPasteList]);
+    /**
+     * Whether the draft carries a `/` command chip — the other half of the
+     * attachment guard in `command-attachments.ts`.
+     *
+     * Watched ONLY while something is attached, because that is the only state
+     * in which the answer changes anything. With no attachments nothing is
+     * observed and nothing is read, so ordinary typing costs what it did before.
+     *
+     * A `MutationObserver` rather than an editor callback: `onEmptyChange` fires
+     * on the empty↔non-empty boundary only (`trackEmptyBoundary`), so it never
+     * sees a chip inserted into a draft that already has text — and adding a new
+     * prop to `ComposerEditor` would reach outside this change. The chip is an
+     * atom node with a stable `data-mention` attribute, and the selector is
+     * pinned to `MentionNode`'s real rendered output by a test.
+     *
+     * Both orders are covered: attach-then-type is caught by the observer, and
+     * type-then-attach by the snapshot React reads when the subscription changes
+     * on the first attachment.
+     *
+     * `useSyncExternalStore`, not `useState` + an effect: the editor's DOM is
+     * literally an external store here, and reading it in an effect would render
+     * once with a stale answer and again with the real one.
+     */
+    const hasAttachments = attachedFiles.length > 0;
+    const subscribeToCommandChip = useCallback((onChange) => {
+        if (!editorElement || !hasAttachments)
+            return NO_SUBSCRIPTION;
+        const observer = new MutationObserver(onChange);
+        observer.observe(editorElement, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, [editorElement, hasAttachments]);
+    // A string or null, so the snapshot is stable by value and cannot loop.
+    const readChipSnapshot = useCallback(() => (hasAttachments ? readCommandChipLabel(editorElement) : null), [editorElement, hasAttachments]);
+    const draftCommandChipLabel = useSyncExternalStore(subscribeToCommandChip, readChipSnapshot, NO_COMMAND_CHIP);
+    // One predicate for both switch affordances — the editor's cycle shortcut
+    // and the /switch-agent slash row: with zero or one selectable agent there
+    // is nothing to switch to, and a slash row that highlights, offers "Use",
+    // and does nothing is worse than no row (the `set-scope` lesson).
+    const canSwitchAgent = primaryAgents.length > 1 && Boolean(onAgentChange);
+    const cycleAgent = useCallback(() => {
+        // The `!onAgentChange` re-check is a type guard: `canSwitchAgent` already
+        // implies it, but the captured boolean cannot narrow the callback's closure.
+        if (!canSwitchAgent || !onAgentChange)
+            return false;
+        const currentIdx = primaryAgents.findIndex((a) => a.name === selectedAgent);
+        const nextIdx = (currentIdx + 1) % primaryAgents.length;
+        onAgentChange(primaryAgents[nextIdx].name);
+        return true;
+    }, [canSwitchAgent, primaryAgents, onAgentChange, selectedAgent]);
+    useEffect(() => {
+        if (!editorElement)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === 'Tab' && !e.defaultPrevented) {
+                if (cycleAgent())
+                    e.preventDefault();
+            }
+        };
+        editorElement.addEventListener('keydown', onKeyDown);
+        return () => editorElement.removeEventListener('keydown', onKeyDown);
+    }, [editorElement, cycleAgent]);
+    useEffect(() => {
+        if (!editorElement)
+            return;
+        const isSuggestionListbox = (el) => {
+            if (!(el instanceof HTMLElement))
+                return false;
+            if (el.getAttribute('role') !== 'listbox')
+                return false;
+            const label = el.getAttribute('aria-label');
+            return label === 'Mention suggestions' || label === 'Commands and actions';
+        };
+        let attached = null;
+        let attrObserver = null;
+        let bodyObserver = null;
+        const sync = () => {
+            if (!attached)
+                return;
+            if (!attached.id) {
+                const suffix = attached.getAttribute('aria-label') === 'Mention suggestions' ? 'mention' : 'slash';
+                attached.id = `composer-suggestions-${suffix}`;
+            }
+            editorElement.setAttribute('aria-controls', attached.id);
+            const activeId = attached.getAttribute('aria-activedescendant');
+            if (activeId)
+                editorElement.setAttribute('aria-activedescendant', activeId);
+            else
+                editorElement.removeAttribute('aria-activedescendant');
+        };
+        const detachListbox = () => {
+            attrObserver?.disconnect();
+            attrObserver = null;
+            attached = null;
+            editorElement.removeAttribute('aria-controls');
+            editorElement.removeAttribute('aria-activedescendant');
+        };
+        const attachListbox = (el) => {
+            attached = el;
+            attrObserver = new MutationObserver(sync);
+            attrObserver.observe(el, { attributes: true, attributeFilter: ['aria-activedescendant'] });
+            sync();
+        };
+        const findListbox = () => {
+            const candidates = document.body.querySelectorAll('[role="listbox"]');
+            for (const el of candidates) {
+                if (isSuggestionListbox(el))
+                    return el;
+            }
+            return null;
+        };
+        const reconcile = () => {
+            const found = findListbox();
+            if (found && found !== attached) {
+                detachListbox();
+                attachListbox(found);
+            }
+            else if (!found && attached) {
+                detachListbox();
+            }
+        };
+        const startObserving = () => {
+            if (bodyObserver)
+                return;
+            reconcile(); // initial sync — no waiting for the first future mutation
+            bodyObserver = new MutationObserver(reconcile);
+            bodyObserver.observe(document.body, { childList: true, subtree: true });
+        };
+        const stopObserving = () => {
+            bodyObserver?.disconnect();
+            bodyObserver = null;
+            detachListbox();
+        };
+        const onFocusIn = () => startObserving();
+        const onFocusOut = () => stopObserving();
+        editorElement.addEventListener('focusin', onFocusIn);
+        editorElement.addEventListener('focusout', onFocusOut);
+        if (document.activeElement === editorElement ||
+            editorElement.contains(document.activeElement)) {
+            startObserving();
+        }
+        return () => {
+            editorElement.removeEventListener('focusin', onFocusIn);
+            editorElement.removeEventListener('focusout', onFocusOut);
+            stopObserving();
+        };
+    }, [editorElement]);
+    const composerFocusRef = useMemo(() => ({ current: editorElement }), [editorElement]);
+    const handleTypeAhead = useCallback((char) => {
+        editorRef.current?.insertAtCursor(char);
+    }, []);
+    useComposerFocus({
+        ref: composerFocusRef,
+        autoFocus,
+        disabled: editorDisabled,
+        onTypeAhead: handleTypeAhead,
+    });
+    const { hasSelectableModels, isSelectableModel, entitlementsPending } = useModelConnectionGate(models);
+    const availableSelectedModel = entitlementsPending
+        ? selectedModel
+        : resolveAvailableSelectedModel(selectedModel, isSelectableModel);
+    const modelUnavailable = isModelRequiredButUnavailable({
+        modelRequired,
+        selectedModel: availableSelectedModel,
+        lockForQuestion,
+        // The same two "not in yet" flags `noModelsConnected` below reads. Without
+        // them this refused every send made before the catalog landed — project
+        // home paints a focusable composer ~1.1s after navigation, while
+        // `/model-picker`, `/detail` and `/model-defaults` are all still in flight.
+        modelsLoading,
+        entitlementsPending,
+    });
+    const noModelsConnected = modelRequired &&
+        !lockForQuestion &&
+        !modelsLoading &&
+        !entitlementsPending &&
+        (!availableSelectedModel || !hasSelectableModels);
+    // Quotes alone are a message — but not an answer: a question-locked send
+    // takes only the typed text, so quotes cannot enable it there.
+    const canSubmit = !isEmpty ||
+        attachedFiles.length > 0 ||
+        (!lockForQuestion && (quotes.length > 0 || pastes.length > 0));
+    useComposerEscapeStop({
+        editorElement,
+        enabled: isBusy && canStop && !stopDisabled && !isSending && !lockForQuestion && !props.submitLabel,
+        hasDraft: canSubmit,
+        onStop,
+    });
+    /**
+     * No agent may run this prompt. Refused here rather than at the server:
+     * `lockForQuestion` is exempt because answering an open question is not a new
+     * prompt and runs under the agent that asked it.
+     */
+    const agentUnavailable = noAccessibleAgents && !lockForQuestion;
+    const submitDisabled = disabled || modelUnavailable || agentUnavailable || lockForApproval;
+    /** A failed upload refuses Send. The Send control's tooltip says why. */
+    const attachmentFailed = attachmentsBlockSend(promptAttachmentItems);
+    /** The selected model cannot read an attached image: the tray under the card and Send say so. */
+    const modelRejectingImages = modelRejectingAttachedImages({
+        files: attachedFiles,
+        models,
+        selectedModel: availableSelectedModel,
+    });
+    const imagesUnsupportedReason = modelRejectingImages
+        ? `${tModelGate('imagesUnsupported', { model: modelRejectingImages })} — ${tModelGate('imagesUnsupportedHint')}`
+        : null;
+    /**
+     * A `/` command cannot carry the attached files, so this state refuses the
+     * submit and says why — before anything is sent and before anything is
+     * cleared. See `command-attachments.ts` for why carrying them is not
+     * reachable from here.
+     *
+     * Kept out of `submitDisabled` on purpose: that value also gates the voice
+     * recorder, and dictation is one of the ways out of this state.
+     */
+    const commandAttachmentPlan = planCommandAttachments({
+        isCommand: draftWillRunCommand(draftCommandChipLabel, commands),
+        attachmentCount: attachedFiles.length,
+    }, tI18nComplete);
+    const prefillId = prefill?.id;
+    const prefillText = prefill?.text ?? '';
+    const prefillFiles = prefill?.files;
+    const prefillMode = prefill?.mode;
+    const prefillSubmit = prefill?.submit === true;
+    // `handleSubmit` is declared further down; the prefill effect reaches it
+    // through this ref, bound in an effect right after that declaration.
+    const handleSubmitRef = useRef(() => undefined);
+    const submittedPrefillIdRef = useRef(null);
+    const onPrefillAppliedRef = useRef(onPrefillApplied);
+    useEffect(() => {
+        onPrefillAppliedRef.current = onPrefillApplied;
+    }, [onPrefillApplied]);
+    useEffect(() => {
+        if (!shouldApplyPrefill({
+            prefillId,
+            prefillText,
+            prefillFiles,
+            prefillMode,
+            editorReady: editorElement != null,
+        })) {
+            return;
+        }
+        // `<reply_context>` blocks in the prefill (a failed send coming back, a
+        // rewind, a queued message taken back) go to the quote list, never into
+        // the document as raw XML the next send would wrap again. They lead the
+        // list, ahead of quotes already there, in both modes: a replace prefill
+        // replaces the typed text, but it does not throw away quotes the user
+        // collected.
+        // `<pasted_content>` blocks come back as tiles the same way.
+        const quoted = extractReplyQuotes(prefillText);
+        const pasted = splitPastedContent(quoted.text);
+        const incoming = { quotes: quoted.quotes, text: pasted.text };
+        if (prefillMode === 'merge') {
+            const merged = planPrefillMerge({
+                prefillDoc: textToDocument(incoming.text),
+                prefillIsEmpty: incoming.text.length === 0,
+                currentDoc: editorRef.current?.getDocument() ?? EMPTY_DOCUMENT,
+                currentIsEmpty: editorRef.current?.isEmpty() ?? true,
+            });
+            if (merged)
+                editorRef.current?.setDocument(merged);
+        }
+        else {
+            editorRef.current?.setContent(incoming.text);
+        }
+        restoreQuoteTexts(incoming.quotes);
+        restorePastes(pasted.pastes);
+        if (prefillFiles?.length) {
+            try {
+                const liveIds = new Set(promptAttachmentsRef.current.attachments.map((attachment) => attachment.id));
+                // A restored upload has no File to stage again: it carries over only while listed.
+                const usableFiles = prefillFiles.filter((file) => file.kind !== 'uploaded' || liveIds.has(file.uploadId));
+                const localToStage = usableFiles.filter((file) => file.kind === 'local' && (!file.uploadId || !liveIds.has(file.uploadId)));
+                const newlyStaged = stageComposerFiles(localToStage.map((file) => file.file), {
+                    addMany: addPromptAttachments,
+                    createObjectURL: (file) => URL.createObjectURL(file),
+                    isImage: isImageFile,
+                });
+                let localIndex = 0;
+                const prepared = usableFiles.map((file) => {
+                    if (file.kind === 'remote')
+                        return file;
+                    if (file.uploadId && liveIds.has(file.uploadId))
+                        return file;
+                    return newlyStaged[localIndex++];
+                });
+                const current = attachedFilesRef.current;
+                const next = prefillMode === 'merge' ? mergeFailedSubmissionFiles(current, prepared) : prepared;
+                if (prefillMode !== 'merge') {
+                    const replacement = planAttachmentReplacement(current, next, activeSubmissionIdsRef.current);
+                    for (const uploadId of replacement.idsToRemove)
+                        void removePromptAttachment(uploadId);
+                    for (const url of replacement.urlsToRevoke)
+                        revokeUnsentPreview(url);
+                }
+                attachedFilesRef.current = next;
+                setAttachedFiles(next);
+            }
+            catch (error) {
+                errorToast(error instanceof Error ? error.message : tComposerAttachments('couldNotAttach'));
+            }
+        }
+        editorRef.current?.focus();
+        // Reported AFTER the text is in the editor, in the same statement run — a
+        // holder that clears on this signal cannot clear a draft that has not
+        // landed. `prefillId` is non-undefined here: `shouldApplyPrefill` returned
+        // true, which requires it.
+        //
+        // Through a ref, deliberately: this callback in the dependency array would
+        // re-run the effect whenever the caller re-created it, and a `merge` prefill
+        // applied twice appends its text twice.
+        onPrefillAppliedRef.current?.(prefillId);
+        // Last, so the prefill is fully applied and reported before the submit
+        // takes the draft out of the editor.
+        if (shouldSubmitPrefill({
+            prefillId,
+            prefillSubmit,
+            submittedPrefillId: submittedPrefillIdRef.current,
+        })) {
+            submittedPrefillIdRef.current = prefillId;
+            handleSubmitRef.current();
+        }
+    }, [
+        prefillId,
+        prefillText,
+        prefillFiles,
+        prefillMode,
+        prefillSubmit,
+        editorElement,
+        addPromptAttachments,
+        removePromptAttachment,
+        tComposerAttachments,
+        restoreQuoteTexts,
+        restorePastes,
+    ]);
+    useEffect(() => {
+        if (lockForQuestion) {
+            const wasEmpty = editorRef.current?.isEmpty() ?? true;
+            savedDocBeforeQuestionRef.current = wasEmpty
+                ? null
+                : (editorRef.current?.getDocument() ?? null);
+            editorRef.current?.clear();
+        }
+        else if (savedDocBeforeQuestionRef.current) {
+            setDocumentWithoutStealingFocus(editorRef.current, savedDocBeforeQuestionRef.current);
+            savedDocBeforeQuestionRef.current = null;
+        }
+    }, [lockForQuestion]);
+    // Each quote request appends to the list, at once — locked, disabled or
+    // not, editor mounted or not. The list is not the editor document, so the
+    // question lock's save/restore of that document cannot touch it.
+    const appliedQuoteRequestIdsRef = useRef(new Set());
+    const onQuoteRequestsAppliedRef = useRef(onQuoteRequestsApplied);
+    useEffect(() => {
+        onQuoteRequestsAppliedRef.current = onQuoteRequestsApplied;
+    }, [onQuoteRequestsApplied]);
+    useEffect(() => {
+        const pending = planQuoteRequests({
+            requests: quoteRequests,
+            appliedIds: appliedQuoteRequestIdsRef.current,
+        });
+        if (pending.length === 0)
+            return;
+        for (const request of pending)
+            appliedQuoteRequestIdsRef.current.add(request.id);
+        appendQuoteTexts(pending.map((request) => request.text));
+        onQuoteRequestsAppliedRef.current?.(pending.map((request) => request.id));
+    }, [quoteRequests, appendQuoteTexts]);
+    /**
+     * The model popover's open state, hoisted out of `ModelSelector` so the `/`
+     * palette can open it. `focusSection` is what separates the palette's two
+     * model-related rows: reasoning effort is a footer row INSIDE this popover
+     * rather than a control of its own (see `model-selector.tsx`), so both rows
+     * open the same element and only the landing point differs.
+     */
+    /**
+     * Open state for the two toolbar controls the `/` palette can reach.
+     * Hoisted out of the controls themselves so a palette row can open them;
+     * both stay uncontrolled for every other consumer.
+     *
+     * Two separate flags, not one with a "which section" discriminator: model
+     * and reasoning effort are now two distinct dropdowns, so a single flag
+     * would open both or neither.
+     */
+    const [agentMenuOpen, setAgentMenuOpen] = useState(false);
+    const [modelMenuOpen, setModelMenuOpen] = useState(false);
+    const [reasoningMenuOpen, setReasoningMenuOpen] = useState(false);
+    /**
+     * `SLASH_ACTIONS` with the live agent name filled into the "Switch agent"
+     * row, so the palette shows what you are switching FROM without opening
+     * anything. The static list cannot know it; this component holds
+     * `selectedAgent`, so the derivation belongs here.
+     *
+     * Memoized on `selectedAgent` alone. The `/` menu reads this through a ref
+     * at open time (`composer-editor.tsx`'s `actionsRef`), so identity churn
+     * would not produce a wrong menu — but `ComposerEditorLazy` is memoized on
+     * its props, and a fresh array every render would defeat that on every
+     * keystroke.
+     */
+    /**
+     * The live context-window snapshot behind the "Show context" row — the ring
+     * icon reads percent + tone, the palette's detail pane renders the full
+     * `ContextUsageCard` from the rest. Two memos on purpose: `messages`
+     * changes identity on every streamed token, so the derivation re-runs
+     * cheaply — but the OBJECT is pinned to its scalar fields, which change
+     * only when a turn completes and reports usage. Without the pin, every
+     * token would ripple through `slashActions` into the memoized editor.
+     */
+    const rawContextUsage = useMemo(() => getContextUsage(messages, models, availableSelectedModel), [messages, models, availableSelectedModel]);
+    const contextUsage = useMemo(() => ({
+        percent: rawContextUsage.percent,
+        tone: rawContextUsage.tone,
+        ratio: rawContextUsage.ratio,
+        limit: rawContextUsage.limit,
+        modelName: rawContextUsage.modelName,
+        breakdown: rawContextUsage.breakdown,
+    }), 
+    // Deliberately keyed on the leaf scalars, not the objects: `breakdown` is
+    // rebuilt every derivation, so its identity would defeat the pin.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        rawContextUsage.percent,
+        rawContextUsage.tone,
+        rawContextUsage.ratio,
+        rawContextUsage.limit,
+        rawContextUsage.modelName,
+        rawContextUsage.breakdown.input,
+        rawContextUsage.breakdown.output,
+        rawContextUsage.breakdown.reasoning,
+        rawContextUsage.breakdown.cache,
+        rawContextUsage.breakdown.total,
+    ]);
+    const slashActions = useMemo(() => {
+        // Rows whose handler this host did not provide are dropped, not shown
+        // dead — the `set-scope` lesson in `slash-actions.ts`: a row that
+        // highlights, offers "Use", and does nothing is worse than no row.
+        const available = localizedSlashActions(tI18nComplete).filter((action) => {
+            if (action.id === 'switch-agent')
+                return canSwitchAgent;
+            if (action.id === 'compact-session')
+                return Boolean(onCompactClick);
+            if (action.id === 'show-context')
+                return Boolean(onContextClick);
+            return true;
+        });
+        return available.map((action) => {
+            if (action.id === 'switch-agent' && selectedAgent) {
+                return { ...action, value: selectedAgent };
+            }
+            // The ring icon (via `context`) plus the reading as the row's
+            // "current setting" text — same grammar as the agent row's value.
+            if (action.id === 'show-context') {
+                return { ...action, value: `${contextUsage.percent}%`, context: contextUsage };
+            }
+            return action;
+        });
+    }, [selectedAgent, canSwitchAgent, onCompactClick, onContextClick, contextUsage, tI18nComplete]);
+    const handleSelectAction = useCallback((action) => {
+        // Which control a row opens lives in `controlToOpenFor`
+        // (menus/slash-actions.ts) so it can be tested; this file cannot be.
+        const control = controlToOpenFor(action.id);
+        if (control === 'agent') {
+            setAgentMenuOpen(true);
+            return;
+        }
+        if (control === 'model') {
+            setModelMenuOpen(true);
+            return;
+        }
+        if (control === 'reasoning') {
+            setReasoningMenuOpen(true);
+            return;
+        }
+        switch (action.id) {
+            case 'attach-file':
+                fileInputRef.current?.click();
+                return;
+            case 'compact-session':
+                onCompactClick?.();
+                return;
+            case 'show-context':
+                onContextClick?.();
+                return;
+        }
+    }, [onCompactClick, onContextClick]);
+    const submitPlacementRef = useRef('transcript');
+    const dispatchSubmission = useCallback(async (stash) => {
+        const placement = stash?.placement ?? submitPlacementRef.current;
+        // Ahead of the model check: with no agent to run it, the model this prompt
+        // would have used is not the user's problem.
+        if (agentUnavailable) {
+            errorToast(NO_AGENT_ACCESS_LABEL, { description: NO_AGENT_ACCESS_HINT });
+            return;
+        }
+        if (modelUnavailable) {
+            errorToast(NO_MODEL_AVAILABLE_MESSAGE, {
+                description: NO_MODEL_AVAILABLE_ACTION_MESSAGE,
+            });
+            return;
+        }
+        // Enter as well as the disabled Send: the tray under the card says why.
+        if (modelRejectingImages)
+            return;
+        // What refuses EVERY submission — a prompt, a `/` command, and a custom
+        // answer alike. `hasActiveQuestion` is deliberately not consulted here: an
+        // open question does not refuse a submission, it REROUTES it to
+        // `onCustomAnswer` further down. The command branch passes it for real,
+        // because a command is not an answer.
+        const submissionBlocker = sendBlocker({
+            hasActiveQuestion: false,
+            // The composer only knows "something is pending", not how many.
+            pendingPermissionCount: lockForApproval ? 1 : 0,
+            readOnly: disabled,
+        });
+        if (submissionBlocker) {
+            const copy = sendBlockerMessage(submissionBlocker, tI18nComplete);
+            errorToast(copy.message, copy.description ? { description: copy.description } : undefined);
+            return;
+        }
+        // A stashed draft was captured out of the editor (and the editor cleared)
+        // when its Enter arrived mid-send — see `createSubmitLatch`. It is
+        // submitted as captured; the live editor belongs to whatever the user
+        // typed since.
+        const draft = stash ? stash.content : editorRef.current?.getContent();
+        const filesNow = stash ? stash.files : attachedFilesRef.current;
+        const quotesNow = stash ? stash.quotes : quotesRef.current;
+        const pastesNow = stash ? stash.pastes : pastesRef.current;
+        // Every quote leads the message, or the command args, as its own
+        // `<reply_context>` line. A question's custom answer below reads
+        // `draft.text`, so it never carries them.
+        const plan = planDraftSubmission({
+            commandName: draft?.commandName,
+            text: draft?.text ?? '',
+            commands: commands ?? [],
+            commandSplit: draft?.commandSplit,
+            quotes: quotesNow.map((quote) => quote.text),
+            pastes: pastesNow,
+            mentions: draft?.mentions,
+        });
+        if (plan.kind === 'command') {
+            // A command cannot deliver the attached files, and the code below is
+            // about to clear them and revoke their object URLs. Refuse the whole
+            // submission instead — before either dispatch path and before the clear,
+            // so the direct call and the queued entry are guarded by one check
+            // rather than two that can drift. Nothing is sent, nothing is cleared,
+            // and the reason is already on screen next to the send button; the toast
+            // covers the keyboard path, which no disabled button can gate.
+            const guard = planCommandAttachments({
+                isCommand: true,
+                attachmentCount: filesNow.length,
+            }, tI18nComplete);
+            if (guard.kind === 'refuse') {
+                errorToast(guard.message, { description: guard.description });
+                return;
+            }
+            // A command cannot go out while the session is working or its sandbox
+            // is waking. A PROMPT never waits here: it is a server-side inbox row,
+            // and the admission gate orders it. A COMMAND has no row — `runCommand`
+            // dispatches it, never `POST .../prompts` — so one put on the wire
+            // mid-turn aborts the answer in progress, and one sent at a box that is
+            // not up is swallowed by `runCommand`'s `runtimeActionReady` guard.
+            //
+            // So the host HOLDS it (`onHoldCommand`, `held-commands.ts`): a visible
+            // row in the queued list, released by server turn authority once the
+            // inbox is empty — not by the debounced `isBusy` the old localStorage
+            // queue guessed from. A host without a hold refuses it and keeps the
+            // draft in the editor.
+            const blocker = commandBlocker({
+                hasActiveQuestion: lockForQuestion,
+                // The composer only knows "something is pending", not how many.
+                pendingPermissionCount: lockForApproval ? 1 : 0,
+                readOnly: disabled,
+                isWorking: sessionWorking ?? isBusy,
+                runtimeReady,
+            });
+            // A turn or a waking box only DELAYS a command: a host that can hold
+            // it does, and the queued list shows it with a Remove (KRTX-2464). A
+            // question, a permission or a read-only viewer refuse it outright.
+            const holdable = blocker === 'session_working' || blocker === 'runtime_waking';
+            if (blocker && holdable && onHoldCommand) {
+                onHoldCommand(plan.command, plan.args, plan.split);
+            }
+            else if (blocker) {
+                const copy = sendBlockerMessage(blocker, tI18nComplete);
+                errorToast(copy.message, copy.description ? { description: copy.description } : undefined);
+                return;
+            }
+            else {
+                onCommand?.(plan.command, plan.args, plan.split);
+            }
+            // The command is on its way; the draft that produced it is spent.
+            // Deliberately NOT on either refusal path above (`guard.kind ===
+            // 'refuse'`, `blocker`) — those keep the text in the editor on
+            // purpose, so its draft has to survive with it.
+            clearSavedDraft();
+            // The same reset rule the message path uses, so a `'text-only'` host
+            // (project home) empties its box here too WITHOUT revoking preview URLs
+            // the next surface still draws from.
+            const commandReset = resolveComposerResetOnSend(clearOnSend, attachedFilesRef.current);
+            if (commandReset.clear && !stash) {
+                editorRef.current?.clear();
+                setQuoteList(() => []);
+                setPasteList(() => []);
+                for (const url of commandReset.urlsToRevoke)
+                    revokeUnsentPreview(url);
+                attachedFilesRef.current = [];
+                setAttachedFiles([]);
+            }
+            return 'sent';
+        }
+        if (lockForQuestion) {
+            const trimmed = (draft?.text ?? '').trim();
+            if (trimmed && onCustomAnswer) {
+                onCustomAnswer(trimmed);
+                if (!stash)
+                    editorRef.current?.clear();
+                // The answer takes only the text; a stash gets its files back.
+                return 'answered';
+            }
+            if (onQuestionAction) {
+                onQuestionAction();
+                return;
+            }
+            return;
+        }
+        // A chip the live list cannot resolve YET must not ride out as an
+        // ordinary prompt while files are staged — the whole story, including
+        // why only the never-resolved list refuses, lives on
+        // `planUnresolvedCommandChip`'s doc comment (KRTX-1903). It sits below
+        // the question-lock reroute: an answer takes only the text and hands
+        // the files back to the stash, so there is nothing there to lose.
+        const unresolvedGuard = planUnresolvedCommandChip({
+            commandName: draft?.commandName,
+            commandsResolved,
+            attachmentCount: filesNow.length,
+        }, tI18nComplete);
+        if (unresolvedGuard.kind === 'refuse') {
+            errorToast(unresolvedGuard.message, { description: unresolvedGuard.description });
+            return;
+        }
+        const content = draft ?? { text: '', mentions: [] };
+        const trimmed = plan.text;
+        if ((!trimmed && filesNow.length === 0) || submitDisabled)
+            return;
+        // Send never waits for an upload: the selection is handed to this send
+        // now. Only a failed upload refuses, and the Send control says why.
+        const attachmentSubmission = stash?.attachmentSubmission ?? captureAttachmentSubmission(filesNow, promptAttachments);
+        if (!attachmentSubmission)
+            return;
+        const filesToSend = filesNow.length > 0 ? [...filesNow] : undefined;
+        const mentionsToSend = content.mentions.length > 0 ? [...content.mentions] : undefined;
+        const submittedDoc = stash ? stash.doc : (editorRef.current?.getDocument() ?? null);
+        const submittedIsEmpty = stash ? false : (editorRef.current?.isEmpty() ?? true);
+        const reset = resolveComposerResetOnSend(clearOnSend, filesNow);
+        if (reset.clear && !stash) {
+            editorRef.current?.clear();
+            setQuoteList(() => []);
+            setPasteList(() => []);
+            attachedFilesRef.current = [];
+            setAttachedFiles([]);
+        }
+        // At hand-off, BEFORE the host runs: a send with uploads posts later, and a
+        // reload in that window must not restore the sent draft. Explicit, NOT
+        // derived from `reset.clear`: a composer can hand a send off without
+        // emptying itself (`clearOnSend={false}`) and its saved draft still has
+        // to go. A refused send saves the draft again in `onFailed`.
+        clearSavedDraft();
+        // The host paints the message, then returns. A send with uploads returns
+        // right after the paint (`deliverAfterPaint`), so the next Send never waits
+        // behind them. The host releases the uploads after its POST; a send it keeps
+        // on screen as failed still holds them for its Retry.
+        await runComposerSend({
+            submission: attachmentSubmission,
+            controller: promptAttachments,
+            active: activeSubmissionIdsRef.current,
+            send: () => onSend(trimmed, filesToSend, mentionsToSend, attachmentSubmission, placement),
+            onSent: () => {
+                for (const url of reset.urlsToRevoke)
+                    revokeUnsentPreview(url);
+            },
+            onFailed: () => {
+                // The host refused the send before anything durable happened. Its uploads
+                // are back in the tray, and the draft returns: a failed file shows its
+                // Retry; a ready one sends again without re-upload.
+                const currentDoc = editorRef.current?.getDocument() ?? null;
+                const currentIsEmpty = editorRef.current?.isEmpty() ?? true;
+                const sentFiles = filesToSend ?? [];
+                const plan = planFailedSendRecovery({
+                    // `reset.clear`, not `clearOnSend`: recovery is owed to every
+                    // composer that EMPTIED itself, and `'text-only'` (project home)
+                    // now does while still being neither `true` nor `false`. Keying it
+                    // on the raw prop returned `null` there and left a refused send
+                    // with an empty box and no draft to get back.
+                    clearOnSend: reset.clear,
+                    submittedDoc,
+                    submittedIsEmpty,
+                    currentDoc,
+                    currentIsEmpty,
+                    currentAttachedFiles: attachedFilesRef.current,
+                    sentFiles,
+                });
+                if (plan?.restoreDoc) {
+                    setDocumentWithoutStealingFocus(editorRef.current, plan.restoreDoc);
+                }
+                if (plan) {
+                    attachedFilesRef.current = plan.attachedFiles;
+                    setAttachedFiles(plan.attachedFiles);
+                }
+                // The quotes left the list with this send (a direct send cleared
+                // it, a stash took them); they lead it again.
+                if (reset.clear || stash) {
+                    restoreQuoteTexts(quotesNow.map((quote) => quote.text));
+                    restorePastes(pastesNow);
+                }
+                // The tray draws these files again, so the sent cache no longer owns their pictures.
+                disownSentAttachmentPreviews(sentFiles);
+                // The draft was cleared at hand-off; the editor holds it again, so save it. Only where
+                // Send cleared the editor — a composer that kept its draft on screen (`clearOnSend`
+                // false) never lost it, and a connector-gate Retry that sends it later must not bring
+                // it back as a saved draft.
+                const restoredDoc = editorRef.current?.getDocument();
+                if (reset.clear && restoredDoc)
+                    handleDocChange(restoredDoc, editorRef.current?.isEmpty() ?? true);
+            },
+        });
+        return 'sent';
+    }, [
+        agentUnavailable,
+        modelUnavailable,
+        modelRejectingImages,
+        lockForApproval,
+        disabled,
+        commands,
+        commandsResolved,
+        lockForQuestion,
+        submitDisabled,
+        clearOnSend,
+        tI18nComplete,
+        sessionWorking,
+        isBusy,
+        runtimeReady,
+        onCommand,
+        onHoldCommand,
+        clearSavedDraft,
+        handleDocChange,
+        setQuoteList,
+        restoreQuoteTexts,
+        setPasteList,
+        restorePastes,
+        onCustomAnswer,
+        onQuestionAction,
+        onSend,
+        promptAttachments,
+    ]);
+    /**
+     * One user action = one submission — without eating the next one. The whole
+     * story (why a latch exists, why a blanket `if (inFlight) return` silently
+     * dropped the second message a user typed while the previous send's ACK was
+     * pending, and how a double-fire is told apart from a distinct message) lives
+     * on `createSubmitLatch`.
+     *
+     * Created ONCE and dispatching through a ref: the latch's in-flight state
+     * must survive re-renders (a fresh latch mid-send would reopen the
+     * double-fire window), while each later submit must read the CURRENT
+     * dispatch closure, not the one from the render that created the latch.
+     *
+     * A layout effect, so it runs before every passive effect of the same
+     * commit: the prefill effect above submits in the commit that delivers the
+     * prefill, and must send with this render's agent, model and effort.
+     */
+    const dispatchSubmissionRef = useRef(dispatchSubmission);
+    useLayoutEffect(() => {
+        dispatchSubmissionRef.current = dispatchSubmission;
+    });
+    const submitLatchRef = useRef(null);
+    const handleSubmit = useCallback((placement = 'transcript') => {
+        submitPlacementRef.current = placement;
+        // A stash whose dispatch no host took comes back as it left: merged into
+        // whatever the user typed since, with its files back in the tray.
+        const restoreStashedDraft = (stash, withText) => {
+            // The stash handed its pictures to the sent cache at capture. The tray draws them again.
+            disownSentAttachmentPreviews(stash.files);
+            // A question answer takes only the text, so the quotes come back
+            // whatever the outcome.
+            restoreQuoteTexts(stash.quotes.map((quote) => quote.text));
+            restorePastes(stash.pastes);
+            const editor = editorRef.current;
+            const plan = planFailedSendRecovery({
+                clearOnSend: true,
+                submittedDoc: withText ? stash.doc : null,
+                submittedIsEmpty: !withText,
+                currentDoc: editor?.getDocument() ?? null,
+                currentIsEmpty: editor?.isEmpty() ?? true,
+                currentAttachedFiles: attachedFilesRef.current,
+                sentFiles: stash.files,
+            });
+            if (!plan)
+                return;
+            if (plan.restoreDoc)
+                setDocumentWithoutStealingFocus(editor, plan.restoreDoc);
+            attachedFilesRef.current = plan.attachedFiles;
+            setAttachedFiles(plan.attachedFiles);
+        };
+        // Lazy-created at the first submit (never during render, which the
+        // compiler's ref rules forbid) and reused forever after.
+        submitLatchRef.current ??= createSubmitLatch((stash) => dispatchLatched(stash, (current) => dispatchSubmissionRef.current(current), promptAttachmentsRef.current, restoreStashedDraft), 
+        // Typed text is what marks a re-entrant submit as a distinct message
+        // worth stashing; a double-fire arrives with the editor already
+        // cleared. The stash takes the draft OUT of the editor right now — the
+        // user sees the message leave on Enter, exactly as a direct send — and
+        // submits it immediately, even while another acceptance is pending. Files ride
+        // along from the synchronous mirror, not from React state that may not
+        // have flushed.
+        () => {
+            const editor = editorRef.current;
+            const content = editor?.getContent();
+            // Typed text only. Quotes alone do not arm the stash: a question-locked
+            // double-fire keeps its quotes in the list, and would run the question
+            // action twice. A quote-only Enter mid-send is ignored; the quotes stay.
+            if (!editor || !content || !content.text.trim())
+                return null;
+            const quotes = quotesRef.current;
+            const pastes = pastesRef.current;
+            const doc = editor.getDocument() ?? null;
+            const files = attachedFilesRef.current;
+            // Handed off before the editor clears. A failed upload keeps the draft
+            // in the editor, where the Send control says why.
+            const attachmentSubmission = captureAttachmentSubmission(files, promptAttachmentsRef.current);
+            if (!attachmentSubmission)
+                return null;
+            editor.clear();
+            setQuoteList(() => []);
+            setPasteList(() => []);
+            attachedFilesRef.current = [];
+            setAttachedFiles([]);
+            return {
+                content,
+                doc,
+                files,
+                quotes,
+                pastes,
+                attachmentSubmission,
+                placement: submitPlacementRef.current,
+            };
+        });
+        return submitLatchRef.current();
+        // `restoreQuoteTexts`, `setQuoteList`, `restorePastes` and `setPasteList`
+        // are stable (`useCallback` over refs), so the handler stays created
+        // once, like its other ref inputs.
+    }, []);
+    useEffect(() => {
+        handleSubmitRef.current = () => void handleSubmit();
+    }, [handleSubmit]);
+    // A question lock owns the editor: Up there is a caret move, never a take-back.
+    const handleArrowUpAtStart = useCallback(() => (lockForQuestion ? false : (onArrowUpAtStart?.() ?? false)), [lockForQuestion, onArrowUpAtStart]);
+    const editorPlaceholder = resolveEditorPlaceholder({
+        lockForApproval,
+        lockForQuestion,
+        questionButtonLabel,
+        placeholder: hint ?? placeholder,
+    });
+    /**
+     * The rotating-hint overlay owns the placeholder only in the plain idle
+     * state. A lock's copy is functional ("Answer the question…"), and a
+     * disabled editor should not advertise shortcuts it will not honour — in
+     * both cases the static TipTap placeholder keeps the job. While the overlay
+     * IS active the editor gets `''`, so its `::before` renders empty and two
+     * placeholders never paint at once (see animated-placeholder.tsx).
+     */
+    const animatePlaceholder = isEmpty && !editorDisabled && !lockForQuestion && !hint;
+    /**
+     * Whether the inset strip above the card has anything to show. Gated on
+     * actual CONTENT, never on `sessionId`: that was truthy in every session, so
+     * the strip's padded, bordered shell rendered as an empty rounded sliver
+     * floating above the notice bar whenever it was empty. A session's queued
+     * messages render here, as the first child of `inputSlot`
+     * (`queued-prompt-list.tsx`).
+     */
+    const showQueueStrip = Boolean(inputSlot);
+    const cardProps = {
+        tHardcodedUi,
+        isDragOver,
+        // Inside a `ComposerDropZone` the zone owns every file drag.
+        handleDragEnter: inDropZone ? undefined : handleDragEnter,
+        handleDragOver: inDropZone ? undefined : handleDragOver,
+        handleDragLeave: inDropZone ? undefined : handleDragLeave,
+        handleDropFiles: inDropZone ? undefined : handleDropFiles,
+        attachedFiles,
+        promptAttachmentItems,
+        removeAttachedFile,
+        retryAttachedFile,
+        pastes,
+        removePaste,
+        commandAttachmentPlan,
+        editorDisabled,
+        editorRef,
+        setEditorRef,
+        editorPlaceholder,
+        animatePlaceholder,
+        handleSubmit,
+        handleArrowUpAtStart,
+        setIsEmpty,
+        handleDocChange: handleEditorDocChange,
+        allSessions,
+        slashActions,
+        handleSelectAction,
+        dockId,
+        setMenuOpen,
+        fileInputRef,
+        handleFileSelect,
+        handleAttachClick,
+        primaryAgents,
+        availableSelectedModel,
+        agentMenuOpen,
+        setAgentMenuOpen,
+        modelMenuOpen,
+        setModelMenuOpen,
+        reasoningMenuOpen,
+        setReasoningMenuOpen,
+        isEmpty,
+        canSubmit,
+        submitDisabled,
+        attachmentFailed,
+        modelRejectingImages,
+        imagesUnsupportedReason,
+        modelUnavailable,
+        agentUnavailable,
+        noModelsConnected,
+    };
+    const aboveProps = {
+        dockId,
+        quotes,
+        quoteListLabels,
+        handleRemoveQuote,
+    };
+    return (_jsxs("div", { className: cn(COMPOSER_SHELL_CLASS, 
+        // `'below'` docks the `/` menu as an overlay of later siblings
+        // (starter suggestions). `twMerge` replaces the shell's `z-10` so
+        // this stacking context sits above them; the dock's own `z-99` only
+        // ranks inside this shell and cannot do that job.
+        slashMenuPlacement === 'below' && 'z-50', parentClassName), children: [_jsx(ComposerAboveCard, { ...props, ...aboveProps }), _jsx(ComposerCard, { ...props, ...cardProps })] }));
+}
+export const Composer = memo(ComposerImpl);