@theoremjs/react 0.3.0 → 0.3.1

package/ui/TheoremDecision.js

@@ -1,16 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Banner } from '@astryxdesign/core/Banner';
-import { Spinner } from '@astryxdesign/core/Spinner';
-import { useLocale } from '@astryxdesign/core/i18n';
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
+import { droppedImages, namedImages, stateFields, } from "../client/decision-images.js";
 import { createDecisionTransport, } from "../client/decision-transport.js";
 import { useTheoremDecision } from "../hooks/use-theorem-decision.js";
+import { ConsoleFrame, JsonRequest, RequestCard, ResponseColumn, RunBar, useBytes, } from "./ConsoleFrame.js";
 import { TheoremDecisionAnswers } from "./DecisionAnswers.js";
-import { ConsoleFrame, JsonRequest, RequestCard, RunBar } from "./ConsoleFrame.js";
+import { ImageDrop } from "./DecisionImages.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
-import { StateFields } from "./StateFields.js";
-import { TheoremThemeProvider } from "./theme.js";
+import { PaneFailure, PaneLoading } from "./PaneState.js";
+import { StateFields, StateImages } from "./StateFields.js";
 import { useTraceInspector } from "./TraceInspectorPanel.js";
+import { TheoremThemeProvider } from "./theme.js";
 /** The field's text as the state a decision sends, measured the way the kernel measures it. */
 function checkState(text, maxBytes) {
     let state;
@@ -27,48 +28,90 @@ function checkState(text, maxBytes) {
         return { ok: false, reason: 'too_large', bytes, state };
     return { ok: true, state, bytes };
 }
-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]);
-}
 function stateNote(t, check, maxBytes, bytes) {
     if (!check.ok) {
         if (check.reason === 'too_large')
             return t('@theorem.decision.too_large', { limit: bytes(maxBytes ?? 0) });
-        return t(check.reason === 'invalid_json' ? '@theorem.decision.invalid_json' : '@theorem.decision.null_state');
+        return t(check.reason === 'invalid_json'
+            ? '@theorem.decision.invalid_json'
+            : '@theorem.decision.null_state');
     }
-    return maxBytes === undefined ? bytes(check.bytes) : t('@theorem.decision.state_size', { size: bytes(check.bytes), limit: bytes(maxBytes) });
+    return maxBytes === undefined
+        ? null
+        : t('@theorem.decision.state_size', { size: bytes(check.bytes), limit: bytes(maxBytes) });
 }
-function DecisionBody({ transport, iface, decision, defaultState = '{}', maxWidth = '960px', trace, className, style }) {
-    const t = useLabels();
-    const bytes = useBytes();
+/** Where a decision stands: nothing asked, asked with nothing back yet, or answered or failed. */
+function decisionPhase(decision) {
+    if (decision.failure || decision.result)
+        return 'settled';
+    return decision.status === 'deciding' ? 'waiting' : 'idle';
+}
+/** The state a decision is asked about, held as text, and the view it is edited in. */
+function useDecisionState(defaultState, maxStateBytes) {
     const [text, setText] = useState(defaultState);
-    const check = checkState(text, iface.maxStateBytes);
-    const note = stateNote(t, check, iface.maxStateBytes, bytes);
-    // Fields while the text parses; JSON to change the shape, or to fix it.
-    const [view, setView] = useState(() => (check.state === undefined ? 'json' : 'fields'));
+    const check = checkState(text, maxStateBytes);
+    const [view, setView] = useState(() => check.state === undefined ? 'json' : 'fields');
     const shown = check.state === undefined ? 'json' : view;
-    const inspector = useTraceInspector(iface, transport.traces, trace);
+    return { text, setText, check, shown, setView };
+}
+/** The state, as fields or JSON, and Decide. */
+function DecisionRequest({ form, iface, images, onImages, note, isRunning, onRun, onStop, }) {
+    const t = useLabels();
+    const { text, setText, check, shown, setView } = form;
+    const withImages = iface.questions.some((question) => question.type === 'box') || Object.keys(images).length > 0;
+    const fields = shown === 'fields' ? check.state : undefined;
+    const named = stateFields(fields);
+    return (_jsxs(RequestCard, { title: t('@theorem.decision.state'), view: shown, hasFields: check.state !== undefined, onView: setView, onRun: onRun, children: [fields !== undefined ? (_jsx(StateImages, { value: { images, onImages }, children: _jsx(StateFields, { label: t('@theorem.decision.state'), value: fields, onChange: (next) => {
+                        setText(JSON.stringify(next, null, 2));
+                    } }) })) : (_jsx(JsonRequest, { label: t('@theorem.decision.state'), text: text, isInvalid: !check.ok, onChange: setText })), withImages && named ? (_jsx(ImageDrop, { onImages: (dropped) => {
+                    const next = droppedImages(dropped, { images, host: iface.images, state: named });
+                    onImages(next.images);
+                    setText(JSON.stringify(next.state, null, 2));
+                } })) : null, _jsx(RunBar, { note: note, isReady: check.ok, isRunning: isRunning, runLabel: t('@theorem.decision.decide'), runningLabel: t('@theorem.decision.deciding'), stopLabel: t('@theorem.decision.stop'), onRun: onRun, onStop: onStop })] }));
+}
+/** What came back: the failure, the answers, or a spinner until the first of either. */
+function DecisionAnswered({ iface, decision, asked, onQuestion, questionText, }) {
+    const t = useLabels();
     const deciding = decision.status === 'deciding';
+    return (_jsxs(_Fragment, { children: [decision.failure ? (_jsx(Banner, { status: "error", role: "alert", title: decision.failure.error })) : null, deciding && !decision.result ? (_jsx(PaneLoading, { label: t('@theorem.decision.deciding'), since: decision.startedAt })) : null, decision.result ? (_jsx(TheoremDecisionAnswers, { iface: iface, result: decision.result, asked: asked, onQuestion: onQuestion, questionText: questionText, elapsedMs: decision.elapsedMs, isStale: deciding })) : null] }));
+}
+/**
+ * The frame's second child. A call, not a component: the frame counts its
+ * children to choose a layout, and no response yet has to count as none.
+ */
+function decisionResponse(columns, phase, labels, since, answers) {
+    if (phase === 'idle')
+        return null;
+    if (!columns)
+        return answers;
+    const waiting = phase === 'waiting';
+    return (_jsx(ResponseColumn, { label: labels.answers, fill: waiting, children: waiting ? _jsx(PaneLoading, { label: labels.deciding, since: since }) : answers }));
+}
+function DecisionBody({ transport, iface, decision, defaultState = '{}', defaultImages, onQuestion, questionText, maxWidth = '960px', trace, flush, columns = false, className, style, }) {
+    const t = useLabels();
+    const bytes = useBytes();
+    const form = useDecisionState(defaultState, iface.maxStateBytes);
+    const { check } = form;
+    const [images, setImages] = useState(defaultImages ?? {});
+    /** The images and state the answers were asked about, kept with them: later edits don't redraw them. */
+    const [asked, setAsked] = useState();
+    const inspector = useTraceInspector(iface, transport.traces, trace);
     const decide = () => {
-        if (check.ok)
-            void decision.decide(check.state);
+        if (!check.ok)
+            return;
+        const sent = namedImages(images, check.state);
+        setAsked({ images: { ...iface.images, ...sent }, state: check.state });
+        void decision.decide(check.state, Object.keys(sent).length > 0 ? sent : undefined);
     };
-    return (_jsxs(ConsoleFrame, { inspector: inspector, maxWidth: maxWidth, className: className, style: style, children: [_jsxs(RequestCard, { title: t('@theorem.decision.state'), view: shown, hasFields: check.state !== undefined, onView: setView, onRun: decide, children: [shown === 'fields' && check.state !== undefined ? (_jsx(StateFields, { label: t('@theorem.decision.state'), value: check.state, onChange: (next) => {
-                            setText(JSON.stringify(next, null, 2));
-                        } })) : (_jsx(JsonRequest, { label: t('@theorem.decision.state'), text: text, isInvalid: !check.ok, onChange: setText })), _jsx(RunBar, { note: note, isReady: check.ok, isRunning: deciding, runLabel: t('@theorem.decision.decide'), runningLabel: t('@theorem.decision.deciding'), stopLabel: t('@theorem.decision.stop'), onRun: decide, onStop: decision.cancel })] }), decision.failure ? _jsx(Banner, { status: "error", title: decision.failure.error }) : null, decision.result ? (_jsx(TheoremDecisionAnswers, { iface: iface, result: decision.result, elapsedMs: decision.elapsedMs, isStale: deciding })) : null] }));
+    return (_jsxs(ConsoleFrame, { inspector: inspector, maxWidth: maxWidth, flush: flush, columns: columns, requestLabel: t('@theorem.decision.state'), className: className, style: style, children: [_jsx(DecisionRequest, { form: form, iface: iface, images: images, onImages: setImages, note: stateNote(t, check, iface.maxStateBytes, bytes), isRunning: decision.status === 'deciding', onRun: decide, onStop: decision.cancel }), decisionResponse(columns, decisionPhase(decision), { answers: t('@theorem.decision.answers'), deciding: t('@theorem.decision.deciding') }, decision.startedAt, _jsx(DecisionAnswered, { iface: iface, decision: decision, asked: asked, onQuestion: onQuestion, questionText: questionText }))] }));
 }
 function DecisionForTransport(props) {
     const t = useLabels();
     const decision = useTheoremDecision(props.transport);
     if (decision.describeFailure)
-        return _jsx(Banner, { status: "error", title: decision.describeFailure.error });
+        return _jsx(PaneFailure, { title: decision.describeFailure.error });
     if (!decision.iface)
-        return _jsx(Spinner, { size: "lg", label: t('@theorem.chat.loading') });
+        return _jsx(PaneLoading, { label: t('@theorem.chat.loading') });
     return _jsx(DecisionBody, { ...props, iface: decision.iface, decision: decision });
 }
 /**
@@ -80,8 +123,8 @@ function DecisionForTransport(props) {
  * ```
  */
 export function TheoremDecision({ endpoint, http, transport, theme, mode, labels, ...rest }) {
-    const resolved = useMemo(() => transport ?? createDecisionTransport({ ...http, endpoint }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- `http` identity is caller-owned; endpoint drives reconnection.
-    [transport, endpoint]);
+    const httpRef = useRef(http);
+    httpRef.current = http;
+    const resolved = useMemo(() => transport ?? createDecisionTransport({ ...httpRef.current, endpoint }), [transport, endpoint]);
     return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(DecisionForTransport, { ...rest, transport: resolved }) }) }));
 }

package/ui/TheoremEmbedding.d.ts

@@ -0,0 +1,27 @@
+import { type EmbeddingTransport } from '../client/embedding-transport.ts';
+import { type ConsolePageProps } from './ConsoleFrame.tsx';
+import { type EmbeddingDocument } from './EmbeddingDocuments.tsx';
+export type TheoremEmbeddingProps = ConsolePageProps & {
+    /** Where `createTheoremEmbeddingHandler` is mounted. Default `/api/embedding`. Ignored when `transport` is set. */
+    endpoint?: string;
+    /** Bring your own transport (tests, studios, non-HTTP hosts). */
+    transport?: EmbeddingTransport;
+    /** The text the documents card starts with, split into paragraphs. Default none. */
+    defaultText?: string;
+    /** Documents the card starts with beside the text, each with the file it came from. Default none. */
+    defaultDocuments?: readonly EmbeddingDocument[];
+    /** The query the search starts with. Default none. */
+    defaultQuery?: string;
+};
+/**
+ * Drop-in search over an embedding profile served by `createTheoremEmbeddingHandler`:
+ * paste text and split it, or drop files, and Index embeds them as documents
+ * in as many requests as the profile's limits need. Then Search embeds a query
+ * and ranks the documents by cosine similarity. Every request is shown as
+ * JSON, and in the trace.
+ *
+ * ```tsx
+ * <TheoremEmbedding endpoint="/api/embedding" />
+ * ```
+ */
+export declare function TheoremEmbedding({ endpoint, http, transport, theme, mode, labels, ...rest }: TheoremEmbeddingProps): import("react").JSX.Element;

package/ui/TheoremEmbedding.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VStack } from '@astryxdesign/core/VStack';
+import { useMemo, useRef, useState } from 'react';
+import { rankMatches } from "../client/embedding-input.js";
+import { createEmbeddingTransport, } from "../client/embedding-transport.js";
+import { useEmbeddingIndex } from "../hooks/use-embedding-index.js";
+import { useTheoremEmbedding } from "../hooks/use-theorem-embedding.js";
+import { ConsoleFrame, ConsoleSection, ResponseColumn, } from "./ConsoleFrame.js";
+import { EmbeddingDocuments, useEmbeddingDocuments, } from "./EmbeddingDocuments.js";
+import { EmbeddingQuery, useEmbeddingQuery } from "./EmbeddingQuery.js";
+import { EmbeddingResults, IndexCard } from "./EmbeddingResults.js";
+import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
+import { PaneFailure, PaneLoading } from "./PaneState.js";
+import { useTraceInspector } from "./TraceInspectorPanel.js";
+import { TheoremThemeProvider } from "./theme.js";
+/** The same documents: the same texts, and the very same files. */
+function sameInputs(a, b) {
+    return a.length === b.length && a.every((input, at) => input === b[at]);
+}
+/** Where the documents stand for the last query: embedded, changed since, or embedded by another model. */
+function indexStateOf(indexed, queried, inputs) {
+    if (!indexed)
+        return 'fresh';
+    // why: A query from another model than the index's is in another space; no score between them means anything.
+    if (queried && queried.model !== indexed.model)
+        return 'model';
+    return sameInputs(indexed.inputs, inputs) ? 'fresh' : 'stale';
+}
+function indexPhase(index) {
+    if (index.status === 'indexing')
+        return 'indexing';
+    return index.result !== null || index.failure !== null ? 'indexed' : 'idle';
+}
+/**
+ * The frame's second child. A call, not a component: the frame counts its
+ * children to choose a layout, and nothing indexed yet has to count as none.
+ */
+function embeddingResponse(columns, label, phase, results) {
+    if (phase === 'idle')
+        return null;
+    return columns ? (_jsx(ResponseColumn, { label: label, fill: phase === 'indexing', children: results })) : (results);
+}
+/** The spinner while the documents embed, counting the requests once there is more than one. */
+function IndexingPane({ index }) {
+    const t = useLabels();
+    const { progress } = index;
+    return (_jsx(PaneLoading, { label: progress
+            ? t('@theorem.embedding.indexing_progress', {
+                done: Math.min(progress.done + 1, progress.total),
+                total: progress.total,
+            })
+            : t('@theorem.embedding.indexing'), since: index.startedAt }));
+}
+/** Where the last query stands against the index: whether it searched, and its vector while both share a model. */
+function searchOf(index, search, inputs) {
+    const state = indexStateOf(index.result, search.result, inputs);
+    if (state === 'model')
+        return { state, searched: false, queried: null };
+    return {
+        state,
+        searched: search.status !== 'idle' || search.result !== null,
+        queried: search.result?.embeddings[0]?.values ?? null,
+    };
+}
+/** The query against the index, and once it ran, what it found. */
+function IndexSearch({ iface, index, search, query, indexed, state, searched, matches, pointing, }) {
+    return (_jsxs(ConsoleSection, { children: [_jsx(EmbeddingQuery, { form: query, rules: iface.inputs, index: state, isRunning: search.status === 'embedding', onRun: (input) => {
+                    void search.embed([input], { task: 'query' });
+                }, onStop: search.cancel }), searched ? (_jsx(VStack, { padding: 4, children: _jsx(EmbeddingResults, { index: index, search: search, documents: indexed, matches: matches, pointing: pointing }) })) : null] }));
+}
+/** The index, and once it holds vectors, the search over them. */
+function EmbeddingIndexed({ inputs, ...props }) {
+    const { index, indexed } = props;
+    const { state, searched, queried } = searchOf(index, props.search, inputs);
+    const vectors = index.result?.vectors;
+    const matches = useMemo(() => (queried && vectors ? rankMatches(queried, vectors) : []), [queried, vectors]);
+    const [hovered, setHovered] = useState(null);
+    const pointing = useMemo(() => ({ hovered, onHover: setHovered }), [hovered]);
+    return (_jsxs(VStack, { gap: 3, children: [_jsx(IndexCard, { run: index, documents: indexed, query: queried, matches: matches, pointing: pointing }), index.result ? (_jsx(IndexSearch, { ...props, state: state, searched: searched, matches: matches, pointing: pointing })) : null] }));
+}
+function EmbeddingBody({ transport, iface, search, defaultText = '', defaultDocuments, defaultQuery = '', maxWidth = '960px', trace, flush, columns = false, className, style, }) {
+    const t = useLabels();
+    const documents = useEmbeddingDocuments(defaultText, iface.inputs, defaultDocuments);
+    const query = useEmbeddingQuery(defaultQuery, iface.inputs);
+    const index = useEmbeddingIndex(transport);
+    const [indexed, setIndexed] = useState([]);
+    const inspector = useTraceInspector(iface, transport.traces, trace);
+    const runIndex = () => {
+        if (documents.jsonInvalid || documents.issue || documents.inputs.length === 0)
+            return;
+        setIndexed(documents.documents);
+        void index.index(documents.inputs, iface.inputs);
+    };
+    const phase = indexPhase(index);
+    return (_jsxs(ConsoleFrame, { inspector: inspector, maxWidth: maxWidth, flush: flush, columns: columns, requestLabel: t('@theorem.embedding.documents'), className: className, style: style, children: [_jsx(EmbeddingDocuments, { form: documents, rules: iface.inputs, isRunning: phase === 'indexing', onRun: runIndex, onStop: index.cancel }), embeddingResponse(columns, t('@theorem.embedding.results'), phase, phase === 'indexing' ? (_jsx(IndexingPane, { index: index })) : (_jsx(EmbeddingIndexed, { iface: iface, index: index, search: search, query: query, indexed: indexed, inputs: documents.inputs })))] }));
+}
+function EmbeddingForTransport(props) {
+    const t = useLabels();
+    const search = useTheoremEmbedding(props.transport);
+    if (search.describeFailure)
+        return _jsx(PaneFailure, { title: search.describeFailure.error });
+    if (!search.iface)
+        return _jsx(PaneLoading, { label: t('@theorem.chat.loading') });
+    return _jsx(EmbeddingBody, { ...props, iface: search.iface, search: search });
+}
+/**
+ * Drop-in search over an embedding profile served by `createTheoremEmbeddingHandler`:
+ * paste text and split it, or drop files, and Index embeds them as documents
+ * in as many requests as the profile's limits need. Then Search embeds a query
+ * and ranks the documents by cosine similarity. Every request is shown as
+ * JSON, and in the trace.
+ *
+ * ```tsx
+ * <TheoremEmbedding endpoint="/api/embedding" />
+ * ```
+ */
+export function TheoremEmbedding({ endpoint, http, transport, theme, mode, labels, ...rest }) {
+    const httpRef = useRef(http);
+    httpRef.current = http;
+    const resolved = useMemo(() => transport ?? createEmbeddingTransport({ ...httpRef.current, endpoint }), [transport, endpoint]);
+    return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(EmbeddingForTransport, { ...rest, transport: resolved }) }) }));
+}

package/ui/TheoremHost.d.ts

@@ -1,6 +1,7 @@
 import type { DefinedTheme } from '@astryxdesign/core/theme';
 import { type CSSProperties } from 'react';
 import { type HostTransport } from '../client/host-transport.ts';
+import type { PageTools } from '../client/live/live-page-tool.ts';
 import type { HttpOptions } from '../client/transport.ts';
 import { type TheoremLabels } from './labels.ts';
 export type TheoremHostProps = {
@@ -8,20 +9,36 @@ export type TheoremHostProps = {
     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?: HostTransport;
+    /** why: Page callbacks run only after the server saves a dispatch grant. */
+    pageTools?: PageTools;
     theme?: DefinedTheme;
     mode?: 'system' | 'light' | 'dark';
     /** Replacement lines by locale, for any `@theorem.*` or `@astryx.*` key. */
     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;
     /** Widest the column may grow, as a CSS length. Default `960px`. */
     maxWidth?: string;
     /**
-     * Show the trace in place of the console, 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 console'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;
+    /**
+     * The page is already a raised panel. The console sits in it instead of
+     * painting the ground it uses on a flat page.
+     */
+    flush?: boolean;
+    /** The request on the left and the response on the right. */
+    columns?: boolean;
     className?: string;
     style?: CSSProperties;
 };
@@ -35,4 +52,4 @@ export type TheoremHostProps = {
  * <TheoremHost endpoint="/api/host" />
  * ```
  */
-export declare function TheoremHost({ endpoint, http, transport, theme, mode, labels, ...rest }: TheoremHostProps): import("react").JSX.Element;
+export declare function TheoremHost({ endpoint, http, transport, theme, mode, labels, detectCodeLanguage, ...rest }: TheoremHostProps): import("react").JSX.Element;

package/ui/TheoremHost.js

@@ -1,29 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 } from '@astryxdesign/core/Selector';
-import { Spinner } from '@astryxdesign/core/Spinner';
+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 { useLocale } from '@astryxdesign/core/i18n';
-import { useMemo, useState } from 'react';
-import { hostCallFailure, hostCallStatus, hostConsoleView } from "../client/host-call.js";
-import { createHostTransport } from "../client/host-transport.js";
+import { 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 { workDuration } from "./labels.js";
-import { ConsoleFrame, JsonRequest, RequestCard, RunBar } from "./ConsoleFrame.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 { TheoremThemeProvider } from "./theme.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 = {
@@ -49,13 +55,39 @@ function checkRequest(t, tool, text) {
         return { ok: false, note: t('@theorem.host.missing', { fields: missing.join(', ') }), input };
     return { ok: true, input };
 }
-/** A tool's kind, and its access when it can change things. */
+/** 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();
-    return (_jsxs(HStack, { gap: 1, wrap: "wrap", children: [_jsx(Token, { label: t(`@theorem.host.kind.${tool.kind}`), size: "sm", color: "gray" }), tool.access === 'read-only' ? null : (_jsx(Token, { label: t(`@theorem.host.access.${tool.access}`), size: "sm", color: tool.access === 'destructive' ? 'red' : 'orange' }))] }));
+    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 }) {
+function CallGate({ call, onAnswer, }) {
     const state = call.call?.state;
     if (state?.phase !== 'gate')
         return null;
@@ -64,16 +96,34 @@ function CallGate({ call, onAnswer }) {
     }
     return (_jsx(ApprovalCard, { gate: state.gate, toolName: call.name, input: call.input, decided: call.answering === 'auth' ? null : call.answering, onDecision: (action) => void onAnswer(call.id, { action }) }));
 }
-/** One call's outcome: its gate, its failure, or its output, then a line for the tool, time, and status. */
-function CallOutcome({ call, onAnswer }) {
-    const t = useLabels();
+/** 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);
-    const meta = [call.name, call.elapsedMs == null ? null : workDuration(t, call.elapsedMs), t(`@theorem.host.status.${hostCallStatus(call)}`)].filter(Boolean);
-    return (_jsxs(VStack, { gap: 3, children: [_jsx(CallGate, { call: call, onAnswer: onAnswer }), failure ? _jsx(Banner, { status: "error", title: failure.title, description: failure.description }) : null, state?.phase === 'complete' ? _jsx(ToolResult, { output: state.output, parts: state.parts }) : null, call.isRunning ? null : (_jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: meta.join(' · ') }))] }));
+    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 }) {
+function EarlierCalls({ calls, onPick, }) {
     const t = useLabels();
     const locale = useLocale();
     const time = useMemo(() => new Intl.DateTimeFormat(locale, { timeStyle: 'medium' }), [locale]);
@@ -85,12 +135,17 @@ function EarlierCalls({ calls, onPick }) {
                 }) })] }));
 }
 /** The picked tool's request, as fields or JSON, and Run. */
-function ToolRequest({ tools, tool, check, text, view, shown, onText, onPick, onView, onRun, onStop }) {
+function ToolRequest({ tools, tool, check, text, view, shown, onText, onPick, onView, onRun, onStop, }) {
     const t = useLabels();
     const fieldsInput = 'input' in check ? check.input : undefined;
     const showFields = view === 'fields' && fieldsInput !== undefined;
-    return (_jsxs(RequestCard, { title: t('@theorem.host.request'), view: showFields ? 'fields' : 'json', hasFields: fieldsInput !== undefined, onView: onView, onRun: onRun, children: [_jsxs(VStack, { gap: 2, children: [_jsx(Selector, { label: t('@theorem.host.tool'), size: "sm", options: tools.map((option) => ({ value: option.name, label: option.name, description: option.description })), value: tool.name, hasSearch: tools.length > 8, description: tool.description, onChange: onPick }), _jsx(ToolTokens, { tool: tool })] }), showFields ? (_jsx(SchemaFields
-            // A new tool starts a new form, so inputs don't carry state across schemas.
+    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: () => {
@@ -98,38 +153,73 @@ function ToolRequest({ tools, tool, check, text, view, shown, onText, onPick, on
                         onStop(shown.id);
                 } })] }));
 }
-function HostBody({ transport, iface, host, maxWidth = '960px', trace, className, style }) {
+/** 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);
-    // Each tool keeps its own request while you move between them.
     const [drafts, setDrafts] = useState({});
     const [shownId, setShownId] = useState(null);
     const [view, setView] = useState('fields');
-    const inspector = useTraceInspector(iface, transport.traces, trace);
-    const { tool, text, shown, earlier } = hostConsoleView({ tools: iface.tools, picked, drafts, calls: host.calls, shownId });
+    const { tool, text, shown, earlier } = hostConsoleView({
+        tools: iface.tools,
+        picked,
+        drafts,
+        calls: host.calls,
+        shownId,
+    });
     const check = tool ? checkRequest(t, tool, text) : null;
     const setText = (next) => {
         if (tool)
             setDrafts((previous) => ({ ...previous, [tool.name]: next }));
     };
     const run = () => {
-        if (tool && check?.ok && !shown?.isRunning)
-            setShownId(host.run(tool.name, check.input));
+        const 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 (_jsxs(ConsoleFrame, { inspector: inspector, maxWidth: maxWidth, className: className, style: style, children: [tool && check ? (_jsx(ToolRequest, { tools: iface.tools, tool: tool, check: check, text: text, view: view, shown: shown, onText: setText, onPick: setPicked, onView: setView, onRun: run, onStop: host.cancel })) : (_jsx(EmptyState, { title: t('@theorem.host.no_tools') })), shown ? _jsx(CallOutcome, { call: shown, onAnswer: host.answer }) : null, _jsx(EarlierCalls, { calls: earlier, onPick: pick })] }));
+    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);
+    const host = useTheoremHost(props.transport, props.pageTools);
     if (host.describeFailure)
-        return _jsx(Banner, { status: "error", title: host.describeFailure.error });
+        return _jsx(PaneFailure, { title: host.describeFailure.error });
     if (!host.iface)
-        return _jsx(Spinner, { size: "lg", label: t('@theorem.chat.loading') });
+        return _jsx(PaneLoading, { label: t('@theorem.chat.loading') });
     return _jsx(HostBody, { ...props, iface: host.iface, host: host });
 }
 /**
@@ -142,9 +232,9 @@ function HostForTransport(props) {
  * <TheoremHost endpoint="/api/host" />
  * ```
  */
-export function TheoremHost({ endpoint, http, transport, theme, mode, labels, ...rest }) {
-    const resolved = useMemo(() => transport ?? createHostTransport({ ...http, endpoint }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- `http` identity is caller-owned; endpoint drives reconnection.
-    [transport, endpoint]);
-    return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(HostForTransport, { ...rest, transport: resolved }) }) }));
+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

@@ -1,11 +1,15 @@
 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; it shows in place of the buttons until the gate settles, or they return. */
+    /** 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;
 };