@columenlabs/lumen-ui 0.1.281 → 0.1.283

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;
 }
@@ -108,7 +108,9 @@ export declare function readAssistantImage(file: File): Promise<AssistantImage |
  * triggers list what can follow them as it is typed: `/` at the start a command, `@` a thing to
  * point at (the `sources`), `#` a tier for this message; a picked tier or thing shows as a chip.
  */
-export declare function LumenComposer({ name, busy, queued, queue, canSteer, onSteerQueued, onUnqueue, disabled, commands, tiers, sources, page, images: canAttach, modes, onSend, onStop, meter, }: {
+export declare function LumenComposer({ name, busy, queued, queue, canSteer, onSteerQueued, onUnqueue, disabled, commands, tiers, sources, page, images: canAttach, modes, onSend, onStop, meter, voice, }: {
+    /** A mic beside Send that types what the person says (`VoiceButton`); hidden where the browser can't. */
+    voice?: boolean;
     /** Drawn in the icon row after the paperclip and the modes: `LumenAssistant` puts its context donut here. */
     meter?: ReactNode;
     /** Toggles beside the paperclip (`LumenAssistant` `modes`). */

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';
@@ -24,6 +24,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/colla
 import { InputGroup, InputGroupAddon, InputGroupTextarea } from '../ui/input-group.js';
 import { Spinner } from '../ui/spinner.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
+import { VoiceButton } from '../voice-input.js';
 import { ChatImage } from './chat-image.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { ImageCard, ImagePending, toolIs } from './image-card.js';
@@ -36,7 +37,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 +191,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);
@@ -581,7 +581,7 @@ const imageUrl = (i) => `data:${i.media_type};base64,${i.data}`;
  * triggers list what can follow them as it is typed: `/` at the start a command, `@` a thing to
  * point at (the `sources`), `#` a tier for this message; a picked tier or thing shows as a chip.
  */
-export function LumenComposer({ name, busy, queued, queue, canSteer = false, onSteerQueued, onUnqueue, disabled, commands = [], tiers = [], sources = [], page, images: canAttach = false, modes = [], onSend, onStop, meter, }) {
+export function LumenComposer({ name, busy, queued, queue, canSteer = false, onSteerQueued, onUnqueue, disabled, commands = [], tiers = [], sources = [], page, images: canAttach = false, modes = [], onSend, onStop, meter, voice = true, }) {
     const [text, setText] = useState('');
     const [caret, setCaret] = useState(0);
     const [closed, setClosed] = useState(null);
@@ -904,7 +904,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
                                             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))), meter, _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() })) })] })] })] }));
+                                        } })] })), 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))), meter, _jsxs("div", { className: "ml-auto flex items-center gap-0.5", children: [voice && (_jsx(VoiceButton, { value: text, onChange: setText, size: "icon-xs", disabled: disabled })), 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,
@@ -929,30 +929,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/dist/index.d.ts

@@ -79,6 +79,7 @@ export { NotificationsSettings } from './notifications.js';
 export { type TasksConfig, TasksButton, TasksProvider, useTaskFor, useTasks } from './tasks.js';
 export { type McpServer, McpSettings } from './mcp-settings.js';
 export { lumenToast } from './lumen-toast.js';
+export { useVoiceInput, VoiceButton, type VoiceButtonProps, type VoiceInputOptions, voiceSupported, } from './voice-input.js';
 export { LumenShell, type LumenShellProps, type ShellUser, StatusItem, firstName, initials, maskAmount, useAmountsHidden, useApp, useShell, } from './shell.js';
 export { API_TIMEOUT_MS, apiJson } from './api-fetch.js';
 export { FETCH_MS, fetchWithin } from './fetch-within.js';

package/dist/index.js

@@ -86,6 +86,7 @@ export { NotificationsSettings } from './notifications.js';
 export { TasksButton, TasksProvider, useTaskFor, useTasks } from './tasks.js';
 export { McpSettings } from './mcp-settings.js';
 export { lumenToast } from './lumen-toast.js';
+export { useVoiceInput, VoiceButton, voiceSupported, } from './voice-input.js';
 export { LumenShell, StatusItem, firstName, initials, maskAmount, useAmountsHidden, useApp, useShell, } from './shell.js';
 export { API_TIMEOUT_MS, apiJson } from './api-fetch.js';
 export { FETCH_MS, fetchWithin } from './fetch-within.js';

package/dist/voice-input.d.ts

@@ -0,0 +1,34 @@
+/** True where the browser can turn speech into text. */
+export declare const voiceSupported: () => boolean;
+export type VoiceInputOptions = {
+    /** The box's text now. Speech joins the end of it. */
+    value: string;
+    /** Gets the box's whole new text: what was there plus what was said, the words still being heard included. */
+    onChange: (value: string) => void;
+    /** Recognition language as a BCP 47 tag; the browser's language by default. */
+    lang?: string;
+};
+/**
+ * Speech to text into a text box: `listening`, `supported` and `toggle()`. While listening, each word
+ * heard goes into the box as `onChange(text)` (live, then settled). If the person types while it
+ * listens, what they typed is kept and later speech joins after it.
+ */
+export declare function useVoiceInput({ value, onChange, lang }: VoiceInputOptions): {
+    supported: boolean;
+    listening: boolean;
+    start: () => void;
+    stop: () => void | undefined;
+    toggle: () => void;
+};
+export type VoiceButtonProps = VoiceInputOptions & {
+    /** `icon-xs` beside a composer's other tools; `icon-sm` by default. */
+    size?: 'icon-xs' | 'icon-sm' | 'icon';
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * The mic beside a text box: tap to talk, tap again to stop. While it listens the icon turns into a
+ * red dot and the words appear in the box as they are heard. Draws nothing where the browser has no
+ * speech to text.
+ */
+export declare function VoiceButton({ size, disabled, className, ...options }: VoiceButtonProps): import("react").JSX.Element | null;

package/dist/voice-input.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// VoiceButton: talk instead of type. A mic beside any text box that writes what the person says into
+// it as they speak, through the browser's own speech recognition (Web Speech API): no server of ours,
+// no cost. Tap to start, tap to stop; the words join what is already in the box, never replace it.
+// Where the browser has no speech recognition (Firefox) the button is not drawn.
+import { MicIcon } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
+import { lumenToast } from './lumen-toast.js';
+const recognitionClass = () => {
+    if (typeof window === 'undefined')
+        return undefined;
+    const w = window;
+    return w.SpeechRecognition ?? w.webkitSpeechRecognition;
+};
+/** True where the browser can turn speech into text. */
+export const voiceSupported = () => !!recognitionClass();
+/** What each recognition error means, in plain words. Errors left out (`aborted`, `no-speech`) say nothing. */
+const ERRORS = {
+    'not-allowed': "The microphone is blocked. Allow it for this site in your browser's settings, then tap the mic again.",
+    'service-not-allowed': 'This browser does not allow speech to text here. Try Chrome, Edge or Safari, or type instead.',
+    'audio-capture': 'No microphone was found. Connect one, then tap the mic again.',
+    network: 'Speech to text needs an internet connection. Check it, then tap the mic again.',
+    'language-not-supported': "Speech to text doesn't support your browser's language yet.",
+};
+/** `base` and `spoken` joined by one space, unless either side already has it. */
+const join = (base, spoken) => {
+    const s = spoken.trim();
+    if (!s)
+        return base;
+    if (!base || /\s$/.test(base))
+        return base + s;
+    return `${base} ${s}`;
+};
+/**
+ * Speech to text into a text box: `listening`, `supported` and `toggle()`. While listening, each word
+ * heard goes into the box as `onChange(text)` (live, then settled). If the person types while it
+ * listens, what they typed is kept and later speech joins after it.
+ */
+export function useVoiceInput({ value, onChange, lang }) {
+    const supported = useSyncExternalStore(noop, voiceSupported, () => false);
+    const [listening, setListening] = useState(false);
+    const rec = useRef(null);
+    // Latest props, read from the recognition's callbacks.
+    const latest = useRef({ value, onChange });
+    latest.current = { value, onChange };
+    // The text before this stretch of speech, the first result that belongs to it, and what was last written.
+    const base = useRef('');
+    const from = useRef(0);
+    // Every text written this stretch: the box may not have re-rendered with the last one yet.
+    const wrote = useRef(new Set());
+    const stop = useCallback(() => rec.current?.stop(), []);
+    // Leaving the page (or the box) ends listening, so the mic is never left on.
+    useEffect(() => () => rec.current?.abort(), []);
+    const start = useCallback(() => {
+        const Class = recognitionClass();
+        if (!Class || rec.current)
+            return;
+        const r = new Class();
+        r.lang = lang ?? (typeof navigator !== 'undefined' ? navigator.language : '') ?? '';
+        r.continuous = true;
+        r.interimResults = true;
+        base.current = latest.current.value;
+        from.current = 0;
+        wrote.current.clear();
+        r.onresult = (e) => {
+            const now = latest.current.value;
+            // Typed into the box since the last words: keep that text and start the next words after it.
+            if (wrote.current.size && !wrote.current.has(now)) {
+                base.current = now;
+                from.current = e.resultIndex;
+                wrote.current.clear();
+            }
+            let spoken = '';
+            for (let i = from.current; i < e.results.length; i++) {
+                spoken += ` ${e.results[i]?.[0]?.transcript ?? ''}`;
+            }
+            const next = join(base.current, spoken.replace(/\s+/g, ' '));
+            wrote.current.add(next);
+            if (next !== now)
+                latest.current.onChange(next);
+        };
+        r.onerror = (e) => {
+            const message = ERRORS[e.error];
+            if (message)
+                lumenToast.error(message, { id: 'lumen-voice' });
+        };
+        r.onend = () => {
+            rec.current = null;
+            setListening(false);
+        };
+        rec.current = r;
+        try {
+            r.start();
+            setListening(true);
+        }
+        catch {
+            rec.current = null;
+            lumenToast.error('Speech to text could not start. Try again.', { id: 'lumen-voice' });
+        }
+    }, [lang]);
+    const toggle = useCallback(() => (rec.current ? stop() : start()), [start, stop]);
+    return { supported, listening, start, stop, toggle };
+}
+const noop = () => () => { };
+/**
+ * The mic beside a text box: tap to talk, tap again to stop. While it listens the icon turns into a
+ * red dot and the words appear in the box as they are heard. Draws nothing where the browser has no
+ * speech to text.
+ */
+export function VoiceButton({ size = 'icon-sm', disabled, className, ...options }) {
+    const { supported, listening, toggle, stop } = useVoiceInput(options);
+    useEffect(() => {
+        if (disabled && listening)
+            stop();
+    }, [disabled, listening, stop]);
+    if (!supported)
+        return null;
+    return (_jsx(IconButton, { icon: listening ? ListeningDot : MicIcon, label: listening ? 'Stop listening' : 'Talk to type', size: size, variant: "ghost", 
+        // Inside a form it must not send it.
+        type: "button", "aria-pressed": listening, "data-voice": listening ? 'listening' : 'idle', disabled: disabled, className: cn(listening && 'text-destructive', className), onClick: toggle }));
+}
+/** A red dot that pulses while the mic listens. */
+function ListeningDot({ className }) {
+    return (_jsx("span", { className: cn('grid size-4 place-items-center', className), "aria-hidden": true, children: _jsx("span", { className: "size-2.5 animate-pulse rounded-full bg-destructive" }) }));
+}

package/package.json

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