state-surgeon 1.0.0

package/dist/dashboard/index.mjs

@@ -0,0 +1,1181 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React2, { useMemo, useState, useCallback, useEffect } from 'react';
+
+// src/dashboard/components/MutationInspector.tsx
+function MutationInspector({
+  mutation,
+  className = ""
+}) {
+  if (!mutation) {
+    return /* @__PURE__ */ jsx("div", { className: `mutation-inspector mutation-inspector--empty ${className}`, children: /* @__PURE__ */ jsx("p", { children: "Select a mutation to inspect" }) });
+  }
+  const formatDuration = (ms) => {
+    if (ms === void 0) return "N/A";
+    if (ms < 1) return `${(ms * 1e3).toFixed(2)}\u03BCs`;
+    if (ms < 1e3) return `${ms.toFixed(2)}ms`;
+    return `${(ms / 1e3).toFixed(2)}s`;
+  };
+  const formatTimestamp = (ts) => {
+    const date = new Date(ts);
+    return date.toLocaleString();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `mutation-inspector ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mutation-inspector__header", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "mutation-inspector__title", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "mutation-inspector__source-badge",
+            "data-source": mutation.source,
+            children: mutation.source
+          }
+        ),
+        mutation.actionType
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "mutation-inspector__id", children: mutation.id })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mutation-inspector__grid", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mutation-inspector__section", children: [
+        /* @__PURE__ */ jsx("h4", { children: "Location" }),
+        /* @__PURE__ */ jsxs("dl", { className: "mutation-inspector__details", children: [
+          mutation.component && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("dt", { children: "Component" }),
+            /* @__PURE__ */ jsx("dd", { children: mutation.component })
+          ] }),
+          mutation.function && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("dt", { children: "Function" }),
+            /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("code", { children: mutation.function }) })
+          ] }),
+          mutation.file && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("dt", { children: "File" }),
+            /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsxs("code", { children: [
+              mutation.file,
+              mutation.line && `:${mutation.line}`,
+              mutation.column && `:${mutation.column}`
+            ] }) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mutation-inspector__section", children: [
+        /* @__PURE__ */ jsx("h4", { children: "Timing" }),
+        /* @__PURE__ */ jsxs("dl", { className: "mutation-inspector__details", children: [
+          /* @__PURE__ */ jsx("dt", { children: "Timestamp" }),
+          /* @__PURE__ */ jsx("dd", { children: formatTimestamp(mutation.timestamp) }),
+          /* @__PURE__ */ jsx("dt", { children: "Logical Clock" }),
+          /* @__PURE__ */ jsx("dd", { children: mutation.logicalClock }),
+          mutation.duration !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("dt", { children: "Duration" }),
+            /* @__PURE__ */ jsx("dd", { children: formatDuration(mutation.duration) })
+          ] })
+        ] })
+      ] })
+    ] }),
+    mutation.actionPayload && /* @__PURE__ */ jsxs("div", { className: "mutation-inspector__section", children: [
+      /* @__PURE__ */ jsx("h4", { children: "Action Payload" }),
+      /* @__PURE__ */ jsx("pre", { className: "mutation-inspector__code", children: JSON.stringify(mutation.actionPayload, null, 2) })
+    ] }),
+    mutation.diff && mutation.diff.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mutation-inspector__section", children: [
+      /* @__PURE__ */ jsxs("h4", { children: [
+        "State Changes (",
+        mutation.diff.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "mutation-inspector__changes", children: mutation.diff.map((change, index) => /* @__PURE__ */ jsxs("li", { className: `mutation-inspector__change mutation-inspector__change--${change.operation.toLowerCase()}`, children: [
+        /* @__PURE__ */ jsx("code", { children: change.path }),
+        /* @__PURE__ */ jsx("span", { className: "mutation-inspector__op", children: change.operation })
+      ] }, index)) })
+    ] }),
+    mutation.callStack && mutation.callStack.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mutation-inspector__section", children: [
+      /* @__PURE__ */ jsx("h4", { children: "Call Stack" }),
+      /* @__PURE__ */ jsx("ul", { className: "mutation-inspector__stack", children: mutation.callStack.map((frame, index) => /* @__PURE__ */ jsx("li", { className: "mutation-inspector__frame", children: /* @__PURE__ */ jsx("code", { children: frame }) }, index)) })
+    ] }),
+    mutation.causes && mutation.causes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mutation-inspector__section", children: [
+      /* @__PURE__ */ jsx("h4", { children: "Caused By" }),
+      /* @__PURE__ */ jsx("ul", { className: "mutation-inspector__causes", children: mutation.causes.map((causeId, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: causeId }) }, index)) })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+        .mutation-inspector {
+          padding: 1rem;
+          background: #1a1a2e;
+          border-radius: 8px;
+          color: #e0e0e0;
+          font-size: 0.875rem;
+        }
+
+        .mutation-inspector--empty {
+          text-align: center;
+          color: #666;
+          padding: 2rem;
+        }
+
+        .mutation-inspector__header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+          padding-bottom: 0.5rem;
+          border-bottom: 1px solid #333;
+        }
+
+        .mutation-inspector__title {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          margin: 0;
+          font-size: 1rem;
+          color: #fff;
+        }
+
+        .mutation-inspector__source-badge {
+          padding: 0.125rem 0.5rem;
+          border-radius: 4px;
+          font-size: 0.75rem;
+          font-weight: 600;
+          text-transform: uppercase;
+        }
+
+        .mutation-inspector__source-badge[data-source="react"] {
+          background: #61dafb;
+          color: #000;
+        }
+
+        .mutation-inspector__source-badge[data-source="redux"] {
+          background: #764abc;
+          color: #fff;
+        }
+
+        .mutation-inspector__source-badge[data-source="zustand"] {
+          background: #f59e0b;
+          color: #000;
+        }
+
+        .mutation-inspector__source-badge[data-source="api"] {
+          background: #3b82f6;
+          color: #fff;
+        }
+
+        .mutation-inspector__id {
+          color: #666;
+          font-family: monospace;
+          font-size: 0.75rem;
+        }
+
+        .mutation-inspector__grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 1rem;
+          margin-bottom: 1rem;
+        }
+
+        .mutation-inspector__section {
+          margin-bottom: 1rem;
+        }
+
+        .mutation-inspector__section h4 {
+          margin: 0 0 0.5rem 0;
+          color: #00d9ff;
+          font-size: 0.875rem;
+        }
+
+        .mutation-inspector__details {
+          margin: 0;
+          display: grid;
+          grid-template-columns: auto 1fr;
+          gap: 0.25rem 0.5rem;
+        }
+
+        .mutation-inspector__details dt {
+          color: #888;
+        }
+
+        .mutation-inspector__details dd {
+          margin: 0;
+          color: #e0e0e0;
+        }
+
+        .mutation-inspector__code {
+          margin: 0;
+          padding: 0.75rem;
+          background: #0f0f23;
+          border-radius: 4px;
+          overflow: auto;
+          max-height: 200px;
+          font-size: 0.8rem;
+        }
+
+        .mutation-inspector__changes,
+        .mutation-inspector__stack,
+        .mutation-inspector__causes {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+
+        .mutation-inspector__change {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.25rem 0.5rem;
+          border-radius: 4px;
+          margin-bottom: 0.25rem;
+        }
+
+        .mutation-inspector__change--add {
+          background: rgba(34, 197, 94, 0.1);
+        }
+
+        .mutation-inspector__change--update {
+          background: rgba(251, 191, 36, 0.1);
+        }
+
+        .mutation-inspector__change--remove {
+          background: rgba(239, 68, 68, 0.1);
+        }
+
+        .mutation-inspector__op {
+          font-size: 0.7rem;
+          padding: 0.125rem 0.375rem;
+          border-radius: 3px;
+          background: #333;
+          color: #888;
+        }
+
+        .mutation-inspector__frame {
+          padding: 0.25rem 0;
+          border-bottom: 1px solid #222;
+        }
+
+        .mutation-inspector__frame:last-child {
+          border-bottom: none;
+        }
+
+        code {
+          font-family: 'Fira Code', 'Monaco', monospace;
+        }
+      ` })
+  ] });
+}
+
+// src/core/diff.ts
+function calculateDiff(before, after, path = "") {
+  const diffs = [];
+  if (before === after) {
+    return diffs;
+  }
+  if (before === null || before === void 0 || typeof before !== "object") {
+    if (after === null || after === void 0 || typeof after !== "object") {
+      if (before !== after) {
+        if (before === void 0) {
+          diffs.push({ path: path || "root", operation: "ADD", newValue: after });
+        } else if (after === void 0) {
+          diffs.push({ path: path || "root", operation: "REMOVE", oldValue: before });
+        } else {
+          diffs.push({ path: path || "root", operation: "UPDATE", oldValue: before, newValue: after });
+        }
+      }
+      return diffs;
+    }
+    diffs.push({ path: path || "root", operation: "UPDATE", oldValue: before, newValue: after });
+    return diffs;
+  }
+  if (after === null || after === void 0 || typeof after !== "object") {
+    diffs.push({ path: path || "root", operation: "UPDATE", oldValue: before, newValue: after });
+    return diffs;
+  }
+  if (Array.isArray(before) || Array.isArray(after)) {
+    if (!Array.isArray(before) || !Array.isArray(after)) {
+      diffs.push({ path: path || "root", operation: "UPDATE", oldValue: before, newValue: after });
+      return diffs;
+    }
+    const maxLength = Math.max(before.length, after.length);
+    for (let i = 0; i < maxLength; i++) {
+      const itemPath = path ? `${path}[${i}]` : `[${i}]`;
+      if (i >= before.length) {
+        diffs.push({ path: itemPath, operation: "ADD", newValue: after[i] });
+      } else if (i >= after.length) {
+        diffs.push({ path: itemPath, operation: "REMOVE", oldValue: before[i] });
+      } else {
+        diffs.push(...calculateDiff(before[i], after[i], itemPath));
+      }
+    }
+    return diffs;
+  }
+  const beforeObj = before;
+  const afterObj = after;
+  const allKeys = /* @__PURE__ */ new Set([...Object.keys(beforeObj), ...Object.keys(afterObj)]);
+  for (const key of allKeys) {
+    const keyPath = path ? `${path}.${key}` : key;
+    const beforeValue = beforeObj[key];
+    const afterValue = afterObj[key];
+    if (!(key in beforeObj)) {
+      diffs.push({ path: keyPath, operation: "ADD", newValue: afterValue });
+    } else if (!(key in afterObj)) {
+      diffs.push({ path: keyPath, operation: "REMOVE", oldValue: beforeValue });
+    } else {
+      diffs.push(...calculateDiff(beforeValue, afterValue, keyPath));
+    }
+  }
+  return diffs;
+}
+function StateDiffViewer({
+  previousState,
+  nextState,
+  diff: preDiff,
+  defaultExpandDepth = 3,
+  className = ""
+}) {
+  const diff = useMemo(
+    () => preDiff || calculateDiff(previousState, nextState),
+    [previousState, nextState, preDiff]
+  );
+  const changedPaths = useMemo(
+    () => new Set(diff.map((d) => d.path)),
+    [diff]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `state-diff-viewer ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "state-diff-viewer__panels", children: [
+      /* @__PURE__ */ jsxs("div", { className: "state-diff-viewer__panel", children: [
+        /* @__PURE__ */ jsx("h3", { className: "state-diff-viewer__title", children: "Before" }),
+        /* @__PURE__ */ jsx("div", { className: "state-diff-viewer__content", children: /* @__PURE__ */ jsx(
+          StateTree,
+          {
+            value: previousState,
+            path: "",
+            changedPaths,
+            defaultExpandDepth,
+            changeType: "before"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "state-diff-viewer__panel", children: [
+        /* @__PURE__ */ jsx("h3", { className: "state-diff-viewer__title", children: "After" }),
+        /* @__PURE__ */ jsx("div", { className: "state-diff-viewer__content", children: /* @__PURE__ */ jsx(
+          StateTree,
+          {
+            value: nextState,
+            path: "",
+            changedPaths,
+            defaultExpandDepth,
+            changeType: "after"
+          }
+        ) })
+      ] })
+    ] }),
+    diff.length > 0 && /* @__PURE__ */ jsxs("div", { className: "state-diff-viewer__summary", children: [
+      /* @__PURE__ */ jsxs("h4", { children: [
+        "Changes (",
+        diff.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "state-diff-viewer__changes", children: diff.map((change, index) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: `state-diff-viewer__change state-diff-viewer__change--${change.operation.toLowerCase()}`,
+          children: [
+            /* @__PURE__ */ jsx("code", { children: change.path }),
+            /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__change-type", children: change.operation }),
+            change.operation === "UPDATE" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__value state-diff-viewer__value--old", children: formatValue(change.oldValue) }),
+              /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__arrow", children: "\u2192" }),
+              /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__value state-diff-viewer__value--new", children: formatValue(change.newValue) })
+            ] }),
+            change.operation === "ADD" && /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__value state-diff-viewer__value--new", children: formatValue(change.newValue) }),
+            change.operation === "REMOVE" && /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__value state-diff-viewer__value--old", children: formatValue(change.oldValue) })
+          ]
+        },
+        index
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+        .state-diff-viewer {
+          font-family: monospace;
+          font-size: 0.875rem;
+          color: #e0e0e0;
+        }
+
+        .state-diff-viewer__panels {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 1rem;
+        }
+
+        .state-diff-viewer__panel {
+          background: #16213e;
+          border-radius: 8px;
+          overflow: hidden;
+        }
+
+        .state-diff-viewer__title {
+          margin: 0;
+          padding: 0.75rem 1rem;
+          background: #1a1a2e;
+          font-size: 0.875rem;
+          font-weight: 600;
+          color: #00d9ff;
+        }
+
+        .state-diff-viewer__content {
+          padding: 1rem;
+          max-height: 400px;
+          overflow: auto;
+        }
+
+        .state-diff-viewer__summary {
+          margin-top: 1rem;
+          padding: 1rem;
+          background: #16213e;
+          border-radius: 8px;
+        }
+
+        .state-diff-viewer__summary h4 {
+          margin: 0 0 0.5rem 0;
+          color: #00d9ff;
+        }
+
+        .state-diff-viewer__changes {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+
+        .state-diff-viewer__change {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.5rem;
+          border-radius: 4px;
+          margin-bottom: 0.25rem;
+        }
+
+        .state-diff-viewer__change--add {
+          background: rgba(34, 197, 94, 0.1);
+          border-left: 3px solid #22c55e;
+        }
+
+        .state-diff-viewer__change--update {
+          background: rgba(251, 191, 36, 0.1);
+          border-left: 3px solid #fbbf24;
+        }
+
+        .state-diff-viewer__change--remove {
+          background: rgba(239, 68, 68, 0.1);
+          border-left: 3px solid #ef4444;
+        }
+
+        .state-diff-viewer__change-type {
+          font-size: 0.7rem;
+          padding: 0.125rem 0.375rem;
+          border-radius: 3px;
+          background: #333;
+          color: #888;
+        }
+
+        .state-diff-viewer__value {
+          padding: 0.125rem 0.375rem;
+          border-radius: 3px;
+        }
+
+        .state-diff-viewer__value--old {
+          background: rgba(239, 68, 68, 0.2);
+          color: #fca5a5;
+          text-decoration: line-through;
+        }
+
+        .state-diff-viewer__value--new {
+          background: rgba(34, 197, 94, 0.2);
+          color: #86efac;
+        }
+
+        .state-diff-viewer__arrow {
+          color: #666;
+        }
+      ` })
+  ] });
+}
+function StateTree({
+  value,
+  path,
+  changedPaths,
+  defaultExpandDepth,
+  depth = 0,
+  changeType
+}) {
+  const [isExpanded, setIsExpanded] = useState(depth < defaultExpandDepth);
+  const isChanged = path ? changedPaths.has(path) : false;
+  const toggle = useCallback(() => setIsExpanded((e) => !e), []);
+  if (value === null) {
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__null", children: "null" });
+  }
+  if (value === void 0) {
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__undefined", children: "undefined" });
+  }
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__boolean", children: String(value) });
+  }
+  if (typeof value === "number") {
+    return /* @__PURE__ */ jsx("span", { className: `state-tree__number ${isChanged ? "state-tree--changed" : ""}`, children: String(value) });
+  }
+  if (typeof value === "string") {
+    return /* @__PURE__ */ jsxs("span", { className: `state-tree__string ${isChanged ? "state-tree--changed" : ""}`, children: [
+      '"',
+      value,
+      '"'
+    ] });
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return /* @__PURE__ */ jsx("span", { className: "state-tree__empty", children: "[]" });
+    }
+    return /* @__PURE__ */ jsxs("span", { className: "state-tree__array", children: [
+      /* @__PURE__ */ jsxs("span", { className: "state-tree__toggle", onClick: toggle, children: [
+        isExpanded ? "\u25BC" : "\u25B6",
+        " Array(",
+        value.length,
+        ")"
+      ] }),
+      isExpanded && /* @__PURE__ */ jsx("div", { className: "state-tree__children", children: value.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "state-tree__item", children: [
+        /* @__PURE__ */ jsxs("span", { className: "state-tree__key", children: [
+          index,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx(
+          StateTree,
+          {
+            value: item,
+            path: path ? `${path}[${index}]` : `[${index}]`,
+            changedPaths,
+            defaultExpandDepth,
+            depth: depth + 1,
+            changeType
+          }
+        )
+      ] }, index)) })
+    ] });
+  }
+  if (typeof value === "object") {
+    const entries = Object.entries(value);
+    if (entries.length === 0) {
+      return /* @__PURE__ */ jsx("span", { className: "state-tree__empty", children: "{}" });
+    }
+    return /* @__PURE__ */ jsxs("span", { className: "state-tree__object", children: [
+      /* @__PURE__ */ jsxs("span", { className: "state-tree__toggle", onClick: toggle, children: [
+        isExpanded ? "\u25BC" : "\u25B6",
+        " Object(",
+        entries.length,
+        ")"
+      ] }),
+      isExpanded && /* @__PURE__ */ jsx("div", { className: "state-tree__children", children: entries.map(([key, val]) => /* @__PURE__ */ jsxs("div", { className: "state-tree__item", children: [
+        /* @__PURE__ */ jsxs("span", { className: "state-tree__key", children: [
+          key,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx(
+          StateTree,
+          {
+            value: val,
+            path: path ? `${path}.${key}` : key,
+            changedPaths,
+            defaultExpandDepth,
+            depth: depth + 1,
+            changeType
+          }
+        )
+      ] }, key)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { children: String(value) });
+}
+function formatValue(value) {
+  if (value === void 0) return "undefined";
+  if (value === null) return "null";
+  if (typeof value === "object") {
+    try {
+      const str = JSON.stringify(value);
+      return str.length > 50 ? str.slice(0, 50) + "..." : str;
+    } catch {
+      return "[Object]";
+    }
+  }
+  return String(value);
+}
+var sourceColors = {
+  react: "#61dafb",
+  redux: "#764abc",
+  zustand: "#f59e0b",
+  express: "#68a063",
+  websocket: "#8b5cf6",
+  api: "#3b82f6",
+  custom: "#6b7280"
+};
+function TimelineScrubber({
+  mutations,
+  selectedIndex,
+  onSelect,
+  isPlaying = false,
+  onPlay,
+  onPause,
+  onStepForward,
+  onStepBackward,
+  className = ""
+}) {
+  const handleSliderChange = useCallback(
+    (e) => {
+      const index = parseInt(e.target.value, 10);
+      if (mutations[index]) {
+        onSelect(index, mutations[index]);
+      }
+    },
+    [mutations, onSelect]
+  );
+  const handleMarkerClick = useCallback(
+    (index) => {
+      if (mutations[index]) {
+        onSelect(index, mutations[index]);
+      }
+    },
+    [mutations, onSelect]
+  );
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      fractionalSecondDigits: 3
+    });
+  };
+  if (mutations.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: `timeline-scrubber timeline-scrubber--empty ${className}`, children: /* @__PURE__ */ jsx("p", { children: "No mutations recorded yet" }) });
+  }
+  const selectedMutation = mutations[selectedIndex];
+  return /* @__PURE__ */ jsxs("div", { className: `timeline-scrubber ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "timeline-scrubber__header", children: [
+      /* @__PURE__ */ jsxs("span", { className: "timeline-scrubber__count", children: [
+        selectedIndex + 1,
+        " / ",
+        mutations.length,
+        " mutations"
+      ] }),
+      selectedMutation && /* @__PURE__ */ jsx("span", { className: "timeline-scrubber__time", children: formatTime(selectedMutation.timestamp) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "timeline-scrubber__track", children: [
+      mutations.map((mutation, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `timeline-scrubber__marker ${index === selectedIndex ? "timeline-scrubber__marker--selected" : ""}`,
+          style: {
+            left: `${index / (mutations.length - 1 || 1) * 100}%`,
+            backgroundColor: sourceColors[mutation.source] || sourceColors.custom
+          },
+          onClick: () => handleMarkerClick(index),
+          title: `${mutation.source}: ${mutation.actionType}${mutation.component ? ` @ ${mutation.component}` : ""}`
+        },
+        mutation.id
+      )),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "timeline-scrubber__position",
+          style: {
+            left: `${selectedIndex / (mutations.length - 1 || 1) * 100}%`
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max: mutations.length - 1,
+        value: selectedIndex,
+        onChange: handleSliderChange,
+        className: "timeline-scrubber__slider"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "timeline-scrubber__controls", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onStepBackward,
+          disabled: selectedIndex === 0,
+          className: "timeline-scrubber__button",
+          title: "Step Backward",
+          children: "\u23EE"
+        }
+      ),
+      isPlaying ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onPause,
+          className: "timeline-scrubber__button timeline-scrubber__button--primary",
+          title: "Pause",
+          children: "\u23F8"
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onPlay,
+          disabled: selectedIndex === mutations.length - 1,
+          className: "timeline-scrubber__button timeline-scrubber__button--primary",
+          title: "Play",
+          children: "\u25B6"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onStepForward,
+          disabled: selectedIndex === mutations.length - 1,
+          className: "timeline-scrubber__button",
+          title: "Step Forward",
+          children: "\u23ED"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "timeline-scrubber__legend", children: Object.entries(sourceColors).map(([source, color]) => /* @__PURE__ */ jsxs("span", { className: "timeline-scrubber__legend-item", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "timeline-scrubber__legend-dot",
+          style: { backgroundColor: color }
+        }
+      ),
+      source
+    ] }, source)) }),
+    /* @__PURE__ */ jsx("style", { children: `
+        .timeline-scrubber {
+          padding: 1rem;
+          background: #1a1a2e;
+          border-radius: 8px;
+          color: #fff;
+        }
+
+        .timeline-scrubber--empty {
+          text-align: center;
+          color: #888;
+        }
+
+        .timeline-scrubber__header {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 0.5rem;
+          font-size: 0.875rem;
+        }
+
+        .timeline-scrubber__count {
+          color: #00d9ff;
+          font-weight: 600;
+        }
+
+        .timeline-scrubber__time {
+          color: #888;
+          font-family: monospace;
+        }
+
+        .timeline-scrubber__track {
+          position: relative;
+          height: 24px;
+          background: #16213e;
+          border-radius: 4px;
+          margin-bottom: 0.5rem;
+        }
+
+        .timeline-scrubber__marker {
+          position: absolute;
+          width: 4px;
+          height: 16px;
+          top: 4px;
+          border-radius: 2px;
+          cursor: pointer;
+          transition: transform 0.1s, opacity 0.1s;
+          opacity: 0.7;
+        }
+
+        .timeline-scrubber__marker:hover {
+          transform: scaleY(1.2);
+          opacity: 1;
+        }
+
+        .timeline-scrubber__marker--selected {
+          opacity: 1;
+          box-shadow: 0 0 8px currentColor;
+        }
+
+        .timeline-scrubber__position {
+          position: absolute;
+          width: 2px;
+          height: 24px;
+          top: 0;
+          background: #fff;
+          border-radius: 1px;
+          pointer-events: none;
+        }
+
+        .timeline-scrubber__slider {
+          width: 100%;
+          margin: 0.5rem 0;
+          cursor: pointer;
+        }
+
+        .timeline-scrubber__controls {
+          display: flex;
+          justify-content: center;
+          gap: 0.5rem;
+          margin: 0.5rem 0;
+        }
+
+        .timeline-scrubber__button {
+          padding: 0.5rem 1rem;
+          border: none;
+          border-radius: 4px;
+          background: #16213e;
+          color: #fff;
+          cursor: pointer;
+          font-size: 1rem;
+          transition: background 0.2s;
+        }
+
+        .timeline-scrubber__button:hover:not(:disabled) {
+          background: #1f2b4d;
+        }
+
+        .timeline-scrubber__button:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .timeline-scrubber__button--primary {
+          background: #00d9ff;
+          color: #000;
+        }
+
+        .timeline-scrubber__button--primary:hover:not(:disabled) {
+          background: #00b8e6;
+        }
+
+        .timeline-scrubber__legend {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 1rem;
+          margin-top: 0.5rem;
+          font-size: 0.75rem;
+        }
+
+        .timeline-scrubber__legend-item {
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+          color: #888;
+        }
+
+        .timeline-scrubber__legend-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+        }
+      ` })
+  ] });
+}
+var DashboardContext = React2.createContext(null);
+function DashboardProvider({
+  serverUrl = "http://localhost:8080",
+  children
+}) {
+  const [state, setState] = useState({
+    serverUrl,
+    sessions: [],
+    currentSession: null,
+    timeline: [],
+    selectedMutation: null,
+    isLoading: false,
+    error: null
+  });
+  const loadSessions = async () => {
+    setState((s) => ({ ...s, isLoading: true, error: null }));
+    try {
+      const res = await fetch(`${serverUrl}/api/sessions`);
+      const data = await res.json();
+      setState((s) => ({ ...s, sessions: data.sessions, isLoading: false }));
+    } catch (error) {
+      setState((s) => ({ ...s, error: String(error), isLoading: false }));
+    }
+  };
+  const selectSession = async (sessionId) => {
+    const session = state.sessions.find((s) => s.id === sessionId);
+    if (!session) return;
+    setState((s) => ({ ...s, currentSession: session, isLoading: true }));
+    try {
+      const res = await fetch(`${serverUrl}/api/sessions/${sessionId}/timeline`);
+      const data = await res.json();
+      setState((s) => ({
+        ...s,
+        timeline: data.timeline,
+        selectedMutation: data.timeline[0] || null,
+        isLoading: false
+      }));
+    } catch (error) {
+      setState((s) => ({ ...s, error: String(error), isLoading: false }));
+    }
+  };
+  const selectMutation = (mutation) => {
+    setState((s) => ({ ...s, selectedMutation: mutation }));
+  };
+  const refreshTimeline = async () => {
+    if (!state.currentSession) return;
+    await selectSession(state.currentSession.id);
+  };
+  useEffect(() => {
+    loadSessions();
+  }, [serverUrl]);
+  const value = {
+    ...state,
+    loadSessions,
+    selectSession,
+    selectMutation,
+    refreshTimeline
+  };
+  return /* @__PURE__ */ jsx(DashboardContext.Provider, { value, children });
+}
+function useDashboard() {
+  const context = React2.useContext(DashboardContext);
+  if (!context) {
+    throw new Error("useDashboard must be used within a DashboardProvider");
+  }
+  return context;
+}
+function usePlayback(timeline) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [playbackSpeed, setPlaybackSpeed] = useState(1);
+  useEffect(() => {
+    if (!isPlaying || timeline.length === 0) return;
+    const interval = setInterval(() => {
+      setCurrentIndex((i) => {
+        if (i >= timeline.length - 1) {
+          setIsPlaying(false);
+          return i;
+        }
+        return i + 1;
+      });
+    }, 500 / playbackSpeed);
+    return () => clearInterval(interval);
+  }, [isPlaying, timeline.length, playbackSpeed]);
+  return {
+    currentIndex,
+    currentMutation: timeline[currentIndex] || null,
+    isPlaying,
+    play: () => setIsPlaying(true),
+    pause: () => setIsPlaying(false),
+    stepForward: () => setCurrentIndex((i) => Math.min(i + 1, timeline.length - 1)),
+    stepBackward: () => setCurrentIndex((i) => Math.max(i - 1, 0)),
+    goTo: (index) => setCurrentIndex(Math.max(0, Math.min(index, timeline.length - 1))),
+    setSpeed: setPlaybackSpeed,
+    playbackSpeed
+  };
+}
+function StateSurgeonDashboard({ serverUrl = "http://localhost:8080" }) {
+  return /* @__PURE__ */ jsx(DashboardProvider, { serverUrl, children: /* @__PURE__ */ jsx(DashboardContent, {}) });
+}
+function DashboardContent() {
+  const {
+    sessions,
+    currentSession,
+    timeline,
+    selectedMutation,
+    isLoading,
+    error,
+    selectSession,
+    selectMutation,
+    loadSessions
+  } = useDashboard();
+  const playback = usePlayback(timeline);
+  React2.useEffect(() => {
+    if (playback.currentMutation) {
+      selectMutation(playback.currentMutation);
+    }
+  }, [playback.currentMutation, selectMutation]);
+  return /* @__PURE__ */ jsxs("div", { className: "surgeon-dashboard", children: [
+    /* @__PURE__ */ jsxs("header", { className: "surgeon-dashboard__header", children: [
+      /* @__PURE__ */ jsx("h1", { className: "surgeon-dashboard__logo", children: "\u{1F52C} State Surgeon" }),
+      /* @__PURE__ */ jsxs("div", { className: "surgeon-dashboard__session-select", children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: currentSession?.id || "",
+            onChange: (e) => selectSession(e.target.value),
+            disabled: isLoading,
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Select a session..." }),
+              sessions.map((session) => /* @__PURE__ */ jsxs("option", { value: session.id, children: [
+                session.appId,
+                " - ",
+                session.id.slice(0, 16),
+                "... (",
+                session.mutationCount,
+                " mutations)"
+              ] }, session.id))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { onClick: loadSessions, disabled: isLoading, children: "\u{1F504}" })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "surgeon-dashboard__error", children: /* @__PURE__ */ jsxs("p", { children: [
+      "Error: ",
+      error
+    ] }) }),
+    isLoading && /* @__PURE__ */ jsx("div", { className: "surgeon-dashboard__loading", children: /* @__PURE__ */ jsx("p", { children: "Loading..." }) }),
+    currentSession && !isLoading && /* @__PURE__ */ jsxs("div", { className: "surgeon-dashboard__main", children: [
+      /* @__PURE__ */ jsx("section", { className: "surgeon-dashboard__timeline", children: /* @__PURE__ */ jsx(
+        TimelineScrubber,
+        {
+          mutations: timeline,
+          selectedIndex: playback.currentIndex,
+          onSelect: (index, mutation) => {
+            playback.goTo(index);
+            selectMutation(mutation);
+          },
+          isPlaying: playback.isPlaying,
+          onPlay: playback.play,
+          onPause: playback.pause,
+          onStepForward: playback.stepForward,
+          onStepBackward: playback.stepBackward
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "surgeon-dashboard__content", children: [
+        /* @__PURE__ */ jsx("section", { className: "surgeon-dashboard__diff", children: selectedMutation && /* @__PURE__ */ jsx(
+          StateDiffViewer,
+          {
+            previousState: selectedMutation.previousState,
+            nextState: selectedMutation.nextState,
+            diff: selectedMutation.diff
+          }
+        ) }),
+        /* @__PURE__ */ jsx("section", { className: "surgeon-dashboard__inspector", children: /* @__PURE__ */ jsx(MutationInspector, { mutation: selectedMutation }) })
+      ] })
+    ] }),
+    !currentSession && !isLoading && sessions.length === 0 && /* @__PURE__ */ jsxs("div", { className: "surgeon-dashboard__empty", children: [
+      /* @__PURE__ */ jsx("h2", { children: "No Sessions Yet" }),
+      /* @__PURE__ */ jsx("p", { children: "Connect your application to start capturing mutations." }),
+      /* @__PURE__ */ jsx("pre", { children: `import { StateSurgeonClient, instrumentReact } from 'state-surgeon/instrument';
+
+// Initialize the client
+const client = new StateSurgeonClient({
+  serverUrl: 'ws://localhost:8081',
+  appId: 'my-app',
+});
+
+// Instrument React
+instrumentReact(React);` })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+        .surgeon-dashboard {
+          min-height: 100vh;
+          background: #0f0f23;
+          color: #e0e0e0;
+          font-family: system-ui, -apple-system, sans-serif;
+        }
+
+        .surgeon-dashboard__header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 1rem 2rem;
+          background: #1a1a2e;
+          border-bottom: 1px solid #333;
+        }
+
+        .surgeon-dashboard__logo {
+          margin: 0;
+          font-size: 1.5rem;
+          color: #00d9ff;
+        }
+
+        .surgeon-dashboard__session-select {
+          display: flex;
+          gap: 0.5rem;
+        }
+
+        .surgeon-dashboard__session-select select {
+          padding: 0.5rem 1rem;
+          border: 1px solid #333;
+          border-radius: 4px;
+          background: #16213e;
+          color: #e0e0e0;
+          min-width: 300px;
+        }
+
+        .surgeon-dashboard__session-select button {
+          padding: 0.5rem 1rem;
+          border: 1px solid #333;
+          border-radius: 4px;
+          background: #16213e;
+          color: #e0e0e0;
+          cursor: pointer;
+        }
+
+        .surgeon-dashboard__session-select button:hover {
+          background: #1f2b4d;
+        }
+
+        .surgeon-dashboard__error {
+          padding: 1rem 2rem;
+          background: rgba(239, 68, 68, 0.1);
+          border-bottom: 1px solid #ef4444;
+          color: #fca5a5;
+        }
+
+        .surgeon-dashboard__loading {
+          padding: 2rem;
+          text-align: center;
+          color: #888;
+        }
+
+        .surgeon-dashboard__main {
+          padding: 1rem 2rem;
+        }
+
+        .surgeon-dashboard__timeline {
+          margin-bottom: 1rem;
+        }
+
+        .surgeon-dashboard__content {
+          display: grid;
+          grid-template-columns: 2fr 1fr;
+          gap: 1rem;
+        }
+
+        .surgeon-dashboard__empty {
+          padding: 4rem 2rem;
+          text-align: center;
+        }
+
+        .surgeon-dashboard__empty h2 {
+          color: #888;
+          margin-bottom: 1rem;
+        }
+
+        .surgeon-dashboard__empty pre {
+          display: inline-block;
+          text-align: left;
+          padding: 1.5rem;
+          background: #16213e;
+          border-radius: 8px;
+          font-size: 0.875rem;
+        }
+
+        @media (max-width: 1024px) {
+          .surgeon-dashboard__content {
+            grid-template-columns: 1fr;
+          }
+        }
+      ` })
+  ] });
+}
+
+export { DashboardProvider, MutationInspector, StateDiffViewer, StateSurgeonDashboard, TimelineScrubber, useDashboard };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map