@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/chart.js

@@ -1,37 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { barY, defineChart, lineY } from "@tanstack/charts";
+import { crosshair } from "@tanstack/charts/crosshair";
+import { group } from "@tanstack/charts/group";
+import { Chart } from "@tanstack/charts/react/tooltip";
+import { scaleBand } from "@tanstack/charts/scales/band";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { scaleOrdinal } from "@tanstack/charts/scales/ordinal";
+import { tooltip as chartTooltip } from "@tanstack/charts/tooltip";
+import { useMemo } from "react";
 import { css, cx } from "#primitives/css";
 import { useCiridaeLocale } from "./locale.js";
 const seriesColorCount = 5;
-// Recharts axes default to 500; keep series above them and below the hover cursor at 1100.
-const seriesLineZIndex = 600;
-// Series colors are custom properties so recharts' SVG attributes can use theme tokens.
+// Series colors are custom properties so the chart's SVG paint follows the theme's tokens, and
+// the axes and tooltip read the kit's muted text, grid and card colors.
 const frame = css({
     display: "grid",
     gap: "layout.controlGap",
     minWidth: "0",
-    "--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)",
+    color: "fg.muted",
+    fontFamily: "numeric",
+    fontSize: "caption",
+    // 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)",
-    "& .recharts-cartesian-axis-tick-value": {
-        fill: "fg.muted",
-        fontFamily: "numeric",
-        fontSize: "caption",
-    },
-    "& .recharts-surface": { overflow: "visible" },
+    "--chart-cursor": "token(colors.bg.hover)",
+    "& .ts-chart-host": { overflow: "visible" },
 });
-const tooltip = css({
+// 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",
 });
 const tooltipRow = css({
@@ -50,6 +64,7 @@ const legend = css({
     flexWrap: "wrap",
     gap: "layout.controlGap",
     color: "fg.muted",
+    fontFamily: "sans",
     fontSize: "caption",
 });
 const legendItem = css({
@@ -72,45 +87,230 @@ const swatch = css({
     borderRadius: "round",
 });
 const seriesColor = (index) => `var(--series-${index % seriesColorCount})`;
-// Positional keys: a label such as a pod name may hold dots, which recharts reads as a path.
-const seriesKey = (index) => `series${index}`;
+const chartTheme = {
+    foreground: "var(--chart-muted)",
+    muted: "var(--chart-muted)",
+    grid: "var(--chart-grid)",
+    background: "transparent",
+    palette: Array.from({ length: seriesColorCount }, (_, index) => seriesColor(index)),
+};
+const gridLine = { stroke: "var(--chart-grid)", strokeOpacity: 1 };
+/** The value axis' domain: from zero, or the lowest value below it, to the highest. */
+function valueDomain(rows) {
+    const values = rows.flatMap((row) => (row.y === null ? [] : [row.y]));
+    return [Math.min(0, ...values), Math.max(0, ...values, 1)];
+}
+/**
+ * Without decimals, asks a short scale for no more ticks than whole numbers it spans, so 0 to 2
+ * reads 0, 1, 2 rather than halves.
+ */
+function valueTickCount(domain, allowDecimals) {
+    if (allowDecimals)
+        return undefined;
+    const span = Math.ceil(domain[1] - domain[0]);
+    return span < 5 ? Math.max(span, 1) : undefined;
+}
 /**
  * Lines over a fixed time window. Samples from different series are joined on their timestamp, so
  * a series missing a sample leaves a gap rather than a line drawn through it.
  */
 export function TimeSeriesChart({ series, start, end, formatValue, formatTimestamp, height = 220, allowDecimals = true, className, ...props }) {
-    const rows = chartRows(series);
     const { formatDateTime, formatTime } = useCiridaeLocale();
-    const spansDays = end - start > 24 * 60 * 60;
-    const formatTick = (unixSeconds) => spansDays
-        ? formatDateTime(unixSeconds * 1000, {
-            month: "short",
-            day: "numeric",
-            hour: "2-digit",
-            minute: "2-digit",
-        })
-        : formatTime(unixSeconds * 1000, { hour: "2-digit", minute: "2-digit" });
-    return (_jsxs("div", { ...props, className: cx(frame, className), "data-ciridae-ui": "", children: [_jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rows, margin: { top: 4, right: 4, bottom: 0, left: 0 }, children: [_jsx(CartesianGrid, { stroke: "var(--chart-grid)", vertical: false }), _jsx(XAxis, { dataKey: "time", type: "number", domain: [start, end], scale: "time", tickFormatter: formatTimestamp ?? formatTick, stroke: "var(--chart-grid)", tickLine: false, minTickGap: 48 }), _jsx(YAxis, { allowDecimals: allowDecimals, tickFormatter: formatValue, stroke: "var(--chart-grid)", tickLine: false, axisLine: false, width: "auto" }), _jsx(Tooltip, { cursor: { stroke: "var(--chart-muted)", strokeDasharray: "3 3" }, isAnimationActive: false, content: ({ active, label, payload }) => active && payload && payload.length > 0 ? (_jsxs("div", { className: tooltip, children: [_jsx("span", { children: formatTimestamp
-                                            ? formatTimestamp(Number(label))
-                                            : formatDateTime(Number(label) * 1000, {
-                                                month: "short",
-                                                day: "numeric",
-                                                hour: "2-digit",
-                                                minute: "2-digit",
-                                                second: "2-digit",
-                                            }) }), payload.map((item) => {
-                                        const index = Number(String(item.dataKey).replace("series", ""));
-                                        return (_jsxs("span", { className: tooltipRow, children: [_jsx("span", { className: swatch, style: { background: seriesColor(index) } }), _jsx("span", { children: series[index]?.label }), _jsx("span", { "data-value": "", children: formatValue(Number(item.value)) })] }, String(item.dataKey)));
-                                    })] })) : null }), series.map((item, index) => (_jsx(Line, { dataKey: seriesKey(index), name: item.label, stroke: seriesColor(index), strokeWidth: 1.5, zIndex: seriesLineZIndex, dot: false, isAnimationActive: false }, item.label)))] }) }), series.length > 1 && (_jsx("div", { className: legend, children: series.map((item, index) => (_jsxs("span", { className: legendItem, title: item.label, children: [_jsx("span", { className: swatch, style: { background: seriesColor(index) } }), _jsx("span", { children: item.label })] }, item.label))) }))] }));
+    const definition = useMemo(() => {
+        const formatHeading = (unixSeconds) => formatTimestamp
+            ? formatTimestamp(unixSeconds)
+            : formatDateTime(unixSeconds * 1000, {
+                month: "short",
+                day: "numeric",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+            });
+        const rows = timeSeriesRows(series);
+        const domain = valueDomain(rows);
+        const spansDays = end - start > 24 * 60 * 60;
+        const formatTick = formatTimestamp ??
+            ((unixSeconds) => spansDays
+                ? formatDateTime(unixSeconds * 1000, {
+                    month: "short",
+                    day: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                })
+                : formatTime(unixSeconds * 1000, { hour: "2-digit", minute: "2-digit" }));
+        return defineChart({
+            marks: [
+                lineY(rows, {
+                    key: "key",
+                    x: "x",
+                    y: "y",
+                    z: "series",
+                    color: "series",
+                    strokeWidth: 1.5,
+                }),
+                crosshair({
+                    y: false,
+                    stroke: "var(--chart-muted)",
+                    strokeOpacity: 1,
+                    strokeWidth: 1,
+                    strokeDasharray: "3 3",
+                }),
+            ],
+            scales: {
+                x: {
+                    scale: scaleLinear().domain([start, end]),
+                    axis: {
+                        line: gridLine,
+                        ticks: { size: 0, spacing: 96, format: formatTick },
+                        tickLabels: { thin: true },
+                    },
+                },
+                y: {
+                    scale: scaleLinear().domain(domain),
+                    nice: true,
+                    grid: gridLine,
+                    axis: {
+                        line: false,
+                        ticks: {
+                            size: 0,
+                            count: valueTickCount(domain, allowDecimals),
+                            format: formatValue,
+                        },
+                    },
+                },
+            },
+            color: { scale: seriesColorScale(series.length) },
+            theme: chartTheme,
+            focus: "group-x",
+            maxFocusDistance: Number.POSITIVE_INFINITY,
+            tooltip: seriesTooltip(series, formatValue, formatHeading),
+        });
+    }, [allowDecimals, end, formatDateTime, formatTime, formatTimestamp, formatValue, series, start]);
+    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 })] }));
 }
-function chartRows(series) {
-    const rowsByTime = new Map();
-    series.forEach((item, index) => {
-        for (const [time, value] of item.points) {
-            const row = rowsByTime.get(time) ?? { time };
-            row[seriesKey(index)] = value;
-            rowsByTime.set(time, row);
-        }
+/**
+ * Values by category as bars, side by side per series, or as lines, such as counts per month.
+ * 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(() => {
+        const rows = series.flatMap((item, seriesIndex) => categories.map((category, categoryIndex) => ({
+            key: `${seriesIndex}:${categoryIndex}`,
+            x: category,
+            y: item.values[categoryIndex] ?? null,
+            series: seriesIndex,
+        })));
+        const domain = valueDomain(rows);
+        const mark = variant === "bar"
+            ? barY(rows.filter((row) => row.y !== null), {
+                key: "key",
+                x: "x",
+                y: (row) => row.y ?? 0,
+                z: "series",
+                color: "series",
+                layout: group({ padding: 0.1 }),
+                radius: { end: 2 },
+            })
+            : lineY(rows, {
+                key: "key",
+                x: "x",
+                y: "y",
+                z: "series",
+                color: "series",
+                strokeWidth: 1.5,
+            });
+        return defineChart({
+            marks: [
+                mark,
+                crosshair(variant === "bar"
+                    ? { x: { band: { fill: "var(--chart-cursor)", fillOpacity: 1 } }, y: false }
+                    : {
+                        y: false,
+                        stroke: "var(--chart-muted)",
+                        strokeOpacity: 1,
+                        strokeWidth: 1,
+                        strokeDasharray: "3 3",
+                    }),
+            ],
+            scales: {
+                x: {
+                    scale: scaleBand()
+                        .domain(categories)
+                        .padding(variant === "bar" ? 0.2 : 0),
+                    axis: { line: gridLine, ticks: { size: 0 }, tickLabels: { thin: true } },
+                },
+                y: {
+                    scale: scaleLinear().domain(domain),
+                    nice: true,
+                    grid: gridLine,
+                    axis: {
+                        line: false,
+                        ticks: {
+                            size: 0,
+                            count: valueTickCount(domain, allowDecimals),
+                            format: formatValue,
+                        },
+                    },
+                },
+            },
+            color: { scale: seriesColorScale(series.length) },
+            theme: chartTheme,
+            focus: "group-x",
+            maxFocusDistance: Number.POSITIVE_INFINITY,
+            // The cursor band marks the hovered category; a ring on one bar would single it out.
+            focusRing: variant === "line",
+            tooltip: seriesTooltip(series, formatValue, String),
+        });
+    }, [allowDecimals, categories, formatValue, series, variant]);
+    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 chart colour, in order. */
+function seriesColorScale(count) {
+    return scaleOrdinal()
+        .domain(Array.from({ length: count }, (_, index) => index))
+        .range(Array.from({ length: count }, (_, index) => seriesColor(index)));
+}
+/**
+ * The tooltip's plain text, which names the focused position for assistive tech: the heading,
+ * then each series' label and value, one per line.
+ */
+function seriesTooltip(series, formatValue, formatHeading) {
+    return {
+        use: chartTooltip,
+        formatGroup: (points) => [
+            points[0] === undefined ? "" : formatHeading(points[0].xValue),
+            ...points.flatMap(({ datum }) => datum.y === null ? [] : [`${series[datum.series]?.label}: ${formatValue(datum.y)}`]),
+        ].join("\n"),
+    };
+}
+/** The hovered position: its heading, then each series' value beside its swatch. */
+function SeriesTooltip({ content, points, series, formatValue, }) {
+    const heading = typeof content === "string" ? content.split("\n", 1)[0] : undefined;
+    return (_jsxs("div", { className: tooltipBody, children: [_jsx("span", { children: heading }), points.flatMap(({ datum }) => datum.y === null
+                ? []
+                : [
+                    _jsxs("span", { className: tooltipRow, children: [_jsx("span", { className: swatch, style: { background: seriesColor(datum.series) } }), _jsx("span", { children: series[datum.series]?.label }), _jsx("span", { "data-value": "", children: formatValue(datum.y) })] }, datum.series),
+                ])] }));
+}
+/** Names each series by its color, once there is more than one. */
+function SeriesLegend({ series }) {
+    if (series.length < 2)
+        return null;
+    return (_jsx("div", { className: legend, children: series.map((item, index) => (_jsxs("span", { className: legendItem, title: item.label, children: [_jsx("span", { className: swatch, style: { background: seriesColor(index) } }), _jsx("span", { children: item.label })] }, index))) }));
+}
+/**
+ * One row per series per timestamp any series sampled, in time order; a series without a sample
+ * at that time gets a null, which the line draws as a gap.
+ */
+function timeSeriesRows(series) {
+    const times = [...new Set(series.flatMap((item) => item.points.map(([time]) => time)))].sort((left, right) => left - right);
+    return series.flatMap((item, seriesIndex) => {
+        const values = new Map(item.points.map(([time, value]) => [time, value]));
+        return times.map((time) => ({
+            key: `${seriesIndex}:${time}`,
+            x: time,
+            y: values.get(time) ?? null,
+            series: seriesIndex,
+        }));
     });
-    return [...rowsByTime.values()].sort((left, right) => left.time - right.time);
 }

package/dist/components/chat-client-source.d.ts

@@ -0,0 +1,16 @@
+import type { ChatClient } from "../chat/chat-client.js";
+import type { Conversation, ConversationId } from "../chat/contract.js";
+import type { ChatConversationSource, ChatConversationSummary } from "../chat/conversation-source.js";
+export type UseChatClientSourceOptions = {
+    client: ChatClient;
+    /** Null before the first message; the conversation is created with it and reported. */
+    conversationId: ConversationId | null;
+    onConversationCreated: (conversation: Conversation) => void;
+};
+/** One conversation of the lib's chat client, polled while its response runs. */
+export declare function useChatClientSource({ client, conversationId, onConversationCreated, }: UseChatClientSourceOptions): ChatConversationSource;
+/** The chat client's conversations, newest first, as `ChatHistory` lists them. */
+export declare function useChatClientConversations(client: ChatClient): {
+    conversations: readonly ChatConversationSummary[];
+    loading: boolean;
+};

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

@@ -0,0 +1,297 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * The lib's own chat client as a `ChatConversationSource` and a `ChatHistory` list: the
+ * conversation's items, the messages on their way, the response's state, and the approvals and
+ * questions the agent waits on as cards in its flow. Needs a `QueryClientProvider` above it.
+ */
+import { Fragment, useMemo, useRef, useState } from "react";
+import { css } from "#primitives/css";
+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";
+import { useCiridaeLocale } from "./locale.js";
+/* 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" });
+/** How many of an approval's arguments show before the rest become "+N". */
+const maximumArgumentRows = 3;
+/** One conversation of the lib's chat client, polled while its response runs. */
+export function useChatClientSource({ client, conversationId, onConversationCreated, }) {
+    const { labels } = useCiridaeLocale();
+    const state = useChatConversation({ client, conversationId, onConversationCreated });
+    const [sendError, setSendError] = useState(null);
+    // The uploads the composer holds by id, so a message sends the service's own records.
+    const uploadsRef = useRef(new Map());
+    const send = (content, attachments) => {
+        setSendError(null);
+        // The message shows as sending at once, and as not sent with its retry if it fails.
+        state.sendMessage(content, attachments).catch((error) => {
+            setSendError(error instanceof Error ? error.message : String(error));
+        });
+    };
+    const toChatAttachment = (attachment) => ({
+        id: attachment.id,
+        name: attachment.name,
+        mediaType: attachment.media_type,
+        url: client.getAttachmentUrl(attachment),
+    });
+    const { response, items, pendingMessages, isResponseActive } = state;
+    const status = response?.status === "failed"
+        ? "failed"
+        : response?.status === "cancelled"
+            ? "stopped"
+            : isResponseActive && response?.status !== "requires_action"
+                ? "running"
+                : "idle";
+    const failedTurnMessages = response?.status === "failed"
+        ? 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),
+            decideApproval: state.decideApproval,
+            answerQuestion: state.answerQuestion,
+        });
+        if (converted)
+            conversationItems.push(converted);
+    }
+    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;
+        conversationItems.push({
+            kind: "message",
+            id: message.localId,
+            role: "user",
+            at: message.sentAt,
+            text: message.content,
+            attachments: message.attachments.map(toChatAttachment),
+            sending: message.state === "sending",
+            failure: message.state === "failed"
+                ? {
+                    message: sendError ?? labels.chat.notSent,
+                    retry: () => {
+                        state.discardPendingMessage(message.localId);
+                        send(message.content, message.attachments);
+                    },
+                }
+                : undefined,
+        });
+    }
+    return {
+        items: conversationItems,
+        status,
+        loading: state.isLoading,
+        failureMessage: response?.error?.message,
+        retry: lastUserMessage
+            ? () => send(lastUserMessage.content, lastUserMessage.attachments)
+            : undefined,
+        send: async ({ text, attachments }) => send(text, attachments.flatMap((attachment) => uploadsRef.current.get(attachment.id) ?? [])),
+        upload: async (file) => {
+            const attachment = await client.uploadAttachment(file);
+            uploadsRef.current.set(attachment.id, attachment);
+            return toChatAttachment(attachment);
+        },
+    };
+}
+/** The chat client's conversations, newest first, as `ChatHistory` lists them. */
+export function useChatClientConversations(client) {
+    const list = useConversationList(client);
+    const conversations = useMemo(() => (list.data?.pages ?? []).flatMap((page) => page.data.map((conversation) => ({
+        id: conversation.id,
+        title: conversation.title,
+        preview: conversation.preview,
+        updatedAt: Date.parse(conversation.updated_at),
+        running: conversation.latest_response?.status === "queued" ||
+            conversation.latest_response?.status === "in_progress",
+    }))), [list.data]);
+    return { conversations, loading: list.isPending };
+}
+/**
+ * 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":
+            return {
+                kind: "message",
+                id: item.id,
+                at,
+                role: item.role,
+                text: item.content,
+                attachments: item.attachments.map(toChatAttachment),
+            };
+        case "approval_request":
+            if (item.decision !== null) {
+                return {
+                    kind: "line",
+                    id: item.id,
+                    at,
+                    text: `${describeToolCall(item.tool)} · ${decided(item.decision)}`,
+                };
+            }
+            return waitingOnUser
+                ? {
+                    kind: "card",
+                    id: item.id,
+                    at,
+                    content: _jsx(ApprovalCard, { item: item, onDecide: decideApproval }),
+                }
+                : null;
+        case "question":
+            if (item.answers !== null) {
+                return {
+                    kind: "line",
+                    id: item.id,
+                    at,
+                    text: answered(item.answers.flat().filter(Boolean).join(", ")),
+                };
+            }
+            return waitingOnUser
+                ? {
+                    kind: "card",
+                    id: item.id,
+                    at,
+                    content: _jsx(QuestionCard, { item: item, onAnswer: answerQuestion }),
+                }
+                : 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":
+            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: 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, }) {
+    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]));
+        }
+        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 [];
+    }
+}