@adecore/agents-react 0.31.10 → 0.31.11

package/dist/chat/logic/picker-entries.d.ts

@@ -17,4 +17,11 @@ export interface PickerCurrent {
     provider: AgentKind;
     model: string;
 }
+export declare function modelsByVendor(models: ModelInfo[]): ModelInfo[];
+export declare function shortlistOf(kind: AgentKind, models: ModelInfo[], current: PickerCurrent | null): ModelInfo[] | null;
+export declare function wantsModelSearch(providers: readonly ProviderInfo[]): boolean;
+export declare function searchModels(providers: readonly ProviderInfo[], query: string): Array<{
+    entry: ProviderInfo;
+    models: ModelInfo[];
+}>;
 export declare function pickerEntriesOf(providers: readonly ProviderInfo[], query: string, legacyOpen: boolean, expanded?: ReadonlySet<AgentKind>, current?: PickerCurrent | null): PickerEntry[];

package/dist/chat/logic/picker-entries.js

@@ -10,7 +10,7 @@ function matches(model, query) {
  * By maker, then by name, when the provider says who made its models; a list with no makers keeps the order
  * it came in. A model with no maker goes last, so the ones that have one read as groups.
  */
-function byVendor(models) {
+export function modelsByVendor(models) {
     if (!models.some((model) => model.vendor !== undefined)) {
         return models;
     }
@@ -22,6 +22,24 @@ function byVendor(models) {
             a.name.localeCompare(b.name, undefined, { sensitivity: 'base', numeric: true }));
     });
 }
+/* The models a long list shows before it is opened: the default and the one that is picked. Null when the list is short enough to show whole. */
+export function shortlistOf(kind, models, current) {
+    if (models.length <= COMPACT_MODEL_LIMIT) {
+        return null;
+    }
+    return modelsByVendor(models.filter((model) => model.isDefault || (current?.provider === kind && current.model === model.slug)));
+}
+/* Whether the providers offer enough models together that a search is quicker than reading the list. */
+export function wantsModelSearch(providers) {
+    return providers.reduce((count, entry) => count + entry.models.length, 0) > COMPACT_MODEL_LIMIT;
+}
+/* Every model of every provider that a search finds, legacy ones included, by maker; a provider with none is left out. */
+export function searchModels(providers, query) {
+    const needle = query.trim().toLowerCase();
+    return providers
+        .map((entry) => ({ entry, models: modelsByVendor(entry.models.filter((model) => matches(model, needle))) }))
+        .filter((group) => group.models.length > 0);
+}
 const NONE = new Set();
 /*
  * The rows of the model list. A model an old CLI cannot run is a row like any other, so a search for
@@ -30,20 +48,20 @@ const NONE = new Set();
  * that opens the rest, grouped by maker.
  */
 export function pickerEntriesOf(providers, query, legacyOpen, expanded = NONE, current = null) {
-    const rowsOf = (entry, models) => byVendor(models).map((model) => ({ kind: 'model', provider: entry, model }));
+    const rowsOf = (entry, models) => modelsByVendor(models).map((model) => ({ kind: 'model', provider: entry, model }));
     if (query !== '') {
         return providers.flatMap((entry) => rowsOf(entry, entry.models.filter((model) => matches(model, query))));
     }
     const legacy = providers.flatMap((entry) => entry.models.filter((model) => model.legacy).map((model) => ({ kind: 'model', provider: entry, model })));
     const live = providers.flatMap((entry) => {
         const models = entry.models.filter((model) => !model.legacy);
-        if (models.length <= COMPACT_MODEL_LIMIT) {
+        const shortlist = shortlistOf(entry.kind, models, current);
+        if (shortlist === null) {
             return rowsOf(entry, models);
         }
         if (expanded.has(entry.kind)) {
             return [{ kind: 'all', provider: entry, count: models.length, open: true }, ...rowsOf(entry, models)];
         }
-        const shortlist = models.filter((model) => model.isDefault || (current?.provider === entry.kind && current.model === model.slug));
         return [...rowsOf(entry, shortlist), { kind: 'all', provider: entry, count: models.length, open: false }];
     });
     if (legacy.length === 0) {

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

@@ -0,0 +1,4 @@
+import type { ModelInfo } from '@adecore/agent-contracts';
+export declare function ModelMarks({ model }: {
+    model: ModelInfo;
+}): import("react").JSX.Element;

package/dist/chat/ui/ModelMarks.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Wrench } from 'lucide-react';
+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 }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsxs(_Fragment, { children: [model.badge && (_jsx(Pill, { tone: "accent", shape: "tag", size: "sm", children: model.badge.charAt(0).toLocaleUpperCase() + model.badge.slice(1) })), model.tools === true && (_jsx(Tooltip, { label: t('pickers.model.tools'), children: _jsx("span", { className: "flex shrink-0 text-text-faint", "aria-label": t('pickers.model.tools'), children: _jsx(Icon, { icon: Wrench, size: 12 }) }) }))] }));
+}

package/dist/chat/ui/Pickers.js

@@ -9,9 +9,10 @@ import { modelRequirementOf } from '../../agents/model-requirement.js';
 import { useChatHost } from '../../host.js';
 import { ChatScopeContext } from '../../scope.js';
 import { useReportedModels } from '../../state/chats.js';
+import { ModelMarks } from './ModelMarks.js';
 import { pickerEntriesOf } from '../logic/picker-entries.js';
 import { forgetStashed, STASH_SHORTCUT, useStash } from '../stash.js';
-import { Icon, IconButton, Menu, Pill, Popover, Tooltip } from '@adecore/ui';
+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';
 /*
@@ -122,7 +123,7 @@ export function ModelPicker({ providers, provider, selection, open, onOpenChange
                                 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] })), vendorFirst && _jsx(Menu.Label, { children: entry.model.vendor }), _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(Pill, { tone: "accent", shape: "tag", size: "sm", children: entry.model.badge.charAt(0).toLocaleUpperCase() + entry.model.badge.slice(1) })), _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
+                                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] })), vendorFirst && _jsx(Menu.Label, { children: entry.model.vendor }), _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 }), _jsx(ModelMarks, { model: entry.model }), _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);

package/dist/chat/ui/RunSettings.js

@@ -1,16 +1,19 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import { Activity, TriangleAlert, ChevronDown, ChevronRight, ChevronUp, FilePen, Gauge, Hand, Settings, Shield, ShieldAlert, SlidersHorizontal } from 'lucide-react';
+import { Activity, TriangleAlert, ChevronDown, ChevronRight, ChevronUp, FilePen, Gauge, Hand, Search, Settings, Shield, ShieldAlert, SlidersHorizontal } from 'lucide-react';
 import { AccountDot } from '../../agents/AccountDot.js';
 import { limitsOfAccount, sessionWindow } from '../../agents/account-limits.js';
 import { canContinueOn } from '../../agents/accounts.js';
 import { AgentIcon } from '../../agents/AgentIcon.js';
 import { modelName, shortModelName } from '../../agents/model-name.js';
+import { ModelMarks } from './ModelMarks.js';
+import { modelsByVendor, searchModels, shortlistOf, wantsModelSearch } from '../logic/picker-entries.js';
 import { CONTEXT_OPTION, contextFraction, contextSegments, orderOptions } from '../logic/context-usage.js';
 import { RUNTIME_MODES } from '../runtime-modes.js';
 import { formatClock, formatWeekdayClock, isSameDay, formatPercent, formatTokens } from '@adecore/ui/format';
-import { Icon, Menu, Pill, Tooltip, useNow } from '@adecore/ui';
+import { Icon, Menu, Tooltip, useNow } from '@adecore/ui';
 import { useChatHost } from '../../host.js';
 import { useUsageLimits } from '../../usage/limits.js';
 const MINUTE_MS = 60_000;
@@ -59,6 +62,8 @@ function modelGroupsOf(providers, legacy) {
  */
 export function RunSettings({ disabled = false, providers, provider, selection, model, runtimeMode, effectiveRuntimeMode, permissionMode, open, onOpenChange, onModel, onOption, onMode, usage, compactDisabled, onCompact, account }) {
     const { t } = useTranslation('agent-chat');
+    const [query, setQuery] = useState('');
+    const searchRef = useRef(null);
     const owner = providers.find((entry) => entry.kind === provider);
     const current = modelName(selection.model, owner?.models);
     const short = shortModelName(current, owner?.models);
@@ -87,8 +92,70 @@ export function RunSettings({ disabled = false, providers, provider, selection,
         const slash = value.indexOf('/');
         onModel(value.slice(0, slash), value.slice(slash + 1));
     };
-    const modelGroups = (groups) => groups.map(({ entry, models }) => (_jsxs(Menu.Group, { children: [grouped && (_jsxs(Menu.GroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.kind, size: 12 }), entry.name] })), models.map((row) => (_jsxs(Menu.RadioItem, { value: modelValue(entry.kind, row.slug), closeOnClick: true, children: [_jsx(AgentIcon, { kind: entry.kind, size: 14, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.name }), row.badge && (_jsx(Pill, { tone: "accent", shape: "tag", size: "sm", children: row.badge.charAt(0).toLocaleUpperCase() + row.badge.slice(1) }))] }, row.slug)))] }, entry.kind)));
-    return (_jsxs(Menu.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(Tooltip, { label: permissionHint ?? t('pickers.settings.title'), kbd: "/model", children: _jsxs(Menu.Trigger, { disabled: disabled, className: clsx('flex h-8 min-w-0 items-center gap-2 rounded-full border pr-3 pl-2.5 text-xs whitespace-nowrap text-text-muted @max-xl/composer:gap-1.5 @max-sm/composer:pr-2.5', open ? 'border-accent bg-accent-soft' : 'border-border hover:bg-surface-hover'), children: [_jsx(AgentIcon, { kind: provider, size: 14, className: "shrink-0" }), _jsxs("span", { className: "flex min-w-0 items-center gap-2 overflow-hidden @max-xl/composer:gap-1.5", children: [_jsx("span", { className: "truncate font-medium text-text @max-xl/composer:hidden", children: current }), _jsx("span", { className: "hidden truncate font-medium text-text @max-xl/composer:inline", children: short }), account !== null && (_jsxs("span", { className: "flex min-w-0 items-center gap-2 @max-xl/composer:gap-1.5", children: [_jsx("span", { className: "shrink-0 text-text-faint", children: "\u00B7" }), _jsx(AccountDot, { color: account.choice.current?.account.color }), _jsx("span", { className: "truncate @max-xl/composer:hidden", children: account.choice.current === null ? account.choice.currentId : account.choice.nameOf(account.choice.current) })] })), summary.map((entry) => (_jsxs("span", { className: clsx('flex shrink-0 items-center gap-2 @max-xl/composer:gap-1.5', !entry.ring && '@max-xl/composer:hidden'), children: [_jsx("span", { className: "text-text-faint", children: "\u00B7" }), entry.ring && _jsx(ContextRing, { usage: usage }), _jsx("span", { className: clsx(entry.ring && '@max-sm/composer:hidden'), children: entry.label })] }, entry.id))), _jsx("span", { className: "shrink-0 text-text-faint", children: "\u00B7" }), _jsxs("span", { className: clsx('flex shrink-0 items-center gap-1', fullAccess && 'text-status-needs-you'), children: [_jsx(Icon, { icon: MODE_ICONS[shownMode], size: 12, className: "shrink-0" }), _jsx("span", { children: effectiveRuntimeMode === undefined && permissionMode !== undefined ? permissionMode : t(`modes.${shownMode}.short`) }), permissionFallback && _jsx(Icon, { icon: TriangleAlert, size: 12, className: "shrink-0 text-status-needs-you" })] })] }), _jsx(Icon, { icon: open ? ChevronUp : ChevronDown, size: 12, className: "shrink-0 @max-sm/composer:hidden" })] }) }), _jsxs(Menu.Popup, { side: "top", sideOffset: 8, align: "start", className: "w-80", children: [providers.length === 0 && _jsx("div", { className: "px-2.5 py-3 text-xs text-text-faint", children: t('pickers.model.noProvider') }), _jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: modelGroups(live) }), legacy.length > 0 && (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [_jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.model.legacyGroup', { count: legacy.reduce((count, group) => count + group.models.length, 0) }) }), chosenLegacy && _jsx(Menu.Hint, { className: "truncate", children: chosenLegacy.name })] }), _jsx(Menu.Popup, { className: "min-w-56", children: _jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: modelGroups(legacy) }) })] })), _jsx(Menu.Separator, {}), account !== null && _jsx(AccountSubmenu, { provider: provider, account: account }), _jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [_jsx(Icon, { icon: MODE_ICONS[runtimeMode], size: 14, className: clsx('shrink-0', fullAccess ? 'text-status-needs-you' : 'text-text-faint') }), _jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.mode.label') }), _jsx(Menu.Hint, { className: "truncate", children: t(`modes.${runtimeMode}.label`) })] }), _jsxs(Menu.Popup, { className: "w-72", children: [permissionHint !== null && _jsx("p", { className: "px-2.5 py-2 text-xs text-text-muted", children: permissionHint }), _jsx(Menu.RadioGroup, { value: runtimeMode, onValueChange: (mode) => onMode(mode), children: RUNTIME_MODES.map((mode) => (_jsxs(Menu.RadioItem, { value: mode, className: "items-start", children: [_jsx("span", { className: "grid h-lh w-4 shrink-0 place-items-center", children: _jsx(Icon, { icon: MODE_ICONS[mode], size: 14, className: mode === 'full-access' ? 'text-status-needs-you' : 'text-text-faint' }) }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [t(`modes.${mode}.label`), _jsx("span", { className: "text-xs text-text-faint", children: t(`modes.${mode}.hint`) })] })] }, mode))) })] })] }), options.map((option) => (_jsx(OptionRow, { option: option, selection: selection, onChange: (value) => onOption(option.id, value) }, option.id))), (hasContextOption || standaloneContext) && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, {}), _jsx(ContextUsage, { usage: usage, disabled: compactDisabled, onCompact: onCompact })] }))] })] }));
+    const searchable = wantsModelSearch(providers);
+    const found = query.trim() === '' ? null : searchModels(providers, query);
+    // The menu moves the focus to its popup as it opens, so the search field takes it a frame later.
+    useEffect(() => {
+        if (!open || !searchable) {
+            return;
+        }
+        const frame = requestAnimationFrame(() => searchRef.current?.focus());
+        return () => cancelAnimationFrame(frame);
+    }, [open, searchable]);
+    const changeOpen = (next) => {
+        if (!next) {
+            setQuery('');
+        }
+        onOpenChange(next);
+    };
+    // An item the arrow keys moved to has the focus; typing there still goes to the search.
+    const onPopupKey = (event) => {
+        if (!searchable || event.target === searchRef.current || event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+        const typed = event.key.length === 1 && event.key !== ' ';
+        if (!typed && event.key !== 'Backspace') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setQuery((now) => (typed ? now + event.key : now.slice(0, -1)));
+        searchRef.current?.focus();
+    };
+    // The menu reads letters as a jump to an item and arrows as moving through them; the field keeps what it types.
+    const onSearchKey = (event) => {
+        if (event.key === 'Escape' && query !== '') {
+            event.preventDefault();
+            event.stopPropagation();
+            setQuery('');
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const first = found?.[0];
+            if (first !== undefined) {
+                onModel(first.entry.kind, first.models[0].slug);
+                changeOpen(false);
+            }
+            return;
+        }
+        if (event.key !== 'Escape' && event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Tab') {
+            event.stopPropagation();
+        }
+    };
+    const modelRow = (entry, row) => (_jsxs(Menu.RadioItem, { value: modelValue(entry.kind, row.slug), closeOnClick: true, children: [_jsx(AgentIcon, { kind: entry.kind, size: 14, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.name }), _jsx(ModelMarks, { model: row })] }, row.slug));
+    // Every model of one provider, under a label per maker where the provider names them.
+    const byMaker = (entry, models) => modelsByVendor(models).map((row, i, sorted) => (_jsxs(Fragment, { children: [row.vendor !== undefined && sorted[i - 1]?.vendor !== row.vendor && _jsx(Menu.GroupLabel, { children: row.vendor }), modelRow(entry, row)] }, row.slug)));
+    // A provider with many models shows the default and the chosen one, with all of them one submenu away.
+    const providerModels = (entry, models) => {
+        const shortlist = shortlistOf(entry.kind, models, { provider, model: selection.model });
+        if (shortlist === null) {
+            return models.map((row) => modelRow(entry, row));
+        }
+        return (_jsxs(_Fragment, { children: [shortlist.map((row) => modelRow(entry, row)), _jsxs(Menu.SubmenuRoot, { children: [_jsx(Menu.SubmenuTrigger, { className: "text-text-muted", children: t('pickers.model.allGroup', { count: models.length }) }), _jsx(Menu.Popup, { className: "w-80", children: _jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: byMaker(entry, models) }) })] })] }));
+    };
+    const modelGroups = (groups) => groups.map(({ entry, models }) => (_jsxs(Menu.Group, { children: [grouped && (_jsxs(Menu.GroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.kind, size: 12 }), entry.name] })), providerModels(entry, models)] }, entry.kind)));
+    return (_jsxs(Menu.Root, { open: open, onOpenChange: changeOpen, highlightItemOnHover: !searchable, children: [_jsx(Tooltip, { label: permissionHint ?? t('pickers.settings.title'), kbd: "/model", children: _jsxs(Menu.Trigger, { disabled: disabled, className: clsx('flex h-8 min-w-0 items-center gap-2 rounded-full border pr-3 pl-2.5 text-xs whitespace-nowrap text-text-muted @max-xl/composer:gap-1.5 @max-sm/composer:pr-2.5', open ? 'border-accent bg-accent-soft' : 'border-border hover:bg-surface-hover'), children: [_jsx(AgentIcon, { kind: provider, size: 14, className: "shrink-0" }), _jsxs("span", { className: "flex min-w-0 items-center gap-2 overflow-hidden @max-xl/composer:gap-1.5", children: [_jsx("span", { className: "truncate font-medium text-text @max-xl/composer:hidden", children: current }), _jsx("span", { className: "hidden truncate font-medium text-text @max-xl/composer:inline", children: short }), account !== null && (_jsxs("span", { className: "flex min-w-0 items-center gap-2 @max-xl/composer:gap-1.5", children: [_jsx("span", { className: "shrink-0 text-text-faint", children: "\u00B7" }), _jsx(AccountDot, { color: account.choice.current?.account.color }), _jsx("span", { className: "truncate @max-xl/composer:hidden", children: account.choice.current === null ? account.choice.currentId : account.choice.nameOf(account.choice.current) })] })), summary.map((entry) => (_jsxs("span", { className: clsx('flex shrink-0 items-center gap-2 @max-xl/composer:gap-1.5', !entry.ring && '@max-xl/composer:hidden'), children: [_jsx("span", { className: "text-text-faint", children: "\u00B7" }), entry.ring && _jsx(ContextRing, { usage: usage }), _jsx("span", { className: clsx(entry.ring && '@max-sm/composer:hidden'), children: entry.label })] }, entry.id))), _jsx("span", { className: "shrink-0 text-text-faint", children: "\u00B7" }), _jsxs("span", { className: clsx('flex shrink-0 items-center gap-1', fullAccess && 'text-status-needs-you'), children: [_jsx(Icon, { icon: MODE_ICONS[shownMode], size: 12, className: "shrink-0" }), _jsx("span", { children: effectiveRuntimeMode === undefined && permissionMode !== undefined ? permissionMode : t(`modes.${shownMode}.short`) }), permissionFallback && _jsx(Icon, { icon: TriangleAlert, size: 12, className: "shrink-0 text-status-needs-you" })] })] }), _jsx(Icon, { icon: open ? ChevronUp : ChevronDown, size: 12, className: "shrink-0 @max-sm/composer:hidden" })] }) }), _jsxs(Menu.Popup, { side: "top", sideOffset: 8, align: "start", className: "w-80", onKeyDownCapture: onPopupKey, children: [providers.length === 0 && _jsx("div", { className: "px-2.5 py-3 text-xs text-text-faint", children: t('pickers.model.noProvider') }), searchable && (_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-2.5", children: [_jsx(Icon, { icon: Search, size: 14, className: "shrink-0 text-text-faint" }), _jsx("input", { ref: searchRef, className: "h-8 w-full bg-transparent text-sm text-text outline-none placeholder:text-text-faint", placeholder: t('pickers.model.search'), "aria-label": t('pickers.model.search'), spellCheck: false, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: onSearchKey })] })), found !== null && found.length === 0 && _jsx("div", { className: "px-2.5 py-3 text-xs text-text-faint", children: t('pickers.model.noMatch') }), found !== null && found.length > 0 && (_jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: found.map(({ entry, models }) => (_jsxs(Menu.Group, { children: [grouped && (_jsxs(Menu.GroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.kind, size: 12 }), entry.name] })), byMaker(entry, models)] }, entry.kind))) })), found === null && (_jsxs(_Fragment, { children: [_jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: modelGroups(live) }), legacy.length > 0 && (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [_jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.model.legacyGroup', { count: legacy.reduce((count, group) => count + group.models.length, 0) }) }), chosenLegacy && _jsx(Menu.Hint, { className: "truncate", children: chosenLegacy.name })] }), _jsx(Menu.Popup, { className: "min-w-56", children: _jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: modelGroups(legacy) }) })] })), _jsx(Menu.Separator, {}), account !== null && _jsx(AccountSubmenu, { provider: provider, account: account }), _jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [_jsx(Icon, { icon: MODE_ICONS[runtimeMode], size: 14, className: clsx('shrink-0', fullAccess ? 'text-status-needs-you' : 'text-text-faint') }), _jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.mode.label') }), _jsx(Menu.Hint, { className: "truncate", children: t(`modes.${runtimeMode}.label`) })] }), _jsxs(Menu.Popup, { className: "w-72", children: [permissionHint !== null && _jsx("p", { className: "px-2.5 py-2 text-xs text-text-muted", children: permissionHint }), _jsx(Menu.RadioGroup, { value: runtimeMode, onValueChange: (mode) => onMode(mode), children: RUNTIME_MODES.map((mode) => (_jsxs(Menu.RadioItem, { value: mode, className: "items-start", children: [_jsx("span", { className: "grid h-lh w-4 shrink-0 place-items-center", children: _jsx(Icon, { icon: MODE_ICONS[mode], size: 14, className: mode === 'full-access' ? 'text-status-needs-you' : 'text-text-faint' }) }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [t(`modes.${mode}.label`), _jsx("span", { className: "text-xs text-text-faint", children: t(`modes.${mode}.hint`) })] })] }, mode))) })] })] }), options.map((option) => (_jsx(OptionRow, { option: option, selection: selection, onChange: (value) => onOption(option.id, value) }, option.id))), (hasContextOption || standaloneContext) && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, {}), _jsx(ContextUsage, { usage: usage, disabled: compactDisabled, onCompact: onCompact })] }))] }))] })] }));
 }
 /* Red where a window is nearly spent, amber where it is worth knowing, as the usage bars have it. */
 function sessionTone(used) {

package/dist/locales/en/agent-chat.d.ts

@@ -439,6 +439,7 @@ declare const _default: {
             legacyGroup_one: string;
             legacyGroup_other: string;
             legacy: string;
+            tools: string;
             requires: string;
             requiresHere: string;
             providerSettings: string;

package/dist/locales/en/agent-chat.js

@@ -439,6 +439,7 @@ export default {
             legacyGroup_one: 'Legacy models ({{count}})',
             legacyGroup_other: 'Legacy models ({{count}})',
             legacy: 'Legacy',
+            tools: 'Can use tools',
             requires: 'Requires {{cli}} {{version}} or later on {{machine}}',
             requiresHere: 'Requires {{cli}} {{version}} or later',
             providerSettings: 'Provider settings'

package/dist/locales/nl/agent-chat.d.ts

@@ -439,6 +439,7 @@ declare const _default: {
             legacyGroup_one: string;
             legacyGroup_other: string;
             legacy: string;
+            tools: string;
             requires: string;
             requiresHere: string;
             providerSettings: string;

package/dist/locales/nl/agent-chat.js

@@ -439,6 +439,7 @@ export default {
             legacyGroup_one: 'Legacy-modellen ({{count}})',
             legacyGroup_other: 'Legacy-modellen ({{count}})',
             legacy: 'Legacy',
+            tools: 'Kan tools gebruiken',
             requires: 'Vereist {{cli}} {{version}} of nieuwer op {{machine}}',
             requiresHere: 'Vereist {{cli}} {{version}} of nieuwer',
             providerSettings: 'Providerinstellingen'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.31.10",
+  "version": "0.31.11",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.31.10",
-    "@adecore/editor": "0.31.10",
-    "@adecore/editor-react": "0.31.10",
-    "@adecore/intelligent-ui": "0.31.10",
-    "@adecore/merge": "0.31.10",
+    "@adecore/agent-contracts": "0.31.11",
+    "@adecore/editor": "0.31.11",
+    "@adecore/editor-react": "0.31.11",
+    "@adecore/intelligent-ui": "0.31.11",
+    "@adecore/merge": "0.31.11",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.31.10",
+    "@adecore/ui": "^0.31.11",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.31.10",
+    "@adecore/ui": "0.31.11",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/logic/picker-entries.ts

@@ -25,7 +25,7 @@ function matches(model: ModelInfo, query: string): boolean {
  * By maker, then by name, when the provider says who made its models; a list with no makers keeps the order
  * it came in. A model with no maker goes last, so the ones that have one read as groups.
  */
-function byVendor(models: ModelInfo[]): ModelInfo[] {
+export function modelsByVendor(models: ModelInfo[]): ModelInfo[] {
     if (!models.some((model) => model.vendor !== undefined)) {
         return models;
     }
@@ -40,6 +40,27 @@ function byVendor(models: ModelInfo[]): ModelInfo[] {
     });
 }
 
+/* The models a long list shows before it is opened: the default and the one that is picked. Null when the list is short enough to show whole. */
+export function shortlistOf(kind: AgentKind, models: ModelInfo[], current: PickerCurrent | null): ModelInfo[] | null {
+    if (models.length <= COMPACT_MODEL_LIMIT) {
+        return null;
+    }
+    return modelsByVendor(models.filter((model) => model.isDefault || (current?.provider === kind && current.model === model.slug)));
+}
+
+/* Whether the providers offer enough models together that a search is quicker than reading the list. */
+export function wantsModelSearch(providers: readonly ProviderInfo[]): boolean {
+    return providers.reduce((count, entry) => count + entry.models.length, 0) > COMPACT_MODEL_LIMIT;
+}
+
+/* Every model of every provider that a search finds, legacy ones included, by maker; a provider with none is left out. */
+export function searchModels(providers: readonly ProviderInfo[], query: string): Array<{ entry: ProviderInfo; models: ModelInfo[] }> {
+    const needle = query.trim().toLowerCase();
+    return providers
+        .map((entry) => ({ entry, models: modelsByVendor(entry.models.filter((model) => matches(model, needle))) }))
+        .filter((group) => group.models.length > 0);
+}
+
 const NONE: ReadonlySet<AgentKind> = new Set();
 
 /*
@@ -55,7 +76,8 @@ export function pickerEntriesOf(
     expanded: ReadonlySet<AgentKind> = NONE,
     current: PickerCurrent | null = null
 ): PickerEntry[] {
-    const rowsOf = (entry: ProviderInfo, models: ModelInfo[]): PickerEntry[] => byVendor(models).map((model) => ({ kind: 'model', provider: entry, model }));
+    const rowsOf = (entry: ProviderInfo, models: ModelInfo[]): PickerEntry[] =>
+        modelsByVendor(models).map((model) => ({ kind: 'model', provider: entry, model }));
     if (query !== '') {
         return providers.flatMap((entry) =>
             rowsOf(
@@ -69,13 +91,13 @@ export function pickerEntriesOf(
     );
     const live = providers.flatMap((entry): PickerEntry[] => {
         const models = entry.models.filter((model) => !model.legacy);
-        if (models.length <= COMPACT_MODEL_LIMIT) {
+        const shortlist = shortlistOf(entry.kind, models, current);
+        if (shortlist === null) {
             return rowsOf(entry, models);
         }
         if (expanded.has(entry.kind)) {
             return [{ kind: 'all', provider: entry, count: models.length, open: true }, ...rowsOf(entry, models)];
         }
-        const shortlist = models.filter((model) => model.isDefault || (current?.provider === entry.kind && current.model === model.slug));
         return [...rowsOf(entry, shortlist), { kind: 'all', provider: entry, count: models.length, open: false }];
     });
     if (legacy.length === 0) {

package/src/chat/ui/ModelMarks.tsx

@@ -0,0 +1,25 @@
+import { useTranslation } from 'react-i18next';
+import { Wrench } from 'lucide-react';
+import type { ModelInfo } from '@adecore/agent-contracts';
+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 && (
+                <Pill tone="accent" shape="tag" size="sm">
+                    {model.badge.charAt(0).toLocaleUpperCase() + model.badge.slice(1)}
+                </Pill>
+            )}
+            {model.tools === true && (
+                <Tooltip label={t('pickers.model.tools')}>
+                    <span className="flex shrink-0 text-text-faint" aria-label={t('pickers.model.tools')}>
+                        <Icon icon={Wrench} size={12} />
+                    </span>
+                </Tooltip>
+            )}
+        </>
+    );
+}

package/src/chat/ui/Pickers.tsx

@@ -9,9 +9,10 @@ import { modelRequirementOf } from '../../agents/model-requirement';
 import { useChatHost } from '../../host';
 import { ChatScopeContext } from '../../scope';
 import { useReportedModels } from '../../state/chats';
+import { ModelMarks } from './ModelMarks';
 import { pickerEntriesOf, type PickerEntry } from '../logic/picker-entries';
 import { forgetStashed, STASH_SHORTCUT, useStash, type StashedPrompt } from '../stash';
-import { Icon, IconButton, Menu, Pill, Popover, Tooltip } from '@adecore/ui';
+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';
@@ -257,11 +258,7 @@ export function ModelPicker({
                                     <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 && (
-                                            <Pill tone="accent" shape="tag" size="sm">
-                                                {entry.model.badge.charAt(0).toLocaleUpperCase() + entry.model.badge.slice(1)}
-                                            </Pill>
-                                        )}
+                                        <ModelMarks model={entry.model} />
                                         <span className="grow" />
                                         {entry.model.legacy && <span className="text-xs text-text-faint">{t('pickers.model.legacy')}</span>}
                                     </span>

package/src/chat/ui/RunSettings.tsx

@@ -1,3 +1,4 @@
+import { Fragment, useEffect, useRef, useState, type KeyboardEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import {
@@ -9,6 +10,7 @@ import {
     FilePen,
     Gauge,
     Hand,
+    Search,
     Settings,
     Shield,
     ShieldAlert,
@@ -22,10 +24,12 @@ import { canContinueOn } from '../../agents/accounts';
 import { AgentIcon } from '../../agents/AgentIcon';
 import type { AccountChoice } from '../account-choice';
 import { modelName, shortModelName } from '../../agents/model-name';
+import { ModelMarks } from './ModelMarks';
+import { modelsByVendor, searchModels, shortlistOf, wantsModelSearch } from '../logic/picker-entries';
 import { CONTEXT_OPTION, contextFraction, contextSegments, orderOptions, type ContextPart } from '../logic/context-usage';
 import { RUNTIME_MODES } from '../runtime-modes';
 import { formatClock, formatWeekdayClock, isSameDay, formatPercent, formatTokens } from '@adecore/ui/format';
-import { Icon, Menu, Pill, Tooltip, useNow } from '@adecore/ui';
+import { Icon, Menu, Tooltip, useNow } from '@adecore/ui';
 import { useChatHost } from '../../host';
 import { useUsageLimits } from '../../usage/limits';
 
@@ -134,6 +138,8 @@ export function RunSettings({
     account
 }: RunSettingsProps) {
     const { t } = useTranslation('agent-chat');
+    const [query, setQuery] = useState('');
+    const searchRef = useRef<HTMLInputElement>(null);
     const owner = providers.find((entry) => entry.kind === provider);
     const current = modelName(selection.model, owner?.models);
     const short = shortModelName(current, owner?.models);
@@ -164,6 +170,100 @@ export function RunSettings({
         onModel(value.slice(0, slash) as AgentKind, value.slice(slash + 1));
     };
 
+    const searchable = wantsModelSearch(providers);
+    const found = query.trim() === '' ? null : searchModels(providers, query);
+
+    // The menu moves the focus to its popup as it opens, so the search field takes it a frame later.
+    useEffect(() => {
+        if (!open || !searchable) {
+            return;
+        }
+        const frame = requestAnimationFrame(() => searchRef.current?.focus());
+        return () => cancelAnimationFrame(frame);
+    }, [open, searchable]);
+
+    const changeOpen = (next: boolean): void => {
+        if (!next) {
+            setQuery('');
+        }
+        onOpenChange(next);
+    };
+
+    // An item the arrow keys moved to has the focus; typing there still goes to the search.
+    const onPopupKey = (event: KeyboardEvent<HTMLDivElement>): void => {
+        if (!searchable || event.target === searchRef.current || event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+        const typed = event.key.length === 1 && event.key !== ' ';
+        if (!typed && event.key !== 'Backspace') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setQuery((now) => (typed ? now + event.key : now.slice(0, -1)));
+        searchRef.current?.focus();
+    };
+
+    // The menu reads letters as a jump to an item and arrows as moving through them; the field keeps what it types.
+    const onSearchKey = (event: KeyboardEvent<HTMLInputElement>): void => {
+        if (event.key === 'Escape' && query !== '') {
+            event.preventDefault();
+            event.stopPropagation();
+            setQuery('');
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const first = found?.[0];
+            if (first !== undefined) {
+                onModel(first.entry.kind, first.models[0]!.slug);
+                changeOpen(false);
+            }
+            return;
+        }
+        if (event.key !== 'Escape' && event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Tab') {
+            event.stopPropagation();
+        }
+    };
+
+    const modelRow = (entry: ProviderInfo, row: ModelInfo) => (
+        <Menu.RadioItem key={row.slug} value={modelValue(entry.kind, row.slug)} closeOnClick>
+            <AgentIcon kind={entry.kind} size={14} className="shrink-0" />
+            <span className="min-w-0 truncate">{row.name}</span>
+            <ModelMarks model={row} />
+        </Menu.RadioItem>
+    );
+
+    // Every model of one provider, under a label per maker where the provider names them.
+    const byMaker = (entry: ProviderInfo, models: ModelInfo[]) =>
+        modelsByVendor(models).map((row, i, sorted) => (
+            <Fragment key={row.slug}>
+                {row.vendor !== undefined && sorted[i - 1]?.vendor !== row.vendor && <Menu.GroupLabel>{row.vendor}</Menu.GroupLabel>}
+                {modelRow(entry, row)}
+            </Fragment>
+        ));
+
+    // A provider with many models shows the default and the chosen one, with all of them one submenu away.
+    const providerModels = (entry: ProviderInfo, models: ModelInfo[]) => {
+        const shortlist = shortlistOf(entry.kind, models, { provider, model: selection.model });
+        if (shortlist === null) {
+            return models.map((row) => modelRow(entry, row));
+        }
+        return (
+            <>
+                {shortlist.map((row) => modelRow(entry, row))}
+                <Menu.SubmenuRoot>
+                    <Menu.SubmenuTrigger className="text-text-muted">{t('pickers.model.allGroup', { count: models.length })}</Menu.SubmenuTrigger>
+                    <Menu.Popup className="w-80">
+                        <Menu.RadioGroup value={chosenModel} onValueChange={chooseModel}>
+                            {byMaker(entry, models)}
+                        </Menu.RadioGroup>
+                    </Menu.Popup>
+                </Menu.SubmenuRoot>
+            </>
+        );
+    };
+
     const modelGroups = (groups: typeof live) =>
         groups.map(({ entry, models }) => (
             <Menu.Group key={entry.kind}>
@@ -173,22 +273,12 @@ export function RunSettings({
                         {entry.name}
                     </Menu.GroupLabel>
                 )}
-                {models.map((row) => (
-                    <Menu.RadioItem key={row.slug} value={modelValue(entry.kind, row.slug)} closeOnClick>
-                        <AgentIcon kind={entry.kind} size={14} className="shrink-0" />
-                        <span className="min-w-0 truncate">{row.name}</span>
-                        {row.badge && (
-                            <Pill tone="accent" shape="tag" size="sm">
-                                {row.badge.charAt(0).toLocaleUpperCase() + row.badge.slice(1)}
-                            </Pill>
-                        )}
-                    </Menu.RadioItem>
-                ))}
+                {providerModels(entry, models)}
             </Menu.Group>
         ));
 
     return (
-        <Menu.Root open={open} onOpenChange={onOpenChange}>
+        <Menu.Root open={open} onOpenChange={changeOpen} highlightItemOnHover={!searchable}>
             <Tooltip label={permissionHint ?? t('pickers.settings.title')} kbd="/model">
                 {/* Styled from `open`: the tooltip puts `data-popup-open` on the same trigger. */}
                 <Menu.Trigger
@@ -233,63 +323,102 @@ export function RunSettings({
                     <Icon icon={open ? ChevronUp : ChevronDown} size={12} className="shrink-0 @max-sm/composer:hidden" />
                 </Menu.Trigger>
             </Tooltip>
-            <Menu.Popup side="top" sideOffset={8} align="start" className="w-80">
+            <Menu.Popup side="top" sideOffset={8} align="start" className="w-80" onKeyDownCapture={onPopupKey}>
                 {providers.length === 0 && <div className="px-2.5 py-3 text-xs text-text-faint">{t('pickers.model.noProvider')}</div>}
-                <Menu.RadioGroup value={chosenModel} onValueChange={chooseModel}>
-                    {modelGroups(live)}
-                </Menu.RadioGroup>
-                {legacy.length > 0 && (
-                    <Menu.SubmenuRoot>
-                        <Menu.SubmenuTrigger className="text-text-muted">
-                            <span className="min-w-0 grow truncate">
-                                {t('pickers.model.legacyGroup', { count: legacy.reduce((count, group) => count + group.models.length, 0) })}
-                            </span>
-                            {chosenLegacy && <Menu.Hint className="truncate">{chosenLegacy.name}</Menu.Hint>}
-                        </Menu.SubmenuTrigger>
-                        <Menu.Popup className="min-w-56">
-                            <Menu.RadioGroup value={chosenModel} onValueChange={chooseModel}>
-                                {modelGroups(legacy)}
-                            </Menu.RadioGroup>
-                        </Menu.Popup>
-                    </Menu.SubmenuRoot>
+                {searchable && (
+                    <div className="flex items-center gap-2 border-b border-border px-2.5">
+                        <Icon icon={Search} size={14} className="shrink-0 text-text-faint" />
+                        <input
+                            ref={searchRef}
+                            className="h-8 w-full bg-transparent text-sm text-text outline-none placeholder:text-text-faint"
+                            placeholder={t('pickers.model.search')}
+                            aria-label={t('pickers.model.search')}
+                            spellCheck={false}
+                            value={query}
+                            onChange={(event) => setQuery(event.target.value)}
+                            onKeyDown={onSearchKey}
+                        />
+                    </div>
                 )}
-                <Menu.Separator />
-                {account !== null && <AccountSubmenu provider={provider} account={account} />}
-                <Menu.SubmenuRoot>
-                    <Menu.SubmenuTrigger className="text-text-muted">
-                        <Icon icon={MODE_ICONS[runtimeMode]} size={14} className={clsx('shrink-0', fullAccess ? 'text-status-needs-you' : 'text-text-faint')} />
-                        <span className="min-w-0 grow truncate">{t('pickers.mode.label')}</span>
-                        <Menu.Hint className="truncate">{t(`modes.${runtimeMode}.label`)}</Menu.Hint>
-                    </Menu.SubmenuTrigger>
-                    <Menu.Popup className="w-72">
-                        {permissionHint !== null && <p className="px-2.5 py-2 text-xs text-text-muted">{permissionHint}</p>}
-                        <Menu.RadioGroup value={runtimeMode} onValueChange={(mode: RuntimeMode) => onMode(mode)}>
-                            {RUNTIME_MODES.map((mode) => (
-                                <Menu.RadioItem key={mode} value={mode} className="items-start">
-                                    {/* The hint makes the row two lines high; the box keeps the icon on the label's line. */}
-                                    <span className="grid h-lh w-4 shrink-0 place-items-center">
-                                        <Icon
-                                            icon={MODE_ICONS[mode]}
-                                            size={14}
-                                            className={mode === 'full-access' ? 'text-status-needs-you' : 'text-text-faint'}
-                                        />
-                                    </span>
-                                    <span className="flex min-w-0 grow flex-col">
-                                        {t(`modes.${mode}.label`)}
-                                        <span className="text-xs text-text-faint">{t(`modes.${mode}.hint`)}</span>
-                                    </span>
-                                </Menu.RadioItem>
-                            ))}
-                        </Menu.RadioGroup>
-                    </Menu.Popup>
-                </Menu.SubmenuRoot>
-                {options.map((option) => (
-                    <OptionRow key={option.id} option={option} selection={selection} onChange={(value) => onOption(option.id, value)} />
-                ))}
-                {(hasContextOption || standaloneContext) && (
+                {found !== null && found.length === 0 && <div className="px-2.5 py-3 text-xs text-text-faint">{t('pickers.model.noMatch')}</div>}
+                {found !== null && found.length > 0 && (
+                    <Menu.RadioGroup value={chosenModel} onValueChange={chooseModel}>
+                        {found.map(({ entry, models }) => (
+                            <Menu.Group key={entry.kind}>
+                                {grouped && (
+                                    <Menu.GroupLabel className="flex items-center gap-1.5">
+                                        <AgentIcon kind={entry.kind} size={12} />
+                                        {entry.name}
+                                    </Menu.GroupLabel>
+                                )}
+                                {byMaker(entry, models)}
+                            </Menu.Group>
+                        ))}
+                    </Menu.RadioGroup>
+                )}
+                {found === null && (
                     <>
+                        <Menu.RadioGroup value={chosenModel} onValueChange={chooseModel}>
+                            {modelGroups(live)}
+                        </Menu.RadioGroup>
+                        {legacy.length > 0 && (
+                            <Menu.SubmenuRoot>
+                                <Menu.SubmenuTrigger className="text-text-muted">
+                                    <span className="min-w-0 grow truncate">
+                                        {t('pickers.model.legacyGroup', { count: legacy.reduce((count, group) => count + group.models.length, 0) })}
+                                    </span>
+                                    {chosenLegacy && <Menu.Hint className="truncate">{chosenLegacy.name}</Menu.Hint>}
+                                </Menu.SubmenuTrigger>
+                                <Menu.Popup className="min-w-56">
+                                    <Menu.RadioGroup value={chosenModel} onValueChange={chooseModel}>
+                                        {modelGroups(legacy)}
+                                    </Menu.RadioGroup>
+                                </Menu.Popup>
+                            </Menu.SubmenuRoot>
+                        )}
                         <Menu.Separator />
-                        <ContextUsage usage={usage} disabled={compactDisabled} onCompact={onCompact} />
+                        {account !== null && <AccountSubmenu provider={provider} account={account} />}
+                        <Menu.SubmenuRoot>
+                            <Menu.SubmenuTrigger className="text-text-muted">
+                                <Icon
+                                    icon={MODE_ICONS[runtimeMode]}
+                                    size={14}
+                                    className={clsx('shrink-0', fullAccess ? 'text-status-needs-you' : 'text-text-faint')}
+                                />
+                                <span className="min-w-0 grow truncate">{t('pickers.mode.label')}</span>
+                                <Menu.Hint className="truncate">{t(`modes.${runtimeMode}.label`)}</Menu.Hint>
+                            </Menu.SubmenuTrigger>
+                            <Menu.Popup className="w-72">
+                                {permissionHint !== null && <p className="px-2.5 py-2 text-xs text-text-muted">{permissionHint}</p>}
+                                <Menu.RadioGroup value={runtimeMode} onValueChange={(mode: RuntimeMode) => onMode(mode)}>
+                                    {RUNTIME_MODES.map((mode) => (
+                                        <Menu.RadioItem key={mode} value={mode} className="items-start">
+                                            {/* The hint makes the row two lines high; the box keeps the icon on the label's line. */}
+                                            <span className="grid h-lh w-4 shrink-0 place-items-center">
+                                                <Icon
+                                                    icon={MODE_ICONS[mode]}
+                                                    size={14}
+                                                    className={mode === 'full-access' ? 'text-status-needs-you' : 'text-text-faint'}
+                                                />
+                                            </span>
+                                            <span className="flex min-w-0 grow flex-col">
+                                                {t(`modes.${mode}.label`)}
+                                                <span className="text-xs text-text-faint">{t(`modes.${mode}.hint`)}</span>
+                                            </span>
+                                        </Menu.RadioItem>
+                                    ))}
+                                </Menu.RadioGroup>
+                            </Menu.Popup>
+                        </Menu.SubmenuRoot>
+                        {options.map((option) => (
+                            <OptionRow key={option.id} option={option} selection={selection} onChange={(value) => onOption(option.id, value)} />
+                        ))}
+                        {(hasContextOption || standaloneContext) && (
+                            <>
+                                <Menu.Separator />
+                                <ContextUsage usage={usage} disabled={compactDisabled} onCompact={onCompact} />
+                            </>
+                        )}
                     </>
                 )}
             </Menu.Popup>

package/src/locales/en/agent-chat.ts

@@ -439,6 +439,7 @@ export default {
             legacyGroup_one: 'Legacy models ({{count}})',
             legacyGroup_other: 'Legacy models ({{count}})',
             legacy: 'Legacy',
+            tools: 'Can use tools',
             requires: 'Requires {{cli}} {{version}} or later on {{machine}}',
             requiresHere: 'Requires {{cli}} {{version}} or later',
             providerSettings: 'Provider settings'

package/src/locales/nl/agent-chat.ts

@@ -439,6 +439,7 @@ export default {
             legacyGroup_one: 'Legacy-modellen ({{count}})',
             legacyGroup_other: 'Legacy-modellen ({{count}})',
             legacy: 'Legacy',
+            tools: 'Kan tools gebruiken',
             requires: 'Vereist {{cli}} {{version}} of nieuwer op {{machine}}',
             requiresHere: 'Vereist {{cli}} {{version}} of nieuwer',
             providerSettings: 'Providerinstellingen'