@theoremjs/react 0.3.4-next.608.gd007c52 → 0.3.4-next.612.g21d312d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.608.gd007c52",
+  "version": "0.3.4-next.612.g21d312d",
   "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.608.gd007c52",
-    "@theoremjs/web": "^0.3.4-next.608.gd007c52"
+    "@theoremjs/agents": "^0.3.4-next.612.g21d312d",
+    "@theoremjs/web": "^0.3.4-next.612.g21d312d"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/CardWall.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { VStack } from '@astryxdesign/core/VStack';
 import { Children, isValidElement, useLayoutEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 import { columnCount, wallPlaces } from "./wall-columns.js";
 function sameWall(a, b) {
     return (a.width === b.width &&
@@ -22,6 +23,21 @@ export function CardWall({ minWidth, children }) {
     const wallRef = useRef(null);
     const slots = useRef([]);
     const observer = useRef(null);
+    const slotRefs = useRef([]);
+    // why: One callback per place, so a re-render does not detach and watch every slot again.
+    const slotRef = (at) => {
+        slotRefs.current[at] ??= (slot) => {
+            slots.current[at] = slot;
+            // why: A card that mounts later is measured once it is watched.
+            if (slot)
+                observer.current?.observe(slot);
+            return () => {
+                if (slot)
+                    observer.current?.unobserve(slot);
+            };
+        };
+        return slotRefs.current[at];
+    };
     const [wall, setWall] = useState({ width: 0, gap: 0, heights: [] });
     const count = columnCount(wall.width, minWidth, wall.gap);
     const columnWidth = (wall.width - wall.gap * (count - 1)) / count;
@@ -33,16 +49,26 @@ export function CardWall({ minWidth, children }) {
         const node = wallRef.current;
         if (!node)
             return;
-        const measure = () => {
+        const sizes = new WeakMap();
+        let width = 0;
+        // why: Sizes come only from the observer, after the browser's own layout: reading them here
+        // would force a layout, and inside a closed disclosure lay out what is hidden.
+        const watch = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const box = entry.borderBoxSize[0];
+                if (entry.target === node)
+                    width = entry.contentBoxSize[0]?.inlineSize ?? width;
+                else if (box)
+                    sizes.set(entry.target, box.blockSize);
+            }
             const next = {
-                width: node.clientWidth,
+                width,
                 gap: Number.parseFloat(getComputedStyle(node).rowGap) || 0,
-                heights: slots.current.map((slot) => slot?.offsetHeight),
+                heights: slots.current.map((slot) => (slot ? sizes.get(slot) : undefined)),
             };
-            setWall((shown) => (sameWall(shown, next) ? shown : next));
-        };
-        measure();
-        const watch = new ResizeObserver(measure);
+            // why: Placed in the same frame it was measured, so no frame shows the cards unplaced.
+            flushSync(() => setWall((shown) => (sameWall(shown, next) ? shown : next)));
+        });
         watch.observe(node);
         for (const slot of slots.current)
             if (slot)
@@ -55,16 +81,7 @@ export function CardWall({ minWidth, children }) {
     }, []);
     return (_jsx(VStack, { ref: wallRef, gap: 3, style: isPlaced ? { position: 'relative', height } : undefined, children: cards.map((card, at) => {
             const place = places[at];
-            return (_jsx("div", { ref: (slot) => {
-                    slots.current[at] = slot;
-                    // why: A card that mounts later is measured once it is watched.
-                    if (slot)
-                        observer.current?.observe(slot);
-                    return () => {
-                        if (slot)
-                            observer.current?.unobserve(slot);
-                    };
-                }, style: isPlaced && place
+            return (_jsx("div", { ref: slotRef(at), style: isPlaced && place
                     ? {
                         position: 'absolute',
                         top: place.top,

package/ui/ConsoleFrame.js

@@ -6,6 +6,7 @@ import { HStack } from '@astryxdesign/core/HStack';
 import { useLocale } from '@astryxdesign/core/i18n';
 import { Layout, LayoutContent } from '@astryxdesign/core/Layout';
 import { useResizable } from '@astryxdesign/core/Resizable';
+import { percent, pixel } from '@astryxdesign/core/Resizable/utils';
 import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl';
 import { Text } from '@astryxdesign/core/Text';
 import { TextArea } from '@astryxdesign/core/TextArea';
@@ -79,7 +80,8 @@ function ConsoleColumns({ requestLabel = 'Request', layoutRef, children, }) {
     const requestPanel = useResizable({
         defaultSize: basisWidth > 0 ? Math.round(basisWidth * 0.4) : '40%',
         minSize: 280,
-        maxSize: '70%',
+        // why: In a narrow pair 70% is below the minimum; the maximum never is.
+        maxSize: percent(70, { min: pixel(280) }),
         containerRef: pairRef,
     });
     const [request, response] = Children.toArray(children);

package/ui/SidePanel.js

@@ -4,6 +4,7 @@ import { HStack } from '@astryxdesign/core/HStack';
 import { IconButton } from '@astryxdesign/core/IconButton';
 import { Layout, LayoutContent, LayoutHeader, LayoutPanel } from '@astryxdesign/core/Layout';
 import { ResizeHandle, useResizable, } from '@astryxdesign/core/Resizable';
+import { percent, pixel } from '@astryxdesign/core/Resizable/utils';
 import { ScrollableArea } from '@astryxdesign/core/ScrollableArea';
 import { StackItem } from '@astryxdesign/core/Stack';
 import { Text } from '@astryxdesign/core/Text';
@@ -13,12 +14,12 @@ import { useCallback, useId, useState } from 'react';
 /**
  * `useResizable` sizing for side panels: a third of the layout (pass the
  * Layout as `containerRef` so the percentages resolve), dragged between a
- * readable minimum and half.
+ * readable minimum and half, or the minimum when half is less.
  */
 const SIDE_PANEL_SIZING = {
     defaultSize: '33%',
     minSize: 280,
-    maxSize: '50%',
+    maxSize: percent(50, { min: pixel(280) }),
 };
 /** Whether a side panel is wide enough for two readable columns: twice its minimum. */
 export function isSidePanelWide(size) {

package/ui/ToolResult.js

@@ -32,7 +32,7 @@ function ResultLead({ layout, parts = [], }) {
     if (!hasLead(layout, media))
         return null;
     const { images, audio } = media;
-    return (_jsxs(VStack, { gap: 3, children: [_jsxs(CardWall, { minWidth: CARD_PX, children: [layout.figures.map((figure) => (_jsx(Arrive, { children: _jsx(ChartCard, { title: figure.label, value: withUnit(decimal.format(figure.value), figure.unit) }) }, `figure:${figure.key}`))), layout.charts.map((chart) => (_jsx(Arrive, { children: _jsx(Suspense, { fallback: _jsx(Skeleton, { height: CHART_CARD_PX }), children: _jsx(ToolResultChart, { chart: chart }) }) }, `chart:${chart.key}`))), images.map((image, index) => (_jsx(Arrive, { children: _jsx(ClickableCard, { label: image.alt || 'Open image', padding: 0, onClick: () => setOpen(index), children: _jsx(AspectRatio, { ratio: 4 / 3, fit: "cover", children: _jsx("img", { src: image.src, alt: image.alt, loading: "lazy" }) }) }) }, `image:${image.src}`)))] }), images.length > 0 ? (_jsx(Lightbox, { isOpen: open !== null, onOpenChange: (isOpen) => {
+    return (_jsxs(VStack, { gap: 3, children: [_jsxs(CardWall, { minWidth: CARD_PX, children: [layout.figures.map((figure) => (_jsx(Arrive, { children: _jsx(ChartCard, { title: figure.label, value: withUnit(decimal.format(figure.value), figure.unit) }) }, `figure:${figure.key}`))), layout.charts.map((chart) => (_jsx(Suspense, { fallback: _jsx(Arrive, { children: _jsx(Skeleton, { height: CHART_CARD_PX }) }), children: _jsx(Arrive, { children: _jsx(ToolResultChart, { chart: chart }) }) }, `chart:${chart.key}`))), images.map((image, index) => (_jsx(Arrive, { children: _jsx(ClickableCard, { label: image.alt || 'Open image', padding: 0, onClick: () => setOpen(index), children: _jsx(AspectRatio, { ratio: 4 / 3, fit: "cover", children: _jsx("img", { src: image.src, alt: image.alt, loading: "lazy" }) }) }) }, `image:${image.src}`)))] }), images.length > 0 ? (_jsx(Lightbox, { isOpen: open !== null, onOpenChange: (isOpen) => {
                     if (!isOpen)
                         setOpen(null);
                 }, media: images.map((image) => ({ src: image.src, alt: image.alt })), index: open ?? 0, onIndexChange: setOpen })) : null, keyedByContent(audio, (clip) => clip.src).map(({ item: clip, key }) => (_jsx(Arrive, { children: _jsx(VoiceNote, { src: clip.src, mimeType: clip.mimeType }) }, key)))] }));

package/ui/TraceCharts.d.ts

@@ -1,24 +1,13 @@
-import { type TraceLatency, type TraceTimeSplit, type TraceTurn } from '../client/trace-story.ts';
-import { type TraceNode, type TraceTotals } from '../client/trace-view.ts';
-/**
- * A turn's figures, then where its time, tokens, and slowest steps went, in
- * one wall. A bar opens its span.
- */
-export declare function TraceCharts({ root, split, totals, tools, latency, onSelect, }: {
+import { type TraceTimeSplit, type TraceTurn } from '../client/trace-story.ts';
+import { type TraceNode } from '../client/trace-view.ts';
+/** Where a turn's time, tokens, and slowest steps went. A bar opens its span. */
+export declare function TraceCharts({ root, split, onSelect, }: {
     root: TraceNode;
     split: TraceTimeSplit;
-    totals: TraceTotals;
-    tools: number;
-    latency?: TraceLatency;
     onSelect: (node: TraceNode) => void;
 }): import("react").JSX.Element;
-/**
- * The whole conversation: its figures, then each turn's time and tokens, in
- * one wall. A column opens its turn.
- */
-export declare function ConversationCharts({ turns, totals, tools, onPick, }: {
+/** The whole conversation: each turn's time and tokens. A column opens its turn. */
+export declare function ConversationCharts({ turns, onPick, }: {
     turns: readonly TraceTurn[];
-    totals: TraceTotals;
-    tools: number;
     onPick: (index: number) => void;
 }): import("react").JSX.Element;

package/ui/TraceCharts.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid } from '@astryxdesign/core/Grid';
 import { HStack } from '@astryxdesign/core/HStack';
 import { Text } from '@astryxdesign/core/Text';
 import { VStack } from '@astryxdesign/core/VStack';
@@ -6,8 +7,7 @@ import { useMemo } from 'react';
 import { Bar, BarChart, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import { isCallTrace, traceActor, } from "../client/trace-story.js";
 import { traceSpans } from "../client/trace-view.js";
-import { CardWall } from "./CardWall.js";
-import { ChartFrame, ChartTip, FIRST_WIDTH_PX, TRACE_CARD_PX, turnStats, } from "./TraceOverview.js";
+import { ChartFrame, ChartTip, FIRST_WIDTH_PX } from "./TraceOverview.js";
 import { useTraceFormat } from "./TraceValues.js";
 import { ACTOR_FILL, ChartCard, TRACE_GAP, TRACE_RADIUS, TraceSwatch, traceFill, } from "./trace-patterns.js";
 /** Height of each column chart's plot, in pixels. */
@@ -206,14 +206,11 @@ function SlowestCard({ root, onSelect }) {
                                 formatter: (value) => format.duration(Number(value)),
                             }, children: rows.map((row) => (_jsx(Cell, { fill: traceFill(ACTOR_FILL[traceActor(row.node)]) }, row.id))) })] }) }) }) }));
 }
-/**
- * A turn's figures, then where its time, tokens, and slowest steps went, in
- * one wall. A bar opens its span.
- */
-export function TraceCharts({ root, split, totals, tools, latency, onSelect, }) {
-    const format = useTraceFormat();
+/** Where a turn's time, tokens, and slowest steps went. A bar opens its span. */
+export function TraceCharts({ root, split, onSelect, }) {
+    const { t } = useTraceFormat();
     const callRows = useCallRows(root, onSelect);
-    return (_jsxs(CardWall, { minWidth: TRACE_CARD_PX, children: [turnStats(format, { totals, tools, latency }), _jsx(TimeCard, { split: split }, "time"), _jsx(TokensCard, { title: format.t('@theorem.panel.trace.charts.calls'), rows: callRows }, "call-tokens"), _jsx(SlowestCard, { root: root, onSelect: onSelect }, "slowest")] }));
+    return (_jsxs(Grid, { columns: { minWidth: 260, repeat: 'fit' }, gap: 3, children: [_jsx(TimeCard, { split: split }), _jsx(TokensCard, { title: t('@theorem.panel.trace.charts.calls'), rows: callRows }), _jsx(SlowestCard, { root: root, onSelect: onSelect })] }));
 }
 function TurnTimeTip({ active, payload }) {
     const format = useTraceFormat();
@@ -240,13 +237,9 @@ function TurnTimeCard({ rows, isCalls }) {
             })
             : undefined, children: [_jsx(Columns, { rows: rows, keys: SPLIT_KEYS, fills: SPLIT_FILL, tip: (props) => _jsx(TurnTimeTip, { ...props }) }), _jsx(SplitLegend, { split: sums, total: total })] }));
 }
-/**
- * The whole conversation: its figures, then each turn's time and tokens, in
- * one wall. A column opens its turn.
- */
-export function ConversationCharts({ turns, totals, tools, onPick, }) {
-    const format = useTraceFormat();
-    const { t } = format;
+/** The whole conversation: each turn's time and tokens. A column opens its turn. */
+export function ConversationCharts({ turns, onPick, }) {
+    const { t } = useTraceFormat();
     const isCalls = isCallTrace(turns);
     const column = isCalls
         ? '@theorem.panel.trace.charts.hostCall'
@@ -269,5 +262,5 @@ export function ConversationCharts({ turns, totals, tools, onPick, }) {
         }),
         open: () => onPick(position),
     })), [turns, onPick, t, column]);
-    return (_jsxs(CardWall, { minWidth: TRACE_CARD_PX, children: [turnStats(format, { totals, tools }), _jsx(TurnTimeCard, { rows: time, isCalls: isCalls }, "turn-time"), _jsx(TokensCard, { title: t('@theorem.panel.trace.charts.turnTokens'), rows: tokens }, "turn-tokens")] }));
+    return (_jsxs(Grid, { columns: { minWidth: 260, repeat: 'fit' }, gap: 3, children: [_jsx(TurnTimeCard, { rows: time, isCalls: isCalls }), _jsx(TokensCard, { title: t('@theorem.panel.trace.charts.turnTokens'), rows: tokens })] }));
 }

package/ui/TraceInspector.js

@@ -13,11 +13,10 @@ import { isCallTrace, traceGuardrails, traceLatency, traceStory, traceTurnRow, t
 import { TRACE_SEARCH_OPERATORS, TRACE_TEXT_FIELD, traceMatchIds, traceSearchFields, traceSpans, traceTotals, traceTree, } from "../client/trace-view.js";
 import { useTraceRecords } from "../hooks/use-trace-records.js";
 import { Stream, useArrive } from "./arrive.js";
-import { CardWall } from "./CardWall.js";
 import { PaneLayout } from "./SidePanel.js";
 import { ConversationCharts, TraceCharts } from "./TraceCharts.js";
 import { TraceGuardrails } from "./TraceGuardrails.js";
-import { GuardrailStat, TRACE_CARD_PX, TurnPicker } from "./TraceOverview.js";
+import { GuardrailStats, TurnPicker, TurnStats } from "./TraceOverview.js";
 import { TraceSpanDetail } from "./TraceSpanDetail.js";
 import { ActorMark, TraceStory } from "./TraceStory.js";
 import { useTraceFormat } from "./TraceValues.js";
@@ -125,7 +124,7 @@ function ConversationOverview({ turns, onPick, }) {
     const isCalls = isCallTrace(turns);
     return (_jsxs(VStack, { gap: 5, padding: 4, children: [_jsx(Text, { weight: "semibold", children: t(isCalls ? '@theorem.panel.trace.calls.count' : '@theorem.panel.trace.conversation', {
                     count: turns.length,
-                }) }), _jsx(ConversationCharts, { turns: turns, totals: totals, tools: tools, onPick: onPick }), _jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t(isCalls ? '@theorem.panel.trace.calls' : '@theorem.panel.trace.turns') }), _jsx(Stream, { children: _jsx(VStack, { gap: 0, children: turns.map((turn, index) => (_jsx(TurnRow, { turn: turn, index: index, isCall: isCalls, onOpen: () => onPick(index) }, turn.node.id))) }) })] })] }));
+                }) }), _jsxs(VStack, { gap: 3, children: [_jsx(TurnStats, { totals: totals, tools: tools }), _jsx(ConversationCharts, { turns: turns, onPick: onPick })] }), _jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t(isCalls ? '@theorem.panel.trace.calls' : '@theorem.panel.trace.turns') }), _jsx(Stream, { children: _jsx(VStack, { gap: 0, children: turns.map((turn, index) => (_jsx(TurnRow, { turn: turn, index: index, isCall: isCalls, onOpen: () => onPick(index) }, turn.node.id))) }) })] })] }));
 }
 /** One turn at a glance, then its story, then its timeline under the search. */
 function TurnOverview({ turns, index, onPick, onBack, selectedId, onSelect, }) {
@@ -141,7 +140,7 @@ function TurnOverview({ turns, index, onPick, onBack, selectedId, onSelect, }) {
     if (!turn || !root)
         return null;
     const tools = traceSpans([root]).filter((node) => node.meta.type === 'tool').length;
-    return (_jsxs(VStack, { gap: 5, padding: 4, children: [_jsx(TurnPicker, { turns: turns, index: index, onChange: onPick, onBack: onBack }), _jsx(TraceCharts, { root: root, split: turn.split, totals: turn.totals, tools: tools, latency: latency, onSelect: onSelect }), _jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.timeline') }), _jsx(PowerSearch, { config: config, filters: filters, onChange: setFilters, label: t('@theorem.panel.trace.search'), isLabelHidden: true, placeholder: t('@theorem.panel.trace.search.placeholder'), resultCount: matches?.size, size: "sm" }), _jsx(TraceWaterfall, { root: root, selectedId: selectedId, matches: matches, onSelect: onSelect }, root.id)] }), story.length > 0 ? (_jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.story') }), _jsx(TraceStory, { steps: story, selectedId: selectedId, matches: matches, onSelect: onSelect })] })) : null, guardrails.length > 0 ? (_jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.guardrails') }), _jsx(TraceGuardrails, { checks: guardrails, onSelect: onSelect })] })) : null] }));
+    return (_jsxs(VStack, { gap: 5, padding: 4, children: [_jsx(TurnPicker, { turns: turns, index: index, onChange: onPick, onBack: onBack }), _jsxs(VStack, { gap: 3, children: [_jsx(TurnStats, { totals: turn.totals, tools: tools, latency: latency }), _jsx(TraceCharts, { root: root, split: turn.split, onSelect: onSelect })] }), _jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.timeline') }), _jsx(PowerSearch, { config: config, filters: filters, onChange: setFilters, label: t('@theorem.panel.trace.search'), isLabelHidden: true, placeholder: t('@theorem.panel.trace.search.placeholder'), resultCount: matches?.size, size: "sm" }), _jsx(TraceWaterfall, { root: root, selectedId: selectedId, matches: matches, onSelect: onSelect }, root.id)] }), story.length > 0 ? (_jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.story') }), _jsx(TraceStory, { steps: story, selectedId: selectedId, matches: matches, onSelect: onSelect })] })) : null, guardrails.length > 0 ? (_jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.guardrails') }), _jsx(TraceGuardrails, { checks: guardrails, onSelect: onSelect })] })) : null] }));
 }
 function EmptyTrace() {
     const { t } = useTraceFormat();
@@ -203,8 +202,5 @@ export function TraceGuardrailsBody({ records, head, }) {
     const { t } = useTraceFormat();
     const roots = useMemo(() => traceTurns(traceTree(records)).map((turn) => turn.node), [records]);
     const checks = useMemo(() => roots.flatMap(traceGuardrails), [roots]);
-    const timed = useMemo(() => roots
-        .map((root) => ({ id: root.id, latency: traceLatency(root) }))
-        .filter(({ latency }) => latency.guardrails), [roots]);
-    return (_jsxs(VStack, { gap: 5, padding: 4, children: [head, timed.length > 0 ? (_jsx(CardWall, { minWidth: TRACE_CARD_PX, children: timed.map(({ id, latency }) => (_jsx(GuardrailStat, { latency: latency }, id))) })) : null, checks.length > 0 ? (_jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.guardrails') }), _jsx(TraceGuardrails, { checks: checks })] })) : null] }));
+    return (_jsxs(VStack, { gap: 5, padding: 4, children: [head, roots.map((root) => (_jsx(GuardrailStats, { latency: traceLatency(root) }, root.id))), checks.length > 0 ? (_jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.guardrails') }), _jsx(TraceGuardrails, { checks: checks })] })) : null] }));
 }

package/ui/TraceOverview.d.ts

@@ -1,7 +1,6 @@
 import { type ReactNode } from 'react';
 import { type TraceLatency, type TraceTurn } from '../client/trace-story.ts';
 import type { TraceTotals } from '../client/trace-view.ts';
-import { useTraceFormat } from './TraceValues.tsx';
 /** Width a chart draws at before it has measured its column: the panel's narrowest. */
 export declare const FIRST_WIDTH_PX = 280;
 /**
@@ -24,20 +23,16 @@ export declare function TurnPicker({ turns, index, onChange, onBack, }: {
     /** Leaves the turn for the whole conversation; absent when there is only the one turn. */
     onBack?: (() => void) | undefined;
 }): import("react").JSX.Element | null;
-export type TraceFormat = ReturnType<typeof useTraceFormat>;
-/** Narrowest a card in a trace overview's wall gets: wide enough for a chart's columns. */
-export declare const TRACE_CARD_PX = 260;
-/** A turn's guardrail figure alone, the card {@link turnStats} gives it. */
-export declare function GuardrailStat({ latency }: {
+/** A turn's guardrail figures alone, as {@link TurnStats} lays them out. */
+export declare function GuardrailStats({ latency }: {
     latency: TraceLatency;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 /**
- * Duration, first text, cost, tokens, steps, and guardrails of the open turn,
- * as cards for its overview's wall; a total the trace did not record renders
- * nothing.
+ * Duration, first text, cost, tokens, steps, and guardrails of the open turn;
+ * a total the trace did not record is left out.
  */
-export declare function turnStats(format: TraceFormat, { totals, tools, latency }: {
+export declare function TurnStats({ totals, tools, latency, }: {
     totals: TraceTotals;
     tools: number;
     latency?: TraceLatency;
-}): ReactNode[];
+}): import("react").JSX.Element;

package/ui/TraceOverview.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@astryxdesign/core/Button';
 import { Card } from '@astryxdesign/core/Card';
+import { Grid } from '@astryxdesign/core/Grid';
 import { HStack } from '@astryxdesign/core/HStack';
 import { Icon } from '@astryxdesign/core/Icon';
 import { IconButton } from '@astryxdesign/core/IconButton';
@@ -60,7 +61,7 @@ function Stat({ label, value, detail, }) {
                         .filter(Boolean)
                         .map((line) => (_jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: line }, String(line)))) })] }) }));
 }
-function FirstTextStat({ latency, format, }) {
+function FirstTextStat({ latency, format }) {
     if (latency?.firstTextMs === undefined)
         return null;
     const { t } = format;
@@ -108,25 +109,18 @@ function GuardrailsStat({ latency, format, }) {
             flagged: guardrails.flagged,
         }) }));
 }
-/** Narrowest a card in a trace overview's wall gets: wide enough for a chart's columns. */
-export const TRACE_CARD_PX = 260;
-/** A turn's guardrail figure alone, the card {@link turnStats} gives it. */
-export function GuardrailStat({ latency }) {
+/** A turn's guardrail figures alone, as {@link TurnStats} lays them out. */
+export function GuardrailStats({ latency }) {
     const format = useTraceFormat();
-    return _jsx(GuardrailsStat, { latency: latency, format: format });
+    if (!latency.guardrails)
+        return null;
+    return (_jsx(Grid, { columns: { minWidth: 120, repeat: 'fit' }, gap: 2, children: _jsx(GuardrailsStat, { latency: latency, format: format }) }));
 }
 /**
- * Duration, first text, cost, tokens, steps, and guardrails of the open turn,
- * as cards for its overview's wall; a total the trace did not record renders
- * nothing.
+ * Duration, first text, cost, tokens, steps, and guardrails of the open turn;
+ * a total the trace did not record is left out.
  */
-export function turnStats(format, { totals, tools, latency }) {
-    return [
-        _jsx(Stat, { label: TRACE_FIELDS.duration.label, value: format.duration(totals.durationMs) }, "duration"),
-        _jsx(FirstTextStat, { latency: latency, format: format }, "first-text"),
-        _jsx(CostStat, { totals: totals, format: format }, "cost"),
-        _jsx(TokensStat, { totals: totals, format: format }, "tokens"),
-        _jsx(StepsStat, { totals: totals, tools: tools, format: format }, "steps"),
-        _jsx(GuardrailsStat, { latency: latency, format: format }, "guardrails"),
-    ];
+export function TurnStats({ totals, tools, latency, }) {
+    const format = useTraceFormat();
+    return (_jsxs(Grid, { columns: { minWidth: 120, repeat: 'fit' }, gap: 2, children: [_jsx(Stat, { label: TRACE_FIELDS.duration.label, value: format.duration(totals.durationMs) }), _jsx(FirstTextStat, { latency: latency, format: format }), _jsx(CostStat, { totals: totals, format: format }), _jsx(TokensStat, { totals: totals, format: format }), _jsx(StepsStat, { totals: totals, tools: tools, format: format }), _jsx(GuardrailsStat, { latency: latency, format: format })] }));
 }