@columenlabs/lumen-ui 0.1.200 → 0.1.202

package/dist/assistant/lumen-assistant.js

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, LightbulbIcon, MonitorIcon, PencilIcon, PlusIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, } from 'lucide-react';
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, LightbulbIcon, MonitorIcon, PencilIcon, PlusIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, ZapIcon, } from 'lucide-react';
+import { Fragment, createContext, useContext, useEffect, useRef, useState, } from 'react';
 import { LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, useAssistantHotkey, } from '../assistant-panel.js';
 import { screenMapFor, useAssistantScreen } from '../assistant-screen.js';
+import { useIsMobile } from '../hooks/use-mobile.js';
 import { IconButton } from '../icon-button.js';
 import { errorText } from '../integrations.js';
 import { lazyPart } from '../lazy-part.js';
@@ -16,6 +17,7 @@ import { Alert, AlertDescription } from '../ui/alert.js';
 import { Button } from '../ui/button.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.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 { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
@@ -682,12 +684,43 @@ const pointedRef = (p) => p.kind === 'card'
         text: textOf(p.el),
     }
     : { kind: p.section.kind, label: p.section.label, id: p.section.id, text: textOf(p.el) };
-/** The chat's cost and tokens (a popup splits them per part), and how full the context is. */
+/** Share of `in` read from the prompt cache, as a whole percent. */
+const hitPct = (p) => (p.in ? Math.round((p.read / p.in) * 100) : 0);
+/**
+ * A part's row name: its tier (the label's first piece; the whole label is the hover) and what it
+ * was: the main model, `×N` hand-offs to a higher tier, advice or a compaction.
+ */
+function partRow(p, i) {
+    const bits = p.label.split(' · ');
+    const last = bits[bits.length - 1] ?? '';
+    const kind = p.runs
+        ? `×${p.runs}`
+        : last === 'advice' || last === 'compact'
+            ? last
+            : i === 0
+                ? 'main'
+                : '';
+    return { tier: bits[0] ?? p.label, kind };
+}
+/** The chat's use per part: cost, tokens in with the cache %, out, calls; then the total. */
+function UsageTable({ usage }) {
+    const total = 'mt-1 border-t pt-1';
+    return (_jsxs("div", { className: "grid grid-cols-[auto_auto_auto_auto_auto_auto] gap-x-3 gap-y-0.5 whitespace-nowrap text-xs", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", { className: "text-right text-muted-foreground", children: "Cost" }), _jsx("span", { className: "text-right text-muted-foreground", children: "In (cached)" }), _jsx("span", { className: "text-right text-muted-foreground", children: "Out" }), _jsx("span", { className: "text-right text-muted-foreground", children: "Calls" }), usage.parts.map((p, i) => {
+                const r = partRow(p, i);
+                return (_jsxs(Fragment, { children: [_jsx("span", { className: "truncate font-medium", title: p.label, children: r.tier }), _jsx("span", { className: "text-muted-foreground", children: r.kind }), _jsx("span", { className: "num text-right", children: usd(p.usd) }), _jsxs("span", { className: "num text-right", children: [tokens(p.in), " (", hitPct(p), "%)"] }), _jsx("span", { className: "num text-right", children: tokens(p.out) }), _jsx("span", { className: "num text-right", children: p.calls })] }, p.label));
+            }), _jsx("span", { className: cn(total, 'font-semibold'), children: "Total" }), _jsx("span", { className: total }), _jsx("span", { className: cn(total, 'num text-right font-semibold'), children: usd(usage.usd) }), _jsxs("span", { className: cn(total, 'num text-right'), children: [tokens(usage.in), " (", hitPct(usage), "%)"] }), _jsx("span", { className: cn(total, 'num text-right'), children: tokens(usage.out) }), _jsx("span", { className: cn(total, 'num text-right'), children: usage.calls })] }));
+}
+/**
+ * The chat's cost, tokens in and out and cache hit (a pop-up splits them per part, a sheet on a
+ * phone), and how full the context is.
+ */
 function UsageLine({ usage }) {
+    const phone = useIsMobile();
     if (!usage || !usage.calls)
         return null;
     const ctx = usage.context ?? 0;
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-3 px-3 pb-2 text-muted-foreground text-xs", children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "tabular-nums hover:text-foreground", children: [usd(usage.usd), " \u00B7 ", tokens(usage.in + usage.out), " tokens"] }) }), _jsxs(PopoverContent, { align: "start", className: "w-72 gap-1 p-2 text-xs", children: [usage.parts.map((p) => (_jsxs("div", { className: "flex justify-between gap-2 tabular-nums", children: [_jsx("span", { className: "truncate", children: p.label }), _jsxs("span", { children: [tokens(p.in), " in \u00B7 ", tokens(p.out), " out \u00B7 ", usd(p.usd)] })] }, p.label))), _jsxs("p", { className: "pt-1 text-muted-foreground", children: [tokens(usage.read), " of ", tokens(usage.in), " in read from cache"] })] })] }), ctx > 0 && (_jsxs("span", { className: "ml-auto flex items-center gap-1.5", title: `Context ${tokens(ctx)} of ${tokens(CONTEXT_MAX)}`, children: [_jsxs("span", { className: "relative h-1 w-16 overflow-hidden rounded-full bg-muted", children: [_jsx("span", { className: cn('absolute inset-y-0 left-0', ctx > COMPACT_AT ? 'bg-warning' : 'bg-primary/60'), style: { width: `${Math.min(100, (ctx / CONTEXT_MAX) * 100)}%` } }), _jsx("span", { className: "absolute inset-y-0 w-px bg-foreground/40", style: { left: `${(COMPACT_AT / CONTEXT_MAX) * 100}%` } })] }), _jsx("span", { className: "tabular-nums", children: tokens(ctx) })] }))] }));
+    const trigger = (_jsxs("button", { type: "button", className: "flex min-w-0 items-center gap-2 tabular-nums hover:text-foreground", "aria-label": "This chat's usage", children: [_jsxs("span", { className: "num truncate", children: [usd(usage.usd), " \u00B7 \u2191", tokens(usage.in), " \u2193", tokens(usage.out)] }), _jsxs("span", { className: "num flex shrink-0 items-center gap-0.5", title: "Read from cache", children: [_jsx(ZapIcon, { className: "size-3", "aria-hidden": true }), hitPct(usage), "%"] })] }));
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-3 px-3 pb-2 text-muted-foreground text-xs", children: [phone ? (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: trigger }), _jsxs(SheetContent, { side: "bottom", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: "This chat's usage" }) }), _jsx("div", { className: "overflow-x-auto px-4 pb-6", children: _jsx(UsageTable, { usage: usage }) })] })] })) : (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { align: "start", className: "w-auto p-2", children: _jsx(UsageTable, { usage: usage }) })] })), ctx > 0 && (_jsxs("span", { className: "ml-auto flex items-center gap-1.5", title: `Context ${tokens(ctx)} of ${tokens(CONTEXT_MAX)}`, children: [_jsxs("span", { className: "relative h-1 w-16 overflow-hidden rounded-full bg-muted", children: [_jsx("span", { className: cn('absolute inset-y-0 left-0', ctx > COMPACT_AT ? 'bg-warning' : 'bg-primary/60'), style: { width: `${Math.min(100, (ctx / CONTEXT_MAX) * 100)}%` } }), _jsx("span", { className: "absolute inset-y-0 w-px bg-foreground/40", style: { left: `${(COMPACT_AT / CONTEXT_MAX) * 100}%` } })] }), _jsx("span", { className: "tabular-nums", children: tokens(ctx) })] }))] }));
 }
 /**
  * The assistant docked in LumenShell: put `button` in `headerActions` and `panel` in `panel`.

package/package.json

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