state-surgeon 1.1.0 → 2.0.0

package/dist/dashboard/index.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React2 = require('react');
+var React4 = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React2__default = /*#__PURE__*/_interopDefault(React2);
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 
 // src/dashboard/components/MutationInspector.tsx
 function MutationInspector({
@@ -355,24 +355,24 @@ function StateDiffViewer({
   viewMode = "split",
   className = ""
 }) {
-  const [activeTab, setActiveTab] = React2.useState("diff");
-  const [searchQuery, setSearchQuery] = React2.useState("");
-  const [copiedPath, setCopiedPath] = React2.useState(null);
-  const diff = React2.useMemo(
+  const [activeTab, setActiveTab] = React4.useState("diff");
+  const [searchQuery, setSearchQuery] = React4.useState("");
+  const [copiedPath, setCopiedPath] = React4.useState(null);
+  const diff = React4.useMemo(
     () => preDiff || calculateDiff(previousState, nextState),
     [previousState, nextState, preDiff]
   );
-  const changedPaths = React2.useMemo(
+  const changedPaths = React4.useMemo(
     () => new Set(diff.map((d) => d.path)),
     [diff]
   );
-  const groupedDiffs = React2.useMemo(() => {
+  const groupedDiffs = React4.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 = React2.useMemo(() => {
+  const anomalies = React4.useMemo(() => {
     const result = [];
     for (const d of diff) {
       if (d.operation !== "REMOVE") {
@@ -384,13 +384,13 @@ function StateDiffViewer({
     }
     return result;
   }, [diff]);
-  const copyToClipboard = React2.useCallback((value, path) => {
+  const copyToClipboard = React4.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 = React2.useCallback((state, label) => {
+  const copyFullState = React4.useCallback((state, label) => {
     navigator.clipboard.writeText(JSON.stringify(state, null, 2));
     setCopiedPath(label);
     setTimeout(() => setCopiedPath(null), 2e3);
@@ -959,9 +959,9 @@ function StateTree({
   depth = 0,
   changeType
 }) {
-  const [isExpanded, setIsExpanded] = React2.useState(depth < defaultExpandDepth);
+  const [isExpanded, setIsExpanded] = React4.useState(depth < defaultExpandDepth);
   const isChanged = path ? changedPaths.has(path) : false;
-  const toggle = React2.useCallback(() => setIsExpanded((e) => !e), []);
+  const toggle = React4.useCallback(() => setIsExpanded((e) => !e), []);
   if (value === null) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "state-tree__null", children: "null" });
   }
@@ -1089,9 +1089,9 @@ function TimelineScrubber({
   onSpeedChange,
   className = ""
 }) {
-  const [filter, setFilter] = React2.useState("all");
-  const [hoverIndex, setHoverIndex] = React2.useState(null);
-  const handleSliderChange = React2.useCallback(
+  const [filter, setFilter] = React4.useState("all");
+  const [hoverIndex, setHoverIndex] = React4.useState(null);
+  const handleSliderChange = React4.useCallback(
     (e) => {
       const index = parseInt(e.target.value, 10);
       if (mutations[index]) {
@@ -1100,7 +1100,7 @@ function TimelineScrubber({
     },
     [mutations, onSelect]
   );
-  const handleMarkerClick = React2.useCallback(
+  const handleMarkerClick = React4.useCallback(
     (index) => {
       if (mutations[index]) {
         onSelect(index, mutations[index]);
@@ -1108,18 +1108,18 @@ function TimelineScrubber({
     },
     [mutations, onSelect]
   );
-  const sourceStats = React2.useMemo(() => {
+  const sourceStats = React4.useMemo(() => {
     const stats = {};
     for (const m of mutations) {
       stats[m.source] = (stats[m.source] || 0) + 1;
     }
     return stats;
   }, [mutations]);
-  React2.useMemo(() => {
+  React4.useMemo(() => {
     if (filter === "all") return mutations;
     return mutations.filter((m) => m.source === filter);
   }, [mutations, filter]);
-  const anomalyCount = React2.useMemo(() => {
+  const anomalyCount = React4.useMemo(() => {
     let count = 0;
     for (const m of mutations) {
       if (m.diff) {
@@ -1682,12 +1682,1679 @@ function TimelineScrubber({
       ` })
   ] });
 }
-var DashboardContext = React2__default.default.createContext(null);
+
+// 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] = React4.useState("couplings");
+  const [hoveredPath, setHoveredPath] = React4.useState(null);
+  const sortedNodes = React4.useMemo(() => {
+    const nodes = Array.from(graph.nodes.values());
+    return nodes.sort((a, b) => b.mutationCount - a.mutationCount);
+  }, [graph.nodes]);
+  const allComponents = React4.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 = React4.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 = React4.useCallback((path) => {
+    onPathSelect?.(path);
+  }, [onPathSelect]);
+  const displayNodes = viewMode === "couplings" ? sortedNodes.filter((n) => n.components.size > 1) : sortedNodes;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `dependency-graph ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dg-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dg-title", children: "\u{1F517} State Dependencies" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dg-controls", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            className: `dg-view-btn ${viewMode === "couplings" ? "active" : ""}`,
+            onClick: () => setViewMode("couplings"),
+            children: [
+              "\u26A0\uFE0F Couplings Only (",
+              graph.couplings.length,
+              ")"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            className: `dg-view-btn ${viewMode === "all" ? "active" : ""}`,
+            onClick: () => setViewMode("all"),
+            children: [
+              "\u{1F4CA} All Paths (",
+              graph.nodes.size,
+              ")"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dg-legend", children: allComponents.map((comp) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: "dg-legend-item",
+        style: { "--comp-color": componentColors[comp] },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dg-legend-dot" }),
+          comp
+        ]
+      },
+      comp
+    )) }),
+    graph.couplings.length > 0 && viewMode === "couplings" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dg-alert", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dg-alert-icon", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dg-alert-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Hidden State Coupling Detected" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "dg-empty", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dg-empty-icon", children: "\u2705" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No state coupling detected" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "dg-path-header", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("code", { className: "dg-path-name", children: node.path }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dg-path-count", children: [
+                node.mutationCount,
+                " mutation",
+                node.mutationCount > 1 ? "s" : ""
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dg-path-components", children: Array.from(node.components).map((comp) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "dg-component-tag",
+                style: {
+                  backgroundColor: componentColors[comp] + "30",
+                  borderColor: componentColors[comp],
+                  color: componentColors[comp]
+                },
+                children: comp
+              },
+              comp
+            )) }),
+            isCoupled && coupling && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `dg-coupling-warning dg-coupling-${coupling.severity}`, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dg-warning-icon", children: coupling.severity === "critical" ? "\u{1F534}" : "\u{1F7E1}" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dg-warning-text", children: [
+                coupling.components.length,
+                " components access this path"
+              ] })
+            ] })
+          ]
+        },
+        node.path
+      );
+    }) }),
+    displayNodes.length > 0 && displayNodes.length <= 20 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dg-visual", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dg-visual-title", children: "Dependency Visualization" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                cx: x,
+                cy: 40,
+                r: 20,
+                fill: componentColors[comp],
+                opacity: 0.8
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: x - 25,
+                y: 180,
+                width: 50,
+                height: 24,
+                rx: 4,
+                fill: isCoupled ? "#ef444430" : "#16213e",
+                stroke: isCoupled ? "#ef4444" : "#333"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("text", { x: 200, y: 250, textAnchor: "middle", fill: "#666", fontSize: "12", children: [
+          "+",
+          displayNodes.length - 8,
+          " more paths..."
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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] = React4.useState("all");
+  const [categoryFilter, setCategoryFilter] = React4.useState("all");
+  const [expandedIssue, setExpandedIssue] = React4.useState(null);
+  const filteredIssues = React4.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 = React4.useMemo(() => {
+    const summary = { critical: 0, warning: 0, info: 0 };
+    for (const issue of issues) {
+      summary[issue.severity]++;
+    }
+    return summary;
+  }, [issues]);
+  const availableCategories = React4.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__ */ jsxRuntime.jsxs("div", { className: `issues-panel issues-panel--empty ${className}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ip-empty", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ip-empty-icon", children: "\u2705" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "No Issues Detected" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your state timeline looks clean!" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: styles2 })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `issues-panel ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ip-summary", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ip-summary-title", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ip-summary-icon", children: "\u{1F6A8}" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          issues.length,
+          " Issue",
+          issues.length !== 1 ? "s" : "",
+          " Detected"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ip-summary-counts", children: [
+        issueSummary.critical > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ip-count ip-count--critical", children: [
+          severityIcons.critical,
+          " ",
+          issueSummary.critical
+        ] }),
+        issueSummary.warning > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ip-count ip-count--warning", children: [
+          severityIcons.warning,
+          " ",
+          issueSummary.warning
+        ] }),
+        issueSummary.info > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ip-count ip-count--info", children: [
+          severityIcons.info,
+          " ",
+          issueSummary.info
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ip-filters", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          value: severityFilter,
+          onChange: (e) => setSeverityFilter(e.target.value),
+          className: "ip-filter",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: "All Severities" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "critical", children: "\u{1F534} Critical" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "warning", children: "\u{1F7E1} Warning" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "info", children: "\u{1F7E2} Info" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          value: categoryFilter,
+          onChange: (e) => setCategoryFilter(e.target.value),
+          className: "ip-filter",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: "All Categories" }),
+            availableCategories.map((cat) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: cat, children: [
+              categoryIcons[cat],
+              " ",
+              categoryLabels[cat]
+            ] }, cat))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ip-list", children: filteredIssues.map((issue) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `ip-issue ip-issue--${issue.severity} ${selectedIssueId === issue.id ? "selected" : ""} ${expandedIssue === issue.id ? "expanded" : ""}`,
+        onClick: () => handleIssueClick(issue),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ip-issue-header", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ip-issue-severity", children: severityIcons[issue.severity] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ip-issue-category", children: categoryIcons[issue.category] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ip-issue-title", children: issue.title }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ip-issue-index", children: [
+              "#",
+              issue.mutationIndex + 1
+            ] })
+          ] }),
+          expandedIssue === issue.id && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ip-issue-details", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ip-issue-description", children: issue.description }),
+            issue.path && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ip-issue-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ip-field-label", children: "Path:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("code", { className: "ip-field-value", children: issue.path })
+            ] }),
+            issue.previousValue !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ip-issue-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ip-field-label", children: "Before:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("code", { className: "ip-field-value ip-value-old", children: formatValue(issue.previousValue) })
+            ] }),
+            issue.currentValue !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ip-issue-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ip-field-label", children: "After:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("code", { className: `ip-field-value ip-value-new ${issue.severity === "critical" ? "ip-value-bad" : ""}`, children: formatValue(issue.currentValue) })
+            ] }),
+            issue.suggestion && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ip-issue-suggestion", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ip-suggestion-icon", children: "\u{1F4A1}" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: issue.suggestion })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ip-issue-actions", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "ip-action-btn",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onJumpToMutation(issue.mutationId, issue.mutationIndex);
+                },
+                children: "\u{1F3AF} Jump to Mutation"
+              }
+            ) })
+          ] })
+        ]
+      },
+      issue.id
+    )) }),
+    /* @__PURE__ */ jsxRuntime.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] = React4.useState(/* @__PURE__ */ new Set());
+  const [copiedPath, setCopiedPath] = React4.useState(null);
+  const toggleExpand = React4.useCallback((path) => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+  const copyPath = React4.useCallback((path, e) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(path);
+    setCopiedPath(path);
+    setTimeout(() => setCopiedPath(null), 2e3);
+  }, []);
+  const copyValue = React4.useCallback((value, e) => {
+    e.stopPropagation();
+    const text = typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
+    navigator.clipboard.writeText(text);
+  }, []);
+  const matchingPaths = React4.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__ */ jsxRuntime.jsxs("div", { className: `state-tree-viewer ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stv-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-title", children: "\u{1F333} State Tree" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stv-legend", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-legend-item stv-legend-changed", children: "\u25CF Changed" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-legend-item stv-legend-removed", children: "\u25CF Removed" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-legend-item stv-legend-issue", children: "\u25CF Issue" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stv-tree", children: /* @__PURE__ */ jsxRuntime.jsx(
+      TreeNode,
+      {
+        value: state,
+        path: "",
+        depth: 0,
+        issuePaths,
+        changedPaths,
+        removedPaths,
+        expandedPaths,
+        matchingPaths,
+        defaultExpandDepth,
+        searchQuery,
+        copiedPath,
+        onToggle: toggleExpand,
+        onCopyPath: copyPath,
+        onCopyValue: copyValue,
+        onPathClick
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      key.slice(0, idx),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-highlight", children: key.slice(idx, idx + searchQuery.length) }),
+      key.slice(idx + searchQuery.length)
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `stv-node ${depth === 0 ? "stv-root" : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "stv-toggle", children: isExpanded ? "\u25BC" : "\u25B6" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-toggle stv-toggle-spacer" }),
+          keyName !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "stv-key", children: [
+            highlightKey(keyName),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-colon", children: ":" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "stv-type-icon",
+              style: { color: typeColors[valueType] },
+              title: valueType,
+              children: typeIcons[valueType]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `stv-value stv-value-${valueType}`, children: renderValue(value, valueType, isExpanded) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "stv-badges", children: [
+            hasIssue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-badge stv-badge-issue", title: "Has issue", children: "\u26A0\uFE0F" }),
+            isChanged && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-badge stv-badge-changed", title: "Changed", children: "\u25CF" }),
+            isRemoved && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-badge stv-badge-removed", title: "Removed", children: "\u2715" }),
+            valueType === "nan" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-badge stv-badge-nan", children: "NaN!" }),
+            valueType === "undefined" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stv-badge stv-badge-undefined", children: "undef" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "stv-actions", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "stv-action",
+                onClick: (e) => onCopyPath(path, e),
+                title: "Copy path",
+                children: copiedPath === path ? "\u2713" : "\u{1F4CB}"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "stv-action",
+                onClick: (e) => onCopyValue(value, e),
+                title: "Copy value",
+                children: "\u{1F4C4}"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    isExpandable && isExpanded && entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stv-children", children: entries.map(([childKey, childValue]) => {
+      const childPath = path ? `${path}.${childKey}` : childKey;
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "stv-children", children: /* @__PURE__ */ jsxRuntime.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;
+  }
+
+  .stv-badge-changed {
+    color: #fbbf24;
+  }
+
+  .stv-badge-removed {
+    color: #ef4444;
+    background: #ef444430;
+    padding: 0 0.375rem;
+  }
+
+  .stv-badge-nan, .stv-badge-undefined {
+    background: #ef444440;
+    color: #fca5a5;
+    padding: 0.125rem 0.375rem;
+    font-weight: 600;
+  }
+
+  .stv-actions {
+    display: none;
+    gap: 0.25rem;
+    margin-left: 0.5rem;
+  }
+
+  .stv-row:hover .stv-actions {
+    display: flex;
+  }
+
+  .stv-action {
+    padding: 0.125rem 0.375rem;
+    border: none;
+    background: transparent;
+    color: #666;
+    cursor: pointer;
+    font-size: 0.75rem;
+    border-radius: 3px;
+  }
+
+  .stv-action:hover {
+    background: #333;
+    color: #fff;
+  }
+
+  .stv-children {
+    margin-left: 1.25rem;
+    border-left: 1px solid #333;
+    padding-left: 0.5rem;
+  }
+
+  .stv-empty {
+    color: #666;
+    font-style: italic;
+    font-size: 0.8rem;
+    padding: 0.25rem 0;
+  }
+
+  .stv-has-issue {
+    background: #f472b620 !important;
+  }
+
+  .stv-changed {
+    background: #fbbf2420 !important;
+  }
+
+  .stv-removed {
+    background: #ef444420 !important;
+    text-decoration: line-through;
+    opacity: 0.7;
+  }
+
+  .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__default.default.createContext(null);
 function DashboardProvider({
   serverUrl = "http://localhost:8080",
   children
 }) {
-  const [state, setState] = React2.useState({
+  const [state, setState] = React4.useState({
     serverUrl,
     sessions: [],
     currentSession: null,
@@ -1730,7 +3397,7 @@ function DashboardProvider({
     if (!state.currentSession) return;
     await selectSession(state.currentSession.id);
   };
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     loadSessions();
   }, [serverUrl]);
   const value = {
@@ -1743,17 +3410,17 @@ function DashboardProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(DashboardContext.Provider, { value, children });
 }
 function useDashboard() {
-  const context = React2__default.default.useContext(DashboardContext);
+  const context = React4__default.default.useContext(DashboardContext);
   if (!context) {
     throw new Error("useDashboard must be used within a DashboardProvider");
   }
   return context;
 }
 function usePlayback(timeline) {
-  const [currentIndex, setCurrentIndex] = React2.useState(0);
-  const [isPlaying, setIsPlaying] = React2.useState(false);
-  const [playbackSpeed, setPlaybackSpeed] = React2.useState(1);
-  React2.useEffect(() => {
+  const [currentIndex, setCurrentIndex] = React4.useState(0);
+  const [isPlaying, setIsPlaying] = React4.useState(false);
+  const [playbackSpeed, setPlaybackSpeed] = React4.useState(1);
+  React4.useEffect(() => {
     if (!isPlaying || timeline.length === 0) return;
     const interval = setInterval(() => {
       setCurrentIndex((i) => {
@@ -1795,19 +3462,48 @@ function DashboardContent() {
     loadSessions
   } = useDashboard();
   const playback = usePlayback(timeline);
-  const [activePanel, setActivePanel] = React2.useState("diff");
-  const [autoRefresh, setAutoRefresh] = React2.useState(true);
-  React2.useEffect(() => {
+  const [mainTab, setMainTab] = React4.useState("issues");
+  const [detailTab, setDetailTab] = React4.useState("tree");
+  const [autoRefresh, setAutoRefresh] = React4.useState(true);
+  const [searchQuery, setSearchQuery] = React4.useState("");
+  const analyzer2 = React4.useMemo(() => new StateAnalyzer(), []);
+  const issues = React4.useMemo(() => {
+    return analyzer2.analyzeTimeline(timeline);
+  }, [analyzer2, timeline]);
+  const dependencyGraph = React4.useMemo(() => {
+    return analyzer2.buildDependencyGraph(timeline);
+  }, [analyzer2, timeline]);
+  const issuePaths = React4.useMemo(() => {
+    return new Set(issues.filter((i) => i.path).map((i) => i.path));
+  }, [issues]);
+  const changedPaths = React4.useMemo(() => {
+    if (!selectedMutation?.diff) return /* @__PURE__ */ new Set();
+    return new Set(selectedMutation.diff.map((d) => d.path));
+  }, [selectedMutation]);
+  const removedPaths = React4.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 = React4.useMemo(() => {
+    const counts = { critical: 0, warning: 0, info: 0 };
+    for (const issue of issues) {
+      counts[issue.severity]++;
+    }
+    return counts;
+  }, [issues]);
+  React4.useEffect(() => {
     if (playback.currentMutation) {
       selectMutation(playback.currentMutation);
     }
   }, [playback.currentMutation, selectMutation]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!autoRefresh) return;
     const interval = setInterval(loadSessions, 5e3);
     return () => clearInterval(interval);
   }, [autoRefresh, loadSessions]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.target instanceof HTMLInputElement) return;
       switch (e.key) {
@@ -1821,25 +3517,58 @@ function DashboardContent() {
           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]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "surgeon-dashboard", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sd-header", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd-header-left", children: /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "sd-logo", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd-logo-icon", children: "\u{1F52C}" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd-logo-text", children: "State Surgeon" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd-version", children: "v1.1.0" })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd-header-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const handleJumpToMutation = (mutationId, index) => {
+    playback.goTo(index);
+    const mutation = timeline[index];
+    if (mutation) {
+      selectMutation(mutation);
+    }
+    setMainTab("timeline");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "surgeon-dashboard-v2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sd2-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-header-left", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "sd2-logo", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd2-logo-icon", children: "\u{1F52C}" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd2-logo-text", children: "State Surgeon" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd2-version", children: "v2.0" })
+        ] }),
+        issues.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-issue-badges", children: [
+          issueCounts.critical > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sd2-badge sd2-badge-critical", children: [
+            "\u{1F534} ",
+            issueCounts.critical
+          ] }),
+          issueCounts.warning > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sd2-badge sd2-badge-warning", children: [
+            "\u{1F7E1} ",
+            issueCounts.warning
+          ] }),
+          issueCounts.info > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sd2-badge sd2-badge-info", children: [
+            "\u{1F7E2} ",
+            issueCounts.info
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd2-header-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "select",
         {
           value: currentSession?.id || "",
           onChange: (e) => selectSession(e.target.value),
           disabled: isLoading,
-          className: "sd-session-select",
+          className: "sd2-session-select",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select a session..." }),
             sessions.map((session) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: session.id, children: [
@@ -1853,8 +3582,18 @@ function DashboardContent() {
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd-header-right", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "sd-auto-refresh", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-header-right", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "\u{1F50D} Search state paths...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "sd2-search"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "sd2-auto-refresh", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -1863,109 +3602,177 @@ function DashboardContent() {
               onChange: (e) => setAutoRefresh(e.target.checked)
             }
           ),
-          "Auto-refresh"
+          "Auto"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: loadSessions, disabled: isLoading, className: "sd-refresh-btn", children: isLoading ? "\u23F3" : "\u{1F504}" })
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: loadSessions, disabled: isLoading, className: "sd2-refresh-btn", children: isLoading ? "\u23F3" : "\u{1F504}" })
       ] })
     ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd-error", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd-error-icon", children: "\u274C" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: error })
+    error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-error", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u274C" }),
+      " ",
+      error
     ] }),
-    !currentSession && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd-welcome", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd-welcome-content", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd-welcome-icon", children: "\u{1F52C}" }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Welcome to State Surgeon" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A forensic debugging platform for JavaScript applications" }),
-      sessions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd-welcome-steps", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Getting Started" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("ol", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Install the client in your app:" }),
-            /* @__PURE__ */ jsxRuntime.jsx("pre", { children: `import { StateSurgeonClient, instrumentReact } from 'state-surgeon/instrument';
-
-const client = new StateSurgeonClient({ appId: 'my-app' });
-instrumentReact(React);` })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Interact with your application" }),
-            " to generate state mutations"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Select a session above" }),
-            " to start debugging"
-          ] })
+    !currentSession && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd2-welcome", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-welcome-content", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd2-welcome-icon", children: "\u{1F52C}" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "State Surgeon v2.0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Forensic debugging platform for JavaScript applications" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-features", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-feature", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd2-feature-icon", children: "\u{1F6A8}" }),
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Issue Detection" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Find state loss, invalid values, broken invariants" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-feature", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd2-feature-icon", children: "\u{1F333}" }),
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "State Tree" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Visual tree with inline anomaly badges" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-feature", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd2-feature-icon", children: "\u{1F517}" }),
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Dependency Graph" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Detect hidden coupling between components" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-feature", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd2-feature-icon", children: "\u23F1\uFE0F" }),
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Timeline Analysis" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "See exactly what your code did" })
         ] })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd-welcome-sessions", children: [
+      ] }),
+      sessions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-session-list", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
-          "Available Sessions (",
+          "Sessions (",
           sessions.length,
           ")"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd-session-list", children: sessions.map((session) => /* @__PURE__ */ jsxRuntime.jsxs(
+        sessions.map((session) => /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
-            className: "sd-session-card",
+            className: "sd2-session-card",
             onClick: () => selectSession(session.id),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd-session-app", children: session.appId }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sd-session-id", children: [
-                session.id.slice(0, 16),
-                "..."
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sd-session-count", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd2-session-app", children: session.appId }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sd2-session-count", children: [
                 session.mutationCount,
                 " mutations"
               ] })
             ]
           },
           session.id
-        )) })
+        ))
       ] })
     ] }) }),
-    isLoading && !currentSession && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd-loading", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd-spinner" }),
+    isLoading && !currentSession && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-loading", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd2-spinner" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading sessions..." })
     ] }),
-    currentSession && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd-main", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("section", { className: "sd-timeline", children: /* @__PURE__ */ jsxRuntime.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
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd-panels", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd-panel-tabs", children: [
+    currentSession && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-main", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-left-panel", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-tabs", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              className: `sd2-tab ${mainTab === "issues" ? "active" : ""}`,
+              onClick: () => setMainTab("issues"),
+              children: [
+                "\u{1F6A8} Issues ",
+                issues.length > 0 && `(${issues.length})`
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: `sd2-tab ${mainTab === "timeline" ? "active" : ""}`,
+              onClick: () => setMainTab("timeline"),
+              children: "\u{1F4CA} Timeline"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              className: `sd2-tab ${mainTab === "graph" ? "active" : ""}`,
+              onClick: () => setMainTab("graph"),
+              children: [
+                "\u{1F517} Graph ",
+                dependencyGraph.couplings.length > 0 && `(${dependencyGraph.couplings.length})`
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-tab-content", children: [
+          mainTab === "issues" && /* @__PURE__ */ jsxRuntime.jsx(
+            IssuesPanel,
+            {
+              issues,
+              onJumpToMutation: handleJumpToMutation
+            }
+          ),
+          mainTab === "timeline" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd2-timeline-panel", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            DependencyGraph,
+            {
+              graph: dependencyGraph,
+              onPathSelect: (path) => setSearchQuery(path)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-right-panel", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-tabs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
-              className: `sd-panel-tab ${activePanel === "diff" ? "active" : ""}`,
-              onClick: () => setActivePanel("diff"),
-              children: "\u{1F4CA} State Changes"
+              className: `sd2-tab ${detailTab === "tree" ? "active" : ""}`,
+              onClick: () => setDetailTab("tree"),
+              children: "\u{1F333} Tree"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
-              className: `sd-panel-tab ${activePanel === "inspector" ? "active" : ""}`,
-              onClick: () => setActivePanel("inspector"),
-              children: "\u{1F50D} Mutation Details"
+              className: `sd2-tab ${detailTab === "diff" ? "active" : ""}`,
+              onClick: () => setDetailTab("diff"),
+              children: "\u{1F4CA} Diff"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: `sd2-tab ${detailTab === "inspector" ? "active" : ""}`,
+              onClick: () => setDetailTab("inspector"),
+              children: "\u{1F50D} Details"
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd-panel-content", children: [
-          activePanel === "diff" && selectedMutation && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sd2-tab-content", children: [
+          detailTab === "tree" && selectedMutation && /* @__PURE__ */ jsxRuntime.jsx(
+            StateTreeViewer,
+            {
+              state: selectedMutation.nextState,
+              issuePaths,
+              changedPaths,
+              removedPaths,
+              searchQuery
+            }
+          ),
+          detailTab === "diff" && selectedMutation && /* @__PURE__ */ jsxRuntime.jsx(
             StateDiffViewer,
             {
               previousState: selectedMutation.previousState,
@@ -1973,344 +3780,339 @@ instrumentReact(React);` })
               diff: selectedMutation.diff
             }
           ),
-          activePanel === "inspector" && /* @__PURE__ */ jsxRuntime.jsx(MutationInspector, { mutation: selectedMutation }),
-          !selectedMutation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd-panel-empty", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Select a mutation from the timeline to view details" }) })
+          detailTab === "inspector" && /* @__PURE__ */ jsxRuntime.jsx(MutationInspector, { mutation: selectedMutation }),
+          !selectedMutation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sd2-panel-empty", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Select a mutation to view state details" }) })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "sd-footer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "State Surgeon v1.1.0" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd-footer-sep", children: "\u2022" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Press \u2190 \u2192 to navigate, Space to play/pause" })
+    /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "sd2-footer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "State Surgeon v2.0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sd2-sep", children: "\u2022" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2190 \u2192 navigate \u2022 Space play/pause \u2022 1-3 switch tabs" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-        .surgeon-dashboard {
-          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;
-        }
-
-        .sd-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 1rem 2rem;
-          background: rgba(22, 33, 62, 0.8);
-          backdrop-filter: blur(10px);
-          border-bottom: 1px solid #333;
-          position: sticky;
-          top: 0;
-          z-index: 100;
-        }
-
-        .sd-header-left, .sd-header-right {
-          display: flex;
-          align-items: center;
-          gap: 1rem;
-        }
+    /* @__PURE__ */ jsxRuntime.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;
+  }
 
-        .sd-logo {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-          margin: 0;
-          font-size: 1.25rem;
-        }
+  /* 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;
+  }
 
-        .sd-logo-icon {
-          font-size: 1.5rem;
-        }
+  .sd2-header-left, .sd2-header-right {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
 
-        .sd-logo-text {
-          background: linear-gradient(135deg, #00d9ff, #a78bfa);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-          background-clip: text;
-          font-weight: 700;
-        }
+  .sd2-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0;
+    font-size: 1.125rem;
+  }
 
-        .sd-version {
-          font-size: 0.7rem;
-          padding: 0.2rem 0.4rem;
-          background: #333;
-          border-radius: 4px;
-          color: #888;
-        }
+  .sd2-logo-icon { font-size: 1.25rem; }
 
-        .sd-session-select {
-          padding: 0.625rem 1.25rem;
-          min-width: 350px;
-          border: 1px solid #333;
-          border-radius: 8px;
-          background: #0f0f23;
-          color: #e0e0e0;
-          font-size: 0.875rem;
-          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;
+  }
 
-        .sd-session-select:focus {
-          outline: none;
-          border-color: #00d9ff;
-        }
+  .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;
+  }
 
-        .sd-auto-refresh {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-          font-size: 0.875rem;
-          color: #888;
-          cursor: pointer;
-        }
+  .sd2-issue-badges {
+    display: flex;
+    gap: 0.5rem;
+  }
 
-        .sd-refresh-btn {
-          padding: 0.5rem;
-          border: 1px solid #333;
-          border-radius: 8px;
-          background: transparent;
-          color: #e0e0e0;
-          cursor: pointer;
-          font-size: 1rem;
-        }
+  .sd2-badge {
+    padding: 0.25rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
 
-        .sd-refresh-btn:hover {
-          background: #16213e;
-        }
+  .sd2-badge-critical { background: #ef444430; color: #fca5a5; }
+  .sd2-badge-warning { background: #fbbf2430; color: #fcd34d; }
+  .sd2-badge-info { background: #22c55e30; color: #86efac; }
+
+  .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;
+  }
 
-        .sd-error {
-          display: flex;
-          align-items: center;
-          gap: 0.75rem;
-          padding: 1rem 2rem;
-          background: rgba(239, 68, 68, 0.1);
-          border-bottom: 1px solid #ef4444;
-        }
+  .sd2-search {
+    padding: 0.5rem 1rem;
+    width: 200px;
+    border: 1px solid #333;
+    border-radius: 8px;
+    background: #0f0f23;
+    color: #e0e0e0;
+    font-size: 0.875rem;
+  }
 
-        .sd-error-icon {
-          font-size: 1.25rem;
-        }
+  .sd2-auto-refresh {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.8rem;
+    color: #888;
+    cursor: pointer;
+  }
 
-        .sd-error p {
-          margin: 0;
-          color: #fca5a5;
-        }
+  .sd2-refresh-btn {
+    padding: 0.375rem 0.625rem;
+    border: 1px solid #333;
+    border-radius: 6px;
+    background: transparent;
+    color: #e0e0e0;
+    cursor: pointer;
+    font-size: 1rem;
+  }
 
-        .sd-welcome {
-          flex: 1;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 2rem;
-        }
+  .sd2-refresh-btn:hover { background: #16213e; }
 
-        .sd-welcome-content {
-          text-align: center;
-          max-width: 600px;
-        }
+  .sd2-error {
+    padding: 0.75rem 1.5rem;
+    background: rgba(239, 68, 68, 0.1);
+    border-bottom: 1px solid #ef4444;
+    color: #fca5a5;
+  }
 
-        .sd-welcome-icon {
-          font-size: 5rem;
-          margin-bottom: 1rem;
-          animation: float 3s ease-in-out infinite;
-        }
+  /* Welcome */
+  .sd2-welcome {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+  }
 
-        @keyframes float {
-          0%, 100% { transform: translateY(0); }
-          50% { transform: translateY(-10px); }
-        }
+  .sd2-welcome-content {
+    text-align: center;
+    max-width: 700px;
+  }
 
-        .sd-welcome h2 {
-          margin: 0 0 0.5rem;
-          font-size: 2rem;
-          background: linear-gradient(135deg, #00d9ff, #a78bfa);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-          background-clip: text;
-        }
+  .sd2-welcome-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    animation: float 3s ease-in-out infinite;
+  }
 
-        .sd-welcome > p {
-          margin: 0 0 2rem;
-          color: #888;
-        }
+  @keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+  }
 
-        .sd-welcome-steps {
-          text-align: left;
-          background: #16213e;
-          border-radius: 12px;
-          padding: 1.5rem;
-        }
+  .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;
+  }
 
-        .sd-welcome-steps h3 {
-          margin: 0 0 1rem;
-          color: #00d9ff;
-          font-size: 1rem;
-        }
+  .sd2-welcome > div > p {
+    color: #888;
+    margin-bottom: 2rem;
+  }
 
-        .sd-welcome-steps ol {
-          margin: 0;
-          padding-left: 1.25rem;
-        }
+  .sd2-features {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
 
-        .sd-welcome-steps li {
-          margin-bottom: 1rem;
-          color: #ccc;
-        }
+  .sd2-feature {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.25rem;
+    background: #16213e;
+    border-radius: 12px;
+    text-align: center;
+  }
 
-        .sd-welcome-steps pre {
-          margin: 0.5rem 0 0;
-          padding: 1rem;
-          background: #0f0f23;
-          border-radius: 8px;
-          font-size: 0.8rem;
-          overflow-x: auto;
-        }
+  .sd2-feature-icon {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
 
-        .sd-welcome-sessions h3 {
-          margin: 0 0 1rem;
-          color: #00d9ff;
-        }
+  .sd2-feature strong {
+    color: #00d9ff;
+    margin-bottom: 0.25rem;
+  }
 
-        .sd-session-list {
-          display: grid;
-          gap: 0.75rem;
-        }
+  .sd2-feature span:last-child {
+    font-size: 0.8rem;
+    color: #888;
+  }
 
-        .sd-session-card {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 1rem 1.25rem;
-          background: #16213e;
-          border: 1px solid #333;
-          border-radius: 8px;
-          cursor: pointer;
-          transition: all 0.2s;
-          text-align: left;
-          color: inherit;
-        }
+  .sd2-session-list h3 {
+    color: #00d9ff;
+    margin-bottom: 0.75rem;
+  }
 
-        .sd-session-card:hover {
-          border-color: #00d9ff;
-          background: #1a2744;
-        }
+  .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;
+  }
 
-        .sd-session-app {
-          font-weight: 600;
-          color: #a78bfa;
-        }
+  .sd2-session-card:hover {
+    border-color: #00d9ff;
+    background: #1a2744;
+  }
 
-        .sd-session-id {
-          font-family: monospace;
-          font-size: 0.8rem;
-          color: #666;
-        }
+  .sd2-session-app { color: #a78bfa; font-weight: 600; }
+  .sd2-session-count { color: #00d9ff; }
 
-        .sd-session-count {
-          font-size: 0.875rem;
-          color: #00d9ff;
-        }
+  .sd2-loading {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+  }
 
-        .sd-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;
+  }
 
-        .sd-spinner {
-          width: 40px;
-          height: 40px;
-          border: 3px solid #333;
-          border-top-color: #00d9ff;
-          border-radius: 50%;
-          animation: spin 1s linear infinite;
-        }
+  @keyframes spin { to { transform: rotate(360deg); } }
 
-        @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;
+  }
 
-        .sd-main {
-          flex: 1;
-          padding: 1.5rem 2rem;
-          display: flex;
-          flex-direction: column;
-          gap: 1.5rem;
-        }
+  @media (max-width: 1200px) {
+    .sd2-main { grid-template-columns: 1fr; }
+  }
 
-        .sd-timeline {
-          flex-shrink: 0;
-        }
+  .sd2-left-panel, .sd2-right-panel {
+    display: flex;
+    flex-direction: column;
+    background: #1a1a2e;
+    border-radius: 12px;
+    overflow: hidden;
+    min-height: 500px;
+  }
 
-        .sd-panels {
-          flex: 1;
-          background: #1a1a2e;
-          border-radius: 12px;
-          overflow: hidden;
-          display: flex;
-          flex-direction: column;
-          min-height: 400px;
-        }
+  .sd2-tabs {
+    display: flex;
+    background: #16213e;
+    border-bottom: 1px solid #333;
+  }
 
-        .sd-panel-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;
+  }
 
-        .sd-panel-tab {
-          padding: 1rem 1.5rem;
-          border: none;
-          background: transparent;
-          color: #888;
-          cursor: pointer;
-          font-size: 0.875rem;
-          transition: all 0.2s;
-        }
+  .sd2-tab:hover { color: #ccc; background: #1a2744; }
 
-        .sd-panel-tab:hover {
-          color: #ccc;
-          background: #1a2744;
-        }
+  .sd2-tab.active {
+    color: #00d9ff;
+    background: #1a1a2e;
+    border-bottom-color: #00d9ff;
+  }
 
-        .sd-panel-tab.active {
-          color: #00d9ff;
-          background: #1a1a2e;
-          border-bottom: 2px solid #00d9ff;
-        }
+  .sd2-tab-content {
+    flex: 1;
+    overflow: auto;
+  }
 
-        .sd-panel-content {
-          flex: 1;
-          overflow: auto;
-        }
+  .sd2-timeline-panel {
+    padding: 1rem;
+  }
 
-        .sd-panel-empty {
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: #666;
-        }
+  .sd2-panel-empty {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+  }
 
-        .sd-footer {
-          padding: 0.75rem 2rem;
-          background: rgba(22, 33, 62, 0.5);
-          border-top: 1px solid #333;
-          font-size: 0.75rem;
-          color: #666;
-          text-align: center;
-        }
+  /* 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;
+  }
 
-        .sd-footer-sep {
-          margin: 0 0.5rem;
-        }
-      ` })
-  ] });
-}
+  .sd2-sep { margin: 0 0.5rem; }
+`;
 
 exports.DashboardProvider = DashboardProvider;
 exports.MutationInspector = MutationInspector;