@theoremjs/react 0.0.0-stage → 0.3.1

package/ui/ChatTranscript.js

@@ -0,0 +1,527 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AspectRatio } from '@astryxdesign/core/AspectRatio';
+import { ChatMessage, ChatMessageBubble, ChatMessageList, ChatMessageMetadata, ChatSystemMessage, ChatToolCalls, } from '@astryxdesign/core/Chat';
+import { Citation } from '@astryxdesign/core/Citation';
+import { ClickableCard } from '@astryxdesign/core/ClickableCard';
+import { Collapsible } from '@astryxdesign/core/Collapsible';
+import { HStack } from '@astryxdesign/core/HStack';
+import { useStreamingText } from '@astryxdesign/core/hooks';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { useLocale } from '@astryxdesign/core/i18n';
+import { useLightbox } from '@astryxdesign/core/Lightbox';
+import { Markdown } from '@astryxdesign/core/Markdown';
+import { Skeleton } from '@astryxdesign/core/Skeleton';
+import { Text } from '@astryxdesign/core/Text';
+import { Thumbnail } from '@astryxdesign/core/Thumbnail';
+import { Timestamp } from '@astryxdesign/core/Timestamp';
+import { Token } from '@astryxdesign/core/Token';
+import { Tooltip as HoverTip } from '@astryxdesign/core/Tooltip';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+import { stopText } from '@theoremjs/agents/interface';
+import { createContext, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { citationsFromBlock } from "../client/source-citations.js";
+import { assistantTurnCopyText, assistantTurnTiming, composeAssistantTurn, groupTranscriptBlocks, pendingPromptOf, promptReplyKey, promptTime, replyKey, toolCallLabel, workStatus, } from "../client/transcript-groups.js";
+import { useSecondTicker } from "../hooks/use-second-ticker.js";
+import { useDisclosureMotion } from "./disclosure-motion.js";
+import { usageLine, workDuration, workStatusLabel } from "./labels.js";
+import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
+import { useMarkdownPlugins } from "./markdown-plugins.js";
+import { keyedByContent } from "./row-keys.js";
+import { ShapedData } from "./ShapedData.js";
+import { ApprovalCard, AuthChallengeCard } from "./ToolGateCard.js";
+import { transcriptBlockCopyText } from "./transcript-copy-text.js";
+import { VoiceNote } from "./VoiceNote.js";
+/** Whether the transcript shows usage (`ChatTranscriptProps.usage`). */
+const ShowUsage = createContext(false);
+/** Largest a generated image renders in the transcript. */
+const GENERATED_IMAGE_MAX_WIDTH = 512;
+/** First-seen time per group key, so timestamps don't jump while streaming. */
+function useFirstSeen(keys) {
+    const times = useRef(new Map());
+    const now = Date.now();
+    for (const key of keys) {
+        if (!times.current.has(key))
+            times.current.set(key, now);
+    }
+    return (key) => times.current.get(key) ?? now;
+}
+/**
+ * Each turn's span, keyed by the user group that started it. A turn stops at
+ * a gate and streams again under the same prompt once it's answered; the wait
+ * in between counts as paused, not worked.
+ */
+function useTurnSpans(streaming, lastUserKey) {
+    const spans = useRef(new Map());
+    // why: The first send mounts the transcript already streaming; that's the start.
+    const wasStreaming = useRef(false);
+    if (lastUserKey && streaming !== wasStreaming.current) {
+        const now = Date.now();
+        const span = spans.current.get(lastUserKey);
+        if (streaming) {
+            const pausedMs = span?.endedAt === undefined ? 0 : span.pausedMs + now - span.endedAt;
+            spans.current.set(lastUserKey, { pausedMs });
+        }
+        else if (span) {
+            spans.current.set(lastUserKey, { ...span, endedAt: now });
+        }
+    }
+    wasStreaming.current = streaming;
+    return spans.current;
+}
+function CopyButton({ text }) {
+    const t = useLabels();
+    const [copied, setCopied] = useState(false);
+    if (!text.trim())
+        return null;
+    const label = t(copied ? '@theorem.transcript.copied' : '@theorem.transcript.copy');
+    return (_jsx(IconButton, { label: label, tooltip: label, size: "sm", variant: "ghost", icon: _jsx(Icon, { icon: copied ? IconCheck : IconCopy, size: "xsm", color: "secondary" }), onClick: () => {
+            void navigator.clipboard.writeText(text).then(() => {
+                setCopied(true);
+                globalThis.setTimeout(() => setCopied(false), 1500);
+            });
+        } }));
+}
+const MINUTE_MS = 60_000;
+/**
+ * Astryx's relative time, counted in minutes: "now" for the first minute, then
+ * "1m ago", "5m ago", … (its own formatter shows "15s ago" in between).
+ */
+function MessageTime({ at }) {
+    const t = useLabels();
+    const [isFresh, setIsFresh] = useState(() => Date.now() - at < MINUTE_MS);
+    useEffect(() => {
+        if (!isFresh)
+            return;
+        const timer = globalThis.setTimeout(() => setIsFresh(false), Math.max(0, at + MINUTE_MS - Date.now()));
+        return () => globalThis.clearTimeout(timer);
+    }, [isFresh, at]);
+    if (isFresh) {
+        return (_jsx(Text, { type: "supporting", color: "secondary", children: t('@theorem.transcript.now') }));
+    }
+    return _jsx(Timestamp, { value: at, format: "relative_short", isLive: true });
+}
+/** What a reply or a called agent used, in the viewer's locale. */
+function Usage({ tokens }) {
+    return usageLine(useLabels(), useLocale(), tokens);
+}
+/** Why a turn stopped short, drawn as the delivery statuses are. */
+function Stopped({ label }) {
+    return (_jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(Icon, { icon: "stop", size: "xsm", color: "inherit" }), _jsx("span", { children: label })] }));
+}
+/** A failed message's status, drawn as Astryx draws its error status; the reason shows on hover. */
+function Failed({ reason }) {
+    const label = useLabels()('@theorem.transcript.failed');
+    return (_jsx(HoverTip, { content: reason, children: _jsxs(HStack, { gap: 1, vAlign: "center", style: { color: 'var(--color-error)' }, children: [_jsx(Icon, { icon: "error", size: "xsm", color: "inherit" }), _jsx("span", { children: label })] }) }));
+}
+/** A message's copy button and time, the button on the outside: right for the person, left for the agent. */
+function CopyAndTime(props) {
+    const copy = _jsx(CopyButton, { text: props.copyText });
+    const time = _jsx(MessageTime, { at: props.at });
+    return (_jsxs(HStack, { gap: 1, vAlign: "center", children: [props.sender === 'user' ? time : copy, props.sender === 'user' ? copy : time] }));
+}
+/** A message's copy button (outermost), time and status; a failure says why on hovering its status. */
+function MessageChrome(props) {
+    const usage = props.usage ? _jsx(Usage, { tokens: props.usage }) : undefined;
+    const aside = props.error !== undefined ? (_jsx(Failed, { reason: props.error })) : props.stopped !== undefined ? (_jsx(Stopped, { label: props.stopped })) : (usage);
+    return (_jsx(ChatMessageMetadata
+    // why: The row's first slot is the one nearest the margin.
+    , { 
+        // why: The row's first slot is the one nearest the margin.
+        timestamp: _jsx(CopyAndTime, { sender: props.sender, at: props.at, copyText: props.copyText }), 
+        // why: Astryx's statuses are a closed set, so these ride the footer.
+        footer: aside, status: props.error !== undefined || props.stopped !== undefined ? undefined : props.status }));
+}
+function dataUrl(mimeType, data) {
+    return data === undefined ? undefined : `data:${mimeType};base64,${data}`;
+}
+function ImageAttachment({ src, name }) {
+    const lightbox = useLightbox({ media: { src, alt: name, caption: name }, hasZoom: true });
+    return (_jsxs(_Fragment, { children: [_jsx(Thumbnail, { src: src, alt: name, label: name, onClick: () => lightbox.open() }), lightbox.element] }));
+}
+function UserBlock({ block, metadata }) {
+    if (block.kind === 'user-text')
+        return _jsx(ChatMessageBubble, { metadata: metadata, children: block.text });
+    if (block.kind !== 'user-attachment' && block.kind !== 'user-voice')
+        return null;
+    return _jsx(UserFile, { block: block });
+}
+/** An attached image or voice note inline; any other file as a Token. */
+function UserFile({ block }) {
+    const src = dataUrl(block.mimeType, block.data);
+    if (src && block.mimeType.startsWith('image/')) {
+        return _jsx(ImageAttachment, { src: src, name: block.name });
+    }
+    if (src && block.mimeType.startsWith('audio/')) {
+        return _jsx(VoiceNote, { src: src, mimeType: block.mimeType });
+    }
+    return _jsx(Token, { label: block.name, description: block.mimeType });
+}
+function mediaSrc(block) {
+    return block.url ?? dataUrl(block.mimeType, block.data);
+}
+function lightboxMedia(t, src, mimeType) {
+    if (mimeType.startsWith('image/'))
+        return { src, alt: t('@theorem.transcript.generated_image'), type: 'image' };
+    if (mimeType.startsWith('video/'))
+        return { src, alt: t('@theorem.transcript.generated_video'), type: 'video' };
+    return undefined;
+}
+/** Image or video media: shown as Thumbnails in a gallery row, not as its own body row. */
+function galleryItemOf(t, block) {
+    if (block.kind !== 'media')
+        return undefined;
+    const src = mediaSrc(block);
+    const media = src ? lightboxMedia(t, src, block.mimeType) : undefined;
+    return media ? { media, preview: block.previewUrl ?? media.src } : undefined;
+}
+/**
+ * Consecutive images and videos as one wrapping row of Astryx Thumbnails that
+ * share a Lightbox gallery (Astryx's `useLightbox({ media: [...] })` pattern).
+ */
+function MediaGallery({ items }) {
+    const lightbox = useLightbox({ media: items.map((item) => item.media), hasZoom: true });
+    return (_jsxs(HStack, { gap: 2, wrap: "wrap", children: [items.map(({ media: item, preview }, i) => (_jsx(Thumbnail, { src: item.type === 'image' ? preview : undefined, alt: item.alt, label: item.alt, onClick: () => lightbox.open(i) }, item.src))), lightbox.element] }));
+}
+/** One generated image, framed to its natural ratio once loaded (the pinned ratio until then). */
+function GeneratedImage(props) {
+    const t = useLabels();
+    const [natural, setNatural] = useState();
+    return (_jsx(ClickableCard, { label: t('@theorem.transcript.open_generated_image'), onClick: props.onOpen, padding: 0, width: "100%", maxWidth: GENERATED_IMAGE_MAX_WIDTH, children: _jsx(AspectRatio, { ratio: natural ?? props.ratio ?? 1, fit: "cover", children: _jsx("img", { src: props.item.preview, alt: props.item.media.alt, onLoad: (event) => {
+                    const { naturalWidth, naturalHeight } = event.currentTarget;
+                    if (naturalWidth > 0 && naturalHeight > 0)
+                        setNatural(naturalWidth / naturalHeight);
+                } }) }) }));
+}
+/**
+ * Image-profile gallery: images are the answer, so they show large at their
+ * own ratio. Anything else (video) keeps the square Thumbnail.
+ */
+function GeneratedGallery({ items, ratio }) {
+    const lightbox = useLightbox({ media: items.map((item) => item.media), hasZoom: true });
+    return (_jsxs(VStack, { gap: 2, width: "100%", children: [items.map((item, i) => item.media.type === 'image' ? (_jsx(GeneratedImage, { item: item, ratio: ratio, onOpen: () => lightbox.open(i) }, item.media.src)) : (_jsx(Thumbnail, { alt: item.media.alt, label: item.media.alt, onClick: () => lightbox.open(i) }, item.media.src))), lightbox.element] }));
+}
+/** An image takes seconds: a slow, smooth breath rather than the Skeleton's quick stepped blink. */
+const GENERATING_PULSE = {
+    animationDuration: '1.8s',
+    animationTimingFunction: 'ease-in-out',
+};
+/** Placeholder shaped like the image being generated. */
+function GeneratingImage({ ratio }) {
+    const t = useLabels();
+    return (_jsx(VStack, { width: "100%", maxWidth: GENERATED_IMAGE_MAX_WIDTH, children: _jsx(AspectRatio, { ratio: ratio ?? 1, children: _jsx(Skeleton, { width: "100%", height: "100%", radius: 3, style: GENERATING_PULSE, "aria-label": t('@theorem.transcript.generating_image') }) }) }));
+}
+function MediaBlock({ block }) {
+    const src = mediaSrc(block);
+    if (src && block.mimeType.startsWith('audio/')) {
+        return _jsx(VoiceNote, { src: src, mimeType: block.mimeType });
+    }
+    return _jsx(Text, { color: "secondary", children: block.mimeType });
+}
+/** Runs of images/videos become one gallery row; everything else is a row of its own. */
+function bodyRows(t, body) {
+    const rows = [];
+    for (const block of body) {
+        const item = galleryItemOf(t, block);
+        const last = rows.at(-1);
+        if (item && last?.kind === 'gallery')
+            last.items.push(item);
+        else if (item)
+            rows.push({ kind: 'gallery', items: [item] });
+        else
+            rows.push({ kind: 'block', block });
+    }
+    return rows;
+}
+function Sources({ block }) {
+    const t = useLabels();
+    const citations = citationsFromBlock(block);
+    if (citations.length === 0)
+        return null;
+    return (_jsx(HStack, { gap: 1, wrap: "wrap", "aria-label": t('@theorem.transcript.sources'), children: citations.map((citation, i) => (_jsx(Citation, { source: { title: citation.title, url: citation.href, src: citation.icon }, number: i + 1 }, citation.key))) }));
+}
+/**
+ * Streamed text (the reply, or the latest thought). Guardrails release text in batches (the last one when
+ * the stream closes), and Astryx's reveal snaps to the full text once
+ * `isStreaming` goes false — so keep the reveal on until Astryx's own
+ * `useStreamingText` has caught up with everything received.
+ */
+function StreamedMarkdown({ text, streaming, density, components, }) {
+    const [revealing, setRevealing] = useState(streaming);
+    if (streaming && !revealing)
+        setRevealing(true);
+    const plugins = useMarkdownPlugins();
+    const shown = useStreamingText(text, revealing);
+    useEffect(() => {
+        if (!streaming && shown.length >= text.length)
+            setRevealing(false);
+    }, [streaming, shown, text]);
+    return (_jsx(Markdown, { isStreaming: revealing, density: density, components: components, plugins: plugins, children: text }));
+}
+function BodyBlock({ block, streaming }) {
+    if (block.kind === 'text')
+        return _jsx(StreamedMarkdown, { text: block.text, streaming: streaming });
+    if (block.kind === 'tool')
+        return _jsx(ToolCall, { tool: block.tool });
+    return _jsx(ResultBlock, { block: block });
+}
+/** Non-streaming answer rows: errors, sources, structured output, and media. */
+function ResultBlock({ block }) {
+    switch (block.kind) {
+        case 'error':
+            return null;
+        case 'citation':
+            return _jsx(Sources, { block: block });
+        case 'structured':
+            return _jsx(ShapedData, { value: block.value });
+        case 'media':
+            return _jsx(MediaBlock, { block: block });
+        default:
+            return null;
+    }
+}
+// why: Astryx sets a call's name in the code font; labels are sentences, so the row takes the body
+// font and the detail restores the code font kept on the wrapper.
+const CODE_FONT_KEPT = {
+    display: 'contents',
+    '--theorem-font-code': 'var(--font-family-code)',
+};
+const CODE_FONT_AS_BODY = { '--font-family-code': 'var(--font-family-body)' };
+const CODE_FONT_RESTORED = { '--font-family-code': 'var(--theorem-font-code)' };
+function ToolCalls({ calls }) {
+    return (_jsx("div", { style: CODE_FONT_KEPT, children: _jsx(ChatToolCalls, { calls: calls, style: CODE_FONT_AS_BODY }) }));
+}
+/** A call's detail: what it ran with, then what came back. */
+function toolDetail(t, tool, result) {
+    const input = tool.edited ? (_jsx(ShapedData, { value: tool.edited.to, title: t('@theorem.transcript.tool_input_edited') })) : (_jsx(ShapedData, { value: tool.arguments, title: t('@theorem.transcript.tool_input') }));
+    return (_jsxs(VStack, { gap: 2, style: CODE_FONT_RESTORED, children: [_jsx(Text, { type: "code", size: "sm", color: "secondary", children: tool.name }), input, result] }));
+}
+/** How long a finished call ran, when both ends were seen. */
+function toolDuration(t, tool) {
+    if (tool.startedAt === undefined || tool.endedAt === undefined)
+        return {};
+    return { duration: workDuration(t, tool.endedAt - tool.startedAt) };
+}
+/** What the agent an agent tool ran used, after the call's name. Only agent tools report it. */
+function toolUsageStats(state, showUsage) {
+    return showUsage && state.tokens ? { stats: _jsx(Usage, { tokens: state.tokens }) } : {};
+}
+function toolCallItem(t, id, tool, showUsage) {
+    const base = { key: id, name: toolCallLabel(tool) };
+    const { state } = tool;
+    switch (state?.phase) {
+        case 'error':
+            return {
+                ...base,
+                status: 'error',
+                target: state.failure.message,
+                ...toolUsageStats(state, showUsage),
+                errorMessage: state.failure.message,
+                resultDetail: toolDetail(t, tool, _jsx(ShapedData, { value: state.failure, title: t('@theorem.transcript.tool_error') })),
+            };
+        case 'complete':
+            return {
+                ...base,
+                status: 'complete',
+                ...toolDuration(t, tool),
+                ...toolUsageStats(state, showUsage),
+                resultDetail: toolDetail(t, tool, state.output === undefined ? undefined : (_jsx(ShapedData, { value: state.output, title: t('@theorem.transcript.tool_output') }))),
+            };
+        case 'running':
+            return { ...base, status: 'running', resultDetail: toolDetail(t, tool) };
+        default:
+            return { ...base, status: 'pending', resultDetail: toolDetail(t, tool) };
+    }
+}
+function ToolCall({ tool }) {
+    const t = useLabels();
+    const showUsage = useContext(ShowUsage);
+    return _jsx(ToolCalls, { calls: [toolCallItem(t, tool.name, tool, showUsage)] });
+}
+/**
+ * Thinking reads as quieter text than the reply. Astryx has no reasoning
+ * component, and Markdown draws its own Text, so restyle through its
+ * documented `components` seam.
+ */
+const THOUGHT_MARKDOWN = {
+    paragraph: ({ children }) => (_jsx(Text, { size: "sm", color: "secondary", display: "block", as: "p", children: children })),
+    heading: ({ children }) => (_jsx(Text, { size: "sm", color: "secondary", weight: "semibold", display: "block", as: "p", children: children })),
+};
+function TraceList({ items, streaming }) {
+    const t = useLabels();
+    const showUsage = useContext(ShowUsage);
+    const rows = [];
+    let tools = [];
+    const flush = () => {
+        if (tools.length === 0)
+            return;
+        rows.push(_jsx(ToolCalls, { calls: tools }, tools[0]?.key));
+        tools = [];
+    };
+    for (const [i, item] of items.entries()) {
+        if (item.kind === 'tool') {
+            tools.push(toolCallItem(t, item.id, item.block.tool, showUsage));
+            continue;
+        }
+        flush();
+        rows.push(_jsx(StreamedMarkdown, { text: item.text, streaming: streaming && i === items.length - 1, density: "compact", components: THOUGHT_MARKDOWN }, item.id));
+    }
+    flush();
+    return _jsx(VStack, { gap: 2, children: rows });
+}
+/** The gate a person decides. The page answers a page gate, so it has none. */
+function personGate(tool) {
+    if (tool.state?.phase !== 'gate' || tool.state.gate.kind === 'page')
+        return null;
+    return tool.state.gate;
+}
+/** The answer on its way for this tool's gate, if the one being sent is this tool's. */
+function answerSent(answering, tool) {
+    const ours = answering?.callId === tool.callId && answering?.operationId === tool.operationId;
+    return ours ? answering.action : null;
+}
+function GateCard({ block, handle, handlers, }) {
+    const { tool } = block;
+    const gate = personGate(tool);
+    if (!gate)
+        return null;
+    const index = handlers.indexOf(block);
+    const answer = answerSent(handlers.answering, tool);
+    if (gate.kind === 'auth') {
+        return (_jsx(AuthChallengeCard, { gate: gate, toolName: tool.name, submitted: answer === 'auth', onAuthenticated: (secret) => handlers.onAuthenticated?.(index, secret) }));
+    }
+    return (_jsx(ApprovalCard, { gate: gate, toolName: tool.name, agent: handle, input: tool.arguments, decided: answer === 'auth' ? null : answer, onDecision: (action) => handlers.onToolDecision?.(index, action) }));
+}
+/** Live elapsed time while the turn streams; its final duration once it ends. */
+/** Live: counted from the start. Stopped: the work its blocks record. */
+function useTurnElapsed(streaming, startedAt, workedMs) {
+    const now = useSecondTicker(streaming && startedAt !== undefined);
+    if (!streaming)
+        return workedMs;
+    return startedAt !== undefined ? now - startedAt : undefined;
+}
+/**
+ * The turn's work status; with a trace, a Collapsible over its thinking and
+ * tool calls, open while the turn runs so they can be followed, folded away
+ * when it ends.
+ */
+function TurnStatus(props) {
+    const { status, streaming } = props;
+    const [traceOpen, setTraceOpen] = useState(streaming);
+    const [wasStreaming, setWasStreaming] = useState(streaming);
+    if (wasStreaming !== streaming) {
+        setWasStreaming(streaming);
+        setTraceOpen(streaming);
+    }
+    if (!status)
+        return null;
+    const label = (_jsx(Text, { size: "sm", color: "secondary", children: status }));
+    if (!props.hasTrace)
+        return label;
+    return (_jsx(Collapsible, { trigger: label, isOpen: traceOpen, onOpenChange: setTraceOpen, children: _jsx(TraceList, { items: props.trace, streaming: streaming }) }));
+}
+function BodyRowView({ row, streaming, imageOutput, }) {
+    if (row.kind === 'block')
+        return _jsx(BodyBlock, { block: row.block, streaming: streaming });
+    if (imageOutput)
+        return _jsx(GeneratedGallery, { items: row.items, ratio: imageOutput.ratio });
+    return _jsx(MediaGallery, { items: row.items });
+}
+/** An image profile's placeholder until the turn's first image arrives. */
+function PendingImage(props) {
+    if (!props.imageOutput || !props.streaming || props.rows.some((row) => row.kind === 'gallery'))
+        return null;
+    return _jsx(GeneratingImage, { ratio: props.imageOutput.ratio });
+}
+function AssistantTurn(props) {
+    const t = useLabels();
+    const showUsage = useContext(ShowUsage);
+    const elapsedMs = useTurnElapsed(props.streaming, props.startedAt, props.workedMs);
+    const { trace, gatedTools, body, hasTrace } = composeAssistantTurn(props.blocks);
+    const rows = bodyRows(t, body);
+    const status = workStatusLabel(t, workStatus({ streaming: props.streaming, hasTrace, elapsedMs }));
+    const copyText = assistantTurnCopyText(body.length > 0 ? body : props.blocks);
+    return (_jsx(ChatMessage, { sender: "assistant", name: props.handle, metadata: props.streaming ? undefined : (_jsx(MessageChrome, { sender: "assistant", at: props.at, copyText: copyText, error: props.error, stopped: props.stopped, usage: showUsage ? props.usage : undefined })), children: _jsxs(VStack, { gap: 3, width: "100%", children: [_jsx(TurnStatus, { status: status, trace: trace, hasTrace: hasTrace, streaming: props.streaming }), gatedTools.map((block) => (_jsx(GateCard, { block: block, handle: props.handle, handlers: props.handlers }, block.id))), keyedByContent(rows, (row) => (row.kind === 'gallery' ? 'gallery' : row.block.kind)).map(({ item: row, index: i, key }) => (_jsx(BodyRowView
+                // why: Not the block id: the committed turn re-mints ids, and a
+                // remount would cut the text reveal short.
+                , { row: row, streaming: props.streaming && i === rows.length - 1, imageOutput: props.imageOutput }, key))), _jsx(PendingImage, { imageOutput: props.imageOutput, streaming: props.streaming, rows: rows })] }) }));
+}
+function UserTurn(props) {
+    const t = useLabels();
+    const copyText = props.blocks
+        .map((block) => transcriptBlockCopyText(t, block))
+        .filter(Boolean)
+        .join('\n\n');
+    const chrome = (_jsx(MessageChrome, { sender: "user", at: props.at, copyText: copyText, status: props.status, stopped: props.stopped, error: props.error }));
+    // why: Astryx: metadata goes on the last bubble, or on the message when the last
+    // content is unbubbled (an attachment or voice note).
+    const last = props.blocks.at(-1);
+    const lastIsBubble = last?.kind === 'user-text';
+    return (_jsx(ChatMessage, { sender: "user", metadata: lastIsBubble ? undefined : chrome, children: props.blocks.map((block) => (_jsx(UserBlock, { block: block, metadata: block === last && lastIsBubble ? chrome : undefined }, block.id))) }));
+}
+/** Why a turn failed: its error block's message. */
+function failureOf(group) {
+    return group?.blocks.findLast((block) => block.kind === 'error')?.message;
+}
+/** A reply that is nothing but its failure: the turn failed before the model answered. */
+function isBareFailure(group) {
+    return group?.kind === 'assistant' && group.blocks.every((block) => block.kind === 'error');
+}
+/** Theorem transcript blocks rendered as Astryx chat messages. */
+export function ChatTranscript(props) {
+    return (_jsx(TheoremLabelsProvider, { children: _jsx(ShowUsage.Provider, { value: props.usage === true, children: _jsx(ChatTranscriptBody, { ...props }) }) }));
+}
+function ChatTranscriptBody({ blocks, handle, streaming = false, delivery, onToolDecision, answering = null, onAuthenticated, emptyState, dividers, imageOutput, labels, }) {
+    const groups = useMemo(() => groupTranscriptBlocks(blocks, dividers && new Set(Object.keys(dividers))), [blocks, dividers]);
+    const timeOf = useFirstSeen(groups.map((group, index) => (group.kind === 'user' ? group.key : replyKey(groups, index))));
+    const spans = useTurnSpans(streaming, groups.findLast((group) => group.kind === 'user')?.key);
+    const pendingPrompt = streaming ? pendingPromptOf(groups) : undefined;
+    const listRef = useRef(null);
+    useDisclosureMotion(listRef);
+    const handlers = {
+        indexOf: (block) => blocks.findIndex((entry) => entry.id === block.id),
+        answering,
+        onToolDecision,
+        onAuthenticated,
+    };
+    const turn = { handle, handlers, imageOutput };
+    const lastUser = groups.findLastIndex((group) => group.kind === 'user');
+    const userTurn = (group, index) => {
+        const next = groups[index + 1];
+        const error = isBareFailure(next) ? failureOf(next) : undefined;
+        const status = index === lastUser ? (delivery ?? undefined) : undefined;
+        return (_jsx(UserTurn, { blocks: group.blocks, at: promptTime(groups, index, timeOf), status: status, stopped: stopText(group.stop, group.blocks, labels), error: error }, group.key));
+    };
+    const turnOf = (group, index) => {
+        if (group.kind === 'user')
+            return userTurn(group, index);
+        if (isBareFailure(group) && groups[index - 1]?.kind === 'user')
+            return [];
+        const { key, live, endedAt, ...timing } = assistantTurnTiming({
+            groups,
+            index,
+            streaming,
+            timeOf,
+            spans,
+        });
+        // why: A reply is dated when it last stopped: a reply that just finished reads "now".
+        const at = endedAt ?? timeOf(key);
+        return (_jsx(AssistantTurn, { ...turn, ...timing, blocks: group.blocks, streaming: live, at: at, error: failureOf(group), stopped: stopText(group.stop, group.blocks, labels), usage: group.usage }, key));
+    };
+    const turns = groups.flatMap((group, index) => {
+        const label = dividers?.[group.key];
+        if (label === undefined)
+            return turnOf(group, index);
+        return [
+            _jsx(ChatSystemMessage, { variant: "divider", children: label }, `divider:${group.key}`),
+            turnOf(group, index),
+        ].flat();
+    });
+    // why: It sits in the same keyed list as the streamed reply, so the reply stays
+    // one message; a remount would read to the layout as a new message.
+    if (pendingPrompt) {
+        turns.push(_jsx(AssistantTurn, { ...turn, blocks: [], streaming: true, at: timeOf(pendingPrompt.key), startedAt: timeOf(pendingPrompt.key) }, promptReplyKey(pendingPrompt)));
+    }
+    return (_jsx(ChatMessageList, { ref: listRef, isStreaming: streaming, emptyState: emptyState, children: turns }));
+}

package/ui/ConsoleFrame.d.ts

@@ -0,0 +1,104 @@
+import type { DefinedTheme } from '@astryxdesign/core/theme';
+import { type CSSProperties, type ReactNode } from 'react';
+import type { HttpOptions } from '../client/transport.ts';
+import type { TheoremLabels } from './labels.ts';
+import { type TraceInspector } from './TraceInspectorPanel.tsx';
+/** The props a one-call console page shares: its look, its wording, its trace, and its layout. */
+export type ConsolePageProps = {
+    /** Extra fetch options for the default HTTP transport (auth headers, custom fetch). */
+    http?: HttpOptions;
+    theme?: DefinedTheme;
+    mode?: 'system' | 'light' | 'dark';
+    /** Replacement lines by locale, for any `@theorem.*` or `@astryx.*` key. */
+    labels?: TheoremLabels;
+    /** Widest the column may grow, as a CSS length. Default `960px`. */
+    maxWidth?: string;
+    /**
+     * Drive the trace from the host's own control. The built-in toggle hides.
+     * The open trace takes the result's place, unless this page is inside
+     * `TracePlacement value="panel"`, where it docks. Omit to keep the toggle.
+     * Needs a profile that records traces.
+     */
+    trace?: boolean;
+    /**
+     * The page is already a raised panel. The console sits in it instead of
+     * painting the ground it uses on a flat page.
+     */
+    flush?: boolean;
+    /** The request on the left and the result on the right. */
+    columns?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+export type ConsoleFrameProps = {
+    inspector: TraceInspector;
+    maxWidth: string;
+    /**
+     * The page is already a raised panel. The console sits in that panel instead
+     * of painting the ground it uses when the page behind it is flat.
+     */
+    flush?: boolean;
+    /**
+     * The request and the response sit side by side. The request is a start
+     * panel at two fifths of that pair, so its handle is on the trailing edge
+     * and the response fills the other three fifths. Below the shell's drawer
+     * breakpoint they stack, request first. Two children: the request, then the
+     * response. One child keeps the single column.
+     */
+    columns?: boolean;
+    /** The request column's name, read by its scroll region and its resize handle. */
+    requestLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+};
+/**
+ * A console's page, for decisions and hosts alike: the trace's toggle in the
+ * header, and one raised panel, flush with the host's, scrolling inside.
+ */
+export declare function ConsoleFrame({ inspector, maxWidth, flush, columns, requestLabel, className, style, children, }: ConsoleFrameProps): import("react").JSX.Element;
+/** One card of a response with several: its request and result sit in it without cards of their own. */
+export declare function ConsoleSection({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The response. Beside the request it scrolls in the panel; a centred state fills the card, as an empty trace does. */
+export declare function ResponseColumn({ label, fill, children, }: {
+    label: string;
+    fill?: boolean;
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+export type ConsoleView = 'fields' | 'json';
+export type RequestCardProps = {
+    title: string;
+    /** The view shown: fields only while the request parses. */
+    view: ConsoleView;
+    hasFields: boolean;
+    onView: (next: ConsoleView) => void;
+    /** Runs on ⌘/Ctrl+Enter anywhere in the card. */
+    onRun: () => void;
+    children: ReactNode;
+};
+/** The request's card: its heading with the Fields/JSON switch, then the request and its run bar. */
+export declare function RequestCard({ title, view, hasFields, onView, onRun, children }: RequestCardProps): import("react").JSX.Element;
+/** The request as JSON text, marked while it doesn't parse. */
+export declare function JsonRequest({ label, text, isInvalid, onChange, }: {
+    label: string;
+    text: string;
+    isInvalid: boolean;
+    onChange: (next: string) => void;
+}): import("react").JSX.Element;
+export type RunBarProps = {
+    /** The shortcut, or what the request still lacks. */
+    note: string | null;
+    isReady: boolean;
+    isRunning: boolean;
+    runLabel: string;
+    runningLabel: string;
+    stopLabel: string;
+    onRun: () => void;
+    onStop: () => void;
+};
+/** A note on the request, Stop while it runs, and Run. */
+export declare function RunBar({ note, isReady, isRunning, runLabel, runningLabel, stopLabel, onRun, onStop, }: RunBarProps): import("react").JSX.Element;
+/** A size in bytes as the reader's locale writes it: bytes under a kilobyte, else kilobytes. */
+export declare function useBytes(): (bytes: number) => string;