@nice-code/action 0.2.12 → 0.2.13

package/build/devtools/browser/index.js

@@ -54,10 +54,7 @@ function extractMeta(context) {
 class ActionDevtoolsCore {
   _entries = [];
   _listeners = new Set;
-  _maxEntries;
-  constructor(options = {}) {
-    this._maxEntries = options.maxEntries ?? 100;
-  }
+  constructor(_options = {}) {}
   attachToDomain(domain) {
     return domain.addActionListener((update) => {
       const { runningAction, type, time } = update;
@@ -71,9 +68,11 @@ class ActionDevtoolsCore {
           startTime: time,
           input: runningAction.state?.request?.input,
           progressUpdates: [],
-          meta: extractMeta(runningAction.context)
+          meta: extractMeta(runningAction.context),
+          parentCuid: runningAction.parentCuid,
+          callSite: runningAction.callSite
         };
-        this._entries = [entry, ...this._entries].slice(0, this._maxEntries);
+        this._entries = [entry, ...this._entries];
         this._notify();
       } else if (type === "progress" /* progress */) {
         this._updateEntry(runningAction.cuid, (e) => ({
@@ -93,9 +92,13 @@ class ActionDevtoolsCore {
             return { ...base, status: "success", output: update.response?.result?.output };
           }
           if (finishType === "failed" /* failed */) {
-            return { ...base, status: "failed", error: update.error };
+            const rawError = update.error;
+            const errorStack2 = rawError instanceof Error ? rawError.stack : undefined;
+            return { ...base, status: "failed", error: rawError, errorStack: errorStack2 };
           }
-          return { ...base, status: "aborted", abortReason: update.reason };
+          const abortReason = update.reason;
+          const errorStack = abortReason instanceof Error ? abortReason.stack : undefined;
+          return { ...base, status: "aborted", abortReason, errorStack };
         });
       }
     });
@@ -126,19 +129,125 @@ class ActionDevtoolsCore {
 }
 // src/devtools/browser/NiceActionDevtools.tsx
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { jsxDEV, Fragment as Fragment2 } from "react/jsx-dev-runtime";
-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; }
-    }
-  `;
-  document.head?.appendChild(style);
+import { useCallback, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo2, useRef as useRef2, useState as useState6 } from "react";
+
+// src/devtools/browser/components/ActionDetailPanel.tsx
+import { useMemo, useState as useState5 } from "react";
+
+// src/devtools/browser/components/DomainChip.tsx
+import { createContext, useContext, useRef } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var DomainTooltipCtx = createContext(null);
+function DomainHierarchyTooltip({
+  allDomains,
+  anchor
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      position: "fixed",
+      left: anchor.left,
+      top: anchor.top - 6,
+      transform: "translateY(-100%)",
+      zIndex: 2147483647,
+      background: "#0c1526",
+      border: "1px solid #312e81",
+      borderRadius: "5px",
+      padding: "6px 8px",
+      fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+      boxShadow: "0 4px 20px rgba(0,0,0,0.6)",
+      pointerEvents: "none",
+      minWidth: "80px"
+    },
+    children: allDomains.map((d, i) => {
+      const isCurrent = i === allDomains.length - 1;
+      return /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "0.3rem",
+          paddingLeft: `${i * 10}px`,
+          paddingTop: i > 0 ? "0.1rem" : undefined
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            style: {
+              fontSize: "0.8rem",
+              height: "0.6em",
+              width: "0.6em",
+              overflow: "hidden",
+              color: isCurrent ? "#818cf8" : "#3730a3",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: "⬢"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            style: {
+              color: isCurrent ? "#a5b4fc" : "#4b5563",
+              fontSize: "0.7rem",
+              fontWeight: isCurrent ? 500 : undefined
+            },
+            children: d
+          }, undefined, false, undefined, this)
+        ]
+      }, d, true, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+function DomainChip({
+  domain,
+  allDomains,
+  size
+}) {
+  const ctx = useContext(DomainTooltipCtx);
+  const chipRef = useRef(null);
+  const hasHierarchy = allDomains != null && allDomains.length > 1;
+  const fontSize = size === "md" ? "0.7rem" : "0.6rem";
+  const padding = size === "md" ? "1px 5px" : "1px 4px";
+  return /* @__PURE__ */ jsxDEV("span", {
+    ref: chipRef,
+    onMouseEnter: hasHierarchy && ctx != null ? () => {
+      if (chipRef.current != null)
+        ctx.show(chipRef.current.getBoundingClientRect(), allDomains);
+    } : undefined,
+    onMouseLeave: hasHierarchy && ctx != null ? () => ctx.hide() : undefined,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.4em",
+      color: "#818cf8",
+      fontSize,
+      background: "#0f172a",
+      border: "1px solid #312e81",
+      padding,
+      borderRadius: "0.6rem",
+      flexShrink: 0,
+      whiteSpace: "nowrap"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV("span", {
+        style: {
+          fontSize: size === "md" ? "0.9rem" : "0.8rem",
+          height: "0.6em",
+          width: "0.6em",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: "⬢"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        children: domain
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
+
+// src/devtools/browser/components/RunningTimer.tsx
+import { useEffect, useState } from "react";
+
+// src/devtools/browser/components/utils.ts
 var STATUS_COLOR = {
   running: "#60a5fa",
   success: "#4ade80",
@@ -151,826 +260,380 @@ var STATUS_SYMBOL = {
   failed: "✗",
   aborted: "○"
 };
-var PREFS_KEY = "__nice-action-devtools-prefs";
-var DOCKED_HEIGHT_DEFAULT = 320;
-var DOCKED_WIDTH_DEFAULT = 420;
-var DOCKED_SIZE_MIN = 140;
-var ROW_HEIGHT = 50;
-var SUB_ROW_HEIGHT = 30;
-function getDockSide(pos) {
-  if (pos === "dock-top")
-    return "top";
-  if (pos === "dock-bottom")
-    return "bottom";
-  if (pos === "dock-left")
-    return "left";
-  if (pos === "dock-right")
-    return "right";
-  return null;
-}
-function readPrefs(defaultPosition, initialOpen) {
-  const fallback = {
-    position: defaultPosition,
-    isOpen: initialOpen,
-    dockedHeight: DOCKED_HEIGHT_DEFAULT,
-    dockedWidth: DOCKED_WIDTH_DEFAULT
-  };
+function safeStringify(value, indent = 2) {
+  if (value === undefined)
+    return "undefined";
+  if (value === null)
+    return "null";
   try {
-    if (typeof localStorage === "undefined")
-      return fallback;
-    const stored = localStorage.getItem(PREFS_KEY);
-    return stored != null ? { ...fallback, ...JSON.parse(stored) } : fallback;
-  } catch (_e) {
-    return fallback;
+    return JSON.stringify(value, null, indent);
+  } catch {
+    return String(value);
   }
 }
-function writePrefs(prefs) {
-  try {
-    localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
-  } catch (_e) {
-    return;
-  }
+function formatRelativeAge(ms) {
+  if (ms < 1000)
+    return `${ms}ms`;
+  if (ms < 60000)
+    return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.floor(ms / 60000)}m`;
 }
-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"}`;
+function formatDuration(entry) {
+  return entry.endTime != null ? `${entry.endTime - entry.startTime}ms` : null;
 }
-function canGroupWith(a, b) {
-  if (a.status === "running" || b.status === "running")
-    return false;
-  const handlerA = getHandlerKey(a);
-  const handlerB = getHandlerKey(b);
-  const handlerConflict = handlerA !== "none" && handlerB !== "none" && handlerA !== handlerB;
-  return a.actionId === b.actionId && a.domain === b.domain && a.status === b.status && !handlerConflict && safeStringify(a.input, 0) === safeStringify(b.input, 0);
+function formatTimestamp(startTime) {
+  return new Date(startTime).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  });
 }
-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;
+
+// src/devtools/browser/components/RunningTimer.tsx
+import { jsxDEV as jsxDEV2, Fragment } from "react/jsx-dev-runtime";
+function RunningTimer({ startTime }) {
+  const [elapsed, setElapsed] = useState(() => Date.now() - startTime);
+  useEffect(() => {
+    const interval = setInterval(() => setElapsed(Date.now() - startTime), 100);
+    return () => clearInterval(interval);
+  }, [startTime]);
+  return /* @__PURE__ */ jsxDEV2(Fragment, {
+    children: [
+      elapsed,
+      "ms"
+    ]
+  }, undefined, true, undefined, this);
 }
-function NiceActionDevtools(props) {
-  if (false) {}
-  return /* @__PURE__ */ jsxDEV(NiceActionDevtools_Panel, {
-    ...props
+function DurationDisplay({ entry }) {
+  const d = formatDuration(entry);
+  return /* @__PURE__ */ jsxDEV2(Fragment, {
+    children: d ?? /* @__PURE__ */ jsxDEV2(RunningTimer, {
+      startTime: entry.startTime
+    }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
-function NiceActionDevtools_Panel({
-  core,
-  position: defaultPosition = "bottom-right",
-  initialOpen = false
+
+// src/devtools/browser/components/SectionLabel.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function SectionLabel({ label, color = "#60a5fa" }) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    style: {
+      color,
+      fontSize: "10px",
+      marginBottom: "3px",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em"
+    },
+    children: label
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/components/CallStackSection.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function CallStackLink({
+  entry,
+  entryRole,
+  isFocused,
+  onClick
 }) {
-  const [prefs, setPrefsRaw] = useState(() => readPrefs(defaultPosition, initialOpen));
-  const [entries, setEntries] = useState([]);
-  const [selectedCuid, setSelectedCuid] = useState(null);
-  const [expandedGroupCuids, setExpandedGroupCuids] = useState(new Set);
-  useEffect(() => core.subscribe(setEntries), [core]);
-  const groups = useMemo(() => groupEntries(entries), [entries]);
-  const handleGroupRowClick = (group) => {
-    const repCuid = group.representative.cuid;
-    const isExpanded = expandedGroupCuids.has(repCuid);
-    const isSelected = selectedCuid === repCuid;
-    if (group.rest.length === 0) {
-      setSelectedCuid(isSelected ? null : repCuid);
-      setExpandedGroupCuids(new Set);
-    } else if (isSelected && isExpanded) {
-      setSelectedCuid(null);
-      setExpandedGroupCuids(new Set);
-    } else {
-      setSelectedCuid(repCuid);
-      setExpandedGroupCuids(new Set([repCuid]));
-    }
-  };
-  const setPrefs = (update) => {
-    setPrefsRaw((prev) => {
-      const next = { ...prev, ...update };
-      writePrefs(next);
-      return next;
-    });
-  };
-  const { position, isOpen, dockedHeight, dockedWidth } = prefs;
-  const dockSide = getDockSide(position);
-  const isHorizDock = dockSide === "top" || dockSide === "bottom";
-  const dockedSize = isHorizDock ? dockedHeight : dockedWidth;
-  const selectedEntry = selectedCuid != null ? entries.find((e) => e.cuid === selectedCuid) : null;
-  const runningCount = entries.filter((e) => e.status === "running").length;
-  useEffect(() => {
-    const sides = ["top", "bottom", "left", "right"];
-    const clearAll = () => {
-      sides.forEach((s) => {
-        document.body.style.removeProperty(`margin-${s}`);
-      });
-    };
-    if (!isOpen || dockSide == null) {
-      clearAll();
-      return clearAll;
-    }
-    clearAll();
-    document.body.style.setProperty(`margin-${dockSide}`, `${dockedSize}px`);
-    return clearAll;
-  }, [dockSide, isOpen, dockedSize]);
-  const closedAnchor = (() => {
-    switch (position) {
-      case "dock-bottom":
-        return { bottom: "16px", right: "16px" };
-      case "dock-top":
-        return { top: "16px", right: "16px" };
-      case "dock-left":
-        return { top: "16px", left: "16px" };
-      case "dock-right":
-        return { top: "16px", right: "16px" };
-      default:
-        return {
-          ...position.includes("right") ? { right: "16px" } : { left: "16px" },
-          ...position.includes("bottom") ? { bottom: "16px" } : { top: "16px" }
-        };
-    }
-  })();
-  const baseStyle = {
-    position: "fixed",
-    zIndex: 2147483647,
-    fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
-    fontSize: "12px"
-  };
-  if (!isOpen) {
-    return /* @__PURE__ */ jsxDEV("button", {
-      onClick: () => setPrefs({ isOpen: true }),
-      style: {
-        ...baseStyle,
-        ...closedAnchor,
-        background: "#1e293b",
-        color: "#94a3b8",
-        border: "1px solid #334155",
-        borderRadius: "6px",
-        padding: "5px 10px",
-        cursor: "pointer",
-        lineHeight: "1.5"
-      },
-      children: [
-        "⚡ actions",
-        runningCount > 0 && /* @__PURE__ */ jsxDEV("span", {
-          style: {
-            marginLeft: "6px",
-            color: "#60a5fa",
-            animation: "__nice-action-pulse 1.2s ease-in-out infinite"
-          },
-          children: [
-            runningCount,
-            " running"
-          ]
-        }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this);
-  }
-  const panelStyle = dockSide != null ? {
-    ...baseStyle,
-    background: "#0f172a",
-    border: "1px solid #1e293b",
-    color: "#e2e8f0",
-    display: "flex",
-    flexDirection: "column",
-    boxShadow: "0 -4px 24px rgba(0,0,0,0.4)",
-    overflow: "hidden",
-    ...dockSide === "bottom" ? { bottom: 0, left: 0, right: 0, height: `${dockedSize}px`, borderRadius: "8px 8px 0 0" } : dockSide === "top" ? { top: 0, left: 0, right: 0, height: `${dockedSize}px`, borderRadius: "0 0 8px 8px" } : dockSide === "left" ? { top: 0, left: 0, bottom: 0, width: `${dockedSize}px`, borderRadius: "0 8px 8px 0" } : { top: 0, right: 0, bottom: 0, width: `${dockedSize}px`, borderRadius: "8px 0 0 8px" }
-  } : {
-    ...baseStyle,
-    ...closedAnchor,
-    width: "460px",
-    maxHeight: "560px",
-    background: "#0f172a",
-    border: "1px solid #1e293b",
-    borderRadius: "10px",
-    color: "#e2e8f0",
-    display: "flex",
-    flexDirection: "column",
-    boxShadow: "0 25px 50px rgba(0,0,0,0.5)",
-    overflow: "hidden"
-  };
-  const virtualListProps = {
-    groups,
-    selectedCuid,
-    expandedGroupCuids,
-    onGroupClick: handleGroupRowClick,
-    onSubClick: (cuid, isSelected) => setSelectedCuid(isSelected ? null : cuid)
-  };
-  return /* @__PURE__ */ jsxDEV("div", {
-    style: panelStyle,
+  const color = STATUS_COLOR[entry.status];
+  const symbol = STATUS_SYMBOL[entry.status];
+  return /* @__PURE__ */ jsxDEV4("div", {
+    onClick,
+    style: {
+      background: isFocused ? "#1e2e45" : "#1e293b",
+      borderRadius: "4px",
+      borderLeft: isFocused ? "2px solid #a78bfa" : "2px solid transparent",
+      padding: isFocused ? "5px 8px 5px 6px" : "5px 8px",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      cursor: "pointer"
+    },
     children: [
-      dockSide != null && /* @__PURE__ */ jsxDEV(ResizeHandle, {
-        dockSide,
-        dockedSize,
-        onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
+      /* @__PURE__ */ jsxDEV4("span", {
+        style: {
+          color: entryRole === "caller" ? "#94a3b8" : "#a78bfa",
+          fontSize: "9px",
+          flexShrink: 0,
+          minWidth: "34px",
+          fontFamily: "inherit"
+        },
+        children: entryRole === "caller" ? "↑ from" : "↓ call"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV(PanelHeader, {
-        position,
-        onPositionChange: (p) => setPrefs({ position: p }),
-        onClose: () => setPrefs({ isOpen: false }),
-        onClear: entries.length > 0 ? () => {
-          core.clear();
-          setSelectedCuid(null);
-          setExpandedGroupCuids(new Set);
-        } : undefined
+      /* @__PURE__ */ jsxDEV4("span", {
+        style: { color, fontSize: "10px", flexShrink: 0 },
+        children: symbol
       }, undefined, false, undefined, this),
-      isHorizDock ? /* @__PURE__ */ jsxDEV("div", {
-        style: { flex: 1, display: "flex", overflow: "hidden" },
+      /* @__PURE__ */ jsxDEV4("span", {
+        style: {
+          color: "#cbd5e1",
+          fontSize: "11px",
+          flex: 1,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          gap: "0.5em",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
         children: [
-          /* @__PURE__ */ jsxDEV(VirtualActionList, {
-            ...virtualListProps,
-            style: { width: "340px", flexShrink: 0, overflowY: "auto", borderRight: "1px solid #1e293b" }
+          /* @__PURE__ */ jsxDEV4("span", {
+            children: entry.actionId
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            style: { flex: 1, overflowY: "auto" },
-            children: selectedEntry != null ? /* @__PURE__ */ jsxDEV(ActionDetailPanel, {
-              entry: selectedEntry
-            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("div", {
-              style: { padding: "24px", textAlign: "center", color: "#475569", fontSize: "11px" },
-              children: "Select an action to inspect"
-            }, undefined, false, undefined, this)
+          /* @__PURE__ */ jsxDEV4(DomainChip, {
+            domain: entry.domain,
+            allDomains: entry.allDomains,
+            size: "sm"
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV(Fragment2, {
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("span", {
+        style: { color: "#475569", fontSize: "10px", flexShrink: 0 },
+        children: /* @__PURE__ */ jsxDEV4(DurationDisplay, {
+          entry
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function CallStackSection({
+  parent,
+  childEntries,
+  focusedChildCuid,
+  onFocusChild,
+  onSelectParent
+}) {
+  if (parent == null && childEntries.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxDEV4("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV4(SectionLabel, {
+        label: "Call Stack",
+        color: "#a78bfa"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        style: { display: "flex", flexDirection: "column", gap: "2px" },
         children: [
-          /* @__PURE__ */ jsxDEV(VirtualActionList, {
-            ...virtualListProps,
-            style: {
-              overflowY: "auto",
-              flex: 1,
-              minHeight: "80px",
-              borderBottom: selectedEntry != null ? "1px solid #1e293b" : "none"
-            }
+          parent != null && /* @__PURE__ */ jsxDEV4(CallStackLink, {
+            entry: parent,
+            entryRole: "caller",
+            isFocused: false,
+            onClick: () => onSelectParent(parent.cuid)
           }, undefined, false, undefined, this),
-          selectedEntry != null && /* @__PURE__ */ jsxDEV("div", {
-            style: { flexShrink: 0, maxHeight: "45%", overflow: "hidden" },
-            children: /* @__PURE__ */ jsxDEV(ActionDetailPanel, {
-              entry: selectedEntry
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
+          childEntries.map((child) => /* @__PURE__ */ jsxDEV4(CallStackLink, {
+            entry: child,
+            entryRole: "called",
+            isFocused: focusedChildCuid === child.cuid,
+            onClick: () => onFocusChild(child.cuid)
+          }, child.cuid, false, undefined, this))
         ]
       }, undefined, true, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-function VirtualActionList({
-  groups,
-  selectedCuid,
-  expandedGroupCuids,
-  onGroupClick,
-  onSubClick,
+
+// src/devtools/browser/components/Chip.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function Chip({
+  color,
+  borderColor,
+  fontSize = "8px",
+  padding = "1px 4px",
+  children,
   style
 }) {
-  const outerRef = useRef(null);
-  const latestTime = groups[0]?.representative.startTime;
-  const flatItems = useMemo(() => {
-    const result = [];
-    for (let gi = 0;gi < groups.length; gi++) {
-      const group = groups[gi];
-      const repCuid = group.representative.cuid;
-      const isExpanded = expandedGroupCuids.has(repCuid) || group.rest.some((e) => e.cuid === selectedCuid);
-      result.push({ type: "group", group, groupIndex: gi });
-      if (isExpanded) {
-        for (const entry of group.rest) {
-          result.push({ type: "sub", entry, group });
-        }
-      }
-    }
-    return result;
-  }, [groups, expandedGroupCuids, selectedCuid]);
-  const flatItemsRef = useRef(flatItems);
-  flatItemsRef.current = flatItems;
-  const virtualizer = useVirtualizer({
-    count: flatItems.length,
-    getScrollElement: () => outerRef.current,
-    estimateSize: (i) => flatItemsRef.current[i]?.type === "sub" ? SUB_ROW_HEIGHT : ROW_HEIGHT,
-    overscan: 5,
-    measureElement: (el) => el.getBoundingClientRect().height
-  });
-  const prevGroupLenRef = useRef(groups.length);
-  useLayoutEffect(() => {
-    const el = outerRef.current;
-    if (el == null)
-      return;
-    const prev = prevGroupLenRef.current;
-    prevGroupLenRef.current = groups.length;
-    const added = groups.length - prev;
-    if (added > 0 && el.scrollTop > 10) {
-      el.scrollTop += added * ROW_HEIGHT;
-    }
-  }, [groups]);
-  const prevSelectedRef = useRef(selectedCuid);
-  useEffect(() => {
-    if (selectedCuid === prevSelectedRef.current)
-      return;
-    prevSelectedRef.current = selectedCuid;
-    if (selectedCuid == null)
-      return;
-    const idx = flatItemsRef.current.findIndex((item) => item.type === "group" && (item.group.representative.cuid === selectedCuid || item.group.rest.some((e) => e.cuid === selectedCuid)) || item.type === "sub" && item.entry.cuid === selectedCuid);
-    if (idx >= 0)
-      virtualizer.scrollToIndex(idx, { align: "auto" });
-  }, [selectedCuid, virtualizer]);
-  if (groups.length === 0) {
-    return /* @__PURE__ */ jsxDEV("div", {
-      style,
-      children: /* @__PURE__ */ jsxDEV("div", {
-        style: { padding: "24px", textAlign: "center", color: "#475569" },
-        children: "No actions recorded yet"
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this);
-  }
-  const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ jsxDEV("div", {
-    ref: outerRef,
-    style,
-    children: /* @__PURE__ */ jsxDEV("div", {
-      style: { height: `${virtualizer.getTotalSize()}px`, position: "relative" },
-      children: virtualItems.map((vi) => {
-        const item = flatItems[vi.index];
-        if (item == null)
-          return null;
-        return /* @__PURE__ */ jsxDEV("div", {
-          "data-index": vi.index,
-          ref: virtualizer.measureElement,
-          style: {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            transform: `translateY(${vi.start}px)`
-          },
-          children: item.type === "group" ? /* @__PURE__ */ jsxDEV(ActionEntryRow, {
-            entry: item.group.representative,
-            isSelected: selectedCuid === item.group.representative.cuid,
-            groupCount: item.group.rest.length > 0 ? item.group.rest.length + 1 : undefined,
-            isLatest: item.groupIndex === 0,
-            latestTime,
-            onClick: () => onGroupClick(item.group)
-          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(ActionEntryRow, {
-            entry: item.entry,
-            isSelected: selectedCuid === item.entry.cuid,
-            isSubEntry: true,
-            isLatest: false,
-            latestTime,
-            onClick: () => onSubClick(item.entry.cuid, selectedCuid === item.entry.cuid)
-          }, undefined, false, undefined, this)
-        }, vi.key, false, undefined, this);
-      })
-    }, undefined, false, undefined, this)
+  return /* @__PURE__ */ jsxDEV5("span", {
+    style: {
+      color,
+      fontSize,
+      background: "#0f172a",
+      border: `1px solid ${borderColor}`,
+      padding,
+      borderRadius: "3px",
+      flexShrink: 0,
+      whiteSpace: "nowrap",
+      ...style
+    },
+    children
   }, undefined, false, undefined, this);
 }
-function PanelHeader({
-  position,
-  onPositionChange,
-  onClose,
-  onClear
+
+// src/devtools/browser/components/ChildDispatchChips.tsx
+import { jsxDEV as jsxDEV6, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+function ChildDispatchChips({
+  labels,
+  size = "sm"
 }) {
-  return /* @__PURE__ */ jsxDEV("div", {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      padding: "8px 12px",
-      background: "#1e293b",
-      borderBottom: "1px solid #0f172a",
-      flexShrink: 0
-    },
+  if (labels == null || labels.length === 0)
+    return null;
+  const fontSize = size === "md" ? "9px" : "8px";
+  const padding = size === "md" ? "1px 4px" : "1px 3px";
+  return /* @__PURE__ */ jsxDEV6(Fragment2, {
+    children: labels.map((label) => /* @__PURE__ */ jsxDEV6(Chip, {
+      color: "#c084fc",
+      borderColor: "#581c87",
+      fontSize,
+      padding,
+      children: [
+        "↳ ",
+        label
+      ]
+    }, label, true, undefined, this))
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/components/DetailSection.tsx
+import { useState as useState2 } from "react";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+var COMPACT_CHAR_LIMIT = 120;
+function DetailSection({
+  label,
+  value,
+  color = "#60a5fa"
+}) {
+  const [expanded, setExpanded] = useState2(false);
+  const fullJson = safeStringify(value, 2);
+  const compactJson = safeStringify(value, 0);
+  const canExpand = fullJson !== compactJson || compactJson.length > COMPACT_CHAR_LIMIT;
+  const compactDisplay = compactJson.length > COMPACT_CHAR_LIMIT ? `${compactJson.slice(0, COMPACT_CHAR_LIMIT)}…` : compactJson;
+  return /* @__PURE__ */ jsxDEV7("div", {
     children: [
-      /* @__PURE__ */ jsxDEV("span", {
-        style: { color: "#60a5fa", fontWeight: "bold", fontSize: "11px" },
-        children: "⚡ nice-action devtools"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        style: { display: "flex", gap: "10px", alignItems: "center" },
+      /* @__PURE__ */ jsxDEV7("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "3px"
+        },
         children: [
-          /* @__PURE__ */ jsxDEV(PositionPicker, {
-            position,
-            onChange: onPositionChange
-          }, undefined, false, undefined, this),
-          onClear != null && /* @__PURE__ */ jsxDEV("button", {
-            onClick: onClear,
+          /* @__PURE__ */ jsxDEV7("div", {
             style: {
-              background: "none",
-              border: "none",
-              color: "#475569",
-              cursor: "pointer",
-              fontSize: "11px",
-              padding: "0"
+              color,
+              fontSize: "10px",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
             },
-            children: "clear"
+            children: label
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("button", {
-            onClick: onClose,
-            style: {
-              background: "none",
-              border: "none",
-              color: "#475569",
-              cursor: "pointer",
-              fontSize: "16px",
-              padding: "0",
-              lineHeight: "1"
-            },
-            children: "×"
+          canExpand && /* @__PURE__ */ jsxDEV7("span", {
+            style: { color: "#334155", fontSize: "11px" },
+            children: expanded ? "▾" : "▸"
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-var POSITION_GRID = [
-  ["top-left", "dock-top", "top-right"],
-  ["dock-left", null, "dock-right"],
-  ["bottom-left", "dock-bottom", "bottom-right"]
-];
-function PositionPicker({
-  position,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxDEV("div", {
-    title: "Move / dock panel",
-    style: { display: "grid", gridTemplateColumns: "repeat(3, 9px)", gap: "2px", padding: "2px" },
-    children: POSITION_GRID.flat().map((pos) => {
-      if (pos == null)
-        return /* @__PURE__ */ jsxDEV("div", {
-          style: { width: "9px", height: "9px" }
-        }, "center-empty", false, undefined, this);
-      const isDock = pos.startsWith("dock-");
-      const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
-      const isActive = pos === position;
-      return /* @__PURE__ */ jsxDEV("div", {
-        title: pos,
-        onClick: () => onChange(pos),
-        style: { width: "9px", height: "9px", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" },
-        children: /* @__PURE__ */ jsxDEV("div", {
-          style: {
-            width: isDock ? isTopBottom ? "9px" : "3px" : "7px",
-            height: isDock ? isTopBottom ? "3px" : "9px" : "7px",
-            borderRadius: isDock ? "1px" : "50%",
-            background: isActive ? "#60a5fa" : "#334155"
-          }
-        }, undefined, false, undefined, this)
-      }, pos, false, undefined, this);
-    })
-  }, undefined, false, undefined, this);
-}
-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 * 0.85 : window.innerHeight * 0.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);
-  };
-  const edgeStyle = 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" };
-  return /* @__PURE__ */ jsxDEV("div", {
-    onMouseDown,
-    style: {
-      position: "absolute",
-      zIndex: 10,
-      background: "transparent",
-      ...edgeStyle
-    }
-  }, undefined, false, undefined, this);
-}
-function formatRelativeAge(ms) {
-  if (ms < 1000)
-    return `${ms}ms`;
-  if (ms < 60000)
-    return `${(ms / 1000).toFixed(1)}s`;
-  return `${Math.floor(ms / 60000)}m`;
-}
-function ActionEntryRow({
-  entry,
-  isSelected,
-  onClick,
-  groupCount,
-  isSubEntry = false,
-  isLatest = false,
-  latestTime
-}) {
-  const color = STATUS_COLOR[entry.status];
-  const symbol = STATUS_SYMBOL[entry.status];
-  const parentDomains = entry.allDomains.slice(0, -1);
-  const breadcrumb = parentDomains.length > 0 ? `[${parentDomains.join(".")}]` : "";
-  const duration = entry.endTime != null ? `${entry.endTime - entry.startTime}ms` : null;
-  const timestamp = new Date(entry.startTime).toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false
-  });
-  const firstHop = entry.meta.routing[0];
-  const handlerLabel = firstHop == null ? null : firstHop.handlerType === "local" ? "local" : `→ ${firstHop.transport ?? "ext"}`;
-  const handlerColor = handlerLabel === "local" ? "#34d399" : "#fbbf24";
-  const handlerBorder = handlerLabel === "local" ? "#14532d" : "#78350f";
-  if (isSubEntry) {
-    return /* @__PURE__ */ jsxDEV("div", {
-      "data-cuid": entry.cuid,
-      onClick,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        padding: "4px 10px 4px 26px",
-        cursor: "pointer",
-        background: isSelected ? "#131f35" : "#070d18",
-        borderBottom: "1px solid #0f172a",
-        borderLeft: isSelected ? "2px solid #3b82f6" : "2px solid transparent",
-        userSelect: "none"
-      },
-      children: [
-        /* @__PURE__ */ jsxDEV("span", {
-          style: { color: "#334155", fontSize: "10px", flexShrink: 0 },
-          children: symbol
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV("span", {
-          style: {
-            flex: 1,
-            color: "#475569",
-            fontSize: "11px",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            minWidth: 0
-          },
-          children: [
-            entry.actionId,
-            /* @__PURE__ */ jsxDEV("span", {
-              style: { color: "#334155", marginLeft: "4px" },
-              children: [
-                "(",
-                entry.domain,
-                ")"
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV("span", {
-          style: { color: "#334155", fontSize: "11px", flexShrink: 0 },
-          children: duration ?? /* @__PURE__ */ jsxDEV(RunningTimer, {
-            startTime: entry.startTime
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV("div", {
-    "data-cuid": entry.cuid,
-    onClick,
-    style: {
-      display: "flex",
-      alignItems: "flex-start",
-      gap: "8px",
-      padding: isSelected ? "6px 12px 6px 10px" : "6px 12px",
-      cursor: "pointer",
-      background: isSelected ? "#131f35" : "transparent",
-      borderBottom: "1px solid #0f172a",
-      borderLeft: isSelected ? "2px solid #60a5fa" : "2px solid transparent",
-      userSelect: "none"
-    },
-    children: [
-      /* @__PURE__ */ jsxDEV("span", {
-        style: { flexShrink: 0, paddingTop: "2px" },
-        children: isLatest ? /* @__PURE__ */ jsxDEV("span", {
-          style: {
-            color: "#60a5fa",
-            fontSize: "8px",
-            background: "#0f172a",
-            border: "1px solid #1e3a5f",
-            padding: "1px 4px",
-            borderRadius: "3px"
-          },
-          children: "latest"
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("span", {
-          style: {
-            color: "#475569",
-            fontSize: "8px",
-            background: "#0f172a",
-            border: "1px solid #1e293b",
-            padding: "1px 4px",
-            borderRadius: "3px",
-            whiteSpace: "nowrap"
-          },
-          children: [
-            "+",
-            latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("span", {
+      }, undefined, true, undefined, this),
+      expanded ? /* @__PURE__ */ jsxDEV7("div", {
+        onClick: canExpand ? () => setExpanded(false) : undefined,
         style: {
-          color,
-          fontSize: "10px",
-          flexShrink: 0,
-          paddingTop: "2px",
-          animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
+          margin: 0,
+          padding: "6px 8px",
+          background: "#1e293b",
+          borderRadius: "4px",
+          fontSize: "11px",
+          color: "#cbd5e1",
+          overflowX: "auto",
+          textAlign: "left",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-all",
+          cursor: canExpand ? "pointer" : "default"
         },
-        children: symbol
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "3px" },
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            style: { display: "flex", alignItems: "baseline", minWidth: 0, overflow: "hidden" },
-            children: [
-              /* @__PURE__ */ jsxDEV("span", {
-                style: {
-                  color: "#cbd5e1",
-                  fontSize: "11px",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                  flexShrink: 1,
-                  minWidth: "24px"
-                },
-                children: entry.actionId
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("span", {
-                style: {
-                  color: "#7592b6",
-                  fontSize: "11px",
-                  marginLeft: "4px",
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  flexShrink: 2,
-                  minWidth: "24px"
-                },
-                children: [
-                  "(",
-                  entry.domain,
-                  ")"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "6px" },
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                style: { display: "flex", alignItems: "center", gap: "5px", minWidth: 0, overflow: "hidden" },
-                children: [
-                  handlerLabel != null && /* @__PURE__ */ jsxDEV("span", {
-                    style: {
-                      color: handlerColor,
-                      fontSize: "8px",
-                      background: "#0f172a",
-                      border: `1px solid ${handlerBorder}`,
-                      padding: "1px 4px",
-                      borderRadius: "3px",
-                      flexShrink: 0,
-                      whiteSpace: "nowrap"
-                    },
-                    children: handlerLabel
-                  }, undefined, false, undefined, this),
-                  breadcrumb !== "" && /* @__PURE__ */ jsxDEV("span", {
-                    style: {
-                      color: "#475569",
-                      fontSize: "9px",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
-                      minWidth: 0
-                    },
-                    children: breadcrumb
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                style: { display: "flex", alignItems: "center", gap: "6px", flexShrink: 0 },
-                children: [
-                  groupCount != null && /* @__PURE__ */ jsxDEV("span", {
-                    style: {
-                      color: "#3b82f6",
-                      fontSize: "9px",
-                      background: "#0f172a",
-                      border: "1px solid #1e3a5f",
-                      padding: "1px 5px",
-                      borderRadius: "3px"
-                    },
-                    children: [
-                      "×",
-                      groupCount
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV("span", {
-                    style: { color: "#1e3a5f", fontSize: "10px", letterSpacing: "0.02em" },
-                    children: timestamp
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("span", {
-                    style: { color: "#475569", fontSize: "11px" },
-                    children: duration ?? /* @__PURE__ */ jsxDEV(RunningTimer, {
-                      startTime: entry.startTime
-                    }, undefined, false, undefined, this)
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
+        children: fullJson
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV7("div", {
+        onClick: canExpand ? () => setExpanded(true) : undefined,
+        style: {
+          padding: "5px 8px",
+          background: "#1e293b",
+          borderRadius: "4px",
+          fontSize: "11px",
+          color: "#94a3b8",
+          fontFamily: "inherit",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          cursor: canExpand ? "pointer" : "default"
+        },
+        children: compactDisplay
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-function RunningTimer({ startTime }) {
-  const [elapsed, setElapsed] = useState(() => Date.now() - startTime);
-  useEffect(() => {
-    const interval = setInterval(() => setElapsed(Date.now() - startTime), 100);
-    return () => clearInterval(interval);
-  }, [startTime]);
-  return /* @__PURE__ */ jsxDEV(Fragment2, {
-    children: [
-      elapsed,
-      "ms"
-    ]
-  }, undefined, true, undefined, this);
+
+// src/devtools/browser/components/HandlerChips.tsx
+import { jsxDEV as jsxDEV8, Fragment as Fragment3 } from "react/jsx-dev-runtime";
+function getExternalLabel(hop) {
+  if (hop.handlerType !== "external")
+    return null;
+  return hop.handlerClient != null ? `${hop.transport ?? "ext"} → ${hop.handlerClient.envId}` : `→ ${hop.transport ?? "ext"}`;
 }
-function ActionDetailPanel({ entry }) {
-  return /* @__PURE__ */ jsxDEV("div", {
-    style: {
-      flex: 1,
-      overflowY: "auto",
-      padding: "10px 12px",
-      display: "flex",
-      flexDirection: "column",
-      gap: "8px"
-    },
+function HandlerChips({ entry, size, alwaysShowLocal = false }) {
+  const firstHop = entry.meta.routing[0];
+  const localEnvId = firstHop != null ? firstHop.runtime.envId : null;
+  const externalLabel = firstHop != null ? getExternalLabel(firstHop) : null;
+  const fontSize = size === "md" ? "9px" : "8px";
+  const padding = size === "md" ? "1px 5px" : "1px 4px";
+  return /* @__PURE__ */ jsxDEV8(Fragment3, {
     children: [
-      /* @__PURE__ */ jsxDEV(MetaSection, {
-        entry
+      localEnvId != null && (alwaysShowLocal || externalLabel == null) && /* @__PURE__ */ jsxDEV8(Chip, {
+        color: "#34d399",
+        borderColor: "#14532d",
+        fontSize,
+        padding,
+        children: localEnvId
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV(RoutingSection, {
-        entry
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV(DetailSection, {
-        label: "Input",
-        value: entry.input
-      }, undefined, false, undefined, this),
-      entry.status === "success" && /* @__PURE__ */ jsxDEV(DetailSection, {
-        label: "Output",
-        value: entry.output,
-        color: "#4ade80"
-      }, undefined, false, undefined, this),
-      entry.status === "failed" && /* @__PURE__ */ jsxDEV(DetailSection, {
-        label: "Error",
-        value: entry.error,
-        color: "#f87171"
-      }, undefined, false, undefined, this),
-      entry.status === "aborted" && entry.abortReason != null && /* @__PURE__ */ jsxDEV(DetailSection, {
-        label: "Abort Reason",
-        value: entry.abortReason,
-        color: "#9ca3af"
-      }, undefined, false, undefined, this),
-      entry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV(DetailSection, {
-        label: `Progress (${entry.progressUpdates.length})`,
-        value: entry.progressUpdates
+      externalLabel != null && /* @__PURE__ */ jsxDEV8(Chip, {
+        color: "#fbbf24",
+        borderColor: "#78350f",
+        fontSize,
+        padding,
+        children: externalLabel
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-function MetaSection({ entry }) {
-  const [expanded, setExpanded] = useState(false);
-  const { meta, cuid, startTime: _startTime } = entry;
-  const expandedRows = [
-    { label: "cuid", value: cuid },
-    { label: "origin", 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__ */ jsxDEV("div", {
+
+// src/devtools/browser/components/MetaSection.tsx
+import { useState as useState3 } from "react";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+function MetaChip({ label, value }) {
+  return /* @__PURE__ */ jsxDEV9("span", {
+    style: { whiteSpace: "nowrap" },
     children: [
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxDEV9("span", {
+        style: { color: "#475569" },
+        children: [
+          label,
+          " "
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV9("span", {
+        style: { color: "#cbd5e1" },
+        children: value
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function MetaSection({ entry }) {
+  const [expanded, setExpanded] = useState3(false);
+  const { meta, cuid } = entry;
+  const expandedRows = [
+    { label: "cuid", value: cuid },
+    { label: "origin", 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__ */ jsxDEV9("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV9("div", {
         style: {
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
-          marginBottom: "3px",
-          userSelect: "none"
+          marginBottom: "3px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV("div", {
+          /* @__PURE__ */ jsxDEV9("div", {
             style: {
               color: "#60a5fa",
               fontSize: "10px",
@@ -979,21 +642,16 @@ function MetaSection({ entry }) {
             },
             children: "Meta"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             style: { color: "#334155", fontSize: "11px" },
             children: expanded ? "▾" : "▸"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      expanded ? /* @__PURE__ */ jsxDEV("div", {
+      expanded ? /* @__PURE__ */ jsxDEV9("div", {
         onClick: () => setExpanded(false),
-        style: {
-          background: "#1e293b",
-          borderRadius: "4px",
-          overflow: "hidden",
-          cursor: "pointer"
-        },
-        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV("div", {
+        style: { background: "#1e293b", borderRadius: "4px", overflow: "hidden", cursor: "pointer" },
+        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV9("div", {
           style: {
             display: "grid",
             gridTemplateColumns: "52px 1fr",
@@ -1003,22 +661,17 @@ function MetaSection({ entry }) {
             alignItems: "start"
           },
           children: [
-            /* @__PURE__ */ jsxDEV("span", {
+            /* @__PURE__ */ jsxDEV9("span", {
               style: { textAlign: "left", color: "#475569", fontSize: "10px", paddingTop: "1px" },
               children: label
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("span", {
-              style: {
-                textAlign: "left",
-                color: "#cbd5e1",
-                fontSize: "11px",
-                wordBreak: "break-all"
-              },
+            /* @__PURE__ */ jsxDEV9("span", {
+              style: { textAlign: "left", color: "#cbd5e1", fontSize: "11px", wordBreak: "break-all" },
               children: value
             }, undefined, false, undefined, this)
           ]
         }, label, true, undefined, this))
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("div", {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV9("div", {
         onClick: () => setExpanded(true),
         style: {
           background: "#1e293b",
@@ -1032,19 +685,19 @@ function MetaSection({ entry }) {
           cursor: "pointer"
         },
         children: [
-          /* @__PURE__ */ jsxDEV(MetaChip, {
+          /* @__PURE__ */ jsxDEV9(MetaChip, {
             label: "cuid",
             value: `…${cuid.slice(-8)}`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(MetaChip, {
+          /* @__PURE__ */ jsxDEV9(MetaChip, {
             label: "origin",
             value: meta.originClient.envId
           }, undefined, false, undefined, this),
-          meta.originClient.perId != null && /* @__PURE__ */ jsxDEV(MetaChip, {
+          meta.originClient.perId != null && /* @__PURE__ */ jsxDEV9(MetaChip, {
             label: "perId",
             value: meta.originClient.perId.length > 10 ? `${meta.originClient.perId.slice(0, 10)}…` : meta.originClient.perId
           }, undefined, false, undefined, this),
-          meta.originClient.insId != null && /* @__PURE__ */ jsxDEV(MetaChip, {
+          meta.originClient.insId != null && /* @__PURE__ */ jsxDEV9(MetaChip, {
             label: "insId",
             value: meta.originClient.insId.length > 10 ? `${meta.originClient.insId.slice(0, 10)}…` : meta.originClient.insId
           }, undefined, false, undefined, this)
@@ -1053,221 +706,1360 @@ function MetaSection({ entry }) {
     ]
   }, undefined, true, undefined, this);
 }
-function MetaChip({ label, value }) {
-  return /* @__PURE__ */ jsxDEV("span", {
-    style: { whiteSpace: "nowrap" },
-    children: [
-      /* @__PURE__ */ jsxDEV("span", {
-        style: { color: "#475569" },
-        children: [
-          label,
-          " "
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("span", {
-        style: { color: "#cbd5e1" },
-        children: value
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-function RoutingSection({ entry }) {
+
+// src/devtools/browser/components/RoutingSection.tsx
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+function RoutingSection({
+  entry,
+  minHopCount = 0
+}) {
   const { meta, startTime } = entry;
-  if (meta.routing.length === 0)
-    return null;
   const hopCount = meta.routing.length;
-  return /* @__PURE__ */ jsxDEV("div", {
+  const phantomCount = Math.max(0, minHopCount - hopCount);
+  if (hopCount === 0 && phantomCount === 0)
+    return null;
+  return /* @__PURE__ */ jsxDEV10("div", {
     children: [
-      /* @__PURE__ */ jsxDEV(SectionLabel, {
-        label: `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}`
+      /* @__PURE__ */ jsxDEV10(SectionLabel, {
+        label: hopCount > 0 ? `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}` : "Routing"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxDEV10("div", {
         style: { display: "flex", flexDirection: "column", gap: "2px" },
-        children: meta.routing.map((hop, i) => {
-          const isLocal = hop.handlerType === "local";
-          const isLast = i === hopCount - 1;
-          const badgeColor = isLocal ? "#34d399" : "#fbbf24";
-          const badgeText = isLocal ? "● exec" : `→ ${hop.transport ?? "ext"}`;
-          const runtimeTitle = [hop.runtime.perId, hop.runtime.insId].filter(Boolean).join(" · ") || undefined;
-          const rowBorder = isLast ? undefined : "1px solid #0f172a";
-          return /* @__PURE__ */ jsxDEV("div", {
+        children: [
+          meta.routing.map((hop, i) => {
+            const isLocal = hop.handlerType === "local";
+            const isLast = i === hopCount - 1 && phantomCount === 0;
+            const badgeColor = isLocal ? "#34d399" : "#fbbf24";
+            const badgeText = isLocal ? "● exec" : `→ ${hop.transport ?? "ext"}`;
+            const runtimeTitle = [hop.runtime.perId, hop.runtime.insId].filter(Boolean).join(" · ") || undefined;
+            return /* @__PURE__ */ jsxDEV10("div", {
+              style: {
+                background: "#1e293b",
+                borderRadius: "4px",
+                overflow: "hidden",
+                display: "grid",
+                gridTemplateColumns: "30% 1fr 30%",
+                alignItems: "center",
+                columnGap: "8px",
+                borderBottom: isLast ? undefined : "1px solid #0f172a",
+                padding: "4px 8px"
+              },
+              children: [
+                /* @__PURE__ */ jsxDEV10("span", {
+                  style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
+                  children: [
+                    /* @__PURE__ */ jsxDEV10("span", {
+                      style: { color: "#334155", fontSize: "10px", width: "16px", textAlign: "right" },
+                      children: i + 1
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV10("span", {
+                      title: runtimeTitle,
+                      style: {
+                        color: "#94a3b8",
+                        fontSize: "11px",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        textAlign: "center"
+                      },
+                      children: hop.runtime.envId
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV10("span", {
+                  style: { color: badgeColor, fontSize: "10px", whiteSpace: "nowrap" },
+                  children: badgeText
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV10("span", {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    paddingRight: "8px",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxDEV10("span", {
+                      style: {
+                        color: "#475569",
+                        fontSize: "10px",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis"
+                      },
+                      children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV10("span", {
+                      style: { color: "#334155", fontSize: "10px", flexShrink: 0, marginLeft: "auto" },
+                      children: [
+                        "+",
+                        hop.time - startTime,
+                        "ms"
+                      ]
+                    }, undefined, true, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, `${hop.time}-${hop.runtime.envId}`, true, undefined, this);
+          }),
+          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxDEV10("div", {
+            "aria-hidden": "true",
             style: {
+              visibility: "hidden",
               background: "#1e293b",
               borderRadius: "4px",
-              overflow: "hidden",
               display: "grid",
               gridTemplateColumns: "30% 1fr 30%",
               alignItems: "center",
               columnGap: "8px",
-              borderBottom: rowBorder,
               padding: "4px 8px"
             },
             children: [
-              /* @__PURE__ */ jsxDEV("span", {
+              /* @__PURE__ */ jsxDEV10("span", {
                 style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                 children: [
-                  /* @__PURE__ */ jsxDEV("span", {
-                    style: {
-                      color: "#334155",
-                      fontSize: "10px",
-                      width: "16px",
-                      textAlign: "right"
-                    },
-                    children: i + 1
+                  /* @__PURE__ */ jsxDEV10("span", {
+                    style: { fontSize: "10px", width: "16px" },
+                    children: "0"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("span", {
-                    title: runtimeTitle,
-                    style: {
-                      color: "#94a3b8",
-                      fontSize: "11px",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
-                      textAlign: "center"
-                    },
-                    children: hop.runtime.envId
+                  /* @__PURE__ */ jsxDEV10("span", {
+                    style: { fontSize: "11px" },
+                    children: "placeholder"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("span", {
-                style: { color: badgeColor, fontSize: "10px", whiteSpace: "nowrap" },
-                children: badgeText
+              /* @__PURE__ */ jsxDEV10("span", {
+                style: { fontSize: "10px" },
+                children: "placeholder"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("span", {
+              /* @__PURE__ */ jsxDEV10("span", {}, undefined, false, undefined, this)
+            ]
+          }, key, true, undefined, this))
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/StackTraceSection.tsx
+import { useState as useState4 } from "react";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+var INTERNAL_PATTERNS = [
+  "/nice-action/",
+  "@nice-code/action",
+  "node_modules/",
+  "native code",
+  "<anonymous>"
+];
+function isInternalFrame(file) {
+  return INTERNAL_PATTERNS.some((p) => file.includes(p));
+}
+function parseStackFrames(stack) {
+  return stack.split(`
+`).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, raw, isInternal: isInternalFrame(file) };
+    }
+    const matchUrl = raw.match(/^at (.+):(\d+):(\d+)$/);
+    if (matchUrl != null) {
+      const file = matchUrl[1];
+      return { file, raw, isInternal: isInternalFrame(file) };
+    }
+    return { raw, isInternal: true };
+  }).filter((f) => f != null);
+}
+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);
+  const filtered = parts[0]?.match(/^[a-zA-Z]:$/) != null ? parts.slice(1) : parts;
+  const tail = filtered.slice(-4);
+  return tail.join("/") || file;
+}
+function StackTraceSection({
+  label,
+  stack,
+  color = "#60a5fa"
+}) {
+  const [showAll, setShowAll] = useState4(false);
+  if (stack == null)
+    return null;
+  const allFrames = parseStackFrames(stack);
+  const userFrames = allFrames.filter((f) => !f.isInternal);
+  const hasInternalFrames = allFrames.length > userFrames.length;
+  const displayFrames = showAll ? allFrames : userFrames;
+  if (allFrames.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxDEV11("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV11("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "3px"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV11(SectionLabel, {
+            label,
+            color
+          }, undefined, false, undefined, this),
+          hasInternalFrames && /* @__PURE__ */ jsxDEV11("span", {
+            style: { color: "#475569", fontSize: "9px" },
+            children: !showAll ? "user only" : `all (${allFrames.length})`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("div", {
+        onClick: () => setShowAll((s) => !s),
+        style: {
+          background: "#040a13",
+          borderRadius: "4px",
+          padding: "2px",
+          overflow: "hidden",
+          cursor: "pointer"
+        },
+        children: displayFrames.length === 0 ? /* @__PURE__ */ jsxDEV11("div", {
+          style: { padding: "6px 10px", color: "#64748b", fontSize: "10px", fontStyle: "italic" },
+          children: "no user frames captured"
+        }, undefined, false, undefined, this) : 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__ */ jsxDEV11("div", {
+            title: titleStr,
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              gap: "0.5em",
+              padding: "4px",
+              borderBottom: idx < displayFrames.length - 1 ? "1px solid #0f172a" : undefined
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV11("span", {
                 style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  paddingRight: "8px",
-                  overflow: "hidden"
+                  color: isUser ? "#64748b" : "#2d3f53",
+                  fontSize: "10px",
+                  minWidth: "10px",
+                  textAlign: "left",
+                  flexShrink: 0,
+                  fontVariantNumeric: "tabular-nums"
                 },
+                children: idx + 1
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("div", {
+                style: { display: "flex", flexDirection: "column", gap: "0.15em", lineHeight: 1.2 },
                 children: [
-                  /* @__PURE__ */ jsxDEV("span", {
-                    style: {
-                      color: "#475569",
-                      fontSize: "10px",
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis"
-                    },
-                    children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
+                  /* @__PURE__ */ jsxDEV11("div", {
+                    style: { display: "flex", alignItems: "center" },
+                    children: /* @__PURE__ */ jsxDEV11("span", {
+                      style: {
+                        color: isUser ? "#e2e8f0" : "#50698b",
+                        fontSize: "12px",
+                        fontWeight: 500,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: frame.fn ?? "(anonymous)"
+                    }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("span", {
-                    style: {
-                      color: "#334155",
-                      fontSize: "10px",
-                      flexShrink: 0,
-                      marginLeft: "auto"
-                    },
+                  /* @__PURE__ */ jsxDEV11("div", {
+                    style: { display: "flex", alignItems: "baseline", overflow: "hidden" },
                     children: [
-                      "+",
-                      hop.time - startTime,
-                      "ms"
+                      folderPrefix !== "" && /* @__PURE__ */ jsxDEV11("span", {
+                        style: {
+                          color: isUser ? "#596b83" : "#2d3f53",
+                          fontSize: "10px",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          flexShrink: 1,
+                          minWidth: 0
+                        },
+                        children: folderPrefix
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV11("span", {
+                        style: {
+                          color: isUser ? "#8a9ebb" : "#425979",
+                          fontSize: "10px",
+                          whiteSpace: "nowrap",
+                          flexShrink: 0
+                        },
+                        children: bareFilename
+                      }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this)
             ]
-          }, `${hop.time}-${hop.runtime.envId}`, true, undefined, this);
+          }, `${frame.fn ?? "anon"}@${frame.file ?? "unknown"}`, true, undefined, this);
         })
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-function SectionLabel({ label, color = "#60a5fa" }) {
-  return /* @__PURE__ */ jsxDEV("div", {
+
+// src/devtools/browser/components/ActionDetailPanel.tsx
+import { jsxDEV as jsxDEV12, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+function DetailHeader({
+  entry,
+  isActive,
+  onClick,
+  childExternalLabels
+}) {
+  const color = STATUS_COLOR[entry.status];
+  const symbol = STATUS_SYMBOL[entry.status];
+  const timestamp = formatTimestamp(entry.startTime);
+  return /* @__PURE__ */ jsxDEV12("div", {
+    onClick: !isActive ? onClick : undefined,
     style: {
-      color,
-      fontSize: "10px",
-      marginBottom: "3px",
-      textTransform: "uppercase",
-      letterSpacing: "0.05em"
+      padding: "10px 12px",
+      background: isActive ? "#1e293b" : "#131f35",
+      borderBottom: "1px solid #0f172a",
+      borderLeft: isActive ? "2px solid #60a5fa" : "2px solid transparent",
+      flexShrink: 0,
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "10px",
+      cursor: isActive ? "default" : "pointer"
     },
-    children: label
-  }, undefined, false, undefined, this);
+    children: [
+      /* @__PURE__ */ jsxDEV12("span", {
+        style: {
+          color,
+          fontSize: "15px",
+          flexShrink: 0,
+          paddingTop: "1px",
+          animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
+        },
+        children: symbol
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "5px" },
+        children: [
+          /* @__PURE__ */ jsxDEV12("div", {
+            style: { display: "flex", alignItems: "center", minWidth: 0, gap: "0.5em" },
+            children: [
+              /* @__PURE__ */ jsxDEV12("span", {
+                style: {
+                  color: "#f1f5f9",
+                  fontSize: "13px",
+                  fontWeight: "600",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  flexShrink: 1,
+                  minWidth: "24px"
+                },
+                children: entry.actionId
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(DomainChip, {
+                domain: entry.domain,
+                allDomains: entry.allDomains,
+                size: "md"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV12("div", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                  minWidth: 0,
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsxDEV12(HandlerChips, {
+                    entry,
+                    size: "md",
+                    alwaysShowLocal: true
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV12(ChildDispatchChips, {
+                    labels: childExternalLabels,
+                    size: "md"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV12("div", {
+                style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 },
+                children: [
+                  /* @__PURE__ */ jsxDEV12("span", {
+                    style: { color: "#334155", fontSize: "10px", letterSpacing: "0.02em" },
+                    children: timestamp
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV12("span", {
+                    style: { color, fontSize: "12px", fontWeight: "500" },
+                    children: /* @__PURE__ */ jsxDEV12(DurationDisplay, {
+                      entry
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
-var COMPACT_CHAR_LIMIT = 120;
-function DetailSection({
-  label,
-  value,
-  color = "#60a5fa"
+function ActionDetailPanel({
+  entry,
+  parent,
+  childEntries,
+  onSelectEntry
 }) {
-  const [expanded, setExpanded] = useState(false);
-  const fullJson = safeStringify(value, 2);
-  const compactJson = safeStringify(value, 0);
-  const canExpand = fullJson !== compactJson || compactJson.length > COMPACT_CHAR_LIMIT;
-  const compactDisplay = compactJson.length > COMPACT_CHAR_LIMIT ? `${compactJson.slice(0, COMPACT_CHAR_LIMIT)}…` : compactJson;
-  return /* @__PURE__ */ jsxDEV("div", {
+  const [focusedChildCuid, setFocusedChildCuid] = useState5(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 childExternalLabels = useMemo(() => {
+    const seen = new Set;
+    const result = [];
+    for (const child of childEntries) {
+      const firstHop = child.meta.routing[0];
+      if (firstHop == null)
+        continue;
+      const label = getExternalLabel(firstHop);
+      if (label == null || seen.has(label))
+        continue;
+      seen.add(label);
+      result.push(label);
+    }
+    return result;
+  }, [childEntries]);
+  const handleFocusChild = (cuid) => {
+    setFocusedChildCuid((prev) => prev === cuid ? null : cuid);
+  };
+  return /* @__PURE__ */ jsxDEV12("div", {
+    style: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      minHeight: 0,
+      background: "#0f172a"
+    },
     children: [
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxDEV12(DetailHeader, {
+        entry,
+        isActive: focusedChildCuid === null,
+        onClick: () => setFocusedChildCuid(null),
+        childExternalLabels
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
         style: {
+          flex: 1,
+          overflowY: "auto",
+          minHeight: 0,
+          padding: "10px 12px",
           display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          marginBottom: "3px",
-          userSelect: "none"
+          flexDirection: "column",
+          gap: "8px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            style: {
-              color,
-              fontSize: "10px",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em"
-            },
-            children: label
+          /* @__PURE__ */ jsxDEV12(CallStackSection, {
+            parent,
+            childEntries,
+            focusedChildCuid,
+            onFocusChild: handleFocusChild,
+            onSelectParent: onSelectEntry
           }, undefined, false, undefined, this),
-          canExpand && /* @__PURE__ */ jsxDEV("span", {
-            style: { color: "#334155", fontSize: "11px" },
-            children: expanded ? "▾" : "▸"
+          /* @__PURE__ */ jsxDEV12(MetaSection, {
+            entry: focusedEntry
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12(RoutingSection, {
+            entry: focusedEntry,
+            minHopCount: maxRoutingHops
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12(StackTraceSection, {
+            label: "Dispatch Site",
+            stack: focusedEntry.callSite,
+            color: "#94a3b8"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12(DetailSection, {
+            label: "Input",
+            value: focusedEntry.input
+          }, undefined, false, undefined, this),
+          focusedEntry.status === "success" && /* @__PURE__ */ jsxDEV12(DetailSection, {
+            label: "Output",
+            value: focusedEntry.output,
+            color: "#4ade80"
+          }, undefined, false, undefined, this),
+          focusedEntry.status === "failed" && /* @__PURE__ */ jsxDEV12(Fragment4, {
+            children: [
+              /* @__PURE__ */ jsxDEV12(DetailSection, {
+                label: "Error",
+                value: focusedEntry.error,
+                color: "#f87171"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(StackTraceSection, {
+                label: "Error Stack",
+                stack: focusedEntry.errorStack,
+                color: "#f87171"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          focusedEntry.status === "aborted" && /* @__PURE__ */ jsxDEV12(Fragment4, {
+            children: [
+              focusedEntry.abortReason != null && /* @__PURE__ */ jsxDEV12(DetailSection, {
+                label: "Abort Reason",
+                value: focusedEntry.abortReason,
+                color: "#9ca3af"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(StackTraceSection, {
+                label: "Abort Stack",
+                stack: focusedEntry.errorStack,
+                color: "#9ca3af"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV12(DetailSection, {
+            label: `Progress (${focusedEntry.progressUpdates.length})`,
+            value: focusedEntry.progressUpdates
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this),
-      expanded ? /* @__PURE__ */ jsxDEV("div", {
-        onClick: canExpand ? () => setExpanded(false) : undefined,
-        style: {
-          margin: 0,
-          padding: "6px 8px",
-          background: "#1e293b",
-          borderRadius: "4px",
-          fontSize: "11px",
-          color: "#cbd5e1",
-          overflowX: "auto",
-          textAlign: "left",
-          whiteSpace: "pre-wrap",
-          wordBreak: "break-all",
-          cursor: canExpand ? "pointer" : "default"
-        },
-        children: fullJson
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("div", {
-        onClick: canExpand ? () => setExpanded(true) : undefined,
-        style: {
-          padding: "5px 8px",
-          background: "#1e293b",
-          borderRadius: "4px",
-          fontSize: "11px",
-          color: "#94a3b8",
-          fontFamily: "inherit",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          cursor: canExpand ? "pointer" : "default"
-        },
-        children: compactDisplay
-      }, undefined, false, undefined, this)
+      }, undefined, true, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-function safeStringify(value, indent = 2) {
-  if (value === undefined)
-    return "undefined";
-  if (value === null)
-    return "null";
-  try {
-    return JSON.stringify(value, null, indent);
-  } catch {
-    return String(value);
+
+// src/devtools/browser/components/ActionEntryRow.tsx
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+function ActionEntryRow({
+  entry,
+  isSelected,
+  onClick,
+  groupCount,
+  isSubEntry = false,
+  isLatest = false,
+  latestTime,
+  childExternalLabels
+}) {
+  const color = STATUS_COLOR[entry.status];
+  const symbol = STATUS_SYMBOL[entry.status];
+  const timestamp = formatTimestamp(entry.startTime);
+  if (isSubEntry) {
+    return /* @__PURE__ */ jsxDEV13("div", {
+      "data-cuid": entry.cuid,
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "1em",
+        padding: "4px 10px 4px 26px",
+        cursor: "pointer",
+        background: isSelected ? "#131f35" : "#070d18",
+        borderBottom: "1px solid #0f172a",
+        borderLeft: isSelected ? "2px solid #3b82f6" : "2px solid transparent"
+      },
+      children: [
+        /* @__PURE__ */ jsxDEV13("span", {
+          style: { color: "#334155", fontSize: "10px", flexShrink: 0 },
+          children: symbol
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV13("span", {
+          children: [
+            /* @__PURE__ */ jsxDEV13("span", {
+              style: { color: isSelected ? "#818cf8" : "#3730a3", opacity: 0.5, fontSize: "10px" },
+              children: "⚡"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV13("span", {
+              style: {
+                flex: 1,
+                color: "#475569",
+                fontSize: "11px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                minWidth: 0
+              },
+              children: entry.actionId
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV13(DomainChip, {
+          domain: entry.domain,
+          allDomains: entry.allDomains,
+          size: "sm"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV13("span", {
+          style: { color: "#334155", fontSize: "11px", flexShrink: 0 },
+          children: /* @__PURE__ */ jsxDEV13(DurationDisplay, {
+            entry
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV13("div", {
+    "data-cuid": entry.cuid,
+    onClick,
+    style: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "8px",
+      padding: isSelected ? "6px 12px 6px 10px" : "6px 12px",
+      cursor: "pointer",
+      background: isSelected ? "#131f35" : "transparent",
+      borderBottom: "1px solid #0f172a",
+      borderLeft: isSelected ? "2px solid #60a5fa" : "2px solid transparent"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV13("span", {
+        style: {
+          flexShrink: 0,
+          minWidth: "3.5em",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "start"
+        },
+        children: isLatest ? /* @__PURE__ */ jsxDEV13(Chip, {
+          color: "#60a5fa",
+          borderColor: "#1e3a5f",
+          children: "latest"
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV13(Chip, {
+          color: "#475569",
+          borderColor: "#1e293b",
+          children: [
+            "+",
+            latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV13("span", {
+        style: {
+          color,
+          fontSize: "10px",
+          flexShrink: 0,
+          paddingTop: "2px",
+          animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
+        },
+        children: symbol
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV13("div", {
+        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "3px" },
+        children: [
+          /* @__PURE__ */ jsxDEV13("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              minWidth: 0,
+              overflow: "hidden",
+              gap: "0.5em"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV13("span", {
+                style: {
+                  color: "#cbd5e1",
+                  fontSize: "11px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  flexShrink: 1,
+                  minWidth: "24px"
+                },
+                children: entry.actionId
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13(DomainChip, {
+                domain: entry.domain,
+                allDomains: entry.allDomains,
+                size: "md"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV13("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "6px"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV13("div", {
+                style: {
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: "5px",
+                  minWidth: 0,
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsxDEV13(HandlerChips, {
+                    entry,
+                    size: "sm"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV13(ChildDispatchChips, {
+                    labels: childExternalLabels,
+                    size: "sm"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV13("div", {
+                style: { display: "flex", alignItems: "center", gap: "6px", flexShrink: 0 },
+                children: [
+                  groupCount != null && /* @__PURE__ */ jsxDEV13(Chip, {
+                    color: "#3b82f6",
+                    borderColor: "#1e3a5f",
+                    fontSize: "9px",
+                    padding: "1px 5px",
+                    children: [
+                      "×",
+                      groupCount
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV13("span", {
+                    style: { color: "#1e3a5f", fontSize: "10px", letterSpacing: "0.02em" },
+                    children: timestamp
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV13("span", {
+                    style: { color: "#475569", fontSize: "11px" },
+                    children: /* @__PURE__ */ jsxDEV13(DurationDisplay, {
+                      entry
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/PanelChrome.tsx
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+var DOCKED_SIZE_MIN = 140;
+var POSITION_GRID = [
+  ["top-left", "dock-top", "top-right"],
+  ["dock-left", null, "dock-right"],
+  ["bottom-left", "dock-bottom", "bottom-right"]
+];
+function getDockSide(pos) {
+  if (pos === "dock-top")
+    return "top";
+  if (pos === "dock-bottom")
+    return "bottom";
+  if (pos === "dock-left")
+    return "left";
+  if (pos === "dock-right")
+    return "right";
+  return null;
+}
+function PanelHeader({
+  position,
+  onPositionChange,
+  onClose,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxDEV14("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "8px 12px",
+      background: "#1e293b",
+      borderBottom: "1px solid #0f172a",
+      flexShrink: 0
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV14("span", {
+        style: { color: "#60a5fa", fontWeight: "bold", fontSize: "11px" },
+        children: "⚡ nice-action devtools"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV14("div", {
+        style: { display: "flex", gap: "10px", alignItems: "center" },
+        children: [
+          /* @__PURE__ */ jsxDEV14(PositionPicker, {
+            position,
+            onChange: onPositionChange
+          }, undefined, false, undefined, this),
+          onClear != null && /* @__PURE__ */ jsxDEV14("button", {
+            onClick: onClear,
+            style: {
+              background: "none",
+              border: "none",
+              color: "#475569",
+              cursor: "pointer",
+              fontSize: "11px",
+              padding: "0"
+            },
+            children: "clear"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV14("button", {
+            onClick: onClose,
+            style: {
+              background: "none",
+              border: "none",
+              color: "#475569",
+              cursor: "pointer",
+              fontSize: "16px",
+              padding: "0",
+              lineHeight: "1"
+            },
+            children: "×"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function PositionPicker({
+  position,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxDEV14("div", {
+    title: "Move / dock panel",
+    style: { display: "grid", gridTemplateColumns: "repeat(3, 9px)", gap: "2px", padding: "2px" },
+    children: POSITION_GRID.flat().map((pos) => {
+      if (pos == null)
+        return /* @__PURE__ */ jsxDEV14("div", {
+          style: { width: "9px", height: "9px" }
+        }, "center-empty", false, undefined, this);
+      const isDock = pos.startsWith("dock-");
+      const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
+      const isActive = pos === position;
+      return /* @__PURE__ */ jsxDEV14("div", {
+        title: pos,
+        onClick: () => onChange(pos),
+        style: {
+          width: "9px",
+          height: "9px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer"
+        },
+        children: /* @__PURE__ */ jsxDEV14("div", {
+          style: {
+            width: isDock ? isTopBottom ? "9px" : "3px" : "7px",
+            height: isDock ? isTopBottom ? "3px" : "9px" : "7px",
+            borderRadius: isDock ? "1px" : "50%",
+            background: isActive ? "#60a5fa" : "#334155"
+          }
+        }, undefined, false, undefined, this)
+      }, pos, false, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+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 * 0.85 : window.innerHeight * 0.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);
+  };
+  const edgeStyle = 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" };
+  return /* @__PURE__ */ jsxDEV14("div", {
+    onMouseDown,
+    style: {
+      position: "absolute",
+      zIndex: 10,
+      background: "transparent",
+      ...edgeStyle
+    }
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/NiceActionDevtools.tsx
+import { jsxDEV as jsxDEV15, Fragment as Fragment5 } from "react/jsx-dev-runtime";
+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; }
+    }
+  `;
+  document.head?.appendChild(style);
+}
+var PREFS_KEY = "__nice-action-devtools-prefs";
+var DOCKED_HEIGHT_DEFAULT = 320;
+var DOCKED_WIDTH_DEFAULT = 420;
+var ROW_HEIGHT = 50;
+var SUB_ROW_HEIGHT = 30;
+function readPrefs(defaultPosition, initialOpen) {
+  const fallback = {
+    position: defaultPosition,
+    isOpen: initialOpen,
+    dockedHeight: DOCKED_HEIGHT_DEFAULT,
+    dockedWidth: DOCKED_WIDTH_DEFAULT
+  };
+  try {
+    if (typeof localStorage === "undefined")
+      return fallback;
+    const stored = localStorage.getItem(PREFS_KEY);
+    return stored != null ? { ...fallback, ...JSON.parse(stored) } : fallback;
+  } 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"}`;
+}
+function canGroupWith(a, b) {
+  if (a.status === "running" || b.status === "running")
+    return false;
+  const handlerA = getHandlerKey(a);
+  const handlerB = getHandlerKey(b);
+  const handlerConflict = handlerA !== "none" && handlerB !== "none" && handlerA !== handlerB;
+  return a.actionId === b.actionId && a.domain === b.domain && a.status === b.status && !handlerConflict && safeStringify(a.input, 0) === safeStringify(b.input, 0);
+}
+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(props) {
+  if (false) {}
+  return /* @__PURE__ */ jsxDEV15(NiceActionDevtools_Panel, {
+    ...props
+  }, undefined, false, undefined, this);
+}
+function NiceActionDevtools_Panel({
+  core,
+  position: defaultPosition = "bottom-right",
+  initialOpen = false
+}) {
+  const [prefs, setPrefsRaw] = useState6(() => readPrefs(defaultPosition, initialOpen));
+  const [entries, setEntries] = useState6([]);
+  const [selectedCuid, setSelectedCuid] = useState6(null);
+  const [expandedGroupCuids, setExpandedGroupCuids] = useState6(new Set);
+  const [domainTooltip, setDomainTooltip] = useState6(null);
+  const showDomainTooltip = useCallback((rect, allDomains) => setDomainTooltip({ rect, allDomains }), []);
+  const hideDomainTooltip = useCallback(() => setDomainTooltip(null), []);
+  const domainTooltipCtx = useMemo2(() => ({ show: showDomainTooltip, hide: hideDomainTooltip }), [showDomainTooltip, hideDomainTooltip]);
+  useEffect2(() => core.subscribe(setEntries), [core]);
+  const groups = useMemo2(() => {
+    const byCuid = new Map(entries.map((e) => [e.cuid, e]));
+    const roots = entries.filter((e) => e.parentCuid == null || !byCuid.has(e.parentCuid));
+    return groupEntries(roots);
+  }, [entries]);
+  const childExternalLabelsMap = useMemo2(() => {
+    const map = new Map;
+    for (const entry of entries) {
+      if (entry.parentCuid == null)
+        continue;
+      const firstHop = entry.meta.routing[0];
+      if (firstHop == null)
+        continue;
+      const label = getExternalLabel(firstHop);
+      if (label == null)
+        continue;
+      const existing = map.get(entry.parentCuid) ?? [];
+      if (!existing.includes(label))
+        map.set(entry.parentCuid, [...existing, label]);
+    }
+    return map;
+  }, [entries]);
+  const handleGroupRowClick = (group) => {
+    const repCuid = group.representative.cuid;
+    const isExpanded = expandedGroupCuids.has(repCuid);
+    const isSelected = selectedCuid === repCuid;
+    if (group.rest.length === 0) {
+      setSelectedCuid(isSelected ? null : repCuid);
+      setExpandedGroupCuids(new Set);
+    } else if (isSelected && isExpanded) {
+      setSelectedCuid(null);
+      setExpandedGroupCuids(new Set);
+    } else {
+      setSelectedCuid(repCuid);
+      setExpandedGroupCuids(new Set([repCuid]));
+    }
+  };
+  const setPrefs = (update) => {
+    setPrefsRaw((prev) => {
+      const next = { ...prev, ...update };
+      writePrefs(next);
+      return next;
+    });
+  };
+  const { position, isOpen, dockedHeight, dockedWidth } = prefs;
+  const dockSide = getDockSide(position);
+  const isHorizDock = dockSide === "top" || dockSide === "bottom";
+  const dockedSize = isHorizDock ? dockedHeight : dockedWidth;
+  const selectedEntry = selectedCuid != null ? entries.find((e) => e.cuid === selectedCuid) : null;
+  const runningCount = entries.filter((e) => e.status === "running").length;
+  useEffect2(() => {
+    const sides = ["top", "bottom", "left", "right"];
+    const clearAll = () => {
+      sides.forEach((s) => {
+        document.body.style.removeProperty(`margin-${s}`);
+      });
+    };
+    if (!isOpen || dockSide == null) {
+      clearAll();
+      return clearAll;
+    }
+    clearAll();
+    document.body.style.setProperty(`margin-${dockSide}`, `${dockedSize}px`);
+    return clearAll;
+  }, [dockSide, isOpen, dockedSize]);
+  const closedAnchor = (() => {
+    switch (position) {
+      case "dock-bottom":
+        return { bottom: "16px", right: "16px" };
+      case "dock-top":
+        return { top: "16px", right: "16px" };
+      case "dock-left":
+        return { top: "16px", left: "16px" };
+      case "dock-right":
+        return { top: "16px", right: "16px" };
+      default:
+        return {
+          ...position.includes("right") ? { right: "16px" } : { left: "16px" },
+          ...position.includes("bottom") ? { bottom: "16px" } : { top: "16px" }
+        };
+    }
+  })();
+  const baseStyle = {
+    position: "fixed",
+    zIndex: 2147483647,
+    fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+    fontSize: "12px"
+  };
+  if (!isOpen) {
+    return /* @__PURE__ */ jsxDEV15("button", {
+      onClick: () => setPrefs({ isOpen: true }),
+      style: {
+        ...baseStyle,
+        ...closedAnchor,
+        background: "#1e293b",
+        color: "#94a3b8",
+        border: "1px solid #334155",
+        borderRadius: "6px",
+        padding: "5px 10px",
+        cursor: "pointer",
+        lineHeight: "1.5"
+      },
+      children: [
+        "⚡ actions",
+        runningCount > 0 && /* @__PURE__ */ jsxDEV15("span", {
+          style: {
+            marginLeft: "6px",
+            color: "#60a5fa",
+            animation: "__nice-action-pulse 1.2s ease-in-out infinite"
+          },
+          children: [
+            runningCount,
+            " running"
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const panelStyle = dockSide != null ? {
+    ...baseStyle,
+    background: "#0f172a",
+    border: "1px solid #1e293b",
+    color: "#e2e8f0",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 -4px 24px rgba(0,0,0,0.4)",
+    overflow: "hidden",
+    ...dockSide === "bottom" ? {
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: `${dockedSize}px`,
+      borderRadius: "8px 8px 0 0"
+    } : dockSide === "top" ? {
+      top: 0,
+      left: 0,
+      right: 0,
+      height: `${dockedSize}px`,
+      borderRadius: "0 0 8px 8px"
+    } : dockSide === "left" ? {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      width: `${dockedSize}px`,
+      borderRadius: "0 8px 8px 0"
+    } : {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: `${dockedSize}px`,
+      borderRadius: "8px 0 0 8px"
+    }
+  } : {
+    ...baseStyle,
+    ...closedAnchor,
+    width: "460px",
+    maxHeight: "560px",
+    background: "#0f172a",
+    border: "1px solid #1e293b",
+    borderRadius: "10px",
+    color: "#e2e8f0",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 25px 50px rgba(0,0,0,0.5)",
+    overflow: "hidden"
+  };
+  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,
+    expandedGroupCuids,
+    onGroupClick: handleGroupRowClick,
+    onSubClick: (cuid, isSelected) => setSelectedCuid(isSelected ? null : cuid),
+    childExternalLabelsMap
+  };
+  return /* @__PURE__ */ jsxDEV15(DomainTooltipCtx.Provider, {
+    value: domainTooltipCtx,
+    children: /* @__PURE__ */ jsxDEV15("div", {
+      style: panelStyle,
+      children: [
+        domainTooltip != null && /* @__PURE__ */ jsxDEV15(DomainHierarchyTooltip, {
+          anchor: domainTooltip.rect,
+          allDomains: domainTooltip.allDomains
+        }, undefined, false, undefined, this),
+        dockSide != null && /* @__PURE__ */ jsxDEV15(ResizeHandle, {
+          dockSide,
+          dockedSize,
+          onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV15(PanelHeader, {
+          position,
+          onPositionChange: (p) => setPrefs({ position: p }),
+          onClose: () => setPrefs({ isOpen: false }),
+          onClear: entries.length > 0 ? () => {
+            core.clear();
+            setSelectedCuid(null);
+            setExpandedGroupCuids(new Set);
+          } : undefined
+        }, undefined, false, undefined, this),
+        isHorizDock ? /* @__PURE__ */ jsxDEV15("div", {
+          style: { flex: 1, display: "flex", overflow: "hidden" },
+          children: [
+            /* @__PURE__ */ jsxDEV15(VirtualActionList, {
+              ...virtualListProps,
+              style: {
+                width: "340px",
+                flexShrink: 0,
+                overflowY: "auto",
+                borderRight: "1px solid #1e293b"
+              }
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV15("div", {
+              style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" },
+              children: selectedEntry != null ? /* @__PURE__ */ jsxDEV15(ActionDetailPanel, {
+                entry: selectedEntry,
+                parent: selectedEntryParent,
+                childEntries: selectedEntryChildren,
+                onSelectEntry: (cuid) => setSelectedCuid(cuid)
+              }, selectedEntry.cuid, false, undefined, this) : /* @__PURE__ */ jsxDEV15("div", {
+                style: {
+                  padding: "24px",
+                  textAlign: "center",
+                  color: "#475569",
+                  fontSize: "11px"
+                },
+                children: "Select an action to inspect"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV15(Fragment5, {
+          children: [
+            /* @__PURE__ */ jsxDEV15(VirtualActionList, {
+              ...virtualListProps,
+              style: {
+                overflowY: "auto",
+                flex: 1,
+                minHeight: "80px",
+                borderBottom: selectedEntry != null ? "1px solid #1e293b" : "none"
+              }
+            }, undefined, false, undefined, this),
+            selectedEntry != null && /* @__PURE__ */ jsxDEV15("div", {
+              style: {
+                flexShrink: 0,
+                maxHeight: "45%",
+                display: "flex",
+                flexDirection: "column",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsxDEV15(ActionDetailPanel, {
+                entry: selectedEntry,
+                parent: selectedEntryParent,
+                childEntries: selectedEntryChildren,
+                onSelectEntry: (cuid) => setSelectedCuid(cuid)
+              }, selectedEntry.cuid, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function VirtualActionList({
+  groups,
+  selectedCuid,
+  expandedGroupCuids,
+  onGroupClick,
+  onSubClick,
+  childExternalLabelsMap,
+  style
+}) {
+  const outerRef = useRef2(null);
+  const latestTime = groups[0]?.representative.startTime;
+  const flatItems = useMemo2(() => {
+    const result = [];
+    for (let gi = 0;gi < groups.length; gi++) {
+      const group = groups[gi];
+      const repCuid = group.representative.cuid;
+      const isExpanded = expandedGroupCuids.has(repCuid) || group.rest.some((e) => e.cuid === selectedCuid);
+      result.push({ type: "group", group, groupIndex: gi });
+      if (isExpanded) {
+        for (const entry of group.rest) {
+          result.push({ type: "sub", entry, group });
+        }
+      }
+    }
+    return result;
+  }, [groups, expandedGroupCuids, selectedCuid]);
+  const flatItemsRef = useRef2(flatItems);
+  flatItemsRef.current = flatItems;
+  const virtualizer = useVirtualizer({
+    count: flatItems.length,
+    getScrollElement: () => outerRef.current,
+    estimateSize: (i) => flatItemsRef.current[i]?.type === "sub" ? SUB_ROW_HEIGHT : ROW_HEIGHT,
+    overscan: 5,
+    measureElement: (el) => el.getBoundingClientRect().height
+  });
+  const prevGroupLenRef = useRef2(groups.length);
+  useLayoutEffect(() => {
+    const el = outerRef.current;
+    if (el == null)
+      return;
+    const prev = prevGroupLenRef.current;
+    prevGroupLenRef.current = groups.length;
+    const added = groups.length - prev;
+    if (added > 0 && el.scrollTop > 10) {
+      el.scrollTop += added * ROW_HEIGHT;
+    }
+  }, [groups]);
+  const prevSelectedRef = useRef2(selectedCuid);
+  useEffect2(() => {
+    if (selectedCuid === prevSelectedRef.current)
+      return;
+    prevSelectedRef.current = selectedCuid;
+    if (selectedCuid == null)
+      return;
+    const idx = flatItemsRef.current.findIndex((item) => item.type === "group" && (item.group.representative.cuid === selectedCuid || item.group.rest.some((e) => e.cuid === selectedCuid)) || item.type === "sub" && item.entry.cuid === selectedCuid);
+    if (idx >= 0)
+      virtualizer.scrollToIndex(idx, { align: "auto" });
+  }, [selectedCuid, virtualizer]);
+  if (groups.length === 0) {
+    return /* @__PURE__ */ jsxDEV15("div", {
+      style,
+      children: /* @__PURE__ */ jsxDEV15("div", {
+        style: { padding: "24px", textAlign: "center", color: "#475569" },
+        children: "No actions recorded yet"
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
   }
+  const virtualItems = virtualizer.getVirtualItems();
+  return /* @__PURE__ */ jsxDEV15("div", {
+    ref: outerRef,
+    style,
+    children: /* @__PURE__ */ jsxDEV15("div", {
+      style: { height: `${virtualizer.getTotalSize()}px`, position: "relative" },
+      children: virtualItems.map((vi) => {
+        const item = flatItems[vi.index];
+        if (item == null)
+          return null;
+        return /* @__PURE__ */ jsxDEV15("div", {
+          "data-index": vi.index,
+          ref: virtualizer.measureElement,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            transform: `translateY(${vi.start}px)`,
+            borderBottom: "1px solid #101109"
+          },
+          children: item.type === "group" ? /* @__PURE__ */ jsxDEV15(ActionEntryRow, {
+            entry: item.group.representative,
+            isSelected: selectedCuid === item.group.representative.cuid,
+            groupCount: item.group.rest.length > 0 ? item.group.rest.length + 1 : undefined,
+            isLatest: item.groupIndex === 0,
+            latestTime,
+            childExternalLabels: childExternalLabelsMap.get(item.group.representative.cuid),
+            onClick: () => onGroupClick(item.group)
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15(ActionEntryRow, {
+            entry: item.entry,
+            isSelected: selectedCuid === item.entry.cuid,
+            isSubEntry: true,
+            isLatest: false,
+            latestTime,
+            onClick: () => onSubClick(item.entry.cuid, selectedCuid === item.entry.cuid)
+          }, undefined, false, undefined, this)
+        }, vi.key, false, undefined, this);
+      })
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
 }
 export {
   NiceActionDevtools,