@columenlabs/lumen-ui 0.1.260 → 0.1.261

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,7 +349,7 @@ 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;
 const USAGE_FIELDS = [
@@ -328,6 +358,9 @@ const USAGE_FIELDS = [
         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
@@ -398,7 +431,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 +445,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/package.json

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