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

package/src/providers/account-actions.ts

@@ -0,0 +1,67 @@
+import i18next from 'i18next';
+import type { AgentKind, ProviderAccount, ProviderAccountMap } from '@adecore/agent-contracts';
+import { accountFor, readChatPreferences, rememberChatAccount } from '../chat/preferences';
+import { chatHost } from '../host';
+import type { ChatScope } from '../scope';
+import { providerAccountsOf, useProviderAccountsStore } from '../state/provider-accounts';
+import type { ChatTransport } from '../transport';
+
+function words(key: string, values?: Record<string, string>): string {
+    return i18next.t(`agent-providers:${key}`, values);
+}
+
+function reason(e: unknown): string {
+    return e instanceof Error ? e.message : String(e);
+}
+
+function linkTo(scope: ChatScope): ChatTransport {
+    if (scope.transport.status !== 'open') {
+        throw new Error(words('notAnswering'));
+    }
+    return scope.transport;
+}
+
+/* The whole map, as `accounts.save` takes it. Answers false when the host refused, which a toast then says. */
+export async function saveAccounts(scope: ChatScope, accounts: ProviderAccountMap): Promise<boolean> {
+    try {
+        useProviderAccountsStore.getState().set(scope.id, await linkTo(scope).request('accounts.save', { accounts }));
+        return true;
+    } catch (e) {
+        chatHost().notify({ id: `providers-save-${scope.id}`, kind: 'error', title: words('account.saveFailed'), description: reason(e) });
+        return false;
+    }
+}
+
+/* One account changed and every other one as the host last said. */
+export function saveAccount(scope: ChatScope, id: string, account: ProviderAccount): Promise<boolean> {
+    const current = providerAccountsOf(scope.id).accounts?.accounts ?? {};
+    return saveAccounts(scope, { ...current, [id]: account });
+}
+
+/*
+ * Forgets an account; its folder stays where it is. A pick for new agents that named it goes back to
+ * the CLI's default account, since no chat started from it yet.
+ */
+export async function removeAccount(scope: ChatScope, id: string, kind: AgentKind): Promise<void> {
+    const { [id]: _gone, ...rest } = providerAccountsOf(scope.id).accounts?.accounts ?? {};
+    if (!(await saveAccounts(scope, rest))) {
+        throw new Error(words('account.saveFailed'));
+    }
+    if (accountFor(readChatPreferences(), scope.id, kind) === id) {
+        rememberChatAccount(scope.id, kind, null);
+    }
+}
+
+/* An account in a folder the host makes for it; answers its id. Throws what the host said, for the form to show. */
+export async function createAccount(scope: ChatScope, kind: AgentKind, label: string, color: string): Promise<string> {
+    const created = await linkTo(scope).request('accounts.create', { kind, label, color });
+    const { id, ...accounts } = created;
+    useProviderAccountsStore.getState().set(scope.id, accounts);
+    return id;
+}
+
+/* An account in a folder that is already on the host. Throws what the host said, for the form to show. */
+export async function linkAccount(scope: ChatScope, id: string, account: ProviderAccount): Promise<void> {
+    const current = providerAccountsOf(scope.id).accounts?.accounts ?? {};
+    useProviderAccountsStore.getState().set(scope.id, await linkTo(scope).request('accounts.save', { accounts: { ...current, [id]: account } }));
+}

package/src/providers/parts.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import type { AgentKind } from '@adecore/agent-contracts';
+import { AgentIcon } from '../agents/AgentIcon';
+
+// Each CLI in its color of the usage charts, so a mark here reads as the same CLI there.
+const CLI_COLORS: Record<AgentKind, string> = {
+    apple: 'text-text-muted',
+    claude: 'text-chart-claude',
+    codex: 'text-chart-codex',
+    gemini: 'text-chart-gemini',
+    copilot: 'text-chart-copilot'
+};
+
+export function CliMark({ kind, size = 14, className }: { kind: AgentKind; size?: number; className?: string }) {
+    return <AgentIcon kind={kind} size={size} className={clsx('shrink-0', CLI_COLORS[kind], className)} />;
+}
+
+/* As tall as the title's first line, so the mark sits beside the name rather than between the two lines. */
+export function CliTile({ kind }: { kind: AgentKind }) {
+    return (
+        <span className="grid h-6 shrink-0 place-items-center">
+            <CliMark kind={kind} size={24} />
+        </span>
+    );
+}

package/src/providers/provider-abilities.ts

@@ -0,0 +1,9 @@
+import i18next from 'i18next';
+import type { ProviderInfo } from '@adecore/agent-contracts';
+
+/* What a provider offers, in one sentence, where it can be opened and whether its hooks report status. */
+export function providerAbilities(provider: ProviderInfo): string {
+    const where = provider.capabilities.chat ? i18next.t('agent-providers:abilities.chatAndTerminal') : i18next.t('agent-providers:abilities.terminalOnly');
+    const status = provider.capabilities.hooks ? i18next.t('agent-providers:abilities.reportsStatus') : i18next.t('agent-providers:abilities.noStatus');
+    return `${where} ${status}`;
+}

package/src/providers/variables.ts

@@ -0,0 +1,87 @@
+import i18next from 'i18next';
+import type { ProviderAccountVariable } from '@adecore/agent-contracts';
+
+const NAME = /^[A-Za-z_][A-Za-z0-9_]{0,127}$/;
+
+/* One variable as the person edits it, before it is saved. */
+export interface VariableDraft {
+    /* Keeps a row in place while its name is typed. */
+    key: string;
+    name: string;
+    value: string;
+    sensitive: boolean;
+    /* The name the machine keeps a sensitive value under, while the value itself is not retyped. */
+    kept: string | null;
+}
+
+let drafted = 0;
+function nextKey(): string {
+    drafted += 1;
+    return `variable-${drafted}`;
+}
+
+export function draftsOf(env: readonly ProviderAccountVariable[] | undefined): VariableDraft[] {
+    return (env ?? []).map((variable) => ({
+        key: nextKey(),
+        name: variable.name,
+        value: variable.value,
+        sensitive: variable.sensitive,
+        kept: variable.sensitive && variable.valueRedacted === true ? variable.name : null
+    }));
+}
+
+export function emptyDraft(sensitive: boolean): VariableDraft {
+    return { key: nextKey(), name: '', value: '', sensitive, kept: null };
+}
+
+/*
+ * A value the keychain holds only counts under the name it was kept under, and only while it stays
+ * sensitive: the machine finds it by that name, and never hands it out to be stored in plain text.
+ */
+function keepsValue(draft: VariableDraft): boolean {
+    return draft.value === '' && draft.sensitive && draft.kept === draft.name;
+}
+
+/* The first thing that keeps these from being saved, in a sentence; null when they can be. */
+export function variablesProblem(drafts: readonly VariableDraft[]): string | null {
+    const words = (key: string, name: string): string => i18next.t(`agent-providers:account.variables.problem.${key}`, { name });
+    const seen = new Set<string>();
+    for (const draft of drafts) {
+        const name = draft.name.trim();
+        if (name === '') {
+            return words('noName', '');
+        }
+        if (!NAME.test(name)) {
+            return words('invalidName', name);
+        }
+        if (seen.has(name)) {
+            return words('duplicate', name);
+        }
+        seen.add(name);
+        if (draft.value === '' && !keepsValue({ ...draft, name })) {
+            return words('noValue', name);
+        }
+    }
+    return null;
+}
+
+/* The variables as `accounts.save` takes them; a kept value goes back empty and redacted, so the machine keeps what it has. */
+export function variablesOf(drafts: readonly VariableDraft[]): ProviderAccountVariable[] {
+    return drafts.map((draft) => {
+        const name = draft.name.trim();
+        if (keepsValue({ ...draft, name })) {
+            return { name, value: '', sensitive: true, valueRedacted: true };
+        }
+        return { name, value: draft.value, sensitive: draft.sensitive };
+    });
+}
+
+/* Whether the drafts say something other than what the machine holds. */
+export function variablesChanged(drafts: readonly VariableDraft[], env: readonly ProviderAccountVariable[] | undefined): boolean {
+    return (
+        JSON.stringify(variablesOf(drafts)) !==
+        JSON.stringify(
+            (env ?? []).map(({ name, value, sensitive, valueRedacted }) => ({ name, value, sensitive, ...(valueRedacted ? { valueRedacted } : {}) }))
+        )
+    );
+}

package/src/scope.ts

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+import type { ChatClient } from './chat/chat-client';
+import type { ChatTransport } from './transport';
+
+/*
+ * One host of chats, as everything under it sees it. An app with several hosts renders a scope per
+ * host and every row the chat keeps names the scope it came from, so two hosts never paint each
+ * other's threads.
+ */
+export interface ChatScope {
+    /* Names this host in the stores that keep one row per host: its providers, accounts and usage. */
+    readonly id: string;
+    /* Where a chat's row is kept in the chats store. The app decides what a key looks like; the chat never builds one. */
+    keyOf(chatId: string): string;
+    /* Whether a key of the chats store is one of this scope's. */
+    owns(key: string): boolean;
+    readonly transport: ChatTransport;
+    readonly chats: ChatClient;
+}
+
+export const ChatScopeContext = createContext<ChatScope | null>(null);
+
+/* Throws outside a scope on purpose: a component that reads a chat has to know which host it runs on. */
+export function useChatScope(): ChatScope {
+    const scope = useContext(ChatScopeContext);
+    if (scope === null) {
+        throw new Error('This component reads a chat, so it has to be rendered inside a ChatScopeContext');
+    }
+    return scope;
+}

package/src/settings/sections.ts

@@ -0,0 +1,47 @@
+import type { ComponentType } from 'react';
+import i18next from 'i18next';
+import { Brain, ChartNoAxesColumn, type LucideIcon } from 'lucide-react';
+import type { SettingsSectionEntry } from '@adecore/ui/settings';
+
+/* A section of this package for the settings dialog of @adecore/ui, with its words read when it is drawn. */
+export interface AgentsSettingsSection {
+    id: string;
+    icon: LucideIcon;
+    /* A list beside a detail that scrolls on its own (`MasterDetail`). */
+    split?: boolean;
+    label(): string;
+    description(): string;
+}
+
+/* The agent CLIs of the host and the accounts they sign in with: `ProvidersPane`. */
+export const PROVIDERS_SECTION: AgentsSettingsSection = {
+    id: 'providers',
+    icon: Brain,
+    split: true,
+    label: () => i18next.t('agent-providers:section.label'),
+    description: () => i18next.t('agent-providers:section.description')
+};
+
+/* The currency of the usage page and the way to it: `UsagePane`. */
+export const USAGE_SECTION: AgentsSettingsSection = {
+    id: 'usage',
+    icon: ChartNoAxesColumn,
+    label: () => i18next.t('agent-usage:section.label'),
+    description: () => i18next.t('agent-usage:section.description')
+};
+
+/*
+ * The entry the dialog takes for a section, with the pane the app hands it: the pane of this package
+ * itself, a lazy one, or a wrapper that gives the pane what only the app knows. Built when the dialog
+ * draws, since the words follow the language.
+ */
+export function settingsSection(section: AgentsSettingsSection, pane: ComponentType): SettingsSectionEntry {
+    return {
+        id: section.id,
+        icon: section.icon,
+        label: section.label(),
+        description: section.description(),
+        pane,
+        split: section.split
+    };
+}

package/src/state/chats.ts

@@ -0,0 +1,279 @@
+import { create } from 'zustand';
+import type { ChatApprovalItem, ChatBookmark, ChatEvent, ChatHistoryResult, ChatInfo, ChatItem, ChatQuestionItem } from '@adecore/agent-contracts';
+import { useChatScope } from '../scope';
+
+export interface ChatState {
+    info: ChatInfo;
+    items: Record<string, ChatItem>;
+    /*
+     * The items as the timeline groups them: the same map as `items`, except that a delta growing a
+     * reply or a thought that already has text, or the output of a running call, leaves it as it was.
+     * The rows are derived from this, so a word arriving touches the row that draws it and not the
+     * whole thread; that row reads its text from `items` with `useCurrentItem`.
+     */
+    structure: Record<string, ChatItem>;
+    order: string[];
+    /* Where the part of the thread this client holds begins; absent when it holds the whole thread. */
+    history?: ChatHistoryPage;
+    /*
+     * Requests from before that part that still wait, oldest first. They are in `items` and
+     * `structure` but not in `order`, since the thread on screen does not reach back to them yet.
+     */
+    waitingBefore?: string[];
+    /* The messages marked to come back to, as the host last said; absent until it said anything. */
+    bookmarks?: ChatBookmark[];
+}
+
+export type ChatHistoryPage = ChatHistoryResult['history'];
+
+/* The newest part of a thread, as `chat.attach` hands it over with a `historyLimit`. */
+export interface ChatPage {
+    history: ChatHistoryPage;
+    /* Every request of the chat that still waits, wherever in the thread it is. */
+    pending: ChatItem[];
+}
+
+/* Rows keyed with the scope's `keyOf`, so a thread says which host it runs on. */
+export type ChatsById = Record<string, ChatState>;
+
+/* What a chat is doing, without its thread. */
+export type ChatStatuses = Record<string, Pick<ChatState, 'info'>>;
+
+/* What a chat client writes. It owns one host's link, so it speaks in chat ids alone. */
+export interface ChatSink {
+    /* Without a page the items are the whole thread. */
+    reset(chatId: string, info: ChatInfo, items: ChatItem[], page?: ChatPage): void;
+    /* The page before the one the chat holds, read with `cursor`. */
+    prepend(chatId: string, cursor: string, page: ChatHistoryResult): void;
+    apply(chatId: string, event: ChatEvent): void;
+    /* What a chat is doing, for a thread nobody in this window has open. */
+    status(chatId: string, info: ChatInfo): void;
+    bookmarks(chatId: string, bookmarks: ChatBookmark[]): void;
+    forget(chatId: string): void;
+}
+
+interface ChatsStore {
+    byKey: ChatsById;
+    /* Replaced only when a chat's info is, never for a streamed word, so what reads the status alone is not redrawn by one. */
+    statusByKey: ChatStatuses;
+    reset(key: string, info: ChatInfo, items: ChatItem[], page?: ChatPage): void;
+    prepend(key: string, cursor: string, page: ChatHistoryResult): void;
+    apply(key: string, event: ChatEvent): void;
+    status(key: string, info: ChatInfo): void;
+    bookmarks(key: string, bookmarks: ChatBookmark[]): void;
+    forget(key: string): void;
+    /* Drops the threads whose key matches, such as every thread of one host. They keep running there; this client is done looking at them. */
+    forgetWhere(matches: (key: string) => boolean): void;
+}
+
+function isWaiting(item: ChatItem | undefined): item is ChatApprovalItem | ChatQuestionItem {
+    return (item?.kind === 'approval' && item.decision === 'pending') || (item?.kind === 'question' && item.state === 'pending');
+}
+
+function stateOf(info: ChatInfo, items: ChatItem[], page?: ChatPage): ChatState {
+    const byId = Object.fromEntries(items.map((item) => [item.id, item]));
+    const order = items.map((item) => item.id);
+    if (page === undefined || page.history.cursor === null) {
+        return { info, items: byId, structure: byId, order };
+    }
+    const before = page.pending.filter((item) => !(item.id in byId));
+    for (const item of before) {
+        byId[item.id] = item;
+    }
+    return { info, items: byId, structure: byId, order, history: page.history, waitingBefore: before.map((item) => item.id) };
+}
+
+/* An older host names no place in the thread, and it always hands over the whole of it. */
+function isBeforePage(state: ChatState, historyIndex: number | undefined): boolean {
+    return state.history !== undefined && historyIndex !== undefined && historyIndex < state.history.start;
+}
+
+/* An item from before the page this client holds matters only as a request that waits, or one that stopped waiting. */
+function withEarlierItem(state: ChatState, item: ChatItem): ChatState {
+    const waiting = state.waitingBefore ?? [];
+    const held = waiting.includes(item.id);
+    if (isWaiting(item)) {
+        return { ...withItem(state, item), waitingBefore: held ? waiting : [...waiting, item.id] };
+    }
+    return held ? { ...withItem(state, item), waitingBefore: waiting.filter((id) => id !== item.id) } : state;
+}
+
+/* The page before the one a chat holds, unless the thread was read again since that page was asked for. */
+export function prependPage(state: ChatState, cursor: string, page: ChatHistoryResult): ChatState {
+    if (state.history?.cursor !== cursor) {
+        return state;
+    }
+    const held = new Set(state.order);
+    const older = page.items.filter((item) => !held.has(item.id));
+    const olderIds = new Set(older.map((item) => item.id));
+    const items = { ...state.items };
+    for (const item of older) {
+        items[item.id] = item;
+    }
+    const order = [...olderIds, ...state.order];
+    if (page.history.cursor === null) {
+        const { history: _history, waitingBefore: _waitingBefore, ...rest } = state;
+        return { ...rest, items, structure: items, order };
+    }
+    const waitingBefore = (state.waitingBefore ?? []).filter((id) => !olderIds.has(id));
+    return { ...state, items, structure: items, order, history: page.history, waitingBefore };
+}
+
+/* The requests that still wait, oldest first: those from before the page this client holds, then the thread's own. */
+export function waitingRequestsOf(chat: Pick<ChatState, 'structure' | 'order' | 'waitingBefore'> | undefined): Array<ChatApprovalItem | ChatQuestionItem> {
+    return [...(chat?.waitingBefore ?? []), ...(chat?.order ?? [])].map((id) => chat?.structure[id]).filter(isWaiting);
+}
+
+/* The state with one item replaced, in the thread and in the structure the rows come from. */
+function withItem(state: ChatState, item: ChatItem): ChatState {
+    const items = { ...state.items, [item.id]: item };
+    return { ...state, items, structure: items };
+}
+
+/* Cheap enough, since a status only arrives when the host saw one change, never on a streamed word. */
+function sameInfo(left: ChatInfo, right: ChatInfo): boolean {
+    return JSON.stringify(left) === JSON.stringify(right);
+}
+
+/* The statuses with this chat's info in them, the same object when that info is already there. */
+function withStatus(statuses: ChatStatuses, key: string, info: ChatInfo): ChatStatuses {
+    return statuses[key]?.info === info ? statuses : { ...statuses, [key]: { info } };
+}
+
+function without<T>(rows: Record<string, T>, matches: (key: string) => boolean): Record<string, T> {
+    return Object.fromEntries(Object.entries(rows).filter(([key]) => !matches(key)));
+}
+
+export function applyEvent(state: ChatState, event: ChatEvent): ChatState {
+    switch (event.type) {
+        case 'item': {
+            if (isBeforePage(state, event.historyIndex)) {
+                return withEarlierItem(state, event.item);
+            }
+            const known = event.item.id in state.items;
+            return { ...withItem(state, event.item), order: known ? state.order : [...state.order, event.item.id] };
+        }
+        case 'delta': {
+            const item = state.items[event.itemId];
+            if (item?.kind === 'assistant' || item?.kind === 'thinking') {
+                const grown = { ...item, text: item.text + event.text };
+                // The first text is structure after all, since an empty reply that is not streaming has no row.
+                if (item.text === '') {
+                    return withItem(state, grown);
+                }
+                return { ...state, items: { ...state.items, [event.itemId]: grown } };
+            }
+            if (item?.kind === 'tool' && item.state === 'running') {
+                const progress = item.progress ?? { startedAt: null, description: null, output: null };
+                const grown = { ...item, progress: { ...progress, output: (progress.output ?? '') + event.text } };
+                return { ...state, items: { ...state.items, [event.itemId]: grown } };
+            }
+            return state;
+        }
+        case 'info':
+            return { ...state, info: event.info };
+        case 'reset':
+            return stateOf(event.info, event.items);
+    }
+}
+
+export const useChats = create<ChatsStore>((set) => ({
+    byKey: {},
+    statusByKey: {},
+    reset(key, info, items, page) {
+        set((s) => {
+            // The bookmarks are not part of the thread; they come in on their own and outlive a reset of it.
+            const bookmarks = s.byKey[key]?.bookmarks;
+            const next = stateOf(info, items, page);
+            return {
+                byKey: { ...s.byKey, [key]: bookmarks === undefined ? next : { ...next, bookmarks } },
+                statusByKey: withStatus(s.statusByKey, key, info)
+            };
+        });
+    },
+    prepend(key, cursor, page) {
+        set((s) => {
+            const current = s.byKey[key];
+            if (!current) {
+                return {};
+            }
+            const next = prependPage(current, cursor, page);
+            return next === current ? {} : { byKey: { ...s.byKey, [key]: next } };
+        });
+    },
+    apply(key, event) {
+        set((s) => {
+            const current = s.byKey[key];
+            if (!current) {
+                return {};
+            }
+            const next = applyEvent(current, event);
+            return { byKey: { ...s.byKey, [key]: next }, statusByKey: withStatus(s.statusByKey, key, next.info) };
+        });
+    },
+    /*
+     * The status of a chat this window is not reading, which the host sends for every chat it has
+     * loaded. The thread stays empty until somebody attaches, since this is what a header, a list and
+     * the counters need, and they ask the info and never the items.
+     */
+    status(key, info) {
+        set((s) => {
+            const current = s.byKey[key];
+            if (!current) {
+                return { byKey: { ...s.byKey, [key]: stateOf(info, []) }, statusByKey: withStatus(s.statusByKey, key, info) };
+            }
+            // An attached client already had this on `chat.event`; writing it again would redraw the thread.
+            if (sameInfo(current.info, info)) {
+                return {};
+            }
+            return { byKey: { ...s.byKey, [key]: { ...current, info } }, statusByKey: withStatus(s.statusByKey, key, info) };
+        });
+    },
+    bookmarks(key, bookmarks) {
+        set((s) => {
+            const current = s.byKey[key];
+            if (!current) {
+                return {};
+            }
+            return { byKey: { ...s.byKey, [key]: { ...current, bookmarks } } };
+        });
+    },
+    forget(key) {
+        set((s) => {
+            const next = { ...s.byKey };
+            delete next[key];
+            const statuses = { ...s.statusByKey };
+            delete statuses[key];
+            return { byKey: next, statusByKey: statuses };
+        });
+    },
+    forgetWhere(matches) {
+        set((s) => ({ byKey: without(s.byKey, matches), statusByKey: without(s.statusByKey, matches) }));
+    }
+}));
+
+/* The sink of one host's chat client: it hands over chat ids, this puts them under the keys of its scope. */
+export function chatSink(keyOf: (chatId: string) => string): ChatSink {
+    return {
+        reset: (chatId, info, items, page) => useChats.getState().reset(keyOf(chatId), info, items, page),
+        prepend: (chatId, cursor, page) => useChats.getState().prepend(keyOf(chatId), cursor, page),
+        apply: (chatId, event) => useChats.getState().apply(keyOf(chatId), event),
+        status: (chatId, info) => useChats.getState().status(keyOf(chatId), info),
+        bookmarks: (chatId, bookmarks) => useChats.getState().bookmarks(keyOf(chatId), bookmarks),
+        forget: (chatId) => useChats.getState().forget(keyOf(chatId))
+    };
+}
+
+/* One chat's thread in the scope this is rendered in. The selector keeps a render tied to the field it reads. */
+export function useChatRow<T>(chatId: string, select: (row: ChatState | undefined) => T): T {
+    const { keyOf } = useChatScope();
+    return useChats((s) => select(s.byKey[keyOf(chatId)]));
+}
+
+/* The item as the thread holds it now, for a row derived from the structure, which a delta leaves alone. */
+export function useCurrentItem<T extends ChatItem>(chatId: string, derived: T): T {
+    return useChatRow(chatId, (row) => {
+        const item = row?.items[derived.id];
+        return item?.kind === derived.kind ? (item as T) : derived;
+    });
+}

package/src/state/provider-accounts.ts

@@ -0,0 +1,87 @@
+import { create } from 'zustand';
+import type { ProviderAccounts } from '@adecore/agent-contracts';
+import { useChatScope } from '../scope';
+import type { ChatTransport } from '../transport';
+
+export interface ProviderAccountsRow {
+    /* Null until the host answered, and for a host too old to keep accounts. */
+    accounts: ProviderAccounts | null;
+    loaded: boolean;
+}
+
+/* One object for a host that has not answered yet, so a selector gets a stable snapshot. */
+const NONE: ProviderAccountsRow = { accounts: null, loaded: false };
+
+interface ProviderAccountsStore {
+    byScope: Record<string, ProviderAccountsRow>;
+    set(scopeId: string, accounts: ProviderAccounts | null): void;
+    forget(scopeId: string): void;
+}
+
+/* The accounts of every agent CLI on each host, and what each CLI last said about who is signed in there. */
+export const useProviderAccountsStore = create<ProviderAccountsStore>((set, get) => ({
+    byScope: {},
+    set(scopeId, accounts) {
+        set({ byScope: { ...get().byScope, [scopeId]: { accounts, loaded: true } } });
+    },
+    forget(scopeId) {
+        const { [scopeId]: _gone, ...rest } = get().byScope;
+        set({ byScope: rest });
+    }
+}));
+
+/* The accounts of the host in scope, like `useProviders`. */
+export function useProviderAccounts<T>(select: (row: ProviderAccountsRow) => T): T {
+    const { id } = useChatScope();
+    return useProviderAccountsStore((s) => select(s.byScope[id] ?? NONE));
+}
+
+export function providerAccountsOf(scopeId: string): ProviderAccountsRow {
+    return useProviderAccountsStore.getState().byScope[scopeId] ?? NONE;
+}
+
+/* The accounts as `accountFor` takes them: undefined until the host answered, null for one that keeps none. */
+export function knownAccounts(row: ProviderAccountsRow): ProviderAccounts | null | undefined {
+    return row.loaded ? row.accounts : undefined;
+}
+
+/*
+ * Keeps one host's accounts in the store: the whole list on every fresh link, then every change the
+ * host announces. Answers the function that stops it.
+ */
+export function watchProviderAccounts(scopeId: string, transport: ChatTransport): () => void {
+    const store = useProviderAccountsStore.getState();
+    // A list asked for before a change arrived is older than that change, so it is dropped.
+    let changes = 0;
+    const load = (): void => {
+        const asked = changes;
+        transport
+            .request('accounts.list', {})
+            .then((accounts) => {
+                if (changes === asked) {
+                    store.set(scopeId, accounts);
+                }
+            })
+            .catch(() => {
+                // A host from before accounts never answers; it has only each CLI's own login.
+                if (changes === asked && !providerAccountsOf(scopeId).loaded) {
+                    store.set(scopeId, null);
+                }
+            });
+    };
+    const off = [
+        transport.on('accounts.changed', (accounts) => {
+            changes += 1;
+            store.set(scopeId, accounts);
+        }),
+        transport.subscribeStatus((status) => {
+            if (status === 'open') {
+                load();
+            }
+        })
+    ];
+    if (transport.status === 'open') {
+        load();
+    }
+    return () => off.forEach((stop) => stop());
+}