@columenlabs/lumen-ui 0.1.250 → 0.1.252

package/dist/assistant/lumen-assistant.js

@@ -386,9 +386,9 @@ function pathOf(url) {
 /** A web step: a search, its results folded under it, or one page read. */
 function WebStep({ step, live }) {
     const web = step.web ?? {};
-    const results = web.results ?? [];
+    const results = (web.lookup ? web.reads : web.results) ?? [];
     const icon = live ? (_jsx(Spinner, { className: "size-3" })) : !step.ok ? (_jsx(CircleAlertIcon, { className: "size-3.5 shrink-0" })) : web.read ? (_jsx(GlobeIcon, { className: "size-3.5 shrink-0" })) : (_jsx(SearchIcon, { className: "size-3.5 shrink-0" }));
-    const line = (_jsxs(_Fragment, { children: [icon, web.tried ? (_jsxs("span", { className: "truncate", title: web.tried.url, children: ["Could not open ", _jsx("span", { className: "text-foreground", children: hostOf(web.tried.url) })] })) : web.read ? (_jsxs("span", { className: "truncate", title: web.read.title ?? web.read.url, children: ["Read ", _jsx("span", { className: "text-foreground", children: hostOf(web.read.url) }), pathOf(web.read.url) && ` · ${pathOf(web.read.url)}`] })) : (_jsxs("span", { className: "truncate", title: web.query, children: ["Searched the web", web.query ? ': ' : '', web.query && _jsx("span", { className: "text-foreground", children: web.query })] })), !live && !web.read && !web.tried && step.ok && (_jsxs("span", { className: "ml-auto shrink-0 tabular-nums", children: [results.length, " result", results.length === 1 ? '' : 's'] })), step.error && _jsxs("span", { className: "truncate", children: ["\u00B7 ", step.error] })] }));
+    const line = (_jsxs(_Fragment, { children: [icon, web.tried ? (_jsxs("span", { className: "truncate", title: web.tried.url, children: ["Could not open ", _jsx("span", { className: "text-foreground", children: hostOf(web.tried.url) })] })) : web.read ? (_jsxs("span", { className: "truncate", title: web.read.title ?? web.read.url, children: ["Read ", _jsx("span", { className: "text-foreground", children: hostOf(web.read.url) }), pathOf(web.read.url) && ` · ${pathOf(web.read.url)}`] })) : (_jsxs("span", { className: "truncate", title: web.query, children: [web.lookup ? 'Looked up' : 'Searched the web', web.query ? ': ' : '', web.query && _jsx("span", { className: "text-foreground", children: web.query })] })), !live && !web.read && !web.tried && step.ok && (_jsxs("span", { className: "ml-auto shrink-0 tabular-nums", children: [results.length, " ", web.lookup ? 'source' : 'result', results.length === 1 ? '' : 's'] })), step.error && _jsxs("span", { className: "truncate", children: ["\u00B7 ", step.error] })] }));
     const cls = cn('flex min-w-0 items-center gap-1.5 text-xs', step.ok ? 'text-muted-foreground' : 'text-loss');
     if (!results.length)
         return _jsx("p", { className: cls, children: line });
@@ -401,8 +401,10 @@ function turnPages(items) {
         for (const i of list) {
             if (i.kind === 'handoff')
                 walk(i.items);
-            else if (i.kind === 'step' && i.web?.read && !pages.some((p) => p.url === i.web?.read?.url))
-                pages.push(i.web.read);
+            else if (i.kind === 'step')
+                for (const p of i.web?.read ? [i.web.read] : (i.web?.reads ?? []))
+                    if (!pages.some((x) => x.url === p.url))
+                        pages.push(p);
         }
     };
     walk(items);

package/dist/assistant/usage-history.js

@@ -91,6 +91,8 @@ export function UsageHistoryView({ client, className, }) {
     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." }))] }));
 }
+/** How the own-key table names calls a plan sign-in paid. */
+const PLAN_NAME = 'ChatGPT plan';
 /** The ranges the own-key table offers, in days. */
 const OWN_RANGES = [
     { id: '1d', days: 1 },
@@ -110,7 +112,7 @@ export function OwnKeyUsage({ client, always, usable, }) {
     const prev = useAssistantUsage(client, before, !!before && range === '30d').data;
     if (!now)
         return null;
-    const all = [...now.entries, ...(range === '30d' ? (prev?.entries ?? []) : [])].filter((e) => (e.own_usd ?? 0) > 0);
+    const all = [...now.entries, ...(range === '30d' ? (prev?.entries ?? []) : [])].filter((e) => (e.own_usd ?? 0) > 0 || (e.own_plan_calls ?? 0) > 0);
     if (!always && !all.length)
         return null;
     const days = OWN_RANGES.find((r) => r.id === range)?.days ?? 7;
@@ -136,7 +138,17 @@ export function OwnKeyUsage({ client, always, usable, }) {
     const total = sessions.reduce((a, e) => a + (e.own_usd ?? 0), 0) + untracked + gone;
     const earlier = 'Earlier this month, not per chat';
     const removedText = 'Key not in use now, not counted';
-    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.", 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 ? (_jsx(DetailsTable, { head: [
+    // Calls a plan sign-in paid: free to the person, so listed by count. A $0 own row from before
+    // rows recorded their way is a plan's too (a key call always costs something).
+    const planCalls = now.rows
+        .filter((r) => r.payer === 'own' && !r.free && (r.way === 'plan' || (!r.way && r.usd < 0.0005)))
+        .reduce((a, r) => a + r.calls, 0);
+    const calls = (n) => (n === 1 ? '1 call' : `${n} calls`);
+    // Plan calls no chat or run carries (made before each entry kept its own count).
+    const planEarlier = Math.max(0, planCalls - now.entries.reduce((a, e) => a + (e.own_plan_calls ?? 0), 0));
+    const planText = `Earlier, ${PLAN_NAME}, ${calls(planEarlier)}`;
+    const named = (e) => e.own_plan_calls ? `${e.title} · ${PLAN_NAME}, ${calls(e.own_plan_calls)}` : e.title;
+    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.", 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 },
@@ -144,7 +156,7 @@ export function OwnKeyUsage({ client, always, usable, }) {
                     ...sessions.map((e) => ({
                         key: e.id,
                         cells: [
-                            _jsx("span", { className: "block truncate", title: e.title, children: e.title }, "n"),
+                            _jsx("span", { className: "block truncate", title: named(e), children: named(e) }, "n"),
                             _jsx("time", { dateTime: new Date(e.at).toISOString(), title: new Date(e.at).toLocaleString(), children: when(e.at) }, "t"),
                             usd(e.own_usd ?? 0),
                         ],
@@ -173,5 +185,17 @@ export function OwnKeyUsage({ client, always, usable, }) {
                             },
                         ]
                         : []),
+                    ...(planEarlier
+                        ? [
+                            {
+                                key: 'plan',
+                                cells: [
+                                    _jsx("span", { className: "block truncate text-muted-foreground", title: planText, children: planText }, "n"),
+                                    _jsx("span", {}, "t"),
+                                    usd(0),
+                                ],
+                            },
+                        ]
+                        : []),
                 ], foot: ['Total', _jsx("span", { className: "max-md:hidden" }, "d"), usd(total)] })) : (_jsxs("p", { className: "text-muted-foreground text-sm", children: ["Nothing spent on your keys in the last ", range, "."] }))] }));
 }

package/package.json

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