@nice-code/action 0.2.18 → 0.3.0

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 useEffect4, useMemo as useMemo3, 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";
 
@@ -2970,6 +3310,8 @@ function Chip({
         onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
         onMouseLeave: hasTooltip ? () => setAnchor(null) : undefined,
         style: {
+          display: "flex",
+          alignItems: "center",
           color: resolvedColor,
           fontSize,
           background: DEVTOOL_LIST_BASE_BACKGROUND,
@@ -2991,13 +3333,73 @@ 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_EM = {
+  ["sm" /* sm */]: 1,
+  ["md" /* md */]: 1.2,
+  ["lg" /* lg */]: 1.6
+};
+var BASE_ICON_SIDE_LENGTH_EM = 1.5;
+var ICON_GAP_EM = 0.3;
+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;
+  const finalIcons = Array.isArray(IconComponent) ? IconComponent : [IconComponent];
+  const fullIconWidthEm = (finalIcons.length - 1) * ICON_GAP_EM + finalIcons.length * BASE_ICON_SIDE_LENGTH_EM * getSizeValue(size);
+  const iconSideLengthEm = `${BASE_ICON_SIDE_LENGTH_EM * getSizeValue(size)}em`;
   return /* @__PURE__ */ jsxDEV8(Fragment3, {
+    children: [
+      /* @__PURE__ */ jsxDEV8("div", {
+        onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
+        onMouseLeave: hasTooltip ? () => setAnchor(null) : undefined,
+        style: {
+          borderRadius: "0.4em",
+          width: `${fullIconWidthEm}em`,
+          height: iconSideLengthEm,
+          padding: "0.15em",
+          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("div", {
+          style: { display: "flex", alignItems: "center", gap: `${ICON_GAP_EM}em` },
+          children: finalIcons.map((Comp, i) => /* @__PURE__ */ jsxDEV8(Comp, {
+            size: iconSideLengthEm,
+            strokeWidth: 2.3
+          }, `${Comp.name}-${i}`, false, undefined, this))
+        }, 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 +3408,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 +3421,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,44 +3435,63 @@ 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",
       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);
+    children: /* @__PURE__ */ jsxDEV9("div", {
+      style: { display: "flex", alignItems: "center", gap: "0.4em" },
+      children: [
+        /* @__PURE__ */ jsxDEV9("span", {
+          style: {
+            height: "1.2em",
+            width: "1.2em",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsxDEV9(Component, {
+            height: "1.2em",
+            width: "1.2em"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV9("span", {
+          children: domain
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
 
 // 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 +3502,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 +3521,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 +3538,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 +3574,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 +3588,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 +3612,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 +3621,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 +3644,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 +3663,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 +3683,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 +3698,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 +3719,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 +3727,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 +3737,7 @@ function MetaSection({ entry }) {
           marginBottom: "3px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV13("div", {
+          /* @__PURE__ */ jsxDEV14("div", {
             style: {
               color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
               fontSize: "10px",
@@ -3325,13 +3746,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 +3760,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 +3770,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 +3785,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 +3799,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 +3822,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 +3832,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 +3846,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 +3859,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 +3880,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 +3893,7 @@ function RoutingSection({
                     overflow: "hidden"
                   },
                   children: [
-                    /* @__PURE__ */ jsxDEV14("span", {
+                    /* @__PURE__ */ jsxDEV15("span", {
                       style: {
                         color: DEVTOOL_COLOR_TEXT_MUTED,
                         fontSize: "10px",
@@ -3482,7 +3903,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 +3916,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 +3929,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 +3956,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 +3987,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 +4001,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 +4015,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 +4034,7 @@ function DetailHeader({
               },
               children: entry.actionId
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV15("span", {
+            /* @__PURE__ */ jsxDEV16("span", {
               style: {
                 flexShrink: 0,
                 padding: "2px 9px",
@@ -3628,14 +4049,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 +4064,7 @@ function DetailHeader({
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ jsxDEV15("div", {
+            /* @__PURE__ */ jsxDEV16("div", {
               style: {
                 display: "flex",
                 alignItems: "center",
@@ -3652,20 +4073,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 +4095,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 +4115,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 +4137,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 +4147,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 +4171,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)
         ]
@@ -3788,72 +4210,18 @@ function ActionDetailPanel({
   }, undefined, true, undefined, this);
 }
 
+// src/devtools/browser/components/action_list/ActionList.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2 } from "react";
+
 // 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";
+import { Box as Box2, CircleX as CircleX3, Variable as Variable2 } from "lucide-react";
+import { Fragment as Fragment8, 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/ActionInputAndOutputChip.tsx
+import { Box, CircleX as CircleX2, Sprout, Variable } from "lucide-react";
 
-// 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")
-    return "failed" /* failed */;
-  if (status === "action-error")
-    return "action_error" /* action_error */;
-  if (status === "aborted")
-    return "aborted" /* aborted */;
-  return "success" /* success */;
-}
+// src/devtools/browser/components/action_list/IoTooltipContent.tsx
+import { jsxDEV as jsxDEV17, Fragment as Fragment7 } from "react/jsx-dev-runtime";
 var JSON_TOKEN_RE2 = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
 function renderColoredJson2(text) {
   const nodes = [];
@@ -3925,6 +4293,84 @@ function IoTooltipContent({ value }) {
     children: renderColoredJson2(text)
   }, undefined, false, undefined, this);
 }
+
+// src/devtools/browser/components/action_list/ActionInputAndOutputChip.tsx
+import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
+var ActionInputAndOutputChip = ({
+  entry,
+  breakReasons,
+  subtle,
+  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";
+  const isLocal = localEnvId != null && (firstHopIsLocal || externalLabel == null);
+  const color = isLocal ? "handler_local" /* handler_local */ : "handler_external" /* handler_external */;
+  const isNewInput = breakReasons.includes("new_input" /* new_input */);
+  const isNewOutput = breakReasons.includes("new_output" /* new_output */);
+  const hasError = entry.error != null || entry.abortReason != null;
+  return /* @__PURE__ */ jsxDEV18(Chip, {
+    color,
+    size,
+    subtle,
+    children: /* @__PURE__ */ jsxDEV18("div", {
+      style: { display: "flex", alignItems: "center", gap: "0.4em" },
+      children: [
+        /* @__PURE__ */ jsxDEV18(Icon, {
+          icon: isNewInput ? [Sprout, Variable] : Variable,
+          color,
+          subtle: subtle || entry.input === undefined,
+          tooltip: {
+            content: entry.input !== undefined ? /* @__PURE__ */ jsxDEV18(IoTooltipContent, {
+              value: entry.input
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV18("span", {
+              style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
+              children: "No input required or given"
+            }, undefined, false, undefined, this),
+            title: isNewInput ? "New Input" : "Input"
+          }
+        }, undefined, false, undefined, this),
+        isLocal ? localEnvId : externalLabel,
+        entry.status === "success" && entry.output !== undefined && /* @__PURE__ */ jsxDEV18(Icon, {
+          icon: isNewOutput ? [Sprout, Box] : Box,
+          color: !hasError ? color : "default" /* default */,
+          tooltip: {
+            content: /* @__PURE__ */ jsxDEV18(IoTooltipContent, {
+              value: entry.output
+            }, undefined, false, undefined, this),
+            title: isNewOutput ? "New Output" : "Output"
+          }
+        }, undefined, false, undefined, this),
+        (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsxDEV18(Icon, {
+          icon: CircleX2,
+          color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
+          tooltip: {
+            content: /* @__PURE__ */ jsxDEV18(ActionErrorDisplay, {
+              entry,
+              compact: true
+            }, undefined, false, undefined, this),
+            title: entry.status === "aborted" ? "Aborted" : "Error",
+            maxWidth: 340
+          }
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+};
+
+// src/devtools/browser/components/action_list/ActionEntryRow.tsx
+import { jsxDEV as jsxDEV19, Fragment as Fragment9 } 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 "success" /* success */;
+}
 function GroupDotTooltip({
   entry,
   index,
@@ -3937,14 +4383,14 @@ function GroupDotTooltip({
   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, {
+  return /* @__PURE__ */ jsxDEV19(Tooltip, {
     anchor,
     config: {
       align: "center",
       maxWidth: 240,
-      content: /* @__PURE__ */ jsxDEV17(Fragment8, {
+      content: /* @__PURE__ */ jsxDEV19(Fragment9, {
         children: [
-          /* @__PURE__ */ jsxDEV17("div", {
+          /* @__PURE__ */ jsxDEV19("div", {
             style: { color: dotColor, marginBottom: "1px" },
             children: [
               symbol,
@@ -3954,15 +4400,15 @@ function GroupDotTooltip({
               total
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV17("div", {
+          /* @__PURE__ */ jsxDEV19("div", {
             style: { color: DEVTOOL_COLOR_TEXT_SECONDARY },
             children: formatTimestamp(entry.startTime)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV17("div", {
+          /* @__PURE__ */ jsxDEV19("div", {
             style: { color: DEVTOOL_COLOR_TEXT_MUTED },
             children: durationStr
           }, undefined, false, undefined, this),
-          index > 0 && /* @__PURE__ */ jsxDEV17("div", {
+          index > 0 && /* @__PURE__ */ jsxDEV19("div", {
             style: {
               color: DEVTOOL_COLOR_TEXT_MUTED,
               marginTop: "3px",
@@ -3987,9 +4433,9 @@ function GroupDot({
   const [anchor, setAnchor] = useState8(null);
   const dotColor = STATUS_COLOR[entry.status];
   const hovered = anchor != null;
-  return /* @__PURE__ */ jsxDEV17(Fragment8, {
+  return /* @__PURE__ */ jsxDEV19(Fragment9, {
     children: [
-      /* @__PURE__ */ jsxDEV17("button", {
+      /* @__PURE__ */ jsxDEV19("button", {
         "data-cuid": entry.cuid,
         onClick: (e) => {
           e.stopPropagation();
@@ -4011,7 +4457,7 @@ function GroupDot({
           transition: "transform 0.1s ease, opacity 0.1s ease, border-color 0.1s ease"
         }
       }, undefined, false, undefined, this),
-      hovered && anchor != null && /* @__PURE__ */ jsxDEV17(GroupDotTooltip, {
+      hovered && anchor != null && /* @__PURE__ */ jsxDEV19(GroupDotTooltip, {
         entry,
         index,
         total,
@@ -4034,12 +4480,10 @@ 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;
-  return /* @__PURE__ */ jsxDEV17("div", {
+  const hasBottomContent = childEntries != null && childEntries.length > 0 || (breakReasons?.some((r) => r !== "new_input" /* new_input */ && r !== "new_output" /* new_output */) ?? false) || entry.error != null || entry.abortReason != null;
+  return /* @__PURE__ */ jsxDEV19("div", {
     "data-cuid": entry.cuid,
     onClick,
     style: {
@@ -4047,7 +4491,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}`,
@@ -4056,7 +4500,7 @@ function ActionEntryRow({
       margin: "2px 4px"
     },
     children: [
-      /* @__PURE__ */ jsxDEV17("div", {
+      /* @__PURE__ */ jsxDEV19("div", {
         style: {
           position: "absolute",
           left: "2em",
@@ -4068,23 +4512,24 @@ function ActionEntryRow({
           zIndex: 0
         }
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV17("div", {
+      /* @__PURE__ */ jsxDEV19("div", {
         style: { display: "flex", alignItems: "center", gap: "8px" },
         children: [
-          /* @__PURE__ */ jsxDEV17("div", {
+          /* @__PURE__ */ jsxDEV19("div", {
             style: {
               position: "relative",
               zIndex: 1,
               flexShrink: 0,
-              minWidth: "4em",
+              minWidth: "3.4em",
               display: "flex",
               alignItems: "center",
               justifyContent: "flex-start"
             },
-            children: isLatest ? /* @__PURE__ */ jsxDEV17(Chip, {
+            children: isLatest ? /* @__PURE__ */ jsxDEV19(Chip, {
+              size: "sm" /* sm */,
               color: getLatestChipColor(entry.status),
               children: "latest"
-            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17(Chip, {
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV19(Chip, {
               size: "sm" /* sm */,
               color: getLatestChipColor(entry.status),
               children: [
@@ -4093,13 +4538,14 @@ function ActionEntryRow({
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV17("div", {
+          /* @__PURE__ */ jsxDEV19("div", {
             style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: "0.5em" },
             children: [
-              /* @__PURE__ */ jsxDEV17("span", {
+              /* @__PURE__ */ jsxDEV19("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,51 +4555,14 @@ 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 */,
-                subtle: entry.input === undefined,
-                tooltip: {
-                  content: entry.input !== undefined ? /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
-                    value: entry.input
-                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17("span", {
-                    style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
-                    children: "No input required or given"
-                  }, undefined, false, undefined, this),
-                  title: "Input"
-                }
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17(HandlerChips, {
-                entry,
-                size: "sm" /* sm */
-              }, 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" }
+              /* @__PURE__ */ jsxDEV19(ActionInputAndOutputChip, {
+                breakReasons,
+                entry
               }, 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(ActionErrorDisplay, {
-                    entry,
-                    compact: true
-                  }, undefined, false, undefined, this),
-                  title: entry.status === "aborted" ? "Aborted" : "Error",
-                  maxWidth: 340
-                }
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17("div", {
+              /* @__PURE__ */ jsxDEV19("div", {
                 style: { flex: 1 }
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17("span", {
+              /* @__PURE__ */ jsxDEV19("span", {
                 style: {
                   color: DEVTOOL_COLOR_SEMANTIC_METADATA,
                   fontSize: "10px",
@@ -4163,9 +4572,9 @@ function ActionEntryRow({
                 },
                 children: timestamp
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17("span", {
+              /* @__PURE__ */ jsxDEV19("span", {
                 style: { color: DEVTOOL_COLOR_SEMANTIC_WARNING, fontSize: "11px", flexShrink: 0 },
-                children: /* @__PURE__ */ jsxDEV17(DurationDisplay, {
+                children: /* @__PURE__ */ jsxDEV19(DurationDisplay, {
                   entry
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
@@ -4173,7 +4582,7 @@ function ActionEntryRow({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      hasBottomContent && /* @__PURE__ */ jsxDEV17("div", {
+      hasBottomContent && /* @__PURE__ */ jsxDEV19("div", {
         style: {
           display: "flex",
           flexWrap: "wrap",
@@ -4182,33 +4591,35 @@ function ActionEntryRow({
           paddingLeft: "4.5em"
         },
         children: [
-          childEntries?.map((child) => /* @__PURE__ */ jsxDEV17(Fragment7, {
+          childEntries?.map((child) => /* @__PURE__ */ jsxDEV19(Fragment8, {
             children: [
-              /* @__PURE__ */ jsxDEV17(Icon, {
-                icon: Variable,
+              /* @__PURE__ */ jsxDEV19(Icon, {
+                size: "sm" /* sm */,
+                icon: Variable2,
                 color: "io_input" /* io_input */,
                 subtle: true,
                 tooltip: {
-                  content: child.input !== undefined ? /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
+                  content: child.input !== undefined ? /* @__PURE__ */ jsxDEV19(IoTooltipContent, {
                     value: child.input
-                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17("span", {
+                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV19("span", {
                     style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
                     children: "No input required or given"
                   }, undefined, false, undefined, this),
                   title: `Input · ${child.actionId}`
                 }
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17(HandlerChips, {
+              /* @__PURE__ */ jsxDEV19(HandlerChips, {
                 entry: child,
                 size: "sm" /* sm */,
                 subtle: true
               }, undefined, false, undefined, this),
-              child.status === "success" && child.output !== undefined && /* @__PURE__ */ jsxDEV17(Icon, {
-                icon: Box,
+              child.status === "success" && child.output !== undefined && /* @__PURE__ */ jsxDEV19(Icon, {
+                size: "sm" /* sm */,
+                icon: Box2,
                 color: "io_output" /* io_output */,
                 subtle: true,
                 tooltip: {
-                  content: /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
+                  content: /* @__PURE__ */ jsxDEV19(IoTooltipContent, {
                     value: child.output
                   }, undefined, false, undefined, this),
                   title: `Output · ${child.actionId}`
@@ -4216,17 +4627,17 @@ function ActionEntryRow({
               }, undefined, false, undefined, this)
             ]
           }, child.actionId, true, undefined, this)),
-          breakReasons?.filter((r) => r !== "new input" && r !== "new output").map((reason) => /* @__PURE__ */ jsxDEV17(Chip, {
+          breakReasons?.filter((r) => r !== "new_input" /* new_input */ && r !== "new_output" /* new_output */).map((reason) => /* @__PURE__ */ jsxDEV19(Chip, {
             color: "default" /* default */,
             subtle: true,
             children: reason
           }, reason, false, undefined, this)),
-          (childEntries?.length ?? 0) > 0 && (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsxDEV17(Icon, {
-            icon: CircleX2,
+          (childEntries?.length ?? 0) > 0 && (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsxDEV19(Icon, {
+            icon: CircleX3,
             color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
             subtle: true,
             tooltip: {
-              content: /* @__PURE__ */ jsxDEV17(ActionErrorDisplay, {
+              content: /* @__PURE__ */ jsxDEV19(ActionErrorDisplay, {
                 entry,
                 compact: true
               }, undefined, false, undefined, this),
@@ -4236,7 +4647,7 @@ function ActionEntryRow({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      hasGroup && /* @__PURE__ */ jsxDEV17("div", {
+      hasGroup && /* @__PURE__ */ jsxDEV19("div", {
         style: {
           display: "flex",
           flexWrap: "wrap",
@@ -4245,7 +4656,7 @@ function ActionEntryRow({
           paddingLeft: "4.6em",
           paddingBottom: "2px"
         },
-        children: groupEntries.map((e, i) => /* @__PURE__ */ jsxDEV17(GroupDot, {
+        children: groupEntries.map((e, i) => /* @__PURE__ */ jsxDEV19(GroupDot, {
           entry: e,
           index: i,
           total: groupEntries.length,
@@ -4258,8 +4669,124 @@ function ActionEntryRow({
   }, undefined, true, undefined, this);
 }
 
+// src/devtools/browser/components/action_list/ActionList.tsx
+import { jsxDEV as jsxDEV20 } from "react/jsx-dev-runtime";
+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" /* new_input */);
+  const outputChanged = current.outputHash != null && previous.outputHash != null && current.outputHash !== previous.outputHash;
+  if (outputChanged)
+    reasons.push("new_output" /* new_output */);
+  return reasons;
+}
+function getGroupChildEntries(group, childEntriesMap) {
+  const seen = new Set;
+  const result = [];
+  for (const e of [group.representative, ...group.rest]) {
+    for (const child of childEntriesMap.get(e.cuid) ?? []) {
+      if (!seen.has(child.actionId)) {
+        seen.add(child.actionId);
+        result.push(child);
+      }
+    }
+  }
+  return result.length > 0 ? result.sort((a, b) => a.startTime - b.startTime) : undefined;
+}
+function getFlatItemKey(item) {
+  const oldestCuid = item.group.rest[item.group.rest.length - 1]?.cuid ?? item.group.representative.cuid;
+  return `g:${oldestCuid}`;
+}
+function ActionList({
+  groups,
+  selectedCuid,
+  onGroupClick,
+  onSubClick,
+  childEntriesMap,
+  style
+}) {
+  const containerRef = useRef2(null);
+  const latestTime = groups[0]?.representative.startTime;
+  const flatItems = useMemo2(() => {
+    return groups.map((group, gi) => {
+      const prevGroup = groups[gi + 1];
+      let breakReasons = [];
+      if (prevGroup != null && prevGroup.representative.actionId === group.representative.actionId && prevGroup.representative.domain === group.representative.domain) {
+        const reasons = getBreakReasons(group.representative, prevGroup.representative);
+        if (reasons.length > 0)
+          breakReasons = reasons;
+      }
+      return { group, groupIndex: gi, breakReasons };
+    });
+  }, [groups]);
+  const prevSelectedRef = useRef2(selectedCuid);
+  useEffect3(() => {
+    if (selectedCuid === prevSelectedRef.current)
+      return;
+    prevSelectedRef.current = selectedCuid;
+    if (selectedCuid == null)
+      return;
+    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__ */ jsxDEV20("div", {
+      style,
+      children: /* @__PURE__ */ jsxDEV20("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__ */ jsxDEV20("div", {
+    ref: containerRef,
+    style,
+    children: flatItems.map((item) => {
+      const key = getFlatItemKey(item);
+      const { group } = item;
+      return /* @__PURE__ */ jsxDEV20("div", {
+        style: {
+          borderBottom: `1px solid ${DEVTOOL_LIST_GROUP_DIVIDER}`,
+          position: "relative",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV20("div", {
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              background: "linear-gradient(90deg, transparent 0%, rgba(148, 210, 255, 0.13) 50%, transparent 100%)",
+              animation: "__nice-action-shine 0.65s ease-out forwards"
+            }
+          }, group.representative.cuid, false, undefined, this),
+          /* @__PURE__ */ jsxDEV20(ActionEntryRow, {
+            entry: group.representative,
+            isSelected: selectedCuid === group.representative.cuid || group.rest.some((e) => e.cuid === selectedCuid),
+            isLatest: item.groupIndex === 0,
+            latestTime,
+            childEntries: getGroupChildEntries(group, childEntriesMap),
+            breakReasons: item.breakReasons,
+            groupEntries: group.rest.length > 0 ? [group.representative, ...group.rest] : undefined,
+            selectedGroupCuid: selectedCuid,
+            onSelectGroupEntry: (cuid) => onSubClick(cuid, selectedCuid === cuid),
+            onClick: () => onGroupClick(group)
+          }, undefined, false, undefined, this)
+        ]
+      }, key, true, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+
 // src/devtools/browser/components/PanelChrome.tsx
-import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV21 } from "react/jsx-dev-runtime";
 var DOCKED_SIZE_MIN = 140;
 var POSITION_GRID = [
   ["top-left", "dock-top", "top-right"],
@@ -4283,7 +4810,7 @@ function PanelHeader({
   onClose,
   onClear
 }) {
-  return /* @__PURE__ */ jsxDEV18("div", {
+  return /* @__PURE__ */ jsxDEV21("div", {
     style: {
       display: "flex",
       alignItems: "center",
@@ -4294,18 +4821,18 @@ function PanelHeader({
       flexShrink: 0
     },
     children: [
-      /* @__PURE__ */ jsxDEV18("span", {
+      /* @__PURE__ */ jsxDEV21("span", {
         style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM, fontWeight: "bold", fontSize: "11px" },
         children: "⚡ nice-action devtools"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV18("div", {
+      /* @__PURE__ */ jsxDEV21("div", {
         style: { display: "flex", gap: "10px", alignItems: "center" },
         children: [
-          /* @__PURE__ */ jsxDEV18(PositionPicker, {
+          /* @__PURE__ */ jsxDEV21(PositionPicker, {
             position,
             onChange: onPositionChange
           }, undefined, false, undefined, this),
-          onClear != null && /* @__PURE__ */ jsxDEV18("button", {
+          onClear != null && /* @__PURE__ */ jsxDEV21("button", {
             onClick: onClear,
             style: {
               background: "none",
@@ -4317,7 +4844,7 @@ function PanelHeader({
             },
             children: "clear"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV18("button", {
+          /* @__PURE__ */ jsxDEV21("button", {
             onClick: onClose,
             style: {
               background: "none",
@@ -4339,18 +4866,18 @@ function PositionPicker({
   position,
   onChange
 }) {
-  return /* @__PURE__ */ jsxDEV18("div", {
+  return /* @__PURE__ */ jsxDEV21("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__ */ jsxDEV18("div", {
+        return /* @__PURE__ */ jsxDEV21("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__ */ jsxDEV18("div", {
+      return /* @__PURE__ */ jsxDEV21("div", {
         title: pos,
         onClick: () => onChange(pos),
         style: {
@@ -4361,7 +4888,7 @@ function PositionPicker({
           justifyContent: "center",
           cursor: "pointer"
         },
-        children: /* @__PURE__ */ jsxDEV18("div", {
+        children: /* @__PURE__ */ jsxDEV21("div", {
           style: {
             width: isDock ? isTopBottom ? "9px" : "3px" : "7px",
             height: isDock ? isTopBottom ? "3px" : "9px" : "7px",
@@ -4397,7 +4924,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__ */ jsxDEV18("div", {
+  return /* @__PURE__ */ jsxDEV21("div", {
     onMouseDown,
     style: {
       position: "absolute",
@@ -4409,7 +4936,7 @@ function ResizeHandle({
 }
 
 // src/devtools/browser/NiceActionDevtools.tsx
-import { jsxDEV as jsxDEV19, Fragment as Fragment9 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV22, Fragment as Fragment10 } 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";
@@ -4502,7 +5029,7 @@ function groupEntries(entries) {
 }
 function NiceActionDevtools(props) {
   if (false) {}
-  return /* @__PURE__ */ jsxDEV19(NiceActionDevtools_Panel, {
+  return /* @__PURE__ */ jsxDEV22(NiceActionDevtools_Panel, {
     ...props
   }, undefined, false, undefined, this);
 }
@@ -4514,13 +5041,13 @@ function NiceActionDevtools_Panel({
   const [prefs, setPrefsRaw] = useState9(() => readPrefs(defaultPosition, initialOpen));
   const [entries, setEntries] = useState9([]);
   const [selectedCuid, setSelectedCuid] = useState9(null);
-  useEffect3(() => core.subscribe(setEntries), [core]);
-  const groups = useMemo2(() => {
+  useEffect4(() => core.subscribe(setEntries), [core]);
+  const groups = useMemo3(() => {
     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 childEntriesMap = useMemo2(() => {
+  const childEntriesMap = useMemo3(() => {
     const map = new Map;
     for (const entry of entries) {
       if (entry.parentCuid == null)
@@ -4556,7 +5083,7 @@ function NiceActionDevtools_Panel({
   const dockedSize = isHorizDock ? dockedHeight : dockedWidth;
   const selectedEntry = selectedCuid != null ? entries.find((e) => e.cuid === selectedCuid) : null;
   const runningCount = entries.filter((e) => e.status === "running").length;
-  useEffect3(() => {
+  useEffect4(() => {
     const sides = ["top", "bottom", "left", "right"];
     const clearAll = () => {
       sides.forEach((s) => {
@@ -4595,7 +5122,7 @@ function NiceActionDevtools_Panel({
     fontSize: "12px"
   };
   if (!isOpen) {
-    return /* @__PURE__ */ jsxDEV19("button", {
+    return /* @__PURE__ */ jsxDEV22("button", {
       onClick: () => setPrefs({ isOpen: true }),
       style: {
         ...baseStyle,
@@ -4610,7 +5137,7 @@ function NiceActionDevtools_Panel({
       },
       children: [
         "⚡ actions",
-        runningCount > 0 && /* @__PURE__ */ jsxDEV19("span", {
+        runningCount > 0 && /* @__PURE__ */ jsxDEV22("span", {
           style: {
             marginLeft: "6px",
             color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
@@ -4683,16 +5210,16 @@ function NiceActionDevtools_Panel({
     },
     childEntriesMap
   };
-  return /* @__PURE__ */ jsxDEV19("div", {
+  return /* @__PURE__ */ jsxDEV22("div", {
     id: "__nice-action-devtools-panel",
     style: panelStyle,
     children: [
-      dockSide != null && /* @__PURE__ */ jsxDEV19(ResizeHandle, {
+      dockSide != null && /* @__PURE__ */ jsxDEV22(ResizeHandle, {
         dockSide,
         dockedSize,
         onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV19(PanelHeader, {
+      /* @__PURE__ */ jsxDEV22(PanelHeader, {
         position,
         onPositionChange: (p) => setPrefs({ position: p }),
         onClose: () => setPrefs({ isOpen: false }),
@@ -4701,17 +5228,17 @@ function NiceActionDevtools_Panel({
           setSelectedCuid(null);
         } : undefined
       }, undefined, false, undefined, this),
-      isHorizDock ? /* @__PURE__ */ jsxDEV19("div", {
+      isHorizDock ? /* @__PURE__ */ jsxDEV22("div", {
         style: { flex: 1, display: "flex", overflow: "hidden" },
         children: [
-          /* @__PURE__ */ jsxDEV19("div", {
+          /* @__PURE__ */ jsxDEV22("div", {
             style: { position: "relative", width: "340px", flexShrink: 0 },
             children: [
-              /* @__PURE__ */ jsxDEV19(ActionList, {
+              /* @__PURE__ */ jsxDEV22(ActionList, {
                 ...virtualListProps,
                 style: { width: "100%", height: "100%", overflowY: "auto" }
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV19("div", {
+              /* @__PURE__ */ jsxDEV22("div", {
                 style: {
                   position: "absolute",
                   top: 0,
@@ -4724,7 +5251,7 @@ function NiceActionDevtools_Panel({
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV19("div", {
+          /* @__PURE__ */ jsxDEV22("div", {
             style: {
               flex: 1,
               display: "flex",
@@ -4733,12 +5260,12 @@ function NiceActionDevtools_Panel({
               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, {
+            children: selectedEntry != null ? /* @__PURE__ */ jsxDEV22(ActionDetailPanel, {
               entry: selectedEntry,
               parent: selectedEntryParent,
               childEntries: selectedEntryChildren,
               onSelectEntry: (cuid) => setSelectedCuid(cuid)
-            }, selectedEntry.cuid, false, undefined, this) : /* @__PURE__ */ jsxDEV19("div", {
+            }, selectedEntry.cuid, false, undefined, this) : /* @__PURE__ */ jsxDEV22("div", {
               style: {
                 padding: "24px",
                 textAlign: "center",
@@ -4749,16 +5276,16 @@ function NiceActionDevtools_Panel({
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV19(Fragment9, {
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV22(Fragment10, {
         children: [
-          /* @__PURE__ */ jsxDEV19("div", {
+          /* @__PURE__ */ jsxDEV22("div", {
             style: { position: "relative", flex: 1, minHeight: "80px" },
             children: [
-              /* @__PURE__ */ jsxDEV19(ActionList, {
+              /* @__PURE__ */ jsxDEV22(ActionList, {
                 ...virtualListProps,
                 style: { overflowY: "auto", height: "100%" }
               }, undefined, false, undefined, this),
-              selectedEntry != null && /* @__PURE__ */ jsxDEV19("div", {
+              selectedEntry != null && /* @__PURE__ */ jsxDEV22("div", {
                 style: {
                   position: "absolute",
                   bottom: 0,
@@ -4771,7 +5298,7 @@ function NiceActionDevtools_Panel({
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          selectedEntry != null && /* @__PURE__ */ jsxDEV19("div", {
+          selectedEntry != null && /* @__PURE__ */ jsxDEV22("div", {
             style: {
               flexShrink: 0,
               maxHeight: "55%",
@@ -4781,7 +5308,7 @@ function NiceActionDevtools_Panel({
               borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
               boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
             },
-            children: /* @__PURE__ */ jsxDEV19(ActionDetailPanel, {
+            children: /* @__PURE__ */ jsxDEV22(ActionDetailPanel, {
               entry: selectedEntry,
               parent: selectedEntryParent,
               childEntries: selectedEntryChildren,
@@ -4793,119 +5320,6 @@ function NiceActionDevtools_Panel({
     ]
   }, 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 getGroupChildEntries(group, childEntriesMap) {
-  const seen = new Set;
-  const result = [];
-  for (const e of [group.representative, ...group.rest]) {
-    for (const child of childEntriesMap.get(e.cuid) ?? []) {
-      if (!seen.has(child.actionId)) {
-        seen.add(child.actionId);
-        result.push(child);
-      }
-    }
-  }
-  return result.length > 0 ? result.sort((a, b) => a.startTime - b.startTime) : undefined;
-}
-function getFlatItemKey(item) {
-  const oldestCuid = item.group.rest[item.group.rest.length - 1]?.cuid ?? item.group.representative.cuid;
-  return `g:${oldestCuid}`;
-}
-function ActionList({
-  groups,
-  selectedCuid,
-  onGroupClick,
-  onSubClick,
-  childEntriesMap,
-  style
-}) {
-  const containerRef = useRef(null);
-  const latestTime = groups[0]?.representative.startTime;
-  const flatItems = useMemo2(() => {
-    return groups.map((group, gi) => {
-      const prevGroup = groups[gi + 1];
-      let breakReasons;
-      if (prevGroup != null && prevGroup.representative.actionId === group.representative.actionId && prevGroup.representative.domain === group.representative.domain) {
-        const reasons = getBreakReasons(group.representative, prevGroup.representative);
-        if (reasons.length > 0)
-          breakReasons = reasons;
-      }
-      return { group, groupIndex: gi, breakReasons };
-    });
-  }, [groups]);
-  const prevSelectedRef = useRef(selectedCuid);
-  useEffect3(() => {
-    if (selectedCuid === prevSelectedRef.current)
-      return;
-    prevSelectedRef.current = selectedCuid;
-    if (selectedCuid == null)
-      return;
-    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__ */ jsxDEV19("div", {
-      style,
-      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__ */ jsxDEV19("div", {
-    ref: containerRef,
-    style,
-    children: flatItems.map((item) => {
-      const key = getFlatItemKey(item);
-      const { group } = item;
-      return /* @__PURE__ */ jsxDEV19("div", {
-        style: {
-          borderBottom: `1px solid ${DEVTOOL_LIST_GROUP_DIVIDER}`,
-          position: "relative",
-          overflow: "hidden"
-        },
-        children: [
-          /* @__PURE__ */ jsxDEV19("div", {
-            style: {
-              position: "absolute",
-              inset: 0,
-              pointerEvents: "none",
-              background: "linear-gradient(90deg, transparent 0%, rgba(148, 210, 255, 0.13) 50%, transparent 100%)",
-              animation: "__nice-action-shine 0.65s ease-out forwards"
-            }
-          }, 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,
-            childEntries: getGroupChildEntries(group, childEntriesMap),
-            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);
-    })
-  }, undefined, false, undefined, this);
-}
 export {
   NiceActionDevtools,
   ActionDevtoolsCore