@ciridae/ui 1.0.3 → 1.0.4

package/dist/components/chat.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ArrowClockwiseIcon, ArrowDownIcon, ArrowUpIcon } from "@phosphor-icons/react";
+import { ArrowClockwiseIcon, ArrowDownIcon, ArrowUpIcon, CaretRightIcon, LightbulbIcon, WarningCircleIcon, WrenchIcon, } from "@phosphor-icons/react";
 import { isSameDay, isToday, isYesterday } from "date-fns";
 import { Fragment, useEffect, useRef, useState, useSyncExternalStore, } from "react";
 import { css, cva, cx } from "#primitives/css";
@@ -7,20 +7,20 @@ import { listMessageGroupPositions, } from "../chat/message-group-position.js";
 import { Button, IconButton } from "./button.js";
 import { Avatar } from "./data-display.js";
 import { fileSquare, fileTypeIcon } from "./dropzone.js";
-import { icon, Spinner } from "./icon.js";
+import { directional, icon, Spinner } from "./icon.js";
 import { Lightbox } from "./lightbox.js";
 import { useCiridaeLocale } from "./locale.js";
+import { LogGroupHeader } from "./log-entry.js";
 import { MentionInput } from "./mention-input.js";
 import { useResolvedFileUrl } from "./resolved-file-url.js";
 export { MessageText, splitSources, } from "../chat/message-text.js";
 /*
- * Two composers share one behaviour: `page` is the wide card of a chat page, and `sheet` the
- * composer at the foot of the agent sheet, its parts side by side as a messaging app's: the tools
- * as bare icons, the text in a box of its own and a round send, all level with the box's last
- * line. The box reads as a pill while it holds one line and as a soft card as it grows, line by
- * line to six before it scrolls; what goes with the message, such as files, waits as chips just
- * above it. `feed` is the sheet's composer for a comment under an activity feed: Enter breaks the
- * line there, and Cmd/Ctrl+Enter sends.
+ * Three composers share one behaviour. `page` is the wide card of a chat page. `sheet` is the
+ * composer at the foot of the agent sheet: one soft card holding the text, which grows line by
+ * line to six before it scrolls, over a bar with the tools as bare icons on the left and a small
+ * round send on the right; what goes with the message, such as files, waits as chips over the
+ * text. `feed` is a comment field under an activity feed: a pill with its send inside, which
+ * grows into a soft card past one line; Enter breaks the line there, and Cmd/Ctrl+Enter sends.
  */
 const pageComposer = css({
     display: "flex",
@@ -47,47 +47,136 @@ const pageInput = css({
     _phone: { minHeight: "chat.inputMobile", padding: "panel.comfortable" },
 });
 const sheetComposer = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "layout.contentGap",
+    width: "100%",
+    minWidth: "0",
+    padding: "panel.default",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "field",
+    background: "bg.field",
+    _focusWithin: { borderColor: "border.focus", boxShadow: "focus" },
+});
+// Wrapped lines take the body's spacing. The margins give back the leading past one line of
+// type, so a one-line composer stays the kit's height, its text box exactly one em tall.
+const sheetInput = css({
+    maxHeight: "6lh",
+    marginBlock: "calc((1em - 1lh) / 2)",
+    fontSize: "body",
+    fontWeight: "medium",
+    lineHeight: "body",
+});
+// Under the text: the tools on the left, and on the right the actions and the send, a 26px
+// round, smaller than any other icon button.
+const sheetBar = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    minWidth: "0",
+    "& > [data-tools], & > [data-send]": {
+        display: "flex",
+        flexShrink: "0",
+        alignItems: "center",
+        gap: "layout.controlGap",
+    },
+    "& > [data-send] > [data-send-button]": { width: "control.send", height: "control.send" },
+});
+const feedComposer = css({
     display: "flex",
     alignItems: "flex-end",
     gap: "layout.tightGap",
     width: "100%",
     minWidth: "0",
 });
-// The tools and send: as tall as the box at one line, so they stay level with its last line.
-const sheetSide = css({
+// The tools beside the feed's pill: as tall as its send, so they stay level with its last line.
+const feedTools = css({
     display: "flex",
     flexShrink: "0",
     alignItems: "center",
     gap: "layout.tightGap",
-    height: "control.compact",
+    height: "calc(token(sizes.control.compact) + 2 * token(spacing.control.compactBlock))",
 });
-const sheetColumn = css({ display: "grid", flex: "1", minWidth: "0", gap: "layout.tightGap" });
-const sheetBox = css({
+const feedColumn = css({ display: "grid", flex: "1", minWidth: "0", gap: "layout.tightGap" });
+// The pill's 1px stroke sits inside its padding, so a one-line pill is the kit's height: the send
+// plus its padding above and below.
+const feedBox = css({
     display: "flex",
     alignItems: "flex-end",
+    gap: "layout.controlGap",
     minWidth: "0",
+    paddingBlock: "calc(token(spacing.control.compactBlock) - token(sizes.border.hairline))",
+    paddingInlineStart: "control.compactInline",
+    paddingInlineEnd: "control.compactBlock",
     border: "1px solid token(colors.border.control)",
     // Half the one-line height: a pill at one line, a soft card past it.
-    borderRadius: "calc(token(sizes.control.compact) / 2)",
-    background: "bg.field",
+    borderRadius: "calc((token(sizes.control.compact) + 2 * token(spacing.control.compactBlock)) / 2)",
+    background: "token(gradients.card)",
     _focusWithin: { borderColor: "border.focus", boxShadow: "focus" },
     "& > [data-actions]": {
         display: "flex",
         flexShrink: "0",
         alignItems: "center",
-        height: "calc(token(sizes.control.compact) - 2px)",
-        paddingInlineEnd: "control.trackInset",
+        height: "control.compact",
+    },
+    "& > [data-actions] > [data-send-button]": {
+        width: "control.compact",
+        height: "control.compact",
     },
 });
-// Each line keeps the one-line box's rhythm, so the first wrap only adds a line.
-const sheetInput = css({
+// Each line keeps the one-line pill's rhythm, so the first wrap only adds a line. Wrapped lines
+// take the body's spacing, as the sheet's do.
+const feedInput = css({
     flex: "1",
-    paddingInline: "control.compactInline",
-    paddingBlock: "calc((token(sizes.control.compact) - 2px - 1lh) / 2)",
-    maxHeight: "calc(5lh + token(sizes.control.compact) - 2px)",
-    fontSize: "caption",
-    lineHeight: "compact",
+    paddingBlock: "calc((token(sizes.control.compact) - 1lh) / 2)",
+    maxHeight: "calc(5lh + token(sizes.control.compact))",
+    fontSize: "body",
+    fontWeight: "medium",
+    lineHeight: "body",
+});
+/* A tool in the sheet composer's bar: a bare icon, with no face of its own. */
+const composerTool = css({
+    display: "inline-flex",
+    padding: "none",
+    border: "0",
+    borderRadius: "control",
+    background: "transparent",
+    color: "fg.subtle",
+    cursor: "pointer",
+    _hover: { color: "fg.primary" },
+    _focusVisible: { focusRing: "outer" },
+    _disabled: { opacity: "disabled", cursor: "not-allowed" },
+    "&[aria-pressed=true]": { color: "fg.primary" },
 });
+/*
+ * Dictation's level meter, in the composer's bar while the host listens: a bar per sample,
+ * newest last, spread across the room the bar leaves it. Bars move with no transition, since one
+ * would blur the motion of a meter updated several times a second.
+ */
+const dictationWaveform = css({
+    display: "flex",
+    flex: "1",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "control.trackInset",
+    minWidth: "0",
+    height: "control.shortcut",
+    overflow: "hidden",
+    "& > span": {
+        flex: "1",
+        minWidth: "1px",
+        // A spacing token, so it is read through token(); a sizes property would print its name.
+        maxWidth: "token(spacing.layout.tightGap)",
+        height: "100%",
+        borderRadius: "round",
+        background: "fg.subtle",
+        transformOrigin: "center",
+    },
+    "&[data-listening] > span": { background: "fg.secondary" },
+});
+/** How short a silent bar of the dictation waveform is, as a share of its full height. */
+const silentWaveformLevel = 0.12;
 const composerFooter = css({
     display: "flex",
     alignItems: "center",
@@ -133,39 +222,48 @@ const chatAction = css({
     _hover: { color: "fg.primary", borderColor: "fg.muted" },
 });
 /*
- * A message bubble in the agent sheet: the user's on the right in the primary face, the
- * assistant's on the left in the neutral fill. The corner on its side is small where it joins the
- * bubble above or below it, so a run of messages reads as one stack.
+ * A message bubble: the user's on the right in the selected neutral face, under its gradient edge;
+ * another author's on the left in the neutral fill. Where a bubble joins the one above or below
+ * it on its side, that corner is small, so a run of messages reads as one stack.
  */
 const bubble = cva({
     base: {
         position: "relative",
         maxWidth: "chat.bubble",
-        paddingBlock: "control.compactBlock",
-        paddingInline: "control.compactInline",
+        paddingBlock: "field.block",
+        paddingInline: "control.tabInline",
         borderRadius: "field",
-        fontSize: "caption",
-        lineHeight: "log",
+        color: "fg.primary",
+        fontSize: "body",
+        lineHeight: "compact",
         overflowWrap: "anywhere",
     },
     variants: {
         side: {
             user: {
                 alignSelf: "flex-end",
-                borderEndEndRadius: "keycap",
-                background: "bg.primary",
-                color: "bg.canvas",
-                _light: { color: "fg.onAccent" },
+                // Wrapped lines take the body's spacing. The kit sets one line at the type's own height
+                // with its 1px stroke in the layout, so the padding gives back the extra leading and
+                // a one-line bubble stays the kit's height.
+                paddingBlock: "calc(token(spacing.field.block) + token(sizes.border.hairline) - (1lh - 1em) / 2)",
+                paddingInline: "calc(token(spacing.control.tabInline) + token(sizes.border.hairline))",
+                lineHeight: "body",
+                background: "token(gradients.selected)",
                 whiteSpace: "pre-wrap",
+                "&::before": { background: "token(gradients.border.selected)" },
+                "&[data-group-position=first], &[data-group-position=middle]": {
+                    borderEndEndRadius: "keycap",
+                },
                 "&[data-group-position=middle], &[data-group-position=last]": {
                     borderStartEndRadius: "keycap",
                 },
             },
             assistant: {
                 alignSelf: "flex-start",
-                borderEndStartRadius: "keycap",
                 background: "bg.fill",
-                color: "fg.primary",
+                "&[data-group-position=first], &[data-group-position=middle]": {
+                    borderEndStartRadius: "keycap",
+                },
                 "&[data-group-position=middle], &[data-group-position=last]": {
                     borderStartStartRadius: "keycap",
                 },
@@ -173,6 +271,17 @@ const bubble = cva({
         },
     },
 });
+/* An answer in a thread of `plain` replies: text on the sheet itself, the thread's full width. */
+const plainReply = css({
+    display: "grid",
+    gap: "layout.contentGap",
+    width: "100%",
+    minWidth: "0",
+    color: "fg.primary",
+    fontSize: "body",
+    lineHeight: "body",
+    overflowWrap: "anywhere",
+});
 /** A line about the conversation rather than in it, centered between bubbles. */
 const systemLine = css({
     alignSelf: "center",
@@ -184,16 +293,18 @@ const systemLine = css({
     overflowWrap: "anywhere",
     "&[data-tone=error]": { color: "accent.red" },
 });
-const dayLabel = css({ marginBlock: "layout.controlGap", fontWeight: "medium" });
 /*
- * The thread: bubbles 4px apart, groups 12px apart, lines centered between them. Compact, as the
- * agent sheet draws it, keeps 8px above and below and between groups.
+ * The thread: bubbles 4px apart and groups 12px apart, lines centered between them. Compact
+ * keeps 8px above and below and between groups. Plain replies sit 16px in from the sheet's
+ * edges, an answer's parts 12px apart and one turn 16px from the next.
  */
 const thread = css({
     display: "flex",
     flexDirection: "column",
     gap: "layout.tightGap",
     padding: "panel.default",
+    // Every line in the thread is set in the medium weight: bubbles, replies, cited cards and meta.
+    fontWeight: "medium",
     // The thread follows its newest entry itself: the browser's scroll anchoring would hold the
     // view on what was there as a reply lands and pull it off the foot.
     overflowAnchor: "none",
@@ -203,6 +314,15 @@ const thread = css({
             marginTop: "layout.tightGap",
         },
     },
+    "&[data-reply-style=plain]": {
+        padding: "panel.comfortable",
+        "& > [data-group-position=middle], & > [data-group-position=last]": {
+            marginTop: "layout.controlGap",
+        },
+        "& > :is([data-group-position=single], [data-group-position=first]):not(:first-child)": {
+            marginTop: "layout.contentGap",
+        },
+    },
 });
 /*
  * Under the thread, held at the foot of the scrolling area while the reader is away from the
@@ -222,7 +342,7 @@ const latestSlot = css({
 });
 /** How close to the bottom the reader must be for new content to keep the thread at its foot. */
 const followDistancePx = 96;
-/* A reply's sources under its bubble: small links in a row. */
+/* A reply's sources under it: small links in a row, and the ones with a quote as cards. */
 const sourceRow = css({
     display: "flex",
     flexWrap: "wrap",
@@ -230,14 +350,72 @@ const sourceRow = css({
     columnGap: "layout.controlGap",
     rowGap: "control.trackInset",
     paddingInline: "layout.tightGap",
-    color: "fg.muted",
+    color: "fg.subtle",
     fontSize: "code",
     lineHeight: "compact",
-    "[data-side=assistant] > &": {
+    "[data-avatar] > &": {
         marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
     },
+    "[data-reply-style=plain] > * > &": { paddingInline: "none" },
     "& a": { color: "fg.secondary", textDecoration: "none", _hover: { color: "fg.primary" } },
 });
+const sourceCardList = css({
+    display: "grid",
+    gap: "layout.contentGap",
+    "[data-avatar] > &": {
+        marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
+    },
+});
+/*
+ * A source a reply cites, as a card: what it is under its icon, what it says, and when or by
+ * whom. `yellow` marks a rule or a value the reply weighs, on the warm wash.
+ */
+const sourceCard = css({
+    display: "grid",
+    gap: "control.iconGap",
+    padding: "panel.default",
+    border: "1px solid token(colors.border.divider)",
+    borderRadius: "action",
+    background: "token(gradients.card)",
+    color: "fg.primary",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "log",
+    textDecoration: "none",
+    "&[data-tone=yellow]": { background: "bg.warningTint" },
+    "& > [data-head]": {
+        display: "flex",
+        alignItems: "center",
+        gap: "control.iconGap",
+        minWidth: "0",
+        color: "fg.subtle",
+        lineHeight: "tight",
+        "& > svg": { flexShrink: "0", fontSize: "icon.small" },
+    },
+    "&[data-tone=yellow] > [data-head]": { color: "accent.yellowIcon" },
+    "& > [data-meta]": { color: "fg.subtle", lineHeight: "tight" },
+    "&:is(a)": { _hover: { borderColor: "border.selected" }, _focusVisible: { focusRing: "outer" } },
+});
+/* Buttons under a reply for what it suggests doing, always shown. */
+const suggestedActionRow = css({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    "[data-avatar] > &": {
+        marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
+    },
+});
+/* A reply's closing line, such as what it read, quieter than the reply. */
+const footnote = css({
+    margin: "none",
+    color: "fg.subtle",
+    fontSize: "code",
+    lineHeight: "log",
+    "[data-avatar] > &": {
+        marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
+    },
+});
 /* Files sent with a message, as tiles over its bubble: image thumbnails, or a file's icon and name. */
 const attachmentTiles = css({
     display: "flex",
@@ -245,7 +423,7 @@ const attachmentTiles = css({
     gap: "layout.tightGap",
     maxWidth: "chat.bubble",
     "[data-side=user] > &": { justifyContent: "flex-end" },
-    "[data-side=assistant] > &": {
+    "[data-avatar] > &": {
         marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
     },
 });
@@ -287,6 +465,8 @@ const entryBlock = css({
     "&[data-group-position=single], &[data-group-position=first]": {
         marginTop: "layout.controlGap",
     },
+    // A plain reply's parts, such as its cards and buttons under its text, sit 12px apart.
+    "&[data-side=assistant]": { "[data-reply-style=plain] > &": { gap: "layout.contentGap" } },
     // A message's own controls, such as Copy, show while it is hovered or focused.
     "& [data-entry-actions]": {
         display: "inline-flex",
@@ -307,6 +487,8 @@ const entryRow = css({
     width: "100%",
     minWidth: "0",
     "[data-side=user] > &": { justifyContent: "flex-end" },
+    // A plain reply's Copy sits at the top of its text, which may run long.
+    "[data-reply-style=plain] > [data-side=assistant] > &": { alignItems: "flex-start" },
 });
 const avatarSlot = css({ flexShrink: "0", width: "avatar.small" });
 const entryFooter = css({
@@ -314,11 +496,11 @@ const entryFooter = css({
     alignItems: "center",
     gap: "control.iconGap",
     paddingInline: "layout.tightGap",
-    color: "fg.muted",
+    color: "fg.subtle",
     fontSize: "code",
     lineHeight: "compact",
     fontVariantNumeric: "tabular-nums",
-    "[data-side=assistant] > &": {
+    "[data-avatar] > &": {
         marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
     },
 });
@@ -331,37 +513,107 @@ const attachmentList = css({
     fontSize: "code",
     "& a": { color: "inherit" },
 });
-const typingBubble = css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "control.iconGap",
-    color: "fg.muted",
+/*
+ * The agent at work, before its reply: what it is doing beside a spinner, over three lines of
+ * the reply to come. The lines stand in for the reply's text, so each is that text's bar height.
+ */
+const thinking = css({
+    display: "grid",
+    gap: "layout.contentGap",
+    width: "100%",
+    minWidth: "0",
+    "& > [data-status]": {
+        display: "flex",
+        alignItems: "center",
+        gap: "layout.controlGap",
+        minWidth: "0",
+        color: "fg.secondary",
+        fontSize: "code",
+        lineHeight: "tight",
+        "& > span": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+    },
+    "& > [data-line]": {
+        display: "block",
+        height: "calc(token(fontSizes.body) * 0.75)",
+        borderRadius: "round",
+        background: "token(gradients.skeletonFill)",
+    },
+    "& > [data-line]:nth-of-type(1)": { width: "98%" },
+    "& > [data-line]:nth-of-type(2)": { width: "87%" },
+    "& > [data-line]:nth-of-type(3)": { width: "66%" },
+});
+/* A reply the agent could not finish: a notice of why, with Try again under it. */
+const failure = css({
+    display: "grid",
+    justifyItems: "start",
+    gap: "layout.contentGap",
+    width: "100%",
+    minWidth: "0",
 });
-const errorBubble = css({
+const failureNotice = css({
     display: "flex",
-    flexWrap: "wrap",
-    alignItems: "center",
     gap: "layout.controlGap",
-    border: "1px solid token(colors.border.error)",
-    background: "bg.errorSubtle",
+    width: "100%",
+    paddingBlock: "panel.default",
+    paddingInline: "control.tabInline",
+    borderRadius: "action",
+    background: "token(gradients.selected)",
+    "&::before": { background: "token(gradients.border.raised)" },
+    "& > svg": { flexShrink: "0", fontSize: "icon.small", color: "accent.red" },
+    "& > [data-copy]": { display: "grid", gap: "layout.tightGap", minWidth: "0" },
+    "& [data-title]": {
+        color: "accent.red",
+        fontSize: "body",
+        fontWeight: "medium",
+        lineHeight: "tight",
+    },
+    "& [data-description]": { color: "fg.secondary", fontSize: "code", lineHeight: "log" },
 });
-const typingDots = css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "control.trackInset",
-    height: "1lh",
-    "& > span": {
-        width: "indicator.live",
-        height: "indicator.live",
-        borderRadius: "round",
-        background: "fg.muted",
-        animation: "livePulse 1.2s ease-in-out infinite",
-        _motionReduce: { animation: "none" },
+/*
+ * The steps the agent took on its way to a reply, folded into one quiet line naming the first and
+ * how many more; open, a row for each, its state's icon beside what it did.
+ */
+const stepList = css({
+    width: "100%",
+    minWidth: "0",
+    color: "fg.subtle",
+    fontSize: "code",
+    lineHeight: "tight",
+    "& > summary": {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "control.iconGap",
+        maxWidth: "100%",
+        borderRadius: "control",
+        cursor: "pointer",
+        listStyle: "none",
+        "&::-webkit-details-marker": { display: "none" },
+        _hover: { color: "fg.primary" },
+        _focusVisible: { focusRing: "outer" },
+        "& > svg": { flexShrink: "0", transitionProperty: "rotate", transitionDuration: "fast" },
+        "& > span": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+    },
+    "&[open] > summary > svg": { rotate: "90deg" },
+    "& > ol": {
+        display: "grid",
+        gap: "layout.controlGap",
+        margin: "none",
+        paddingBlockStart: "layout.contentGap",
+        paddingInlineStart: "none",
+        listStyle: "none",
+    },
+    "& li": {
+        display: "grid",
+        gridTemplateColumns: "token(sizes.mark.inline) minmax(0, 1fr)",
+        columnGap: "layout.controlGap",
+        alignItems: "start",
+        "& > svg": { fontSize: "icon.small" },
+        "&[data-status=failed] > svg": { color: "accent.red" },
+        "& > [data-title]": { color: "fg.secondary" },
+        "& > [data-detail]": { gridColumn: "2", lineHeight: "log", overflowWrap: "anywhere" },
     },
-    "& > span:nth-child(2)": { animationDelay: "0.2s" },
-    "& > span:nth-child(3)": { animationDelay: "0.4s" },
 });
-export function ChatComposer({ value, defaultValue = "", onValueChange, onSend, placeholder, ariaLabel: ownAriaLabel, tools, actions, submitLabel: ownSubmitLabel, sendDisabled = false, sendsWithoutText = false, attachments, onPasteFiles, variant = "page", autoFocus, mentions, mentionMark, mentionsLabel, inputProps, className, ...props }) {
+export function ChatComposer({ value, defaultValue = "", onValueChange, onSend, placeholder, ariaLabel: ownAriaLabel, tools, actions, submitLabel: ownSubmitLabel, sendDisabled = false, sendsWithoutText = false, attachments, onPasteFiles, dictation, variant = "page", autoFocus, mentions, mentionMark, mentionsLabel, inputProps, className, ...props }) {
     const { labels } = useCiridaeLocale();
     const ariaLabel = ownAriaLabel ?? labels.chat.message;
     const submitLabel = ownSubmitLabel ?? labels.chat.sendMessage;
@@ -379,7 +631,6 @@ export function ChatComposer({ value, defaultValue = "", onValueChange, onSend,
         onSend?.(currentValue);
         setValue("");
     };
-    const sheet = variant !== "page";
     // In the capture phase, ahead of the text field and of an enclosing `Dropzone`, which would
     // take the same files again.
     const pasteFiles = onPasteFiles
@@ -393,40 +644,59 @@ export function ChatComposer({ value, defaultValue = "", onValueChange, onSend,
             onPasteFiles(Array.from(files));
         }
         : undefined;
-    const input = (_jsx(MentionInput, { ...inputProps, "aria-label": ariaLabel, autoFocus: autoFocus, className: cx(sheet ? sheetInput : pageInput, inputProps?.className), value: currentValue, onValueChange: setValue, triggers: mentions, mentionMark: mentionMark, listLabel: mentionsLabel, placeholder: placeholder, submitOn: variant === "feed" ? "mod+enter" : "enter", onSubmit: send }));
-    // The sheet's send is quiet until there is something to send.
-    const sendButton = (_jsx(IconButton, { "aria-label": submitLabel, disabled: !canSend, onClick: send, variant: sheet ? (canSend ? "primary" : "ghost") : "raised", children: _jsx(ArrowUpIcon, { className: icon({ size: "small" }), weight: "bold" }) }));
+    const input = (_jsx(MentionInput, { ...inputProps, "aria-label": ariaLabel, autoFocus: autoFocus, className: cx(variant === "page" ? pageInput : variant === "sheet" ? sheetInput : feedInput, inputProps?.className), value: currentValue, onValueChange: setValue, triggers: mentions, mentionMark: mentionMark, listLabel: mentionsLabel, placeholder: placeholder, submitOn: variant === "feed" ? "mod+enter" : "enter", onSubmit: send }));
+    // The sheet's send is the bar's small round one; the feed's sits in its pill, 32 round.
+    const sendButton = (_jsx(IconButton, { "aria-label": submitLabel, disabled: !canSend, onClick: send, variant: variant === "page" ? "raised" : "primary", "data-send-button": "", children: _jsx(ArrowUpIcon, { className: icon({ size: "small" }), weight: "bold" }) }));
     const waiting = attachments ? _jsx("div", { "data-attachments": "", children: attachments }) : null;
-    if (sheet) {
-        return (_jsxs("div", { ...props, className: cx(sheetComposer, className), "data-ciridae-ui": "", onPasteCapture: pasteFiles, children: [tools && _jsx("div", { className: sheetSide, children: tools }), _jsxs("div", { className: sheetColumn, children: [waiting, _jsxs("div", { className: sheetBox, children: [input, actions && _jsx("div", { "data-actions": "", children: actions })] })] }), _jsx("div", { className: sheetSide, children: sendButton })] }));
+    const waveform = dictation && (_jsx(ChatDictationWaveform, { levels: dictation.levels, listening: dictation.listening }));
+    if (variant === "sheet") {
+        return (_jsxs("div", { ...props, className: cx(sheetComposer, className), "data-ciridae-ui": "", onPasteCapture: pasteFiles, children: [waiting, input, _jsxs("div", { className: sheetBar, children: [_jsx("div", { "data-tools": "", children: tools }), waveform, _jsxs("div", { "data-send": "", children: [actions, sendButton] })] })] }));
+    }
+    if (variant === "feed") {
+        return (_jsxs("div", { ...props, className: cx(feedComposer, className), "data-ciridae-ui": "", onPasteCapture: pasteFiles, children: [tools && _jsx("div", { className: feedTools, children: tools }), _jsxs("div", { className: feedColumn, children: [waiting, _jsxs("div", { className: feedBox, children: [input, waveform, _jsxs("div", { "data-actions": "", children: [actions, sendButton] })] })] })] }));
     }
-    return (_jsxs("div", { ...props, className: cx(pageComposer, className), "data-ciridae-ui": "", onPasteCapture: pasteFiles, children: [waiting, input, _jsxs("div", { className: composerFooter, children: [_jsx("div", { className: actionGroup, children: tools }), _jsxs("div", { className: actionGroup, children: [actions, sendButton] })] })] }));
+    return (_jsxs("div", { ...props, className: cx(pageComposer, className), "data-ciridae-ui": "", onPasteCapture: pasteFiles, children: [waiting, input, _jsxs("div", { className: composerFooter, children: [_jsx("div", { className: actionGroup, children: tools }), waveform, _jsxs("div", { className: actionGroup, children: [actions, sendButton] })] })] }));
+}
+/** A tool for the sheet composer's bar, such as the paperclip: its icon alone. */
+export function ChatComposerTool({ className, ...props }) {
+    return (_jsx("button", { type: "button", ...props, className: cx(composerTool, className), "data-ciridae-ui": "" }));
+}
+/**
+ * Dictation's waveform: a bar per level, each as tall as its level; flat while `listening` is
+ * off, such as while the host turns what it heard into text.
+ */
+export function ChatDictationWaveform({ levels, listening, className, ...props }) {
+    return (_jsx("div", { ...props, className: cx(dictationWaveform, className), "data-ciridae-ui": "", "data-listening": listening || undefined, "aria-hidden": "true", children: levels.map((level, index) => (_jsx("span", { style: {
+                transform: `scaleY(${listening ? Math.max(silentWaveformLevel, level) : silentWaveformLevel})`,
+            } }, index))) }));
 }
-/** A message bubble in the agent sheet. */
+/** A message bubble: the user's raised on the right, another author's filled on the left. */
 export function ChatBubble({ side, groupPosition, className, ...props }) {
-    return (_jsx("div", { ...props, className: cx(bubble({ side }), className), "data-ciridae-ui": "", "data-group-position": groupPosition }));
+    return (_jsx("div", { ...props, className: cx(bubble({ side }), className), "data-ciridae-ui": "", "data-edge": side === "user" ? "gradient" : undefined, "data-group-position": groupPosition }));
 }
 /** A centered line between bubbles: a finished tool call, a decision, something the page did. */
 export function ChatSystemLine({ tone, className, ...props }) {
     return (_jsx("div", { ...props, className: cx(systemLine, className), "data-ciridae-ui": "", "data-tone": tone === "error" ? "error" : undefined }));
 }
-/** Three pulsing dots: the assistant is typing. */
-export function ChatTypingDots({ className, ...props }) {
-    return (_jsxs("span", { ...props, className: cx(typingDots, className), "data-ciridae-ui": "", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }));
-}
 export function ChatAction({ className, ...props }) {
     return (_jsx("button", { ...props, className: cx(chatAction, className), "data-ciridae-ui": "", type: props.type ?? "button" }));
 }
+/** A source cited in a reply, as a card of what it says under its name. */
+export function ChatSourceCard({ label, icon, children, meta, tone = "neutral", href, className, }) {
+    const content = (_jsxs(_Fragment, { children: [_jsxs("span", { "data-head": "", children: [icon, label] }), _jsx("span", { children: children }), meta && _jsx("span", { "data-meta": "", children: meta })] }));
+    return href ? (_jsx("a", { href: href, className: cx(sourceCard, className), "data-ciridae-ui": "", "data-tone": tone, children: content })) : (_jsx("div", { className: cx(sourceCard, className), "data-ciridae-ui": "", "data-tone": tone, children: content }));
+}
 /*
  * A conversation in time order. Close messages from one author read as a group: bubbles 4px
- * apart, groups 8px apart, the author's avatar beside the group's last bubble on the assistant's
+ * apart, groups 12px apart, the author's avatar beside the group's last bubble on the assistant's
  * side and the author and time once under it. The nearest scrolling ancestor follows the newest
  * entry while the reader is at its foot; scrolled up, reading back, a jump to the newest shows
  * instead. A message the user sends always brings the thread to its foot.
  */
-export function ChatThread({ entries, assistant, renderCustom, formatTime, density = "comfortable", attachmentTiles = false, dayLabels = false, resolveAttachmentUrl, className, }) {
+export function ChatThread({ entries, assistant, renderCustom, formatTime, density = "comfortable", replyStyle = "bubble", attachmentTiles = false, dayLabels = false, resolveAttachmentUrl, className, }) {
     const rootRef = useRef(null);
     const { formatDateTime, labels } = useCiridaeLocale();
+    const plain = replyStyle === "plain";
     const authorOf = (entry) => entry.kind === "line" || entrySide(entry) === "user"
         ? undefined
         : ((entry.kind === "message" ? entry.author : undefined) ?? assistant);
@@ -439,11 +709,11 @@ export function ChatThread({ entries, assistant, renderCustom, formatTime, densi
         .reverse()
         .find((entry) => entry.kind === "message" && entry.side === "user");
     const latest = useFollowLatest(rootRef, newestUserMessage?.id);
-    return (_jsxs("div", { ref: rootRef, className: cx(thread, className), "data-ciridae-ui": "", "data-density": density === "compact" ? "compact" : undefined, children: [entries.map((entry, index) => {
+    return (_jsxs("div", { ref: rootRef, className: cx(thread, className), "data-ciridae-ui": "", "data-density": density === "compact" ? "compact" : undefined, "data-reply-style": replyStyle, children: [entries.map((entry, index) => {
                 const previous = entries[index - 1];
                 const newDay = dayLabels && (!previous || !isSameDay(previous.at, entry.at));
                 const content = renderEntry(entry, index);
-                return newDay ? (_jsxs(Fragment, { children: [_jsx(DayLabel, { at: entry.at }), content] }, entry.id)) : (content);
+                return newDay ? (_jsxs(Fragment, { children: [_jsx(DayHeading, { at: entry.at }), content] }, entry.id)) : (content);
             }), _jsx("div", { className: latestSlot, children: latest.away && (_jsx(IconButton, { "aria-label": labels.chat.scrollToLatest, size: "compact", variant: "raised", onClick: latest.scrollToLatest, children: _jsx(ArrowDownIcon, { className: icon({ size: "small" }) }) })) })] }));
     function renderEntry(entry, index) {
         if (entry.kind === "line") {
@@ -454,20 +724,28 @@ export function ChatThread({ entries, assistant, renderCustom, formatTime, densi
         const position = positions[index] ?? undefined;
         const closesGroup = position === "single" || position === "last";
         const message = entry.kind === "message" ? entry : null;
+        const avatar = !plain && side === "assistant";
         const tiles = attachmentTiles && message?.attachments && message.attachments.length > 0
             ? message.attachments
             : null;
-        return (_jsxs("div", { className: entryBlock, "data-side": side, "data-group-position": position, children: [tiles && _jsx(AttachmentTiles, { attachments: tiles, resolveUrl: resolveAttachmentUrl }), !(tiles && message?.body === "") && (_jsxs("div", { className: entryRow, title: message ? formatDateTime(entry.at) : undefined, children: [side === "assistant" && (_jsx("span", { className: avatarSlot, children: closesGroup && author && (_jsx(Avatar, { kind: author.kind, src: author.src, label: author.name, size: "small", "aria-hidden": "true" })) })), _jsx(ThreadEntryContent, { entry: entry, side: side, groupPosition: position, renderCustom: renderCustom, attachmentTiles: attachmentTiles }), message?.actions && !message.sending && (_jsx("span", { "data-entry-actions": "", children: message.actions }))] })), message?.sources && message.sources.length > 0 && (_jsx("span", { className: sourceRow, children: message.sources.map((source) => source.href ? (_jsx("a", { href: source.href, children: source.label }, source.id)) : (_jsx("span", { children: source.label }, source.id))) })), closesGroup && entry.kind !== "typing" && (_jsx("span", { className: entryFooter, children: message?.sending ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true", size: "compact" }), labels.chat.sending] })) : (_jsxs("span", { children: [author && (_jsxs(_Fragment, { children: [author.label ?? author.name, " · "] })), _jsx(MessageTime, { at: entry.at, format: formatTime, dated: !dayLabels })] })) }))] }, entry.id));
+        const sourceLinks = message?.sources?.filter((source) => source.quote === undefined) ?? [];
+        const sourceCards = message?.sources?.filter((source) => source.quote !== undefined) ?? [];
+        // A plain reply drops the assistant's author and time; the user's messages keep their time.
+        const footer = closesGroup &&
+            entry.kind !== "typing" &&
+            entry.kind !== "steps" &&
+            (!plain || side === "user" || message?.sending);
+        return (_jsxs("div", { className: entryBlock, "data-side": side, "data-avatar": avatar || undefined, "data-group-position": position, children: [tiles && _jsx(AttachmentTiles, { attachments: tiles, resolveUrl: resolveAttachmentUrl }), !(tiles && message?.body === "") && (_jsxs("div", { className: entryRow, title: message ? formatDateTime(entry.at) : undefined, children: [avatar && (_jsx("span", { className: avatarSlot, children: closesGroup && author && (_jsx(Avatar, { kind: author.kind, src: author.src, label: author.name, size: "small", "aria-hidden": "true" })) })), _jsx(ThreadEntryContent, { entry: entry, side: side, groupPosition: position, renderCustom: renderCustom, attachmentTiles: attachmentTiles, plain: plain }), message?.actions && !message.sending && (_jsx("span", { "data-entry-actions": "", children: message.actions }))] })), sourceCards.length > 0 && (_jsx("div", { className: sourceCardList, children: sourceCards.map((source) => (_jsx(ChatSourceCard, { label: source.label, icon: source.icon, meta: source.meta, tone: source.tone, href: source.href, children: source.quote }, source.id))) })), sourceLinks.length > 0 && (_jsx("span", { className: sourceRow, children: sourceLinks.map((source) => source.href ? (_jsx("a", { href: source.href, children: source.label }, source.id)) : (_jsx("span", { children: source.label }, source.id))) })), message?.suggestedActions && (_jsx("div", { className: suggestedActionRow, children: message.suggestedActions })), message?.footnote && _jsx("p", { className: footnote, children: message.footnote }), footer && (_jsx("span", { className: entryFooter, children: message?.sending ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true", size: "compact" }), labels.chat.sending] })) : (_jsxs("span", { children: [author && (_jsxs(_Fragment, { children: [author.label ?? author.name, " · "] })), _jsx(MessageTime, { at: entry.at, format: formatTime, dated: !dayLabels })] })) }))] }, entry.id));
     }
 }
-/** A day's heading in a thread that runs over days: Today, Yesterday, or the date. */
-function DayLabel({ at }) {
+/** A day's heading in a thread that runs over days: Today, Yesterday or the weekday, then the date. */
+function DayHeading({ at }) {
     const { labels, formatDate } = useCiridaeLocale();
-    return (_jsx(ChatSystemLine, { role: "separator", className: dayLabel, children: isToday(at)
+    return (_jsx(LogGroupHeader, { role: "separator", "data-day-heading": "", label: isToday(at)
             ? labels.dates.today
             : isYesterday(at)
                 ? labels.dates.yesterday
-                : formatDate(at, { weekday: "long", month: "short", day: "numeric" }) }));
+                : formatDate(at, { weekday: "long" }), meta: formatDate(at, { month: "short", day: "numeric" }) }));
 }
 /** Prompts to start a conversation from, stacked at the foot of an empty thread. */
 export function ChatSuggestions({ suggestions, onSelect, className }) {
@@ -491,20 +769,43 @@ function AttachmentTile({ attachment, resolveUrl, onOpen, }) {
     const content = image ? (_jsx("img", { src: url, alt: attachment.name })) : (_jsxs(_Fragment, { children: [fileTypeIcon({ name: attachment.name, type: attachment.mediaType ?? "" }), _jsx("span", { children: attachment.name })] }));
     return onOpen ? (_jsx("button", { type: "button", className: fileSquare, "data-image": image || undefined, "aria-label": labels.lightbox.preview(attachment.name), title: attachment.name, onClick: onOpen, children: content })) : (_jsx("span", { className: fileSquare, "data-image": image || undefined, title: attachment.name, children: content }));
 }
-function ThreadEntryContent({ entry, side, groupPosition, renderCustom, attachmentTiles: tiles, }) {
-    const { labels } = useCiridaeLocale();
+function ThreadEntryContent({ entry, side, groupPosition, renderCustom, attachmentTiles: tiles, plain, }) {
     switch (entry.kind) {
-        case "message":
-            return (_jsxs(ChatBubble, { side: side, groupPosition: groupPosition, "aria-busy": entry.sending || undefined, children: [entry.body, !tiles && entry.attachments && entry.attachments.length > 0 && (_jsx("span", { className: attachmentList, children: entry.attachments.map((attachment) => attachment.url ? (_jsx("a", { href: attachment.url, target: "_blank", rel: "noreferrer", children: attachment.name }, attachment.id)) : (_jsx("span", { children: attachment.name }, attachment.id))) }))] }));
+        case "message": {
+            const attachmentNames = !tiles && entry.attachments && entry.attachments.length > 0 && (_jsx("span", { className: attachmentList, children: entry.attachments.map((attachment) => attachment.url ? (_jsx("a", { href: attachment.url, target: "_blank", rel: "noreferrer", children: attachment.name }, attachment.id)) : (_jsx("span", { children: attachment.name }, attachment.id))) }));
+            if (plain && side === "assistant") {
+                return (_jsxs("div", { className: plainReply, "aria-busy": entry.sending || undefined, children: [entry.body, attachmentNames] }));
+            }
+            return (_jsxs(ChatBubble, { side: side, groupPosition: groupPosition, "aria-busy": entry.sending || undefined, children: [entry.body, attachmentNames] }));
+        }
         case "typing":
-            return (_jsxs(ChatBubble, { side: side, groupPosition: groupPosition, className: typingBubble, role: "status", "aria-label": labels.chat.typing, children: [entry.label, _jsx(ChatTypingDots, {})] }));
+            return _jsx(AgentThinking, { label: entry.label });
+        case "steps":
+            return _jsx(AgentSteps, { steps: entry.steps });
         case "failure":
-            return (_jsxs(ChatBubble, { side: side, groupPosition: groupPosition, className: errorBubble, role: "alert", children: [entry.message, _jsx(Button, { variant: "ghost", icon: _jsx(ArrowClockwiseIcon, { className: icon({ size: "small" }) }), onClick: entry.onRetry, children: labels.common.retry })] }));
+            return _jsx(FailureNotice, { title: entry.title, message: entry.message, onRetry: entry.onRetry });
         case "custom":
             return renderCustom?.(entry.data);
     }
 }
-/** The side an entry sits on: typing and failures are the assistant's. */
+/** The agent at work: what it is doing beside a spinner, over lines standing in for its reply. */
+function AgentThinking({ label }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsxs("div", { className: thinking, role: "status", children: [_jsxs("div", { "data-status": "", children: [_jsx(Spinner, { "aria-hidden": "true" }), _jsx("span", { children: label ?? labels.common.working })] }), _jsx("span", { "data-line": "" }), _jsx("span", { "data-line": "" }), _jsx("span", { "data-line": "" })] }));
+}
+/** The steps behind a reply, folded into a line naming the first and how many more. */
+function AgentSteps({ steps }) {
+    const [first] = steps;
+    if (!first)
+        return null;
+    return (_jsxs("details", { className: stepList, children: [_jsxs("summary", { children: [_jsx(CaretRightIcon, { className: cx(icon({ size: "compact" }), directional) }), _jsxs("span", { children: [first.title, steps.length > 1 && ` · +${steps.length - 1}`] })] }), _jsx("ol", { children: steps.map((step) => (_jsxs("li", { "data-status": step.status, children: [step.status === "running" ? (_jsx(Spinner, { "aria-hidden": "true" })) : step.status === "failed" ? (_jsx(WarningCircleIcon, { "aria-hidden": "true" })) : step.kind === "tool" ? (_jsx(WrenchIcon, { "aria-hidden": "true" })) : (_jsx(LightbulbIcon, { "aria-hidden": "true" })), _jsx("span", { "data-title": "", children: step.title }), step.detail && _jsx("span", { "data-detail": "", children: step.detail })] }, step.id))) })] }));
+}
+/** A reply that did not finish: a notice of why, and Try again under it. */
+function FailureNotice({ title, message, onRetry, }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsxs("div", { className: failure, children: [_jsxs("div", { className: failureNotice, role: "alert", "data-ciridae-ui": "", "data-edge": "gradient", children: [_jsx(WarningCircleIcon, { "aria-hidden": "true" }), _jsxs("div", { "data-copy": "", children: [_jsx("span", { "data-title": "", children: title ?? labels.chat.couldNotAnswer }), message && _jsx("span", { "data-description": "", children: message })] })] }), _jsx(Button, { variant: "secondary", size: "medium", icon: _jsx(ArrowClockwiseIcon, { className: icon({ size: "small" }) }), onClick: onRetry, children: labels.common.tryAgain })] }));
+}
+/** The side an entry sits on: the agent's work, its steps and failures are the assistant's. */
 function entrySide(entry) {
     return entry.kind === "message" || entry.kind === "custom" ? entry.side : "assistant";
 }