@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/chat-sheet.js

@@ -2,32 +2,33 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /*
  * The Ask Ciridae sheet: the agent's conversation about the page the user is on, as a chat.
  * Docked, it is an aside beside the page inside `AppShell`; as a drawer, it is the lib's sheet
- * over the page. The host owns the chat client, which conversation is open, the lines the
- * page adds to the thread and what a mention does on the page; the sheet owns the thread, the
- * composer, the files waiting to go with a message and the in-flight states. Files dropped
- * on the conversation, pasted into it or picked with the paperclip upload as they arrive.
- * `ChatConversation` is the same thread and composer without the sheet, such as for a full page.
+ * over the page. The host owns the conversation's `source` (the lib's chat client through
+ * `useChatClientSource`, or the app's own hooks), the lines the page adds to the thread and what
+ * a mention does on the page; the sheet owns the thread, the composer, the files waiting to go
+ * with a message and the in-flight states. Files dropped on the conversation, pasted
+ * into it or picked with the paperclip upload as they arrive. `ChatConversation` is the same
+ * thread and composer without the sheet, such as for a full page.
  *
  * `variant="agent"`, the default, is one long-running thread with the main agent: the tasks it
  * runs post cards into the thread under day labels, and a line over the thread sums up what it
  * is working on and what waits on the user. `variant="conversations"` is a chat per question.
  */
 import { ArrowsOutSimpleIcon, ArrowSquareOutIcon, PaperclipIcon, SidebarSimpleIcon, SparkleIcon, XIcon, } from "@phosphor-icons/react";
-import { Fragment, useRef, useState, } from "react";
+import { useRef, useState, } from "react";
 import { css, cx } from "#primitives/css";
 import { parseMentions } from "../chat/contract.js";
-import { describeApprovalRequest } from "../chat/describe-tool-call.js";
 import { MessageText, splitSources } from "../chat/message-text.js";
-import { useChatConversation } from "../chat/use-chat-conversation.js";
 import { AgentTaskCard, AgentWork } from "./agent-work.js";
-import { Button, IconButton } from "./button.js";
-import { ChatComposer, ChatSuggestions, ChatThread } from "./chat.js";
+import { IconButton } from "./button.js";
+import { ChatComposer, ChatComposerTool, ChatSuggestions, ChatSystemLine, ChatThread, } from "./chat.js";
 import { CopyButton } from "./copyable-id.js";
 import { Drawer, DrawerBody } from "./drawer.js";
-import { Dropzone, DropzoneFileList } from "./dropzone.js";
-import { icon } from "./icon.js";
+import { Dropzone, DropzoneFileList, useDropzonePicker } from "./dropzone.js";
+import { icon, Spinner } from "./icon.js";
+import { ShortcutHint } from "./keycap.js";
 import { heading } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
+export { useChatClientConversations, useChatClientSource, } from "./chat-client-source.js";
 /* The docked aside, drawn like the shell's main panel beside it. */
 const docked = css({
     display: "flex",
@@ -125,19 +126,20 @@ function useDockedWidth(asideRef) {
 }
 const dockedHeader = css({
     display: "flex",
+    flexShrink: "0",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: "layout.contentGap",
-    paddingBlock: "panel.default",
+    gap: "layout.controlGap",
+    height: "shell.header",
     paddingInlineStart: "panel.comfortable",
     paddingInlineEnd: "panel.default",
-    borderBottom: "1px solid token(colors.border.control)",
+    borderBottom: "1px solid token(colors.border.divider)",
 });
 const headerActions = css({ display: "flex", alignItems: "center", gap: "layout.controlGap" });
 const titleLine = css({
     display: "inline-flex",
     alignItems: "center",
-    gap: "control.iconGap",
+    gap: "layout.controlGap",
     "& svg": { color: "fg.muted" },
 });
 const contextRow = css({
@@ -145,75 +147,32 @@ const contextRow = css({
     alignItems: "center",
     flexWrap: "wrap",
     gap: "layout.controlGap",
-    paddingBlock: "layout.controlGap",
+    paddingBlock: "layout.contentGap",
     paddingInline: "panel.comfortable",
-    borderBottom: "1px solid token(colors.border.control)",
-    color: "fg.muted",
+    borderBottom: "1px solid token(colors.border.divider)",
+    color: "fg.subtle",
     fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
 });
+// A record the agent reads: the raised face under its gradient edge.
 const contextChip = css({
     display: "inline-flex",
     alignItems: "center",
     gap: "control.iconGap",
     height: "control.shortcut",
-    paddingInlineStart: "control.block",
-    paddingInlineEnd: "control.iconInline",
-    border: "1px solid token(colors.border.control)",
-    borderRadius: "pill",
-    background: "bg.raised",
+    // The kit counts the 1px edge into the padding.
+    paddingInlineStart: "calc(token(spacing.control.block) + token(sizes.border.hairline))",
+    paddingInlineEnd: "calc(token(spacing.control.iconInline) + token(sizes.border.hairline))",
+    borderRadius: "field",
+    background: "token(gradients.raised)",
     color: "fg.primary",
+    "&::before": { background: "token(gradients.border.raised)" },
     "& svg": { color: "fg.muted" },
 });
 /* The thread's scrolling area, between the header and the composer. */
 const threadScroll = css({ flex: "1", minHeight: "0", padding: "none", overflowY: "auto" });
-/* A card in the assistant's flow: an approval or a question, with its answers as flat rows. */
-const card = css({
-    display: "grid",
-    gap: "control.iconGap",
-    width: "100%",
-    maxWidth: "chat.bubble",
-    paddingBlock: "control.block",
-    paddingInline: "control.compactInline",
-    border: "1px solid token(colors.border.control)",
-    borderRadius: "field",
-    background: "bg.card",
-    fontSize: "caption",
-    lineHeight: "log",
-});
-const cardLabel = css({ color: "fg.muted", fontSize: "code", lineHeight: "compact" });
-const argumentList = css({
-    display: "grid",
-    gridTemplateColumns: "auto minmax(0, 1fr)",
-    columnGap: "layout.controlGap",
-    margin: "none",
-    fontSize: "code",
-    lineHeight: "compact",
-    "& > dt": { color: "fg.muted", whiteSpace: "nowrap" },
-    "& > dd": { margin: "none", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-});
-const cardActions = css({ display: "flex", justifyContent: "flex-end", gap: "layout.controlGap" });
-// Option rows run to the card's edges, split by its hairlines.
-const optionList = css({
-    marginInline: "calc(token(spacing.control.compactInline) * -1)",
-    marginBlockEnd: "calc(token(spacing.control.block) * -1)",
-    "& > button": {
-        display: "block",
-        width: "100%",
-        paddingBlock: "control.compactBlock",
-        paddingInline: "control.compactInline",
-        border: "0",
-        borderTop: "1px solid token(colors.border.control)",
-        background: "transparent",
-        color: "fg.primary",
-        font: "inherit",
-        textAlign: "start",
-        cursor: "pointer",
-        _hover: { background: "bg.hover" },
-        _focusVisible: { focusRing: "inset" },
-        "&:last-child": { borderBottomLeftRadius: "field", borderBottomRightRadius: "field" },
-    },
-});
-const optionDetail = css({ display: "block", color: "fg.muted", fontSize: "code" });
+const centered = css({ display: "grid", placeItems: "center", height: "100%" });
 /* The thread and composer, the drop target for files; it fills what the sheet or page gives it. */
 const conversationRoot = css({
     display: "flex",
@@ -225,44 +184,44 @@ const composerFooter = css({
     display: "grid",
     gap: "layout.tightGap",
     flexShrink: "0",
-    paddingBlock: "layout.controlGap",
-    paddingInline: "panel.default",
-    borderTop: "1px solid token(colors.border.control)",
-    "&[data-layout=wide]": { borderTop: "0", paddingBlockEnd: "panel.default" },
+    padding: "panel.comfortable",
+    borderTop: "1px solid token(colors.border.divider)",
+    "&[data-layout=wide]": { borderTop: "0" },
 });
+/* Over the composer, what goes with it: an error. */
+const footerStack = css({ display: "grid", gap: "layout.tightGap", minWidth: "0" });
 /* Full page: the thread and composer in one readable column down the middle. */
 const wideColumn = css({ width: "100%", maxWidth: "chat.thread", marginInline: "auto" });
-const hiddenInput = css({ display: "none" });
 /* In a drawer, the context row and the conversation stack under its header. */
 const drawerStack = css({ display: "flex", flex: "1", minHeight: "0", flexDirection: "column" });
-/** How many of an approval's arguments show before the rest become "+N". */
-const maximumArgumentRows = 3;
-export function ChatSheet({ open, onOpenChange, title, context, placement = "drawer", onPlacementChange, onOpenFullPage, ...conversationProps }) {
+export function ChatSheet({ open, onOpenChange, title, context, placement = "drawer", onPlacementChange, onOpenFullPage, shortcut, ...conversationProps }) {
     const { variant = "agent", tasks } = conversationProps;
     const { labels } = useCiridaeLocale();
     const asideRef = useRef(null);
     const dockedWidth = useDockedWidth(asideRef);
     const titleContent = (_jsxs("span", { className: titleLine, children: [_jsx(SparkleIcon, { className: icon({ size: "small" }), weight: "fill" }), title] }));
-    const actions = (_jsxs(_Fragment, { children: [onOpenFullPage && (_jsx(IconButton, { "aria-label": labels.chat.openFullPage, variant: "ghost", size: "small", onClick: onOpenFullPage, children: _jsx(ArrowsOutSimpleIcon, { className: icon({ size: "small" }) }) })), onPlacementChange &&
+    const actions = (_jsxs(_Fragment, { children: [shortcut && _jsx(ShortcutHint, { hotkey: shortcut, boxed: true }), onOpenFullPage && (_jsx(IconButton, { "aria-label": labels.chat.openFullPage, variant: "ghost", size: "small", onClick: onOpenFullPage, children: _jsx(ArrowsOutSimpleIcon, { className: icon({ size: "small" }) }) })), onPlacementChange &&
                 (placement === "docked" ? (_jsx(IconButton, { "aria-label": labels.chat.undock, variant: "ghost", size: "small", onClick: () => onPlacementChange("drawer"), children: _jsx(ArrowSquareOutIcon, { className: icon({ size: "small" }) }) })) : (_jsx(IconButton, { "aria-label": labels.chat.dock, variant: "ghost", size: "small", onClick: () => onPlacementChange("docked"), children: _jsx(SidebarSimpleIcon, { className: icon({ size: "small" }), mirrored: true }) })))] }));
-    const contextContent = (_jsxs(_Fragment, { children: [context && context.length > 0 && (_jsxs("div", { className: contextRow, children: ["Reading", context.map((item) => (_jsxs("span", { className: contextChip, "data-ciridae-ui": "", children: [item.icon, item.label] }, item.label)))] })), variant === "agent" && tasks && _jsx(AgentWork, { layout: "summary", tasks: tasks })] }));
+    const contextContent = (_jsxs(_Fragment, { children: [context && context.length > 0 && (_jsxs("div", { className: contextRow, children: [labels.chat.reading, context.map((item) => (_jsxs("span", { className: contextChip, "data-ciridae-ui": "", "data-edge": "gradient", children: [item.icon, item.label] }, item.label)))] })), variant === "agent" && tasks && _jsx(AgentWork, { layout: "summary", tasks: tasks })] }));
     if (placement === "docked") {
         if (!open)
             return null;
-        return (_jsxs(_Fragment, { children: [_jsx("div", { className: resizeHandle, ...dockedWidth.handleProps }), _jsxs("aside", { ref: asideRef, className: docked, "data-ciridae-ui": "", "aria-label": typeof title === "string" ? title : undefined, style: dockedWidth.width === null ? undefined : { width: dockedWidth.width }, children: [_jsxs("header", { className: dockedHeader, children: [_jsx("h2", { className: cx(heading(), css({ lineHeight: "tight" })), children: titleContent }), _jsxs("div", { className: headerActions, children: [actions, _jsx(IconButton, { "aria-label": labels.common.close, variant: "ghost", size: "small", onClick: () => onOpenChange(false), children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] })] }), contextContent, _jsx(ChatConversation, { ...conversationProps })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: resizeHandle, ...dockedWidth.handleProps }), _jsxs("aside", { ref: asideRef, className: docked, "data-ciridae-ui": "", "aria-label": typeof title === "string" ? title : undefined, style: dockedWidth.width === null ? undefined : { width: dockedWidth.width }, children: [_jsxs("header", { className: dockedHeader, children: [_jsx("h2", { className: cx(heading({ size: "small" }), css({ lineHeight: "tight" })), children: titleContent }), _jsxs("div", { className: headerActions, children: [actions, _jsx(IconButton, { "aria-label": labels.common.close, onClick: () => onOpenChange(false), children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] })] }), contextContent, _jsx(ChatConversation, { ...conversationProps })] })] }));
     }
     return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, size: "narrow", title: title, icon: _jsx(SparkleIcon, { className: icon({ size: "small" }), weight: "fill" }), actions: actions, children: _jsxs("div", { className: drawerStack, children: [contextContent, _jsx(ChatConversation, { ...conversationProps, scrollBody: DrawerBody })] }) }));
 }
 /* The files for the next message: each uploads as it is added; send waits until all have. */
-function useComposerFiles(client) {
+function useComposerFiles(upload, onUploadError) {
     const [entries, setEntries] = useState([]);
     const remove = (file) => setEntries((existing) => existing.filter((entry) => entry.file !== file));
     const add = (files) => {
+        if (!upload)
+            return;
         setEntries((existing) => [...existing, ...files.map((file) => ({ file, attachment: null }))]);
         for (const file of files) {
-            void client.uploadAttachment(file).then((attachment) => setEntries((existing) => existing.map((entry) => (entry.file === file ? { file, attachment } : entry))), (error) => {
+            upload(file).then((attachment) => setEntries((existing) => existing.map((entry) => (entry.file === file ? { file, attachment } : entry))), (error) => {
                 remove(file);
-                throw error;
+                onUploadError(error);
             });
         }
     };
@@ -279,54 +238,53 @@ function useComposerFiles(client) {
  * The thread and the composer: everything that reads or writes the conversation. `layout="wide"`
  * sets both in one readable column for a full page; the sheet uses `sheet`.
  */
-export function ChatConversation({ client, conversationId, onConversationCreated, placeholder, draft, onDraftChange, composerRef, mentions, mentionMark, onMentionSelect, mentionHref, events = [], assistantName: ownAssistantName, suggestions, copyReplies = false, variant = "agent", tasks, onTaskReply, layout = "sheet", scrollBody: ScrollBody = "div", }) {
+export function ChatConversation({ source, placeholder, draft, onDraftChange, composerRef, mentions, mentionMark, onMentionSelect, mentionHref, events = [], assistantName: ownAssistantName, suggestions, copyReplies = false, composerTools, dictation, variant = "agent", tasks, onTaskReply, layout = "sheet", scrollBody: ScrollBody = "div", }) {
     const { labels } = useCiridaeLocale();
     const assistantName = ownAssistantName ?? labels.chat.assistantName;
-    const state = useChatConversation({
-        client,
-        conversationId,
-        onConversationCreated,
-    });
-    const files = useComposerFiles(client);
-    const [sendError, setSendError] = useState(null);
-    const fileInputRef = useRef(null);
-    const send = async (content, sentAttachments) => {
-        setSendError(null);
+    const [ownDraft, setOwnDraft] = useState("");
+    const currentDraft = draft ?? ownDraft;
+    const setDraft = (next) => {
+        setOwnDraft(next);
+        onDraftChange?.(next);
+    };
+    const [sending, setSending] = useState(false);
+    const [composerError, setComposerError] = useState(null);
+    const showError = (error) => setComposerError(error instanceof Error ? error.message : String(error));
+    const files = useComposerFiles(source.upload, showError);
+    const send = async (text) => {
+        setSending(true);
+        setComposerError(null);
         try {
-            await state.sendMessage(content, sentAttachments);
+            await source.send({ text, attachments: files.attachments });
+            files.clear();
         }
         catch (error) {
-            setSendError(error instanceof Error ? error : new Error(String(error)));
+            // The composer cleared as it sent: the text comes back, with the files still waiting.
+            setDraft(text);
+            showError(error);
+        }
+        finally {
+            setSending(false);
         }
     };
-    const renderReply = (content, plain) => (_jsx(MessageText, { content: content, plain: plain, onMentionSelect: onMentionSelect, mentionHref: mentionHref }));
     const entries = buildThread({
         labels: labels.chat,
-        items: state.items,
-        pendingMessages: state.pendingMessages,
-        response: state.response,
-        isResponseActive: state.isResponseActive,
+        source,
         events,
         tasks: variant === "agent" ? (tasks ?? []) : [],
-        sendError,
-        renderReply,
+        renderReply: (content, plain) => (_jsx(MessageText, { content: content, plain: plain, onMentionSelect: onMentionSelect, mentionHref: mentionHref })),
         replyActions: copyReplies ? (content) => _jsx(CopyReplyButton, { content: content }) : undefined,
-        attachmentUrl: (attachment) => client.getAttachmentUrl(attachment),
-        retryPending: (message) => {
-            state.discardPendingMessage(message.localId);
-            void send(message.content, message.attachments);
-        },
-        retryMessage: (message) => void send(message.content, message.attachments),
+        taskCard: (task) => _jsx(AgentTaskCard, { task: task, onReply: onTaskReply }),
     });
     const wide = layout === "wide";
-    const showSuggestions = entries.length === 0 && !state.isLoading && suggestions !== undefined && suggestions.length > 0;
-    return (_jsxs(Dropzone, { onFiles: files.add, className: conversationRoot, children: [_jsx(ScrollBody, { className: threadScroll, children: showSuggestions ? (_jsx(ChatSuggestions, { className: cx(wide && wideColumn), suggestions: suggestions, onSelect: (suggestion) => void send(suggestion, []) })) : (_jsx(ChatThread, { className: cx(wide && wideColumn), entries: entries, density: "compact", attachmentTiles: true, dayLabels: true, assistant: { name: assistantName, kind: "agent" }, renderCustom: (card) => card.kind === "approval" ? (_jsx(ApprovalCard, { item: card.item, onDecide: state.decideApproval })) : card.kind === "question" ? (_jsx(QuestionCard, { item: card.item, onAnswer: state.answerQuestion })) : (_jsx(AgentTaskCard, { task: card.task, onReply: onTaskReply })) })) }), _jsx("div", { className: composerFooter, "data-layout": layout, children: _jsx("div", { className: cx(wide && wideColumn), children: _jsx(ChatComposer, { variant: "sheet", placeholder: placeholder, autoFocus: true, value: draft, onValueChange: onDraftChange, inputProps: { ref: composerRef }, mentions: mentions, mentionMark: mentionMark, sendDisabled: files.uploading, sendsWithoutText: files.attachments.length > 0, attachments: files.files.length > 0 && (_jsx(DropzoneFileList, { variant: "tiles", files: files.files, pending: files.uploading, onRemove: files.remove })), onSend: (content) => {
-                            void send(content, files.attachments);
-                            files.clear();
-                        }, tools: _jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": labels.chat.attachFile, size: "compact", variant: "ghost", onClick: () => fileInputRef.current?.click(), children: _jsx(PaperclipIcon, { className: icon({ size: "small" }) }) }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: hiddenInput, onChange: (event) => {
-                                        files.add(Array.from(event.target.files ?? []));
-                                        event.target.value = "";
-                                    } })] }) }) }) })] }));
+    const showSuggestions = entries.length === 0 && !source.loading && suggestions !== undefined && suggestions.length > 0;
+    return (_jsxs(Dropzone, { onFiles: files.add, disabled: !source.upload, className: conversationRoot, children: [_jsx(ScrollBody, { className: threadScroll, children: source.loading && entries.length === 0 ? (_jsx("div", { className: centered, children: _jsx(Spinner, { label: labels.common.loading }) })) : showSuggestions ? (_jsx(ChatSuggestions, { className: cx(wide && wideColumn), suggestions: suggestions, onSelect: (suggestion) => void send(suggestion) })) : (_jsx(ChatThread, { className: cx(wide && wideColumn), entries: entries, replyStyle: "plain", attachmentTiles: true, dayLabels: true, resolveAttachmentUrl: source.resolveAttachmentUrl, assistant: { name: assistantName, kind: "agent" }, renderCustom: (content) => content })) }), _jsx("div", { className: composerFooter, "data-layout": layout, children: _jsxs("div", { className: cx(footerStack, wide && wideColumn), children: [composerError && (_jsx(ChatSystemLine, { tone: "error", role: "alert", children: composerError })), _jsx(ChatComposer, { variant: "sheet", placeholder: placeholder, autoFocus: true, value: currentDraft, onValueChange: setDraft, inputProps: { ref: composerRef }, mentions: mentions, mentionMark: mentionMark, sendDisabled: files.uploading || sending, sendsWithoutText: files.attachments.length > 0, onPasteFiles: source.upload ? files.add : undefined, attachments: files.files.length > 0 && (_jsx(DropzoneFileList, { variant: "tiles", files: files.files, pending: files.uploading, onRemove: files.remove })), onSend: (content) => void send(content), tools: _jsxs(_Fragment, { children: [source.upload && _jsx(AttachFilesButton, {}), composerTools] }), dictation: dictation })] }) })] }));
+}
+/** The paperclip: the enclosing `Dropzone`'s file picker. */
+function AttachFilesButton() {
+    const { labels } = useCiridaeLocale();
+    const picker = useDropzonePicker();
+    return (_jsx(ChatComposerTool, { "aria-label": labels.chat.attachFile, disabled: picker.disabled, onClick: picker.openPicker, children: _jsx(PaperclipIcon, { className: icon({ size: "small" }) }) }));
 }
 /** Copies a reply's text, its mentions as their labels, and shows a tick for a moment. */
 function CopyReplyButton({ content }) {
@@ -334,88 +292,37 @@ function CopyReplyButton({ content }) {
             .map((part) => (typeof part === "string" ? part : part.label))
             .join("") }));
 }
-/** The conversation's items, pending messages, page events and running state in one timeline. */
-function buildThread({ items, pendingMessages, response, isResponseActive, events, tasks, sendError, renderReply, replyActions, attachmentUrl, retryPending, retryMessage, labels, }) {
+/**
+ * The source's items, the page's events, the agent's tasks and how the latest turn stands, in one
+ * timeline: each run of the agent's steps folded into one entry, and at the latest turn's foot its
+ * thinking, failure or stop.
+ */
+function buildThread({ labels, source: { items, status, failureMessage, retry }, events, tasks, renderReply, replyActions, taskCard, }) {
     const entries = [];
-    const toAttachments = (attachments) => attachments.map((attachment) => ({
-        id: attachment.id,
-        name: attachment.name,
-        mediaType: attachment.media_type,
-        url: attachmentUrl(attachment),
-    }));
-    for (const item of items) {
-        const at = Date.parse(item.created_at);
-        const waitingOnUser = response?.id === item.response_id && response.status === "requires_action";
-        // A reply is done once its turn is: not still running, and not failed.
-        const turnUnfinished = response?.id === item.response_id && (isResponseActive || response.status === "failed");
-        switch (item.type) {
-            case "message": {
-                const { content } = item;
-                const { sources } = splitSources(content);
-                entries.push({
-                    kind: "message",
-                    id: item.id,
-                    side: item.role,
-                    at,
-                    // Files sent alone keep an empty body, so the thread draws their tiles with no bubble.
-                    body: content.trim() ? renderReply(content, item.role === "user") : "",
-                    attachments: toAttachments(item.attachments),
-                    sources: item.role === "assistant"
-                        ? sources.map((source) => ({
-                            id: source.id,
-                            label: source.label,
-                            href: source.href,
-                        }))
-                        : undefined,
-                    actions: item.role === "assistant" && !turnUnfinished ? replyActions?.(content) : undefined,
-                });
-                break;
-            }
-            case "approval_request":
-                if (item.decision === null && waitingOnUser) {
-                    entries.push({
-                        kind: "custom",
-                        id: item.id,
-                        side: "assistant",
-                        at,
-                        data: { kind: "approval", item },
-                    });
-                }
-                else if (item.decision !== null) {
-                    entries.push({
-                        kind: "line",
-                        id: item.id,
-                        at,
-                        text: `${describeApprovalRequest(item.tool)} · ${item.decision === "allow" ? "allowed" : "denied"}`,
-                    });
-                }
-                break;
-            case "question":
-                if (item.answers === null && waitingOnUser) {
-                    entries.push({
-                        kind: "custom",
-                        id: item.id,
-                        side: "assistant",
-                        at,
-                        data: { kind: "question", item },
-                    });
-                }
-                else if (item.answers !== null) {
-                    entries.push({
-                        kind: "line",
-                        id: item.id,
-                        at,
-                        text: labels.answered(item.answers.flat().filter(Boolean).join(", ")),
-                    });
-                }
-                break;
-            // What the agent runs on its way to a reply stays behind its typing.
-            case "function_call":
-            case "function_call_output":
-            case "reasoning":
-                break;
+    // The latest turn is everything after the user's last message; its replies are done once it is.
+    let latestTurnStart = -1;
+    items.forEach((item, index) => {
+        if (item.kind === "message" && item.role === "user")
+            latestTurnStart = index;
+    });
+    const latestTurnUnfinished = status === "running" || status === "failed";
+    // The run of steps the items end on, which the running turn draws as what the agent is doing.
+    let stepRun = null;
+    for (const [index, item] of items.entries()) {
+        if (item.kind === "step") {
+            stepRun ?? (stepRun = { id: `steps-${item.id}`, at: item.at, steps: [] });
+            stepRun.steps.push({ ...item.step, id: item.id });
+            continue;
         }
+        if (stepRun)
+            entries.push({ kind: "steps", ...stepRun });
+        stepRun = null;
+        const inUnfinishedTurn = latestTurnUnfinished && index > latestTurnStart;
+        entries.push(...toEntries(item, inUnfinishedTurn));
     }
+    const runningSteps = status === "running" ? stepRun : null;
+    if (stepRun && !runningSteps)
+        entries.push({ kind: "steps", ...stepRun });
     for (const event of events) {
         entries.push({
             kind: "line",
@@ -432,7 +339,7 @@ function buildThread({ items, pendingMessages, response, isResponseActive, event
                 id: `task-${task.id}`,
                 side: "assistant",
                 at: Date.parse(task.ask.askedAt),
-                data: { kind: "task", task },
+                data: taskCard(task),
             });
         }
         if ((task.status === "done" || task.status === "failed") && task.summary) {
@@ -447,98 +354,90 @@ function buildThread({ items, pendingMessages, response, isResponseActive, event
         }
     }
     entries.sort((first, second) => first.at - second.at);
-    if (response?.status === "failed") {
-        const userMessages = items.filter((item) => item.type === "message" && item.role === "user" && item.response_id === response.id);
-        const lastUserMessage = userMessages[userMessages.length - 1];
-        if (lastUserMessage) {
-            entries.push({
-                kind: "failure",
-                id: `failure-${response.id}`,
-                at: Date.parse(response.completed_at ?? lastUserMessage.created_at),
-                message: response.error?.message ?? "Couldn’t finish",
-                onRetry: () => retryMessage(lastUserMessage),
-            });
-        }
-    }
-    if (response?.status === "cancelled") {
-        entries.push({
-            kind: "line",
-            id: `stopped-${response.id}`,
-            at: Date.parse(response.completed_at ?? response.created_at),
-            text: labels.stopped,
-        });
-    }
-    for (const message of pendingMessages) {
-        // A posted message the items already include would show twice until it is discarded.
-        if (message.state === "posted" && items.some((item) => isSameMessage(item, message)))
-            continue;
-        entries.push({
-            kind: "message",
-            id: message.localId,
-            side: "user",
-            at: message.sentAt,
-            body: message.content,
-            attachments: toAttachments(message.attachments),
-            sending: message.state === "sending",
-        });
-        if (message.state === "failed") {
-            entries.push({
-                kind: "failure",
-                id: `failure-${message.localId}`,
-                at: message.sentAt,
-                message: sendError?.message ?? labels.notSent,
-                onRetry: () => retryPending(message),
-            });
+    const lastItem = items[items.length - 1];
+    const at = Math.max(lastItem?.at ?? 0, entries[entries.length - 1]?.at ?? 0) || Date.now();
+    const newestStep = runningSteps?.steps[runningSteps.steps.length - 1];
+    appendTurnEnding(entries, {
+        status,
+        retry,
+        failureMessage,
+        lastItem,
+        at,
+        labels,
+        doing: newestStep && `${newestStep.title}…`,
+    });
+    return entries;
+    function toEntries(item, inUnfinishedTurn) {
+        switch (item.kind) {
+            case "message": {
+                const assistant = item.role === "assistant";
+                const message = {
+                    kind: "message",
+                    id: item.id,
+                    side: item.role,
+                    at: item.at,
+                    // Files sent alone keep an empty body, so the thread draws their tiles with no bubble.
+                    body: item.text.trim() ? renderReply(item.text, !assistant) : "",
+                    attachments: item.attachments,
+                    sending: item.sending,
+                    sources: assistant
+                        ? [
+                            ...splitSources(item.text).sources.map((source) => ({
+                                id: source.id,
+                                label: source.label,
+                                href: source.href,
+                            })),
+                            ...(item.sources ?? []),
+                        ]
+                        : undefined,
+                    actions: assistant && !inUnfinishedTurn ? replyActions?.(item.text) : undefined,
+                    suggestedActions: item.suggestedActions,
+                    footnote: item.footnote,
+                };
+                if (!item.failure)
+                    return [message];
+                return [
+                    message,
+                    {
+                        kind: "failure",
+                        id: `failure-${item.id}`,
+                        at: item.at,
+                        title: labels.notSent,
+                        message: item.failure.message,
+                        onRetry: item.failure.retry,
+                    },
+                ];
+            }
+            case "line":
+                return [{ kind: "line", id: item.id, at: item.at, text: item.text, tone: item.tone }];
+            case "card":
+                return [{ kind: "custom", id: item.id, side: "assistant", at: item.at, data: item.content }];
         }
     }
-    const last = entries[entries.length - 1];
-    if (isResponseActive &&
-        response?.status !== "requires_action" &&
-        !(last?.kind === "message" && last.side === "assistant")) {
-        entries.push({ kind: "typing", id: "typing", at: last?.at ?? Date.now() });
-    }
-    return entries;
 }
-/** A tool call waiting for the user: what it would do, its arguments, and Deny or Allow. */
-function ApprovalCard({ item, onDecide, }) {
-    const { labels } = useCiridaeLocale();
-    const rows = listArgumentRows(item.arguments);
-    return (_jsxs("div", { className: card, children: [_jsx("span", { children: describeApprovalRequest(item.tool) }), rows.length > 0 && (_jsxs("dl", { className: argumentList, children: [rows.slice(0, maximumArgumentRows).map(([name, value]) => (_jsxs(Fragment, { children: [_jsx("dt", { children: name }), _jsx("dd", { children: value })] }, name))), rows.length > maximumArgumentRows && (_jsxs("dd", { className: cardLabel, children: ["+", rows.length - maximumArgumentRows] }))] })), _jsxs("div", { className: cardActions, children: [_jsx(Button, { variant: "secondary", onClick: () => void onDecide(item, "deny"), children: labels.chat.deny }), _jsx(Button, { onClick: () => void onDecide(item, "allow"), children: labels.chat.allow })] })] }));
-}
-/** The assistant's questions, one option row per answer; picking one answers that question. */
-function QuestionCard({ item, onAnswer, }) {
-    const [picked, setPicked] = useState([]);
-    const questionIndex = picked.length;
-    const question = item.questions[questionIndex];
-    if (!question)
-        return null;
-    const pick = (label) => {
-        const answers = [...picked, label];
-        if (answers.length === item.questions.length) {
-            void onAnswer(item, answers.map((answer) => [answer]));
+/**
+ * The latest turn's foot: the agent thinking while it runs, saying what it is `doing`; its
+ * failure with Try again; or Stopped.
+ */
+function appendTurnEnding(entries, { status, retry, failureMessage, lastItem, at, labels, doing, }) {
+    switch (status) {
+        case "running":
+            // Once its reply or a card waiting on the user is there, the agent is no longer thinking.
+            if (lastItem?.kind !== "card" &&
+                !(lastItem?.kind === "message" && lastItem.role === "assistant"))
+                entries.push({ kind: "typing", id: "typing", at, label: doing });
+            return;
+        case "failed": {
+            const message = failureMessage ?? labels.failed;
+            entries.push(retry
+                ? { kind: "failure", id: "turn-failure", at, message, onRetry: retry }
+                : { kind: "line", id: "turn-failure", at, text: message, tone: "error" });
+            return;
         }
-        setPicked(answers);
-    };
-    return (_jsxs("div", { className: card, children: [_jsxs("span", { className: cardLabel, children: [question.header, item.questions.length > 1 && ` · ${questionIndex + 1} of ${item.questions.length}`] }), _jsx("span", { children: question.question }), _jsx("div", { className: optionList, children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => pick(option.label), children: [option.label, option.description && _jsx("span", { className: optionDetail, children: option.description })] }, option.label))) })] }));
-}
-function isSameMessage(item, message) {
-    return (item.type === "message" &&
-        item.role === "user" &&
-        item.content === message.content &&
-        Date.parse(item.created_at) >= message.sentAt - 60000);
-}
-/** A call's JSON arguments as name and value pairs, values shortened to one line. */
-function listArgumentRows(argumentsJson) {
-    try {
-        const parsed = JSON.parse(argumentsJson);
-        if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed))
-            return [];
-        return Object.entries(parsed).map(([name, value]) => [
-            name.replace(/[_-]+/g, " "),
-            typeof value === "string" ? value : JSON.stringify(value),
-        ]);
-    }
-    catch {
-        return [];
+        case "stopped":
+            entries.push({ kind: "line", id: "turn-stopped", at, text: labels.stopped });
+            return;
+        case "idle":
+            return;
     }
 }