state-surgeon 1.0.0 → 2.0.0

package/dist/dashboard/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React2, { useMemo, useState, useCallback, useEffect } from 'react';
+import React4, { useState, useMemo, useCallback, useEffect } from 'react';
 
 // src/dashboard/components/MutationInspector.tsx
 function MutationInspector({
@@ -317,13 +317,41 @@ function calculateDiff(before, after, path = "") {
   }
   return diffs;
 }
+function detectAnomaly(value) {
+  if (typeof value === "number" && isNaN(value)) return "nan";
+  if (value === void 0) return "undefined";
+  if (value === null) return "null";
+  if (value === "") return "empty-string";
+  if (typeof value === "number" && value < 0) return "negative";
+  return null;
+}
+function getAnomalyBadge(anomaly) {
+  switch (anomaly) {
+    case "nan":
+      return "\u26A0\uFE0F NaN";
+    case "undefined":
+      return "\u26A0\uFE0F undefined";
+    case "null":
+      return "\u26A1 null";
+    case "empty-string":
+      return "\u{1F4ED} empty";
+    case "negative":
+      return "\u2796 negative";
+    default:
+      return "";
+  }
+}
 function StateDiffViewer({
   previousState,
   nextState,
   diff: preDiff,
   defaultExpandDepth = 3,
+  viewMode = "split",
   className = ""
 }) {
+  const [activeTab, setActiveTab] = useState("diff");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [copiedPath, setCopiedPath] = useState(null);
   const diff = useMemo(
     () => preDiff || calculateDiff(previousState, nextState),
     [previousState, nextState, preDiff]
@@ -332,11 +360,165 @@ function StateDiffViewer({
     () => 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(
+  const groupedDiffs = useMemo(() => {
+    const adds = diff.filter((d) => d.operation === "ADD");
+    const updates = diff.filter((d) => d.operation === "UPDATE");
+    const removes = diff.filter((d) => d.operation === "REMOVE");
+    return { adds, updates, removes };
+  }, [diff]);
+  const anomalies = useMemo(() => {
+    const result = [];
+    for (const d of diff) {
+      if (d.operation !== "REMOVE") {
+        const anomaly = detectAnomaly(d.newValue);
+        if (anomaly) {
+          result.push({ path: d.path, type: anomaly, value: d.newValue });
+        }
+      }
+    }
+    return result;
+  }, [diff]);
+  const copyToClipboard = useCallback((value, path) => {
+    const text = typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
+    navigator.clipboard.writeText(text);
+    setCopiedPath(path);
+    setTimeout(() => setCopiedPath(null), 2e3);
+  }, []);
+  const copyFullState = useCallback((state, label) => {
+    navigator.clipboard.writeText(JSON.stringify(state, null, 2));
+    setCopiedPath(label);
+    setTimeout(() => setCopiedPath(null), 2e3);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: `state-diff-viewer-enhanced ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "sdv-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sdv-tabs", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `sdv-tab ${activeTab === "diff" ? "active" : ""}`,
+            onClick: () => setActiveTab("diff"),
+            children: [
+              "\u{1F4CA} Changes (",
+              diff.length,
+              ")"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `sdv-tab ${activeTab === "before" ? "active" : ""}`,
+            onClick: () => setActiveTab("before"),
+            children: "\u23EA Before"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `sdv-tab ${activeTab === "after" ? "active" : ""}`,
+            onClick: () => setActiveTab("after"),
+            children: "\u23E9 After"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `sdv-tab ${activeTab === "raw" ? "active" : ""}`,
+            onClick: () => setActiveTab("raw"),
+            children: "\u{1F4DD} Raw JSON"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "sdv-actions", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "\u{1F50D} Search paths...",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          className: "sdv-search"
+        }
+      ) })
+    ] }),
+    anomalies.length > 0 && /* @__PURE__ */ jsxs("div", { className: "sdv-anomalies", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sdv-anomaly-header", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdv-anomaly-icon", children: "\u{1F6A8}" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Potential Issues Detected (",
+          anomalies.length,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "sdv-anomaly-list", children: anomalies.map((a, i) => /* @__PURE__ */ jsxs("div", { className: `sdv-anomaly-item sdv-anomaly-${a.type}`, children: [
+        /* @__PURE__ */ jsx("code", { children: a.path }),
+        /* @__PURE__ */ jsx("span", { className: "sdv-anomaly-badge", children: getAnomalyBadge(a.type) })
+      ] }, i)) })
+    ] }),
+    activeTab === "diff" && /* @__PURE__ */ jsxs("div", { className: "sdv-summary", children: [
+      /* @__PURE__ */ jsxs("span", { className: "sdv-summary-item sdv-add", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdv-dot" }),
+        groupedDiffs.adds.length,
+        " added"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "sdv-summary-item sdv-update", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdv-dot" }),
+        groupedDiffs.updates.length,
+        " changed"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "sdv-summary-item sdv-remove", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdv-dot" }),
+        groupedDiffs.removes.length,
+        " removed"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "sdv-content", children: [
+      activeTab === "diff" && /* @__PURE__ */ jsx("div", { className: "sdv-diff-list", children: diff.length === 0 ? /* @__PURE__ */ jsx("div", { className: "sdv-empty", children: "No changes detected" }) : diff.filter((d) => !searchQuery || d.path.toLowerCase().includes(searchQuery.toLowerCase())).map((change, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `sdv-diff-item sdv-diff-${change.operation.toLowerCase()}`,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "sdv-diff-header", children: [
+              /* @__PURE__ */ jsx("span", { className: "sdv-diff-op", children: change.operation }),
+              /* @__PURE__ */ jsx("code", { className: "sdv-diff-path", children: change.path }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "sdv-copy-btn",
+                  onClick: () => copyToClipboard(change.newValue ?? change.oldValue, change.path),
+                  title: "Copy value",
+                  children: copiedPath === change.path ? "\u2713" : "\u{1F4CB}"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "sdv-diff-values", children: [
+              change.operation === "UPDATE" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "sdv-value sdv-value-old", children: [
+                  /* @__PURE__ */ jsx("span", { className: "sdv-value-label", children: "Before:" }),
+                  /* @__PURE__ */ jsx(ValueDisplay, { value: change.oldValue })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "sdv-arrow", children: "\u2192" }),
+                /* @__PURE__ */ jsxs("div", { className: "sdv-value sdv-value-new", children: [
+                  /* @__PURE__ */ jsx("span", { className: "sdv-value-label", children: "After:" }),
+                  /* @__PURE__ */ jsx(ValueDisplay, { value: change.newValue })
+                ] })
+              ] }),
+              change.operation === "ADD" && /* @__PURE__ */ jsx("div", { className: "sdv-value sdv-value-new", children: /* @__PURE__ */ jsx(ValueDisplay, { value: change.newValue }) }),
+              change.operation === "REMOVE" && /* @__PURE__ */ jsx("div", { className: "sdv-value sdv-value-old", children: /* @__PURE__ */ jsx(ValueDisplay, { value: change.oldValue }) })
+            ] })
+          ]
+        },
+        index
+      )) }),
+      activeTab === "before" && /* @__PURE__ */ jsxs("div", { className: "sdv-state-view", children: [
+        /* @__PURE__ */ jsx("div", { className: "sdv-state-actions", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => copyFullState(previousState, "before"),
+            className: "sdv-copy-full",
+            children: copiedPath === "before" ? "\u2713 Copied!" : "\u{1F4CB} Copy State"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
           StateTree,
           {
             value: previousState,
@@ -345,11 +527,18 @@ function StateDiffViewer({
             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(
+      activeTab === "after" && /* @__PURE__ */ jsxs("div", { className: "sdv-state-view", children: [
+        /* @__PURE__ */ jsx("div", { className: "sdv-state-actions", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => copyFullState(nextState, "after"),
+            className: "sdv-copy-full",
+            children: copiedPath === "after" ? "\u2713 Copied!" : "\u{1F4CB} Copy State"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
           StateTree,
           {
             value: nextState,
@@ -358,246 +547,510 @@ function StateDiffViewer({
             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
-      )) })
+      activeTab === "raw" && /* @__PURE__ */ jsx("div", { className: "sdv-raw-view", children: /* @__PURE__ */ jsxs("div", { className: "sdv-raw-panels", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sdv-raw-panel", children: [
+          /* @__PURE__ */ jsx("h4", { children: "Before" }),
+          /* @__PURE__ */ jsx("pre", { children: JSON.stringify(previousState, null, 2) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sdv-raw-panel", children: [
+          /* @__PURE__ */ jsx("h4", { children: "After" }),
+          /* @__PURE__ */ jsx("pre", { children: JSON.stringify(nextState, null, 2) })
+        ] })
+      ] }) })
     ] }),
     /* @__PURE__ */ jsx("style", { children: `
-        .state-diff-viewer {
-          font-family: monospace;
-          font-size: 0.875rem;
+        .state-diff-viewer-enhanced {
+          background: #1a1a2e;
+          border-radius: 12px;
+          overflow: hidden;
+          font-family: system-ui, sans-serif;
           color: #e0e0e0;
         }
 
-        .state-diff-viewer__panels {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          gap: 1rem;
+        .sdv-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0.75rem 1rem;
+          background: #16213e;
+          border-bottom: 1px solid #333;
+          flex-wrap: wrap;
+          gap: 0.5rem;
         }
 
-        .state-diff-viewer__panel {
-          background: #16213e;
-          border-radius: 8px;
-          overflow: hidden;
+        .sdv-tabs {
+          display: flex;
+          gap: 0.25rem;
         }
 
-        .state-diff-viewer__title {
-          margin: 0;
-          padding: 0.75rem 1rem;
-          background: #1a1a2e;
+        .sdv-tab {
+          padding: 0.5rem 1rem;
+          border: none;
+          background: transparent;
+          color: #888;
+          cursor: pointer;
+          border-radius: 6px;
           font-size: 0.875rem;
-          font-weight: 600;
+          transition: all 0.2s;
+        }
+
+        .sdv-tab:hover {
+          background: #1f2b4d;
+          color: #ccc;
+        }
+
+        .sdv-tab.active {
+          background: #00d9ff20;
           color: #00d9ff;
         }
 
-        .state-diff-viewer__content {
-          padding: 1rem;
-          max-height: 400px;
-          overflow: auto;
+        .sdv-search {
+          padding: 0.5rem 1rem;
+          border: 1px solid #333;
+          border-radius: 6px;
+          background: #0f0f23;
+          color: #e0e0e0;
+          font-size: 0.875rem;
+          width: 200px;
         }
 
-        .state-diff-viewer__summary {
-          margin-top: 1rem;
+        .sdv-anomalies {
+          margin: 1rem;
           padding: 1rem;
-          background: #16213e;
+          background: #ef444420;
+          border: 1px solid #ef4444;
           border-radius: 8px;
         }
 
-        .state-diff-viewer__summary h4 {
-          margin: 0 0 0.5rem 0;
-          color: #00d9ff;
+        .sdv-anomaly-header {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-weight: 600;
+          margin-bottom: 0.75rem;
+          color: #fca5a5;
         }
 
-        .state-diff-viewer__changes {
-          list-style: none;
-          margin: 0;
-          padding: 0;
+        .sdv-anomaly-icon {
+          font-size: 1.25rem;
         }
 
-        .state-diff-viewer__change {
+        .sdv-anomaly-list {
           display: flex;
           flex-wrap: wrap;
+          gap: 0.5rem;
+        }
+
+        .sdv-anomaly-item {
+          display: flex;
           align-items: center;
           gap: 0.5rem;
-          padding: 0.5rem;
+          padding: 0.375rem 0.75rem;
+          background: #0f0f23;
           border-radius: 4px;
-          margin-bottom: 0.25rem;
+          font-size: 0.875rem;
         }
 
-        .state-diff-viewer__change--add {
-          background: rgba(34, 197, 94, 0.1);
-          border-left: 3px solid #22c55e;
+        .sdv-anomaly-item code {
+          color: #f472b6;
         }
 
-        .state-diff-viewer__change--update {
-          background: rgba(251, 191, 36, 0.1);
-          border-left: 3px solid #fbbf24;
+        .sdv-anomaly-badge {
+          font-size: 0.75rem;
+          padding: 0.125rem 0.375rem;
+          background: #ef444440;
+          border-radius: 3px;
         }
 
-        .state-diff-viewer__change--remove {
-          background: rgba(239, 68, 68, 0.1);
-          border-left: 3px solid #ef4444;
+        .sdv-summary {
+          display: flex;
+          gap: 1.5rem;
+          padding: 0.75rem 1rem;
+          background: #0f0f23;
+          border-bottom: 1px solid #333;
+        }
+
+        .sdv-summary-item {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-size: 0.875rem;
+        }
+
+        .sdv-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+        }
+
+        .sdv-add .sdv-dot { background: #22c55e; }
+        .sdv-update .sdv-dot { background: #fbbf24; }
+        .sdv-remove .sdv-dot { background: #ef4444; }
+
+        .sdv-content {
+          max-height: 500px;
+          overflow: auto;
+        }
+
+        .sdv-empty {
+          padding: 2rem;
+          text-align: center;
+          color: #666;
+        }
+
+        .sdv-diff-list {
+          padding: 1rem;
+        }
+
+        .sdv-diff-item {
+          margin-bottom: 0.75rem;
+          padding: 1rem;
+          background: #16213e;
+          border-radius: 8px;
+          border-left: 4px solid;
+        }
+
+        .sdv-diff-add { border-left-color: #22c55e; }
+        .sdv-diff-update { border-left-color: #fbbf24; }
+        .sdv-diff-remove { border-left-color: #ef4444; }
+
+        .sdv-diff-header {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          margin-bottom: 0.75rem;
         }
 
-        .state-diff-viewer__change-type {
+        .sdv-diff-op {
           font-size: 0.7rem;
-          padding: 0.125rem 0.375rem;
-          border-radius: 3px;
-          background: #333;
+          font-weight: 600;
+          padding: 0.25rem 0.5rem;
+          border-radius: 4px;
+          text-transform: uppercase;
+        }
+
+        .sdv-diff-add .sdv-diff-op { background: #22c55e30; color: #22c55e; }
+        .sdv-diff-update .sdv-diff-op { background: #fbbf2430; color: #fbbf24; }
+        .sdv-diff-remove .sdv-diff-op { background: #ef444430; color: #ef4444; }
+
+        .sdv-diff-path {
+          flex: 1;
+          font-family: 'Fira Code', monospace;
+          color: #a78bfa;
+        }
+
+        .sdv-copy-btn {
+          padding: 0.25rem 0.5rem;
+          border: none;
+          background: transparent;
           color: #888;
+          cursor: pointer;
+          border-radius: 4px;
+          font-size: 0.875rem;
         }
 
-        .state-diff-viewer__value {
-          padding: 0.125rem 0.375rem;
-          border-radius: 3px;
+        .sdv-copy-btn:hover {
+          background: #333;
+          color: #fff;
+        }
+
+        .sdv-diff-values {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          flex-wrap: wrap;
+        }
+
+        .sdv-value {
+          padding: 0.5rem 0.75rem;
+          border-radius: 6px;
+          font-family: 'Fira Code', monospace;
+          font-size: 0.875rem;
+          max-width: 300px;
+          overflow: auto;
+        }
+
+        .sdv-value-label {
+          display: block;
+          font-size: 0.7rem;
+          color: #666;
+          margin-bottom: 0.25rem;
+          font-family: system-ui;
         }
 
-        .state-diff-viewer__value--old {
-          background: rgba(239, 68, 68, 0.2);
+        .sdv-value-old {
+          background: #ef444420;
           color: #fca5a5;
-          text-decoration: line-through;
         }
 
-        .state-diff-viewer__value--new {
-          background: rgba(34, 197, 94, 0.2);
+        .sdv-value-new {
+          background: #22c55e20;
           color: #86efac;
         }
 
-        .state-diff-viewer__arrow {
+        .sdv-arrow {
           color: #666;
+          font-size: 1.25rem;
         }
-      ` })
-  ] });
-}
-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)) })
+
+        .sdv-state-view {
+          padding: 1rem;
+        }
+
+        .sdv-state-actions {
+          margin-bottom: 1rem;
+        }
+
+        .sdv-copy-full {
+          padding: 0.5rem 1rem;
+          border: 1px solid #333;
+          background: #16213e;
+          color: #e0e0e0;
+          border-radius: 6px;
+          cursor: pointer;
+          font-size: 0.875rem;
+        }
+
+        .sdv-copy-full:hover {
+          background: #1f2b4d;
+        }
+
+        .sdv-raw-view {
+          padding: 1rem;
+        }
+
+        .sdv-raw-panels {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 1rem;
+        }
+
+        .sdv-raw-panel {
+          background: #0f0f23;
+          border-radius: 8px;
+          overflow: hidden;
+        }
+
+        .sdv-raw-panel h4 {
+          margin: 0;
+          padding: 0.75rem 1rem;
+          background: #16213e;
+          color: #00d9ff;
+          font-size: 0.875rem;
+        }
+
+        .sdv-raw-panel pre {
+          margin: 0;
+          padding: 1rem;
+          font-size: 0.8rem;
+          overflow: auto;
+          max-height: 300px;
+        }
+
+        /* State tree styles */
+        .state-tree__toggle {
+          cursor: pointer;
+          color: #888;
+          user-select: none;
+        }
+
+        .state-tree__toggle:hover {
+          color: #00d9ff;
+        }
+
+        .state-tree__children {
+          margin-left: 1.5rem;
+          border-left: 1px solid #333;
+          padding-left: 0.75rem;
+        }
+
+        .state-tree__item {
+          padding: 0.25rem 0;
+        }
+
+        .state-tree__key {
+          color: #a78bfa;
+          margin-right: 0.5rem;
+        }
+
+        .state-tree__null { color: #f472b6; font-style: italic; }
+        .state-tree__undefined { color: #ef4444; font-style: italic; }
+        .state-tree__boolean { color: #fb923c; }
+        .state-tree__number { color: #22c55e; }
+        .state-tree__string { color: #fbbf24; }
+        .state-tree__empty { color: #666; }
+        .state-tree--changed {
+          background: #fbbf2430;
+          padding: 0 0.25rem;
+          border-radius: 3px;
+        }
+
+        .state-tree__anomaly {
+          display: inline-block;
+          margin-left: 0.5rem;
+          padding: 0.125rem 0.375rem;
+          background: #ef444440;
+          border-radius: 3px;
+          font-size: 0.7rem;
+          color: #fca5a5;
+        }
+      ` })
+  ] });
+}
+function ValueDisplay({ value }) {
+  if (value === null) {
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__null", children: "null" });
+  }
+  if (value === void 0) {
+    return /* @__PURE__ */ jsxs("span", { className: "state-tree__undefined", children: [
+      "undefined",
+      /* @__PURE__ */ jsx("span", { className: "state-tree__anomaly", children: "\u26A0\uFE0F" })
+    ] });
+  }
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__boolean", children: String(value) });
+  }
+  if (typeof value === "number") {
+    if (isNaN(value)) {
+      return /* @__PURE__ */ jsxs("span", { className: "state-tree__undefined", children: [
+        "NaN",
+        /* @__PURE__ */ jsx("span", { className: "state-tree__anomaly", children: "\u26A0\uFE0F Bug!" })
+      ] });
+    }
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__number", children: String(value) });
+  }
+  if (typeof value === "string") {
+    if (value === "") {
+      return /* @__PURE__ */ jsx("span", { className: "state-tree__empty", children: '""' });
+    }
+    const display = value.length > 50 ? value.slice(0, 50) + "..." : value;
+    return /* @__PURE__ */ jsxs("span", { className: "state-tree__string", children: [
+      '"',
+      display,
+      '"'
+    ] });
+  }
+  if (Array.isArray(value)) {
+    return /* @__PURE__ */ jsxs("span", { className: "state-tree__empty", children: [
+      "[",
+      value.length,
+      " items]"
     ] });
   }
   if (typeof value === "object") {
-    const entries = Object.entries(value);
-    if (entries.length === 0) {
-      return /* @__PURE__ */ jsx("span", { className: "state-tree__empty", children: "{}" });
+    const keys = Object.keys(value);
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__empty", children: "{" + keys.length + " keys}" });
+  }
+  return /* @__PURE__ */ jsx("span", { children: String(value) });
+}
+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__ */ jsxs("span", { className: "state-tree__undefined", children: [
+      "undefined",
+      /* @__PURE__ */ jsx("span", { className: "state-tree__anomaly", children: "\u26A0\uFE0F" })
+    ] });
+  }
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__boolean", children: String(value) });
+  }
+  if (typeof value === "number") {
+    if (isNaN(value)) {
+      return /* @__PURE__ */ jsxs("span", { className: `state-tree__undefined ${isChanged ? "state-tree--changed" : ""}`, children: [
+        "NaN",
+        /* @__PURE__ */ jsx("span", { className: "state-tree__anomaly", children: "\u26A0\uFE0F BUG!" })
+      ] });
     }
-    return /* @__PURE__ */ jsxs("span", { className: "state-tree__object", children: [
+    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,
+      '"',
+      value === "" && /* @__PURE__ */ jsx("span", { className: "state-tree__anomaly", children: "empty" })
+    ] });
+  }
+  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",
-        " Object(",
-        entries.length,
+        " Array(",
+        value.length,
         ")"
       ] }),
-      isExpanded && /* @__PURE__ */ jsx("div", { className: "state-tree__children", children: entries.map(([key, val]) => /* @__PURE__ */ jsxs("div", { className: "state-tree__item", children: [
+      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: [
-          key,
+          index,
           ":"
         ] }),
         /* @__PURE__ */ jsx(
           StateTree,
           {
-            value: val,
-            path: path ? `${path}.${key}` : key,
+            value: item,
+            path: path ? `${path}[${index}]` : `[${index}]`,
             changedPaths,
             defaultExpandDepth,
             depth: depth + 1,
             changeType
           }
         )
-      ] }, key)) })
+      ] }, index)) })
     ] });
   }
-  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]";
+    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]) => {
+        const childPath = path ? `${path}.${key}` : key;
+        const childChanged = changedPaths.has(childPath);
+        return /* @__PURE__ */ jsxs("div", { className: "state-tree__item", children: [
+          /* @__PURE__ */ jsxs("span", { className: `state-tree__key ${childChanged ? "state-tree--changed" : ""}`, children: [
+            key,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx(
+            StateTree,
+            {
+              value: val,
+              path: childPath,
+              changedPaths,
+              defaultExpandDepth,
+              depth: depth + 1,
+              changeType
+            }
+          )
+        ] }, key);
+      }) })
+    ] });
   }
-  return String(value);
+  return /* @__PURE__ */ jsx("span", { children: String(value) });
 }
 var sourceColors = {
   react: "#61dafb",
@@ -608,6 +1061,15 @@ var sourceColors = {
   api: "#3b82f6",
   custom: "#6b7280"
 };
+var sourceEmojis = {
+  react: "\u269B\uFE0F",
+  redux: "\u{1F504}",
+  zustand: "\u{1F43B}",
+  express: "\u{1F682}",
+  websocket: "\u{1F50C}",
+  api: "\u{1F310}",
+  custom: "\u2699\uFE0F"
+};
 function TimelineScrubber({
   mutations,
   selectedIndex,
@@ -617,8 +1079,12 @@ function TimelineScrubber({
   onPause,
   onStepForward,
   onStepBackward,
+  playbackSpeed = 1,
+  onSpeedChange,
   className = ""
 }) {
+  const [filter, setFilter] = useState("all");
+  const [hoverIndex, setHoverIndex] = useState(null);
   const handleSliderChange = useCallback(
     (e) => {
       const index = parseInt(e.target.value, 10);
@@ -636,54 +1102,128 @@ function TimelineScrubber({
     },
     [mutations, onSelect]
   );
+  const sourceStats = useMemo(() => {
+    const stats = {};
+    for (const m of mutations) {
+      stats[m.source] = (stats[m.source] || 0) + 1;
+    }
+    return stats;
+  }, [mutations]);
+  useMemo(() => {
+    if (filter === "all") return mutations;
+    return mutations.filter((m) => m.source === filter);
+  }, [mutations, filter]);
+  const anomalyCount = useMemo(() => {
+    let count = 0;
+    for (const m of mutations) {
+      if (m.diff) {
+        for (const d of m.diff) {
+          if (d.newValue === void 0 || typeof d.newValue === "number" && isNaN(d.newValue)) {
+            count++;
+            break;
+          }
+        }
+      }
+    }
+    return count;
+  }, [mutations]);
   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
+      second: "2-digit"
     });
   };
+  const formatDuration = (ms) => {
+    if (!ms) return "";
+    if (ms < 1) return `${(ms * 1e3).toFixed(0)}\u03BCs`;
+    if (ms < 1e3) return `${ms.toFixed(0)}ms`;
+    return `${(ms / 1e3).toFixed(1)}s`;
+  };
   if (mutations.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: `timeline-scrubber timeline-scrubber--empty ${className}`, children: /* @__PURE__ */ jsx("p", { children: "No mutations recorded yet" }) });
+    return /* @__PURE__ */ jsx("div", { className: `timeline-scrubber timeline-scrubber--empty ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "ts-empty-state", children: [
+      /* @__PURE__ */ jsx("span", { className: "ts-empty-icon", children: "\u{1F4ED}" }),
+      /* @__PURE__ */ jsx("h3", { children: "No Mutations Yet" }),
+      /* @__PURE__ */ jsx("p", { children: "Start interacting with your app to capture state changes" })
+    ] }) });
   }
   const selectedMutation = mutations[selectedIndex];
+  const previewMutation = hoverIndex !== null ? mutations[hoverIndex] : selectedMutation;
   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"
+    /* @__PURE__ */ jsxs("div", { className: "ts-stats", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ts-stat-main", children: [
+        /* @__PURE__ */ jsx("span", { className: "ts-stat-value", children: mutations.length }),
+        /* @__PURE__ */ jsx("span", { className: "ts-stat-label", children: "mutations" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ts-stat-sources", children: Object.entries(sourceStats).map(([source, count]) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: `ts-source-badge ${filter === source ? "active" : ""}`,
+          style: { "--source-color": sourceColors[source] },
+          onClick: () => setFilter(filter === source ? "all" : source),
+          title: `${source}: ${count} mutations`,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "ts-source-emoji", children: sourceEmojis[source] }),
+            /* @__PURE__ */ jsx("span", { className: "ts-source-count", children: count })
+          ]
+        },
+        source
+      )) }),
+      anomalyCount > 0 && /* @__PURE__ */ jsxs("div", { className: "ts-anomaly-badge", children: [
+        "\u26A0\uFE0F ",
+        anomalyCount,
+        " issue",
+        anomalyCount > 1 ? "s" : ""
       ] }),
-      selectedMutation && /* @__PURE__ */ jsx("span", { className: "timeline-scrubber__time", children: formatTime(selectedMutation.timestamp) })
+      /* @__PURE__ */ jsxs("div", { className: "ts-position", children: [
+        /* @__PURE__ */ jsx("span", { className: "ts-current", children: selectedIndex + 1 }),
+        /* @__PURE__ */ jsx("span", { className: "ts-separator", children: "/" }),
+        /* @__PURE__ */ jsx("span", { className: "ts-total", children: mutations.length })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "timeline-scrubber__track", children: [
-      mutations.map((mutation, index) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "ts-chart", children: /* @__PURE__ */ jsxs("div", { className: "ts-chart-track", children: [
+      mutations.map((mutation, index) => {
+        const isSelected = index === selectedIndex;
+        const isHovered = index === hoverIndex;
+        const hasAnomaly = mutation.diff?.some(
+          (d) => d.newValue === void 0 || typeof d.newValue === "number" && isNaN(d.newValue)
+        );
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `ts-marker ${isSelected ? "selected" : ""} ${isHovered ? "hovered" : ""} ${hasAnomaly ? "anomaly" : ""}`,
+            style: {
+              left: `${index / Math.max(mutations.length - 1, 1) * 100}%`,
+              backgroundColor: sourceColors[mutation.source] || sourceColors.custom
+            },
+            onClick: () => handleMarkerClick(index),
+            onMouseEnter: () => setHoverIndex(index),
+            onMouseLeave: () => setHoverIndex(null)
+          },
+          mutation.id
+        );
+      }),
+      /* @__PURE__ */ jsx(
         "div",
         {
-          className: `timeline-scrubber__marker ${index === selectedIndex ? "timeline-scrubber__marker--selected" : ""}`,
+          className: "ts-progress",
           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
-      )),
+            width: `${selectedIndex / Math.max(mutations.length - 1, 1) * 100}%`
+          }
+        }
+      ),
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "timeline-scrubber__position",
+          className: "ts-cursor",
           style: {
-            left: `${selectedIndex / (mutations.length - 1 || 1) * 100}%`
+            left: `${selectedIndex / Math.max(mutations.length - 1, 1) * 100}%`
           }
         }
       )
-    ] }),
+    ] }) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -692,194 +1232,2118 @@ function TimelineScrubber({
         max: mutations.length - 1,
         value: selectedIndex,
         onChange: handleSliderChange,
-        className: "timeline-scrubber__slider"
+        className: "ts-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"
-        }
-      )
+    previewMutation && /* @__PURE__ */ jsxs("div", { className: "ts-preview", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ts-preview-header", children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "ts-preview-source",
+            style: { backgroundColor: sourceColors[previewMutation.source] },
+            children: [
+              sourceEmojis[previewMutation.source],
+              " ",
+              previewMutation.source
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ts-preview-action", children: previewMutation.actionType }),
+        previewMutation.duration && /* @__PURE__ */ jsx("span", { className: "ts-preview-duration", children: formatDuration(previewMutation.duration) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ts-preview-details", children: [
+        previewMutation.component && /* @__PURE__ */ jsx("span", { className: "ts-preview-component", children: previewMutation.component }),
+        /* @__PURE__ */ jsx("span", { className: "ts-preview-time", children: formatTime(previewMutation.timestamp) })
+      ] }),
+      previewMutation.diff && previewMutation.diff.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ts-preview-changes", children: [
+        previewMutation.diff.slice(0, 3).map((d, i) => /* @__PURE__ */ jsx("code", { className: `ts-preview-path ts-preview-${d.operation.toLowerCase()}`, children: d.path }, i)),
+        previewMutation.diff.length > 3 && /* @__PURE__ */ jsxs("span", { className: "ts-preview-more", children: [
+          "+",
+          previewMutation.diff.length - 3,
+          " more"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ts-controls", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ts-control-group", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onStepBackward,
+            disabled: selectedIndex === 0,
+            className: "ts-btn",
+            title: "Previous mutation (\u2190)",
+            children: "\u23EE\uFE0F"
+          }
+        ),
+        isPlaying ? /* @__PURE__ */ jsx("button", { onClick: onPause, className: "ts-btn ts-btn-primary", title: "Pause", children: "\u23F8\uFE0F" }) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onPlay,
+            disabled: selectedIndex === mutations.length - 1,
+            className: "ts-btn ts-btn-primary",
+            title: "Play through timeline",
+            children: "\u25B6\uFE0F"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onStepForward,
+            disabled: selectedIndex === mutations.length - 1,
+            className: "ts-btn",
+            title: "Next mutation (\u2192)",
+            children: "\u23ED\uFE0F"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ts-control-group", children: [
+        /* @__PURE__ */ jsx("label", { className: "ts-speed-label", children: "Speed:" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: playbackSpeed,
+            onChange: (e) => onSpeedChange?.(Number(e.target.value)),
+            className: "ts-speed-select",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: 0.5, children: "0.5x" }),
+              /* @__PURE__ */ jsx("option", { value: 1, children: "1x" }),
+              /* @__PURE__ */ jsx("option", { value: 2, children: "2x" }),
+              /* @__PURE__ */ jsx("option", { value: 4, children: "4x" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ts-control-group", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "ts-btn ts-btn-text",
+            onClick: () => onSelect(0, mutations[0]),
+            disabled: selectedIndex === 0,
+            children: "\u23EA Start"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "ts-btn ts-btn-text",
+            onClick: () => onSelect(mutations.length - 1, mutations[mutations.length - 1]),
+            disabled: selectedIndex === mutations.length - 1,
+            children: "End \u23E9"
+          }
+        )
+      ] })
     ] }),
-    /* @__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;
+          border-radius: 12px;
+          padding: 1.25rem;
           color: #fff;
         }
 
         .timeline-scrubber--empty {
-          text-align: center;
+          padding: 3rem;
+        }
+
+        .ts-empty-state {
+          text-align: center;
+        }
+
+        .ts-empty-icon {
+          font-size: 3rem;
+          display: block;
+          margin-bottom: 1rem;
+        }
+
+        .ts-empty-state h3 {
+          margin: 0 0 0.5rem;
           color: #888;
         }
 
-        .timeline-scrubber__header {
+        .ts-empty-state p {
+          margin: 0;
+          color: #666;
+          font-size: 0.875rem;
+        }
+
+        .ts-stats {
           display: flex;
-          justify-content: space-between;
-          margin-bottom: 0.5rem;
+          align-items: center;
+          gap: 1.5rem;
+          margin-bottom: 1rem;
+          flex-wrap: wrap;
+        }
+
+        .ts-stat-main {
+          display: flex;
+          align-items: baseline;
+          gap: 0.5rem;
+        }
+
+        .ts-stat-value {
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: #00d9ff;
+        }
+
+        .ts-stat-label {
+          font-size: 0.875rem;
+          color: #888;
+        }
+
+        .ts-stat-sources {
+          display: flex;
+          gap: 0.5rem;
+        }
+
+        .ts-source-badge {
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+          padding: 0.375rem 0.625rem;
+          border: 1px solid transparent;
+          border-radius: 20px;
+          background: var(--source-color, #666)20;
+          color: var(--source-color, #888);
+          cursor: pointer;
+          font-size: 0.75rem;
+          transition: all 0.2s;
+        }
+
+        .ts-source-badge:hover, .ts-source-badge.active {
+          background: var(--source-color, #666)40;
+          border-color: var(--source-color, #666);
+        }
+
+        .ts-source-emoji {
+          font-size: 0.875rem;
+        }
+
+        .ts-anomaly-badge {
+          padding: 0.375rem 0.75rem;
+          background: #ef444430;
+          color: #fca5a5;
+          border-radius: 20px;
+          font-size: 0.75rem;
+          font-weight: 600;
+        }
+
+        .ts-position {
+          margin-left: auto;
+          font-family: 'Fira Code', monospace;
           font-size: 0.875rem;
         }
 
-        .timeline-scrubber__count {
+        .ts-current {
           color: #00d9ff;
           font-weight: 600;
         }
 
-        .timeline-scrubber__time {
-          color: #888;
-          font-family: monospace;
+        .ts-separator {
+          color: #444;
+          margin: 0 0.25rem;
+        }
+
+        .ts-total {
+          color: #666;
+        }
+
+        .ts-chart {
+          margin-bottom: 0.5rem;
         }
 
-        .timeline-scrubber__track {
+        .ts-chart-track {
           position: relative;
-          height: 24px;
+          height: 32px;
           background: #16213e;
-          border-radius: 4px;
+          border-radius: 8px;
+          overflow: hidden;
+        }
+
+        .ts-progress {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          background: linear-gradient(90deg, #00d9ff20, #00d9ff10);
+          pointer-events: none;
+        }
+
+        .ts-cursor {
+          position: absolute;
+          top: 0;
+          width: 3px;
+          height: 100%;
+          background: #00d9ff;
+          border-radius: 1.5px;
+          pointer-events: none;
+          box-shadow: 0 0 10px #00d9ff80;
+        }
+
+        .ts-marker {
+          position: absolute;
+          width: 6px;
+          height: 16px;
+          top: 8px;
+          margin-left: -3px;
+          border-radius: 3px;
+          cursor: pointer;
+          opacity: 0.6;
+          transition: all 0.15s;
+        }
+
+        .ts-marker:hover, .ts-marker.hovered {
+          opacity: 1;
+          transform: scaleY(1.3);
+        }
+
+        .ts-marker.selected {
+          opacity: 1;
+          box-shadow: 0 0 8px currentColor;
+          transform: scaleY(1.4);
+        }
+
+        .ts-marker.anomaly {
+          border: 2px solid #ef4444;
+        }
+
+        .ts-slider {
+          width: 100%;
+          height: 4px;
+          margin: 0.5rem 0;
+          cursor: pointer;
+          -webkit-appearance: none;
+          background: transparent;
+        }
+
+        .ts-slider::-webkit-slider-runnable-track {
+          height: 4px;
+          background: #333;
+          border-radius: 2px;
+        }
+
+        .ts-slider::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          width: 16px;
+          height: 16px;
+          margin-top: -6px;
+          background: #00d9ff;
+          border-radius: 50%;
+          cursor: pointer;
+        }
+
+        .ts-preview {
+          margin: 1rem 0;
+          padding: 1rem;
+          background: #16213e;
+          border-radius: 8px;
+          border-left: 3px solid #00d9ff;
+        }
+
+        .ts-preview-header {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
           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;
-        }
+        .ts-preview-source {
+          padding: 0.25rem 0.5rem;
+          border-radius: 4px;
+          font-size: 0.75rem;
+          font-weight: 600;
+          color: #000;
+        }
+
+        .ts-preview-action {
+          font-weight: 600;
+          color: #e0e0e0;
+        }
+
+        .ts-preview-duration {
+          margin-left: auto;
+          font-size: 0.75rem;
+          color: #888;
+          font-family: 'Fira Code', monospace;
+        }
+
+        .ts-preview-details {
+          display: flex;
+          gap: 1rem;
+          font-size: 0.875rem;
+          color: #888;
+        }
+
+        .ts-preview-component {
+          color: #a78bfa;
+        }
+
+        .ts-preview-changes {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+          margin-top: 0.75rem;
+        }
+
+        .ts-preview-path {
+          padding: 0.25rem 0.5rem;
+          border-radius: 4px;
+          font-size: 0.75rem;
+        }
+
+        .ts-preview-add { background: #22c55e20; color: #86efac; }
+        .ts-preview-update { background: #fbbf2420; color: #fcd34d; }
+        .ts-preview-remove { background: #ef444420; color: #fca5a5; }
+
+        .ts-preview-more {
+          font-size: 0.75rem;
+          color: #666;
+          padding: 0.25rem;
+        }
+
+        .ts-controls {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 1.5rem;
+          padding-top: 0.5rem;
+          flex-wrap: wrap;
+        }
+
+        .ts-control-group {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+
+        .ts-btn {
+          padding: 0.5rem 0.75rem;
+          border: none;
+          border-radius: 8px;
+          background: #16213e;
+          color: #fff;
+          cursor: pointer;
+          font-size: 1rem;
+          transition: all 0.2s;
+        }
+
+        .ts-btn:hover:not(:disabled) {
+          background: #1f2b4d;
+        }
+
+        .ts-btn:disabled {
+          opacity: 0.4;
+          cursor: not-allowed;
+        }
+
+        .ts-btn-primary {
+          background: #00d9ff;
+          color: #000;
+        }
+
+        .ts-btn-primary:hover:not(:disabled) {
+          background: #00b8e6;
+        }
+
+        .ts-btn-text {
+          background: transparent;
+          color: #888;
+          font-size: 0.875rem;
+        }
+
+        .ts-btn-text:hover:not(:disabled) {
+          color: #fff;
+          background: transparent;
+        }
+
+        .ts-speed-label {
+          font-size: 0.875rem;
+          color: #888;
+        }
+
+        .ts-speed-select {
+          padding: 0.375rem 0.5rem;
+          border: 1px solid #333;
+          border-radius: 6px;
+          background: #16213e;
+          color: #e0e0e0;
+          font-size: 0.875rem;
+          cursor: pointer;
+        }
+      ` })
+  ] });
+}
+
+// src/core/analyzer.ts
+var StateAnalyzer = class {
+  constructor() {
+    this.invariants = [];
+    this.updateTimestamps = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Register custom invariant rules
+   */
+  addInvariant(invariant) {
+    this.invariants.push(invariant);
+  }
+  /**
+   * Analyze a single mutation for issues
+   */
+  analyzeMutation(mutation, index, timeline) {
+    const issues = [];
+    if (mutation.diff) {
+      for (const diff of mutation.diff) {
+        if (diff.operation === "REMOVE") {
+          issues.push({
+            id: `issue_${mutation.id}_${diff.path}_loss`,
+            category: "state-loss",
+            severity: "critical",
+            title: `State field removed: ${diff.path}`,
+            description: `The field "${diff.path}" was removed from state. This may indicate an overwrite instead of a merge.`,
+            mutationId: mutation.id,
+            mutationIndex: index,
+            path: diff.path,
+            previousValue: diff.oldValue,
+            currentValue: void 0,
+            suggestion: "Use spread operator to preserve existing fields: setState(prev => ({ ...prev, newField }))",
+            timestamp: mutation.timestamp
+          });
+        }
+        if (diff.operation !== "REMOVE") {
+          const invalidIssue = this.checkInvalidValue(diff, mutation, index);
+          if (invalidIssue) {
+            issues.push(invalidIssue);
+          }
+        }
+        if (diff.operation === "UPDATE") {
+          const typeIssue = this.checkTypeChange(diff, mutation, index);
+          if (typeIssue) {
+            issues.push(typeIssue);
+          }
+        }
+      }
+    }
+    if (this.isNoOpUpdate(mutation)) {
+      issues.push({
+        id: `issue_${mutation.id}_noop`,
+        category: "no-op-update",
+        severity: "info",
+        title: "Redundant state update",
+        description: "This mutation did not change any values. Consider memoizing or adding conditions.",
+        mutationId: mutation.id,
+        mutationIndex: index,
+        suggestion: "Add a condition before updating: if (newValue !== currentValue) setState(newValue)",
+        timestamp: mutation.timestamp
+      });
+    }
+    const excessiveIssue = this.checkExcessiveUpdates(mutation, index);
+    if (excessiveIssue) {
+      issues.push(excessiveIssue);
+    }
+    for (const invariant of this.invariants) {
+      const violation = this.checkInvariant(invariant, mutation, index);
+      if (violation) {
+        issues.push(violation);
+      }
+    }
+    return issues;
+  }
+  /**
+   * Check for invalid values (NaN, unexpected undefined/null)
+   */
+  checkInvalidValue(diff, mutation, index) {
+    const value = diff.newValue;
+    if (typeof value === "number" && isNaN(value)) {
+      return {
+        id: `issue_${mutation.id}_${diff.path}_nan`,
+        category: "invalid-value",
+        severity: "critical",
+        title: `NaN value at: ${diff.path}`,
+        description: `The value at "${diff.path}" became NaN. This usually indicates a calculation with undefined/null.`,
+        mutationId: mutation.id,
+        mutationIndex: index,
+        path: diff.path,
+        previousValue: diff.oldValue,
+        currentValue: value,
+        suggestion: "Check for undefined/null values before calculation. Use default values: (value ?? 0)",
+        timestamp: mutation.timestamp
+      };
+    }
+    if (value === void 0 && diff.oldValue !== void 0 && diff.operation === "UPDATE") {
+      return {
+        id: `issue_${mutation.id}_${diff.path}_undefined`,
+        category: "invalid-value",
+        severity: "critical",
+        title: `Value became undefined: ${diff.path}`,
+        description: `The field "${diff.path}" changed from a defined value to undefined.`,
+        mutationId: mutation.id,
+        mutationIndex: index,
+        path: diff.path,
+        previousValue: diff.oldValue,
+        currentValue: void 0,
+        suggestion: "Ensure the value is always defined or explicitly handle undefined cases.",
+        timestamp: mutation.timestamp
+      };
+    }
+    return null;
+  }
+  /**
+   * Check for unexpected type changes
+   */
+  checkTypeChange(diff, mutation, index) {
+    if (diff.oldValue === void 0 || diff.oldValue === null) return null;
+    if (diff.newValue === void 0 || diff.newValue === null) return null;
+    const oldType = typeof diff.oldValue;
+    const newType = typeof diff.newValue;
+    if (oldType !== newType) {
+      return {
+        id: `issue_${mutation.id}_${diff.path}_type`,
+        category: "type-change",
+        severity: "warning",
+        title: `Type changed: ${diff.path}`,
+        description: `The type of "${diff.path}" changed from ${oldType} to ${newType}.`,
+        mutationId: mutation.id,
+        mutationIndex: index,
+        path: diff.path,
+        previousValue: diff.oldValue,
+        currentValue: diff.newValue,
+        suggestion: "Ensure consistent types. Use TypeScript or runtime validation.",
+        timestamp: mutation.timestamp
+      };
+    }
+    return null;
+  }
+  /**
+   * Check if mutation is a no-op (no actual changes)
+   */
+  isNoOpUpdate(mutation) {
+    if (!mutation.diff || mutation.diff.length === 0) {
+      return true;
+    }
+    return mutation.diff.every((d) => {
+      if (d.operation !== "UPDATE") return false;
+      return JSON.stringify(d.oldValue) === JSON.stringify(d.newValue);
+    });
+  }
+  /**
+   * Check for excessive updates in short time period
+   */
+  checkExcessiveUpdates(mutation, index) {
+    const key = mutation.component || mutation.source;
+    const timestamps = this.updateTimestamps.get(key) || [];
+    timestamps.push(mutation.timestamp);
+    const cutoff = mutation.timestamp - 100;
+    const recentTimestamps = timestamps.filter((t) => t >= cutoff);
+    this.updateTimestamps.set(key, recentTimestamps);
+    if (recentTimestamps.length > 5) {
+      return {
+        id: `issue_${mutation.id}_excessive`,
+        category: "excessive-updates",
+        severity: "warning",
+        title: `Excessive updates from: ${key}`,
+        description: `${recentTimestamps.length} mutations in 100ms from "${key}". This may cause performance issues.`,
+        mutationId: mutation.id,
+        mutationIndex: index,
+        suggestion: "Use debouncing, batching, or memoization to reduce update frequency.",
+        timestamp: mutation.timestamp
+      };
+    }
+    return null;
+  }
+  /**
+   * Check custom invariant rule
+   */
+  checkInvariant(invariant, mutation, index) {
+    if (!mutation.nextState) return null;
+    const value = getValueAtPath(mutation.nextState, invariant.path);
+    try {
+      const isValid = invariant.rule(value);
+      if (!isValid) {
+        return {
+          id: `issue_${mutation.id}_invariant_${invariant.name}`,
+          category: "broken-invariant",
+          severity: "critical",
+          title: `Invariant violated: ${invariant.name}`,
+          description: invariant.message,
+          mutationId: mutation.id,
+          mutationIndex: index,
+          path: invariant.path,
+          currentValue: value,
+          suggestion: `Ensure the invariant "${invariant.name}" is always maintained.`,
+          timestamp: mutation.timestamp
+        };
+      }
+    } catch (e) {
+      return null;
+    }
+    return null;
+  }
+  /**
+   * Analyze entire timeline for issues
+   */
+  analyzeTimeline(timeline) {
+    const allIssues = [];
+    this.updateTimestamps.clear();
+    for (let i = 0; i < timeline.length; i++) {
+      const issues = this.analyzeMutation(timeline[i], i, timeline);
+      allIssues.push(...issues);
+    }
+    return allIssues;
+  }
+  /**
+   * Build dependency graph showing which components touch which state paths
+   */
+  buildDependencyGraph(timeline) {
+    const nodes = /* @__PURE__ */ new Map();
+    for (const mutation of timeline) {
+      if (!mutation.diff) continue;
+      const component = mutation.component || mutation.source || "unknown";
+      for (const diff of mutation.diff) {
+        const existing = nodes.get(diff.path);
+        if (existing) {
+          existing.components.add(component);
+          existing.mutationCount++;
+          existing.lastMutationId = mutation.id;
+        } else {
+          nodes.set(diff.path, {
+            path: diff.path,
+            components: /* @__PURE__ */ new Set([component]),
+            mutationCount: 1,
+            lastMutationId: mutation.id
+          });
+        }
+      }
+    }
+    const couplings = [];
+    for (const [path, node] of nodes) {
+      if (node.components.size > 1) {
+        couplings.push({
+          path,
+          components: Array.from(node.components),
+          severity: node.components.size > 2 ? "critical" : "warning"
+        });
+      }
+    }
+    return { nodes, couplings };
+  }
+  /**
+   * Find causal chain - which mutations caused downstream effects
+   */
+  findCausalChain(mutationId, timeline) {
+    const rootIndex = timeline.findIndex((m) => m.id === mutationId);
+    if (rootIndex === -1) return null;
+    const root = timeline[rootIndex];
+    const effects = [];
+    if (!root.diff) return { rootMutation: root, effects };
+    const changedPaths = new Set(root.diff.map((d) => d.path));
+    for (let i = rootIndex + 1; i < timeline.length; i++) {
+      const mutation = timeline[i];
+      if (!mutation.diff) continue;
+      for (const diff of mutation.diff) {
+        for (const changedPath of changedPaths) {
+          if (diff.path.startsWith(changedPath) || changedPath.startsWith(diff.path)) {
+            effects.push({
+              mutation,
+              causedBy: root.id,
+              reason: `Uses path "${diff.path}" which was affected by "${changedPath}"`
+            });
+            break;
+          }
+        }
+      }
+    }
+    return { rootMutation: root, effects };
+  }
+  /**
+   * Find the first mutation that corrupted state
+   * Uses binary search for efficiency
+   */
+  findCorruptionPoint(timeline, validator) {
+    let left = 0;
+    let right = timeline.length - 1;
+    let result = null;
+    while (left <= right) {
+      const mid = Math.floor((left + right) / 2);
+      const mutation = timeline[mid];
+      if (mutation.nextState && !validator(mutation.nextState)) {
+        result = { mutation, index: mid };
+        right = mid - 1;
+      } else {
+        left = mid + 1;
+      }
+    }
+    return result;
+  }
+};
+function getValueAtPath(obj, path) {
+  if (!path) return obj;
+  const parts = path.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === void 0) return void 0;
+    if (typeof current !== "object") return void 0;
+    current = current[part];
+  }
+  return current;
+}
+function DependencyGraph({
+  graph,
+  onPathSelect,
+  selectedPath,
+  className = ""
+}) {
+  const [viewMode, setViewMode] = useState("couplings");
+  const [hoveredPath, setHoveredPath] = useState(null);
+  const sortedNodes = useMemo(() => {
+    const nodes = Array.from(graph.nodes.values());
+    return nodes.sort((a, b) => b.mutationCount - a.mutationCount);
+  }, [graph.nodes]);
+  const allComponents = useMemo(() => {
+    const components = /* @__PURE__ */ new Set();
+    for (const node of graph.nodes.values()) {
+      for (const c of node.components) {
+        components.add(c);
+      }
+    }
+    return Array.from(components);
+  }, [graph.nodes]);
+  const componentColors = useMemo(() => {
+    const colors = {};
+    const palette = [
+      "#61dafb",
+      "#764abc",
+      "#f59e0b",
+      "#22c55e",
+      "#ef4444",
+      "#a78bfa",
+      "#f472b6",
+      "#06b6d4",
+      "#84cc16",
+      "#f97316"
+    ];
+    allComponents.forEach((comp, i) => {
+      colors[comp] = palette[i % palette.length];
+    });
+    return colors;
+  }, [allComponents]);
+  const handlePathClick = useCallback((path) => {
+    onPathSelect?.(path);
+  }, [onPathSelect]);
+  const displayNodes = viewMode === "couplings" ? sortedNodes.filter((n) => n.components.size > 1) : sortedNodes;
+  return /* @__PURE__ */ jsxs("div", { className: `dependency-graph ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "dg-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "dg-title", children: "\u{1F517} State Dependencies" }),
+      /* @__PURE__ */ jsxs("div", { className: "dg-controls", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `dg-view-btn ${viewMode === "couplings" ? "active" : ""}`,
+            onClick: () => setViewMode("couplings"),
+            children: [
+              "\u26A0\uFE0F Couplings Only (",
+              graph.couplings.length,
+              ")"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `dg-view-btn ${viewMode === "all" ? "active" : ""}`,
+            onClick: () => setViewMode("all"),
+            children: [
+              "\u{1F4CA} All Paths (",
+              graph.nodes.size,
+              ")"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "dg-legend", children: allComponents.map((comp) => /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "dg-legend-item",
+        style: { "--comp-color": componentColors[comp] },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "dg-legend-dot" }),
+          comp
+        ]
+      },
+      comp
+    )) }),
+    graph.couplings.length > 0 && viewMode === "couplings" && /* @__PURE__ */ jsxs("div", { className: "dg-alert", children: [
+      /* @__PURE__ */ jsx("span", { className: "dg-alert-icon", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ jsxs("div", { className: "dg-alert-content", children: [
+        /* @__PURE__ */ jsx("strong", { children: "Hidden State Coupling Detected" }),
+        /* @__PURE__ */ jsxs("p", { children: [
+          graph.couplings.length,
+          " state path",
+          graph.couplings.length > 1 ? "s are" : " is",
+          " accessed by multiple components. This can cause unexpected state conflicts."
+        ] })
+      ] })
+    ] }),
+    displayNodes.length === 0 && /* @__PURE__ */ jsxs("div", { className: "dg-empty", children: [
+      /* @__PURE__ */ jsx("span", { className: "dg-empty-icon", children: "\u2705" }),
+      /* @__PURE__ */ jsx("p", { children: "No state coupling detected" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "dg-paths", children: displayNodes.map((node) => {
+      const isCoupled = node.components.size > 1;
+      const coupling = graph.couplings.find((c) => c.path === node.path);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `dg-path ${isCoupled ? "dg-path--coupled" : ""} ${selectedPath === node.path ? "selected" : ""} ${hoveredPath === node.path ? "hovered" : ""}`,
+          onClick: () => handlePathClick(node.path),
+          onMouseEnter: () => setHoveredPath(node.path),
+          onMouseLeave: () => setHoveredPath(null),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "dg-path-header", children: [
+              /* @__PURE__ */ jsx("code", { className: "dg-path-name", children: node.path }),
+              /* @__PURE__ */ jsxs("span", { className: "dg-path-count", children: [
+                node.mutationCount,
+                " mutation",
+                node.mutationCount > 1 ? "s" : ""
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "dg-path-components", children: Array.from(node.components).map((comp) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "dg-component-tag",
+                style: {
+                  backgroundColor: componentColors[comp] + "30",
+                  borderColor: componentColors[comp],
+                  color: componentColors[comp]
+                },
+                children: comp
+              },
+              comp
+            )) }),
+            isCoupled && coupling && /* @__PURE__ */ jsxs("div", { className: `dg-coupling-warning dg-coupling-${coupling.severity}`, children: [
+              /* @__PURE__ */ jsx("span", { className: "dg-warning-icon", children: coupling.severity === "critical" ? "\u{1F534}" : "\u{1F7E1}" }),
+              /* @__PURE__ */ jsxs("span", { className: "dg-warning-text", children: [
+                coupling.components.length,
+                " components access this path"
+              ] })
+            ] })
+          ]
+        },
+        node.path
+      );
+    }) }),
+    displayNodes.length > 0 && displayNodes.length <= 20 && /* @__PURE__ */ jsxs("div", { className: "dg-visual", children: [
+      /* @__PURE__ */ jsx("div", { className: "dg-visual-title", children: "Dependency Visualization" }),
+      /* @__PURE__ */ jsxs("svg", { className: "dg-svg", viewBox: "0 0 400 300", children: [
+        allComponents.map((comp, i) => {
+          const x = 50 + i * (350 / Math.max(allComponents.length, 1));
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: x,
+                cy: 40,
+                r: 20,
+                fill: componentColors[comp],
+                opacity: 0.8
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x,
+                y: 75,
+                textAnchor: "middle",
+                fill: "#888",
+                fontSize: "10",
+                children: comp.length > 10 ? comp.slice(0, 10) + "..." : comp
+              }
+            )
+          ] }, comp);
+        }),
+        displayNodes.slice(0, 8).map((node, i) => {
+          const x = 50 + i * (350 / Math.max(displayNodes.length, 1));
+          const isCoupled = node.components.size > 1;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            Array.from(node.components).map((comp) => {
+              const compIndex = allComponents.indexOf(comp);
+              const compX = 50 + compIndex * (350 / Math.max(allComponents.length, 1));
+              return /* @__PURE__ */ jsx(
+                "line",
+                {
+                  x1: compX,
+                  y1: 60,
+                  x2: x,
+                  y2: 180,
+                  stroke: componentColors[comp],
+                  strokeWidth: isCoupled ? 2 : 1,
+                  opacity: isCoupled ? 0.8 : 0.3
+                },
+                comp
+              );
+            }),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: x - 25,
+                y: 180,
+                width: 50,
+                height: 24,
+                rx: 4,
+                fill: isCoupled ? "#ef444430" : "#16213e",
+                stroke: isCoupled ? "#ef4444" : "#333"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x,
+                y: 196,
+                textAnchor: "middle",
+                fill: isCoupled ? "#fca5a5" : "#888",
+                fontSize: "8",
+                children: node.path.length > 8 ? node.path.slice(-8) : node.path
+              }
+            )
+          ] }, node.path);
+        }),
+        displayNodes.length > 8 && /* @__PURE__ */ jsxs("text", { x: 200, y: 250, textAnchor: "middle", fill: "#666", fontSize: "12", children: [
+          "+",
+          displayNodes.length - 8,
+          " more paths..."
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: styles })
+  ] });
+}
+var styles = `
+  .dependency-graph {
+    background: #1a1a2e;
+    color: #e0e0e0;
+    font-family: system-ui, sans-serif;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dg-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: #16213e;
+    border-bottom: 1px solid #333;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .dg-title {
+    font-weight: 600;
+    color: #00d9ff;
+  }
+
+  .dg-controls {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .dg-view-btn {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid #333;
+    border-radius: 6px;
+    background: transparent;
+    color: #888;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .dg-view-btn:hover {
+    background: #16213e;
+    color: #ccc;
+  }
+
+  .dg-view-btn.active {
+    background: #00d9ff20;
+    border-color: #00d9ff;
+    color: #00d9ff;
+  }
+
+  .dg-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background: #0f0f23;
+    border-bottom: 1px solid #333;
+  }
+
+  .dg-legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.8rem;
+    color: #888;
+  }
+
+  .dg-legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--comp-color);
+  }
+
+  .dg-alert {
+    display: flex;
+    gap: 0.75rem;
+    padding: 1rem;
+    margin: 0.75rem;
+    background: #ef444420;
+    border: 1px solid #ef4444;
+    border-radius: 8px;
+  }
+
+  .dg-alert-icon {
+    font-size: 1.25rem;
+  }
+
+  .dg-alert-content strong {
+    color: #fca5a5;
+    display: block;
+    margin-bottom: 0.25rem;
+  }
+
+  .dg-alert-content p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: #ccc;
+  }
+
+  .dg-empty {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #888;
+  }
+
+  .dg-empty-icon {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .dg-paths {
+    flex: 1;
+    overflow: auto;
+    padding: 0.75rem;
+  }
+
+  .dg-path {
+    background: #16213e;
+    border-radius: 8px;
+    padding: 0.875rem 1rem;
+    margin-bottom: 0.625rem;
+    cursor: pointer;
+    border: 1px solid transparent;
+    transition: all 0.2s;
+  }
+
+  .dg-path:hover, .dg-path.hovered {
+    border-color: #333;
+    background: #1a2744;
+  }
+
+  .dg-path.selected {
+    border-color: #00d9ff;
+    box-shadow: 0 0 0 2px #00d9ff30;
+  }
+
+  .dg-path--coupled {
+    border-left: 3px solid #ef4444;
+  }
+
+  .dg-path-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .dg-path-name {
+    font-family: 'Fira Code', monospace;
+    color: #a78bfa;
+    font-size: 0.875rem;
+  }
+
+  .dg-path-count {
+    font-size: 0.75rem;
+    color: #666;
+  }
+
+  .dg-path-components {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
+
+  .dg-component-tag {
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    border: 1px solid;
+  }
+
+  .dg-coupling-warning {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin-top: 0.625rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+  }
+
+  .dg-coupling-critical {
+    background: #ef444420;
+    color: #fca5a5;
+  }
+
+  .dg-coupling-warning {
+    background: #fbbf2420;
+    color: #fcd34d;
+  }
+
+  .dg-visual {
+    padding: 1rem;
+    border-top: 1px solid #333;
+  }
+
+  .dg-visual-title {
+    font-size: 0.8rem;
+    color: #888;
+    margin-bottom: 0.5rem;
+  }
+
+  .dg-svg {
+    width: 100%;
+    max-height: 200px;
+    background: #0f0f23;
+    border-radius: 8px;
+  }
+`;
+var severityIcons = {
+  critical: "\u{1F534}",
+  warning: "\u{1F7E1}",
+  info: "\u{1F7E2}"
+};
+var categoryIcons = {
+  "state-loss": "\u{1F4E4}",
+  "invalid-value": "\u26A0\uFE0F",
+  "type-change": "\u{1F504}",
+  "no-op-update": "\u267B\uFE0F",
+  "excessive-updates": "\u26A1",
+  "broken-invariant": "\u{1F6AB}",
+  "hidden-coupling": "\u{1F517}",
+  "temporal-anomaly": "\u23F0",
+  "state-corruption": "\u{1F4A5}"
+};
+var categoryLabels = {
+  "state-loss": "State Loss",
+  "invalid-value": "Invalid Value",
+  "type-change": "Type Change",
+  "no-op-update": "Redundant Update",
+  "excessive-updates": "Excessive Updates",
+  "broken-invariant": "Broken Invariant",
+  "hidden-coupling": "Hidden Coupling",
+  "temporal-anomaly": "Temporal Anomaly",
+  "state-corruption": "State Corruption"
+};
+function IssuesPanel({
+  issues,
+  onJumpToMutation,
+  onSelectIssue,
+  selectedIssueId,
+  className = ""
+}) {
+  const [severityFilter, setSeverityFilter] = useState("all");
+  const [categoryFilter, setCategoryFilter] = useState("all");
+  const [expandedIssue, setExpandedIssue] = useState(null);
+  const filteredIssues = useMemo(() => {
+    return issues.filter((issue) => {
+      if (severityFilter !== "all" && issue.severity !== severityFilter) return false;
+      if (categoryFilter !== "all" && issue.category !== categoryFilter) return false;
+      return true;
+    });
+  }, [issues, severityFilter, categoryFilter]);
+  const issueSummary = useMemo(() => {
+    const summary = { critical: 0, warning: 0, info: 0 };
+    for (const issue of issues) {
+      summary[issue.severity]++;
+    }
+    return summary;
+  }, [issues]);
+  const availableCategories = useMemo(() => {
+    return Array.from(new Set(issues.map((i) => i.category)));
+  }, [issues]);
+  const handleIssueClick = (issue) => {
+    if (expandedIssue === issue.id) {
+      setExpandedIssue(null);
+    } else {
+      setExpandedIssue(issue.id);
+      onSelectIssue?.(issue);
+    }
+  };
+  if (issues.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: `issues-panel issues-panel--empty ${className}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ip-empty", children: [
+        /* @__PURE__ */ jsx("span", { className: "ip-empty-icon", children: "\u2705" }),
+        /* @__PURE__ */ jsx("h3", { children: "No Issues Detected" }),
+        /* @__PURE__ */ jsx("p", { children: "Your state timeline looks clean!" })
+      ] }),
+      /* @__PURE__ */ jsx("style", { children: styles2 })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `issues-panel ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ip-summary", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ip-summary-title", children: [
+        /* @__PURE__ */ jsx("span", { className: "ip-summary-icon", children: "\u{1F6A8}" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          issues.length,
+          " Issue",
+          issues.length !== 1 ? "s" : "",
+          " Detected"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ip-summary-counts", children: [
+        issueSummary.critical > 0 && /* @__PURE__ */ jsxs("span", { className: "ip-count ip-count--critical", children: [
+          severityIcons.critical,
+          " ",
+          issueSummary.critical
+        ] }),
+        issueSummary.warning > 0 && /* @__PURE__ */ jsxs("span", { className: "ip-count ip-count--warning", children: [
+          severityIcons.warning,
+          " ",
+          issueSummary.warning
+        ] }),
+        issueSummary.info > 0 && /* @__PURE__ */ jsxs("span", { className: "ip-count ip-count--info", children: [
+          severityIcons.info,
+          " ",
+          issueSummary.info
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ip-filters", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: severityFilter,
+          onChange: (e) => setSeverityFilter(e.target.value),
+          className: "ip-filter",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "all", children: "All Severities" }),
+            /* @__PURE__ */ jsx("option", { value: "critical", children: "\u{1F534} Critical" }),
+            /* @__PURE__ */ jsx("option", { value: "warning", children: "\u{1F7E1} Warning" }),
+            /* @__PURE__ */ jsx("option", { value: "info", children: "\u{1F7E2} Info" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: categoryFilter,
+          onChange: (e) => setCategoryFilter(e.target.value),
+          className: "ip-filter",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "all", children: "All Categories" }),
+            availableCategories.map((cat) => /* @__PURE__ */ jsxs("option", { value: cat, children: [
+              categoryIcons[cat],
+              " ",
+              categoryLabels[cat]
+            ] }, cat))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ip-list", children: filteredIssues.map((issue) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `ip-issue ip-issue--${issue.severity} ${selectedIssueId === issue.id ? "selected" : ""} ${expandedIssue === issue.id ? "expanded" : ""}`,
+        onClick: () => handleIssueClick(issue),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "ip-issue-header", children: [
+            /* @__PURE__ */ jsx("span", { className: "ip-issue-severity", children: severityIcons[issue.severity] }),
+            /* @__PURE__ */ jsx("span", { className: "ip-issue-category", children: categoryIcons[issue.category] }),
+            /* @__PURE__ */ jsx("span", { className: "ip-issue-title", children: issue.title }),
+            /* @__PURE__ */ jsxs("span", { className: "ip-issue-index", children: [
+              "#",
+              issue.mutationIndex + 1
+            ] })
+          ] }),
+          expandedIssue === issue.id && /* @__PURE__ */ jsxs("div", { className: "ip-issue-details", children: [
+            /* @__PURE__ */ jsx("p", { className: "ip-issue-description", children: issue.description }),
+            issue.path && /* @__PURE__ */ jsxs("div", { className: "ip-issue-field", children: [
+              /* @__PURE__ */ jsx("span", { className: "ip-field-label", children: "Path:" }),
+              /* @__PURE__ */ jsx("code", { className: "ip-field-value", children: issue.path })
+            ] }),
+            issue.previousValue !== void 0 && /* @__PURE__ */ jsxs("div", { className: "ip-issue-field", children: [
+              /* @__PURE__ */ jsx("span", { className: "ip-field-label", children: "Before:" }),
+              /* @__PURE__ */ jsx("code", { className: "ip-field-value ip-value-old", children: formatValue(issue.previousValue) })
+            ] }),
+            issue.currentValue !== void 0 && /* @__PURE__ */ jsxs("div", { className: "ip-issue-field", children: [
+              /* @__PURE__ */ jsx("span", { className: "ip-field-label", children: "After:" }),
+              /* @__PURE__ */ jsx("code", { className: `ip-field-value ip-value-new ${issue.severity === "critical" ? "ip-value-bad" : ""}`, children: formatValue(issue.currentValue) })
+            ] }),
+            issue.suggestion && /* @__PURE__ */ jsxs("div", { className: "ip-issue-suggestion", children: [
+              /* @__PURE__ */ jsx("span", { className: "ip-suggestion-icon", children: "\u{1F4A1}" }),
+              /* @__PURE__ */ jsx("span", { children: issue.suggestion })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "ip-issue-actions", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "ip-action-btn",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onJumpToMutation(issue.mutationId, issue.mutationIndex);
+                },
+                children: "\u{1F3AF} Jump to Mutation"
+              }
+            ) })
+          ] })
+        ]
+      },
+      issue.id
+    )) }),
+    /* @__PURE__ */ jsx("style", { children: styles2 })
+  ] });
+}
+function formatValue(value) {
+  if (value === void 0) return "undefined";
+  if (value === null) return "null";
+  if (typeof value === "number" && isNaN(value)) return "NaN";
+  if (typeof value === "object") {
+    const str = JSON.stringify(value);
+    return str.length > 50 ? str.slice(0, 50) + "..." : str;
+  }
+  return String(value);
+}
+var styles2 = `
+  .issues-panel {
+    background: #1a1a2e;
+    color: #e0e0e0;
+    font-family: system-ui, sans-serif;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .issues-panel--empty {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ip-empty {
+    text-align: center;
+    padding: 3rem;
+  }
+
+  .ip-empty-icon {
+    font-size: 4rem;
+    display: block;
+    margin-bottom: 1rem;
+  }
+
+  .ip-empty h3 {
+    margin: 0 0 0.5rem;
+    color: #22c55e;
+  }
+
+  .ip-empty p {
+    margin: 0;
+    color: #888;
+  }
+
+  .ip-summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.25rem;
+    background: linear-gradient(135deg, #ef444420, #fbbf2410);
+    border-bottom: 1px solid #333;
+  }
+
+  .ip-summary-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    color: #fca5a5;
+  }
+
+  .ip-summary-icon {
+    font-size: 1.25rem;
+  }
+
+  .ip-summary-counts {
+    display: flex;
+    gap: 0.75rem;
+  }
+
+  .ip-count {
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .ip-count--critical { background: #ef444430; color: #fca5a5; }
+  .ip-count--warning { background: #fbbf2430; color: #fcd34d; }
+  .ip-count--info { background: #22c55e30; color: #86efac; }
+
+  .ip-filters {
+    display: flex;
+    gap: 0.75rem;
+    padding: 0.75rem 1.25rem;
+    background: #16213e;
+    border-bottom: 1px solid #333;
+  }
+
+  .ip-filter {
+    flex: 1;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #333;
+    border-radius: 6px;
+    background: #0f0f23;
+    color: #e0e0e0;
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+
+  .ip-list {
+    flex: 1;
+    overflow: auto;
+    padding: 0.75rem;
+  }
+
+  .ip-issue {
+    background: #16213e;
+    border-radius: 8px;
+    margin-bottom: 0.75rem;
+    border-left: 4px solid;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .ip-issue:hover {
+    background: #1a2744;
+  }
+
+  .ip-issue--critical { border-left-color: #ef4444; }
+  .ip-issue--warning { border-left-color: #fbbf24; }
+  .ip-issue--info { border-left-color: #22c55e; }
+
+  .ip-issue.selected {
+    box-shadow: 0 0 0 2px #00d9ff40;
+  }
+
+  .ip-issue-header {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.875rem 1rem;
+  }
+
+  .ip-issue-severity {
+    font-size: 0.875rem;
+  }
+
+  .ip-issue-category {
+    font-size: 1rem;
+  }
+
+  .ip-issue-title {
+    flex: 1;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .ip-issue-index {
+    font-size: 0.75rem;
+    color: #666;
+    font-family: 'Fira Code', monospace;
+  }
+
+  .ip-issue-details {
+    padding: 0 1rem 1rem;
+    border-top: 1px solid #333;
+    margin-top: 0.5rem;
+    padding-top: 0.75rem;
+  }
+
+  .ip-issue-description {
+    margin: 0 0 1rem;
+    font-size: 0.875rem;
+    color: #ccc;
+    line-height: 1.5;
+  }
+
+  .ip-issue-field {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+  }
+
+  .ip-field-label {
+    color: #888;
+    min-width: 50px;
+  }
+
+  .ip-field-value {
+    font-family: 'Fira Code', monospace;
+    padding: 0.25rem 0.5rem;
+    background: #0f0f23;
+    border-radius: 4px;
+    font-size: 0.8rem;
+  }
+
+  .ip-value-old {
+    color: #fca5a5;
+    background: #ef444420;
+  }
+
+  .ip-value-new {
+    color: #86efac;
+    background: #22c55e20;
+  }
+
+  .ip-value-bad {
+    color: #fca5a5 !important;
+    background: #ef444420 !important;
+  }
+
+  .ip-issue-suggestion {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin-top: 1rem;
+    padding: 0.75rem;
+    background: #0f0f23;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    color: #a78bfa;
+  }
+
+  .ip-suggestion-icon {
+    flex-shrink: 0;
+  }
+
+  .ip-issue-actions {
+    margin-top: 1rem;
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .ip-action-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid #333;
+    border-radius: 6px;
+    background: #0f0f23;
+    color: #e0e0e0;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .ip-action-btn:hover {
+    background: #16213e;
+    border-color: #00d9ff;
+    color: #00d9ff;
+  }
+`;
+function getValueType(value) {
+  if (value === null) return "null";
+  if (value === void 0) return "undefined";
+  if (typeof value === "number" && isNaN(value)) return "nan";
+  if (Array.isArray(value)) return "array";
+  if (typeof value === "function") return "function";
+  return typeof value;
+}
+var typeIcons = {
+  null: "\u2298",
+  undefined: "\u2753",
+  boolean: "\u25C9",
+  number: "#",
+  string: '"',
+  array: "[]",
+  object: "{}",
+  nan: "\u26A0\uFE0F",
+  function: "\u0192"
+};
+var typeColors = {
+  null: "#f472b6",
+  undefined: "#ef4444",
+  boolean: "#fb923c",
+  number: "#22c55e",
+  string: "#fbbf24",
+  array: "#a78bfa",
+  object: "#60a5fa",
+  nan: "#ef4444",
+  function: "#888"
+};
+function StateTreeViewer({
+  state,
+  issuePaths = /* @__PURE__ */ new Set(),
+  changedPaths = /* @__PURE__ */ new Set(),
+  removedPaths = /* @__PURE__ */ new Set(),
+  defaultExpandDepth = 3,
+  searchQuery = "",
+  onPathClick,
+  className = ""
+}) {
+  const [expandedPaths, setExpandedPaths] = useState(/* @__PURE__ */ new Set());
+  const [copiedPath, setCopiedPath] = useState(null);
+  const toggleExpand = useCallback((path) => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+  const copyPath = useCallback((path, e) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(path);
+    setCopiedPath(path);
+    setTimeout(() => setCopiedPath(null), 2e3);
+  }, []);
+  const copyValue = useCallback((value, e) => {
+    e.stopPropagation();
+    const text = typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
+    navigator.clipboard.writeText(text);
+  }, []);
+  const matchingPaths = useMemo(() => {
+    if (!searchQuery) return /* @__PURE__ */ new Set();
+    const matches = /* @__PURE__ */ new Set();
+    function traverse(obj, path) {
+      if (!obj || typeof obj !== "object") return;
+      for (const key of Object.keys(obj)) {
+        const fullPath = path ? `${path}.${key}` : key;
+        if (fullPath.toLowerCase().includes(searchQuery.toLowerCase())) {
+          matches.add(fullPath);
+          const parts = fullPath.split(".");
+          for (let i = 1; i < parts.length; i++) {
+            matches.add(parts.slice(0, i).join("."));
+          }
+        }
+        traverse(obj[key], fullPath);
+      }
+    }
+    traverse(state, "");
+    return matches;
+  }, [state, searchQuery]);
+  return /* @__PURE__ */ jsxs("div", { className: `state-tree-viewer ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "stv-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "stv-title", children: "\u{1F333} State Tree" }),
+      /* @__PURE__ */ jsxs("div", { className: "stv-legend", children: [
+        /* @__PURE__ */ jsx("span", { className: "stv-legend-item stv-legend-changed", children: "\u25CF Changed" }),
+        /* @__PURE__ */ jsx("span", { className: "stv-legend-item stv-legend-removed", children: "\u25CF Removed" }),
+        /* @__PURE__ */ jsx("span", { className: "stv-legend-item stv-legend-issue", children: "\u25CF Issue" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "stv-tree", children: /* @__PURE__ */ jsx(
+      TreeNode,
+      {
+        value: state,
+        path: "",
+        depth: 0,
+        issuePaths,
+        changedPaths,
+        removedPaths,
+        expandedPaths,
+        matchingPaths,
+        defaultExpandDepth,
+        searchQuery,
+        copiedPath,
+        onToggle: toggleExpand,
+        onCopyPath: copyPath,
+        onCopyValue: copyValue,
+        onPathClick
+      }
+    ) }),
+    /* @__PURE__ */ jsx("style", { children: styles3 })
+  ] });
+}
+function TreeNode({
+  value,
+  path,
+  depth,
+  keyName,
+  issuePaths,
+  changedPaths,
+  removedPaths,
+  expandedPaths,
+  matchingPaths,
+  defaultExpandDepth,
+  searchQuery,
+  copiedPath,
+  onToggle,
+  onCopyPath,
+  onCopyValue,
+  onPathClick
+}) {
+  const valueType = getValueType(value);
+  const hasIssue = path ? issuePaths.has(path) : false;
+  const isChanged = path ? changedPaths.has(path) : false;
+  const isRemoved = path ? removedPaths.has(path) : false;
+  const isMatch = path ? matchingPaths.has(path) : false;
+  const isExpandable = valueType === "object" || valueType === "array";
+  const isExpanded = expandedPaths.has(path) || depth < defaultExpandDepth && !expandedPaths.has(path) || isMatch;
+  const entries = isExpandable && value ? Object.entries(value) : [];
+  const handleClick = () => {
+    if (isExpandable) {
+      onToggle(path);
+    } else if (onPathClick) {
+      onPathClick(path, value);
+    }
+  };
+  const highlightKey = (key) => {
+    if (!searchQuery) return key;
+    const idx = key.toLowerCase().indexOf(searchQuery.toLowerCase());
+    if (idx === -1) return key;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      key.slice(0, idx),
+      /* @__PURE__ */ jsx("span", { className: "stv-highlight", children: key.slice(idx, idx + searchQuery.length) }),
+      key.slice(idx + searchQuery.length)
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `stv-node ${depth === 0 ? "stv-root" : ""}`, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `stv-row ${isExpandable ? "stv-expandable" : ""} ${hasIssue ? "stv-has-issue" : ""} ${isChanged ? "stv-changed" : ""} ${isRemoved ? "stv-removed" : ""} ${isMatch ? "stv-match" : ""}`,
+        onClick: handleClick,
+        children: [
+          isExpandable ? /* @__PURE__ */ jsx("span", { className: "stv-toggle", children: isExpanded ? "\u25BC" : "\u25B6" }) : /* @__PURE__ */ jsx("span", { className: "stv-toggle stv-toggle-spacer" }),
+          keyName !== void 0 && /* @__PURE__ */ jsxs("span", { className: "stv-key", children: [
+            highlightKey(keyName),
+            /* @__PURE__ */ jsx("span", { className: "stv-colon", children: ":" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "stv-type-icon",
+              style: { color: typeColors[valueType] },
+              title: valueType,
+              children: typeIcons[valueType]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: `stv-value stv-value-${valueType}`, children: renderValue(value, valueType, isExpanded) }),
+          /* @__PURE__ */ jsxs("span", { className: "stv-badges", children: [
+            hasIssue && /* @__PURE__ */ jsx("span", { className: "stv-badge stv-badge-issue", title: "Has issue", children: "\u26A0\uFE0F" }),
+            isChanged && /* @__PURE__ */ jsx("span", { className: "stv-badge stv-badge-changed", title: "Changed", children: "\u25CF" }),
+            isRemoved && /* @__PURE__ */ jsx("span", { className: "stv-badge stv-badge-removed", title: "Removed", children: "\u2715" }),
+            valueType === "nan" && /* @__PURE__ */ jsx("span", { className: "stv-badge stv-badge-nan", children: "NaN!" }),
+            valueType === "undefined" && /* @__PURE__ */ jsx("span", { className: "stv-badge stv-badge-undefined", children: "undef" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "stv-actions", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "stv-action",
+                onClick: (e) => onCopyPath(path, e),
+                title: "Copy path",
+                children: copiedPath === path ? "\u2713" : "\u{1F4CB}"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "stv-action",
+                onClick: (e) => onCopyValue(value, e),
+                title: "Copy value",
+                children: "\u{1F4C4}"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    isExpandable && isExpanded && entries.length > 0 && /* @__PURE__ */ jsx("div", { className: "stv-children", children: entries.map(([childKey, childValue]) => {
+      const childPath = path ? `${path}.${childKey}` : childKey;
+      return /* @__PURE__ */ jsx(
+        TreeNode,
+        {
+          value: childValue,
+          path: childPath,
+          depth: depth + 1,
+          keyName: childKey,
+          issuePaths,
+          changedPaths,
+          removedPaths,
+          expandedPaths,
+          matchingPaths,
+          defaultExpandDepth,
+          searchQuery,
+          copiedPath,
+          onToggle,
+          onCopyPath,
+          onCopyValue,
+          onPathClick
+        },
+        childPath
+      );
+    }) }),
+    isExpandable && isExpanded && entries.length === 0 && /* @__PURE__ */ jsx("div", { className: "stv-children", children: /* @__PURE__ */ jsx("span", { className: "stv-empty", children: "(empty)" }) })
+  ] });
+}
+function renderValue(value, valueType, isExpanded) {
+  switch (valueType) {
+    case "null":
+      return "null";
+    case "undefined":
+      return "undefined";
+    case "nan":
+      return "NaN";
+    case "boolean":
+      return String(value);
+    case "number":
+      return String(value);
+    case "string":
+      const str = value;
+      const display = str.length > 50 ? str.slice(0, 50) + "..." : str;
+      return `"${display}"`;
+    case "array":
+      if (!isExpanded) {
+        const arr = value;
+        return `Array(${arr.length})`;
+      }
+      return "";
+    case "object":
+      if (!isExpanded) {
+        const obj = value;
+        const keys = Object.keys(obj);
+        return `{${keys.length} keys}`;
+      }
+      return "";
+    case "function":
+      return "function()";
+    default:
+      return String(value);
+  }
+}
+var styles3 = `
+  .state-tree-viewer {
+    background: #1a1a2e;
+    color: #e0e0e0;
+    font-family: system-ui, sans-serif;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .stv-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: #16213e;
+    border-bottom: 1px solid #333;
+  }
+
+  .stv-title {
+    font-weight: 600;
+    color: #00d9ff;
+  }
+
+  .stv-legend {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.75rem;
+  }
+
+  .stv-legend-item {
+    opacity: 0.7;
+  }
+
+  .stv-legend-changed { color: #fbbf24; }
+  .stv-legend-removed { color: #ef4444; }
+  .stv-legend-issue { color: #f472b6; }
+
+  .stv-tree {
+    flex: 1;
+    overflow: auto;
+    padding: 0.75rem;
+    font-family: 'Fira Code', 'Consolas', monospace;
+    font-size: 0.875rem;
+  }
+
+  .stv-node {
+    line-height: 1.6;
+  }
+
+  .stv-row {
+    display: flex;
+    align-items: center;
+    padding: 0.125rem 0.25rem;
+    border-radius: 4px;
+    cursor: default;
+  }
+
+  .stv-row:hover {
+    background: #16213e;
+  }
+
+  .stv-expandable {
+    cursor: pointer;
+  }
+
+  .stv-toggle {
+    width: 1rem;
+    font-size: 0.7rem;
+    color: #666;
+  }
+
+  .stv-toggle-spacer {
+    visibility: hidden;
+  }
+
+  .stv-key {
+    color: #a78bfa;
+    margin-right: 0.375rem;
+  }
+
+  .stv-colon {
+    color: #666;
+  }
+
+  .stv-type-icon {
+    font-size: 0.75rem;
+    width: 1.25rem;
+    text-align: center;
+    opacity: 0.7;
+  }
+
+  .stv-value {
+    flex: 1;
+  }
+
+  .stv-value-null { color: #f472b6; font-style: italic; }
+  .stv-value-undefined { color: #ef4444; font-style: italic; }
+  .stv-value-nan { color: #ef4444; font-weight: bold; }
+  .stv-value-boolean { color: #fb923c; }
+  .stv-value-number { color: #22c55e; }
+  .stv-value-string { color: #fbbf24; }
+  .stv-value-array { color: #a78bfa; }
+  .stv-value-object { color: #60a5fa; }
+  .stv-value-function { color: #888; font-style: italic; }
+
+  .stv-badges {
+    display: flex;
+    gap: 0.25rem;
+    margin-left: 0.5rem;
+  }
+
+  .stv-badge {
+    font-size: 0.7rem;
+    padding: 0 0.25rem;
+    border-radius: 3px;
+  }
+
+  .stv-badge-issue {
+    background: #f472b640;
+  }
 
-        .timeline-scrubber__marker:hover {
-          transform: scaleY(1.2);
-          opacity: 1;
-        }
+  .stv-badge-changed {
+    color: #fbbf24;
+  }
 
-        .timeline-scrubber__marker--selected {
-          opacity: 1;
-          box-shadow: 0 0 8px currentColor;
-        }
+  .stv-badge-removed {
+    color: #ef4444;
+    background: #ef444430;
+    padding: 0 0.375rem;
+  }
 
-        .timeline-scrubber__position {
-          position: absolute;
-          width: 2px;
-          height: 24px;
-          top: 0;
-          background: #fff;
-          border-radius: 1px;
-          pointer-events: none;
-        }
+  .stv-badge-nan, .stv-badge-undefined {
+    background: #ef444440;
+    color: #fca5a5;
+    padding: 0.125rem 0.375rem;
+    font-weight: 600;
+  }
 
-        .timeline-scrubber__slider {
-          width: 100%;
-          margin: 0.5rem 0;
-          cursor: pointer;
-        }
+  .stv-actions {
+    display: none;
+    gap: 0.25rem;
+    margin-left: 0.5rem;
+  }
 
-        .timeline-scrubber__controls {
-          display: flex;
-          justify-content: center;
-          gap: 0.5rem;
-          margin: 0.5rem 0;
-        }
+  .stv-row:hover .stv-actions {
+    display: flex;
+  }
 
-        .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;
-        }
+  .stv-action {
+    padding: 0.125rem 0.375rem;
+    border: none;
+    background: transparent;
+    color: #666;
+    cursor: pointer;
+    font-size: 0.75rem;
+    border-radius: 3px;
+  }
 
-        .timeline-scrubber__button:hover:not(:disabled) {
-          background: #1f2b4d;
-        }
+  .stv-action:hover {
+    background: #333;
+    color: #fff;
+  }
 
-        .timeline-scrubber__button:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
+  .stv-children {
+    margin-left: 1.25rem;
+    border-left: 1px solid #333;
+    padding-left: 0.5rem;
+  }
 
-        .timeline-scrubber__button--primary {
-          background: #00d9ff;
-          color: #000;
-        }
+  .stv-empty {
+    color: #666;
+    font-style: italic;
+    font-size: 0.8rem;
+    padding: 0.25rem 0;
+  }
 
-        .timeline-scrubber__button--primary:hover:not(:disabled) {
-          background: #00b8e6;
-        }
+  .stv-has-issue {
+    background: #f472b620 !important;
+  }
 
-        .timeline-scrubber__legend {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 1rem;
-          margin-top: 0.5rem;
-          font-size: 0.75rem;
-        }
+  .stv-changed {
+    background: #fbbf2420 !important;
+  }
 
-        .timeline-scrubber__legend-item {
-          display: flex;
-          align-items: center;
-          gap: 0.25rem;
-          color: #888;
-        }
+  .stv-removed {
+    background: #ef444420 !important;
+    text-decoration: line-through;
+    opacity: 0.7;
+  }
 
-        .timeline-scrubber__legend-dot {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-      ` })
-  ] });
-}
-var DashboardContext = React2.createContext(null);
+  .stv-match .stv-key {
+    background: #fbbf2440;
+    padding: 0 0.25rem;
+    border-radius: 2px;
+  }
+
+  .stv-highlight {
+    background: #fbbf2480;
+    padding: 0 0.125rem;
+    border-radius: 2px;
+  }
+`;
+var DashboardContext = React4.createContext(null);
 function DashboardProvider({
   serverUrl = "http://localhost:8080",
   children
@@ -940,7 +3404,7 @@ function DashboardProvider({
   return /* @__PURE__ */ jsx(DashboardContext.Provider, { value, children });
 }
 function useDashboard() {
-  const context = React2.useContext(DashboardContext);
+  const context = React4.useContext(DashboardContext);
   if (!context) {
     throw new Error("useDashboard must be used within a DashboardProvider");
   }
@@ -992,189 +3456,657 @@ function DashboardContent() {
     loadSessions
   } = useDashboard();
   const playback = usePlayback(timeline);
-  React2.useEffect(() => {
+  const [mainTab, setMainTab] = useState("issues");
+  const [detailTab, setDetailTab] = useState("tree");
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+  const analyzer2 = useMemo(() => new StateAnalyzer(), []);
+  const issues = useMemo(() => {
+    return analyzer2.analyzeTimeline(timeline);
+  }, [analyzer2, timeline]);
+  const dependencyGraph = useMemo(() => {
+    return analyzer2.buildDependencyGraph(timeline);
+  }, [analyzer2, timeline]);
+  const issuePaths = useMemo(() => {
+    return new Set(issues.filter((i) => i.path).map((i) => i.path));
+  }, [issues]);
+  const changedPaths = useMemo(() => {
+    if (!selectedMutation?.diff) return /* @__PURE__ */ new Set();
+    return new Set(selectedMutation.diff.map((d) => d.path));
+  }, [selectedMutation]);
+  const removedPaths = useMemo(() => {
+    if (!selectedMutation?.diff) return /* @__PURE__ */ new Set();
+    return new Set(
+      selectedMutation.diff.filter((d) => d.operation === "REMOVE").map((d) => d.path)
+    );
+  }, [selectedMutation]);
+  const issueCounts = useMemo(() => {
+    const counts = { critical: 0, warning: 0, info: 0 };
+    for (const issue of issues) {
+      counts[issue.severity]++;
+    }
+    return counts;
+  }, [issues]);
+  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",
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const interval = setInterval(loadSessions, 5e3);
+    return () => clearInterval(interval);
+  }, [autoRefresh, loadSessions]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.target instanceof HTMLInputElement) return;
+      switch (e.key) {
+        case "ArrowLeft":
+          playback.stepBackward();
+          break;
+        case "ArrowRight":
+          playback.stepForward();
+          break;
+        case " ":
+          e.preventDefault();
+          playback.isPlaying ? playback.pause() : playback.play();
+          break;
+        case "1":
+          setMainTab("issues");
+          break;
+        case "2":
+          setMainTab("timeline");
+          break;
+        case "3":
+          setMainTab("graph");
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [playback]);
+  const handleJumpToMutation = (mutationId, index) => {
+    playback.goTo(index);
+    const mutation = timeline[index];
+    if (mutation) {
+      selectMutation(mutation);
+    }
+    setMainTab("timeline");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "surgeon-dashboard-v2", children: [
+    /* @__PURE__ */ jsxs("header", { className: "sd2-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sd2-header-left", children: [
+        /* @__PURE__ */ jsxs("h1", { className: "sd2-logo", children: [
+          /* @__PURE__ */ jsx("span", { className: "sd2-logo-icon", children: "\u{1F52C}" }),
+          /* @__PURE__ */ jsx("span", { className: "sd2-logo-text", children: "State Surgeon" }),
+          /* @__PURE__ */ jsx("span", { className: "sd2-version", children: "v2.0" })
+        ] }),
+        issues.length > 0 && /* @__PURE__ */ jsxs("div", { className: "sd2-issue-badges", children: [
+          issueCounts.critical > 0 && /* @__PURE__ */ jsxs("span", { className: "sd2-badge sd2-badge-critical", children: [
+            "\u{1F534} ",
+            issueCounts.critical
+          ] }),
+          issueCounts.warning > 0 && /* @__PURE__ */ jsxs("span", { className: "sd2-badge sd2-badge-warning", children: [
+            "\u{1F7E1} ",
+            issueCounts.warning
+          ] }),
+          issueCounts.info > 0 && /* @__PURE__ */ jsxs("span", { className: "sd2-badge sd2-badge-info", children: [
+            "\u{1F7E2} ",
+            issueCounts.info
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "sd2-header-center", children: /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: currentSession?.id || "",
+          onChange: (e) => selectSession(e.target.value),
+          disabled: isLoading,
+          className: "sd2-session-select",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "Select a session..." }),
+            sessions.map((session) => /* @__PURE__ */ jsxs("option", { value: session.id, children: [
+              session.appId,
+              " \u2022 ",
+              session.id.slice(0, 8),
+              "... \u2022 ",
+              session.mutationCount,
+              " mutations"
+            ] }, session.id))
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "sd2-header-right", children: [
+        /* @__PURE__ */ jsx(
+          "input",
           {
-            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))
-            ]
+            type: "text",
+            placeholder: "\u{1F50D} Search state paths...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "sd2-search"
           }
         ),
-        /* @__PURE__ */ jsx("button", { onClick: loadSessions, disabled: isLoading, children: "\u{1F504}" })
+        /* @__PURE__ */ jsxs("label", { className: "sd2-auto-refresh", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: autoRefresh,
+              onChange: (e) => setAutoRefresh(e.target.checked)
+            }
+          ),
+          "Auto"
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: loadSessions, disabled: isLoading, className: "sd2-refresh-btn", children: isLoading ? "\u23F3" : "\u{1F504}" })
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx("div", { className: "surgeon-dashboard__error", children: /* @__PURE__ */ jsxs("p", { children: [
-      "Error: ",
+    error && /* @__PURE__ */ jsxs("div", { className: "sd2-error", children: [
+      /* @__PURE__ */ jsx("span", { children: "\u274C" }),
+      " ",
       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,
+    ] }),
+    !currentSession && !isLoading && /* @__PURE__ */ jsx("div", { className: "sd2-welcome", children: /* @__PURE__ */ jsxs("div", { className: "sd2-welcome-content", children: [
+      /* @__PURE__ */ jsx("div", { className: "sd2-welcome-icon", children: "\u{1F52C}" }),
+      /* @__PURE__ */ jsx("h2", { children: "State Surgeon v2.0" }),
+      /* @__PURE__ */ jsx("p", { children: "Forensic debugging platform for JavaScript applications" }),
+      /* @__PURE__ */ jsxs("div", { className: "sd2-features", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sd2-feature", children: [
+          /* @__PURE__ */ jsx("span", { className: "sd2-feature-icon", children: "\u{1F6A8}" }),
+          /* @__PURE__ */ jsx("strong", { children: "Issue Detection" }),
+          /* @__PURE__ */ jsx("span", { children: "Find state loss, invalid values, broken invariants" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sd2-feature", children: [
+          /* @__PURE__ */ jsx("span", { className: "sd2-feature-icon", children: "\u{1F333}" }),
+          /* @__PURE__ */ jsx("strong", { children: "State Tree" }),
+          /* @__PURE__ */ jsx("span", { children: "Visual tree with inline anomaly badges" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sd2-feature", children: [
+          /* @__PURE__ */ jsx("span", { className: "sd2-feature-icon", children: "\u{1F517}" }),
+          /* @__PURE__ */ jsx("strong", { children: "Dependency Graph" }),
+          /* @__PURE__ */ jsx("span", { children: "Detect hidden coupling between components" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sd2-feature", children: [
+          /* @__PURE__ */ jsx("span", { className: "sd2-feature-icon", children: "\u23F1\uFE0F" }),
+          /* @__PURE__ */ jsx("strong", { children: "Timeline Analysis" }),
+          /* @__PURE__ */ jsx("span", { children: "See exactly what your code did" })
+        ] })
+      ] }),
+      sessions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "sd2-session-list", children: [
+        /* @__PURE__ */ jsxs("h3", { children: [
+          "Sessions (",
+          sessions.length,
+          ")"
+        ] }),
+        sessions.map((session) => /* @__PURE__ */ jsxs(
+          "button",
           {
-            previousState: selectedMutation.previousState,
-            nextState: selectedMutation.nextState,
-            diff: selectedMutation.diff
-          }
-        ) }),
-        /* @__PURE__ */ jsx("section", { className: "surgeon-dashboard__inspector", children: /* @__PURE__ */ jsx(MutationInspector, { mutation: selectedMutation }) })
+            className: "sd2-session-card",
+            onClick: () => selectSession(session.id),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sd2-session-app", children: session.appId }),
+              /* @__PURE__ */ jsxs("span", { className: "sd2-session-count", children: [
+                session.mutationCount,
+                " mutations"
+              ] })
+            ]
+          },
+          session.id
+        ))
       ] })
+    ] }) }),
+    isLoading && !currentSession && /* @__PURE__ */ jsxs("div", { className: "sd2-loading", children: [
+      /* @__PURE__ */ jsx("div", { className: "sd2-spinner" }),
+      /* @__PURE__ */ jsx("p", { children: "Loading sessions..." })
     ] }),
-    !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);` })
+    currentSession && /* @__PURE__ */ jsxs("div", { className: "sd2-main", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sd2-left-panel", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sd2-tabs", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: `sd2-tab ${mainTab === "issues" ? "active" : ""}`,
+              onClick: () => setMainTab("issues"),
+              children: [
+                "\u{1F6A8} Issues ",
+                issues.length > 0 && `(${issues.length})`
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `sd2-tab ${mainTab === "timeline" ? "active" : ""}`,
+              onClick: () => setMainTab("timeline"),
+              children: "\u{1F4CA} Timeline"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: `sd2-tab ${mainTab === "graph" ? "active" : ""}`,
+              onClick: () => setMainTab("graph"),
+              children: [
+                "\u{1F517} Graph ",
+                dependencyGraph.couplings.length > 0 && `(${dependencyGraph.couplings.length})`
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sd2-tab-content", children: [
+          mainTab === "issues" && /* @__PURE__ */ jsx(
+            IssuesPanel,
+            {
+              issues,
+              onJumpToMutation: handleJumpToMutation
+            }
+          ),
+          mainTab === "timeline" && /* @__PURE__ */ jsx("div", { className: "sd2-timeline-panel", 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,
+              playbackSpeed: playback.playbackSpeed,
+              onSpeedChange: playback.setSpeed
+            }
+          ) }),
+          mainTab === "graph" && /* @__PURE__ */ jsx(
+            DependencyGraph,
+            {
+              graph: dependencyGraph,
+              onPathSelect: (path) => setSearchQuery(path)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "sd2-right-panel", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sd2-tabs", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `sd2-tab ${detailTab === "tree" ? "active" : ""}`,
+              onClick: () => setDetailTab("tree"),
+              children: "\u{1F333} Tree"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `sd2-tab ${detailTab === "diff" ? "active" : ""}`,
+              onClick: () => setDetailTab("diff"),
+              children: "\u{1F4CA} Diff"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `sd2-tab ${detailTab === "inspector" ? "active" : ""}`,
+              onClick: () => setDetailTab("inspector"),
+              children: "\u{1F50D} Details"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sd2-tab-content", children: [
+          detailTab === "tree" && selectedMutation && /* @__PURE__ */ jsx(
+            StateTreeViewer,
+            {
+              state: selectedMutation.nextState,
+              issuePaths,
+              changedPaths,
+              removedPaths,
+              searchQuery
+            }
+          ),
+          detailTab === "diff" && selectedMutation && /* @__PURE__ */ jsx(
+            StateDiffViewer,
+            {
+              previousState: selectedMutation.previousState,
+              nextState: selectedMutation.nextState,
+              diff: selectedMutation.diff
+            }
+          ),
+          detailTab === "inspector" && /* @__PURE__ */ jsx(MutationInspector, { mutation: selectedMutation }),
+          !selectedMutation && /* @__PURE__ */ jsx("div", { className: "sd2-panel-empty", children: /* @__PURE__ */ jsx("p", { children: "Select a mutation to view state details" }) })
+        ] })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("style", { children: `
-        .surgeon-dashboard {
-          min-height: 100vh;
-          background: #0f0f23;
-          color: #e0e0e0;
-          font-family: system-ui, -apple-system, sans-serif;
-        }
+    /* @__PURE__ */ jsxs("footer", { className: "sd2-footer", children: [
+      /* @__PURE__ */ jsx("span", { children: "State Surgeon v2.0" }),
+      /* @__PURE__ */ jsx("span", { className: "sd2-sep", children: "\u2022" }),
+      /* @__PURE__ */ jsx("span", { children: "\u2190 \u2192 navigate \u2022 Space play/pause \u2022 1-3 switch tabs" })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: dashboardStyles })
+  ] });
+}
+var dashboardStyles = `
+  .surgeon-dashboard-v2 {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
+    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;
-        }
+  /* Header */
+  .sd2-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    background: rgba(22, 33, 62, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid #333;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
 
-        .surgeon-dashboard__logo {
-          margin: 0;
-          font-size: 1.5rem;
-          color: #00d9ff;
-        }
+  .sd2-header-left, .sd2-header-right {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
 
-        .surgeon-dashboard__session-select {
-          display: flex;
-          gap: 0.5rem;
-        }
+  .sd2-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0;
+    font-size: 1.125rem;
+  }
 
-        .surgeon-dashboard__session-select select {
-          padding: 0.5rem 1rem;
-          border: 1px solid #333;
-          border-radius: 4px;
-          background: #16213e;
-          color: #e0e0e0;
-          min-width: 300px;
-        }
+  .sd2-logo-icon { font-size: 1.25rem; }
 
-        .surgeon-dashboard__session-select button {
-          padding: 0.5rem 1rem;
-          border: 1px solid #333;
-          border-radius: 4px;
-          background: #16213e;
-          color: #e0e0e0;
-          cursor: pointer;
-        }
+  .sd2-logo-text {
+    background: linear-gradient(135deg, #00d9ff, #a78bfa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 700;
+  }
 
-        .surgeon-dashboard__session-select button:hover {
-          background: #1f2b4d;
-        }
+  .sd2-version {
+    font-size: 0.65rem;
+    padding: 0.15rem 0.35rem;
+    background: linear-gradient(135deg, #22c55e, #06b6d4);
+    border-radius: 4px;
+    color: #000;
+    font-weight: 600;
+  }
 
-        .surgeon-dashboard__error {
-          padding: 1rem 2rem;
-          background: rgba(239, 68, 68, 0.1);
-          border-bottom: 1px solid #ef4444;
-          color: #fca5a5;
-        }
+  .sd2-issue-badges {
+    display: flex;
+    gap: 0.5rem;
+  }
 
-        .surgeon-dashboard__loading {
-          padding: 2rem;
-          text-align: center;
-          color: #888;
-        }
+  .sd2-badge {
+    padding: 0.25rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
 
-        .surgeon-dashboard__main {
-          padding: 1rem 2rem;
-        }
+  .sd2-badge-critical { background: #ef444430; color: #fca5a5; }
+  .sd2-badge-warning { background: #fbbf2430; color: #fcd34d; }
+  .sd2-badge-info { background: #22c55e30; color: #86efac; }
 
-        .surgeon-dashboard__timeline {
-          margin-bottom: 1rem;
-        }
+  .sd2-session-select {
+    padding: 0.5rem 1rem;
+    min-width: 300px;
+    border: 1px solid #333;
+    border-radius: 8px;
+    background: #0f0f23;
+    color: #e0e0e0;
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
 
-        .surgeon-dashboard__content {
-          display: grid;
-          grid-template-columns: 2fr 1fr;
-          gap: 1rem;
-        }
+  .sd2-search {
+    padding: 0.5rem 1rem;
+    width: 200px;
+    border: 1px solid #333;
+    border-radius: 8px;
+    background: #0f0f23;
+    color: #e0e0e0;
+    font-size: 0.875rem;
+  }
 
-        .surgeon-dashboard__empty {
-          padding: 4rem 2rem;
-          text-align: center;
-        }
+  .sd2-auto-refresh {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.8rem;
+    color: #888;
+    cursor: pointer;
+  }
 
-        .surgeon-dashboard__empty h2 {
-          color: #888;
-          margin-bottom: 1rem;
-        }
+  .sd2-refresh-btn {
+    padding: 0.375rem 0.625rem;
+    border: 1px solid #333;
+    border-radius: 6px;
+    background: transparent;
+    color: #e0e0e0;
+    cursor: pointer;
+    font-size: 1rem;
+  }
 
-        .surgeon-dashboard__empty pre {
-          display: inline-block;
-          text-align: left;
-          padding: 1.5rem;
-          background: #16213e;
-          border-radius: 8px;
-          font-size: 0.875rem;
-        }
+  .sd2-refresh-btn:hover { background: #16213e; }
 
-        @media (max-width: 1024px) {
-          .surgeon-dashboard__content {
-            grid-template-columns: 1fr;
-          }
-        }
-      ` })
-  ] });
-}
+  .sd2-error {
+    padding: 0.75rem 1.5rem;
+    background: rgba(239, 68, 68, 0.1);
+    border-bottom: 1px solid #ef4444;
+    color: #fca5a5;
+  }
+
+  /* Welcome */
+  .sd2-welcome {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+  }
+
+  .sd2-welcome-content {
+    text-align: center;
+    max-width: 700px;
+  }
+
+  .sd2-welcome-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    animation: float 3s ease-in-out infinite;
+  }
+
+  @keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+  }
+
+  .sd2-welcome h2 {
+    margin: 0 0 0.5rem;
+    font-size: 1.75rem;
+    background: linear-gradient(135deg, #00d9ff, #a78bfa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .sd2-welcome > div > p {
+    color: #888;
+    margin-bottom: 2rem;
+  }
+
+  .sd2-features {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .sd2-feature {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.25rem;
+    background: #16213e;
+    border-radius: 12px;
+    text-align: center;
+  }
+
+  .sd2-feature-icon {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .sd2-feature strong {
+    color: #00d9ff;
+    margin-bottom: 0.25rem;
+  }
+
+  .sd2-feature span:last-child {
+    font-size: 0.8rem;
+    color: #888;
+  }
+
+  .sd2-session-list h3 {
+    color: #00d9ff;
+    margin-bottom: 0.75rem;
+  }
+
+  .sd2-session-card {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.875rem 1.25rem;
+    margin-bottom: 0.5rem;
+    background: #16213e;
+    border: 1px solid #333;
+    border-radius: 8px;
+    cursor: pointer;
+    color: inherit;
+    transition: all 0.2s;
+  }
+
+  .sd2-session-card:hover {
+    border-color: #00d9ff;
+    background: #1a2744;
+  }
+
+  .sd2-session-app { color: #a78bfa; font-weight: 600; }
+  .sd2-session-count { color: #00d9ff; }
+
+  .sd2-loading {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+  }
+
+  .sd2-spinner {
+    width: 36px;
+    height: 36px;
+    border: 3px solid #333;
+    border-top-color: #00d9ff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  /* Main content */
+  .sd2-main {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    padding: 1rem;
+    min-height: 0;
+  }
+
+  @media (max-width: 1200px) {
+    .sd2-main { grid-template-columns: 1fr; }
+  }
+
+  .sd2-left-panel, .sd2-right-panel {
+    display: flex;
+    flex-direction: column;
+    background: #1a1a2e;
+    border-radius: 12px;
+    overflow: hidden;
+    min-height: 500px;
+  }
+
+  .sd2-tabs {
+    display: flex;
+    background: #16213e;
+    border-bottom: 1px solid #333;
+  }
+
+  .sd2-tab {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    border: none;
+    background: transparent;
+    color: #888;
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: all 0.2s;
+    border-bottom: 2px solid transparent;
+  }
+
+  .sd2-tab:hover { color: #ccc; background: #1a2744; }
+
+  .sd2-tab.active {
+    color: #00d9ff;
+    background: #1a1a2e;
+    border-bottom-color: #00d9ff;
+  }
+
+  .sd2-tab-content {
+    flex: 1;
+    overflow: auto;
+  }
+
+  .sd2-timeline-panel {
+    padding: 1rem;
+  }
+
+  .sd2-panel-empty {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+  }
+
+  /* Footer */
+  .sd2-footer {
+    padding: 0.625rem 1.5rem;
+    background: rgba(22, 33, 62, 0.5);
+    border-top: 1px solid #333;
+    font-size: 0.75rem;
+    color: #666;
+    text-align: center;
+  }
+
+  .sd2-sep { margin: 0 0.5rem; }
+`;
 
 export { DashboardProvider, MutationInspector, StateDiffViewer, StateSurgeonDashboard, TimelineScrubber, useDashboard };
 //# sourceMappingURL=index.mjs.map