@nice-code/action 0.2.13 → 0.2.15

package/build/devtools/browser/index.js

@@ -128,8 +128,7 @@ class ActionDevtoolsCore {
   }
 }
 // src/devtools/browser/NiceActionDevtools.tsx
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo2, useRef as useRef2, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState6 } from "react";
 
 // src/devtools/browser/components/ActionDetailPanel.tsx
 import { useMemo, useState as useState5 } from "react";
@@ -196,6 +195,7 @@ function DomainHierarchyTooltip({
   }, undefined, false, undefined, this);
 }
 function DomainChip({
+  subtle = false,
   domain,
   allDomains,
   size
@@ -216,10 +216,10 @@ function DomainChip({
       display: "flex",
       alignItems: "center",
       gap: "0.4em",
-      color: "#818cf8",
+      color: subtle ? "#4b5563" : "#818cf8",
       fontSize,
       background: "#0f172a",
-      border: "1px solid #312e81",
+      border: !subtle ? "1px solid #312e81" : "1px solid transparent",
       padding,
       borderRadius: "0.6rem",
       flexShrink: 0,
@@ -435,59 +435,9 @@ function CallStackSection({
   }, undefined, true, undefined, this);
 }
 
-// src/devtools/browser/components/Chip.tsx
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
-function Chip({
-  color,
-  borderColor,
-  fontSize = "8px",
-  padding = "1px 4px",
-  children,
-  style
-}) {
-  return /* @__PURE__ */ jsxDEV5("span", {
-    style: {
-      color,
-      fontSize,
-      background: "#0f172a",
-      border: `1px solid ${borderColor}`,
-      padding,
-      borderRadius: "3px",
-      flexShrink: 0,
-      whiteSpace: "nowrap",
-      ...style
-    },
-    children
-  }, undefined, false, undefined, this);
-}
-
-// src/devtools/browser/components/ChildDispatchChips.tsx
-import { jsxDEV as jsxDEV6, Fragment as Fragment2 } from "react/jsx-dev-runtime";
-function ChildDispatchChips({
-  labels,
-  size = "sm"
-}) {
-  if (labels == null || labels.length === 0)
-    return null;
-  const fontSize = size === "md" ? "9px" : "8px";
-  const padding = size === "md" ? "1px 4px" : "1px 3px";
-  return /* @__PURE__ */ jsxDEV6(Fragment2, {
-    children: labels.map((label) => /* @__PURE__ */ jsxDEV6(Chip, {
-      color: "#c084fc",
-      borderColor: "#581c87",
-      fontSize,
-      padding,
-      children: [
-        "↳ ",
-        label
-      ]
-    }, label, true, undefined, this))
-  }, undefined, false, undefined, this);
-}
-
 // src/devtools/browser/components/DetailSection.tsx
 import { useState as useState2 } from "react";
-import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
 var COMPACT_CHAR_LIMIT = 120;
 function DetailSection({
   label,
@@ -499,9 +449,9 @@ function DetailSection({
   const compactJson = safeStringify(value, 0);
   const canExpand = fullJson !== compactJson || compactJson.length > COMPACT_CHAR_LIMIT;
   const compactDisplay = compactJson.length > COMPACT_CHAR_LIMIT ? `${compactJson.slice(0, COMPACT_CHAR_LIMIT)}…` : compactJson;
-  return /* @__PURE__ */ jsxDEV7("div", {
+  return /* @__PURE__ */ jsxDEV5("div", {
     children: [
-      /* @__PURE__ */ jsxDEV7("div", {
+      /* @__PURE__ */ jsxDEV5("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -509,7 +459,7 @@ function DetailSection({
           marginBottom: "3px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV7("div", {
+          /* @__PURE__ */ jsxDEV5("div", {
             style: {
               color,
               fontSize: "10px",
@@ -518,13 +468,13 @@ function DetailSection({
             },
             children: label
           }, undefined, false, undefined, this),
-          canExpand && /* @__PURE__ */ jsxDEV7("span", {
+          canExpand && /* @__PURE__ */ jsxDEV5("span", {
             style: { color: "#334155", fontSize: "11px" },
             children: expanded ? "▾" : "▸"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      expanded ? /* @__PURE__ */ jsxDEV7("div", {
+      expanded ? /* @__PURE__ */ jsxDEV5("div", {
         onClick: canExpand ? () => setExpanded(false) : undefined,
         style: {
           margin: 0,
@@ -540,7 +490,7 @@ function DetailSection({
           cursor: canExpand ? "pointer" : "default"
         },
         children: fullJson
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV7("div", {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV5("div", {
         onClick: canExpand ? () => setExpanded(true) : undefined,
         style: {
           padding: "5px 8px",
@@ -560,31 +510,64 @@ function DetailSection({
   }, undefined, true, undefined, this);
 }
 
+// src/devtools/core/devtools_colors.ts
+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";
+
+// src/devtools/browser/components/Chip.tsx
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function Chip({
+  color,
+  borderColor,
+  fontSize = "8px",
+  padding = "1px 4px",
+  children,
+  style
+}) {
+  return /* @__PURE__ */ jsxDEV6("span", {
+    style: {
+      color,
+      fontSize,
+      background: "#0f172a",
+      border: `1px solid ${borderColor}`,
+      padding,
+      borderRadius: "3px",
+      flexShrink: 0,
+      whiteSpace: "nowrap",
+      ...style
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+
 // src/devtools/browser/components/HandlerChips.tsx
-import { jsxDEV as jsxDEV8, Fragment as Fragment3 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV7, Fragment as Fragment2 } from "react/jsx-dev-runtime";
 function getExternalLabel(hop) {
   if (hop.handlerType !== "external")
     return null;
   return hop.handlerClient != null ? `${hop.transport ?? "ext"} → ${hop.handlerClient.envId}` : `→ ${hop.transport ?? "ext"}`;
 }
-function HandlerChips({ entry, size, alwaysShowLocal = false }) {
+function HandlerChips({ entry, size }) {
   const firstHop = entry.meta.routing[0];
   const localEnvId = firstHop != null ? firstHop.runtime.envId : null;
   const externalLabel = firstHop != null ? getExternalLabel(firstHop) : null;
-  const fontSize = size === "md" ? "9px" : "8px";
+  const fontSize = size === "md" ? "1em" : "0.8em";
   const padding = size === "md" ? "1px 5px" : "1px 4px";
-  return /* @__PURE__ */ jsxDEV8(Fragment3, {
+  const firstHopIsLocal = firstHop != null && firstHop.handlerType === "local";
+  return /* @__PURE__ */ jsxDEV7(Fragment2, {
     children: [
-      localEnvId != null && (alwaysShowLocal || externalLabel == null) && /* @__PURE__ */ jsxDEV8(Chip, {
-        color: "#34d399",
-        borderColor: "#14532d",
+      localEnvId != null && (firstHopIsLocal || externalLabel == null) && /* @__PURE__ */ jsxDEV7(Chip, {
+        color: DEVTOOL_COLOR_HANDLER_LOCAL_TEXT,
+        borderColor: DEVTOOL_COLOR_HANDLER_LOCAL_BORDER,
         fontSize,
         padding,
-        children: localEnvId
+        children: "local"
       }, undefined, false, undefined, this),
-      externalLabel != null && /* @__PURE__ */ jsxDEV8(Chip, {
-        color: "#fbbf24",
-        borderColor: "#78350f",
+      externalLabel != null && /* @__PURE__ */ jsxDEV7(Chip, {
+        color: DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT,
+        borderColor: DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER,
         fontSize,
         padding,
         children: externalLabel
@@ -595,19 +578,19 @@ function HandlerChips({ entry, size, alwaysShowLocal = false }) {
 
 // src/devtools/browser/components/MetaSection.tsx
 import { useState as useState3 } from "react";
-import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
 function MetaChip({ label, value }) {
-  return /* @__PURE__ */ jsxDEV9("span", {
+  return /* @__PURE__ */ jsxDEV8("span", {
     style: { whiteSpace: "nowrap" },
     children: [
-      /* @__PURE__ */ jsxDEV9("span", {
+      /* @__PURE__ */ jsxDEV8("span", {
         style: { color: "#475569" },
         children: [
           label,
           " "
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV9("span", {
+      /* @__PURE__ */ jsxDEV8("span", {
         style: { color: "#cbd5e1" },
         children: value
       }, undefined, false, undefined, this)
@@ -623,9 +606,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__ */ jsxDEV9("div", {
+  return /* @__PURE__ */ jsxDEV8("div", {
     children: [
-      /* @__PURE__ */ jsxDEV9("div", {
+      /* @__PURE__ */ jsxDEV8("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -633,7 +616,7 @@ function MetaSection({ entry }) {
           marginBottom: "3px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV9("div", {
+          /* @__PURE__ */ jsxDEV8("div", {
             style: {
               color: "#60a5fa",
               fontSize: "10px",
@@ -642,16 +625,16 @@ function MetaSection({ entry }) {
             },
             children: "Meta"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV9("span", {
+          /* @__PURE__ */ jsxDEV8("span", {
             style: { color: "#334155", fontSize: "11px" },
             children: expanded ? "▾" : "▸"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      expanded ? /* @__PURE__ */ jsxDEV9("div", {
+      expanded ? /* @__PURE__ */ jsxDEV8("div", {
         onClick: () => setExpanded(false),
         style: { background: "#1e293b", borderRadius: "4px", overflow: "hidden", cursor: "pointer" },
-        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV9("div", {
+        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV8("div", {
           style: {
             display: "grid",
             gridTemplateColumns: "52px 1fr",
@@ -661,17 +644,17 @@ function MetaSection({ entry }) {
             alignItems: "start"
           },
           children: [
-            /* @__PURE__ */ jsxDEV9("span", {
+            /* @__PURE__ */ jsxDEV8("span", {
               style: { textAlign: "left", color: "#475569", fontSize: "10px", paddingTop: "1px" },
               children: label
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV9("span", {
+            /* @__PURE__ */ jsxDEV8("span", {
               style: { textAlign: "left", color: "#cbd5e1", fontSize: "11px", wordBreak: "break-all" },
               children: value
             }, undefined, false, undefined, this)
           ]
         }, label, true, undefined, this))
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV9("div", {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV8("div", {
         onClick: () => setExpanded(true),
         style: {
           background: "#1e293b",
@@ -685,19 +668,19 @@ function MetaSection({ entry }) {
           cursor: "pointer"
         },
         children: [
-          /* @__PURE__ */ jsxDEV9(MetaChip, {
+          /* @__PURE__ */ jsxDEV8(MetaChip, {
             label: "cuid",
             value: `…${cuid.slice(-8)}`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV9(MetaChip, {
+          /* @__PURE__ */ jsxDEV8(MetaChip, {
             label: "origin",
             value: meta.originClient.envId
           }, undefined, false, undefined, this),
-          meta.originClient.perId != null && /* @__PURE__ */ jsxDEV9(MetaChip, {
+          meta.originClient.perId != null && /* @__PURE__ */ jsxDEV8(MetaChip, {
             label: "perId",
             value: meta.originClient.perId.length > 10 ? `${meta.originClient.perId.slice(0, 10)}…` : meta.originClient.perId
           }, undefined, false, undefined, this),
-          meta.originClient.insId != null && /* @__PURE__ */ jsxDEV9(MetaChip, {
+          meta.originClient.insId != null && /* @__PURE__ */ jsxDEV8(MetaChip, {
             label: "insId",
             value: meta.originClient.insId.length > 10 ? `${meta.originClient.insId.slice(0, 10)}…` : meta.originClient.insId
           }, undefined, false, undefined, this)
@@ -708,7 +691,7 @@ function MetaSection({ entry }) {
 }
 
 // src/devtools/browser/components/RoutingSection.tsx
-import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
 function RoutingSection({
   entry,
   minHopCount = 0
@@ -718,12 +701,12 @@ function RoutingSection({
   const phantomCount = Math.max(0, minHopCount - hopCount);
   if (hopCount === 0 && phantomCount === 0)
     return null;
-  return /* @__PURE__ */ jsxDEV10("div", {
+  return /* @__PURE__ */ jsxDEV9("div", {
     children: [
-      /* @__PURE__ */ jsxDEV10(SectionLabel, {
+      /* @__PURE__ */ jsxDEV9(SectionLabel, {
         label: hopCount > 0 ? `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}` : "Routing"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV10("div", {
+      /* @__PURE__ */ jsxDEV9("div", {
         style: { display: "flex", flexDirection: "column", gap: "2px" },
         children: [
           meta.routing.map((hop, i) => {
@@ -732,7 +715,7 @@ function RoutingSection({
             const badgeColor = isLocal ? "#34d399" : "#fbbf24";
             const badgeText = isLocal ? "● exec" : `→ ${hop.transport ?? "ext"}`;
             const runtimeTitle = [hop.runtime.perId, hop.runtime.insId].filter(Boolean).join(" · ") || undefined;
-            return /* @__PURE__ */ jsxDEV10("div", {
+            return /* @__PURE__ */ jsxDEV9("div", {
               style: {
                 background: "#1e293b",
                 borderRadius: "4px",
@@ -745,14 +728,14 @@ function RoutingSection({
                 padding: "4px 8px"
               },
               children: [
-                /* @__PURE__ */ jsxDEV10("span", {
+                /* @__PURE__ */ jsxDEV9("span", {
                   style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                   children: [
-                    /* @__PURE__ */ jsxDEV10("span", {
+                    /* @__PURE__ */ jsxDEV9("span", {
                       style: { color: "#334155", fontSize: "10px", width: "16px", textAlign: "right" },
                       children: i + 1
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV10("span", {
+                    /* @__PURE__ */ jsxDEV9("span", {
                       title: runtimeTitle,
                       style: {
                         color: "#94a3b8",
@@ -766,11 +749,11 @@ function RoutingSection({
                     }, undefined, false, undefined, this)
                   ]
                 }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV10("span", {
+                /* @__PURE__ */ jsxDEV9("span", {
                   style: { color: badgeColor, fontSize: "10px", whiteSpace: "nowrap" },
                   children: badgeText
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV10("span", {
+                /* @__PURE__ */ jsxDEV9("span", {
                   style: {
                     display: "flex",
                     alignItems: "center",
@@ -779,7 +762,7 @@ function RoutingSection({
                     overflow: "hidden"
                   },
                   children: [
-                    /* @__PURE__ */ jsxDEV10("span", {
+                    /* @__PURE__ */ jsxDEV9("span", {
                       style: {
                         color: "#475569",
                         fontSize: "10px",
@@ -789,7 +772,7 @@ function RoutingSection({
                       },
                       children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV10("span", {
+                    /* @__PURE__ */ jsxDEV9("span", {
                       style: { color: "#334155", fontSize: "10px", flexShrink: 0, marginLeft: "auto" },
                       children: [
                         "+",
@@ -802,7 +785,7 @@ function RoutingSection({
               ]
             }, `${hop.time}-${hop.runtime.envId}`, true, undefined, this);
           }),
-          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxDEV10("div", {
+          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxDEV9("div", {
             "aria-hidden": "true",
             style: {
               visibility: "hidden",
@@ -815,24 +798,24 @@ function RoutingSection({
               padding: "4px 8px"
             },
             children: [
-              /* @__PURE__ */ jsxDEV10("span", {
+              /* @__PURE__ */ jsxDEV9("span", {
                 style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                 children: [
-                  /* @__PURE__ */ jsxDEV10("span", {
+                  /* @__PURE__ */ jsxDEV9("span", {
                     style: { fontSize: "10px", width: "16px" },
                     children: "0"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV10("span", {
+                  /* @__PURE__ */ jsxDEV9("span", {
                     style: { fontSize: "11px" },
                     children: "placeholder"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV10("span", {
+              /* @__PURE__ */ jsxDEV9("span", {
                 style: { fontSize: "10px" },
                 children: "placeholder"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV10("span", {}, undefined, false, undefined, this)
+              /* @__PURE__ */ jsxDEV9("span", {}, undefined, false, undefined, this)
             ]
           }, key, true, undefined, this))
         ]
@@ -842,8 +825,66 @@ function RoutingSection({
 }
 
 // src/devtools/browser/components/StackTraceSection.tsx
-import { useState as useState4 } from "react";
-import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+import { useEffect as useEffect2, useState as useState4 } from "react";
+
+// src/devtools/browser/components/sourceMapResolver.ts
+import { SourceMapConsumer } from "source-map-js";
+var consumerCache = new Map;
+async function loadConsumer(fileUrl) {
+  try {
+    if (!fileUrl.startsWith("http://") && !fileUrl.startsWith("https://"))
+      return null;
+    const resp = await fetch(fileUrl);
+    if (!resp.ok)
+      return null;
+    const text = await resp.text();
+    const match = text.match(/\/\/[#@] sourceMappingURL=(\S+)/);
+    if (match == null)
+      return null;
+    const mapRef = match[1];
+    let mapJson;
+    if (mapRef.startsWith("data:")) {
+      const commaIdx = mapRef.indexOf(",");
+      if (commaIdx === -1)
+        return null;
+      const header = mapRef.slice(5, commaIdx);
+      const payload = mapRef.slice(commaIdx + 1);
+      mapJson = header.includes("base64") ? atob(payload) : decodeURIComponent(payload);
+    } else {
+      const mapUrl = new URL(mapRef, fileUrl).href;
+      const mapResp = await fetch(mapUrl);
+      if (!mapResp.ok)
+        return null;
+      mapJson = await mapResp.text();
+    }
+    return new SourceMapConsumer(JSON.parse(mapJson));
+  } catch {
+    return null;
+  }
+}
+function getConsumer(fileUrl) {
+  const key = fileUrl.split("?")[0] ?? fileUrl;
+  if (!consumerCache.has(key)) {
+    consumerCache.set(key, loadConsumer(fileUrl));
+  }
+  return consumerCache.get(key);
+}
+async function resolveCompiledPosition(fileUrl, line, col) {
+  try {
+    const consumer = await getConsumer(fileUrl);
+    if (consumer == null)
+      return null;
+    const pos = consumer.originalPositionFor({ line, column: col });
+    if (pos.source == null || pos.line == null)
+      return null;
+    return { file: pos.source, line: pos.line, col: pos.column ?? 0 };
+  } catch {
+    return null;
+  }
+}
+
+// src/devtools/browser/components/StackTraceSection.tsx
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
 var INTERNAL_PATTERNS = [
   "/nice-action/",
   "@nice-code/action",
@@ -863,16 +904,39 @@ function parseStackFrames(stack) {
     const matchFn = raw.match(/^at (.+?) \((.+):(\d+):(\d+)\)$/);
     if (matchFn != null) {
       const file = matchFn[2];
-      return { fn: matchFn[1], file, raw, isInternal: isInternalFrame(file) };
+      return {
+        fn: matchFn[1],
+        file,
+        line: parseInt(matchFn[3], 10),
+        col: parseInt(matchFn[4], 10),
+        raw,
+        isInternal: isInternalFrame(file)
+      };
     }
     const matchUrl = raw.match(/^at (.+):(\d+):(\d+)$/);
     if (matchUrl != null) {
       const file = matchUrl[1];
-      return { file, raw, isInternal: isInternalFrame(file) };
+      return {
+        file,
+        line: parseInt(matchUrl[2], 10),
+        col: parseInt(matchUrl[3], 10),
+        raw,
+        isInternal: isInternalFrame(file)
+      };
     }
     return { raw, isInternal: true };
   }).filter((f) => f != null);
 }
+async function resolveSourceMapPositions(frames) {
+  return Promise.all(frames.map(async (frame) => {
+    if (frame.isInternal || frame.file == null || frame.line == null)
+      return frame;
+    const resolved = await resolveCompiledPosition(frame.file, frame.line, frame.col ?? 0);
+    if (resolved == null)
+      return frame;
+    return { ...frame, file: resolved.file, line: resolved.line, col: resolved.col };
+  }));
+}
 function formatFrameFile(file) {
   if (file == null)
     return "?";
@@ -894,17 +958,32 @@ function StackTraceSection({
   color = "#60a5fa"
 }) {
   const [showAll, setShowAll] = useState4(false);
+  const [resolvedFrames, setResolvedFrames] = useState4(null);
+  useEffect2(() => {
+    if (stack == null)
+      return;
+    setResolvedFrames(null);
+    const parsed = parseStackFrames(stack);
+    let cancelled = false;
+    resolveSourceMapPositions(parsed).then((frames) => {
+      if (!cancelled)
+        setResolvedFrames(frames);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [stack]);
   if (stack == null)
     return null;
-  const allFrames = parseStackFrames(stack);
+  const allFrames = resolvedFrames ?? parseStackFrames(stack);
   const userFrames = allFrames.filter((f) => !f.isInternal);
   const hasInternalFrames = allFrames.length > userFrames.length;
   const displayFrames = showAll ? allFrames : userFrames;
   if (allFrames.length === 0)
     return null;
-  return /* @__PURE__ */ jsxDEV11("div", {
+  return /* @__PURE__ */ jsxDEV10("div", {
     children: [
-      /* @__PURE__ */ jsxDEV11("div", {
+      /* @__PURE__ */ jsxDEV10("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -912,17 +991,17 @@ function StackTraceSection({
           marginBottom: "3px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV11(SectionLabel, {
+          /* @__PURE__ */ jsxDEV10(SectionLabel, {
             label,
             color
           }, undefined, false, undefined, this),
-          hasInternalFrames && /* @__PURE__ */ jsxDEV11("span", {
+          hasInternalFrames && /* @__PURE__ */ jsxDEV10("span", {
             style: { color: "#475569", fontSize: "9px" },
             children: !showAll ? "user only" : `all (${allFrames.length})`
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV11("div", {
+      /* @__PURE__ */ jsxDEV10("div", {
         onClick: () => setShowAll((s) => !s),
         style: {
           background: "#040a13",
@@ -931,7 +1010,7 @@ function StackTraceSection({
           overflow: "hidden",
           cursor: "pointer"
         },
-        children: displayFrames.length === 0 ? /* @__PURE__ */ jsxDEV11("div", {
+        children: displayFrames.length === 0 ? /* @__PURE__ */ jsxDEV10("div", {
           style: { padding: "6px 10px", color: "#64748b", fontSize: "10px", fontStyle: "italic" },
           children: "no user frames captured"
         }, undefined, false, undefined, this) : displayFrames.map((frame, idx) => {
@@ -941,7 +1020,7 @@ function StackTraceSection({
           const bareFilename = slashIdx >= 0 ? displayFile.slice(slashIdx + 1) : displayFile;
           const titleStr = frame.file != null ? frame.file : frame.raw;
           const isUser = !frame.isInternal;
-          return /* @__PURE__ */ jsxDEV11("div", {
+          return /* @__PURE__ */ jsxDEV10("div", {
             title: titleStr,
             style: {
               display: "flex",
@@ -951,7 +1030,7 @@ function StackTraceSection({
               borderBottom: idx < displayFrames.length - 1 ? "1px solid #0f172a" : undefined
             },
             children: [
-              /* @__PURE__ */ jsxDEV11("span", {
+              /* @__PURE__ */ jsxDEV10("span", {
                 style: {
                   color: isUser ? "#64748b" : "#2d3f53",
                   fontSize: "10px",
@@ -962,12 +1041,12 @@ function StackTraceSection({
                 },
                 children: idx + 1
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV11("div", {
+              /* @__PURE__ */ jsxDEV10("div", {
                 style: { display: "flex", flexDirection: "column", gap: "0.15em", lineHeight: 1.2 },
                 children: [
-                  /* @__PURE__ */ jsxDEV11("div", {
+                  /* @__PURE__ */ jsxDEV10("div", {
                     style: { display: "flex", alignItems: "center" },
-                    children: /* @__PURE__ */ jsxDEV11("span", {
+                    children: /* @__PURE__ */ jsxDEV10("span", {
                       style: {
                         color: isUser ? "#e2e8f0" : "#50698b",
                         fontSize: "12px",
@@ -979,10 +1058,10 @@ function StackTraceSection({
                       children: frame.fn ?? "(anonymous)"
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV11("div", {
+                  /* @__PURE__ */ jsxDEV10("div", {
                     style: { display: "flex", alignItems: "baseline", overflow: "hidden" },
                     children: [
-                      folderPrefix !== "" && /* @__PURE__ */ jsxDEV11("span", {
+                      folderPrefix !== "" && /* @__PURE__ */ jsxDEV10("span", {
                         style: {
                           color: isUser ? "#596b83" : "#2d3f53",
                           fontSize: "10px",
@@ -994,7 +1073,7 @@ function StackTraceSection({
                         },
                         children: folderPrefix
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV11("span", {
+                      /* @__PURE__ */ jsxDEV10("span", {
                         style: {
                           color: isUser ? "#8a9ebb" : "#425979",
                           fontSize: "10px",
@@ -1002,13 +1081,26 @@ function StackTraceSection({
                           flexShrink: 0
                         },
                         children: bareFilename
-                      }, undefined, false, undefined, this)
+                      }, undefined, false, undefined, this),
+                      frame.line != null && /* @__PURE__ */ jsxDEV10("span", {
+                        style: {
+                          color: isUser ? "#4a7fa8" : "#2d4a63",
+                          fontSize: "10px",
+                          whiteSpace: "nowrap",
+                          flexShrink: 0,
+                          fontVariantNumeric: "tabular-nums"
+                        },
+                        children: [
+                          ":",
+                          frame.line
+                        ]
+                      }, undefined, true, undefined, this)
                     ]
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this)
             ]
-          }, `${frame.fn ?? "anon"}@${frame.file ?? "unknown"}`, true, undefined, this);
+          }, frame.raw, true, undefined, this);
         })
       }, undefined, false, undefined, this)
     ]
@@ -1016,7 +1108,7 @@ function StackTraceSection({
 }
 
 // src/devtools/browser/components/ActionDetailPanel.tsx
-import { jsxDEV as jsxDEV12, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV11, Fragment as Fragment3 } from "react/jsx-dev-runtime";
 function DetailHeader({
   entry,
   isActive,
@@ -1026,7 +1118,7 @@ function DetailHeader({
   const color = STATUS_COLOR[entry.status];
   const symbol = STATUS_SYMBOL[entry.status];
   const timestamp = formatTimestamp(entry.startTime);
-  return /* @__PURE__ */ jsxDEV12("div", {
+  return /* @__PURE__ */ jsxDEV11("div", {
     onClick: !isActive ? onClick : undefined,
     style: {
       padding: "10px 12px",
@@ -1040,7 +1132,7 @@ function DetailHeader({
       cursor: isActive ? "default" : "pointer"
     },
     children: [
-      /* @__PURE__ */ jsxDEV12("span", {
+      /* @__PURE__ */ jsxDEV11("span", {
         style: {
           color,
           fontSize: "15px",
@@ -1050,16 +1142,20 @@ function DetailHeader({
         },
         children: symbol
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12("div", {
-        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "5px" },
+      /* @__PURE__ */ jsxDEV11("div", {
+        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "0.5em" },
         children: [
-          /* @__PURE__ */ jsxDEV12("div", {
-            style: { display: "flex", alignItems: "center", minWidth: 0, gap: "0.5em" },
+          /* @__PURE__ */ jsxDEV11("div", {
+            style: { display: "flex", alignItems: "center", minWidth: 0, gap: "0.4em" },
             children: [
-              /* @__PURE__ */ jsxDEV12("span", {
+              /* @__PURE__ */ jsxDEV11("span", {
+                style: { fontSize: "1.2em" },
+                children: "⚡"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("span", {
                 style: {
                   color: "#f1f5f9",
-                  fontSize: "13px",
+                  fontSize: "1.2em",
                   fontWeight: "600",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
@@ -1069,14 +1165,14 @@ function DetailHeader({
                 },
                 children: entry.actionId
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV12(DomainChip, {
+              /* @__PURE__ */ jsxDEV11(DomainChip, {
                 domain: entry.domain,
                 allDomains: entry.allDomains,
                 size: "md"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV12("div", {
+          /* @__PURE__ */ jsxDEV11("div", {
             style: {
               display: "flex",
               alignItems: "center",
@@ -1084,7 +1180,7 @@ function DetailHeader({
               gap: "8px"
             },
             children: [
-              /* @__PURE__ */ jsxDEV12("div", {
+              /* @__PURE__ */ jsxDEV11("div", {
                 style: {
                   display: "flex",
                   alignItems: "center",
@@ -1092,28 +1188,21 @@ function DetailHeader({
                   minWidth: 0,
                   overflow: "hidden"
                 },
-                children: [
-                  /* @__PURE__ */ jsxDEV12(HandlerChips, {
-                    entry,
-                    size: "md",
-                    alwaysShowLocal: true
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV12(ChildDispatchChips, {
-                    labels: childExternalLabels,
-                    size: "md"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV12("div", {
+                children: /* @__PURE__ */ jsxDEV11(HandlerChips, {
+                  entry,
+                  size: "md"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("div", {
                 style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 },
                 children: [
-                  /* @__PURE__ */ jsxDEV12("span", {
+                  /* @__PURE__ */ jsxDEV11("span", {
                     style: { color: "#334155", fontSize: "10px", letterSpacing: "0.02em" },
                     children: timestamp
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV12("span", {
+                  /* @__PURE__ */ jsxDEV11("span", {
                     style: { color, fontSize: "12px", fontWeight: "500" },
-                    children: /* @__PURE__ */ jsxDEV12(DurationDisplay, {
+                    children: /* @__PURE__ */ jsxDEV11(DurationDisplay, {
                       entry
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this)
@@ -1153,7 +1242,7 @@ function ActionDetailPanel({
   const handleFocusChild = (cuid) => {
     setFocusedChildCuid((prev) => prev === cuid ? null : cuid);
   };
-  return /* @__PURE__ */ jsxDEV12("div", {
+  return /* @__PURE__ */ jsxDEV11("div", {
     style: {
       flex: 1,
       display: "flex",
@@ -1163,13 +1252,13 @@ function ActionDetailPanel({
       background: "#0f172a"
     },
     children: [
-      /* @__PURE__ */ jsxDEV12(DetailHeader, {
+      /* @__PURE__ */ jsxDEV11(DetailHeader, {
         entry,
         isActive: focusedChildCuid === null,
         onClick: () => setFocusedChildCuid(null),
         childExternalLabels
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12("div", {
+      /* @__PURE__ */ jsxDEV11("div", {
         style: {
           flex: 1,
           overflowY: "auto",
@@ -1180,63 +1269,63 @@ function ActionDetailPanel({
           gap: "8px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV12(CallStackSection, {
+          /* @__PURE__ */ jsxDEV11(CallStackSection, {
             parent,
             childEntries,
             focusedChildCuid,
             onFocusChild: handleFocusChild,
             onSelectParent: onSelectEntry
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12(MetaSection, {
+          /* @__PURE__ */ jsxDEV11(MetaSection, {
             entry: focusedEntry
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12(RoutingSection, {
+          /* @__PURE__ */ jsxDEV11(RoutingSection, {
             entry: focusedEntry,
             minHopCount: maxRoutingHops
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12(StackTraceSection, {
+          /* @__PURE__ */ jsxDEV11(StackTraceSection, {
             label: "Dispatch Site",
             stack: focusedEntry.callSite,
             color: "#94a3b8"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12(DetailSection, {
+          /* @__PURE__ */ jsxDEV11(DetailSection, {
             label: "Input",
             value: focusedEntry.input
           }, undefined, false, undefined, this),
-          focusedEntry.status === "success" && /* @__PURE__ */ jsxDEV12(DetailSection, {
+          focusedEntry.status === "success" && /* @__PURE__ */ jsxDEV11(DetailSection, {
             label: "Output",
             value: focusedEntry.output,
             color: "#4ade80"
           }, undefined, false, undefined, this),
-          focusedEntry.status === "failed" && /* @__PURE__ */ jsxDEV12(Fragment4, {
+          focusedEntry.status === "failed" && /* @__PURE__ */ jsxDEV11(Fragment3, {
             children: [
-              /* @__PURE__ */ jsxDEV12(DetailSection, {
+              /* @__PURE__ */ jsxDEV11(DetailSection, {
                 label: "Error",
                 value: focusedEntry.error,
                 color: "#f87171"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV12(StackTraceSection, {
+              /* @__PURE__ */ jsxDEV11(StackTraceSection, {
                 label: "Error Stack",
                 stack: focusedEntry.errorStack,
                 color: "#f87171"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          focusedEntry.status === "aborted" && /* @__PURE__ */ jsxDEV12(Fragment4, {
+          focusedEntry.status === "aborted" && /* @__PURE__ */ jsxDEV11(Fragment3, {
             children: [
-              focusedEntry.abortReason != null && /* @__PURE__ */ jsxDEV12(DetailSection, {
+              focusedEntry.abortReason != null && /* @__PURE__ */ jsxDEV11(DetailSection, {
                 label: "Abort Reason",
                 value: focusedEntry.abortReason,
                 color: "#9ca3af"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV12(StackTraceSection, {
+              /* @__PURE__ */ jsxDEV11(StackTraceSection, {
                 label: "Abort Stack",
                 stack: focusedEntry.errorStack,
                 color: "#9ca3af"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV12(DetailSection, {
+          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV11(DetailSection, {
             label: `Progress (${focusedEntry.progressUpdates.length})`,
             value: focusedEntry.progressUpdates
           }, undefined, false, undefined, this)
@@ -1246,6 +1335,30 @@ function ActionDetailPanel({
   }, undefined, true, undefined, this);
 }
 
+// src/devtools/browser/components/ChildDispatchChips.tsx
+import { jsxDEV as jsxDEV12, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+function ChildDispatchChips({
+  labels,
+  size = "sm"
+}) {
+  if (labels == null || labels.length === 0)
+    return null;
+  const fontSize = size === "md" ? "1em" : "0.8em";
+  const padding = size === "md" ? "1px 4px" : "1px 3px";
+  return /* @__PURE__ */ jsxDEV12(Fragment4, {
+    children: labels.map((label) => /* @__PURE__ */ jsxDEV12(Chip, {
+      color: DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT,
+      borderColor: DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER,
+      fontSize,
+      padding,
+      children: [
+        "↳ ",
+        label
+      ]
+    }, label, true, undefined, this))
+  }, undefined, false, undefined, this);
+}
+
 // src/devtools/browser/components/ActionEntryRow.tsx
 import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
 function ActionEntryRow({
@@ -1280,6 +1393,12 @@ function ActionEntryRow({
           style: { color: "#334155", fontSize: "10px", flexShrink: 0 },
           children: symbol
         }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV13(DomainChip, {
+          subtle: true,
+          domain: entry.domain,
+          allDomains: entry.allDomains,
+          size: "sm"
+        }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV13("span", {
           children: [
             /* @__PURE__ */ jsxDEV13("span", {
@@ -1300,11 +1419,6 @@ function ActionEntryRow({
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV13(DomainChip, {
-          domain: entry.domain,
-          allDomains: entry.allDomains,
-          size: "sm"
-        }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV13("span", {
           style: { color: "#334155", fontSize: "11px", flexShrink: 0 },
           children: /* @__PURE__ */ jsxDEV13(DurationDisplay, {
@@ -1368,9 +1482,18 @@ function ActionEntryRow({
               alignItems: "center",
               minWidth: 0,
               overflow: "hidden",
-              gap: "0.5em"
+              gap: "0.3em"
             },
             children: [
+              /* @__PURE__ */ jsxDEV13(DomainChip, {
+                domain: entry.domain,
+                allDomains: entry.allDomains,
+                size: "md"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV13("span", {
+                style: { color: isSelected ? "#818cf8" : "#3730a3", fontSize: "1em" },
+                children: "⚡"
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV13("span", {
                 style: {
                   color: "#cbd5e1",
@@ -1382,11 +1505,6 @@ function ActionEntryRow({
                   minWidth: "24px"
                 },
                 children: entry.actionId
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV13(DomainChip, {
-                domain: entry.domain,
-                allDomains: entry.allDomains,
-                size: "md"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
@@ -1427,7 +1545,7 @@ function ActionEntryRow({
                     fontSize: "9px",
                     padding: "1px 5px",
                     children: [
-                      "×",
+                      "x",
                       groupCount
                     ]
                   }, undefined, true, undefined, this),
@@ -1611,14 +1729,18 @@ if (typeof document !== "undefined" && !document.getElementById("__nice-action-d
       0%, 100% { opacity: 1; }
       50% { opacity: 0.35; }
     }
+    @keyframes __nice-action-shine {
+      0%   { transform: translateX(-100%); opacity: 0; }
+      15%  { opacity: 1; }
+      85%  { opacity: 1; }
+      100% { transform: translateX(200%); opacity: 0; }
+    }
   `;
   document.head?.appendChild(style);
 }
 var PREFS_KEY = "__nice-action-devtools-prefs";
 var DOCKED_HEIGHT_DEFAULT = 320;
 var DOCKED_WIDTH_DEFAULT = 420;
-var ROW_HEIGHT = 50;
-var SUB_ROW_HEIGHT = 30;
 function readPrefs(defaultPosition, initialOpen) {
   const fallback = {
     position: defaultPosition,
@@ -1689,10 +1811,10 @@ function NiceActionDevtools_Panel({
   const showDomainTooltip = useCallback((rect, allDomains) => setDomainTooltip({ rect, allDomains }), []);
   const hideDomainTooltip = useCallback(() => setDomainTooltip(null), []);
   const domainTooltipCtx = useMemo2(() => ({ show: showDomainTooltip, hide: hideDomainTooltip }), [showDomainTooltip, hideDomainTooltip]);
-  useEffect2(() => core.subscribe(setEntries), [core]);
+  useEffect3(() => core.subscribe(setEntries), [core]);
   const groups = useMemo2(() => {
     const byCuid = new Map(entries.map((e) => [e.cuid, e]));
-    const roots = entries.filter((e) => e.parentCuid == null || !byCuid.has(e.parentCuid));
+    const roots = entries.filter((e) => e.status !== "running" && (e.parentCuid == null || !byCuid.has(e.parentCuid)));
     return groupEntries(roots);
   }, [entries]);
   const childExternalLabelsMap = useMemo2(() => {
@@ -1714,19 +1836,20 @@ function NiceActionDevtools_Panel({
   }, [entries]);
   const handleGroupRowClick = (group) => {
     const repCuid = group.representative.cuid;
-    const isExpanded = expandedGroupCuids.has(repCuid);
-    const isSelected = selectedCuid === repCuid;
-    if (group.rest.length === 0) {
-      setSelectedCuid(isSelected ? null : repCuid);
-      setExpandedGroupCuids(new Set);
-    } else if (isSelected && isExpanded) {
-      setSelectedCuid(null);
-      setExpandedGroupCuids(new Set);
-    } else {
+    const allInGroup = [group.representative, ...group.rest];
+    const selectedInGroup = allInGroup.find((e) => e.cuid === selectedCuid) ?? null;
+    setExpandedGroupCuids(new Set);
+    if (selectedInGroup != null && selectedCuid !== repCuid) {
       setSelectedCuid(repCuid);
-      setExpandedGroupCuids(new Set([repCuid]));
+    } else {
+      setSelectedCuid(selectedCuid === repCuid ? null : repCuid);
     }
   };
+  const handleExpandGroup = (group) => {
+    const oldestCuid = (group.rest[group.rest.length - 1] ?? group.representative).cuid;
+    setSelectedCuid(null);
+    setExpandedGroupCuids(new Set([oldestCuid]));
+  };
   const setPrefs = (update) => {
     setPrefsRaw((prev) => {
       const next = { ...prev, ...update };
@@ -1740,7 +1863,7 @@ function NiceActionDevtools_Panel({
   const dockedSize = isHorizDock ? dockedHeight : dockedWidth;
   const selectedEntry = selectedCuid != null ? entries.find((e) => e.cuid === selectedCuid) : null;
   const runningCount = entries.filter((e) => e.status === "running").length;
-  useEffect2(() => {
+  useEffect3(() => {
     const sides = ["top", "bottom", "left", "right"];
     const clearAll = () => {
       sides.forEach((s) => {
@@ -1863,7 +1986,11 @@ function NiceActionDevtools_Panel({
     selectedCuid,
     expandedGroupCuids,
     onGroupClick: handleGroupRowClick,
-    onSubClick: (cuid, isSelected) => setSelectedCuid(isSelected ? null : cuid),
+    onSubClick: (cuid, isSelected) => {
+      setSelectedCuid(isSelected ? null : cuid);
+      setExpandedGroupCuids(new Set);
+    },
+    onExpandGroup: handleExpandGroup,
     childExternalLabelsMap
   };
   return /* @__PURE__ */ jsxDEV15(DomainTooltipCtx.Provider, {
@@ -1893,7 +2020,7 @@ function NiceActionDevtools_Panel({
         isHorizDock ? /* @__PURE__ */ jsxDEV15("div", {
           style: { flex: 1, display: "flex", overflow: "hidden" },
           children: [
-            /* @__PURE__ */ jsxDEV15(VirtualActionList, {
+            /* @__PURE__ */ jsxDEV15(ActionList, {
               ...virtualListProps,
               style: {
                 width: "340px",
@@ -1922,7 +2049,7 @@ function NiceActionDevtools_Panel({
           ]
         }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV15(Fragment5, {
           children: [
-            /* @__PURE__ */ jsxDEV15(VirtualActionList, {
+            /* @__PURE__ */ jsxDEV15(ActionList, {
               ...virtualListProps,
               style: {
                 overflowY: "auto",
@@ -1952,64 +2079,65 @@ function NiceActionDevtools_Panel({
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
-function VirtualActionList({
+function getFlatItemKey(item) {
+  const oldestCuid = item.group.rest[item.group.rest.length - 1]?.cuid ?? item.group.representative.cuid;
+  if (item.type === "group")
+    return `g:${oldestCuid}`;
+  if (item.type === "sub")
+    return `s:${item.entry.cuid}`;
+  return `c:${item.position}:${oldestCuid}`;
+}
+function ActionList({
   groups,
   selectedCuid,
   expandedGroupCuids,
   onGroupClick,
   onSubClick,
+  onExpandGroup,
   childExternalLabelsMap,
   style
 }) {
-  const outerRef = useRef2(null);
+  const containerRef = useRef2(null);
   const latestTime = groups[0]?.representative.startTime;
   const flatItems = useMemo2(() => {
     const result = [];
     for (let gi = 0;gi < groups.length; gi++) {
       const group = groups[gi];
       const repCuid = group.representative.cuid;
-      const isExpanded = expandedGroupCuids.has(repCuid) || group.rest.some((e) => e.cuid === selectedCuid);
+      const allInGroup = [group.representative, ...group.rest];
+      const selectedIdx = allInGroup.findIndex((e) => e.cuid === selectedCuid);
       result.push({ type: "group", group, groupIndex: gi });
-      if (isExpanded) {
-        for (const entry of group.rest) {
-          result.push({ type: "sub", entry, group });
+      const oldestCuid = (group.rest[group.rest.length - 1] ?? group.representative).cuid;
+      if (selectedIdx > 0) {
+        const aboveCount = selectedIdx;
+        const belowCount = allInGroup.length - selectedIdx - 1;
+        if (aboveCount > 0)
+          result.push({ type: "group-count", count: aboveCount, position: "above", group });
+        result.push({ type: "sub", entry: allInGroup[selectedIdx], group });
+        if (belowCount > 0)
+          result.push({ type: "group-count", count: belowCount, position: "below", group });
+      } else if (selectedIdx === 0 && group.rest.length > 0) {
+        result.push({ type: "group-count", count: group.rest.length, position: "below", group });
+      } else {
+        const isExpanded = expandedGroupCuids.has(repCuid) || expandedGroupCuids.has(oldestCuid);
+        if (isExpanded) {
+          for (const entry of group.rest) {
+            result.push({ type: "sub", entry, group });
+          }
         }
       }
     }
     return result;
   }, [groups, expandedGroupCuids, selectedCuid]);
-  const flatItemsRef = useRef2(flatItems);
-  flatItemsRef.current = flatItems;
-  const virtualizer = useVirtualizer({
-    count: flatItems.length,
-    getScrollElement: () => outerRef.current,
-    estimateSize: (i) => flatItemsRef.current[i]?.type === "sub" ? SUB_ROW_HEIGHT : ROW_HEIGHT,
-    overscan: 5,
-    measureElement: (el) => el.getBoundingClientRect().height
-  });
-  const prevGroupLenRef = useRef2(groups.length);
-  useLayoutEffect(() => {
-    const el = outerRef.current;
-    if (el == null)
-      return;
-    const prev = prevGroupLenRef.current;
-    prevGroupLenRef.current = groups.length;
-    const added = groups.length - prev;
-    if (added > 0 && el.scrollTop > 10) {
-      el.scrollTop += added * ROW_HEIGHT;
-    }
-  }, [groups]);
   const prevSelectedRef = useRef2(selectedCuid);
-  useEffect2(() => {
+  useEffect3(() => {
     if (selectedCuid === prevSelectedRef.current)
       return;
     prevSelectedRef.current = selectedCuid;
     if (selectedCuid == null)
       return;
-    const idx = flatItemsRef.current.findIndex((item) => item.type === "group" && (item.group.representative.cuid === selectedCuid || item.group.rest.some((e) => e.cuid === selectedCuid)) || item.type === "sub" && item.entry.cuid === selectedCuid);
-    if (idx >= 0)
-      virtualizer.scrollToIndex(idx, { align: "auto" });
-  }, [selectedCuid, virtualizer]);
+    containerRef.current?.querySelector(`[data-cuid="${selectedCuid}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [selectedCuid]);
   if (groups.length === 0) {
     return /* @__PURE__ */ jsxDEV15("div", {
       style,
@@ -2019,28 +2147,25 @@ function VirtualActionList({
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  const virtualItems = virtualizer.getVirtualItems();
   return /* @__PURE__ */ jsxDEV15("div", {
-    ref: outerRef,
+    ref: containerRef,
     style,
-    children: /* @__PURE__ */ jsxDEV15("div", {
-      style: { height: `${virtualizer.getTotalSize()}px`, position: "relative" },
-      children: virtualItems.map((vi) => {
-        const item = flatItems[vi.index];
-        if (item == null)
-          return null;
-        return /* @__PURE__ */ jsxDEV15("div", {
-          "data-index": vi.index,
-          ref: virtualizer.measureElement,
-          style: {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            transform: `translateY(${vi.start}px)`,
-            borderBottom: "1px solid #101109"
-          },
-          children: item.type === "group" ? /* @__PURE__ */ jsxDEV15(ActionEntryRow, {
+    children: flatItems.map((item) => {
+      const key = getFlatItemKey(item);
+      return /* @__PURE__ */ jsxDEV15("div", {
+        "data-cuid": item.type === "group" ? item.group.representative.cuid : item.type === "sub" ? item.entry.cuid : undefined,
+        style: { borderBottom: "1px solid #101109", position: "relative", overflow: "hidden" },
+        children: [
+          item.type === "group" && /* @__PURE__ */ jsxDEV15("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"
+            }
+          }, item.group.representative.cuid, false, undefined, this),
+          item.type === "group" ? /* @__PURE__ */ jsxDEV15(ActionEntryRow, {
             entry: item.group.representative,
             isSelected: selectedCuid === item.group.representative.cuid,
             groupCount: item.group.rest.length > 0 ? item.group.rest.length + 1 : undefined,
@@ -2048,7 +2173,34 @@ function VirtualActionList({
             latestTime,
             childExternalLabels: childExternalLabelsMap.get(item.group.representative.cuid),
             onClick: () => onGroupClick(item.group)
-          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15(ActionEntryRow, {
+          }, undefined, false, undefined, this) : item.type === "group-count" ? /* @__PURE__ */ jsxDEV15("div", {
+            onClick: () => onExpandGroup(item.group),
+            style: {
+              padding: "2px 28px",
+              fontSize: "10px",
+              color: "#475569",
+              display: "flex",
+              alignItems: "center",
+              gap: "5px",
+              background: "#0a1120",
+              cursor: "pointer",
+              userSelect: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV15("span", {
+                style: { opacity: 0.6 },
+                children: item.position === "above" ? "↑" : "↓"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV15("span", {
+                children: [
+                  item.count,
+                  " ",
+                  item.position === "above" ? "newer" : "older",
+                  " — click to browse"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV15(ActionEntryRow, {
             entry: item.entry,
             isSelected: selectedCuid === item.entry.cuid,
             isSubEntry: true,
@@ -2056,9 +2208,9 @@ function VirtualActionList({
             latestTime,
             onClick: () => onSubClick(item.entry.cuid, selectedCuid === item.entry.cuid)
           }, undefined, false, undefined, this)
-        }, vi.key, false, undefined, this);
-      })
-    }, undefined, false, undefined, this)
+        ]
+      }, key, true, undefined, this);
+    })
   }, undefined, false, undefined, this);
 }
 export {