@columenlabs/lumen-ui 0.1.310 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.310",
+  "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.310",
+    "@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",