@theoremjs/studio 0.3.4-next.433.gf6b4da5 → 0.3.4-next.454.gaa3f549

package/ui/profile-editor.js

@@ -26,7 +26,7 @@ import { VStack } from '@astryxdesign/core/VStack';
 import { IconAbc, IconAdjustmentsHorizontal, IconAlertTriangle, IconAlignLeft, IconAntennaBars1, IconAntennaBars2, IconAntennaBars3, IconAntennaBars4, IconAntennaBars5, IconAntennaBarsOff, IconArrowDown, IconArrowLeft, IconArrowUp, IconBan, IconBandage, IconBiohazard, IconBolt, IconBraces, IconBulb, IconBulbOff, IconCertificate, IconCheck, IconChevronRight, IconCircleDashed, IconDatabase, IconDeviceDesktop, IconEraser, IconEye, IconEyeOff, IconFeather, IconFlag, IconFlame, IconFlask, IconGauge, IconHandOff, IconHandStop, IconHeadset, IconHourglass, IconHttpDelete, IconHttpGet, IconHttpPatch, IconHttpPost, IconHttpPut, IconInfoCircle, IconInputAi, IconKey, IconLayersUnion, IconLockOpen, IconMessage, IconMicrophone, IconPackage, IconPaperclip, IconPencil, IconPlayerPause, IconPlayerPlay, IconPlayerStop, IconPlayerTrackNext, IconPlugConnected, IconPlus, IconRefresh, IconRegex, IconSearch, IconSend, IconServer, IconShieldLock, IconShieldOff, IconShieldSearch, IconSquareRoundedNumber0, IconSquareRoundedNumber2, IconTool, IconTrash, IconUser, IconUserCheck, IconWaveSine, IconWriting, IconX, } from '@tabler/icons-react';
 import { ATTACHMENT_ACCEPT_MIMES, CONTINUE_STOP_KINDS, fieldMeta, GOOGLE_BUILTIN_TOOLS, GOOGLE_IMAGE_ASPECT_RATIOS, GOOGLE_IMAGE_OUTPUT_MIMES, GOOGLE_IMAGE_RESOLUTIONS, GOOGLE_SPEECH_VOICES, HTTP_METHODS, IMAGE_ATTACHMENT_ACCEPT_MIMES, LABEL_KEYS, labelDefault, PROFILE_HANDLE_MAX_CHARS, PROFILE_ID_MAX_CHARS, profileGraphFacet, THINKING_LEVELS, VOICE_ACCEPT_MIMES, } from '@theoremjs/agents';
 import { BOUNDARIES, BOUNDARY_META, DETECT_ACTION_META, DETECT_ACTIONS, DETECTOR_BOUNDARIES, DETECTOR_GROUP_META, DETECTOR_GROUPS, DETECTOR_META, DETECTORS, TOOL_BOUNDARIES, TOOL_KINDS, } from '@theoremjs/agents/guardrails';
-import { lazy, Suspense, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, } from 'react';
+import { createContext, lazy, Suspense, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, } from 'react';
 import { acceptSections, agentToolTarget, bindingSlots, COMPACTION_DRAFT_DEFAULTS, defaultEffortRequired, defaultModelRequired, definitionOf, draftAllows, draftKey, expandAccept, INLINE_LABELS, includableFacets, includeFacet, inputLimitsRequired, isGoogleRoute, isOpenRouterRoute, kernelDefinitions, LOCAL_PROVIDER_ID, lentCompression, modelBindingNodeId, modelRoute, modelSlots, newCriteria, newDecisionImage, newDecisionQuestion, newModelBinding, newOwnDetector, newPattern, newToolSpec, nextAccept, onStudioLocal, optionAt, plantsCanary, protocolOptionFields, removeModelBinding, STUDIO_TRACE_DESTINATION, sampleToolInput, sectionNote, servedProtocols, servesProfileType, setProfileType, studioNetworkNote, studioNodeRef, studioRunsProvider, studioTaintNote, takesContinueInstruction, toolSpecNodeId, updateModelBinding, withOption, writeAsk, } from "../mod.js";
 import { AddProviderButton } from "./add-provider.js";
 import { IconGoogle, IconOpenAi, IconOpenRouter, IconTypeSafe } from "./brand-icons.js";
@@ -1833,6 +1833,8 @@ function SampleInputRow({ value, onChange }) {
 function TestConnectionButton({ isLoading, onClick }) {
     return (_jsx(HStack, { children: _jsx(Button, { label: "Test connection", variant: "secondary", size: "sm", icon: _jsx(Icon, { icon: IconPlugConnected, size: "sm" }), isLoading: isLoading, onClick: onClick }) }));
 }
+/** A test already run, which a still preview of the editor shows done. */
+export const ShownProbe = createContext(undefined);
 /**
  * Tries the tool's endpoint or MCP server once, from the server, which reaches public hosts only.
  * The sample input and credential live here only: neither is saved to the draft.
@@ -1846,7 +1848,8 @@ function ToolTest({ tool, guardrails }) {
         setToolCredential(tool.key, value);
     };
     const [pending, setPending] = useState(false);
-    const [result, setResult] = useState();
+    const shown = useContext(ShownProbe);
+    const [result, setResult] = useState(shown);
     const http = tool.toolType === 'http';
     const method = tool.method ?? HTTP_METHODS[0];
     // A result answers the request as it was: once what it reaches or sends changes, it's dropped.

package/ui/read-map.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '@astryxdesign/core/Text';
-import { IconFileCode, IconFileSmile, IconFolder } from '@tabler/icons-react';
+import { IconFileCode, IconFolder } from '@tabler/icons-react';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { mapCurve } from "../map-line.js";
 import { readMap } from "./lib/read-map.js";
-import { profileTypeIcon, toolTypeIcon } from "./lib/type-icons.js";
+import { AGENT_ICON, profileTypeIcon, toolTypeIcon } from "./lib/type-icons.js";
 import { MapToken, useTokenWidths } from "./map-token.js";
 import './read-map.css';
 /** The slowest the map draws: one step in this long. */
@@ -27,7 +27,7 @@ const LABEL = 30;
 const NODE_ICON = {
     entry: IconFileCode,
     folder: IconFolder,
-    profile: IconFileSmile,
+    profile: AGENT_ICON,
     tool: undefined,
     more: undefined,
 };

package/ui/studio-save.js

@@ -6,6 +6,7 @@ import { CodeBlock } from '@astryxdesign/core/CodeBlock';
 import { Dialog, DialogHeader } from '@astryxdesign/core/Dialog';
 import { HoverCard } from '@astryxdesign/core/HoverCard';
 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, LayoutFooter } from '@astryxdesign/core/Layout';
@@ -15,11 +16,47 @@ import { Text } from '@astryxdesign/core/Text';
 import { useToast } from '@astryxdesign/core/Toast';
 import { Token } from '@astryxdesign/core/Token';
 import { VStack } from '@astryxdesign/core/VStack';
-import { IconFiles, IconListDetails } from '@tabler/icons-react';
+import { IconCheck, IconCopy, IconFiles, IconListDetails } from '@tabler/icons-react';
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { atStart, removeAgent, resetAgent, startedHere } from "../mod.js";
 import { reviewSave, undoSave, writeSave } from "./lib/studio-project.js";
 import { RefusalDetail } from "./refusal-detail.js";
+/** The areas `settings` fall in, most first: `guardrails.detect (310)`, not every dotted path. */
+function settingAreas(settings, shown = 4) {
+    const counts = new Map();
+    for (const setting of settings) {
+        const parts = setting.split('.');
+        const area = parts.length > 2 ? parts.slice(0, 2).join('.') : parts[0];
+        counts.set(area, (counts.get(area) ?? 0) + 1);
+    }
+    const areas = [...counts].sort((a, b) => b[1] - a[1]);
+    const named = areas
+        .slice(0, shown)
+        .map(([area, count]) => (count > 1 ? `${area} (${count})` : area));
+    const more = areas.length - named.length;
+    return more > 0 ? `${named.join(', ')}, and ${more} more` : named.join(', ');
+}
+/** Every alert as plain text, for pasting into a message: all names, the areas of each difference. */
+function alertsReport(project, unloaded) {
+    const { problems, modelProblems, differences, unheld, unregistered } = project;
+    const lines = [`Theorem studio: ${project.name}`];
+    if (unloaded !== undefined)
+        lines.push('', 'The studio cannot load your files:', unloaded.trim());
+    for (const each of problems)
+        lines.push('', `Cannot run ${each.profile}: ${each.message}`);
+    for (const each of modelProblems) {
+        lines.push('', `${each.profile}'s model '${each.model}' cannot run: ${each.message}`);
+    }
+    if (unregistered.length) {
+        lines.push('', `Defined in files but not registered at start (${String(unregistered.length)}): ${unregistered.map((each) => each.name).join(', ')}`);
+    }
+    if (unheld.length)
+        lines.push('', `Cannot check against files: ${[...new Set(unheld)].join(' ')}`);
+    for (const each of differences) {
+        lines.push('', `${each.of} shows ${String(each.settings.length)} settings differently from files: ${settingAreas(each.settings, 12)}`);
+    }
+    return lines.join('\n');
+}
 /** Wide enough for a reason's sentence to read in a few lines. */
 const ALERTS_WIDTH = 320;
 /** The most of the alerts a hover shows before it scrolls: a project can have one for every agent. */
@@ -167,9 +204,15 @@ function ProjectProblems({ project, unloaded }) {
         (unheld.length ? 1 : 0) +
         (unregistered.length ? 1 : 0) +
         (unloaded === undefined ? 0 : 1);
+    const { copy, isCopied } = useClipboard();
     if (!count)
         return null;
-    return (_jsx(HoverCard, { label: "What the studio cannot run or shows differently", touchTrigger: "tap", content: _jsx(ScrollableArea, { label: "What the studio cannot run or shows differently", width: ALERTS_WIDTH, style: { maxHeight: ALERTS_MAX_HEIGHT }, children: _jsxs(VStack, { gap: 3, children: [unloaded !== undefined && (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: "The studio cannot load your files." }), _jsx(Text, { type: "supporting", color: "secondary", children: "It runs them as they last loaded, until they load again." }), _jsx(CodeBlock, { code: unloaded.trim(), size: "sm", isWrapped: true, maxHeight: 240 })] })), problems.map((problem) => (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: `The studio cannot run ${problem.profile}.` }), _jsx(Text, { type: "supporting", color: "secondary", children: problem.message })] }, problem.profile))), modelProblems.map((problem) => (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: `As your files set it, ${problem.profile}'s model '${problem.model}' cannot run.` }), _jsx(Text, { type: "supporting", color: "secondary", children: problem.message })] }, `${problem.profile}:${problem.model}`))), unregistered.length > 0 && (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: "Your project did not register everything its files define." }), _jsx(Text, { type: "supporting", color: "secondary", children: `Not loaded, so not shown: ${unregistered.map((each) => each.name).join(', ')}. The studio shows what your project registers when it starts.` })] })), unheld.length > 0 && (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: "The studio cannot check what it shows against your files." }), _jsx(Text, { type: "supporting", color: "secondary", children: `A run and Save still use your files. ${unheld.join(' ')}` })] })), differences.map((difference) => (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: `The studio shows ${difference.of} differently from your files.` }), _jsx(Text, { type: "supporting", color: "secondary", children: `A run and Save still use your files for: ${difference.settings.join(', ')}.` })] }, `${difference.kind}:${difference.of}`)))] }) }), children: _jsx(Token, { label: count === 1 ? '1 alert' : `${String(count)} alerts`, color: "orange" }) }));
+    return (_jsx(HoverCard, { label: "What the studio cannot run or shows differently", touchTrigger: "tap", content: _jsx(ScrollableArea, { label: "What the studio cannot run or shows differently", width: ALERTS_WIDTH, style: { maxHeight: ALERTS_MAX_HEIGHT }, children: _jsxs(VStack, { gap: 3, children: [_jsx(HStack, { hAlign: "end", children: _jsx(IconButton, { label: isCopied ? 'Copied' : 'Copy alerts', variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: isCopied ? IconCheck : IconCopy, size: "sm" }), tooltip: "Copy these alerts to send", onClick: () => {
+                                copy(alertsReport(project, unloaded));
+                            } }) }), unloaded !== undefined && (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: "The studio cannot load your files." }), _jsx(Text, { type: "supporting", color: "secondary", children: "It runs them as they last loaded, until they load again." }), _jsx(CodeBlock, { code: unloaded.trim(), size: "sm", isWrapped: true, maxHeight: 240 })] })), problems.map((problem) => (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: `The studio cannot run ${problem.profile}.` }), _jsx(Text, { type: "supporting", color: "secondary", children: problem.message })] }, problem.profile))), modelProblems.map((problem) => (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: `As your files set it, ${problem.profile}'s model '${problem.model}' cannot run.` }), _jsx(Text, { type: "supporting", color: "secondary", children: problem.message })] }, `${problem.profile}:${problem.model}`))), unregistered.length > 0 && (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: "Your project did not register everything its files define." }), _jsx(Text, { type: "supporting", color: "secondary", children: `${unregistered.length} defined in your files but not registered when the project started, so the studio cannot show them: ${unregistered
+                                    .slice(0, 5)
+                                    .map((each) => each.name)
+                                    .join(', ')}${unregistered.length > 5 ? `, and ${unregistered.length - 5} more` : ''}. A run and Save still use your files. If none of them load, the studio is probably reading a second copy of the Theorem package.` })] })), unheld.length > 0 && (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: "The studio cannot check what it shows against your files." }), _jsx(Text, { type: "supporting", color: "secondary", children: `A run and Save still use your files. ${[...new Set(unheld)].join(' ')}${unregistered.length > 0 ? ' This usually follows from the profiles above not loading.' : ''}` })] })), differences.map((difference) => (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: `The studio shows ${difference.of} differently from your files.` }), _jsx(Text, { type: "supporting", color: "secondary", children: `${difference.settings.length} ${difference.settings.length === 1 ? 'setting differs' : 'settings differ'}: ${settingAreas(difference.settings)}. A run and Save still use your files.` })] }, `${difference.kind}:${difference.of}`)))] }) }), children: _jsx(Token, { label: count === 1 ? '1 alert' : `${String(count)} alerts`, color: "orange" }) }));
 }
 const ProjectSaveContext = createContext(null);
 /** Save for the open project, or null on a page that has none. */

package/ui/studio-screen.d.ts

@@ -2,6 +2,7 @@ import { type FilesMerge, type SharedEntry, type StudioDraft, type StudioRunsOn,
 import { type Dispatch, type SetStateAction } from 'react';
 import { type ProjectFiles, type ProjectSession } from './lib/studio-project.ts';
 import { type RestoredStudio } from './lib/studio-session.ts';
+import type { ProbeResult } from './lib/tool-probe.ts';
 import { type StudioHost, type StudioOpened } from './studio-host.ts';
 /** The workspace's store, kept in this tab's sessionStorage, and the open agent's draft from it. */
 declare function useStudioWorkspace(start: RestoredStudio, project: ProjectSession | undefined): {
@@ -58,10 +59,12 @@ export type StudioWorkspaceState = ReturnType<typeof useStudioWorkspace>;
  * count, over the inspector, with each issue on its row. Nothing on it changes anything: a picture
  * of the studio for a page that is not the studio, such as a home page. It writes no storage and
  * reports nothing. `on` is where the page's studio runs, so the issues are the ones it would show.
+ * `probe`, on a tool, is a connection test already run: the inspector shows it, scrolled to the end.
  */
-export declare function StudioEditorPreview({ workspace, on, }: {
+export declare function StudioEditorPreview({ workspace, on, probe, }: {
     workspace: StudioWorkspace;
     on: StudioRunsOn;
+    probe?: ProbeResult;
 }): import("react").JSX.Element;
 /** The studio, opened on `opened`, with what the page showing it provides. */
 export declare function StudioScreen({ opened, host }: {

package/ui/studio-screen.js

@@ -21,7 +21,7 @@ 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, IconFileImport, IconFileSmile, IconFileZip, IconKey, IconMenu2, IconPlayerPlay, IconPlaylistX, IconPlus, IconRotateClockwise, IconSearch, IconSitemap, IconSparkles, IconTool, IconX, } from '@tabler/icons-react';
+import { IconActivity, IconAdjustmentsHorizontal, IconArrowBarToDown, IconArrowLeft, IconBrowserShare, IconCheck, IconCloud, IconCode, IconCopy, IconCopyPlus, IconFile, IconFileImport, 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";
@@ -33,7 +33,6 @@ import { lazy, memo, Suspense, useCallback, useEffect, useLayoutEffect, useMemo,
 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, 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";
@@ -54,9 +53,10 @@ 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 { AGENT_ICON, PROFILE_TYPE_ICON, toolTypeIcon } from "./lib/type-icons.js";
 import { warmWhenIdle } from "./lib/when-idle.js";
-import { addToolSpec, ProfileEditor } from "./profile-editor.js";
+import { nodeIcon } from "./node-icon.js";
+import { addToolSpec, ProfileEditor, ShownProbe } from "./profile-editor.js";
 import { ProviderEditor } from "./provider-editor.js";
 import { SharedChange } from "./shared-change.js";
 import { ChooseConflictsContext, FileConflicts } from "./studio-conflicts.js";
@@ -78,25 +78,6 @@ const GuardrailTester = lazy(() => testerPanel().then((tester) => ({ default: te
 const traceReplay = () => import("./studio-trace-replay.js");
 const TraceReplay = lazy(() => traceReplay().then((pane) => ({ default: pane.TraceReplay })));
 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) => {
@@ -329,7 +310,7 @@ function WorkspaceListToggle({ workspace, list, onChange, }) {
 }
 /** 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: 'agents', name: 'Agents', icon: AGENT_ICON },
     { value: 'tools', name: 'Tools', icon: IconTool },
     { value: 'providers', name: 'Providers', icon: IconCloud },
 ];
@@ -1527,8 +1508,9 @@ const TreeColumn = memo(function TreeColumn({ tree, draft, onAddAgent, listRef,
  * count, over the inspector, with each issue on its row. Nothing on it changes anything: a picture
  * of the studio for a page that is not the studio, such as a home page. It writes no storage and
  * reports nothing. `on` is where the page's studio runs, so the issues are the ones it would show.
+ * `probe`, on a tool, is a connection test already run: the inspector shows it, scrolled to the end.
  */
-export function StudioEditorPreview({ workspace, on, }) {
+export function StudioEditorPreview({ workspace, on, probe, }) {
     const selected = workspace.selected;
     const at = workspaceNodeRef(workspace, selected);
     const focus = at && 'agent' in at ? at.agent : (workspace.agents[0]?.key ?? '');
@@ -1536,6 +1518,23 @@ export function StudioEditorPreview({ workspace, on, }) {
     const compiled = useMemo(() => compileWorkspace(workspace, on), [workspace, on]);
     const editing = innerNodeId(selected, focus) ?? 'identity';
     const still = () => { };
+    const scroller = useRef(null);
+    // why: A tool's test sits at the foot of its page: the editor stays at its end as the page settles.
+    useLayoutEffect(() => {
+        const node = scroller.current;
+        const content = node?.firstElementChild;
+        if (!probe || !node || !content)
+            return;
+        const toEnd = () => {
+            node.scrollTop = node.scrollHeight;
+        };
+        toEnd();
+        const watch = new ResizeObserver(toEnd);
+        watch.observe(content);
+        return () => {
+            watch.disconnect();
+        };
+    }, [probe]);
     const view = {
         keysOpen: false,
         setKeysOpen: still,
@@ -1546,7 +1545,7 @@ export function StudioEditorPreview({ workspace, on, }) {
         settingsOpen: false,
         open: still,
     };
-    return (_jsxs(VStack, { height: "100%", children: [_jsx(EditorToolbar, { heading: editorTitle(draft, editing), compiled: compiled, selected: selected, view: view, onIssue: still, getCode: null, project: null, setSheet: still }), _jsx(StackItem, { size: "fill", children: _jsx(RunsOn.Provider, { value: on, children: _jsx(ProfileEditor, { draft: draft, setDraft: still, selectedId: editing, onSelect: still, issues: editorIssuesOf(compiled, focus) }) }) })] }));
+    return (_jsxs(VStack, { height: "100%", children: [_jsx(EditorToolbar, { heading: editorTitle(draft, editing), compiled: compiled, selected: selected, view: view, onIssue: still, getCode: null, project: null, setSheet: still }), _jsx(StackItem, { size: "fill", children: _jsx(ScrollableArea, { label: "Editor", height: "100%", ref: scroller, children: _jsx(RunsOn.Provider, { value: on, children: _jsx(ShownProbe.Provider, { value: probe, children: _jsx(ProfileEditor, { draft: draft, setDraft: still, selectedId: editing, onSelect: still, issues: editorIssuesOf(compiled, focus) }) }) }) }) })] }));
 }
 /**
  * The issue count, which goes to the next issue after the selected node and shows it there. Hidden

package/ui/tree-map.css

@@ -0,0 +1,15 @@
+/* The tree map: the lines are one drawing under the tokens (map-token.css), as on the map. It has no
+   background of its own: it sits on whatever holds it. */
+.studio-tree-map {
+  position: relative;
+}
+
+.studio-tree-map-lines {
+  position: absolute;
+  inset: 0 auto auto 0;
+  pointer-events: none;
+}
+
+.studio-tree-map-lines .map-line {
+  stroke: color-mix(in srgb, var(--color-border-emphasized) 60%, var(--color-background-surface));
+}

package/ui/tree-map.d.ts

@@ -0,0 +1,7 @@
+import { type StudioWorkspace } from '../mod.ts';
+export interface StudioTreeMapProps {
+    workspace: StudioWorkspace;
+    /** The keys of the agents to draw, in the workspace's order; every agent when unset. */
+    agents?: readonly string[] | undefined;
+}
+export declare function StudioTreeMap({ workspace, agents }: StudioTreeMapProps): import("react").JSX.Element;

package/ui/tree-map.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconCloud, IconEngine, IconSettingsAutomation, IconTool } from '@tabler/icons-react';
+import { useRef } from 'react';
+import { mapCurve } from "../map-line.js";
+import { createBlankDraft, libraryDraft, workspaceTree, } from "../mod.js";
+import { toolTypeIcon } from "./lib/type-icons.js";
+import { MapToken, useTokenWidths } from "./map-token.js";
+import { nodeIcon } from "./node-icon.js";
+import './tree-map.css';
+/** A row's height, and how far in each level of the tree starts. */
+const ROW = 32;
+const INDENT = 28;
+/** Where under a token its children's line runs: the middle of its icon. */
+const TRUNK = 13;
+/** A token's half height, and the radius of the line's turn. */
+const HALF = 11;
+const TURN = 8;
+const PAD = 16;
+/** Between the tree's widest row and the feeds, and between a token's side and its line. */
+const GAP = 72;
+const LINE_GAP = 4;
+/** How far right of the widest feed a line coming round them runs. */
+const RAIL = 20;
+/** How many of the registry's tools sit under it: one of each type first. */
+const SHOWN_TOOLS = 4;
+const TOOL_TYPES = ['function', 'http', 'mcp', 'agent'];
+/** A token's width until it is measured. */
+const GUESS = 120;
+function rowsOf(workspace, only) {
+    const rows = [];
+    const walk = (node, agent, depth, parent) => {
+        const row = {
+            node,
+            agent,
+            x: PAD + depth * INDENT,
+            y: PAD + HALF + rows.length * ROW,
+            ...(parent ? { parent: { x: parent.x, y: parent.y } } : {}),
+        };
+        rows.push(row);
+        for (const child of node.children)
+            walk(child, agent, depth + 1, row);
+    };
+    workspaceTree(workspace).agents.forEach((root, index) => {
+        const key = workspace.agents[index]?.key ?? '';
+        if (only === undefined || only.includes(key))
+            walk(root, key, 0);
+    });
+    return rows;
+}
+/** A row's token id: the tree's ids repeat from one agent to the next. */
+function rowId(row) {
+    return `${row.agent}/${row.node.id}`;
+}
+/**
+ * Each agent's runner (`runTurn`, or `runDecision` for a decision), beside its name; its providers, beside its models; and the
+ * workspace's tool registry, beside its Tools row, with the tool runner under it. A feed sits level
+ * with the middle of the rows it joins, or under the feed before it when that is lower.
+ */
+const REGISTRY = 'tool-registry';
+/**
+ * What runs a profile of this type: `runDecision`, `runSession`, `runEmbedding`, else `runTurn`. A
+ * host has none of its own: the tool runner runs its calls.
+ */
+function runnerLabel(type) {
+    if (type === 'host')
+        return undefined;
+    if (type === 'decision')
+        return 'Decision runner';
+    if (type === 'live')
+        return 'Session runner';
+    if (type === 'embedding')
+        return 'Embedding runner';
+    return 'Turn runner';
+}
+function feedsOf(workspace, rows) {
+    const feeds = [];
+    const add = (id, label, icon, into, under, depth = 0) => {
+        const below = (feeds.at(-1)?.y ?? Number.NEGATIVE_INFINITY) + ROW;
+        const middle = into.length ? into.reduce((sum, row) => sum + row.y, 0) / into.length : below;
+        feeds.push({
+            id,
+            label,
+            icon,
+            y: Math.max(middle, below),
+            into: into.map(rowId),
+            ...(under ? { under } : {}),
+            depth,
+        });
+    };
+    for (const agent of workspace.agents) {
+        const mine = rows.filter((row) => row.agent === agent.key);
+        const name = mine.find((row) => row.node.ref.facet === 'identity');
+        if (!name)
+            continue;
+        const runner = runnerLabel(agent.identity.profileType);
+        if (runner)
+            add(`${agent.key}/runner`, runner, IconEngine, [name]);
+        const providers = new Map();
+        for (const binding of agent.modelBindings) {
+            const row = mine.find((each) => each.node.ref.facet === 'modelBinding' && each.node.ref.key === binding.key);
+            if (row)
+                providers.set(binding.provider, [...(providers.get(binding.provider) ?? []), row]);
+        }
+        for (const [provider, into] of providers) {
+            add(`${agent.key}/provider:${provider}`, provider, IconCloud, into);
+        }
+        // The workspace's tools are one registry that each agent's tool policy picks from: drawn once,
+        // beside the first Tools row, with a line into every other.
+        const tools = mine.find((row) => row.node.ref.facet === 'tools');
+        const drawn = feeds.find((feed) => feed.id === REGISTRY);
+        if (tools && drawn)
+            drawn.into.push(rowId(tools));
+        else if (tools && workspace.toolSpecs.length > 0) {
+            const registry = REGISTRY;
+            add(registry, 'Tool registry', IconTool, [tools]);
+            for (const tool of shownTools(workspace.toolSpecs)) {
+                const icon = toolTypeIcon(tool.toolType);
+                add(`${registry}/${tool.key}`, tool.toolName, icon, [], registry, 1);
+            }
+            add('tool-runner', 'Tool runner', IconSettingsAutomation, [], registry);
+        }
+    }
+    return feeds;
+}
+/** A few of the registry's tools: the first of each type, then the next ones, in the registry's order. */
+function shownTools(tools) {
+    const firsts = TOOL_TYPES.flatMap((type) => {
+        const tool = tools.find((each) => each.toolType === type);
+        return tool ? [tool] : [];
+    });
+    const rest = tools.filter((tool) => !firsts.includes(tool));
+    return [...firsts, ...rest].slice(0, SHOWN_TOOLS);
+}
+/** Right from `from` to `rail`, up or down it, and back left to `to`, its corners turned. */
+function sidePath(from, to, rail) {
+    const up = Math.sign(to.y - from.y);
+    return (`M ${from.x} ${from.y} H ${rail - TURN} Q ${rail} ${from.y} ${rail} ${from.y + up * TURN}` +
+        ` V ${to.y - up * TURN} Q ${rail} ${to.y} ${rail - TURN} ${to.y} H ${to.x}`);
+}
+/** Down from under the parent's icon, then a turn across to the child. */
+function linePath(from, to) {
+    const x = from.x + TRUNK;
+    return `M ${x} ${from.y + HALF} V ${to.y - TURN} Q ${x} ${to.y} ${x + TURN} ${to.y} H ${to.x - LINE_GAP}`;
+}
+export function StudioTreeMap({ workspace, agents }) {
+    const root = useRef(null);
+    const rows = rowsOf(workspace, agents);
+    const feeds = feedsOf(workspace, rows);
+    const widths = useTokenWidths(root, workspace);
+    const drafts = new Map(workspace.agents.map((agent) => [
+        agent.key,
+        libraryDraft(workspace, agent.key) ?? createBlankDraft(),
+    ]));
+    const right = (row) => row.x + (widths[rowId(row)] ?? GUESS);
+    const feedX = Math.max(0, ...rows.map(right)) + GAP;
+    const byId = new Map(rows.map((row) => [rowId(row), row]));
+    const feedById = new Map(feeds.map((feed) => [feed.id, feed]));
+    const height = PAD * 2 + Math.max(rows.length * ROW, ...feeds.map((feed) => feed.y + HALF - PAD));
+    const feedLeft = (feed) => feedX + feed.depth * INDENT;
+    const feedRight = (feed) => feedLeft(feed) + (widths[feed.id] ?? GUESS);
+    /** Right of every feed from `above` down to `feed`. */
+    const railFor = (feed, above) => Math.max(...feeds.filter((each) => each.y >= above.y && each.y <= feed.y).map(feedRight)) +
+        RAIL;
+    const rails = feeds.flatMap((feed) => {
+        const above = feed.under === undefined ? undefined : feedById.get(feed.under);
+        return above && feed.depth <= above.depth ? [railFor(feed, above)] : [];
+    });
+    const width = Math.max(GUESS, ...feeds.map(feedRight), ...rails) + PAD;
+    return (_jsxs("div", { ref: root, className: "studio-tree-map", style: { width, height }, children: [_jsxs("svg", { className: "studio-tree-map-lines", width: width, height: height, "aria-hidden": "true", children: [rows.map((row) => row.parent && (_jsx("path", { className: "map-line", d: linePath(row.parent, row) }, rowId(row)))), feeds.flatMap((feed) => feed.into.map((id) => {
+                        const row = byId.get(id);
+                        if (!row)
+                            return null;
+                        const { d } = mapCurve({ x: feedX - LINE_GAP, y: feed.y }, { x: right(row) + LINE_GAP, y: row.y });
+                        return _jsx("path", { className: "map-line", d: d }, `${feed.id}>${id}`);
+                    })), feeds.map((feed) => {
+                        const above = feed.under === undefined ? undefined : feedById.get(feed.under);
+                        if (above === undefined)
+                            return null;
+                        const from = { x: feedLeft(above), y: above.y };
+                        // One of its own turns in from the trunk, as a tree row does; one level with it comes round
+                        // the right of what lies between, so it reads as joining the feed, not as one of its own.
+                        const d = feed.depth > above.depth
+                            ? linePath(from, { x: feedLeft(feed), y: feed.y })
+                            : sidePath({ x: feedRight(feed) + LINE_GAP, y: feed.y }, { x: feedRight(above) + LINE_GAP, y: above.y }, railFor(feed, above));
+                        return _jsx("path", { className: "map-line", d: d }, `${feed.id}^`);
+                    })] }), rows.map((row) => {
+                const draft = drafts.get(row.agent) ?? createBlankDraft();
+                return (_jsx(MapToken, { id: rowId(row), label: row.node.label, icon: nodeIcon(draft, row.node.ref), x: row.x, y: row.y }, rowId(row)));
+            }), feeds.map((feed) => (_jsx(MapToken, { id: feed.id, label: feed.label, icon: feed.icon, x: feedLeft(feed), y: feed.y }, feed.id)))] }));
+}