@ciridae/ui 1.0.3 → 1.0.4

package/dist/components/chart.d.ts

@@ -28,7 +28,7 @@ export declare function TimeSeriesChart({ series, start, end, formatValue, forma
 }): import("react").JSX.Element;
 /**
  * Values by category as bars, side by side per series, or as lines, such as counts per month.
- * Each series takes the next accent; a legend names them once there is more than one.
+ * Each series takes the next chart colour; a legend names them once there is more than one.
  */
 export declare function CategoryChart({ categories, series, variant, formatValue, height, allowDecimals, className, ...props }: ComponentProps<"div"> & {
     categories: readonly string[];

package/dist/components/chart.js

@@ -20,25 +20,30 @@ const frame = css({
     color: "fg.muted",
     fontFamily: "numeric",
     fontSize: "caption",
-    "--series-0": "token(colors.accent.blue)",
-    "--series-1": "token(colors.accent.green)",
-    "--series-2": "token(colors.accent.yellow)",
-    "--series-3": "token(colors.accent.bronze)",
-    "--series-4": "token(colors.accent.red)",
+    // The series that matters is the trend's blue, a bar the lighter bar blue; the rest take the
+    // chart's four categories in their fixed order.
+    "--series-0": "token(colors.chart.trend)",
+    "--series-1": "token(colors.chart.category1)",
+    "--series-2": "token(colors.chart.category2)",
+    "--series-3": "token(colors.chart.category3)",
+    "--series-4": "token(colors.chart.category4)",
+    "&[data-variant=bar]": { "--series-0": "token(colors.chart.bar)" },
     "--chart-grid": "token(colors.border.subtle)",
     "--chart-muted": "token(colors.fg.muted)",
     "--chart-cursor": "token(colors.bg.hover)",
     "& .ts-chart-host": { overflow: "visible" },
 });
-// The tooltip's own React body replaces the chart's default chrome, so it draws the card itself.
+// The tooltip's own React body replaces the chart's default chrome, so it draws the popover's
+// glass itself.
 const tooltipBody = css({
     display: "grid",
     gap: "control.trackInset",
     padding: "panel.compact",
     border: "1px solid token(colors.border.control)",
     borderRadius: "action",
-    background: "bg.card",
-    boxShadow: "card",
+    background: "bg.popover",
+    backdropFilter: "blur(token(blurs.popover))",
+    boxShadow: "soft",
     color: "fg.primary",
     fontFamily: "sans",
     fontSize: "caption",
@@ -185,7 +190,7 @@ export function TimeSeriesChart({ series, start, end, formatValue, formatTimesta
 }
 /**
  * Values by category as bars, side by side per series, or as lines, such as counts per month.
- * Each series takes the next accent; a legend names them once there is more than one.
+ * Each series takes the next chart colour; a legend names them once there is more than one.
  */
 export function CategoryChart({ categories, series, variant = "bar", formatValue = String, height = 176, allowDecimals = true, className, ...props }) {
     const definition = useMemo(() => {
@@ -257,9 +262,9 @@ export function CategoryChart({ categories, series, variant = "bar", formatValue
             tooltip: seriesTooltip(series, formatValue, String),
         });
     }, [allowDecimals, categories, formatValue, series, variant]);
-    return (_jsxs("div", { ...props, className: cx(frame, className), "data-ciridae-ui": "", children: [_jsx(Chart, { ariaLabel: series.map((item) => item.label).join(", "), definition: definition, height: height, renderTooltipBody: ({ points, content }) => (_jsx(SeriesTooltip, { content: content, points: points, series: series, formatValue: formatValue })) }), _jsx(SeriesLegend, { series: series })] }));
+    return (_jsxs("div", { ...props, className: cx(frame, className), "data-ciridae-ui": "", "data-variant": variant, children: [_jsx(Chart, { ariaLabel: series.map((item) => item.label).join(", "), definition: definition, height: height, renderTooltipBody: ({ points, content }) => (_jsx(SeriesTooltip, { content: content, points: points, series: series, formatValue: formatValue })) }), _jsx(SeriesLegend, { series: series })] }));
 }
-/** Each series index to its accent, in order. */
+/** Each series index to its chart colour, in order. */
 function seriesColorScale(count) {
     return scaleOrdinal()
         .domain(Array.from({ length: count }, (_, index) => index))

package/dist/components/chat-client-source.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Fragment, useMemo, useRef, useState } from "react";
 import { css } from "#primitives/css";
-import { describeApprovalRequest } from "../chat/describe-tool-call.js";
+import { describeToolCall } from "../chat/describe-tool-call.js";
 import { useChatConversation } from "../chat/use-chat-conversation.js";
 import { useConversationList } from "../chat/use-conversation-list.js";
 import { Button } from "./button.js";
@@ -93,10 +93,16 @@ export function useChatClientSource({ client, conversationId, onConversationCrea
         ? items.filter((item) => item.type === "message" && item.role === "user" && item.response_id === response.id)
         : [];
     const lastUserMessage = failedTurnMessages[failedTurnMessages.length - 1];
+    // How each tool call ended, by its call id; a call with none has not returned yet.
+    const callStatuses = new Map(items.flatMap((item) => item.type === "function_call_output" ? [[item.call_id, item.status]] : []));
+    const lastItem = items[items.length - 1];
     const conversationItems = [];
     for (const item of items) {
         const converted = toConversationItem(item, {
             waitingOnUser: response?.id === item.response_id && response.status === "requires_action",
+            inRunningTurn: status === "running" && response?.id === item.response_id,
+            newest: item === lastItem,
+            callStatuses,
             toChatAttachment,
             answered: labels.chat.answered,
             decided: (decision) => (decision === "allow" ? labels.chat.allowed : labels.chat.denied),
@@ -158,8 +164,11 @@ export function useChatClientConversations(client) {
     }))), [list.data]);
     return { conversations, loading: list.isPending };
 }
-/** An item as the thread draws it; what the agent runs on its way to a reply stays behind. */
-function toConversationItem(item, { waitingOnUser, toChatAttachment, answered, decided, decideApproval, answerQuestion, }) {
+/**
+ * An item as the thread draws it. A tool call is a step named by its tool, with how it ended and
+ * neither its arguments nor its output; a thought is a step named by its first line.
+ */
+function toConversationItem(item, { waitingOnUser, inRunningTurn, newest, callStatuses, toChatAttachment, answered, decided, decideApproval, answerQuestion, }) {
     const at = Date.parse(item.created_at);
     switch (item.type) {
         case "message":
@@ -177,7 +186,7 @@ function toConversationItem(item, { waitingOnUser, toChatAttachment, answered, d
                     kind: "line",
                     id: item.id,
                     at,
-                    text: `${describeApprovalRequest(item.tool)} · ${decided(item.decision)}`,
+                    text: `${describeToolCall(item.tool)} · ${decided(item.decision)}`,
                 };
             }
             return waitingOnUser
@@ -206,16 +215,48 @@ function toConversationItem(item, { waitingOnUser, toChatAttachment, answered, d
                 }
                 : null;
         case "function_call":
+            // Only the tool's name and how the call ended: its arguments can hold values, such as a
+            // credential or a customer's details, that anyone reading the thread should not see.
+            return {
+                kind: "step",
+                id: item.id,
+                at,
+                step: {
+                    kind: "tool",
+                    title: describeToolCall(item.name),
+                    // A call that never returned from a finished response did not run to its end.
+                    status: callStatuses.get(item.call_id) ?? (inRunningTurn ? "running" : "failed"),
+                },
+            };
         case "function_call_output":
-        case "reasoning":
             return null;
+        case "reasoning": {
+            const [title = "", ...rest] = item.content
+                .split("\n")
+                .map((line) => line.trim())
+                .filter(Boolean);
+            if (!title)
+                return null;
+            return {
+                kind: "step",
+                id: item.id,
+                at,
+                step: {
+                    kind: "reasoning",
+                    // A thought often opens with its gist in bold, as a heading.
+                    title: title.replace(/^\*\*(.+)\*\*$/, "$1"),
+                    detail: rest.join(" ") || undefined,
+                    status: inRunningTurn && newest ? "running" : "completed",
+                },
+            };
+        }
     }
 }
 /** 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 })] })] }));
+    return (_jsxs("div", { className: card, children: [_jsx("span", { children: describeToolCall(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, }) {

package/dist/components/chat-sheet-controller.d.ts

@@ -33,6 +33,7 @@ export declare function useChatSheetController({ hotkey, defaultPlacement, docke
         placement: ChatSheetPlacement;
         onPlacementChange: ((next: ChatSheetPlacement) => void) | undefined;
         onOpenFullPage: (() => void) | undefined;
+        shortcut: HotkeyChord;
         draft: string;
         onDraftChange: import("react").Dispatch<import("react").SetStateAction<string>>;
         composerRef: import("react").RefObject<HTMLDivElement | null>;

package/dist/components/chat-sheet-controller.js

@@ -123,6 +123,7 @@ export function useChatSheetController({ hotkey = "Mod+J", defaultPlacement = "d
             placement,
             onPlacementChange: dockable ? changePlacement : undefined,
             onOpenFullPage: openFullPage,
+            shortcut: hotkey,
             draft,
             onDraftChange: setDraft,
             composerRef,

package/dist/components/chat-sheet.d.ts

@@ -1,6 +1,8 @@
 import { type ReactNode, type Ref } from "react";
 import { type AgentTask, type AgentTaskReply } from "./agent-work.js";
+import { type ChatDictation } from "./chat.js";
 import { DrawerBody } from "./drawer.js";
+import type { HotkeyChord } from "./hotkeys.js";
 import type { MentionMark, MentionTrigger } from "./mention-input.js";
 import type { Mention } from "../chat/contract.js";
 import type { ChatConversationSource } from "../chat/conversation-source.js";
@@ -53,6 +55,10 @@ export type ChatConversationProps = {
     suggestions?: readonly string[];
     /** A Copy control in the footer of each reply once its turn has finished, and not failed. */
     copyReplies?: boolean;
+    /** More tools in the composer's bar after the paperclip, such as a dictation button. */
+    composerTools?: ReactNode;
+    /** While the host takes dictation, its levels as the composer's waveform; see `ChatComposer`. */
+    dictation?: ChatDictation;
 };
 export type ChatSheetProps = ChatConversationProps & {
     open: boolean;
@@ -66,13 +72,15 @@ export type ChatSheetProps = ChatConversationProps & {
     onPlacementChange?: (placement: ChatSheetPlacement) => void;
     /** Shows a header button that moves the conversation to a full page. */
     onOpenFullPage?: () => void;
+    /** The hotkey that opens the sheet, shown as keys in its header. */
+    shortcut?: HotkeyChord;
 };
-export declare function ChatSheet({ open, onOpenChange, title, context, placement, onPlacementChange, onOpenFullPage, ...conversationProps }: ChatSheetProps): import("react").JSX.Element | null;
+export declare function ChatSheet({ open, onOpenChange, title, context, placement, onPlacementChange, onOpenFullPage, shortcut, ...conversationProps }: ChatSheetProps): import("react").JSX.Element | null;
 /**
  * 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 declare function ChatConversation({ source, placeholder, draft, onDraftChange, composerRef, mentions, mentionMark, onMentionSelect, mentionHref, events, assistantName: ownAssistantName, suggestions, copyReplies, variant, tasks, onTaskReply, layout, scrollBody: ScrollBody, }: ChatConversationProps & {
+export declare function ChatConversation({ source, placeholder, draft, onDraftChange, composerRef, mentions, mentionMark, onMentionSelect, mentionHref, events, assistantName: ownAssistantName, suggestions, copyReplies, composerTools, dictation, variant, tasks, onTaskReply, layout, scrollBody: ScrollBody, }: ChatConversationProps & {
     layout?: "sheet" | "wide";
     /** The drawer's body inside a `Drawer`, a plain element otherwise. */
     scrollBody?: typeof DrawerBody | "div";

package/dist/components/chat-sheet.js

@@ -20,11 +20,12 @@ import { parseMentions } from "../chat/contract.js";
 import { MessageText, splitSources } from "../chat/message-text.js";
 import { AgentTaskCard, AgentWork } from "./agent-work.js";
 import { IconButton } from "./button.js";
-import { ChatComposer, ChatSuggestions, ChatSystemLine, ChatThread, } from "./chat.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, 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";
@@ -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.tightGap" });
+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,23 +147,27 @@ 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. */
@@ -178,10 +184,9 @@ 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" });
@@ -189,19 +194,19 @@ const footerStack = css({ display: "grid", gap: "layout.tightGap", minWidth: "0"
 const wideColumn = css({ width: "100%", maxWidth: "chat.thread", marginInline: "auto" });
 /* In a drawer, the context row and the conversation stack under its header. */
 const drawerStack = css({ display: "flex", flex: "1", minHeight: "0", flexDirection: "column" });
-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: [labels.chat.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 })] }) }));
 }
@@ -233,7 +238,7 @@ function useComposerFiles(upload, onUploadError) {
  * 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({ source, 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 [ownDraft, setOwnDraft] = useState("");
@@ -273,13 +278,13 @@ export function ChatConversation({ source, placeholder, draft, onDraftChange, co
     });
     const wide = layout === "wide";
     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, density: "compact", 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: source.upload && _jsx(AttachFilesButton, {}) })] }) })] }));
+    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(IconButton, { "aria-label": labels.chat.attachFile, size: "compact", variant: "ghost", disabled: picker.disabled, onClick: picker.openPicker, children: _jsx(PaperclipIcon, { className: icon({ size: "small" }) }) }));
+    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 }) {
@@ -289,7 +294,8 @@ function CopyReplyButton({ content }) {
 }
 /**
  * The source's items, the page's events, the agent's tasks and how the latest turn stands, in one
- * timeline: the turn's typing, failure or stop at its foot.
+ * 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 = [];
@@ -300,10 +306,23 @@ function buildThread({ labels, source: { items, status, failureMessage, retry },
             latestTurnStart = index;
     });
     const latestTurnUnfinished = status === "running" || status === "failed";
-    items.forEach((item, index) => {
+    // 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",
@@ -337,7 +356,16 @@ function buildThread({ labels, source: { items, status, failureMessage, retry },
     entries.sort((first, second) => first.at - second.at);
     const lastItem = items[items.length - 1];
     const at = Math.max(lastItem?.at ?? 0, entries[entries.length - 1]?.at ?? 0) || Date.now();
-    appendTurnEnding(entries, { status, retry, failureMessage, lastItem, at, labels });
+    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) {
@@ -353,13 +381,18 @@ function buildThread({ labels, source: { items, status, failureMessage, retry },
                     attachments: item.attachments,
                     sending: item.sending,
                     sources: assistant
-                        ? splitSources(item.text).sources.map((source) => ({
-                            id: source.id,
-                            label: source.label,
-                            href: source.href,
-                        }))
+                        ? [
+                            ...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];
@@ -369,7 +402,8 @@ function buildThread({ labels, source: { items, status, failureMessage, retry },
                         kind: "failure",
                         id: `failure-${item.id}`,
                         at: item.at,
-                        message: item.failure.message ?? labels.notSent,
+                        title: labels.notSent,
+                        message: item.failure.message,
                         onRetry: item.failure.retry,
                     },
                 ];
@@ -381,14 +415,17 @@ function buildThread({ labels, source: { items, status, failureMessage, retry },
         }
     }
 }
-/** The latest turn's foot: the agent typing while it runs, its failure with Retry, or Stopped. */
-function appendTurnEnding(entries, { status, retry, failureMessage, lastItem, at, labels, }) {
+/**
+ * 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 typing.
+            // 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 });
+                entries.push({ kind: "typing", id: "typing", at, label: doing });
             return;
         case "failed": {
             const message = failureMessage ?? labels.failed;