@adecore/agents-react 0.21.2 → 0.22.1

package/src/chat/timeline-scroll.ts

@@ -1,6 +1,9 @@
 // A page is a screen minus a little, so the line you were reading is still on it after the jump.
 const PAGE_OVERLAP = 0.9;
 
+// How long a jump asked before its thread registered stays up for that thread.
+const PENDING_JUMP_TTL_MS = 10_000;
+
 type Scroller = {
     element: HTMLElement;
     follow: (enabled: boolean) => void;
@@ -103,14 +106,17 @@ export function stepTimelineMessage(key: string, direction: -1 | 1): boolean {
  */
 function waitingJumps<T>(): { register(key: string, jump: (target: T) => void): () => void; jump(key: string, target: T): boolean } {
     const jumpers = new Map<string, (target: T) => void>();
-    const waiting = new Map<string, T>();
+    const waiting = new Map<string, { target: T; at: number }>();
     return {
         register(key, jump) {
             jumpers.set(key, jump);
-            if (waiting.has(key)) {
-                const target = waiting.get(key)!;
+            const pending = waiting.get(key);
+            if (pending !== undefined) {
                 waiting.delete(key);
-                jump(target);
+                // A jump nobody picked up for long is not what the person wants any more.
+                if (Date.now() - pending.at <= PENDING_JUMP_TTL_MS) {
+                    jump(pending.target);
+                }
             }
             return () => {
                 if (jumpers.get(key) === jump) {
@@ -121,7 +127,7 @@ function waitingJumps<T>(): { register(key: string, jump: (target: T) => void):
         jump(key, target) {
             const jump = jumpers.get(key);
             if (jump === undefined) {
-                waiting.set(key, target);
+                waiting.set(key, { target, at: Date.now() });
                 return false;
             }
             jump(target);
@@ -130,15 +136,23 @@ function waitingJumps<T>(): { register(key: string, jump: (target: T) => void):
     };
 }
 
-const itemJumps = waitingJumps<string>();
+/* What a jump to an item may ask beyond scrolling to it. */
+export interface ItemJumpOptions {
+    /* Lights the row up once it is in view. */
+    flash?: boolean;
+    /* Runs when the item is nowhere in the thread, after every earlier page has been tried. */
+    onMissing?(): void;
+}
+
+const itemJumps = waitingJumps<{ itemId: string; options: ItemJumpOptions }>();
 
-export function registerItemJumper(key: string, jump: (itemId: string) => void): () => void {
-    return itemJumps.register(key, jump);
+export function registerItemJumper(key: string, jump: (itemId: string, options: ItemJumpOptions) => void): () => void {
+    return itemJumps.register(key, ({ itemId, options }) => jump(itemId, options));
 }
 
 /* False when that chat has no thread on screen; the jump then waits for the next one that registers. */
-export function jumpToTimelineItem(key: string, itemId: string): boolean {
-    return itemJumps.jump(key, itemId);
+export function jumpToTimelineItem(key: string, itemId: string, options: ItemJumpOptions = {}): boolean {
+    return itemJumps.jump(key, { itemId, options });
 }
 
 /* Which part of a turn a jump lands on: the message that opened it, or the files it changed. */

package/src/chat/ui/ChatActivity.tsx

@@ -1,16 +1,16 @@
 import { useMemo, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Activity, Square, SquareTerminal } from 'lucide-react';
+import { Activity, MessageCircleQuestionMark, Square, SquareTerminal } from 'lucide-react';
 import type { ChatBackgroundTask, ChatSubagentItem } from '@adecore/agent-contracts';
 import { backgroundCounts } from '../activity';
-import { badgeCountOf, entryTimeOf, flyoutSubagents, statusWordOf, subagentTitle, summaryWordOf, taskIdOf } from '../subagent-list';
+import { badgeCountOf, entryTimeOf, flyoutSubagents, progressOf, statusWordOf, subagentTitle, summaryWordOf, taskIdOf, taskRowStateOf } from '../subagent-list';
 import { useSubagentSupport } from '../subagent-support';
 import { canOpenSubagent, crumbOf, openFromMain, useSubagentTrail } from '../subagent-view';
 import { SubagentStopButton } from './SubagentStopButton';
 import { formatElapsedShort } from '@adecore/ui/format';
 import { Icon, IconButton, Popover, Surface, useNow } from '@adecore/ui';
-import { useChatRow } from '../../state/chats';
+import { useChatRow, useChats } from '../../state/chats';
 import { chatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatActions } from '../actions';
@@ -28,8 +28,20 @@ export function ChatActivity({ chatId }: { chatId: string }) {
     const order = useChatRow(chatId, (row) => row?.order) ?? NO_ITEMS;
     const structure = useChatRow(chatId, (row) => row?.structure);
     const subagents = useMemo(() => (structure === undefined ? [] : flyoutSubagents(order, structure)), [order, structure]);
-    const { id } = useChatScope();
+    const { id, keyOf } = useChatScope();
     const tasks = chatHost().tasks.useTasks(id);
+    const statuses = useChats((s) => s.statusByKey);
+    const progress = useMemo(
+        () =>
+            progressOf(
+                subagents.map((item) => {
+                    const taskId = taskIdOf(item);
+                    const child = item.childId === undefined ? undefined : statuses[keyOf(item.childId)]?.info;
+                    return taskRowStateOf(item, taskId === null ? null : (tasks?.[taskId] ?? null), child);
+                })
+            ),
+        [subagents, tasks, statuses, keyOf]
+    );
     const words = useMemo(
         () =>
             subagents.map((item) => {
@@ -44,13 +56,25 @@ export function ChatActivity({ chatId }: { chatId: string }) {
     }
     const { shells, monitors } = backgroundCounts(background);
     const Slot = chatHost().SubagentSlot;
+    const counting = progress.active > 0 && progress.total > 1;
+    const label = counting
+        ? [t('activity.progress', { done: progress.done, total: progress.total }), progress.waiting > 0 && t('activity.needsYou', { count: progress.waiting })]
+              .filter(Boolean)
+              .join(', ')
+        : t('activity.subagents', { count: badgeCountOf(words) });
     return (
         <div className="mb-3 flex flex-wrap items-center gap-2">
             {subagents.length > 0 &&
                 (Slot === null ? (
                     <Flyout
-                        icon={<StatusIcon word={summaryWordOf(words)} />}
-                        label={t('activity.subagents', { count: badgeCountOf(words) })}
+                        icon={
+                            progress.waiting > 0 ? (
+                                <Icon icon={MessageCircleQuestionMark} size={14} className="shrink-0 text-status-needs-you" />
+                            ) : (
+                                <StatusIcon word={summaryWordOf(words)} />
+                            )
+                        }
+                        label={label}
                         heading={t('activity.subagents', { count: subagents.length })}
                     >
                         <SubagentRows chatId={chatId} items={subagents} />
@@ -83,7 +107,7 @@ function Flyout({ icon, label, heading = label, children }: { icon: ReactNode; l
         <Popover.Root>
             <Surface
                 render={<Popover.Trigger />}
-                className="pointer-events-auto inline-flex h-7.5 items-center gap-1.5 rounded-full px-3 text-xs text-text-muted hover:text-text"
+                className="pointer-events-auto inline-flex h-7.5 items-center gap-1.5 rounded-full px-3 text-xs text-text-muted tabular-nums hover:text-text"
             >
                 {icon}
                 {label}
@@ -148,11 +172,13 @@ function SubagentRows({ chatId, items }: { chatId: string; items: readonly ChatS
 
 function SubagentEntry({ chatId, item, now }: { chatId: string; item: ChatSubagentItem; now: number }) {
     const { t } = useTranslation('agent-chat');
-    const { id } = useChatScope();
+    const { id, keyOf } = useChatScope();
     const refused = useSubagentSupport((s) => s.unsupported[id] === true);
     const task = chatHost().tasks.useTask(id, taskIdOf(item));
     const { show } = useSubagentTrail(chatId);
+    const child = useChats((s) => (item.childId === undefined ? undefined : s.statusByKey[keyOf(item.childId)]?.info));
     const word = statusWordOf(item, task);
+    const state = taskRowStateOf(item, task, child);
     return (
         <ActivityRow
             icon={<StatusIcon word={word} />}
@@ -160,7 +186,7 @@ function SubagentEntry({ chatId, item, now }: { chatId: string; item: ChatSubage
                 <>
                     {subagentTitle(item)}
                     {/* The icon says the state to the eye; a screen reader hears it with the title. */}
-                    <span className="sr-only">, {t(`common.status.${word}`)}</span>
+                    <span className="sr-only">, {state === 'waiting' ? t('rows.task.waiting') : t(`common.status.${word}`)}</span>
                 </>
             }
             time={entryTimeOf(item, task, now)}

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';
@@ -177,6 +179,59 @@ function splitPath(path: string): { name: string; dir: string } {
 }
 
 // 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();
@@ -200,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);
@@ -238,6 +294,7 @@ 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;
     const accountChoice = useAccountChoice(info.provider, info.account);
@@ -270,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]
@@ -383,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]
@@ -398,7 +475,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     };
 
     const removeQuote = (): void => {
-        setDraft((current) => ({ ...current, quote: '' }));
+        setDraft((current) => ({ ...current, quote: '', quoteSource: null }));
         inputRef.current?.focus();
     };
 
@@ -618,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;
@@ -639,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();
@@ -647,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();
     };
@@ -682,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 ?? [],
@@ -726,7 +816,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             }
             return;
         }
-        if (stashDraft(draft)) {
+        if (stashDraft(draft, chatId)) {
             clearDraft();
             setMention(null);
             setSkillQuery(null);
@@ -800,7 +890,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                 return true;
             }
             if (e.key === 'Tab') {
-                const chosen = commands[menuIndex]!;
+                const chosen = commands[activeIndex]!;
                 if (chosen.skill) {
                     chooseSkill(chosen.name);
                 } else {
@@ -814,7 +904,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                 return true;
             }
             if (e.key === 'Tab' || e.key === 'Enter') {
-                chooseSkill((skillMatches[menuIndex] ?? skillMatches[0]!).name);
+                chooseSkill((skillMatches[activeIndex] ?? skillMatches[0]!).name);
                 return true;
             }
         }
@@ -823,7 +913,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                 return true;
             }
             if (e.key === 'Tab' || e.key === 'Enter') {
-                chooseMentionAt(menuIndex);
+                chooseMentionAt(activeIndex);
                 return true;
             }
         }
@@ -996,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 && (
@@ -1006,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()}
@@ -1036,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()}
@@ -1057,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 && (
@@ -1152,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>
                     )}
@@ -1198,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);
@@ -1210,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}
                     />

package/src/chat/ui/ComposerInput.tsx

@@ -29,9 +29,13 @@ interface ComposerInputProps {
     className?: string;
     /* Keep the reference stable. A new one reconfigures the editor. */
     extensions?: Extension;
+    /* Attributes for the editable element, such as its label and the option a menu points at; keep the reference stable. */
+    aria?: Readonly<Record<string, string>>;
     onChange(text: string, selection: InputSelection, state: EditorState): void;
     onSelectionChange?(text: string, selection: InputSelection, state: EditorState): void;
     onBlur?(): void;
+    /* An IME composition starts or ends; the text it builds is not in the document until it ends. */
+    onComposing?(composing: boolean): void;
     /* Runs before the editor's own keymap; true means the key is handled and its default prevented. */
     onKeyDown?(event: KeyboardEvent, view: EditorView): boolean;
     /* Runs before the editor pastes the plain text itself; true means the paste is handled. */
@@ -40,6 +44,8 @@ interface ComposerInputProps {
 
 const NO_EXTENSIONS: Extension = [];
 
+const NO_ARIA: Readonly<Record<string, string>> = {};
+
 /*
  * A multi-line text field on CodeMirror, controlled by a plain string. The editor draws the text
  * itself, so a decoration may change a font or add padding without walking the caret off its
@@ -54,6 +60,7 @@ export function ComposerInput({
     className,
     dictationToolbar,
     extensions = NO_EXTENSIONS,
+    aria = NO_ARIA,
     ...handlers
 }: ComposerInputProps) {
     const hostRef = useRef<HTMLDivElement>(null);
@@ -94,7 +101,15 @@ export function ComposerInput({
                     Prec.highest(
                         EditorView.domEventHandlers({
                             keydown: (event, target) => latest.current.handlers.onKeyDown?.(event, target) ?? false,
-                            paste: (event, target) => latest.current.handlers.onPaste?.(event, target) ?? false
+                            paste: (event, target) => latest.current.handlers.onPaste?.(event, target) ?? false,
+                            compositionstart: () => {
+                                latest.current.handlers.onComposing?.(true);
+                                return false;
+                            },
+                            compositionend: () => {
+                                latest.current.handlers.onComposing?.(false);
+                                return false;
+                            }
                         })
                     ),
                     EditorView.updateListener.of((update) => {
@@ -128,13 +143,13 @@ export function ComposerInput({
         viewRef.current?.dispatch({
             effects: [
                 // Spellcheck stays on, as it was on the textarea this editor replaced.
-                compartments.attributes.reconfigure(EditorView.contentAttributes.of({ spellcheck: 'true', tabindex: tabbable ? '0' : '-1' })),
+                compartments.attributes.reconfigure(EditorView.contentAttributes.of({ ...aria, spellcheck: 'true', tabindex: tabbable ? '0' : '-1' })),
                 compartments.editable.reconfigure([EditorView.editable.of(!disabled), EditorState.readOnly.of(disabled)]),
                 compartments.placeholder.reconfigure(placeholderText(placeholder)),
                 compartments.extensions.reconfigure(extensions)
             ]
         });
-    }, [compartments, tabbable, disabled, placeholder, extensions]);
+    }, [compartments, tabbable, disabled, placeholder, extensions, aria]);
 
     useLayoutEffect(() => {
         const view = viewRef.current;