@ciridae/ui 1.0.4 → 1.0.9

package/dist/components/chat.js

@@ -14,17 +14,9 @@ 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";
-/*
- * 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",
-    width: "100%",
+    width: "full",
     flexDirection: "column",
     overflow: "hidden",
     maxWidth: "chat.composer",
@@ -38,9 +30,9 @@ const pageComposer = css({
     "& > [data-attachments]": { paddingInline: "page.inline", paddingTop: "page.inline" },
 });
 const pageInput = css({
-    width: "100%",
+    width: "full",
     minHeight: "chat.input",
-    maxHeight: "calc(10lh + 2 * token(spacing.page.inline))",
+    maxHeight: "[calc(10lh + 2 * token(spacing.page.inline))]",
     padding: "page.inline",
     fontSize: "body",
     lineHeight: "body",
@@ -50,7 +42,7 @@ const sheetComposer = css({
     display: "flex",
     flexDirection: "column",
     gap: "layout.contentGap",
-    width: "100%",
+    width: "full",
     minWidth: "0",
     padding: "panel.default",
     border: "1px solid token(colors.border.control)",
@@ -58,17 +50,15 @@ const sheetComposer = css({
     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.
+// 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)",
+    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.
+// The send is a 26px round, smaller than any other icon button.
 const sheetBar = css({
     display: "flex",
     alignItems: "center",
@@ -87,7 +77,7 @@ const feedComposer = css({
     display: "flex",
     alignItems: "flex-end",
     gap: "layout.tightGap",
-    width: "100%",
+    width: "full",
     minWidth: "0",
 });
 // The tools beside the feed's pill: as tall as its send, so they stay level with its last line.
@@ -96,7 +86,7 @@ const feedTools = css({
     flexShrink: "0",
     alignItems: "center",
     gap: "layout.tightGap",
-    height: "calc(token(sizes.control.compact) + 2 * token(spacing.control.compactBlock))",
+    height: "[calc(token(sizes.control.compact) + 2 * token(spacing.control.compactBlock))]",
 });
 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
@@ -106,13 +96,13 @@ const feedBox = css({
     alignItems: "flex-end",
     gap: "layout.controlGap",
     minWidth: "0",
-    paddingBlock: "calc(token(spacing.control.compactBlock) - token(sizes.border.hairline))",
+    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 * token(spacing.control.compactBlock)) / 2)",
-    background: "token(gradients.card)",
+    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",
@@ -125,17 +115,15 @@ const feedBox = css({
         height: "control.compact",
     },
 });
-// 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.
+// Each line keeps the one-line pill's rhythm, so the first wrap only adds a line.
 const feedInput = css({
     flex: "1",
-    paddingBlock: "calc((token(sizes.control.compact) - 1lh) / 2)",
-    maxHeight: "calc(5lh + token(sizes.control.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",
@@ -149,11 +137,7 @@ const composerTool = css({
     _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.
- */
+/* 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",
@@ -165,17 +149,16 @@ const dictationWaveform = css({
     overflow: "hidden",
     "& > span": {
         flex: "1",
-        minWidth: "1px",
+        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%",
+        maxWidth: "[token(spacing.layout.tightGap)]",
+        height: "full",
         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",
@@ -198,10 +181,10 @@ const actionGroup = css({
     gap: "control.iconGap",
     flexWrap: "wrap",
     _phone: {
-        maxWidth: "100%",
+        maxWidth: "full",
         flexWrap: "nowrap",
         overflowX: "auto",
-        scrollbarWidth: "none",
+        scrollbarWidth: "[none]",
     },
 });
 const chatAction = css({
@@ -222,9 +205,8 @@ const chatAction = css({
     _hover: { color: "fg.primary", borderColor: "fg.muted" },
 });
 /*
- * 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.
+ * 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: {
@@ -243,14 +225,13 @@ const bubble = cva({
             user: {
                 alignSelf: "flex-end",
                 // 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))",
+                // with its 1px stroke in the layout, which the edge's transparent border already counts,
+                // so the padding gives back the extra leading and a one-line bubble stays the kit's 36px.
+                paddingBlock: "[calc(token(spacing.field.block) - (1lh - 1em) / 2)]",
                 lineHeight: "body",
-                background: "token(gradients.selected)",
+                background: "[token(gradients.selected)]",
                 whiteSpace: "pre-wrap",
-                "&::before": { background: "token(gradients.border.selected)" },
+                "&::before": { background: "[token(gradients.border.selected)]" },
                 "&[data-group-position=first], &[data-group-position=middle]": {
                     borderEndEndRadius: "keycap",
                 },
@@ -271,11 +252,10 @@ 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%",
+    width: "full",
     minWidth: "0",
     color: "fg.primary",
     fontSize: "body",
@@ -285,7 +265,7 @@ const plainReply = css({
 /** A line about the conversation rather than in it, centered between bubbles. */
 const systemLine = css({
     alignSelf: "center",
-    maxWidth: "85%",
+    maxWidth: "[85%]",
     color: "fg.muted",
     fontSize: "code",
     lineHeight: "compact",
@@ -295,15 +275,13 @@ const systemLine = css({
 });
 /*
  * 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.
+ * keeps 8px above and below and between groups.
  */
 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.
@@ -331,18 +309,21 @@ const thread = css({
 const latestSlot = css({
     position: "sticky",
     bottom: "layout.controlGap",
-    zIndex: "1",
+    zIndex: "[1]",
     display: "flex",
     alignItems: "flex-end",
     justifyContent: "center",
     height: "0",
-    marginTop: "calc(token(spacing.layout.tightGap) * -1)",
+    marginTop: "[calc(token(spacing.layout.tightGap) * -1)]",
     pointerEvents: "none",
     "& > *": { pointerEvents: "auto", boxShadow: "card" },
 });
 /** 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 it: small links in a row, and the ones with a quote as cards. */
+/* The thread's one live region, which reads each finished reply aloud to a screen reader. */
+const visuallyHidden = css({ srOnly: true });
+/** Past about this many characters an announced reply is cut, so a long one does not hold the reader. */
+const announcedReplyMaximumLength = 300;
 const sourceRow = css({
     display: "flex",
     flexWrap: "wrap",
@@ -354,7 +335,7 @@ const sourceRow = css({
     fontSize: "code",
     lineHeight: "compact",
     "[data-avatar] > &": {
-        marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
+        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" } },
@@ -363,26 +344,22 @@ const sourceCardList = css({
     display: "grid",
     gap: "layout.contentGap",
     "[data-avatar] > &": {
-        marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
+        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)",
+    background: "[token(gradients.card)]",
     color: "fg.primary",
     fontSize: "code",
     fontWeight: "medium",
     lineHeight: "log",
     textDecoration: "none",
-    "&[data-tone=yellow]": { background: "bg.warningTint" },
+    "&[data-tone=warning]": { background: "bg.warningTint" },
     "& > [data-head]": {
         display: "flex",
         alignItems: "center",
@@ -392,28 +369,26 @@ const sourceCard = css({
         lineHeight: "tight",
         "& > svg": { flexShrink: "0", fontSize: "icon.small" },
     },
-    "&[data-tone=yellow] > [data-head]": { color: "accent.yellowIcon" },
+    "&[data-tone=warning] > [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))",
+        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))",
+        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. */
@@ -424,7 +399,7 @@ const attachmentTiles = css({
     maxWidth: "chat.bubble",
     "[data-side=user] > &": { justifyContent: "flex-end" },
     "[data-avatar] > &": {
-        marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
+        marginInlineStart: "[calc(token(sizes.avatar.small) + token(spacing.control.iconGap))]",
     },
 });
 /* Prompts to start from, stacked flush over the composer of an empty conversation. */
@@ -434,14 +409,16 @@ const suggestionList = css({
     alignItems: "flex-start",
     justifyContent: "flex-end",
     gap: "layout.tightGap",
-    minHeight: "100%",
+    minHeight: "full",
     padding: "panel.default",
 });
 const suggestion = css({
     display: "inline-flex",
     alignItems: "center",
-    maxWidth: "100%",
-    height: "control.small",
+    maxWidth: "full",
+    // A prompt longer than the row wraps inside the chip, which grows to hold it.
+    minHeight: "control.small",
+    paddingBlock: "control.compactBlock",
     paddingInline: "control.compactInline",
     border: "1px solid token(colors.border.control)",
     borderRadius: "action",
@@ -465,7 +442,6 @@ 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]": {
@@ -473,18 +449,19 @@ const entryBlock = css({
         alignItems: "center",
         alignSelf: "center",
         flexShrink: "0",
-        opacity: "0",
-        transition: "opacity 120ms ease",
+        opacity: "[0]",
+        transitionProperty: "[opacity]",
+        transitionDuration: "fast",
     },
-    "&:hover [data-entry-actions], &:focus-within [data-entry-actions]": { opacity: "1" },
-    "@media (hover: none)": { "& [data-entry-actions]": { opacity: "1" } },
+    "&:hover [data-entry-actions], &:focus-within [data-entry-actions]": { opacity: "[1]" },
+    "@media (hover: none)": { "& [data-entry-actions]": { opacity: "[1]" } },
 });
 // Full width, so a bubble's maximum is a share of the thread rather than of its own text.
 const entryRow = css({
     display: "flex",
     alignItems: "flex-end",
     gap: "control.iconGap",
-    width: "100%",
+    width: "full",
     minWidth: "0",
     "[data-side=user] > &": { justifyContent: "flex-end" },
     // A plain reply's Copy sits at the top of its text, which may run long.
@@ -501,7 +478,7 @@ const entryFooter = css({
     lineHeight: "compact",
     fontVariantNumeric: "tabular-nums",
     "[data-avatar] > &": {
-        marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
+        marginInlineStart: "[calc(token(sizes.avatar.small) + token(spacing.control.iconGap))]",
     },
 });
 const attachmentList = css({
@@ -509,18 +486,15 @@ const attachmentList = css({
     flexWrap: "wrap",
     gap: "layout.tightGap",
     marginBlockStart: "layout.tightGap",
-    opacity: "0.8",
+    opacity: "[0.8]",
     fontSize: "code",
-    "& a": { color: "inherit" },
+    "& a": { color: "[inherit]" },
 });
-/*
- * 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.
- */
+/* 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%",
+    width: "full",
     minWidth: "0",
     "& > [data-status]": {
         display: "flex",
@@ -534,31 +508,30 @@ const thinking = css({
     },
     "& > [data-line]": {
         display: "block",
-        height: "calc(token(fontSizes.body) * 0.75)",
+        height: "[calc(token(fontSizes.body) * 0.75)]",
         borderRadius: "round",
-        background: "token(gradients.skeletonFill)",
+        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%" },
+    "& > [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%",
+    width: "full",
     minWidth: "0",
 });
 const failureNotice = css({
     display: "flex",
     gap: "layout.controlGap",
-    width: "100%",
+    width: "full",
     paddingBlock: "panel.default",
     paddingInline: "control.tabInline",
     borderRadius: "action",
-    background: "token(gradients.selected)",
-    "&::before": { background: "token(gradients.border.raised)" },
+    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]": {
@@ -569,12 +542,8 @@ const failureNotice = css({
     },
     "& [data-description]": { color: "fg.secondary", fontSize: "code", lineHeight: "log" },
 });
-/*
- * 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%",
+    width: "full",
     minWidth: "0",
     color: "fg.subtle",
     fontSize: "code",
@@ -583,17 +552,17 @@ const stepList = css({
         display: "inline-flex",
         alignItems: "center",
         gap: "control.iconGap",
-        maxWidth: "100%",
+        maxWidth: "full",
         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" },
+        "& > svg": { flexShrink: "0", transitionProperty: "[rotate]", transitionDuration: "fast" },
         "& > span": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
     },
-    "&[open] > summary > svg": { rotate: "90deg" },
+    "&[open] > summary > svg": { rotate: "[90deg]" },
     "& > ol": {
         display: "grid",
         gap: "layout.controlGap",
@@ -645,7 +614,6 @@ export function ChatComposer({ value, defaultValue = "", onValueChange, onSend,
         }
         : undefined;
     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;
     const waveform = dictation && (_jsx(ChatDictationWaveform, { levels: dictation.levels, listening: dictation.listening }));
@@ -657,34 +625,27 @@ export function ChatComposer({ value, defaultValue = "", onValueChange, onSend,
     }
     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.
- */
+/** 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: 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-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 }));
 }
 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 }));
+    return href ? (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", 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
@@ -709,12 +670,14 @@ export function ChatThread({ entries, assistant, renderCustom, formatTime, densi
         .reverse()
         .find((entry) => entry.kind === "message" && entry.side === "user");
     const latest = useFollowLatest(rootRef, newestUserMessage?.id);
+    const replyBodies = useRef(new Map());
+    const replyAnnouncement = useFinishedReplyAnnouncement(entries, replyBodies, (entry) => authorOf(entry)?.name);
     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(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" }) }) })) })] }));
+            }), _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" }) }) })) }), _jsx("div", { className: visuallyHidden, role: "status", "aria-live": "polite", "aria-atomic": "true", children: replyAnnouncement })] }));
     function renderEntry(entry, index) {
         if (entry.kind === "line") {
             return (_jsx(ChatSystemLine, { tone: entry.tone, children: entry.text }, entry.id));
@@ -730,18 +693,21 @@ export function ChatThread({ entries, assistant, renderCustom, formatTime, densi
             : null;
         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));
+        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, bodyRef: (element) => {
+                                if (element)
+                                    replyBodies.current.set(entry.id, element);
+                                else
+                                    replyBodies.current.delete(entry.id);
+                            } }), 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, target: "_blank", rel: "noreferrer", 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 weekday, then the date. */
 function DayHeading({ at }) {
     const { labels, formatDate } = useCiridaeLocale();
-    return (_jsx(LogGroupHeader, { role: "separator", "data-day-heading": "", label: isToday(at)
+    return (_jsx(LogGroupHeader, { role: "separator", "data-day-heading": "", density: "panel", label: isToday(at)
             ? labels.dates.today
             : isYesterday(at)
                 ? labels.dates.yesterday
@@ -769,14 +735,15 @@ 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, plain, }) {
+function ThreadEntryContent({ entry, side, groupPosition, renderCustom, attachmentTiles: tiles, plain, bodyRef, }) {
     switch (entry.kind) {
         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))) }));
+            const busy = entry.sending || entry.streaming || undefined;
             if (plain && side === "assistant") {
-                return (_jsxs("div", { className: plainReply, "aria-busy": entry.sending || undefined, children: [entry.body, attachmentNames] }));
+                return (_jsxs("div", { ref: bodyRef, className: plainReply, "aria-busy": busy, children: [entry.body, attachmentNames] }));
             }
-            return (_jsxs(ChatBubble, { side: side, groupPosition: groupPosition, "aria-busy": entry.sending || undefined, children: [entry.body, attachmentNames] }));
+            return (_jsxs(ChatBubble, { ref: bodyRef, side: side, groupPosition: groupPosition, "aria-busy": busy, children: [entry.body, attachmentNames] }));
         }
         case "typing":
             return _jsx(AgentThinking, { label: entry.label });
@@ -788,27 +755,77 @@ function ThreadEntryContent({ entry, side, groupPosition, renderCustom, attachme
             return renderCustom?.(entry.data);
     }
 }
-/** 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": "" })] }));
+    return (_jsxs("div", { className: thinking, 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 { labels } = useCiridaeLocale();
     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))) })] }));
+    return (_jsxs("details", { className: stepList, children: [_jsxs("summary", { children: [_jsx(CaretRightIcon, { className: cx(icon({ size: "compact" }), directional) }), _jsx("span", { children: labels.chat.foldedSteps(first.title, 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 }), _jsx("span", { className: visuallyHidden, children: labels.chat.stepStatus[step.status] }), 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";
 }
+/**
+ * What the thread's live region says: the newest assistant reply that has finished since the
+ * last render, as its author and its text. A reply finishes as it appears without `streaming`, or
+ * as its `streaming` turns off. Replies already there when the thread mounts, or when another
+ * conversation replaces the entries (its first entry changes), are never announced.
+ */
+function useFinishedReplyAnnouncement(entries, replyBodies, authorNameOf) {
+    const { labels } = useCiridaeLocale();
+    const [announcement, setAnnouncement] = useState("");
+    // Every assistant reply the thread has drawn and whether it was still arriving, for the
+    // conversation whose first entry is `conversationKey`.
+    const drawnRepliesRef = useRef(null);
+    useEffect(() => {
+        const replies = entries.filter((entry) => entry.kind === "message" && entry.side === "assistant");
+        const conversationKey = entries[0]?.id;
+        const drawnReplies = drawnRepliesRef.current;
+        if (drawnReplies?.conversationKey !== conversationKey) {
+            drawnRepliesRef.current = {
+                conversationKey,
+                streamingByReplyId: new Map(replies.map((reply) => [reply.id, reply.streaming ?? false])),
+            };
+            if (drawnReplies)
+                setAnnouncement("");
+            return;
+        }
+        let newestFinishedReply;
+        for (const reply of replies) {
+            const streaming = reply.streaming ?? false;
+            if (!streaming && drawnReplies.streamingByReplyId.get(reply.id) !== false) {
+                newestFinishedReply = reply;
+            }
+            drawnReplies.streamingByReplyId.set(reply.id, streaming);
+        }
+        if (!newestFinishedReply)
+            return;
+        const text = readReplyTextToAnnounce(replyBodies.current.get(newestFinishedReply.id));
+        if (!text)
+            return;
+        const authorName = authorNameOf(newestFinishedReply);
+        setAnnouncement(authorName ? labels.chat.replyAnnouncement(authorName, text) : text);
+    }, [entries, replyBodies, authorNameOf, labels.chat]);
+    return announcement;
+}
+/**
+ * A reply's text as one line, cut at about `announcedReplyMaximumLength` characters. `innerText`,
+ * since `textContent` runs one paragraph's last word into the next one's first.
+ */
+function readReplyTextToAnnounce(body) {
+    const text = (body?.innerText ?? "").replace(/\s+/g, " ").trim();
+    if (text.length <= announcedReplyMaximumLength)
+        return text;
+    return `${text.slice(0, announcedReplyMaximumLength).trimEnd()}…`;
+}
 /* A message's time, which turns into its clock time while hovered. */
 const messageTime = css({
     "& > [data-exact]": { display: "none" },
@@ -894,12 +911,16 @@ function useFollowLatest(rootRef, sentMessageId) {
             scroller.scrollTop = scroller.scrollHeight;
         };
         // Content that grew since the last look keeps a reader at the foot there, whichever of its
-        // resize or the scroll it caused is seen first; a reader's own scroll leaves the height.
+        // resize or the scroll it caused is seen first; a reader's own scroll leaves the height. So
+        // does a view that changed size, as when the composer grows a line or takes a file.
         let lastHeight = scroller.scrollHeight;
+        let lastViewHeight = scroller.clientHeight;
         const follow = () => {
             const grew = scroller.scrollHeight !== lastHeight;
+            const viewResized = scroller.clientHeight !== lastViewHeight;
             lastHeight = scroller.scrollHeight;
-            if (grew && atFootRef.current)
+            lastViewHeight = scroller.clientHeight;
+            if ((grew || viewResized) && atFootRef.current)
                 return toFoot();
             const distance = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
             atFootRef.current = distance < followDistancePx;