@adecore/agents-react 0.21.1 → 0.22.0

package/src/chat/ui/ComposerInput.tsx

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

package/src/chat/ui/Markdown.tsx

@@ -67,17 +67,14 @@ function languageOf(className: string | undefined): string {
 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 }: { target: FileRef; className?: string; children: ReactNode }) {
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
     return (
-        // `select-text` because a thread is copied as often as it is clicked, and a button is not
-        // selectable on its own.
+        // A button is not selectable on its own, and a thread is copied as often as it is clicked.
         <button
             type="button"
             className={clsx('cursor-pointer select-text', className)}
@@ -108,8 +105,10 @@ function InlineCode({ text }: { text: string }) {
     );
 }
 
-/* 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: string): string {
     const bare = href.replace(/^file:\/\//, '');
     try {
@@ -129,6 +128,10 @@ function MarkdownLink({ href, children }: { href?: string; children?: ReactNode
             </FileLink>
         );
     }
+    return <ExternalLink href={href}>{children}</ExternalLink>;
+}
+
+function ExternalLink({ href, children }: { href?: string; children?: ReactNode }) {
     return (
         <a href={href} target="_blank" rel="noreferrer">
             {children}
@@ -173,13 +176,7 @@ const plainComponents = {
             </MarkdownCode>
         );
     },
-    a({ href, children }: { href?: string; children?: ReactNode }) {
-        return (
-            <a href={href} target="_blank" rel="noreferrer">
-                {children}
-            </a>
-        );
-    }
+    a: ExternalLink
 };
 
 // A reply sits under the heading of its message, an `h3`, so its own headings start one level below
@@ -271,8 +268,7 @@ const MESSAGE_PLUGINS = [remarkGfm, remarkHtmlAsText, remarkBreaks];
 const FADE_PLUGINS = [rehypeFadeWords];
 const NO_PLUGINS: typeof FADE_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 }: { text: string; fade: boolean; open: boolean; reply?: ShellCodeBlockReply }) {
     return (
         // A context rather than a second set of components. A component that changed would mount the

package/src/chat/ui/Pickers.tsx

@@ -1,10 +1,15 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Bookmark, ChevronDown, ChevronRight, Search, Trash2 } from 'lucide-react';
-import type { AgentKind, ModelInfo, ModelSelection, ProviderInfo, UsageProvider } from '@adecore/agent-contracts';
+import type { AgentKind, ModelSelection, ProviderInfo, UsageProvider } from '@adecore/agent-contracts';
 import { AgentIcon } from '../../agents/AgentIcon';
 import { ProviderLogo } from '../../agents/ProviderLogo';
 import { agentChipOf, modelName } from '../../agents/model-name';
+import { modelRequirementOf } from '../../agents/model-requirement';
+import { chatHost } from '../../host';
+import { ChatScopeContext } from '../../scope';
+import { useReportedModels } from '../../state/chats';
+import { pickerEntriesOf, type PickerEntry } from '../logic/picker-entries';
 import { forgetStashed, STASH_SHORTCUT, useStash, type StashedPrompt } from '../stash';
 import { Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
 
@@ -14,13 +19,6 @@ const triggerClass =
 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';
 
-/* A model row, or the one row that folds the legacy models open. Both take a turn in the arrow keys. */
-type PickerEntry = { kind: 'model'; provider: ProviderInfo; model: ModelInfo } | { kind: 'legacy'; count: number };
-
-function matches(model: ModelInfo, query: string): boolean {
-    return model.name.toLowerCase().includes(query) || model.slug.toLowerCase().includes(query);
-}
-
 interface ModelPickerProps {
     /* Whose models may be picked: every installed chat CLI before the first message, the chat's own after it. */
     providers: ProviderInfo[];
@@ -43,11 +41,9 @@ interface ModelPickerProps {
 }
 
 /*
- * 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,
@@ -75,18 +71,13 @@ export function ModelPicker({
     const grouped = providers.length > 1;
     const trimmed = query.trim().toLowerCase();
 
-    const entries = useMemo((): PickerEntry[] => {
-        const rows = providers.flatMap((entry) => entry.models.map((model) => ({ kind: 'model' as const, 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: PickerEntry & { kind: 'model' }) => 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: boolean): void => {
@@ -112,6 +103,9 @@ export function ModelPicker({
             inputRef.current?.focus();
             return;
         }
+        if (requirementOf(entry) !== null) {
+            return;
+        }
         onChange(entry.provider.kind, entry.model.slug);
         setOpen(false);
     };
@@ -186,6 +180,9 @@ export function ModelPicker({
                         }
                         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 (
                             <div key={`${entry.provider.kind}/${entry.model.slug}`}>
@@ -198,21 +195,43 @@ export function ModelPicker({
                                 <button
                                     role="option"
                                     aria-selected={chosen}
+                                    aria-disabled={requirement !== null || undefined}
                                     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"
+                                    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)}
                                 >
-                                    <Menu.Check kind="radio" checked={chosen} />
-                                    <span className="min-w-0 truncate">{entry.model.name}</span>
-                                    {entry.model.badge && (
-                                        <span className="rounded bg-accent-soft px-1 text-[11px] leading-5 font-medium uppercase text-accent">
-                                            {entry.model.badge}
+                                    <span className="flex w-full items-center gap-2">
+                                        <Menu.Check kind="radio" checked={chosen} />
+                                        <span className="min-w-0 truncate">{entry.model.name}</span>
+                                        {entry.model.badge && (
+                                            <span className="rounded bg-accent-soft px-1 text-[11px] leading-5 font-medium uppercase text-accent">
+                                                {entry.model.badge}
+                                            </span>
+                                        )}
+                                        <span className="grow" />
+                                        {entry.model.legacy && <span className="text-xs text-text-faint">{t('pickers.model.legacy')}</span>}
+                                    </span>
+                                    {requirement !== null && (
+                                        <span className="pl-6 text-xs text-text-faint">
+                                            {machine === null
+                                                ? t('pickers.model.requiresHere', { cli: requirement.cli, version: requirement.minVersion })
+                                                : t('pickers.model.requires', { cli: requirement.cli, version: requirement.minVersion, machine })}
                                         </span>
                                     )}
-                                    <span className="grow" />
-                                    {entry.model.legacy && <span className="text-xs text-text-faint">{t('pickers.model.legacy')}</span>}
                                 </button>
+                                {lastOfGroup && blockedKinds.has(entry.provider.kind) && (
+                                    <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');
+                                        }}
+                                    >
+                                        {t('pickers.model.providerSettings')}
+                                    </button>
+                                )}
                             </div>
                         );
                     })}
@@ -224,10 +243,8 @@ export function ModelPicker({
 }
 
 /*
- * 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 }: { onRestore(prompt: StashedPrompt): void }) {
     const { t } = useTranslation('agent-chat');
@@ -251,7 +268,7 @@ export function StashPicker({ onRestore }: { onRestore(prompt: StashedPrompt): v
                                 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)}
                             >
-                                <span className="line-clamp-2 whitespace-pre-wrap">{prompt.text || t('pickers.stash.noText')}</span>
+                                <span className="line-clamp-2 whitespace-pre-wrap">{prompt.text || prompt.quote?.text || t('pickers.stash.noText')}</span>
                                 {prompt.attachments.length > 0 && (
                                     <span className="text-text-faint">{t('pickers.stash.files', { count: prompt.attachments.length })}</span>
                                 )}

package/src/chat/ui/PromptComposer.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ArrowDown, Hand, MessageCircleQuestionMark } from 'lucide-react';
+import type { HoldRelease } from '../prompt-hold';
 import { focusPromptHeading, focusPromptStart } from '../../prompts/logic/focus';
 import { orderPrompts, type PendingPrompt } from '../../prompts/logic/prompts';
 import { answerPrompt, isBlockingSubject, promptCreatedAt, promptIdOf, type PromptSubject } from '../../prompts/logic/subjects';
@@ -10,7 +11,14 @@ import { PromptView } from '../../prompts/ui/PromptView';
 import { chatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatActions } from '../actions';
-import { Icon } from '@adecore/ui';
+import { Button, Icon } from '@adecore/ui';
+
+/* Keeps a prompt card behind the draft while the person types; `released` says what lifted the hold last. */
+export interface PromptHold {
+    held: boolean;
+    releasedBy: HoldRelease | null;
+    release(reason: HoldRelease): void;
+}
 
 /* The one being read stays in front; otherwise blocking before optional, oldest first, as everywhere else. */
 function pickSubject(waiting: readonly PromptSubject[], activeId: string | null): PromptSubject | null {
@@ -26,6 +34,7 @@ export function PromptComposer({
     hasDraft,
     denyReason,
     onAllAnswered,
+    hold,
     children
 }: {
     chatId: string;
@@ -38,6 +47,8 @@ export function PromptComposer({
     denyReason: boolean;
     /* Takes the keyboard back to the composer once the last prompt was answered from its card. */
     onAllAnswered?: () => void;
+    /* Without it a card takes the composer's place at once. */
+    hold?: PromptHold;
     children: ReactNode;
 }) {
     const { t } = useTranslation('agent-chat');
@@ -56,10 +67,23 @@ export function PromptComposer({
     const session = usePromptSession({ prompts: subjects, idOf: promptIdOf, pick: pickSubject, disabled });
     const ref = useRef<HTMLDivElement>(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<string | null>(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) {
@@ -68,7 +92,7 @@ export function PromptComposer({
                 focusPromptStart(ref.current);
             }
         }
-    }, [activeKey, expanded, focused, elsewhere, hasDraft]);
+    }, [activeKey, expanded, focused, elsewhere, hasDraft, hold?.releasedBy]);
 
     return (
         <div ref={ref} onPointerDownCapture={session.onPointerDownCapture} onClickCapture={session.onClickCapture}>
@@ -78,11 +102,7 @@ export function PromptComposer({
                     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}
                 >
-                    <Icon
-                        icon={(active.kind === 'chat' ? active.item.kind === 'approval' : active.prompt.asks === 'approval') ? Hand : MessageCircleQuestionMark}
-                        size={16}
-                        className="shrink-0 text-status-needs-you"
-                    />
+                    <Icon icon={asksApproval ? Hand : MessageCircleQuestionMark} size={16} className="shrink-0 text-status-needs-you" />
                     <span className="grow">{t('composer.waitingBelow')}</span>
                     <Icon icon={ArrowDown} size={16} className="shrink-0" />
                 </button>
@@ -113,6 +133,15 @@ export function PromptComposer({
                     />
                 </div>
             )}
+            {held && active && (
+                <div role="status" className="flex items-center gap-2 border-b border-border px-3.5 py-2.5">
+                    <Icon icon={asksApproval ? Hand : MessageCircleQuestionMark} size={16} className="shrink-0 text-status-needs-you" />
+                    <span className="grow text-sm text-text-muted">{t(asksApproval ? 'composer.held.approval' : 'composer.held.question')}</span>
+                    <Button size="sm" onMouseDown={(e) => e.preventDefault()} onClick={() => hold?.release('show')}>
+                        {t('composer.held.show')}
+                    </Button>
+                </div>
+            )}
             <div hidden={expanded}>{children}</div>
         </div>
     );

package/src/chat/ui/QuoteButton.tsx

@@ -10,6 +10,7 @@ const EDGE_PX = 40;
 
 interface Offer {
     quote: string;
+    itemId: string | null;
     x: number;
     y: number;
 }
@@ -21,9 +22,8 @@ function lastLineOf(range: Range): DOMRect | 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,
@@ -53,7 +53,7 @@ export function QuoteButton({
             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 = (): void => {
             pressed = true;
@@ -92,7 +92,7 @@ export function QuoteButton({
             onMouseDown={(e) => e.preventDefault()}
             onClick={() => {
                 document.getSelection()?.removeAllRanges();
-                taker.current?.(offer.quote);
+                taker.current?.(offer.quote, offer.itemId);
                 setOffer(null);
             }}
         >

package/src/chat/ui/RunSettings.tsx

@@ -103,6 +103,13 @@ function modelValue(provider: AgentKind, slug: string): string {
     return `${provider}/${slug}`;
 }
 
+/* Each provider's current or legacy models; a provider with none of them is left out. */
+function modelGroupsOf(providers: ProviderInfo[], legacy: boolean): Array<{ entry: ProviderInfo; models: ModelInfo[] }> {
+    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.
@@ -142,8 +149,8 @@ export function RunSettings({
         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/src/chat/ui/Scrubber.tsx

@@ -70,9 +70,8 @@ const NOTHING_FOUND: readonly boolean[] = [];
 
 /*
  * 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,

package/src/chat/ui/SubagentControls.tsx

@@ -8,9 +8,7 @@ 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 }: { chatId: string; className?: string; children: ReactNode }) {
     const { trail, show } = useSubagentTrail(chatId);
     if (trail.length === 0) {
@@ -23,31 +21,18 @@ export function SubagentTitleCrumb({ chatId, className, children }: { chatId: st
     );
 }
 
-/*
- * 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 }: { chatId: string; title?: string; className?: string }) {
+/* 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 }: { chatId: string; className?: string }) {
     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 (
-        <nav aria-label={t('subagents.title')} className={clsx('flex min-w-0 items-center gap-1 text-xs', className)}>
-            {title !== undefined && (
-                <button type="button" className={clsx(CRUMB_LINK, 'min-w-0 shrink')} onClick={() => show(MAIN_AGENT)}>
-                    {title}
-                </button>
-            )}
-            {steps.map((step) => (
+        <nav aria-label={t('subagents.title')} className={clsx('flex min-w-0 items-center gap-1', className)}>
+            {breadcrumbOf(trail).map((step) => (
                 <Fragment key={step.depth}>
-                    <Icon icon={ChevronRight} size={12} className="shrink-0 text-text-faint" />
+                    {step.depth > 1 && <Icon icon={ChevronRight} size={12} className="shrink-0 text-text-faint" />}
                     {step.current ? (
                         <span aria-current="page" className="min-w-0 truncate text-text">
                             {step.label}
@@ -59,8 +44,24 @@ export function SubagentBreadcrumb({ chatId, title, className }: { chatId: strin
                     )}
                 </Fragment>
             ))}
+        </nav>
+    );
+}
+
+/* Stops the sub-agent on screen where that is on offer, and closes it straight back to the main agent. */
+export function SubagentActions({ chatId }: { chatId: string }) {
+    const { t } = useTranslation('agent-chat');
+    const { trail, show } = useSubagentTrail(chatId);
+    const subagents = useOpenableSubagents(chatId);
+    if (trail.length === 0) {
+        return null;
+    }
+    // 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 (
+        <div className="flex shrink-0 items-center gap-1">
             {shown !== undefined && <SubagentStopButton chatId={chatId} item={shown} size="sm" />}
             <IconButton icon={X} size="sm" label={t('subagents.backToMain')} onClick={() => show(MAIN_AGENT)} />
-        </nav>
+        </div>
     );
 }