@columenlabs/lumen-ui 0.1.260 → 0.1.262

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

@@ -36,7 +36,7 @@ export declare function AssistantChatCost({ client, chatId, busy, }: {
     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
+ * 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).

package/dist/assistant/usage-history.js

@@ -254,30 +254,59 @@ const TYPE_LABEL = {
     key: 'API key',
     plan: 'Sign-in',
     credits: 'Credits',
+    internal: 'Internal',
+};
+const TYPE_TONE = {
+    key: 'sky',
+    plan: 'amber',
+    credits: 'muted',
+    internal: 'muted',
 };
-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) => {
+    // One row a session: a chat, or every run of one task on one thing (each Rebuild of a part).
+    const sessions = new Map();
+    for (const e of h.entries) {
         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,
+        const id = e.kind === 'chat' ? e.id : `task:${e.task ?? ''}:${e.title}`;
+        const s = sessions.get(id);
+        const planCalls = (s?.planCalls ?? 0) + (e.own_plan_calls ?? 0);
+        const row = {
+            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,
+            type: 'credits',
+            at: Math.max(s?.at ?? 0, e.at),
+            calls: (s?.calls ?? 0) + e.calls,
+            tokens: {
+                in: (s?.tokens?.in ?? 0) + e.in,
+                read: (s?.tokens?.read ?? 0) + e.read,
+                out: (s?.tokens?.out ?? 0) + e.out,
+            },
+            key: (s?.key ?? 0) + key,
+            credits: (s?.credits ?? 0) + Math.max(0, e.usd - key),
+            plan: (s?.plan ?? 0) + plan,
+            planCalls,
         };
-    });
+        // Its type is whoever paid most; the hover splits the rest.
+        const top = Math.max(row.key, row.credits, row.plan);
+        row.type =
+            row.plan > 0 && row.plan === top
+                ? 'plan'
+                : row.key > 0 && row.key === top
+                    ? 'key'
+                    : row.credits > 0 || !planCalls
+                        ? 'credits'
+                        : 'plan';
+        if (e.internal)
+            row.type = 'internal';
+        sessions.set(id, row);
+    }
+    const out = [...sessions.values()];
     const sum = (xs) => xs.reduce((a, n) => a + n, 0);
     const earlier = (type, title, calls, amount) => amount >= 0.01 &&
         out.push({
@@ -298,7 +327,8 @@ function usageRows(h) {
     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;
+    // The app's own calls are kept (and counted above, so no Earlier row takes them) but not shown.
+    return out.filter((r) => r.type !== 'internal');
 }
 /** A row's hover: its tokens (cache reads as a share of input) and what it cost, by who paid. */
 function UsageTip({ r, children }) {
@@ -319,15 +349,55 @@ function UsageTip({ r, children }) {
             ? [['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." })] }) })] }));
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { className: "max-w-72", children: _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("span", { className: "whitespace-normal break-words 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;
+/** Midnight of `d`'s day, local time. */
+const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+/** Days from `at`'s day back to today (0 today, 1 yesterday). */
+const daysAgo = (at) => Math.round((startOf(new Date()) - startOf(new Date(at))) / 86_400_000);
+/** Days since Monday, today included (0 on a Monday). */
+const sinceMonday = () => (new Date().getDay() + 6) % 7;
+const sameMonth = (at) => {
+    const d = new Date(at);
+    const n = new Date();
+    return d.getFullYear() === n.getFullYear() && d.getMonth() === n.getMonth();
+};
+/** Grouping by date: Today, Yesterday, This week, This month, then each month by name. Spend
+ *  from before chats kept their own count is this month's. */
+const dayOf = (at) => {
+    if (!at)
+        return 'This month';
+    const n = daysAgo(at);
+    if (n <= 0)
+        return 'Today';
+    if (n === 1)
+        return 'Yesterday';
+    if (n <= sinceMonday())
+        return 'This week';
+    if (sameMonth(at))
+        return 'This month';
+    return new Date(at).toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
+};
+/** A row's date: today's time, Yesterday, the weekday this week, else the day. */
+const relWhen = (at) => {
+    const n = daysAgo(at);
+    if (n <= 0)
+        return new Date(at).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+    if (n === 1)
+        return 'Yesterday';
+    if (n <= sinceMonday())
+        return new Date(at).toLocaleDateString(undefined, { weekday: 'short' });
+    return new Date(at).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+};
 const USAGE_FIELDS = [
     {
         key: 'title',
         label: 'Session',
         icon: MessageSquareIcon,
         format: 'text',
+        // Names run long (a chat's first line): as wide as the table leaves after its other columns
+        // (the table's box is a size container), never under the usual name column.
+        maxWidth: 'max(12rem, calc(100cqw - 22rem))',
         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
@@ -350,7 +420,7 @@ const USAGE_FIELDS = [
         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 })) })),
+        render: (r) => (_jsx(UsageTip, { r: r, children: r.at ? (_jsx("time", { dateTime: new Date(r.at).toISOString(), className: "text-muted-foreground", children: relWhen(r.at) })) : (_jsx("span", { className: "text-muted-foreground", children: EARLIER })) })),
     },
     {
         key: 'calls',
@@ -398,7 +468,7 @@ const GROUPS = [
     { 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
+ * 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).
@@ -412,5 +482,5 @@ export function AssistantUsageTable({ client }) {
         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."] })] }));
+    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: "@container 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."] })] }));
 }

package/dist/lumen-view.js

@@ -507,6 +507,12 @@ function CappedCell({ max, end, title, children, }) {
         return children;
     return (_jsx("div", { className: cn('flex min-w-0 *:min-w-0 *:max-w-full *:truncate', end && 'justify-end'), style: { maxWidth: max }, title: title, children: children }));
 }
+/** A group heading's row count, as a chip beside its name. */
+function GroupCount({ children }) {
+    if (children === '' || children == null)
+        return null;
+    return (_jsx(Badge, { variant: "secondary", className: "num h-4.5 shrink-0 px-1.5 font-normal text-xs", children: children }));
+}
 /** The flat or grouped table: sortable headers, a Total row, group rows that collapse. */
 // Sorting, and paging of flat tables (the page is LumenView's, set right of the row count).
 const SORTING = tableFeatures({
@@ -874,7 +880,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                         const n = new Set(o);
                         n.has(k) ? n.delete(k) : n.add(k);
                         return n;
-                    }), children: [selection && _jsx(TableCell, {}), shown.map((f, i) => (_jsx(TableCell, { ...col(f, groupBy && i === 0 && 'pl-8'), children: i === 0 ? (_jsxs("span", { className: "flex min-w-0 items-center gap-1 whitespace-nowrap", children: [chevron(k, `${key} ${openLabel()}`), subgroup?.mark?.(key, ms), _jsx("span", { className: "truncate font-medium", title: key, children: titleOf(key, ms) }), _jsx("span", { className: "num shrink-0 text-xs text-muted-foreground", children: ms.length })] })) : (rollCell(f, ms, 'fold')) }, f.key))), add && _jsx(TableCell, {})] }), openParts.has(k) && ms.map((p) => partRow(p, subgroup?.name))] }, k));
+                    }), children: [selection && _jsx(TableCell, {}), shown.map((f, i) => (_jsx(TableCell, { ...col(f, groupBy && i === 0 && 'pl-8'), children: i === 0 ? (_jsxs("span", { className: "flex min-w-0 items-center gap-1 whitespace-nowrap", children: [chevron(k, `${key} ${openLabel()}`), subgroup?.mark?.(key, ms), _jsx("span", { className: "truncate font-medium", title: key, children: titleOf(key, ms) }), _jsx(GroupCount, { children: ms.length })] })) : (rollCell(f, ms, 'fold')) }, f.key))), add && _jsx(TableCell, {})] }), openParts.has(k) && ms.map((p) => partRow(p, subgroup?.name))] }, k));
     };
     const rowsOf = (list, scope) => {
         const under = folds ? subgroup?.under : undefined;
@@ -957,7 +963,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                                                                 const n = new Set(c);
                                                                                 n.has(key) ? n.delete(key) : n.add(key);
                                                                                 return n;
-                                                                            }), children: [_jsx(ChevronRightIcon, { className: cn('transition-transform', open && 'rotate-90') }), _jsx(GroupMark, { field: groupBy, value: key }), _jsx("span", { className: "truncate", children: key }), _jsx("span", { className: "num shrink-0 font-normal text-muted-foreground", children: serverGroups
+                                                                            }), 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));

package/package.json

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