@columenlabs/lumen-ui 0.1.301 → 0.1.302

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

@@ -36,10 +36,12 @@ export declare function AssistantChatCost({ client, chatId, busy, }: {
     busy?: boolean;
 }): import("react").JSX.Element | null;
 /**
- * This month's use, one row a session (a chat, or every run of one task on one thing): 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).
+ * This month's use, one row a session (a chat, or every run of one task on one thing): its
+ * Category (Chat, Edit, Rebuild: `UsageEntry.category`), Type (the person's API key, their plan
+ * sign-in, or the app's credits), Date, Calls and Amount, grouped by Date (first), Category, Type or
+ * not at all, filtered by category, type or name, PAGE_SIZE rows a page (a group's totals count all
+ * its rows). 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;

package/dist/assistant/usage-history.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery } from '@tanstack/react-query';
-import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon, CpuIcon, HashIcon, KeyRoundIcon, MessageSquareIcon, MessagesSquareIcon, ReceiptIcon, } from 'lucide-react';
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon, CpuIcon, HashIcon, KeyRoundIcon, LayersIcon, MessageSquareIcon, MessagesSquareIcon, ReceiptIcon, } from 'lucide-react';
 import { Fragment, useEffect, useMemo, useState } from 'react';
 import { DetailsTable } from '../details-table.js';
 import { IconButton } from '../icon-button.js';
@@ -8,6 +8,7 @@ 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 { LumenPageFooter } from '../pager.js';
 import { SettingField } from '../setting-parts.js';
 import { Badge } from '../ui/badge.js';
 import { Label } from '../ui/label.js';
@@ -280,6 +281,7 @@ function usageRows(h) {
             id,
             title: e.title,
             type: 'credits',
+            category: s?.category ?? (e.category || (e.kind === 'chat' ? 'Chat' : (e.task ?? 'Run'))),
             at: Math.max(s?.at ?? 0, e.at),
             calls: (s?.calls ?? 0) + e.calls,
             tokens: {
@@ -320,6 +322,7 @@ function usageRows(h) {
             id: `earlier:${type}:${title}`,
             title,
             type,
+            category: EARLIER,
             at: 0,
             calls,
             key: type === 'key' ? amount : 0,
@@ -430,6 +433,17 @@ const USAGE_FIELDS = [
         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: 'category',
+        label: 'Category',
+        icon: LayersIcon,
+        format: 'text',
+        groupable: true,
+        filterable: true,
+        hideOnPhone: true,
+        value: (r) => r.category,
+        render: (r) => (_jsx(UsageTip, { r: r, children: _jsx(Badge, { variant: "outline", className: cn('whitespace-nowrap', CHIP_TONE.muted), children: r.category }) })),
+    },
     {
         key: 'at',
         label: 'Date',
@@ -488,27 +502,42 @@ const USAGE_DOMAIN = {
     formulas: false,
 };
 const USAGE_FILTER = [
+    { key: 'category', label: 'Category', icon: LayersIcon, values: (r) => [r.category] },
     { key: 'type', label: 'Type', icon: KeyRoundIcon, values: (r) => [TYPE_LABEL[r.type]] },
 ];
+const fieldOf = (key) => USAGE_FIELDS.find((f) => f.key === key) ?? null;
 const GROUPS = [
-    { id: 'type', label: 'Type', field: USAGE_FIELDS[1] },
-    { id: 'none', label: 'None', field: null },
     { id: 'date', label: 'Date', field: DAY_FIELD },
+    { id: 'category', label: 'Category', field: fieldOf('category') },
+    { id: 'type', label: 'Type', field: fieldOf('type') },
+    { id: 'none', label: 'None', field: null },
 ];
+/** Rows a page of the table shows; a group's totals still count every row of it. */
+const PAGE_SIZE = 50;
 /**
- * This month's use, one row a session (a chat, or every run of one task on one thing): 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).
+ * This month's use, one row a session (a chat, or every run of one task on one thing): its
+ * Category (Chat, Edit, Rebuild: `UsageEntry.category`), Type (the person's API key, their plan
+ * sign-in, or the app's credits), Date, Calls and Amount, grouped by Date (first), Category, Type or
+ * not at all, filtered by category, type or name, PAGE_SIZE rows a page (a group's totals count all
+ * its rows). 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 [group, setGroup] = useState('date');
+    const [page, setPage] = useState(0);
     const q = useAssistantUsage(client);
     const rows = useMemo(() => (q.data ? usageRows(q.data) : []), [q.data]);
     const filter = useLumenFilter(rows, USAGE_FILTER, { text: (r) => [r.title] });
+    const shown = filter.results;
+    // A new filter or grouping starts from the first page; a page past the end shows the last.
+    const rowSet = shown.map((r) => r.id).join('\u0000');
+    // biome-ignore lint/correctness/useExhaustiveDependencies: resets on these changes only
+    useEffect(() => setPage(0), [rowSet, group]);
+    const pages = Math.max(1, Math.ceil(shown.length / PAGE_SIZE));
+    const at = Math.min(page, pages - 1);
     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("div", { className: "min-w-0", children: _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."] })] }));
+    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: category, 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))) })] }), _jsxs("div", { className: "min-w-0", children: [_jsx(LumenTable, { domain: USAGE_DOMAIN, rows: shown, groupBy: GROUPS.find((g) => g.id === group)?.field ?? null, page: { index: at, size: PAGE_SIZE }, 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 }), pages > 1 && (_jsx(LumenPageFooter, { total: shown.length, page: at, size: PAGE_SIZE, onPage: setPage }))] }), _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/dist/lumen-view.d.ts

@@ -213,7 +213,8 @@ export interface LumenTableProps<T> {
     rows: T[];
     groupBy?: ViewField<T> | null;
     chips?: ViewChip[];
-    /** The page a flat table shows; null shows every row. */
+    /** The page a table shows; null shows every row. A grouped table pages its rows in group order:
+     *  a group with rows on the page shows its row there, its count and totals over all its rows. */
     page?: {
         index: number;
         size: number;

package/dist/lumen-view.js

@@ -761,6 +761,13 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
         }
         return [...m];
     }, [groupBy, sorted, serverGroups]);
+    // A grouped table's page (`page`): the rows on it, in group order; every group keeps its totals.
+    const paged = useMemo(() => {
+        if (!groups || !page || serverGroups)
+            return null;
+        const start = page.index * page.size;
+        return new Set(groups.flatMap(([, ms]) => ms).slice(start, start + page.size));
+    }, [groups, page, serverGroups]);
     const span = shown.length + (selection ? 1 : 0) + (add ? 1 : 0);
     const served = new Map((serverGroups?.list ?? []).map((g) => [g.key, g]));
     const startsOpen = (i) => rows.length <= OPEN_ALL || i === 0;
@@ -959,6 +966,9 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                                 (!serverGroups || serverGroups.onToggleAll) && (_jsx(IconButton, { icon: anyClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: anyClosed ? 'Expand all groups' : 'Collapse all groups', onClick: () => setAll(anyClosed) })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", className: cn('font-medium', !(i === 0 && groups) && '-mx-2'), style: { color: colorOf(domain, shown[i]) ?? undefined }, onClick: h.column.getCanSort() ? h.column.getToggleSortingHandler() : undefined, children: [shown[i] ? _jsx(FreshnessMark, { domain: domain, field: shown[i] }) : null, flexRender(h.column.columnDef.header, h.getContext()), _jsx(SortIcon, { dir: h.column.getIsSorted() })] }) }), shown[i] && (domain.groups?.length || freshnessOf(domain, shown[i])) ? (_jsxs(TooltipContent, { children: [domain.groups?.length ? _jsx("div", { children: pathOf(domain, shown[i]) }) : null, freshnessLine(domain, shown[i]) ? (_jsx("div", { children: freshnessLine(domain, shown[i]) })) : null] })) : null] }), resizing && shown[i] && (_jsx(ColumnResizer, { label: shown[i].label, width: widthOf(shown[i]), onWidth: (w) => colWidths.set(h.id, w), onDone: (w) => colWidths.save(h.id, w), onReset: () => colWidths.reset(h.id) }))] }, h.id))), add && (_jsx(TableHead, { className: cn('w-8 pl-1', PINNED_HEAD), children: _jsx(AddColumnMenu, { add: add, fieldOpen: fieldOpen, onFieldOpen: setFieldOpen }) }))] }, hg.id))) }), _jsxs(TableBody, { children: [!rows.length && !serverGroups?.list?.length && (_jsx(TableRow, { "data-slot": "table-empty", className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center whitespace-normal text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [emptyState ?? 'No rows match.', onClearFilter && (_jsxs(Button, { variant: "outline", size: "sm", onClick: onClearFilter, children: [_jsx(FilterXIcon, {}), "Clear filters"] }))] }) }) })), groups && groupBy
                                     ? groups.map(([key, members], gi) => {
                                         const open = isOpen(key, gi);
+                                        const here = paged ? members.filter((m) => paged.has(m)) : members;
+                                        if (!here.length)
+                                            return null;
                                         return (_jsxs(Fragment, { children: [_jsxs(TableRow, { className: ROLLUP, "data-group": key, "data-rollup": "", children: [selection && (_jsx(TableCell, { "data-card": "select", className: cn('w-8 pr-0', PINNED_GROUP), children: _jsx(Checkbox, { checked: members.every((m) => selection.keys.has(keyOf(m.original)))
                                                                     ? true
                                                                     : members.some((m) => selection.keys.has(keyOf(m.original)))
@@ -972,7 +982,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                                                             }), children: [_jsx(ChevronRightIcon, { className: cn('transition-transform', open && 'rotate-90') }), _jsx(GroupMark, { field: groupBy, value: key }), _jsx("span", { className: "truncate", children: key }), _jsx(GroupCount, { children: serverGroups
                                                                                     ? (served.get(key)?.n?.toLocaleString() ?? '')
                                                                                     : members.length })] }), groupActions?.(key, members.map((m) => m.original))] }) }, f.key)) : (_jsx(TableCell, { ...col(f, PINNED_GROUP), children: !serverGroups &&
-                                                                rollCell(f, members.map((m) => m.original), 'group') }, f.key))), add && _jsx(TableCell, { className: PINNED_GROUP })] }), open && (serverGroups ? servedRows(members, key) : drawn(members, key))] }, key));
+                                                                rollCell(f, members.map((m) => m.original), 'group') }, f.key))), add && _jsx(TableCell, { className: PINNED_GROUP })] }), open && (serverGroups ? servedRows(members, key) : drawn(here, key))] }, key));
                                     })
                                     : drawn(sorted, ''), serverGroups?.more && !serverGroups.pages && (_jsx(TableRow, { "data-more": true, children: _jsx(TableCell, { colSpan: span, className: "py-1", children: _jsxs(Button, { variant: "ghost", size: "xs", onClick: serverGroups.more, children: [_jsx(ChevronsDownIcon, {}), "More groups"] }) }) })), hasTotal && rows.length > 0 && (_jsxs(TableRow, { className: cn(ROLLUP, 'border-t-2'), "data-total": true, "data-rollup": "", children: [selection && _jsx(TableCell, {}), rollCells(rows).map((cell, i) => i === 0 && !(shown[0] && rollsUp(shown[0])) ? (_jsx(TableCell, { "data-card": "lead", children: "Total" }, "total")) : (cell)), add && _jsx(TableCell, {})] }))] })] }) })] }));
 }

package/package.json

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