state-surgeon 1.0.0 → 1.1.0

package/dist/dashboard/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React2, { useMemo, useState, useCallback, useEffect } from 'react';
+import React2, { useState, useMemo, useCallback, useEffect } from 'react';
 
 // src/dashboard/components/MutationInspector.tsx
 function MutationInspector({
@@ -317,13 +317,41 @@ function calculateDiff(before, after, path = "") {
   }
   return diffs;
 }
+function detectAnomaly(value) {
+  if (typeof value === "number" && isNaN(value)) return "nan";
+  if (value === void 0) return "undefined";
+  if (value === null) return "null";
+  if (value === "") return "empty-string";
+  if (typeof value === "number" && value < 0) return "negative";
+  return null;
+}
+function getAnomalyBadge(anomaly) {
+  switch (anomaly) {
+    case "nan":
+      return "\u26A0\uFE0F NaN";
+    case "undefined":
+      return "\u26A0\uFE0F undefined";
+    case "null":
+      return "\u26A1 null";
+    case "empty-string":
+      return "\u{1F4ED} empty";
+    case "negative":
+      return "\u2796 negative";
+    default:
+      return "";
+  }
+}
 function StateDiffViewer({
   previousState,
   nextState,
   diff: preDiff,
   defaultExpandDepth = 3,
+  viewMode = "split",
   className = ""
 }) {
+  const [activeTab, setActiveTab] = useState("diff");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [copiedPath, setCopiedPath] = useState(null);
   const diff = useMemo(
     () => preDiff || calculateDiff(previousState, nextState),
     [previousState, nextState, preDiff]
@@ -332,11 +360,165 @@ function StateDiffViewer({
     () => new Set(diff.map((d) => d.path)),
     [diff]
   );
-  return /* @__PURE__ */ jsxs("div", { className: `state-diff-viewer ${className}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "state-diff-viewer__panels", children: [
-      /* @__PURE__ */ jsxs("div", { className: "state-diff-viewer__panel", children: [
-        /* @__PURE__ */ jsx("h3", { className: "state-diff-viewer__title", children: "Before" }),
-        /* @__PURE__ */ jsx("div", { className: "state-diff-viewer__content", children: /* @__PURE__ */ jsx(
+  const groupedDiffs = useMemo(() => {
+    const adds = diff.filter((d) => d.operation === "ADD");
+    const updates = diff.filter((d) => d.operation === "UPDATE");
+    const removes = diff.filter((d) => d.operation === "REMOVE");
+    return { adds, updates, removes };
+  }, [diff]);
+  const anomalies = useMemo(() => {
+    const result = [];
+    for (const d of diff) {
+      if (d.operation !== "REMOVE") {
+        const anomaly = detectAnomaly(d.newValue);
+        if (anomaly) {
+          result.push({ path: d.path, type: anomaly, value: d.newValue });
+        }
+      }
+    }
+    return result;
+  }, [diff]);
+  const copyToClipboard = useCallback((value, path) => {
+    const text = typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
+    navigator.clipboard.writeText(text);
+    setCopiedPath(path);
+    setTimeout(() => setCopiedPath(null), 2e3);
+  }, []);
+  const copyFullState = useCallback((state, label) => {
+    navigator.clipboard.writeText(JSON.stringify(state, null, 2));
+    setCopiedPath(label);
+    setTimeout(() => setCopiedPath(null), 2e3);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: `state-diff-viewer-enhanced ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "sdv-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sdv-tabs", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `sdv-tab ${activeTab === "diff" ? "active" : ""}`,
+            onClick: () => setActiveTab("diff"),
+            children: [
+              "\u{1F4CA} Changes (",
+              diff.length,
+              ")"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `sdv-tab ${activeTab === "before" ? "active" : ""}`,
+            onClick: () => setActiveTab("before"),
+            children: "\u23EA Before"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `sdv-tab ${activeTab === "after" ? "active" : ""}`,
+            onClick: () => setActiveTab("after"),
+            children: "\u23E9 After"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `sdv-tab ${activeTab === "raw" ? "active" : ""}`,
+            onClick: () => setActiveTab("raw"),
+            children: "\u{1F4DD} Raw JSON"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "sdv-actions", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "\u{1F50D} Search paths...",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          className: "sdv-search"
+        }
+      ) })
+    ] }),
+    anomalies.length > 0 && /* @__PURE__ */ jsxs("div", { className: "sdv-anomalies", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sdv-anomaly-header", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdv-anomaly-icon", children: "\u{1F6A8}" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Potential Issues Detected (",
+          anomalies.length,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "sdv-anomaly-list", children: anomalies.map((a, i) => /* @__PURE__ */ jsxs("div", { className: `sdv-anomaly-item sdv-anomaly-${a.type}`, children: [
+        /* @__PURE__ */ jsx("code", { children: a.path }),
+        /* @__PURE__ */ jsx("span", { className: "sdv-anomaly-badge", children: getAnomalyBadge(a.type) })
+      ] }, i)) })
+    ] }),
+    activeTab === "diff" && /* @__PURE__ */ jsxs("div", { className: "sdv-summary", children: [
+      /* @__PURE__ */ jsxs("span", { className: "sdv-summary-item sdv-add", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdv-dot" }),
+        groupedDiffs.adds.length,
+        " added"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "sdv-summary-item sdv-update", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdv-dot" }),
+        groupedDiffs.updates.length,
+        " changed"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "sdv-summary-item sdv-remove", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdv-dot" }),
+        groupedDiffs.removes.length,
+        " removed"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "sdv-content", children: [
+      activeTab === "diff" && /* @__PURE__ */ jsx("div", { className: "sdv-diff-list", children: diff.length === 0 ? /* @__PURE__ */ jsx("div", { className: "sdv-empty", children: "No changes detected" }) : diff.filter((d) => !searchQuery || d.path.toLowerCase().includes(searchQuery.toLowerCase())).map((change, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `sdv-diff-item sdv-diff-${change.operation.toLowerCase()}`,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "sdv-diff-header", children: [
+              /* @__PURE__ */ jsx("span", { className: "sdv-diff-op", children: change.operation }),
+              /* @__PURE__ */ jsx("code", { className: "sdv-diff-path", children: change.path }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "sdv-copy-btn",
+                  onClick: () => copyToClipboard(change.newValue ?? change.oldValue, change.path),
+                  title: "Copy value",
+                  children: copiedPath === change.path ? "\u2713" : "\u{1F4CB}"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "sdv-diff-values", children: [
+              change.operation === "UPDATE" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "sdv-value sdv-value-old", children: [
+                  /* @__PURE__ */ jsx("span", { className: "sdv-value-label", children: "Before:" }),
+                  /* @__PURE__ */ jsx(ValueDisplay, { value: change.oldValue })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "sdv-arrow", children: "\u2192" }),
+                /* @__PURE__ */ jsxs("div", { className: "sdv-value sdv-value-new", children: [
+                  /* @__PURE__ */ jsx("span", { className: "sdv-value-label", children: "After:" }),
+                  /* @__PURE__ */ jsx(ValueDisplay, { value: change.newValue })
+                ] })
+              ] }),
+              change.operation === "ADD" && /* @__PURE__ */ jsx("div", { className: "sdv-value sdv-value-new", children: /* @__PURE__ */ jsx(ValueDisplay, { value: change.newValue }) }),
+              change.operation === "REMOVE" && /* @__PURE__ */ jsx("div", { className: "sdv-value sdv-value-old", children: /* @__PURE__ */ jsx(ValueDisplay, { value: change.oldValue }) })
+            ] })
+          ]
+        },
+        index
+      )) }),
+      activeTab === "before" && /* @__PURE__ */ jsxs("div", { className: "sdv-state-view", children: [
+        /* @__PURE__ */ jsx("div", { className: "sdv-state-actions", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => copyFullState(previousState, "before"),
+            className: "sdv-copy-full",
+            children: copiedPath === "before" ? "\u2713 Copied!" : "\u{1F4CB} Copy State"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
           StateTree,
           {
             value: previousState,
@@ -345,11 +527,18 @@ function StateDiffViewer({
             defaultExpandDepth,
             changeType: "before"
           }
-        ) })
+        )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "state-diff-viewer__panel", children: [
-        /* @__PURE__ */ jsx("h3", { className: "state-diff-viewer__title", children: "After" }),
-        /* @__PURE__ */ jsx("div", { className: "state-diff-viewer__content", children: /* @__PURE__ */ jsx(
+      activeTab === "after" && /* @__PURE__ */ jsxs("div", { className: "sdv-state-view", children: [
+        /* @__PURE__ */ jsx("div", { className: "sdv-state-actions", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => copyFullState(nextState, "after"),
+            className: "sdv-copy-full",
+            children: copiedPath === "after" ? "\u2713 Copied!" : "\u{1F4CB} Copy State"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
           StateTree,
           {
             value: nextState,
@@ -358,141 +547,404 @@ function StateDiffViewer({
             defaultExpandDepth,
             changeType: "after"
           }
-        ) })
-      ] })
-    ] }),
-    diff.length > 0 && /* @__PURE__ */ jsxs("div", { className: "state-diff-viewer__summary", children: [
-      /* @__PURE__ */ jsxs("h4", { children: [
-        "Changes (",
-        diff.length,
-        ")"
+        )
       ] }),
-      /* @__PURE__ */ jsx("ul", { className: "state-diff-viewer__changes", children: diff.map((change, index) => /* @__PURE__ */ jsxs(
-        "li",
-        {
-          className: `state-diff-viewer__change state-diff-viewer__change--${change.operation.toLowerCase()}`,
-          children: [
-            /* @__PURE__ */ jsx("code", { children: change.path }),
-            /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__change-type", children: change.operation }),
-            change.operation === "UPDATE" && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__value state-diff-viewer__value--old", children: formatValue(change.oldValue) }),
-              /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__arrow", children: "\u2192" }),
-              /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__value state-diff-viewer__value--new", children: formatValue(change.newValue) })
-            ] }),
-            change.operation === "ADD" && /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__value state-diff-viewer__value--new", children: formatValue(change.newValue) }),
-            change.operation === "REMOVE" && /* @__PURE__ */ jsx("span", { className: "state-diff-viewer__value state-diff-viewer__value--old", children: formatValue(change.oldValue) })
-          ]
-        },
-        index
-      )) })
+      activeTab === "raw" && /* @__PURE__ */ jsx("div", { className: "sdv-raw-view", children: /* @__PURE__ */ jsxs("div", { className: "sdv-raw-panels", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sdv-raw-panel", children: [
+          /* @__PURE__ */ jsx("h4", { children: "Before" }),
+          /* @__PURE__ */ jsx("pre", { children: JSON.stringify(previousState, null, 2) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sdv-raw-panel", children: [
+          /* @__PURE__ */ jsx("h4", { children: "After" }),
+          /* @__PURE__ */ jsx("pre", { children: JSON.stringify(nextState, null, 2) })
+        ] })
+      ] }) })
     ] }),
     /* @__PURE__ */ jsx("style", { children: `
-        .state-diff-viewer {
-          font-family: monospace;
-          font-size: 0.875rem;
+        .state-diff-viewer-enhanced {
+          background: #1a1a2e;
+          border-radius: 12px;
+          overflow: hidden;
+          font-family: system-ui, sans-serif;
           color: #e0e0e0;
         }
 
-        .state-diff-viewer__panels {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          gap: 1rem;
+        .sdv-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0.75rem 1rem;
+          background: #16213e;
+          border-bottom: 1px solid #333;
+          flex-wrap: wrap;
+          gap: 0.5rem;
         }
 
-        .state-diff-viewer__panel {
-          background: #16213e;
-          border-radius: 8px;
-          overflow: hidden;
+        .sdv-tabs {
+          display: flex;
+          gap: 0.25rem;
         }
 
-        .state-diff-viewer__title {
-          margin: 0;
-          padding: 0.75rem 1rem;
-          background: #1a1a2e;
+        .sdv-tab {
+          padding: 0.5rem 1rem;
+          border: none;
+          background: transparent;
+          color: #888;
+          cursor: pointer;
+          border-radius: 6px;
           font-size: 0.875rem;
-          font-weight: 600;
+          transition: all 0.2s;
+        }
+
+        .sdv-tab:hover {
+          background: #1f2b4d;
+          color: #ccc;
+        }
+
+        .sdv-tab.active {
+          background: #00d9ff20;
           color: #00d9ff;
         }
 
-        .state-diff-viewer__content {
-          padding: 1rem;
-          max-height: 400px;
-          overflow: auto;
+        .sdv-search {
+          padding: 0.5rem 1rem;
+          border: 1px solid #333;
+          border-radius: 6px;
+          background: #0f0f23;
+          color: #e0e0e0;
+          font-size: 0.875rem;
+          width: 200px;
         }
 
-        .state-diff-viewer__summary {
-          margin-top: 1rem;
+        .sdv-anomalies {
+          margin: 1rem;
           padding: 1rem;
-          background: #16213e;
+          background: #ef444420;
+          border: 1px solid #ef4444;
           border-radius: 8px;
         }
 
-        .state-diff-viewer__summary h4 {
-          margin: 0 0 0.5rem 0;
-          color: #00d9ff;
+        .sdv-anomaly-header {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-weight: 600;
+          margin-bottom: 0.75rem;
+          color: #fca5a5;
         }
 
-        .state-diff-viewer__changes {
-          list-style: none;
-          margin: 0;
-          padding: 0;
+        .sdv-anomaly-icon {
+          font-size: 1.25rem;
         }
 
-        .state-diff-viewer__change {
+        .sdv-anomaly-list {
           display: flex;
           flex-wrap: wrap;
+          gap: 0.5rem;
+        }
+
+        .sdv-anomaly-item {
+          display: flex;
           align-items: center;
           gap: 0.5rem;
-          padding: 0.5rem;
+          padding: 0.375rem 0.75rem;
+          background: #0f0f23;
           border-radius: 4px;
-          margin-bottom: 0.25rem;
+          font-size: 0.875rem;
         }
 
-        .state-diff-viewer__change--add {
-          background: rgba(34, 197, 94, 0.1);
-          border-left: 3px solid #22c55e;
+        .sdv-anomaly-item code {
+          color: #f472b6;
         }
 
-        .state-diff-viewer__change--update {
-          background: rgba(251, 191, 36, 0.1);
-          border-left: 3px solid #fbbf24;
+        .sdv-anomaly-badge {
+          font-size: 0.75rem;
+          padding: 0.125rem 0.375rem;
+          background: #ef444440;
+          border-radius: 3px;
         }
 
-        .state-diff-viewer__change--remove {
-          background: rgba(239, 68, 68, 0.1);
-          border-left: 3px solid #ef4444;
+        .sdv-summary {
+          display: flex;
+          gap: 1.5rem;
+          padding: 0.75rem 1rem;
+          background: #0f0f23;
+          border-bottom: 1px solid #333;
+        }
+
+        .sdv-summary-item {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-size: 0.875rem;
+        }
+
+        .sdv-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+        }
+
+        .sdv-add .sdv-dot { background: #22c55e; }
+        .sdv-update .sdv-dot { background: #fbbf24; }
+        .sdv-remove .sdv-dot { background: #ef4444; }
+
+        .sdv-content {
+          max-height: 500px;
+          overflow: auto;
+        }
+
+        .sdv-empty {
+          padding: 2rem;
+          text-align: center;
+          color: #666;
+        }
+
+        .sdv-diff-list {
+          padding: 1rem;
+        }
+
+        .sdv-diff-item {
+          margin-bottom: 0.75rem;
+          padding: 1rem;
+          background: #16213e;
+          border-radius: 8px;
+          border-left: 4px solid;
         }
 
-        .state-diff-viewer__change-type {
+        .sdv-diff-add { border-left-color: #22c55e; }
+        .sdv-diff-update { border-left-color: #fbbf24; }
+        .sdv-diff-remove { border-left-color: #ef4444; }
+
+        .sdv-diff-header {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          margin-bottom: 0.75rem;
+        }
+
+        .sdv-diff-op {
           font-size: 0.7rem;
-          padding: 0.125rem 0.375rem;
-          border-radius: 3px;
-          background: #333;
+          font-weight: 600;
+          padding: 0.25rem 0.5rem;
+          border-radius: 4px;
+          text-transform: uppercase;
+        }
+
+        .sdv-diff-add .sdv-diff-op { background: #22c55e30; color: #22c55e; }
+        .sdv-diff-update .sdv-diff-op { background: #fbbf2430; color: #fbbf24; }
+        .sdv-diff-remove .sdv-diff-op { background: #ef444430; color: #ef4444; }
+
+        .sdv-diff-path {
+          flex: 1;
+          font-family: 'Fira Code', monospace;
+          color: #a78bfa;
+        }
+
+        .sdv-copy-btn {
+          padding: 0.25rem 0.5rem;
+          border: none;
+          background: transparent;
           color: #888;
+          cursor: pointer;
+          border-radius: 4px;
+          font-size: 0.875rem;
         }
 
-        .state-diff-viewer__value {
-          padding: 0.125rem 0.375rem;
-          border-radius: 3px;
+        .sdv-copy-btn:hover {
+          background: #333;
+          color: #fff;
+        }
+
+        .sdv-diff-values {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          flex-wrap: wrap;
+        }
+
+        .sdv-value {
+          padding: 0.5rem 0.75rem;
+          border-radius: 6px;
+          font-family: 'Fira Code', monospace;
+          font-size: 0.875rem;
+          max-width: 300px;
+          overflow: auto;
         }
 
-        .state-diff-viewer__value--old {
-          background: rgba(239, 68, 68, 0.2);
+        .sdv-value-label {
+          display: block;
+          font-size: 0.7rem;
+          color: #666;
+          margin-bottom: 0.25rem;
+          font-family: system-ui;
+        }
+
+        .sdv-value-old {
+          background: #ef444420;
           color: #fca5a5;
-          text-decoration: line-through;
         }
 
-        .state-diff-viewer__value--new {
-          background: rgba(34, 197, 94, 0.2);
+        .sdv-value-new {
+          background: #22c55e20;
           color: #86efac;
         }
 
-        .state-diff-viewer__arrow {
+        .sdv-arrow {
           color: #666;
+          font-size: 1.25rem;
+        }
+
+        .sdv-state-view {
+          padding: 1rem;
+        }
+
+        .sdv-state-actions {
+          margin-bottom: 1rem;
+        }
+
+        .sdv-copy-full {
+          padding: 0.5rem 1rem;
+          border: 1px solid #333;
+          background: #16213e;
+          color: #e0e0e0;
+          border-radius: 6px;
+          cursor: pointer;
+          font-size: 0.875rem;
+        }
+
+        .sdv-copy-full:hover {
+          background: #1f2b4d;
+        }
+
+        .sdv-raw-view {
+          padding: 1rem;
+        }
+
+        .sdv-raw-panels {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 1rem;
+        }
+
+        .sdv-raw-panel {
+          background: #0f0f23;
+          border-radius: 8px;
+          overflow: hidden;
+        }
+
+        .sdv-raw-panel h4 {
+          margin: 0;
+          padding: 0.75rem 1rem;
+          background: #16213e;
+          color: #00d9ff;
+          font-size: 0.875rem;
+        }
+
+        .sdv-raw-panel pre {
+          margin: 0;
+          padding: 1rem;
+          font-size: 0.8rem;
+          overflow: auto;
+          max-height: 300px;
+        }
+
+        /* State tree styles */
+        .state-tree__toggle {
+          cursor: pointer;
+          color: #888;
+          user-select: none;
+        }
+
+        .state-tree__toggle:hover {
+          color: #00d9ff;
+        }
+
+        .state-tree__children {
+          margin-left: 1.5rem;
+          border-left: 1px solid #333;
+          padding-left: 0.75rem;
+        }
+
+        .state-tree__item {
+          padding: 0.25rem 0;
+        }
+
+        .state-tree__key {
+          color: #a78bfa;
+          margin-right: 0.5rem;
+        }
+
+        .state-tree__null { color: #f472b6; font-style: italic; }
+        .state-tree__undefined { color: #ef4444; font-style: italic; }
+        .state-tree__boolean { color: #fb923c; }
+        .state-tree__number { color: #22c55e; }
+        .state-tree__string { color: #fbbf24; }
+        .state-tree__empty { color: #666; }
+        .state-tree--changed {
+          background: #fbbf2430;
+          padding: 0 0.25rem;
+          border-radius: 3px;
+        }
+
+        .state-tree__anomaly {
+          display: inline-block;
+          margin-left: 0.5rem;
+          padding: 0.125rem 0.375rem;
+          background: #ef444440;
+          border-radius: 3px;
+          font-size: 0.7rem;
+          color: #fca5a5;
         }
       ` })
   ] });
 }
+function ValueDisplay({ value }) {
+  if (value === null) {
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__null", children: "null" });
+  }
+  if (value === void 0) {
+    return /* @__PURE__ */ jsxs("span", { className: "state-tree__undefined", children: [
+      "undefined",
+      /* @__PURE__ */ jsx("span", { className: "state-tree__anomaly", children: "\u26A0\uFE0F" })
+    ] });
+  }
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__boolean", children: String(value) });
+  }
+  if (typeof value === "number") {
+    if (isNaN(value)) {
+      return /* @__PURE__ */ jsxs("span", { className: "state-tree__undefined", children: [
+        "NaN",
+        /* @__PURE__ */ jsx("span", { className: "state-tree__anomaly", children: "\u26A0\uFE0F Bug!" })
+      ] });
+    }
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__number", children: String(value) });
+  }
+  if (typeof value === "string") {
+    if (value === "") {
+      return /* @__PURE__ */ jsx("span", { className: "state-tree__empty", children: '""' });
+    }
+    const display = value.length > 50 ? value.slice(0, 50) + "..." : value;
+    return /* @__PURE__ */ jsxs("span", { className: "state-tree__string", children: [
+      '"',
+      display,
+      '"'
+    ] });
+  }
+  if (Array.isArray(value)) {
+    return /* @__PURE__ */ jsxs("span", { className: "state-tree__empty", children: [
+      "[",
+      value.length,
+      " items]"
+    ] });
+  }
+  if (typeof value === "object") {
+    const keys = Object.keys(value);
+    return /* @__PURE__ */ jsx("span", { className: "state-tree__empty", children: "{" + keys.length + " keys}" });
+  }
+  return /* @__PURE__ */ jsx("span", { children: String(value) });
+}
 function StateTree({
   value,
   path,
@@ -508,19 +960,29 @@ function StateTree({
     return /* @__PURE__ */ jsx("span", { className: "state-tree__null", children: "null" });
   }
   if (value === void 0) {
-    return /* @__PURE__ */ jsx("span", { className: "state-tree__undefined", children: "undefined" });
+    return /* @__PURE__ */ jsxs("span", { className: "state-tree__undefined", children: [
+      "undefined",
+      /* @__PURE__ */ jsx("span", { className: "state-tree__anomaly", children: "\u26A0\uFE0F" })
+    ] });
   }
   if (typeof value === "boolean") {
     return /* @__PURE__ */ jsx("span", { className: "state-tree__boolean", children: String(value) });
   }
   if (typeof value === "number") {
+    if (isNaN(value)) {
+      return /* @__PURE__ */ jsxs("span", { className: `state-tree__undefined ${isChanged ? "state-tree--changed" : ""}`, children: [
+        "NaN",
+        /* @__PURE__ */ jsx("span", { className: "state-tree__anomaly", children: "\u26A0\uFE0F BUG!" })
+      ] });
+    }
     return /* @__PURE__ */ jsx("span", { className: `state-tree__number ${isChanged ? "state-tree--changed" : ""}`, children: String(value) });
   }
   if (typeof value === "string") {
     return /* @__PURE__ */ jsxs("span", { className: `state-tree__string ${isChanged ? "state-tree--changed" : ""}`, children: [
       '"',
       value,
-      '"'
+      '"',
+      value === "" && /* @__PURE__ */ jsx("span", { className: "state-tree__anomaly", children: "empty" })
     ] });
   }
   if (Array.isArray(value)) {
@@ -565,40 +1027,31 @@ function StateTree({
         entries.length,
         ")"
       ] }),
-      isExpanded && /* @__PURE__ */ jsx("div", { className: "state-tree__children", children: entries.map(([key, val]) => /* @__PURE__ */ jsxs("div", { className: "state-tree__item", children: [
-        /* @__PURE__ */ jsxs("span", { className: "state-tree__key", children: [
-          key,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx(
-          StateTree,
-          {
-            value: val,
-            path: path ? `${path}.${key}` : key,
-            changedPaths,
-            defaultExpandDepth,
-            depth: depth + 1,
-            changeType
-          }
-        )
-      ] }, key)) })
+      isExpanded && /* @__PURE__ */ jsx("div", { className: "state-tree__children", children: entries.map(([key, val]) => {
+        const childPath = path ? `${path}.${key}` : key;
+        const childChanged = changedPaths.has(childPath);
+        return /* @__PURE__ */ jsxs("div", { className: "state-tree__item", children: [
+          /* @__PURE__ */ jsxs("span", { className: `state-tree__key ${childChanged ? "state-tree--changed" : ""}`, children: [
+            key,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx(
+            StateTree,
+            {
+              value: val,
+              path: childPath,
+              changedPaths,
+              defaultExpandDepth,
+              depth: depth + 1,
+              changeType
+            }
+          )
+        ] }, key);
+      }) })
     ] });
   }
   return /* @__PURE__ */ jsx("span", { children: String(value) });
 }
-function formatValue(value) {
-  if (value === void 0) return "undefined";
-  if (value === null) return "null";
-  if (typeof value === "object") {
-    try {
-      const str = JSON.stringify(value);
-      return str.length > 50 ? str.slice(0, 50) + "..." : str;
-    } catch {
-      return "[Object]";
-    }
-  }
-  return String(value);
-}
 var sourceColors = {
   react: "#61dafb",
   redux: "#764abc",
@@ -608,6 +1061,15 @@ var sourceColors = {
   api: "#3b82f6",
   custom: "#6b7280"
 };
+var sourceEmojis = {
+  react: "\u269B\uFE0F",
+  redux: "\u{1F504}",
+  zustand: "\u{1F43B}",
+  express: "\u{1F682}",
+  websocket: "\u{1F50C}",
+  api: "\u{1F310}",
+  custom: "\u2699\uFE0F"
+};
 function TimelineScrubber({
   mutations,
   selectedIndex,
@@ -617,8 +1079,12 @@ function TimelineScrubber({
   onPause,
   onStepForward,
   onStepBackward,
+  playbackSpeed = 1,
+  onSpeedChange,
   className = ""
 }) {
+  const [filter, setFilter] = useState("all");
+  const [hoverIndex, setHoverIndex] = useState(null);
   const handleSliderChange = useCallback(
     (e) => {
       const index = parseInt(e.target.value, 10);
@@ -636,54 +1102,128 @@ function TimelineScrubber({
     },
     [mutations, onSelect]
   );
+  const sourceStats = useMemo(() => {
+    const stats = {};
+    for (const m of mutations) {
+      stats[m.source] = (stats[m.source] || 0) + 1;
+    }
+    return stats;
+  }, [mutations]);
+  useMemo(() => {
+    if (filter === "all") return mutations;
+    return mutations.filter((m) => m.source === filter);
+  }, [mutations, filter]);
+  const anomalyCount = useMemo(() => {
+    let count = 0;
+    for (const m of mutations) {
+      if (m.diff) {
+        for (const d of m.diff) {
+          if (d.newValue === void 0 || typeof d.newValue === "number" && isNaN(d.newValue)) {
+            count++;
+            break;
+          }
+        }
+      }
+    }
+    return count;
+  }, [mutations]);
   const formatTime = (timestamp) => {
     const date = new Date(timestamp);
     return date.toLocaleTimeString("en-US", {
       hour12: false,
       hour: "2-digit",
       minute: "2-digit",
-      second: "2-digit",
-      fractionalSecondDigits: 3
+      second: "2-digit"
     });
   };
+  const formatDuration = (ms) => {
+    if (!ms) return "";
+    if (ms < 1) return `${(ms * 1e3).toFixed(0)}\u03BCs`;
+    if (ms < 1e3) return `${ms.toFixed(0)}ms`;
+    return `${(ms / 1e3).toFixed(1)}s`;
+  };
   if (mutations.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: `timeline-scrubber timeline-scrubber--empty ${className}`, children: /* @__PURE__ */ jsx("p", { children: "No mutations recorded yet" }) });
+    return /* @__PURE__ */ jsx("div", { className: `timeline-scrubber timeline-scrubber--empty ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "ts-empty-state", children: [
+      /* @__PURE__ */ jsx("span", { className: "ts-empty-icon", children: "\u{1F4ED}" }),
+      /* @__PURE__ */ jsx("h3", { children: "No Mutations Yet" }),
+      /* @__PURE__ */ jsx("p", { children: "Start interacting with your app to capture state changes" })
+    ] }) });
   }
   const selectedMutation = mutations[selectedIndex];
+  const previewMutation = hoverIndex !== null ? mutations[hoverIndex] : selectedMutation;
   return /* @__PURE__ */ jsxs("div", { className: `timeline-scrubber ${className}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "timeline-scrubber__header", children: [
-      /* @__PURE__ */ jsxs("span", { className: "timeline-scrubber__count", children: [
-        selectedIndex + 1,
-        " / ",
-        mutations.length,
-        " mutations"
+    /* @__PURE__ */ jsxs("div", { className: "ts-stats", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ts-stat-main", children: [
+        /* @__PURE__ */ jsx("span", { className: "ts-stat-value", children: mutations.length }),
+        /* @__PURE__ */ jsx("span", { className: "ts-stat-label", children: "mutations" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ts-stat-sources", children: Object.entries(sourceStats).map(([source, count]) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: `ts-source-badge ${filter === source ? "active" : ""}`,
+          style: { "--source-color": sourceColors[source] },
+          onClick: () => setFilter(filter === source ? "all" : source),
+          title: `${source}: ${count} mutations`,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "ts-source-emoji", children: sourceEmojis[source] }),
+            /* @__PURE__ */ jsx("span", { className: "ts-source-count", children: count })
+          ]
+        },
+        source
+      )) }),
+      anomalyCount > 0 && /* @__PURE__ */ jsxs("div", { className: "ts-anomaly-badge", children: [
+        "\u26A0\uFE0F ",
+        anomalyCount,
+        " issue",
+        anomalyCount > 1 ? "s" : ""
       ] }),
-      selectedMutation && /* @__PURE__ */ jsx("span", { className: "timeline-scrubber__time", children: formatTime(selectedMutation.timestamp) })
+      /* @__PURE__ */ jsxs("div", { className: "ts-position", children: [
+        /* @__PURE__ */ jsx("span", { className: "ts-current", children: selectedIndex + 1 }),
+        /* @__PURE__ */ jsx("span", { className: "ts-separator", children: "/" }),
+        /* @__PURE__ */ jsx("span", { className: "ts-total", children: mutations.length })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "timeline-scrubber__track", children: [
-      mutations.map((mutation, index) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "ts-chart", children: /* @__PURE__ */ jsxs("div", { className: "ts-chart-track", children: [
+      mutations.map((mutation, index) => {
+        const isSelected = index === selectedIndex;
+        const isHovered = index === hoverIndex;
+        const hasAnomaly = mutation.diff?.some(
+          (d) => d.newValue === void 0 || typeof d.newValue === "number" && isNaN(d.newValue)
+        );
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `ts-marker ${isSelected ? "selected" : ""} ${isHovered ? "hovered" : ""} ${hasAnomaly ? "anomaly" : ""}`,
+            style: {
+              left: `${index / Math.max(mutations.length - 1, 1) * 100}%`,
+              backgroundColor: sourceColors[mutation.source] || sourceColors.custom
+            },
+            onClick: () => handleMarkerClick(index),
+            onMouseEnter: () => setHoverIndex(index),
+            onMouseLeave: () => setHoverIndex(null)
+          },
+          mutation.id
+        );
+      }),
+      /* @__PURE__ */ jsx(
         "div",
         {
-          className: `timeline-scrubber__marker ${index === selectedIndex ? "timeline-scrubber__marker--selected" : ""}`,
+          className: "ts-progress",
           style: {
-            left: `${index / (mutations.length - 1 || 1) * 100}%`,
-            backgroundColor: sourceColors[mutation.source] || sourceColors.custom
-          },
-          onClick: () => handleMarkerClick(index),
-          title: `${mutation.source}: ${mutation.actionType}${mutation.component ? ` @ ${mutation.component}` : ""}`
-        },
-        mutation.id
-      )),
+            width: `${selectedIndex / Math.max(mutations.length - 1, 1) * 100}%`
+          }
+        }
+      ),
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "timeline-scrubber__position",
+          className: "ts-cursor",
           style: {
-            left: `${selectedIndex / (mutations.length - 1 || 1) * 100}%`
+            left: `${selectedIndex / Math.max(mutations.length - 1, 1) * 100}%`
           }
         }
       )
-    ] }),
+    ] }) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -692,189 +1232,446 @@ function TimelineScrubber({
         max: mutations.length - 1,
         value: selectedIndex,
         onChange: handleSliderChange,
-        className: "timeline-scrubber__slider"
+        className: "ts-slider"
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "timeline-scrubber__controls", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: onStepBackward,
-          disabled: selectedIndex === 0,
-          className: "timeline-scrubber__button",
-          title: "Step Backward",
-          children: "\u23EE"
-        }
-      ),
-      isPlaying ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: onPause,
-          className: "timeline-scrubber__button timeline-scrubber__button--primary",
-          title: "Pause",
-          children: "\u23F8"
-        }
-      ) : /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: onPlay,
-          disabled: selectedIndex === mutations.length - 1,
-          className: "timeline-scrubber__button timeline-scrubber__button--primary",
-          title: "Play",
-          children: "\u25B6"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: onStepForward,
-          disabled: selectedIndex === mutations.length - 1,
-          className: "timeline-scrubber__button",
-          title: "Step Forward",
-          children: "\u23ED"
-        }
-      )
+    previewMutation && /* @__PURE__ */ jsxs("div", { className: "ts-preview", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ts-preview-header", children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "ts-preview-source",
+            style: { backgroundColor: sourceColors[previewMutation.source] },
+            children: [
+              sourceEmojis[previewMutation.source],
+              " ",
+              previewMutation.source
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ts-preview-action", children: previewMutation.actionType }),
+        previewMutation.duration && /* @__PURE__ */ jsx("span", { className: "ts-preview-duration", children: formatDuration(previewMutation.duration) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ts-preview-details", children: [
+        previewMutation.component && /* @__PURE__ */ jsx("span", { className: "ts-preview-component", children: previewMutation.component }),
+        /* @__PURE__ */ jsx("span", { className: "ts-preview-time", children: formatTime(previewMutation.timestamp) })
+      ] }),
+      previewMutation.diff && previewMutation.diff.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ts-preview-changes", children: [
+        previewMutation.diff.slice(0, 3).map((d, i) => /* @__PURE__ */ jsx("code", { className: `ts-preview-path ts-preview-${d.operation.toLowerCase()}`, children: d.path }, i)),
+        previewMutation.diff.length > 3 && /* @__PURE__ */ jsxs("span", { className: "ts-preview-more", children: [
+          "+",
+          previewMutation.diff.length - 3,
+          " more"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ts-controls", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ts-control-group", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onStepBackward,
+            disabled: selectedIndex === 0,
+            className: "ts-btn",
+            title: "Previous mutation (\u2190)",
+            children: "\u23EE\uFE0F"
+          }
+        ),
+        isPlaying ? /* @__PURE__ */ jsx("button", { onClick: onPause, className: "ts-btn ts-btn-primary", title: "Pause", children: "\u23F8\uFE0F" }) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onPlay,
+            disabled: selectedIndex === mutations.length - 1,
+            className: "ts-btn ts-btn-primary",
+            title: "Play through timeline",
+            children: "\u25B6\uFE0F"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onStepForward,
+            disabled: selectedIndex === mutations.length - 1,
+            className: "ts-btn",
+            title: "Next mutation (\u2192)",
+            children: "\u23ED\uFE0F"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ts-control-group", children: [
+        /* @__PURE__ */ jsx("label", { className: "ts-speed-label", children: "Speed:" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: playbackSpeed,
+            onChange: (e) => onSpeedChange?.(Number(e.target.value)),
+            className: "ts-speed-select",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: 0.5, children: "0.5x" }),
+              /* @__PURE__ */ jsx("option", { value: 1, children: "1x" }),
+              /* @__PURE__ */ jsx("option", { value: 2, children: "2x" }),
+              /* @__PURE__ */ jsx("option", { value: 4, children: "4x" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ts-control-group", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "ts-btn ts-btn-text",
+            onClick: () => onSelect(0, mutations[0]),
+            disabled: selectedIndex === 0,
+            children: "\u23EA Start"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "ts-btn ts-btn-text",
+            onClick: () => onSelect(mutations.length - 1, mutations[mutations.length - 1]),
+            disabled: selectedIndex === mutations.length - 1,
+            children: "End \u23E9"
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "timeline-scrubber__legend", children: Object.entries(sourceColors).map(([source, color]) => /* @__PURE__ */ jsxs("span", { className: "timeline-scrubber__legend-item", children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "timeline-scrubber__legend-dot",
-          style: { backgroundColor: color }
-        }
-      ),
-      source
-    ] }, source)) }),
     /* @__PURE__ */ jsx("style", { children: `
         .timeline-scrubber {
-          padding: 1rem;
           background: #1a1a2e;
-          border-radius: 8px;
+          border-radius: 12px;
+          padding: 1.25rem;
           color: #fff;
         }
 
         .timeline-scrubber--empty {
+          padding: 3rem;
+        }
+
+        .ts-empty-state {
           text-align: center;
+        }
+
+        .ts-empty-icon {
+          font-size: 3rem;
+          display: block;
+          margin-bottom: 1rem;
+        }
+
+        .ts-empty-state h3 {
+          margin: 0 0 0.5rem;
           color: #888;
         }
 
-        .timeline-scrubber__header {
+        .ts-empty-state p {
+          margin: 0;
+          color: #666;
+          font-size: 0.875rem;
+        }
+
+        .ts-stats {
           display: flex;
-          justify-content: space-between;
-          margin-bottom: 0.5rem;
+          align-items: center;
+          gap: 1.5rem;
+          margin-bottom: 1rem;
+          flex-wrap: wrap;
+        }
+
+        .ts-stat-main {
+          display: flex;
+          align-items: baseline;
+          gap: 0.5rem;
+        }
+
+        .ts-stat-value {
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: #00d9ff;
+        }
+
+        .ts-stat-label {
+          font-size: 0.875rem;
+          color: #888;
+        }
+
+        .ts-stat-sources {
+          display: flex;
+          gap: 0.5rem;
+        }
+
+        .ts-source-badge {
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+          padding: 0.375rem 0.625rem;
+          border: 1px solid transparent;
+          border-radius: 20px;
+          background: var(--source-color, #666)20;
+          color: var(--source-color, #888);
+          cursor: pointer;
+          font-size: 0.75rem;
+          transition: all 0.2s;
+        }
+
+        .ts-source-badge:hover, .ts-source-badge.active {
+          background: var(--source-color, #666)40;
+          border-color: var(--source-color, #666);
+        }
+
+        .ts-source-emoji {
+          font-size: 0.875rem;
+        }
+
+        .ts-anomaly-badge {
+          padding: 0.375rem 0.75rem;
+          background: #ef444430;
+          color: #fca5a5;
+          border-radius: 20px;
+          font-size: 0.75rem;
+          font-weight: 600;
+        }
+
+        .ts-position {
+          margin-left: auto;
+          font-family: 'Fira Code', monospace;
           font-size: 0.875rem;
         }
 
-        .timeline-scrubber__count {
+        .ts-current {
           color: #00d9ff;
           font-weight: 600;
         }
 
-        .timeline-scrubber__time {
+        .ts-separator {
+          color: #444;
+          margin: 0 0.25rem;
+        }
+
+        .ts-total {
+          color: #666;
+        }
+
+        .ts-chart {
+          margin-bottom: 0.5rem;
+        }
+
+        .ts-chart-track {
+          position: relative;
+          height: 32px;
+          background: #16213e;
+          border-radius: 8px;
+          overflow: hidden;
+        }
+
+        .ts-progress {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          background: linear-gradient(90deg, #00d9ff20, #00d9ff10);
+          pointer-events: none;
+        }
+
+        .ts-cursor {
+          position: absolute;
+          top: 0;
+          width: 3px;
+          height: 100%;
+          background: #00d9ff;
+          border-radius: 1.5px;
+          pointer-events: none;
+          box-shadow: 0 0 10px #00d9ff80;
+        }
+
+        .ts-marker {
+          position: absolute;
+          width: 6px;
+          height: 16px;
+          top: 8px;
+          margin-left: -3px;
+          border-radius: 3px;
+          cursor: pointer;
+          opacity: 0.6;
+          transition: all 0.15s;
+        }
+
+        .ts-marker:hover, .ts-marker.hovered {
+          opacity: 1;
+          transform: scaleY(1.3);
+        }
+
+        .ts-marker.selected {
+          opacity: 1;
+          box-shadow: 0 0 8px currentColor;
+          transform: scaleY(1.4);
+        }
+
+        .ts-marker.anomaly {
+          border: 2px solid #ef4444;
+        }
+
+        .ts-slider {
+          width: 100%;
+          height: 4px;
+          margin: 0.5rem 0;
+          cursor: pointer;
+          -webkit-appearance: none;
+          background: transparent;
+        }
+
+        .ts-slider::-webkit-slider-runnable-track {
+          height: 4px;
+          background: #333;
+          border-radius: 2px;
+        }
+
+        .ts-slider::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          width: 16px;
+          height: 16px;
+          margin-top: -6px;
+          background: #00d9ff;
+          border-radius: 50%;
+          cursor: pointer;
+        }
+
+        .ts-preview {
+          margin: 1rem 0;
+          padding: 1rem;
+          background: #16213e;
+          border-radius: 8px;
+          border-left: 3px solid #00d9ff;
+        }
+
+        .ts-preview-header {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          margin-bottom: 0.5rem;
+        }
+
+        .ts-preview-source {
+          padding: 0.25rem 0.5rem;
+          border-radius: 4px;
+          font-size: 0.75rem;
+          font-weight: 600;
+          color: #000;
+        }
+
+        .ts-preview-action {
+          font-weight: 600;
+          color: #e0e0e0;
+        }
+
+        .ts-preview-duration {
+          margin-left: auto;
+          font-size: 0.75rem;
+          color: #888;
+          font-family: 'Fira Code', monospace;
+        }
+
+        .ts-preview-details {
+          display: flex;
+          gap: 1rem;
+          font-size: 0.875rem;
           color: #888;
-          font-family: monospace;
         }
 
-        .timeline-scrubber__track {
-          position: relative;
-          height: 24px;
-          background: #16213e;
-          border-radius: 4px;
-          margin-bottom: 0.5rem;
+        .ts-preview-component {
+          color: #a78bfa;
         }
 
-        .timeline-scrubber__marker {
-          position: absolute;
-          width: 4px;
-          height: 16px;
-          top: 4px;
-          border-radius: 2px;
-          cursor: pointer;
-          transition: transform 0.1s, opacity 0.1s;
-          opacity: 0.7;
+        .ts-preview-changes {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+          margin-top: 0.75rem;
         }
 
-        .timeline-scrubber__marker:hover {
-          transform: scaleY(1.2);
-          opacity: 1;
+        .ts-preview-path {
+          padding: 0.25rem 0.5rem;
+          border-radius: 4px;
+          font-size: 0.75rem;
         }
 
-        .timeline-scrubber__marker--selected {
-          opacity: 1;
-          box-shadow: 0 0 8px currentColor;
-        }
+        .ts-preview-add { background: #22c55e20; color: #86efac; }
+        .ts-preview-update { background: #fbbf2420; color: #fcd34d; }
+        .ts-preview-remove { background: #ef444420; color: #fca5a5; }
 
-        .timeline-scrubber__position {
-          position: absolute;
-          width: 2px;
-          height: 24px;
-          top: 0;
-          background: #fff;
-          border-radius: 1px;
-          pointer-events: none;
+        .ts-preview-more {
+          font-size: 0.75rem;
+          color: #666;
+          padding: 0.25rem;
         }
 
-        .timeline-scrubber__slider {
-          width: 100%;
-          margin: 0.5rem 0;
-          cursor: pointer;
+        .ts-controls {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 1.5rem;
+          padding-top: 0.5rem;
+          flex-wrap: wrap;
         }
 
-        .timeline-scrubber__controls {
+        .ts-control-group {
           display: flex;
-          justify-content: center;
+          align-items: center;
           gap: 0.5rem;
-          margin: 0.5rem 0;
         }
 
-        .timeline-scrubber__button {
-          padding: 0.5rem 1rem;
+        .ts-btn {
+          padding: 0.5rem 0.75rem;
           border: none;
-          border-radius: 4px;
+          border-radius: 8px;
           background: #16213e;
           color: #fff;
           cursor: pointer;
           font-size: 1rem;
-          transition: background 0.2s;
+          transition: all 0.2s;
         }
 
-        .timeline-scrubber__button:hover:not(:disabled) {
+        .ts-btn:hover:not(:disabled) {
           background: #1f2b4d;
         }
 
-        .timeline-scrubber__button:disabled {
-          opacity: 0.5;
+        .ts-btn:disabled {
+          opacity: 0.4;
           cursor: not-allowed;
         }
 
-        .timeline-scrubber__button--primary {
+        .ts-btn-primary {
           background: #00d9ff;
           color: #000;
         }
 
-        .timeline-scrubber__button--primary:hover:not(:disabled) {
+        .ts-btn-primary:hover:not(:disabled) {
           background: #00b8e6;
         }
 
-        .timeline-scrubber__legend {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 1rem;
-          margin-top: 0.5rem;
-          font-size: 0.75rem;
+        .ts-btn-text {
+          background: transparent;
+          color: #888;
+          font-size: 0.875rem;
         }
 
-        .timeline-scrubber__legend-item {
-          display: flex;
-          align-items: center;
-          gap: 0.25rem;
+        .ts-btn-text:hover:not(:disabled) {
+          color: #fff;
+          background: transparent;
+        }
+
+        .ts-speed-label {
+          font-size: 0.875rem;
           color: #888;
         }
 
-        .timeline-scrubber__legend-dot {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
+        .ts-speed-select {
+          padding: 0.375rem 0.5rem;
+          border: 1px solid #333;
+          border-radius: 6px;
+          background: #16213e;
+          color: #e0e0e0;
+          font-size: 0.875rem;
+          cursor: pointer;
         }
       ` })
   ] });
@@ -992,44 +1789,139 @@ function DashboardContent() {
     loadSessions
   } = useDashboard();
   const playback = usePlayback(timeline);
-  React2.useEffect(() => {
+  const [activePanel, setActivePanel] = useState("diff");
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  useEffect(() => {
     if (playback.currentMutation) {
       selectMutation(playback.currentMutation);
     }
   }, [playback.currentMutation, selectMutation]);
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const interval = setInterval(loadSessions, 5e3);
+    return () => clearInterval(interval);
+  }, [autoRefresh, loadSessions]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.target instanceof HTMLInputElement) return;
+      switch (e.key) {
+        case "ArrowLeft":
+          playback.stepBackward();
+          break;
+        case "ArrowRight":
+          playback.stepForward();
+          break;
+        case " ":
+          e.preventDefault();
+          playback.isPlaying ? playback.pause() : playback.play();
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [playback]);
   return /* @__PURE__ */ jsxs("div", { className: "surgeon-dashboard", children: [
-    /* @__PURE__ */ jsxs("header", { className: "surgeon-dashboard__header", children: [
-      /* @__PURE__ */ jsx("h1", { className: "surgeon-dashboard__logo", children: "\u{1F52C} State Surgeon" }),
-      /* @__PURE__ */ jsxs("div", { className: "surgeon-dashboard__session-select", children: [
-        /* @__PURE__ */ jsxs(
-          "select",
+    /* @__PURE__ */ jsxs("header", { className: "sd-header", children: [
+      /* @__PURE__ */ jsx("div", { className: "sd-header-left", children: /* @__PURE__ */ jsxs("h1", { className: "sd-logo", children: [
+        /* @__PURE__ */ jsx("span", { className: "sd-logo-icon", children: "\u{1F52C}" }),
+        /* @__PURE__ */ jsx("span", { className: "sd-logo-text", children: "State Surgeon" }),
+        /* @__PURE__ */ jsx("span", { className: "sd-version", children: "v1.1.0" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "sd-header-center", children: /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: currentSession?.id || "",
+          onChange: (e) => selectSession(e.target.value),
+          disabled: isLoading,
+          className: "sd-session-select",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "Select a session..." }),
+            sessions.map((session) => /* @__PURE__ */ jsxs("option", { value: session.id, children: [
+              session.appId,
+              " \u2022 ",
+              session.id.slice(0, 8),
+              "... \u2022 ",
+              session.mutationCount,
+              " mutations"
+            ] }, session.id))
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "sd-header-right", children: [
+        /* @__PURE__ */ jsxs("label", { className: "sd-auto-refresh", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: autoRefresh,
+              onChange: (e) => setAutoRefresh(e.target.checked)
+            }
+          ),
+          "Auto-refresh"
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: loadSessions, disabled: isLoading, className: "sd-refresh-btn", children: isLoading ? "\u23F3" : "\u{1F504}" })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxs("div", { className: "sd-error", children: [
+      /* @__PURE__ */ jsx("span", { className: "sd-error-icon", children: "\u274C" }),
+      /* @__PURE__ */ jsx("p", { children: error })
+    ] }),
+    !currentSession && !isLoading && /* @__PURE__ */ jsx("div", { className: "sd-welcome", children: /* @__PURE__ */ jsxs("div", { className: "sd-welcome-content", children: [
+      /* @__PURE__ */ jsx("div", { className: "sd-welcome-icon", children: "\u{1F52C}" }),
+      /* @__PURE__ */ jsx("h2", { children: "Welcome to State Surgeon" }),
+      /* @__PURE__ */ jsx("p", { children: "A forensic debugging platform for JavaScript applications" }),
+      sessions.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "sd-welcome-steps", children: [
+        /* @__PURE__ */ jsx("h3", { children: "Getting Started" }),
+        /* @__PURE__ */ jsxs("ol", { children: [
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("strong", { children: "Install the client in your app:" }),
+            /* @__PURE__ */ jsx("pre", { children: `import { StateSurgeonClient, instrumentReact } from 'state-surgeon/instrument';
+
+const client = new StateSurgeonClient({ appId: 'my-app' });
+instrumentReact(React);` })
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("strong", { children: "Interact with your application" }),
+            " to generate state mutations"
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("strong", { children: "Select a session above" }),
+            " to start debugging"
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "sd-welcome-sessions", children: [
+        /* @__PURE__ */ jsxs("h3", { children: [
+          "Available Sessions (",
+          sessions.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "sd-session-list", children: sessions.map((session) => /* @__PURE__ */ jsxs(
+          "button",
           {
-            value: currentSession?.id || "",
-            onChange: (e) => selectSession(e.target.value),
-            disabled: isLoading,
+            className: "sd-session-card",
+            onClick: () => selectSession(session.id),
             children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: "Select a session..." }),
-              sessions.map((session) => /* @__PURE__ */ jsxs("option", { value: session.id, children: [
-                session.appId,
-                " - ",
+              /* @__PURE__ */ jsx("span", { className: "sd-session-app", children: session.appId }),
+              /* @__PURE__ */ jsxs("span", { className: "sd-session-id", children: [
                 session.id.slice(0, 16),
-                "... (",
+                "..."
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "sd-session-count", children: [
                 session.mutationCount,
-                " mutations)"
-              ] }, session.id))
+                " mutations"
+              ] })
             ]
-          }
-        ),
-        /* @__PURE__ */ jsx("button", { onClick: loadSessions, disabled: isLoading, children: "\u{1F504}" })
+          },
+          session.id
+        )) })
       ] })
-    ] }),
-    error && /* @__PURE__ */ jsx("div", { className: "surgeon-dashboard__error", children: /* @__PURE__ */ jsxs("p", { children: [
-      "Error: ",
-      error
     ] }) }),
-    isLoading && /* @__PURE__ */ jsx("div", { className: "surgeon-dashboard__loading", children: /* @__PURE__ */ jsx("p", { children: "Loading..." }) }),
-    currentSession && !isLoading && /* @__PURE__ */ jsxs("div", { className: "surgeon-dashboard__main", children: [
-      /* @__PURE__ */ jsx("section", { className: "surgeon-dashboard__timeline", children: /* @__PURE__ */ jsx(
+    isLoading && !currentSession && /* @__PURE__ */ jsxs("div", { className: "sd-loading", children: [
+      /* @__PURE__ */ jsx("div", { className: "sd-spinner" }),
+      /* @__PURE__ */ jsx("p", { children: "Loading sessions..." })
+    ] }),
+    currentSession && /* @__PURE__ */ jsxs("div", { className: "sd-main", children: [
+      /* @__PURE__ */ jsx("section", { className: "sd-timeline", children: /* @__PURE__ */ jsx(
         TimelineScrubber,
         {
           mutations: timeline,
@@ -1042,135 +1934,373 @@ function DashboardContent() {
           onPlay: playback.play,
           onPause: playback.pause,
           onStepForward: playback.stepForward,
-          onStepBackward: playback.stepBackward
+          onStepBackward: playback.stepBackward,
+          playbackSpeed: playback.playbackSpeed,
+          onSpeedChange: playback.setSpeed
         }
       ) }),
-      /* @__PURE__ */ jsxs("div", { className: "surgeon-dashboard__content", children: [
-        /* @__PURE__ */ jsx("section", { className: "surgeon-dashboard__diff", children: selectedMutation && /* @__PURE__ */ jsx(
-          StateDiffViewer,
-          {
-            previousState: selectedMutation.previousState,
-            nextState: selectedMutation.nextState,
-            diff: selectedMutation.diff
-          }
-        ) }),
-        /* @__PURE__ */ jsx("section", { className: "surgeon-dashboard__inspector", children: /* @__PURE__ */ jsx(MutationInspector, { mutation: selectedMutation }) })
+      /* @__PURE__ */ jsxs("div", { className: "sd-panels", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sd-panel-tabs", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `sd-panel-tab ${activePanel === "diff" ? "active" : ""}`,
+              onClick: () => setActivePanel("diff"),
+              children: "\u{1F4CA} State Changes"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `sd-panel-tab ${activePanel === "inspector" ? "active" : ""}`,
+              onClick: () => setActivePanel("inspector"),
+              children: "\u{1F50D} Mutation Details"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sd-panel-content", children: [
+          activePanel === "diff" && selectedMutation && /* @__PURE__ */ jsx(
+            StateDiffViewer,
+            {
+              previousState: selectedMutation.previousState,
+              nextState: selectedMutation.nextState,
+              diff: selectedMutation.diff
+            }
+          ),
+          activePanel === "inspector" && /* @__PURE__ */ jsx(MutationInspector, { mutation: selectedMutation }),
+          !selectedMutation && /* @__PURE__ */ jsx("div", { className: "sd-panel-empty", children: /* @__PURE__ */ jsx("p", { children: "Select a mutation from the timeline to view details" }) })
+        ] })
       ] })
     ] }),
-    !currentSession && !isLoading && sessions.length === 0 && /* @__PURE__ */ jsxs("div", { className: "surgeon-dashboard__empty", children: [
-      /* @__PURE__ */ jsx("h2", { children: "No Sessions Yet" }),
-      /* @__PURE__ */ jsx("p", { children: "Connect your application to start capturing mutations." }),
-      /* @__PURE__ */ jsx("pre", { children: `import { StateSurgeonClient, instrumentReact } from 'state-surgeon/instrument';
-
-// Initialize the client
-const client = new StateSurgeonClient({
-  serverUrl: 'ws://localhost:8081',
-  appId: 'my-app',
-});
-
-// Instrument React
-instrumentReact(React);` })
+    /* @__PURE__ */ jsxs("footer", { className: "sd-footer", children: [
+      /* @__PURE__ */ jsx("span", { children: "State Surgeon v1.1.0" }),
+      /* @__PURE__ */ jsx("span", { className: "sd-footer-sep", children: "\u2022" }),
+      /* @__PURE__ */ jsx("span", { children: "Press \u2190 \u2192 to navigate, Space to play/pause" })
     ] }),
     /* @__PURE__ */ jsx("style", { children: `
         .surgeon-dashboard {
           min-height: 100vh;
-          background: #0f0f23;
+          display: flex;
+          flex-direction: column;
+          background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
           color: #e0e0e0;
           font-family: system-ui, -apple-system, sans-serif;
         }
 
-        .surgeon-dashboard__header {
+        .sd-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 1rem 2rem;
-          background: #1a1a2e;
+          background: rgba(22, 33, 62, 0.8);
+          backdrop-filter: blur(10px);
           border-bottom: 1px solid #333;
+          position: sticky;
+          top: 0;
+          z-index: 100;
         }
 
-        .surgeon-dashboard__logo {
-          margin: 0;
-          font-size: 1.5rem;
-          color: #00d9ff;
+        .sd-header-left, .sd-header-right {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
         }
 
-        .surgeon-dashboard__session-select {
+        .sd-logo {
           display: flex;
+          align-items: center;
           gap: 0.5rem;
+          margin: 0;
+          font-size: 1.25rem;
         }
 
-        .surgeon-dashboard__session-select select {
-          padding: 0.5rem 1rem;
-          border: 1px solid #333;
+        .sd-logo-icon {
+          font-size: 1.5rem;
+        }
+
+        .sd-logo-text {
+          background: linear-gradient(135deg, #00d9ff, #a78bfa);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+          font-weight: 700;
+        }
+
+        .sd-version {
+          font-size: 0.7rem;
+          padding: 0.2rem 0.4rem;
+          background: #333;
           border-radius: 4px;
-          background: #16213e;
+          color: #888;
+        }
+
+        .sd-session-select {
+          padding: 0.625rem 1.25rem;
+          min-width: 350px;
+          border: 1px solid #333;
+          border-radius: 8px;
+          background: #0f0f23;
           color: #e0e0e0;
-          min-width: 300px;
+          font-size: 0.875rem;
+          cursor: pointer;
         }
 
-        .surgeon-dashboard__session-select button {
-          padding: 0.5rem 1rem;
+        .sd-session-select:focus {
+          outline: none;
+          border-color: #00d9ff;
+        }
+
+        .sd-auto-refresh {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-size: 0.875rem;
+          color: #888;
+          cursor: pointer;
+        }
+
+        .sd-refresh-btn {
+          padding: 0.5rem;
           border: 1px solid #333;
-          border-radius: 4px;
-          background: #16213e;
+          border-radius: 8px;
+          background: transparent;
           color: #e0e0e0;
           cursor: pointer;
+          font-size: 1rem;
         }
 
-        .surgeon-dashboard__session-select button:hover {
-          background: #1f2b4d;
+        .sd-refresh-btn:hover {
+          background: #16213e;
         }
 
-        .surgeon-dashboard__error {
+        .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;
+        }
+
+        .sd-error-icon {
+          font-size: 1.25rem;
+        }
+
+        .sd-error p {
+          margin: 0;
           color: #fca5a5;
         }
 
-        .surgeon-dashboard__loading {
+        .sd-welcome {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           padding: 2rem;
-          text-align: center;
-          color: #888;
         }
 
-        .surgeon-dashboard__main {
-          padding: 1rem 2rem;
+        .sd-welcome-content {
+          text-align: center;
+          max-width: 600px;
         }
 
-        .surgeon-dashboard__timeline {
+        .sd-welcome-icon {
+          font-size: 5rem;
           margin-bottom: 1rem;
+          animation: float 3s ease-in-out infinite;
         }
 
-        .surgeon-dashboard__content {
-          display: grid;
-          grid-template-columns: 2fr 1fr;
-          gap: 1rem;
+        @keyframes float {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-10px); }
         }
 
-        .surgeon-dashboard__empty {
-          padding: 4rem 2rem;
-          text-align: center;
+        .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;
         }
 
-        .surgeon-dashboard__empty h2 {
+        .sd-welcome > p {
+          margin: 0 0 2rem;
           color: #888;
-          margin-bottom: 1rem;
         }
 
-        .surgeon-dashboard__empty pre {
-          display: inline-block;
+        .sd-welcome-steps {
           text-align: left;
+          background: #16213e;
+          border-radius: 12px;
           padding: 1.5rem;
+        }
+
+        .sd-welcome-steps h3 {
+          margin: 0 0 1rem;
+          color: #00d9ff;
+          font-size: 1rem;
+        }
+
+        .sd-welcome-steps ol {
+          margin: 0;
+          padding-left: 1.25rem;
+        }
+
+        .sd-welcome-steps li {
+          margin-bottom: 1rem;
+          color: #ccc;
+        }
+
+        .sd-welcome-steps pre {
+          margin: 0.5rem 0 0;
+          padding: 1rem;
+          background: #0f0f23;
+          border-radius: 8px;
+          font-size: 0.8rem;
+          overflow-x: auto;
+        }
+
+        .sd-welcome-sessions h3 {
+          margin: 0 0 1rem;
+          color: #00d9ff;
+        }
+
+        .sd-session-list {
+          display: grid;
+          gap: 0.75rem;
+        }
+
+        .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;
+        }
+
+        .sd-session-card:hover {
+          border-color: #00d9ff;
+          background: #1a2744;
+        }
+
+        .sd-session-app {
+          font-weight: 600;
+          color: #a78bfa;
+        }
+
+        .sd-session-id {
+          font-family: monospace;
+          font-size: 0.8rem;
+          color: #666;
+        }
+
+        .sd-session-count {
           font-size: 0.875rem;
+          color: #00d9ff;
         }
 
-        @media (max-width: 1024px) {
-          .surgeon-dashboard__content {
-            grid-template-columns: 1fr;
-          }
+        .sd-loading {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 1rem;
+        }
+
+        .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); }
+        }
+
+        .sd-main {
+          flex: 1;
+          padding: 1.5rem 2rem;
+          display: flex;
+          flex-direction: column;
+          gap: 1.5rem;
+        }
+
+        .sd-timeline {
+          flex-shrink: 0;
+        }
+
+        .sd-panels {
+          flex: 1;
+          background: #1a1a2e;
+          border-radius: 12px;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          min-height: 400px;
+        }
+
+        .sd-panel-tabs {
+          display: flex;
+          background: #16213e;
+          border-bottom: 1px solid #333;
+        }
+
+        .sd-panel-tab {
+          padding: 1rem 1.5rem;
+          border: none;
+          background: transparent;
+          color: #888;
+          cursor: pointer;
+          font-size: 0.875rem;
+          transition: all 0.2s;
+        }
+
+        .sd-panel-tab:hover {
+          color: #ccc;
+          background: #1a2744;
+        }
+
+        .sd-panel-tab.active {
+          color: #00d9ff;
+          background: #1a1a2e;
+          border-bottom: 2px solid #00d9ff;
+        }
+
+        .sd-panel-content {
+          flex: 1;
+          overflow: auto;
+        }
+
+        .sd-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;
+        }
+
+        .sd-footer-sep {
+          margin: 0 0.5rem;
         }
       ` })
   ] });