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

package/ui/lib/tree-map-layout.js

@@ -9,6 +9,8 @@
 import { workspaceTree } from "../../mod.js";
 /** A row's height closed; grown, the least and the most it stretches to, to fill the box it fits. */
 const ROW = 32;
+/** Closed, the room before each agent after the first. */
+const AGENT_GAP = 16;
 const GROWN_ROW = 28;
 const TALLEST_ROW = 40;
 /** How far in each level of the tree starts. */
@@ -16,53 +18,116 @@ export const INDENT = 28;
 /** A token's half height. */
 export const HALF = 11;
 export const PAD = 16;
+/** Grown, how much further in from the box's edges the map stands. */
+const INSET = 16;
+/** Grown, the room over the columns their headings take: a title, the line under it, and a gap. */
+export const HEADING = 56;
+/** Grown, each column's heading, in order: the tree, the registries, the runner. */
+export const HEADINGS = [
+    { label: 'Profile', note: 'The contract you define' },
+    { label: 'Registry', note: 'The pieces you provide' },
+    { label: 'Runner', note: 'What runs your contract' },
+];
 /** Closed, between the tree's widest row and the feeds; grown, the least and most between columns. */
 const GAP = 72;
 const LEAST_GAP = 56;
-const MOST_GAP = 160;
-/** The tools beside a Tools row: the first of each type. */
+const MOST_GAP = 200;
+/** The least room between two lanes. */
+const LANE = 9;
+/** Closed, how far left of the feeds the lines from a row run down to them, as one. */
+const TRUNK_GAP = 24;
+/** The types of tool the map draws, in the order it draws them. */
 const TOOL_TYPES = ['function', 'http', 'mcp', 'agent'];
-/** Grown, the runner's steps two across, down one column and then the next. */
-const STEPS_DOWN = 4;
-const STEP_GAP = 24;
-/** By how far grown every node has reached its zone; the rest is for drawing in. */
-const MOVE_TO = 0.7;
-/** 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;
-/** How finely growing is walked to find where an added node first stands clear. */
-const SAMPLES = 100;
+/** The tools a remote call reaches the network for. */
+const REMOTE_TYPES = ['http', 'mcp'];
+/** By how far grown the map's frame has eased to its grown size and place. */
+const MOVE_TO = 0.2;
+/** What the still shows and growing takes away is gone by this far grown. */
+export const LEAVE_TO = 0.2;
+/** How far grown the drawing starts from the tree's agents: once the frame has settled. */
+const DRAW_FROM = MOVE_TO;
+/**
+ * How long nodes of the still take to glide into place, as a length of line: they go as the
+ * drawing comes to the node they are reached from, and its lines to them wait for them.
+ */
+const GLIDE = 280;
+/** How long a node growing adds takes to show once its line has reached it, as a length of line. */
+const SHOW = 180;
+/** How far clear of a node of the still what shows near it stands. */
+const ROOM = 12;
+/** How much of its glide a node of the still has done when what would land on it starts to show. */
+const AHEAD = 0.35;
+/** How far a node of the still that made room glides on once its line reaches it, as a share of a glide. */
+const LAND = 0.3;
+/** How much of its showing a node has done as its line reaches it, so the line meets it there. */
+const MET = 0.35;
+/** How much of its showing a node has done when its lines start to leave it. */
+const SHOWN = 0.4;
+/** How far a node growing adds drifts in along its line as it shows. */
+const DRIFT = 14;
+/** How long the drawing rests at each node before its lines leave it, as a length of line. */
+const PAUSE = 40;
 /** Space kept clear round a token. */
 const CLEAR = 2;
-export const RUNNER = 'runner';
-export const TOOL_RUNNER = 'tool-runner';
+/**
+ * Of a still node's glide into a slot, the share of it the node goes across before it starts down
+ * or up, and the share it has left to go across once it has.
+ */
+const SINK = 0.3;
+export const TOOL_RUNTIME = 'tool-runtime';
+export const GUARDRAIL_RUNTIME = 'guardrail-runtime';
+export const TRACE_DESTINATIONS = 'trace-destinations';
+export const PROVIDER_STREAM = 'provider-stream';
+export const KEY_VAULT = 'key-vault';
+export const TURN_LOOP = 'turn-loop';
 /**
  * What the runner does in a turn, in order: the steps of the kernel contract's turn lifecycle
- * (docs/contracts/kernel.md, "Turn lifecycle") that do work.
+ * (docs/contracts/kernel.md, "Turn lifecycle") that do work, and the profile sections each reads.
  * why: The canary bind runs only while a canary detector is on, and pre_turn, before_end and
- * post_turn are hooks for the host's stages, so the map leaves those four out.
+ * post_turn are hooks for the host's stages, so the map leaves those four out; the structured
+ * reply's validation is the outputs' own, not a story of the runner's, so it is left out too.
+ * Sanitize and egress are named for what they guard, the input and the reply, and drawn from them.
  */
 export const TURN_STEPS = [
-    { id: 'resolve', label: 'Resolve' },
-    { id: 'sanitize', label: 'Sanitize' },
-    { id: 'compaction', label: 'Compaction' },
-    { id: 'stream', label: 'Provider stream' },
-    { id: 'tools', label: 'Tool loop' },
-    { id: 'validation', label: 'Validation' },
-    { id: 'egress', label: 'Egress' },
-    { id: 'trace', label: 'Trace' },
+    { id: 'sanitize', label: 'Input guard', reads: ['inputs'] },
+    { id: 'egress', label: 'Reply guard', reads: ['outputs'] },
+    { id: 'trace', label: 'Trace exporter', reads: ['observability'] },
 ];
 /**
- * What the tool runner checks of every call, in order (`executeRegisteredTool`): its permission,
- * its sign-in, the network a remote call reaches, and the guard on its result.
+ * What the tool runner does with every call (`executeRegisteredTool`): its permission, the MCP
+ * session an MCP call runs in, and its sign-in.
+ * why: The sessions stand before the sign-in, level with the third tool, so an MCP tool there has a
+ * straight line to them.
  */
 export const TOOL_CHECKS = [
     { id: 'permission', label: 'Permission gate' },
-    { id: 'sign-in', label: 'Sign-in' },
-    { id: 'network', label: 'Network check' },
-    { id: 'result', label: 'Result guard' },
+    { id: 'sessions', label: 'MCP sessions' },
+    { id: 'sign-in', label: 'Authentication' },
+];
+/** What the guard runner does with a call: the network a remote call reaches, and the guard on its result. */
+const GUARDRAIL_CHECKS = [
+    { id: 'network', label: 'Network guard' },
+    { id: 'result', label: 'Tool result guard' },
+];
+/**
+ * The order of an agent's rows: what it runs on, how it turns, its tools, its guardrails, then what
+ * goes in and out of it, level with the guards on them; any other section after, observability last.
+ */
+const ROW_ORDER = [
+    'identity',
+    'models',
+    'decision',
+    'image',
+    'speech',
+    'live',
+    'turnBehaviour',
+    'tools',
+    'guardrails',
+    'inputs',
+    'outputs',
 ];
+/** Closed, the map shows only these beside the tree: each agent's models and its tools. */
+const CLOSED = ['model', 'tool'];
 /** A row's token id: the tree's ids repeat from one agent to the next. */
 export function rowId(row) {
     return `${row.agent}/${row.node.id}`;
@@ -78,8 +143,18 @@ function rowsOf(workspace, only) {
             ...(parent ? { parent: rowId(parent) } : {}),
         };
         rows.push(row);
-        for (const child of node.children)
+        // why: The models are named once, under their providers beside the tree; the Models row links to
+        // them. Observability comes last, level with the trace destinations and the trace exporter at
+        // the foot of the map.
+        const children = node.children.filter((child) => child.ref.facet !== 'modelBinding');
+        const rank = (child) => child.ref.facet === 'observability'
+            ? ROW_ORDER.length + 1
+            : ROW_ORDER.includes(child.ref.facet)
+                ? ROW_ORDER.indexOf(child.ref.facet)
+                : ROW_ORDER.length;
+        for (const child of children.toSorted((a, b) => rank(a) - rank(b))) {
             walk(child, agent, depth + 1, row);
+        }
     };
     workspaceTree(workspace).agents.forEach((root, index) => {
         const key = workspace.agents[index]?.key ?? '';
@@ -88,127 +163,287 @@ function rowsOf(workspace, only) {
     });
     return rows;
 }
+/** A tool's feed, with a line from each row in `from`, and an agent tool's agent under it. */
+function toolFeeds(workspace, id, spec, from) {
+    const tool = {
+        id,
+        label: spec.toolName,
+        kind: 'tool',
+        of: spec.toolType,
+        from,
+        column: 1,
+        group: 'tools',
+    };
+    const agent = workspace.agents.find((each) => each.key === spec.agentKey);
+    if (spec.toolType !== 'agent' || !agent)
+        return [tool];
+    return [
+        tool,
+        {
+            id: `${id}/agent`,
+            label: agent.identity.agentId || agent.identity.handle,
+            kind: 'subagent',
+            of: agent.identity.profileType,
+            from: [],
+            under: id,
+            column: 1,
+            group: 'tools',
+        },
+    ];
+}
 /**
- * Beside the tree, shared by every agent drawn: the providers, each with the protocols the models
- * it serves speak, and a line into each of those models; the first tool of each type the agents
- * allow, with a line into each Tools row that allows it, an MCP tool's sessions under it and an
- * agent tool's agent under it, joined to the runner; and the one runner, with a line into each
- * agent but a host (whose calls the tool runner runs) and its steps under it. Past them, the tool
- * runner the tool loop calls, its checks under it.
+ * Each provider with the sources of each of its protocols, and each model once under its provider,
+ * with a line from each source that runs on it.
+ */
+function modelsOf(modelled) {
+    const providers = new Map();
+    // why: Agents that run on the same model share it, as they share a tool: one model, with a line
+    // from each Models row.
+    const models = new Map();
+    for (const { agent, source } of modelled) {
+        for (const binding of agent.modelBindings) {
+            const protocols = providers.get(binding.provider) ?? new Map();
+            protocols.set(binding.protocol, [...(protocols.get(binding.protocol) ?? []), source]);
+            providers.set(binding.provider, protocols);
+            const id = `model:${binding.provider}:${binding.apiId}:${binding.modelId}`;
+            const shared = models.get(id);
+            if (shared) {
+                if (!shared.from.includes(source))
+                    shared.from.push(source);
+                continue;
+            }
+            models.set(id, {
+                id,
+                label: binding.modelId,
+                kind: 'model',
+                of: binding.apiId,
+                from: [source],
+                under: `provider:${binding.provider}`,
+                column: 1,
+                group: 'providers',
+            });
+        }
+    }
+    return { providers, models };
+}
+/**
+ * Beside the tree, shared by every agent drawn, two columns. First, the registries: each tool the
+ * agents allow, by type, with a line from each Tools row that allows it, and an agent tool's
+ * agent under it; each provider, with its models under it, each with a line from its Models row; and the trace
+ * destinations, with a line from the observability rows. Then the runner: the provider protocols, a
+ * head over each provider's protocols, each with a line from its provider; the tool runner, with a line from
+ * each tool, and what it does with each call under it; the guard runner, with a line from the
+ * guardrails, and what it does under it; and the trace exporter, with a line from the trace
+ * destinations.
  */
 function feedsOf(workspace, rows) {
     const drawn = workspace.agents.filter((agent) => rows.some((row) => row.agent === agent.key));
     const rowOf = (agent, facet, key) => rows.find((row) => row.agent === agent &&
         row.node.ref.facet === facet &&
         (key === undefined || ('key' in row.node.ref && row.node.ref.key === key)));
+    const sections = (facets) => rows.filter((row) => facets.includes(row.node.ref.facet)).map(rowId);
     const feeds = [];
-    const providers = new Map();
-    for (const agent of drawn) {
-        for (const binding of agent.modelBindings) {
-            const row = rowOf(agent.key, 'modelBinding', binding.key);
-            if (!row)
-                continue;
-            const provider = providers.get(binding.provider) ?? { into: [], protocols: new Set() };
-            provider.into.push(rowId(row));
-            provider.protocols.add(binding.protocol);
-            providers.set(binding.provider, provider);
-        }
-    }
-    for (const [provider, { into, protocols }] of providers) {
-        const id = `provider:${provider}`;
-        feeds.push({ id, label: provider, kind: 'provider', into, column: 1, group: 'providers' });
-        for (const protocol of protocols) {
-            const nested = { id: `${id}/${protocol}`, label: protocol, kind: 'protocol' };
-            feeds.push({ ...nested, into: [], under: id, column: 1, group: 'providers' });
-        }
-    }
     const allowing = (key) => drawn.flatMap((agent) => {
         const row = agent.tools.allow.includes(key) ? rowOf(agent.key, 'tools') : undefined;
         return row ? [rowId(row)] : [];
     });
-    for (const type of TOOL_TYPES) {
-        const tool = workspace.toolSpecs.find((each) => each.toolType === type && allowing(each.key).length > 0);
-        if (!tool)
-            continue;
-        const id = `tool:${tool.key}`;
-        const into = allowing(tool.key);
+    // The tools the agents allow, by type, each type's in the workspace's order.
+    const allowed = TOOL_TYPES.flatMap((type) => workspace.toolSpecs.filter((each) => each.toolType === type && allowing(each.key).length > 0));
+    // why: An agent tool's agent runs on a model of its own, so its models stand under their
+    // providers too, each with a line from the agent under the tool, when the tree does not draw it.
+    const asked = allowed.flatMap((tool) => {
+        const agent = drawn.some((each) => each.key === tool.agentKey)
+            ? undefined
+            : workspace.agents.find((each) => each.key === tool.agentKey);
+        return agent ? [{ agent, source: `tool:${tool.key}/agent` }] : [];
+    });
+    const modelled = [
+        ...drawn.flatMap((agent) => {
+            const section = rowOf(agent.key, 'models');
+            return section ? [{ agent, source: rowId(section) }] : [];
+        }),
+        ...asked,
+    ];
+    const { providers, models } = modelsOf(modelled);
+    const protocols = [];
+    for (const [provider, byProtocol] of providers) {
+        const id = `provider:${provider}`;
         feeds.push({
             id,
-            label: tool.toolName,
-            kind: 'tool',
-            of: type,
-            into,
+            label: provider,
+            kind: 'provider',
+            // why: The Models rows link to the models under it, not to the provider.
+            from: [],
             column: 1,
-            group: 'tools',
+            group: 'providers',
         });
-        const nested = { into: [], under: id, column: 1, group: 'tools' };
-        if (type === 'mcp') {
-            feeds.push({ ...nested, id: `${id}/sessions`, label: 'MCP sessions', kind: 'branch' });
-        }
-        const agent = workspace.agents.find((each) => each.key === tool.agentKey);
-        if (type === 'agent' && agent) {
-            const label = agent.identity.agentId || agent.identity.handle;
-            feeds.push({
-                ...nested,
-                id: `${id}/agent`,
-                label,
-                kind: 'subagent',
-                of: agent.identity.profileType,
-                joins: RUNNER,
+        for (const protocol of byProtocol.keys()) {
+            protocols.push({
+                id: `${id}/${protocol}`,
+                label: protocol,
+                kind: 'protocol',
+                from: [id],
+                under: PROVIDER_STREAM,
+                column: 2,
+                group: 'protocols',
             });
         }
     }
-    const runs = drawn.filter((agent) => agent.identity.profileType !== 'host');
-    const into = runs.flatMap((agent) => {
-        const row = rowOf(agent.key, 'identity');
-        return row ? [rowId(row)] : [];
+    // why: The key vault holds the keys the protocols call providers with and the tools sign in
+    // with, so it stands between the providers and the tools.
+    if (protocols.length > 0 || allowed.length > 0) {
+        feeds.push({
+            id: KEY_VAULT,
+            label: 'Key vault',
+            kind: 'vault',
+            from: [],
+            column: 1,
+            group: 'vault',
+        });
+    }
+    const tools = allowed.map((spec) => ({ id: `tool:${spec.key}`, spec }));
+    for (const { id, spec } of tools)
+        feeds.push(...toolFeeds(workspace, id, spec, allowing(spec.key)));
+    const stepOf = (id) => TURN_STEPS.find((step) => step.id === id) ?? { id, label: id, reads: [] };
+    const guardrails = sections(['guardrails']);
+    const observability = sections(['observability']);
+    // Registries: each provider, its models under it, and the trace destinations.
+    feeds.push(...models.values());
+    feeds.push({
+        id: TRACE_DESTINATIONS,
+        label: 'Trace destinations',
+        kind: 'destinations',
+        from: observability,
+        column: 1,
+        group: 'destinations',
     });
-    feeds.push({ id: RUNNER, label: 'Runner', kind: 'runner', into, column: 1, group: 'runner' });
-    for (const step of TURN_STEPS) {
+    // The runner: the provider protocols, one under another, then the turn loop, the tool runner and
+    // the guard runner with what each does under it, then the trace exporter.
+    if (protocols.length > 0) {
         feeds.push({
-            id: `${RUNNER}/${step.id}`,
-            label: step.label,
+            id: PROVIDER_STREAM,
+            label: 'Provider protocols',
+            kind: 'stream',
+            // why: The protocols call each provider with the key the vault holds for it.
+            from: [KEY_VAULT],
+            column: 2,
+            group: 'protocols',
+        });
+        feeds.push(...protocols);
+    }
+    // why: The turn loop runs the steps of a turn as the turn behaviour sets them: where the step
+    // limit stops it, and whether a cut-off reply continues or the user steers it.
+    const turnBehaviour = sections(['turnBehaviour']);
+    if (turnBehaviour.length > 0) {
+        feeds.push({
+            id: TURN_LOOP,
+            label: 'Turn loop',
             kind: 'step',
-            of: step.id,
-            into: [],
-            under: RUNNER,
-            column: 1,
-            group: 'runner',
-            ...(step.id === 'tools' ? { joins: TOOL_RUNNER } : {}),
+            of: 'loop',
+            from: turnBehaviour,
+            column: 2,
+            group: 'turn-loop',
         });
     }
-    const runner = { id: TOOL_RUNNER, label: 'Tool runner', kind: 'tool-runner' };
-    feeds.push({ ...runner, into: [], column: 2, group: 'tool-runner' });
+    const toolsOf = (types) => tools.filter(({ spec }) => types.includes(spec.toolType)).map(({ id }) => id);
+    const checkFrom = {
+        'sign-in': [
+            ...tools.filter(({ spec }) => (spec.authType ?? 'none') !== 'none').map(({ id }) => id),
+            // why: A tool's sign-in reads its key or its resolver from the vault.
+            ...(tools.length > 0 ? [KEY_VAULT] : []),
+        ],
+        network: toolsOf(REMOTE_TYPES),
+        sessions: toolsOf(['mcp']),
+        // why: The tool runner hands each result to its guard before it goes back to the model.
+        result: tools.length > 0 ? [TOOL_RUNTIME] : [],
+    };
+    feeds.push({
+        id: TOOL_RUNTIME,
+        label: 'Tool runner',
+        kind: 'tool-runtime',
+        from: tools.map(({ id }) => id),
+        column: 2,
+        group: 'tool-runtime',
+    });
     for (const check of TOOL_CHECKS) {
-        const nested = { id: `${TOOL_RUNNER}/${check.id}`, label: check.label, of: check.id };
         feeds.push({
-            ...nested,
+            id: `${TOOL_RUNTIME}/${check.id}`,
+            label: check.label,
+            kind: check.id === 'sessions' ? 'branch' : 'check',
+            of: check.id,
+            from: checkFrom[check.id] ?? [],
+            under: TOOL_RUNTIME,
+            column: 2,
+            group: 'tool-runtime',
+        });
+    }
+    feeds.push({
+        id: GUARDRAIL_RUNTIME,
+        label: 'Guard runner',
+        kind: 'guardrail-runtime',
+        from: guardrails,
+        column: 2,
+        group: 'guardrail-runtime',
+    });
+    for (const id of ['sanitize', 'egress']) {
+        const step = stepOf(id);
+        feeds.push({
+            id: `${GUARDRAIL_RUNTIME}/${id}`,
+            label: step.label,
+            kind: 'step',
+            of: id,
+            from: sections(step.reads),
+            under: GUARDRAIL_RUNTIME,
+            column: 2,
+            group: 'guardrail-runtime',
+        });
+    }
+    for (const check of GUARDRAIL_CHECKS) {
+        feeds.push({
+            id: `${GUARDRAIL_RUNTIME}/${check.id}`,
+            label: check.label,
             kind: 'check',
-            into: [],
-            under: TOOL_RUNNER,
+            of: check.id,
+            from: checkFrom[check.id] ?? [],
+            under: GUARDRAIL_RUNTIME,
             column: 2,
-            group: 'tool-runner',
+            group: 'guardrail-runtime',
         });
     }
+    feeds.push({
+        id: 'telemetry',
+        label: stepOf('trace').label,
+        kind: 'step',
+        of: 'trace',
+        from: [TRACE_DESTINATIONS],
+        column: 2,
+        group: 'telemetry',
+    });
     return feeds;
 }
 const clamp = (value) => Math.min(Math.max(value, 0), 1);
+/** Slow out, slow in: how far a move or a draw has gone at `at` of its time, both from 0 to 1. */
+/** A gentle ease in and out, for what moves far: it never rushes through the middle. */
+export const soft = (at) => (1 - Math.cos(Math.PI * clamp(at))) / 2;
+/** An ease that comes in quickly and settles slowly, for what drifts the last of its way. */
+export const settling = (at) => 1 - (1 - clamp(at)) ** 3;
+/** How far the map's frame has settled this far grown, 0 to 1: its size and place, and what holds it. */
+export const settledAt = (grow) => soft(grow / MOVE_TO);
+export const ease = (at) => {
+    const t = clamp(at);
+    return t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
+};
 const between = (from, to, at) => from + (to - from) * at;
-/** A step under the runner two across, down one column and then the next; any other a level in. */
-function slotsOf(feeds, width) {
+/** A node under a feed a level in, a row down for each before it. */
+function slotsOf(feeds) {
     const slots = new Map();
-    const steps = feeds.filter((feed) => feed.kind === 'step');
-    const stepColumn = Math.max(0, ...steps.map((step) => width(step.id))) + STEP_GAP;
     const counts = new Map();
     for (const feed of feeds) {
         if (feed.under === undefined)
             continue;
         const index = counts.get(feed.under) ?? 0;
         counts.set(feed.under, index + 1);
-        const slot = feed.kind === 'step'
-            ? { across: Math.floor(index / STEPS_DOWN) * stepColumn, down: (index % STEPS_DOWN) + 1 }
-            : { across: 0, down: index + 1 };
-        slots.set(feed.id, { holder: feed.under, across: INDENT + slot.across, down: slot.down });
+        slots.set(feed.id, { holder: feed.under, across: INDENT, down: index + 1 });
     }
     return slots;
 }
@@ -237,18 +472,48 @@ function stacksOf(rows, feeds, slots) {
     });
     return { held, columns: [stack(tree), ...columns] };
 }
+/** The tallest row a grown map can take that `fits`, else the least. */
+function fittingRow(fits) {
+    for (let step = TALLEST_ROW; step >= GROWN_ROW; step -= 1) {
+        if (fits(step))
+            return step;
+    }
+    return GROWN_ROW;
+}
 /**
- * The map grown: the tree, each agent a zone of its own; beside it the providers, the tools and the
- * runner; past them the tool runner. Rows stretch, up to a most, and the gaps between columns and
- * between groups widen, so the map fills `box`; without one, rows and gaps are at their least.
+ * Moves the last row and `foot` down by `shift`, and the rows before it with no line of their own
+ * to stand a `step` apart over it.
  */
-function grownPlaces(rows, feeds, slots, width, box) {
-    const { held, columns } = stacksOf(rows, feeds, slots);
-    // In rows, from the top node's middle to the bottom one's, each gap at its least of a row.
-    const span = Math.max(...columns.map((each) => each.rows + each.ids.length - 2));
-    const room = box ? box.height - 2 * (PAD + HALF) : 0;
-    const row = Math.min(Math.max(room / Math.max(span, 1), GROWN_ROW), TALLEST_ROW);
-    const height = Math.max(room, span * row);
+function liftTail(rows, lined, lastRow, ys, foot, shift, step) {
+    const tail = [lastRow];
+    for (const each of rows.toReversed().slice(1)) {
+        if (lined.has(rowId(each)) || each.agent !== lastRow.agent)
+            break;
+        tail.push(each);
+    }
+    const last = (ys.get(rowId(lastRow)) ?? 0) + Math.max(0, shift);
+    for (const [index, each] of tail.entries())
+        ys.set(rowId(each), last - index * step);
+    if (shift > 0)
+        for (const block of foot)
+            block.top += shift;
+}
+/** Opens `spare` room between the agents, each a zone of its own. */
+function spreadAgents(rows, tree, ys, blocks, spare) {
+    const agents = [...new Set(rows.map((each) => each.agent))];
+    if (agents.length <= 1 || spare <= 0)
+        return;
+    const by = (agent) => (spare * agents.indexOf(agent)) / (agents.length - 1);
+    for (const each of rows)
+        ys.set(rowId(each), (ys.get(rowId(each)) ?? 0) + by(each.agent));
+    for (const block of blocks) {
+        const anchor = block.anchor && tree.get(block.anchor.row);
+        if (anchor)
+            block.top += by(anchor.agent);
+    }
+}
+/** Where each column starts: the tree, the registries, the runner. */
+function columnLefts(rows, feeds, slots, width, box) {
     const right = (id, x) => x + width(id);
     const treeRight = Math.max(0, ...rows.map((each) => right(rowId(each), each.x)));
     const columnWidth = (column) => Math.max(0, ...feeds
@@ -258,84 +523,913 @@ function grownPlaces(rows, feeds, slots, width, box) {
         return right(feed.id, slot ? slot.across : 0);
     }));
     const [first, second] = [columnWidth(1), columnWidth(2)];
-    const spare = box ? (box.width - 2 * PAD - (treeRight - PAD) - first - second) / 2 : LEAST_GAP;
-    const gap = Math.min(Math.max(spare, LEAST_GAP), MOST_GAP);
-    const lefts = [0, treeRight + gap, treeRight + gap + first + gap];
-    const places = new Map();
+    const taken = treeRight - PAD + first + second;
+    // A gap is wide enough for a lane into each feed of the column after it, and the spare is shared.
+    const gaps = [1, 2].map((column) => {
+        const lanes = feeds.filter((feed) => feed.column === column && feed.from.length + (feed.late?.length ?? 0) > 0).length;
+        return Math.max(LEAST_GAP, (lanes + 1) * LANE);
+    });
+    const [one = 0, two = 0] = gaps;
+    const spare = box ? Math.max(0, box.width - 2 * (PAD + INSET) - taken - one - two) / 2 : 0;
+    const widen = (gap) => Math.max(gap, Math.min(gap + spare, MOST_GAP));
+    return [0, treeRight + widen(one), treeRight + widen(one) + first + widen(two)];
+}
+/** Stands each block as near its `want` as it can, the blocks in order a row apart, inside the map. */
+function keepInside(steps, start, end, row) {
+    let floor = start;
+    for (const block of steps) {
+        block.top = Math.max(block.want, floor);
+        floor = block.top + block.size + 2 * row;
+    }
+    let ceiling = end;
+    for (const block of steps.toReversed()) {
+        block.top = Math.max(Math.min(block.top, ceiling - block.size), start);
+        ceiling = block.top - 2 * row;
+    }
+}
+/**
+ * The map grown: the tree, each row with lines into a registry level with it; beside it the
+ * registries, then the runner, each block centred on its sources. Rows stretch, up to a most, and
+ * the gaps between columns and between groups widen, so the map fills `box`; without one, rows and
+ * gaps are at their least.
+ */
+function grownPlaces(rows, feeds, slots, width, box) {
+    const { held, columns } = stacksOf(rows, feeds, slots);
+    const [, registries, runner] = columns;
+    const start = PAD + INSET + HEADING + HALF;
+    const room = box ? box.height - 2 * (PAD + INSET + HALF) - HEADING : 0;
+    const byId = new Map(feeds.map((feed) => [feed.id, feed]));
+    const sourcesOf = (id) => {
+        const feed = byId.get(id);
+        return feed ? [...feed.from, ...(feed.late ?? [])] : [];
+    };
     const tree = new Map(rows.map((each) => [rowId(each), each]));
-    columns.forEach((stack, column) => {
-        const free = height - (stack.rows - 1) * row;
-        // Past a group, the next stands a row and its share of what is free further down.
-        const extra = stack.ids.length > 1 ? free / (stack.ids.length - 1) : 0;
-        // why: A column of one group has no gap to widen, so it stands in the middle of the map.
-        let y = PAD + HALF + (stack.ids.length > 1 ? 0 : free / 2);
-        for (const group of stack.ids) {
-            for (const id of group) {
-                places.set(id, { x: tree.get(id)?.x ?? lefts[column] ?? 0, y });
-                y += row * (1 + (held.get(id) ?? 0));
+    const lined = new Set(feeds.flatMap((feed) => sourcesOf(feed.id)));
+    // The rows with lines straight into the runner, each run of them level with the block they feed.
+    const toRunner = new Set(feeds.filter((feed) => feed.column === 2).flatMap((feed) => sourcesOf(feed.id)));
+    const opens = new Set(rows
+        .filter((each, index) => {
+        const before = rows[index - 1];
+        return toRunner.has(rowId(each)) && !(before && toRunner.has(rowId(before)));
+    })
+        .map(rowId));
+    /** A column's groups, each a block of rows `step` apart, its heads' nested feeds under them. */
+    const blocksOf = (stack, step) => (stack?.ids ?? []).map((group) => {
+        const offsets = new Map();
+        let size = 0;
+        for (const id of group) {
+            offsets.set(id, size);
+            for (const [nested, slot] of slots) {
+                if (slot.holder === id)
+                    offsets.set(nested, size + slot.down * step);
             }
-            y += extra;
+            size += step * (1 + (held.get(id) ?? 0));
         }
+        // A registry block stands level with the first tree row any of its feeds has a line from.
+        const anchor = [...offsets]
+            .toSorted((a, b) => a[1] - b[1])
+            .flatMap(([id, offset]) => {
+            const row = sourcesOf(id).find((source) => tree.has(source));
+            return row ? [{ row, offset }] : [];
+        })[0];
+        return { group, offsets, size: size - step, top: start, anchor };
     });
-    return { places, row };
+    /**
+     * The tree and the registries, together down the map: a row with lines into a registry block is
+     * level with the first feed it has a line to, and the row after it stands a row below that block.
+     * `extra` opens above each run of rows with lines into the runner; `reserving`, the foot keeps
+     * clear of the runner block each run feeds.
+     */
+    const lay = (step, extra = 0, reserving = true) => {
+        const ys = new Map();
+        const blocks = blocksOf(registries, step);
+        const runs = blocksOf(runner, step);
+        let y = start;
+        let floor = start;
+        // A row after a run of rows into the runner stands below the runner block the run feeds, in
+        // its agent.
+        let reserve = start;
+        let last;
+        const placed = new Set();
+        for (const row of rows) {
+            const id = rowId(row);
+            if (last && last.agent !== row.agent) {
+                y += 2 * step;
+                reserve = start;
+            }
+            if (opens.has(id))
+                y += extra;
+            if (reserving && lined.has(id) && !toRunner.has(id))
+                y = Math.max(y, reserve);
+            if (opens.has(id)) {
+                for (const run of runs) {
+                    const fed = [...run.offsets].find(([feed]) => sourcesOf(feed).includes(id));
+                    if (fed)
+                        reserve = Math.max(reserve, y - fed[1] + run.size + 2 * step);
+                }
+            }
+            let below = y;
+            for (const block of blocks.filter((each) => each.anchor?.row === id)) {
+                const offset = block.anchor?.offset ?? 0;
+                block.top = Math.max(floor, y - offset);
+                y = block.top + offset;
+                floor = block.top + block.size + 2 * step;
+                below = Math.max(below, block.top + block.size + step);
+                // A block with no line from a row stands after the block before it.
+                for (const next of blocks.slice(blocks.indexOf(block) + 1)) {
+                    if (next.anchor || placed.has(next))
+                        break;
+                    next.top = floor;
+                    floor = next.top + next.size + 2 * step;
+                    below = Math.max(below, next.top + next.size + step);
+                    placed.add(next);
+                }
+            }
+            ys.set(id, y);
+            y = Math.max(y + step, below);
+            last = row;
+        }
+        for (const block of blocks.filter((each) => !each.anchor && !placed.has(each))) {
+            block.top = floor;
+            floor = block.top + block.size + 2 * step;
+        }
+        const bottom = Math.max(...ys.values(), ...blocks.map((block) => block.top + block.size));
+        return { ys, blocks, bottom };
+    };
+    const runnerRows = (runner?.rows ?? 1) + 2 * ((runner?.ids.length ?? 1) - 1) - 1;
+    const fits = (step) => {
+        const laid = lay(step);
+        return laid.bottom - start <= room && runnerRows * step <= room;
+    };
+    const row = box ? fittingRow(fits) : GROWN_ROW;
+    const plain = lay(row);
+    const height = Math.max(room, plain.bottom - start, runnerRows * row);
+    // why: The last row's registry stands at the foot of the map, with the rows before it that have
+    // no line of their own; the map's spare room is shared between the gap above them and the gap
+    // above each run of rows into the runner, so the rows into the registries stay close. A run goes
+    // no lower than keeps its runner block clear of the foot's.
+    const lastRow = rows.at(-1);
+    const atFoot = (block) => lastRow !== undefined && block.anchor?.row === rowId(lastRow);
+    const breaks = opens.size + 1;
+    const footOf = (blocks) => Math.max(...blocks.filter(atFoot).map((block) => block.top + block.size));
+    const share = Math.min(Math.max(0, start + height - footOf(lay(row, 0, false).blocks)) / breaks, Math.max(0, start + height - footOf(plain.blocks)) / Math.max(1, opens.size));
+    const { ys, blocks, bottom } = plain.blocks.some(atFoot) ? lay(row, share) : plain;
+    const end = start + height;
+    const foot = blocks.filter(atFoot);
+    if (lastRow && foot.length > 0) {
+        liftTail(rows, lined, lastRow, ys, foot, end - footOf(foot), row);
+    }
+    else {
+        spreadAgents(rows, tree, ys, blocks, end - bottom);
+    }
+    const lefts = columnLefts(rows, feeds, slots, width, box);
+    const places = new Map();
+    for (const [id, y] of ys)
+        places.set(id, { x: INSET + (tree.get(id)?.x ?? 0), y });
+    for (const block of blocks) {
+        for (const id of block.group) {
+            places.set(id, { x: INSET + (lefts[1] ?? 0), y: block.top + (block.offsets.get(id) ?? 0) });
+        }
+    }
+    const yOf = (id) => {
+        const slot = slots.get(id);
+        if (!slot)
+            return places.get(id)?.y;
+        const holder = yOf(slot.holder);
+        return holder === undefined ? undefined : holder + slot.down * row;
+    };
+    // The runner: each block's head level with the first row it has a line from, so what stands under
+    // it is level with the rows after; a head without lines, its block centred on the rows its feeds
+    // have lines from.
+    const ysOf = (sources) => sources.flatMap((source) => {
+        const y = yOf(source);
+        return y === undefined ? [] : [y];
+    });
+    const steps = blocksOf(runner, row).map((block) => {
+        const [head] = block.group;
+        // why: A source with no line of its own, the key vault, does not place a head; its line finds
+        // the head where it stands.
+        const heads = ysOf((head === undefined ? [] : sourcesOf(head)).filter((source) => tree.has(source) || sourcesOf(source).length > 0));
+        const at = ysOf([...block.offsets.keys()].flatMap(sourcesOf));
+        const want = heads.length > 0
+            ? Math.min(...heads)
+            : at.length > 0
+                ? (Math.min(...at) + Math.max(...at)) / 2 - block.size / 2
+                : start;
+        return { ...block, want };
+    });
+    keepInside(steps, start, end, row);
+    for (const block of steps) {
+        for (const id of block.group) {
+            places.set(id, { x: INSET + (lefts[2] ?? 0), y: block.top + (block.offsets.get(id) ?? 0) });
+        }
+    }
+    const headings = HEADINGS.map((heading, index) => ({
+        ...heading,
+        x: INSET + (index === 0 ? PAD : (lefts[index] ?? 0)),
+        y: PAD + INSET,
+    }));
+    return { places, row, headings };
+}
+/** How far what the still shows and growing takes away has gone, 0 to 1. */
+export function goneAt(grow) {
+    return ease(grow / LEAVE_TO);
 }
-/** Where a node stands this far grown: a node under a feed keeps its slot under it on the way. */
+/** The key under which the line into a feed under another draws, for a feed that was a row. */
+export const underKey = (feed) => `${feed}^`;
+/** Where a node stands grown: a node under a feed, in its slot under it. */
+function grownPlace(layout, id) {
+    const slot = layout.slots.get(id);
+    if (!slot)
+        return layout.grown.get(id) ?? { x: 0, y: 0 };
+    const holder = grownPlace(layout, slot.holder);
+    return { x: holder.x + slot.across, y: holder.y + slot.down * layout.row };
+}
+/**
+ * Where a node stands this far grown. A node of the still glides to where it stands grown in one
+ * eased move, landing as the drawing reaches it. A node growing adds stands where it stands from
+ * the node it grows from, and moves with it, drifting in along its line as it shows.
+ */
 export function placeAt(layout, id, grow) {
-    const moved = clamp(grow / MOVE_TO);
+    return standAt(layout, id, grow, true);
+}
+/**
+ * Where a node stands this far grown, drifting in or not. What grows from a node keeps to where it
+ * stands, not to its drift, so a node's drift moves nothing else.
+ */
+function standAt(layout, id, grow, drifts) {
+    const moved = glidedAt(layout, id, grow);
+    const glide = (from, to, at) => ({
+        x: between(from.x, to.x, at),
+        y: between(from.y, to.y, at),
+    });
     const slot = layout.slots.get(id);
-    if (slot) {
-        const holder = placeAt(layout, slot.holder, grow);
-        const row = between(ROW, layout.row, moved);
-        return { x: holder.x + slot.across, y: holder.y + slot.down * row };
+    const anchor = layout.anchors.get(id);
+    if (anchor !== undefined) {
+        // why: It keeps to the node it grows from, which may still be on its way, and comes the last
+        // little way along the line that reached it, as a pen's mark settles.
+        const from = standAt(layout, anchor, grow, false);
+        const [own, its] = [grownPlace(layout, id), grownPlace(layout, anchor)];
+        const source = layout.reachedFrom.get(id);
+        const back = source === undefined ? { x: 0, y: 0 } : grownPlace(layout, source);
+        const [dx, dy] = [own.x - back.x, own.y - back.y];
+        const drift = drifts ? DRIFT * (1 - settling(drawnAt(layout, id, grow) ?? 1)) : 0;
+        const away = drift / (Math.hypot(dx, dy) || 1);
+        return { x: from.x + own.x - its.x - dx * away, y: from.y + own.y - its.y - dy * away };
+    }
+    // A row of the still that growing takes away folds into its agent as it goes, and an agent going
+    // is carried down with the tree's last row above it, so no row passes through it.
+    const leaving = layout.leaving.rows.find((row) => rowId(row) === id);
+    if (leaving?.parent !== undefined) {
+        const parent = placeAt(layout, layout.becomes.get(leaving.parent) ?? leaving.parent, grow);
+        return glide(leaving, parent, goneAt(grow));
+    }
+    if (leaving) {
+        const above = layout.rows
+            .filter((row) => (layout.closed.get(rowId(row))?.y ?? Infinity) < leaving.y)
+            .at(-1);
+        const from = above && layout.closed.get(rowId(above));
+        const by = above && from ? placeAt(layout, rowId(above), grow).y - from.y : 0;
+        return { x: leaving.x, y: leaving.y + by };
+    }
+    const from = layout.closed.get(id);
+    if (slot && from) {
+        // why: A node of the still that moves into a slot goes across first, out of the tree's way,
+        // and turns down or up to its slot on the way, in one curve.
+        const to = grownPlace(layout, id);
+        const t = glideAt(layout, id, grow);
+        return {
+            x: between(from.x, to.x, soft(t / (1 - SINK))),
+            y: between(from.y, to.y, soft((t - SINK) / (1 - SINK))),
+        };
+    }
+    const to = grownPlace(layout, id);
+    return glide(from ?? to, to, moved);
+}
+/**
+ * Whether a node stands still this far grown: closed, what the still shows; then each node once it
+ * is out and in its zone, and what it comes out from too. What growing takes away is on its way.
+ */
+export function atRest(layout, id, grow) {
+    if (layout.leaving.rows.some((row) => rowId(row) === id))
+        return grow <= 0;
+    if (layout.leaving.feeds.some((feed) => feed.id === id))
+        return grow <= 0;
+    const anchor = layout.anchors.get(id);
+    if (anchor === undefined) {
+        const glided = glideAt(layout, id, grow);
+        return glided === 0 || glided === 1;
     }
-    const to = layout.grown.get(id) ?? { x: 0, y: 0 };
-    const from = layout.closed.get(id) ?? to;
-    return { x: between(from.x, to.x, moved), y: between(from.y, to.y, moved) };
+    return (drawnAt(layout, id, grow) ?? 1) >= 1 && atRest(layout, anchor, grow);
 }
-/** How far a node growing adds has drawn, 0 to 1; undefined for one the map shows closed. */
+/**
+ * How far a node of the still has gone on its glide into place, 0 to 1: it goes once the drawing
+ * reaches it, or with the frame where the drawing does not reach it.
+ */
+function glideAt(layout, id, grow) {
+    const start = layout.gathers.get(id);
+    if (start === undefined)
+        return clamp(grow / MOVE_TO);
+    const land = layout.lands.get(id) ?? start + GLIDE * layout.pace;
+    return clamp((grow - start) / (land - start));
+}
+/** How far a node of the still has glided, eased. */
+function glidedAt(layout, id, grow) {
+    return soft(glideAt(layout, id, grow));
+}
+/**
+ * How far a node growing adds has shown, 0 to 1, once the drawing has reached it; undefined for
+ * what the map shows closed.
+ */
 export function drawnAt(layout, id, grow) {
-    const start = layout.starts.get(id);
-    return start === undefined ? undefined : clamp((grow - start) / DRAW_SPAN);
-}
-/** Whether two tokens, at their left sides and middles, touch. */
-function touching(a, aWidth, b, bWidth) {
-    return (a.x < b.x + bWidth + CLEAR &&
-        b.x < a.x + aWidth + CLEAR &&
-        Math.abs(a.y - b.y) < 2 * HALF + CLEAR);
-}
-/** The least growing from which a node stands clear of every other, all the way grown. */
-function clearFrom(layout, id, ids, width) {
-    for (let step = SAMPLES; step >= 0; step -= 1) {
-        const grow = step / SAMPLES;
-        const place = placeAt(layout, id, grow);
-        const hit = ids.some((other) => other !== id && touching(place, width(id), placeAt(layout, other, grow), width(other)));
-        if (hit)
-            return (step + 1) / SAMPLES;
-    }
-    return 0;
+    if (!layout.anchors.has(id))
+        return undefined;
+    const reach = layout.reach.get(id) ?? DRAW_FROM;
+    return clamp((grow - reach) / (SHOW * layout.pace) + MET);
+}
+/**
+ * A line's length as the drawing runs it: across, then down, from where its source stands grown to
+ * where its target stands when the pen comes, which for a node of the still is where the still holds it.
+ */
+function lineLength(layout, source, target) {
+    const from = grownPlace(layout, source);
+    const to = (glides(layout, target) && layout.closed.get(target)) || grownPlace(layout, target);
+    return Math.abs(to.x - from.x) + Math.abs(to.y - from.y);
+}
+/**
+ * How far the line from `source` to `target` has drawn, 0 to 1: it runs out from its source at the
+ * drawing's pace once its source stands shown and still, easing out of it and into its end. What the still draws closed is drawn.
+ */
+export function lineAt(layout, source, target, grow) {
+    if (layout.drawnClosed.has(lineKey(source, target)))
+        return 1;
+    const start = layout.leaves.get(source);
+    if (start === undefined)
+        return 1;
+    const span = lineLength(layout, source, target) * layout.pace;
+    return span > 0 ? soft((grow - start) / span) : grow >= start ? 1 : 0;
+}
+/** At most this many lanes are tried in every order. */
+const EVERY_ORDER = 7;
+/** Every order of `items`, the given one first. */
+function* orders(items) {
+    if (items.length <= 1) {
+        yield items;
+        return;
+    }
+    for (const [index, first] of items.entries()) {
+        const rest = items.filter((_, other) => other !== index);
+        for (const tail of orders(rest))
+            yield [first, ...tail];
+    }
+}
+/**
+ * Where two lines' runs cross, one's level runs over the other's lane. A line whose source has a
+ * line down the other lane meets it there, where its own line joins, so it does not cross it.
+ */
+function crossings(a, b) {
+    const across = (level, down) => level.reduce((count, line) => count +
+        down.filter((other) => !down.some((each) => each.source === line.source) &&
+            [
+                [line.from.y, line.from.x, line.lane],
+                [line.to.y, line.lane, line.to.x],
+            ].some(([y = 0, left = 0, right = 0]) => other.lane > Math.min(left, right) &&
+                other.lane < Math.max(left, right) &&
+                y > Math.min(other.from.y, other.to.y) &&
+                y < Math.max(other.from.y, other.to.y))).length, 0);
+    return across(a, b) + across(b, a);
+}
+/**
+ * Each feed's lane, in the gap left of its column: lines into one feed share it, and the lanes go
+ * in the order that crosses fewest.
+ */
+function lanesOf(layout, width) {
+    const lanes = new Map();
+    /** Per column, where a line steps aside in the gap before it: left of every lane there. */
+    const steps = new Map();
+    const grown = (id) => placeAt(layout, id, 1);
+    const root = (id) => {
+        const slot = layout.slots.get(id);
+        return slot ? root(slot.holder) : id;
+    };
+    const rights = (ids) => Math.max(0, ...ids.map((id) => grown(id).x + width(id)));
+    [1, 2].forEach((column) => {
+        const inColumn = layout.feeds.filter((feed) => feed.column === column);
+        const head = inColumn.find((feed) => !layout.slots.has(feed.id));
+        if (!head)
+            return;
+        const left = grown(head.id).x;
+        const before = column === 1
+            ? layout.rows.map(rowId)
+            : layout.feeds.filter((feed) => feed.column === column - 1).map((feed) => feed.id);
+        const space = left - rights(before);
+        // why: As in the studio's map, the lines that share an end run as one: the end most lines share
+        // takes them as its hub, then the end most of the rest share, a feed before a source when even.
+        const links = inColumn.flatMap((feed) => [...feed.from, ...(feed.late ?? [])]
+            .filter((source) => !beside(layout, source, feed))
+            // why: A line level with its feed runs straight across and needs no lane of its own.
+            .filter((source) => Math.abs(grown(source).y - grown(feed.id).y) >= 1)
+            .map((source) => ({ source, feed: feed.id })));
+        const hubs = new Map();
+        let open = links;
+        while (open.length > 0) {
+            const ends = new Map();
+            for (const link of open) {
+                for (const end of [`>${link.feed}`, `${link.source}>`]) {
+                    ends.set(end, [...(ends.get(end) ?? []), link]);
+                }
+            }
+            const feedEnd = (end) => end.startsWith('>');
+            const [hub, taken] = [...ends].reduce((most, each) => each[1].length > most[1].length ||
+                (each[1].length === most[1].length && feedEnd(each[0]) && !feedEnd(most[0]))
+                ? each
+                : most);
+            hubs.set(hub, taken);
+            open = open.filter((link) => !taken.includes(link));
+        }
+        const middle = (group) => group.reduce((sum, link) => sum + grown(link.feed).y, 0) / group.length;
+        const runs = (group, lane) => group.map(({ source, feed }) => ({
+            source,
+            from: { x: grown(source).x + width(source), y: grown(source).y },
+            to: grown(feed),
+            lane,
+        }));
+        // The first lane is the nearest its column; to start, the top hub's.
+        const order = [...hubs.values()].toSorted((a, b) => middle(a) - middle(b));
+        const laneAt = (index) => left - (space * (index + 1)) / (order.length + 1);
+        const cost = () => order.reduce((sum, feed, index) => sum +
+            order
+                .slice(index + 1)
+                .reduce((more, other, offset) => more +
+                crossings(runs(feed, laneAt(index)), runs(other, laneAt(index + 1 + offset))), 0), 0);
+        let best = cost();
+        // why: Few lanes are tried in every order, since swapping neighbours stops where a lane must
+        // pass two others to cross fewer; many, by swapping neighbours.
+        if (order.length <= EVERY_ORDER) {
+            const start = [...order];
+            for (const each of orders(start)) {
+                order.splice(0, order.length, ...each);
+                const next = cost();
+                if (next < best) {
+                    best = next;
+                    start.splice(0, start.length, ...each);
+                }
+            }
+            order.splice(0, order.length, ...start);
+        }
+        for (let pass = 0, swapped = true; swapped && pass < order.length; pass += 1) {
+            swapped = false;
+            for (let index = 0; index + 1 < order.length; index += 1) {
+                const [a, b] = [order[index], order[index + 1]];
+                if (!a || !b)
+                    continue;
+                order[index] = b;
+                order[index + 1] = a;
+                const next = cost();
+                if (next < best) {
+                    best = next;
+                    swapped = true;
+                }
+                else {
+                    order[index] = a;
+                    order[index + 1] = b;
+                }
+            }
+        }
+        order.forEach((group, index) => {
+            const of = root(group[0]?.feed ?? head.id);
+            for (const { source, feed } of group) {
+                lanes.set(lineKey(source, feed), { of, by: grown(of).x - laneAt(index) });
+            }
+        });
+        steps.set(column, { of: head.id, by: space - space / (order.length + 1) / 2 });
+    });
+    return { lanes, jogs: jogsOf(layout, width, lanes, steps) };
+}
+/** Whether `source` stands in `feed`'s own column: its line runs out to the right of the column and back. */
+export function beside(layout, source, feed) {
+    return layout.feeds.some((each) => each.id === source && each.column === feed.column);
+}
+/** The key of the line from `source` into `feed`. */
+export const lineKey = (source, feed) => `${source}>${feed}`;
+/**
+ * Where a line would run level behind a token, or along another feed's last run, it steps half a
+ * row aside in the gap before it and runs on between the rows.
+ */
+function jogsOf(layout, width, lanes, steps) {
+    const grown = (id) => placeAt(layout, id, 1);
+    const laneX = (lane) => grown(lane.of).x - lane.by;
+    const columnOf = new Map(layout.feeds.map((feed) => [feed.id, feed.column]));
+    const band = HALF + CLEAR;
+    const nodes = [...layout.rows.map(rowId), ...layout.feeds.map((feed) => feed.id)];
+    const jogs = new Map();
+    for (const feed of layout.feeds) {
+        const end = grown(feed.id);
+        // What a level run can't pass: other tokens, and the last runs into the feeds beside this one,
+        // but a run from its own source, which it shares.
+        const blocks = [
+            ...nodes.map((id) => ({
+                id,
+                from: undefined,
+                left: grown(id).x,
+                right: grown(id).x + width(id),
+                reach: band,
+            })),
+            ...layout.feeds
+                .filter((other) => other.column === feed.column && other.id !== feed.id)
+                .flatMap((other) => [...other.from, ...(other.late ?? [])].flatMap((source) => {
+                const its = lanes.get(lineKey(source, other.id));
+                return its
+                    ? [
+                        {
+                            id: other.id,
+                            from: source,
+                            left: laneX(its),
+                            right: grown(other.id).x,
+                            reach: HALF,
+                        },
+                    ]
+                    : [];
+            })),
+        ];
+        for (const source of [...feed.from, ...(feed.late ?? [])]) {
+            if (beside(layout, source, feed))
+                continue;
+            const lane = lanes.get(lineKey(source, feed.id));
+            if (!lane)
+                continue;
+            const rail = laneX(lane);
+            const aside = [];
+            let x = grown(source).x + width(source);
+            let y = grown(source).y;
+            for (let tries = 0; tries < 3; tries += 1) {
+                const hit = blocks
+                    .filter((block) => block.id !== source &&
+                    block.id !== feed.id &&
+                    block.from !== source &&
+                    block.right > x &&
+                    block.left < rail &&
+                    Math.abs(grown(block.id).y - y) < block.reach)
+                    .toSorted((a, b) => a.left - b.left)[0];
+                if (!hit)
+                    break;
+                const step = steps.get(columnOf.get(hit.id) ?? 0);
+                if (!step || laneX(step) <= x)
+                    break;
+                const side = end.y >= grown(hit.id).y ? 1 : -1;
+                aside.push({ lane: step, near: hit.id, side });
+                x = laneX(step);
+                y = grown(hit.id).y + (side * layout.row) / 2;
+            }
+            if (aside.length > 0)
+                jogs.set(lineKey(source, feed.id), aside);
+        }
+    }
+    return jogs;
+}
+/**
+ * What each node growing adds comes out from under: a row, the row above it; a feed under another,
+ * the one above it there, else that one; any other feed, the first it has a line from, else the
+ * first under it (or, when that comes out too, the first that one has a line from), else the feed
+ * before it.
+ */
+function anchorsOf(rows, feeds, slots, unfolds, few) {
+    const anchors = new Map();
+    const ids = rows.map(rowId);
+    for (const id of unfolds) {
+        const above = ids[ids.indexOf(id) - 1];
+        if (above !== undefined)
+            anchors.set(id, above);
+    }
+    for (const [index, feed] of feeds.entries()) {
+        if (few.has(feed.id))
+            continue;
+        const under = [...slots].find(([, slot]) => slot.holder === feed.id)?.[0];
+        const slot = slots.get(feed.id);
+        const above = slot &&
+            [...slots].find(([, each]) => each.holder === slot.holder && each.down === slot.down - 1)?.[0];
+        const first = under === undefined || few.has(under)
+            ? under
+            : feeds.find((each) => each.id === under)?.from[0];
+        const anchor = above ?? slot?.holder ?? feed.from[0] ?? first ?? feeds[index - 1]?.id ?? ids[0];
+        if (anchor !== undefined)
+            anchors.set(feed.id, anchor);
+    }
+    return anchors;
+}
+/**
+ * Closed, the still: the rows down the map, a gap before each agent after the first, and beside
+ * them, at `x`, the feeds it shows: the runs one under another, a row's gap between them, centred
+ * on the rows.
+ */
+function stillPlaces(rows, few, x) {
+    const ids = new Set(rows.map(rowId));
+    const runs = new Map();
+    for (const feed of few) {
+        const source = feed.from.find((id) => ids.has(id));
+        if (source !== undefined)
+            runs.set(source, [...(runs.get(source) ?? []), feed]);
+    }
+    let y = PAD + HALF;
+    const placed = rows.map((row, index) => {
+        if (index > 0 && row.parent === undefined)
+            y += AGENT_GAP;
+        const at = { ...row, y };
+        y += ROW;
+        return at;
+    });
+    const own = placed.flatMap((row) => {
+        const run = runs.get(rowId(row)) ?? [];
+        return run.length > 0 ? [run] : [];
+    });
+    // The runs one under another, a row's gap between them, their middle level with the rows' middle.
+    const slots = own.reduce((sum, run) => sum + run.length + 1, -1);
+    const [first, last] = [placed[0]?.y ?? 0, placed.at(-1)?.y ?? 0];
+    let top = (first + last) / 2 - ((slots - 1) * ROW) / 2;
+    const feeds = new Map();
+    for (const run of own) {
+        for (const [step, feed] of run.entries())
+            feeds.set(feed.id, { x, y: top + step * ROW });
+        top += (run.length + 1) * ROW;
+    }
+    return { rows: placed, feeds };
+}
+/** Closed, the rows and feeds given a place, each where it is given. */
+function givenPlaces(rows, feeds, given) {
+    return {
+        rows: rows.map((row) => ({ ...row, ...given.get(rowId(row)) })),
+        feeds: new Map(feeds.flatMap((feed) => {
+            const place = given.get(feed.id);
+            return place ? [[feed.id, place]] : [];
+        })),
+    };
+}
+/**
+ * Closed, the x each row's lines run down to its feeds, together: left of the feeds, a lane
+ * further left for each trunk from a row above it that it would run beside, so two rows' lines meet
+ * only at a feed both have.
+ */
+function trunksOf(lines, closed, x) {
+    const spans = new Map();
+    for (const { source, feed } of lines) {
+        const ys = [closed.get(source)?.y, closed.get(feed)?.y].filter((y) => y !== undefined);
+        const [top, bottom] = spans.get(source) ?? [Infinity, -Infinity];
+        spans.set(source, [Math.min(top, ...ys), Math.max(bottom, ...ys)]);
+    }
+    const taken = [];
+    const trunks = new Map();
+    // why: A lower row's trunk stands further left, so its line in runs short of the trunks above.
+    const fromTop = [...spans].sort(([, [a]], [, [b]]) => a - b);
+    for (const [source, [top, bottom]] of fromTop) {
+        let lane = 0;
+        while (taken.some((each) => each.lane === lane && each.top <= bottom && top <= each.bottom))
+            lane += 1;
+        taken.push({ lane, top, bottom });
+        trunks.set(source, x - TRUNK_GAP - lane * LANE);
+    }
+    return trunks;
+}
+/** Every line the map draws, from the node it leaves to the node at its end. */
+function edgesOf(rows, feeds) {
+    return [
+        ...rows.flatMap((each) => (each.parent === undefined ? [] : [[each.parent, rowId(each)]])),
+        ...feeds.flatMap((feed) => [
+            ...[...feed.from, ...(feed.late ?? [])].map((source) => [source, feed.id]),
+            ...(feed.under === undefined ? [] : [[feed.under, feed.id]]),
+        ]),
+    ];
+}
+/** Whether a node is of the still and goes somewhere growing, so it glides when the drawing comes. */
+function glides(layout, id) {
+    const closed = layout.closed.get(id);
+    if (!closed || layout.anchors.has(id))
+        return false;
+    const grown = grownPlace(layout, id);
+    return Math.hypot(grown.x - closed.x, grown.y - closed.y) > 1;
+}
+/**
+ * Settles a node the drawing has reached: when it stands ready, and when its lines leave. A node
+ * growing adds is well on its way to shown; a node of the still that moves glides into place once
+ * its line has reached it, the line coming with it.
+ */
+function settle(layout, runs, id) {
+    const ran = runs.ran.get(id) ?? 0;
+    let ready = ran + (layout.anchors.has(id) ? SHOW * (SHOWN - MET) : 0);
+    if (runs.from.has(id) && glides(layout, id)) {
+        runs.gather.set(id, ran);
+        ready = ran + GLIDE;
+    }
+    runs.ready.set(id, ready);
+    runs.leave.set(id, ready + PAUSE);
+}
+/**
+ * The pen's runs to every node, by the shortest run of line from the tree's agents.
+ */
+function runsOf(layout, edges) {
+    const runs = {
+        ran: new Map(),
+        from: new Map(),
+        ready: new Map(),
+        leave: new Map(),
+        gather: new Map(),
+        land: new Map(),
+    };
+    const queue = layout.rows.filter((each) => each.parent === undefined).map(rowId);
+    for (const id of queue)
+        runs.ran.set(id, 0);
+    while (queue.length > 0) {
+        queue.sort((a, b) => (runs.ran.get(a) ?? 0) - (runs.ran.get(b) ?? 0));
+        const id = queue.shift();
+        if (runs.leave.has(id))
+            continue;
+        settle(layout, runs, id);
+        for (const [source, target] of edges.filter(([each]) => each === id)) {
+            const to = (runs.leave.get(id) ?? 0) + lineLength(layout, source, target);
+            if (to >= (runs.ran.get(target) ?? Infinity))
+                continue;
+            runs.ran.set(target, to);
+            runs.from.set(target, source);
+            queue.push(target);
+        }
+    }
+    reachUnlined(layout, runs);
+    return runs;
+}
+/** What the pen still has not reached is reached from what it grows from, once that node's lines leave. */
+function reachUnlined(layout, runs) {
+    for (const id of layout.anchors.keys()) {
+        if (runs.ran.has(id))
+            continue;
+        let anchor = layout.anchors.get(id);
+        while (anchor !== undefined && !runs.ran.has(anchor))
+            anchor = layout.anchors.get(anchor);
+        if (anchor !== undefined)
+            runs.from.set(id, anchor);
+        const leaves = anchor === undefined ? 0 : (runs.leave.get(anchor) ?? 0);
+        runs.ran.set(id, leaves + (anchor === undefined ? 0 : lineLength(layout, anchor, id)));
+        settle(layout, runs, id);
+    }
+}
+/**
+ * Nodes of the still a line reaches together glide as one, once their line reaches them, or sooner
+ * where something would show where one of them stands: they are on their way as it comes, and their
+ * line catches them up.
+ */
+function makeRoom(layout, runs, width) {
+    const box = (id, place) => ({
+        left: place.x - ROOM,
+        right: place.x + width(id) + ROOM,
+        top: place.y - HALF - CLEAR,
+        bottom: place.y + HALF + CLEAR,
+    });
+    const meet = (a, b) => a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
+    const comes = (id) => runs.gather.get(id) ?? runs.ran.get(id) ?? 0;
+    const coming = [...new Set([...layout.anchors.keys(), ...layout.closed.keys()])].map((id) => ({
+        id,
+        at: comes(id) - (layout.anchors.has(id) ? SHOW * MET : 0),
+        edges: box(id, grownPlace(layout, id)),
+    }));
+    const groups = Map.groupBy(runs.gather.keys(), (id) => runs.from.get(id) ?? id);
+    for (const members of groups.values()) {
+        const own = Math.min(...members.map(comes));
+        const before = members.flatMap((id) => {
+            const stands = box(id, layout.closed.get(id));
+            return coming
+                .filter((each) => !members.includes(each.id) && each.at < own && meet(each.edges, stands))
+                .map((each) => each.at - GLIDE * AHEAD);
+        });
+        const start = Math.min(own, ...before);
+        // why: What would land on it with the frame is made room for with the frame. Gone sooner, it
+        // goes slower, and lands as its line reaches it.
+        for (const id of members) {
+            const reached = runs.ran.get(id) ?? 0;
+            if (start <= 0)
+                runs.gather.delete(id);
+            else
+                runs.gather.set(id, start);
+            if (start < own)
+                runs.land.set(id, Math.max(start + GLIDE, reached + GLIDE * LAND));
+        }
+    }
+}
+/**
+ * When the drawing reaches each node, when each node's lines leave it, and when each node of the
+ * still glides into place.
+ *
+ * why: The map draws out from the tree's agents as one pen would, at an even pace, and nothing
+ * moves before the pen comes to it: down the tree to each row, and along each line to what it
+ * feeds, so a node is reached by the shortest run of line to it. A node shows as its line reaches
+ * it; what the still holds stands until its line reaches it, then glides into place with it.
+ */
+function drawingOf(layout, width) {
+    const edges = edgesOf(layout.rows, layout.feeds);
+    // why: What no line runs into is reached from what it grows from, as the pen goes, so the lines
+    // it sends out run in their turn with the rest.
+    const lined = new Set(edges.map(([, target]) => target));
+    const jumps = [...layout.anchors]
+        .filter(([id]) => !lined.has(id))
+        .map(([id, anchor]) => [anchor, id]);
+    const runs = runsOf(layout, [...edges, ...jumps]);
+    makeRoom(layout, runs, width);
+    const ends = edges
+        .filter(([source]) => runs.leave.has(source))
+        .map(([source, target]) => (runs.leave.get(source) ?? 0) + lineLength(layout, source, target));
+    const farthest = Math.max(1, ...[...runs.ran.values()].map((at) => at + SHOW), ...ends);
+    const pace = (1 - DRAW_FROM) / Math.max(farthest, ...runs.ready.values());
+    const grown = (runs) => new Map([...runs].map(([id, run]) => [id, DRAW_FROM + run * pace]));
+    return {
+        reach: grown(runs.ran),
+        reachedFrom: runs.from,
+        leaves: grown(runs.leave),
+        gathers: grown(runs.gather),
+        lands: grown(runs.land),
+        pace,
+    };
 }
 /**
  * The tree and what feeds it, closed and grown, for tokens this wide: grown, it fills `box` when
  * one is given.
  */
-export function treeMapLayout(workspace, agents, width, box) {
+export function treeMapLayout(workspace, agents, width, box, 
+/** The agents the map shows closed, when not the tree's. */
+still, 
+/** Where the tokens the map shows closed stand, by id, when not where the still puts them. */
+given) {
     const rows = rowsOf(workspace, agents);
     const feeds = feedsOf(workspace, rows);
-    // Closed, the first column's heads stand beside the tree, each level with the first row it
-    // joins or under the one before.
-    const fewFeeds = feeds.filter((feed) => feed.column === 1 && feed.under === undefined);
-    const few = new Set(fewFeeds.map((feed) => feed.id));
-    const feedX = Math.max(0, ...rows.map((row) => row.x + width(rowId(row)))) + GAP;
-    const closed = new Map(rows.map((row) => [rowId(row), row]));
-    const rowY = new Map(rows.map((row) => [rowId(row), row.y]));
-    let below = Number.NEGATIVE_INFINITY;
-    for (const feed of fewFeeds) {
-        const y = Math.max(rowY.get(feed.into[0] ?? '') ?? below, below);
-        closed.set(feed.id, { x: feedX, y });
-        below = y + ROW;
-    }
-    const slots = slotsOf(feeds, width);
-    const { places, row } = grownPlaces(rows, feeds, slots, width, box);
+    // Closed, the still: what is given, else its own agents and rows, or the tree's, and what feeds them.
+    const stillRows = given
+        ? rows.filter((row) => given.has(rowId(row)))
+        : still
+            ? rowsOf(workspace, still)
+            : rows;
+    const stillFeeds = given
+        ? feeds.filter((feed) => given.has(feed.id))
+        : still
+            ? feedsOf(workspace, stillRows)
+            : feeds;
+    const grownRows = new Set(rows.map(rowId));
+    const grownFeeds = new Set(feeds.map((feed) => feed.id));
+    // why: An agent of the still that the tree draws as an agent tool's agent glides into it.
+    const becomes = new Map();
+    for (const row of stillRows) {
+        if (row.parent !== undefined || grownRows.has(rowId(row)))
+            continue;
+        const spec = workspace.toolSpecs.find((each) => each.agentKey === row.agent);
+        const feed = spec ? `tool:${spec.key}/agent` : undefined;
+        if (feed && grownFeeds.has(feed))
+            becomes.set(rowId(row), feed);
+    }
+    // Closed, each agent's models and tools stand beside the tree, those with a line from a row of it.
+    const feedX = Math.max(0, ...stillRows.map((row) => row.x + width(rowId(row)))) + GAP;
+    const placed = given
+        ? givenPlaces(stillRows, stillFeeds, given)
+        : stillPlaces(stillRows, CLOSED.flatMap((kind) => stillFeeds.filter((feed) => feed.kind === kind)), feedX);
+    const few = new Set([...placed.feeds.keys(), ...becomes.values()]);
+    const closed = new Map(placed.rows.map((row) => [rowId(row), row]));
+    for (const [row, feed] of becomes) {
+        const place = closed.get(row);
+        if (place)
+            closed.set(feed, place);
+    }
+    // why: A row the still does not show unfolds from under the row above it, so it moves with the
+    // tree and shows as it comes apart, not into a gap opened for it.
+    const unfolds = rows.map(rowId).filter((id) => !closed.has(id));
+    rows.forEach((row, index) => {
+        if (closed.has(rowId(row)))
+            return;
+        const above = rows
+            .slice(0, index)
+            .map((each) => closed.get(rowId(each)))
+            .findLast((place) => place !== undefined);
+        if (above)
+            closed.set(rowId(row), { x: above.x, y: above.y });
+    });
+    for (const [id, place] of placed.feeds)
+        closed.set(id, place);
+    const slots = slotsOf(feeds);
+    const { places, row, headings } = grownPlaces(rows, feeds, slots, width, box);
+    // What the still shows and the tree does not: it stays where it stood closed as it goes.
+    const shownClosed = (feed) => few.has(feed.id);
+    const stillIds = new Set(stillRows.map(rowId));
+    const stillLines = stillFeeds
+        .filter(shownClosed)
+        .flatMap((feed) => feed.from
+        .filter((source) => stillIds.has(source))
+        .map((source) => ({ source, feed: feed.id })));
+    const grownLines = new Set(feeds.flatMap((feed) => feed.from.map((source) => lineKey(source, feed.id))));
+    const leaving = {
+        rows: placed.rows.filter((each) => !grownRows.has(rowId(each)) && !becomes.has(rowId(each))),
+        feeds: stillFeeds.filter((feed) => few.has(feed.id) && !grownFeeds.has(feed.id)),
+        lines: stillLines.filter((line) => !grownLines.has(lineKey(line.source, line.feed))),
+    };
+    for (const each of leaving.rows)
+        places.set(rowId(each), closed.get(rowId(each)) ?? each);
+    for (const feed of leaving.feeds) {
+        const place = closed.get(feed.id);
+        if (place)
+            places.set(feed.id, place);
+    }
     const layout = {
         rows,
         feeds,
@@ -343,15 +1437,23 @@ export function treeMapLayout(workspace, agents, width, box) {
         closed,
         grown: places,
         row,
+        headings,
         slots,
-        starts: new Map(),
+        reach: new Map(),
+        reachedFrom: new Map(),
+        leaves: new Map(),
+        gathers: new Map(),
+        lands: new Map(),
+        pace: 0,
+        drawnClosed: new Set(stillLines.map((line) => lineKey(line.source, line.feed))),
+        anchors: anchorsOf(rows, feeds, slots, unfolds, few),
+        lanes: new Map(),
+        jogs: new Map(),
+        leaving,
+        becomes,
+        trunks: trunksOf(stillLines, closed, feedX),
     };
-    // What growing adds draws in its columns' order, each once it stands clear.
-    const order = feeds.filter((feed) => !few.has(feed.id));
-    const ids = [...rows.map(rowId), ...feeds.map((feed) => feed.id)];
-    order.forEach((feed, index) => {
-        const turn = DRAW_FROM + ((DRAW_TO - DRAW_SPAN - DRAW_FROM) * index) / Math.max(order.length - 1, 1);
-        layout.starts.set(feed.id, Math.max(turn, clearFrom(layout, feed.id, ids, width)));
-    });
+    Object.assign(layout, lanesOf(layout, width));
+    Object.assign(layout, drawingOf(layout, width));
     return layout;
 }