@columenlabs/lumen-ui 0.1.77 → 0.1.78

package/dist/assistant/client.d.ts

@@ -0,0 +1,40 @@
+import type { AssistantChat, AssistantChatRow, AssistantEvent, AssistantMessage, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState } 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). */
+    key: string;
+    status(): Promise<AssistantStatus>;
+    settings(patch: AssistantSettingsPatch): Promise<AssistantStatus>;
+    /** Admin: what each person may spend a month on the app's keys. */
+    appCap(usd: number): Promise<AssistantStatus>;
+    /** Admin: the app's key of a provider (tested before it is kept); null removes it. */
+    appKey(provider: AssistantProvider, key: string | null): Promise<AssistantStatus>;
+    testAppKey(provider: AssistantProvider): Promise<Test>;
+    /** The person's own key of a provider; null removes it. */
+    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>;
+    /** Starts a plan sign-in (ChatGPT): the address to open and the one it ends on. */
+    startSignin(provider: AssistantProvider): Promise<{
+        url: string;
+        redirect: string;
+    }>;
+    /** Finishes it from the address the sign-in tab ended on. */
+    finishSignin(provider: AssistantProvider, url: string): Promise<AssistantStatus>;
+    /** Admin: ScrapeQL's Access service token; null removes it. */
+    scrapeql(token: {
+        client_id: string;
+        client_secret: string;
+    } | null): Promise<AssistantStatus>;
+    testScrapeql(): Promise<Test>;
+    chats(): Promise<AssistantChatRow[]>;
+    chat(id: string): Promise<AssistantChat>;
+    removeChat(id: string): Promise<void>;
+    /** One answer: `onEvent` hears each event as it streams; abort `signal` to stop it. */
+    send(msg: AssistantMessage, onEvent: (e: AssistantEvent) => void, signal?: AbortSignal): Promise<void>;
+    settleDraft(chatId: string, draftId: string, action: 'save' | 'dismiss'): Promise<DraftItem>;
+}
+/** The adapter over `assistantRoutes` mounted at `base` (`/api/assistant`). */
+export declare function assistantClient(base: string): AssistantAdapter;
+export {};

package/dist/assistant/client.js

@@ -0,0 +1,80 @@
+import { ApiError, apiJson } from '../api-fetch.js';
+/** Reads `event:` / `data:` blocks off a server-sent event stream. */
+async function readEvents(body, on) {
+    const reader = body.getReader();
+    const dec = new TextDecoder();
+    let buf = '';
+    for (;;) {
+        const { done, value } = await reader.read();
+        if (done)
+            break;
+        buf += dec.decode(value, { stream: true });
+        let at = buf.indexOf('\n\n');
+        while (at >= 0) {
+            const block = buf.slice(0, at);
+            buf = buf.slice(at + 2);
+            let event = 'message';
+            let data = '';
+            for (const line of block.split('\n')) {
+                if (line.startsWith('event:'))
+                    event = line.slice(6).trim();
+                else if (line.startsWith('data:'))
+                    data += line.slice(5).trim();
+            }
+            if (data) {
+                try {
+                    on({ event, data: JSON.parse(data) });
+                }
+                catch { }
+            }
+            at = buf.indexOf('\n\n');
+        }
+    }
+}
+/** The adapter over `assistantRoutes` mounted at `base` (`/api/assistant`). */
+export function assistantClient(base) {
+    const root = base.replace(/\/+$/, '');
+    const get = (path) => apiJson(`${root}${path}`, {}, 'assistant');
+    const send = (method, path, body = {}) => apiJson(`${root}${path}`, { method, body: JSON.stringify(body) }, 'assistant');
+    return {
+        key: `assistant:${root}`,
+        status: () => get('/status'),
+        settings: (patch) => send('PUT', '/settings', patch),
+        appCap: (usd) => send('PUT', '/app', { cap_usd: usd }),
+        appKey: (p, key) => key
+            ? send('PUT', `/key?provider=${p}`, { api_key: key })
+            : send('DELETE', `/key?provider=${p}`),
+        testAppKey: (p) => send('POST', `/key/test?provider=${p}`),
+        ownKey: (p, key) => key
+            ? 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}`),
+        startSignin: (p) => send('POST', `/my-signin?provider=${p}`),
+        finishSignin: (p, url) => send('POST', `/my-signin/finish?provider=${p}`, { url }),
+        scrapeql: (token) => token ? send('PUT', '/web/scrapeql', token) : send('DELETE', '/web/scrapeql'),
+        testScrapeql: () => send('POST', '/web/test'),
+        chats: () => get('/chats'),
+        chat: (id) => get(`/chats/${encodeURIComponent(id)}`),
+        removeChat: async (id) => {
+            await send('DELETE', `/chats/${encodeURIComponent(id)}`);
+        },
+        settleDraft: (chatId, draftId, action) => send('POST', `/chats/${encodeURIComponent(chatId)}/drafts/${encodeURIComponent(draftId)}`, {
+            action,
+        }),
+        async send(msg, onEvent, signal) {
+            const url = `${root}/chat`;
+            const res = await fetch(url, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json', accept: 'text/event-stream' },
+                body: JSON.stringify(msg),
+                ...(signal ? { signal } : {}),
+            });
+            if (!res.ok || !res.body) {
+                const b = (await res.json().catch(() => ({})));
+                throw new ApiError(b.error ?? `The answer failed (${res.status})`, 'POST', url, res.status, b.code);
+            }
+            await readEvents(res.body, onEvent);
+        },
+    };
+}

package/dist/assistant/index.d.ts

@@ -0,0 +1,4 @@
+export { type AssistantAdapter, assistantClient } from './client.js';
+export { LumenAssistant, type LumenAssistantProps, LumenComposer, assistantStatusKey, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
+export { assistantSettingsSections } from './settings.js';
+export { type AssistantChatState, type LiveItem, applyEvent, useAssistantChat, } from './use-assistant-chat.js';

package/dist/assistant/index.js

@@ -0,0 +1,7 @@
+// `@columenlabs/lumen-ui/assistant`: an assistant's chat panel and Settings sections, over the
+// routes of `@columenlabs/lumen-ai/assistant`; the shapes both share are
+// `@columenlabs/lumen-ui-types/assistant`.
+export { assistantClient } from './client.js';
+export { LumenAssistant, LumenComposer, assistantStatusKey, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
+export { assistantSettingsSections } from './settings.js';
+export { applyEvent, useAssistantChat, } from './use-assistant-chat.js';

package/dist/assistant/lumen-assistant.d.ts

@@ -0,0 +1,44 @@
+import type { AssistantMessage, AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
+import type { AssistantAdapter } from './client.js';
+import { type AssistantChatState } from './use-assistant-chat.js';
+export declare const assistantStatusKey: (client: AssistantAdapter) => string[];
+/** The person's assistant status, shared by the panel and Settings. */
+export declare function useAssistantStatus(client: AssistantAdapter): import("@tanstack/react-query").UseQueryResult<AssistantStatus, Error>;
+export declare const usd: (n: number) => string;
+export interface LumenAssistantProps {
+    client: AssistantAdapter;
+    /** The page the person is on, sent with each message. */
+    context?: AssistantMessage['context'];
+    /** Opens the app's Settings at the assistant (from a "not connected" line). */
+    onSettings?: () => void;
+    /** Days chats are kept, for the Chats menu's line. */
+    keepDays?: number;
+    /** Closes the panel (its ✕). */
+    onClose?: () => void;
+    /** An outside chat state (the dock shares one between the button and the panel). */
+    chat?: AssistantChatState;
+}
+/** The assistant's chat: header, messages and composer. */
+export declare function LumenAssistant({ client, context, onSettings, keepDays, onClose, chat: outside, }: LumenAssistantProps): import("react").JSX.Element;
+/** The message box: Enter sends, Shift+Enter breaks a line; Stop while an answer runs. */
+export declare function LumenComposer({ name, busy, queued, disabled, onSend, onStop, }: {
+    name: string;
+    busy: boolean;
+    queued: string | null;
+    disabled?: boolean;
+    onSend: (text: string) => void;
+    onStop: () => void;
+}): import("react").JSX.Element;
+/**
+ * The assistant docked in LumenShell: put `button` in `headerActions` and `panel` in `panel`.
+ * Open or closed is this browser tab's own, and ⌘J toggles it.
+ */
+export declare function useLumenAssistantDock(client: AssistantAdapter, o?: Omit<LumenAssistantProps, 'client' | 'chat' | 'onClose'> & {
+    name: string;
+}): {
+    open: boolean;
+    setOpen: (v: boolean) => void;
+    chat: AssistantChatState;
+    button: import("react").JSX.Element;
+    panel: import("react").JSX.Element;
+};

package/dist/assistant/lumen-assistant.js

@@ -0,0 +1,209 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { ArrowUpIcon, CheckIcon, CircleAlertIcon, CornerDownRightIcon, LightbulbIcon, PlusIcon, SparklesIcon, SquareIcon, WrenchIcon, XIcon, } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import Markdown from 'react-markdown';
+import { LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, useAssistantHotkey, } from '../assistant-panel.js';
+import { IconButton } from '../icon-button.js';
+import { errorText } from '../integrations.js';
+import { cn } from '../lib/utils.js';
+import { LumenSelector } from '../lumen-selector.js';
+import { lumenToast } from '../lumen-toast.js';
+import { Alert, AlertDescription } from '../ui/alert.js';
+import { Button } from '../ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
+import { Spinner } from '../ui/spinner.js';
+import { Textarea } from '../ui/textarea.js';
+import { useAssistantChat } from './use-assistant-chat.js';
+/** The main model's context drawn full (tokens); the mark sits where the assistant compacts. */
+const CONTEXT_MAX = 200_000;
+const COMPACT_AT = 150_000;
+export const assistantStatusKey = (client) => [
+    'lumen-assistant',
+    client.key,
+    'status',
+];
+/** The person's assistant status, shared by the panel and Settings. */
+export function useAssistantStatus(client) {
+    return useQuery({ queryKey: assistantStatusKey(client), queryFn: () => client.status() });
+}
+export const usd = (n) => n === 0 ? '$0' : n < 0.01 ? '<$0.01' : `$${n.toFixed(n < 10 ? 2 : 0)}`;
+const tokens = (n) => n < 1000
+    ? String(n)
+    : n < 1_000_000
+        ? `${(n / 1000).toFixed(n < 10_000 ? 1 : 0)}k`
+        : `${(n / 1e6).toFixed(1)}M`;
+const seconds = (ms) => (ms < 1000 ? `${ms} ms` : `${(ms / 1000).toFixed(1)} s`);
+/** The assistant's chat: header, messages and composer. */
+export function LumenAssistant({ client, context, onSettings, keepDays = 30, onClose, chat: outside, }) {
+    const own = useAssistantChat(client);
+    const chat = outside ?? own;
+    const qc = useQueryClient();
+    const status = useAssistantStatus(client);
+    const chats = useQuery({
+        queryKey: ['lumen-assistant', client.key, 'chats'],
+        queryFn: () => client.chats(),
+        enabled: false,
+    });
+    const s = status.data;
+    // A finished answer changes the spend and the chats list.
+    useEffect(() => {
+        if (chat.busy)
+            return;
+        void qc.invalidateQueries({ queryKey: ['lumen-assistant', client.key] });
+    }, [chat.busy, qc, client.key]);
+    const setTier = async (tier) => {
+        try {
+            qc.setQueryData(assistantStatusKey(client), await client.settings({ tier }));
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+        }
+    };
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center gap-1 border-b px-3", children: [_jsx(SparklesIcon, { className: "size-4 text-edge" }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: chat.title || s?.name || 'Assistant' }), s && s.tiers.length > 1 && (_jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Tier", value: s.tier, options: s.tiers.map((t) => ({ value: t.id, label: t.label, detail: t.model_label })), onChange: (t) => void setTier(t) })), _jsx(LumenAssistantChats, { chats: chats.data?.map((c) => ({
+                            id: c.id,
+                            title: c.title,
+                            updated_at: new Date(c.at).toISOString(),
+                        })) ?? (chats.isFetched ? [] : null), value: chat.chatId ?? undefined, note: `Chats are kept ${keepDays} days after their last message.`, onRefresh: () => void chats.refetch(), onOpen: (c) => void chat.open(c.id) }), _jsx(IconButton, { icon: PlusIcon, label: "New chat", disabled: !chat.items.length, onClick: chat.reset }), onClose && (_jsx(IconButton, { icon: XIcon, label: `Close ${s?.name ?? 'assistant'}`, onClick: onClose }))] }), _jsx(Messages, { chat: chat, status: s, onSettings: onSettings }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, disabled: !s || !!s.wait, onSend: (text) => chat.send(text, context ? { context } : undefined), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage })] }));
+}
+function Messages({ chat, status, onSettings, }) {
+    const end = useRef(null);
+    const count = JSON.stringify(chat.items).length;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: scroll to the end as the chat grows
+    useEffect(() => {
+        end.current?.scrollIntoView({ block: 'end' });
+    }, [count]);
+    return (_jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 py-3", children: [status?.wait && (_jsxs(Alert, { className: "mb-3", children: [_jsx(CircleAlertIcon, {}), _jsxs(AlertDescription, { className: "flex flex-col items-start gap-2", children: [WAIT[status.wait](status.admin, status.providers.find((p) => p.id === status.wait_provider)?.label ?? 'API'), onSettings && (_jsx(Button, { size: "sm", variant: "outline", onClick: onSettings, children: "Open Settings" }))] })] })), chat.loading ? (_jsxs("p", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Loading the chat\u2026"] })) : chat.items.length === 0 && !status?.wait ? (_jsxs("p", { className: "pt-8 text-center text-muted-foreground text-sm", children: ["Ask ", status?.name ?? 'the assistant', " anything."] })) : (_jsx(Items, { items: chat.items, onSettle: chat.settle, busy: chat.busy })), chat.busy && !chat.items.some(isLive) && (_jsxs("p", { className: "flex items-center gap-2 py-1 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Thinking\u2026"] })), _jsx("div", { ref: end })] }));
+}
+const isLive = (i) => !!i.live || (i.kind === 'handoff' && i.items.some(isLive));
+const WAIT = {
+    not_connected: (admin, provider) => admin
+        ? `Add an ${provider} key in Settings ▸ Model providers, or pick another model in Models.`
+        : `No ${provider} key is set yet. Add your own in Settings, or pick another model in Models.`,
+    app_cap: () => "You reached this month's cap on the shared keys. Add your own key, or wait for next month.",
+    own_cap: () => 'Your own keys reached their monthly cap. Raise it in Settings ▸ Model providers.',
+};
+function Items({ items, onSettle, busy, }) {
+    return (_jsx("div", { className: "flex flex-col gap-3", children: items.map((item, i) => (_jsx(Item, { item: item, onSettle: onSettle, busy: busy }, i))) }));
+}
+function Item({ item, onSettle, busy, }) {
+    switch (item.kind) {
+        case 'user':
+            return (_jsxs("div", { className: "ml-8 self-end rounded-lg bg-muted px-3 py-2 text-sm whitespace-pre-wrap", children: [item.text, item.context && (_jsxs("span", { className: "mt-1 block text-muted-foreground text-xs", children: ["on ", item.context] }))] }));
+        case 'text':
+            return (_jsxs("div", { className: "prose-sm text-sm leading-relaxed [&_code]:font-code [&_code]:text-xs [&_li]:ml-4 [&_ol]:list-decimal [&_p]:my-1.5 [&_ul]:list-disc", children: [_jsx(Markdown, { allowedElements: ['p', 'strong', 'em', 'code', 'ul', 'ol', 'li', 'a', 'pre', 'br'], unwrapDisallowed: true, children: item.text }), item.live && (_jsx("span", { className: "ml-0.5 inline-block h-3.5 w-1.5 animate-pulse bg-foreground/60 align-middle" }))] }));
+        case 'step':
+            return _jsx(Step, { step: item, live: !!item.live });
+        case 'draft':
+            return _jsx(Draft, { draft: item, onSettle: onSettle, busy: busy });
+        case 'handoff':
+            return _jsx(HandOff, { item: item, onSettle: onSettle, busy: busy });
+        case 'advice':
+            return (_jsxs("p", { className: "flex items-center gap-1.5 text-muted-foreground text-xs", children: [item.live ? _jsx(Spinner, { className: "size-3" }) : _jsx(LightbulbIcon, { className: "size-3.5" }), item.live
+                        ? `Asking ${item.label}…`
+                        : item.error
+                            ? `${item.label} could not advise (${item.error})`
+                            : `Asked ${item.label}`] }));
+        case 'compacted':
+            return _jsx(Rule, { children: "Compacted: earlier messages are sent as a summary" });
+        case 'stopped':
+            return _jsx(Rule, { children: item.reason === 'cap' ? "Stopped at this month's spend cap" : 'Stopped' });
+        case 'error':
+            return (_jsxs("p", { role: "alert", className: "flex items-start gap-1.5 text-loss text-sm", children: [_jsx(CircleAlertIcon, { className: "mt-0.5 size-4 shrink-0" }), item.text] }));
+    }
+}
+const Rule = ({ children }) => (_jsx("p", { className: "flex items-center gap-2 text-muted-foreground text-xs before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border", children: children }));
+function Step({ step, live }) {
+    return (_jsxs("p", { className: cn('flex min-w-0 items-center gap-1.5 text-xs', step.ok ? 'text-muted-foreground' : 'text-loss'), children: [live ? (_jsx(Spinner, { className: "size-3" })) : step.ok ? (_jsx(WrenchIcon, { className: "size-3.5 shrink-0" })) : (_jsx(CircleAlertIcon, { className: "size-3.5 shrink-0" })), _jsx("span", { className: "truncate", children: step.title }), !live && (_jsxs("span", { className: "shrink-0 tabular-nums", children: [step.rows !== undefined && `${step.rows} row${step.rows === 1 ? '' : 's'} · `, seconds(step.ms)] })), step.error && _jsxs("span", { className: "truncate", children: ["\u00B7 ", step.error] })] }));
+}
+/** The arguments as short lines: `name: value`. */
+function argLines(args) {
+    if (!args || typeof args !== 'object')
+        return [];
+    return Object.entries(args).map(([k, v]) => [
+        k,
+        typeof v === 'string' ? v : JSON.stringify(v),
+    ]);
+}
+function Draft({ draft, onSettle, busy, }) {
+    const [pending, setPending] = useState(null);
+    const go = async (action) => {
+        setPending(action);
+        try {
+            await onSettle(draft, action);
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+        }
+        finally {
+            setPending(null);
+        }
+    };
+    return (_jsxs("div", { "data-slot": "assistant-draft", className: "flex flex-col gap-2 rounded-lg border bg-card p-3 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: draft.title }), draft.status === 'saved' ? (_jsxs("span", { className: "flex items-center gap-1 text-gain text-xs", children: [_jsx(CheckIcon, { className: "size-3.5" }), " Saved"] })) : draft.status === 'dismissed' ? (_jsx("span", { className: "text-muted-foreground text-xs", children: "Dismissed" })) : draft.status === 'failed' ? (_jsx("span", { className: "text-loss text-xs", children: "Failed" })) : null] }), _jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs", children: argLines(draft.args)
+                    .slice(0, 8)
+                    .map(([k, v]) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-muted-foreground", children: k }), _jsx("dd", { className: "truncate font-code", children: v })] }, k))) }), draft.error && _jsx("p", { className: "text-loss text-xs", children: draft.error }), draft.status === 'open' && (_jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: !!pending || busy, onClick: () => void go('dismiss'), children: "Dismiss" }), _jsxs(Button, { size: "sm", disabled: !!pending || busy, onClick: () => void go('save'), children: [pending === 'save' ? _jsx(Spinner, {}) : _jsx(CheckIcon, {}), "Save"] })] }))] }));
+}
+const WHY = {
+    asked: 'you asked',
+    judgement: 'needs judgement',
+    stuck: 'stuck',
+    check_failed: 'a check failed',
+};
+function HandOff({ item, onSettle, busy, }) {
+    return (_jsxs("section", { className: "flex flex-col gap-2 border-l-2 border-primary/40 pl-3", children: [_jsxs("p", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(CornerDownRightIcon, { className: "size-3.5 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: item.label }), _jsxs("span", { className: "text-muted-foreground", children: ["\u00B7 ", WHY[item.why]] }), item.usage && (_jsx("span", { className: "ml-auto text-muted-foreground tabular-nums", children: usd(item.usage.usd) }))] }), _jsx("p", { className: "text-muted-foreground text-xs", children: item.task }), _jsx(Items, { items: item.items, onSettle: onSettle, busy: busy })] }));
+}
+/** The message box: Enter sends, Shift+Enter breaks a line; Stop while an answer runs. */
+export function LumenComposer({ name, busy, queued, disabled, onSend, onStop, }) {
+    const [text, setText] = useState('');
+    const send = () => {
+        if (!text.trim() || disabled)
+            return;
+        onSend(text);
+        setText('');
+    };
+    const slash = text.startsWith('/') && !text.includes(' ');
+    return (_jsxs("div", { className: "shrink-0 border-t p-3", children: [queued && (_jsxs("p", { className: "mb-2 truncate text-muted-foreground text-xs", children: ["Queued: ", _jsx("span", { className: "text-foreground", children: queued })] })), slash && (_jsxs("button", { type: "button", className: "mb-2 flex w-full items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs hover:bg-muted", onClick: () => setText('/compact'), children: [_jsx("span", { className: "font-code", children: "/compact" }), _jsx("span", { className: "text-muted-foreground", children: "Summarise the chat so far" })] })), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { "aria-label": `Message ${name}`, placeholder: `Ask ${name}…`, className: "max-h-48 min-h-11 resize-none pr-11", value: text, disabled: disabled, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
+                            if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+                                e.preventDefault();
+                                send();
+                            }
+                        } }), _jsx("div", { className: "absolute right-1.5 bottom-1.5", children: busy && !text.trim() ? (_jsx(IconButton, { icon: SquareIcon, label: "Stop", variant: "outline", size: "icon-xs", onClick: onStop })) : (_jsx(IconButton, { icon: ArrowUpIcon, label: busy ? 'Queue' : 'Send', variant: "default", size: "icon-xs", disabled: !text.trim() || disabled, onClick: send })) })] })] }));
+}
+/** The chat's cost and tokens (a popup splits them per part), and how full the context is. */
+function UsageLine({ usage }) {
+    if (!usage || !usage.calls)
+        return null;
+    const ctx = usage.context ?? 0;
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-3 px-3 pb-2 text-muted-foreground text-xs", children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "tabular-nums hover:text-foreground", children: [usd(usage.usd), " \u00B7 ", tokens(usage.in + usage.out), " tokens"] }) }), _jsxs(PopoverContent, { align: "start", className: "w-72 gap-1 p-2 text-xs", children: [usage.parts.map((p) => (_jsxs("div", { className: "flex justify-between gap-2 tabular-nums", children: [_jsx("span", { className: "truncate", children: p.label }), _jsxs("span", { children: [tokens(p.in), " in \u00B7 ", tokens(p.out), " out \u00B7 ", usd(p.usd)] })] }, p.label))), _jsxs("p", { className: "pt-1 text-muted-foreground", children: [tokens(usage.read), " of ", tokens(usage.in), " in read from cache"] })] })] }), ctx > 0 && (_jsxs("span", { className: "ml-auto flex items-center gap-1.5", title: `Context ${tokens(ctx)} of ${tokens(CONTEXT_MAX)}`, children: [_jsxs("span", { className: "relative h-1 w-16 overflow-hidden rounded-full bg-muted", children: [_jsx("span", { className: cn('absolute inset-y-0 left-0', ctx > COMPACT_AT ? 'bg-warning' : 'bg-primary/60'), style: { width: `${Math.min(100, (ctx / CONTEXT_MAX) * 100)}%` } }), _jsx("span", { className: "absolute inset-y-0 w-px bg-foreground/40", style: { left: `${(COMPACT_AT / CONTEXT_MAX) * 100}%` } })] }), _jsx("span", { className: "tabular-nums", children: tokens(ctx) })] }))] }));
+}
+/**
+ * The assistant docked in LumenShell: put `button` in `headerActions` and `panel` in `panel`.
+ * Open or closed is this browser tab's own, and ⌘J toggles it.
+ */
+export function useLumenAssistantDock(client, o = {
+    name: 'Assistant',
+}) {
+    const open = assistantOpen.use();
+    const chat = useAssistantChat(client);
+    const [unread, setUnread] = useState(false);
+    const wasBusy = useRef(false);
+    useEffect(() => {
+        if (wasBusy.current && !chat.busy && !assistantOpen.get())
+            setUnread(true);
+        wasBusy.current = chat.busy;
+    }, [chat.busy]);
+    const setOpen = (v) => {
+        assistantOpen.write(v);
+        if (v)
+            setUnread(false);
+    };
+    useAssistantHotkey(() => setOpen(!assistantOpen.get()));
+    const { name, ...props } = o;
+    return {
+        open,
+        setOpen,
+        chat,
+        button: (_jsx(LumenAssistantButton, { name: name, open: open, unread: unread, onOpen: () => setOpen(true) })),
+        panel: (_jsx(LumenAssistantPanel, { name: name, open: open, onOpenChange: setOpen, children: () => (_jsx(LumenAssistant, { client: client, chat: chat, onClose: () => setOpen(false), ...props })) })),
+    };
+}

package/dist/assistant/settings.d.ts

@@ -0,0 +1,13 @@
+import type { SettingsSectionDef } from '../settings.js';
+import type { AssistantAdapter } from './client.js';
+/**
+ * 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 declare function assistantSettingsSections({ client, name, web, }: {
+    client: AssistantAdapter;
+    /** The assistant's name, the parent section's title. */
+    name: string;
+    /** Show the Web section (the app set up `web` on the server). */
+    web?: boolean;
+}): SettingsSectionDef[];

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 })] }));
+}

package/dist/index.d.ts

@@ -49,6 +49,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 { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { LumenPager } from './pager.js';
 export { createDeskQueryClient } from './query-client.js';
 export { refreshHeaders, withRefreshToken } from './refresh.js';

package/dist/index.js

@@ -56,6 +56,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 { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { LumenPager } from './pager.js';
 export { createDeskQueryClient } from './query-client.js';
 export { refreshHeaders, withRefreshToken } from './refresh.js';

package/dist/integrations.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { LumenExpandRow } from './expand-list.js';
 /** A key's last test: when, whether it worked, and what it read or why it failed. */
 export interface KeyTestResult {
     at: string;
@@ -13,15 +14,8 @@ export declare const errorText: (e: unknown) => string;
 export declare function ErrorLine({ error }: {
     error: unknown;
 }): import("react").JSX.Element | null;
-/** One integration: a row that expands in place. */
-export declare function IntegrationRow({ name, meta, badge, open, onOpenChange, children, }: {
-    name: string;
-    meta: string;
-    badge: ReactNode;
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    children: ReactNode;
-}): import("react").JSX.Element;
+/** One integration: a row that expands in place (LumenExpandRow, kept under its old name). */
+export declare const IntegrationRow: typeof LumenExpandRow;
 /**
  * One linked connection (a bank, a broker) and its accounts (an app banks and
  * An app a broker link brokers alike). Collapsed by default, showing its name, `meta` and status; a

package/dist/integrations.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // the Test line that runs it again. A saved key says nothing; each row shows whether it works.
 import { AlertTriangleIcon, CheckIcon, ChevronRightIcon, RefreshCwIcon } from 'lucide-react';
 import { useState } from 'react';
+import { LumenExpandRow } from './expand-list.js';
 import { IconButton } from './icon-button.js';
 import { cn } from './lib/utils.js';
 import { usePrefs } from './prefs.js';
@@ -32,10 +33,8 @@ export function ErrorLine({ error }) {
         return null;
     return (_jsx("p", { role: "alert", className: "text-xs text-loss", children: errorText(error) }));
 }
-/** One integration: a row that expands in place. */
-export function IntegrationRow({ name, meta, badge, open, onOpenChange, children, }) {
-    return (_jsxs(Collapsible, { open: open, onOpenChange: onOpenChange, 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 }), _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 })] }));
-}
+/** One integration: a row that expands in place (LumenExpandRow, kept under its old name). */
+export const IntegrationRow = LumenExpandRow;
 /**
  * One linked connection (a bank, a broker) and its accounts (an app banks and
  * An app a broker link brokers alike). Collapsed by default, showing its name, `meta` and status; a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.77",
+  "version": "0.1.78",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -19,6 +19,10 @@
       "types": "./dist/people/index.d.ts",
       "default": "./dist/people/index.js"
     },
+    "./assistant": {
+      "types": "./dist/assistant/index.d.ts",
+      "default": "./dist/assistant/index.js"
+    },
     "./theme.css": "./dist/theme.css"
   },
   "files": [
@@ -45,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.77",
+    "@columenlabs/lumen-ui-types": "0.1.78",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",