@columenlabs/lumen-ui 0.1.300 → 0.1.302

package/dist/assistant/copy.js

@@ -49,7 +49,7 @@ function itemMarkdown(i, depth, name) {
         case 'step': {
             const facts = [
                 i.rows !== undefined ? `${i.rows} rows` : '',
-                `${(i.ms / 1000).toFixed(1)} s`,
+                i.ms ? `${(i.ms / 1000).toFixed(1)} s` : '',
                 i.write ? i.write.status : '',
             ].filter(Boolean);
             return `**${i.ok ? 'Tool' : 'Failed'}: ${i.title}** (${facts.join(', ')})${i.error ? `\n\nError: ${i.error}` : ''}`;

package/dist/assistant/index.d.ts

@@ -1,6 +1,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 { type AssistantCommand, type AssistantMode, type ComposerExtra, LumenAssistant, type LumenAssistantProps, LumenComposer, QuickReplies, WorkCard, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.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';

package/dist/assistant/index.js

@@ -3,7 +3,7 @@
 // `@columenlabs/lumen-ui-types/assistant`.
 export { assistantClient } from './client.js';
 export { ChatImage } from './chat-image.js';
-export { LumenAssistant, LumenComposer, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
+export { LumenAssistant, LumenComposer, QuickReplies, WorkCard, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.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';

package/dist/assistant/lumen-assistant.d.ts

@@ -1,4 +1,4 @@
-import { type AllowanceUnit, type AssistantImage, type AssistantMessage, type AssistantQuote, type AssistantRefNote, type AssistantStatus, type AssistantTask, type AssistantTaskState } from '@columenlabs/lumen-ui-types/assistant';
+import { type AllowanceUnit, type AssistantImage, type AssistantMessage, type AssistantQuote, type AssistantRefNote, type AssistantStatus, type AssistantTask, type AssistantTaskState, type AssistantTaskView, type StepChoices } from '@columenlabs/lumen-ui-types/assistant';
 import { type LucideIcon } from 'lucide-react';
 import { type ReactNode } from 'react';
 import { type LumenOption } from '../lumen-selector.js';
@@ -65,14 +65,21 @@ export interface LumenAssistantProps {
     compactAt?: number;
     /**
      * A task in the chat (`AssistantTask`, the app's work in its own session): the buttons in its
-     * block's header, such as Keep and Drop, from the app.
+     * card's header, such as Discard and Accept, from the app; `live` while the task's turn runs
+     * (the card adds Stop then).
      */
-    taskActions?: (task: AssistantTask) => ReactNode;
+    taskActions?: (task: AssistantTask, live: boolean) => ReactNode;
     /**
      * The app's word on where a task stands, ahead of the chat's: it took or dropped the task's result
-     * in its own screens. A task no longer open drops its chip over the box.
+     * in its own screens. While a task is open, each message the person sends goes to it.
      */
     taskState?: (task: AssistantTask) => AssistantTaskState | undefined;
+    /**
+     * The header of a task's card (`AssistantTaskView`): its tone (running, ready, settled, failed,
+     * waiting on an answer, stopped), title and the line under it. Without it the card shows the
+     * task's label and the chat's word for its state.
+     */
+    taskView?: (task: AssistantTask, live: boolean) => AssistantTaskView | undefined;
 }
 /** A composer mode: its toggle's icon and label (also its tooltip and aria-label). */
 export interface AssistantMode {
@@ -94,9 +101,37 @@ export interface AssistantCommand {
     run: (args: string) => string | undefined | Promise<string | undefined>;
 }
 /** The assistant's chat: header, messages and composer. */
-export declare function LumenAssistant({ client, context, onSettings, keepDays, chatScope, onClose, chat: outside, commands, sources, images, modes, imageTool, compactAt, taskActions, taskState, }: LumenAssistantProps): import("react").JSX.Element;
+export declare function LumenAssistant({ client, context, onSettings, keepDays, chatScope, onClose, chat: outside, commands, sources, images, modes, imageTool, compactAt, taskActions, taskState, taskView, }: LumenAssistantProps): import("react").JSX.Element;
 /** An allowance in its unit: `$4.20`, or `350 credits`. */
 export declare const allowanceAmount: (u: AllowanceUnit, n: number) => string;
+/**
+ * A piece of the assistant's work as one card: a tinted icon for where it stands, its title and the
+ * line under it (`AssistantTaskView`), the app's buttons, Stop while it runs, a thin running bar,
+ * and a chevron that shows its steps (`children`). The chat draws each task this way; an app draws
+ * its own work the same way (an edit waiting for review) so every piece of work looks alike.
+ */
+export declare function WorkCard({ view, live, state, actions, onStop, steps, open: shownAt, children, }: {
+    view: AssistantTaskView;
+    live?: boolean;
+    /** The task's own state, for `data-state`. */
+    state?: string;
+    actions?: ReactNode;
+    onStop?: () => void;
+    /** How many steps `children` holds: no chevron without any. */
+    steps?: number;
+    /** Starts open; by default it is open while the work runs. */
+    open?: boolean;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Quick replies under the assistant's question: one row per answer, the suggested one outlined,
+ * numbered so a key picks it (when no text box has the focus). With `multi` each row ticks, and
+ * Send sends the ticked ones together. They are shortcuts: typing an answer in the box works too.
+ */
+export declare function QuickReplies({ choices, onSend, }: {
+    choices: StepChoices;
+    onSend: (text: string) => void;
+}): import("react").JSX.Element;
 /** What the composer sends with the text: the tier picked with `#` and the things pointed at with `@`. */
 export interface ComposerExtra {
     tier?: string;

package/dist/assistant/lumen-assistant.js

@@ -6,7 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // with Stop, a queued message and the chat's cost and context under it.
 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 { ArrowUpIcon, CheckCheckIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CircleAlertIcon, CircleCheckIcon, CircleXIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, GlobeIcon, HandIcon, LightbulbIcon, ListPlusIcon, LoaderCircleIcon, 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';
 import { LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, useAssistantHotkey, } from '../assistant-panel.js';
 import { screenMapFor, useAssistantScreen } from '../assistant-screen.js';
@@ -47,9 +47,9 @@ export function useAssistantStatus(client) {
     return useQuery({ queryKey: assistantStatusKey(client), queryFn: () => client.status() });
 }
 export { usd };
-const seconds = (ms) => (ms < 1000 ? `${ms} ms` : `${(ms / 1000).toFixed(1)} s`);
+const seconds = (ms) => !ms ? '' : ms < 1000 ? `${ms} ms` : `${(ms / 1000).toFixed(1)} s`;
 /** The assistant's chat: header, messages and composer. */
-export function LumenAssistant({ client, context, onSettings, keepDays = 30, chatScope, onClose, chat: outside, commands = [], sources = [], images = false, modes = [], imageTool, compactAt = COMPACT_AT, taskActions, taskState, }) {
+export function LumenAssistant({ client, context, onSettings, keepDays = 30, chatScope, onClose, chat: outside, commands = [], sources = [], images = false, modes = [], imageTool, compactAt = COMPACT_AT, taskActions, taskState, taskView, }) {
     const own = useAssistantChat(client);
     const chat = outside ?? own;
     const qc = useQueryClient();
@@ -80,12 +80,9 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, cha
     // each new screen call runs here once; how it ended goes with the next message.
     const screen = useAssistantScreen();
     const screenOn = !!screen && (s?.screen ?? 'move') === 'move';
-    // The open task's chip over the box: the next message goes to the task (the app decides) until
-    // the person steps out with its ×, or the task ends.
-    const [stepped, setStepped] = useState(null);
-    const openTask = chat.task && (taskState?.(chat.task) ?? chat.task.state) === 'open' && stepped !== chat.task.id
-        ? chat.task
-        : null;
+    // While a task is open, every message goes to it (the app decides what that means); the task
+    // ends when the app takes or drops its result.
+    const openTask = chat.task && (taskState?.(chat.task) ?? chat.task.state) === 'open' ? chat.task : null;
     const extra = () => ({
         ...(context ? { context } : {}),
         ...(screenOn && screen ? { screen: screenMapFor(screen) } : {}),
@@ -198,9 +195,9 @@ 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(TaskSlots.Provider, { value: { actions: taskActions, state: taskState }, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings, onRetry: (at, user) => chat.retry(at, user, extra()), onFresh: (choice) => chat.fresh(choice, extra()) }) }) }) }) }), openTask && (_jsx("div", { className: "flex px-3 pt-1", children: _jsx(TaskChip, { task: openTask, onLeave: () => setStepped(openTask.id) }) })), _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 }) })] }));
+                        })) ?? (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(TaskSlots.Provider, { value: { actions: taskActions, state: taskState, view: taskView, stop: chat.stop }, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings, onRetry: (at, user) => chat.retry(at, user, extra()), onFresh: (choice) => chat.fresh(choice, extra()), onAnswer: (text) => chat.send(text, 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, }) {
+function Messages({ chat, status, onSettings, onRetry, onFresh, onAnswer, }) {
     const end = useRef(null);
     const box = useRef(null);
     const count = JSON.stringify(chat.items).length;
@@ -219,7 +216,12 @@ function Messages({ chat, status, onSettings, onRetry, onFresh, }) {
                                     status.allowance &&
                                     status.allowance.request?.status !== 'open'
                                     ? 'Request more'
-                                    : 'Open Settings' }))] })] })), chat.loading ? (_jsxs("p", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Loading the chat\u2026"] })) : chat.items.length === 0 && !status?.wait ? (_jsxs("p", { className: "pt-8 text-center text-muted-foreground text-sm", children: ["Ask ", status?.name ?? 'the assistant', " anything."] })) : (_jsx(TierNames.Provider, { value: (id) => status?.tiers.find((t) => t.id === id)?.label ?? id, children: _jsx(UndoWrite.Provider, { value: chat.undo, children: _jsx(RetryTurn.Provider, { value: chat.busy || status?.wait ? null : onRetry, children: _jsx(FreshChoice.Provider, { value: chat.busy ? null : onFresh, children: _jsx(Items, { items: chat.items, onSettle: chat.settle, busy: chat.busy, turns: true }) }) }) }) })), chat.busy && !chat.items.some(isLive) && (_jsxs("p", { className: "flex items-center gap-2 py-1 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Thinking\u2026"] })), _jsx("div", { ref: end })] }));
+                                    : 'Open Settings' }))] })] })), chat.loading ? (_jsxs("p", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Loading the chat\u2026"] })) : chat.items.length === 0 && !status?.wait ? (_jsxs("p", { className: "pt-8 text-center text-muted-foreground text-sm", children: ["Ask ", status?.name ?? 'the assistant', " anything."] })) : (_jsx(TierNames.Provider, { value: (id) => status?.tiers.find((t) => t.id === id)?.label ?? id, children: _jsx(UndoWrite.Provider, { value: chat.undo, children: _jsx(RetryTurn.Provider, { value: chat.busy || status?.wait ? null : onRetry, children: _jsx(FreshChoice.Provider, { value: chat.busy ? null : onFresh, children: _jsx(Items, { items: chat.items, onSettle: chat.settle, busy: chat.busy, turns: true }) }) }) }) })), !chat.busy &&
+                !status?.wait &&
+                (() => {
+                    const c = lastChoices(chat.items);
+                    return c ? (_jsx("div", { className: "mt-2", children: _jsx(QuickReplies, { choices: c, onSend: onAnswer }, chat.items.length) })) : null;
+                })(), chat.busy && !chat.items.some(isLive) && (_jsxs("p", { className: "flex items-center gap-2 py-1 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Thinking\u2026"] })), _jsx("div", { ref: end })] }));
 }
 const isLive = (i) => !!i.live || ((i.kind === 'handoff' || i.kind === 'task') && i.items.some(isLive));
 const WAIT = {
@@ -456,7 +458,13 @@ function ToolStep({ step, live }) {
             setUndoing(false);
         }
     };
-    return (_jsxs("p", { className: cn('flex min-w-0 items-center gap-1.5 text-xs', step.ok ? 'text-muted-foreground' : 'text-loss'), children: [live ? (_jsx(Spinner, { className: "size-3" })) : w ? (_jsx(PencilIcon, { className: "size-3.5 shrink-0" })) : step.ok ? (_jsx(WrenchIcon, { className: "size-3.5 shrink-0" })) : (_jsx(CircleAlertIcon, { className: "size-3.5 shrink-0" })), _jsx("span", { className: "truncate", children: step.title }), !live && (_jsxs("span", { className: "shrink-0 tabular-nums", children: [step.rows !== undefined && `${step.rows} row${step.rows === 1 ? '' : 's'} · `, seconds(step.ms)] })), step.error && _jsxs("span", { className: "truncate", children: ["\u00B7 ", step.error] }), w?.status === 'undone' ? (_jsx("span", { className: "shrink-0", children: "\u00B7 Undone" })) : (w?.undo &&
+    // A change that did not land is a failure too, whatever the call returned.
+    const ok = step.ok && w?.status !== 'failed';
+    const facts = [
+        step.rows !== undefined ? `${step.rows} row${step.rows === 1 ? '' : 's'}` : '',
+        seconds(step.ms),
+    ].filter(Boolean);
+    return (_jsxs("p", { "data-slot": "chat-step", "data-ok": ok, className: cn('flex min-w-0 items-center gap-1.5 text-xs', ok ? 'text-muted-foreground' : 'text-loss'), children: [live ? (_jsx(Spinner, { className: "size-3" })) : !ok ? (_jsx(CircleAlertIcon, { className: "size-3.5 shrink-0" })) : w ? (_jsx(PencilIcon, { className: "size-3.5 shrink-0" })) : (_jsx(WrenchIcon, { className: "size-3.5 shrink-0" })), _jsx("span", { className: "truncate", title: step.title, children: step.title }), !live && facts.length > 0 && (_jsx("span", { className: "shrink-0 tabular-nums", children: facts.join(' · ') })), (step.error || w?.error) && (_jsxs("span", { className: "truncate", title: step.error ?? w?.error, children: ["\u00B7 ", step.error ?? w?.error] })), w?.status === 'undone' ? (_jsx("span", { className: "shrink-0", children: "\u00B7 Undone" })) : (w?.undo &&
                 undo && (_jsxs(Button, { size: "sm", variant: "ghost", className: "ml-auto h-6 shrink-0 px-2 text-xs", disabled: undoing, onClick: () => void take(), children: [undoing ? _jsx(Spinner, {}) : _jsx(Undo2Icon, {}), "Undo"] })))] }));
 }
 /** The arguments as short lines: `name: value`. */
@@ -541,28 +549,150 @@ const WHY = {
 function HandOff({ item, onSettle, busy, }) {
     return (_jsxs("section", { className: "flex flex-col gap-2 border-l-2 border-primary/40 pl-3", children: [_jsxs("p", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(CornerDownRightIcon, { className: "size-3.5 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: item.label }), _jsxs("span", { className: "text-muted-foreground", children: ["\u00B7 ", WHY[item.why]] })] }), item.task && _jsx("p", { className: "text-muted-foreground text-xs", children: item.task }), _jsx(Items, { items: item.items, onSettle: onSettle, busy: busy })] }));
 }
-/** The app's parts of a task's block (`taskActions`, `taskState`). */
+/** The app's parts of a task's card (`taskActions`, `taskState`, `taskView`) and the chat's Stop. */
 const TaskSlots = createContext({});
+/** The words a card says without the app's own view. */
 const TASK_STATE = {
     open: 'Open',
     done: 'Kept',
     dropped: 'Dropped',
 };
+/** Each tone's icon and colour: the icon sits in a tinted square at the head of the card. */
+const TONE = {
+    live: {
+        icon: LoaderCircleIcon,
+        box: 'bg-primary/12 text-primary',
+        word: 'text-primary',
+        spin: true,
+    },
+    ready: { icon: CircleCheckIcon, box: 'bg-gain/15 text-gain', word: 'text-gain' },
+    done: {
+        icon: CheckCheckIcon,
+        box: 'bg-muted text-muted-foreground',
+        word: 'text-muted-foreground',
+    },
+    failed: { icon: CircleAlertIcon, box: 'bg-loss/12 text-loss', word: 'text-loss' },
+    ask: { icon: HandIcon, box: 'bg-warning/15 text-warning', word: 'text-warning' },
+    stopped: {
+        icon: CircleXIcon,
+        box: 'bg-muted text-muted-foreground',
+        word: 'text-muted-foreground',
+    },
+};
+/** m:ss since a time, ticking each second while shown. */
+function Clock({ since }) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const t = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(t);
+    }, []);
+    const s = Math.max(0, Math.floor((now - since) / 1000));
+    return (_jsx("span", { className: "tabular-nums", children: `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}` }));
+}
+/** Where a task's card sits among its items: after the person's last message that tools answered. */
+function cardAt(items) {
+    const last = items.findLastIndex((i) => i.kind === 'step' || i.kind === 'draft');
+    if (last < 0)
+        return items.findLastIndex((i) => i.kind === 'user') + 1;
+    for (let i = last; i >= 0; i--)
+        if (items[i]?.kind === 'user')
+            return i + 1;
+    return 0;
+}
 /**
- * A task's turns in the chat (`TaskItem`): one block with its label and state; while open the
- * app's buttons (`taskActions`) sit in its header, once ended it folds to that one line.
+ * A piece of the assistant's work as one card: a tinted icon for where it stands, its title and the
+ * line under it (`AssistantTaskView`), the app's buttons, Stop while it runs, a thin running bar,
+ * and a chevron that shows its steps (`children`). The chat draws each task this way; an app draws
+ * its own work the same way (an edit waiting for review) so every piece of work looks alike.
+ */
+export function WorkCard({ view, live = false, state, actions, onStop, steps = 0, open: shownAt, children, }) {
+    const tone = TONE[view.tone];
+    const [open, setOpen] = useState(null);
+    const shown = (open ?? (shownAt || live)) && steps > 0;
+    const Icon = tone.icon;
+    return (_jsxs("section", { "data-slot": "chat-task", "data-state": state, "data-tone": view.tone, "aria-label": view.title, className: cn('flex min-w-0 flex-col overflow-hidden rounded-lg border bg-card', view.tone === 'live' && 'border-primary/45', view.tone === 'ready' && 'border-gain/45', view.tone === 'failed' && 'border-loss/45', view.tone === 'ask' && 'border-warning/45'), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2.5 py-2 pr-1.5 pl-2.5", children: [_jsx("span", { className: cn('grid size-7 shrink-0 place-items-center rounded-md', tone.box), children: _jsx(Icon, { className: cn('size-4', tone.spin && 'animate-spin'), "aria-hidden": true }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate font-medium text-sm", title: view.title, children: view.title }), (view.detail || view.state || (live && view.since)) && (_jsxs("span", { className: "flex min-w-0 gap-1 text-muted-foreground text-xs", children: [view.detail && (_jsx("span", { className: "min-w-0 truncate", title: view.detail, children: view.detail })), view.state && (_jsxs("span", { className: cn('shrink-0', tone.word), children: [view.detail ? '· ' : '', view.state] })), live && view.since ? (_jsxs("span", { className: "shrink-0 tabular-nums", children: ["\u00B7 ", _jsx(Clock, { since: view.since })] })) : null] }))] }), _jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [actions, onStop && (_jsx(IconButton, { icon: SquareIcon, label: "Stop", variant: "outline", size: "icon-sm", onClick: onStop })), steps > 0 && (_jsx(IconButton, { icon: shown ? ChevronUpIcon : ChevronDownIcon, label: shown ? 'Hide steps' : 'Show steps', size: "icon-sm", "aria-expanded": shown, onClick: () => setOpen(!shown) }))] })] }), live && (_jsx("div", { className: "h-0.5 w-full overflow-hidden bg-primary/15", children: _jsx("div", { className: "h-full w-1/3 animate-[lumen-progress_1.4s_ease-in-out_infinite] bg-primary" }) })), shown && _jsx("div", { className: "border-t px-3 py-2", children: children })] }));
+}
+/**
+ * A task's turns in the chat (`TaskItem`) as one card: a tinted icon for where it stands, its title
+ * and a line under it (the app's `taskView`), the app's buttons (`taskActions`), Stop while it runs
+ * and a chevron that shows the steps. The person's messages and the assistant's words stay in the
+ * chat around it, so a conversation about the work reads as one; the card sits at the newest turn
+ * that ran tools, holding that turn's steps, and earlier turns' steps stay as lines where they ran.
  */
 function TaskBlock({ item, onSettle, busy, }) {
     const slots = useContext(TaskSlots);
     const state = slots.state?.(item) ?? item.state;
-    const live = item.items.some(isLive);
-    const [open, setOpen] = useState(null);
-    const shown = open ?? (state === 'open' || live);
-    return (_jsxs("section", { "data-slot": "chat-task", "data-state": state, className: "flex min-w-0 flex-col gap-2 rounded-md border border-primary/30 bg-primary/5 px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-xs", children: [_jsx(WrenchIcon, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx("button", { type: "button", className: "min-w-0 flex-1 truncate text-left font-medium", title: item.label, "aria-expanded": shown, onClick: () => setOpen(!shown), children: item.label }), state === 'open' ? (!live && slots.actions?.(item)) : (_jsxs("span", { className: "shrink-0 text-muted-foreground", children: [state === 'done' ? _jsx(CheckIcon, { className: "inline size-3.5", "aria-hidden": true }) : null, ' ', TASK_STATE[state]] }))] }), shown && _jsx(Items, { items: item.items, onSettle: onSettle, busy: busy })] }));
+    const items = item.items;
+    const live = items.some(isLive);
+    const view = slots.view?.(item, live) ?? {
+        tone: live ? 'live' : state === 'open' ? 'ready' : 'done',
+        title: item.label,
+        state: live ? 'Working' : TASK_STATE[state],
+    };
+    const at = cardAt(items);
+    const steps = items.slice(at).filter((i) => i.kind === 'step' || i.kind === 'draft');
+    const after = items.slice(at).filter((i) => i.kind !== 'step' && i.kind !== 'draft');
+    const card = (_jsx(WorkCard, { view: view, live: live, state: state, actions: slots.actions?.(item, live), onStop: live ? slots.stop : undefined, steps: steps.length, open: steps.some((x) => x.kind === 'step' && (!x.ok || x.write?.status === 'failed')), children: _jsx(Items, { items: steps, onSettle: onSettle, busy: busy }) }));
+    return (_jsxs("div", { "data-slot": "chat-task-turns", className: "flex min-w-0 flex-col gap-3", children: [at > 0 && _jsx(Items, { items: items.slice(0, at), onSettle: onSettle, busy: busy }), card, after.length > 0 && _jsx(Items, { items: after, onSettle: onSettle, busy: busy })] }));
 }
-/** The open task's chip over the box: the next message goes to it; its × steps out. */
-function TaskChip({ task, onLeave }) {
-    return (_jsxs("span", { "data-slot": "chat-task-chip", className: "inline-flex min-w-0 max-w-full items-center gap-1 rounded-md border border-primary/30 bg-primary/5 px-1.5 py-0.5 text-xs", title: `Your next message goes to ${task.label}`, children: [_jsx(WrenchIcon, { className: "size-3 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx("span", { className: "truncate", children: task.label }), _jsx(IconButton, { icon: XIcon, label: "Step out of this task", size: "icon-xs", onClick: onLeave })] }));
+/** The quick replies the last turn offers (`StepItem.choices`), unless the person answered since. */
+function lastChoices(items) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        const it = items[i];
+        if (it.kind === 'user')
+            return null;
+        if (it.kind === 'task') {
+            const inner = lastChoices(it.items);
+            if (inner || it.items.some((x) => x.kind === 'user'))
+                return inner;
+            continue;
+        }
+        if (it.kind === 'step' && it.choices)
+            return it.choices;
+    }
+    return null;
+}
+/**
+ * Quick replies under the assistant's question: one row per answer, the suggested one outlined,
+ * numbered so a key picks it (when no text box has the focus). With `multi` each row ticks, and
+ * Send sends the ticked ones together. They are shortcuts: typing an answer in the box works too.
+ */
+export function QuickReplies({ choices, onSend, }) {
+    const [picked, setPicked] = useState(() => choices.multi ? choices.options.flatMap((o, n) => (o.on ? [n] : [])) : []);
+    const { options, multi, suggested } = choices;
+    const pick = (n) => {
+        const o = options[n];
+        if (!o)
+            return;
+        if (!multi)
+            return onSend(o.label);
+        setPicked((p) => (p.includes(n) ? p.filter((x) => x !== n) : [...p, n]));
+    };
+    const pickRef = useRef(pick);
+    pickRef.current = pick;
+    useEffect(() => {
+        const on = (e) => {
+            const t = e.target;
+            if (e.metaKey || e.ctrlKey || e.altKey)
+                return;
+            if (t?.closest('input, textarea, [contenteditable="true"], [role="dialog"]'))
+                return;
+            const n = Number(e.key);
+            if (!Number.isInteger(n) || n < 1 || n > options.length)
+                return;
+            e.preventDefault();
+            pickRef.current(n - 1);
+        };
+        window.addEventListener('keydown', on);
+        return () => window.removeEventListener('keydown', on);
+    }, [options.length]);
+    return (_jsxs("fieldset", { "data-slot": "chat-choices", "aria-label": "Quick replies", className: "m-0 flex min-w-0 flex-col gap-1.5 border-0 p-0", children: [options.map((o, n) => {
+                const on = picked.includes(n);
+                return (_jsxs("button", { type: "button", "aria-pressed": multi ? on : undefined, onClick: () => pick(n), className: cn('flex min-w-0 items-center gap-2.5 rounded-lg border bg-card px-2.5 py-2 text-left text-sm hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', n === suggested && !multi && 'border-primary ring-1 ring-primary', on && 'border-primary'), children: [multi ? (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('grid size-4 shrink-0 place-items-center rounded border', on && 'border-primary bg-primary text-primary-foreground'), children: on && _jsx(CheckIcon, { className: "size-3" }) }), _jsx("span", { className: "grid size-4.5 shrink-0 place-items-center rounded-full bg-muted font-medium text-muted-foreground text-xs tabular-nums", children: n + 1 })] })) : (_jsx("kbd", { className: "grid size-4.5 shrink-0 place-items-center rounded bg-muted font-medium text-xs text-muted-foreground", children: n + 1 })), _jsxs("span", { className: "min-w-0 flex-1 truncate", title: o.label, children: [o.label, (o.note || n === suggested) && (_jsx("span", { className: "ml-1.5 text-muted-foreground text-xs", children: o.note ?? 'suggested' }))] })] }, o.label));
+            }), multi && (_jsxs("div", { className: "flex items-center justify-end gap-2 text-muted-foreground text-xs", children: [_jsxs("span", { children: [picked.length, " picked"] }), _jsx(IconButton, { icon: ArrowUpIcon, label: "Send picks", variant: "default", size: "icon-sm", disabled: !picked.length, onClick: () => onSend(options
+                            .filter((_, n) => picked.includes(n))
+                            .map((o) => o.label)
+                            .join('; ')) })] }))] }));
 }
 /** The composer's triggers: `@` points at a thing (the `sources`), `#` picks the tier for one message. */
 const POINT = '@';

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

@@ -36,10 +36,12 @@ export declare function AssistantChatCost({ client, chatId, busy, }: {
     busy?: boolean;
 }): import("react").JSX.Element | null;
 /**
- * This month's use, one row a session (a chat, or every run of one task on one thing): its Type (the person's API key, their plan sign-in, or
- * the app's credits), Date, Calls and Amount, grouped by Type, Date or not at all, filtered by
- * type or name. A row's hover gives its tokens and cost. A sign-in's amount is an estimate: the
- * same tokens at the model's API rates (the plan charges $0).
+ * This month's use, one row a session (a chat, or every run of one task on one thing): its
+ * Category (Chat, Edit, Rebuild: `UsageEntry.category`), Type (the person's API key, their plan
+ * sign-in, or the app's credits), Date, Calls and Amount, grouped by Date (first), Category, Type or
+ * not at all, filtered by category, type or name, PAGE_SIZE rows a page (a group's totals count all
+ * its rows). A row's hover gives its tokens and cost. A sign-in's amount is an estimate: the same
+ * tokens at the model's API rates (the plan charges $0).
  */
 export declare function AssistantUsageTable({ client }: {
     client: AssistantAdapter;

package/dist/assistant/usage-history.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery } from '@tanstack/react-query';
-import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon, CpuIcon, HashIcon, KeyRoundIcon, MessageSquareIcon, MessagesSquareIcon, ReceiptIcon, } from 'lucide-react';
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon, CpuIcon, HashIcon, KeyRoundIcon, LayersIcon, MessageSquareIcon, MessagesSquareIcon, ReceiptIcon, } from 'lucide-react';
 import { Fragment, useEffect, useMemo, useState } from 'react';
 import { DetailsTable } from '../details-table.js';
 import { IconButton } from '../icon-button.js';
@@ -8,6 +8,7 @@ import { InfoLabel } from '../info-tip.js';
 import { cn } from '../lib/utils.js';
 import { LumenTokenizedFilter, useLumenFilter } from '../lumen-filter.js';
 import { LumenTable } from '../lumen-view.js';
+import { LumenPageFooter } from '../pager.js';
 import { SettingField } from '../setting-parts.js';
 import { Badge } from '../ui/badge.js';
 import { Label } from '../ui/label.js';
@@ -280,6 +281,7 @@ function usageRows(h) {
             id,
             title: e.title,
             type: 'credits',
+            category: s?.category ?? (e.category || (e.kind === 'chat' ? 'Chat' : (e.task ?? 'Run'))),
             at: Math.max(s?.at ?? 0, e.at),
             calls: (s?.calls ?? 0) + e.calls,
             tokens: {
@@ -320,6 +322,7 @@ function usageRows(h) {
             id: `earlier:${type}:${title}`,
             title,
             type,
+            category: EARLIER,
             at: 0,
             calls,
             key: type === 'key' ? amount : 0,
@@ -430,6 +433,17 @@ const USAGE_FIELDS = [
         value: (r) => TYPE_LABEL[r.type],
         render: (r) => (_jsx(UsageTip, { r: r, children: _jsx(Badge, { variant: "outline", className: cn('whitespace-nowrap', CHIP_TONE[TYPE_TONE[r.type]]), children: TYPE_LABEL[r.type] }) })),
     },
+    {
+        key: 'category',
+        label: 'Category',
+        icon: LayersIcon,
+        format: 'text',
+        groupable: true,
+        filterable: true,
+        hideOnPhone: true,
+        value: (r) => r.category,
+        render: (r) => (_jsx(UsageTip, { r: r, children: _jsx(Badge, { variant: "outline", className: cn('whitespace-nowrap', CHIP_TONE.muted), children: r.category }) })),
+    },
     {
         key: 'at',
         label: 'Date',
@@ -488,27 +502,42 @@ const USAGE_DOMAIN = {
     formulas: false,
 };
 const USAGE_FILTER = [
+    { key: 'category', label: 'Category', icon: LayersIcon, values: (r) => [r.category] },
     { key: 'type', label: 'Type', icon: KeyRoundIcon, values: (r) => [TYPE_LABEL[r.type]] },
 ];
+const fieldOf = (key) => USAGE_FIELDS.find((f) => f.key === key) ?? null;
 const GROUPS = [
-    { id: 'type', label: 'Type', field: USAGE_FIELDS[1] },
-    { id: 'none', label: 'None', field: null },
     { id: 'date', label: 'Date', field: DAY_FIELD },
+    { id: 'category', label: 'Category', field: fieldOf('category') },
+    { id: 'type', label: 'Type', field: fieldOf('type') },
+    { id: 'none', label: 'None', field: null },
 ];
+/** Rows a page of the table shows; a group's totals still count every row of it. */
+const PAGE_SIZE = 50;
 /**
- * This month's use, one row a session (a chat, or every run of one task on one thing): its Type (the person's API key, their plan sign-in, or
- * the app's credits), Date, Calls and Amount, grouped by Type, Date or not at all, filtered by
- * type or name. A row's hover gives its tokens and cost. A sign-in's amount is an estimate: the
- * same tokens at the model's API rates (the plan charges $0).
+ * This month's use, one row a session (a chat, or every run of one task on one thing): its
+ * Category (Chat, Edit, Rebuild: `UsageEntry.category`), Type (the person's API key, their plan
+ * sign-in, or the app's credits), Date, Calls and Amount, grouped by Date (first), Category, Type or
+ * not at all, filtered by category, type or name, PAGE_SIZE rows a page (a group's totals count all
+ * its rows). A row's hover gives its tokens and cost. A sign-in's amount is an estimate: the same
+ * tokens at the model's API rates (the plan charges $0).
  */
 export function AssistantUsageTable({ client }) {
-    const [group, setGroup] = useState('type');
+    const [group, setGroup] = useState('date');
+    const [page, setPage] = useState(0);
     const q = useAssistantUsage(client);
     const rows = useMemo(() => (q.data ? usageRows(q.data) : []), [q.data]);
     const filter = useLumenFilter(rows, USAGE_FILTER, { text: (r) => [r.title] });
+    const shown = filter.results;
+    // A new filter or grouping starts from the first page; a page past the end shows the last.
+    const rowSet = shown.map((r) => r.id).join('\u0000');
+    // biome-ignore lint/correctness/useExhaustiveDependencies: resets on these changes only
+    useEffect(() => setPage(0), [rowSet, group]);
+    const pages = Math.max(1, Math.ceil(shown.length / PAGE_SIZE));
+    const at = Math.min(page, pages - 1);
     if (!client.usage)
         return null;
     if (!q.data)
         return (_jsx("div", { className: "flex justify-center p-4", children: q.isError ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Usage didn't load. Try again later." })) : (_jsx(Spinner, {})) }));
-    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenTokenizedFilter, { filter: filter, label: "Filter usage", placeholder: "Filter: type, or a session name", className: "min-w-48 flex-1", link: null }), _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: group, "aria-label": "Group by", onValueChange: (v) => v && setGroup(v), children: GROUPS.map((g) => (_jsx(ToggleGroupItem, { value: g.id, "aria-label": `Group by ${g.label}`, children: g.label }, g.id))) })] }), _jsx("div", { className: "min-w-0", children: _jsx(LumenTable, { domain: USAGE_DOMAIN, rows: filter.results, groupBy: GROUPS.find((g) => g.id === group)?.field ?? null, sort: { key: 'at', desc: true }, emptyState: rows.length ? undefined : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing used this month." })), onClearFilter: filter.clear }) }), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Sign-in amounts are estimates: your ", PLAN_NAME, " charges $0, so the amount is what the same tokens would cost at the model's API rates. Key and credit amounts are what was charged."] })] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenTokenizedFilter, { filter: filter, label: "Filter usage", placeholder: "Filter: category, type, or a session name", className: "min-w-48 flex-1", link: null }), _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: group, "aria-label": "Group by", onValueChange: (v) => v && setGroup(v), children: GROUPS.map((g) => (_jsx(ToggleGroupItem, { value: g.id, "aria-label": `Group by ${g.label}`, children: g.label }, g.id))) })] }), _jsxs("div", { className: "min-w-0", children: [_jsx(LumenTable, { domain: USAGE_DOMAIN, rows: shown, groupBy: GROUPS.find((g) => g.id === group)?.field ?? null, page: { index: at, size: PAGE_SIZE }, sort: { key: 'at', desc: true }, emptyState: rows.length ? undefined : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing used this month." })), onClearFilter: filter.clear }), pages > 1 && (_jsx(LumenPageFooter, { total: shown.length, page: at, size: PAGE_SIZE, onPage: setPage }))] }), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Sign-in amounts are estimates: your ", PLAN_NAME, " charges $0, so the amount is what the same tokens would cost at the model's API rates. Key and credit amounts are what was charged."] })] }));
 }

package/dist/lumen-view.d.ts

@@ -213,7 +213,8 @@ export interface LumenTableProps<T> {
     rows: T[];
     groupBy?: ViewField<T> | null;
     chips?: ViewChip[];
-    /** The page a flat table shows; null shows every row. */
+    /** The page a table shows; null shows every row. A grouped table pages its rows in group order:
+     *  a group with rows on the page shows its row there, its count and totals over all its rows. */
     page?: {
         index: number;
         size: number;

package/dist/lumen-view.js

@@ -761,6 +761,13 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
         }
         return [...m];
     }, [groupBy, sorted, serverGroups]);
+    // A grouped table's page (`page`): the rows on it, in group order; every group keeps its totals.
+    const paged = useMemo(() => {
+        if (!groups || !page || serverGroups)
+            return null;
+        const start = page.index * page.size;
+        return new Set(groups.flatMap(([, ms]) => ms).slice(start, start + page.size));
+    }, [groups, page, serverGroups]);
     const span = shown.length + (selection ? 1 : 0) + (add ? 1 : 0);
     const served = new Map((serverGroups?.list ?? []).map((g) => [g.key, g]));
     const startsOpen = (i) => rows.length <= OPEN_ALL || i === 0;
@@ -959,6 +966,9 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                                 (!serverGroups || serverGroups.onToggleAll) && (_jsx(IconButton, { icon: anyClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: anyClosed ? 'Expand all groups' : 'Collapse all groups', onClick: () => setAll(anyClosed) })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", className: cn('font-medium', !(i === 0 && groups) && '-mx-2'), style: { color: colorOf(domain, shown[i]) ?? undefined }, onClick: h.column.getCanSort() ? h.column.getToggleSortingHandler() : undefined, children: [shown[i] ? _jsx(FreshnessMark, { domain: domain, field: shown[i] }) : null, flexRender(h.column.columnDef.header, h.getContext()), _jsx(SortIcon, { dir: h.column.getIsSorted() })] }) }), shown[i] && (domain.groups?.length || freshnessOf(domain, shown[i])) ? (_jsxs(TooltipContent, { children: [domain.groups?.length ? _jsx("div", { children: pathOf(domain, shown[i]) }) : null, freshnessLine(domain, shown[i]) ? (_jsx("div", { children: freshnessLine(domain, shown[i]) })) : null] })) : null] }), resizing && shown[i] && (_jsx(ColumnResizer, { label: shown[i].label, width: widthOf(shown[i]), onWidth: (w) => colWidths.set(h.id, w), onDone: (w) => colWidths.save(h.id, w), onReset: () => colWidths.reset(h.id) }))] }, h.id))), add && (_jsx(TableHead, { className: cn('w-8 pl-1', PINNED_HEAD), children: _jsx(AddColumnMenu, { add: add, fieldOpen: fieldOpen, onFieldOpen: setFieldOpen }) }))] }, hg.id))) }), _jsxs(TableBody, { children: [!rows.length && !serverGroups?.list?.length && (_jsx(TableRow, { "data-slot": "table-empty", className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center whitespace-normal text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [emptyState ?? 'No rows match.', onClearFilter && (_jsxs(Button, { variant: "outline", size: "sm", onClick: onClearFilter, children: [_jsx(FilterXIcon, {}), "Clear filters"] }))] }) }) })), groups && groupBy
                                     ? groups.map(([key, members], gi) => {
                                         const open = isOpen(key, gi);
+                                        const here = paged ? members.filter((m) => paged.has(m)) : members;
+                                        if (!here.length)
+                                            return null;
                                         return (_jsxs(Fragment, { children: [_jsxs(TableRow, { className: ROLLUP, "data-group": key, "data-rollup": "", children: [selection && (_jsx(TableCell, { "data-card": "select", className: cn('w-8 pr-0', PINNED_GROUP), children: _jsx(Checkbox, { checked: members.every((m) => selection.keys.has(keyOf(m.original)))
                                                                     ? true
                                                                     : members.some((m) => selection.keys.has(keyOf(m.original)))
@@ -972,7 +982,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                                                             }), children: [_jsx(ChevronRightIcon, { className: cn('transition-transform', open && 'rotate-90') }), _jsx(GroupMark, { field: groupBy, value: key }), _jsx("span", { className: "truncate", children: key }), _jsx(GroupCount, { children: serverGroups
                                                                                     ? (served.get(key)?.n?.toLocaleString() ?? '')
                                                                                     : members.length })] }), groupActions?.(key, members.map((m) => m.original))] }) }, f.key)) : (_jsx(TableCell, { ...col(f, PINNED_GROUP), children: !serverGroups &&
-                                                                rollCell(f, members.map((m) => m.original), 'group') }, f.key))), add && _jsx(TableCell, { className: PINNED_GROUP })] }), open && (serverGroups ? servedRows(members, key) : drawn(members, key))] }, key));
+                                                                rollCell(f, members.map((m) => m.original), 'group') }, f.key))), add && _jsx(TableCell, { className: PINNED_GROUP })] }), open && (serverGroups ? servedRows(members, key) : drawn(here, key))] }, key));
                                     })
                                     : drawn(sorted, ''), serverGroups?.more && !serverGroups.pages && (_jsx(TableRow, { "data-more": true, children: _jsx(TableCell, { colSpan: span, className: "py-1", children: _jsxs(Button, { variant: "ghost", size: "xs", onClick: serverGroups.more, children: [_jsx(ChevronsDownIcon, {}), "More groups"] }) }) })), hasTotal && rows.length > 0 && (_jsxs(TableRow, { className: cn(ROLLUP, 'border-t-2'), "data-total": true, "data-rollup": "", children: [selection && _jsx(TableCell, {}), rollCells(rows).map((cell, i) => i === 0 && !(shown[0] && rollsUp(shown[0])) ? (_jsx(TableCell, { "data-card": "lead", children: "Total" }, "total")) : (cell)), add && _jsx(TableCell, {})] }))] })] }) })] }));
 }

package/package.json

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