@nice-code/action 0.2.11 → 0.2.13

package/build/devtools/browser/index.js

@@ -0,0 +1,2067 @@
+// src/ActionDefinition/Action/RunningAction.types.ts
+var ERunningActionState;
+((ERunningActionState2) => {
+  ERunningActionState2["running"] = "running";
+  ERunningActionState2["completed"] = "completed";
+})(ERunningActionState ||= {});
+var ERunningActionUpdateType;
+((ERunningActionUpdateType2) => {
+  ERunningActionUpdateType2["started"] = "started";
+  ERunningActionUpdateType2["progress"] = "progress";
+  ERunningActionUpdateType2["finished"] = "finished";
+})(ERunningActionUpdateType ||= {});
+var ERunningActionFinishedType;
+((ERunningActionFinishedType2) => {
+  ERunningActionFinishedType2["aborted"] = "aborted";
+  ERunningActionFinishedType2["failed"] = "failed";
+  ERunningActionFinishedType2["success"] = "success";
+})(ERunningActionFinishedType ||= {});
+
+// src/devtools/core/ActionDevtoolsCore.ts
+function extractRouting(context) {
+  return (context?.routing ?? []).map((item) => {
+    const handler = item.handler;
+    const isExternal = handler?.type === "external";
+    return {
+      runtime: {
+        envId: item.runtime?.envId ?? "unknown",
+        perId: item.runtime?.perId,
+        insId: item.runtime?.insId
+      },
+      handlerType: isExternal ? "external" : "local",
+      handlerClient: isExternal && handler.client != null ? {
+        envId: handler.client.envId ?? "unknown",
+        perId: handler.client.perId,
+        insId: handler.client.insId
+      } : undefined,
+      transport: isExternal ? handler.transType : undefined,
+      time: item.time
+    };
+  });
+}
+function extractMeta(context) {
+  return {
+    timeCreated: context?.timeCreated ?? Date.now(),
+    originClient: {
+      envId: context?.originClient?.envId ?? "unknown",
+      perId: context?.originClient?.perId,
+      insId: context?.originClient?.insId
+    },
+    routing: extractRouting(context)
+  };
+}
+
+class ActionDevtoolsCore {
+  _entries = [];
+  _listeners = new Set;
+  constructor(_options = {}) {}
+  attachToDomain(domain) {
+    return domain.addActionListener((update) => {
+      const { runningAction, type, time } = update;
+      if (type === "started" /* started */) {
+        const entry = {
+          cuid: runningAction.cuid,
+          actionId: runningAction.id,
+          domain: runningAction.domain,
+          allDomains: [...runningAction.allDomains],
+          status: "running",
+          startTime: time,
+          input: runningAction.state?.request?.input,
+          progressUpdates: [],
+          meta: extractMeta(runningAction.context),
+          parentCuid: runningAction.parentCuid,
+          callSite: runningAction.callSite
+        };
+        this._entries = [entry, ...this._entries];
+        this._notify();
+      } else if (type === "progress" /* progress */) {
+        this._updateEntry(runningAction.cuid, (e) => ({
+          ...e,
+          progressUpdates: [...e.progressUpdates, update.progress]
+        }));
+      } else if (type === "finished" /* finished */) {
+        this._updateEntry(runningAction.cuid, (e) => {
+          const finishedRoutingContext = update.response?.context ?? runningAction.context;
+          const base = {
+            ...e,
+            endTime: time,
+            meta: { ...e.meta, routing: extractRouting(finishedRoutingContext) }
+          };
+          const finishType = update.finishType;
+          if (finishType === "success" /* success */) {
+            return { ...base, status: "success", output: update.response?.result?.output };
+          }
+          if (finishType === "failed" /* failed */) {
+            const rawError = update.error;
+            const errorStack2 = rawError instanceof Error ? rawError.stack : undefined;
+            return { ...base, status: "failed", error: rawError, errorStack: errorStack2 };
+          }
+          const abortReason = update.reason;
+          const errorStack = abortReason instanceof Error ? abortReason.stack : undefined;
+          return { ...base, status: "aborted", abortReason, errorStack };
+        });
+      }
+    });
+  }
+  getEntries() {
+    return this._entries;
+  }
+  subscribe(listener) {
+    this._listeners.add(listener);
+    listener(this._entries);
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+  clear() {
+    this._entries = [];
+    this._notify();
+  }
+  _updateEntry(cuid, updater) {
+    this._entries = this._entries.map((e) => e.cuid === cuid ? updater(e) : e);
+    this._notify();
+  }
+  _notify() {
+    const snapshot = this._entries;
+    for (const listener of this._listeners)
+      listener(snapshot);
+  }
+}
+// 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";
+
+// src/devtools/browser/components/ActionDetailPanel.tsx
+import { useMemo, useState as useState5 } from "react";
+
+// src/devtools/browser/components/DomainChip.tsx
+import { createContext, useContext, useRef } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var DomainTooltipCtx = createContext(null);
+function DomainHierarchyTooltip({
+  allDomains,
+  anchor
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      position: "fixed",
+      left: anchor.left,
+      top: anchor.top - 6,
+      transform: "translateY(-100%)",
+      zIndex: 2147483647,
+      background: "#0c1526",
+      border: "1px solid #312e81",
+      borderRadius: "5px",
+      padding: "6px 8px",
+      fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+      boxShadow: "0 4px 20px rgba(0,0,0,0.6)",
+      pointerEvents: "none",
+      minWidth: "80px"
+    },
+    children: allDomains.map((d, i) => {
+      const isCurrent = i === allDomains.length - 1;
+      return /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "0.3rem",
+          paddingLeft: `${i * 10}px`,
+          paddingTop: i > 0 ? "0.1rem" : undefined
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            style: {
+              fontSize: "0.8rem",
+              height: "0.6em",
+              width: "0.6em",
+              overflow: "hidden",
+              color: isCurrent ? "#818cf8" : "#3730a3",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: "⬢"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            style: {
+              color: isCurrent ? "#a5b4fc" : "#4b5563",
+              fontSize: "0.7rem",
+              fontWeight: isCurrent ? 500 : undefined
+            },
+            children: d
+          }, undefined, false, undefined, this)
+        ]
+      }, d, true, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+function DomainChip({
+  domain,
+  allDomains,
+  size
+}) {
+  const ctx = useContext(DomainTooltipCtx);
+  const chipRef = useRef(null);
+  const hasHierarchy = allDomains != null && allDomains.length > 1;
+  const fontSize = size === "md" ? "0.7rem" : "0.6rem";
+  const padding = size === "md" ? "1px 5px" : "1px 4px";
+  return /* @__PURE__ */ jsxDEV("span", {
+    ref: chipRef,
+    onMouseEnter: hasHierarchy && ctx != null ? () => {
+      if (chipRef.current != null)
+        ctx.show(chipRef.current.getBoundingClientRect(), allDomains);
+    } : undefined,
+    onMouseLeave: hasHierarchy && ctx != null ? () => ctx.hide() : undefined,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.4em",
+      color: "#818cf8",
+      fontSize,
+      background: "#0f172a",
+      border: "1px solid #312e81",
+      padding,
+      borderRadius: "0.6rem",
+      flexShrink: 0,
+      whiteSpace: "nowrap"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV("span", {
+        style: {
+          fontSize: size === "md" ? "0.9rem" : "0.8rem",
+          height: "0.6em",
+          width: "0.6em",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: "⬢"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        children: domain
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/RunningTimer.tsx
+import { useEffect, useState } from "react";
+
+// src/devtools/browser/components/utils.ts
+var STATUS_COLOR = {
+  running: "#60a5fa",
+  success: "#4ade80",
+  failed: "#f87171",
+  aborted: "#9ca3af"
+};
+var STATUS_SYMBOL = {
+  running: "●",
+  success: "✓",
+  failed: "✗",
+  aborted: "○"
+};
+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
+  });
+}
+
+// src/devtools/browser/components/RunningTimer.tsx
+import { jsxDEV as jsxDEV2, Fragment } from "react/jsx-dev-runtime";
+function RunningTimer({ startTime }) {
+  const [elapsed, setElapsed] = useState(() => Date.now() - startTime);
+  useEffect(() => {
+    const interval = setInterval(() => setElapsed(Date.now() - startTime), 100);
+    return () => clearInterval(interval);
+  }, [startTime]);
+  return /* @__PURE__ */ jsxDEV2(Fragment, {
+    children: [
+      elapsed,
+      "ms"
+    ]
+  }, undefined, true, undefined, this);
+}
+function DurationDisplay({ entry }) {
+  const d = formatDuration(entry);
+  return /* @__PURE__ */ jsxDEV2(Fragment, {
+    children: d ?? /* @__PURE__ */ jsxDEV2(RunningTimer, {
+      startTime: entry.startTime
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/components/SectionLabel.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function SectionLabel({ label, color = "#60a5fa" }) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    style: {
+      color,
+      fontSize: "10px",
+      marginBottom: "3px",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em"
+    },
+    children: label
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/components/CallStackSection.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function CallStackLink({
+  entry,
+  entryRole,
+  isFocused,
+  onClick
+}) {
+  const color = STATUS_COLOR[entry.status];
+  const symbol = STATUS_SYMBOL[entry.status];
+  return /* @__PURE__ */ jsxDEV4("div", {
+    onClick,
+    style: {
+      background: isFocused ? "#1e2e45" : "#1e293b",
+      borderRadius: "4px",
+      borderLeft: isFocused ? "2px solid #a78bfa" : "2px solid transparent",
+      padding: isFocused ? "5px 8px 5px 6px" : "5px 8px",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      cursor: "pointer"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV4("span", {
+        style: {
+          color: entryRole === "caller" ? "#94a3b8" : "#a78bfa",
+          fontSize: "9px",
+          flexShrink: 0,
+          minWidth: "34px",
+          fontFamily: "inherit"
+        },
+        children: entryRole === "caller" ? "↑ from" : "↓ call"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("span", {
+        style: { color, fontSize: "10px", flexShrink: 0 },
+        children: symbol
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("span", {
+        style: {
+          color: "#cbd5e1",
+          fontSize: "11px",
+          flex: 1,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          gap: "0.5em",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV4("span", {
+            children: entry.actionId
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4(DomainChip, {
+            domain: entry.domain,
+            allDomains: entry.allDomains,
+            size: "sm"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("span", {
+        style: { color: "#475569", fontSize: "10px", flexShrink: 0 },
+        children: /* @__PURE__ */ jsxDEV4(DurationDisplay, {
+          entry
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function CallStackSection({
+  parent,
+  childEntries,
+  focusedChildCuid,
+  onFocusChild,
+  onSelectParent
+}) {
+  if (parent == null && childEntries.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxDEV4("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV4(SectionLabel, {
+        label: "Call Stack",
+        color: "#a78bfa"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        style: { display: "flex", flexDirection: "column", gap: "2px" },
+        children: [
+          parent != null && /* @__PURE__ */ jsxDEV4(CallStackLink, {
+            entry: parent,
+            entryRole: "caller",
+            isFocused: false,
+            onClick: () => onSelectParent(parent.cuid)
+          }, undefined, false, undefined, this),
+          childEntries.map((child) => /* @__PURE__ */ jsxDEV4(CallStackLink, {
+            entry: child,
+            entryRole: "called",
+            isFocused: focusedChildCuid === child.cuid,
+            onClick: () => onFocusChild(child.cuid)
+          }, child.cuid, false, undefined, this))
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, 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";
+var COMPACT_CHAR_LIMIT = 120;
+function DetailSection({
+  label,
+  value,
+  color = "#60a5fa"
+}) {
+  const [expanded, setExpanded] = useState2(false);
+  const fullJson = safeStringify(value, 2);
+  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", {
+    children: [
+      /* @__PURE__ */ jsxDEV7("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "3px"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV7("div", {
+            style: {
+              color,
+              fontSize: "10px",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            },
+            children: label
+          }, undefined, false, undefined, this),
+          canExpand && /* @__PURE__ */ jsxDEV7("span", {
+            style: { color: "#334155", fontSize: "11px" },
+            children: expanded ? "▾" : "▸"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      expanded ? /* @__PURE__ */ jsxDEV7("div", {
+        onClick: canExpand ? () => setExpanded(false) : undefined,
+        style: {
+          margin: 0,
+          padding: "6px 8px",
+          background: "#1e293b",
+          borderRadius: "4px",
+          fontSize: "11px",
+          color: "#cbd5e1",
+          overflowX: "auto",
+          textAlign: "left",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-all",
+          cursor: canExpand ? "pointer" : "default"
+        },
+        children: fullJson
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV7("div", {
+        onClick: canExpand ? () => setExpanded(true) : undefined,
+        style: {
+          padding: "5px 8px",
+          background: "#1e293b",
+          borderRadius: "4px",
+          fontSize: "11px",
+          color: "#94a3b8",
+          fontFamily: "inherit",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          cursor: canExpand ? "pointer" : "default"
+        },
+        children: compactDisplay
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/HandlerChips.tsx
+import { jsxDEV as jsxDEV8, Fragment as Fragment3 } 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 }) {
+  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 padding = size === "md" ? "1px 5px" : "1px 4px";
+  return /* @__PURE__ */ jsxDEV8(Fragment3, {
+    children: [
+      localEnvId != null && (alwaysShowLocal || externalLabel == null) && /* @__PURE__ */ jsxDEV8(Chip, {
+        color: "#34d399",
+        borderColor: "#14532d",
+        fontSize,
+        padding,
+        children: localEnvId
+      }, undefined, false, undefined, this),
+      externalLabel != null && /* @__PURE__ */ jsxDEV8(Chip, {
+        color: "#fbbf24",
+        borderColor: "#78350f",
+        fontSize,
+        padding,
+        children: externalLabel
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/MetaSection.tsx
+import { useState as useState3 } from "react";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+function MetaChip({ label, value }) {
+  return /* @__PURE__ */ jsxDEV9("span", {
+    style: { whiteSpace: "nowrap" },
+    children: [
+      /* @__PURE__ */ jsxDEV9("span", {
+        style: { color: "#475569" },
+        children: [
+          label,
+          " "
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV9("span", {
+        style: { color: "#cbd5e1" },
+        children: value
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function MetaSection({ entry }) {
+  const [expanded, setExpanded] = useState3(false);
+  const { meta, cuid } = entry;
+  const expandedRows = [
+    { label: "cuid", value: cuid },
+    { label: "origin", value: meta.originClient.envId },
+    ...meta.originClient.perId != null ? [{ label: "perId", value: meta.originClient.perId }] : [],
+    ...meta.originClient.insId != null ? [{ label: "insId", value: meta.originClient.insId }] : []
+  ];
+  return /* @__PURE__ */ jsxDEV9("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV9("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "3px"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV9("div", {
+            style: {
+              color: "#60a5fa",
+              fontSize: "10px",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            },
+            children: "Meta"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("span", {
+            style: { color: "#334155", fontSize: "11px" },
+            children: expanded ? "▾" : "▸"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      expanded ? /* @__PURE__ */ jsxDEV9("div", {
+        onClick: () => setExpanded(false),
+        style: { background: "#1e293b", borderRadius: "4px", overflow: "hidden", cursor: "pointer" },
+        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV9("div", {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "52px 1fr",
+            columnGap: "8px",
+            padding: "4px 8px",
+            borderBottom: i < expandedRows.length - 1 ? "1px solid #0f172a" : "none",
+            alignItems: "start"
+          },
+          children: [
+            /* @__PURE__ */ jsxDEV9("span", {
+              style: { textAlign: "left", color: "#475569", fontSize: "10px", paddingTop: "1px" },
+              children: label
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV9("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", {
+        onClick: () => setExpanded(true),
+        style: {
+          background: "#1e293b",
+          borderRadius: "4px",
+          padding: "5px 8px",
+          fontSize: "11px",
+          display: "flex",
+          gap: "10px",
+          rowGap: "2px",
+          flexWrap: "wrap",
+          cursor: "pointer"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV9(MetaChip, {
+            label: "cuid",
+            value: `…${cuid.slice(-8)}`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(MetaChip, {
+            label: "origin",
+            value: meta.originClient.envId
+          }, undefined, false, undefined, this),
+          meta.originClient.perId != null && /* @__PURE__ */ jsxDEV9(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, {
+            label: "insId",
+            value: meta.originClient.insId.length > 10 ? `${meta.originClient.insId.slice(0, 10)}…` : meta.originClient.insId
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/RoutingSection.tsx
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+function RoutingSection({
+  entry,
+  minHopCount = 0
+}) {
+  const { meta, startTime } = entry;
+  const hopCount = meta.routing.length;
+  const phantomCount = Math.max(0, minHopCount - hopCount);
+  if (hopCount === 0 && phantomCount === 0)
+    return null;
+  return /* @__PURE__ */ jsxDEV10("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV10(SectionLabel, {
+        label: hopCount > 0 ? `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}` : "Routing"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV10("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 ? "#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", {
+              style: {
+                background: "#1e293b",
+                borderRadius: "4px",
+                overflow: "hidden",
+                display: "grid",
+                gridTemplateColumns: "30% 1fr 30%",
+                alignItems: "center",
+                columnGap: "8px",
+                borderBottom: isLast ? undefined : "1px solid #0f172a",
+                padding: "4px 8px"
+              },
+              children: [
+                /* @__PURE__ */ jsxDEV10("span", {
+                  style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
+                  children: [
+                    /* @__PURE__ */ jsxDEV10("span", {
+                      style: { color: "#334155", fontSize: "10px", width: "16px", textAlign: "right" },
+                      children: i + 1
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV10("span", {
+                      title: runtimeTitle,
+                      style: {
+                        color: "#94a3b8",
+                        fontSize: "11px",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        textAlign: "center"
+                      },
+                      children: hop.runtime.envId
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV10("span", {
+                  style: { color: badgeColor, fontSize: "10px", whiteSpace: "nowrap" },
+                  children: badgeText
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV10("span", {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    paddingRight: "8px",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxDEV10("span", {
+                      style: {
+                        color: "#475569",
+                        fontSize: "10px",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis"
+                      },
+                      children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV10("span", {
+                      style: { color: "#334155", fontSize: "10px", flexShrink: 0, marginLeft: "auto" },
+                      children: [
+                        "+",
+                        hop.time - startTime,
+                        "ms"
+                      ]
+                    }, undefined, true, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, `${hop.time}-${hop.runtime.envId}`, true, undefined, this);
+          }),
+          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxDEV10("div", {
+            "aria-hidden": "true",
+            style: {
+              visibility: "hidden",
+              background: "#1e293b",
+              borderRadius: "4px",
+              display: "grid",
+              gridTemplateColumns: "30% 1fr 30%",
+              alignItems: "center",
+              columnGap: "8px",
+              padding: "4px 8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV10("span", {
+                style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
+                children: [
+                  /* @__PURE__ */ jsxDEV10("span", {
+                    style: { fontSize: "10px", width: "16px" },
+                    children: "0"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV10("span", {
+                    style: { fontSize: "11px" },
+                    children: "placeholder"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV10("span", {
+                style: { fontSize: "10px" },
+                children: "placeholder"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("span", {}, undefined, false, undefined, this)
+            ]
+          }, key, true, undefined, this))
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/StackTraceSection.tsx
+import { useState as useState4 } from "react";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+var INTERNAL_PATTERNS = [
+  "/nice-action/",
+  "@nice-code/action",
+  "node_modules/",
+  "native code",
+  "<anonymous>"
+];
+function isInternalFrame(file) {
+  return INTERNAL_PATTERNS.some((p) => file.includes(p));
+}
+function parseStackFrames(stack) {
+  return stack.split(`
+`).slice(1).map((line) => {
+    const raw = line.trim();
+    if (raw === "")
+      return null;
+    const matchFn = raw.match(/^at (.+?) \((.+):(\d+):(\d+)\)$/);
+    if (matchFn != null) {
+      const file = matchFn[2];
+      return { fn: matchFn[1], file, 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 { raw, isInternal: true };
+  }).filter((f) => f != null);
+}
+function formatFrameFile(file) {
+  if (file == null)
+    return "?";
+  let path = file;
+  try {
+    const url = new URL(file);
+    path = url.pathname.split("?")[0] ?? url.pathname;
+    if (path.startsWith("/@fs/"))
+      path = path.slice(4);
+  } catch {}
+  const parts = path.replace(/\\/g, "/").split("/").filter(Boolean);
+  const filtered = parts[0]?.match(/^[a-zA-Z]:$/) != null ? parts.slice(1) : parts;
+  const tail = filtered.slice(-4);
+  return tail.join("/") || file;
+}
+function StackTraceSection({
+  label,
+  stack,
+  color = "#60a5fa"
+}) {
+  const [showAll, setShowAll] = useState4(false);
+  if (stack == null)
+    return null;
+  const allFrames = 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", {
+    children: [
+      /* @__PURE__ */ jsxDEV11("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "3px"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV11(SectionLabel, {
+            label,
+            color
+          }, undefined, false, undefined, this),
+          hasInternalFrames && /* @__PURE__ */ jsxDEV11("span", {
+            style: { color: "#475569", fontSize: "9px" },
+            children: !showAll ? "user only" : `all (${allFrames.length})`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("div", {
+        onClick: () => setShowAll((s) => !s),
+        style: {
+          background: "#040a13",
+          borderRadius: "4px",
+          padding: "2px",
+          overflow: "hidden",
+          cursor: "pointer"
+        },
+        children: displayFrames.length === 0 ? /* @__PURE__ */ jsxDEV11("div", {
+          style: { padding: "6px 10px", color: "#64748b", fontSize: "10px", fontStyle: "italic" },
+          children: "no user frames captured"
+        }, undefined, false, undefined, this) : displayFrames.map((frame, idx) => {
+          const displayFile = formatFrameFile(frame.file);
+          const slashIdx = displayFile.lastIndexOf("/");
+          const folderPrefix = slashIdx >= 0 ? displayFile.slice(0, slashIdx + 1) : "";
+          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", {
+            title: titleStr,
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              gap: "0.5em",
+              padding: "4px",
+              borderBottom: idx < displayFrames.length - 1 ? "1px solid #0f172a" : undefined
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV11("span", {
+                style: {
+                  color: isUser ? "#64748b" : "#2d3f53",
+                  fontSize: "10px",
+                  minWidth: "10px",
+                  textAlign: "left",
+                  flexShrink: 0,
+                  fontVariantNumeric: "tabular-nums"
+                },
+                children: idx + 1
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("div", {
+                style: { display: "flex", flexDirection: "column", gap: "0.15em", lineHeight: 1.2 },
+                children: [
+                  /* @__PURE__ */ jsxDEV11("div", {
+                    style: { display: "flex", alignItems: "center" },
+                    children: /* @__PURE__ */ jsxDEV11("span", {
+                      style: {
+                        color: isUser ? "#e2e8f0" : "#50698b",
+                        fontSize: "12px",
+                        fontWeight: 500,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: frame.fn ?? "(anonymous)"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV11("div", {
+                    style: { display: "flex", alignItems: "baseline", overflow: "hidden" },
+                    children: [
+                      folderPrefix !== "" && /* @__PURE__ */ jsxDEV11("span", {
+                        style: {
+                          color: isUser ? "#596b83" : "#2d3f53",
+                          fontSize: "10px",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          flexShrink: 1,
+                          minWidth: 0
+                        },
+                        children: folderPrefix
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV11("span", {
+                        style: {
+                          color: isUser ? "#8a9ebb" : "#425979",
+                          fontSize: "10px",
+                          whiteSpace: "nowrap",
+                          flexShrink: 0
+                        },
+                        children: bareFilename
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, `${frame.fn ?? "anon"}@${frame.file ?? "unknown"}`, true, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/ActionDetailPanel.tsx
+import { jsxDEV as jsxDEV12, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+function DetailHeader({
+  entry,
+  isActive,
+  onClick,
+  childExternalLabels
+}) {
+  const color = STATUS_COLOR[entry.status];
+  const symbol = STATUS_SYMBOL[entry.status];
+  const timestamp = formatTimestamp(entry.startTime);
+  return /* @__PURE__ */ jsxDEV12("div", {
+    onClick: !isActive ? onClick : undefined,
+    style: {
+      padding: "10px 12px",
+      background: isActive ? "#1e293b" : "#131f35",
+      borderBottom: "1px solid #0f172a",
+      borderLeft: isActive ? "2px solid #60a5fa" : "2px solid transparent",
+      flexShrink: 0,
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "10px",
+      cursor: isActive ? "default" : "pointer"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV12("span", {
+        style: {
+          color,
+          fontSize: "15px",
+          flexShrink: 0,
+          paddingTop: "1px",
+          animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
+        },
+        children: symbol
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "5px" },
+        children: [
+          /* @__PURE__ */ jsxDEV12("div", {
+            style: { display: "flex", alignItems: "center", minWidth: 0, gap: "0.5em" },
+            children: [
+              /* @__PURE__ */ jsxDEV12("span", {
+                style: {
+                  color: "#f1f5f9",
+                  fontSize: "13px",
+                  fontWeight: "600",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  flexShrink: 1,
+                  minWidth: "24px"
+                },
+                children: entry.actionId
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(DomainChip, {
+                domain: entry.domain,
+                allDomains: entry.allDomains,
+                size: "md"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV12("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV12("div", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                  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", {
+                style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 },
+                children: [
+                  /* @__PURE__ */ jsxDEV12("span", {
+                    style: { color: "#334155", fontSize: "10px", letterSpacing: "0.02em" },
+                    children: timestamp
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV12("span", {
+                    style: { color, fontSize: "12px", fontWeight: "500" },
+                    children: /* @__PURE__ */ jsxDEV12(DurationDisplay, {
+                      entry
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ActionDetailPanel({
+  entry,
+  parent,
+  childEntries,
+  onSelectEntry
+}) {
+  const [focusedChildCuid, setFocusedChildCuid] = useState5(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 childExternalLabels = useMemo(() => {
+    const seen = new Set;
+    const result = [];
+    for (const child of childEntries) {
+      const firstHop = child.meta.routing[0];
+      if (firstHop == null)
+        continue;
+      const label = getExternalLabel(firstHop);
+      if (label == null || seen.has(label))
+        continue;
+      seen.add(label);
+      result.push(label);
+    }
+    return result;
+  }, [childEntries]);
+  const handleFocusChild = (cuid) => {
+    setFocusedChildCuid((prev) => prev === cuid ? null : cuid);
+  };
+  return /* @__PURE__ */ jsxDEV12("div", {
+    style: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      minHeight: 0,
+      background: "#0f172a"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV12(DetailHeader, {
+        entry,
+        isActive: focusedChildCuid === null,
+        onClick: () => setFocusedChildCuid(null),
+        childExternalLabels
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV12("div", {
+        style: {
+          flex: 1,
+          overflowY: "auto",
+          minHeight: 0,
+          padding: "10px 12px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV12(CallStackSection, {
+            parent,
+            childEntries,
+            focusedChildCuid,
+            onFocusChild: handleFocusChild,
+            onSelectParent: onSelectEntry
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12(MetaSection, {
+            entry: focusedEntry
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12(RoutingSection, {
+            entry: focusedEntry,
+            minHopCount: maxRoutingHops
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12(StackTraceSection, {
+            label: "Dispatch Site",
+            stack: focusedEntry.callSite,
+            color: "#94a3b8"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12(DetailSection, {
+            label: "Input",
+            value: focusedEntry.input
+          }, undefined, false, undefined, this),
+          focusedEntry.status === "success" && /* @__PURE__ */ jsxDEV12(DetailSection, {
+            label: "Output",
+            value: focusedEntry.output,
+            color: "#4ade80"
+          }, undefined, false, undefined, this),
+          focusedEntry.status === "failed" && /* @__PURE__ */ jsxDEV12(Fragment4, {
+            children: [
+              /* @__PURE__ */ jsxDEV12(DetailSection, {
+                label: "Error",
+                value: focusedEntry.error,
+                color: "#f87171"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(StackTraceSection, {
+                label: "Error Stack",
+                stack: focusedEntry.errorStack,
+                color: "#f87171"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          focusedEntry.status === "aborted" && /* @__PURE__ */ jsxDEV12(Fragment4, {
+            children: [
+              focusedEntry.abortReason != null && /* @__PURE__ */ jsxDEV12(DetailSection, {
+                label: "Abort Reason",
+                value: focusedEntry.abortReason,
+                color: "#9ca3af"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV12(StackTraceSection, {
+                label: "Abort Stack",
+                stack: focusedEntry.errorStack,
+                color: "#9ca3af"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV12(DetailSection, {
+            label: `Progress (${focusedEntry.progressUpdates.length})`,
+            value: focusedEntry.progressUpdates
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/ActionEntryRow.tsx
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+function ActionEntryRow({
+  entry,
+  isSelected,
+  onClick,
+  groupCount,
+  isSubEntry = false,
+  isLatest = false,
+  latestTime,
+  childExternalLabels
+}) {
+  const color = STATUS_COLOR[entry.status];
+  const symbol = STATUS_SYMBOL[entry.status];
+  const timestamp = formatTimestamp(entry.startTime);
+  if (isSubEntry) {
+    return /* @__PURE__ */ jsxDEV13("div", {
+      "data-cuid": entry.cuid,
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "1em",
+        padding: "4px 10px 4px 26px",
+        cursor: "pointer",
+        background: isSelected ? "#131f35" : "#070d18",
+        borderBottom: "1px solid #0f172a",
+        borderLeft: isSelected ? "2px solid #3b82f6" : "2px solid transparent"
+      },
+      children: [
+        /* @__PURE__ */ jsxDEV13("span", {
+          style: { color: "#334155", fontSize: "10px", flexShrink: 0 },
+          children: symbol
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV13("span", {
+          children: [
+            /* @__PURE__ */ jsxDEV13("span", {
+              style: { color: isSelected ? "#818cf8" : "#3730a3", opacity: 0.5, fontSize: "10px" },
+              children: "⚡"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV13("span", {
+              style: {
+                flex: 1,
+                color: "#475569",
+                fontSize: "11px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                minWidth: 0
+              },
+              children: entry.actionId
+            }, 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, {
+            entry
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV13("div", {
+    "data-cuid": entry.cuid,
+    onClick,
+    style: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "8px",
+      padding: isSelected ? "6px 12px 6px 10px" : "6px 12px",
+      cursor: "pointer",
+      background: isSelected ? "#131f35" : "transparent",
+      borderBottom: "1px solid #0f172a",
+      borderLeft: isSelected ? "2px solid #60a5fa" : "2px solid transparent"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV13("span", {
+        style: {
+          flexShrink: 0,
+          minWidth: "3.5em",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "start"
+        },
+        children: isLatest ? /* @__PURE__ */ jsxDEV13(Chip, {
+          color: "#60a5fa",
+          borderColor: "#1e3a5f",
+          children: "latest"
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV13(Chip, {
+          color: "#475569",
+          borderColor: "#1e293b",
+          children: [
+            "+",
+            latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV13("span", {
+        style: {
+          color,
+          fontSize: "10px",
+          flexShrink: 0,
+          paddingTop: "2px",
+          animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
+        },
+        children: symbol
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV13("div", {
+        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "3px" },
+        children: [
+          /* @__PURE__ */ jsxDEV13("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              minWidth: 0,
+              overflow: "hidden",
+              gap: "0.5em"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV13("span", {
+                style: {
+                  color: "#cbd5e1",
+                  fontSize: "11px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  flexShrink: 1,
+                  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),
+          /* @__PURE__ */ jsxDEV13("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "6px"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV13("div", {
+                style: {
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: "5px",
+                  minWidth: 0,
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsxDEV13(HandlerChips, {
+                    entry,
+                    size: "sm"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV13(ChildDispatchChips, {
+                    labels: childExternalLabels,
+                    size: "sm"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV13("div", {
+                style: { display: "flex", alignItems: "center", gap: "6px", flexShrink: 0 },
+                children: [
+                  groupCount != null && /* @__PURE__ */ jsxDEV13(Chip, {
+                    color: "#3b82f6",
+                    borderColor: "#1e3a5f",
+                    fontSize: "9px",
+                    padding: "1px 5px",
+                    children: [
+                      "×",
+                      groupCount
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV13("span", {
+                    style: { color: "#1e3a5f", fontSize: "10px", letterSpacing: "0.02em" },
+                    children: timestamp
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV13("span", {
+                    style: { color: "#475569", fontSize: "11px" },
+                    children: /* @__PURE__ */ jsxDEV13(DurationDisplay, {
+                      entry
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/devtools/browser/components/PanelChrome.tsx
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+var DOCKED_SIZE_MIN = 140;
+var POSITION_GRID = [
+  ["top-left", "dock-top", "top-right"],
+  ["dock-left", null, "dock-right"],
+  ["bottom-left", "dock-bottom", "bottom-right"]
+];
+function getDockSide(pos) {
+  if (pos === "dock-top")
+    return "top";
+  if (pos === "dock-bottom")
+    return "bottom";
+  if (pos === "dock-left")
+    return "left";
+  if (pos === "dock-right")
+    return "right";
+  return null;
+}
+function PanelHeader({
+  position,
+  onPositionChange,
+  onClose,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxDEV14("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "8px 12px",
+      background: "#1e293b",
+      borderBottom: "1px solid #0f172a",
+      flexShrink: 0
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV14("span", {
+        style: { color: "#60a5fa", fontWeight: "bold", fontSize: "11px" },
+        children: "⚡ nice-action devtools"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV14("div", {
+        style: { display: "flex", gap: "10px", alignItems: "center" },
+        children: [
+          /* @__PURE__ */ jsxDEV14(PositionPicker, {
+            position,
+            onChange: onPositionChange
+          }, undefined, false, undefined, this),
+          onClear != null && /* @__PURE__ */ jsxDEV14("button", {
+            onClick: onClear,
+            style: {
+              background: "none",
+              border: "none",
+              color: "#475569",
+              cursor: "pointer",
+              fontSize: "11px",
+              padding: "0"
+            },
+            children: "clear"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV14("button", {
+            onClick: onClose,
+            style: {
+              background: "none",
+              border: "none",
+              color: "#475569",
+              cursor: "pointer",
+              fontSize: "16px",
+              padding: "0",
+              lineHeight: "1"
+            },
+            children: "×"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function PositionPicker({
+  position,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxDEV14("div", {
+    title: "Move / dock panel",
+    style: { display: "grid", gridTemplateColumns: "repeat(3, 9px)", gap: "2px", padding: "2px" },
+    children: POSITION_GRID.flat().map((pos) => {
+      if (pos == null)
+        return /* @__PURE__ */ jsxDEV14("div", {
+          style: { width: "9px", height: "9px" }
+        }, "center-empty", false, undefined, this);
+      const isDock = pos.startsWith("dock-");
+      const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
+      const isActive = pos === position;
+      return /* @__PURE__ */ jsxDEV14("div", {
+        title: pos,
+        onClick: () => onChange(pos),
+        style: {
+          width: "9px",
+          height: "9px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer"
+        },
+        children: /* @__PURE__ */ jsxDEV14("div", {
+          style: {
+            width: isDock ? isTopBottom ? "9px" : "3px" : "7px",
+            height: isDock ? isTopBottom ? "3px" : "9px" : "7px",
+            borderRadius: isDock ? "1px" : "50%",
+            background: isActive ? "#60a5fa" : "#334155"
+          }
+        }, undefined, false, undefined, this)
+      }, pos, false, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+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__ */ jsxDEV14("div", {
+    onMouseDown,
+    style: {
+      position: "absolute",
+      zIndex: 10,
+      background: "transparent",
+      ...edgeStyle
+    }
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/NiceActionDevtools.tsx
+import { jsxDEV as jsxDEV15, Fragment as Fragment5 } from "react/jsx-dev-runtime";
+if (typeof document !== "undefined" && !document.getElementById("__nice-action-devtools-styles")) {
+  const style = document.createElement("style");
+  style.id = "__nice-action-devtools-styles";
+  style.textContent = `
+    @keyframes __nice-action-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.35; }
+    }
+  `;
+  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,
+    isOpen: initialOpen,
+    dockedHeight: DOCKED_HEIGHT_DEFAULT,
+    dockedWidth: DOCKED_WIDTH_DEFAULT
+  };
+  try {
+    if (typeof localStorage === "undefined")
+      return fallback;
+    const stored = localStorage.getItem(PREFS_KEY);
+    return stored != null ? { ...fallback, ...JSON.parse(stored) } : fallback;
+  } catch (_e) {
+    return fallback;
+  }
+}
+function writePrefs(prefs) {
+  try {
+    localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
+  } catch (_e) {
+    return;
+  }
+}
+function getHandlerKey(entry) {
+  const hop = entry.meta.routing[0];
+  if (hop == null)
+    return "none";
+  if (hop.handlerType === "local")
+    return "local";
+  return `ext:${hop.transport ?? "ext"}`;
+}
+function canGroupWith(a, b) {
+  if (a.status === "running" || b.status === "running")
+    return false;
+  const handlerA = getHandlerKey(a);
+  const handlerB = getHandlerKey(b);
+  const handlerConflict = handlerA !== "none" && handlerB !== "none" && handlerA !== handlerB;
+  return a.actionId === b.actionId && a.domain === b.domain && a.status === b.status && !handlerConflict && safeStringify(a.input, 0) === safeStringify(b.input, 0);
+}
+function groupEntries(entries) {
+  const groups = [];
+  for (const entry of entries) {
+    const last = groups[groups.length - 1];
+    if (last != null && canGroupWith(entry, last.representative)) {
+      last.rest.push(entry);
+    } else {
+      groups.push({ representative: entry, rest: [] });
+    }
+  }
+  return groups;
+}
+function NiceActionDevtools(props) {
+  if (false) {}
+  return /* @__PURE__ */ jsxDEV15(NiceActionDevtools_Panel, {
+    ...props
+  }, undefined, false, undefined, this);
+}
+function NiceActionDevtools_Panel({
+  core,
+  position: defaultPosition = "bottom-right",
+  initialOpen = false
+}) {
+  const [prefs, setPrefsRaw] = useState6(() => readPrefs(defaultPosition, initialOpen));
+  const [entries, setEntries] = useState6([]);
+  const [selectedCuid, setSelectedCuid] = useState6(null);
+  const [expandedGroupCuids, setExpandedGroupCuids] = useState6(new Set);
+  const [domainTooltip, setDomainTooltip] = useState6(null);
+  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]);
+  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));
+    return groupEntries(roots);
+  }, [entries]);
+  const childExternalLabelsMap = useMemo2(() => {
+    const map = new Map;
+    for (const entry of entries) {
+      if (entry.parentCuid == null)
+        continue;
+      const firstHop = entry.meta.routing[0];
+      if (firstHop == null)
+        continue;
+      const label = getExternalLabel(firstHop);
+      if (label == null)
+        continue;
+      const existing = map.get(entry.parentCuid) ?? [];
+      if (!existing.includes(label))
+        map.set(entry.parentCuid, [...existing, label]);
+    }
+    return map;
+  }, [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 {
+      setSelectedCuid(repCuid);
+      setExpandedGroupCuids(new Set([repCuid]));
+    }
+  };
+  const setPrefs = (update) => {
+    setPrefsRaw((prev) => {
+      const next = { ...prev, ...update };
+      writePrefs(next);
+      return next;
+    });
+  };
+  const { position, isOpen, dockedHeight, dockedWidth } = prefs;
+  const dockSide = getDockSide(position);
+  const isHorizDock = dockSide === "top" || dockSide === "bottom";
+  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(() => {
+    const sides = ["top", "bottom", "left", "right"];
+    const clearAll = () => {
+      sides.forEach((s) => {
+        document.body.style.removeProperty(`margin-${s}`);
+      });
+    };
+    if (!isOpen || dockSide == null) {
+      clearAll();
+      return clearAll;
+    }
+    clearAll();
+    document.body.style.setProperty(`margin-${dockSide}`, `${dockedSize}px`);
+    return clearAll;
+  }, [dockSide, isOpen, dockedSize]);
+  const closedAnchor = (() => {
+    switch (position) {
+      case "dock-bottom":
+        return { bottom: "16px", right: "16px" };
+      case "dock-top":
+        return { top: "16px", right: "16px" };
+      case "dock-left":
+        return { top: "16px", left: "16px" };
+      case "dock-right":
+        return { top: "16px", right: "16px" };
+      default:
+        return {
+          ...position.includes("right") ? { right: "16px" } : { left: "16px" },
+          ...position.includes("bottom") ? { bottom: "16px" } : { top: "16px" }
+        };
+    }
+  })();
+  const baseStyle = {
+    position: "fixed",
+    zIndex: 2147483647,
+    fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+    fontSize: "12px"
+  };
+  if (!isOpen) {
+    return /* @__PURE__ */ jsxDEV15("button", {
+      onClick: () => setPrefs({ isOpen: true }),
+      style: {
+        ...baseStyle,
+        ...closedAnchor,
+        background: "#1e293b",
+        color: "#94a3b8",
+        border: "1px solid #334155",
+        borderRadius: "6px",
+        padding: "5px 10px",
+        cursor: "pointer",
+        lineHeight: "1.5"
+      },
+      children: [
+        "⚡ actions",
+        runningCount > 0 && /* @__PURE__ */ jsxDEV15("span", {
+          style: {
+            marginLeft: "6px",
+            color: "#60a5fa",
+            animation: "__nice-action-pulse 1.2s ease-in-out infinite"
+          },
+          children: [
+            runningCount,
+            " running"
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const panelStyle = dockSide != null ? {
+    ...baseStyle,
+    background: "#0f172a",
+    border: "1px solid #1e293b",
+    color: "#e2e8f0",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 -4px 24px rgba(0,0,0,0.4)",
+    overflow: "hidden",
+    ...dockSide === "bottom" ? {
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: `${dockedSize}px`,
+      borderRadius: "8px 8px 0 0"
+    } : dockSide === "top" ? {
+      top: 0,
+      left: 0,
+      right: 0,
+      height: `${dockedSize}px`,
+      borderRadius: "0 0 8px 8px"
+    } : dockSide === "left" ? {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      width: `${dockedSize}px`,
+      borderRadius: "0 8px 8px 0"
+    } : {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: `${dockedSize}px`,
+      borderRadius: "8px 0 0 8px"
+    }
+  } : {
+    ...baseStyle,
+    ...closedAnchor,
+    width: "460px",
+    maxHeight: "560px",
+    background: "#0f172a",
+    border: "1px solid #1e293b",
+    borderRadius: "10px",
+    color: "#e2e8f0",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 25px 50px rgba(0,0,0,0.5)",
+    overflow: "hidden"
+  };
+  const selectedEntryParent = selectedEntry?.parentCuid != null ? entries.find((e) => e.cuid === selectedEntry.parentCuid) ?? null : null;
+  const selectedEntryChildren = selectedEntry != null ? [...entries].filter((e) => e.parentCuid === selectedEntry.cuid).sort((a, b) => a.startTime - b.startTime) : [];
+  const virtualListProps = {
+    groups,
+    selectedCuid,
+    expandedGroupCuids,
+    onGroupClick: handleGroupRowClick,
+    onSubClick: (cuid, isSelected) => setSelectedCuid(isSelected ? null : cuid),
+    childExternalLabelsMap
+  };
+  return /* @__PURE__ */ jsxDEV15(DomainTooltipCtx.Provider, {
+    value: domainTooltipCtx,
+    children: /* @__PURE__ */ jsxDEV15("div", {
+      style: panelStyle,
+      children: [
+        domainTooltip != null && /* @__PURE__ */ jsxDEV15(DomainHierarchyTooltip, {
+          anchor: domainTooltip.rect,
+          allDomains: domainTooltip.allDomains
+        }, undefined, false, undefined, this),
+        dockSide != null && /* @__PURE__ */ jsxDEV15(ResizeHandle, {
+          dockSide,
+          dockedSize,
+          onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV15(PanelHeader, {
+          position,
+          onPositionChange: (p) => setPrefs({ position: p }),
+          onClose: () => setPrefs({ isOpen: false }),
+          onClear: entries.length > 0 ? () => {
+            core.clear();
+            setSelectedCuid(null);
+            setExpandedGroupCuids(new Set);
+          } : undefined
+        }, undefined, false, undefined, this),
+        isHorizDock ? /* @__PURE__ */ jsxDEV15("div", {
+          style: { flex: 1, display: "flex", overflow: "hidden" },
+          children: [
+            /* @__PURE__ */ jsxDEV15(VirtualActionList, {
+              ...virtualListProps,
+              style: {
+                width: "340px",
+                flexShrink: 0,
+                overflowY: "auto",
+                borderRight: "1px solid #1e293b"
+              }
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV15("div", {
+              style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" },
+              children: selectedEntry != null ? /* @__PURE__ */ jsxDEV15(ActionDetailPanel, {
+                entry: selectedEntry,
+                parent: selectedEntryParent,
+                childEntries: selectedEntryChildren,
+                onSelectEntry: (cuid) => setSelectedCuid(cuid)
+              }, selectedEntry.cuid, false, undefined, this) : /* @__PURE__ */ jsxDEV15("div", {
+                style: {
+                  padding: "24px",
+                  textAlign: "center",
+                  color: "#475569",
+                  fontSize: "11px"
+                },
+                children: "Select an action to inspect"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV15(Fragment5, {
+          children: [
+            /* @__PURE__ */ jsxDEV15(VirtualActionList, {
+              ...virtualListProps,
+              style: {
+                overflowY: "auto",
+                flex: 1,
+                minHeight: "80px",
+                borderBottom: selectedEntry != null ? "1px solid #1e293b" : "none"
+              }
+            }, undefined, false, undefined, this),
+            selectedEntry != null && /* @__PURE__ */ jsxDEV15("div", {
+              style: {
+                flexShrink: 0,
+                maxHeight: "45%",
+                display: "flex",
+                flexDirection: "column",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsxDEV15(ActionDetailPanel, {
+                entry: selectedEntry,
+                parent: selectedEntryParent,
+                childEntries: selectedEntryChildren,
+                onSelectEntry: (cuid) => setSelectedCuid(cuid)
+              }, selectedEntry.cuid, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function VirtualActionList({
+  groups,
+  selectedCuid,
+  expandedGroupCuids,
+  onGroupClick,
+  onSubClick,
+  childExternalLabelsMap,
+  style
+}) {
+  const outerRef = 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);
+      result.push({ type: "group", group, groupIndex: gi });
+      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(() => {
+    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]);
+  if (groups.length === 0) {
+    return /* @__PURE__ */ jsxDEV15("div", {
+      style,
+      children: /* @__PURE__ */ jsxDEV15("div", {
+        style: { padding: "24px", textAlign: "center", color: "#475569" },
+        children: "No actions recorded yet"
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const virtualItems = virtualizer.getVirtualItems();
+  return /* @__PURE__ */ jsxDEV15("div", {
+    ref: outerRef,
+    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, {
+            entry: item.group.representative,
+            isSelected: selectedCuid === item.group.representative.cuid,
+            groupCount: item.group.rest.length > 0 ? item.group.rest.length + 1 : undefined,
+            isLatest: item.groupIndex === 0,
+            latestTime,
+            childExternalLabels: childExternalLabelsMap.get(item.group.representative.cuid),
+            onClick: () => onGroupClick(item.group)
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15(ActionEntryRow, {
+            entry: item.entry,
+            isSelected: selectedCuid === item.entry.cuid,
+            isSubEntry: true,
+            isLatest: false,
+            latestTime,
+            onClick: () => onSubClick(item.entry.cuid, selectedCuid === item.entry.cuid)
+          }, undefined, false, undefined, this)
+        }, vi.key, false, undefined, this);
+      })
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  NiceActionDevtools,
+  ActionDevtoolsCore
+};