@theoremjs/react 0.3.4-next.871.gea9bbcc → 0.3.4

package/README.md

@@ -153,6 +153,8 @@ The profile, the keys, and the system prompt stay on the server. The browser rec
 | `@theoremjs/react/ui/icons` | The icon set of the theme |
 | `@theoremjs/react/client` | `@theoremjs/web/client`: the client logic, without the hooks |
 
+To draw your own figures like the trace panel does, `@theoremjs/react/ui` also exports its chart parts. `ChartCard` holds a chart under its name and one figure. `ChartStat` is one figure in a card. `RankedBars` draws one bar per `RankedBar`, in the order given, with a `TraceFill` for each. `RadialBars` draws the same rows as rings. `Sunburst` draws `SunburstNode` parts as rings, each child outside its parent.
+
 ## Chat
 
 `<TheoremChat />` accepts these props. All props are optional.

package/package.json

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

package/ui/RadialCharts.d.ts

@@ -0,0 +1,30 @@
+import { type RankedBar } from './RankedBars.tsx';
+import { type TraceFill } from './trace-patterns.tsx';
+/**
+ * One ring per row, the first outermost, each drawn round its track as far as its value goes, with
+ * a key beside it in the same order. `max` fixes the scale, for figures such as rates that share one.
+ */
+export declare function RadialBars({ rows, format, max, }: {
+    rows: readonly RankedBar[];
+    format: (value: number) => string;
+    max?: number;
+}): import("react").JSX.Element;
+/** One part of a {@link Sunburst}: a leaf has a value, a branch the sum of its children's. */
+export interface SunburstNode {
+    id: string;
+    name: string;
+    value?: number;
+    /** Default: the trace's solid fills in turn, a child taking its parent's. */
+    fill?: TraceFill;
+    /** A line under the value in the part's hover card. */
+    detail?: string;
+    children?: SunburstNode[];
+}
+/**
+ * Rings of parts, the inner ring the top parts and each ring further out their children, each part
+ * as wide as its share, with the top parts keyed beside it. Every part is named on hover.
+ */
+export declare function Sunburst({ parts, format, }: {
+    parts: readonly SunburstNode[];
+    format: (value: number) => string;
+}): import("react").JSX.Element;

package/ui/RadialCharts.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack } from '@astryxdesign/core/HStack';
+import { Text } from '@astryxdesign/core/Text';
+import { VStack } from '@astryxdesign/core/VStack';
+import { Cell, PolarAngleAxis, RadialBar, RadialBarChart, SunburstChart, Tooltip, } from 'recharts';
+import { paintOf, RankedTip } from "./RankedBars.js";
+import { ChartFrame } from "./TraceOverview.js";
+import { TRACE_GAP, traceFill } from "./trace-patterns.js";
+/** Width and height of a radial chart, in pixels. */
+const RADIAL_PX = 180;
+/** The solid fills in order, for parts that name none. */
+const RAMP = ['clear', 'shade1', 'shade2', 'shade3'];
+function fillAt(fill, index) {
+    return fill ?? RAMP[index % RAMP.length] ?? 'clear';
+}
+/** A key's mark: a small rounded square in any paint. */
+function Swatch({ paint }) {
+    return (_jsx("svg", { "aria-hidden": true, width: 10, height: 10, style: { display: 'block', flexShrink: 0 }, children: _jsx("rect", { width: 10, height: 10, rx: 2, fill: paint }) }));
+}
+/** Each row's mark, name and value, in the order given. */
+function RadialKey({ rows, format, }) {
+    return (_jsx(VStack, { gap: 1, children: rows.map((row) => (_jsxs(HStack, { gap: 2, align: "center", justify: "between", children: [_jsxs(HStack, { gap: 2, align: "center", children: [_jsx(Swatch, { paint: row.paint }), _jsx(Text, { type: "supporting", color: "secondary", children: row.name })] }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: format(row.value) })] }, row.id))) }));
+}
+/** A radial chart, centred, beside its key. */
+function RadialFrame({ chart, keyed }) {
+    return (_jsxs(HStack, { gap: 4, align: "center", wrap: "wrap", children: [_jsx(ChartFrame, { children: chart }), _jsx("div", { style: { flex: '1 1 140px', minWidth: 0 }, children: keyed })] }));
+}
+/**
+ * One ring per row, the first outermost, each drawn round its track as far as its value goes, with
+ * a key beside it in the same order. `max` fixes the scale, for figures such as rates that share one.
+ */
+export function RadialBars({ rows, format, max, }) {
+    const painted = rows.map((row, index) => ({
+        ...row,
+        paint: paintOf(row, fillAt(row.fill, index)),
+    }));
+    const rings = [...painted].reverse();
+    return (_jsx(RadialFrame, { chart: _jsxs(RadialBarChart, { width: RADIAL_PX, height: RADIAL_PX, data: rings, innerRadius: "22%", outerRadius: "100%", startAngle: 90, endAngle: -270, barCategoryGap: 1, accessibilityLayer: false, children: [_jsx(PolarAngleAxis, { type: "number", domain: [0, max ?? 'auto'], tick: false, axisLine: false }), _jsx(RadialBar, { dataKey: "value", background: { fill: 'var(--color-background-gray)' }, cornerRadius: 4, stroke: TRACE_GAP, isAnimationActive: false, children: rings.map((row) => (_jsx(Cell, { fill: row.paint }, row.id))) }), _jsx(Tooltip, { content: (props) => _jsx(RankedTip, { ...props, format: format }), cursor: false, isAnimationActive: false })] }), keyed: _jsx(RadialKey, { rows: painted, format: format }) }));
+}
+function total(nodes) {
+    return nodes.reduce((sum, node) => sum + (node.value ?? 0), 0);
+}
+function sunburstPart(node, fill) {
+    const children = node.children ? sunburstData(node.children, fill) : undefined;
+    return {
+        id: node.id,
+        name: node.name,
+        value: node.value ?? total(children ?? []),
+        fill: traceFill(fill),
+        detail: node.detail,
+        children,
+    };
+}
+function sunburstData(nodes, inherited) {
+    return nodes.map((node, index) => sunburstPart(node, node.fill ?? inherited ?? fillAt(undefined, index)));
+}
+/**
+ * Rings of parts, the inner ring the top parts and each ring further out their children, each part
+ * as wide as its share, with the top parts keyed beside it. Every part is named on hover.
+ */
+export function Sunburst({ parts, format, }) {
+    const top = sunburstData(parts);
+    return (_jsx(RadialFrame, { chart: _jsx(SunburstChart, { width: RADIAL_PX, height: RADIAL_PX, data: { name: '', value: total(top), children: top }, innerRadius: RADIAL_PX * 0.11, ringPadding: 2, stroke: TRACE_GAP, textOptions: { fill: 'transparent' }, children: _jsx(Tooltip, { content: (props) => _jsx(RankedTip, { ...props, format: format }), isAnimationActive: false }) }), keyed: _jsx(RadialKey, { rows: top.map((part) => ({
+                id: String(part.id),
+                name: part.name,
+                value: part.value ?? 0,
+                paint: String(part.fill),
+            })), format: format }) }));
+}

package/ui/RankedBars.d.ts

@@ -0,0 +1,31 @@
+import { type TooltipContentProps } from 'recharts';
+import { type TraceFill } from './trace-patterns.tsx';
+/** One bar of {@link RankedBars}. */
+export interface RankedBar {
+    id: string;
+    name: string;
+    value: number;
+    /** Default `clear`. */
+    fill?: TraceFill;
+    /** Any CSS colour, in place of `fill`: for a bar shaded by its own value. */
+    color?: string;
+    /** A line under the value in the bar's hover card. */
+    detail?: string;
+}
+/** A bar's paint: its colour, else its fill. */
+export declare function paintOf(row: RankedBar, fill?: TraceFill): string;
+/** A bar's hover card: its name, its value, and its detail. */
+export declare function RankedTip({ active, payload, format, }: TooltipContentProps & {
+    format: (value: number) => string;
+}): import("react").JSX.Element | null;
+/**
+ * Bars in the order given, one per row, named on the left and valued on the right, drawn like the
+ * trace's charts. `max` fixes the scale, for figures such as rates that share one; a bar opens
+ * `onSelect` when given.
+ */
+export declare function RankedBars({ rows, format, max, onSelect, }: {
+    rows: readonly RankedBar[];
+    format: (value: number) => string;
+    max?: number;
+    onSelect?: (row: RankedBar) => void;
+}): import("react").JSX.Element;

package/ui/RankedBars.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@astryxdesign/core/Text';
+import { VStack } from '@astryxdesign/core/VStack';
+import { Bar, BarChart, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { ChartFrame, ChartTip, FIRST_WIDTH_PX } from "./TraceOverview.js";
+import { TRACE_GAP, TRACE_RADIUS, traceFill } from "./trace-patterns.js";
+/** A bar's paint: its colour, else its fill. */
+export function paintOf(row, fill = 'clear') {
+    return row.color ?? traceFill(row.fill ?? fill);
+}
+/** Height of one bar's row, in pixels. */
+const ROW_PX = 22;
+/** Longest name the axis shows whole; the hover card shows the rest. */
+const NAME_CHARS = 15;
+const TICK = { fill: 'var(--color-text-secondary)', fontSize: 11 };
+/** A bar's hover card: its name, its value, and its detail. */
+export function RankedTip({ active, payload, format, }) {
+    const row = payload?.[0]?.payload;
+    if (!active || !row)
+        return null;
+    return (_jsx(ChartTip, { children: _jsxs(VStack, { gap: 0, children: [_jsx(Text, { weight: "medium", children: row.name }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: format(row.value) }), row.detail ? (_jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: row.detail })) : null] }) }));
+}
+/**
+ * Bars in the order given, one per row, named on the left and valued on the right, drawn like the
+ * trace's charts. `max` fixes the scale, for figures such as rates that share one; a bar opens
+ * `onSelect` when given.
+ */
+export function RankedBars({ rows, format, max, onSelect, }) {
+    const height = rows.length * ROW_PX;
+    return (_jsx(ChartFrame, { children: _jsx(ResponsiveContainer, { width: "100%", height: height, initialDimension: { width: FIRST_WIDTH_PX, height }, children: _jsxs(BarChart, { data: [...rows], layout: "vertical", margin: { top: 0, right: 48, bottom: 0, left: 0 }, accessibilityLayer: false, barCategoryGap: 5, onClick: (state) => {
+                    const row = rows[Number(state?.activeIndex)];
+                    if (row && onSelect)
+                        onSelect(row);
+                }, style: onSelect ? { cursor: 'pointer' } : undefined, children: [_jsx(XAxis, { type: "number", hide: true, domain: [0, max ?? 'auto'] }), _jsx(YAxis, { type: "category", dataKey: "id", width: 104, tick: TICK, tickLine: false, axisLine: false, interval: 0, tickFormatter: (id) => {
+                            const name = rows.find((row) => row.id === id)?.name ?? '';
+                            return name.length > NAME_CHARS ? `${name.slice(0, NAME_CHARS - 1)}…` : name;
+                        } }), _jsx(Tooltip, { content: (props) => _jsx(RankedTip, { ...props, format: format }), cursor: false, isAnimationActive: false }), _jsx(Bar, { dataKey: "value", radius: TRACE_RADIUS, stroke: TRACE_GAP, strokeWidth: 2, isAnimationActive: false, minPointSize: 2, label: {
+                            position: 'right',
+                            fill: 'var(--color-text-secondary)',
+                            fontSize: 11,
+                            formatter: (value) => format(Number(value)),
+                        }, children: rows.map((row) => (_jsx(Cell, { fill: paintOf(row) }, row.id))) })] }) }) }));
+}

package/ui/TraceCharts.js

@@ -4,9 +4,10 @@ import { HStack } from '@astryxdesign/core/HStack';
 import { Text } from '@astryxdesign/core/Text';
 import { VStack } from '@astryxdesign/core/VStack';
 import { useMemo } from 'react';
-import { Bar, BarChart, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import { isCallTrace, traceActor, } from "../client/trace-story.js";
 import { traceSpans } from "../client/trace-view.js";
+import { RankedBars } from "./RankedBars.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";
@@ -14,8 +15,6 @@ import { ACTOR_FILL, ChartCard, TRACE_GAP, TRACE_RADIUS, TraceSwatch, traceFill,
 const CHART_PX = 120;
 /** Height of a share bar, in pixels. */
 const SHARE_PX = 12;
-/** Height of one row of the slowest-steps chart, in pixels. */
-const SLOW_ROW_PX = 22;
 /** Most steps the slowest-steps chart ranks. */
 const SLOWEST = 5;
 const TICK = { fill: 'var(--color-text-secondary)', fontSize: 11 };
@@ -162,49 +161,36 @@ function useCallRows(root, onSelect) {
         open: () => onSelect(node),
     })), [root, onSelect, t]);
 }
-function SlowTip({ active, payload }) {
-    const format = useTraceFormat();
-    const row = payload?.[0]?.payload;
-    if (!active || !row)
-        return null;
-    return (_jsx(ChartTip, { children: _jsxs(VStack, { gap: 0, children: [_jsx(Text, { weight: "medium", children: row.name }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: format.duration(row.ms) })] }) }));
-}
 /** The steps that took longest, longest first, filled by who acted. A bar opens its step. */
 function SlowestCard({ root, onSelect }) {
     const format = useTraceFormat();
     const { t } = format;
-    const rows = useMemo(() => {
+    const slowest = useMemo(() => {
         const calls = modelCalls(root);
         return traceSpans(root.children)
             .filter((node) => node.meta.type === 'tool' || MODEL_CALLS.has(node.meta.type))
             .sort((a, b) => b.durationMs - a.durationMs)
             .slice(0, SLOWEST)
             .map((node) => ({
-            id: node.id,
             node,
-            name: node.meta.type === 'tool'
-                ? (node.meta.subject ?? node.meta.label)
-                : t('@theorem.panel.trace.charts.call', { index: calls.indexOf(node) + 1 }),
-            ms: node.durationMs,
+            bar: {
+                id: node.id,
+                name: node.meta.type === 'tool'
+                    ? (node.meta.subject ?? node.meta.label)
+                    : t('@theorem.panel.trace.charts.call', { index: calls.indexOf(node) + 1 }),
+                value: node.durationMs,
+                fill: ACTOR_FILL[traceActor(node)],
+            },
         }));
     }, [root, t]);
-    const top = rows[0];
+    const top = slowest[0];
     if (!top)
         return null;
-    const height = rows.length * SLOW_ROW_PX;
-    return (_jsx(ChartCard, { title: t('@theorem.panel.trace.charts.slowest'), value: format.duration(top.ms), note: top.name, children: _jsx(ChartFrame, { children: _jsx(ResponsiveContainer, { width: "100%", height: height, initialDimension: { width: FIRST_WIDTH_PX, height }, children: _jsxs(BarChart, { data: rows, layout: "vertical", margin: { top: 0, right: 48, bottom: 0, left: 0 }, accessibilityLayer: false, barCategoryGap: 5, onClick: (state) => {
-                        const row = rows[Number(state?.activeIndex)];
-                        if (row)
-                            onSelect(row.node);
-                    }, style: { cursor: 'pointer' }, children: [_jsx(XAxis, { type: "number", hide: true }), _jsx(YAxis, { type: "category", dataKey: "id", width: 104, tick: TICK, tickLine: false, axisLine: false, interval: 0, tickFormatter: (id) => {
-                                const name = rows.find((row) => row.id === id)?.name ?? '';
-                                return name.length > 15 ? `${name.slice(0, 14)}…` : name;
-                            } }), _jsx(Tooltip, { content: (props) => _jsx(SlowTip, { ...props }), cursor: false, isAnimationActive: false }), _jsx(Bar, { dataKey: "ms", ...BAR, label: {
-                                position: 'right',
-                                fill: 'var(--color-text-secondary)',
-                                fontSize: 11,
-                                formatter: (value) => format.duration(Number(value)),
-                            }, children: rows.map((row) => (_jsx(Cell, { fill: traceFill(ACTOR_FILL[traceActor(row.node)]) }, row.id))) })] }) }) }) }));
+    return (_jsx(ChartCard, { title: t('@theorem.panel.trace.charts.slowest'), value: format.duration(top.bar.value), note: top.bar.name, children: _jsx(RankedBars, { rows: slowest.map(({ bar }) => bar), format: format.duration, onSelect: (bar) => {
+                const step = slowest.find((each) => each.bar.id === bar.id);
+                if (step)
+                    onSelect(step.node);
+            } }) }));
 }
 /** Where a turn's time, tokens, and slowest steps went. A bar opens its span. */
 export function TraceCharts({ root, split, onSelect, }) {

package/ui/TraceOverview.d.ts

@@ -24,6 +24,12 @@ export declare function TurnPicker({ turns, index, onChange, onBack, end, }: {
     onBack?: (() => void) | undefined;
     end?: ReactNode;
 }): import("react").JSX.Element | null;
+/** One figure in a card: its name, the figure, and lines that say more. */
+export declare function ChartStat({ label, value, detail, }: {
+    label: string;
+    value: ReactNode;
+    detail?: ReactNode | readonly ReactNode[];
+}): import("react").JSX.Element;
 /** A turn's guardrail figures alone, as {@link TurnStats} lays them out. */
 export declare function GuardrailStats({ latency }: {
     latency: TraceLatency;

package/ui/TraceOverview.js

@@ -55,7 +55,8 @@ export function TurnPicker({ turns, index, onChange, onBack, end, }) {
                                     count: turns.length,
                                 }) }), turn.node.meta.subject ? (_jsx(Text, { color: "secondary", maxLines: 1, children: turn.node.meta.subject })) : null] }), _jsxs(HStack, { gap: 0, children: [_jsx(IconButton, { label: t(isCalls ? '@theorem.panel.trace.calls.previous' : '@theorem.panel.trace.previous'), icon: _jsx(Icon, { icon: IconChevronLeft }), variant: "ghost", size: "sm", isDisabled: index === 0, onClick: () => onChange(index - 1) }), _jsx(IconButton, { label: t(isCalls ? '@theorem.panel.trace.calls.next' : '@theorem.panel.trace.next'), icon: _jsx(Icon, { icon: IconChevronRight }), variant: "ghost", size: "sm", isDisabled: index === turns.length - 1, onClick: () => onChange(index + 1) }), end] })] })] }));
 }
-function Stat({ label, value, detail, }) {
+/** One figure in a card: its name, the figure, and lines that say more. */
+export function ChartStat({ label, value, detail, }) {
     return (_jsx(Card, { padding: 3, variant: "muted", style: { background: 'var(--color-background-surface)' }, children: _jsxs(VStack, { gap: 1, children: [_jsx(Text, { type: "supporting", color: "secondary", children: label }), _jsx(Text, { type: "large", weight: "semibold", hasTabularNumbers: true, children: value }), _jsx(VStack, { gap: 0, children: [detail]
                         .flat()
                         .filter(Boolean)
@@ -65,7 +66,7 @@ function FirstTextStat({ latency, format }) {
     if (latency?.firstTextMs === undefined)
         return null;
     const { t } = format;
-    return (_jsx(Stat, { label: t('@theorem.panel.trace.firstText'), value: format.duration(latency.firstTextMs), detail: [
+    return (_jsx(ChartStat, { label: t('@theorem.panel.trace.firstText'), value: format.duration(latency.firstTextMs), detail: [
             latency.tokensPerSecond !== undefined &&
                 t('@theorem.panel.trace.rate', {
                     rate: format.number(Math.round(latency.tokensPerSecond)),
@@ -77,7 +78,7 @@ function FirstTextStat({ latency, format }) {
 function CostStat({ totals, format }) {
     if (!totals.cost)
         return null;
-    return (_jsx(Stat, { label: traceAttributeMeta('theorem.usage.cost_usd')?.label ?? '', value: format.sum(totals.cost, format.usd) }));
+    return (_jsx(ChartStat, { label: traceAttributeMeta('theorem.usage.cost_usd')?.label ?? '', value: format.sum(totals.cost, format.usd) }));
 }
 /** A token total as its card reads it: "–" when no call reported it. */
 function tokenSide(total, format) {
@@ -88,7 +89,7 @@ function TokensStat({ totals, format }) {
     if (!input && !output)
         return null;
     const all = [input, output].reduce((sum, total) => sum + (total?.value ?? 0), 0);
-    return (_jsx(Stat, { label: format.t('@theorem.panel.trace.tokens'), value: format.number(all), detail: format.t('@theorem.panel.trace.tokens.detail', {
+    return (_jsx(ChartStat, { label: format.t('@theorem.panel.trace.tokens'), value: format.number(all), detail: format.t('@theorem.panel.trace.tokens.detail', {
             input: tokenSide(input, format),
             output: tokenSide(output, format),
         }) }));
@@ -98,13 +99,13 @@ function StepsStat({ totals, tools, format, }) {
     // why: With no model, every step is a tool call the heading already counts.
     if (totals.calls === 0 && totals.errors === 0)
         return null;
-    return (_jsx(Stat, { label: t('@theorem.panel.trace.steps'), value: format.number(totals.calls + tools), detail: totals.errors > 0 ? (_jsx("span", { style: { color: TRACE_HUE.oxblood }, children: t('@theorem.panel.trace.failed', { count: totals.errors }) })) : (t('@theorem.panel.trace.steps.detail', { calls: totals.calls, tools })) }));
+    return (_jsx(ChartStat, { label: t('@theorem.panel.trace.steps'), value: format.number(totals.calls + tools), detail: totals.errors > 0 ? (_jsx("span", { style: { color: TRACE_HUE.oxblood }, children: t('@theorem.panel.trace.failed', { count: totals.errors }) })) : (t('@theorem.panel.trace.steps.detail', { calls: totals.calls, tools })) }));
 }
 function GuardrailsStat({ latency, format, }) {
     const guardrails = latency?.guardrails;
     if (!guardrails)
         return null;
-    return (_jsx(Stat, { label: format.t('@theorem.panel.trace.guardrails'), value: format.duration(guardrails.ms), detail: format.t('@theorem.panel.trace.guardrails.detail', {
+    return (_jsx(ChartStat, { label: format.t('@theorem.panel.trace.guardrails'), value: format.duration(guardrails.ms), detail: format.t('@theorem.panel.trace.guardrails.detail', {
             checks: guardrails.checks,
             flagged: guardrails.flagged,
         }) }));
@@ -122,5 +123,5 @@ export function GuardrailStats({ latency }) {
  */
 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 })] }));
+    return (_jsxs(Grid, { columns: { minWidth: 120, repeat: 'fit' }, gap: 2, children: [_jsx(ChartStat, { 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 })] }));
 }

package/ui/index.d.ts

@@ -25,6 +25,8 @@ export { LiveCaptionsPanel, type LiveCaptionsPanelProps } from './LiveCaptionsPa
 export { composerDrawerLabel, type LabelText, liveStateLabel, THEOREM_UI_CATALOG, type TheoremLabelKey, type TheoremLabelOverrides, type TheoremLabels, type TheoremLabelValues, type TheoremUiCatalog, voiceNoteName, workStatusLabel, } from './labels.ts';
 export { TheoremLabelsProvider, type TheoremLabelsProviderProps, useLabels, } from './labels-provider.tsx';
 export { PaneFailure, PaneLoading, PaneState } from './PaneState.tsx';
+export { RadialBars, Sunburst, type SunburstNode } from './RadialCharts.tsx';
+export { type RankedBar, RankedBars } from './RankedBars.tsx';
 export { InPlace, PaneLayout, PanePanel, Prose, RaisedPane } from './SidePanel.tsx';
 export { DEFAULT_CHAT_MAX_WIDTH, TheoremChat, type TheoremChatHandle, type TheoremChatProps, } from './TheoremChat.tsx';
 export { TheoremDecision, type TheoremDecisionProps } from './TheoremDecision.tsx';
@@ -33,4 +35,6 @@ export { TheoremHost, type TheoremHostProps } from './TheoremHost.tsx';
 export { ApprovalCard, type ApprovalCardProps, AuthChallengeCard, type AuthChallengeCardProps, type ToolDecision, } from './ToolGateCard.tsx';
 export { ToolResult } from './ToolResult.tsx';
 export { TraceGuardrailsView, TracePlacement, useTraceInspector } from './TraceInspectorPanel.tsx';
+export { ChartStat } from './TraceOverview.tsx';
 export { TheoremThemeProvider, type TheoremThemeProviderProps } from './theme.tsx';
+export { ChartCard, type TraceFill } from './trace-patterns.tsx';

package/ui/index.js

@@ -28,6 +28,8 @@ export { LiveCaptionsPanel } from "./LiveCaptionsPanel.js";
 export { composerDrawerLabel, liveStateLabel, THEOREM_UI_CATALOG, voiceNoteName, workStatusLabel, } from "./labels.js";
 export { TheoremLabelsProvider, useLabels, } from "./labels-provider.js";
 export { PaneFailure, PaneLoading, PaneState } from "./PaneState.js";
+export { RadialBars, Sunburst } from "./RadialCharts.js";
+export { RankedBars } from "./RankedBars.js";
 export { InPlace, PaneLayout, PanePanel, Prose, RaisedPane } from "./SidePanel.js";
 export { DEFAULT_CHAT_MAX_WIDTH, TheoremChat, } from "./TheoremChat.js";
 export { TheoremDecision } from "./TheoremDecision.js";
@@ -36,4 +38,6 @@ export { TheoremHost } from "./TheoremHost.js";
 export { ApprovalCard, AuthChallengeCard, } from "./ToolGateCard.js";
 export { ToolResult } from "./ToolResult.js";
 export { TraceGuardrailsView, TracePlacement, useTraceInspector } from "./TraceInspectorPanel.js";
+export { ChartStat } from "./TraceOverview.js";
 export { TheoremThemeProvider } from "./theme.js";
+export { ChartCard } from "./trace-patterns.js";