@adecore/agents-react 0.23.1 → 0.24.0

package/src/chat/ui/Composer.tsx

@@ -1,109 +1,46 @@
-import { useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { 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 { ChevronDown } from 'lucide-react';
+import type { AgentKind, ChatInfo, ModelSelection } from '@adecore/agent-contracts';
+import { Icon, PromptDialog, Surface, Tooltip } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { useChatHost } from '../../host';
+import { canSteer } from '../../providers/provider-abilities';
 import { useChatScope } from '../../scope';
-import { errorCode } from '../../transport';
-import { useAccountChoice } from '../account-choice';
-import { useChatActions } from '../actions';
+import { useProviders } from '../../state/providers';
 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 { isEmptyDraft } from '../drafts';
+import { PROMPT_MAX_CHARS, promptGuard } from '../guards';
+import { useChatPreferences } from '../preferences';
 import { withQuote } from '../quote';
-import { rememberChatAccount, rememberChatPreferences, rememberChatSelection } from '../preferences';
-import { STASH_SHORTCUT, stashDraft, type StashedPrompt, useStash } from '../stash';
-import { jumpToTimelineItem, pageTimeline, scrollTimelineToEnd, subscribeTimelineEnd, timelineAtEnd } from '../timeline-scroll';
+import { dismissResumeCompaction } from '../resume-compaction-dismissals';
+import { sendShortcut } from '../send-key';
+import { scrollTimelineToEnd, subscribeTimelineEnd, timelineAtEnd } from '../timeline-scroll';
 import { ChatActivity } from './ChatActivity';
-import { ChatReferenceChip } from './ChatReferenceChip';
-import { chipDecorations } from './composer/chips';
-import { clampMenuIndex, composerMenuAria, optionIdOf } from './composer/menu-aria';
-import { enterAction, inCode, inFenceBody, inOpenFence, listItemAt, recallDirection, tabSpaces } from './composer/keys';
 import { ComposerInput, type ComposerInputHandle } from './ComposerInput';
-import { holdLiftsIn, type HoldRelease } from '../prompt-hold';
-import { PromptComposer, type PromptHold } from './PromptComposer';
-import { QuoteTakerContext } from './quote-selection';
+import { GoalDock } from './GoalDock';
 import { LimitDock } from './LimitState';
+import { PromptComposer } from './PromptComposer';
 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'];
-
-/* The card turns dropped files and paths into attachments and chips; CodeMirror would also paste their text at the drop point. */
-const LEAVE_DROPS_TO_THE_CARD = EditorView.domEventHandlers({
-    drop: (event) => event.dataTransfer !== null && (event.dataTransfer.types.includes('Files') || carriesMentions(event.dataTransfer.types))
-});
+import { chipDecorations } from './composer/chips';
+import { ComposerControls } from './composer/ComposerControls';
+import { ComposerMenu } from './composer/ComposerMenu';
+import { DraftAttachments, DraftChats, DraftQuote } from './composer/DraftParts';
+import { composerKeyHandler } from './composer/key-handler';
+import { useHintedPlaceholder } from './composer/placeholder';
+import { QueuedMessages } from './composer/QueuedMessages';
+import { useChatControls } from './composer/use-chat-controls';
+import { useCompactionOffer } from './composer/use-compaction-offer';
+import { useComposerDraft } from './composer/use-composer-draft';
+import { useComposerMenus } from './composer/use-composer-menus';
+import { useComposerSubmit } from './composer/use-composer-submit';
+import { LEAVE_DROPS_TO_THE_CARD, useDraftFiles } from './composer/use-draft-files';
+import { useNotice } from './composer/use-notice';
+import { usePendingRequests } from './composer/use-pending-requests';
+import { usePromptHistory } from './composer/use-prompt-history';
+import { usePromptHold } from './composer/use-prompt-hold';
+import { useTakeBack } from './composer/use-take-back';
 
 interface ComposerProps {
     chatId: string;
@@ -119,916 +56,103 @@ interface ComposerProps {
     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;
+    /* A promise says whether the host took the message, which a send that also opens a new chat waits for. */
+    onSend(text: string, extras: ChatSendExtras): void | Promise<boolean>;
     /* 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 sendLabelKey(busy: boolean, canSteer: boolean, delivery: 'queue' | 'steer'): string {
+function sendLabelKey(busy: boolean, steerable: boolean, delivery: 'queue' | 'steer'): string {
     if (!busy) {
         return 'composer.send';
     }
-    if (!canSteer) {
+    if (!steerable) {
         return 'composer.queueButton';
     }
     return delivery === 'steer' ? 'composer.steerButton' : 'composer.queueWithSteerButton';
 }
 
-function sameQuery(left: MentionQuery | null, right: MentionQuery | null): boolean {
-    return left?.start === right?.start && left?.query === right?.query;
-}
-
-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.
-/*
- * Keeps a waiting prompt card behind the draft while the person types. Typing, pasting and dictating
- * all change the draft, so `noteInput` is called from its change handler; the hold lifts after a pause.
- */
-function usePromptHold(): PromptHold & { noteInput(): void; setComposing(composing: boolean): void } {
-    const typedAt = useRef<number | null>(null);
-    const composing = useRef(false);
-    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const [state, setState] = useState<{ held: boolean; releasedBy: HoldRelease | null }>({ held: false, releasedBy: null });
-
-    const clearTimer = (): void => {
-        if (timer.current !== null) {
-            clearTimeout(timer.current);
-            timer.current = null;
-        }
-    };
-
-    const release = (reason: HoldRelease): void => {
-        clearTimer();
-        typedAt.current = null;
-        composing.current = false;
-        setState((current) => (current.held ? { held: false, releasedBy: reason } : current));
-    };
-
-    const schedule = (): void => {
-        clearTimer();
-        const wait = holdLiftsIn({ typedAt: typedAt.current, composing: composing.current }, Date.now());
-        if (wait !== null) {
-            timer.current = setTimeout(() => release('pause'), wait);
-        }
-    };
-
-    const noteInput = (): void => {
-        typedAt.current = Date.now();
-        setState({ held: true, releasedBy: null });
-        schedule();
-    };
-
-    const setComposing = (next: boolean): void => {
-        composing.current = next;
-        if (next) {
-            setState({ held: true, releasedBy: null });
-        } else {
-            typedAt.current = Date.now();
-        }
-        schedule();
-    };
-
-    useEffect(() => clearTimer, []);
-
-    return { held: state.held, releasedBy: state.releasedBy, release, noteInput, setComposing };
-}
-
 export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabled, readOnly = false, providerFixed, onSend, onRetarget }: ComposerProps) {
     const { t } = useTranslation('agent-chat');
-    const sendDelivery = chatHost().useSendDelivery();
-    const canSteer = info.provider === 'claude' || info.provider === 'codex';
-    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 host = useChatHost();
     const scope = useChatScope();
-    const actions = useChatActions();
-    const { isApplePlatform, notify } = chatHost();
-    const registerQuoteTaker = useContext(QuoteTakerContext);
-    const inputRef = useRef<ComposerInputHandle>(null);
-    const hold = usePromptHold();
-    // 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);
-    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);
+    const sendDelivery = host.useSendDelivery();
+    const sendKey = useChatPreferences((preferences) => preferences.sendKey);
+    const provider = useProviders((row) => row.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 steerable = canSteer(capabilities);
+    const writable = !disabled && !readOnly;
     const busy = info.activeTurnId !== null;
-    const queue = info.queue ?? [];
-    const text = draft.text;
-    const quote = draft.quote;
-    const quoteSource = draft.quoteSource;
-    // 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;
-    const accountChoice = useAccountChoice(info.provider, info.account);
-    // A chat that has started keeps its provider (the CLI holds the thread), and so does one opened for a
-    // named CLI; its models stay switchable, since the CLI takes a new one on the restart the next send does.
-    const pickable =
-        started || providerFixed
-            ? providers.filter((entry) => entry.kind === info.provider)
-            : providers.filter((entry) => entry.installed && entry.capabilities.chat);
-
-    useEffect(() => {
-        if (focused) {
+    const inputRef = useRef<ComposerInputHandle>(null);
+    const [dictationToolbar, setDictationToolbar] = useState<HTMLDivElement | null>(null);
+    const hold = usePromptHold();
+    const box = useComposerDraft(chatId, inputRef);
+    const { draft } = box;
+    const notice = useNotice();
+    const history = usePromptHistory(chatId, box.setText);
+    const menus = useComposerMenus({ chatId, info, capabilities, providerName: provider?.name, draft: box, inputRef });
+    const files = useDraftFiles({ capabilities, providerName: provider?.name, writable, draft: box, inputRef, setNotice: notice.setNotice });
+    const controls = useChatControls({ chatId, info, notice, onRetarget });
+    const guard = promptGuard(withQuote(draft.quote, draft.text));
+    const { submit, restoreStashed, toggleStash } = useComposerSubmit({
+        chatId,
+        writable,
+        guard,
+        steerable,
+        sendDelivery,
+        draft: box,
+        menus,
+        controls,
+        history,
+        hold,
+        inputRef,
+        setNotice: notice.setNotice,
+        onSend
+    });
+    const { takingBack, takeBack } = useTakeBack({
+        chatId,
+        draft: box,
+        setNotice: notice.setNotice,
+        onTaken: () => {
+            history.forget();
             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, itemId) => {
-                setDraft((current) => ({ ...current, quote: selected, quoteSource: itemId }));
-                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 searchFiles = chatHost().searchFiles;
-            if (searchFiles === null) {
-                return;
-            }
-            searchFiles(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;
-    // One menu is open at a time, so they share an id.
-    const listId = useId();
-    const mentionsLabelId = `${listId}-chats`;
-    const filesLabelId = `${listId}-files`;
-    const filesLabelShown = mention !== null && (mention.query === '' || chatMatches.length > 0);
-    const menuOpen = commandMenuOpen || skillMenuOpen || mentionMenuOpen;
-    const menuCount = commandMenuOpen ? commands.length : skillMenuOpen ? skillMatches.length : mentionCount;
-    // The list can shrink under a stale index; every reader takes the one that still points at an option.
-    const activeIndex = clampMenuIndex(menuIndex, menuCount);
-    const inputAria = useMemo(
-        () =>
-            composerMenuAria({
-                label: t('composer.inputLabel'),
-                listId,
-                open: menuOpen,
-                activeIndex,
-                count: menuCount
-            }),
-        [t, listId, menuOpen, activeIndex, menuCount]
-    );
+    });
+    const pending = usePendingRequests(chatId);
+    const compactionOffer = useCompactionOffer(chatId, info, capabilities?.compaction);
+    const placeholder = useHintedPlaceholder({ chatId, disabled, readOnly, mentionable: capabilities?.mentions !== false, hasSkills: menus.hasSkills });
     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: '', quoteSource: null }));
-        inputRef.current?.focus();
-    };
-
-    const showError = (error: unknown): void => {
-        setNotice(error instanceof Error ? error.message : String(error));
-    };
-
-    /* One configuration at a time; a second pick while one is on its way is dropped. */
-    const runConfiguration = (work: () => Promise<void>): void => {
-        if (configuring.current) {
-            return;
-        }
-        configuring.current = true;
-        setConfigurationPending(true);
-        void work()
-            .catch(showError)
-            .finally(() => {
-                configuring.current = false;
-                setConfigurationPending(false);
-            });
-    };
-
-    const configure = (patch: { selection?: ModelSelection; runtimeMode?: RuntimeMode; account?: string }): void => {
-        runConfiguration(() =>
-            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);
-                }
-            })
-        );
-    };
-
-    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) {
-            runConfiguration(() => onRetarget(provider, selection).then(() => rememberChatSelection(provider, selection)));
-            return;
-        }
-        configure({ selection });
-    };
-
-    const stop = (shiftKey: boolean): void => {
-        if (composerStopOf(shiftKey) === 'turn') {
-            void actions.stopTurn(chatId, false).catch(showError);
-            return;
-        }
-        chatHost().confirm.stopSubagents(scope.id, chatId, () => void actions.stopTurn(chatId, true).catch(showError));
-    };
-
-    /* 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;
-        }
-    };
-
-    /* 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) => (sameQuery(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) => (sameQuery(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. With no mention query to insert into, they land at the end of the prompt. */
-    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 = (alternate = false): void => {
-        const delivery = canSteer && (alternate ? sendDelivery === 'queue' : sendDelivery === 'steer') ? 'steer' : 'queue';
-        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;
-        }
-        hold.release('send');
-        const chosen = commands[activeIndex];
-        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), {
-            delivery,
-            mentions: presentMentions(trimmed, draft.mentions),
-            skills: presentSkills(trimmed, draft.skills),
-            chats: draft.chats,
-            quoteSource: quote !== '' && quoteSource !== null ? { itemId: quoteSource } : undefined,
-            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. Its quote
-     * keeps leading to its reply in the chat it came from, and is plain text in any other.
-     */
-    const restoreStashed = (prompt: StashedPrompt): void => {
-        const stashedQuote = prompt.quote;
-        const here = stashedQuote !== undefined && stashedQuote.chatId === chatId;
-        setDraft((current) => ({
-            ...current,
-            text: stashedQuote === undefined || here ? prompt.text : withQuote(stashedQuote.text, prompt.text),
-            mentions: [...prompt.mentions],
-            skills: [...prompt.skills],
-            ...(here ? { quote: stashedQuote.text, quoteSource: stashedQuote.itemId } : {})
-        }));
-        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' | 'quoteSource'> = {
-                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, chatId)) {
-            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;
-    };
-
-    /* The arrows walk an open picker round; true when the key was one of them. */
-    const moveInMenu = (key: string, count: number): boolean => {
-        if (key === 'ArrowDown') {
-            setMenuIndex((i) => (i + 1) % count);
-            return true;
-        }
-        if (key === 'ArrowUp') {
-            setMenuIndex((i) => (i - 1 + count) % count);
-            return true;
-        }
-        return false;
-    };
-
-    /* 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 app's own shortcuts stay the app's while you type: 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 (moveInMenu(e.key, commands.length)) {
-                return true;
-            }
-            if (e.key === 'Tab') {
-                const chosen = commands[activeIndex]!;
-                if (chosen.skill) {
-                    chooseSkill(chosen.name);
-                } else {
-                    setText(`/${chosen.name} `);
-                }
-                return true;
-            }
-        }
-        if (skillMenuOpen) {
-            if (moveInMenu(e.key, skillMatches.length)) {
-                return true;
-            }
-            if (e.key === 'Tab' || e.key === 'Enter') {
-                chooseSkill((skillMatches[activeIndex] ?? skillMatches[0]!).name);
-                return true;
-            }
-        }
-        if (mentionMenuOpen && mentionCount > 0) {
-            if (moveInMenu(e.key, mentionCount)) {
-                return true;
-            }
-            if (e.key === 'Tab' || e.key === 'Enter') {
-                chooseMentionAt(activeIndex);
-                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(e.altKey);
-            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 queue = info.queue ?? [];
+    const empty = isEmptyDraft(draft);
 
-    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');
+    useEffect(() => {
+        if (focused) {
+            inputRef.current?.focus();
         }
-        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;
+    }, [focused]);
+
+    const onKeyDown = composerKeyHandler({
+        chatId,
+        host,
+        sendKey,
+        text: draft.text,
+        menus,
+        history,
+        noteKey: files.noteKey,
+        toggleStash,
+        setText: (next) => box.setText(next),
+        submit
+    });
 
     return (
         <div className="chat-composer-content pointer-events-none relative z-10 w-full">
@@ -1050,32 +174,11 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             <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
+                    files.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, 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();
-                }}
+                {...files.dropTarget}
             >
                 <PromptComposer
                     chatId={chatId}
@@ -1083,285 +186,70 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                     focused={focused}
                     onShowElsewhere={answerPromptsElsewhere}
                     disabled={disabled}
-                    hasDraft={!isEmptyDraft(draft)}
+                    hasDraft={!empty}
                     denyReason={capabilities?.denyReason === true}
                     onAllAnswered={() => inputRef.current?.focus()}
                     hold={hold}
                 >
                     <LimitDock chatId={chatId} info={info} />
+                    <GoalDock chatId={chatId} info={info} goals={capabilities?.goals} />
                     {compactionOffer && (
                         <ResumeCompactionDock
                             tokens={compactionOffer.tokens}
-                            onCompact={compact}
+                            onCompact={controls.compact}
                             onDismiss={() => dismissResumeCompaction(scope, chatId, compactionOffer.turnId)}
                         />
                     )}
-                    {commandMenuOpen && (
-                        <div id={listId} role="listbox" aria-label={t('composer.menu.commands')} className="border-b border-border px-1.5 py-1.5">
-                            {commands.map((command, index) => (
-                                <button
-                                    key={command.name}
-                                    id={optionIdOf(listId, index)}
-                                    role="option"
-                                    aria-selected={index === activeIndex}
-                                    tabIndex={-1}
-                                    data-active={index === activeIndex}
-                                    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 id={listId} role="listbox" aria-label={t('composer.menu.skills')} className="border-b border-border px-1.5 py-1.5">
-                            {skillMatches.map((skill, index) => (
-                                <button
-                                    key={skill.name}
-                                    id={optionIdOf(listId, index)}
-                                    role="option"
-                                    aria-selected={index === activeIndex}
-                                    tabIndex={-1}
-                                    data-active={index === activeIndex}
-                                    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">
-                            {mentionCount > 0 && (
-                                <div id={listId} role="listbox" aria-label={t('composer.menu.mentions')}>
-                                    {chatMatches.length > 0 && (
-                                        <div role="group" aria-labelledby={mentionsLabelId}>
-                                            <Menu.Label id={mentionsLabelId}>{t('composer.mentions.chats')}</Menu.Label>
-                                            {chatMatches.map((chat, index) => (
-                                                <button
-                                                    key={chat.id}
-                                                    id={optionIdOf(listId, index)}
-                                                    role="option"
-                                                    aria-selected={index === activeIndex}
-                                                    tabIndex={-1}
-                                                    data-active={index === activeIndex}
-                                                    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>
-                                            ))}
-                                        </div>
-                                    )}
-                                    {files.length > 0 && (
-                                        <div
-                                            role="group"
-                                            {...(filesLabelShown ? { 'aria-labelledby': filesLabelId } : { 'aria-label': t('composer.mentions.files') })}
-                                        >
-                                            {filesLabelShown && (
-                                                <Menu.Label id={filesLabelId}>
-                                                    {mention.query === '' ? t('composer.mentions.here') : t('composer.mentions.files')}
-                                                </Menu.Label>
-                                            )}
-                                            {files.map((path, index) => {
-                                                const { name, dir } = splitPath(path);
-                                                return (
-                                                    <button
-                                                        key={path}
-                                                        id={optionIdOf(listId, chatMatches.length + index)}
-                                                        role="option"
-                                                        aria-selected={chatMatches.length + index === activeIndex}
-                                                        tabIndex={-1}
-                                                        data-active={chatMatches.length + index === activeIndex}
-                                                        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>
-                                    )}
-                                </div>
-                            )}
-                            {mentionCount === 0 && (
-                                <div className="px-2 py-1 text-xs text-text-faint">
-                                    {mention.query ? t('composer.mentions.noMatch') : t('composer.mentions.empty')}
-                                </div>
-                            )}
-                        </div>
-                    )}
+                    <ComposerMenu menus={menus} />
                     {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">
-                            {quoteSource === null ? (
-                                <span className="min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-xs text-text-muted">{quote}</span>
-                            ) : (
-                                <Tooltip label={t('composer.quote.goToSource')}>
-                                    <button
-                                        type="button"
-                                        className="min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-left text-xs text-text-muted hover:text-text"
-                                        onClick={() =>
-                                            jumpToTimelineItem(scope.keyOf(chatId), quoteSource, {
-                                                flash: true,
-                                                onMissing: () => setNotice(t('rows.user.quoteGone'))
-                                            })
-                                        }
-                                    >
-                                        {quote}
-                                    </button>
-                                </Tooltip>
-                            )}
-                            <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>
+                        <QueuedMessages
+                            chatId={chatId}
+                            queue={queue}
+                            paused={info.queuePaused === true}
+                            takingBack={takingBack !== null}
+                            onEdit={(message) => void takeBack(message)}
+                        />
                     )}
-                    {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>
+                    {draft.quote !== '' && (
+                        <DraftQuote
+                            chatId={chatId}
+                            quote={draft.quote}
+                            source={draft.quoteSource}
+                            onRemove={box.removeQuote}
+                            onSourceGone={() => notice.setNotice(t('rows.user.quoteGone'))}
+                        />
                     )}
+                    {draft.chats.length > 0 && <DraftChats chats={draft.chats} onRemove={box.removeChat} />}
+                    {draft.attachments.length > 0 && <DraftAttachments attachments={draft.attachments} onRemove={box.removeAttachment} />}
                     <ComposerInput
                         ref={inputRef}
                         dictationToolbar={dictationToolbar}
                         className="composer-input select-text text-sm leading-normal text-text"
-                        value={text}
+                        value={draft.text}
                         placeholder={placeholder}
                         disabled={!writable}
                         tabbable={focused}
                         extensions={editorExtensions}
-                        aria={inputAria}
+                        aria={menus.inputAria}
                         onChange={(value, selection, state) => {
                             hold.noteInput();
-                            setText(value);
-                            setMenuIndex(0);
-                            trackTriggers(value, selection, state);
-                            if (historyIndex !== null && value !== history[historyIndex]?.text) {
-                                setHistoryIndex(null);
-                            }
+                            box.setText(value);
+                            menus.setMenuIndex(0);
+                            menus.trackTriggers(value, selection, state);
+                            history.edited(value);
                         }}
-                        onSelectionChange={trackTriggers}
+                        onSelectionChange={menus.trackTriggers}
                         onBlur={() => {
-                            setMention(null);
-                            setSkillQuery(null);
+                            menus.close();
                             hold.release('blur');
                         }}
                         onComposing={hold.setComposing}
                         onKeyDown={onKeyDown}
-                        onPaste={onPaste}
+                        onPaste={files.onPaste}
                     />
-                    {notice && (
+                    {notice.notice && (
                         <div className="px-5 pb-1 text-xs text-status-error @max-md/composer:px-3.5" role="alert">
-                            {notice}
+                            {notice.notice}
                         </div>
                     )}
                     {guard.visible && (
@@ -1375,93 +263,43 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                             {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>
-                            )}
-                            {(!busy || !isEmptyDraft(draft)) && (
-                                <Tooltip label={t(sendLabelKey(busy, canSteer, sendDelivery))} 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={(event) => submit(event.altKey)}
-                                    >
-                                        <Icon icon={ArrowUp} size={16} />
-                                    </button>
-                                </Tooltip>
-                            )}
-                        </div>
-                    </div>
+                    <ComposerControls
+                        chatId={chatId}
+                        info={info}
+                        providerFixed={providerFixed}
+                        writable={writable}
+                        attachable={capabilities?.attachments !== false}
+                        controls={controls}
+                        send={{
+                            visible: !busy || !empty,
+                            disabled: empty || !writable || guard.tooLong,
+                            label: t(sendLabelKey(busy, steerable, sendDelivery)),
+                            kbd: sendShortcut(sendKey, draft.text.includes('\n')),
+                            onSend: (alternate) => submit(alternate ? 'alternate' : 'default')
+                        }}
+                        dictationToolbar={setDictationToolbar}
+                        onFiles={(picked) => {
+                            files.addFiles(picked);
+                            inputRef.current?.focus();
+                        }}
+                        onRestore={restoreStashed}
+                        insert={(added) => {
+                            if (writable) {
+                                inputRef.current?.insert(added);
+                            }
+                        }}
+                    />
                 </PromptComposer>
             </div>
             <PromptDialog
-                open={confirmClear}
+                open={controls.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)}
+                onConfirm={controls.forceClearThread}
+                onOpenChange={controls.cancelClear}
             />
         </div>
     );