@theoremjs/studio 0.0.0-stage → 0.3.2

package/ui/studio-conflicts.d.ts

@@ -0,0 +1,17 @@
+import { type FileConflict } from '../mod.ts';
+/** Opens the choice a Save waits on, while the files and the builder's edits conflict. */
+export declare const ChooseConflictsContext: import("react").Context<(() => void) | undefined>;
+/**
+ * The settings the studio and the source code both changed, each as a diff from the source code's
+ * value to the studio edit, and a choice of which stands. Resolving puts the chosen values in the
+ * studio; the source code is written at Save. Closing leaves the studio edits standing and the
+ * choice still to make.
+ */
+export declare function FileConflicts({ conflicts, files, onApply, onClose, }: {
+    conflicts: readonly FileConflict[];
+    /** The files that changed, as the builder reads them: a name, or how many. */
+    files: string;
+    /** Called with the conflicts to take from the source code, by their place in `conflicts`. */
+    onApply: (theirs: number[]) => void;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/ui/studio-conflicts.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@astryxdesign/core/Button';
+import { Dialog, DialogHeader } from '@astryxdesign/core/Dialog';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Layout, LayoutContent, LayoutFooter } from '@astryxdesign/core/Layout';
+import { ScrollableArea } from '@astryxdesign/core/ScrollableArea';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Text } from '@astryxdesign/core/Text';
+import { ToggleButton, ToggleButtonGroup } from '@astryxdesign/core/ToggleButton';
+import { VStack } from '@astryxdesign/core/VStack';
+import { createContext, useState } from 'react';
+import { lineDiff } from "../mod.js";
+import { DiffBlock } from "./diff-block.js";
+const DIALOG_WIDTH = 720;
+const DIFF_MAX_HEIGHT = '20rem';
+/** Opens the choice a Save waits on, while the files and the builder's edits conflict. */
+export const ChooseConflictsContext = createContext(undefined);
+const SIDE_NAME = { studio: 'Studio edit', source: 'Source code' };
+/** A conflict's setting as the Save review names one: whose it is, then the path to it. */
+function settingName(conflict) {
+    const path = conflict.path
+        .map((part) => (typeof part === 'number' ? `#${String(part + 1)}` : part))
+        .join('.')
+        .replaceAll('.#', ' #');
+    return path ? `${conflict.name} · ${path}` : conflict.name;
+}
+/** One side's value as text. A whole agent or tool is said, not printed. */
+function valueText(conflict, side) {
+    const [value, other] = side === 'studio' ? [conflict.mine, conflict.theirs] : [conflict.theirs, conflict.mine];
+    // A whole agent or tool, or one row of a list, is there or taken out.
+    const isWhole = conflict.path.length === 0;
+    if (isWhole || typeof conflict.path.at(-1) === 'number') {
+        if (value === undefined)
+            return '(removed)';
+        if (isWhole && other === undefined)
+            return side === 'studio' ? '(kept, with studio edits)' : '(kept, and changed)';
+    }
+    if (value === undefined || value === null || value === '')
+        return '(not set)';
+    if (typeof value === 'string')
+        return value;
+    // A row's key is the studio's own name for it, and says nothing to the builder.
+    return JSON.stringify(value, (field, inner) => (field === 'key' ? undefined : inner), 2);
+}
+/** One conflict's setting, the same however the list around it changes. */
+function conflictId(conflict) {
+    return `${conflict.kind}:${conflict.key}:${conflict.path.join('.')}`;
+}
+/**
+ * The settings the studio and the source code both changed, each as a diff from the source code's
+ * value to the studio edit, and a choice of which stands. Resolving puts the chosen values in the
+ * studio; the source code is written at Save. Closing leaves the studio edits standing and the
+ * choice still to make.
+ */
+export function FileConflicts({ conflicts, files, onApply, onClose, }) {
+    // Picks go by setting, not by place: the files can change while this is open, and the list with them.
+    const [picks, setPicks] = useState({});
+    const all = (side) => {
+        setPicks(Object.fromEntries(conflicts.map((conflict) => [conflictId(conflict), side])));
+    };
+    const one = conflicts.length === 1;
+    // With no one file to name, the side's own name says it.
+    const sourceName = files === 'source code' ? SIDE_NAME.source : `${SIDE_NAME.source} (${files})`;
+    const count = one ? '1 setting' : `${String(conflicts.length)} settings`;
+    return (_jsx(Dialog, { isOpen: true, width: DIALOG_WIDTH, maxHeight: "80vh", onOpenChange: (isOpen) => {
+            if (!isOpen)
+                onClose();
+        }, children: _jsx(Layout, { header: _jsx(DialogHeader, { title: "Studio edits conflict with source code", subtitle: `${count} changed both in the studio and in ${files}. Choose which value each keeps.` }), content: _jsx(LayoutContent, { isScrollable: false, padding: 0, children: _jsx(ScrollableArea, { label: "Conflicts", height: "100%", paddingInline: 4, children: _jsx(VStack, { gap: 5, children: conflicts.map((conflict) => {
+                            const id = conflictId(conflict);
+                            const pick = picks[id] ?? 'studio';
+                            const name = settingName(conflict);
+                            return (_jsxs(VStack, { gap: 2, children: [_jsxs(HStack, { gap: 3, vAlign: "center", justify: "between", children: [_jsx(StackItem, { size: "fill", children: _jsx(Text, { weight: "semibold", children: name }) }), _jsxs(ToggleButtonGroup, { label: `Which value ${name} keeps`, size: "sm", value: pick, onChange: (next) => {
+                                                    // Pressing the kept one again leaves it kept: one always stands.
+                                                    if (next === 'studio' || next === 'source')
+                                                        setPicks((held) => ({ ...held, [id]: next }));
+                                                }, children: [_jsx(ToggleButton, { value: "source", label: "Keep source code" }), _jsx(ToggleButton, { value: "studio", label: "Keep studio edit" })] })] }), _jsx(DiffBlock, { lines: lineDiff(valueText(conflict, 'source'), valueText(conflict, 'studio')), sides: {
+                                            removed: sourceName,
+                                            added: SIDE_NAME.studio,
+                                        }, kept: pick === 'studio' ? '+' : '-', isWrapped: true, maxHeight: DIFF_MAX_HEIGHT })] }, id));
+                        }) }) }) }), footer: _jsx(LayoutFooter, { children: _jsxs(HStack, { gap: 2, justify: "between", children: [_jsx(HStack, { gap: 2, children: !one && (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Keep all source code", variant: "ghost", onClick: () => {
+                                            all('source');
+                                        } }), _jsx(Button, { label: "Keep all studio edits", variant: "ghost", onClick: () => {
+                                            all('studio');
+                                        } })] })) }), _jsx(Button, { label: one ? 'Resolve conflict' : `Resolve ${String(conflicts.length)} conflicts`, variant: "primary", onClick: () => {
+                                onApply(conflicts.flatMap((conflict, index) => picks[conflictId(conflict)] === 'source' ? [index] : []));
+                            } })] }) }) }) }));
+}

package/ui/studio-connection.d.ts

@@ -0,0 +1,64 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import { type ListedProfileType, type ListedProvider, type ProviderModel } from '../browser-connection.ts';
+import type { StudioBrowserRuntime } from '../browser-transport.ts';
+import { type ModelRoute, type StudioRunsOn } from '../mod.ts';
+import type { StudioSupplies } from './studio-host.ts';
+type KeyEntry = {
+    id: string;
+    slot: string;
+};
+type LocalModels = {
+    status: 'idle' | 'loading' | 'ready' | 'error';
+    ids: string[];
+    error?: string;
+};
+/** Models select execution; the vault and connection settings remain in this tab's memory. */
+export declare function useStudioConnection(models: readonly (ModelRoute & {
+    builtInTools?: string[];
+    local: boolean;
+})[], initialBaseUrl?: string, namedSlots?: readonly string[], { lentKeys: keys, toolHandlers }?: StudioSupplies): {
+    entries: KeyEntry[];
+    setEntries: Dispatch<SetStateAction<KeyEntry[]>>;
+    localModels: LocalModels;
+    mode: "local" | "demo" | "byok";
+    on: StudioRunsOn;
+    runtime: StudioBrowserRuntime | null;
+    vault: Readonly<Record<string, string | undefined>>;
+    setVault: Dispatch<SetStateAction<Readonly<Record<string, string | undefined>>>>;
+    slots: string[];
+    local: {
+        baseUrl: string;
+    };
+    setLocal: Dispatch<SetStateAction<{
+        baseUrl: string;
+    }>>;
+    remoteTools: boolean;
+    setRemoteTools: Dispatch<SetStateAction<boolean>>;
+};
+export type StudioConnectionState = ReturnType<typeof useStudioConnection>;
+export type ProviderModels = {
+    status: 'idle' | 'loading';
+    models: ProviderModel[];
+} | {
+    status: 'ready';
+    models: ProviderModel[];
+} | {
+    status: 'error';
+    models: ProviderModel[];
+    error: string;
+};
+/**
+ * The models a provider offers for this profile type, listed with the key in the slot the model
+ * reads. OpenRouter lists without a key; Gemini waits for one.
+ */
+export declare function useProviderModels(provider: ListedProvider | undefined, type: ListedProfileType, secret: string | undefined): ProviderModels;
+/** What a slot holds, for a slot picker: the service its key is for, or that it is empty. */
+export declare function slotDescription(secret: string | undefined): string;
+/** Key mappings use the editor's own section and compact controls. */
+export declare function StudioKeys({ connection, onRenameSlot, onAddSlot, onRemoveSlot, }: {
+    connection: StudioConnectionState;
+    onRenameSlot?: (from: string, to: string) => void;
+    onAddSlot?: (slot: string) => void;
+    onRemoveSlot?: (slot: string) => void;
+}): import("react").JSX.Element;
+export {};

package/ui/studio-connection.js

@@ -0,0 +1,286 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { TextInput } from '@astryxdesign/core/TextInput';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconEye, IconEyeOff, IconKey, IconPlayerEject, IconPlus, IconTrash, } from '@tabler/icons-react';
+import { isKeySlotName } from '@theoremjs/agents';
+import { useEffect, useMemo, useState } from 'react';
+import { keyKind, listLocalStudioModels, listProviderModels, localStudioConfig, STUDIO_KEY_SLOT_CAP, studioVault, } from "../browser-connection.js";
+import { ON_OWN_KEYS, sectionNote, } from "../mod.js";
+import { IconGemini, IconOpenRouter } from "./brand-icons.js";
+import { InspectorSection } from "./inspector.js";
+const withoutSlot = (vault, slot) => Object.fromEntries(Object.entries(vault).filter(([name]) => name !== slot));
+/** The models a local server offers at `local`, listed again shortly after the endpoint settles. */
+function useLocalModels(hasLocal, local) {
+    const [localModels, setLocalModels] = useState({ status: 'idle', ids: [] });
+    useEffect(() => {
+        if (!hasLocal || !local.baseUrl.trim()) {
+            setLocalModels({ status: 'idle', ids: [] });
+            return;
+        }
+        const controller = new AbortController();
+        setLocalModels({ status: 'loading', ids: [] });
+        const timer = globalThis.setTimeout(() => {
+            void listLocalStudioModels(local, AbortSignal.any([controller.signal, AbortSignal.timeout(8000)]))
+                .then((ids) => {
+                if (!controller.signal.aborted)
+                    setLocalModels({ status: 'ready', ids });
+            })
+                .catch(() => {
+                if (!controller.signal.aborted)
+                    setLocalModels({
+                        status: 'error',
+                        ids: [],
+                        error: 'Couldn’t load models. Check the endpoint and local server.',
+                    });
+            });
+        }, 350);
+        return () => {
+            globalThis.clearTimeout(timer);
+            controller.abort();
+        };
+    }, [hasLocal, local]);
+    return localModels;
+}
+/**
+ * Local when every model is local. The page's lent keys when it lends some, nothing is local or
+ * keyed, and every model runs on them. Otherwise the builder's own keys.
+ */
+function runsOn(models, hasLocal, hasKeys, keys) {
+    if (hasLocal && models.every((model) => model.local))
+        return { mode: 'local' };
+    if (!keys || hasLocal || hasKeys)
+        return ON_OWN_KEYS;
+    const lent = models.every((model) => keys.runs(model.profileType, model.definition) &&
+        keys.violation({ ...model, builtInTools: model.builtInTools ?? [] }) === null);
+    return lent ? { mode: 'demo', keys } : ON_OWN_KEYS;
+}
+/** The local server's config; an invalid edit refuses execution rather than falling back to the hosted demo. */
+function localRuntimeConfig(local) {
+    try {
+        return localStudioConfig(local);
+    }
+    catch (error) {
+        return {
+            baseUrl: local.baseUrl,
+            fetch: () => Promise.reject(error instanceof Error ? error : new Error(String(error))),
+        };
+    }
+}
+/**
+ * The key rows: one per slot the draft names or key the vault holds. Typing a slot name in the
+ * editor must not leave a row behind for every prefix. Unnamed rows stay until removed.
+ */
+function useKeyEntries(slots) {
+    const [entries, setEntries] = useState([]);
+    useEffect(() => {
+        setEntries((current) => [
+            ...current.filter((entry) => !entry.slot || slots.includes(entry.slot)),
+            ...slots
+                .filter((slot) => !current.some((entry) => entry.slot === slot))
+                .map((slot) => ({ id: crypto.randomUUID(), slot })),
+        ]);
+    }, [slots]);
+    return [entries, setEntries];
+}
+/** The runtime the runner executes on, or null for the demo; each new one aborts the last. */
+function useConnectionRuntime(mode, hasLocal, vault, local, remoteTools, slots, toolHandlers) {
+    const connection = useMemo(() => {
+        if (mode === 'demo')
+            return null;
+        const controller = new AbortController();
+        const localConfig = hasLocal ? localRuntimeConfig(local) : undefined;
+        const slotted = studioVault(slots, vault);
+        return {
+            controller,
+            runtime: {
+                mode,
+                signal: controller.signal,
+                remoteTools: hasLocal ? remoteTools : true,
+                providers: { vault: slotted, ...(localConfig ? { local: localConfig } : {}) },
+                decision: { vault: slotted },
+                toolHandlers,
+            },
+        };
+    }, [mode, hasLocal, vault, local, remoteTools, slots, toolHandlers]);
+    useEffect(() => () => {
+        connection?.controller.abort();
+    }, [connection]);
+    return connection?.runtime ?? null;
+}
+/** Models select execution; the vault and connection settings remain in this tab's memory. */
+export function useStudioConnection(models, initialBaseUrl = 'http://127.0.0.1:11434', namedSlots = [], { lentKeys: keys, toolHandlers } = {}) {
+    const [vault, setVault] = useState({});
+    const [local, setLocal] = useState({
+        baseUrl: initialBaseUrl,
+    });
+    const [remoteTools, setRemoteTools] = useState(false);
+    const slotNames = [...new Set([...namedSlots, ...Object.keys(vault)])].join('\n');
+    const slots = useMemo(() => (slotNames ? slotNames.split('\n') : []), [slotNames]);
+    const [entries, setEntries] = useKeyEntries(slots);
+    const hasLocal = models.some((model) => model.local);
+    const localModels = useLocalModels(hasLocal, local);
+    const hasKeys = Object.values(vault).some((key) => Boolean(key?.trim()));
+    const mode = runsOn(models, hasLocal, hasKeys, keys).mode;
+    // One value per mode, so a render that keeps the mode keeps it too.
+    const on = useMemo(() => mode === 'demo' && keys ? { mode, keys } : mode === 'local' ? { mode } : ON_OWN_KEYS, [mode, keys]);
+    const runtime = useConnectionRuntime(mode, hasLocal, vault, local, remoteTools, slots, toolHandlers);
+    // One object while nothing in it changes, so panes that only read the connection can sit out a render.
+    return useMemo(() => ({
+        entries,
+        setEntries,
+        localModels,
+        mode,
+        on,
+        runtime,
+        vault,
+        setVault,
+        slots,
+        local,
+        setLocal,
+        remoteTools,
+        setRemoteTools,
+    }), [entries, setEntries, localModels, mode, on, runtime, vault, slots, local, remoteTools]);
+}
+/** Lists already fetched this tab, by provider, profile type, and key; a list barely changes. */
+const listed = new Map();
+/**
+ * The models a provider offers for this profile type, listed with the key in the slot the model
+ * reads. OpenRouter lists without a key; Gemini waits for one.
+ */
+export function useProviderModels(provider, type, secret) {
+    const key = secret?.trim() ?? '';
+    const id = provider ? [provider, type, key].join('\n') : '';
+    const [state, setState] = useState({
+        id: '',
+        status: 'idle',
+        models: [],
+    });
+    useEffect(() => {
+        const cached = listed.get(id);
+        if (!provider || cached) {
+            setState({ id, status: cached ? 'ready' : 'idle', models: cached ?? [] });
+            return;
+        }
+        if (provider === 'gemini' && !key && type !== 'embedding') {
+            setState({ id, status: 'idle', models: [] });
+            return;
+        }
+        const controller = new AbortController();
+        setState({ id, status: 'loading', models: [] });
+        const timer = globalThis.setTimeout(() => {
+            void listProviderModels(provider, type, key || undefined, AbortSignal.any([controller.signal, AbortSignal.timeout(10_000)]))
+                .then((models) => {
+                listed.set(id, models);
+                if (!controller.signal.aborted)
+                    setState({ id, status: 'ready', models });
+            })
+                .catch((error) => {
+                if (!controller.signal.aborted)
+                    setState({
+                        id,
+                        status: 'error',
+                        models: [],
+                        error: error instanceof Error ? error.message : 'Couldn’t list models.',
+                    });
+            });
+        }, 350);
+        return () => {
+            globalThis.clearTimeout(timer);
+            controller.abort();
+        };
+    }, [id, provider, type, key]);
+    // Until the effect catches up with a new key, the old list isn't this key's.
+    return state.id === id ? state : { status: provider ? 'loading' : 'idle', models: [] };
+}
+/** What a slot holds, for a slot picker: the service its key is for, or that it is empty. */
+export function slotDescription(secret) {
+    if (!secret?.trim())
+        return 'No key yet';
+    const kind = keyKind(secret);
+    return kind ? KEY_KINDS[kind].label : 'Key';
+}
+/** The icon follows the pasted key; a key whose service its prefix doesn't show gets a plain key. */
+const KEY_KINDS = {
+    gemini: { icon: IconGemini, label: 'Gemini key' },
+    openrouter: { icon: IconOpenRouter, label: 'OpenRouter key' },
+};
+/** Key mappings use the editor's own section and compact controls. */
+export function StudioKeys({ connection, onRenameSlot, onAddSlot, onRemoveSlot, }) {
+    return (_jsx(InspectorSection, { note: sectionNote('connection'), children: _jsxs(VStack, { gap: 2, children: [connection.entries.map((entry) => (_jsx(KeyRow, { entry: entry, connection: connection, onRenameSlot: onRenameSlot, onAddSlot: onAddSlot, onRemoveSlot: onRemoveSlot }, entry.id))), _jsx(HStack, { children: _jsx(IconButton, { label: "Add key", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), isDisabled: connection.entries.length >= STUDIO_KEY_SLOT_CAP, onClick: () => {
+                            connection.setEntries((current) => [
+                                ...current,
+                                { id: crypto.randomUUID(), slot: '' },
+                            ]);
+                        } }) })] }) }));
+}
+function KeyRow({ entry, connection, onRenameSlot, onAddSlot, onRemoveSlot }) {
+    const secret = Object.hasOwn(connection.vault, entry.slot)
+        ? (connection.vault[entry.slot] ?? '')
+        : '';
+    const { name, setName, error, rename } = useSlotName(entry, connection, secret, onRenameSlot, onAddSlot);
+    const [visible, setVisible] = useState(false);
+    return (_jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(StackItem, { size: "static", children: _jsx(KeyKindIcon, { secret: secret }) }), _jsx(StackItem, { size: "fill", children: _jsx(TextInput, { label: "Key name", hasAutoFocus: !entry.slot, isLabelHidden: true, size: "sm", value: name, placeholder: "Key name", onChange: setName, onBlur: rename, status: error ? { type: 'error', message: error } : undefined }) }), _jsx(StackItem, { size: "fill", children: _jsx(KeySecretInput, { entry: entry, connection: connection, secret: secret, visible: visible }) }), _jsx(StackItem, { size: "static", children: _jsx(KeyRowActions, { entry: entry, connection: connection, visible: visible, setVisible: setVisible, onRemoveSlot: onRemoveSlot }) })] }));
+}
+/** The pasted key's service, or a plain key. */
+function KeyKindIcon({ secret }) {
+    const kind = keyKind(secret);
+    return (_jsx(Icon, { icon: kind ? KEY_KINDS[kind].icon : IconKey, size: "sm", color: "secondary", label: kind ? KEY_KINDS[kind].label : 'Key' }));
+}
+/** The key itself, written to the vault under the row's slot; disabled until the slot has a name. */
+function KeySecretInput({ entry, connection, secret, visible, }) {
+    return (_jsx(TextInput, { label: "API key", isLabelHidden: true, size: "sm", type: visible ? 'text' : 'password', value: secret, placeholder: "API key", autoComplete: "off", isDisabled: !entry.slot, onChange: (value) => {
+            connection.setVault((current) => ({
+                ...current,
+                [entry.slot]: value.trim() || undefined,
+            }));
+        } }));
+}
+/** A row's slot name as typed, committed on blur once it is valid and free. */
+function useSlotName(entry, connection, secret, onRenameSlot, onAddSlot) {
+    const [name, setName] = useState(entry.slot);
+    useEffect(() => {
+        setName(entry.slot);
+    }, [entry.slot]);
+    const [error, setError] = useState();
+    const rename = () => {
+        if (name === entry.slot)
+            return;
+        if (!isKeySlotName(name)) {
+            setError('Use a valid slot name, up to 32 characters.');
+            return;
+        }
+        if (connection.entries.some((other) => other.id !== entry.id && other.slot === name)) {
+            setError('This key name already exists.');
+            return;
+        }
+        connection.setVault((current) => ({
+            ...withoutSlot(current, entry.slot),
+            [name]: secret || undefined,
+        }));
+        connection.setEntries((current) => current.map((other) => (other.id === entry.id ? { ...other, slot: name } : other)));
+        if (entry.slot)
+            onRenameSlot?.(entry.slot, name);
+        else
+            onAddSlot?.(name);
+        setError(undefined);
+    };
+    return { name, setName, error, rename };
+}
+/** Show or hide the key, and remove the row (or, where the profile names its slot, clear the key). */
+function KeyRowActions({ entry, connection, visible, setVisible, onRemoveSlot, }) {
+    // Where the profile can't drop a slot it names (the run tab), its row stays and only the key goes.
+    const removable = onRemoveSlot !== undefined || !entry.slot;
+    return (_jsxs(HStack, { gap: 1, children: [_jsx(IconButton, { label: visible ? 'Hide key' : 'Show key', variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: visible ? IconEyeOff : IconEye, size: "sm" }), onClick: () => {
+                    setVisible((current) => !current);
+                } }), _jsx(IconButton, { label: removable ? 'Remove key' : 'Clear key', variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: removable ? IconTrash : IconPlayerEject, size: "sm" }), onClick: () => {
+                    connection.setVault((current) => withoutSlot(current, entry.slot));
+                    if (!removable)
+                        return;
+                    connection.setEntries((current) => current.filter((other) => other.id !== entry.id));
+                    onRemoveSlot?.(entry.slot);
+                } })] }));
+}

package/ui/studio-decision.d.ts

@@ -0,0 +1,6 @@
+import { type TheoremDecisionProps } from '@theoremjs/react/ui';
+import { type ConsoleViewProps, type StudioConsoleProps } from './lib/studio-console.ts';
+/** The same decision runner in the builder preview and the standalone run tab. */
+export declare function StudioDecision(props: StudioConsoleProps): import("react").JSX.Element;
+/** A decision on `transport`, seeded for its profile, its questions linked to the editor. */
+export declare function DecisionView({ payload, transport, trace, flush, columns, className, }: ConsoleViewProps & Pick<TheoremDecisionProps, 'transport'>): import("react").JSX.Element;

package/ui/studio-decision.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TheoremDecision } from '@theoremjs/react/ui';
+import { use, useContext, useMemo } from 'react';
+import { createBrowserStudioDecisionTransport } from "../browser.js";
+import { createStudioDecisionTransport, DECISION_EXAMPLE_AGENT_ID, DECISION_EXAMPLE_STATE, decisionExampleAssets, EXAMPLE_DECISION_STATE, EXAMPLE_SPAN_DECISION_STATE, } from "../mod.js";
+import { QuestionLink } from "./inspector-context.js";
+import { useStudioTransport, } from "./lib/studio-console.js";
+let exampleAssets;
+/**
+ * What a decision's form starts with: an example its model can be asked about, and the pictures the
+ * example names. The example's pictures load the first time; until then the form suspends.
+ */
+function useDecisionSeed(payload) {
+    if (payload.agentId === DECISION_EXAMPLE_AGENT_ID) {
+        exampleAssets ??= decisionExampleAssets();
+        return { defaultState: DECISION_EXAMPLE_STATE, defaultImages: { ...use(exampleAssets) } };
+    }
+    const { profile } = payload;
+    const model = profile.type === 'decision' ? Object.values(profile.models)[0] : undefined;
+    return {
+        defaultState: model?.apiId.startsWith('respan/')
+            ? EXAMPLE_SPAN_DECISION_STATE
+            : EXAMPLE_DECISION_STATE,
+    };
+}
+/** An instruction as one line of text: its own words, with a structured one's parts in order. */
+function entryText(entry) {
+    if (typeof entry === 'string')
+        return entry;
+    if (Array.isArray(entry))
+        return entry.map(entryText).join(' ');
+    return Object.entries(entry)
+        .map(([key, value]) => `${key}: ${entryText(value)}`)
+        .join(' ');
+}
+/** The same decision runner in the builder preview and the standalone run tab. */
+export function StudioDecision(props) {
+    const transport = useStudioTransport(props, createStudioDecisionTransport, createBrowserStudioDecisionTransport);
+    return _jsx(DecisionView, { ...props, transport: transport });
+}
+/** A decision on `transport`, seeded for its profile, its questions linked to the editor. */
+export function DecisionView({ payload, transport, trace, flush, columns, className, }) {
+    const { open } = useContext(QuestionLink);
+    const seed = useDecisionSeed(payload);
+    const { questions } = payload;
+    const questionText = useMemo(() => questions &&
+        Object.fromEntries(Object.entries(questions).map(([id, question]) => [id, entryText(question.instructions)])), [questions]);
+    return (_jsx(TheoremDecision, { transport: transport, ...seed, trace: trace, flush: flush, columns: columns, className: className, onQuestion: open, questionText: questionText }));
+}

package/ui/studio-embedding.d.ts

@@ -0,0 +1,6 @@
+import { type TheoremEmbeddingProps } from '@theoremjs/react/ui';
+import { type ConsoleViewProps, type StudioConsoleProps } from './lib/studio-console.ts';
+/** The same embedding runner in the builder preview and the standalone run tab. */
+export declare function StudioEmbedding(props: StudioConsoleProps): import("react").JSX.Element;
+/** An embedding on `transport`, seeded with the example its profile takes. */
+export declare function EmbeddingView({ payload, transport, trace, flush, columns, className, }: ConsoleViewProps & Pick<TheoremEmbeddingProps, 'transport'>): import("react").JSX.Element;

package/ui/studio-embedding.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TheoremEmbedding } from '@theoremjs/react/ui';
+import { createBrowserStudioEmbeddingTransport } from "../browser.js";
+import { createStudioEmbeddingTransport, EXAMPLE_EMBEDDING_FILES, EXAMPLE_EMBEDDING_QUERY, EXAMPLE_EMBEDDING_TEXT, } from "../mod.js";
+import { useStudioTransport, } from "./lib/studio-console.js";
+/** Whether a profile that accepts `accept` takes `mimeType`, by name or by its `type/*` family. */
+function accepts(accept, mimeType) {
+    return accept.some((rule) => rule === mimeType || (rule.endsWith('/*') && mimeType.startsWith(rule.slice(0, -1))));
+}
+/** The documents and query an embedding starts with: the example, less what the profile does not take. */
+function embeddingSeed(profile) {
+    if (profile.type !== 'embedding')
+        return { defaultText: EXAMPLE_EMBEDDING_TEXT, defaultQuery: EXAMPLE_EMBEDDING_QUERY };
+    const { text, attachments } = profile.inputs;
+    const defaultDocuments = EXAMPLE_EMBEDDING_FILES.filter(({ input }) => typeof input === 'string' ? text !== false : accepts(attachments?.accept ?? [], 'image/png'));
+    return {
+        defaultText: text === false ? '' : EXAMPLE_EMBEDDING_TEXT,
+        defaultQuery: text === false ? '' : EXAMPLE_EMBEDDING_QUERY,
+        defaultDocuments,
+    };
+}
+/** The same embedding runner in the builder preview and the standalone run tab. */
+export function StudioEmbedding(props) {
+    const transport = useStudioTransport(props, createStudioEmbeddingTransport, createBrowserStudioEmbeddingTransport);
+    return _jsx(EmbeddingView, { ...props, transport: transport });
+}
+/** An embedding on `transport`, seeded with the example its profile takes. */
+export function EmbeddingView({ payload, transport, trace, flush, columns, className, }) {
+    return (_jsx(TheoremEmbedding, { transport: transport, ...embeddingSeed(payload.profile), trace: trace, flush: flush, columns: columns, className: className }));
+}

package/ui/studio-host-console.d.ts

@@ -0,0 +1,6 @@
+import { type TheoremHostProps } from '@theoremjs/react/ui';
+import { type ConsoleViewProps, type StudioConsoleProps } from './lib/studio-console.ts';
+/** The same tool console in the builder preview and the standalone run tab. */
+export declare function StudioHostConsole(props: StudioConsoleProps): import("react").JSX.Element;
+/** A host's tool console on `transport`, its page tools answered with their stubs. */
+export declare function HostView({ payload, transport, trace, flush, columns, className, }: ConsoleViewProps & Pick<TheoremHostProps, 'transport'>): import("react").JSX.Element;

package/ui/studio-host-console.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TheoremHost } from '@theoremjs/react/ui';
+import { useMemo } from 'react';
+import { createBrowserStudioHostTransport } from "../browser.js";
+import { createStudioHostTransport, studioPageTools } from "../mod.js";
+import { useStudioTransport, } from "./lib/studio-console.js";
+import { STUDIO_LABELS } from "./lib/studio-labels.js";
+/** The same tool console in the builder preview and the standalone run tab. */
+export function StudioHostConsole(props) {
+    const transport = useStudioTransport(props, createStudioHostTransport, createBrowserStudioHostTransport);
+    return _jsx(HostView, { ...props, transport: transport });
+}
+/** A host's tool console on `transport`, its page tools answered with their stubs. */
+export function HostView({ payload, transport, trace, flush, columns, className, }) {
+    const pageTools = useMemo(() => studioPageTools(payload), [payload]);
+    return (_jsx(TheoremHost, { detectCodeLanguage: true, labels: STUDIO_LABELS, transport: transport, pageTools: pageTools, trace: trace, flush: flush, columns: columns, className: className }));
+}

package/ui/studio-host.d.ts

@@ -0,0 +1,73 @@
+import type { LentKeys, StudioSourceError, StudioSourceSpan, StudioToolHandlers, StudioWorkspace } from '../mod.ts';
+import type { studioSurface } from '../surface.ts';
+import type { ProjectSession } from './lib/studio-project.ts';
+import type { RestoredStudio } from './lib/studio-session.ts';
+/** What the studio opens on: the workspace, and what arriving set aside. */
+export interface StudioOpened {
+    start: RestoredStudio;
+    /** A question the chat opens with. */
+    question: string | undefined;
+    /** A kept workspace this arrival replaced, offered back behind Undo. */
+    displaced: StudioWorkspace | undefined;
+    /** True when a kept workspace could not be read back. */
+    discarded: boolean;
+    /** The local project the studio is open on, when it is. */
+    project?: ProjectSession;
+}
+/** What reading the code view's text back found: its errors, and where each node sits in it. */
+export interface CodeApply {
+    errors: StudioSourceError[];
+    spans: StudioSourceSpan[];
+}
+/** An issue the code view marks on the node it belongs to. */
+export interface CodeIssue {
+    nodeId: string;
+    field?: string;
+    message: string;
+}
+/**
+ * The code view. `text` is the latest print; while the visitor is typing the view keeps their
+ * text. `hold` means there is no new print, so the text they have stays. `isReadOnly` shows the
+ * text and takes no edit.
+ */
+export interface StudioCodeProps {
+    text: string;
+    hold: boolean;
+    isReadOnly?: boolean;
+    issues: readonly CodeIssue[];
+    onApply: (text: string) => CodeApply;
+}
+/** What the screen shows of the draft, for a host that follows along. */
+export interface StudioReport {
+    agent: string;
+    type: string;
+    issues: number;
+    section: string | undefined;
+}
+export interface StudioHost {
+    /** The `@theoremjs/agents` version the studio runs, shown under its title. */
+    kernelVersion: string;
+    /** Mounts the screen's surface while the screen is open; returns the unmount. */
+    mountSurface?: (surface: ReturnType<typeof studioSurface>) => () => void;
+    /** Called as what is on screen changes, and with null when the screen closes. */
+    onReport?: (report: StudioReport | null) => void;
+    /**
+     * True when the host's page has a door to Settings (`SettingsRailButton`). The screen then
+     * shows Settings when asked, and Keys are there and not in the editor's header.
+     */
+    hasSettings?: boolean;
+    /**
+     * Keys the page lends to whoever opens the studio, and what runs on them. Without them the
+     * studio runs only on the builder's own keys or machine.
+     */
+    lentKeys?: LentKeys;
+    /**
+     * Handlers for the page's own function tools, by name, as its examples use them. A tool with
+     * none answers with its sample reply or a stub.
+     */
+    toolHandlers?: StudioToolHandlers;
+}
+/** What a page gives every studio it opens, the run tab's too. */
+export type StudioSupplies = Pick<StudioHost, 'lentKeys' | 'toolHandlers'>;
+export declare const StudioHostContext: import("react").Context<StudioHost | null>;
+export declare function useStudioHost(): StudioHost;