@nice-code/action 0.2.11 → 0.2.12

package/build/devtools/browser/index.js

@@ -0,0 +1,1275 @@
+// 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;
+  _maxEntries;
+  constructor(options = {}) {
+    this._maxEntries = options.maxEntries ?? 100;
+  }
+  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)
+        };
+        this._entries = [entry, ...this._entries].slice(0, this._maxEntries);
+        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 */) {
+            return { ...base, status: "failed", error: update.error };
+          }
+          return { ...base, status: "aborted", abortReason: update.reason };
+        });
+      }
+    });
+  }
+  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 { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsxDEV, Fragment as Fragment2 } 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 STATUS_COLOR = {
+  running: "#60a5fa",
+  success: "#4ade80",
+  failed: "#f87171",
+  aborted: "#9ca3af"
+};
+var STATUS_SYMBOL = {
+  running: "●",
+  success: "✓",
+  failed: "✗",
+  aborted: "○"
+};
+var PREFS_KEY = "__nice-action-devtools-prefs";
+var DOCKED_HEIGHT_DEFAULT = 320;
+var DOCKED_WIDTH_DEFAULT = 420;
+var DOCKED_SIZE_MIN = 140;
+var ROW_HEIGHT = 50;
+var SUB_ROW_HEIGHT = 30;
+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 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__ */ jsxDEV(NiceActionDevtools_Panel, {
+    ...props
+  }, undefined, false, undefined, this);
+}
+function NiceActionDevtools_Panel({
+  core,
+  position: defaultPosition = "bottom-right",
+  initialOpen = false
+}) {
+  const [prefs, setPrefsRaw] = useState(() => readPrefs(defaultPosition, initialOpen));
+  const [entries, setEntries] = useState([]);
+  const [selectedCuid, setSelectedCuid] = useState(null);
+  const [expandedGroupCuids, setExpandedGroupCuids] = useState(new Set);
+  useEffect(() => core.subscribe(setEntries), [core]);
+  const groups = useMemo(() => groupEntries(entries), [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;
+  useEffect(() => {
+    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__ */ jsxDEV("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__ */ jsxDEV("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 virtualListProps = {
+    groups,
+    selectedCuid,
+    expandedGroupCuids,
+    onGroupClick: handleGroupRowClick,
+    onSubClick: (cuid, isSelected) => setSelectedCuid(isSelected ? null : cuid)
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: panelStyle,
+    children: [
+      dockSide != null && /* @__PURE__ */ jsxDEV(ResizeHandle, {
+        dockSide,
+        dockedSize,
+        onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(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__ */ jsxDEV("div", {
+        style: { flex: 1, display: "flex", overflow: "hidden" },
+        children: [
+          /* @__PURE__ */ jsxDEV(VirtualActionList, {
+            ...virtualListProps,
+            style: { width: "340px", flexShrink: 0, overflowY: "auto", borderRight: "1px solid #1e293b" }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            style: { flex: 1, overflowY: "auto" },
+            children: selectedEntry != null ? /* @__PURE__ */ jsxDEV(ActionDetailPanel, {
+              entry: selectedEntry
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(Fragment2, {
+        children: [
+          /* @__PURE__ */ jsxDEV(VirtualActionList, {
+            ...virtualListProps,
+            style: {
+              overflowY: "auto",
+              flex: 1,
+              minHeight: "80px",
+              borderBottom: selectedEntry != null ? "1px solid #1e293b" : "none"
+            }
+          }, undefined, false, undefined, this),
+          selectedEntry != null && /* @__PURE__ */ jsxDEV("div", {
+            style: { flexShrink: 0, maxHeight: "45%", overflow: "hidden" },
+            children: /* @__PURE__ */ jsxDEV(ActionDetailPanel, {
+              entry: selectedEntry
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function VirtualActionList({
+  groups,
+  selectedCuid,
+  expandedGroupCuids,
+  onGroupClick,
+  onSubClick,
+  style
+}) {
+  const outerRef = useRef(null);
+  const latestTime = groups[0]?.representative.startTime;
+  const flatItems = useMemo(() => {
+    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 = useRef(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 = useRef(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 = useRef(selectedCuid);
+  useEffect(() => {
+    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__ */ jsxDEV("div", {
+      style,
+      children: /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
+    ref: outerRef,
+    style,
+    children: /* @__PURE__ */ jsxDEV("div", {
+      style: { height: `${virtualizer.getTotalSize()}px`, position: "relative" },
+      children: virtualItems.map((vi) => {
+        const item = flatItems[vi.index];
+        if (item == null)
+          return null;
+        return /* @__PURE__ */ jsxDEV("div", {
+          "data-index": vi.index,
+          ref: virtualizer.measureElement,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            transform: `translateY(${vi.start}px)`
+          },
+          children: item.type === "group" ? /* @__PURE__ */ jsxDEV(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,
+            onClick: () => onGroupClick(item.group)
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(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);
+}
+function PanelHeader({
+  position,
+  onPositionChange,
+  onClose,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "8px 12px",
+      background: "#1e293b",
+      borderBottom: "1px solid #0f172a",
+      flexShrink: 0
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV("span", {
+        style: { color: "#60a5fa", fontWeight: "bold", fontSize: "11px" },
+        children: "⚡ nice-action devtools"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        style: { display: "flex", gap: "10px", alignItems: "center" },
+        children: [
+          /* @__PURE__ */ jsxDEV(PositionPicker, {
+            position,
+            onChange: onPositionChange
+          }, undefined, false, undefined, this),
+          onClear != null && /* @__PURE__ */ jsxDEV("button", {
+            onClick: onClear,
+            style: {
+              background: "none",
+              border: "none",
+              color: "#475569",
+              cursor: "pointer",
+              fontSize: "11px",
+              padding: "0"
+            },
+            children: "clear"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("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);
+}
+var POSITION_GRID = [
+  ["top-left", "dock-top", "top-right"],
+  ["dock-left", null, "dock-right"],
+  ["bottom-left", "dock-bottom", "bottom-right"]
+];
+function PositionPicker({
+  position,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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__ */ jsxDEV("div", {
+        title: pos,
+        onClick: () => onChange(pos),
+        style: { width: "9px", height: "9px", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" },
+        children: /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
+    onMouseDown,
+    style: {
+      position: "absolute",
+      zIndex: 10,
+      background: "transparent",
+      ...edgeStyle
+    }
+  }, undefined, false, undefined, this);
+}
+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 ActionEntryRow({
+  entry,
+  isSelected,
+  onClick,
+  groupCount,
+  isSubEntry = false,
+  isLatest = false,
+  latestTime
+}) {
+  const color = STATUS_COLOR[entry.status];
+  const symbol = STATUS_SYMBOL[entry.status];
+  const parentDomains = entry.allDomains.slice(0, -1);
+  const breadcrumb = parentDomains.length > 0 ? `[${parentDomains.join(".")}]` : "";
+  const duration = entry.endTime != null ? `${entry.endTime - entry.startTime}ms` : null;
+  const timestamp = new Date(entry.startTime).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  });
+  const firstHop = entry.meta.routing[0];
+  const handlerLabel = firstHop == null ? null : firstHop.handlerType === "local" ? "local" : `→ ${firstHop.transport ?? "ext"}`;
+  const handlerColor = handlerLabel === "local" ? "#34d399" : "#fbbf24";
+  const handlerBorder = handlerLabel === "local" ? "#14532d" : "#78350f";
+  if (isSubEntry) {
+    return /* @__PURE__ */ jsxDEV("div", {
+      "data-cuid": entry.cuid,
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "4px 10px 4px 26px",
+        cursor: "pointer",
+        background: isSelected ? "#131f35" : "#070d18",
+        borderBottom: "1px solid #0f172a",
+        borderLeft: isSelected ? "2px solid #3b82f6" : "2px solid transparent",
+        userSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxDEV("span", {
+          style: { color: "#334155", fontSize: "10px", flexShrink: 0 },
+          children: symbol
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV("span", {
+          style: {
+            flex: 1,
+            color: "#475569",
+            fontSize: "11px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            minWidth: 0
+          },
+          children: [
+            entry.actionId,
+            /* @__PURE__ */ jsxDEV("span", {
+              style: { color: "#334155", marginLeft: "4px" },
+              children: [
+                "(",
+                entry.domain,
+                ")"
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV("span", {
+          style: { color: "#334155", fontSize: "11px", flexShrink: 0 },
+          children: duration ?? /* @__PURE__ */ jsxDEV(RunningTimer, {
+            startTime: entry.startTime
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("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",
+      userSelect: "none"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV("span", {
+        style: { flexShrink: 0, paddingTop: "2px" },
+        children: isLatest ? /* @__PURE__ */ jsxDEV("span", {
+          style: {
+            color: "#60a5fa",
+            fontSize: "8px",
+            background: "#0f172a",
+            border: "1px solid #1e3a5f",
+            padding: "1px 4px",
+            borderRadius: "3px"
+          },
+          children: "latest"
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("span", {
+          style: {
+            color: "#475569",
+            fontSize: "8px",
+            background: "#0f172a",
+            border: "1px solid #1e293b",
+            padding: "1px 4px",
+            borderRadius: "3px",
+            whiteSpace: "nowrap"
+          },
+          children: [
+            "+",
+            latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
+        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "3px" },
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            style: { display: "flex", alignItems: "baseline", minWidth: 0, overflow: "hidden" },
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                style: {
+                  color: "#cbd5e1",
+                  fontSize: "11px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  flexShrink: 1,
+                  minWidth: "24px"
+                },
+                children: entry.actionId
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("span", {
+                style: {
+                  color: "#7592b6",
+                  fontSize: "11px",
+                  marginLeft: "4px",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  flexShrink: 2,
+                  minWidth: "24px"
+                },
+                children: [
+                  "(",
+                  entry.domain,
+                  ")"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "6px" },
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                style: { display: "flex", alignItems: "center", gap: "5px", minWidth: 0, overflow: "hidden" },
+                children: [
+                  handlerLabel != null && /* @__PURE__ */ jsxDEV("span", {
+                    style: {
+                      color: handlerColor,
+                      fontSize: "8px",
+                      background: "#0f172a",
+                      border: `1px solid ${handlerBorder}`,
+                      padding: "1px 4px",
+                      borderRadius: "3px",
+                      flexShrink: 0,
+                      whiteSpace: "nowrap"
+                    },
+                    children: handlerLabel
+                  }, undefined, false, undefined, this),
+                  breadcrumb !== "" && /* @__PURE__ */ jsxDEV("span", {
+                    style: {
+                      color: "#475569",
+                      fontSize: "9px",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      minWidth: 0
+                    },
+                    children: breadcrumb
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                style: { display: "flex", alignItems: "center", gap: "6px", flexShrink: 0 },
+                children: [
+                  groupCount != null && /* @__PURE__ */ jsxDEV("span", {
+                    style: {
+                      color: "#3b82f6",
+                      fontSize: "9px",
+                      background: "#0f172a",
+                      border: "1px solid #1e3a5f",
+                      padding: "1px 5px",
+                      borderRadius: "3px"
+                    },
+                    children: [
+                      "×",
+                      groupCount
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("span", {
+                    style: { color: "#1e3a5f", fontSize: "10px", letterSpacing: "0.02em" },
+                    children: timestamp
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("span", {
+                    style: { color: "#475569", fontSize: "11px" },
+                    children: duration ?? /* @__PURE__ */ jsxDEV(RunningTimer, {
+                      startTime: entry.startTime
+                    }, 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 RunningTimer({ startTime }) {
+  const [elapsed, setElapsed] = useState(() => Date.now() - startTime);
+  useEffect(() => {
+    const interval = setInterval(() => setElapsed(Date.now() - startTime), 100);
+    return () => clearInterval(interval);
+  }, [startTime]);
+  return /* @__PURE__ */ jsxDEV(Fragment2, {
+    children: [
+      elapsed,
+      "ms"
+    ]
+  }, undefined, true, undefined, this);
+}
+function ActionDetailPanel({ entry }) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      flex: 1,
+      overflowY: "auto",
+      padding: "10px 12px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV(MetaSection, {
+        entry
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(RoutingSection, {
+        entry
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(DetailSection, {
+        label: "Input",
+        value: entry.input
+      }, undefined, false, undefined, this),
+      entry.status === "success" && /* @__PURE__ */ jsxDEV(DetailSection, {
+        label: "Output",
+        value: entry.output,
+        color: "#4ade80"
+      }, undefined, false, undefined, this),
+      entry.status === "failed" && /* @__PURE__ */ jsxDEV(DetailSection, {
+        label: "Error",
+        value: entry.error,
+        color: "#f87171"
+      }, undefined, false, undefined, this),
+      entry.status === "aborted" && entry.abortReason != null && /* @__PURE__ */ jsxDEV(DetailSection, {
+        label: "Abort Reason",
+        value: entry.abortReason,
+        color: "#9ca3af"
+      }, undefined, false, undefined, this),
+      entry.progressUpdates.length > 0 && /* @__PURE__ */ jsxDEV(DetailSection, {
+        label: `Progress (${entry.progressUpdates.length})`,
+        value: entry.progressUpdates
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function MetaSection({ entry }) {
+  const [expanded, setExpanded] = useState(false);
+  const { meta, cuid, startTime: _startTime } = 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__ */ jsxDEV("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "3px",
+          userSelect: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            style: {
+              color: "#60a5fa",
+              fontSize: "10px",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            },
+            children: "Meta"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            style: { color: "#334155", fontSize: "11px" },
+            children: expanded ? "▾" : "▸"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      expanded ? /* @__PURE__ */ jsxDEV("div", {
+        onClick: () => setExpanded(false),
+        style: {
+          background: "#1e293b",
+          borderRadius: "4px",
+          overflow: "hidden",
+          cursor: "pointer"
+        },
+        children: expandedRows.map(({ label, value }, i) => /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("span", {
+              style: { textAlign: "left", color: "#475569", fontSize: "10px", paddingTop: "1px" },
+              children: label
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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__ */ jsxDEV(MetaChip, {
+            label: "cuid",
+            value: `…${cuid.slice(-8)}`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(MetaChip, {
+            label: "origin",
+            value: meta.originClient.envId
+          }, undefined, false, undefined, this),
+          meta.originClient.perId != null && /* @__PURE__ */ jsxDEV(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__ */ jsxDEV(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);
+}
+function MetaChip({ label, value }) {
+  return /* @__PURE__ */ jsxDEV("span", {
+    style: { whiteSpace: "nowrap" },
+    children: [
+      /* @__PURE__ */ jsxDEV("span", {
+        style: { color: "#475569" },
+        children: [
+          label,
+          " "
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        style: { color: "#cbd5e1" },
+        children: value
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function RoutingSection({ entry }) {
+  const { meta, startTime } = entry;
+  if (meta.routing.length === 0)
+    return null;
+  const hopCount = meta.routing.length;
+  return /* @__PURE__ */ jsxDEV("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV(SectionLabel, {
+        label: `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}`
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        style: { display: "flex", flexDirection: "column", gap: "2px" },
+        children: meta.routing.map((hop, i) => {
+          const isLocal = hop.handlerType === "local";
+          const isLast = i === hopCount - 1;
+          const badgeColor = isLocal ? "#34d399" : "#fbbf24";
+          const badgeText = isLocal ? "● exec" : `→ ${hop.transport ?? "ext"}`;
+          const runtimeTitle = [hop.runtime.perId, hop.runtime.insId].filter(Boolean).join(" · ") || undefined;
+          const rowBorder = isLast ? undefined : "1px solid #0f172a";
+          return /* @__PURE__ */ jsxDEV("div", {
+            style: {
+              background: "#1e293b",
+              borderRadius: "4px",
+              overflow: "hidden",
+              display: "grid",
+              gridTemplateColumns: "30% 1fr 30%",
+              alignItems: "center",
+              columnGap: "8px",
+              borderBottom: rowBorder,
+              padding: "4px 8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
+                children: [
+                  /* @__PURE__ */ jsxDEV("span", {
+                    style: {
+                      color: "#334155",
+                      fontSize: "10px",
+                      width: "16px",
+                      textAlign: "right"
+                    },
+                    children: i + 1
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("span", {
+                style: { color: badgeColor, fontSize: "10px", whiteSpace: "nowrap" },
+                children: badgeText
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("span", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  paddingRight: "8px",
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsxDEV("span", {
+                    style: {
+                      color: "#475569",
+                      fontSize: "10px",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    },
+                    children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("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);
+        })
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function SectionLabel({ label, color = "#60a5fa" }) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      color,
+      fontSize: "10px",
+      marginBottom: "3px",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em"
+    },
+    children: label
+  }, undefined, false, undefined, this);
+}
+var COMPACT_CHAR_LIMIT = 120;
+function DetailSection({
+  label,
+  value,
+  color = "#60a5fa"
+}) {
+  const [expanded, setExpanded] = useState(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__ */ jsxDEV("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "3px",
+          userSelect: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            style: {
+              color,
+              fontSize: "10px",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            },
+            children: label
+          }, undefined, false, undefined, this),
+          canExpand && /* @__PURE__ */ jsxDEV("span", {
+            style: { color: "#334155", fontSize: "11px" },
+            children: expanded ? "▾" : "▸"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      expanded ? /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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);
+}
+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);
+  }
+}
+export {
+  NiceActionDevtools,
+  ActionDevtoolsCore
+};