@theoremjs/react 0.0.0-stage → 0.3.1

package/ui/TheoremHost.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Banner } from '@astryxdesign/core/Banner';
+import { EmptyState } from '@astryxdesign/core/EmptyState';
+import { HStack } from '@astryxdesign/core/HStack';
+import { useLocale } from '@astryxdesign/core/i18n';
+import { List, ListItem } from '@astryxdesign/core/List';
+import { Selector, SelectorOption } from '@astryxdesign/core/Selector';
+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 { IconMathFunction, IconWorld } from '@tabler/icons-react';
+import { useMemo, useRef, 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 { toolCallLabel } from "../client/transcript-groups.js";
+import { useSecondTicker } from "../hooks/use-second-ticker.js";
+import { useTheoremHost } from "../hooks/use-theorem-host.js";
+import { Arrive, Stream } from "./arrive.js";
+import { ConsoleFrame, JsonRequest, RequestCard, ResponseColumn, RunBar, } from "./ConsoleFrame.js";
+import { liveDuration, workDuration } from "./labels.js";
+import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
+import { MarkdownPluginsProvider } from "./markdown-plugins.js";
+import { IconMcp } from "./mcp-icon.js";
+import { PaneFailure, PaneLoading } from "./PaneState.js";
+import { SchemaFields } from "./SchemaFields.js";
+import { ApprovalCard, AuthChallengeCard } from "./ToolGateCard.js";
+import { ToolResult } from "./ToolResult.js";
+import { useTraceInspector } from "./TraceInspectorPanel.js";
+import { TheoremThemeProvider } from "./theme.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 };
+}
+/** The kind's icon. The same glyphs the studio uses for a tool's type. */
+const KIND_ICON = {
+    function: IconMathFunction,
+    http: IconWorld,
+    mcp: IconMcp,
+};
+/** The most room a row of the tool menu takes, and the lines of description it shows. */
+const TOOL_MENU_PX = 440;
+const TOOL_MENU_LINES = 2;
+/** Kind and description, shown on the dropdown row and nowhere else. */
+function toolOptionDescription(t, tool) {
+    const kind = t(`@theorem.host.kind.${tool.kind}`);
+    return tool.description ? `${kind} · ${tool.description}` : kind;
+}
+/** A tool's access when it can change things. Its kind stays in the dropdown. */
+function ToolTokens({ tool }) {
+    const t = useLabels();
+    if (tool.access === 'read-only')
+        return null;
+    return (_jsx(HStack, { gap: 1, wrap: "wrap", children: _jsx(Token, { label: t(`@theorem.tool.access.${tool.access}`), size: "sm", color: tool.access === 'destructive' ? 'red' : 'orange' }) }));
+}
+/** The tool's activity while it runs, and its activityPast once it has finished, with the clock beside it. */
+function callActivity(t, call, now) {
+    const label = call.call ? toolCallLabel(call.call) : call.name;
+    const duration = call.isRunning
+        ? liveDuration(t, now - call.startedAt)
+        : call.elapsedMs == null
+            ? null
+            : workDuration(t, call.elapsedMs);
+    return { label, duration };
+}
+/** 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 }) }));
+}
+/** A call is settled once it failed, completed, or stopped running. */
+function callSettled(call) {
+    const state = call.call?.state;
+    return Boolean(hostCallFailure(call)) || state?.phase === 'complete' || !call.isRunning;
+}
+/** A running call with nothing else in the column fills the card, the way an empty trace does. */
+function responseFills(call) {
+    const state = call.call?.state;
+    return !callSettled(call) && state?.phase !== 'gate';
+}
+/** A settled call: its failure or its output, then the activity line once it has stopped. */
+function CallSettled({ call, activity }) {
+    const state = call.call?.state;
+    const failure = hostCallFailure(call);
+    return (_jsx(Stream, { children: _jsxs(VStack, { gap: 3, children: [failure ? (_jsx(Arrive, { children: _jsx(Banner, { status: "error", role: "alert", title: failure.title, description: failure.description }) })) : null, state?.phase === 'complete' ? (_jsx(ToolResult, { output: state.output, parts: state.parts })) : null, call.isRunning ? null : _jsx(Arrive, { children: activity })] }) }));
+}
+/** One call's outcome: its gate, its failure, or its output, then the tool's activity and the time. */
+function CallOutcome({ call, onAnswer, }) {
+    const t = useLabels();
+    const now = useSecondTicker(call.isRunning);
+    const { label, duration } = callActivity(t, call, now);
+    if (responseFills(call))
+        return _jsx(PaneLoading, { label: label, since: call.startedAt });
+    const activity = (_jsx(Text, { size: "sm", color: "secondary", children: duration ? t('@theorem.host.finished', { activity: label, duration }) : label }));
+    return (_jsxs(VStack, { gap: 3, children: [_jsx(CallGate, { call: call, onAnswer: onAnswer }), callSettled(call) ? _jsx(CallSettled, { call: call, activity: activity }) : null] }));
+}
+/** 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,
+                            icon: KIND_ICON[option.kind],
+                            description: toolOptionDescription(t, option),
+                        })), value: tool.name, hasSearch: tools.length > 8, renderOption: (option) => (_jsx("div", { style: { width: TOOL_MENU_PX, maxWidth: '100%', minWidth: 0 }, children: _jsx(SelectorOption, { icon: option.icon, label: option.label, description: option.description && (_jsx(Text, { type: "supporting", color: "secondary", maxLines: TOOL_MENU_LINES, children: option.description })) }) })), onChange: onPick }), _jsx(ToolTokens, { tool: tool })] }), showFields ? (_jsx(SchemaFields
+            // why: 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);
+                } })] }));
+}
+/** Starts the request as a call, and returns its id. Nothing starts while one is on screen running. */
+function startCall(host, tool, check, shown) {
+    if (!tool || !check?.ok || shown?.isRunning)
+        return null;
+    return host.run(tool.name, check.input);
+}
+/** What the console is showing: the picked tool, its request, and the call on screen. */
+function useHostConsole(iface, host) {
+    const t = useLabels();
+    const [picked, setPicked] = useState(iface.tools[0]?.name);
+    const [drafts, setDrafts] = useState({});
+    const [shownId, setShownId] = useState(null);
+    const [view, setView] = useState('fields');
+    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 = () => {
+        const id = startCall(host, tool, check, shown);
+        if (id !== null)
+            setShownId(id);
+    };
+    const pick = (call) => {
+        setPicked(call.name);
+        setDrafts((previous) => ({ ...previous, [call.name]: json(call.input) }));
+        setShownId(call.id);
+    };
+    return { tool, text, shown, earlier, check, view, setView, setPicked, setText, run, pick };
+}
+/** The call on screen, then this page's earlier ones. */
+function HostCalls({ shown, earlier, onAnswer, onPick, }) {
+    return (_jsxs(_Fragment, { children: [shown ? _jsx(CallOutcome, { call: shown, onAnswer: onAnswer }) : null, _jsx(EarlierCalls, { calls: earlier, onPick: onPick })] }));
+}
+/**
+ * The frame's second child. A call, not a component: the frame counts its
+ * children to choose a layout, and no calls yet has to count as none.
+ */
+function hostResponse(columns, label, shown, earlier, calls) {
+    if (!columns)
+        return calls;
+    const alone = earlier.length === 0;
+    if (!shown && alone)
+        return null;
+    return (_jsx(ResponseColumn, { label: label, fill: shown != null && responseFills(shown) && alone, children: calls }));
+}
+function HostBody({ transport, iface, host, maxWidth = '960px', trace, flush, columns = false, className, style, }) {
+    const t = useLabels();
+    const inspector = useTraceInspector(iface, transport.traces, trace);
+    const desk = useHostConsole(iface, host);
+    const { tool, check, shown, earlier } = desk;
+    return (_jsxs(ConsoleFrame, { inspector: inspector, maxWidth: maxWidth, flush: flush, columns: columns, requestLabel: t('@theorem.host.request'), className: className, style: style, children: [tool && check ? (_jsx(ToolRequest, { tools: iface.tools, tool: tool, check: check, text: desk.text, view: desk.view, shown: shown, onText: desk.setText, onPick: desk.setPicked, onView: desk.setView, onRun: desk.run, onStop: host.cancel })) : (_jsx(EmptyState, { title: t('@theorem.host.no_tools') })), hostResponse(columns, t('@theorem.host.response'), shown, earlier, _jsx(HostCalls, { shown: shown, earlier: earlier, onAnswer: host.answer, onPick: desk.pick }))] }));
+}
+function HostForTransport(props) {
+    const t = useLabels();
+    const host = useTheoremHost(props.transport, props.pageTools);
+    if (host.describeFailure)
+        return _jsx(PaneFailure, { title: host.describeFailure.error });
+    if (!host.iface)
+        return _jsx(PaneLoading, { 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, detectCodeLanguage, ...rest }) {
+    const httpRef = useRef(http);
+    httpRef.current = http;
+    const resolved = useMemo(() => transport ?? createHostTransport({ ...httpRef.current, endpoint }), [transport, endpoint]);
+    return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(MarkdownPluginsProvider, { detectCodeLanguage: detectCodeLanguage, children: _jsx(HostForTransport, { ...rest, transport: resolved }) }) }) }));
+}

package/ui/ToolGateCard.d.ts

@@ -0,0 +1,32 @@
+import type { ToolGate } from '@theoremjs/agents/kernel';
+import type { ToolDecisionAction } from '../client/tool-resume.ts';
+export type ToolDecision = ToolDecisionAction;
+/** The widest a gate card gets, in pixels. */
+export declare const GATE_CARD_WIDTH = 400;
+export type ApprovalCardProps = {
+    gate: ToolGate;
+    toolName: string;
+    /** The agent asking, as its name is shown (`@concierge`); the heading names it. */
+    agent?: string;
+    input?: unknown;
+    /** The decision on its way; its button shows loading and the other is disabled until the gate settles. */
+    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,107 @@
+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 { 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";
+/** The widest a gate card gets, in pixels. */
+export const GATE_CARD_WIDTH = 400;
+function formatInput(value) {
+    if (typeof value === 'string')
+        return value;
+    if (value === undefined || value === null)
+        return '';
+    return JSON.stringify(value, null, 2);
+}
+/** 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, agent, input, decided = null, onDecision, }) {
+    const t = useLabels();
+    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, { 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 }) }));
+}
+/** 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;
+        // why: The key goes to the server once; the browser keeps no copy.
+        setSecret('');
+        onAuthenticated?.(value);
+    }
+    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 }) }));
+    }
+    if (props.authType === 'oauth2') {
+        if (!props.authUrl) {
+            return _jsx(Text, { color: "secondary", children: t('@theorem.gate.auth.no_oauth') });
+        }
+        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();
+    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,62 @@
+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 { useLocale } from '@astryxdesign/core/i18n';
+import { Lightbox } from '@astryxdesign/core/Lightbox';
+import { Skeleton } from '@astryxdesign/core/Skeleton';
+import { VStack } from '@astryxdesign/core/VStack';
+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 { 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;
+/** Height a chart card holds while its module loads. */
+const CHART_CARD_PX = 236;
+function Images({ images }) {
+    const [open, setOpen] = useState(null);
+    return (_jsxs(_Fragment, { children: [_jsx(Grid, { columns: { minWidth: IMAGE_CARD_PX, repeat: 'fill' }, gap: 3, children: images.map((image, index) => (_jsx(Arrive, { children: _jsx(ClickableCard, { label: image.alt || 'Open image', padding: 0, onClick: () => setOpen(index), children: _jsx(AspectRatio, { ratio: 4 / 3, fit: "cover", children: _jsx("img", { src: image.src, alt: image.alt, loading: "lazy" }) }) }) }, image.src))) }), _jsx(Lightbox, { isOpen: open !== null, onOpenChange: (isOpen) => {
+                    if (!isOpen)
+                        setOpen(null);
+                }, media: images.map((image) => ({ src: image.src, alt: image.alt })), index: open ?? 0, onIndexChange: setOpen })] }));
+}
+function Figures({ figures }) {
+    const locale = useLocale();
+    const decimal = useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }), [locale]);
+    if (figures.length === 0)
+        return null;
+    return (_jsx(Grid, { columns: { minWidth: 160, repeat: 'fill' }, gap: 3, children: figures.map((figure) => (_jsx(Arrive, { children: _jsx(ChartCard, { title: figure.label, value: withUnit(decimal.format(figure.value), figure.unit) }) }, figure.key))) }));
+}
+/** Charts load with their module; cards hold their place until then. */
+function Charts({ charts }) {
+    if (charts.length === 0)
+        return null;
+    return (_jsx(Suspense, { fallback: _jsx(Grid, { columns: { minWidth: 260, repeat: 'fill' }, gap: 3, children: charts.map((chart) => (_jsx(Arrive, { children: _jsx(Skeleton, { height: CHART_CARD_PX }) }, chart.key))) }), children: _jsx(ToolResultCharts, { charts: charts }) }));
+}
+/** What answers the call, laid out from the output: its figures as stat cards, its series as charts, the images, and audio it returned. */
+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, 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,
+ * 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]);
+    // 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 }));
+}

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,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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 { 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";
+/**
+ * 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(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

@@ -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;