@theoremjs/studio 0.0.0-stage → 0.3.2

package/ui/studio-map.js

@@ -0,0 +1,397 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The map: the providers, models, shared settings, profiles, and tools as tokens in columns, with a
+ * line from each to what it feeds. It changes nothing; a node opens what it stands for. `Expand`
+ * shows each profile as a card of its sections and each tool with its description. A node can be
+ * dragged to where it reads best, and the field dragged to pan it; `Tidy` puts every node back. A
+ * right click on a node shows its family alone: what feeds it and what it feeds. A search shows the
+ * family of every node it finds.
+ */
+import { Button } from '@astryxdesign/core/Button';
+import { Center } from '@astryxdesign/core/Center';
+import { ContextMenu } from '@astryxdesign/core/ContextMenu';
+import { EmptyState } from '@astryxdesign/core/EmptyState';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { ScrollableArea } from '@astryxdesign/core/ScrollableArea';
+import { Text } from '@astryxdesign/core/Text';
+import { TextInput } from '@astryxdesign/core/TextInput';
+import { IconArrowsMaximize, IconArrowsMinimize, IconCloud, IconCode, IconExternalLink, IconEye, IconFocus2, IconLayoutGrid, IconSearch, IconX, } from '@tabler/icons-react';
+import { useEffect, useMemo, useRef, useState, } from 'react';
+import { mapFamily, mapFound, mapLayout, mapLinkWords, mapNoteLines, workspaceMap, } from "../mod.js";
+import { IconTypeSafe, modelFamilyMark } from "./brand-icons.js";
+import { FACET_ICON } from "./lib/facet-icons.js";
+import { readKeptMap, writeKeptMap } from "./lib/studio-map-kept.js";
+import { useProject } from "./lib/studio-project.js";
+import { PROFILE_TYPE_ICON, profileTypeIcon, toolTypeIcon } from "./lib/type-icons.js";
+import { MapToken, useTokenWidths } from "./map-token.js";
+import { drags, fieldStart, follow, scrollOnce, usePan } from "./pan.js";
+import './studio-map.css';
+/** With detail a node holds its icon, its name, and two lines of its note; a card's head, one; a row, a section. */
+/** A token's slot: as wide as the longest name it shows in full. */
+const TOKEN_SIZES = {
+    node: { width: 240, height: 24 },
+    card: { head: 60, row: 28, foot: 4 },
+    columnGap: 96,
+    rowGap: 6,
+    heading: 24,
+    groupGap: 16,
+    padding: 24,
+    lineGap: 8,
+};
+/** With detail a node is its token grown to hold its note: the same slot and the same gaps. */
+const DETAIL_SIZES = { ...TOKEN_SIZES, node: { width: 240, height: 84 } };
+const TOKEN_LABEL = 28;
+/** A long name keeps its start. */
+function clipped(label) {
+    return label.length > TOKEN_LABEL ? `${label.slice(0, TOKEN_LABEL - 1)}…` : label;
+}
+function nodeIcon({ kind, type, note }) {
+    const agent = kind === 'agent' ? profileTypeIcon(type) : undefined;
+    if (agent)
+        return agent;
+    if (kind === 'tool')
+        return toolTypeIcon(type ?? '');
+    // A model's note is its API model id, which names the family.
+    if (kind === 'model' && type === 'typesafe')
+        return IconTypeSafe;
+    if (kind === 'model')
+        return modelFamilyMark(note) ?? FACET_ICON.modelBinding;
+    if (kind === 'provider')
+        return IconCloud;
+    if (kind === 'shared' && type && Object.hasOwn(FACET_ICON, type)) {
+        return FACET_ICON[type];
+    }
+    return kind === 'agent' ? PROFILE_TYPE_ICON.text : IconCode;
+}
+function rowIcon(type) {
+    return Object.hasOwn(FACET_ICON, type) ? FACET_ICON[type] : IconCode;
+}
+/** Whether `selected`, the open node, is `node` or a section under it. */
+function isOpen(node, selected) {
+    if (node.kind === 'agent')
+        return selected === node.id || selected.startsWith(`${node.id}/`);
+    if (node.kind === 'model')
+        return node.holds?.includes(selected) ?? false;
+    return node.kind === 'tool' && selected === node.id;
+}
+/** How far the pointer goes before a press is a drag, and how far an arrow key moves a node. */
+const DRAG_FROM = 4;
+const NUDGE = 24;
+const ARROWS = {
+    ArrowLeft: { x: -1, y: 0 },
+    ArrowRight: { x: 1, y: 0 },
+    ArrowUp: { x: 0, y: -1 },
+    ArrowDown: { x: 0, y: 1 },
+};
+/** How the map was left, and what it shows for it: every node, or one node's family. */
+function useKept(whole) {
+    const project = useProject()?.name;
+    const [kept, setKept] = useState(() => readKeptMap(project));
+    const keep = (next) => {
+        setKept(next);
+        writeKeptMap(project, next);
+    };
+    const { expanded } = kept;
+    const known = whole.columns
+        .flat()
+        .some((group) => group.nodes.some((node) => node.id === kept.family));
+    const family = known ? kept.family : undefined;
+    const map = useMemo(() => (family === undefined ? whole : mapFamily(whole, family)), [whole, family]);
+    // A family is laid out afresh from the top. Where its nodes are dragged lasts while it shows.
+    const [lens, setLens] = useState({});
+    const places = expanded ? 'detail' : 'tokens';
+    return {
+        expanded,
+        family,
+        map,
+        moved: family === undefined ? kept[places] : lens,
+        /** Puts dragged nodes at `next`. They are kept when a drag ends, not at every step of it. */
+        put(next, ended) {
+            if (family !== undefined)
+                setLens(next);
+            else if (ended)
+                keep({ ...kept, [places]: next });
+            else
+                setKept({ ...kept, [places]: next });
+        },
+        showFamily(id) {
+            setLens({});
+            const { tokens, detail } = kept;
+            keep({ tokens, detail, expanded, ...(id === undefined ? {} : { family: id }) });
+        },
+        expand() {
+            keep({ ...kept, expanded: !expanded });
+        },
+    };
+}
+/** What makes a node draggable, and movable with Alt and the arrow keys. */
+function useDrag(layout, moved, put) {
+    /** A drag just ended on this node: the click that follows it opens nothing. */
+    const dropped = useRef(false);
+    const [dragging, setDragging] = useState();
+    const draggable = (id) => ({
+        onPointerDown: (event) => {
+            dropped.current = false;
+            const from = layout.nodes[id];
+            if (!from || !drags(event))
+                return;
+            let next;
+            follow(event, (x, y) => {
+                // A press that barely moves is a click.
+                if (!next && Math.hypot(x, y) < DRAG_FROM)
+                    return;
+                if (!next)
+                    setDragging(id);
+                next = { ...moved, [id]: { x: Math.max(from.x + x, 0), y: Math.max(from.y + y, 0) } };
+                put(next, false);
+            }, (lifted) => {
+                if (!next)
+                    return;
+                dropped.current = lifted;
+                // The click, if one follows, comes at once; a drop off the node leaves none to wait for.
+                globalThis.setTimeout(() => {
+                    dropped.current = false;
+                }, 0);
+                setDragging(undefined);
+                put(next, true);
+            });
+        },
+        onClickCapture: (event) => {
+            if (!dropped.current)
+                return;
+            dropped.current = false;
+            event.stopPropagation();
+            event.preventDefault();
+        },
+        onKeyDown: (event) => {
+            const step = event.altKey ? ARROWS[event.key] : undefined;
+            const place = layout.nodes[id];
+            if (!step || !place)
+                return;
+            event.preventDefault();
+            const x = Math.max(place.x + step.x * NUDGE, 0);
+            const y = Math.max(place.y + step.y * NUDGE, 0);
+            put({ ...moved, [id]: { x, y } }, true);
+        },
+    });
+    return { dragging, draggable };
+}
+/** The node or section under the pointer or holding focus: its lines, and what they reach, stay lit. */
+function useLit(layout) {
+    const [lit, setLit] = useState();
+    const [on, onLines] = useMemo(() => {
+        const ids = new Set();
+        const lines = new Set();
+        if (lit === undefined)
+            return [ids, lines];
+        ids.add(lit);
+        for (const { link, from, to } of layout.lines) {
+            if (![link.from, link.to, from, to].includes(lit))
+                continue;
+            lines.add(link);
+            for (const id of [link.from, link.to, from, to])
+                ids.add(id);
+        }
+        return [ids, lines];
+    }, [layout, lit]);
+    const lights = (id) => ({
+        onPointerEnter: () => {
+            setLit(id);
+        },
+        onPointerLeave: () => {
+            setLit(undefined);
+        },
+        onFocus: () => {
+            setLit(id);
+        },
+        onBlur: () => {
+            setLit(undefined);
+        },
+    });
+    return { lit, on, onLines, lights };
+}
+/**
+ * A family, and the map with or without detail, each start from the top left, or as near it as
+ * shows the node that is open.
+ */
+function useStart(field, family, open) {
+    const latest = useRef(open.place);
+    latest.current = open.place;
+    // invariant: the sizes are one of two constants, so they change exactly when the detail does.
+    const { sizes } = open;
+    useEffect(() => {
+        const node = field.current;
+        if (!node)
+            return;
+        const place = latest.current;
+        const at = family === undefined ? place : undefined;
+        // The field starts past the room around it.
+        return scrollOnce(node, (scroller) => {
+            const hidden = at !== undefined &&
+                (at.x + sizes.node.width > scroller.clientWidth ||
+                    at.y + at.height > scroller.clientHeight);
+            const { left, top } = fieldStart(node, scroller);
+            return {
+                left: left + (hidden ? at.x - sizes.padding : 0),
+                top: top + (hidden ? at.y - sizes.padding - sizes.heading : 0),
+            };
+        });
+    }, [field, family, sizes]);
+}
+/** What a right click offers: on a node, its family and what it opens; anywhere, the field's own. */
+function menuOf(onNode, onOpen, actions) {
+    const { family, expanded, isMoved, showFamily, expand, tidy } = actions;
+    const forNode = [];
+    if (onNode && onNode.id !== family) {
+        forNode.push({
+            label: 'Show only its family',
+            icon: IconFocus2,
+            onClick: () => {
+                showFamily(onNode.id);
+            },
+        });
+    }
+    const opens = onNode?.opens;
+    if (opens !== undefined) {
+        forNode.push({
+            label: 'Open',
+            icon: IconExternalLink,
+            onClick: () => {
+                onOpen(opens);
+            },
+        });
+    }
+    if (onNode)
+        forNode.push({ type: 'divider' });
+    const everything = {
+        label: 'Show everything',
+        icon: IconEye,
+        onClick: () => {
+            showFamily(undefined);
+        },
+    };
+    return [
+        ...forNode,
+        ...(family === undefined ? [] : [everything]),
+        {
+            label: expanded ? 'Collapse' : 'Expand',
+            icon: expanded ? IconArrowsMinimize : IconArrowsMaximize,
+            onClick: expand,
+        },
+        { label: 'Tidy', icon: IconLayoutGrid, isDisabled: !isMoved, onClick: tidy },
+    ];
+}
+/** Over the field's corner: the search, what the right click offers, and Close. */
+function MapTools({ actions, query, onQuery, onClose, }) {
+    const { family, expanded, isMoved, showFamily, expand, tidy } = actions;
+    return (_jsxs("div", { className: "studio-map-tools", children: [_jsx(TextInput, { label: "Search the map", isLabelHidden: true, size: "sm", width: 200, placeholder: "Search", startIcon: IconSearch, hasClear: true, value: query, onChange: onQuery }), family !== undefined && (_jsx(Button, { label: "Show everything", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconEye, size: "sm" }), onClick: () => {
+                    showFamily(undefined);
+                } })), isMoved && (_jsx(Button, { label: "Tidy", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconLayoutGrid, size: "sm" }), onClick: tidy })), _jsx(IconButton, { label: expanded ? 'Collapse' : 'Expand', variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: expanded ? IconArrowsMinimize : IconArrowsMaximize, size: "sm" }), tooltip: expanded ? 'Show each node as a token' : 'Show sections and descriptions', onClick: expand }), _jsx(IconButton, { label: "Close map", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconX, size: "sm" }), tooltip: "Close the map", onClick: onClose })] }));
+}
+/** What marks a node on the field, whichever way it is drawn. */
+function marks({ node, on, isFound, isDragging }) {
+    const isLit = on.has(node.id) || (node.rows ?? []).some((row) => on.has(row.id));
+    return {
+        'data-map-node': node.id,
+        'data-on': isLit ? '' : undefined,
+        'data-found': isFound ? '' : undefined,
+        'data-dragging': isDragging ? '' : undefined,
+    };
+}
+function TokenNode(props) {
+    const { node, place, joins, selected, onOpen, lights, drag } = props;
+    const { opens } = node;
+    const open = isOpen(node, selected);
+    return (_jsx(MapToken, { id: node.id, label: clipped(node.long ?? node.label), icon: nodeIcon(node), x: place.x, y: place.y + place.height / 2, color: open ? 'blue' : undefined, description: [node.note, joins].filter(Boolean).join('. ') || undefined, onOpen: opens === undefined
+            ? undefined
+            : () => {
+                onOpen(opens);
+            }, title: (node.long ?? node.label).length > TOKEN_LABEL ? (node.long ?? node.label) : undefined, "aria-current": open ? 'true' : undefined, ...marks(props), ...lights(node.id), ...drag }));
+}
+/** With detail: a node's icon, name and note, and under a profile's a row for each section. */
+function DetailNode(props) {
+    const { node, place, joins, selected, on, onOpen, lights, drag } = props;
+    const { opens } = node;
+    const rows = node.rows ?? [];
+    const box = { left: place.x, top: place.y, height: place.height };
+    const head = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "studio-map-name", children: [_jsx(Icon, { icon: nodeIcon(node), size: "sm" }), _jsx(Text, { type: "supporting", color: "inherit", weight: "medium", maxLines: 1, hasTruncateTooltip: false, children: node.label })] }), node.note && (_jsx(Text, { type: "supporting", maxLines: rows.length > 0 ? 1 : mapNoteLines(node), hasTruncateTooltip: false, className: "studio-map-note", children: node.note }))] }));
+    const button = {
+        type: 'button',
+        title: node.note || undefined,
+        'aria-description': joins || undefined,
+        disabled: opens === undefined,
+        onClick: () => {
+            if (opens !== undefined)
+                onOpen(opens);
+        },
+        ...lights(node.id),
+    };
+    if (rows.length === 0) {
+        return (_jsx("button", { ...button, ...drag, ...marks(props), className: "studio-map-node", "data-map-token": node.id, style: box, "aria-current": isOpen(node, selected) ? 'true' : undefined, children: head }));
+    }
+    return (_jsxs("div", { className: "studio-map-card", "data-map-token": node.id, style: box, "data-open": isOpen(node, selected) ? '' : undefined, ...marks(props), ...drag, children: [_jsx("button", { ...button, className: "studio-map-head", "aria-current": selected === node.id ? 'true' : undefined, children: head }), rows.map((row) => (_jsxs("button", { type: "button", className: "studio-map-row", "aria-current": selected === row.id ? 'true' : undefined, "data-on": on.has(row.id) ? '' : undefined, onClick: () => {
+                    onOpen(row.opens);
+                }, ...lights(row.id), children: [_jsx(Icon, { icon: rowIcon(row.type), size: "sm" }), _jsx(Text, { type: "supporting", color: "inherit", weight: "medium", maxLines: 1, hasTruncateTooltip: false, children: row.label }), row.note && (_jsx(Text, { type: "supporting", maxLines: 1, justify: "end", hasTruncateTooltip: false, className: "studio-map-row-note", children: row.note }))] }, row.id)))] }));
+}
+export function StudioMap({ workspace, shared, selected, onOpen, onClose, }) {
+    const whole = useMemo(() => workspaceMap(workspace, shared), [workspace, shared]);
+    const { expanded, family, map: kept, moved, put, showFamily, expand } = useKept(whole);
+    const [query, setQuery] = useState('');
+    const found = useMemo(() => mapFound(kept, query), [kept, query]);
+    const map = useMemo(() => (query.trim() === '' ? kept : mapFamily(kept, found)), [kept, query, found]);
+    const isNothing = query.trim() !== '' && found.length === 0;
+    const field = useRef(null);
+    const sizes = expanded ? DETAIL_SIZES : TOKEN_SIZES;
+    const drawn = useMemo(() => ({ map, expanded }), [map, expanded]);
+    const widths = useTokenWidths(field, drawn);
+    const layout = useMemo(() => mapLayout(map, sizes, { moved, widths, detail: expanded }), [map, sizes, expanded, moved, widths]);
+    const nodes = map.columns.flat().flatMap((group) => group.nodes);
+    const opened = nodes.find((node) => isOpen(node, selected))?.id;
+    useStart(field, family, {
+        place: opened === undefined ? undefined : layout.nodes[opened],
+        sizes,
+    });
+    const { dragging, draggable } = useDrag(layout, moved, put);
+    const { panning, pan } = usePan('[data-map-node]');
+    const { lit, on, onLines, lights } = useLit(layout);
+    const actions = {
+        family,
+        expanded,
+        isMoved: nodes.some((node) => Object.hasOwn(moved, node.id)),
+        showFamily,
+        expand,
+        tidy: () => {
+            put({}, true);
+        },
+    };
+    /** The node the menu was opened on, if on one. */
+    const [menuOn, setMenuOn] = useState();
+    const menu = menuOf(nodes.find((node) => node.id === menuOn), onOpen, actions);
+    const Node = expanded ? DetailNode : TokenNode;
+    const open = nodes.find((node) => isOpen(node, selected))?.id;
+    // The open node's lines are drawn over the rest, and the lit ones over those.
+    const over = (line) => onLines.has(line.link) ? 2 : line.from === open || line.to === open ? 1 : 0;
+    const lines = [...layout.lines].sort((a, b) => over(a) - over(b));
+    return (_jsxs("div", { className: "studio-map-frame", 
+        // why: the frame only wraps the map; Escape from anywhere inside it leaves the family.
+        role: "none", onKeyDown: (event) => {
+            if (event.key !== 'Escape' || family === undefined)
+                return;
+            // Escape closes an open menu first; that one is not for the family.
+            if (event.target.closest('[role="menu"]'))
+                return;
+            event.stopPropagation();
+            showFamily(undefined);
+        }, children: [_jsx(ScrollableArea, { className: "studio-map-scroll", axis: "both", role: "region", label: "Map", height: "100%", overscroll: "allow", children: _jsx(ContextMenu, { items: menu, label: "Map actions", "data-map-field": "", children: _jsxs("div", { ref: field, className: "studio-map", "data-lit": lit === undefined || dragging !== undefined ? undefined : '', "data-panning": panning ? '' : undefined, onPointerDown: pan, onContextMenuCapture: (event) => {
+                            setMenuOn(event.target.closest('[data-map-node]')?.dataset.mapNode);
+                        }, style: {
+                            '--map-width': `${String(layout.width)}px`,
+                            '--map-height': `${String(layout.height)}px`,
+                            '--map-slot': `${String(sizes.node.width)}px`,
+                            '--map-line': `${String(sizes.card.row)}px`,
+                        }, children: [_jsx("svg", { className: "studio-map-lines", width: layout.width, height: layout.height, "aria-hidden": "true", children: lines.map(({ link, from, to, d }) => (_jsx("path", { className: "map-line", d: d, "data-kind": link.kind, "data-on": onLines.has(link) ? '' : undefined, "data-open": from === open || to === open ? '' : undefined }, `${link.kind}:${link.from}:${link.to}`))) }), layout.headings.map(({ label, x, y }) => (_jsx("div", { className: "studio-map-heading", style: { left: x, top: y }, children: _jsx(Text, { type: "supporting", color: "secondary", weight: "semibold", children: label }) }, label))), nodes.map((node) => {
+                                const place = layout.nodes[node.id];
+                                return (place && (_jsx(Node, { node: node, place: place, joins: mapLinkWords(map, node.id), selected: selected, on: on, isFound: found.includes(node.id), isDragging: dragging === node.id, onOpen: onOpen, lights: lights, drag: draggable(node.id) }, node.id)));
+                            })] }) }) }), isNothing && (_jsx(Center, { className: "studio-map-nothing", children: _jsx(EmptyState, { headingLevel: 2, icon: _jsx(Icon, { icon: IconSearch, size: "lg" }), title: "Nothing matches" }) })), _jsx(MapTools, { actions: actions, query: query, onQuery: setQuery, onClose: onClose })] }));
+}

package/ui/studio-nav.d.ts

@@ -0,0 +1,24 @@
+/** Where the website is. A studio running on its own sends its other pages there. */
+export declare const THEOREM_SITE = "https://theorem.masudlewis.com";
+/** The width of the studio's side nav: the tree's, and Settings' sections. */
+export declare const NAV_WIDTH = 256;
+/** The website's pages, in the rail's order. */
+export declare const SITE_PAGES: readonly [{
+    readonly label: "Studio";
+    readonly href: "/studio";
+}, {
+    readonly label: "Docs";
+    readonly href: "/docs";
+}];
+/** Where the package is published, in the rail's order. */
+export declare function packageLinks(name: string, repository: string): readonly [{
+    readonly label: "GitHub";
+    readonly href: string;
+}, {
+    readonly label: "JSR";
+    readonly href: `https://jsr.io/${string}`;
+}, {
+    readonly label: "npm";
+    readonly href: `https://www.npmjs.com/package/${string}`;
+}];
+export type PackageLinks = ReturnType<typeof packageLinks>;

package/ui/studio-nav.js

@@ -0,0 +1,17 @@
+/** Where the website is. A studio running on its own sends its other pages there. */
+export const THEOREM_SITE = 'https://theorem.masudlewis.com';
+/** The width of the studio's side nav: the tree's, and Settings' sections. */
+export const NAV_WIDTH = 256;
+/** The website's pages, in the rail's order. */
+export const SITE_PAGES = [
+    { label: 'Studio', href: '/studio' },
+    { label: 'Docs', href: '/docs' },
+];
+/** Where the package is published, in the rail's order. */
+export function packageLinks(name, repository) {
+    return [
+        { label: 'GitHub', href: repository },
+        { label: 'JSR', href: `https://jsr.io/${name}` },
+        { label: 'npm', href: `https://www.npmjs.com/package/${encodeURIComponent(name)}` },
+    ];
+}

package/ui/studio-no-project.d.ts

@@ -0,0 +1,5 @@
+/** Shown in place of the studio when no local server has a project open. */
+export declare function StudioNoProject({ title, description, }: {
+    title?: string;
+    description?: string;
+}): import("react").JSX.Element;

package/ui/studio-no-project.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Center } from '@astryxdesign/core/Center';
+import { EmptyState } from '@astryxdesign/core/EmptyState';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconPlugConnectedX } from '@tabler/icons-react';
+/** Shown in place of the studio when no local server has a project open. */
+export function StudioNoProject({ title = 'No project is open', description = 'Start the studio server in your project (studio/server/serve.ts with your setup file), then reload.', }) {
+    return (_jsx(Center, { style: { height: '100%' }, children: _jsx(EmptyState, { headingLevel: 1, icon: _jsx(Icon, { icon: IconPlugConnectedX, size: "lg" }), title: title, description: description }) }));
+}

package/ui/studio-run.css

@@ -0,0 +1,76 @@
+/* Live voice still reads these from the root. */
+:root {
+  --color-ink: #000000;
+  --color-paper: #f7f5f0;
+  --color-paper-bright: #ffffff;
+  --color-mute: #464646;
+  --ink-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --ink-duration: 0.3s;
+}
+
+/* The runner fills the room the host gives the page. Keys and View trace sit above it, on the
+   page's inset. */
+.run-page {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+.run-controls {
+  display: flex;
+  flex: none;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4);
+}
+
+.run-page > :not(.run-controls),
+.run-page > .astryx-layout,
+.run-page > div > .astryx-layout,
+.run-chat {
+  flex: 1;
+  min-height: 0;
+}
+
+/* The page's own controls are the header row. An empty layout header would
+   only repeat that inset. */
+.run-chat > div > .astryx-layout-header:not(:has(button)),
+.run-page > .astryx-layout > div > .astryx-layout-header:not(:has(button)),
+.run-page > div > .astryx-layout > div > .astryx-layout-header:not(:has(button)) {
+  display: none;
+}
+
+/* The split is already at its final widths, so the panels slide into place
+   and the fields inside the request do not reflow while they move. */
+@media (prefers-reduced-motion: no-preference) {
+  .run-page .theorem-console-request {
+    animation: theorem-console-request var(--duration-medium) var(--ease-standard);
+  }
+
+  .run-page .theorem-console-response {
+    animation: theorem-console-response var(--duration-medium) var(--ease-standard);
+  }
+}
+
+@keyframes theorem-console-request {
+  from {
+    /* Two fifths of the pair, shifted by three quarters of itself, starts centred. */
+    translate: 75% 0;
+  }
+}
+
+@keyframes theorem-console-response {
+  from {
+    translate: 100% 0;
+  }
+}
+
+/* In the shell, the run page is clipped to the panel's corners. */
+[role="main"]:has(.run-page) {
+  overflow: hidden;
+}

package/ui/studio-run.d.ts

@@ -0,0 +1,14 @@
+import { type StudioRunPayload } from '../mod.ts';
+import type { StudioRunOpened } from './lib/studio-run-open.ts';
+import type { StudioSupplies } from './studio-host.ts';
+/** The name the page and the document title use. A host has no handle: it's named by its id. */
+export declare function studioRunTitle(payload: StudioRunPayload): string;
+/**
+ * An agent opened in a tab of its own: the runner fills the page, with View trace and Keys above it.
+ * `opened` is what `openStudioRun` returned for this tab.
+ */
+export declare function StudioRunScreen({ opened, supplies, }: {
+    opened: StudioRunOpened;
+    /** What the page gives the run, as it gives the studio. */
+    supplies?: StudioSupplies;
+}): import("react").JSX.Element;

package/ui/studio-run.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@astryxdesign/core/Button';
+import { Icon } from '@astryxdesign/core/Icon';
+import { Popover } from '@astryxdesign/core/Popover';
+import { IconActivity, IconKey } from '@tabler/icons-react';
+import { TheoremThemeProvider, TracePlacement } from '@theoremjs/react/ui';
+import { useState, useSyncExternalStore } from 'react';
+import { studioKeySlots } from "../browser.js";
+import { modelRoute, modelSlots, onStudioLocal, STUDIO_PROVIDERS, } from "../mod.js";
+import { recordsTraces } from "./lib/project-traces.js";
+import { ProjectContext } from "./lib/studio-project.js";
+import { StudioKeys, useStudioConnection } from "./studio-connection.js";
+import { StudioRunner } from "./studio-runner.js";
+import './studio-run.css';
+/** The width below which these controls keep only their icon. */
+const PHONE = '(width < 768px)';
+function usePhone() {
+    return useSyncExternalStore((change) => {
+        const query = globalThis.matchMedia(PHONE);
+        query.addEventListener('change', change);
+        return () => {
+            query.removeEventListener('change', change);
+        };
+    }, () => globalThis.matchMedia(PHONE).matches, () => false);
+}
+/** The name the page and the document title use. A host has no handle: it's named by its id. */
+export function studioRunTitle(payload) {
+    return 'identity' in payload.profile ? payload.profile.identity.handle : payload.agentId;
+}
+/** `payload` with each `from` slot, on its agent and the agents it calls, renamed to `to`. */
+function withRenamedSlot(current, from, to) {
+    const rename = (value) => ({
+        ...value,
+        ...(value.keySlot === from ? { keySlot: to } : {}),
+        ...(value.fallbackKeySlot === from ? { fallbackKeySlot: to } : {}),
+    });
+    const renamed = (profile) => profile.type === 'host'
+        ? profile
+        : {
+            ...profile,
+            models: Object.fromEntries(Object.entries(profile.models).map(([id, model]) => [id, rename(model)])),
+        };
+    return {
+        ...current,
+        profile: renamed(current.profile),
+        ...(current.dependencies
+            ? {
+                dependencies: current.dependencies.map((dependency) => ({
+                    ...dependency,
+                    profile: renamed(dependency.profile),
+                })),
+            }
+            : {}),
+    };
+}
+/** The providers a run's models name: the ones its agent compiled with, else the studio's own. */
+function providersOf(payload) {
+    return payload.providers ?? STUDIO_PROVIDERS;
+}
+/** `payload` with `slot` as the key of each model that reads none, unless it is a host. */
+function withAddedSlot(current, slot) {
+    if (current.profile.type === 'host')
+        return current;
+    return {
+        ...current,
+        profile: {
+            ...current.profile,
+            models: Object.fromEntries(Object.entries(current.profile.models).map(([id, binding]) => [
+                id,
+                modelSlots(providersOf(current), binding).keySlot
+                    ? binding
+                    : { ...binding, keySlot: slot },
+            ])),
+        },
+    };
+}
+/** The Keys button and the popover it opens. */
+function KeysPopover({ connection, isOpen, onOpenChange, onAddSlot, onRenameSlot, phone, }) {
+    return (_jsx(Popover, { label: "Keys", placement: "below", alignment: "end", width: 360, isOpen: isOpen, onOpenChange: onOpenChange, content: _jsx(StudioKeys, { connection: connection, onAddSlot: onAddSlot, onRenameSlot: onRenameSlot }), children: _jsx(Button, { label: "Keys", isIconOnly: phone, icon: _jsx(Icon, { icon: IconKey, size: "sm" }), "aria-pressed": isOpen }) }));
+}
+/**
+ * An agent opened in a tab of its own: the runner fills the page, with View trace and Keys above it.
+ * `opened` is what `openStudioRun` returned for this tab.
+ */
+export function StudioRunScreen({ opened, supplies, }) {
+    const [payload, setPayload] = useState(opened.payload);
+    // The agent and the agents it calls each read their own key slots.
+    const profiles = [
+        payload.profile,
+        ...(payload.dependencies ?? []).map((dependency) => dependency.profile),
+    ];
+    const models = profiles.flatMap((profile) => profile.type === 'host'
+        ? []
+        : Object.values(profile.models).map((binding) => ({
+            ...modelRoute(providersOf(payload), profile.type, binding),
+            builtInTools: binding.builtInTools,
+            local: onStudioLocal(binding.provider, payload.providers !== undefined),
+        })));
+    const connection = useStudioConnection(models, payload.localBaseUrl, [
+        ...profiles.flatMap((profile) => studioKeySlots(profile)),
+        ...profiles.flatMap((profile) => profile.type === 'host'
+            ? []
+            : Object.values(profile.models).flatMap((binding) => Object.values(modelSlots(providersOf(payload), binding)))),
+    ], supplies);
+    const [keysOpen, setKeysOpen] = useState(payload.connectionMode === 'byok');
+    const traced = recordsTraces(payload);
+    const [traceOpen, setTraceOpen] = useState(false);
+    const phone = usePhone();
+    const { mode, runtime } = connection;
+    const title = studioRunTitle(payload);
+    const renameSlot = (from, to) => {
+        setPayload((current) => withRenamedSlot(current, from, to));
+    };
+    return (_jsxs(TheoremThemeProvider, { mode: "dark", children: [_jsx("title", { children: `${title} · theorem studio` }), _jsx(TracePlacement, { value: "panel", children: _jsxs("div", { className: "run-page", children: [_jsxs("div", { className: "run-controls", children: [traced ? (_jsx(Button, { label: traceOpen ? 'Hide trace' : 'View trace', isIconOnly: phone, icon: _jsx(Icon, { icon: IconActivity, size: "sm" }), "aria-pressed": traceOpen, onClick: () => {
+                                        setTraceOpen((open) => !open);
+                                    } })) : null, _jsx(KeysPopover, { connection: connection, isOpen: keysOpen, onOpenChange: setKeysOpen, onAddSlot: (slot) => {
+                                        setPayload((current) => withAddedSlot(current, slot));
+                                    }, onRenameSlot: renameSlot, phone: phone })] }), _jsx(ProjectContext.Provider, { value: opened.project, children: _jsx(StudioRunner, { payload: payload, mode: mode, runtime: runtime, trace: traced ? traceOpen : undefined, flush: true, columns: true, className: "run-chat" }, mode) })] }) })] }));
+}