@adecore/agents-react 0.39.0 → 0.40.0

package/src/providers/AccountVariables.tsx

@@ -37,6 +37,7 @@ export function AccountVariables({ id, account, secretsAvailable }: AccountVaria
         const env = variablesOf(drafts);
         const { env: _env, ...rest } = account;
         setSaving(true);
+
         try {
             await saveAccount(scope, host, id, env.length === 0 ? rest : { ...rest, env });
         } finally {
@@ -63,6 +64,7 @@ export function AccountVariables({ id, account, secretsAvailable }: AccountVaria
                 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

package/src/providers/AddAccountForm.tsx

@@ -12,6 +12,7 @@ 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';
+import { errorMessage } from '../transport';
 
 interface AddAccountFormProps {
     provider: ProviderInfo;
@@ -41,11 +42,14 @@ export function AddAccountForm({ provider, entries, login, onCancel, onAdded }:
 
     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 ?? {}));
@@ -56,7 +60,7 @@ export function AddAccountForm({ provider, entries, login, onCancel, onAdded }:
                 onAdded(await createAccount(scope, provider.kind, label, color), label, true);
             }
         } catch (e) {
-            setError(e instanceof Error ? e.message : String(e));
+            setError(errorMessage(e));
             setBusy(false);
         }
     };

package/src/providers/CliDetail.tsx

@@ -5,14 +5,14 @@ import { AccountDot } from '../agents/AccountDot';
 import { ModelOptionControl } from '../agents/ModelOptionControl';
 import { carryOptions } from '../agents/model-options';
 import { optionWord } from '../agents/option-words';
-import { ACCOUNT_TONE_CLASSES, accountName, accountStatusLine, type AccountEntry, type AccountLogin } from '../agents/accounts';
+import { ACCOUNT_TONE_CLASSES, accountName, accountStatusLine, offeredAccounts, type AccountEntry, type AccountLogin } from '../agents/accounts';
 import { accountFor, forgetChatSelection, rememberChatAccount, rememberChatSelection, selectionFor, useChatPreferences } from '../chat/preferences';
 import { useChatScope } from '../scope';
 import { providerAbilities } from './provider-abilities';
 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';
+import { knownAccounts, useProviderAccounts } from '../state/provider-accounts';
 
 const PROVIDER_DEFAULT = '';
 
@@ -21,6 +21,7 @@ function ModelOptionRows({ provider, model, options }: { provider: AgentKind; mo
     const setOption = (id: string, value: string | boolean): void => {
         rememberChatSelection(provider, { model: model.slug, options: { ...options, [id]: value } });
     };
+
     return (
         <>
             {model.options.map((option) => (
@@ -53,10 +54,9 @@ export function CliDetail({ provider, entries, defaults, login, onAddAccount, on
     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 machineAccounts = useProviderAccounts(knownAccounts);
     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 choosable = offeredAccounts(entries ?? [], picked);
     const canAddAccount = login !== null;
 
     return (
@@ -137,6 +137,7 @@ export function CliDetail({ provider, entries, defaults, login, onAddAccount, on
                 <SettingsSection title={t('cli.accounts')} footer={canAddAccount ? undefined : t('cli.onlyDefault', { provider: provider.name })}>
                     {entries.map((entry) => {
                         const status = accountStatusLine(entry.status, login === 'terminal');
+
                         return (
                             <button
                                 key={entry.id}

package/src/providers/InstallPage.tsx

@@ -13,6 +13,7 @@ import { CliMark } from './parts';
 function CommandBlock({ command }: { command: string }) {
     const { t } = useTranslation('agent-providers');
     const [copied, setCopied] = useState<string | null>(null);
+
     return (
         <div className="flex min-w-0 items-center gap-2 rounded-lg border border-border bg-surface-sunken py-1 pr-1 pl-3">
             <code className="min-w-0 grow font-mono text-code break-all text-text select-text">{command}</code>
@@ -58,6 +59,7 @@ function Step({ index, state, title, children }: { index: number; state: Install
 function SignInWay({ way, canRun, onRun }: { way: ProviderSignIn; canRun: boolean; onRun(command: string): void }) {
     const { t } = useTranslation('agent-providers');
     const { providerKeyNote } = useChatHost();
+
     switch (way.kind) {
         case 'command':
             return (
@@ -74,6 +76,7 @@ function SignInWay({ way, canRun, onRun }: { way: ProviderSignIn; canRun: boolea
             );
         case 'env': {
             const note = providerKeyNote?.(way.variable) ?? null;
+
             return (
                 <p className="text-xs text-text-muted">
                     <Trans
@@ -110,10 +113,13 @@ export function InstallPage({ provider, signedIn, extra }: InstallPageProps) {
     const platform = chosen ?? initial;
     const install = provider.install;
     const run = host.runProviderCommand;
+
     const onRun = (command: string): void => run?.(scopeId, provider.kind, command);
+
     const command = platform === null ? undefined : install?.commands[platform];
 
     const steps: { title: string; done: boolean; body: ReactNode }[] = [];
+
     steps.push({
         title: t('install.install.title'),
         done: provider.installed,
@@ -151,10 +157,13 @@ export function InstallPage({ provider, signedIn, extra }: InstallPageProps) {
             </>
         )
     });
+
     if (extra !== null) {
         steps.push(extra);
     }
+
     const ways = install?.signIn ?? [];
+
     steps.push({
         title: t('install.signIn.title'),
         done: provider.installed && signedIn,
@@ -170,11 +179,13 @@ export function InstallPage({ provider, signedIn, extra }: InstallPageProps) {
                 ))
             )
     });
+
     steps.push({
         title: t('install.start.title'),
         done: false,
         body: <p className="text-xs text-text-muted">{t('install.start.description', { provider: provider.name })}</p>
     });
+
     const states = installStepStates(steps.map((step) => step.done));
 
     return (

package/src/providers/ProviderList.tsx

@@ -63,13 +63,16 @@ interface ProviderListProps {
 /* 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, canAddProvider = false, 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

package/src/providers/ProvidersPane.tsx

@@ -49,11 +49,14 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
 
     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);
 
     // 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;
+
     // A CLI taken off the host since it was picked makes way too, so the detail never stays empty.
     const keeps = (entry: Picked): boolean => {
         switch (entry.kind) {
@@ -67,17 +70,22 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
                 return true;
         }
     };
+
     const current: Picked | null = picked !== null && keeps(picked) ? picked : installed[0] ? { kind: 'cli', cli: installed[0].kind } : null;
     const currentAccount = current?.kind === 'account' ? accounts?.accounts[current.id] : undefined;
+
     const currentCli =
         current === null || current.kind === 'catalog' ? null : current.kind === 'account' ? (currentAccount?.kind as AgentKind | undefined) : current.cli;
+
     const provider = (current?.kind === 'install' ? providers : 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);
         const opened = pickOfTarget(target, providers);
+
         if (opened !== null) {
             setPicked(opened);
         } else if (target?.startsWith('providers.') && current?.kind !== 'cli' && provider !== null) {
@@ -87,6 +95,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
 
     const added = (id: string, name: string, made: boolean): void => {
         setPicked({ kind: 'account', id });
+
         if (made && provider !== null && loginOf(provider.kind) === 'terminal' && openLogin !== null && loginBlocked === null) {
             void openLogin(scopeId, provider.kind, id, name);
         }
@@ -111,22 +120,28 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
         if (current?.kind === 'catalog') {
             return addPage?.((kind) => setPicked(pickOfCli(kind, providers))) ?? null;
         }
+
         if (current === null || provider === null) {
             return null;
         }
+
         if (current.kind === 'install') {
             const extra = installStepOf?.(provider) ?? null;
             const statuses = entriesOf(provider.kind).map((entry) => entry.status?.state);
             // Without accounts to read, nothing says the CLI is signed out, so being there is all it takes.
             const signedIn = statuses.length === 0 || statuses.includes('ready');
+
             if (!provider.installed || !signedIn || (extra !== null && !extra.done)) {
                 return <InstallPage key={provider.kind} provider={provider} signedIn={signedIn} extra={extra} />;
             }
         }
+
         const own = current.kind === 'cli' || current.kind === 'install' ? (detailOf?.(provider) ?? null) : null;
+
         if (own !== null) {
             return own;
         }
+
         if (current.kind === 'add') {
             return (
                 <AddAccountForm
@@ -139,8 +154,10 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
                 />
             );
         }
+
         if (current.kind === 'account') {
             const entry = entriesOf(provider.kind).find((candidate) => candidate.id === current.id);
+
             return (
                 entry && (
                     <AccountDetail
@@ -156,6 +173,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
                 )
             );
         }
+
         return (
             <>
                 <CliDetail

package/src/providers/account-actions.ts

@@ -4,20 +4,17 @@ import { accountFor, readChatPreferences, rememberChatAccount } from '../chat/pr
 import type { ChatHost } from '../host';
 import type { ChatScope } from '../scope';
 import { providerAccountsOf, useProviderAccountsStore } from '../state/provider-accounts';
-import type { ChatTransport } from '../transport';
+import { errorMessage, 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;
 }
 
@@ -25,9 +22,11 @@ function linkTo(scope: ChatScope): ChatTransport {
 export async function saveAccounts(scope: ChatScope, host: Pick<ChatHost, 'notify'>, accounts: ProviderAccountMap): Promise<boolean> {
     try {
         useProviderAccountsStore.getState().set(scope.id, await linkTo(scope).request('accounts.save', { accounts }));
+
         return true;
     } catch (e) {
-        host.notify({ id: `providers-save-${scope.id}`, kind: 'error', title: words('account.saveFailed'), description: reason(e) });
+        host.notify({ id: `providers-save-${scope.id}`, kind: 'error', title: words('account.saveFailed'), description: errorMessage(e) });
+
         return false;
     }
 }
@@ -35,6 +34,7 @@ export async function saveAccounts(scope: ChatScope, host: Pick<ChatHost, 'notif
 /* One account changed and every other one as the host last said. */
 export function saveAccount(scope: ChatScope, host: Pick<ChatHost, 'notify'>, id: string, account: ProviderAccount): Promise<boolean> {
     const current = providerAccountsOf(scope.id).accounts?.accounts ?? {};
+
     return saveAccounts(scope, host, { ...current, [id]: account });
 }
 
@@ -44,9 +44,11 @@ export function saveAccount(scope: ChatScope, host: Pick<ChatHost, 'notify'>, id
  */
 export async function removeAccount(scope: ChatScope, host: Pick<ChatHost, 'notify'>, id: string, kind: AgentKind): Promise<void> {
     const { [id]: _gone, ...rest } = providerAccountsOf(scope.id).accounts?.accounts ?? {};
+
     if (!(await saveAccounts(scope, host, rest))) {
         throw new Error(words('account.saveFailed'));
     }
+
     if (accountFor(readChatPreferences(), scope.id, kind) === id) {
         rememberChatAccount(scope.id, kind, null);
     }
@@ -54,9 +56,9 @@ export async function removeAccount(scope: ChatScope, host: Pick<ChatHost, 'noti
 
 /* 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;
+    const { id, ...accounts } = await linkTo(scope).request('accounts.create', { kind, label, color });
     useProviderAccountsStore.getState().set(scope.id, accounts);
+
     return id;
 }
 

package/src/providers/install-steps.ts

@@ -17,6 +17,7 @@ const PLATFORMS: readonly ProviderPlatform[] = ['darwin', 'linux', 'win32'];
 /* The first step not done is the current one. */
 export function installStepStates(done: readonly boolean[]): InstallStepState[] {
     const first = done.indexOf(false);
+
     return done.map((value, index) => (value ? 'done' : index === first ? 'current' : 'later'));
 }
 
@@ -25,11 +26,13 @@ export function pagePlatform(): ProviderPlatform {
     if (isApplePlatform()) {
         return 'darwin';
     }
+
     return typeof navigator !== 'undefined' && /windows/i.test(navigator.userAgent) ? 'win32' : 'linux';
 }
 
 /* The systems a provider has a command for, and the one the page opens on: the machine's when it has one there. */
 export function installPlatforms(provider: ProviderInfo, machine: ProviderPlatform): { offered: ProviderPlatform[]; initial: ProviderPlatform | null } {
     const offered = PLATFORMS.filter((platform) => Boolean(provider.install?.commands[platform]));
+
     return { offered, initial: offered.includes(machine) ? machine : (offered[0] ?? null) };
 }

package/src/providers/pane-target.ts

@@ -16,12 +16,15 @@ export function pickOfTarget(target: string | null, providers: ProviderInfo[]):
     if (target === 'providers.apple') {
         return { kind: 'cli', cli: 'apple' };
     }
+
     if (target === ADD_TARGET) {
         return { kind: 'catalog' };
     }
+
     if (!target?.startsWith(INSTALL_TARGET) || target.length === INSTALL_TARGET.length) {
         return null;
     }
+
     return pickOfCli(target.slice(INSTALL_TARGET.length) as AgentKind, providers);
 }
 
@@ -32,8 +35,10 @@ export function pickOfTarget(target: string | null, providers: ProviderInfo[]):
  */
 export function pickOfCli(cli: AgentKind, providers: ProviderInfo[]): Picked {
     const provider = providers.find((entry) => entry.kind === cli);
+
     if (provider !== undefined && (provider.installed || !provider.capabilities.terminal)) {
         return { kind: 'cli', cli };
     }
+
     return { kind: 'install', cli };
 }

package/src/providers/provider-abilities.ts

@@ -5,6 +5,7 @@ import type { ProviderCapabilities, ProviderInfo } from '@adecore/agent-contract
 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/provider-groups.ts

@@ -24,6 +24,7 @@ export interface ProviderGroups {
 /* 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;
@@ -57,14 +58,18 @@ export function groupProviders(
     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)) {
@@ -73,5 +78,6 @@ export function groupProviders(
             groups.setup.push({ provider, entries, note: accountNote(entries[0]!.status) });
         }
     }
+
     return groups;
 }

package/src/providers/variables.ts

@@ -15,8 +15,10 @@ export interface VariableDraft {
 }
 
 let drafted = 0;
+
 function nextKey(): string {
     drafted += 1;
+
     return `variable-${drafted}`;
 }
 
@@ -45,23 +47,31 @@ function keepsValue(draft: VariableDraft): boolean {
 /* 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;
 }
 
@@ -69,9 +79,11 @@ export function variablesProblem(drafts: readonly VariableDraft[]): string | nul
 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 };
     });
 }

package/src/scope.ts

@@ -23,8 +23,10 @@ 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;
 }