@adecore/agents-react 0.21.1 → 0.22.0

package/src/chat/ui/Composer.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
 import { indentLess, indentMore, insertNewline } from '@codemirror/commands';
 import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
@@ -52,13 +52,15 @@ import { PROMPT_MAX_CHARS, pasteBecomesAttachment, pastedTextName, promptGuard,
 import { withQuote } from '../quote';
 import { rememberChatAccount, rememberChatPreferences, rememberChatSelection } from '../preferences';
 import { STASH_SHORTCUT, stashDraft, type StashedPrompt, useStash } from '../stash';
-import { pageTimeline, scrollTimelineToEnd, subscribeTimelineEnd, timelineAtEnd } from '../timeline-scroll';
+import { jumpToTimelineItem, pageTimeline, scrollTimelineToEnd, subscribeTimelineEnd, timelineAtEnd } from '../timeline-scroll';
 import { ChatActivity } from './ChatActivity';
 import { ChatReferenceChip } from './ChatReferenceChip';
 import { chipDecorations } from './composer/chips';
+import { clampMenuIndex, composerMenuAria, optionIdOf } from './composer/menu-aria';
 import { enterAction, inCode, inFenceBody, inOpenFence, listItemAt, recallDirection, tabSpaces } from './composer/keys';
 import { ComposerInput, type ComposerInputHandle } from './ComposerInput';
-import { PromptComposer } from './PromptComposer';
+import { holdLiftsIn, type HoldRelease } from '../prompt-hold';
+import { PromptComposer, type PromptHold } from './PromptComposer';
 import { QuoteTakerContext } from './quote-selection';
 import { LimitDock } from './LimitState';
 import { ResumeCompactionDock } from './ResumeCompactionDock';
@@ -98,8 +100,7 @@ const PROMPT_HISTORY = 50;
 // Commands the composer handles itself; the CLI's own ones are sent through as text.
 const LOCAL_COMMANDS = ['model', 'compact', 'clear'];
 
-/* Files and paths dropped on the card become attachments and chips there. CodeMirror would paste a
-   file's text, or the drag's own text, at the drop point on top of that. */
+/* 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))
 });
@@ -158,12 +159,79 @@ function hintedPlaceholder(lead: string, joiner: string, hints: ReadonlyArray<{
     return root;
 }
 
+function sendLabelKey(busy: boolean, canSteer: boolean, delivery: 'queue' | 'steer'): string {
+    if (!busy) {
+        return 'composer.send';
+    }
+    if (!canSteer) {
+        return 'composer.queueButton';
+    }
+    return delivery === 'steer' ? 'composer.steerButton' : 'composer.queueWithSteerButton';
+}
+
+function sameQuery(left: MentionQuery | null, right: MentionQuery | null): boolean {
+    return left?.start === right?.start && left?.query === right?.query;
+}
+
 function splitPath(path: string): { name: string; dir: string } {
     const slash = path.lastIndexOf('/');
     return slash < 0 ? { name: path, dir: '' } : { name: path.slice(slash + 1), dir: path.slice(0, slash) };
 }
 
 // Keep the editor mounted while a pending request takes over, so its selection and draft survive.
+/*
+ * Keeps a waiting prompt card behind the draft while the person types. Typing, pasting and dictating
+ * all change the draft, so `noteInput` is called from its change handler; the hold lifts after a pause.
+ */
+function usePromptHold(): PromptHold & { noteInput(): void; setComposing(composing: boolean): void } {
+    const typedAt = useRef<number | null>(null);
+    const composing = useRef(false);
+    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const [state, setState] = useState<{ held: boolean; releasedBy: HoldRelease | null }>({ held: false, releasedBy: null });
+
+    const clearTimer = (): void => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+    };
+
+    const release = (reason: HoldRelease): void => {
+        clearTimer();
+        typedAt.current = null;
+        composing.current = false;
+        setState((current) => (current.held ? { held: false, releasedBy: reason } : current));
+    };
+
+    const schedule = (): void => {
+        clearTimer();
+        const wait = holdLiftsIn({ typedAt: typedAt.current, composing: composing.current }, Date.now());
+        if (wait !== null) {
+            timer.current = setTimeout(() => release('pause'), wait);
+        }
+    };
+
+    const noteInput = (): void => {
+        typedAt.current = Date.now();
+        setState({ held: true, releasedBy: null });
+        schedule();
+    };
+
+    const setComposing = (next: boolean): void => {
+        composing.current = next;
+        if (next) {
+            setState({ held: true, releasedBy: null });
+        } else {
+            typedAt.current = Date.now();
+        }
+        schedule();
+    };
+
+    useEffect(() => clearTimer, []);
+
+    return { held: state.held, releasedBy: state.releasedBy, release, noteInput, setComposing };
+}
+
 export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabled, readOnly = false, providerFixed, onSend, onRetarget }: ComposerProps) {
     const { t } = useTranslation('agent-chat');
     const sendDelivery = chatHost().useSendDelivery();
@@ -187,6 +255,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const { isApplePlatform, notify } = chatHost();
     const registerQuoteTaker = useContext(QuoteTakerContext);
     const inputRef = useRef<ComposerInputHandle>(null);
+    const hold = usePromptHold();
     // Taking a queued message back waits on the machine, and what was typed meanwhile is what it merges with.
     const draftRef = useRef(draft);
     const fileInputRef = useRef<HTMLInputElement>(null);
@@ -196,7 +265,6 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const providers = useProviders((s) => s.providers);
     const { approvals, questions } = usePendingRequests(chatId);
     const order = useChatRow(chatId, (row) => row?.order);
-    // The structure, which a delta leaves alone. The prompts and the requests are items of their own.
     const items = useChatRow(chatId, (row) => row?.structure);
     const chats = chatHost().useReferableChats();
     const placeholderLead = chatHost().useComposerPlaceholder(scope.id, chatId);
@@ -208,7 +276,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     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. */
+    // 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
@@ -226,15 +294,12 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     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;
-    /*
-     * A chat that has started keeps its provider (the CLI holds the thread), and one opened for a
-     * named CLI was never going to change it. Either way the models stay switchable. The CLI takes
-     * the new one on the restart the next send does anyway. With one provider in the list the
-     * picker drops its group headers on its own, so it reads as that CLI's own catalog.
-     */
     const accountChoice = useAccountChoice(info.provider, info.account);
+    // 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)
@@ -262,8 +327,8 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
 
     useEffect(
         () =>
-            registerQuoteTaker?.((selected) => {
-                setDraft((current) => ({ ...current, quote: selected }));
+            registerQuoteTaker?.((selected, itemId) => {
+                setDraft((current) => ({ ...current, quote: selected, quoteSource: itemId }));
                 inputRef.current?.focus();
             }),
         [registerQuoteTaker]
@@ -284,11 +349,11 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         }
         let stale = false;
         const search = (): void => {
-            const search = chatHost().searchFiles;
-            if (search === null) {
+            const searchFiles = chatHost().searchFiles;
+            if (searchFiles === null) {
                 return;
             }
-            search(scope.id, info.cwd, mention.query, MENTION_RESULTS)
+            searchFiles(scope.id, info.cwd, mention.query, MENTION_RESULTS)
                 .then((files) => {
                     if (!stale) {
                         setSearched({ query: mention.query, files });
@@ -375,6 +440,26 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         [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 editorExtensions = useMemo(
         () => [chipDecorations({ mentions: draft.mentions, skills: draft.skills }), LEAVE_DROPS_TO_THE_CARD],
         [draft.mentions, draft.skills]
@@ -390,19 +475,32 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     };
 
     const removeQuote = (): void => {
-        setDraft((current) => ({ ...current, quote: '' }));
+        setDraft((current) => ({ ...current, quote: '', quoteSource: null }));
         inputRef.current?.focus();
     };
 
-    const configure = (patch: { selection?: ModelSelection; runtimeMode?: RuntimeMode; account?: string }): void => {
+    const showError = (error: unknown): void => {
+        setNotice(error instanceof Error ? error.message : String(error));
+    };
+
+    /* One configuration at a time; a second pick while one is on its way is dropped. */
+    const runConfiguration = (work: () => Promise<void>): void => {
         if (configuring.current) {
             return;
         }
         configuring.current = true;
         setConfigurationPending(true);
-        void actions
-            .configure(chatId, patch)
-            .then(() => {
+        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);
                 }
@@ -413,11 +511,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                     rememberChatAccount(scope.id, info.provider, patch.account);
                 }
             })
-            .catch((error: unknown) => setNotice(error instanceof Error ? error.message : String(error)))
-            .finally(() => {
-                configuring.current = false;
-                setConfigurationPending(false);
-            });
+        );
     };
 
     const chooseAccount = (account: string): void => configure({ account });
@@ -426,18 +520,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const chooseModel = (provider: AgentKind, slug: string): void => {
         const selection: ModelSelection = { model: slug, options: {} };
         if (provider !== info.provider) {
-            if (configuring.current) {
-                return;
-            }
-            configuring.current = true;
-            setConfigurationPending(true);
-            void onRetarget(provider, selection)
-                .then(() => rememberChatSelection(provider, selection))
-                .catch((error: unknown) => setNotice(error instanceof Error ? error.message : String(error)))
-                .finally(() => {
-                    configuring.current = false;
-                    setConfigurationPending(false);
-                });
+            runConfiguration(() => onRetarget(provider, selection).then(() => rememberChatSelection(provider, selection)));
             return;
         }
         configure({ selection });
@@ -445,14 +528,10 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
 
     const stop = (shiftKey: boolean): void => {
         if (composerStopOf(shiftKey) === 'turn') {
-            void actions.stopTurn(chatId, false).catch((error: unknown) => setNotice(error instanceof Error ? error.message : String(error)));
+            void actions.stopTurn(chatId, false).catch(showError);
             return;
         }
-        chatHost().confirm.stopSubagents(
-            scope.id,
-            chatId,
-            () => void actions.stopTurn(chatId, true).catch((error: unknown) => setNotice(error instanceof Error ? error.message : String(error)))
-        );
+        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. */
@@ -493,18 +572,16 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         }
     };
 
-    const same = (a: MentionQuery | null, b: MentionQuery | null): boolean => a?.start === b?.start && a?.query === b?.query;
-
     /* Which picker the caret opens: `@` for a file, `$` for a skill, or neither. In code a sigil is just text. */
     const trackTriggers = (value: string, selection: TextRange, state: EditorState): void => {
         const empty = selection.from === selection.to;
         const tree = empty ? (ensureSyntaxTree(state, selection.from, 50) ?? syntaxTree(state)) : null;
         const caret = tree !== null && !inCode(tree, value, selection.from) ? selection.from : null;
         const skill = caret === null ? null : findSkillQuery(value, caret);
-        setSkillQuery((current) => (same(current, skill) ? current : skill));
+        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) => (same(current, next) ? current : next));
+        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.
@@ -558,8 +635,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         moveCaret(result.caret);
     };
 
-    /* Paths dragged in from a list of files. There is no mention query to insert into, so they land
-       at the end of the prompt and join the draft's mentions, which is what `chat.send` carries. */
+    /* Paths dragged in from a list of files. With no mention query to insert into, they land at the end of the prompt. */
     const addMentions = (paths: string[]): void => {
         const fresh = paths.filter((path) => path !== '');
         if (fresh.length === 0 || capabilities?.mentions === false) {
@@ -619,7 +695,8 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             setNotice(`${rejected.name}: ${rejected.reason}`);
             return;
         }
-        const chosen = commands[menuIndex];
+        hold.release('send');
+        const chosen = commands[activeIndex];
         if (commandQuery !== null && chosen?.local && runCommand(chosen.name)) {
             clearDraft();
             return;
@@ -640,6 +717,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             mentions: presentMentions(trimmed, draft.mentions),
             skills: presentSkills(trimmed, draft.skills),
             chats: draft.chats,
+            quoteSource: quote !== '' && quoteSource !== null ? { itemId: quoteSource } : undefined,
             attachments: draft.attachments
         });
         clearDraft();
@@ -648,9 +726,20 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         setHistoryIndex(null);
     };
 
-    /* A stashed prompt comes back as text, mentions and skills; its files were never kept. */
+    /*
+     * A stashed prompt comes back as text, mentions and skills; its files were never kept. Its quote
+     * keeps leading to its reply in the chat it came from, and is plain text in any other.
+     */
     const restoreStashed = (prompt: StashedPrompt): void => {
-        setDraft((current) => ({ ...current, text: prompt.text, mentions: [...prompt.mentions], skills: [...prompt.skills] }));
+        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();
     };
@@ -683,7 +772,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                 failed(e);
                 return;
             }
-            const taken: Omit<ChatDraft, 'quote'> = {
+            const taken: Omit<ChatDraft, 'quote' | 'quoteSource'> = {
                 text: message.text,
                 mentions: message.mentions ?? [],
                 skills: message.skills ?? [],
@@ -727,7 +816,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             }
             return;
         }
-        if (stashDraft(draft)) {
+        if (stashDraft(draft, chatId)) {
             clearDraft();
             setMention(null);
             setSkillQuery(null);
@@ -752,6 +841,19 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         return true;
     };
 
+    /* The arrows walk an open picker round; true when the key was one of them. */
+    const moveInMenu = (key: string, count: number): boolean => {
+        if (key === 'ArrowDown') {
+            setMenuIndex((i) => (i + 1) % count);
+            return true;
+        }
+        if (key === 'ArrowUp') {
+            setMenuIndex((i) => (i - 1 + count) % count);
+            return true;
+        }
+        return false;
+    };
+
     /* Runs before the editor's own keymap; true means the key is handled and its default prevented. */
     const onKeyDown = (e: KeyboardEvent, view: EditorView): boolean => {
         // Shift with the paste shortcut pastes a large text inline after all; any other key forgets it.
@@ -766,8 +868,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             setText('', [], []);
             return true;
         }
-        // The composer keeps the keyboard while you type, but the shortcuts that move between views,
-        // panels and the palette stay the app's, untouched: Mod+Shift+Enter would otherwise send as well.
+        // 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;
         }
@@ -785,16 +886,11 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             return true;
         }
         if (commandMenuOpen) {
-            if (e.key === 'ArrowDown') {
-                setMenuIndex((i) => (i + 1) % commands.length);
-                return true;
-            }
-            if (e.key === 'ArrowUp') {
-                setMenuIndex((i) => (i - 1 + commands.length) % commands.length);
+            if (moveInMenu(e.key, commands.length)) {
                 return true;
             }
             if (e.key === 'Tab') {
-                const chosen = commands[menuIndex]!;
+                const chosen = commands[activeIndex]!;
                 if (chosen.skill) {
                     chooseSkill(chosen.name);
                 } else {
@@ -804,30 +900,20 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             }
         }
         if (skillMenuOpen) {
-            if (e.key === 'ArrowDown') {
-                setMenuIndex((i) => (i + 1) % skillMatches.length);
-                return true;
-            }
-            if (e.key === 'ArrowUp') {
-                setMenuIndex((i) => (i - 1 + skillMatches.length) % skillMatches.length);
+            if (moveInMenu(e.key, skillMatches.length)) {
                 return true;
             }
             if (e.key === 'Tab' || e.key === 'Enter') {
-                chooseSkill((skillMatches[menuIndex] ?? skillMatches[0]!).name);
+                chooseSkill((skillMatches[activeIndex] ?? skillMatches[0]!).name);
                 return true;
             }
         }
         if (mentionMenuOpen && mentionCount > 0) {
-            if (e.key === 'ArrowDown') {
-                setMenuIndex((i) => (i + 1) % mentionCount);
-                return true;
-            }
-            if (e.key === 'ArrowUp') {
-                setMenuIndex((i) => (i - 1 + mentionCount) % mentionCount);
+            if (moveInMenu(e.key, mentionCount)) {
                 return true;
             }
             if (e.key === 'Tab' || e.key === 'Enter') {
-                chooseMentionAt(menuIndex);
+                chooseMentionAt(activeIndex);
                 return true;
             }
         }
@@ -946,9 +1032,8 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
 
     return (
         <div className="chat-composer-content pointer-events-none relative z-10 w-full">
-            {/* Only while there is something below the fold. It sits over the composer rather than
-                in the thread, because the composer is the one thing whose height it always clears. */}
-            {/* A read-only composer sits under something that stands in the thread's place, whose end is not this one. */}
+            {/* Over the composer rather than in the thread, since the composer's height is the one it always clears.
+                A read-only composer sits under something that stands in the thread's place, whose end is not this one. */}
             {!atEnd && !readOnly && (
                 <div className="absolute inset-x-0 bottom-full mb-2 flex justify-center">
                     <Tooltip label={t('composer.jumpToEnd')} name>
@@ -969,8 +1054,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                         ? 'border-accent bg-[color-mix(in_srgb,var(--accent-soft)_60%,var(--surface-raised))]'
                         : 'border-border bg-[color-mix(in_srgb,var(--surface-raised)_92%,transparent)]'
                 )}
-                /* The whole card takes a dropped file as a mention, so a layout around it that takes drops
-                   of its own leaves it alone. */
+                /* The whole card takes a dropped file, so a layout around it that takes drops of its own leaves it alone. */
                 data-takes-drop="all"
                 onDragOver={(e) => {
                     if (writable && (e.dataTransfer.types.includes('Files') || carriesMentions(e.dataTransfer.types))) {
@@ -1002,6 +1086,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                     hasDraft={!isEmptyDraft(draft)}
                     denyReason={capabilities?.denyReason === true}
                     onAllAnswered={() => inputRef.current?.focus()}
+                    hold={hold}
                 >
                     <LimitDock chatId={chatId} info={info} />
                     {compactionOffer && (
@@ -1012,11 +1097,15 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                         />
                     )}
                     {commandMenuOpen && (
-                        <div className="border-b border-border px-1.5 py-1.5">
+                        <div id={listId} role="listbox" aria-label={t('composer.menu.commands')} className="border-b border-border px-1.5 py-1.5">
                             {commands.map((command, index) => (
                                 <button
                                     key={command.name}
-                                    data-active={index === menuIndex}
+                                    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()}
@@ -1042,11 +1131,15 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                         </div>
                     )}
                     {skillMenuOpen && (
-                        <div className="border-b border-border px-1.5 py-1.5">
+                        <div id={listId} role="listbox" aria-label={t('composer.menu.skills')} className="border-b border-border px-1.5 py-1.5">
                             {skillMatches.map((skill, index) => (
                                 <button
                                     key={skill.name}
-                                    data-active={index === menuIndex}
+                                    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()}
@@ -1063,45 +1156,70 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                     )}
                     {mentionMenuOpen && (
                         <div className="border-b border-border px-1.5 py-1.5">
-                            {chatMatches.length > 0 && <Menu.Label>{t('composer.mentions.chats')}</Menu.Label>}
-                            {chatMatches.map((chat, index) => (
-                                <button
-                                    key={chat.id}
-                                    data-active={index === menuIndex}
-                                    className="cursor-row flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted"
-                                    onMouseEnter={() => setMenuIndex(index)}
-                                    onMouseDown={(e) => e.preventDefault()}
-                                    onClick={() => chooseChat(chat.id)}
-                                >
-                                    <Icon icon={MessageSquare} size={14} className="shrink-0 text-text-faint" />
-                                    <span className="truncate text-text">{chat.title || t('chatReference.untitled')}</span>
-                                </button>
-                            ))}
-                            {files.length > 0 && (mention.query === '' || chatMatches.length > 0) && (
-                                <Menu.Label>{mention.query === '' ? t('composer.mentions.here') : t('composer.mentions.files')}</Menu.Label>
+                            {mentionCount > 0 && (
+                                <div id={listId} role="listbox" aria-label={t('composer.menu.mentions')}>
+                                    {chatMatches.length > 0 && (
+                                        <div role="group" aria-labelledby={mentionsLabelId}>
+                                            <Menu.Label id={mentionsLabelId}>{t('composer.mentions.chats')}</Menu.Label>
+                                            {chatMatches.map((chat, index) => (
+                                                <button
+                                                    key={chat.id}
+                                                    id={optionIdOf(listId, index)}
+                                                    role="option"
+                                                    aria-selected={index === activeIndex}
+                                                    tabIndex={-1}
+                                                    data-active={index === activeIndex}
+                                                    className="cursor-row flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted"
+                                                    onMouseEnter={() => setMenuIndex(index)}
+                                                    onMouseDown={(e) => e.preventDefault()}
+                                                    onClick={() => chooseChat(chat.id)}
+                                                >
+                                                    <Icon icon={MessageSquare} size={14} className="shrink-0 text-text-faint" />
+                                                    <span className="truncate text-text">{chat.title || t('chatReference.untitled')}</span>
+                                                </button>
+                                            ))}
+                                        </div>
+                                    )}
+                                    {files.length > 0 && (
+                                        <div
+                                            role="group"
+                                            {...(filesLabelShown ? { 'aria-labelledby': filesLabelId } : { 'aria-label': t('composer.mentions.files') })}
+                                        >
+                                            {filesLabelShown && (
+                                                <Menu.Label id={filesLabelId}>
+                                                    {mention.query === '' ? t('composer.mentions.here') : t('composer.mentions.files')}
+                                                </Menu.Label>
+                                            )}
+                                            {files.map((path, index) => {
+                                                const { name, dir } = splitPath(path);
+                                                return (
+                                                    <button
+                                                        key={path}
+                                                        id={optionIdOf(listId, chatMatches.length + index)}
+                                                        role="option"
+                                                        aria-selected={chatMatches.length + index === activeIndex}
+                                                        tabIndex={-1}
+                                                        data-active={chatMatches.length + index === activeIndex}
+                                                        className="cursor-row flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted"
+                                                        onMouseEnter={() => setMenuIndex(chatMatches.length + index)}
+                                                        onMouseDown={(e) => e.preventDefault()}
+                                                        onClick={() => chooseMention(path)}
+                                                    >
+                                                        <FileIcon path={path} size={14} />
+                                                        <span className="truncate font-mono text-text">{name}</span>
+                                                        {dir && <span className="min-w-0 truncate text-text-faint">{dir}</span>}
+                                                    </button>
+                                                );
+                                            })}
+                                        </div>
+                                    )}
+                                </div>
                             )}
                             {mentionCount === 0 && (
                                 <div className="px-2 py-1 text-xs text-text-faint">
                                     {mention.query ? t('composer.mentions.noMatch') : t('composer.mentions.empty')}
                                 </div>
                             )}
-                            {files.map((path, index) => {
-                                const { name, dir } = splitPath(path);
-                                return (
-                                    <button
-                                        key={path}
-                                        data-active={chatMatches.length + index === menuIndex}
-                                        className="cursor-row flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted"
-                                        onMouseEnter={() => setMenuIndex(chatMatches.length + index)}
-                                        onMouseDown={(e) => e.preventDefault()}
-                                        onClick={() => chooseMention(path)}
-                                    >
-                                        <FileIcon path={path} size={14} />
-                                        <span className="truncate font-mono text-text">{name}</span>
-                                        {dir && <span className="min-w-0 truncate text-text-faint">{dir}</span>}
-                                    </button>
-                                );
-                            })}
                         </div>
                     )}
                     {queue.length > 0 && (
@@ -1158,7 +1276,24 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                     )}
                     {quote !== '' && (
                         <div className="flex items-center gap-2 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3">
-                            <span className="min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-xs text-text-muted">{quote}</span>
+                            {quoteSource === null ? (
+                                <span className="min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-xs text-text-muted">{quote}</span>
+                            ) : (
+                                <Tooltip label={t('composer.quote.goToSource')}>
+                                    <button
+                                        type="button"
+                                        className="min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-left text-xs text-text-muted hover:text-text"
+                                        onClick={() =>
+                                            jumpToTimelineItem(scope.keyOf(chatId), quoteSource, {
+                                                flash: true,
+                                                onMissing: () => setNotice(t('rows.user.quoteGone'))
+                                            })
+                                        }
+                                    >
+                                        {quote}
+                                    </button>
+                                </Tooltip>
+                            )}
                             <IconButton icon={X} size="2xs" label={t('composer.quote.remove')} onClick={removeQuote} />
                         </div>
                     )}
@@ -1204,7 +1339,9 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                         disabled={!writable}
                         tabbable={focused}
                         extensions={editorExtensions}
+                        aria={inputAria}
                         onChange={(value, selection, state) => {
+                            hold.noteInput();
                             setText(value);
                             setMenuIndex(0);
                             trackTriggers(value, selection, state);
@@ -1216,7 +1353,9 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                         onBlur={() => {
                             setMention(null);
                             setSkillQuery(null);
+                            hold.release('blur');
                         }}
+                        onComposing={hold.setComposing}
                         onKeyDown={onKeyDown}
                         onPaste={onPaste}
                     />
@@ -1300,21 +1439,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                                 </Tooltip>
                             )}
                             {(!busy || !isEmptyDraft(draft)) && (
-                                <Tooltip
-                                    label={
-                                        busy
-                                            ? t(
-                                                  canSteer
-                                                      ? sendDelivery === 'steer'
-                                                          ? 'composer.steerButton'
-                                                          : 'composer.queueWithSteerButton'
-                                                      : 'composer.queueButton'
-                                              )
-                                            : t('composer.send')
-                                    }
-                                    kbd={KEY_SHORTCUTS.modEnter}
-                                    name
-                                >
+                                <Tooltip label={t(sendLabelKey(busy, canSteer, sendDelivery))} kbd={KEY_SHORTCUTS.modEnter} name>
                                     <button
                                         className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100"
                                         disabled={isEmptyDraft(draft) || !writable || guard.tooLong}