@theoremjs/react 0.3.0 → 0.3.1

package/ui/ToolGateCard.js

@@ -4,23 +4,20 @@ import { Button } from '@astryxdesign/core/Button';
 import { Card } from '@astryxdesign/core/Card';
 import { CodeBlock } from '@astryxdesign/core/CodeBlock';
 import { Collapsible } from '@astryxdesign/core/Collapsible';
-import { Heading } from '@astryxdesign/core/Heading';
 import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
 import { Text } from '@astryxdesign/core/Text';
 import { TextInput } from '@astryxdesign/core/TextInput';
 import { Token } from '@astryxdesign/core/Token';
 import { VStack } from '@astryxdesign/core/VStack';
+import { IconEye, IconFlame, IconPencil } from '@tabler/icons-react';
 import { useCallback, useEffect, useState } from 'react';
 import { isOAuthComplete } from "../client/oauth-popup.js";
+import { humanize } from "../client/shaped-data.js";
+import { approvalHeading } from "./approval-heading.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
-/** What an approval means is the tool registrant's call: `session_consent` lasts the session. */
-function decisionLabel(t, decision, gate) {
-    if (decision === 'deny')
-        return t('@theorem.gate.approval.denied');
-    return t(gate.permission === 'session_consent'
-        ? '@theorem.gate.approval.approved_session'
-        : '@theorem.gate.approval.approved_once');
-}
+/** The widest a gate card gets, in pixels. */
+export const GATE_CARD_WIDTH = 400;
 function formatInput(value) {
     if (typeof value === 'string')
         return value;
@@ -28,20 +25,30 @@ function formatInput(value) {
         return '';
     return JSON.stringify(value, null, 2);
 }
-function CardHeader(props) {
-    return (_jsxs(HStack, { justify: "between", align: "center", gap: 2, children: [_jsxs(VStack, { gap: 1, children: [_jsx(Badge, { variant: "warning", label: props.badge }), _jsxs(Heading, { level: 4, children: [props.title, " ", _jsx("code", { children: props.toolName })] })] }), _jsx(Badge, { variant: "neutral", label: props.tag })] }));
+/** The one frame of every gate card: what is asked, a tag beside it, and what answers it. */
+function GateCard(props) {
+    return (_jsx(Card, { variant: "bubble", elevation: "med", maxWidth: GATE_CARD_WIDTH, children: _jsxs(VStack, { gap: 3, children: [_jsxs(HStack, { justify: "between", align: "start", gap: 3, children: [_jsx(Text, { type: "large", weight: "semibold", children: props.heading }), props.tag] }), props.children] }) }));
+}
+const ACCESS_ICON = {
+    'read-only': IconEye,
+    'read-write': IconPencil,
+    destructive: IconFlame,
+};
+function ToolAccessTag({ access }) {
+    const t = useLabels();
+    return (_jsxs(HStack, { gap: 1, align: "center", children: [_jsx(Icon, { icon: ACCESS_ICON[access], size: "sm", color: access === 'destructive' ? 'error' : 'secondary' }), _jsx(Text, { type: "supporting", textWrap: "nowrap", children: t(`@theorem.tool.access.${access}`) })] }));
 }
 export function ApprovalCard(props) {
     return (_jsx(TheoremLabelsProvider, { children: _jsx(ApprovalBody, { ...props }) }));
 }
-function ApprovalBody({ gate, toolName, input, decided = null, onDecision }) {
+function ApprovalBody({ gate, toolName, agent, input, decided = null, onDecision, }) {
     const t = useLabels();
-    const args = formatInput(input);
-    return (_jsx(Card, { padding: 4, children: _jsxs(VStack, { gap: 3, children: [_jsx(CardHeader, { badge: t('@theorem.gate.approval.badge'), title: t('@theorem.gate.approval.title'), toolName: toolName, tag: t(`@theorem.gate.tag.${gate.permission ?? gate.kind}`) }), gate.summary ? _jsx(Text, { children: gate.summary }) : null, args ? (_jsx(Collapsible, { trigger: _jsx(Text, { size: "sm", children: t('@theorem.gate.approval.input') }), children: _jsx(CodeBlock, { code: args, language: "json", size: "sm" }) })) : null, decided === null ? (_jsxs(HStack, { gap: 2, justify: "end", children: [_jsx(Button, { label: t('@theorem.gate.approval.deny'), variant: "ghost", onClick: () => onDecision?.('deny') }), _jsx(Button, { label: t('@theorem.gate.approval.approve'), variant: "primary", onClick: () => onDecision?.('allow') })] })) : (_jsx(Badge, { variant: decided === 'deny' ? 'error' : 'success', label: decisionLabel(t, decided, gate) }))] }) }));
+    const args = formatInput(gate.preparedArguments ?? input);
+    return (_jsxs(GateCard, { heading: approvalHeading(t, gate, toolName, agent), tag: gate.access ? _jsx(ToolAccessTag, { access: gate.access }) : null, children: [gate.summary ? _jsx(Text, { color: "secondary", children: gate.summary }) : null, args ? (_jsx(Collapsible, { defaultIsOpen: false, trigger: _jsx(Text, { type: "supporting", children: t('@theorem.gate.approval.input') }), children: _jsx(CodeBlock, { code: args, language: "json", size: "sm" }) })) : null, _jsxs(HStack, { gap: 2, justify: "end", children: [_jsx(Button, { label: t('@theorem.gate.approval.deny'), variant: "ghost", isLoading: decided === 'deny', isDisabled: decided === 'allow', onClick: () => onDecision?.('deny') }), _jsx(Button, { label: t('@theorem.gate.approval.approve'), variant: "primary", isLoading: decided === 'allow', isDisabled: decided === 'deny', onClick: () => onDecision?.('allow') })] })] }));
 }
 function AuthChallengeDetails({ challenge }) {
     const t = useLabels();
-    return (_jsxs(_Fragment, { children: [_jsx(Text, { children: challenge.message }), challenge.resource ? (_jsx(Text, { size: "sm", color: "secondary", children: t('@theorem.gate.auth.resource', { resource: challenge.resource }) })) : null, challenge.requiredScopes?.length ? (_jsx(HStack, { gap: 1, wrap: "wrap", children: challenge.requiredScopes.map((scope) => (_jsx(Token, { label: scope, size: "sm" }, scope))) })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: "secondary", children: challenge.message }), challenge.resource ? (_jsx(Text, { type: "supporting", color: "secondary", children: t('@theorem.gate.auth.resource', { resource: challenge.resource }) })) : null, challenge.requiredScopes?.length ? (_jsx(HStack, { gap: 1, wrap: "wrap", children: challenge.requiredScopes.map((scope) => (_jsx(Token, { label: scope, size: "sm" }, scope))) })) : null] }));
 }
 export function AuthChallengeCard(props) {
     return (_jsx(TheoremLabelsProvider, { children: _jsx(AuthChallengeBody, { ...props }) }));
@@ -63,7 +70,7 @@ function useOAuthPopup(slot, onComplete) {
     }, [popup, slot, onComplete]);
     return (url) => setPopup(globalThis.open(url, '_blank', 'width=600,height=700'));
 }
-function AuthChallengeBody({ gate, toolName, onAuthenticated, submitted = false }) {
+function AuthChallengeBody({ gate, toolName, onAuthenticated, submitted = false, }) {
     const t = useLabels();
     const challenge = gate.authChallenge;
     const { authType, slot } = challenge;
@@ -74,25 +81,25 @@ function AuthChallengeBody({ gate, toolName, onAuthenticated, submitted = false
         const value = secret.trim();
         if (!value)
             return;
-        // The key goes to the server once; the browser keeps no copy.
+        // why: The key goes to the server once; the browser keeps no copy.
         setSecret('');
         onAuthenticated?.(value);
     }
-    return (_jsx(Card, { padding: 4, children: _jsxs(VStack, { gap: 3, children: [_jsx(CardHeader, { badge: t('@theorem.gate.auth.badge'), title: t('@theorem.gate.auth.title'), toolName: toolName, tag: t(`@theorem.gate.tag.${authType}`) }), _jsx(AuthChallengeDetails, { challenge: challenge }), _jsx(AuthAction, { authType: authType, authUrl: challenge.authorizationUrl, slot: slot, secret: secret, submitted: submitted, onSecretChange: setSecret, onSubmit: submit, onOpenSignIn: openSignIn })] }) }));
+    return (_jsxs(GateCard, { heading: t('@theorem.gate.auth.title', { tool: humanize(toolName).toLowerCase() }), tag: _jsx(Text, { type: "supporting", textWrap: "nowrap", children: t(`@theorem.gate.tag.${authType}`) }), children: [_jsx(AuthChallengeDetails, { challenge: challenge }), _jsx(AuthAction, { authType: authType, authUrl: challenge.authorizationUrl, slot: slot, secret: secret, submitted: submitted, onSecretChange: setSecret, onSubmit: submit, onOpenSignIn: openSignIn })] }));
 }
 function AuthAction(props) {
     const t = useLabels();
     if (props.submitted) {
-        return _jsx(Badge, { variant: "success", label: t('@theorem.gate.auth.provided', { slot: props.slot }) });
+        return (_jsx(Badge, { variant: "success", label: t('@theorem.gate.auth.provided', { slot: props.slot }) }));
     }
     if (props.authType === 'oauth2') {
         if (!props.authUrl) {
             return _jsx(Text, { color: "secondary", children: t('@theorem.gate.auth.no_oauth') });
         }
-        return (_jsx(Button, { label: t('@theorem.gate.auth.authorize'), variant: "primary", onClick: () => {
-                if (props.authUrl)
-                    props.onOpenSignIn(props.authUrl);
-            } }));
+        return (_jsx(HStack, { justify: "end", children: _jsx(Button, { label: t('@theorem.gate.auth.authorize'), variant: "primary", onClick: () => {
+                    if (props.authUrl)
+                        props.onOpenSignIn(props.authUrl);
+                } }) }));
     }
     const label = t(props.authType === 'api_key' ? '@theorem.gate.auth.api_key' : '@theorem.gate.auth.bearer');
     const note = t('@theorem.gate.auth.secret_note').trim();

package/ui/ToolResult.js

@@ -2,17 +2,19 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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';
 import { VStack } from '@astryxdesign/core/VStack';
-import { useLocale } from '@astryxdesign/core/i18n';
 import { lazy, Suspense, useMemo, useState } from 'react';
 import { withUnit } from "../client/shaped-data.js";
 import { hasLead, layoutResult, returnedMedia, } from "../client/tool-result.js";
+import { Arrive } from "./arrive.js";
 import { useLabels } from "./labels-provider.js";
+import { keyedByContent } from "./row-keys.js";
 import { ShapedData } from "./ShapedData.js";
-import { VoiceNote } from "./VoiceNote.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;
@@ -20,7 +22,7 @@ const IMAGE_CARD_PX = 200;
 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(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) => {
+    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 })] }));
@@ -30,21 +32,21 @@ function Figures({ figures }) {
     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(ChartCard, { title: figure.label, value: withUnit(decimal.format(figure.value), figure.unit) }, figure.key))) }));
+    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(Skeleton, { height: CHART_CARD_PX }, chart.key))) }), children: _jsx(ToolResultCharts, { charts: charts }) }));
+    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. */
-function ResultLead({ layout, parts = [] }) {
+/** What answers the call, laid out from the output: its figures as stat cards, its series as charts, the images, and audio it returned. */
+function ResultLead({ layout, parts = [], }) {
     const t = useLabels();
     const media = useMemo(() => returnedMedia(layout, parts, t('@theorem.host.image')), [layout, parts, t]);
     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, media.audio.map((clip, index) => (_jsx(VoiceNote, { src: clip.src, mimeType: clip.mimeType }, index)))] }));
+    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)))] }));
 }
 /**
  * A tool's output under one Response heading, led by what answers it (figures,
@@ -54,7 +56,7 @@ function ResultLead({ layout, parts = [] }) {
 export function ToolResult({ output, parts }) {
     const t = useLabels();
     const layout = useMemo(() => layoutResult(output), [output]);
-    // A figure's card is its reading: the fields below don't repeat it.
+    // why: A figure's card is its reading: the fields below don't repeat it.
     const ledKeys = useMemo(() => layout.figures.map((figure) => figure.key), [layout]);
-    return _jsx(ShapedData, { value: output, title: t('@theorem.host.response'), lead: _jsx(ResultLead, { layout: layout, parts: parts }), ledKeys: ledKeys });
+    return (_jsx(ShapedData, { value: output, title: t('@theorem.host.response'), lead: _jsx(ResultLead, { layout: layout, parts: parts }), ledKeys: ledKeys }));
 }

package/ui/ToolResultCharts.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grid } from '@astryxdesign/core/Grid';
 import { HStack } from '@astryxdesign/core/HStack';
+import { useLocale } from '@astryxdesign/core/i18n';
 import { Text } from '@astryxdesign/core/Text';
 import { VStack } from '@astryxdesign/core/VStack';
-import { useLocale } from '@astryxdesign/core/i18n';
 import { useMemo } from 'react';
-import { Bar, BarChart, Cell, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, Cell, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import { withUnit } from "../client/shaped-data.js";
 import { timeFormats } from "../client/tool-result.js";
+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";
+import { ChartCard, TRACE_GAP, TRACE_RADIUS, TraceSwatch, traceFill, } from "./trace-patterns.js";
 /**
  * A tool result's charts, drawn as the trace draws its own: the same card,
  * fills, ticks, and hover card. Recharts loads with this module, only when a
@@ -22,7 +23,12 @@ const CHART_PX = 140;
 /** Height of one row of a ranking, in pixels. */
 const BAR_ROW_PX = 22;
 const TICK = { fill: 'var(--color-text-secondary)', fontSize: 11 };
-const BAR = { radius: TRACE_RADIUS, stroke: TRACE_GAP, strokeWidth: 2, isAnimationActive: false };
+const BAR = {
+    radius: TRACE_RADIUS,
+    stroke: TRACE_GAP,
+    strokeWidth: 2,
+    isAnimationActive: false,
+};
 /** Each overlaid series, in the trace's order. */
 const SERIES_FILL = ['clear', 'shade1', 'shade2'];
 function useFormats(chart) {
@@ -41,27 +47,33 @@ function useFormats(chart) {
         return { number, tick: read(tick), when: read(when) };
     }, [chart, locale]);
 }
-function TimeTip({ active, payload, label, chart, formats }) {
+function TimeTip({ active, payload, label, chart, formats, }) {
     if (!active || !payload?.length)
         return null;
     return (_jsx(ChartTip, { children: _jsxs(VStack, { gap: 0, children: [_jsx(Text, { weight: "medium", children: formats.when(String(label)) }), chart.series.map((series, index) => {
                     const value = payload.find((entry) => entry.dataKey === series.key)?.value;
-                    return typeof value === 'number' ? (_jsxs(HStack, { gap: 2, vAlign: "center", children: [chart.series.length > 1 ? _jsx(TraceSwatch, { fill: SERIES_FILL[index] ?? 'clear' }) : null, _jsxs(Text, { type: "supporting", hasTabularNumbers: true, children: [chart.series.length > 1 ? `${series.label} ` : '', formats.number(value, series.unit)] })] }, series.key)) : null;
+                    return typeof value === 'number' ? (_jsxs(HStack, { gap: 2, vAlign: "center", children: [chart.series.length > 1 ? (_jsx(TraceSwatch, { fill: SERIES_FILL[index] ?? 'clear' })) : null, _jsxs(Text, { type: "supporting", hasTabularNumbers: true, children: [chart.series.length > 1 ? `${series.label} ` : '', formats.number(value, series.unit)] })] }, series.key)) : null;
                 })] }) }));
 }
 /** One or more series over time: the first reading as the figure, the span of every reading as its note. */
 function TimeCard({ chart }) {
     const formats = useFormats(chart);
     const [lead] = chart.series;
-    const values = chart.series.flatMap((series) => chart.rows.map((row) => row[series.key]).filter((value) => typeof value === 'number'));
-    const first = lead ? chart.rows.map((row) => row[lead.key]).find((value) => typeof value === 'number') : undefined;
+    const values = chart.series.flatMap((series) => chart.rows
+        .map((row) => row[series.key])
+        .filter((value) => typeof value === 'number'));
+    const first = lead
+        ? chart.rows
+            .map((row) => row[lead.key])
+            .find((value) => typeof value === 'number')
+        : undefined;
     if (!lead || first === undefined)
         return null;
     const unit = lead.unit;
     const range = `${formats.number(Math.min(...values))}–${formats.number(Math.max(...values), unit)}`;
     return (_jsxs(ChartCard, { title: chart.title, value: formats.number(first, unit), note: range, children: [_jsx(ChartFrame, { children: _jsx(ResponsiveContainer, { width: "100%", height: CHART_PX, initialDimension: { width: FIRST_WIDTH_PX, height: CHART_PX }, children: _jsxs(LineChart, { data: chart.rows, margin: { top: 4, right: 4, bottom: 0, left: 0 }, accessibilityLayer: false, children: [_jsx(XAxis, { dataKey: chart.x, tick: TICK, tickLine: false, axisLine: false, tickFormatter: formats.tick, minTickGap: 16 }), _jsx(YAxis, { tick: TICK, tickLine: false, axisLine: false, width: 36, domain: ['auto', 'auto'], tickFormatter: (value) => formats.number(value) }), _jsx(Tooltip, { content: (props) => _jsx(TimeTip, { ...props, chart: chart, formats: formats }), cursor: { stroke: 'var(--color-border-emphasized)' }, isAnimationActive: false }), chart.series.map((series, index) => (_jsx(Line, { type: "monotone", dataKey: series.key, stroke: traceFill(SERIES_FILL[index] ?? 'clear'), strokeWidth: 2, dot: false, activeDot: { r: 3, strokeWidth: 0 }, connectNulls: true, isAnimationActive: false }, series.key)))] }) }) }), chart.series.length > 1 ? (_jsx(HStack, { gap: 3, wrap: "wrap", children: chart.series.map((series, index) => (_jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(TraceSwatch, { fill: SERIES_FILL[index] ?? 'clear' }), _jsx(Text, { type: "supporting", color: "secondary", children: series.label })] }, series.key))) })) : null] }));
 }
-function BarTip({ active, payload, chart, formats }) {
+function BarTip({ active, payload, chart, formats, }) {
     const row = payload?.[0]?.payload;
     if (!active || !row)
         return null;
@@ -78,9 +90,14 @@ function CategoryCard({ chart }) {
     return (_jsx(ChartCard, { title: chart.title, value: formats.number(top.value, chart.series.unit), note: top.label, 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: 56, bottom: 0, left: 0 }, accessibilityLayer: false, barCategoryGap: 5, 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 label = rows[Number(id)]?.label ?? '';
                                 return label.length > 15 ? `${label.slice(0, 14)}…` : label;
-                            } }), _jsx(Tooltip, { content: (props) => _jsx(BarTip, { ...props, chart: chart, formats: formats }), cursor: { fill: 'var(--color-overlay-hover)', radius: TRACE_RADIUS }, isAnimationActive: false }), _jsx(Bar, { dataKey: "value", ...BAR, label: { position: 'right', fill: 'var(--color-text-secondary)', fontSize: 11, formatter: (value) => formats.number(Number(value), chart.series.unit) }, children: rows.map((row, index) => (_jsx(Cell, { fill: traceFill(index === 0 ? 'clear' : 'shade2') }, row.id))) })] }) }) }) }));
+                            } }), _jsx(Tooltip, { content: (props) => _jsx(BarTip, { ...props, chart: chart, formats: formats }), cursor: { fill: 'var(--color-overlay-hover)', radius: TRACE_RADIUS }, isAnimationActive: false }), _jsx(Bar, { dataKey: "value", ...BAR, label: {
+                                position: 'right',
+                                fill: 'var(--color-text-secondary)',
+                                fontSize: 11,
+                                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(Grid, { columns: { minWidth: 260, repeat: 'fill' }, gap: 3, children: charts.map((chart) => (chart.kind === 'time' ? _jsx(TimeCard, { chart: chart }, chart.key) : _jsx(CategoryCard, { chart: chart }, chart.key))) }));
+    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))) }));
 }

package/ui/TraceCharts.d.ts

@@ -1,13 +1,13 @@
 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. */
+/** 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;
     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 }: {
+export declare function ConversationCharts({ turns, onPick, }: {
     turns: readonly TraceTurn[];
     onPick: (index: number) => void;
 }): import("react").JSX.Element;

package/ui/TraceCharts.js

@@ -4,12 +4,12 @@ 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 { isCallTrace, traceActor } from "../client/trace-story.js";
+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 { ACTOR_FILL, ChartCard, TRACE_GAP, TRACE_RADIUS, TraceSwatch, traceFill } from "./trace-patterns.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. */
 const CHART_PX = 120;
 /** Height of a share bar, in pixels. */
@@ -20,7 +20,12 @@ const SLOW_ROW_PX = 22;
 const SLOWEST = 5;
 const TICK = { fill: 'var(--color-text-secondary)', fontSize: 11 };
 /** Every bar: rounded, and parted from its neighbours by the card's background. */
-const BAR = { radius: TRACE_RADIUS, stroke: TRACE_GAP, strokeWidth: 2, isAnimationActive: false };
+const BAR = {
+    radius: TRACE_RADIUS,
+    stroke: TRACE_GAP,
+    strokeWidth: 2,
+    isAnimationActive: false,
+};
 const MODEL_CALLS = new Set(['call', 'response']);
 const SPLIT_KEYS = ['model', 'tools', 'guardrails', 'hooks', 'other'];
 const SPLIT_FILL = {
@@ -31,7 +36,11 @@ const SPLIT_FILL = {
     other: 'shade2',
 };
 const TOKEN_KEYS = ['fresh', 'cached', 'output'];
-const TOKEN_FILL = { fresh: 'clear', cached: 'hatch', output: 'shade1' };
+const TOKEN_FILL = {
+    fresh: 'clear',
+    cached: 'hatch',
+    output: 'shade1',
+};
 const compact = new Intl.NumberFormat(undefined, { notation: 'compact', maximumFractionDigits: 1 });
 const percent = new Intl.NumberFormat(undefined, { style: 'percent' });
 function numberAt(node, key) {
@@ -45,11 +54,11 @@ function modelCalls(root) {
         .sort((a, b) => a.startMs - b.startMs);
 }
 /** A chart's key: each series' swatch and name, with its total at the end. */
-function Legend({ items }) {
+function Legend({ items, }) {
     return (_jsx(VStack, { gap: 1, children: items.map((item) => (_jsxs(HStack, { gap: 2, align: "center", justify: "between", children: [_jsxs(HStack, { gap: 2, align: "center", children: [_jsx(TraceSwatch, { fill: item.fill }), _jsx(Text, { type: "supporting", color: "secondary", children: item.label })] }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: item.value })] }, item.label))) }));
 }
 /** One bar split into shares, each rounded and parted from the next. */
-function ShareBar({ parts }) {
+function ShareBar({ parts, }) {
     const total = parts.reduce((sum, part) => sum + part.value, 0);
     return (_jsx(ChartFrame, { children: _jsx(ResponsiveContainer, { width: "100%", height: SHARE_PX, initialDimension: { width: FIRST_WIDTH_PX, height: SHARE_PX }, children: _jsxs(BarChart, { data: [Object.fromEntries(parts.map((part) => [part.key, part.value]))], layout: "vertical", margin: { top: 0, right: 0, bottom: 0, left: 0 }, barCategoryGap: 0, accessibilityLayer: false, children: [_jsx(XAxis, { type: "number", domain: [0, total], hide: true }), _jsx(YAxis, { type: "category", hide: true }), parts.map((part) => (_jsx(Bar, { dataKey: part.key, stackId: "share", fill: traceFill(part.fill), ...BAR }, part.key)))] }) }) }));
 }
@@ -77,9 +86,13 @@ function TimeCard({ split }) {
     const total = sumOf(split);
     if (total <= 0)
         return null;
-    // A share under half a percent is too thin to draw; the legend still lists it.
+    // why: A share under half a percent is too thin to draw; the legend still lists it.
     const keys = SPLIT_KEYS.filter((key) => split[key] / total >= 0.005);
-    return (_jsxs(ChartCard, { title: t('@theorem.panel.trace.time'), value: format.duration(total), note: split.model > 0 ? t('@theorem.panel.trace.charts.modelShare', { share: percent.format(split.model / total) }) : undefined, children: [_jsx(ShareBar, { parts: keys.map((key) => ({ key, fill: SPLIT_FILL[key], value: split[key] })) }), _jsx(SplitLegend, { split: split, total: total })] }));
+    return (_jsxs(ChartCard, { title: t('@theorem.panel.trace.time'), value: format.duration(total), note: split.model > 0
+            ? t('@theorem.panel.trace.charts.modelShare', {
+                share: percent.format(split.model / total),
+            })
+            : undefined, children: [_jsx(ShareBar, { parts: keys.map((key) => ({ key, fill: SPLIT_FILL[key], value: split[key] })) }), _jsx(SplitLegend, { split: split, total: total })] }));
 }
 /** A bar's tokens: read from cache, read fresh, written, and its cost when known. */
 function tokenSplit(usage) {
@@ -97,7 +110,10 @@ function TokenTip({ active, payload }) {
     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.title }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: [format.duration(row.ms), ...(row.cost === undefined ? [] : [format.usd(row.cost)])].join(t('@theorem.panel.trace.separator')) }), _jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: t('@theorem.panel.trace.charts.tokens', {
+    return (_jsx(ChartTip, { children: _jsxs(VStack, { gap: 0, children: [_jsx(Text, { weight: "medium", children: row.title }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: [
+                        format.duration(row.ms),
+                        ...(row.cost === undefined ? [] : [format.usd(row.cost)]),
+                    ].join(t('@theorem.panel.trace.separator')) }), _jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: t('@theorem.panel.trace.charts.tokens', {
                         cached: format.number(row.cached),
                         fresh: format.number(row.fresh),
                         output: format.number(row.output),
@@ -107,7 +123,7 @@ function TokenTip({ active, payload }) {
 function Columns({ rows, keys, fills, tip, }) {
     return (_jsx(ChartFrame, { children: _jsx(ResponsiveContainer, { width: "100%", height: CHART_PX, initialDimension: { width: FIRST_WIDTH_PX, height: CHART_PX }, children: _jsxs(BarChart, { data: rows, margin: { top: 0, right: 0, bottom: 0, left: 0 }, accessibilityLayer: false, barCategoryGap: "24%", maxBarSize: 24, onClick: (state) => rows[Number(state?.activeIndex)]?.open(), style: { cursor: 'pointer' }, children: [_jsx(XAxis, { dataKey: "index", tick: TICK, tickLine: false, axisLine: false, height: 18 }), _jsx(YAxis, { hide: true }), _jsx(Tooltip, { content: tip, cursor: { fill: 'var(--color-overlay-hover)', radius: TRACE_RADIUS }, isAnimationActive: false }), keys.map((key) => (_jsx(Bar, { dataKey: key, stackId: "stack", fill: traceFill(fills[key] ?? 'clear'), ...BAR }, key)))] }) }) }));
 }
-/** Tokens stacked new, cached and written per row: the total, the columns, and each series' sum. */
+/** Tokens stacked new, cached, and written per row: the total, the columns, and each series' sum. */
 function TokensCard({ title, rows }) {
     const format = useTraceFormat();
     const { t } = format;
@@ -120,7 +136,11 @@ function TokensCard({ title, rows }) {
         return null;
     const input = sums.fresh + sums.cached;
     const labels = { fresh: 'input', cached: 'cached', output: 'output' };
-    return (_jsxs(ChartCard, { title: title, value: format.number(total), ...(sums.cached > 0 && { note: t('@theorem.panel.trace.charts.cachedShare', { share: percent.format(sums.cached / input) }) }), children: [_jsx(Columns, { rows: rows, keys: TOKEN_KEYS.filter((key) => sums[key] > 0), fills: TOKEN_FILL, tip: (props) => _jsx(TokenTip, { ...props }) }), _jsx(Legend, { items: TOKEN_KEYS.filter((key) => sums[key] > 0).map((key) => ({
+    return (_jsxs(ChartCard, { title: title, value: format.number(total), ...(sums.cached > 0 && {
+            note: t('@theorem.panel.trace.charts.cachedShare', {
+                share: percent.format(sums.cached / input),
+            }),
+        }), children: [_jsx(Columns, { rows: rows, keys: TOKEN_KEYS.filter((key) => sums[key] > 0), fills: TOKEN_FILL, tip: (props) => _jsx(TokenTip, { ...props }) }), _jsx(Legend, { items: TOKEN_KEYS.filter((key) => sums[key] > 0).map((key) => ({
                     fill: TOKEN_FILL[key],
                     label: t(`@theorem.panel.trace.charts.${labels[key]}`),
                     value: compact.format(sums[key]),
@@ -179,9 +199,14 @@ function SlowestCard({ root, onSelect }) {
                     }, 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))) })] }) }) }) }));
+                            } }), _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))) })] }) }) }) }));
 }
-/** Where a turn's time, tokens and slowest steps went. A bar opens its span. */
+/** 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);
@@ -206,13 +231,19 @@ function TurnTimeCard({ rows, isCalls }) {
     const total = sumOf(sums);
     if (total <= 0)
         return null;
-    return (_jsxs(ChartCard, { title: t(isCalls ? '@theorem.panel.trace.charts.callTime' : '@theorem.panel.trace.charts.turnTime'), value: format.duration(total), note: sums.model > 0 ? t('@theorem.panel.trace.charts.modelShare', { share: percent.format(sums.model / total) }) : undefined, children: [_jsx(Columns, { rows: rows, keys: SPLIT_KEYS, fills: SPLIT_FILL, tip: (props) => _jsx(TurnTimeTip, { ...props }) }), _jsx(SplitLegend, { split: sums, total: total })] }));
+    return (_jsxs(ChartCard, { title: t(isCalls ? '@theorem.panel.trace.charts.callTime' : '@theorem.panel.trace.charts.turnTime'), value: format.duration(total), note: sums.model > 0
+            ? t('@theorem.panel.trace.charts.modelShare', {
+                share: percent.format(sums.model / total),
+            })
+            : 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 }) {
+export function ConversationCharts({ turns, onPick, }) {
     const { t } = useTraceFormat();
     const isCalls = isCallTrace(turns);
-    const column = isCalls ? '@theorem.panel.trace.charts.hostCall' : '@theorem.panel.trace.charts.turn';
+    const column = isCalls
+        ? '@theorem.panel.trace.charts.hostCall'
+        : '@theorem.panel.trace.charts.turn';
     const time = useMemo(() => turns.map((turn, position) => ({
         index: position + 1,
         title: t(column, { index: position + 1 }),

package/ui/TraceGuardrails.d.ts

@@ -4,7 +4,8 @@ import type { TraceNode } from '../client/trace-view.ts';
  * Every guardrail check of the turn. The ones that acted lead, each with the
  * rules it matched and why; the passes follow on one quiet line.
  */
-export declare function TraceGuardrails({ checks, onSelect }: {
+export declare function TraceGuardrails({ checks, onSelect, }: {
     checks: readonly TraceGuardrailCheck[];
-    onSelect: (node: TraceNode) => void;
+    /** Opens a check's step; without it a check is not a button. */
+    onSelect?: (node: TraceNode) => void;
 }): import("react").JSX.Element;

package/ui/TraceGuardrails.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge } from '@astryxdesign/core/Badge';
 import { Icon } from '@astryxdesign/core/Icon';
 import { Item } from '@astryxdesign/core/Item';
 import { Text } from '@astryxdesign/core/Text';
+import { Token } from '@astryxdesign/core/Token';
 import { Tooltip as HoverTip } from '@astryxdesign/core/Tooltip';
 import { VStack } from '@astryxdesign/core/VStack';
-import { IconShield } from '@tabler/icons-react';
+import { IconBiohazard, IconEyeOff, IconHandStop, IconInfoCircle, IconShield, } from '@tabler/icons-react';
+import { TOOL_RULES } from '@theoremjs/agents/guardrails';
+import { Arrive, Stream } from "./arrive.js";
 import { useTraceFormat } from "./TraceValues.js";
 /** What a check is called: the timed check's own name, or else the text it looked at. */
 function checkName(check) {
@@ -26,8 +28,24 @@ function CheckWhy({ check, format }) {
                     .filter(Boolean)
                     .join(separator) }), check.hits.map((hit) => (_jsx(HitWhy, { hit: hit, separator: separator }, `${hit.rule}:${hit.match ?? ''}`))), check.reason ? (_jsx(Text, { type: "supporting", color: "secondary", maxLines: 3, children: check.reason })) : null] }));
 }
-function ActedCheck({ check, format, onSelect }) {
-    return (_jsx(Item, { startContent: _jsx(Icon, { icon: IconShield, size: "sm", color: "secondary" }), label: _jsx(HoverTip, { content: check.actionDoc ?? check.actionLabel, children: _jsx(Badge, { variant: check.action === 'block' ? 'error' : 'warning', label: check.actionLabel }) }), description: _jsx(CheckWhy, { check: check, format: format }), endContent: _jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: format.t('@theorem.panel.trace.offset', { duration: format.duration(check.offsetMs) }) }), align: "start", density: "compact", onClick: () => onSelect(check.node) }));
+/** What a check did, as a token. A report of a call made after a remote read says so in place of "flagged". */
+function ActionToken({ check, format }) {
+    if (check.action === 'block') {
+        return (_jsx(Token, { label: check.actionLabel, color: "red", icon: _jsx(Icon, { icon: IconHandStop, size: "sm" }) }));
+    }
+    if (check.action === 'redact') {
+        return (_jsx(Token, { label: check.actionLabel, color: "orange", icon: _jsx(Icon, { icon: IconEyeOff, size: "sm" }) }));
+    }
+    const rules = new Set(check.hits.map((hit) => hit.rule));
+    if (rules.has(TOOL_RULES.steeredTurn) || rules.has(TOOL_RULES.taintedTurn)) {
+        return (_jsx(Token, { label: format.t(rules.has(TOOL_RULES.steeredTurn)
+                ? '@theorem.panel.trace.guardrails.steered'
+                : '@theorem.panel.trace.guardrails.tainted'), color: "yellow", icon: _jsx(Icon, { icon: IconBiohazard, size: "sm" }) }));
+    }
+    return (_jsx(Token, { label: check.actionLabel, color: "blue", icon: _jsx(Icon, { icon: IconInfoCircle, size: "sm" }) }));
+}
+function ActedCheck({ check, format, onSelect, }) {
+    return (_jsx(Item, { startContent: _jsx(Icon, { icon: IconShield, size: "sm", color: "secondary" }), label: _jsx(HoverTip, { content: check.actionDoc ?? check.actionLabel, children: _jsx(ActionToken, { check: check, format: format }) }), description: _jsx(CheckWhy, { check: check, format: format }), endContent: _jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: format.t('@theorem.panel.trace.offset', { duration: format.duration(check.offsetMs) }) }), align: "start", density: "compact", ...(onSelect ? { onClick: () => onSelect(check.node) } : {}) }));
 }
 /** "Input check 0.8ms, Result check ×3 0.4ms": the passes, one entry per kind of check with its count and total time. */
 function passSummary(passes, format) {
@@ -48,9 +66,9 @@ function passSummary(passes, format) {
  * Every guardrail check of the turn. The ones that acted lead, each with the
  * rules it matched and why; the passes follow on one quiet line.
  */
-export function TraceGuardrails({ checks, onSelect }) {
+export function TraceGuardrails({ checks, onSelect, }) {
     const format = useTraceFormat();
     const acted = checks.filter((check) => check.action !== 'allow');
     const passed = passSummary(checks.filter((check) => check.action === 'allow'), format);
-    return (_jsxs(VStack, { gap: 1, children: [acted.map((check) => (_jsx(ActedCheck, { check: check, format: format, onSelect: onSelect }, check.id))), passed ? (_jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: format.t('@theorem.panel.trace.guardrails.passed', { checks: passed }) })) : null] }));
+    return (_jsx(Stream, { children: _jsxs(VStack, { gap: 1, children: [acted.map((check) => (_jsx(Arrive, { children: _jsx(ActedCheck, { check: check, format: format, onSelect: onSelect }) }, check.id))), passed ? (_jsx(Arrive, { children: _jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: format.t('@theorem.panel.trace.guardrails.passed', { checks: passed }) }) })) : null] }) }));
 }

package/ui/TraceInspector.d.ts

@@ -1,6 +1,16 @@
+import type { TraceRecord } from '@theoremjs/agents';
+import { type ReactNode } from 'react';
 import type { TraceFeed } from '../client/trace-feed.ts';
 /** The inspector over the records a feed has delivered; the panel loads this module when it first opens. */
-export declare function TraceFeedBody({ traces, isWide }: {
+export declare function TraceFeedBody({ traces, isWide, }: {
     traces: TraceFeed | undefined;
     isWide: boolean;
 }): import("react").JSX.Element;
+/**
+ * Only what the records say of guardrails: how long the checks took, how many
+ * ran and acted, then each check. `head` leads it.
+ */
+export declare function TraceGuardrailsBody({ records, head, }: {
+    records: readonly TraceRecord[];
+    head?: ReactNode;
+}): import("react").JSX.Element;