@adecore/agents-react 0.23.0 → 0.24.0

package/dist/chat/ui/composer/use-chat-controls.js

@@ -0,0 +1,112 @@
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useChatHost } from '../../../host.js';
+import { useChatScope } from '../../../scope.js';
+import { errorCode } from '../../../transport.js';
+import { useChatActions } from '../../actions.js';
+import { rememberChatAccount, rememberChatPreferences, rememberChatSelection } from '../../preferences.js';
+import { composerStopOf } from '../../subagent-list.js';
+/* What the composer does to the chat rather than to its draft: its settings, a stop, a clear and a compaction. */
+export function useChatControls({ chatId, info, notice: { setNotice, showError }, onRetarget }) {
+    const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
+    const scope = useChatScope();
+    const actions = useChatActions();
+    const configuring = useRef(false);
+    const [configurationPending, setConfigurationPending] = useState(false);
+    const [modelPickerOpen, setModelPickerOpen] = useState(false);
+    const [confirmClear, setConfirmClear] = useState(false);
+    /* 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);
+            }
+        }));
+    };
+    /* 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;
+        }
+        host.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')));
+    };
+    /* Runs one of the composer's own commands; false for a name it does not handle. */
+    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;
+        }
+    };
+    return {
+        configurationPending,
+        configure,
+        chooseModel,
+        chooseAccount: (account) => configure({ account }),
+        stop,
+        compact,
+        runCommand,
+        modelPickerOpen,
+        setModelPickerOpen,
+        confirmClear,
+        cancelClear: () => setConfirmClear(false),
+        forceClearThread
+    };
+}

package/dist/chat/ui/composer/use-compaction-offer.d.ts

@@ -0,0 +1,2 @@
+import type { ChatInfo, ProviderCapabilities } from '@adecore/agent-contracts';
+export declare function useCompactionOffer(chatId: string, info: ChatInfo, compaction: ProviderCapabilities['compaction'] | undefined): import("../../logic/resume-compaction.js").ResumeCompactionOffer | null;

package/dist/chat/ui/composer/use-compaction-offer.js

@@ -0,0 +1,23 @@
+import { useNow } from '@adecore/ui';
+import { useChatRow } from '../../../state/chats.js';
+import { RESUME_COMPACTION_TOKENS, resumeCompactionOffer } from '../../logic/resume-compaction.js';
+import { useResumeCompactionDismissal } from '../../resume-compaction-dismissals.js';
+/* The offer to fold a long context before a chat that sat idle goes on, or null when there is none. */
+export function useCompactionOffer(chatId, info, compaction) {
+    const order = useChatRow(chatId, (row) => row?.order);
+    const items = useChatRow(chatId, (row) => row?.structure);
+    const dismissedTurnId = useResumeCompactionDismissal(chatId);
+    // The cheap half of the offer, so a chat that can never make one keeps no timer.
+    const couldOffer = compaction !== undefined && compaction !== 'none' && info.usage.contextTokens >= RESUME_COMPACTION_TOKENS;
+    const now = useNow(60_000, couldOffer);
+    if (!couldOffer) {
+        return null;
+    }
+    return resumeCompactionOffer({
+        info,
+        compaction,
+        items: (order ?? []).map((id) => items?.[id]).filter((item) => item !== undefined),
+        dismissedTurnId,
+        now
+    });
+}

package/dist/chat/ui/composer/use-composer-draft.d.ts

@@ -0,0 +1,14 @@
+import { type Dispatch, type RefObject, type SetStateAction } from 'react';
+import { type ChatDraft } from '../../drafts.js';
+import type { ComposerInputHandle } from '../ComposerInput.js';
+export interface ComposerDraft {
+    draft: ChatDraft;
+    setDraft: Dispatch<SetStateAction<ChatDraft>>;
+    latest: RefObject<ChatDraft>;
+    setText(next: string, mentions?: string[], skills?: string[]): void;
+    clear(): void;
+    removeQuote(): void;
+    removeChat(id: string): void;
+    removeAttachment(index: number): void;
+}
+export declare function useComposerDraft(chatId: string, inputRef: RefObject<ComposerInputHandle | null>): ComposerDraft;

package/dist/chat/ui/composer/use-composer-draft.js

@@ -0,0 +1,39 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import { EMPTY_DRAFT, joinDraftText, readDraft, takeDraftOffers, writeDraft } from '../../drafts.js';
+import { QuoteTakerContext } from '../quote-selection.js';
+/* The chat's unsent prompt, kept in storage as it changes and open to text and quotes handed in from outside. */
+export function useComposerDraft(chatId, inputRef) {
+    const [draft, setDraft] = useState(() => readDraft(chatId));
+    const latest = useRef(draft);
+    const registerQuoteTaker = useContext(QuoteTakerContext);
+    useEffect(() => {
+        latest.current = draft;
+        writeDraft(chatId, draft);
+    }, [chatId, draft]);
+    useEffect(() => takeDraftOffers(chatId, (offered) => {
+        setDraft((current) => ({ ...current, text: joinDraftText(current.text, offered) }));
+        inputRef.current?.focus();
+    }), [chatId, inputRef]);
+    useEffect(() => registerQuoteTaker?.((selected, itemId) => {
+        setDraft((current) => ({ ...current, quote: selected, quoteSource: itemId }));
+        inputRef.current?.focus();
+    }), [registerQuoteTaker, inputRef]);
+    const setText = (next, mentions = draft.mentions, chosen = draft.skills) => {
+        setDraft((current) => ({ ...current, text: next, mentions, skills: chosen }));
+    };
+    const clear = () => {
+        setDraft(EMPTY_DRAFT);
+    };
+    const removeQuote = () => {
+        setDraft((current) => ({ ...current, quote: '', quoteSource: null }));
+        inputRef.current?.focus();
+    };
+    const removeChat = (id) => {
+        setDraft((current) => ({ ...current, chats: current.chats.filter((entry) => entry !== id) }));
+        inputRef.current?.focus();
+    };
+    const removeAttachment = (index) => {
+        setDraft((current) => ({ ...current, attachments: current.attachments.filter((_, i) => i !== index) }));
+    };
+    return { draft, setDraft, latest, setText, clear, removeQuote, removeChat, removeAttachment };
+}

package/dist/chat/ui/composer/use-composer-menus.d.ts

@@ -0,0 +1,52 @@
+import { type RefObject } from 'react';
+import type { EditorState } from '@codemirror/state';
+import type { ChatInfo, ProviderCapabilities } from '@adecore/agent-contracts';
+import { type MentionQuery, type TextRange } from '../../mentions.js';
+import type { ComposerInputHandle } from '../ComposerInput.js';
+import type { ComposerDraft } from './use-composer-draft.js';
+export declare const LOCAL_COMMANDS: string[];
+export interface ComposerCommand {
+    name: string;
+    hint: string;
+    local: boolean;
+    skill: boolean;
+}
+interface MenusInput {
+    chatId: string;
+    info: ChatInfo;
+    capabilities: ProviderCapabilities | undefined;
+    providerName: string | undefined;
+    draft: ComposerDraft;
+    inputRef: RefObject<ComposerInputHandle | null>;
+}
+export declare function useComposerMenus({ chatId, info, capabilities, providerName, draft: { draft, setDraft, setText }, inputRef }: MenusInput): {
+    listId: string;
+    activeIndex: number;
+    inputAria: Record<string, string>;
+    hasSkills: boolean;
+    commandQuery: string | null;
+    commands: ComposerCommand[];
+    commandMenuOpen: boolean;
+    skillMatches: {
+        name: string;
+        description: string;
+        source: "plugin" | "project" | "user";
+    }[];
+    skillMenuOpen: boolean;
+    mention: MentionQuery | null;
+    mentionMenuOpen: boolean;
+    mentionCount: number;
+    chatMatches: import("../../index.js").ProjectChat[];
+    files: string[];
+    setMenuIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    trackTriggers: (value: string, selection: TextRange, state: EditorState) => void;
+    close: () => void;
+    chooseMention: (path: string) => void;
+    chooseChat: (id: string) => void;
+    chooseMentionAt: (index: number) => void;
+    chooseSkill: (name: string) => void;
+    pickCommand: (command: ComposerCommand, index: number) => void;
+    moveInMenu: (key: string, count: number) => boolean;
+};
+export type ComposerMenus = ReturnType<typeof useComposerMenus>;
+export {};

package/dist/chat/ui/composer/use-composer-menus.js

@@ -0,0 +1,232 @@
+import { useEffect, useId, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
+import { useChatHost } from '../../../host.js';
+import { useChatScope } from '../../../scope.js';
+import { chatSuggestions } from '../../chat-references.js';
+import { usableSlashCommands } from '../../guards.js';
+import { dropQuery, findMentionQuery, findSkillQuery, insertMention, insertSkill, mentionPick, NO_MENTION_SEARCH } from '../../mentions.js';
+import { inCode } from './keys.js';
+import { clampMenuIndex, composerMenuAria } from './menu-aria.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;
+// Commands the composer handles itself; the CLI's own ones are sent through as text.
+export const LOCAL_COMMANDS = ['model', 'compact', 'clear'];
+function sameQuery(left, right) {
+    return left?.start === right?.start && left?.query === right?.query;
+}
+/*
+ * The pickers over the box: `/` for a command, `$` for a skill and `@` for a file or another chat.
+ * One is open at a time, and the arrow keys and the editor's ARIA attributes follow that one.
+ */
+export function useComposerMenus({ chatId, info, capabilities, providerName, draft: { draft, setDraft, setText }, inputRef }) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const host = useChatHost();
+    const { searchFiles } = host;
+    const chats = host.useReferableChats();
+    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 text = draft.text;
+    const goals = capabilities?.goals;
+    // 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 = () => {
+            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, searchFiles]);
+    /*
+     * The host's skill list, once per chat, again once the CLI announced its own after the first message,
+     * and again when its process comes or goes, which is when a restart reads new skills.
+     */
+    useEffect(() => {
+        let stale = false;
+        scope.chats
+            .listSkills(chatId)
+            .then((found) => {
+            if (!stale) {
+                setSkills(found);
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            stale = true;
+        };
+    }, [scope, chatId, info.skills, info.running]);
+    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 }));
+        // Every CLI with goals reads `/goal`, also one that lists no commands of its own.
+        const goal = goals === undefined ? [] : [{ name: 'goal', hint: t('composer.commands.goal'), local: false, skill: false }];
+        const cli = usableSlashCommands(info.slashCommands)
+            .filter((name) => !LOCAL_COMMANDS.includes(name) && (goals === undefined || name !== 'goal'))
+            .map((name) => ({
+            name,
+            hint: known.has(name) ? t('composer.commands.skill') : t('composer.commands.cli', { cli: providerName ?? t('composer.commands.anyCli') }),
+            local: false,
+            skill: known.has(name)
+        }));
+        return [...own, ...goal, ...cli].filter((command) => command.name.startsWith(commandQuery)).slice(0, 8);
+    }, [commandQuery, goals, info.slashCommands, providerName, 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 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]);
+    /* 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 close = () => {
+        setMention(null);
+        setSkillQuery(null);
+    };
+    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);
+        }
+    };
+    /*
+     * 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);
+    };
+    /* A clicked command; Tab completes one with a space after it instead. */
+    const pickCommand = (command, index) => {
+        setMenuIndex(index);
+        if (command.skill) {
+            chooseSkill(command.name);
+            return;
+        }
+        setText(`/${command.name}`);
+        inputRef.current?.focus();
+    };
+    /* 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;
+    };
+    return {
+        listId,
+        activeIndex,
+        inputAria,
+        hasSkills: skills.length > 0,
+        commandQuery,
+        commands,
+        commandMenuOpen,
+        skillMatches,
+        skillMenuOpen,
+        mention,
+        mentionMenuOpen,
+        mentionCount,
+        chatMatches,
+        files,
+        setMenuIndex,
+        trackTriggers,
+        close,
+        chooseMention,
+        chooseChat,
+        chooseMentionAt,
+        chooseSkill,
+        pickCommand,
+        moveInMenu
+    };
+}

package/dist/chat/ui/composer/use-composer-submit.d.ts

@@ -0,0 +1,32 @@
+import { type RefObject } from 'react';
+import type { ChatSendExtras } from '../../chat-client.js';
+import { type ComposerSend } from '../../composer-send.js';
+import type { PromptGuard } from '../../guards.js';
+import { type StashedPrompt } from '../../stash.js';
+import type { ComposerInputHandle } from '../ComposerInput.js';
+import type { ChatControls } from './use-chat-controls.js';
+import type { ComposerDraft } from './use-composer-draft.js';
+import type { ComposerMenus } from './use-composer-menus.js';
+import type { PromptHistory } from './use-prompt-history.js';
+import type { ComposerPromptHold } from './use-prompt-hold.js';
+interface SubmitInput {
+    chatId: string;
+    writable: boolean;
+    guard: PromptGuard;
+    steerable: boolean;
+    sendDelivery: 'queue' | 'steer';
+    draft: ComposerDraft;
+    menus: ComposerMenus;
+    controls: ChatControls;
+    history: PromptHistory;
+    hold: ComposerPromptHold;
+    inputRef: RefObject<ComposerInputHandle | null>;
+    setNotice(notice: string): void;
+    onSend(text: string, extras: ChatSendExtras): void | Promise<boolean>;
+}
+export declare function useComposerSubmit({ chatId, writable, guard, steerable, sendDelivery, draft: box, menus, controls, history, hold, inputRef, setNotice, onSend }: SubmitInput): {
+    submit: (how?: ComposerSend) => void;
+    restoreStashed: (prompt: StashedPrompt) => void;
+    toggleStash: () => void;
+};
+export {};

package/dist/chat/ui/composer/use-composer-submit.js

@@ -0,0 +1,113 @@
+import { useEffect, useRef } from 'react';
+import { useChatHost } from '../../../host.js';
+import { useChatScope } from '../../../scope.js';
+import { checkAttachmentLimits, uploadBytes } from '../../attachments.js';
+import { registerComposerSender } from '../../composer-send.js';
+import { isEmptyDraft } from '../../drafts.js';
+import { presentMentions, presentSkills } from '../../mentions.js';
+import { withQuote } from '../../quote.js';
+import { stashDraft, useStash } from '../../stash.js';
+import { scrollTimelineToEnd } from '../../timeline-scroll.js';
+/* Sends the draft, or runs the command it names, and puts it away in the stash and back. */
+export function useComposerSubmit({ chatId, writable, guard, steerable, sendDelivery, draft: box, menus, controls, history, hold, inputRef, setNotice, onSend }) {
+    const host = useChatHost();
+    const scope = useChatScope();
+    const { draft, setDraft } = box;
+    /* Opens the host's new chat once the host took the message; a host that answers nothing took it. */
+    const afterSend = (sent, andNew) => {
+        const openNewChat = host.openNewChat;
+        if (!andNew || openNewChat === null) {
+            return;
+        }
+        void Promise.resolve(sent)
+            .then((taken) => {
+            if (taken !== false) {
+                openNewChat(scope.id, chatId);
+            }
+        })
+            .catch(() => undefined);
+    };
+    const submit = (how = 'default') => {
+        const alternate = how === 'alternate';
+        const delivery = steerable && (alternate ? sendDelivery === 'queue' : sendDelivery === 'steer') ? 'steer' : 'queue';
+        const { text, quote, quoteSource } = draft;
+        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 { commandQuery } = menus;
+        const chosen = menus.commands[menus.activeIndex];
+        if (commandQuery !== null && chosen?.local && controls.runCommand(chosen.name)) {
+            box.clear();
+            return;
+        }
+        if (commandQuery !== null && chosen?.skill) {
+            menus.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) {
+            afterSend(onSend(`/${chosen.name}`, {}), how === 'and-new');
+            box.clear();
+            return;
+        }
+        const sent = 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
+        });
+        afterSend(sent, how === 'and-new');
+        box.clear();
+        menus.close();
+        history.forget();
+    };
+    // A menu row means the draft as it stands when it is picked, so the registration reads the latest submit.
+    const submitRef = useRef(submit);
+    useEffect(() => {
+        submitRef.current = submit;
+    });
+    useEffect(() => registerComposerSender(scope.keyOf(chatId), (how) => submitRef.current(how)), [scope, chatId]);
+    /*
+     * 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 } : {})
+        }));
+        history.forget();
+        inputRef.current?.focus();
+    };
+    /* 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)) {
+            box.clear();
+            menus.close();
+        }
+    };
+    return { submit, restoreStashed, toggleStash };
+}

package/dist/chat/ui/composer/use-draft-files.d.ts

@@ -0,0 +1,27 @@
+import { type DragEvent, type RefObject } from 'react';
+import { EditorView } from '@codemirror/view';
+import type { ProviderCapabilities } from '@adecore/agent-contracts';
+import type { ComposerInputHandle } from '../ComposerInput.js';
+import type { ComposerDraft } from './use-composer-draft.js';
+export declare const LEAVE_DROPS_TO_THE_CARD: import("@codemirror/state").Extension;
+interface DraftFilesInput {
+    capabilities: ProviderCapabilities | undefined;
+    providerName: string | undefined;
+    writable: boolean;
+    draft: ComposerDraft;
+    inputRef: RefObject<ComposerInputHandle | null>;
+    setNotice(notice: string): void;
+}
+export declare function useDraftFiles({ capabilities, providerName, writable, draft: { draft, setDraft, setText }, inputRef, setNotice }: DraftFilesInput): {
+    dragging: boolean;
+    dropTarget: {
+        'data-takes-drop': string;
+        onDragOver: (e: DragEvent<HTMLDivElement>) => void;
+        onDragLeave: (e: DragEvent<HTMLDivElement>) => void;
+        onDrop: (e: DragEvent<HTMLDivElement>) => void;
+    };
+    addFiles: (incoming: File[]) => void;
+    noteKey: (e: KeyboardEvent) => void;
+    onPaste: (e: ClipboardEvent, view: EditorView) => boolean;
+};
+export {};