@adecore/agents-react 0.30.0 → 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/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-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-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));
                 }) }))] }));
 }

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';
@@ -34,7 +34,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }) {
     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;
@@ -54,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.capabilities.terminal && 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));
     };
@@ -76,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

@@ -7,7 +7,8 @@ const CLI_COLORS = {
     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] ?? 'text-text-muted', className) });

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.30.0",
+  "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.30.0",
-    "@adecore/editor": "0.30.0",
-    "@adecore/editor-react": "0.30.0",
-    "@adecore/intelligent-ui": "0.30.0",
-    "@adecore/merge": "0.30.0",
+    "@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.30.0",
+    "@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.30.0",
+    "@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/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-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-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',

package/src/providers/AccountDetail.tsx

@@ -3,7 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { LogIn } from 'lucide-react';
 import type { ProviderInfo } from '@adecore/agent-contracts';
 import { AccountDot } from '../agents/AccountDot';
-import { accountName, FOLDER_VARIABLES, type AccountEntry } from '../agents/accounts';
+import { accountName, FOLDER_VARIABLES, type AccountEntry, type AccountLogin } from '../agents/accounts';
 import { ConfirmDialog, DetailHeader, SettingsRow, SettingsSection } from '@adecore/ui/settings';
 import { Button, copyText, Icon, Input, Switch, Tooltip } from '@adecore/ui';
 import { useChatHost } from '../host';
@@ -19,8 +19,10 @@ const TROUBLE = new Set(['folder-missing', 'unavailable', 'failed']);
 interface AccountDetailProps {
     provider: ProviderInfo;
     entry: AccountEntry;
-    /* False for a CLI without a config folder: it has only its own login, and nothing to sign in here. */
-    canLogIn: boolean;
+    /* Null for a CLI without a config folder: it has only its own login, and nothing to sign in here. */
+    login: AccountLogin;
+    /* Whether the host can open a terminal for a login at all. */
+    canOpenLogin: boolean;
     /* Why a login cannot open a terminal right now, or null when it can. */
     loginBlocked: string | null;
     secretsAvailable: boolean;
@@ -56,7 +58,7 @@ function NameField({ value, label, onSave }: { value: string; label: string; onS
 }
 
 /* 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 }: AccountDetailProps) {
+export function AccountDetail({ provider, entry, login, canOpenLogin, loginBlocked, secretsAvailable, onRemoved }: AccountDetailProps) {
     const { t } = useTranslation('agent-providers');
     const scope = useChatScope();
     const host = useChatHost();
@@ -72,9 +74,11 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
         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 = (): string => {
-        if (status !== null && TROUBLE.has(status.state) && status.message) {
-            return status.message;
+        if (trouble !== null) {
+            return trouble;
         }
         if (!signedIn) {
             return t('account.login.signedOutDetail');
@@ -149,27 +153,31 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
                     }
                 />
             </SettingsSection>
-            {canLogIn && (
+            {(login === 'chat' || (login === 'terminal' && canOpenLogin)) && (
                 <SettingsSection title={t('account.login.title')}>
-                    <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
-                            ) : (
-                                <Tooltip label={loginBlocked}>
-                                    <span className="inline-flex">{loginButton}</span>
-                                </Tooltip>
-                            )
-                        }
-                    />
+                    {login === 'chat' ? (
+                        <SettingsRow label={t('account.login.inChat')} description={trouble ?? t('account.login.inChatDetail')} />
+                    ) : (
+                        <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
+                                ) : (
+                                    <Tooltip label={loginBlocked}>
+                                        <span className="inline-flex">{loginButton}</span>
+                                    </Tooltip>
+                                )
+                            }
+                        />
+                    )}
                     <SettingsRow label={t('account.folder.label')}>
                         <Input mono className="h-8.5" value={folder} readOnly aria-label={t('account.folder.label')} />
                         <p className="-mt-1 text-xs text-text-muted">

package/src/providers/AddAccountForm.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { ChevronRight } from 'lucide-react';
 import type { ProviderInfo } from '@adecore/agent-contracts';
-import { freeAccountColor, mintAccountId, type AccountEntry } from '../agents/accounts';
+import { freeAccountColor, mintAccountId, type AccountEntry, type AccountLogin } from '../agents/accounts';
 import { useChatHost } from '../host';
 import { useChatScope } from '../scope';
 import { createAccount, linkAccount } from './account-actions';
@@ -16,6 +16,7 @@ import { providerAccountsOf } from '../state/provider-accounts';
 interface AddAccountFormProps {
     provider: ProviderInfo;
     entries: AccountEntry[];
+    login: AccountLogin;
     onCancel(): void;
     /* The account exists; `made` says the machine made its folder, so nobody signed in there yet. */
     onAdded(id: string, name: string, made: boolean): void;
@@ -25,7 +26,7 @@ interface AddAccountFormProps {
  * 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 }: AddAccountFormProps) {
+export function AddAccountForm({ provider, entries, login, onCancel, onAdded }: AddAccountFormProps) {
     const { t } = useTranslation('agent-providers');
     const scope = useChatScope();
     const { accents } = useChatHost();
@@ -62,7 +63,11 @@ export function AddAccountForm({ provider, entries, onCancel, onAdded }: AddAcco
 
     return (
         <form className="contents" onSubmit={(event) => void submit(event)}>
-            <DetailHeader mark={<CliTile kind={provider.kind} />} title={t('add.title', { provider: provider.name })} subtitle={t('add.description')} />
+            <DetailHeader
+                mark={<CliTile kind={provider.kind} />}
+                title={t('add.title', { provider: provider.name })}
+                subtitle={login === 'chat' ? t('add.chatDescription') : t('add.description')}
+            />
             <SettingsSection>
                 <SettingsRow
                     label={t('add.name')}

package/src/providers/CliDetail.tsx

@@ -4,7 +4,7 @@ import type { AgentKind, ModelInfo, ProviderInfo } from '@adecore/agent-contract
 import { AccountDot } from '../agents/AccountDot';
 import { ModelOptionControl } from '../agents/ModelOptionControl';
 import { carryOptions } from '../agents/model-options';
-import { ACCOUNT_TONE_CLASSES, accountName, accountStatusLine, type AccountEntry } from '../agents/accounts';
+import { ACCOUNT_TONE_CLASSES, accountName, accountStatusLine, type AccountEntry, type AccountLogin } from '../agents/accounts';
 import { accountFor, forgetChatSelection, rememberChatAccount, rememberChatSelection, selectionFor, useChatPreferences } from '../chat/preferences';
 import { useChatScope } from '../scope';
 import { providerAbilities } from './provider-abilities';
@@ -40,13 +40,13 @@ interface CliDetailProps {
     /* Null for a machine that keeps no accounts. */
     entries: AccountEntry[] | null;
     defaults: boolean;
-    canAddAccount: boolean;
+    login: AccountLogin;
     onAddAccount(): void;
     onPickAccount(id: string): void;
 }
 
 /* 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 }: CliDetailProps) {
+export function CliDetail({ provider, entries, defaults, login, onAddAccount, onPickAccount }: CliDetailProps) {
     const { t } = useTranslation('agent-providers');
     const { id: scopeId } = useChatScope();
     const preferences = useChatPreferences();
@@ -56,7 +56,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 (
         <>
@@ -135,7 +135,7 @@ export function CliDetail({ provider, entries, defaults, canAddAccount, onAddAcc
             ) : (
                 <SettingsSection title={t('cli.accounts')} footer={canAddAccount ? undefined : t('cli.onlyDefault', { provider: provider.name })}>
                     {entries.map((entry) => {
-                        const status = accountStatusLine(entry.status, canLogIn);
+                        const status = accountStatusLine(entry.status, login === 'terminal');
                         return (
                             <button
                                 key={entry.id}

package/src/providers/ProvidersPane.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Plus, Terminal } from 'lucide-react';
 import type { AgentKind, ProviderInfo } from '@adecore/agent-contracts';
 import { AccountDot } from '../agents/AccountDot';
-import { ACCOUNT_TONE_CLASSES, accountName, accountsOfKind, accountStatusLine, type AccountEntry } from '../agents/accounts';
+import { ACCOUNT_TONE_CLASSES, accountLoginOf, accountName, accountsOfKind, accountStatusLine, type AccountEntry } from '../agents/accounts';
 import { ErrorBoundary, Icon, IconButton, SectionLabel, Skeleton } from '@adecore/ui';
 import { MasterDetail } from '@adecore/ui/settings';
 import { useChatHost } from '../host';
@@ -72,7 +72,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
     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;
+    const loginOf = (kind: AgentKind) => 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;
@@ -95,7 +95,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
 
     const added = (id: string, name: string, made: boolean): void => {
         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);
         }
     };
@@ -109,7 +109,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
                     onSelect={() => setPicked({ kind: 'cli', cli: cli.kind })}
                     className="pr-1"
                     trailing={
-                        canAddAccount(cli.kind) && (
+                        loginOf(cli.kind) !== null && (
                             <IconButton
                                 icon={Plus}
                                 size="sm"
@@ -125,7 +125,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
                 </ListRow>
                 {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 (
                         <ListRow
                             key={entry.id}
@@ -190,6 +190,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
                     key={provider.kind}
                     provider={provider}
                     entries={entriesOf(provider.kind)}
+                    login={loginOf(provider.kind)}
                     onCancel={() => setPicked({ kind: 'cli', cli: provider.kind })}
                     onAdded={added}
                 />
@@ -203,7 +204,8 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
                         key={entry.id}
                         provider={provider}
                         entry={entry}
-                        canLogIn={openLogin !== null && canAddAccount(provider.kind)}
+                        login={loginOf(provider.kind)}
+                        canOpenLogin={openLogin !== null}
                         loginBlocked={loginBlocked}
                         secretsAvailable={accounts?.secretsAvailable === true}
                         onRemoved={() => setPicked({ kind: 'cli', cli: provider.kind })}
@@ -216,7 +218,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
                 provider={provider}
                 entries={accounts === null ? null : entriesOf(provider.kind)}
                 defaults={defaults}
-                canAddAccount={canAddAccount(provider.kind)}
+                login={loginOf(provider.kind)}
                 onAddAccount={() => setPicked({ kind: 'add', cli: provider.kind })}
                 onPickAccount={(id) => setPicked({ kind: 'account', id })}
             />

package/src/providers/parts.tsx

@@ -8,7 +8,8 @@ const CLI_COLORS: Partial<Record<AgentKind, string>> = {
     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 }: { kind: AgentKind; size?: number; className?: string }) {

package/src/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/src/usage/format.ts

@@ -28,9 +28,13 @@ export function moneyFormat(currency: UsageCurrency, rate: UsageRate | null): (u
     };
 }
 
-export const PROVIDER_LABELS: Record<UsageProvider, string> = { claude: 'Claude Code', codex: 'Codex' };
+export const PROVIDER_LABELS: Record<UsageProvider, string> = { claude: 'Claude Code', codex: 'Codex', nanogpt: 'NanoGPT' };
 
-export const PROVIDER_COLORS: Record<UsageProvider, string> = { claude: 'var(--chart-claude)', codex: 'var(--chart-codex)' };
+export const PROVIDER_COLORS: Record<UsageProvider, string> = {
+    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

package/src/usage/limit-groups.ts

@@ -108,7 +108,8 @@ export function explain(provider: UsageLimitsProvider): string | null {
         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');
 }