@theoremjs/react 0.0.0-stage → 0.3.0

package/ui/TheoremHost.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Banner } from '@astryxdesign/core/Banner';
+import { EmptyState } from '@astryxdesign/core/EmptyState';
+import { HStack } from '@astryxdesign/core/HStack';
+import { List, ListItem } from '@astryxdesign/core/List';
+import { Selector } from '@astryxdesign/core/Selector';
+import { Spinner } from '@astryxdesign/core/Spinner';
+import { StatusDot } from '@astryxdesign/core/StatusDot';
+import { Text } from '@astryxdesign/core/Text';
+import { Token } from '@astryxdesign/core/Token';
+import { VStack } from '@astryxdesign/core/VStack';
+import { useLocale } from '@astryxdesign/core/i18n';
+import { useMemo, useState } from 'react';
+import { hostCallFailure, hostCallStatus, hostConsoleView } from "../client/host-call.js";
+import { createHostTransport } from "../client/host-transport.js";
+import { missingFields } from "../client/schema-fields.js";
+import { isRow, json } from "../client/shaped-data.js";
+import { useTheoremHost } from "../hooks/use-theorem-host.js";
+import { workDuration } from "./labels.js";
+import { ConsoleFrame, JsonRequest, RequestCard, RunBar } from "./ConsoleFrame.js";
+import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
+import { SchemaFields } from "./SchemaFields.js";
+import { TheoremThemeProvider } from "./theme.js";
+import { ApprovalCard, AuthChallengeCard } from "./ToolGateCard.js";
+import { ToolResult } from "./ToolResult.js";
+import { useTraceInspector } from "./TraceInspectorPanel.js";
+/** Calls listed under the console before older ones drop off the page. */
+const MAX_EARLIER = 8;
+const STATUS_DOT = {
+    running: 'accent',
+    gate: 'warning',
+    complete: 'success',
+    error: 'error',
+    cancel: 'neutral',
+};
+/** The request's text as the input a call sends, and what it still lacks. */
+function checkRequest(t, tool, text) {
+    let input;
+    try {
+        input = JSON.parse(text);
+    }
+    catch {
+        return { ok: false, note: t('@theorem.decision.invalid_json') };
+    }
+    if (!isRow(input))
+        return { ok: false, note: t('@theorem.decision.invalid_json') };
+    const missing = missingFields(tool.inputSchema, input);
+    if (missing.length > 0)
+        return { ok: false, note: t('@theorem.host.missing', { fields: missing.join(', ') }), input };
+    return { ok: true, input };
+}
+/** A tool's kind, and its access when it can change things. */
+function ToolTokens({ tool }) {
+    const t = useLabels();
+    return (_jsxs(HStack, { gap: 1, wrap: "wrap", children: [_jsx(Token, { label: t(`@theorem.host.kind.${tool.kind}`), size: "sm", color: "gray" }), tool.access === 'read-only' ? null : (_jsx(Token, { label: t(`@theorem.host.access.${tool.access}`), size: "sm", color: tool.access === 'destructive' ? 'red' : 'orange' }))] }));
+}
+/** The gate a call paused on, answered in place. */
+function CallGate({ call, onAnswer }) {
+    const state = call.call?.state;
+    if (state?.phase !== 'gate')
+        return null;
+    if (state.gate.kind === 'auth') {
+        return (_jsx(AuthChallengeCard, { gate: state.gate, toolName: call.name, submitted: call.answering === 'auth', onAuthenticated: (secret) => void onAnswer(call.id, { action: 'auth', secret }) }));
+    }
+    return (_jsx(ApprovalCard, { gate: state.gate, toolName: call.name, input: call.input, decided: call.answering === 'auth' ? null : call.answering, onDecision: (action) => void onAnswer(call.id, { action }) }));
+}
+/** One call's outcome: its gate, its failure, or its output, then a line for the tool, time, and status. */
+function CallOutcome({ call, onAnswer }) {
+    const t = useLabels();
+    const state = call.call?.state;
+    const failure = hostCallFailure(call);
+    const meta = [call.name, call.elapsedMs == null ? null : workDuration(t, call.elapsedMs), t(`@theorem.host.status.${hostCallStatus(call)}`)].filter(Boolean);
+    return (_jsxs(VStack, { gap: 3, children: [_jsx(CallGate, { call: call, onAnswer: onAnswer }), failure ? _jsx(Banner, { status: "error", title: failure.title, description: failure.description }) : null, state?.phase === 'complete' ? _jsx(ToolResult, { output: state.output, parts: state.parts }) : null, call.isRunning ? null : (_jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: meta.join(' · ') }))] }));
+}
+/** This page's earlier calls, newest first; picking one shows it again with its request. */
+function EarlierCalls({ calls, onPick }) {
+    const t = useLabels();
+    const locale = useLocale();
+    const time = useMemo(() => new Intl.DateTimeFormat(locale, { timeStyle: 'medium' }), [locale]);
+    if (calls.length === 0)
+        return null;
+    return (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { type: "supporting", color: "secondary", as: "h3", children: t('@theorem.host.earlier') }), _jsx(List, { hasDividers: true, density: "compact", children: calls.slice(0, MAX_EARLIER).map((call) => {
+                    const status = hostCallStatus(call);
+                    return (_jsx(ListItem, { label: call.name, startContent: _jsx(StatusDot, { variant: STATUS_DOT[status], label: t(`@theorem.host.status.${status}`), isPulsing: call.isRunning }), endContent: _jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: time.format(call.startedAt) }), onClick: () => onPick(call) }, call.id));
+                }) })] }));
+}
+/** The picked tool's request, as fields or JSON, and Run. */
+function ToolRequest({ tools, tool, check, text, view, shown, onText, onPick, onView, onRun, onStop }) {
+    const t = useLabels();
+    const fieldsInput = 'input' in check ? check.input : undefined;
+    const showFields = view === 'fields' && fieldsInput !== undefined;
+    return (_jsxs(RequestCard, { title: t('@theorem.host.request'), view: showFields ? 'fields' : 'json', hasFields: fieldsInput !== undefined, onView: onView, onRun: onRun, children: [_jsxs(VStack, { gap: 2, children: [_jsx(Selector, { label: t('@theorem.host.tool'), size: "sm", options: tools.map((option) => ({ value: option.name, label: option.name, description: option.description })), value: tool.name, hasSearch: tools.length > 8, description: tool.description, onChange: onPick }), _jsx(ToolTokens, { tool: tool })] }), showFields ? (_jsx(SchemaFields
+            // A new tool starts a new form, so inputs don't carry state across schemas.
+            , { schema: tool.inputSchema, value: fieldsInput, onChange: (next) => {
+                    onText(json(next));
+                } }, tool.name)) : (_jsx(JsonRequest, { label: t('@theorem.host.request'), text: text, isInvalid: fieldsInput === undefined, onChange: onText })), _jsx(RunBar, { note: check.ok ? t('@theorem.host.shortcut') : check.note, isReady: check.ok, isRunning: shown?.isRunning === true, runLabel: t('@theorem.host.run'), runningLabel: t('@theorem.host.running'), stopLabel: t('@theorem.host.stop'), onRun: onRun, onStop: () => {
+                    if (shown)
+                        onStop(shown.id);
+                } })] }));
+}
+function HostBody({ transport, iface, host, maxWidth = '960px', trace, className, style }) {
+    const t = useLabels();
+    const [picked, setPicked] = useState(iface.tools[0]?.name);
+    // Each tool keeps its own request while you move between them.
+    const [drafts, setDrafts] = useState({});
+    const [shownId, setShownId] = useState(null);
+    const [view, setView] = useState('fields');
+    const inspector = useTraceInspector(iface, transport.traces, trace);
+    const { tool, text, shown, earlier } = hostConsoleView({ tools: iface.tools, picked, drafts, calls: host.calls, shownId });
+    const check = tool ? checkRequest(t, tool, text) : null;
+    const setText = (next) => {
+        if (tool)
+            setDrafts((previous) => ({ ...previous, [tool.name]: next }));
+    };
+    const run = () => {
+        if (tool && check?.ok && !shown?.isRunning)
+            setShownId(host.run(tool.name, check.input));
+    };
+    const pick = (call) => {
+        setPicked(call.name);
+        setDrafts((previous) => ({ ...previous, [call.name]: json(call.input) }));
+        setShownId(call.id);
+    };
+    return (_jsxs(ConsoleFrame, { inspector: inspector, maxWidth: maxWidth, className: className, style: style, children: [tool && check ? (_jsx(ToolRequest, { tools: iface.tools, tool: tool, check: check, text: text, view: view, shown: shown, onText: setText, onPick: setPicked, onView: setView, onRun: run, onStop: host.cancel })) : (_jsx(EmptyState, { title: t('@theorem.host.no_tools') })), shown ? _jsx(CallOutcome, { call: shown, onAnswer: host.answer }) : null, _jsx(EarlierCalls, { calls: earlier, onPick: pick })] }));
+}
+function HostForTransport(props) {
+    const t = useLabels();
+    const host = useTheoremHost(props.transport);
+    if (host.describeFailure)
+        return _jsx(Banner, { status: "error", title: host.describeFailure.error });
+    if (!host.iface)
+        return _jsx(Spinner, { size: "lg", label: t('@theorem.chat.loading') });
+    return _jsx(HostBody, { ...props, iface: host.iface, host: host });
+}
+/**
+ * Drop-in console for a host profile served by `createTheoremHostHandler`:
+ * pick a tool, fill in the request its input schema draws, Run (⌘/Ctrl+Enter),
+ * and read the response laid out from what it returned — figures, charts,
+ * images, and the data itself. Gates are answered in place.
+ *
+ * ```tsx
+ * <TheoremHost endpoint="/api/host" />
+ * ```
+ */
+export function TheoremHost({ endpoint, http, transport, theme, mode, labels, ...rest }) {
+    const resolved = useMemo(() => transport ?? createHostTransport({ ...http, endpoint }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `http` identity is caller-owned; endpoint drives reconnection.
+    [transport, endpoint]);
+    return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(HostForTransport, { ...rest, transport: resolved }) }) }));
+}

package/ui/ToolGateCard.d.ts

@@ -0,0 +1,28 @@
+import type { ToolGate } from '@theoremjs/agents/kernel';
+import type { ToolDecisionAction } from '../client/tool-resume.ts';
+export type ToolDecision = ToolDecisionAction;
+export type ApprovalCardProps = {
+    gate: ToolGate;
+    toolName: string;
+    input?: unknown;
+    /** The decision on its way; it shows in place of the buttons until the gate settles, or they return. */
+    decided?: ToolDecision | null;
+    onDecision?: (action: ToolDecision) => void;
+};
+export declare function ApprovalCard(props: ApprovalCardProps): import("react").JSX.Element;
+/** A gate that needs the user to sign in first. */
+export type AuthGate = Extract<ToolGate, {
+    kind: 'auth';
+}>;
+export type AuthChallengeCardProps = {
+    gate: AuthGate;
+    toolName: string;
+    /**
+     * Signed in: `secret` is the key the user typed, for the server to save; after
+     * an OAuth sign-in (the popup's `notifyOAuthComplete`) there is none.
+     */
+    onAuthenticated?: (secret?: string) => void;
+    /** Signed in, and the answer is on its way; the sign-in returns if it fails. */
+    submitted?: boolean;
+};
+export declare function AuthChallengeCard(props: AuthChallengeCardProps): import("react").JSX.Element;

package/ui/ToolGateCard.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from '@astryxdesign/core/Badge';
+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 { Text } from '@astryxdesign/core/Text';
+import { TextInput } from '@astryxdesign/core/TextInput';
+import { Token } from '@astryxdesign/core/Token';
+import { VStack } from '@astryxdesign/core/VStack';
+import { useCallback, useEffect, useState } from 'react';
+import { isOAuthComplete } from "../client/oauth-popup.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');
+}
+function formatInput(value) {
+    if (typeof value === 'string')
+        return value;
+    if (value === undefined || value === null)
+        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 })] }));
+}
+export function ApprovalCard(props) {
+    return (_jsx(TheoremLabelsProvider, { children: _jsx(ApprovalBody, { ...props }) }));
+}
+function ApprovalBody({ gate, toolName, 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) }))] }) }));
+}
+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] }));
+}
+export function AuthChallengeCard(props) {
+    return (_jsx(TheoremLabelsProvider, { children: _jsx(AuthChallengeBody, { ...props }) }));
+}
+/** Wait for the sign-in popup to report its slot signed in. */
+function useOAuthPopup(slot, onComplete) {
+    const [popup, setPopup] = useState(null);
+    useEffect(() => {
+        if (!popup)
+            return;
+        function onMessage(event) {
+            if (!popup || !isOAuthComplete(event, { popup, slot, origin: globalThis.location.origin }))
+                return;
+            setPopup(null);
+            onComplete();
+        }
+        globalThis.addEventListener('message', onMessage);
+        return () => globalThis.removeEventListener('message', onMessage);
+    }, [popup, slot, onComplete]);
+    return (url) => setPopup(globalThis.open(url, '_blank', 'width=600,height=700'));
+}
+function AuthChallengeBody({ gate, toolName, onAuthenticated, submitted = false }) {
+    const t = useLabels();
+    const challenge = gate.authChallenge;
+    const { authType, slot } = challenge;
+    const [secret, setSecret] = useState('');
+    const onOAuthComplete = useCallback(() => onAuthenticated?.(), [onAuthenticated]);
+    const openSignIn = useOAuthPopup(slot, onOAuthComplete);
+    function submit() {
+        const value = secret.trim();
+        if (!value)
+            return;
+        // 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 })] }) }));
+}
+function AuthAction(props) {
+    const t = useLabels();
+    if (props.submitted) {
+        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);
+            } }));
+    }
+    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();
+    return (_jsxs(HStack, { gap: 2, align: "end", children: [_jsx(TextInput, { type: "password", label: label, ...(note ? { description: note } : {}), value: props.secret, placeholder: t('@theorem.gate.auth.secret_placeholder', { slot: props.slot }), autoComplete: "off", onChange: props.onSecretChange, onEnter: props.onSubmit, width: "100%" }), _jsx(Button, { label: t('@theorem.gate.auth.submit'), variant: "primary", isDisabled: !props.secret.trim(), onClick: props.onSubmit })] }));
+}

package/ui/ToolResult.d.ts

@@ -0,0 +1,10 @@
+import { type ResultMedia } from '../client/tool-result.ts';
+/**
+ * A tool's output under one Response heading, led by what answers it (figures,
+ * charts, the images and audio it returned), then the data itself drawn by its shape, with its JSON one
+ * tap away. A payload too big to lay out, or a render that throws, shows as JSON.
+ */
+export declare function ToolResult({ output, parts }: {
+    output: unknown;
+    parts?: readonly ResultMedia[];
+}): import("react").JSX.Element;

package/ui/ToolResult.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { 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 { useLabels } from "./labels-provider.js";
+import { ShapedData } from "./ShapedData.js";
+import { VoiceNote } from "./VoiceNote.js";
+import { ChartCard } from "./trace-patterns.js";
+const ToolResultCharts = lazy(() => import("./ToolResultCharts.js").then((module) => ({ default: module.ToolResultCharts })));
+/** Narrowest an image card gets. */
+const IMAGE_CARD_PX = 200;
+/** 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(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(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 }) }));
+}
+/** 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)))] }));
+}
+/**
+ * A tool's output under one Response heading, led by what answers it (figures,
+ * charts, the images and audio it returned), then the data itself drawn by its shape, with its JSON one
+ * tap away. A payload too big to lay out, or a render that throws, shows as JSON.
+ */
+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.
+    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 });
+}

package/ui/ToolResultCharts.d.ts

@@ -0,0 +1,5 @@
+import { type ResultChart } from '../client/tool-result.ts';
+/** Each chart in its card, side by side where the column is wide enough. */
+export declare function ToolResultCharts({ charts }: {
+    charts: readonly ResultChart[];
+}): import("react").JSX.Element;

package/ui/ToolResultCharts.js

@@ -0,0 +1,86 @@
+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';
+import { useLocale } from '@astryxdesign/core/i18n';
+import { useMemo } from 'react';
+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 { ChartFrame, ChartTip, FIRST_WIDTH_PX } from "./TraceOverview.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
+ * result has a chart.
+ *
+ * @module
+ */
+/** Height of a time chart's plot, in pixels. */
+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 };
+/** Each overlaid series, in the trace's order. */
+const SERIES_FILL = ['clear', 'shade1', 'shade2'];
+function useFormats(chart) {
+    const locale = useLocale();
+    return useMemo(() => {
+        const decimal = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
+        const number = (value, unit) => withUnit(decimal.format(value), unit);
+        const dates = chart.kind === 'time' ? chart.rows.map((row) => String(row[chart.x])) : [];
+        const options = timeFormats(dates);
+        const tick = new Intl.DateTimeFormat(locale, options.tick);
+        const when = new Intl.DateTimeFormat(locale, options.when);
+        const read = (format) => (text) => {
+            const at = Date.parse(text);
+            return Number.isNaN(at) ? text : format.format(at);
+        };
+        return { number, tick: read(tick), when: read(when) };
+    }, [chart, locale]);
+}
+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;
+                })] }) }));
+}
+/** 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;
+    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 }) {
+    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.label }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: formats.number(row.value, chart.series.unit) })] }) }));
+}
+/** Rows ranked by one number, largest first, drawn like the trace's slowest steps. */
+function CategoryCard({ chart }) {
+    const formats = useFormats(chart);
+    const rows = useMemo(() => chart.rows.map((row, index) => ({ ...row, id: String(index) })), [chart]);
+    const [top] = rows;
+    if (!top)
+        return null;
+    const height = rows.length * BAR_ROW_PX;
+    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))) })] }) }) }) }));
+}
+/** 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))) }));
+}

package/ui/TraceCharts.d.ts

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