@theoremjs/react 0.0.0-stage → 0.3.0

package/ui/ChatTranscript.js

@@ -0,0 +1,474 @@
+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, 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 { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { useLightbox } from '@astryxdesign/core/Lightbox';
+import { useStreamingText } from '@astryxdesign/core/hooks';
+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 { VStack } from '@astryxdesign/core/VStack';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { citationsFromBlock } from "../client/source-citations.js";
+import { assistantTurnCopyText, assistantTurnTiming, composeAssistantTurn, groupTranscriptBlocks, pendingPromptOf, promptReplyKey, replyKey, toolCallLabel, workStatus, } from "../client/transcript-groups.js";
+import { useDisclosureMotion } from "./disclosure-motion.js";
+import { workDuration, workStatusLabel } from "./labels.js";
+import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
+import { ShapedData } from "./ShapedData.js";
+import { transcriptBlockCopyText } from "./transcript-copy-text.js";
+import { ApprovalCard, AuthChallengeCard } from "./ToolGateCard.js";
+import { VoiceNote } from "./VoiceNote.js";
+/** 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;
+}
+/** `Date.now()`, refreshed every second while `isActive`. */
+function useSecondTicker(isActive) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!isActive)
+            return;
+        setNow(Date.now());
+        const timer = globalThis.setInterval(() => setNow(Date.now()), 1_000);
+        return () => globalThis.clearInterval(timer);
+    }, [isActive]);
+    return 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());
+    // 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 });
+}
+/** A message's time, copy button and status; a failure says why on the line beneath. */
+function MessageChrome(props) {
+    const failed = props.error !== undefined;
+    const metadata = (_jsx(ChatMessageMetadata, { timestamp: _jsx(MessageTime, { at: props.at }), footer: _jsx(CopyButton, { text: props.copyText }), status: failed ? 'error' : props.status }));
+    if (!failed)
+        return metadata;
+    return (_jsxs(VStack, { gap: 1, children: [metadata, _jsx(Text, { type: "supporting", color: "secondary", children: props.error })] }));
+}
+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 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, 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) {
+        // A failure shows on the message's metadata line (MessageChrome).
+        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;
+    }
+}
+// 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) };
+}
+function toolCallItem(t, id, tool) {
+    const base = { key: id, name: toolCallLabel(tool) };
+    const { state } = tool;
+    switch (state?.phase) {
+        case 'error':
+            // What failed, as the tool reported it; the whole failure is in the detail.
+            return {
+                ...base,
+                status: 'error',
+                target: state.failure.message,
+                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),
+                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();
+    return _jsx(ToolCalls, { calls: [toolCallItem(t, tool.name, tool)] });
+}
+/**
+ * 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 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));
+            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 });
+}
+function GateCard({ block, handlers }) {
+    const { tool } = block;
+    if (tool.state?.phase !== 'gate')
+        return null;
+    const { gate } = tool.state;
+    const index = handlers.indexOf(block);
+    const answer = handlers.answering?.callId === tool.callId ? handlers.answering.action : null;
+    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, 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 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, { at: props.at, copyText: copyText, error: props.error }), 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, handlers: props.handlers }, block.id))), rows.map((row, i) => (_jsx(BodyRowView
+                // By position: the committed turn re-mints block ids, and a
+                // remount would cut the text reveal short.
+                , { row: row, streaming: props.streaming && i === rows.length - 1, imageOutput: props.imageOutput }, i))), _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, { at: props.at, copyText: copyText, status: props.status, error: props.error });
+    // 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(ChatTranscriptBody, { ...props }) }));
+}
+function ChatTranscriptBody({ blocks, handle, streaming = false, delivery, onToolDecision, answering = null, onAuthenticated, emptyState, imageOutput, }) {
+    const groups = useMemo(() => groupTranscriptBlocks(blocks), [blocks]);
+    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);
+    // Disclosures ease open and shut in place; opening one never moves the transcript.
+    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) => {
+        // A turn that failed before any reply shows it on the message itself.
+        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: timeOf(group.key), status: status, error: error }, group.key);
+    };
+    const turns = groups.flatMap((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 });
+        // 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) }, key));
+    });
+    // Nothing streamed back yet: show the reply's "Working…" status right away.
+    // 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,47 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type TraceInspector } from './TraceInspectorPanel.tsx';
+export type ConsoleFrameProps = {
+    inspector: TraceInspector;
+    maxWidth: 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, className, style, children }: ConsoleFrameProps): import("react").JSX.Element;
+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;

package/ui/ConsoleFrame.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@astryxdesign/core/Button';
+import { Card } from '@astryxdesign/core/Card';
+import { Center } from '@astryxdesign/core/Center';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Layout, LayoutContent } from '@astryxdesign/core/Layout';
+import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl';
+import { Text } from '@astryxdesign/core/Text';
+import { TextArea } from '@astryxdesign/core/TextArea';
+import { VStack } from '@astryxdesign/core/VStack';
+import { useLabels } from "./labels-provider.js";
+import { RAISED, SidePanelHeader } from "./SidePanel.js";
+import { WithTrace } from "./TraceInspectorPanel.js";
+/**
+ * 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 function ConsoleFrame({ inspector, maxWidth, className, style, children }) {
+    return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { height: "fill", className: className, style: style, header: inspector.toggle ? _jsx(SidePanelHeader, { children: inspector.toggle }) : undefined, content: _jsx(LayoutContent, { padding: 0, isScrollable: false, children: _jsx(VStack, { height: "100%", paddingInline: 3, children: _jsx(Card, { variant: "transparent", height: "100%", padding: 0, style: { ...RAISED, overflowY: 'auto' }, children: _jsx(Center, { axis: "horizontal", width: "100%", children: _jsx(VStack, { width: "100%", maxWidth: maxWidth, gap: 3, padding: 4, children: children }) }) }) }) }) }) }));
+}
+/** ⌘/Ctrl+Enter runs the console's request. */
+function runShortcut(run) {
+    return (event) => {
+        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            run();
+        }
+    };
+}
+/** The request's card: its heading with the Fields/JSON switch, then the request and its run bar. */
+export function RequestCard({ title, view, hasFields, onView, onRun, children }) {
+    const t = useLabels();
+    return (_jsx(Card, { variant: "muted", padding: 4, style: { background: 'var(--color-background-surface)' }, children: _jsxs(VStack, { gap: 3, onKeyDown: runShortcut(onRun), children: [_jsxs(HStack, { gap: 2, hAlign: "between", vAlign: "center", children: [_jsx(Text, { type: "supporting", color: "secondary", as: "h3", children: title }), _jsxs(SegmentedControl, { label: t('@theorem.decision.view'), size: "sm", value: view, onChange: (next) => {
+                                onView(next === 'json' ? 'json' : 'fields');
+                            }, children: [_jsx(SegmentedControlItem, { value: "fields", label: t('@theorem.decision.fields'), isDisabled: !hasFields }), _jsx(SegmentedControlItem, { value: "json", label: t('@theorem.data.json') })] })] }), children] }) }));
+}
+/** The field reads as code: the body font is swapped for the code font inside it. */
+const CODE_FONT = { '--font-family-body': 'var(--font-family-code)' };
+/** The request as JSON text, marked while it doesn't parse. */
+export function JsonRequest({ label, text, isInvalid, onChange }) {
+    return (_jsx(TextArea, { label: label, isLabelHidden: true, value: text, onChange: onChange, rows: 8, hasSpellCheck: false, status: isInvalid ? { type: 'error' } : undefined, style: CODE_FONT }));
+}
+/** A note on the request, Stop while it runs, and Run. */
+export function RunBar({ note, isReady, isRunning, runLabel, runningLabel, stopLabel, onRun, onStop }) {
+    return (_jsxs(HStack, { gap: 3, hAlign: "between", vAlign: "center", children: [_jsx(Text, { type: "supporting", color: "secondary", style: isReady ? undefined : { color: 'var(--color-error)' }, hasTabularNumbers: true, children: note }), _jsxs(HStack, { gap: 2, vAlign: "center", children: [isRunning ? _jsx(Button, { label: stopLabel, variant: "ghost", onClick: onStop }) : null, _jsx(Button, { label: isRunning ? runningLabel : runLabel, variant: "primary", isLoading: isRunning, isDisabled: !isReady, onClick: onRun })] })] }));
+}

package/ui/DecisionAnswers.d.ts

@@ -0,0 +1,15 @@
+import type { DecisionResult } from '@theoremjs/agents';
+import type { DecisionInterface } from '../client/decision-transport.ts';
+export type TheoremDecisionAnswersProps = {
+    iface: DecisionInterface;
+    result: DecisionResult;
+    /** The round trip, for the line under the answers. */
+    elapsedMs?: number | null;
+    /** A newer decision is running: the answers dim until it lands. */
+    isStale?: boolean;
+};
+/**
+ * A decision's answers, one card per question in the order the profile asks
+ * them, and one quiet line for the model, time, tokens, and cost.
+ */
+export declare function TheoremDecisionAnswers({ iface, result, elapsedMs, isStale }: TheoremDecisionAnswersProps): import("react").JSX.Element;