@theoremjs/react 0.3.0 → 0.3.1

package/ui/TraceSpanDetail.js

@@ -15,9 +15,11 @@ import { IconArrowLeft, IconX } from '@tabler/icons-react';
 import { inlineContent, TRACE_ATTRIBUTE_GROUPS, TRACE_FIELDS, TRACE_SPAN_TYPES, TRACE_STATUS, traceAttributeMeta, traceEventAttributeMeta, traceEventMeta, } from '@theoremjs/agents';
 import { messageText, storedValue, traceActor, traceOutcome } from "../client/trace-story.js";
 import { nanosToMs } from "../client/trace-view.js";
+import { keyedByContent } from "./row-keys.js";
 import { ShapedData } from "./ShapedData.js";
+import { PanePanel, Prose } from "./SidePanel.js";
 import { ActorMark } from "./TraceStory.js";
-import { attributeSections, TRACE_LABEL_PX, TraceAttributeList, TraceValue, useTraceFormat } from "./TraceValues.js";
+import { attributeSections, TRACE_LABEL_PX, TraceAttributeList, TraceValue, useTraceFormat, } from "./TraceValues.js";
 /** A span's own field, read as an attribute of that format. */
 function fieldMeta(field, format) {
     return { ...field, format, group: 'record' };
@@ -37,12 +39,12 @@ function Section({ title, children }) {
 }
 function EventList({ node }) {
     const format = useTraceFormat();
-    return (_jsx(VStack, { gap: 3, children: node.span.events.map((event, index) => {
+    return (_jsx(VStack, { gap: 3, children: keyedByContent(node.span.events, (event) => `${event.name}:${event.timeUnixNano}`).map(({ item: event, key }) => {
             const offset = format.t('@theorem.panel.trace.offset', {
                 duration: format.duration(nanosToMs(event.timeUnixNano) - node.startMs),
             });
             const label = traceEventMeta(event.name)?.label ?? event.name;
-            return (_jsxs(VStack, { gap: 1, children: [_jsxs(HStack, { gap: 2, align: "center", children: [_jsx(Text, { weight: "medium", children: label }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: offset })] }), _jsx(TraceAttributeList, { record: node.record, attributes: event.attributes, metaOf: (key) => traceEventAttributeMeta(event.name, key) })] }, `${event.name}:${event.timeUnixNano}:${index}`));
+            return (_jsxs(VStack, { gap: 1, children: [_jsxs(HStack, { gap: 2, align: "center", children: [_jsx(Text, { weight: "medium", children: label }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: offset })] }), _jsx(TraceAttributeList, { record: node.record, attributes: event.attributes, metaOf: (key) => traceEventAttributeMeta(event.name, key) })] }, key));
         }) }));
 }
 function LinkList({ node }) {
@@ -54,14 +56,16 @@ const SPAN_FIELD_VALUES = {
     traceId: (node) => node.span.traceId,
     spanId: (node) => node.span.spanId,
 };
-/** What the span was, how long it took, what it cost and when it started. */
+/** What the span was, how long it took, what it cost, and when it started. */
 function spanFacts(node, turnStartMs, format) {
     const cost = node.span.attributes['theorem.usage.cost_usd'];
     return [
         node.meta.label,
         format.duration(node.durationMs),
         ...(typeof cost === 'number' ? [format.usd(cost)] : []),
-        format.t('@theorem.panel.trace.offset', { duration: format.duration(node.startMs - turnStartMs) }),
+        format.t('@theorem.panel.trace.offset', {
+            duration: format.duration(node.startMs - turnStartMs),
+        }),
     ].join(format.t('@theorem.panel.trace.separator'));
 }
 function OutcomeBadge({ outcome }) {
@@ -70,24 +74,18 @@ function OutcomeBadge({ outcome }) {
     return (_jsx(HoverTip, { content: outcome.doc ?? outcome.label, children: _jsx(Badge, { variant: outcome.tone, label: outcome.label }) }));
 }
 /** The span's status message, unless the outcome badge already says it. */
-function StatusMessage({ node, outcome }) {
+function StatusMessage({ node, outcome, }) {
     const message = node.span.status.message;
     if (!message || message.toLowerCase() === outcome?.label.toLowerCase())
         return null;
     return _jsx(Text, { color: "secondary", children: message });
 }
-/** Back (or close), then who acted, what it was, how it ended, how long it took and what it cost. */
-function SpanHeader({ node, turnStartMs, onBack, isClose }) {
+/** Back (or close), then who acted, what it was, how it ended, how long it took, and what it cost. */
+function SpanHeader({ node, turnStartMs, onBack, isClose, }) {
     const format = useTraceFormat();
     const outcome = traceOutcome(node);
     return (_jsxs(VStack, { gap: 2, children: [_jsx(HStack, { children: _jsx(Button, { label: format.t(isClose ? '@theorem.panel.trace.close' : '@theorem.panel.trace.back'), variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: isClose ? IconX : IconArrowLeft }), onClick: onBack }) }), _jsx(Item, { startContent: _jsx(ActorMark, { actor: traceActor(node) }), label: _jsx(Text, { weight: "semibold", children: node.meta.subject ?? node.meta.label }), description: spanFacts(node, turnStartMs, format), endContent: _jsx(OutcomeBadge, { outcome: outcome }), align: "start" }), _jsx(StatusMessage, { node: node, outcome: outcome })] }));
 }
-function Panel({ title, doc, children }) {
-    return (_jsx(Card, { padding: 3, variant: "muted", style: { background: 'var(--color-background-surface)' }, children: _jsxs(VStack, { gap: 2, children: [_jsx(HoverTip, { content: doc ?? title, children: _jsx(Text, { type: "supporting", color: "secondary", children: title }) }), children] }) }));
-}
-function Prose({ text }) {
-    return _jsx("span", { style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, children: text });
-}
 function parsed(value) {
     if (typeof value !== 'string')
         return value;
@@ -115,9 +113,9 @@ function PartView({ part }) {
 }
 /** Messages as the model saw them: each one's role, then its parts. */
 function MessageList({ messages }) {
-    return (_jsx(VStack, { gap: 3, children: messages.map((message, index) => (_jsxs(VStack, { gap: 1, children: [_jsx(HStack, { children: _jsx(Token, { label: String(message.role ?? ''), size: "sm", color: "gray" }) }), Array.isArray(message.parts)
-                    ? message.parts.filter(isObject).map((part, at) => _jsx(PartView, { part: part }, at))
-                    : null] }, index))) }));
+    return (_jsx(VStack, { gap: 3, children: keyedByContent(messages, (message) => JSON.stringify(message)).map(({ item: message, key }) => (_jsxs(VStack, { gap: 1, children: [_jsx(HStack, { children: _jsx(Token, { label: String(message.role ?? ''), size: "sm", color: "gray" }) }), Array.isArray(message.parts)
+                    ? keyedByContent(message.parts.filter(isObject), (part) => JSON.stringify(part)).map(({ item: part, key: partKey }) => _jsx(PartView, { part: part }, partKey))
+                    : null] }, key))) }));
 }
 function messagesOf(node, key) {
     const value = inlineContent(node.record, node.span.attributes[key]);
@@ -131,13 +129,13 @@ function label(key) {
 function DataPanel({ attribute, value }) {
     if (value === undefined)
         return null;
-    return (_jsx(Panel, { ...label(attribute), children: _jsx(ShapedData, { value: value }) }));
+    return (_jsx(PanePanel, { ...label(attribute), children: _jsx(ShapedData, { value: value }) }));
 }
 /** Text under its attribute's name; nothing when there is none. */
 function ProsePanel({ attribute, text }) {
     if (typeof text !== 'string' || !text)
         return null;
-    return (_jsx(Panel, { ...label(attribute), children: _jsx(Prose, { text: text }) }));
+    return (_jsx(PanePanel, { ...label(attribute), children: _jsx(Prose, { text: text }) }));
 }
 function TurnIO({ node }) {
     return (_jsxs(_Fragment, { children: [_jsx(ProsePanel, { attribute: "gen_ai.input.messages", text: messageText(node, 'gen_ai.input.messages', 'user') }), _jsx(ProsePanel, { attribute: "gen_ai.output.messages", text: messageText(node, 'gen_ai.output.messages', 'assistant') })] }));
@@ -145,7 +143,7 @@ function TurnIO({ node }) {
 function CallIO({ node }) {
     const input = messagesOf(node, 'gen_ai.input.messages');
     const output = messagesOf(node, 'gen_ai.output.messages');
-    return (_jsxs(_Fragment, { children: [output.length > 0 ? (_jsx(Panel, { ...label('gen_ai.output.messages'), children: _jsx(MessageList, { messages: output }) })) : null, input.length > 0 ? (_jsx(Collapsible, { defaultIsOpen: false, trigger: _jsx(Text, { weight: "medium", children: `${label('gen_ai.input.messages').title} · ${input.length}` }), children: _jsx(Card, { padding: 3, variant: "muted", style: { background: 'var(--color-background-surface)' }, children: _jsx(MessageList, { messages: input }) }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [output.length > 0 ? (_jsx(PanePanel, { ...label('gen_ai.output.messages'), children: _jsx(MessageList, { messages: output }) })) : null, input.length > 0 ? (_jsx(Collapsible, { defaultIsOpen: false, trigger: _jsx(Text, { weight: "medium", children: `${label('gen_ai.input.messages').title} · ${input.length}` }), children: _jsx(Card, { padding: 3, variant: "muted", style: { background: 'var(--color-background-surface)' }, children: _jsx(MessageList, { messages: input }) }) })) : null] }));
 }
 function ToolIO({ node }) {
     const { attributes } = node.span;
@@ -166,7 +164,7 @@ function SpanIO({ node }) {
             return null;
     }
 }
-/** The span's own fields: its type, start and IDs. */
+/** The span's own fields: its type, start, and IDs. */
 function SpanFields({ node }) {
     return (_jsx(MetadataList, { columns: "single", label: { position: 'start', width: TRACE_LABEL_PX }, children: Object.keys(SPAN_FIELD_VALUES).map((key) => (_jsx(MetadataListItem, { label: SPAN_FIELD_META[key].label, children: _jsx(TraceValue, { record: node.record, meta: SPAN_FIELD_META[key], value: SPAN_FIELD_VALUES[key](node) }) }, key))) }));
 }
@@ -184,5 +182,9 @@ export function TraceSpanDetail({ node, turnStartMs, isClose = false, onBack, on
     const { span, record } = node;
     const sections = attributeSections(span.attributes);
     const usage = sections.find((section) => section.key === 'usage');
-    return (_jsxs(VStack, { gap: 4, children: [_jsx(SpanHeader, { node: node, turnStartMs: turnStartMs, onBack: onBack, isClose: isClose }), _jsx(SpanIO, { node: node }), usage ? (_jsx(Panel, { title: TRACE_ATTRIBUTE_GROUPS.usage.label, doc: TRACE_ATTRIBUTE_GROUPS.usage.doc, children: _jsx(TraceAttributeList, { record: record, attributes: usage.attributes, metaOf: traceAttributeMeta }) })) : null, node.children.length > 0 ? (_jsx(Panel, { title: TRACE_FIELDS.children.label, doc: TRACE_FIELDS.children.doc, children: _jsx(VStack, { gap: 0, children: node.children.map((child) => (_jsx(Item, { startContent: _jsx(ActorMark, { actor: traceActor(child) }), label: child.meta.subject ?? child.meta.label, description: child.meta.label, endContent: _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: format.duration(child.durationMs) }), density: "compact", onClick: () => onOpen(child) }, child.id))) }) })) : null, _jsx(Collapsible, { defaultIsOpen: false, trigger: _jsx(Text, { weight: "medium", children: t('@theorem.panel.trace.details') }), children: _jsxs(VStack, { gap: 3, children: [_jsx(SpanFields, { node: node }), sections.filter((section) => section !== usage).map((section) => (_jsx(Section, { title: section.key === 'other' ? t('@theorem.panel.trace.other') : TRACE_ATTRIBUTE_GROUPS[section.key].label, children: _jsx(TraceAttributeList, { record: record, attributes: section.attributes, metaOf: traceAttributeMeta }) }, section.key))), span.events.length > 0 ? (_jsx(Section, { title: TRACE_FIELDS.events.label, children: _jsx(EventList, { node: node }) })) : null, span.links.length > 0 ? (_jsx(Section, { title: TRACE_FIELDS.links.label, children: _jsx(LinkList, { node: node }) })) : null, _jsx(RecordSections, { node: node })] }) })] }));
+    return (_jsxs(VStack, { gap: 4, children: [_jsx(SpanHeader, { node: node, turnStartMs: turnStartMs, onBack: onBack, isClose: isClose }), _jsx(SpanIO, { node: node }), usage ? (_jsx(PanePanel, { title: TRACE_ATTRIBUTE_GROUPS.usage.label, doc: TRACE_ATTRIBUTE_GROUPS.usage.doc, children: _jsx(TraceAttributeList, { record: record, attributes: usage.attributes, metaOf: traceAttributeMeta }) })) : null, node.children.length > 0 ? (_jsx(PanePanel, { title: TRACE_FIELDS.children.label, doc: TRACE_FIELDS.children.doc, children: _jsx(VStack, { gap: 0, children: node.children.map((child) => (_jsx(Item, { startContent: _jsx(ActorMark, { actor: traceActor(child) }), label: child.meta.subject ?? child.meta.label, description: child.meta.label, endContent: _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: format.duration(child.durationMs) }), density: "compact", onClick: () => onOpen(child) }, child.id))) }) })) : null, _jsx(Collapsible, { defaultIsOpen: false, trigger: _jsx(Text, { weight: "medium", children: t('@theorem.panel.trace.details') }), children: _jsxs(VStack, { gap: 3, children: [_jsx(SpanFields, { node: node }), sections
+                            .filter((section) => section !== usage)
+                            .map((section) => (_jsx(Section, { title: section.key === 'other'
+                                ? t('@theorem.panel.trace.other')
+                                : TRACE_ATTRIBUTE_GROUPS[section.key].label, children: _jsx(TraceAttributeList, { record: record, attributes: section.attributes, metaOf: traceAttributeMeta }) }, section.key))), span.events.length > 0 ? (_jsx(Section, { title: TRACE_FIELDS.events.label, children: _jsx(EventList, { node: node }) })) : null, span.links.length > 0 ? (_jsx(Section, { title: TRACE_FIELDS.links.label, children: _jsx(LinkList, { node: node }) })) : null, _jsx(RecordSections, { node: node })] }) })] }));
 }

package/ui/TraceStory.js

@@ -7,7 +7,8 @@ import { Text } from '@astryxdesign/core/Text';
 import { Tooltip } from '@astryxdesign/core/Tooltip';
 import { VStack } from '@astryxdesign/core/VStack';
 import { IconAlertTriangle, IconBolt, IconInputAi, IconMessageCircle, IconServer, IconTool, IconUser, } from '@tabler/icons-react';
-import { toolArguments, traceActor, traceOutcome } from "../client/trace-story.js";
+import { toolArguments, traceActor, traceOutcome, } from "../client/trace-story.js";
+import { Arrive, Stream } from "./arrive.js";
 import { useTraceFormat } from "./TraceValues.js";
 /** Each actor's mark, shared by the story and the turn list. */
 const ACTOR_ICON = {
@@ -78,7 +79,7 @@ function AnswerItem({ step, isSelected, select }) {
     const answer = step.text ? _jsx(Quote, { text: step.text }) : undefined;
     return (_jsx(Item, { startContent: _jsx(ActorMark, { actor: failed ? 'error' : 'model', icon: failed ? undefined : IconMessageCircle }), label: _jsx(Text, { weight: "medium", children: t(failed ? '@theorem.panel.trace.story.failed' : '@theorem.panel.trace.story.answered') }), description: failed ? traceOutcome(step.node)?.label : answer, endContent: _jsx(Offset, { ms: step.offsetMs }), align: "start", density: "compact", onClick: select, isSelected: isSelected }));
 }
-function StepBody({ step, isSelected, select }) {
+function StepBody({ step, isSelected, select, }) {
     switch (step.kind) {
         case 'ask':
             return _jsx(AskItem, { step: step, isSelected: isSelected, select: select });
@@ -91,11 +92,11 @@ function StepBody({ step, isSelected, select }) {
     }
 }
 function StepItem({ step, isSelected, isDimmed, onSelect, }) {
-    return (_jsx("div", { style: {
-            paddingInlineStart: step.kind === 'span' && step.nested ? 20 : 0,
-            opacity: isDimmed ? 0.35 : 1,
-            transition: 'opacity 120ms ease',
-        }, children: _jsx(StepBody, { step: step, isSelected: isSelected, select: () => onSelect(step.node) }) }));
+    return (_jsx(Arrive, { children: _jsx("div", { style: {
+                paddingInlineStart: step.kind === 'span' && step.nested ? 20 : 0,
+                opacity: isDimmed ? 0.35 : 1,
+                transition: 'opacity 120ms ease',
+            }, children: _jsx(StepBody, { step: step, isSelected: isSelected, select: () => onSelect(step.node) }) }) }));
 }
 /**
  * The turn, told in order: what the user asked, each model call with the tool
@@ -103,5 +104,5 @@ function StepItem({ step, isSelected, isDimmed, onSelect, }) {
  * A line opens its span.
  */
 export function TraceStory({ steps, selectedId, matches, onSelect, }) {
-    return (_jsx(VStack, { gap: 0, children: steps.map((step) => (_jsx(StepItem, { step: step, isSelected: step.kind === 'span' ? step.node.id === selectedId : false, isDimmed: matches !== undefined && !matches.has(step.node.id), onSelect: onSelect }, step.id))) }));
+    return (_jsx(Stream, { children: _jsx(VStack, { gap: 0, children: steps.map((step) => (_jsx(StepItem, { step: step, isSelected: step.kind === 'span' ? step.node.id === selectedId : false, isDimmed: matches !== undefined && !matches.has(step.node.id), onSelect: onSelect }, step.id))) }) }));
 }

package/ui/TraceValues.js

@@ -7,11 +7,12 @@ import { Text } from '@astryxdesign/core/Text';
 import { Timestamp } from '@astryxdesign/core/Timestamp';
 import { Tooltip } from '@astryxdesign/core/Tooltip';
 import { VStack } from '@astryxdesign/core/VStack';
-import { useMemo, useState } from 'react';
 import { inlineContent, TRACE_ATTRIBUTE_GROUPS, traceAttributeMeta, } from '@theoremjs/agents';
-import { nanosToMs, traceValueShape } from "../client/trace-view.js";
+import { useMemo, useState } from 'react';
+import { nanosToMs, traceValueShape, } from "../client/trace-view.js";
 import { workDuration } from "./labels.js";
 import { useLabels } from "./labels-provider.js";
+import { keyedByContent } from "./row-keys.js";
 /** Width of every label column in the panel's lists, so they line up. */
 export const TRACE_LABEL_PX = 120;
 /** A span's attributes by catalog group, in the catalog's order; keys it does not name last. */
@@ -21,7 +22,10 @@ export function attributeSections(attributes) {
         const group = traceAttributeMeta(key)?.group ?? 'other';
         byGroup.set(group, { ...byGroup.get(group), [key]: value });
     }
-    const order = [...Object.keys(TRACE_ATTRIBUTE_GROUPS), 'other'];
+    const order = [
+        ...Object.keys(TRACE_ATTRIBUTE_GROUPS),
+        'other',
+    ];
     return order.flatMap((key) => {
         const grouped = byGroup.get(key);
         return grouped ? [{ key, attributes: grouped }] : [];
@@ -32,7 +36,11 @@ export function useTraceFormat() {
     const locale = useLocale();
     return useMemo(() => {
         const number = new Intl.NumberFormat(locale);
-        const usd = new Intl.NumberFormat(locale, { style: 'currency', currency: 'USD', maximumFractionDigits: 6 });
+        const usd = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency: 'USD',
+            maximumFractionDigits: 6,
+        });
         const list = new Intl.ListFormat(locale, { type: 'conjunction' });
         return {
             t,
@@ -41,7 +49,9 @@ export function useTraceFormat() {
             duration: (ms) => workDuration(t, ms),
             list: (items) => list.format(items),
             sum(total, format) {
-                const value = 'estimated' in total && total.estimated ? t('@theorem.panel.trace.about', { value: format(total.value) }) : format(total.value);
+                const value = 'estimated' in total && total.estimated
+                    ? t('@theorem.panel.trace.about', { value: format(total.value) })
+                    : format(total.value);
                 return total.complete ? value : t('@theorem.panel.trace.at_least', { value });
             },
         };
@@ -75,16 +85,16 @@ function StringValue({ meta, value }) {
     if (option)
         return _jsx(OptionValue, { option: option });
     if (meta?.format === 'time')
-        return _jsx(Timestamp, { value: nanosToMs(value), format: "system_date_time", size: "base", color: "primary" });
+        return (_jsx(Timestamp, { value: nanosToMs(value), format: "system_date_time", size: "base", color: "primary" }));
     return _jsx(Text, { wordBreak: "break-word", children: value });
 }
-function ScalarValue({ meta, value }) {
+function ScalarValue({ meta, value, }) {
     const format = useTraceFormat();
     if (typeof value === 'boolean')
         return _jsx(Text, { children: format.t(value ? '@theorem.panel.trace.yes' : '@theorem.panel.trace.no') });
     return _jsx(Text, { hasTabularNumbers: true, children: formatNumber(format, meta, value) });
 }
-function ListValue({ meta, value }) {
+function ListValue({ meta, value, }) {
     const format = useTraceFormat();
     return _jsx(Text, { children: format.list(value.map((item) => meta?.options?.[item]?.label ?? item)) });
 }
@@ -99,7 +109,7 @@ export function TraceValue({ record, meta, value, }) {
         case 'list':
             return _jsx(ListValue, { meta: meta, value: shape.value });
         case 'fields':
-            return (_jsx(VStack, { gap: 2, children: shape.items.map((item, index) => (_jsx(TraceAttributeList, { record: record, attributes: item, metaOf: (key) => shape.fields[key] }, index))) }));
+            return (_jsx(VStack, { gap: 2, children: keyedByContent(shape.items, (item) => JSON.stringify(item)).map(({ item, key }) => (_jsx(TraceAttributeList, { record: record, attributes: item, metaOf: (key) => shape.fields[key] }, key))) }));
         case 'stored':
             return _jsx(StoredText, { record: record, value: value });
     }

package/ui/TraceWaterfall.js

@@ -7,11 +7,11 @@ import { VStack } from '@astryxdesign/core/VStack';
 import { IconZoomOut } from '@tabler/icons-react';
 import { useMemo, useRef, useState } from 'react';
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ReferenceArea, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
-import { traceActivity, traceActor, traceBars, traceOutcome } from "../client/trace-story.js";
+import { traceActivity, traceActor, traceBars, traceOutcome, } from "../client/trace-story.js";
 import { ChartFrame, ChartTip, FIRST_WIDTH_PX } from "./TraceOverview.js";
+import { useTraceFormat } from "./TraceValues.js";
 import { TRACE_HUE } from "./trace-palette.js";
 import { ACTOR_FILL, TRACE_RADIUS, traceFill } from "./trace-patterns.js";
-import { useTraceFormat } from "./TraceValues.js";
 /** Slices in the activity strip. */
 const BUCKETS = 120;
 /** Height of one span's row, in pixels. */
@@ -41,7 +41,9 @@ function BarTip({ active, payload }) {
                         format.duration(node.durationMs),
                         format.t('@theorem.panel.trace.offset', { duration: format.duration(from) }),
                         ...(typeof cost === 'number' ? [format.usd(cost)] : []),
-                    ].join(format.t('@theorem.panel.trace.separator')) }), outcome ? (_jsx(Text, { type: "supporting", children: _jsx("span", { style: { color: outcome.tone === 'error' ? TRACE_HUE.oxblood : 'var(--color-text-secondary)' }, children: outcome.label }) })) : null] }) }));
+                    ].join(format.t('@theorem.panel.trace.separator')) }), outcome ? (_jsx(Text, { type: "supporting", children: _jsx("span", { style: {
+                            color: outcome.tone === 'error' ? TRACE_HUE.oxblood : 'var(--color-text-secondary)',
+                        }, children: outcome.label }) })) : null] }) }));
 }
 /** A row's name, from the chart's left edge, set in by its depth and cut to the column. */
 function NameTick({ y: rawY, payload, rows, }) {
@@ -52,14 +54,16 @@ function NameTick({ y: rawY, payload, rows, }) {
     const indent = Math.min(row.bar.depth, 4) * INDENT_PX;
     const room = Math.floor((NAME_PX - indent - 10) / 6.2);
     const name = row.name.length > room ? `${row.name.slice(0, Math.max(1, room - 1))}…` : row.name;
-    return (_jsxs("text", { x: indent, y: y, dy: "0.35em", fontSize: 11, fill: row.bar.node.span.status.code === 'ERROR' ? TRACE_HUE.oxblood : 'var(--color-text-secondary)', children: [_jsx("title", { children: row.name }), name] }));
+    return (_jsxs("text", { x: indent, y: y, dy: "0.35em", fontSize: 11, fill: row.bar.node.span.status.code === 'ERROR'
+            ? TRACE_HUE.oxblood
+            : 'var(--color-text-secondary)', children: [_jsx("title", { children: row.name }), name] }));
 }
 /** How busy the model and tools were over the turn; a drag across it picks the window to zoom into. */
-function ActivityStrip({ root, zoom, onZoom }) {
+function ActivityStrip({ root, zoom, onZoom, }) {
     const activity = useMemo(() => traceActivity(root, BUCKETS), [root]);
     const total = Math.max(root.durationMs, 1);
     const [drag, setDrag] = useState(null);
-    // Pointer events can outrun a render; the ref always holds the drag so far.
+    // why: Pointer events can outrun a render; the ref always holds the drag so far.
     const dragRef = useRef(null);
     const moveDrag = (next) => {
         dragRef.current = next;
@@ -76,14 +80,13 @@ function ActivityStrip({ root, zoom, onZoom }) {
         if (done) {
             const from = Math.min(done.from, done.to);
             const to = Math.max(done.from, done.to);
-            // A click, not a drag: leave the zoom as it was.
             if (to - from >= total / BUCKETS)
                 onZoom({ root: root.id, from, to });
         }
         moveDrag(null);
     };
     const shown = drag ?? zoom;
-    return (_jsx("div", { style: { cursor: 'col-resize', userSelect: 'none', touchAction: 'none' }, onPointerDown: (event) => {
+    return (_jsx("div", { role: "application", style: { cursor: 'col-resize', userSelect: 'none', touchAction: 'none' }, onPointerDown: (event) => {
             event.currentTarget.setPointerCapture(event.pointerId);
             const value = timeAt(event);
             moveDrag({ from: value, to: value });
@@ -128,5 +131,5 @@ export function TraceWaterfall({ root, selectedId, matches, onSelect, }) {
     const { t } = useTraceFormat();
     const [picked, setPicked] = useState(null);
     const zoom = picked?.root === root.id ? picked : null;
-    return (_jsxs(VStack, { gap: 2, children: [_jsxs(HStack, { gap: 2, align: "center", justify: "between", children: [_jsx(Text, { type: "supporting", color: "secondary", children: t('@theorem.panel.trace.timeline.zoom') }), zoom ? (_jsx(Button, { label: t('@theorem.panel.trace.timeline.reset'), variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconZoomOut }), onClick: () => setPicked(null) })) : null] }), _jsx(ActivityStrip, { root: root, zoom: zoom, onZoom: setPicked }), _jsx(SpanBars, { root: root, domain: zoom ? [zoom.from, zoom.to] : [0, Math.max(root.durationMs, 1)], selectedId: selectedId, matches: matches, onSelect: onSelect })] }));
+    return (_jsxs(VStack, { gap: 2, className: "theorem-arrive", children: [_jsxs(HStack, { gap: 2, align: "center", justify: "between", children: [_jsx(Text, { type: "supporting", color: "secondary", children: t('@theorem.panel.trace.timeline.zoom') }), zoom ? (_jsx(Button, { label: t('@theorem.panel.trace.timeline.reset'), variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconZoomOut }), onClick: () => setPicked(null) })) : null] }), _jsx(ActivityStrip, { root: root, zoom: zoom, onZoom: setPicked }), _jsx(SpanBars, { root: root, domain: zoom ? [zoom.from, zoom.to] : [0, Math.max(root.durationMs, 1)], selectedId: selectedId, matches: matches, onSelect: onSelect })] }));
 }

package/ui/VoiceNote.js

@@ -6,10 +6,10 @@ import { IconButton } from '@astryxdesign/core/IconButton';
 import { VStack } from '@astryxdesign/core/VStack';
 import { IconX } from '@tabler/icons-react';
 import { voiceFormatFromMime } from "../client/voice-label.js";
-import { voiceNoteName } from "./labels.js";
-import { useLabels } from "./labels-provider.js";
 import { InkWaveform } from "../components/InkWaveform.js";
 import { useVoicePlayback } from "../components/use-voice-playback.js";
+import { voiceNoteName } from "./labels.js";
+import { useLabels } from "./labels-provider.js";
 /** Astryx Thumbnail's height, so voice notes sit level with image attachments. */
 const VOICE_NOTE_HEIGHT = 64;
 const VOICE_NOTE_WIDTH = 160;
@@ -19,10 +19,10 @@ const VOICE_NOTE_WIDTH = 160;
  */
 export function VoiceNote({ src, mimeType = 'audio/webm', label, onRemove }) {
     const t = useLabels();
-    const { playing, outputLevel, toggle, audioProps } = useVoicePlayback();
+    const { playing, levelsRef, toggle, audioProps } = useVoicePlayback();
     const name = label ?? voiceNoteName(t, voiceFormatFromMime(mimeType));
     const remove = t('@theorem.voice_note.remove', { name });
     return (_jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(ClickableCard, { label: t(playing ? '@theorem.voice_note.pause' : '@theorem.voice_note.play', { name }), onClick: () => {
                     void toggle();
-                }, padding: 0, width: VOICE_NOTE_WIDTH, height: VOICE_NOTE_HEIGHT, children: _jsx(VStack, { width: "100%", height: "100%", paddingInline: 2, paddingBlockStart: 2, style: { color: 'var(--color-icon-primary)' }, "aria-hidden": "true", children: _jsx(InkWaveform, { frozen: !playing, outputLevel: outputLevel, status: playing ? 'speaking' : 'ready', variant: "pill" }) }) }), onRemove ? (_jsx(IconButton, { label: remove, tooltip: remove, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconX }), onClick: onRemove })) : null, _jsx("audio", { ...audioProps, src: src, hidden: true })] }));
+                }, padding: 0, width: VOICE_NOTE_WIDTH, height: VOICE_NOTE_HEIGHT, children: _jsx(VStack, { width: "100%", height: "100%", paddingInline: 2, paddingBlockStart: 2, style: { color: 'var(--color-icon-primary)' }, "aria-hidden": "true", children: _jsx(InkWaveform, { frozen: !playing, levelsRef: levelsRef, status: playing ? 'speaking' : 'ready', variant: "pill" }) }) }), onRemove ? (_jsx(IconButton, { label: remove, tooltip: remove, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconX }), onClick: onRemove })) : null, _jsx("audio", { ...audioProps, src: src, hidden: true })] }));
 }

package/ui/approval-heading.d.ts

@@ -0,0 +1,4 @@
+import type { ToolGate } from '@theoremjs/agents/kernel';
+import type { LabelText } from './labels.ts';
+/** "@concierge wants to check the weather": the tool's `labels.request`, else its name in words. */
+export declare function approvalHeading(t: LabelText, gate: ToolGate, toolName: string, agent?: string): string;

package/ui/approval-heading.js

@@ -0,0 +1,9 @@
+import { humanize } from "../client/shaped-data.js";
+/** "@concierge wants to check the weather": the tool's `labels.request`, else its name in words. */
+export function approvalHeading(t, gate, toolName, agent) {
+    const request = gate.request ??
+        t('@theorem.gate.approval.use_tool', { tool: humanize(toolName).toLowerCase() });
+    return agent
+        ? t('@theorem.gate.approval.title', { agent, request })
+        : t('@theorem.gate.approval.title_no_agent', { request });
+}

package/ui/arrive.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties, type ReactNode } from 'react';
+/**
+ * Items under this ease in one after another, in tree order. An item that
+ * mounts later (a span that just landed, a chart whose module just loaded)
+ * eases in on its own. Already-shown items do not replay.
+ */
+export declare function Stream({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Class and delay for one item. Nothing outside a {@link Stream}. */
+export declare function useArrive(): {
+    className: string;
+    style?: CSSProperties;
+} | null;
+/** A block that eases in with its siblings under {@link Stream}. */
+export declare function Arrive({ children }: {
+    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;

package/ui/arrive.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use, useRef, useState } from 'react';
+/**
+ * How long each later item waits. Short enough that a handful still read as
+ * one arrival, long enough that the order is visible.
+ */
+const STEP_MS = 64;
+/** Past this, the rest start together so a long list is not still waiting. */
+const CAP = 10;
+const ArriveSeq = createContext(null);
+/**
+ * Items under this ease in one after another, in tree order. An item that
+ * mounts later (a span that just landed, a chart whose module just loaded)
+ * eases in on its own. Already-shown items do not replay.
+ */
+export function Stream({ children }) {
+    const seq = useRef(0);
+    // why: Each render starts again. Items remember the place they took, so a
+    // re-render does not hand that place to someone else.
+    seq.current = 0;
+    return _jsx(ArriveSeq, { value: seq, children: children });
+}
+/** Class and delay for one item. Nothing outside a {@link Stream}. */
+export function useArrive() {
+    const seq = use(ArriveSeq);
+    const slot = useRef(null);
+    if (seq && slot.current === null) {
+        slot.current = seq.current;
+        seq.current += 1;
+    }
+    const index = seq ? slot.current : null;
+    const [delay] = useState(() => (index === null ? 0 : Math.min(index, CAP) * STEP_MS));
+    if (index === null)
+        return null;
+    return {
+        className: 'theorem-arrive',
+        style: delay > 0 ? { animationDelay: `${String(delay)}ms` } : undefined,
+    };
+}
+/** A block that eases in with its siblings under {@link Stream}. */
+export function Arrive({ children }) {
+    const arrive = useArrive();
+    if (!arrive)
+        return children;
+    return (_jsx("div", { className: arrive.className, style: arrive.style, children: children }));
+}

package/ui/built/theme.css

@@ -2,10 +2,12 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/ui/theorem-theme.ts
  * Command: astryx theme build src/ui/theorem-theme.ts --out src/ui/built/theme.css
- * CLI: @astryxdesign/cli@0.6.3
- * Core: @astryxdesign/core@0.6.3
+ * CLI: @astryxdesign/cli@0.7.0
+ * Core: @astryxdesign/core@0.7.0
  */
 
+@layer reset, astryx-base, astryx-theme;
+
 @layer reset {
 @scope ([data-astryx-theme="theorem"]) to ([data-astryx-theme]) {
   :where(h1, h2, h3, h4, h5, h6) {
@@ -77,67 +79,6 @@
 }
 }
 
-@layer astryx-base {
-:root {
-  --color-data-categorical-blue: light-dark(#0171E3, #0171E3);
-  --color-data-categorical-orange: light-dark(#EB6E00, #EB6E00);
-  --color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD);
-  --color-data-categorical-green: light-dark(#0B991F, #0B991F);
-  --color-data-categorical-pink: light-dark(#F351C0, #F351C0);
-  --color-data-categorical-cyan: light-dark(#0171A4, #0171A4);
-  --color-data-categorical-red: light-dark(#F5394F, #F5394F);
-  --color-data-categorical-teal: light-dark(#08A3A3, #08A3A3);
-  --color-data-categorical-brown: light-dark(#965E03, #965E03);
-  --color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF);
-  --color-data-neutral: light-dark(#8494A3, #8C939B);
-  --color-data-blue-5: light-dark(#02165E, #02165E);
-  --color-data-blue-4: light-dark(#004CBC, #004CBC);
-  --color-data-blue-3: light-dark(#2694FE, #2694FE);
-  --color-data-blue-2: light-dark(#78BEFF, #78BEFF);
-  --color-data-blue-1: light-dark(#DBECFF, #DBECFF);
-  --color-data-shamrock-5: light-dark(#0B603D, #0B603D);
-  --color-data-shamrock-4: light-dark(#138546, #138546);
-  --color-data-shamrock-3: light-dark(#24BB5E, #24BB5E);
-  --color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA);
-  --color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4);
-  --color-data-orange-5: light-dark(#A13F04, #A13F04);
-  --color-data-orange-4: light-dark(#D66100, #D66100);
-  --color-data-orange-3: light-dark(#FD9537, #FD9537);
-  --color-data-orange-2: light-dark(#FDB876, #FDB876);
-  --color-data-orange-1: light-dark(#FFE6CF, #FFE6CF);
-  --color-data-pink-5: light-dark(#8E1073, #8E1073);
-  --color-data-pink-4: light-dark(#D123A1, #D123A1);
-  --color-data-pink-3: light-dark(#F989D3, #F989D3);
-  --color-data-pink-2: light-dark(#FEADE3, #FEADE3);
-  --color-data-pink-1: light-dark(#FCE3F4, #FCE3F4);
-  --color-data-purple-5: light-dark(#3E0697, #3E0697);
-  --color-data-purple-4: light-dark(#6B1EFD, #6B1EFD);
-  --color-data-purple-3: light-dark(#9081FF, #9081FF);
-  --color-data-purple-2: light-dark(#B3B0FE, #B3B0FE);
-  --color-data-purple-1: light-dark(#E8E8FB, #E8E8FB);
-  --color-data-red-5: light-dark(#9D0519, #9D0519);
-  --color-data-red-4: light-dark(#D31130, #D31130);
-  --color-data-red-3: light-dark(#FB7D87, #FB7D87);
-  --color-data-red-2: light-dark(#FFB2B8, #FFB2B8);
-  --color-data-red-1: light-dark(#FEE4E6, #FEE4E6);
-  --color-data-teal-5: light-dark(#08767D, #08767D);
-  --color-data-teal-4: light-dark(#0C9293, #0C9293);
-  --color-data-teal-3: light-dark(#0DB7AF, #0DB7AF);
-  --color-data-teal-2: light-dark(#6CE6D8, #6CE6D8);
-  --color-data-teal-1: light-dark(#D7FCF8, #D7FCF8);
-  --color-data-yellow-5: light-dark(#8A5001, #8A5001);
-  --color-data-yellow-4: light-dark(#D69804, #D69804);
-  --color-data-yellow-3: light-dark(#FBCE03, #FBCE03);
-  --color-data-yellow-2: light-dark(#FCEC85, #FCEC85);
-  --color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA);
-  --color-data-gray-5: light-dark(#25363F, #333338);
-  --color-data-gray-4: light-dark(#5D6C7B, #666A72);
-  --color-data-gray-3: light-dark(#AFB9C4, #B2B8BE);
-  --color-data-gray-2: light-dark(#CCD3DB, #D0D3D6);
-  --color-data-gray-1: light-dark(#F1F4F7, #F2F4F6);
-}
-}
-
 @layer astryx-theme {
   :root { color-scheme: light dark; }
   html[data-theme="light"] { color-scheme: light; }
@@ -641,6 +582,15 @@
     --astryx-card-padding: var(--spacing-3);
   }
 
+  .astryx-card[data-variant="bubble"] {
+    background-color: var(--color-neutral);
+    border-radius: var(--radius-chat);
+    --astryx-card-padding-inline: var(--spacing-4);
+    --astryx-card-padding-block-start: var(--spacing-3);
+    --astryx-card-padding-block-end: var(--spacing-3);
+    --_card-radius: var(--radius-chat);
+  }
+
   .astryx-section {
     --astryx-section-padding: var(--spacing-3);
   }
@@ -681,11 +631,15 @@
     align-self: baseline;
   }
 
+  .astryx-code-block[data-container="card"] {
+    border-radius: var(--radius-container);
+  }
+
   .astryx-layout-panel:where([role="complementary"]) {
     transition: width var(--duration-medium) var(--ease-standard);
   }
 
-  .astryx-layout-panel:where([data-resizing] + [role="complementary"]) {
+  .astryx-layout-panel:where([data-resizing] + [role="complementary"], [role="complementary"]:has(+ [data-resizing])) {
     transition: none;
   }
 
@@ -742,15 +696,79 @@
 }
 
 @layer astryx-theme {
+@media (width < 1024px) and (pointer: coarse) {
+  @scope ([data-astryx-theme="theorem"]) to ([data-astryx-theme]) {
+    :scope {
+    --font-size-4xs: 0.4375rem;
+    --font-size-3xs: 0.5rem;
+    --font-size-2xs: 0.625rem;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.1875rem;
+    --font-size-xl: 1.375rem;
+    --font-size-2xl: 1.625rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-5xl: 2.625rem;
+    --text-heading-1-size: var(--font-size-2xl);
+    --text-heading-1-weight: var(--font-weight-semibold);
+    --text-heading-1-leading: 1.3846;
+    --text-heading-2-size: var(--font-size-xl);
+    --text-heading-2-weight: var(--font-weight-semibold);
+    --text-heading-2-leading: 1.4545;
+    --text-heading-3-size: var(--font-size-lg);
+    --text-heading-3-weight: var(--font-weight-bold);
+    --text-heading-3-leading: 1.4737;
+    --text-heading-4-size: var(--font-size-base);
+    --text-heading-4-weight: var(--font-weight-bold);
+    --text-heading-4-leading: 1.5;
+    --text-heading-5-size: var(--font-size-sm);
+    --text-heading-5-weight: var(--font-weight-semibold);
+    --text-heading-5-leading: 1.4286;
+    --text-heading-6-size: var(--font-size-xs);
+    --text-heading-6-weight: var(--font-weight-semibold);
+    --text-heading-6-leading: 1.6667;
+    --text-body-size: var(--font-size-base);
+    --text-body-weight: var(--font-weight-normal);
+    --text-body-leading: 1.5;
+    --text-large-size: var(--font-size-lg);
+    --text-large-weight: var(--font-weight-semibold);
+    --text-large-leading: 1.4737;
+    --text-label-size: var(--font-size-base);
+    --text-label-weight: var(--font-weight-medium);
+    --text-label-leading: 1.5;
+    --text-code-size: var(--font-size-base);
+    --text-code-weight: var(--font-weight-normal);
+    --text-code-leading: 1.5;
+    --text-supporting-size: var(--font-size-sm);
+    --text-supporting-weight: var(--font-weight-normal);
+    --text-supporting-leading: 1.4286;
+    --text-display-1-size: var(--font-size-5xl);
+    --text-display-1-weight: var(--font-weight-normal);
+    --text-display-1-leading: 1.2381;
+    --text-display-2-size: var(--font-size-4xl);
+    --text-display-2-weight: var(--font-weight-normal);
+    --text-display-2-leading: 1.2222;
+    --text-display-3-size: var(--font-size-3xl);
+    --text-display-3-weight: var(--font-weight-normal);
+    --text-display-3-leading: 1.4667;
+    --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-family-heading: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   @scope ([data-astryx-theme="theorem"]) to ([data-astryx-theme]) {
     .astryx-collapsible-content {
-      transition: none;
-    }
+    transition: none;
+  }
 
     .astryx-layout-panel:where([role="complementary"]) {
-      transition: none;
-    }
+    transition: none;
+  }
   }
 }
 }