@columenlabs/lumen-ui 0.1.234 → 0.1.236

package/dist/assistant/settings.js

@@ -17,7 +17,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 { UsageHistoryView } from './usage-history.js';
+import { OwnKeyUsage, UsageHistoryView } from './usage-history.js';
 const EFFORTS = [
     { value: 'default', label: 'Model default' },
     { value: 'low', label: 'Low' },
@@ -117,12 +117,20 @@ const wayTest = (k, plan = false) => k?.test
     : null;
 /** A provider's mark: its initial on a tile. */
 const mark = (label) => _jsx(ConnectionLogo, { text: label.charAt(0) });
+/**
+ * Whether the app lets this person use `w` of their own on `p` (the app's `ownWays`, the same
+ * rule the server pays by). A way it does not allow never shows, even when one is still stored:
+ * the server would not run on it, so Settings never says it works.
+ */
+const mayOwn = (p, w) => !p.own_ways || p.own_ways.includes(w);
+/** Whether the person has a way of their own on `p` that the app lets them use. */
+const ownUsable = (p) => (mayOwn(p, 'key') && p.own.set) || (mayOwn(p, 'plan') && !!p.plan?.set);
 /** One provider, collapsed to a row: the person's own key and, where it has one, their plan sign-in. */
 function OwnProviderKey({ client, p }) {
     const { apply, refresh } = useApply(client);
     const ways = [];
-    const may = (w) => !p.own_ways || p.own_ways.includes(w);
-    if (p.signin === 'chatgpt' && (may('plan') || p.plan?.set))
+    const may = (w) => mayOwn(p, w);
+    if (p.signin === 'chatgpt' && may('plan'))
         ways.push({
             id: 'plan',
             label: 'ChatGPT plan',
@@ -139,7 +147,7 @@ function OwnProviderKey({ client, p }) {
             removeText: 'Your API key, if you set one, runs from then on.',
             removeLabel: 'Sign out',
         });
-    if (may('key') || p.own.set)
+    if (may('key'))
         ways.push({
             id: 'key',
             label: 'API key',
@@ -161,14 +169,14 @@ function OwnProviderKey({ client, p }) {
 function Providers({ client }) {
     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, unless one is
-            // still set (so it can be removed).
-            const rows = s.providers.filter((p) => !p.own_ways || p.own_ways.length > 0 || p.own.set || p.plan?.set);
-            const ownSet = rows.some((p) => p.own.set || p.plan?.set);
+            // 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(Row, { label: "Answers run on", info: "Your own key or plan first, with the shared credits behind it; or the shared credits first.", children: _jsx(LumenSelector, { label: "Answers run on", size: "sm", className: "w-44", value: s.pay, options: [
                                 { value: 'own', label: 'Your own first' },
                                 { value: 'app', label: 'Shared credits first' },
-                            ], onChange: (pay) => void apply('pay', () => client.settings({ pay: pay })) }) })), ownSet && (_jsx(Row, { 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)) }) }))] }));
+                            ], onChange: (pay) => void apply('pay', () => client.settings({ pay: pay })) }) })), ownSet && (_jsx(Row, { 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)) }) })), _jsx(OwnKeyUsage, { client: client, always: ownSet })] }));
         } }));
 }
 /** One provider's shared key, which an admin sets for everyone. */

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

@@ -13,3 +13,12 @@ export declare function UsageHistoryView({ client, className, }: {
     client: AssistantAdapter;
     className?: string;
 }): import("react").JSX.Element | null;
+/**
+ * Spend on the person's own keys and plans over the last 1, 7 or 30 days: one row a chat or run
+ * (Session, Date, Amount), newest first, and a Total of the rows. A session counts in the range its
+ * last use falls in. Shown when `always` (an own key or plan is set) or any session was paid on one.
+ */
+export declare function OwnKeyUsage({ client, always }: {
+    client: AssistantAdapter;
+    always?: boolean;
+}): import("react").JSX.Element | null;

package/dist/assistant/usage-history.js

@@ -2,9 +2,13 @@ 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, 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 { Label } from '../ui/label.js';
 import { Spinner } from '../ui/spinner.js';
+import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group.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)
@@ -86,3 +90,45 @@ 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." }))] }));
 }
+/** The ranges the own-key table offers, in days. */
+const OWN_RANGES = [
+    { id: '1d', days: 1 },
+    { id: '7d', days: 7 },
+    { id: '30d', days: 30 },
+];
+/**
+ * Spend on the person's own keys and plans over the last 1, 7 or 30 days: one row a chat or run
+ * (Session, Date, Amount), newest first, and a Total of the rows. A session counts in the range its
+ * last use falls in. Shown when `always` (an own key or plan is set) or any session was paid on one.
+ */
+export function OwnKeyUsage({ client, always }) {
+    const [range, setRange] = useState('7d');
+    const now = useAssistantUsage(client).data;
+    // The month before, for a range that reaches back past this month's start.
+    const before = now?.months[now.months.indexOf(now.month) + 1];
+    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);
+    if (!always && !all.length)
+        return null;
+    const days = OWN_RANGES.find((r) => r.id === range)?.days ?? 7;
+    const since = Date.now() - days * 86_400_000;
+    const seen = new Set();
+    const sessions = all
+        .filter((e) => e.at >= since && !seen.has(e.id) && seen.add(e.id))
+        .sort((a, b) => b.at - a.at);
+    const total = sessions.reduce((a, e) => a + (e.own_usd ?? 0), 0);
+    return (_jsxs("div", { "data-slot": "setting-row", className: "flex flex-col gap-2 border-b py-3 last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Label, { className: "min-w-0 flex-1", children: _jsx(InfoLabel, { info: "Each chat and run your own key or plan paid for, by its last use.", children: "Spent on your keys" }) }), _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 ? (_jsx(DetailsTable, { head: [
+                    { label: 'Session', grow: true },
+                    { label: 'Date', hideOnPhone: true },
+                    { label: 'Amount', right: true },
+                ], rows: sessions.map((e) => ({
+                    key: e.id,
+                    cells: [
+                        _jsx("span", { className: "block truncate", title: e.title, children: e.title }, "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),
+                    ],
+                })), 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.234",
+  "version": "0.1.236",
   "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.234",
+    "@columenlabs/lumen-ui-types": "0.1.236",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",