@columenlabs/lumen-ui 0.1.77 → 0.1.79

package/dist/assistant/lumen-assistant.js

@@ -0,0 +1,518 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CornerDownRightIcon, LightbulbIcon, PencilIcon, PlusIcon, SparklesIcon, SquareIcon, Undo2Icon, WrenchIcon, XIcon, } from 'lucide-react';
+import { createContext, useContext, 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, LumenSelectorList, } from '../lumen-selector.js';
+import { lumenToast } from '../lumen-toast.js';
+import { Alert, AlertDescription } from '../ui/alert.js';
+import { Button } from '../ui/button.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
+import { Spinner } from '../ui/spinner.js';
+import { Textarea } from '../ui/textarea.js';
+import { selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.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, commands = [], sources = [], }) {
+    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));
+        }
+    };
+    const tiers = s?.tiers ?? [];
+    const above = tiers.slice(tiers.findIndex((t) => t.id === s?.tier) + 1);
+    // The kit's commands; the app's own (`commands`, then the server's) come first and win a name.
+    const builtIns = [
+        {
+            name: 'compact',
+            about: 'Summarise the chat so far to free up context',
+            run: () => '/compact',
+        },
+        {
+            name: 'clear',
+            about: 'Start a new chat',
+            run: () => {
+                chat.reset();
+                return undefined;
+            },
+        },
+        ...(tiers.length > 1
+            ? [
+                {
+                    name: 'model',
+                    about: 'Answer on another tier from now on',
+                    args: '<tier>',
+                    options: () => tiers.map((t) => ({ value: t.id, label: t.label, detail: t.model_label })),
+                    run: (arg) => {
+                        const t = tiers.find((x) => x.id === arg || x.label.toLowerCase() === arg.toLowerCase());
+                        if (t)
+                            void setTier(t.id);
+                        else
+                            lumenToast.error(`No tier is called ${arg || 'that'}.`);
+                        return undefined;
+                    },
+                },
+            ]
+            : []),
+        ...(above[0]
+            ? [
+                {
+                    name: 'escalate',
+                    about: `Hand a task to ${above[0].label}`,
+                    args: '<task>',
+                    run: (task) => {
+                        if (task.trim())
+                            chat.send(task, { ...(context ? { context } : {}), tier: above[0]?.id });
+                        return undefined;
+                    },
+                },
+            ]
+            : []),
+    ];
+    const served = (s?.commands ?? []).map((c) => ({
+        ...c,
+        run: (args) => `/${c.name}${args ? ` ${args}` : ''}`,
+    }));
+    const allCommands = [];
+    for (const c of [...commands, ...served, ...builtIns])
+        if (!allCommands.some((x) => x.name === c.name))
+            allCommands.push(c);
+    const shown = useShownAssistantSources();
+    const allSources = [...shown, ...sources.filter((x) => !shown.some((y) => y.id === x.id))];
+    return (_jsxs("div", { "data-assistant": "", 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, commands: allCommands, tiers: tiers, sources: allSources, onSend: (text, extra) => chat.send(text, { ...(context ? { context } : {}), ...extra }), 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(TierNames.Provider, { value: (id) => status?.tiers.find((t) => t.id === id)?.label ?? id, children: _jsx(UndoWrite.Provider, { value: chat.undo, children: _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.',
+};
+/** A tier's name for a message's `@` chip. */
+const TierNames = createContext((id) => id);
+/** Takes back a change made at once (Undo on its line). */
+const UndoWrite = createContext(null);
+function Items({ items, onSettle, busy, }) {
+    // Cards drafted one after another sit in one stack, so many of them skim as lines.
+    const rows = [];
+    items.forEach((item, at) => {
+        const last = rows[rows.length - 1];
+        const prev = items[at - 1];
+        if (item.kind === 'draft' && prev?.kind === 'draft' && last) {
+            if ('drafts' in last)
+                last.drafts.push(item);
+            else
+                rows[rows.length - 1] = { at: last.at, drafts: [prev, item] };
+        }
+        else
+            rows.push({ at, item: item });
+    });
+    return (_jsx("div", { className: "flex flex-col gap-3", children: rows.map((r) => 'drafts' in r ? (_jsx(DraftStack, { drafts: r.drafts, onSettle: onSettle, busy: busy }, r.at)) : (_jsx(Item, { item: r.item, onSettle: onSettle, busy: busy }, r.at))) }));
+}
+function Item({ item, onSettle, busy, }) {
+    const tierName = useContext(TierNames);
+    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.tier || item.refs?.length) && (_jsxs("span", { className: "mb-1 flex flex-wrap gap-1", children: [item.tier && _jsx(ComposerChip, { sign: "@", label: tierName(item.tier) }), item.refs?.map((r, i) => (_jsx(ComposerChip, { sign: "#", label: r.label }, `${r.kind}:${r.label}:${i}`)))] })), 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 }) {
+    const undo = useContext(UndoWrite);
+    const [undoing, setUndoing] = useState(false);
+    const w = step.write;
+    const take = async () => {
+        if (!undo)
+            return;
+        setUndoing(true);
+        try {
+            await undo(step);
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+        }
+        finally {
+            setUndoing(false);
+        }
+    };
+    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" })) : w ? (_jsx(PencilIcon, { className: "size-3.5 shrink-0" })) : 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] }), w?.status === 'undone' ? (_jsx("span", { className: "shrink-0", children: "\u00B7 Undone" })) : (w?.undo &&
+                undo && (_jsxs(Button, { size: "sm", variant: "ghost", className: "ml-auto h-6 shrink-0 px-2 text-xs", disabled: undoing, onClick: () => void take(), children: [undoing ? _jsx(Spinner, {}) : _jsx(Undo2Icon, {}), "Undo"] })))] }));
+}
+/** 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),
+    ]);
+}
+/** One line that says what a card would change: its first few values. */
+const argSummary = (args) => argLines(args)
+    .slice(0, 3)
+    .map(([, v]) => v)
+    .join(' · ');
+function DraftStatus({ draft }) {
+    return draft.status === 'saved' ? (_jsxs("span", { className: "flex shrink-0 items-center gap-1 text-gain text-xs", children: [_jsx(CheckIcon, { className: "size-3.5" }), " Saved"] })) : draft.status === 'dismissed' ? (_jsx("span", { className: "shrink-0 text-muted-foreground text-xs", children: "Dismissed" })) : draft.status === 'failed' ? (_jsx("span", { className: "shrink-0 text-loss text-xs", children: "Failed" })) : null;
+}
+/** Saves or dismisses a card, a toast on failure. */
+function useSettle(onSettle) {
+    const [pending, setPending] = useState(null);
+    const go = async (draft, action) => {
+        setPending(action);
+        try {
+            await onSettle(draft, action);
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+        }
+        finally {
+            setPending(null);
+        }
+    };
+    return { pending, go };
+}
+/**
+ * A drafted change. Open, it shows what it would run with and Save or Dismiss; settled, or as a
+ * row in a stack of cards, it is one line that opens in place.
+ */
+function Draft({ draft, onSettle, busy, row, }) {
+    const { pending, go } = useSettle(onSettle);
+    const [open, setOpen] = useState(!row && draft.status === 'open');
+    const lines = argLines(draft.args);
+    const actions = draft.status === 'open' && (_jsxs("div", { className: "flex shrink-0 justify-end gap-1", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: !!pending || busy, onClick: () => void go(draft, 'dismiss'), children: "Dismiss" }), _jsxs(Button, { size: "sm", disabled: !!pending || busy, onClick: () => void go(draft, 'save'), children: [pending === 'save' ? _jsx(Spinner, {}) : _jsx(CheckIcon, {}), "Save"] })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "assistant-draft", className: cn('flex flex-col text-sm', row ? 'border-b px-1 py-1.5 last:border-b-0' : 'gap-2 rounded-lg border bg-card p-3'), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": `${open ? 'Hide' : 'Show'} ${draft.title}`, className: "flex min-w-0 flex-1 items-center gap-1.5 text-left", children: [_jsx(ChevronRightIcon, { className: cn('size-3.5 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') }), _jsx("span", { className: "shrink-0 font-medium", children: draft.title }), !open && (_jsx("span", { className: "min-w-0 truncate text-muted-foreground text-xs", children: argSummary(draft.args) }))] }) }), _jsx(DraftStatus, { draft: draft }), row && draft.status === 'open' && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: XIcon, label: `Dismiss ${draft.title}`, size: "icon-xs", disabled: !!pending || busy, onClick: () => void go(draft, 'dismiss') }), _jsx(IconButton, { icon: pending === 'save' ? Spinner : CheckIcon, label: `Save ${draft.title}`, size: "icon-xs", variant: "outline", disabled: !!pending || busy, onClick: () => void go(draft, 'save') })] }))] }), _jsxs(CollapsibleContent, { className: cn('flex flex-col gap-2', row && 'pt-1.5 pl-5'), children: [_jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs", children: lines.slice(0, 12).map(([k, v]) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-muted-foreground", children: k }), _jsx("dd", { className: "font-code break-words", children: v })] }, k))) }), !row && actions] }), draft.error && _jsx("p", { className: "text-loss text-xs", children: draft.error })] }));
+}
+/** Two or more cards in a row: one stack with a count, Save all and Dismiss all, a line each. */
+function DraftStack({ drafts, onSettle, busy, }) {
+    const [all, setAll] = useState(null);
+    const open = drafts.filter((d) => d.status === 'open');
+    const saved = drafts.filter((d) => d.status === 'saved').length;
+    const failed = drafts.filter((d) => d.status === 'failed').length;
+    // One at a time, in order: a later change may build on an earlier one.
+    const settleAll = async (action) => {
+        setAll(action);
+        try {
+            for (const d of open)
+                await onSettle(d, action);
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+        }
+        finally {
+            setAll(null);
+        }
+    };
+    return (_jsxs("div", { "data-slot": "assistant-draft-stack", className: "flex flex-col rounded-lg border bg-card p-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2 px-1 pb-1.5", children: [_jsxs("span", { className: "min-w-0 flex-1 text-xs", children: [_jsxs("span", { className: "font-medium", children: [drafts.length, " changes"] }), _jsxs("span", { className: "text-muted-foreground", children: [' · ', [
+                                        open.length && `${open.length} to review`,
+                                        saved && `${saved} saved`,
+                                        failed && `${failed} failed`,
+                                    ]
+                                        .filter(Boolean)
+                                        .join(' · ') || 'all settled'] })] }), open.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: !!all || busy, onClick: () => void settleAll('dismiss'), children: "Dismiss all" }), _jsxs(Button, { size: "sm", disabled: !!all || busy, onClick: () => void settleAll('save'), children: [all === 'save' ? _jsx(Spinner, {}) : _jsx(CheckIcon, {}), "Save all"] })] }))] }), _jsx("div", { className: "flex flex-col border-t", children: drafts.map((d) => (_jsx(Draft, { draft: d, onSettle: onSettle, busy: busy || !!all, row: true }, d.id))) })] }));
+}
+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 })] }));
+}
+/** A chip over the message box: a tier picked with `@` or a thing pointed at with `#`. */
+function ComposerChip({ sign, label, onRemove, }) {
+    return (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-md border bg-background px-1.5 py-0.5 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: sign }), _jsx("span", { className: "truncate", children: label }), onRemove && (_jsx("button", { type: "button", "aria-label": `Remove ${label}`, className: "text-muted-foreground hover:text-foreground", onClick: onRemove, children: _jsx(XIcon, { className: "size-3" }) }))] }));
+}
+/**
+ * The message box: Enter sends, Shift+Enter breaks a line; Stop while an answer runs. Three
+ * triggers list what can follow them as it is typed: `/` at the start a command, `@` a tier for
+ * this message, `#` a thing to point at (the `sources`); a picked tier or thing shows as a chip.
+ */
+export function LumenComposer({ name, busy, queued, disabled, commands = [], tiers = [], sources = [], onSend, onStop, }) {
+    const [text, setText] = useState('');
+    const [caret, setCaret] = useState(0);
+    const [closed, setClosed] = useState(null);
+    const [tier, setTier] = useState(null);
+    const [refs, setRefs] = useState([]);
+    const list = useRef(null);
+    const box = useRef(null);
+    const selection = usePageSelection();
+    // An app's compose request (`composeAssistant`): its chips and text, ready to finish.
+    const [request, take] = useComposeRequest();
+    // biome-ignore lint/correctness/useExhaustiveDependencies: only a new request fills the box.
+    useEffect(() => {
+        if (!request)
+            return;
+        take();
+        if (request.refs?.length)
+            setRefs((p) => [...p, ...(request.refs ?? [])]);
+        if (request.tier)
+            setTier(request.tier);
+        if (request.text !== undefined) {
+            setText(request.text);
+            setCaret(request.text.length);
+        }
+        requestAnimationFrame(() => box.current?.focus());
+    }, [request]);
+    const m = /^\/(\S*)(?:\s(.*))?$/s.exec(text);
+    const cmd = m && m[2] !== undefined ? commands.find((c) => c.name === m[1]) : undefined;
+    // `@` or `#` as the word the caret is in: `pick #sto|` lists the sources' items matching "sto".
+    const word = /(^|\s)([@#])([^\s@#]*)$/.exec(text.slice(0, caret));
+    const trigger = word ? word[2] : null;
+    const asked = word?.[3] ?? '';
+    const open = closed !== `${text}|${caret}`;
+    const slash = m && commands.length ? (m[2] === undefined ? 'command' : cmd?.options ? 'arg' : null) : null;
+    const at = trigger === '@' && tiers.length > 1
+        ? '@'
+        : trigger === '#' && (sources.length || selection)
+            ? '#'
+            : null;
+    const picking = open ? (slash ?? at) : null;
+    const extra = () => ({
+        ...(tier ? { tier } : {}),
+        ...(refs.length ? { refs } : {}),
+    });
+    const clear = () => {
+        setText('');
+        setCaret(0);
+        setTier(null);
+        setRefs([]);
+    };
+    const run = async (c, args) => {
+        const keep = extra();
+        clear();
+        try {
+            const out = await c.run(args.trim());
+            if (out)
+                onSend(out, keep);
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+        }
+    };
+    const send = () => {
+        if (!text.trim() || disabled)
+            return;
+        const c = m ? commands.find((x) => x.name === m[1]) : undefined;
+        if (c) {
+            void run(c, m?.[2] ?? '');
+            return;
+        }
+        onSend(text, extra());
+        clear();
+    };
+    const pickCommand = (o) => {
+        const c = commands.find((x) => x.name === o.value);
+        if (!c)
+            return;
+        if (c.args) {
+            setText(`/${c.name} `);
+            setCaret(c.name.length + 2);
+            box.current?.focus();
+        }
+        else
+            void run(c, '');
+    };
+    // Takes the `@word` or `#word` out of the text once its pick is a chip.
+    const dropWord = () => {
+        if (!word)
+            return;
+        const start = caret - 1 - asked.length;
+        const next = text.slice(0, start) + text.slice(caret).replace(/^ /, '');
+        setText(next);
+        setCaret(start);
+        requestAnimationFrame(() => {
+            box.current?.focus();
+            box.current?.setSelectionRange(start, start);
+        });
+    };
+    const sourceItems = new Map();
+    const picked = selection ? selectionRef(selection) : null;
+    if (picked)
+        sourceItems.set('selection', picked);
+    const sourceOptions = picking === '#'
+        ? [
+            ...(picked
+                ? [
+                    {
+                        value: 'selection',
+                        label: picked.label,
+                        group: 'Selected text',
+                        ...(selection?.where ? { detail: selection.where } : {}),
+                        ...(refs.some((r) => sameRef(r, picked)) ? { disabled: 'Added' } : {}),
+                    },
+                ]
+                : []),
+            ...sources.flatMap((s) => s.items(asked).map((i) => {
+                const value = `${s.id}:${i.id}`;
+                sourceItems.set(value, i.ref);
+                return {
+                    value,
+                    label: i.label,
+                    group: s.label,
+                    ...(i.detail ? { detail: i.detail } : {}),
+                    ...(s.icon ? { icon: s.icon } : {}),
+                    ...(i.keywords ? { keywords: i.keywords } : {}),
+                    ...(i.target ? { target: i.target } : {}),
+                    ...(refs.some((r) => sameRef(r, i.ref)) ? { disabled: 'Added' } : {}),
+                };
+            })),
+        ]
+        : [];
+    const tierLabel = tiers.find((t) => t.id === tier)?.label;
+    const hints = [
+        commands.length && '/',
+        tiers.length > 1 && '@',
+        (sources.length || selection) && '#',
+    ].filter(Boolean);
+    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 })] })), picking === 'command' && (_jsx(LumenSelectorList, { handle: list, label: "Commands", className: "mb-2", fuzzy: true, query: m?.[1] ?? '', options: commands.map((c) => ({
+                    value: c.name,
+                    label: `/${c.name}`,
+                    ...(c.args ? { detail: c.args } : {}),
+                    description: c.about,
+                })), empty: "No command matches", onPick: pickCommand, onClose: () => setClosed(`${text}|${caret}`) })), picking === 'arg' && cmd?.options && (_jsx(LumenSelectorList, { handle: list, label: `/${cmd.name}`, className: "mb-2", fuzzy: true, query: m?.[2] ?? '', options: cmd.options(), onPick: (o) => void run(cmd, o.value), onClose: () => setClosed(`${text}|${caret}`) })), picking === '@' && (_jsx(LumenSelectorList, { handle: list, label: "Answer this message on", className: "mb-2", fuzzy: true, query: asked, options: tiers.map((t) => ({
+                    value: t.id,
+                    label: t.label,
+                    ...(t.model_label ? { detail: t.model_label } : {}),
+                })), empty: "No tier matches", onPick: (o) => {
+                    setTier(o.value);
+                    dropWord();
+                }, onClose: () => setClosed(`${text}|${caret}`) })), picking === '#' && (_jsx(LumenSelectorList, { handle: list, label: "Point at", className: "mb-2", query: asked, options: sourceOptions, empty: "Nothing matches", onPick: (o) => {
+                    const r = sourceItems.get(o.value);
+                    if (r)
+                        setRefs((p) => [...p, r]);
+                    dropWord();
+                }, onClose: () => setClosed(`${text}|${caret}`) })), (tierLabel || refs.length > 0) && (_jsxs("div", { className: "mb-2 flex flex-wrap gap-1", children: [tierLabel && _jsx(ComposerChip, { sign: "@", label: tierLabel, onRemove: () => setTier(null) }), refs.map((r, i) => (_jsx(ComposerChip, { sign: "#", label: r.label, onRemove: () => setRefs((p) => p.filter((_, j) => j !== i)) }, `${r.kind}:${r.label}:${i}`)))] })), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { ref: box, "aria-label": `Message ${name}`, placeholder: `Ask ${name}…${hints.length ? ` (${hints.join(' ')})` : ''}`, className: "max-h-48 min-h-11 resize-none pr-11", value: text, disabled: disabled, onChange: (e) => {
+                            setText(e.target.value);
+                            setCaret(e.target.selectionStart);
+                        }, onSelect: (e) => setCaret(e.currentTarget.selectionStart), onKeyDown: (e) => {
+                            if (picking && list.current?.key(e))
+                                return;
+                            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 })) })] })] }));
+}
+const sameRef = (a, b) => a.kind === b.kind && JSON.stringify(a) === JSON.stringify(b);
+/** 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 [request] = useComposeRequest();
+    useEffect(() => {
+        if (request && !assistantOpen.get())
+            assistantOpen.write(true);
+    }, [request]);
+    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[];