@theoremjs/react 0.0.0-stage → 0.3.1

package/ui/ConsoleFrame.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@astryxdesign/core/Button';
+import { Card } from '@astryxdesign/core/Card';
+import { Center } from '@astryxdesign/core/Center';
+import { HStack } from '@astryxdesign/core/HStack';
+import { useLocale } from '@astryxdesign/core/i18n';
+import { Layout, LayoutContent } from '@astryxdesign/core/Layout';
+import { useResizable } from '@astryxdesign/core/Resizable';
+import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl';
+import { Text } from '@astryxdesign/core/Text';
+import { TextArea } from '@astryxdesign/core/TextArea';
+import { VStack } from '@astryxdesign/core/VStack';
+import { Children, createContext, use, useMemo, useRef, useSyncExternalStore, } from 'react';
+import { useLabels } from "./labels-provider.js";
+import { PanelBody, PanelScroll, RAISED, SidePanel, SidePanelHeader } from "./SidePanel.js";
+import { textRows } from "./StateFields.js";
+import { WithTrace } from "./TraceInspectorPanel.js";
+import { CONSOLE_CARD } from "./trace-patterns.js";
+/** Cards on a flush console. The flat page uses the surface; a raised page uses the card. */
+const FLUSH_CARD = {
+    '--theorem-console-card': 'var(--color-background-muted)',
+};
+/** Below the app shell's drawer breakpoint, where the two columns stack. */
+const NARROW = '(width < 768px)';
+/** Side by side, the panel card is the frame, so the request and response bring no card of their own. */
+const ConsoleChrome = createContext(true);
+function useNarrow() {
+    return useSyncExternalStore((change) => {
+        const query = globalThis.matchMedia(NARROW);
+        query.addEventListener('change', change);
+        return () => {
+            query.removeEventListener('change', change);
+        };
+    }, () => globalThis.matchMedia(NARROW).matches, () => false);
+}
+/**
+ * One column: the request, then the response under it, in the page's own card.
+ * `wide` is a pair stacked on a narrow page, which takes the page's width.
+ */
+function ConsoleSingle({ flush, wide, maxWidth, children, }) {
+    return (_jsx(VStack, { height: "100%", paddingInline: 3, style: flush ? FLUSH_CARD : undefined, children: _jsx(Card, { variant: "transparent", height: "100%", padding: 0, style: flush ? { overflowY: 'auto' } : { ...RAISED, overflowY: 'auto' }, children: _jsx(Center, { axis: "horizontal", width: "100%", minHeight: "100%", children: _jsx(VStack, { width: "100%", maxWidth: wide ? undefined : maxWidth, gap: 3, padding: 4, children: children }) }) }) }));
+}
+/**
+ * A console's page, for decisions and hosts alike: the trace's toggle in the
+ * header, and one raised panel, flush with the host's, scrolling inside.
+ */
+export function ConsoleFrame({ inspector, maxWidth, flush = false, columns = false, requestLabel, className, style, children, }) {
+    const layoutRef = useRef(null);
+    return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", className: className, style: style, header: inspector.toggle ? _jsx(SidePanelHeader, { children: inspector.toggle }) : undefined, content: _jsx(LayoutContent, { padding: 0, isScrollable: false, children: _jsx(ConsoleBody, { layoutRef: layoutRef, flush: flush, columns: columns, maxWidth: maxWidth, requestLabel: requestLabel, children: children }) }) }) }));
+}
+/** The console's panels: a request and response side by side when there is room, else one column. */
+function ConsoleBody({ layoutRef, flush, columns, maxWidth, requestLabel, children, }) {
+    const narrow = useNarrow();
+    // why: Children.count counts a null slot; toArray drops it, which is the child that is actually drawn.
+    const drawn = Children.toArray(children).length;
+    const paired = columns && drawn > 1;
+    if (paired && !narrow) {
+        return (_jsx(ConsoleColumns, { requestLabel: requestLabel, basisWidth: layoutRef.current?.clientWidth ?? 0, children: children }));
+    }
+    return (_jsx(ConsoleSingle, { flush: flush, wide: paired, maxWidth: maxWidth, children: children }));
+}
+/**
+ * The request is the sized panel and the response fills what it leaves, so
+ * one handle keeps the pair at two fifths / three fifths. The request sizes
+ * against this inner layout, not the page, so a trace docked outside the pair
+ * cannot take the request's share.
+ */
+function ConsoleColumns({ requestLabel = 'Request', basisWidth, children, }) {
+    const t = useLabels();
+    const pairRef = useRef(null);
+    // why: a percentage default resolves against a 1200px stand-in until the pair
+    // is measured, and the panel's width transition then eases between the two,
+    // reflowing the request. This layout is already on screen, so the first
+    // width is two fifths of it. 70% leaves the response a readable share, and a
+    // percentage maximum follows the pair when the trace opens.
+    const requestPanel = useResizable({
+        defaultSize: basisWidth > 0 ? Math.round(basisWidth * 0.4) : '40%',
+        minSize: 280,
+        maxSize: '70%',
+        containerRef: pairRef,
+    });
+    const [request, response] = Children.toArray(children);
+    const labels = {
+        name: requestLabel,
+        show: requestLabel,
+        hide: requestLabel,
+        resize: t('@theorem.panel.resize', { name: requestLabel }),
+    };
+    return (_jsx(ConsoleChrome, { value: false, children: _jsx(Layout, { ref: pairRef, height: "fill", start: _jsx(SidePanel, { side: "start", className: "theorem-console-request", labels: labels, resizable: requestPanel, open: true, children: _jsx(PanelScroll, { label: requestLabel, children: request }) }), content: _jsx(LayoutContent, { padding: 0, isScrollable: false, children: _jsx(PanelBody, { inset: "beside", className: "theorem-console-response", children: response }) }) }) }));
+}
+/** One card of a response with several: its request and result sit in it without cards of their own. */
+export function ConsoleSection({ children }) {
+    return (_jsx(Card, { variant: "muted", padding: 0, className: "theorem-console-card", style: CONSOLE_CARD, children: _jsx(ConsoleChrome, { value: false, children: children }) }));
+}
+/** The response. Beside the request it scrolls in the panel; a centred state fills the card, as an empty trace does. */
+export function ResponseColumn({ label, fill = false, children, }) {
+    const framed = use(ConsoleChrome);
+    if (!framed) {
+        return fill ? (children) : (_jsx(PanelScroll, { label: label, padding: 4, children: children }));
+    }
+    return (_jsx(Card, { variant: "muted", padding: fill ? 0 : 4, className: "theorem-console-card", style: CONSOLE_CARD, children: fill ? (children) : (_jsx(VStack, { height: "100%", gap: 3, children: children })) }));
+}
+/** ⌘/Ctrl+Enter runs the console's request. */
+function runShortcut(run) {
+    return (event) => {
+        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            run();
+        }
+    };
+}
+/** The request's card: its heading with the Fields/JSON switch, then the request and its run bar. */
+export function RequestCard({ title, view, hasFields, onView, onRun, children }) {
+    const t = useLabels();
+    const framed = use(ConsoleChrome);
+    const body = (_jsxs(VStack, { gap: 3, padding: framed ? undefined : 4, onKeyDown: runShortcut(onRun), children: [_jsxs(HStack, { gap: 2, hAlign: "between", vAlign: "center", children: [_jsx(Text, { type: "supporting", color: "secondary", as: "h3", children: title }), _jsxs(SegmentedControl, { label: t('@theorem.decision.view'), size: "sm", value: view, onChange: (next) => {
+                            onView(next === 'json' ? 'json' : 'fields');
+                        }, children: [_jsx(SegmentedControlItem, { value: "fields", label: t('@theorem.decision.fields'), isDisabled: !hasFields }), _jsx(SegmentedControlItem, { value: "json", label: t('@theorem.data.json') })] })] }), children] }));
+    if (!framed)
+        return body;
+    return (_jsx(Card, { variant: "muted", padding: 4, className: "theorem-console-card", style: CONSOLE_CARD, children: body }));
+}
+/** The field reads as code: the body font is swapped for the code font inside it. */
+const CODE_FONT = { '--font-family-body': 'var(--font-family-code)' };
+/** The request as JSON text, marked while it doesn't parse. */
+export function JsonRequest({ label, text, isInvalid, onChange, }) {
+    return (_jsx(TextArea, { label: label, isLabelHidden: true, value: text, onChange: onChange, rows: textRows(text, 8, 24), hasSpellCheck: false, status: isInvalid ? { type: 'error' } : undefined, controlStyle: CODE_FONT }));
+}
+/** A note on the request, Stop while it runs, and Run. */
+export function RunBar({ note, isReady, isRunning, runLabel, runningLabel, stopLabel, onRun, onStop, }) {
+    return (_jsxs(HStack, { gap: 3, hAlign: "between", vAlign: "center", children: [_jsx(Text, { type: "supporting", color: "secondary", style: isReady ? undefined : { color: 'var(--color-error)' }, hasTabularNumbers: true, children: note }), _jsxs(HStack, { gap: 2, vAlign: "center", children: [isRunning ? _jsx(Button, { label: stopLabel, variant: "ghost", onClick: onStop }) : null, _jsx(Button, { label: isRunning ? runningLabel : runLabel, variant: "primary", isLoading: isRunning, isDisabled: !isReady, onClick: onRun })] })] }));
+}
+/** A size in bytes as the reader's locale writes it: bytes under a kilobyte, else kilobytes. */
+export function useBytes() {
+    const locale = useLocale();
+    return useMemo(() => {
+        const b = new Intl.NumberFormat(locale, { style: 'unit', unit: 'byte', unitDisplay: 'narrow' });
+        const kb = new Intl.NumberFormat(locale, {
+            style: 'unit',
+            unit: 'kilobyte',
+            unitDisplay: 'narrow',
+            maximumFractionDigits: 1,
+        });
+        return (bytes) => (bytes < 1024 ? b.format(bytes) : kb.format(bytes / 1024));
+    }, [locale]);
+}

package/ui/DecisionAnswers.d.ts

@@ -0,0 +1,53 @@
+import type { DecisionJson, DecisionResult } from '@theoremjs/agents';
+import { type ReactNode } from 'react';
+import { type DecisionImages } from '../client/decision-images.ts';
+import type { DecisionInterface } from '../client/decision-transport.ts';
+export type TheoremDecisionAnswersProps = {
+    iface: DecisionInterface;
+    result: DecisionResult;
+    /** The round trip, for the line under the answers. */
+    elapsedMs?: number | null;
+    /** A newer decision is running: the answers dim until it lands. */
+    isStale?: boolean;
+    /** The images and state the answers were asked about, which box answers are cut from. Without an image, a box is drawn in a plain frame. */
+    asked?: {
+        images: DecisionImages;
+        state: DecisionJson;
+    };
+    /** Opens a question where it is set up. Each answer then has a button that calls it with the question's id. */
+    onQuestion?: (id: string) => void;
+    /** Each question's text by its id, shown under its answer's title. The page is never sent a question's instructions, so it shows only what it is given here. */
+    questionText?: Readonly<Record<string, string>>;
+};
+/** The reader's locale's percent, decimal and dollar formats. */
+export declare function useNumbers(): {
+    percent: Intl.NumberFormat;
+    decimal: Intl.NumberFormat;
+    usd: Intl.NumberFormat;
+};
+/** The option's share as a bar, drawn like the trace's. */
+export declare function Share({ value, isLead }: {
+    value: number;
+    isLead: boolean;
+}): import("react").JSX.Element;
+/**
+ * A console's result as it streams in: dimmed while the next one runs, then
+ * one quiet line for the model, time, tokens, and cost.
+ */
+export declare function ResultStack({ model, usage, elapsedMs, isStale, tokens, children, }: {
+    model: string;
+    usage?: {
+        inputTokens?: number;
+        costUsd?: number;
+    };
+    elapsedMs?: number | null;
+    isStale?: boolean;
+    /** The tokens read, as the console words them. */
+    tokens: (count: number) => string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * 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 declare function TheoremDecisionAnswers({ iface, result, elapsedMs, isStale, asked, onQuestion, questionText, }: TheoremDecisionAnswersProps): import("react").JSX.Element;

package/ui/DecisionAnswers.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ClickableCard } from '@astryxdesign/core/ClickableCard';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { useLocale } from '@astryxdesign/core/i18n';
+import { Lightbox } from '@astryxdesign/core/Lightbox';
+import { Text } from '@astryxdesign/core/Text';
+import { Tooltip } from '@astryxdesign/core/Tooltip';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconPencil } from '@tabler/icons-react';
+import { useEffect, useMemo, useState } from 'react';
+import { boxSource, cropOf, imageSrc, markedBox, } from "../client/decision-images.js";
+import { Arrive, Stream } from "./arrive.js";
+import { CardWall } from "./CardWall.js";
+import { resultMeta } from "./labels.js";
+import { useLabels } from "./labels-provider.js";
+import { ChartCard, TRACE_RADIUS, traceFill } from "./trace-patterns.js";
+const EASE = 'var(--duration-medium) var(--ease-standard)';
+/** Height of a share bar, as the trace draws one. */
+const SHARE_PX = 12;
+/** The reader's locale's percent, decimal and dollar formats. */
+export 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. */
+export 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, aside, detail, answer, }) {
+    const t = useLabels();
+    const n = useNumbers();
+    const options = Object.entries(answer.probabilities).sort(([, a], [, b]) => b - a);
+    return (_jsx(ChartCard, { title: title, aside: aside, detail: detail, 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, aside, detail, 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, aside: aside, detail: detail, 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, aside, detail, answer, }) {
+    const n = useNumbers();
+    return (_jsx(ChartCard, { title: title, aside: aside, detail: detail, value: n.decimal.format(answer.noul) }));
+}
+const BOX_FRAME_HEIGHT = 72;
+const CROP_HEIGHT = 168;
+/** An image's natural size, once the page has loaded it. */
+function useImageSize(src) {
+    const [size, setSize] = useState(null);
+    useEffect(() => {
+        const image = new Image();
+        image.onload = () => {
+            setSize({ width: image.naturalWidth, height: image.naturalHeight });
+        };
+        image.src = src;
+    }, [src]);
+    return size;
+}
+/** A theme colour as the page draws it, for a canvas that cannot read the theme's tokens. */
+function themeColor(element, token) {
+    const shown = element.style.color;
+    element.style.color = `var(${token})`;
+    const color = getComputedStyle(element).color;
+    element.style.color = shown;
+    return color;
+}
+/** The part of the image the box covers, cut out at its own proportions. It opens the whole image with the box outlined. */
+function BoxCrop({ source, box, caption, }) {
+    const t = useLabels();
+    const src = imageSrc(source);
+    const size = useImageSize(src);
+    const [marked, setMarked] = useState(null);
+    if (!size)
+        return null;
+    const crop = cropOf(box);
+    const ratio = (size.width * (box.right - box.left)) / (size.height * (box.bottom - box.top));
+    const open = t('@theorem.decision.open_box');
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { content: open, children: _jsx(ClickableCard, { label: open, padding: 0, onClick: (event) => {
+                        const marks = {
+                            outline: themeColor(event.currentTarget, '--color-accent'),
+                            shade: themeColor(event.currentTarget, '--color-overlay'),
+                        };
+                        void markedBox(src, box, marks).then(setMarked);
+                    }, children: _jsx("div", { role: "img", "aria-label": t('@theorem.decision.box_in'), style: {
+                            position: 'relative',
+                            overflow: 'hidden',
+                            aspectRatio: String(ratio),
+                            height: CROP_HEIGHT,
+                            maxWidth: '100%',
+                            borderRadius: TRACE_RADIUS,
+                        }, children: _jsx("img", { src: src, alt: "", style: {
+                                position: 'absolute',
+                                width: `${String(crop.width)}%`,
+                                height: `${String(crop.height)}%`,
+                                left: `${String(crop.left)}%`,
+                                top: `${String(crop.top)}%`,
+                                maxWidth: 'none',
+                            } }) }) }) }), _jsx(Lightbox, { isOpen: marked !== null, onOpenChange: (isOpen) => {
+                    if (!isOpen)
+                        setMarked(null);
+                }, media: { src: marked ?? src, alt: t('@theorem.decision.box_marked'), caption }, hasZoom: true })] }));
+}
+/** The box cut from the image its question names, or drawn in a frame that stands for the whole image. */
+function BoxAnswer({ title, aside, detail, answer, field, asked, }) {
+    const t = useLabels();
+    const source = asked && boxSource(asked.images, asked.state, field);
+    const n = useNumbers();
+    const { top, bottom, left, right } = answer.box;
+    const edges = t('@theorem.decision.box_edges', {
+        left: n.percent.format(left),
+        top: n.percent.format(top),
+        right: n.percent.format(right),
+        bottom: n.percent.format(bottom),
+    });
+    return (_jsx(ChartCard, { title: title, aside: aside, detail: detail, value: edges, note: t('@theorem.decision.confidence', { percent: n.percent.format(answer.confidence) }), children: source ? (_jsx(BoxCrop, { source: source, box: answer.box, caption: `${title}: ${edges}` })) : (_jsx("div", { "aria-hidden": true, style: {
+                position: 'relative',
+                height: BOX_FRAME_HEIGHT,
+                borderRadius: TRACE_RADIUS,
+                border: '1px solid var(--color-border)',
+            }, children: _jsx("div", { style: {
+                    position: 'absolute',
+                    insetInlineStart: `${String(left * 100)}%`,
+                    insetBlockStart: `${String(top * 100)}%`,
+                    width: `${String((right - left) * 100)}%`,
+                    height: `${String((bottom - top) * 100)}%`,
+                    borderRadius: 2,
+                    background: answerFill(true),
+                    transition: `all ${EASE}`,
+                } }) })) }));
+}
+/** One question's answer in the trace's chart card, titled by the question and its kind. */
+function AnswerCard({ question, answer, asked, onQuestion, detail, }) {
+    const t = useLabels();
+    const title = `${question.id} · ${t(`@theorem.decision.type.${question.type}`)}`;
+    if (!answer)
+        return null;
+    const edit = t('@theorem.decision.edit_question', { question: question.id });
+    const head = {
+        title,
+        detail,
+        aside: onQuestion ? (_jsx(IconButton, { label: edit, tooltip: edit, size: "sm", variant: "ghost", icon: _jsx(Icon, { icon: IconPencil, size: "xsm", color: "secondary" }), onClick: () => {
+                onQuestion(question.id);
+            } })) : undefined,
+    };
+    if (answer.type === 'choice')
+        return _jsx(ChoiceAnswer, { ...head, answer: answer });
+    if (answer.type === 'score')
+        return _jsx(ScoreAnswer, { ...head, answer: answer, labels: question.labels });
+    if (answer.type === 'noul')
+        return _jsx(NumberAnswer, { ...head, answer: answer });
+    return _jsx(BoxAnswer, { ...head, answer: answer, field: question.field, asked: asked });
+}
+/**
+ * A console's result as it streams in: dimmed while the next one runs, then
+ * one quiet line for the model, time, tokens, and cost.
+ */
+export function ResultStack({ model, usage, elapsedMs, isStale, tokens, children, }) {
+    const t = useLabels();
+    const n = useNumbers();
+    return (_jsx(Stream, { children: _jsxs(VStack, { gap: 3, style: { opacity: isStale ? 0.5 : 1, transition: `opacity ${EASE}` }, "aria-busy": isStale, children: [children, _jsx(Arrive, { children: _jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: resultMeta(t, n.usd, { model, usage, elapsedMs, tokens }) }) })] }, elapsedMs ?? 0) }));
+}
+/**
+ * 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, asked, onQuestion, questionText, }) {
+    const t = useLabels();
+    return (_jsx(ResultStack, { model: result.model, usage: result.usage, elapsedMs: elapsedMs, isStale: isStale, tokens: (count) => t('@theorem.decision.tokens', { count }), children: _jsx(CardWall, { minWidth: 260, children: iface.questions.map((question) => (_jsx(Arrive, { children: _jsx(AnswerCard, { question: question, answer: result.answers[question.id], asked: asked, onQuestion: onQuestion, detail: questionText?.[question.id] }) }, question.id))) }) }));
+}

package/ui/DecisionImages.d.ts

@@ -0,0 +1,16 @@
+import { type DecisionImages } from '../client/decision-images.ts';
+/**
+ * Reads each file as an image and hands over the ones that are, with the name of the first that
+ * is not as the refusal to show.
+ */
+export declare function useImageReader(): {
+    read: (files: File | File[] | null) => Promise<[File, import("../../../mod.ts").DecisionAsset][]>;
+    status: {
+        type: "error";
+        message: string;
+    } | undefined;
+};
+/** A drop area under the state: each PNG or JPEG dropped or chosen becomes a field that holds it. */
+export declare function ImageDrop({ onImages, }: {
+    onImages: (files: [File, DecisionImages[string]][]) => void;
+}): import("react").JSX.Element;

package/ui/DecisionImages.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FileInput } from '@astryxdesign/core/FileInput';
+import { useState } from 'react';
+import { IMAGE_ACCEPT, readImage } from "../client/decision-images.js";
+import { useLabels } from "./labels-provider.js";
+/** The files a file input reports, as a list. */
+function asList(files) {
+    if (files === null)
+        return [];
+    return Array.isArray(files) ? files : [files];
+}
+/**
+ * Reads each file as an image and hands over the ones that are, with the name of the first that
+ * is not as the refusal to show.
+ */
+export function useImageReader() {
+    const t = useLabels();
+    const [refused, setRefused] = useState(null);
+    const read = async (files) => {
+        setRefused(null);
+        const held = [];
+        for (const file of asList(files)) {
+            const image = await readImage(file);
+            if (image)
+                held.push([file, image]);
+            else
+                setRefused(file.name);
+        }
+        return held;
+    };
+    const status = refused === null
+        ? undefined
+        : { type: 'error', message: t('@theorem.decision.image_bad', { file: refused }) };
+    return { read, status };
+}
+/** A drop area under the state: each PNG or JPEG dropped or chosen becomes a field that holds it. */
+export function ImageDrop({ onImages, }) {
+    const t = useLabels();
+    const { read, status } = useImageReader();
+    return (_jsx(FileInput, { label: t('@theorem.decision.add_image'), isLabelHidden: true, mode: "dropzone", isMultiple: true, accept: IMAGE_ACCEPT, value: null, placeholder: t('@theorem.decision.add_image_hint'), status: status, statusVariant: "detached", onChange: (files) => {
+            void read(files).then((images) => {
+                if (images.length > 0)
+                    onImages(images);
+            });
+        } }));
+}

package/ui/EmbeddingDocuments.d.ts

@@ -0,0 +1,78 @@
+import { type EmbeddingInput } from '@theoremjs/agents';
+import { type ReactNode } from 'react';
+import { type EmbeddingInputCheck, type EmbeddingMediaPart } from '../client/embedding-input.ts';
+import type { EmbeddingInterface } from '../client/embedding-transport.ts';
+import { type ConsoleView } from './ConsoleFrame.tsx';
+import type { LabelText } from './labels.ts';
+/** The profile's `inputs`, which every request is held to. */
+export type Rules = EmbeddingInterface['inputs'];
+/** A document as the list shows it: what it sends, and the file it came from. */
+export type EmbeddingDocument = {
+    input: EmbeddingInput;
+    from?: string;
+};
+type SplitChoice = 'whole' | 'lines' | 'paragraphs' | 'commas' | 'custom';
+/** What the check says is wrong, about the input it names. */
+export declare function inputIssue(t: LabelText, check: EmbeddingInputCheck, name: string): string | null;
+/**
+ * The documents: pasted text split as chosen, then files and JSON, in that
+ * order. Text files are split as the text is; any other file is one document.
+ */
+export declare function useEmbeddingDocuments(defaultText: string, rules: Rules, defaultDocuments?: readonly EmbeddingDocument[]): {
+    text: string;
+    setText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    choice: SplitChoice;
+    setChoice: import("react").Dispatch<import("react").SetStateAction<SplitChoice>>;
+    separator: string;
+    setSeparator: import("react").Dispatch<import("react").SetStateAction<string>>;
+    documents: EmbeddingDocument[];
+    inputs: EmbeddingInput[];
+    issue: string | null;
+    requests: number;
+    view: ConsoleView;
+    setView: (next: ConsoleView) => void;
+    json: string;
+    jsonInvalid: boolean;
+    setJson: (next: string) => void;
+    addFiles: (files: readonly File[]) => Promise<void>;
+    remove: (at: readonly number[]) => void;
+    /** Where the pasted text's documents end and the removable ones begin. */
+    fromText: number;
+};
+export type EmbeddingDocumentsForm = ReturnType<typeof useEmbeddingDocuments>;
+/** What a document reads as in a list: its text, or its file's name, type, and size. */
+export declare function documentLabel(t: LabelText, bytes: (count: number) => string, document: EmbeddingDocument, number: number): {
+    label: string;
+    detail: string | null;
+};
+/** Where the text is cut, and the separator when it is one of the user's own. */
+/** A file field that reads what is dropped or chosen, and says which files it could not read. */
+export declare function EmbeddingFileDrop({ label, placeholder, accept, isMultiple, onFiles, }: {
+    label: string;
+    placeholder: string;
+    accept: readonly string[];
+    isMultiple?: boolean;
+    onFiles: (files: File[]) => Promise<void>;
+}): import("react").JSX.Element;
+/** One file: its picture above its type, with its name and size on hover and Remove. */
+export declare function FileTile({ part, name, label, onRemove, }: {
+    part: EmbeddingMediaPart;
+    /** The file's name; a query's file keeps none, so its type stands in. */
+    name?: string;
+    label: string;
+    onRemove: () => void;
+}): import("react").JSX.Element;
+/** Text with its file beside it at two thirds and one third, or whichever of them there is. */
+export declare function TextBesideFile({ text, file }: {
+    text: ReactNode;
+    file: ReactNode;
+}): import("react").JSX.Element;
+/** The documents card: text and files as fields, or the inputs as JSON, and Index. */
+export declare function EmbeddingDocuments({ form, rules, isRunning, onRun, onStop, }: {
+    form: EmbeddingDocumentsForm;
+    rules: Rules;
+    isRunning: boolean;
+    onRun: () => void;
+    onStop: () => void;
+}): import("react").JSX.Element;
+export {};