@tangle-network/sandbox-ui 2.0.20 → 2.0.22

package/dist/tokens.css

@@ -1,5 +1,5 @@
 /* palette:begin — generated by scripts/gen-ladders.mjs; edit palette.mjs or palette-template.css. */
-/* Palette layout only. Colour inputs live in palette.mjs; gen-ladders.mjs writes the public stylesheets. */
+/* Theme roles derive from palette.mjs; fixed categorical chart pairs live here. gen-ladders.mjs writes the public stylesheets. */
 :root,
 [data-sandbox-ui],
 [data-sandbox-theme="vault"],
@@ -524,6 +524,12 @@
 [data-sandbox-theme],
 [data-theme] {
   --chart-ink: var(--text-primary); --chart-ink-muted: var(--text-dim);
+  --chart-series-1: var(--chart-accent); --chart-series-2: light-dark(#2a7fa8, #6cc0e8);
+  --chart-series-3: light-dark(#7b4fc0, #b99af0); --chart-series-4: light-dark(#1f7f88, #5fc2c9);
+  --chart-series-5: light-dark(#a8418f, #e58ccf); --chart-series-6: light-dark(#5a6ad8, #8fa4ff);
+  --chart-series-7: light-dark(#45507a, #c0c4dc); --chart-series-8: var(--text-muted);
+  --chart-category-1: light-dark(#2a78d6, #3987e5); --chart-category-2: light-dark(#eb6834, #d95926);
+  --chart-category-3: light-dark(#1baf7a, #199e70); --chart-category-other: var(--text-muted);
   --chart-muted: var(--md3-outline); --chart-grid: var(--md3-surface-container-high);
   --chart-rule: var(--md3-outline-variant); --chart-shade: var(--bg-hover);
   --chart-accent: var(--brand-cool); --chart-tier-c: hsl(246.1017 55.1402% 41.9608%);

package/dist/{trace-workspace-C8dHRBDV.js → trace-workspace-DkakKRLV.js}

@@ -2,14 +2,16 @@ import { t as cn } from "./utils-BER_bdgE.js";
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-BQlarCIo.js";
 import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
 import { t as AgentGraph$1 } from "./AgentGraph-BGWx9hhS.js";
+import { t as useFollowTail } from "./use-follow-tail-Ckx5ZSV2.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { useMemo, useReducer, useRef, useState } from "react";
 import { X } from "lucide-react";
 import { activityTiming, ambientStyle, syncAmbient } from "@tangle-network/charts/react/agent-graph/presentation";
 import { AgentTimeline } from "@tangle-network/ui/chat";
 import { InlineThinkingItem, runStatus } from "@tangle-network/ui/run";
 import { FlowWaterfall, toolGlyph } from "@tangle-network/charts/react";
 import { LatestEvents } from "@tangle-network/charts/react/agent-graph";
+import { useEventStream } from "@tangle-network/ui/hooks";
 // src/run/trace-waterfall.tsx
 /** Agent and model spans show their lab/host mark; tool spans show their provider's mark. Unknown keeps the kind glyph. */
 function traceSpanMark(span) {
@@ -205,59 +207,61 @@ function useAgentStream(url, openEventSource) {
 		lastSeq: 0,
 		alive: false
 	});
-	useEffect(() => {
-		if (!url || !openEventSource && typeof EventSource === "undefined") return;
-		dispatch({ type: "reset" });
-		let lastSeq = 0;
-		let closed = false;
-		let source;
-		let retry;
-		const open = () => {
-			const target = new URL(url, globalThis.location?.href);
-			if (lastSeq > 0) target.searchParams.set("after", String(lastSeq));
-			source = openEventSource ? openEventSource(target.toString(), (live) => {
-				if (!closed && !live) dispatch({ type: "unreachable" });
-			}) : new EventSource(target.toString());
-			let opened = false;
-			if (!openEventSource) source.onopen = () => {
-				opened = true;
-			};
-			source.addEventListener("rows", (message) => {
-				const data = JSON.parse(message.data);
-				lastSeq = Math.max(lastSeq, data.lastSeq ?? 0, ...data.events.map((row) => row.seq));
-				dispatch({
-					type: "rows",
-					generation: data.generation,
-					rows: data.events,
-					alive: data.alive
-				});
-			});
-			source.addEventListener("reset", (message) => {
-				lastSeq = 0;
-				dispatch({
-					type: "reset",
-					generation: JSON.parse(message.data).generation
-				});
-			});
-			source.addEventListener("end", () => {
-				closed = true;
-				source?.close();
-				dispatch({ type: "end" });
-			});
-			if (!openEventSource) source.onerror = () => {
-				source?.close();
-				if (closed) return;
-				if (!opened) dispatch({ type: "unreachable" });
-				retry = setTimeout(open, 1e3);
-			};
-		};
-		open();
-		return () => {
-			closed = true;
-			clearTimeout(retry);
-			source?.close();
-		};
-	}, [url, openEventSource]);
+	const cursor = useRef({ lastSeq: 0 });
+	useEventStream(url, {
+		opener: openEventSource,
+		after: () => cursor.current.lastSeq,
+		onStart: () => {
+			cursor.current = { lastSeq: 0 };
+			dispatch({ type: "reset" });
+		},
+		onLiveChange: (live) => {
+			if (!live) dispatch({ type: "unreachable" });
+		},
+		events: {
+			rows: (message) => {
+				try {
+					const data = JSON.parse(message.data);
+					if (!Array.isArray(data.events)) throw new Error("Invalid agent rows stream");
+					if (data.generation !== void 0 && data.generation !== cursor.current.generation) cursor.current = {
+						lastSeq: 0,
+						generation: data.generation
+					};
+					cursor.current.lastSeq = Math.max(cursor.current.lastSeq, data.lastSeq ?? 0, ...data.events.map((row) => row.seq));
+					dispatch({
+						type: "rows",
+						generation: data.generation,
+						rows: data.events,
+						alive: data.alive
+					});
+				} catch (cause) {
+					dispatch({
+						type: "error",
+						message: String(cause)
+					});
+				}
+			},
+			reset: (message) => {
+				try {
+					const { generation } = JSON.parse(message.data);
+					cursor.current = {
+						lastSeq: 0,
+						generation
+					};
+					dispatch({
+						type: "reset",
+						generation
+					});
+				} catch (cause) {
+					dispatch({
+						type: "error",
+						message: String(cause)
+					});
+				}
+			},
+			end: () => dispatch({ type: "end" })
+		}
+	});
 	return state;
 }
 // src/run/trace-workspace.tsx
@@ -438,18 +442,10 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 	const live = stream.alive && !stream.error && cursor === null;
 	const items = useMemo(() => timelineItems(shown, live), [shown, live]);
 	const scroller = useRef(null);
-	const pinned = useRef(true);
-	const [unseen, setUnseen] = useState(false);
-	useLayoutEffect(() => {
-		const element = scroller.current;
-		if (!element) return;
-		if (pinned.current) element.scrollTop = element.scrollHeight;
-		else setUnseen(true);
-	}, [items.length, items[items.length - 1]]);
-	useEffect(() => {
-		pinned.current = true;
-		setUnseen(false);
-	}, [selected]);
+	const { unseen, jump } = useFollowTail(scroller, {
+		identity: showConversation ? selected : void 0,
+		content: items
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("sandbox-trace-workspace flex min-h-0 flex-col gap-3", className),
 		children: [
@@ -580,11 +576,6 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 					}),
 					/* @__PURE__ */ jsx("div", {
 						ref: scroller,
-						onScroll: (event) => {
-							const element = event.currentTarget;
-							pinned.current = element.scrollHeight - element.scrollTop - element.clientHeight < 48;
-							if (pinned.current) setUnseen(false);
-						},
 						"data-primary-content": "",
 						className: "min-h-0 flex-1 overflow-y-auto px-3 py-2",
 						children: streamUrl && (cursor === null || origin !== void 0) ? /* @__PURE__ */ jsx(AgentTimeline, {
@@ -598,12 +589,7 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 					}),
 					unseen && /* @__PURE__ */ jsx("button", {
 						type: "button",
-						onClick: () => {
-							const element = scroller.current;
-							if (element) element.scrollTop = element.scrollHeight;
-							pinned.current = true;
-							setUnseen(false);
-						},
+						onClick: () => jump(),
 						className: "absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full border border-border bg-background px-3 py-1 text-xs shadow-sm",
 						children: "New output"
 					})
@@ -612,4 +598,4 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 		]
 	});
 }
-export { TraceWaterfall as a, useAgentStream as i, LatestEvents as n, traceSpanMark as o, foldAgentRows as r, TraceWorkspace as t };
+export { useEventStream as a, useAgentStream as i, LatestEvents as n, TraceWaterfall as o, foldAgentRows as r, traceSpanMark as s, TraceWorkspace as t };

package/dist/{tree-data-C8CNt4WE.js → tree-data-B_IXAIgg.js}

@@ -1,4 +1,5 @@
 import { t as revealInScroller } from "./reveal-in-scroller-CzKwuqCG.js";
+import { t as VirtualList } from "./VirtualList-DLh2JE0F.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { BookOpen, Braces, ChevronRight, File, FileCode, FileCog, FileImage, FileLock, FileSpreadsheet, FileTerminal, FileText, Folder, FolderOpen, GitBranch, Package, Scale } from "lucide-react";
@@ -10,8 +11,8 @@ import { BookOpen, Braces, ChevronRight, File, FileCode, FileCog, FileImage, Fil
 * trees given the same key share one remembered expansion.
 *
 * Rendering is lazy: only the children of expanded folders are walked or
-* mounted, and a folder with more than `CHILD_PAGE` children renders them a page
-* at a time, so a vault with thousands of files costs only what is on screen.
+* mounted; folders retain their child paging, and collections over 100 visible
+* rows use the shared viewport list. Keyboard navigation reveals offscreen rows.
 *
 * The tree follows the WAI-ARIA tree pattern with a single tab stop: arrow keys
 * move between rows, Right/Left expand, collapse or move to a child or parent,
@@ -294,7 +295,10 @@ function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle,
 	const [focusedPath, setFocusedPath] = useState(null);
 	const rowRefs = useRef(/* @__PURE__ */ new Map());
 	const pendingFocusRef = useRef(null);
-	const pendingRevealRef = useRef(null);
+	const treeRef = useRef(null), scroller = useRef(null);
+	const [target, setTarget] = useState();
+	const previousPaths = useRef(null);
+	const revealed = useRef(void 0);
 	const index = useMemo(() => {
 		const nodes = /* @__PURE__ */ new Map();
 		const parents = /* @__PURE__ */ new Map();
@@ -376,35 +380,48 @@ function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle,
 		onFolderToggle
 	]);
 	useEffect(() => {
-		if (!selectedPath || !index.nodes.has(selectedPath)) return;
+		if (!selectedPath || !index.nodes.has(selectedPath)) {
+			revealed.current = void 0;
+			return;
+		}
+		if (revealed.current?.path === selectedPath && revealed.current.scope === storageKey) return;
+		revealed.current = {
+			scope: storageKey,
+			path: selectedPath
+		};
 		const ancestors = [];
 		for (let parent = index.parents.get(selectedPath) ?? null; parent; parent = index.parents.get(parent) ?? null) ancestors.push(parent);
-		pendingRevealRef.current = selectedPath;
+		setTarget(selectedPath);
+		setPageLimits((current) => {
+			const next = new Map(current);
+			for (const path of [selectedPath, ...ancestors]) {
+				const parent = index.parents.get(path) ?? null;
+				if (parent) next.set(parent, Math.max(next.get(parent) ?? 200, (index.children.get(parent)?.findIndex((n) => n.path === path) ?? -1) + 1));
+			}
+			return next;
+		});
 		if (ancestors.some((path) => !expandedPaths.has(path))) updateExpanded((next) => {
 			for (const path of ancestors) next.add(path);
 		});
-	}, [selectedPath, index]);
-	useEffect(() => {
-		const reveal = pendingRevealRef.current;
-		if (reveal && rowRefs.current.has(reveal)) {
-			pendingRevealRef.current = null;
-			const row = rowRefs.current.get(reveal);
-			if (row) revealInScroller(row);
-		}
-		const focus = pendingFocusRef.current;
-		if (focus && rowRefs.current.has(focus)) {
-			pendingFocusRef.current = null;
-			rowRefs.current.get(focus)?.focus();
-		}
-	}, [rows]);
+	}, [
+		selectedPath,
+		index,
+		storageKey
+	]);
 	const visiblePaths = useMemo(() => new Set(nodeRows.map((row) => row.node.path)), [nodeRows]);
 	const tabStop = focusedPath && visiblePaths.has(focusedPath) && focusedPath || selectedPath && visiblePaths.has(selectedPath) && selectedPath || nodeRows[0]?.node.path || null;
 	const focusRow = useCallback((path) => {
 		if (!path) return;
 		setFocusedPath(path);
 		const element = rowRefs.current.get(path);
-		if (element) element.focus();
-		else pendingFocusRef.current = path;
+		if (element) {
+			setTarget(void 0);
+			element.focus({ preventScroll: true });
+			revealInScroller(element);
+		} else {
+			pendingFocusRef.current = path;
+			setTarget(path);
+		}
 	}, []);
 	const activate = useCallback((node) => {
 		setFocusedPath(node.path);
@@ -424,19 +441,14 @@ function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle,
 		const dir = node.type === "directory";
 		const open = dir && isOpen(node.path);
 		let handled = true;
-		switch (event.key) {
-			case "ArrowDown":
-				focusRow(nodeRows[at + 1]?.node.path);
-				break;
-			case "ArrowUp":
-				focusRow(nodeRows[at - 1]?.node.path);
-				break;
-			case "Home":
-				focusRow(nodeRows[0]?.node.path);
-				break;
-			case "End":
-				focusRow(nodeRows[nodeRows.length - 1]?.node.path);
-				break;
+		const moves = {
+			ArrowDown: nodeRows[at + 1]?.node.path,
+			ArrowUp: nodeRows[at - 1]?.node.path,
+			Home: nodeRows[0]?.node.path,
+			End: nodeRows[nodeRows.length - 1]?.node.path
+		};
+		if (event.key in moves) focusRow(moves[event.key]);
+		else switch (event.key) {
 			case "ArrowRight":
 				if (dir && !open) setFolderOpen(node.path, true);
 				else if (open) {
@@ -480,97 +492,135 @@ function VaultTree({ root, selectedPath, activeFolder, onSelect, onFolderToggle,
 		return out;
 	}, [status]);
 	const openParent = selectedPath ? index.parents.get(selectedPath) ?? null : null;
-	return /* @__PURE__ */ jsx("div", {
-		role: "tree",
-		"aria-label": label,
-		"data-vault-tree-rows": true,
-		className: `flex flex-col gap-px ${className ?? ""}`,
-		children: rows.map((row) => {
-			if (row.kind === "more") return /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: () => setPageLimits((current) => {
+	useEffect(() => {
+		previousPaths.current = new Set(index.nodes.keys());
+	}, [index]);
+	const keyOf = (row) => row.kind === "node" ? row.node.path : `more:${row.parent}`;
+	const render = (row) => {
+		if (row.kind === "more") return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => {
+				focusRow(index.children.get(row.parent)?.[(index.children.get(row.parent)?.length ?? 0) - row.hidden]?.path);
+				setPageLimits((current) => {
 					const next = new Map(current);
 					next.set(row.parent, Math.max(200, current.get(row.parent) ?? 0) + 200);
 					return next;
+				});
+			},
+			style: { paddingInlineStart: row.depth * INDENT + 28 },
+			className: "flex min-h-8 w-full items-center rounded-md pr-2 text-left text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+			children: [
+				"Show ",
+				Math.min(row.hidden, 200),
+				" more of ",
+				row.hidden
+			]
+		}, `more:${row.parent}`);
+		const { node, depth } = row;
+		const dir = node.type === "directory";
+		const open = dir && isOpen(node.path);
+		const selected = !dir && node.path === selectedPath;
+		const active = dir && node.path === activeFolder;
+		const kind = dir ? {
+			Icon: open ? FolderOpen : Folder,
+			ink: "text-muted-foreground"
+		} : fileKind(node.name);
+		const Icon = kind.Icon;
+		const change = dir ? open ? void 0 : changedFolders.get(node.path) : status?.[node.path];
+		const ancestors = [];
+		for (let at = row.parent; at; at = index.parents.get(at) ?? null) ancestors.unshift(at);
+		return /* @__PURE__ */ jsxs("div", {
+			ref: (element) => {
+				if (element) {
+					rowRefs.current.set(node.path, element);
+					if (previousPaths.current && !previousPaths.current.has(node.path) && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+						previousPaths.current.add(node.path);
+						element.classList.add("agent-arrive");
+						Promise.allSettled(element.getAnimations().map((animation) => animation.finished)).then(() => element.classList.remove("agent-arrive"));
+					}
+					if (pendingFocusRef.current === node.path) {
+						pendingFocusRef.current = null;
+						element.focus({ preventScroll: true });
+					}
+					if (target === node.path && rows.length <= 100) revealInScroller(element);
+				} else rowRefs.current.delete(node.path);
+			},
+			role: "treeitem",
+			"aria-level": depth + 1,
+			"aria-posinset": row.posInSet,
+			"aria-setsize": row.setSize,
+			"aria-expanded": dir ? open : void 0,
+			"aria-selected": dir ? void 0 : selected,
+			"aria-current": active ? "true" : void 0,
+			tabIndex: node.path === tabStop ? 0 : -1,
+			title: node.path,
+			"data-vault-tree-item": node.type,
+			"data-path": node.path,
+			"data-selected": selected ? "true" : void 0,
+			onClick: () => activate(node),
+			onFocus: () => setFocusedPath(node.path),
+			onKeyDown: (event) => onKeyDown(event, node),
+			style: { paddingInlineStart: depth * INDENT + 4 },
+			className: [
+				"group relative flex min-h-8 w-full cursor-pointer select-none items-center gap-1.5 rounded-md pr-2 text-sm transition-colors [@media(pointer:coarse)]:min-h-10",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+				selected ? "bg-[var(--ix-sel-bg)] font-medium text-[var(--accent-text)]" : active ? "bg-muted font-medium text-foreground" : "text-foreground hover:bg-[var(--ix-hover-bg)]"
+			].join(" "),
+			children: [
+				ancestors.map((folder, level) => /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: `pointer-events-none absolute inset-y-0 w-px ${folder === openParent ? "bg-[var(--border-strong)]" : "bg-border"}`,
+					style: { left: level * INDENT + 12 }
+				}, folder)),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground",
+					children: dir && /* @__PURE__ */ jsx(ChevronRight, { className: `size-3.5 transition-transform duration-fast ${open ? "rotate-90" : ""}` })
+				}),
+				/* @__PURE__ */ jsx(Icon, {
+					"aria-hidden": "true",
+					className: `size-4 shrink-0 ${kind.ink}`
 				}),
-				style: { paddingInlineStart: row.depth * INDENT + 28 },
-				className: "flex min-h-8 w-full items-center rounded-md pr-2 text-left text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-				children: [
-					"Show ",
-					Math.min(row.hidden, 200),
-					" more of ",
-					row.hidden
-				]
-			}, `more:${row.parent}`);
-			const { node, depth } = row;
-			const dir = node.type === "directory";
-			const open = dir && isOpen(node.path);
-			const selected = !dir && node.path === selectedPath;
-			const active = dir && node.path === activeFolder;
-			const kind = dir ? {
-				Icon: open ? FolderOpen : Folder,
-				ink: "text-muted-foreground"
-			} : fileKind(node.name);
-			const Icon = kind.Icon;
-			const change = dir ? open ? void 0 : changedFolders.get(node.path) : status?.[node.path];
-			const ancestors = [];
-			for (let at = row.parent; at; at = index.parents.get(at) ?? null) ancestors.unshift(at);
-			return /* @__PURE__ */ jsxs("div", {
-				ref: (element) => {
-					if (element) rowRefs.current.set(node.path, element);
-					else rowRefs.current.delete(node.path);
-				},
-				role: "treeitem",
-				"aria-level": depth + 1,
-				"aria-posinset": row.posInSet,
-				"aria-setsize": row.setSize,
-				"aria-expanded": dir ? open : void 0,
-				"aria-selected": dir ? void 0 : selected,
-				"aria-current": active ? "true" : void 0,
-				tabIndex: node.path === tabStop ? 0 : -1,
-				title: node.path,
-				"data-vault-tree-item": node.type,
-				"data-path": node.path,
-				"data-selected": selected ? "true" : void 0,
-				onClick: () => activate(node),
-				onFocus: () => setFocusedPath(node.path),
-				onKeyDown: (event) => onKeyDown(event, node),
-				style: { paddingInlineStart: depth * INDENT + 4 },
-				className: [
-					"group relative flex min-h-8 w-full cursor-pointer select-none items-center gap-1.5 rounded-md pr-2 text-sm transition-colors [@media(pointer:coarse)]:min-h-10",
-					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-					selected ? "bg-[var(--ix-sel-bg)] font-medium text-[var(--accent-text)]" : active ? "bg-muted font-medium text-foreground" : "text-foreground hover:bg-[var(--ix-hover-bg)]"
-				].join(" "),
-				children: [
-					ancestors.map((folder, level) => /* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
-						className: `pointer-events-none absolute inset-y-0 w-px ${folder === openParent ? "bg-[var(--border-strong)]" : "bg-border"}`,
-						style: { left: level * INDENT + 12 }
-					}, folder)),
-					/* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
-						className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground",
-						children: dir && /* @__PURE__ */ jsx(ChevronRight, { className: `size-3.5 transition-transform duration-fast ${open ? "rotate-90" : ""}` })
-					}),
-					/* @__PURE__ */ jsx(Icon, {
-						"aria-hidden": "true",
-						className: `size-4 shrink-0 ${kind.ink}`
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 flex-1 truncate",
-						children: node.name
-					}),
-					change && (dir ? /* @__PURE__ */ jsx("span", {
-						"aria-label": `holds ${change === "added" ? "added" : "changed"} files`,
-						className: `size-1.5 shrink-0 rounded-full ${change === "added" ? "bg-[var(--surface-success-text)]" : "bg-[var(--surface-warning-text)]"}`
-					}) : /* @__PURE__ */ jsx("span", {
-						"aria-label": change,
-						className: `w-3.5 shrink-0 text-center font-mono text-xs font-semibold ${CHANGE[change].ink}`,
-						children: CHANGE[change].letter
-					}))
-				]
-			}, node.path);
-		})
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: node.name
+				}),
+				change && (dir ? /* @__PURE__ */ jsx("span", {
+					"aria-label": `holds ${change === "added" ? "added" : "changed"} files`,
+					className: `size-1.5 shrink-0 rounded-full ${change === "added" ? "bg-[var(--surface-success-text)]" : "bg-[var(--surface-warning-text)]"}`
+				}) : /* @__PURE__ */ jsx("span", {
+					"aria-label": change,
+					className: `w-3.5 shrink-0 text-center font-mono text-sm font-semibold ${CHANGE[change].ink}`,
+					children: CHANGE[change].letter
+				}))
+			]
+		}, node.path);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: (element) => {
+			treeRef.current = element;
+			if (!element) return;
+			let parent = element?.parentElement ?? null;
+			while (parent && !/auto|scroll/.test(getComputedStyle(parent).overflowY)) parent = parent.parentElement;
+			scroller.current = parent ?? document.scrollingElement;
+		},
+		role: "tree",
+		"aria-label": label,
+		"data-vault-tree-rows": true,
+		className,
+		children: /* @__PURE__ */ jsx(VirtualList, {
+			items: rows,
+			keyOf,
+			render,
+			scroller,
+			origin: treeRef,
+			estimate: 33,
+			overscan: 320,
+			target,
+			targetAlign: "nearest",
+			virtualize: rows.length > 100,
+			keepMounted: tabStop ?? void 0
+		}, storageKey)
 	});
 }
 // src/vault-tree/tree-data.ts

package/dist/use-follow-tail-Ckx5ZSV2.js

@@ -0,0 +1 @@
+export { useFollowTail as t } from "@tangle-network/ui/hooks";

package/dist/vault-tree.js

@@ -1 +1 @@
-export { r as VAULT_TREE_CHILD_PAGE, i as VaultTree, t as fileTreeFromPaths, n as filterFileNodes } from "./tree-data-C8CNt4WE.js";
+export { r as VAULT_TREE_CHILD_PAGE, i as VaultTree, t as fileTreeFromPaths, n as filterFileNodes } from "./tree-data-B_IXAIgg.js";

package/dist/workflows.js

@@ -21,7 +21,7 @@ import { GraphErrorBoundary, retryImport } from "@tangle-network/charts/react/ag
 * via a Vite `vite:preloadError` reload guard.
 */
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-CADReIDl.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-B8cRtVaw.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 /** Graceful degradation when the graph can't render: the workflow is still
 *  fully legible as YAML, with a retry for a recoverable load failure. */

package/dist/{workspace-CzikYt_y.js → workspace--GvnZNpH.js}

@@ -1,7 +1,7 @@
 import { t as cn$1 } from "./utils-BER_bdgE.js";
 import { r as ShellHeader } from "./shell-header-CwqDzC4I.js";
 import { t as MOTION_CONTROL } from "./motion-2Ine0j_s.js";
-import "./workspace-files-pane-DB9Nvwh4.js";
+import "./workspace-files-pane-C0PeY6rY.js";
 import { ArtifactPane, ArtifactPane as ArtifactPane$1, EmptyState, Input, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Markdown } from "@tangle-network/ui/markdown";