@theoremjs/react 0.3.4-next.413.gb7a2b75 → 0.3.4-next.417.g04684a9

package/README.md

@@ -477,3 +477,5 @@ Use `labels` to replace any message, for each locale:
 License: MIT.
 
 Set `--theorem-pane-background` on a containing element to change the fill of raised panes within it. The default is `--color-background-card`.
+
+Set `--theorem-pane-edge` on a containing element to change the gap its raised panes keep from the page's end and bottom edges, for example `0px` where the page around them is already inset. The default is 12px at the end and 12px or 16px at the bottom.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.413.gb7a2b75",
+  "version": "0.3.4-next.417.g04684a9",
   "description": "React bindings for Theorem: headless hooks + transport, an Astryx chat UI, and a Web-standard server handler.",
   "license": "MIT",
   "type": "module",
@@ -60,8 +60,8 @@
     "@stylexjs/stylex": "0.19.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@theoremjs/agents": "^0.3.4-next.413.gb7a2b75",
-    "@theoremjs/web": "^0.3.4-next.413.gb7a2b75"
+    "@theoremjs/agents": "^0.3.4-next.417.g04684a9",
+    "@theoremjs/web": "^0.3.4-next.417.g04684a9"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/ChatComposerBar.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Badge } from '@astryxdesign/core/Badge';
 import { Button } from '@astryxdesign/core/Button';
 import { ChatComposer, ChatComposerDrawer, ChatComposerInput, ChatSendButton, } from '@astryxdesign/core/Chat';
 import { DropdownMenu } from '@astryxdesign/core/DropdownMenu';
@@ -11,8 +10,9 @@ import { StackItem } from '@astryxdesign/core/Stack';
 import { Text } from '@astryxdesign/core/Text';
 import { Thumbnail } from '@astryxdesign/core/Thumbnail';
 import { Token } from '@astryxdesign/core/Token';
+import { Tooltip as HoverTip } from '@astryxdesign/core/Tooltip';
 import { VStack } from '@astryxdesign/core/VStack';
-import { IconAdjustmentsHorizontal, IconArrowDown, IconArrowUp, IconBrain, IconCornerDownLeft, IconInputAi, IconMicrophone, IconPaperclip, IconPencil, IconPlayerRecordFilled, IconSend, IconStack2, IconX, } from '@tabler/icons-react';
+import { IconAdjustmentsHorizontal, IconArchive, IconArrowBigRightLines, IconArrowDown, IconArrowUp, IconBrain, IconCornerDownLeft, IconInputAi, IconListNumbers, IconMicrophone, IconPaperclip, IconPencil, IconPlayerRecordFilled, IconSend, IconStack2, IconSteeringWheel, IconX, } from '@tabler/icons-react';
 import { attachmentIssueText, labelText } from '@theoremjs/agents';
 import { composerPendingPreview, effortSelectEnabled, interfaceEffortOptions, interfaceModelOptions, modelSelectEnabled, } from '@theoremjs/agents/interface';
 import { composerActionState, composerDrawerSummary, isStashShortcut, resolveComposerHint, STASH_SHORTCUT, } from '@theoremjs/web/client';
@@ -39,6 +39,13 @@ function useObjectUrls(files, keep) {
     }, [urls]);
     return urls;
 }
+/** Each way to send, by the same icon in the send menu and on a waiting message. */
+const SEND_ICON = {
+    queue: IconListNumbers,
+    steer: IconSteeringWheel,
+    send_now: IconArrowBigRightLines,
+    stash: IconArchive,
+};
 function PendingRow(props) {
     const { message } = props;
     const t = useLabels();
@@ -49,7 +56,8 @@ function PendingRow(props) {
     const moveUp = t('@theorem.composer.pending.move_up');
     const moveDown = t('@theorem.composer.pending.move_down');
     const remove = t('@theorem.composer.pending.remove');
-    return (_jsxs(HStack, { gap: 1, align: "center", width: "100%", children: [_jsx(Badge, { variant: message.kind === 'steer' ? 'info' : 'neutral', label: t(`@theorem.composer.pending.${message.kind}`) }), _jsx(StackItem, { size: "fill", style: { width: 0 }, children: _jsx(Text, { size: "sm", maxLines: 1, hasTruncateTooltip: true, children: composerPendingPreview(message) }) }), _jsxs(HStack, { gap: 0.5, children: [_jsx(IconButton, { label: edit, tooltip: edit, size: "sm", variant: "ghost", icon: icon(IconPencil), onClick: () => props.onRestore(message.id) }), message.kind === 'stash' ? (_jsx(IconButton, { label: queue, tooltip: queue, size: "sm", variant: "ghost", icon: icon(IconCornerDownLeft), onClick: () => props.onQueue(message.id) })) : null, _jsx(IconButton, { label: sendNow, tooltip: sendNow, size: "sm", variant: "ghost", icon: icon(IconSend), onClick: () => props.onSendNow(message.id) }), _jsx(IconButton, { label: moveUp, tooltip: moveUp, size: "sm", variant: "ghost", icon: icon(IconArrowUp), onClick: () => props.onMove(message.id, 'up') }), _jsx(IconButton, { label: moveDown, tooltip: moveDown, size: "sm", variant: "ghost", icon: icon(IconArrowDown), onClick: () => props.onMove(message.id, 'down') }), _jsx(IconButton, { label: remove, tooltip: remove, size: "sm", variant: "ghost", icon: icon(IconX), onClick: () => props.onRemove(message.id) })] })] }));
+    const Kind = SEND_ICON[message.kind];
+    return (_jsxs(HStack, { gap: 1, align: "center", width: "100%", children: [_jsx(HoverTip, { content: t(`@theorem.composer.pending.${message.kind}.description`), children: _jsx(Token, { label: t(`@theorem.composer.pending.${message.kind}`), isLabelHidden: true, color: message.kind === 'steer' ? 'blue' : 'default', icon: _jsx(Kind, { size: 14 }) }) }), _jsx(StackItem, { size: "fill", style: { width: 0 }, children: _jsx(Text, { size: "sm", maxLines: 1, hasTruncateTooltip: true, children: composerPendingPreview(message) }) }), _jsxs(HStack, { gap: 0.5, children: [_jsx(IconButton, { label: edit, tooltip: edit, size: "sm", variant: "ghost", icon: icon(IconPencil), onClick: () => props.onRestore(message.id) }), message.kind === 'stash' ? (_jsx(IconButton, { label: queue, tooltip: queue, size: "sm", variant: "ghost", icon: icon(IconCornerDownLeft), onClick: () => props.onQueue(message.id) })) : null, _jsx(IconButton, { label: sendNow, tooltip: sendNow, size: "sm", variant: "ghost", icon: icon(IconSend), onClick: () => props.onSendNow(message.id) }), _jsx(IconButton, { label: moveUp, tooltip: moveUp, size: "sm", variant: "ghost", icon: icon(IconArrowUp), onClick: () => props.onMove(message.id, 'up') }), _jsx(IconButton, { label: moveDown, tooltip: moveDown, size: "sm", variant: "ghost", icon: icon(IconArrowDown), onClick: () => props.onMove(message.id, 'down') }), _jsx(IconButton, { label: remove, tooltip: remove, size: "sm", variant: "ghost", icon: icon(IconX), onClick: () => props.onRemove(message.id) })] })] }));
 }
 /** The model and effort choices this profile offers; efforts only for a chosen model. */
 function generationOptions(iface, selectedModel) {
@@ -128,13 +136,17 @@ function SendMenu({ actions, onAction, }) {
             isIconOnly: true,
             icon: _jsx(IconStack2, { size: 16 }),
             variant: 'ghost',
-        }, hasChevron: false, placement: "above", items: actions.map((action) => ({
-            id: action,
-            label: t(`@theorem.composer.menu.${action}`),
-            description: t(`@theorem.composer.menu.${action}.description`),
-            ...(action === 'stash' ? { endContent: _jsx(Kbd, { keys: STASH_SHORTCUT }) } : {}),
-            onClick: () => onAction(action),
-        })) }));
+        }, hasChevron: false, placement: "above", items: actions.map((action) => {
+            const Glyph = SEND_ICON[action];
+            return {
+                id: action,
+                label: t(`@theorem.composer.menu.${action}`),
+                description: t(`@theorem.composer.menu.${action}.description`),
+                icon: _jsx(Glyph, { size: 16 }),
+                ...(action === 'stash' ? { endContent: _jsx(Kbd, { keys: STASH_SHORTCUT }) } : {}),
+                onClick: () => onAction(action),
+            };
+        }) }));
 }
 function RecordButton({ recording, onToggle }) {
     const t = useLabels();

package/ui/ChatTranscript.js

@@ -5,7 +5,6 @@ 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';
@@ -316,22 +315,13 @@ function Sources({ block }) {
     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.
+ * Streamed text (the reply, or the latest thought). Astryx reveals it while
+ * the stream is open, and shows it whole once it closes: the reveal never
+ * holds back text that has arrived.
  */
 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 }));
+    return (_jsx(Markdown, { isStreaming: streaming, density: density, components: components, plugins: plugins, children: text }));
 }
 function BodyBlock({ block, streaming }) {
     if (block.kind === 'text')

package/ui/ConsoleFrame.js

@@ -12,7 +12,7 @@ import { TextArea } from '@astryxdesign/core/TextArea';
 import { VStack } from '@astryxdesign/core/VStack';
 import { Children, createContext, use, useMemo, useRef, useSyncExternalStore, } from 'react';
 import { useLabels } from "./labels-provider.js";
-import { PanelBody, PanelScroll, RAISED, SidePanel, SidePanelHeader } from "./SidePanel.js";
+import { PANEL_EDGE, PanelBody, PanelScroll, paneEdge, RAISED, SidePanel, SidePanelHeader, } from "./SidePanel.js";
 import { textRows } from "./StateFields.js";
 import { WithTrace } from "./TraceInspectorPanel.js";
 import { CONSOLE_CARD } from "./trace-patterns.js";
@@ -38,7 +38,7 @@ function useNarrow() {
  * `wide` is a pair stacked on a narrow page, which takes the page's width.
  */
 function ConsoleSingle({ flush, wide, maxWidth, children, }) {
-    return (_jsx(VStack, { height: "100%", paddingInline: 3, style: flush ? FLUSH_CARD : undefined, children: _jsx(Card, { variant: "transparent", height: "100%", padding: 0, style: flush ? { overflowY: 'auto' } : { ...RAISED, overflowY: 'auto' }, children: _jsx(Center, { axis: "horizontal", width: "100%", minHeight: "100%", children: _jsx(VStack, { width: "100%", maxWidth: wide ? undefined : maxWidth, gap: 3, padding: 4, children: children }) }) }) }));
+    return (_jsx(VStack, { height: "100%", paddingInlineStart: PANEL_EDGE, style: { ...(flush ? FLUSH_CARD : undefined), paddingInlineEnd: paneEdge(PANEL_EDGE) }, children: _jsx(Card, { variant: "transparent", height: "100%", padding: 0, style: flush ? { overflowY: 'auto' } : { ...RAISED, overflowY: 'auto' }, children: _jsx(Center, { axis: "horizontal", width: "100%", minHeight: "100%", children: _jsx(VStack, { width: "100%", maxWidth: wide ? undefined : maxWidth, gap: 3, padding: 4, children: children }) }) }) }));
 }
 /**
  * A console's page, for decisions and hosts alike: the trace's toggle in the
@@ -46,7 +46,7 @@ function ConsoleSingle({ flush, wide, maxWidth, children, }) {
  */
 export function ConsoleFrame({ inspector, maxWidth, flush = false, columns = false, requestLabel, className, style, children, }) {
     const layoutRef = useRef(null);
-    return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", className: className, style: style, header: inspector.toggle ? _jsx(SidePanelHeader, { children: inspector.toggle }) : undefined, content: _jsx(LayoutContent, { padding: 0, isScrollable: false, children: _jsx(ConsoleBody, { layoutRef: layoutRef, flush: flush, columns: columns, maxWidth: maxWidth, requestLabel: requestLabel, children: children }) }) }) }));
+    return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, 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%", paddingBlockStart: PANEL_EDGE, children: _jsx(ConsoleBody, { layoutRef: layoutRef, flush: flush, columns: columns, maxWidth: maxWidth, requestLabel: requestLabel, children: children }) }) }) }) }));
 }
 /** The console's panels: a request and response side by side when there is room, else one column. */
 function ConsoleBody({ layoutRef, flush, columns, maxWidth, requestLabel, children, }) {

package/ui/SidePanel.d.ts

@@ -59,6 +59,11 @@ export declare const RAISED: {
 /** A docked panel's inset: 12px off the outer edge, 16px off the bottom (the page inset). */
 export declare const PANEL_EDGE = 3;
 export declare const PANEL_BOTTOM = 4;
+/**
+ * A raised pane's gap from the page's end or bottom edge: `--theorem-pane-edge` where a host
+ * sets it (0 where the host already insets its page), else `spacing`.
+ */
+export declare function paneEdge(spacing: typeof PANEL_EDGE | typeof PANEL_BOTTOM): string;
 /** The raised card every docked panel and the content beside one share. */
 export declare function PanelBody({ padding, inset, className, children, }: {
     padding?: 0;

package/ui/SidePanel.js

@@ -57,9 +57,19 @@ export const RAISED = {
 /** A docked panel's inset: 12px off the outer edge, 16px off the bottom (the page inset). */
 export const PANEL_EDGE = 3;
 export const PANEL_BOTTOM = 4;
+/**
+ * A raised pane's gap from the page's end or bottom edge: `--theorem-pane-edge` where a host
+ * sets it (0 where the host already insets its page), else `spacing`.
+ */
+export function paneEdge(spacing) {
+    return `var(--theorem-pane-edge, var(--spacing-${String(spacing)}))`;
+}
 /** The raised card every docked panel and the content beside one share. */
 export function PanelBody({ padding, inset = 'end', className, children, }) {
-    return (_jsx(VStack, { height: "100%", className: className, paddingInlineStart: inset === 'end' ? undefined : PANEL_EDGE, paddingInlineEnd: inset === 'start' ? undefined : PANEL_EDGE, paddingBlockEnd: PANEL_BOTTOM, children: _jsx(Card, { variant: "transparent", height: "100%", padding: padding, style: RAISED, children: children }) }));
+    return (_jsx(VStack, { height: "100%", className: className, paddingInlineStart: inset === 'end' ? undefined : PANEL_EDGE, style: {
+            paddingInlineEnd: inset === 'start' ? undefined : paneEdge(PANEL_EDGE),
+            paddingBlockEnd: paneEdge(PANEL_BOTTOM),
+        }, children: _jsx(Card, { variant: "transparent", height: "100%", padding: padding, style: RAISED, children: children }) }));
 }
 /** The scroll inside a panel card. The same area the trace uses, so a short body sizes to its rows. */
 export function PanelScroll({ label, padding, children, }) {
@@ -95,7 +105,10 @@ export function useWidth() {
  */
 export function RaisedPane({ id, header, children, }) {
     const { ref, width } = useWidth();
-    return (_jsx(Layout, { height: "fill", style: { position: 'relative' }, header: header, content: _jsx(LayoutContent, { padding: 0, isScrollable: false, children: _jsx(VStack, { height: "100%", padding: 3, children: _jsx(Card, { variant: "transparent", height: "100%", padding: 0, style: RAISED, children: _jsx("div", { id: id, ref: ref, style: { height: '100%' }, children: children(isSidePanelWide(width)) }) }) }) }) }));
+    return (_jsx(Layout, { height: "fill", style: { position: 'relative' }, header: header, content: _jsx(LayoutContent, { padding: 0, isScrollable: false, children: _jsx(VStack, { height: "100%", paddingInlineStart: PANEL_EDGE, paddingBlockStart: PANEL_EDGE, style: {
+                    paddingInlineEnd: paneEdge(PANEL_EDGE),
+                    paddingBlockEnd: paneEdge(PANEL_EDGE),
+                }, children: _jsx(Card, { variant: "transparent", height: "100%", padding: 0, style: RAISED, children: _jsx("div", { id: id, ref: ref, style: { height: '100%' }, children: children(isSidePanelWide(width)) }) }) }) }) }));
 }
 /** A raised pane's content. Narrow, the detail takes the overview's place; wide, it sits beside it. */
 export function PaneLayout({ isWide, label, detailLabel, lead, overview, detail, }) {

package/ui/TheoremChat.js

@@ -83,8 +83,9 @@ function ChatBody({ transport, iface, placeholder, emptyState, density, maxWidth
     // why: the composer says when a turn failed. Without one, the chat says it where the composer was.
     const composer = hasComposer ? (_jsx(ChatComposerForChat, { chat: chat, iface: iface, placeholder: placeholder, inputRef: inputRef })) : (chat.failure && _jsx(Banner, { status: "error", role: "alert", title: chat.failure.error }));
     const docked = { composer, composerRef, maxWidth };
-    return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { height: "fill", className: className, style: { position: 'relative', ...style }, header: header, content: _jsx(LayoutContent, { padding: 0, children: landing ? (_jsx(ChatLanding, { ...docked, handle: handle, emptyState: emptyState })) : (_jsx(ChatThread, { ...docked, chat: chat, iface: iface, blocks: blocks, handle: handle, density: density, scrollRef: scrollRef, usage: usage })) }) }) }));
+    return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { height: "fill", className: className, style: { position: 'relative', ...style }, header: header, content: _jsx(LayoutContent, { padding: 0, isScrollable: landing, children: landing ? (_jsx(ChatLanding, { ...docked, handle: handle, emptyState: emptyState })) : (_jsx(ChatThread, { ...docked, chat: chat, iface: iface, blocks: blocks, handle: handle, density: density, scrollRef: scrollRef, usage: usage })) }) }) }));
 }
+const CHAT_SCROLL = { overscrollBehavior: 'none' };
 /**
  * The chat before its first message: the greeting, and the composer under it.
  * why: paddingInline={3} matches the dock's inset so the composer keeps its width when it moves.
@@ -99,7 +100,9 @@ function ChatLanding({ composer, composerRef, maxWidth, handle, emptyState, }) {
  * bottom margin.
  */
 function ChatThread({ composer, composerRef, maxWidth, chat, iface, blocks, handle, density, scrollRef, usage, }) {
-    return (_jsx(VStack, { height: "100%", children: _jsx(ChatLayout, { density: density, scrollRef: scrollRef, composer: composer && (_jsx(VStack, { paddingBlockEnd: 3, children: _jsx(ChatColumn, { ref: composerRef, maxWidth: maxWidth, children: composer }) })), children: _jsx(ChatColumn, { maxWidth: maxWidth, children: _jsx(ChatTranscript, { blocks: blocks, handle: handle, streaming: chat.streaming, delivery: chat.delivery, answering: chat.answering, usage: usage, labels: iface.labels, imageOutput: iface.type === 'image'
+    return (_jsx(VStack, { height: "100%", children: _jsx(ChatLayout, { density: density, scrollRef: scrollRef, 
+            // why: Scrolling past either end does not bounce the transcript and its docked composer.
+            style: CHAT_SCROLL, composer: composer && (_jsx(VStack, { paddingBlockEnd: 3, children: _jsx(ChatColumn, { ref: composerRef, maxWidth: maxWidth, children: composer }) })), children: _jsx(ChatColumn, { maxWidth: maxWidth, children: _jsx(ChatTranscript, { blocks: blocks, handle: handle, streaming: chat.streaming, delivery: chat.delivery, answering: chat.answering, usage: usage, labels: iface.labels, imageOutput: iface.type === 'image'
                         ? { ratio: parseAspectRatio(iface.image.aspectRatio) }
                         : undefined, onToolDecision: (index, action) => {
                         void chat.handleToolDecision(index, action);

package/ui/TraceInspectorPanel.js

@@ -1,7 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@astryxdesign/core/Icon';
-import { IconActivity } from '@tabler/icons-react';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { IconActivity, IconDownload } from '@tabler/icons-react';
 import { cloneElement, createContext, isValidElement, lazy, Suspense, use, useCallback, useId, useRef, useState, } from 'react';
+import { useTraceRecords } from "../hooks/use-trace-records.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
 import { InPlace, isSidePanelWide, RaisedPane, SidePanel, SidePanelHeader, SidePanelToggle, useSidePanel, useWidth, } from "./SidePanel.js";
 // why: The inspector and its charts are fetched when the trace first opens, not with the chat.
@@ -43,16 +45,46 @@ export function useTraceInspector(iface, traces, open) {
     const view = isOpen ? openTrace(placement === 'panel', id, traces, toggle) : null;
     return { toggle, view, labels, offered: true };
 }
-/** The open trace: filling the host's docked panel, or as its own panel with the toggle on top. */
+/** The open trace: filling the host's docked panel, or as its own panel; Download, then the toggle, on top. */
 function openTrace(docked, id, traces, toggle) {
+    const header = (_jsxs(SidePanelHeader, { floating: true, children: [_jsx(TraceDownload, { traces: traces }), toggle] }));
     if (docked)
-        return _jsx(TraceFill, { id: id, traces: traces });
-    return (_jsx(TraceView, { id: id, header: toggle ? _jsx(SidePanelHeader, { floating: true, children: toggle }) : undefined, traces: traces }));
+        return _jsx(TraceFill, { id: id, header: header, traces: traces });
+    return _jsx(TraceView, { id: id, header: header, traces: traces });
 }
 /** The trace body, filling the docked panel. The panel supplies the raised card. */
-function TraceFill({ id, traces }) {
+function TraceFill({ id, header, traces, }) {
     const { ref, width } = useWidth();
-    return (_jsx("div", { id: id, ref: ref, style: { height: '100%' }, children: _jsx(Suspense, { fallback: null, children: _jsx(TraceFeedBody, { traces: traces, isWide: isSidePanelWide(width) }) }) }));
+    return (_jsxs("div", { id: id, ref: ref, style: { height: '100%', position: 'relative' }, children: [header, _jsx(Suspense, { fallback: null, children: _jsx(TraceFeedBody, { traces: traces, isWide: isSidePanelWide(width) }) })] }));
+}
+/** The agent the records ran, which names their file. */
+function tracedAgent(records) {
+    for (const record of records) {
+        for (const span of record.spans) {
+            const name = span.attributes['gen_ai.agent.name'];
+            if (typeof name === 'string' && name)
+                return name;
+        }
+    }
+    return 'trace';
+}
+/** Saves the records on screen as `<agent>-<time>.trace.json`, the file the studio imports. */
+function TraceDownload({ traces }) {
+    const t = useLabels();
+    const records = useTraceRecords(traces);
+    if (records.length === 0)
+        return null;
+    const label = t('@theorem.panel.trace.download');
+    return (_jsx(IconButton, { label: label, variant: "ghost", tooltip: label, icon: _jsx(Icon, { icon: IconDownload, size: "sm" }), onClick: () => {
+            const stamp = new Date().toISOString().replaceAll(':', '-').slice(0, 19);
+            const file = new Blob([JSON.stringify(records, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(file);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `${tracedAgent(records)}-${stamp}.trace.json`;
+            link.click();
+            URL.revokeObjectURL(url);
+        } }));
 }
 /** The surface, with the trace docked at its inline end. A host-driven trace stays in place. */
 function TraceDock({ inspector, children }) {

package/ui/labels.d.ts

@@ -138,15 +138,27 @@ export declare const THEOREM_UI_CATALOG: {
     };
     readonly '@theorem.composer.pending.steer': {
         readonly defaultMessage: "Steering";
-        readonly description: "Badge on a waiting steering message.";
+        readonly description: "Name of a waiting steering message, read by screen readers on its icon.";
+    };
+    readonly '@theorem.composer.pending.steer.description': {
+        readonly defaultMessage: "Steering: the agent reads it at its next step.";
+        readonly description: "Tooltip on a waiting steering message.";
     };
     readonly '@theorem.composer.pending.queue': {
         readonly defaultMessage: "Queued";
-        readonly description: "Badge on a waiting queued message.";
+        readonly description: "Name of a waiting queued message, read by screen readers on its icon.";
+    };
+    readonly '@theorem.composer.pending.queue.description': {
+        readonly defaultMessage: "Queued: it sends once this reply finishes.";
+        readonly description: "Tooltip on a waiting queued message.";
     };
     readonly '@theorem.composer.pending.stash': {
         readonly defaultMessage: "Stashed";
-        readonly description: "Badge on a waiting stashed message.";
+        readonly description: "Name of a waiting stashed message, read by screen readers on its icon.";
+    };
+    readonly '@theorem.composer.pending.stash.description': {
+        readonly defaultMessage: "Stashed: it waits here until you send it.";
+        readonly description: "Tooltip on a waiting stashed message.";
     };
     readonly '@theorem.composer.pending.edit': {
         readonly defaultMessage: "Edit";
@@ -951,6 +963,10 @@ export declare const THEOREM_UI_CATALOG: {
         readonly defaultMessage: "No spans match";
         readonly description: "Trace panel, when the search matches nothing.";
     };
+    readonly '@theorem.panel.trace.download': {
+        readonly defaultMessage: "Download trace";
+        readonly description: "Saves the trace's records as a file.";
+    };
     readonly '@theorem.panel.trace.back': {
         readonly defaultMessage: "Back";
         readonly description: "Leaves an open span for its turn.";

package/ui/labels.js

@@ -125,15 +125,27 @@ export const THEOREM_UI_CATALOG = {
     },
     '@theorem.composer.pending.steer': {
         defaultMessage: 'Steering',
-        description: 'Badge on a waiting steering message.',
+        description: 'Name of a waiting steering message, read by screen readers on its icon.',
+    },
+    '@theorem.composer.pending.steer.description': {
+        defaultMessage: 'Steering: the agent reads it at its next step.',
+        description: 'Tooltip on a waiting steering message.',
     },
     '@theorem.composer.pending.queue': {
         defaultMessage: 'Queued',
-        description: 'Badge on a waiting queued message.',
+        description: 'Name of a waiting queued message, read by screen readers on its icon.',
+    },
+    '@theorem.composer.pending.queue.description': {
+        defaultMessage: 'Queued: it sends once this reply finishes.',
+        description: 'Tooltip on a waiting queued message.',
     },
     '@theorem.composer.pending.stash': {
         defaultMessage: 'Stashed',
-        description: 'Badge on a waiting stashed message.',
+        description: 'Name of a waiting stashed message, read by screen readers on its icon.',
+    },
+    '@theorem.composer.pending.stash.description': {
+        defaultMessage: 'Stashed: it waits here until you send it.',
+        description: 'Tooltip on a waiting stashed message.',
     },
     '@theorem.composer.pending.edit': {
         defaultMessage: 'Edit',
@@ -908,6 +920,10 @@ export const THEOREM_UI_CATALOG = {
         defaultMessage: 'No spans match',
         description: 'Trace panel, when the search matches nothing.',
     },
+    '@theorem.panel.trace.download': {
+        defaultMessage: 'Download trace',
+        description: "Saves the trace's records as a file.",
+    },
     '@theorem.panel.trace.back': {
         defaultMessage: 'Back',
         description: 'Leaves an open span for its turn.',