@columenlabs/lumen-ui 0.1.92 → 0.1.94

package/dist/assistant/client.d.ts

@@ -1,4 +1,4 @@
-import type { AllowanceRequest, AssistantChat, AssistantChatRow, AssistantEvent, AssistantMessage, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState, StepItem } from '@columenlabs/lumen-ui-types/assistant';
+import type { AllowanceRequest, AssistantChat, AssistantChatRow, AssistantEvent, AssistantMessage, AssistantOwnWay, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState, StepItem } from '@columenlabs/lumen-ui-types/assistant';
 type Test = NonNullable<KeyState['test']>;
 export interface AssistantAdapter {
     /** Names the cache its reads keep (two assistants on one page need two keys). */
@@ -14,7 +14,8 @@ export interface AssistantAdapter {
     ownKey(provider: AssistantProvider, key: string | null): Promise<AssistantStatus>;
     /** What the person may spend a month on their own keys. */
     ownCap(usd: number): Promise<AssistantStatus>;
-    testOwnKey(provider: AssistantProvider): Promise<Test>;
+    /** Tests the person's key or plan (`way`; by default the one in use). */
+    testOwnKey(provider: AssistantProvider, way?: AssistantOwnWay): Promise<Test>;
     /** Starts a plan sign-in (ChatGPT): the address to open and the one it ends on. */
     startSignin(provider: AssistantProvider): Promise<{
         url: string;
@@ -22,6 +23,8 @@ export interface AssistantAdapter {
     }>;
     /** Finishes it from the address the sign-in tab ended on. */
     finishSignin(provider: AssistantProvider, url: string): Promise<AssistantStatus>;
+    /** Signs out of the plan; the person's key, if set, runs on. */
+    signOut(provider: AssistantProvider): Promise<AssistantStatus>;
     /** Admin: ScrapeQL's Access service token; null removes it. */
     scrapeql(token: {
         client_id: string;

package/dist/assistant/client.js

@@ -49,9 +49,10 @@ export function assistantClient(base) {
             ? send('PUT', `/my-key?provider=${p}`, { api_key: key })
             : send('DELETE', `/my-key?provider=${p}`),
         ownCap: (usd) => send('PUT', '/my-key/cap', { cap_usd: usd }),
-        testOwnKey: (p) => send('POST', `/my-key/test?provider=${p}`),
+        testOwnKey: (p, way) => send('POST', `/my-key/test?provider=${p}${way ? `&way=${way}` : ''}`),
         startSignin: (p) => send('POST', `/my-signin?provider=${p}`),
         finishSignin: (p, url) => send('POST', `/my-signin/finish?provider=${p}`, { url }),
+        signOut: (p) => send('DELETE', `/my-signin?provider=${p}`),
         scrapeql: (token) => token ? send('PUT', '/web/scrapeql', token) : send('DELETE', '/web/scrapeql'),
         testScrapeql: () => send('POST', '/web/test'),
         chats: () => get('/chats'),

package/dist/assistant/settings.js

@@ -1,13 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { CheckIcon, CoinsIcon, ExternalLinkIcon, GlobeIcon, InboxIcon, KeyRoundIcon, LayersIcon, ReceiptIcon, SparklesIcon, Trash2Icon, WrenchIcon, } from 'lucide-react';
+import { CoinsIcon, GlobeIcon, InboxIcon, KeyRoundIcon, LayersIcon, LogInIcon, ReceiptIcon, SparklesIcon, WrenchIcon, } from 'lucide-react';
 import { useId, useState } from 'react';
-import { LumenChatgptSignin } from '../chatgpt-signin.js';
+import { ConnectionLogo, LumenConnection, } from '../connection.js';
 import { LumenExpandList, LumenExpandRow } from '../expand-list.js';
 import { SaveButton } from '../form-issues.js';
-import { IconButton } from '../icon-button.js';
 import { InfoLabel } from '../info-tip.js';
-import { KeyTestLine, TestBadge, errorText } from '../integrations.js';
+import { errorText } from '../integrations.js';
 import { LumenSelector } from '../lumen-selector.js';
 import { lumenToast } from '../lumen-toast.js';
 import { ShareMeter } from '../share-meter.js';
@@ -70,14 +69,6 @@ function WithStatus({ client, children, }) {
 function Row({ label, info, children }) {
     return (_jsxs("div", { "data-slot": "setting-row", className: "flex flex-wrap items-center gap-x-4 gap-y-2 border-b py-3 last:border-b-0", children: [_jsx(Label, { className: "min-w-0 flex-1", children: _jsx(InfoLabel, { info: info, children: label }) }), _jsx("div", { className: "shrink-0", children: children })] }));
 }
-const testOf = (k) => k.test
-    ? {
-        at: new Date(k.test.at).toISOString(),
-        ok: k.test.ok,
-        detail: k.test.detail,
-        error: k.test.ok ? null : k.test.detail,
-    }
-    : null;
 // ---------------------------------------------------------------- the assistant
 function General({ client }) {
     const { apply } = useApply(client);
@@ -98,27 +89,6 @@ function General({ client }) {
         } }));
 }
 // ---------------------------------------------------------------- model providers
-/** Paste a key, Save tests it first; then its hint, Test and Remove. */
-function KeyBlock({ label, info, prefix, provider, state, canEdit, onSave, onRemove, onTest, keysUrl, }) {
-    const id = useId();
-    const [key, setKey] = useState('');
-    const [replacing, setReplacing] = useState(false);
-    const [busy, setBusy] = useState(false);
-    const editing = canEdit && (!state.set || replacing);
-    const issues = [];
-    if (editing && key.trim() && !key.trim().startsWith(prefix))
-        issues.push({ where: label, message: `An ${provider} key starts with ${prefix}`, target: id });
-    const save = async () => {
-        setBusy(true);
-        if (await onSave(key.trim())) {
-            setKey('');
-            setReplacing(false);
-        }
-        setBusy(false);
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-3 border-b py-3 last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(InfoLabel, { className: "flex-1 font-medium text-sm", info: info, children: label }), state.set ? (state.hint ? (_jsx("span", { className: "font-code text-muted-foreground text-xs", children: state.hint })) : (_jsx(Badge, { variant: "secondary", children: "Set" }))) : state.from_env ? (_jsx(Badge, { variant: "secondary", children: "From the server" })) : (_jsx(Badge, { variant: "outline", children: "Not set" })), state.set && state.test && _jsx(TestBadge, { test: state.test })] }), editing ? (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { id: id, type: "password", autoComplete: "off", placeholder: `${prefix}…`, className: "font-code text-xs", value: key, onChange: (e) => setKey(e.target.value) }), keysUrl && (_jsx(IconButton, { icon: ExternalLinkIcon, label: `Get an ${provider} key`, href: keysUrl, variant: "outline" })), replacing && (_jsx(IconButton, { icon: Trash2Icon, label: "Keep the saved key", onClick: () => setReplacing(false) })), _jsx(SaveButton, { issues: issues, busy: busy, disabled: !key.trim(), label: "Test and save", onSave: save })] })) : (state.set &&
-                canEdit && (_jsxs(_Fragment, { children: [_jsx(KeyTestLine, { test: testOf(state), run: onTest }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(IconButton, { icon: Trash2Icon, label: `Remove ${label.toLowerCase()}`, variant: "outline", onClick: () => void onRemove() }), _jsx(SaveButton, { issues: [], icon: KeyRoundIcon, label: "Replace", onSave: () => setReplacing(true) })] })] })))] }));
-}
 /** A dollar cap a month, saved on Enter or leaving the field. */
 function CapInput({ label, value, onSave, }) {
     const [text, setText] = useState(String(value));
@@ -131,31 +101,87 @@ function CapInput({ label, value, onSave, }) {
     };
     return (_jsxs("div", { className: "flex items-center gap-1 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "$" }), _jsx(Input, { "aria-label": label, inputMode: "decimal", className: "h-8 w-20 text-right tabular-nums", value: text, onChange: (e) => setText(e.target.value), onBlur: commit, onKeyDown: (e) => e.key === 'Enter' && commit() }), _jsx("span", { className: "text-muted-foreground", children: "/ month" })] }));
 }
-/** A person's ChatGPT plan sign-in, on the assistant's own routes. */
-function ChatgptSignin({ client, p }) {
-    const { apply, refresh } = useApply(client);
-    return (_jsx(LumenChatgptSignin, { state: p.own, start: () => client.startSignin(p.id), finish: (url) => apply(`signin:${p.id}`, () => client.finishSignin(p.id, url), 'Signed in'), signOut: () => apply(`own:${p.id}`, () => client.ownKey(p.id, null), 'Signed out'), test: () => client.testOwnKey(p.id).finally(refresh) }));
-}
-const ready = (_jsxs(Badge, { variant: "outline", className: "text-gain", children: [_jsx(CheckIcon, {}), "Ready"] }));
-const notSet = _jsx(Badge, { variant: "outline", children: "Not set" });
-/** One provider, collapsed to a row: the person's own key (or their ChatGPT plan sign-in). */
+/** A key's last test as a connection way shows it; a plan that failed asks for a new sign-in. */
+const wayTest = (k, plan = false) => k?.test
+    ? {
+        at: k.test.at,
+        ok: k.test.ok,
+        detail: k.test.detail,
+        error: k.test.ok ? null : k.test.detail,
+        expired: plan && !k.test.ok,
+    }
+    : null;
+/** A provider's mark: its initial on a tile. */
+const mark = (label) => _jsx(ConnectionLogo, { text: label.charAt(0) });
+/** One provider, collapsed to a row: the person's own key and, where it has one, their plan sign-in. */
 function OwnProviderKey({ client, p }) {
     const { apply, refresh } = useApply(client);
-    const plan = p.own.via === 'chatgpt';
-    const badge = p.own.set && p.own.test && !p.own.test.ok ? (_jsx(TestBadge, { test: { ok: false } })) : p.own.set ? (ready) : (notSet);
-    return (_jsx(LumenExpandRow, { id: p.id, name: p.label, meta: plan ? 'Your ChatGPT plan' : p.own.set ? 'Your key' : 'No key', badge: badge, children: _jsxs("div", { className: "flex flex-col", children: [p.signin === 'chatgpt' && (!p.own.set || plan) && _jsx(ChatgptSignin, { client: client, p: p }), !plan && (_jsx(KeyBlock, { label: p.signin && !p.own.set ? 'Or your API key' : 'Your key', prefix: p.prefix, provider: p.label, state: p.own, canEdit: true, keysUrl: p.keys_url, onSave: (k) => apply(`own:${p.id}`, () => client.ownKey(p.id, k), 'Key saved'), onRemove: () => apply(`own:${p.id}`, () => client.ownKey(p.id, null), 'Key removed'), onTest: () => client.testOwnKey(p.id).finally(refresh) }))] }) }));
+    const ways = [];
+    if (p.signin === 'chatgpt')
+        ways.push({
+            id: 'plan',
+            label: 'ChatGPT plan',
+            icon: LogInIcon,
+            info: 'Run OpenAI models on your own ChatGPT plan instead of an API key.',
+            set: !!p.plan?.set,
+            ident: p.plan?.hint,
+            test: wayTest(p.plan, true),
+            signin: { start: () => client.startSignin(p.id), provider: 'ChatGPT' },
+            onFinish: (url) => apply(`signin:${p.id}`, () => client.finishSignin(p.id, url), 'Signed in'),
+            onTest: () => client.testOwnKey(p.id, 'plan').finally(refresh),
+            onRemove: () => apply(`plan:${p.id}`, () => client.signOut(p.id), 'Signed out'),
+            removeTitle: 'Sign out of your ChatGPT plan?',
+            removeText: 'Your API key, if you set one, runs from then on.',
+            removeLabel: 'Sign out',
+        });
+    ways.push({
+        id: 'key',
+        label: 'API key',
+        icon: KeyRoundIcon,
+        info: `Your own ${p.label} key, billed by ${p.label}.`,
+        set: p.own.set,
+        ident: p.own.hint,
+        test: wayTest(p.own),
+        fields: [{ id: 'key', label: `${p.label} API key`, secret: true, prefix: p.prefix }],
+        getUrl: p.keys_url,
+        onSave: (v) => apply(`own:${p.id}`, () => client.ownKey(p.id, v.key ?? ''), 'Key saved'),
+        onTest: () => client.testOwnKey(p.id, 'key').finally(refresh),
+        onRemove: () => apply(`own:${p.id}`, () => client.ownKey(p.id, null), 'Key removed'),
+        removeTitle: `Remove your ${p.label} key?`,
+    });
+    return (_jsx(LumenConnection, { id: p.id, name: p.label, logo: mark(p.label), ways: ways, use: p.use, onUse: (use) => apply(`use:${p.id}`, () => client.settings({ own_use: { [p.id]: use } })) }));
 }
 /** A person's own keys, one row a provider, and what they may spend on them. */
 function Providers({ client }) {
     const { apply } = useApply(client);
-    return (_jsx(WithStatus, { client: client, children: (s) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: s.providers.map((p) => (_jsx(OwnProviderKey, { client: client, p: p }, p.id))) }), s.providers.some((p) => p.own.set) && (_jsx(Row, { label: "Your keys may spend", info: "On your keys, every provider together.", children: _jsx(CapInput, { label: "Your monthly cap", value: s.caps.own, onSave: (n) => void apply('own', () => client.ownCap(n)) }) }))] })) }));
+    return (_jsx(WithStatus, { client: client, children: (s) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: s.providers.map((p) => (_jsx(OwnProviderKey, { client: client, p: p }, p.id))) }), s.providers.some((p) => p.own.set || p.plan?.set) && (_jsx(Row, { label: "Your keys may spend", info: "On your keys, every provider together.", children: _jsx(CapInput, { label: "Your monthly cap", value: s.caps.own, onSave: (n) => void apply('own', () => client.ownCap(n)) }) }))] })) }));
 }
 /** One provider's shared key, which an admin sets for everyone. */
 function SharedProviderKey({ client, p }) {
     const { apply, refresh } = useApply(client);
-    const on = p.app.set || !!p.app.from_env;
-    const badge = p.app.set && p.app.test && !p.app.test.ok ? (_jsx(TestBadge, { test: { ok: false } })) : on ? (ready) : (notSet);
-    return (_jsx(LumenExpandRow, { id: p.id, name: p.label, meta: p.app.from_env ? 'From the server' : on ? 'Shared key' : 'No key', badge: badge, children: _jsx(KeyBlock, { label: "Shared key", info: "Everyone's answers run on it, within the monthly allowance below.", prefix: p.prefix, provider: p.label, state: p.app, canEdit: true, keysUrl: p.keys_url, onSave: (k) => apply(`app:${p.id}`, () => client.appKey(p.id, k), 'Key saved'), onRemove: () => apply(`app:${p.id}`, () => client.appKey(p.id, null), 'Key removed'), onTest: () => client.testAppKey(p.id).finally(refresh) }) }));
+    const env = !p.app.set && !!p.app.from_env;
+    return (_jsx(LumenConnection, { id: p.id, name: p.label, logo: mark(p.label), ways: [
+            {
+                id: 'key',
+                label: 'Shared key',
+                icon: KeyRoundIcon,
+                info: "Everyone's answers run on it, within the allowance below.",
+                set: p.app.set || env,
+                ident: env ? 'From the server' : p.app.hint,
+                test: wayTest(p.app),
+                fields: [{ id: 'key', label: `${p.label} API key`, secret: true, prefix: p.prefix }],
+                getUrl: p.keys_url,
+                onSave: (v) => apply(`app:${p.id}`, () => client.appKey(p.id, v.key ?? ''), 'Key saved'),
+                onTest: () => client.testAppKey(p.id).finally(refresh),
+                ...(p.app.set
+                    ? {
+                        onRemove: () => apply(`app:${p.id}`, () => client.appKey(p.id, null), 'Key removed'),
+                        removeTitle: `Remove the shared ${p.label} key?`,
+                        removeText: 'Answers on it stop until a key is set again.',
+                    }
+                    : {}),
+            },
+        ] }));
 }
 /** Admins only: the app's shared keys and what each person may spend on them. */
 function SharedKeys({ client }) {
@@ -171,7 +197,7 @@ function Models({ client }) {
             const tiers = s.tiers.map((t) => ({ value: t.id, label: t.label }));
             return (_jsxs("div", { className: "flex flex-col", children: [s.tiers.map((t) => {
                         const p = s.providers.find((x) => x.id === t.provider);
-                        const keyless = p && !p.app.set && !p.app.from_env && !p.own.set;
+                        const keyless = p && !p.app.set && !p.app.from_env && !p.own.set && !p.plan?.set;
                         return (_jsx(Row, { label: t.label, info: t.about, children: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [keyless && _jsxs(Badge, { variant: "outline", children: ["No ", p.label, " key"] }), _jsx(LumenSelector, { label: `${t.label} model`, size: "sm", className: "w-36 sm:w-44", value: t.model, options: models, onChange: (model) => set({ tiers: { [t.id]: { model } } }) }), _jsx(LumenSelector, { label: `${t.label} effort`, size: "sm", className: "w-24 sm:w-32", value: t.effort, options: EFFORTS, onChange: (effort) => set({ tiers: { [t.id]: { effort } } }) })] }) }, t.id));
                     }), s.tasks.length > 1 &&
                         s.tasks.map((task) => (_jsx(Row, { label: `${task.label} starts on`, children: _jsx(LumenSelector, { label: `${task.label} starts on`, size: "sm", className: "w-44", value: task.tier, options: tiers, onChange: (tier) => set({ tasks: { [task.id]: tier } }) }) }, task.id)))] }));
@@ -186,33 +212,33 @@ function Tools({ client }) {
 // ---------------------------------------------------------------- web
 function ScrapeqlBlock({ client, s }) {
     const { apply, refresh } = useApply(client);
-    const ids = useId();
-    const [id, setId] = useState('');
-    const [secret, setSecret] = useState('');
-    const [replacing, setReplacing] = useState(false);
-    const [busy, setBusy] = useState(false);
     const state = s.web.scrapeql;
     if (!state)
         return null;
-    const editing = s.admin && (!state.set || replacing);
-    const issues = [];
-    if (editing && id && !secret)
-        issues.push({
-            where: 'Client Secret',
-            message: 'Paste the secret too',
-            target: `${ids}-secret`,
-        });
-    const save = async () => {
-        setBusy(true);
-        if (await apply('scrapeql', () => client.scrapeql({ client_id: id.trim(), client_secret: secret.trim() }), 'Token saved')) {
-            setId('');
-            setSecret('');
-            setReplacing(false);
-        }
-        setBusy(false);
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-3 border-b py-3 last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex-1 font-medium text-sm", children: _jsx(InfoLabel, { info: "Search and pages that need a real browser. Paste a Cloudflare Access service token that ScrapeQL lets in.", children: "ScrapeQL" }) }), state.set ? (state.hint ? (_jsx("span", { className: "font-code text-muted-foreground text-xs", children: state.hint })) : (_jsx(Badge, { variant: "secondary", children: "Set" }))) : (_jsx(Badge, { variant: "outline", children: "Not set" })), state.set && state.test && _jsx(TestBadge, { test: state.test })] }), editing ? (_jsxs("div", { className: "grid grid-cols-1 gap-2", children: [_jsx(Input, { id: `${ids}-id`, "aria-label": "Client ID", placeholder: "Client ID", autoComplete: "off", className: "font-code text-xs", value: id, onChange: (e) => setId(e.target.value) }), _jsx(Input, { id: `${ids}-secret`, "aria-label": "Client Secret", placeholder: "Client Secret", type: "password", autoComplete: "off", className: "font-code text-xs", value: secret, onChange: (e) => setSecret(e.target.value) }), _jsxs("div", { className: "flex justify-end gap-2", children: [replacing && (_jsx(IconButton, { icon: Trash2Icon, label: "Keep the saved token", onClick: () => setReplacing(false) })), _jsx(SaveButton, { issues: issues, busy: busy, disabled: !id.trim() || !secret.trim(), label: "Test and save", onSave: save })] })] })) : (state.set &&
-                s.admin && (_jsxs(_Fragment, { children: [_jsx(KeyTestLine, { test: testOf(state), run: () => client.testScrapeql().finally(refresh) }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(IconButton, { icon: Trash2Icon, label: "Remove the token", variant: "outline", onClick: () => void apply('scrapeql', () => client.scrapeql(null), 'Token removed') }), _jsx(SaveButton, { issues: [], icon: KeyRoundIcon, label: "Replace", onSave: () => setReplacing(true) })] })] })))] }));
+    return (_jsx(LumenExpandList, { children: _jsx(LumenConnection, { id: "scrapeql", name: "ScrapeQL", logo: _jsx(ConnectionLogo, { icon: GlobeIcon }), meta: state.set ? undefined : 'Search and pages that need a real browser', ways: [
+                {
+                    id: 'token',
+                    label: 'Service token',
+                    icon: KeyRoundIcon,
+                    info: 'A Cloudflare Access service token that ScrapeQL lets in.',
+                    set: state.set,
+                    ident: state.hint,
+                    test: wayTest(state),
+                    readOnly: !s.admin,
+                    fields: [
+                        { id: 'client_id', label: 'Client ID' },
+                        { id: 'client_secret', label: 'Client Secret', secret: true },
+                    ],
+                    onSave: (v) => apply('scrapeql', () => client.scrapeql({
+                        client_id: v.client_id ?? '',
+                        client_secret: v.client_secret ?? '',
+                    }), 'Token saved'),
+                    ...(s.admin ? { onTest: () => client.testScrapeql().finally(refresh) } : {}),
+                    onRemove: () => apply('scrapeql', () => client.scrapeql(null), 'Token removed'),
+                    removeTitle: 'Remove the ScrapeQL token?',
+                    removeText: 'Search and browser pages stop until a token is set again.',
+                },
+            ] }) }));
 }
 function Web({ client }) {
     const { apply } = useApply(client);

package/dist/chatgpt-signin.d.ts

@@ -14,5 +14,8 @@ export interface LumenChatgptSigninProps {
     /** One free call that says whether the sign-in still works; the app refreshes its data after. */
     test: () => Promise<unknown>;
 }
-/** Sign in with ChatGPT: opens in a new tab, finished by pasting back where it ended. */
+/**
+ * Sign in with ChatGPT: opens in a new tab, finished by pasting back where it ended.
+ * @deprecated Use `LumenConnection` with a `signin` way; the assistant keeps the plan apart from the key.
+ */
 export declare function LumenChatgptSignin({ state, start, finish, signOut, test, }: LumenChatgptSigninProps): import("react").JSX.Element;

package/dist/chatgpt-signin.js

@@ -17,7 +17,10 @@ const testOf = (k) => k.test
         error: k.test.ok ? null : k.test.detail,
     }
     : null;
-/** Sign in with ChatGPT: opens in a new tab, finished by pasting back where it ended. */
+/**
+ * Sign in with ChatGPT: opens in a new tab, finished by pasting back where it ended.
+ * @deprecated Use `LumenConnection` with a `signin` way; the assistant keeps the plan apart from the key.
+ */
 export function LumenChatgptSignin({ state, start, finish, signOut, test, }) {
     const id = useId();
     const [started, setStarted] = useState(null);

package/dist/connection.d.ts

@@ -0,0 +1,117 @@
+import { type ComponentType, type ReactNode } from 'react';
+/** A way's last test. `at` is an ISO time or epoch ms; `expired` asks for a new key or sign-in. */
+export interface ConnectionTest {
+    at: string | number;
+    ok: boolean;
+    /** What it read when it worked (`3 models`, the account). */
+    detail?: string | null;
+    /** Why it failed, in the person's words. */
+    error?: string | null;
+    expired?: boolean;
+}
+/** One value a way is set up with: a key, a client id, a secret. */
+export interface ConnectionField {
+    id: string;
+    label: string;
+    /** Typed as a password and never shown again. */
+    secret?: boolean;
+    /** What it starts with (`sk-`); anything else is an issue before Save. */
+    prefix?: string;
+    placeholder?: string;
+    info?: ReactNode;
+}
+/** A sign-in that opens in a new tab and ends on an address the person pastes back. */
+export interface ConnectionSignin {
+    /** Starts it on the server: the address to open and, when it varies, the one it ends on. */
+    start: () => Promise<{
+        url: string;
+        redirect?: string;
+    }>;
+    /** Where it ends when `start` does not say (`http://localhost:8765/`). */
+    redirect?: string;
+    /** Whose sign-in, for the button: `Sign in with ChatGPT`. */
+    provider?: string;
+}
+/** One way to connect. */
+export interface ConnectionWay {
+    id: string;
+    /** `API key`, `ChatGPT plan`, `Service token`. */
+    label: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    info?: ReactNode;
+    /** Set up now. */
+    set: boolean;
+    /** Who or what it is once set: an email, a key's last characters. */
+    ident?: ReactNode;
+    test?: ConnectionTest | null;
+    /** A short line in place of the actions (`From the server`, `Only an admin can change it`). */
+    note?: ReactNode;
+    /** Pasted values: the built-in form, saved by `onSave`. */
+    fields?: ConnectionField[];
+    /** Where a key is made, beside the empty fields. */
+    getUrl?: string;
+    signin?: ConnectionSignin;
+    /** Tests and keeps the values; false (the app said why) or a throw keeps the form open. */
+    onSave?: (values: Record<string, string>) => Promise<unknown>;
+    /** Finishes a sign-in from the pasted address; false or a throw keeps it open. */
+    onFinish?: (pasted: string) => Promise<unknown>;
+    /** One cheap call that says whether it still works; the app refreshes its data after. */
+    onTest?: () => Promise<unknown>;
+    /** Removes it (asks first). */
+    onRemove?: () => Promise<unknown>;
+    /** The confirm's question and action: `Sign out of ChatGPT?`, `Sign out`. */
+    removeTitle?: string;
+    removeText?: ReactNode;
+    removeLabel?: string;
+    /** The button that sets it up: `Add api key`, `Sign in with …` by default. */
+    addLabel?: string;
+    /** The app's own editor in place of `fields` and `signin`; `close` once saved or cancelled. */
+    form?: (close: () => void) => ReactNode;
+    /** Shown but not changed here (a person who is not an admin). */
+    readOnly?: boolean;
+}
+/** A label and value under the ways: `Server`, `Sent from`. */
+export interface ConnectionLine {
+    label: string;
+    value: ReactNode;
+    info?: ReactNode;
+    mono?: boolean;
+}
+export interface LumenConnectionProps {
+    /** Its id inside a LumenExpandList. */
+    id?: string;
+    name: ReactNode;
+    /** The collapsed row's line; by default the way in use and who it is. */
+    meta?: ReactNode;
+    /** A logo or icon before the name. */
+    logo?: ReactNode;
+    ways: ConnectionWay[];
+    /** The way in use when several are set up; by default the first set up. */
+    use?: string;
+    /** Picks the way in use; with it and two ways or more the ways show radios. */
+    onUse?: (way: string) => unknown;
+    lines?: ConnectionLine[];
+    defaultOpen?: boolean;
+    children?: ReactNode;
+}
+export type ConnectionStatus = 'connected' | 'untested' | 'expired' | 'failed' | 'off';
+/** Where a way stands: the row's pill. */
+export declare function connectionStatus(way: ConnectionWay | undefined): ConnectionStatus;
+/** The way in use: the picked one when it is set up, else the first set up. */
+export declare function activeWay(ways: ConnectionWay[], use?: string): ConnectionWay | undefined;
+/** The row's pill for a status. */
+export declare function ConnectionBadge({ status, signin, }: {
+    status: ConnectionStatus;
+    signin?: boolean;
+}): import("react").JSX.Element;
+/** A connection's mark: an icon or a letter on a tile. */
+export declare function ConnectionLogo({ icon: Icon, text, }: {
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    text?: string;
+}): import("react").JSX.Element;
+/** One connection: a row with its status, the ways to connect inside. */
+export declare function LumenConnection({ id, name, meta, logo, ways, use, onUse, lines, defaultOpen, children, }: LumenConnectionProps): import("react").JSX.Element;

package/dist/connection.js

@@ -0,0 +1,229 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// One connection, one look on every app: an AI provider, an email relay, a Google account, a
+// connector. A row that expands in place (LumenExpandRow) with one status pill; inside, each way to
+// connect (a pasted key or token, a sign-in that ends on an address the person pastes back, or the
+// app's own form). Several ways show radios and an In use tag, so a person who has both an API key and
+// a plan sign-in picks which one runs. A way that is set up shows who or what it is and its last test,
+// then Test, Remove (asks first) and Replace or Sign in again, all on the right. `lines` and
+// `children` hold the app's own settings below the ways (a server, a sender, folders).
+import { AlertTriangleIcon, CheckIcon, ExternalLinkIcon, KeyRoundIcon, LogInIcon, PlusIcon, RefreshCwIcon, Trash2Icon, XIcon, } from 'lucide-react';
+import { useId, useState } from 'react';
+import { LumenConfirm } from './confirm.js';
+import { LumenExpandRow } from './expand-list.js';
+import { SaveButton } from './form-issues.js';
+import { IconButton } from './icon-button.js';
+import { InfoLabel } from './info-tip.js';
+import { ErrorLine, errorText, useClock } from './integrations.js';
+import { cn } from './lib/utils.js';
+import { lumenToast } from './lumen-toast.js';
+import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
+import { Input } from './ui/input.js';
+import { Label } from './ui/label.js';
+import { RadioGroup, RadioGroupItem } from './ui/radio-group.js';
+/** Where a way stands: the row's pill. */
+export function connectionStatus(way) {
+    if (!way?.set)
+        return 'off';
+    if (!way.test)
+        return 'untested';
+    if (way.test.ok)
+        return 'connected';
+    return way.test.expired ? 'expired' : 'failed';
+}
+/** The way in use: the picked one when it is set up, else the first set up. */
+export function activeWay(ways, use) {
+    return ways.find((w) => w.id === use && w.set) ?? ways.find((w) => w.set);
+}
+/** The row's pill for a status. */
+export function ConnectionBadge({ status, signin, }) {
+    switch (status) {
+        case 'connected':
+            return (_jsxs(Badge, { variant: "outline", className: "text-gain", children: [_jsx(CheckIcon, {}), "Connected"] }));
+        case 'untested':
+            return _jsx(Badge, { variant: "outline", children: "Not tested" });
+        case 'expired':
+            return (_jsxs(Badge, { variant: "outline", className: "text-warning", children: [_jsx(AlertTriangleIcon, {}), signin ? 'Sign in again' : 'Key expired'] }));
+        case 'failed':
+            return (_jsxs(Badge, { variant: "outline", className: "text-loss", children: [_jsx(AlertTriangleIcon, {}), "Failed"] }));
+        default:
+            return (_jsx(Badge, { variant: "outline", className: "border-dashed text-muted-foreground", children: "Not connected" }));
+    }
+}
+/** A connection's mark: an icon or a letter on a tile. */
+export function ConnectionLogo({ icon: Icon, text, }) {
+    return (_jsx("span", { "aria-hidden": true, className: "flex size-8 shrink-0 items-center justify-center rounded-md border bg-muted font-semibold text-muted-foreground text-sm", children: Icon ? _jsx(Icon, { className: "size-4" }) : text }));
+}
+/** `just now`, `5 min ago`, `3 h ago`, `2 d ago`. */
+function ago(ms) {
+    const s = Math.max(0, (Date.now() - ms) / 1000);
+    if (s < 60)
+        return 'just now';
+    if (s < 3600)
+        return `${Math.floor(s / 60)} min ago`;
+    if (s < 86400)
+        return `${Math.floor(s / 3600)} h ago`;
+    return `${Math.floor(s / 86400)} d ago`;
+}
+/** `Service token` → `service token`; `API key` stays. */
+const lower = (label) => /^[A-Z][a-z]/.test(label) ? label.charAt(0).toLowerCase() + label.slice(1) : label;
+const toMs = (at) => (typeof at === 'number' ? at : Date.parse(at));
+/** One connection: a row with its status, the ways to connect inside. */
+export function LumenConnection({ id, name, meta, logo, ways, use, onUse, lines, defaultOpen, children, }) {
+    const active = activeWay(ways, use);
+    const status = connectionStatus(active);
+    const pick = ways.length > 1 && !!onUse;
+    const [picking, setPicking] = useState(false);
+    const choose = async (way) => {
+        if (!onUse || way === active?.id)
+            return;
+        setPicking(true);
+        try {
+            await onUse(way);
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+        }
+        finally {
+            setPicking(false);
+        }
+    };
+    const line = meta ??
+        (active ? (_jsxs(_Fragment, { children: [ways.length > 1 && active.label, ways.length > 1 && active.ident ? ' · ' : '', active.ident] })) : ('Not set up'));
+    const list = ways.map((w) => (_jsx(WayRow, { way: w, pick: pick, inUse: w.id === active?.id && ways.length > 1 }, w.id)));
+    return (_jsxs(LumenExpandRow, { id: id, name: name, meta: line, icon: logo, defaultOpen: defaultOpen, badge: _jsx(ConnectionBadge, { status: status, signin: !!active?.signin }), children: [_jsx("div", { className: "grid grid-cols-1 gap-2", children: pick ? (_jsx(RadioGroup, { value: active?.id ?? '', onValueChange: (v) => void choose(v), disabled: picking, "aria-label": `Which way ${typeof name === 'string' ? name : ''} connects`, className: "gap-2", children: list })) : (list) }), lines?.length ? (_jsx("dl", { className: "grid grid-cols-1 text-sm", children: lines.map((l) => (_jsxs("div", { className: "flex items-center gap-3 border-b py-2 last:border-b-0", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground", children: _jsx(InfoLabel, { info: l.info, children: l.label }) }), _jsx("dd", { className: cn('min-w-0 flex-1 truncate text-right', l.mono && 'font-code text-xs'), title: typeof l.value === 'string' ? l.value : undefined, children: l.value })] }, l.label))) })) : null, children] }));
+}
+/** One way: its name and state, its actions on the right, its form when open. */
+function WayRow({ way, pick, inUse }) {
+    const radioId = useId();
+    const clock = useClock();
+    const [editing, setEditing] = useState(false);
+    const [testing, setTesting] = useState(false);
+    const [error, setError] = useState(null);
+    const Icon = way.icon;
+    const status = connectionStatus(way);
+    const failing = status === 'failed' || status === 'expired';
+    const editable = !way.readOnly && !way.note;
+    const hasForm = !!(way.form || way.fields?.length || way.signin);
+    const test = async () => {
+        if (!way.onTest)
+            return;
+        setTesting(true);
+        setError(null);
+        try {
+            await way.onTest();
+        }
+        catch (e) {
+            setError(e);
+        }
+        finally {
+            setTesting(false);
+        }
+    };
+    const close = () => setEditing(false);
+    const fixLabel = way.signin ? 'Sign in again' : 'Replace';
+    const addLabel = way.addLabel ??
+        (way.signin
+            ? way.signin.provider
+                ? `Sign in with ${way.signin.provider}`
+                : 'Sign in'
+            : `Add ${lower(way.label)}`);
+    const t = way.test;
+    return (_jsxs("div", { className: cn('grid grid-cols-1 gap-2 rounded-md border px-3 py-2.5', inUse && 'border-primary/60 bg-primary/5'), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [pick && (_jsx(RadioGroupItem, { id: radioId, value: way.id, disabled: !way.set, "aria-label": `Use ${way.label}` })), Icon && _jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1 basis-40", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [pick ? (_jsx(Label, { htmlFor: radioId, className: "whitespace-nowrap font-medium", children: _jsx(InfoLabel, { info: way.info, children: way.label }) })) : (_jsx(InfoLabel, { className: "whitespace-nowrap font-medium text-sm", info: way.info, children: way.label })), inUse && (_jsx(Badge, { variant: "outline", className: "h-5 shrink-0 border-primary/40 text-primary", children: "In use" }))] }), _jsx("span", { className: "flex min-w-0 items-center gap-1 text-muted-foreground text-xs", children: way.set ? (_jsxs(_Fragment, { children: [way.ident && (_jsx("span", { className: "truncate", title: typeof way.ident === 'string' ? way.ident : undefined, children: way.ident })), way.ident && _jsx("span", { "aria-hidden": true, children: "\u00B7" }), t ? (_jsxs("span", { className: cn('flex shrink-0 items-center gap-1', t.ok ? 'text-gain' : 'text-loss'), title: `Tested ${clock(new Date(toMs(t.at)).toISOString())}${t.ok && t.detail ? ` · ${t.detail}` : ''}`, children: [t.ok ? (_jsx(CheckIcon, { className: "size-3" })) : (_jsx(AlertTriangleIcon, { className: "size-3" })), t.ok ? 'Works' : t.expired ? 'Expired' : 'Failed', " ", ago(toMs(t.at))] })) : (_jsx("span", { className: "shrink-0", children: "Not tested" }))] })) : (_jsx("span", { children: "Not set up" })) })] }), way.note ? (_jsx("span", { className: "ml-auto shrink-0 text-muted-foreground text-xs", children: way.note })) : way.set ? (_jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [way.onTest && (_jsx(IconButton, { icon: RefreshCwIcon, label: testing ? 'Testing…' : `Test ${way.label}`, busy: testing, disabled: testing, onClick: () => void test() })), editable && way.onRemove && (_jsx(LumenConfirm, { title: way.removeTitle ?? `Remove ${lower(way.label)}?`, description: way.removeText ?? 'You can add it again any time.', action: way.removeLabel ?? 'Remove', onConfirm: () => way.onRemove?.(), problem: errorText, children: _jsx(IconButton, { icon: Trash2Icon, label: way.removeLabel ?? `Remove ${way.label}` }) })), editable && hasForm && !editing && (_jsxs(Button, { size: "sm", variant: failing ? 'default' : 'outline', onClick: () => setEditing(true), children: [way.signin ? _jsx(LogInIcon, {}) : _jsx(KeyRoundIcon, {}), fixLabel] }))] })) : (editable &&
+                        hasForm &&
+                        !editing && (_jsxs(Button, { size: "sm", className: "ml-auto shrink-0", onClick: () => setEditing(true), children: [way.signin ? _jsx(LogInIcon, {}) : _jsx(PlusIcon, {}), addLabel] })))] }), t && !t.ok && t.error && (_jsx("p", { role: "alert", className: "text-xs text-loss", children: t.error })), _jsx(ErrorLine, { error: error }), editing &&
+                (way.form ? (way.form(close)) : way.signin ? (_jsx(SigninForm, { way: way, close: close })) : (_jsx(FieldsForm, { way: way, close: close })))] }));
+}
+/** Runs a save; false or a throw keeps the form open (a throw says why). */
+async function keep(run, setError) {
+    setError(null);
+    try {
+        return (await run()) !== false;
+    }
+    catch (e) {
+        setError(e);
+        return false;
+    }
+}
+/** The way's fields, checked before Test and save. */
+function FieldsForm({ way, close }) {
+    const ids = useId();
+    const fields = way.fields ?? [];
+    const [values, setValues] = useState({});
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const val = (f) => (values[f.id] ?? '').trim();
+    const issues = [];
+    for (const f of fields) {
+        const v = val(f);
+        if (v && f.prefix && !v.startsWith(f.prefix))
+            issues.push({
+                where: f.label,
+                message: `It starts with ${f.prefix}`,
+                target: `${ids}-${f.id}`,
+            });
+    }
+    const empty = fields.some((f) => !val(f));
+    const save = async () => {
+        if (!way.onSave)
+            return;
+        setBusy(true);
+        const trimmed = Object.fromEntries(fields.map((f) => [f.id, val(f)]));
+        if (await keep(() => Promise.resolve(way.onSave?.(trimmed)), setError))
+            close();
+        setBusy(false);
+    };
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-2 border-t pt-2", children: [fields.map((f) => (_jsxs("div", { className: "grid grid-cols-1 gap-1", children: [fields.length > 1 && (_jsx(Label, { htmlFor: `${ids}-${f.id}`, className: "text-xs", children: _jsx(InfoLabel, { info: f.info, children: f.label }) })), _jsx(Input, { id: `${ids}-${f.id}`, "aria-label": f.label, type: f.secret ? 'password' : 'text', autoComplete: "off", placeholder: f.placeholder ?? (f.prefix ? `${f.prefix}…` : f.label), className: "font-code text-xs", value: values[f.id] ?? '', onChange: (e) => setValues((s) => ({ ...s, [f.id]: e.target.value })), onKeyDown: (e) => e.key === 'Enter' && !empty && !issues.length && void save() })] }, f.id))), _jsx(ErrorLine, { error: error }), _jsxs("div", { className: "flex items-center justify-end gap-1", children: [way.getUrl && (_jsx(IconButton, { icon: ExternalLinkIcon, label: `Get ${/^[AEIOU]/i.test(way.label) ? 'an' : 'a'} ${lower(way.label)}`, href: way.getUrl })), _jsx(IconButton, { icon: XIcon, label: "Cancel", onClick: close }), _jsx(SaveButton, { issues: issues, busy: busy, disabled: empty, label: "Test and save", onSave: () => void save() })] })] }));
+}
+/** Open the sign-in in a new tab, then paste back the address it ended on. */
+function SigninForm({ way, close }) {
+    const id = useId();
+    const signin = way.signin;
+    const [redirect, setRedirect] = useState(null);
+    const [pasted, setPasted] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const open = async () => {
+        // Open the tab inside the click, or the browser blocks it; point it once the address is known.
+        const tab = window.open('about:blank', '_blank');
+        if (tab)
+            tab.opener = null;
+        setError(null);
+        try {
+            const r = await signin.start();
+            if (tab)
+                tab.location.href = r.url;
+            else
+                window.open(r.url, '_blank', 'noopener');
+            setRedirect(r.redirect ?? signin.redirect ?? '');
+        }
+        catch (e) {
+            tab?.close();
+            setError(e);
+        }
+    };
+    const origin = (() => {
+        try {
+            return redirect ? new URL(redirect).origin : '';
+        }
+        catch {
+            return redirect ?? '';
+        }
+    })();
+    const issues = [];
+    const p = pasted.trim();
+    if (p && origin && !p.startsWith(origin))
+        issues.push({ where: 'Address', message: `It starts with ${redirect}`, target: id });
+    const finish = async () => {
+        if (!way.onFinish)
+            return;
+        setBusy(true);
+        if (await keep(() => Promise.resolve(way.onFinish?.(p)), setError))
+            close();
+        setBusy(false);
+    };
+    return (_jsxs("ol", { className: "grid grid-cols-1 gap-3 border-t pt-2 text-sm", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(Step, { n: 1 }), _jsx("span", { className: "flex-1", children: "Sign in in a new tab" }), _jsxs(Button, { size: "sm", variant: redirect === null ? 'default' : 'outline', onClick: () => void open(), children: [_jsx(ExternalLinkIcon, {}), redirect === null ? 'Open sign-in' : 'Open again'] })] }), _jsxs("li", { className: "grid grid-cols-1 gap-2", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Step, { n: 2 }), _jsx(Label, { htmlFor: id, className: cn(redirect === null && 'text-muted-foreground'), children: _jsx(InfoLabel, { info: `The sign-in ends on ${redirect || signin.redirect || 'an address'} that does not load. That is expected: copy the whole address from that tab's address bar.`, children: "Paste the address it ended on" }) })] }), _jsx("span", { className: "flex gap-2 pl-7", children: _jsx(Input, { id: id, autoComplete: "off", disabled: redirect === null, placeholder: `${redirect || signin.redirect || 'http://localhost'}…`, className: "font-code text-xs", value: pasted, onChange: (e) => setPasted(e.target.value) }) })] }), _jsx(ErrorLine, { error: error }), _jsxs("li", { className: "flex items-center justify-end gap-1", children: [_jsx(IconButton, { icon: XIcon, label: "Cancel", onClick: close }), _jsx(SaveButton, { issues: issues, busy: busy, disabled: !p, label: "Finish", onSave: () => void finish() })] })] }));
+}
+function Step({ n }) {
+    return (_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-muted font-medium text-xs tabular-nums", children: n }));
+}

package/dist/expand-list.d.ts

@@ -9,11 +9,13 @@ export declare function LumenExpandList({ defaultOpen, className, children, }: {
  * One row that expands in place. Inside a LumenExpandList it opens by `id`; `open` and
  * `onOpenChange` make it controlled; alone it keeps its own state (`defaultOpen`).
  */
-export declare function LumenExpandRow({ id, name, meta, badge, open: openProp, onOpenChange, defaultOpen, children, }: {
+export declare function LumenExpandRow({ id, name, meta, badge, icon, open: openProp, onOpenChange, defaultOpen, children, }: {
     id?: string;
     name: ReactNode;
     meta?: ReactNode;
     badge?: ReactNode;
+    /** A logo or icon before the name. */
+    icon?: ReactNode;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     defaultOpen?: boolean;

package/dist/expand-list.js

@@ -16,7 +16,7 @@ export function LumenExpandList({ defaultOpen = null, className, children, }) {
  * One row that expands in place. Inside a LumenExpandList it opens by `id`; `open` and
  * `onOpenChange` make it controlled; alone it keeps its own state (`defaultOpen`).
  */
-export function LumenExpandRow({ id, name, meta, badge, open: openProp, onOpenChange, defaultOpen = false, children, }) {
+export function LumenExpandRow({ id, name, meta, badge, icon, open: openProp, onOpenChange, defaultOpen = false, children, }) {
     const list = useContext(ListCtx);
     const [own, setOwn] = useState(defaultOpen);
     const inList = list && id !== undefined;
@@ -29,5 +29,5 @@ export function LumenExpandRow({ id, name, meta, badge, open: openProp, onOpenCh
         else
             setOwn(o);
     };
-    return (_jsxs(Collapsible, { open: open, onOpenChange: change, className: "border-b last:border-b-0", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-3 px-1 py-3 text-left hover:bg-muted/50", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-medium", title: typeof name === 'string' ? name : undefined, children: name }), meta && (_jsx("span", { className: "block truncate text-xs text-muted-foreground", title: typeof meta === 'string' ? meta : undefined, children: meta }))] }), badge, _jsx(ChevronRightIcon, { className: cn('size-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') })] }) }), _jsx(CollapsibleContent, { className: "grid grid-cols-1 gap-5 px-1 pt-1 pb-5", children: children })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: change, className: "border-b last:border-b-0", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-3 px-1 py-3 text-left hover:bg-muted/50", children: [icon, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-medium", title: typeof name === 'string' ? name : undefined, children: name }), meta && (_jsx("span", { className: "block truncate text-xs text-muted-foreground", title: typeof meta === 'string' ? meta : undefined, children: meta }))] }), badge, _jsx(ChevronRightIcon, { className: cn('size-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') })] }) }), _jsx(CollapsibleContent, { className: "grid grid-cols-1 gap-5 px-1 pt-1 pb-5", children: children })] }));
 }

package/dist/index.d.ts

@@ -50,6 +50,7 @@ export { type Crumb, IconButton, type IconButtonProps, Page, PageBody, PageHeade
 export { DEFAULT_PREFS, deviceTimeZone, type Prefs, TIME_ZONES, type Theme, type TimeZoneId, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
 export { KIT, type KitConfig, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, type KeyTestResult, TestBadge, errorText, useClock, } from './integrations.js';
+export { ConnectionBadge, type ConnectionField, type ConnectionLine, ConnectionLogo, type ConnectionSignin, type ConnectionStatus, type ConnectionTest, type ConnectionWay, LumenConnection, type LumenConnectionProps, activeWay, connectionStatus, } from './connection.js';
 export { LumenChatgptSignin, type LumenChatgptSigninProps } from './chatgpt-signin.js';
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { type Fact, FactList, type FactListProps } from './fact-list.js';

package/dist/index.js

@@ -57,6 +57,7 @@ export { IconButton, Page, PageBody, PageHeader, } from './page.js';
 export { DEFAULT_PREFS, deviceTimeZone, TIME_ZONES, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
 export { KIT, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, TestBadge, errorText, useClock, } from './integrations.js';
+export { ConnectionBadge, ConnectionLogo, LumenConnection, activeWay, connectionStatus, } from './connection.js';
 export { LumenChatgptSignin } from './chatgpt-signin.js';
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { FactList } from './fact-list.js';

package/dist/people/email-settings.d.ts

@@ -1,7 +1,8 @@
 import type { PeopleAdapter } from './client.js';
-/** The Email section's body. In LumenSettings its badge sits in the header and Save in the footer;
- *  `inline` draws both in the body instead. */
-export declare function LumenEmailSettings({ adapter, inline, }: {
+/** The Email section's body: the relay as one connection (its key, its last check, Test, Remove),
+ *  set up or changed in place through the four steps. */
+export declare function LumenEmailSettings({ adapter, }: {
     adapter: PeopleAdapter;
+    /** Kept for apps that pass it; the steps always sit in the row now. */
     inline?: boolean;
 }): import("react").JSX.Element;

package/dist/people/email-settings.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { CableIcon, CheckIcon, CircleHelpIcon, GlobeIcon, MailIcon, PlugZapIcon, XIcon, } from 'lucide-react';
+import { CableIcon, CheckIcon, CircleHelpIcon, GlobeIcon, KeyRoundIcon, MailIcon, PlugZapIcon, XIcon, } from 'lucide-react';
 import { useEffect, useId, useState } from 'react';
+import { ConnectionLogo, LumenConnection } from '../connection.js';
+import { LumenExpandList } from '../expand-list.js';
 import { SaveButton } from '../form-issues.js';
+import { IconButton } from '../icon-button.js';
 import { InfoLabel } from '../info-tip.js';
 import { errorText } from '../integrations.js';
 import { LumenChoice } from '../lumen-choice.js';
 import { lumenToast } from '../lumen-toast.js';
-import { SettingsActions, SettingsFooter } from '../settings.js';
-import { Badge } from '../ui/badge.js';
 import { Button } from '../ui/button.js';
 import { Input } from '../ui/input.js';
 import { Spinner } from '../ui/spinner.js';
@@ -28,19 +29,68 @@ const same = (a, b) => a.route === b.route &&
     (a.apiKey ?? '') === (b.apiKey ?? '') &&
     a.from === b.from &&
     a.fromName === b.fromName;
-/** The Email section's body. In LumenSettings its badge sits in the header and Save in the footer;
- *  `inline` draws both in the body instead. */
-export function LumenEmailSettings({ adapter, inline = false, }) {
+/** The Email section's body: the relay as one connection (its key, its last check, Test, Remove),
+ *  set up or changed in place through the four steps. */
+export function LumenEmailSettings({ adapter, }) {
     const api = adapter.email;
+    const qc = useQueryClient();
+    const key = ['lumen-people', adapter.key, 'email'];
     const q = useQuery({
-        queryKey: ['lumen-people', adapter.key, 'email'],
+        queryKey: key,
         queryFn: () => api?.view() ?? Promise.reject(new Error('Email settings are not set up here.')),
     });
-    if (!q.data)
+    if (!q.data || !api)
         return (_jsx("p", { className: "text-muted-foreground text-sm", children: q.isError ? errorText(q.error) : 'Loading…' }));
-    return _jsx(EmailForm, { adapter: adapter, view: q.data, inline: inline });
+    const view = q.data;
+    const cur = view.current;
+    const last = view.lastTest;
+    const refresh = () => qc.invalidateQueries({ queryKey: ['lumen-people', adapter.key] });
+    const failed = last?.steps.find((x) => x.ok === false);
+    return (_jsx(LumenExpandList, { defaultOpen: cur ? null : 'email', children: _jsx(LumenConnection, { id: "email", name: "Email relay", logo: _jsx(ConnectionLogo, { icon: MailIcon }), meta: cur
+                ? `${cur.fromName ? `${cur.fromName} · ` : ''}${cur.from}`
+                : 'Invites and alerts are not emailed', ways: [
+                {
+                    id: 'api',
+                    label: 'Email API',
+                    icon: KeyRoundIcon,
+                    info: 'A Resend-compatible email API: Resend itself or a self-hosted one.',
+                    set: !!cur,
+                    ident: cur?.keyHint,
+                    test: last
+                        ? {
+                            at: last.at,
+                            ok: last.ok,
+                            detail: last.kind === 'test' ? 'Test email sent' : 'Connection checked',
+                            error: last.ok ? null : (failed?.text ?? 'The last check failed.'),
+                        }
+                        : null,
+                    addLabel: 'Set up',
+                    onTest: async () => {
+                        const check = await api.check(blank(view));
+                        await refresh();
+                        if (!check.ok)
+                            throw new Error(check.steps.find((x) => x.ok === false)?.text ?? 'The check failed.');
+                    },
+                    onRemove: async () => {
+                        await api.clear();
+                        await refresh();
+                    },
+                    removeTitle: 'Remove the email relay?',
+                    removeText: 'Nothing is emailed until it is set up again.',
+                    form: (close) => _jsx(EmailForm, { adapter: adapter, view: view, onDone: close }),
+                },
+            ], lines: cur
+                ? [
+                    {
+                        label: 'Reached through',
+                        value: view.routes.find((r) => r.id === cur.route)?.label ?? cur.route,
+                    },
+                    { label: 'Server', value: cur.url, mono: true },
+                    { label: 'Saved', value: `${cur.updatedBy ?? '—'} ${when(cur.updatedAt)}` },
+                ]
+                : undefined }) }));
 }
-function EmailForm({ adapter, view, inline, }) {
+function EmailForm({ adapter, view, onDone, }) {
     const api = adapter.email;
     const qc = useQueryClient();
     const ids = useId();
@@ -89,6 +139,7 @@ function EmailForm({ adapter, view, inline, }) {
             setReplacing(false);
             setResult(null);
             lumenToast.success('Email saved. Invites now go out by email.');
+            onDone();
         }
         catch (e) {
             lumenToast.error(errorText(e));
@@ -111,18 +162,12 @@ function EmailForm({ adapter, view, inline, }) {
     const ready = issues.length === 0;
     if (ready && changed && !passed)
         issues.push({ where: 'Test it', message: 'Check the connection or send a test first' });
-    const badge = passed ? (_jsx(Badge, { variant: "secondary", children: "Ready to save" })) : view.current ? (view.lastTest && !view.lastTest.ok ? (_jsx(Badge, { variant: "destructive", children: "Last test failed" })) : (_jsx(Badge, { variant: "secondary", className: "text-gain", children: "Working" }))) : (_jsx(Badge, { variant: "outline", children: "Not set up" }));
     const footer = (_jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: passed
                     ? 'Passed'
                     : view.current
                         ? `Saved by ${view.current.updatedBy ?? '—'} ${when(view.current.updatedAt)}`
-                        : 'Test to save' }), changed && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
-                    setDraft(blank(view));
-                    setReplacing(!view.current);
-                    setPerRoute({});
-                    setResult(null);
-                }, children: "Revert" })), _jsx(SaveButton, { issues: issues, busy: busy === 'save', disabled: !changed, onSave: save })] }));
-    return (_jsxs("div", { className: "flex flex-col", children: [inline ? (_jsx("div", { className: "flex justify-end pb-2", children: badge })) : (_jsx(SettingsActions, { children: badge })), _jsx(Step, { n: 1, title: "Reach the server through", children: _jsx(LumenChoice, { label: "Reach the server through", value: draft.route, options: view.routes.map((r) => ({
+                        : 'Test to save' }), _jsx(IconButton, { icon: XIcon, label: "Cancel", onClick: onDone }), _jsx(SaveButton, { issues: issues, busy: busy === 'save', disabled: !changed, onSave: save })] }));
+    return (_jsxs("div", { className: "flex flex-col border-t", children: [_jsx(Step, { n: 1, title: "Reach the server through", children: _jsx(LumenChoice, { label: "Reach the server through", value: draft.route, options: view.routes.map((r) => ({
                         value: r.id,
                         icon: r.id === 'public' ? GlobeIcon : CableIcon,
                         title: (_jsxs("span", { className: "flex w-full items-center gap-2", children: [r.label, r.state && (_jsx("span", { className: "ml-auto font-normal text-gain text-xs", children: r.state }))] })),
@@ -143,7 +188,7 @@ function EmailForm({ adapter, view, inline, }) {
                     } }) }), _jsxs(Step, { n: 2, title: "Email server", children: [_jsx(Labelled, { id: `${ids}-url`, label: _jsx(InfoLabel, { info: route?.urlInfo, children: "Server address" }), children: _jsx(Input, { id: `${ids}-url`, className: "font-code text-xs", value: draft.url, placeholder: route?.url ?? 'https://api.resend.com', onChange: (e) => set({ url: e.target.value }) }) }), _jsx(Labelled, { id: `${ids}-key`, label: "API key", children: replacing ? (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { id: `${ids}-key`, type: "password", autoComplete: "off", className: "font-code text-xs", value: draft.apiKey ?? '', onChange: (e) => set({ apiKey: e.target.value }) }), view.current && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
                                         setReplacing(false);
                                         set({ apiKey: '' });
-                                    }, children: "Keep" }))] })) : (_jsxs("div", { className: "flex h-9 items-center gap-3 rounded-md border px-3 text-sm", children: [_jsx("span", { className: "font-code text-muted-foreground text-xs", children: view.current?.keyHint }), _jsx("span", { className: "ml-auto text-gain text-xs", children: "sealed" }), _jsx(Button, { size: "xs", variant: "link", onClick: () => setReplacing(true), children: "Replace" })] })) })] }), _jsx(Step, { n: 3, title: "Sent from", children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row", children: [_jsx(Labelled, { id: `${ids}-name`, label: "Name", className: "sm:flex-1", children: _jsx(Input, { id: `${ids}-name`, value: draft.fromName, onChange: (e) => set({ fromName: e.target.value }) }) }), _jsx(Labelled, { id: `${ids}-from`, label: "Address", className: "sm:flex-[1.4]", children: _jsx(Input, { id: `${ids}-from`, type: "email", value: draft.from, placeholder: "hello@example.com", onChange: (e) => set({ from: e.target.value }) }) })] }) }), _jsxs(Step, { n: 4, title: "Test it", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: _jsxs(Button, { size: "sm", variant: "outline", disabled: !ready || !!busy, onClick: () => run('check'), children: [busy === 'check' ? _jsx(Spinner, {}) : _jsx(PlugZapIcon, {}), " Check connection"] }) }), _jsx(Labelled, { id: `${ids}-test-to`, label: "Send a test email to", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { id: `${ids}-test-to`, type: "email", className: "text-sm", value: testTo, placeholder: view.me, onChange: (e) => setTestTo(e.target.value) }), _jsxs(Button, { size: "sm", variant: "outline", disabled: !ready || !!busy || !testTo.trim(), onClick: () => run('test'), children: [busy === 'test' ? _jsx(Spinner, {}) : _jsx(MailIcon, {}), " Send test"] })] }) }), result && same(result.for, draft) && _jsx(Steps, { check: result.check }), !result && view.lastTest && (_jsxs("p", { className: "text-muted-foreground text-xs", children: ["Last ", view.lastTest.kind === 'test' ? 'test' : 'check', " ", when(view.lastTest.at), ":", ' ', view.lastTest.ok ? 'passed' : 'failed', "."] }))] }), inline ? (_jsx("div", { className: "border-t pt-3", children: footer })) : (_jsx(SettingsFooter, { children: footer }))] }));
+                                    }, children: "Keep" }))] })) : (_jsxs("div", { className: "flex h-9 items-center gap-3 rounded-md border px-3 text-sm", children: [_jsx("span", { className: "font-code text-muted-foreground text-xs", children: view.current?.keyHint }), _jsx("span", { className: "ml-auto text-gain text-xs", children: "sealed" }), _jsx(Button, { size: "xs", variant: "link", onClick: () => setReplacing(true), children: "Replace" })] })) })] }), _jsx(Step, { n: 3, title: "Sent from", children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row", children: [_jsx(Labelled, { id: `${ids}-name`, label: "Name", className: "sm:flex-1", children: _jsx(Input, { id: `${ids}-name`, value: draft.fromName, onChange: (e) => set({ fromName: e.target.value }) }) }), _jsx(Labelled, { id: `${ids}-from`, label: "Address", className: "sm:flex-[1.4]", children: _jsx(Input, { id: `${ids}-from`, type: "email", value: draft.from, placeholder: "hello@example.com", onChange: (e) => set({ from: e.target.value }) }) })] }) }), _jsxs(Step, { n: 4, title: "Test it", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: _jsxs(Button, { size: "sm", variant: "outline", disabled: !ready || !!busy, onClick: () => run('check'), children: [busy === 'check' ? _jsx(Spinner, {}) : _jsx(PlugZapIcon, {}), " Check connection"] }) }), _jsx(Labelled, { id: `${ids}-test-to`, label: "Send a test email to", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { id: `${ids}-test-to`, type: "email", className: "text-sm", value: testTo, placeholder: view.me, onChange: (e) => setTestTo(e.target.value) }), _jsxs(Button, { size: "sm", variant: "outline", disabled: !ready || !!busy || !testTo.trim(), onClick: () => run('test'), children: [busy === 'test' ? _jsx(Spinner, {}) : _jsx(MailIcon, {}), " Send test"] })] }) }), result && same(result.for, draft) && _jsx(Steps, { check: result.check }), !result && view.lastTest && (_jsxs("p", { className: "text-muted-foreground text-xs", children: ["Last ", view.lastTest.kind === 'test' ? 'test' : 'check', " ", when(view.lastTest.at), ":", ' ', view.lastTest.ok ? 'passed' : 'failed', "."] }))] }), _jsx("div", { className: "border-t pt-3", children: footer })] }));
 }
 function Step({ n, title, children }) {
     return (_jsxs("section", { className: "flex gap-4 border-t py-5 first-of-type:border-t-0", "aria-label": title, children: [_jsx("span", { className: "num flex size-6 shrink-0 items-center justify-center rounded-full bg-muted font-semibold text-xs", children: n }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [_jsx("h3", { className: "font-medium text-sm", children: title }), children] })] }));

package/dist/ui/radio-group.d.ts

@@ -0,0 +1,5 @@
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import type * as React from 'react';
+declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): React.JSX.Element;
+export { RadioGroup, RadioGroupItem };

package/dist/ui/radio-group.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+function RadioGroup({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn('grid gap-2', className), ...props }));
+}
+function RadioGroupItem({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn('border-input dark:bg-input/30 data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive peer relative flex size-4 shrink-0 items-center justify-center rounded-full border outline-none transition-colors after:absolute after:-inset-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "flex items-center justify-center", children: _jsx("span", { className: "size-2 rounded-full bg-primary" }) }) }));
+}
+export { RadioGroup, RadioGroupItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.92",
+  "version": "0.1.94",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.92",
+    "@columenlabs/lumen-ui-types": "0.1.94",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",