@nice-code/action 0.2.18 → 0.2.19

package/build/devtools/browser/index.js

@@ -1957,7 +1957,7 @@ class ActionDevtoolsCore {
   }
 }
 // src/devtools/browser/NiceActionDevtools.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState9 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState9 } from "react";
 
 // src/devtools/core/devtools_colors.ts
 var DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
@@ -2068,7 +2068,7 @@ var SEMANTIC_COLORS = {
 };
 
 // src/devtools/browser/components/action_detail/ActionDetailPanel.tsx
-import { useMemo, useState as useState6 } from "react";
+import { useMemo, useState as useState7 } from "react";
 
 // src/devtools/browser/ui_util/size.ts
 function getSizeValue(size) {
@@ -2392,7 +2392,13 @@ function NiceErrorDisplay({
 }
 
 // src/devtools/browser/components/StackTraceSection.tsx
-import { useEffect, useState as useState2 } from "react";
+import { ExternalLink } from "lucide-react";
+import { useEffect, useRef, useState as useState2 } from "react";
+
+// src/devtools/browser/devtools_storage.ts
+import { createTypedWebLocalStorage } from "@nice-code/util";
+var devtools_storage = createTypedWebLocalStorage(window.localStorage, "nice-action-devtools::");
+devtools_storage.updateJsonWithDef("runtimeToProjectFilePath", {}, (prev) => prev);
 
 // ../../node_modules/.bun/source-map-js@1.2.1/node_modules/source-map-js/source-map.js
 var $SourceMapGenerator = require_source_map_generator().SourceMapGenerator;
@@ -2507,7 +2513,7 @@ async function resolveSourceMapPositions(frames) {
     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 };
+    return { ...frame, originalFile: frame.file, file: resolved.file, line: resolved.line, col: resolved.col };
   }));
 }
 function formatFrameFile(file) {
@@ -2525,7 +2531,299 @@ function formatFrameFile(file) {
   const tail = filtered.slice(-4);
   return tail.join("/") || file;
 }
-function countUserFrames(stack) {
+function getOriginUrl(frame) {
+  const candidate = frame.originalFile ?? frame.file;
+  if (candidate == null)
+    return null;
+  try {
+    new URL(candidate);
+    return candidate;
+  } catch {
+    return null;
+  }
+}
+function frameNeedsProjectRoot(frame) {
+  if (frame.isInternal)
+    return false;
+  const originUrl = getOriginUrl(frame);
+  if (originUrl == null)
+    return false;
+  const path = new URL(originUrl).pathname.split("?")[0] ?? "";
+  return !path.startsWith("/@fs/");
+}
+function buildVscodeUrl(frame, projectRoot) {
+  if (frame.line == null)
+    return null;
+  const originUrl = getOriginUrl(frame);
+  if (originUrl != null) {
+    let path = new URL(originUrl).pathname.split("?")[0] ?? "";
+    if (path.startsWith("/@fs/")) {
+      path = path.slice(5);
+      if (/^\/[a-zA-Z]:\//.test(path))
+        path = path.slice(1);
+      return `vscode://file/${path}:${frame.line}:${frame.col ?? 1}`;
+    }
+    if (projectRoot == null)
+      return null;
+    const normalRoot2 = projectRoot.replace(/[/\\]+$/, "").replace(/\\/g, "/");
+    return `vscode://file/${normalRoot2}${path}:${frame.line}:${frame.col ?? 1}`;
+  }
+  const filePath = frame.file;
+  if (filePath == null)
+    return null;
+  const normalPath = filePath.replace(/\\/g, "/");
+  if (/^[a-zA-Z]:\//.test(normalPath)) {
+    return `vscode://file/${normalPath}:${frame.line}:${frame.col ?? 1}`;
+  }
+  if (/^\/[a-zA-Z]:\//.test(normalPath)) {
+    return `vscode://file/${normalPath.slice(1)}:${frame.line}:${frame.col ?? 1}`;
+  }
+  if (normalPath.startsWith("/")) {
+    if (projectRoot == null)
+      return null;
+    const normalRoot2 = projectRoot.replace(/[/\\]+$/, "").replace(/\\/g, "/");
+    return `vscode://file/${normalRoot2}${normalPath}:${frame.line}:${frame.col ?? 1}`;
+  }
+  if (projectRoot == null)
+    return null;
+  const normalRoot = projectRoot.replace(/[/\\]+$/, "").replace(/\\/g, "/");
+  return `vscode://file/${normalRoot}/${normalPath}:${frame.line}:${frame.col ?? 1}`;
+}
+function ProjectRootSetupModal({
+  envId,
+  currentValue,
+  onSave,
+  onCancel
+}) {
+  const [value, setValue] = useState2(currentValue);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape")
+        onCancel();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onCancel]);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const trimmed = value.trim();
+    if (trimmed !== "")
+      onSave(trimmed);
+  };
+  return /* @__PURE__ */ jsxDEV4("div", {
+    style: {
+      position: "fixed",
+      inset: 0,
+      zIndex: 2147483647,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        onClick: onCancel,
+        style: { position: "absolute", inset: 0, background: "rgba(0, 0, 0, 0.72)" }
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("form", {
+        onSubmit: handleSubmit,
+        style: {
+          position: "relative",
+          background: DEVTOOL_TOOLTIP_BACKGROUND,
+          border: `1px solid ${DEVTOOL_TOOLTIP_BORDER}`,
+          borderRadius: "8px",
+          width: "420px",
+          maxWidth: "90vw",
+          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.8)",
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV4("div", {
+            style: {
+              background: DEVTOOL_TOOLTIP_TITLE_BACKGROUND,
+              borderBottom: `1px solid ${DEVTOOL_TOOLTIP_BORDER}`,
+              padding: "10px 14px"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV4("div", {
+                style: {
+                  color: DEVTOOL_COLOR_TEXT_EMPHASIS,
+                  fontSize: "12px",
+                  fontWeight: 600,
+                  marginBottom: "2px"
+                },
+                children: "Set project root"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
+                children: [
+                  "Runtime:",
+                  " ",
+                  /* @__PURE__ */ jsxDEV4("span", {
+                    style: {
+                      color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+                      fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace"
+                    },
+                    children: envId
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4("div", {
+            style: { padding: "14px", display: "flex", flexDirection: "column", gap: "8px" },
+            children: [
+              /* @__PURE__ */ jsxDEV4("div", {
+                style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", lineHeight: 1.4 },
+                children: [
+                  "Provide the absolute path to this project's root so that root-relative source file paths (e.g.",
+                  " ",
+                  /* @__PURE__ */ jsxDEV4("span", {
+                    style: {
+                      fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace"
+                    },
+                    children: "src/App.tsx"
+                  }, undefined, false, undefined, this),
+                  ") can be opened in VS Code."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("input", {
+                ref: inputRef,
+                value,
+                onChange: (e) => setValue(e.currentTarget.value),
+                placeholder: "e.g. C:/d/nice-code/packages/demo-frontend",
+                style: {
+                  background: DEVTOOL_STACK_TRACE_BACKGROUND,
+                  border: `1px solid ${DEVTOOL_TOOLTIP_BORDER}`,
+                  borderRadius: "4px",
+                  color: DEVTOOL_COLOR_TEXT_SECONDARY,
+                  fontSize: "11px",
+                  fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+                  padding: "7px 9px",
+                  outline: "none",
+                  width: "100%",
+                  boxSizing: "border-box"
+                }
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4("div", {
+            style: {
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: "8px",
+              padding: "10px 14px",
+              borderTop: `1px solid ${DEVTOOL_PANEL_BORDER}`
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV4("button", {
+                type: "button",
+                onClick: onCancel,
+                style: {
+                  background: "transparent",
+                  border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
+                  borderRadius: "4px",
+                  color: DEVTOOL_COLOR_TEXT_MUTED,
+                  fontSize: "11px",
+                  padding: "5px 12px",
+                  cursor: "pointer"
+                },
+                children: "Cancel"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("button", {
+                type: "submit",
+                disabled: value.trim() === "",
+                style: {
+                  background: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM}22`,
+                  border: `1px solid ${DEVTOOL_COLOR_SEMANTIC_SYSTEM}66`,
+                  borderRadius: "4px",
+                  color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+                  fontSize: "11px",
+                  padding: "5px 12px",
+                  cursor: value.trim() === "" ? "not-allowed" : "pointer",
+                  opacity: value.trim() === "" ? 0.5 : 1
+                },
+                children: "Save"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function OpenInVscodeButton({
+  frame,
+  projectRoot,
+  onNeedSetup
+}) {
+  const [hovered, setHovered] = useState2(false);
+  const needsSetup = frameNeedsProjectRoot(frame) && projectRoot == null;
+  const url = buildVscodeUrl(frame, projectRoot);
+  if (frame.file == null || frame.line == null)
+    return null;
+  if (!needsSetup && url == null)
+    return null;
+  const baseStyle = {
+    position: "absolute",
+    bottom: "3px",
+    right: "4px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    opacity: hovered ? 0.85 : 0.25,
+    transition: "opacity 0.15s ease",
+    cursor: "pointer",
+    flexShrink: 0
+  };
+  if (needsSetup) {
+    return /* @__PURE__ */ jsxDEV4("button", {
+      onClick: (e) => {
+        e.stopPropagation();
+        onNeedSetup();
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      title: "Set project root to open in VS Code",
+      style: {
+        ...baseStyle,
+        color: DEVTOOL_COLOR_SEMANTIC_WARNING,
+        background: "none",
+        border: "none",
+        padding: 0
+      },
+      children: /* @__PURE__ */ jsxDEV4(ExternalLink, {
+        size: 10,
+        strokeWidth: 1.8
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV4("a", {
+    href: url,
+    onClick: (e) => e.stopPropagation(),
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+    title: "Open in VS Code",
+    style: {
+      ...baseStyle,
+      color: DEVTOOL_COLOR_TEXT_SECONDARY,
+      textDecoration: "none"
+    },
+    children: /* @__PURE__ */ jsxDEV4(ExternalLink, {
+      size: 10,
+      strokeWidth: 1.8
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function countUserFrames(_runtime, stack) {
   if (stack == null)
     return 0;
   return parseStackFrames(stack).filter((f) => !f.isInternal).length;
@@ -2534,10 +2832,16 @@ function StackTraceSection({
   label,
   stack,
   color = DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+  runtime,
   minFrameCount
 }) {
   const [showAll, setShowAll] = useState2(false);
   const [resolvedFrames, setResolvedFrames] = useState2(null);
+  const [projectRootMap, setProjectRootMap] = useState2({});
+  const [showSetupModal, setShowSetupModal] = useState2(false);
+  useEffect(() => {
+    devtools_storage.getJsonOrDef("runtimeToProjectFilePath", {}).then((map) => setProjectRootMap(map));
+  }, []);
   useEffect(() => {
     if (stack == null)
       return;
@@ -2561,6 +2865,16 @@ function StackTraceSection({
   const phantomFrameCount = !showAll ? Math.max(0, (minFrameCount ?? 0) - displayFrames.length) : 0;
   if (allFrames.length === 0)
     return null;
+  const runtimeKey = `envId[${runtime.envId}]`;
+  const projectRoot = projectRootMap[runtimeKey] ?? null;
+  const handleSaveProjectRoot = (path) => {
+    setProjectRootMap((prev) => ({ ...prev, [runtimeKey]: path }));
+    setShowSetupModal(false);
+    devtools_storage.updateJsonWithDef("runtimeToProjectFilePath", {}, (prev) => ({
+      ...prev,
+      [runtimeKey]: path
+    }));
+  };
   return /* @__PURE__ */ jsxDEV4("div", {
     children: [
       /* @__PURE__ */ jsxDEV4("div", {
@@ -2592,7 +2906,12 @@ function StackTraceSection({
         },
         children: [
           displayFrames.length === 0 ? /* @__PURE__ */ jsxDEV4("div", {
-            style: { padding: "6px 10px", color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", fontStyle: "italic" },
+            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);
@@ -2604,10 +2923,12 @@ function StackTraceSection({
             return /* @__PURE__ */ jsxDEV4("div", {
               title: titleStr,
               style: {
+                position: "relative",
                 display: "flex",
                 flexDirection: "row",
                 gap: "0.5em",
                 padding: "4px",
+                paddingRight: "22px",
                 borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
               },
               children: [
@@ -2684,7 +3005,12 @@ function StackTraceSection({
                       ]
                     }, undefined, true, undefined, this)
                   ]
-                }, undefined, true, undefined, this)
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV4(OpenInVscodeButton, {
+                  frame,
+                  projectRoot,
+                  onNeedSetup: () => setShowSetupModal(true)
+                }, undefined, false, undefined, this)
               ]
             }, frame.raw, true, undefined, this);
           }),
@@ -2719,7 +3045,13 @@ function StackTraceSection({
             ]
           }, `phantom-${i}`, true, undefined, this))
         ]
-      }, undefined, true, undefined, this)
+      }, undefined, true, undefined, this),
+      showSetupModal && /* @__PURE__ */ jsxDEV4(ProjectRootSetupModal, {
+        envId: runtime.envId,
+        currentValue: projectRoot ?? "",
+        onSave: handleSaveProjectRoot,
+        onCancel: () => setShowSetupModal(false)
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
@@ -2732,7 +3064,8 @@ function FullErrorContent({
   label,
   error,
   errorStack,
-  color
+  color,
+  runtime
 }) {
   return /* @__PURE__ */ jsxDEV5(Fragment, {
     children: [
@@ -2746,6 +3079,7 @@ function FullErrorContent({
         color
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV5(StackTraceSection, {
+        runtime,
         label: "Error Stack",
         stack: errorStack,
         color
@@ -2813,6 +3147,7 @@ function ActionErrorDisplay({
         color
       }, undefined, false, undefined, this);
     return /* @__PURE__ */ jsxDEV5(FullErrorContent, {
+      runtime: entry.meta.originClient,
       label: "Action Error",
       error,
       errorStack,
@@ -2827,6 +3162,7 @@ function ActionErrorDisplay({
         color
       }, undefined, false, undefined, this);
     return /* @__PURE__ */ jsxDEV5(FullErrorContent, {
+      runtime: entry.meta.originClient,
       label: "Error",
       error,
       errorStack,
@@ -2852,6 +3188,7 @@ function ActionErrorDisplay({
           color
         }, undefined, false, undefined, this)),
         /* @__PURE__ */ jsxDEV5(StackTraceSection, {
+          runtime: entry.meta.originClient,
           label: "Abort Stack",
           stack: errorStack,
           color
@@ -2862,6 +3199,9 @@ function ActionErrorDisplay({
   return null;
 }
 
+// src/devtools/browser/components/DomainChip.tsx
+import { Component } from "lucide-react";
+
 // src/devtools/browser/components/Chip.tsx
 import { useState as useState3 } from "react";
 
@@ -2991,13 +3331,64 @@ function Chip({
   }, undefined, true, undefined, this);
 }
 
-// src/devtools/browser/components/DomainChip.tsx
+// src/devtools/browser/components/Icon.tsx
+import { useState as useState4 } from "react";
 import { jsxDEV as jsxDEV8, Fragment as Fragment3 } from "react/jsx-dev-runtime";
-function DomainHierarchyContent({ allDomains }) {
+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] = useState4(null);
+  const hasTooltip = tooltip != null;
+  const colorEntry = SEMANTIC_COLORS[color];
+  const resolvedColor = subtle ? colorEntry.subtle?.color ?? colorEntry.color : colorEntry.color;
   return /* @__PURE__ */ jsxDEV8(Fragment3, {
+    children: [
+      /* @__PURE__ */ jsxDEV8("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__ */ jsxDEV8(IconComponent, {
+          size: ICON_SIZE_PX[size],
+          strokeWidth: 1.5
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      anchor != null && hasTooltip && /* @__PURE__ */ jsxDEV8(Tooltip, {
+        anchor,
+        config: tooltip
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/DomainChip.tsx
+import { jsxDEV as jsxDEV9, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+function DomainHierarchyContent({ allDomains }) {
+  return /* @__PURE__ */ jsxDEV9(Fragment4, {
     children: allDomains.map((d, i) => {
       const isCurrent = i === allDomains.length - 1;
-      return /* @__PURE__ */ jsxDEV8("div", {
+      return /* @__PURE__ */ jsxDEV9("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -3006,7 +3397,7 @@ function DomainHierarchyContent({ allDomains }) {
           paddingTop: i > 0 ? "0.1rem" : undefined
         },
         children: [
-          /* @__PURE__ */ jsxDEV8("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             style: {
               fontSize: "0.8rem",
               height: "0.6em",
@@ -3019,7 +3410,7 @@ function DomainHierarchyContent({ allDomains }) {
             },
             children: "⬢"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV8("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             style: {
               color: isCurrent ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "#4b5563",
               fontSize: "0.7rem",
@@ -3033,18 +3424,32 @@ function DomainHierarchyContent({ allDomains }) {
   }, undefined, false, undefined, this);
 }
 function DomainChip({
+  compact = false,
   subtle = false,
   domain,
   allDomains,
   size
 }) {
-  return /* @__PURE__ */ jsxDEV8(Chip, {
+  if (compact) {
+    return /* @__PURE__ */ jsxDEV9(Icon, {
+      icon: Component,
+      color: "domain" /* domain */,
+      tooltip: {
+        content: /* @__PURE__ */ jsxDEV9(DomainHierarchyContent, {
+          allDomains
+        }, undefined, false, undefined, this),
+        title: "Action Domain",
+        align: "edge"
+      }
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV9(Chip, {
     color: "domain" /* domain */,
     subtle,
     size,
     rounded: true,
     tooltip: {
-      content: /* @__PURE__ */ jsxDEV8(DomainHierarchyContent, {
+      content: /* @__PURE__ */ jsxDEV9(DomainHierarchyContent, {
         allDomains
       }, undefined, false, undefined, this),
       title: "Action Domain",
@@ -3052,17 +3457,20 @@ function DomainChip({
     },
     style: { display: "flex", alignItems: "center", gap: "0.4em" },
     children: [
-      /* @__PURE__ */ jsxDEV8("span", {
+      /* @__PURE__ */ jsxDEV9("span", {
         style: {
-          height: "0.6em",
-          width: "0.6em",
+          height: "1.2em",
+          width: "1.2em",
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
         },
-        children: "⬢"
+        children: /* @__PURE__ */ jsxDEV9(Component, {
+          height: "1.2em",
+          width: "1.2em"
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV8("span", {
+      /* @__PURE__ */ jsxDEV9("span", {
         children: domain
       }, undefined, false, undefined, this)
     ]
@@ -3070,7 +3478,7 @@ function DomainChip({
 }
 
 // src/devtools/browser/components/HandlerChips.tsx
-import { jsxDEV as jsxDEV9, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV10, Fragment as Fragment5 } from "react/jsx-dev-runtime";
 function getExternalLabel(hop) {
   if (hop.handlerType !== "external")
     return null;
@@ -3081,15 +3489,15 @@ function HandlerChips({ entry, size, subtle }) {
   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, {
+  return /* @__PURE__ */ jsxDEV10(Fragment5, {
     children: [
-      localEnvId != null && (firstHopIsLocal || externalLabel == null) && /* @__PURE__ */ jsxDEV9(Chip, {
+      localEnvId != null && (firstHopIsLocal || externalLabel == null) && /* @__PURE__ */ jsxDEV10(Chip, {
         color: "handler_local" /* handler_local */,
         size,
         subtle,
         children: localEnvId
       }, undefined, false, undefined, this),
-      externalLabel != null && /* @__PURE__ */ jsxDEV9(Chip, {
+      externalLabel != null && /* @__PURE__ */ jsxDEV10(Chip, {
         color: "handler_external" /* handler_external */,
         size,
         subtle,
@@ -3100,15 +3508,15 @@ function HandlerChips({ entry, size, subtle }) {
 }
 
 // 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";
+import { useEffect as useEffect2, useState as useState5 } from "react";
+import { jsxDEV as jsxDEV11, Fragment as Fragment6 } from "react/jsx-dev-runtime";
 function RunningTimer({ startTime }) {
-  const [elapsed, setElapsed] = useState4(() => Date.now() - startTime);
+  const [elapsed, setElapsed] = useState5(() => Date.now() - startTime);
   useEffect2(() => {
     const interval = setInterval(() => setElapsed(Date.now() - startTime), 100);
     return () => clearInterval(interval);
   }, [startTime]);
-  return /* @__PURE__ */ jsxDEV10(Fragment5, {
+  return /* @__PURE__ */ jsxDEV11(Fragment6, {
     children: [
       elapsed,
       "ms"
@@ -3117,15 +3525,15 @@ function RunningTimer({ startTime }) {
 }
 function DurationDisplay({ entry }) {
   const d = formatDuration(entry);
-  return /* @__PURE__ */ jsxDEV10(Fragment5, {
-    children: d ?? /* @__PURE__ */ jsxDEV10(RunningTimer, {
+  return /* @__PURE__ */ jsxDEV11(Fragment6, {
+    children: d ?? /* @__PURE__ */ jsxDEV11(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";
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
 function getCalledLabel(entry) {
   const firstHop = entry.meta.routing[0];
   if (firstHop == null)
@@ -3153,7 +3561,7 @@ function CallStackLink({
   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", {
+  return /* @__PURE__ */ jsxDEV12("div", {
     onClick,
     style: {
       background: isFocused ? DEVTOOL_SECTION_BACKGROUND : DEVTOOL_DETAIL_HEADER_BACKGROUND,
@@ -3167,21 +3575,21 @@ function CallStackLink({
       cursor: "pointer"
     },
     children: [
-      /* @__PURE__ */ jsxDEV11("span", {
+      /* @__PURE__ */ jsxDEV12("span", {
         style: { display: "flex", alignItems: "center", gap: "1em", flexShrink: 0 },
         children: [
-          /* @__PURE__ */ jsxDEV11("span", {
+          /* @__PURE__ */ jsxDEV12("span", {
             style: { color, fontSize: "10px", flexShrink: 0 },
             children: symbol
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11("span", {
+          /* @__PURE__ */ jsxDEV12("span", {
             style: { color: labelColor, fontSize: "9px", flexShrink: 0 },
             children: label
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11("span", {
+          /* @__PURE__ */ jsxDEV12("span", {
             style: { display: "flex", alignItems: "center", gap: "5px" },
             children: [
-              /* @__PURE__ */ jsxDEV11("span", {
+              /* @__PURE__ */ jsxDEV12("span", {
                 style: {
                   color: DEVTOOL_COLOR_TEXT_SECONDARY,
                   fontSize: "11px",
@@ -3191,7 +3599,7 @@ function CallStackLink({
                 },
                 children: entry.actionId
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV11(DomainChip, {
+              /* @__PURE__ */ jsxDEV12(DomainChip, {
                 domain: entry.domain,
                 allDomains: entry.allDomains,
                 size: "sm" /* sm */
@@ -3200,14 +3608,14 @@ function CallStackLink({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV11("span", {
+      /* @__PURE__ */ jsxDEV12("span", {
         style: {
           color: DEVTOOL_COLOR_TEXT_FAINT,
           fontSize: "10px",
           textAlign: "right",
           whiteSpace: "nowrap"
         },
-        children: /* @__PURE__ */ jsxDEV11(DurationDisplay, {
+        children: /* @__PURE__ */ jsxDEV12(DurationDisplay, {
           entry
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
@@ -3223,15 +3631,15 @@ function CallStackSection({
 }) {
   if (parent == null && childEntries.length === 0)
     return null;
-  return /* @__PURE__ */ jsxDEV11("div", {
+  return /* @__PURE__ */ jsxDEV12("div", {
     children: [
-      parent != null && /* @__PURE__ */ jsxDEV11(CallStackLink, {
+      parent != null && /* @__PURE__ */ jsxDEV12(CallStackLink, {
         entry: parent,
         entryRole: "caller",
         isFocused: false,
         onClick: () => onSelectParent(parent.cuid)
       }, undefined, false, undefined, this),
-      childEntries.map((child) => /* @__PURE__ */ jsxDEV11(CallStackLink, {
+      childEntries.map((child) => /* @__PURE__ */ jsxDEV12(CallStackLink, {
         entry: child,
         entryRole: "called",
         isFocused: focusedChildCuid === child.cuid,
@@ -3242,7 +3650,7 @@ function CallStackSection({
 }
 
 // src/devtools/browser/components/ChildDispatchChips.tsx
-import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
 function ChildDispatchChips({
   childRouteItems,
   size = "sm" /* sm */
@@ -3262,12 +3670,12 @@ function ChildDispatchChips({
       group.transports.push(transport);
     }
   }
-  return /* @__PURE__ */ jsxDEV12("div", {
+  return /* @__PURE__ */ jsxDEV13("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, {
+      return /* @__PURE__ */ jsxDEV13(Chip, {
         color: "handler_external" /* handler_external */,
         size,
         children: label
@@ -3277,20 +3685,20 @@ function ChildDispatchChips({
 }
 
 // src/devtools/browser/components/MetaSection.tsx
-import { useState as useState5 } from "react";
-import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+import { useState as useState6 } from "react";
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
 function MetaChip({ label, value }) {
-  return /* @__PURE__ */ jsxDEV13("span", {
+  return /* @__PURE__ */ jsxDEV14("span", {
     style: { whiteSpace: "nowrap" },
     children: [
-      /* @__PURE__ */ jsxDEV13("span", {
+      /* @__PURE__ */ jsxDEV14("span", {
         style: { color: DEVTOOL_COLOR_TEXT_MUTED },
         children: [
           label,
           " "
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV13("span", {
+      /* @__PURE__ */ jsxDEV14("span", {
         style: { color: DEVTOOL_COLOR_TEXT_SECONDARY },
         children: value
       }, undefined, false, undefined, this)
@@ -3298,7 +3706,7 @@ function MetaChip({ label, value }) {
   }, undefined, true, undefined, this);
 }
 function MetaSection({ entry }) {
-  const [expanded, setExpanded] = useState5(false);
+  const [expanded, setExpanded] = useState6(false);
   const { meta, cuid } = entry;
   const expandedRows = [
     { label: "cuid", value: cuid },
@@ -3306,9 +3714,9 @@ function MetaSection({ entry }) {
     ...meta.originClient.perId != null ? [{ label: "perId", value: meta.originClient.perId }] : [],
     ...meta.originClient.insId != null ? [{ label: "insId", value: meta.originClient.insId }] : []
   ];
-  return /* @__PURE__ */ jsxDEV13("div", {
+  return /* @__PURE__ */ jsxDEV14("div", {
     children: [
-      /* @__PURE__ */ jsxDEV13("div", {
+      /* @__PURE__ */ jsxDEV14("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -3316,7 +3724,7 @@ function MetaSection({ entry }) {
           marginBottom: "3px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV13("div", {
+          /* @__PURE__ */ jsxDEV14("div", {
             style: {
               color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
               fontSize: "10px",
@@ -3325,13 +3733,13 @@ function MetaSection({ entry }) {
             },
             children: "Meta"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV13("span", {
+          /* @__PURE__ */ jsxDEV14("span", {
             style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "11px" },
             children: expanded ? "▾" : "▸"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      expanded ? /* @__PURE__ */ jsxDEV13("div", {
+      expanded ? /* @__PURE__ */ jsxDEV14("div", {
         onClick: () => setExpanded(false),
         style: {
           background: DEVTOOL_SECTION_BACKGROUND,
@@ -3339,7 +3747,7 @@ function MetaSection({ entry }) {
           overflow: "hidden",
           cursor: "pointer"
         },
-        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV13("div", {
+        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV14("div", {
           style: {
             display: "grid",
             gridTemplateColumns: "52px 1fr",
@@ -3349,11 +3757,11 @@ function MetaSection({ entry }) {
             alignItems: "start"
           },
           children: [
-            /* @__PURE__ */ jsxDEV13("span", {
+            /* @__PURE__ */ jsxDEV14("span", {
               style: { textAlign: "left", color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", paddingTop: "1px" },
               children: label
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV13("span", {
+            /* @__PURE__ */ jsxDEV14("span", {
               style: {
                 textAlign: "left",
                 color: DEVTOOL_COLOR_TEXT_SECONDARY,
@@ -3364,7 +3772,7 @@ function MetaSection({ entry }) {
             }, undefined, false, undefined, this)
           ]
         }, label, true, undefined, this))
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV13("div", {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV14("div", {
         onClick: () => setExpanded(true),
         style: {
           background: DEVTOOL_SECTION_BACKGROUND,
@@ -3378,19 +3786,19 @@ function MetaSection({ entry }) {
           cursor: "pointer"
         },
         children: [
-          /* @__PURE__ */ jsxDEV13(MetaChip, {
+          /* @__PURE__ */ jsxDEV14(MetaChip, {
             label: "cuid",
             value: `…${cuid.slice(-8)}`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV13(MetaChip, {
+          /* @__PURE__ */ jsxDEV14(MetaChip, {
             label: "runtime",
             value: meta.originClient.envId
           }, undefined, false, undefined, this),
-          meta.originClient.perId != null && /* @__PURE__ */ jsxDEV13(MetaChip, {
+          meta.originClient.perId != null && /* @__PURE__ */ jsxDEV14(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, {
+          meta.originClient.insId != null && /* @__PURE__ */ jsxDEV14(MetaChip, {
             label: "insId",
             value: meta.originClient.insId.length > 10 ? `${meta.originClient.insId.slice(0, 10)}…` : meta.originClient.insId
           }, undefined, false, undefined, this)
@@ -3401,7 +3809,7 @@ function MetaSection({ entry }) {
 }
 
 // src/devtools/browser/components/RoutingSection.tsx
-import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
 function RoutingSection({
   entry,
   minHopCount = 0
@@ -3411,12 +3819,12 @@ function RoutingSection({
   const phantomCount = Math.max(0, minHopCount - hopCount);
   if (hopCount === 0 && phantomCount === 0)
     return null;
-  return /* @__PURE__ */ jsxDEV14("div", {
+  return /* @__PURE__ */ jsxDEV15("div", {
     children: [
-      /* @__PURE__ */ jsxDEV14(SectionLabel, {
+      /* @__PURE__ */ jsxDEV15(SectionLabel, {
         label: hopCount > 0 ? `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}` : "Routing"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV14("div", {
+      /* @__PURE__ */ jsxDEV15("div", {
         style: { display: "flex", flexDirection: "column", gap: "2px" },
         children: [
           meta.routing.map((hop, i) => {
@@ -3425,7 +3833,7 @@ function RoutingSection({
             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", {
+            return /* @__PURE__ */ jsxDEV15("div", {
               style: {
                 background: DEVTOOL_SECTION_BACKGROUND,
                 borderRadius: "4px",
@@ -3438,14 +3846,14 @@ function RoutingSection({
                 padding: "4px 8px"
               },
               children: [
-                /* @__PURE__ */ jsxDEV14("span", {
+                /* @__PURE__ */ jsxDEV15("span", {
                   style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                   children: [
-                    /* @__PURE__ */ jsxDEV14("span", {
+                    /* @__PURE__ */ jsxDEV15("span", {
                       style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", width: "16px", textAlign: "right" },
                       children: i + 1
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV14("span", {
+                    /* @__PURE__ */ jsxDEV15("span", {
                       title: runtimeTitle,
                       style: {
                         color: DEVTOOL_COLOR_TEXT_SECONDARY,
@@ -3459,11 +3867,11 @@ function RoutingSection({
                     }, undefined, false, undefined, this)
                   ]
                 }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV14("span", {
+                /* @__PURE__ */ jsxDEV15("span", {
                   style: { color: badgeColor, fontSize: "10px", whiteSpace: "nowrap" },
                   children: badgeText
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV14("span", {
+                /* @__PURE__ */ jsxDEV15("span", {
                   style: {
                     display: "flex",
                     alignItems: "center",
@@ -3472,7 +3880,7 @@ function RoutingSection({
                     overflow: "hidden"
                   },
                   children: [
-                    /* @__PURE__ */ jsxDEV14("span", {
+                    /* @__PURE__ */ jsxDEV15("span", {
                       style: {
                         color: DEVTOOL_COLOR_TEXT_MUTED,
                         fontSize: "10px",
@@ -3482,7 +3890,7 @@ function RoutingSection({
                       },
                       children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV14("span", {
+                    /* @__PURE__ */ jsxDEV15("span", {
                       style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", flexShrink: 0, marginLeft: "auto" },
                       children: [
                         "+",
@@ -3495,7 +3903,7 @@ function RoutingSection({
               ]
             }, `${hop.time}-${hop.runtime.envId}`, true, undefined, this);
           }),
-          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxDEV14("div", {
+          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxDEV15("div", {
             "aria-hidden": "true",
             style: {
               visibility: "hidden",
@@ -3508,24 +3916,24 @@ function RoutingSection({
               padding: "4px 8px"
             },
             children: [
-              /* @__PURE__ */ jsxDEV14("span", {
+              /* @__PURE__ */ jsxDEV15("span", {
                 style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                 children: [
-                  /* @__PURE__ */ jsxDEV14("span", {
+                  /* @__PURE__ */ jsxDEV15("span", {
                     style: { fontSize: "10px", width: "16px" },
                     children: "0"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV14("span", {
+                  /* @__PURE__ */ jsxDEV15("span", {
                     style: { fontSize: "11px" },
                     children: "placeholder"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV14("span", {
+              /* @__PURE__ */ jsxDEV15("span", {
                 style: { fontSize: "10px" },
                 children: "placeholder"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV14("span", {}, undefined, false, undefined, this)
+              /* @__PURE__ */ jsxDEV15("span", {}, undefined, false, undefined, this)
             ]
           }, key, true, undefined, this))
         ]
@@ -3535,7 +3943,7 @@ function RoutingSection({
 }
 
 // src/devtools/browser/components/action_detail/ActionDetailPanel.tsx
-import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
 var STATUS_BADGE_LABEL = {
   running: "RUNNING",
   success: "SUCCESS",
@@ -3566,7 +3974,7 @@ function DetailHeader({
   const color = STATUS_COLOR[entry.status];
   const StatusIconComponent = STATUS_ICON[entry.status];
   const timestamp = formatTimestamp(entry.startTime);
-  return /* @__PURE__ */ jsxDEV15("div", {
+  return /* @__PURE__ */ jsxDEV16("div", {
     onClick: !isActive ? onClick : undefined,
     style: {
       padding: "0.5em 1em",
@@ -3580,13 +3988,13 @@ function DetailHeader({
       gap: "1em",
       cursor: isActive ? "default" : "pointer"
     },
-    children: /* @__PURE__ */ jsxDEV15("div", {
+    children: /* @__PURE__ */ jsxDEV16("div", {
       style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "0.5em" },
       children: [
-        /* @__PURE__ */ jsxDEV15("div", {
+        /* @__PURE__ */ jsxDEV16("div", {
           style: { display: "flex", alignItems: "center", minWidth: 0, gap: "0.5em" },
           children: [
-            /* @__PURE__ */ jsxDEV15("span", {
+            /* @__PURE__ */ jsxDEV16("span", {
               style: {
                 color,
                 flexShrink: 0,
@@ -3594,12 +4002,12 @@ function DetailHeader({
                 alignItems: "center",
                 animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
               },
-              children: /* @__PURE__ */ jsxDEV15(StatusIconComponent, {
+              children: /* @__PURE__ */ jsxDEV16(StatusIconComponent, {
                 size: 20,
                 strokeWidth: 1.75
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV15("span", {
+            /* @__PURE__ */ jsxDEV16("span", {
               style: {
                 color: DEVTOOL_COLOR_TEXT_EMPHASIS,
                 fontSize: "1.2em",
@@ -3613,7 +4021,7 @@ function DetailHeader({
               },
               children: entry.actionId
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV15("span", {
+            /* @__PURE__ */ jsxDEV16("span", {
               style: {
                 flexShrink: 0,
                 padding: "2px 9px",
@@ -3628,14 +4036,14 @@ function DetailHeader({
               },
               children: STATUS_BADGE_LABEL[entry.status]
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV15(DomainChip, {
+            /* @__PURE__ */ jsxDEV16(DomainChip, {
               domain: entry.domain,
               allDomains: entry.allDomains,
               size: "md" /* md */
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV15("div", {
+        /* @__PURE__ */ jsxDEV16("div", {
           style: {
             display: "flex",
             alignItems: "center",
@@ -3643,7 +4051,7 @@ function DetailHeader({
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ jsxDEV15("div", {
+            /* @__PURE__ */ jsxDEV16("div", {
               style: {
                 display: "flex",
                 alignItems: "center",
@@ -3652,20 +4060,20 @@ function DetailHeader({
                 overflow: "hidden"
               },
               children: [
-                /* @__PURE__ */ jsxDEV15(HandlerChips, {
+                /* @__PURE__ */ jsxDEV16(HandlerChips, {
                   entry,
                   size: "md" /* md */
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV15(ChildDispatchChips, {
+                /* @__PURE__ */ jsxDEV16(ChildDispatchChips, {
                   childRouteItems: childExternalRouteItems,
                   size: "md" /* md */
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV15("div", {
+            /* @__PURE__ */ jsxDEV16("div", {
               style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 },
               children: [
-                /* @__PURE__ */ jsxDEV15("span", {
+                /* @__PURE__ */ jsxDEV16("span", {
                   style: {
                     color: DEVTOOL_COLOR_SEMANTIC_METADATA,
                     fontSize: "10px",
@@ -3674,9 +4082,9 @@ function DetailHeader({
                   },
                   children: timestamp
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV15("span", {
+                /* @__PURE__ */ jsxDEV16("span", {
                   style: { color, fontSize: "12px", fontWeight: "500" },
-                  children: /* @__PURE__ */ jsxDEV15(DurationDisplay, {
+                  children: /* @__PURE__ */ jsxDEV16(DurationDisplay, {
                     entry
                   }, undefined, false, undefined, this)
                 }, undefined, false, undefined, this)
@@ -3694,10 +4102,10 @@ function ActionDetailPanel({
   childEntries,
   onSelectEntry
 }) {
-  const [focusedChildCuid, setFocusedChildCuid] = useState6(null);
+  const [focusedChildCuid, setFocusedChildCuid] = useState7(null);
   const focusedEntry = focusedChildCuid != null ? childEntries.find((e) => e.cuid === focusedChildCuid) ?? entry : entry;
   const maxRoutingHops = Math.max(entry.meta.routing.length, ...childEntries.map((e) => e.meta.routing.length), 0);
-  const maxCallSiteFrames = Math.max(countUserFrames(entry.callSite), ...childEntries.map((e) => countUserFrames(e.callSite)), 0);
+  const maxCallSiteFrames = Math.max(countUserFrames(entry.meta.originClient, entry.callSite), ...childEntries.map((e) => countUserFrames(e.meta.originClient, e.callSite)), 0);
   const childExternalRouteItems = useMemo(() => {
     const seen = new Set;
     const result = [];
@@ -3716,7 +4124,7 @@ function ActionDetailPanel({
   const handleFocusChild = (cuid) => {
     setFocusedChildCuid((prev) => prev === cuid ? null : cuid);
   };
-  return /* @__PURE__ */ jsxDEV15("div", {
+  return /* @__PURE__ */ jsxDEV16("div", {
     style: {
       flex: 1,
       display: "flex",
@@ -3726,20 +4134,20 @@ function ActionDetailPanel({
       background: DEVTOOL_DETAIL_BASE_BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsxDEV15(DetailHeader, {
+      /* @__PURE__ */ jsxDEV16(DetailHeader, {
         entry,
         isActive: focusedChildCuid === null,
         onClick: () => setFocusedChildCuid(null),
         childExternalRouteItems
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV15(CallStackSection, {
+      /* @__PURE__ */ jsxDEV16(CallStackSection, {
         parent,
         childEntries,
         focusedChildCuid,
         onFocusChild: handleFocusChild,
         onSelectParent: onSelectEntry
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV15("div", {
+      /* @__PURE__ */ jsxDEV16("div", {
         style: {
           flex: 1,
           overflowY: "auto",
@@ -3750,36 +4158,37 @@ function ActionDetailPanel({
           gap: "8px"
         },
         children: [
-          focusedEntry.input !== undefined ? /* @__PURE__ */ jsxDEV15(DetailSection, {
+          focusedEntry.input !== undefined ? /* @__PURE__ */ jsxDEV16(DetailSection, {
             label: "Input",
             value: focusedEntry.input
-          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15(DetailSection, {
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV16(DetailSection, {
             label: "Input",
             value: "No input required or given"
           }, undefined, false, undefined, this),
-          focusedEntry.status === "success" && /* @__PURE__ */ jsxDEV15(DetailSection, {
+          focusedEntry.status === "success" && /* @__PURE__ */ jsxDEV16(DetailSection, {
             label: "Output",
             value: focusedEntry.output,
             color: DEVTOOL_COLOR_SEMANTIC_SUCCESS
           }, undefined, false, undefined, this),
-          (focusedEntry.status === "action-error" || focusedEntry.status === "failed" || focusedEntry.status === "aborted") && /* @__PURE__ */ jsxDEV15(ActionErrorDisplay, {
+          (focusedEntry.status === "action-error" || focusedEntry.status === "failed" || focusedEntry.status === "aborted") && /* @__PURE__ */ jsxDEV16(ActionErrorDisplay, {
             entry: focusedEntry
           }, undefined, false, undefined, this),
-          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV15(DetailSection, {
+          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV16(DetailSection, {
             label: `Progress (${focusedEntry.progressUpdates.length})`,
             value: focusedEntry.progressUpdates
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV15(StackTraceSection, {
+          /* @__PURE__ */ jsxDEV16(StackTraceSection, {
+            runtime: entry.meta.originClient,
             label: "Dispatch Site",
             stack: focusedEntry.callSite,
             color: DEVTOOL_COLOR_TEXT_SECONDARY,
             minFrameCount: maxCallSiteFrames
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV15(RoutingSection, {
+          /* @__PURE__ */ jsxDEV16(RoutingSection, {
             entry: focusedEntry,
             minHopCount: maxRoutingHops
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV15(MetaSection, {
+          /* @__PURE__ */ jsxDEV16(MetaSection, {
             entry: focusedEntry
           }, undefined, false, undefined, this)
         ]
@@ -3791,59 +4200,6 @@ function ActionDetailPanel({
 // src/devtools/browser/components/action_list/ActionEntryRow.tsx
 import { Box, CircleX as CircleX2, Variable } from "lucide-react";
 import { Fragment as Fragment7, 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 Fragment8 } from "react/jsx-dev-runtime";
 function getLatestChipColor(status) {
   if (status === "failed")
@@ -4034,8 +4390,6 @@ function ActionEntryRow({
   selectedGroupCuid,
   onSelectGroupEntry
 }) {
-  const statusSemantic = STATUS_THING[entry.status];
-  const statusIcon = STATUS_ICON[entry.status];
   const timestamp = formatTimestamp(entry.startTime);
   const hasGroup = groupEntries != null && groupEntries.length > 1;
   const hasBottomContent = childEntries != null && childEntries.length > 0 || (breakReasons?.some((r) => r !== "new input" && r !== "new output") ?? false) || entry.error != null || entry.abortReason != null;
@@ -4047,7 +4401,7 @@ function ActionEntryRow({
       display: "flex",
       flexDirection: "column",
       gap: "5px",
-      padding: "10px 12px",
+      padding: "0.5em 0.6em",
       cursor: "pointer",
       background: isSelected ? DEVTOOL_LIST_HEADER_SELECTED_BACKGROUND : "transparent",
       border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
@@ -4076,12 +4430,13 @@ function ActionEntryRow({
               position: "relative",
               zIndex: 1,
               flexShrink: 0,
-              minWidth: "4em",
+              minWidth: "3.4em",
               display: "flex",
               alignItems: "center",
               justifyContent: "flex-start"
             },
             children: isLatest ? /* @__PURE__ */ jsxDEV17(Chip, {
+              size: "sm" /* sm */,
               color: getLatestChipColor(entry.status),
               children: "latest"
             }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17(Chip, {
@@ -4099,7 +4454,8 @@ function ActionEntryRow({
               /* @__PURE__ */ jsxDEV17("span", {
                 style: {
                   color: DEVTOOL_COLOR_TEXT_SECONDARY,
-                  fontSize: "1.1em",
+                  fontSize: "1em",
+                  fontWeight: 400,
                   fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
@@ -4109,10 +4465,6 @@ function ActionEntryRow({
                 },
                 children: entry.actionId
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17(DomainChip, {
-                domain: entry.domain,
-                allDomains: entry.allDomains
-              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV17(Icon, {
                 icon: Variable,
                 color: entry.input !== undefined ? "io_input" /* io_input */ : "default" /* default */,
@@ -4828,7 +5180,7 @@ function ActionList({
   childEntriesMap,
   style
 }) {
-  const containerRef = useRef(null);
+  const containerRef = useRef2(null);
   const latestTime = groups[0]?.representative.startTime;
   const flatItems = useMemo2(() => {
     return groups.map((group, gi) => {
@@ -4842,7 +5194,7 @@ function ActionList({
       return { group, groupIndex: gi, breakReasons };
     });
   }, [groups]);
-  const prevSelectedRef = useRef(selectedCuid);
+  const prevSelectedRef = useRef2(selectedCuid);
   useEffect3(() => {
     if (selectedCuid === prevSelectedRef.current)
       return;