@columenlabs/lumen-ui 0.1.281 → 0.1.282

package/dist/assistant/index.d.ts

@@ -1,7 +1,7 @@
 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 { AutoCompactField, assistantAdminSections, assistantSettingsSections } from './settings.js';
 export { AssistantChatCost, AssistantUsageTable, 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

@@ -4,7 +4,7 @@
 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 { AutoCompactField, assistantAdminSections, assistantSettingsSections } from './settings.js';
 export { AssistantChatCost, AssistantUsageTable, 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.d.ts

@@ -59,8 +59,8 @@ export interface LumenAssistantProps {
         mode?: string;
     };
     /**
-     * Where the server compacts the chat, in tokens (the agent's `compactAt()`), named in the context
-     * donut's hover. 150k by default.
+     * Where the server compacts the chat, in tokens (the agent's `compactAt()`): the context donut turns
+     * yellow at 75% of it and red at it. The person's Auto-compact (status `compact_at`) wins; 150k by default.
      */
     compactAt?: number;
 }

package/dist/assistant/lumen-assistant.js

@@ -4,7 +4,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // (the person's messages, the answer as it streams, each tool call as a line, drafted changes as
 // cards to Save or Dismiss, work handed to a higher tier in its own section); and the composer,
 // with Stop, a queued message and the chat's cost and context under it.
-import { ASSISTANT_IMAGES_MAX, ASSISTANT_IMAGE_CHARS, } from '@columenlabs/lumen-ui-types/assistant';
+import { ASSISTANT_IMAGES_MAX, ASSISTANT_IMAGE_CHARS, COMPACT_AT, } from '@columenlabs/lumen-ui-types/assistant';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, GlobeIcon, LightbulbIcon, ListPlusIcon, MonitorIcon, PaperclipIcon, PencilIcon, PlusIcon, RefreshCwIcon, ReplyIcon, SearchIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, } from 'lucide-react';
 import { Fragment, createContext, useContext, useEffect, useRef, useState, } from 'react';
@@ -36,7 +36,6 @@ import { useAssistantChat, } from './use-assistant-chat.js';
 const ChatMarkdown = lazyPart(() => import('./chat-markdown.js').then((m) => m.default), null, ({ children }) => _jsx("p", { className: "whitespace-pre-wrap", children: children }));
 /** The main model's context drawn full (tokens); the mark sits where the assistant compacts. */
 const CONTEXT_MAX = 200_000;
-const COMPACT_AT = 150_000;
 export const assistantStatusKey = (client) => [
     'lumen-assistant',
     client.key,
@@ -191,7 +190,7 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, cha
                             title: c.title,
                             updated_at: new Date(c.at).toISOString(),
                             ...(chatScope && allScopes && c.scope ? { where: chatScope.name?.(c.scope) } : {}),
-                        })) ?? (chats.isFetched ? [] : null), value: chat.chatId ?? undefined, toggle: chatScope && { label: chatScope.label, on: allScopes, onChange: setAllScopes }, note: `Chats are kept ${keepDays} days after their last message.`, onRefresh: () => void chats.refetch(), onOpen: (c) => void chat.open(c.id) }), _jsx(IconButton, { icon: CopyIcon, label: "Copy chat", disabled: !chat.items.length, onClick: () => copyMarkdown(chatMarkdown(chat.title, chat.items, name), 'Chat') }), _jsx(IconButton, { icon: PlusIcon, label: "New chat", disabled: !chat.items.length, onClick: chat.reset }), onClose && (_jsx(IconButton, { icon: XIcon, label: `Close ${s?.name ?? 'assistant'}`, onClick: onClose }))] }), _jsx(AssistantName.Provider, { value: name, children: _jsx(Screen.Provider, { value: controls, children: _jsx(ImageTool.Provider, { value: imageTool ?? null, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings, onRetry: (at, user) => chat.retry(at, user, extra()), onFresh: (choice) => chat.fresh(choice, extra()) }) }) }) }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, queue: chat.queue, canSteer: chat.canSteer, onSteerQueued: chat.steerQueued, onUnqueue: chat.unqueue, disabled: !s || !!s.wait, commands: allCommands, tiers: tiers, sources: allSources, page: context?.label, images: images, modes: modes, onSend: (text, more, how) => chat.send(text, { ...extra(), ...more }, how), onStop: chat.stop, meter: _jsx(ContextDonut, { usage: chat.usage, compactAt: compactAt }) })] }));
+                        })) ?? (chats.isFetched ? [] : null), value: chat.chatId ?? undefined, toggle: chatScope && { label: chatScope.label, on: allScopes, onChange: setAllScopes }, note: `Chats are kept ${keepDays} days after their last message.`, onRefresh: () => void chats.refetch(), onOpen: (c) => void chat.open(c.id) }), _jsx(IconButton, { icon: CopyIcon, label: "Copy chat", disabled: !chat.items.length, onClick: () => copyMarkdown(chatMarkdown(chat.title, chat.items, name), 'Chat') }), _jsx(IconButton, { icon: PlusIcon, label: "New chat", disabled: !chat.items.length, onClick: chat.reset }), onClose && (_jsx(IconButton, { icon: XIcon, label: `Close ${s?.name ?? 'assistant'}`, onClick: onClose }))] }), _jsx(AssistantName.Provider, { value: name, children: _jsx(Screen.Provider, { value: controls, children: _jsx(ImageTool.Provider, { value: imageTool ?? null, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings, onRetry: (at, user) => chat.retry(at, user, extra()), onFresh: (choice) => chat.fresh(choice, extra()) }) }) }) }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, queue: chat.queue, canSteer: chat.canSteer, onSteerQueued: chat.steerQueued, onUnqueue: chat.unqueue, disabled: !s || !!s.wait, commands: allCommands, tiers: tiers, sources: allSources, page: context?.label, images: images, modes: modes, onSend: (text, more, how) => chat.send(text, { ...extra(), ...more }, how), onStop: chat.stop, meter: _jsx(ContextDonut, { usage: chat.usage, compactAt: s?.compact_at ?? compactAt, items: chat.items }) })] }));
 }
 function Messages({ chat, status, onSettings, onRetry, onFresh, }) {
     const end = useRef(null);
@@ -929,30 +928,67 @@ 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) };
-/** Context tokens from which the donut turns yellow, and red. */
-const CONTEXT_WATCH = 75_000;
-const CONTEXT_ALERT = 100_000;
+/** Share of the compact point from which the donut turns yellow; red at the compact point itself. */
+const CONTEXT_WATCH = 0.75;
+/** What the context pop-up counts from the chat: its turns, and the images and pointed-at things sent. */
+function chatCounts(items) {
+    let turns = 0;
+    let attached = 0;
+    for (const i of items) {
+        if (i.kind !== 'user' || i.steered)
+            continue;
+        turns += 1;
+        attached += (i.images?.length ?? 0) + (i.refs?.length ?? 0);
+    }
+    return { turns, attached };
+}
 /**
- * How full the chat's context is, as a small donut in the composer's icon row (after the paperclip and the modes):
- * it fills against `CONTEXT_MAX`, neutral below 75k, yellow from 75k, red from 100k. The hover gives
- * the tokens used, where the chat compacts, and how much of the last turn came from the prompt cache.
- * What a chat cost is not shown here: a person reads their use in Settings.
+ * How full the chat's context is, as a small donut in the composer's icon row (after the paperclip and
+ * the modes). It fills against `CONTEXT_MAX`: neutral, yellow from 75% of the compact point, red at it
+ * (75k and 100k when chats compact at 100k). Hover, focus or a tap (touch has no hover) opens its pop-up:
+ * context used of the most with a bar, that the chat compacts on its own, its turns, the images and
+ * attachments sent, and how much of the last turn came from the prompt cache. No price: a person reads
+ * their use in Settings.
  */
-function ContextDonut({ usage, compactAt }) {
+function ContextDonut({ usage, compactAt, items, }) {
+    const [open, setOpen] = useState(false);
+    const touch = useRef(false);
+    const wasOpen = useRef(false);
     const ctx = usage?.context ?? 0;
     if (ctx <= 0)
         return null;
     const share = Math.min(1, ctx / CONTEXT_MAX);
     const r = 6;
     const round = 2 * Math.PI * r;
-    const tone = ctx >= CONTEXT_ALERT
+    const level = ctx >= compactAt ? 'alert' : ctx >= compactAt * CONTEXT_WATCH ? 'watch' : 'ok';
+    const tone = level === 'alert'
         ? 'text-destructive'
-        : ctx >= CONTEXT_WATCH
+        : level === 'watch'
             ? 'text-warning'
             : 'text-muted-foreground';
     const cached = usage && usage.in > 0 ? Math.round((usage.read / usage.in) * 100) : null;
+    const { turns, attached } = chatCounts(items);
     const said = `Context ${tokens(ctx)} of ${tokens(CONTEXT_MAX)}`;
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": said, "data-testid": "context-donut", className: cn('grid size-6 place-items-center rounded-md hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', tone), children: _jsxs("svg", { viewBox: "0 0 16 16", className: "size-4 -rotate-90", "aria-hidden": "true", children: [_jsx("title", { children: said }), _jsx("circle", { cx: "8", cy: "8", r: r, fill: "none", strokeWidth: "2.5", className: "stroke-muted-foreground/25" }), _jsx("circle", { cx: "8", cy: "8", r: r, fill: "none", strokeWidth: "2.5", stroke: "currentColor", strokeDasharray: `${share * round} ${round}` })] }) }) }), _jsxs(TooltipContent, { className: "flex flex-col items-start gap-0.5 text-left", children: [_jsx("span", { className: "num", children: said }), _jsxs("span", { className: "num text-muted-foreground", children: ["Compacts at ", tokens(compactAt)] }), cached !== null && (_jsxs("span", { className: "num text-muted-foreground", children: [cached, "% of the last turn read from cache"] }))] })] }));
+    const rows = [
+        ['This chat', `${turns} ${turns === 1 ? 'turn' : 'turns'}`],
+        ['Images and attachments', String(attached)],
+        ...(cached !== null ? [['Cache read', `${cached}%`]] : []),
+    ];
+    return (_jsxs(Tooltip, { open: open, onOpenChange: setOpen, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": said, "aria-expanded": open, "data-testid": "context-donut", "data-level": level, 
+                    // A tap opens or closes the pop-up (touch has no hover); a mouse click leaves it open.
+                    // The press itself counts as outside the pop-up and closes it, so the tap reads the state before.
+                    onPointerDown: (e) => {
+                        touch.current = e.pointerType !== 'mouse';
+                        wasOpen.current = open;
+                        e.preventDefault();
+                    }, onClick: (e) => {
+                        e.preventDefault();
+                        setOpen(touch.current ? !wasOpen.current : true);
+                    }, className: cn('grid size-6 place-items-center rounded-md hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', tone), children: _jsxs("svg", { viewBox: "0 0 16 16", className: "size-4 -rotate-90", "aria-hidden": "true", children: [_jsx("title", { children: said }), _jsx("circle", { cx: "8", cy: "8", r: r, fill: "none", strokeWidth: "2.5", className: "stroke-muted-foreground/25" }), _jsx("circle", { cx: "8", cy: "8", r: r, fill: "none", strokeWidth: "2.5", stroke: "currentColor", strokeDasharray: `${share * round} ${round}` })] }) }) }), _jsxs(TooltipContent, { "data-testid": "context-popup", className: "flex w-56 flex-col items-stretch gap-1.5 px-3 py-2.5 text-left font-sans tabular-nums", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("span", { className: "font-medium", children: "Context" }), _jsxs("span", { className: "whitespace-nowrap", children: [tokens(ctx), " ", _jsxs("span", { className: "text-muted-foreground", children: ["/ ", tokens(CONTEXT_MAX)] })] })] }), _jsx("div", { className: "h-1 overflow-hidden rounded-full bg-muted-foreground/20", children: _jsx("div", { className: cn('h-full rounded-full', level === 'alert'
+                                ? 'bg-destructive'
+                                : level === 'watch'
+                                    ? 'bg-warning'
+                                    : 'bg-foreground/60'), style: { width: `${Math.max(2, share * 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground", children: "Auto-compacts as needed" }), _jsx("div", { className: "my-0.5 border-t" }), rows.map(([k, v]) => (_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("span", { className: "truncate text-muted-foreground", children: k }), _jsx("span", { className: "whitespace-nowrap", children: v })] }, k)))] })] }));
 }
 /**
  * The assistant docked in LumenShell: put `button` in `headerActions` and `panel` in `panel`.

package/dist/assistant/settings.d.ts

@@ -1,5 +1,13 @@
 import type { SettingsSectionDef } from '../settings.js';
 import type { AssistantAdapter } from './client.js';
+/**
+ * Settings: the context size past which a chat is summarized out of sight (Auto-compact), the
+ * person's own; the app's default until they pick. An app that shows only some of the kit's
+ * sections puts this row in its own.
+ */
+export declare function AutoCompactField({ client }: {
+    client: AssistantAdapter;
+}): import("react").JSX.Element | null;
 /**
  * The admin's section: the app's shared keys and each person's monthly allowance on them. Put it
  * where the app keeps its admin settings, shown only to admins.

package/dist/assistant/settings.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { COMPACT_AT, COMPACT_CHOICES } from '@columenlabs/lumen-ui-types/assistant';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ChartColumnIcon, CoinsIcon, GlobeIcon, InboxIcon, KeyRoundIcon, LayersIcon, Link2Icon, LogInIcon, PlugIcon, ReceiptIcon, SendIcon, SparklesIcon, WrenchIcon, } from 'lucide-react';
 import { useId, useState } from 'react';
@@ -18,7 +19,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 { AssistantUsageTable, OwnKeyUsage, UsageHistoryView } from './usage-history.js';
+import { AssistantUsageTable, OwnKeyUsage, UsageHistoryView, tokens } from './usage-history.js';
 const EFFORTS = [
     { value: 'default', label: 'Model default' },
     { value: 'low', label: 'Low' },
@@ -84,12 +85,30 @@ function General({ client }) {
                                     value: t.id,
                                     label: t.label,
                                 })),
-                            ], onChange: (advice) => void set({ advice }) }) })), _jsx(SettingField, { label: "Screen", info: "Takes you to a page, a Settings row, a chart or a card when you ask. Each move has an Undo; nothing is saved.", children: _jsx(LumenSelector, { label: "Screen", size: "sm", className: "w-44", value: s.screen ?? 'move', options: [
+                            ], onChange: (advice) => void set({ advice }) }) })), _jsx(AutoCompactField, { client: client }), _jsx(SettingField, { label: "Screen", info: "Takes you to a page, a Settings row, a chart or a card when you ask. Each move has an Undo; nothing is saved.", children: _jsx(LumenSelector, { label: "Screen", size: "sm", className: "w-44", value: s.screen ?? 'move', options: [
                                 { value: 'move', label: 'Move' },
                                 { value: 'off', label: 'Off' },
                             ], onChange: (screen) => void set({ screen: screen }) }) })] }));
         } }));
 }
+/**
+ * Settings: the context size past which a chat is summarized out of sight (Auto-compact), the
+ * person's own; the app's default until they pick. An app that shows only some of the kit's
+ * sections puts this row in its own.
+ */
+export function AutoCompactField({ client }) {
+    const { apply } = useApply(client);
+    const s = useAssistantStatus(client).data;
+    if (!s)
+        return null;
+    const now = s.compact_at ?? COMPACT_AT;
+    const choices = [...COMPACT_CHOICES];
+    if (!choices.includes(now))
+        choices.push(now);
+    return (_jsx(SettingField, { label: "Auto-compact", info: "Past this much context, the chat's older part is summarized out of sight, so long chats stay quick.", children: _jsx(LumenSelector, { label: "Auto-compact", size: "sm", className: "w-44", value: String(now), options: choices
+                .sort((a, b) => a - b)
+                .map((n) => ({ value: String(n), label: `At ${tokens(n)}` })), onChange: (v) => void apply('settings', () => client.settings({ compact_at: Number(v) })) }) }));
+}
 // ---------------------------------------------------------------- model providers
 /** A dollar cap a month, saved on Enter or leaving the field. */
 function CapInput({ label, value, onSave, }) {

package/package.json

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