@columenlabs/lumen-ui 0.1.256 → 0.1.258

package/dist/assistant/index.d.ts

@@ -2,6 +2,6 @@ export { type AssistantAdapter, assistantClient } from './client.js';
 export { ChatImage } from './chat-image.js';
 export { type AssistantCommand, type AssistantMode, type ComposerExtra, LumenAssistant, type LumenAssistantProps, LumenComposer, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
 export { assistantAdminSections, assistantSettingsSections } from './settings.js';
-export { UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.js';
+export { AssistantChatCost, UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.js';
 export { type AssistantSource, type AssistantSourceItem, type ComposeRequest, type PageSelection, composeAssistant, selectionRef, useAssistantSource, usePageSelection, useShownAssistantSources, } from './sources.js';
 export { type AssistantChatState, type LiveItem, applyEvent, useAssistantChat, } from './use-assistant-chat.js';

package/dist/assistant/index.js

@@ -5,6 +5,6 @@ export { assistantClient } from './client.js';
 export { ChatImage } from './chat-image.js';
 export { LumenAssistant, LumenComposer, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
 export { assistantAdminSections, assistantSettingsSections } from './settings.js';
-export { UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.js';
+export { AssistantChatCost, UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.js';
 export { composeAssistant, selectionRef, useAssistantSource, usePageSelection, useShownAssistantSources, } from './sources.js';
 export { applyEvent, useAssistantChat, } from './use-assistant-chat.js';

package/dist/assistant/lumen-assistant.js

@@ -31,7 +31,7 @@ import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { ImageCard, ImagePending, toolIs } from './image-card.js';
 import { ReplyToSelection } from './reply-selection.js';
 import { composeAssistant, selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.js';
-import { UsageHistoryView, tokens, usd } from './usage-history.js';
+import { AssistantChatCost, UsageHistoryView, tokens, usd } from './usage-history.js';
 import { useAssistantChat, } from './use-assistant-chat.js';
 // The Markdown renderer (tables included) loads with the first answer (lazy-part.tsx).
 // A tab whose build a deploy replaced shows the answer as plain text instead of reloading mid chat.
@@ -186,7 +186,7 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, cha
             allCommands.push(c);
     const shown = useShownAssistantSources();
     const allSources = [...shown, ...sources.filter((x) => !shown.some((y) => y.id === x.id))];
-    return (_jsxs("div", { "data-assistant": "", className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center gap-1 border-b px-3", children: [_jsx(SparklesIcon, { className: "size-4 text-edge" }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: chat.title || s?.name || 'Assistant' }), s && tiers.length > 1 && (_jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Tier", value: s.tier, options: tiers.map((t) => ({ value: t.id, label: t.label, detail: t.model_label })), onChange: (t) => void setTier(t) })), _jsx(LumenAssistantChats, { chats: chats.data
+    return (_jsxs("div", { "data-assistant": "", className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center gap-1 border-b px-3", children: [_jsx(SparklesIcon, { className: "size-4 text-edge" }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: chat.title || s?.name || 'Assistant' }), s && tiers.length > 1 && (_jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Tier", value: s.tier, options: tiers.map((t) => ({ value: t.id, label: t.label, detail: t.model_label })), onChange: (t) => void setTier(t) })), _jsx(AssistantChatCost, { client: client, chatId: chat.chatId, busy: chat.busy }), _jsx(LumenAssistantChats, { chats: chats.data
                             ?.filter((c) => !chatScope || allScopes || c.scope === chatScope.current)
                             .map((c) => ({
                             id: c.id,

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

@@ -24,3 +24,14 @@ export declare function OwnKeyUsage({ client, always, usable, }: {
     /** Providers the person can pay with now: earlier spend on any other is listed apart, uncounted. */
     usable?: string[];
 }): import("react").JSX.Element | null;
+/**
+ * What one chat has cost so far, as a chip for the assistant's header: what was charged (credits or
+ * the person's key) plus a plan sign-in's calls at API rates, shown ≈ when the plan's part is in it.
+ * Nothing while the chat has no history line. The hover splits it.
+ */
+export declare function AssistantChatCost({ client, chatId, busy, }: {
+    client: AssistantAdapter;
+    chatId: string | null | undefined;
+    /** The chat is answering: the chip reads its history again when the answer ends. */
+    busy?: boolean;
+}): import("react").JSX.Element | null;

package/dist/assistant/usage-history.js

@@ -1,15 +1,17 @@
 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 { Fragment, useEffect, 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 { SettingField } from '../setting-parts.js';
+import { Badge } from '../ui/badge.js';
 import { Label } from '../ui/label.js';
 import { Spinner } from '../ui/spinner.js';
 import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.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)
@@ -213,3 +215,35 @@ export function OwnKeyUsage({ client, always, usable, }) {
                         : usd(total),
                 ] })) : (_jsxs("p", { className: "text-muted-foreground text-sm", children: ["Nothing spent on your keys in the last ", range, "."] }))] }));
 }
+/**
+ * What one chat has cost so far, as a chip for the assistant's header: what was charged (credits or
+ * the person's key) plus a plan sign-in's calls at API rates, shown ≈ when the plan's part is in it.
+ * Nothing while the chat has no history line. The hover splits it.
+ */
+export function AssistantChatCost({ client, chatId, busy, }) {
+    const q = useAssistantUsage(client, undefined, !!chatId);
+    const { refetch } = q;
+    // Read again once an answer ends, so the chip follows the chat.
+    useEffect(() => {
+        if (!busy && chatId)
+            void refetch();
+    }, [busy, chatId, refetch]);
+    const e = chatId ? q.data?.entries.find((x) => x.id === `chat:${chatId}`) : undefined;
+    if (!e)
+        return null;
+    const plan = e.own_plan_usd ?? 0;
+    const charged = e.usd;
+    const total = charged + plan;
+    if (total < 0.005 && !e.own_plan_calls)
+        return null;
+    const own = e.own_usd ?? 0;
+    const lines = [
+        own > 0 ? `${usd(own)} on your key` : null,
+        charged - own >= 0.005 ? `${usd(charged - own)} on credits` : null,
+        e.own_plan_calls
+            ? `${e.own_plan_calls === 1 ? '1 call' : `${e.own_plan_calls} calls`} on your ${PLAN_NAME}: ≈${usd(plan)} at API rates (charged $0)`
+            : null,
+    ].filter(Boolean);
+    const text = `${plan > 0 ? '≈' : ''}${usd(total)}`;
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": `This chat cost ${text}`, className: "shrink-0 rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring/50", children: _jsx(Badge, { variant: "outline", className: "num whitespace-nowrap", children: text }) }) }), _jsx(TooltipContent, { children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "font-medium", children: "This chat" }), lines.map((l) => (_jsx("span", { children: l }, l)))] }) })] }));
+}

package/package.json

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