@columenlabs/lumen-ui 0.1.309 → 0.1.311

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

@@ -110,7 +110,7 @@ export declare const allowanceAmount: (u: AllowanceUnit, n: number) => string;
  * 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, }: {
+export declare function WorkCard({ view, live, state, actions, onStop, steps, open: shownAt, rows, children, }: {
     view: AssistantTaskView;
     live?: boolean;
     /** The task's own state, for `data-state`. */
@@ -121,6 +121,8 @@ export declare function WorkCard({ view, live, state, actions, onStop, steps, op
     steps?: number;
     /** Starts open; by default it is open while the work runs. */
     open?: boolean;
+    /** `children` are rows with their own padding and lines (a task's steps), drawn edge to edge. */
+    rows?: boolean;
     children?: ReactNode;
 }): import("react").JSX.Element;
 /**
@@ -153,7 +155,13 @@ 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, voice, }: {
+export declare function LumenComposer({ name, busy, queued, queue, canSteer, onSteerQueued, onUnqueue, disabled, commands, tiers, sources, page, images: canAttach, modes, onSend, onStop, meter, voice, queueShown, editQueued, }: {
+    /** The queue is drawn under the running task's card instead of above the box. */
+    queueShown?: boolean;
+    /** Gets this box's Edit, so a queued message shown elsewhere comes back here to edit. */
+    editQueued?: {
+        current: ((id: string) => void) | null;
+    };
     /** 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. */

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, stepLineParts, stepLineText, } from '@columenlabs/lumen-ui-types/assistant';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-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 { ArrowUpIcon, CheckCheckIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CircleAlertIcon, CircleCheckIcon, CircleHelpIcon, CircleXIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, GlobeIcon, HandIcon, LightbulbIcon, ListPlusIcon, LoaderCircleIcon, MessageSquareTextIcon, 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';
@@ -52,6 +52,10 @@ const seconds = (ms) => !ms ? '' : ms < 1000 ? `${ms} ms` : `${(ms / 1000).toFix
 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;
+    // While the chat ends in an open task, its waiting messages sit under its card, not above the box.
+    const tail = chat.items[chat.items.length - 1];
+    const queueUnder = tail?.kind === 'task' && (taskState?.(tail) ?? tail.state) === 'open' && chat.queue.length > 0;
+    const editQueued = useRef(null);
     const qc = useQueryClient();
     const status = useAssistantStatus(client);
     const [allScopes, setAllScopes] = useAllScopes(client.key);
@@ -195,7 +199,15 @@ 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, 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 }) })] }));
+                        })) ?? (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(TaskAnswer.Provider, { value: s?.wait ? null : (text) => chat.send(text, extra()), children: _jsx(TaskQueue.Provider, { value: queueUnder
+                                        ? {
+                                            queue: chat.queue,
+                                            canSteer: chat.busy && chat.canSteer,
+                                            onSteer: chat.steerQueued,
+                                            onEdit: (id) => editQueued.current?.(id),
+                                            onRemove: (id) => void chat.unqueue(id),
+                                        }
+                                        : null, 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, queueShown: queueUnder, editQueued: editQueued, 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 }) })] }));
 }
 /** How near the end of the chat (px) still counts as at the end, so it keeps following. */
 const FOLLOW_PX = 48;
@@ -239,7 +251,8 @@ function Messages({ chat, status, onSettings, onRetry, onFresh, onAnswer, }) {
                                     : '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);
+                    // A task's question shows its answers in its card (its Follow-up step).
+                    const c = chat.items[chat.items.length - 1]?.kind === 'task' ? null : 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 })] }));
 }
@@ -571,6 +584,10 @@ function HandOff({ item, onSettle, busy, }) {
 }
 /** The app's parts of a task's card (`taskActions`, `taskState`, `taskView`) and the chat's Stop. */
 const TaskSlots = createContext({});
+/** Sends a quick reply or an answer in the person's words (null while the chat cannot take one). */
+const TaskAnswer = createContext(null);
+/** Messages waiting for the running task, drawn under its card: Steer now, Edit, Remove. */
+const TaskQueue = createContext(null);
 /** The words a card says without the app's own view. */
 const TASK_STATE = {
     open: 'Open',
@@ -625,22 +642,138 @@ function cardAt(items) {
  * 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, }) {
+export function WorkCard({ view, live = false, state, actions, onStop, steps = 0, open: shownAt, rows = false, 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 })] }));
+    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-clip 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", { "data-slot": "chat-task-head", className: "sticky -top-3 z-10 flex min-w-0 items-center gap-2.5 rounded-t-lg bg-card 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: cn('border-t', !rows && 'px-3 py-2'), children: children })] }));
+}
+/** A line of the assistant's words as a row's title: its first sentence, without Markdown marks. */
+function firstLine(text) {
+    const plain = text
+        .replace(/```[\s\S]*?```/g, ' ')
+        .replace(/[*_`#>[\]]|\(https?:[^)]*\)/g, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+    const m = plain.match(/^(.{12,}?[.!?:])(\s|$)/);
+    return m?.[1] ?? plain;
+}
+/** A step that only looked something up: several in a row fold into one line. */
+const lookup = (i) => i.kind === 'step' && i.ok !== false && !i.write && !i.choices && !i.live && !i.image;
+/**
+ * A task's items as the rows of its card. Each turn's words are a step of their own: before its
+ * tools they are its Plan, after them its Result, and the last words of a turn that asks are the
+ * Follow-up, holding the question's answers. Lookups in a row fold into one line; the person's
+ * later messages (answers, steering) are rows too.
+ */
+function taskRows(items, answerable) {
+    const rows = [];
+    let looked = [];
+    let turnHasTools = false;
+    let turnStart = 0;
+    const flush = () => {
+        if (looked.length === 1)
+            rows.push({ key: `l${rows.length}`, kind: 'line', item: looked[0] });
+        else if (looked.length)
+            rows.push({ key: `k${rows.length}`, kind: 'lookups', steps: looked });
+        looked = [];
+    };
+    items.forEach((it, n) => {
+        if (it.kind === 'user') {
+            flush();
+            turnHasTools = false;
+            turnStart = rows.length + 1;
+            rows.push({ key: `u${n}`, kind: 'you', text: it.text, steered: !!it.steered });
+            return;
+        }
+        if (it.kind === 'step' && it.choices)
+            return;
+        if (lookup(it)) {
+            looked.push(it);
+            turnHasTools = true;
+            return;
+        }
+        flush();
+        if (it.kind === 'text') {
+            if (!it.text.trim())
+                return;
+            const later = items.slice(n + 1);
+            const toolsAfter = later.findIndex((x) => x.kind === 'user');
+            const rest = toolsAfter < 0 ? later : later.slice(0, toolsAfter);
+            const tag = rest.some((x) => x.kind === 'step' && !x.choices)
+                ? 'Plan'
+                : turnHasTools || rows.slice(turnStart).some((r) => r.kind !== 'words')
+                    ? 'Result'
+                    : 'Reply';
+            rows.push({ key: `t${n}`, kind: 'words', tag, text: it.text });
+            return;
+        }
+        if (it.kind === 'step' || it.kind === 'draft')
+            turnHasTools = true;
+        rows.push({ key: `i${n}`, kind: 'line', item: it });
+    });
+    flush();
+    // The last words of the chat, while its question waits: the Follow-up, with its answers.
+    if (answerable) {
+        const last = rows.findLastIndex((r) => r.kind === 'words');
+        const r = rows[last];
+        if (r?.kind === 'words' && last >= rows.findLastIndex((x) => x.kind === 'you'))
+            rows[last] = { ...r, tag: 'Follow-up', choices: answerable };
+    }
+    return rows;
+}
+const ROW_ICON = {
+    line: WrenchIcon,
+    lookups: SearchIcon,
+    words: LightbulbIcon,
+    you: CornerDownRightIcon,
+    Plan: LightbulbIcon,
+    Result: CircleCheckIcon,
+    'Follow-up': CircleHelpIcon,
+    Reply: MessageSquareTextIcon,
+};
+/** The person's answer in their own words, under a Follow-up's quick replies. */
+function OwnAnswer({ onSend }) {
+    const [text, setText] = useState('');
+    const send = () => {
+        if (!text.trim())
+            return;
+        onSend(text.trim());
+        setText('');
+    };
+    return (_jsxs("form", { className: "flex min-w-0 items-center gap-1 rounded-lg border bg-card py-1 pr-1 pl-2.5", onSubmit: (e) => {
+            e.preventDefault();
+            send();
+        }, children: [_jsx("input", { value: text, onChange: (e) => setText(e.target.value), placeholder: "Something else\u2026", "aria-label": "Answer in your own words", className: "min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground" }), _jsx(IconButton, { icon: ArrowUpIcon, label: "Send", size: "icon-xs", type: "submit", disabled: !text.trim() })] }));
+}
+/** One row of a task's card: a line that opens to its whole text (one open at a time). */
+function TaskRowView({ row, open, onToggle, onSettle, busy, }) {
+    const answer = useContext(TaskAnswer);
+    if (row.kind === 'line')
+        return (_jsx("div", { className: "border-t px-3 py-1.5 first:border-t-0", children: _jsx(Item, { item: row.item, onSettle: onSettle, busy: busy }) }));
+    const tag = row.kind === 'words' ? row.tag : row.kind === 'you' ? (row.steered ? 'Steer' : 'You') : null;
+    const Icon = ROW_ICON[row.kind === 'words' ? row.tag : row.kind];
+    const now = row.kind === 'words' && row.tag === 'Follow-up';
+    const title = row.kind === 'lookups'
+        ? row.steps.map((x) => x.title).join(' · ')
+        : row.kind === 'words'
+            ? firstLine(row.text)
+            : row.text;
+    return (_jsxs("div", { "data-slot": "chat-task-row", "data-open": open || undefined, className: "border-t first:border-t-0", children: [_jsxs("button", { type: "button", "aria-expanded": open, onClick: onToggle, className: cn('flex w-full min-w-0 items-center gap-2 px-3 py-1.5 text-left text-sm hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', now && 'bg-primary/5'), children: [_jsx(Icon, { className: cn('size-3.5 shrink-0', now ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": true }), tag && (_jsx("span", { className: cn('shrink-0 text-xs uppercase tracking-wide', now ? 'text-primary' : 'text-muted-foreground'), children: tag })), _jsx("span", { className: cn('min-w-0 flex-1 truncate', !open && !now && 'text-muted-foreground'), title: title, children: title }), row.kind === 'lookups' && (_jsx("span", { className: "shrink-0 text-muted-foreground text-xs tabular-nums", children: row.steps.length })), open ? (_jsx(ChevronDownIcon, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true })) : (_jsx(ChevronRightIcon, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }))] }), open && (_jsxs("div", { className: "flex min-w-0 flex-col gap-2 px-3 pt-0.5 pb-2.5", children: [row.kind === 'lookups' ? (_jsx(Items, { items: row.steps, onSettle: onSettle, busy: busy })) : row.kind === 'words' ? (_jsx(Item, { item: { kind: 'text', text: row.text }, onSettle: onSettle, busy: busy })) : (_jsx("p", { className: "text-sm whitespace-pre-wrap [overflow-wrap:anywhere]", children: row.text })), row.kind === 'words' && row.choices && answer && (_jsxs(_Fragment, { children: [_jsx(QuickReplies, { choices: row.choices, onSend: answer }, row.key), _jsx(OwnAnswer, { onSend: answer })] }))] }))] }));
 }
 /**
  * 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.
+ * and a chevron that folds its steps. The person's first message sits above it; everything after,
+ * the assistant's words included, is a step inside it (`taskRows`). Only the newest step is open:
+ * when the next one starts the one before folds, and any step opens again with a tap. Messages
+ * queued while it runs wait under it (`TaskQueue`).
  */
 function TaskBlock({ item, onSettle, busy, }) {
     const slots = useContext(TaskSlots);
+    const answer = useContext(TaskAnswer);
+    const queue = useContext(TaskQueue);
     const state = slots.state?.(item) ?? item.state;
     const items = item.items;
     const live = items.some(isLive);
@@ -649,11 +782,19 @@ function TaskBlock({ item, onSettle, busy, }) {
         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 })] }));
+    const first = items.findIndex((i) => i.kind === 'user');
+    const head = items.slice(0, first + 1);
+    const inner = items.slice(first + 1);
+    const answerable = answer && !busy ? lastChoices(items) : null;
+    const rows = taskRows(inner, answerable);
+    // The newest row is open unless the person picked another since the rows last changed.
+    const [picked, setPicked] = useState(null);
+    const newest = rows.length - 1;
+    const auto = rows[newest]?.kind === 'line' ? null : newest;
+    const open = picked && picked.at === rows.length ? picked.open : auto;
+    const failed = inner.some((x) => x.kind === 'step' && (!x.ok || x.write?.status === 'failed'));
+    const card = (_jsx(WorkCard, { view: view, live: live, state: state, actions: slots.actions?.(item, live), onStop: live ? slots.stop : undefined, steps: rows.length, open: failed || !!answerable || state === 'open', rows: true, children: rows.map((r, n) => (_jsx(TaskRowView, { row: r, open: open === n, onToggle: () => setPicked({ at: rows.length, open: open === n ? null : n }), onSettle: onSettle, busy: busy }, r.key))) }));
+    return (_jsxs("div", { "data-slot": "chat-task-turns", className: "flex min-w-0 flex-col gap-3", children: [head.length > 0 && _jsx(Items, { items: head, onSettle: onSettle, busy: busy }), card, queue && state === 'open' && queue.queue.length > 0 && (_jsx(ComposerQueue, { queue: queue.queue, canSteer: queue.canSteer, onSteer: queue.onSteer, onEdit: queue.onEdit, onRemove: queue.onRemove }))] }));
 }
 /** The quick replies the last turn offers (`StepItem.choices`), unless the person answered since. */
 function lastChoices(items) {
@@ -767,7 +908,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, voice = true, }) {
+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, queueShown = false, editQueued, }) {
     const [text, setText] = useState('');
     const [caret, setCaret] = useState(0);
     const [closed, setClosed] = useState(null);
@@ -905,7 +1046,9 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
             setUse(q.extra.use);
         requestAnimationFrame(() => box.current?.focus());
     };
-    const waiting = queue ?? (queued ? [{ id: 'queued', message: queued }] : []);
+    if (editQueued)
+        editQueued.current = onUnqueue ? edit : null;
+    const waiting = queueShown ? [] : (queue ?? (queued ? [{ id: 'queued', message: queued }] : []));
     const pickCommand = (o) => {
         const c = commands.find((x) => x.name === o.value);
         if (!c)

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { DetailsTable, type DetailsTableProps, FactsTable } from './details-tabl
 export { DrawerSection, type DrawerSectionProps } from './drawer-section.js';
 export { type DrawerAction, LumenDrawer, type LumenDrawerProps } from './lumen-drawer.js';
 export { LumenBottomSheet, type LumenBottomSheetProps, type SheetSnap } from './lumen-bottom-sheet.js';
+export { type FloatingRect, LumenFloatingPanel, type LumenFloatingPanelProps, } from './lumen-floating-panel.js';
 export { LumenCode, type LumenCodeProps, langOfPath } from './lumen-code.js';
 export { LumenCodeEditor, type LumenCodeEditorProps, type LumenCodeLang, } from './lumen-code-editor.js';
 export { RenameField, type RenameFieldProps } from './rename-field.js';

package/dist/index.js

@@ -48,6 +48,7 @@ export { DetailsTable, FactsTable } from './details-table.js';
 export { DrawerSection } from './drawer-section.js';
 export { LumenDrawer } from './lumen-drawer.js';
 export { LumenBottomSheet } from './lumen-bottom-sheet.js';
+export { LumenFloatingPanel, } from './lumen-floating-panel.js';
 export { LumenCode, langOfPath } from './lumen-code.js';
 export { LumenCodeEditor, } from './lumen-code-editor.js';
 export { RenameField } from './rename-field.js';

package/dist/lumen-bottom-sheet.d.ts

@@ -13,6 +13,11 @@ export interface LumenBottomSheetProps {
     onSnap: (snap: SheetSnap) => void;
     /** Its name for screen readers. */
     title: string;
+    /**
+     * Its top row (tabs, a title): shown at every snap, and part of the drag area with the grab bar,
+     * so a drag that starts anywhere on it moves the sheet. Taps on its buttons still reach them.
+     */
+    header?: React.ReactNode;
     /** What it holds. It stays mounted at every snap, so running work inside keeps going. */
     children: React.ReactNode;
     className?: string;
@@ -22,4 +27,4 @@ export interface LumenBottomSheetProps {
  * drags above it reach the page. The person drags its handle between `snaps` (peek, half, full);
  * it never closes, so what it holds is never unmounted. Built on vaul's snap points.
  */
-export declare function LumenBottomSheet({ snaps, snap, onSnap, title, children, className, }: LumenBottomSheetProps): React.JSX.Element;
+export declare function LumenBottomSheet({ snaps, snap, onSnap, title, header, children, className, }: LumenBottomSheetProps): React.JSX.Element;

package/dist/lumen-bottom-sheet.js

@@ -46,7 +46,7 @@ function useScreenHeight() {
  * drags above it reach the page. The person drags its handle between `snaps` (peek, half, full);
  * it never closes, so what it holds is never unmounted. Built on vaul's snap points.
  */
-export function LumenBottomSheet({ snaps, snap, onSnap, title, children, className, }) {
+export function LumenBottomSheet({ snaps, snap, onSnap, title, header, children, className, }) {
     const h = useScreenHeight();
     const inset = useSafeBottom();
     // A px snap rests above the home bar: vaul gets it with the bar's height added.
@@ -63,7 +63,10 @@ export function LumenBottomSheet({ snaps, snap, onSnap, title, children, classNa
     const [typing, setTyping] = React.useState(false);
     const lifted = typing && kb ? Math.min(rested, kb.height) : undefined;
     const shown = lifted ?? rested;
-    return (_jsx(Drawer.Root, { open: true, modal: false, dismissible: false, handleOnly: true, snapPoints: rests, activeSnapPoint: rests[at] ?? rest(snap), setActiveSnapPoint: (s) => {
+    return (_jsx(Drawer.Root, { open: true, modal: false, dismissible: false, 
+        // The grab bar and the header drag it; the body is marked no-drag, so its lists and chat
+        // scroll and never move the sheet. (Only the 4px bar used to drag, so most swipes missed.)
+        snapPoints: rests, activeSnapPoint: rests[at] ?? rest(snap), setActiveSnapPoint: (s) => {
             const i = s == null ? -1 : rests.indexOf(s);
             const next = snaps[i];
             if (next !== undefined)
@@ -75,5 +78,5 @@ export function LumenBottomSheet({ snaps, snap, onSnap, title, children, classNa
                             setTyping(false);
                     }, "data-lifted": lifted === undefined ? undefined : '', style: lifted === undefined || !kb
                         ? undefined
-                        : { top: kb.top + kb.height - lifted, bottom: 'auto', height: lifted }, className: cn('fixed inset-x-0 bottom-0 z-40 flex h-dvh flex-col rounded-t-2xl border-t bg-popover text-popover-foreground shadow-[0_-4px_16px_rgb(0_0_0/0.15)] outline-none', className), children: [_jsx(Drawer.Title, { className: "sr-only", children: title }), _jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden", style: { height: shown }, children: [_jsx(Drawer.Handle, { "aria-label": "Drag to resize", className: "mx-auto! my-2! h-1! w-9! shrink-0 rounded-full! bg-border! opacity-100!" }), _jsx("div", { className: cn('flex min-h-0 flex-1 flex-col', lifted === undefined && 'pb-[env(safe-area-inset-bottom)]'), children: children })] })] }) }) }) }));
+                        : { top: kb.top + kb.height - lifted, bottom: 'auto', height: lifted }, className: cn('fixed inset-x-0 bottom-0 z-40 flex h-dvh flex-col rounded-t-2xl border-t bg-popover text-popover-foreground shadow-[0_-4px_16px_rgb(0_0_0/0.15)] outline-none', className), children: [_jsx(Drawer.Title, { className: "sr-only", children: title }), _jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden", style: { height: shown }, children: [_jsx("div", { className: "flex h-5 shrink-0 items-center justify-center", children: _jsx(Drawer.Handle, { "aria-label": "Drag to resize", className: "m-0! h-1! w-9! shrink-0 rounded-full! bg-border! opacity-100!" }) }), header !== undefined && _jsx("div", { className: "shrink-0", children: header }), _jsx("div", { "data-vaul-no-drag": "", className: cn('flex min-h-0 flex-1 flex-col', lifted === undefined && 'pb-[env(safe-area-inset-bottom)]'), children: children })] })] }) }) }) }));
 }

package/dist/lumen-floating-panel.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+/** Where the panel sits in its box, and how big it is, px. */
+export interface FloatingRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface LumenFloatingPanelProps {
+    /** Its name for screen readers, and the fold button's tooltip. */
+    title: string;
+    /** Its top row (tabs, a title), between the grip and the fold button. Shown folded too. */
+    header?: React.ReactNode;
+    /** What it holds. It stays mounted while folded, so running work inside keeps going. */
+    children: React.ReactNode;
+    /** Where it starts on a device that has not moved it yet. */
+    defaultRect?: Partial<FloatingRect>;
+    /** Kept on this device under this key: where the person left it, its size and whether it is folded. */
+    storageKey?: string;
+    /** Folded to its header, controlled (left out, it keeps its own and the device remembers it). */
+    folded?: boolean;
+    onFold?: (folded: boolean) => void;
+    minWidth?: number;
+    minHeight?: number;
+    className?: string;
+}
+/**
+ * A see-through panel that floats over a live page (a 3D view, a map) inside its parent: the person
+ * drags it by its grip, resizes it from its edges and corner, and folds it to its header. Its box is
+ * the parent (which must be `relative`), and it is kept inside it when the box changes size (a phone
+ * turning). Taps outside it reach the page. Built on react-rnd.
+ */
+export declare function LumenFloatingPanel({ title, header, children, defaultRect, storageKey, folded: foldedProp, onFold, minWidth, minHeight, className, }: LumenFloatingPanelProps): React.JSX.Element;

package/dist/lumen-floating-panel.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from 'lucide-react';
+import * as React from 'react';
+import { Rnd } from 'react-rnd';
+import { cn } from './lib/utils.js';
+import { Button } from './ui/button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+const DEFAULT = { x: 12, y: 12, width: 330, height: 300 };
+function load(key) {
+    if (!key)
+        return {};
+    try {
+        return JSON.parse(localStorage.getItem(key) ?? '{}') ?? {};
+    }
+    catch {
+        return {};
+    }
+}
+/**
+ * A see-through panel that floats over a live page (a 3D view, a map) inside its parent: the person
+ * drags it by its grip, resizes it from its edges and corner, and folds it to its header. Its box is
+ * the parent (which must be `relative`), and it is kept inside it when the box changes size (a phone
+ * turning). Taps outside it reach the page. Built on react-rnd.
+ */
+export function LumenFloatingPanel({ title, header, children, defaultRect, storageKey, folded: foldedProp, onFold, minWidth = 240, minHeight = 160, className, }) {
+    const saved = React.useMemo(() => load(storageKey), [storageKey]);
+    const [rect, setRect] = React.useState(saved.rect ?? { ...DEFAULT, ...defaultRect });
+    const [foldedOwn, setFoldedOwn] = React.useState(!!saved.folded);
+    const folded = foldedProp ?? foldedOwn;
+    const setFolded = (f) => {
+        setFoldedOwn(f);
+        onFold?.(f);
+    };
+    const box = React.useRef(null);
+    const [room, setRoom] = React.useState(null);
+    React.useLayoutEffect(() => {
+        const el = box.current;
+        if (!el)
+            return;
+        const read = () => setRoom({ w: el.clientWidth, h: el.clientHeight });
+        read();
+        const seen = new ResizeObserver(read);
+        seen.observe(el);
+        return () => seen.disconnect();
+    }, []);
+    React.useEffect(() => {
+        if (!storageKey)
+            return;
+        try {
+            localStorage.setItem(storageKey, JSON.stringify({ rect, folded }));
+        }
+        catch { }
+    }, [storageKey, rect, folded]);
+    // Inside the box whatever its size now: smaller than the box, and moved back in if it hangs out.
+    const fit = (r) => {
+        if (!room)
+            return r;
+        const width = Math.max(Math.min(minWidth, room.w), Math.min(r.width, room.w));
+        const height = Math.max(Math.min(minHeight, room.h), Math.min(r.height, room.h));
+        return {
+            width,
+            height,
+            x: Math.max(0, Math.min(r.x, room.w - width)),
+            y: Math.max(0, Math.min(r.y, room.h - height)),
+        };
+    };
+    const shown = fit(rect);
+    return (_jsx("div", { ref: box, className: "pointer-events-none absolute inset-0 z-20", children: room && (_jsx(Rnd, { bounds: "parent", position: { x: shown.x, y: shown.y }, size: { width: shown.width, height: folded ? 'auto' : shown.height }, minWidth: minWidth, minHeight: folded ? undefined : minHeight, dragHandleClassName: "lumen-float-grip", enableResizing: folded
+                ? false
+                : { right: true, bottom: true, bottomRight: true, left: true, bottomLeft: true }, 
+            // A finger needs a fuller edge than a mouse: 12px edges, a 24px corner.
+            resizeHandleStyles: {
+                right: { width: 12, right: -6 },
+                left: { width: 12, left: -6 },
+                bottom: { height: 12, bottom: -6 },
+                bottomRight: { width: 24, height: 24, right: -6, bottom: -6 },
+                bottomLeft: { width: 24, height: 24, left: -6, bottom: -6 },
+            }, onDragStop: (_e, d) => setRect((r) => ({ ...r, x: d.x, y: d.y })), onResizeStop: (_e, _dir, el, _delta, pos) => setRect({ x: pos.x, y: pos.y, width: el.offsetWidth, height: el.offsetHeight }), className: "pointer-events-auto", children: _jsxs("section", { "data-slot": "lumen-floating-panel", "aria-label": title, className: cn('flex h-full flex-col overflow-hidden rounded-xl border bg-popover/85 text-popover-foreground shadow-lg backdrop-blur-md', className), children: [_jsxs("div", { className: "flex shrink-0 items-center gap-0.5 border-b pr-1", children: [_jsx("span", { className: "lumen-float-grip flex h-11 w-8 shrink-0 cursor-grab touch-none items-center justify-center text-muted-foreground active:cursor-grabbing", "aria-hidden": true, children: _jsx(GripVerticalIcon, { className: "size-4" }) }), _jsx("div", { className: "min-w-0 flex-1", children: header }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": folded ? `Open ${title}` : `Fold ${title}`, "aria-expanded": !folded, onClick: () => setFolded(!folded), children: folded ? _jsx(ChevronDownIcon, {}) : _jsx(ChevronUpIcon, {}) }) }), _jsx(TooltipContent, { children: folded ? `Open ${title}` : `Fold ${title}` })] })] }), _jsx("div", { className: cn('flex min-h-0 flex-1 flex-col', folded && 'hidden'), children: children })] }) })) }));
+}

package/dist/lumen-tabs.d.ts

@@ -12,10 +12,16 @@ export interface LumenTab<V extends string = string> {
     /** Left out of the row (a tab this page does not have). */
     hidden?: boolean;
 }
-export declare function LumenTabs<V extends string>({ tabs, value, onChange, actions, }: {
+export declare function LumenTabs<V extends string>({ tabs, value, onChange, actions, variant, }: {
     tabs: LumenTab<V>[];
     value: V | undefined;
     onChange: (value: V) => void;
     /** What only the open tab uses, at the row's right end. */
     actions?: ReactNode;
+    /**
+     * `row` (default): icon and name side by side, the rest in More. `stacked`: a phone panel's bar,
+     * the tabs sharing the row evenly, each its icon over a short name. `icons`: icons only, each
+     * named in its tooltip, for a small floating panel.
+     */
+    variant?: 'row' | 'stacked' | 'icons';
 }): import("react").JSX.Element;

package/dist/lumen-tabs.js

@@ -10,12 +10,26 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { cn } from './lib/utils.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
 import { Tabs, TabsList, TabsTrigger } from './ui/tabs.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
 /** The row's gap between tabs (`gap-6` in TabsList). */
 const GAP = 24;
 /** The More button, drawn like a tab. */
 const MORE = 'relative inline-flex shrink-0 items-center gap-1.5 pb-2 text-sm leading-4 font-medium whitespace-nowrap outline-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground focus-visible:rounded-sm focus-visible:ring-3 focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0';
-export function LumenTabs({ tabs, value, onChange, actions, }) {
+export function LumenTabs({ tabs, value, onChange, actions, variant = 'row', }) {
     const shown = tabs.filter((t) => !t.hidden);
+    if (variant !== 'row')
+        return (_jsx(EvenTabs, { tabs: shown, value: value, onChange: onChange, actions: actions, icons: variant === 'icons' }));
+    return _jsx(RowTabs, { tabs: shown, value: value, onChange: onChange, actions: actions });
+}
+/** A bar of tabs that share the row evenly: icon over name, or icons alone with a tooltip. */
+function EvenTabs({ tabs, value, onChange, actions, icons, }) {
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(Tabs, { value: value, onValueChange: (v) => onChange(v), className: "min-w-0 flex-1", children: _jsx(TabsList, { className: "w-full gap-0", children: tabs.map((t) => {
+                        const name = typeof t.label === 'string' ? t.label : undefined;
+                        const trigger = (_jsxs(TabsTrigger, { value: t.value, "aria-label": icons ? name : undefined, className: cn('relative min-h-11 min-w-0 flex-1 justify-center py-1 after:inset-x-3', !icons && 'flex-col gap-0.5 text-xs leading-3 [&_svg]:size-5'), children: [_jsx(t.icon, {}), !icons && _jsx("span", { className: "max-w-full truncate", children: t.label }), t.after && (_jsx("span", { className: cn('text-xs', !icons ? 'absolute top-0.5 left-1/2 ml-2' : ''), children: t.after }))] }, t.value));
+                        return icons ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: trigger }), _jsx(TooltipContent, { children: t.label })] }, t.value)) : (trigger);
+                    }) }) }), actions] }));
+}
+function RowTabs({ tabs: shown, value, onChange, actions, }) {
     const box = useRef(null);
     const ruler = useRef(null);
     // How many tabs fit before the More menu; all of them until measured.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.309",
+  "version": "0.1.311",
   "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.309",
+    "@columenlabs/lumen-ui-types": "0.1.311",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -75,6 +75,7 @@
     "react-intersection-observer": "9.16.0",
     "react-markdown": "10.1.0",
     "react-resizable-panels": "^4.14.3",
+    "react-rnd": "10.5.3",
     "react-zoom-pan-pinch": "4.2.0",
     "recharts": "^3.10.1",
     "remark-gfm": "4.0.1",