@theoremjs/react 0.3.0 → 0.3.1

package/ui/StateFields.js

@@ -1,40 +1,70 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@astryxdesign/core/Button';
 import { FieldLabel } from '@astryxdesign/core/Field';
+import { FileInput } from '@astryxdesign/core/FileInput';
 import { HStack } from '@astryxdesign/core/HStack';
 import { IconButton } from '@astryxdesign/core/IconButton';
+import { Lightbox } from '@astryxdesign/core/Lightbox';
 import { NumberInput } from '@astryxdesign/core/NumberInput';
 import { StackItem } from '@astryxdesign/core/Stack';
 import { Switch } from '@astryxdesign/core/Switch';
 import { Text } from '@astryxdesign/core/Text';
 import { TextArea } from '@astryxdesign/core/TextArea';
 import { TextInput } from '@astryxdesign/core/TextInput';
+import { Thumbnail } from '@astryxdesign/core/Thumbnail';
 import { Tokenizer } from '@astryxdesign/core/Tokenizer';
 import { VStack } from '@astryxdesign/core/VStack';
 import { IconPlus, IconX } from '@tabler/icons-react';
-import { useId, useState } from 'react';
+import { createContext, useContext, useId, useState } from 'react';
+import { IMAGE_ACCEPT, imageSrc } from "../client/decision-images.js";
 import { humanize, isPlain } from "../client/shaped-data.js";
 import { blankLike, isWordList, tableColumns } from "../client/state-fields.js";
+import { useImageReader } from "./DecisionImages.js";
 import { useLabels } from "./labels-provider.js";
+import { useKeyedRows } from "./row-keys.js";
 const NO_SUGGESTIONS = { search: () => [], bootstrap: () => [] };
 /** Text this long, or on several lines, gets a text area. */
 const LONG_TEXT = 48;
+/** A text area's height: one row per line of its text, within `min` and `max`. Wrapped lines do not count. */
+export function textRows(text, min, max) {
+    return Math.min(Math.max(text.split('\n').length, min), max);
+}
+/** The images the state names, and how to change them; a field whose whole text names one shows it. */
+export const StateImages = createContext({ images: {}, onImages: () => { } });
+/** A field that holds an image: the image, and a file input that replaces it. */
+function ImageField({ value, label, isLabelHidden, }) {
+    const t = useLabels();
+    const { images, onImages } = useContext(StateImages);
+    const { read, status } = useImageReader();
+    const [isOpen, setOpen] = useState(false);
+    const src = Object.hasOwn(images, value) ? imageSrc(images[value]) : undefined;
+    return (_jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(Thumbnail, { src: src, alt: label, label: value, onClick: src ? () => setOpen(true) : undefined }), src ? (_jsx(Lightbox, { isOpen: isOpen, onOpenChange: setOpen, media: { src, alt: label, caption: value }, hasZoom: true })) : null, _jsx(StackItem, { size: "fill", children: _jsx(FileInput, { label: label, isLabelHidden: isLabelHidden, accept: IMAGE_ACCEPT, value: null, placeholder: t('@theorem.decision.replace_image'), status: status, statusVariant: "detached", onChange: (files) => {
+                        void read(files).then(([first]) => {
+                            if (first)
+                                onImages({ ...images, [value]: first[1] });
+                        });
+                    } }) })] }));
+}
 /** A string, number, true/false, or null, as its input. */
 function PlainField({ value, onChange, label, isLabelHidden }) {
-    // Decided once, so the field doesn't swap inputs (and lose focus) as the text grows.
+    const { images } = useContext(StateImages);
+    // why: Decided once, so the field doesn't swap inputs (and lose focus) as the text grows or changes.
     const [isLong] = useState(() => typeof value === 'string' && (value.length > LONG_TEXT || value.includes('\n')));
+    const [isImage] = useState(() => typeof value === 'string' && Object.hasOwn(images, value));
+    if (isImage && typeof value === 'string')
+        return _jsx(ImageField, { value: value, label: label, isLabelHidden: isLabelHidden });
     if (typeof value === 'boolean')
         return _jsx(Switch, { label: label, value: value, onChange: onChange });
     if (typeof value === 'number') {
-        return _jsx(NumberInput, { label: label, isLabelHidden: isLabelHidden, size: "sm", value: value, isWheelEnabled: false, onChange: onChange });
+        return (_jsx(NumberInput, { label: label, isLabelHidden: isLabelHidden, size: "sm", value: value, isWheelEnabled: false, onChange: onChange }));
     }
     if (value === null)
-        return _jsx(TextInput, { label: label, isLabelHidden: isLabelHidden, size: "sm", value: "", placeholder: "null", isDisabled: true, onChange: () => { } });
+        return (_jsx(TextInput, { label: label, isLabelHidden: isLabelHidden, size: "sm", value: "", placeholder: "null", isDisabled: true, onChange: () => { } }));
     const text = String(value);
-    return isLong ? (_jsx(TextArea, { label: label, isLabelHidden: isLabelHidden, size: "sm", rows: 2, value: text, onChange: onChange })) : (_jsx(TextInput, { label: label, isLabelHidden: isLabelHidden, size: "sm", value: text, onChange: onChange }));
+    return isLong ? (_jsx(TextArea, { label: label, isLabelHidden: isLabelHidden, size: "sm", rows: textRows(text, 2, 12), value: text, onChange: onChange })) : (_jsx(TextInput, { label: label, isLabelHidden: isLabelHidden, size: "sm", value: text, onChange: onChange }));
 }
 /** Several fields under one name, in the same label a single field has. */
-export function Labelled({ label, isRequired, description, children }) {
+export function Labelled({ label, isRequired, description, children, }) {
     const id = useId();
     return (_jsxs(VStack, { gap: 2, role: "group", "aria-labelledby": id, children: [_jsx(FieldLabel, { label: label, inputID: "", labelID: id, isGroupLabel: true, isRequired: isRequired, description: description }), children] }));
 }
@@ -50,7 +80,9 @@ export function AddRow({ field, onAdd }) {
 /** Removes a list's row, named by its place. */
 export function RemoveRow({ index, onRemove }) {
     const t = useLabels();
-    return (_jsx(IconButton, { label: t('@theorem.decision.remove_item', { item: t('@theorem.data.item', { index: String(index + 1) }) }), size: "sm", variant: "ghost", icon: _jsx(IconX, { size: 14 }), onClick: onRemove }));
+    return (_jsx(IconButton, { label: t('@theorem.decision.remove_item', {
+            item: t('@theorem.data.item', { index: String(index + 1) }),
+        }), size: "sm", variant: "ghost", icon: _jsx(IconX, { size: 14 }), onClick: onRemove }));
 }
 function ObjectFields({ value, onChange }) {
     return (_jsx(VStack, { gap: 3, children: Object.entries(value).map(([key, entry]) => (_jsx(Field, { label: humanize(key), value: entry, onChange: (next) => onChange({ ...value, [key]: next }) }, key))) }));
@@ -58,22 +90,33 @@ function ObjectFields({ value, onChange }) {
 /** A list of words as tokens; any other list as rows, each removable, with one more shaped like the last. */
 function ListField({ value, onChange, label }) {
     const t = useLabels();
+    const keyed = useKeyedRows(value);
     if (isWordList(value)) {
         return (_jsx(Tokenizer, { label: label, size: "sm", value: value.map((word, index) => ({ id: `${String(index)}:${word}`, label: word })), searchSource: NO_SUGGESTIONS, hasCreate: true, debounceMs: 0, placeholder: t('@theorem.decision.add_value'), onChange: (items) => onChange(items.map((item) => item.label)) }));
     }
     const columns = tableColumns(value);
     const add = _jsx(AddRow, { field: label, onAdd: () => onChange([...value, blankLike(value.at(-1))]) });
-    const remove = (index) => _jsx(RemoveRow, { index: index, onRemove: () => onChange(value.filter((_, at) => at !== index)) });
+    const remove = (index) => (_jsx(RemoveRow, { index: index, onRemove: () => {
+            keyed.drop(index);
+            onChange(value.filter((_, at) => at !== index));
+        } }));
     if (columns) {
-        // Rows alike and flat, as ShapedData draws them: a table, one input per cell.
-        const grid = { display: 'grid', gap: 8, alignItems: 'start', gridTemplateColumns: `${columns.map((column) => `minmax(0, ${String(column.weight)}fr)`).join(' ')} auto` };
+        const grid = {
+            display: 'grid',
+            gap: 8,
+            alignItems: 'start',
+            gridTemplateColumns: `${columns.map((column) => `minmax(0, ${String(column.weight)}fr)`).join(' ')} auto`,
+        };
         const rows = value;
-        return (_jsxs(Labelled, { label: label, children: [_jsxs("div", { style: grid, "aria-hidden": true, children: [columns.map((column) => (_jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: humanize(column.key) }, column.key))), _jsx("span", { style: { width: 28 } })] }), rows.map((row, index) => (_jsxs("div", { style: grid, children: [columns.map((column) => (_jsx(PlainField, { label: `${humanize(column.key)} ${String(index + 1)}`, isLabelHidden: true, value: row[column.key] ?? null, onChange: (next) => onChange(rows.map((old, at) => (at === index ? { ...old, [column.key]: next } : old))) }, column.key))), remove(index)] }, index))), add] }));
+        return (_jsxs(Labelled, { label: label, children: [_jsxs("div", { style: grid, "aria-hidden": true, children: [columns.map((column) => (_jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: humanize(column.key) }, column.key))), _jsx("span", { style: { width: 28 } })] }), keyed.rows.map(({ index, key }) => {
+                    const row = rows[index];
+                    return (_jsxs("div", { style: grid, children: [columns.map((column) => (_jsx(PlainField, { label: `${humanize(column.key)} ${String(index + 1)}`, isLabelHidden: true, value: row[column.key] ?? null, onChange: (next) => onChange(rows.map((old, at) => (at === index ? { ...old, [column.key]: next } : old))) }, column.key))), remove(index)] }, key));
+                }), add] }));
     }
-    return (_jsx(Group, { label: label, children: _jsxs(VStack, { gap: 3, children: [value.map((entry, index) => {
+    return (_jsx(Group, { label: label, children: _jsxs(VStack, { gap: 3, children: [keyed.rows.map(({ item: entry, index, key }) => {
                     const item = t('@theorem.data.item', { index: String(index + 1) });
                     const set = (next) => onChange(value.map((old, at) => (at === index ? next : old)));
-                    return (_jsxs(HStack, { gap: 2, vAlign: "start", children: [_jsx(StackItem, { size: "fill", children: isPlain(entry) ? _jsx(PlainField, { label: item, isLabelHidden: true, value: entry, onChange: set }) : _jsx(Field, { label: item, value: entry, onChange: set }) }), remove(index)] }, index));
+                    return (_jsxs(HStack, { gap: 2, vAlign: "start", children: [_jsx(StackItem, { size: "fill", children: isPlain(entry) ? (_jsx(PlainField, { label: item, isLabelHidden: true, value: entry, onChange: set })) : (_jsx(Field, { label: item, value: entry, onChange: set })) }), remove(index)] }, key));
                 }), add] }) }));
 }
 function Field({ value, onChange, label }) {

package/ui/TheoremChat.d.ts

@@ -1,14 +1,15 @@
 import type { DefinedTheme } from '@astryxdesign/core/theme';
 import { type ReactNode, type Ref } from 'react';
-import { type HttpTransportOptions, type TheoremTransport } from '../client/transport.ts';
-import { type ChatSnapshot, type SentTurn } from '../hooks/use-theorem-chat.ts';
+import type { PageTools } from '../client/live/live-page-tool.ts';
+import { type ConversationView, type HttpTransportOptions, type TheoremTransport } from '../client/transport.ts';
+import { type SentTurn, type UseTheoremChatOptions } from '../hooks/use-theorem-chat.ts';
 import type { TheoremLabels } from './labels.ts';
 export type TheoremChatProps = {
     /** Where `createTheoremHandler` is mounted. Default `/api/theorem`. Ignored when `transport` is set. */
     endpoint?: string;
     /** Extra fetch options for the default HTTP transport (auth headers, custom fetch). */
     http?: Omit<HttpTransportOptions, 'endpoint'>;
-    /** Bring your own transport (tests, playgrounds, non-HTTP hosts). */
+    /** Bring your own transport (tests, studios, non-HTTP hosts). */
     transport?: TheoremTransport;
     /** Astryx theme. Omit to inherit the host's `<Theme>` or use `theoremTheme`. */
     theme?: DefinedTheme;
@@ -19,6 +20,32 @@ export type TheoremChatProps = {
      * the host's Astryx `InternationalizationProvider` locale (default `en`).
      */
     labels?: TheoremLabels;
+    /**
+     * Colour code the reply left untagged: a fence with no language is read and, when it is plainly
+     * one of JavaScript, TypeScript, Python, shell, JSON, CSS, HTML, XML, YAML, or Markdown, shown as it.
+     * A fence with a language is never changed. Off by default.
+     */
+    detectCodeLanguage?: boolean;
+    /**
+     * The value chosen for each of the profile's `inputs.slots`, sent with every turn. A slot you
+     * name is fixed to that value; one you leave out gets a selector in the composer bar, beside
+     * the model's, starting at its first allowed value.
+     */
+    slots?: Record<string, string>;
+    /** Told each time the visitor chooses a slot in the composer, with every slot's value. */
+    onSlotsChange?: (slots: Record<string, string>) => void;
+    /**
+     * What the page wants the agent to know: any JSON. The latest value goes with every
+     * turn, and the profile's `inputs.context.from` must list `client`.
+     */
+    context?: unknown;
+    /**
+     * The page's tools, by name: each answers a tool the profile declares with
+     * `answeredBy: 'page'`. The reply waits while the page answers; no one is asked.
+     */
+    pageTools?: PageTools;
+    /** Every event of every turn, as it arrives: also the ones the chat shows nothing for. */
+    onTurnEvent?: UseTheoremChatOptions['onTurnEvent'];
     placeholder?: string;
     /** Shown above the centred composer before the first message. Default: the agent's handle and a prompt. */
     emptyState?: ReactNode;
@@ -31,30 +58,54 @@ export type TheoremChatProps = {
     /** Page scroller when the chat is not its own scroll container (e.g. `document.documentElement`). */
     scrollRef?: React.RefObject<HTMLElement | null>;
     /**
-     * Show the trace in place of the chat, from the host's own control; the
-     * built-in trace toggle then hides. Omit to keep the toggle. Needs a profile
-     * that records traces.
+     * Drive the trace from the host's own control. The built-in toggle hides.
+     * The open trace takes the chat's place, unless this page is inside
+     * `TracePlacement value="panel"`, where it docks. Omit to keep the toggle.
+     * Needs a profile that records traces.
      */
     trace?: boolean;
+    /**
+     * Show what was used, as tokens and cost: each reply's total under it, and
+     * on an agent tool's call row what the agent it ran used. Off by default.
+     */
+    usage?: boolean;
     className?: string;
     style?: React.CSSProperties;
-    /** A conversation to resume, as `onChatChange` reported it. Read once, when the chat mounts. */
-    initialChat?: ChatSnapshot;
     /**
-     * Called with the conversation each time it comes to rest: a turn finished, or a message was
-     * added or removed; never while a reply streams. Keep it to resume the chat later.
+     * The ref of a conversation to resume, as `onConversationChange` reported it. Read once, when
+     * the chat mounts: the chat draws the conversation as the host keeps it.
+     */
+    conversation?: string;
+    /**
+     * The conversation under `conversation` as the host showed it with the ref, as
+     * `startConversation` returns it. Read once, when the chat mounts: the chat draws it at once,
+     * and does not read it from the host again.
      */
-    onChatChange?: (snapshot: ChatSnapshot) => void;
+    conversationView?: ConversationView;
+    /** The text the composer starts with, for the user to send or change. Read once, when the chat mounts. */
+    initialText?: string;
+    /**
+     * Called with each new ref the host issues for the conversation: once the message posts, and
+     * again as the reply's runs are saved. Keep the latest to resume the chat later.
+     */
+    onConversationChange?: (ref: string) => void;
     /** Lets the host send a message as the composer would; see {@link TheoremChatHandle}. */
     chatRef?: Ref<TheoremChatHandle>;
+    /**
+     * `false` leaves the composer out: the chat is the transcript alone, and your own control sends
+     * through `chatRef`. Gates are still answered in the transcript. Default `true`.
+     */
+    composer?: boolean;
 };
 /** What a host can do to a mounted {@link TheoremChat}. */
 export type TheoremChatHandle = {
     /**
-     * Sends `text` as the user, and resolves with the blocks the turn added once the reply is done;
+     * Sends `text` and optional `files` as the user, and resolves with the blocks the turn added once the reply is done;
      * `null` when the chat can't take a message now (a reply is streaming, or waits on a gate).
      */
-    send: (text: string) => Promise<SentTurn | null>;
+    send: (text: string, files?: readonly File[]) => Promise<SentTurn | null>;
+    /** Stops the reply that is streaming, as the composer's stop button does. */
+    stop: () => void;
 };
 /**
  * 50% of the chat's width, but never narrower than 640px (or the full width,
@@ -68,4 +119,4 @@ export declare const DEFAULT_CHAT_MAX_WIDTH = "max(50%, min(100%, 640px))";
  * <TheoremChat endpoint="/api/theorem" />
  * ```
  */
-export declare function TheoremChat({ endpoint, http, transport, theme, mode, labels, ...rest }: TheoremChatProps): import("react").JSX.Element;
+export declare function TheoremChat({ endpoint, http, transport, theme, mode, labels, detectCodeLanguage, ...rest }: TheoremChatProps): import("react").JSX.Element;

package/ui/TheoremChat.js

@@ -3,69 +3,32 @@ import { Banner } from '@astryxdesign/core/Banner';
 import { Center } from '@astryxdesign/core/Center';
 import { ChatLayout } from '@astryxdesign/core/Chat';
 import { Layout, LayoutContent } from '@astryxdesign/core/Layout';
-import { Spinner } from '@astryxdesign/core/Spinner';
 import { Text } from '@astryxdesign/core/Text';
 import { VStack } from '@astryxdesign/core/VStack';
-import { useImperativeHandle, useLayoutEffect, useMemo, useRef, } from 'react';
 import { moveComposerPendingWithinKind, removeComposerPendingMessage, } from '@theoremjs/agents/interface';
-import { createHttpTransport } from "../client/transport.js";
-import { useTheoremChat } from "../hooks/use-theorem-chat.js";
+import { useImperativeHandle, useMemo, useRef, } from 'react';
+import { parseAspectRatio } from "../client/image-output.js";
+import { createHttpTransport, } from "../client/transport.js";
+import { useTheoremChat, } from "../hooks/use-theorem-chat.js";
 import { useTheoremInterface } from "../hooks/use-theorem-interface.js";
 import { ChatComposerBar } from "./ChatComposerBar.js";
-import { parseAspectRatio } from "../client/image-output.js";
 import { ChatTranscript } from "./ChatTranscript.js";
+import { useGlide } from "./glide.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
-import { TheoremThemeProvider } from "./theme.js";
+import { MarkdownPluginsProvider } from "./markdown-plugins.js";
+import { PaneFailure, PaneLoading } from "./PaneState.js";
 import { SidePanelHeader } from "./SidePanel.js";
 import { useTraceInspector, WithTrace } from "./TraceInspectorPanel.js";
+import { TheoremThemeProvider } from "./theme.js";
 /**
  * 50% of the chat's width, but never narrower than 640px (or the full width,
  * whichever is smaller) — so phones and narrow panes get 100%.
  */
 export const DEFAULT_CHAT_MAX_WIDTH = 'max(50%, min(100%, 640px))';
 /** Centres content in a column no wider than `maxWidth`, using Astryx layout props. */
-function ChatColumn({ maxWidth, ref, children }) {
+function ChatColumn({ maxWidth, ref, children, }) {
     return (_jsx(Center, { axis: "horizontal", width: "100%", children: _jsx(VStack, { ref: ref, width: "100%", maxWidth: maxWidth, children: children }) }));
 }
-/** Reads an Astryx duration token ("410ms" / "0.4s") as milliseconds. */
-function tokenMs(value, fallback) {
-    const n = Number.parseFloat(value);
-    if (Number.isNaN(n))
-        return fallback;
-    return value.trim().endsWith('ms') ? n : n * 1_000;
-}
-/**
- * The composer is centred until the first message, then lives in ChatLayout's
- * dock. Astryx has no layout-transition helper, so this eases the jump (FLIP)
- * with Astryx's `--duration-medium` / `--ease-standard` tokens and keeps focus.
- */
-function useComposerGlide(landing, inputRef) {
-    const columnRef = useRef(null);
-    const landingTop = useRef(null);
-    useLayoutEffect(() => {
-        const el = columnRef.current;
-        if (!el)
-            return;
-        if (landing) {
-            landingTop.current = el.getBoundingClientRect().top;
-            return;
-        }
-        const from = landingTop.current;
-        if (from === null)
-            return;
-        landingTop.current = null;
-        inputRef.current?.focus();
-        const delta = from - el.getBoundingClientRect().top;
-        if (delta === 0 || globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches)
-            return;
-        const tokens = getComputedStyle(el);
-        el.animate([{ transform: `translateY(${String(delta)}px)` }, { transform: 'none' }], {
-            duration: tokenMs(tokens.getPropertyValue('--duration-medium'), 410),
-            easing: tokens.getPropertyValue('--ease-standard').trim() || 'ease-out',
-        });
-    });
-    return columnRef;
-}
 /** The composer bar wired to a `useTheoremChat` model. */
 function ChatComposerForChat({ chat, iface, placeholder, inputRef, }) {
     return (_jsx(ChatComposerBar, { iface: iface, draftText: chat.draftText, pendingFiles: chat.pendingFiles, pendingVoice: chat.pendingVoice, pendingMessages: chat.pendingMessages, issues: chat.issues, phase: chat.phase, failure: chat.failure, selectedModel: chat.session.selectedModel, selectedEffort: chat.session.selectedEffort, placeholder: placeholder, inputRef: inputRef, onDraftTextChange: chat.setDraftText, onFilesSelected: (files) => {
@@ -78,7 +41,7 @@ function ChatComposerForChat({ chat, iface, placeholder, inputRef, }) {
             chat.setIssues([]);
         }, onVoiceClear: () => chat.setPendingVoice([]), onSubmit: () => {
             void chat.handleSubmit();
-        }, onStop: chat.handleStop, onMenuAction: chat.handleMenuAction, onGenerationChange: chat.handleGenerationChange, onPendingMove: (id, direction) => {
+        }, onStop: chat.handleStop, onMenuAction: chat.handleMenuAction, onGenerationChange: chat.handleGenerationChange, slotChoices: chat.slotChoices, onPendingMove: (id, direction) => {
             chat.setPendingMessages((prev) => moveComposerPendingWithinKind(prev, id, direction));
         }, onPendingRemove: (id) => {
             chat.setPendingMessages((prev) => removeComposerPendingMessage(prev, id));
@@ -90,44 +53,69 @@ function ChatComposerForChat({ chat, iface, placeholder, inputRef, }) {
                 void chat.handleSendNow(message);
         } }));
 }
-function ChatBody({ transport, iface, placeholder, emptyState, density, maxWidth = DEFAULT_CHAT_MAX_WIDTH, scrollRef, trace, className, style, initialChat, onChatChange, chatRef, }) {
+function ChatBody({ transport, iface, placeholder, emptyState, density, maxWidth = DEFAULT_CHAT_MAX_WIDTH, scrollRef, trace, usage, className, style, conversation, conversationView, initialText, onConversationChange, chatRef, composer: hasComposer = true, slots, onSlotsChange, context, pageTools, onTurnEvent, }) {
     const t = useLabels();
-    const chat = useTheoremChat({ transport, iface, initial: initialChat, onChange: onChatChange });
-    const sendText = chat.sendText;
-    useImperativeHandle(chatRef, () => ({ send: sendText }), [sendText]);
+    const chat = useTheoremChat({
+        transport,
+        iface,
+        conversation,
+        conversationView,
+        initialText,
+        onConversationChange,
+        slots,
+        onSlotsChange,
+        context,
+        pageTools,
+        onTurnEvent,
+    });
+    const { sendText, handleStop } = chat;
+    useImperativeHandle(chatRef, () => ({ send: sendText, stop: handleStop }), [
+        sendText,
+        handleStop,
+    ]);
     const blocks = useMemo(() => [...chat.blocks, ...chat.streamBlocks], [chat.blocks, chat.streamBlocks]);
     const handle = t('@theorem.agent.handle', { handle: iface.identity.handle });
     const landing = blocks.length === 0;
     const inputRef = useRef(null);
-    const composerRef = useComposerGlide(landing, inputRef);
+    const composerRef = useGlide(landing, () => inputRef.current?.focus());
     const inspector = useTraceInspector(iface, transport.traces, trace);
-    const header = _jsx(SidePanelHeader, { children: inspector.toggle });
-    const composer = (_jsx(ChatComposerForChat, { chat: chat, iface: iface, placeholder: placeholder, inputRef: inputRef }));
-    // Before the first message: the composer alone, centred (Astryx AI chat
-    // template landing). paddingInline={3} matches the dock's inset so the
-    // composer keeps its width when it moves.
-    if (landing) {
-        return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { height: "fill", className: className, style: style, header: header, content: _jsx(LayoutContent, { padding: 0, children: _jsxs(VStack, { minHeight: "100%", vAlign: "center", gap: 8, paddingInline: 3, children: [_jsx(ChatColumn, { maxWidth: maxWidth, children: emptyState ?? (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { type: "large", as: "h2", children: handle }), _jsx(Text, { type: "display-2", as: "h1", children: t('@theorem.chat.greeting') })] })) }), _jsx(ChatColumn, { ref: composerRef, maxWidth: maxWidth, children: composer })] }) }) }) }));
-    }
-    // Structure from Astryx's AI chat template: Layout › LayoutContent › ChatLayout,
-    // with the composer in ChatLayout's own dock. The dock leaves 12px under the
-    // composer; paddingBlockEnd={3} adds 12px more for a 24px bottom margin.
-    return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { height: "fill", className: className, style: style, header: header, content: _jsx(LayoutContent, { padding: 0, children: _jsx(VStack, { height: "100%", children: _jsx(ChatLayout, { density: density, scrollRef: scrollRef, composer: _jsx(VStack, { paddingBlockEnd: 3, children: _jsx(ChatColumn, { ref: composerRef, maxWidth: maxWidth, children: composer }) }), children: _jsx(ChatColumn, { maxWidth: maxWidth, children: _jsx(ChatTranscript, { blocks: blocks, handle: handle, streaming: chat.streaming, delivery: chat.delivery, answering: chat.answering, imageOutput: iface.type === 'image' ? { ratio: parseAspectRatio(iface.image.aspectRatio) } : undefined, onToolDecision: (index, action) => {
-                                    void chat.handleToolDecision(index, action);
-                                }, onAuthenticated: (index, secret) => {
-                                    void chat.handleAuthenticated(index, secret);
-                                } }) }) }) }) }) }) }));
+    const header = _jsx(SidePanelHeader, { floating: true, children: inspector.toggle });
+    // why: the composer says when a turn failed. Without one, the chat says it where the composer was.
+    const composer = hasComposer ? (_jsx(ChatComposerForChat, { chat: chat, iface: iface, placeholder: placeholder, inputRef: inputRef })) : (chat.failure && _jsx(Banner, { status: "error", role: "alert", title: chat.failure.error }));
+    const docked = { composer, composerRef, maxWidth };
+    return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { height: "fill", className: className, style: { position: 'relative', ...style }, header: header, content: _jsx(LayoutContent, { padding: 0, children: landing ? (_jsx(ChatLanding, { ...docked, handle: handle, emptyState: emptyState })) : (_jsx(ChatThread, { ...docked, chat: chat, iface: iface, blocks: blocks, handle: handle, density: density, scrollRef: scrollRef, usage: usage })) }) }) }));
+}
+/**
+ * The chat before its first message: the greeting, and the composer under it.
+ * why: paddingInline={3} matches the dock's inset so the composer keeps its width when it moves.
+ */
+function ChatLanding({ composer, composerRef, maxWidth, handle, emptyState, }) {
+    const t = useLabels();
+    return (_jsxs(VStack, { minHeight: "100%", vAlign: "center", gap: 8, paddingInline: 3, children: [_jsx(ChatColumn, { maxWidth: maxWidth, children: emptyState ?? (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { type: "supporting", as: "h2", children: handle }), _jsx(Text, { type: "display-2", as: "h1", children: t('@theorem.chat.greeting') })] })) }), composer && (_jsx(ChatColumn, { ref: composerRef, maxWidth: maxWidth, children: composer }))] }));
+}
+/**
+ * The chat once it has messages: the transcript, with the composer in ChatLayout's own dock.
+ * why: the dock leaves 12px under the composer; paddingBlockEnd={3} adds 12px more for a 24px
+ * bottom margin.
+ */
+function ChatThread({ composer, composerRef, maxWidth, chat, iface, blocks, handle, density, scrollRef, usage, }) {
+    return (_jsx(VStack, { height: "100%", children: _jsx(ChatLayout, { density: density, scrollRef: scrollRef, composer: composer && (_jsx(VStack, { paddingBlockEnd: 3, children: _jsx(ChatColumn, { ref: composerRef, maxWidth: maxWidth, children: composer }) })), children: _jsx(ChatColumn, { maxWidth: maxWidth, children: _jsx(ChatTranscript, { blocks: blocks, handle: handle, streaming: chat.streaming, delivery: chat.delivery, answering: chat.answering, usage: usage, labels: iface.labels, imageOutput: iface.type === 'image'
+                        ? { ratio: parseAspectRatio(iface.image.aspectRatio) }
+                        : undefined, onToolDecision: (index, action) => {
+                        void chat.handleToolDecision(index, action);
+                    }, onAuthenticated: (index, secret) => {
+                        void chat.handleAuthenticated(index, secret);
+                    } }) }) }) }));
 }
 function ChatForTransport(props) {
     const t = useLabels();
     const described = useTheoremInterface(props.transport);
     if (described.status === 'loading')
-        return _jsx(Spinner, { size: "lg", label: t('@theorem.chat.loading') });
-    if (described.status === 'error') {
-        return _jsx(Banner, { status: "error", title: described.failure.error });
-    }
+        return _jsx(PaneLoading, { label: t('@theorem.chat.loading') });
+    if (described.status === 'error')
+        return _jsx(PaneFailure, { title: described.failure.error });
     if (described.iface.type === 'live') {
-        return (_jsx(Banner, { status: "warning", title: t('@theorem.chat.live_unsupported.title'), description: t('@theorem.chat.live_unsupported.description') }));
+        return (_jsx(PaneFailure, { title: t('@theorem.chat.live_unsupported.title'), description: t('@theorem.chat.live_unsupported.description') }));
     }
     return _jsx(ChatBody, { ...props, transport: props.transport, iface: described.iface });
 }
@@ -138,9 +126,9 @@ function ChatForTransport(props) {
  * <TheoremChat endpoint="/api/theorem" />
  * ```
  */
-export function TheoremChat({ endpoint, http, transport, theme, mode, labels, ...rest }) {
-    const resolved = useMemo(() => transport ?? createHttpTransport({ ...http, endpoint }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- `http` identity is caller-owned; endpoint drives reconnection.
-    [transport, endpoint]);
-    return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(ChatForTransport, { ...rest, transport: resolved }) }) }));
+export function TheoremChat({ endpoint, http, transport, theme, mode, labels, detectCodeLanguage, ...rest }) {
+    const httpRef = useRef(http);
+    httpRef.current = http;
+    const resolved = useMemo(() => transport ?? createHttpTransport({ ...httpRef.current, endpoint }), [transport, endpoint]);
+    return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(MarkdownPluginsProvider, { detectCodeLanguage: detectCodeLanguage, children: _jsx(ChatForTransport, { ...rest, transport: resolved }) }) }) }));
 }

package/ui/TheoremDecision.d.ts

@@ -1,31 +1,23 @@
-import type { DefinedTheme } from '@astryxdesign/core/theme';
-import { type CSSProperties } from 'react';
+import { type DecisionImages } from '../client/decision-images.ts';
 import { type DecisionTransport } from '../client/decision-transport.ts';
-import type { HttpOptions } from '../client/transport.ts';
-import type { TheoremLabels } from './labels.ts';
-export type TheoremDecisionProps = {
+import { type ConsolePageProps } from './ConsoleFrame.tsx';
+import { type TheoremDecisionAnswersProps } from './DecisionAnswers.tsx';
+export type TheoremDecisionProps = ConsolePageProps & {
     /** Where `createTheoremDecisionHandler` is mounted. Default `/api/decision`. Ignored when `transport` is set. */
     endpoint?: string;
-    /** Extra fetch options for the default HTTP transport (auth headers, custom fetch). */
-    http?: HttpOptions;
-    /** Bring your own transport (tests, playgrounds, non-HTTP hosts). */
+    /** Bring your own transport (tests, studios, non-HTTP hosts). */
     transport?: DecisionTransport;
     /** The JSON the state field starts with. Default `{}`. */
     defaultState?: string;
-    theme?: DefinedTheme;
-    mode?: 'system' | 'light' | 'dark';
-    /** Replacement lines by locale, for any `@theorem.*` or `@astryx.*` key. */
-    labels?: TheoremLabels;
-    /** Widest the column may grow, as a CSS length. Default `960px`. */
-    maxWidth?: string;
     /**
-     * Show the trace in place of the decision, from the host's own control; the
-     * built-in trace toggle then hides. Omit to keep the toggle. Needs a profile
-     * that records traces.
+     * Images attached when the page opens, by the name the state refers to them by. The visitor
+     * can add and remove more; they travel with each decision.
      */
-    trace?: boolean;
-    className?: string;
-    style?: CSSProperties;
+    defaultImages?: DecisionImages;
+    /** Opens a question where it is set up, such as an editor. Each answer then has a button for it. */
+    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?: TheoremDecisionAnswersProps['questionText'];
 };
 /**
  * Drop-in surface for a decision profile served by `createTheoremDecisionHandler`: