@adecore/agents-react 0.30.0 → 0.31.1

package/dist/providers/ProvidersPane.d.ts

@@ -1,9 +1,11 @@
 import { type ReactNode } from 'react';
 import type { ProviderInfo } from '@adecore/agent-contracts';
+import type { ProviderInstallStep } from './install-steps.js';
 interface ProvidersPaneProps {
     target?: string | null;
     detailOf?(provider: ProviderInfo): ReactNode | null;
     defaults?: boolean;
+    installStepOf?(provider: ProviderInfo): ProviderInstallStep | null;
 }
-export declare function ProvidersPane({ target, detailOf, defaults }: ProvidersPaneProps): import("react").JSX.Element;
+export declare function ProvidersPane({ target, detailOf, defaults, installStepOf }: ProvidersPaneProps): import("react").JSX.Element;
 export {};

package/dist/providers/ProvidersPane.js

@@ -2,16 +2,17 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Plus, Terminal } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { AccountDot } from '../agents/AccountDot.js';
-import { ACCOUNT_TONE_CLASSES, accountName, accountsOfKind, accountStatusLine } from '../agents/accounts.js';
-import { ErrorBoundary, Icon, IconButton, SectionLabel, Skeleton } from '@adecore/ui';
+import { ACCOUNT_TONE_CLASSES, accountLoginOf, accountName, accountsOfKind, accountStatusLine } from '../agents/accounts.js';
+import { ErrorBoundary, IconButton, SectionLabel, Skeleton } from '@adecore/ui';
 import { MasterDetail } from '@adecore/ui/settings';
 import { useChatHost } from '../host.js';
 import { useChatScope } from '../scope.js';
 import { AccountDetail } from './AccountDetail.js';
 import { AddAccountForm } from './AddAccountForm.js';
 import { CliDetail } from './CliDetail.js';
+import { InstallPage } from './InstallPage.js';
 import { CliMark } from './parts.js';
 import { useProviderAccounts } from '../state/provider-accounts.js';
 import { useProviders } from '../state/providers.js';
@@ -20,7 +21,7 @@ function ListRow({ selected, onSelect, children, trailing, className }) {
     return (_jsxs("div", { className: clsx('flex min-w-0 shrink-0 items-center gap-2 rounded-lg pr-2', selected ? 'bg-text/5' : 'hover:bg-surface-hover', className), children: [_jsx("button", { type: "button", "aria-current": selected ? 'true' : undefined, className: "flex min-w-0 grow items-center gap-3 self-stretch rounded-lg py-2 pl-3 text-left focus-visible:-outline-offset-2", onClick: onSelect, children: children }), trailing] }));
 }
 /* The agent CLIs of the host in scope, each with its accounts, beside the detail of what is picked. */
-export function ProvidersPane({ target = null, detailOf, defaults = true }) {
+export function ProvidersPane({ target = null, detailOf, defaults = true, installStepOf }) {
     const { t } = useTranslation('agent-providers');
     const { id: scopeId } = useChatScope();
     const providers = useProviders((s) => s.providers);
@@ -34,13 +35,14 @@ 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;
     const currentAccount = current?.kind === 'account' ? accounts?.accounts[current.id] : undefined;
     const currentCli = current === null ? null : current.kind === 'account' ? currentAccount?.kind : current.cli;
-    const provider = installed.find((entry) => entry.kind === currentCli) ?? null;
+    const provider = (current?.kind === 'install' ? providers : installed).find((entry) => entry.kind === currentCli) ?? null;
+    const picksCli = (kind) => (current?.kind === 'cli' || current?.kind === 'install') && current.cli === kind;
     // A search result lands on a row of a CLI's detail, so a picked account makes way for its CLI.
     const [seenTarget, setSeenTarget] = useState(target);
     if (target !== seenTarget) {
@@ -54,35 +56,44 @@ 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: picksCli(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));
     };
-    const list = !loaded ? (_jsxs("div", { className: "flex flex-col gap-3 p-3", children: [_jsx(Skeleton, { className: "w-32" }), _jsx(Skeleton, { className: "w-40" })] })) : (_jsxs(_Fragment, { children: [installed.map(group), installed.length === 0 && _jsx("p", { className: "px-3 py-2 text-xs text-text-muted", children: t('list.none') }), missing.length > 0 && (_jsxs("div", { className: "mt-1.5 flex min-w-0 shrink-0 flex-col border-t border-border pt-2.5 pb-2", children: [_jsx(SectionLabel, { className: "px-3 pt-1 pb-1.5", children: t('list.notInstalled') }), missing.map((cli) => (_jsxs("div", { className: "flex h-10 min-w-0 items-center gap-3 px-3 text-sm text-text-muted", children: [_jsx(Icon, { icon: Terminal, size: 14, className: "shrink-0" }), _jsx("span", { className: "min-w-0 grow truncate", children: cli.name }), _jsx("span", { className: "shrink-0 text-xs text-text-faint", children: t('list.missing') })] }, cli.kind))), _jsx("p", { className: "mt-1 px-3 text-xs text-text-faint", children: t('list.notInstalledNote') })] }))] }));
+    const list = !loaded ? (_jsxs("div", { className: "flex flex-col gap-3 p-3", children: [_jsx(Skeleton, { className: "w-32" }), _jsx(Skeleton, { className: "w-40" })] })) : (_jsxs(_Fragment, { children: [installed.map(group), installed.length === 0 && _jsx("p", { className: "px-3 py-2 text-xs text-text-muted", children: t('list.none') }), missing.length > 0 && (_jsxs("div", { className: "mt-1.5 flex min-w-0 shrink-0 flex-col border-t border-border pt-2.5 pb-2", children: [_jsx(SectionLabel, { className: "px-3 pt-1 pb-1.5", children: t('list.notInstalled') }), missing.map((cli) => (_jsxs(ListRow, { selected: picksCli(cli.kind), onSelect: () => setPicked({ kind: 'install', cli: cli.kind }), children: [_jsx(CliMark, { kind: cli.kind, className: "opacity-60" }), _jsx("span", { className: "min-w-0 grow truncate text-xs font-medium text-text-muted", children: cli.name }), _jsx("span", { className: "shrink-0 text-xs text-text-faint", children: t('list.missing') })] }, cli.kind))), missing.every((cli) => cli.install === undefined) && _jsx("p", { className: "mt-1 px-3 text-xs text-text-faint", children: t('list.notInstalledNote') })] }))] }));
     const detail = () => {
         if (current === null || provider === null) {
             return null;
         }
-        const own = current.kind === 'cli' ? (detailOf?.(provider) ?? null) : null;
+        if (current.kind === 'install') {
+            const extra = installStepOf?.(provider) ?? null;
+            const statuses = entriesOf(provider.kind).map((entry) => entry.status?.state);
+            // Without accounts to read, nothing says the CLI is signed out, so being there is all it takes.
+            const signedIn = statuses.length === 0 || statuses.includes('ready');
+            if (!provider.installed || !signedIn || (extra !== null && !extra.done)) {
+                return _jsx(InstallPage, { provider: provider, signedIn: signedIn, extra: extra }, provider.kind);
+            }
+        }
+        const own = current.kind === 'cli' || current.kind === 'install' ? (detailOf?.(provider) ?? null) : null;
         if (own !== null) {
             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/index.d.ts

@@ -7,4 +7,5 @@ export { modelName, useModelName, shortModelName } from '../agents/model-name.js
 export { carryOptions } from '../agents/model-options.js';
 export { type ModelRequirement } from '../agents/model-requirement.js';
 export { ProvidersPane } from './ProvidersPane.js';
+export type { ProviderInstallStep } from './install-steps.js';
 export { CliMark, CliTile } from './parts.js';

package/dist/providers/install-steps.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { ProviderInfo, ProviderPlatform } from '@adecore/agent-contracts';
+export interface ProviderInstallStep {
+    title: string;
+    done: boolean;
+    body: ReactNode;
+}
+export type InstallStepState = 'done' | 'current' | 'later';
+export declare function installStepStates(done: readonly boolean[]): InstallStepState[];
+export declare function pagePlatform(): ProviderPlatform;
+export declare function installPlatforms(provider: ProviderInfo, machine: ProviderPlatform): {
+    offered: ProviderPlatform[];
+    initial: ProviderPlatform | null;
+};

package/dist/providers/install-steps.js

@@ -0,0 +1,19 @@
+import { isApplePlatform } from '@adecore/ui';
+const PLATFORMS = ['darwin', 'linux', 'win32'];
+/* The first step not done is the current one. */
+export function installStepStates(done) {
+    const first = done.indexOf(false);
+    return done.map((value, index) => (value ? 'done' : index === first ? 'current' : 'later'));
+}
+/* The system of the page, for a host that does not say which system its machine runs. */
+export function pagePlatform() {
+    if (isApplePlatform()) {
+        return 'darwin';
+    }
+    return typeof navigator !== 'undefined' && /windows/i.test(navigator.userAgent) ? 'win32' : 'linux';
+}
+/* The systems a provider has a command for, and the one the page opens on: the machine's when it has one there. */
+export function installPlatforms(provider, machine) {
+    const offered = PLATFORMS.filter((platform) => Boolean(provider.install?.commands[platform]));
+    return { offered, initial: offered.includes(machine) ? machine : (offered[0] ?? null) };
+}

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.1",
   "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.1",
+    "@adecore/editor": "0.31.1",
+    "@adecore/editor-react": "0.31.1",
+    "@adecore/intelligent-ui": "0.31.1",
+    "@adecore/merge": "0.31.1",
     "@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.1",
     "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.1",
     "@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/host.ts

@@ -14,7 +14,8 @@ import type {
     ChatUiQueryPayload,
     ChatUiQueryReading,
     ChatUiLinkPayload,
-    ChatUiLinkReading
+    ChatUiLinkReading,
+    ProviderPlatform
 } from '@adecore/agent-contracts';
 import { isApplePlatform } from '@adecore/ui';
 import type { TimelineRow } from './chat/logic/timeline';
@@ -384,6 +385,15 @@ export interface ChatHost {
     openLogin: ((scopeId: string, kind: AgentKind, accountId: string, name: string) => Promise<void>) | null;
     /* Why a login cannot start from here right now, or null when it can. */
     useLoginBlocked(scopeId: string): string | null;
+    /*
+     * Runs a command a provider's install page shows, its install or its sign-in, where a person sees it run,
+     * such as in a new terminal on the scope's machine; left out, the page offers to copy the command only.
+     */
+    runProviderCommand?(scopeId: string, kind: AgentKind, command: string): void;
+    /* The system of the machine the scope's chats run on, whose install command the page shows first; left out, or null, the system of this page. */
+    useMachinePlatform?(scopeId: string): ProviderPlatform | null;
+    /* A sentence under a key the install page asks for in the environment, such as what the app does with it; left out, or null, none. */
+    providerKeyNote?(variable: string): string | null;
     /* The name and the mark of a project of the host, for the usage per project; null draws the folder's own. */
     useProjectLook(scopeId: string, projectId: string | null): { name: string; mark: ReactNode } | null;
     /* What a person calls the machine the scope's chats run on, or null when it has no name worth saying. */

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

@@ -18,10 +18,47 @@ export default {
         addAccount: 'Add a {{provider}} account',
         notInstalled: 'Not installed',
         missing: 'Missing',
-        notInstalledNote: 'To add one, install it and restart Ruimte on that machine.',
+        notInstalledNote: 'Install one on this machine to use it here.',
         none: 'No agent CLIs found on this machine.',
         noAccounts: 'This machine keeps no accounts yet. Update Ruimte there to add one.'
     },
+    install: {
+        notInstalled: 'Not installed',
+        steps: 'Steps to set up {{provider}}',
+        platform: 'System',
+        platforms: {
+            darwin: 'macOS',
+            linux: 'Linux',
+            win32: 'Windows'
+        },
+        copy: 'Copy',
+        copied: 'Copied',
+        run: 'Run in a terminal',
+        guide: 'Install guide',
+        install: {
+            title: 'Install the CLI',
+            none: 'There is no install command for this system.',
+            done: 'Installed, version {{version}}.',
+            doneNoVersion: 'Installed.'
+        },
+        signIn: {
+            title: 'Sign in',
+            command: 'Run this in a terminal and follow its steps:',
+            env: 'Set <code>{{variable}}</code> in the environment the CLI starts in.',
+            chat: 'The first chat asks you to sign in.',
+            or: 'Or',
+            unknown: 'The CLI asks you to sign in the first time it runs.'
+        },
+        start: {
+            title: 'Start working',
+            description: 'Pick {{provider}} for your next chat or terminal.'
+        },
+        footer: {
+            missing: 'Not found on this machine yet. It is checked again when you come back to this window.',
+            found: 'Found on this machine.'
+        },
+        fallback: 'Install {{provider}} on this machine to use it here.'
+    },
     abilities: {
         version: 'Version {{version}}.',
         chatAndTerminal: 'Chat and terminal.',
@@ -65,7 +102,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 +145,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

@@ -18,10 +18,47 @@ export default {
         addAccount: 'Een {{provider}}-account toevoegen',
         notInstalled: 'Niet geïnstalleerd',
         missing: 'Ontbreekt',
-        notInstalledNote: 'Installeer er een en start Ruimte op die machine opnieuw om hem toe te voegen.',
+        notInstalledNote: 'Installeer er een op deze machine om hem hier te gebruiken.',
         none: "Geen agent-CLI's gevonden op deze machine.",
         noAccounts: 'Deze machine houdt nog geen accounts bij. Werk Ruimte daar bij om er een toe te voegen.'
     },
+    install: {
+        notInstalled: 'Niet geïnstalleerd',
+        steps: '{{provider}} instellen in stappen',
+        platform: 'Systeem',
+        platforms: {
+            darwin: 'macOS',
+            linux: 'Linux',
+            win32: 'Windows'
+        },
+        copy: 'Kopiëren',
+        copied: 'Gekopieerd',
+        run: 'In een terminal uitvoeren',
+        guide: 'Installatiegids',
+        install: {
+            title: 'Installeer de CLI',
+            none: 'Er is geen installatiecommando voor dit systeem.',
+            done: 'Geïnstalleerd, versie {{version}}.',
+            doneNoVersion: 'Geïnstalleerd.'
+        },
+        signIn: {
+            title: 'Log in',
+            command: 'Voer dit uit in een terminal en volg de stappen:',
+            env: 'Zet <code>{{variable}}</code> in de omgeving waarin de CLI start.',
+            chat: 'De eerste chat vraagt je om in te loggen.',
+            or: 'Of',
+            unknown: 'De CLI vraagt je om in te loggen als hij voor het eerst draait.'
+        },
+        start: {
+            title: 'Aan de slag',
+            description: 'Kies {{provider}} voor je volgende chat of terminal.'
+        },
+        footer: {
+            missing: 'Nog niet gevonden op deze machine. Er wordt opnieuw gekeken als je terugkomt in dit venster.',
+            found: 'Gevonden op deze machine.'
+        },
+        fallback: 'Installeer {{provider}} op deze machine om hem hier te gebruiken.'
+    },
     abilities: {
         version: 'Versie {{version}}.',
         chatAndTerminal: 'Chat en terminal.',
@@ -65,7 +102,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 +145,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',