@columenlabs/lumen-ui 0.1.209 → 0.1.211

package/dist/assistant/client.d.ts

@@ -1,4 +1,4 @@
-import type { AllowanceRequest, AssistantChat, AssistantChatRow, AssistantEvent, AssistantMessage, AssistantOwnWay, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState, StepItem } from '@columenlabs/lumen-ui-types/assistant';
+import type { AllowanceRequest, AssistantChat, AssistantChatRow, AssistantEvent, AssistantMessage, AssistantOwnWay, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState, StepItem, UsageHistory } 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 {
     chats(): Promise<AssistantChatRow[]>;
     chat(id: string): Promise<AssistantChat>;
     removeChat(id: string): Promise<void>;
+    /** The person's use in a month (`YYYY-MM`, this month when left out): each model, chat and run. */
+    usage?(month?: string): Promise<UsageHistory>;
     /** 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>;

package/dist/assistant/client.js

@@ -60,6 +60,7 @@ export function assistantClient(base) {
         removeChat: async (id) => {
             await send('DELETE', `/chats/${encodeURIComponent(id)}`);
         },
+        usage: (month) => get(`/usage${month ? `?month=${encodeURIComponent(month)}` : ''}`),
         settleDraft: (chatId, draftId, action) => send('POST', `/chats/${encodeURIComponent(chatId)}/drafts/${encodeURIComponent(draftId)}`, {
             action,
         }),

package/dist/assistant/index.d.ts

@@ -1,5 +1,6 @@
 export { type AssistantAdapter, assistantClient } from './client.js';
 export { type AssistantCommand, type ComposerExtra, LumenAssistant, type LumenAssistantProps, LumenComposer, assistantStatusKey, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
 export { assistantAdminSections, assistantSettingsSections } from './settings.js';
+export { UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.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

@@ -4,5 +4,6 @@
 export { assistantClient } from './client.js';
 export { LumenAssistant, LumenComposer, assistantStatusKey, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
 export { assistantAdminSections, assistantSettingsSections } from './settings.js';
+export { UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.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,12 +1,13 @@
-import type { AllowanceUnit, AssistantMessage, AssistantRefNote, AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
+import { type AllowanceUnit, type AssistantImage, type AssistantMessage, type AssistantRefNote, type 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 { usd } from './usage-history.js';
 import { type AssistantChatState } from './use-assistant-chat.js';
 export declare const assistantStatusKey: (client: AssistantAdapter) => string[];
 /** The person's assistant status, shared by the panel and Settings. */
 export declare function useAssistantStatus(client: AssistantAdapter): import("@tanstack/react-query").UseQueryResult<AssistantStatus, Error>;
-export declare const usd: (n: number) => string;
+export { usd };
 export interface LumenAssistantProps {
     client: AssistantAdapter;
     /** The page the person is on, sent with each message. */
@@ -26,6 +27,11 @@ export interface LumenAssistantProps {
     commands?: AssistantCommand[];
     /** What `#` lists everywhere; a page adds its own with `useAssistantSource`. */
     sources?: readonly AssistantSource[];
+    /**
+     * Images can go with a message: pasted (Cmd+V / Ctrl+V) or dropped on the box, shown as chips
+     * until it is sent. Turn it on when the app's chat route passes `images` on to the agent.
+     */
+    images?: boolean;
 }
 /** A slash command: typing `/` in the composer lists them. */
 export interface AssistantCommand {
@@ -41,21 +47,24 @@ export interface AssistantCommand {
     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, commands, sources, }: LumenAssistantProps): import("react").JSX.Element;
+export declare function LumenAssistant({ client, context, onSettings, keepDays, onClose, chat: outside, commands, sources, images, }: LumenAssistantProps): import("react").JSX.Element;
 /** An allowance in its unit: `$4.20`, or `350 credits`. */
 export declare const allowanceAmount: (u: AllowanceUnit, n: number) => string;
 /** What the composer sends with the text: the tier picked with `@` and the things pointed at with `#`. */
 export interface ComposerExtra {
     tier?: string;
     refs?: AssistantRefNote[];
+    images?: AssistantImage[];
 }
 /**
  * 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, page, onSend, onStop, }: {
+export declare function LumenComposer({ name, busy, queued, disabled, commands, tiers, sources, page, images: canAttach, onSend, onStop, }: {
     name: string;
+    /** Images can be pasted or dropped on the box (`LumenAssistant` `images`). */
+    images?: boolean;
     /** The page's name for `#` This page; the document's title by default. */
     page?: string;
     busy: boolean;

package/dist/assistant/lumen-assistant.js

@@ -1,6 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// LumenAssistant: the chat that fills LumenAssistantPanel, for any app's assistant served by
+// `@columenlabs/lumen-ai/assistant`. A header with the tier, Chats and New chat; the chat itself
+// (the person's messages, the answer as it streams, each tool call as a line, drafted changes as
+// cards to Save or Dismiss, work handed to a higher tier in its own section); and the composer,
+// with Stop, a queued message and the chat's cost and context under it.
+import { ASSISTANT_IMAGES_MAX, ASSISTANT_IMAGE_CHARS, } from '@columenlabs/lumen-ui-types/assistant';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, LightbulbIcon, MonitorIcon, PencilIcon, PlusIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, ZapIcon, } from 'lucide-react';
+import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, LightbulbIcon, MonitorIcon, PencilIcon, PlusIcon, ReceiptIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, ZapIcon, } from 'lucide-react';
 import { Fragment, createContext, useContext, useEffect, useRef, useState, } from 'react';
 import { LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, useAssistantHotkey, } from '../assistant-panel.js';
 import { screenMapFor, useAssistantScreen } from '../assistant-screen.js';
@@ -22,6 +28,7 @@ import { Spinner } from '../ui/spinner.js';
 import { Textarea } from '../ui/textarea.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { composeAssistant, selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.js';
+import { UsageHistoryView, tokens, usd } from './usage-history.js';
 import { useAssistantChat } from './use-assistant-chat.js';
 // The Markdown renderer (tables included) loads with the first answer (lazy-part.tsx).
 // A tab whose build a deploy replaced shows the answer as plain text instead of reloading mid chat.
@@ -38,15 +45,10 @@ export const assistantStatusKey = (client) => [
 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`;
+export { usd };
 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 = [], }) {
+export function LumenAssistant({ client, context, onSettings, keepDays = 30, onClose, chat: outside, commands = [], sources = [], images = false, }) {
     const own = useAssistantChat(client);
     const chat = outside ?? own;
     const qc = useQueryClient();
@@ -183,7 +185,7 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, onC
                             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: CopyIcon, label: "Copy chat", disabled: !chat.items.length, onClick: () => copyMarkdown(chatMarkdown(chat.title, chat.items, name), 'Chat') }), _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(AssistantName.Provider, { value: name, children: _jsx(Screen.Provider, { value: controls, children: _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, page: context?.label, onSend: (text, more) => chat.send(text, { ...extra(), ...more }), 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: CopyIcon, label: "Copy chat", disabled: !chat.items.length, onClick: () => copyMarkdown(chatMarkdown(chat.title, chat.items, name), 'Chat') }), _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(AssistantName.Provider, { value: name, children: _jsx(Screen.Provider, { value: controls, children: _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, page: context?.label, images: images, onSend: (text, more) => chat.send(text, { ...extra(), ...more }), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage, client: client, spent: s?.spend.usd })] }));
 }
 function Messages({ chat, status, onSettings, }) {
     const end = useRef(null);
@@ -257,7 +259,7 @@ 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] }))] }));
+            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.images?.length ? (_jsx("span", { className: "mb-1 flex flex-wrap gap-1.5", children: item.images.map((src, i) => (_jsx("img", { src: src, alt: `Pasted ${i + 1}`, className: "max-h-32 max-w-40 rounded-md border object-cover" }, `${i}:${src.length}`))) })) : null, 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(ChatMarkdown, { 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':
@@ -424,17 +426,49 @@ function HandOff({ item, onSettle, busy, }) {
 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 longest edge an image is sent at (what the models read best; larger only costs more). */
+const IMAGE_EDGE = 1568;
+/**
+ * A pasted or dropped image, ready to send: scaled to `IMAGE_EDGE` on a canvas and saved as JPEG
+ * (PNG when it has few pixels to lose), as base64. `null` when the browser cannot read it.
+ */
+async function readImage(file) {
+    try {
+        const bmp = await createImageBitmap(file);
+        const k = Math.min(1, IMAGE_EDGE / Math.max(bmp.width, bmp.height));
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.max(1, Math.round(bmp.width * k));
+        canvas.height = Math.max(1, Math.round(bmp.height * k));
+        const g = canvas.getContext('2d');
+        if (!g)
+            return null;
+        g.fillStyle = '#fff';
+        g.fillRect(0, 0, canvas.width, canvas.height);
+        g.drawImage(bmp, 0, 0, canvas.width, canvas.height);
+        bmp.close();
+        const png = canvas.toDataURL('image/png');
+        const url = png.length < 400_000 ? png : canvas.toDataURL('image/jpeg', 0.85);
+        const [head, data] = url.split(',');
+        const media_type = head?.includes('png') ? 'image/png' : 'image/jpeg';
+        return data ? { media_type, data } : null;
+    }
+    catch {
+        return null;
+    }
+}
+const imageUrl = (i) => `data:${i.media_type};base64,${i.data}`;
 /**
  * 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 = [], page, onSend, onStop, }) {
+export function LumenComposer({ name, busy, queued, disabled, commands = [], tiers = [], sources = [], page, images: canAttach = false, 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 [images, setImages] = useState([]);
     const list = useRef(null);
     const box = useRef(null);
     const selection = usePageSelection();
@@ -468,12 +502,40 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
     const extra = () => ({
         ...(tier ? { tier } : {}),
         ...(refs.length ? { refs } : {}),
+        ...(images.length ? { images } : {}),
     });
     const clear = () => {
         setText('');
         setCaret(0);
         setTier(null);
         setRefs([]);
+        setImages([]);
+    };
+    /** Adds the image files among `files`; says so when one is left out. Returns whether any was an image. */
+    const attach = (files) => {
+        const picked = [...files].filter((f) => f.type.startsWith('image/'));
+        if (!canAttach || !picked.length)
+            return false;
+        void (async () => {
+            const read = (await Promise.all(picked.map(readImage))).filter((x) => !!x);
+            if (read.length < picked.length)
+                lumenToast.error("That image couldn't be read. Try a PNG or JPEG.");
+            setImages((p) => {
+                const next = [...p];
+                let chars = next.reduce((n, x) => n + x.data.length, 0);
+                for (const img of read) {
+                    if (next.length >= ASSISTANT_IMAGES_MAX ||
+                        chars + img.data.length > ASSISTANT_IMAGE_CHARS) {
+                        lumenToast.error(`Up to ${ASSISTANT_IMAGES_MAX} images go with one message.`);
+                        break;
+                    }
+                    next.push(img);
+                    chars += img.data.length;
+                }
+                return next;
+            });
+        })();
+        return true;
     };
     const run = async (c, args) => {
         const keep = extra();
@@ -658,10 +720,20 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
                     const r = sourceItems.get(o.value)?.();
                     if (r)
                         setRefs((p) => [...p, r]);
-                }, 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) => {
+                }, onClose: () => setClosed(`${text}|${caret}`) })), images.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1.5", "aria-label": "Images going with your message", children: images.map((img, i) => (_jsxs("span", { className: "relative", children: [_jsx("img", { src: imageUrl(img), alt: `Pasted ${i + 1}`, className: "size-12 rounded-md border object-cover" }), _jsx("button", { type: "button", "aria-label": `Remove image ${i + 1}`, className: "absolute -top-1.5 -right-1.5 grid size-4 place-items-center rounded-full border bg-background text-muted-foreground hover:text-foreground", onClick: () => setImages((p) => p.filter((_, j) => j !== i)), children: _jsx(XIcon, { className: "size-3" }) })] }, `${i}:${img.data.length}`))) })), (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) => {
+                        }, onSelect: (e) => setCaret(e.currentTarget.selectionStart), onPaste: (e) => {
+                            // An image on the clipboard becomes a chip; text pastes as usual.
+                            if (!e.clipboardData.getData('text/plain') && attach(e.clipboardData.files))
+                                e.preventDefault();
+                        }, onDragOver: (e) => {
+                            if (canAttach && [...e.dataTransfer.items].some((x) => x.type.startsWith('image/')))
+                                e.preventDefault();
+                        }, onDrop: (e) => {
+                            if (attach(e.dataTransfer.files))
+                                e.preventDefault();
+                        }, onKeyDown: (e) => {
                             if (picking && list.current?.key(e))
                                 return;
                             if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
@@ -711,17 +783,29 @@ function UsageTable({ usage }) {
                 return (_jsxs(Fragment, { children: [_jsx("span", { className: "truncate font-medium", title: p.label, children: r.tier }), _jsx("span", { className: "text-muted-foreground", children: r.kind }), _jsx("span", { className: "num text-right", children: usd(p.usd) }), _jsxs("span", { className: "num text-right", children: [tokens(p.in), " (", hitPct(p), "%)"] }), _jsx("span", { className: "num text-right", children: tokens(p.out) }), _jsx("span", { className: "num text-right", children: p.calls })] }, p.label));
             }), _jsx("span", { className: cn(total, 'font-semibold'), children: "Total" }), _jsx("span", { className: total }), _jsx("span", { className: cn(total, 'num text-right font-semibold'), children: usd(usage.usd) }), _jsxs("span", { className: cn(total, 'num text-right'), children: [tokens(usage.in), " (", hitPct(usage), "%)"] }), _jsx("span", { className: cn(total, 'num text-right'), children: tokens(usage.out) }), _jsx("span", { className: cn(total, 'num text-right'), children: usage.calls })] }));
 }
+/**
+ * This month's total of every chat and run; it opens the month's history (each model, chat and
+ * run), a sheet on a phone.
+ */
+function MonthTotal({ client, spent, phone, className, }) {
+    const trigger = (_jsxs("button", { type: "button", className: cn('flex shrink-0 items-center gap-1 tabular-nums hover:text-foreground', className), "aria-label": "Usage this month", title: "Usage this month: every chat and run", children: [_jsx(ReceiptIcon, { className: "size-3", "aria-hidden": true }), _jsxs("span", { children: ["This month ", _jsx("span", { className: "num", children: usd(spent) })] })] }));
+    return phone ? (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: trigger }), _jsxs(SheetContent, { side: "bottom", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: "Usage" }) }), _jsx(UsageHistoryView, { client: client, className: "px-4 pb-6" })] })] })) : (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { align: "end", className: "w-md max-w-[92vw] p-3", children: _jsx(UsageHistoryView, { client: client }) })] }));
+}
 /**
  * The chat's cost, tokens in and out and cache hit (a pop-up splits them per part, a sheet on a
- * phone), and how full the context is.
+ * phone), how full the context is, and this month's total (`MonthTotal`).
  */
-function UsageLine({ usage }) {
+function UsageLine({ usage, client, spent, }) {
     const phone = useIsMobile();
-    if (!usage || !usage.calls)
+    const month = !!client.usage && spent !== undefined && spent > 0;
+    if ((!usage || !usage.calls) && !month)
         return null;
-    const ctx = usage.context ?? 0;
+    const ctx = usage?.context ?? 0;
+    const total = month ? (_jsx(MonthTotal, { client: client, spent: spent ?? 0, phone: phone, className: ctx > 0 ? '' : 'ml-auto' })) : null;
+    if (!usage || !usage.calls)
+        return (_jsx("div", { className: "flex shrink-0 items-center gap-3 px-3 pb-2 text-muted-foreground text-xs", children: total }));
     const trigger = (_jsxs("button", { type: "button", className: "flex min-w-0 items-center gap-2 tabular-nums hover:text-foreground", "aria-label": "This chat's usage", children: [_jsxs("span", { className: "num truncate", children: [usd(usage.usd), " \u00B7 \u2191", tokens(usage.in), " \u2193", tokens(usage.out)] }), _jsxs("span", { className: "num flex shrink-0 items-center gap-0.5", title: "Read from cache", children: [_jsx(ZapIcon, { className: "size-3", "aria-hidden": true }), hitPct(usage), "%"] })] }));
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-3 px-3 pb-2 text-muted-foreground text-xs", children: [phone ? (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: trigger }), _jsxs(SheetContent, { side: "bottom", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: "This chat's usage" }) }), _jsx("div", { className: "overflow-x-auto px-4 pb-6", children: _jsx(UsageTable, { usage: usage }) })] })] })) : (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { align: "start", className: "w-auto p-2", children: _jsx(UsageTable, { usage: usage }) })] })), 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) })] }))] }));
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-3 px-3 pb-2 text-muted-foreground text-xs", children: [phone ? (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: trigger }), _jsxs(SheetContent, { side: "bottom", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: "This chat's usage" }) }), _jsx("div", { className: "overflow-x-auto px-4 pb-6", children: _jsx(UsageTable, { usage: usage }) })] })] })) : (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { align: "start", className: "w-auto p-2", children: _jsx(UsageTable, { usage: usage }) })] })), 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) })] })), total] }));
 }
 /**
  * The assistant docked in LumenShell: put `button` in `headerActions` and `panel` in `panel`.

package/dist/assistant/settings.js

@@ -17,6 +17,7 @@ import { Label } from '../ui/label.js';
 import { Switch } from '../ui/switch.js';
 import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group.js';
 import { allowanceAmount, assistantStatusKey, usd, useAssistantStatus } from './lumen-assistant.js';
+import { UsageHistoryView } from './usage-history.js';
 const EFFORTS = [
     { value: 'default', label: 'Model default' },
     { value: 'low', label: 'Low' },
@@ -266,6 +267,9 @@ function Web({ client }) {
 function Spend({ client }) {
     return (_jsx(WithStatus, { client: client, children: (s) => {
             const sp = s.spend;
+            // With the history route: each month, model, chat and run (`UsageHistoryView`).
+            if (client.usage)
+                return (_jsxs("div", { className: "flex flex-col gap-2", children: [sp.cap != null && sp.payer && (_jsx("p", { className: "text-muted-foreground text-sm", children: `${usd(sp.cap)} a month on ${sp.payer === 'app' ? 'the app key' : 'your key'}` })), _jsx(UsageHistoryView, { client: client })] }));
             return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "font-semibold text-2xl tabular-nums", children: usd(sp.usd) }), _jsxs("span", { className: "text-muted-foreground text-sm", children: [sp.month, sp.cap != null &&
                                         sp.payer &&
                                         ` · ${usd(sp.cap)} cap on ${sp.payer === 'app' ? 'the app key' : 'your key'}`] })] }), sp.rows.length ? (_jsx("div", { className: "flex flex-col text-sm", children: sp.rows.map((r) => (_jsxs("div", { className: "flex items-center gap-2 border-b py-2 last:border-b-0", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: r.label }), _jsx("span", { className: "text-muted-foreground text-xs", children: r.payer === 'app' ? 'Shared key' : 'Your key' }), _jsxs("span", { className: "w-16 text-right text-muted-foreground text-xs tabular-nums", children: [r.calls, " calls"] }), _jsx("span", { className: "w-16 text-right tabular-nums", children: usd(r.usd) })] }, `${r.label}:${r.payer}`))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing spent this month." }))] }));
@@ -437,7 +441,7 @@ export function assistantSettingsSections({ client, name, web = true, allowance
             title: 'Spend',
             icon: ReceiptIcon,
             sub: true,
-            description: 'What answers cost this month',
+            description: 'What each model, chat and run cost',
             content: _jsx(Spend, { client: client }),
         },
         ...(allowance

package/dist/assistant/usage-history.d.ts

@@ -0,0 +1,15 @@
+import type { UsageHistory } from '@columenlabs/lumen-ui-types/assistant';
+import type { AssistantAdapter } from './client.js';
+export declare const usd: (n: number) => string;
+export declare const tokens: (n: number) => string;
+export declare const assistantUsageKey: (client: AssistantAdapter, month?: string) => string[];
+/** One month of the person's use (this month when `month` is left out); off when the adapter has no `usage`. */
+export declare function useAssistantUsage(client: AssistantAdapter, month?: string, enabled?: boolean): import("@tanstack/react-query").UseQueryResult<UsageHistory, Error>;
+/**
+ * A month of use: the total, each model (cost, tokens in and out, calls) and each chat and run,
+ * newest first, with ‹ › to step through the months that have any.
+ */
+export declare function UsageHistoryView({ client, className, }: {
+    client: AssistantAdapter;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/assistant/usage-history.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from '@tanstack/react-query';
+import { ChevronLeftIcon, ChevronRightIcon, CpuIcon, MessageSquareIcon } from 'lucide-react';
+import { Fragment, useState } from 'react';
+import { IconButton } from '../icon-button.js';
+import { cn } from '../lib/utils.js';
+import { Spinner } from '../ui/spinner.js';
+export const usd = (n) => n === 0 ? '$0' : n < 0.01 ? '<$0.01' : `$${n.toFixed(n < 10 ? 2 : 0)}`;
+export 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`;
+export const assistantUsageKey = (client, month) => [
+    'lumen-assistant',
+    client.key,
+    'usage',
+    month ?? 'now',
+];
+/** One month of the person's use (this month when `month` is left out); off when the adapter has no `usage`. */
+export function useAssistantUsage(client, month, enabled = true) {
+    return useQuery({
+        queryKey: assistantUsageKey(client, month),
+        queryFn: () => client.usage(month),
+        enabled: enabled && !!client.usage,
+    });
+}
+/** `2026-11` → `November 2026`. */
+const monthName = (m) => {
+    const [y, mo] = m.split('-').map(Number);
+    return new Date(y ?? 2000, (mo ?? 1) - 1, 1).toLocaleDateString(undefined, {
+        month: 'long',
+        year: 'numeric',
+    });
+};
+/** Today's time, else the day. */
+const when = (at) => {
+    const d = new Date(at);
+    return d.toDateString() === new Date().toDateString()
+        ? d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })
+        : d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+};
+/** The model of a part, from its label (`Steady · Sonnet 5.5` → `Sonnet 5.5`). */
+const modelOf = (p) => p.label.split(' · ').slice(1).join(' · ') || p.label;
+/** Rows of one month summed per model (each tier and payer of one model is one row). */
+function perModel(rows) {
+    const out = new Map();
+    for (const r of rows) {
+        const k = r.model ?? modelOf(r);
+        const p = out.get(k);
+        if (!p)
+            out.set(k, { ...r, label: modelOf(r) });
+        else {
+            p.calls += r.calls;
+            p.in += r.in;
+            p.read += r.read;
+            p.out += r.out;
+            p.usd += r.usd;
+        }
+    }
+    return [...out.values()].sort((a, b) => b.usd - a.usd);
+}
+const entryHover = (e) => [
+    e.title,
+    ...e.parts.map((p) => `${p.label}: ${usd(p.usd)} · ${tokens(p.in)} in · ${tokens(p.out)} out · ${p.calls} calls`),
+].join('\n');
+function Entry({ e }) {
+    const Icon = e.kind === 'chat' ? MessageSquareIcon : CpuIcon;
+    return (_jsxs("li", { className: "flex min-w-0 items-center gap-2 py-1.5 text-xs", title: entryHover(e), children: [_jsx(Icon, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: e.title }), _jsx("time", { className: "shrink-0 text-muted-foreground", children: when(e.at) }), _jsxs("span", { className: "num w-20 shrink-0 text-right text-muted-foreground", children: ["\u2191", tokens(e.in), " \u2193", tokens(e.out)] }), _jsx("span", { className: "num w-14 shrink-0 text-right", children: usd(e.usd) })] }));
+}
+/**
+ * A month of use: the total, each model (cost, tokens in and out, calls) and each chat and run,
+ * newest first, with ‹ › to step through the months that have any.
+ */
+export function UsageHistoryView({ client, className, }) {
+    const [month, setMonth] = useState(undefined);
+    const q = useAssistantUsage(client, month);
+    const h = q.data;
+    const at = h ? h.months.indexOf(h.month) : -1;
+    const older = h && at >= 0 ? h.months[at + 1] : undefined;
+    const newer = h && at > 0 ? h.months[at - 1] : undefined;
+    if (!client.usage)
+        return null;
+    if (!h)
+        return (_jsx("div", { className: "flex justify-center p-4", children: q.isError ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Usage didn't load. Try again later." })) : (_jsx(Spinner, {})) }));
+    const models = perModel(h.rows);
+    return (_jsxs("div", { className: cn('flex min-w-0 flex-col gap-3', className), children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(IconButton, { icon: ChevronLeftIcon, label: "Earlier month", disabled: !older, onClick: () => setMonth(older) }), _jsx("span", { className: "min-w-0 flex-1 truncate text-center font-medium text-sm", children: monthName(h.month) }), _jsx(IconButton, { icon: ChevronRightIcon, label: "Later month", disabled: !newer, onClick: () => setMonth(newer) })] }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "num font-semibold text-2xl", children: usd(h.usd) }), _jsx("span", { className: "text-muted-foreground text-xs", children: h.entries.length === 1 ? '1 chat or run' : `${h.entries.length} chats and runs` })] }), models.length > 0 && (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto_auto_auto] gap-x-3 gap-y-0.5 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: "Model" }), _jsx("span", { className: "text-right text-muted-foreground", children: "Cost" }), _jsx("span", { className: "text-right text-muted-foreground", children: "In" }), _jsx("span", { className: "text-right text-muted-foreground", children: "Out" }), _jsx("span", { className: "text-right text-muted-foreground", children: "Calls" }), models.map((m) => (_jsxs(Fragment, { children: [_jsx("span", { className: "truncate font-medium", title: m.label, children: m.label }), _jsx("span", { className: "num text-right", children: usd(m.usd) }), _jsx("span", { className: "num text-right", children: tokens(m.in) }), _jsx("span", { className: "num text-right", children: tokens(m.out) }), _jsx("span", { className: "num text-right", children: m.calls })] }, m.label)))] })), h.entries.length ? (_jsx("ul", { className: "-my-1.5 max-h-72 divide-y overflow-y-auto", children: h.entries.map((e) => (_jsx(Entry, { e: e }, e.id))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing used this month." }))] }));
+}

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

@@ -168,6 +168,9 @@ export function useAssistantChat(client) {
                     ...(extra?.context ? { context: extra.context.label } : {}),
                     ...(extra?.refs?.length ? { refs: extra.refs } : {}),
                     ...(extra?.tier ? { tier: extra.tier } : {}),
+                    ...(extra?.images?.length
+                        ? { images: extra.images.map((i) => `data:${i.media_type};base64,${i.data}`) }
+                        : {}),
                 },
             ]);
         // Every screen outcome not yet sent goes with this message; kept again if it fails.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.209",
+  "version": "0.1.211",
   "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.209",
+    "@columenlabs/lumen-ui-types": "0.1.211",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",