@theoremjs/studio 0.3.4-next.482.g7e608f2 → 0.3.4-next.508.geda6db0

package/ui/tree-map.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconAdjustments, IconArrowsMinimize, IconChecks, IconCloud, IconEngine, IconKey, IconLock, IconPlugConnected, IconRepeat, IconSettingsAutomation, IconShieldCheck, IconStack2, IconTimeline, IconWorldCheck, } from '@tabler/icons-react';
-import { useMemo, useRef, useState } from 'react';
-import { mapCurve } from "../map-line.js";
+import { Text } from '@astryxdesign/core/Text';
+import { IconArrowsMinimize, IconCloud, IconCpu, IconDatabase, IconKey, IconLock, IconPlugConnected, IconRepeat, IconRotateClockwise, IconSettingsAutomation, IconShieldCheck, IconStack2, IconTimeline, IconVault, IconWorldCheck, } from '@tabler/icons-react';
+import { useMemo, useRef, useState, } from 'react';
+import { mapBracket, mapPolyline, mapRoute } from "../map-line.js";
 import { createBlankDraft, libraryDraft } from "../mod.js";
-import { drawnAt, HALF, INDENT, PAD, placeAt, rowId, treeMapLayout, } from "./lib/tree-map-layout.js";
+import { modelFamilyMark } from "./brand-icons.js";
+import { atRest, beside, drawnAt, goneAt, HALF, INDENT, lineAt, lineKey, PAD, placeAt, rowId, settledAt, settling, treeMapLayout, underKey, } from "./lib/tree-map-layout.js";
 import { AGENT_ICON, profileTypeIcon, toolTypeIcon } from "./lib/type-icons.js";
 import { MapToken, useTokenWidths } from "./map-token.js";
 import { nodeIcon } from "./node-icon.js";
@@ -15,19 +17,20 @@ const TRUNK = 13;
 const TURN = 8;
 /** Between a token's side and its line. */
 const LINE_GAP = 4;
-/** How far right of what it passes a line coming round a column runs. */
-const RAIL = 20;
+/** How far right of the feeds it passes a line between two feeds of one column runs. */
+const BOW = 16;
+/** How far a feed going drifts off. */
+const DRIFT = 8;
 /** A token's width until it is measured. */
 const GUESS = 120;
 const STEP_ICONS = {
-    resolve: IconAdjustments,
     sanitize: IconShieldCheck,
     compaction: IconArrowsMinimize,
     stream: IconCloud,
     tools: IconRepeat,
-    validation: IconChecks,
     egress: IconShieldCheck,
     trace: IconTimeline,
+    loop: IconRotateClockwise,
 };
 const CHECK_ICONS = {
     permission: IconLock,
@@ -37,8 +40,6 @@ const CHECK_ICONS = {
 };
 function feedIcon(feed) {
     const of = feed.of ?? '';
-    if (feed.kind === 'runner')
-        return IconEngine;
     if (feed.kind === 'step')
         return STEP_ICONS[of] ?? IconRepeat;
     if (feed.kind === 'provider')
@@ -47,20 +48,22 @@ function feedIcon(feed) {
         return IconPlugConnected;
     if (feed.kind === 'tool')
         return toolTypeIcon(of);
-    if (feed.kind === 'branch')
+    if (feed.kind === 'branch' || feed.kind === 'stream')
         return IconStack2;
     if (feed.kind === 'subagent')
         return profileTypeIcon(of) ?? AGENT_ICON;
-    if (feed.kind === 'tool-runner')
+    if (feed.kind === 'tool-runtime')
         return IconSettingsAutomation;
+    if (feed.kind === 'guardrail-runtime')
+        return IconShieldCheck;
+    if (feed.kind === 'destinations')
+        return IconDatabase;
+    if (feed.kind === 'vault')
+        return IconVault;
+    if (feed.kind === 'model')
+        return IconCpu;
     return CHECK_ICONS[of] ?? IconShieldCheck;
 }
-/** 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;
@@ -77,9 +80,28 @@ function underPath(from, to) {
     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}`);
 }
-const clamp = (value) => Math.min(Math.max(value, 0), 1);
 const NONE = { x: 0, y: 0 };
-export function StudioTreeMap({ workspace, agents, grow = 0, fit, draggable = false, }) {
+/**
+ * How large the map stands, and where in `room`, this far settled: closed and grown alike it fits
+ * the box it stands in, never larger than itself, in the middle of it, easing from the one to the
+ * other. Closed at given places, which are its own pixels, it stands at its own size from the top left.
+ */
+function frameAt(closed, grown, room, settled, given) {
+    const fitting = (size) => room ? Math.min(1, room.width / size.width, room.height / size.height) : 1;
+    const middle = (size) => room
+        ? {
+            x: Math.max(0, room.width - size.width * fitting(size)) / 2,
+            y: Math.max(0, room.height - size.height * fitting(size)) / 2,
+        }
+        : NONE;
+    const closedScale = given ? 1 : fitting(closed);
+    const [from, to] = [given ? NONE : middle(closed), middle(grown)];
+    return {
+        scale: closedScale + (fitting(grown) - closedScale) * settled,
+        centre: { x: from.x + (to.x - from.x) * settled, y: from.y + (to.y - from.y) * settled },
+    };
+}
+export function StudioTreeMap({ workspace, agents, grow = 0, fit, room = fit, still, closed: given, draggable = false, }) {
     const root = useRef(null);
     const [moved, setMoved] = useState({});
     const [field, setField] = useState(NONE);
@@ -87,54 +109,157 @@ export function StudioTreeMap({ workspace, agents, grow = 0, fit, draggable = fa
     // why: Every token is drawn from the start, the undrawn ones unseen, so each is measured before it shows.
     const widths = useTokenWidths(root, workspace);
     const { width: fitWidth, height: fitHeight } = fit ?? { width: 0, height: 0 };
-    const layout = useMemo(() => treeMapLayout(workspace, agents, (id) => widths[id] ?? GUESS, fitWidth > 0 && fitHeight > 0 ? { width: fitWidth, height: fitHeight } : undefined), [workspace, agents, widths, fitWidth, fitHeight]);
+    const layout = useMemo(() => treeMapLayout(workspace, agents, (id) => widths[id] ?? GUESS, fitWidth > 0 && fitHeight > 0 ? { width: fitWidth, height: fitHeight } : undefined, still, given), [workspace, agents, widths, fitWidth, fitHeight, still, given]);
     const width = (id) => widths[id] ?? GUESS;
     const drafts = new Map(workspace.agents.map((agent) => [
         agent.key,
         libraryDraft(workspace, agent.key) ?? createBlankDraft(),
     ]));
-    const { rows, feeds } = layout;
+    const { rows, feeds, leaving } = layout;
+    const gone = goneAt(grow);
     const at = (id) => {
         const place = placeAt(layout, id, grow);
         const by = moved[id] ?? NONE;
         return { ...place, x: place.x + by.x, y: place.y + by.y };
     };
+    // why: What growing adds draws as the growing goes, and goes back as it comes back: no clock of its own.
     const drawn = (id) => drawnAt(layout, id, grow);
-    const feedById = new Map(feeds.map((feed) => [feed.id, feed]));
-    /** A line draws in its first half of the later of its two ends drawing, its token in the second. */
-    const lineDrawn = (...ids) => {
-        const parts = ids.flatMap((id) => drawn(id) ?? []);
-        if (parts.length === 0)
-            return {};
-        const part = Math.min(...parts);
-        return { pathLength: 1, style: { strokeDasharray: 1, strokeDashoffset: 1 - clamp(part * 2) } };
+    const on = (id) => (drawn(id) ?? 1) > 0;
+    /**
+     * A line drawing runs out from its source at the drawing's pace, as a pen draws it, the loader's
+     * map's way: the length of it drawn so far shows, and the rest is still to come.
+     */
+    const lineDrawn = (source, target) => {
+        const run = lineAt(layout, source, target, grow);
+        if (run <= 0)
+            return undefined;
+        if (run >= 1)
+            return { className: 'map-line' };
+        return {
+            className: 'map-line',
+            pathLength: 1,
+            style: { strokeDasharray: 1, strokeDashoffset: 1 - run },
+        };
+    };
+    /** A token, as solid as it has shown since the drawing reached it. */
+    const tokenDrawn = (id) => {
+        const out = drawn(id) ?? 1;
+        const zIndex = atRest(layout, id, grow) ? 2 : 1;
+        return { style: out < 1 ? { opacity: settling(out), zIndex } : { zIndex } };
     };
-    const shown = feeds.filter((feed) => (drawn(feed.id) ?? 1) > 0);
+    const shown = feeds.filter((feed) => on(feed.id));
     const right = (id) => at(id).x + width(id);
-    /** Right of every feed in its column from `to` to `feed`, where each stands now. */
-    const railFor = (feed, to) => {
-        const [top, bottom] = [at(to.id).y, at(feed.id).y].sort((a, b) => a - b);
-        const lying = shown.filter((each) => {
-            const { y } = at(each.id);
-            return each.column === feed.column && y >= (top ?? 0) && y <= (bottom ?? 0);
-        });
-        return Math.max(...lying.map((each) => right(each.id))) + RAIL;
+    // why: A model wears its family's mark, the Gemini sparkle or the provider's, as the editor's tree does.
+    const iconOf = (feed) => (feed.kind === 'model' && feed.of !== undefined && modelFamilyMark(feed.of)) || feedIcon(feed);
+    /**
+     * The rail the lines from a source to feeds in its own column run down, right of it: clear of every
+     * token they pass, and one for all of them, so they leave the source as one line.
+     */
+    const railOf = (source) => {
+        const ends = feeds.filter((feed) => feed.from.includes(source) && beside(layout, source, feed));
+        const ys = [at(source).y, ...ends.map((feed) => at(feed.id).y)];
+        const [top, bottom] = [Math.min(...ys), Math.max(...ys)];
+        const column = ends[0]?.column;
+        const passed = feeds
+            .filter((each) => each.column === column)
+            .filter((each) => at(each.id).y >= top && at(each.id).y <= bottom)
+            .map((each) => right(each.id) + LINE_GAP);
+        return Math.max(right(source) + LINE_GAP, ...passed) + BOW;
     };
-    const joins = shown.flatMap((feed) => {
-        const to = feed.joins === undefined ? undefined : feedById.get(feed.joins);
-        return to && (drawn(to.id) ?? 1) > 0 ? [{ feed, to }] : [];
+    // why: Closed, a row's lines run down one trunk to what it shows; grown, each runs down its feed's
+    // lane like the tree's, its steps aside growing out of its row.
+    const square = settledAt(grow);
+    const toward = (from, to, at) => ({
+        x: from.x + (to.x - from.x) * at,
+        y: from.y + (to.y - from.y) * at,
     });
-    /** A join to a feed further right runs across to it; to one in its own column, round their right. */
-    const joinPath = (feed, to) => {
-        const from = { x: right(feed.id) + LINE_GAP, y: at(feed.id).y };
-        if (to.column > feed.column) {
-            return mapCurve(from, { x: at(to.id).x - LINE_GAP, y: at(to.id).y }).d;
-        }
-        return sidePath(from, { x: right(to.id) + LINE_GAP, y: at(to.id).y }, railFor(feed, to));
+    const lines = feeds.flatMap((feed) => {
+        return [...feed.from, ...(feed.late ?? [])].flatMap((source) => {
+            if (!on(source) || lineAt(layout, source, feed.id, grow) <= 0)
+                return [];
+            const end = at(feed.id);
+            const start = { x: right(source) + LINE_GAP, y: at(source).y };
+            if (beside(layout, source, feed)) {
+                const into = { x: end.x + width(feed.id) + LINE_GAP, y: end.y };
+                return [
+                    {
+                        key: lineKey(source, feed.id),
+                        d: mapBracket(start, into, railOf(source), TURN),
+                        target: feed.id,
+                        source,
+                    },
+                ];
+            }
+            const lane = layout.lanes.get(lineKey(source, feed.id));
+            const grownRail = lane ? at(lane.of).x - lane.by : (start.x + end.x) / 2;
+            const trunk = layout.trunks.get(source);
+            const steps = (layout.jogs.get(lineKey(source, feed.id)) ?? []).map((jog) => ({
+                x: at(jog.lane.of).x - jog.lane.by,
+                y: at(jog.near).y + (jog.side * layout.row) / 2,
+            }));
+            const into = { x: end.x - LINE_GAP, y: end.y };
+            const d = trunk === undefined
+                ? mapRoute(start, into, steps, grownRail, TURN, square)
+                : mapRoute(start, into, steps.map((step) => toward(start, step, square)), trunk + (grownRail - trunk) * square, TURN, 1);
+            return [{ key: lineKey(source, feed.id), d, source, target: feed.id }];
+        });
+    });
+    const agentsOf = new Set(layout.becomes.values());
+    /**
+     * The line from an agent tool to the agent of the still it grows into. why: Closed, the agent
+     * stands as its own in the tree, so the line leaves the tool's right, runs down right of what
+     * stands between, and comes back into the agent's right; grown, it is the line from under the
+     * tool's icon into the agent in its slot. Each corner eases from the one to the other.
+     */
+    const backPath = (holder, agent) => {
+        const [tool, to] = [at(holder), at(agent)];
+        const [top, bottom] = [Math.min(tool.y, to.y), Math.max(tool.y, to.y)];
+        const passed = [...shown.map((feed) => feed.id), ...leaving.feeds.map((feed) => feed.id)]
+            .filter((id) => at(id).y >= top && at(id).y <= bottom)
+            .map((id) => right(id) + LINE_GAP);
+        const rail = Math.max(right(holder) + LINE_GAP, right(agent) + LINE_GAP, ...passed) + BOW;
+        const closed = [
+            { x: right(holder) + LINE_GAP, y: tool.y },
+            { x: rail, y: tool.y },
+            { x: rail, y: (tool.y + to.y) / 2 },
+            { x: rail, y: to.y },
+            { x: right(agent) + LINE_GAP, y: to.y },
+        ];
+        const trunk = to.x - INDENT + TRUNK;
+        const across = tool.y + HALF + LINE_GAP;
+        const grown = [
+            { x: tool.x + TRUNK, y: tool.y + HALF },
+            { x: tool.x + TRUNK, y: across },
+            { x: trunk, y: across },
+            { x: trunk, y: to.y },
+            { x: to.x - LINE_GAP, y: to.y },
+        ];
+        return mapPolyline(closed.map((point, index) => toward(point, grown[index] ?? point, square)), TURN);
     };
-    const places = [...rows.map(rowId), ...shown.map((feed) => feed.id)];
-    const rails = joins.flatMap(({ feed, to }) => to.column === feed.column ? [railFor(feed, to)] : []);
-    const mapWidth = Math.max(GUESS, ...places.map(right), ...rails) + PAD;
+    // What growing takes away goes under the rest: a row folding into its agent, a feed drifting off.
+    const going = gone < 1;
+    const leavingStyle = { opacity: 1 - gone, zIndex: 0 };
+    const parentOf = (id) => layout.becomes.get(id) ?? id;
+    const leavingLines = going
+        ? leaving.lines.map(({ source, feed }) => {
+            const end = at(feed);
+            const start = { x: right(source) + LINE_GAP, y: at(source).y };
+            const rail = layout.trunks.get(source) ?? (start.x + end.x) / 2;
+            return {
+                key: lineKey(source, feed),
+                d: mapRoute(start, { x: end.x - LINE_GAP, y: end.y }, [], rail, TURN, 1),
+            };
+        })
+        : [];
+    // why: What growing takes away holds the map open until it has gone.
+    const places = [
+        ...rows.map(rowId),
+        ...shown.map((feed) => feed.id),
+        ...(going ? [...leaving.rows.map(rowId), ...leaving.feeds.map((feed) => feed.id)] : []),
+    ];
+    // why: An agent tool's line back to its agent runs down right of the feeds.
+    const back = layout.becomes.size > 0 ? LINE_GAP + BOW : 0;
+    const mapWidth = Math.max(GUESS, ...places.map(right)) + back + PAD;
     const height = Math.max(...places.map((id) => at(id).y)) + HALF + PAD;
     const grown = useMemo(() => {
         const ids = [...layout.rows.map(rowId), ...layout.feeds.map((feed) => feed.id)];
@@ -144,15 +269,17 @@ export function StudioTreeMap({ workspace, agents, grow = 0, fit, draggable = fa
             height: Math.max(...ends.map((end) => end.y)) + HALF + PAD,
         };
     }, [layout, widths]);
-    const fits = fit ? Math.min(1, fit.width / grown.width, fit.height / grown.height) : 1;
-    const scale = 1 + (fits - 1) * clamp(grow);
-    // why: Grown, the map stands in the middle of the box it fills; closed, at its top left.
-    const centre = fit
-        ? {
-            x: (Math.max(0, fit.width - grown.width * fits) / 2) * clamp(grow),
-            y: (Math.max(0, fit.height - grown.height * fits) / 2) * clamp(grow),
-        }
-        : NONE;
+    // why: The map eases to the size of the box it stands in with its nodes' move, so it never
+    // outgrows it, and grows with it after.
+    const closedSize = useMemo(() => {
+        const ends = [...layout.closed];
+        return {
+            width: Math.max(...ends.map(([id, end]) => end.x + (widths[id] ?? GUESS))) + back + PAD,
+            height: Math.max(...ends.map(([, end]) => end.y)) + HALF + PAD,
+        };
+    }, [layout, widths, back]);
+    const settled = settledAt(grow);
+    const { scale, centre } = frameAt(closedSize, grown, room, settled, given !== undefined);
     // why: The pointer moves in the page's pixels; the map is scaled, so a move is divided back into its own.
     const drag = (event) => {
         if (!draggable || !drags(event))
@@ -177,24 +304,37 @@ export function StudioTreeMap({ workspace, agents, grow = 0, fit, draggable = fa
         });
     };
     const shift = { x: field.x + centre.x, y: field.y + centre.y };
+    const rowToken = (row, look) => {
+        const draft = drafts.get(row.agent) ?? createBlankDraft();
+        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, ...look }, rowId(row)));
+    };
+    /** A feed's token, `drift` right of where it stands. */
+    const feedToken = (feed, look, drift = 0) => {
+        const { x, y } = at(feed.id);
+        return (_jsx(MapToken, { id: feed.id, label: feed.label, icon: iconOf(feed), x: x + drift, y: y, ...look }, feed.id));
+    };
     const translate = shift.x || shift.y ? { translate: `${shift.x}px ${shift.y}px` } : {};
     return (_jsxs("div", { ref: root, className: "studio-tree-map", style: {
             width: mapWidth,
             height,
             ...translate,
             ...(scale < 1 ? { scale: String(scale) } : {}),
-        }, "data-draggable": draggable ? '' : undefined, "data-dragging": dragging ? '' : undefined, onPointerDown: drag, 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) => feed.under !== undefined && (_jsx("path", { className: "map-line", d: underPath(at(feed.under), at(feed.id)), ...lineDrawn(feed.id) }, `${feed.id}^`))), joins.map(({ feed, to }) => (_jsx("path", { className: "map-line", d: joinPath(feed, to), ...lineDrawn(feed.id, to.id) }, `${feed.id}~${to.id}`)))] }), rows.map((row) => {
-                const draft = drafts.get(row.agent) ?? createBlankDraft();
-                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)));
-            }), feeds.map((feed) => {
-                const { x, y } = at(feed.id);
-                const part = drawn(feed.id);
-                const unseen = part === 0 ? { visibility: 'hidden' } : {};
-                return (_jsx(MapToken, { id: feed.id, label: feed.label, icon: feedIcon(feed), x: x, y: y, ...(part === undefined ? {} : { style: { ...unseen, opacity: clamp(part * 2 - 1) } }) }, feed.id));
-            })] }));
+        }, "data-draggable": draggable ? '' : undefined, "data-dragging": dragging ? '' : undefined, onPointerDown: drag, children: [_jsxs("svg", { className: "studio-tree-map-lines", width: mapWidth, height: height, "aria-hidden": "true", children: [rows.map((row) => {
+                        const drawing = row.parent !== undefined && lineDrawn(row.parent, rowId(row));
+                        return (row.parent &&
+                            drawing && (_jsx("path", { d: linePath(at(row.parent), at(rowId(row))), ...drawing }, rowId(row))));
+                    }), going &&
+                        leaving.rows.map((row) => row.parent && (_jsx("path", { className: "map-line", d: linePath(at(parentOf(row.parent)), at(rowId(row))), style: leavingStyle }, rowId(row)))), leavingLines.map(({ key, d }) => (_jsx("path", { className: "map-line", d: d, style: leavingStyle }, key))), lines.map(({ key, d, source, target }) => {
+                        const drawing = lineDrawn(source, target);
+                        return drawing && _jsx("path", { d: d, ...drawing }, key);
+                    }), feeds.map((feed) => {
+                        const holder = feed.under;
+                        const drawing = holder !== undefined && on(holder) && lineDrawn(holder, feed.id);
+                        return (holder !== undefined &&
+                            drawing && (_jsx("path", { d: agentsOf.has(feed.id)
+                                ? backPath(holder, feed.id)
+                                : underPath(at(holder), at(feed.id)), ...drawing }, underKey(feed.id))));
+                    })] }), settled > 0 &&
+                layout.headings.map(({ label, note, x, y }) => (_jsxs("div", { className: "studio-tree-map-heading", style: { left: x, top: y, opacity: settled }, children: [_jsx(Text, { type: "supporting", color: "secondary", weight: "semibold", children: label }), _jsx(Text, { type: "supporting", color: "placeholder", children: note })] }, label))), rows.map((row) => rowToken(row, tokenDrawn(rowId(row)))), going && leaving.rows.map((row) => rowToken(row, { style: leavingStyle })), going && leaving.feeds.map((feed) => feedToken(feed, { style: leavingStyle }, DRIFT * gone)), feeds.map((feed) => feedToken(feed, tokenDrawn(feed.id)))] }));
 }