@theoremjs/studio 0.3.4-next.456.gff60088 → 0.3.4-next.460.g4444a29

package/ui/tree-map.css

@@ -13,3 +13,85 @@
 .studio-tree-map-lines .map-line {
   stroke: color-mix(in srgb, var(--color-border-emphasized) 60%, var(--color-background-surface));
 }
+
+/*
+ * Detail adds nodes. What is drawn moves to make room first, then each added node draws in after
+ * the one before, as the loader's map draws (read-map.css): its line, then its token. Without
+ * detail, the added ones leave in the reverse order, then the rest moves back.
+ * invariant: Transitions, not keyframes, so both ways ease, and a turn mid-way goes back from
+ * where it is. An added node only ever jumps to its place while it is not drawn.
+ */
+.studio-tree-map {
+  --added-step: 40ms;
+  --added-draw: var(--duration-medium, 240ms);
+  --map-move: var(--duration-slow, 400ms);
+  /* How long the added nodes take to leave, before the rest moves back. */
+  --map-leave: calc(var(--added-n) * var(--added-step) + 2 * var(--added-draw));
+  --map-ease: var(--ease-standard, ease-out);
+}
+
+.studio-tree-map > [data-added] {
+  opacity: 0;
+}
+
+.studio-tree-map-lines [data-added] {
+  stroke-dasharray: 1;
+  stroke-dashoffset: var(--added-from);
+}
+
+.studio-tree-map[data-detail] > [data-added] {
+  opacity: 1;
+}
+
+.studio-tree-map[data-detail] .studio-tree-map-lines [data-added] {
+  stroke-dashoffset: 0;
+}
+
+/* invariant: With reduced motion, nothing moves: each node is at once where it ends. */
+@media (prefers-reduced-motion: no-preference) {
+  .studio-tree-map > .map-token,
+  .studio-tree-map-lines .map-line {
+    transition:
+      top var(--map-move) var(--map-ease) var(--map-leave),
+      left var(--map-move) var(--map-ease) var(--map-leave),
+      d var(--map-move) var(--map-ease) var(--map-leave);
+  }
+
+  .studio-tree-map > [data-added] {
+    transition:
+      opacity var(--added-draw) var(--map-ease)
+      calc((var(--added-n) - var(--added-i)) * var(--added-step)),
+      top 0s var(--map-leave),
+      left 0s var(--map-leave);
+  }
+
+  .studio-tree-map-lines [data-added] {
+    transition:
+      stroke-dashoffset var(--added-draw) var(--map-ease)
+      calc((var(--added-n) - var(--added-i)) * var(--added-step) + var(--added-draw)),
+      d 0s var(--map-leave);
+  }
+
+  .studio-tree-map[data-detail] > .map-token {
+    transition-delay: 0s;
+  }
+
+  .studio-tree-map[data-detail] > [data-added] {
+    transition:
+      opacity var(--added-draw) var(--map-ease)
+      calc(var(--map-move) + var(--added-i) * var(--added-step) + var(--added-draw)),
+      top 0s,
+      left 0s;
+  }
+
+  .studio-tree-map[data-detail] .studio-tree-map-lines .map-line {
+    transition-delay: 0s;
+  }
+
+  .studio-tree-map[data-detail] .studio-tree-map-lines [data-added] {
+    transition:
+      stroke-dashoffset var(--added-draw) var(--map-ease)
+      calc(var(--map-move) + var(--added-i) * var(--added-step)),
+      d 0s;
+  }
+}

package/ui/tree-map.d.ts

@@ -3,5 +3,11 @@ 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;
+    /**
+     * Every tool in the registry, not a few, and each turn runner opened into the steps of a turn. Turned on, what is drawn moves to make room, then each
+     * node it adds draws in after the one before, its line first, as the loader's map draws; turned
+     * off, they leave in the reverse order and the rest moves back.
+     */
+    detail?: boolean | undefined;
 }
-export declare function StudioTreeMap({ workspace, agents }: StudioTreeMapProps): import("react").JSX.Element;
+export declare function StudioTreeMap({ workspace, agents, detail }: StudioTreeMapProps): import("react").JSX.Element;

package/ui/tree-map.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconCloud, IconEngine, IconSettingsAutomation, IconTool } from '@tabler/icons-react';
+import { IconAdjustments, IconArrowsMinimize, IconChecks, IconCloud, IconEngine, IconFlag, IconKey, IconRepeat, IconSettingsAutomation, IconShieldCheck, IconTimeline, IconTool, } from '@tabler/icons-react';
 import { useRef } from 'react';
 import { mapCurve } from "../map-line.js";
 import { createBlankDraft, libraryDraft, workspaceTree, } from "../mod.js";
@@ -72,7 +72,26 @@ function runnerLabel(type) {
         return 'Embedding runner';
     return 'Turn runner';
 }
-function feedsOf(workspace, rows) {
+/**
+ * What a turn runner does in one turn, in order.
+ * why: The kernel contract's turn lifecycle (docs/contracts/kernel.md, "Turn lifecycle"), step for
+ * step; a decision and a session have no such list there, so their runners open into nothing.
+ */
+const TURN_STEPS = [
+    { id: 'resolve', label: 'Resolve', icon: IconAdjustments },
+    { id: 'sanitize', label: 'Sanitize', icon: IconShieldCheck },
+    { id: 'compaction', label: 'Compaction', icon: IconArrowsMinimize },
+    { id: 'canary', label: 'Canary bind', icon: IconKey },
+    { id: 'pre_turn', label: 'pre_turn', icon: IconFlag },
+    { id: 'stream', label: 'Provider stream', icon: IconCloud },
+    { id: 'tools', label: 'Tool loop', icon: IconRepeat },
+    { id: 'before_end', label: 'before_end', icon: IconFlag },
+    { id: 'validation', label: 'Validation', icon: IconChecks },
+    { id: 'egress', label: 'Egress', icon: IconShieldCheck },
+    { id: 'trace', label: 'Trace', icon: IconTimeline },
+    { id: 'post_turn', label: 'post_turn', icon: IconFlag },
+];
+function feedsOf(workspace, rows, detail) {
     const feeds = [];
     const add = (id, label, icon, into, under, depth = 0) => {
         const below = (feeds.at(-1)?.y ?? Number.NEGATIVE_INFINITY) + ROW;
@@ -93,8 +112,13 @@ function feedsOf(workspace, rows) {
         if (!name)
             continue;
         const runner = runnerLabel(agent.identity.profileType);
-        if (runner)
-            add(`${agent.key}/runner`, runner, IconEngine, [name]);
+        if (runner) {
+            const id = `${agent.key}/runner`;
+            add(id, runner, IconEngine, [name]);
+            const steps = detail && runner === 'Turn runner' ? TURN_STEPS : [];
+            for (const step of steps)
+                add(`${id}/${step.id}`, step.label, step.icon, [], id, 1);
+        }
         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);
@@ -113,7 +137,7 @@ function feedsOf(workspace, rows) {
         else if (tools && workspace.toolSpecs.length > 0) {
             const registry = REGISTRY;
             add(registry, 'Tool registry', IconTool, [tools]);
-            for (const tool of shownTools(workspace.toolSpecs)) {
+            for (const tool of listedTools(workspace.toolSpecs, detail)) {
                 const icon = toolTypeIcon(tool.toolType);
                 add(`${registry}/${tool.key}`, tool.toolName, icon, [], registry, 1);
             }
@@ -122,14 +146,18 @@ function feedsOf(workspace, rows) {
     }
     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) {
+/**
+ * The registry's tools: the first of each type, then the rest in the registry's order. A few of
+ * them, or with `detail` every one.
+ */
+function listedTools(tools, detail) {
     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);
+    const listed = [...firsts, ...rest];
+    return detail ? listed : listed.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) {
@@ -142,10 +170,22 @@ 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 }) {
+/** The order an added node draws in, and which end its line starts from: 1 the path's start, -1 its end. */
+const addedStyle = (index, from = 1) => ({ '--added-i': index, '--added-from': from });
+/**
+ * A line's path as a style too, so a line that moves eases to its new shape where the browser
+ * eases `d`; the attribute draws it where it does not.
+ */
+const pathStyle = (d, style) => ({ ...style, d: `path("${d}")` });
+export function StudioTreeMap({ workspace, agents, detail = false }) {
     const root = useRef(null);
     const rows = rowsOf(workspace, agents);
-    const feeds = feedsOf(workspace, rows);
+    const few = feedsOf(workspace, rows, false);
+    const full = feedsOf(workspace, rows, true);
+    const fewIds = new Set(few.map((feed) => feed.id));
+    const addedIndex = new Map(full.filter((feed) => !fewIds.has(feed.id)).map((feed, index) => [feed.id, index]));
+    /** The feeds laid out; without detail, an added one waits on the feed it comes under. */
+    const feeds = detail ? full : few;
     const widths = useTokenWidths(root, workspace);
     const drafts = new Map(workspace.agents.map((agent) => [
         agent.key,
@@ -155,6 +195,7 @@ export function StudioTreeMap({ workspace, agents }) {
     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 placed = (feed) => feedById.get(feed.id) ?? { ...feed, y: feedById.get(feed.under ?? '')?.y ?? feed.y };
     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);
@@ -166,25 +207,42 @@ export function StudioTreeMap({ workspace, agents }) {
         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) => {
+    /** What marks a node or line detail adds: its turn to draw, and the end its line draws from. */
+    const addedProps = (id, from = 1) => {
+        const index = addedIndex.get(id);
+        return index === undefined ? {} : { 'data-added': '', style: addedStyle(index, from) };
+    };
+    return (_jsxs("div", { ref: root, className: "studio-tree-map", "data-detail": detail ? '' : undefined, style: { width, height, '--added-n': addedIndex.size }, 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), style: pathStyle(linePath(row.parent, row)) }, rowId(row)))), full.flatMap((each) => {
+                        const feed = placed(each);
+                        return 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 });
+                            // The line runs from the feed to the row; it draws from the row.
+                            const { style, ...added } = addedProps(feed.id, -1);
+                            return (_jsx("path", { className: "map-line", d: d, pathLength: 1, style: pathStyle(d, style), ...added }, `${feed.id}>${id}`));
+                        });
+                    }), full.map((each) => {
+                        const feed = placed(each);
                         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
+                        const isOwn = feed.depth > above.depth;
+                        const d = isOwn
                             ? 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}^`);
+                        // A turn in runs from the feed above; a line round the side runs from this one.
+                        const { style, ...added } = addedProps(feed.id, isOwn ? 1 : -1);
+                        return (_jsx("path", { className: "map-line", d: d, pathLength: 1, style: pathStyle(d, style), ...added }, `${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)))] }));
+            }), full.map((each) => {
+                const feed = placed(each);
+                return (_jsx(MapToken, { id: feed.id, label: feed.label, icon: feed.icon, x: feedLeft(feed), y: feed.y, ...addedProps(feed.id) }, feed.id));
+            })] }));
 }