@adecore/agents-react 0.21.2 → 0.22.1

package/dist/chat/ui/Composer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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';
@@ -22,12 +22,14 @@ import { PROMPT_MAX_CHARS, pasteBecomesAttachment, pastedTextName, promptGuard,
 import { withQuote } from '../quote.js';
 import { rememberChatAccount, rememberChatPreferences, rememberChatSelection } from '../preferences.js';
 import { STASH_SHORTCUT, stashDraft, useStash } from '../stash.js';
-import { pageTimeline, scrollTimelineToEnd, subscribeTimelineEnd, timelineAtEnd } from '../timeline-scroll.js';
+import { jumpToTimelineItem, pageTimeline, scrollTimelineToEnd, subscribeTimelineEnd, timelineAtEnd } from '../timeline-scroll.js';
 import { ChatActivity } from './ChatActivity.js';
 import { ChatReferenceChip } from './ChatReferenceChip.js';
 import { chipDecorations } from './composer/chips.js';
+import { clampMenuIndex, composerMenuAria, optionIdOf } from './composer/menu-aria.js';
 import { enterAction, inCode, inFenceBody, inOpenFence, listItemAt, recallDirection, tabSpaces } from './composer/keys.js';
 import { ComposerInput } from './ComposerInput.js';
+import { holdLiftsIn } from '../prompt-hold.js';
 import { PromptComposer } from './PromptComposer.js';
 import { QuoteTakerContext } from './quote-selection.js';
 import { LimitDock } from './LimitState.js';
@@ -104,6 +106,52 @@ function splitPath(path) {
     return slash < 0 ? { name: path, dir: '' } : { name: path.slice(slash + 1), dir: path.slice(0, slash) };
 }
 // Keep the editor mounted while a pending request takes over, so its selection and draft survive.
+/*
+ * Keeps a waiting prompt card behind the draft while the person types. Typing, pasting and dictating
+ * all change the draft, so `noteInput` is called from its change handler; the hold lifts after a pause.
+ */
+function usePromptHold() {
+    const typedAt = useRef(null);
+    const composing = useRef(false);
+    const timer = useRef(null);
+    const [state, setState] = useState({ held: false, releasedBy: null });
+    const clearTimer = () => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+    };
+    const release = (reason) => {
+        clearTimer();
+        typedAt.current = null;
+        composing.current = false;
+        setState((current) => (current.held ? { held: false, releasedBy: reason } : current));
+    };
+    const schedule = () => {
+        clearTimer();
+        const wait = holdLiftsIn({ typedAt: typedAt.current, composing: composing.current }, Date.now());
+        if (wait !== null) {
+            timer.current = setTimeout(() => release('pause'), wait);
+        }
+    };
+    const noteInput = () => {
+        typedAt.current = Date.now();
+        setState({ held: true, releasedBy: null });
+        schedule();
+    };
+    const setComposing = (next) => {
+        composing.current = next;
+        if (next) {
+            setState({ held: true, releasedBy: null });
+        }
+        else {
+            typedAt.current = Date.now();
+        }
+        schedule();
+    };
+    useEffect(() => clearTimer, []);
+    return { held: state.held, releasedBy: state.releasedBy, release, noteInput, setComposing };
+}
 export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabled, readOnly = false, providerFixed, onSend, onRetarget }) {
     const { t } = useTranslation('agent-chat');
     const sendDelivery = chatHost().useSendDelivery();
@@ -127,6 +175,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const { isApplePlatform, notify } = chatHost();
     const registerQuoteTaker = useContext(QuoteTakerContext);
     const inputRef = useRef(null);
+    const hold = usePromptHold();
     // Taking a queued message back waits on the machine, and what was typed meanwhile is what it merges with.
     const draftRef = useRef(draft);
     const fileInputRef = useRef(null);
@@ -164,6 +213,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);
@@ -185,8 +235,8 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         setDraft((current) => ({ ...current, text: joinDraftText(current.text, offered) }));
         inputRef.current?.focus();
     }), [chatId]);
-    useEffect(() => registerQuoteTaker?.((selected) => {
-        setDraft((current) => ({ ...current, quote: selected }));
+    useEffect(() => registerQuoteTaker?.((selected, itemId) => {
+        setDraft((current) => ({ ...current, quote: selected, quoteSource: itemId }));
         inputRef.current?.focus();
     }), [registerQuoteTaker]);
     useEffect(() => {
@@ -286,6 +336,22 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const files = mention === null ? [] : searched.files;
     const chatMatches = useMemo(() => (mention === null ? [] : chatSuggestions(chats, mention.query, [chatId, ...draft.chats], CHAT_RESULTS)), [chatId, chats, draft.chats, mention]);
     const mentionCount = chatMatches.length + files.length;
+    // One menu is open at a time, so they share an id.
+    const listId = useId();
+    const mentionsLabelId = `${listId}-chats`;
+    const filesLabelId = `${listId}-files`;
+    const filesLabelShown = mention !== null && (mention.query === '' || chatMatches.length > 0);
+    const menuOpen = commandMenuOpen || skillMenuOpen || mentionMenuOpen;
+    const menuCount = commandMenuOpen ? commands.length : skillMenuOpen ? skillMatches.length : mentionCount;
+    // The list can shrink under a stale index; every reader takes the one that still points at an option.
+    const activeIndex = clampMenuIndex(menuIndex, menuCount);
+    const inputAria = useMemo(() => composerMenuAria({
+        label: t('composer.inputLabel'),
+        listId,
+        open: menuOpen,
+        activeIndex,
+        count: menuCount
+    }), [t, listId, menuOpen, activeIndex, menuCount]);
     const editorExtensions = useMemo(() => [chipDecorations({ mentions: draft.mentions, skills: draft.skills }), LEAVE_DROPS_TO_THE_CARD], [draft.mentions, draft.skills]);
     const guard = promptGuard(withQuote(quote, text));
     const setText = (next, mentions = draft.mentions, chosen = draft.skills) => {
@@ -295,7 +361,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         setDraft(EMPTY_DRAFT);
     };
     const removeQuote = () => {
-        setDraft((current) => ({ ...current, quote: '' }));
+        setDraft((current) => ({ ...current, quote: '', quoteSource: null }));
         inputRef.current?.focus();
     };
     const showError = (error) => {
@@ -486,7 +552,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;
@@ -507,6 +574,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();
@@ -514,9 +582,20 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         setSkillQuery(null);
         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) => {
-        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();
     };
@@ -595,7 +674,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             }
             return;
         }
-        if (stashDraft(draft)) {
+        if (stashDraft(draft, chatId)) {
             clearDraft();
             setMention(null);
             setSkillQuery(null);
@@ -666,7 +745,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);
                 }
@@ -681,7 +760,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;
             }
         }
@@ -690,7 +769,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                 return true;
             }
             if (e.key === 'Tab' || e.key === 'Enter') {
-                chooseMentionAt(menuIndex);
+                chooseMentionAt(activeIndex);
                 return true;
             }
         }
@@ -817,7 +896,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                     addMentions(droppedMentions(e.dataTransfer));
                     addFiles(filesOf(e.dataTransfer));
                     inputRef.current?.focus();
-                }, children: _jsxs(PromptComposer, { chatId: chatId, pending: pending, focused: focused, onShowElsewhere: answerPromptsElsewhere, disabled: disabled, hasDraft: !isEmptyDraft(draft), denyReason: capabilities?.denyReason === true, onAllAnswered: () => inputRef.current?.focus(), children: [_jsx(LimitDock, { chatId: chatId, info: info }), compactionOffer && (_jsx(ResumeCompactionDock, { tokens: compactionOffer.tokens, onCompact: compact, onDismiss: () => dismissResumeCompaction(scope, chatId, compactionOffer.turnId) })), commandMenuOpen && (_jsx("div", { className: "border-b border-border px-1.5 py-1.5", children: commands.map((command, index) => (_jsxs("button", { "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: () => {
+                }, children: _jsxs(PromptComposer, { chatId: chatId, pending: pending, focused: focused, onShowElsewhere: answerPromptsElsewhere, disabled: disabled, hasDraft: !isEmptyDraft(draft), denyReason: capabilities?.denyReason === true, onAllAnswered: () => inputRef.current?.focus(), hold: hold, children: [_jsx(LimitDock, { chatId: chatId, info: info }), compactionOffer && (_jsx(ResumeCompactionDock, { tokens: compactionOffer.tokens, onCompact: compact, onDismiss: () => dismissResumeCompaction(scope, chatId, compactionOffer.turnId) })), commandMenuOpen && (_jsx("div", { id: listId, role: "listbox", "aria-label": t('composer.menu.commands'), className: "border-b border-border px-1.5 py-1.5", children: commands.map((command, index) => (_jsxs("button", { id: optionIdOf(listId, index), role: "option", "aria-selected": index === activeIndex, tabIndex: -1, "data-active": index === activeIndex, className: "cursor-row flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted", onMouseEnter: () => setMenuIndex(index), onMouseDown: (e) => e.preventDefault(), onClick: () => {
                                     setMenuIndex(index);
                                     if (command.skill) {
                                         chooseSkill(command.name);
@@ -825,10 +904,10 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                                     }
                                     setText(`/${command.name}`);
                                     inputRef.current?.focus();
-                                }, children: [_jsx(Icon, { icon: command.skill ? Zap : SquareSlash, size: 12, className: clsx('shrink-0', command.skill ? 'text-skill' : 'text-text-faint') }), _jsxs("span", { className: "font-mono text-text", children: ["/", command.name] }), _jsx("span", { className: "text-text-faint", children: command.hint })] }, command.name))) })), skillMenuOpen && (_jsx("div", { className: "border-b border-border px-1.5 py-1.5", children: skillMatches.map((skill, index) => (_jsxs("button", { "data-active": index === menuIndex, className: "cursor-row flex w-full items-start gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted", onMouseEnter: () => setMenuIndex(index), onMouseDown: (e) => e.preventDefault(), onClick: () => chooseSkill(skill.name), children: [_jsx(Icon, { icon: Zap, size: 12, className: "mt-0.5 shrink-0 text-skill" }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsxs("span", { className: "truncate font-mono text-text", children: ["$", skill.name] }), skill.description !== '' && _jsx("span", { className: "line-clamp-1 text-text-faint", children: skill.description })] })] }, skill.name))) })), mentionMenuOpen && (_jsxs("div", { className: "border-b border-border px-1.5 py-1.5", children: [chatMatches.length > 0 && _jsx(Menu.Label, { children: t('composer.mentions.chats') }), chatMatches.map((chat, index) => (_jsxs("button", { "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), children: [_jsx(Icon, { icon: MessageSquare, size: 14, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate text-text", children: chat.title || t('chatReference.untitled') })] }, chat.id))), files.length > 0 && (mention.query === '' || chatMatches.length > 0) && (_jsx(Menu.Label, { children: mention.query === '' ? t('composer.mentions.here') : t('composer.mentions.files') })), mentionCount === 0 && (_jsx("div", { className: "px-2 py-1 text-xs text-text-faint", children: mention.query ? t('composer.mentions.noMatch') : t('composer.mentions.empty') })), files.map((path, index) => {
-                                    const { name, dir } = splitPath(path);
-                                    return (_jsxs("button", { "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), children: [_jsx(FileIcon, { path: path, size: 14 }), _jsx("span", { className: "truncate font-mono text-text", children: name }), dir && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: dir })] }, path));
-                                })] })), queue.length > 0 && (_jsxs("div", { className: "flex flex-col gap-1 border-b border-border px-2 py-1.5", children: [info.queuePaused === true && _jsx("p", { className: "px-1.5 text-xs text-text-muted", children: t('composer.queue.paused') }), queue.map((message) => {
+                                }, children: [_jsx(Icon, { icon: command.skill ? Zap : SquareSlash, size: 12, className: clsx('shrink-0', command.skill ? 'text-skill' : 'text-text-faint') }), _jsxs("span", { className: "font-mono text-text", children: ["/", command.name] }), _jsx("span", { className: "text-text-faint", children: command.hint })] }, command.name))) })), skillMenuOpen && (_jsx("div", { id: listId, role: "listbox", "aria-label": t('composer.menu.skills'), className: "border-b border-border px-1.5 py-1.5", children: skillMatches.map((skill, index) => (_jsxs("button", { id: optionIdOf(listId, index), role: "option", "aria-selected": index === activeIndex, tabIndex: -1, "data-active": index === activeIndex, className: "cursor-row flex w-full items-start gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted", onMouseEnter: () => setMenuIndex(index), onMouseDown: (e) => e.preventDefault(), onClick: () => chooseSkill(skill.name), children: [_jsx(Icon, { icon: Zap, size: 12, className: "mt-0.5 shrink-0 text-skill" }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsxs("span", { className: "truncate font-mono text-text", children: ["$", skill.name] }), skill.description !== '' && _jsx("span", { className: "line-clamp-1 text-text-faint", children: skill.description })] })] }, skill.name))) })), mentionMenuOpen && (_jsxs("div", { className: "border-b border-border px-1.5 py-1.5", children: [mentionCount > 0 && (_jsxs("div", { id: listId, role: "listbox", "aria-label": t('composer.menu.mentions'), children: [chatMatches.length > 0 && (_jsxs("div", { role: "group", "aria-labelledby": mentionsLabelId, children: [_jsx(Menu.Label, { id: mentionsLabelId, children: t('composer.mentions.chats') }), chatMatches.map((chat, index) => (_jsxs("button", { id: optionIdOf(listId, index), role: "option", "aria-selected": index === activeIndex, tabIndex: -1, "data-active": index === activeIndex, className: "cursor-row flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted", onMouseEnter: () => setMenuIndex(index), onMouseDown: (e) => e.preventDefault(), onClick: () => chooseChat(chat.id), children: [_jsx(Icon, { icon: MessageSquare, size: 14, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate text-text", children: chat.title || t('chatReference.untitled') })] }, chat.id)))] })), files.length > 0 && (_jsxs("div", { role: "group", ...(filesLabelShown ? { 'aria-labelledby': filesLabelId } : { 'aria-label': t('composer.mentions.files') }), children: [filesLabelShown && (_jsx(Menu.Label, { id: filesLabelId, children: mention.query === '' ? t('composer.mentions.here') : t('composer.mentions.files') })), files.map((path, index) => {
+                                                    const { name, dir } = splitPath(path);
+                                                    return (_jsxs("button", { id: optionIdOf(listId, chatMatches.length + index), role: "option", "aria-selected": chatMatches.length + index === activeIndex, tabIndex: -1, "data-active": chatMatches.length + index === activeIndex, className: "cursor-row flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted", onMouseEnter: () => setMenuIndex(chatMatches.length + index), onMouseDown: (e) => e.preventDefault(), onClick: () => chooseMention(path), children: [_jsx(FileIcon, { path: path, size: 14 }), _jsx("span", { className: "truncate font-mono text-text", children: name }), dir && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: dir })] }, path));
+                                                })] }))] })), mentionCount === 0 && (_jsx("div", { className: "px-2 py-1 text-xs text-text-faint", children: mention.query ? t('composer.mentions.noMatch') : t('composer.mentions.empty') }))] })), queue.length > 0 && (_jsxs("div", { className: "flex flex-col gap-1 border-b border-border px-2 py-1.5", children: [info.queuePaused === true && _jsx("p", { className: "px-1.5 text-xs text-text-muted", children: t('composer.queue.paused') }), queue.map((message) => {
                                     const sendNow = () => {
                                         scrollTimelineToEnd(chatId, 'instant');
                                         void actions.sendNow(chatId, message.id).catch(() => undefined);
@@ -836,7 +915,11 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                                     const unqueue = () => void actions.unqueue(chatId, message.id).catch(() => undefined);
                                     const edit = () => void takeBack(message);
                                     return (_jsxs(ContextMenu.Root, { children: [_jsxs(ContextMenu.Trigger, { className: "group/queued flex items-center gap-2 rounded-md px-1.5 py-1 text-xs text-text-muted", children: [_jsx(Icon, { icon: Clock, size: 12, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "min-w-0 grow truncate", children: message.text || t('composer.queue.attachments', { count: message.attachments?.length ?? 0 }) }), _jsxs(ButtonGroup, { render: _jsx("span", {}), className: "opacity-0 transition-opacity group-hover/queued:opacity-100 focus-within:opacity-100", children: [_jsx(IconButton, { icon: FastForward, size: "2xs", label: t('composer.queue.sendNow'), onClick: sendNow }), _jsx(IconButton, { icon: Pencil, size: "2xs", label: t('common.action.edit'), disabled: takingBack !== null, onClick: edit }), _jsx(IconButton, { icon: X, size: "2xs", label: t('common.action.remove'), onClick: unqueue })] })] }), _jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { onClick: sendNow, children: [_jsx(Icon, { icon: FastForward, size: 14 }), " ", t('composer.queue.sendNow')] }), _jsxs(ContextMenu.Item, { disabled: takingBack !== null, onClick: edit, children: [_jsx(Icon, { icon: Pencil, size: 14 }), " ", t('common.action.edit')] }), _jsxs(ContextMenu.Item, { disabled: message.text === '', onClick: () => copyText(message.text), children: [_jsx(Icon, { icon: Copy, size: 14 }), " ", t('common.action.copy')] }), _jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { className: "text-status-error", onClick: unqueue, children: [_jsx(Icon, { icon: X, size: 14 }), " ", t('common.action.remove')] })] })] }, message.id));
-                                })] })), quote !== '' && (_jsxs("div", { className: "flex items-center gap-2 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3", children: [_jsx("span", { className: "min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-xs text-text-muted", children: quote }), _jsx(IconButton, { icon: X, size: "2xs", label: t('composer.quote.remove'), onClick: removeQuote })] })), draft.chats.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3", children: draft.chats.map((id) => (_jsx(ChatReferenceChip, { chatId: id, onRemove: () => removeChat(id) }, id))) })), draft.attachments.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3", children: draft.attachments.map((attachment, index) => (_jsxs("div", { className: "group/thumb relative", children: [isImageAttachment(attachment.mime) ? (_jsx(UploadThumb, { upload: attachment })) : (_jsxs("span", { className: "flex h-14 w-36 flex-col justify-center gap-0.5 rounded-lg border border-border bg-surface-sunken px-2.5", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-text", children: [_jsx(Icon, { icon: Paperclip, size: 12, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate", children: attachment.name })] }), _jsx("span", { className: "pl-5 text-xs text-text-faint", children: formatBytes(uploadBytes(attachment)) })] })), _jsx(IconButton, { icon: X, size: "2xs", label: t('composer.removeAttachment', { name: attachment.name }), className: "absolute -top-1.5 -right-1.5 border border-border bg-surface-raised opacity-0 transition-opacity group-hover/thumb:opacity-100 focus-visible:opacity-100", onClick: () => removeAttachment(index) })] }, `${attachment.name}-${index}`))) })), _jsx(ComposerInput, { ref: inputRef, dictationToolbar: dictationToolbar, className: "composer-input select-text text-sm leading-normal text-text", value: text, placeholder: placeholder, disabled: !writable, tabbable: focused, extensions: editorExtensions, onChange: (value, selection, state) => {
+                                })] })), quote !== '' && (_jsxs("div", { className: "flex items-center gap-2 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3", children: [quoteSource === null ? (_jsx("span", { className: "min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-xs text-text-muted", children: quote })) : (_jsx(Tooltip, { label: t('composer.quote.goToSource'), children: _jsx("button", { type: "button", className: "min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-left text-xs text-text-muted hover:text-text", onClick: () => jumpToTimelineItem(scope.keyOf(chatId), quoteSource, {
+                                            flash: true,
+                                            onMissing: () => setNotice(t('rows.user.quoteGone'))
+                                        }), children: quote }) })), _jsx(IconButton, { icon: X, size: "2xs", label: t('composer.quote.remove'), onClick: removeQuote })] })), draft.chats.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3", children: draft.chats.map((id) => (_jsx(ChatReferenceChip, { chatId: id, onRemove: () => removeChat(id) }, id))) })), draft.attachments.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3", children: draft.attachments.map((attachment, index) => (_jsxs("div", { className: "group/thumb relative", children: [isImageAttachment(attachment.mime) ? (_jsx(UploadThumb, { upload: attachment })) : (_jsxs("span", { className: "flex h-14 w-36 flex-col justify-center gap-0.5 rounded-lg border border-border bg-surface-sunken px-2.5", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-text", children: [_jsx(Icon, { icon: Paperclip, size: 12, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate", children: attachment.name })] }), _jsx("span", { className: "pl-5 text-xs text-text-faint", children: formatBytes(uploadBytes(attachment)) })] })), _jsx(IconButton, { icon: X, size: "2xs", label: t('composer.removeAttachment', { name: attachment.name }), className: "absolute -top-1.5 -right-1.5 border border-border bg-surface-raised opacity-0 transition-opacity group-hover/thumb:opacity-100 focus-visible:opacity-100", onClick: () => removeAttachment(index) })] }, `${attachment.name}-${index}`))) })), _jsx(ComposerInput, { ref: inputRef, dictationToolbar: dictationToolbar, className: "composer-input select-text text-sm leading-normal text-text", value: text, placeholder: placeholder, disabled: !writable, tabbable: focused, extensions: editorExtensions, aria: inputAria, onChange: (value, selection, state) => {
+                                hold.noteInput();
                                 setText(value);
                                 setMenuIndex(0);
                                 trackTriggers(value, selection, state);
@@ -846,7 +929,8 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                             }, onSelectionChange: trackTriggers, onBlur: () => {
                                 setMention(null);
                                 setSkillQuery(null);
-                            }, onKeyDown: onKeyDown, onPaste: onPaste }), notice && (_jsx("div", { className: "px-5 pb-1 text-xs text-status-error @max-md/composer:px-3.5", role: "alert", children: notice })), guard.visible && (_jsxs("div", { className: clsx('px-5 pb-1 text-right text-xs tabular-nums @max-md/composer:px-3.5', guard.tooLong ? 'text-status-error' : 'text-text-faint'), children: [formatNumber(guard.count), " / ", formatNumber(PROMPT_MAX_CHARS), guard.tooLong && ` ${t('composer.tooLong')}`] })), _jsxs("div", { className: "flex items-center gap-2 pt-3 pr-3.5 pb-3.5 pl-5 @max-md/composer:gap-1.5 @max-md/composer:p-3 @max-md/composer:pt-2.5", children: [attachable && (_jsx(Tooltip, { label: t('composer.attach'), name: true, children: _jsx("button", { type: "button", className: "grid h-8 w-8 shrink-0 place-items-center rounded-full border border-border text-text-muted hover:bg-surface-hover hover:text-text disabled:opacity-50", disabled: !writable, onClick: () => fileInputRef.current?.click(), children: _jsx(Icon, { icon: Plus, size: 16 }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, hidden: true, onChange: (e) => {
+                                hold.release('blur');
+                            }, onComposing: hold.setComposing, onKeyDown: onKeyDown, onPaste: onPaste }), notice && (_jsx("div", { className: "px-5 pb-1 text-xs text-status-error @max-md/composer:px-3.5", role: "alert", children: notice })), guard.visible && (_jsxs("div", { className: clsx('px-5 pb-1 text-right text-xs tabular-nums @max-md/composer:px-3.5', guard.tooLong ? 'text-status-error' : 'text-text-faint'), children: [formatNumber(guard.count), " / ", formatNumber(PROMPT_MAX_CHARS), guard.tooLong && ` ${t('composer.tooLong')}`] })), _jsxs("div", { className: "flex items-center gap-2 pt-3 pr-3.5 pb-3.5 pl-5 @max-md/composer:gap-1.5 @max-md/composer:p-3 @max-md/composer:pt-2.5", children: [attachable && (_jsx(Tooltip, { label: t('composer.attach'), name: true, children: _jsx("button", { type: "button", className: "grid h-8 w-8 shrink-0 place-items-center rounded-full border border-border text-text-muted hover:bg-surface-hover hover:text-text disabled:opacity-50", disabled: !writable, onClick: () => fileInputRef.current?.click(), children: _jsx(Icon, { icon: Plus, size: 16 }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, hidden: true, onChange: (e) => {
                                         addFiles(Array.from(e.target.files ?? []));
                                         e.target.value = '';
                                         inputRef.current?.focus();

package/dist/chat/ui/ComposerInput.d.ts

@@ -19,11 +19,13 @@ interface ComposerInputProps {
     tabbable: boolean;
     className?: string;
     extensions?: Extension;
+    aria?: Readonly<Record<string, string>>;
     onChange(text: string, selection: InputSelection, state: EditorState): void;
     onSelectionChange?(text: string, selection: InputSelection, state: EditorState): void;
     onBlur?(): void;
+    onComposing?(composing: boolean): void;
     onKeyDown?(event: KeyboardEvent, view: EditorView): boolean;
     onPaste?(event: ClipboardEvent, view: EditorView): boolean;
 }
-export declare function ComposerInput({ ref, value, placeholder, disabled, tabbable, className, dictationToolbar, extensions, ...handlers }: ComposerInputProps): import("react").JSX.Element;
+export declare function ComposerInput({ ref, value, placeholder, disabled, tabbable, className, dictationToolbar, extensions, aria, ...handlers }: ComposerInputProps): import("react").JSX.Element;
 export {};

package/dist/chat/ui/ComposerInput.js

@@ -6,12 +6,13 @@ import { chatHost } from '../../host.js';
 import { composerEditorExtensions, externalChange } from './composer/editor.js';
 import { insertAtSelection } from './composer/insert.js';
 const NO_EXTENSIONS = [];
+const NO_ARIA = {};
 /*
  * 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
  * character, which a textarea with a painted layer behind it could not.
  */
-export function ComposerInput({ ref, value, placeholder, disabled, tabbable, className, dictationToolbar, extensions = NO_EXTENSIONS, ...handlers }) {
+export function ComposerInput({ ref, value, placeholder, disabled, tabbable, className, dictationToolbar, extensions = NO_EXTENSIONS, aria = NO_ARIA, ...handlers }) {
     const hostRef = useRef(null);
     const targetRef = useRef(null);
     const viewRef = useRef(null);
@@ -47,7 +48,15 @@ export function ComposerInput({ ref, value, placeholder, disabled, tabbable, cla
                     compartments.extensions.of([]),
                     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) => {
                         const current = latest.current.handlers;
@@ -80,13 +89,13 @@ export function ComposerInput({ ref, value, placeholder, disabled, tabbable, cla
         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;
         if (!view || value === reported.current) {

package/dist/chat/ui/Pickers.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Bookmark, ChevronDown, ChevronRight, Search, Trash2 } from 'lucide-react';
 import { AgentIcon } from '../../agents/AgentIcon.js';
 import { ProviderLogo } from '../../agents/ProviderLogo.js';
 import { agentChipOf, modelName } from '../../agents/model-name.js';
+import { modelRequirementOf } from '../../agents/model-requirement.js';
+import { chatHost } from '../../host.js';
+import { ChatScopeContext } from '../../scope.js';
+import { useReportedModels } from '../../state/chats.js';
+import { pickerEntriesOf } from '../logic/picker-entries.js';
 import { forgetStashed, STASH_SHORTCUT, useStash } from '../stash.js';
 import { Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
 const triggerClass = 'flex h-7 shrink-0 items-center gap-1 whitespace-nowrap rounded-md px-2 text-xs text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text';
 const chipClass = 'flex h-6 min-w-0 shrink items-center gap-1.5 whitespace-nowrap rounded-md bg-surface-hover px-2 text-xs text-text hover:bg-surface-active data-[popup-open]:bg-surface-active';
-function matches(model, query) {
-    return model.name.toLowerCase().includes(query) || model.slug.toLowerCase().includes(query);
-}
 /*
  * Which model answers: a search field over one group per provider, with the legacy models behind an
  * expander. Before the first message the list carries every installed CLI, so picking another
@@ -29,18 +31,13 @@ export function ModelPicker({ providers, provider, selection, open, onOpenChange
     const chip = agentChipOf(providers, provider, selection.model);
     const grouped = providers.length > 1;
     const trimmed = query.trim().toLowerCase();
-    const entries = useMemo(() => {
-        const rows = providers.flatMap((entry) => entry.models.map((model) => ({ kind: 'model', provider: entry, model })));
-        if (trimmed !== '') {
-            return rows.filter((row) => matches(row.model, trimmed));
-        }
-        const live = rows.filter((row) => !row.model.legacy);
-        const legacy = rows.filter((row) => row.model.legacy);
-        if (legacy.length === 0) {
-            return live;
-        }
-        return legacyOpen ? [...live, { kind: 'legacy', count: legacy.length }, ...legacy] : [...live, { kind: 'legacy', count: legacy.length }];
-    }, [providers, trimmed, legacyOpen]);
+    const entries = useMemo(() => pickerEntriesOf(providers, trimmed, legacyOpen), [providers, trimmed, legacyOpen]);
+    const scope = useContext(ChatScopeContext);
+    const machine = chatHost().useMachineLabel(scope?.id ?? '');
+    const reported = useReportedModels(provider);
+    const requirementOf = (entry) => modelRequirementOf(entry.model, entry.provider, reported);
+    // A CLI that is too old blocks all its models; one way to its settings under the group says it once.
+    const blockedKinds = new Set(entries.flatMap((entry) => (entry.kind === 'model' && requirementOf(entry) !== null ? [entry.provider.kind] : [])));
     /* Closing forgets the search, so the next open (a click or `/model`) starts on the whole list. */
     const setOpen = (next) => {
         if (!next) {
@@ -63,6 +60,9 @@ export function ModelPicker({ providers, provider, selection, open, onOpenChange
             inputRef.current?.focus();
             return;
         }
+        if (requirementOf(entry) !== null) {
+            return;
+        }
         onChange(entry.provider.kind, entry.model.slug);
         setOpen(false);
     };
@@ -89,8 +89,16 @@ export function ModelPicker({ providers, provider, selection, open, onOpenChange
                                 }
                                 const previous = entries[i - 1];
                                 const first = grouped && (previous === undefined || previous.kind !== 'model' || previous.provider.kind !== entry.provider.kind);
+                                const requirement = requirementOf(entry);
+                                const next = entries[i + 1];
+                                const lastOfGroup = next === undefined || next.kind !== 'model' || next.provider.kind !== entry.provider.kind;
                                 const chosen = entry.provider.kind === provider && entry.model.slug === selection.model;
-                                return (_jsxs("div", { children: [first && (_jsxs(Menu.Label, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.provider.kind, size: 12 }), entry.provider.name] })), _jsxs("button", { role: "option", "aria-selected": chosen, "data-active": i === index, className: "cursor-row flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm text-text-muted", onMouseEnter: () => setIndex(i), onClick: () => choose(entry), children: [_jsx(Menu.Check, { kind: "radio", checked: chosen }), _jsx("span", { className: "min-w-0 truncate", children: entry.model.name }), entry.model.badge && (_jsx("span", { className: "rounded bg-accent-soft px-1 text-[11px] leading-5 font-medium uppercase text-accent", children: entry.model.badge })), _jsx("span", { className: "grow" }), entry.model.legacy && _jsx("span", { className: "text-xs text-text-faint", children: t('pickers.model.legacy') })] })] }, `${entry.provider.kind}/${entry.model.slug}`));
+                                return (_jsxs("div", { children: [first && (_jsxs(Menu.Label, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.provider.kind, size: 12 }), entry.provider.name] })), _jsxs("button", { role: "option", "aria-selected": chosen, "aria-disabled": requirement !== null || undefined, "data-active": i === index, className: `cursor-row flex w-full flex-col items-stretch gap-0.5 rounded-md px-2.5 py-1.5 text-left text-sm ${requirement === null ? 'text-text-muted' : 'text-text-faint'}`, onMouseEnter: () => setIndex(i), onClick: () => choose(entry), children: [_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx(Menu.Check, { kind: "radio", checked: chosen }), _jsx("span", { className: "min-w-0 truncate", children: entry.model.name }), entry.model.badge && (_jsx("span", { className: "rounded bg-accent-soft px-1 text-[11px] leading-5 font-medium uppercase text-accent", children: entry.model.badge })), _jsx("span", { className: "grow" }), entry.model.legacy && _jsx("span", { className: "text-xs text-text-faint", children: t('pickers.model.legacy') })] }), requirement !== null && (_jsx("span", { className: "pl-6 text-xs text-text-faint", children: machine === null
+                                                        ? t('pickers.model.requiresHere', { cli: requirement.cli, version: requirement.minVersion })
+                                                        : t('pickers.model.requires', { cli: requirement.cli, version: requirement.minVersion, machine }) }))] }), lastOfGroup && blockedKinds.has(entry.provider.kind) && (_jsx("button", { type: "button", className: "cursor-row flex w-full items-center rounded-md px-2.5 py-1.5 text-left text-xs text-text-muted", onClick: () => {
+                                                setOpen(false);
+                                                chatHost().openSettings('providers');
+                                            }, children: t('pickers.model.providerSettings') }))] }, `${entry.provider.kind}/${entry.model.slug}`));
                             })] }), footer !== undefined && _jsx("div", { className: "border-t border-border-soft px-3 py-2 text-xs text-text-faint", children: footer })] })] }));
 }
 /*
@@ -103,5 +111,5 @@ export function StashPicker({ onRestore }) {
     if (prompts.length === 0) {
         return null;
     }
-    return (_jsxs(Popover.Root, { children: [_jsx(Tooltip, { label: t('pickers.stash.title'), kbd: STASH_SHORTCUT, children: _jsxs(Popover.Trigger, { className: triggerClass, children: [_jsx(Icon, { icon: Bookmark, size: 12 }), _jsx("span", { className: "tabular-nums", children: prompts.length })] }) }), _jsx(Popover.Popup, { variant: "picker", side: "top", className: "w-80", children: _jsx("div", { className: "max-h-72 overflow-auto p-1", children: prompts.map((prompt) => (_jsxs("div", { className: "group/stash flex items-start gap-1", children: [_jsxs(Popover.Close, { className: "flex min-w-0 grow flex-col gap-0.5 rounded-md px-2 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover hover:text-text", onClick: () => onRestore(prompt), children: [_jsx("span", { className: "line-clamp-2 whitespace-pre-wrap", children: prompt.text || t('pickers.stash.noText') }), prompt.attachments.length > 0 && (_jsx("span", { className: "text-text-faint", children: t('pickers.stash.files', { count: prompt.attachments.length }) }))] }), _jsx(IconButton, { icon: Trash2, size: "xs", label: t('common.action.delete'), className: "mt-1 opacity-0 group-hover/stash:opacity-100 focus-visible:opacity-100", onClick: () => forgetStashed(prompt.id) })] }, prompt.id))) }) })] }));
+    return (_jsxs(Popover.Root, { children: [_jsx(Tooltip, { label: t('pickers.stash.title'), kbd: STASH_SHORTCUT, children: _jsxs(Popover.Trigger, { className: triggerClass, children: [_jsx(Icon, { icon: Bookmark, size: 12 }), _jsx("span", { className: "tabular-nums", children: prompts.length })] }) }), _jsx(Popover.Popup, { variant: "picker", side: "top", className: "w-80", children: _jsx("div", { className: "max-h-72 overflow-auto p-1", children: prompts.map((prompt) => (_jsxs("div", { className: "group/stash flex items-start gap-1", children: [_jsxs(Popover.Close, { className: "flex min-w-0 grow flex-col gap-0.5 rounded-md px-2 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover hover:text-text", onClick: () => onRestore(prompt), children: [_jsx("span", { className: "line-clamp-2 whitespace-pre-wrap", children: prompt.text || prompt.quote?.text || t('pickers.stash.noText') }), prompt.attachments.length > 0 && (_jsx("span", { className: "text-text-faint", children: t('pickers.stash.files', { count: prompt.attachments.length }) }))] }), _jsx(IconButton, { icon: Trash2, size: "xs", label: t('common.action.delete'), className: "mt-1 opacity-0 group-hover/stash:opacity-100 focus-visible:opacity-100", onClick: () => forgetStashed(prompt.id) })] }, prompt.id))) }) })] }));
 }

package/dist/chat/ui/PromptComposer.d.ts

@@ -1,6 +1,12 @@
 import { type ReactNode } from 'react';
+import type { HoldRelease } from '../prompt-hold.js';
 import { type PendingPrompt } from '../../prompts/logic/prompts.js';
-export declare function PromptComposer({ chatId, pending, focused, onShowElsewhere, disabled, hasDraft, denyReason, onAllAnswered, children }: {
+export interface PromptHold {
+    held: boolean;
+    releasedBy: HoldRelease | null;
+    release(reason: HoldRelease): void;
+}
+export declare function PromptComposer({ chatId, pending, focused, onShowElsewhere, disabled, hasDraft, denyReason, onAllAnswered, hold, children }: {
     chatId: string;
     pending: PendingPrompt[];
     focused: boolean;
@@ -9,5 +15,6 @@ export declare function PromptComposer({ chatId, pending, focused, onShowElsewhe
     hasDraft: boolean;
     denyReason: boolean;
     onAllAnswered?: () => void;
+    hold?: PromptHold;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/chat/ui/PromptComposer.js

@@ -11,12 +11,12 @@ import { PromptView } from '../../prompts/ui/PromptView.js';
 import { chatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatActions } from '../actions.js';
-import { Icon } from '@adecore/ui';
+import { Button, Icon } from '@adecore/ui';
 /* The one being read stays in front; otherwise blocking before optional, oldest first, as everywhere else. */
 function pickSubject(waiting, activeId) {
     return waiting.find((subject) => promptIdOf(subject) === activeId) ?? orderPrompts(waiting, isBlockingSubject, promptCreatedAt)[0] ?? null;
 }
-export function PromptComposer({ chatId, pending, focused, onShowElsewhere, disabled, hasDraft, denyReason, onAllAnswered, children }) {
+export function PromptComposer({ chatId, pending, focused, onShowElsewhere, disabled, hasDraft, denyReason, onAllAnswered, hold, children }) {
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const actions = useChatActions();
@@ -30,9 +30,21 @@ export function PromptComposer({ chatId, pending, focused, onShowElsewhere, disa
     const session = usePromptSession({ prompts: subjects, idOf: promptIdOf, pick: pickSubject, disabled });
     const ref = useRef(null);
     const { active, activeId: activeKey } = session;
-    const expanded = !!active;
+    const asksApproval = active?.kind === 'chat' ? active.item.kind === 'approval' : active?.prompt.asks === 'approval';
+    const held = !!active && (hold?.held ?? false);
+    const expanded = !!active && !held;
+    // The card that waited behind the draft, so a blur that released it is not mistaken for one released long before.
+    const heldKey = useRef(null);
     const refocus = useFocusAfterAnswer(activeKey, ref, () => onAllAnswered?.());
     useEffect(() => {
+        if (held) {
+            heldKey.current = activeKey;
+        }
+    }, [held, activeKey]);
+    useEffect(() => {
+        if (hold?.releasedBy === 'blur' && heldKey.current === activeKey) {
+            return;
+        }
         if (focused && expanded && !elsewhere && !ref.current?.querySelector('.prompt-card')?.contains(document.activeElement)) {
             // Keys meant for the draft may still be coming, and on a button the next Space would answer the card.
             if (hasDraft) {
@@ -42,8 +54,8 @@ export function PromptComposer({ chatId, pending, focused, onShowElsewhere, disa
                 focusPromptStart(ref.current);
             }
         }
-    }, [activeKey, expanded, focused, elsewhere, hasDraft]);
-    return (_jsxs("div", { ref: ref, onPointerDownCapture: session.onPointerDownCapture, onClickCapture: session.onClickCapture, children: [active && elsewhere && (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-3.5 py-3 text-left text-sm text-text-muted hover:text-text", onClick: onShowElsewhere, children: [_jsx(Icon, { icon: (active.kind === 'chat' ? active.item.kind === 'approval' : active.prompt.asks === 'approval') ? Hand : MessageCircleQuestionMark, size: 16, className: "shrink-0 text-status-needs-you" }), _jsx("span", { className: "grow", children: t('composer.waitingBelow') }), _jsx(Icon, { icon: ArrowDown, size: 16, className: "shrink-0" })] })), active && !elsewhere && (_jsx("div", { hidden: !expanded, children: _jsx(PromptView, { subject: active, draft: session.draftOf(promptIdOf(active)), onDraft: (draft) => session.setDraft(promptIdOf(active), draft), onAction: (action) => {
+    }, [activeKey, expanded, focused, elsewhere, hasDraft, hold?.releasedBy]);
+    return (_jsxs("div", { ref: ref, onPointerDownCapture: session.onPointerDownCapture, onClickCapture: session.onClickCapture, children: [active && elsewhere && (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-3.5 py-3 text-left text-sm text-text-muted hover:text-text", onClick: onShowElsewhere, children: [_jsx(Icon, { icon: asksApproval ? Hand : MessageCircleQuestionMark, size: 16, className: "shrink-0 text-status-needs-you" }), _jsx("span", { className: "grow", children: t('composer.waitingBelow') }), _jsx(Icon, { icon: ArrowDown, size: 16, className: "shrink-0" })] })), active && !elsewhere && (_jsx("div", { hidden: !expanded, children: _jsx(PromptView, { subject: active, draft: session.draftOf(promptIdOf(active)), onDraft: (draft) => session.setDraft(promptIdOf(active), draft), onAction: (action) => {
                         refocus.hold();
                         void session
                             .act(active, () => answerPrompt(active, action, actions))
@@ -52,5 +64,5 @@ export function PromptComposer({ chatId, pending, focused, onShowElsewhere, disa
                                 refocus.release();
                             }
                         });
-                    }, more: session.waiting.length - 1, hasDraft: hasDraft, denyReason: denyReason, disabled: disabled, sending: session.sending, error: session.errorOf(promptIdOf(active)) }, activeKey) })), _jsx("div", { hidden: expanded, children: children })] }));
+                    }, more: session.waiting.length - 1, hasDraft: hasDraft, denyReason: denyReason, disabled: disabled, sending: session.sending, error: session.errorOf(promptIdOf(active)) }, activeKey) })), held && active && (_jsxs("div", { role: "status", className: "flex items-center gap-2 border-b border-border px-3.5 py-2.5", children: [_jsx(Icon, { icon: asksApproval ? Hand : MessageCircleQuestionMark, size: 16, className: "shrink-0 text-status-needs-you" }), _jsx("span", { className: "grow text-sm text-text-muted", children: t(asksApproval ? 'composer.held.approval' : 'composer.held.question') }), _jsx(Button, { size: "sm", onMouseDown: (e) => e.preventDefault(), onClick: () => hold?.release('show'), children: t('composer.held.show') })] })), _jsx("div", { hidden: expanded, children: children })] }));
 }

package/dist/chat/ui/QuoteButton.js

@@ -35,7 +35,7 @@ export function QuoteButton({ thread, frame, taker }) {
             const zoom = box.offsetWidth > 0 ? bounds.width / box.offsetWidth : 1;
             const x = Math.min(Math.max((line.right - bounds.left) / zoom, EDGE_PX), box.offsetWidth - EDGE_PX);
             const y = (line.bottom - bounds.top) / zoom + GAP_PX;
-            setOffer({ quote, x: Math.round(x), y: Math.round(y) });
+            setOffer({ quote: quote.text, itemId: quote.itemId, x: Math.round(x), y: Math.round(y) });
         };
         const press = () => {
             pressed = true;
@@ -67,7 +67,7 @@ export function QuoteButton({ thread, frame, taker }) {
         // Pressing a button moves the selection, and the selection is what it quotes.
         onMouseDown: (e) => e.preventDefault(), onClick: () => {
             document.getSelection()?.removeAllRanges();
-            taker.current?.(offer.quote);
+            taker.current?.(offer.quote, offer.itemId);
             setOffer(null);
         }, children: [_jsx(Icon, { icon: Quote, size: 12 }), t('composer.quote.add')] }));
 }

package/dist/chat/ui/SubagentControls.d.ts

@@ -4,8 +4,10 @@ export declare function SubagentTitleCrumb({ chatId, className, children }: {
     className?: string;
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function SubagentBreadcrumb({ chatId, title, className }: {
+export declare function SubagentBreadcrumb({ chatId, className }: {
     chatId: string;
-    title?: string;
     className?: string;
 }): import("react").JSX.Element | null;
+export declare function SubagentActions({ chatId }: {
+    chatId: string;
+}): import("react").JSX.Element | null;

package/dist/chat/ui/SubagentControls.js

@@ -15,20 +15,24 @@ export function SubagentTitleCrumb({ chatId, className, children }) {
     }
     return (_jsx("button", { type: "button", className: clsx('flex min-w-0 items-center', className), onClick: () => show(MAIN_AGENT), children: children }));
 }
-/*
- * The way down after the chat's title, each step a way back up, and a close that goes straight back
- * to the main agent. A bar that does not draw the title itself passes it, and it opens the way.
- * Nothing while the main agent itself is on screen.
- */
-export function SubagentBreadcrumb({ chatId, title, className }) {
+/* The way down to the sub-agent on screen, each step but the last a way back up. Nothing while the main agent is on screen. */
+export function SubagentBreadcrumb({ chatId, className }) {
+    const { t } = useTranslation('agent-chat');
+    const { trail, show } = useSubagentTrail(chatId);
+    if (trail.length === 0) {
+        return null;
+    }
+    return (_jsx("nav", { "aria-label": t('subagents.title'), className: clsx('flex min-w-0 items-center gap-1', className), children: breadcrumbOf(trail).map((step) => (_jsxs(Fragment, { children: [step.depth > 1 && _jsx(Icon, { icon: ChevronRight, size: 12, className: "shrink-0 text-text-faint" }), step.current ? (_jsx("span", { "aria-current": "page", className: "min-w-0 truncate text-text", children: step.label })) : (_jsx("button", { type: "button", className: clsx(CRUMB_LINK, 'min-w-0 shrink'), onClick: () => show(trailTo(trail, step.depth)), children: step.label }))] }, step.depth))) }));
+}
+/* Stops the sub-agent on screen where that is on offer, and closes it straight back to the main agent. */
+export function SubagentActions({ chatId }) {
     const { t } = useTranslation('agent-chat');
     const { trail, show } = useSubagentTrail(chatId);
     const subagents = useOpenableSubagents(chatId);
     if (trail.length === 0) {
         return null;
     }
-    const steps = breadcrumbOf(trail);
     // Only a row of the chat's own thread can be stopped; a grandchild belongs to the sub-agent that opened it.
     const shown = trail.length === 1 ? subagents.find((item) => item.toolUseId === trail[0].toolUseId) : undefined;
-    return (_jsxs("nav", { "aria-label": t('subagents.title'), className: clsx('flex min-w-0 items-center gap-1 text-xs', className), children: [title !== undefined && (_jsx("button", { type: "button", className: clsx(CRUMB_LINK, 'min-w-0 shrink'), onClick: () => show(MAIN_AGENT), children: title })), steps.map((step) => (_jsxs(Fragment, { children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: "shrink-0 text-text-faint" }), step.current ? (_jsx("span", { "aria-current": "page", className: "min-w-0 truncate text-text", children: step.label })) : (_jsx("button", { type: "button", className: clsx(CRUMB_LINK, 'min-w-0 shrink'), onClick: () => show(trailTo(trail, step.depth)), children: step.label }))] }, step.depth))), shown !== undefined && _jsx(SubagentStopButton, { chatId: chatId, item: shown, size: "sm" }), _jsx(IconButton, { icon: X, size: "sm", label: t('subagents.backToMain'), onClick: () => show(MAIN_AGENT) })] }));
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [shown !== undefined && _jsx(SubagentStopButton, { chatId: chatId, item: shown, size: "sm" }), _jsx(IconButton, { icon: X, size: "sm", label: t('subagents.backToMain'), onClick: () => show(MAIN_AGENT) })] }));
 }

package/dist/chat/ui/SubagentInfo.d.ts

@@ -1,4 +1,4 @@
 export declare function SubagentInfo({ chatId, toolUseId }: {
     chatId: string;
     toolUseId: string;
-}): import("react").JSX.Element | null;
+}): import("react").JSX.Element;