@columenlabs/lumen-ui 0.1.77 → 0.1.79

package/dist/assistant/settings.js

@@ -0,0 +1,322 @@
+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' },
+    { value: 'write', label: 'Read + write' },
+];
+/** 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) && (a.value !== 'write' || g.writes)).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/sources.d.ts

@@ -0,0 +1,54 @@
+import type { AssistantRefNote } from '@columenlabs/lumen-ui-types/assistant';
+import { type ComponentType } from 'react';
+/** One thing a source holds: a row in the `#` list, sent with the message as `ref`. */
+export interface AssistantSourceItem {
+    /** Unique within its source. */
+    id: string;
+    label: string;
+    /** The list's right column: a date, a count, where it lives. */
+    detail?: string;
+    /** Extra words search matches. */
+    keywords?: string[];
+    /** What it stands for on screen, lit while hovered in the list (`card:<id>` or an app path). */
+    target?: string;
+    /** What goes to the model: its kind, its label and whatever finds it (an id, a path). */
+    ref: AssistantRefNote;
+}
+/** A group of things in the `#` list. */
+export interface AssistantSource {
+    /** Unique: a page's source replaces an app source of the same id. */
+    id: string;
+    /** The group heading: "On this page", "Stories". */
+    label: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** What it holds now; `query` is what follows the `#`, for a source that searches. */
+    items: (query: string) => readonly AssistantSourceItem[];
+}
+/** Adds a source to the `#` list while the calling page is shown. */
+export declare function useAssistantSource(source: AssistantSource | null | undefined): void;
+/** The sources pages have added, newest page last. */
+export declare function useShownAssistantSources(): readonly AssistantSource[];
+/** What an app puts in the composer: text, chips to point at, a tier for the message. */
+export interface ComposeRequest {
+    text?: string;
+    refs?: AssistantRefNote[];
+    tier?: string;
+}
+/**
+ * Opens the assistant with `refs` as chips in its composer and `text` typed, focused for the person
+ * to finish: an Ask button beside a highlighted part of the page calls it.
+ */
+export declare function composeAssistant(request: ComposeRequest): void;
+/** The newest compose request and a way to mark it taken. */
+export declare function useComposeRequest(): readonly [ComposeRequest | null, () => void];
+/** Text the person highlighted on the page, and where it sits (`data-assistant-where`). */
+export interface PageSelection {
+    text: string;
+    where?: string;
+}
+/** What the person last highlighted on the page outside the assistant, or null. */
+export declare function usePageSelection(): PageSelection | null;
+/** A highlight as a `#` chip: its first words, the whole text and where it sits go to the model. */
+export declare const selectionRef: (s: PageSelection) => AssistantRefNote;

package/dist/assistant/sources.js

@@ -0,0 +1,114 @@
+import { useEffect, useRef, useSyncExternalStore } from 'react';
+const shown = new Map();
+const listeners = new Set();
+let snapshot = [];
+const changed = () => {
+    snapshot = [...shown.values()];
+    for (const l of listeners)
+        l();
+};
+const subscribe = (l) => {
+    listeners.add(l);
+    return () => listeners.delete(l);
+};
+/** Adds a source to the `#` list while the calling page is shown. */
+export function useAssistantSource(source) {
+    const latest = useRef(source);
+    latest.current = source;
+    const id = source?.id;
+    useEffect(() => {
+        if (!id)
+            return;
+        // The list reads the newest items, so a source registered once follows the page's data.
+        shown.set(id, {
+            get id() {
+                return id;
+            },
+            get label() {
+                return latest.current?.label ?? id;
+            },
+            get icon() {
+                return latest.current?.icon;
+            },
+            items: (q) => latest.current?.items(q) ?? [],
+        });
+        changed();
+        return () => {
+            shown.delete(id);
+            changed();
+        };
+    }, [id]);
+}
+/** The sources pages have added, newest page last. */
+export function useShownAssistantSources() {
+    return useSyncExternalStore(subscribe, () => snapshot, () => snapshot);
+}
+let composing = null;
+const composeListeners = new Set();
+/**
+ * Opens the assistant with `refs` as chips in its composer and `text` typed, focused for the person
+ * to finish: an Ask button beside a highlighted part of the page calls it.
+ */
+export function composeAssistant(request) {
+    composing = request;
+    for (const l of composeListeners)
+        l();
+}
+/** The newest compose request and a way to mark it taken. */
+export function useComposeRequest() {
+    const request = useSyncExternalStore((l) => {
+        composeListeners.add(l);
+        return () => composeListeners.delete(l);
+    }, () => composing, () => composing);
+    const take = () => {
+        composing = null;
+        for (const l of composeListeners)
+            l();
+    };
+    return [request, take];
+}
+let selected = null;
+const selectionListeners = new Set();
+let watching = 0;
+// The last highlight outside the assistant, kept while the person moves into the composer.
+const onSelection = () => {
+    const sel = document.getSelection();
+    const node = sel?.anchorNode;
+    const el = node instanceof Element ? node : node?.parentElement;
+    if (!el || el.closest('[data-assistant], input, textarea, [contenteditable="true"]'))
+        return;
+    const text = sel?.toString().trim() ?? '';
+    const next = text
+        ? {
+            text: text.slice(0, 4000),
+            ...(el.closest('[data-assistant-where]')?.dataset.assistantWhere
+                ? { where: el.closest('[data-assistant-where]')?.dataset.assistantWhere }
+                : {}),
+        }
+        : null;
+    if (next?.text === selected?.text && next?.where === selected?.where)
+        return;
+    selected = next;
+    for (const l of selectionListeners)
+        l();
+};
+/** What the person last highlighted on the page outside the assistant, or null. */
+export function usePageSelection() {
+    return useSyncExternalStore((l) => {
+        selectionListeners.add(l);
+        if (watching++ === 0)
+            document.addEventListener('selectionchange', onSelection);
+        return () => {
+            selectionListeners.delete(l);
+            if (--watching === 0)
+                document.removeEventListener('selectionchange', onSelection);
+        };
+    }, () => selected, () => null);
+}
+/** A highlight as a `#` chip: its first words, the whole text and where it sits go to the model. */
+export const selectionRef = (s) => ({
+    kind: 'selection',
+    label: `“${s.text.length > 40 ? `${s.text.slice(0, 40)}…` : s.text}”`,
+    text: s.text,
+    ...(s.where ? { where: s.where } : {}),
+});

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

@@ -0,0 +1,28 @@
+import type { AssistantEvent, AssistantMessage, ChatItem, ChatUsage, DraftItem, StepItem } 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>;
+    /** Takes back a change the assistant made at once (Undo on its line). */
+    undo: (step: StepItem) => 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;