@adecore/agents-react 0.29.2 → 0.30.0

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

@@ -1,4 +1,5 @@
-import type { ModelInfo, ProviderInfo } from '@adecore/agent-contracts';
+import type { AgentKind, ModelInfo, ProviderInfo } from '@adecore/agent-contracts';
+export declare const COMPACT_MODEL_LIMIT = 8;
 export type PickerEntry = {
     kind: 'model';
     provider: ProviderInfo;
@@ -6,5 +7,14 @@ export type PickerEntry = {
 } | {
     kind: 'legacy';
     count: number;
+} | {
+    kind: 'all';
+    provider: ProviderInfo;
+    count: number;
+    open: boolean;
 };
-export declare function pickerEntriesOf(providers: readonly ProviderInfo[], query: string, legacyOpen: boolean): PickerEntry[];
+export interface PickerCurrent {
+    provider: AgentKind;
+    model: string;
+}
+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

@@ -1,17 +1,51 @@
+/*
+ * A provider with more live models than this keeps the list short: the model that is picked and the default,
+ * with the rest behind one row that opens all of them. A list of three hundred models is not one to scroll.
+ */
+export const COMPACT_MODEL_LIMIT = 8;
 function matches(model, query) {
-    return model.name.toLowerCase().includes(query) || model.slug.toLowerCase().includes(query);
+    return model.name.toLowerCase().includes(query) || model.slug.toLowerCase().includes(query) || (model.vendor?.toLowerCase().includes(query) ?? false);
+}
+/*
+ * 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) {
+    if (!models.some((model) => model.vendor !== undefined)) {
+        return models;
+    }
+    return [...models].sort((a, b) => {
+        if (a.vendor === undefined || b.vendor === undefined) {
+            return a.vendor === b.vendor ? 0 : a.vendor === undefined ? 1 : -1;
+        }
+        return (a.vendor.localeCompare(b.vendor, undefined, { sensitivity: 'base' }) ||
+            a.name.localeCompare(b.name, undefined, { sensitivity: 'base', numeric: true }));
+    });
 }
+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
- * only that model still finds the row that explains why it cannot be picked.
+ * only that model still finds the row that explains why it cannot be picked. A search looks through
+ * every model of every provider; without one, a provider with many models shows a short list and a row
+ * that opens the rest, grouped by maker.
  */
-export function pickerEntriesOf(providers, query, legacyOpen) {
-    const rows = providers.flatMap((entry) => entry.models.map((model) => ({ kind: 'model', provider: entry, model })));
+export function pickerEntriesOf(providers, query, legacyOpen, expanded = NONE, current = null) {
+    const rowsOf = (entry, models) => byVendor(models).map((model) => ({ kind: 'model', provider: entry, model }));
     if (query !== '') {
-        return rows.filter((row) => matches(row.model, query));
+        return providers.flatMap((entry) => rowsOf(entry, entry.models.filter((model) => matches(model, query))));
     }
-    const live = rows.filter((row) => !row.model.legacy);
-    const legacy = rows.filter((row) => row.model.legacy);
+    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) {
+            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) {
         return live;
     }

package/dist/chat/ui/Pickers.js

@@ -24,6 +24,7 @@ export function ModelPicker({ providers, provider, selection, open, onOpenChange
     const { t } = useTranslation('agent-chat');
     const [query, setQuery] = useState('');
     const [legacyOpen, setLegacyOpen] = useState(false);
+    const [expanded, setExpanded] = useState(new Set());
     const [index, setIndex] = useState(0);
     const inputRef = useRef(null);
     const listRef = useRef(null);
@@ -32,7 +33,7 @@ export function ModelPicker({ providers, provider, selection, open, onOpenChange
     const chip = agentChipOf(providers, provider, selection.model);
     const grouped = providers.length > 1;
     const trimmed = query.trim().toLowerCase();
-    const entries = useMemo(() => pickerEntriesOf(providers, trimmed, legacyOpen), [providers, trimmed, legacyOpen]);
+    const entries = useMemo(() => pickerEntriesOf(providers, trimmed, legacyOpen, expanded, { provider, model: selection.model }), [providers, trimmed, legacyOpen, expanded, provider, selection.model]);
     const scope = useContext(ChatScopeContext);
     const machine = host.useMachineLabel(scope?.id ?? '');
     const reported = useReportedModels(provider);
@@ -44,6 +45,7 @@ export function ModelPicker({ providers, provider, selection, open, onOpenChange
         if (!next) {
             setQuery('');
             setLegacyOpen(false);
+            setExpanded(new Set());
         }
         setIndex(0);
         onOpenChange(next);
@@ -61,6 +63,18 @@ export function ModelPicker({ providers, provider, selection, open, onOpenChange
             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;
         }
@@ -85,16 +99,30 @@ export function ModelPicker({ providers, provider, selection, open, onOpenChange
                                     setQuery(e.target.value);
                                     setIndex(0);
                                 }, onKeyDown: onKeyDown })] }), _jsxs("div", { ref: listRef, className: "max-h-72 overflow-auto p-1", role: "listbox", children: [entries.length === 0 && (_jsx("div", { className: "px-3 py-6 text-center text-xs text-text-faint", children: providers.length === 0 ? t('pickers.model.noProvider') : t('pickers.model.noMatch') })), entries.map((entry, i) => {
+                                if (entry.kind === 'all') {
+                                    const before = entries[i - 1];
+                                    const header = grouped && (before === undefined || before.kind === 'legacy' || before.provider.kind !== entry.provider.kind);
+                                    return (_jsxs("div", { children: [header && (_jsxs(Menu.Label, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.provider.kind, size: 12 }), entry.provider.name] })), _jsxs("button", { "data-active": i === index, "aria-expanded": entry.open, className: "cursor-row flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-xs text-text-muted", onMouseEnter: () => setIndex(i), onClick: () => choose(entry), children: [_jsx(Icon, { icon: entry.open ? ChevronDown : ChevronRight, size: 12 }), t('pickers.model.allGroup', { count: entry.count })] })] }, `all-${entry.provider.kind}`));
+                                }
                                 if (entry.kind === 'legacy') {
                                     return (_jsxs("button", { "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-xs text-text-faint", onMouseEnter: () => setIndex(i), onClick: () => choose(entry), children: [_jsx(Icon, { icon: legacyOpen ? ChevronDown : ChevronRight, size: 12 }), t('pickers.model.legacyGroup', { count: entry.count })] }, "legacy"));
                                 }
                                 const previous = entries[i - 1];
-                                const first = grouped && (previous === undefined || previous.kind !== 'model' || previous.provider.kind !== entry.provider.kind);
+                                // 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);
+                                const vendorFirst = vendorOpen &&
+                                    entry.model.vendor !== undefined &&
+                                    (previous === undefined ||
+                                        previous.kind !== 'model' ||
+                                        previous.provider.kind !== entry.provider.kind ||
+                                        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;
-                                return (_jsxs("div", { children: [first && (_jsxs(Menu.Label, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.provider.kind, size: 12 }), entry.provider.name] })), _jsxs("button", { role: "option", "aria-selected": chosen, "aria-disabled": requirement !== null || undefined, "data-active": i === index, className: `cursor-row flex w-full flex-col items-stretch gap-0.5 rounded-md px-2.5 py-1.5 text-left text-sm ${requirement === null ? 'text-text-muted' : 'text-text-faint'}`, onMouseEnter: () => setIndex(i), onClick: () => choose(entry), children: [_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx(Menu.Check, { kind: "radio", checked: chosen }), _jsx("span", { className: "min-w-0 truncate", children: entry.model.name }), entry.model.badge && (_jsx(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 }), 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
                                                         ? 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/rows/row-rhythm.js

@@ -4,12 +4,13 @@ import { isBlock } from '../../logic/timeline.js';
 export const FOLLOW_THRESHOLD_PX = 40;
 /*
  * The gaps a row wears for where it sits: a question is followed by its answer gap, and a seam where
- * the list rhythm of tool lines meets the block rhythm of prose gets the block gap. A question
+ * the list rhythm of tool lines meets the block rhythm of prose gets the block gap. A visual has no
+ * margin of its own like prose does, so the row under one takes the block gap too. A question
  * already carries the gap before it, and the row after one is the answer, so neither takes a seam.
  */
 export function rowRhythm(row, previous) {
     const question = row.kind === 'user';
-    const seam = !question && previous !== null && previous.kind !== 'user' && isBlock(row) !== isBlock(previous);
+    const seam = !question && previous !== null && previous.kind !== 'user' && (isBlock(row) !== isBlock(previous) || previous.kind === 'visual');
     return clsx(question && 'pb-(--chat-answer-gap)', seam && 'pt-(--chat-block-gap)');
 }
 /*

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

@@ -434,6 +434,8 @@ declare const _default: {
             search: string;
             noProvider: string;
             noMatch: string;
+            allGroup_one: string;
+            allGroup_other: string;
             legacyGroup_one: string;
             legacyGroup_other: string;
             legacy: string;

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

@@ -434,6 +434,8 @@ export default {
             search: 'Search models',
             noProvider: 'No chat provider installed',
             noMatch: 'No models match',
+            allGroup_one: 'Models ({{count}})',
+            allGroup_other: 'Models ({{count}})',
             legacyGroup_one: 'Legacy models ({{count}})',
             legacyGroup_other: 'Legacy models ({{count}})',
             legacy: 'Legacy',

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

@@ -434,6 +434,8 @@ declare const _default: {
             search: string;
             noProvider: string;
             noMatch: string;
+            allGroup_one: string;
+            allGroup_other: string;
             legacyGroup_one: string;
             legacyGroup_other: string;
             legacy: string;

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

@@ -434,6 +434,8 @@ export default {
             search: 'Modellen zoeken',
             noProvider: 'Geen chat-CLI geïnstalleerd',
             noMatch: 'Geen modellen gevonden',
+            allGroup_one: 'Modellen ({{count}})',
+            allGroup_other: 'Modellen ({{count}})',
             legacyGroup_one: 'Legacy-modellen ({{count}})',
             legacyGroup_other: 'Legacy-modellen ({{count}})',
             legacy: 'Legacy',

package/dist/providers/ProvidersPane.js

@@ -30,8 +30,9 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }) {
     const { openLogin } = host;
     const loginBlocked = host.useLoginBlocked(scopeId);
     const [picked, setPicked] = useState(() => (target === 'providers.apple' ? { kind: 'cli', cli: 'apple' } : null));
-    const installed = useMemo(() => providers.filter((provider) => provider.installed || provider.kind === 'apple'), [providers]);
-    const missing = useMemo(() => providers.filter((provider) => !provider.installed && provider.kind !== 'apple'), [providers]);
+    // A provider that never runs in a terminal is no CLI to install: it is turned on in its own detail, so it is always listed.
+    const installed = useMemo(() => providers.filter((provider) => provider.installed || !provider.capabilities.terminal), [providers]);
+    const missing = useMemo(() => providers.filter((provider) => !provider.installed && provider.capabilities.terminal), [providers]);
     const entriesOf = (kind) => accountsOfKind(accounts, kind);
     const canAddAccount = (kind) => accounts?.loginCommands?.[kind] !== undefined;
     // What was picked may be gone since (an account removed elsewhere); the first CLI stands in for it.
@@ -59,7 +60,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }) {
     };
     const group = (cli) => {
         const entries = cli.installed ? entriesOf(cli.kind) : [];
-        return (_jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-0.5 pt-1", children: [_jsxs(ListRow, { selected: current?.kind === 'cli' && current.cli === cli.kind, onSelect: () => setPicked({ kind: 'cli', cli: cli.kind }), className: "pr-1", trailing: canAddAccount(cli.kind) && (_jsx(IconButton, { icon: Plus, size: "sm", label: t('list.addAccount', { provider: cli.name }), onClick: () => setPicked({ kind: 'add', cli: cli.kind }) })), children: [_jsx(CliMark, { kind: cli.kind }), _jsx("span", { className: "min-w-0 grow truncate text-xs font-medium text-text", children: cli.name }), cli.kind !== 'apple' && cli.version && _jsx("span", { className: "shrink-0 font-mono text-code text-text-faint", children: cli.version })] }), entries.map((entry) => {
+        return (_jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-0.5 pt-1", children: [_jsxs(ListRow, { selected: current?.kind === 'cli' && current.cli === cli.kind, onSelect: () => setPicked({ kind: 'cli', cli: cli.kind }), className: "pr-1", trailing: canAddAccount(cli.kind) && (_jsx(IconButton, { icon: Plus, size: "sm", label: t('list.addAccount', { provider: cli.name }), onClick: () => setPicked({ kind: 'add', cli: cli.kind }) })), children: [_jsx(CliMark, { kind: cli.kind }), _jsx("span", { className: "min-w-0 grow truncate text-xs font-medium text-text", children: cli.name }), cli.capabilities.terminal && cli.version && _jsx("span", { className: "shrink-0 font-mono text-code text-text-faint", children: cli.version })] }), entries.map((entry) => {
                     const name = accountName(entry, cli.name);
                     const status = accountStatusLine(entry.status, canAddAccount(cli.kind));
                     return (_jsxs(ListRow, { selected: current?.kind === 'account' && current.id === entry.id, onSelect: () => setPicked({ kind: 'account', id: entry.id }), children: [_jsx("span", { className: "grid w-3.5 shrink-0 place-items-center", children: _jsx(AccountDot, { color: entry.account.color, className: "size-2.25" }) }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2 text-sm text-text", children: [_jsx("span", { className: "truncate", children: name }), entry.isDefault && (_jsx("span", { className: "shrink-0 rounded-md bg-surface-active px-1.5 text-xs text-text-muted", children: t('list.default') }))] }), _jsx("span", { className: clsx('truncate text-xs', ACCOUNT_TONE_CLASSES[status.tone]), children: status.text })] })] }, entry.id));

package/dist/providers/parts.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { AgentIcon } from '../agents/AgentIcon.js';
-// Each CLI in its color of the usage charts, so a mark here reads as the same CLI there.
+// Each CLI in its color of the usage charts, so a mark here reads as the same CLI there. A CLI without
+// a chart color of its own is muted.
 const CLI_COLORS = {
-    apple: 'text-text-muted',
     claude: 'text-chart-claude',
     codex: 'text-chart-codex',
     gemini: 'text-chart-gemini',
     copilot: 'text-chart-copilot'
 };
 export function CliMark({ kind, size = 14, className }) {
-    return _jsx(AgentIcon, { kind: kind, size: size, className: clsx('shrink-0', CLI_COLORS[kind], className) });
+    return _jsx(AgentIcon, { kind: kind, size: size, className: clsx('shrink-0', CLI_COLORS[kind] ?? 'text-text-muted', className) });
 }
 /* As tall as the title's first line, so the mark sits beside the name rather than between the two lines. */
 export function CliTile({ kind }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.29.2",
+  "version": "0.30.0",
   "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.29.2",
-    "@adecore/editor": "0.29.2",
-    "@adecore/editor-react": "0.29.2",
-    "@adecore/intelligent-ui": "0.29.2",
-    "@adecore/merge": "0.29.2",
+    "@adecore/agent-contracts": "0.30.0",
+    "@adecore/editor": "0.30.0",
+    "@adecore/editor-react": "0.30.0",
+    "@adecore/intelligent-ui": "0.30.0",
+    "@adecore/merge": "0.30.0",
     "@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.29.2",
+    "@adecore/ui": "^0.30.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.29.2",
+    "@adecore/ui": "0.30.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

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

@@ -1,23 +1,83 @@
-import type { ModelInfo, ProviderInfo } from '@adecore/agent-contracts';
+import type { AgentKind, ModelInfo, ProviderInfo } from '@adecore/agent-contracts';
 
-/* A model row, or the one row that folds the legacy models open. Both take a turn in the arrow keys. */
-export type PickerEntry = { kind: 'model'; provider: ProviderInfo; model: ModelInfo } | { kind: 'legacy'; count: number };
+/*
+ * A provider with more live models than this keeps the list short: the model that is picked and the default,
+ * with the rest behind one row that opens all of them. A list of three hundred models is not one to scroll.
+ */
+export const COMPACT_MODEL_LIMIT = 8;
+
+/* A model row, or a row that folds more models open: one provider's models, or the legacy ones. All of them take a turn in the arrow keys. */
+export type PickerEntry =
+    | { kind: 'model'; provider: ProviderInfo; model: ModelInfo }
+    | { kind: 'legacy'; count: number }
+    | { kind: 'all'; provider: ProviderInfo; count: number; open: boolean };
+
+export interface PickerCurrent {
+    provider: AgentKind;
+    model: string;
+}
 
 function matches(model: ModelInfo, query: string): boolean {
-    return model.name.toLowerCase().includes(query) || model.slug.toLowerCase().includes(query);
+    return model.name.toLowerCase().includes(query) || model.slug.toLowerCase().includes(query) || (model.vendor?.toLowerCase().includes(query) ?? false);
 }
 
+/*
+ * 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[] {
+    if (!models.some((model) => model.vendor !== undefined)) {
+        return models;
+    }
+    return [...models].sort((a, b) => {
+        if (a.vendor === undefined || b.vendor === undefined) {
+            return a.vendor === b.vendor ? 0 : a.vendor === undefined ? 1 : -1;
+        }
+        return (
+            a.vendor.localeCompare(b.vendor, undefined, { sensitivity: 'base' }) ||
+            a.name.localeCompare(b.name, undefined, { sensitivity: 'base', numeric: true })
+        );
+    });
+}
+
+const NONE: ReadonlySet<AgentKind> = 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
- * only that model still finds the row that explains why it cannot be picked.
+ * only that model still finds the row that explains why it cannot be picked. A search looks through
+ * every model of every provider; without one, a provider with many models shows a short list and a row
+ * that opens the rest, grouped by maker.
  */
-export function pickerEntriesOf(providers: readonly ProviderInfo[], query: string, legacyOpen: boolean): PickerEntry[] {
-    const rows = providers.flatMap((entry) => entry.models.map((model) => ({ kind: 'model' as const, provider: entry, model })));
+export function pickerEntriesOf(
+    providers: readonly ProviderInfo[],
+    query: string,
+    legacyOpen: boolean,
+    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 }));
     if (query !== '') {
-        return rows.filter((row) => matches(row.model, query));
+        return providers.flatMap((entry) =>
+            rowsOf(
+                entry,
+                entry.models.filter((model) => matches(model, query))
+            )
+        );
     }
-    const live = rows.filter((row) => !row.model.legacy);
-    const legacy = rows.filter((row) => row.model.legacy);
+    const legacy = providers.flatMap((entry) =>
+        entry.models.filter((model) => model.legacy).map((model) => ({ kind: 'model' as const, provider: entry, model }))
+    );
+    const live = providers.flatMap((entry): PickerEntry[] => {
+        const models = entry.models.filter((model) => !model.legacy);
+        if (models.length <= COMPACT_MODEL_LIMIT) {
+            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) {
         return live;
     }

package/src/chat/ui/Pickers.tsx

@@ -62,6 +62,7 @@ export function ModelPicker({
     const { t } = useTranslation('agent-chat');
     const [query, setQuery] = useState('');
     const [legacyOpen, setLegacyOpen] = useState(false);
+    const [expanded, setExpanded] = useState<ReadonlySet<AgentKind>>(new Set());
     const [index, setIndex] = useState(0);
     const inputRef = useRef<HTMLInputElement>(null);
     const listRef = useRef<HTMLDivElement>(null);
@@ -72,7 +73,10 @@ export function ModelPicker({
     const grouped = providers.length > 1;
     const trimmed = query.trim().toLowerCase();
 
-    const entries = useMemo(() => pickerEntriesOf(providers, trimmed, legacyOpen), [providers, trimmed, legacyOpen]);
+    const entries = useMemo(
+        () => pickerEntriesOf(providers, trimmed, legacyOpen, expanded, { provider, model: selection.model }),
+        [providers, trimmed, legacyOpen, expanded, provider, selection.model]
+    );
     const scope = useContext(ChatScopeContext);
     const machine = host.useMachineLabel(scope?.id ?? '');
     const reported = useReportedModels(provider);
@@ -85,6 +89,7 @@ export function ModelPicker({
         if (!next) {
             setQuery('');
             setLegacyOpen(false);
+            setExpanded(new Set());
         }
         setIndex(0);
         onOpenChange(next);
@@ -104,6 +109,18 @@ export function ModelPicker({
             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;
         }
@@ -165,6 +182,30 @@ export function ModelPicker({
                         </div>
                     )}
                     {entries.map((entry, i) => {
+                        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}`}>
+                                    {header && (
+                                        <Menu.Label className="flex items-center gap-1.5">
+                                            <AgentIcon kind={entry.provider.kind} size={12} />
+                                            {entry.provider.name}
+                                        </Menu.Label>
+                                    )}
+                                    <button
+                                        data-active={i === index}
+                                        aria-expanded={entry.open}
+                                        className="cursor-row flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-xs text-text-muted"
+                                        onMouseEnter={() => setIndex(i)}
+                                        onClick={() => choose(entry)}
+                                    >
+                                        <Icon icon={entry.open ? ChevronDown : ChevronRight} size={12} />
+                                        {t('pickers.model.allGroup', { count: entry.count })}
+                                    </button>
+                                </div>
+                            );
+                        }
                         if (entry.kind === 'legacy') {
                             return (
                                 <button
@@ -180,7 +221,17 @@ export function ModelPicker({
                             );
                         }
                         const previous = entries[i - 1];
-                        const first = grouped && (previous === undefined || previous.kind !== 'model' || previous.provider.kind !== entry.provider.kind);
+                        // 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);
+                        const vendorFirst =
+                            vendorOpen &&
+                            entry.model.vendor !== undefined &&
+                            (previous === undefined ||
+                                previous.kind !== 'model' ||
+                                previous.provider.kind !== entry.provider.kind ||
+                                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;
@@ -193,6 +244,7 @@ export function ModelPicker({
                                         {entry.provider.name}
                                     </Menu.Label>
                                 )}
+                                {vendorFirst && <Menu.Label>{entry.model.vendor}</Menu.Label>}
                                 <button
                                     role="option"
                                     aria-selected={chosen}

package/src/chat/ui/rows/row-rhythm.ts

@@ -7,12 +7,13 @@ export const FOLLOW_THRESHOLD_PX = 40;
 
 /*
  * The gaps a row wears for where it sits: a question is followed by its answer gap, and a seam where
- * the list rhythm of tool lines meets the block rhythm of prose gets the block gap. A question
+ * the list rhythm of tool lines meets the block rhythm of prose gets the block gap. A visual has no
+ * margin of its own like prose does, so the row under one takes the block gap too. A question
  * already carries the gap before it, and the row after one is the answer, so neither takes a seam.
  */
 export function rowRhythm(row: TimelineRow, previous: TimelineRow | null): string {
     const question = row.kind === 'user';
-    const seam = !question && previous !== null && previous.kind !== 'user' && isBlock(row) !== isBlock(previous);
+    const seam = !question && previous !== null && previous.kind !== 'user' && (isBlock(row) !== isBlock(previous) || previous.kind === 'visual');
     return clsx(question && 'pb-(--chat-answer-gap)', seam && 'pt-(--chat-block-gap)');
 }
 

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

@@ -434,6 +434,8 @@ export default {
             search: 'Search models',
             noProvider: 'No chat provider installed',
             noMatch: 'No models match',
+            allGroup_one: 'Models ({{count}})',
+            allGroup_other: 'Models ({{count}})',
             legacyGroup_one: 'Legacy models ({{count}})',
             legacyGroup_other: 'Legacy models ({{count}})',
             legacy: 'Legacy',

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

@@ -434,6 +434,8 @@ export default {
             search: 'Modellen zoeken',
             noProvider: 'Geen chat-CLI geïnstalleerd',
             noMatch: 'Geen modellen gevonden',
+            allGroup_one: 'Modellen ({{count}})',
+            allGroup_other: 'Modellen ({{count}})',
             legacyGroup_one: 'Legacy-modellen ({{count}})',
             legacyGroup_other: 'Legacy-modellen ({{count}})',
             legacy: 'Legacy',

package/src/providers/ProvidersPane.tsx

@@ -68,8 +68,9 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
     const loginBlocked = host.useLoginBlocked(scopeId);
     const [picked, setPicked] = useState<Picked | null>(() => (target === 'providers.apple' ? { kind: 'cli', cli: 'apple' } : null));
 
-    const installed = useMemo(() => providers.filter((provider) => provider.installed || provider.kind === 'apple'), [providers]);
-    const missing = useMemo(() => providers.filter((provider) => !provider.installed && provider.kind !== 'apple'), [providers]);
+    // A provider that never runs in a terminal is no CLI to install: it is turned on in its own detail, so it is always listed.
+    const installed = useMemo(() => providers.filter((provider) => provider.installed || !provider.capabilities.terminal), [providers]);
+    const missing = useMemo(() => providers.filter((provider) => !provider.installed && provider.capabilities.terminal), [providers]);
     const entriesOf = (kind: AgentKind): AccountEntry[] => accountsOfKind(accounts, kind);
     const canAddAccount = (kind: AgentKind): boolean => accounts?.loginCommands?.[kind] !== undefined;
 
@@ -120,7 +121,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
                 >
                     <CliMark kind={cli.kind} />
                     <span className="min-w-0 grow truncate text-xs font-medium text-text">{cli.name}</span>
-                    {cli.kind !== 'apple' && cli.version && <span className="shrink-0 font-mono text-code text-text-faint">{cli.version}</span>}
+                    {cli.capabilities.terminal && cli.version && <span className="shrink-0 font-mono text-code text-text-faint">{cli.version}</span>}
                 </ListRow>
                 {entries.map((entry) => {
                     const name = accountName(entry, cli.name);

package/src/providers/parts.tsx

@@ -2,9 +2,9 @@ import clsx from 'clsx';
 import type { AgentKind } from '@adecore/agent-contracts';
 import { AgentIcon } from '../agents/AgentIcon';
 
-// Each CLI in its color of the usage charts, so a mark here reads as the same CLI there.
-const CLI_COLORS: Record<AgentKind, string> = {
-    apple: 'text-text-muted',
+// Each CLI in its color of the usage charts, so a mark here reads as the same CLI there. A CLI without
+// a chart color of its own is muted.
+const CLI_COLORS: Partial<Record<AgentKind, string>> = {
     claude: 'text-chart-claude',
     codex: 'text-chart-codex',
     gemini: 'text-chart-gemini',
@@ -12,7 +12,7 @@ const CLI_COLORS: Record<AgentKind, string> = {
 };
 
 export function CliMark({ kind, size = 14, className }: { kind: AgentKind; size?: number; className?: string }) {
-    return <AgentIcon kind={kind} size={size} className={clsx('shrink-0', CLI_COLORS[kind], className)} />;
+    return <AgentIcon kind={kind} size={size} className={clsx('shrink-0', CLI_COLORS[kind] ?? 'text-text-muted', className)} />;
 }
 
 /* As tall as the title's first line, so the mark sits beside the name rather than between the two lines. */