@adecore/agents-react 0.0.1 → 0.17.0-beta.2

package/src/chat/ui/Composer.tsx

@@ -0,0 +1,1326 @@
+import { useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useTranslation } from 'react-i18next';
+import { indentLess, indentMore, insertNewline } from '@codemirror/commands';
+import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
+import type { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import clsx from 'clsx';
+import { ArrowUp, ChevronDown, Clock, Copy, FastForward, MessageSquare, Paperclip, Pencil, Plus, Square, SquareSlash, X, Zap } from 'lucide-react';
+import type {
+    AgentKind,
+    ChatApprovalItem,
+    ChatAttachmentUpload,
+    ChatInfo,
+    ChatItem,
+    ChatQueuedMessage,
+    ChatQuestionItem,
+    ChatSkill,
+    ModelInfo,
+    ModelSelection,
+    RuntimeMode
+} from '@adecore/agent-contracts';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { errorCode } from '../../transport';
+import { useAccountChoice } from '../account-choice';
+import { useChatActions } from '../actions';
+import type { ChatSendExtras } from '../chat-client';
+import { checkAttachmentLimits, filesOf, formatBytes, isImageAttachment, readAttachments, readStoredAttachments, uploadBytes } from '../attachments';
+import { chatSuggestions } from '../chat-references';
+import { EMPTY_DRAFT, isEmptyDraft, joinDraftText, readDraft, takeBackIntoDraft, takeDraftOffers, writeDraft, type ChatDraft } from '../drafts';
+import {
+    carriesMentions,
+    droppedMentions,
+    NO_MENTION_SEARCH,
+    dropQuery,
+    findMentionQuery,
+    findSkillQuery,
+    insertMention,
+    insertSkill,
+    mentionPick,
+    pastedMentions,
+    presentMentions,
+    presentSkills,
+    type MentionQuery,
+    type MentionSearch,
+    type TextRange
+} from '../mentions';
+import { RESUME_COMPACTION_TOKENS, resumeCompactionOffer } from '../logic/resume-compaction';
+import { dismissResumeCompaction, useResumeCompactionDismissal } from '../resume-compaction-dismissals';
+import { composerStopLabel, composerStopOf } from '../subagent-list';
+import { PROMPT_MAX_CHARS, pasteBecomesAttachment, pastedTextName, promptGuard, usableSlashCommands } from '../guards';
+import { withQuote } from '../quote';
+import { rememberChatAccount, rememberChatPreferences, rememberChatSelection } from '../preferences';
+import { STASH_SHORTCUT, stashDraft, type StashedPrompt, useStash } from '../stash';
+import { pageTimeline, scrollTimelineToEnd, subscribeTimelineEnd, timelineAtEnd } from '../timeline-scroll';
+import { ChatActivity } from './ChatActivity';
+import { ChatReferenceChip } from './ChatReferenceChip';
+import { chipDecorations } from './composer/chips';
+import { enterAction, inCode, inFenceBody, inOpenFence, listItemAt, recallDirection, tabSpaces } from './composer/keys';
+import { ComposerInput, type ComposerInputHandle } from './ComposerInput';
+import { PromptComposer } from './PromptComposer';
+import { QuoteTakerContext } from './quote-selection';
+import { LimitDock } from './LimitState';
+import { ResumeCompactionDock } from './ResumeCompactionDock';
+import { StashPicker } from './Pickers';
+import { RunSettings } from './RunSettings';
+import { UploadThumb } from './UploadThumb';
+import { formatNumber } from '@adecore/ui/format';
+import {
+    ButtonGroup,
+    ContextMenu,
+    copyText,
+    ErrorBoundary,
+    FileIcon,
+    Icon,
+    IconButton,
+    isModHeld,
+    KEY_SHORTCUTS,
+    matchesShortcut,
+    Menu,
+    PromptDialog,
+    Surface,
+    Tooltip,
+    useNow
+} from '@adecore/ui';
+import { useChatRow, waitingRequestsOf } from '../../state/chats';
+import { useProviders } from '../../state/providers';
+
+const SEARCH_DEBOUNCE_MS = 80;
+// What fits above the composer without turning the picker into a file tree.
+const MENTION_RESULTS = 8;
+// The chats go above the files, so a few leave the files in view.
+const CHAT_RESULTS = 4;
+const NOTICE_MS = 4000;
+// How many sent prompts the arrow keys walk back through, per chat.
+const PROMPT_HISTORY = 50;
+
+// Commands the composer handles itself; the CLI's own ones are sent through as text.
+const LOCAL_COMMANDS = ['model', 'compact', 'clear'];
+
+/* Files and paths dropped on the card become attachments and chips there. CodeMirror would paste a
+   file's text, or the drag's own text, at the drop point on top of that. */
+const LEAVE_DROPS_TO_THE_CARD = EditorView.domEventHandlers({
+    drop: (event) => event.dataTransfer !== null && (event.dataTransfer.types.includes('Files') || carriesMentions(event.dataTransfer.types))
+});
+
+interface ComposerProps {
+    chatId: string;
+    info: ChatInfo;
+    focused: boolean;
+    /*
+     * Set where the chat's prompts are answered somewhere else, such as a stack over a canvas: the
+     * composer then only points there, and this takes the person to it.
+     */
+    answerPromptsElsewhere?: () => void;
+    disabled: boolean;
+    /* Nothing can be written, while the chat's own prompts are still answered here. */
+    readOnly?: boolean;
+    /* Opened for one CLI from a menu. The model is the remembered one and there is nothing to pick. */
+    providerFixed: boolean;
+    onSend(text: string, extras: ChatSendExtras): void;
+    /* Another provider's model was picked before the first message; whatever holds the chat has to follow. */
+    onRetarget(provider: AgentKind, selection: ModelSelection): Promise<void>;
+}
+
+function usePendingRequests(chatId: string) {
+    // The structure, which a delta leaves alone. The prompts and the requests are items of their own.
+    const structure = useChatRow(chatId, (row) => row?.structure);
+    const order = useChatRow(chatId, (row) => row?.order);
+    const waitingBefore = useChatRow(chatId, (row) => row?.waitingBefore);
+    return useMemo(() => {
+        const approvals: ChatApprovalItem[] = [];
+        const questions: ChatQuestionItem[] = [];
+        for (const item of waitingRequestsOf(structure && order ? { structure, order, waitingBefore } : undefined)) {
+            if (item.kind === 'approval') {
+                approvals.push(item);
+            } else {
+                questions.push(item);
+            }
+        }
+        return { approvals, questions };
+    }, [structure, order, waitingBefore]);
+}
+
+/* The empty box names its sigils as key caps, so they read as keys to press rather than as punctuation. */
+function hintedPlaceholder(lead: string, joiner: string, hints: ReadonlyArray<{ key: string; label: string }>): HTMLElement {
+    const root = document.createElement('span');
+    root.className = 'composer-hints';
+    const extra = document.createElement('span');
+    extra.className = 'composer-hints-extra';
+    extra.append(joiner);
+    for (const hint of hints) {
+        const cap = document.createElement('kbd');
+        cap.textContent = hint.key;
+        extra.append(cap, hint.label);
+    }
+    root.append(lead, extra);
+    return root;
+}
+
+function splitPath(path: string): { name: string; dir: string } {
+    const slash = path.lastIndexOf('/');
+    return slash < 0 ? { name: path, dir: '' } : { name: path.slice(slash + 1), dir: path.slice(0, slash) };
+}
+
+// Keep the editor mounted while a pending request takes over, so its selection and draft survive.
+export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabled, readOnly = false, providerFixed, onSend, onRetarget }: ComposerProps) {
+    const { t } = useTranslation('agent-chat');
+    const [draft, setDraft] = useState<ChatDraft>(() => readDraft(chatId));
+    const [historyIndex, setHistoryIndex] = useState<number | null>(null);
+    const [menuIndex, setMenuIndex] = useState(0);
+    const [mention, setMention] = useState<MentionQuery | null>(null);
+    const [skillQuery, setSkillQuery] = useState<MentionQuery | null>(null);
+    const [skills, setSkills] = useState<ChatSkill[]>([]);
+    const [searched, setSearched] = useState<MentionSearch>(NO_MENTION_SEARCH);
+    const configuring = useRef(false);
+    const [configurationPending, setConfigurationPending] = useState(false);
+    const [notice, setNotice] = useState<string | null>(null);
+    const [dragging, setDragging] = useState(false);
+    const [modelPickerOpen, setModelPickerOpen] = useState(false);
+    const [confirmClear, setConfirmClear] = useState(false);
+    const [takingBack, setTakingBack] = useState<string | null>(null);
+    const scope = useChatScope();
+    const actions = useChatActions();
+    const { isApplePlatform, notify } = chatHost();
+    const registerQuoteTaker = useContext(QuoteTakerContext);
+    const inputRef = useRef<ComposerInputHandle>(null);
+    // Taking a queued message back waits on the machine, and what was typed meanwhile is what it merges with.
+    const draftRef = useRef(draft);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const [dictationToolbar, setDictationToolbar] = useState<HTMLDivElement | null>(null);
+    // A paste event says nothing about the keys behind it, so the key that asked for text inline is remembered here.
+    const pasteInlineRef = useRef(false);
+    const providers = useProviders((s) => s.providers);
+    const { approvals, questions } = usePendingRequests(chatId);
+    const order = useChatRow(chatId, (row) => row?.order);
+    // The structure, which a delta leaves alone. The prompts and the requests are items of their own.
+    const items = useChatRow(chatId, (row) => row?.structure);
+    const chats = chatHost().useReferableChats();
+    const placeholderLead = chatHost().useComposerPlaceholder(scope.id, chatId);
+
+    const pending = useMemo(() => [...approvals, ...questions], [approvals, questions]);
+    const writable = !disabled && !readOnly;
+    const provider = providers.find((entry) => entry.kind === info.provider);
+    // Absent until the host answered `provider.list`, so only an explicit false hides anything.
+    const capabilities = provider?.capabilities;
+    const compaction = capabilities?.compaction;
+    const dismissedTurnId = useResumeCompactionDismissal(chatId);
+    /* The cheap half of the offer, so a chat that can never make one keeps no timer. */
+    const couldOfferCompaction = compaction !== undefined && compaction !== 'none' && info.usage.contextTokens >= RESUME_COMPACTION_TOKENS;
+    const now = useNow(60_000, couldOfferCompaction);
+    const compactionOffer = !couldOfferCompaction
+        ? null
+        : resumeCompactionOffer({
+              info,
+              compaction,
+              items: (order ?? []).map((id) => items?.[id]).filter((item): item is ChatItem => item !== undefined),
+              dismissedTurnId,
+              now
+          });
+    const models: ModelInfo[] = provider?.models ?? [];
+    const model = models.find((entry) => entry.slug === info.selection.model);
+    const busy = info.activeTurnId !== null;
+    const queue = info.queue ?? [];
+    const text = draft.text;
+    const quote = draft.quote;
+    // The CLI announces its session on the first message, so anything before that is still a blank chat.
+    const started = info.agentSessionId !== null || info.usage.turns > 0;
+    /*
+     * A chat that has started keeps its provider (the CLI holds the thread), and one opened for a
+     * named CLI was never going to change it. Either way the models stay switchable. The CLI takes
+     * the new one on the restart the next send does anyway. With one provider in the list the
+     * picker drops its group headers on its own, so it reads as that CLI's own catalog.
+     */
+    const accountChoice = useAccountChoice(info.provider, info.account);
+    const pickable =
+        started || providerFixed
+            ? providers.filter((entry) => entry.kind === info.provider)
+            : providers.filter((entry) => entry.installed && entry.capabilities.chat);
+
+    useEffect(() => {
+        if (focused) {
+            inputRef.current?.focus();
+        }
+    }, [focused]);
+
+    useEffect(() => {
+        draftRef.current = draft;
+        writeDraft(chatId, draft);
+    }, [chatId, draft]);
+
+    useEffect(
+        () =>
+            takeDraftOffers(chatId, (offered) => {
+                setDraft((current) => ({ ...current, text: joinDraftText(current.text, offered) }));
+                inputRef.current?.focus();
+            }),
+        [chatId]
+    );
+
+    useEffect(
+        () =>
+            registerQuoteTaker?.((selected) => {
+                setDraft((current) => ({ ...current, quote: selected }));
+                inputRef.current?.focus();
+            }),
+        [registerQuoteTaker]
+    );
+
+    useEffect(() => {
+        if (!notice) {
+            return;
+        }
+        const timer = setTimeout(() => setNotice(null), NOTICE_MS);
+        return () => clearTimeout(timer);
+    }, [notice]);
+
+    // Every keystroke inside an `@word` searches again; a slow answer must not overwrite a newer one.
+    useEffect(() => {
+        if (mention === null) {
+            return;
+        }
+        let stale = false;
+        const search = (): void => {
+            const search = chatHost().searchFiles;
+            if (search === null) {
+                return;
+            }
+            search(scope.id, info.cwd, mention.query, MENTION_RESULTS)
+                .then((files) => {
+                    if (!stale) {
+                        setSearched({ query: mention.query, files });
+                        setMenuIndex(0);
+                    }
+                })
+                .catch(() => undefined);
+        };
+        // A bare `@` is not a keystroke in a query. It opens the list of what is there, at once.
+        if (mention.query === '') {
+            search();
+            return () => {
+                stale = true;
+            };
+        }
+        const timer = setTimeout(search, SEARCH_DEBOUNCE_MS);
+        return () => {
+            stale = true;
+            clearTimeout(timer);
+        };
+    }, [scope, info.cwd, mention]);
+
+    /* The host's skill list, once per chat and again once the CLI announced its own after the first message. */
+    useEffect(() => {
+        let stale = false;
+        scope.chats
+            .listSkills(chatId)
+            .then((found) => {
+                if (!stale) {
+                    setSkills(found);
+                }
+            })
+            .catch(() => undefined);
+        return () => {
+            stale = true;
+        };
+    }, [scope, chatId, info.skills]);
+
+    const history = useMemo(() => {
+        const prompts: Array<{ text: string; mentions: string[] }> = [];
+        for (const id of order ?? []) {
+            const item = items?.[id];
+            if (item?.kind === 'user') {
+                prompts.push({ text: item.text, mentions: item.mentions ?? [] });
+            }
+        }
+        // Walking back further than this is faster with the timeline than with the arrow key.
+        return prompts.slice(-PROMPT_HISTORY);
+    }, [order, items]);
+
+    const commandQuery = text.startsWith('/') && !text.includes('\n') ? text.slice(1).trim().toLowerCase() : null;
+    const commands = useMemo(() => {
+        if (commandQuery === null) {
+            return [];
+        }
+        const known = new Set(skills.map((skill) => skill.name));
+        const own = LOCAL_COMMANDS.map((name) => ({ name, hint: t(`composer.commands.${name}`), local: true, skill: false }));
+        const cli = usableSlashCommands(info.slashCommands)
+            .filter((name) => !LOCAL_COMMANDS.includes(name))
+            .map((name) => ({
+                name,
+                hint: known.has(name) ? t('composer.commands.skill') : t('composer.commands.cli', { cli: provider?.name ?? t('composer.commands.anyCli') }),
+                local: false,
+                skill: known.has(name)
+            }));
+        return [...own, ...cli].filter((command) => command.name.startsWith(commandQuery)).slice(0, 8);
+    }, [commandQuery, info.slashCommands, provider?.name, skills, t]);
+
+    const skillMatches = useMemo(() => {
+        if (skillQuery === null) {
+            return [];
+        }
+        const query = skillQuery.query.toLowerCase();
+        return skills.filter((skill) => skill.name.toLowerCase().includes(query)).slice(0, 8);
+    }, [skillQuery, skills]);
+
+    const commandMenuOpen = commandQuery !== null && commands.length > 0;
+    const skillMenuOpen = !commandMenuOpen && skillQuery !== null && skillMatches.length > 0;
+    const mentionMenuOpen = !commandMenuOpen && !skillMenuOpen && mention !== null;
+    // Results belong to the query that asked for them; a closed picker shows none while the next answer is on its way.
+    const files = mention === null ? [] : searched.files;
+    const chatMatches = useMemo(
+        () => (mention === null ? [] : chatSuggestions(chats, mention.query, [chatId, ...draft.chats], CHAT_RESULTS)),
+        [chatId, chats, draft.chats, mention]
+    );
+    const mentionCount = chatMatches.length + files.length;
+    const editorExtensions = useMemo(
+        () => [chipDecorations({ mentions: draft.mentions, skills: draft.skills }), LEAVE_DROPS_TO_THE_CARD],
+        [draft.mentions, draft.skills]
+    );
+    const guard = promptGuard(withQuote(quote, text));
+
+    const setText = (next: string, mentions = draft.mentions, chosen = draft.skills): void => {
+        setDraft((current) => ({ ...current, text: next, mentions, skills: chosen }));
+    };
+
+    const clearDraft = (): void => {
+        setDraft(EMPTY_DRAFT);
+    };
+
+    const removeQuote = (): void => {
+        setDraft((current) => ({ ...current, quote: '' }));
+        inputRef.current?.focus();
+    };
+
+    const configure = (patch: { selection?: ModelSelection; runtimeMode?: RuntimeMode; account?: string }): void => {
+        if (configuring.current) {
+            return;
+        }
+        configuring.current = true;
+        setConfigurationPending(true);
+        void actions
+            .configure(chatId, patch)
+            .then(() => {
+                if (patch.selection) {
+                    rememberChatSelection(info.provider, patch.selection);
+                }
+                if (patch.runtimeMode) {
+                    rememberChatPreferences({ runtimeMode: patch.runtimeMode });
+                }
+                if (patch.account) {
+                    rememberChatAccount(scope.id, info.provider, patch.account);
+                }
+            })
+            .catch((error: unknown) => setNotice(error instanceof Error ? error.message : String(error)))
+            .finally(() => {
+                configuring.current = false;
+                setConfigurationPending(false);
+            });
+    };
+
+    const chooseAccount = (account: string): void => configure({ account });
+
+    /* A model of another CLI re-points the whole chat; one of this CLI's own is a configure. */
+    const chooseModel = (provider: AgentKind, slug: string): void => {
+        const selection: ModelSelection = { model: slug, options: {} };
+        if (provider !== info.provider) {
+            if (configuring.current) {
+                return;
+            }
+            configuring.current = true;
+            setConfigurationPending(true);
+            void onRetarget(provider, selection)
+                .then(() => rememberChatSelection(provider, selection))
+                .catch((error: unknown) => setNotice(error instanceof Error ? error.message : String(error)))
+                .finally(() => {
+                    configuring.current = false;
+                    setConfigurationPending(false);
+                });
+            return;
+        }
+        configure({ selection });
+    };
+
+    const stop = (shiftKey: boolean): void => {
+        if (composerStopOf(shiftKey) === 'turn') {
+            void actions.stopTurn(chatId, false).catch((error: unknown) => setNotice(error instanceof Error ? error.message : String(error)));
+            return;
+        }
+        chatHost().confirm.stopSubagents(
+            scope.id,
+            chatId,
+            () => void actions.stopTurn(chatId, true).catch((error: unknown) => setNotice(error instanceof Error ? error.message : String(error)))
+        );
+    };
+
+    /* The host decides whether a turn is in the way; only its refusal asks the person first. */
+    const clearThread = async (): Promise<void> => {
+        try {
+            await actions.clear(chatId, false);
+        } catch (e) {
+            if (errorCode(e) === 'chat-busy') {
+                setConfirmClear(true);
+                return;
+            }
+            setNotice(t('composer.notice.clearFailed'));
+        }
+    };
+
+    const forceClearThread = async (): Promise<void> => {
+        await actions.clear(chatId, true);
+        setConfirmClear(false);
+    };
+
+    const compact = (): void => {
+        void actions.compact(chatId).catch(() => setNotice(t('composer.notice.compactFailed')));
+    };
+
+    const runCommand = (name: string): boolean => {
+        switch (name) {
+            case 'model':
+                setModelPickerOpen(true);
+                return true;
+            case 'compact':
+                void actions.compact(chatId).catch(() => undefined);
+                return true;
+            case 'clear':
+                void clearThread();
+                return true;
+            default:
+                return false;
+        }
+    };
+
+    const same = (a: MentionQuery | null, b: MentionQuery | null): boolean => a?.start === b?.start && a?.query === b?.query;
+
+    /* Which picker the caret opens: `@` for a file, `$` for a skill, or neither. In code a sigil is just text. */
+    const trackTriggers = (value: string, selection: TextRange, state: EditorState): void => {
+        const empty = selection.from === selection.to;
+        const tree = empty ? (ensureSyntaxTree(state, selection.from, 50) ?? syntaxTree(state)) : null;
+        const caret = tree !== null && !inCode(tree, value, selection.from) ? selection.from : null;
+        const skill = caret === null ? null : findSkillQuery(value, caret);
+        setSkillQuery((current) => (same(current, skill) ? current : skill));
+        // A CLI that does not expand `@path` gets the text as it is, so the picker stays out of the way.
+        const next = caret === null || capabilities?.mentions === false ? null : findMentionQuery(value, caret);
+        setMention((current) => (same(current, next) ? current : next));
+    };
+
+    // The inserted text reaches the editor with the render it causes, so the caret waits a frame for it.
+    const moveCaret = (caret: number): void => {
+        requestAnimationFrame(() => inputRef.current?.setCaret(caret));
+    };
+
+    const chooseMention = (path: string): void => {
+        if (!mention) {
+            return;
+        }
+        const result = insertMention(text, mention, path);
+        setText(result.text, draft.mentions.includes(path) ? draft.mentions : [...draft.mentions, path]);
+        setMention(null);
+        moveCaret(result.caret);
+    };
+
+    /* A picked chat sits beside the text as a chip, so the `@query` that found it goes. */
+    const chooseChat = (id: string): void => {
+        if (!mention) {
+            return;
+        }
+        const result = dropQuery(text, mention);
+        setDraft((current) => ({ ...current, text: result.text, chats: current.chats.includes(id) ? current.chats : [...current.chats, id] }));
+        setMention(null);
+        moveCaret(result.caret);
+    };
+
+    const chooseMentionAt = (index: number): void => {
+        const pick = mention === null ? null : mentionPick(index, chatMatches, searched, mention.query);
+        if (pick?.kind === 'chat') {
+            chooseChat(pick.chat.id);
+        } else if (pick?.kind === 'file') {
+            chooseMention(pick.path);
+        }
+    };
+
+    const removeChat = (id: string): void => {
+        setDraft((current) => ({ ...current, chats: current.chats.filter((entry) => entry !== id) }));
+        inputRef.current?.focus();
+    };
+
+    /*
+     * A picked skill becomes a `$name` chip in the text and a name on the send, which is what
+     * dispatches it. The `/` menu lands here too, so both spellings end up on the same path.
+     */
+    const chooseSkill = (name: string): void => {
+        const result = skillQuery ? insertSkill(text, skillQuery, name) : { text: `$${name} `, caret: name.length + 2 };
+        setText(result.text, draft.mentions, draft.skills.includes(name) ? draft.skills : [...draft.skills, name]);
+        setSkillQuery(null);
+        moveCaret(result.caret);
+    };
+
+    /* Paths dragged in from a list of files. There is no mention query to insert into, so they land
+       at the end of the prompt and join the draft's mentions, which is what `chat.send` carries. */
+    const addMentions = (paths: string[]): void => {
+        const fresh = paths.filter((path) => path !== '');
+        if (fresh.length === 0 || capabilities?.mentions === false) {
+            return;
+        }
+        const appended = fresh.map((path) => `@${path}`).join(' ');
+        const before = text.replace(/\s+$/, '');
+        setText(before === '' ? `${appended} ` : `${before} ${appended} `, [...draft.mentions, ...fresh.filter((path) => !draft.mentions.includes(path))]);
+    };
+
+    const addFiles = (incoming: File[]): void => {
+        if (incoming.length === 0) {
+            return;
+        }
+        if (capabilities?.attachments === false) {
+            setNotice(t('composer.notice.noAttachments', { agent: provider?.name ?? t('composer.notice.thisAgent') }));
+            return;
+        }
+        const checked = checkAttachmentLimits(
+            draft.attachments.length,
+            incoming.map((file) => ({ name: file.name, mime: file.type, bytes: file.size, file })),
+            draft.attachments.reduce((bytes, attachment) => bytes + uploadBytes(attachment), 0)
+        );
+        if (checked.rejected[0]) {
+            setNotice(t('composer.notice.rejected', { name: checked.rejected[0].name || t('composer.notice.thatFile'), reason: checked.rejected[0].reason }));
+        }
+        if (checked.accepted.length === 0) {
+            return;
+        }
+        readAttachments(checked.accepted.map((entry) => entry.file))
+            .then((attachments) => setDraft((current) => ({ ...current, attachments: [...current.attachments, ...attachments] })))
+            .catch(() => setNotice(t('composer.notice.unreadable')));
+    };
+
+    const insertIntoDraft = (added: string): void => {
+        if (writable) {
+            inputRef.current?.insert(added);
+        }
+    };
+
+    const removeAttachment = (index: number): void => {
+        setDraft((current) => ({ ...current, attachments: current.attachments.filter((_, i) => i !== index) }));
+    };
+
+    const submit = (): void => {
+        const trimmed = text.trim();
+        if (isEmptyDraft(draft) || !writable || guard.tooLong) {
+            return;
+        }
+        // Recheck restored drafts and files that finished reading concurrently.
+        const rejected = checkAttachmentLimits(
+            0,
+            draft.attachments.map((attachment) => ({ ...attachment, bytes: uploadBytes(attachment) }))
+        ).rejected[0];
+        if (rejected) {
+            setNotice(`${rejected.name}: ${rejected.reason}`);
+            return;
+        }
+        const chosen = commands[menuIndex];
+        if (commandQuery !== null && chosen?.local && runCommand(chosen.name)) {
+            clearDraft();
+            return;
+        }
+        if (commandQuery !== null && chosen?.skill) {
+            chooseSkill(chosen.name);
+            return;
+        }
+        // Whoever sends wants to see what comes back, wherever they were reading.
+        scrollTimelineToEnd(chatId, 'instant');
+        if (commandQuery !== null && chosen && !chosen.local) {
+            onSend(`/${chosen.name}`, {});
+            clearDraft();
+            return;
+        }
+        onSend(withQuote(quote, trimmed), {
+            mentions: presentMentions(trimmed, draft.mentions),
+            skills: presentSkills(trimmed, draft.skills),
+            chats: draft.chats,
+            attachments: draft.attachments
+        });
+        clearDraft();
+        setMention(null);
+        setSkillQuery(null);
+        setHistoryIndex(null);
+    };
+
+    /* A stashed prompt comes back as text, mentions and skills; its files were never kept. */
+    const restoreStashed = (prompt: StashedPrompt): void => {
+        setDraft((current) => ({ ...current, text: prompt.text, mentions: [...prompt.mentions], skills: [...prompt.skills] }));
+        setHistoryIndex(null);
+        inputRef.current?.focus();
+    };
+
+    /*
+     * The files come back from the machine before the message leaves the queue, since the machine only
+     * serves a file some message still holds. The machine's refusal is what says it already went out.
+     */
+    const takeBack = async (message: ChatQueuedMessage): Promise<void> => {
+        if (takingBack !== null) {
+            return;
+        }
+        const failed = (e: unknown): void => {
+            notify({ kind: 'error', title: t('composer.queue.editFailed'), description: e instanceof Error ? e.message : String(e) });
+        };
+        const readFiles = async (): Promise<ChatAttachmentUpload[]> => {
+            const stored = message.attachments ?? [];
+            if (stored.length === 0) {
+                return [];
+            }
+            const files = chatHost().attachments;
+            return readStoredAttachments((attachment) => files.read(scope.id, chatId, attachment.id), stored);
+        };
+        setTakingBack(message.id);
+        try {
+            let uploads: ChatAttachmentUpload[];
+            try {
+                uploads = await readFiles();
+            } catch (e) {
+                failed(e);
+                return;
+            }
+            const taken: Omit<ChatDraft, 'quote'> = {
+                text: message.text,
+                mentions: message.mentions ?? [],
+                skills: message.skills ?? [],
+                chats: message.chats ?? [],
+                attachments: uploads
+            };
+            // A file that would not fit is refused here, while the message still holds it on the machine.
+            const wouldReject = takeBackIntoDraft(draftRef.current, taken).rejected[0];
+            if (wouldReject) {
+                setNotice(t('composer.notice.queuedDoesNotFit', { name: wouldReject.name || t('composer.notice.thatFile'), reason: wouldReject.reason }));
+                return;
+            }
+            try {
+                await actions.unqueue(chatId, message.id);
+            } catch (e) {
+                if (errorCode(e) === 'request-not-found') {
+                    notify({ kind: 'error', title: t('composer.queue.alreadySent') });
+                } else {
+                    failed(e);
+                }
+                return;
+            }
+            const merged = takeBackIntoDraft(draftRef.current, taken);
+            setDraft(merged.draft);
+            if (merged.rejected[0]) {
+                setNotice(t('composer.notice.rejected', { name: merged.rejected[0].name, reason: merged.rejected[0].reason }));
+            }
+            setHistoryIndex(null);
+            inputRef.current?.focus();
+        } finally {
+            setTakingBack(null);
+        }
+    };
+
+    /* Cmd+S puts the draft away and clears the box; on an empty box the same key takes the last one back. */
+    const toggleStash = (): void => {
+        if (isEmptyDraft(draft)) {
+            const newest = useStash.getState().prompts[0];
+            if (newest) {
+                restoreStashed(newest);
+            }
+            return;
+        }
+        if (stashDraft(draft)) {
+            clearDraft();
+            setMention(null);
+            setSkillQuery(null);
+        }
+    };
+
+    const recall = (direction: -1 | 1): boolean => {
+        if (history.length === 0) {
+            return false;
+        }
+        const next = historyIndex === null ? (direction === -1 ? history.length - 1 : null) : historyIndex + direction;
+        if (next === null || next >= history.length) {
+            setHistoryIndex(null);
+            setText('', [], []);
+            return true;
+        }
+        if (next < 0) {
+            return true;
+        }
+        setHistoryIndex(next);
+        setText(history[next]!.text, history[next]!.mentions);
+        return true;
+    };
+
+    /* Runs before the editor's own keymap; true means the key is handled and its default prevented. */
+    const onKeyDown = (e: KeyboardEvent, view: EditorView): boolean => {
+        // Shift with the paste shortcut pastes a large text inline after all; any other key forgets it.
+        pasteInlineRef.current = e.shiftKey && e.key.toLowerCase() === 'v' && (isApplePlatform() ? e.metaKey : e.ctrlKey);
+        // Escape leaves the node, unless it first has a recalled prompt to put back.
+        if (e.key === 'Escape' && !e.isComposing) {
+            if (historyIndex === null) {
+                return false;
+            }
+            e.stopPropagation();
+            setHistoryIndex(null);
+            setText('', [], []);
+            return true;
+        }
+        // The composer keeps the keyboard while you type, but the shortcuts that move between views,
+        // panels and the palette stay the app's, untouched: Mod+Shift+Enter would otherwise send as well.
+        if (chatHost().isAppShortcut(e)) {
+            return false;
+        }
+        e.stopPropagation();
+        // A key inside an IME composition belongs to the composition, Enter and the arrows included.
+        if (e.isComposing) {
+            return false;
+        }
+        // Reading back through a long answer should not mean leaving the box you are typing in.
+        if (e.key === 'PageUp' || e.key === 'PageDown') {
+            return pageTimeline(chatId, e.key === 'PageUp' ? -1 : 1);
+        }
+        if (matchesShortcut(STASH_SHORTCUT, e, isApplePlatform())) {
+            toggleStash();
+            return true;
+        }
+        if (commandMenuOpen) {
+            if (e.key === 'ArrowDown') {
+                setMenuIndex((i) => (i + 1) % commands.length);
+                return true;
+            }
+            if (e.key === 'ArrowUp') {
+                setMenuIndex((i) => (i - 1 + commands.length) % commands.length);
+                return true;
+            }
+            if (e.key === 'Tab') {
+                const chosen = commands[menuIndex]!;
+                if (chosen.skill) {
+                    chooseSkill(chosen.name);
+                } else {
+                    setText(`/${chosen.name} `);
+                }
+                return true;
+            }
+        }
+        if (skillMenuOpen) {
+            if (e.key === 'ArrowDown') {
+                setMenuIndex((i) => (i + 1) % skillMatches.length);
+                return true;
+            }
+            if (e.key === 'ArrowUp') {
+                setMenuIndex((i) => (i - 1 + skillMatches.length) % skillMatches.length);
+                return true;
+            }
+            if (e.key === 'Tab' || e.key === 'Enter') {
+                chooseSkill((skillMatches[menuIndex] ?? skillMatches[0]!).name);
+                return true;
+            }
+        }
+        if (mentionMenuOpen && mentionCount > 0) {
+            if (e.key === 'ArrowDown') {
+                setMenuIndex((i) => (i + 1) % mentionCount);
+                return true;
+            }
+            if (e.key === 'ArrowUp') {
+                setMenuIndex((i) => (i - 1 + mentionCount) % mentionCount);
+                return true;
+            }
+            if (e.key === 'Tab' || e.key === 'Enter') {
+                chooseMentionAt(menuIndex);
+                return true;
+            }
+        }
+        // In a fence Tab indents like a code editor; anywhere else it keeps moving the focus.
+        if (e.key === 'Tab' && !e.altKey && !e.metaKey && !e.ctrlKey) {
+            const { state } = view;
+            const { from, to, head } = state.selection.main;
+            const tree = ensureSyntaxTree(state, state.doc.length, 50) ?? syntaxTree(state);
+            if (inFenceBody(tree, state.doc.toString(), head)) {
+                // Handled even when there is nothing to outdent, so Shift+Tab never throws the focus out of a block.
+                if (e.shiftKey) {
+                    indentLess(view);
+                } else if (from !== to) {
+                    indentMore(view);
+                } else {
+                    view.dispatch(state.replaceSelection(tabSpaces(head - state.doc.lineAt(head).from)), { scrollIntoView: true, userEvent: 'input' });
+                }
+                return true;
+            }
+        }
+        if (e.key === 'Enter') {
+            const { state } = view;
+            const { from, to, head } = state.selection.main;
+            // Parsed to the end, since the fence that closes the block can sit after the caret.
+            const tree = ensureSyntaxTree(state, state.doc.length, 50) ?? syntaxTree(state);
+            const line = state.doc.lineAt(head);
+            const list = from === to && !inCode(tree, state.doc.toString(), head) ? listItemAt(line.text) : null;
+            const action = enterAction(
+                { shift: e.shiftKey, mod: isModHeld(e, isApplePlatform()) },
+                { inOpenFence: inOpenFence(tree, head), list, column: head - line.from }
+            );
+            if (action === 'newline') {
+                return insertNewline(view);
+            }
+            if (action === 'continue-list' && list) {
+                view.dispatch({
+                    changes: { from: head, insert: `\n${list.next}` },
+                    selection: { anchor: head + 1 + list.next.length },
+                    scrollIntoView: true,
+                    userEvent: 'input'
+                });
+                return true;
+            }
+            if (action === 'leave-list') {
+                view.dispatch({ changes: { from: line.from, to: line.to }, selection: { anchor: line.from }, userEvent: 'delete' });
+                return true;
+            }
+            submit();
+            return true;
+        }
+        const { from, to } = view.state.selection.main;
+        const recalled = historyIndex !== null && text === history[historyIndex]?.text;
+        const direction = recallDirection({ key: e.key, text, from, to, recalled });
+        return direction !== null && recall(direction);
+    };
+
+    /* Files become attachments and a long text a file of its own; anything else the editor pastes as plain text. */
+    const onPaste = (e: ClipboardEvent, view: EditorView): boolean => {
+        const data = e.clipboardData;
+        if (!data) {
+            return false;
+        }
+        const pasted = filesOf(data);
+        if (pasted.length > 0) {
+            addFiles(pasted);
+            return true;
+        }
+        const inline = pasteInlineRef.current;
+        pasteInlineRef.current = false;
+        const clip = data.getData('text/plain');
+        const mentions = capabilities?.mentions === false ? [] : pastedMentions(clip);
+        if (mentions.length > 0) {
+            // The editor's own change reads the draft as it was rendered, so the mentions join it after that change.
+            view.dispatch(view.state.replaceSelection(clip), { scrollIntoView: true, userEvent: 'input.paste' });
+            setDraft((current) => ({ ...current, mentions: [...current.mentions, ...mentions.filter((path) => !current.mentions.includes(path))] }));
+            return true;
+        }
+        // Without attachments there is nowhere else for the text to go, so it pastes as it always did.
+        if (inline || capabilities?.attachments === false || !pasteBecomesAttachment(clip)) {
+            return false;
+        }
+        // The paste still replaces what was selected; it just puts nothing in its place.
+        const { from, to } = view.state.selection.main;
+        if (from !== to) {
+            view.dispatch({ changes: { from, to }, userEvent: 'delete' });
+        }
+        const name = pastedTextName(draft.attachments.map((attachment) => attachment.name));
+        addFiles([new File([clip], name, { type: 'text/plain' })]);
+        return true;
+    };
+
+    /* The timeline owns the scroller; this is the one bit of it the composer needs to know. */
+    const atEnd = useSyncExternalStore(
+        subscribeTimelineEnd,
+        () => timelineAtEnd(chatId),
+        () => true
+    );
+
+    const mentionable = capabilities?.mentions !== false;
+    const hasSkills = skills.length > 0;
+    const placeholder = useMemo(() => {
+        if (disabled) {
+            return t('composer.placeholder.disconnected');
+        }
+        if (readOnly) {
+            return t('composer.placeholder.readOnly');
+        }
+        return hintedPlaceholder(placeholderLead ?? t('composer.placeholder.lead'), t('composer.placeholder.joiner'), [
+            { key: '/', label: t('composer.placeholder.commands') },
+            ...(mentionable ? [{ key: '@', label: t('composer.placeholder.files') }] : []),
+            ...(hasSkills ? [{ key: '$', label: t('composer.placeholder.skills') }] : [])
+        ]);
+    }, [disabled, readOnly, placeholderLead, mentionable, hasSkills, t]);
+    const attachable = capabilities?.attachments !== false;
+    const Slot = chatHost().ComposerSlot;
+
+    return (
+        <div className="chat-composer-content pointer-events-none relative z-10 w-full">
+            {/* Only while there is something below the fold. It sits over the composer rather than
+                in the thread, because the composer is the one thing whose height it always clears. */}
+            {/* A read-only composer sits under something that stands in the thread's place, whose end is not this one. */}
+            {!atEnd && !readOnly && (
+                <div className="absolute inset-x-0 bottom-full mb-2 flex justify-center">
+                    <Tooltip label={t('composer.jumpToEnd')} name>
+                        <Surface
+                            render={<button onClick={() => scrollTimelineToEnd(chatId)} />}
+                            className="pointer-events-auto grid h-8 w-8 place-items-center rounded-full text-text-muted hover:text-text"
+                        >
+                            <Icon icon={ChevronDown} size={16} />
+                        </Surface>
+                    </Tooltip>
+                </div>
+            )}
+            <ChatActivity chatId={chatId} />
+            <div
+                className={clsx(
+                    '@container/composer pointer-events-auto flex flex-col overflow-hidden rounded-2xl border shadow-float backdrop-blur-[14px] focus-ring-within',
+                    dragging
+                        ? 'border-accent bg-[color-mix(in_srgb,var(--accent-soft)_60%,var(--surface-raised))]'
+                        : 'border-border bg-[color-mix(in_srgb,var(--surface-raised)_92%,transparent)]'
+                )}
+                /* The whole card takes a dropped file as a mention, so a layout around it that takes drops
+                   of its own leaves it alone. */
+                data-takes-drop="all"
+                onDragOver={(e) => {
+                    if (writable && (e.dataTransfer.types.includes('Files') || carriesMentions(e.dataTransfer.types))) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setDragging(true);
+                    }
+                }}
+                onDragLeave={(e) => {
+                    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+                        setDragging(false);
+                    }
+                }}
+                onDrop={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setDragging(false);
+                    addMentions(droppedMentions(e.dataTransfer));
+                    addFiles(filesOf(e.dataTransfer));
+                    inputRef.current?.focus();
+                }}
+            >
+                <PromptComposer
+                    chatId={chatId}
+                    pending={pending}
+                    focused={focused}
+                    onShowElsewhere={answerPromptsElsewhere}
+                    disabled={disabled}
+                    hasDraft={!isEmptyDraft(draft)}
+                    denyReason={capabilities?.denyReason === true}
+                    onAllAnswered={() => inputRef.current?.focus()}
+                >
+                    <LimitDock chatId={chatId} info={info} />
+                    {compactionOffer && (
+                        <ResumeCompactionDock
+                            tokens={compactionOffer.tokens}
+                            onCompact={compact}
+                            onDismiss={() => dismissResumeCompaction(scope, chatId, compactionOffer.turnId)}
+                        />
+                    )}
+                    {commandMenuOpen && (
+                        <div className="border-b border-border px-1.5 py-1.5">
+                            {commands.map((command, index) => (
+                                <button
+                                    key={command.name}
+                                    data-active={index === menuIndex}
+                                    className="cursor-row flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted"
+                                    onMouseEnter={() => setMenuIndex(index)}
+                                    onMouseDown={(e) => e.preventDefault()}
+                                    onClick={() => {
+                                        setMenuIndex(index);
+                                        if (command.skill) {
+                                            chooseSkill(command.name);
+                                            return;
+                                        }
+                                        setText(`/${command.name}`);
+                                        inputRef.current?.focus();
+                                    }}
+                                >
+                                    <Icon
+                                        icon={command.skill ? Zap : SquareSlash}
+                                        size={12}
+                                        className={clsx('shrink-0', command.skill ? 'text-skill' : 'text-text-faint')}
+                                    />
+                                    <span className="font-mono text-text">/{command.name}</span>
+                                    <span className="text-text-faint">{command.hint}</span>
+                                </button>
+                            ))}
+                        </div>
+                    )}
+                    {skillMenuOpen && (
+                        <div className="border-b border-border px-1.5 py-1.5">
+                            {skillMatches.map((skill, index) => (
+                                <button
+                                    key={skill.name}
+                                    data-active={index === menuIndex}
+                                    className="cursor-row flex w-full items-start gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted"
+                                    onMouseEnter={() => setMenuIndex(index)}
+                                    onMouseDown={(e) => e.preventDefault()}
+                                    onClick={() => chooseSkill(skill.name)}
+                                >
+                                    <Icon icon={Zap} size={12} className="mt-0.5 shrink-0 text-skill" />
+                                    <span className="flex min-w-0 flex-col">
+                                        <span className="truncate font-mono text-text">${skill.name}</span>
+                                        {skill.description !== '' && <span className="line-clamp-1 text-text-faint">{skill.description}</span>}
+                                    </span>
+                                </button>
+                            ))}
+                        </div>
+                    )}
+                    {mentionMenuOpen && (
+                        <div className="border-b border-border px-1.5 py-1.5">
+                            {chatMatches.length > 0 && <Menu.Label>{t('composer.mentions.chats')}</Menu.Label>}
+                            {chatMatches.map((chat, index) => (
+                                <button
+                                    key={chat.id}
+                                    data-active={index === menuIndex}
+                                    className="cursor-row flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted"
+                                    onMouseEnter={() => setMenuIndex(index)}
+                                    onMouseDown={(e) => e.preventDefault()}
+                                    onClick={() => chooseChat(chat.id)}
+                                >
+                                    <Icon icon={MessageSquare} size={14} className="shrink-0 text-text-faint" />
+                                    <span className="truncate text-text">{chat.title || t('chatReference.untitled')}</span>
+                                </button>
+                            ))}
+                            {files.length > 0 && (mention.query === '' || chatMatches.length > 0) && (
+                                <Menu.Label>{mention.query === '' ? t('composer.mentions.here') : t('composer.mentions.files')}</Menu.Label>
+                            )}
+                            {mentionCount === 0 && (
+                                <div className="px-2 py-1 text-xs text-text-faint">
+                                    {mention.query ? t('composer.mentions.noMatch') : t('composer.mentions.empty')}
+                                </div>
+                            )}
+                            {files.map((path, index) => {
+                                const { name, dir } = splitPath(path);
+                                return (
+                                    <button
+                                        key={path}
+                                        data-active={chatMatches.length + index === menuIndex}
+                                        className="cursor-row flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted"
+                                        onMouseEnter={() => setMenuIndex(chatMatches.length + index)}
+                                        onMouseDown={(e) => e.preventDefault()}
+                                        onClick={() => chooseMention(path)}
+                                    >
+                                        <FileIcon path={path} size={14} />
+                                        <span className="truncate font-mono text-text">{name}</span>
+                                        {dir && <span className="min-w-0 truncate text-text-faint">{dir}</span>}
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    )}
+                    {queue.length > 0 && (
+                        <div className="flex flex-col gap-1 border-b border-border px-2 py-1.5">
+                            {info.queuePaused === true && <p className="px-1.5 text-xs text-text-muted">{t('composer.queue.paused')}</p>}
+                            {queue.map((message) => {
+                                const sendNow = (): void => {
+                                    scrollTimelineToEnd(chatId, 'instant');
+                                    void actions.sendNow(chatId, message.id).catch(() => undefined);
+                                };
+                                const unqueue = (): void => void actions.unqueue(chatId, message.id).catch(() => undefined);
+                                const edit = (): void => void takeBack(message);
+                                return (
+                                    <ContextMenu.Root key={message.id}>
+                                        <ContextMenu.Trigger className="group/queued flex items-center gap-2 rounded-md px-1.5 py-1 text-xs text-text-muted">
+                                            <Icon icon={Clock} size={12} className="shrink-0 text-text-faint" />
+                                            <span className="min-w-0 grow truncate">
+                                                {message.text || t('composer.queue.attachments', { count: message.attachments?.length ?? 0 })}
+                                            </span>
+                                            <ButtonGroup
+                                                render={<span />}
+                                                className="opacity-0 transition-opacity group-hover/queued:opacity-100 focus-within:opacity-100"
+                                            >
+                                                <IconButton icon={FastForward} size="2xs" label={t('composer.queue.sendNow')} onClick={sendNow} />
+                                                <IconButton
+                                                    icon={Pencil}
+                                                    size="2xs"
+                                                    label={t('common.action.edit')}
+                                                    disabled={takingBack !== null}
+                                                    onClick={edit}
+                                                />
+                                                <IconButton icon={X} size="2xs" label={t('common.action.remove')} onClick={unqueue} />
+                                            </ButtonGroup>
+                                        </ContextMenu.Trigger>
+                                        <ContextMenu.Popup>
+                                            <ContextMenu.Item onClick={sendNow}>
+                                                <Icon icon={FastForward} size={14} /> {t('composer.queue.sendNow')}
+                                            </ContextMenu.Item>
+                                            <ContextMenu.Item disabled={takingBack !== null} onClick={edit}>
+                                                <Icon icon={Pencil} size={14} /> {t('common.action.edit')}
+                                            </ContextMenu.Item>
+                                            <ContextMenu.Item disabled={message.text === ''} onClick={() => copyText(message.text)}>
+                                                <Icon icon={Copy} size={14} /> {t('common.action.copy')}
+                                            </ContextMenu.Item>
+                                            <ContextMenu.Separator />
+                                            <ContextMenu.Item className="text-status-error" onClick={unqueue}>
+                                                <Icon icon={X} size={14} /> {t('common.action.remove')}
+                                            </ContextMenu.Item>
+                                        </ContextMenu.Popup>
+                                    </ContextMenu.Root>
+                                );
+                            })}
+                        </div>
+                    )}
+                    {quote !== '' && (
+                        <div className="flex items-center gap-2 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3">
+                            <span className="min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-xs text-text-muted">{quote}</span>
+                            <IconButton icon={X} size="2xs" label={t('composer.quote.remove')} onClick={removeQuote} />
+                        </div>
+                    )}
+                    {draft.chats.length > 0 && (
+                        <div className="flex flex-wrap gap-1.5 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3">
+                            {draft.chats.map((id) => (
+                                <ChatReferenceChip key={id} chatId={id} onRemove={() => removeChat(id)} />
+                            ))}
+                        </div>
+                    )}
+                    {draft.attachments.length > 0 && (
+                        <div className="flex flex-wrap gap-2 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3">
+                            {draft.attachments.map((attachment, index) => (
+                                <div key={`${attachment.name}-${index}`} className="group/thumb relative">
+                                    {isImageAttachment(attachment.mime) ? (
+                                        <UploadThumb upload={attachment} />
+                                    ) : (
+                                        <span className="flex h-14 w-36 flex-col justify-center gap-0.5 rounded-lg border border-border bg-surface-sunken px-2.5">
+                                            <span className="flex items-center gap-1.5 text-xs text-text">
+                                                <Icon icon={Paperclip} size={12} className="shrink-0 text-text-faint" />
+                                                <span className="truncate">{attachment.name}</span>
+                                            </span>
+                                            <span className="pl-5 text-xs text-text-faint">{formatBytes(uploadBytes(attachment))}</span>
+                                        </span>
+                                    )}
+                                    <IconButton
+                                        icon={X}
+                                        size="2xs"
+                                        label={t('composer.removeAttachment', { name: attachment.name })}
+                                        className="absolute -top-1.5 -right-1.5 border border-border bg-surface-raised opacity-0 transition-opacity group-hover/thumb:opacity-100 focus-visible:opacity-100"
+                                        onClick={() => removeAttachment(index)}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                    <ComposerInput
+                        ref={inputRef}
+                        dictationToolbar={dictationToolbar}
+                        className="composer-input select-text text-sm leading-normal text-text"
+                        value={text}
+                        placeholder={placeholder}
+                        disabled={!writable}
+                        tabbable={focused}
+                        extensions={editorExtensions}
+                        onChange={(value, selection, state) => {
+                            setText(value);
+                            setMenuIndex(0);
+                            trackTriggers(value, selection, state);
+                            if (historyIndex !== null && value !== history[historyIndex]?.text) {
+                                setHistoryIndex(null);
+                            }
+                        }}
+                        onSelectionChange={trackTriggers}
+                        onBlur={() => {
+                            setMention(null);
+                            setSkillQuery(null);
+                        }}
+                        onKeyDown={onKeyDown}
+                        onPaste={onPaste}
+                    />
+                    {notice && (
+                        <div className="px-5 pb-1 text-xs text-status-error @max-md/composer:px-3.5" role="alert">
+                            {notice}
+                        </div>
+                    )}
+                    {guard.visible && (
+                        <div
+                            className={clsx(
+                                'px-5 pb-1 text-right text-xs tabular-nums @max-md/composer:px-3.5',
+                                guard.tooLong ? 'text-status-error' : 'text-text-faint'
+                            )}
+                        >
+                            {formatNumber(guard.count)} / {formatNumber(PROMPT_MAX_CHARS)}
+                            {guard.tooLong && ` ${t('composer.tooLong')}`}
+                        </div>
+                    )}
+                    {/* The composer's controls are round, from attach to send, so they keep their own shape instead of `.icon-btn`'s. */}
+                    <div className="flex items-center gap-2 pt-3 pr-3.5 pb-3.5 pl-5 @max-md/composer:gap-1.5 @max-md/composer:p-3 @max-md/composer:pt-2.5">
+                        {attachable && (
+                            <Tooltip label={t('composer.attach')} name>
+                                <button
+                                    type="button"
+                                    className="grid h-8 w-8 shrink-0 place-items-center rounded-full border border-border text-text-muted hover:bg-surface-hover hover:text-text disabled:opacity-50"
+                                    disabled={!writable}
+                                    onClick={() => fileInputRef.current?.click()}
+                                >
+                                    <Icon icon={Plus} size={16} />
+                                </button>
+                            </Tooltip>
+                        )}
+                        <input
+                            ref={fileInputRef}
+                            type="file"
+                            multiple
+                            hidden
+                            onChange={(e) => {
+                                addFiles(Array.from(e.target.files ?? []));
+                                e.target.value = '';
+                                inputRef.current?.focus();
+                            }}
+                        />
+                        <RunSettings
+                            disabled={configurationPending || !writable}
+                            providers={pickable}
+                            provider={info.provider}
+                            selection={info.selection}
+                            model={model}
+                            runtimeMode={info.runtimeMode}
+                            effectiveRuntimeMode={info.effectiveRuntimeMode}
+                            permissionMode={info.permissionMode}
+                            open={modelPickerOpen}
+                            onOpenChange={setModelPickerOpen}
+                            onModel={chooseModel}
+                            onOption={(id, value) => configure({ selection: { ...info.selection, options: { ...info.selection.options, [id]: value } } })}
+                            onMode={(runtimeMode) => configure({ runtimeMode })}
+                            usage={info.usage}
+                            compactDisabled={busy || !writable}
+                            onCompact={compact}
+                            account={accountChoice === null ? null : { choice: accountChoice, started, onPick: chooseAccount }}
+                        />
+                        <StashPicker onRestore={restoreStashed} />
+                        {Slot !== null && (
+                            <ErrorBoundary label={t('composer.slotFailed')} resetKeys={[chatId]} compact className="relative rounded-lg">
+                                <Slot scopeId={scope.id} chatId={chatId} disabled={!writable} insert={insertIntoDraft} />
+                            </ErrorBoundary>
+                        )}
+                        <span className="grow" />
+                        <div className="flex h-9 shrink-0 items-center gap-0.5 rounded-full bg-surface-hover">
+                            <div ref={setDictationToolbar} className="flex items-center pl-1 empty:hidden [&_.icon-btn]:rounded-full" />
+                            {busy && (
+                                <Tooltip label={composerStopLabel()} name>
+                                    <button
+                                        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-status-error text-accent-text"
+                                        onClick={(event) => stop(event.shiftKey)}
+                                    >
+                                        <Icon icon={Square} size={16} />
+                                    </button>
+                                </Tooltip>
+                            )}
+                            {/* While a turn runs the same button queues the message instead of sending it. */}
+                            {(!busy || !isEmptyDraft(draft)) && (
+                                <Tooltip label={busy ? t('composer.queueButton') : t('composer.send')} kbd={KEY_SHORTCUTS.modEnter} name>
+                                    <button
+                                        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100"
+                                        disabled={isEmptyDraft(draft) || !writable || guard.tooLong}
+                                        onClick={submit}
+                                    >
+                                        <Icon icon={ArrowUp} size={16} />
+                                    </button>
+                                </Tooltip>
+                            )}
+                        </div>
+                    </div>
+                </PromptComposer>
+            </div>
+            <PromptDialog
+                open={confirmClear}
+                title={t('composer.clear.title')}
+                description={t('composer.clear.description')}
+                confirmLabel={t('composer.clear.confirm')}
+                danger
+                fallbackMessage={t('composer.notice.clearFailed')}
+                onConfirm={forceClearThread}
+                onOpenChange={() => setConfirmClear(false)}
+            />
+        </div>
+    );
+}