@adecore/agents-react 0.30.0 → 0.31.1

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/InstallPage.tsx

@@ -0,0 +1,221 @@
+import { useState, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { Trans, useTranslation } from 'react-i18next';
+import { Check, Copy, ExternalLink, SquareTerminal } from 'lucide-react';
+import type { ProviderInfo, ProviderPlatform, ProviderSignIn } from '@adecore/agent-contracts';
+import { Button, copyText, Icon, Pill, Segmented } from '@adecore/ui';
+import { useChatHost } from '../host';
+import { useChatScope } from '../scope';
+import { installPlatforms, installStepStates, pagePlatform, type InstallStepState, type ProviderInstallStep } from './install-steps';
+import { CliMark } from './parts';
+
+const noPlatform = (): ProviderPlatform | null => null;
+
+function CommandBlock({ command }: { command: string }) {
+    const { t } = useTranslation('agent-providers');
+    const [copied, setCopied] = useState<string | null>(null);
+    return (
+        <div className="flex min-w-0 items-center gap-2 rounded-lg border border-border bg-surface-sunken py-1 pr-1 pl-3">
+            <code className="min-w-0 grow font-mono text-code break-all text-text select-text">{command}</code>
+            <Button
+                size="xs"
+                onClick={() => {
+                    copyText(command);
+                    setCopied(command);
+                }}
+            >
+                <Icon icon={copied === command ? Check : Copy} size={12} />
+                {copied === command ? t('install.copied') : t('install.copy')}
+            </Button>
+        </div>
+    );
+}
+
+function Step({ index, state, title, children }: { index: number; state: InstallStepState; title: string; children?: ReactNode }) {
+    return (
+        <li
+            aria-current={state === 'current' ? 'step' : undefined}
+            data-state={state}
+            className={clsx('flex min-w-0 gap-3 rounded-xl border p-4', state === 'current' ? 'border-accent' : 'border-border')}
+        >
+            <span
+                className={clsx(
+                    'grid size-6 shrink-0 place-items-center rounded-full text-xs font-medium',
+                    state === 'done' && 'bg-positive text-positive-text',
+                    state === 'current' && 'border border-accent text-accent',
+                    state === 'later' && 'bg-text/7 text-text-faint'
+                )}
+            >
+                {state === 'done' ? <Icon icon={Check} size={14} /> : index + 1}
+            </span>
+            <div className="flex min-w-0 grow flex-col gap-3">
+                <h4 className={clsx('text-sm leading-6 font-medium', state === 'later' ? 'text-text-muted' : 'text-text')}>{title}</h4>
+                {children}
+            </div>
+        </li>
+    );
+}
+
+function SignInWay({ way, canRun, onRun }: { way: ProviderSignIn; canRun: boolean; onRun(command: string): void }) {
+    const { t } = useTranslation('agent-providers');
+    const { providerKeyNote } = useChatHost();
+    switch (way.kind) {
+        case 'command':
+            return (
+                <div className="flex min-w-0 flex-col gap-2">
+                    <p className="text-xs text-text-muted">{t('install.signIn.command')}</p>
+                    <CommandBlock command={way.command} />
+                    {canRun && (
+                        <Button variant="secondary" size="sm" className="self-start" onClick={() => onRun(way.command)}>
+                            <Icon icon={SquareTerminal} size={14} />
+                            {t('install.run')}
+                        </Button>
+                    )}
+                </div>
+            );
+        case 'env': {
+            const note = providerKeyNote?.(way.variable) ?? null;
+            return (
+                <p className="text-xs text-text-muted">
+                    <Trans
+                        t={t}
+                        i18nKey="install.signIn.env"
+                        values={{ variable: way.variable }}
+                        components={{ code: <code className="font-mono text-code text-text" /> }}
+                    />
+                    {note !== null && ` ${note}`}
+                </p>
+            );
+        }
+        case 'chat':
+            return <p className="text-xs text-text-muted">{t('install.signIn.chat')}</p>;
+    }
+}
+
+interface InstallPageProps {
+    provider: ProviderInfo;
+    signedIn: boolean;
+    /* The host's own step, after the install of the CLI. */
+    extra: ProviderInstallStep | null;
+}
+
+/* How to get a CLI that is not on the machine yet, step by step, until it is there and signed in. */
+export function InstallPage({ provider, signedIn, extra }: InstallPageProps) {
+    const { t } = useTranslation('agent-providers');
+    const { id: scopeId } = useChatScope();
+    const host = useChatHost();
+    const useMachinePlatform = host.useMachinePlatform ?? noPlatform;
+    const machine = useMachinePlatform(scopeId) ?? pagePlatform();
+    const { offered, initial } = installPlatforms(provider, machine);
+    // Only a person's pick is kept, so a machine whose system arrives late still opens on its own.
+    const [chosen, setPlatform] = useState<ProviderPlatform | null>(null);
+    const platform = chosen ?? initial;
+    const install = provider.install;
+    const run = host.runProviderCommand;
+    const onRun = (command: string): void => run?.(scopeId, provider.kind, command);
+    const command = platform === null ? undefined : install?.commands[platform];
+
+    const steps: { title: string; done: boolean; body: ReactNode }[] = [];
+    steps.push({
+        title: t('install.install.title'),
+        done: provider.installed,
+        body: provider.installed ? (
+            <p className="text-xs text-text-muted">
+                {provider.version ? t('install.install.done', { version: provider.version }) : t('install.install.doneNoVersion')}
+            </p>
+        ) : (
+            <>
+                {offered.length > 1 && platform !== null && (
+                    <Segmented<ProviderPlatform>
+                        value={platform}
+                        label={t('install.platform')}
+                        options={offered.map((id) => ({ id, label: t(`install.platforms.${id}`) }))}
+                        onValueChange={setPlatform}
+                    />
+                )}
+                {command ? <CommandBlock command={command} /> : <p className="text-xs text-text-muted">{t('install.install.none')}</p>}
+                {((command && run) || install?.guideUrl) && (
+                    <div className="flex flex-wrap items-center gap-2">
+                        {command && run && (
+                            <Button variant="primary" onClick={() => onRun(command)}>
+                                <Icon icon={SquareTerminal} size={14} />
+                                {t('install.run')}
+                            </Button>
+                        )}
+                        {install?.guideUrl && (
+                            <Button href={install.guideUrl}>
+                                {t('install.guide')}
+                                <Icon icon={ExternalLink} size={14} />
+                            </Button>
+                        )}
+                    </div>
+                )}
+            </>
+        )
+    });
+    if (extra !== null) {
+        steps.push(extra);
+    }
+    const ways = install?.signIn ?? [];
+    steps.push({
+        title: t('install.signIn.title'),
+        done: provider.installed && signedIn,
+        body:
+            ways.length === 0 ? (
+                <p className="text-xs text-text-muted">{t('install.signIn.unknown')}</p>
+            ) : (
+                ways.map((way, index) => (
+                    <div key={`${way.kind}-${index}`} className="flex min-w-0 flex-col gap-2">
+                        {index > 0 && <span className="text-xs font-medium text-text-faint">{t('install.signIn.or')}</span>}
+                        <SignInWay way={way} canRun={run !== undefined && provider.installed} onRun={onRun} />
+                    </div>
+                ))
+            )
+    });
+    steps.push({
+        title: t('install.start.title'),
+        done: false,
+        body: <p className="text-xs text-text-muted">{t('install.start.description', { provider: provider.name })}</p>
+    });
+    const states = installStepStates(steps.map((step) => step.done));
+
+    return (
+        <>
+            <header className="flex min-w-0 items-start gap-3">
+                <span className="grid size-10 shrink-0 place-items-center rounded-xl bg-surface-sunken">
+                    <CliMark kind={provider.kind} size={20} />
+                </span>
+                <div className="flex min-w-0 grow flex-col">
+                    <div className="flex min-w-0 items-center gap-2">
+                        <h3 className="truncate text-lg font-semibold text-text">{provider.name}</h3>
+                        {provider.installed ? (
+                            provider.version && (
+                                <Pill tone="idle" mono>
+                                    {provider.version}
+                                </Pill>
+                            )
+                        ) : (
+                            <Pill>{t('install.notInstalled')}</Pill>
+                        )}
+                    </div>
+                    {install && <p className="text-xs text-text-muted">{install.description}</p>}
+                </div>
+            </header>
+            {install ? (
+                <ol aria-label={t('install.steps', { provider: provider.name })} className="flex min-w-0 flex-col gap-3">
+                    {steps.map((step, index) => (
+                        <Step key={index} index={index} state={states[index]!} title={step.title}>
+                            {step.body}
+                        </Step>
+                    ))}
+                </ol>
+            ) : (
+                <p className="text-xs text-text-muted">{t('install.fallback', { provider: provider.name })}</p>
+            )}
+            <p className="flex min-w-0 items-center gap-2 text-xs text-text-muted">
+                <span aria-hidden className={clsx('size-2 shrink-0 rounded-full', provider.installed ? 'bg-status-idle' : 'bg-text-faint')} />
+                {provider.installed ? t('install.footer.found') : t('install.footer.missing')}
+            </p>
+        </>
+    );
+}

package/src/providers/ProvidersPane.tsx

@@ -1,22 +1,25 @@
 import { useMemo, useState, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Plus, Terminal } from 'lucide-react';
+import { Plus } 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 { ErrorBoundary, Icon, IconButton, SectionLabel, Skeleton } from '@adecore/ui';
+import { ACCOUNT_TONE_CLASSES, accountLoginOf, accountName, accountsOfKind, accountStatusLine, type AccountEntry } from '../agents/accounts';
+import { ErrorBoundary, IconButton, SectionLabel, Skeleton } from '@adecore/ui';
 import { MasterDetail } from '@adecore/ui/settings';
 import { useChatHost } from '../host';
 import { useChatScope } from '../scope';
 import { AccountDetail } from './AccountDetail';
 import { AddAccountForm } from './AddAccountForm';
 import { CliDetail } from './CliDetail';
+import { InstallPage } from './InstallPage';
+import type { ProviderInstallStep } from './install-steps';
 import { CliMark } from './parts';
 import { useProviderAccounts } from '../state/provider-accounts';
 import { useProviders } from '../state/providers';
 
-type Picked = { kind: 'cli'; cli: AgentKind } | { kind: 'account'; id: string } | { kind: 'add'; cli: AgentKind };
+// `install` is a CLI picked while it was missing: its install page stays until it is installed and signed in.
+type Picked = { kind: 'cli'; cli: AgentKind } | { kind: 'install'; cli: AgentKind } | { kind: 'account'; id: string } | { kind: 'add'; cli: AgentKind };
 
 /* A row of the list with a control of its own beside the part that picks it, so the two never nest. */
 function ListRow({
@@ -54,10 +57,12 @@ interface ProvidersPaneProps {
     detailOf?(provider: ProviderInfo): ReactNode | null;
     /* False leaves "Defaults for new chats" out of a CLI's detail, for an app that decides those elsewhere. */
     defaults?: boolean;
+    /* A step of the app's own on the install page of a CLI, after its install, such as a server its chat needs; null adds none. */
+    installStepOf?(provider: ProviderInfo): ProviderInstallStep | null;
 }
 
 /* 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 }: ProvidersPaneProps) {
+export function ProvidersPane({ target = null, detailOf, defaults = true, installStepOf }: ProvidersPaneProps) {
     const { t } = useTranslation('agent-providers');
     const { id: scopeId } = useChatScope();
     const providers = useProviders((s) => s.providers);
@@ -72,7 +77,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;
@@ -80,7 +85,8 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
         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 as AgentKind | undefined) : 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: AgentKind): boolean => (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);
@@ -95,7 +101,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);
         }
     };
@@ -105,11 +111,11 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
         return (
             <div key={cli.kind} className="flex min-w-0 shrink-0 flex-col gap-0.5 pt-1">
                 <ListRow
-                    selected={current?.kind === 'cli' && current.cli === cli.kind}
+                    selected={picksCli(cli.kind)}
                     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 +131,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}
@@ -164,13 +170,13 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
                 <div className="mt-1.5 flex min-w-0 shrink-0 flex-col border-t border-border pt-2.5 pb-2">
                     <SectionLabel className="px-3 pt-1 pb-1.5">{t('list.notInstalled')}</SectionLabel>
                     {missing.map((cli) => (
-                        <div key={cli.kind} className="flex h-10 min-w-0 items-center gap-3 px-3 text-sm text-text-muted">
-                            <Icon icon={Terminal} size={14} className="shrink-0" />
-                            <span className="min-w-0 grow truncate">{cli.name}</span>
+                        <ListRow key={cli.kind} selected={picksCli(cli.kind)} onSelect={() => setPicked({ kind: 'install', cli: cli.kind })}>
+                            <CliMark kind={cli.kind} className="opacity-60" />
+                            <span className="min-w-0 grow truncate text-xs font-medium text-text-muted">{cli.name}</span>
                             <span className="shrink-0 text-xs text-text-faint">{t('list.missing')}</span>
-                        </div>
+                        </ListRow>
                     ))}
-                    <p className="mt-1 px-3 text-xs text-text-faint">{t('list.notInstalledNote')}</p>
+                    {missing.every((cli) => cli.install === undefined) && <p className="mt-1 px-3 text-xs text-text-faint">{t('list.notInstalledNote')}</p>}
                 </div>
             )}
         </>
@@ -180,7 +186,16 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
         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 <InstallPage key={provider.kind} provider={provider} signedIn={signedIn} extra={extra} />;
+            }
+        }
+        const own = current.kind === 'cli' || current.kind === 'install' ? (detailOf?.(provider) ?? null) : null;
         if (own !== null) {
             return own;
         }
@@ -190,6 +205,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 +219,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 +233,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/index.ts

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

package/src/providers/install-steps.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import type { ProviderInfo, ProviderPlatform } from '@adecore/agent-contracts';
+import { isApplePlatform } from '@adecore/ui';
+
+/* A step of the host's own on a provider's install page, such as a server its chat needs beside the CLI. */
+export interface ProviderInstallStep {
+    title: string;
+    done: boolean;
+    /* Drawn under the title; the page numbers the step and outlines it while it is the current one. */
+    body: ReactNode;
+}
+
+export type InstallStepState = 'done' | 'current' | 'later';
+
+const PLATFORMS: readonly ProviderPlatform[] = ['darwin', 'linux', 'win32'];
+
+/* The first step not done is the current one. */
+export function installStepStates(done: readonly boolean[]): InstallStepState[] {
+    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(): ProviderPlatform {
+    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: ProviderInfo, machine: ProviderPlatform): { offered: ProviderPlatform[]; initial: ProviderPlatform | null } {
+    const offered = PLATFORMS.filter((platform) => Boolean(provider.install?.commands[platform]));
+    return { offered, initial: offered.includes(machine) ? machine : (offered[0] ?? null) };
+}

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