@columenlabs/lumen-ui 0.1.208 → 0.1.210

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

@@ -2,11 +2,12 @@ import type { AllowanceUnit, AssistantMessage, AssistantRefNote, AssistantStatus
 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. */

package/dist/assistant/lumen-assistant.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, 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 +22,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,12 +39,7 @@ 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 = [], }) {
@@ -183,7 +179,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, 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);
@@ -711,17 +707,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/package.json

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