@columenlabs/lumen-ui 0.1.245 → 0.1.247

package/dist/assistant/lumen-assistant.js

@@ -22,10 +22,10 @@ import { cardsOnScreen, kindName, pointAt, sectionsOnScreen, targetEl, textOf, }
 import { Alert, AlertDescription } from '../ui/alert.js';
 import { Button } from '../ui/button.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.js';
+import { InputGroup, InputGroupAddon, InputGroupTextarea } from '../ui/input-group.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../ui/sheet.js';
 import { Spinner } from '../ui/spinner.js';
-import { Textarea } from '../ui/textarea.js';
 import { ChatImage } from './chat-image.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { ImageCard, ImagePending, toolIs } from './image-card.js';
@@ -880,7 +880,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
                     const r = sourceItems.get(o.value)?.();
                     if (r)
                         setRefs((p) => [...p, r]);
-                }, onClose: () => setClosed(`${text}|${caret}`) })), quote && _jsx(QuoteLine, { quote: quote, onRemove: () => setQuote(null) }), images.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1.5", "aria-label": "Images going with your message", children: images.map((img, i) => (_jsxs("span", { className: "relative", children: [_jsx("img", { src: imageUrl(img), alt: `Pasted ${i + 1}`, className: "size-12 rounded-md border object-cover" }), _jsx("button", { type: "button", "aria-label": `Remove image ${i + 1}`, className: "absolute -top-1.5 -right-1.5 grid size-4 place-items-center rounded-full border bg-background text-muted-foreground hover:text-foreground", onClick: () => setImages((p) => p.filter((_, j) => j !== i)), children: _jsx(XIcon, { className: "size-3" }) })] }, `${i}:${img.data.length}`))) })), (tierLabel || refs.length > 0) && (_jsxs("div", { className: "mb-2 flex flex-wrap gap-1", children: [tierLabel && (_jsx(ComposerChip, { sign: TIER, label: tierLabel, onRemove: () => setTier(null) })), refs.map((r, i) => (_jsx(ComposerChip, { sign: POINT, label: r.label, onRemove: () => setRefs((p) => p.filter((_, j) => j !== i)) }, `${r.kind}:${r.label}:${i}`)))] })), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { ref: box, "aria-label": `Message ${name}`, placeholder: `Ask ${name}…${hints.length ? ` (${hints.join(' ')})` : ''}`, className: cn('max-h-48 min-h-11 resize-none', busy && text.trim() && canSteer ? 'pr-18' : 'pr-11', (canAttach || modes.length > 0) && 'pb-9'), value: text, disabled: disabled, onChange: (e) => {
+                }, onClose: () => setClosed(`${text}|${caret}`) })), quote && _jsx(QuoteLine, { quote: quote, onRemove: () => setQuote(null) }), images.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1.5", "aria-label": "Images going with your message", children: images.map((img, i) => (_jsxs("span", { className: "relative", children: [_jsx("img", { src: imageUrl(img), alt: `Pasted ${i + 1}`, className: "size-12 rounded-md border object-cover" }), _jsx("button", { type: "button", "aria-label": `Remove image ${i + 1}`, className: "absolute -top-1.5 -right-1.5 grid size-4 place-items-center rounded-full border bg-background text-muted-foreground hover:text-foreground", onClick: () => setImages((p) => p.filter((_, j) => j !== i)), children: _jsx(XIcon, { className: "size-3" }) })] }, `${i}:${img.data.length}`))) })), (tierLabel || refs.length > 0) && (_jsxs("div", { className: "mb-2 flex flex-wrap gap-1", children: [tierLabel && (_jsx(ComposerChip, { sign: TIER, label: tierLabel, onRemove: () => setTier(null) })), refs.map((r, i) => (_jsx(ComposerChip, { sign: POINT, label: r.label, onRemove: () => setRefs((p) => p.filter((_, j) => j !== i)) }, `${r.kind}:${r.label}:${i}`)))] })), _jsxs(InputGroup, { children: [_jsx(InputGroupTextarea, { ref: box, "aria-label": `Message ${name}`, placeholder: `Ask ${name}…${hints.length ? ` (${hints.join(' ')})` : ''}`, className: "max-h-48 min-h-11", value: text, disabled: disabled, onChange: (e) => {
                             setText(e.target.value);
                             setCaret(e.target.selectionStart);
                         }, onSelect: (e) => setCaret(e.currentTarget.selectionStart), onPaste: (e) => {
@@ -900,11 +900,11 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
                                 e.preventDefault();
                                 send(e.altKey ? 'queue' : undefined);
                             }
-                        } }), (canAttach || modes.length > 0) && (_jsxs("div", { className: "absolute bottom-1.5 left-1.5 flex items-center gap-0.5", children: [canAttach && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: PaperclipIcon, label: "Attach images", size: "icon-xs", disabled: disabled, onClick: () => filePick.current?.click() }), _jsx("input", { ref: filePick, type: "file", accept: "image/*", multiple: true, hidden: true, onChange: (e) => {
+                        } }), _jsxs(InputGroupAddon, { align: "block-end", className: "gap-0.5 px-1.5 pb-1.5", children: [canAttach && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: PaperclipIcon, label: "Attach images", size: "icon-xs", disabled: disabled, onClick: () => filePick.current?.click() }), _jsx("input", { ref: filePick, type: "file", accept: "image/*", multiple: true, hidden: true, onChange: (e) => {
                                             if (e.target.files)
                                                 attach(e.target.files);
                                             e.target.value = '';
-                                        } })] })), modes.map((md) => (_jsx(IconButton, { icon: md.icon, label: md.label, size: "icon-xs", variant: use === md.id ? 'secondary' : 'ghost', "aria-pressed": use === md.id, className: cn(use === md.id && 'text-primary'), disabled: disabled, onClick: () => setUse((u) => (u === md.id ? null : md.id)) }, md.id)))] })), _jsx("div", { className: "absolute right-1.5 bottom-1.5", children: busy && !text.trim() ? (_jsx(IconButton, { icon: SquareIcon, label: "Stop", variant: "outline", size: "icon-xs", onClick: onStop })) : busy ? (_jsxs("span", { className: "flex gap-1", children: [_jsx(IconButton, { icon: ListPlusIcon, label: canSteer ? 'Queue for after (⌥↩)' : 'Queue for after (↩)', variant: canSteer ? 'outline' : 'default', size: "icon-xs", disabled: disabled, onClick: () => send('queue') }), canSteer && (_jsx(IconButton, { icon: CornerDownRightIcon, label: "Steer now (\u21A9)", variant: "default", size: "icon-xs", disabled: disabled, onClick: () => send('steer') }))] })) : (_jsx(IconButton, { icon: ArrowUpIcon, label: "Send", variant: "default", size: "icon-xs", disabled: !text.trim() || disabled, onClick: () => send() })) })] })] }));
+                                        } })] })), modes.map((md) => (_jsx(IconButton, { icon: md.icon, label: md.label, size: "icon-xs", variant: use === md.id ? 'secondary' : 'ghost', "aria-pressed": use === md.id, className: cn(use === md.id && 'text-primary'), disabled: disabled, onClick: () => setUse((u) => (u === md.id ? null : md.id)) }, md.id))), _jsx("div", { className: "ml-auto", children: busy && !text.trim() ? (_jsx(IconButton, { icon: SquareIcon, label: "Stop", variant: "outline", size: "icon-xs", onClick: onStop })) : busy ? (_jsxs("span", { className: "flex gap-1", children: [_jsx(IconButton, { icon: ListPlusIcon, label: canSteer ? 'Queue for after (⌥↩)' : 'Queue for after (↩)', variant: canSteer ? 'outline' : 'default', size: "icon-xs", disabled: disabled, onClick: () => send('queue') }), canSteer && (_jsx(IconButton, { icon: CornerDownRightIcon, label: "Steer now (\u21A9)", variant: "default", size: "icon-xs", disabled: disabled, onClick: () => send('steer') }))] })) : (_jsx(IconButton, { icon: ArrowUpIcon, label: "Send", variant: "default", size: "icon-xs", disabled: !text.trim() || disabled, onClick: () => send() })) })] })] })] }));
 }
 /**
  * What waits above the box while an answer runs: steering messages until the answer reads them,

package/dist/assistant/settings.js

@@ -170,7 +170,7 @@ function Providers({ client }) {
             // 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(SettingField, { label: "Answers run on", info: "Your own key or plan first, with the shared credits behind it; or the shared credits first.", children: _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: s.pay, "aria-label": "Answers run on", onValueChange: (pay) => pay && void apply('pay', () => client.settings({ pay: pay })), children: [_jsx(ToggleGroupItem, { value: "own", children: "Your own first" }), _jsx(ToggleGroupItem, { value: "app", children: "Credits first" })] }) })), ownSet && (_jsx(SettingField, { 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)) }) })), ownSet && _jsx(OwnCapUse, { s: s }), _jsx(OwnKeyUsage, { client: client, always: ownSet })] }));
+            return (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: rows.map((p) => (_jsx(OwnProviderKey, { client: client, p: p }, p.id))) }), ownSet && (_jsx(SettingField, { label: "Answers run on", info: "Your own key or plan first, with the shared credits behind it; or the shared credits first.", children: _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: s.pay, "aria-label": "Answers run on", onValueChange: (pay) => pay && void apply('pay', () => client.settings({ pay: pay })), children: [_jsx(ToggleGroupItem, { value: "own", children: "Your own first" }), _jsx(ToggleGroupItem, { value: "app", children: "Credits first" })] }) })), ownSet && (_jsx(SettingField, { 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)) }) })), ownSet && _jsx(OwnCapUse, { s: s }), _jsx(OwnKeyUsage, { client: client, always: ownSet, usable: rows.filter(ownUsable).map((p) => p.id) })] }));
         } }));
 }
 /**
@@ -178,14 +178,14 @@ function Providers({ client }) {
  * against, so this and the switch to shared credits never disagree.
  */
 function OwnCapUse({ s }) {
-    const used = s.spend.rows
-        .filter((r) => r.payer === 'own' && !r.free)
-        .reduce((a, r) => a + r.usd, 0);
+    // The server's own count (key calls only, on providers still set); older servers sum own rows.
+    const used = s.spend.own_used ??
+        s.spend.rows.filter((r) => r.payer === 'own' && !r.free).reduce((a, r) => a + r.usd, 0);
     const cap = s.caps.own;
     const full = cap > 0 && used >= cap;
     return (_jsx(SettingField, { label: "Used this month", info: full
             ? 'Your cap is used up, so the shared credits pay until next month or until you raise the cap.'
-            : 'What your own keys and plan have spent this month, against your cap.', children: _jsxs("div", { className: "flex w-56 min-w-0 flex-col gap-1", children: [_jsx(ShareMeter, { value: cap > 0 ? used / cap : 1, label: `${usd(used)} of ${usd(cap)}`, wide: true }), full && _jsx("span", { className: "text-muted-foreground text-xs", children: "Cap reached: credits pay" })] }) }));
+            : 'What your own API keys spent this month, against your cap. A plan sign-in counts nothing.', children: _jsxs("div", { className: "flex w-56 min-w-0 flex-col gap-1", children: [_jsx(ShareMeter, { value: cap > 0 ? used / cap : 1, wide: true, capped: true }), _jsxs("span", { className: "truncate text-muted-foreground text-xs", title: `${usd(used)} of ${usd(cap)}${full ? ' · Cap reached: credits pay' : ''}`, children: [_jsxs("span", { className: "num", children: [usd(used), " of ", usd(cap)] }), full && ' · Cap reached: credits pay'] })] }) }));
 }
 /** One provider's shared key, which an admin sets for everyone. */
 function SharedProviderKey({ client, p }) {

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

@@ -18,7 +18,9 @@ export declare function UsageHistoryView({ client, className, }: {
  * (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 }: {
+export declare function OwnKeyUsage({ client, always, usable, }: {
     client: AssistantAdapter;
     always?: boolean;
+    /** Providers the person can pay with now: earlier spend on any other is listed apart, uncounted. */
+    usable?: string[];
 }): import("react").JSX.Element | null;

package/dist/assistant/usage-history.js

@@ -102,7 +102,7 @@ const OWN_RANGES = [
  * (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 }) {
+export function OwnKeyUsage({ client, always, usable, }) {
     const [range, setRange] = useState('7d');
     const now = useAssistantUsage(client).data;
     // The month before, for a range that reaches back past this month's start.
@@ -122,13 +122,21 @@ export function OwnKeyUsage({ client, always }) {
     // This month's own spend that no chat or run carries (spent before per-chat tracking), so the
     // table never reads "nothing" while the cap's own numbers say otherwise.
     const tagged = now.entries.reduce((a, e) => a + (e.own_usd ?? 0), 0);
-    const ownMonth = now.rows
-        .filter((r) => r.payer === 'own' && !r.free)
-        .reduce((a, r) => a + r.usd, 0);
-    const untracked = ownMonth - tagged >= 0.01 ? ownMonth - tagged : 0;
-    const total = sessions.reduce((a, e) => a + (e.own_usd ?? 0), 0) + untracked;
+    // A plan sign-in's calls cost nothing, so they are no one's spend.
+    const ownRows = now.rows.filter((r) => r.payer === 'own' && !r.free && r.way !== 'plan');
+    const removed = usable && ownRows.length
+        ? ownRows
+            .filter((r) => r.provider && !usable.includes(r.provider))
+            .reduce((a, r) => a + r.usd, 0)
+        : 0;
+    const ownMonth = ownRows.reduce((a, r) => a + r.usd, 0);
+    const left = ownMonth - tagged - removed;
+    const untracked = left >= 0.01 ? left : 0;
+    const gone = removed >= 0.01 ? removed : 0;
+    const total = sessions.reduce((a, e) => a + (e.own_usd ?? 0), 0) + untracked + gone;
     const earlier = 'Earlier this month, not per chat';
-    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 ? (_jsx(DetailsTable, { head: [
+    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: [
                     { label: 'Session', grow: true },
                     { label: 'Date', hideOnPhone: true },
                     { label: 'Amount', right: true },
@@ -153,5 +161,17 @@ export function OwnKeyUsage({ client, always }) {
                             },
                         ]
                         : []),
+                    ...(gone
+                        ? [
+                            {
+                                key: 'removed',
+                                cells: [
+                                    _jsx("span", { className: "block truncate text-muted-foreground", title: removedText, children: removedText }, "n"),
+                                    _jsx("span", {}, "t"),
+                                    usd(gone),
+                                ],
+                            },
+                        ]
+                        : []),
                 ], 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/dist/assistant/use-assistant-chat.d.ts

@@ -1,8 +1,12 @@
 import type { AssistantEvent, AssistantMessage, AssistantScreenOutcome, ChatItem, ChatUsage, DraftItem, StepItem } from '@columenlabs/lumen-ui-types/assistant';
 import type { AssistantAdapter } from './client.js';
-/** An item as the panel draws it: a text still streaming, a step still running. */
+/**
+ * An item as the panel draws it: a text still streaming, a step still running. `writing` marks a
+ * running step whose tool makes a change at once, so an app can show what it changes as changing.
+ */
 export type LiveItem = ChatItem & {
     live?: boolean;
+    writing?: boolean;
 };
 type Extra = Omit<AssistantMessage, 'message' | 'chat_id'>;
 /** A message sent while an answer runs: waiting for it to end, or steered into it. */

package/dist/assistant/use-assistant-chat.js

@@ -83,6 +83,7 @@ export function applyEvent(prev, e) {
                 ok: true,
                 ms: 0,
                 live: true,
+                ...(e.data.write ? { writing: true } : {}),
             });
             break;
         case 'step': {
@@ -157,7 +158,7 @@ const settled = (items) => items.map((i) => {
         return { ...i, items: settled(i.items) };
     if (!i.live || i.kind === 'screen')
         return i;
-    const { live: _l, ...rest } = i;
+    const { live: _l, writing: _w, ...rest } = i;
     return rest;
 });
 export function useAssistantChat(client) {

package/dist/share-meter.d.ts

@@ -8,7 +8,7 @@ export interface ShareSegment {
     /** Who it is, read out by screen readers and in the bar's hover (`web 122%`). */
     label?: string;
 }
-export declare function ShareMeter({ value, label, color, kind, levels, segments, wide, className, }: {
+export declare function ShareMeter({ value, label, color, kind, levels, segments, wide, capped, className, }: {
     /** 0 to 1 fills the bar; past 1 it stays full and the overage spills past a tick at the cap. */
     value: number;
     /** The number beside the bar, e.g. `113%`; left out, the rounded percent. */
@@ -23,5 +23,7 @@ export declare function ShareMeter({ value, label, color, kind, levels, segments
     segments?: ShareSegment[];
     /** Fills its cell (a list row) instead of the fixed table width. */
     wide?: boolean;
+    /** A share that stops at its cap: no spill slot, so the bar takes the whole track. */
+    capped?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/share-meter.js

@@ -4,16 +4,16 @@ import { METER_LEVEL_COLOR, meterLevel } from './meter-level.js';
 import { Progress } from './ui/progress.js';
 /** How far past the cap the spill stub can grow (a share of the cap). */
 const SPILL_MAX = 0.5;
-export function ShareMeter({ value, label, color, kind, levels, segments, wide, className, }) {
+export function ShareMeter({ value, label, color, kind, levels, segments, wide, capped, className, }) {
     const said = segments
         ?.filter((s) => s.value > 0)
         .map((s) => `${s.label ?? ''} ${Math.round(s.value * 100)}%`.trim());
-    const over = kind !== 'health' && value > 1;
+    const over = !capped && kind !== 'health' && value > 1;
     const spill = over ? Math.min(value - 1, SPILL_MAX) / SPILL_MAX : 0;
     return (_jsxs("span", { className: cn('inline-flex items-center gap-2', wide && 'w-full', className), title: said?.length ? said.join(' · ') : undefined, children: [_jsxs("span", { "data-slot": "share-meter", "data-over": over || undefined, className: cn('flex shrink-0 items-center', wide ? 'w-full shrink' : 'w-16'), style: {
                     '--meter-color': color ?? METER_LEVEL_COLOR[meterLevel(value, levels, kind)],
-                }, children: [_jsx(Progress, { value: Math.max(0, Math.min(value, 1)) * 100, "aria-label": said?.length ? said.join(', ') : undefined, className: cn('h-1.5 w-auto flex-2 [&>[data-slot=progress-indicator]]:bg-(--meter-color)', over && 'rounded-r-none') }), _jsx("span", { "aria-hidden": true, className: "flex h-1.5 flex-1", children: over && (_jsx("span", { "data-slot": "share-spill", className: "h-full min-w-1 rounded-r-full border-foreground/70 border-l-2", style: {
+                }, children: [_jsx(Progress, { value: Math.max(0, Math.min(value, 1)) * 100, "aria-label": said?.length ? said.join(', ') : undefined, className: cn('h-1.5 w-auto flex-2 [&>[data-slot=progress-indicator]]:bg-(--meter-color)', over && 'rounded-r-none') }), _jsx("span", { "aria-hidden": true, className: cn('flex h-1.5 flex-1', capped && 'hidden'), children: over && (_jsx("span", { "data-slot": "share-spill", className: "h-full min-w-1 rounded-r-full border-foreground/70 border-l-2", style: {
                                 width: `${spill * 100}%`,
                                 background: 'repeating-linear-gradient(135deg, var(--meter-color) 0 2px, transparent 2px 4px)',
-                            } })) })] }), _jsx("span", { className: "num w-11 shrink-0 text-right text-xs", children: label ?? `${Math.round(value * 100)}%` })] }));
+                            } })) })] }), _jsx("span", { className: cn('num shrink-0 text-right text-xs', capped ? 'w-auto' : 'w-11'), children: label ?? `${Math.round(value * 100)}%` })] }));
 }

package/package.json

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