@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/prompts/ui/QuestionBody.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Circle, CircleCheck, Square } from 'lucide-react';
+import { answerFieldKey, choiceKey, stepIndex } from '../logic/keys';
+import { pickPromptChoice } from '../logic/prompts';
+import { Icon } from '@ruimte/ui/Icon';
+import { chatHost } from '../../host';
+/* One question of a request: its choices, "Something else…", or a written answer when it offers no choices. */
+export function QuestionBody({ question, answer, onAnswer, onCommit, locked }) {
+    const { t } = useTranslation('agent-prompts');
+    const AnswerField = chatHost().dictation.Textarea;
+    // The choices, then the "Something else…" field form one list with a single tab stop.
+    const items = useRef([]);
+    const shownQuestion = useRef(question.id);
+    const count = question.choices.length + 1;
+    const chosen = question.choices.findIndex((choice) => !answer.custom && answer.choices.includes(choice.label));
+    const tabStop = chosen !== -1 ? chosen : answer.custom ? question.choices.length : 0;
+    // The focused choice of the question before is gone once the next one shows; the keyboard goes on in this one.
+    useEffect(() => {
+        if (shownQuestion.current === question.id) {
+            return;
+        }
+        shownQuestion.current = question.id;
+        if (document.activeElement === null || document.activeElement === document.body) {
+            (items.current[tabStop] ?? items.current[0])?.focus({ preventScroll: true });
+        }
+    }, [question.id, tabStop]);
+    const onChoiceKeyDown = (event, index, label) => {
+        const action = choiceKey(event.nativeEvent, {
+            multiSelect: question.multiSelect,
+            anyChosen: !answer.custom && answer.choices.length > 0
+        });
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        if (action.kind === 'move') {
+            items.current[stepIndex(index, count, action.to)]?.focus();
+        }
+        else if (action.kind === 'commit') {
+            onCommit(answer);
+        }
+        else {
+            const next = pickPromptChoice(answer, question, label);
+            onAnswer(next);
+            if (action.kind === 'pick-and-commit') {
+                onCommit(next);
+            }
+        }
+    };
+    const onFieldKeyDown = (event) => {
+        const field = event.currentTarget;
+        const action = answerFieldKey(event.nativeEvent, {
+            belowChoices: question.choices.length > 0,
+            caretAtStart: field.selectionStart === 0 && field.selectionEnd === 0,
+            hasText: field.value.trim() !== ''
+        });
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        if (action.kind === 'to-last-choice') {
+            items.current[question.choices.length - 1]?.focus();
+        }
+        else if (action.kind === 'commit') {
+            onCommit({ ...answer, custom: true });
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [question.multiSelect && _jsx("p", { className: "text-xs text-text-muted", children: t('question.multiSelect') }), question.choices.length > 0 && (_jsxs("div", { role: question.multiSelect ? 'group' : 'radiogroup', "aria-label": question.question, className: "flex flex-col gap-2", children: [question.choices.map((choice, index) => {
+                        const selected = !answer.custom && answer.choices.includes(choice.label);
+                        return (_jsxs("button", { ref: (element) => {
+                                items.current[index] = element;
+                            }, type: "button", role: question.multiSelect ? 'checkbox' : 'radio', "aria-checked": selected, tabIndex: index === tabStop ? 0 : -1, "data-prompt-entry": index === tabStop ? '' : undefined, disabled: locked, className: clsx('flex min-h-9 items-start gap-2 rounded-lg border px-3 py-2 text-left disabled:opacity-50', selected ? 'border-accent bg-accent-soft' : 'border-border bg-surface-hover hover:bg-surface-active'), onClick: () => onAnswer(pickPromptChoice(answer, question, choice.label)), onKeyDown: (event) => onChoiceKeyDown(event, index, choice.label), children: [_jsx(Icon, { icon: selected ? CircleCheck : question.multiSelect ? Square : Circle, size: 16, className: "mt-0.5 shrink-0 text-text-muted" }), _jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: "text-xs text-text", children: choice.label }), choice.description && _jsx("span", { className: "text-xs text-text-muted", children: choice.description })] })] }, choice.label));
+                    }), _jsxs("label", { className: clsx('flex min-h-9 items-start gap-2 rounded-lg border px-3 py-2 text-left text-xs text-text focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-accent', answer.custom ? 'border-accent bg-accent-soft' : 'border-border bg-surface-hover', locked && 'opacity-50'), 
+                        // A press picks the row; the keyboard only passing through on its way up or down does not.
+                        onPointerDown: () => {
+                            if (!locked && !answer.custom) {
+                                onAnswer({ ...answer, custom: true });
+                            }
+                        }, children: [_jsx(Icon, { icon: answer.custom ? CircleCheck : Circle, size: 16, className: "mt-0.5 shrink-0" }), _jsx(AnswerField, { ref: (element) => {
+                                    items.current[question.choices.length] = element;
+                                }, rows: 1, tabIndex: tabStop === question.choices.length ? 0 : -1, "data-prompt-entry": tabStop === question.choices.length ? '' : undefined, className: "max-h-40 min-w-0 flex-1 resize-none field-sizing-content bg-transparent outline-none placeholder:text-text-muted", buttonClassName: "-my-1 -mr-1.5", "aria-label": t('question.answerLabel'), placeholder: t('question.somethingElse'), value: answer.text, disabled: locked, onChange: (e) => onAnswer({ ...answer, custom: true, text: e.target.value }), onKeyDown: onFieldKeyDown })] })] })), question.choices.length === 0 && (_jsx(AnswerField, { ref: (element) => {
+                    items.current[0] = element;
+                }, className: "field min-h-20 text-sm", "aria-label": t('question.answerLabel'), placeholder: t('question.answerPlaceholder'), "data-prompt-entry": "", value: answer.text, disabled: locked, onChange: (e) => onAnswer({ ...answer, text: e.target.value }), onKeyDown: onFieldKeyDown }))] }));
+}

package/dist/providers/AccountColors.d.ts

@@ -0,0 +1,5 @@
+export declare function AccountColors({ value, label, onChange }: {
+    value: string | undefined;
+    label: string;
+    onChange(id: string): void;
+}): import("react").JSX.Element;

package/dist/providers/AccountColors.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AccentSwatches } from '@ruimte/ui/AccentSwatches';
+import { chatHost } from '../host';
+/* The colors an account may wear, the host's palette. */
+export function AccountColors({ value, label, onChange }) {
+    const { all, featured, label: labelOf } = chatHost().accents;
+    return _jsx(AccentSwatches, { value: value, label: label, accents: all, featured: featured, labelOf: labelOf, onChange: onChange });
+}

package/dist/providers/AccountDetail.d.ts

@@ -0,0 +1,12 @@
+import type { ProviderInfo } from '@ruimte/agent-contracts';
+import { type AccountEntry } from '../agents/accounts';
+interface AccountDetailProps {
+    provider: ProviderInfo;
+    entry: AccountEntry;
+    canLogIn: boolean;
+    loginBlocked: string | null;
+    secretsAvailable: boolean;
+    onRemoved(): void;
+}
+export declare function AccountDetail({ provider, entry, canLogIn, loginBlocked, secretsAvailable, onRemoved }: AccountDetailProps): import("react").JSX.Element;
+export {};

package/dist/providers/AccountDetail.js

@@ -0,0 +1,76 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { LogIn } from 'lucide-react';
+import { AccountDot } from '../agents/AccountDot';
+import { accountName, FOLDER_VARIABLES } from '../agents/accounts';
+import { ConfirmDialog } from '@ruimte/ui/settings/ConfirmDialog';
+import { chatHost } from '../host';
+import { useChatScope } from '../scope';
+import { removeAccount, saveAccount } from './account-actions';
+import { AccountVariables } from './AccountVariables';
+import { AccountColors } from './AccountColors';
+import { Toggle } from '@ruimte/ui/controls';
+import { DetailHeader, REMOVE_BUTTON } from '@ruimte/ui/settings/DetailHeader';
+import { CliMark } from './parts';
+import { SettingsRow } from '@ruimte/ui/settings/SettingsRow';
+import { SettingsSection } from '@ruimte/ui/settings/SettingsSection';
+import { Button } from '@ruimte/ui/Button';
+import { copyText } from '@ruimte/ui/clipboard';
+import { Icon } from '@ruimte/ui/Icon';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+// The states in which the machine's own sentence says more than the usual line under the login.
+const TROUBLE = new Set(['folder-missing', 'unavailable', 'failed']);
+/* The name a person types, saved when they leave the field; an empty one goes back to what was there. */
+function NameField({ value, label, onSave }) {
+    const [draft, setDraft] = useState(value);
+    const commit = () => {
+        const name = draft.trim();
+        if (name === '' || name === value) {
+            setDraft(value);
+            return;
+        }
+        onSave(name);
+    };
+    return (_jsx("input", { className: "field w-55 max-w-full", value: draft, maxLength: 80, "aria-label": label, onChange: (event) => setDraft(event.target.value), onBlur: commit, onKeyDown: (event) => {
+            if (event.key === 'Enter') {
+                event.currentTarget.blur();
+            }
+        } }));
+}
+/* One account: how it looks in a picker, who is signed in, where its folder is, its variables. */
+export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secretsAvailable, onRemoved }) {
+    const { t } = useTranslation('agent-providers');
+    const scope = useChatScope();
+    const [confirming, setConfirming] = useState(false);
+    const { id, account, status, isDefault } = entry;
+    const name = accountName(entry, provider.name);
+    const folder = status?.home ?? '';
+    const variable = FOLDER_VARIABLES[provider.kind];
+    const signedIn = status?.state === 'ready';
+    const showFolder = () => {
+        copyText(folder);
+        chatHost().notify({ kind: 'success', title: t('account.folderCopied'), description: folder });
+    };
+    const loginDetail = () => {
+        if (status !== null && TROUBLE.has(status.state) && status.message) {
+            return status.message;
+        }
+        if (!signedIn) {
+            return t('account.login.signedOutDetail');
+        }
+        return status?.plan ? t('account.login.planDetail', { plan: status.plan }) : t('account.login.detail');
+    };
+    const loginButton = (_jsxs(Button, { variant: "secondary", disabled: loginBlocked !== null, onClick: () => void chatHost().openLogin?.(scope.id, provider.kind, id, name), children: [_jsx(Icon, { icon: LogIn, size: 14 }), signedIn ? t('account.login.logInAgain') : t('account.login.logIn')] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DetailHeader, { mark: _jsx("span", { className: "grid h-6 shrink-0 place-items-center", children: _jsx(AccountDot, { color: account.color, className: "size-3" }) }), title: name, subtitle: _jsxs(_Fragment, { children: [_jsx(CliMark, { kind: provider.kind, size: 12, className: "text-text-muted" }), t('account.kind', { provider: provider.name })] }), actions: folder !== '' && (_jsx(Button, { variant: "secondary", onClick: showFolder, children: t('account.showFolder') })) }), _jsxs(SettingsSection, { children: [_jsx(SettingsRow, { label: t('account.enabled.label'), description: t('account.enabled.description'), control: _jsx(Toggle, { checked: account.enabled !== false, label: t('account.enabled.label'), onChange: (checked) => {
+                                const { enabled: _enabled, ...rest } = account;
+                                void saveAccount(scope, id, checked ? rest : { ...rest, enabled: false });
+                            } }) }), _jsx(SettingsRow, { label: t('account.name'), control: _jsx(NameField, { value: name, label: t('account.name'), onSave: (label) => void saveAccount(scope, id, { ...account, label }) }, name) }), _jsx(SettingsRow, { label: t('account.color'), control: _jsx(AccountColors, { value: account.color, label: t('account.color'), onChange: (color) => void saveAccount(scope, id, { ...account, color }) }) })] }), canLogIn && (_jsxs(SettingsSection, { title: t('account.login.title'), children: [_jsx(SettingsRow, { label: signedIn
+                            ? status?.email
+                                ? t('account.login.signedInAs', { email: status.email })
+                                : t('account.login.signedIn')
+                            : t('account.login.signedOut'), description: loginBlocked === null ? loginDetail() : `${loginDetail()} ${loginBlocked}`, control: loginBlocked === null ? (loginButton) : (_jsx(Tooltip, { label: loginBlocked, children: _jsx("span", { className: "inline-flex", children: loginButton }) })) }), _jsxs(SettingsRow, { label: t('account.folder.label'), children: [_jsx("input", { className: "field h-8.5 font-mono text-code", value: folder, readOnly: true, "aria-label": t('account.folder.label') }), _jsx("p", { className: "-mt-1 text-xs text-text-muted", children: variable ? (_jsx(Trans, { t: t, i18nKey: "account.folder.detail", values: { variable }, components: { code: _jsx("code", { className: "font-mono text-code" }) } })) : (t('account.folder.detailPlain')) })] })] })), _jsx(AccountVariables, { id: id, account: account, secretsAvailable: secretsAvailable }, `${id}:${JSON.stringify(account.env ?? [])}`), _jsx(SettingsSection, { children: _jsx(SettingsRow, { label: t('account.remove.label'), description: isDefault ? t('account.remove.defaultNote') : t('account.remove.description'), control: _jsx("button", { type: "button", className: REMOVE_BUTTON, disabled: isDefault, onClick: () => setConfirming(true), children: t('account.remove.button') }) }) }), _jsx(ConfirmDialog, { open: confirming, onOpenChange: setConfirming, title: t('account.remove.confirmTitle', { account: name }), description: t('account.remove.confirmDescription', { folder }), confirmLabel: t('account.remove.confirm'), onConfirm: async () => {
+                    await removeAccount(scope, id, provider.kind);
+                    onRemoved();
+                } })] }));
+}

package/dist/providers/AccountVariables.d.ts

@@ -0,0 +1,8 @@
+import type { ProviderAccount } from '@ruimte/agent-contracts';
+interface AccountVariablesProps {
+    id: string;
+    account: ProviderAccount;
+    secretsAvailable: boolean;
+}
+export declare function AccountVariables({ id, account, secretsAvailable }: AccountVariablesProps): import("react").JSX.Element;
+export {};

package/dist/providers/AccountVariables.js

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

package/dist/providers/AddAccountForm.d.ts

@@ -0,0 +1,10 @@
+import type { ProviderInfo } from '@ruimte/agent-contracts';
+import { type AccountEntry } from '../agents/accounts';
+interface AddAccountFormProps {
+    provider: ProviderInfo;
+    entries: AccountEntry[];
+    onCancel(): void;
+    onAdded(id: string, name: string, made: boolean): void;
+}
+export declare function AddAccountForm({ provider, entries, onCancel, onAdded }: AddAccountFormProps): import("react").JSX.Element;
+export {};

package/dist/providers/AddAccountForm.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ChevronRight } from 'lucide-react';
+import { freeAccountColor, mintAccountId } from '../agents/accounts';
+import { chatHost } from '../host';
+import { useChatScope } from '../scope';
+import { createAccount, linkAccount } from './account-actions';
+import { AccountColors } from './AccountColors';
+import { DetailHeader } from '@ruimte/ui/settings/DetailHeader';
+import { CliTile } from './parts';
+import { SettingsRow } from '@ruimte/ui/settings/SettingsRow';
+import { SettingsSection } from '@ruimte/ui/settings/SettingsSection';
+import { providerAccountsOf } from '../state/provider-accounts';
+import { Button } from '@ruimte/ui/Button';
+import { FORM_ERROR } from '@ruimte/ui/classes';
+import { Icon } from '@ruimte/ui/Icon';
+/*
+ * A name and a color, asked before anything exists, so the account is made once with both. By default
+ * the machine makes the folder; under Advanced a person points at a folder of their own instead.
+ */
+export function AddAccountForm({ provider, entries, onCancel, onAdded }) {
+    const { t } = useTranslation('agent-providers');
+    const scope = useChatScope();
+    const [name, setName] = useState('');
+    const [color, setColor] = useState(() => freeAccountColor(entries, chatHost().accents.current()));
+    const [advanced, setAdvanced] = useState(false);
+    const [folder, setFolder] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const label = name.trim();
+    const linking = advanced && folder.trim() !== '';
+    const submit = async (event) => {
+        event.preventDefault();
+        if (label === '' || busy) {
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            if (linking) {
+                const taken = new Set(Object.keys(providerAccountsOf(scope.id).accounts?.accounts ?? {}));
+                const id = mintAccountId(provider.kind, label, taken);
+                await linkAccount(scope, id, { kind: provider.kind, label, color, home: folder.trim() });
+                onAdded(id, label, false);
+            }
+            else {
+                onAdded(await createAccount(scope, provider.kind, label, color), label, true);
+            }
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+            setBusy(false);
+        }
+    };
+    return (_jsxs("form", { className: "contents", onSubmit: (event) => void submit(event), children: [_jsx(DetailHeader, { mark: _jsx(CliTile, { kind: provider.kind }), title: t('add.title', { provider: provider.name }), subtitle: t('add.description') }), _jsxs(SettingsSection, { children: [_jsx(SettingsRow, { label: t('add.name'), control: _jsx("input", { className: "field w-55 max-w-full", value: name, maxLength: 80, autoFocus: true, placeholder: t('add.namePlaceholder'), "aria-label": t('add.name'), onChange: (event) => setName(event.target.value) }) }), _jsx(SettingsRow, { label: t('add.color'), control: _jsx(AccountColors, { value: color, label: t('add.color'), onChange: setColor }) })] }), _jsxs("div", { className: "flex min-w-0 flex-col gap-2.5", children: [_jsxs("button", { type: "button", "aria-expanded": advanced, className: "flex items-center gap-1.5 self-start text-sm font-medium text-text-muted hover:text-text", onClick: () => setAdvanced((open) => !open), children: [_jsx(Icon, { icon: ChevronRight, size: 14, className: clsx('transition-transform', advanced && 'rotate-90') }), t('add.advanced')] }), advanced && (_jsx(SettingsSection, { children: _jsx(SettingsRow, { label: t('add.link.label'), description: t('add.link.description'), children: _jsx("input", { className: "field font-mono text-code", value: folder, spellCheck: false, autoComplete: "off", placeholder: t('add.link.placeholder'), "aria-label": t('add.link.label'), onChange: (event) => setFolder(event.target.value) }) }) }))] }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-end gap-2", children: [error !== null && (_jsx("span", { className: clsx(FORM_ERROR, 'mr-auto break-words'), role: "alert", children: error || t('add.failed') })), _jsx(Button, { onClick: onCancel, children: t('common.cancel') }), _jsx(Button, { type: "submit", variant: "primary", disabled: label === '' || busy, children: linking ? t('add.linkButton') : t('add.create') })] })] }));
+}

package/dist/providers/CliDetail.d.ts

@@ -0,0 +1,11 @@
+import type { ProviderInfo } from '@ruimte/agent-contracts';
+import { type AccountEntry } from '../agents/accounts';
+interface CliDetailProps {
+    provider: ProviderInfo;
+    entries: AccountEntry[] | null;
+    canAddAccount: boolean;
+    onAddAccount(): void;
+    onPickAccount(id: string): void;
+}
+export declare function CliDetail({ provider, entries, canAddAccount, onAddAccount, onPickAccount }: CliDetailProps): import("react").JSX.Element;
+export {};

package/dist/providers/CliDetail.js

@@ -0,0 +1,62 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { ChevronRight, Plus } from 'lucide-react';
+import { AccountDot } from '../agents/AccountDot';
+import { ACCOUNT_TONE_CLASSES, accountName, accountStatusLine } from '../agents/accounts';
+import { accountFor, forgetChatSelection, rememberChatAccount, rememberChatSelection, selectionFor, useChatPreferences } from '../chat/preferences';
+import { Segmented, Toggle } from '@ruimte/ui/controls';
+import { useChatScope } from '../scope';
+import { providerAbilities } from './provider-abilities';
+import { DetailHeader } from '@ruimte/ui/settings/DetailHeader';
+import { CliTile } from './parts';
+import { SettingsRow } from '@ruimte/ui/settings/SettingsRow';
+import { SettingsSection } from '@ruimte/ui/settings/SettingsSection';
+import { useProviderAccountsStore } from '../state/provider-accounts';
+import { Button } from '@ruimte/ui/Button';
+import { Icon } from '@ruimte/ui/Icon';
+import { Select } from '@ruimte/ui/Select';
+const PROVIDER_DEFAULT = '';
+// Up to this many choices read at a glance side by side; more go into a menu.
+const MAX_SEGMENTS = 3;
+/* One row per knob the chosen model exposes; the composer's option picker shows the same descriptors. */
+function ModelOptionRows({ provider, model, options }) {
+    const setOption = (id, value) => {
+        rememberChatSelection(provider, { model: model.slug, options: { ...options, [id]: value } });
+    };
+    return (_jsx(_Fragment, { children: model.options.map((option) => {
+            if (option.type !== 'select') {
+                return (_jsx(SettingsRow, { indent: true, muted: true, label: option.label, control: _jsx(Toggle, { checked: options[option.id] === true, label: option.label, onChange: (checked) => setOption(option.id, checked) }) }, option.id));
+            }
+            const value = String(options[option.id] ?? option.defaultChoice);
+            return (_jsx(SettingsRow, { indent: true, muted: true, label: option.label, control: option.choices.length <= MAX_SEGMENTS ? (_jsx(Segmented, { value: value, label: option.label, options: option.choices.map((choice) => ({ id: choice.id, label: choice.label })), onChange: (id) => setOption(option.id, id) })) : (_jsx(Select, { value: value, label: option.label, align: "end", items: option.choices.map((choice) => ({ value: choice.id, label: choice.label, description: choice.description })), onValueChange: (id) => setOption(option.id, id) })) }, option.id));
+        }) }));
+}
+/* One CLI: what it is, what a new chat of it starts with, and its accounts. */
+export function CliDetail({ provider, entries, canAddAccount, onAddAccount, onPickAccount }) {
+    const { t } = useTranslation('agent-providers');
+    const { id: scopeId } = useChatScope();
+    const preferences = useChatPreferences();
+    const selection = selectionFor(preferences, provider.kind);
+    const model = provider.models.find((entry) => entry.slug === selection?.model);
+    const machineAccounts = useProviderAccountsStore((s) => (s.byScope[scopeId]?.loaded ? s.byScope[scopeId].accounts : undefined));
+    const picked = accountFor(preferences, scopeId, provider.kind, machineAccounts) ?? provider.kind;
+    // An account that is off is out of every picker, unless it is the one picked already.
+    const choosable = (entries ?? []).filter((entry) => entry.account.enabled !== false || entry.id === picked);
+    const canLogIn = canAddAccount;
+    return (_jsxs(_Fragment, { children: [_jsx(DetailHeader, { mark: _jsx(CliTile, { kind: provider.kind }), title: provider.name, subtitle: `${provider.version ? `${t('abilities.version', { version: provider.version })} ` : ''}${providerAbilities(provider)}`, actions: canAddAccount && (_jsxs(Button, { variant: "secondary", className: "whitespace-nowrap", onClick: onAddAccount, children: [_jsx(Icon, { icon: Plus, size: 14 }), t('cli.addAccount')] })) }), _jsxs(SettingsSection, { title: t('cli.defaults.title'), description: t('cli.defaults.description'), children: [choosable.length > 0 && (_jsx(SettingsRow, { searchId: "providers.defaults.account", label: t('cli.defaults.account'), control: _jsx(Select, { value: picked, label: t('cli.defaults.accountFor', { provider: provider.name }), align: "end", items: choosable.map((entry) => ({
+                                value: entry.id,
+                                label: accountName(entry, provider.name),
+                                icon: _jsx(AccountDot, { color: entry.account.color, className: "size-2" })
+                            })), onValueChange: (id) => rememberChatAccount(scopeId, provider.kind, id) }) })), provider.models.length > 0 && (_jsx(SettingsRow, { searchId: "providers.defaults.model", label: t('cli.defaults.model'), description: model ? t('cli.defaults.shared', { provider: provider.name }) : t('cli.defaults.usesCliDefault'), control: _jsx(Select, { value: model?.slug ?? PROVIDER_DEFAULT, label: t('cli.defaults.modelFor', { provider: provider.name }), align: "end", items: [
+                                { value: PROVIDER_DEFAULT, label: t('cli.defaults.providerDefault') },
+                                ...provider.models.map((entry) => ({
+                                    value: entry.slug,
+                                    label: entry.legacy ? t('cli.defaults.legacyModel', { name: entry.name }) : entry.name
+                                }))
+                            ], onValueChange: (value) => value === PROVIDER_DEFAULT
+                                ? forgetChatSelection(provider.kind)
+                                : rememberChatSelection(provider.kind, { model: value, options: {} }) }) })), model && _jsx(ModelOptionRows, { provider: provider.kind, model: model, options: selection?.options ?? {} }), choosable.length === 0 && provider.models.length === 0 && _jsx(SettingsRow, { muted: true, label: t('cli.defaults.usesCliDefault') })] }), entries === null ? (_jsx("p", { className: "text-xs text-text-faint", children: t('list.noAccounts') })) : (_jsx(SettingsSection, { title: t('cli.accounts'), footer: canAddAccount ? undefined : t('cli.onlyDefault', { provider: provider.name }), children: entries.map((entry) => {
+                    const status = accountStatusLine(entry.status, canLogIn);
+                    return (_jsxs("button", { type: "button", className: "flex w-full min-w-0 items-center gap-3 px-4.5 py-3 text-left first:rounded-t-xl last:rounded-b-xl hover:bg-surface-hover", onClick: () => onPickAccount(entry.id), children: [_jsx(AccountDot, { color: entry.account.color }), _jsx("span", { className: "min-w-0 grow truncate text-sm text-text", children: accountName(entry, provider.name) }), _jsx("span", { className: `shrink-0 text-xs ${ACCOUNT_TONE_CLASSES[status.tone]}`, children: status.text }), _jsx(Icon, { icon: ChevronRight, size: 14, className: "shrink-0 text-text-faint" })] }, entry.id));
+                }) }))] }));
+}

package/dist/providers/ProvidersPane.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import type { ProviderInfo } from '@ruimte/agent-contracts';
+interface ProvidersPaneProps {
+    target?: string | null;
+    detailOf?(provider: ProviderInfo): ReactNode | null;
+}
+export declare function ProvidersPane({ target, detailOf }: ProvidersPaneProps): import("react").JSX.Element;
+export {};

package/dist/providers/ProvidersPane.js

@@ -0,0 +1,90 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Plus, Terminal } from 'lucide-react';
+import { AccountDot } from '../agents/AccountDot';
+import { ACCOUNT_TONE_CLASSES, accountName, accountsOfKind, accountStatusLine } from '../agents/accounts';
+import { Skeleton } from '@ruimte/ui/controls';
+import { MasterDetail } from '@ruimte/ui/settings/MasterDetail';
+import { chatHost } from '../host';
+import { useChatScope } from '../scope';
+import { AccountDetail } from './AccountDetail';
+import { AddAccountForm } from './AddAccountForm';
+import { CliDetail } from './CliDetail';
+import { CliMark } from './parts';
+import { useProviderAccounts } from '../state/provider-accounts';
+import { useProviders } from '../state/providers';
+import { SECTION_LABEL } from '@ruimte/ui/classes';
+import { ErrorBoundary } from '@ruimte/ui/ErrorBoundary';
+import { Icon } from '@ruimte/ui/Icon';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+/* 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 }) {
+    const { t } = useTranslation('agent-providers');
+    const { id: scopeId } = useChatScope();
+    const providers = useProviders((s) => s.providers);
+    const loaded = useProviders((s) => s.loaded);
+    const accounts = useProviderAccounts((s) => s.accounts);
+    const { openLogin } = chatHost();
+    const loginBlocked = chatHost().useLoginBlocked(scopeId);
+    const [picked, setPicked] = useState(() => (target === 'providers.apple' ? { kind: 'cli', cli: 'apple' } : null));
+    const installed = useMemo(() => providers.filter((provider) => provider.installed || provider.kind === 'apple'), [providers]);
+    const missing = useMemo(() => providers.filter((provider) => !provider.installed && provider.kind !== 'apple'), [providers]);
+    const entriesOf = (kind) => accountsOfKind(accounts, kind);
+    const canAddAccount = (kind) => accounts?.loginCommands?.[kind] !== undefined;
+    // What was picked may be gone since (an account removed elsewhere); the first CLI stands in for it.
+    const pickedEntry = picked?.kind === 'account' ? (Object.hasOwn(accounts?.accounts ?? {}, picked.id) ? picked.id : null) : null;
+    const current = picked !== null && (picked.kind !== 'account' || pickedEntry !== null) ? picked : installed[0] ? { kind: 'cli', cli: installed[0].kind } : null;
+    const currentAccount = current?.kind === 'account' ? accounts?.accounts[current.id] : undefined;
+    const currentCli = current === null ? null : current.kind === 'account' ? currentAccount?.kind : current.cli;
+    const provider = installed.find((entry) => entry.kind === currentCli) ?? null;
+    // A search result lands on a row of a CLI's detail, so a picked account makes way for its CLI.
+    const [seenTarget, setSeenTarget] = useState(target);
+    if (target !== seenTarget) {
+        setSeenTarget(target);
+        if (target === 'providers.apple') {
+            setPicked({ kind: 'cli', cli: 'apple' });
+        }
+        else if (target?.startsWith('providers.') && current?.kind !== 'cli' && provider !== null) {
+            setPicked({ kind: 'cli', cli: provider.kind });
+        }
+    }
+    const added = (id, name, made) => {
+        setPicked({ kind: 'account', id });
+        if (made && provider !== null && openLogin !== null && loginBlocked === null) {
+            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: current?.kind === 'cli' && current.cli === cli.kind, onSelect: () => setPicked({ kind: 'cli', cli: cli.kind }), className: "pr-1", trailing: canAddAccount(cli.kind) && (_jsx(Tooltip, { label: t('list.addAccount', { provider: cli.name }), name: true, children: _jsx("button", { type: "button", className: "icon-btn icon-btn-sm", onClick: () => setPicked({ kind: 'add', cli: cli.kind }), children: _jsx(Icon, { icon: Plus, size: 14 }) }) })), children: [_jsx(CliMark, { kind: cli.kind }), _jsx("span", { className: "min-w-0 grow truncate text-xs font-medium text-text", children: cli.name }), cli.kind !== 'apple' && 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, canAddAccount(cli.kind));
+                    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("span", { className: clsx(SECTION_LABEL, 'px-3 pt-1 pb-1.5'), children: t('list.notInstalled') }), missing.map((cli) => (_jsxs("div", { className: "flex h-10 min-w-0 items-center gap-3 px-3 text-sm text-text-muted", children: [_jsx(Icon, { icon: Terminal, size: 14, className: "shrink-0" }), _jsx("span", { className: "min-w-0 grow truncate", children: cli.name }), _jsx("span", { className: "shrink-0 text-xs text-text-faint", children: t('list.missing') })] }, cli.kind))), _jsx("p", { className: "mt-1 px-3 text-xs text-text-faint", children: t('list.notInstalledNote') })] }))] }));
+    const detail = () => {
+        if (current === null || provider === null) {
+            return null;
+        }
+        const own = current.kind === 'cli' ? (detailOf?.(provider) ?? null) : null;
+        if (own !== null) {
+            return own;
+        }
+        if (current.kind === 'add') {
+            return (_jsx(AddAccountForm, { provider: provider, entries: entriesOf(provider.kind), onCancel: () => setPicked({ kind: 'cli', cli: provider.kind }), onAdded: added }, provider.kind));
+        }
+        if (current.kind === 'account') {
+            const entry = entriesOf(provider.kind).find((candidate) => candidate.id === current.id);
+            return (entry && (_jsx(AccountDetail, { provider: provider, entry: entry, canLogIn: openLogin !== null && canAddAccount(provider.kind), loginBlocked: loginBlocked, secretsAvailable: accounts?.secretsAvailable === true, onRemoved: () => setPicked({ kind: 'cli', cli: provider.kind }) }, entry.id)));
+        }
+        return (_jsx(CliDetail, { provider: provider, entries: accounts === null ? null : entriesOf(provider.kind), canAddAccount: canAddAccount(provider.kind), onAddAccount: () => setPicked({ kind: 'add', cli: provider.kind }), onPickAccount: (id) => setPicked({ kind: 'account', id }) }));
+    };
+    return (_jsx(MasterDetail, { listWidth: 340, listLabel: t('list.label'), list: list, detail: _jsx(ErrorBoundary, { label: t('failed'), resetKeys: [scopeId, current?.kind, currentCli], children: _jsx("div", { className: "flex min-w-0 flex-col gap-7", children: detail() }) }) }));
+}

package/dist/providers/account-actions.d.ts

@@ -0,0 +1,7 @@
+import type { AgentKind, ProviderAccount, ProviderAccountMap } from '@ruimte/agent-contracts';
+import type { ChatScope } from '../scope';
+export declare const saveAccounts: (scope: ChatScope, accounts: ProviderAccountMap) => Promise<boolean>;
+export declare const saveAccount: (scope: ChatScope, id: string, account: ProviderAccount) => Promise<boolean>;
+export declare const removeAccount: (scope: ChatScope, id: string, kind: AgentKind) => Promise<void>;
+export declare const createAccount: (scope: ChatScope, kind: AgentKind, label: string, color: string) => Promise<string>;
+export declare const linkAccount: (scope: ChatScope, id: string, account: ProviderAccount) => Promise<void>;

package/dist/providers/account-actions.js

@@ -0,0 +1,53 @@
+import i18next from 'i18next';
+import { accountFor, readChatPreferences, rememberChatAccount } from '../chat/preferences';
+import { chatHost } from '../host';
+import { providerAccountsOf, useProviderAccountsStore } from '../state/provider-accounts';
+const words = (key, values) => i18next.t(`agent-providers:${key}`, values);
+const reason = (e) => (e instanceof Error ? e.message : String(e));
+const linkTo = (scope) => {
+    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 const saveAccounts = async (scope, accounts) => {
+    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 const saveAccount = (scope, id, account) => {
+    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 const removeAccount = async (scope, id, kind) => {
+    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 const createAccount = async (scope, kind, label, color) => {
+    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 const linkAccount = async (scope, id, account) => {
+    const current = providerAccountsOf(scope.id).accounts?.accounts ?? {};
+    useProviderAccountsStore.getState().set(scope.id, await linkTo(scope).request('accounts.save', { accounts: { ...current, [id]: account } }));
+};

package/dist/providers/parts.d.ts

@@ -0,0 +1,9 @@
+import type { AgentKind } from '@ruimte/agent-contracts';
+export declare function CliMark({ kind, size, className }: {
+    kind: AgentKind;
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function CliTile({ kind }: {
+    kind: AgentKind;
+}): import("react").JSX.Element;

package/dist/providers/parts.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+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 = {
+    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 }) {
+    return _jsx(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 }) {
+    return (_jsx("span", { className: "grid h-6 shrink-0 place-items-center", children: _jsx(CliMark, { kind: kind, size: 24 }) }));
+}

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

@@ -0,0 +1,2 @@
+import type { ProviderInfo } from '@ruimte/agent-contracts';
+export declare const providerAbilities: (provider: ProviderInfo) => string;