@nice-code/action 0.2.16 → 0.2.17

package/build/devtools/browser/index.js

@@ -1827,6 +1827,12 @@ var require_source_node = __commonJS((exports) => {
 });
 
 // src/devtools/core/ActionDevtoolsCore.ts
+function serializeErrorForDisplay(error) {
+  if (error != null && typeof error === "object" && error.name === "NiceError" && typeof error.toJsonObject === "function") {
+    return error.toJsonObject();
+  }
+  return error;
+}
 function extractRouting(context) {
   return (context?.routing ?? []).map((item) => {
     const handler = item.handler;
@@ -1876,6 +1882,7 @@ class ActionDevtoolsCore {
           status: "running",
           startTime: time,
           input: runningAction.state?.request?.input,
+          inputHash: runningAction.state?.request?.inputHash,
           progressUpdates: [],
           meta: extractMeta(runningAction.context),
           parentCuid: runningAction.parentCuid,
@@ -1898,16 +1905,29 @@ class ActionDevtoolsCore {
           };
           const finishType = update.finishType;
           if (finishType === "success" /* success */) {
-            return { ...base, status: "success", output: update.response?.result?.output };
+            const result = update.response?.result;
+            const outputHash = update.response?.outputHash;
+            if (result != null && !result.ok) {
+              const rawError = result.error;
+              const errorStack2 = rawError instanceof Error ? rawError.stack : undefined;
+              return {
+                ...base,
+                status: "action-error",
+                outputHash,
+                error: serializeErrorForDisplay(rawError),
+                errorStack: errorStack2
+              };
+            }
+            return { ...base, status: "success", output: result?.output, outputHash };
           }
           if (finishType === "failed" /* failed */) {
             const rawError = update.error;
             const errorStack2 = rawError instanceof Error ? rawError.stack : undefined;
-            return { ...base, status: "failed", error: rawError, errorStack: errorStack2 };
+            return { ...base, status: "failed", error: serializeErrorForDisplay(rawError), errorStack: errorStack2 };
           }
           const abortReason = update.reason;
           const errorStack = abortReason instanceof Error ? abortReason.stack : undefined;
-          return { ...base, status: "aborted", abortReason, errorStack };
+          return { ...base, status: "aborted", abortReason: serializeErrorForDisplay(abortReason), errorStack };
         });
       }
     });
@@ -1937,204 +1957,176 @@ class ActionDevtoolsCore {
   }
 }
 // src/devtools/browser/NiceActionDevtools.tsx
-import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState6 } from "react";
-
-// src/devtools/browser/components/ActionDetailPanel.tsx
-import { useMemo, useState as useState5 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState9 } from "react";
 
 // src/devtools/core/devtools_colors.ts
+var DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
+var DEVTOOL_COLOR_SEMANTIC_SUCCESS = "#A3E635";
+var DEVTOOL_COLOR_SEMANTIC_SYSTEM = "#38BDF8";
+var DEVTOOL_COLOR_SEMANTIC_WARNING = "#FB923C";
+var DEVTOOL_COLOR_SEMANTIC_METADATA = "#A1A1AA";
 var DEVTOOL_COLOR_HANDLER_LOCAL_TEXT = "#34bb89";
 var DEVTOOL_COLOR_HANDLER_LOCAL_BORDER = "#144427";
 var DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT = "#cfa12a";
 var DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER = "#723917";
+var DEVTOOL_COLOR_TEXT_EMPHASIS = "#f1f5f9";
+var DEVTOOL_COLOR_TEXT_SECONDARY = "#cbd5e1";
+var DEVTOOL_COLOR_TEXT_MUTED = "#64748b";
+var DEVTOOL_COLOR_TEXT_FAINT = "#334155";
+var DEVTOOL_LIST_BASE_BACKGROUND = "#0f172a";
+var DEVTOOL_LIST_GROUP_DIVIDER = "#101109";
+var DEVTOOL_DETAIL_BASE_BACKGROUND = "#0d1729";
+var DEVTOOL_DETAIL_HEADER_BACKGROUND = "#131f35";
+var DEVTOOL_SECTION_BACKGROUND = "#1e293b";
+var DEVTOOL_SECTION_STRING_BACKGROUND = "#0d131f";
+var DEVTOOL_STACK_TRACE_BACKGROUND = "#040a13";
+var DEVTOOL_PANEL_BORDER = "#1e293b";
+var DEVTOOL_PANEL_DIVIDER_BORDER = "#1d3352";
+var DEVTOOL_ERROR_BACKGROUND = "#1e0a0a";
+var DEVTOOL_ERROR_BADGE_BACKGROUND = "#2d0f0f";
+var DEVTOOL_TOOLTIP_BACKGROUND = "#0c1526";
+var DEVTOOL_TOOLTIP_TITLE_BACKGROUND = "#101b2e";
+var DEVTOOL_TOOLTIP_TITLE_BOTTOM_BORDER = "#211f5f";
+var DEVTOOL_TOOLTIP_BORDER = "#312e81";
+var DEVTOOL_COLOR_CALL_STACK_DIVIDER = "#0a1120";
+var DEVTOOL_JSON_KEY = "#a5b4fc";
+var DEVTOOL_JSON_STRING = "#fbbf24";
+var DEVTOOL_JSON_NUMBER = "#34d399";
+var DEVTOOL_JSON_KEYWORD = "#a78bfa";
+var DEVTOOL_JSON_PUNCTUATION = "#475569";
+var DEVTOOL_STACK_FRAME_USER_NUMBER = "#64748b";
+var DEVTOOL_STACK_FRAME_USER_FUNCTION = "#e2e8f0";
+var DEVTOOL_STACK_FRAME_USER_FOLDER = "#596b83";
+var DEVTOOL_STACK_FRAME_USER_FILE = "#8a9ebb";
+var DEVTOOL_STACK_FRAME_USER_LINE = "#4a7fa8";
+var DEVTOOL_STACK_FRAME_INTERNAL_NUMBER = "#2d3f53";
+var DEVTOOL_STACK_FRAME_INTERNAL_FUNCTION = "#50698b";
+var DEVTOOL_STACK_FRAME_INTERNAL_FOLDER = "#2d3f53";
+var DEVTOOL_STACK_FRAME_INTERNAL_FILE = "#425979";
+var DEVTOOL_STACK_FRAME_INTERNAL_LINE = "#2d4a63";
+var SEMANTIC_COLORS = {
+  running_action: {
+    color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+    borderColor: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM}55`
+  },
+  success: {
+    color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
+    borderColor: `${DEVTOOL_COLOR_SEMANTIC_SUCCESS}55`
+  },
+  action_error: {
+    color: DEVTOOL_COLOR_SEMANTIC_WARNING,
+    borderColor: `${DEVTOOL_COLOR_SEMANTIC_WARNING}55`
+  },
+  failed: {
+    color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+    borderColor: `${DEVTOOL_COLOR_SEMANTIC_ERROR}55`
+  },
+  aborted: {
+    color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+    borderColor: DEVTOOL_COLOR_TEXT_FAINT
+  },
+  error: {
+    color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+    borderColor: DEVTOOL_COLOR_SEMANTIC_ERROR
+  },
+  domain: {
+    color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+    borderColor: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM}55`,
+    subtle: { color: "#4b5563", borderColor: "transparent" }
+  },
+  handler_local: {
+    color: DEVTOOL_COLOR_HANDLER_LOCAL_TEXT,
+    borderColor: DEVTOOL_COLOR_HANDLER_LOCAL_BORDER
+  },
+  handler_external: {
+    color: DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT,
+    borderColor: DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER
+  },
+  age: {
+    color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+    borderColor: DEVTOOL_SECTION_BACKGROUND
+  },
+  io_input: {
+    color: "#fbbf24",
+    borderColor: "#78350f"
+  },
+  io_output: {
+    color: "#a78bfa",
+    borderColor: "#4c1d95"
+  },
+  default: {
+    color: DEVTOOL_COLOR_TEXT_MUTED,
+    borderColor: DEVTOOL_COLOR_TEXT_FAINT
+  }
+};
 
-// 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({
-  subtle = false,
-  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: subtle ? "#4b5563" : "#818cf8",
-      fontSize,
-      background: "#0f172a",
-      border: !subtle ? "1px solid #312e81" : "1px solid transparent",
-      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/action_detail/ActionDetailPanel.tsx
+import { useMemo, useState as useState6 } from "react";
+
+// src/devtools/browser/ui_util/size.ts
+function getSizeValue(size) {
+  switch (size) {
+    case "sm" /* sm */:
+      return 0.8;
+    case "md" /* md */:
+      return 1;
+    case "lg" /* lg */:
+      return 1.2;
+    default:
+      return 1;
+  }
 }
 
-// src/devtools/browser/components/Chip.tsx
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-function Chip({
-  color,
-  borderColor,
-  fontSize = "8px",
-  padding = "1px 4px",
-  children,
-  style
-}) {
-  return /* @__PURE__ */ jsxDEV2("span", {
+// src/devtools/browser/components/DetailSection.tsx
+import { useState } from "react";
+
+// src/devtools/browser/components/SectionLabel.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+function SectionLabel({ label, color = DEVTOOL_COLOR_SEMANTIC_SYSTEM }) {
+  return /* @__PURE__ */ jsxDEV("div", {
     style: {
       color,
-      fontSize,
-      background: "#0f172a",
-      border: `1px solid ${borderColor}`,
-      padding,
-      borderRadius: "3px",
-      flexShrink: 0,
-      whiteSpace: "nowrap",
-      ...style
+      fontSize: "0.85em",
+      marginBottom: "3px",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em",
+      fontWeight: 500,
+      textAlign: "left"
     },
-    children
+    children: label
   }, undefined, false, undefined, this);
 }
 
-// src/devtools/browser/components/HandlerChips.tsx
-import { jsxDEV as jsxDEV3, Fragment } 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 HandlerChips({ entry, size }) {
-  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" ? "1em" : "0.8em";
-  const padding = size === "md" ? "1px 5px" : "1px 4px";
-  const firstHopIsLocal = firstHop != null && firstHop.handlerType === "local";
-  return /* @__PURE__ */ jsxDEV3(Fragment, {
-    children: [
-      localEnvId != null && (firstHopIsLocal || externalLabel == null) && /* @__PURE__ */ jsxDEV3(Chip, {
-        color: DEVTOOL_COLOR_HANDLER_LOCAL_TEXT,
-        borderColor: DEVTOOL_COLOR_HANDLER_LOCAL_BORDER,
-        fontSize,
-        padding,
-        children: "local"
-      }, undefined, false, undefined, this),
-      externalLabel != null && /* @__PURE__ */ jsxDEV3(Chip, {
-        color: DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT,
-        borderColor: DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER,
-        fontSize,
-        padding,
-        children: externalLabel
-      }, 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
+import { Circle, CircleAlert, CircleCheck, CircleX, Loader2 } from "lucide-react";
 var STATUS_COLOR = {
-  running: "#60a5fa",
-  success: "#4ade80",
-  failed: "#f87171",
-  aborted: "#9ca3af"
+  running: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+  success: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
+  "action-error": DEVTOOL_COLOR_SEMANTIC_WARNING,
+  failed: DEVTOOL_COLOR_SEMANTIC_ERROR,
+  aborted: DEVTOOL_COLOR_SEMANTIC_METADATA
+};
+var STATUS_THING = {
+  running: "running_action" /* running_action */,
+  success: "success" /* success */,
+  "action-error": "action_error" /* action_error */,
+  failed: "failed" /* failed */,
+  aborted: "aborted" /* aborted */
 };
 var STATUS_SYMBOL = {
   running: "●",
   success: "✓",
+  "action-error": "!",
   failed: "✗",
   aborted: "○"
 };
+var STATUS_ICON = {
+  running: Loader2,
+  success: CircleCheck,
+  "action-error": CircleAlert,
+  failed: CircleX,
+  aborted: Circle
+};
 function safeStringify(value, indent = 2) {
   if (value === undefined)
     return "undefined";
@@ -2165,214 +2157,405 @@ function formatTimestamp(startTime) {
   });
 }
 
-// src/devtools/browser/components/RunningTimer.tsx
-import { jsxDEV as jsxDEV4, Fragment as Fragment2 } 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__ */ jsxDEV4(Fragment2, {
+// src/devtools/browser/components/DetailSection.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var COMPACT_CHAR_LIMIT = 120;
+var MONO = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
+var JSON_TOKEN_RE = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
+function renderColoredJson(text) {
+  const nodes = [];
+  let last = 0;
+  let i = 0;
+  JSON_TOKEN_RE.lastIndex = 0;
+  for (let m = JSON_TOKEN_RE.exec(text);m !== null; m = JSON_TOKEN_RE.exec(text)) {
+    if (m.index > last)
+      nodes.push(text.slice(last, m.index));
+    const [, str, colon, num, kw, punct] = m;
+    if (str != null) {
+      if (colon != null) {
+        nodes.push(/* @__PURE__ */ jsxDEV2("span", {
+          style: { color: DEVTOOL_JSON_KEY },
+          children: str
+        }, i++, false, undefined, this));
+        nodes.push(/* @__PURE__ */ jsxDEV2("span", {
+          style: { color: DEVTOOL_JSON_PUNCTUATION },
+          children: colon
+        }, i++, false, undefined, this));
+      } else {
+        nodes.push(/* @__PURE__ */ jsxDEV2("span", {
+          style: { color: DEVTOOL_JSON_STRING },
+          children: str
+        }, i++, false, undefined, this));
+      }
+    } else if (num != null) {
+      nodes.push(/* @__PURE__ */ jsxDEV2("span", {
+        style: { color: DEVTOOL_JSON_NUMBER },
+        children: num
+      }, i++, false, undefined, this));
+    } else if (kw != null) {
+      nodes.push(/* @__PURE__ */ jsxDEV2("span", {
+        style: { color: DEVTOOL_JSON_KEYWORD },
+        children: kw
+      }, i++, false, undefined, this));
+    } else if (punct != null) {
+      nodes.push(/* @__PURE__ */ jsxDEV2("span", {
+        style: { color: DEVTOOL_JSON_PUNCTUATION },
+        children: punct
+      }, i++, false, undefined, this));
+    }
+    last = JSON_TOKEN_RE.lastIndex;
+  }
+  if (last < text.length)
+    nodes.push(text.slice(last));
+  return nodes;
+}
+function tryParseJson(s) {
+  try {
+    return JSON.parse(s);
+  } catch {
+    return null;
+  }
+}
+function DetailSection({
+  label,
+  value,
+  color = DEVTOOL_COLOR_SEMANTIC_SYSTEM
+}) {
+  const parsedFromString = typeof value === "string" ? tryParseJson(value) : null;
+  const isPlainString = typeof value === "string" && parsedFromString === null;
+  const effectiveValue = parsedFromString !== null ? parsedFromString : value;
+  const [expanded, setExpanded] = useState(false);
+  const fullJson = isPlainString ? value : safeStringify(effectiveValue, 2);
+  const compactJson = isPlainString ? value : safeStringify(effectiveValue, 0);
+  const canExpand = fullJson !== compactJson || compactJson.length > COMPACT_CHAR_LIMIT;
+  const compactDisplay = compactJson.length > COMPACT_CHAR_LIMIT ? `${compactJson.slice(0, COMPACT_CHAR_LIMIT)}…` : compactJson;
+  const baseStyle = isPlainString ? { background: DEVTOOL_SECTION_STRING_BACKGROUND, color: DEVTOOL_COLOR_TEXT_MUTED } : { background: DEVTOOL_SECTION_BACKGROUND, color: DEVTOOL_COLOR_TEXT_SECONDARY };
+  return /* @__PURE__ */ jsxDEV2("div", {
     children: [
-      elapsed,
-      "ms"
+      /* @__PURE__ */ jsxDEV2("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "3px"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV2(SectionLabel, {
+            label,
+            color
+          }, undefined, false, undefined, this),
+          canExpand && /* @__PURE__ */ jsxDEV2("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "11px" },
+            children: expanded ? "▾" : "▸"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      expanded ? /* @__PURE__ */ jsxDEV2("div", {
+        onClick: canExpand ? () => setExpanded(false) : undefined,
+        style: {
+          margin: 0,
+          padding: "6px 8px",
+          borderRadius: "4px",
+          fontSize: "11px",
+          fontFamily: MONO,
+          overflowX: "auto",
+          textAlign: "left",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-all",
+          cursor: canExpand ? "pointer" : "default",
+          fontStyle: isPlainString ? "italic" : "normal",
+          ...baseStyle
+        },
+        children: isPlainString ? fullJson : renderColoredJson(fullJson)
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("div", {
+        onClick: canExpand ? () => setExpanded(true) : undefined,
+        style: {
+          padding: "5px 8px",
+          borderRadius: "4px",
+          fontSize: "11px",
+          fontFamily: MONO,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          cursor: canExpand ? "pointer" : "default",
+          fontStyle: isPlainString ? "italic" : "normal",
+          ...baseStyle
+        },
+        children: compactDisplay
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-function DurationDisplay({ entry }) {
-  const d = formatDuration(entry);
-  return /* @__PURE__ */ jsxDEV4(Fragment2, {
-    children: d ?? /* @__PURE__ */ jsxDEV4(RunningTimer, {
-      startTime: entry.startTime
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/devtools/browser/components/SectionLabel.tsx
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
-function SectionLabel({ label, color = "#60a5fa" }) {
-  return /* @__PURE__ */ jsxDEV5("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 jsxDEV6 } from "react/jsx-dev-runtime";
-function getCalledLabel(entry) {
-  const firstHop = entry.meta.routing[0];
-  if (firstHop == null)
-    return "↳ call";
-  if (firstHop.handlerType === "local")
-    return "↳ local";
-  const label = getExternalLabel(firstHop);
-  return label != null ? `↳ ${label}` : "↳ call";
-}
-function getCalledColor(entry) {
-  const firstHop = entry.meta.routing[0];
-  if (firstHop == null)
-    return "#a78bfa";
-  if (firstHop.handlerType === "local")
-    return DEVTOOL_COLOR_HANDLER_LOCAL_TEXT;
-  return DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT;
+// src/devtools/browser/components/NiceErrorDisplay.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+var MONO2 = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
+var SANS = "ui-sans-serif, system-ui, -apple-system, sans-serif";
+function isNiceErrorJson(value) {
+  if (typeof value !== "object" || value == null)
+    return false;
+  const v = value;
+  return v["name"] === "NiceError" && Array.isArray(v["ids"]) && typeof v["message"] === "string";
 }
-function CallStackLink({
-  entry,
-  entryRole,
-  isFocused,
-  onClick
-}) {
-  const color = STATUS_COLOR[entry.status];
-  const symbol = STATUS_SYMBOL[entry.status];
-  const labelColor = entryRole === "caller" ? "#94a3b8" : getCalledColor(entry);
-  const label = entryRole === "caller" ? "↑ from" : getCalledLabel(entry);
-  return /* @__PURE__ */ jsxDEV6("div", {
-    onClick,
+function NiceErrorBody({ error }) {
+  return /* @__PURE__ */ jsxDEV3("div", {
     style: {
-      background: isFocused ? "#1e2e45" : "#1e293b",
+      background: DEVTOOL_ERROR_BACKGROUND,
+      border: `1px solid ${DEVTOOL_COLOR_SEMANTIC_ERROR}`,
       borderRadius: "4px",
-      borderLeft: isFocused ? "2px solid #a78bfa" : "2px solid transparent",
-      padding: isFocused ? "5px 8px 5px 6px" : "5px 8px",
-      display: "grid",
-      gridTemplateColumns: "30% 1fr 30%",
-      alignItems: "center",
-      columnGap: "8px",
-      cursor: "pointer"
+      overflow: "hidden"
     },
     children: [
-      /* @__PURE__ */ jsxDEV6("span", {
+      /* @__PURE__ */ jsxDEV3("div", {
         style: {
-          color: labelColor,
-          fontSize: "9px",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis"
+          padding: "12px 14px",
+          color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+          fontSize: "14px",
+          fontWeight: "700",
+          lineHeight: "1.45",
+          wordBreak: "break-word",
+          fontFamily: SANS,
+          borderBottom: `1px solid ${DEVTOOL_ERROR_BADGE_BACKGROUND}`
         },
-        children: label
+        children: error.message
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV6("span", {
+      /* @__PURE__ */ jsxDEV3("div", {
         style: {
+          padding: "6px 14px 8px",
           display: "flex",
+          flexWrap: "wrap",
+          gap: "10px",
           alignItems: "center",
-          justifyContent: "center",
-          gap: "5px",
-          overflow: "hidden"
+          background: DEVTOOL_ERROR_BADGE_BACKGROUND
         },
         children: [
-          /* @__PURE__ */ jsxDEV6("span", {
-            style: { color, fontSize: "10px", flexShrink: 0 },
-            children: symbol
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6("span", {
+          error.ids.map((id) => /* @__PURE__ */ jsxDEV3("span", {
             style: {
-              color: "#cbd5e1",
+              color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+              fontFamily: MONO2,
               fontSize: "11px",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap"
+              fontWeight: "600"
             },
-            children: entry.actionId
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(DomainChip, {
-            domain: entry.domain,
-            allDomains: entry.allDomains,
-            size: "sm"
-          }, undefined, false, undefined, this)
+            children: id
+          }, id, false, undefined, this)),
+          /* @__PURE__ */ jsxDEV3("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", fontFamily: SANS },
+            children: [
+              "domain:",
+              " ",
+              /* @__PURE__ */ jsxDEV3("span", {
+                style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontFamily: MONO2 },
+                children: error.def.domain
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", fontFamily: SANS },
+            children: [
+              "http:",
+              " ",
+              /* @__PURE__ */ jsxDEV3("span", {
+                style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontFamily: MONO2 },
+                children: error.httpStatusCode
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV6("span", {
-        style: { color: "#475569", fontSize: "10px", textAlign: "right" },
-        children: /* @__PURE__ */ jsxDEV6(DurationDisplay, {
-          entry
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
+      }, undefined, true, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-function CallStackSection({
-  parent,
-  childEntries,
-  focusedChildCuid,
-  onFocusChild,
-  onSelectParent
+function NiceErrorDisplay({
+  error,
+  label,
+  color
 }) {
-  if (parent == null && childEntries.length === 0)
-    return null;
-  return /* @__PURE__ */ jsxDEV6("div", {
+  return /* @__PURE__ */ jsxDEV3("div", {
     children: [
-      /* @__PURE__ */ jsxDEV6(SectionLabel, {
-        label: "Call Stack",
-        color: "#a78bfa"
+      /* @__PURE__ */ jsxDEV3(SectionLabel, {
+        label,
+        color
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV6("div", {
-        style: { display: "flex", flexDirection: "column", gap: "2px" },
-        children: [
-          parent != null && /* @__PURE__ */ jsxDEV6(CallStackLink, {
-            entry: parent,
-            entryRole: "caller",
-            isFocused: false,
-            onClick: () => onSelectParent(parent.cuid)
-          }, undefined, false, undefined, this),
-          childEntries.map((child) => /* @__PURE__ */ jsxDEV6(CallStackLink, {
-            entry: child,
-            entryRole: "called",
-            isFocused: focusedChildCuid === child.cuid,
-            onClick: () => onFocusChild(child.cuid)
-          }, child.cuid, false, undefined, this))
-        ]
-      }, undefined, true, undefined, this)
+      /* @__PURE__ */ jsxDEV3(NiceErrorBody, {
+        error
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 
-// src/devtools/browser/components/ChildDispatchChips.tsx
-import { jsxDEV as jsxDEV7, Fragment as Fragment3 } from "react/jsx-dev-runtime";
-function ChildDispatchChips({
-  labels,
-  size = "sm"
-}) {
-  if (labels == null || labels.length === 0)
+// src/devtools/browser/components/StackTraceSection.tsx
+import { useEffect, useState as useState2 } from "react";
+
+// ../../node_modules/.bun/source-map-js@1.2.1/node_modules/source-map-js/source-map.js
+var $SourceMapGenerator = require_source_map_generator().SourceMapGenerator;
+var $SourceMapConsumer = require_source_map_consumer().SourceMapConsumer;
+var $SourceNode = require_source_node().SourceNode;
+
+// src/devtools/browser/components/sourceMapResolver.ts
+var consumerCache = new Map;
+async function loadConsumer(fileUrl) {
+  try {
+    if (!fileUrl.startsWith("http://") && !fileUrl.startsWith("https://"))
+      return null;
+    const resp = await fetch(fileUrl);
+    if (!resp.ok)
+      return null;
+    const text = await resp.text();
+    const match = text.match(/\/\/[#@] sourceMappingURL=(\S+)/);
+    if (match == null)
+      return null;
+    const mapRef = match[1];
+    let mapJson;
+    if (mapRef.startsWith("data:")) {
+      const commaIdx = mapRef.indexOf(",");
+      if (commaIdx === -1)
+        return null;
+      const header = mapRef.slice(5, commaIdx);
+      const payload = mapRef.slice(commaIdx + 1);
+      mapJson = header.includes("base64") ? atob(payload) : decodeURIComponent(payload);
+    } else {
+      const mapUrl = new URL(mapRef, fileUrl).href;
+      const mapResp = await fetch(mapUrl);
+      if (!mapResp.ok)
+        return null;
+      mapJson = await mapResp.text();
+    }
+    return new $SourceMapConsumer(JSON.parse(mapJson));
+  } catch {
     return null;
-  const fontSize = size === "md" ? "1em" : "0.8em";
-  const padding = size === "md" ? "1px 4px" : "1px 3px";
-  return /* @__PURE__ */ jsxDEV7(Fragment3, {
-    children: labels.map((label) => /* @__PURE__ */ jsxDEV7(Chip, {
-      color: DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT,
-      borderColor: DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER,
-      fontSize,
-      padding,
-      children: [
-        "↳ ",
-        label
-      ]
-    }, label, true, undefined, this))
-  }, undefined, false, undefined, this);
+  }
+}
+function getConsumer(fileUrl) {
+  const key = fileUrl.split("?")[0] ?? fileUrl;
+  if (!consumerCache.has(key)) {
+    consumerCache.set(key, loadConsumer(fileUrl));
+  }
+  return consumerCache.get(key);
+}
+async function resolveCompiledPosition(fileUrl, line, col) {
+  try {
+    const consumer = await getConsumer(fileUrl);
+    if (consumer == null)
+      return null;
+    const pos = consumer.originalPositionFor({ line, column: col });
+    if (pos.source == null || pos.line == null)
+      return null;
+    return { file: pos.source, line: pos.line, col: pos.column ?? 0 };
+  } catch {
+    return null;
+  }
 }
 
-// src/devtools/browser/components/DetailSection.tsx
-import { useState as useState2 } from "react";
-import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
-var COMPACT_CHAR_LIMIT = 120;
-function DetailSection({
+// src/devtools/browser/components/StackTraceSection.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+var INTERNAL_PATTERNS = [
+  "/nice-action/",
+  "@nice-code/action",
+  "/nice-error/",
+  "@nice-code/error",
+  "node_modules/",
+  "native code",
+  "<anonymous>"
+];
+function isInternalFrame(file) {
+  return INTERNAL_PATTERNS.some((p) => file.includes(p));
+}
+function parseStackFrames(stack) {
+  return stack.split(`
+`).slice(1).map((line) => {
+    const raw = line.trim();
+    if (raw === "")
+      return null;
+    const matchFn = raw.match(/^at (.+?) \((.+):(\d+):(\d+)\)$/);
+    if (matchFn != null) {
+      const file = matchFn[2];
+      return {
+        fn: matchFn[1],
+        file,
+        line: parseInt(matchFn[3], 10),
+        col: parseInt(matchFn[4], 10),
+        raw,
+        isInternal: isInternalFrame(file)
+      };
+    }
+    const matchUrl = raw.match(/^at (.+):(\d+):(\d+)$/);
+    if (matchUrl != null) {
+      const file = matchUrl[1];
+      return {
+        file,
+        line: parseInt(matchUrl[2], 10),
+        col: parseInt(matchUrl[3], 10),
+        raw,
+        isInternal: isInternalFrame(file)
+      };
+    }
+    return { raw, isInternal: true };
+  }).filter((f) => f != null);
+}
+async function resolveSourceMapPositions(frames) {
+  return Promise.all(frames.map(async (frame) => {
+    if (frame.isInternal || frame.file == null || frame.line == null)
+      return frame;
+    const resolved = await resolveCompiledPosition(frame.file, frame.line, frame.col ?? 0);
+    if (resolved == null)
+      return frame;
+    return { ...frame, file: resolved.file, line: resolved.line, col: resolved.col };
+  }));
+}
+function formatFrameFile(file) {
+  if (file == null)
+    return "?";
+  let path = file;
+  try {
+    const url = new URL(file);
+    path = url.pathname.split("?")[0] ?? url.pathname;
+    if (path.startsWith("/@fs/"))
+      path = path.slice(4);
+  } catch {}
+  const parts = path.replace(/\\/g, "/").split("/").filter(Boolean);
+  const filtered = parts[0]?.match(/^[a-zA-Z]:$/) != null ? parts.slice(1) : parts;
+  const tail = filtered.slice(-4);
+  return tail.join("/") || file;
+}
+function countUserFrames(stack) {
+  if (stack == null)
+    return 0;
+  return parseStackFrames(stack).filter((f) => !f.isInternal).length;
+}
+function StackTraceSection({
   label,
-  value,
-  color = "#60a5fa"
+  stack,
+  color = DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+  minFrameCount
 }) {
-  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__ */ jsxDEV8("div", {
+  const [showAll, setShowAll] = useState2(false);
+  const [resolvedFrames, setResolvedFrames] = useState2(null);
+  useEffect(() => {
+    if (stack == null)
+      return;
+    setResolvedFrames(null);
+    const parsed = parseStackFrames(stack);
+    let cancelled = false;
+    resolveSourceMapPositions(parsed).then((frames) => {
+      if (!cancelled)
+        setResolvedFrames(frames);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [stack]);
+  if (stack == null)
+    return null;
+  const allFrames = resolvedFrames ?? parseStackFrames(stack);
+  const userFrames = allFrames.filter((f) => !f.isInternal);
+  const hasInternalFrames = allFrames.length > userFrames.length;
+  const displayFrames = showAll ? allFrames : userFrames;
+  const phantomFrameCount = !showAll ? Math.max(0, (minFrameCount ?? 0) - displayFrames.length) : 0;
+  if (allFrames.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxDEV4("div", {
     children: [
-      /* @__PURE__ */ jsxDEV8("div", {
+      /* @__PURE__ */ jsxDEV4("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -2380,705 +2563,1053 @@ function DetailSection({
           marginBottom: "3px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV8("div", {
-            style: {
-              color,
-              fontSize: "10px",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em"
-            },
-            children: label
+          /* @__PURE__ */ jsxDEV4(SectionLabel, {
+            label,
+            color
           }, undefined, false, undefined, this),
-          canExpand && /* @__PURE__ */ jsxDEV8("span", {
-            style: { color: "#334155", fontSize: "11px" },
-            children: expanded ? "▾" : "▸"
+          hasInternalFrames && /* @__PURE__ */ jsxDEV4("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "9px" },
+            children: !showAll ? "user only" : `all (${allFrames.length})`
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      expanded ? /* @__PURE__ */ jsxDEV8("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__ */ jsxDEV8("div", {
-        onClick: canExpand ? () => setExpanded(true) : undefined,
+      /* @__PURE__ */ jsxDEV4("div", {
+        onClick: () => setShowAll((s) => !s),
         style: {
-          padding: "5px 8px",
-          background: "#1e293b",
+          background: DEVTOOL_STACK_TRACE_BACKGROUND,
           borderRadius: "4px",
-          fontSize: "11px",
-          color: "#94a3b8",
-          fontFamily: "inherit",
-          whiteSpace: "nowrap",
+          padding: "2px",
           overflow: "hidden",
-          textOverflow: "ellipsis",
-          cursor: canExpand ? "pointer" : "default"
-        },
-        children: compactDisplay
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// 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__ */ 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"
+          cursor: "pointer"
         },
         children: [
-          /* @__PURE__ */ jsxDEV9("div", {
-            style: {
-              color: "#60a5fa",
-              fontSize: "10px",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em"
-            },
-            children: "Meta"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV9("span", {
-            style: { color: "#334155", fontSize: "11px" },
-            children: expanded ? "▾" : "▸"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      expanded ? /* @__PURE__ */ jsxDEV9("div", {
-        onClick: () => setExpanded(false),
-        style: { background: "#1e293b", borderRadius: "4px", overflow: "hidden", cursor: "pointer" },
-        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV9("div", {
-          style: {
-            display: "grid",
-            gridTemplateColumns: "52px 1fr",
-            columnGap: "8px",
-            padding: "4px 8px",
-            borderBottom: i < expandedRows.length - 1 ? "1px solid #0f172a" : "none",
-            alignItems: "start"
-          },
-          children: [
-            /* @__PURE__ */ jsxDEV9("span", {
-              style: { textAlign: "left", color: "#475569", fontSize: "10px", paddingTop: "1px" },
-              children: label
-            }, undefined, false, undefined, this),
-            /* @__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__ */ jsxDEV9("div", {
-        onClick: () => setExpanded(true),
-        style: {
-          background: "#1e293b",
-          borderRadius: "4px",
-          padding: "5px 8px",
-          fontSize: "11px",
-          display: "flex",
-          gap: "10px",
-          rowGap: "2px",
-          flexWrap: "wrap",
-          cursor: "pointer"
-        },
-        children: [
-          /* @__PURE__ */ jsxDEV9(MetaChip, {
-            label: "cuid",
-            value: `…${cuid.slice(-8)}`
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV9(MetaChip, {
-            label: "origin",
-            value: meta.originClient.envId
-          }, undefined, false, undefined, this),
-          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__ */ jsxDEV9(MetaChip, {
-            label: "insId",
-            value: meta.originClient.insId.length > 10 ? `${meta.originClient.insId.slice(0, 10)}…` : meta.originClient.insId
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/devtools/browser/components/RoutingSection.tsx
-import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
-function RoutingSection({
-  entry,
-  minHopCount = 0
-}) {
-  const { meta, startTime } = entry;
-  const hopCount = meta.routing.length;
-  const phantomCount = Math.max(0, minHopCount - hopCount);
-  if (hopCount === 0 && phantomCount === 0)
-    return null;
-  return /* @__PURE__ */ jsxDEV10("div", {
-    children: [
-      /* @__PURE__ */ jsxDEV10(SectionLabel, {
-        label: hopCount > 0 ? `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}` : "Routing"
-      }, undefined, false, undefined, this),
-      /* @__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 && 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", {
+          displayFrames.length === 0 ? /* @__PURE__ */ jsxDEV4("div", {
+            style: { padding: "6px 10px", color: DEVTOOL_COLOR_TEXT_MUTED, 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__ */ jsxDEV4("div", {
+              title: titleStr,
               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"
+                display: "flex",
+                flexDirection: "row",
+                gap: "0.5em",
+                padding: "4px",
+                borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
               },
               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
+                /* @__PURE__ */ jsxDEV4("span", {
+                  style: {
+                    color: isUser ? DEVTOOL_STACK_FRAME_USER_NUMBER : DEVTOOL_STACK_FRAME_INTERNAL_NUMBER,
+                    fontSize: "10px",
+                    minWidth: "10px",
+                    textAlign: "left",
+                    flexShrink: 0,
+                    fontVariantNumeric: "tabular-nums"
+                  },
+                  children: idx + 1
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV10("span", {
+                /* @__PURE__ */ jsxDEV4("div", {
                   style: {
                     display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    paddingRight: "8px",
-                    overflow: "hidden"
+                    flexDirection: "column",
+                    gap: "0.15em",
+                    lineHeight: 1.2
                   },
                   children: [
-                    /* @__PURE__ */ jsxDEV10("span", {
-                      style: {
-                        color: "#475569",
-                        fontSize: "10px",
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis"
-                      },
-                      children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
+                    /* @__PURE__ */ jsxDEV4("div", {
+                      style: { display: "flex", alignItems: "center" },
+                      children: /* @__PURE__ */ jsxDEV4("span", {
+                        style: {
+                          color: isUser ? DEVTOOL_STACK_FRAME_USER_FUNCTION : DEVTOOL_STACK_FRAME_INTERNAL_FUNCTION,
+                          fontSize: "12px",
+                          fontWeight: 500,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: frame.fn ?? "(anonymous)"
+                      }, undefined, false, undefined, this)
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV10("span", {
-                      style: { color: "#334155", fontSize: "10px", flexShrink: 0, marginLeft: "auto" },
+                    /* @__PURE__ */ jsxDEV4("div", {
+                      style: { display: "flex", alignItems: "baseline", overflow: "hidden" },
                       children: [
-                        "+",
-                        hop.time - startTime,
-                        "ms"
+                        folderPrefix !== "" && /* @__PURE__ */ jsxDEV4("span", {
+                          style: {
+                            color: isUser ? DEVTOOL_STACK_FRAME_USER_FOLDER : DEVTOOL_STACK_FRAME_INTERNAL_FOLDER,
+                            fontSize: "10px",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            flexShrink: 1,
+                            minWidth: 0
+                          },
+                          children: folderPrefix
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV4("span", {
+                          style: {
+                            color: isUser ? DEVTOOL_STACK_FRAME_USER_FILE : DEVTOOL_STACK_FRAME_INTERNAL_FILE,
+                            fontSize: "10px",
+                            whiteSpace: "nowrap",
+                            flexShrink: 0
+                          },
+                          children: bareFilename
+                        }, undefined, false, undefined, this),
+                        frame.line != null && /* @__PURE__ */ jsxDEV4("span", {
+                          style: {
+                            color: isUser ? DEVTOOL_STACK_FRAME_USER_LINE : DEVTOOL_STACK_FRAME_INTERNAL_LINE,
+                            fontSize: "10px",
+                            whiteSpace: "nowrap",
+                            flexShrink: 0,
+                            fontVariantNumeric: "tabular-nums"
+                          },
+                          children: [
+                            ":",
+                            frame.line
+                          ]
+                        }, undefined, true, undefined, this)
                       ]
                     }, undefined, true, undefined, this)
                   ]
                 }, undefined, true, undefined, this)
               ]
-            }, `${hop.time}-${hop.runtime.envId}`, true, undefined, this);
+            }, frame.raw, true, undefined, this);
           }),
-          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxDEV10("div", {
+          Array.from({ length: phantomFrameCount }, (_, i) => i).map((i) => /* @__PURE__ */ jsxDEV4("div", {
             "aria-hidden": "true",
             style: {
               visibility: "hidden",
-              background: "#1e293b",
-              borderRadius: "4px",
-              display: "grid",
-              gridTemplateColumns: "30% 1fr 30%",
-              alignItems: "center",
-              columnGap: "8px",
-              padding: "4px 8px"
+              display: "flex",
+              flexDirection: "row",
+              gap: "0.5em",
+              padding: "4px",
+              borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
             },
             children: [
-              /* @__PURE__ */ jsxDEV10("span", {
-                style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
+              /* @__PURE__ */ jsxDEV4("span", {
+                style: { fontSize: "10px", minWidth: "10px", flexShrink: 0 },
+                children: "0"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                style: { display: "flex", flexDirection: "column", gap: "0.15em", lineHeight: 1.2 },
                 children: [
-                  /* @__PURE__ */ jsxDEV10("span", {
-                    style: { fontSize: "10px", width: "16px" },
-                    children: "0"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV10("span", {
-                    style: { fontSize: "11px" },
+                  /* @__PURE__ */ jsxDEV4("div", {
+                    style: { fontSize: "12px" },
                     children: "placeholder"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("div", {
+                    style: { fontSize: "10px" },
+                    children: "placeholder/file.ts:1"
                   }, undefined, false, undefined, this)
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV10("span", {
-                style: { fontSize: "10px" },
-                children: "placeholder"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV10("span", {}, undefined, false, undefined, this)
+              }, undefined, true, undefined, this)
             ]
-          }, key, true, undefined, this))
+          }, `phantom-${i}`, true, undefined, this))
         ]
       }, undefined, true, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 
-// src/devtools/browser/components/StackTraceSection.tsx
-import { useEffect as useEffect2, useState as useState4 } from "react";
+// src/devtools/browser/components/ActionErrorDisplay.tsx
+import { jsxDEV as jsxDEV5, Fragment } from "react/jsx-dev-runtime";
+function FullErrorContent({
+  label,
+  error,
+  errorStack,
+  color
+}) {
+  return /* @__PURE__ */ jsxDEV5(Fragment, {
+    children: [
+      isNiceErrorJson(error) ? /* @__PURE__ */ jsxDEV5(NiceErrorDisplay, {
+        error,
+        label,
+        color
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV5(DetailSection, {
+        label,
+        value: error,
+        color
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5(StackTraceSection, {
+        label: "Error Stack",
+        stack: errorStack,
+        color
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ActionErrorDisplay({ entry }) {
+  const { status, error, abortReason, errorStack } = entry;
+  if (status === "action-error") {
+    const color = DEVTOOL_COLOR_SEMANTIC_WARNING;
+    return /* @__PURE__ */ jsxDEV5(FullErrorContent, {
+      label: "Action Error",
+      error,
+      errorStack,
+      color
+    }, undefined, false, undefined, this);
+  }
+  if (status === "failed") {
+    const color = DEVTOOL_COLOR_SEMANTIC_ERROR;
+    return /* @__PURE__ */ jsxDEV5(FullErrorContent, {
+      label: "Error",
+      error,
+      errorStack,
+      color
+    }, undefined, false, undefined, this);
+  }
+  if (status === "aborted") {
+    const color = DEVTOOL_COLOR_SEMANTIC_METADATA;
+    return /* @__PURE__ */ jsxDEV5(Fragment, {
+      children: [
+        abortReason != null && (isNiceErrorJson(abortReason) ? /* @__PURE__ */ jsxDEV5(NiceErrorDisplay, {
+          error: abortReason,
+          label: "Abort Reason",
+          color
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV5(DetailSection, {
+          label: "Abort Reason",
+          value: abortReason,
+          color
+        }, undefined, false, undefined, this)),
+        /* @__PURE__ */ jsxDEV5(StackTraceSection, {
+          label: "Abort Stack",
+          stack: errorStack,
+          color
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return null;
+}
 
-// ../../node_modules/.bun/source-map-js@1.2.1/node_modules/source-map-js/source-map.js
-var $SourceMapGenerator = require_source_map_generator().SourceMapGenerator;
-var $SourceMapConsumer = require_source_map_consumer().SourceMapConsumer;
-var $SourceNode = require_source_node().SourceNode;
+// src/devtools/browser/components/Chip.tsx
+import { useState as useState3 } from "react";
 
-// src/devtools/browser/components/sourceMapResolver.ts
-var consumerCache = new Map;
-async function loadConsumer(fileUrl) {
-  try {
-    if (!fileUrl.startsWith("http://") && !fileUrl.startsWith("https://"))
-      return null;
-    const resp = await fetch(fileUrl);
-    if (!resp.ok)
-      return null;
-    const text = await resp.text();
-    const match = text.match(/\/\/[#@] sourceMappingURL=(\S+)/);
-    if (match == null)
-      return null;
-    const mapRef = match[1];
-    let mapJson;
-    if (mapRef.startsWith("data:")) {
-      const commaIdx = mapRef.indexOf(",");
-      if (commaIdx === -1)
-        return null;
-      const header = mapRef.slice(5, commaIdx);
-      const payload = mapRef.slice(commaIdx + 1);
-      mapJson = header.includes("base64") ? atob(payload) : decodeURIComponent(payload);
+// src/devtools/browser/components/Tooltip.tsx
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function Tooltip({
+  anchor,
+  config,
+  children
+}) {
+  const resolvedTitle = config?.title;
+  const resolvedAlign = config?.align;
+  const resolvedMaxWidth = config?.maxWidth ?? 400;
+  const resolvedContent = config != null ? config.content : children;
+  const showAbove = anchor.top >= window.innerHeight - anchor.bottom;
+  const gap = 6;
+  const screenMargin = 16;
+  const top = showAbove ? Math.round(anchor.top - gap) : Math.round(anchor.bottom + gap);
+  const maxHeight = showAbove ? Math.round(anchor.top - gap - screenMargin) : Math.round(window.innerHeight - anchor.bottom - gap - screenMargin);
+  let left;
+  let right;
+  let transform;
+  if (resolvedAlign === "center") {
+    const halfMax = resolvedMaxWidth != null ? resolvedMaxWidth / 2 : 120;
+    const center = Math.round(anchor.left + anchor.width / 2);
+    left = Math.max(halfMax + screenMargin, Math.min(center, window.innerWidth - halfMax - screenMargin));
+    transform = showAbove ? "translateX(-50%) translateY(-100%)" : "translateX(-50%)";
+  } else {
+    const anchorMidX = anchor.left + anchor.width / 2;
+    if (anchorMidX <= window.innerWidth / 2) {
+      left = Math.max(screenMargin, anchor.left);
     } else {
-      const mapUrl = new URL(mapRef, fileUrl).href;
-      const mapResp = await fetch(mapUrl);
-      if (!mapResp.ok)
-        return null;
-      mapJson = await mapResp.text();
+      right = Math.max(screenMargin, window.innerWidth - anchor.right);
     }
-    return new $SourceMapConsumer(JSON.parse(mapJson));
-  } catch {
-    return null;
-  }
-}
-function getConsumer(fileUrl) {
-  const key = fileUrl.split("?")[0] ?? fileUrl;
-  if (!consumerCache.has(key)) {
-    consumerCache.set(key, loadConsumer(fileUrl));
+    if (showAbove)
+      transform = "translateY(-100%)";
   }
-  return consumerCache.get(key);
+  return /* @__PURE__ */ jsxDEV6("div", {
+    style: {
+      position: "fixed",
+      left,
+      right,
+      top,
+      transform,
+      zIndex: 2147483647,
+      background: DEVTOOL_TOOLTIP_BACKGROUND,
+      border: `1px solid ${DEVTOOL_TOOLTIP_BORDER}`,
+      borderRadius: "5px",
+      boxShadow: "0 4px 20px rgba(0,0,0,0.6)",
+      pointerEvents: "none",
+      maxWidth: resolvedMaxWidth != null ? `${resolvedMaxWidth}px` : undefined,
+      maxHeight: `${maxHeight}px`,
+      overflowY: "auto"
+    },
+    children: [
+      resolvedTitle != null && /* @__PURE__ */ jsxDEV6("div", {
+        style: {
+          background: DEVTOOL_TOOLTIP_TITLE_BACKGROUND,
+          padding: "6px 8px",
+          alignSelf: "start",
+          textAlign: "left",
+          color: DEVTOOL_COLOR_TEXT_SECONDARY,
+          fontSize: "0.75rem",
+          fontWeight: 600,
+          paddingBottom: "4px",
+          marginBottom: "4px",
+          borderBottom: `1px solid ${DEVTOOL_TOOLTIP_TITLE_BOTTOM_BORDER}`
+        },
+        children: resolvedTitle
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        style: {
+          padding: "6px 8px"
+        },
+        children: resolvedContent
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
-async function resolveCompiledPosition(fileUrl, line, col) {
-  try {
-    const consumer = await getConsumer(fileUrl);
-    if (consumer == null)
-      return null;
-    const pos = consumer.originalPositionFor({ line, column: col });
-    if (pos.source == null || pos.line == null)
-      return null;
-    return { file: pos.source, line: pos.line, col: pos.column ?? 0 };
-  } catch {
-    return null;
-  }
+
+// src/devtools/browser/components/Chip.tsx
+import { jsxDEV as jsxDEV7, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+var CHIP_SIZE_STYLES = {
+  ["sm" /* sm */]: { fontSize: "0.8em", padding: "1px 3px" },
+  ["md" /* md */]: { fontSize: "0.9em", padding: "1px 4px" },
+  ["lg" /* lg */]: { fontSize: "1em", padding: "2px 6px" }
+};
+function Chip({
+  color,
+  subtle = false,
+  size = "md" /* md */,
+  rounded = false,
+  tooltip,
+  children,
+  style
+}) {
+  const [anchor, setAnchor] = useState3(null);
+  const hasTooltip = tooltip != null;
+  const { fontSize, padding } = CHIP_SIZE_STYLES[size];
+  const colorEntry = SEMANTIC_COLORS[color];
+  const resolvedColor = subtle ? colorEntry.subtle?.color ?? colorEntry.color : colorEntry.color;
+  const resolvedBorderColor = subtle ? colorEntry.subtle?.borderColor ?? "transparent" : colorEntry.borderColor;
+  return /* @__PURE__ */ jsxDEV7(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsxDEV7("span", {
+        onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
+        onMouseLeave: hasTooltip ? () => setAnchor(null) : undefined,
+        style: {
+          color: resolvedColor,
+          fontSize,
+          background: DEVTOOL_LIST_BASE_BACKGROUND,
+          border: `1px solid ${resolvedBorderColor}`,
+          padding,
+          borderRadius: rounded ? "0.6rem" : "3px",
+          flexShrink: 0,
+          whiteSpace: "nowrap",
+          cursor: hasTooltip ? "default" : undefined,
+          ...style
+        },
+        children
+      }, undefined, false, undefined, this),
+      anchor != null && hasTooltip && /* @__PURE__ */ jsxDEV7(Tooltip, {
+        anchor,
+        config: tooltip
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
 
-// src/devtools/browser/components/StackTraceSection.tsx
-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));
+// src/devtools/browser/components/DomainChip.tsx
+import { jsxDEV as jsxDEV8, Fragment as Fragment3 } from "react/jsx-dev-runtime";
+function DomainHierarchyContent({ allDomains }) {
+  return /* @__PURE__ */ jsxDEV8(Fragment3, {
+    children: allDomains.map((d, i) => {
+      const isCurrent = i === allDomains.length - 1;
+      return /* @__PURE__ */ jsxDEV8("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "0.3rem",
+          paddingLeft: `${i * 10}px`,
+          paddingTop: i > 0 ? "0.1rem" : undefined
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV8("span", {
+            style: {
+              fontSize: "0.8rem",
+              height: "0.6em",
+              width: "0.6em",
+              overflow: "hidden",
+              color: isCurrent ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "#3730a3",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: "⬢"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("span", {
+            style: {
+              color: isCurrent ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "#4b5563",
+              fontSize: "0.7rem",
+              fontWeight: isCurrent ? 500 : undefined
+            },
+            children: d
+          }, undefined, false, undefined, this)
+        ]
+      }, d, true, undefined, this);
+    })
+  }, undefined, false, undefined, this);
 }
-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,
-        line: parseInt(matchFn[3], 10),
-        col: parseInt(matchFn[4], 10),
-        raw,
-        isInternal: isInternalFrame(file)
-      };
-    }
-    const matchUrl = raw.match(/^at (.+):(\d+):(\d+)$/);
-    if (matchUrl != null) {
-      const file = matchUrl[1];
-      return {
-        file,
-        line: parseInt(matchUrl[2], 10),
-        col: parseInt(matchUrl[3], 10),
-        raw,
-        isInternal: isInternalFrame(file)
-      };
-    }
-    return { raw, isInternal: true };
-  }).filter((f) => f != null);
+function DomainChip({
+  subtle = false,
+  domain,
+  allDomains,
+  size
+}) {
+  return /* @__PURE__ */ jsxDEV8(Chip, {
+    color: "domain" /* domain */,
+    subtle,
+    size,
+    rounded: true,
+    tooltip: {
+      content: /* @__PURE__ */ jsxDEV8(DomainHierarchyContent, {
+        allDomains
+      }, undefined, false, undefined, this),
+      title: "Action Domain",
+      align: "edge"
+    },
+    style: { display: "flex", alignItems: "center", gap: "0.4em" },
+    children: [
+      /* @__PURE__ */ jsxDEV8("span", {
+        style: {
+          height: "0.6em",
+          width: "0.6em",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: "⬢"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV8("span", {
+        children: domain
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
-async function resolveSourceMapPositions(frames) {
-  return Promise.all(frames.map(async (frame) => {
-    if (frame.isInternal || frame.file == null || frame.line == null)
-      return frame;
-    const resolved = await resolveCompiledPosition(frame.file, frame.line, frame.col ?? 0);
-    if (resolved == null)
-      return frame;
-    return { ...frame, file: resolved.file, line: resolved.line, col: resolved.col };
-  }));
+
+// src/devtools/browser/components/HandlerChips.tsx
+import { jsxDEV as jsxDEV9, Fragment as Fragment4 } 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 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 HandlerChips({ entry, size }) {
+  const firstHop = entry.meta.routing[0];
+  const localEnvId = firstHop != null ? firstHop.runtime.envId : null;
+  const externalLabel = firstHop != null ? getExternalLabel(firstHop) : null;
+  const firstHopIsLocal = firstHop != null && firstHop.handlerType === "local";
+  return /* @__PURE__ */ jsxDEV9(Fragment4, {
+    children: [
+      localEnvId != null && (firstHopIsLocal || externalLabel == null) && /* @__PURE__ */ jsxDEV9(Chip, {
+        color: "handler_local" /* handler_local */,
+        size,
+        children: localEnvId
+      }, undefined, false, undefined, this),
+      externalLabel != null && /* @__PURE__ */ jsxDEV9(Chip, {
+        color: "handler_external" /* handler_external */,
+        size,
+        children: externalLabel
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
-function StackTraceSection({
-  label,
-  stack,
-  color = "#60a5fa"
-}) {
-  const [showAll, setShowAll] = useState4(false);
-  const [resolvedFrames, setResolvedFrames] = useState4(null);
+
+// src/devtools/browser/components/RunningTimer.tsx
+import { useEffect as useEffect2, useState as useState4 } from "react";
+import { jsxDEV as jsxDEV10, Fragment as Fragment5 } from "react/jsx-dev-runtime";
+function RunningTimer({ startTime }) {
+  const [elapsed, setElapsed] = useState4(() => Date.now() - startTime);
   useEffect2(() => {
-    if (stack == null)
-      return;
-    setResolvedFrames(null);
-    const parsed = parseStackFrames(stack);
-    let cancelled = false;
-    resolveSourceMapPositions(parsed).then((frames) => {
-      if (!cancelled)
-        setResolvedFrames(frames);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [stack]);
-  if (stack == null)
-    return null;
-  const allFrames = resolvedFrames ?? parseStackFrames(stack);
-  const userFrames = allFrames.filter((f) => !f.isInternal);
-  const hasInternalFrames = allFrames.length > userFrames.length;
-  const displayFrames = showAll ? allFrames : userFrames;
-  if (allFrames.length === 0)
+    const interval = setInterval(() => setElapsed(Date.now() - startTime), 100);
+    return () => clearInterval(interval);
+  }, [startTime]);
+  return /* @__PURE__ */ jsxDEV10(Fragment5, {
+    children: [
+      elapsed,
+      "ms"
+    ]
+  }, undefined, true, undefined, this);
+}
+function DurationDisplay({ entry }) {
+  const d = formatDuration(entry);
+  return /* @__PURE__ */ jsxDEV10(Fragment5, {
+    children: d ?? /* @__PURE__ */ jsxDEV10(RunningTimer, {
+      startTime: entry.startTime
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/components/CallStackSection.tsx
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+function getCalledLabel(entry) {
+  const firstHop = entry.meta.routing[0];
+  if (firstHop == null)
+    return "↳ call";
+  if (firstHop.handlerType === "local")
+    return "↳ local";
+  const label = getExternalLabel(firstHop);
+  return label != null ? `↳ ${label}` : "↳ call";
+}
+function getCalledColor(entry) {
+  const firstHop = entry.meta.routing[0];
+  if (firstHop == null)
+    return DEVTOOL_COLOR_SEMANTIC_SYSTEM;
+  if (firstHop.handlerType === "local")
+    return DEVTOOL_COLOR_HANDLER_LOCAL_TEXT;
+  return DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT;
+}
+function CallStackLink({
+  entry,
+  entryRole,
+  isFocused,
+  onClick
+}) {
+  const color = STATUS_COLOR[entry.status];
+  const symbol = STATUS_SYMBOL[entry.status];
+  const labelColor = entryRole === "caller" ? DEVTOOL_COLOR_TEXT_SECONDARY : getCalledColor(entry);
+  const label = entryRole === "caller" ? "↑ from" : getCalledLabel(entry);
+  return /* @__PURE__ */ jsxDEV11("div", {
+    onClick,
+    style: {
+      background: isFocused ? DEVTOOL_SECTION_BACKGROUND : DEVTOOL_DETAIL_HEADER_BACKGROUND,
+      borderBottom: `1px solid ${DEVTOOL_COLOR_CALL_STACK_DIVIDER}`,
+      borderLeft: isFocused ? `2px solid ${DEVTOOL_COLOR_SEMANTIC_SYSTEM}` : "2px solid transparent",
+      padding: "5px 12px 5px 10px",
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      alignItems: "center",
+      columnGap: "6px",
+      cursor: "pointer"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV11("span", {
+        style: { display: "flex", alignItems: "center", gap: "1em", flexShrink: 0 },
+        children: [
+          /* @__PURE__ */ jsxDEV11("span", {
+            style: { color, fontSize: "10px", flexShrink: 0 },
+            children: symbol
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("span", {
+            style: { color: labelColor, fontSize: "9px", flexShrink: 0 },
+            children: label
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("span", {
+            style: { display: "flex", alignItems: "center", gap: "5px" },
+            children: [
+              /* @__PURE__ */ jsxDEV11("span", {
+                style: {
+                  color: DEVTOOL_COLOR_TEXT_SECONDARY,
+                  fontSize: "11px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: entry.actionId
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11(DomainChip, {
+                domain: entry.domain,
+                allDomains: entry.allDomains,
+                size: "sm" /* sm */
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("span", {
+        style: {
+          color: DEVTOOL_COLOR_TEXT_FAINT,
+          fontSize: "10px",
+          textAlign: "right",
+          whiteSpace: "nowrap"
+        },
+        children: /* @__PURE__ */ jsxDEV11(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__ */ jsxDEV11("div", {
     children: [
-      /* @__PURE__ */ jsxDEV11("div", {
+      parent != null && /* @__PURE__ */ jsxDEV11(CallStackLink, {
+        entry: parent,
+        entryRole: "caller",
+        isFocused: false,
+        onClick: () => onSelectParent(parent.cuid)
+      }, undefined, false, undefined, this),
+      childEntries.map((child) => /* @__PURE__ */ jsxDEV11(CallStackLink, {
+        entry: child,
+        entryRole: "called",
+        isFocused: focusedChildCuid === child.cuid,
+        onClick: () => onFocusChild(child.cuid)
+      }, child.cuid, false, undefined, this))
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/ChildDispatchChips.tsx
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+function ChildDispatchChips({
+  childRouteItems,
+  size = "sm" /* sm */
+}) {
+  if (childRouteItems == null || childRouteItems.length === 0)
+    return null;
+  const groups = new Map;
+  for (const item of childRouteItems) {
+    const runtimeId = item.handlerClient?.envId ?? item.transport ?? "ext";
+    const hasClient = item.handlerClient != null;
+    if (!groups.has(runtimeId)) {
+      groups.set(runtimeId, { runtimeId, transports: [], hasClient });
+    }
+    const transport = item.transport;
+    const group = groups.get(runtimeId);
+    if (transport != null && !group.transports.includes(transport)) {
+      group.transports.push(transport);
+    }
+  }
+  return /* @__PURE__ */ jsxDEV12("div", {
+    style: { display: "flex", alignItems: "center", gap: "4px", flexWrap: "wrap" },
+    children: Array.from(groups.values()).map((group) => {
+      const transportStr = group.transports.length > 0 ? group.transports.join(", ") : "ext";
+      const label = group.hasClient ? `${transportStr} → ${group.runtimeId}` : `→ ${transportStr}`;
+      return /* @__PURE__ */ jsxDEV12(Chip, {
+        color: "handler_external" /* handler_external */,
+        size,
+        children: label
+      }, group.runtimeId, false, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/components/MetaSection.tsx
+import { useState as useState5 } from "react";
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+function MetaChip({ label, value }) {
+  return /* @__PURE__ */ jsxDEV13("span", {
+    style: { whiteSpace: "nowrap" },
+    children: [
+      /* @__PURE__ */ jsxDEV13("span", {
+        style: { color: DEVTOOL_COLOR_TEXT_MUTED },
+        children: [
+          label,
+          " "
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV13("span", {
+        style: { color: DEVTOOL_COLOR_TEXT_SECONDARY },
+        children: value
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function MetaSection({ entry }) {
+  const [expanded, setExpanded] = useState5(false);
+  const { meta, cuid } = entry;
+  const expandedRows = [
+    { label: "cuid", value: cuid },
+    { label: "runtime", value: meta.originClient.envId },
+    ...meta.originClient.perId != null ? [{ label: "perId", value: meta.originClient.perId }] : [],
+    ...meta.originClient.insId != null ? [{ label: "insId", value: meta.originClient.insId }] : []
+  ];
+  return /* @__PURE__ */ jsxDEV13("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV13("div", {
         style: {
           display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          marginBottom: "3px"
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "3px"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV13("div", {
+            style: {
+              color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+              fontSize: "10px",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            },
+            children: "Meta"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "11px" },
+            children: expanded ? "▾" : "▸"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      expanded ? /* @__PURE__ */ jsxDEV13("div", {
+        onClick: () => setExpanded(false),
+        style: {
+          background: DEVTOOL_SECTION_BACKGROUND,
+          borderRadius: "4px",
+          overflow: "hidden",
+          cursor: "pointer"
+        },
+        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV13("div", {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "52px 1fr",
+            columnGap: "8px",
+            padding: "4px 8px",
+            borderBottom: i < expandedRows.length - 1 ? `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}` : "none",
+            alignItems: "start"
+          },
+          children: [
+            /* @__PURE__ */ jsxDEV13("span", {
+              style: { textAlign: "left", color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", paddingTop: "1px" },
+              children: label
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV13("span", {
+              style: {
+                textAlign: "left",
+                color: DEVTOOL_COLOR_TEXT_SECONDARY,
+                fontSize: "11px",
+                wordBreak: "break-all"
+              },
+              children: value
+            }, undefined, false, undefined, this)
+          ]
+        }, label, true, undefined, this))
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV13("div", {
+        onClick: () => setExpanded(true),
+        style: {
+          background: DEVTOOL_SECTION_BACKGROUND,
+          borderRadius: "4px",
+          padding: "5px 8px",
+          fontSize: "11px",
+          display: "flex",
+          gap: "10px",
+          rowGap: "2px",
+          flexWrap: "wrap",
+          cursor: "pointer"
         },
         children: [
-          /* @__PURE__ */ jsxDEV11(SectionLabel, {
-            label,
-            color
+          /* @__PURE__ */ jsxDEV13(MetaChip, {
+            label: "cuid",
+            value: `…${cuid.slice(-8)}`
           }, undefined, false, undefined, this),
-          hasInternalFrames && /* @__PURE__ */ jsxDEV11("span", {
-            style: { color: "#475569", fontSize: "9px" },
-            children: !showAll ? "user only" : `all (${allFrames.length})`
+          /* @__PURE__ */ jsxDEV13(MetaChip, {
+            label: "runtime",
+            value: meta.originClient.envId
+          }, undefined, false, undefined, this),
+          meta.originClient.perId != null && /* @__PURE__ */ jsxDEV13(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__ */ jsxDEV13(MetaChip, {
+            label: "insId",
+            value: meta.originClient.insId.length > 10 ? `${meta.originClient.insId.slice(0, 10)}…` : meta.originClient.insId
           }, 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: {
-                  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__ */ jsxDEV11("div", {
-                    style: { display: "flex", alignItems: "center" },
-                    children: /* @__PURE__ */ jsxDEV11("span", {
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/RoutingSection.tsx
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+function RoutingSection({
+  entry,
+  minHopCount = 0
+}) {
+  const { meta, startTime } = entry;
+  const hopCount = meta.routing.length;
+  const phantomCount = Math.max(0, minHopCount - hopCount);
+  if (hopCount === 0 && phantomCount === 0)
+    return null;
+  return /* @__PURE__ */ jsxDEV14("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV14(SectionLabel, {
+        label: hopCount > 0 ? `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}` : "Routing"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV14("div", {
+        style: { display: "flex", flexDirection: "column", gap: "2px" },
+        children: [
+          meta.routing.map((hop, i) => {
+            const isLocal = hop.handlerType === "local";
+            const isLast = i === hopCount - 1 && phantomCount === 0;
+            const badgeColor = isLocal ? DEVTOOL_COLOR_SEMANTIC_SUCCESS : DEVTOOL_COLOR_SEMANTIC_WARNING;
+            const badgeText = isLocal ? "● exec" : `→ ${hop.transport ?? "ext"}`;
+            const runtimeTitle = [hop.runtime.perId, hop.runtime.insId].filter(Boolean).join(" · ") || undefined;
+            return /* @__PURE__ */ jsxDEV14("div", {
+              style: {
+                background: DEVTOOL_SECTION_BACKGROUND,
+                borderRadius: "4px",
+                overflow: "hidden",
+                display: "grid",
+                gridTemplateColumns: "30% 1fr 30%",
+                alignItems: "center",
+                columnGap: "8px",
+                borderBottom: isLast ? undefined : `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+                padding: "4px 8px"
+              },
+              children: [
+                /* @__PURE__ */ jsxDEV14("span", {
+                  style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
+                  children: [
+                    /* @__PURE__ */ jsxDEV14("span", {
+                      style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", width: "16px", textAlign: "right" },
+                      children: i + 1
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV14("span", {
+                      title: runtimeTitle,
                       style: {
-                        color: isUser ? "#e2e8f0" : "#50698b",
-                        fontSize: "12px",
-                        fontWeight: 500,
+                        color: DEVTOOL_COLOR_TEXT_SECONDARY,
+                        fontSize: "11px",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
-                        whiteSpace: "nowrap"
+                        whiteSpace: "nowrap",
+                        textAlign: "center"
                       },
-                      children: frame.fn ?? "(anonymous)"
+                      children: hop.runtime.envId
                     }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV14("span", {
+                  style: { color: badgeColor, fontSize: "10px", whiteSpace: "nowrap" },
+                  children: badgeText
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV14("span", {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    paddingRight: "8px",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxDEV14("span", {
+                      style: {
+                        color: DEVTOOL_COLOR_TEXT_MUTED,
+                        fontSize: "10px",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis"
+                      },
+                      children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV14("span", {
+                      style: { color: DEVTOOL_COLOR_TEXT_FAINT, 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__ */ jsxDEV14("div", {
+            "aria-hidden": "true",
+            style: {
+              visibility: "hidden",
+              background: DEVTOOL_SECTION_BACKGROUND,
+              borderRadius: "4px",
+              display: "grid",
+              gridTemplateColumns: "30% 1fr 30%",
+              alignItems: "center",
+              columnGap: "8px",
+              padding: "4px 8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV14("span", {
+                style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
+                children: [
+                  /* @__PURE__ */ jsxDEV14("span", {
+                    style: { fontSize: "10px", width: "16px" },
+                    children: "0"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV11("div", {
-                    style: { display: "flex", alignItems: "baseline", overflow: "hidden" },
-                    children: [
-                      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),
-                      frame.line != null && /* @__PURE__ */ jsxDEV11("span", {
-                        style: {
-                          color: isUser ? "#4a7fa8" : "#2d4a63",
-                          fontSize: "10px",
-                          whiteSpace: "nowrap",
-                          flexShrink: 0,
-                          fontVariantNumeric: "tabular-nums"
-                        },
-                        children: [
-                          ":",
-                          frame.line
-                        ]
-                      }, undefined, true, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
+                  /* @__PURE__ */ jsxDEV14("span", {
+                    style: { fontSize: "11px" },
+                    children: "placeholder"
+                  }, undefined, false, undefined, this)
                 ]
-              }, undefined, true, undefined, this)
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV14("span", {
+                style: { fontSize: "10px" },
+                children: "placeholder"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV14("span", {}, undefined, false, undefined, this)
             ]
-          }, frame.raw, true, undefined, this);
-        })
-      }, undefined, false, undefined, this)
+          }, key, true, undefined, this))
+        ]
+      }, undefined, true, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 
-// src/devtools/browser/components/ActionDetailPanel.tsx
-import { jsxDEV as jsxDEV12, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+// src/devtools/browser/components/action_detail/ActionDetailPanel.tsx
+import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
+var STATUS_BADGE_LABEL = {
+  running: "RUNNING",
+  success: "SUCCESS",
+  "action-error": "ERROR",
+  failed: "FAILED",
+  aborted: "ABORTED"
+};
+var STATUS_BADGE_BG = {
+  running: STATUS_COLOR.running,
+  success: STATUS_COLOR.success,
+  "action-error": DEVTOOL_COLOR_SEMANTIC_ERROR,
+  failed: DEVTOOL_COLOR_SEMANTIC_ERROR,
+  aborted: DEVTOOL_COLOR_SEMANTIC_METADATA
+};
+var STATUS_BADGE_TEXT_COLOR = {
+  running: "#0f172a",
+  success: "#0f172a",
+  "action-error": "#ffffff",
+  failed: "#ffffff",
+  aborted: "#0f172a"
+};
 function DetailHeader({
   entry,
   isActive,
   onClick,
-  childExternalLabels
+  childExternalRouteItems
 }) {
   const color = STATUS_COLOR[entry.status];
-  const symbol = STATUS_SYMBOL[entry.status];
+  const StatusIconComponent = STATUS_ICON[entry.status];
   const timestamp = formatTimestamp(entry.startTime);
-  return /* @__PURE__ */ jsxDEV12("div", {
+  return /* @__PURE__ */ jsxDEV15("div", {
     onClick: !isActive ? onClick : undefined,
     style: {
-      padding: "10px 12px",
-      background: isActive ? "#1e293b" : "#131f35",
-      borderBottom: "1px solid #0f172a",
-      borderLeft: isActive ? "2px solid #60a5fa" : "2px solid transparent",
+      padding: "0.5em 1em",
+      background: isActive ? DEVTOOL_SECTION_BACKGROUND : DEVTOOL_DETAIL_HEADER_BACKGROUND,
+      borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+      borderLeft: isActive ? `2px solid ${color}` : "2px solid transparent",
       flexShrink: 0,
+      flexDirection: "row",
       display: "flex",
       alignItems: "flex-start",
-      gap: "10px",
+      gap: "1em",
       cursor: isActive ? "default" : "pointer"
     },
-    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: "0.5em" },
-        children: [
-          /* @__PURE__ */ jsxDEV12("div", {
-            style: { display: "flex", alignItems: "center", minWidth: 0, gap: "0.4em" },
-            children: [
-              /* @__PURE__ */ jsxDEV12("span", {
-                style: { fontSize: "1.2em" },
-                children: "⚡"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV12("span", {
-                style: {
-                  color: "#f1f5f9",
-                  fontSize: "1.2em",
-                  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"
+    children: /* @__PURE__ */ jsxDEV15("div", {
+      style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "0.5em" },
+      children: [
+        /* @__PURE__ */ jsxDEV15("div", {
+          style: { display: "flex", alignItems: "center", minWidth: 0, gap: "0.5em" },
+          children: [
+            /* @__PURE__ */ jsxDEV15("span", {
+              style: {
+                color,
+                flexShrink: 0,
+                display: "flex",
+                alignItems: "center",
+                animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
+              },
+              children: /* @__PURE__ */ jsxDEV15(StatusIconComponent, {
+                size: 20,
+                strokeWidth: 1.75
               }, 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"
-                  }, 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),
+            /* @__PURE__ */ jsxDEV15("span", {
+              style: {
+                color: DEVTOOL_COLOR_TEXT_EMPHASIS,
+                fontSize: "1.2em",
+                fontWeight: "600",
+                fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                flexShrink: 1,
+                minWidth: "2.5em"
+              },
+              children: entry.actionId
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV15("span", {
+              style: {
+                flexShrink: 0,
+                padding: "2px 9px",
+                borderRadius: "999px",
+                background: STATUS_BADGE_BG[entry.status],
+                color: STATUS_BADGE_TEXT_COLOR[entry.status],
+                fontSize: "9px",
+                fontWeight: "700",
+                letterSpacing: "0.1em",
+                textTransform: "uppercase",
+                fontFamily: "ui-sans-serif, system-ui, sans-serif"
+              },
+              children: STATUS_BADGE_LABEL[entry.status]
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV15(DomainChip, {
+              domain: entry.domain,
+              allDomains: entry.allDomains,
+              size: "md" /* md */
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV15("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "8px"
+          },
+          children: [
+            /* @__PURE__ */ jsxDEV15("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                minWidth: 0,
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsxDEV15(HandlerChips, {
+                  entry,
+                  size: "md" /* md */
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV15(ChildDispatchChips, {
+                  childRouteItems: childExternalRouteItems,
+                  size: "md" /* md */
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV15("div", {
+              style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 },
+              children: [
+                /* @__PURE__ */ jsxDEV15("span", {
+                  style: {
+                    color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+                    fontSize: "10px",
+                    letterSpacing: "0.02em",
+                    fontFamily: "ui-sans-serif, system-ui, sans-serif"
+                  },
+                  children: timestamp
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV15("span", {
+                  style: { color, fontSize: "12px", fontWeight: "500" },
+                  children: /* @__PURE__ */ jsxDEV15(DurationDisplay, {
+                    entry
                   }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
 function ActionDetailPanel({
   entry,
@@ -3086,44 +3617,52 @@ function ActionDetailPanel({
   childEntries,
   onSelectEntry
 }) {
-  const [focusedChildCuid, setFocusedChildCuid] = useState5(null);
+  const [focusedChildCuid, setFocusedChildCuid] = useState6(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 maxCallSiteFrames = Math.max(countUserFrames(entry.callSite), ...childEntries.map((e) => countUserFrames(e.callSite)), 0);
+  const childExternalRouteItems = useMemo(() => {
     const seen = new Set;
     const result = [];
     for (const child of childEntries) {
       const firstHop = child.meta.routing[0];
-      if (firstHop == null)
+      if (firstHop == null || firstHop.handlerType !== "external")
         continue;
-      const label = getExternalLabel(firstHop);
-      if (label == null || seen.has(label))
+      const key = `${firstHop.handlerClient?.envId ?? ""}:${firstHop.transport ?? ""}`;
+      if (seen.has(key))
         continue;
-      seen.add(label);
-      result.push(label);
+      seen.add(key);
+      result.push(firstHop);
     }
     return result;
   }, [childEntries]);
   const handleFocusChild = (cuid) => {
     setFocusedChildCuid((prev) => prev === cuid ? null : cuid);
   };
-  return /* @__PURE__ */ jsxDEV12("div", {
+  return /* @__PURE__ */ jsxDEV15("div", {
     style: {
       flex: 1,
       display: "flex",
       flexDirection: "column",
       overflow: "hidden",
       minHeight: 0,
-      background: "#0f172a"
+      background: DEVTOOL_DETAIL_BASE_BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsxDEV12(DetailHeader, {
+      /* @__PURE__ */ jsxDEV15(DetailHeader, {
         entry,
         isActive: focusedChildCuid === null,
         onClick: () => setFocusedChildCuid(null),
-        childExternalLabels
+        childExternalRouteItems
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12("div", {
+      /* @__PURE__ */ jsxDEV15(CallStackSection, {
+        parent,
+        childEntries,
+        focusedChildCuid,
+        onFocusChild: handleFocusChild,
+        onSelectParent: onSelectEntry
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV15("div", {
         style: {
           flex: 1,
           overflowY: "auto",
@@ -3134,211 +3673,376 @@ function ActionDetailPanel({
           gap: "8px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV12(CallStackSection, {
-            parent,
-            childEntries,
-            focusedChildCuid,
-            onFocusChild: handleFocusChild,
-            onSelectParent: onSelectEntry
+          focusedEntry.input !== undefined ? /* @__PURE__ */ jsxDEV15(DetailSection, {
+            label: "Input",
+            value: focusedEntry.input
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15(DetailSection, {
+            label: "Input",
+            value: "No input required or given"
+          }, undefined, false, undefined, this),
+          focusedEntry.status === "success" && /* @__PURE__ */ jsxDEV15(DetailSection, {
+            label: "Output",
+            value: focusedEntry.output,
+            color: DEVTOOL_COLOR_SEMANTIC_SUCCESS
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12(MetaSection, {
+          (focusedEntry.status === "action-error" || focusedEntry.status === "failed" || focusedEntry.status === "aborted") && /* @__PURE__ */ jsxDEV15(ActionErrorDisplay, {
             entry: focusedEntry
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12(RoutingSection, {
-            entry: focusedEntry,
-            minHopCount: maxRoutingHops
+          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV15(DetailSection, {
+            label: `Progress (${focusedEntry.progressUpdates.length})`,
+            value: focusedEntry.progressUpdates
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12(StackTraceSection, {
+          /* @__PURE__ */ jsxDEV15(StackTraceSection, {
             label: "Dispatch Site",
             stack: focusedEntry.callSite,
-            color: "#94a3b8"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12(DetailSection, {
-            label: "Input",
-            value: focusedEntry.input
+            color: DEVTOOL_COLOR_TEXT_SECONDARY,
+            minFrameCount: maxCallSiteFrames
           }, undefined, false, undefined, this),
-          focusedEntry.status === "success" && /* @__PURE__ */ jsxDEV12(DetailSection, {
-            label: "Output",
-            value: focusedEntry.output,
-            color: "#4ade80"
+          /* @__PURE__ */ jsxDEV15(RoutingSection, {
+            entry: focusedEntry,
+            minHopCount: maxRoutingHops
           }, 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, {
+          /* @__PURE__ */ jsxDEV15(MetaSection, {
+            entry: focusedEntry
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/action_list/ActionEntryRow.tsx
+import { Box, CircleX as CircleX2, Variable } from "lucide-react";
+import { useState as useState8 } from "react";
+
+// src/devtools/browser/components/Icon.tsx
+import { useState as useState7 } from "react";
+import { jsxDEV as jsxDEV16, Fragment as Fragment6 } from "react/jsx-dev-runtime";
+var ICON_SIZE_PX = {
+  ["sm" /* sm */]: 13,
+  ["md" /* md */]: 16,
+  ["lg" /* lg */]: 18
+};
+function Icon({
+  icon: IconComponent,
+  color,
+  size = "md" /* md */,
+  subtle = false,
+  tooltip,
+  style
+}) {
+  const [anchor, setAnchor] = useState7(null);
+  const hasTooltip = tooltip != null;
+  const colorEntry = SEMANTIC_COLORS[color];
+  const resolvedColor = subtle ? colorEntry.subtle?.color ?? colorEntry.color : colorEntry.color;
+  return /* @__PURE__ */ jsxDEV16(Fragment6, {
+    children: [
+      /* @__PURE__ */ jsxDEV16("div", {
+        onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
+        onMouseLeave: hasTooltip ? () => setAnchor(null) : undefined,
+        style: {
+          borderRadius: "0.4em",
+          height: `${1.65 * getSizeValue(size)}em`,
+          width: `${1.65 * getSizeValue(size)}em`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "rgba(0,0,0,0.4)",
+          color: resolvedColor,
+          flexShrink: 0,
+          cursor: hasTooltip ? "default" : undefined,
+          ...style
+        },
+        children: /* @__PURE__ */ jsxDEV16(IconComponent, {
+          size: ICON_SIZE_PX[size],
+          strokeWidth: 1.5
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      anchor != null && hasTooltip && /* @__PURE__ */ jsxDEV16(Tooltip, {
+        anchor,
+        config: tooltip
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/action_list/ActionEntryRow.tsx
+import { jsxDEV as jsxDEV17, Fragment as Fragment7 } from "react/jsx-dev-runtime";
+function getLatestChipColor(status) {
+  if (status === "failed")
+    return "failed" /* failed */;
+  if (status === "action-error")
+    return "action_error" /* action_error */;
+  if (status === "aborted")
+    return "aborted" /* aborted */;
+  return "running_action" /* running_action */;
+}
+var JSON_TOKEN_RE2 = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
+function renderColoredJson2(text) {
+  const nodes = [];
+  let last = 0;
+  let i = 0;
+  JSON_TOKEN_RE2.lastIndex = 0;
+  for (let m = JSON_TOKEN_RE2.exec(text);m !== null; m = JSON_TOKEN_RE2.exec(text)) {
+    if (m.index > last)
+      nodes.push(text.slice(last, m.index));
+    const [, str, colon, num, kw, punct] = m;
+    if (str != null) {
+      if (colon != null) {
+        nodes.push(/* @__PURE__ */ jsxDEV17("span", {
+          style: { color: DEVTOOL_JSON_KEY },
+          children: str
+        }, i++, false, undefined, this));
+        nodes.push(/* @__PURE__ */ jsxDEV17("span", {
+          style: { color: DEVTOOL_JSON_PUNCTUATION },
+          children: colon
+        }, i++, false, undefined, this));
+      } else {
+        nodes.push(/* @__PURE__ */ jsxDEV17("span", {
+          style: { color: DEVTOOL_JSON_STRING },
+          children: str
+        }, i++, false, undefined, this));
+      }
+    } else if (num != null) {
+      nodes.push(/* @__PURE__ */ jsxDEV17("span", {
+        style: { color: DEVTOOL_JSON_NUMBER },
+        children: num
+      }, i++, false, undefined, this));
+    } else if (kw != null) {
+      nodes.push(/* @__PURE__ */ jsxDEV17("span", {
+        style: { color: DEVTOOL_JSON_KEYWORD },
+        children: kw
+      }, i++, false, undefined, this));
+    } else if (punct != null) {
+      nodes.push(/* @__PURE__ */ jsxDEV17("span", {
+        style: { color: DEVTOOL_JSON_PUNCTUATION },
+        children: punct
+      }, i++, false, undefined, this));
+    }
+    last = JSON_TOKEN_RE2.lastIndex;
+  }
+  if (last < text.length)
+    nodes.push(text.slice(last));
+  return nodes;
+}
+function stripOuterBraces(json) {
+  const lines = json.split(`
+`);
+  if (lines.length > 2 && lines[0] === "{" && lines[lines.length - 1] === "}") {
+    return lines.slice(1, -1).map((l) => l.slice(2)).join(`
+`);
+  }
+  return json;
+}
+function IoTooltipContent({ value }) {
+  const text = stripOuterBraces(safeStringify(value, 2));
+  return /* @__PURE__ */ jsxDEV17("div", {
+    style: {
+      fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+      fontSize: "10px",
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-all",
+      lineHeight: "1.5",
+      textAlign: "left"
+    },
+    children: renderColoredJson2(text)
+  }, undefined, false, undefined, this);
+}
+function GroupDotTooltip({
+  entry,
+  index,
+  total,
+  refTime,
+  dotColor,
+  anchor
+}) {
+  const symbol = STATUS_SYMBOL[entry.status];
+  const deltaMs = refTime - entry.startTime;
+  const relStr = index === 0 ? "latest run" : `−${formatRelativeAge(deltaMs)} from latest`;
+  const durationStr = entry.endTime != null ? `${entry.endTime - entry.startTime}ms` : "running…";
+  return /* @__PURE__ */ jsxDEV17(Tooltip, {
+    anchor,
+    config: {
+      align: "center",
+      maxWidth: 240,
+      content: /* @__PURE__ */ jsxDEV17(Fragment7, {
+        children: [
+          /* @__PURE__ */ jsxDEV17("div", {
+            style: { color: dotColor, marginBottom: "1px" },
             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)
+              symbol,
+              " run ",
+              index + 1,
+              " of ",
+              total
             ]
           }, undefined, true, undefined, this),
-          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV12(DetailSection, {
-            label: `Progress (${focusedEntry.progressUpdates.length})`,
-            value: focusedEntry.progressUpdates
+          /* @__PURE__ */ jsxDEV17("div", {
+            style: { color: DEVTOOL_COLOR_TEXT_SECONDARY },
+            children: formatTimestamp(entry.startTime)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV17("div", {
+            style: { color: DEVTOOL_COLOR_TEXT_MUTED },
+            children: durationStr
+          }, undefined, false, undefined, this),
+          index > 0 && /* @__PURE__ */ jsxDEV17("div", {
+            style: {
+              color: DEVTOOL_COLOR_TEXT_MUTED,
+              marginTop: "3px",
+              paddingTop: "3px",
+              borderTop: `1px solid ${DEVTOOL_SECTION_BACKGROUND}`
+            },
+            children: relStr
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
+    }
+  }, undefined, false, undefined, this);
+}
+function GroupDot({
+  entry,
+  index,
+  total,
+  refTime,
+  isActive,
+  onSelect
+}) {
+  const [anchor, setAnchor] = useState8(null);
+  const dotColor = STATUS_COLOR[entry.status];
+  const hovered = anchor != null;
+  return /* @__PURE__ */ jsxDEV17(Fragment7, {
+    children: [
+      /* @__PURE__ */ jsxDEV17("button", {
+        "data-cuid": entry.cuid,
+        onClick: (e) => {
+          e.stopPropagation();
+          onSelect();
+        },
+        onMouseEnter: (e) => setAnchor(e.currentTarget.getBoundingClientRect()),
+        onMouseLeave: () => setAnchor(null),
+        style: {
+          width: "9px",
+          height: "9px",
+          borderRadius: "50%",
+          border: isActive ? `2px solid ${dotColor}` : hovered ? `1px solid ${dotColor}99` : "1px solid transparent",
+          background: isActive ? "transparent" : dotColor,
+          cursor: "pointer",
+          padding: 0,
+          flexShrink: 0,
+          opacity: isActive ? 1 : hovered ? 0.8 : 0.35,
+          transform: hovered ? "scale(1.55)" : "scale(1)",
+          transition: "transform 0.1s ease, opacity 0.1s ease, border-color 0.1s ease"
+        }
+      }, undefined, false, undefined, this),
+      hovered && anchor != null && /* @__PURE__ */ jsxDEV17(GroupDotTooltip, {
+        entry,
+        index,
+        total,
+        refTime,
+        dotColor,
+        anchor
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-
-// 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
+  childExternalRouteEntries,
+  breakReasons,
+  groupEntries,
+  selectedGroupCuid,
+  onSelectGroupEntry
 }) {
-  const color = STATUS_COLOR[entry.status];
-  const symbol = STATUS_SYMBOL[entry.status];
+  const statusSemantic = STATUS_THING[entry.status];
+  const statusIcon = STATUS_ICON[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(DomainChip, {
-          subtle: true,
-          domain: entry.domain,
-          allDomains: entry.allDomains,
-          size: "sm"
-        }, 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("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", {
+  const hasGroup = groupEntries != null && groupEntries.length > 1;
+  return /* @__PURE__ */ jsxDEV17("div", {
     "data-cuid": entry.cuid,
     onClick,
     style: {
+      position: "relative",
       display: "flex",
       alignItems: "flex-start",
       gap: "8px",
-      padding: isSelected ? "6px 12px 6px 10px" : "6px 12px",
+      padding: "10px 12px",
       cursor: "pointer",
-      background: isSelected ? "#131f35" : "transparent",
-      borderBottom: "1px solid #0f172a",
-      borderLeft: isSelected ? "2px solid #60a5fa" : "2px solid transparent"
+      background: isSelected ? DEVTOOL_DETAIL_HEADER_BACKGROUND : "transparent",
+      border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
+      borderLeft: isSelected ? `2px solid ${STATUS_COLOR[entry.status]}` : entry.status === "failed" || entry.status === "action-error" ? `2px solid ${STATUS_COLOR[entry.status]}55` : `2px solid transparent`,
+      borderRadius: "3px",
+      margin: "2px 4px"
     },
     children: [
-      /* @__PURE__ */ jsxDEV13("span", {
+      /* @__PURE__ */ jsxDEV17("div", {
+        style: {
+          position: "absolute",
+          left: "32px",
+          top: 0,
+          bottom: 0,
+          width: "1px",
+          background: `${DEVTOOL_COLOR_SEMANTIC_METADATA}28`,
+          pointerEvents: "none",
+          zIndex: 0
+        }
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV17("div", {
         style: {
+          position: "relative",
+          zIndex: 1,
           flexShrink: 0,
           minWidth: "3.5em",
           display: "flex",
           alignItems: "center",
-          justifyContent: "start"
+          justifyContent: "flex-start"
         },
-        children: isLatest ? /* @__PURE__ */ jsxDEV13(Chip, {
-          color: "#60a5fa",
-          borderColor: "#1e3a5f",
+        children: isLatest ? /* @__PURE__ */ jsxDEV17(Chip, {
+          color: getLatestChipColor(entry.status),
           children: "latest"
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV13(Chip, {
-          color: "#475569",
-          borderColor: "#1e293b",
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17(Chip, {
+          color: "age" /* age */,
           children: [
             "+",
             latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"
           ]
         }, undefined, true, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV13("span", {
+      /* @__PURE__ */ jsxDEV17("span", {
         style: {
-          color,
-          fontSize: "10px",
+          position: "relative",
+          zIndex: 1,
+          color: statusSemantic,
           flexShrink: 0,
-          paddingTop: "2px",
+          display: "flex",
+          alignItems: "center",
           animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
         },
-        children: symbol
+        children: /* @__PURE__ */ jsxDEV17(Icon, {
+          icon: statusIcon,
+          color: statusSemantic
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV13("div", {
-        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "3px" },
+      /* @__PURE__ */ jsxDEV17("div", {
+        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "0.3em" },
         children: [
-          /* @__PURE__ */ jsxDEV13("div", {
+          /* @__PURE__ */ jsxDEV17("div", {
             style: {
               display: "flex",
               alignItems: "center",
               minWidth: 0,
               overflow: "hidden",
-              gap: "0.3em"
+              gap: "0.5em"
             },
             children: [
-              /* @__PURE__ */ jsxDEV13(DomainChip, {
-                domain: entry.domain,
-                allDomains: entry.allDomains,
-                size: "md"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV13("span", {
-                style: { color: isSelected ? "#818cf8" : "#3730a3", fontSize: "1em" },
-                children: "⚡"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV13("span", {
+              /* @__PURE__ */ jsxDEV17("span", {
                 style: {
-                  color: "#cbd5e1",
+                  color: DEVTOOL_COLOR_TEXT_SECONDARY,
                   fontSize: "11px",
+                  fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap",
@@ -3346,10 +4050,46 @@ function ActionEntryRow({
                   minWidth: "24px"
                 },
                 children: entry.actionId
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17(DomainChip, {
+                domain: entry.domain,
+                allDomains: entry.allDomains
+              }, undefined, false, undefined, this),
+              entry.input !== undefined && /* @__PURE__ */ jsxDEV17(Icon, {
+                icon: Variable,
+                color: "io_input" /* io_input */,
+                tooltip: { content: /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
+                  value: entry.input
+                }, undefined, false, undefined, this), title: "Input" }
+              }, undefined, false, undefined, this),
+              entry.status === "success" && entry.output !== undefined && /* @__PURE__ */ jsxDEV17(Icon, {
+                icon: Box,
+                color: "io_output" /* io_output */,
+                tooltip: { content: /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
+                  value: entry.output
+                }, undefined, false, undefined, this), title: "Output" }
+              }, undefined, false, undefined, this),
+              (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsxDEV17(Icon, {
+                icon: CircleX2,
+                color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
+                tooltip: {
+                  content: /* @__PURE__ */ jsxDEV17("div", {
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "1em"
+                    },
+                    children: /* @__PURE__ */ jsxDEV17(ActionErrorDisplay, {
+                      entry
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this),
+                  title: entry.status === "aborted" ? "Aborted" : "Error",
+                  maxWidth: 400
+                }
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV13("div", {
+          /* @__PURE__ */ jsxDEV17("div", {
             style: {
               display: "flex",
               alignItems: "center",
@@ -3357,53 +4097,70 @@ function ActionEntryRow({
               gap: "6px"
             },
             children: [
-              /* @__PURE__ */ jsxDEV13("div", {
+              /* @__PURE__ */ jsxDEV17("div", {
                 style: {
                   display: "flex",
                   flexDirection: "row",
-                  alignItems: "center",
+                  alignItems: "start",
                   gap: "5px",
                   minWidth: 0,
                   overflow: "hidden"
                 },
                 children: [
-                  /* @__PURE__ */ jsxDEV13(HandlerChips, {
+                  /* @__PURE__ */ jsxDEV17(HandlerChips, {
                     entry,
-                    size: "sm"
+                    size: "sm" /* sm */
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV13(ChildDispatchChips, {
-                    labels: childExternalLabels,
-                    size: "sm"
-                  }, undefined, false, undefined, this)
+                  /* @__PURE__ */ jsxDEV17(ChildDispatchChips, {
+                    childRouteItems: childExternalRouteEntries,
+                    size: "sm" /* sm */
+                  }, undefined, false, undefined, this),
+                  breakReasons?.filter((r) => r !== "new input" && r !== "new output").map((reason) => /* @__PURE__ */ jsxDEV17(Chip, {
+                    color: "default" /* default */,
+                    children: reason
+                  }, reason, false, undefined, this))
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV13("div", {
+              /* @__PURE__ */ jsxDEV17("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: [
-                      "x",
-                      groupCount
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV13("span", {
-                    style: { color: "#1e3a5f", fontSize: "10px", letterSpacing: "0.02em" },
+                  /* @__PURE__ */ jsxDEV17("span", {
+                    style: {
+                      color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+                      fontSize: "10px",
+                      letterSpacing: "0.02em",
+                      fontFamily: "ui-sans-serif, system-ui, sans-serif"
+                    },
                     children: timestamp
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV13("span", {
-                    style: { color: "#475569", fontSize: "11px" },
-                    children: /* @__PURE__ */ jsxDEV13(DurationDisplay, {
+                  /* @__PURE__ */ jsxDEV17("span", {
+                    style: { color: DEVTOOL_COLOR_SEMANTIC_WARNING, fontSize: "11px" },
+                    children: /* @__PURE__ */ jsxDEV17(DurationDisplay, {
                       entry
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this)
             ]
-          }, undefined, true, undefined, this)
+          }, undefined, true, undefined, this),
+          hasGroup && /* @__PURE__ */ jsxDEV17("div", {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              gap: "5px",
+              paddingBottom: "3px",
+              paddingTop: "1px"
+            },
+            children: groupEntries.map((e, i) => /* @__PURE__ */ jsxDEV17(GroupDot, {
+              entry: e,
+              index: i,
+              total: groupEntries.length,
+              refTime: groupEntries[0].startTime,
+              isActive: selectedGroupCuid === e.cuid,
+              onSelect: () => onSelectGroupEntry?.(e.cuid)
+            }, e.cuid, false, undefined, this))
+          }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
     ]
@@ -3411,7 +4168,7 @@ function ActionEntryRow({
 }
 
 // src/devtools/browser/components/PanelChrome.tsx
-import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
 var DOCKED_SIZE_MIN = 140;
 var POSITION_GRID = [
   ["top-left", "dock-top", "top-right"],
@@ -3435,46 +4192,46 @@ function PanelHeader({
   onClose,
   onClear
 }) {
-  return /* @__PURE__ */ jsxDEV14("div", {
+  return /* @__PURE__ */ jsxDEV18("div", {
     style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       padding: "8px 12px",
-      background: "#1e293b",
-      borderBottom: "1px solid #0f172a",
+      background: DEVTOOL_SECTION_BACKGROUND,
+      borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
       flexShrink: 0
     },
     children: [
-      /* @__PURE__ */ jsxDEV14("span", {
-        style: { color: "#60a5fa", fontWeight: "bold", fontSize: "11px" },
+      /* @__PURE__ */ jsxDEV18("span", {
+        style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM, fontWeight: "bold", fontSize: "11px" },
         children: "⚡ nice-action devtools"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV14("div", {
+      /* @__PURE__ */ jsxDEV18("div", {
         style: { display: "flex", gap: "10px", alignItems: "center" },
         children: [
-          /* @__PURE__ */ jsxDEV14(PositionPicker, {
+          /* @__PURE__ */ jsxDEV18(PositionPicker, {
             position,
             onChange: onPositionChange
           }, undefined, false, undefined, this),
-          onClear != null && /* @__PURE__ */ jsxDEV14("button", {
+          onClear != null && /* @__PURE__ */ jsxDEV18("button", {
             onClick: onClear,
             style: {
               background: "none",
               border: "none",
-              color: "#475569",
+              color: DEVTOOL_COLOR_TEXT_MUTED,
               cursor: "pointer",
               fontSize: "11px",
               padding: "0"
             },
             children: "clear"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV14("button", {
+          /* @__PURE__ */ jsxDEV18("button", {
             onClick: onClose,
             style: {
               background: "none",
               border: "none",
-              color: "#475569",
+              color: DEVTOOL_COLOR_TEXT_MUTED,
               cursor: "pointer",
               fontSize: "16px",
               padding: "0",
@@ -3491,18 +4248,18 @@ function PositionPicker({
   position,
   onChange
 }) {
-  return /* @__PURE__ */ jsxDEV14("div", {
+  return /* @__PURE__ */ jsxDEV18("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", {
+        return /* @__PURE__ */ jsxDEV18("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", {
+      return /* @__PURE__ */ jsxDEV18("div", {
         title: pos,
         onClick: () => onChange(pos),
         style: {
@@ -3513,12 +4270,12 @@ function PositionPicker({
           justifyContent: "center",
           cursor: "pointer"
         },
-        children: /* @__PURE__ */ jsxDEV14("div", {
+        children: /* @__PURE__ */ jsxDEV18("div", {
           style: {
             width: isDock ? isTopBottom ? "9px" : "3px" : "7px",
             height: isDock ? isTopBottom ? "3px" : "9px" : "7px",
             borderRadius: isDock ? "1px" : "50%",
-            background: isActive ? "#60a5fa" : "#334155"
+            background: isActive ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT
           }
         }, undefined, false, undefined, this)
       }, pos, false, undefined, this);
@@ -3549,7 +4306,7 @@ function ResizeHandle({
     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", {
+  return /* @__PURE__ */ jsxDEV18("div", {
     onMouseDown,
     style: {
       position: "absolute",
@@ -3561,7 +4318,7 @@ function ResizeHandle({
 }
 
 // src/devtools/browser/NiceActionDevtools.tsx
-import { jsxDEV as jsxDEV15, Fragment as Fragment5 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV19, Fragment as Fragment8 } 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";
@@ -3576,6 +4333,23 @@ if (typeof document !== "undefined" && !document.getElementById("__nice-action-d
       85%  { opacity: 1; }
       100% { transform: translateX(200%); opacity: 0; }
     }
+    #__nice-action-devtools-panel ::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+    #__nice-action-devtools-panel ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    #__nice-action-devtools-panel ::-webkit-scrollbar-thumb {
+      background: #334155;
+      border-radius: 2px;
+    }
+    #__nice-action-devtools-panel ::-webkit-scrollbar-thumb:hover {
+      background: #475569;
+    }
+    #__nice-action-devtools-panel ::-webkit-scrollbar-corner {
+      background: transparent;
+    }
   `;
   document.head?.appendChild(style);
 }
@@ -3619,7 +4393,9 @@ function canGroupWith(a, b) {
   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);
+  const inputMatch = a.inputHash != null && b.inputHash != null ? a.inputHash === b.inputHash : safeStringify(a.input, 0) === safeStringify(b.input, 0);
+  const outputMatch = a.outputHash != null && b.outputHash != null ? a.outputHash === b.outputHash : true;
+  return a.actionId === b.actionId && a.domain === b.domain && a.status === b.status && !handlerConflict && inputMatch && outputMatch;
 }
 function groupEntries(entries) {
   const groups = [];
@@ -3635,7 +4411,7 @@ function groupEntries(entries) {
 }
 function NiceActionDevtools(props) {
   if (false) {}
-  return /* @__PURE__ */ jsxDEV15(NiceActionDevtools_Panel, {
+  return /* @__PURE__ */ jsxDEV19(NiceActionDevtools_Panel, {
     ...props
   }, undefined, false, undefined, this);
 }
@@ -3644,34 +4420,28 @@ function NiceActionDevtools_Panel({
   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]);
+  const [prefs, setPrefsRaw] = useState9(() => readPrefs(defaultPosition, initialOpen));
+  const [entries, setEntries] = useState9([]);
+  const [selectedCuid, setSelectedCuid] = useState9(null);
   useEffect3(() => core.subscribe(setEntries), [core]);
   const groups = useMemo2(() => {
     const byCuid = new Map(entries.map((e) => [e.cuid, e]));
     const roots = entries.filter((e) => e.status !== "running" && (e.parentCuid == null || !byCuid.has(e.parentCuid)));
     return groupEntries(roots);
   }, [entries]);
-  const childExternalLabelsMap = useMemo2(() => {
+  const childExternalRouteItemsMap = 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)
+      if (firstHop == null || firstHop.handlerType !== "external")
         continue;
       const existing = map.get(entry.parentCuid) ?? [];
-      if (!existing.includes(label))
-        map.set(entry.parentCuid, [...existing, label]);
+      const key = `${firstHop.handlerClient?.envId ?? ""}:${firstHop.transport ?? ""}`;
+      if (!existing.some((r) => `${r.handlerClient?.envId ?? ""}:${r.transport ?? ""}` === key)) {
+        map.set(entry.parentCuid, [...existing, firstHop]);
+      }
     }
     return map;
   }, [entries]);
@@ -3679,18 +4449,12 @@ function NiceActionDevtools_Panel({
     const repCuid = group.representative.cuid;
     const allInGroup = [group.representative, ...group.rest];
     const selectedInGroup = allInGroup.find((e) => e.cuid === selectedCuid) ?? null;
-    setExpandedGroupCuids(new Set);
     if (selectedInGroup != null && selectedCuid !== repCuid) {
       setSelectedCuid(repCuid);
     } else {
       setSelectedCuid(selectedCuid === repCuid ? null : repCuid);
     }
   };
-  const handleExpandGroup = (group) => {
-    const oldestCuid = (group.rest[group.rest.length - 1] ?? group.representative).cuid;
-    setSelectedCuid(null);
-    setExpandedGroupCuids(new Set([oldestCuid]));
-  };
   const setPrefs = (update) => {
     setPrefsRaw((prev) => {
       const next = { ...prev, ...update };
@@ -3743,14 +4507,14 @@ function NiceActionDevtools_Panel({
     fontSize: "12px"
   };
   if (!isOpen) {
-    return /* @__PURE__ */ jsxDEV15("button", {
+    return /* @__PURE__ */ jsxDEV19("button", {
       onClick: () => setPrefs({ isOpen: true }),
       style: {
         ...baseStyle,
         ...closedAnchor,
-        background: "#1e293b",
-        color: "#94a3b8",
-        border: "1px solid #334155",
+        background: DEVTOOL_SECTION_BACKGROUND,
+        color: DEVTOOL_COLOR_TEXT_SECONDARY,
+        border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
         borderRadius: "6px",
         padding: "5px 10px",
         cursor: "pointer",
@@ -3758,10 +4522,10 @@ function NiceActionDevtools_Panel({
       },
       children: [
         "⚡ actions",
-        runningCount > 0 && /* @__PURE__ */ jsxDEV15("span", {
+        runningCount > 0 && /* @__PURE__ */ jsxDEV19("span", {
           style: {
             marginLeft: "6px",
-            color: "#60a5fa",
+            color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
             animation: "__nice-action-pulse 1.2s ease-in-out infinite"
           },
           children: [
@@ -3774,9 +4538,9 @@ function NiceActionDevtools_Panel({
   }
   const panelStyle = dockSide != null ? {
     ...baseStyle,
-    background: "#0f172a",
-    border: "1px solid #1e293b",
-    color: "#e2e8f0",
+    background: DEVTOOL_LIST_BASE_BACKGROUND,
+    border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
+    color: DEVTOOL_COLOR_TEXT_SECONDARY,
     display: "flex",
     flexDirection: "column",
     boxShadow: "0 -4px 24px rgba(0,0,0,0.4)",
@@ -3811,10 +4575,10 @@ function NiceActionDevtools_Panel({
     ...closedAnchor,
     width: "460px",
     maxHeight: "560px",
-    background: "#0f172a",
-    border: "1px solid #1e293b",
+    background: DEVTOOL_LIST_BASE_BACKGROUND,
+    border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
     borderRadius: "10px",
-    color: "#e2e8f0",
+    color: DEVTOOL_COLOR_TEXT_SECONDARY,
     display: "flex",
     flexDirection: "column",
     boxShadow: "0 25px 50px rgba(0,0,0,0.5)",
@@ -3825,179 +4589,197 @@ function NiceActionDevtools_Panel({
   const virtualListProps = {
     groups,
     selectedCuid,
-    expandedGroupCuids,
     onGroupClick: handleGroupRowClick,
     onSubClick: (cuid, isSelected) => {
       setSelectedCuid(isSelected ? null : cuid);
-      setExpandedGroupCuids(new Set);
     },
-    onExpandGroup: handleExpandGroup,
-    childExternalLabelsMap
+    childExternalRouteItemsMap
   };
-  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(ActionList, {
-              ...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", {
+  return /* @__PURE__ */ jsxDEV19("div", {
+    id: "__nice-action-devtools-panel",
+    style: panelStyle,
+    children: [
+      dockSide != null && /* @__PURE__ */ jsxDEV19(ResizeHandle, {
+        dockSide,
+        dockedSize,
+        onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV19(PanelHeader, {
+        position,
+        onPositionChange: (p) => setPrefs({ position: p }),
+        onClose: () => setPrefs({ isOpen: false }),
+        onClear: entries.length > 0 ? () => {
+          core.clear();
+          setSelectedCuid(null);
+        } : undefined
+      }, undefined, false, undefined, this),
+      isHorizDock ? /* @__PURE__ */ jsxDEV19("div", {
+        style: { flex: 1, display: "flex", overflow: "hidden" },
+        children: [
+          /* @__PURE__ */ jsxDEV19("div", {
+            style: { position: "relative", width: "340px", flexShrink: 0 },
+            children: [
+              /* @__PURE__ */ jsxDEV19(ActionList, {
+                ...virtualListProps,
+                style: { width: "100%", height: "100%", overflowY: "auto" }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV19("div", {
                 style: {
-                  padding: "24px",
-                  textAlign: "center",
-                  color: "#475569",
-                  fontSize: "11px"
-                },
-                children: "Select an action to inspect"
+                  position: "absolute",
+                  top: 0,
+                  right: 0,
+                  bottom: 0,
+                  width: "36px",
+                  pointerEvents: "none",
+                  background: `linear-gradient(to right, transparent, ${DEVTOOL_LIST_BASE_BACKGROUND} 88%)`
+                }
               }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV15(Fragment5, {
-          children: [
-            /* @__PURE__ */ jsxDEV15(ActionList, {
-              ...virtualListProps,
-              style: {
-                overflowY: "auto",
-                flex: 1,
-                minHeight: "80px",
-                borderBottom: selectedEntry != null ? "1px solid #1e293b" : "none"
-              }
-            }, undefined, false, undefined, this),
-            selectedEntry != null && /* @__PURE__ */ jsxDEV15("div", {
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV19("div", {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+              borderLeft: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
+              boxShadow: "inset 18px 0 36px -14px rgba(0,0,0,0.8)"
+            },
+            children: selectedEntry != null ? /* @__PURE__ */ jsxDEV19(ActionDetailPanel, {
+              entry: selectedEntry,
+              parent: selectedEntryParent,
+              childEntries: selectedEntryChildren,
+              onSelectEntry: (cuid) => setSelectedCuid(cuid)
+            }, selectedEntry.cuid, false, undefined, this) : /* @__PURE__ */ jsxDEV19("div", {
               style: {
-                flexShrink: 0,
-                maxHeight: "45%",
-                display: "flex",
-                flexDirection: "column",
-                overflow: "hidden"
+                padding: "24px",
+                textAlign: "center",
+                color: DEVTOOL_COLOR_TEXT_MUTED,
+                fontSize: "11px"
               },
-              children: /* @__PURE__ */ jsxDEV15(ActionDetailPanel, {
-                entry: selectedEntry,
-                parent: selectedEntryParent,
-                childEntries: selectedEntryChildren,
-                onSelectEntry: (cuid) => setSelectedCuid(cuid)
-              }, selectedEntry.cuid, false, undefined, this)
+              children: "Select an action to inspect"
             }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV19(Fragment8, {
+        children: [
+          /* @__PURE__ */ jsxDEV19("div", {
+            style: { position: "relative", flex: 1, minHeight: "80px" },
+            children: [
+              /* @__PURE__ */ jsxDEV19(ActionList, {
+                ...virtualListProps,
+                style: { overflowY: "auto", height: "100%" }
+              }, undefined, false, undefined, this),
+              selectedEntry != null && /* @__PURE__ */ jsxDEV19("div", {
+                style: {
+                  position: "absolute",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  height: "36px",
+                  pointerEvents: "none",
+                  background: `linear-gradient(to bottom, transparent, ${DEVTOOL_LIST_BASE_BACKGROUND} 88%)`
+                }
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          selectedEntry != null && /* @__PURE__ */ jsxDEV19("div", {
+            style: {
+              flexShrink: 0,
+              maxHeight: "55%",
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+              borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
+              boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
+            },
+            children: /* @__PURE__ */ jsxDEV19(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);
+}
+function getBreakReasons(current, previous) {
+  const reasons = [];
+  const inputChanged = current.inputHash != null && previous.inputHash != null ? current.inputHash !== previous.inputHash : safeStringify(current.input, 0) !== safeStringify(previous.input, 0);
+  if (inputChanged)
+    reasons.push("new input");
+  const outputChanged = current.outputHash != null && previous.outputHash != null && current.outputHash !== previous.outputHash;
+  if (outputChanged)
+    reasons.push("new output");
+  return reasons;
 }
 function getFlatItemKey(item) {
   const oldestCuid = item.group.rest[item.group.rest.length - 1]?.cuid ?? item.group.representative.cuid;
-  if (item.type === "group")
-    return `g:${oldestCuid}`;
-  if (item.type === "sub")
-    return `s:${item.entry.cuid}`;
-  return `c:${item.position}:${oldestCuid}`;
+  return `g:${oldestCuid}`;
 }
 function ActionList({
   groups,
   selectedCuid,
-  expandedGroupCuids,
   onGroupClick,
   onSubClick,
-  onExpandGroup,
-  childExternalLabelsMap,
+  childExternalRouteItemsMap,
   style
 }) {
-  const containerRef = useRef2(null);
+  const containerRef = useRef(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 allInGroup = [group.representative, ...group.rest];
-      const selectedIdx = allInGroup.findIndex((e) => e.cuid === selectedCuid);
-      result.push({ type: "group", group, groupIndex: gi });
-      const oldestCuid = (group.rest[group.rest.length - 1] ?? group.representative).cuid;
-      if (selectedIdx > 0) {
-        const aboveCount = selectedIdx;
-        const belowCount = allInGroup.length - selectedIdx - 1;
-        if (aboveCount > 0)
-          result.push({ type: "group-count", count: aboveCount, position: "above", group });
-        result.push({ type: "sub", entry: allInGroup[selectedIdx], group });
-        if (belowCount > 0)
-          result.push({ type: "group-count", count: belowCount, position: "below", group });
-      } else if (selectedIdx === 0 && group.rest.length > 0) {
-        result.push({ type: "group-count", count: group.rest.length, position: "below", group });
-      } else {
-        const isExpanded = expandedGroupCuids.has(repCuid) || expandedGroupCuids.has(oldestCuid);
-        if (isExpanded) {
-          for (const entry of group.rest) {
-            result.push({ type: "sub", entry, group });
-          }
-        }
+    return groups.map((group, gi) => {
+      const prevGroup = groups[gi + 1];
+      let breakReasons;
+      if (prevGroup != null && prevGroup.representative.actionId === group.representative.actionId && prevGroup.representative.domain === group.representative.domain) {
+        const reasons = getBreakReasons(group.representative, prevGroup.representative);
+        if (reasons.length > 0)
+          breakReasons = reasons;
       }
-    }
-    return result;
-  }, [groups, expandedGroupCuids, selectedCuid]);
-  const prevSelectedRef = useRef2(selectedCuid);
+      return { group, groupIndex: gi, breakReasons };
+    });
+  }, [groups]);
+  const prevSelectedRef = useRef(selectedCuid);
   useEffect3(() => {
     if (selectedCuid === prevSelectedRef.current)
       return;
     prevSelectedRef.current = selectedCuid;
     if (selectedCuid == null)
       return;
-    containerRef.current?.querySelector(`[data-cuid="${selectedCuid}"]`)?.scrollIntoView({ block: "nearest" });
-  }, [selectedCuid]);
+    let repCuid = selectedCuid;
+    for (const item of flatItems) {
+      if (item.group.rest.some((e) => e.cuid === selectedCuid)) {
+        repCuid = item.group.representative.cuid;
+        break;
+      }
+    }
+    containerRef.current?.querySelector(`[data-cuid="${repCuid}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [selectedCuid, flatItems]);
   if (groups.length === 0) {
-    return /* @__PURE__ */ jsxDEV15("div", {
+    return /* @__PURE__ */ jsxDEV19("div", {
       style,
-      children: /* @__PURE__ */ jsxDEV15("div", {
-        style: { padding: "24px", textAlign: "center", color: "#475569" },
+      children: /* @__PURE__ */ jsxDEV19("div", {
+        style: { padding: "24px", textAlign: "center", color: DEVTOOL_COLOR_TEXT_MUTED },
         children: "No actions recorded yet"
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV15("div", {
+  return /* @__PURE__ */ jsxDEV19("div", {
     ref: containerRef,
     style,
     children: flatItems.map((item) => {
       const key = getFlatItemKey(item);
-      return /* @__PURE__ */ jsxDEV15("div", {
-        "data-cuid": item.type === "group" ? item.group.representative.cuid : item.type === "sub" ? item.entry.cuid : undefined,
-        style: { borderBottom: "1px solid #101109", position: "relative", overflow: "hidden" },
+      const { group } = item;
+      return /* @__PURE__ */ jsxDEV19("div", {
+        style: {
+          borderBottom: `1px solid ${DEVTOOL_LIST_GROUP_DIVIDER}`,
+          position: "relative",
+          overflow: "hidden"
+        },
         children: [
-          item.type === "group" && /* @__PURE__ */ jsxDEV15("div", {
+          /* @__PURE__ */ jsxDEV19("div", {
             style: {
               position: "absolute",
               inset: 0,
@@ -4005,49 +4787,18 @@ function ActionList({
               background: "linear-gradient(90deg, transparent 0%, rgba(148, 210, 255, 0.13) 50%, transparent 100%)",
               animation: "__nice-action-shine 0.65s ease-out forwards"
             }
-          }, item.group.representative.cuid, false, undefined, this),
-          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,
+          }, group.representative.cuid, false, undefined, this),
+          /* @__PURE__ */ jsxDEV19(ActionEntryRow, {
+            entry: group.representative,
+            isSelected: selectedCuid === group.representative.cuid || group.rest.some((e) => e.cuid === selectedCuid),
             isLatest: item.groupIndex === 0,
             latestTime,
-            childExternalLabels: childExternalLabelsMap.get(item.group.representative.cuid),
-            onClick: () => onGroupClick(item.group)
-          }, undefined, false, undefined, this) : item.type === "group-count" ? /* @__PURE__ */ jsxDEV15("div", {
-            onClick: () => onExpandGroup(item.group),
-            style: {
-              padding: "2px 28px",
-              fontSize: "10px",
-              color: "#475569",
-              display: "flex",
-              alignItems: "center",
-              gap: "5px",
-              background: "#0a1120",
-              cursor: "pointer",
-              userSelect: "none"
-            },
-            children: [
-              /* @__PURE__ */ jsxDEV15("span", {
-                style: { opacity: 0.6 },
-                children: item.position === "above" ? "↑" : "↓"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV15("span", {
-                children: [
-                  item.count,
-                  " ",
-                  item.position === "above" ? "newer" : "older",
-                  " — click to browse"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, 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)
+            childExternalRouteEntries: childExternalRouteItemsMap.get(group.representative.cuid),
+            breakReasons: item.breakReasons,
+            groupEntries: group.rest.length > 0 ? [group.representative, ...group.rest] : undefined,
+            selectedGroupCuid: selectedCuid,
+            onSelectGroupEntry: (cuid) => onSubClick(cuid, selectedCuid === cuid),
+            onClick: () => onGroupClick(group)
           }, undefined, false, undefined, this)
         ]
       }, key, true, undefined, this);