@columenlabs/lumen-ui 0.1.78 → 0.1.80

package/dist/assistant/client.d.ts

@@ -1,4 +1,4 @@
-import type { AssistantChat, AssistantChatRow, AssistantEvent, AssistantMessage, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState } from '@columenlabs/lumen-ui-types/assistant';
+import type { AssistantChat, AssistantChatRow, AssistantEvent, AssistantMessage, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState, StepItem } 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). */
@@ -34,6 +34,8 @@ export interface AssistantAdapter {
     /** 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>;
+    /** Takes back a change the assistant made at once. */
+    undoWrite(chatId: string, stepId: string): Promise<StepItem>;
 }
 /** The adapter over `assistantRoutes` mounted at `base` (`/api/assistant`). */
 export declare function assistantClient(base: string): AssistantAdapter;

package/dist/assistant/client.js

@@ -62,6 +62,7 @@ export function assistantClient(base) {
         settleDraft: (chatId, draftId, action) => send('POST', `/chats/${encodeURIComponent(chatId)}/drafts/${encodeURIComponent(draftId)}`, {
             action,
         }),
+        undoWrite: (chatId, stepId) => send('POST', `/chats/${encodeURIComponent(chatId)}/writes/${encodeURIComponent(stepId)}/undo`),
         async send(msg, onEvent, signal) {
             const url = `${root}/chat`;
             const res = await fetch(url, {

package/dist/assistant/index.d.ts

@@ -1,4 +1,5 @@
 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 AssistantCommand, type ComposerExtra, LumenAssistant, type LumenAssistantProps, LumenComposer, assistantStatusKey, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
+export { assistantAdminSections, assistantSettingsSections } from './settings.js';
+export { type AssistantSource, type AssistantSourceItem, type ComposeRequest, type PageSelection, composeAssistant, selectionRef, useAssistantSource, usePageSelection, useShownAssistantSources, } from './sources.js';
 export { type AssistantChatState, type LiveItem, applyEvent, useAssistantChat, } from './use-assistant-chat.js';

package/dist/assistant/index.js

@@ -3,5 +3,6 @@
 // `@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 { assistantAdminSections, assistantSettingsSections } from './settings.js';
+export { composeAssistant, selectionRef, useAssistantSource, usePageSelection, useShownAssistantSources, } from './sources.js';
 export { applyEvent, useAssistantChat, } from './use-assistant-chat.js';

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

@@ -1,5 +1,7 @@
-import type { AssistantMessage, AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
+import type { AssistantMessage, AssistantRefNote, AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
+import { type LumenOption } from '../lumen-selector.js';
 import type { AssistantAdapter } from './client.js';
+import { type AssistantSource } from './sources.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. */
@@ -17,16 +19,54 @@ export interface LumenAssistantProps {
     onClose?: () => void;
     /** An outside chat state (the dock shares one between the button and the panel). */
     chat?: AssistantChatState;
+    /**
+     * The app's own slash commands, listed before the server's (`createAssistant` `commands`) and the
+     * kit's: /compact, /clear, /model and /escalate.
+     */
+    commands?: AssistantCommand[];
+    /** What `#` lists everywhere; a page adds its own with `useAssistantSource`. */
+    sources?: readonly AssistantSource[];
+}
+/** A slash command: typing `/` in the composer lists them. */
+export interface AssistantCommand {
+    /** Typed after the slash: `story`. */
+    name: string;
+    /** One line in the list. */
+    about: string;
+    /** What follows the name, shown in the list (`<words>`). Without it, picking it runs it. */
+    args?: string;
+    /** Choices for the words after it, listed as they are typed (a tier, a saved search). */
+    options?: () => LumenOption[];
+    /** Runs it: a string is sent as the message; nothing when the command acted itself. */
+    run: (args: string) => string | undefined | Promise<string | undefined>;
 }
 /** 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, }: {
+export declare function LumenAssistant({ client, context, onSettings, keepDays, onClose, chat: outside, commands, sources, }: LumenAssistantProps): import("react").JSX.Element;
+/** What the composer sends with the text: the tier picked with `@` and the things pointed at with `#`. */
+export interface ComposerExtra {
+    tier?: string;
+    refs?: AssistantRefNote[];
+}
+/**
+ * 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 declare function LumenComposer({ name, busy, queued, disabled, commands, tiers, sources, onSend, onStop, }: {
     name: string;
     busy: boolean;
     queued: string | null;
     disabled?: boolean;
-    onSend: (text: string) => void;
+    commands?: AssistantCommand[];
+    /** What `@` lists. */
+    tiers?: {
+        id: string;
+        label: string;
+        model_label?: string;
+    }[];
+    /** What `#` lists, a group each. */
+    sources?: readonly AssistantSource[];
+    onSend: (text: string, extra: ComposerExtra) => void;
     onStop: () => void;
 }): import("react").JSX.Element;
 /**

package/dist/assistant/lumen-assistant.js

@@ -1,19 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, 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 { 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 } from '../lumen-selector.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;
@@ -35,7 +37,7 @@ const tokens = (n) => n < 1000
         : `${(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, }) {
+export function LumenAssistant({ client, context, onSettings, keepDays = 30, onClose, chat: outside, commands = [], sources = [], }) {
     const own = useAssistantChat(client);
     const chat = outside ?? own;
     const qc = useQueryClient();
@@ -60,11 +62,71 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, onC
             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) => ({
+    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, onSend: (text) => chat.send(text, context ? { context } : undefined), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage })] }));
+                        })) ?? (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);
@@ -73,7 +135,7 @@ function Messages({ chat, status, onSettings, }) {
     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 })] }));
+    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 = {
@@ -83,13 +145,32 @@ const WAIT = {
     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, }) {
-    return (_jsx("div", { className: "flex flex-col gap-3", children: items.map((item, i) => (_jsx(Item, { item: item, onSettle: onSettle, busy: busy }, i))) }));
+    // 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.text, item.context && (_jsxs("span", { className: "mt-1 block text-muted-foreground text-xs", children: ["on ", item.context] }))] }));
+            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':
@@ -114,7 +195,25 @@ function Item({ item, onSettle, busy, }) {
 }
 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] })] }));
+    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) {
@@ -125,9 +224,18 @@ function argLines(args) {
         typeof v === 'string' ? v : JSON.stringify(v),
     ]);
 }
-function Draft({ draft, onSettle, busy, }) {
+/** 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 (action) => {
+    const go = async (draft, action) => {
         setPending(action);
         try {
             await onSettle(draft, action);
@@ -139,9 +247,46 @@ function Draft({ draft, onSettle, busy, }) {
             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"] })] }))] }));
+    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',
@@ -152,23 +297,182 @@ const WHY = {
 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, }) {
+/** 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;
-        onSend(text);
-        setText('');
+        const c = m ? commands.find((x) => x.name === m[1]) : undefined;
+        if (c) {
+            void run(c, m?.[2] ?? '');
+            return;
+        }
+        onSend(text, extra());
+        clear();
     };
-    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) => {
+    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)
@@ -185,6 +489,11 @@ export function useLumenAssistantDock(client, o = {
 }) {
     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(() => {

package/dist/assistant/settings.d.ts

@@ -1,5 +1,12 @@
 import type { SettingsSectionDef } from '../settings.js';
 import type { AssistantAdapter } from './client.js';
+/**
+ * The admin's section: the app's shared keys and each person's monthly allowance on them. Put it
+ * where the app keeps its admin settings, shown only to admins.
+ */
+export declare function assistantAdminSections({ client, }: {
+    client: AssistantAdapter;
+}): SettingsSectionDef[];
 /**
  * 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`).

package/dist/assistant/settings.js

@@ -31,6 +31,7 @@ const ACCESS = [
     { value: 'off', label: 'Off' },
     { value: 'read', label: 'Read' },
     { value: 'draft', label: 'Read + draft' },
+    { value: 'write', label: 'Read + write' },
 ];
 /** Runs a change and keeps the status it returns, or says why it failed. */
 function useApply(client) {
@@ -172,28 +173,31 @@ function ChatgptSignin({ client, p }) {
 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 ready = (_jsxs(Badge, { variant: "outline", className: "text-gain", children: [_jsx(CheckIcon, {}), "Ready"] }));
+const notSet = _jsx(Badge, { variant: "outline", children: "Not set" });
+/** One provider, collapsed to a row: the person's own key (or their ChatGPT plan sign-in). */
+function OwnProviderKey({ client, p }) {
     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] }) }));
+    const badge = p.own.set && p.own.test && !p.own.test.ok ? (_jsx(TestBadge, { test: { ok: false } })) : p.own.set ? (ready) : (notSet);
+    return (_jsx(LumenExpandRow, { id: p.id, name: p.label, meta: plan ? 'Your ChatGPT plan' : p.own.set ? 'Your key' : 'No key', badge: badge, children: _jsxs("div", { className: "flex flex-col", children: [p.signin === 'chatgpt' && (!p.own.set || plan) && _jsx(ChatgptSignin, { client: client, p: p }), !plan && (_jsx(KeyBlock, { label: p.signin && !p.own.set ? 'Or your API key' : 'Your 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) }))] }) }));
 }
+/** A person's own keys, one row a provider, and what they may spend on them. */
 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" })] }) })] }));
-        } }));
+    return (_jsx(WithStatus, { client: client, children: (s) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: s.providers.map((p) => (_jsx(OwnProviderKey, { client: client, p: p }, p.id))) }), s.providers.some((p) => p.own.set) && (_jsx(Row, { label: "Your keys may spend", info: "On your keys, every provider together.", children: _jsx(CapInput, { label: "Your monthly cap", value: s.caps.own, onSave: (n) => void apply('own', () => client.ownCap(n)) }) }))] })) }));
+}
+/** One provider's shared key, which an admin sets for everyone. */
+function SharedProviderKey({ client, p }) {
+    const { apply, refresh } = useApply(client);
+    const on = p.app.set || !!p.app.from_env;
+    const badge = p.app.set && p.app.test && !p.app.test.ok ? (_jsx(TestBadge, { test: { ok: false } })) : on ? (ready) : (notSet);
+    return (_jsx(LumenExpandRow, { id: p.id, name: p.label, meta: p.app.from_env ? 'From the server' : on ? 'Shared key' : 'No key', badge: badge, children: _jsx(KeyBlock, { label: "Shared key", info: "Everyone's answers run on it, within the monthly allowance below.", prefix: p.prefix, provider: p.label, state: p.app, canEdit: true, 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) }) }));
+}
+/** Admins only: the app's shared keys and what each person may spend on them. */
+function SharedKeys({ client }) {
+    const { apply } = useApply(client);
+    return (_jsx(WithStatus, { client: client, children: (s) => s.admin ? (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: s.providers.map((p) => (_jsx(SharedProviderKey, { client: client, p: p }, p.id))) }), _jsx(Row, { label: "Each person may spend", info: "A month on the shared keys, every provider together. Past it, a person's own key pays.", children: _jsx(CapInput, { label: "Allowance per person", value: s.caps.app, onSave: (n) => void apply('cap', () => client.appCap(n)) }) })] })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Only an admin can change these." })) }));
 }
 // ---------------------------------------------------------------- models
 function Models({ client }) {
@@ -214,7 +218,7 @@ function Models({ client }) {
 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." })) }));
+                        void apply('access', () => client.settings({ access: { [g.id]: v } })), children: ACCESS.filter((a) => (a.value !== 'draft' || g.drafts) && (a.value !== 'write' || g.writes)).map((a) => (_jsx(ToggleGroupItem, { value: a.value, children: a.label }, a.value))) }) }, g.id))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "This app gives the assistant no tools yet." })) }));
 }
 // ---------------------------------------------------------------- web
 function ScrapeqlBlock({ client, s }) {
@@ -260,6 +264,21 @@ function Spend({ client }) {
                                         ` · ${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 admin's section: the app's shared keys and each person's monthly allowance on them. Put it
+ * where the app keeps its admin settings, shown only to admins.
+ */
+export function assistantAdminSections({ client, }) {
+    return [
+        {
+            id: 'assistant-shared-keys',
+            title: 'Shared model keys',
+            icon: KeyRoundIcon,
+            description: "Keys everyone's answers run on, and the allowance",
+            content: _jsx(SharedKeys, { client: client }),
+        },
+    ];
+}
 /**
  * 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`).
@@ -278,7 +297,7 @@ export function assistantSettingsSections({ client, name, web = true, }) {
             title: 'Model providers',
             icon: KeyRoundIcon,
             sub: true,
-            description: 'Keys for each provider, and who pays',
+            description: 'Your own key for each provider',
             content: _jsx(Providers, { client: client }),
         },
         {

package/dist/assistant/sources.d.ts

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

package/dist/assistant/sources.js

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

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

@@ -1,4 +1,4 @@
-import type { AssistantEvent, AssistantMessage, ChatItem, ChatUsage, DraftItem } from '@columenlabs/lumen-ui-types/assistant';
+import type { AssistantEvent, AssistantMessage, ChatItem, ChatUsage, DraftItem, StepItem } from '@columenlabs/lumen-ui-types/assistant';
 import type { AssistantAdapter } from './client.js';
 /** An item as the panel draws it: a text still streaming, a step still running. */
 export type LiveItem = ChatItem & {
@@ -20,6 +20,8 @@ export interface AssistantChatState {
     open: (id: string) => Promise<void>;
     reset: () => void;
     settle: (draft: DraftItem, action: 'save' | 'dismiss') => Promise<void>;
+    /** Takes back a change the assistant made at once (Undo on its line). */
+    undo: (step: StepItem) => Promise<void>;
 }
 /** A copy of the items with one event applied (hand-off sections copied too). */
 export declare function applyEvent(prev: LiveItem[], e: AssistantEvent): LiveItem[];

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

@@ -201,18 +201,27 @@ export function useAssistantChat(client) {
             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
+    // Puts a settled card or an undone line back in place, in a hand-off section too.
+    const replace = useCallback((next) => {
+        const swap = (list) => list.map((i) => i.kind === next.kind && i.id === next.id
             ? next
             : i.kind === 'handoff'
                 ? { ...i, items: swap(i.items) }
                 : i);
         setItems(swap);
-    }, [client]);
+    }, []);
+    const settle = useCallback(async (draft, action) => {
+        const id = idRef.current;
+        if (!id)
+            return;
+        replace(await client.settleDraft(id, draft.id, action));
+    }, [client, replace]);
+    const undo = useCallback(async (step) => {
+        const id = idRef.current;
+        if (!id)
+            return;
+        replace(await client.undoWrite(id, step.id));
+    }, [client, replace]);
     return {
         chatId,
         title,
@@ -226,5 +235,6 @@ export function useAssistantChat(client) {
         open,
         reset,
         settle,
+        undo,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.78",
+  "version": "0.1.80",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,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.78",
+    "@columenlabs/lumen-ui-types": "0.1.80",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",