@adecore/agents-react 0.29.3 → 0.31.0

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

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

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');
 }