@adecore/agents-react 0.29.3 → 0.31.0

package/dist/providers/ProvidersPane.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Plus, Terminal } from 'lucide-react';
 import { AccountDot } from '../agents/AccountDot.js';
-import { ACCOUNT_TONE_CLASSES, accountName, accountsOfKind, accountStatusLine } from '../agents/accounts.js';
+import { ACCOUNT_TONE_CLASSES, accountLoginOf, accountName, accountsOfKind, accountStatusLine } from '../agents/accounts.js';
 import { ErrorBoundary, Icon, IconButton, SectionLabel, Skeleton } from '@adecore/ui';
 import { MasterDetail } from '@adecore/ui/settings';
 import { useChatHost } from '../host.js';
@@ -30,10 +30,11 @@ 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;
+    const loginOf = (kind) => accountLoginOf(accounts, kind);
     // What was picked may be gone since (an account removed elsewhere); the first CLI stands in for it.
     const pickedEntry = picked?.kind === 'account' ? (Object.hasOwn(accounts?.accounts ?? {}, picked.id) ? picked.id : null) : null;
     const current = picked !== null && (picked.kind !== 'account' || pickedEntry !== null) ? picked : installed[0] ? { kind: 'cli', cli: installed[0].kind } : null;
@@ -53,15 +54,15 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }) {
     }
     const added = (id, name, made) => {
         setPicked({ kind: 'account', id });
-        if (made && provider !== null && openLogin !== null && loginBlocked === null) {
+        if (made && provider !== null && loginOf(provider.kind) === 'terminal' && openLogin !== null && loginBlocked === null) {
             void openLogin(scopeId, provider.kind, id, name);
         }
     };
     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: loginOf(cli.kind) !== null && (_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));
+                    const status = accountStatusLine(entry.status, loginOf(cli.kind) === 'terminal');
                     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));
                 })] }, cli.kind));
     };
@@ -75,13 +76,13 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }) {
             return own;
         }
         if (current.kind === 'add') {
-            return (_jsx(AddAccountForm, { provider: provider, entries: entriesOf(provider.kind), onCancel: () => setPicked({ kind: 'cli', cli: provider.kind }), onAdded: added }, provider.kind));
+            return (_jsx(AddAccountForm, { provider: provider, entries: entriesOf(provider.kind), login: loginOf(provider.kind), onCancel: () => setPicked({ kind: 'cli', cli: provider.kind }), onAdded: added }, provider.kind));
         }
         if (current.kind === 'account') {
             const entry = entriesOf(provider.kind).find((candidate) => candidate.id === current.id);
-            return (entry && (_jsx(AccountDetail, { provider: provider, entry: entry, canLogIn: openLogin !== null && canAddAccount(provider.kind), loginBlocked: loginBlocked, secretsAvailable: accounts?.secretsAvailable === true, onRemoved: () => setPicked({ kind: 'cli', cli: provider.kind }) }, entry.id)));
+            return (entry && (_jsx(AccountDetail, { provider: provider, entry: entry, login: loginOf(provider.kind), canOpenLogin: openLogin !== null, loginBlocked: loginBlocked, secretsAvailable: accounts?.secretsAvailable === true, onRemoved: () => setPicked({ kind: 'cli', cli: provider.kind }) }, entry.id)));
         }
-        return (_jsx(CliDetail, { provider: provider, entries: accounts === null ? null : entriesOf(provider.kind), defaults: defaults, canAddAccount: canAddAccount(provider.kind), onAddAccount: () => setPicked({ kind: 'add', cli: provider.kind }), onPickAccount: (id) => setPicked({ kind: 'account', id }) }));
+        return (_jsx(CliDetail, { provider: provider, entries: accounts === null ? null : entriesOf(provider.kind), defaults: defaults, login: loginOf(provider.kind), onAddAccount: () => setPicked({ kind: 'add', cli: provider.kind }), onPickAccount: (id) => setPicked({ kind: 'account', id }) }));
     };
     return (_jsx(MasterDetail, { listWidth: 340, listLabel: t('list.label'), list: list, detail: _jsx(ErrorBoundary, { label: t('failed'), resetKeys: [scopeId, current?.kind, currentCli], children: _jsx("div", { className: "flex min-w-0 flex-col gap-7", children: detail() }) }) }));
 }

package/dist/providers/parts.js

@@ -1,16 +1,17 @@
 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'
+    copilot: 'text-chart-copilot',
+    nanogpt: 'text-chart-nanogpt'
 };
 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/dist/theme.css

@@ -13,6 +13,7 @@
     --chart-codex: #30b0c7;
     --chart-gemini: #3b82f6;
     --chart-copilot: #64748b;
+    --chart-nanogpt: #34c759;
     /* What a chat's context holds, one color per part; the rest is the system's and stays gray. */
     --chart-context-tools: #4d7ce6;
     --chart-context-files: #9a63e0;
@@ -45,6 +46,7 @@
     --chart-codex: #40c8e0;
     --chart-gemini: #60a5fa;
     --chart-copilot: #94a3b8;
+    --chart-nanogpt: #30d158;
     --chart-context-tools: #8aa7f5;
     --chart-context-files: #b98af3;
     --chart-context-conversation: #6dd08b;
@@ -82,6 +84,7 @@
     --color-chart-codex: var(--chart-codex);
     --color-chart-gemini: var(--chart-gemini);
     --color-chart-copilot: var(--chart-copilot);
+    --color-chart-nanogpt: var(--chart-nanogpt);
     --color-chart-context-tools: var(--chart-context-tools);
     --color-chart-context-files: var(--chart-context-files);
     --color-chart-context-conversation: var(--chart-context-conversation);

package/dist/usage/format.js

@@ -20,8 +20,12 @@ export function moneyFormat(currency, rate) {
         return formatMoney(value, code, value !== 0 && Math.abs(value) < 0.01 ? 4 : undefined);
     };
 }
-export const PROVIDER_LABELS = { claude: 'Claude Code', codex: 'Codex' };
-export const PROVIDER_COLORS = { claude: 'var(--chart-claude)', codex: 'var(--chart-codex)' };
+export const PROVIDER_LABELS = { claude: 'Claude Code', codex: 'Codex', nanogpt: 'NanoGPT' };
+export const PROVIDER_COLORS = {
+    claude: 'var(--chart-claude)',
+    codex: 'var(--chart-codex)',
+    nanogpt: 'var(--chart-nanogpt)'
+};
 /*
  * A slot is `2026-09-10` or `2026-09-10T14`, already in the viewer's own zone, so it is read as plain
  * wall clock and never handed to a parser that would shift it back.

package/dist/usage/limit-groups.js

@@ -76,7 +76,8 @@ export function explain(provider) {
         return i18next.t('agent-usage:limits.notInstalled');
     }
     if (provider.unavailable.reason === 'no-subscription') {
-        return i18next.t('agent-usage:limits.noSubscription');
+        // A provider that knows why it has no plan says so; the rest are accounts on an API key.
+        return provider.unavailable.message ?? i18next.t('agent-usage:limits.noSubscription');
     }
     return provider.unavailable.message ?? i18next.t('agent-usage:limits.unreachable');
 }

package/package.json

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

package/src/agents/AgentIcon.tsx

@@ -3,10 +3,11 @@ import clsx from 'clsx';
 import { Bot } from 'lucide-react';
 import { siClaude, siGithubcopilot, siGooglegemini } from 'simple-icons';
 import { Icon } from '@adecore/ui';
+import { type AgentMark, hostAgentMark } from './agent-marks';
 import { PROVIDER_PATHS } from './provider-paths';
 
 // simple-icons removed OpenAI's mark at its request, so Codex reuses the usage page's path.
-const MARKS: Partial<Record<AgentKind, { title: string; path: string }>> = {
+const BUILT_IN_MARKS: Partial<Record<AgentKind, AgentMark>> = {
     claude: siClaude,
     codex: { title: 'Codex', path: PROVIDER_PATHS.codex },
     gemini: siGooglegemini,
@@ -14,12 +15,20 @@ const MARKS: Partial<Record<AgentKind, { title: string; path: string }>> = {
 };
 
 export function AgentIcon({ kind, size = 14, className }: { kind: AgentKind; size?: number; className?: string }) {
-    const mark = MARKS[kind];
+    const mark = hostAgentMark(kind) ?? BUILT_IN_MARKS[kind];
     if (!mark) {
         return <Icon icon={Bot} size={size} className={className} />;
     }
     return (
-        <svg role="img" aria-label={mark.title} viewBox="0 0 24 24" width={size} height={size} fill="currentColor" className={clsx('align-middle', className)}>
+        <svg
+            role="img"
+            aria-label={mark.title}
+            viewBox={mark.viewBox ?? '0 0 24 24'}
+            width={size}
+            height={size}
+            fill="currentColor"
+            className={clsx('align-middle', className)}
+        >
             <path d={mark.path} />
         </svg>
     );

package/src/agents/accounts.ts

@@ -41,6 +41,19 @@ export function accountName(entry: Pick<AccountEntry, 'id' | 'account' | 'isDefa
     return entry.account.label ?? (entry.isDefault ? providerName : entry.id);
 }
 
+/*
+ * Where an account of a kind signs in: a terminal runs the CLI's login, or its first chat asks. Null for a
+ * CLI without a config folder, which has only its default account; also null until the accounts arrived.
+ */
+export type AccountLogin = 'terminal' | 'chat' | null;
+
+export function accountLoginOf(accounts: ProviderAccounts | null | undefined, kind: AgentKind): AccountLogin {
+    if (accounts?.loginCommands?.[kind] !== undefined) {
+        return 'terminal';
+    }
+    return accounts?.chatLogins?.includes(kind) === true ? 'chat' : null;
+}
+
 export type AccountTone = 'muted' | 'needs-you' | 'error';
 
 export const ACCOUNT_TONE_CLASSES: Record<AccountTone, string> = {

package/src/agents/agent-marks.ts

@@ -0,0 +1,26 @@
+import type { AgentKind } from '@adecore/agent-contracts';
+
+/* A CLI's mark, drawn in the current text color. */
+export interface AgentMark {
+    /* Read by a screen reader. */
+    title: string;
+    /* The `d` of one SVG path; several shapes go in one path. */
+    path: string;
+    /* `0 0 24 24` when absent. */
+    viewBox?: string;
+}
+
+let hostMarks: Readonly<Partial<Record<AgentKind, AgentMark>>> = {};
+
+/*
+ * The marks of the kinds a host adds, and any it draws differently, set once before the first render. Every
+ * place the shared UI draws an agent's mark reads them; a kind with none keeps the built-in mark or the robot.
+ * A later call replaces the whole set.
+ */
+export function configureAgentMarks(marks: Readonly<Partial<Record<AgentKind, AgentMark>>>): void {
+    hostMarks = { ...marks };
+}
+
+export function hostAgentMark(kind: AgentKind): AgentMark | undefined {
+    return hostMarks[kind];
+}

package/src/agents/provider-paths.ts

@@ -1,10 +1,11 @@
 import type { UsageProvider } from '@adecore/agent-contracts';
 
 /*
- * The marks of Anthropic and OpenAI. Lucide has no brand marks, so these are the icon rule's
+ * The marks of Anthropic and OpenAI, and a monogram for a provider with no mark of its own. Lucide has no brand marks, so these are the icon rule's
  * exception for provider marks. One path each, in `currentColor`, so a row decides how loud the logo is.
  */
 export const PROVIDER_PATHS: Record<UsageProvider, string> = {
     claude: 'M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.377-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.048.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.607.212-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.914-1.316-.012.01z',
-    codex: 'M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.554 5.554 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.019.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.001zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z'
+    codex: 'M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.554 5.554 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.019.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.001zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z',
+    nanogpt: 'M5 20V4h2.6l8.8 11.2V4H19v16h-2.6L7.6 8.8V20z'
 };

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/index.ts

@@ -37,6 +37,7 @@ export {
     isConnectionError
 } from './transport';
 export { portTransport, type PortTransport } from './port-transport';
+export { configureAgentMarks, type AgentMark } from './agents/agent-marks';
 export { configureChatStorage, type ChatStorageRecord, type ChatStorageAdapter, type ChatStorageOptions } from './storage';
 export { setLazyPrefetch, onLazyOpenError } from './lazy';
 export { type MountedEntry, MountedRegistry } from './mounted-registry';

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/en/agent-providers.ts

@@ -65,7 +65,9 @@ export default {
             signedOut: 'Not logged in',
             signedOutDetail: "Opens a terminal that runs the CLI's login with this folder.",
             logIn: 'Log in',
-            logInAgain: 'Log in again'
+            logInAgain: 'Log in again',
+            inChat: 'Logs in from a chat',
+            inChatDetail: 'The first chat on this account asks you to log in, and the CLI keeps that login in this folder.'
         },
         folder: {
             label: 'Folder',
@@ -106,6 +108,7 @@ export default {
     add: {
         title: 'Add a {{provider}} account',
         description: 'Ruimte makes a folder for it on the machine, then opens a terminal where you log in.',
+        chatDescription: 'A folder is made for it on the machine. The first chat on it asks you to log in.',
         name: 'Name',
         namePlaceholder: 'Work',
         color: 'Color',

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/locales/nl/agent-providers.ts

@@ -65,7 +65,9 @@ export default {
             signedOut: 'Niet ingelogd',
             signedOutDetail: 'Opent een terminal die de login van de CLI met deze map draait.',
             logIn: 'Inloggen',
-            logInAgain: 'Opnieuw inloggen'
+            logInAgain: 'Opnieuw inloggen',
+            inChat: 'Logt in vanuit een chat',
+            inChatDetail: 'De eerste chat op dit account vraagt je in te loggen, en de CLI bewaart die login in deze map.'
         },
         folder: {
             label: 'Map',
@@ -106,6 +108,7 @@ export default {
     add: {
         title: 'Een {{provider}}-account toevoegen',
         description: 'Ruimte maakt er een map voor op de machine en opent dan een terminal waarin je inlogt.',
+        chatDescription: 'Er komt een map voor op de machine. De eerste chat erop vraagt je in te loggen.',
         name: 'Naam',
         namePlaceholder: 'Werk',
         color: 'Kleur',