@theoremjs/studio 0.3.4-next.484.g20d8b9d → 0.3.4-next.522.g9e684cd

package/ui/map-token.css

@@ -9,3 +9,28 @@
   stroke: var(--color-border-emphasized);
   stroke-width: 1.5;
 }
+
+/* A line drawing in runs out from the node it leaves, as the loader's map draws: its own pace, not
+   the scroll's. */
+.map-line-drawing {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: map-line-draw var(--duration-medium, 240ms) var(--ease-standard, ease-out) forwards;
+}
+
+/* A token drawing in shows over the same span. */
+.map-token-drawing {
+  animation: map-draw-in var(--duration-medium, 240ms) var(--ease-standard, ease-out) both;
+}
+
+@keyframes map-line-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes map-draw-in {
+  from {
+    opacity: 0;
+  }
+}

package/ui/node-icon.js

@@ -1,5 +1,5 @@
 import { IconTool } from '@tabler/icons-react';
-import { IconTypeSafe, modelFamilyMark } from "./brand-icons.js";
+import { modelFamilyMark } from "./brand-icons.js";
 import { FACET_ICON } from "./lib/facet-icons.js";
 import { PROFILE_TYPE_ICON, toolTypeIcon } from "./lib/type-icons.js";
 /** A node's icon; Identity shows the profile type's once one is picked. */
@@ -11,9 +11,6 @@ export function nodeIcon(draft, ref) {
         const binding = draft.modelBindings.find((each) => each.key === ref.key);
         if (!binding)
             return FACET_ICON.modelBinding;
-        const definition = draft.providers.find((each) => each.id === binding.provider)?.definition;
-        if (definition === 'typesafe')
-            return IconTypeSafe;
         return modelFamilyMark(binding.apiId) ?? FACET_ICON.modelBinding;
     }
     if (ref.facet !== 'toolSpec')

package/ui/profile-editor.js

@@ -27,7 +27,7 @@ import { IconAbc, IconAdjustmentsHorizontal, IconAlertTriangle, IconAlignLeft, I
 import { ATTACHMENT_ACCEPT_MIMES, CONTINUE_STOP_KINDS, fieldMeta, GOOGLE_BUILTIN_TOOLS, GOOGLE_IMAGE_ASPECT_RATIOS, GOOGLE_IMAGE_OUTPUT_MIMES, GOOGLE_IMAGE_RESOLUTIONS, GOOGLE_SPEECH_VOICES, HTTP_METHODS, IMAGE_ATTACHMENT_ACCEPT_MIMES, LABEL_KEYS, labelDefault, PROFILE_HANDLE_MAX_CHARS, PROFILE_ID_MAX_CHARS, profileGraphFacet, THINKING_LEVELS, VOICE_ACCEPT_MIMES, } from '@theoremjs/agents';
 import { BOUNDARIES, BOUNDARY_META, DETECT_ACTION_META, DETECT_ACTIONS, DETECTOR_BOUNDARIES, DETECTOR_GROUP_META, DETECTOR_GROUPS, DETECTOR_META, DETECTORS, TOOL_BOUNDARIES, TOOL_KINDS, } from '@theoremjs/agents/guardrails';
 import { createContext, lazy, Suspense, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, } from 'react';
-import { acceptSections, agentToolTarget, bindingSlots, COMPACTION_DRAFT_DEFAULTS, defaultEffortRequired, defaultModelRequired, definitionOf, draftAllows, draftKey, expandAccept, INLINE_LABELS, includableFacets, includeFacet, inputLimitsRequired, isGoogleRoute, isOpenRouterRoute, kernelDefinitions, LOCAL_PROVIDER_ID, lentCompression, modelBindingNodeId, modelRoute, modelSlots, newCriteria, newDecisionImage, newDecisionQuestion, newModelBinding, newOwnDetector, newPattern, newToolSpec, nextAccept, onStudioLocal, optionAt, plantsCanary, protocolOptionFields, removeModelBinding, STUDIO_TRACE_DESTINATION, sampleToolInput, sectionNote, servedProtocols, servesProfileType, setProfileType, studioNetworkNote, studioNodeRef, studioRunsProvider, studioTaintNote, takesContinueInstruction, toolSpecNodeId, updateModelBinding, withOption, writeAsk, } from "../mod.js";
+import { acceptSections, agentToolTarget, bindingSlots, COMPACTION_DRAFT_DEFAULTS, defaultEffortRequired, defaultModelRequired, definitionOf, draftAllows, draftKey, expandAccept, INLINE_LABELS, includableFacets, includeFacet, inputLimitsRequired, isGoogleRoute, isOpenRouterRoute, kernelDefinitions, LOCAL_PROVIDER_ID, lentCompression, MODEL_LIMITS, modelBindingNodeId, modelRoute, modelSlots, newCriteria, newDecisionImage, newDecisionQuestion, newModelBinding, newOwnDetector, newPattern, newToolSpec, nextAccept, onStudioLocal, optionAt, plantsCanary, protocolOptionFields, removeModelBinding, STUDIO_TRACE_DESTINATION, sampleToolInput, sectionNote, servedProtocols, servesProfileType, setProfileType, studioNetworkNote, studioNodeRef, studioRunsProvider, studioTaintNote, TIMER_MAX_MS, takesContinueInstruction, toolSpecNodeId, updateModelBinding, withOption, writeAsk, } from "../mod.js";
 import { AddProviderButton } from "./add-provider.js";
 import { IconGoogle, IconOpenAi, IconOpenRouter, IconTypeSafe } from "./brand-icons.js";
 import { ChoiceRow, InspectorGroupTitle, InspectorRow, InspectorSection, ListRow, NamesRow, NumberRow, OriginLine, SegmentedRow, SetInCode, SliderRow, SwitchRow, TextAreaRow, TextRow, } from "./inspector.js";
@@ -245,6 +245,11 @@ function DecisionModelEditor({ draft, setDraft, bindingKey, }) {
                     set({ timeoutMs });
                 } })] }));
 }
+function LimitsSection({ binding, set }) {
+    return (_jsx(InspectorSection, { title: "Limits", path: "models.*.limits", children: MODEL_LIMITS.map(({ name, label, units, isTimer }) => (_jsx(NumberRow, { label: label, path: `models.*.limits.${name}`, units: units, field: `limits.${name}`, value: binding.limits?.[name] ?? null, min: 1, max: isTimer ? TIMER_MAX_MS : undefined, isIntegerOnly: true, onChange: (value) => {
+                set({ limits: { ...binding.limits, [name]: value } });
+            } }, name))) }));
+}
 /** A key slot, chosen from the slots the keys panel holds; each says which service its key is for. */
 export function SlotRow({ label, path, field, value, isRequired, given, onChange, }) {
     const connection = useContext(LocalConnection);
@@ -550,7 +555,7 @@ function ModelBindingEditor({ draft, setDraft, bindingKey, onSelect, }) {
     const set = (change) => {
         setDraft((current) => updateModelBinding(current, bindingKey, change));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(ModelSection, { draft: draft, binding: binding, type: type, set: set }), type !== 'embedding' && _jsx(GenerationSection, { binding: binding, set: set }), _jsx(ProtocolOptionsSection, { providers: draft.providers, binding: binding, type: type, set: set }), type === 'text' && _jsx(CompactionSection, { binding: binding, set: set }), type !== 'embedding' && _jsx(EffortsSection, { binding: binding, set: set }), draft.modelBindings.length > 1 && (_jsx(Section, { variant: "transparent", padding: 3, children: _jsx(Button, { label: "Remove model", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconTrash, size: "sm" }), onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(ModelSection, { draft: draft, binding: binding, type: type, set: set }), type !== 'embedding' && _jsx(GenerationSection, { binding: binding, set: set }), _jsx(ProtocolOptionsSection, { providers: draft.providers, binding: binding, type: type, set: set }), _jsx(LimitsSection, { binding: binding, set: set }), type === 'text' && _jsx(CompactionSection, { binding: binding, set: set }), type !== 'embedding' && _jsx(EffortsSection, { binding: binding, set: set }), draft.modelBindings.length > 1 && (_jsx(Section, { variant: "transparent", padding: 3, children: _jsx(Button, { label: "Remove model", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconTrash, size: "sm" }), onClick: () => {
                         setDraft((current) => removeModelBinding(current, bindingKey));
                         onSelect('models');
                     } }) }))] }));
@@ -1966,7 +1971,9 @@ function HttpRequestSection({ tool, set }) {
                     set({ endpoint });
                 } }), _jsx(SegmentedRow, { label: "Method", path: "registerTool.method", field: "method", value: tool.method ?? HTTP_METHODS[0], segments: METHOD_SEGMENTS, onChange: (method) => {
                     set({ method });
-                } }), _jsx(HeadersRow, { tool: tool, set: set })] }));
+                } }), _jsx(HeadersRow, { tool: tool, set: set }), _jsx(NumberRow, { label: "Max response", path: "registerTool.maxResponseBytes", units: "bytes", field: "maxResponseBytes", value: tool.maxResponseBytes ?? null, min: 1, isIntegerOnly: true, onChange: (maxResponseBytes) => {
+                    set({ maxResponseBytes });
+                } })] }));
 }
 function HttpMappingSection({ tool, set }) {
     return (_jsxs(InspectorSection, { title: "Mapping", path: "registerTool.mapping", children: [_jsx(NamesRow, { label: "Path", path: "registerTool.mapping.pathParams", field: "pathParams", value: tool.pathParams ?? [], placeholder: "Names in {braces}", onChange: (pathParams) => {
@@ -1992,7 +1999,16 @@ function McpServerSection({ tool, set }) {
                     set({ serverUrl });
                 } }), _jsx(TextRow, { label: "Remote tool", path: "registerTool.mcpToolName", field: "mcpToolName", isRequired: true, value: tool.mcpToolName ?? '', placeholder: "search_flights", onChange: (mcpToolName) => {
                     set({ mcpToolName });
-                } }), _jsx(HeadersRow, { tool: tool, set: set })] }));
+                } }), _jsx(HeadersRow, { tool: tool, set: set }), _jsx(NumberRow, { label: "Max response", path: "registerTool.maxResponseBytes", units: "bytes", field: "maxResponseBytes", value: tool.maxResponseBytes ?? null, min: 1, isIntegerOnly: true, onChange: (maxResponseBytes) => {
+                    set({ maxResponseBytes });
+                } })] }));
+}
+function McpSessionSection({ tool, set }) {
+    return (_jsxs(InspectorSection, { title: "Session", path: "registerTool.session", children: [_jsx(NumberRow, { label: "Idle", path: "registerTool.session.idleMs", units: "ms", field: "sessionIdleMs", value: tool.sessionIdleMs ?? null, min: 1, isIntegerOnly: true, onChange: (sessionIdleMs) => {
+                    set({ sessionIdleMs });
+                } }), _jsx(NumberRow, { label: "Max", path: "registerTool.session.max", units: "sessions", field: "sessionMax", value: tool.sessionMax ?? null, min: 1, isIntegerOnly: true, onChange: (sessionMax) => {
+                    set({ sessionMax });
+                } })] }));
 }
 /** Where an authenticated tool's credential comes from, how it's sent, and what signed out does. */
 function AuthCredentialRows({ tool, authType, set, }) {
@@ -2067,7 +2083,7 @@ function ToolSpecEditor({ draft, setDraft, toolKey, onSelect, }) {
         }));
     };
     const remote = tool.toolType === 'http' || tool.toolType === 'mcp';
-    return (_jsxs(_Fragment, { children: [_jsx(ToolSection, { draft: draft, setDraft: setDraft, tool: tool, set: set }), _jsx(ContractSection, { tool: tool, set: set }), _jsx(ActivitySection, { tool: tool, set: set }), tool.toolType === 'function' && _jsx(StubSection, { tool: tool, set: set }), tool.toolType === 'http' && _jsx(HttpSections, { tool: tool, set: set }), tool.toolType === 'agent' && workspace && (_jsx(AgentSection, { tool: tool, set: set, workspace: workspace })), tool.toolType === 'mcp' && _jsx(McpServerSection, { tool: tool, set: set }), remote && _jsx(AuthSection, { tool: tool, set: set }), remote && _jsx(ToolTest, { tool: tool, guardrails: draft.guardrails }, tool.key), _jsx(PolicySection, { draft: draft, tool: tool, set: set }), _jsx(Section, { variant: "transparent", padding: 3, children: _jsx(Button, { label: "Remove tool", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconTrash, size: "sm" }), onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(ToolSection, { draft: draft, setDraft: setDraft, tool: tool, set: set }), _jsx(ContractSection, { tool: tool, set: set }), _jsx(ActivitySection, { tool: tool, set: set }), tool.toolType === 'function' && _jsx(StubSection, { tool: tool, set: set }), tool.toolType === 'http' && _jsx(HttpSections, { tool: tool, set: set }), tool.toolType === 'agent' && workspace && (_jsx(AgentSection, { tool: tool, set: set, workspace: workspace })), tool.toolType === 'mcp' && _jsx(McpServerSection, { tool: tool, set: set }), tool.toolType === 'mcp' && _jsx(McpSessionSection, { tool: tool, set: set }), remote && _jsx(AuthSection, { tool: tool, set: set }), remote && _jsx(ToolTest, { tool: tool, guardrails: draft.guardrails }, tool.key), _jsx(PolicySection, { draft: draft, tool: tool, set: set }), _jsx(Section, { variant: "transparent", padding: 3, children: _jsx(Button, { label: "Remove tool", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconTrash, size: "sm" }), onClick: () => {
                         setDraft((current) => removeToolSpec(current, toolKey, tool.toolName));
                         onSelect('tools');
                     } }) })] }));
@@ -2531,7 +2547,7 @@ function DecisionImageRow({ image, index, onRename, onRemove, }) {
     const reference = `<${image.name}>`;
     return (_jsxs(InspectorRow, { label: label, path: "decision.images.name", hasIssue: status !== undefined, children: [_jsx(Thumbnail, { src: `data:${image.mimeType};base64,${image.data}`, label: `Questions write it as ${reference}` }), _jsx(StackItem, { size: "fill", children: _jsx(TextInput, { label: `${label} name`, isLabelHidden: true, size: "sm", status: status, value: image.name, onChange: onRename }) }), _jsx(Tooltip, { content: `Remove ${reference}. A question that names it then has no image to read.`, children: _jsx(IconButton, { label: `Remove ${reference}`, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconX, size: "sm" }), onClick: onRemove }) })] }));
 }
-/** The pictures every decision sends, each under the name its questions write, and a drop to add more. */
+/** The pictures a decision can send, each under the name its questions write, and a drop to add more. */
 function DecisionImagesSection({ draft, setDraft }) {
     const keys = useLentKeys();
     const { reading, changeAction } = useFilesRead(async (picked) => {

package/ui/read-map.css

@@ -11,20 +11,9 @@
   pointer-events: none;
 }
 
-/* The line draws in from the node it leaves. */
-.read-map-line {
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
-  animation: read-map-line-in var(--duration-medium, 240ms) var(--ease-standard, ease-out) forwards;
-}
-
 .read-map-dot {
   fill: var(--color-text-secondary);
-  animation: read-map-in var(--duration-fast, 120ms) var(--ease-standard, ease-out) both;
-}
-
-.read-map-node {
-  animation: read-map-in var(--duration-medium, 240ms) var(--ease-standard, ease-out) both;
+  animation: map-draw-in var(--duration-fast, 120ms) var(--ease-standard, ease-out) both;
 }
 
 .read-map-foot {
@@ -34,15 +23,3 @@
   gap: 16px;
   justify-content: space-between;
 }
-
-@keyframes read-map-line-in {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes read-map-in {
-  from {
-    opacity: 0;
-  }
-}

package/ui/read-map.js

@@ -4,6 +4,7 @@ import { IconFileCode, IconFolder } from '@tabler/icons-react';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { mapCurve } from "../map-line.js";
 import { readMap } from "./lib/read-map.js";
+import { ease } from "./lib/tree-map-layout.js";
 import { AGENT_ICON, profileTypeIcon, toolTypeIcon } from "./lib/type-icons.js";
 import { MapToken, useTokenWidths } from "./map-token.js";
 import './read-map.css';
@@ -15,6 +16,8 @@ const LAG_MS = 500;
 const CATCH_UP_MS = 900;
 /** The map shows for at least this long, so a quick read can still be seen. */
 const SHOWN_MS = 2000;
+/** How long a node already drawn takes to glide to where a new folder moves it. */
+const GLIDE_MS = 240;
 /** The panel's own padding, step 4. */
 const PAD = 16;
 const ROW = 30;
@@ -127,6 +130,50 @@ function lineTo(from, fromWidth, to, dots) {
         dots: Array.from({ length: dots }, (_, index) => curve.at((index + 1) / (dots + 1))),
     };
 }
+/** Where a glide stands at a time: eased from where it was to where it goes. */
+function glideAt({ from, to, at }, now) {
+    const part = ease(Math.min(1, (now - at) / GLIDE_MS));
+    return { x: from.x + (to.x - from.x) * part, y: from.y + (to.y - from.y) * part };
+}
+/**
+ * The nodes where they stand now: a node drawn shows where it is laid out, and one a later folder
+ * moves glides there from where it stood, its lines with it, rather than jumping.
+ */
+function useGlided(placed) {
+    const glides = useRef(new Map());
+    const [now, setNow] = useState(() => performance.now());
+    useLayoutEffect(() => {
+        const at = performance.now();
+        let moving = false;
+        for (const { node, x, y } of placed) {
+            const last = glides.current.get(node.id);
+            if (last && last.to.x === x && last.to.y === y) {
+                moving ||= at - last.at < GLIDE_MS;
+                continue;
+            }
+            glides.current.set(node.id, {
+                from: last ? glideAt(last, at) : { x, y },
+                to: { x, y },
+                at: last ? at : 0,
+            });
+            moving ||= last !== undefined;
+        }
+        if (!moving)
+            return;
+        let frame = 0;
+        const tick = (time) => {
+            setNow(time);
+            if (time - at < GLIDE_MS)
+                frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frame);
+    }, [placed]);
+    return placed.map((each) => {
+        const glide = glides.current.get(each.node.id);
+        return glide ? { ...each, ...glideAt(glide, now) } : each;
+    });
+}
 export function ReadMap({ reading, onDrawn }) {
     const drawn = useDrawn(reading, onDrawn);
     const { ref, size } = useSize();
@@ -149,8 +196,9 @@ export function ReadMap({ reading, onDrawn }) {
         }));
     }, [map, size, drawn.steps]);
     const widths = useTokenWidths(ref, placed);
-    const byId = new Map(placed.map((each) => [each.node.id, each]));
-    return (_jsxs("div", { ref: ref, className: "read-map", "aria-hidden": "true", children: [_jsx("svg", { className: "read-map-lines", "aria-hidden": "true", width: size?.width ?? 0, height: size?.height ?? 0, children: placed.map((to) => {
+    const shown = useGlided(placed);
+    const byId = new Map(shown.map((each) => [each.node.id, each]));
+    return (_jsxs("div", { ref: ref, className: "read-map", "aria-hidden": "true", children: [_jsx("svg", { className: "read-map-lines", "aria-hidden": "true", width: size?.width ?? 0, height: size?.height ?? 0, children: shown.map((to) => {
                     const from = to.node.parent === undefined ? undefined : byId.get(to.node.parent);
                     const width = from && widths[from.node.id];
                     if (!from || width === undefined)
@@ -158,6 +206,6 @@ export function ReadMap({ reading, onDrawn }) {
                     const read = to.node.own.filter((step) => step < drawn.steps).length;
                     const dots = Math.ceil((Math.min(DOTS, to.node.own.length) * read) / Math.max(1, to.node.own.length));
                     const line = lineTo(from, width, to, Math.min(DOTS, to.node.own.length));
-                    return (_jsxs("g", { children: [_jsx("path", { className: "map-line read-map-line", d: line.d, pathLength: 1 }), line.dots.slice(0, dots).map(({ x, y }, index) => (_jsx("circle", { className: "read-map-dot", cx: x, cy: y, r: 2.5 }, index)))] }, to.node.id));
-                }) }), placed.map(({ node, x, y }) => (_jsx(MapToken, { className: "read-map-node", id: node.id, label: short(node.label), icon: nodeIcon(node), x: x, y: y }, node.id))), _jsxs("div", { className: "read-map-foot", children: [_jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: saying(steps, drawn.steps) }), _jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: tally(steps, drawn.steps) })] })] }));
+                    return (_jsxs("g", { children: [_jsx("path", { className: "map-line map-line-drawing", d: line.d, pathLength: 1 }), line.dots.slice(0, dots).map(({ x, y }, index) => (_jsx("circle", { className: "read-map-dot", cx: x, cy: y, r: 2.5 }, index)))] }, to.node.id));
+                }) }), shown.map(({ node, x, y }) => (_jsx(MapToken, { className: "map-token-drawing", id: node.id, label: short(node.label), icon: nodeIcon(node), x: x, y: y }, node.id))), _jsxs("div", { className: "read-map-foot", children: [_jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: saying(steps, drawn.steps) }), _jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: tally(steps, drawn.steps) })] })] }));
 }

package/ui/studio-map.js

@@ -19,7 +19,7 @@ import { TextInput } from '@astryxdesign/core/TextInput';
 import { IconArrowsMaximize, IconArrowsMinimize, IconCloud, IconCode, IconExternalLink, IconEye, IconFocus2, IconLayoutGrid, IconSearch, IconX, } from '@tabler/icons-react';
 import { useEffect, useMemo, useRef, useState, } from 'react';
 import { mapFamily, mapFound, mapLayout, mapLinkWords, mapNoteLines, workspaceMap, } from "../mod.js";
-import { IconTypeSafe, modelFamilyMark } from "./brand-icons.js";
+import { modelFamilyMark } from "./brand-icons.js";
 import { FACET_ICON } from "./lib/facet-icons.js";
 import { readKeptMap, writeKeptMap } from "./lib/studio-map-kept.js";
 import { useProject } from "./lib/studio-project.js";
@@ -53,8 +53,6 @@ function nodeIcon({ kind, type, note }) {
     if (kind === 'tool')
         return toolTypeIcon(type ?? '');
     // A model's note is its API model id, which names the family.
-    if (kind === 'model' && type === 'typesafe')
-        return IconTypeSafe;
     if (kind === 'model')
         return modelFamilyMark(note) ?? FACET_ICON.modelBinding;
     if (kind === 'provider')

package/ui/tree-map.css

@@ -16,6 +16,15 @@
   stroke: color-mix(in srgb, var(--color-border-emphasized) 60%, var(--color-background-surface));
 }
 
+/* Grown, a title over each column, and what the column is under it. */
+.studio-tree-map-heading {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 .studio-tree-map[data-draggable] {
   cursor: grab;
   touch-action: none;

package/ui/tree-map.d.ts

@@ -1,3 +1,4 @@
+import { type MapPlace } from '../map-line.ts';
 import { type StudioWorkspace } from '../mod.ts';
 import { type Box } from './lib/tree-map-layout.ts';
 export interface StudioTreeMapProps {
@@ -5,18 +6,38 @@ export interface StudioTreeMapProps {
     /** The keys of the agents to draw, in the workspace's order; every agent when unset. */
     agents?: readonly string[] | undefined;
     /**
-     * How far the tree has grown, from 0 to 1. As it grows each agent drifts into a zone of its own
-     * and what feeds the tree spreads into its columns. What growing adds draws in as its room opens,
-     * its line and then its token: the protocols under each provider, what branches off a tool, the
-     * runner's steps, and the tool runner with its checks. Shrinking takes it all back the same way.
+     * How far the tree has grown, from 0 to 1. As it grows the map grows to its size, then draws out
+     * from the tree's agents as one pen would, at an even pace: each line runs out from the node it
+     * leaves, and the node at its end shows as the line reaches it, drifting the last of the way along
+     * it. Nothing moves before the drawing comes to it: what the map shows closed glides into place
+     * once its line reaches it, its line with it, or, where something would show where it stands, sets
+     * off just before that shows and goes slower, so its line catches it as it lands.
+     * Shrinking takes it all back the same way.
      */
     grow?: number | undefined;
     /**
      * The box the map fills grown: its rows and gaps stretch to fill it, and it stands in the middle
-     * of it. When the map cannot fit, it eases smaller as it grows until all of it does.
+     * of it.
      */
     fit?: Box | undefined;
+    /**
+     * The box the map stands in now, when it changes as the map grows: closed and grown, the map
+     * stands in the middle of it, eased smaller where it would not fit. `fit` by default.
+     */
+    room?: Box | undefined;
+    /**
+     * The keys of the agents the map shows closed, when not `agents`. Growing takes away what the
+     * tree does not draw, and an agent the tree draws as an agent tool's agent glides into it.
+     */
+    still?: readonly string[] | undefined;
+    /**
+     * Where the tokens the map shows closed stand, by id, in the map's own pixels, for a map that
+     * grows out of something else: closed, the map stands at its own size from the top left of what
+     * holds it, these tokens where they are given and nothing else; growing, the tree draws out round
+     * them, and each glides to where it stands grown as the drawing comes to it. In place of `still`.
+     */
+    closed?: ReadonlyMap<string, MapPlace> | undefined;
     /** A token dragged moves to where it is dropped, its lines with it; the field dragged moves the whole map. */
     draggable?: boolean | undefined;
 }
-export declare function StudioTreeMap({ workspace, agents, grow, fit, draggable, }: StudioTreeMapProps): import("react").JSX.Element;
+export declare function StudioTreeMap({ workspace, agents, grow, fit, room, still, closed: given, draggable, }: StudioTreeMapProps): import("react").JSX.Element;