@theoremjs/studio 0.3.4-next.433.gf6b4da5 → 0.3.4-next.452.gb2a8e30

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)))] }));
+}