@nice-code/action 0.6.3 → 0.8.0

package/build/devtools/browser/index.js

@@ -1871,7 +1871,10 @@ function extractMeta(context) {
 class ActionDevtoolsCore {
   _entries = [];
   _listeners = new Set;
-  constructor(_options = {}) {}
+  _maxEntries;
+  constructor(options = {}) {
+    this._maxEntries = options.maxEntries ?? 500;
+  }
   attachToDomain(domain) {
     return domain.addActionListener((update) => {
       const { runningAction, type, time } = update;
@@ -1891,6 +1894,9 @@ class ActionDevtoolsCore {
           callSite: runningAction.callSite
         };
         this._entries = [entry, ...this._entries];
+        if (this._entries.length > this._maxEntries) {
+          this._entries.length = this._maxEntries;
+        }
         this._notify();
       } else if (type === "progress" /* progress */) {
         this._updateEntry(runningAction.cuid, (e) => ({
@@ -1971,44 +1977,68 @@ class ActionDevtoolsCore {
   }
 }
 // src/devtools/browser/NiceActionDevtools.tsx
-import { useEffect as useEffect4, useId, useMemo as useMemo3, useReducer, useState as useState12 } from "react";
+import {
+  DevtoolsLauncher,
+  FollowLatestToggles,
+  getDevtoolsDockCoordinator,
+  getDockSide,
+  PanelHeader,
+  ResizeHandle,
+  SplitHandle
+} from "nice-devtools-shared";
+import { useEffect as useEffect3, useId, useMemo as useMemo3, useReducer, useState as useState10 } from "react";
 
 // src/devtools/core/devtools_colors.ts
-var DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
-var DEVTOOL_COLOR_SEMANTIC_SUCCESS = "#A3E635";
-var DEVTOOL_COLOR_SEMANTIC_SYSTEM = "#38BDF8";
-var DEVTOOL_COLOR_SEMANTIC_WARNING = "#FB923C";
-var DEVTOOL_COLOR_SEMANTIC_METADATA = "#A1A1AA";
+import {
+  DEVTOOL_COLOR_SEMANTIC_ERROR,
+  DEVTOOL_COLOR_SEMANTIC_METADATA,
+  DEVTOOL_COLOR_SEMANTIC_SUCCESS,
+  DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+  DEVTOOL_COLOR_SEMANTIC_WARNING,
+  DEVTOOL_COLOR_TEXT_FAINT,
+  DEVTOOL_COLOR_TEXT_MUTED,
+  DEVTOOL_SECTION_BACKGROUND
+} from "nice-devtools-shared";
+import {
+  DEVTOOL_COLOR_SEMANTIC_ERROR as DEVTOOL_COLOR_SEMANTIC_ERROR2,
+  DEVTOOL_COLOR_SEMANTIC_METADATA as DEVTOOL_COLOR_SEMANTIC_METADATA2,
+  DEVTOOL_COLOR_SEMANTIC_SUCCESS as DEVTOOL_COLOR_SEMANTIC_SUCCESS2,
+  DEVTOOL_COLOR_SEMANTIC_SYSTEM as DEVTOOL_COLOR_SEMANTIC_SYSTEM2,
+  DEVTOOL_COLOR_SEMANTIC_WARNING as DEVTOOL_COLOR_SEMANTIC_WARNING2,
+  DEVTOOL_COLOR_TEXT_EMPHASIS,
+  DEVTOOL_COLOR_TEXT_FAINT as DEVTOOL_COLOR_TEXT_FAINT2,
+  DEVTOOL_COLOR_TEXT_MUTED as DEVTOOL_COLOR_TEXT_MUTED2,
+  DEVTOOL_COLOR_TEXT_SECONDARY,
+  DEVTOOL_DETAIL_BASE_BACKGROUND,
+  DEVTOOL_DETAIL_HEADER_BACKGROUND,
+  DEVTOOL_ERROR_BACKGROUND,
+  DEVTOOL_JSON_KEY,
+  DEVTOOL_JSON_KEYWORD,
+  DEVTOOL_JSON_NUMBER,
+  DEVTOOL_JSON_PUNCTUATION,
+  DEVTOOL_JSON_STRING,
+  DEVTOOL_LIST_BASE_BACKGROUND,
+  DEVTOOL_LIST_SELECTED_BACKGROUND,
+  DEVTOOL_PANEL_BORDER,
+  DEVTOOL_PANEL_DIVIDER_BORDER,
+  DEVTOOL_SECTION_BACKGROUND as DEVTOOL_SECTION_BACKGROUND2,
+  DEVTOOL_SECTION_STRING_BACKGROUND,
+  DEVTOOL_TOOLTIP_BACKGROUND,
+  DEVTOOL_TOOLTIP_BORDER,
+  DEVTOOL_TOOLTIP_TITLE_BACKGROUND,
+  DEVTOOL_TOOLTIP_TITLE_BOTTOM_BORDER,
+  MONO_FONT,
+  SANS_FONT
+} from "nice-devtools-shared";
 var DEVTOOL_COLOR_HANDLER_LOCAL_TEXT = "#34bb89";
 var DEVTOOL_COLOR_HANDLER_LOCAL_BORDER = "#144427";
 var DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT = "#cfa12a";
 var DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER = "#723917";
-var DEVTOOL_COLOR_TEXT_EMPHASIS = "#f1f5f9";
-var DEVTOOL_COLOR_TEXT_SECONDARY = "#cbd5e1";
-var DEVTOOL_COLOR_TEXT_MUTED = "#64748b";
-var DEVTOOL_COLOR_TEXT_FAINT = "#334155";
-var DEVTOOL_LIST_BASE_BACKGROUND = "#0f172a";
 var DEVTOOL_LIST_HEADER_SELECTED_BACKGROUND = "#1d2942";
 var DEVTOOL_LIST_GROUP_DIVIDER = "#101109";
-var DEVTOOL_DETAIL_BASE_BACKGROUND = "#0d1729";
-var DEVTOOL_DETAIL_HEADER_BACKGROUND = "#131f35";
-var DEVTOOL_SECTION_BACKGROUND = "#1e293b";
-var DEVTOOL_SECTION_STRING_BACKGROUND = "#0d131f";
 var DEVTOOL_STACK_TRACE_BACKGROUND = "#040a13";
-var DEVTOOL_PANEL_BORDER = "#1e293b";
-var DEVTOOL_PANEL_DIVIDER_BORDER = "#1d3352";
-var DEVTOOL_ERROR_BACKGROUND = "#1e0a0a";
 var DEVTOOL_ERROR_BADGE_BACKGROUND = "#2d0f0f";
-var DEVTOOL_TOOLTIP_BACKGROUND = "#0c1526";
-var DEVTOOL_TOOLTIP_TITLE_BACKGROUND = "#101b2e";
-var DEVTOOL_TOOLTIP_TITLE_BOTTOM_BORDER = "#211f5f";
-var DEVTOOL_TOOLTIP_BORDER = "#312e81";
 var DEVTOOL_COLOR_CALL_STACK_DIVIDER = "#0a1120";
-var DEVTOOL_JSON_KEY = "#a5b4fc";
-var DEVTOOL_JSON_STRING = "#fbbf24";
-var DEVTOOL_JSON_NUMBER = "#34d399";
-var DEVTOOL_JSON_KEYWORD = "#a78bfa";
-var DEVTOOL_JSON_PUNCTUATION = "#475569";
 var DEVTOOL_STACK_FRAME_USER_NUMBER = "#64748b";
 var DEVTOOL_STACK_FRAME_USER_FUNCTION = "#e2e8f0";
 var DEVTOOL_STACK_FRAME_USER_FOLDER = "#596b83";
@@ -2087,7 +2117,7 @@ var SEMANTIC_COLORS = {
 };
 
 // src/devtools/browser/components/action_detail/ActionDetailPanel.tsx
-import { useMemo, useState as useState8 } from "react";
+import { useMemo, useState as useState7 } from "react";
 
 // src/devtools/browser/ui_util/size.ts
 function getSizeValue(size) {
@@ -2104,150 +2134,16 @@ function getSizeValue(size) {
 }
 
 // src/devtools/browser/components/DetailSection.tsx
+import { renderColoredJson, safeStringify } from "nice-devtools-shared";
 import { useState } from "react";
 
 // src/devtools/browser/components/SectionLabel.tsx
-import { jsx } from "react/jsx-runtime";
-function SectionLabel({
-  label,
-  color = DEVTOOL_COLOR_SEMANTIC_SYSTEM
-}) {
-  return /* @__PURE__ */ jsx("div", {
-    style: {
-      color,
-      fontSize: "0.85em",
-      marginBottom: "3px",
-      textTransform: "uppercase",
-      letterSpacing: "0.05em",
-      fontWeight: 500,
-      textAlign: "left"
-    },
-    children: label
-  });
-}
-
-// src/devtools/browser/components/utils.ts
-import { Circle, CircleAlert, CircleCheck, CircleX, Loader2 } from "lucide-react";
-var STATUS_COLOR = {
-  running: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
-  success: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
-  "action-error": DEVTOOL_COLOR_SEMANTIC_WARNING,
-  failed: DEVTOOL_COLOR_SEMANTIC_ERROR,
-  aborted: DEVTOOL_COLOR_SEMANTIC_METADATA
-};
-var STATUS_THING = {
-  running: "running_action" /* running_action */,
-  success: "success" /* success */,
-  "action-error": "action_error" /* action_error */,
-  failed: "failed" /* failed */,
-  aborted: "aborted" /* aborted */
-};
-var STATUS_SYMBOL = {
-  running: "●",
-  success: "✓",
-  "action-error": "!",
-  failed: "✗",
-  aborted: "○"
-};
-var STATUS_ICON = {
-  running: Loader2,
-  success: CircleCheck,
-  "action-error": CircleAlert,
-  failed: CircleX,
-  aborted: Circle
-};
-function getInboundOrigin(entry) {
-  const origin = entry.meta.originClient;
-  if (origin == null || origin.envId === "unknown" || origin.envId === "_unset_")
-    return null;
-  const local = entry.meta.routing[0]?.runtime;
-  if (local == null)
-    return null;
-  const sameRuntime = origin.envId === local.envId && (origin.perId ?? null) === (local.perId ?? null) && (origin.insId ?? null) === (local.insId ?? null);
-  return sameRuntime ? null : origin;
-}
-function safeStringify(value, indent = 2) {
-  if (value === undefined)
-    return "undefined";
-  if (value === null)
-    return "null";
-  try {
-    return JSON.stringify(value, null, indent);
-  } catch {
-    return String(value);
-  }
-}
-function formatRelativeAge(ms) {
-  if (ms < 1000)
-    return `${ms}ms`;
-  if (ms < 60000)
-    return `${(ms / 1000).toFixed(1)}s`;
-  return `${Math.floor(ms / 60000)}m`;
-}
-function formatDuration(entry) {
-  return entry.endTime != null ? `${entry.endTime - entry.startTime}ms` : null;
-}
-function formatTimestamp(startTime) {
-  return new Date(startTime).toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false
-  });
-}
+import { SectionLabel } from "nice-devtools-shared";
 
 // src/devtools/browser/components/DetailSection.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var COMPACT_CHAR_LIMIT = 120;
 var MONO = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
-var JSON_TOKEN_RE = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
-function renderColoredJson(text) {
-  const nodes = [];
-  let last = 0;
-  let i = 0;
-  JSON_TOKEN_RE.lastIndex = 0;
-  for (let m = JSON_TOKEN_RE.exec(text);m !== null; m = JSON_TOKEN_RE.exec(text)) {
-    if (m.index > last)
-      nodes.push(text.slice(last, m.index));
-    const [, str, colon, num, kw, punct] = m;
-    if (str != null) {
-      if (colon != null) {
-        nodes.push(/* @__PURE__ */ jsx2("span", {
-          style: { color: DEVTOOL_JSON_KEY },
-          children: str
-        }, i++));
-        nodes.push(/* @__PURE__ */ jsx2("span", {
-          style: { color: DEVTOOL_JSON_PUNCTUATION },
-          children: colon
-        }, i++));
-      } else {
-        nodes.push(/* @__PURE__ */ jsx2("span", {
-          style: { color: DEVTOOL_JSON_STRING },
-          children: str
-        }, i++));
-      }
-    } else if (num != null) {
-      nodes.push(/* @__PURE__ */ jsx2("span", {
-        style: { color: DEVTOOL_JSON_NUMBER },
-        children: num
-      }, i++));
-    } else if (kw != null) {
-      nodes.push(/* @__PURE__ */ jsx2("span", {
-        style: { color: DEVTOOL_JSON_KEYWORD },
-        children: kw
-      }, i++));
-    } else if (punct != null) {
-      nodes.push(/* @__PURE__ */ jsx2("span", {
-        style: { color: DEVTOOL_JSON_PUNCTUATION },
-        children: punct
-      }, i++));
-    }
-    last = JSON_TOKEN_RE.lastIndex;
-  }
-  if (last < text.length)
-    nodes.push(text.slice(last));
-  return nodes;
-}
 function tryParseJson(s) {
   try {
     return JSON.parse(s);
@@ -2258,7 +2154,7 @@ function tryParseJson(s) {
 function DetailSection({
   label,
   value,
-  color = DEVTOOL_COLOR_SEMANTIC_SYSTEM
+  color = DEVTOOL_COLOR_SEMANTIC_SYSTEM2
 }) {
   const parsedFromString = typeof value === "string" ? tryParseJson(value) : null;
   const isPlainString = typeof value === "string" && parsedFromString === null;
@@ -2268,7 +2164,7 @@ function DetailSection({
   const compactJson = isPlainString ? value : safeStringify(effectiveValue, 0);
   const canExpand = fullJson !== compactJson || compactJson.length > COMPACT_CHAR_LIMIT;
   const compactDisplay = compactJson.length > COMPACT_CHAR_LIMIT ? `${compactJson.slice(0, COMPACT_CHAR_LIMIT)}…` : compactJson;
-  const baseStyle = isPlainString ? { background: DEVTOOL_SECTION_STRING_BACKGROUND, color: DEVTOOL_COLOR_TEXT_MUTED } : { background: DEVTOOL_SECTION_BACKGROUND, color: DEVTOOL_COLOR_TEXT_SECONDARY };
+  const baseStyle = isPlainString ? { background: DEVTOOL_SECTION_STRING_BACKGROUND, color: DEVTOOL_COLOR_TEXT_MUTED2 } : { background: DEVTOOL_SECTION_BACKGROUND2, color: DEVTOOL_COLOR_TEXT_SECONDARY };
   return /* @__PURE__ */ jsxs("div", {
     children: [
       /* @__PURE__ */ jsxs("div", {
@@ -2279,17 +2175,17 @@ function DetailSection({
           marginBottom: "3px"
         },
         children: [
-          /* @__PURE__ */ jsx2(SectionLabel, {
+          /* @__PURE__ */ jsx(SectionLabel, {
             label,
             color
           }),
-          canExpand && /* @__PURE__ */ jsx2("span", {
-            style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "11px" },
+          canExpand && /* @__PURE__ */ jsx("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_FAINT2, fontSize: "11px" },
             children: expanded ? "▾" : "▸"
           })
         ]
       }),
-      expanded ? /* @__PURE__ */ jsx2("div", {
+      expanded ? /* @__PURE__ */ jsx("div", {
         onClick: canExpand ? () => setExpanded(false) : undefined,
         style: {
           margin: 0,
@@ -2306,7 +2202,7 @@ function DetailSection({
           ...baseStyle
         },
         children: isPlainString ? fullJson : renderColoredJson(fullJson)
-      }) : /* @__PURE__ */ jsx2("div", {
+      }) : /* @__PURE__ */ jsx("div", {
         onClick: canExpand ? () => setExpanded(true) : undefined,
         style: {
           padding: "5px 8px",
@@ -2327,7 +2223,7 @@ function DetailSection({
 }
 
 // src/devtools/browser/components/NiceErrorDisplay.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var MONO2 = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
 var SANS = "ui-sans-serif, system-ui, -apple-system, sans-serif";
 function isNiceErrorJson(value) {
@@ -2340,15 +2236,15 @@ function NiceErrorBody({ error }) {
   return /* @__PURE__ */ jsxs2("div", {
     style: {
       background: DEVTOOL_ERROR_BACKGROUND,
-      border: `1px solid ${DEVTOOL_COLOR_SEMANTIC_ERROR}`,
+      border: `1px solid ${DEVTOOL_COLOR_SEMANTIC_ERROR2}`,
       borderRadius: "4px",
       overflow: "hidden"
     },
     children: [
-      /* @__PURE__ */ jsx3("div", {
+      /* @__PURE__ */ jsx2("div", {
         style: {
           padding: "12px 14px",
-          color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+          color: DEVTOOL_COLOR_SEMANTIC_ERROR2,
           fontSize: "1em",
           fontWeight: "700",
           lineHeight: "1.45",
@@ -2369,9 +2265,9 @@ function NiceErrorBody({ error }) {
           background: DEVTOOL_ERROR_BADGE_BACKGROUND
         },
         children: [
-          error.ids.map((id) => /* @__PURE__ */ jsx3("span", {
+          error.ids.map((id) => /* @__PURE__ */ jsx2("span", {
             style: {
-              color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+              color: DEVTOOL_COLOR_SEMANTIC_ERROR2,
               fontFamily: MONO2,
               fontSize: "11px",
               fontWeight: "600"
@@ -2379,23 +2275,23 @@ function NiceErrorBody({ error }) {
             children: id
           }, id)),
           /* @__PURE__ */ jsxs2("span", {
-            style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", fontFamily: SANS },
+            style: { color: DEVTOOL_COLOR_TEXT_MUTED2, fontSize: "10px", fontFamily: SANS },
             children: [
               "domain:",
               " ",
-              /* @__PURE__ */ jsx3("span", {
-                style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontFamily: MONO2 },
+              /* @__PURE__ */ jsx2("span", {
+                style: { color: DEVTOOL_COLOR_TEXT_MUTED2, fontFamily: MONO2 },
                 children: error.def.domain
               })
             ]
           }),
           /* @__PURE__ */ jsxs2("span", {
-            style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", fontFamily: SANS },
+            style: { color: DEVTOOL_COLOR_TEXT_MUTED2, fontSize: "10px", fontFamily: SANS },
             children: [
               "http:",
               " ",
-              /* @__PURE__ */ jsx3("span", {
-                style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontFamily: MONO2 },
+              /* @__PURE__ */ jsx2("span", {
+                style: { color: DEVTOOL_COLOR_TEXT_MUTED2, fontFamily: MONO2 },
                 children: error.httpStatusCode
               })
             ]
@@ -2412,11 +2308,11 @@ function NiceErrorDisplay({
 }) {
   return /* @__PURE__ */ jsxs2("div", {
     children: [
-      /* @__PURE__ */ jsx3(SectionLabel, {
+      /* @__PURE__ */ jsx2(SectionLabel, {
         label,
         color
       }),
-      /* @__PURE__ */ jsx3(NiceErrorBody, {
+      /* @__PURE__ */ jsx2(NiceErrorBody, {
         error
       })
     ]
@@ -2496,7 +2392,7 @@ async function resolveCompiledPosition(fileUrl, line, col) {
 }
 
 // src/devtools/browser/components/StackTraceSection.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var INTERNAL_PATTERNS = [
   "/nice-action/",
   "@nice-code/action",
@@ -2666,7 +2562,7 @@ function ProjectRootSetupModal({
       justifyContent: "center"
     },
     children: [
-      /* @__PURE__ */ jsx4("div", {
+      /* @__PURE__ */ jsx3("div", {
         onClick: onCancel,
         style: { position: "absolute", inset: 0, background: "rgba(0, 0, 0, 0.72)" }
       }),
@@ -2692,7 +2588,7 @@ function ProjectRootSetupModal({
               padding: "10px 14px"
             },
             children: [
-              /* @__PURE__ */ jsx4("div", {
+              /* @__PURE__ */ jsx3("div", {
                 style: {
                   color: DEVTOOL_COLOR_TEXT_EMPHASIS,
                   fontSize: "12px",
@@ -2702,13 +2598,13 @@ function ProjectRootSetupModal({
                 children: "Set project root"
               }),
               /* @__PURE__ */ jsxs3("div", {
-                style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
+                style: { color: DEVTOOL_COLOR_TEXT_MUTED2, fontSize: "10px" },
                 children: [
                   "Runtime:",
                   " ",
-                  /* @__PURE__ */ jsx4("span", {
+                  /* @__PURE__ */ jsx3("span", {
                     style: {
-                      color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+                      color: DEVTOOL_COLOR_SEMANTIC_SYSTEM2,
                       fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace"
                     },
                     children: envId
@@ -2721,11 +2617,11 @@ function ProjectRootSetupModal({
             style: { padding: "14px", display: "flex", flexDirection: "column", gap: "8px" },
             children: [
               /* @__PURE__ */ jsxs3("div", {
-                style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", lineHeight: 1.4 },
+                style: { color: DEVTOOL_COLOR_TEXT_MUTED2, 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__ */ jsx4("span", {
+                  /* @__PURE__ */ jsx3("span", {
                     style: {
                       fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace"
                     },
@@ -2734,7 +2630,7 @@ function ProjectRootSetupModal({
                   ") can be opened in VS Code."
                 ]
               }),
-              /* @__PURE__ */ jsx4("input", {
+              /* @__PURE__ */ jsx3("input", {
                 ref: inputRef,
                 value,
                 onChange: (e) => setValue(e.currentTarget.value),
@@ -2763,28 +2659,28 @@ function ProjectRootSetupModal({
               borderTop: `1px solid ${DEVTOOL_PANEL_BORDER}`
             },
             children: [
-              /* @__PURE__ */ jsx4("button", {
+              /* @__PURE__ */ jsx3("button", {
                 type: "button",
                 onClick: onCancel,
                 style: {
                   background: "transparent",
                   border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
                   borderRadius: "4px",
-                  color: DEVTOOL_COLOR_TEXT_MUTED,
+                  color: DEVTOOL_COLOR_TEXT_MUTED2,
                   fontSize: "11px",
                   padding: "5px 12px",
                   cursor: "pointer"
                 },
                 children: "Cancel"
               }),
-              /* @__PURE__ */ jsx4("button", {
+              /* @__PURE__ */ jsx3("button", {
                 type: "submit",
                 disabled: value.trim() === "",
                 style: {
-                  background: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM}22`,
-                  border: `1px solid ${DEVTOOL_COLOR_SEMANTIC_SYSTEM}66`,
+                  background: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM2}22`,
+                  border: `1px solid ${DEVTOOL_COLOR_SEMANTIC_SYSTEM2}66`,
                   borderRadius: "4px",
-                  color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+                  color: DEVTOOL_COLOR_SEMANTIC_SYSTEM2,
                   fontSize: "11px",
                   padding: "5px 12px",
                   cursor: value.trim() === "" ? "not-allowed" : "pointer",
@@ -2826,7 +2722,7 @@ function OpenInVscodeButton({
     flexShrink: 0
   };
   if (needsSetup) {
-    return /* @__PURE__ */ jsx4("button", {
+    return /* @__PURE__ */ jsx3("button", {
       onClick: (e) => {
         e.stopPropagation();
         onNeedSetup();
@@ -2836,18 +2732,18 @@ function OpenInVscodeButton({
       title: "Set project root to open in VS Code",
       style: {
         ...baseStyle,
-        color: DEVTOOL_COLOR_SEMANTIC_WARNING,
+        color: DEVTOOL_COLOR_SEMANTIC_WARNING2,
         background: "none",
         border: "none",
         padding: 0
       },
-      children: /* @__PURE__ */ jsx4(ExternalLink, {
+      children: /* @__PURE__ */ jsx3(ExternalLink, {
         size: 10,
         strokeWidth: 1.8
       })
     });
   }
-  return /* @__PURE__ */ jsx4("a", {
+  return /* @__PURE__ */ jsx3("a", {
     href: url,
     onClick: (e) => e.stopPropagation(),
     onMouseEnter: () => setHovered(true),
@@ -2858,7 +2754,7 @@ function OpenInVscodeButton({
       color: DEVTOOL_COLOR_TEXT_SECONDARY,
       textDecoration: "none"
     },
-    children: /* @__PURE__ */ jsx4(ExternalLink, {
+    children: /* @__PURE__ */ jsx3(ExternalLink, {
       size: 10,
       strokeWidth: 1.8
     })
@@ -2872,7 +2768,7 @@ function countUserFrames(_runtime, stack) {
 function StackTraceSection({
   label,
   stack,
-  color = DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+  color = DEVTOOL_COLOR_SEMANTIC_SYSTEM2,
   runtime,
   minFrameCount
 }) {
@@ -2926,12 +2822,12 @@ function StackTraceSection({
           marginBottom: "3px"
         },
         children: [
-          /* @__PURE__ */ jsx4(SectionLabel, {
+          /* @__PURE__ */ jsx3(SectionLabel, {
             label,
             color
           }),
-          hasInternalFrames && /* @__PURE__ */ jsx4("span", {
-            style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "9px" },
+          hasInternalFrames && /* @__PURE__ */ jsx3("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_MUTED2, fontSize: "9px" },
             children: !showAll ? "user only" : `all (${allFrames.length})`
           })
         ]
@@ -2946,10 +2842,10 @@ function StackTraceSection({
           cursor: "pointer"
         },
         children: [
-          displayFrames.length === 0 ? /* @__PURE__ */ jsx4("div", {
+          displayFrames.length === 0 ? /* @__PURE__ */ jsx3("div", {
             style: {
               padding: "6px 10px",
-              color: DEVTOOL_COLOR_TEXT_MUTED,
+              color: DEVTOOL_COLOR_TEXT_MUTED2,
               fontSize: "10px",
               fontStyle: "italic"
             },
@@ -2973,7 +2869,7 @@ function StackTraceSection({
                 borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
               },
               children: [
-                /* @__PURE__ */ jsx4("span", {
+                /* @__PURE__ */ jsx3("span", {
                   style: {
                     color: isUser ? DEVTOOL_STACK_FRAME_USER_NUMBER : DEVTOOL_STACK_FRAME_INTERNAL_NUMBER,
                     fontSize: "10px",
@@ -2992,9 +2888,9 @@ function StackTraceSection({
                     lineHeight: 1.2
                   },
                   children: [
-                    /* @__PURE__ */ jsx4("div", {
+                    /* @__PURE__ */ jsx3("div", {
                       style: { display: "flex", alignItems: "center" },
-                      children: /* @__PURE__ */ jsx4("span", {
+                      children: /* @__PURE__ */ jsx3("span", {
                         style: {
                           color: isUser ? DEVTOOL_STACK_FRAME_USER_FUNCTION : DEVTOOL_STACK_FRAME_INTERNAL_FUNCTION,
                           fontSize: "12px",
@@ -3009,7 +2905,7 @@ function StackTraceSection({
                     /* @__PURE__ */ jsxs3("div", {
                       style: { display: "flex", alignItems: "baseline", overflow: "hidden" },
                       children: [
-                        folderPrefix !== "" && /* @__PURE__ */ jsx4("span", {
+                        folderPrefix !== "" && /* @__PURE__ */ jsx3("span", {
                           style: {
                             color: isUser ? DEVTOOL_STACK_FRAME_USER_FOLDER : DEVTOOL_STACK_FRAME_INTERNAL_FOLDER,
                             fontSize: "10px",
@@ -3021,7 +2917,7 @@ function StackTraceSection({
                           },
                           children: folderPrefix
                         }),
-                        /* @__PURE__ */ jsx4("span", {
+                        /* @__PURE__ */ jsx3("span", {
                           style: {
                             color: isUser ? DEVTOOL_STACK_FRAME_USER_FILE : DEVTOOL_STACK_FRAME_INTERNAL_FILE,
                             fontSize: "10px",
@@ -3047,7 +2943,7 @@ function StackTraceSection({
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx4(OpenInVscodeButton, {
+                /* @__PURE__ */ jsx3(OpenInVscodeButton, {
                   frame,
                   projectRoot,
                   onNeedSetup: () => setShowSetupModal(true)
@@ -3066,18 +2962,18 @@ function StackTraceSection({
               borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
             },
             children: [
-              /* @__PURE__ */ jsx4("span", {
+              /* @__PURE__ */ jsx3("span", {
                 style: { fontSize: "10px", minWidth: "10px", flexShrink: 0 },
                 children: "0"
               }),
               /* @__PURE__ */ jsxs3("div", {
                 style: { display: "flex", flexDirection: "column", gap: "0.15em", lineHeight: 1.2 },
                 children: [
-                  /* @__PURE__ */ jsx4("div", {
+                  /* @__PURE__ */ jsx3("div", {
                     style: { fontSize: "12px" },
                     children: "placeholder"
                   }),
-                  /* @__PURE__ */ jsx4("div", {
+                  /* @__PURE__ */ jsx3("div", {
                     style: { fontSize: "10px" },
                     children: "placeholder/file.ts:1"
                   })
@@ -3087,7 +2983,7 @@ function StackTraceSection({
           }, `phantom-${i}`))
         ]
       }),
-      showSetupModal && /* @__PURE__ */ jsx4(ProjectRootSetupModal, {
+      showSetupModal && /* @__PURE__ */ jsx3(ProjectRootSetupModal, {
         envId: runtime.envId,
         currentValue: projectRoot ?? "",
         onSave: handleSaveProjectRoot,
@@ -3098,7 +2994,7 @@ function StackTraceSection({
 }
 
 // src/devtools/browser/components/ActionErrorDisplay.tsx
-import { jsx as jsx5, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
 var MONO3 = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
 var SANS2 = "ui-sans-serif, system-ui, -apple-system, sans-serif";
 function FullErrorContent({
@@ -3110,16 +3006,16 @@ function FullErrorContent({
 }) {
   return /* @__PURE__ */ jsxs4(Fragment, {
     children: [
-      isNiceErrorJson(error) ? /* @__PURE__ */ jsx5(NiceErrorDisplay, {
+      isNiceErrorJson(error) ? /* @__PURE__ */ jsx4(NiceErrorDisplay, {
         error,
         label,
         color
-      }) : /* @__PURE__ */ jsx5(DetailSection, {
+      }) : /* @__PURE__ */ jsx4(DetailSection, {
         label,
         value: error,
         color
       }),
-      /* @__PURE__ */ jsx5(StackTraceSection, {
+      /* @__PURE__ */ jsx4(StackTraceSection, {
         runtime,
         label: "Error Stack",
         stack: errorStack,
@@ -3139,7 +3035,7 @@ function CompactErrorContent({ value, color }) {
         minWidth: 0
       },
       children: [
-        /* @__PURE__ */ jsx5("div", {
+        /* @__PURE__ */ jsx4("div", {
           style: {
             color,
             fontFamily: SANS2,
@@ -3161,7 +3057,7 @@ function CompactErrorContent({ value, color }) {
             minWidth: 0
           },
           children: [
-            value.ids.map((id) => /* @__PURE__ */ jsx5("span", {
+            value.ids.map((id) => /* @__PURE__ */ jsx4("span", {
               style: {
                 color,
                 fontFamily: MONO3,
@@ -3172,9 +3068,9 @@ function CompactErrorContent({ value, color }) {
               },
               children: id
             }, id)),
-            /* @__PURE__ */ jsx5("span", {
+            /* @__PURE__ */ jsx4("span", {
               style: {
-                color: DEVTOOL_COLOR_TEXT_MUTED,
+                color: DEVTOOL_COLOR_TEXT_MUTED2,
                 fontFamily: MONO3,
                 fontSize: "10px",
                 wordBreak: "break-word",
@@ -3190,7 +3086,7 @@ function CompactErrorContent({ value, color }) {
   const text = typeof value === "string" ? value : value != null ? String(value) : null;
   if (text == null)
     return null;
-  return /* @__PURE__ */ jsx5("div", {
+  return /* @__PURE__ */ jsx4("div", {
     style: {
       color,
       fontFamily: SANS2,
@@ -3208,13 +3104,13 @@ function ActionErrorDisplay({
 }) {
   const { status, error, abortReason, errorStack } = entry;
   if (status === "action-error") {
-    const color = DEVTOOL_COLOR_SEMANTIC_ERROR;
+    const color = DEVTOOL_COLOR_SEMANTIC_ERROR2;
     if (compact)
-      return /* @__PURE__ */ jsx5(CompactErrorContent, {
+      return /* @__PURE__ */ jsx4(CompactErrorContent, {
         value: error,
         color
       });
-    return /* @__PURE__ */ jsx5(FullErrorContent, {
+    return /* @__PURE__ */ jsx4(FullErrorContent, {
       runtime: entry.meta.originClient,
       label: "Action Error",
       error,
@@ -3223,13 +3119,13 @@ function ActionErrorDisplay({
     });
   }
   if (status === "failed") {
-    const color = DEVTOOL_COLOR_SEMANTIC_ERROR;
+    const color = DEVTOOL_COLOR_SEMANTIC_ERROR2;
     if (compact)
-      return /* @__PURE__ */ jsx5(CompactErrorContent, {
+      return /* @__PURE__ */ jsx4(CompactErrorContent, {
         value: error,
         color
       });
-    return /* @__PURE__ */ jsx5(FullErrorContent, {
+    return /* @__PURE__ */ jsx4(FullErrorContent, {
       runtime: entry.meta.originClient,
       label: "Error",
       error,
@@ -3238,24 +3134,24 @@ function ActionErrorDisplay({
     });
   }
   if (status === "aborted") {
-    const color = DEVTOOL_COLOR_SEMANTIC_METADATA;
+    const color = DEVTOOL_COLOR_SEMANTIC_METADATA2;
     if (compact)
-      return /* @__PURE__ */ jsx5(CompactErrorContent, {
+      return /* @__PURE__ */ jsx4(CompactErrorContent, {
         value: abortReason,
         color
       });
     return /* @__PURE__ */ jsxs4(Fragment, {
       children: [
-        abortReason != null && (isNiceErrorJson(abortReason) ? /* @__PURE__ */ jsx5(NiceErrorDisplay, {
+        abortReason != null && (isNiceErrorJson(abortReason) ? /* @__PURE__ */ jsx4(NiceErrorDisplay, {
           error: abortReason,
           label: "Abort Reason",
           color
-        }) : /* @__PURE__ */ jsx5(DetailSection, {
+        }) : /* @__PURE__ */ jsx4(DetailSection, {
           label: "Abort Reason",
           value: abortReason,
           color
         })),
-        /* @__PURE__ */ jsx5(StackTraceSection, {
+        /* @__PURE__ */ jsx4(StackTraceSection, {
           runtime: entry.meta.originClient,
           label: "Abort Stack",
           stack: errorStack,
@@ -3271,114 +3167,13 @@ function ActionErrorDisplay({
 import { Component } from "lucide-react";
 
 // src/devtools/browser/components/Chip.tsx
-import { useState as useState4 } from "react";
+import { useState as useState3 } from "react";
 
 // src/devtools/browser/components/Tooltip.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx6, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
-function Tooltip({
-  anchor,
-  config,
-  children
-}) {
-  const resolvedTitle = config?.title;
-  const resolvedAlign = config?.align;
-  const resolvedMaxWidth = config?.maxWidth ?? 400;
-  const resolvedContent = config != null ? config.content : children;
-  const showAbove = anchor.top >= window.innerHeight - anchor.bottom;
-  const gap = 6;
-  const screenMargin = 16;
-  const top = showAbove ? Math.round(anchor.top - gap) : Math.round(anchor.bottom + gap);
-  const maxHeight = showAbove ? Math.round(anchor.top - gap - screenMargin) : Math.round(window.innerHeight - anchor.bottom - gap - screenMargin);
-  let left;
-  let right;
-  let transform;
-  if (resolvedAlign === "center") {
-    const halfMax = resolvedMaxWidth != null ? resolvedMaxWidth / 2 : 120;
-    const center = Math.round(anchor.left + anchor.width / 2);
-    left = Math.max(halfMax + screenMargin, Math.min(center, window.innerWidth - halfMax - screenMargin));
-    transform = showAbove ? "translateX(-50%) translateY(-100%)" : "translateX(-50%)";
-  } else {
-    const anchorMidX = anchor.left + anchor.width / 2;
-    if (anchorMidX <= window.innerWidth / 2) {
-      left = Math.max(screenMargin, anchor.left);
-    } else {
-      right = Math.max(screenMargin, window.innerWidth - anchor.right);
-    }
-    if (showAbove)
-      transform = "translateY(-100%)";
-  }
-  return /* @__PURE__ */ jsxs5("div", {
-    style: {
-      position: "fixed",
-      left,
-      right,
-      top,
-      transform,
-      zIndex: 2147483647,
-      background: DEVTOOL_TOOLTIP_BACKGROUND,
-      border: `1px solid ${DEVTOOL_TOOLTIP_BORDER}`,
-      borderRadius: "5px",
-      boxShadow: "0 4px 20px rgba(0,0,0,0.6)",
-      pointerEvents: "none",
-      maxWidth: resolvedMaxWidth != null ? `${resolvedMaxWidth}px` : undefined,
-      maxHeight: `${maxHeight}px`,
-      overflowY: "auto",
-      overflowX: "hidden",
-      whiteSpace: "normal",
-      wordBreak: "break-word",
-      overflowWrap: "anywhere"
-    },
-    children: [
-      resolvedTitle != null && /* @__PURE__ */ jsx6("div", {
-        style: {
-          background: DEVTOOL_TOOLTIP_TITLE_BACKGROUND,
-          padding: "6px 8px",
-          alignSelf: "start",
-          textAlign: "left",
-          color: DEVTOOL_COLOR_TEXT_SECONDARY,
-          fontSize: "0.75rem",
-          fontWeight: 600,
-          paddingBottom: "4px",
-          marginBottom: "4px",
-          borderBottom: `1px solid ${DEVTOOL_TOOLTIP_TITLE_BOTTOM_BORDER}`
-        },
-        children: resolvedTitle
-      }),
-      /* @__PURE__ */ jsx6("div", {
-        style: {
-          padding: "6px 8px"
-        },
-        children: resolvedContent
-      })
-    ]
-  });
-}
-function HoverTooltip({
-  config,
-  children,
-  style
-}) {
-  const [anchor, setAnchor] = useState3(null);
-  const enabled = config != null;
-  return /* @__PURE__ */ jsxs5(Fragment2, {
-    children: [
-      /* @__PURE__ */ jsx6("span", {
-        onMouseEnter: enabled ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
-        onMouseLeave: enabled ? () => setAnchor(null) : undefined,
-        style: { ...style, cursor: enabled ? "default" : style?.cursor },
-        children
-      }),
-      enabled && anchor != null && config != null && /* @__PURE__ */ jsx6(Tooltip, {
-        anchor,
-        config
-      })
-    ]
-  });
-}
+import { HoverTooltip, Tooltip } from "nice-devtools-shared";
 
 // src/devtools/browser/components/Chip.tsx
-import { jsx as jsx7, jsxs as jsxs6, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
 var CHIP_SIZE_STYLES = {
   ["sm" /* sm */]: { fontSize: "0.8em", padding: "1px 3px" },
   ["md" /* md */]: { fontSize: "0.9em", padding: "1px 4px" },
@@ -3392,15 +3187,15 @@ function Chip({
   tooltip,
   children
 }) {
-  const [anchor, setAnchor] = useState4(null);
+  const [anchor, setAnchor] = useState3(null);
   const hasTooltip = tooltip != null;
   const { fontSize, padding } = CHIP_SIZE_STYLES[size];
   const colorEntry = SEMANTIC_COLORS[color];
   const resolvedColor = subtle ? colorEntry.subtle?.color ?? colorEntry.color : colorEntry.color;
   const resolvedBorderColor = subtle ? colorEntry.subtle?.borderColor ?? "transparent" : colorEntry.borderColor;
-  return /* @__PURE__ */ jsxs6(Fragment3, {
+  return /* @__PURE__ */ jsxs5(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx7("span", {
+      /* @__PURE__ */ jsx5("span", {
         onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
         onMouseLeave: hasTooltip ? () => setAnchor(null) : undefined,
         style: {
@@ -3418,7 +3213,7 @@ function Chip({
         },
         children
       }),
-      anchor != null && hasTooltip && /* @__PURE__ */ jsx7(Tooltip, {
+      anchor != null && hasTooltip && /* @__PURE__ */ jsx5(Tooltip, {
         anchor,
         config: tooltip
       })
@@ -3427,8 +3222,8 @@ function Chip({
 }
 
 // src/devtools/browser/components/Icon.tsx
-import { useState as useState5 } from "react";
-import { jsx as jsx8, jsxs as jsxs7, Fragment as Fragment4 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { jsx as jsx6, jsxs as jsxs6, Fragment as Fragment3 } from "react/jsx-runtime";
 var BASE_ICON_SIDE_LENGTH_EM = 1.6;
 var ICON_GAP_EM = 0.3;
 function Icon({
@@ -3440,16 +3235,16 @@ function Icon({
   style,
   noBackground = false
 }) {
-  const [anchor, setAnchor] = useState5(null);
+  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__ */ jsxs7(Fragment4, {
+  return /* @__PURE__ */ jsxs6(Fragment3, {
     children: [
-      /* @__PURE__ */ jsx8("div", {
+      /* @__PURE__ */ jsx6("div", {
         onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
         onMouseLeave: hasTooltip ? () => setAnchor(null) : undefined,
         style: {
@@ -3466,15 +3261,15 @@ function Icon({
           cursor: hasTooltip ? "default" : undefined,
           ...style
         },
-        children: /* @__PURE__ */ jsx8("div", {
+        children: /* @__PURE__ */ jsx6("div", {
           style: { display: "flex", alignItems: "center", gap: `${ICON_GAP_EM}em` },
-          children: finalIcons.map((Comp, i) => /* @__PURE__ */ jsx8(Comp, {
+          children: finalIcons.map((Comp, i) => /* @__PURE__ */ jsx6(Comp, {
             size: iconSideLengthEm,
             strokeWidth: 2.6
           }, `${Comp.name}-${i}`))
         })
       }),
-      anchor != null && hasTooltip && /* @__PURE__ */ jsx8(Tooltip, {
+      anchor != null && hasTooltip && /* @__PURE__ */ jsx6(Tooltip, {
         anchor,
         config: tooltip
       })
@@ -3483,12 +3278,12 @@ function Icon({
 }
 
 // src/devtools/browser/components/DomainChip.tsx
-import { jsx as jsx9, jsxs as jsxs8, Fragment as Fragment5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7, Fragment as Fragment4 } from "react/jsx-runtime";
 function DomainHierarchyContent({ allDomains }) {
-  return /* @__PURE__ */ jsx9(Fragment5, {
+  return /* @__PURE__ */ jsx7(Fragment4, {
     children: allDomains.map((d, i) => {
       const isCurrent = i === allDomains.length - 1;
-      return /* @__PURE__ */ jsxs8("div", {
+      return /* @__PURE__ */ jsxs7("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -3497,22 +3292,22 @@ function DomainHierarchyContent({ allDomains }) {
           paddingTop: i > 0 ? "0.1rem" : undefined
         },
         children: [
-          /* @__PURE__ */ jsx9("span", {
+          /* @__PURE__ */ jsx7("span", {
             style: {
               fontSize: "0.8rem",
               height: "0.6em",
               width: "0.6em",
               overflow: "hidden",
-              color: isCurrent ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "#3730a3",
+              color: isCurrent ? DEVTOOL_COLOR_SEMANTIC_SYSTEM2 : "#3730a3",
               display: "flex",
               alignItems: "center",
               justifyContent: "center"
             },
             children: "⬢"
           }),
-          /* @__PURE__ */ jsx9("span", {
+          /* @__PURE__ */ jsx7("span", {
             style: {
-              color: isCurrent ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "#4b5563",
+              color: isCurrent ? DEVTOOL_COLOR_SEMANTIC_SYSTEM2 : "#4b5563",
               fontSize: "0.7rem",
               fontWeight: isCurrent ? 500 : undefined
             },
@@ -3531,11 +3326,11 @@ function DomainChip({
   size
 }) {
   if (compact) {
-    return /* @__PURE__ */ jsx9(Icon, {
+    return /* @__PURE__ */ jsx7(Icon, {
       icon: Component,
       color: "domain" /* domain */,
       tooltip: {
-        content: /* @__PURE__ */ jsx9(DomainHierarchyContent, {
+        content: /* @__PURE__ */ jsx7(DomainHierarchyContent, {
           allDomains
         }),
         title: "Action Domain",
@@ -3543,22 +3338,22 @@ function DomainChip({
       }
     });
   }
-  return /* @__PURE__ */ jsx9(Chip, {
+  return /* @__PURE__ */ jsx7(Chip, {
     color: "domain" /* domain */,
     subtle,
     size,
     rounded: true,
     tooltip: {
-      content: /* @__PURE__ */ jsx9(DomainHierarchyContent, {
+      content: /* @__PURE__ */ jsx7(DomainHierarchyContent, {
         allDomains
       }),
       title: "Action Domain",
       align: "edge"
     },
-    children: /* @__PURE__ */ jsxs8("div", {
+    children: /* @__PURE__ */ jsxs7("div", {
       style: { display: "flex", alignItems: "center", gap: "0.4em" },
       children: [
-        /* @__PURE__ */ jsx9("span", {
+        /* @__PURE__ */ jsx7("span", {
           style: {
             height: "1.2em",
             width: "1.2em",
@@ -3566,12 +3361,12 @@ function DomainChip({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ jsx9(Component, {
+          children: /* @__PURE__ */ jsx7(Component, {
             height: "1.2em",
             width: "1.2em"
           })
         }),
-        /* @__PURE__ */ jsx9("span", {
+        /* @__PURE__ */ jsx7("span", {
           children: domain
         })
       ]
@@ -3580,7 +3375,7 @@ function DomainChip({
 }
 
 // src/devtools/browser/components/HandlerChips.tsx
-import { jsx as jsx10, jsxs as jsxs9, Fragment as Fragment6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8, Fragment as Fragment5 } from "react/jsx-runtime";
 function getExternalLabel(hop) {
   if (hop.handlerType !== "external")
     return null;
@@ -3595,16 +3390,16 @@ function getTransportTooltipForHops(hops) {
     return;
   return {
     title: "Transport",
-    content: /* @__PURE__ */ jsx10("div", {
+    content: /* @__PURE__ */ jsx8("div", {
       style: { display: "flex", flexDirection: "column", gap: "6px", fontSize: "11px" },
-      children: lines.map((line) => /* @__PURE__ */ jsxs9("div", {
+      children: lines.map((line) => /* @__PURE__ */ jsxs8("div", {
         style: { display: "flex", flexDirection: "column", gap: "2px" },
         children: [
-          line.summary != null && /* @__PURE__ */ jsx10("span", {
+          line.summary != null && /* @__PURE__ */ jsx8("span", {
             children: line.summary
           }),
-          line.url != null && line.url !== line.summary && /* @__PURE__ */ jsx10("span", {
-            style: { color: DEVTOOL_COLOR_TEXT_MUTED, wordBreak: "break-all" },
+          line.url != null && line.url !== line.summary && /* @__PURE__ */ jsx8("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_MUTED2, wordBreak: "break-all" },
             children: line.url
           })
         ]
@@ -3617,15 +3412,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__ */ jsxs9(Fragment6, {
+  return /* @__PURE__ */ jsxs8(Fragment5, {
     children: [
-      localEnvId != null && (firstHopIsLocal || externalLabel == null) && /* @__PURE__ */ jsx10(Chip, {
+      localEnvId != null && (firstHopIsLocal || externalLabel == null) && /* @__PURE__ */ jsx8(Chip, {
         color: "handler_local" /* handler_local */,
         size,
         subtle,
         children: localEnvId
       }),
-      externalLabel != null && /* @__PURE__ */ jsx10(Chip, {
+      externalLabel != null && /* @__PURE__ */ jsx8(Chip, {
         color: "handler_external" /* handler_external */,
         size,
         subtle,
@@ -3637,15 +3432,62 @@ function HandlerChips({ entry, size, subtle }) {
 }
 
 // src/devtools/browser/components/RunningTimer.tsx
-import { useEffect as useEffect2, useState as useState6 } from "react";
-import { jsx as jsx11, jsxs as jsxs10, Fragment as Fragment7 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useState as useState5 } from "react";
+
+// src/devtools/browser/components/utils.ts
+import { Circle, CircleAlert, CircleCheck, CircleX, Loader2 } from "lucide-react";
+import { formatRelativeAge, formatTimestamp, safeStringify as safeStringify2 } from "nice-devtools-shared";
+var STATUS_COLOR = {
+  running: DEVTOOL_COLOR_SEMANTIC_SYSTEM2,
+  success: DEVTOOL_COLOR_SEMANTIC_SUCCESS2,
+  "action-error": DEVTOOL_COLOR_SEMANTIC_WARNING2,
+  failed: DEVTOOL_COLOR_SEMANTIC_ERROR2,
+  aborted: DEVTOOL_COLOR_SEMANTIC_METADATA2
+};
+var STATUS_THING = {
+  running: "running_action" /* running_action */,
+  success: "success" /* success */,
+  "action-error": "action_error" /* action_error */,
+  failed: "failed" /* failed */,
+  aborted: "aborted" /* aborted */
+};
+var STATUS_SYMBOL = {
+  running: "●",
+  success: "✓",
+  "action-error": "!",
+  failed: "✗",
+  aborted: "○"
+};
+var STATUS_ICON = {
+  running: Loader2,
+  success: CircleCheck,
+  "action-error": CircleAlert,
+  failed: CircleX,
+  aborted: Circle
+};
+function getInboundOrigin(entry) {
+  const origin = entry.meta.originClient;
+  if (origin == null || origin.envId === "unknown" || origin.envId === "_unset_")
+    return null;
+  const local = entry.meta.routing[0]?.runtime;
+  if (local == null)
+    return null;
+  const sameRuntime = origin.envId === local.envId && (origin.perId ?? null) === (local.perId ?? null) && (origin.insId ?? null) === (local.insId ?? null);
+  return sameRuntime ? null : origin;
+}
+function formatDuration(entry) {
+  return entry.endTime != null ? `${entry.endTime - entry.startTime}ms` : null;
+}
+
+// src/devtools/browser/components/RunningTimer.tsx
+import { jsx as jsx9, jsxs as jsxs9, Fragment as Fragment6 } from "react/jsx-runtime";
 function RunningTimer({ startTime }) {
-  const [elapsed, setElapsed] = useState6(() => 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__ */ jsxs10(Fragment7, {
+  return /* @__PURE__ */ jsxs9(Fragment6, {
     children: [
       elapsed,
       "ms"
@@ -3654,15 +3496,15 @@ function RunningTimer({ startTime }) {
 }
 function DurationDisplay({ entry }) {
   const d = formatDuration(entry);
-  return /* @__PURE__ */ jsx11(Fragment7, {
-    children: d ?? /* @__PURE__ */ jsx11(RunningTimer, {
+  return /* @__PURE__ */ jsx9(Fragment6, {
+    children: d ?? /* @__PURE__ */ jsx9(RunningTimer, {
       startTime: entry.startTime
     })
   });
 }
 
 // src/devtools/browser/components/CallStackSection.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function getCalledLabel(entry) {
   const firstHop = entry.meta.routing[0];
   if (firstHop == null)
@@ -3675,7 +3517,7 @@ function getCalledLabel(entry) {
 function getCalledColor(entry) {
   const firstHop = entry.meta.routing[0];
   if (firstHop == null)
-    return DEVTOOL_COLOR_SEMANTIC_SYSTEM;
+    return DEVTOOL_COLOR_SEMANTIC_SYSTEM2;
   if (firstHop.handlerType === "local")
     return DEVTOOL_COLOR_HANDLER_LOCAL_TEXT;
   return DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT;
@@ -3692,12 +3534,12 @@ function CallStackLink({
   const label = entryRole === "caller" ? "↑ from" : getCalledLabel(entry);
   const firstHop = entry.meta.routing[0];
   const transportTooltip = entryRole === "called" && firstHop != null ? getTransportTooltip(firstHop) : undefined;
-  return /* @__PURE__ */ jsxs11("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     onClick,
     style: {
-      background: isFocused ? DEVTOOL_SECTION_BACKGROUND : DEVTOOL_DETAIL_HEADER_BACKGROUND,
+      background: isFocused ? DEVTOOL_SECTION_BACKGROUND2 : DEVTOOL_DETAIL_HEADER_BACKGROUND,
       borderBottom: `1px solid ${DEVTOOL_COLOR_CALL_STACK_DIVIDER}`,
-      borderLeft: isFocused ? `2px solid ${DEVTOOL_COLOR_SEMANTIC_SYSTEM}` : "2px solid transparent",
+      borderLeft: isFocused ? `2px solid ${DEVTOOL_COLOR_SEMANTIC_SYSTEM2}` : "2px solid transparent",
       padding: "5px 12px 5px 10px",
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
@@ -3706,25 +3548,25 @@ function CallStackLink({
       cursor: "pointer"
     },
     children: [
-      /* @__PURE__ */ jsxs11("span", {
+      /* @__PURE__ */ jsxs10("span", {
         style: { display: "flex", alignItems: "center", gap: "1em", flexShrink: 0 },
         children: [
-          /* @__PURE__ */ jsx12("span", {
+          /* @__PURE__ */ jsx10("span", {
             style: { color, fontSize: "10px", flexShrink: 0 },
             children: symbol
           }),
-          /* @__PURE__ */ jsx12(HoverTooltip, {
+          /* @__PURE__ */ jsx10(HoverTooltip, {
             config: transportTooltip,
             style: { flexShrink: 0, display: "flex" },
-            children: /* @__PURE__ */ jsx12("span", {
+            children: /* @__PURE__ */ jsx10("span", {
               style: { color: labelColor, fontSize: "9px" },
               children: label
             })
           }),
-          /* @__PURE__ */ jsxs11("span", {
+          /* @__PURE__ */ jsxs10("span", {
             style: { display: "flex", alignItems: "center", gap: "5px" },
             children: [
-              /* @__PURE__ */ jsx12("span", {
+              /* @__PURE__ */ jsx10("span", {
                 style: {
                   color: DEVTOOL_COLOR_TEXT_SECONDARY,
                   fontSize: "11px",
@@ -3734,7 +3576,7 @@ function CallStackLink({
                 },
                 children: entry.actionId
               }),
-              /* @__PURE__ */ jsx12(DomainChip, {
+              /* @__PURE__ */ jsx10(DomainChip, {
                 domain: entry.domain,
                 allDomains: entry.allDomains,
                 size: "sm" /* sm */
@@ -3743,14 +3585,14 @@ function CallStackLink({
           })
         ]
       }),
-      /* @__PURE__ */ jsx12("span", {
+      /* @__PURE__ */ jsx10("span", {
         style: {
-          color: DEVTOOL_COLOR_TEXT_FAINT,
+          color: DEVTOOL_COLOR_TEXT_FAINT2,
           fontSize: "10px",
           textAlign: "right",
           whiteSpace: "nowrap"
         },
-        children: /* @__PURE__ */ jsx12(DurationDisplay, {
+        children: /* @__PURE__ */ jsx10(DurationDisplay, {
           entry
         })
       })
@@ -3766,15 +3608,15 @@ function CallStackSection({
 }) {
   if (parent == null && childEntries.length === 0)
     return null;
-  return /* @__PURE__ */ jsxs11("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     children: [
-      parent != null && /* @__PURE__ */ jsx12(CallStackLink, {
+      parent != null && /* @__PURE__ */ jsx10(CallStackLink, {
         entry: parent,
         entryRole: "caller",
         isFocused: false,
         onClick: () => onSelectParent(parent.cuid)
       }),
-      childEntries.map((child) => /* @__PURE__ */ jsx12(CallStackLink, {
+      childEntries.map((child) => /* @__PURE__ */ jsx10(CallStackLink, {
         entry: child,
         entryRole: "called",
         isFocused: focusedChildCuid === child.cuid,
@@ -3785,7 +3627,7 @@ function CallStackSection({
 }
 
 // src/devtools/browser/components/ChildDispatchChips.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function ChildDispatchChips({
   childRouteItems,
   size = "sm" /* sm */
@@ -3806,12 +3648,12 @@ function ChildDispatchChips({
       group.transports.push(transport);
     }
   }
-  return /* @__PURE__ */ jsx13("div", {
+  return /* @__PURE__ */ jsx11("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__ */ jsx13(Chip, {
+      return /* @__PURE__ */ jsx11(Chip, {
         color: "handler_external" /* handler_external */,
         size,
         tooltip: getTransportTooltipForHops(group.hops),
@@ -3822,20 +3664,20 @@ function ChildDispatchChips({
 }
 
 // src/devtools/browser/components/MetaSection.tsx
-import { useState as useState7 } from "react";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function MetaChip({ label, value }) {
-  return /* @__PURE__ */ jsxs12("span", {
+  return /* @__PURE__ */ jsxs11("span", {
     style: { whiteSpace: "nowrap" },
     children: [
-      /* @__PURE__ */ jsxs12("span", {
-        style: { color: DEVTOOL_COLOR_TEXT_MUTED },
+      /* @__PURE__ */ jsxs11("span", {
+        style: { color: DEVTOOL_COLOR_TEXT_MUTED2 },
         children: [
           label,
           " "
         ]
       }),
-      /* @__PURE__ */ jsx14("span", {
+      /* @__PURE__ */ jsx12("span", {
         style: { color: DEVTOOL_COLOR_TEXT_SECONDARY },
         children: value
       })
@@ -3843,7 +3685,7 @@ function MetaChip({ label, value }) {
   });
 }
 function MetaSection({ entry }) {
-  const [expanded, setExpanded] = useState7(false);
+  const [expanded, setExpanded] = useState6(false);
   const { meta, cuid } = entry;
   const expandedRows = [
     { label: "cuid", value: cuid },
@@ -3851,9 +3693,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__ */ jsxs12("div", {
+  return /* @__PURE__ */ jsxs11("div", {
     children: [
-      /* @__PURE__ */ jsxs12("div", {
+      /* @__PURE__ */ jsxs11("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -3861,30 +3703,30 @@ function MetaSection({ entry }) {
           marginBottom: "3px"
         },
         children: [
-          /* @__PURE__ */ jsx14("div", {
+          /* @__PURE__ */ jsx12("div", {
             style: {
-              color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+              color: DEVTOOL_COLOR_SEMANTIC_SYSTEM2,
               fontSize: "10px",
               textTransform: "uppercase",
               letterSpacing: "0.05em"
             },
             children: "Meta"
           }),
-          /* @__PURE__ */ jsx14("span", {
-            style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "11px" },
+          /* @__PURE__ */ jsx12("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_FAINT2, fontSize: "11px" },
             children: expanded ? "▾" : "▸"
           })
         ]
       }),
-      expanded ? /* @__PURE__ */ jsx14("div", {
+      expanded ? /* @__PURE__ */ jsx12("div", {
         onClick: () => setExpanded(false),
         style: {
-          background: DEVTOOL_SECTION_BACKGROUND,
+          background: DEVTOOL_SECTION_BACKGROUND2,
           borderRadius: "4px",
           overflow: "hidden",
           cursor: "pointer"
         },
-        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxs12("div", {
+        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxs11("div", {
           style: {
             display: "grid",
             gridTemplateColumns: "52px 1fr",
@@ -3894,16 +3736,16 @@ function MetaSection({ entry }) {
             alignItems: "start"
           },
           children: [
-            /* @__PURE__ */ jsx14("span", {
+            /* @__PURE__ */ jsx12("span", {
               style: {
                 textAlign: "left",
-                color: DEVTOOL_COLOR_TEXT_MUTED,
+                color: DEVTOOL_COLOR_TEXT_MUTED2,
                 fontSize: "10px",
                 paddingTop: "1px"
               },
               children: label
             }),
-            /* @__PURE__ */ jsx14("span", {
+            /* @__PURE__ */ jsx12("span", {
               style: {
                 textAlign: "left",
                 color: DEVTOOL_COLOR_TEXT_SECONDARY,
@@ -3914,10 +3756,10 @@ function MetaSection({ entry }) {
             })
           ]
         }, label))
-      }) : /* @__PURE__ */ jsxs12("div", {
+      }) : /* @__PURE__ */ jsxs11("div", {
         onClick: () => setExpanded(true),
         style: {
-          background: DEVTOOL_SECTION_BACKGROUND,
+          background: DEVTOOL_SECTION_BACKGROUND2,
           borderRadius: "4px",
           padding: "5px 8px",
           fontSize: "11px",
@@ -3928,19 +3770,19 @@ function MetaSection({ entry }) {
           cursor: "pointer"
         },
         children: [
-          /* @__PURE__ */ jsx14(MetaChip, {
+          /* @__PURE__ */ jsx12(MetaChip, {
             label: "cuid",
             value: `…${cuid.slice(-8)}`
           }),
-          /* @__PURE__ */ jsx14(MetaChip, {
+          /* @__PURE__ */ jsx12(MetaChip, {
             label: "runtime",
             value: meta.originClient.envId
           }),
-          meta.originClient.perId != null && /* @__PURE__ */ jsx14(MetaChip, {
+          meta.originClient.perId != null && /* @__PURE__ */ jsx12(MetaChip, {
             label: "perId",
             value: meta.originClient.perId.length > 10 ? `${meta.originClient.perId.slice(0, 10)}…` : meta.originClient.perId
           }),
-          meta.originClient.insId != null && /* @__PURE__ */ jsx14(MetaChip, {
+          meta.originClient.insId != null && /* @__PURE__ */ jsx12(MetaChip, {
             label: "insId",
             value: meta.originClient.insId.length > 10 ? `${meta.originClient.insId.slice(0, 10)}…` : meta.originClient.insId
           })
@@ -3951,34 +3793,34 @@ function MetaSection({ entry }) {
 }
 
 // src/devtools/browser/components/OriginChip.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function OriginChip({
   origin,
   size = "md" /* md */,
   subtle
 }) {
-  return /* @__PURE__ */ jsx15(Chip, {
+  return /* @__PURE__ */ jsx13(Chip, {
     color: "origin" /* origin */,
     size,
     subtle,
     tooltip: {
       title: "Received from",
-      content: /* @__PURE__ */ jsxs13("div", {
+      content: /* @__PURE__ */ jsxs12("div", {
         style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "11px" },
         children: [
-          /* @__PURE__ */ jsxs13("span", {
+          /* @__PURE__ */ jsxs12("span", {
             children: [
               "env ",
               origin.envId
             ]
           }),
-          origin.perId != null && /* @__PURE__ */ jsxs13("span", {
+          origin.perId != null && /* @__PURE__ */ jsxs12("span", {
             children: [
               "perId ",
               origin.perId
             ]
           }),
-          origin.insId != null && /* @__PURE__ */ jsxs13("span", {
+          origin.insId != null && /* @__PURE__ */ jsxs12("span", {
             children: [
               "insId ",
               origin.insId
@@ -3992,7 +3834,7 @@ function OriginChip({
 }
 
 // src/devtools/browser/components/RoutingSection.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function RoutingSection({
   entry,
   minHopCount = 0
@@ -4002,24 +3844,24 @@ function RoutingSection({
   const phantomCount = Math.max(0, minHopCount - hopCount);
   if (hopCount === 0 && phantomCount === 0)
     return null;
-  return /* @__PURE__ */ jsxs14("div", {
+  return /* @__PURE__ */ jsxs13("div", {
     children: [
-      /* @__PURE__ */ jsx16(SectionLabel, {
+      /* @__PURE__ */ jsx14(SectionLabel, {
         label: hopCount > 0 ? `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}` : "Routing"
       }),
-      /* @__PURE__ */ jsxs14("div", {
+      /* @__PURE__ */ jsxs13("div", {
         style: { display: "flex", flexDirection: "column", gap: "2px" },
         children: [
           meta.routing.map((hop, i) => {
             const isLocal = hop.handlerType === "local";
             const isLast = i === hopCount - 1 && phantomCount === 0;
-            const badgeColor = isLocal ? DEVTOOL_COLOR_SEMANTIC_SUCCESS : DEVTOOL_COLOR_SEMANTIC_WARNING;
+            const badgeColor = isLocal ? DEVTOOL_COLOR_SEMANTIC_SUCCESS2 : DEVTOOL_COLOR_SEMANTIC_WARNING2;
             const badgeText = isLocal ? "● exec" : `→ ${hop.transportSummary ?? hop.transport ?? "ext"}`;
             const transportTooltip = isLocal ? undefined : getTransportTooltip(hop);
             const runtimeTitle = [hop.runtime.perId, hop.runtime.insId].filter(Boolean).join(" · ") || undefined;
-            return /* @__PURE__ */ jsxs14("div", {
+            return /* @__PURE__ */ jsxs13("div", {
               style: {
-                background: DEVTOOL_SECTION_BACKGROUND,
+                background: DEVTOOL_SECTION_BACKGROUND2,
                 borderRadius: "4px",
                 overflow: "hidden",
                 display: "grid",
@@ -4030,19 +3872,19 @@ function RoutingSection({
                 padding: "4px 8px"
               },
               children: [
-                /* @__PURE__ */ jsxs14("span", {
+                /* @__PURE__ */ jsxs13("span", {
                   style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                   children: [
-                    /* @__PURE__ */ jsx16("span", {
+                    /* @__PURE__ */ jsx14("span", {
                       style: {
-                        color: DEVTOOL_COLOR_TEXT_FAINT,
+                        color: DEVTOOL_COLOR_TEXT_FAINT2,
                         fontSize: "10px",
                         width: "16px",
                         textAlign: "right"
                       },
                       children: i + 1
                     }),
-                    /* @__PURE__ */ jsx16("span", {
+                    /* @__PURE__ */ jsx14("span", {
                       title: runtimeTitle,
                       style: {
                         color: DEVTOOL_COLOR_TEXT_SECONDARY,
@@ -4056,10 +3898,10 @@ function RoutingSection({
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx16(HoverTooltip, {
+                /* @__PURE__ */ jsx14(HoverTooltip, {
                   config: transportTooltip,
                   style: { display: "block", minWidth: 0, overflow: "hidden" },
-                  children: /* @__PURE__ */ jsx16("span", {
+                  children: /* @__PURE__ */ jsx14("span", {
                     style: {
                       color: badgeColor,
                       fontSize: "10px",
@@ -4071,7 +3913,7 @@ function RoutingSection({
                     children: badgeText
                   })
                 }),
-                /* @__PURE__ */ jsxs14("span", {
+                /* @__PURE__ */ jsxs13("span", {
                   style: {
                     display: "flex",
                     alignItems: "center",
@@ -4080,9 +3922,9 @@ function RoutingSection({
                     overflow: "hidden"
                   },
                   children: [
-                    /* @__PURE__ */ jsx16("span", {
+                    /* @__PURE__ */ jsx14("span", {
                       style: {
-                        color: DEVTOOL_COLOR_TEXT_MUTED,
+                        color: DEVTOOL_COLOR_TEXT_MUTED2,
                         fontSize: "10px",
                         whiteSpace: "nowrap",
                         overflow: "hidden",
@@ -4090,9 +3932,9 @@ function RoutingSection({
                       },
                       children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
                     }),
-                    /* @__PURE__ */ jsxs14("span", {
+                    /* @__PURE__ */ jsxs13("span", {
                       style: {
-                        color: DEVTOOL_COLOR_TEXT_FAINT,
+                        color: DEVTOOL_COLOR_TEXT_FAINT2,
                         fontSize: "10px",
                         flexShrink: 0,
                         marginLeft: "auto"
@@ -4108,11 +3950,11 @@ function RoutingSection({
               ]
             }, `${hop.time}-${hop.runtime.envId}`);
           }),
-          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxs14("div", {
+          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxs13("div", {
             "aria-hidden": "true",
             style: {
               visibility: "hidden",
-              background: DEVTOOL_SECTION_BACKGROUND,
+              background: DEVTOOL_SECTION_BACKGROUND2,
               borderRadius: "4px",
               display: "grid",
               gridTemplateColumns: "30% 1fr 30%",
@@ -4121,24 +3963,24 @@ function RoutingSection({
               padding: "4px 8px"
             },
             children: [
-              /* @__PURE__ */ jsxs14("span", {
+              /* @__PURE__ */ jsxs13("span", {
                 style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                 children: [
-                  /* @__PURE__ */ jsx16("span", {
+                  /* @__PURE__ */ jsx14("span", {
                     style: { fontSize: "10px", width: "16px" },
                     children: "0"
                   }),
-                  /* @__PURE__ */ jsx16("span", {
+                  /* @__PURE__ */ jsx14("span", {
                     style: { fontSize: "11px" },
                     children: "placeholder"
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx16("span", {
+              /* @__PURE__ */ jsx14("span", {
                 style: { fontSize: "10px" },
                 children: "placeholder"
               }),
-              /* @__PURE__ */ jsx16("span", {})
+              /* @__PURE__ */ jsx14("span", {})
             ]
           }, key))
         ]
@@ -4148,7 +3990,7 @@ function RoutingSection({
 }
 
 // src/devtools/browser/components/action_detail/ActionDetailPanel.tsx
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var STATUS_BADGE_LABEL = {
   running: "RUNNING",
   success: "SUCCESS",
@@ -4159,9 +4001,9 @@ var STATUS_BADGE_LABEL = {
 var STATUS_BADGE_BG = {
   running: STATUS_COLOR.running,
   success: STATUS_COLOR.success,
-  "action-error": DEVTOOL_COLOR_SEMANTIC_ERROR,
-  failed: DEVTOOL_COLOR_SEMANTIC_ERROR,
-  aborted: DEVTOOL_COLOR_SEMANTIC_METADATA
+  "action-error": DEVTOOL_COLOR_SEMANTIC_ERROR2,
+  failed: DEVTOOL_COLOR_SEMANTIC_ERROR2,
+  aborted: DEVTOOL_COLOR_SEMANTIC_METADATA2
 };
 var STATUS_BADGE_TEXT_COLOR = {
   running: "#0f172a",
@@ -4180,11 +4022,11 @@ function DetailHeader({
   const StatusIconComponent = STATUS_ICON[entry.status];
   const timestamp = formatTimestamp(entry.startTime);
   const inboundOrigin = getInboundOrigin(entry);
-  return /* @__PURE__ */ jsx17("div", {
+  return /* @__PURE__ */ jsx15("div", {
     onClick: !isActive ? onClick : undefined,
     style: {
       padding: "0.5em 1em",
-      background: isActive ? DEVTOOL_SECTION_BACKGROUND : DEVTOOL_DETAIL_HEADER_BACKGROUND,
+      background: isActive ? DEVTOOL_SECTION_BACKGROUND2 : DEVTOOL_DETAIL_HEADER_BACKGROUND,
       borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
       borderLeft: isActive ? `2px solid ${color}` : "2px solid transparent",
       flexShrink: 0,
@@ -4194,13 +4036,13 @@ function DetailHeader({
       gap: "1em",
       cursor: isActive ? "default" : "pointer"
     },
-    children: /* @__PURE__ */ jsxs15("div", {
+    children: /* @__PURE__ */ jsxs14("div", {
       style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "0.5em" },
       children: [
-        /* @__PURE__ */ jsxs15("div", {
+        /* @__PURE__ */ jsxs14("div", {
           style: { display: "flex", alignItems: "center", minWidth: 0, gap: "0.5em" },
           children: [
-            /* @__PURE__ */ jsx17("span", {
+            /* @__PURE__ */ jsx15("span", {
               style: {
                 color,
                 flexShrink: 0,
@@ -4208,12 +4050,12 @@ function DetailHeader({
                 alignItems: "center",
                 animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
               },
-              children: /* @__PURE__ */ jsx17(StatusIconComponent, {
+              children: /* @__PURE__ */ jsx15(StatusIconComponent, {
                 size: 20,
                 strokeWidth: 1.75
               })
             }),
-            /* @__PURE__ */ jsx17("span", {
+            /* @__PURE__ */ jsx15("span", {
               style: {
                 color: DEVTOOL_COLOR_TEXT_EMPHASIS,
                 fontSize: "1.2em",
@@ -4227,7 +4069,7 @@ function DetailHeader({
               },
               children: entry.actionId
             }),
-            /* @__PURE__ */ jsx17("span", {
+            /* @__PURE__ */ jsx15("span", {
               style: {
                 flexShrink: 0,
                 padding: "2px 9px",
@@ -4242,14 +4084,14 @@ function DetailHeader({
               },
               children: STATUS_BADGE_LABEL[entry.status]
             }),
-            /* @__PURE__ */ jsx17(DomainChip, {
+            /* @__PURE__ */ jsx15(DomainChip, {
               domain: entry.domain,
               allDomains: entry.allDomains,
               size: "md" /* md */
             })
           ]
         }),
-        /* @__PURE__ */ jsxs15("div", {
+        /* @__PURE__ */ jsxs14("div", {
           style: {
             display: "flex",
             alignItems: "center",
@@ -4257,7 +4099,7 @@ function DetailHeader({
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ jsxs15("div", {
+            /* @__PURE__ */ jsxs14("div", {
               style: {
                 display: "flex",
                 alignItems: "center",
@@ -4266,35 +4108,35 @@ function DetailHeader({
                 overflow: "hidden"
               },
               children: [
-                inboundOrigin != null && /* @__PURE__ */ jsx17(OriginChip, {
+                inboundOrigin != null && /* @__PURE__ */ jsx15(OriginChip, {
                   origin: inboundOrigin,
                   size: "md" /* md */
                 }),
-                /* @__PURE__ */ jsx17(HandlerChips, {
+                /* @__PURE__ */ jsx15(HandlerChips, {
                   entry,
                   size: "md" /* md */
                 }),
-                /* @__PURE__ */ jsx17(ChildDispatchChips, {
+                /* @__PURE__ */ jsx15(ChildDispatchChips, {
                   childRouteItems: childExternalRouteItems,
                   size: "md" /* md */
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs15("div", {
+            /* @__PURE__ */ jsxs14("div", {
               style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 },
               children: [
-                /* @__PURE__ */ jsx17("span", {
+                /* @__PURE__ */ jsx15("span", {
                   style: {
-                    color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+                    color: DEVTOOL_COLOR_SEMANTIC_METADATA2,
                     fontSize: "10px",
                     letterSpacing: "0.02em",
                     fontFamily: "ui-sans-serif, system-ui, sans-serif"
                   },
                   children: timestamp
                 }),
-                /* @__PURE__ */ jsx17("span", {
+                /* @__PURE__ */ jsx15("span", {
                   style: { color, fontSize: "12px", fontWeight: "500" },
-                  children: /* @__PURE__ */ jsx17(DurationDisplay, {
+                  children: /* @__PURE__ */ jsx15(DurationDisplay, {
                     entry
                   })
                 })
@@ -4312,7 +4154,7 @@ function ActionDetailPanel({
   childEntries,
   onSelectEntry
 }) {
-  const [focusedChildCuid, setFocusedChildCuid] = useState8(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.meta.originClient, entry.callSite), ...childEntries.map((e) => countUserFrames(e.meta.originClient, e.callSite)), 0);
@@ -4334,7 +4176,7 @@ function ActionDetailPanel({
   const handleFocusChild = (cuid) => {
     setFocusedChildCuid((prev) => prev === cuid ? null : cuid);
   };
-  return /* @__PURE__ */ jsxs15("div", {
+  return /* @__PURE__ */ jsxs14("div", {
     style: {
       flex: 1,
       display: "flex",
@@ -4344,20 +4186,20 @@ function ActionDetailPanel({
       background: DEVTOOL_DETAIL_BASE_BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsx17(DetailHeader, {
+      /* @__PURE__ */ jsx15(DetailHeader, {
         entry,
         isActive: focusedChildCuid === null,
         onClick: () => setFocusedChildCuid(null),
         childExternalRouteItems
       }),
-      /* @__PURE__ */ jsx17(CallStackSection, {
+      /* @__PURE__ */ jsx15(CallStackSection, {
         parent,
         childEntries,
         focusedChildCuid,
         onFocusChild: handleFocusChild,
         onSelectParent: onSelectEntry
       }),
-      /* @__PURE__ */ jsxs15("div", {
+      /* @__PURE__ */ jsxs14("div", {
         style: {
           flex: 1,
           overflowY: "auto",
@@ -4368,37 +4210,37 @@ function ActionDetailPanel({
           gap: "8px"
         },
         children: [
-          focusedEntry.input !== undefined ? /* @__PURE__ */ jsx17(DetailSection, {
+          focusedEntry.input !== undefined ? /* @__PURE__ */ jsx15(DetailSection, {
             label: "Input",
             value: focusedEntry.input
-          }) : /* @__PURE__ */ jsx17(DetailSection, {
+          }) : /* @__PURE__ */ jsx15(DetailSection, {
             label: "Input",
             value: "No input required or given"
           }),
-          focusedEntry.status === "success" && /* @__PURE__ */ jsx17(DetailSection, {
+          focusedEntry.status === "success" && /* @__PURE__ */ jsx15(DetailSection, {
             label: "Output",
             value: focusedEntry.output,
-            color: DEVTOOL_COLOR_SEMANTIC_SUCCESS
+            color: DEVTOOL_COLOR_SEMANTIC_SUCCESS2
           }),
-          (focusedEntry.status === "action-error" || focusedEntry.status === "failed" || focusedEntry.status === "aborted") && /* @__PURE__ */ jsx17(ActionErrorDisplay, {
+          (focusedEntry.status === "action-error" || focusedEntry.status === "failed" || focusedEntry.status === "aborted") && /* @__PURE__ */ jsx15(ActionErrorDisplay, {
             entry: focusedEntry
           }),
-          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsx17(DetailSection, {
+          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsx15(DetailSection, {
             label: `Progress (${focusedEntry.progressUpdates.length})`,
             value: focusedEntry.progressUpdates
           }),
-          /* @__PURE__ */ jsx17(StackTraceSection, {
+          /* @__PURE__ */ jsx15(StackTraceSection, {
             runtime: entry.meta.originClient,
             label: "Dispatch Site",
             stack: focusedEntry.callSite,
             color: DEVTOOL_COLOR_TEXT_SECONDARY,
             minFrameCount: maxCallSiteFrames
           }),
-          /* @__PURE__ */ jsx17(RoutingSection, {
+          /* @__PURE__ */ jsx15(RoutingSection, {
             entry: focusedEntry,
             minHopCount: maxRoutingHops
           }),
-          /* @__PURE__ */ jsx17(MetaSection, {
+          /* @__PURE__ */ jsx15(MetaSection, {
             entry: focusedEntry
           })
         ]
@@ -4408,66 +4250,20 @@ function ActionDetailPanel({
 }
 
 // src/devtools/browser/components/action_list/ActionList.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { DevtoolsVirtualList } from "nice-devtools-shared";
+import { useMemo as useMemo2, useRef as useRef2 } from "react";
 
 // src/devtools/browser/components/action_list/ActionEntryRow.tsx
 import { CircleX as CircleX3, PackageCheck as PackageCheck2, Variable as Variable2 } from "lucide-react";
-import { Fragment as Fragment9, useState as useState10 } from "react";
+import { Fragment as Fragment7, useState as useState9 } from "react";
 
 // src/devtools/browser/components/action_list/ActionInputAndOutputChip.tsx
 import { CircleX as CircleX2, PackageCheck, Sparkle, Variable } from "lucide-react";
-import { useState as useState9 } from "react";
+import { useState as useState8 } from "react";
 
 // src/devtools/browser/components/action_list/IoTooltipContent.tsx
-import { jsx as jsx18, Fragment as Fragment8 } from "react/jsx-runtime";
-var JSON_TOKEN_RE2 = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
-function renderColoredJson2(text) {
-  const nodes = [];
-  let last = 0;
-  let i = 0;
-  JSON_TOKEN_RE2.lastIndex = 0;
-  for (let m = JSON_TOKEN_RE2.exec(text);m !== null; m = JSON_TOKEN_RE2.exec(text)) {
-    if (m.index > last)
-      nodes.push(text.slice(last, m.index));
-    const [, str, colon, num, kw, punct] = m;
-    if (str != null) {
-      if (colon != null) {
-        nodes.push(/* @__PURE__ */ jsx18("span", {
-          style: { color: DEVTOOL_JSON_KEY },
-          children: str
-        }, i++));
-        nodes.push(/* @__PURE__ */ jsx18("span", {
-          style: { color: DEVTOOL_JSON_PUNCTUATION },
-          children: colon
-        }, i++));
-      } else {
-        nodes.push(/* @__PURE__ */ jsx18("span", {
-          style: { color: DEVTOOL_JSON_STRING },
-          children: str
-        }, i++));
-      }
-    } else if (num != null) {
-      nodes.push(/* @__PURE__ */ jsx18("span", {
-        style: { color: DEVTOOL_JSON_NUMBER },
-        children: num
-      }, i++));
-    } else if (kw != null) {
-      nodes.push(/* @__PURE__ */ jsx18("span", {
-        style: { color: DEVTOOL_JSON_KEYWORD },
-        children: kw
-      }, i++));
-    } else if (punct != null) {
-      nodes.push(/* @__PURE__ */ jsx18("span", {
-        style: { color: DEVTOOL_JSON_PUNCTUATION },
-        children: punct
-      }, i++));
-    }
-    last = JSON_TOKEN_RE2.lastIndex;
-  }
-  if (last < text.length)
-    nodes.push(text.slice(last));
-  return nodes;
-}
+import { renderColoredJson as renderColoredJson2, safeStringify as safeStringify3 } from "nice-devtools-shared";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function stripOuterBraces(json) {
   const lines = json.split(`
 `);
@@ -4478,8 +4274,8 @@ function stripOuterBraces(json) {
   return json;
 }
 function IoTooltipContent({ value }) {
-  const text = stripOuterBraces(safeStringify(value, 2));
-  return /* @__PURE__ */ jsx18("div", {
+  const text = stripOuterBraces(safeStringify3(value, 2));
+  return /* @__PURE__ */ jsx16("div", {
     style: {
       fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
       fontSize: "10px",
@@ -4493,7 +4289,7 @@ function IoTooltipContent({ value }) {
 }
 
 // src/devtools/browser/components/action_list/ActionInputAndOutputChip.tsx
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var ActionInputAndOutputChip = ({
   entry,
   breakReasons,
@@ -4507,86 +4303,94 @@ var ActionInputAndOutputChip = ({
   const isLocal = localEnvId != null && (firstHopIsLocal || externalLabel == null);
   const color = isLocal ? "handler_local" /* handler_local */ : "handler_external" /* handler_external */;
   const transportTooltip = firstHop != null ? getTransportTooltip(firstHop) : undefined;
-  const [labelAnchor, setLabelAnchor] = useState9(null);
+  const [labelAnchor, setLabelAnchor] = useState8(null);
   const isNewInput = breakReasons.includes("new_input" /* new_input */);
   const isNewOutput = breakReasons.includes("new_output" /* new_output */);
   const hasError = entry.error != null || entry.abortReason != null;
   const sizeNum = getSizeValue(size);
   const newIconSizeEm = `${sizeNum * 0.9}em`;
   const label = `${(isLocal ? localEnvId : externalLabel) ?? "unknown"}`;
-  const newSparkleComp = /* @__PURE__ */ jsx19("div", {
+  const newSparkleComp = /* @__PURE__ */ jsx17("div", {
     style: {
       opacity: 0.9,
       alignSelf: "start",
       marginLeft: "-0.6em"
     },
-    children: /* @__PURE__ */ jsx19(Sparkle, {
+    children: /* @__PURE__ */ jsx17(Sparkle, {
       strokeWidth: "0.2em",
       color: "rgba(243, 250, 140, 1)",
       width: newIconSizeEm,
       height: newIconSizeEm
     })
   });
-  return /* @__PURE__ */ jsx19(Chip, {
+  return /* @__PURE__ */ jsx17(Chip, {
     color,
     size,
     subtle,
-    children: /* @__PURE__ */ jsxs16("div", {
+    children: /* @__PURE__ */ jsxs15("div", {
       style: { display: "flex", alignItems: "center", gap: "0.4em" },
       children: [
-        /* @__PURE__ */ jsx19(Icon, {
+        /* @__PURE__ */ jsx17(Icon, {
           noBackground: true,
           icon: Variable,
           color,
           subtle: subtle || entry.input === undefined,
           tooltip: {
-            content: entry.input !== undefined ? /* @__PURE__ */ jsx19(IoTooltipContent, {
+            content: entry.input !== undefined ? /* @__PURE__ */ jsx17(IoTooltipContent, {
               value: entry.input
-            }) : /* @__PURE__ */ jsx19("span", {
-              style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
+            }) : /* @__PURE__ */ jsx17("span", {
+              style: { color: DEVTOOL_COLOR_TEXT_MUTED2, fontSize: "10px" },
               children: "No input required or given"
             }),
             title: isNewInput ? "New Input" : "Input"
           }
         }),
         isNewInput && newSparkleComp,
-        /* @__PURE__ */ jsx19("span", {
+        /* @__PURE__ */ jsx17("span", {
           style: { opacity: 0.6 },
           color,
           children: "→"
         }),
-        /* @__PURE__ */ jsx19("span", {
-          style: { opacity: 0.8, cursor: transportTooltip != null ? "default" : undefined },
+        /* @__PURE__ */ jsx17("span", {
+          title: transportTooltip == null ? label : undefined,
+          style: {
+            opacity: 0.8,
+            cursor: transportTooltip != null ? "default" : undefined,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            maxWidth: "14ch"
+          },
           onMouseEnter: transportTooltip != null ? (e) => setLabelAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
           onMouseLeave: transportTooltip != null ? () => setLabelAnchor(null) : undefined,
           children: label
         }),
-        labelAnchor != null && transportTooltip != null && /* @__PURE__ */ jsx19(Tooltip, {
+        labelAnchor != null && transportTooltip != null && /* @__PURE__ */ jsx17(Tooltip, {
           anchor: labelAnchor,
           config: transportTooltip
         }),
-        /* @__PURE__ */ jsx19("span", {
+        /* @__PURE__ */ jsx17("span", {
           style: { opacity: 0.6 },
           color,
           children: "→"
         }),
-        entry.status === "success" && entry.output !== undefined && /* @__PURE__ */ jsx19(Icon, {
+        entry.status === "success" && entry.output !== undefined && /* @__PURE__ */ jsx17(Icon, {
           noBackground: true,
           icon: PackageCheck,
           color: !hasError ? color : "default" /* default */,
           tooltip: {
-            content: /* @__PURE__ */ jsx19(IoTooltipContent, {
+            content: /* @__PURE__ */ jsx17(IoTooltipContent, {
               value: entry.output
             }),
             title: isNewOutput ? "New Output" : "Output"
           }
         }),
-        (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsx19(Icon, {
+        (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsx17(Icon, {
           noBackground: true,
           icon: CircleX2,
           color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
           tooltip: {
-            content: /* @__PURE__ */ jsx19(ActionErrorDisplay, {
+            content: /* @__PURE__ */ jsx17(ActionErrorDisplay, {
               entry,
               compact: true
             }),
@@ -4601,7 +4405,7 @@ var ActionInputAndOutputChip = ({
 };
 
 // src/devtools/browser/components/action_list/ActionEntryRow.tsx
-import { jsx as jsx20, jsxs as jsxs17, Fragment as Fragment10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16, Fragment as Fragment8 } from "react/jsx-runtime";
 var MAX_GROUP_DOTS = 5;
 function getLatestChipColor(status) {
   if (status === "failed")
@@ -4624,14 +4428,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__ */ jsx20(Tooltip, {
+  return /* @__PURE__ */ jsx18(Tooltip, {
     anchor,
     config: {
       align: "center",
       maxWidth: 240,
-      content: /* @__PURE__ */ jsxs17(Fragment10, {
+      content: /* @__PURE__ */ jsxs16(Fragment8, {
         children: [
-          /* @__PURE__ */ jsxs17("div", {
+          /* @__PURE__ */ jsxs16("div", {
             style: { color: dotColor, marginBottom: "1px" },
             children: [
               symbol,
@@ -4641,20 +4445,20 @@ function GroupDotTooltip({
               total
             ]
           }),
-          /* @__PURE__ */ jsx20("div", {
+          /* @__PURE__ */ jsx18("div", {
             style: { color: DEVTOOL_COLOR_TEXT_SECONDARY },
             children: formatTimestamp(entry.startTime)
           }),
-          /* @__PURE__ */ jsx20("div", {
-            style: { color: DEVTOOL_COLOR_TEXT_MUTED },
+          /* @__PURE__ */ jsx18("div", {
+            style: { color: DEVTOOL_COLOR_TEXT_MUTED2 },
             children: durationStr
           }),
-          index > 0 && /* @__PURE__ */ jsx20("div", {
+          index > 0 && /* @__PURE__ */ jsx18("div", {
             style: {
-              color: DEVTOOL_COLOR_TEXT_MUTED,
+              color: DEVTOOL_COLOR_TEXT_MUTED2,
               marginTop: "3px",
               paddingTop: "3px",
-              borderTop: `1px solid ${DEVTOOL_SECTION_BACKGROUND}`
+              borderTop: `1px solid ${DEVTOOL_SECTION_BACKGROUND2}`
             },
             children: relStr
           })
@@ -4671,12 +4475,12 @@ function GroupDot({
   isActive,
   onSelect
 }) {
-  const [anchor, setAnchor] = useState10(null);
+  const [anchor, setAnchor] = useState9(null);
   const dotColor = STATUS_COLOR[entry.status];
   const hovered = anchor != null;
-  return /* @__PURE__ */ jsxs17(Fragment10, {
+  return /* @__PURE__ */ jsxs16(Fragment8, {
     children: [
-      /* @__PURE__ */ jsx20("button", {
+      /* @__PURE__ */ jsx18("button", {
         "data-cuid": entry.cuid,
         onClick: (e) => {
           e.stopPropagation();
@@ -4698,7 +4502,7 @@ function GroupDot({
           transition: "transform 0.1s ease, opacity 0.1s ease, border-color 0.1s ease"
         }
       }),
-      hovered && anchor != null && /* @__PURE__ */ jsx20(GroupDotTooltip, {
+      hovered && anchor != null && /* @__PURE__ */ jsx18(GroupDotTooltip, {
         entry,
         index,
         total,
@@ -4728,7 +4532,7 @@ function ActionEntryRow({
   const nonIoBreakReasons = breakReasons?.filter((r) => r !== "new_input" /* new_input */ && r !== "new_output" /* new_output */) ?? [];
   const hasBottomError = entry.error != null || entry.abortReason != null;
   const hasBottomContent = externalChildEntries.length > 0 || nonIoBreakReasons.length > 0;
-  return /* @__PURE__ */ jsxs17("div", {
+  return /* @__PURE__ */ jsxs16("div", {
     "data-cuid": entry.cuid,
     onClick,
     style: {
@@ -4745,22 +4549,22 @@ function ActionEntryRow({
       margin: "2px 4px"
     },
     children: [
-      /* @__PURE__ */ jsx20("div", {
+      /* @__PURE__ */ jsx18("div", {
         style: {
           position: "absolute",
           left: "2em",
           top: 0,
           bottom: 0,
           width: "1px",
-          background: `${DEVTOOL_COLOR_SEMANTIC_METADATA}28`,
+          background: `${DEVTOOL_COLOR_SEMANTIC_METADATA2}28`,
           pointerEvents: "none",
           zIndex: 0
         }
       }),
-      /* @__PURE__ */ jsxs17("div", {
+      /* @__PURE__ */ jsxs16("div", {
         style: { display: "flex", alignItems: "center", gap: "8px" },
         children: [
-          /* @__PURE__ */ jsx20("div", {
+          /* @__PURE__ */ jsxs16("div", {
             style: {
               position: "relative",
               zIndex: 1,
@@ -4770,91 +4574,90 @@ function ActionEntryRow({
               alignItems: "center",
               justifyContent: "flex-start"
             },
-            children: isLatest ? /* @__PURE__ */ jsx20(Chip, {
-              size: "sm" /* sm */,
-              color: getLatestChipColor(entry.status),
-              children: "latest"
-            }) : /* @__PURE__ */ jsxs17(Chip, {
-              size: "sm" /* sm */,
-              color: getLatestChipColor(entry.status),
-              children: [
-                "+",
-                latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"
-              ]
-            })
-          }),
-          /* @__PURE__ */ jsxs17("div", {
-            style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: "0.5em" },
             children: [
-              /* @__PURE__ */ jsx20("span", {
-                style: {
-                  color: DEVTOOL_COLOR_TEXT_SECONDARY,
-                  fontSize: "1em",
-                  fontWeight: 400,
-                  fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                  flexShrink: 1,
-                  minWidth: "3em"
-                },
-                children: entry.actionId
-              }),
-              inboundOrigin != null && /* @__PURE__ */ jsx20(OriginChip, {
-                origin: inboundOrigin,
+              isLatest ? /* @__PURE__ */ jsx18(Chip, {
                 size: "sm" /* sm */,
-                subtle: true
-              }),
-              /* @__PURE__ */ jsx20(ActionInputAndOutputChip, {
-                breakReasons,
-                entry
-              }),
-              /* @__PURE__ */ jsx20("div", {
-                style: { flex: 1 }
+                color: getLatestChipColor(entry.status),
+                children: "latest"
+              }) : /* @__PURE__ */ jsxs16(Chip, {
+                size: "sm" /* sm */,
+                color: getLatestChipColor(entry.status),
+                children: [
+                  "+",
+                  latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"
+                ]
               }),
-              /* @__PURE__ */ jsxs17("div", {
+              /* @__PURE__ */ jsx18("span", {
                 style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "end",
-                  gap: "0.35em",
-                  marginTop: "-0.2em",
-                  marginRight: "-0.2em"
+                  position: "absolute",
+                  top: "100%",
+                  left: 0,
+                  marginTop: "5px",
+                  color: DEVTOOL_COLOR_SEMANTIC_METADATA2,
+                  fontSize: "10px",
+                  lineHeight: "1em",
+                  letterSpacing: "0.02em",
+                  fontFamily: "ui-sans-serif, system-ui, sans-serif",
+                  opacity: 0.7,
+                  paddingLeft: "0.1em",
+                  whiteSpace: "nowrap"
                 },
-                children: [
-                  /* @__PURE__ */ jsx20("span", {
-                    style: {
-                      display: "flex",
-                      color: DEVTOOL_COLOR_SEMANTIC_METADATA,
-                      fontSize: "10px",
-                      lineHeight: "1em",
-                      letterSpacing: "0.02em",
-                      fontFamily: "ui-sans-serif, system-ui, sans-serif",
-                      flexShrink: 0,
-                      opacity: 0.7
-                    },
-                    children: timestamp
-                  }),
-                  /* @__PURE__ */ jsx20("span", {
-                    style: {
-                      display: "flex",
-                      color: DEVTOOL_COLOR_SEMANTIC_WARNING,
-                      lineHeight: "1em",
-                      fontSize: "11px",
-                      opacity: 0.9,
-                      flexShrink: 0
-                    },
-                    children: /* @__PURE__ */ jsx20(DurationDisplay, {
-                      entry
-                    })
-                  })
-                ]
+                children: timestamp
               })
             ]
+          }),
+          /* @__PURE__ */ jsx18("span", {
+            title: entry.actionId,
+            style: {
+              flex: 1,
+              minWidth: 0,
+              color: DEVTOOL_COLOR_TEXT_SECONDARY,
+              fontSize: "1em",
+              fontWeight: 400,
+              fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: entry.actionId
+          }),
+          /* @__PURE__ */ jsx18("span", {
+            style: {
+              color: DEVTOOL_COLOR_SEMANTIC_WARNING2,
+              lineHeight: "1em",
+              fontSize: "11px",
+              opacity: 0.9,
+              flexShrink: 0,
+              fontFamily: "ui-sans-serif, system-ui, sans-serif"
+            },
+            children: /* @__PURE__ */ jsx18(DurationDisplay, {
+              entry
+            })
           })
         ]
       }),
-      hasBottomContent && /* @__PURE__ */ jsxs17("div", {
+      /* @__PURE__ */ jsxs16("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "0.4em",
+          paddingLeft: "4.5em",
+          minWidth: 0
+        },
+        children: [
+          inboundOrigin != null && /* @__PURE__ */ jsx18(OriginChip, {
+            origin: inboundOrigin,
+            size: "sm" /* sm */,
+            subtle: true
+          }),
+          /* @__PURE__ */ jsx18(ActionInputAndOutputChip, {
+            breakReasons,
+            entry,
+            size: "sm" /* sm */
+          })
+        ]
+      }),
+      hasBottomContent && /* @__PURE__ */ jsxs16("div", {
         style: {
           display: "flex",
           flexWrap: "wrap",
@@ -4863,35 +4666,35 @@ function ActionEntryRow({
           paddingLeft: "4.5em"
         },
         children: [
-          externalChildEntries.map((child) => /* @__PURE__ */ jsxs17(Fragment9, {
+          externalChildEntries.map((child) => /* @__PURE__ */ jsxs16(Fragment7, {
             children: [
-              /* @__PURE__ */ jsx20(Icon, {
+              /* @__PURE__ */ jsx18(Icon, {
                 size: "sm" /* sm */,
                 icon: Variable2,
                 color: "io_input" /* io_input */,
                 subtle: true,
                 tooltip: {
-                  content: child.input !== undefined ? /* @__PURE__ */ jsx20(IoTooltipContent, {
+                  content: child.input !== undefined ? /* @__PURE__ */ jsx18(IoTooltipContent, {
                     value: child.input
-                  }) : /* @__PURE__ */ jsx20("span", {
-                    style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
+                  }) : /* @__PURE__ */ jsx18("span", {
+                    style: { color: DEVTOOL_COLOR_TEXT_MUTED2, fontSize: "10px" },
                     children: "No input required or given"
                   }),
                   title: `Input · ${child.actionId}`
                 }
               }),
-              /* @__PURE__ */ jsx20(HandlerChips, {
+              /* @__PURE__ */ jsx18(HandlerChips, {
                 entry: child,
                 size: "sm" /* sm */,
                 subtle: true
               }),
-              child.status === "success" && child.output !== undefined && /* @__PURE__ */ jsx20(Icon, {
+              child.status === "success" && child.output !== undefined && /* @__PURE__ */ jsx18(Icon, {
                 size: "sm" /* sm */,
                 icon: PackageCheck2,
                 color: "io_output" /* io_output */,
                 subtle: true,
                 tooltip: {
-                  content: /* @__PURE__ */ jsx20(IoTooltipContent, {
+                  content: /* @__PURE__ */ jsx18(IoTooltipContent, {
                     value: child.output
                   }),
                   title: `Output · ${child.actionId}`
@@ -4899,18 +4702,18 @@ function ActionEntryRow({
               })
             ]
           }, child.actionId)),
-          nonIoBreakReasons.map((reason) => /* @__PURE__ */ jsx20(Chip, {
+          nonIoBreakReasons.map((reason) => /* @__PURE__ */ jsx18(Chip, {
             color: "default" /* default */,
             subtle: true,
             children: reason
           }, reason)),
-          externalChildEntries.length > 0 && hasBottomError && /* @__PURE__ */ jsx20(Icon, {
+          externalChildEntries.length > 0 && hasBottomError && /* @__PURE__ */ jsx18(Icon, {
             size: "sm" /* sm */,
             icon: CircleX3,
             color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
             subtle: true,
             tooltip: {
-              content: /* @__PURE__ */ jsx20(ActionErrorDisplay, {
+              content: /* @__PURE__ */ jsx18(ActionErrorDisplay, {
                 entry,
                 compact: true
               }),
@@ -4920,7 +4723,7 @@ function ActionEntryRow({
           })
         ]
       }),
-      hasGroup && /* @__PURE__ */ jsxs17("div", {
+      hasGroup && /* @__PURE__ */ jsxs16("div", {
         style: {
           display: "flex",
           flexWrap: "wrap",
@@ -4930,7 +4733,7 @@ function ActionEntryRow({
           paddingBottom: "2px"
         },
         children: [
-          groupEntries.slice(0, MAX_GROUP_DOTS).map((e, i) => /* @__PURE__ */ jsx20(GroupDot, {
+          groupEntries.slice(0, MAX_GROUP_DOTS).map((e, i) => /* @__PURE__ */ jsx18(GroupDot, {
             entry: e,
             index: i,
             total: groupEntries.length,
@@ -4938,7 +4741,7 @@ function ActionEntryRow({
             isActive: selectedGroupCuid === e.cuid,
             onSelect: () => onSelectGroupEntry?.(e.cuid)
           }, e.cuid)),
-          groupEntries.length > MAX_GROUP_DOTS && /* @__PURE__ */ jsxs17("span", {
+          groupEntries.length > MAX_GROUP_DOTS && /* @__PURE__ */ jsxs16("span", {
             style: {
               fontSize: "0.7em",
               opacity: 0.5,
@@ -4957,10 +4760,10 @@ function ActionEntryRow({
 }
 
 // src/devtools/browser/components/action_list/ActionList.tsx
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17, Fragment as Fragment9 } from "react/jsx-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);
+  const inputChanged = current.inputHash != null && previous.inputHash != null ? current.inputHash !== previous.inputHash : safeStringify2(current.input, 0) !== safeStringify2(previous.input, 0);
   if (inputChanged)
     reasons.push("new_input" /* new_input */);
   const outputChanged = current.outputHash != null && previous.outputHash != null && current.outputHash !== previous.outputHash;
@@ -4993,7 +4796,6 @@ function ActionList({
   childEntriesMap,
   style
 }) {
-  const containerRef = useRef2(null);
   const latestTime = groups[0]?.representative.startTime;
   const flatItems = useMemo2(() => {
     return groups.map((group, gi) => {
@@ -5007,477 +4809,78 @@ function ActionList({
       return { group, groupIndex: gi, breakReasons };
     });
   }, [groups]);
-  const prevSelectedRef = useRef2(selectedCuid);
-  useEffect3(() => {
-    if (selectedCuid === prevSelectedRef.current)
-      return;
-    prevSelectedRef.current = selectedCuid;
+  const prevRepCuidsRef = useRef2(null);
+  const newRepCuids = useMemo2(() => {
+    const current = new Set(flatItems.map((i) => i.group.representative.cuid));
+    const prev = prevRepCuidsRef.current;
+    const result = new Set;
+    if (prev != null) {
+      for (const c of current)
+        if (!prev.has(c))
+          result.add(c);
+    }
+    prevRepCuidsRef.current = current;
+    return result;
+  }, [flatItems]);
+  const selectedAnchorKey = useMemo2(() => {
     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__ */ jsx21("div", {
+      return null;
+    const item = flatItems.find((i) => i.group.representative.cuid === selectedCuid || i.group.rest.some((e) => e.cuid === selectedCuid));
+    return item != null ? getFlatItemKey(item) : null;
+  }, [flatItems, selectedCuid]);
+  return /* @__PURE__ */ jsx19(DevtoolsVirtualList, {
+    items: flatItems,
+    getItemKey: getFlatItemKey,
+    selectedKey: selectedAnchorKey,
+    estimateSize: 64,
+    overscan: 8,
+    style,
+    rowStyle: { borderBottom: `1px solid ${DEVTOOL_LIST_GROUP_DIVIDER}`, overflow: "hidden" },
+    empty: /* @__PURE__ */ jsx19("div", {
       style,
-      children: /* @__PURE__ */ jsx21("div", {
-        style: { padding: "24px", textAlign: "center", color: DEVTOOL_COLOR_TEXT_MUTED },
+      children: /* @__PURE__ */ jsx19("div", {
+        style: { padding: "24px", textAlign: "center", color: DEVTOOL_COLOR_TEXT_MUTED2 },
         children: "No actions recorded yet"
       })
-    });
-  }
-  return /* @__PURE__ */ jsxs18("div", {
-    ref: containerRef,
-    style,
-    children: [
-      flatItems.map((item) => {
-        const key = getFlatItemKey(item);
-        const { group } = item;
-        return /* @__PURE__ */ jsxs18("div", {
-          style: {
-            borderBottom: `1px solid ${DEVTOOL_LIST_GROUP_DIVIDER}`,
-            position: "relative",
-            overflow: "hidden"
-          },
-          children: [
-            /* @__PURE__ */ jsx21("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),
-            /* @__PURE__ */ jsx21(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)
-            })
-          ]
-        }, key);
-      }),
-      /* @__PURE__ */ jsx21("div", {
-        style: { padding: "24px", textAlign: "center", color: DEVTOOL_COLOR_TEXT_MUTED },
-        children: "Start of action history"
-      })
-    ]
-  });
-}
-
-// src/devtools/browser/components/PanelChrome.tsx
-import { useState as useState11 } from "react";
-import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
-var MONO_FONT = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
-var SANS_FONT = "ui-sans-serif, system-ui, sans-serif";
-var DOCKED_SIZE_MIN = 140;
-var POSITION_GRID = [
-  { key: "tl", pos: null },
-  { key: "tc", pos: "dock-top" },
-  { key: "tr", pos: null },
-  { key: "ml", pos: "dock-left" },
-  { key: "mc", pos: null },
-  { key: "mr", pos: "dock-right" },
-  { key: "bl", pos: null },
-  { key: "bc", pos: "dock-bottom" },
-  { key: "br", pos: null }
-];
-function getDockSide(pos) {
-  switch (pos) {
-    case "dock-top":
-      return "top";
-    case "dock-left":
-      return "left";
-    case "dock-right":
-      return "right";
-    default:
-      return "bottom";
-  }
-}
-function PanelHeader({
-  position,
-  onPositionChange,
-  onClose,
-  onClear,
-  openOthers
-}) {
-  return /* @__PURE__ */ jsxs19("div", {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      padding: "8px 12px",
-      gap: "10px",
-      background: DEVTOOL_SECTION_BACKGROUND,
-      borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
-      flexShrink: 0
-    },
-    children: [
-      /* @__PURE__ */ jsxs19("div", {
-        style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 },
+    }),
+    footer: /* @__PURE__ */ jsx19("div", {
+      style: { padding: "24px", textAlign: "center", color: DEVTOOL_COLOR_TEXT_MUTED2 },
+      children: "Start of action history"
+    }),
+    renderItem: (item) => {
+      const { group } = item;
+      const shine = newRepCuids.has(group.representative.cuid);
+      return /* @__PURE__ */ jsxs17(Fragment9, {
         children: [
-          /* @__PURE__ */ jsx22("span", {
-            style: {
-              color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
-              fontWeight: "bold",
-              fontSize: "11px",
-              whiteSpace: "nowrap"
-            },
-            children: "⚡ action"
-          }),
-          openOthers?.map((item) => /* @__PURE__ */ jsxs19("button", {
-            onClick: item.onOpen,
-            title: `Open ${item.label} devtools`,
+          shine && /* @__PURE__ */ jsx19("div", {
             style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "4px",
-              background: DEVTOOL_LIST_BASE_BACKGROUND,
-              border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
-              borderRadius: "999px",
-              color: DEVTOOL_COLOR_TEXT_MUTED,
-              cursor: "pointer",
-              fontSize: "10px",
-              padding: "1px 7px 1px 6px",
-              fontFamily: SANS_FONT,
-              whiteSpace: "nowrap"
-            },
-            children: [
-              /* @__PURE__ */ jsx22("span", {
-                children: item.icon
-              }),
-              /* @__PURE__ */ jsx22("span", {
-                children: item.label
-              }),
-              item.badge != null && /* @__PURE__ */ jsx22("span", {
-                style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
-                children: item.badge
-              })
-            ]
-          }, item.id))
-        ]
-      }),
-      /* @__PURE__ */ jsxs19("div", {
-        style: { display: "flex", gap: "10px", alignItems: "center" },
-        children: [
-          /* @__PURE__ */ jsx22(PositionPicker, {
-            position,
-            onChange: onPositionChange
-          }),
-          onClear != null && /* @__PURE__ */ jsx22("button", {
-            onClick: onClear,
-            style: {
-              background: "none",
-              border: "none",
-              color: DEVTOOL_COLOR_TEXT_MUTED,
-              cursor: "pointer",
-              fontSize: "11px",
-              padding: "0"
-            },
-            children: "clear"
+              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"
+            }
           }),
-          /* @__PURE__ */ jsx22("button", {
-            onClick: onClose,
-            style: {
-              background: "none",
-              border: "none",
-              color: DEVTOOL_COLOR_TEXT_MUTED,
-              cursor: "pointer",
-              fontSize: "16px",
-              padding: "0",
-              lineHeight: "1"
-            },
-            children: "×"
+          /* @__PURE__ */ jsx19(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)
           })
         ]
-      })
-    ]
-  });
-}
-function PositionPicker({
-  position,
-  onChange
-}) {
-  return /* @__PURE__ */ jsx22("div", {
-    title: "Move / dock panel",
-    style: { display: "grid", gridTemplateColumns: "repeat(3, 9px)", gap: "2px", padding: "2px" },
-    children: POSITION_GRID.map(({ key, pos }) => {
-      if (pos == null)
-        return /* @__PURE__ */ jsx22("div", {
-          style: { width: "9px", height: "9px" }
-        }, key);
-      const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
-      const isActive = pos === position;
-      return /* @__PURE__ */ jsx22("div", {
-        title: pos,
-        onClick: () => onChange(pos),
-        style: {
-          width: "9px",
-          height: "9px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer"
-        },
-        children: /* @__PURE__ */ jsx22("div", {
-          style: {
-            width: isTopBottom ? "9px" : "3px",
-            height: isTopBottom ? "3px" : "9px",
-            borderRadius: "1px",
-            background: isActive ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT
-          }
-        })
-      }, key);
-    })
-  });
-}
-function ResizeHandle({
-  dockSide,
-  dockedSize,
-  onChange
-}) {
-  const isHoriz = dockSide === "left" || dockSide === "right";
-  const onMouseDown = (e) => {
-    e.preventDefault();
-    const startCoord = isHoriz ? e.clientX : e.clientY;
-    const startSize = dockedSize;
-    const maxSize = isHoriz ? window.innerWidth * 0.85 : window.innerHeight * 0.85;
-    const sign = dockSide === "bottom" || dockSide === "right" ? -1 : 1;
-    const onMove = (me) => {
-      const delta = (isHoriz ? me.clientX : me.clientY) - startCoord;
-      onChange(Math.max(DOCKED_SIZE_MIN, Math.min(maxSize, startSize + sign * delta)));
-    };
-    const onUp = () => {
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
-    };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
-  };
-  const edgeStyle = dockSide === "bottom" ? { top: 0, left: 0, right: 0, height: "5px", cursor: "ns-resize" } : dockSide === "top" ? { bottom: 0, left: 0, right: 0, height: "5px", cursor: "ns-resize" } : dockSide === "right" ? { top: 0, bottom: 0, left: 0, width: "5px", cursor: "ew-resize" } : { top: 0, bottom: 0, right: 0, width: "5px", cursor: "ew-resize" };
-  return /* @__PURE__ */ jsx22("div", {
-    onMouseDown,
-    style: {
-      position: "absolute",
-      zIndex: 10,
-      background: "transparent",
-      ...edgeStyle
-    }
-  });
-}
-var SPLIT_RATIO_MIN = 0.15;
-var SPLIT_RATIO_MAX = 0.85;
-function SplitHandle({
-  horizontal,
-  onRatioChange
-}) {
-  const [hovered, setHovered] = useState11(false);
-  const onMouseDown = (e) => {
-    e.preventDefault();
-    const container = e.currentTarget.parentElement;
-    if (container == null)
-      return;
-    const onMove = (me) => {
-      const rect = container.getBoundingClientRect();
-      const ratio = horizontal ? (rect.right - me.clientX) / rect.width : (rect.bottom - me.clientY) / rect.height;
-      onRatioChange(Math.max(SPLIT_RATIO_MIN, Math.min(SPLIT_RATIO_MAX, ratio)));
-    };
-    const onUp = () => {
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
-    };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
-  };
-  return /* @__PURE__ */ jsx22("div", {
-    onMouseDown,
-    onMouseEnter: () => setHovered(true),
-    onMouseLeave: () => setHovered(false),
-    style: {
-      flex: "0 0 5px",
-      alignSelf: "stretch",
-      cursor: horizontal ? "ew-resize" : "ns-resize",
-      background: hovered ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "transparent",
-      opacity: hovered ? 0.6 : 1,
-      zIndex: 5
+      });
     }
   });
 }
-function DevtoolsLauncher({ items }) {
-  return /* @__PURE__ */ jsx22("div", {
-    style: {
-      position: "fixed",
-      bottom: "16px",
-      right: "16px",
-      zIndex: 2147483647,
-      display: "flex",
-      fontFamily: MONO_FONT,
-      fontSize: "12px"
-    },
-    children: /* @__PURE__ */ jsx22("div", {
-      style: {
-        display: "flex",
-        background: DEVTOOL_SECTION_BACKGROUND,
-        border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
-        borderRadius: "6px",
-        overflow: "hidden",
-        boxShadow: "0 8px 24px rgba(0,0,0,0.35)"
-      },
-      children: items.map((item, i) => /* @__PURE__ */ jsxs19("button", {
-        onClick: item.onOpen,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "5px",
-          background: "transparent",
-          color: DEVTOOL_COLOR_TEXT_SECONDARY,
-          border: "none",
-          borderLeft: i > 0 ? `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}` : "none",
-          cursor: "pointer",
-          padding: "6px 11px",
-          fontFamily: MONO_FONT,
-          fontSize: "12px",
-          lineHeight: "1.5"
-        },
-        children: [
-          /* @__PURE__ */ jsx22("span", {
-            children: item.icon
-          }),
-          /* @__PURE__ */ jsx22("span", {
-            children: item.label
-          }),
-          item.badge != null && /* @__PURE__ */ jsx22("span", {
-            style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
-            children: item.badge
-          })
-        ]
-      }, item.id))
-    })
-  });
-}
-
-// src/devtools/browser/devtools_dock.ts
-var GLOBAL_KEY = "__NICE_DEVTOOLS_DOCK__";
-var VERSION = 4;
-function createCoordinator() {
-  const panels = new Map;
-  const listeners = new Set;
-  function toRef(panel) {
-    return {
-      id: panel.id,
-      label: panel.label,
-      icon: panel.icon,
-      badge: panel.badge,
-      onOpen: panel.onOpen
-    };
-  }
-  function applyBodyMargins() {
-    if (typeof document === "undefined")
-      return;
-    const margins = { top: 0, bottom: 0, left: 0, right: 0 };
-    for (const panel of panels.values()) {
-      if (panel.open)
-        margins[panel.side] += panel.size;
-    }
-    const sides = ["top", "bottom", "left", "right"];
-    for (const side of sides) {
-      if (margins[side] > 0) {
-        document.body.style.setProperty(`margin-${side}`, `${margins[side]}px`);
-      } else {
-        document.body.style.removeProperty(`margin-${side}`);
-      }
-    }
-  }
-  function notify() {
-    applyBodyMargins();
-    for (const listener of listeners)
-      listener();
-  }
-  return {
-    version: VERSION,
-    register(panel) {
-      panels.set(panel.id, { ...panel });
-      notify();
-      return () => {
-        panels.delete(panel.id);
-        notify();
-      };
-    },
-    update(id, next) {
-      const existing = panels.get(id);
-      if (existing == null)
-        return;
-      if (existing.side === next.side && existing.size === next.size && existing.open === next.open && existing.badge === next.badge) {
-        return;
-      }
-      panels.set(id, { ...existing, ...next });
-      notify();
-    },
-    getView(id) {
-      const list = [...panels.values()];
-      const anyOpen = list.some((p) => p.open);
-      const firstId = list.length > 0 ? list[0].id : null;
-      let dockOffset = 0;
-      let stacked = false;
-      const self = panels.get(id);
-      if (self != null && self.open) {
-        let seenSelf = false;
-        for (const panel of list) {
-          if (panel.id === id) {
-            seenSelf = true;
-            continue;
-          }
-          if (panel.open && panel.side === self.side) {
-            stacked = true;
-            if (!seenSelf)
-              dockOffset += panel.size;
-          }
-        }
-      }
-      return {
-        dockOffset,
-        stacked,
-        anyOpen,
-        isPrimary: id === firstId,
-        devtools: list.map(toRef),
-        otherClosed: list.filter((p) => !p.open && p.id !== id).map(toRef)
-      };
-    },
-    subscribe(listener) {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    }
-  };
-}
-function getDevtoolsDockCoordinator() {
-  if (typeof window === "undefined")
-    return createCoordinator();
-  const host = window;
-  const existing = host[GLOBAL_KEY];
-  if (existing != null && existing.version === VERSION)
-    return existing;
-  const created = createCoordinator();
-  host[GLOBAL_KEY] = created;
-  return created;
-}
 
 // src/devtools/browser/NiceActionDevtools.tsx
-import { jsx as jsx23, jsxs as jsxs20, Fragment as Fragment11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18, Fragment as Fragment10 } from "react/jsx-runtime";
 if (typeof document !== "undefined" && !document.getElementById("__nice-action-devtools-styles")) {
   const style = document.createElement("style");
   style.id = "__nice-action-devtools-styles";
@@ -5509,14 +4912,21 @@ if (typeof document !== "undefined" && !document.getElementById("__nice-action-d
     #__nice-action-devtools-panel ::-webkit-scrollbar-corner {
       background: transparent;
     }
+    /* Shield the panel's native form controls from the host app's global element
+       styles (e.g. a bare \`input {}\`/\`button {}\` rule). \`all: revert\` drops them
+       to the UA baseline the panel is authored against; the panel's own inline
+       styles still win, so its look is unchanged across any host. */
+    #__nice-action-devtools-panel input,
+    #__nice-action-devtools-panel button,
+    #__nice-action-devtools-panel select,
+    #__nice-action-devtools-panel textarea { all: revert; font-family: inherit; }
   `;
   document.head?.appendChild(style);
 }
 var PREFS_KEY = "__nice-action-devtools-prefs";
 var DOCKED_HEIGHT_DEFAULT = 320;
-var DOCKED_WIDTH_DEFAULT = 420;
+var DOCKED_WIDTH_DEFAULT = 330;
 var DETAIL_RATIO_DEFAULT = 0.5;
-var SANS_FONT2 = "ui-sans-serif, system-ui, sans-serif";
 var DOCK_POSITIONS = ["dock-bottom", "dock-top", "dock-left", "dock-right"];
 function isDockPosition(value) {
   return typeof value === "string" && DOCK_POSITIONS.includes(value);
@@ -5561,7 +4971,7 @@ function getHandlerKey(entry) {
 function entriesShareActionInput(a, b) {
   if (a.actionId !== b.actionId || a.domain !== b.domain)
     return false;
-  return a.inputHash != null && b.inputHash != null ? a.inputHash === b.inputHash : safeStringify(a.input, 0) === safeStringify(b.input, 0);
+  return a.inputHash != null && b.inputHash != null ? a.inputHash === b.inputHash : safeStringify2(a.input, 0) === safeStringify2(b.input, 0);
 }
 function canGroupWith(a, b) {
   if (!entriesShareActionInput(a, b))
@@ -5592,19 +5002,19 @@ function NiceActionDevtools({ forceEnable, ...props }) {
   if (!forceEnable && process["env"]["NODE_ENV"] !== "development") {
     return null;
   }
-  return /* @__PURE__ */ jsx23(NiceActionDevtools_Panel, {
+  return /* @__PURE__ */ jsx20(NiceActionDevtools_Panel, {
     ...props
   });
 }
 function NiceActionDevtools_Panel({
   core,
-  position: defaultPosition = "dock-bottom",
+  position: defaultPosition = "dock-right",
   initialOpen = false
 }) {
-  const [prefs, setPrefsRaw] = useState12(() => readPrefs(defaultPosition, initialOpen));
-  const [entries, setEntries] = useState12([]);
-  const [selectedCuid, setSelectedCuid] = useState12(null);
-  useEffect4(() => core.subscribe(setEntries), [core]);
+  const [prefs, setPrefsRaw] = useState10(() => readPrefs(defaultPosition, initialOpen));
+  const [entries, setEntries] = useState10([]);
+  const [selectedCuid, setSelectedCuid] = useState10(null);
+  useEffect3(() => core.subscribe(setEntries), [core]);
   const groups = useMemo3(() => {
     const byCuid = new Map(entries.map((e) => [e.cuid, e]));
     const roots = entries.filter((e) => e.parentCuid == null || !byCuid.has(e.parentCuid));
@@ -5626,16 +5036,24 @@ function NiceActionDevtools_Panel({
   const setPrefs = (update) => {
     setPrefsRaw((prev) => ({ ...prev, ...update }));
   };
-  useEffect4(() => {
+  useEffect3(() => {
     const timer = setTimeout(() => writePrefs(prefs), 250);
     return () => clearTimeout(timer);
   }, [prefs]);
-  const { position, isOpen, dockedHeight, dockedWidth, detailRatio, stayOnLatest, followLatestOnSelect } = prefs;
+  const {
+    position,
+    isOpen,
+    dockedHeight,
+    dockedWidth,
+    detailRatio,
+    stayOnLatest,
+    followLatestOnSelect
+  } = prefs;
   const dockSide = getDockSide(position);
   const isHorizDock = dockSide === "top" || dockSide === "bottom";
   const dockedSize = isHorizDock ? dockedHeight : dockedWidth;
   const latestCuid = groups.length > 0 ? groups[0].representative.cuid : null;
-  useEffect4(() => {
+  useEffect3(() => {
     if (stayOnLatest && latestCuid != null)
       setSelectedCuid(latestCuid);
   }, [stayOnLatest, latestCuid]);
@@ -5664,7 +5082,7 @@ function NiceActionDevtools_Panel({
   const panelId = useId();
   const [, bumpView] = useReducer((n) => n + 1, 0);
   const badge = runningCount > 0 ? `${runningCount}●` : undefined;
-  useEffect4(() => {
+  useEffect3(() => {
     const unregister = dock.register({
       id: panelId,
       label: "actions",
@@ -5681,7 +5099,7 @@ function NiceActionDevtools_Panel({
       unsubscribe();
     };
   }, [dock, panelId]);
-  useEffect4(() => {
+  useEffect3(() => {
     dock.update(panelId, { side: dockSide, size: dockedSize, open: isOpen, badge });
   }, [dock, panelId, dockSide, dockedSize, isOpen, badge]);
   const view = dock.getView(panelId);
@@ -5693,7 +5111,7 @@ function NiceActionDevtools_Panel({
   };
   if (!isOpen) {
     if (view.isPrimary && !view.anyOpen) {
-      return /* @__PURE__ */ jsx23(DevtoolsLauncher, {
+      return /* @__PURE__ */ jsx20(DevtoolsLauncher, {
         items: view.devtools
       });
     }
@@ -5745,16 +5163,17 @@ function NiceActionDevtools_Panel({
     },
     childEntriesMap
   };
-  return /* @__PURE__ */ jsxs20("div", {
+  return /* @__PURE__ */ jsxs18("div", {
     id: "__nice-action-devtools-panel",
     style: panelStyle,
     children: [
-      /* @__PURE__ */ jsx23(ResizeHandle, {
+      /* @__PURE__ */ jsx20(ResizeHandle, {
         dockSide,
         dockedSize,
         onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
       }),
-      /* @__PURE__ */ jsx23(PanelHeader, {
+      /* @__PURE__ */ jsx20(PanelHeader, {
+        title: "⚡ action",
         position,
         onPositionChange: (p) => setPrefs({ position: p }),
         onClose: () => setPrefs({ isOpen: false }),
@@ -5764,7 +5183,7 @@ function NiceActionDevtools_Panel({
         } : undefined,
         openOthers: view.otherClosed
       }),
-      /* @__PURE__ */ jsxs20("div", {
+      /* @__PURE__ */ jsxs18("div", {
         style: {
           flex: 1,
           display: "flex",
@@ -5773,7 +5192,7 @@ function NiceActionDevtools_Panel({
           minHeight: 0
         },
         children: [
-          /* @__PURE__ */ jsxs20("div", {
+          /* @__PURE__ */ jsxs18("div", {
             style: {
               flexGrow: selectedEntry != null ? 1 - detailRatio : 1,
               flexShrink: 1,
@@ -5785,7 +5204,8 @@ function NiceActionDevtools_Panel({
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ jsx23(FollowToggles, {
+              /* @__PURE__ */ jsx20(FollowLatestToggles, {
+                noun: "action",
                 stayOnLatest,
                 onStayOnLatestChange: (next) => setPrefs({ stayOnLatest: next }),
                 followLatestOnSelect,
@@ -5797,19 +5217,19 @@ function NiceActionDevtools_Panel({
                   }
                 }
               }),
-              /* @__PURE__ */ jsx23(ActionList, {
+              /* @__PURE__ */ jsx20(ActionList, {
                 ...virtualListProps,
                 style: { width: "100%", flex: 1, minHeight: 0, overflowY: "auto" }
               })
             ]
           }),
-          selectedEntry != null && /* @__PURE__ */ jsxs20(Fragment11, {
+          selectedEntry != null && /* @__PURE__ */ jsxs18(Fragment10, {
             children: [
-              /* @__PURE__ */ jsx23(SplitHandle, {
+              /* @__PURE__ */ jsx20(SplitHandle, {
                 horizontal: isHorizDock,
                 onRatioChange: (ratio) => setPrefs({ detailRatio: ratio })
               }),
-              /* @__PURE__ */ jsx23("div", {
+              /* @__PURE__ */ jsx20("div", {
                 style: {
                   flexGrow: detailRatio,
                   flexShrink: 1,
@@ -5827,7 +5247,7 @@ function NiceActionDevtools_Panel({
                     boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
                   }
                 },
-                children: /* @__PURE__ */ jsx23(ActionDetailPanel, {
+                children: /* @__PURE__ */ jsx20(ActionDetailPanel, {
                   entry: selectedEntry,
                   parent: selectedEntryParent,
                   childEntries: selectedEntryChildren,
@@ -5841,82 +5261,6 @@ function NiceActionDevtools_Panel({
     ]
   });
 }
-function FollowToggles({
-  stayOnLatest,
-  onStayOnLatestChange,
-  followLatestOnSelect,
-  onFollowLatestOnSelectChange
-}) {
-  return /* @__PURE__ */ jsxs20("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      flexShrink: 0,
-      paddingBottom: "3px",
-      background: DEVTOOL_SECTION_BACKGROUND,
-      borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
-    },
-    children: [
-      /* @__PURE__ */ jsx23(ToggleLabel, {
-        title: "Auto-select the most recent action so the detail pane keeps showing the latest as new actions land",
-        checked: stayOnLatest,
-        onChange: onStayOnLatestChange,
-        children: "Follow latest"
-      }),
-      /* @__PURE__ */ jsxs20("div", {
-        style: { display: "flex", alignItems: "center", paddingLeft: "12px", marginTop: "-4px" },
-        children: [
-          /* @__PURE__ */ jsx23("span", {
-            "aria-hidden": true,
-            style: {
-              color: DEVTOOL_COLOR_TEXT_MUTED,
-              fontFamily: SANS_FONT2,
-              fontSize: "10px",
-              lineHeight: 1
-            },
-            children: "└"
-          }),
-          /* @__PURE__ */ jsx23(ToggleLabel, {
-            title: "When you click the latest action, turn 'Follow latest' back on so the view resumes tracking new actions. Turn this off to pin exactly to the action you click instead.",
-            checked: followLatestOnSelect,
-            onChange: onFollowLatestOnSelectChange,
-            children: "clicking latest re-follows"
-          })
-        ]
-      })
-    ]
-  });
-}
-function ToggleLabel({
-  checked,
-  onChange,
-  title,
-  children
-}) {
-  return /* @__PURE__ */ jsxs20("label", {
-    title,
-    style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "6px",
-      padding: "5px 10px",
-      cursor: "pointer",
-      userSelect: "none",
-      color: checked ? DEVTOOL_COLOR_TEXT_SECONDARY : DEVTOOL_COLOR_TEXT_MUTED,
-      fontSize: "10px",
-      fontFamily: SANS_FONT2
-    },
-    children: [
-      /* @__PURE__ */ jsx23("input", {
-        type: "checkbox",
-        checked,
-        onChange: (e) => onChange(e.target.checked),
-        style: { accentColor: DEVTOOL_COLOR_SEMANTIC_SYSTEM, cursor: "pointer", margin: 0 }
-      }),
-      children
-    ]
-  });
-}
 export {
   NiceActionDevtools,
   ActionDevtoolsCore