@columenlabs/lumen-ui 0.1.300 → 0.1.301

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/package.json

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