@adecore/agents-react 0.29.3 → 0.31.0

package/dist/agents/AgentIcon.js

@@ -3,18 +3,19 @@ import clsx from 'clsx';
 import { Bot } from 'lucide-react';
 import { siClaude, siGithubcopilot, siGooglegemini } from 'simple-icons';
 import { Icon } from '@adecore/ui';
+import { hostAgentMark } from './agent-marks.js';
 import { PROVIDER_PATHS } from './provider-paths.js';
 // simple-icons removed OpenAI's mark at its request, so Codex reuses the usage page's path.
-const MARKS = {
+const BUILT_IN_MARKS = {
     claude: siClaude,
     codex: { title: 'Codex', path: PROVIDER_PATHS.codex },
     gemini: siGooglegemini,
     copilot: siGithubcopilot
 };
 export function AgentIcon({ kind, size = 14, className }) {
-    const mark = MARKS[kind];
+    const mark = hostAgentMark(kind) ?? BUILT_IN_MARKS[kind];
     if (!mark) {
         return _jsx(Icon, { icon: Bot, size: size, className: className });
     }
-    return (_jsx("svg", { role: "img", "aria-label": mark.title, viewBox: "0 0 24 24", width: size, height: size, fill: "currentColor", className: clsx('align-middle', className), children: _jsx("path", { d: mark.path }) }));
+    return (_jsx("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), children: _jsx("path", { d: mark.path }) }));
 }

package/dist/agents/accounts.d.ts

@@ -10,6 +10,8 @@ export interface AccountEntry {
 }
 export declare function accountsOfKind(accounts: ProviderAccounts | null, kind: AgentKind): AccountEntry[];
 export declare function accountName(entry: Pick<AccountEntry, 'id' | 'account' | 'isDefault'>, providerName: string): string;
+export type AccountLogin = 'terminal' | 'chat' | null;
+export declare function accountLoginOf(accounts: ProviderAccounts | null | undefined, kind: AgentKind): AccountLogin;
 export type AccountTone = 'muted' | 'needs-you' | 'error';
 export declare const ACCOUNT_TONE_CLASSES: Record<AccountTone, string>;
 export declare function accountStatusLine(status: ProviderAccountStatus | null, canLogIn: boolean): {

package/dist/agents/accounts.js

@@ -26,6 +26,12 @@ export function accountsOfKind(accounts, kind) {
 export function accountName(entry, providerName) {
     return entry.account.label ?? (entry.isDefault ? providerName : entry.id);
 }
+export function accountLoginOf(accounts, kind) {
+    if (accounts?.loginCommands?.[kind] !== undefined) {
+        return 'terminal';
+    }
+    return accounts?.chatLogins?.includes(kind) === true ? 'chat' : null;
+}
 export const ACCOUNT_TONE_CLASSES = {
     muted: 'text-text-muted',
     'needs-you': 'text-status-needs-you',

package/dist/agents/agent-marks.d.ts

@@ -0,0 +1,8 @@
+import type { AgentKind } from '@adecore/agent-contracts';
+export interface AgentMark {
+    title: string;
+    path: string;
+    viewBox?: string;
+}
+export declare function configureAgentMarks(marks: Readonly<Partial<Record<AgentKind, AgentMark>>>): void;
+export declare function hostAgentMark(kind: AgentKind): AgentMark | undefined;

package/dist/agents/agent-marks.js

@@ -0,0 +1,12 @@
+let hostMarks = {};
+/*
+ * 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) {
+    hostMarks = { ...marks };
+}
+export function hostAgentMark(kind) {
+    return hostMarks[kind];
+}

package/dist/agents/provider-paths.js

@@ -1,8 +1,9 @@
 /*
- * 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 = {
     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/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/index.d.ts

@@ -2,6 +2,7 @@ export { type ChatActions, type FileRef, type ShellCodeBlockContext, type ChatPl
 export { type ChatScope, ChatScopeContext, useChatScope } from './scope.js';
 export { type ChatRequestMap, type ChatEventMap, type ChatTransportStatus, type ChatTransport, ChatTransportError, errorCode, isConnectionError } from './transport.js';
 export { portTransport, type PortTransport } from './port-transport.js';
+export { configureAgentMarks, type AgentMark } from './agents/agent-marks.js';
 export { configureChatStorage, type ChatStorageRecord, type ChatStorageAdapter, type ChatStorageOptions } from './storage.js';
 export { setLazyPrefetch, onLazyOpenError } from './lazy.js';
 export { type MountedEntry, MountedRegistry } from './mounted-registry.js';

package/dist/index.js

@@ -3,6 +3,7 @@ export { ChatHostProvider, useChatHost } from './host.js';
 export { ChatScopeContext, useChatScope } from './scope.js';
 export { ChatTransportError, errorCode, isConnectionError } from './transport.js';
 export { portTransport } from './port-transport.js';
+export { configureAgentMarks } from './agents/agent-marks.js';
 export { configureChatStorage } from './storage.js';
 export { setLazyPrefetch, onLazyOpenError } from './lazy.js';
 export { MountedRegistry } from './mounted-registry.js';

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

@@ -66,6 +66,8 @@ declare const _default: {
             signedOutDetail: string;
             logIn: string;
             logInAgain: string;
+            inChat: string;
+            inChatDetail: string;
         };
         folder: {
             label: string;
@@ -106,6 +108,7 @@ declare const _default: {
     add: {
         title: string;
         description: string;
+        chatDescription: string;
         name: string;
         namePlaceholder: string;
         color: string;

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

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

@@ -66,6 +66,8 @@ declare const _default: {
             signedOutDetail: string;
             logIn: string;
             logInAgain: string;
+            inChat: string;
+            inChatDetail: string;
         };
         folder: {
             label: string;
@@ -106,6 +108,7 @@ declare const _default: {
     add: {
         title: string;
         description: string;
+        chatDescription: string;
         name: string;
         namePlaceholder: string;
         color: string;

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

@@ -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',

package/dist/providers/AccountDetail.d.ts

@@ -1,12 +1,13 @@
 import type { ProviderInfo } from '@adecore/agent-contracts';
-import { type AccountEntry } from '../agents/accounts.js';
+import { type AccountEntry, type AccountLogin } from '../agents/accounts.js';
 interface AccountDetailProps {
     provider: ProviderInfo;
     entry: AccountEntry;
-    canLogIn: boolean;
+    login: AccountLogin;
+    canOpenLogin: boolean;
     loginBlocked: string | null;
     secretsAvailable: boolean;
     onRemoved(): void;
 }
-export declare function AccountDetail({ provider, entry, canLogIn, loginBlocked, secretsAvailable, onRemoved }: AccountDetailProps): import("react").JSX.Element;
+export declare function AccountDetail({ provider, entry, login, canOpenLogin, loginBlocked, secretsAvailable, onRemoved }: AccountDetailProps): import("react").JSX.Element;
 export {};

package/dist/providers/AccountDetail.js

@@ -32,7 +32,7 @@ function NameField({ value, label, onSave }) {
         } }));
 }
 /* One account: how it looks in a picker, who is signed in, where its folder is, its variables. */
-export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secretsAvailable, onRemoved }) {
+export function AccountDetail({ provider, entry, login, canOpenLogin, loginBlocked, secretsAvailable, onRemoved }) {
     const { t } = useTranslation('agent-providers');
     const scope = useChatScope();
     const host = useChatHost();
@@ -46,9 +46,10 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
         copyText(folder);
         host.notify({ kind: 'success', title: t('account.folderCopied'), description: folder });
     };
+    const trouble = status !== null && TROUBLE.has(status.state) && status.message ? status.message : null;
     const loginDetail = () => {
-        if (status !== null && TROUBLE.has(status.state) && status.message) {
-            return status.message;
+        if (trouble !== null) {
+            return trouble;
         }
         if (!signedIn) {
             return t('account.login.signedOutDetail');
@@ -59,11 +60,11 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
     return (_jsxs(_Fragment, { children: [_jsx(DetailHeader, { mark: _jsx("span", { className: "grid h-6 shrink-0 place-items-center", children: _jsx(AccountDot, { color: account.color, className: "size-3" }) }), title: name, subtitle: _jsxs(_Fragment, { children: [_jsx(CliMark, { kind: provider.kind, size: 12, className: "text-text-muted" }), t('account.kind', { provider: provider.name })] }), actions: folder !== '' && (_jsx(Button, { variant: "secondary", onClick: showFolder, children: t('account.showFolder') })) }), _jsxs(SettingsSection, { children: [_jsx(SettingsRow, { label: t('account.enabled.label'), description: t('account.enabled.description'), control: _jsx(Switch, { checked: account.enabled !== false, label: t('account.enabled.label'), onCheckedChange: (checked) => {
                                 const { enabled: _enabled, ...rest } = account;
                                 void saveAccount(scope, host, id, checked ? rest : { ...rest, enabled: false });
-                            } }) }), _jsx(SettingsRow, { label: t('account.name'), control: _jsx(NameField, { value: name, label: t('account.name'), onSave: (label) => void saveAccount(scope, host, id, { ...account, label }) }, name) }), _jsx(SettingsRow, { label: t('account.color'), control: _jsx(AccountColors, { value: account.color, label: t('account.color'), onChange: (color) => void saveAccount(scope, host, id, { ...account, color }) }) })] }), canLogIn && (_jsxs(SettingsSection, { title: t('account.login.title'), children: [_jsx(SettingsRow, { label: signedIn
+                            } }) }), _jsx(SettingsRow, { label: t('account.name'), control: _jsx(NameField, { value: name, label: t('account.name'), onSave: (label) => void saveAccount(scope, host, id, { ...account, label }) }, name) }), _jsx(SettingsRow, { label: t('account.color'), control: _jsx(AccountColors, { value: account.color, label: t('account.color'), onChange: (color) => void saveAccount(scope, host, id, { ...account, color }) }) })] }), (login === 'chat' || (login === 'terminal' && canOpenLogin)) && (_jsxs(SettingsSection, { title: t('account.login.title'), children: [login === 'chat' ? (_jsx(SettingsRow, { label: t('account.login.inChat'), description: trouble ?? t('account.login.inChatDetail') })) : (_jsx(SettingsRow, { label: signedIn
                             ? status?.email
                                 ? t('account.login.signedInAs', { email: status.email })
                                 : t('account.login.signedIn')
-                            : t('account.login.signedOut'), description: loginBlocked === null ? loginDetail() : `${loginDetail()} ${loginBlocked}`, control: loginBlocked === null ? (loginButton) : (_jsx(Tooltip, { label: loginBlocked, children: _jsx("span", { className: "inline-flex", children: loginButton }) })) }), _jsxs(SettingsRow, { label: t('account.folder.label'), children: [_jsx(Input, { mono: true, className: "h-8.5", value: folder, readOnly: true, "aria-label": t('account.folder.label') }), _jsx("p", { className: "-mt-1 text-xs text-text-muted", children: variable ? (_jsx(Trans, { t: t, i18nKey: "account.folder.detail", values: { variable }, components: { code: _jsx("code", { className: "font-mono text-code" }) } })) : (t('account.folder.detailPlain')) })] })] })), _jsx(AccountVariables, { id: id, account: account, secretsAvailable: secretsAvailable }, `${id}:${JSON.stringify(account.env ?? [])}`), _jsx(SettingsSection, { children: _jsx(SettingsRow, { label: t('account.remove.label'), description: isDefault ? t('account.remove.defaultNote') : t('account.remove.description'), control: _jsx(Button, { variant: "danger-outline", disabled: isDefault, onClick: () => setConfirming(true), children: t('account.remove.button') }) }) }), _jsx(ConfirmDialog, { open: confirming, onOpenChange: setConfirming, title: t('account.remove.confirmTitle', { account: name }), description: t('account.remove.confirmDescription', { folder }), confirmLabel: t('account.remove.confirm'), onConfirm: async () => {
+                            : t('account.login.signedOut'), description: loginBlocked === null ? loginDetail() : `${loginDetail()} ${loginBlocked}`, control: loginBlocked === null ? (loginButton) : (_jsx(Tooltip, { label: loginBlocked, children: _jsx("span", { className: "inline-flex", children: loginButton }) })) })), _jsxs(SettingsRow, { label: t('account.folder.label'), children: [_jsx(Input, { mono: true, className: "h-8.5", value: folder, readOnly: true, "aria-label": t('account.folder.label') }), _jsx("p", { className: "-mt-1 text-xs text-text-muted", children: variable ? (_jsx(Trans, { t: t, i18nKey: "account.folder.detail", values: { variable }, components: { code: _jsx("code", { className: "font-mono text-code" }) } })) : (t('account.folder.detailPlain')) })] })] })), _jsx(AccountVariables, { id: id, account: account, secretsAvailable: secretsAvailable }, `${id}:${JSON.stringify(account.env ?? [])}`), _jsx(SettingsSection, { children: _jsx(SettingsRow, { label: t('account.remove.label'), description: isDefault ? t('account.remove.defaultNote') : t('account.remove.description'), control: _jsx(Button, { variant: "danger-outline", disabled: isDefault, onClick: () => setConfirming(true), children: t('account.remove.button') }) }) }), _jsx(ConfirmDialog, { open: confirming, onOpenChange: setConfirming, title: t('account.remove.confirmTitle', { account: name }), description: t('account.remove.confirmDescription', { folder }), confirmLabel: t('account.remove.confirm'), onConfirm: async () => {
                     await removeAccount(scope, host, id, provider.kind);
                     onRemoved();
                 } })] }));

package/dist/providers/AddAccountForm.d.ts

@@ -1,10 +1,11 @@
 import type { ProviderInfo } from '@adecore/agent-contracts';
-import { type AccountEntry } from '../agents/accounts.js';
+import { type AccountEntry, type AccountLogin } from '../agents/accounts.js';
 interface AddAccountFormProps {
     provider: ProviderInfo;
     entries: AccountEntry[];
+    login: AccountLogin;
     onCancel(): void;
     onAdded(id: string, name: string, made: boolean): void;
 }
-export declare function AddAccountForm({ provider, entries, onCancel, onAdded }: AddAccountFormProps): import("react").JSX.Element;
+export declare function AddAccountForm({ provider, entries, login, onCancel, onAdded }: AddAccountFormProps): import("react").JSX.Element;
 export {};

package/dist/providers/AddAccountForm.js

@@ -16,7 +16,7 @@ import { providerAccountsOf } from '../state/provider-accounts.js';
  * A name and a color, asked before anything exists, so the account is made once with both. By default
  * the machine makes the folder; under Advanced a person points at a folder of their own instead.
  */
-export function AddAccountForm({ provider, entries, onCancel, onAdded }) {
+export function AddAccountForm({ provider, entries, login, onCancel, onAdded }) {
     const { t } = useTranslation('agent-providers');
     const scope = useChatScope();
     const { accents } = useChatHost();
@@ -51,5 +51,5 @@ export function AddAccountForm({ provider, entries, onCancel, onAdded }) {
             setBusy(false);
         }
     };
-    return (_jsxs("form", { className: "contents", onSubmit: (event) => void submit(event), children: [_jsx(DetailHeader, { mark: _jsx(CliTile, { kind: provider.kind }), title: t('add.title', { provider: provider.name }), subtitle: t('add.description') }), _jsxs(SettingsSection, { children: [_jsx(SettingsRow, { label: t('add.name'), control: _jsx(Input, { className: "w-55 max-w-full", value: name, maxLength: 80, autoFocus: true, placeholder: t('add.namePlaceholder'), "aria-label": t('add.name'), onChange: (event) => setName(event.target.value) }) }), _jsx(SettingsRow, { label: t('add.color'), control: _jsx(AccountColors, { value: color, label: t('add.color'), onChange: setColor }) })] }), _jsxs("div", { className: "flex min-w-0 flex-col gap-2.5", children: [_jsxs("button", { type: "button", "aria-expanded": advanced, className: "flex items-center gap-1.5 self-start text-sm font-medium text-text-muted hover:text-text", onClick: () => setAdvanced((open) => !open), children: [_jsx(Icon, { icon: ChevronRight, size: 14, className: clsx('transition-transform', advanced && 'rotate-90') }), t('add.advanced')] }), advanced && (_jsx(SettingsSection, { children: _jsx(SettingsRow, { label: t('add.link.label'), description: t('add.link.description'), children: _jsx(Input, { mono: true, value: folder, spellCheck: false, autoComplete: "off", placeholder: t('add.link.placeholder'), "aria-label": t('add.link.label'), onChange: (event) => setFolder(event.target.value) }) }) }))] }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-end gap-2", children: [error !== null && (_jsx(FormError, { render: _jsx("span", {}), className: "mr-auto break-words", children: error || t('add.failed') })), _jsx(Button, { onClick: onCancel, children: t('common.cancel') }), _jsx(Button, { type: "submit", variant: "primary", disabled: label === '' || busy, children: linking ? t('add.linkButton') : t('add.create') })] })] }));
+    return (_jsxs("form", { className: "contents", onSubmit: (event) => void submit(event), children: [_jsx(DetailHeader, { mark: _jsx(CliTile, { kind: provider.kind }), title: t('add.title', { provider: provider.name }), subtitle: login === 'chat' ? t('add.chatDescription') : t('add.description') }), _jsxs(SettingsSection, { children: [_jsx(SettingsRow, { label: t('add.name'), control: _jsx(Input, { className: "w-55 max-w-full", value: name, maxLength: 80, autoFocus: true, placeholder: t('add.namePlaceholder'), "aria-label": t('add.name'), onChange: (event) => setName(event.target.value) }) }), _jsx(SettingsRow, { label: t('add.color'), control: _jsx(AccountColors, { value: color, label: t('add.color'), onChange: setColor }) })] }), _jsxs("div", { className: "flex min-w-0 flex-col gap-2.5", children: [_jsxs("button", { type: "button", "aria-expanded": advanced, className: "flex items-center gap-1.5 self-start text-sm font-medium text-text-muted hover:text-text", onClick: () => setAdvanced((open) => !open), children: [_jsx(Icon, { icon: ChevronRight, size: 14, className: clsx('transition-transform', advanced && 'rotate-90') }), t('add.advanced')] }), advanced && (_jsx(SettingsSection, { children: _jsx(SettingsRow, { label: t('add.link.label'), description: t('add.link.description'), children: _jsx(Input, { mono: true, value: folder, spellCheck: false, autoComplete: "off", placeholder: t('add.link.placeholder'), "aria-label": t('add.link.label'), onChange: (event) => setFolder(event.target.value) }) }) }))] }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-end gap-2", children: [error !== null && (_jsx(FormError, { render: _jsx("span", {}), className: "mr-auto break-words", children: error || t('add.failed') })), _jsx(Button, { onClick: onCancel, children: t('common.cancel') }), _jsx(Button, { type: "submit", variant: "primary", disabled: label === '' || busy, children: linking ? t('add.linkButton') : t('add.create') })] })] }));
 }

package/dist/providers/CliDetail.d.ts

@@ -1,12 +1,12 @@
 import type { ProviderInfo } from '@adecore/agent-contracts';
-import { type AccountEntry } from '../agents/accounts.js';
+import { type AccountEntry, type AccountLogin } from '../agents/accounts.js';
 interface CliDetailProps {
     provider: ProviderInfo;
     entries: AccountEntry[] | null;
     defaults: boolean;
-    canAddAccount: boolean;
+    login: AccountLogin;
     onAddAccount(): void;
     onPickAccount(id: string): void;
 }
-export declare function CliDetail({ provider, entries, defaults, canAddAccount, onAddAccount, onPickAccount }: CliDetailProps): import("react").JSX.Element;
+export declare function CliDetail({ provider, entries, defaults, login, onAddAccount, onPickAccount }: CliDetailProps): import("react").JSX.Element;
 export {};

package/dist/providers/CliDetail.js

@@ -21,7 +21,7 @@ function ModelOptionRows({ provider, model, options }) {
     return (_jsx(_Fragment, { children: model.options.map((option) => (_jsx(SettingsRow, { indent: true, muted: true, label: option.label, control: _jsx(ModelOptionControl, { option: option, options: options, layout: "row", onChange: (value) => setOption(option.id, value) }) }, option.id))) }));
 }
 /* One CLI: what it is, what a new chat of it starts with unless `defaults` is off, and its accounts. */
-export function CliDetail({ provider, entries, defaults, canAddAccount, onAddAccount, onPickAccount }) {
+export function CliDetail({ provider, entries, defaults, login, onAddAccount, onPickAccount }) {
     const { t } = useTranslation('agent-providers');
     const { id: scopeId } = useChatScope();
     const preferences = useChatPreferences();
@@ -31,7 +31,7 @@ export function CliDetail({ provider, entries, defaults, canAddAccount, onAddAcc
     const picked = accountFor(preferences, scopeId, provider.kind, machineAccounts) ?? provider.kind;
     // An account that is off is out of every picker, unless it is the one picked already.
     const choosable = (entries ?? []).filter((entry) => entry.account.enabled !== false || entry.id === picked);
-    const canLogIn = canAddAccount;
+    const canAddAccount = login !== null;
     return (_jsxs(_Fragment, { children: [_jsx(DetailHeader, { mark: _jsx(CliTile, { kind: provider.kind }), title: provider.name, subtitle: `${provider.version ? `${t('abilities.version', { version: provider.version })} ` : ''}${providerAbilities(provider)}`, actions: canAddAccount && (_jsxs(Button, { variant: "secondary", className: "whitespace-nowrap", onClick: onAddAccount, children: [_jsx(Icon, { icon: Plus, size: 14 }), t('cli.addAccount')] })) }), defaults && (_jsxs(SettingsSection, { title: t('cli.defaults.title'), description: t('cli.defaults.description'), children: [choosable.length > 0 && (_jsx(SettingsRow, { searchId: "providers.defaults.account", label: t('cli.defaults.account'), control: _jsx(Select, { value: picked, label: t('cli.defaults.accountFor', { provider: provider.name }), align: "end", items: choosable.map((entry) => ({
                                 value: entry.id,
                                 label: accountName(entry, provider.name),
@@ -48,7 +48,7 @@ export function CliDetail({ provider, entries, defaults, canAddAccount, onAddAcc
                                     model: value,
                                     options: carryOptions(selection?.options ?? {}, provider.models.find((entry) => entry.slug === value))
                                 }) }) })), model && _jsx(ModelOptionRows, { provider: provider.kind, model: model, options: selection?.options ?? {} }), choosable.length === 0 && provider.models.length === 0 && _jsx(SettingsRow, { muted: true, label: t('cli.defaults.usesCliDefault') })] })), entries === null ? (_jsx("p", { className: "text-xs text-text-faint", children: t('list.noAccounts') })) : (_jsx(SettingsSection, { title: t('cli.accounts'), footer: canAddAccount ? undefined : t('cli.onlyDefault', { provider: provider.name }), children: entries.map((entry) => {
-                    const status = accountStatusLine(entry.status, canLogIn);
+                    const status = accountStatusLine(entry.status, login === 'terminal');
                     return (_jsxs("button", { type: "button", className: "flex w-full min-w-0 items-center gap-3 px-4.5 py-3 text-left first:rounded-t-xl last:rounded-b-xl hover:bg-surface-hover", onClick: () => onPickAccount(entry.id), children: [_jsx(AccountDot, { color: entry.account.color }), _jsx("span", { className: "min-w-0 grow truncate text-sm text-text", children: accountName(entry, provider.name) }), _jsx("span", { className: `shrink-0 text-xs ${ACCOUNT_TONE_CLASSES[status.tone]}`, children: status.text }), _jsx(Icon, { icon: ChevronRight, size: 14, className: "shrink-0 text-text-faint" })] }, entry.id));
                 }) }))] }));
 }