@columenlabs/lumen-ui 0.1.76 → 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[];