@adecore/agents-react 0.0.1 → 0.17.0-beta.1

package/src/providers/AccountVariables.tsx

@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Lock, LockOpen, Plus, X } from 'lucide-react';
+import type { ProviderAccount } from '@adecore/agent-contracts';
+import { useChatScope } from '../scope';
+import { saveAccount } from './account-actions';
+import { draftsOf, emptyDraft, variablesChanged, variablesOf, variablesProblem, type VariableDraft } from './variables';
+import { SettingsRow, SettingsSection } from '@adecore/ui/settings';
+import { Button, FormError, Icon, IconButton, Input, Tooltip } from '@adecore/ui';
+
+interface AccountVariablesProps {
+    id: string;
+    account: ProviderAccount;
+    /* Whether the machine has a keychain to keep a sensitive value in. */
+    secretsAvailable: boolean;
+}
+
+/*
+ * The environment of one account, edited as a whole and saved with one button: a half-typed name or a
+ * secret that still has to be retyped would otherwise reach the machine one keystroke at a time.
+ */
+export function AccountVariables({ id, account, secretsAvailable }: AccountVariablesProps) {
+    const { t } = useTranslation('agent-providers');
+    const scope = useChatScope();
+    const [drafts, setDrafts] = useState<VariableDraft[]>(() => draftsOf(account.env));
+    const [saving, setSaving] = useState(false);
+    const changed = variablesChanged(drafts, account.env);
+    const problem = changed ? variablesProblem(drafts) : null;
+
+    const update = (key: string, patch: Partial<VariableDraft>): void => {
+        setDrafts((current) => current.map((draft) => (draft.key === key ? { ...draft, ...patch } : draft)));
+    };
+
+    const save = async (): Promise<void> => {
+        const env = variablesOf(drafts);
+        const { env: _env, ...rest } = account;
+        setSaving(true);
+        try {
+            await saveAccount(scope, id, env.length === 0 ? rest : { ...rest, env });
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <SettingsSection
+            title={t('account.variables.title')}
+            description={t('account.variables.description')}
+            action={
+                <Button variant="secondary" size="sm" onClick={() => setDrafts((current) => [...current, emptyDraft(false)])}>
+                    <Icon icon={Plus} size={14} />
+                    {t('account.variables.add')}
+                </Button>
+            }
+            footer={secretsAvailable ? undefined : t('account.variables.noKeychain')}
+        >
+            {drafts.length === 0 && <SettingsRow muted label={t('account.variables.none')} />}
+            {drafts.map((draft, index) => {
+                const name = draft.name.trim() || String(index + 1);
+                const kept = draft.value === '' && draft.sensitive && draft.kept === draft.name.trim();
+                const lockLabel = draft.sensitive ? t('account.variables.unlock', { name }) : t('account.variables.lock', { name });
+                // Off a keychain a value can only be made plain, never secret.
+                const lockDisabled = !secretsAvailable && !draft.sensitive;
+                return (
+                    <div key={draft.key} className="flex min-w-0 items-center gap-2 px-3.5 py-3 font-mono text-code">
+                        <Input
+                            mono
+                            className="h-7.5 w-47.5 shrink-0 max-[640px]:w-32"
+                            value={draft.name}
+                            spellCheck={false}
+                            autoComplete="off"
+                            aria-label={t('account.variables.name', { index: index + 1 })}
+                            placeholder="NAME"
+                            onChange={(event) => update(draft.key, { name: event.target.value })}
+                        />
+                        <span className="text-text-faint">=</span>
+                        <Input
+                            mono
+                            className="h-7.5 min-w-0 grow"
+                            type={draft.sensitive ? 'password' : 'text'}
+                            value={draft.value}
+                            spellCheck={false}
+                            autoComplete="off"
+                            aria-label={t('account.variables.value', { name })}
+                            placeholder={kept ? t('account.variables.kept') : undefined}
+                            onChange={(event) => update(draft.key, { value: event.target.value })}
+                        />
+                        <Tooltip label={lockDisabled ? t('account.variables.noKeychain') : lockLabel}>
+                            <span className="inline-flex">
+                                <IconButton
+                                    icon={draft.sensitive ? Lock : LockOpen}
+                                    size="sm"
+                                    label={lockLabel}
+                                    tooltip={false}
+                                    className={draft.sensitive ? 'text-text' : undefined}
+                                    aria-pressed={draft.sensitive}
+                                    disabled={lockDisabled}
+                                    onClick={() => update(draft.key, { sensitive: !draft.sensitive })}
+                                />
+                            </span>
+                        </Tooltip>
+                        <IconButton
+                            icon={X}
+                            size="sm"
+                            label={t('account.variables.remove', { name })}
+                            onClick={() => setDrafts((current) => current.filter((other) => other.key !== draft.key))}
+                        />
+                    </div>
+                );
+            })}
+            {changed && (
+                <div className="flex min-w-0 flex-wrap items-center justify-end gap-2 px-4.5 py-3">
+                    {problem !== null && (
+                        <FormError render={<span />} className="mr-auto">
+                            {problem}
+                        </FormError>
+                    )}
+                    <Button onClick={() => setDrafts(draftsOf(account.env))}>{t('account.variables.discard')}</Button>
+                    <Button variant="primary" disabled={problem !== null || saving} onClick={() => void save()}>
+                        {t('common.save')}
+                    </Button>
+                </div>
+            )}
+        </SettingsSection>
+    );
+}

package/src/providers/AddAccountForm.tsx

@@ -0,0 +1,121 @@
+import { useState, type FormEvent } from 'react';
+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 { chatHost } from '../host';
+import { useChatScope } from '../scope';
+import { createAccount, linkAccount } from './account-actions';
+import { AccountColors } from './AccountColors';
+import { DetailHeader, SettingsRow, SettingsSection } from '@adecore/ui/settings';
+import { Button, FormError, Icon, Input } from '@adecore/ui';
+import { CliTile } from './parts';
+import { providerAccountsOf } from '../state/provider-accounts';
+
+interface AddAccountFormProps {
+    provider: ProviderInfo;
+    entries: AccountEntry[];
+    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;
+}
+
+/*
+ * 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) {
+    const { t } = useTranslation('agent-providers');
+    const scope = useChatScope();
+    const [name, setName] = useState('');
+    const [color, setColor] = useState<string>(() => freeAccountColor(entries, chatHost().accents.current()));
+    const [advanced, setAdvanced] = useState(false);
+    const [folder, setFolder] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const label = name.trim();
+    const linking = advanced && folder.trim() !== '';
+
+    const submit = async (event: FormEvent): Promise<void> => {
+        event.preventDefault();
+        if (label === '' || busy) {
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            if (linking) {
+                const taken = new Set(Object.keys(providerAccountsOf(scope.id).accounts?.accounts ?? {}));
+                const id = mintAccountId(provider.kind, label, taken);
+                await linkAccount(scope, id, { kind: provider.kind, label, color, home: folder.trim() });
+                onAdded(id, label, false);
+            } else {
+                onAdded(await createAccount(scope, provider.kind, label, color), label, true);
+            }
+        } catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+            setBusy(false);
+        }
+    };
+
+    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')} />
+            <SettingsSection>
+                <SettingsRow
+                    label={t('add.name')}
+                    control={
+                        <Input
+                            className="w-55 max-w-full"
+                            value={name}
+                            maxLength={80}
+                            autoFocus
+                            placeholder={t('add.namePlaceholder')}
+                            aria-label={t('add.name')}
+                            onChange={(event) => setName(event.target.value)}
+                        />
+                    }
+                />
+                <SettingsRow label={t('add.color')} control={<AccountColors value={color} label={t('add.color')} onChange={setColor} />} />
+            </SettingsSection>
+            <div className="flex min-w-0 flex-col gap-2.5">
+                <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)}
+                >
+                    <Icon icon={ChevronRight} size={14} className={clsx('transition-transform', advanced && 'rotate-90')} />
+                    {t('add.advanced')}
+                </button>
+                {advanced && (
+                    <SettingsSection>
+                        <SettingsRow label={t('add.link.label')} description={t('add.link.description')}>
+                            <Input
+                                mono
+                                value={folder}
+                                spellCheck={false}
+                                autoComplete="off"
+                                placeholder={t('add.link.placeholder')}
+                                aria-label={t('add.link.label')}
+                                onChange={(event) => setFolder(event.target.value)}
+                            />
+                        </SettingsRow>
+                    </SettingsSection>
+                )}
+            </div>
+            <div className="flex min-w-0 flex-wrap items-center justify-end gap-2">
+                {error !== null && (
+                    <FormError render={<span />} className="mr-auto break-words">
+                        {error || t('add.failed')}
+                    </FormError>
+                )}
+                <Button onClick={onCancel}>{t('common.cancel')}</Button>
+                <Button type="submit" variant="primary" disabled={label === '' || busy}>
+                    {linking ? t('add.linkButton') : t('add.create')}
+                </Button>
+            </div>
+        </form>
+    );
+}

package/src/providers/CliDetail.tsx

@@ -0,0 +1,157 @@
+import { useTranslation } from 'react-i18next';
+import { ChevronRight, Plus } from 'lucide-react';
+import type { AgentKind, ModelInfo, ProviderInfo } from '@adecore/agent-contracts';
+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 { accountFor, forgetChatSelection, rememberChatAccount, rememberChatSelection, selectionFor, useChatPreferences } from '../chat/preferences';
+import { useChatScope } from '../scope';
+import { providerAbilities } from './provider-abilities';
+import { DetailHeader, SettingsRow, SettingsSection } from '@adecore/ui/settings';
+import { Button, Icon, Select } from '@adecore/ui';
+import { CliTile } from './parts';
+import { useProviderAccountsStore } from '../state/provider-accounts';
+
+const PROVIDER_DEFAULT = '';
+
+/* One row per knob the chosen model exposes; the composer's option picker shows the same descriptors. */
+function ModelOptionRows({ provider, model, options }: { provider: AgentKind; model: ModelInfo; options: Record<string, string | boolean> }) {
+    const setOption = (id: string, value: string | boolean): void => {
+        rememberChatSelection(provider, { model: model.slug, options: { ...options, [id]: value } });
+    };
+    return (
+        <>
+            {model.options.map((option) => (
+                <SettingsRow
+                    key={option.id}
+                    indent
+                    muted
+                    label={option.label}
+                    control={<ModelOptionControl option={option} options={options} layout="row" onChange={(value) => setOption(option.id, value)} />}
+                />
+            ))}
+        </>
+    );
+}
+
+interface CliDetailProps {
+    provider: ProviderInfo;
+    /* Null for a machine that keeps no accounts. */
+    entries: AccountEntry[] | null;
+    defaults: boolean;
+    canAddAccount: boolean;
+    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) {
+    const { t } = useTranslation('agent-providers');
+    const { id: scopeId } = useChatScope();
+    const preferences = useChatPreferences();
+    const selection = selectionFor(preferences, provider.kind);
+    const model = provider.models.find((entry) => entry.slug === selection?.model);
+    const machineAccounts = useProviderAccountsStore((s) => (s.byScope[scopeId]?.loaded ? s.byScope[scopeId].accounts : undefined));
+    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;
+
+    return (
+        <>
+            <DetailHeader
+                mark={<CliTile kind={provider.kind} />}
+                title={provider.name}
+                subtitle={`${provider.version ? `${t('abilities.version', { version: provider.version })} ` : ''}${providerAbilities(provider)}`}
+                actions={
+                    canAddAccount && (
+                        <Button variant="secondary" className="whitespace-nowrap" onClick={onAddAccount}>
+                            <Icon icon={Plus} size={14} />
+                            {t('cli.addAccount')}
+                        </Button>
+                    )
+                }
+            />
+            {defaults && (
+                <SettingsSection title={t('cli.defaults.title')} description={t('cli.defaults.description')}>
+                    {choosable.length > 0 && (
+                        <SettingsRow
+                            searchId="providers.defaults.account"
+                            label={t('cli.defaults.account')}
+                            control={
+                                <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),
+                                        icon: <AccountDot color={entry.account.color} className="size-2" />
+                                    }))}
+                                    onValueChange={(id) => rememberChatAccount(scopeId, provider.kind, id)}
+                                />
+                            }
+                        />
+                    )}
+                    {provider.models.length > 0 && (
+                        <SettingsRow
+                            searchId="providers.defaults.model"
+                            label={t('cli.defaults.model')}
+                            description={model ? t('cli.defaults.shared', { provider: provider.name }) : t('cli.defaults.usesCliDefault')}
+                            control={
+                                <Select
+                                    value={model?.slug ?? PROVIDER_DEFAULT}
+                                    label={t('cli.defaults.modelFor', { provider: provider.name })}
+                                    align="end"
+                                    items={[
+                                        { value: PROVIDER_DEFAULT, label: t('cli.defaults.providerDefault') },
+                                        ...provider.models.map((entry) => ({
+                                            value: entry.slug,
+                                            label: entry.legacy ? t('cli.defaults.legacyModel', { name: entry.name }) : entry.name
+                                        }))
+                                    ]}
+                                    onValueChange={(value) =>
+                                        value === PROVIDER_DEFAULT
+                                            ? forgetChatSelection(provider.kind)
+                                            : rememberChatSelection(provider.kind, {
+                                                  model: value,
+                                                  options: carryOptions(
+                                                      selection?.options ?? {},
+                                                      provider.models.find((entry) => entry.slug === value)
+                                                  )
+                                              })
+                                    }
+                                />
+                            }
+                        />
+                    )}
+                    {model && <ModelOptionRows provider={provider.kind} model={model} options={selection?.options ?? {}} />}
+                    {choosable.length === 0 && provider.models.length === 0 && <SettingsRow muted label={t('cli.defaults.usesCliDefault')} />}
+                </SettingsSection>
+            )}
+            {entries === null ? (
+                <p className="text-xs text-text-faint">{t('list.noAccounts')}</p>
+            ) : (
+                <SettingsSection title={t('cli.accounts')} footer={canAddAccount ? undefined : t('cli.onlyDefault', { provider: provider.name })}>
+                    {entries.map((entry) => {
+                        const status = accountStatusLine(entry.status, canLogIn);
+                        return (
+                            <button
+                                key={entry.id}
+                                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)}
+                            >
+                                <AccountDot color={entry.account.color} />
+                                <span className="min-w-0 grow truncate text-sm text-text">{accountName(entry, provider.name)}</span>
+                                <span className={`shrink-0 text-xs ${ACCOUNT_TONE_CLASSES[status.tone]}`}>{status.text}</span>
+                                <Icon icon={ChevronRight} size={14} className="shrink-0 text-text-faint" />
+                            </button>
+                        );
+                    })}
+                </SettingsSection>
+            )}
+        </>
+    );
+}

package/src/providers/ProvidersPane.tsx

@@ -0,0 +1,236 @@
+import { useMemo, useState, type ReactNode } from 'react';
+import clsx from 'clsx';
+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 { ErrorBoundary, Icon, IconButton, SectionLabel, Skeleton } from '@adecore/ui';
+import { MasterDetail } from '@adecore/ui/settings';
+import { chatHost } from '../host';
+import { useChatScope } from '../scope';
+import { AccountDetail } from './AccountDetail';
+import { AddAccountForm } from './AddAccountForm';
+import { CliDetail } from './CliDetail';
+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 };
+
+/* A row of the list with a control of its own beside the part that picks it, so the two never nest. */
+function ListRow({
+    selected,
+    onSelect,
+    children,
+    trailing,
+    className
+}: {
+    selected: boolean;
+    onSelect(): void;
+    children: ReactNode;
+    trailing?: ReactNode;
+    className?: string;
+}) {
+    return (
+        <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)}>
+            <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}
+            </button>
+            {trailing}
+        </div>
+    );
+}
+
+interface ProvidersPaneProps {
+    /* The row a search result leads to, by its `searchId`; the pane opens on the CLI it belongs to. */
+    target?: string | null;
+    /* The detail of a provider the app draws itself, such as a model the host runs on its own; null draws the CLI's own. */
+    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;
+}
+
+/* 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) {
+    const { t } = useTranslation('agent-providers');
+    const { id: scopeId } = useChatScope();
+    const providers = useProviders((s) => s.providers);
+    const loaded = useProviders((s) => s.loaded);
+    const accounts = useProviderAccounts((s) => s.accounts);
+    const { openLogin } = chatHost();
+    const loginBlocked = chatHost().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]);
+    const entriesOf = (kind: AgentKind): AccountEntry[] => accountsOfKind(accounts, kind);
+    const canAddAccount = (kind: AgentKind): boolean => accounts?.loginCommands?.[kind] !== undefined;
+
+    // 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 !== 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;
+
+    // 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) {
+        setSeenTarget(target);
+        if (target === 'providers.apple') {
+            setPicked({ kind: 'cli', cli: 'apple' });
+        } else if (target?.startsWith('providers.') && current?.kind !== 'cli' && provider !== null) {
+            setPicked({ kind: 'cli', cli: provider.kind });
+        }
+    }
+
+    const added = (id: string, name: string, made: boolean): void => {
+        setPicked({ kind: 'account', id });
+        if (made && provider !== null && openLogin !== null && loginBlocked === null) {
+            void openLogin(scopeId, provider.kind, id, name);
+        }
+    };
+
+    const group = (cli: ProviderInfo) => {
+        const entries = cli.installed ? entriesOf(cli.kind) : [];
+        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}
+                    onSelect={() => setPicked({ kind: 'cli', cli: cli.kind })}
+                    className="pr-1"
+                    trailing={
+                        canAddAccount(cli.kind) && (
+                            <IconButton
+                                icon={Plus}
+                                size="sm"
+                                label={t('list.addAccount', { provider: cli.name })}
+                                onClick={() => setPicked({ kind: 'add', cli: cli.kind })}
+                            />
+                        )
+                    }
+                >
+                    <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>}
+                </ListRow>
+                {entries.map((entry) => {
+                    const name = accountName(entry, cli.name);
+                    const status = accountStatusLine(entry.status, canAddAccount(cli.kind));
+                    return (
+                        <ListRow
+                            key={entry.id}
+                            selected={current?.kind === 'account' && current.id === entry.id}
+                            onSelect={() => setPicked({ kind: 'account', id: entry.id })}
+                        >
+                            <span className="grid w-3.5 shrink-0 place-items-center">
+                                <AccountDot color={entry.account.color} className="size-2.25" />
+                            </span>
+                            <span className="flex min-w-0 grow flex-col">
+                                <span className="flex min-w-0 items-center gap-2 text-sm text-text">
+                                    <span className="truncate">{name}</span>
+                                    {entry.isDefault && (
+                                        <span className="shrink-0 rounded-md bg-surface-active px-1.5 text-xs text-text-muted">{t('list.default')}</span>
+                                    )}
+                                </span>
+                                <span className={clsx('truncate text-xs', ACCOUNT_TONE_CLASSES[status.tone])}>{status.text}</span>
+                            </span>
+                        </ListRow>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    const list = !loaded ? (
+        <div className="flex flex-col gap-3 p-3">
+            <Skeleton className="w-32" />
+            <Skeleton className="w-40" />
+        </div>
+    ) : (
+        <>
+            {installed.map(group)}
+            {installed.length === 0 && <p className="px-3 py-2 text-xs text-text-muted">{t('list.none')}</p>}
+            {missing.length > 0 && (
+                <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>
+                            <span className="shrink-0 text-xs text-text-faint">{t('list.missing')}</span>
+                        </div>
+                    ))}
+                    <p className="mt-1 px-3 text-xs text-text-faint">{t('list.notInstalledNote')}</p>
+                </div>
+            )}
+        </>
+    );
+
+    const detail = (): ReactNode => {
+        if (current === null || provider === null) {
+            return null;
+        }
+        const own = current.kind === 'cli' ? (detailOf?.(provider) ?? null) : null;
+        if (own !== null) {
+            return own;
+        }
+        if (current.kind === 'add') {
+            return (
+                <AddAccountForm
+                    key={provider.kind}
+                    provider={provider}
+                    entries={entriesOf(provider.kind)}
+                    onCancel={() => setPicked({ kind: 'cli', cli: provider.kind })}
+                    onAdded={added}
+                />
+            );
+        }
+        if (current.kind === 'account') {
+            const entry = entriesOf(provider.kind).find((candidate) => candidate.id === current.id);
+            return (
+                entry && (
+                    <AccountDetail
+                        key={entry.id}
+                        provider={provider}
+                        entry={entry}
+                        canLogIn={openLogin !== null && canAddAccount(provider.kind)}
+                        loginBlocked={loginBlocked}
+                        secretsAvailable={accounts?.secretsAvailable === true}
+                        onRemoved={() => setPicked({ kind: 'cli', cli: provider.kind })}
+                    />
+                )
+            );
+        }
+        return (
+            <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 (
+        <MasterDetail
+            listWidth={340}
+            listLabel={t('list.label')}
+            list={list}
+            detail={
+                <ErrorBoundary label={t('failed')} resetKeys={[scopeId, current?.kind, currentCli]}>
+                    <div className="flex min-w-0 flex-col gap-7">{detail()}</div>
+                </ErrorBoundary>
+            }
+        />
+    );
+}