@nice-code/action 0.10.0 → 0.12.0

package/build/devtools/browser/index.cjs

@@ -0,0 +1,3886 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_ActionDevtoolsCore = require("../../ActionDevtoolsCore-DtgXwPBZ.cjs");
+let _nice_code_util = require("@nice-code/util");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dom = require("react-dom");
+let _tanstack_react_virtual = require("@tanstack/react-virtual");
+let lucide_react = require("lucide-react");
+let source_map_js = require("source-map-js");
+//#region ../nice-devtools-shared/src/colors.ts
+const DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
+const DEVTOOL_COLOR_SEMANTIC_SUCCESS = "#A3E635";
+const DEVTOOL_COLOR_SEMANTIC_SYSTEM = "#38BDF8";
+const DEVTOOL_COLOR_SEMANTIC_WARNING = "#FB923C";
+const DEVTOOL_COLOR_SEMANTIC_METADATA = "#A1A1AA";
+const DEVTOOL_COLOR_TEXT_EMPHASIS = "#f1f5f9";
+const DEVTOOL_COLOR_TEXT_SECONDARY = "#cbd5e1";
+const DEVTOOL_COLOR_TEXT_MUTED = "#64748b";
+const DEVTOOL_COLOR_TEXT_FAINT = "#334155";
+const DEVTOOL_LIST_BASE_BACKGROUND = "#0f172a";
+const DEVTOOL_DETAIL_BASE_BACKGROUND = "#0d1729";
+const DEVTOOL_DETAIL_HEADER_BACKGROUND = "#131f35";
+const DEVTOOL_SECTION_BACKGROUND = "#1e293b";
+const DEVTOOL_SECTION_STRING_BACKGROUND = "#0d131f";
+const DEVTOOL_PANEL_BORDER = "#1e293b";
+const DEVTOOL_ERROR_BACKGROUND = "#1e0a0a";
+const DEVTOOL_TOOLTIP_BACKGROUND = "#0c1526";
+const DEVTOOL_TOOLTIP_TITLE_BACKGROUND = "#101b2e";
+const DEVTOOL_TOOLTIP_BORDER = "#312e81";
+const DEVTOOL_JSON_KEY = "#a5b4fc";
+const DEVTOOL_JSON_STRING = "#fbbf24";
+const DEVTOOL_JSON_NUMBER = "#34d399";
+const DEVTOOL_JSON_KEYWORD = "#a78bfa";
+const DEVTOOL_JSON_PUNCTUATION = "#475569";
+const MONO_FONT = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
+const SANS_FONT = "ui-sans-serif, system-ui, sans-serif";
+//#endregion
+//#region ../nice-devtools-shared/src/format.ts
+/** Pretty-print any value to JSON, degrading gracefully for cyclic / non-JSON values. */
+function safeStringify(value, indent = 2) {
+	if (value === void 0) return "undefined";
+	if (value === null) return "null";
+	try {
+		return JSON.stringify(value, null, indent);
+	} catch {
+		return String(value);
+	}
+}
+/** Wall-clock time of day, e.g. `14:03:09`. */
+function formatTimestamp(ms) {
+	return new Date(ms).toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		hour12: false
+	});
+}
+/** Compact relative age: `850ms`, `3.2s`, `4m`. */
+function formatRelativeAge(ms) {
+	if (ms < 1e3) return `${ms}ms`;
+	if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+	return `${Math.floor(ms / 6e4)}m`;
+}
+//#endregion
+//#region ../nice-devtools-shared/src/json.tsx
+const JSON_TOKEN_RE = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
+/** Tokenize a JSON string into coloured <span> nodes for inline rendering. */
+function renderColoredJson(text) {
+	const nodes = [];
+	let last = 0;
+	let i = 0;
+	JSON_TOKEN_RE.lastIndex = 0;
+	for (let m = JSON_TOKEN_RE.exec(text); m !== null; m = JSON_TOKEN_RE.exec(text)) {
+		if (m.index > last) nodes.push(text.slice(last, m.index));
+		const [, str, colon, num, kw, punct] = m;
+		if (str != null) if (colon != null) {
+			nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: { color: DEVTOOL_JSON_KEY },
+				children: str
+			}, i++));
+			nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: { color: DEVTOOL_JSON_PUNCTUATION },
+				children: colon
+			}, i++));
+		} else nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: { color: DEVTOOL_JSON_STRING },
+			children: str
+		}, i++));
+		else if (num != null) nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: { color: DEVTOOL_JSON_NUMBER },
+			children: num
+		}, i++));
+		else if (kw != null) nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: { color: DEVTOOL_JSON_KEYWORD },
+			children: kw
+		}, i++));
+		else if (punct != null) nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: { color: DEVTOOL_JSON_PUNCTUATION },
+			children: punct
+		}, i++));
+		last = JSON_TOKEN_RE.lastIndex;
+	}
+	if (last < text.length) nodes.push(text.slice(last));
+	return nodes;
+}
+//#endregion
+//#region ../nice-devtools-shared/src/dock.ts
+const GLOBAL_KEY = "__NICE_DEVTOOLS_DOCK__";
+const VERSION = 4;
+function createCoordinator() {
+	const panels = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	function toRef(panel) {
+		return {
+			id: panel.id,
+			label: panel.label,
+			icon: panel.icon,
+			badge: panel.badge,
+			onOpen: panel.onOpen
+		};
+	}
+	function applyBodyMargins() {
+		if (typeof document === "undefined") return;
+		const margins = {
+			top: 0,
+			bottom: 0,
+			left: 0,
+			right: 0
+		};
+		for (const panel of panels.values()) if (panel.open) margins[panel.side] += panel.size;
+		for (const side of [
+			"top",
+			"bottom",
+			"left",
+			"right"
+		]) if (margins[side] > 0) document.body.style.setProperty(`margin-${side}`, `${margins[side]}px`);
+		else document.body.style.removeProperty(`margin-${side}`);
+	}
+	function notify() {
+		applyBodyMargins();
+		for (const listener of listeners) listener();
+	}
+	return {
+		version: VERSION,
+		register(panel) {
+			panels.set(panel.id, { ...panel });
+			notify();
+			return () => {
+				panels.delete(panel.id);
+				notify();
+			};
+		},
+		update(id, next) {
+			const existing = panels.get(id);
+			if (existing == null) return;
+			if (existing.side === next.side && existing.size === next.size && existing.open === next.open && existing.badge === next.badge) return;
+			panels.set(id, {
+				...existing,
+				...next
+			});
+			notify();
+		},
+		getView(id) {
+			const list = [...panels.values()];
+			const anyOpen = list.some((p) => p.open);
+			const firstId = list.length > 0 ? list[0].id : null;
+			let dockOffset = 0;
+			let stacked = false;
+			const self = panels.get(id);
+			if (self != null && self.open) {
+				let seenSelf = false;
+				for (const panel of list) {
+					if (panel.id === id) {
+						seenSelf = true;
+						continue;
+					}
+					if (panel.open && panel.side === self.side) {
+						stacked = true;
+						if (!seenSelf) dockOffset += panel.size;
+					}
+				}
+			}
+			return {
+				dockOffset,
+				stacked,
+				anyOpen,
+				isPrimary: id === firstId,
+				devtools: list.map(toRef),
+				otherClosed: list.filter((p) => !p.open && p.id !== id).map(toRef)
+			};
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+/**
+* Returns the page-wide dock coordinator, installing it on `window` the first
+* time it is requested. On the server (no `window`) a throwaway instance is
+* returned so callers can use it unconditionally.
+*/
+function getDevtoolsDockCoordinator() {
+	if (typeof window === "undefined") return createCoordinator();
+	const host = window;
+	const existing = host[GLOBAL_KEY];
+	if (existing != null && existing.version === VERSION) return existing;
+	const created = createCoordinator();
+	host[GLOBAL_KEY] = created;
+	return created;
+}
+//#endregion
+//#region ../nice-devtools-shared/src/list.ts
+/**
+* Pin a virtualized list's viewport to a stable anchor row across list
+* mutations. Both devtools timelines are newest-first, so new entries (and
+* merges) prepend at the top; without this they shove whatever the user is
+* looking at downward. The anchor is the selected row when one is visible,
+* otherwise the first visible row, so "the thing I selected / am reading" stays
+* put at the same screen position. Returns an `onScroll` handler that must be
+* wired to the scroll container.
+*
+* `hoveringRef` is optional. When provided, the hook keeps the viewport still
+* even across selection changes while the cursor is over the list — the caller
+* is expected to suppress its own scroll-into-view in that case and let this
+* hold the view rock-still (nice-action's pause-on-hover behaviour). When
+* omitted, a selection change yields to the caller's scroll-into-view effect.
+*/
+function useListScrollAnchor({ containerRef, virtualizer, itemKeys, selectedKey, hoveringRef }) {
+	const anchorRef = (0, react.useRef)(null);
+	const selectedKeyRef = (0, react.useRef)(selectedKey);
+	selectedKeyRef.current = selectedKey;
+	const captureAnchor = (0, react.useCallback)(() => {
+		const el = containerRef.current;
+		if (el == null) return;
+		const items = virtualizer.getVirtualItems();
+		if (items.length === 0) {
+			anchorRef.current = null;
+			return;
+		}
+		const scrollTop = el.scrollTop;
+		const sel = selectedKeyRef.current;
+		const chosen = (sel != null ? items.find((vi) => String(vi.key) === sel) : void 0) ?? items.find((vi) => vi.end > scrollTop) ?? items[0];
+		anchorRef.current = {
+			key: String(chosen.key),
+			delta: chosen.start - scrollTop
+		};
+	}, [containerRef, virtualizer]);
+	const prevSelectedRef = (0, react.useRef)(selectedKey);
+	(0, react.useLayoutEffect)(() => {
+		const selectionChanged = prevSelectedRef.current !== selectedKey;
+		prevSelectedRef.current = selectedKey;
+		if (selectionChanged && !(hoveringRef?.current ?? false)) return;
+		const anchor = anchorRef.current;
+		if (anchor == null) return;
+		const index = itemKeys.indexOf(anchor.key);
+		if (index < 0) return;
+		const offset = virtualizer.getOffsetForIndex(index, "start")?.[0];
+		if (offset == null) return;
+		const target = Math.max(0, offset - anchor.delta);
+		const current = virtualizer.scrollOffset ?? 0;
+		if (Math.abs(target - current) > 1) virtualizer.scrollToOffset(target);
+	}, [
+		itemKeys,
+		selectedKey,
+		virtualizer,
+		hoveringRef
+	]);
+	return captureAnchor;
+}
+//#endregion
+//#region ../nice-devtools-shared/src/components/SectionLabel.tsx
+/** Small uppercase heading used above a detail/section block. */
+function SectionLabel({ label, color = DEVTOOL_COLOR_SEMANTIC_SYSTEM }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			color,
+			fontSize: "0.85em",
+			marginBottom: "3px",
+			textTransform: "uppercase",
+			letterSpacing: "0.05em",
+			fontWeight: 500,
+			textAlign: "left"
+		},
+		children: label
+	});
+}
+//#endregion
+//#region ../nice-devtools-shared/src/components/Tooltip.tsx
+function Tooltip({ anchor, config, children }) {
+	const resolvedTitle = config?.title;
+	const resolvedAlign = config?.align;
+	const resolvedMaxWidth = config?.maxWidth ?? 400;
+	const resolvedContent = config != null ? config.content : children;
+	const showAbove = anchor.top >= window.innerHeight - anchor.bottom;
+	const gap = 6;
+	const screenMargin = 16;
+	const top = showAbove ? Math.round(anchor.top - gap) : Math.round(anchor.bottom + gap);
+	const maxHeight = showAbove ? Math.round(anchor.top - gap - screenMargin) : Math.round(window.innerHeight - anchor.bottom - gap - screenMargin);
+	let left;
+	let right;
+	let transform;
+	if (resolvedAlign === "center") {
+		const halfMax = resolvedMaxWidth != null ? resolvedMaxWidth / 2 : 120;
+		const center = Math.round(anchor.left + anchor.width / 2);
+		left = Math.max(halfMax + screenMargin, Math.min(center, window.innerWidth - halfMax - screenMargin));
+		transform = showAbove ? "translateX(-50%) translateY(-100%)" : "translateX(-50%)";
+	} else {
+		if (anchor.left + anchor.width / 2 <= window.innerWidth / 2) left = Math.max(screenMargin, anchor.left);
+		else right = Math.max(screenMargin, window.innerWidth - anchor.right);
+		if (showAbove) transform = "translateY(-100%)";
+	}
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			position: "fixed",
+			left,
+			right,
+			top,
+			transform,
+			zIndex: 2147483647,
+			background: DEVTOOL_TOOLTIP_BACKGROUND,
+			border: `1px solid ${DEVTOOL_TOOLTIP_BORDER}`,
+			borderRadius: "5px",
+			boxShadow: "0 4px 20px rgba(0,0,0,0.6)",
+			pointerEvents: "none",
+			maxWidth: resolvedMaxWidth != null ? `${resolvedMaxWidth}px` : void 0,
+			maxHeight: `${maxHeight}px`,
+			overflowY: "auto",
+			overflowX: "hidden",
+			whiteSpace: "normal",
+			wordBreak: "break-word",
+			overflowWrap: "anywhere"
+		},
+		children: [resolvedTitle != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				background: "#101b2e",
+				padding: "6px 8px",
+				alignSelf: "start",
+				textAlign: "left",
+				color: "#cbd5e1",
+				fontSize: "0.75rem",
+				fontWeight: 600,
+				paddingBottom: "4px",
+				marginBottom: "4px",
+				borderBottom: `1px solid #211f5f`
+			},
+			children: resolvedTitle
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: { padding: "6px 8px" },
+			children: resolvedContent
+		})]
+	}), document.body);
+}
+/**
+* Wraps inline content so it shows `config` as a hover tooltip. When `config` is null the children
+* render untouched (no hover handlers, no tooltip). Useful for non-Chip text labels that still need
+* the same tooltip treatment as Chips.
+*/
+function HoverTooltip({ config, children, style }) {
+	const [anchor, setAnchor] = (0, react.useState)(null);
+	const enabled = config != null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		onMouseEnter: enabled ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : void 0,
+		onMouseLeave: enabled ? () => setAnchor(null) : void 0,
+		style: {
+			...style,
+			cursor: enabled ? "default" : style?.cursor
+		},
+		children
+	}), enabled && anchor != null && config != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+		anchor,
+		config
+	})] });
+}
+//#endregion
+//#region ../nice-devtools-shared/src/components/PanelChrome.tsx
+const DOCKED_SIZE_MIN = 140;
+const POSITION_GRID = [
+	{
+		key: "tl",
+		pos: null
+	},
+	{
+		key: "tc",
+		pos: "dock-top"
+	},
+	{
+		key: "tr",
+		pos: null
+	},
+	{
+		key: "ml",
+		pos: "dock-left"
+	},
+	{
+		key: "mc",
+		pos: null
+	},
+	{
+		key: "mr",
+		pos: "dock-right"
+	},
+	{
+		key: "bl",
+		pos: null
+	},
+	{
+		key: "bc",
+		pos: "dock-bottom"
+	},
+	{
+		key: "br",
+		pos: null
+	}
+];
+function getDockSide(pos) {
+	switch (pos) {
+		case "dock-top": return "top";
+		case "dock-left": return "left";
+		case "dock-right": return "right";
+		default: return "bottom";
+	}
+}
+function chromeButtonStyle(color) {
+	return {
+		background: "none",
+		border: "none",
+		color,
+		cursor: "pointer",
+		fontSize: "11px",
+		padding: 0,
+		fontFamily: SANS_FONT,
+		whiteSpace: "nowrap"
+	};
+}
+/**
+* The panel's top chrome: a brand/title on the left (plus pills to open any other
+* closed devtools), and the panel controls on the right. The controls column
+* holds any caller-provided `children` (e.g. a mode switch) above a row of the
+* pause/clear actions, then the dock-position picker and the close button.
+*
+* `onTogglePause` is optional — when omitted no pause control is shown (the
+* nice-action timeline has nothing to pause), keeping a single header component
+* consistent across both devtools suites.
+*/
+function PanelHeader({ title, position, onPositionChange, onClose, onClear, paused, onTogglePause, openOthers, children }) {
+	const hasActionsRow = onTogglePause != null || onClear != null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			padding: "6px 11px",
+			gap: "10px",
+			background: DEVTOOL_SECTION_BACKGROUND,
+			borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+			flexShrink: 0
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "8px",
+				minWidth: 0
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+					fontWeight: "bold",
+					fontSize: "11px",
+					whiteSpace: "nowrap"
+				},
+				children: title
+			}), openOthers?.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				onClick: item.onOpen,
+				title: `Open ${item.label} devtools`,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "4px",
+					background: DEVTOOL_LIST_BASE_BACKGROUND,
+					border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
+					borderRadius: "999px",
+					color: DEVTOOL_COLOR_TEXT_MUTED,
+					cursor: "pointer",
+					fontSize: "10px",
+					padding: "1px 7px 1px 6px",
+					fontFamily: SANS_FONT,
+					whiteSpace: "nowrap"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.icon }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }),
+					item.badge != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: { color: "#38BDF8" },
+						children: item.badge
+					})
+				]
+			}, item.id))]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				gap: "10px",
+				alignItems: "center"
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "stretch"
+					},
+					children: [children, hasActionsRow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							gap: "10px",
+							alignItems: "center",
+							justifyContent: "space-between",
+							padding: "3px"
+						},
+						children: [onTogglePause != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							onClick: onTogglePause,
+							title: paused ? "Resume recording" : "Pause recording",
+							style: chromeButtonStyle(paused ? "#38BDF8" : "#64748b"),
+							children: paused ? "▶ resume" : "⏸ pause"
+						}), onClear != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							onClick: onClear,
+							style: chromeButtonStyle("#64748b"),
+							children: "clear"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PositionPicker, {
+					position,
+					onChange: onPositionChange
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					onClick: onClose,
+					style: {
+						...chromeButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
+						fontSize: "16px",
+						lineHeight: "1"
+					},
+					children: "×"
+				})
+			]
+		})]
+	});
+}
+function PositionPicker({ position, onChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		title: "Move / dock panel",
+		style: {
+			display: "grid",
+			gridTemplateColumns: "repeat(3, 9px)",
+			gap: "2px",
+			padding: "2px"
+		},
+		children: POSITION_GRID.map(({ key, pos }) => {
+			if (pos == null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+				width: "9px",
+				height: "9px"
+			} }, key);
+			const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				title: pos,
+				onClick: () => onChange(pos),
+				style: {
+					width: "9px",
+					height: "9px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					cursor: "pointer"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+					width: isTopBottom ? "9px" : "3px",
+					height: isTopBottom ? "3px" : "9px",
+					borderRadius: "1px",
+					background: pos === position ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT
+				} })
+			}, key);
+		})
+	});
+}
+function ResizeHandle({ dockSide, dockedSize, onChange }) {
+	const isHoriz = dockSide === "left" || dockSide === "right";
+	const onMouseDown = (e) => {
+		e.preventDefault();
+		const startCoord = isHoriz ? e.clientX : e.clientY;
+		const startSize = dockedSize;
+		const maxSize = isHoriz ? window.innerWidth * .85 : window.innerHeight * .85;
+		const sign = dockSide === "bottom" || dockSide === "right" ? -1 : 1;
+		const onMove = (me) => {
+			const delta = (isHoriz ? me.clientX : me.clientY) - startCoord;
+			onChange(Math.max(DOCKED_SIZE_MIN, Math.min(maxSize, startSize + sign * delta)));
+		};
+		const onUp = () => {
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+		};
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onMouseDown,
+		style: {
+			position: "absolute",
+			zIndex: 10,
+			background: "transparent",
+			...dockSide === "bottom" ? {
+				top: 0,
+				left: 0,
+				right: 0,
+				height: "5px",
+				cursor: "ns-resize"
+			} : dockSide === "top" ? {
+				bottom: 0,
+				left: 0,
+				right: 0,
+				height: "5px",
+				cursor: "ns-resize"
+			} : dockSide === "right" ? {
+				top: 0,
+				bottom: 0,
+				left: 0,
+				width: "5px",
+				cursor: "ew-resize"
+			} : {
+				top: 0,
+				bottom: 0,
+				right: 0,
+				width: "5px",
+				cursor: "ew-resize"
+			}
+		}
+	});
+}
+const SPLIT_RATIO_MIN = .15;
+const SPLIT_RATIO_MAX = .85;
+/**
+* Draggable divider between the list and the detail pane. `horizontal` refers to
+* the split axis: a row layout (dock top/bottom) splits horizontally and drags
+* left/right; a column layout (dock left/right) splits vertically. The reported
+* ratio is the fraction of the container the *detail* pane should occupy.
+*/
+function SplitHandle({ horizontal, onRatioChange }) {
+	const [hovered, setHovered] = (0, react.useState)(false);
+	const onMouseDown = (e) => {
+		e.preventDefault();
+		const container = e.currentTarget.parentElement;
+		if (container == null) return;
+		const onMove = (me) => {
+			const rect = container.getBoundingClientRect();
+			const ratio = horizontal ? (rect.right - me.clientX) / rect.width : (rect.bottom - me.clientY) / rect.height;
+			onRatioChange(Math.max(SPLIT_RATIO_MIN, Math.min(SPLIT_RATIO_MAX, ratio)));
+		};
+		const onUp = () => {
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+		};
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onMouseDown,
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		style: {
+			flex: "0 0 5px",
+			alignSelf: "stretch",
+			cursor: horizontal ? "ew-resize" : "ns-resize",
+			background: hovered ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "transparent",
+			opacity: hovered ? .6 : 1,
+			zIndex: 5
+		}
+	});
+}
+/**
+* The combined, page-wide launcher shown while every devtool is collapsed — one
+* grouped pill with a segment per registered devtool, so the buttons never
+* overlap or hide behind each other. Rendered by the coordinator's "primary"
+* devtool only.
+*/
+function DevtoolsLauncher({ items }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			position: "fixed",
+			bottom: "16px",
+			right: "16px",
+			zIndex: 2147483647,
+			display: "flex",
+			fontFamily: MONO_FONT,
+			fontSize: "12px"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				display: "flex",
+				background: DEVTOOL_SECTION_BACKGROUND,
+				border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
+				borderRadius: "6px",
+				overflow: "hidden",
+				boxShadow: "0 8px 24px rgba(0,0,0,0.35)"
+			},
+			children: items.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				onClick: item.onOpen,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "5px",
+					background: "transparent",
+					color: DEVTOOL_COLOR_TEXT_SECONDARY,
+					border: "none",
+					borderLeft: i > 0 ? `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}` : "none",
+					cursor: "pointer",
+					padding: "6px 11px",
+					fontFamily: MONO_FONT,
+					fontSize: "12px",
+					lineHeight: "1.5"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.icon }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }),
+					item.badge != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: { color: "#38BDF8" },
+						children: item.badge
+					})
+				]
+			}, item.id))
+		})
+	});
+}
+//#endregion
+//#region ../nice-devtools-shared/src/components/FollowLatestToggles.tsx
+/**
+* The "Follow latest" toggle pair shown above a devtools timeline list, with its
+* indented "clicking latest re-follows" sub-option. `noun` is the thing the
+* timeline tracks ("action" in nice-action, "change" in nice-state) and is woven
+* into the explanatory tooltips so both suites read naturally from one component.
+*/
+function FollowLatestToggles({ noun, stayOnLatest, onStayOnLatestChange, followLatestOnSelect, onFollowLatestOnSelectChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			flexShrink: 0,
+			paddingBottom: "3px",
+			background: DEVTOOL_SECTION_BACKGROUND,
+			borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleLabel, {
+			title: `Auto-select the most recent ${noun} so the detail pane keeps showing the latest as new ${noun}s land`,
+			checked: stayOnLatest,
+			onChange: onStayOnLatestChange,
+			children: "Follow latest"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				paddingLeft: "12px",
+				marginTop: "-4px"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				style: {
+					color: DEVTOOL_COLOR_TEXT_MUTED,
+					fontFamily: SANS_FONT,
+					fontSize: "10px",
+					lineHeight: 1
+				},
+				children: "└"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleLabel, {
+				title: `When you click the latest ${noun}, turn 'Follow latest' back on so the view resumes tracking new ${noun}s. Turn this off to pin exactly to the ${noun} you click instead.`,
+				checked: followLatestOnSelect,
+				onChange: onFollowLatestOnSelectChange,
+				children: "clicking latest re-follows"
+			})]
+		})]
+	});
+}
+function ToggleLabel({ checked, onChange, title, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		title,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: "6px",
+			padding: "5px 10px",
+			cursor: "pointer",
+			userSelect: "none",
+			color: checked ? DEVTOOL_COLOR_TEXT_SECONDARY : DEVTOOL_COLOR_TEXT_MUTED,
+			fontSize: "10px",
+			fontFamily: SANS_FONT
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: "checkbox",
+			checked,
+			onChange: (e) => onChange(e.target.checked),
+			style: {
+				accentColor: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+				cursor: "pointer",
+				margin: 0
+			}
+		}), children]
+	});
+}
+//#endregion
+//#region ../nice-devtools-shared/src/components/VirtualList.tsx
+/**
+* The shared, virtualized timeline list used by both the nice-action and
+* nice-state devtools. It owns everything about *how the list behaves* — windowed
+* rendering, viewport anchoring across prepends, scroll-the-selection-into-view,
+* and pause-on-hover with a "N new" catch-up hint — while each devtool supplies
+* its own `renderItem` for the row content (which stays unique per devtool).
+*
+* Behaviour notes:
+*   • The list is assumed newest-first: new rows prepend at the top. While the
+*     cursor is over the list the viewport is held perfectly still (so reading
+*     isn't disrupted); fresh rows still render above and a sticky "↑ N new"
+*     badge hints they're there. Move the cursor away and normal follow resumes.
+*   • `selectedKey` is the stable item key of the selected row (NOT necessarily a
+*     sub-selection inside it). When it changes the row is scrolled into view —
+*     unless the cursor is hovering, in which case the view is left untouched.
+*/
+function DevtoolsVirtualList({ items, getItemKey, renderItem, selectedKey, estimateSize, overscan = 8, rowStyle, empty, footer, style }) {
+	const containerRef = (0, react.useRef)(null);
+	const [isHovering, setIsHovering] = (0, react.useState)(false);
+	const hoveringRef = (0, react.useRef)(false);
+	hoveringRef.current = isHovering;
+	const hoverBaselineCountRef = (0, react.useRef)(0);
+	const pendingCount = isHovering ? Math.max(0, items.length - hoverBaselineCountRef.current) : 0;
+	const hasPendingActivity = isHovering && pendingCount > 0;
+	const getItemKeyRef = (0, react.useRef)(getItemKey);
+	getItemKeyRef.current = getItemKey;
+	const itemKeys = (0, react.useMemo)(() => items.map((item, i) => getItemKeyRef.current(item, i)), [items]);
+	const virtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
+		count: items.length,
+		getScrollElement: () => containerRef.current,
+		estimateSize: () => estimateSize,
+		overscan,
+		getItemKey: (index) => itemKeys[index]
+	});
+	const onScroll = useListScrollAnchor({
+		containerRef,
+		virtualizer,
+		itemKeys,
+		selectedKey,
+		hoveringRef
+	});
+	const prevSelectedRef = (0, react.useRef)(selectedKey);
+	(0, react.useEffect)(() => {
+		if (selectedKey === prevSelectedRef.current) return;
+		prevSelectedRef.current = selectedKey;
+		if (selectedKey == null) return;
+		if (hoveringRef.current) return;
+		const index = itemKeys.indexOf(selectedKey);
+		if (index >= 0) virtualizer.scrollToIndex(index, { align: "auto" });
+	}, [
+		selectedKey,
+		itemKeys,
+		virtualizer
+	]);
+	if (items.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: empty });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		style,
+		onScroll,
+		onMouseEnter: () => {
+			hoverBaselineCountRef.current = items.length;
+			setIsHovering(true);
+		},
+		onMouseLeave: () => setIsHovering(false),
+		children: [
+			hasPendingActivity && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PendingIndicator, { count: pendingCount }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					position: "relative",
+					width: "100%",
+					height: virtualizer.getTotalSize()
+				},
+				children: virtualizer.getVirtualItems().map((vItem) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-index": vItem.index,
+					ref: virtualizer.measureElement,
+					style: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						width: "100%",
+						transform: `translateY(${vItem.start}px)`,
+						...rowStyle
+					},
+					children: renderItem(items[vItem.index], vItem.index)
+				}, vItem.key))
+			}),
+			footer
+		]
+	});
+}
+/**
+* A sticky, zero-height overlay floating over the rows without taking layout space. Shown only once
+* new items have arrived while hovering, hinting they're above (newest-first) so the user can scroll
+* up without the view having jumped there.
+*/
+function PendingIndicator({ count }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			position: "sticky",
+			top: 0,
+			height: 0,
+			zIndex: 5,
+			pointerEvents: "none"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				position: "absolute",
+				top: "6px",
+				right: "10px",
+				display: "flex",
+				alignItems: "center",
+				gap: "5px",
+				padding: "2px 7px",
+				borderRadius: "10px",
+				fontSize: "10px",
+				fontFamily: SANS_FONT,
+				color: DEVTOOL_COLOR_SEMANTIC_WARNING,
+				background: DEVTOOL_TOOLTIP_BACKGROUND,
+				border: `1px solid ${DEVTOOL_COLOR_SEMANTIC_WARNING}55`,
+				boxShadow: "0 2px 8px rgba(0,0,0,0.5)",
+				whiteSpace: "nowrap"
+			},
+			children: [
+				"↑ ",
+				count,
+				" new"
+			]
+		})
+	});
+}
+//#endregion
+//#region src/devtools/core/devtools_colors.ts
+const DEVTOOL_COLOR_HANDLER_LOCAL_TEXT = "#34bb89";
+const DEVTOOL_COLOR_HANDLER_LOCAL_BORDER = "#144427";
+const DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT = "#cfa12a";
+const DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER = "#723917";
+const DEVTOOL_LIST_HEADER_SELECTED_BACKGROUND = "#1d2942";
+const DEVTOOL_LIST_GROUP_DIVIDER = "#101109";
+const DEVTOOL_STACK_TRACE_BACKGROUND = "#040a13";
+const DEVTOOL_ERROR_BADGE_BACKGROUND = "#2d0f0f";
+const DEVTOOL_COLOR_CALL_STACK_DIVIDER = "#0a1120";
+const DEVTOOL_STACK_FRAME_USER_NUMBER = "#64748b";
+const DEVTOOL_STACK_FRAME_USER_FUNCTION = "#e2e8f0";
+const DEVTOOL_STACK_FRAME_USER_FILE = "#8a9ebb";
+const DEVTOOL_STACK_FRAME_INTERNAL_NUMBER = "#2d3f53";
+const DEVTOOL_STACK_FRAME_INTERNAL_FUNCTION = "#50698b";
+const DEVTOOL_STACK_FRAME_INTERNAL_FILE = "#425979";
+const SEMANTIC_COLORS = {
+	running_action: {
+		color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+		borderColor: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM}55`
+	},
+	success: {
+		color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
+		borderColor: `${DEVTOOL_COLOR_SEMANTIC_SUCCESS}55`
+	},
+	action_error: {
+		color: DEVTOOL_COLOR_SEMANTIC_WARNING,
+		borderColor: `${DEVTOOL_COLOR_SEMANTIC_WARNING}55`
+	},
+	failed: {
+		color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+		borderColor: `${DEVTOOL_COLOR_SEMANTIC_ERROR}55`
+	},
+	aborted: {
+		color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+		borderColor: DEVTOOL_COLOR_TEXT_FAINT
+	},
+	error: {
+		color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+		borderColor: DEVTOOL_COLOR_SEMANTIC_ERROR,
+		subtle: {
+			color: "#FF5C5C9f",
+			borderColor: "transparent"
+		}
+	},
+	domain: {
+		color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+		borderColor: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM}55`,
+		subtle: {
+			color: "#4b5563",
+			borderColor: "transparent"
+		}
+	},
+	handler_local: {
+		color: DEVTOOL_COLOR_HANDLER_LOCAL_TEXT,
+		borderColor: DEVTOOL_COLOR_HANDLER_LOCAL_BORDER,
+		subtle: {
+			color: "#4b5563",
+			borderColor: "transparent"
+		}
+	},
+	handler_external: {
+		color: DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT,
+		borderColor: DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER,
+		subtle: {
+			color: "#cfa12a9f",
+			borderColor: "transparent"
+		}
+	},
+	origin: {
+		color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+		borderColor: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM}55`,
+		subtle: {
+			color: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM}9f`,
+			borderColor: "transparent"
+		}
+	},
+	age: {
+		color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+		borderColor: DEVTOOL_SECTION_BACKGROUND,
+		subtle: {
+			color: "#4b5563",
+			borderColor: "transparent"
+		}
+	},
+	io_input: {
+		color: "#fbbf24",
+		subtle: {
+			color: "#fbbe249f",
+			borderColor: "transparent"
+		},
+		borderColor: "#78350f"
+	},
+	io_output: {
+		color: "#a78bfa",
+		subtle: {
+			color: "#a78bfa9f",
+			borderColor: "transparent"
+		},
+		borderColor: "#4c1d95"
+	},
+	default: {
+		color: DEVTOOL_COLOR_TEXT_MUTED,
+		borderColor: DEVTOOL_COLOR_TEXT_FAINT
+	}
+};
+//#endregion
+//#region src/devtools/browser/ui_util/size.ts
+function getSizeValue(size) {
+	switch (size) {
+		case "sm": return .75;
+		case "md": return 1;
+		case "lg": return 1.2;
+		default: return 1;
+	}
+}
+//#endregion
+//#region src/devtools/browser/components/DetailSection.tsx
+const COMPACT_CHAR_LIMIT = 120;
+const MONO$2 = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
+function tryParseJson(s) {
+	try {
+		return JSON.parse(s);
+	} catch {
+		return null;
+	}
+}
+function DetailSection({ label, value, color = DEVTOOL_COLOR_SEMANTIC_SYSTEM }) {
+	const parsedFromString = typeof value === "string" ? tryParseJson(value) : null;
+	const isPlainString = typeof value === "string" && parsedFromString === null;
+	const effectiveValue = parsedFromString !== null ? parsedFromString : value;
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const fullJson = isPlainString ? value : safeStringify(effectiveValue, 2);
+	const compactJson = isPlainString ? value : safeStringify(effectiveValue, 0);
+	const canExpand = fullJson !== compactJson || compactJson.length > COMPACT_CHAR_LIMIT;
+	const compactDisplay = compactJson.length > COMPACT_CHAR_LIMIT ? `${compactJson.slice(0, COMPACT_CHAR_LIMIT)}…` : compactJson;
+	const baseStyle = isPlainString ? {
+		background: DEVTOOL_SECTION_STRING_BACKGROUND,
+		color: DEVTOOL_COLOR_TEXT_MUTED
+	} : {
+		background: DEVTOOL_SECTION_BACKGROUND,
+		color: DEVTOOL_COLOR_TEXT_SECONDARY
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			marginBottom: "3px"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionLabel, {
+			label,
+			color
+		}), canExpand && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				color: "#334155",
+				fontSize: "11px"
+			},
+			children: expanded ? "▾" : "▸"
+		})]
+	}), expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onClick: canExpand ? () => setExpanded(false) : void 0,
+		style: {
+			margin: 0,
+			padding: "6px 8px",
+			borderRadius: "4px",
+			fontSize: "11px",
+			fontFamily: MONO$2,
+			overflowX: "auto",
+			textAlign: "left",
+			whiteSpace: "pre-wrap",
+			wordBreak: "break-all",
+			cursor: canExpand ? "pointer" : "default",
+			fontStyle: isPlainString ? "italic" : "normal",
+			...baseStyle
+		},
+		children: isPlainString ? fullJson : renderColoredJson(fullJson)
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onClick: canExpand ? () => setExpanded(true) : void 0,
+		style: {
+			padding: "5px 8px",
+			borderRadius: "4px",
+			fontSize: "11px",
+			fontFamily: MONO$2,
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			cursor: canExpand ? "pointer" : "default",
+			fontStyle: isPlainString ? "italic" : "normal",
+			...baseStyle
+		},
+		children: compactDisplay
+	})] });
+}
+//#endregion
+//#region src/devtools/browser/components/NiceErrorDisplay.tsx
+const MONO$1 = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
+const SANS$1 = "ui-sans-serif, system-ui, -apple-system, sans-serif";
+function isNiceErrorJson(value) {
+	if (typeof value !== "object" || value == null) return false;
+	const v = value;
+	return v["name"] === "NiceError" && Array.isArray(v["ids"]) && typeof v["message"] === "string";
+}
+function NiceErrorBody({ error }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			background: DEVTOOL_ERROR_BACKGROUND,
+			border: `1px solid ${DEVTOOL_COLOR_SEMANTIC_ERROR}`,
+			borderRadius: "4px",
+			overflow: "hidden"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				padding: "12px 14px",
+				color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+				fontSize: "1em",
+				fontWeight: "700",
+				lineHeight: "1.45",
+				wordBreak: "break-word",
+				fontFamily: SANS$1,
+				textAlign: "left",
+				borderBottom: `1px solid ${DEVTOOL_ERROR_BADGE_BACKGROUND}`
+			},
+			children: error.message
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				padding: "6px 14px 8px",
+				display: "flex",
+				flexWrap: "wrap",
+				gap: "10px",
+				alignItems: "center",
+				background: DEVTOOL_ERROR_BADGE_BACKGROUND
+			},
+			children: [
+				error.ids.map((id) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: {
+						color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+						fontFamily: MONO$1,
+						fontSize: "11px",
+						fontWeight: "600"
+					},
+					children: id
+				}, id)),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: {
+						color: DEVTOOL_COLOR_TEXT_MUTED,
+						fontSize: "10px",
+						fontFamily: SANS$1
+					},
+					children: [
+						"domain:",
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								color: DEVTOOL_COLOR_TEXT_MUTED,
+								fontFamily: MONO$1
+							},
+							children: error.def.domain
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: {
+						color: DEVTOOL_COLOR_TEXT_MUTED,
+						fontSize: "10px",
+						fontFamily: SANS$1
+					},
+					children: [
+						"http:",
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								color: DEVTOOL_COLOR_TEXT_MUTED,
+								fontFamily: MONO$1
+							},
+							children: error.httpStatusCode
+						})
+					]
+				})
+			]
+		})]
+	});
+}
+function NiceErrorDisplay({ error, label, color }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionLabel, {
+		label,
+		color
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NiceErrorBody, { error })] });
+}
+//#endregion
+//#region src/devtools/browser/devtools_storage.ts
+const devtools_storage = (0, _nice_code_util.createTypedWebLocalStorage)({
+	localStorage: window.localStorage,
+	keyPrefix: "nice-action-devtools::"
+});
+devtools_storage.updateJsonWithDef("runtimeToProjectFilePath", {}, (prev) => prev);
+//#endregion
+//#region src/devtools/browser/components/sourceMapResolver.ts
+const consumerCache = /* @__PURE__ */ new Map();
+async function loadConsumer(fileUrl) {
+	try {
+		if (!fileUrl.startsWith("http://") && !fileUrl.startsWith("https://")) return null;
+		const resp = await fetch(fileUrl);
+		if (!resp.ok) return null;
+		const match = (await resp.text()).match(/\/\/[#@] sourceMappingURL=(\S+)/);
+		if (match == null) return null;
+		const mapRef = match[1];
+		let mapJson;
+		if (mapRef.startsWith("data:")) {
+			const commaIdx = mapRef.indexOf(",");
+			if (commaIdx === -1) return null;
+			const header = mapRef.slice(5, commaIdx);
+			const payload = mapRef.slice(commaIdx + 1);
+			mapJson = header.includes("base64") ? atob(payload) : decodeURIComponent(payload);
+		} else {
+			const mapUrl = new URL(mapRef, fileUrl).href;
+			const mapResp = await fetch(mapUrl);
+			if (!mapResp.ok) return null;
+			mapJson = await mapResp.text();
+		}
+		return new source_map_js.SourceMapConsumer(JSON.parse(mapJson));
+	} catch {
+		return null;
+	}
+}
+function getConsumer(fileUrl) {
+	const key = fileUrl.split("?")[0] ?? fileUrl;
+	if (!consumerCache.has(key)) consumerCache.set(key, loadConsumer(fileUrl));
+	return consumerCache.get(key);
+}
+async function resolveCompiledPosition(fileUrl, line, col) {
+	try {
+		const consumer = await getConsumer(fileUrl);
+		if (consumer == null) return null;
+		const pos = consumer.originalPositionFor({
+			line,
+			column: col
+		});
+		if (pos.source == null || pos.line == null) return null;
+		return {
+			file: pos.source,
+			line: pos.line,
+			col: pos.column ?? 0
+		};
+	} catch {
+		return null;
+	}
+}
+//#endregion
+//#region src/devtools/browser/components/StackTraceSection.tsx
+const INTERNAL_PATTERNS = [
+	"/nice-action/",
+	"@nice-code/action",
+	"/nice-error/",
+	"@nice-code/error",
+	"node_modules/",
+	"native code",
+	"<anonymous>"
+];
+function isInternalFrame(file) {
+	return INTERNAL_PATTERNS.some((p) => file.includes(p));
+}
+function parseStackFrames(stack) {
+	return stack.split("\n").slice(1).map((line) => {
+		const raw = line.trim();
+		if (raw === "") return null;
+		const matchFn = raw.match(/^at (.+?) \((.+):(\d+):(\d+)\)$/);
+		if (matchFn != null) {
+			const file = matchFn[2];
+			return {
+				fn: matchFn[1],
+				file,
+				line: parseInt(matchFn[3], 10),
+				col: parseInt(matchFn[4], 10),
+				raw,
+				isInternal: isInternalFrame(file)
+			};
+		}
+		const matchUrl = raw.match(/^at (.+):(\d+):(\d+)$/);
+		if (matchUrl != null) {
+			const file = matchUrl[1];
+			return {
+				file,
+				line: parseInt(matchUrl[2], 10),
+				col: parseInt(matchUrl[3], 10),
+				raw,
+				isInternal: isInternalFrame(file)
+			};
+		}
+		return {
+			raw,
+			isInternal: true
+		};
+	}).filter((f) => f != null);
+}
+async function resolveSourceMapPositions(frames) {
+	return Promise.all(frames.map(async (frame) => {
+		if (frame.isInternal || frame.file == null || frame.line == null) return frame;
+		const resolved = await resolveCompiledPosition(frame.file, frame.line, frame.col ?? 0);
+		if (resolved == null) return frame;
+		return {
+			...frame,
+			originalFile: frame.file,
+			file: resolved.file,
+			line: resolved.line,
+			col: resolved.col
+		};
+	}));
+}
+function formatFrameFile(file) {
+	if (file == null) return "?";
+	let path = file;
+	try {
+		const url = new URL(file);
+		path = url.pathname.split("?")[0] ?? url.pathname;
+		if (path.startsWith("/@fs/")) path = path.slice(4);
+	} catch {}
+	const parts = path.replace(/\\/g, "/").split("/").filter(Boolean);
+	return (parts[0]?.match(/^[a-zA-Z]:$/) != null ? parts.slice(1) : parts).slice(-4).join("/") || file;
+}
+function getOriginUrl(frame) {
+	const candidate = frame.originalFile ?? frame.file;
+	if (candidate == null) return null;
+	try {
+		new URL(candidate);
+		return candidate;
+	} catch {
+		return null;
+	}
+}
+function frameNeedsProjectRoot(frame) {
+	if (frame.isInternal) return false;
+	const originUrl = getOriginUrl(frame);
+	if (originUrl == null) return false;
+	return !(new URL(originUrl).pathname.split("?")[0] ?? "").startsWith("/@fs/");
+}
+function buildVscodeUrl(frame, projectRoot) {
+	if (frame.line == null) return null;
+	const originUrl = getOriginUrl(frame);
+	if (originUrl != null) {
+		let path = new URL(originUrl).pathname.split("?")[0] ?? "";
+		if (path.startsWith("/@fs/")) {
+			path = path.slice(5);
+			if (/^\/[a-zA-Z]:\//.test(path)) path = path.slice(1);
+			return `vscode://file/${path}:${frame.line}:${frame.col ?? 1}`;
+		}
+		if (projectRoot == null) return null;
+		return `vscode://file/${projectRoot.replace(/[/\\]+$/, "").replace(/\\/g, "/")}${path}:${frame.line}:${frame.col ?? 1}`;
+	}
+	const filePath = frame.file;
+	if (filePath == null) return null;
+	const normalPath = filePath.replace(/\\/g, "/");
+	if (/^[a-zA-Z]:\//.test(normalPath)) return `vscode://file/${normalPath}:${frame.line}:${frame.col ?? 1}`;
+	if (/^\/[a-zA-Z]:\//.test(normalPath)) return `vscode://file/${normalPath.slice(1)}:${frame.line}:${frame.col ?? 1}`;
+	if (normalPath.startsWith("/")) {
+		if (projectRoot == null) return null;
+		return `vscode://file/${projectRoot.replace(/[/\\]+$/, "").replace(/\\/g, "/")}${normalPath}:${frame.line}:${frame.col ?? 1}`;
+	}
+	if (projectRoot == null) return null;
+	return `vscode://file/${projectRoot.replace(/[/\\]+$/, "").replace(/\\/g, "/")}/${normalPath}:${frame.line}:${frame.col ?? 1}`;
+}
+function ProjectRootSetupModal({ envId, currentValue, onSave, onCancel }) {
+	const [value, setValue] = (0, react.useState)(currentValue);
+	const inputRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		inputRef.current?.focus();
+		inputRef.current?.select();
+	}, []);
+	(0, react.useEffect)(() => {
+		const handler = (e) => {
+			if (e.key === "Escape") onCancel();
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [onCancel]);
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		const trimmed = value.trim();
+		if (trimmed !== "") onSave(trimmed);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			position: "fixed",
+			inset: 0,
+			zIndex: 2147483647,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			onClick: onCancel,
+			style: {
+				position: "absolute",
+				inset: 0,
+				background: "rgba(0, 0, 0, 0.72)"
+			}
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+			onSubmit: handleSubmit,
+			style: {
+				position: "relative",
+				background: DEVTOOL_TOOLTIP_BACKGROUND,
+				border: `1px solid ${DEVTOOL_TOOLTIP_BORDER}`,
+				borderRadius: "8px",
+				width: "420px",
+				maxWidth: "90vw",
+				boxShadow: "0 8px 32px rgba(0, 0, 0, 0.8)",
+				overflow: "hidden",
+				display: "flex",
+				flexDirection: "column"
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						background: DEVTOOL_TOOLTIP_TITLE_BACKGROUND,
+						borderBottom: `1px solid ${DEVTOOL_TOOLTIP_BORDER}`,
+						padding: "10px 14px"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							color: DEVTOOL_COLOR_TEXT_EMPHASIS,
+							fontSize: "12px",
+							fontWeight: 600,
+							marginBottom: "2px"
+						},
+						children: "Set project root"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							color: DEVTOOL_COLOR_TEXT_MUTED,
+							fontSize: "10px"
+						},
+						children: [
+							"Runtime:",
+							" ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: {
+									color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+									fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace"
+								},
+								children: envId
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						padding: "14px",
+						display: "flex",
+						flexDirection: "column",
+						gap: "8px"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							color: DEVTOOL_COLOR_TEXT_MUTED,
+							fontSize: "10px",
+							lineHeight: 1.4
+						},
+						children: [
+							"Provide the absolute path to this project's root so that root-relative source file paths (e.g.",
+							" ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: { fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace" },
+								children: "src/App.tsx"
+							}),
+							") can be opened in VS Code."
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref: inputRef,
+						value,
+						onChange: (e) => setValue(e.currentTarget.value),
+						placeholder: "e.g. C:/d/nice-code/packages/demo-frontend",
+						style: {
+							background: DEVTOOL_STACK_TRACE_BACKGROUND,
+							border: `1px solid ${DEVTOOL_TOOLTIP_BORDER}`,
+							borderRadius: "4px",
+							color: DEVTOOL_COLOR_TEXT_SECONDARY,
+							fontSize: "11px",
+							fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+							padding: "7px 9px",
+							outline: "none",
+							width: "100%",
+							boxSizing: "border-box"
+						}
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						justifyContent: "flex-end",
+						gap: "8px",
+						padding: "10px 14px",
+						borderTop: `1px solid ${DEVTOOL_PANEL_BORDER}`
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: onCancel,
+						style: {
+							background: "transparent",
+							border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
+							borderRadius: "4px",
+							color: DEVTOOL_COLOR_TEXT_MUTED,
+							fontSize: "11px",
+							padding: "5px 12px",
+							cursor: "pointer"
+						},
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "submit",
+						disabled: value.trim() === "",
+						style: {
+							background: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM}22`,
+							border: `1px solid ${DEVTOOL_COLOR_SEMANTIC_SYSTEM}66`,
+							borderRadius: "4px",
+							color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+							fontSize: "11px",
+							padding: "5px 12px",
+							cursor: value.trim() === "" ? "not-allowed" : "pointer",
+							opacity: value.trim() === "" ? .5 : 1
+						},
+						children: "Save"
+					})]
+				})
+			]
+		})]
+	});
+}
+function OpenInVscodeButton({ frame, projectRoot, onNeedSetup }) {
+	const [hovered, setHovered] = (0, react.useState)(false);
+	const needsSetup = frameNeedsProjectRoot(frame) && projectRoot == null;
+	const url = buildVscodeUrl(frame, projectRoot);
+	if (frame.file == null || frame.line == null) return null;
+	if (!needsSetup && url == null) return null;
+	const baseStyle = {
+		position: "absolute",
+		bottom: "3px",
+		right: "4px",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "16px",
+		height: "16px",
+		opacity: hovered ? .85 : .25,
+		transition: "opacity 0.15s ease",
+		cursor: "pointer",
+		flexShrink: 0
+	};
+	if (needsSetup) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		onClick: (e) => {
+			e.stopPropagation();
+			onNeedSetup();
+		},
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		title: "Set project root to open in VS Code",
+		style: {
+			...baseStyle,
+			color: DEVTOOL_COLOR_SEMANTIC_WARNING,
+			background: "none",
+			border: "none",
+			padding: 0
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ExternalLink, {
+			size: 10,
+			strokeWidth: 1.8
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: url,
+		onClick: (e) => e.stopPropagation(),
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		title: "Open in VS Code",
+		style: {
+			...baseStyle,
+			color: DEVTOOL_COLOR_TEXT_SECONDARY,
+			textDecoration: "none"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ExternalLink, {
+			size: 10,
+			strokeWidth: 1.8
+		})
+	});
+}
+function countUserFrames(_runtime, stack) {
+	if (stack == null) return 0;
+	return parseStackFrames(stack).filter((f) => !f.isInternal).length;
+}
+function StackTraceSection({ label, stack, color = DEVTOOL_COLOR_SEMANTIC_SYSTEM, runtime, minFrameCount }) {
+	const [showAll, setShowAll] = (0, react.useState)(false);
+	const [resolvedFrames, setResolvedFrames] = (0, react.useState)(null);
+	const [projectRootMap, setProjectRootMap] = (0, react.useState)({});
+	const [showSetupModal, setShowSetupModal] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		devtools_storage.getJsonOrDef("runtimeToProjectFilePath", {}).then((map) => setProjectRootMap(map));
+	}, []);
+	(0, react.useEffect)(() => {
+		if (stack == null) return;
+		setResolvedFrames(null);
+		const parsed = parseStackFrames(stack);
+		let cancelled = false;
+		resolveSourceMapPositions(parsed).then((frames) => {
+			if (!cancelled) setResolvedFrames(frames);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [stack]);
+	if (stack == null) return null;
+	const allFrames = resolvedFrames ?? parseStackFrames(stack);
+	const userFrames = allFrames.filter((f) => !f.isInternal);
+	const hasInternalFrames = allFrames.length > userFrames.length;
+	const displayFrames = showAll ? allFrames : userFrames;
+	const phantomFrameCount = !showAll ? Math.max(0, (minFrameCount ?? 0) - displayFrames.length) : 0;
+	if (allFrames.length === 0) return null;
+	const runtimeKey = `envId[${runtime.envId}]`;
+	const projectRoot = projectRootMap[runtimeKey] ?? null;
+	const handleSaveProjectRoot = (path) => {
+		setProjectRootMap((prev) => ({
+			...prev,
+			[runtimeKey]: path
+		}));
+		setShowSetupModal(false);
+		devtools_storage.updateJsonWithDef("runtimeToProjectFilePath", {}, (prev) => ({
+			...prev,
+			[runtimeKey]: path
+		}));
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				marginBottom: "3px"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionLabel, {
+				label,
+				color
+			}), hasInternalFrames && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					color: "#64748b",
+					fontSize: "9px"
+				},
+				children: !showAll ? "user only" : `all (${allFrames.length})`
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			onClick: () => setShowAll((s) => !s),
+			style: {
+				background: DEVTOOL_STACK_TRACE_BACKGROUND,
+				borderRadius: "4px",
+				padding: "2px",
+				overflow: "hidden",
+				cursor: "pointer"
+			},
+			children: [displayFrames.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					padding: "6px 10px",
+					color: DEVTOOL_COLOR_TEXT_MUTED,
+					fontSize: "10px",
+					fontStyle: "italic"
+				},
+				children: "no user frames captured"
+			}) : displayFrames.map((frame, idx) => {
+				const displayFile = formatFrameFile(frame.file);
+				const slashIdx = displayFile.lastIndexOf("/");
+				const folderPrefix = slashIdx >= 0 ? displayFile.slice(0, slashIdx + 1) : "";
+				const bareFilename = slashIdx >= 0 ? displayFile.slice(slashIdx + 1) : displayFile;
+				const titleStr = frame.file != null ? frame.file : frame.raw;
+				const isUser = !frame.isInternal;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					title: titleStr,
+					style: {
+						position: "relative",
+						display: "flex",
+						flexDirection: "row",
+						gap: "0.5em",
+						padding: "4px",
+						paddingRight: "22px",
+						borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								color: isUser ? DEVTOOL_STACK_FRAME_USER_NUMBER : DEVTOOL_STACK_FRAME_INTERNAL_NUMBER,
+								fontSize: "10px",
+								minWidth: "10px",
+								textAlign: "left",
+								flexShrink: 0,
+								fontVariantNumeric: "tabular-nums"
+							},
+							children: idx + 1
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: "0.15em",
+								lineHeight: 1.2
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: {
+									display: "flex",
+									alignItems: "center"
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: {
+										color: isUser ? DEVTOOL_STACK_FRAME_USER_FUNCTION : DEVTOOL_STACK_FRAME_INTERNAL_FUNCTION,
+										fontSize: "12px",
+										fontWeight: 500,
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap"
+									},
+									children: frame.fn ?? "(anonymous)"
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: {
+									display: "flex",
+									alignItems: "baseline",
+									overflow: "hidden"
+								},
+								children: [
+									folderPrefix !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: {
+											color: isUser ? "#596b83" : "#2d3f53",
+											fontSize: "10px",
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap",
+											flexShrink: 1,
+											minWidth: 0
+										},
+										children: folderPrefix
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: {
+											color: isUser ? DEVTOOL_STACK_FRAME_USER_FILE : DEVTOOL_STACK_FRAME_INTERNAL_FILE,
+											fontSize: "10px",
+											whiteSpace: "nowrap",
+											flexShrink: 0
+										},
+										children: bareFilename
+									}),
+									frame.line != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										style: {
+											color: isUser ? "#4a7fa8" : "#2d4a63",
+											fontSize: "10px",
+											whiteSpace: "nowrap",
+											flexShrink: 0,
+											fontVariantNumeric: "tabular-nums"
+										},
+										children: [":", frame.line]
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenInVscodeButton, {
+							frame,
+							projectRoot,
+							onNeedSetup: () => setShowSetupModal(true)
+						})
+					]
+				}, frame.raw);
+			}), Array.from({ length: phantomFrameCount }, (_, i) => i).map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"aria-hidden": "true",
+				style: {
+					visibility: "hidden",
+					display: "flex",
+					flexDirection: "row",
+					gap: "0.5em",
+					padding: "4px",
+					borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: {
+						fontSize: "10px",
+						minWidth: "10px",
+						flexShrink: 0
+					},
+					children: "0"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: "0.15em",
+						lineHeight: 1.2
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: { fontSize: "12px" },
+						children: "placeholder"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: { fontSize: "10px" },
+						children: "placeholder/file.ts:1"
+					})]
+				})]
+			}, `phantom-${i}`))]
+		}),
+		showSetupModal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProjectRootSetupModal, {
+			envId: runtime.envId,
+			currentValue: projectRoot ?? "",
+			onSave: handleSaveProjectRoot,
+			onCancel: () => setShowSetupModal(false)
+		})
+	] });
+}
+//#endregion
+//#region src/devtools/browser/components/ActionErrorDisplay.tsx
+const MONO = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
+const SANS = "ui-sans-serif, system-ui, -apple-system, sans-serif";
+function FullErrorContent({ label, error, errorStack, color, runtime }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isNiceErrorJson(error) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NiceErrorDisplay, {
+		error,
+		label,
+		color
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailSection, {
+		label,
+		value: error,
+		color
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StackTraceSection, {
+		runtime,
+		label: "Error Stack",
+		stack: errorStack,
+		color
+	})] });
+}
+function CompactErrorContent({ value, color }) {
+	if (isNiceErrorJson(value)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "1em",
+			width: "100%",
+			minWidth: 0
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				color,
+				fontFamily: SANS,
+				fontSize: "12px",
+				fontWeight: 600,
+				lineHeight: "1.4",
+				wordBreak: "break-word",
+				overflowWrap: "anywhere",
+				textAlign: "left"
+			},
+			children: value.message
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				flexWrap: "wrap",
+				gap: "6px",
+				alignItems: "center",
+				minWidth: 0
+			},
+			children: [value.ids.map((id) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					color,
+					fontFamily: MONO,
+					fontSize: "10px",
+					opacity: .8,
+					wordBreak: "break-word",
+					overflowWrap: "anywhere"
+				},
+				children: id
+			}, id)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					color: DEVTOOL_COLOR_TEXT_MUTED,
+					fontFamily: MONO,
+					fontSize: "10px",
+					wordBreak: "break-word",
+					overflowWrap: "anywhere"
+				},
+				children: value.def.domain
+			})]
+		})]
+	});
+	const text = typeof value === "string" ? value : value != null ? String(value) : null;
+	if (text == null) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			color,
+			fontFamily: SANS,
+			fontSize: "12px",
+			lineHeight: "1.4",
+			wordBreak: "break-word",
+			overflowWrap: "anywhere"
+		},
+		children: text
+	});
+}
+function ActionErrorDisplay({ entry, compact }) {
+	const { status, error, abortReason, errorStack } = entry;
+	if (status === "action-error") {
+		const color = DEVTOOL_COLOR_SEMANTIC_ERROR;
+		if (compact) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompactErrorContent, {
+			value: error,
+			color
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FullErrorContent, {
+			runtime: entry.meta.originClient,
+			label: "Action Error",
+			error,
+			errorStack,
+			color
+		});
+	}
+	if (status === "failed") {
+		const color = DEVTOOL_COLOR_SEMANTIC_ERROR;
+		if (compact) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompactErrorContent, {
+			value: error,
+			color
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FullErrorContent, {
+			runtime: entry.meta.originClient,
+			label: "Error",
+			error,
+			errorStack,
+			color
+		});
+	}
+	if (status === "aborted") {
+		const color = DEVTOOL_COLOR_SEMANTIC_METADATA;
+		if (compact) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompactErrorContent, {
+			value: abortReason,
+			color
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [abortReason != null && (isNiceErrorJson(abortReason) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NiceErrorDisplay, {
+			error: abortReason,
+			label: "Abort Reason",
+			color
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailSection, {
+			label: "Abort Reason",
+			value: abortReason,
+			color
+		})), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StackTraceSection, {
+			runtime: entry.meta.originClient,
+			label: "Abort Stack",
+			stack: errorStack,
+			color
+		})] });
+	}
+	return null;
+}
+//#endregion
+//#region src/devtools/browser/components/Chip.tsx
+const CHIP_SIZE_STYLES = {
+	["sm"]: {
+		fontSize: "0.8em",
+		padding: "1px 3px"
+	},
+	["md"]: {
+		fontSize: "0.9em",
+		padding: "1px 4px"
+	},
+	["lg"]: {
+		fontSize: "1em",
+		padding: "2px 6px"
+	}
+};
+function Chip({ color, subtle = false, size = "md", rounded = false, tooltip, children }) {
+	const [anchor, setAnchor] = (0, react.useState)(null);
+	const hasTooltip = tooltip != null;
+	const { fontSize, padding } = CHIP_SIZE_STYLES[size];
+	const colorEntry = SEMANTIC_COLORS[color];
+	const resolvedColor = subtle ? colorEntry.subtle?.color ?? colorEntry.color : colorEntry.color;
+	const resolvedBorderColor = subtle ? colorEntry.subtle?.borderColor ?? "transparent" : colorEntry.borderColor;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : void 0,
+		onMouseLeave: hasTooltip ? () => setAnchor(null) : void 0,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			color: resolvedColor,
+			fontSize,
+			background: DEVTOOL_LIST_BASE_BACKGROUND,
+			border: `1px solid ${resolvedBorderColor}`,
+			padding,
+			borderRadius: rounded ? "0.6rem" : "3px",
+			flexShrink: 0,
+			whiteSpace: "nowrap",
+			cursor: hasTooltip ? "default" : void 0
+		},
+		children
+	}), anchor != null && hasTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+		anchor,
+		config: tooltip
+	})] });
+}
+//#endregion
+//#region src/devtools/browser/components/Icon.tsx
+const BASE_ICON_SIDE_LENGTH_EM = 1.6;
+const ICON_GAP_EM = .3;
+function Icon({ icon: IconComponent, color, size = "md", subtle = false, tooltip, style, noBackground = false }) {
+	const [anchor, setAnchor] = (0, react.useState)(null);
+	const hasTooltip = tooltip != null;
+	const colorEntry = SEMANTIC_COLORS[color];
+	const resolvedColor = subtle ? colorEntry.subtle?.color ?? colorEntry.color : colorEntry.color;
+	const finalIcons = Array.isArray(IconComponent) ? IconComponent : [IconComponent];
+	const fullIconWidthEm = (finalIcons.length - 1) * ICON_GAP_EM + finalIcons.length * BASE_ICON_SIDE_LENGTH_EM * getSizeValue(size);
+	const iconSideLengthEm = `${BASE_ICON_SIDE_LENGTH_EM * getSizeValue(size)}em`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : void 0,
+		onMouseLeave: hasTooltip ? () => setAnchor(null) : void 0,
+		style: {
+			borderRadius: "0.4em",
+			width: `${fullIconWidthEm}em`,
+			height: iconSideLengthEm,
+			padding: "0.15em",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			background: noBackground ? "none" : "rgba(0,0,0,0.4)",
+			color: resolvedColor,
+			flexShrink: 0,
+			cursor: hasTooltip ? "default" : void 0,
+			...style
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: `${ICON_GAP_EM}em`
+			},
+			children: finalIcons.map((Comp, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+				size: iconSideLengthEm,
+				strokeWidth: 2.6
+			}, `${Comp.name}-${i}`))
+		})
+	}), anchor != null && hasTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+		anchor,
+		config: tooltip
+	})] });
+}
+//#endregion
+//#region src/devtools/browser/components/DomainChip.tsx
+function DomainHierarchyContent({ allDomains }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: allDomains.map((d, i) => {
+		const isCurrent = i === allDomains.length - 1;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "0.3rem",
+				paddingLeft: `${i * 10}px`,
+				paddingTop: i > 0 ? "0.1rem" : void 0
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					fontSize: "0.8rem",
+					height: "0.6em",
+					width: "0.6em",
+					overflow: "hidden",
+					color: isCurrent ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "#3730a3",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center"
+				},
+				children: "⬢"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					color: isCurrent ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "#4b5563",
+					fontSize: "0.7rem",
+					fontWeight: isCurrent ? 500 : void 0
+				},
+				children: d
+			})]
+		}, d);
+	}) });
+}
+function DomainChip({ compact = false, subtle = false, domain, allDomains, size }) {
+	if (compact) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+		icon: lucide_react.Component,
+		color: "domain",
+		tooltip: {
+			content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DomainHierarchyContent, { allDomains }),
+			title: "Action Domain",
+			align: "edge"
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
+		color: "domain",
+		subtle,
+		size,
+		rounded: true,
+		tooltip: {
+			content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DomainHierarchyContent, { allDomains }),
+			title: "Action Domain",
+			align: "edge"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "0.4em"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					height: "1.2em",
+					width: "1.2em",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Component, {
+					height: "1.2em",
+					width: "1.2em"
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: domain })]
+		})
+	});
+}
+//#endregion
+//#region src/devtools/browser/components/HandlerChips.tsx
+function getExternalLabel(hop) {
+	if (hop.handlerType !== "external") return null;
+	return hop.handlerClient != null ? `${hop.transport ?? "ext"} → ${hop.handlerClient.envId}` : `→ ${hop.transport ?? "ext"}`;
+}
+/**
+* Extended transport details (request/WebSocket endpoint) for the external handler — shown on hover
+* only, so the chip/label itself stays short.
+*/
+function getTransportTooltip(hop) {
+	return getTransportTooltipForHops([hop]);
+}
+/**
+* Aggregate transport tooltip for a chip/label that represents one or more external hops (e.g. a
+* grouped child-dispatch chip that accumulates several transports for the same runtime).
+*/
+function getTransportTooltipForHops(hops) {
+	const lines = hops.filter((hop) => hop.handlerType === "external").map((hop) => ({
+		summary: hop.transportSummary,
+		url: hop.transportUrl
+	})).filter((line) => line.summary != null || line.url != null);
+	if (lines.length === 0) return void 0;
+	return {
+		title: "Transport",
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: "6px",
+				fontSize: "11px"
+			},
+			children: lines.map((line) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: "2px"
+				},
+				children: [line.summary != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: line.summary }), line.url != null && line.url !== line.summary && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: {
+						color: "#64748b",
+						wordBreak: "break-all"
+					},
+					children: line.url
+				})]
+			}, `${line.summary ?? ""}:${line.url ?? ""}`))
+		})
+	};
+}
+function HandlerChips({ entry, size, subtle }) {
+	const firstHop = entry.meta.routing[0];
+	const localEnvId = firstHop != null ? firstHop.runtime.envId : null;
+	const externalLabel = firstHop != null ? getExternalLabel(firstHop) : null;
+	const firstHopIsLocal = firstHop != null && firstHop.handlerType === "local";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [localEnvId != null && (firstHopIsLocal || externalLabel == null) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
+		color: "handler_local",
+		size,
+		subtle,
+		children: localEnvId
+	}), externalLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
+		color: "handler_external",
+		size,
+		subtle,
+		tooltip: firstHop != null ? getTransportTooltip(firstHop) : void 0,
+		children: externalLabel
+	})] });
+}
+//#endregion
+//#region src/devtools/browser/components/utils.ts
+const STATUS_COLOR = {
+	running: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+	success: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
+	"action-error": DEVTOOL_COLOR_SEMANTIC_WARNING,
+	failed: DEVTOOL_COLOR_SEMANTIC_ERROR,
+	aborted: DEVTOOL_COLOR_SEMANTIC_METADATA
+};
+const STATUS_SYMBOL = {
+	running: "●",
+	success: "✓",
+	"action-error": "!",
+	failed: "✗",
+	aborted: "○"
+};
+const STATUS_ICON = {
+	running: lucide_react.Loader2,
+	success: lucide_react.CircleCheck,
+	"action-error": lucide_react.CircleAlert,
+	failed: lucide_react.CircleX,
+	aborted: lucide_react.Circle
+};
+/**
+* The runtime an action *originated* on, when that differs from the runtime that handled it — i.e. an
+* inbound action received over a transport (a backend push, or an action relayed from another client),
+* rather than one dispatched locally. Returns `null` for locally-originated actions (where the origin
+* matches the handling runtime) and for actions with no known origin.
+*/
+function getInboundOrigin(entry) {
+	const origin = entry.meta.originClient;
+	if (origin == null || origin.envId === "unknown" || origin.envId === "_unset_") return null;
+	const local = entry.meta.routing[0]?.runtime;
+	if (local == null) return null;
+	return origin.envId === local.envId && (origin.perId ?? null) === (local.perId ?? null) && (origin.insId ?? null) === (local.insId ?? null) ? null : origin;
+}
+function formatDuration(entry) {
+	return entry.endTime != null ? `${entry.endTime - entry.startTime}ms` : null;
+}
+//#endregion
+//#region src/devtools/browser/components/RunningTimer.tsx
+function RunningTimer({ startTime }) {
+	const [elapsed, setElapsed] = (0, react.useState)(() => Date.now() - startTime);
+	(0, react.useEffect)(() => {
+		const interval = setInterval(() => setElapsed(Date.now() - startTime), 100);
+		return () => clearInterval(interval);
+	}, [startTime]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [elapsed, "ms"] });
+}
+function DurationDisplay({ entry }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: formatDuration(entry) ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RunningTimer, { startTime: entry.startTime }) });
+}
+//#endregion
+//#region src/devtools/browser/components/CallStackSection.tsx
+function getCalledLabel(entry) {
+	const firstHop = entry.meta.routing[0];
+	if (firstHop == null) return "↳ call";
+	if (firstHop.handlerType === "local") return "↳ local";
+	const label = getExternalLabel(firstHop);
+	return label != null ? `↳ ${label}` : "↳ call";
+}
+function getCalledColor(entry) {
+	const firstHop = entry.meta.routing[0];
+	if (firstHop == null) return DEVTOOL_COLOR_SEMANTIC_SYSTEM;
+	if (firstHop.handlerType === "local") return DEVTOOL_COLOR_HANDLER_LOCAL_TEXT;
+	return DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT;
+}
+function CallStackLink({ entry, entryRole, isFocused, onClick }) {
+	const color = STATUS_COLOR[entry.status];
+	const symbol = STATUS_SYMBOL[entry.status];
+	const labelColor = entryRole === "caller" ? DEVTOOL_COLOR_TEXT_SECONDARY : getCalledColor(entry);
+	const label = entryRole === "caller" ? "↑ from" : getCalledLabel(entry);
+	const firstHop = entry.meta.routing[0];
+	const transportTooltip = entryRole === "called" && firstHop != null ? getTransportTooltip(firstHop) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		onClick,
+		style: {
+			background: isFocused ? DEVTOOL_SECTION_BACKGROUND : DEVTOOL_DETAIL_HEADER_BACKGROUND,
+			borderBottom: `1px solid ${DEVTOOL_COLOR_CALL_STACK_DIVIDER}`,
+			borderLeft: isFocused ? `2px solid ${DEVTOOL_COLOR_SEMANTIC_SYSTEM}` : "2px solid transparent",
+			padding: "5px 12px 5px 10px",
+			display: "grid",
+			gridTemplateColumns: "1fr 1fr",
+			alignItems: "center",
+			columnGap: "6px",
+			cursor: "pointer"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "1em",
+				flexShrink: 0
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: {
+						color,
+						fontSize: "10px",
+						flexShrink: 0
+					},
+					children: symbol
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoverTooltip, {
+					config: transportTooltip,
+					style: {
+						flexShrink: 0,
+						display: "flex"
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							color: labelColor,
+							fontSize: "9px"
+						},
+						children: label
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "5px"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							color: DEVTOOL_COLOR_TEXT_SECONDARY,
+							fontSize: "11px",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: entry.actionId
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DomainChip, {
+						domain: entry.domain,
+						allDomains: entry.allDomains,
+						size: "sm"
+					})]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				color: DEVTOOL_COLOR_TEXT_FAINT,
+				fontSize: "10px",
+				textAlign: "right",
+				whiteSpace: "nowrap"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DurationDisplay, { entry })
+		})]
+	});
+}
+function CallStackSection({ parent, childEntries, focusedChildCuid, onFocusChild, onSelectParent }) {
+	if (parent == null && childEntries.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [parent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CallStackLink, {
+		entry: parent,
+		entryRole: "caller",
+		isFocused: false,
+		onClick: () => onSelectParent(parent.cuid)
+	}), childEntries.map((child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CallStackLink, {
+		entry: child,
+		entryRole: "called",
+		isFocused: focusedChildCuid === child.cuid,
+		onClick: () => onFocusChild(child.cuid)
+	}, child.cuid))] });
+}
+//#endregion
+//#region src/devtools/browser/components/ChildDispatchChips.tsx
+function ChildDispatchChips({ childRouteItems, size = "sm" }) {
+	if (childRouteItems == null || childRouteItems.length === 0) return null;
+	const groups = /* @__PURE__ */ new Map();
+	for (const item of childRouteItems) {
+		const runtimeId = item.handlerClient?.envId ?? item.transport ?? "ext";
+		const hasClient = item.handlerClient != null;
+		if (!groups.has(runtimeId)) groups.set(runtimeId, {
+			runtimeId,
+			transports: [],
+			hasClient,
+			hops: []
+		});
+		const group = groups.get(runtimeId);
+		group.hops.push(item);
+		const transport = item.transport;
+		if (transport != null && !group.transports.includes(transport)) group.transports.push(transport);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: "4px",
+			flexWrap: "wrap"
+		},
+		children: Array.from(groups.values()).map((group) => {
+			const transportStr = group.transports.length > 0 ? group.transports.join(", ") : "ext";
+			const label = group.hasClient ? `${transportStr} → ${group.runtimeId}` : `→ ${transportStr}`;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
+				color: "handler_external",
+				size,
+				tooltip: getTransportTooltipForHops(group.hops),
+				children: label
+			}, group.runtimeId);
+		})
+	});
+}
+//#endregion
+//#region src/devtools/browser/components/MetaSection.tsx
+function MetaChip({ label, value }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		style: { whiteSpace: "nowrap" },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			style: { color: DEVTOOL_COLOR_TEXT_MUTED },
+			children: [label, " "]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: { color: DEVTOOL_COLOR_TEXT_SECONDARY },
+			children: value
+		})]
+	});
+}
+function MetaSection({ entry }) {
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const { meta, cuid } = entry;
+	const expandedRows = [
+		{
+			label: "cuid",
+			value: cuid
+		},
+		{
+			label: "runtime",
+			value: meta.originClient.envId
+		},
+		...meta.originClient.perId != null ? [{
+			label: "perId",
+			value: meta.originClient.perId
+		}] : [],
+		...meta.originClient.insId != null ? [{
+			label: "insId",
+			value: meta.originClient.insId
+		}] : []
+	];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			marginBottom: "3px"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+				fontSize: "10px",
+				textTransform: "uppercase",
+				letterSpacing: "0.05em"
+			},
+			children: "Meta"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				color: DEVTOOL_COLOR_TEXT_FAINT,
+				fontSize: "11px"
+			},
+			children: expanded ? "▾" : "▸"
+		})]
+	}), expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onClick: () => setExpanded(false),
+		style: {
+			background: DEVTOOL_SECTION_BACKGROUND,
+			borderRadius: "4px",
+			overflow: "hidden",
+			cursor: "pointer"
+		},
+		children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "52px 1fr",
+				columnGap: "8px",
+				padding: "4px 8px",
+				borderBottom: i < expandedRows.length - 1 ? `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}` : "none",
+				alignItems: "start"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					textAlign: "left",
+					color: DEVTOOL_COLOR_TEXT_MUTED,
+					fontSize: "10px",
+					paddingTop: "1px"
+				},
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					textAlign: "left",
+					color: DEVTOOL_COLOR_TEXT_SECONDARY,
+					fontSize: "11px",
+					wordBreak: "break-all"
+				},
+				children: value
+			})]
+		}, label))
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		onClick: () => setExpanded(true),
+		style: {
+			background: DEVTOOL_SECTION_BACKGROUND,
+			borderRadius: "4px",
+			padding: "5px 8px",
+			fontSize: "11px",
+			display: "flex",
+			gap: "10px",
+			rowGap: "2px",
+			flexWrap: "wrap",
+			cursor: "pointer"
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetaChip, {
+				label: "cuid",
+				value: `…${cuid.slice(-8)}`
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetaChip, {
+				label: "runtime",
+				value: meta.originClient.envId
+			}),
+			meta.originClient.perId != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetaChip, {
+				label: "perId",
+				value: meta.originClient.perId.length > 10 ? `${meta.originClient.perId.slice(0, 10)}…` : meta.originClient.perId
+			}),
+			meta.originClient.insId != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetaChip, {
+				label: "insId",
+				value: meta.originClient.insId.length > 10 ? `${meta.originClient.insId.slice(0, 10)}…` : meta.originClient.insId
+			})
+		]
+	})] });
+}
+//#endregion
+//#region src/devtools/browser/components/OriginChip.tsx
+/**
+* Marks an action that was received from another runtime (a backend push, or an action relayed from
+* another client) rather than dispatched locally. The chip shows the origin's `envId`; the tooltip
+* carries the full coordinate. Render it only when {@link getInboundOrigin} returns a value.
+*/
+function OriginChip({ origin, size = "md", subtle }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
+		color: "origin",
+		size,
+		subtle,
+		tooltip: {
+			title: "Received from",
+			content: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: "2px",
+					fontSize: "11px"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["env ", origin.envId] }),
+					origin.perId != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["perId ", origin.perId] }),
+					origin.insId != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["insId ", origin.insId] })
+				]
+			})
+		},
+		children: `⇠ ${origin.envId}`
+	});
+}
+//#endregion
+//#region src/devtools/browser/components/RoutingSection.tsx
+function RoutingSection({ entry, minHopCount = 0 }) {
+	const { meta, startTime } = entry;
+	const hopCount = meta.routing.length;
+	const phantomCount = Math.max(0, minHopCount - hopCount);
+	if (hopCount === 0 && phantomCount === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionLabel, { label: hopCount > 0 ? `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}` : "Routing" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "2px"
+		},
+		children: [meta.routing.map((hop, i) => {
+			const isLocal = hop.handlerType === "local";
+			const isLast = i === hopCount - 1 && phantomCount === 0;
+			const badgeColor = isLocal ? DEVTOOL_COLOR_SEMANTIC_SUCCESS : DEVTOOL_COLOR_SEMANTIC_WARNING;
+			const badgeText = isLocal ? "● exec" : `→ ${hop.transportSummary ?? hop.transport ?? "ext"}`;
+			const transportTooltip = isLocal ? void 0 : getTransportTooltip(hop);
+			const runtimeTitle = [hop.runtime.perId, hop.runtime.insId].filter(Boolean).join(" · ") || void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					background: DEVTOOL_SECTION_BACKGROUND,
+					borderRadius: "4px",
+					overflow: "hidden",
+					display: "grid",
+					gridTemplateColumns: "30% 1fr 30%",
+					alignItems: "center",
+					columnGap: "8px",
+					borderBottom: isLast ? void 0 : `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+					padding: "4px 8px"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						style: {
+							display: "flex",
+							flexDirection: "row",
+							alignItems: "center",
+							gap: "10px"
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								color: DEVTOOL_COLOR_TEXT_FAINT,
+								fontSize: "10px",
+								width: "16px",
+								textAlign: "right"
+							},
+							children: i + 1
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							title: runtimeTitle,
+							style: {
+								color: DEVTOOL_COLOR_TEXT_SECONDARY,
+								fontSize: "11px",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap",
+								textAlign: "center"
+							},
+							children: hop.runtime.envId
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoverTooltip, {
+						config: transportTooltip,
+						style: {
+							display: "block",
+							minWidth: 0,
+							overflow: "hidden"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								color: badgeColor,
+								fontSize: "10px",
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								display: "block"
+							},
+							children: badgeText
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							paddingRight: "8px",
+							overflow: "hidden"
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								color: DEVTOOL_COLOR_TEXT_MUTED,
+								fontSize: "10px",
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis"
+							},
+							children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							style: {
+								color: DEVTOOL_COLOR_TEXT_FAINT,
+								fontSize: "10px",
+								flexShrink: 0,
+								marginLeft: "auto"
+							},
+							children: [
+								"+",
+								hop.time - startTime,
+								"ms"
+							]
+						})]
+					})
+				]
+			}, `${hop.time}-${hop.runtime.envId}`);
+		}), Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"aria-hidden": "true",
+			style: {
+				visibility: "hidden",
+				background: DEVTOOL_SECTION_BACKGROUND,
+				borderRadius: "4px",
+				display: "grid",
+				gridTemplateColumns: "30% 1fr 30%",
+				alignItems: "center",
+				columnGap: "8px",
+				padding: "4px 8px"
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: {
+						display: "flex",
+						flexDirection: "row",
+						alignItems: "center",
+						gap: "10px"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							fontSize: "10px",
+							width: "16px"
+						},
+						children: "0"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: { fontSize: "11px" },
+						children: "placeholder"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: { fontSize: "10px" },
+					children: "placeholder"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {})
+			]
+		}, key))]
+	})] });
+}
+//#endregion
+//#region src/devtools/browser/components/action_detail/ActionDetailPanel.tsx
+const STATUS_BADGE_LABEL = {
+	running: "RUNNING",
+	success: "SUCCESS",
+	"action-error": "ERROR",
+	failed: "FAILED",
+	aborted: "ABORTED"
+};
+const STATUS_BADGE_BG = {
+	running: STATUS_COLOR.running,
+	success: STATUS_COLOR.success,
+	"action-error": DEVTOOL_COLOR_SEMANTIC_ERROR,
+	failed: DEVTOOL_COLOR_SEMANTIC_ERROR,
+	aborted: DEVTOOL_COLOR_SEMANTIC_METADATA
+};
+const STATUS_BADGE_TEXT_COLOR = {
+	running: "#0f172a",
+	success: "#0f172a",
+	"action-error": "#ffffff",
+	failed: "#ffffff",
+	aborted: "#0f172a"
+};
+function DetailHeader({ entry, isActive, onClick, childExternalRouteItems }) {
+	const color = STATUS_COLOR[entry.status];
+	const StatusIconComponent = STATUS_ICON[entry.status];
+	const timestamp = formatTimestamp(entry.startTime);
+	const inboundOrigin = getInboundOrigin(entry);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onClick: !isActive ? onClick : void 0,
+		style: {
+			padding: "0.5em 1em",
+			background: isActive ? DEVTOOL_SECTION_BACKGROUND : DEVTOOL_DETAIL_HEADER_BACKGROUND,
+			borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+			borderLeft: isActive ? `2px solid ${color}` : "2px solid transparent",
+			flexShrink: 0,
+			flexDirection: "row",
+			display: "flex",
+			alignItems: "flex-start",
+			gap: "1em",
+			cursor: isActive ? "default" : "pointer"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				flex: 1,
+				minWidth: 0,
+				display: "flex",
+				flexDirection: "column",
+				gap: "0.5em"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					minWidth: 0,
+					gap: "0.5em"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							color,
+							flexShrink: 0,
+							display: "flex",
+							alignItems: "center",
+							animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : void 0
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIconComponent, {
+							size: 20,
+							strokeWidth: 1.75
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							color: DEVTOOL_COLOR_TEXT_EMPHASIS,
+							fontSize: "1.2em",
+							fontWeight: "600",
+							fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+							flexShrink: 1,
+							minWidth: "2.5em"
+						},
+						children: entry.actionId
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							flexShrink: 0,
+							padding: "2px 9px",
+							borderRadius: "999px",
+							background: STATUS_BADGE_BG[entry.status],
+							color: STATUS_BADGE_TEXT_COLOR[entry.status],
+							fontSize: "9px",
+							fontWeight: "700",
+							letterSpacing: "0.1em",
+							textTransform: "uppercase",
+							fontFamily: "ui-sans-serif, system-ui, sans-serif"
+						},
+						children: STATUS_BADGE_LABEL[entry.status]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DomainChip, {
+						domain: entry.domain,
+						allDomains: entry.allDomains,
+						size: "md"
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					gap: "8px"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "6px",
+						minWidth: 0,
+						overflow: "hidden"
+					},
+					children: [
+						inboundOrigin != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OriginChip, {
+							origin: inboundOrigin,
+							size: "md"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HandlerChips, {
+							entry,
+							size: "md"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildDispatchChips, {
+							childRouteItems: childExternalRouteItems,
+							size: "md"
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "8px",
+						flexShrink: 0
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+							fontSize: "10px",
+							letterSpacing: "0.02em",
+							fontFamily: "ui-sans-serif, system-ui, sans-serif"
+						},
+						children: timestamp
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							color,
+							fontSize: "12px",
+							fontWeight: "500"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DurationDisplay, { entry })
+					})]
+				})]
+			})]
+		})
+	});
+}
+function ActionDetailPanel({ entry, parent, childEntries, onSelectEntry }) {
+	const [focusedChildCuid, setFocusedChildCuid] = (0, react.useState)(null);
+	const focusedEntry = focusedChildCuid != null ? childEntries.find((e) => e.cuid === focusedChildCuid) ?? entry : entry;
+	const maxRoutingHops = Math.max(entry.meta.routing.length, ...childEntries.map((e) => e.meta.routing.length), 0);
+	const maxCallSiteFrames = Math.max(countUserFrames(entry.meta.originClient, entry.callSite), ...childEntries.map((e) => countUserFrames(e.meta.originClient, e.callSite)), 0);
+	const childExternalRouteItems = (0, react.useMemo)(() => {
+		const seen = /* @__PURE__ */ new Set();
+		const result = [];
+		for (const child of childEntries) {
+			const firstHop = child.meta.routing[0];
+			if (firstHop == null || firstHop.handlerType !== "external") continue;
+			const key = `${firstHop.handlerClient?.envId ?? ""}:${firstHop.transport ?? ""}`;
+			if (seen.has(key)) continue;
+			seen.add(key);
+			result.push(firstHop);
+		}
+		return result;
+	}, [childEntries]);
+	const handleFocusChild = (cuid) => {
+		setFocusedChildCuid((prev) => prev === cuid ? null : cuid);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			flex: 1,
+			display: "flex",
+			flexDirection: "column",
+			overflow: "hidden",
+			minHeight: 0,
+			background: DEVTOOL_DETAIL_BASE_BACKGROUND
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailHeader, {
+				entry,
+				isActive: focusedChildCuid === null,
+				onClick: () => setFocusedChildCuid(null),
+				childExternalRouteItems
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CallStackSection, {
+				parent,
+				childEntries,
+				focusedChildCuid,
+				onFocusChild: handleFocusChild,
+				onSelectParent: onSelectEntry
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					flex: 1,
+					overflowY: "auto",
+					minHeight: 0,
+					padding: "10px 12px",
+					display: "flex",
+					flexDirection: "column",
+					gap: "8px"
+				},
+				children: [
+					focusedEntry.input !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailSection, {
+						label: "Input",
+						value: focusedEntry.input
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailSection, {
+						label: "Input",
+						value: "No input required or given"
+					}),
+					focusedEntry.status === "success" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailSection, {
+						label: "Output",
+						value: focusedEntry.output,
+						color: "#A3E635"
+					}),
+					(focusedEntry.status === "action-error" || focusedEntry.status === "failed" || focusedEntry.status === "aborted") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionErrorDisplay, { entry: focusedEntry }),
+					focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailSection, {
+						label: `Progress (${focusedEntry.progressUpdates.length})`,
+						value: focusedEntry.progressUpdates
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StackTraceSection, {
+						runtime: entry.meta.originClient,
+						label: "Dispatch Site",
+						stack: focusedEntry.callSite,
+						color: DEVTOOL_COLOR_TEXT_SECONDARY,
+						minFrameCount: maxCallSiteFrames
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RoutingSection, {
+						entry: focusedEntry,
+						minHopCount: maxRoutingHops
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetaSection, { entry: focusedEntry })
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/devtools/browser/components/action_list/IoTooltipContent.tsx
+function stripOuterBraces(json) {
+	const lines = json.split("\n");
+	if (lines.length > 2 && lines[0] === "{" && lines[lines.length - 1] === "}") return lines.slice(1, -1).map((l) => l.slice(2)).join("\n");
+	return json;
+}
+function IoTooltipContent({ value }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+			fontSize: "10px",
+			whiteSpace: "pre-wrap",
+			wordBreak: "break-all",
+			lineHeight: "1.5",
+			textAlign: "left"
+		},
+		children: renderColoredJson(stripOuterBraces(safeStringify(value, 2)))
+	});
+}
+//#endregion
+//#region src/devtools/browser/components/action_list/ActionInputAndOutputChip.tsx
+const ActionInputAndOutputChip = ({ entry, breakReasons, subtle, size = "md" }) => {
+	const firstHop = entry.meta.routing[0];
+	const localEnvId = firstHop != null ? firstHop.runtime.envId : null;
+	const externalLabel = firstHop != null ? getExternalLabel(firstHop) : null;
+	const firstHopIsLocal = firstHop != null && firstHop.handlerType === "local";
+	const isLocal = localEnvId != null && (firstHopIsLocal || externalLabel == null);
+	const color = isLocal ? "handler_local" : "handler_external";
+	const transportTooltip = firstHop != null ? getTransportTooltip(firstHop) : void 0;
+	const [labelAnchor, setLabelAnchor] = (0, react.useState)(null);
+	const isNewInput = breakReasons.includes("new_input");
+	const isNewOutput = breakReasons.includes("new_output");
+	const hasError = entry.error != null || entry.abortReason != null;
+	const newIconSizeEm = `${getSizeValue(size) * .9}em`;
+	const label = `${(isLocal ? localEnvId : externalLabel) ?? "unknown"}`;
+	const newSparkleComp = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			opacity: .9,
+			alignSelf: "start",
+			marginLeft: "-0.6em"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sparkle, {
+			strokeWidth: "0.2em",
+			color: "rgba(243, 250, 140, 1)",
+			width: newIconSizeEm,
+			height: newIconSizeEm
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
+		color,
+		size,
+		subtle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "0.4em"
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					noBackground: true,
+					icon: lucide_react.Variable,
+					color,
+					subtle: subtle || entry.input === void 0,
+					tooltip: {
+						content: entry.input !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IoTooltipContent, { value: entry.input }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								color: DEVTOOL_COLOR_TEXT_MUTED,
+								fontSize: "10px"
+							},
+							children: "No input required or given"
+						}),
+						title: isNewInput ? "New Input" : "Input"
+					}
+				}),
+				isNewInput && newSparkleComp,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: { opacity: .6 },
+					color,
+					children: "→"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					title: transportTooltip == null ? label : void 0,
+					style: {
+						opacity: .8,
+						cursor: transportTooltip != null ? "default" : void 0,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+						maxWidth: "14ch"
+					},
+					onMouseEnter: transportTooltip != null ? (e) => setLabelAnchor(e.currentTarget.getBoundingClientRect()) : void 0,
+					onMouseLeave: transportTooltip != null ? () => setLabelAnchor(null) : void 0,
+					children: label
+				}),
+				labelAnchor != null && transportTooltip != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+					anchor: labelAnchor,
+					config: transportTooltip
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: { opacity: .6 },
+					color,
+					children: "→"
+				}),
+				entry.status === "success" && entry.output !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					noBackground: true,
+					icon: lucide_react.PackageCheck,
+					color: !hasError ? color : "default",
+					tooltip: {
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IoTooltipContent, { value: entry.output }),
+						title: isNewOutput ? "New Output" : "Output"
+					}
+				}),
+				(entry.error != null || entry.abortReason != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					noBackground: true,
+					icon: lucide_react.CircleX,
+					color: entry.status === "aborted" ? "aborted" : "error",
+					tooltip: {
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionErrorDisplay, {
+							entry,
+							compact: true
+						}),
+						title: entry.status === "aborted" ? "Aborted" : "Error",
+						maxWidth: 340
+					}
+				}),
+				isNewOutput && newSparkleComp
+			]
+		})
+	});
+};
+//#endregion
+//#region src/devtools/browser/components/action_list/ActionEntryRow.tsx
+const MAX_GROUP_DOTS = 5;
+function getLatestChipColor(status) {
+	if (status === "failed") return "failed";
+	if (status === "action-error") return "action_error";
+	if (status === "aborted") return "aborted";
+	return "success";
+}
+function GroupDotTooltip({ entry, index, total, refTime, dotColor, anchor }) {
+	const symbol = STATUS_SYMBOL[entry.status];
+	const deltaMs = refTime - entry.startTime;
+	const relStr = index === 0 ? "latest run" : `−${formatRelativeAge(deltaMs)} from latest`;
+	const durationStr = entry.endTime != null ? `${entry.endTime - entry.startTime}ms` : "running…";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+		anchor,
+		config: {
+			align: "center",
+			maxWidth: 240,
+			content: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						color: dotColor,
+						marginBottom: "1px"
+					},
+					children: [
+						symbol,
+						" run ",
+						index + 1,
+						" of ",
+						total
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: { color: DEVTOOL_COLOR_TEXT_SECONDARY },
+					children: formatTimestamp(entry.startTime)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: { color: DEVTOOL_COLOR_TEXT_MUTED },
+					children: durationStr
+				}),
+				index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: {
+						color: "#64748b",
+						marginTop: "3px",
+						paddingTop: "3px",
+						borderTop: `1px solid #1e293b`
+					},
+					children: relStr
+				})
+			] })
+		}
+	});
+}
+function GroupDot({ entry, index, total, refTime, isActive, onSelect }) {
+	const [anchor, setAnchor] = (0, react.useState)(null);
+	const dotColor = STATUS_COLOR[entry.status];
+	const hovered = anchor != null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"data-cuid": entry.cuid,
+		onClick: (e) => {
+			e.stopPropagation();
+			onSelect();
+		},
+		onMouseEnter: (e) => setAnchor(e.currentTarget.getBoundingClientRect()),
+		onMouseLeave: () => setAnchor(null),
+		style: {
+			width: "9px",
+			height: "9px",
+			borderRadius: "50%",
+			border: isActive ? `2px solid ${dotColor}` : hovered ? `1px solid ${dotColor}99` : "1px solid transparent",
+			background: isActive ? "transparent" : dotColor,
+			cursor: "pointer",
+			padding: 0,
+			flexShrink: 0,
+			opacity: isActive ? 1 : hovered ? .8 : .35,
+			transform: hovered ? "scale(1.55)" : "scale(1)",
+			transition: "transform 0.1s ease, opacity 0.1s ease, border-color 0.1s ease"
+		}
+	}), hovered && anchor != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupDotTooltip, {
+		entry,
+		index,
+		total,
+		refTime,
+		dotColor,
+		anchor
+	})] });
+}
+function ActionEntryRow({ entry, isSelected, onClick, isLatest = false, latestTime, childEntries, breakReasons, groupEntries, selectedGroupCuid, onSelectGroupEntry }) {
+	const timestamp = formatTimestamp(entry.startTime);
+	const hasGroup = groupEntries != null && groupEntries.length > 1;
+	const inboundOrigin = getInboundOrigin(entry);
+	const externalChildEntries = childEntries?.filter((child) => child.meta.routing[0]?.handlerType === "external") ?? [];
+	const nonIoBreakReasons = breakReasons?.filter((r) => r !== "new_input" && r !== "new_output") ?? [];
+	const hasBottomError = entry.error != null || entry.abortReason != null;
+	const hasBottomContent = externalChildEntries.length > 0 || nonIoBreakReasons.length > 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-cuid": entry.cuid,
+		onClick,
+		style: {
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			gap: "5px",
+			padding: "0.5em 0.6em",
+			cursor: "pointer",
+			background: isSelected ? DEVTOOL_LIST_HEADER_SELECTED_BACKGROUND : "transparent",
+			border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
+			borderLeft: isSelected ? `2px solid ${STATUS_COLOR[entry.status]}` : entry.status === "failed" || entry.status === "action-error" ? `2px solid ${STATUS_COLOR[entry.status]}55` : `2px solid ${DEVTOOL_PANEL_BORDER}`,
+			borderRadius: "3px",
+			margin: "2px 4px"
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+				position: "absolute",
+				left: "2em",
+				top: 0,
+				bottom: 0,
+				width: "1px",
+				background: `${DEVTOOL_COLOR_SEMANTIC_METADATA}28`,
+				pointerEvents: "none",
+				zIndex: 0
+			} }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "8px"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							position: "relative",
+							zIndex: 1,
+							flexShrink: 0,
+							minWidth: "3.4em",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "flex-start"
+						},
+						children: [isLatest ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
+							size: "sm",
+							color: getLatestChipColor(entry.status),
+							children: "latest"
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Chip, {
+							size: "sm",
+							color: getLatestChipColor(entry.status),
+							children: ["+", latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								position: "absolute",
+								top: "100%",
+								left: 0,
+								marginTop: "5px",
+								color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+								fontSize: "10px",
+								lineHeight: "1em",
+								letterSpacing: "0.02em",
+								fontFamily: "ui-sans-serif, system-ui, sans-serif",
+								opacity: .7,
+								paddingLeft: "0.1em",
+								whiteSpace: "nowrap"
+							},
+							children: timestamp
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						title: entry.actionId,
+						style: {
+							flex: 1,
+							minWidth: 0,
+							color: DEVTOOL_COLOR_TEXT_SECONDARY,
+							fontSize: "1em",
+							fontWeight: 400,
+							fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: entry.actionId
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							color: DEVTOOL_COLOR_SEMANTIC_WARNING,
+							lineHeight: "1em",
+							fontSize: "11px",
+							opacity: .9,
+							flexShrink: 0,
+							fontFamily: "ui-sans-serif, system-ui, sans-serif"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DurationDisplay, { entry })
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "0.4em",
+					paddingLeft: "4.5em",
+					minWidth: 0
+				},
+				children: [inboundOrigin != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OriginChip, {
+					origin: inboundOrigin,
+					size: "sm",
+					subtle: true
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionInputAndOutputChip, {
+					breakReasons,
+					entry,
+					size: "sm"
+				})]
+			}),
+			hasBottomContent && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					flexWrap: "wrap",
+					alignItems: "center",
+					gap: "4px",
+					paddingLeft: "4.5em"
+				},
+				children: [
+					externalChildEntries.map((child) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							size: "sm",
+							icon: lucide_react.Variable,
+							color: "io_input",
+							subtle: true,
+							tooltip: {
+								content: child.input !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IoTooltipContent, { value: child.input }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: {
+										color: "#64748b",
+										fontSize: "10px"
+									},
+									children: "No input required or given"
+								}),
+								title: `Input · ${child.actionId}`
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HandlerChips, {
+							entry: child,
+							size: "sm",
+							subtle: true
+						}),
+						child.status === "success" && child.output !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							size: "sm",
+							icon: lucide_react.PackageCheck,
+							color: "io_output",
+							subtle: true,
+							tooltip: {
+								content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IoTooltipContent, { value: child.output }),
+								title: `Output · ${child.actionId}`
+							}
+						})
+					] }, child.actionId)),
+					nonIoBreakReasons.map((reason) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
+						color: "default",
+						subtle: true,
+						children: reason
+					}, reason)),
+					externalChildEntries.length > 0 && hasBottomError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						size: "sm",
+						icon: lucide_react.CircleX,
+						color: entry.status === "aborted" ? "aborted" : "error",
+						subtle: true,
+						tooltip: {
+							content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionErrorDisplay, {
+								entry,
+								compact: true
+							}),
+							title: entry.status === "aborted" ? "Aborted" : "Error",
+							maxWidth: 340
+						}
+					})
+				]
+			}),
+			hasGroup && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					flexWrap: "wrap",
+					alignItems: "center",
+					gap: "5px",
+					paddingLeft: "4.6em",
+					paddingBottom: "2px"
+				},
+				children: [groupEntries.slice(0, MAX_GROUP_DOTS).map((e, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupDot, {
+					entry: e,
+					index: i,
+					total: groupEntries.length,
+					refTime: groupEntries[0].startTime,
+					isActive: selectedGroupCuid === e.cuid,
+					onSelect: () => onSelectGroupEntry?.(e.cuid)
+				}, e.cuid)), groupEntries.length > MAX_GROUP_DOTS && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: {
+						fontSize: "0.7em",
+						opacity: .5,
+						flexShrink: 0,
+						lineHeight: 1
+					},
+					children: ["+ ", groupEntries.length - MAX_GROUP_DOTS]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/devtools/browser/components/action_list/ActionList.tsx
+function getBreakReasons(current, previous) {
+	const reasons = [];
+	if (current.inputHash != null && previous.inputHash != null ? current.inputHash !== previous.inputHash : safeStringify(current.input, 0) !== safeStringify(previous.input, 0)) reasons.push("new_input");
+	if (current.outputHash != null && previous.outputHash != null && current.outputHash !== previous.outputHash) reasons.push("new_output");
+	return reasons;
+}
+function getGroupChildEntries(group, childEntriesMap) {
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const e of [group.representative, ...group.rest]) for (const child of childEntriesMap.get(e.cuid) ?? []) if (!seen.has(child.actionId)) {
+		seen.add(child.actionId);
+		result.push(child);
+	}
+	return result.length > 0 ? result.sort((a, b) => a.startTime - b.startTime) : void 0;
+}
+function getFlatItemKey(item) {
+	return `g:${item.group.rest[item.group.rest.length - 1]?.cuid ?? item.group.representative.cuid}`;
+}
+function ActionList({ groups, selectedCuid, onGroupClick, onSubClick, childEntriesMap, style }) {
+	const latestTime = groups[0]?.representative.startTime;
+	const flatItems = (0, react.useMemo)(() => {
+		return groups.map((group, gi) => {
+			const prevGroup = groups[gi + 1];
+			let breakReasons = [];
+			if (prevGroup != null && prevGroup.representative.actionId === group.representative.actionId && prevGroup.representative.domain === group.representative.domain) {
+				const reasons = getBreakReasons(group.representative, prevGroup.representative);
+				if (reasons.length > 0) breakReasons = reasons;
+			}
+			return {
+				group,
+				groupIndex: gi,
+				breakReasons
+			};
+		});
+	}, [groups]);
+	const prevRepCuidsRef = (0, react.useRef)(null);
+	const newRepCuids = (0, react.useMemo)(() => {
+		const current = new Set(flatItems.map((i) => i.group.representative.cuid));
+		const prev = prevRepCuidsRef.current;
+		const result = /* @__PURE__ */ new Set();
+		if (prev != null) {
+			for (const c of current) if (!prev.has(c)) result.add(c);
+		}
+		prevRepCuidsRef.current = current;
+		return result;
+	}, [flatItems]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevtoolsVirtualList, {
+		items: flatItems,
+		getItemKey: getFlatItemKey,
+		selectedKey: (0, react.useMemo)(() => {
+			if (selectedCuid == null) return null;
+			const item = flatItems.find((i) => i.group.representative.cuid === selectedCuid || i.group.rest.some((e) => e.cuid === selectedCuid));
+			return item != null ? getFlatItemKey(item) : null;
+		}, [flatItems, selectedCuid]),
+		estimateSize: 64,
+		overscan: 8,
+		style,
+		rowStyle: {
+			borderBottom: `1px solid ${DEVTOOL_LIST_GROUP_DIVIDER}`,
+			overflow: "hidden"
+		},
+		empty: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					padding: "24px",
+					textAlign: "center",
+					color: DEVTOOL_COLOR_TEXT_MUTED
+				},
+				children: "No actions recorded yet"
+			})
+		}),
+		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				padding: "24px",
+				textAlign: "center",
+				color: DEVTOOL_COLOR_TEXT_MUTED
+			},
+			children: "Start of action history"
+		}),
+		renderItem: (item) => {
+			const { group } = item;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [newRepCuids.has(group.representative.cuid) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+				position: "absolute",
+				inset: 0,
+				pointerEvents: "none",
+				background: "linear-gradient(90deg, transparent 0%, rgba(148, 210, 255, 0.13) 50%, transparent 100%)",
+				animation: "__nice-action-shine 0.65s ease-out forwards"
+			} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionEntryRow, {
+				entry: group.representative,
+				isSelected: selectedCuid === group.representative.cuid || group.rest.some((e) => e.cuid === selectedCuid),
+				isLatest: item.groupIndex === 0,
+				latestTime,
+				childEntries: getGroupChildEntries(group, childEntriesMap),
+				breakReasons: item.breakReasons,
+				groupEntries: group.rest.length > 0 ? [group.representative, ...group.rest] : void 0,
+				selectedGroupCuid: selectedCuid,
+				onSelectGroupEntry: (cuid) => onSubClick(cuid, selectedCuid === cuid),
+				onClick: () => onGroupClick(group)
+			})] });
+		}
+	});
+}
+//#endregion
+//#region src/devtools/browser/NiceActionDevtools.tsx
+if (typeof document !== "undefined" && !document.getElementById("__nice-action-devtools-styles")) {
+	const style = document.createElement("style");
+	style.id = "__nice-action-devtools-styles";
+	style.textContent = `
+    @keyframes __nice-action-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.35; }
+    }
+    @keyframes __nice-action-shine {
+      0%   { transform: translateX(-100%); opacity: 0; }
+      15%  { opacity: 1; }
+      85%  { opacity: 1; }
+      100% { transform: translateX(200%); opacity: 0; }
+    }
+    #__nice-action-devtools-panel ::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+    #__nice-action-devtools-panel ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    #__nice-action-devtools-panel ::-webkit-scrollbar-thumb {
+      background: #334155;
+      border-radius: 2px;
+    }
+    #__nice-action-devtools-panel ::-webkit-scrollbar-thumb:hover {
+      background: #475569;
+    }
+    #__nice-action-devtools-panel ::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+    /* Shield the panel's native form controls from the host app's global element
+       styles (e.g. a bare \`input {}\`/\`button {}\` rule). \`all: revert\` drops them
+       to the UA baseline the panel is authored against; the panel's own inline
+       styles still win, so its look is unchanged across any host. */
+    #__nice-action-devtools-panel input,
+    #__nice-action-devtools-panel button,
+    #__nice-action-devtools-panel select,
+    #__nice-action-devtools-panel textarea { all: revert; font-family: inherit; }
+  `;
+	document.head?.appendChild(style);
+}
+const PREFS_KEY = "__nice-action-devtools-prefs";
+const DOCKED_HEIGHT_DEFAULT = 320;
+const DOCKED_WIDTH_DEFAULT = 330;
+const DETAIL_RATIO_DEFAULT = .5;
+const DOCK_POSITIONS = [
+	"dock-bottom",
+	"dock-top",
+	"dock-left",
+	"dock-right"
+];
+function isDockPosition(value) {
+	return typeof value === "string" && DOCK_POSITIONS.includes(value);
+}
+function readPrefs(defaultPosition, initialOpen) {
+	const fallback = {
+		position: defaultPosition,
+		isOpen: initialOpen,
+		dockedHeight: DOCKED_HEIGHT_DEFAULT,
+		dockedWidth: DOCKED_WIDTH_DEFAULT,
+		detailRatio: DETAIL_RATIO_DEFAULT,
+		stayOnLatest: true,
+		followLatestOnSelect: true
+	};
+	try {
+		if (typeof localStorage === "undefined") return fallback;
+		const stored = localStorage.getItem(PREFS_KEY);
+		const merged = stored != null ? {
+			...fallback,
+			...JSON.parse(stored)
+		} : fallback;
+		if (!isDockPosition(merged.position)) merged.position = defaultPosition;
+		return merged;
+	} catch (_e) {
+		return fallback;
+	}
+}
+function writePrefs(prefs) {
+	try {
+		localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
+	} catch (_e) {
+		return;
+	}
+}
+function getHandlerKey(entry) {
+	const hop = entry.meta.routing[0];
+	if (hop == null) return "none";
+	if (hop.handlerType === "local") return "local";
+	return `ext:${hop.transport ?? "ext"}`;
+}
+/** Same logical call — used both for grouping and for deciding which running rows to show. */
+function entriesShareActionInput(a, b) {
+	if (a.actionId !== b.actionId || a.domain !== b.domain) return false;
+	return a.inputHash != null && b.inputHash != null ? a.inputHash === b.inputHash : safeStringify(a.input, 0) === safeStringify(b.input, 0);
+}
+function canGroupWith(a, b) {
+	if (!entriesShareActionInput(a, b)) return false;
+	const handlerA = getHandlerKey(a);
+	const handlerB = getHandlerKey(b);
+	if (handlerA !== "none" && handlerB !== "none" && handlerA !== handlerB) return false;
+	if (a.status === "running" || b.status === "running") return true;
+	const outputMatch = a.outputHash != null && b.outputHash != null ? a.outputHash === b.outputHash : true;
+	return a.status === b.status && outputMatch;
+}
+function groupEntries(entries) {
+	const groups = [];
+	for (const entry of entries) {
+		const last = groups[groups.length - 1];
+		if (last != null && canGroupWith(entry, last.representative)) last.rest.push(entry);
+		else groups.push({
+			representative: entry,
+			rest: []
+		});
+	}
+	return groups;
+}
+function NiceActionDevtools({ forceEnable, ...props }) {
+	if (!forceEnable && true) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NiceActionDevtools_Panel, { ...props });
+}
+function NiceActionDevtools_Panel({ core, position: defaultPosition = "dock-right", initialOpen = false }) {
+	const [prefs, setPrefsRaw] = (0, react.useState)(() => readPrefs(defaultPosition, initialOpen));
+	const [entries, setEntries] = (0, react.useState)([]);
+	const [selectedCuid, setSelectedCuid] = (0, react.useState)(null);
+	(0, react.useEffect)(() => core.subscribe(setEntries), [core]);
+	const groups = (0, react.useMemo)(() => {
+		const byCuid = new Map(entries.map((e) => [e.cuid, e]));
+		return groupEntries(entries.filter((e) => e.parentCuid == null || !byCuid.has(e.parentCuid)));
+	}, [entries]);
+	const childEntriesMap = (0, react.useMemo)(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const entry of entries) {
+			if (entry.parentCuid == null) continue;
+			const existing = map.get(entry.parentCuid) ?? [];
+			map.set(entry.parentCuid, [...existing, entry]);
+		}
+		for (const arr of map.values()) arr.sort((a, b) => a.startTime - b.startTime);
+		return map;
+	}, [entries]);
+	const setPrefs = (update) => {
+		setPrefsRaw((prev) => ({
+			...prev,
+			...update
+		}));
+	};
+	(0, react.useEffect)(() => {
+		const timer = setTimeout(() => writePrefs(prefs), 250);
+		return () => clearTimeout(timer);
+	}, [prefs]);
+	const { position, isOpen, dockedHeight, dockedWidth, detailRatio, stayOnLatest, followLatestOnSelect } = prefs;
+	const dockSide = getDockSide(position);
+	const isHorizDock = dockSide === "top" || dockSide === "bottom";
+	const dockedSize = isHorizDock ? dockedHeight : dockedWidth;
+	const latestCuid = groups.length > 0 ? groups[0].representative.cuid : null;
+	(0, react.useEffect)(() => {
+		if (stayOnLatest && latestCuid != null) setSelectedCuid(latestCuid);
+	}, [stayOnLatest, latestCuid]);
+	const applySelection = (next) => {
+		if (next != null && next === latestCuid && followLatestOnSelect) {
+			if (!stayOnLatest) setPrefs({ stayOnLatest: true });
+		} else if (stayOnLatest) setPrefs({ stayOnLatest: false });
+		setSelectedCuid(next);
+	};
+	const handleGroupRowClick = (group) => {
+		const repCuid = group.representative.cuid;
+		if (([group.representative, ...group.rest].find((e) => e.cuid === selectedCuid) ?? null) != null && selectedCuid !== repCuid) applySelection(repCuid);
+		else applySelection(selectedCuid === repCuid ? null : repCuid);
+	};
+	const selectedEntry = selectedCuid != null ? entries.find((e) => e.cuid === selectedCuid) : null;
+	const runningCount = entries.filter((e) => e.status === "running").length;
+	const dock = (0, react.useMemo)(() => getDevtoolsDockCoordinator(), []);
+	const panelId = (0, react.useId)();
+	const [, bumpView] = (0, react.useReducer)((n) => n + 1, 0);
+	const badge = runningCount > 0 ? `${runningCount}●` : void 0;
+	(0, react.useEffect)(() => {
+		const unregister = dock.register({
+			id: panelId,
+			label: "actions",
+			icon: "⚡",
+			side: dockSide,
+			size: dockedSize,
+			open: isOpen,
+			badge,
+			onOpen: () => setPrefs({ isOpen: true })
+		});
+		const unsubscribe = dock.subscribe(bumpView);
+		return () => {
+			unregister();
+			unsubscribe();
+		};
+	}, [dock, panelId]);
+	(0, react.useEffect)(() => {
+		dock.update(panelId, {
+			side: dockSide,
+			size: dockedSize,
+			open: isOpen,
+			badge
+		});
+	}, [
+		dock,
+		panelId,
+		dockSide,
+		dockedSize,
+		isOpen,
+		badge
+	]);
+	const view = dock.getView(panelId);
+	const baseStyle = {
+		position: "fixed",
+		zIndex: 2147483647,
+		fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+		fontSize: "12px"
+	};
+	if (!isOpen) {
+		if (view.isPrimary && !view.anyOpen) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevtoolsLauncher, { items: view.devtools });
+		return null;
+	}
+	const panelStyle = {
+		...baseStyle,
+		background: DEVTOOL_LIST_BASE_BACKGROUND,
+		border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
+		color: DEVTOOL_COLOR_TEXT_SECONDARY,
+		display: "flex",
+		flexDirection: "column",
+		boxShadow: "0 -4px 24px rgba(0,0,0,0.4)",
+		overflow: "hidden",
+		...dockSide === "bottom" ? {
+			bottom: view.dockOffset,
+			left: 0,
+			right: 0,
+			height: `${dockedSize}px`,
+			borderRadius: view.stacked ? "0" : "8px 8px 0 0"
+		} : dockSide === "top" ? {
+			top: view.dockOffset,
+			left: 0,
+			right: 0,
+			height: `${dockedSize}px`,
+			borderRadius: view.stacked ? "0" : "0 0 8px 8px"
+		} : dockSide === "left" ? {
+			top: 0,
+			left: view.dockOffset,
+			bottom: 0,
+			width: `${dockedSize}px`,
+			borderRadius: view.stacked ? "0" : "0 8px 8px 0"
+		} : {
+			top: 0,
+			right: view.dockOffset,
+			bottom: 0,
+			width: `${dockedSize}px`,
+			borderRadius: view.stacked ? "0" : "8px 0 0 8px"
+		}
+	};
+	const selectedEntryParent = selectedEntry?.parentCuid != null ? entries.find((e) => e.cuid === selectedEntry.parentCuid) ?? null : null;
+	const selectedEntryChildren = selectedEntry != null ? [...entries].filter((e) => e.parentCuid === selectedEntry.cuid).sort((a, b) => a.startTime - b.startTime) : [];
+	const virtualListProps = {
+		groups,
+		selectedCuid,
+		onGroupClick: handleGroupRowClick,
+		onSubClick: (cuid, isSelected) => {
+			applySelection(isSelected ? null : cuid);
+		},
+		childEntriesMap
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		id: "__nice-action-devtools-panel",
+		style: panelStyle,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResizeHandle, {
+				dockSide,
+				dockedSize,
+				onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PanelHeader, {
+				title: "⚡ action",
+				position,
+				onPositionChange: (p) => setPrefs({ position: p }),
+				onClose: () => setPrefs({ isOpen: false }),
+				onClear: entries.length > 0 ? () => {
+					core.clear();
+					setSelectedCuid(null);
+				} : void 0,
+				openOthers: view.otherClosed
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					flex: 1,
+					display: "flex",
+					flexDirection: isHorizDock ? "row" : "column",
+					overflow: "hidden",
+					minHeight: 0
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						flexGrow: selectedEntry != null ? 1 - detailRatio : 1,
+						flexShrink: 1,
+						flexBasis: 0,
+						minWidth: 0,
+						minHeight: 0,
+						display: "flex",
+						flexDirection: "column",
+						overflow: "hidden"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FollowLatestToggles, {
+						noun: "action",
+						stayOnLatest,
+						onStayOnLatestChange: (next) => setPrefs({ stayOnLatest: next }),
+						followLatestOnSelect,
+						onFollowLatestOnSelectChange: (next) => {
+							if (next && latestCuid != null && selectedCuid === latestCuid && !stayOnLatest) setPrefs({
+								followLatestOnSelect: next,
+								stayOnLatest: true
+							});
+							else setPrefs({ followLatestOnSelect: next });
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionList, {
+						...virtualListProps,
+						style: {
+							width: "100%",
+							flex: 1,
+							minHeight: 0,
+							overflowY: "auto"
+						}
+					})]
+				}), selectedEntry != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SplitHandle, {
+					horizontal: isHorizDock,
+					onRatioChange: (ratio) => setPrefs({ detailRatio: ratio })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: {
+						flexGrow: detailRatio,
+						flexShrink: 1,
+						flexBasis: 0,
+						minWidth: 0,
+						minHeight: 0,
+						display: "flex",
+						flexDirection: "column",
+						overflow: "hidden",
+						...isHorizDock ? {
+							borderLeft: `1px solid #1d3352`,
+							boxShadow: "inset 18px 0 36px -14px rgba(0,0,0,0.8)"
+						} : {
+							borderTop: `1px solid #1d3352`,
+							boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
+						}
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionDetailPanel, {
+						entry: selectedEntry,
+						parent: selectedEntryParent,
+						childEntries: selectedEntryChildren,
+						onSelectEntry: (cuid) => setSelectedCuid(cuid)
+					}, selectedEntry.cuid)
+				})] })]
+			})
+		]
+	});
+}
+//#endregion
+exports.ActionDevtoolsCore = require_ActionDevtoolsCore.ActionDevtoolsCore;
+exports.NiceActionDevtools = NiceActionDevtools;
+
+//# sourceMappingURL=index.cjs.map