@columenlabs/lumen-ui 0.1.76 → 0.1.78

package/dist/assistant/settings.js

@@ -0,0 +1,321 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQueryClient } from '@tanstack/react-query';
+import { CheckIcon, ExternalLinkIcon, GlobeIcon, KeyRoundIcon, LayersIcon, ReceiptIcon, SparklesIcon, Trash2Icon, WrenchIcon, } from 'lucide-react';
+import { useId, useState } from 'react';
+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 { LumenSelector } from '../lumen-selector.js';
+import { lumenToast } from '../lumen-toast.js';
+import { Badge } from '../ui/badge.js';
+import { Input } from '../ui/input.js';
+import { Label } from '../ui/label.js';
+import { Switch } from '../ui/switch.js';
+import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group.js';
+import { assistantStatusKey, usd, useAssistantStatus } from './lumen-assistant.js';
+const EFFORTS = [
+    { value: 'default', label: 'Model default' },
+    { value: 'low', label: 'Low' },
+    { value: 'medium', label: 'Medium' },
+    { value: 'high', label: 'High' },
+    { value: 'max', label: 'Max' },
+];
+const HAND_OFF = [
+    { value: 'next', label: 'Next tier up' },
+    { value: 'any', label: 'Any higher tier' },
+    { value: 'ask', label: 'Only when I ask' },
+];
+const ACCESS = [
+    { value: 'off', label: 'Off' },
+    { value: 'read', label: 'Read' },
+    { value: 'draft', label: 'Read + draft' },
+];
+/** Runs a change and keeps the status it returns, or says why it failed. */
+function useApply(client) {
+    const qc = useQueryClient();
+    const [busy, setBusy] = useState(null);
+    const apply = async (what, run, done) => {
+        setBusy(what);
+        try {
+            qc.setQueryData(assistantStatusKey(client), await run());
+            if (done)
+                lumenToast.success(done);
+            return true;
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+            return false;
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const refresh = () => qc.invalidateQueries({ queryKey: assistantStatusKey(client) });
+    return { apply, busy, refresh };
+}
+/** The section's body once the status loads. */
+function WithStatus({ client, children, }) {
+    const q = useAssistantStatus(client);
+    if (!q.data)
+        return (_jsx("p", { className: "text-muted-foreground text-sm", children: q.isError ? errorText(q.error) : 'Loading…' }));
+    return _jsx(_Fragment, { children: children(q.data) });
+}
+/** One setting: its label (with an (i) when `info` says more) and its control. */
+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);
+    const set = (patch) => apply('settings', () => client.settings(patch));
+    return (_jsx(WithStatus, { client: client, children: (s) => {
+            const above = s.tiers.slice(s.tiers.findIndex((t) => t.id === s.tier) + 1);
+            return (_jsxs("div", { className: "flex flex-col", children: [_jsx(Row, { label: "Tier", children: _jsx(LumenSelector, { label: "Tier", size: "sm", className: "w-44", value: s.tier, options: s.tiers.map((t) => ({
+                                value: t.id,
+                                label: t.label,
+                                detail: t.model_label,
+                            })), onChange: (tier) => void set({ tier }) }) }), s.tiers.length > 1 && (_jsx(Row, { label: "Hand off the work", info: "On its own, a higher tier takes one task in its own section of the chat and sends back a memo. It costs more.", children: _jsx(LumenSelector, { label: "Hand off the work", size: "sm", className: "w-44", value: s.hand_off, options: HAND_OFF, onChange: (hand_off) => void set({ hand_off }) }) })), s.tiers.length > 1 && (_jsx(Row, { label: "Ask for advice", info: "A bigger tier reads the chat and sends a plan before hard questions. It runs no tools, at most twice an answer.", children: _jsx(LumenSelector, { label: "Ask for advice", size: "sm", className: "w-44", value: s.advice, options: [
+                                { value: 'off', label: 'Off' },
+                                ...(above.length ? above : s.tiers).map((t) => ({
+                                    value: t.id,
+                                    label: t.label,
+                                })),
+                            ], onChange: (advice) => void set({ advice }) }) }))] }));
+        } }));
+}
+// ---------------------------------------------------------------- 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));
+    const commit = () => {
+        const n = Number(text);
+        if (Number.isFinite(n) && n >= 0 && n !== value)
+            onSave(Math.round(n * 100) / 100);
+        else
+            setText(String(value));
+    };
+    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: opens in a new tab, finished by pasting back where it ended. */
+function ChatgptSignin({ client, p }) {
+    const { apply, refresh } = useApply(client);
+    const id = useId();
+    const [started, setStarted] = useState(null);
+    const [pasted, setPasted] = useState('');
+    const [busy, setBusy] = useState(false);
+    const signedIn = p.own.via === 'chatgpt';
+    const start = 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;
+        try {
+            const { url, redirect } = await client.startSignin(p.id);
+            if (tab)
+                tab.location.href = url;
+            else
+                window.open(url, '_blank', 'noopener');
+            setStarted(redirect);
+        }
+        catch (e) {
+            tab?.close();
+            lumenToast.error(errorText(e));
+        }
+    };
+    const finish = async () => {
+        setBusy(true);
+        if (await apply(`signin:${p.id}`, () => client.finishSignin(p.id, pasted.trim()), 'Signed in')) {
+            setPasted('');
+            setStarted(null);
+        }
+        setBusy(false);
+    };
+    const issues = [];
+    if (pasted.trim() && started && !pasted.trim().startsWith(started.split('/auth')[0] ?? ''))
+        issues.push({ where: 'Address', message: `It starts with ${started}`, target: id });
+    if (signedIn)
+        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: "Your ChatGPT plan" }), _jsx("span", { className: "text-muted-foreground text-xs", children: p.own.hint }), p.own.test && _jsx(TestBadge, { test: p.own.test })] }), _jsx(KeyTestLine, { test: testOf(p.own), run: () => client.testOwnKey(p.id).finally(refresh) }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(IconButton, { icon: Trash2Icon, label: "Sign out of ChatGPT", variant: "outline", onClick: () => void apply(`own:${p.id}`, () => client.ownKey(p.id, null), 'Signed out') }), _jsx(SaveButton, { issues: [], icon: KeyRoundIcon, label: "Sign in again", onSave: start })] }), started && (_jsx(SigninPaste, { id: id, redirect: started, pasted: pasted, setPasted: setPasted, issues: issues, busy: busy, finish: finish }))] }));
+    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: "Run OpenAI models on your own ChatGPT plan instead of an API key.", children: "Your ChatGPT plan" }), _jsx(Badge, { variant: "outline", children: "Not signed in" })] }), _jsx("div", { className: "flex justify-end", children: _jsx(SaveButton, { issues: [], icon: ExternalLinkIcon, label: started ? 'Open the sign-in again' : 'Sign in with ChatGPT', onSave: start }) }), started && (_jsx(SigninPaste, { id: id, redirect: started, pasted: pasted, setPasted: setPasted, issues: issues, busy: busy, finish: finish }))] }));
+}
+/** Where the sign-in tab ends, and the box its address is pasted into. */
+function SigninPaste({ id, redirect, pasted, setPasted, issues, busy, finish, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: id, children: _jsx(InfoLabel, { info: `The sign-in ends on ${redirect}, a page that does not load. That is expected: copy the whole address from that tab's address bar.`, children: "Paste the address the sign-in ended on" }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { id: id, autoComplete: "off", placeholder: `${redirect}?code=…`, className: "font-code text-xs", value: pasted, onChange: (e) => setPasted(e.target.value) }), _jsx(SaveButton, { issues: issues, busy: busy, disabled: !pasted.trim(), label: "Finish", onSave: finish })] })] }));
+}
+/** One provider, collapsed to a row: where to make a key (a new tab), the app's key and the person's. */
+function ProviderKeys({ client, p, admin, }) {
+    const { apply, refresh } = useApply(client);
+    const appOn = p.app.set || !!p.app.from_env;
+    const plan = p.own.via === 'chatgpt';
+    const meta = [
+        appOn ? 'Shared key set' : 'No shared key',
+        plan ? 'your ChatGPT plan' : p.own.set ? 'your own key' : null,
+    ]
+        .filter(Boolean)
+        .join(' · ');
+    const failed = [p.app, p.own].some((k) => k.set && k.test && !k.test.ok);
+    const badge = failed ? (_jsx(TestBadge, { test: { ok: false } })) : appOn || p.own.set ? (_jsxs(Badge, { variant: "outline", className: "text-gain", children: [_jsx(CheckIcon, {}), "Ready"] })) : (_jsx(Badge, { variant: "outline", children: "Not set" }));
+    const ownKey = (_jsx(KeyBlock, { label: p.signin && !p.own.set ? 'Or your own API key' : 'Your own 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) }));
+    return (_jsx(LumenExpandRow, { id: p.id, name: p.label, meta: meta, badge: badge, children: _jsxs("div", { className: "flex flex-col", children: [_jsx(KeyBlock, { label: "Shared key", info: "An admin sets it once; everyone uses it, within each person's monthly cap.", prefix: p.prefix, provider: p.label, state: p.app, canEdit: admin, 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) }), p.signin === 'chatgpt' && (!p.own.set || plan) && _jsx(ChatgptSignin, { client: client, p: p }), !plan && ownKey] }) }));
+}
+function Providers({ client }) {
+    const { apply } = useApply(client);
+    return (_jsx(WithStatus, { client: client, children: (s) => {
+            const ownSet = s.providers.some((p) => p.own.set);
+            return (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: s.providers.map((p) => (_jsx(ProviderKeys, { client: client, p: p, admin: s.admin }, p.id))) }), s.admin && (_jsx(Row, { label: "Each person may spend", info: "On the shared keys, every provider together.", children: _jsx(CapInput, { label: "Cap per person", value: s.caps.app, onSave: (n) => void apply('cap', () => client.appCap(n)) }) })), ownSet && (_jsx(Row, { label: "Your keys may spend", info: "On your own keys, every provider together.", children: _jsx(CapInput, { label: "Your monthly cap", value: s.caps.own, onSave: (n) => void apply('own', () => client.ownCap(n)) }) })), _jsx(Row, { label: "Pay with first", info: "When it reaches its cap this month, or has no key for the tier's provider, the other pays.", children: _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: s.pay, "aria-label": "Pay with", onValueChange: (v) => v && void apply('pay', () => client.settings({ pay: v })), children: [_jsx(ToggleGroupItem, { value: "app", children: "Shared keys" }), _jsx(ToggleGroupItem, { value: "own", disabled: !ownSet, children: "Your keys" })] }) })] }));
+        } }));
+}
+// ---------------------------------------------------------------- models
+function Models({ client }) {
+    const { apply } = useApply(client);
+    const set = (patch) => void apply('settings', () => client.settings(patch));
+    return (_jsx(WithStatus, { client: client, children: (s) => {
+            const models = s.models.map((m) => ({ value: m.id, label: m.label, group: m.group }));
+            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;
+                        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)))] }));
+        } }));
+}
+// ---------------------------------------------------------------- tools
+function Tools({ client }) {
+    const { apply } = useApply(client);
+    return (_jsx(WithStatus, { client: client, children: (s) => s.groups.length ? (_jsx("div", { className: "flex flex-col", children: s.groups.map((g) => (_jsx(Row, { label: g.label, info: g.about, children: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: g.access, "aria-label": g.label, onValueChange: (v) => v &&
+                        void apply('access', () => client.settings({ access: { [g.id]: v } })), children: ACCESS.filter((a) => a.value !== 'draft' || g.drafts).map((a) => (_jsx(ToggleGroupItem, { value: a.value, children: a.label }, a.value))) }) }, g.id))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "This app gives the assistant no tools yet." })) }));
+}
+// ---------------------------------------------------------------- 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) })] })] })))] }));
+}
+function Web({ client }) {
+    const { apply } = useApply(client);
+    return (_jsx(WithStatus, { client: client, children: (s) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(Row, { label: "Read the web", info: "A plain fetch of public pages and APIs from the server, never the app's own pages.", children: _jsx(Switch, { "aria-label": "Read the web", checked: s.web.fetch, onCheckedChange: (fetch) => void apply('web', () => client.settings({ web: { fetch } })) }) }), _jsx(ScrapeqlBlock, { client: client, s: s })] })) }));
+}
+// ---------------------------------------------------------------- spend
+function Spend({ client }) {
+    return (_jsx(WithStatus, { client: client, children: (s) => {
+            const sp = s.spend;
+            return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "font-semibold text-2xl tabular-nums", children: usd(sp.usd) }), _jsxs("span", { className: "text-muted-foreground text-sm", children: [sp.month, sp.cap != null &&
+                                        sp.payer &&
+                                        ` · ${usd(sp.cap)} cap on ${sp.payer === 'app' ? 'the app key' : 'your key'}`] })] }), sp.rows.length ? (_jsx("div", { className: "flex flex-col text-sm", children: sp.rows.map((r) => (_jsxs("div", { className: "flex items-center gap-2 border-b py-2 last:border-b-0", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: r.label }), _jsx("span", { className: "text-muted-foreground text-xs", children: r.payer === 'app' ? 'Shared key' : 'Your key' }), _jsxs("span", { className: "w-16 text-right text-muted-foreground text-xs tabular-nums", children: [r.calls, " calls"] }), _jsx("span", { className: "w-16 text-right tabular-nums", children: usd(r.usd) })] }, `${r.label}:${r.payer}`))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing spent this month." }))] }));
+        } }));
+}
+/**
+ * The assistant's Settings sections: the assistant, then Model providers, Models, Tools, Web and
+ * Spend under it. Pass them to LumenShell's `shared` (or an app's own `settings`).
+ */
+export function assistantSettingsSections({ client, name, web = true, }) {
+    return [
+        {
+            id: 'assistant',
+            title: name,
+            icon: SparklesIcon,
+            description: 'Which tier answers, and when it asks a bigger one',
+            content: _jsx(General, { client: client }),
+        },
+        {
+            id: 'assistant-providers',
+            title: 'Model providers',
+            icon: KeyRoundIcon,
+            sub: true,
+            description: 'Keys for each provider, and who pays',
+            content: _jsx(Providers, { client: client }),
+        },
+        {
+            id: 'assistant-models',
+            title: 'Models',
+            icon: LayersIcon,
+            sub: true,
+            description: "Each tier's model and effort",
+            content: _jsx(Models, { client: client }),
+        },
+        {
+            id: 'assistant-tools',
+            title: 'Tools',
+            icon: WrenchIcon,
+            sub: true,
+            description: 'What the assistant may read and draft',
+            content: _jsx(Tools, { client: client }),
+        },
+        ...(web
+            ? [
+                {
+                    id: 'assistant-web',
+                    title: 'Web',
+                    icon: GlobeIcon,
+                    sub: true,
+                    description: 'Reading public pages and search',
+                    content: _jsx(Web, { client: client }),
+                },
+            ]
+            : []),
+        {
+            id: 'assistant-spend',
+            title: 'Spend',
+            icon: ReceiptIcon,
+            sub: true,
+            description: 'What answers cost this month',
+            content: _jsx(Spend, { client: client }),
+        },
+    ];
+}

package/dist/assistant/use-assistant-chat.d.ts

@@ -0,0 +1,26 @@
+import type { AssistantEvent, AssistantMessage, ChatItem, ChatUsage, DraftItem } from '@columenlabs/lumen-ui-types/assistant';
+import type { AssistantAdapter } from './client.js';
+/** An item as the panel draws it: a text still streaming, a step still running. */
+export type LiveItem = ChatItem & {
+    live?: boolean;
+};
+export interface AssistantChatState {
+    chatId: string | null;
+    title: string;
+    items: LiveItem[];
+    usage: ChatUsage | null;
+    /** An answer is streaming. */
+    busy: boolean;
+    /** A message waiting for the answer to end. */
+    queued: string | null;
+    /** The chat is loading. */
+    loading: boolean;
+    send: (message: string, extra?: Omit<AssistantMessage, 'message' | 'chat_id'>) => void;
+    stop: () => void;
+    open: (id: string) => Promise<void>;
+    reset: () => void;
+    settle: (draft: DraftItem, action: 'save' | 'dismiss') => Promise<void>;
+}
+/** A copy of the items with one event applied (hand-off sections copied too). */
+export declare function applyEvent(prev: LiveItem[], e: AssistantEvent): LiveItem[];
+export declare function useAssistantChat(client: AssistantAdapter): AssistantChatState;

package/dist/assistant/use-assistant-chat.js

@@ -0,0 +1,230 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { errorText } from '../integrations.js';
+/** Where an event lands: the chat, or the last hand-off section when it came from inside one. */
+function sinkOf(items, handoff) {
+    if (!handoff)
+        return items;
+    for (let i = items.length - 1; i >= 0; i--) {
+        const it = items[i];
+        if (it?.kind === 'handoff')
+            return it.items;
+    }
+    return items;
+}
+/** A copy of the items with one event applied (hand-off sections copied too). */
+export function applyEvent(prev, e) {
+    const items = prev.map((i) => i.kind === 'handoff' ? { ...i, items: [...i.items] } : i);
+    const inside = 'handoff' in e.data && e.data.handoff === true;
+    const sink = sinkOf(items, inside);
+    const last = sink[sink.length - 1];
+    switch (e.event) {
+        case 'text':
+            if (last?.kind === 'text' && last.live)
+                sink[sink.length - 1] = { ...last, text: last.text + e.data.delta };
+            else
+                sink.push({ kind: 'text', text: e.data.delta, live: true });
+            break;
+        case 'text_end':
+            if (last?.kind === 'text')
+                sink[sink.length - 1] = { kind: 'text', text: last.text };
+            break;
+        case 'step_start':
+            sink.push({
+                kind: 'step',
+                id: e.data.id,
+                tool: e.data.tool,
+                title: e.data.title,
+                ok: true,
+                ms: 0,
+                live: true,
+            });
+            break;
+        case 'step': {
+            const { handoff: _h, ...step } = e.data;
+            const at = sink.findIndex((i) => i.kind === 'step' && i.id === step.id);
+            if (at >= 0)
+                sink[at] = step;
+            else
+                sink.push(step);
+            break;
+        }
+        case 'draft': {
+            const { handoff: _h, ...draft } = e.data;
+            sink.push(draft);
+            break;
+        }
+        case 'handoff':
+            items.push({ ...e.data, items: [] });
+            break;
+        case 'handoff_done': {
+            const h = [...items].reverse().find((i) => i.kind === 'handoff');
+            if (h)
+                h.usage = e.data.usage;
+            break;
+        }
+        case 'advice':
+            items.push({ kind: 'advice', tier: e.data.tier, label: e.data.label, live: true });
+            break;
+        case 'advice_done': {
+            const at = items.findLastIndex((i) => i.kind === 'advice');
+            const a = items[at];
+            if (a?.kind === 'advice')
+                items[at] = {
+                    kind: 'advice',
+                    tier: a.tier,
+                    label: a.label,
+                    ...(e.data.error ? { error: e.data.error } : {}),
+                };
+            break;
+        }
+        case 'compacted':
+            items.push({ kind: 'compacted' });
+            break;
+        case 'stopped':
+            items.push({ kind: 'stopped', ...(e.data.reason ? { reason: e.data.reason } : {}) });
+            break;
+        case 'error':
+            items.push({
+                kind: 'error',
+                text: e.data.message,
+                ...(e.data.code ? { code: e.data.code } : {}),
+            });
+            break;
+    }
+    return items;
+}
+/** Nothing streams any more: a text or step cut by Stop ends where it was. */
+const settled = (items) => items.map((i) => {
+    if (i.kind === 'handoff')
+        return { ...i, items: settled(i.items) };
+    if (!i.live)
+        return i;
+    const { live: _l, ...rest } = i;
+    return rest;
+});
+export function useAssistantChat(client) {
+    const [chatId, setChatId] = useState(null);
+    const [title, setTitle] = useState('');
+    const [items, setItems] = useState([]);
+    const [usage, setUsage] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [queued, setQueued] = useState(null);
+    const abort = useRef(null);
+    const idRef = useRef(null);
+    idRef.current = chatId;
+    const run = useCallback(async (message, extra) => {
+        const ctl = new AbortController();
+        abort.current = ctl;
+        setBusy(true);
+        if (message !== '/compact')
+            setItems((p) => [
+                ...p,
+                {
+                    kind: 'user',
+                    text: message,
+                    at: Date.now(),
+                    ...(extra?.context ? { context: extra.context.label } : {}),
+                    ...(extra?.refs?.length ? { refs: extra.refs } : {}),
+                    ...(extra?.tier ? { tier: extra.tier } : {}),
+                },
+            ]);
+        try {
+            await client.send({ message, ...(idRef.current ? { chat_id: idRef.current } : {}), ...extra }, (e) => {
+                if (e.event === 'chat') {
+                    idRef.current = e.data.id;
+                    setChatId(e.data.id);
+                    setTitle(e.data.title);
+                }
+                else if (e.event === 'usage')
+                    setUsage(e.data);
+                else if (e.event === 'done')
+                    setUsage(e.data.usage);
+                else
+                    setItems((p) => applyEvent(p, e));
+            }, ctl.signal);
+        }
+        catch (err) {
+            if (ctl.signal.aborted)
+                setItems((p) => [...p, { kind: 'stopped' }]);
+            else
+                setItems((p) => [...p, { kind: 'error', text: errorText(err) }]);
+        }
+        finally {
+            setItems(settled);
+            abort.current = null;
+            setBusy(false);
+        }
+    }, [client]);
+    // A queued message goes once the answer ends.
+    useEffect(() => {
+        if (busy || !queued)
+            return;
+        setQueued(null);
+        void run(queued.message, queued.extra);
+    }, [busy, queued, run]);
+    const send = useCallback((message, extra) => {
+        const text = message.trim();
+        if (!text)
+            return;
+        if (abort.current)
+            setQueued({ message: text, ...(extra ? { extra } : {}) });
+        else
+            void run(text, extra);
+    }, [run]);
+    const stop = useCallback(() => abort.current?.abort(), []);
+    const reset = useCallback(() => {
+        abort.current?.abort();
+        setQueued(null);
+        setChatId(null);
+        idRef.current = null;
+        setTitle('');
+        setItems([]);
+        setUsage(null);
+    }, []);
+    const open = useCallback(async (id) => {
+        abort.current?.abort();
+        setQueued(null);
+        setLoading(true);
+        try {
+            const c = await client.chat(id);
+            idRef.current = c.id;
+            setChatId(c.id);
+            setTitle(c.title);
+            setItems(c.items);
+            setUsage(c.usage ?? null);
+        }
+        catch (err) {
+            setItems([{ kind: 'error', text: errorText(err) }]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client]);
+    const settle = useCallback(async (draft, action) => {
+        const id = idRef.current;
+        if (!id)
+            return;
+        const next = await client.settleDraft(id, draft.id, action);
+        const swap = (list) => list.map((i) => i.kind === 'draft' && i.id === next.id
+            ? next
+            : i.kind === 'handoff'
+                ? { ...i, items: swap(i.items) }
+                : i);
+        setItems(swap);
+    }, [client]);
+    return {
+        chatId,
+        title,
+        items,
+        usage,
+        busy,
+        queued: queued?.message ?? null,
+        loading,
+        send,
+        stop,
+        open,
+        reset,
+        settle,
+    };
+}

package/dist/expand-list.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+/** Rows that start collapsed; opening one closes the others. `defaultOpen` names a row open at first. */
+export declare function LumenExpandList({ defaultOpen, className, children, }: {
+    defaultOpen?: string | null;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * 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, }: {
+    id?: string;
+    name: ReactNode;
+    meta?: ReactNode;
+    badge?: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/expand-list.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A stack of rows that start collapsed and expand in place: a settings page's providers, channels or
+// accounts, each row's name, a line about it and a badge, its own settings inside. One row is open
+// at a time within a LumenExpandList.
+import { ChevronRightIcon } from 'lucide-react';
+import { createContext, useContext, useState } from 'react';
+import { cn } from './lib/utils.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
+const ListCtx = createContext(null);
+/** Rows that start collapsed; opening one closes the others. `defaultOpen` names a row open at first. */
+export function LumenExpandList({ defaultOpen = null, className, children, }) {
+    const [open, set] = useState(defaultOpen);
+    return (_jsx(ListCtx.Provider, { value: { open, set }, children: _jsx("div", { className: cn('grid grid-cols-1', className), children: 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, }) {
+    const list = useContext(ListCtx);
+    const [own, setOwn] = useState(defaultOpen);
+    const inList = list && id !== undefined;
+    const open = openProp ?? (inList ? list.open === id : own);
+    const change = (o) => {
+        if (onOpenChange)
+            onOpenChange(o);
+        else if (inList)
+            list.set(o ? id : null);
+        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 font-medium", children: name }), meta && _jsx("span", { className: "block truncate text-xs text-muted-foreground", 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 })] }));
+}