@adecore/agents-react 0.23.1 → 0.24.0

package/src/chat/ui/composer/keys.ts

@@ -1,11 +1,15 @@
 import type { SyntaxNode, Tree } from '@lezer/common';
+import { modSends, type ChatSendKey } from '../../send-key';
 
-export type EnterAction = 'send' | 'newline' | 'continue-list' | 'leave-list';
+/* `send-alternate` sends with the delivery a running turn does not get by default; `send-and-new` also opens a new chat once it went. */
+export type EnterAction = 'send' | 'send-alternate' | 'send-and-new' | 'newline' | 'continue-list' | 'leave-list';
 
 export interface EnterKeys {
     shift: boolean;
     /* Cmd on macOS, Ctrl elsewhere. */
     mod: boolean;
+    /* Option on macOS. */
+    alt?: boolean;
 }
 
 export interface ListItem {
@@ -23,6 +27,12 @@ export interface EnterContext {
     list: ListItem | null;
     /* The caret's offset in its line. */
     column: number;
+    /* Which key sends; `enter` when left out. */
+    sendKey?: ChatSendKey;
+    /* The message runs over more than one line, where `mod-enter-multiline` lets Enter add a line. */
+    multiline?: boolean;
+    /* The host opens a new chat after a send, which Mod+Alt+Enter asks for. */
+    startsNewChat?: boolean;
 }
 
 const LIST_ITEM = /^([ \t]*)(?:([-*+])|(\d{1,9})([.)]))([ \t]+)(\[[ xX]\](?:[ \t]+|$))?/;
@@ -41,23 +51,35 @@ export function listItemAt(line: string): ListItem | null {
 /*
  * Enter sends, except where whoever types is still writing: inside a fence nobody has closed yet
  * it adds a line, and in a list it starts the next item, or leaves the list from an empty one, so
- * a second Enter breaks out. Shift adds a plain line and Mod sends from anywhere.
+ * a second Enter breaks out. Shift adds a plain line and Mod sends from anywhere. Where the send key
+ * is Mod+Enter, Enter adds a line instead of sending. Alt sends the other way (queue or steer), and so
+ * does Mod+Shift+Enter where Mod+Enter is the send key; Mod+Alt+Enter is the send that opens a new chat.
  */
-export function enterAction(keys: EnterKeys, { inOpenFence, list, column }: EnterContext): EnterAction {
+export function enterAction(
+    keys: EnterKeys,
+    { inOpenFence, list, column, sendKey = 'enter', multiline = false, startsNewChat = false }: EnterContext
+): EnterAction {
+    const modOnly = modSends(sendKey, multiline);
     if (keys.mod) {
-        return 'send';
+        if (keys.alt && startsNewChat) {
+            return 'send-and-new';
+        }
+        return keys.alt || (modOnly && keys.shift) ? 'send-alternate' : 'send';
     }
     if (keys.shift || inOpenFence) {
         return 'newline';
     }
-    if (list === null) {
-        return 'send';
+    if (list !== null) {
+        // A caret in front of the marker moves the item down rather than splitting its marker.
+        if (column < list.prefix.length) {
+            return 'newline';
+        }
+        return list.empty ? 'leave-list' : 'continue-list';
     }
-    // A caret in front of the marker moves the item down rather than splitting its marker.
-    if (column < list.prefix.length) {
-        return 'newline';
+    if (keys.alt) {
+        return 'send-alternate';
     }
-    return list.empty ? 'leave-list' : 'continue-list';
+    return modOnly ? 'newline' : 'send';
 }
 
 /* The innermost fenced code block around `pos`, if any. */

package/src/chat/ui/composer/placeholder.ts

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useChatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+
+/* The empty box names its sigils as key caps, so they read as keys to press rather than as punctuation. */
+function hintedPlaceholder(lead: string, joiner: string, hints: ReadonlyArray<{ key: string; label: string }>): HTMLElement {
+    const root = document.createElement('span');
+    root.className = 'composer-hints';
+    const extra = document.createElement('span');
+    extra.className = 'composer-hints-extra';
+    extra.append(joiner);
+    for (const hint of hints) {
+        const cap = document.createElement('kbd');
+        cap.textContent = hint.key;
+        extra.append(cap, hint.label);
+    }
+    root.append(lead, extra);
+    return root;
+}
+
+interface PlaceholderInput {
+    chatId: string;
+    disabled: boolean;
+    readOnly: boolean;
+    mentionable: boolean;
+    hasSkills: boolean;
+}
+
+/* What the empty box says: why nothing can be written, or the host's words and the keys that open a picker. */
+export function useHintedPlaceholder({ chatId, disabled, readOnly, mentionable, hasSkills }: PlaceholderInput): string | HTMLElement {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const lead = useChatHost().useComposerPlaceholder(scope.id, chatId);
+    return useMemo(() => {
+        if (disabled) {
+            return t('composer.placeholder.disconnected');
+        }
+        if (readOnly) {
+            return t('composer.placeholder.readOnly');
+        }
+        return hintedPlaceholder(lead ?? 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, lead, mentionable, hasSkills, t]);
+}

package/src/chat/ui/composer/use-chat-controls.ts

@@ -0,0 +1,134 @@
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { AgentKind, ChatInfo, ModelSelection, RuntimeMode } from '@adecore/agent-contracts';
+import { useChatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { errorCode } from '../../../transport';
+import { useChatActions } from '../../actions';
+import { rememberChatAccount, rememberChatPreferences, rememberChatSelection } from '../../preferences';
+import { composerStopOf } from '../../subagent-list';
+import type { ComposerNotice } from './use-notice';
+
+interface ControlsInput {
+    chatId: string;
+    info: ChatInfo;
+    notice: ComposerNotice;
+    onRetarget(provider: AgentKind, selection: ModelSelection): Promise<void>;
+}
+
+/* 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 }: ControlsInput) {
+    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: () => Promise<void>): void => {
+        if (configuring.current) {
+            return;
+        }
+        configuring.current = true;
+        setConfigurationPending(true);
+        void work()
+            .catch(showError)
+            .finally(() => {
+                configuring.current = false;
+                setConfigurationPending(false);
+            });
+    };
+
+    const configure = (patch: { selection?: ModelSelection; runtimeMode?: RuntimeMode; account?: string }): void => {
+        runConfiguration(() =>
+            actions.configure(chatId, patch).then(() => {
+                if (patch.selection) {
+                    rememberChatSelection(info.provider, patch.selection);
+                }
+                if (patch.runtimeMode) {
+                    rememberChatPreferences({ runtimeMode: patch.runtimeMode });
+                }
+                if (patch.account) {
+                    rememberChatAccount(scope.id, info.provider, patch.account);
+                }
+            })
+        );
+    };
+
+    /* A model of another CLI re-points the whole chat; one of this CLI's own is a configure. */
+    const chooseModel = (provider: AgentKind, slug: string): void => {
+        const selection: ModelSelection = { model: slug, options: {} };
+        if (provider !== info.provider) {
+            runConfiguration(() => onRetarget(provider, selection).then(() => rememberChatSelection(provider, selection)));
+            return;
+        }
+        configure({ selection });
+    };
+
+    const stop = (shiftKey: boolean): void => {
+        if (composerStopOf(shiftKey) === 'turn') {
+            void actions.stopTurn(chatId, false).catch(showError);
+            return;
+        }
+        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 (): Promise<void> => {
+        try {
+            await actions.clear(chatId, false);
+        } catch (e) {
+            if (errorCode(e) === 'chat-busy') {
+                setConfirmClear(true);
+                return;
+            }
+            setNotice(t('composer.notice.clearFailed'));
+        }
+    };
+
+    const forceClearThread = async (): Promise<void> => {
+        await actions.clear(chatId, true);
+        setConfirmClear(false);
+    };
+
+    const compact = (): void => {
+        void actions.compact(chatId).catch(() => setNotice(t('composer.notice.compactFailed')));
+    };
+
+    /* Runs one of the composer's own commands; false for a name it does not handle. */
+    const runCommand = (name: string): boolean => {
+        switch (name) {
+            case 'model':
+                setModelPickerOpen(true);
+                return true;
+            case 'compact':
+                void actions.compact(chatId).catch(() => undefined);
+                return true;
+            case 'clear':
+                void clearThread();
+                return true;
+            default:
+                return false;
+        }
+    };
+
+    return {
+        configurationPending,
+        configure,
+        chooseModel,
+        chooseAccount: (account: string): void => configure({ account }),
+        stop,
+        compact,
+        runCommand,
+        modelPickerOpen,
+        setModelPickerOpen,
+        confirmClear,
+        cancelClear: (): void => setConfirmClear(false),
+        forceClearThread
+    };
+}
+
+export type ChatControls = ReturnType<typeof useChatControls>;

package/src/chat/ui/composer/use-compaction-offer.ts

@@ -0,0 +1,25 @@
+import type { ChatInfo, ChatItem, ProviderCapabilities } from '@adecore/agent-contracts';
+import { useNow } from '@adecore/ui';
+import { useChatRow } from '../../../state/chats';
+import { RESUME_COMPACTION_TOKENS, resumeCompactionOffer } from '../../logic/resume-compaction';
+import { useResumeCompactionDismissal } from '../../resume-compaction-dismissals';
+
+/* 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: string, info: ChatInfo, compaction: ProviderCapabilities['compaction'] | undefined) {
+    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 is ChatItem => item !== undefined),
+        dismissedTurnId,
+        now
+    });
+}

package/src/chat/ui/composer/use-composer-draft.ts

@@ -0,0 +1,71 @@
+import { useContext, useEffect, useRef, useState, type Dispatch, type RefObject, type SetStateAction } from 'react';
+import { EMPTY_DRAFT, joinDraftText, readDraft, takeDraftOffers, writeDraft, type ChatDraft } from '../../drafts';
+import type { ComposerInputHandle } from '../ComposerInput';
+import { QuoteTakerContext } from '../quote-selection';
+
+export interface ComposerDraft {
+    draft: ChatDraft;
+    setDraft: Dispatch<SetStateAction<ChatDraft>>;
+    /* Taking a queued message back waits on the machine, and what was typed meanwhile is what it merges with. */
+    latest: RefObject<ChatDraft>;
+    /* The mentions and skills default to the draft's own as last rendered. */
+    setText(next: string, mentions?: string[], skills?: string[]): void;
+    clear(): void;
+    removeQuote(): void;
+    removeChat(id: string): void;
+    removeAttachment(index: number): void;
+}
+
+/* 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: string, inputRef: RefObject<ComposerInputHandle | null>): ComposerDraft {
+    const [draft, setDraft] = useState<ChatDraft>(() => 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: string, mentions = draft.mentions, chosen = draft.skills): void => {
+        setDraft((current) => ({ ...current, text: next, mentions, skills: chosen }));
+    };
+
+    const clear = (): void => {
+        setDraft(EMPTY_DRAFT);
+    };
+
+    const removeQuote = (): void => {
+        setDraft((current) => ({ ...current, quote: '', quoteSource: null }));
+        inputRef.current?.focus();
+    };
+
+    const removeChat = (id: string): void => {
+        setDraft((current) => ({ ...current, chats: current.chats.filter((entry) => entry !== id) }));
+        inputRef.current?.focus();
+    };
+
+    const removeAttachment = (index: number): void => {
+        setDraft((current) => ({ ...current, attachments: current.attachments.filter((_, i) => i !== index) }));
+    };
+
+    return { draft, setDraft, latest, setText, clear, removeQuote, removeChat, removeAttachment };
+}

package/src/chat/ui/composer/use-composer-menus.ts

@@ -0,0 +1,289 @@
+import { useEffect, useId, useMemo, useState, type RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
+import type { EditorState } from '@codemirror/state';
+import type { ChatInfo, ChatSkill, ProviderCapabilities } from '@adecore/agent-contracts';
+import { useChatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { chatSuggestions } from '../../chat-references';
+import { usableSlashCommands } from '../../guards';
+import {
+    dropQuery,
+    findMentionQuery,
+    findSkillQuery,
+    insertMention,
+    insertSkill,
+    mentionPick,
+    NO_MENTION_SEARCH,
+    type MentionQuery,
+    type MentionSearch,
+    type TextRange
+} from '../../mentions';
+import type { ComposerInputHandle } from '../ComposerInput';
+import type { ComposerDraft } from './use-composer-draft';
+import { inCode } from './keys';
+import { clampMenuIndex, composerMenuAria } from './menu-aria';
+
+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'];
+
+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>;
+}
+
+function sameQuery(left: MentionQuery | null, right: MentionQuery | null): boolean {
+    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 }: MenusInput) {
+    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<MentionQuery | null>(null);
+    const [skillQuery, setSkillQuery] = useState<MentionQuery | null>(null);
+    const [skills, setSkills] = useState<ChatSkill[]>([]);
+    const [searched, setSearched] = useState<MentionSearch>(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 = (): void => {
+            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((): ComposerCommand[] => {
+        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: string, selection: TextRange, state: EditorState): void => {
+        const empty = selection.from === selection.to;
+        const tree = empty ? (ensureSyntaxTree(state, selection.from, 50) ?? syntaxTree(state)) : null;
+        const caret = tree !== null && !inCode(tree, value, selection.from) ? selection.from : null;
+        const skill = caret === null ? null : findSkillQuery(value, caret);
+        setSkillQuery((current) => (sameQuery(current, skill) ? current : skill));
+        // A CLI that does not expand `@path` gets the text as it is, so the picker stays out of the way.
+        const next = caret === null || capabilities?.mentions === false ? null : findMentionQuery(value, caret);
+        setMention((current) => (sameQuery(current, next) ? current : next));
+    };
+
+    // The inserted text reaches the editor with the render it causes, so the caret waits a frame for it.
+    const moveCaret = (caret: number): void => {
+        requestAnimationFrame(() => inputRef.current?.setCaret(caret));
+    };
+
+    const close = (): void => {
+        setMention(null);
+        setSkillQuery(null);
+    };
+
+    const chooseMention = (path: string): void => {
+        if (!mention) {
+            return;
+        }
+        const result = insertMention(text, mention, path);
+        setText(result.text, draft.mentions.includes(path) ? draft.mentions : [...draft.mentions, path]);
+        setMention(null);
+        moveCaret(result.caret);
+    };
+
+    /* A picked chat sits beside the text as a chip, so the `@query` that found it goes. */
+    const chooseChat = (id: string): void => {
+        if (!mention) {
+            return;
+        }
+        const result = dropQuery(text, mention);
+        setDraft((current) => ({ ...current, text: result.text, chats: current.chats.includes(id) ? current.chats : [...current.chats, id] }));
+        setMention(null);
+        moveCaret(result.caret);
+    };
+
+    const chooseMentionAt = (index: number): void => {
+        const pick = mention === null ? null : mentionPick(index, chatMatches, searched, mention.query);
+        if (pick?.kind === 'chat') {
+            chooseChat(pick.chat.id);
+        } else if (pick?.kind === 'file') {
+            chooseMention(pick.path);
+        }
+    };
+
+    /*
+     * A picked skill becomes a `$name` chip in the text and a name on the send, which is what
+     * dispatches it. The `/` menu lands here too, so both spellings end up on the same path.
+     */
+    const chooseSkill = (name: string): void => {
+        const result = skillQuery ? insertSkill(text, skillQuery, name) : { text: `$${name} `, caret: name.length + 2 };
+        setText(result.text, draft.mentions, draft.skills.includes(name) ? draft.skills : [...draft.skills, name]);
+        setSkillQuery(null);
+        moveCaret(result.caret);
+    };
+
+    /* A clicked command; Tab completes one with a space after it instead. */
+    const pickCommand = (command: ComposerCommand, index: number): void => {
+        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: string, count: number): boolean => {
+        if (key === 'ArrowDown') {
+            setMenuIndex((i) => (i + 1) % count);
+            return true;
+        }
+        if (key === 'ArrowUp') {
+            setMenuIndex((i) => (i - 1 + count) % count);
+            return true;
+        }
+        return false;
+    };
+
+    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
+    };
+}
+
+export type ComposerMenus = ReturnType<typeof useComposerMenus>;