@theoremjs/react 0.0.0-stage → 0.3.0

package/ui/DecisionAnswers.js

@@ -0,0 +1,102 @@
+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 { workDuration } from "./labels.js";
+import { ChartCard, TRACE_RADIUS, traceFill } from "./trace-patterns.js";
+import { useLabels } from "./labels-provider.js";
+const EASE = 'var(--duration-medium) var(--ease-standard)';
+/** Height of a share bar, as the trace draws one. */
+const SHARE_PX = 12;
+function useNumbers() {
+    const locale = useLocale();
+    return useMemo(() => ({
+        percent: new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 0 }),
+        decimal: new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }),
+        usd: new Intl.NumberFormat(locale, { style: 'currency', currency: 'USD', maximumSignificantDigits: 2 }),
+    }), [locale]);
+}
+/** The pick in the trace's clear series, the rest in its shade. */
+function answerFill(isLead) {
+    return traceFill(isLead ? 'clear' : 'shade2');
+}
+/** The option's share as a bar, drawn like the trace's. */
+function Share({ value, isLead }) {
+    return (_jsx("div", { style: {
+            height: SHARE_PX,
+            width: `${String(Math.max(value, 0.01) * 100)}%`,
+            borderRadius: TRACE_RADIUS,
+            background: answerFill(isLead),
+            transition: `width ${EASE}`,
+        } }));
+}
+function ChoiceAnswer({ title, answer }) {
+    const t = useLabels();
+    const n = useNumbers();
+    const options = Object.entries(answer.probabilities).sort(([, a], [, b]) => b - a);
+    return (_jsx(ChartCard, { title: title, value: answer.choice, note: t('@theorem.decision.confidence', { percent: n.percent.format(answer.confidence) }), children: _jsx(VStack, { gap: 2, role: "list", children: options.map(([label, p]) => (_jsxs(VStack, { gap: 1, role: "listitem", "aria-label": t('@theorem.decision.option', { label, percent: n.percent.format(p) }), children: [_jsxs(HStack, { gap: 2, hAlign: "between", "aria-hidden": true, children: [_jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: label }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: n.percent.format(p) })] }), _jsx(Share, { value: p, isLead: label === answer.choice })] }, label))) }) }));
+}
+const SCALE_HEIGHT = 56;
+/** A level's short name: the words before its colon or dash ("Low: reversible…" → "Low"), when there are few. */
+function levelName(label) {
+    const head = label.split(/[:—–]\s/)[0]?.trim() ?? '';
+    return head && head.length <= 32 && head !== label ? head : label;
+}
+/** Each level's probability as a column, with a mark where the score falls between them. */
+function ScoreAnswer({ title, answer, labels }) {
+    const t = useLabels();
+    const n = useNumbers();
+    const levels = labels.length;
+    const nearest = Math.min(levels - 1, Math.max(0, Math.round(answer.score)));
+    return (_jsx(ChartCard, { title: title, value: labels[nearest] === undefined ? n.decimal.format(answer.score) : levelName(labels[nearest]), note: [
+            t('@theorem.decision.score_of', { score: n.decimal.format(answer.score), max: n.decimal.format(levels - 1) }),
+            t('@theorem.decision.confidence', { percent: n.percent.format(answer.confidence) }),
+        ].join(' · '), children: _jsxs(VStack, { gap: 1, children: [_jsxs("div", { "aria-hidden": true, style: { position: 'relative', display: 'flex', alignItems: 'flex-end', gap: 4, height: SCALE_HEIGHT }, children: [labels.map((label, level) => (_jsx("div", { style: {
+                                flex: 1,
+                                height: `${String(Math.max(0.04, answer.probabilities[String(level)] ?? 0) * 100)}%`,
+                                borderRadius: TRACE_RADIUS,
+                                background: answerFill(level === nearest),
+                                transition: `height ${EASE}`,
+                            } }, `${String(level)}:${label}`))), _jsx("div", { style: {
+                                position: 'absolute',
+                                insetBlock: -4,
+                                left: `${String(((answer.score + 0.5) / levels) * 100)}%`,
+                                width: 0,
+                                borderInlineStart: '1.5px dashed var(--color-text-secondary)',
+                                transition: `left ${EASE}`,
+                            } })] }), _jsx("div", { style: { display: 'flex', gap: 4 }, children: labels.map((label, level) => (_jsx("div", { style: { flex: 1, minWidth: 0 }, title: label, children: _jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: levelName(label) }) }, `${String(level)}:${label}`))) }), _jsx("span", { style: { position: 'absolute', width: 1, height: 1, overflow: 'hidden', clipPath: 'inset(50%)' }, children: labels.map((label, level) => t('@theorem.decision.option', { label, percent: n.percent.format(answer.probabilities[String(level)] ?? 0) })).join('; ') })] }) }));
+}
+function NumberAnswer({ title, answer }) {
+    const n = useNumbers();
+    return _jsx(ChartCard, { title: title, value: n.decimal.format(answer.noul) });
+}
+/** One question's answer in the trace's chart card, titled by the question and its kind. */
+function AnswerCard({ question, answer }) {
+    const t = useLabels();
+    const title = `${question.id} · ${t(`@theorem.decision.type.${question.type}`)}`;
+    if (answer?.type === 'choice')
+        return _jsx(ChoiceAnswer, { title: title, answer: answer });
+    if (answer?.type === 'score')
+        return _jsx(ScoreAnswer, { title: title, answer: answer, labels: question.labels });
+    if (answer?.type === 'noul')
+        return _jsx(NumberAnswer, { title: title, answer: answer });
+    return null;
+}
+/**
+ * A decision's answers, one card per question in the order the profile asks
+ * them, and one quiet line for the model, time, tokens, and cost.
+ */
+export function TheoremDecisionAnswers({ iface, result, elapsedMs, isStale }) {
+    const t = useLabels();
+    const n = useNumbers();
+    const meta = [
+        result.model,
+        elapsedMs == null ? null : workDuration(t, elapsedMs),
+        result.usage ? t('@theorem.decision.tokens', { count: result.usage.inputTokens }) : null,
+        result.usage?.costUsd === undefined ? null : n.usd.format(result.usage.costUsd),
+    ].filter(Boolean);
+    return (_jsxs(VStack, { gap: 3, style: { opacity: isStale ? 0.5 : 1, transition: `opacity ${EASE}` }, "aria-busy": isStale, children: [_jsx(Grid, { columns: { minWidth: 260, repeat: 'fill' }, gap: 3, children: iface.questions.map((question) => (_jsx(AnswerCard, { question: question, answer: result.answers[question.id] }, question.id))) }), _jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: meta.join(' · ') })] }));
+}

package/ui/LiveRunner.d.ts

@@ -0,0 +1,28 @@
+import type { DefinedTheme } from '@astryxdesign/core/theme';
+import type { LiveProfileInterface } from '@theoremjs/agents/interface';
+import type { LiveConnection } from '../client/live-client.ts';
+import { type TheoremLabels } from './labels.ts';
+export type LiveRunnerProps = {
+    iface: LiveProfileInterface;
+    /** What the call opens: a profile the host registered, or an open message for the relay. */
+    connection: () => LiveConnection | Promise<LiveConnection>;
+    /** Astryx theme, as on `TheoremChat`. Omit to inherit the host's `<Theme>` or use `theoremTheme`. */
+    theme?: DefinedTheme;
+    mode?: 'system' | 'light' | 'dark';
+    /** Replacement lines by locale, as on `TheoremChat`. */
+    labels?: TheoremLabels;
+    /**
+     * Show the trace in place of the call, from the host's own control; the
+     * built-in trace toggle then hides. Omit to keep the toggle. Needs a profile
+     * that records traces.
+     */
+    trace?: boolean;
+};
+/**
+ * Live (voice / video) runner on Astryx. Before a call: a landing like the
+ * chat's, offering a voice or video call. In a call: the agent tag and state
+ * over the ink waveform, captions in a right-hand chat column, call controls
+ * in a toolbar, and tool gates in a dialog. Offers the trace inspector when
+ * the profile records traces.
+ */
+export declare function LiveRunner({ theme, mode, labels, ...props }: LiveRunnerProps): import("react").JSX.Element;

package/ui/LiveRunner.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AspectRatio } from '@astryxdesign/core/AspectRatio';
+import { Banner } from '@astryxdesign/core/Banner';
+import { Button } from '@astryxdesign/core/Button';
+import { Center } from '@astryxdesign/core/Center';
+import { ChatComposer, ChatComposerInput, ChatLayout, ChatMessage, ChatMessageBubble, ChatMessageList, ChatSystemMessage, ChatSendButton, } from '@astryxdesign/core/Chat';
+import { Dialog } from '@astryxdesign/core/Dialog';
+import { EmptyState } from '@astryxdesign/core/EmptyState';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { Layout, LayoutContent } from '@astryxdesign/core/Layout';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Text } from '@astryxdesign/core/Text';
+import { ToggleButton } from '@astryxdesign/core/ToggleButton';
+import { Toolbar } from '@astryxdesign/core/Toolbar';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconCameraRotate, IconMessage, IconMicrophone, IconMicrophoneOff, IconPhone, IconPhoneOff, IconSubtitles, IconVideo, IconVideoOff, } from '@tabler/icons-react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { InkWaveform } from "../components/InkWaveform.js";
+import { useLiveRunnerModel } from "../components/live/use-live-runner-model.js";
+import { NO_FOCUS_RING } from "./ChatComposerBar.js";
+import { liveStateLabel } from "./labels.js";
+import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
+import { SidePanel, SidePanelHeader, SidePanelToggle, useSidePanel } from "./SidePanel.js";
+import { ApprovalCard, AuthChallengeCard } from "./ToolGateCard.js";
+import { DEFAULT_CHAT_MAX_WIDTH } from "./TheoremChat.js";
+import { TheoremThemeProvider } from "./theme.js";
+import { useTraceInspector, WithTrace } from "./TraceInspectorPanel.js";
+/** The waveform's box: it rests on the stage floor rather than filling the stage. */
+const WAVE_MAX_WIDTH = 720;
+const WAVE_HEIGHT = 320;
+/**
+ * Live (voice / video) runner on Astryx. Before a call: a landing like the
+ * chat's, offering a voice or video call. In a call: the agent tag and state
+ * over the ink waveform, captions in a right-hand chat column, call controls
+ * in a toolbar, and tool gates in a dialog. Offers the trace inspector when
+ * the profile records traces.
+ */
+export function LiveRunner({ theme, mode, labels, ...props }) {
+    return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(LiveRunnerBody, { ...props }) }) }));
+}
+function LiveRunnerBody({ iface, connection, trace }) {
+    const t = useLabels();
+    const model = useLiveRunnerModel(iface, connection);
+    // Both panels size against the whole live layout, so a third means the same for each.
+    const layoutRef = useRef(null);
+    const inspector = useTraceInspector(iface, model.traces, trace);
+    const captions = useSidePanel(layoutRef, true);
+    const captionLabels = {
+        name: t('@theorem.panel.captions.name'),
+        show: t('@theorem.panel.captions.show'),
+        hide: t('@theorem.panel.captions.hide'),
+        resize: t('@theorem.panel.captions.resize'),
+    };
+    const captionsToggle = (_jsx(SidePanelToggle, { labels: captionLabels, icon: _jsx(Icon, { icon: IconMessage }), panelId: captions.id, open: captions.open, onToggle: captions.toggle }));
+    if (!model.callStarted) {
+        return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", header: _jsx(SidePanelHeader, { children: inspector.toggle }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(LiveLanding, { model: model }) }) }) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", header: _jsxs(SidePanelHeader, { children: [captionsToggle, inspector.toggle] }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(Layout, { height: "fill", end: _jsx(SidePanel, { id: captions.id, labels: captionLabels, resizable: captions.resizable, open: captions.open, padding: 0, children: _jsx(LiveCaptions, { model: model }) }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(VStack, { height: "100%", paddingInline: 3, paddingBlockEnd: 3, children: _jsx(LiveStage, { model: model }) }) }) }) }) }) }), _jsx(LiveToolGateDialog, { prompt: model.gatePrompt, onResolve: model.resolveGateDecision })] }));
+}
+/**
+ * Before a call: the chat landing's greeting, with call buttons where the
+ * composer would be. Video starts camera and mic together.
+ */
+function LiveLanding({ model }) {
+    const t = useLabels();
+    return (_jsx(VStack, { minHeight: "100%", vAlign: "center", gap: 8, paddingInline: 3, children: _jsx(Center, { axis: "horizontal", width: "100%", children: _jsxs(VStack, { width: "100%", maxWidth: DEFAULT_CHAT_MAX_WIDTH, gap: 8, children: [_jsxs(VStack, { gap: 1, children: [_jsx(Text, { type: "large", as: "h2", children: t('@theorem.agent.handle', { handle: model.handle }) }), _jsx(Text, { type: "display-2", as: "h1", children: t('@theorem.live.greeting') })] }), _jsxs(HStack, { gap: 2, wrap: "wrap", children: [_jsx(Button, { label: t(model.voiceAvailable ? '@theorem.live.start_voice_call' : '@theorem.live.start_call'), variant: "primary", icon: _jsx(Icon, { icon: IconPhone }), onClick: () => model.startCall({ video: false }) }), model.videoAvailable ? (_jsx(Button, { label: t('@theorem.live.start_video_call'), variant: "secondary", icon: _jsx(Icon, { icon: IconVideo }), onClick: () => model.startCall({ video: true }) })) : null] })] }) }) }));
+}
+/**
+ * The agent tag and state over the resting waveform, then the call controls,
+ * all in one column the waveform's width.
+ */
+function LiveStage({ model }) {
+    const t = useLabels();
+    const ref = useEnterMotion();
+    return (_jsx(VStack, { ref: ref, height: "100%", hAlign: "center", children: _jsxs(VStack, { width: "100%", maxWidth: WAVE_MAX_WIDTH, height: "100%", gap: 3, children: [_jsxs(VStack, { gap: 0.5, children: [_jsx(Text, { type: "label", color: "secondary", children: t('@theorem.agent.handle', { handle: model.handle }) }), _jsx(Text, { size: "sm", color: "secondary", children: liveStateLabel(t, model.liveState, model.activeTool) })] }), model.failure ? _jsx(Banner, { status: "error", title: model.failure.error }) : null, model.sessionEnded ? _jsx(Banner, { status: "info", title: model.sessionEnded }) : null, _jsx(StackItem, { size: "fill", children: _jsx(VStack, { height: "100%", vAlign: "end", children: _jsx(VStack, { width: "100%", height: WAVE_HEIGHT, style: { color: 'var(--color-icon-primary)' }, "aria-hidden": "true", children: _jsx(InkWaveform, { status: model.status, inputLevel: model.inputLevel, outputLevel: model.outputLevel, toolActive: model.toolActive, variant: "hero" }) }) }) }), _jsx(LiveControls, { model: model })] }) }));
+}
+/**
+ * Eases the call view in from the landing: Astryx has no enter-transition
+ * helper, so this animates with its `--duration-medium` / `--ease-standard`.
+ */
+function useEnterMotion() {
+    const ref = useRef(null);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el || globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches)
+            return;
+        const tokens = getComputedStyle(el);
+        const duration = Number.parseFloat(tokens.getPropertyValue('--duration-medium')) || 410;
+        el.animate([
+            { opacity: 0, transform: 'translateY(8px)' },
+            { opacity: 1, transform: 'none' },
+        ], { duration, easing: tokens.getPropertyValue('--ease-standard').trim() || 'ease-out' });
+    }, []);
+    return ref;
+}
+/**
+ * Mic, camera, text and call controls, centred under the stage. Icons show
+ * what a click does, as End call does: a slash means "turn this off".
+ */
+function LiveControls({ model }) {
+    const t = useLabels();
+    const inactive = !model.sessionActive;
+    const controls = [];
+    if (model.voiceAvailable) {
+        controls.push(_jsx(ToggleButton, { label: t('@theorem.live.microphone'), tooltip: t(model.isMuted ? '@theorem.live.unmute' : '@theorem.live.mute'), isIconOnly: true, isPressed: !model.isMuted, isDisabled: inactive, icon: _jsx(Icon, { icon: IconMicrophone }), pressedIcon: _jsx(Icon, { icon: IconMicrophoneOff }), onPressedChange: model.handleToggleMic }, "mic"));
+    }
+    if (model.videoAvailable) {
+        controls.push(_jsx(ToggleButton, { label: t('@theorem.live.camera'), tooltip: t(model.isVideoOn ? '@theorem.live.camera_off' : '@theorem.live.camera_on'), isIconOnly: true, isPressed: model.isVideoOn, isDisabled: inactive, icon: _jsx(Icon, { icon: IconVideo }), pressedIcon: _jsx(Icon, { icon: IconVideoOff }), onPressedChange: () => {
+                void model.handleToggleVideo();
+            } }, "video"));
+        if (model.isVideoOn) {
+            controls.push(_jsx(IconButton, { label: t('@theorem.live.flip_camera'), tooltip: t('@theorem.live.flip_camera'), variant: "ghost", isDisabled: inactive, icon: _jsx(Icon, { icon: IconCameraRotate }), onClick: () => {
+                    void model.handleFlipCamera();
+                } }, "flip"));
+        }
+    }
+    controls.push(model.canRestart ? (_jsx(IconButton, { label: t('@theorem.live.start_call'), tooltip: t('@theorem.live.start_call'), variant: "primary", icon: _jsx(Icon, { icon: IconPhone }), onClick: () => {
+            void model.handleRestart();
+        } }, "call")) : (_jsx(IconButton, { label: t('@theorem.live.end_call'), tooltip: t('@theorem.live.end_call'), variant: "destructive", isDisabled: inactive, icon: _jsx(Icon, { icon: IconPhoneOff }), onClick: model.handleEnd }, "call")));
+    return (_jsx(Toolbar, { label: t('@theorem.live.controls'), dividers: ['top'], centerContent: _jsx(HStack, { gap: 2, vAlign: "center", children: controls }) }));
+}
+/**
+ * Captions as a chat column: committed turns, then the interim lines still
+ * being heard, and the text composer in its dock when the profile takes text.
+ */
+function LiveCaptions({ model }) {
+    const t = useLabels();
+    const { interimAgent } = model.captions;
+    const agentName = t('@theorem.agent.handle', { handle: model.handle });
+    const composer = model.textAvailable ? (_jsx(ChatComposer, { style: NO_FOCUS_RING, value: model.textDraft, onChange: model.setTextDraft, onSubmit: model.handleSendText, isDisabled: !model.sessionActive, placeholder: t('@theorem.composer.placeholder', { handle: model.handle }), input: _jsx(ChatComposerInput, {}), sendButton: _jsx(ChatSendButton, {}) })) : null;
+    const messages = [
+        ...model.pastCalls.flatMap((turns, call) => [
+            ...turns.map((turn) => captionMessage(`${String(call)}:${turn.id}`, turn.role, turn.text, agentName)),
+            _jsx(ChatSystemMessage, { variant: "divider", children: t('@theorem.live.new_session') }, `session-${String(call + 1)}`),
+        ]),
+        ...captionMessages(model.captions, agentName),
+    ];
+    // The empty state goes in ChatLayout's slot, which centres it; the list's
+    // own slot sits under its bottom-align spacer. ChatLayout flexes to fill the
+    // stack below any video preview.
+    return (_jsxs(VStack, { height: "100%", children: [model.videoPreview ? (_jsx(LiveVideoPreview, { video: model.videoPreview, facingMode: model.videoFacingMode })) : null, _jsx(ChatLayout, { composer: composer, emptyState: _jsx(EmptyState, { icon: _jsx(Icon, { icon: IconSubtitles, size: "lg", color: "secondary" }), title: t('@theorem.panel.captions.empty.title'), description: t('@theorem.panel.captions.empty.description'), isCompact: true }), children: messages.length > 0 ? (_jsx(ChatMessageList, { isStreaming: interimAgent !== '', children: messages })) : null })] }));
+}
+/** The current call's committed turns, then the lines still being heard. */
+function captionMessages({ turns, interimUser, interimAgent }, agentName) {
+    const messages = turns.map((turn) => captionMessage(turn.id, turn.role, turn.text, agentName));
+    if (interimUser)
+        messages.push(captionMessage('interim-user', 'user', interimUser, agentName));
+    if (interimAgent)
+        messages.push(captionMessage('interim-agent', 'agent', interimAgent, agentName));
+    return messages;
+}
+function captionMessage(key, role, text, agentName) {
+    return role === 'user' ? (_jsx(ChatMessage, { sender: "user", children: _jsx(ChatMessageBubble, { children: text }) }, key)) : (_jsx(ChatMessage, { sender: "assistant", name: agentName, children: _jsx(Text, { children: text }) }, key));
+}
+/**
+ * The camera preview, at the top of the captions panel. The capture element comes
+ * from the session client, so it is mounted imperatively; it sits one level
+ * below AspectRatio, so it carries its own fill and mirror styles.
+ */
+function LiveVideoPreview({ video, facingMode }) {
+    const t = useLabels();
+    const hostRef = useRef(null);
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host)
+            return;
+        Object.assign(video.style, { width: '100%', height: '100%', objectFit: 'cover', display: 'block' });
+        host.replaceChildren(video);
+        return () => {
+            if (video.parentElement === host)
+                host.removeChild(video);
+        };
+    }, [video]);
+    useEffect(() => {
+        video.style.transform = facingMode === 'user' ? 'scaleX(-1)' : '';
+    }, [video, facingMode]);
+    return (_jsx(AspectRatio, { ratio: 4 / 3, fit: "cover", children: _jsx("div", { ref: hostRef, "aria-label": t('@theorem.live.camera_preview'), role: "img" }) }));
+}
+/** Tool approvals and credential prompts, as a dialog that must be answered. */
+function LiveToolGateDialog({ prompt, onResolve, }) {
+    return (_jsx(Dialog, { isOpen: prompt !== null, purpose: "required", width: 480, 
+        // "required" disables dismissal; should one slip through, it denies.
+        onOpenChange: (open) => {
+            if (!open)
+                onResolve({ action: 'deny' });
+        }, children: prompt ? (prompt.gate.kind === 'auth' ? (_jsx(AuthChallengeCard, { gate: prompt.gate, toolName: prompt.gate.tool, onAuthenticated: (secret) => {
+                onResolve({ action: 'auth', secret });
+            } })) : (_jsx(ApprovalCard, { gate: prompt.gate, toolName: prompt.gate.tool, input: prompt.input, onDecision: (action) => {
+                onResolve({ action });
+            } }))) : null }));
+}

package/ui/SchemaFields.d.ts

@@ -0,0 +1,10 @@
+import { type JsonSchema } from '../client/schema-fields.ts';
+import { type Edit as StateEdit } from './StateFields.tsx';
+/**
+ * A tool's request as a form drawn from its input schema: each field the
+ * input its type asks for, labelled by its title or key and described by its
+ * description. Optional fields left empty aren't sent.
+ */
+export declare function SchemaFields({ schema, value, onChange }: StateEdit<Record<string, unknown>> & {
+    schema: JsonSchema;
+}): import("react").JSX.Element;

package/ui/SchemaFields.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckboxList, CheckboxListItem } from '@astryxdesign/core/CheckboxList';
+import { DateInput } from '@astryxdesign/core/DateInput';
+import { Grid } from '@astryxdesign/core/Grid';
+import { HStack } from '@astryxdesign/core/HStack';
+import { NumberInput } from '@astryxdesign/core/NumberInput';
+import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl';
+import { Selector } from '@astryxdesign/core/Selector';
+import { Slider } from '@astryxdesign/core/Slider';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Switch } from '@astryxdesign/core/Switch';
+import { TextArea } from '@astryxdesign/core/TextArea';
+import { TextInput } from '@astryxdesign/core/TextInput';
+import { Tokenizer } from '@astryxdesign/core/Tokenizer';
+import { VStack } from '@astryxdesign/core/VStack';
+import { useState } from 'react';
+import { blankRow, schemaFields, withField } from "../client/schema-fields.js";
+import { isRow, json } from "../client/shaped-data.js";
+import { useLabels } from "./labels-provider.js";
+import { AddRow, Group, Labelled, RemoveRow } from "./StateFields.js";
+const NO_SUGGESTIONS = { search: () => [], bootstrap: () => [] };
+const CODE_FONT = { '--font-family-body': 'var(--font-family-code)' };
+/** A field whose input carries no label of its own, labelled as one. */
+function Described({ field, children }) {
+    return (_jsx(Labelled, { label: field.label, isRequired: field.isRequired, description: field.description, children: children }));
+}
+/** A field the schema doesn't shape (no type, a union, a free object), as its JSON. */
+function JsonField({ field, value, onChange }) {
+    const t = useLabels();
+    const [text, setText] = useState(() => (value === undefined ? '' : json(value)));
+    const [isValid, setValid] = useState(true);
+    return (_jsx(TextArea, { label: field.label, description: field.description, isRequired: field.isRequired, size: "sm", rows: 3, value: text, hasSpellCheck: false, status: isValid ? undefined : { type: 'error', message: t('@theorem.decision.invalid_json') }, style: CODE_FONT, onChange: (next) => {
+            setText(next);
+            if (next.trim() === '') {
+                setValid(true);
+                onChange(undefined);
+                return;
+            }
+            try {
+                onChange(JSON.parse(next));
+                setValid(true);
+            }
+            catch {
+                setValid(false);
+            }
+        } }));
+}
+/** A list of objects: each row its own fields, removable, and one more at the end. */
+function RowsField({ field, item, value, onChange }) {
+    const rows = Array.isArray(value) ? value : [];
+    return (_jsx(Group, { label: field.label, isRequired: field.isRequired, description: field.description, children: _jsxs(VStack, { gap: 3, children: [rows.map((row, index) => (_jsxs(HStack, { gap: 2, vAlign: "start", children: [_jsx(StackItem, { size: "fill", children: _jsx(ObjectFields, { schema: item, value: isRow(row) ? row : {}, onChange: (next) => onChange(rows.map((old, at) => (at === index ? next : old))) }) }), _jsx(RemoveRow, { index: index, onRemove: () => onChange(rows.filter((_, at) => at !== index)) })] }, index))), _jsx(AddRow, { field: field.label, onAdd: () => onChange([...rows, blankRow(item)]) })] }) }));
+}
+function common(field) {
+    return { label: field.label, description: field.description, isRequired: field.isRequired, size: 'sm' };
+}
+/** One of a few options as segments; more as a menu. */
+function ChoiceField({ field, options, isMenu, value, onChange }) {
+    if (isMenu) {
+        return _jsx(Selector, { ...common(field), options: options, value: typeof value === 'string' ? value : undefined, hasSearch: options.length > 10, onChange: onChange });
+    }
+    return (_jsx(Described, { field: field, children: _jsx(HStack, { children: _jsx(SegmentedControl, { label: field.label, size: "sm", value: typeof value === 'string' ? value : '', onChange: onChange, children: options.map((option) => (_jsx(SegmentedControlItem, { value: option, label: option }, option))) }) }) }));
+}
+function TextField({ field, isLong, type, value, onChange }) {
+    const text = typeof value === 'string' ? value : '';
+    return isLong ? _jsx(TextArea, { ...common(field), rows: 3, value: text, onChange: onChange }) : _jsx(TextInput, { ...common(field), type: type, value: text, onChange: onChange });
+}
+/** A list of words or numbers as tokens. */
+function WordsField({ field, value, onChange }) {
+    const t = useLabels();
+    const words = Array.isArray(value) ? value : [];
+    return (_jsx(Tokenizer, { ...common(field), value: words.map((word, index) => ({ id: `${String(index)}:${String(word)}`, label: String(word) })), searchSource: NO_SUGGESTIONS, hasCreate: true, debounceMs: 0, placeholder: t('@theorem.decision.add_value'), onChange: (items) => 
+        // Numbers stay numbers when every word reads as one and the list held numbers.
+        onChange(items.map((item) => (typeof words[0] === 'number' && Number.isFinite(Number(item.label)) ? Number(item.label) : item.label))) }));
+}
+/** Each control's input, as the schema asks for it. */
+const CONTROLS = {
+    choice: ({ field, control, value, onChange }) => (_jsx(ChoiceField, { field: field, options: control.options, isMenu: control.isMenu, value: value, onChange: onChange })),
+    range: ({ field, control, value, onChange }) => (_jsx(Slider, { label: field.label, description: field.description, isRequired: field.isRequired, min: control.min, max: control.max, step: 1, value: typeof value === 'number' ? value : control.min, valueDisplay: "text", onChange: onChange })),
+    number: ({ field, control, value, onChange }) => (_jsx(NumberInput, { ...common(field), value: typeof value === 'number' ? value : undefined, min: control.min, max: control.max, isIntegerOnly: control.isInteger, isWheelEnabled: false, onChange: (next) => onChange(next ?? undefined) })),
+    switch: ({ field, value, onChange }) => _jsx(Switch, { label: field.label, description: field.description, value: value === true, onChange: onChange }),
+    date: ({ field, value, onChange }) => (_jsx(DateInput, { ...common(field), value: typeof value === 'string' ? value : undefined, onChange: onChange })),
+    text: ({ field, control, value, onChange }) => _jsx(TextField, { field: field, isLong: control.isLong, type: control.type, value: value, onChange: onChange }),
+    choices: ({ field, control, value, onChange }) => (_jsx(CheckboxList, { label: field.label, description: field.description, value: Array.isArray(value) ? value.filter((entry) => typeof entry === 'string') : [], onChange: onChange, children: control.options.map((option) => (_jsx(CheckboxListItem, { label: option, value: option }, option))) })),
+    words: ({ field, value, onChange }) => _jsx(WordsField, { field: field, value: value, onChange: onChange }),
+    rows: ({ field, control, value, onChange }) => _jsx(RowsField, { field: field, item: control.item, value: value, onChange: onChange }),
+    group: ({ field, control, value, onChange }) => (_jsx(Group, { label: field.label, isRequired: field.isRequired, description: field.description, children: _jsx(ObjectFields, { schema: control.schema, value: isRow(value) ? value : {}, onChange: onChange }) })),
+    json: ({ field, value, onChange }) => _jsx(JsonField, { field: field, value: value, onChange: onChange }),
+};
+function Field({ field, value, onChange }) {
+    const control = CONTROLS[field.control.kind];
+    return control({ field, control: field.control, value, onChange });
+}
+/** Room a short field takes: numbers, dates, menus and one-line text sit side by side. */
+const SHORT_FIELD_PX = 200;
+/** Segments whose labels run this long in all still fit a short field's width. */
+const SHORT_SEGMENT_CHARS = 18;
+/** A field that reads in a column's width; the rest take the whole row. */
+function isShort({ control }) {
+    switch (control.kind) {
+        case 'number':
+        case 'switch':
+        case 'date':
+            return true;
+        case 'choice':
+            return control.isMenu || control.options.join('').length <= SHORT_SEGMENT_CHARS;
+        case 'text':
+            return !control.isLong;
+        default:
+            return false;
+    }
+}
+function ObjectFields({ schema, value, onChange }) {
+    return (_jsx(Grid, { columns: { minWidth: SHORT_FIELD_PX, repeat: 'fill' }, gap: 3, children: schemaFields(schema).map((field) => (_jsx("div", { style: isShort(field) ? { minWidth: 0, alignSelf: 'end' } : { gridColumn: '1 / -1', minWidth: 0 }, children: _jsx(Field, { field: field, value: value[field.key], onChange: (next) => onChange(withField(value, field.key, next)) }) }, field.key))) }));
+}
+/**
+ * A tool's request as a form drawn from its input schema: each field the
+ * input its type asks for, labelled by its title or key and described by its
+ * description. Optional fields left empty aren't sent.
+ */
+export function SchemaFields({ schema, value, onChange }) {
+    return _jsx(ObjectFields, { schema: schema, value: value, onChange: onChange });
+}

package/ui/ShapedData.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+export type ShapedDataProps = {
+    value: unknown;
+    title?: string;
+    /** Drawn above the data in its data view (a tool result's figures and charts); a render that throws falls back to the JSON with it. */
+    lead?: ReactNode;
+    /** Top-level fields the lead already shows: the data view leaves them out, the JSON keeps them. */
+    ledKeys?: readonly string[];
+};
+/** A tool call's input, output or failure, or a structured reply, with a switch to its JSON. */
+export declare function ShapedData({ value: raw, title, lead, ledKeys }: ShapedDataProps): import("react").JSX.Element;

package/ui/ShapedData.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeBlock } from '@astryxdesign/core/CodeBlock';
+import { Collapsible, CollapsibleGroup } from '@astryxdesign/core/Collapsible';
+import { HStack } from '@astryxdesign/core/HStack';
+import { useLocale } from '@astryxdesign/core/i18n';
+import { Link } from '@astryxdesign/core/Link';
+import { List, ListItem } from '@astryxdesign/core/List';
+import { Markdown } from '@astryxdesign/core/Markdown';
+import { MetadataList, MetadataListItem } from '@astryxdesign/core/MetadataList';
+import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl';
+import { Table } from '@astryxdesign/core/Table';
+import { Text } from '@astryxdesign/core/Text';
+import { Token } from '@astryxdesign/core/Token';
+import { VStack } from '@astryxdesign/core/VStack';
+import { Component, useMemo, useState } from 'react';
+import { fieldLabel, fieldReading, isPlain, isProse, isRow, json, MAX_ROWS, plainReading, rowHeading, shapeOf, splitFields, unpacked, withUnit, } from "../client/shaped-data.js";
+import { useLabels } from "./labels-provider.js";
+/** Each way a plain value reads, drawn. */
+const READINGS = {
+    none: () => _jsx(Text, { color: "secondary", children: "\u2014" }),
+    boolean: ({ value }, _, t) => t(value ? '@theorem.data.yes' : '@theorem.data.no'),
+    number: ({ value, unit }, formats) => withUnit((Number.isInteger(value) ? formats.integer : formats.decimal).format(value), unit),
+    link: ({ href }) => (_jsx(Link, { href: href, target: "_blank", rel: "noreferrer", children: href })),
+    date: ({ date }, formats) => formats.date.format(date),
+    'date-time': ({ date }, formats) => formats.dateTime.format(date),
+    // Prose (an answer, a summary) is usually Markdown; headings start small, under the section's own.
+    text: ({ text }) => isProse(text) ? (_jsx(Markdown, { density: "compact", headingLevelStart: 4, children: text })) : (_jsx("span", { style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, children: text })),
+};
+function Plain({ value, unit }) {
+    const t = useLabels();
+    const locale = useLocale();
+    const formats = useMemo(() => ({
+        // No grouping: ids and years read as written. Six significant digits: a timing reads 1.40369.
+        integer: new Intl.NumberFormat(locale, { useGrouping: false }),
+        decimal: new Intl.NumberFormat(locale, { useGrouping: false, maximumSignificantDigits: 6 }),
+        dateTime: new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short' }),
+        // A bare date is a calendar day, parsed at UTC midnight: read it in UTC, or it slips a day west of Greenwich.
+        date: new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeZone: 'UTC' }),
+    }), [locale]);
+    const reading = plainReading(value, unit);
+    return READINGS[reading.kind](reading, formats, t);
+}
+/** JSON past this many characters isn't laid out or highlighted in full: the page stays responsive however big the payload. */
+const LARGE_JSON_CHARS = 200_000;
+function Json({ text }) {
+    const code = text.length > LARGE_JSON_CHARS ? `${text.slice(0, LARGE_JSON_CHARS)}\n…` : text;
+    return _jsx(CodeBlock, { code: code, language: "json", hasLanguageLabel: false, size: "sm", width: "100%" });
+}
+/** Past MAX_ROWS, a note that the rest are in the JSON view. */
+function More({ total }) {
+    const t = useLabels();
+    if (total <= MAX_ROWS)
+        return null;
+    return (_jsx(Text, { type: "supporting", color: "secondary", children: t('@theorem.data.more', { count: String(total - MAX_ROWS) }) }));
+}
+function DataTable({ columns, rows, units }) {
+    const tableColumns = columns.map((key, index) => {
+        const { label, unit } = fieldLabel(key, units);
+        return {
+            key: `c${String(index)}`,
+            header: unit ? `${label} (${unit})` : label,
+            renderCell: (row) => _jsx(Plain, { value: row.cells[key] }),
+        };
+    });
+    const data = rows.slice(0, MAX_ROWS).map((cells, index) => ({ id: String(index), cells }));
+    return (_jsxs(VStack, { gap: 1, children: [_jsx(Table, { data: data, columns: tableColumns, idKey: "id", density: "compact", textOverflow: "truncate" }), _jsx(More, { total: rows.length })] }));
+}
+/** A list row's extra fields and tags, at its end. */
+function ListRowEnd({ row }) {
+    if (row.tags.length + row.extras.length === 0)
+        return undefined;
+    return (_jsxs(HStack, { gap: 2, vAlign: "center", children: [row.extras.map(([key, value]) => {
+                const { label, unit } = fieldReading(key, value);
+                return (_jsxs(Text, { type: "supporting", color: "secondary", children: [label, " ", _jsx(Plain, { value: value, unit: unit })] }, key));
+            }), row.tags.map((tag) => (_jsx(Token, { label: tag, size: "sm" }, tag)))] }));
+}
+function DataList({ rows }) {
+    return (_jsxs(VStack, { gap: 1, children: [_jsx(List, { hasDividers: true, density: "compact", children: rows.slice(0, MAX_ROWS).map((row, index) => (_jsx(ListItem
+                // biome-ignore lint/suspicious/noArrayIndexKey: rows have no identity of their own
+                , { label: row.title, description: row.description, href: row.href, target: row.href ? '_blank' : undefined, rel: row.href ? 'noreferrer' : undefined, endContent: _jsx(ListRowEnd, { row: row }) }, index))) }), _jsx(More, { total: rows.length })] }));
+}
+function Rows({ items, depth }) {
+    const t = useLabels();
+    return (_jsxs(VStack, { gap: 1, children: [_jsx(CollapsibleGroup, { type: "multiple", hasDividers: true, density: "compact", children: items.slice(0, MAX_ROWS).map((item, index) => {
+                    const heading = rowHeading(item);
+                    return (_jsx(Collapsible
+                    // biome-ignore lint/suspicious/noArrayIndexKey: rows have no identity of their own
+                    , { value: String(index), trigger: _jsxs(HStack, { gap: 2, vAlign: "center", wrap: "wrap", children: [_jsx(Text, { type: "body", children: heading.title ?? t('@theorem.data.item', { index: String(index + 1) }) }), heading.tags.map((tag) => (_jsx(Token, { label: tag, size: "sm" }, tag)))] }), children: _jsx(Node, { value: heading.rest, depth: depth + 1 }) }, index));
+                }) }), _jsx(More, { total: items.length })] }));
+}
+function Fields({ row, depth, units }) {
+    const { plain, sections } = splitFields(row);
+    const fields = plain.length > 0 && (_jsx(MetadataList, { label: { position: 'start', width: '40%' }, children: plain.map(([key, value]) => {
+            const { label, unit } = fieldReading(key, value, units);
+            return (_jsx(MetadataListItem, { label: label, children: Array.isArray(unpacked(value)) ? _jsx(Node, { value: value, depth: depth + 1 }) : _jsx(Plain, { value: value, unit: unit }) }, key));
+        }) }));
+    return (_jsxs(VStack, { gap: 2, children: [depth > 0 && fields, sections.length > 0 && (_jsx(CollapsibleGroup, { type: "multiple", hasDividers: true, density: "compact", 
+                // The top level's first section starts open: it's usually the payload. The rest wait to be asked for.
+                defaultValue: depth === 0 ? sections.slice(0, 1).map((shown) => shown.key) : [], children: sections.map((shown) => (_jsx(Collapsible, { value: shown.key, trigger: _jsx(Text, { type: "label", children: shown.title }), children: _jsx(VStack, { paddingInlineStart: 3, children: _jsx(Node, { value: shown.value, depth: depth + 1, units: shown.units }) }) }, shown.key))) })), depth === 0 && fields] }));
+}
+/** Each shape a value takes, drawn. */
+const SHAPES = {
+    json: (_, { value }) => _jsx(Json, { text: json(value) }),
+    none: (_, { t }) => _jsx(Text, { color: "secondary", children: t('@theorem.data.none') }),
+    plain: (_, { value }) => (_jsx(Text, { type: "body", children: _jsx(Plain, { value: value }) })),
+    tokens: ({ items }) => (_jsxs(VStack, { gap: 1, children: [_jsx(HStack, { gap: 1, wrap: "wrap", children: items.slice(0, MAX_ROWS).map((item, index) => (_jsx(Token, { label: item === null ? '—' : String(item), size: "sm" }, index))) }), _jsx(More, { total: items.length })] })),
+    list: ({ rows }) => _jsx(DataList, { rows: rows }),
+    table: ({ columns, rows }, { units }) => _jsx(DataTable, { columns: columns, rows: rows, units: units }),
+    rows: ({ items }, { depth }) => _jsx(Rows, { items: items, depth: depth }),
+    fields: ({ row }, { depth, units }) => _jsx(Fields, { row: row, depth: depth, units: units }),
+};
+function Node({ value: raw, depth, units }) {
+    const t = useLabels();
+    const value = unpacked(raw);
+    const shape = shapeOf(value, depth);
+    return SHAPES[shape.kind](shape, { value, depth, units, t });
+}
+/** A render the rules didn't foresee throws into the JSON, never into the transcript. */
+class ShapeBoundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    render() {
+        return this.state.failed ? this.props.fallback : this.props.children;
+    }
+}
+/** A tool call's input, output or failure, or a structured reply, with a switch to its JSON. */
+export function ShapedData({ value: raw, title, lead, ledKeys = [] }) {
+    const t = useLabels();
+    const locale = useLocale();
+    const [view, setView] = useState('data');
+    const value = unpacked(raw);
+    // A plain value reads the same either way; only structure gets the switch.
+    const structured = !isPlain(value);
+    const text = useMemo(() => (structured ? json(value) : ''), [structured, value]);
+    // What the lead hasn't shown; nothing when it showed every field.
+    const rest = useMemo(() => {
+        if (!ledKeys.length || !isRow(value))
+            return value;
+        const left = Object.entries(value).filter(([key]) => !ledKeys.includes(key));
+        return left.length ? Object.fromEntries(left) : undefined;
+    }, [value, ledKeys]);
+    if (text.length > LARGE_JSON_CHARS) {
+        const size = new Intl.NumberFormat(locale, { style: 'unit', unit: 'kilobyte', maximumFractionDigits: 0 }).format(LARGE_JSON_CHARS / 1000);
+        return (_jsxs(VStack, { gap: 2, children: [_jsx(Text, { type: "supporting", color: "secondary", children: title }), _jsx(Text, { type: "supporting", color: "secondary", children: t('@theorem.data.large', { size }) }), _jsx(Json, { text: text })] }));
+    }
+    return (_jsxs(VStack, { gap: 2, children: [_jsxs(HStack, { gap: 2, vAlign: "center", hAlign: "between", children: [_jsx(Text, { type: "supporting", color: "secondary", children: title }), structured && (_jsxs(SegmentedControl, { label: t('@theorem.data.view'), size: "sm", value: view, onChange: (next) => {
+                            setView(next === 'json' ? 'json' : 'data');
+                        }, children: [_jsx(SegmentedControlItem, { value: "data", label: t('@theorem.data.shaped') }), _jsx(SegmentedControlItem, { value: "json", label: t('@theorem.data.json') })] }))] }), view === 'json' && structured ? (_jsx(Json, { text: text })) : (_jsx(ShapeBoundary, { fallback: _jsx(Json, { text: text }), children: _jsxs(VStack, { gap: 3, children: [lead, rest === undefined ? null : _jsx(Node, { value: rest, depth: 0 })] }) }))] }));
+}