@nice-code/action 0.2.17 → 0.2.19

package/build/devtools/browser/index.js

@@ -1957,7 +1957,7 @@ class ActionDevtoolsCore {
   }
 }
 // src/devtools/browser/NiceActionDevtools.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState9 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState9 } from "react";
 
 // src/devtools/core/devtools_colors.ts
 var DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
@@ -1974,6 +1974,7 @@ var DEVTOOL_COLOR_TEXT_SECONDARY = "#cbd5e1";
 var DEVTOOL_COLOR_TEXT_MUTED = "#64748b";
 var DEVTOOL_COLOR_TEXT_FAINT = "#334155";
 var DEVTOOL_LIST_BASE_BACKGROUND = "#0f172a";
+var DEVTOOL_LIST_HEADER_SELECTED_BACKGROUND = "#1d2942";
 var DEVTOOL_LIST_GROUP_DIVIDER = "#101109";
 var DEVTOOL_DETAIL_BASE_BACKGROUND = "#0d1729";
 var DEVTOOL_DETAIL_HEADER_BACKGROUND = "#131f35";
@@ -2027,7 +2028,8 @@ var SEMANTIC_COLORS = {
   },
   error: {
     color: DEVTOOL_COLOR_SEMANTIC_ERROR,
-    borderColor: DEVTOOL_COLOR_SEMANTIC_ERROR
+    borderColor: DEVTOOL_COLOR_SEMANTIC_ERROR,
+    subtle: { color: "#FF5C5C9f", borderColor: "transparent" }
   },
   domain: {
     color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
@@ -2036,22 +2038,27 @@ var SEMANTIC_COLORS = {
   },
   handler_local: {
     color: DEVTOOL_COLOR_HANDLER_LOCAL_TEXT,
-    borderColor: DEVTOOL_COLOR_HANDLER_LOCAL_BORDER
+    borderColor: DEVTOOL_COLOR_HANDLER_LOCAL_BORDER,
+    subtle: { color: "#4b5563", borderColor: "transparent" }
   },
   handler_external: {
     color: DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT,
-    borderColor: DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER
+    borderColor: DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER,
+    subtle: { color: "#cfa12a9f", borderColor: "transparent" }
   },
   age: {
     color: DEVTOOL_COLOR_SEMANTIC_METADATA,
-    borderColor: DEVTOOL_SECTION_BACKGROUND
+    borderColor: DEVTOOL_SECTION_BACKGROUND,
+    subtle: { color: "#4b5563", borderColor: "transparent" }
   },
   io_input: {
     color: "#fbbf24",
+    subtle: { color: "#fbbe249f", borderColor: "transparent" },
     borderColor: "#78350f"
   },
   io_output: {
     color: "#a78bfa",
+    subtle: { color: "#a78bfa9f", borderColor: "transparent" },
     borderColor: "#4c1d95"
   },
   default: {
@@ -2061,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) {
@@ -2310,11 +2317,12 @@ function NiceErrorBody({ error }) {
         style: {
           padding: "12px 14px",
           color: DEVTOOL_COLOR_SEMANTIC_ERROR,
-          fontSize: "14px",
+          fontSize: "1em",
           fontWeight: "700",
           lineHeight: "1.45",
           wordBreak: "break-word",
           fontFamily: SANS,
+          textAlign: "left",
           borderBottom: `1px solid ${DEVTOOL_ERROR_BADGE_BACKGROUND}`
         },
         children: error.message
@@ -2384,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;
@@ -2499,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) {
@@ -2517,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;
@@ -2526,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;
@@ -2553,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", {
@@ -2584,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);
@@ -2596,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: [
@@ -2676,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);
           }),
@@ -2711,18 +3045,27 @@ 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);
 }
 
 // src/devtools/browser/components/ActionErrorDisplay.tsx
 import { jsxDEV as jsxDEV5, Fragment } from "react/jsx-dev-runtime";
+var MONO3 = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
+var SANS2 = "ui-sans-serif, system-ui, -apple-system, sans-serif";
 function FullErrorContent({
   label,
   error,
   errorStack,
-  color
+  color,
+  runtime
 }) {
   return /* @__PURE__ */ jsxDEV5(Fragment, {
     children: [
@@ -2736,6 +3079,7 @@ function FullErrorContent({
         color
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV5(StackTraceSection, {
+        runtime,
         label: "Error Stack",
         stack: errorStack,
         color
@@ -2743,11 +3087,67 @@ function FullErrorContent({
     ]
   }, undefined, true, undefined, this);
 }
-function ActionErrorDisplay({ entry }) {
+function CompactErrorContent({ value, color }) {
+  if (isNiceErrorJson(value)) {
+    return /* @__PURE__ */ jsxDEV5("div", {
+      style: { display: "flex", flexDirection: "column", gap: "1em" },
+      children: [
+        /* @__PURE__ */ jsxDEV5("div", {
+          style: {
+            color,
+            fontFamily: SANS2,
+            fontSize: "12px",
+            fontWeight: 600,
+            lineHeight: "1.4",
+            wordBreak: "break-word",
+            textAlign: "left"
+          },
+          children: value.message
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV5("div", {
+          style: { display: "flex", flexWrap: "wrap", gap: "6px", alignItems: "center" },
+          children: [
+            value.ids.map((id) => /* @__PURE__ */ jsxDEV5("span", {
+              style: { color, fontFamily: MONO3, fontSize: "10px", opacity: 0.8 },
+              children: id
+            }, id, false, undefined, this)),
+            /* @__PURE__ */ jsxDEV5("span", {
+              style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontFamily: MONO3, fontSize: "10px" },
+              children: value.def.domain
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const text = typeof value === "string" ? value : value != null ? String(value) : null;
+  if (text == null)
+    return null;
+  return /* @__PURE__ */ jsxDEV5("div", {
+    style: {
+      color,
+      fontFamily: SANS2,
+      fontSize: "12px",
+      lineHeight: "1.4",
+      wordBreak: "break-word"
+    },
+    children: text
+  }, undefined, false, undefined, this);
+}
+function ActionErrorDisplay({
+  entry,
+  compact
+}) {
   const { status, error, abortReason, errorStack } = entry;
   if (status === "action-error") {
-    const color = DEVTOOL_COLOR_SEMANTIC_WARNING;
+    const color = DEVTOOL_COLOR_SEMANTIC_ERROR;
+    if (compact)
+      return /* @__PURE__ */ jsxDEV5(CompactErrorContent, {
+        value: error,
+        color
+      }, undefined, false, undefined, this);
     return /* @__PURE__ */ jsxDEV5(FullErrorContent, {
+      runtime: entry.meta.originClient,
       label: "Action Error",
       error,
       errorStack,
@@ -2756,7 +3156,13 @@ function ActionErrorDisplay({ entry }) {
   }
   if (status === "failed") {
     const color = DEVTOOL_COLOR_SEMANTIC_ERROR;
+    if (compact)
+      return /* @__PURE__ */ jsxDEV5(CompactErrorContent, {
+        value: error,
+        color
+      }, undefined, false, undefined, this);
     return /* @__PURE__ */ jsxDEV5(FullErrorContent, {
+      runtime: entry.meta.originClient,
       label: "Error",
       error,
       errorStack,
@@ -2765,6 +3171,11 @@ function ActionErrorDisplay({ entry }) {
   }
   if (status === "aborted") {
     const color = DEVTOOL_COLOR_SEMANTIC_METADATA;
+    if (compact)
+      return /* @__PURE__ */ jsxDEV5(CompactErrorContent, {
+        value: abortReason,
+        color
+      }, undefined, false, undefined, this);
     return /* @__PURE__ */ jsxDEV5(Fragment, {
       children: [
         abortReason != null && (isNiceErrorJson(abortReason) ? /* @__PURE__ */ jsxDEV5(NiceErrorDisplay, {
@@ -2777,6 +3188,7 @@ function ActionErrorDisplay({ entry }) {
           color
         }, undefined, false, undefined, this)),
         /* @__PURE__ */ jsxDEV5(StackTraceSection, {
+          runtime: entry.meta.originClient,
           label: "Abort Stack",
           stack: errorStack,
           color
@@ -2787,6 +3199,9 @@ function ActionErrorDisplay({ entry }) {
   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";
 
@@ -2916,13 +3331,64 @@ function Chip({
   }, undefined, true, undefined, this);
 }
 
-// src/devtools/browser/components/DomainChip.tsx
+// src/devtools/browser/components/Icon.tsx
+import { useState as useState4 } from "react";
 import { jsxDEV as jsxDEV8, Fragment as Fragment3 } from "react/jsx-dev-runtime";
-function DomainHierarchyContent({ allDomains }) {
+var ICON_SIZE_PX = {
+  ["sm" /* sm */]: 13,
+  ["md" /* md */]: 16,
+  ["lg" /* lg */]: 18
+};
+function Icon({
+  icon: IconComponent,
+  color,
+  size = "md" /* md */,
+  subtle = false,
+  tooltip,
+  style
+}) {
+  const [anchor, setAnchor] = useState4(null);
+  const hasTooltip = tooltip != null;
+  const colorEntry = SEMANTIC_COLORS[color];
+  const resolvedColor = subtle ? colorEntry.subtle?.color ?? colorEntry.color : colorEntry.color;
   return /* @__PURE__ */ jsxDEV8(Fragment3, {
+    children: [
+      /* @__PURE__ */ jsxDEV8("div", {
+        onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
+        onMouseLeave: hasTooltip ? () => setAnchor(null) : undefined,
+        style: {
+          borderRadius: "0.4em",
+          height: `${1.65 * getSizeValue(size)}em`,
+          width: `${1.65 * getSizeValue(size)}em`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "rgba(0,0,0,0.4)",
+          color: resolvedColor,
+          flexShrink: 0,
+          cursor: hasTooltip ? "default" : undefined,
+          ...style
+        },
+        children: /* @__PURE__ */ jsxDEV8(IconComponent, {
+          size: ICON_SIZE_PX[size],
+          strokeWidth: 1.5
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      anchor != null && hasTooltip && /* @__PURE__ */ jsxDEV8(Tooltip, {
+        anchor,
+        config: tooltip
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/DomainChip.tsx
+import { jsxDEV as jsxDEV9, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+function DomainHierarchyContent({ allDomains }) {
+  return /* @__PURE__ */ jsxDEV9(Fragment4, {
     children: allDomains.map((d, i) => {
       const isCurrent = i === allDomains.length - 1;
-      return /* @__PURE__ */ jsxDEV8("div", {
+      return /* @__PURE__ */ jsxDEV9("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -2931,7 +3397,7 @@ function DomainHierarchyContent({ allDomains }) {
           paddingTop: i > 0 ? "0.1rem" : undefined
         },
         children: [
-          /* @__PURE__ */ jsxDEV8("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             style: {
               fontSize: "0.8rem",
               height: "0.6em",
@@ -2944,7 +3410,7 @@ function DomainHierarchyContent({ allDomains }) {
             },
             children: "⬢"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV8("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             style: {
               color: isCurrent ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "#4b5563",
               fontSize: "0.7rem",
@@ -2958,18 +3424,32 @@ function DomainHierarchyContent({ allDomains }) {
   }, undefined, false, undefined, this);
 }
 function DomainChip({
+  compact = false,
   subtle = false,
   domain,
   allDomains,
   size
 }) {
-  return /* @__PURE__ */ jsxDEV8(Chip, {
+  if (compact) {
+    return /* @__PURE__ */ jsxDEV9(Icon, {
+      icon: Component,
+      color: "domain" /* domain */,
+      tooltip: {
+        content: /* @__PURE__ */ jsxDEV9(DomainHierarchyContent, {
+          allDomains
+        }, undefined, false, undefined, this),
+        title: "Action Domain",
+        align: "edge"
+      }
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV9(Chip, {
     color: "domain" /* domain */,
     subtle,
     size,
     rounded: true,
     tooltip: {
-      content: /* @__PURE__ */ jsxDEV8(DomainHierarchyContent, {
+      content: /* @__PURE__ */ jsxDEV9(DomainHierarchyContent, {
         allDomains
       }, undefined, false, undefined, this),
       title: "Action Domain",
@@ -2977,17 +3457,20 @@ function DomainChip({
     },
     style: { display: "flex", alignItems: "center", gap: "0.4em" },
     children: [
-      /* @__PURE__ */ jsxDEV8("span", {
+      /* @__PURE__ */ jsxDEV9("span", {
         style: {
-          height: "0.6em",
-          width: "0.6em",
+          height: "1.2em",
+          width: "1.2em",
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
         },
-        children: "⬢"
+        children: /* @__PURE__ */ jsxDEV9(Component, {
+          height: "1.2em",
+          width: "1.2em"
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV8("span", {
+      /* @__PURE__ */ jsxDEV9("span", {
         children: domain
       }, undefined, false, undefined, this)
     ]
@@ -2995,27 +3478,29 @@ function DomainChip({
 }
 
 // src/devtools/browser/components/HandlerChips.tsx
-import { jsxDEV as jsxDEV9, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV10, Fragment as Fragment5 } from "react/jsx-dev-runtime";
 function getExternalLabel(hop) {
   if (hop.handlerType !== "external")
     return null;
   return hop.handlerClient != null ? `${hop.transport ?? "ext"} → ${hop.handlerClient.envId}` : `→ ${hop.transport ?? "ext"}`;
 }
-function HandlerChips({ entry, size }) {
+function HandlerChips({ entry, size, subtle }) {
   const firstHop = entry.meta.routing[0];
   const localEnvId = firstHop != null ? firstHop.runtime.envId : null;
   const externalLabel = firstHop != null ? getExternalLabel(firstHop) : null;
   const firstHopIsLocal = firstHop != null && firstHop.handlerType === "local";
-  return /* @__PURE__ */ 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,
         children: externalLabel
       }, undefined, false, undefined, this)
     ]
@@ -3023,15 +3508,15 @@ function HandlerChips({ entry, size }) {
 }
 
 // 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"
@@ -3040,15 +3525,15 @@ function RunningTimer({ startTime }) {
 }
 function DurationDisplay({ entry }) {
   const d = formatDuration(entry);
-  return /* @__PURE__ */ jsxDEV10(Fragment5, {
-    children: d ?? /* @__PURE__ */ jsxDEV10(RunningTimer, {
+  return /* @__PURE__ */ jsxDEV11(Fragment6, {
+    children: d ?? /* @__PURE__ */ jsxDEV11(RunningTimer, {
       startTime: entry.startTime
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 
 // src/devtools/browser/components/CallStackSection.tsx
-import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
 function getCalledLabel(entry) {
   const firstHop = entry.meta.routing[0];
   if (firstHop == null)
@@ -3076,7 +3561,7 @@ function CallStackLink({
   const symbol = STATUS_SYMBOL[entry.status];
   const labelColor = entryRole === "caller" ? DEVTOOL_COLOR_TEXT_SECONDARY : getCalledColor(entry);
   const label = entryRole === "caller" ? "↑ from" : getCalledLabel(entry);
-  return /* @__PURE__ */ jsxDEV11("div", {
+  return /* @__PURE__ */ jsxDEV12("div", {
     onClick,
     style: {
       background: isFocused ? DEVTOOL_SECTION_BACKGROUND : DEVTOOL_DETAIL_HEADER_BACKGROUND,
@@ -3090,21 +3575,21 @@ function CallStackLink({
       cursor: "pointer"
     },
     children: [
-      /* @__PURE__ */ jsxDEV11("span", {
+      /* @__PURE__ */ jsxDEV12("span", {
         style: { display: "flex", alignItems: "center", gap: "1em", flexShrink: 0 },
         children: [
-          /* @__PURE__ */ jsxDEV11("span", {
+          /* @__PURE__ */ jsxDEV12("span", {
             style: { color, fontSize: "10px", flexShrink: 0 },
             children: symbol
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11("span", {
+          /* @__PURE__ */ jsxDEV12("span", {
             style: { color: labelColor, fontSize: "9px", flexShrink: 0 },
             children: label
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11("span", {
+          /* @__PURE__ */ jsxDEV12("span", {
             style: { display: "flex", alignItems: "center", gap: "5px" },
             children: [
-              /* @__PURE__ */ jsxDEV11("span", {
+              /* @__PURE__ */ jsxDEV12("span", {
                 style: {
                   color: DEVTOOL_COLOR_TEXT_SECONDARY,
                   fontSize: "11px",
@@ -3114,7 +3599,7 @@ function CallStackLink({
                 },
                 children: entry.actionId
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV11(DomainChip, {
+              /* @__PURE__ */ jsxDEV12(DomainChip, {
                 domain: entry.domain,
                 allDomains: entry.allDomains,
                 size: "sm" /* sm */
@@ -3123,14 +3608,14 @@ function CallStackLink({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV11("span", {
+      /* @__PURE__ */ jsxDEV12("span", {
         style: {
           color: DEVTOOL_COLOR_TEXT_FAINT,
           fontSize: "10px",
           textAlign: "right",
           whiteSpace: "nowrap"
         },
-        children: /* @__PURE__ */ jsxDEV11(DurationDisplay, {
+        children: /* @__PURE__ */ jsxDEV12(DurationDisplay, {
           entry
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
@@ -3146,15 +3631,15 @@ function CallStackSection({
 }) {
   if (parent == null && childEntries.length === 0)
     return null;
-  return /* @__PURE__ */ jsxDEV11("div", {
+  return /* @__PURE__ */ jsxDEV12("div", {
     children: [
-      parent != null && /* @__PURE__ */ jsxDEV11(CallStackLink, {
+      parent != null && /* @__PURE__ */ jsxDEV12(CallStackLink, {
         entry: parent,
         entryRole: "caller",
         isFocused: false,
         onClick: () => onSelectParent(parent.cuid)
       }, undefined, false, undefined, this),
-      childEntries.map((child) => /* @__PURE__ */ jsxDEV11(CallStackLink, {
+      childEntries.map((child) => /* @__PURE__ */ jsxDEV12(CallStackLink, {
         entry: child,
         entryRole: "called",
         isFocused: focusedChildCuid === child.cuid,
@@ -3165,7 +3650,7 @@ function CallStackSection({
 }
 
 // src/devtools/browser/components/ChildDispatchChips.tsx
-import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
 function ChildDispatchChips({
   childRouteItems,
   size = "sm" /* sm */
@@ -3185,12 +3670,12 @@ function ChildDispatchChips({
       group.transports.push(transport);
     }
   }
-  return /* @__PURE__ */ jsxDEV12("div", {
+  return /* @__PURE__ */ jsxDEV13("div", {
     style: { display: "flex", alignItems: "center", gap: "4px", flexWrap: "wrap" },
     children: Array.from(groups.values()).map((group) => {
       const transportStr = group.transports.length > 0 ? group.transports.join(", ") : "ext";
       const label = group.hasClient ? `${transportStr} → ${group.runtimeId}` : `→ ${transportStr}`;
-      return /* @__PURE__ */ jsxDEV12(Chip, {
+      return /* @__PURE__ */ jsxDEV13(Chip, {
         color: "handler_external" /* handler_external */,
         size,
         children: label
@@ -3200,20 +3685,20 @@ function ChildDispatchChips({
 }
 
 // src/devtools/browser/components/MetaSection.tsx
-import { useState as useState5 } from "react";
-import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+import { useState as useState6 } from "react";
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
 function MetaChip({ label, value }) {
-  return /* @__PURE__ */ jsxDEV13("span", {
+  return /* @__PURE__ */ jsxDEV14("span", {
     style: { whiteSpace: "nowrap" },
     children: [
-      /* @__PURE__ */ jsxDEV13("span", {
+      /* @__PURE__ */ jsxDEV14("span", {
         style: { color: DEVTOOL_COLOR_TEXT_MUTED },
         children: [
           label,
           " "
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV13("span", {
+      /* @__PURE__ */ jsxDEV14("span", {
         style: { color: DEVTOOL_COLOR_TEXT_SECONDARY },
         children: value
       }, undefined, false, undefined, this)
@@ -3221,7 +3706,7 @@ function MetaChip({ label, value }) {
   }, undefined, true, undefined, this);
 }
 function MetaSection({ entry }) {
-  const [expanded, setExpanded] = useState5(false);
+  const [expanded, setExpanded] = useState6(false);
   const { meta, cuid } = entry;
   const expandedRows = [
     { label: "cuid", value: cuid },
@@ -3229,9 +3714,9 @@ function MetaSection({ entry }) {
     ...meta.originClient.perId != null ? [{ label: "perId", value: meta.originClient.perId }] : [],
     ...meta.originClient.insId != null ? [{ label: "insId", value: meta.originClient.insId }] : []
   ];
-  return /* @__PURE__ */ jsxDEV13("div", {
+  return /* @__PURE__ */ jsxDEV14("div", {
     children: [
-      /* @__PURE__ */ jsxDEV13("div", {
+      /* @__PURE__ */ jsxDEV14("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -3239,7 +3724,7 @@ function MetaSection({ entry }) {
           marginBottom: "3px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV13("div", {
+          /* @__PURE__ */ jsxDEV14("div", {
             style: {
               color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
               fontSize: "10px",
@@ -3248,13 +3733,13 @@ function MetaSection({ entry }) {
             },
             children: "Meta"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV13("span", {
+          /* @__PURE__ */ jsxDEV14("span", {
             style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "11px" },
             children: expanded ? "▾" : "▸"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      expanded ? /* @__PURE__ */ jsxDEV13("div", {
+      expanded ? /* @__PURE__ */ jsxDEV14("div", {
         onClick: () => setExpanded(false),
         style: {
           background: DEVTOOL_SECTION_BACKGROUND,
@@ -3262,7 +3747,7 @@ function MetaSection({ entry }) {
           overflow: "hidden",
           cursor: "pointer"
         },
-        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV13("div", {
+        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV14("div", {
           style: {
             display: "grid",
             gridTemplateColumns: "52px 1fr",
@@ -3272,11 +3757,11 @@ function MetaSection({ entry }) {
             alignItems: "start"
           },
           children: [
-            /* @__PURE__ */ jsxDEV13("span", {
+            /* @__PURE__ */ jsxDEV14("span", {
               style: { textAlign: "left", color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", paddingTop: "1px" },
               children: label
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV13("span", {
+            /* @__PURE__ */ jsxDEV14("span", {
               style: {
                 textAlign: "left",
                 color: DEVTOOL_COLOR_TEXT_SECONDARY,
@@ -3287,7 +3772,7 @@ function MetaSection({ entry }) {
             }, undefined, false, undefined, this)
           ]
         }, label, true, undefined, this))
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV13("div", {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV14("div", {
         onClick: () => setExpanded(true),
         style: {
           background: DEVTOOL_SECTION_BACKGROUND,
@@ -3301,19 +3786,19 @@ function MetaSection({ entry }) {
           cursor: "pointer"
         },
         children: [
-          /* @__PURE__ */ jsxDEV13(MetaChip, {
+          /* @__PURE__ */ jsxDEV14(MetaChip, {
             label: "cuid",
             value: `…${cuid.slice(-8)}`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV13(MetaChip, {
+          /* @__PURE__ */ jsxDEV14(MetaChip, {
             label: "runtime",
             value: meta.originClient.envId
           }, undefined, false, undefined, this),
-          meta.originClient.perId != null && /* @__PURE__ */ jsxDEV13(MetaChip, {
+          meta.originClient.perId != null && /* @__PURE__ */ jsxDEV14(MetaChip, {
             label: "perId",
             value: meta.originClient.perId.length > 10 ? `${meta.originClient.perId.slice(0, 10)}…` : meta.originClient.perId
           }, undefined, false, undefined, this),
-          meta.originClient.insId != null && /* @__PURE__ */ jsxDEV13(MetaChip, {
+          meta.originClient.insId != null && /* @__PURE__ */ jsxDEV14(MetaChip, {
             label: "insId",
             value: meta.originClient.insId.length > 10 ? `${meta.originClient.insId.slice(0, 10)}…` : meta.originClient.insId
           }, undefined, false, undefined, this)
@@ -3324,7 +3809,7 @@ function MetaSection({ entry }) {
 }
 
 // src/devtools/browser/components/RoutingSection.tsx
-import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
 function RoutingSection({
   entry,
   minHopCount = 0
@@ -3334,12 +3819,12 @@ function RoutingSection({
   const phantomCount = Math.max(0, minHopCount - hopCount);
   if (hopCount === 0 && phantomCount === 0)
     return null;
-  return /* @__PURE__ */ jsxDEV14("div", {
+  return /* @__PURE__ */ jsxDEV15("div", {
     children: [
-      /* @__PURE__ */ jsxDEV14(SectionLabel, {
+      /* @__PURE__ */ jsxDEV15(SectionLabel, {
         label: hopCount > 0 ? `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}` : "Routing"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV14("div", {
+      /* @__PURE__ */ jsxDEV15("div", {
         style: { display: "flex", flexDirection: "column", gap: "2px" },
         children: [
           meta.routing.map((hop, i) => {
@@ -3348,7 +3833,7 @@ function RoutingSection({
             const badgeColor = isLocal ? DEVTOOL_COLOR_SEMANTIC_SUCCESS : DEVTOOL_COLOR_SEMANTIC_WARNING;
             const badgeText = isLocal ? "● exec" : `→ ${hop.transport ?? "ext"}`;
             const runtimeTitle = [hop.runtime.perId, hop.runtime.insId].filter(Boolean).join(" · ") || undefined;
-            return /* @__PURE__ */ jsxDEV14("div", {
+            return /* @__PURE__ */ jsxDEV15("div", {
               style: {
                 background: DEVTOOL_SECTION_BACKGROUND,
                 borderRadius: "4px",
@@ -3361,14 +3846,14 @@ function RoutingSection({
                 padding: "4px 8px"
               },
               children: [
-                /* @__PURE__ */ jsxDEV14("span", {
+                /* @__PURE__ */ jsxDEV15("span", {
                   style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                   children: [
-                    /* @__PURE__ */ jsxDEV14("span", {
+                    /* @__PURE__ */ jsxDEV15("span", {
                       style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", width: "16px", textAlign: "right" },
                       children: i + 1
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV14("span", {
+                    /* @__PURE__ */ jsxDEV15("span", {
                       title: runtimeTitle,
                       style: {
                         color: DEVTOOL_COLOR_TEXT_SECONDARY,
@@ -3382,11 +3867,11 @@ function RoutingSection({
                     }, undefined, false, undefined, this)
                   ]
                 }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV14("span", {
+                /* @__PURE__ */ jsxDEV15("span", {
                   style: { color: badgeColor, fontSize: "10px", whiteSpace: "nowrap" },
                   children: badgeText
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV14("span", {
+                /* @__PURE__ */ jsxDEV15("span", {
                   style: {
                     display: "flex",
                     alignItems: "center",
@@ -3395,7 +3880,7 @@ function RoutingSection({
                     overflow: "hidden"
                   },
                   children: [
-                    /* @__PURE__ */ jsxDEV14("span", {
+                    /* @__PURE__ */ jsxDEV15("span", {
                       style: {
                         color: DEVTOOL_COLOR_TEXT_MUTED,
                         fontSize: "10px",
@@ -3405,7 +3890,7 @@ function RoutingSection({
                       },
                       children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV14("span", {
+                    /* @__PURE__ */ jsxDEV15("span", {
                       style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", flexShrink: 0, marginLeft: "auto" },
                       children: [
                         "+",
@@ -3418,7 +3903,7 @@ function RoutingSection({
               ]
             }, `${hop.time}-${hop.runtime.envId}`, true, undefined, this);
           }),
-          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxDEV14("div", {
+          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxDEV15("div", {
             "aria-hidden": "true",
             style: {
               visibility: "hidden",
@@ -3431,24 +3916,24 @@ function RoutingSection({
               padding: "4px 8px"
             },
             children: [
-              /* @__PURE__ */ jsxDEV14("span", {
+              /* @__PURE__ */ jsxDEV15("span", {
                 style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                 children: [
-                  /* @__PURE__ */ jsxDEV14("span", {
+                  /* @__PURE__ */ jsxDEV15("span", {
                     style: { fontSize: "10px", width: "16px" },
                     children: "0"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV14("span", {
+                  /* @__PURE__ */ jsxDEV15("span", {
                     style: { fontSize: "11px" },
                     children: "placeholder"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV14("span", {
+              /* @__PURE__ */ jsxDEV15("span", {
                 style: { fontSize: "10px" },
                 children: "placeholder"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV14("span", {}, undefined, false, undefined, this)
+              /* @__PURE__ */ jsxDEV15("span", {}, undefined, false, undefined, this)
             ]
           }, key, true, undefined, this))
         ]
@@ -3458,7 +3943,7 @@ function RoutingSection({
 }
 
 // src/devtools/browser/components/action_detail/ActionDetailPanel.tsx
-import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
 var STATUS_BADGE_LABEL = {
   running: "RUNNING",
   success: "SUCCESS",
@@ -3489,7 +3974,7 @@ function DetailHeader({
   const color = STATUS_COLOR[entry.status];
   const StatusIconComponent = STATUS_ICON[entry.status];
   const timestamp = formatTimestamp(entry.startTime);
-  return /* @__PURE__ */ jsxDEV15("div", {
+  return /* @__PURE__ */ jsxDEV16("div", {
     onClick: !isActive ? onClick : undefined,
     style: {
       padding: "0.5em 1em",
@@ -3503,13 +3988,13 @@ function DetailHeader({
       gap: "1em",
       cursor: isActive ? "default" : "pointer"
     },
-    children: /* @__PURE__ */ jsxDEV15("div", {
+    children: /* @__PURE__ */ jsxDEV16("div", {
       style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "0.5em" },
       children: [
-        /* @__PURE__ */ jsxDEV15("div", {
+        /* @__PURE__ */ jsxDEV16("div", {
           style: { display: "flex", alignItems: "center", minWidth: 0, gap: "0.5em" },
           children: [
-            /* @__PURE__ */ jsxDEV15("span", {
+            /* @__PURE__ */ jsxDEV16("span", {
               style: {
                 color,
                 flexShrink: 0,
@@ -3517,12 +4002,12 @@ function DetailHeader({
                 alignItems: "center",
                 animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
               },
-              children: /* @__PURE__ */ jsxDEV15(StatusIconComponent, {
+              children: /* @__PURE__ */ jsxDEV16(StatusIconComponent, {
                 size: 20,
                 strokeWidth: 1.75
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV15("span", {
+            /* @__PURE__ */ jsxDEV16("span", {
               style: {
                 color: DEVTOOL_COLOR_TEXT_EMPHASIS,
                 fontSize: "1.2em",
@@ -3536,7 +4021,7 @@ function DetailHeader({
               },
               children: entry.actionId
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV15("span", {
+            /* @__PURE__ */ jsxDEV16("span", {
               style: {
                 flexShrink: 0,
                 padding: "2px 9px",
@@ -3551,14 +4036,14 @@ function DetailHeader({
               },
               children: STATUS_BADGE_LABEL[entry.status]
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV15(DomainChip, {
+            /* @__PURE__ */ jsxDEV16(DomainChip, {
               domain: entry.domain,
               allDomains: entry.allDomains,
               size: "md" /* md */
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV15("div", {
+        /* @__PURE__ */ jsxDEV16("div", {
           style: {
             display: "flex",
             alignItems: "center",
@@ -3566,7 +4051,7 @@ function DetailHeader({
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ jsxDEV15("div", {
+            /* @__PURE__ */ jsxDEV16("div", {
               style: {
                 display: "flex",
                 alignItems: "center",
@@ -3575,20 +4060,20 @@ function DetailHeader({
                 overflow: "hidden"
               },
               children: [
-                /* @__PURE__ */ jsxDEV15(HandlerChips, {
+                /* @__PURE__ */ jsxDEV16(HandlerChips, {
                   entry,
                   size: "md" /* md */
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV15(ChildDispatchChips, {
+                /* @__PURE__ */ jsxDEV16(ChildDispatchChips, {
                   childRouteItems: childExternalRouteItems,
                   size: "md" /* md */
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV15("div", {
+            /* @__PURE__ */ jsxDEV16("div", {
               style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 },
               children: [
-                /* @__PURE__ */ jsxDEV15("span", {
+                /* @__PURE__ */ jsxDEV16("span", {
                   style: {
                     color: DEVTOOL_COLOR_SEMANTIC_METADATA,
                     fontSize: "10px",
@@ -3597,9 +4082,9 @@ function DetailHeader({
                   },
                   children: timestamp
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV15("span", {
+                /* @__PURE__ */ jsxDEV16("span", {
                   style: { color, fontSize: "12px", fontWeight: "500" },
-                  children: /* @__PURE__ */ jsxDEV15(DurationDisplay, {
+                  children: /* @__PURE__ */ jsxDEV16(DurationDisplay, {
                     entry
                   }, undefined, false, undefined, this)
                 }, undefined, false, undefined, this)
@@ -3617,10 +4102,10 @@ function ActionDetailPanel({
   childEntries,
   onSelectEntry
 }) {
-  const [focusedChildCuid, setFocusedChildCuid] = useState6(null);
+  const [focusedChildCuid, setFocusedChildCuid] = useState7(null);
   const focusedEntry = focusedChildCuid != null ? childEntries.find((e) => e.cuid === focusedChildCuid) ?? entry : entry;
   const maxRoutingHops = Math.max(entry.meta.routing.length, ...childEntries.map((e) => e.meta.routing.length), 0);
-  const maxCallSiteFrames = Math.max(countUserFrames(entry.callSite), ...childEntries.map((e) => countUserFrames(e.callSite)), 0);
+  const maxCallSiteFrames = Math.max(countUserFrames(entry.meta.originClient, entry.callSite), ...childEntries.map((e) => countUserFrames(e.meta.originClient, e.callSite)), 0);
   const childExternalRouteItems = useMemo(() => {
     const seen = new Set;
     const result = [];
@@ -3639,7 +4124,7 @@ function ActionDetailPanel({
   const handleFocusChild = (cuid) => {
     setFocusedChildCuid((prev) => prev === cuid ? null : cuid);
   };
-  return /* @__PURE__ */ jsxDEV15("div", {
+  return /* @__PURE__ */ jsxDEV16("div", {
     style: {
       flex: 1,
       display: "flex",
@@ -3649,20 +4134,20 @@ function ActionDetailPanel({
       background: DEVTOOL_DETAIL_BASE_BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsxDEV15(DetailHeader, {
+      /* @__PURE__ */ jsxDEV16(DetailHeader, {
         entry,
         isActive: focusedChildCuid === null,
         onClick: () => setFocusedChildCuid(null),
         childExternalRouteItems
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV15(CallStackSection, {
+      /* @__PURE__ */ jsxDEV16(CallStackSection, {
         parent,
         childEntries,
         focusedChildCuid,
         onFocusChild: handleFocusChild,
         onSelectParent: onSelectEntry
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV15("div", {
+      /* @__PURE__ */ jsxDEV16("div", {
         style: {
           flex: 1,
           overflowY: "auto",
@@ -3673,36 +4158,37 @@ function ActionDetailPanel({
           gap: "8px"
         },
         children: [
-          focusedEntry.input !== undefined ? /* @__PURE__ */ jsxDEV15(DetailSection, {
+          focusedEntry.input !== undefined ? /* @__PURE__ */ jsxDEV16(DetailSection, {
             label: "Input",
             value: focusedEntry.input
-          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15(DetailSection, {
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV16(DetailSection, {
             label: "Input",
             value: "No input required or given"
           }, undefined, false, undefined, this),
-          focusedEntry.status === "success" && /* @__PURE__ */ jsxDEV15(DetailSection, {
+          focusedEntry.status === "success" && /* @__PURE__ */ jsxDEV16(DetailSection, {
             label: "Output",
             value: focusedEntry.output,
             color: DEVTOOL_COLOR_SEMANTIC_SUCCESS
           }, undefined, false, undefined, this),
-          (focusedEntry.status === "action-error" || focusedEntry.status === "failed" || focusedEntry.status === "aborted") && /* @__PURE__ */ jsxDEV15(ActionErrorDisplay, {
+          (focusedEntry.status === "action-error" || focusedEntry.status === "failed" || focusedEntry.status === "aborted") && /* @__PURE__ */ jsxDEV16(ActionErrorDisplay, {
             entry: focusedEntry
           }, undefined, false, undefined, this),
-          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV15(DetailSection, {
+          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV16(DetailSection, {
             label: `Progress (${focusedEntry.progressUpdates.length})`,
             value: focusedEntry.progressUpdates
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV15(StackTraceSection, {
+          /* @__PURE__ */ jsxDEV16(StackTraceSection, {
+            runtime: entry.meta.originClient,
             label: "Dispatch Site",
             stack: focusedEntry.callSite,
             color: DEVTOOL_COLOR_TEXT_SECONDARY,
             minFrameCount: maxCallSiteFrames
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV15(RoutingSection, {
+          /* @__PURE__ */ jsxDEV16(RoutingSection, {
             entry: focusedEntry,
             minHopCount: maxRoutingHops
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV15(MetaSection, {
+          /* @__PURE__ */ jsxDEV16(MetaSection, {
             entry: focusedEntry
           }, undefined, false, undefined, this)
         ]
@@ -3713,61 +4199,8 @@ function ActionDetailPanel({
 
 // src/devtools/browser/components/action_list/ActionEntryRow.tsx
 import { Box, CircleX as CircleX2, Variable } from "lucide-react";
-import { useState as useState8 } from "react";
-
-// src/devtools/browser/components/Icon.tsx
-import { useState as useState7 } from "react";
-import { jsxDEV as jsxDEV16, Fragment as Fragment6 } from "react/jsx-dev-runtime";
-var ICON_SIZE_PX = {
-  ["sm" /* sm */]: 13,
-  ["md" /* md */]: 16,
-  ["lg" /* lg */]: 18
-};
-function Icon({
-  icon: IconComponent,
-  color,
-  size = "md" /* md */,
-  subtle = false,
-  tooltip,
-  style
-}) {
-  const [anchor, setAnchor] = useState7(null);
-  const hasTooltip = tooltip != null;
-  const colorEntry = SEMANTIC_COLORS[color];
-  const resolvedColor = subtle ? colorEntry.subtle?.color ?? colorEntry.color : colorEntry.color;
-  return /* @__PURE__ */ jsxDEV16(Fragment6, {
-    children: [
-      /* @__PURE__ */ jsxDEV16("div", {
-        onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
-        onMouseLeave: hasTooltip ? () => setAnchor(null) : undefined,
-        style: {
-          borderRadius: "0.4em",
-          height: `${1.65 * getSizeValue(size)}em`,
-          width: `${1.65 * getSizeValue(size)}em`,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          background: "rgba(0,0,0,0.4)",
-          color: resolvedColor,
-          flexShrink: 0,
-          cursor: hasTooltip ? "default" : undefined,
-          ...style
-        },
-        children: /* @__PURE__ */ jsxDEV16(IconComponent, {
-          size: ICON_SIZE_PX[size],
-          strokeWidth: 1.5
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      anchor != null && hasTooltip && /* @__PURE__ */ jsxDEV16(Tooltip, {
-        anchor,
-        config: tooltip
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/devtools/browser/components/action_list/ActionEntryRow.tsx
-import { jsxDEV as jsxDEV17, Fragment as Fragment7 } from "react/jsx-dev-runtime";
+import { Fragment as Fragment7, useState as useState8 } from "react";
+import { jsxDEV as jsxDEV17, Fragment as Fragment8 } from "react/jsx-dev-runtime";
 function getLatestChipColor(status) {
   if (status === "failed")
     return "failed" /* failed */;
@@ -3775,7 +4208,7 @@ function getLatestChipColor(status) {
     return "action_error" /* action_error */;
   if (status === "aborted")
     return "aborted" /* aborted */;
-  return "running_action" /* running_action */;
+  return "success" /* success */;
 }
 var JSON_TOKEN_RE2 = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
 function renderColoredJson2(text) {
@@ -3865,7 +4298,7 @@ function GroupDotTooltip({
     config: {
       align: "center",
       maxWidth: 240,
-      content: /* @__PURE__ */ jsxDEV17(Fragment7, {
+      content: /* @__PURE__ */ jsxDEV17(Fragment8, {
         children: [
           /* @__PURE__ */ jsxDEV17("div", {
             style: { color: dotColor, marginBottom: "1px" },
@@ -3910,7 +4343,7 @@ function GroupDot({
   const [anchor, setAnchor] = useState8(null);
   const dotColor = STATUS_COLOR[entry.status];
   const hovered = anchor != null;
-  return /* @__PURE__ */ jsxDEV17(Fragment7, {
+  return /* @__PURE__ */ jsxDEV17(Fragment8, {
     children: [
       /* @__PURE__ */ jsxDEV17("button", {
         "data-cuid": entry.cuid,
@@ -3951,29 +4384,28 @@ function ActionEntryRow({
   onClick,
   isLatest = false,
   latestTime,
-  childExternalRouteEntries,
+  childEntries,
   breakReasons,
   groupEntries,
   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", {
     "data-cuid": entry.cuid,
     onClick,
     style: {
       position: "relative",
       display: "flex",
-      alignItems: "flex-start",
-      gap: "8px",
-      padding: "10px 12px",
+      flexDirection: "column",
+      gap: "5px",
+      padding: "0.5em 0.6em",
       cursor: "pointer",
-      background: isSelected ? DEVTOOL_DETAIL_HEADER_BACKGROUND : "transparent",
+      background: isSelected ? DEVTOOL_LIST_HEADER_SELECTED_BACKGROUND : "transparent",
       border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
-      borderLeft: isSelected ? `2px solid ${STATUS_COLOR[entry.status]}` : entry.status === "failed" || entry.status === "action-error" ? `2px solid ${STATUS_COLOR[entry.status]}55` : `2px solid transparent`,
+      borderLeft: isSelected ? `2px solid ${STATUS_COLOR[entry.status]}` : entry.status === "failed" || entry.status === "action-error" ? `2px solid ${STATUS_COLOR[entry.status]}55` : `2px solid ${DEVTOOL_PANEL_BORDER}`,
       borderRadius: "3px",
       margin: "2px 4px"
     },
@@ -3981,7 +4413,7 @@ function ActionEntryRow({
       /* @__PURE__ */ jsxDEV17("div", {
         style: {
           position: "absolute",
-          left: "32px",
+          left: "2em",
           top: 0,
           bottom: 0,
           width: "1px",
@@ -3991,76 +4423,65 @@ function ActionEntryRow({
         }
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV17("div", {
-        style: {
-          position: "relative",
-          zIndex: 1,
-          flexShrink: 0,
-          minWidth: "3.5em",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-start"
-        },
-        children: isLatest ? /* @__PURE__ */ jsxDEV17(Chip, {
-          color: getLatestChipColor(entry.status),
-          children: "latest"
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17(Chip, {
-          color: "age" /* age */,
-          children: [
-            "+",
-            latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV17("span", {
-        style: {
-          position: "relative",
-          zIndex: 1,
-          color: statusSemantic,
-          flexShrink: 0,
-          display: "flex",
-          alignItems: "center",
-          animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
-        },
-        children: /* @__PURE__ */ jsxDEV17(Icon, {
-          icon: statusIcon,
-          color: statusSemantic
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV17("div", {
-        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "0.3em" },
+        style: { display: "flex", alignItems: "center", gap: "8px" },
         children: [
           /* @__PURE__ */ jsxDEV17("div", {
             style: {
+              position: "relative",
+              zIndex: 1,
+              flexShrink: 0,
+              minWidth: "3.4em",
               display: "flex",
               alignItems: "center",
-              minWidth: 0,
-              overflow: "hidden",
-              gap: "0.5em"
+              justifyContent: "flex-start"
             },
+            children: isLatest ? /* @__PURE__ */ jsxDEV17(Chip, {
+              size: "sm" /* sm */,
+              color: getLatestChipColor(entry.status),
+              children: "latest"
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17(Chip, {
+              size: "sm" /* sm */,
+              color: getLatestChipColor(entry.status),
+              children: [
+                "+",
+                latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV17("div", {
+            style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: "0.5em" },
             children: [
               /* @__PURE__ */ jsxDEV17("span", {
                 style: {
                   color: DEVTOOL_COLOR_TEXT_SECONDARY,
-                  fontSize: "11px",
+                  fontSize: "1em",
+                  fontWeight: 400,
                   fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap",
                   flexShrink: 1,
-                  minWidth: "24px"
+                  minWidth: "3em"
                 },
                 children: entry.actionId
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17(DomainChip, {
-                domain: entry.domain,
-                allDomains: entry.allDomains
-              }, undefined, false, undefined, this),
-              entry.input !== undefined && /* @__PURE__ */ jsxDEV17(Icon, {
+              /* @__PURE__ */ jsxDEV17(Icon, {
                 icon: Variable,
-                color: "io_input" /* io_input */,
-                tooltip: { content: /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
-                  value: entry.input
-                }, undefined, false, undefined, this), title: "Input" }
+                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,
@@ -4073,96 +4494,118 @@ function ActionEntryRow({
                 icon: CircleX2,
                 color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
                 tooltip: {
-                  content: /* @__PURE__ */ jsxDEV17("div", {
-                    style: {
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "1em"
-                    },
-                    children: /* @__PURE__ */ jsxDEV17(ActionErrorDisplay, {
-                      entry
-                    }, undefined, false, undefined, this)
+                  content: /* @__PURE__ */ jsxDEV17(ActionErrorDisplay, {
+                    entry,
+                    compact: true
                   }, undefined, false, undefined, this),
                   title: entry.status === "aborted" ? "Aborted" : "Error",
-                  maxWidth: 400
+                  maxWidth: 340
                 }
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV17("div", {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: "6px"
-            },
-            children: [
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV17("div", {
+                style: { flex: 1 }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17("span", {
                 style: {
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "start",
-                  gap: "5px",
-                  minWidth: 0,
-                  overflow: "hidden"
+                  color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+                  fontSize: "10px",
+                  letterSpacing: "0.02em",
+                  fontFamily: "ui-sans-serif, system-ui, sans-serif",
+                  flexShrink: 0
                 },
-                children: [
-                  /* @__PURE__ */ jsxDEV17(HandlerChips, {
-                    entry,
-                    size: "sm" /* sm */
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV17(ChildDispatchChips, {
-                    childRouteItems: childExternalRouteEntries,
-                    size: "sm" /* sm */
+                children: timestamp
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17("span", {
+                style: { color: DEVTOOL_COLOR_SEMANTIC_WARNING, fontSize: "11px", flexShrink: 0 },
+                children: /* @__PURE__ */ jsxDEV17(DurationDisplay, {
+                  entry
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hasBottomContent && /* @__PURE__ */ jsxDEV17("div", {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "4px",
+          paddingLeft: "4.5em"
+        },
+        children: [
+          childEntries?.map((child) => /* @__PURE__ */ jsxDEV17(Fragment7, {
+            children: [
+              /* @__PURE__ */ jsxDEV17(Icon, {
+                icon: Variable,
+                color: "io_input" /* io_input */,
+                subtle: true,
+                tooltip: {
+                  content: child.input !== undefined ? /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
+                    value: child.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),
-                  breakReasons?.filter((r) => r !== "new input" && r !== "new output").map((reason) => /* @__PURE__ */ jsxDEV17(Chip, {
-                    color: "default" /* default */,
-                    children: reason
-                  }, reason, false, undefined, this))
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV17("div", {
-                style: { display: "flex", alignItems: "center", gap: "6px", flexShrink: 0 },
-                children: [
-                  /* @__PURE__ */ jsxDEV17("span", {
-                    style: {
-                      color: DEVTOOL_COLOR_SEMANTIC_METADATA,
-                      fontSize: "10px",
-                      letterSpacing: "0.02em",
-                      fontFamily: "ui-sans-serif, system-ui, sans-serif"
-                    },
-                    children: timestamp
+                  title: `Input · ${child.actionId}`
+                }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17(HandlerChips, {
+                entry: child,
+                size: "sm" /* sm */,
+                subtle: true
+              }, undefined, false, undefined, this),
+              child.status === "success" && child.output !== undefined && /* @__PURE__ */ jsxDEV17(Icon, {
+                icon: Box,
+                color: "io_output" /* io_output */,
+                subtle: true,
+                tooltip: {
+                  content: /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
+                    value: child.output
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV17("span", {
-                    style: { color: DEVTOOL_COLOR_SEMANTIC_WARNING, fontSize: "11px" },
-                    children: /* @__PURE__ */ jsxDEV17(DurationDisplay, {
-                      entry
-                    }, undefined, false, undefined, this)
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
+                  title: `Output · ${child.actionId}`
+                }
+              }, undefined, false, undefined, this)
             ]
-          }, undefined, true, undefined, this),
-          hasGroup && /* @__PURE__ */ jsxDEV17("div", {
-            style: {
-              display: "flex",
-              flexWrap: "wrap",
-              alignItems: "center",
-              gap: "5px",
-              paddingBottom: "3px",
-              paddingTop: "1px"
-            },
-            children: groupEntries.map((e, i) => /* @__PURE__ */ jsxDEV17(GroupDot, {
-              entry: e,
-              index: i,
-              total: groupEntries.length,
-              refTime: groupEntries[0].startTime,
-              isActive: selectedGroupCuid === e.cuid,
-              onSelect: () => onSelectGroupEntry?.(e.cuid)
-            }, e.cuid, false, undefined, this))
+          }, child.actionId, true, undefined, this)),
+          breakReasons?.filter((r) => r !== "new input" && r !== "new output").map((reason) => /* @__PURE__ */ jsxDEV17(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,
+            color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
+            subtle: true,
+            tooltip: {
+              content: /* @__PURE__ */ jsxDEV17(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, true, undefined, this),
+      hasGroup && /* @__PURE__ */ jsxDEV17("div", {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "5px",
+          paddingLeft: "4.6em",
+          paddingBottom: "2px"
+        },
+        children: groupEntries.map((e, i) => /* @__PURE__ */ jsxDEV17(GroupDot, {
+          entry: e,
+          index: i,
+          total: groupEntries.length,
+          refTime: groupEntries[0].startTime,
+          isActive: selectedGroupCuid === e.cuid,
+          onSelect: () => onSelectGroupEntry?.(e.cuid)
+        }, e.cuid, false, undefined, this))
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
@@ -4318,7 +4761,7 @@ function ResizeHandle({
 }
 
 // src/devtools/browser/NiceActionDevtools.tsx
-import { jsxDEV as jsxDEV19, Fragment as Fragment8 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV19, Fragment as Fragment9 } 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";
@@ -4429,19 +4872,16 @@ function NiceActionDevtools_Panel({
     const roots = entries.filter((e) => e.status !== "running" && (e.parentCuid == null || !byCuid.has(e.parentCuid)));
     return groupEntries(roots);
   }, [entries]);
-  const childExternalRouteItemsMap = useMemo2(() => {
+  const childEntriesMap = useMemo2(() => {
     const map = new Map;
     for (const entry of entries) {
       if (entry.parentCuid == null)
         continue;
-      const firstHop = entry.meta.routing[0];
-      if (firstHop == null || firstHop.handlerType !== "external")
-        continue;
       const existing = map.get(entry.parentCuid) ?? [];
-      const key = `${firstHop.handlerClient?.envId ?? ""}:${firstHop.transport ?? ""}`;
-      if (!existing.some((r) => `${r.handlerClient?.envId ?? ""}:${r.transport ?? ""}` === key)) {
-        map.set(entry.parentCuid, [...existing, firstHop]);
-      }
+      map.set(entry.parentCuid, [...existing, entry]);
+    }
+    for (const arr of map.values()) {
+      arr.sort((a, b) => a.startTime - b.startTime);
     }
     return map;
   }, [entries]);
@@ -4593,7 +5033,7 @@ function NiceActionDevtools_Panel({
     onSubClick: (cuid, isSelected) => {
       setSelectedCuid(isSelected ? null : cuid);
     },
-    childExternalRouteItemsMap
+    childEntriesMap
   };
   return /* @__PURE__ */ jsxDEV19("div", {
     id: "__nice-action-devtools-panel",
@@ -4661,7 +5101,7 @@ function NiceActionDevtools_Panel({
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV19(Fragment8, {
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV19(Fragment9, {
         children: [
           /* @__PURE__ */ jsxDEV19("div", {
             style: { position: "relative", flex: 1, minHeight: "80px" },
@@ -4715,6 +5155,19 @@ function getBreakReasons(current, previous) {
     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}`;
@@ -4724,10 +5177,10 @@ function ActionList({
   selectedCuid,
   onGroupClick,
   onSubClick,
-  childExternalRouteItemsMap,
+  childEntriesMap,
   style
 }) {
-  const containerRef = useRef(null);
+  const containerRef = useRef2(null);
   const latestTime = groups[0]?.representative.startTime;
   const flatItems = useMemo2(() => {
     return groups.map((group, gi) => {
@@ -4741,7 +5194,7 @@ function ActionList({
       return { group, groupIndex: gi, breakReasons };
     });
   }, [groups]);
-  const prevSelectedRef = useRef(selectedCuid);
+  const prevSelectedRef = useRef2(selectedCuid);
   useEffect3(() => {
     if (selectedCuid === prevSelectedRef.current)
       return;
@@ -4793,7 +5246,7 @@ function ActionList({
             isSelected: selectedCuid === group.representative.cuid || group.rest.some((e) => e.cuid === selectedCuid),
             isLatest: item.groupIndex === 0,
             latestTime,
-            childExternalRouteEntries: childExternalRouteItemsMap.get(group.representative.cuid),
+            childEntries: getGroupChildEntries(group, childEntriesMap),
             breakReasons: item.breakReasons,
             groupEntries: group.rest.length > 0 ? [group.representative, ...group.rest] : undefined,
             selectedGroupCuid: selectedCuid,