@theoremjs/react 0.3.4-next.606.g8936f75 → 0.3.4-next.610.g6ddf39d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.606.g8936f75",
+  "version": "0.3.4-next.610.g6ddf39d",
   "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.606.g8936f75",
-    "@theoremjs/web": "^0.3.4-next.606.g8936f75"
+    "@theoremjs/agents": "^0.3.4-next.610.g6ddf39d",
+    "@theoremjs/web": "^0.3.4-next.610.g6ddf39d"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/CardWall.d.ts

@@ -2,7 +2,10 @@ import { type ReactNode } from 'react';
 /**
  * Cards in as many columns as fit, each as tall as its content. Each card,
  * in order, goes under the shortest column so far, so short cards never
- * leave a hole beside a tall one.
+ * leave a hole beside a tall one. A card that renders nothing takes no place.
+ *
+ * invariant: Cards stay in one container in source order and are only moved,
+ * so a reflow never remounts a card and focus and tab order follow the source.
  */
 export declare function CardWall({ minWidth, children }: {
     minWidth: number;

package/ui/CardWall.js

@@ -1,23 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { HStack } from '@astryxdesign/core/HStack';
-import { StackItem } from '@astryxdesign/core/Stack';
 import { VStack } from '@astryxdesign/core/VStack';
-import { Children, useLayoutEffect, useRef, useState } from 'react';
-import { columnCount, wallColumns } from "./wall-columns.js";
-/** The wall's width and gap, and each card's height by its place in `children`. */
-function measureWall(wall, stacks, placed, cards) {
-    const heights = Array.from({ length: cards });
-    placed.forEach((column, at) => {
-        const shown = stacks[at]?.children;
-        column.forEach((card, row) => {
-            const element = shown?.[row];
-            if (element instanceof HTMLElement)
-                heights[card] = element.offsetHeight;
-        });
-    });
-    const gap = Number.parseFloat(getComputedStyle(wall).columnGap) || 0;
-    return { width: wall.clientWidth, gap, heights };
-}
+import { Children, isValidElement, useLayoutEffect, useRef, useState } from 'react';
+import { columnCount, wallPlaces } from "./wall-columns.js";
 function sameWall(a, b) {
     return (a.width === b.width &&
         a.gap === b.gap &&
@@ -27,35 +11,72 @@ function sameWall(a, b) {
 /**
  * Cards in as many columns as fit, each as tall as its content. Each card,
  * in order, goes under the shortest column so far, so short cards never
- * leave a hole beside a tall one.
+ * leave a hole beside a tall one. A card that renders nothing takes no place.
+ *
+ * invariant: Cards stay in one container in source order and are only moved,
+ * so a reflow never remounts a card and focus and tab order follow the source.
  */
 export function CardWall({ minWidth, children }) {
     const cards = Children.toArray(children);
+    const keyOf = (card, at) => isValidElement(card) && card.key !== null ? card.key : String(at);
     const wallRef = useRef(null);
-    const stacks = useRef([]);
+    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 placed = wallColumns(cards.map((_, at) => wall.heights[at]), columnCount(wall.width, minWidth, wall.gap), wall.gap);
-    const placedRef = useRef(placed);
-    placedRef.current = placed;
-    const layout = placed.map((column) => column.join(' ')).join('|');
+    const count = columnCount(wall.width, minWidth, wall.gap);
+    const columnWidth = (wall.width - wall.gap * (count - 1)) / count;
+    const { places, height } = wallPlaces(cards.map((_, at) => wall.heights[at]), count, wall.gap);
+    // why: Until the wall is measured, cards stack in flow so the first paint has their heights.
+    const isPlaced = wall.width > 0;
+    slots.current.length = cards.length;
     useLayoutEffect(() => {
         const node = wallRef.current;
-        if (!node || !layout)
+        if (!node)
             return;
         const measure = () => {
-            const next = measureWall(node, stacks.current, placedRef.current, cards.length);
+            const next = {
+                width: node.clientWidth,
+                gap: Number.parseFloat(getComputedStyle(node).rowGap) || 0,
+                heights: slots.current.map((slot) => slot?.offsetHeight),
+            };
             setWall((shown) => (sameWall(shown, next) ? shown : next));
         };
         measure();
-        const observer = new ResizeObserver(measure);
-        observer.observe(node);
-        for (const stack of stacks.current) {
-            for (const card of stack?.children ?? [])
-                observer.observe(card);
-        }
-        return () => observer.disconnect();
-    }, [layout, cards.length]);
-    return (_jsx(HStack, { ref: wallRef, gap: 3, vAlign: "start", children: placed.map((column, at) => (_jsx(StackItem, { size: "fill", children: _jsx(VStack, { ref: (node) => {
-                    stacks.current[at] = node;
-                }, gap: 3, children: column.map((card) => cards[card]) }) }, String(at)))) }));
+        const watch = new ResizeObserver(measure);
+        watch.observe(node);
+        for (const slot of slots.current)
+            if (slot)
+                watch.observe(slot);
+        observer.current = watch;
+        return () => {
+            watch.disconnect();
+            observer.current = null;
+        };
+    }, []);
+    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: slotRef(at), style: isPlaced && place
+                    ? {
+                        position: 'absolute',
+                        top: place.top,
+                        left: place.column * (columnWidth + wall.gap),
+                        width: columnWidth,
+                    }
+                    : undefined, children: card }, keyOf(card, at)));
+        }) }));
 }

package/ui/ToolResult.js

@@ -1,7 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AspectRatio } from '@astryxdesign/core/AspectRatio';
 import { ClickableCard } from '@astryxdesign/core/ClickableCard';
-import { Grid } from '@astryxdesign/core/Grid';
 import { useLocale } from '@astryxdesign/core/i18n';
 import { Lightbox } from '@astryxdesign/core/Lightbox';
 import { Skeleton } from '@astryxdesign/core/Skeleton';
@@ -9,43 +8,34 @@ import { VStack } from '@astryxdesign/core/VStack';
 import { hasLead, layoutResult, returnedMedia, withUnit, } from '@theoremjs/web/client';
 import { lazy, Suspense, useMemo, useState } from 'react';
 import { Arrive } from "./arrive.js";
+import { CardWall } from "./CardWall.js";
 import { useLabels } from "./labels-provider.js";
 import { keyedByContent } from "./row-keys.js";
 import { ShapedData } from "./ShapedData.js";
 import { ChartCard } from "./trace-patterns.js";
 import { VoiceNote } from "./VoiceNote.js";
-const ToolResultCharts = lazy(() => import("./ToolResultCharts.js").then((module) => ({ default: module.ToolResultCharts })));
-/** Narrowest an image card gets. */
-const IMAGE_CARD_PX = 200;
+const ToolResultChart = lazy(() => import("./ToolResultCharts.js").then((module) => ({ default: module.ToolResultChart })));
 /** Height a chart card holds while its module loads. */
 const CHART_CARD_PX = 236;
-function Images({ images }) {
-    const [open, setOpen] = useState(null);
-    return (_jsxs(_Fragment, { children: [_jsx(Grid, { columns: { minWidth: IMAGE_CARD_PX, repeat: 'fill' }, gap: 3, children: 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.src))) }), _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 })] }));
-}
-function Figures({ figures }) {
-    const locale = useLocale();
-    const decimal = useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }), [locale]);
-    if (figures.length === 0)
-        return null;
-    return (_jsx(Grid, { columns: { minWidth: 160, repeat: 'fill' }, gap: 3, children: figures.map((figure) => (_jsx(Arrive, { children: _jsx(ChartCard, { title: figure.label, value: withUnit(decimal.format(figure.value), figure.unit) }) }, figure.key))) }));
-}
-/** Charts load with their module; cards hold their place until then. */
-function Charts({ charts }) {
-    if (charts.length === 0)
-        return null;
-    return (_jsx(Suspense, { fallback: _jsx(Grid, { columns: { minWidth: 260, repeat: 'fill' }, gap: 3, children: charts.map((chart) => (_jsx(Arrive, { children: _jsx(Skeleton, { height: CHART_CARD_PX }) }, chart.key))) }), children: _jsx(ToolResultCharts, { charts: charts }) }));
-}
-/** What answers the call, laid out from the output: its figures as stat cards, its series as charts, the images, and audio it returned. */
+/** Narrowest a card in the result's wall gets: wide enough for a chart's axis and bars. */
+const CARD_PX = 260;
+/**
+ * What answers the call, laid out from the output in one wall: its figures as
+ * stat cards, its series as charts, the images it returned; then its audio.
+ */
 function ResultLead({ layout, parts = [], }) {
     const t = useLabels();
+    const locale = useLocale();
+    const decimal = useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }), [locale]);
     const media = useMemo(() => returnedMedia(layout, parts, t('@theorem.host.image')), [layout, parts, t]);
+    const [open, setOpen] = useState(null);
     if (!hasLead(layout, media))
         return null;
-    return (_jsxs(VStack, { gap: 3, children: [_jsx(Figures, { figures: layout.figures }), _jsx(Charts, { charts: layout.charts }), media.images.length > 0 ? _jsx(Images, { images: media.images }) : null, keyedByContent(media.audio, (clip) => clip.src).map(({ item: clip, key }) => (_jsx(Arrive, { children: _jsx(VoiceNote, { src: clip.src, mimeType: clip.mimeType }) }, key)))] }));
+    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(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)))] }));
 }
 /**
  * A tool's output under one Response heading, led by what answers it (figures,

package/ui/ToolResultCharts.d.ts

@@ -1,5 +1,5 @@
 import { type ResultChart } from '@theoremjs/web/client';
-/** Each chart in its card, side by side where the column is wide enough. */
-export declare function ToolResultCharts({ charts }: {
-    charts: readonly ResultChart[];
+/** One chart in its card: a series over time as lines, one over names as bars. */
+export declare function ToolResultChart({ chart }: {
+    chart: ResultChart;
 }): import("react").JSX.Element;

package/ui/ToolResultCharts.js

@@ -6,8 +6,6 @@ import { VStack } from '@astryxdesign/core/VStack';
 import { timeFormats, withUnit } from '@theoremjs/web/client';
 import { useMemo } from 'react';
 import { Bar, BarChart, Cell, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
-import { Arrive } from "./arrive.js";
-import { CardWall } from "./CardWall.js";
 import { ChartFrame, ChartTip, FIRST_WIDTH_PX } from "./TraceOverview.js";
 import { ChartCard, TRACE_GAP, TRACE_RADIUS, TraceSwatch, traceFill, } from "./trace-patterns.js";
 /**
@@ -96,7 +94,7 @@ function CategoryCard({ chart }) {
                                 formatter: (value) => formats.number(Number(value), chart.series.unit),
                             }, children: rows.map((row, index) => (_jsx(Cell, { fill: traceFill(index === 0 ? 'clear' : 'shade2') }, row.id))) })] }) }) }) }));
 }
-/** Each chart in its card, side by side where the column is wide enough. */
-export function ToolResultCharts({ charts }) {
-    return (_jsx(CardWall, { minWidth: 260, children: charts.map((chart) => (_jsx(Arrive, { children: chart.kind === 'time' ? _jsx(TimeCard, { chart: chart }) : _jsx(CategoryCard, { chart: chart }) }, chart.key))) }));
+/** One chart in its card: a series over time as lines, one over names as bars. */
+export function ToolResultChart({ chart }) {
+    return chart.kind === 'time' ? _jsx(TimeCard, { chart: chart }) : _jsx(CategoryCard, { chart: chart });
 }

package/ui/TraceCharts.d.ts

@@ -1,13 +1,24 @@
-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, }: {
+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, }: {
     root: TraceNode;
     split: TraceTimeSplit;
+    totals: TraceTotals;
+    tools: number;
+    latency?: TraceLatency;
     onSelect: (node: TraceNode) => void;
 }): import("react").JSX.Element;
-/** The whole conversation: each turn's time and tokens. A column opens its turn. */
-export declare function ConversationCharts({ turns, onPick, }: {
+/**
+ * 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, }: {
     turns: readonly TraceTurn[];
+    totals: TraceTotals;
+    tools: number;
     onPick: (index: number) => void;
 }): import("react").JSX.Element;

package/ui/TraceCharts.js

@@ -1,5 +1,4 @@
 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';
@@ -7,7 +6,8 @@ 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 { ChartFrame, ChartTip, FIRST_WIDTH_PX } from "./TraceOverview.js";
+import { CardWall } from "./CardWall.js";
+import { ChartFrame, ChartTip, FIRST_WIDTH_PX, TRACE_CARD_PX, turnStats, } 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,11 +206,14 @@ 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))) })] }) }) }) }));
 }
-/** Where a turn's time, tokens, and slowest steps went. A bar opens its span. */
-export function TraceCharts({ root, split, onSelect, }) {
-    const { t } = useTraceFormat();
+/**
+ * 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();
     const callRows = useCallRows(root, onSelect);
-    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 })] }));
+    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")] }));
 }
 function TurnTimeTip({ active, payload }) {
     const format = useTraceFormat();
@@ -237,9 +240,13 @@ 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: each turn's time and tokens. A column opens its turn. */
-export function ConversationCharts({ turns, onPick, }) {
-    const { t } = useTraceFormat();
+/**
+ * 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;
     const isCalls = isCallTrace(turns);
     const column = isCalls
         ? '@theorem.panel.trace.charts.hostCall'
@@ -262,5 +269,5 @@ export function ConversationCharts({ turns, onPick, }) {
         }),
         open: () => onPick(position),
     })), [turns, onPick, t, column]);
-    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 })] }));
+    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")] }));
 }

package/ui/TraceInspector.js

@@ -13,10 +13,11 @@ 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 { GuardrailStats, TurnPicker, TurnStats } from "./TraceOverview.js";
+import { GuardrailStat, TRACE_CARD_PX, TurnPicker } from "./TraceOverview.js";
 import { TraceSpanDetail } from "./TraceSpanDetail.js";
 import { ActorMark, TraceStory } from "./TraceStory.js";
 import { useTraceFormat } from "./TraceValues.js";
@@ -124,7 +125,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,
-                }) }), _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))) }) })] })] }));
+                }) }), _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))) }) })] })] }));
 }
 /** One turn at a glance, then its story, then its timeline under the search. */
 function TurnOverview({ turns, index, onPick, onBack, selectedId, onSelect, }) {
@@ -140,7 +141,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 }), _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] }));
+    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] }));
 }
 function EmptyTrace() {
     const { t } = useTraceFormat();
@@ -202,5 +203,8 @@ 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]);
-    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] }));
+    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] }));
 }

package/ui/TraceOverview.d.ts

@@ -1,6 +1,7 @@
 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;
 /**
@@ -23,16 +24,20 @@ 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;
-/** A turn's guardrail figures alone, as {@link TurnStats} lays them out. */
-export declare function GuardrailStats({ latency }: {
+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 }: {
     latency: TraceLatency;
-}): import("react").JSX.Element | null;
+}): import("react").JSX.Element;
 /**
- * Duration, first text, cost, tokens, steps, and guardrails of the open turn;
- * a total the trace did not record is left out.
+ * 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.
  */
-export declare function TurnStats({ totals, tools, latency, }: {
+export declare function turnStats(format: TraceFormat, { totals, tools, latency }: {
     totals: TraceTotals;
     tools: number;
     latency?: TraceLatency;
-}): import("react").JSX.Element;
+}): ReactNode[];

package/ui/TraceOverview.js

@@ -1,7 +1,6 @@
 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';
@@ -61,7 +60,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;
@@ -109,18 +108,25 @@ function GuardrailsStat({ latency, format, }) {
             flagged: guardrails.flagged,
         }) }));
 }
-/** A turn's guardrail figures alone, as {@link TurnStats} lays them out. */
-export function GuardrailStats({ latency }) {
+/** 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 }) {
     const format = useTraceFormat();
-    if (!latency.guardrails)
-        return null;
-    return (_jsx(Grid, { columns: { minWidth: 120, repeat: 'fit' }, gap: 2, children: _jsx(GuardrailsStat, { latency: latency, format: format }) }));
+    return _jsx(GuardrailsStat, { latency: latency, format: format });
 }
 /**
- * Duration, first text, cost, tokens, steps, and guardrails of the open turn;
- * a total the trace did not record is left out.
+ * 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.
  */
-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 })] }));
+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"),
+    ];
 }

package/ui/wall-columns.d.ts

@@ -1,8 +1,18 @@
 /** How many columns at least `minWidth` wide fit across `width`, `gap` apart. Never fewer than one. */
 export declare function columnCount(width: number, minWidth: number, gap: number): number;
+/** Where one card sits: its column and its distance from the top of the wall. */
+export type WallPlace = {
+    column: number;
+    top: number;
+};
 /**
- * Each card, in order, into the column that is shortest so far, by the
- * cards' heights and the gap under each. A card not measured yet counts as
- * no height, so unmeasured cards are dealt out in turn.
+ * Each card, in order, under the column that is shortest so far, by the
+ * cards' heights and the gap under each, and how tall the wall then is. A card
+ * not measured yet counts as no height, so unmeasured cards are dealt out in
+ * turn. A card measured at no height renders nothing: it takes no place and no
+ * gap.
  */
-export declare function wallColumns(heights: readonly (number | undefined)[], count: number, gap: number): number[][];
+export declare function wallPlaces(heights: readonly (number | undefined)[], count: number, gap: number): {
+    places: WallPlace[];
+    height: number;
+};

package/ui/wall-columns.js

@@ -3,17 +3,20 @@ export function columnCount(width, minWidth, gap) {
     return Math.max(1, Math.floor((width + gap) / (minWidth + gap)));
 }
 /**
- * Each card, in order, into the column that is shortest so far, by the
- * cards' heights and the gap under each. A card not measured yet counts as
- * no height, so unmeasured cards are dealt out in turn.
+ * Each card, in order, under the column that is shortest so far, by the
+ * cards' heights and the gap under each, and how tall the wall then is. A card
+ * not measured yet counts as no height, so unmeasured cards are dealt out in
+ * turn. A card measured at no height renders nothing: it takes no place and no
+ * gap.
  */
-export function wallColumns(heights, count, gap) {
-    const columns = Array.from({ length: count }, () => []);
+export function wallPlaces(heights, count, gap) {
     const tall = Array.from({ length: count }, () => 0);
-    heights.forEach((height, card) => {
-        const at = tall.indexOf(Math.min(...tall));
-        columns[at]?.push(card);
-        tall[at] = (tall[at] ?? 0) + (height ?? 0) + gap;
+    const places = heights.map((height) => {
+        const column = tall.indexOf(Math.min(...tall));
+        const top = tall[column] ?? 0;
+        if (height !== 0)
+            tall[column] = top + (height ?? 0) + gap;
+        return { column, top };
     });
-    return columns;
+    return { places, height: Math.max(0, Math.max(...tall) - gap) };
 }