@adecore/agents-react 0.23.1 → 0.24.0

package/dist/chat/ui/Composer.js

@@ -1,938 +1,149 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { 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 { chatHost } from '../../host.js';
+import { ChevronDown } from 'lucide-react';
+import { Icon, PromptDialog, Surface, Tooltip } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { useChatHost } from '../../host.js';
+import { canSteer } from '../../providers/provider-abilities.js';
 import { useChatScope } from '../../scope.js';
-import { errorCode } from '../../transport.js';
-import { useAccountChoice } from '../account-choice.js';
-import { useChatActions } from '../actions.js';
-import { checkAttachmentLimits, filesOf, formatBytes, isImageAttachment, readAttachments, readStoredAttachments, uploadBytes } from '../attachments.js';
-import { chatSuggestions } from '../chat-references.js';
-import { EMPTY_DRAFT, isEmptyDraft, joinDraftText, readDraft, takeBackIntoDraft, takeDraftOffers, writeDraft } from '../drafts.js';
-import { carriesMentions, droppedMentions, NO_MENTION_SEARCH, dropQuery, findMentionQuery, findSkillQuery, insertMention, insertSkill, mentionPick, pastedMentions, presentMentions, presentSkills } from '../mentions.js';
-import { RESUME_COMPACTION_TOKENS, resumeCompactionOffer } from '../logic/resume-compaction.js';
-import { dismissResumeCompaction, useResumeCompactionDismissal } from '../resume-compaction-dismissals.js';
-import { composerStopLabel, composerStopOf } from '../subagent-list.js';
-import { PROMPT_MAX_CHARS, pasteBecomesAttachment, pastedTextName, promptGuard, usableSlashCommands } from '../guards.js';
+import { useProviders } from '../../state/providers.js';
+import { isEmptyDraft } from '../drafts.js';
+import { PROMPT_MAX_CHARS, promptGuard } from '../guards.js';
+import { useChatPreferences } from '../preferences.js';
 import { withQuote } from '../quote.js';
-import { rememberChatAccount, rememberChatPreferences, rememberChatSelection } from '../preferences.js';
-import { STASH_SHORTCUT, stashDraft, useStash } from '../stash.js';
-import { jumpToTimelineItem, pageTimeline, scrollTimelineToEnd, subscribeTimelineEnd, timelineAtEnd } from '../timeline-scroll.js';
+import { dismissResumeCompaction } from '../resume-compaction-dismissals.js';
+import { sendShortcut } from '../send-key.js';
+import { scrollTimelineToEnd, subscribeTimelineEnd, timelineAtEnd } from '../timeline-scroll.js';
 import { ChatActivity } from './ChatActivity.js';
-import { ChatReferenceChip } from './ChatReferenceChip.js';
-import { chipDecorations } from './composer/chips.js';
-import { clampMenuIndex, composerMenuAria, optionIdOf } from './composer/menu-aria.js';
-import { enterAction, inCode, inFenceBody, inOpenFence, listItemAt, recallDirection, tabSpaces } from './composer/keys.js';
 import { ComposerInput } from './ComposerInput.js';
-import { holdLiftsIn } from '../prompt-hold.js';
-import { PromptComposer } from './PromptComposer.js';
-import { QuoteTakerContext } from './quote-selection.js';
+import { GoalDock } from './GoalDock.js';
 import { LimitDock } from './LimitState.js';
+import { PromptComposer } from './PromptComposer.js';
 import { ResumeCompactionDock } from './ResumeCompactionDock.js';
-import { StashPicker } from './Pickers.js';
-import { RunSettings } from './RunSettings.js';
-import { UploadThumb } from './UploadThumb.js';
-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.js';
-import { useProviders } from '../../state/providers.js';
-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))
-});
-function usePendingRequests(chatId) {
-    // 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 = [];
-        const questions = [];
-        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, joiner, hints) {
-    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, canSteer, delivery) {
+import { chipDecorations } from './composer/chips.js';
+import { ComposerControls } from './composer/ComposerControls.js';
+import { ComposerMenu } from './composer/ComposerMenu.js';
+import { DraftAttachments, DraftChats, DraftQuote } from './composer/DraftParts.js';
+import { composerKeyHandler } from './composer/key-handler.js';
+import { useHintedPlaceholder } from './composer/placeholder.js';
+import { QueuedMessages } from './composer/QueuedMessages.js';
+import { useChatControls } from './composer/use-chat-controls.js';
+import { useCompactionOffer } from './composer/use-compaction-offer.js';
+import { useComposerDraft } from './composer/use-composer-draft.js';
+import { useComposerMenus } from './composer/use-composer-menus.js';
+import { useComposerSubmit } from './composer/use-composer-submit.js';
+import { LEAVE_DROPS_TO_THE_CARD, useDraftFiles } from './composer/use-draft-files.js';
+import { useNotice } from './composer/use-notice.js';
+import { usePendingRequests } from './composer/use-pending-requests.js';
+import { usePromptHistory } from './composer/use-prompt-history.js';
+import { usePromptHold } from './composer/use-prompt-hold.js';
+import { useTakeBack } from './composer/use-take-back.js';
+function sendLabelKey(busy, steerable, delivery) {
     if (!busy) {
         return 'composer.send';
     }
-    if (!canSteer) {
+    if (!steerable) {
         return 'composer.queueButton';
     }
     return delivery === 'steer' ? 'composer.steerButton' : 'composer.queueWithSteerButton';
 }
-function sameQuery(left, right) {
-    return left?.start === right?.start && left?.query === right?.query;
-}
-function splitPath(path) {
-    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() {
-    const typedAt = useRef(null);
-    const composing = useRef(false);
-    const timer = useRef(null);
-    const [state, setState] = useState({ held: false, releasedBy: null });
-    const clearTimer = () => {
-        if (timer.current !== null) {
-            clearTimeout(timer.current);
-            timer.current = null;
-        }
-    };
-    const release = (reason) => {
-        clearTimer();
-        typedAt.current = null;
-        composing.current = false;
-        setState((current) => (current.held ? { held: false, releasedBy: reason } : current));
-    };
-    const schedule = () => {
-        clearTimer();
-        const wait = holdLiftsIn({ typedAt: typedAt.current, composing: composing.current }, Date.now());
-        if (wait !== null) {
-            timer.current = setTimeout(() => release('pause'), wait);
-        }
-    };
-    const noteInput = () => {
-        typedAt.current = Date.now();
-        setState({ held: true, releasedBy: null });
-        schedule();
-    };
-    const setComposing = (next) => {
-        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 }) {
     const { t } = useTranslation('agent-chat');
-    const sendDelivery = chatHost().useSendDelivery();
-    const canSteer = info.provider === 'claude' || info.provider === 'codex';
-    const [draft, setDraft] = useState(() => readDraft(chatId));
-    const [historyIndex, setHistoryIndex] = useState(null);
-    const [menuIndex, setMenuIndex] = useState(0);
-    const [mention, setMention] = useState(null);
-    const [skillQuery, setSkillQuery] = useState(null);
-    const [skills, setSkills] = useState([]);
-    const [searched, setSearched] = useState(NO_MENTION_SEARCH);
-    const configuring = useRef(false);
-    const [configurationPending, setConfigurationPending] = useState(false);
-    const [notice, setNotice] = useState(null);
-    const [dragging, setDragging] = useState(false);
-    const [modelPickerOpen, setModelPickerOpen] = useState(false);
-    const [confirmClear, setConfirmClear] = useState(false);
-    const [takingBack, setTakingBack] = useState(null);
+    const host = useChatHost();
     const scope = useChatScope();
-    const actions = useChatActions();
-    const { isApplePlatform, notify } = chatHost();
-    const registerQuoteTaker = useContext(QuoteTakerContext);
-    const inputRef = useRef(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(null);
-    const [dictationToolbar, setDictationToolbar] = useState(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 !== undefined),
-            dismissedTurnId,
-            now
-        });
-    const models = 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(null);
+    const [dictationToolbar, setDictationToolbar] = useState(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 = () => {
-            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 = [];
-        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, mentions = draft.mentions, chosen = draft.skills) => {
-        setDraft((current) => ({ ...current, text: next, mentions, skills: chosen }));
-    };
-    const clearDraft = () => {
-        setDraft(EMPTY_DRAFT);
-    };
-    const removeQuote = () => {
-        setDraft((current) => ({ ...current, quote: '', quoteSource: null }));
-        inputRef.current?.focus();
-    };
-    const showError = (error) => {
-        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) => {
-        if (configuring.current) {
-            return;
-        }
-        configuring.current = true;
-        setConfigurationPending(true);
-        void work()
-            .catch(showError)
-            .finally(() => {
-            configuring.current = false;
-            setConfigurationPending(false);
-        });
-    };
-    const configure = (patch) => {
-        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) => configure({ account });
-    /* A model of another CLI re-points the whole chat; one of this CLI's own is a configure. */
-    const chooseModel = (provider, slug) => {
-        const selection = { model: slug, options: {} };
-        if (provider !== info.provider) {
-            runConfiguration(() => onRetarget(provider, selection).then(() => rememberChatSelection(provider, selection)));
-            return;
-        }
-        configure({ selection });
-    };
-    const stop = (shiftKey) => {
-        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 () => {
-        try {
-            await actions.clear(chatId, false);
-        }
-        catch (e) {
-            if (errorCode(e) === 'chat-busy') {
-                setConfirmClear(true);
-                return;
-            }
-            setNotice(t('composer.notice.clearFailed'));
-        }
-    };
-    const forceClearThread = async () => {
-        await actions.clear(chatId, true);
-        setConfirmClear(false);
-    };
-    const compact = () => {
-        void actions.compact(chatId).catch(() => setNotice(t('composer.notice.compactFailed')));
-    };
-    const runCommand = (name) => {
-        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, selection, state) => {
-        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) => {
-        requestAnimationFrame(() => inputRef.current?.setCaret(caret));
-    };
-    const chooseMention = (path) => {
-        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) => {
-        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) => {
-        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) => {
-        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) => {
-        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) => {
-        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) => {
-        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) => {
-        if (writable) {
-            inputRef.current?.insert(added);
-        }
-    };
-    const removeAttachment = (index) => {
-        setDraft((current) => ({ ...current, attachments: current.attachments.filter((_, i) => i !== index) }));
-    };
-    const submit = (alternate = false) => {
-        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) => {
-        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) => {
-        if (takingBack !== null) {
-            return;
-        }
-        const failed = (e) => {
-            notify({ kind: 'error', title: t('composer.queue.editFailed'), description: e instanceof Error ? e.message : String(e) });
-        };
-        const readFiles = async () => {
-            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;
-            try {
-                uploads = await readFiles();
-            }
-            catch (e) {
-                failed(e);
-                return;
-            }
-            const taken = {
-                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 = () => {
-        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) => {
-        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, count) => {
-        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, view) => {
-        // 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, view) => {
-        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');
+    const queue = info.queue ?? [];
+    const empty = isEmptyDraft(draft);
+    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;
-    return (_jsxs("div", { className: "chat-composer-content pointer-events-none relative z-10 w-full", children: [!atEnd && !readOnly && (_jsx("div", { className: "absolute inset-x-0 bottom-full mb-2 flex justify-center", children: _jsx(Tooltip, { label: t('composer.jumpToEnd'), name: true, children: _jsx(Surface, { render: _jsx("button", { onClick: () => scrollTimelineToEnd(chatId) }), className: "pointer-events-auto grid h-8 w-8 place-items-center rounded-full text-text-muted hover:text-text", children: _jsx(Icon, { icon: ChevronDown, size: 16 }) }) }) })), _jsx(ChatActivity, { chatId: chatId }), _jsx("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
+    }, [focused]);
+    const onKeyDown = composerKeyHandler({
+        chatId,
+        host,
+        sendKey,
+        text: draft.text,
+        menus,
+        history,
+        noteKey: files.noteKey,
+        toggleStash,
+        setText: (next) => box.setText(next),
+        submit
+    });
+    return (_jsxs("div", { className: "chat-composer-content pointer-events-none relative z-10 w-full", children: [!atEnd && !readOnly && (_jsx("div", { className: "absolute inset-x-0 bottom-full mb-2 flex justify-center", children: _jsx(Tooltip, { label: t('composer.jumpToEnd'), name: true, children: _jsx(Surface, { render: _jsx("button", { onClick: () => scrollTimelineToEnd(chatId) }), className: "pointer-events-auto grid h-8 w-8 place-items-center rounded-full text-text-muted hover:text-text", children: _jsx(Icon, { icon: ChevronDown, size: 16 }) }) }) })), _jsx(ChatActivity, { chatId: chatId }), _jsx("div", { className: clsx('@container/composer pointer-events-auto flex flex-col overflow-hidden rounded-2xl border shadow-float backdrop-blur-[14px] focus-ring-within', 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)]'), "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)) {
-                        setDragging(false);
-                    }
-                }, onDrop: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setDragging(false);
-                    addMentions(droppedMentions(e.dataTransfer));
-                    addFiles(filesOf(e.dataTransfer));
-                    inputRef.current?.focus();
-                }, children: _jsxs(PromptComposer, { chatId: chatId, pending: pending, focused: focused, onShowElsewhere: answerPromptsElsewhere, disabled: disabled, hasDraft: !isEmptyDraft(draft), denyReason: capabilities?.denyReason === true, onAllAnswered: () => inputRef.current?.focus(), hold: hold, children: [_jsx(LimitDock, { chatId: chatId, info: info }), compactionOffer && (_jsx(ResumeCompactionDock, { tokens: compactionOffer.tokens, onCompact: compact, onDismiss: () => dismissResumeCompaction(scope, chatId, compactionOffer.turnId) })), commandMenuOpen && (_jsx("div", { id: listId, role: "listbox", "aria-label": t('composer.menu.commands'), className: "border-b border-border px-1.5 py-1.5", children: commands.map((command, index) => (_jsxs("button", { 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();
-                                }, children: [_jsx(Icon, { icon: command.skill ? Zap : SquareSlash, size: 12, className: clsx('shrink-0', command.skill ? 'text-skill' : 'text-text-faint') }), _jsxs("span", { className: "font-mono text-text", children: ["/", command.name] }), _jsx("span", { className: "text-text-faint", children: command.hint })] }, command.name))) })), skillMenuOpen && (_jsx("div", { id: listId, role: "listbox", "aria-label": t('composer.menu.skills'), className: "border-b border-border px-1.5 py-1.5", children: skillMatches.map((skill, index) => (_jsxs("button", { 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), children: [_jsx(Icon, { icon: Zap, size: 12, className: "mt-0.5 shrink-0 text-skill" }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsxs("span", { className: "truncate font-mono text-text", children: ["$", skill.name] }), skill.description !== '' && _jsx("span", { className: "line-clamp-1 text-text-faint", children: skill.description })] })] }, skill.name))) })), mentionMenuOpen && (_jsxs("div", { className: "border-b border-border px-1.5 py-1.5", children: [mentionCount > 0 && (_jsxs("div", { id: listId, role: "listbox", "aria-label": t('composer.menu.mentions'), children: [chatMatches.length > 0 && (_jsxs("div", { role: "group", "aria-labelledby": mentionsLabelId, children: [_jsx(Menu.Label, { id: mentionsLabelId, children: t('composer.mentions.chats') }), chatMatches.map((chat, index) => (_jsxs("button", { 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), children: [_jsx(Icon, { icon: MessageSquare, size: 14, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate text-text", children: chat.title || t('chatReference.untitled') })] }, chat.id)))] })), files.length > 0 && (_jsxs("div", { role: "group", ...(filesLabelShown ? { 'aria-labelledby': filesLabelId } : { 'aria-label': t('composer.mentions.files') }), children: [filesLabelShown && (_jsx(Menu.Label, { id: filesLabelId, children: mention.query === '' ? t('composer.mentions.here') : t('composer.mentions.files') })), files.map((path, index) => {
-                                                    const { name, dir } = splitPath(path);
-                                                    return (_jsxs("button", { 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), children: [_jsx(FileIcon, { path: path, size: 14 }), _jsx("span", { className: "truncate font-mono text-text", children: name }), dir && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: dir })] }, path));
-                                                })] }))] })), mentionCount === 0 && (_jsx("div", { className: "px-2 py-1 text-xs text-text-faint", children: mention.query ? t('composer.mentions.noMatch') : t('composer.mentions.empty') }))] })), queue.length > 0 && (_jsxs("div", { className: "flex flex-col gap-1 border-b border-border px-2 py-1.5", children: [info.queuePaused === true && _jsx("p", { className: "px-1.5 text-xs text-text-muted", children: t('composer.queue.paused') }), queue.map((message) => {
-                                    const sendNow = () => {
-                                        scrollTimelineToEnd(chatId, 'instant');
-                                        void actions.sendNow(chatId, message.id).catch(() => undefined);
-                                    };
-                                    const unqueue = () => void actions.unqueue(chatId, message.id).catch(() => undefined);
-                                    const edit = () => void takeBack(message);
-                                    return (_jsxs(ContextMenu.Root, { children: [_jsxs(ContextMenu.Trigger, { className: "group/queued flex items-center gap-2 rounded-md px-1.5 py-1 text-xs text-text-muted", children: [_jsx(Icon, { icon: Clock, size: 12, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "min-w-0 grow truncate", children: message.text || t('composer.queue.attachments', { count: message.attachments?.length ?? 0 }) }), _jsxs(ButtonGroup, { render: _jsx("span", {}), className: "opacity-0 transition-opacity group-hover/queued:opacity-100 focus-within:opacity-100", children: [_jsx(IconButton, { icon: FastForward, size: "2xs", label: t('composer.queue.sendNow'), onClick: sendNow }), _jsx(IconButton, { icon: Pencil, size: "2xs", label: t('common.action.edit'), disabled: takingBack !== null, onClick: edit }), _jsx(IconButton, { icon: X, size: "2xs", label: t('common.action.remove'), onClick: unqueue })] })] }), _jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { onClick: sendNow, children: [_jsx(Icon, { icon: FastForward, size: 14 }), " ", t('composer.queue.sendNow')] }), _jsxs(ContextMenu.Item, { disabled: takingBack !== null, onClick: edit, children: [_jsx(Icon, { icon: Pencil, size: 14 }), " ", t('common.action.edit')] }), _jsxs(ContextMenu.Item, { disabled: message.text === '', onClick: () => copyText(message.text), children: [_jsx(Icon, { icon: Copy, size: 14 }), " ", t('common.action.copy')] }), _jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { className: "text-status-error", onClick: unqueue, children: [_jsx(Icon, { icon: X, size: 14 }), " ", t('common.action.remove')] })] })] }, message.id));
-                                })] })), quote !== '' && (_jsxs("div", { className: "flex items-center gap-2 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3", children: [quoteSource === null ? (_jsx("span", { className: "min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-xs text-text-muted", children: quote })) : (_jsx(Tooltip, { label: t('composer.quote.goToSource'), children: _jsx("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'))
-                                        }), children: quote }) })), _jsx(IconButton, { icon: X, size: "2xs", label: t('composer.quote.remove'), onClick: removeQuote })] })), draft.chats.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3", children: draft.chats.map((id) => (_jsx(ChatReferenceChip, { chatId: id, onRemove: () => removeChat(id) }, id))) })), draft.attachments.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3", children: draft.attachments.map((attachment, index) => (_jsxs("div", { className: "group/thumb relative", children: [isImageAttachment(attachment.mime) ? (_jsx(UploadThumb, { upload: attachment })) : (_jsxs("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", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-text", children: [_jsx(Icon, { icon: Paperclip, size: 12, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate", children: attachment.name })] }), _jsx("span", { className: "pl-5 text-xs text-text-faint", children: formatBytes(uploadBytes(attachment)) })] })), _jsx(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) })] }, `${attachment.name}-${index}`))) })), _jsx(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, aria: inputAria, onChange: (value, selection, state) => {
+                    : 'border-border bg-[color-mix(in_srgb,var(--surface-raised)_92%,transparent)]'), ...files.dropTarget, children: _jsxs(PromptComposer, { chatId: chatId, pending: pending, focused: focused, onShowElsewhere: answerPromptsElsewhere, disabled: disabled, hasDraft: !empty, denyReason: capabilities?.denyReason === true, onAllAnswered: () => inputRef.current?.focus(), hold: hold, children: [_jsx(LimitDock, { chatId: chatId, info: info }), _jsx(GoalDock, { chatId: chatId, info: info, goals: capabilities?.goals }), compactionOffer && (_jsx(ResumeCompactionDock, { tokens: compactionOffer.tokens, onCompact: controls.compact, onDismiss: () => dismissResumeCompaction(scope, chatId, compactionOffer.turnId) })), _jsx(ComposerMenu, { menus: menus }), queue.length > 0 && (_jsx(QueuedMessages, { chatId: chatId, queue: queue, paused: info.queuePaused === true, takingBack: takingBack !== null, onEdit: (message) => void takeBack(message) })), draft.quote !== '' && (_jsx(DraftQuote, { chatId: chatId, quote: draft.quote, source: draft.quoteSource, onRemove: box.removeQuote, onSourceGone: () => notice.setNotice(t('rows.user.quoteGone')) })), draft.chats.length > 0 && _jsx(DraftChats, { chats: draft.chats, onRemove: box.removeChat }), draft.attachments.length > 0 && _jsx(DraftAttachments, { attachments: draft.attachments, onRemove: box.removeAttachment }), _jsx(ComposerInput, { ref: inputRef, dictationToolbar: dictationToolbar, className: "composer-input select-text text-sm leading-normal text-text", value: draft.text, placeholder: placeholder, disabled: !writable, tabbable: focused, extensions: editorExtensions, 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);
-                                }
-                            }, onSelectionChange: trackTriggers, onBlur: () => {
-                                setMention(null);
-                                setSkillQuery(null);
+                                box.setText(value);
+                                menus.setMenuIndex(0);
+                                menus.trackTriggers(value, selection, state);
+                                history.edited(value);
+                            }, onSelectionChange: menus.trackTriggers, onBlur: () => {
+                                menus.close();
                                 hold.release('blur');
-                            }, onComposing: hold.setComposing, onKeyDown: onKeyDown, onPaste: onPaste }), notice && (_jsx("div", { className: "px-5 pb-1 text-xs text-status-error @max-md/composer:px-3.5", role: "alert", children: notice })), guard.visible && (_jsxs("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'), children: [formatNumber(guard.count), " / ", formatNumber(PROMPT_MAX_CHARS), guard.tooLong && ` ${t('composer.tooLong')}`] })), _jsxs("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", children: [attachable && (_jsx(Tooltip, { label: t('composer.attach'), name: true, children: _jsx("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(), children: _jsx(Icon, { icon: Plus, size: 16 }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, hidden: true, onChange: (e) => {
-                                        addFiles(Array.from(e.target.files ?? []));
-                                        e.target.value = '';
-                                        inputRef.current?.focus();
-                                    } }), _jsx(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 } }), _jsx(StashPicker, { onRestore: restoreStashed }), Slot !== null && (_jsx(ErrorBoundary, { label: t('composer.slotFailed'), resetKeys: [chatId], compact: true, className: "relative rounded-lg", children: _jsx(Slot, { scopeId: scope.id, chatId: chatId, disabled: !writable, insert: insertIntoDraft }) })), _jsx("span", { className: "grow" }), _jsxs("div", { className: "flex h-9 shrink-0 items-center gap-0.5 rounded-full bg-surface-hover", children: [_jsx("div", { ref: setDictationToolbar, className: "flex items-center pl-1 empty:hidden [&_.icon-btn]:rounded-full" }), busy && (_jsx(Tooltip, { label: composerStopLabel(), name: true, children: _jsx("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), children: _jsx(Icon, { icon: Square, size: 16 }) }) })), (!busy || !isEmptyDraft(draft)) && (_jsx(Tooltip, { label: t(sendLabelKey(busy, canSteer, sendDelivery)), kbd: KEY_SHORTCUTS.modEnter, name: true, children: _jsx("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), children: _jsx(Icon, { icon: ArrowUp, size: 16 }) }) }))] })] })] }) }), _jsx(PromptDialog, { open: confirmClear, title: t('composer.clear.title'), description: t('composer.clear.description'), confirmLabel: t('composer.clear.confirm'), danger: true, fallbackMessage: t('composer.notice.clearFailed'), onConfirm: forceClearThread, onOpenChange: () => setConfirmClear(false) })] }));
+                            }, onComposing: hold.setComposing, onKeyDown: onKeyDown, onPaste: files.onPaste }), notice.notice && (_jsx("div", { className: "px-5 pb-1 text-xs text-status-error @max-md/composer:px-3.5", role: "alert", children: notice.notice })), guard.visible && (_jsxs("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'), children: [formatNumber(guard.count), " / ", formatNumber(PROMPT_MAX_CHARS), guard.tooLong && ` ${t('composer.tooLong')}`] })), _jsx(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);
+                                }
+                            } })] }) }), _jsx(PromptDialog, { open: controls.confirmClear, title: t('composer.clear.title'), description: t('composer.clear.description'), confirmLabel: t('composer.clear.confirm'), danger: true, fallbackMessage: t('composer.notice.clearFailed'), onConfirm: controls.forceClearThread, onOpenChange: controls.cancelClear })] }));
 }