@adecore/agents-react 0.31.7 → 0.31.9

package/dist/locales/en/agent-providers.d.ts

@@ -15,6 +15,9 @@ declare const _default: {
     list: {
         label: string;
         default: string;
+        ready: string;
+        needsSetup: string;
+        signedOut: string;
         addAccount: string;
         notInstalled: string;
         missing: string;

package/dist/locales/en/agent-providers.js

@@ -15,6 +15,9 @@ export default {
     list: {
         label: 'Agent CLIs and their accounts',
         default: 'Default',
+        ready: 'Ready',
+        needsSetup: 'Needs setup',
+        signedOut: 'Signed out',
         addAccount: 'Add a {{provider}} account',
         notInstalled: 'Not installed',
         missing: 'Missing',

package/dist/locales/nl/agent-providers.d.ts

@@ -15,6 +15,9 @@ declare const _default: {
     list: {
         label: string;
         default: string;
+        ready: string;
+        needsSetup: string;
+        signedOut: string;
         addAccount: string;
         notInstalled: string;
         missing: string;

package/dist/locales/nl/agent-providers.js

@@ -15,6 +15,9 @@ export default {
     list: {
         label: "Agent-CLI's en hun accounts",
         default: 'Standaard',
+        ready: 'Klaar',
+        needsSetup: 'Nog instellen',
+        signedOut: 'Uitgelogd',
         addAccount: 'Een {{provider}}-account toevoegen',
         notInstalled: 'Niet geïnstalleerd',
         missing: 'Ontbreekt',

package/dist/providers/ProviderList.d.ts

@@ -0,0 +1,11 @@
+import type { AgentKind } from '@adecore/agent-contracts';
+import type { Picked } from './pane-target.js';
+import { type ProviderGroups } from './provider-groups.js';
+interface ProviderListProps {
+    groups: ProviderGroups;
+    current: Picked | null;
+    canAddAccount(kind: AgentKind): boolean;
+    onPick(picked: Picked): void;
+}
+export declare function ProviderList({ groups, current, canAddAccount, onPick }: ProviderListProps): import("react").JSX.Element;
+export {};

package/dist/providers/ProviderList.js

@@ -0,0 +1,39 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Plus } from 'lucide-react';
+import { AccountDot } from '../agents/AccountDot.js';
+import { accountName } from '../agents/accounts.js';
+import { IconButton, SectionLabel } from '@adecore/ui';
+import { CliMark } from './parts.js';
+import { accountNote } from './provider-groups.js';
+const NOTE_TONES = {
+    muted: 'text-text-muted',
+    warning: 'text-status-needs-you'
+};
+function Note({ note }) {
+    return note === null ? null : _jsx("span", { className: clsx('shrink-0 truncate text-xs', NOTE_TONES[note.tone]), children: note.text });
+}
+/*
+ * A row of the list with a control of its own beside the part that picks it, so the two never nest. Every row
+ * keeps the control's room, so the words on the right line up whether a row has one or not.
+ */
+function ListRow({ selected, onSelect, children, trailing, className }) {
+    return (_jsxs("div", { className: clsx('group flex min-w-0 shrink-0 items-center gap-1 rounded-lg pr-1', selected ? 'bg-text/5' : 'hover:bg-surface-hover'), children: [_jsx("button", { type: "button", "aria-current": selected ? 'true' : undefined, className: clsx('flex min-w-0 grow items-center gap-3 self-stretch rounded-lg pl-3 text-left focus-visible:-outline-offset-2', className), onClick: onSelect, children: children }), _jsx("span", { className: "flex w-7 shrink-0 justify-center", children: trailing })] }));
+}
+/* The providers by whether they are ready, need setup or are not installed; a group without providers is left out. */
+export function ProviderList({ groups, current, canAddAccount, onPick }) {
+    const { t } = useTranslation('agent-providers');
+    const picksCli = (kind) => (current?.kind === 'cli' || current?.kind === 'install') && current.cli === kind;
+    const picksAccount = (id) => current?.kind === 'account' && current.id === id;
+    const row = ({ provider, entries, note }) => {
+        // One account has no row of its own, so picking it lights up its provider.
+        const several = entries.length > 1;
+        const selected = picksCli(provider.kind) || (!several && entries[0] !== undefined && picksAccount(entries[0].id));
+        return (_jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-0.5", children: [_jsxs(ListRow, { selected: selected, onSelect: () => onPick({ kind: 'cli', cli: provider.kind }), className: "py-2", trailing: canAddAccount(provider.kind) && (_jsx(IconButton, { icon: Plus, size: "sm", label: t('list.addAccount', { provider: provider.name }), className: clsx('group-hover:opacity-100 focus-visible:opacity-100', selected ? 'opacity-100' : 'opacity-0'), onClick: () => onPick({ kind: 'add', cli: provider.kind }) })), children: [_jsx(CliMark, { kind: provider.kind }), _jsx("span", { className: "min-w-0 grow truncate text-sm font-medium text-text", children: provider.name }), !several && _jsx(Note, { note: note })] }), several &&
+                    entries.map((entry) => (_jsxs(ListRow, { selected: picksAccount(entry.id), onSelect: () => onPick({ kind: 'account', id: entry.id }), className: "py-1.5", children: [_jsx("span", { className: "grid w-3.5 shrink-0 place-items-center", children: _jsx(AccountDot, { color: entry.account.color, className: "size-2.25" }) }), _jsx("span", { className: "min-w-0 grow truncate text-sm text-text", children: accountName(entry, provider.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(Note, { note: accountNote(entry.status) })] }, entry.id)))] }, provider.kind));
+    };
+    const section = (label, rows) => (_jsxs("section", { "aria-label": label, className: "flex min-w-0 shrink-0 flex-col gap-0.5 pb-2", children: [_jsx(SectionLabel, { className: "px-3 pt-1 pb-1", children: label }), rows] }, label));
+    return (_jsxs(_Fragment, { children: [groups.ready.length > 0 && section(t('list.ready'), groups.ready.map(row)), groups.setup.length > 0 && section(t('list.needsSetup'), groups.setup.map(row)), groups.ready.length === 0 && groups.setup.length === 0 && _jsx("p", { className: "px-3 py-2 text-xs text-text-muted", children: t('list.none') }), groups.missing.length > 0 &&
+                section(t('list.notInstalled'), _jsxs(_Fragment, { children: [groups.missing.map((provider) => (_jsxs(ListRow, { selected: picksCli(provider.kind), onSelect: () => onPick({ kind: 'install', cli: provider.kind }), className: "py-2", children: [_jsx(CliMark, { kind: provider.kind, className: "opacity-60" }), _jsx("span", { className: "min-w-0 grow truncate text-sm font-medium text-text-muted", children: provider.name })] }, provider.kind))), groups.missing.every((provider) => provider.install === undefined) && (_jsx("p", { className: "mt-1 px-3 text-xs text-text-faint", children: t('list.notInstalledNote') }))] }))] }));
+}

package/dist/providers/ProvidersPane.d.ts

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

package/dist/providers/ProvidersPane.js

@@ -1,11 +1,8 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
-import clsx from 'clsx';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Plus } from 'lucide-react';
-import { AccountDot } from '../agents/AccountDot.js';
-import { ACCOUNT_TONE_CLASSES, accountLoginOf, accountName, accountsOfKind, accountStatusLine } from '../agents/accounts.js';
-import { ErrorBoundary, IconButton, SectionLabel, Skeleton } from '@adecore/ui';
+import { accountLoginOf, accountsOfKind } from '../agents/accounts.js';
+import { ErrorBoundary, Skeleton } from '@adecore/ui';
 import { MasterDetail } from '@adecore/ui/settings';
 import { useChatHost } from '../host.js';
 import { useChatScope } from '../scope.js';
@@ -14,15 +11,12 @@ import { AddAccountForm } from './AddAccountForm.js';
 import { CliDetail } from './CliDetail.js';
 import { InstallPage } from './InstallPage.js';
 import { pickOfTarget } from './pane-target.js';
-import { CliMark } from './parts.js';
+import { groupProviders } from './provider-groups.js';
+import { ProviderList } from './ProviderList.js';
 import { useProviderAccounts } from '../state/provider-accounts.js';
 import { useProviders } from '../state/providers.js';
-/* 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 }) {
-    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, installStepOf }) {
+export function ProvidersPane({ target = null, detailOf, defaults = true, installStepOf, setupStatusOf }) {
     const { t } = useTranslation('agent-providers');
     const { id: scopeId } = useChatScope();
     const providers = useProviders((s) => s.providers);
@@ -32,9 +26,8 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
     const { openLogin } = host;
     const loginBlocked = host.useLoginBlocked(scopeId);
     const [picked, setPicked] = useState(() => pickOfTarget(target, 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 groups = groupProviders(providers, accounts, setupStatusOf);
+    const installed = [...groups.ready, ...groups.setup].map((row) => row.provider);
     const entriesOf = (kind) => accountsOfKind(accounts, kind);
     const loginOf = (kind) => accountLoginOf(accounts, kind);
     // What was picked may be gone since (an account removed elsewhere); the first CLI stands in for it.
@@ -43,7 +36,6 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
     const currentAccount = current?.kind === 'account' ? accounts?.accounts[current.id] : undefined;
     const currentCli = current === null ? null : current.kind === 'account' ? currentAccount?.kind : current.cli;
     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) {
@@ -62,15 +54,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
             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: 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, 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(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 list = !loaded ? (_jsxs("div", { className: "flex flex-col gap-3 p-3", children: [_jsx(Skeleton, { className: "w-32" }), _jsx(Skeleton, { className: "w-40" })] })) : (_jsx(ProviderList, { groups: groups, current: current, canAddAccount: (kind) => loginOf(kind) !== null, onPick: setPicked }));
     const detail = () => {
         if (current === null || provider === null) {
             return null;

package/dist/providers/index.d.ts

@@ -8,4 +8,5 @@ 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 type { ProviderSetupStatus } from './provider-groups.js';
 export { CliMark, CliTile } from './parts.js';

package/dist/providers/provider-groups.d.ts

@@ -0,0 +1,18 @@
+import type { ProviderAccounts, ProviderAccountStatus, ProviderInfo } from '@adecore/agent-contracts';
+import { type AccountEntry } from '../agents/accounts.js';
+export interface ProviderSetupStatus {
+    text: string;
+    tone: 'muted' | 'warning';
+}
+export interface ProviderRow {
+    provider: ProviderInfo;
+    entries: AccountEntry[];
+    note: ProviderSetupStatus | null;
+}
+export interface ProviderGroups {
+    ready: ProviderRow[];
+    setup: ProviderRow[];
+    missing: ProviderInfo[];
+}
+export declare function accountNote(status: ProviderAccountStatus | null): ProviderSetupStatus | null;
+export declare function groupProviders(providers: readonly ProviderInfo[], accounts: ProviderAccounts | null, setupStatusOf?: (provider: ProviderInfo) => ProviderSetupStatus | null): ProviderGroups;

package/dist/providers/provider-groups.js

@@ -0,0 +1,52 @@
+import i18next from 'i18next';
+import { accountsOfKind } from '../agents/accounts.js';
+/* What an account says beside its name: its plan while it is ready, a short word when it is not, nothing while it is checked. */
+export function accountNote(status) {
+    const words = (key) => i18next.t(`agent-providers:${key}`);
+    switch (status?.state ?? 'checking') {
+        case 'checking':
+            return null;
+        case 'ready':
+            return status?.plan ? { text: status.plan, tone: 'muted' } : null;
+        case 'signed-out':
+            return { text: words('list.signedOut'), tone: 'warning' };
+        case 'failed':
+            return { text: words('status.failed'), tone: 'warning' };
+        case 'folder-missing':
+            return { text: words('status.folderMissing'), tone: 'warning' };
+        case 'disabled':
+            return { text: words('status.disabled'), tone: 'muted' };
+        case 'not-found':
+            return { text: words('status.notFound'), tone: 'muted' };
+        case 'unavailable':
+            return { text: words('status.unavailable'), tone: 'muted' };
+    }
+}
+// An account still being checked counts as usable, so a provider does not hop between groups while the checks run.
+const usable = (entry) => entry.status === null || entry.status.state === 'ready' || entry.status.state === 'checking';
+/*
+ * The providers in the three groups of the list. A provider the host says is not set up needs setup whatever
+ * its accounts say; otherwise one usable account, or none to read, makes it ready.
+ */
+export function groupProviders(providers, accounts, setupStatusOf) {
+    const groups = { ready: [], setup: [], missing: [] };
+    for (const provider of providers) {
+        // A provider that never runs in a terminal is no CLI to install: it is turned on in its own detail.
+        if (!provider.installed && provider.capabilities.terminal) {
+            groups.missing.push(provider);
+            continue;
+        }
+        const entries = provider.installed ? accountsOfKind(accounts, provider.kind) : [];
+        const hostStatus = setupStatusOf?.(provider) ?? null;
+        if (hostStatus !== null) {
+            groups.setup.push({ provider, entries, note: hostStatus });
+        }
+        else if (entries.length === 0 || entries.some(usable)) {
+            groups.ready.push({ provider, entries, note: entries.length === 1 ? accountNote(entries[0].status) : null });
+        }
+        else {
+            groups.setup.push({ provider, entries, note: accountNote(entries[0].status) });
+        }
+    }
+    return groups;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.31.7",
+  "version": "0.31.9",
   "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.31.7",
-    "@adecore/editor": "0.31.7",
-    "@adecore/editor-react": "0.31.7",
-    "@adecore/intelligent-ui": "0.31.7",
-    "@adecore/merge": "0.31.7",
+    "@adecore/agent-contracts": "0.31.9",
+    "@adecore/editor": "0.31.9",
+    "@adecore/editor-react": "0.31.9",
+    "@adecore/intelligent-ui": "0.31.9",
+    "@adecore/merge": "0.31.9",
     "@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.31.7",
+    "@adecore/ui": "^0.31.9",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.31.7",
+    "@adecore/ui": "0.31.9",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/locales/en/agent-providers.ts

@@ -15,6 +15,9 @@ export default {
     list: {
         label: 'Agent CLIs and their accounts',
         default: 'Default',
+        ready: 'Ready',
+        needsSetup: 'Needs setup',
+        signedOut: 'Signed out',
         addAccount: 'Add a {{provider}} account',
         notInstalled: 'Not installed',
         missing: 'Missing',

package/src/locales/nl/agent-providers.ts

@@ -15,6 +15,9 @@ export default {
     list: {
         label: "Agent-CLI's en hun accounts",
         default: 'Standaard',
+        ready: 'Klaar',
+        needsSetup: 'Nog instellen',
+        signedOut: 'Uitgelogd',
         addAccount: 'Een {{provider}}-account toevoegen',
         notInstalled: 'Niet geïnstalleerd',
         missing: 'Ontbreekt',

package/src/providers/ProviderList.tsx

@@ -0,0 +1,144 @@
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Plus } from 'lucide-react';
+import type { AgentKind } from '@adecore/agent-contracts';
+import { AccountDot } from '../agents/AccountDot';
+import { accountName } from '../agents/accounts';
+import { IconButton, SectionLabel } from '@adecore/ui';
+import type { Picked } from './pane-target';
+import { CliMark } from './parts';
+import { accountNote, type ProviderGroups, type ProviderRow, type ProviderSetupStatus } from './provider-groups';
+
+const NOTE_TONES: Record<ProviderSetupStatus['tone'], string> = {
+    muted: 'text-text-muted',
+    warning: 'text-status-needs-you'
+};
+
+function Note({ note }: { note: ProviderSetupStatus | null }) {
+    return note === null ? null : <span className={clsx('shrink-0 truncate text-xs', NOTE_TONES[note.tone])}>{note.text}</span>;
+}
+
+/*
+ * A row of the list with a control of its own beside the part that picks it, so the two never nest. Every row
+ * keeps the control's room, so the words on the right line up whether a row has one or not.
+ */
+function ListRow({
+    selected,
+    onSelect,
+    children,
+    trailing,
+    className
+}: {
+    selected: boolean;
+    onSelect(): void;
+    children: ReactNode;
+    trailing?: ReactNode;
+    className?: string;
+}) {
+    return (
+        <div className={clsx('group flex min-w-0 shrink-0 items-center gap-1 rounded-lg pr-1', selected ? 'bg-text/5' : 'hover:bg-surface-hover')}>
+            <button
+                type="button"
+                aria-current={selected ? 'true' : undefined}
+                className={clsx('flex min-w-0 grow items-center gap-3 self-stretch rounded-lg pl-3 text-left focus-visible:-outline-offset-2', className)}
+                onClick={onSelect}
+            >
+                {children}
+            </button>
+            <span className="flex w-7 shrink-0 justify-center">{trailing}</span>
+        </div>
+    );
+}
+
+interface ProviderListProps {
+    groups: ProviderGroups;
+    current: Picked | null;
+    canAddAccount(kind: AgentKind): boolean;
+    onPick(picked: Picked): void;
+}
+
+/* The providers by whether they are ready, need setup or are not installed; a group without providers is left out. */
+export function ProviderList({ groups, current, canAddAccount, onPick }: ProviderListProps) {
+    const { t } = useTranslation('agent-providers');
+    const picksCli = (kind: AgentKind): boolean => (current?.kind === 'cli' || current?.kind === 'install') && current.cli === kind;
+    const picksAccount = (id: string): boolean => current?.kind === 'account' && current.id === id;
+
+    const row = ({ provider, entries, note }: ProviderRow) => {
+        // One account has no row of its own, so picking it lights up its provider.
+        const several = entries.length > 1;
+        const selected = picksCli(provider.kind) || (!several && entries[0] !== undefined && picksAccount(entries[0].id));
+        return (
+            <div key={provider.kind} className="flex min-w-0 shrink-0 flex-col gap-0.5">
+                <ListRow
+                    selected={selected}
+                    onSelect={() => onPick({ kind: 'cli', cli: provider.kind })}
+                    className="py-2"
+                    trailing={
+                        canAddAccount(provider.kind) && (
+                            <IconButton
+                                icon={Plus}
+                                size="sm"
+                                label={t('list.addAccount', { provider: provider.name })}
+                                className={clsx('group-hover:opacity-100 focus-visible:opacity-100', selected ? 'opacity-100' : 'opacity-0')}
+                                onClick={() => onPick({ kind: 'add', cli: provider.kind })}
+                            />
+                        )
+                    }
+                >
+                    <CliMark kind={provider.kind} />
+                    <span className="min-w-0 grow truncate text-sm font-medium text-text">{provider.name}</span>
+                    {!several && <Note note={note} />}
+                </ListRow>
+                {several &&
+                    entries.map((entry) => (
+                        <ListRow key={entry.id} selected={picksAccount(entry.id)} onSelect={() => onPick({ kind: 'account', id: entry.id })} className="py-1.5">
+                            <span className="grid w-3.5 shrink-0 place-items-center">
+                                <AccountDot color={entry.account.color} className="size-2.25" />
+                            </span>
+                            <span className="min-w-0 grow truncate text-sm text-text">{accountName(entry, provider.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>
+                            )}
+                            <Note note={accountNote(entry.status)} />
+                        </ListRow>
+                    ))}
+            </div>
+        );
+    };
+
+    const section = (label: string, rows: ReactNode) => (
+        <section key={label} aria-label={label} className="flex min-w-0 shrink-0 flex-col gap-0.5 pb-2">
+            <SectionLabel className="px-3 pt-1 pb-1">{label}</SectionLabel>
+            {rows}
+        </section>
+    );
+
+    return (
+        <>
+            {groups.ready.length > 0 && section(t('list.ready'), groups.ready.map(row))}
+            {groups.setup.length > 0 && section(t('list.needsSetup'), groups.setup.map(row))}
+            {groups.ready.length === 0 && groups.setup.length === 0 && <p className="px-3 py-2 text-xs text-text-muted">{t('list.none')}</p>}
+            {groups.missing.length > 0 &&
+                section(
+                    t('list.notInstalled'),
+                    <>
+                        {groups.missing.map((provider) => (
+                            <ListRow
+                                key={provider.kind}
+                                selected={picksCli(provider.kind)}
+                                onSelect={() => onPick({ kind: 'install', cli: provider.kind })}
+                                className="py-2"
+                            >
+                                <CliMark kind={provider.kind} className="opacity-60" />
+                                <span className="min-w-0 grow truncate text-sm font-medium text-text-muted">{provider.name}</span>
+                            </ListRow>
+                        ))}
+                        {groups.missing.every((provider) => provider.install === undefined) && (
+                            <p className="mt-1 px-3 text-xs text-text-faint">{t('list.notInstalledNote')}</p>
+                        )}
+                    </>
+                )}
+        </>
+    );
+}

package/src/providers/ProvidersPane.tsx

@@ -1,11 +1,8 @@
-import { useMemo, useState, type ReactNode } from 'react';
-import clsx from 'clsx';
+import { useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Plus } from 'lucide-react';
 import type { AgentKind, ProviderInfo } from '@adecore/agent-contracts';
-import { AccountDot } from '../agents/AccountDot';
-import { ACCOUNT_TONE_CLASSES, accountLoginOf, accountName, accountsOfKind, accountStatusLine, type AccountEntry } from '../agents/accounts';
-import { ErrorBoundary, IconButton, SectionLabel, Skeleton } from '@adecore/ui';
+import { accountLoginOf, accountsOfKind, type AccountEntry } from '../agents/accounts';
+import { ErrorBoundary, Skeleton } from '@adecore/ui';
 import { MasterDetail } from '@adecore/ui/settings';
 import { useChatHost } from '../host';
 import { useChatScope } from '../scope';
@@ -15,39 +12,11 @@ import { CliDetail } from './CliDetail';
 import { InstallPage } from './InstallPage';
 import type { ProviderInstallStep } from './install-steps';
 import { pickOfTarget, type Picked } from './pane-target';
-import { CliMark } from './parts';
+import { groupProviders, type ProviderSetupStatus } from './provider-groups';
+import { ProviderList } from './ProviderList';
 import { useProviderAccounts } from '../state/provider-accounts';
 import { useProviders } from '../state/providers';
 
-/* 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. `providers.install.<kind>` opens on that CLI's install page, or on its detail once it is installed. */
     target?: string | null;
@@ -57,10 +26,12 @@ interface ProvidersPaneProps {
     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;
+    /* Why a provider is not usable yet when the app knows better than its accounts, such as one turned off in its own detail; null leaves it to the accounts. */
+    setupStatusOf?(provider: ProviderInfo): ProviderSetupStatus | 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, installStepOf }: ProvidersPaneProps) {
+export function ProvidersPane({ target = null, detailOf, defaults = true, installStepOf, setupStatusOf }: ProvidersPaneProps) {
     const { t } = useTranslation('agent-providers');
     const { id: scopeId } = useChatScope();
     const providers = useProviders((s) => s.providers);
@@ -71,9 +42,8 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
     const loginBlocked = host.useLoginBlocked(scopeId);
     const [picked, setPicked] = useState<Picked | null>(() => pickOfTarget(target, 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 groups = groupProviders(providers, accounts, setupStatusOf);
+    const installed = [...groups.ready, ...groups.setup].map((row) => row.provider);
     const entriesOf = (kind: AgentKind): AccountEntry[] => accountsOfKind(accounts, kind);
     const loginOf = (kind: AgentKind) => accountLoginOf(accounts, kind);
 
@@ -84,7 +54,6 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
     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 = (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);
@@ -105,80 +74,13 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
         }
     };
 
-    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={picksCli(cli.kind)}
-                    onSelect={() => setPicked({ kind: 'cli', cli: cli.kind })}
-                    className="pr-1"
-                    trailing={
-                        loginOf(cli.kind) !== null && (
-                            <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.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, loginOf(cli.kind) === 'terminal');
-                    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) => (
-                        <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>
-                        </ListRow>
-                    ))}
-                    {missing.every((cli) => cli.install === undefined) && <p className="mt-1 px-3 text-xs text-text-faint">{t('list.notInstalledNote')}</p>}
-                </div>
-            )}
-        </>
+        <ProviderList groups={groups} current={current} canAddAccount={(kind) => loginOf(kind) !== null} onPick={setPicked} />
     );
 
     const detail = (): ReactNode => {

package/src/providers/index.ts

@@ -9,4 +9,5 @@ export { carryOptions } from '../agents/model-options';
 export { type ModelRequirement } from '../agents/model-requirement';
 export { ProvidersPane } from './ProvidersPane';
 export type { ProviderInstallStep } from './install-steps';
+export type { ProviderSetupStatus } from './provider-groups';
 export { CliMark, CliTile } from './parts';

package/src/providers/provider-groups.ts

@@ -0,0 +1,77 @@
+import i18next from 'i18next';
+import type { ProviderAccounts, ProviderAccountStatus, ProviderInfo } from '@adecore/agent-contracts';
+import { accountsOfKind, type AccountEntry } from '../agents/accounts';
+
+/* A few words beside a provider in the list; `warning` asks the person to act. */
+export interface ProviderSetupStatus {
+    text: string;
+    tone: 'muted' | 'warning';
+}
+
+export interface ProviderRow {
+    provider: ProviderInfo;
+    entries: AccountEntry[];
+    /* What the row says on its right: the plan of its one account, or what is still missing. */
+    note: ProviderSetupStatus | null;
+}
+
+export interface ProviderGroups {
+    ready: ProviderRow[];
+    setup: ProviderRow[];
+    missing: ProviderInfo[];
+}
+
+/* What an account says beside its name: its plan while it is ready, a short word when it is not, nothing while it is checked. */
+export function accountNote(status: ProviderAccountStatus | null): ProviderSetupStatus | null {
+    const words = (key: string): string => i18next.t(`agent-providers:${key}`);
+    switch (status?.state ?? 'checking') {
+        case 'checking':
+            return null;
+        case 'ready':
+            return status?.plan ? { text: status.plan, tone: 'muted' } : null;
+        case 'signed-out':
+            return { text: words('list.signedOut'), tone: 'warning' };
+        case 'failed':
+            return { text: words('status.failed'), tone: 'warning' };
+        case 'folder-missing':
+            return { text: words('status.folderMissing'), tone: 'warning' };
+        case 'disabled':
+            return { text: words('status.disabled'), tone: 'muted' };
+        case 'not-found':
+            return { text: words('status.notFound'), tone: 'muted' };
+        case 'unavailable':
+            return { text: words('status.unavailable'), tone: 'muted' };
+    }
+}
+
+// An account still being checked counts as usable, so a provider does not hop between groups while the checks run.
+const usable = (entry: AccountEntry): boolean => entry.status === null || entry.status.state === 'ready' || entry.status.state === 'checking';
+
+/*
+ * The providers in the three groups of the list. A provider the host says is not set up needs setup whatever
+ * its accounts say; otherwise one usable account, or none to read, makes it ready.
+ */
+export function groupProviders(
+    providers: readonly ProviderInfo[],
+    accounts: ProviderAccounts | null,
+    setupStatusOf?: (provider: ProviderInfo) => ProviderSetupStatus | null
+): ProviderGroups {
+    const groups: ProviderGroups = { ready: [], setup: [], missing: [] };
+    for (const provider of providers) {
+        // A provider that never runs in a terminal is no CLI to install: it is turned on in its own detail.
+        if (!provider.installed && provider.capabilities.terminal) {
+            groups.missing.push(provider);
+            continue;
+        }
+        const entries = provider.installed ? accountsOfKind(accounts, provider.kind) : [];
+        const hostStatus = setupStatusOf?.(provider) ?? null;
+        if (hostStatus !== null) {
+            groups.setup.push({ provider, entries, note: hostStatus });
+        } else if (entries.length === 0 || entries.some(usable)) {
+            groups.ready.push({ provider, entries, note: entries.length === 1 ? accountNote(entries[0]!.status) : null });
+        } else {
+            groups.setup.push({ provider, entries, note: accountNote(entries[0]!.status) });
+        }
+    }
+    return groups;
+}