@adecore/agents-react 0.21.1 → 0.22.0

package/dist/chat/ui/Markdown.js

@@ -54,10 +54,8 @@ function languageOf(className) {
 }
 const INLINE_CODE = 'rounded-sm bg-surface-sunken px-1 py-px font-mono text-code';
 /*
- * A path an agent wrote down, opened in the preview panel. It keeps the shape of the code chip it
- * would otherwise be, so a sentence full of them does not start dancing; only the color says it can
- * be clicked. `data-file-path` is what the thread's own right-click menu reads, so a link answers to
- * both ways of opening it.
+ * A path an agent wrote down. It keeps the shape of the code chip it would otherwise be, so a sentence
+ * full of them does not shift; `data-file-path` is what the thread's right-click menu reads.
  */
 function FileLink({ target, className, children }) {
     const cwd = useFileLinkCwd();
@@ -72,8 +70,10 @@ function InlineCode({ text }) {
     }
     return (_jsx(FileLink, { target: target, className: `${INLINE_CODE} text-accent hover:underline`, children: text }));
 }
-/* The path a link target spells, with the one scheme that still means a file on the host's machine
-   taken off. A href nobody encoded is left as it is, since decoding throws on a stray percent. */
+/*
+ * The path a link target spells, without the one scheme that still means a file on the host's machine.
+ * A href nobody encoded is left as it is, since decoding throws on a stray percent.
+ */
 function hrefPath(href) {
     const bare = href.replace(/^file:\/\//, '');
     try {
@@ -89,6 +89,9 @@ function MarkdownLink({ href, children }) {
     if (target !== null) {
         return (_jsx(FileLink, { target: target, className: "text-accent underline underline-offset-2", children: children }));
     }
+    return _jsx(ExternalLink, { href: href, children: children });
+}
+function ExternalLink({ href, children }) {
     return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: children }));
 }
 function MarkdownCode({ className, children, plain = false }) {
@@ -118,9 +121,7 @@ const plainComponents = {
     code({ className, children }) {
         return (_jsx(MarkdownCode, { className: className, plain: true, children: children }));
     },
-    a({ href, children }) {
-        return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: children }));
-    }
+    a: ExternalLink
 };
 // A reply sits under the heading of its message, an `h3`, so its own headings start one level below
 // that. Only `aria-level` moves. The tag stays, since the styles and a copy of the thread read it.
@@ -186,8 +187,7 @@ const PLUGINS_WITH_BREAKS = [remarkGfm, remarkBreaks];
 const MESSAGE_PLUGINS = [remarkGfm, remarkHtmlAsText, remarkBreaks];
 const FADE_PLUGINS = [rehypeFadeWords];
 const NO_PLUGINS = [];
-/* One block of a reply. It renders no element of its own, so prose still sees the paragraphs as
-   direct children and keeps its first and last margins. */
+/* One block of a reply. It renders no element of its own, so prose keeps its first and last margins. */
 const ReplyBlock = memo(function ReplyBlock({ text, fade, open, reply }) {
     return (_jsx(CodeStreamingContext.Provider, { value: open, children: _jsx(ShellCodeBlockReplyContext.Provider, { value: reply ?? null, children: _jsx(ReactMarkdown, { remarkPlugins: REPLY_PLUGINS, rehypePlugins: fade ? FADE_PLUGINS : NO_PLUGINS, components: replyComponents, children: text }) }) }));
 });

package/dist/chat/ui/Pickers.js

@@ -1,23 +1,23 @@
 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: the provider's mark plus the model's short name
- * as the trigger, a search field over the popup, one group per provider and the legacy models
- * behind an expander. Before the first message the list carries every installed CLI, so picking
- * another provider's model is also how a chat picks its provider. A chat bound to one CLI passes
- * only that CLI, which drops the group headers and leaves its own catalog to choose from.
+ * 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
+ * provider's model is also how a chat picks its provider; with one CLI the group headers drop.
  */
 export function ModelPicker({ providers, provider, selection, open, onOpenChange, onChange, kbd = '/model', side = 'top', trigger = 'plain', finalFocus, footer }) {
     const { t } = useTranslation('agent-chat');
@@ -31,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) {
@@ -65,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);
     };
@@ -91,15 +89,21 @@ 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 })] })] }));
 }
 /*
- * Prompts put aside with Cmd+S. The shelf is the whole app's, not this chat's. On a canvas a
- * stashed prompt usually moves to another node, which is the reason to put it away in the first
- * place. Restoring drops the text, the mentions and the skills into this composer; the files a
- * draft held are named on the row but not kept, because their bytes never go to storage.
+ * Prompts put aside with Cmd+S, on a shelf the whole app shares, since a stashed prompt usually moves
+ * to another chat. A draft's files are named on the row but not kept: their bytes never go to storage.
  */
 export function StashPicker({ onRestore }) {
     const { t } = useTranslation('agent-chat');
@@ -107,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

@@ -13,9 +13,8 @@ function lastLineOf(range) {
     return rects.at(-1) ?? null;
 }
 /*
- * A button under a selection in an answer that hands it to the composer. Quoting on the selection
- * alone grew the composer while the person was still selecting, which moved the thread under the
- * pointer. It only shows once the pointer is up, so a drag never has it jump along.
+ * A button under a selection in an answer that hands it to the composer. It shows once the pointer is
+ * up: quoting on the selection alone grew the composer mid-drag and moved the thread under the pointer.
  */
 export function QuoteButton({ thread, frame, taker }) {
     const { t } = useTranslation('agent-chat');
@@ -36,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;
@@ -68,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/RunSettings.js

@@ -47,6 +47,12 @@ function contextTone(fraction) {
 function modelValue(provider, slug) {
     return `${provider}/${slug}`;
 }
+/* Each provider's current or legacy models; a provider with none of them is left out. */
+function modelGroupsOf(providers, legacy) {
+    return providers
+        .map((entry) => ({ entry, models: entry.models.filter((row) => (row.legacy === true) === legacy) }))
+        .filter((group) => group.models.length > 0);
+}
 /*
  * Everything that decides how the next turn runs, behind one pill: the model, its own knobs and the
  * permission mode. Model and effective permissions stay visible as the composer narrows.
@@ -68,8 +74,8 @@ export function RunSettings({ disabled = false, providers, provider, selection,
         summary.push({ id: CONTEXT_OPTION, label: formatTokens(usage.contextWindow ?? 0), ring: true });
     }
     const grouped = providers.length > 1;
-    const live = providers.map((entry) => ({ entry, models: entry.models.filter((row) => !row.legacy) })).filter((group) => group.models.length > 0);
-    const legacy = providers.map((entry) => ({ entry, models: entry.models.filter((row) => row.legacy) })).filter((group) => group.models.length > 0);
+    const live = modelGroupsOf(providers, false);
+    const legacy = modelGroupsOf(providers, true);
     const chosenLegacy = owner?.models.find((row) => row.legacy && row.slug === selection.model);
     const chosenModel = modelValue(provider, selection.model);
     const shownMode = effectiveRuntimeMode ?? runtimeMode;

package/dist/chat/ui/Scrubber.js

@@ -34,9 +34,8 @@ const CARD_ACTIONS = {
 const NOTHING_FOUND = [];
 /*
  * The strip at the left edge of a chat view: a tick per message of the person, per wake by tasks and
- * per other message with a bookmark, the ones on screen bright and the rest dimmed, a bookmark in the accent, growing only under the pointer. A single hover card follows the pointer along the strip, anchored at the tick
- * it points at, so a thousand ticks are a thousand spans and not a thousand popups. While a find is
- * open, a short mark at the strip's right edge stands beside every tick with a hit under it.
+ * per other bookmarked message, the ones on screen bright. One hover card follows the pointer, so a
+ * thousand ticks are a thousand spans and not a thousand popups. An open find marks every tick it hits.
  */
 export const Scrubber = memo(function Scrubber({ ticks, firstInView, lastInView, onPick, chat = null, found = NOTHING_FOUND, foundCurrent = null }) {
     const { t } = useTranslation('agent-chat');

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

@@ -7,9 +7,7 @@ import { breadcrumbOf, MAIN_AGENT, trailTo, useOpenableSubagents, useSubagentTra
 import { SubagentStopButton } from './SubagentStopButton.js';
 import { Icon, IconButton } from '@adecore/ui';
 const CRUMB_LINK = 'truncate text-text-muted hover:text-text';
-/*
- * The chat's own title where the bar draws it. While a sub-agent stands in the chat's place it is the first crumb of the way down, so pressing it goes back to the main agent.
- */
+/* The chat's own title in the bar; while a sub-agent stands in the chat's place, pressing it goes back to the main agent. */
 export function SubagentTitleCrumb({ chatId, className, children }) {
     const { trail, show } = useSubagentTrail(chatId);
     if (trail.length === 0) {
@@ -17,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;

package/dist/chat/ui/SubagentInfo.js

@@ -1,20 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useState } from 'react';
-import clsx from 'clsx';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ChevronDown } from 'lucide-react';
 import { entryTimeOf, statusWordOf, subagentFacts, taskIdOf } from '../subagent-list.js';
 import { useSubagentItem } from '../subagent-view.js';
 import { StatusIcon } from './ChatActivity.js';
-import { Markdown } from './Markdown.js';
-import { Icon, useNow } from '@adecore/ui';
+import { SubagentActions, SubagentBreadcrumb } from './SubagentControls.js';
+import { useNow } from '@adecore/ui';
 import { useModelName } from '../../agents/model-name.js';
 import { useChatRow } from '../../state/chats.js';
 import { chatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 /*
- * What a sub-agent is, over its conversation: its state and time, the model it runs on and what it
- * spent, and the task it was given behind a fold. Nothing for a conversation whose row the thread lost.
+ * What a sub-agent is, over its conversation: the way down to it, its state and time, the model it runs on
+ * and what it spent, and the way out. Only the way down and out for a conversation whose row the thread lost.
  */
 export function SubagentInfo({ chatId, toolUseId }) {
     const { t } = useTranslation('agent-chat');
@@ -24,11 +22,7 @@ export function SubagentInfo({ chatId, toolUseId }) {
     const task = chatHost().tasks.useTask(id, item === null ? null : taskIdOf(item));
     const modelName = useModelName(provider, item?.model ?? '');
     const now = useNow(1000, item?.status === 'running');
-    const [open, setOpen] = useState(false);
-    if (item === null) {
-        return null;
-    }
-    const word = statusWordOf(item, task);
-    const facts = subagentFacts(item, item.model === undefined ? null : modelName);
-    return (_jsx("section", { "aria-label": t('subagents.info.label'), className: "shrink-0 border-b border-border px-4 py-2", children: _jsxs("div", { className: "chat-column-content flex flex-col gap-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs text-text-faint", children: [_jsx(StatusIcon, { word: word }), _jsx("span", { className: "sr-only", children: t(`common.status.${word}`) }), _jsx("span", { className: "shrink-0 text-text-muted tabular-nums", children: entryTimeOf(item, task, now) }), facts.map((fact) => (_jsxs(Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "min-w-0 truncate", children: fact })] }, fact))), _jsx("span", { className: "grow" }), item.prompt && (_jsxs("button", { type: "button", className: "flex shrink-0 items-center gap-1.5 text-text-muted hover:text-text", "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [_jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('transition-transform', open && 'rotate-180') }), open ? t('subagents.info.hideTask') : t('subagents.info.showTask')] }))] }), open && item.prompt && (_jsx("div", { className: "max-h-60 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 text-xs select-text", children: _jsx(Markdown, { text: item.prompt }) }))] }) }));
+    const word = item === null ? null : statusWordOf(item, task);
+    const facts = item === null ? [] : subagentFacts(item, item.model === undefined ? null : modelName);
+    return (_jsx("section", { "aria-label": t('subagents.info.label'), className: "shrink-0 border-b border-border px-4 py-1.5", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs text-text-faint", children: [_jsx(SubagentBreadcrumb, { chatId: chatId, className: "max-w-1/3 shrink-0 font-medium" }), item !== null && word !== null && (_jsxs(_Fragment, { children: [_jsx(StatusIcon, { word: word }), _jsx("span", { className: "sr-only", children: t(`common.status.${word}`) }), _jsx("span", { className: "shrink-0 text-text-muted tabular-nums", children: entryTimeOf(item, task, now) })] })), facts.map((fact) => (_jsxs(Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "min-w-0 truncate", children: fact })] }, fact))), _jsx("span", { className: "grow" }), _jsx(SubagentActions, { chatId: chatId })] }) }));
 }

package/dist/chat/ui/SubagentStopButton.js

@@ -19,7 +19,8 @@ export function SubagentStopButton({ chatId, item, size = 'xs', className }) {
     }
     const send = () => {
         void actions.stopSubagent(chatId, item.toolUseId).catch((e) => {
-            const description = e instanceof Error ? e.message : t('subagents.noAnswer');
+            const stale = e instanceof Error && 'code' in e && e.code === 'subagent-stale';
+            const description = stale ? t('subagents.stale') : e instanceof Error ? e.message : t('subagents.noAnswer');
             chatHost().notify({ kind: 'error', title: t('subagents.stopFailed'), description });
         });
     };

package/dist/chat/ui/Timeline.js

@@ -37,6 +37,13 @@ import { AgentIcon } from '../../agents/AgentIcon.js';
 import { useModelName } from '../../agents/model-name.js';
 import { ContextMenu, EmptyState, ErrorBoundary, Icon, SectionLabel } from '@adecore/ui';
 const ESTIMATED_ROW_PX = 56;
+// How long a jump waits for a thread that is still loading before it calls the item missing.
+const JUMP_THREAD_WAIT_MS = 8000;
+/* A jump puts its row at the top and stops following the end, so the reader stays where they landed. */
+function showRowAtTop(virtualizer, followRef, index) {
+    followRef.current = false;
+    virtualizer.scrollToIndex(index, { align: 'start' });
+}
 /*
  * A thread before its first message: which model answers, what the lines into this node let it read,
  * and the folder it works in, so a first question can lean on all three.
@@ -191,7 +198,7 @@ export function Timeline({ chatId, composer, overlay }) {
     useEffect(() => registerTimeline(chatId, scrollRef.current, (enabled) => {
         followRef.current = enabled;
     }, () => coveredHeightRef.current), [chatId]);
-    // The client does not run the React Compiler, so its memoization rule has nothing to break here.
+    // Nothing here builds with the React Compiler, so its memoization rule has nothing to break.
     // oxlint-disable-next-line react/incompatible-library
     const virtualizer = useVirtualizer({
         count: rows.length,
@@ -209,11 +216,9 @@ export function Timeline({ chatId, composer, overlay }) {
     });
     const tail = lastReplyLength ?? rows.length;
     /*
-     * The rows are measured as they render, so the end of the list moves while it is drawn: a diff
-     * that highlights, an image that loads, a tool row that grows a line of output. `scrollToIndex`
-     * aims at where the row was when it was asked, which is what left the thread short of the end.
-     * The scroller's own bottom is a fact rather than an estimate, and the total size changing is
-     * what says a row was measured again, so this runs for every one of those.
+     * Rows are measured as they render, so the end moves while it is drawn (a diff that highlights, an
+     * image that loads). `scrollToIndex` aims at where a row was when asked and fell short; the
+     * scroller's own bottom is a fact, and a new total size says a row was measured again.
      */
     const totalSize = virtualizer.getTotalSize();
     useLayoutEffect(() => {
@@ -259,8 +264,7 @@ export function Timeline({ chatId, composer, overlay }) {
     const paddingLeft = threadPaddingLeft(frame.width, showsScrubber);
     /*
      * Where each message starts, from the virtualizer's measurements (an estimate for a row it never
-     * drew), so reading the scroll position costs no layout. The virtualizer renders this component on
-     * every scroll already.
+     * drew), so reading the scroll position costs no layout.
      */
     const measurements = virtualizer.measurementsCache;
     const starts = ticks.map((tick) => measurements[tick.rowIndex]?.start ?? tick.rowIndex * ESTIMATED_ROW_PX);
@@ -314,8 +318,7 @@ export function Timeline({ chatId, composer, overlay }) {
             setSeeking({ itemId: tick.bookmark.itemId, key: keyOf(chatId) });
             return;
         }
-        followRef.current = false;
-        virtualizer.scrollToIndex(tick.rowIndex, { align: 'start' });
+        showRowAtTop(virtualizer, followRef, tick.rowIndex);
     };
     useLayoutEffect(() => {
         if (seeking === null) {
@@ -336,8 +339,7 @@ export function Timeline({ chatId, composer, overlay }) {
             else {
                 setSeeking(null);
                 if (jump.kind === 'row') {
-                    followRef.current = false;
-                    virtualizer.scrollToIndex(jump.index, { align: 'start' });
+                    showRowAtTop(virtualizer, followRef, jump.index);
                     setLanding({ target: seeking.block, key: seeking.key });
                 }
             }
@@ -346,11 +348,17 @@ export function Timeline({ chatId, composer, overlay }) {
         const index = rows.findIndex((row) => row.id === seeking.itemId);
         if (index !== -1) {
             setSeeking(null);
-            followRef.current = false;
-            virtualizer.scrollToIndex(index, { align: 'start' });
+            showRowAtTop(virtualizer, followRef, index);
+            if (seeking.options?.flash) {
+                useTimelineFlash.getState().flash(seeking.key, seeking.itemId, false);
+            }
+            return;
+        }
+        // The thread has not loaded yet, so nothing says the item is missing; the effect below bounds the wait.
+        if (items === undefined) {
             return;
         }
-        const item = items?.[seeking.itemId];
+        const item = items[seeking.itemId];
         if (item === undefined && cursor !== null) {
             loadEarlier();
             return;
@@ -361,10 +369,22 @@ export function Timeline({ chatId, composer, overlay }) {
             return;
         }
         setSeeking(null);
+        seeking.options?.onMissing?.();
     }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier, keyOf, chatId]);
-    useEffect(() => registerItemJumper(keyOf(chatId), (itemId) => {
+    const waitingForThread = seeking !== null && items === undefined;
+    useEffect(() => {
+        if (!waitingForThread) {
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            setSeeking(null);
+            seeking?.options?.onMissing?.();
+        }, JUMP_THREAD_WAIT_MS);
+        return () => window.clearTimeout(timer);
+    }, [waitingForThread, seeking]);
+    useEffect(() => registerItemJumper(keyOf(chatId), (itemId, options) => {
         setLanding(null);
-        setSeeking({ itemId, key: keyOf(chatId) });
+        setSeeking({ itemId, key: keyOf(chatId), options });
     }), [keyOf, chatId]);
     useLayoutEffect(() => {
         if (!landing || landing.key !== keyOf(chatId)) {
@@ -399,8 +419,7 @@ export function Timeline({ chatId, composer, overlay }) {
         const found = changes !== -1 ? changes : rows.findIndex((row) => row.id === opening?.id || row.id === `start-${turnId}` || row.id === `fold-${turnId}`);
         if (found !== -1) {
             setRevealing(null);
-            followRef.current = false;
-            virtualizer.scrollToIndex(found, { align: 'start' });
+            showRowAtTop(virtualizer, followRef, found);
             useTimelineFlash.getState().flash(keyOf(chatId), rows[found].id, changes !== -1);
             return;
         }
@@ -452,8 +471,7 @@ export function Timeline({ chatId, composer, overlay }) {
             return;
         }
         subagents.add(found.branch.id);
-        followRef.current = false;
-        virtualizer.scrollToIndex(found.index, { align: 'start' });
+        showRowAtTop(virtualizer, followRef, found.index);
     };
     return (_jsx(FileLinkContext.Provider, { value: info?.cwd ?? null, children: _jsxs("div", { ref: frameRef, className: "relative flex min-h-0 grow flex-col", "data-file-cwd": info?.cwd ?? '', "data-file-scope-id": scope.id, children: [searching && chatFind.bar, _jsxs(ContextMenu.Root, { children: [_jsx("div", { ref: scrollRef, 
                             // No CSS scroll-padding here: Chromium counts the sticky composer's caret as hidden behind

package/dist/chat/ui/TimelineMenu.js

@@ -9,11 +9,7 @@ import { useChatScope } from '../../scope.js';
 import { useChatRow } from '../../state/chats.js';
 import { openFileLink, useFileLinkCwd, useFileLinkScopeId } from './file-links.js';
 import { ContextMenu, copyText, DisabledReason, EDIT_SHORTCUTS, Icon, Kbd, selectAllWithin } from '@adecore/ui';
-/*
- * The menu behind a right-click in a thread. Copy is the reason it exists. Everything in a thread
- * is text a person may want out of it, and a whole message, a code block or the markdown an answer
- * was written in are each a different amount of that.
- */
+/* The menu behind a right-click in a thread, mostly for copying: a whole message, a code block or an answer's markdown. */
 export function TimelineMenuPopup({ target, thread, chatId = null }) {
     const { t } = useTranslation('agent-chat');
     const message = target.row === null ? null : messageTextOf(target.row);
@@ -36,10 +32,8 @@ export function TimelineMenuPopup({ target, thread, chatId = null }) {
     return (_jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { disabled: target.selection === '', onClick: () => copyText(target.selection), children: [_jsx(Icon, { icon: Copy, size: 14 }), " ", t('common.action.copy'), " ", _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.copy })] }), message !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(message), children: [_jsx(Icon, { icon: MessageSquare, size: 14 }), " ", t('timeline.menu.copyMessage')] })), target.code !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(target.code ?? ''), children: [_jsx(Icon, { icon: Braces, size: 14 }), " ", t('timeline.menu.copyCode')] })), markdown !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(markdown), children: [_jsx(Icon, { icon: FileText, size: 14 }), " ", t('timeline.menu.copyMarkdown')] })), chatId !== null && turnId !== null && fork !== null && (_jsx(DisabledReason, { reason: forkBlocked, children: _jsxs(ContextMenu.Item, { disabled: forkBlocked !== null, onClick: () => fork(chatId, turnId), children: [_jsx(Icon, { icon: GitFork, size: 14 }), " ", t('timeline.menu.forkFromHere')] }) })), chatId !== null && markable !== null && _jsx(BookmarkMenuItems, { chatId: chatId, itemId: markable }), _jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { onClick: () => selectAllWithin(thread.current), children: [_jsx(Icon, { icon: Scan, size: 14 }), " ", t('common.action.selectAll')] }), target.path !== null && fileLinks !== null && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { onClick: openInPreview, children: [_jsx(Icon, { icon: Eye, size: 14 }), " ", t('timeline.menu.openInPreview')] })] }))] }));
 }
 /*
- * Place a bookmark on a message, or rename and remove the one it has: the same rows from the thread
- * and from the strip beside it. `onName` runs when a row opens the name field, which sits on the
- * bookmark's line over the message and so has to be on screen; the strip scrolls there, the thread
- * was clicked on it.
+ * Place a bookmark on a message, or rename and remove the one it has, from the thread and from the strip.
+ * `onName` runs when a row opens the name field, which sits over the message and so has to be on screen.
  */
 export function BookmarkMenuItems({ chatId, itemId, onName }) {
     const { t } = useTranslation('agent-chat');