@adecore/agents-react 0.38.0 → 0.40.0

package/src/chat/ui/LimitState.tsx

@@ -18,6 +18,7 @@ import { useChatActions } from '../actions';
 import { useUsageStore } from '../../state/usage';
 import { SessionLine } from './SessionLine';
 import { useHostResumeAtReset } from '../../host-hooks';
+import { errorMessage } from '../../transport';
 
 // A time a limit names reads as a clock today and with its day after that, so the words follow the minute.
 const MINUTE_MS = 60_000;
@@ -32,10 +33,13 @@ const refreshedAt = new Map<string, number>();
  */
 function readUnreadAccounts(scope: ChatScope): void {
     const last = refreshedAt.get(scope.id);
+
     if (last !== undefined && Date.now() - last < UNREAD_REFRESH_MS) {
         return;
     }
+
     refreshedAt.set(scope.id, Date.now());
+
     void scope.transport
         .request('usage.refreshLimits', {})
         .then((snapshot) => useUsageStore.getState().setLimits(scope.id, snapshot))
@@ -51,9 +55,11 @@ function ResumeAtResetToggle({ chatId, info }: { chatId: string; info: ChatInfo
     const { id } = useChatScope();
     const actions = useChatActions();
     const machineAllows = useHostResumeAtReset(id);
+
     const set = (on: boolean): void => {
         void actions.configure(chatId, { resumeAtReset: on }).catch(() => undefined);
     };
+
     return (
         <Tooltip label={machineAllows ? t('limit.toggle') : t('limit.machineOff')}>
             {/* A disabled switch does not take the pointer, so the tooltip hangs on a wrapper. */}
@@ -65,11 +71,8 @@ function ResumeAtResetToggle({ chatId, info }: { chatId: string; info: ChatInfo
 }
 
 /*
- * Another account of the chat's CLI that has room: the one with the least of its session spent, and
- * beside it a menu of every account with room, for a person whose companies each pay for their own
- * work. Only ever offered, since going on there spends someone's other plan, and nothing is
- * remembered: the next limit suggests the one with the most room again. An account that reads the
- * chat's conversation takes it over; any other goes on in a fork, which then opens the way a fork does.
+ * Another account of the chat's CLI with room, only ever offered since it spends someone's other plan, and
+ * never remembered. One that reads the chat's conversation takes it over; any other goes on in a fork.
  */
 function ContinueOn({ chatId, info, choice }: { chatId: string; info: ChatInfo; choice: AccountChoice }) {
     const host = useChatHost();
@@ -88,24 +91,29 @@ function ContinueOn({ chatId, info, choice }: { chatId: string; info: ChatInfo;
     }, [scope, unread]);
 
     const target = targets[0];
+
     if (target === undefined) {
         return null;
     }
+
     const go = (entry: AccountEntry): void => {
         setBusy(true);
+
         actions
             .continueOn(chatId, entry.id)
             .catch((e: unknown) =>
                 host.notify({
                     kind: 'error',
                     title: t('limit.continueFailed', { account: choice.nameOf(entry) }),
-                    description: e instanceof Error ? e.message : String(e)
+                    description: errorMessage(e)
                 })
             )
             .finally(() => setBusy(false));
     };
+
     const name = choice.nameOf(target);
     const split = targets.length > 1;
+
     const suggestion = (
         <Tooltip label={t('limit.continueOnTip', { account: name })}>
             <Button
@@ -122,9 +130,11 @@ function ContinueOn({ chatId, info, choice }: { chatId: string; info: ChatInfo;
             </Button>
         </Tooltip>
     );
+
     if (!split) {
         return suggestion;
     }
+
     return (
         <ButtonGroup className="shrink-0">
             {suggestion}
@@ -160,10 +170,12 @@ function ContinueOnRows({
     const { t } = useTranslation('agent-chat');
     const limits = useUsageLimits();
     const now = useNow(MINUTE_MS);
+
     return targets.map((entry) => {
         const name = choice.nameOf(entry);
         const session = sessionWindow(limitsOfAccount(limits, entry.id));
         const fork = !canContinueOn(choice.accounts, info.provider, info.account, entry.id);
+
         return (
             <Menu.Item
                 key={entry.id}
@@ -191,12 +203,15 @@ export function LimitDock({ chatId, info }: { chatId: string; info: ChatInfo })
     const now = useNow(MINUTE_MS, info.limit !== undefined);
     const choice = useAccountChoice(info.provider, info.account);
     const view = limitView(info, now);
+
     if (view === null) {
         return null;
     }
+
     // With a choice of accounts the line names the one that ran into the limit.
     const account = choice === null ? null : choice.current === null ? choice.currentId : choice.nameOf(choice.current);
     const detail = account === null ? view.detail : view.detail === null ? account : `${account} · ${view.detail}`;
+
     return (
         <div className="flex items-center gap-2 border-b border-border px-3.5 py-2.5">
             <Icon icon={Hourglass} size={16} className="shrink-0 text-text-faint" />
@@ -218,9 +233,11 @@ export function LimitPill({ chatId }: { chatId: string }) {
     useFormatLocale();
     const now = useNow(MINUTE_MS, info?.limit !== undefined);
     const view = info === undefined ? null : limitView(info, now);
+
     if (info === undefined || view === null) {
         return null;
     }
+
     return (
         <>
             <Tooltip label={view.detail === null ? view.title : `${view.title}. ${view.detail}`}>

package/src/chat/ui/Markdown.tsx

@@ -37,12 +37,15 @@ interface MarkdownNode {
 /* The command a shell fence holds, read from the fence as written, so it keeps the indentation and line endings it has. */
 function shellFence(source: string): ShellFence | null {
     const opening = /^ {0,3}(`{3,}|~{3,})[ \t]*(sh|bash|zsh)[ \t]*\r?\n/.exec(source);
+
     if (opening === null) {
         return null;
     }
+
     const body = source.slice(opening[0].length);
     const closing = /(?:^|\r?\n) {0,3}(`{3,}|~{3,})[ \t]*$/.exec(body);
     const closed = closing !== null && closing[1]![0] === opening[1]![0] && closing[1]!.length >= opening[1]!.length;
+
     return { language: opening[2] as ShellFence['language'], code: closed ? body.slice(0, closing.index) : body, closed };
 }
 
@@ -53,15 +56,20 @@ function remarkShellCodeBlocks() {
             if (node.type !== 'code') {
                 continue;
             }
+
             const start = node.position?.start.offset;
             const end = node.position?.end.offset;
+
             if (start === undefined || end === undefined) {
                 continue;
             }
+
             const shell = shellFence(String(file.value).slice(start, end));
+
             if (shell === null) {
                 continue;
             }
+
             node.data = {
                 ...node.data,
                 hProperties: {
@@ -80,7 +88,9 @@ function shellCodeBlockActions(reply: ShellCodeBlockReply | null, shell: ShellFe
     if (reply === null || shell === null) {
         return undefined;
     }
+
     const { scopeId, chatId, itemId } = reply;
+
     return render?.({ scopeId, chatId, itemId, language: shell.language, code: shell.code, complete: !reply.streaming && shell.closed });
 }
 
@@ -98,6 +108,7 @@ function FileLink({ target, className, children }: { target: FileRef; className?
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
     const openFileLink = useOpenFileLink();
+
     return (
         // A button is not selectable on its own, and a thread is copied as often as it is clicked.
         <button
@@ -120,9 +131,11 @@ function FileLink({ target, className, children }: { target: FileRef; className?
 /* Inline code, which is a file reference often enough that it is worth asking every time. */
 function InlineCode({ text }: { text: string }) {
     const target = useFileLinkTarget(text);
+
     if (target === null) {
         return <code className={INLINE_CODE}>{text}</code>;
     }
+
     return (
         // The chip sits on a code inside the button, since a button is always a box of its own and its
         // background would fill the whole box once a long path wraps.
@@ -138,6 +151,7 @@ function InlineCode({ text }: { text: string }) {
  */
 function hrefPath(href: string): string {
     const bare = href.replace(/^file:\/\//, '');
+
     try {
         return decodeURI(bare);
     } catch {
@@ -148,6 +162,7 @@ function hrefPath(href: string): string {
 /* A markdown link, which is a file when its target names no scheme of its own. */
 function MarkdownLink({ href, children }: { href?: string; children?: ReactNode }) {
     const target = useFileLinkTarget(hrefPath(href ?? ''));
+
     if (target !== null) {
         return (
             <FileLink target={target} className="text-accent underline underline-offset-2">
@@ -155,6 +170,7 @@ function MarkdownLink({ href, children }: { href?: string; children?: ReactNode
             </FileLink>
         );
     }
+
     return <ExternalLink href={href}>{children}</ExternalLink>;
 }
 
@@ -174,13 +190,17 @@ function localImagePath(src: string, cwd: string | null): string | null {
     if (src === '' || /^[a-z][a-z0-9+.-]*:/i.test(src)) {
         return null;
     }
+
     const target = hrefPath(src);
+
     if (target.startsWith('/')) {
         return target;
     }
+
     if (cwd === null) {
         return null;
     }
+
     return `${cwd.replace(/\/+$/, '')}/${target.replace(/^\.\//, '')}`;
 }
 
@@ -189,9 +209,11 @@ function MarkdownImage({ src, alt }: { src?: string; alt?: string }) {
     const { MarkdownImage: HostImage } = useChatHost();
     const cwd = useFileLinkCwd();
     const path = typeof src === 'string' ? localImagePath(src, cwd) : null;
+
     if (HostImage === undefined || path === null) {
         return <img src={src} alt={alt} />;
     }
+
     return <HostImage path={path} alt={alt ?? ''} />;
 }
 
@@ -202,6 +224,7 @@ function PlainImage({ src, alt }: { src?: string; alt?: string }) {
 /* A ```mermaid fence, which draws what it says. */
 function Diagram({ code }: { code: string }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <ErrorBoundary label={t('code.mermaid.crashed')} resetKeys={[code]} compact className="rounded-lg border border-border">
             <MermaidBlock code={code} />
@@ -212,11 +235,14 @@ function Diagram({ code }: { code: string }) {
 function MarkdownCode({ className, children, plain = false }: { className?: string; children?: ReactNode; plain?: boolean }) {
     const block = useContext(BlockCodeContext);
     const text = String(children ?? '');
+
     if (block) {
         const lang = languageOf(className);
         const code = text.replace(/\n$/, '');
+
         return lang === 'mermaid' ? <Diagram code={code} /> : <CodeBlock code={code} lang={lang} />;
     }
+
     return plain ? <code className={INLINE_CODE}>{text}</code> : <InlineCode text={text} />;
 }
 
@@ -259,6 +285,7 @@ const REPLY_HEADING_OFFSET = 3;
 
 function replyHeading(level: 1 | 2 | 3 | 4 | 5 | 6) {
     const Tag = `h${level}` as const;
+
     return function ReplyHeading({ children }: { children?: ReactNode }) {
         return <Tag aria-level={Math.min(6, level + REPLY_HEADING_OFFSET)}>{children}</Tag>;
     };
@@ -283,17 +310,22 @@ function ReplyCode({ className, children, node }: { className?: string; children
     const properties = node?.properties;
     const language = properties?.['data-shell-language'];
     const code = properties?.['data-shell-code'];
+
     const shell: ShellFence | null =
         (language === 'sh' || language === 'bash' || language === 'zsh') && typeof code === 'string'
             ? { language, code, closed: properties?.['data-shell-closed'] === true }
             : null;
+
     const text = String(children ?? '');
+
     if (block && languageOf(className) === 'mermaid') {
         return <Diagram code={text.replace(/\n$/, '')} />;
     }
+
     if (block) {
         return <CodeBlock code={text.replace(/\n$/, '')} lang={languageOf(className)} actions={shellCodeBlockActions(reply, shell, renderShellCodeBlock)} />;
     }
+
     return <InlineCode text={text} />;
 }
 
@@ -302,6 +334,7 @@ function Chip({ kind, value }: { kind: string; value: string }) {
     if (kind === 'reference') {
         return <ReferenceChip id={value} />;
     }
+
     if (kind === 'skill') {
         return (
             <TokenChip
@@ -314,6 +347,7 @@ function Chip({ kind, value }: { kind: string; value: string }) {
             />
         );
     }
+
     return (
         // The path is what the thread's menu opens in the preview from here.
         <TokenChip
@@ -336,6 +370,7 @@ function ChipSpan({ children, node: _node, 'data-chip': chip, 'data-value': valu
     if (chip === undefined || value === undefined) {
         return <span {...rest}>{children}</span>;
     }
+
     return <Chip kind={chip} value={value} />;
 }
 
@@ -352,8 +387,10 @@ const ReplyBlock = memo(function ReplyBlock({ text, fade, open, reply }: { text:
     const { items, referenced } = useContext(ReferenceLookupContext);
     // Chips first, so the fade wraps the words around a chip and never cuts a name in two.
     const named: NamedReferenceOptions = { items, referenced };
+
     const rehypePlugins: Options['rehypePlugins'] =
         items.length === 0 ? (fade ? FADE_PLUGINS : NO_PLUGINS) : [[rehypeNamedReferences, named], ...(fade ? FADE_PLUGINS : [])];
+
     return (
         // A context rather than a second set of components. A component that changed would mount the
         // code block again the moment its fence closes, and it would lose the lines it already has.
@@ -389,6 +426,7 @@ const ReplyFence = memo(function ReplyFence({
     // The class markdown gives the code, read back the way a parsed fence's is.
     const lang = languageOf(`language-${info.split(/[ \t]/, 1)[0]}`);
     const shell = reply === undefined ? null : shellFence(source);
+
     return (
         <CodeStreamingContext.Provider value={open}>
             {lang === 'mermaid' ? (
@@ -418,6 +456,7 @@ export const ReplyMarkdown = memo(function ReplyMarkdown({
     reply?: ShellCodeBlockReply;
 }) {
     const blocks = splitMarkdownBlocks(text);
+
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm" data-arriving={arriving || undefined}>
             {blocks.map((block, index) =>
@@ -455,6 +494,7 @@ export const MessageMarkdown = memo(function MessageMarkdown({
     references?: readonly ReferenceToken[];
 }) {
     const rehypePlugins: [typeof rehypeChips, ChipOptions][] = [[rehypeChips, { mentions, skills, references }]];
+
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm">
             <ReactMarkdown remarkPlugins={MESSAGE_PLUGINS} rehypePlugins={rehypePlugins} components={replyComponents}>
@@ -484,6 +524,7 @@ export const Markdown = memo(function Markdown({
     componentOverrides?: Components;
 }) {
     const renderComponents = { ...(fileLinks ? components : plainComponents), ...componentOverrides };
+
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm" data-muted={muted || undefined}>
             <ReactMarkdown remarkPlugins={breaks ? PLUGINS_WITH_BREAKS : PLUGINS} rehypePlugins={rehypePlugins} components={renderComponents}>

package/src/chat/ui/MermaidBlock.tsx

@@ -25,14 +25,17 @@ function resolveColor(element: HTMLElement, token: string, ground: string): stri
     probeCanvas.height = 1;
     const context = probeCanvas.getContext('2d', { willReadFrequently: true });
     const value = getComputedStyle(element).getPropertyValue(token).trim();
+
     if (context === null || value === '') {
         return ground;
     }
+
     context.fillStyle = ground;
     context.fillRect(0, 0, 1, 1);
     context.fillStyle = value;
     context.fillRect(0, 0, 1, 1);
     const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;
+
     return `#${[red, green, blue].map((channel) => channel!.toString(16).padStart(2, '0')).join('')}`;
 }
 
@@ -45,14 +48,17 @@ interface DiagramLook {
 function diagramLook(element: HTMLElement): DiagramLook {
     const style = getComputedStyle(element);
     const ground = resolveColor(element, GROUND_TOKEN, '#808080');
+
     const colors = Object.fromEntries(
         Object.entries(DIAGRAM_TOKENS).map(([name, token]) => [name, token === GROUND_TOKEN ? ground : resolveColor(element, token, ground)])
     );
+
     const font = {
         family: style.fontFamily,
         mono: style.getPropertyValue('--font-mono').trim() || 'monospace',
         size: Number.parseFloat(style.fontSize) || 14
     };
+
     return { colors, font };
 }
 
@@ -64,6 +70,7 @@ function keepingSame(next: DiagramLook) {
 async function layOut(id: string, source: string, font: DiagramFont): Promise<LaidOut> {
     const { renderAsync } = await import('pele/lazy');
     const { svg, width, height } = await renderAsync(source, renderOptions(font, id));
+
     return { svg, width: Math.ceil(width), height: Math.ceil(height) };
 }
 
@@ -84,6 +91,7 @@ export function MermaidBlock({ code }: { code: string }) {
 
     useEffect(() => {
         const element = frame.current;
+
         if (element !== null) {
             setLook(keepingSame(diagramLook(element)));
         }
@@ -92,25 +100,31 @@ export function MermaidBlock({ code }: { code: string }) {
     // An app may change its colors without turning light or dark, which only the root of the page tells.
     useEffect(() => {
         const element = frame.current;
+
         if (element === null) {
             return;
         }
+
         return watchTheme(element.ownerDocument, () => setLook(keepingSame(diagramLook(element))));
     }, []);
 
     const fontFamily = look?.font.family;
     const fontMono = look?.font.mono;
     const fontSize = look?.font.size;
+
     useEffect(() => {
         if (streaming || fontFamily === undefined || fontMono === undefined || fontSize === undefined) {
             return;
         }
+
         let cancelled = false;
+
         // A diagram already drawn stays until the next one is there, so it does not blink.
         layOut(id, code, { family: fontFamily, mono: fontMono, size: fontSize }).then(
             (image) => !cancelled && setDrawing({ state: 'drawn', image }),
             () => !cancelled && setDrawing({ state: 'failed' })
         );
+
         return () => {
             cancelled = true;
         };
@@ -118,6 +132,7 @@ export function MermaidBlock({ code }: { code: string }) {
 
     const image = drawing.state === 'drawn' && look !== null ? { ...drawing.image, svg: themedSvg(drawing.image.svg, look.colors) } : null;
     const showsDiagram = !streaming && !source && drawing.state !== 'failed';
+
     const toggle =
         streaming || drawing.state === 'failed' ? undefined : (
             <IconButton
@@ -127,6 +142,7 @@ export function MermaidBlock({ code }: { code: string }) {
                 onClick={() => setSource((shown) => !shown)}
             />
         );
+
     return (
         // One tree in every state, so the code block keeps the lines it has when the fence closes.
         <div ref={frame}>

package/src/chat/ui/MessageActions.tsx

@@ -31,14 +31,19 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
     const bookmarks = useChatRow(chatId, (chat) => chat?.bookmarks);
     const info = useChatRow(chatId, (chat) => chat?.info ?? null);
     const turn = useChatRow(chatId, (chat) => (turnId === null ? undefined : chat?.structure[turnId]));
+
     const streaming = useChatRow(chatId, (chat) => {
         const item = chat?.items[row.id];
+
         return item?.kind === 'assistant' && item.streaming;
     });
+
     const hasText = useChatRow(chatId, (chat) => {
         const item = chat?.items[row.id];
+
         return (item?.kind === 'user' || item?.kind === 'assistant') && /\S/.test(item.text);
     });
+
     const bookmarked = bookmarks?.some((candidate) => candidate.itemId === row.id) === true;
     const canFork = turnId !== null && forkRefusal(info, turn) === null;
     const [copied, setCopied] = useState(false);
@@ -48,7 +53,9 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
         if (!copied) {
             return;
         }
+
         const timer = setTimeout(() => setCopied(false), COPIED_MS);
+
         return () => clearTimeout(timer);
     }, [copied]);
 
@@ -57,6 +64,7 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
         const item = useChats.getState().byKey[scope.keyOf(chatId)]?.items[row.id];
         const current = item?.kind === row.kind ? ({ ...row, item } as MessageRow) : row;
         const text = (plain ? null : markdownOf(current)) ?? messageTextOf(current);
+
         if (text !== null) {
             copyWithChips(messageClipboardChips(current.item, text, lookup));
             setCopied(true);

package/src/chat/ui/ModelMarks.tsx

@@ -6,6 +6,7 @@ import { Icon, Pill, Tooltip } from '@adecore/ui';
 /* What a model row says beside the name: its badge, and a mark when the provider says the model can call tools. */
 export function ModelMarks({ model }: { model: ModelInfo }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <>
             {model.badge && (

package/src/chat/ui/Pickers.tsx

@@ -34,6 +34,8 @@ interface ModelPickerProps {
     side?: 'top' | 'bottom';
     /* `chip` names the provider beside the model on a secondary button, for a picker that sits in a card or a form. */
     trigger?: 'plain' | 'chip';
+    /* The chip's height: `sm` in a card, `md` beside the fields of a form. */
+    chipSize?: 'sm' | 'md';
     /* Where the focus goes when the popup closes; by default back to the trigger. */
     finalFocus?: RefObject<HTMLElement | null>;
     /* A note under the list, such as what picking an agent here does. */
@@ -55,6 +57,7 @@ export function ModelPicker({
     kbd = '/model',
     side = 'top',
     trigger = 'plain',
+    chipSize = 'sm',
     finalFocus,
     footer
 }: ModelPickerProps) {
@@ -74,19 +77,26 @@ export function ModelPicker({
     const trimmed = query.trim().toLowerCase();
 
     const favorites = useChatPreferences((preferences) => preferences.favoriteModels);
+
     const starredHere = (row: PickerEntry | undefined): boolean => row?.kind === 'model' && favorites[row.provider.kind]?.includes(row.model.slug) === true;
+
     const entries = pickerEntriesOf(inPickerOrder(providers), trimmed, legacyOpen, expanded, { provider, model: selection.model }, (kind) =>
         favoriteModelsOf(favorites, kind)
     );
+
     const scope = useContext(ChatScopeContext);
     const machine = useHostMachineLabel(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 kindBefore = (i: number): AgentKind | undefined => {
         const before = entries[i - 1];
+
         return before === undefined || before.kind === 'legacy' ? undefined : before.provider.kind;
     };
+
     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. */
@@ -96,6 +106,7 @@ export function ModelPicker({
             setLegacyOpen(false);
             setExpanded(new Set());
         }
+
         setIndex(0);
         onOpenChange(next);
     };
@@ -109,26 +120,36 @@ export function ModelPicker({
         if (!entry) {
             return;
         }
+
         if (entry.kind === 'legacy') {
             setLegacyOpen(true);
             inputRef.current?.focus();
+
             return;
         }
+
         if (entry.kind === 'all') {
             const kind = entry.provider.kind;
+
             setExpanded((now) => {
                 const next = new Set(now);
+
                 if (!next.delete(kind)) {
                     next.add(kind);
                 }
+
                 return next;
             });
+
             inputRef.current?.focus();
+
             return;
         }
+
         if (requirementOf(entry) !== null) {
             return;
         }
+
         onChange(entry.provider.kind, entry.model.slug);
         setOpen(false);
     };
@@ -150,7 +171,7 @@ export function ModelPicker({
         <Popover.Root open={open} onOpenChange={setOpen}>
             <Tooltip label={owner ? `${owner.name} · ${current}` : t('pickers.model.choose')} kbd={kbd ?? undefined}>
                 {trigger === 'chip' ? (
-                    <Popover.Trigger render={<Button variant="secondary" size="sm" className="min-w-0 shrink gap-1.5" />}>
+                    <Popover.Trigger render={<Button variant="secondary" size={chipSize} className="min-w-0 shrink gap-1.5" />}>
                         {chip.mark === 'logo' ? <ProviderLogo provider={provider as UsageProvider} size={12} /> : <AgentIcon kind={provider} size={12} />}
                         <span className="truncate">{chip.name}</span>
                         <span className="max-w-32 truncate text-text-muted">{chip.model}</span>
@@ -190,6 +211,7 @@ export function ModelPicker({
                         if (entry.kind === 'all') {
                             const before = entries[i - 1];
                             const header = grouped && (before === undefined || before.kind === 'legacy' || before.provider.kind !== entry.provider.kind);
+
                             return (
                                 <div key={`all-${entry.provider.kind}`}>
                                     {separatesGroups(kindBefore(i), entry.provider.kind) && <Menu.Separator />}
@@ -212,6 +234,7 @@ export function ModelPicker({
                                 </div>
                             );
                         }
+
                         if (entry.kind === 'legacy') {
                             return (
                                 <button
@@ -226,11 +249,13 @@ export function ModelPicker({
                                 </button>
                             );
                         }
+
                         const previous = entries[i - 1];
                         // A provider's rows start where the one before it ended; its row that opens the rest belongs to it.
                         const first = grouped && (previous === undefined || previous.kind === 'legacy' || previous.provider.kind !== entry.provider.kind);
                         // The makers read as groups only where the whole list is shown, so a short list is not cut by labels.
                         const vendorOpen = trimmed !== '' || expanded.has(entry.provider.kind);
+
                         // The starred rows lead their CLI without a maker's label; the makers start after them.
                         const vendorFirst =
                             vendorOpen &&
@@ -241,11 +266,13 @@ export function ModelPicker({
                                 previous.provider.kind !== entry.provider.kind ||
                                 starredHere(previous) ||
                                 previous.model.vendor !== entry.model.vendor);
+
                         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;
                         const starred = starredHere(entry);
+
                         return (
                             <div key={`${entry.provider.kind}/${entry.model.slug}`}>
                                 {separatesGroups(kindBefore(i), entry.provider.kind) && <Menu.Separator />}
@@ -322,9 +349,11 @@ export function ModelPicker({
 export function StashPicker({ onRestore }: { onRestore(prompt: StashedPrompt): void }) {
     const { t } = useTranslation('agent-chat');
     const prompts = useStash((s) => s.prompts);
+
     if (prompts.length === 0) {
         return null;
     }
+
     return (
         <Popover.Root>
             <Tooltip label={t('pickers.stash.title')} kbd={STASH_SHORTCUT}>

package/src/chat/ui/PromptComposer.tsx

@@ -82,6 +82,7 @@ export function PromptComposer({
         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) {
@@ -114,6 +115,7 @@ export function PromptComposer({
                         onDraft={(draft) => session.setDraft(promptIdOf(active), draft)}
                         onAction={(action) => {
                             refocus.hold();
+
                             void session
                                 .act(active, () => answerPrompt(active, action, actions, host))
                                 .then((result) => {