@theoremjs/studio 0.0.0-stage → 0.3.2

package/ui/studio-screen.js

@@ -0,0 +1,2078 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Banner } from '@astryxdesign/core/Banner';
+import { Button } from '@astryxdesign/core/Button';
+import { DropdownMenu } from '@astryxdesign/core/DropdownMenu';
+import { Heading } from '@astryxdesign/core/Heading';
+import { HStack } from '@astryxdesign/core/HStack';
+import { useClipboard } from '@astryxdesign/core/hooks';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { Layout, LayoutContent, LayoutPanel } from '@astryxdesign/core/Layout';
+import { ResizeHandle, useResizable } from '@astryxdesign/core/Resizable';
+import { ScrollableArea } from '@astryxdesign/core/ScrollableArea';
+import { Section } from '@astryxdesign/core/Section';
+import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl';
+import { Selector } from '@astryxdesign/core/Selector';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Text } from '@astryxdesign/core/Text';
+import { TextInput } from '@astryxdesign/core/TextInput';
+import { useToast } from '@astryxdesign/core/Toast';
+import { Token } from '@astryxdesign/core/Token';
+import { Tooltip } from '@astryxdesign/core/Tooltip';
+import { TreeList } from '@astryxdesign/core/TreeList';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconActivity, IconAdjustmentsHorizontal, IconArrowBarToDown, IconArrowLeft, IconBrowserShare, IconCheck, IconCloud, IconCode, IconCopy, IconCopyPlus, IconFile, IconFileSmile, IconFileZip, IconKey, IconMenu2, IconPlayerPlay, IconPlaylistX, IconPlus, IconRestore, IconRotateClockwise, IconSearch, IconShieldSearch, IconSitemap, IconSparkles, IconTool, IconX, } from '@tabler/icons-react';
+import { profileGraphFacet } from '@theoremjs/agents';
+import { InPlace, PaneFailure, RaisedPane, useDisclosureMotion, useLabels, } from '@theoremjs/react/ui';
+import { canonical } from "../canonical.js";
+import { addAgent, addArchitectExample, addProvider, agentNodeId, compileWorkspace, createBlankDraft, createConsoleExampleDraft, createDecisionExampleDraft, createExampleDraft, createGeminiEmbeddingExampleDraft, createLiveExampleDraft, createNarratorExampleDraft, createStudioRunId, draftFacets, duplicateAgent, editedSince, excludeFacet, includableFacets, includeFacet, libraryDraft, localProviderAddress, mergedWithFiles, modelBindingNodeId, modelRoute, modelSharers, modelSlots, nodeOrigins, onStudioLocal, openOutcome, originLabel, originPlace, originWay, providerIdOf, providerNodeId, providerUse, rebased, removeAgent, removeLibraryTool, removeProvider, renameProvider, reopened, resetAgent, resetAll, resetLibraryTool, resetProvider, sampleToolInput, saveStudioRunPayload, scopedNodeId, setToolAllowed, sharedAsk, sharedAt, sharedEntries, studioNodeRef, studioSource, studioTree, toolSpecKeyOf, withAgentDraft, withFilesChosen, withProvider, workspaceNodeRef, workspaceRunAgent, workspaceTree, writeAsk, } from "../mod.js";
+import { studioSurface } from "../surface.js";
+import './studio.css';
+import { lazy, memo, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { flushSync } from 'react-dom';
+import { ActingAsButton } from "./acting-as-button.js";
+import { AddProviderButton } from "./add-provider.js";
+import { IconTypeSafe, modelFamilyMark } from "./brand-icons.js";
+import { useConfirmWrite } from "./confirm-write.js";
+import { ConfirmWrite, ISSUE_ROW_ATTRIBUTE, LeavePage, ListBadges, LocalConnection, ProbedAgent, ProjectAsks, QuestionLink, RowOrigins, RunsOn, WorkspaceContext, } from "./inspector-context.js";
+import { ActingAsContext, chatKeyOf, useActingAsState } from "./lib/acting-as.js";
+import { FACET_ICON } from "./lib/facet-icons.js";
+import { movePanel } from "./lib/panel-motion.js";
+import { screenEndpoint } from "./lib/project-address.js";
+import { recordsTraces } from "./lib/project-traces.js";
+import { clearConversation, restoreConversation, saveConversation, } from "./lib/studio-conversation.js";
+import { STUDIO_EXAMPLES } from "./lib/studio-examples.js";
+import { pageInputsOf, sentPageValues, usePageValues } from "./lib/studio-page.js";
+import { getPref, setPref } from "./lib/studio-prefs.js";
+import { NO_ASKS, openInEditor, openProject, ProjectContext, projectCode, readFiles, useProject, } from "./lib/studio-project.js";
+import { dropAside, keepReading, keptReading, setAside } from "./lib/studio-restore.js";
+import { projectKey } from "./lib/studio-session.js";
+import { closeSettings, openSettings, settingsScreen, useSettingsDoor, } from "./lib/studio-settings.js";
+import { createStudioStore } from "./lib/studio-store.js";
+import { subscribeToFiles } from "./lib/studio-watch.js";
+import { toolCredential } from "./lib/tool-credentials.js";
+import { runToolProbe } from "./lib/tool-probe.js";
+import { PROFILE_TYPE_ICON, toolTypeIcon } from "./lib/type-icons.js";
+import { warmWhenIdle } from "./lib/when-idle.js";
+import { addToolSpec, ProfileEditor } from "./profile-editor.js";
+import { ProviderEditor } from "./provider-editor.js";
+import { SharedChange } from "./shared-change.js";
+import { ChooseConflictsContext, FileConflicts } from "./studio-conflicts.js";
+import { StudioKeys, useStudioConnection, } from "./studio-connection.js";
+import { StudioHostContext, useStudioHost, } from "./studio-host.js";
+import { NAV_WIDTH } from "./studio-nav.js";
+import { StudioRunner } from "./studio-runner.js";
+import { ProjectSave, ProjectTokens, useProjectSave } from "./studio-save.js";
+// The tester, Settings, the map and the code view load when they first open, or once the page is idle.
+const testerPanel = () => import("./guardrail-tester.js");
+const settingsPanel = () => import("./studio-settings.js");
+const mapPanel = () => import("./studio-map.js");
+const codePane = () => import("./studio-code-pane.js");
+const StudioMap = lazy(() => mapPanel().then((map) => ({ default: map.StudioMap })));
+const CodeBody = lazy(() => codePane().then((code) => ({ default: code.CodeBody })));
+const ProviderCode = lazy(() => codePane().then((code) => ({ default: code.ProviderCode })));
+const GuardrailTester = lazy(() => testerPanel().then((tester) => ({ default: tester.GuardrailTester })));
+const StudioSettings = lazy(() => settingsPanel().then((settings) => ({ default: settings.StudioSettings })));
+/** A node's icon; Identity shows the profile type's once one is picked. */
+function nodeIcon(draft, ref) {
+    const type = draft.identity.profileType;
+    if (ref.facet === 'identity' && type)
+        return PROFILE_TYPE_ICON[type];
+    if (ref.facet === 'modelBinding') {
+        const binding = draft.modelBindings.find((each) => each.key === ref.key);
+        if (!binding)
+            return FACET_ICON.modelBinding;
+        const definition = draft.providers.find((each) => each.id === binding.provider)?.definition;
+        if (definition === 'typesafe')
+            return IconTypeSafe;
+        return modelFamilyMark(binding.apiId) ?? FACET_ICON.modelBinding;
+    }
+    if (ref.facet !== 'toolSpec')
+        return FACET_ICON[ref.facet];
+    const tool = draft.toolSpecs.find((spec) => spec.key === ref.key);
+    return tool ? toolTypeIcon(tool.toolType) : IconTool;
+}
+/** A row's hover action: stops at the button so the row itself isn't selected. */
+function actionButton(label, icon, onPress) {
+    return (_jsx(IconButton, { label: label, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: icon, size: "sm" }), tooltip: label, onClick: (event) => {
+            event.stopPropagation();
+            onPress();
+        } }));
+}
+function rowAction(label, icon, onPress) {
+    return _jsx("span", { className: "studio-tree-action", children: actionButton(label, icon, onPress) });
+}
+function treeItem(tree, node, isTop = false) {
+    const { draft, scope, selectedId, onSelect, setDraft } = tree;
+    const facet = node.ref.facet;
+    const id = scope(node.id);
+    const isOptional = isTop && facet !== 'toolSpec' && profileGraphFacet(facet)?.optional === true;
+    return {
+        id,
+        label: node.label,
+        startContent: _jsx(Icon, { icon: nodeIcon(draft, node.ref), size: "sm", color: "secondary" }),
+        endContent: isOptional
+            ? rowAction(`Remove ${node.label}`, IconX, () => {
+                setDraft((current) => excludeFacet(current, facet));
+            })
+            : undefined,
+        className: isOptional ? 'studio-tree-row' : undefined,
+        isSelected: id === selectedId,
+        isExpanded: node.children.length > 0,
+        onClick: () => {
+            onSelect(id);
+        },
+        children: node.children.length
+            ? node.children.map((child) => treeItem(tree, child))
+            : undefined,
+    };
+}
+/** An optional section the type allows but the draft leaves out: dimmed; a click adds it. */
+function offItem({ scope, onSelect, setDraft }, facet) {
+    const label = profileGraphFacet(facet)?.label ?? facet;
+    const add = () => {
+        setDraft((current) => includeFacet(current, facet));
+        onSelect(scope(facet));
+    };
+    return {
+        id: scope(facet),
+        label: _jsx("span", { className: "studio-tree-off", children: label }),
+        startContent: (_jsx(Icon, { icon: FACET_ICON[facet], size: "sm", color: "disabled" })),
+        endContent: rowAction(`Add ${label}`, IconPlus, add),
+        className: 'studio-tree-row',
+        onClick: add,
+    };
+}
+/**
+ * One agent: its root row, labelled with its id, holds every section the profile type allows, in
+ * catalog order, optional ones left out dimmed. Only the open agent shows its sections. Its tools
+ * are picked in its Tools section; the library lists them once for every agent.
+ */
+function agentItem(tree, isOpen, actions) {
+    const draft = { ...tree.draft, toolSpecs: [] };
+    const root = studioTree(draft);
+    const shown = new Map(root.children.map((node) => [node.id, node]));
+    const off = includableFacets(draft);
+    const all = draftFacets({ ...draft, included: [...draft.included, ...off] }).filter((facet) => facet !== 'identity');
+    const children = all.map((facet) => {
+        const node = shown.get(facet);
+        return node ? treeItem(tree, node, true) : offItem(tree, facet);
+    });
+    return {
+        ...treeItem(tree, { ...root, children: [] }),
+        endContent: actions,
+        className: 'studio-tree-row',
+        isExpanded: isOpen,
+        children: isOpen ? children : undefined,
+    };
+}
+function agentItems(state) {
+    const { workspace, focus, selectedId, onSelect, update, setDraft } = state;
+    const isOnly = workspace.agents.length === 1;
+    return workspace.agents.map((agent) => {
+        const draft = libraryDraft(workspace, agent.key) ?? createBlankDraft();
+        const name = agent.identity.agentId || 'this agent';
+        return agentItem({
+            draft,
+            scope: (id) => scopedNodeId(agent.key, id),
+            selectedId,
+            onSelect,
+            setDraft,
+        }, agent.key === focus, _jsxs("span", { className: "studio-tree-action", children: [actionButton(`Duplicate ${name}`, IconCopyPlus, () => {
+                    update((current) => duplicateAgent(current, agent.key));
+                }), !isOnly &&
+                    actionButton(`Remove ${name}`, IconX, () => {
+                        update((current) => removeAgent(current, agent.key));
+                    })] }));
+    });
+}
+/** The tool library, every agent picks its tools from these: those whose name or description holds `query`. */
+function toolItems({ workspace, selectedId, onSelect, update }, query) {
+    const needle = query.trim().toLowerCase();
+    return workspaceTree(workspace).tools.flatMap((node) => {
+        const tool = workspace.toolSpecs.find((spec) => spec.key === toolSpecKeyOf(node.id));
+        const text = `${node.label} ${tool?.description ?? ''}`.toLowerCase();
+        if (needle && !text.includes(needle))
+            return [];
+        return [
+            {
+                id: node.id,
+                label: node.label,
+                startContent: (_jsx(Icon, { icon: tool ? toolTypeIcon(tool.toolType) : IconTool, size: "sm", color: "secondary" })),
+                endContent: rowAction(`Remove ${node.label}`, IconX, () => {
+                    if (tool)
+                        update((current) => removeLibraryTool(current, tool.key));
+                }),
+                className: 'studio-tree-row',
+                isSelected: node.id === selectedId,
+                onClick: () => {
+                    onSelect(node.id);
+                },
+                style: CHEVRON_COLUMN,
+            },
+        ];
+    });
+}
+/** Where a shared setting is declared: its real name and its file. */
+function declaredAt({ setting }) {
+    return `${setting.name} · ${setting.file}:${String(setting.line)}`;
+}
+/**
+ * The providers every agent's models pick from, each over the agents with a model on it. A
+ * provider's row opens its own settings; an agent's opens its first model there.
+ */
+function providerItems(tree) {
+    const { workspace, selectedId, onSelect, update, ownsProviders } = tree;
+    return workspace.providers.map((provider) => {
+        const id = providerNodeId(provider.id);
+        // One a model runs on stays: its row lists the agents to move first.
+        const isFree = ownsProviders && providerUse(workspace, provider.id).models === 0;
+        const users = workspace.agents.flatMap((agent) => {
+            const binding = agent.modelBindings.find((each) => each.provider === provider.id);
+            if (!binding)
+                return [];
+            return [
+                {
+                    id: `${id}:${agent.key}`,
+                    label: agent.identity.agentId || 'New agent',
+                    startContent: (_jsx(Icon, { icon: PROFILE_TYPE_ICON[agent.identity.profileType || 'text'], size: "sm", color: "secondary" })),
+                    onClick: () => {
+                        onSelect(agentNodeId(agent.key, modelBindingNodeId(binding.key)));
+                    },
+                },
+            ];
+        });
+        return {
+            id,
+            label: provider.id,
+            startContent: _jsx(Icon, { icon: IconCloud, size: "sm", color: "secondary" }),
+            endContent: isFree
+                ? rowAction(`Remove ${provider.id}`, IconX, () => {
+                    update((current) => removeProvider(current, provider.id));
+                    const [first] = workspace.agents;
+                    if (selectedId === id && first)
+                        onSelect(agentNodeId(first.key));
+                })
+                : undefined,
+            className: isFree ? 'studio-tree-row' : undefined,
+            isSelected: selectedId === id,
+            onClick: () => {
+                onSelect(id);
+            },
+            isExpanded: true,
+            children: users,
+        };
+    });
+}
+/**
+ * Which list shows, following the selection, and the tool search. The open row stays in view: a
+ * tool far down the library, one an issue opened, or one a cleared search or the toggle shows
+ * again. Revealed after the list renders.
+ */
+function useWorkspaceList(selectedId, listRef) {
+    const [query, setQuery] = useState('');
+    const revealSelected = useCallback(() => {
+        requestAnimationFrame(() => {
+            listRef.current
+                ?.querySelector('[aria-selected="true"]')
+                ?.scrollIntoView({ block: 'nearest' });
+        });
+    }, [listRef]);
+    useEffect(() => {
+        // Nothing is selected while Keys is open.
+        if (selectedId)
+            revealSelected();
+    }, [selectedId, revealSelected]);
+    return { query, setQuery, revealSelected };
+}
+/**
+ * Which list shows: the tools library once a tool is open, the providers once a provider is, and
+ * whatever the toggle last chose. Following the selection, it switches when the open row changes
+ * between an agent, a tool, and a provider.
+ */
+function useListShown(selectedId) {
+    const isTool = toolSpecKeyOf(selectedId) !== undefined;
+    const isProvider = providerIdOf(selectedId) !== undefined;
+    const [list, setList] = useState(isTool ? 'tools' : isProvider ? 'providers' : 'agents');
+    const [shownFor, setShownFor] = useState(selectedId);
+    if (shownFor !== selectedId) {
+        setShownFor(selectedId);
+        // A provider's rows open the models on it, so an agent's row keeps the providers shown.
+        setList((current) => isTool ? 'tools' : isProvider ? 'providers' : current === 'tools' ? 'agents' : current);
+    }
+    return { list, setList };
+}
+/** The toggle between the agents, the tool library, and the providers, each with its count. */
+function WorkspaceListToggle({ workspace, list, onChange, }) {
+    return (_jsx(SegmentedControl, { label: "Workspace list", size: "sm", layout: "fill", value: list, onChange: (next) => {
+            onChange(next === 'tools' || next === 'providers' ? next : 'agents');
+        }, children: WORKSPACE_LISTS.map(({ value, name, icon }) => {
+            const count = String({
+                agents: workspace.agents.length,
+                tools: workspace.toolSpecs.length,
+                providers: workspace.providers.length,
+            }[value]);
+            return (_jsx(Tooltip, { content: `${name} · ${count}`, children: _jsx(SegmentedControlItem, { value: value, label: `${name}, ${count}`, isLabelHidden: true, icon: _jsx(Icon, { icon: icon, size: "sm" }) }) }, value));
+        }) }));
+}
+/** The sidebar's lists, as icons: a name and its count would not fit the nav's width. */
+const WORKSPACE_LISTS = [
+    { value: 'agents', name: 'Agents', icon: IconFileSmile },
+    { value: 'tools', name: 'Tools', icon: IconTool },
+    { value: 'providers', name: 'Providers', icon: IconCloud },
+];
+/** Makes the draft first, since an example may load its pictures, then adds it to whichever workspace is current. */
+const addsDraft = (draft) => async () => {
+    const made = await draft();
+    return (workspace) => addAgent(workspace, made);
+};
+/** The examples, in the order the menu lists them. The architect brings its narrator. */
+const EXAMPLE_AGENTS = [
+    {
+        id: 'concierge',
+        ...STUDIO_EXAMPLES.concierge,
+        icon: PROFILE_TYPE_ICON.text,
+        add: addsDraft(createExampleDraft),
+    },
+    {
+        id: 'live-concierge',
+        ...STUDIO_EXAMPLES['live-concierge'],
+        icon: PROFILE_TYPE_ICON.live,
+        add: addsDraft(createLiveExampleDraft),
+    },
+    {
+        id: 'architect',
+        ...STUDIO_EXAMPLES.architect,
+        icon: PROFILE_TYPE_ICON.text,
+        add: () => Promise.resolve(addArchitectExample),
+    },
+    {
+        id: 'narrator',
+        ...STUDIO_EXAMPLES.narrator,
+        icon: PROFILE_TYPE_ICON.speech,
+        add: addsDraft(createNarratorExampleDraft),
+    },
+    {
+        id: 'console',
+        ...STUDIO_EXAMPLES.console,
+        icon: PROFILE_TYPE_ICON.host,
+        add: addsDraft(createConsoleExampleDraft),
+    },
+    {
+        id: 'decision',
+        ...STUDIO_EXAMPLES.decision,
+        icon: PROFILE_TYPE_ICON.decision,
+        add: addsDraft(createDecisionExampleDraft),
+    },
+    {
+        id: 'gemini-embedding-2',
+        ...STUDIO_EXAMPLES['gemini-embedding-2'],
+        icon: PROFILE_TYPE_ICON.embedding,
+        add: addsDraft(createGeminiEmbeddingExampleDraft),
+    },
+];
+/** Adds a blank agent or one of the examples. */
+/** As wide as the row, and no wider: the description does not widen the menu its labels size. */
+const ROW_WIDE = { inlineSize: 0, minInlineSize: '100%' };
+/** A menu row's description on one line. What does not fit shows on hover. */
+const oneLine = (text) => (_jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, hasTruncateTooltip: "end", style: ROW_WIDE, children: text }));
+function AddAgentMenu({ onAddAgent }) {
+    return (_jsx(DropdownMenu, { button: {
+            label: 'Add agent',
+            variant: 'ghost',
+            size: 'sm',
+            width: '100%',
+            icon: _jsx(Icon, { icon: IconPlus, size: "sm" }),
+            style: { height: 'calc(var(--size-element-sm) - 4px)' },
+        }, hasChevron: false, placement: "below", items: [
+            {
+                id: 'blank',
+                label: 'Blank agent',
+                description: oneLine('One empty agent to build from.'),
+                icon: _jsx(Icon, { icon: IconFile, size: "sm" }),
+                onClick: () => {
+                    void addsDraft(createBlankDraft)().then(onAddAgent);
+                },
+            },
+            ...EXAMPLE_AGENTS.map((example) => ({
+                id: example.id,
+                label: example.label,
+                description: oneLine(example.description),
+                icon: _jsx(Icon, { icon: example.icon, size: "sm" }),
+                onClick: () => {
+                    void example.add().then(onAddAgent);
+                },
+            })),
+        ] }));
+}
+/** Adds a tool to the library, joined to the open agent, and opens it. */
+function AddToolButton({ tree, draft }) {
+    return (_jsx(Button, { label: "Add tool", variant: "ghost", size: "sm", width: "100%", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), style: { height: 'calc(var(--size-element-sm) - 4px)' }, onClick: () => {
+            addToolSpec(draft, tree.setDraft, tree.onSelect);
+        } }));
+}
+/** Filters the tool library by name or description. */
+function ToolSearchInput({ query, onChange }) {
+    return (_jsx(TextInput, { label: "Search tools", isLabelHidden: true, size: "sm", placeholder: "Search tools", value: query, onChange: onChange, startIcon: IconSearch, hasClear: true }));
+}
+/** The shown list's rows, or why there are none. */
+function WorkspaceListBody({ tree, list, tools, query, listRef, }) {
+    return (_jsx(ScrollableArea, { ref: listRef, label: "Workspace", height: "100%", children: list === 'agents' ? (_jsx(TreeList, { density: "compact", "aria-label": "Agents", items: agentItems(tree) })) : list === 'providers' ? (_jsx(TreeList, { density: "compact", "aria-label": "Providers", items: providerItems(tree) })) : tools.length > 0 ? (_jsx(TreeList, { density: "compact", "aria-label": "Tools", items: tools })) : (_jsx(Text, { type: "supporting", color: "secondary", children: query.trim() ? `No tool matches “${query.trim()}”.` : 'No tools yet.' })) }));
+}
+/**
+ * The workspace's lists, one at a time: its agents, the tool library they share, and the providers.
+ * The toggle follows the selection, so opening a tool from elsewhere (an issue, a new tool) shows it.
+ */
+function WorkspaceTreeLists({ tree, draft, onAddAgent, listRef, }) {
+    const { list, setList } = tree;
+    const { query, setQuery, revealSelected } = useWorkspaceList(tree.selectedId, listRef);
+    const tools = list === 'tools' ? toolItems(tree, query) : [];
+    return (_jsxs(VStack, { gap: 2, height: "100%", children: [_jsx(WorkspaceListToggle, { workspace: tree.workspace, list: list, onChange: (next) => {
+                    setList(next);
+                    revealSelected();
+                } }), list === 'agents' ? _jsx(AddAgentMenu, { onAddAgent: onAddAgent }) : null, list === 'tools' && (_jsx(ToolSearchInput, { query: query, onChange: (next) => {
+                    setQuery(next);
+                    revealSelected();
+                } })), list === 'tools' ? _jsx(AddToolButton, { tree: tree, draft: draft }) : null, list === 'providers' && tree.ownsProviders ? (_jsx(AddProviderButton, { taken: tree.workspace.providers.map((provider) => provider.id), onAdd: (provider) => {
+                    tree.update((current) => addProvider(current, provider));
+                    tree.onSelect(providerNodeId(provider.id));
+                } })) : null, _jsx(StackItem, { size: "fill", children: _jsx(WorkspaceListBody, { tree: tree, list: list, tools: tools, query: query, listRef: listRef }) })] }));
+}
+/** The longest agent name the preview's header shows in full. */
+const CHAT_NAME_MAX = 24;
+/** `name`, cut to `CHAT_NAME_MAX` characters with an ellipsis when it is longer. */
+function shortName(name) {
+    return name.length > CHAT_NAME_MAX ? `${name.slice(0, CHAT_NAME_MAX - 1)}…` : name;
+}
+/** Which agent the preview chats with, once there is more than one. */
+function ChatPicker({ agents, chatWith, onChange, }) {
+    if (agents.length < 2)
+        return null;
+    return (_jsx(Selector, { label: "Chat with", isLabelHidden: true, variant: "ghost", size: "sm", 
+        // As wide as the name, so the chevron sits right after it.
+        width: "fit-content", value: chatWith, options: agents, 
+        // why: The header shows a short name; the list under it shows each name in full.
+        renderValue: (option) => (_jsx("span", { title: option.label, children: shortName(option.label ?? option.value) })), onChange: onChange }));
+}
+/** The agents the preview can chat with: the same list while their keys and names stand. */
+function useChatAgents(agents) {
+    const names = JSON.stringify(agents.map((agent) => [agent.key, agent.identity.agentId]));
+    return useMemo(() => JSON.parse(names).map(([value, agentId]) => ({
+        value,
+        label: agentId || 'Unnamed agent',
+    })), [names]);
+}
+/** A tree group's heading and its add button. */
+/** The indent TreeList gives a leaf row beside a branch: the chevron's width and its gap. */
+const CHEVRON_COLUMN = {
+    '--_tree-indent': 'calc(var(--spacing-4) + var(--spacing-2))',
+};
+/** The tree's label for a node, e.g. the agent's id for Identity. */
+function nodeLabel(node, id) {
+    if (node.id === id)
+        return node.label;
+    for (const child of node.children) {
+        const label = nodeLabel(child, id);
+        if (label !== undefined)
+            return label;
+    }
+    return undefined;
+}
+/**
+ * The editor's title: the facet's name, e.g. Identity rather than the agent's id the tree shows;
+ * for a model or tool entry, that entry's own name.
+ */
+function editorTitle(draft, id) {
+    const ref = studioNodeRef(draft, id);
+    if (!ref)
+        return undefined;
+    if ('key' in ref)
+        return nodeLabel(studioTree(draft), id);
+    return profileGraphFacet(ref.facet)?.label;
+}
+/** The editor's heading: Tools with the tools list and no tool open; else the open node's title. */
+function headingOf(list, editing, title) {
+    return list === 'tools' && toolSpecKeyOf(editing) === undefined
+        ? profileGraphFacet('tools')?.label
+        : title;
+}
+/** Waits before compiling after an edit, so typing doesn't recompile on every key. */
+const COMPILE_DEBOUNCE_MS = 300;
+/** The part of a compile the agent runs from: what the run tab and the preview both take. */
+function runPayload({ agentId, profile, customTools, structured, questions, providers, dependencies, }) {
+    return { agentId, profile, customTools, structured, questions, providers, dependencies };
+}
+/** An agent's id as the workspace names it, for finding its compile. */
+function agentIdOf(workspace, key) {
+    return workspace.agents.find((agent) => agent.key === key)?.identity.agentId.trim() ?? '';
+}
+/** One agent's compile, from a workspace that compiled. */
+function compiledAgent(compiled, workspace, key) {
+    const id = agentIdOf(workspace, key);
+    return compiled.agents.find((agent) => agent.agentId === id);
+}
+/**
+ * The editor's node id for a workspace one: the open agent's own ids, a library tool's or a
+ * provider's as it is.
+ * `undefined` for another agent's.
+ */
+function innerNodeId(id, focus) {
+    if (toolSpecKeyOf(id) !== undefined || providerIdOf(id) !== undefined)
+        return id;
+    const root = agentNodeId(focus);
+    if (id === root)
+        return 'identity';
+    return id.startsWith(`${root}/`) ? id.slice(root.length + 1) : undefined;
+}
+/** Hands the compiled agent to a new tab through this browser's storage; the run route reads it back. */
+function openInNewTab(payload, project) {
+    const runId = createStudioRunId();
+    saveStudioRunPayload(payload, runId);
+    // A project's agent runs the project's code on its own page too.
+    const named = project ? `&project=${encodeURIComponent(project.name)}` : '';
+    globalThis.open(`/studio/run?run=${encodeURIComponent(runId)}${named}`, '_blank', 'noopener');
+}
+let exporter;
+/** The export and its zip, loaded when the page is idle or on the first export. */
+const exportKit = () => Promise.all([import("./lib/export-agent.js"), import("./lib/zip.js")]).then(([agent, zip]) => (exporter = { ...agent, ...zip }));
+/** Runs `use` with the export code: at once when it has loaded, so a copy stays inside the click. */
+function withExporter(use) {
+    if (exporter)
+        use(exporter);
+    else
+        void exportKit().then(use);
+}
+/** The workspace's files as a .zip, named for the agent being chatted with. */
+function downloadExport(kit, files, agentId) {
+    download(`${agentId}.zip`, new Blob([kit.zipFiles(files)], { type: 'application/zip' }));
+}
+/** Downloads `blob` as `filename`. */
+function download(filename, blob) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.click();
+    URL.revokeObjectURL(url);
+}
+/** `value`, once it has stopped changing for `ms`. */
+function useDebounced(value, ms) {
+    const [settled, setSettled] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setSettled(value);
+        }, ms);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, ms]);
+    return settled;
+}
+/** Calls `measure` with the node whenever it resizes; a callback ref, so it follows remounts. */
+function useMeasure(measure) {
+    const [value, setValue] = useState();
+    const ref = useCallback((node) => {
+        if (!node)
+            return;
+        const observer = new ResizeObserver(() => {
+            setValue(measure(node));
+        });
+        observer.observe(node);
+        return () => {
+            observer.disconnect();
+        };
+    }, [measure]);
+    return [ref, value];
+}
+/** The next node with an issue after `selectedId`, wrapping, so repeated clicks walk through them. */
+function nextIssueNode(issues, selectedId) {
+    const nodes = [...new Set(issues.map((issue) => issue.nodeId))];
+    return nodes[(nodes.indexOf(selectedId) + 1) % nodes.length] ?? selectedId;
+}
+/** The layout has no padding, so this is the content box Astryx resolves panel percentages on. */
+const measureWidth = (node) => node.clientWidth;
+/** The side panel's default share of the layout, the tree beside the editor: the golden split. */
+const SIDE_DEFAULT_PERCENT = 38.2;
+/** The profile tree's width inside the side panel; the editor takes the rest. */
+const TREE_WIDTH = NAV_WIDTH;
+/**
+ * The frame's class; on a phone it names the sheet open over the editor. While the map is open the
+ * panel takes the whole frame, over the preview.
+ */
+function frameClass(sheet, map, settings) {
+    return [
+        'studio-frame',
+        sheet && `studio-${sheet}-open`,
+        map && 'studio-map-open',
+        settings && 'studio-settings-open',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+/** Two badges per list row at the panel's default width or wider; one once it is narrowed. */
+function badgesPerRow(panelSize, layoutWidth) {
+    if (layoutWidth === undefined)
+        return 2;
+    return panelSize >= Math.round((SIDE_DEFAULT_PERCENT / 100) * layoutWidth) ? 2 : 1;
+}
+/** The last workspace that compiled; it holds while the current one has issues. */
+function useLastGood(compile) {
+    const [lastGood, setLastGood] = useState(() => compile.result.ok ? { workspace: compile.workspace, compiled: compile.result } : null);
+    // invariant: one object per good compile, so the payload, and the transport made from it, last
+    // until the agent changes; a new one aborts whatever the preview is running.
+    if (compile.result.ok && compile.result !== lastGood?.compiled) {
+        const good = { workspace: compile.workspace, compiled: compile.result };
+        setLastGood(good);
+        return good;
+    }
+    return lastGood;
+}
+/** The views of the editor column, in the order its one button lists them; the map opens beside either. */
+const EDITOR_VIEWS = [
+    { id: 'editor', label: 'Editor', icon: IconAdjustmentsHorizontal, description: 'Edit as a form' },
+    { id: 'code', label: 'Code', icon: IconCode, description: 'Edit as TypeScript' },
+];
+/** The agent with every use of key slot `from` pointed at `to`; `''` lets go of it. */
+function swapKeySlot(draft, from, to) {
+    const swap = (slot) => (slot === from ? to : slot);
+    return {
+        ...draft,
+        models: {
+            ...draft.models,
+            key: swap(draft.models.key),
+            fallbackKey: swap(draft.models.fallbackKey),
+        },
+        modelBindings: draft.modelBindings.map((binding) => ({
+            ...binding,
+            keySlot: swap(binding.keySlot),
+            fallbackKeySlot: swap(binding.fallbackKeySlot),
+        })),
+    };
+}
+/** "1 issue" or "N issues", or nothing at none. */
+const issuesLabel = (count) => count === 0 ? undefined : count === 1 ? '1 issue' : `${String(count)} issues`;
+/** "1 issue" or "N issues" while the draft doesn't compile; nothing once it does. */
+function issueCount(compiled) {
+    return compiled.ok ? undefined : issuesLabel(compiled.issues.length);
+}
+/** What a host that follows along is told about the draft on screen. */
+function screenReport(draft, compiled, section) {
+    return {
+        agent: draft.identity.handle || draft.identity.agentId || 'unnamed',
+        type: draft.identity.profileType || 'not chosen',
+        issues: compiled.ok ? 0 : compiled.issues.length,
+        section,
+    };
+}
+/**
+ * The studio as th30's surface host: th30 works on the open agent, its draft from the store;
+ * everything else comes from the page.
+ */
+function studioSurfaceHost(store, page, chat) {
+    return {
+        getDraft: store.getDraft,
+        getRevision: store.getRevision,
+        getRunsOn: () => page.current.on,
+        update: (next) => {
+            store.updateDraft(next, 'th30');
+            const reach = store.getPending();
+            if (!reach)
+                return undefined;
+            const ask = sharedAsk(reach, store.getWorkspace());
+            const asked = `Not made yet. The person is being asked: ${ask.title} ${ask.line}`;
+            return `${asked} Tell them, and wait for their answer: do not make this change again.`;
+        },
+        replaceDraft: (next, message) => {
+            const workspace = store.getWorkspace();
+            page.current.replaceWorkspace(withAgentDraft(workspace, store.getFocus(), next), message, 'th30');
+        },
+        select: (id) => {
+            store.select(scopedNodeId(store.getFocus(), id));
+        },
+        changesSince: (since) => store.changesSince(since).map((change) => ({
+            revision: change.revision,
+            by: change.by === 'th30' ? 'agent' : 'person',
+            sections: change.sections,
+        })),
+        subscribe: store.subscribe,
+        ...keyAndToolMembers(store, page),
+        ...runMembers(store, page, chat),
+    };
+}
+/** th30's reach into the keys and the tool library: read and test a key, open Keys, probe a tool. */
+function keyAndToolMembers(store, page) {
+    return {
+        key: (slot) => page.current.connection.vault[slot] ?? '',
+        openKeys: () => {
+            page.current.setKeysOpen(true);
+        },
+        testKey: async (slot) => {
+            const key = page.current.connection.vault[slot]?.trim();
+            if (!key)
+                return { ok: false, error: 'No key in this slot.' };
+            try {
+                const response = await fetch(`${screenEndpoint()}/test-key`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ key }),
+                });
+                return await response.json();
+            }
+            catch {
+                return { ok: false, error: "Couldn't reach the studio server." };
+            }
+        },
+        toolCredential,
+        testTool: async (key, input) => {
+            const tool = store.getDraft().toolSpecs.find((candidate) => candidate.key === key);
+            if (!tool)
+                return { ok: false, error: 'No such tool.' };
+            const sample = JSON.stringify(input ?? sampleToolInput(tool.toolName, tool.inputJson) ?? {});
+            // A tool that writes runs only once the builder read the input and said so.
+            const ask = writeAsk(tool, sample);
+            if (ask && !(await page.current.confirmWrite(ask))) {
+                return { ok: false, error: 'The builder chose not to run it.' };
+            }
+            return runToolProbe(tool, sample, toolCredential(key), store.getDraft().guardrails);
+        },
+    };
+}
+/** th30's reach into the conversation and the chatted agent: send, start over, open in a new tab, get code. */
+function runMembers(store, page, chat) {
+    /** What the chatted agent runs, with the agents it names. */
+    const runNow = () => {
+        const workspace = store.getWorkspace();
+        const result = compileWorkspace(workspace, page.current.on);
+        return result.ok
+            ? workspaceRunAgent(result, agentIdOf(workspace, workspace.chatWith))
+            : undefined;
+    };
+    return {
+        send: (text) => chat.current?.send(text) ?? Promise.resolve(null),
+        newConversation: () => {
+            page.current.newConversation();
+        },
+        launch: () => {
+            const result = runNow();
+            if (!result)
+                return;
+            openInNewTab({
+                ...runPayload(result),
+                connectionMode: page.current.on.mode,
+                localBaseUrl: page.current.connection.local.baseUrl,
+            }, page.current.project);
+        },
+        exportAgent: (format) => {
+            const workspace = store.getWorkspace();
+            const result = compileWorkspace(workspace, page.current.on);
+            const agent = result.ok ? compiledAgent(result, workspace, workspace.chatWith) : undefined;
+            if (!result.ok || !agent)
+                return Promise.resolve(false);
+            const code = projectCode(page.current.project, workspace);
+            withExporter((kit) => {
+                if (format === 'zip') {
+                    downloadExport(kit, kit.exportFiles(result, agent, code), agent.agentId);
+                }
+                else if (format === 'copy') {
+                    page.current.copy(kit.exportText(kit.exportFiles(result, agent, code)), 'the files');
+                }
+                else {
+                    page.current.copy(kit.llmBrief(result, agent, code), 'the files and their brief');
+                }
+            });
+            return Promise.resolve(true);
+        },
+    };
+}
+/**
+ * Reveals the node the issue pill opened. Its first failing row is revealed once the editor shows
+ * that node, which can be a render after the click, and a frame later, once the editor's new scroll
+ * area scrolls.
+ */
+function useIssueReveal(selected) {
+    const editorRef = useRef(null);
+    const [issueReveal, setIssueReveal] = useState();
+    const revealed = useRef(undefined);
+    useEffect(() => {
+        if (!issueReveal || issueReveal === revealed.current || issueReveal.node !== selected)
+            return;
+        revealed.current = issueReveal;
+        const frame = requestAnimationFrame(() => {
+            const row = editorRef.current?.querySelector(`[${ISSUE_ROW_ATTRIBUTE}]`);
+            row?.scrollIntoView({ block: 'center' });
+            row?.querySelector('[aria-invalid="true"]')?.focus({ preventScroll: true });
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+        };
+    }, [issueReveal, selected]);
+    return { editorRef, reveal: setIssueReveal, revealed: issueReveal };
+}
+const issueKey = (issue) => `${issue.nodeId}\n${issue.field ?? ''}\n${String(issue.index ?? '')}`;
+/**
+ * The issues the editor's rows show: the ones the builder has left behind. One that turns up on
+ * the page they are on (a detector just added, a field not filled in yet) stays quiet until they
+ * move to another page, or press the issue pill (`revealed`). `leavePage` is for a page inside a
+ * node, which `page` doesn't name.
+ */
+function useLeftIssues(issues, page, revealed) {
+    // The issues as of the last render: at a move, the ones that were there before it.
+    const before = useRef(issues);
+    const [left, setLeft] = useState(() => new Set(issues.map(issueKey)));
+    const leavePage = useCallback(() => {
+        const keys = new Set(before.current.map(issueKey));
+        return () => {
+            setLeft(keys);
+        };
+    }, []);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: a move or a press of the pill is what lets them show
+    useLayoutEffect(() => {
+        leavePage()();
+    }, [page, revealed, leavePage]);
+    useLayoutEffect(() => {
+        before.current = issues;
+    });
+    const shown = useMemo(() => issues.filter((issue) => left.has(issueKey(issue))), [issues, left]);
+    return { shown, leavePage };
+}
+/** Get code (a .zip, or copied) and open in a new tab, for the agent being chatted with; off while the workspace has issues. */
+function ExportActions({ store, compiled, chatted, chattedId, blocked, copy, connection, }) {
+    const project = useProject();
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: "Open in a new tab", variant: "ghost", icon: _jsx(Icon, { icon: IconBrowserShare, size: "sm" }), isDisabled: !compiled, tooltip: blocked ?? 'Open this agent on its own full page, in a new tab', onClick: () => {
+                    const run = compiled && workspaceRunAgent(compiled, chattedId);
+                    if (run)
+                        openInNewTab({ ...runPayload(run), ...connection }, project);
+                } }), _jsx(ExportMenu, { code: () => projectCode(project, store.getWorkspace()), compiled: compiled, chatted: chatted, blocked: blocked, copy: copy })] }));
+}
+/** Get code: a .zip, Copy, or Copy for LLM. */
+function ExportMenu({ code, compiled, chatted, blocked, copy, }) {
+    return (_jsx(DropdownMenu, { button: {
+            label: 'Get code',
+            variant: 'ghost',
+            isIconOnly: true,
+            icon: _jsx(Icon, { icon: IconArrowBarToDown, size: "sm" }),
+            tooltip: blocked ??
+                'Download every agent as a .zip, or copy its files, or copy them with a brief for an LLM',
+            isDisabled: !compiled,
+        }, menuWidth: "15rem", hasChevron: false, placement: "below", alignment: "end", items: [
+            {
+                id: 'download',
+                label: 'Download',
+                description: oneLine('Every agent, as a .zip.'),
+                icon: _jsx(Icon, { icon: IconFileZip, size: "sm" }),
+                onClick: () => {
+                    if (compiled && chatted) {
+                        withExporter((kit) => {
+                            downloadExport(kit, kit.exportFiles(compiled, chatted, code()), chatted.agentId);
+                        });
+                    }
+                },
+            },
+            {
+                id: 'copy',
+                label: 'Copy',
+                description: oneLine('Every file, each under its path, to paste into your code.'),
+                icon: _jsx(Icon, { icon: IconCopy, size: "sm" }),
+                onClick: () => {
+                    if (compiled && chatted) {
+                        withExporter((kit) => {
+                            copy(kit.exportText(kit.exportFiles(compiled, chatted, code())), 'the files');
+                        });
+                    }
+                },
+            },
+            {
+                id: 'copy-llm',
+                label: 'Copy for LLM',
+                description: oneLine('Every file with a brief: what to install, where each goes, what to ask you.'),
+                icon: _jsx(Icon, { icon: IconSparkles, size: "sm" }),
+                onClick: () => {
+                    if (compiled && chatted) {
+                        withExporter((kit) => {
+                            copy(kit.llmBrief(compiled, chatted, code()), 'the files and their brief');
+                        });
+                    }
+                },
+            },
+        ] }));
+}
+/** The workspace's store, kept in this tab's sessionStorage, and the open agent's draft from it. */
+function useStudioWorkspace(start, project) {
+    // The settings the project's profiles share, on the agents it opened as: a change to one is
+    // made on each of them.
+    const [shared] = useState(() => sharedEntries(start.workspace, project?.shared ?? [], project?.origins.sites, project?.unregistered));
+    // The page's tools read the store synchronously. The editor works on the open agent's draft, with the
+    // whole tool library.
+    const [store] = useState(() => createStudioStore(start, project?.origins.sites?.profiles, project?.origins.sites?.tools));
+    const workspace = useSyncExternalStore(store.subscribe, store.getWorkspace, store.getWorkspace);
+    const draft = useSyncExternalStore(store.subscribe, store.getDraft, store.getDraft);
+    const setDraft = useCallback((next) => {
+        store.updateDraft(next);
+    }, [store]);
+    const update = useCallback((change) => {
+        store.update(change);
+    }, [store]);
+    useEffect(() => {
+        const flush = () => {
+            store.flush();
+        };
+        globalThis.addEventListener('pagehide', flush);
+        return () => {
+            globalThis.removeEventListener('pagehide', flush);
+            flush();
+        };
+    }, [store]);
+    const { files, refreshOrigins, filesChanged, conflict, settle, showConflict, watchFiles } = useProjectFiles(project, store);
+    // Where the files write each shared value, as they were last read.
+    const sites = files?.origins.sites;
+    useEffect(() => {
+        store.setSites(sites?.profiles, sites?.tools);
+    }, [store, sites]);
+    return {
+        store,
+        workspace,
+        draft,
+        focus: store.getFocus(),
+        setDraft,
+        update,
+        shared,
+        origins: files?.origins,
+        asks: files?.asks,
+        files,
+        refreshOrigins,
+        filesChanged,
+        conflict,
+        settle,
+        showConflict,
+        watchFiles,
+    };
+}
+/**
+ * What the project's files say: the profiles they hold, the settings they set in code, and the
+ * tools the studio makes ask. They are read again when the files may have moved: after a Save or
+ * an undo, and when the builder comes back to the page from their editor. `filesChanged` is for
+ * the studio's own moves (a Save, an undo, opening the files again): the workspace's starts then
+ * stand on this reading, which the tab keeps with the edits. The local server also says when the
+ * builder's editor writes a file, unless the watch is off. What the editor changed is merged
+ * into the workspace setting by setting: the builder's edits stay, and a setting both changed
+ * waits in `conflict` until the builder chooses with `settle`. They can close the choice and come
+ * back to it with `showConflict`: their edits stand meanwhile.
+ */
+function useProjectFiles(project, store) {
+    const [files, setFiles] = useState(project);
+    const [pending, setConflict] = useState();
+    const [isChoosing, showConflict] = useState(true);
+    const conflict = useMemo(() => pending && { ...pending, open: isChoosing }, [pending, isChoosing]);
+    const toast = useToast();
+    /** The studio's own moves still being read: a reading that lands meanwhile is theirs. */
+    const ours = useRef(0);
+    /** The files as last read, which name an agent the builder removed since. */
+    const lastRead = useRef(undefined);
+    const keep = useCallback((read) => {
+        // Files that say what they said keep the reading, so nothing that runs on it starts again.
+        setFiles((held) => (canonical(held) === canonical(read) ? held : read));
+    }, []);
+    const reread = useCallback((isOurs, changed = []) => {
+        if (!project)
+            return;
+        if (isOurs)
+            ours.current += 1;
+        readFiles()
+            .then(({ files: read, workspace }) => {
+            const stoodOn = store.standsOn();
+            if (isOurs)
+                store.standOn(read.print);
+            else if (ours.current > 0)
+                return;
+            else if (stoodOn === undefined) {
+                // Edits that stand on no reading cannot be merged: the files open, and the edits are offered back.
+                const before = store.getWorkspace();
+                store.takeFiles(reopened(workspace, before));
+                store.standOn(read.print);
+                offerEditsBack(toast, store, before, projectKey(project.name));
+            }
+            else if (read.print !== stoodOn) {
+                const before = store.getWorkspace();
+                // After a reload the reading the edits stand on is the one the tab kept.
+                const stood = lastRead.current ?? keptReading(projectKey(project.name), stoodOn);
+                const merge = mergedWithFiles(before, workspace, stood);
+                const named = changedFiles(changed);
+                if (merge.conflicts.length > 0) {
+                    // The builder's edits stand, and nothing moves under them, until they choose.
+                    setConflict({ merge, read, workspace, files: named });
+                    showConflict(true);
+                    return;
+                }
+                store.takeFiles(merge.workspace);
+                store.standOn(read.print);
+                const said = filesToast(named, merge.updated.length, editedSince(before, stoodOn));
+                if (said && getPref('filesToast') === 'on')
+                    toast({ body: said });
+            }
+            // Files that went back to what the edits stand on leave nothing to choose.
+            setConflict(undefined);
+            lastRead.current = workspace;
+            keepReading(projectKey(project.name), read.print, workspace);
+            keep(read);
+        })
+            .catch((err) => {
+            // What shows still stands on the last reading, which may be older than the files now.
+            toast({
+                type: 'error',
+                body: 
+                // A fetch that reaches no server fails with a TypeError.
+                err instanceof TypeError
+                    ? "The studio's server didn't answer, so your files show as it last read them."
+                    : `Couldn't read your files again (${err instanceof Error ? err.message : String(err)}), so they show as last read.`,
+            });
+        })
+            .finally(() => {
+            if (isOurs)
+                ours.current -= 1;
+        });
+    }, [project, store, toast, keep]);
+    const refreshOrigins = useCallback(() => {
+        reread(false);
+    }, [reread]);
+    const filesChanged = useCallback(() => {
+        reread(true);
+    }, [reread]);
+    const settle = useCallback((theirs) => {
+        if (!conflict)
+            return;
+        store.takeFiles(withFilesChosen(conflict.merge, theirs));
+        store.standOn(conflict.read.print);
+        lastRead.current = conflict.workspace;
+        if (project)
+            keepReading(projectKey(project.name), conflict.read.print, conflict.workspace);
+        keep(conflict.read);
+        setConflict(undefined);
+    }, [conflict, project, store, keep]);
+    useEffect(() => {
+        globalThis.addEventListener('focus', refreshOrigins);
+        return () => {
+            globalThis.removeEventListener('focus', refreshOrigins);
+        };
+    }, [refreshOrigins]);
+    const [watch, setWatch] = useState({ available: false, on: getPref('watch') === 'on' });
+    const watching = useRef(watch.on);
+    const setWatching = useCallback((on) => {
+        watching.current = on;
+        setPref('watch', on ? 'on' : 'off');
+        setWatch((held) => ({ ...held, on }));
+        // What the files changed while the watch was off comes in now.
+        if (on)
+            reread(false);
+    }, [reread]);
+    useEffect(() => {
+        if (!project)
+            return;
+        // Edits the tab kept may stand on files that changed while the page was closed.
+        reread(false);
+        return subscribeToFiles(project.endpoint, {
+            open: () => {
+                setWatch((held) => (held.available ? held : { ...held, available: true }));
+            },
+            files: (changed) => {
+                if (watching.current)
+                    reread(false, changed);
+            },
+        });
+    }, [project, reread]);
+    const watchFiles = useMemo(() => (watch.available ? { on: watch.on, set: setWatching } : undefined), [watch, setWatching]);
+    return { files, refreshOrigins, filesChanged, conflict, settle, showConflict, watchFiles };
+}
+/** The files that changed, as a toast and the conflict dialog name them: the one, or how many. */
+function changedFiles(files) {
+    const [only] = files;
+    if (only === undefined)
+        return 'source code';
+    return files.length === 1 ? only : `${String(files.length)} files`;
+}
+const conflictsLabel = (count) => count === 1 ? '1 conflict' : `${String(count)} conflicts`;
+/** What a merge with no conflicts says, or nothing when the files changed no setting. */
+function filesToast(files, updated, hadEdits) {
+    if (updated === 0)
+        return undefined;
+    const settings = updated === 1 ? '1 setting updated' : `${String(updated)} settings updated`;
+    const subject = files === 'source code' ? 'Source code' : files;
+    return `${subject} changed: ${settings}.${hadEdits ? ' Studio edits are kept.' : ''}`;
+}
+/** Shows an origin's line in the builder's editor, and says where it is when no editor opens. */
+function useOpenOrigin(project) {
+    const toast = useToast();
+    return useCallback((origin) => {
+        const place = originPlace(origin);
+        if (!project || !origin.file || !place)
+            return;
+        openInEditor(project, { file: origin.file, line: origin.line })
+            .catch(() => ({ ok: false, reason: 'failed' }))
+            .then((answer) => {
+            const path = answer.ok ? undefined : answer.place;
+            toast({
+                type: answer.ok ? undefined : 'error',
+                body: openOutcome(answer, place),
+                endContent: path && (_jsx(Button, { label: "Copy path", variant: "ghost", size: "sm", onClick: () => {
+                        void navigator.clipboard.writeText(path);
+                    } })),
+            });
+        });
+    }, [project, toast]);
+}
+/** Keys are the workspace's: every agent's slots, so a called agent's key is asked for too. */
+function useWorkspaceConnection(workspace) {
+    const inProject = useProject() !== null;
+    const { lentKeys, toolHandlers } = useStudioHost();
+    const bindings = workspace.agents.flatMap((agent) => agent.modelBindings.map((binding) => ({
+        ...modelRoute(workspace.providers, agent.identity.profileType, binding),
+        builtInTools: binding.builtInTools,
+        local: onStudioLocal(binding.provider, inProject),
+    })));
+    const namedSlots = workspace.agents
+        .flatMap((agent) => [
+        agent.models.key,
+        agent.models.fallbackKey,
+        ...agent.modelBindings.flatMap((binding) => {
+            const { keySlot, fallbackKeySlot } = modelSlots(workspace.providers, binding);
+            return [keySlot, fallbackKeySlot];
+        }),
+    ])
+        .filter((slot) => Boolean(slot));
+    return useStudioConnection(bindings, undefined, namedSlots, { lentKeys, toolHandlers });
+}
+/** The frame: the resizable panel on the left. */
+function useStudioFrame() {
+    const layoutRef = useRef(null);
+    const [measureLayout, layoutWidth] = useMeasure(measureWidth);
+    const layoutCallbackRef = useCallback((node) => {
+        layoutRef.current = node;
+        return measureLayout(node);
+    }, [measureLayout]);
+    const sidePanel = useResizable({
+        defaultSize: `${String(SIDE_DEFAULT_PERCENT)}%`,
+        minSize: TREE_WIDTH + 320,
+        containerRef: layoutRef,
+        autoSaveId: 'studio.panel',
+    });
+    // The editor's own width, for while the map is open beside it: the panel's, less the tree.
+    useLayoutEffect(() => {
+        layoutRef.current?.style.setProperty('--studio-view-width', `${String(sidePanel.size - TREE_WIDTH)}px`);
+    }, [sidePanel.size]);
+    // The profile tree's branches mount and unmount; ease them both ways.
+    const sidebarRef = useRef(null);
+    useDisclosureMotion(sidebarRef);
+    return {
+        layoutCallbackRef,
+        sidePanel,
+        listBadges: badgesPerRow(sidePanel.size, layoutWidth),
+        sidebarRef,
+    };
+}
+/** The open agent's issues and the library's, by the editor's ids. */
+function editorIssuesOf(compiled, focus) {
+    if (compiled.ok)
+        return [];
+    return compiled.issues.flatMap((issue) => {
+        const nodeId = innerNodeId(issue.nodeId, focus);
+        return nodeId === undefined ? [] : [{ ...issue, nodeId }];
+    });
+}
+/**
+ * The workspace compiled once edits settle. Only a workspace that compiles changes the preview;
+ * while one has issues, the last good agent and its conversation stay put. The chatted agent is
+ * found by its key there, so renaming it doesn't lose it.
+ */
+function useWorkspaceCompile(workspace, focus, connection) {
+    const { mode, on } = connection;
+    const settled = useDebounced(workspace, COMPILE_DEBOUNCE_MS);
+    const compile = useMemo(() => ({ workspace: settled, result: compileWorkspace(settled, on) }), [settled, on]);
+    const compiled = compile.result;
+    const lastGood = useLastGood(compile);
+    const chatWith = workspace.chatWith;
+    const localBaseUrl = connection.local.baseUrl;
+    const payload = useMemo(() => {
+        const run = lastGood && workspaceRunAgent(lastGood.compiled, agentIdOf(lastGood.workspace, chatWith));
+        return run ? { ...runPayload(run), connectionMode: mode, localBaseUrl } : null;
+    }, [lastGood, chatWith, mode, localBaseUrl]);
+    /** The open agent's compile: what the code view shows and Export takes. */
+    const focused = compiled.ok ? compiledAgent(compiled, compile.workspace, focus) : undefined;
+    const source = useMemo(() => (focused ? studioSource(focused) : null), [focused]);
+    /** The open agent as it compiles now, for a detector's own test. */
+    const probed = useMemo(() => {
+        const run = compiled.ok && workspaceRunAgent(compiled, agentIdOf(compile.workspace, focus));
+        return run ? runPayload(run) : null;
+    }, [compiled, compile.workspace, focus]);
+    // One object per compile, so the panes that read it sit out the renders between.
+    return useMemo(() => {
+        const issues = issueCount(compiled);
+        return {
+            compiled,
+            payload,
+            /** The workspace the payload was compiled from: the edits the preview runs. */
+            tested: lastGood?.workspace,
+            traced: recordsTraces(payload),
+            source,
+            probed,
+            editorIssues: editorIssuesOf(compiled, focus),
+            /** The agent being chatted with: Get code adds its route and chat to the workspace's files. */
+            chatted: compiled.ok ? compiledAgent(compiled, compile.workspace, chatWith) : undefined,
+            chattedId: agentIdOf(compile.workspace, chatWith),
+            issues,
+            blocked: issues && `Fix ${issues} first`,
+        };
+    }, [compiled, compile.workspace, lastGood, payload, source, probed, focus, chatWith]);
+}
+/** The preview's conversation with the chatted agent: which runner holds it, and what it resumes. */
+function useConversationRun(mode, sealer, chatWith, actingAs, question) {
+    // Bumping this remounts every runner: fresh transcripts and trace feeds, the same profiles.
+    const [restarts, setConversation] = useState(0);
+    // Bumping a chat's own count remounts only its runner.
+    const [cleared, setCleared] = useState({});
+    // Each person the runs act as has their own chat with each agent.
+    const chatKey = chatKeyOf(chatWith, actingAs);
+    /** The runners that still stand: another mode or a restart replaces them all. */
+    const generation = `${mode}:${String(restarts)}`;
+    const runKey = `${generation}:${chatKey}:${String(cleared[chatKey] ?? 0)}`;
+    // Each kept conversation resumes in the first runner it has here; a cleared or remade one
+    // starts empty.
+    const [firstRuns] = useState(() => new Map());
+    if (!firstRuns.has(chatKey))
+        firstRuns.set(chatKey, runKey);
+    const isFirstRun = firstRuns.get(chatKey) === runKey;
+    const [seeded] = useState(chatWith);
+    const conversation = useMemo(() => (isFirstRun ? restoreConversation(chatKey, sealer) : undefined), [isFirstRun, chatKey, sealer]);
+    /** A docs seed's question waits in its agent's first composer, when that resumes nothing. */
+    const initialText = isFirstRun && chatWith === seeded && !conversation ? question : undefined;
+    /**
+     * The runners that have sent something; a new one (cleared, or another mode) has no history,
+     * unless it resumed a kept conversation.
+     */
+    const [usedRuns, setUsedRuns] = useState(() => new Set());
+    const isUsed = usedRuns.has(runKey) || conversation !== undefined;
+    return useMemo(() => ({
+        runKey,
+        chatKey,
+        generation,
+        sealer,
+        conversation,
+        initialText,
+        isUsed,
+        markUsed: () => {
+            setUsedRuns((runs) => (runs.has(runKey) ? runs : new Set(runs).add(runKey)));
+        },
+        /** Forgets this chat and starts it again; the profile stays, and other chats are left be. */
+        clear: () => {
+            clearConversation(chatKey);
+            setCleared((counts) => ({ ...counts, [chatKey]: (counts[chatKey] ?? 0) + 1 }));
+        },
+        setConversation,
+    }), [runKey, chatKey, generation, sealer, conversation, initialText, isUsed]);
+}
+/**
+ * Once, on arrival: say when a kept draft was set aside for a docs seed, when a project's files
+ * changed under the edits this tab kept, or when what was kept couldn't be read back.
+ */
+function useArrivalToast({ displaced, discarded, project }, store) {
+    const toast = useToast();
+    const arrival = useRef({ displaced, discarded, name: project?.name });
+    useEffect(() => {
+        const { displaced, discarded, name } = arrival.current;
+        const inProject = name !== undefined;
+        arrival.current = { displaced: undefined, discarded: false, name };
+        if (discarded) {
+            toast({
+                body: inProject
+                    ? "The edits this tab kept couldn't be restored."
+                    : "Your last draft couldn't be restored.",
+            });
+        }
+        if (!displaced)
+            return;
+        if (name !== undefined) {
+            offerEditsBack(toast, store, displaced, projectKey(name));
+            return;
+        }
+        const dismiss = toast({
+            body: 'Opened the example from the docs.',
+            endContent: (_jsx(Button, { label: "Back to my draft", variant: "ghost", size: "sm", onClick: () => {
+                    store.update(displaced);
+                    dismiss();
+                } })),
+        });
+    }, [toast, store]);
+}
+/** The one offer of set-aside edits a page shows. */
+const EDITS_ASIDE = 'studio-edits-aside';
+/**
+ * Says the project's files changed under the builder's edits, and offers the edits back. The
+ * offer stays until the builder answers it, and the tab keeps the edits under `key` meanwhile, so
+ * a reload offers them again. They come back over whatever the studio holds then.
+ */
+function offerEditsBack(toast, store, edits, key) {
+    const dismiss = toast({
+        body: 'Your files changed since you made your edits here, so the studio opened the files.',
+        isAutoHide: false,
+        // A later change to the files replaces the offer with the edits it set aside.
+        uniqueID: EDITS_ASIDE,
+        // Closing the offer lets the edits go.
+        onHide: () => {
+            dropAside(key);
+        },
+        endContent: (_jsx(Button, { label: "Bring my edits back", variant: "ghost", size: "sm", onClick: () => {
+                store.update(rebased(edits, store.getWorkspace()));
+                dismiss();
+            } })),
+    });
+    setAside(key, edits);
+}
+const NARROW = { map: false, settings: false };
+const isWide = (panel) => panel.map || panel.settings;
+/**
+ * Which view stands in the editor column, whether the map is open beside it, and opening a node
+ * there. The map takes the preview's place: the panel widens over it the way the shell moves after
+ * load, with the tree and the editor where they were, and draws back when the map closes.
+ */
+function useEditorView(store) {
+    const [keysOpen, setKeysOpen] = useState(false);
+    const [editorView, setEditorView] = useState('editor');
+    const [mapOpen, setMap] = useState(false);
+    const [settingsOpen, setSettings] = useState(false);
+    /** What was asked for last, what is on screen, and the moves still to make. */
+    const wanted = useRef(NARROW);
+    const shown = useRef(NARROW);
+    const moves = useRef(Promise.resolve());
+    const move = useCallback((next) => {
+        wanted.current = { ...wanted.current, ...next };
+        moves.current = moves.current.then(async () => {
+            // Only the last one asked for is worth moving to.
+            const to = wanted.current;
+            const was = shown.current;
+            if (to.map === was.map && to.settings === was.settings)
+                return;
+            shown.current = to;
+            const swap = () => {
+                flushSync(() => {
+                    setMap(to.map);
+                    setSettings(to.settings);
+                });
+            };
+            // Settings over an open map, and back: the panel is already as wide as it goes.
+            if (isWide(to) === isWide(was))
+                swap();
+            else
+                await movePanel(isWide(to), swap);
+        });
+    }, []);
+    const setMapOpen = useCallback((next) => {
+        move({ map: next });
+    }, [move]);
+    const settingsWanted = useStudioSettings();
+    useEffect(() => {
+        move({ settings: settingsWanted });
+    }, [move, settingsWanted]);
+    /**
+     * Opens a node from the tree, the editor, or the map, closing Keys over it. The map stays open
+     * beside the editor; on a phone it covers the editor, so it closes.
+     */
+    const open = useCallback((id) => {
+        setKeysOpen(false);
+        store.select(id);
+        setEditorView('editor');
+        if (!globalThis.matchMedia('(min-width: 768px)').matches)
+            setMapOpen(false);
+    }, [store, setMapOpen]);
+    return {
+        keysOpen,
+        setKeysOpen,
+        editorView,
+        setEditorView,
+        mapOpen,
+        setMapOpen,
+        settingsOpen,
+        open,
+    };
+}
+/** What the page does for its buttons and for th30: swap in a workspace (with undo), and copy. */
+function usePageActions(store, view, setConversation) {
+    const toast = useToast();
+    const { copy: writeClipboard } = useClipboard();
+    const { setKeysOpen, setEditorView } = view;
+    /** Swaps in a whole new workspace; the toast can put the old one back. */
+    const replaceWorkspace = useCallback((next, message, by = 'visitor') => {
+        const previous = store.getWorkspace();
+        store.update(next, by);
+        setKeysOpen(false);
+        setEditorView('editor');
+        // New agents start new conversations; the old transcripts don't carry over.
+        clearConversation();
+        setConversation((count) => count + 1);
+        const dismiss = toast({
+            body: message,
+            endContent: (_jsx(Button, { label: "Undo", variant: "ghost", size: "sm", onClick: () => {
+                    store.update(previous);
+                    dismiss();
+                } })),
+        });
+    }, [store, setKeysOpen, setEditorView, setConversation, toast]);
+    const copy = useCallback((text, what) => {
+        void writeClipboard(text).then((copied) => toast(copied
+            ? { body: `Copied ${what}.` }
+            : { body: "Couldn't reach the clipboard.", type: 'error' }));
+    }, [toast, writeClipboard]);
+    return { replaceWorkspace, copy };
+}
+/**
+ * th30 sees and works in the studio through its surface, mounted while the page is open. Its
+ * tools read the page through a ref, so they register once and always see the latest.
+ */
+function useStudioSurface(store, page) {
+    const { mountSurface } = useStudioHost();
+    const chatRef = useRef(null);
+    const pageRef = useRef(page);
+    pageRef.current = page;
+    useEffect(() => mountSurface?.(studioSurface(studioSurfaceHost(store, pageRef, chatRef))), [store, mountSurface]);
+    return chatRef;
+}
+/** What the open agent's editor knows of the others, and its allow list. */
+function useWorkspaceContext(agents, focus, update, ownsProviders) {
+    return useMemo(() => {
+        const self = agents.find((agent) => agent.key === focus);
+        return {
+            agents: agents.map((agent) => ({
+                key: agent.key,
+                agentId: agent.identity.agentId.trim(),
+                type: agent.identity.profileType,
+            })),
+            self: focus,
+            allowed: self?.tools.allow ?? [],
+            setAllowed: (toolKey, allowed) => {
+                update((current) => setToolAllowed(current, focus, toolKey, allowed));
+            },
+            addProvider: ownsProviders
+                ? (provider) => {
+                    update((current) => addProvider(current, provider));
+                }
+                : undefined,
+            updateProvider: ownsProviders
+                ? (provider) => {
+                    update((current) => withProvider(current, provider));
+                }
+                : undefined,
+            sharing: (bindingKey, id, apiId) => modelSharers({ agents }, focus, bindingKey, id, apiId),
+        };
+    }, [agents, focus, update, ownsProviders]);
+}
+/** The node the editor has open: the selected one while it exists, else the open agent's identity. */
+function selectedNode(workspace, focus) {
+    return workspaceNodeRef(workspace, workspace.selected) ? workspace.selected : agentNodeId(focus);
+}
+/** A phone-only button that opens a sheet over the editor, or closes it (`null`). */
+function SheetButton({ label, icon, sheet, setSheet, }) {
+    return (_jsx("span", { className: "studio-phone", children: _jsx(IconButton, { label: label, variant: "ghost", icon: _jsx(Icon, { icon: icon, size: "sm" }), onClick: () => {
+                setSheet(sheet);
+            } }) }));
+}
+/**
+ * The profile tree's column: the studio's name and version over the agents and tools. It sits
+ * out renders that change nothing it shows, such as the code view or a new compile.
+ */
+const TreeColumn = memo(function TreeColumn({ tree, draft, onAddAgent, listRef, setSheet, }) {
+    const project = useProject();
+    const { kernelVersion } = useStudioHost();
+    return (_jsx(Section, { variant: "transparent", width: TREE_WIDTH, height: "100%", padding: 4, dividers: ['end'], children: _jsxs(VStack, { gap: 4, height: "100%", children: [_jsxs(HStack, { gap: 2, vAlign: "start", children: [_jsx(StackItem, { size: "fill", children: _jsxs(VStack, { gap: 1, children: [_jsx(Heading, { level: 3, children: "theorem studio" }), _jsx(Text, { type: "supporting", color: "secondary", children: `${project ? `${project.name} · ` : ''}@theoremjs/agents ${kernelVersion}` })] }) }), _jsx(SheetButton, { label: "Close sections", icon: IconX, sheet: null, setSheet: setSheet })] }), _jsx(StackItem, { size: "fill", children: _jsx(WorkspaceTreeLists, { tree: tree, draft: draft, onAddAgent: onAddAgent, listRef: listRef }) })] }) }));
+});
+/**
+ * The issue count, which goes to the next issue after the selected node and shows it there. Hidden
+ * with none. It counts every issue, so what blocks a run or Save always has a way to it.
+ */
+function IssueToken({ compile, selected, onIssue, }) {
+    const { compiled } = compile;
+    if (compiled.ok)
+        return null;
+    const issues = issuesLabel(compiled.issues.length);
+    if (!issues)
+        return null;
+    return (_jsx(Token, { label: issues, color: "orange", description: "Go to the next issue", onClick: () => {
+            onIssue(nextIssueNode(compiled.issues, selected));
+        } }));
+}
+/** Replaces the workspace with one blank agent or one of the examples. */
+/**
+ * The one button for what the panel shows: the form or the code, which closes Keys, and the map
+ * beside either, which opens and closes.
+ */
+function ViewToggleButton({ view }) {
+    const current = EDITOR_VIEWS.find((each) => each.id === view.editorView) ?? EDITOR_VIEWS[0];
+    return (_jsx(DropdownMenu, { button: {
+            label: current.label,
+            variant: 'ghost',
+            isIconOnly: true,
+            icon: _jsx(Icon, { icon: current.icon, size: "sm" }),
+            tooltip: 'Switch between the editor, the code, and the map',
+        }, menuWidth: "15rem", hasChevron: false, placement: "below", alignment: "end", items: [
+            ...EDITOR_VIEWS.map((each) => ({
+                id: each.id,
+                label: each.label,
+                description: oneLine(each.description),
+                icon: _jsx(Icon, { icon: each.icon, size: "sm" }),
+                endContent: each.id === current.id && !view.keysOpen ? (_jsx(Icon, { icon: IconCheck, size: "sm" })) : undefined,
+                onClick: () => {
+                    view.setKeysOpen(false);
+                    view.setEditorView(each.id);
+                },
+            })),
+            {
+                id: 'map',
+                label: 'Map',
+                description: oneLine('See how everything connects'),
+                icon: _jsx(Icon, { icon: IconSitemap, size: "sm" }),
+                endContent: view.mapOpen ? _jsx(Icon, { icon: IconCheck, size: "sm" }) : undefined,
+                onClick: () => {
+                    view.setMapOpen(!view.mapOpen);
+                },
+            },
+        ] }));
+}
+/**
+ * Reset for what is open: a library tool, a provider, or else the agent. It goes back to how it joined the
+ * workspace, and nothing else changes. `run` is absent while it is still as it started. `all` does
+ * it for everything: every agent and tool back to its start, or on a project every unsaved edit
+ * gone once the builder says yes. It is absent while there is nothing to put back.
+ */
+function useReset({ workspace, focus, update }) {
+    const toast = useToast();
+    const save = useProjectSave();
+    const toolKey = toolSpecKeyOf(workspace.selected);
+    const provider = providerIdOf(workspace.selected);
+    const what = provider !== undefined ? 'provider' : toolKey === undefined ? 'agent' : 'tool';
+    const next = useMemo(() => {
+        if (provider !== undefined)
+            return resetProvider(workspace, provider);
+        return toolKey === undefined
+            ? resetAgent(workspace, focus)
+            : resetLibraryTool(workspace, toolKey);
+    }, [workspace, focus, toolKey, provider]);
+    const everything = useMemo(() => resetAll(workspace), [workspace]);
+    const put = (to, body) => to === workspace
+        ? undefined
+        : () => {
+            update(() => to);
+            const dismiss = toast({
+                body,
+                endContent: (_jsx(Button, { label: "Undo", variant: "ghost", size: "sm", onClick: () => {
+                        update(() => workspace);
+                        dismiss();
+                    } })),
+            });
+        };
+    return {
+        what,
+        run: put(next, `Reset the ${what} to how it started.`),
+        all: save ? save.discard : put(everything, 'Reset every agent and tool to how it started.'),
+        inProject: save !== null,
+    };
+}
+/** Opens the project's files again in place of every unsaved edit. Undo brings the edits back. */
+function useDiscardAll({ store, filesChanged }) {
+    const toast = useToast();
+    return useCallback(() => {
+        openProject().then(({ workspace: files }) => {
+            const before = store.getWorkspace();
+            store.takeFiles(reopened(files, before));
+            filesChanged();
+            const dismiss = toast({
+                body: 'Discarded every unsaved edit.',
+                endContent: (_jsx(Button, { label: "Undo", variant: "ghost", size: "sm", onClick: () => {
+                        store.update(before);
+                        dismiss();
+                    } })),
+            });
+        }, () => {
+            toast({
+                type: 'error',
+                body: 'The studio server did not answer, so your edits are still here.',
+            });
+        });
+    }, [store, filesChanged, toast]);
+}
+/** The editor column's header: its title, the next issue, Keys, what to start from, and the view toggle. */
+function EditorToolbar({ heading, compile, selected, view, onIssue, reset, project, setSheet, }) {
+    return (_jsx(Section, { variant: "transparent", padding: 3, dividers: ['bottom'], children: _jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(SheetButton, { label: "Sections", icon: IconMenu2, sheet: "tree", setSheet: setSheet }), _jsx(StackItem, { size: "fill", children: heading && (_jsx("span", { title: heading, children: _jsx(Heading, { level: 4, maxLines: 1, children: heading }) })) }), _jsx(StackItem, { size: "static", children: _jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(IssueToken, { compile: compile, selected: selected, onIssue: onIssue }), project] }) }), _jsx(KeysButton, { view: view }), _jsx(DropdownMenu, { button: {
+                        label: 'Reset',
+                        variant: 'ghost',
+                        isIconOnly: true,
+                        icon: _jsx(Icon, { icon: IconRotateClockwise, size: "sm" }),
+                        tooltip: reset.run || reset.all
+                            ? `Reset this ${reset.what}, or everything`
+                            : 'Everything is as it started',
+                        isDisabled: !reset.run && !reset.all,
+                    }, menuWidth: "15rem", hasChevron: false, placement: "below", alignment: "end", items: [
+                        {
+                            id: 'this',
+                            label: `Reset this ${reset.what}`,
+                            description: oneLine('Back to how it started. Undo brings your changes back.'),
+                            icon: _jsx(Icon, { icon: IconRotateClockwise, size: "sm" }),
+                            isDisabled: !reset.run,
+                            onClick: reset.run,
+                        },
+                        {
+                            id: 'all',
+                            label: reset.inProject ? 'Discard all edits' : 'Reset everything',
+                            description: oneLine(reset.inProject
+                                ? 'Every unsaved edit goes, and the studio opens your files as they are.'
+                                : 'Every agent and tool, back to how it started.'),
+                            icon: _jsx(Icon, { icon: IconRestore, size: "sm" }),
+                            isDisabled: !reset.all,
+                            onClick: reset.all,
+                        },
+                    ] }), _jsx(ViewToggleButton, { view: view }), _jsx(SheetButton, { label: "Preview", icon: IconPlayerPlay, sheet: "preview", setSheet: setSheet })] }) }));
+}
+/** The door to the Keys panel in the editor's header. A host with Settings keeps Keys there, so it has none. */
+function KeysButton({ view }) {
+    const { hasSettings } = useStudioHost();
+    if (hasSettings)
+        return null;
+    return (_jsx(IconButton, { label: "Keys", variant: "ghost", icon: _jsx(Icon, { icon: IconKey, size: "sm" }), "aria-pressed": view.keysOpen, tooltip: "Add your own model keys to run this agent with", onClick: () => {
+            view.setKeysOpen((open) => !open);
+            view.setEditorView('editor');
+        } }));
+}
+/** The Keys panel, in the editor's column. */
+function KeysBody({ connection, state, }) {
+    return (_jsx(ScrollableArea, { label: "Keys", height: "100%", children: _jsx(KeySlots, { connection: connection, state: state }) }));
+}
+/** The key slots, renamed or let go across every agent. */
+function KeySlots({ connection, state, }) {
+    const { setDraft, update } = state;
+    return (_jsx(StudioKeys, { connection: connection, onAddSlot: (slot) => {
+            setDraft((current) => current.models.key ? current : { ...current, models: { ...current.models, key: slot } });
+        }, onRenameSlot: (from, to) => {
+            update((current) => ({
+                ...current,
+                agents: current.agents.map((agent) => swapKeySlot(agent, from, to)),
+            }));
+        }, onRemoveSlot: (slot) => {
+            update((current) => ({
+                ...current,
+                agents: current.agents.map((agent) => swapKeySlot(agent, slot, '')),
+            }));
+        } }));
+}
+/**
+ * Whether Settings is asked for, for a host that has a door to them. They open in the studio's
+ * panel, with the tree, the editor, and the preview kept under them: a run goes on, and the editor
+ * is where it was left.
+ */
+function useStudioSettings() {
+    const { hasSettings } = useStudioHost();
+    useEffect(() => (hasSettings ? settingsScreen() : undefined), [hasSettings]);
+    useEffect(() => {
+        if (hasSettings)
+            warmWhenIdle(settingsPanel);
+    }, [hasSettings]);
+    const door = useSettingsDoor();
+    return hasSettings === true && door.open;
+}
+const HIDDEN = { display: 'none' };
+/** Opens Keys where the host keeps them: in Settings, or in the editor's column. */
+function useOpenKeys(setKeysOpen) {
+    const { hasSettings } = useStudioHost();
+    return useCallback((open) => {
+        if (!hasSettings)
+            setKeysOpen(open);
+        else if (open)
+            openSettings('keys');
+        else
+            closeSettings();
+    }, [hasSettings, setKeysOpen]);
+}
+/** Settings for the open project, with what they reach in the studio. */
+function SettingsPane({ state, connection, project, setConversation, }) {
+    const { kernelVersion } = useStudioHost();
+    const { store } = state;
+    const reset = useReset(state);
+    const toast = useToast();
+    const quiet = useSyncExternalStore(store.subscribe, store.isQuiet, store.isQuiet);
+    const shared = useMemo(() => ({
+        asks: !quiet,
+        set: (asks) => {
+            store.setQuiet(!asks);
+        },
+    }), [quiet, store]);
+    const clearChats = useCallback(() => {
+        clearConversation();
+        setConversation((count) => count + 1);
+        toast({ body: "Cleared this tab's chats." });
+    }, [setConversation, toast]);
+    return (_jsx(Suspense, { fallback: null, children: _jsx(StudioSettings, { project: project, version: kernelVersion, watch: state.watchFiles, shared: shared, actions: { clearChats, discard: reset.inProject ? reset.all : undefined }, keys: _jsx(KeySlots, { connection: connection, state: state }) }) }));
+}
+/** The open node's editor, keyed by node so each one opens at its top. */
+function EditorBody({ state, connection, selected, editing, issues, listBadges, editorRef, open, }) {
+    const { workspace, draft, focus, setDraft, update } = state;
+    const project = useProject();
+    const workspaceContext = useWorkspaceContext(workspace.agents, focus, update, project !== null);
+    const provider = shownProvider(workspace, editing, project !== null, connection);
+    return (_jsx(ScrollableArea, { label: "Editor", height: "100%", ref: editorRef, children: _jsx(ListBadges, { value: listBadges, children: _jsx(RunsOn.Provider, { value: connection.on, children: _jsx(LocalConnection.Provider, { value: connection, children: _jsx(WorkspaceContext.Provider, { value: workspaceContext, children: provider ? (_jsx(ProviderEditor, { workspace: workspace, provider: provider, issues: issues.filter((issue) => issue.nodeId === editing), 
+                            // The studio's own providers are the same for everyone, so they only show.
+                            onChange: project
+                                ? (next) => {
+                                    update((current) => withProvider(current, next));
+                                }
+                                : undefined, 
+                            // A provider the files do not hold yet is the studio's to name; code names the rest.
+                            onRename: project && !project.providers.includes(provider.id)
+                                ? (id) => {
+                                    update((current) => renameProvider(current, provider.id, id));
+                                }
+                                : undefined })) : (_jsx(ProfileEditor, { draft: draft, setDraft: setDraft, selectedId: editing, onSelect: (id) => {
+                                open(scopedNodeId(focus, id));
+                            }, issues: issues })) }) }) }) }) }, selected));
+}
+/** Clears the conversation and its traces; the profile stays. */
+function ClearHistoryButton({ run }) {
+    return (_jsx(IconButton, { label: "Clear history", variant: "ghost", icon: _jsx(Icon, { icon: IconPlaylistX, size: "sm" }), tooltip: "Clear the conversation and its traces. Your profile stays.", onClick: run.clear }));
+}
+/** The preview's header: back to the editor, the agent to chat with, history, trace, and Export. */
+function PreviewHeader({ store, chatAgents, chatWith, compile, run, connection, trace, testing, copy, setSheet, }) {
+    const testLabel = testing.open ? 'Close guardrail test' : 'Test guardrails';
+    const t = useLabels();
+    const traceLabel = t(trace.open ? '@theorem.panel.trace.hide' : '@theorem.panel.trace.show');
+    const { compiled } = compile;
+    return (_jsx(Section, { variant: "transparent", paddingInline: 3, paddingBlock: 0, children: _jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(SheetButton, { label: "Back to the editor", icon: IconArrowLeft, sheet: null, setSheet: setSheet }), _jsx(StackItem, { size: "fill", children: _jsx(ChatPicker, { agents: chatAgents, chatWith: chatWith, onChange: store.chatWith }) }), _jsx(StackItem, { size: "static", children: _jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(ActingAsButton, {}), compile.payload && run.isUsed && !testing.open && _jsx(ClearHistoryButton, { run: run }), compile.payload && (_jsx(IconButton, { label: testLabel, variant: "ghost", tooltip: testLabel, icon: _jsx(Icon, { icon: IconShieldSearch, size: "sm" }), "aria-pressed": testing.open, onClick: testing.toggle })), _jsx(ExportActions, { store: store, compiled: compiled.ok ? compiled : undefined, chatted: compile.chatted, chattedId: compile.chattedId, blocked: compile.blocked, copy: copy, connection: {
+                                    connectionMode: connection.mode,
+                                    localBaseUrl: connection.local.baseUrl,
+                                } }), compile.traced && !testing.open ? (_jsx(IconButton, { label: traceLabel, variant: trace.open ? 'secondary' : 'ghost', tooltip: traceLabel, icon: _jsx(Icon, { icon: IconActivity, size: "sm" }), "aria-pressed": trace.open, onClick: trace.toggle })) : null] }) })] }) }));
+}
+/**
+ * Why the agent to chat with does not run: the errors in its config, or the workspace's when its
+ * own has none, each a way to where it is set. Nothing while a config that compiles settles.
+ */
+function ConfigIssues({ compile, chatWith, onIssue, }) {
+    const { compiled } = compile;
+    if (compiled.ok)
+        return null;
+    const root = agentNodeId(chatWith);
+    const own = compiled.issues.filter((issue) => issue.nodeId === root || issue.nodeId.startsWith(`${root}/`));
+    const shown = own.length > 0 ? own : compiled.issues;
+    const errors = shown.length === 1 ? 'an error' : `${String(shown.length)} errors`;
+    return (_jsx(PaneFailure, { title: `The agent config has ${errors}`, description: "Fix it to run the agent.", children: _jsx(VStack, { gap: 2, children: shown.map((issue) => (_jsx(Banner, { status: "error", title: issue.message, endContent: _jsx(Button, { label: "Go to it", variant: "ghost", size: "sm", onClick: () => {
+                        onIssue(issue.nodeId);
+                    } }) }, `${issue.nodeId}:${issue.field ?? ''}:${issue.message}`))) }) }));
+}
+/**
+ * The runner for the compiled agent, its conversation saved as it goes, or the guardrail tester
+ * over it; while none compiles, why.
+ */
+function PreviewBody({ compile, run, connection, chatRef, chatWith, profileId, traceOpen, testing, onIssue, }) {
+    const { payload, traced, tested } = compile;
+    /** Why the project's server does not run this profile: its files say, not the editor. */
+    const unserved = useProject()?.problems.find((problem) => problem.profile === profileId);
+    const pageInputs = useMemo(() => (payload ? pageInputsOf(payload) : null), [payload]);
+    const [pageValues] = usePageValues(chatWith);
+    const sent = useMemo(() => sentPageValues(pageInputs, pageValues), [pageInputs, pageValues]);
+    const shown = payload && !unserved
+        ? {
+            chatKey: run.chatKey,
+            generation: run.generation,
+            props: {
+                payload,
+                onActivity: run.markUsed,
+                conversation: run.conversation,
+                initialText: run.initialText,
+                onConversationChange: (ref) => {
+                    saveConversation(run.chatKey, run.sealer, ref);
+                },
+                slots: sent.slots,
+                context: sent.context,
+                tested,
+            },
+        }
+        : null;
+    const kept = useKeptRuns(run, shown);
+    const blocked = unserved ? (_jsx(PaneFailure, { title: `${unserved.profile} does not run here yet`, description: unserved.message })) : payload ? null : (_jsx(ConfigIssues, { compile: compile, chatWith: chatWith, onIssue: onIssue }));
+    return (_jsx(InPlace, { view: testing && payload ? (_jsx(RaisedPane, { children: (isWide) => (_jsx(Suspense, { fallback: null, children: _jsx(GuardrailTester, { payload: payload, isWide: isWide }) })) })) : null, children: _jsx(VStack, { height: "100%", children: _jsxs(StackItem, { size: "fill", children: [blocked, kept.map(([key, { props }]) => {
+                        const isShown = shown !== null && key === run.runKey;
+                        return (_jsx("div", { style: { display: isShown ? 'contents' : 'none' }, children: _jsx(StudioRunner, { ...props, mode: connection.mode, runtime: connection.runtime, trace: traced ? traceOpen : undefined, chatRef: isShown ? chatRef : undefined }) }, key));
+                    })] }) }) }));
+}
+/**
+ * Every runner the preview has shown, each as it was last shown. Switching agents hides one and
+ * shows another, so neither loses its conversation, results, trace or a call still running. A
+ * cleared chat drops its own runner; another mode or a new workspace drops them all.
+ */
+function useKeptRuns(run, shown) {
+    const [kept] = useState(() => new Map());
+    for (const [key, each] of kept) {
+        const replaced = each.chatKey === run.chatKey && key !== run.runKey;
+        if (each.generation !== run.generation || replaced)
+            kept.delete(key);
+    }
+    if (shown)
+        kept.set(run.runKey, shown);
+    return [...kept];
+}
+/**
+ * The compiled agent to chat with, under its header; while none compiles, why. It sits out renders
+ * that change nothing it shows: typing in the editor, opening a node, Keys.
+ */
+const PreviewPane = memo(function PreviewPane({ store, chatAgents, chatWith, compile, run, connection, chatRef, copy, setSheet, onIssue, }) {
+    const [traceOpen, setTraceOpen] = useState(false);
+    const [testing, setTesting] = useState(false);
+    return (_jsx(LayoutContent, { className: "studio-preview shell-fade", isScrollable: false, padding: 0, children: _jsxs(VStack, { height: "100%", children: [_jsx(PreviewHeader, { store: store, chatAgents: chatAgents, chatWith: chatWith, compile: compile, run: run, connection: connection, trace: {
+                        open: traceOpen,
+                        toggle: () => {
+                            setTraceOpen((open) => !open);
+                        },
+                    }, testing: {
+                        open: testing,
+                        toggle: () => {
+                            setTesting((open) => !open);
+                        },
+                    }, copy: copy, setSheet: setSheet }), _jsx(StackItem, { size: "fill", children: _jsx(PreviewBody, { compile: compile, run: run, connection: connection, chatRef: chatRef, chatWith: chatWith, profileId: chatAgents.find((agent) => agent.value === chatWith)?.label, traceOpen: traceOpen, testing: testing, onIssue: onIssue }) })] }) }));
+});
+/** Tells the host what is on screen as it changes, and that it closed. */
+function useScreenReport(onReport, { agent, type, issues, section }) {
+    useEffect(() => {
+        onReport?.({ agent, type, issues, section });
+    }, [onReport, agent, type, issues, section]);
+    useEffect(() => () => onReport?.(null), [onReport]);
+}
+/** Everything the page holds: the workspace, its connection, the editor's view, the compile, and the run. */
+/** What the page opens on: the studio's own loader data, or an open project's. */
+function useStudioPage(opened) {
+    const { onReport } = useStudioHost();
+    const state = useStudioWorkspace(opened.start, opened.project);
+    const { store, workspace, draft, focus } = state;
+    const connection = useWorkspaceConnection(workspace);
+    const view = useEditorView(store);
+    const frame = useStudioFrame();
+    const selected = selectedNode(workspace, focus);
+    /** The open node as the editor names it: the open agent's own id, or a library tool's. */
+    const editing = innerNodeId(selected, focus) ?? 'identity';
+    const issueReveal = useIssueReveal(selected);
+    const compile = useWorkspaceCompile(workspace, focus, connection);
+    /** On a phone, the tree or the preview, each over the editor; neither shows beside it there. */
+    const [sheet, setSheet] = useState(null);
+    const { open: openNode } = view;
+    const { reveal } = issueReveal;
+    /** Opens the node an issue is on and shows it there, from the editor's count or the preview. */
+    const goToIssue = useCallback((node) => {
+        openNode(node);
+        reveal({ node });
+        setSheet(null);
+    }, [openNode, reveal]);
+    const [askedQuestion, setAskedQuestion] = useState();
+    const { chatWith } = workspace;
+    /** Opens the decision being run, in the editor, at the question an answer is for. */
+    const questionLink = useMemo(() => ({
+        asked: askedQuestion,
+        open: (id) => {
+            openNode(scopedNodeId(chatWith, 'decision'));
+            setAskedQuestion(id);
+            setSheet(null);
+        },
+        shown: () => {
+            setAskedQuestion(undefined);
+        },
+    }), [askedQuestion, chatWith, openNode]);
+    // Settings take the panel; a phone's sheet over it would hide them.
+    const { settingsOpen } = view;
+    useEffect(() => {
+        if (settingsOpen)
+            setSheet(null);
+    }, [settingsOpen]);
+    // The project as its files are now: a Save changes which profiles they hold.
+    const project = useMemo(() => (opened.project ? { ...opened.project, ...state.files } : null), [opened.project, state.files]);
+    const actingAs = useActingAsState(project);
+    const run = useConversationRun(connection.mode, 
+    // A run in the page seals with the tab's key; the hosted demo seals on its server.
+    connection.runtime ? 'page' : 'demo', workspace.chatWith, actingAs.actingAs, opened.question);
+    useArrivalToast(opened, store);
+    const { replaceWorkspace, copy } = usePageActions(store, view, run.setConversation);
+    const asking = useConfirmWrite();
+    const openKeys = useOpenKeys(view.setKeysOpen);
+    const chatRef = useStudioSurface(store, {
+        confirmWrite: asking.confirm,
+        on: connection.on,
+        connection,
+        replaceWorkspace,
+        copy,
+        setKeysOpen: openKeys,
+        newConversation: run.clear,
+        project: opened.project ?? null,
+    });
+    const title = providerIdOf(editing) ??
+        (toolSpecKeyOf(editing) === undefined
+            ? editorTitle(draft, editing)
+            : workspaceTree(state.workspace).tools.find((node) => node.id === editing)?.label);
+    useScreenReport(onReport, screenReport(draft, compile.compiled, title));
+    return {
+        state,
+        connection,
+        view,
+        frame,
+        selected,
+        editing,
+        issueReveal,
+        goToIssue,
+        questionLink,
+        compile,
+        sheet,
+        setSheet,
+        run,
+        copy,
+        chatRef,
+        title,
+        asking,
+        project,
+        actingAs,
+    };
+}
+/**
+ * The profile tree beside the editor (or code) for the draft in a panel on the left; the compiled
+ * agent on the right, under Get code. The draft compiles as it changes; while it doesn't
+ * compile, the agent stays the last one that did.
+ */
+function Studio({ opened }) {
+    const page = useStudioPage(opened);
+    const { state, connection, view, frame, selected, editing, issueReveal, compile } = page;
+    const { goToIssue, sheet, setSheet, run, copy, chatRef, title, asking, project, actingAs } = page;
+    const { questionLink } = page;
+    const { store, draft } = state;
+    const tree = useWorkspaceTree(state, view, selected, setSheet);
+    const chatAgents = useChatAgents(state.workspace.agents);
+    const addAgentFrom = useAddAgent(store, state.update, view.open);
+    const { setMapOpen } = view;
+    const closeMap = useCallback(() => {
+        setMapOpen(false);
+    }, [setMapOpen]);
+    return (_jsx(ProjectContext.Provider, { value: project, children: _jsx(ActingAsContext.Provider, { value: actingAs, children: _jsx(ConfirmWrite, { value: asking.confirm, children: _jsxs(ProjectAsks, { value: state.asks ?? NO_ASKS, children: [asking.dialog, _jsx(SharedChange, { store: state.store }), _jsx(SaveScope, { project: project, state: state, blocked: Boolean(compile.blocked), children: _jsx(QuestionLink, { value: questionLink, children: _jsx(Layout, { ref: frame.layoutCallbackRef, className: frameClass(sheet, view.mapOpen, view.settingsOpen), padding: 0, start: _jsx(SidePanel, { frame: frame, tree: tree, draft: draft, onAddAgent: addAgentFrom, setSheet: setSheet, settings: view.settingsOpen &&
+                                            project && (_jsx(SettingsPane, { state: state, connection: connection, project: project, setConversation: run.setConversation })), map: view.mapOpen && (_jsx(Suspense, { fallback: null, children: _jsx(StudioMap, { workspace: state.workspace, shared: state.shared, selected: view.keysOpen ? '' : selected, onOpen: view.open, onClose: closeMap }) })), children: _jsx(EditorColumn, { heading: view.keysOpen ? 'Keys' : headingOf(tree.list, editing, title), state: state, connection: connection, view: view, compile: compile, selected: selected, editing: editing, frame: frame, issueReveal: issueReveal, goToIssue: goToIssue, setSheet: setSheet }) }), content: _jsx(PreviewPane, { store: store, chatAgents: chatAgents, chatWith: state.workspace.chatWith, compile: compile, run: run, connection: connection, chatRef: chatRef, copy: copy, setSheet: setSheet, onIssue: goToIssue }) }) }) })] }) }) }) }));
+}
+/** Save for the screen under it, when the studio is open on a project. */
+function SaveScope({ project, state, blocked, children, }) {
+    const discard = useDiscardAll(state);
+    const { showConflict } = state;
+    const choose = useCallback(() => {
+        showConflict(true);
+    }, [showConflict]);
+    if (!project)
+        return children;
+    return (_jsxs(ProjectSave, { project: project, workspace: state.workspace, update: state.update, onFilesChanged: state.filesChanged, onDiscard: discard, 
+        // A Save would be built on files that changed: it waits for the builder's choice.
+        blocked: blocked || Boolean(state.conflict), children: [_jsx(ChooseConflictsContext.Provider, { value: state.conflict ? choose : undefined, children: children }), state.conflict?.open && (_jsx(FileConflicts, { conflicts: state.conflict.merge.conflicts, files: state.conflict.files, onApply: state.settle, onClose: () => {
+                    state.showConflict(false);
+                } }))] }));
+}
+/** Adds an agent and opens it. */
+function useAddAgent(store, update, open) {
+    return useCallback((add) => {
+        update(add);
+        open(store.getWorkspace().selected);
+    }, [store, update, open]);
+}
+/** What the tree reads of the page; opening a node closes the phone's sheet, and Keys selects nothing. */
+function useWorkspaceTree(state, view, selected, setSheet) {
+    const { workspace, focus, update, setDraft } = state;
+    const { open } = view;
+    const selectedId = view.keysOpen ? '' : selected;
+    const { list, setList } = useListShown(selectedId);
+    const ownsProviders = useProject() !== null;
+    return useMemo(() => ({
+        workspace,
+        focus,
+        selectedId,
+        list,
+        ownsProviders,
+        setList,
+        onSelect: (id) => {
+            open(id);
+            setSheet(null);
+        },
+        update,
+        setDraft,
+    }), [workspace, focus, selectedId, list, ownsProviders, setList, open, setSheet, update, setDraft]);
+}
+/** The resizable side panel: the tree beside the editor column (`children`), and its handle. */
+function SidePanel({ frame, tree, draft, onAddAgent, setSheet, settings, map, children, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(LayoutPanel, { resizable: frame.sidePanel.props, padding: 0, className: "studio-side", role: "navigation", label: "Studio", isScrollable: false, children: _jsxs(Section, { variant: "raised", height: "100%", padding: 0, "data-shell-frame": "", children: [settings, _jsxs(HStack, { height: "100%", className: "shell-fade", style: settings ? HIDDEN : undefined, children: [_jsx(StackItem, { size: "static", className: "studio-tree", children: _jsx(TreeColumn, { tree: tree, draft: draft, onAddAgent: onAddAgent, listRef: frame.sidebarRef, setSheet: setSheet }) }), _jsx(StackItem, { size: "fill", className: "studio-view", children: children }), map && (_jsxs(_Fragment, { children: [_jsx(ResizeHandle, { className: "studio-map-handle", direction: "horizontal", isAlwaysVisible: false, resizable: frame.sidePanel.props, label: "Resize editor" }), _jsx(StackItem, { size: "fill", className: "studio-map-pane", children: map })] }))] })] }) }), _jsx(ResizeHandle, { className: "studio-side-handle shell-fade", direction: "horizontal", isAlwaysVisible: false, resizable: frame.sidePanel.props, label: "Resize profile" })] }));
+}
+/**
+ * Over a section that is a shared setting: its name, where the project declares it, and how many
+ * other profiles change with it.
+ */
+function SharedLine({ entry, workspace, selected, onOpen, }) {
+    const others = entry.agents.flatMap((key) => {
+        const agent = workspace.agents.find((each) => each.key === key);
+        return agent && !selected.startsWith(`${agentNodeId(key)}/`)
+            ? [agent.identity.agentId || 'New agent']
+            : [];
+    });
+    const count = others.length;
+    return (_jsx(Section, { variant: "transparent", padding: 3, children: _jsx(Banner, { status: "info", title: `${entry.setting.label} · used by ${String(count)} other ${count === 1 ? 'profile' : 'profiles'}`, description: `${declaredAt(entry)}. A change here changes ${others.join(', ')} too.`, endContent: onOpen && _jsx(Button, { label: "Open", variant: "ghost", size: "sm", onClick: onOpen }) }) }));
+}
+/** Over a node one place in the project's files sets whole: what sets it, where, and the way there. */
+function OriginBanner({ origin, partly, onOpen, }) {
+    const place = originPlace(origin);
+    // The cause is the title. Here: what it does to this page, then the way out.
+    const effect = partly ? 'The greyed rows are read-only here.' : 'Read-only here.';
+    const way = place ? `Edit it at ${place}.` : originWay(origin);
+    return (_jsx(Section, { variant: "transparent", padding: 3, children: _jsx(Banner, { status: "info", title: originLabel(origin), description: `${effect} ${way}`, endContent: place && _jsx(Button, { label: "Open", variant: "ghost", size: "sm", onClick: onOpen }) }) }));
+}
+/** The editor column: its toolbar over the Keys panel, the open node's editor, or its code. */
+function EditorColumn({ heading, state, connection, view, compile, selected, editing, frame, issueReveal, goToIssue, setSheet, }) {
+    const { editorRef, revealed } = issueReveal;
+    // Keys stands over the open node, so it doesn't say what sets it.
+    const over = view.keysOpen;
+    const shared = over ? undefined : sharedAt(state.shared, selected);
+    const { shown, leavePage } = useLeftIssues(compile.editorIssues, selected, revealed);
+    const reset = useReset(state);
+    const project = useProject();
+    const openOrigin = useOpenOrigin(project);
+    const rowOrigins = useMemo(() => {
+        const scope = state.origins && nodeOrigins(state.workspace, state.origins, selected);
+        return scope ? { scope, open: openOrigin } : null;
+    }, [state.origins, state.workspace, selected, openOrigin]);
+    const whole = rowOrigins?.scope.section;
+    const said = over ? undefined : (whole ?? rowOrigins?.scope.partly);
+    return (_jsxs(VStack, { height: "100%", children: [_jsx(EditorToolbar, { heading: heading, compile: compile, selected: selected, view: view, onIssue: goToIssue, reset: reset, project: project && (_jsxs(_Fragment, { children: [state.conflict && (_jsx(Token, { label: conflictsLabel(state.conflict.merge.conflicts.length), color: "orange", description: "Choose between studio edits and source code", onClick: () => {
+                                state.showConflict(true);
+                            } })), _jsx(ProjectTokens, { project: project, unloaded: state.files?.unloaded })] })), setSheet: setSheet }), shared && (_jsx(SharedLine, { entry: shared, workspace: state.workspace, selected: selected, onOpen: project
+                    ? () => {
+                        openOrigin({
+                            path: [],
+                            kind: 'code',
+                            file: shared.setting.file,
+                            line: shared.setting.line,
+                        });
+                    }
+                    : undefined })), said && (_jsx(OriginBanner, { origin: said, partly: !whole, onOpen: () => {
+                    openOrigin(said);
+                } })), _jsx(StackItem, { size: "fill", children: _jsx(RowOrigins, { value: rowOrigins, children: _jsx(LeavePage, { value: leavePage, children: _jsx(EditorColumnBody, { state: state, connection: connection, view: view, compile: compile, rowIssues: shown, selected: selected, editing: editing, frame: frame, editorRef: editorRef }) }) }) })] }));
+}
+/** The provider open at `editing`, as the editor and the code view show it. */
+function shownProvider(workspace, editing, inProject, connection) {
+    const held = workspace.providers.find((each) => each.id === providerIdOf(editing));
+    // The studio's own local provider is reached where the local connection says, as a run reaches it.
+    return held && onStudioLocal(held.id, inProject)
+        ? { ...held, connection: { baseURL: localProviderAddress(connection.local.baseUrl) } }
+        : held;
+}
+/** Under the editor's header: the Keys panel, the open node's editor, or its code. */
+function EditorColumnBody({ state, connection, view, compile, rowIssues, selected, editing, frame, editorRef, }) {
+    const project = useProject();
+    const provider = shownProvider(state.workspace, editing, project !== null, connection);
+    if (view.keysOpen)
+        return _jsx(KeysBody, { connection: connection, state: state });
+    if (view.editorView === 'code') {
+        return (_jsx(Suspense, { fallback: null, children: provider ? (_jsx(ProviderCode, { provider: provider, issues: rowIssues.filter((issue) => issue.nodeId === editing), state: state, isEditable: project !== null })) : (_jsx(CodeBody, { source: compile.source, blocked: compile.blocked, issues: compile.editorIssues, state: state })) }));
+    }
+    return (_jsx(ProbedAgent.Provider, { value: compile.probed, children: _jsx(EditorBody, { state: state, connection: connection, selected: selected, editing: editing, issues: rowIssues, listBadges: frame.listBadges, editorRef: editorRef, open: view.open }) }));
+}
+/** The studio, opened on `opened`, with what the page showing it provides. */
+export function StudioScreen({ opened, host }) {
+    useEffect(() => {
+        warmWhenIdle(testerPanel, mapPanel, codePane, exportKit);
+    }, []);
+    return (_jsx(StudioHostContext.Provider, { value: host, children: _jsx(Studio, { opened: opened }) }));
+}