@columenlabs/lumen-ui 0.1.258 → 0.1.260

package/dist/assistant/client.d.ts

@@ -1,4 +1,4 @@
-import type { AllowanceRequest, AssistantChat, AssistantChatRow, AssistantEvent, AssistantMessage, AssistantOwnWay, AssistantProvider, AssistantSettingsPatch, AssistantStatus, DraftItem, KeyState, StepItem, UsageHistory } from '@columenlabs/lumen-ui-types/assistant';
+import type { AllowanceRequest, AssistantChat, AssistantChatRow, AssistantConnectorInput, 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). */
@@ -31,6 +31,13 @@ export interface AssistantAdapter {
         client_secret: string;
     } | null): Promise<AssistantStatus>;
     testScrapeql(): Promise<Test>;
+    /** Admin: adds a connector (an MCP server), kept only when its test lists its tools. */
+    addConnector?(input: AssistantConnectorInput): Promise<AssistantStatus>;
+    /** Admin: changes one; left out, `headers` keeps the ones saved. */
+    saveConnector?(id: string, input: AssistantConnectorInput): Promise<AssistantStatus>;
+    removeConnector?(id: string): Promise<AssistantStatus>;
+    /** Admin: lists its tools again. */
+    testConnector?(id: string): Promise<Test>;
     chats(): Promise<AssistantChatRow[]>;
     chat(id: string): Promise<AssistantChat>;
     removeChat(id: string): Promise<void>;

package/dist/assistant/client.js

@@ -55,6 +55,10 @@ export function assistantClient(base) {
         signOut: (p) => send('DELETE', `/my-signin?provider=${p}`),
         scrapeql: (token) => token ? send('PUT', '/web/scrapeql', token) : send('DELETE', '/web/scrapeql'),
         testScrapeql: () => send('POST', '/web/test'),
+        addConnector: (input) => send('POST', '/connectors', input),
+        saveConnector: (id, input) => send('PUT', `/connectors/${encodeURIComponent(id)}`, input),
+        removeConnector: (id) => send('DELETE', `/connectors/${encodeURIComponent(id)}`),
+        testConnector: (id) => send('POST', `/connectors/${encodeURIComponent(id)}/test`),
         chats: () => get('/chats'),
         chat: (id) => get(`/chats/${encodeURIComponent(id)}`),
         removeChat: async (id) => {

package/dist/assistant/index.d.ts

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

@@ -5,6 +5,6 @@ export { assistantClient } from './client.js';
 export { ChatImage } from './chat-image.js';
 export { LumenAssistant, LumenComposer, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
 export { assistantAdminSections, assistantSettingsSections } from './settings.js';
-export { AssistantChatCost, UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.js';
+export { AssistantChatCost, AssistantUsageTable, 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/settings.d.ts

@@ -4,10 +4,12 @@ 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, allowance, providers, }: {
+export declare function assistantAdminSections({ client, allowance, providers, connectors, }: {
     client: AssistantAdapter;
     /** Add Allowance requests (the app set `allowance` on the server). */
     allowance?: boolean;
+    /** Add Connectors: outside MCP servers the assistant may use (the app set `connectors` on the server). */
+    connectors?: boolean;
     /** Give each provider's shared key a section of its own (listed under Allowance) instead of one
      *  Shared model keys section: the app's providers, in order. */
     providers?: {
@@ -19,7 +21,7 @@ export declare function assistantAdminSections({ client, allowance, providers, }
  * The assistant's Settings sections: the assistant, then Model providers, Models, Tools, Web and
  * Spend under it. Pass them to LumenShell's `shared` (or an app's own `settings`).
  */
-export declare function assistantSettingsSections({ client, name, web, allowance, }: {
+export declare function assistantSettingsSections({ client, name, web, allowance, usage, }: {
     client: AssistantAdapter;
     /** The assistant's name, the parent section's title. */
     name: string;
@@ -27,4 +29,7 @@ export declare function assistantSettingsSections({ client, name, web, allowance
     web?: boolean;
     /** Show Allowance: what is left on the shared keys, and Request more (`allowance` on the server). */
     allowance?: boolean;
+    /** Show Usage: this month's chats and runs by who paid (key, sign-in or credits); Model
+     *  providers then leaves out its own spend table. */
+    usage?: boolean;
 }): SettingsSectionDef[];

package/dist/assistant/settings.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 { CoinsIcon, GlobeIcon, InboxIcon, KeyRoundIcon, LayersIcon, Link2Icon, LogInIcon, ReceiptIcon, SendIcon, SparklesIcon, WrenchIcon, } from 'lucide-react';
+import { ChartColumnIcon, CoinsIcon, GlobeIcon, InboxIcon, KeyRoundIcon, LayersIcon, Link2Icon, LogInIcon, PlugIcon, ReceiptIcon, SendIcon, SparklesIcon, WrenchIcon, } from 'lucide-react';
 import { useId, useState } from 'react';
 import { ConnectionLogo, LumenConnection, } from '../connection.js';
 import { LumenExpandList, LumenExpandRow } from '../expand-list.js';
@@ -18,7 +18,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 { OwnKeyUsage, UsageHistoryView } from './usage-history.js';
+import { AssistantUsageTable, OwnKeyUsage, UsageHistoryView } from './usage-history.js';
 const EFFORTS = [
     { value: 'default', label: 'Model default' },
     { value: 'low', label: 'Low' },
@@ -163,14 +163,14 @@ function OwnProviderKey({ client, p }) {
     return (_jsx(LumenConnection, { id: p.id, name: p.label, ways: ways, use: p.use, onUse: (use) => apply(`use:${p.id}`, () => client.settings({ own_use: { [p.id]: use } })) }));
 }
 /** A person's own keys, one row a provider, and what they may spend on them. */
-function Providers({ client }) {
+function Providers({ client, usage }) {
     const { apply } = useApply(client);
     return (_jsx(WithStatus, { client: client, children: (s) => {
             // A provider the app gives this person no way of their own on shows no row: what shows here
             // is exactly what the server may pay with.
             const rows = s.providers.filter((p) => !p.own_ways || p.own_ways.length > 0);
             const ownSet = rows.some(ownUsable);
-            return (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: rows.map((p) => (_jsx(OwnProviderKey, { client: client, p: p }, p.id))) }), ownSet && (_jsx(SettingField, { label: "Answers run on", info: "Your own key or plan first, with the shared credits behind it; or the shared credits first.", children: _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: s.pay, "aria-label": "Answers run on", onValueChange: (pay) => pay && void apply('pay', () => client.settings({ pay: pay })), children: [_jsx(ToggleGroupItem, { value: "own", children: "Your own first" }), _jsx(ToggleGroupItem, { value: "app", children: "Credits first" })] }) })), ownSet && (_jsx(SettingField, { 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)) }) })), ownSet && _jsx(OwnCapUse, { s: s }), _jsx(OwnKeyUsage, { client: client, always: ownSet, usable: rows.filter(ownUsable).map((p) => p.id) })] }));
+            return (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: rows.map((p) => (_jsx(OwnProviderKey, { client: client, p: p }, p.id))) }), ownSet && (_jsx(SettingField, { label: "Answers run on", info: "Your own key or plan first, with the shared credits behind it; or the shared credits first.", children: _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: s.pay, "aria-label": "Answers run on", onValueChange: (pay) => pay && void apply('pay', () => client.settings({ pay: pay })), children: [_jsx(ToggleGroupItem, { value: "own", children: "Your own first" }), _jsx(ToggleGroupItem, { value: "app", children: "Credits first" })] }) })), ownSet && (_jsx(SettingField, { 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)) }) })), ownSet && _jsx(OwnCapUse, { s: s }), !usage && (_jsx(OwnKeyUsage, { client: client, always: ownSet, usable: rows.filter(ownUsable).map((p) => p.id) }))] }));
         } }));
 }
 /**
@@ -312,6 +312,104 @@ function Web({ client }) {
     const { apply } = useApply(client);
     return (_jsx(WithStatus, { client: client, children: (s) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(SettingField, { label: "Read the web", info: "A plain fetch of public pages and APIs from the server, never the app's own pages.", children: _jsx(Switch, { "aria-label": "Read the web", checked: s.web.fetch, onCheckedChange: (fetch) => void apply('web', () => client.settings({ web: { fetch } })) }) }), _jsx(ScrapeqlBlock, { client: client, s: s })] })) }));
 }
+// ---------------------------------------------------------------- connectors
+const CONNECTOR_ACCESS_LABELS = [
+    { value: 'off', label: 'Off' },
+    { value: 'read', label: 'Read' },
+    { value: 'draft', label: 'Read + draft' },
+];
+/** Name, address and up to two sign-in headers; a pair left empty is not sent. */
+const headerFields = (prefix = '') => [
+    { id: `${prefix}h1`, label: 'Header', placeholder: 'CF-Access-Client-Id' },
+    { id: `${prefix}v1`, label: 'Value', secret: true },
+    { id: `${prefix}h2`, label: 'Header', placeholder: 'CF-Access-Client-Secret' },
+    { id: `${prefix}v2`, label: 'Value', secret: true },
+];
+const headersOf = (v) => {
+    const out = {};
+    for (const i of [1, 2]) {
+        const k = v[`h${i}`]?.trim();
+        const val = v[`v${i}`]?.trim();
+        if (k && val)
+            out[k] = val;
+    }
+    return out;
+};
+function ConnectorRow({ client, c }) {
+    const { apply, refresh } = useApply(client);
+    const reads = c.tools.filter((t) => t.read).length;
+    const access = (v) => apply('connector', () => client.saveConnector(c.id, {
+        name: c.name,
+        url: c.url,
+        access: v,
+    }));
+    return (_jsx(LumenConnection, { id: c.id, name: c.name, logo: _jsx(ConnectionLogo, { icon: PlugIcon }), meta: `${c.tools.length} tool${c.tools.length === 1 ? '' : 's'}${c.access === 'off' ? ' · off' : ''}`, ways: [
+            {
+                id: 'headers',
+                label: 'Sign-in headers',
+                icon: KeyRoundIcon,
+                info: 'Sent with every call to this server, such as a Cloudflare Access service token. Kept sealed on the server and never shown again.',
+                set: true,
+                ident: c.headers.length ? c.headers.join(', ') : 'None',
+                test: c.test
+                    ? {
+                        at: c.test.at,
+                        ok: c.test.ok,
+                        detail: c.test.detail,
+                        error: c.test.ok ? null : c.test.detail,
+                    }
+                    : null,
+                fields: [{ id: 'url', label: 'Address', placeholder: c.url }, ...headerFields()],
+                addLabel: 'Replace',
+                onSave: (v) => apply('connector', () => client.saveConnector(c.id, {
+                    name: c.name,
+                    url: v.url?.trim() || c.url,
+                    headers: headersOf(v),
+                }), 'Connector saved'),
+                ...(client.testConnector
+                    ? {
+                        onTest: () => client.testConnector(c.id).finally(refresh),
+                    }
+                    : {}),
+                onRemove: () => apply('connector', () => client.removeConnector(c.id), 'Connector removed'),
+                removeTitle: `Remove ${c.name}?`,
+                removeText: 'The assistant stops using its tools.',
+            },
+        ], lines: [
+            { label: 'Address', value: c.url, mono: true },
+            {
+                label: 'Tools',
+                info: 'The assistant finds these only when it needs them, so they cost nothing until used.',
+                value: c.tools.length
+                    ? `${c.tools.map((t) => t.title ?? t.name).join(', ')} (${reads} read-only)`
+                    : 'None listed',
+            },
+        ], children: _jsx(SettingField, { label: "Use", info: "Read uses the tools the server marks read-only. Read + draft also lets the others make a card the person saves or dismisses.", children: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: c.access, "aria-label": `Use ${c.name}`, onValueChange: (v) => v && void access(v), children: CONNECTOR_ACCESS_LABELS.map((a) => (_jsx(ToggleGroupItem, { value: a.value, children: a.label }, a.value))) }) }) }));
+}
+/** Admin: the app's connectors, each an MCP server, and a row to add one. */
+function Connectors({ client }) {
+    const { apply } = useApply(client);
+    return (_jsx(WithStatus, { client: client, children: (s) => (_jsxs(LumenExpandList, { children: [(s.connectors ?? []).map((c) => (_jsx(ConnectorRow, { client: client, c: c }, c.id))), _jsx(LumenConnection, { id: "connector-new", name: "Add connector", logo: _jsx(ConnectionLogo, { icon: PlugIcon }), meta: "Any MCP server over HTTP", ways: [
+                        {
+                            id: 'new',
+                            label: 'MCP server',
+                            icon: PlugIcon,
+                            info: 'Its address (Streamable HTTP) and the headers it signs in with. It is tested before it is kept.',
+                            set: false,
+                            fields: [
+                                { id: 'name', label: 'Name', placeholder: 'Web search' },
+                                { id: 'url', label: 'Address', placeholder: 'https://example.com/mcp' },
+                                ...headerFields(),
+                            ],
+                            addLabel: 'Add connector',
+                            onSave: (v) => apply('connector', () => client.addConnector({
+                                name: v.name?.trim() ?? '',
+                                url: v.url?.trim() ?? '',
+                                headers: headersOf(v),
+                            }), 'Connector added'),
+                        },
+                    ] })] })) }));
+}
 // ---------------------------------------------------------------- spend
 function Spend({ client }) {
     return (_jsx(WithStatus, { client: client, children: (s) => {
@@ -414,7 +512,7 @@ function AllowanceRequests({ client }) {
  * 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, allowance = false, providers, }) {
+export function assistantAdminSections({ client, allowance = false, providers, connectors = false, }) {
     const keys = providers
         ? [
             {
@@ -455,13 +553,24 @@ export function assistantAdminSections({ client, allowance = false, providers, }
                 },
             ]
             : []),
+        ...(connectors
+            ? [
+                {
+                    id: 'assistant-connectors',
+                    title: 'Connectors',
+                    icon: PlugIcon,
+                    description: 'Outside services the assistant may use',
+                    content: _jsx(Connectors, { 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`).
  */
-export function assistantSettingsSections({ client, name, web = true, allowance = false, }) {
+export function assistantSettingsSections({ client, name, web = true, allowance = false, usage = false, }) {
     return [
         {
             id: 'assistant',
@@ -476,7 +585,7 @@ export function assistantSettingsSections({ client, name, web = true, allowance
             icon: KeyRoundIcon,
             sub: true,
             description: 'Your own key for each provider',
-            content: _jsx(Providers, { client: client }),
+            content: _jsx(Providers, { client: client, usage: usage }),
         },
         {
             id: 'assistant-models',
@@ -514,6 +623,18 @@ export function assistantSettingsSections({ client, name, web = true, allowance
             description: 'What each model, chat and run cost',
             content: _jsx(Spend, { client: client }),
         },
+        ...(usage
+            ? [
+                {
+                    id: 'assistant-usage',
+                    title: 'Usage',
+                    icon: ChartColumnIcon,
+                    sub: true,
+                    description: 'Every chat and run this month, and who paid',
+                    content: _jsx(AssistantUsageTable, { client: client }),
+                },
+            ]
+            : []),
         ...(allowance
             ? [
                 {

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

@@ -26,7 +26,7 @@ export declare function OwnKeyUsage({ client, always, usable, }: {
 }): import("react").JSX.Element | null;
 /**
  * What one chat has cost so far, as a chip for the assistant's header: what was charged (credits or
- * the person's key) plus a plan sign-in's calls at API rates, shown ≈ when the plan's part is in it.
+ * the person's key) plus a plan sign-in's calls at API rates (an estimate, said in its hover).
  * Nothing while the chat has no history line. The hover splits it.
  */
 export declare function AssistantChatCost({ client, chatId, busy, }: {
@@ -35,3 +35,12 @@ export declare function AssistantChatCost({ client, chatId, busy, }: {
     /** The chat is answering: the chip reads its history again when the answer ends. */
     busy?: boolean;
 }): import("react").JSX.Element | null;
+/**
+ * This month's use, one row a chat or run: its Type (the person's API key, their plan sign-in, or
+ * the app's credits), Date, Calls and Amount, grouped by Type, Date or not at all, filtered by
+ * type or name. A row's hover gives its tokens and cost. A sign-in's amount is an estimate: the
+ * same tokens at the model's API rates (the plan charges $0).
+ */
+export declare function AssistantUsageTable({ client }: {
+    client: AssistantAdapter;
+}): import("react").JSX.Element | null;

package/dist/assistant/usage-history.js

@@ -1,17 +1,20 @@
 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, useEffect, useState } from 'react';
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon, CpuIcon, HashIcon, KeyRoundIcon, MessageSquareIcon, ReceiptIcon, } from 'lucide-react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import { DetailsTable } from '../details-table.js';
 import { IconButton } from '../icon-button.js';
 import { InfoLabel } from '../info-tip.js';
 import { cn } from '../lib/utils.js';
+import { LumenTokenizedFilter, useLumenFilter } from '../lumen-filter.js';
+import { LumenTable } from '../lumen-view.js';
 import { SettingField } from '../setting-parts.js';
 import { Badge } from '../ui/badge.js';
 import { Label } from '../ui/label.js';
 import { Spinner } from '../ui/spinner.js';
 import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
+import { CHIP_TONE } from '../view-model.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)
@@ -155,10 +158,10 @@ export function OwnKeyUsage({ client, always, usable, }) {
     const named = (e) => e.own_plan_calls ? `${e.title} · ${PLAN_NAME}, ${calls(e.own_plan_calls)}` : e.title;
     const total = keyTotal + planTotal + (planEarlier ? planListEarlier : 0);
     const anyPlan = planTotal > 0 || (planEarlier > 0 && planListEarlier > 0);
-    // An amount with plan calls in it reads ≈: the plan's part is what API rates would charge.
-    const amount = (key, plan, title) => plan > 0 ? (_jsxs("span", { title: title, children: ["\u2248", usd(key + plan)] }, "a")) : (usd(key));
+    // An amount with plan calls in it is an estimate: the plan's part is what API rates would charge.
+    const amount = (key, plan, title) => plan > 0 ? (_jsx("span", { title: title, children: usd(key + plan) }, "a")) : (usd(key));
     const planTitle = (key, plan) => `${key > 0 ? `${usd(key)} on your key + ` : ''}about ${usd(plan)} at API rates on your ${PLAN_NAME}, which charged $0`;
-    return (_jsxs("div", { className: "flex flex-col gap-2 border-t border-border/60 pb-3 first:border-t-0", children: [_jsx(SettingField, { label: "Spent on your keys", info: "Each chat and run your own key or plan paid for, by its last use. A \u2248 amount prices plan calls at API rates; the plan charges $0.", className: "border-t-0", end: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: range, "aria-label": "Range", onValueChange: (v) => v && setRange(v), children: OWN_RANGES.map((r) => (_jsx(ToggleGroupItem, { value: r.id, "aria-label": `Last ${r.id}`, children: r.id }, r.id))) }) }), sessions.length || untracked || gone || planEarlier ? (_jsx(DetailsTable, { head: [
+    return (_jsxs("div", { className: "flex flex-col gap-2 border-t border-border/60 pb-3 first:border-t-0", children: [_jsx(SettingField, { label: "Spent on your keys", info: "Each chat and run your own key or plan paid for, by its last use. Plan amounts are estimates at API rates; the plan charges $0.", className: "border-t-0", end: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: range, "aria-label": "Range", onValueChange: (v) => v && setRange(v), children: OWN_RANGES.map((r) => (_jsx(ToggleGroupItem, { value: r.id, "aria-label": `Last ${r.id}`, children: r.id }, r.id))) }) }), sessions.length || untracked || gone || planEarlier ? (_jsx(DetailsTable, { head: [
                     { label: 'Session', grow: true },
                     { label: 'Date', hideOnPhone: true },
                     { label: 'Amount', right: true },
@@ -217,7 +220,7 @@ export function OwnKeyUsage({ client, always, usable, }) {
 }
 /**
  * What one chat has cost so far, as a chip for the assistant's header: what was charged (credits or
- * the person's key) plus a plan sign-in's calls at API rates, shown ≈ when the plan's part is in it.
+ * the person's key) plus a plan sign-in's calls at API rates (an estimate, said in its hover).
  * Nothing while the chat has no history line. The hover splits it.
  */
 export function AssistantChatCost({ client, chatId, busy, }) {
@@ -241,9 +244,173 @@ export function AssistantChatCost({ client, chatId, busy, }) {
         own > 0 ? `${usd(own)} on your key` : null,
         charged - own >= 0.005 ? `${usd(charged - own)} on credits` : null,
         e.own_plan_calls
-            ? `${e.own_plan_calls === 1 ? '1 call' : `${e.own_plan_calls} calls`} on your ${PLAN_NAME}: ≈${usd(plan)} at API rates (charged $0)`
+            ? `${e.own_plan_calls === 1 ? '1 call' : `${e.own_plan_calls} calls`} on your ${PLAN_NAME}: ${usd(plan)} estimate at API rates (charged $0)`
             : null,
     ].filter(Boolean);
-    const text = `${plan > 0 ? '≈' : ''}${usd(total)}`;
+    const text = usd(total);
     return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": `This chat cost ${text}`, className: "shrink-0 rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring/50", children: _jsx(Badge, { variant: "outline", className: "num whitespace-nowrap", children: text }) }) }), _jsx(TooltipContent, { children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "font-medium", children: "This chat" }), lines.map((l) => (_jsx("span", { children: l }, l)))] }) })] }));
 }
+const TYPE_LABEL = {
+    key: 'API key',
+    plan: 'Sign-in',
+    credits: 'Credits',
+};
+const TYPE_TONE = { key: 'sky', plan: 'amber', credits: 'muted' };
+/** Dollars with no `<` or `≈` (the table's note says which amounts are estimates). */
+const money = (n) => (n === 0 ? '$0' : `$${n.toFixed(n < 10 ? 2 : 0)}`);
+const amountOf = (r) => r.key + r.credits + r.plan;
+const EARLIER = 'Earlier';
+/** This month's rows: every chat and run, then the spend no chat or run carries, by who paid. */
+function usageRows(h) {
+    const out = h.entries.map((e) => {
+        const key = e.own_usd ?? 0;
+        const plan = e.own_plan_usd ?? 0;
+        const type = plan > 0 || e.own_plan_calls ? 'plan' : key > 0 ? 'key' : 'credits';
+        return {
+            id: e.id,
+            title: e.title,
+            type,
+            at: e.at,
+            calls: e.calls,
+            tokens: { in: e.in, read: e.read, out: e.out },
+            key,
+            credits: Math.max(0, e.usd - key),
+            plan,
+        };
+    });
+    const sum = (xs) => xs.reduce((a, n) => a + n, 0);
+    const earlier = (type, title, calls, amount) => amount >= 0.01 &&
+        out.push({
+            id: `earlier:${type}:${title}`,
+            title,
+            type,
+            at: 0,
+            calls,
+            key: type === 'key' ? amount : 0,
+            credits: type === 'credits' ? amount : 0,
+            plan: type === 'plan' ? amount : 0,
+        });
+    const own = h.rows.filter((r) => r.payer === 'own' && !r.free);
+    const plans = own.filter((r) => r.way === 'plan' || (!r.way && r.usd < 0.0005));
+    const keys = own.filter((r) => !plans.includes(r));
+    const app = h.rows.filter((r) => r.payer !== 'own' && !r.free);
+    earlier('key', 'Earlier this month, not per chat', Math.max(0, sum(keys.map((r) => r.calls)) - sum(h.entries.filter((e) => e.own_usd).map((e) => e.calls))), sum(keys.map((r) => r.usd)) - sum(h.entries.map((e) => e.own_usd ?? 0)));
+    earlier('plan', 'Earlier this month, not per chat', Math.max(0, sum(plans.map((r) => r.calls)) - sum(h.entries.map((e) => e.own_plan_calls ?? 0))), sum(plans.map((r) => r.list_usd ?? 0)) - sum(h.entries.map((e) => e.own_plan_usd ?? 0)));
+    earlier('credits', 'Earlier this month, not per chat', Math.max(0, sum(app.map((r) => r.calls)) -
+        sum(h.entries.filter((e) => e.usd > (e.own_usd ?? 0)).map((e) => e.calls))), sum(app.map((r) => r.usd)) - sum(h.entries.map((e) => Math.max(0, e.usd - (e.own_usd ?? 0)))));
+    return out;
+}
+/** A row's hover: its tokens (cache reads as a share of input) and what it cost, by who paid. */
+function UsageTip({ r, children }) {
+    const t = r.tokens;
+    const lines = [
+        ...(t
+            ? [
+                ['Input', tokens(t.in)],
+                ['Cache read', `${tokens(t.read)} · ${t.in ? Math.round((t.read / t.in) * 100) : 0}%`],
+                ['Output', tokens(t.out)],
+            ]
+            : []),
+        ...(r.key > 0 ? [['Cost (your key)', money(r.key)]] : []),
+        ...(r.credits > 0 || (r.type === 'credits' && !r.plan)
+            ? [['Credits', money(r.credits)]]
+            : []),
+        ...(r.plan > 0 || r.type === 'plan'
+            ? [['Estimate (API rates)', money(r.plan)]]
+            : []),
+    ];
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { className: "max-w-72", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "truncate font-medium", children: r.title }), _jsx("dl", { className: "grid grid-cols-[auto_auto] gap-x-4 gap-y-0.5", children: lines.map(([k, v]) => (_jsxs(Fragment, { children: [_jsx("dt", { className: "opacity-75", children: k }), _jsx("dd", { className: "num text-right", children: v })] }, k))) }), !t && _jsx("span", { className: "opacity-75", children: "Spent before each chat kept its own count." })] }) })] }));
+}
+const dayOf = (at) => at ? new Date(at).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : EARLIER;
+const USAGE_FIELDS = [
+    {
+        key: 'title',
+        label: 'Session',
+        icon: MessageSquareIcon,
+        format: 'text',
+        value: (r) => r.title,
+        render: (r) => (_jsx(UsageTip, { r: r, children: _jsx("span", { 
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: a keyboard reaches the row's hover
+                tabIndex: 0, className: cn('rounded-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50', !r.at && 'text-muted-foreground'), children: r.title }) })),
+    },
+    {
+        key: 'type',
+        label: 'Type',
+        icon: KeyRoundIcon,
+        format: 'text',
+        groupable: true,
+        filterable: true,
+        value: (r) => TYPE_LABEL[r.type],
+        render: (r) => (_jsx(UsageTip, { r: r, children: _jsx(Badge, { variant: "outline", className: cn('whitespace-nowrap', CHIP_TONE[TYPE_TONE[r.type]]), children: TYPE_LABEL[r.type] }) })),
+    },
+    {
+        key: 'at',
+        label: 'Date',
+        icon: CalendarIcon,
+        format: 'integer',
+        hideOnPhone: true,
+        value: (r) => r.at,
+        render: (r) => (_jsx(UsageTip, { r: r, children: r.at ? (_jsx("time", { dateTime: new Date(r.at).toISOString(), className: "text-muted-foreground", children: when(r.at) })) : (_jsx("span", { className: "text-muted-foreground", children: EARLIER })) })),
+    },
+    {
+        key: 'calls',
+        label: 'Calls',
+        icon: HashIcon,
+        format: 'integer',
+        hideOnPhone: true,
+        aggregate: 'sum',
+        value: (r) => r.calls,
+        render: (r) => (_jsx(UsageTip, { r: r, children: _jsx("span", { children: r.calls }) })),
+    },
+    {
+        key: 'amount',
+        label: 'Amount',
+        icon: ReceiptIcon,
+        format: 'price',
+        aggregate: 'sum',
+        value: (r) => amountOf(r),
+        render: (r) => (_jsx(UsageTip, { r: r, children: _jsx("span", { children: money(amountOf(r)) }) })),
+        rollRender: (rows) => money(rows.reduce((a, r) => a + amountOf(r), 0)),
+    },
+];
+/** Grouping by date: each day, then the spend from before chats kept their own count. */
+const DAY_FIELD = {
+    key: 'day',
+    label: 'Date',
+    icon: CalendarIcon,
+    format: 'text',
+    groupable: true,
+    value: (r) => dayOf(r.at),
+};
+const USAGE_DOMAIN = {
+    id: 'assistant-usage',
+    fields: USAGE_FIELDS,
+    rowKey: (r) => r.id,
+    text: (r) => [r.title],
+    formulas: false,
+};
+const USAGE_FILTER = [
+    { key: 'type', label: 'Type', icon: KeyRoundIcon, values: (r) => [TYPE_LABEL[r.type]] },
+];
+const GROUPS = [
+    { id: 'type', label: 'Type', field: USAGE_FIELDS[1] },
+    { id: 'none', label: 'None', field: null },
+    { id: 'date', label: 'Date', field: DAY_FIELD },
+];
+/**
+ * This month's use, one row a chat or run: its Type (the person's API key, their plan sign-in, or
+ * the app's credits), Date, Calls and Amount, grouped by Type, Date or not at all, filtered by
+ * type or name. A row's hover gives its tokens and cost. A sign-in's amount is an estimate: the
+ * same tokens at the model's API rates (the plan charges $0).
+ */
+export function AssistantUsageTable({ client }) {
+    const [group, setGroup] = useState('type');
+    const q = useAssistantUsage(client);
+    const rows = useMemo(() => (q.data ? usageRows(q.data) : []), [q.data]);
+    const filter = useLumenFilter(rows, USAGE_FILTER, { text: (r) => [r.title] });
+    if (!client.usage)
+        return null;
+    if (!q.data)
+        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, {})) }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenTokenizedFilter, { filter: filter, label: "Filter usage", placeholder: "Filter: type, or a session name", className: "min-w-48 flex-1", link: null }), _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: group, "aria-label": "Group by", onValueChange: (v) => v && setGroup(v), children: GROUPS.map((g) => (_jsx(ToggleGroupItem, { value: g.id, "aria-label": `Group by ${g.label}`, children: g.label }, g.id))) })] }), _jsx(LumenTable, { domain: USAGE_DOMAIN, rows: filter.results, groupBy: GROUPS.find((g) => g.id === group)?.field ?? null, sort: { key: 'at', desc: true }, emptyState: rows.length ? undefined : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing used this month." })), onClearFilter: filter.clear }), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Sign-in amounts are estimates: your ", PLAN_NAME, " charges $0, so the amount is what the same tokens would cost at the model's API rates. Key and credit amounts are what was charged."] })] }));
+}

package/package.json

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