@theoremjs/studio 0.3.4-next.458.gbf7b487 → 0.3.4-next.464.g5fc5eed

package/ui/tree-map.css

@@ -13,46 +13,3 @@
 .studio-tree-map-lines .map-line {
   stroke: color-mix(in srgb, var(--color-border-emphasized) 60%, var(--color-background-surface));
 }
-
-/*
- * Feeds draw in as the loader's map draws (read-map.css), one after another: the line from the
- * tree, then the token at its end. Hidden, they leave in the reverse order.
- * invariant: Transitions, not keyframes, so drawing and leaving both ease, and a turn mid-draw
- * goes back from where it is.
- */
-.studio-tree-map {
-  --feed-step: 70ms;
-}
-
-.studio-tree-map-lines [data-feed] {
-  stroke-dasharray: 1;
-  stroke-dashoffset: 0;
-  transition: stroke-dashoffset var(--duration-medium, 240ms) var(--ease-standard, ease-out)
-    calc(var(--feed-i) * var(--feed-step));
-}
-
-.studio-tree-map > [data-feed] {
-  transition: opacity var(--duration-medium, 240ms) var(--ease-standard, ease-out)
-    calc(var(--feed-i) * var(--feed-step) + var(--duration-medium, 240ms));
-}
-
-.studio-tree-map[data-feeds="hidden"] > [data-feed] {
-  opacity: 0;
-  transition-delay: calc((var(--feed-n) - var(--feed-i)) * var(--feed-step));
-}
-
-.studio-tree-map[data-feeds="hidden"] .studio-tree-map-lines [data-feed] {
-  stroke-dashoffset: var(--feed-from);
-  transition-delay: calc(
-    (var(--feed-n) - var(--feed-i)) *
-    var(--feed-step) +
-    var(--duration-medium, 240ms)
-  );
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .studio-tree-map-lines [data-feed],
-  .studio-tree-map > [data-feed] {
-    transition: none;
-  }
-}

package/ui/tree-map.d.ts

@@ -4,10 +4,12 @@ export interface StudioTreeMapProps {
     /** The keys of the agents to draw, in the workspace's order; every agent when unset. */
     agents?: readonly string[] | undefined;
     /**
-     * Whether what feeds the tree is drawn beside it. Turned on, each feed draws in after the one
-     * before, its line from the tree first, as the loader's map draws; turned off, they leave in the
-     * reverse order. Shown when unset.
+     * How far the tree has grown, from 0 to 1. As it grows each section drifts to its own zone: the
+     * providers to a band along the top, each agent's tree apart from the next with its runner level
+     * with it, and the tool registry to a field of its own. What growing adds draws in on the way,
+     * each over its own stretch, its line and then its token: the steps of a turn under each turn
+     * runner, and every tool in the registry. Shrinking takes it all back the same way.
      */
-    feeds?: 'shown' | 'hidden' | undefined;
+    grow?: number | undefined;
 }
-export declare function StudioTreeMap({ workspace, agents, feeds: shown }: StudioTreeMapProps): import("react").JSX.Element;
+export declare function StudioTreeMap({ workspace, agents, grow }: 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";
@@ -34,7 +34,7 @@ function rowsOf(workspace, only) {
             agent,
             x: PAD + depth * INDENT,
             y: PAD + HALF + rows.length * ROW,
-            ...(parent ? { parent: { x: parent.x, y: parent.y } } : {}),
+            ...(parent ? { parent: rowId(parent) } : {}),
         };
         rows.push(row);
         for (const child of node.children)
@@ -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,54 +170,205 @@ 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}`;
 }
-/** The order a feed draws in, and which end its line starts from: 1 the path's start, -1 its end. */
-const feedStyle = (index, from = 1) => ({ '--feed-i': index, '--feed-from': from });
-export function StudioTreeMap({ workspace, agents, feeds: shown = 'shown' }) {
+/**
+ * From under the parent's icon to a child in any column of the rows under it: across just under
+ * the parent to the child's own trunk, a level in from the child, then down it and across. A child
+ * one level in has its trunk under the parent's icon, so it is the tree's line.
+ */
+function underPath(from, to) {
+    const trunk = to.x - INDENT + TRUNK;
+    const across = from.y + HALF + LINE_GAP;
+    return (`M ${from.x + TRUNK} ${from.y + HALF} V ${across} H ${trunk} V ${to.y - TURN}` +
+        ` Q ${trunk} ${to.y} ${trunk + TURN} ${to.y} H ${to.x - LINE_GAP}`);
+}
+/** Grown, a row's height and the room between two agents' trees. */
+const GROWN_ROW = 28;
+const AGENT_GAP = 16;
+/** Grown, the providers' band and the room under it. */
+const BAND = GROWN_ROW + AGENT_GAP;
+/** Grown, a turn's steps in rows under its runner, so many to a row. */
+const STEPS_ACROSS = 3;
+const STEP_SLOT = 160;
+/** Grown, the registry's field: right of the turn's steps, its tools in columns this tall. */
+const REGISTRY_IN = 186;
+const TOOLS_DOWN = 16;
+const TOOL_SLOT = 210;
+/** Over what stretch of growing the added nodes draw, and how long each takes of it. */
+const DRAW_FROM = 0.2;
+const DRAW_TO = 0.95;
+const DRAW_SPAN = 0.1;
+const clamp = (value) => Math.min(Math.max(value, 0), 1);
+const between = (from, to, at) => from + (to - from) * at;
+/** Every other one from each list, while both last: the turn's steps and the tools draw by turns. */
+function byTurns(first, second) {
+    return Array.from({ length: Math.max(first.length, second.length) }, (_, index) => [first[index], second[index]].filter((each) => each !== undefined)).flat();
+}
+/** The rows grown: restacked, each agent apart from the next, under the providers' band. */
+function grownRows(rows) {
+    const places = new Map();
+    let agents = -1;
+    rows.forEach((row, index) => {
+        if (index === 0 || rows[index - 1]?.agent !== row.agent)
+            agents += 1;
+        places.set(rowId(row), {
+            x: row.x,
+            y: PAD + HALF + BAND + index * GROWN_ROW + agents * AGENT_GAP,
+        });
+    });
+    return places;
+}
+/** The next place under a holder, counting it. */
+function nextUnder(growing, holder) {
+    const index = growing.under.get(holder) ?? 0;
+    growing.under.set(holder, index + 1);
+    return index;
+}
+/** A provider's place in the band, by name: an agent that has one too shares it. */
+function bandPlace(growing, feed) {
+    const held = growing.band.get(feed.label);
+    if (held)
+        return held;
+    const place = { x: growing.bandX, y: PAD + HALF };
+    growing.band.set(feed.label, place);
+    growing.bandX += growing.width(feed.id) + AGENT_GAP;
+    return place;
+}
+/** Under the registry: its tools in columns, then the tool runner below them. */
+function registryPlace(growing, feed, above) {
+    if (feed.depth === 0) {
+        const tools = Math.min(growing.under.get(REGISTRY) ?? 0, TOOLS_DOWN);
+        return { x: above.x, y: above.y + (tools + 1) * GROWN_ROW };
+    }
+    const index = nextUnder(growing, REGISTRY);
+    return {
+        x: above.x + INDENT + Math.floor(index / TOOLS_DOWN) * TOOL_SLOT,
+        y: above.y + ((index % TOOLS_DOWN) + 1) * GROWN_ROW,
+    };
+}
+/** A step under its runner, in rows so many across. */
+function stepPlace(growing, holder, above) {
+    const index = nextUnder(growing, holder);
+    const y = above.y + (Math.floor(index / STEPS_ACROSS) + 1) * GROWN_ROW;
+    growing.stepsEnd = Math.max(growing.stepsEnd, y);
+    return { x: above.x + INDENT + (index % STEPS_ACROSS) * STEP_SLOT, y };
+}
+function feedPlace(growing, feed) {
+    if (feed.id.includes('/provider:'))
+        return bandPlace(growing, feed);
+    if (feed.id === REGISTRY) {
+        return { x: growing.feedX + REGISTRY_IN, y: growing.stepsEnd + GROWN_ROW * 1.5 };
+    }
+    const above = feed.under === undefined ? undefined : growing.places.get(feed.under);
+    if (feed.under === REGISTRY && above)
+        return registryPlace(growing, feed, above);
+    if (feed.under !== undefined && above)
+        return stepPlace(growing, feed.under, above);
+    const into = growing.places.get(feed.into[0] ?? '');
+    return { x: growing.feedX, y: into?.y ?? feed.y };
+}
+/** Each node's place grown: by its token id, rows and feeds alike. */
+function grownPlaces(rows, feeds, feedX, width) {
+    const growing = {
+        places: grownRows(rows),
+        band: new Map(),
+        bandX: feedX,
+        under: new Map(),
+        stepsEnd: PAD + HALF + BAND,
+        feedX,
+        width,
+    };
+    for (const feed of feeds)
+        growing.places.set(feed.id, feedPlace(growing, feed));
+    return growing.places;
+}
+export function StudioTreeMap({ workspace, agents, grow = 0 }) {
     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 widths = useTokenWidths(root, workspace);
+    const width = (id) => widths[id] ?? GUESS;
     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 feedX = Math.max(0, ...rows.map((row) => row.x + width(rowId(row)))) + GAP;
+    // The tree as it stands: the rows, and the few feeds beside them.
+    const closed = new Map(rows.map((row) => [rowId(row), row]));
+    for (const feed of few)
+        closed.set(feed.id, { x: feedX + feed.depth * INDENT, y: feed.y });
+    const grown = grownPlaces(rows, full, feedX, width);
+    const feedById = new Map(full.map((feed) => [feed.id, feed]));
+    /**
+     * Where a node is, this far grown. One growing adds keeps its place in its zone and rides with
+     * the feed it comes under, so a zone drifts whole.
+     */
+    const at = (id) => {
+        const to = grown.get(id) ?? closed.get(id) ?? { x: 0, y: 0 };
+        const from = closed.get(id);
+        if (from)
+            return { x: between(from.x, to.x, grow), y: between(from.y, to.y, grow) };
+        const under = feedById.get(id)?.under;
+        const holder = under === undefined ? undefined : grown.get(under);
+        if (under === undefined || holder === undefined)
+            return to;
+        const now = at(under);
+        return { x: to.x + now.x - holder.x, y: to.y + now.y - holder.y };
+    };
+    // What growing adds draws in order, the turn's steps and the tools by turns.
+    const fewIds = new Set(few.map((feed) => feed.id));
+    const added = full.filter((feed) => !fewIds.has(feed.id));
+    const order = byTurns(added.filter((feed) => feed.under !== REGISTRY), added.filter((feed) => feed.under === REGISTRY));
+    /** How far an added node has drawn, 0 to 1: its line in the first half, its token in the second. */
+    const drawn = new Map(order.map((feed, index) => {
+        const start = DRAW_FROM + ((DRAW_TO - DRAW_SPAN - DRAW_FROM) * index) / Math.max(order.length - 1, 1);
+        return [feed.id, clamp((grow - start) / DRAW_SPAN)];
+    }));
+    const lineDrawn = (id) => {
+        const part = drawn.get(id);
+        return part === undefined
+            ? {}
+            : { pathLength: 1, style: { strokeDasharray: 1, strokeDashoffset: 1 - clamp(part * 2) } };
+    };
+    const shown = full.filter((feed) => (drawn.get(feed.id) ?? 1) > 0);
+    const right = (id) => at(id).x + width(id);
+    /** Right of every feed from `above` down to `feed`, where each stands now. */
+    const railFor = (feed, above) => {
+        const [top, bottom] = [at(above.id).y, at(feed.id).y].sort((a, b) => a - b);
+        const lying = shown.filter((each) => {
+            const { y } = at(each.id);
+            return y >= (top ?? 0) && y <= (bottom ?? 0) && each.id !== feed.id;
+        });
+        return Math.max(right(feed.id), ...lying.map((each) => right(each.id))) + RAIL;
+    };
+    const places = [...rows.map(rowId), ...shown.map((feed) => feed.id)];
+    const rails = shown.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;
-    const order = new Map(feeds.map((feed, index) => [feed.id, index]));
-    return (_jsxs("div", { ref: root, className: "studio-tree-map", "data-feeds": shown, style: { width, height, '--feed-n': feeds.length }, 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 });
-                        // The line runs from the feed to the row; it draws from the row.
-                        return (_jsx("path", { className: "map-line", d: d, pathLength: 1, "data-feed": "", style: feedStyle(order.get(feed.id) ?? 0, -1) }, `${feed.id}>${id}`));
-                    })), feeds.map((feed) => {
+    const mapWidth = Math.max(GUESS, ...places.map(right), ...rails) + PAD;
+    const height = Math.max(...places.map((id) => at(id).y)) + HALF + PAD;
+    return (_jsxs("div", { ref: root, className: "studio-tree-map", style: { width: mapWidth, height }, children: [_jsxs("svg", { className: "studio-tree-map-lines", width: mapWidth, height: height, "aria-hidden": "true", children: [rows.map((row) => row.parent && (_jsx("path", { className: "map-line", d: linePath(at(row.parent), at(rowId(row))) }, rowId(row)))), shown.flatMap((feed) => feed.into.map((id) => {
+                        const from = at(feed.id);
+                        const { d } = mapCurve({ x: from.x - LINE_GAP, y: from.y }, { x: right(id) + LINE_GAP, y: at(id).y });
+                        return _jsx("path", { className: "map-line", d: d }, `${feed.id}>${id}`);
+                    })), shown.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
+                        // One of its own comes down from it, 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));
-                        // A turn in runs from the feed above; a line round the side runs from this one.
-                        return (_jsx("path", { className: "map-line", d: d, pathLength: 1, "data-feed": "", style: feedStyle(order.get(feed.id) ?? 0, feed.depth > above.depth ? 1 : -1) }, `${feed.id}^`));
+                            ? underPath(at(above.id), at(feed.id))
+                            : sidePath({ x: right(feed.id) + LINE_GAP, y: at(feed.id).y }, { x: right(above.id) + LINE_GAP, y: at(above.id).y }, railFor(feed, above));
+                        return _jsx("path", { className: "map-line", d: d, ...lineDrawn(feed.id) }, `${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, "data-feed": "", style: feedStyle(order.get(feed.id) ?? 0) }, feed.id)))] }));
+                const { x, y } = at(rowId(row));
+                return (_jsx(MapToken, { id: rowId(row), label: row.node.label, icon: nodeIcon(draft, row.node.ref), x: x, y: y }, rowId(row)));
+            }), shown.map((feed) => {
+                const { x, y } = at(feed.id);
+                const part = drawn.get(feed.id);
+                return (_jsx(MapToken, { id: feed.id, label: feed.label, icon: feed.icon, x: x, y: y, ...(part === undefined ? {} : { style: { opacity: clamp(part * 2 - 1) } }) }, feed.id));
+            })] }));
 }