@theoremjs/studio 0.3.4-next.413.gb7a2b75 → 0.3.4-next.415.g3597d47

package/ui/studio-screen.js

@@ -21,11 +21,11 @@ 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, IconDownload, IconFile, IconFileImport, IconFileSmile, IconFileZip, IconKey, IconMenu2, IconPlayerPlay, IconPlaylistX, IconPlus, IconRestore, IconRotateClockwise, IconSearch, IconShieldSearch, IconSitemap, IconSparkles, IconTool, IconX, } from '@tabler/icons-react';
+import { IconActivity, IconAdjustmentsHorizontal, IconArrowBarToDown, IconArrowLeft, IconBrowserShare, IconCheck, IconCloud, IconCode, IconCopy, IconCopyPlus, IconFile, IconFileImport, IconFileSmile, IconFileZip, IconKey, IconMenu2, IconPlayerPlay, IconPlaylistX, IconPlus, IconRotateClockwise, IconSearch, IconSitemap, IconSparkles, IconTool, IconX, } from '@tabler/icons-react';
 import { profileGraphFacet } from '@theoremjs/agents';
 import { InPlace, PaneFailure, RaisedPane, useDisclosureMotion, } 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 { 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, resetAgentNode, 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 { createTraceFeed } from '@theoremjs/web/client';
@@ -35,7 +35,7 @@ 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 { ConfirmWrite, GuardrailTest, 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";
@@ -65,6 +65,7 @@ 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";
+import { usePhone } from "./use-phone.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");
@@ -101,26 +102,31 @@ 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();
-        } }));
+        } }, label));
 }
 function rowAction(label, icon, onPress) {
     return _jsx("span", { className: "studio-tree-action", children: actionButton(label, icon, onPress) });
 }
+/** A row's hover actions: Reset, while it differs from its start, then the others, the x last. */
+function rowActions(label, reset, ...actions) {
+    const shown = [reset && actionButton(`Reset ${label}`, IconRotateClockwise, reset), ...actions];
+    return shown.some(Boolean) ? _jsx("span", { className: "studio-tree-action", children: shown }) : undefined;
+}
 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;
+    const actions = rowActions(node.label, tree.resetOf(node.ref, node.label), isOptional &&
+        actionButton(`Remove ${node.label}`, IconX, () => {
+            setDraft((current) => excludeFacet(current, facet));
+        }));
     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,
+        endContent: actions,
+        className: actions ? 'studio-tree-row' : undefined,
         isSelected: id === selectedId,
         isExpanded: node.children.length > 0,
         onClick: () => {
@@ -171,7 +177,7 @@ function agentItem(tree, isOpen, actions) {
     };
 }
 function agentItems(state) {
-    const { workspace, focus, selectedId, onSelect, update, setDraft } = state;
+    const { workspace, focus, selectedId, onSelect, update, setDraft, reset } = state;
     const isOnly = workspace.agents.length === 1;
     return workspace.agents.map((agent) => {
         const draft = libraryDraft(workspace, agent.key) ?? createBlankDraft();
@@ -182,16 +188,17 @@ function agentItems(state) {
             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));
-                    })] }));
+            resetOf: (ref, label) => reset(resetAgentNode(workspace, agent.key, ref), `Reset ${label} to how it started.`),
+        }, agent.key === focus, rowActions(name, reset(resetAgent(workspace, agent.key), `Reset ${name} to how it started.`), 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) {
+function toolItems({ workspace, selectedId, onSelect, update, reset }, query) {
     const needle = query.trim().toLowerCase();
     return workspaceTree(workspace).tools.flatMap((node) => {
         const tool = workspace.toolSpecs.find((spec) => spec.key === toolSpecKeyOf(node.id));
@@ -203,10 +210,11 @@ function toolItems({ workspace, selectedId, onSelect, update }, query) {
                 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, () => {
+                endContent: rowActions(node.label, tool &&
+                    reset(resetLibraryTool(workspace, tool.key), `Reset ${node.label} to how it started.`), actionButton(`Remove ${node.label}`, IconX, () => {
                     if (tool)
                         update((current) => removeLibraryTool(current, tool.key));
-                }),
+                })),
                 className: 'studio-tree-row',
                 isSelected: node.id === selectedId,
                 onClick: () => {
@@ -226,7 +234,7 @@ function declaredAt({ setting }) {
  * 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;
+    const { workspace, selectedId, onSelect, update, ownsProviders, reset } = 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.
@@ -246,19 +254,19 @@ function providerItems(tree) {
                 },
             ];
         });
+        const actions = rowActions(provider.id, reset(resetProvider(workspace, provider.id), `Reset ${provider.id} to how it started.`), isFree &&
+            actionButton(`Remove ${provider.id}`, IconX, () => {
+                update((current) => removeProvider(current, provider.id));
+                const [first] = workspace.agents;
+                if (selectedId === id && first)
+                    onSelect(agentNodeId(first.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,
+            endContent: actions,
+            className: actions ? 'studio-tree-row' : undefined,
             isSelected: selectedId === id,
             onClick: () => {
                 onSelect(id);
@@ -437,7 +445,7 @@ function WorkspaceTreeLists({ tree, draft, onAddAgent, listRef, }) {
                 } }), 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) => {
+                } })), list === 'tools' ? _jsx(AddToolButton, { tree: tree, draft: draft }) : null, list === 'providers' && tree.keys ? _jsx(ManageKeysButton, { keys: tree.keys }) : 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 }) })] }));
@@ -839,17 +847,24 @@ function useLeftIssues(issues, page, revealed) {
     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, }) {
+/** Open in a new tab, for the agent being chatted with; off while the workspace has issues. */
+function OpenInNewTabButton({ compiled, chattedId, blocked, connection, }) {
+    const project = useProject();
+    const phone = usePhone();
+    return (_jsx(Button, { label: "Open in a new tab", isIconOnly: phone, variant: "ghost", icon: _jsx(Icon, { icon: IconBrowserShare, size: "sm" }), isDisabled: !compiled, tooltip: blocked ??
+            'Run this agent on a full page of its own, in a new tab, the way a person using it would see it', onClick: () => {
+            const run = compiled && workspaceRunAgent(compiled, chattedId);
+            if (run)
+                openInNewTab({ ...runPayload(run), ...connection }, project);
+        } }));
+}
+/** Get code: a .zip, Copy, or Copy for LLM, for every agent; off while the workspace has issues. */
+function ExportMenu({ store, compile, copy, }) {
     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, }) {
+    const compiled = compile.compiled.ok ? compile.compiled : undefined;
+    const { chatted, blocked } = compile;
+    /** What the project's files hold that the code names, read when the builder asks for the code. */
+    const code = () => projectCode(project, store.getWorkspace());
     return (_jsx(DropdownMenu, { button: {
             label: 'Get code',
             variant: 'ghost',
@@ -1559,45 +1574,6 @@ function ViewToggleButton({ view }) {
             },
         ] }));
 }
-/**
- * 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();
@@ -1621,47 +1597,13 @@ function useDiscardAll({ store, filesChanged }) {
         });
     }, [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 editor column's header: its title, the next issue, what to start from, Get code, and the view toggle. */
+function EditorToolbar({ heading, compile, selected, view, onIssue, project, getCode, 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] }) }), getCode, _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');
-        } }));
+/** Opens the Keys page, above the providers list, in the same form as Add provider. */
+function ManageKeysButton({ keys }) {
+    return (_jsx(Button, { label: "Manage keys", variant: "ghost", size: "sm", width: "100%", icon: _jsx(Icon, { icon: IconKey, size: "sm" }), style: { height: 'calc(var(--size-element-sm) - 4px)' }, "aria-pressed": keys.open, onClick: keys.toggle }));
 }
 /** The Keys panel, in the editor's column. */
 function KeysBody({ connection, state, }) {
@@ -1716,7 +1658,7 @@ function useOpenKeys(setKeysOpen) {
 function SettingsPane({ state, connection, project, setConversation, }) {
     const { kernelVersion } = useStudioHost();
     const { store } = state;
-    const reset = useReset(state);
+    const save = useProjectSave();
     const toast = useToast();
     const quiet = useSyncExternalStore(store.subscribe, store.isQuiet, store.isQuiet);
     const shared = useMemo(() => ({
@@ -1730,7 +1672,7 @@ function SettingsPane({ state, connection, project, setConversation, }) {
         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 }) }) }));
+    return (_jsx(Suspense, { fallback: null, children: _jsx(StudioSettings, { project: project, version: kernelVersion, watch: state.watchFiles, shared: shared, actions: { clearChats, discard: save?.discard }, 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, }) {
@@ -1760,30 +1702,26 @@ function ClearHistoryButton({ run }) {
 }
 /** The types whose conversation a trace can hold, and so open and replay. */
 const NO_CONVERSATION = new Set(['decision', 'host', 'embedding', 'live']);
-/** Downloads the records of the conversation on screen, as a trace file the studio opens. */
-function DownloadTraceButton({ feed, name }) {
-    const records = useSyncExternalStore(feed.subscribe, feed.records, feed.records);
-    return (_jsx(IconButton, { label: "Download trace", variant: "ghost", tooltip: records.length ? 'Download trace' : 'Nothing recorded yet', icon: _jsx(Icon, { icon: IconDownload, size: "sm" }), isDisabled: records.length === 0, onClick: () => {
-            const stamp = new Date().toISOString().replaceAll(':', '-').slice(0, 19);
-            download(`${name}-${stamp}.trace.json`, new Blob([JSON.stringify(records, null, 2)], { type: 'application/json' }));
-        } }));
-}
-/** Import trace, for a type whose conversation a trace holds, and Download trace, outside an imported one. */
-function TraceFileButtons({ payload, tracing, feed, profileId, }) {
-    if (payload == null)
+/** Replay exchange, for a type whose conversation a trace holds. */
+function ReplayExchangeButton({ payload, tracing, }) {
+    const phone = usePhone();
+    if (payload == null || NO_CONVERSATION.has(payload.profile.type))
         return null;
-    const importLabel = tracing.open ? 'Close imported trace' : 'Import trace';
-    return (_jsxs(_Fragment, { children: [!NO_CONVERSATION.has(payload.profile.type) && (_jsx(IconButton, { label: importLabel, variant: tracing.open ? 'secondary' : 'ghost', tooltip: importLabel, icon: _jsx(Icon, { icon: IconFileImport, size: "sm" }), "aria-pressed": tracing.open, onClick: tracing.toggle })), !tracing.open && _jsx(DownloadTraceButton, { feed: feed, name: profileId ?? 'agent' })] }));
+    return (_jsx(Button, { label: tracing.open ? 'Close replay' : 'Replay exchange', isIconOnly: phone, variant: tracing.open ? 'secondary' : 'ghost', tooltip: tracing.open
+            ? 'Back to the live conversation'
+            : 'Open a recorded conversation (a .trace.json file) to see what happened, then replay its messages through this agent as it is now and compare', icon: _jsx(Icon, { icon: IconFileImport, size: "sm" }), "aria-pressed": tracing.open, onClick: tracing.toggle }));
 }
 /** 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, tracing, feed, profileId, copy, setSheet, }) {
-    const testLabel = testing.open ? 'Close guardrail test' : 'Test guardrails';
+function PreviewHeader({ store, chatAgents, chatWith, compile, run, connection, trace, testing, tracing, setSheet, }) {
     const traceLabel = trace.open ? 'Hide trace' : 'View trace';
+    const phone = usePhone();
     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 && !tracing.open && (_jsx(ClearHistoryButton, { run: run })), !testing.open && (_jsx(TraceFileButtons, { payload: compile.payload, tracing: tracing, feed: feed, profileId: profileId })), 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: {
+    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 && !tracing.open && (_jsx(ClearHistoryButton, { run: run })), !testing && _jsx(ReplayExchangeButton, { payload: compile.payload, tracing: tracing }), (compile.traced || tracing.open) && !testing ? (_jsx(Button, { label: traceLabel, isIconOnly: phone, variant: trace.open ? 'secondary' : 'ghost', tooltip: trace.open
+                                    ? 'Close the trace'
+                                    : 'See how each reply was made, step by step: every model and tool call, guardrail check and gate, with its timing', icon: _jsx(Icon, { icon: IconActivity, size: "sm" }), "aria-pressed": trace.open, onClick: trace.toggle })) : null, _jsx(OpenInNewTabButton, { compiled: compiled.ok ? compiled : undefined, chattedId: compile.chattedId, blocked: compile.blocked, connection: {
                                     connectionMode: connection.mode,
                                     localBaseUrl: connection.local.baseUrl,
-                                } }), (compile.traced || tracing.open) && !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
@@ -1899,10 +1837,11 @@ function useSendAfterResume(chatRef, runKey) {
  * 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 PreviewPane = memo(function PreviewPane({ store, chatAgents, chatWith, compile, run, connection, chatRef, setSheet, onIssue, testing, }) {
     const [traceOpen, setTraceOpen] = useState(false);
-    const [testing, setTesting] = useState(false);
-    const [tracing, setTracing] = useState(false);
+    const [imported, setTracing] = useState(false);
+    // why: The guardrail test covers an imported trace too; closing the test shows it again.
+    const tracing = imported && !testing;
     const feedOf = useRunFeeds(run.generation);
     const profileId = chatAgents.find((agent) => agent.value === chatWith)?.label;
     const sendNext = useSendAfterResume(chatRef, run.runKey);
@@ -1917,18 +1856,12 @@ const PreviewPane = memo(function PreviewPane({ store, chatAgents, chatWith, com
                         toggle: () => {
                             setTraceOpen((open) => !open);
                         },
-                    }, testing: {
-                        open: testing,
-                        toggle: () => {
-                            setTesting((open) => !open);
-                            setTracing(false);
-                        },
-                    }, tracing: {
+                    }, testing: testing, tracing: {
                         open: tracing,
                         toggle: () => {
                             setTracing((open) => !open);
                         },
-                    }, feed: feedOf(run.runKey), profileId: profileId, copy: copy, setSheet: setSheet }), _jsx(StackItem, { size: "fill", children: _jsx(PreviewBody, { compile: compile, run: run, connection: connection, chatRef: chatRef, chatWith: chatWith, profileId: profileId, traceOpen: traceOpen, testing: testing, tracing: traceView, feedOf: feedOf, onIssue: onIssue }) })] }) }));
+                    }, setSheet: setSheet }), _jsx(StackItem, { size: "fill", children: _jsx(PreviewBody, { compile: compile, run: run, connection: connection, chatRef: chatRef, chatWith: chatWith, profileId: profileId, traceOpen: traceOpen, testing: testing, tracing: traceView, feedOf: feedOf, onIssue: onIssue }) })] }) }));
 });
 /** Tells the host what is on screen as it changes, and that it closed. */
 function useScreenReport(onReport, { agent, type, issues, section }) {
@@ -2046,8 +1979,20 @@ function Studio({ opened }) {
     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 }) }) }) })] }) }) }) }));
+    const [testing, setTesting] = useState(false);
+    const guardrailTest = useMemo(() => compile.payload
+        ? {
+            open: testing,
+            toggle: () => {
+                // why: On a phone the test shows in the preview sheet, so opening it goes there.
+                if (!testing)
+                    setSheet('preview');
+                setTesting(!testing);
+            },
+        }
+        : null, [compile.payload, testing, setSheet]);
+    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(GuardrailTest.Provider, { value: guardrailTest, 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, copy: copy, setSheet: setSheet }) }), content: _jsx(PreviewPane, { store: store, chatAgents: chatAgents, chatWith: state.workspace.chatWith, compile: compile, run: run, connection: connection, chatRef: chatRef, setSheet: setSheet, onIssue: goToIssue, testing: testing && Boolean(compile.payload) }) }) }) }) })] }) }) }) }));
 }
 /** Save for the screen under it, when the studio is open on a project. */
 function SaveScope({ project, state, blocked, children, }) {
@@ -2074,10 +2019,34 @@ function useAddAgent(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 { open, keysOpen, setKeysOpen, setEditorView } = view;
+    const selectedId = keysOpen ? '' : selected;
     const { list, setList } = useListShown(selectedId);
     const ownsProviders = useProject() !== null;
+    const { hasSettings } = useStudioHost();
+    const toast = useToast();
+    const reset = useCallback((to, body) => to === workspace
+        ? undefined
+        : () => {
+            update(() => to);
+            const dismiss = toast({
+                body,
+                endContent: (_jsx(Button, { label: "Undo", variant: "ghost", size: "sm", onClick: () => {
+                        update(() => workspace);
+                        dismiss();
+                    } })),
+            });
+        }, [workspace, update, toast]);
+    const keys = useMemo(() => hasSettings
+        ? null
+        : {
+            open: keysOpen,
+            toggle: () => {
+                setKeysOpen((was) => !was);
+                setEditorView('editor');
+                setSheet(null);
+            },
+        }, [hasSettings, keysOpen, setKeysOpen, setEditorView, setSheet]);
     return useMemo(() => ({
         workspace,
         focus,
@@ -2091,7 +2060,22 @@ function useWorkspaceTree(state, view, selected, setSheet) {
         },
         update,
         setDraft,
-    }), [workspace, focus, selectedId, list, ownsProviders, setList, open, setSheet, update, setDraft]);
+        reset,
+        keys,
+    }), [
+        workspace,
+        focus,
+        selectedId,
+        list,
+        ownsProviders,
+        setList,
+        open,
+        setSheet,
+        update,
+        setDraft,
+        reset,
+        keys,
+    ]);
 }
 /** The resizable side panel: the tree beside the editor column (`children`), and its handle. */
 function SidePanel({ frame, tree, draft, onAddAgent, setSheet, settings, map, children, }) {
@@ -2120,13 +2104,12 @@ function OriginBanner({ origin, partly, onOpen, }) {
     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, }) {
+function EditorColumn({ heading, state, connection, view, compile, selected, editing, frame, issueReveal, goToIssue, copy, 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(() => {
@@ -2135,7 +2118,7 @@ function EditorColumn({ heading, state, connection, view, compile, selected, edi
     }, [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: () => {
+    return (_jsxs(VStack, { height: "100%", children: [_jsx(EditorToolbar, { heading: heading, compile: compile, selected: selected, view: view, onIssue: goToIssue, getCode: _jsx(ExportMenu, { store: state.store, compile: compile, copy: copy }), 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
                     ? () => {

package/ui/studio.css

@@ -21,8 +21,8 @@
 }
 
 /*
- * A studio tree row's add or remove button shows on hover or keyboard focus, fading in,
- * so the tree reads as names at rest. Without hover (touch), it always shows.
+ * A studio tree row's buttons (reset, add, remove) show on hover or keyboard focus, fading in,
+ * so the tree reads as names at rest. Without hover (touch), they always show.
  */
 .studio-tree-row {
   position: relative;
@@ -51,26 +51,37 @@
 }
 
 /*
- * The button sits over the label's end rather than beside it, so it never widens the row; the
- * label fades out beneath it instead of being pushed along.
+ * The buttons sit over the label's end rather than beside it, so they never widen the row; the
+ * label fades out beneath them instead of being pushed along. Each button past the first fades a
+ * button's width further in.
  */
+.studio-tree-row {
+  --studio-tree-fade: 0px;
+}
+
+.studio-tree-row:has(.studio-tree-action > :nth-child(2)) {
+  --studio-tree-fade: var(--spacing-8);
+}
+
+.studio-tree-row:has(.studio-tree-action > :nth-child(3)) {
+  --studio-tree-fade: calc(var(--spacing-8) * 2);
+}
+
 @media (hover: none) {
   .studio-tree-row > button:not([data-tree-toggle]) {
-    mask-image: linear-gradient(to left, transparent var(--spacing-6), #000 var(--spacing-10));
+    mask-image: linear-gradient(
+      to left,
+      transparent calc(var(--spacing-6) + var(--studio-tree-fade)),
+      #000 calc(var(--spacing-10) + var(--studio-tree-fade))
+    );
   }
 }
 
 .studio-tree-row:is(:hover, :has(:focus-visible)) > button:not([data-tree-toggle]) {
-  mask-image: linear-gradient(to left, transparent var(--spacing-6), #000 var(--spacing-10));
-}
-
-/* A row with two buttons fades a button's width further in. */
-.studio-tree-row:has(.studio-tree-action > :nth-child(2)):is(:hover, :has(:focus-visible))
-> button:not([data-tree-toggle]) {
   mask-image: linear-gradient(
     to left,
-    transparent calc(var(--spacing-6) + var(--spacing-8)),
-    #000 calc(var(--spacing-10) + var(--spacing-8))
+    transparent calc(var(--spacing-6) + var(--studio-tree-fade)),
+    #000 calc(var(--spacing-10) + var(--studio-tree-fade))
   );
 }
 
@@ -221,6 +232,11 @@ button.inspector-origin:hover {
 }
 
 @media (width >= 768px) {
+  /* The page is already inset, so the preview's panes meet its end and bottom as the editor does. */
+  .studio-preview {
+    --theorem-pane-edge: 0px;
+  }
+
   .studio-frame:is(.studio-map-open, .studio-settings-open) .studio-side {
     width: 100%;
     max-width: none;

package/ui/use-phone.d.ts

@@ -0,0 +1,2 @@
+/** Whether the page is phone-wide. */
+export declare function usePhone(): boolean;

package/ui/use-phone.js

@@ -0,0 +1,13 @@
+import { useSyncExternalStore } from 'react';
+/** The width below which the studio's text buttons keep only their icon. */
+const PHONE = '(width < 768px)';
+/** Whether the page is phone-wide. */
+export function usePhone() {
+    return useSyncExternalStore((change) => {
+        const query = globalThis.matchMedia(PHONE);
+        query.addEventListener('change', change);
+        return () => {
+            query.removeEventListener('change', change);
+        };
+    }, () => globalThis.matchMedia(PHONE).matches, () => false);
+}

package/workspace.d.ts

@@ -112,6 +112,13 @@ export declare function startedHere(workspace: StudioWorkspace): StudioWorkspace
  * Nothing else changes. An agent already at its start returns the same workspace.
  */
 export declare function resetAgent(workspace: StudioWorkspace, key: string): StudioWorkspace;
+/**
+ * Puts one row of an agent's tree back to its start: a section, or one model under Models. The
+ * agent's other sections keep their edits. The agent's own row puts the whole agent back, as
+ * `resetAgent` does, and Tools brings back a tool that left the library as it does too. A row
+ * already at its start returns the same workspace.
+ */
+export declare function resetAgentNode(workspace: StudioWorkspace, key: string, ref: StudioNodeRef): StudioWorkspace;
 /**
  * Puts every agent, every library tool, and every provider back to its start, in one step. A tool that left the
  * library comes back when an agent started out allowing it. An agent or a tool added here stays: it