diff --git a/CHANGELOG.md b/CHANGELOG.md
index 55b1763..b1810d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.2.0] – 2026-07-26
+
+### Added — Webview UI Improvements
+- **Activity — Pinned column**: Pin `📌` button moved to a dedicated rightmost column with a column header; pinned rows get a subtle gold left-border highlight.
+- **Activity — Copy-name button**: A `⧉` copy icon appears on hover next to each signal name; click to copy the name to clipboard for quick paste into the search bar.
+- **Activity — Pinned persistence**: Pinned signals survive **Clear** (tombstoned — data reset, signal stays visible).
+- **Activity — Scroll lock**: Table scroll position is preserved across every re-render; expanding a detail row no longer jumps back to the top.
+- **Timeline — All events shown**: Every individual update event is shown as its own timestamped card (`event 1/7`), not just the latest. Total count badge per group.
+- **Timeline — Pinned chains survive Clear**: Pinned timeline groups are preserved after Clear.
+- **Timeline — True hide behaviour**: Hidden items are filtered out of the main list entirely. "Show hidden" reveals **only** hidden items.
+- **Timeline — Disabled checkboxes**: "Pinned only" and "Show hidden" checkboxes are disabled (dimmed) when empty, preventing confusing no-op states.
+- **Timeline — Expand edge case fix**: "Expand older" button only appears when a group is pinned **and** has more than one visible event.
+- **Value panel — Interactive JSON tree**: Objects and arrays render as a collapsible tree (`▶ /▼` toggles) with syntax-coloured keys and values (blue keys, green strings, pink numbers, purple booleans, grey null/italic).
+- **Value panel — Collapse state persistence**: JSON tree collapse state is preserved across signal re-renders; nodes do not auto-reset when a signal updates.
+- **Record button**: Now shows green `● Tracing` when active and amber `⏸ Paused` when stopped; removed the old red state.
+
+### Changed
+- Bumped monorepo, npm packages, and extension manifest to `1.2.0`.
+- Extension `.vsix` rebuilt to include all webview improvements.
+- JetBrains plugin resource webview updated to sync all webview features.
+- JetBrains plugin version bumped to `1.2.0` and `.zip` packaged.
+
+---
+
 ## [1.1.6] – 2026-07-21
 
 ### Changed
diff --git a/README.md b/README.md
index 172d024..d3d9a22 100644
--- a/README.md
+++ b/README.md
@@ -26,21 +26,21 @@
 
 ## 📸 Screenshots
 
-> **DevTools Panel** — Activity Table · Timeline · Component Cards · D3 Force Graph
+### 📊 Activity Tab & Value Inspector
+Showcases the structured signal activity, copy-name buttons, and the new collapsible line-wise JSON Tree Viewer.
+![Activity Tab & Value Inspector](docs/sigtrace-activity.jpg)
 
-<!-- Replace with actual screenshots once CI generates them -->
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  SigTrace DevTools                              [Graph] [Dashboard] │
-│─────────────────────────────────────────────────────────────────────│
-│  ACTIVITY TABLE                              🔍 Filter by signal... │
-│  ──────────────────────────────────────────────────────────────────  │
-│  signal      event    value          file                  time      │
-│  count       write    42 → 43        counter.component.ts  12:01:44  │
-│  doubleCount computed 84 → 86        counter.component.ts  12:01:44  │
-│  cartTotal   computed $142.50        cart.service.ts       12:01:44  │
-└─────────────────────────────────────────────────────────────────────┘
-```
+### ⏱️ Timeline Tab (Causal Event Chains)
+Chronological swimlane details showing exact update event counters (e.g. `event 1/7`) and group collapse controls.
+![Timeline Event History](docs/sigtrace-timeline.jpg)
+
+### 🧩 Component View & Diagnostics
+Flags memory hotspots, recursive cycles, and dead signals directly inside the editor sidebar.
+![Component & Issues Panel](docs/sigtrace-components.jpg)
+
+### 💻 IDE Integration Context
+Full workspace layout demonstrating editor sync with the running application.
+![SigTrace IDE Context](docs/sigtrace-preview.jpg)
 
 ---
 
@@ -96,11 +96,14 @@ export default defineConfig({
 Cmd+Shift+P → "SigTrace: Open DevTools Panel"
 ```
 
-**4. Run your app and watch the signal graph come alive:**
+**4. Run your app with the CLI wrapper and watch the signal graph come alive:**
 ```bash
-npm run start
+npx sigtrace run <project run command>
 ```
 
+> [!NOTE]
+> Replace `<project run command>` with your actual local project execution command (for example: `npm run dev`, `vite`, `ng serve`, etc.).
+
 ---
 
 ### Vue 3
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index da494bd..84a1846 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -5,29 +5,95 @@ export default function App() {
   const [count, setCount] = createSignal(0);
   const doubleCount = createMemo(() => count() * 2);
 
-  // 2. Dynamic tracking states
+  // 2. Complex nested object state for JSON Tree Viewer verification
+  const [userSession, setUserSession] = createSignal({
+    user: {
+      id: 418,
+      name: 'Alex Rivera',
+      email: 'alex.rivera@sigtrace.dev',
+      roles: ['developer', 'tester'],
+      preferences: {
+        theme: 'dark',
+        notifications: {
+          email: true,
+          push: false
+        }
+      }
+    },
+    status: 'authenticated',
+    lastActive: new Date().toISOString()
+  });
+
+  // Mutators for nested state
+  const toggleTheme = () => {
+    setUserSession(prev => ({
+      ...prev,
+      user: {
+        ...prev.user,
+        preferences: {
+          ...prev.user.preferences,
+          theme: prev.user.preferences.theme === 'dark' ? 'light' : 'dark'
+        }
+      },
+      lastActive: new Date().toISOString()
+    }));
+  };
+
+  const addRole = () => {
+    const roles = [...userSession().user.roles];
+    if (!roles.includes('lead')) {
+      roles.push('lead');
+    } else {
+      roles.filter(r => r !== 'lead');
+    }
+    setUserSession(prev => ({
+      ...prev,
+      user: {
+        ...prev.user,
+        roles
+      },
+      lastActive: new Date().toISOString()
+    }));
+  };
+
+  const toggleEmail = () => {
+    setUserSession(prev => ({
+      ...prev,
+      user: {
+        ...prev.user,
+        preferences: {
+          ...prev.user.preferences,
+          notifications: {
+            ...prev.user.preferences.notifications,
+            email: !prev.user.preferences.notifications.email
+          }
+        }
+      },
+      lastActive: new Date().toISOString()
+    }));
+  };
+
+  // 3. Dynamic tracking states
   const [showDetails, setShowDetails] = createSignal(false);
-  const [detailsValue, setDetailsValue] = createSignal('Secret Data');
+  const [detailsValue, setDetailsValue] = createSignal('Top Secret Signal Data');
   
   createEffect(() => {
     if (showDetails()) {
-      console.log('Details opened. Value:', detailsValue());
-    } else {
-      console.log('Details are hidden.');
+      console.log('Details panel visible. Value:', detailsValue());
     }
   });
 
-  // 3. Hotspot simulation states
+  // 4. Hotspot simulation states
   const [heavyInput, setHeavyInput] = createSignal(1);
   const [shouldLag, setShouldLag] = createSignal(false);
 
   const heavyMemo = createMemo(() => {
     const val = heavyInput();
     if (shouldLag()) {
-      // Simulate expensive computation of ~5ms to trigger Hotspot warning
+      // Simulate expensive computation of ~25ms to trigger Hotspot warning
       const start = performance.now();
-      while (performance.now() - start < 5) {
-        // Block main thread briefly
+      while (performance.now() - start < 25) {
+        // Block thread to trigger a perf issue
       }
     }
     return val * 100;
@@ -35,103 +101,180 @@ export default function App() {
 
   return (
     <div style={{
-      background: 'rgba(30, 41, 59, 0.7)',
-      padding: '24px',
-      'border-radius': '12px',
-      border: '1px solid #475569',
-      'backdrop-filter': 'blur(10px)',
-      width: '380px',
-      'box-shadow': '0 8px 32px rgba(0, 0, 0, 0.4)'
+      background: 'rgba(15, 23, 42, 0.85)',
+      padding: '28px',
+      'border-radius': '16px',
+      border: '1px solid rgba(255, 255, 255, 0.08)',
+      'backdrop-filter': 'blur(16px)',
+      width: '420px',
+      'box-shadow': '0 20px 50px rgba(0, 0, 0, 0.5)',
+      'font-family': 'system-ui, -apple-system, sans-serif'
     }}>
       <h2 style={{
-        margin: '0 0 16px 0',
-        'font-size': '18px',
-        color: '#60a5fa',
-        'border-bottom': '1px solid #475569',
-        'padding-bottom': '8px'
+        margin: '0 0 20px 0',
+        'font-size': '20px',
+        'font-weight': '700',
+        background: 'linear-gradient(135deg, #60a5fa, #c084fc)',
+        '-webkit-background-clip': 'text',
+        '-webkit-text-fill-color': 'transparent',
+        'border-bottom': '1px solid rgba(255, 255, 255, 0.08)',
+        'padding-bottom': '12px',
+        display: 'flex',
+        'align-items': 'center',
+        gap: '8px'
       }}>
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="color: #60a5fa"><path d="m19 8-6 2-6-2M12 2v8M12 22v-6M19 16l-7-3-7 3"/></svg>
         SigTrace Demo Panel
       </h2>
 
-      {/* Feature 1: Simple Signals */}
-      <section style={{ 'margin-bottom': '20px' }}>
-        <h3 style={{ 'font-size': '13px', margin: '0 0 8px 0', color: '#94a3b8' }}>Simple Reactivity</h3>
-        <div style={{ display: 'flex', 'align-items': 'center', gap: '10px' }}>
+      {/* Feature 1: Simple Reactivity */}
+      <section style={{ 'margin-bottom': '24px' }}>
+        <h3 style={{ 'font-size': '12px', 'text-transform': 'uppercase', 'letter-spacing': '0.5px', margin: '0 0 10px 0', color: '#64748b' }}>Simple Reactivity</h3>
+        <div style={{ display: 'flex', 'align-items': 'center', gap: '12px' }}>
           <button 
             style={{
-              background: '#2563eb',
+              background: 'linear-gradient(135deg, #3b82f6, #1d4ed8)',
               color: '#fff',
               border: 'none',
-              padding: '6px 12px',
+              padding: '6px 14px',
               'border-radius': '6px',
-              cursor: 'pointer'
+              cursor: 'pointer',
+              'font-size': '12px',
+              'font-weight': '600',
+              transition: 'all 0.2s'
             }}
             onClick={() => setCount(count() + 1)}
           >
             Increment Count
           </button>
-          <span>Count: {count()} | Double: {doubleCount()}</span>
+          <span style={{ 'font-size': '12px', color: '#cbd5e1' }}>
+            Count: <strong>{count()}</strong> | Double: <strong>{doubleCount()}</strong>
+          </span>
         </div>
       </section>
 
-      {/* Feature 2: Dynamic Tracking */}
-      <section style={{ 'margin-bottom': '20px' }}>
-        <h3 style={{ 'font-size': '13px', margin: '0 0 8px 0', color: '#94a3b8' }}>Dynamic Dependency Branching</h3>
+      {/* Feature 2: Complex Nested Object Verification */}
+      <section style={{ 'margin-bottom': '24px', padding: '12px', background: 'rgba(255,255,255,0.02)', 'border-radius': '8px', border: '1px solid rgba(255,255,255,0.04)' }}>
+        <h3 style={{ 'font-size': '12px', 'text-transform': 'uppercase', 'letter-spacing': '0.5px', margin: '0 0 10px 0', color: '#64748b' }}>Nested JSON Tree Verification</h3>
         <div style={{ display: 'flex', 'flex-direction': 'column', gap: '8px' }}>
-          <label style={{ display: 'flex', 'align-items': 'center', gap: '8px', cursor: 'pointer' }}>
+          <div style={{ display: 'flex', 'flex-wrap': 'wrap', gap: '6px' }}>
+            <button 
+              onClick={toggleTheme}
+              style={{
+                background: 'rgba(255, 255, 255, 0.05)',
+                color: '#e2e8f0',
+                border: '1px solid rgba(255, 255, 255, 0.1)',
+                padding: '4px 10px',
+                'border-radius': '4px',
+                cursor: 'pointer',
+                'font-size': '11px'
+              }}
+            >
+              Toggle Preference Theme
+            </button>
+            <button 
+              onClick={toggleEmail}
+              style={{
+                background: 'rgba(255, 255, 255, 0.05)',
+                color: '#e2e8f0',
+                border: '1px solid rgba(255, 255, 255, 0.1)',
+                padding: '4px 10px',
+                'border-radius': '4px',
+                cursor: 'pointer',
+                'font-size': '11px'
+              }}
+            >
+              Toggle Preferences Email
+            </button>
+            <button 
+              onClick={addRole}
+              style={{
+                background: 'rgba(255, 255, 255, 0.05)',
+                color: '#e2e8f0',
+                border: '1px solid rgba(255, 255, 255, 0.1)',
+                padding: '4px 10px',
+                'border-radius': '4px',
+                cursor: 'pointer',
+                'font-size': '11px'
+              }}
+            >
+              Add/Remove 'lead' Role
+            </button>
+          </div>
+          <div style={{ 'font-size': '10px', color: '#94a3b8', 'font-family': 'monospace', 'white-space': 'pre', background: 'rgba(0,0,0,0.2)', padding: '6px', 'border-radius': '4px', overflow: 'auto', 'max-height': '80px' }}>
+            {JSON.stringify(userSession(), null, 2)}
+          </div>
+        </div>
+      </section>
+
+      {/* Feature 3: Dynamic Tracking */}
+      <section style={{ 'margin-bottom': '24px' }}>
+        <h3 style={{ 'font-size': '12px', 'text-transform': 'uppercase', 'letter-spacing': '0.5px', margin: '0 0 10px 0', color: '#64748b' }}>Dynamic Causal Branching</h3>
+        <div style={{ display: 'flex', 'flex-direction': 'column', gap: '8px' }}>
+          <label style={{ display: 'flex', 'align-items': 'center', gap: '8px', cursor: 'pointer', 'font-size': '12px', color: '#cbd5e1' }}>
             <input 
               type="checkbox" 
               checked={showDetails()} 
               onChange={(e) => setShowDetails(e.currentTarget.checked)}
+              style={{ 'accent-color': '#3b82f6' }}
             />
             Show Details (Subscribes to Details Value)
           </label>
-          <div style={{ display: 'flex', gap: '8px', 'align-items': 'center' }}>
+          <div style={{ display: 'flex', gap: '10px', 'align-items': 'center' }}>
             <input 
               type="text" 
               value={detailsValue()} 
               onInput={(e) => setDetailsValue(e.currentTarget.value)}
               style={{
-                background: '#1e293b',
-                border: '1px solid #475569',
+                background: '#0f172a',
+                border: '1px solid rgba(255, 255, 255, 0.1)',
                 color: '#fff',
-                padding: '4px 8px',
-                'border-radius': '4px',
-                width: '120px'
+                padding: '5px 10px',
+                'border-radius': '6px',
+                width: '180px',
+                'font-size': '12px',
+                outline: 'none'
               }}
             />
-            <span style={{ 'font-size': '11px', color: '#64748b' }}>Edit to trigger updates</span>
+            <span style={{ 'font-size': '11px', color: '#64748b' }}>Edit text to trace</span>
           </div>
         </div>
       </section>
 
-      {/* Feature 3: Hotspot Profiling */}
+      {/* Feature 4: Hotspot Profiling */}
       <section>
-        <h3 style={{ 'font-size': '13px', margin: '0 0 8px 0', color: '#94a3b8' }}>Performance Hotspot Profiler</h3>
+        <h3 style={{ 'font-size': '12px', 'text-transform': 'uppercase', 'letter-spacing': '0.5px', margin: '0 0 10px 0', color: '#64748b' }}>Performance Hotspot</h3>
         <div style={{ display: 'flex', 'flex-direction': 'column', gap: '8px' }}>
-          <label style={{ display: 'flex', 'align-items': 'center', gap: '8px', cursor: 'pointer' }}>
+          <label style={{ display: 'flex', 'align-items': 'center', gap: '8px', cursor: 'pointer', 'font-size': '12px', color: '#cbd5e1' }}>
             <input 
               type="checkbox" 
               checked={shouldLag()} 
               onChange={(e) => setShouldLag(e.currentTarget.checked)}
+              style={{ 'accent-color': '#dc2626' }}
             />
-            Enable Heavy Loop (Laggy Computation)
+            Enable Heavy Loop (Simulate 25ms Lag)
           </label>
-          <button 
-            style={{
-              background: shouldLag() ? '#dc2626' : '#475569',
-              color: '#fff',
-              border: 'none',
-              padding: '6px 12px',
-              'border-radius': '6px',
-              cursor: 'pointer',
-              transition: 'background 0.2s'
-            }}
-            onClick={() => setHeavyInput(heavyInput() + 1)}
-          >
-            Trigger Computation
-          </button>
-          <span>Value: {heavyMemo()}</span>
+          <div style={{ display: 'flex', 'align-items': 'center', gap: '12px' }}>
+            <button 
+              style={{
+                background: shouldLag() ? 'linear-gradient(135deg, #dc2626, #b91c1c)' : 'linear-gradient(135deg, #4b5563, #374151)',
+                color: '#fff',
+                border: 'none',
+                padding: '6px 14px',
+                'border-radius': '6px',
+                cursor: 'pointer',
+                'font-size': '12px',
+                'font-weight': '600',
+                transition: 'all 0.2s'
+              }}
+              onClick={() => setHeavyInput(heavyInput() + 1)}
+            >
+              Trigger Computation
+            </button>
+            <span style={{ 'font-size': '12px', color: '#cbd5e1' }}>
+              Value: <strong>{heavyMemo()}</strong>
+            </span>
+          </div>
         </div>
       </section>
     </div>
diff --git a/docs/blog/how-to-debug-reactive-signal-loops-and-performance-hotspots-inside-vs-code.html b/docs/blog/how-to-debug-reactive-signal-loops-and-performance-hotspots-inside-vs-code.html
new file mode 100644
index 0000000..6e3d72d
--- /dev/null
+++ b/docs/blog/how-to-debug-reactive-signal-loops-and-performance-hotspots-inside-vs-code.html
@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+  <!-- ═══════════════════════════════════════════════════════════ -->
+  <!-- PRIMARY SEO META                                            -->
+  <!-- ═══════════════════════════════════════════════════════════ -->
+  <title>How to Debug Reactive Signal Loops & Performance Hotspots in VS Code</title>
+  <meta name="description" content="Learn how to diagnose recursive reactivity cycles, debug memo/computed performance bottlenecks, and trace causal chains in Angular, Vue, and SolidJS inside VS Code." />
+  <meta name="keywords" content="debug reactive signals, angular signals debugger, vue ref update count, solidjs createMemo tracing, dependency graph visualizer, code lens telemetry, sigtrace" />
+  <meta name="robots" content="index, follow" />
+  <link rel="canonical" href="https://sigtrace.dev/blog/how-to-debug-reactive-signal-loops-and-performance-hotspots-inside-vs-code.html" />
+
+  <!-- Open Graph -->
+  <meta property="og:type" content="article" />
+  <meta property="og:url" content="https://sigtrace.dev/blog/how-to-debug-reactive-signal-loops-and-performance-hotspots-inside-vs-code.html" />
+  <meta property="og:title" content="How to Debug Reactive Signal Loops & Performance Hotspots in VS Code" />
+  <meta property="og:description" content="Stop context-switching to browser DevTools. Learn how to audit your reactivity graph and clean up dangling state inside your editor." />
+  <meta property="og:image" content="https://sigtrace.dev/sigtrace-preview.jpg" />
+  <meta property="article:published_time" content="2026-07-26" />
+  <meta property="article:author" content="SigTrace Contributors" />
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="How to Debug Reactive Signal Loops & Performance Hotspots in VS Code" />
+  <meta name="twitter:description" content="Stop context-switching. Audit your reactivity graph and find memory bottlenecks inside your editor." />
+
+  <!-- JSON-LD (AEO / SEO / Schema) -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    "@id": "https://sigtrace.dev/blog/how-to-debug-reactive-signal-loops-and-performance-hotspots-inside-vs-code.html#article",
+    "headline": "How to Debug Reactive Signal Loops & Performance Hotspots in VS Code",
+    "url": "https://sigtrace.dev/blog/how-to-debug-reactive-signal-loops-and-performance-hotspots-inside-vs-code.html",
+    "datePublished": "2026-07-26",
+    "dateModified": "2026-07-26",
+    "description": "Learn how to diagnose recursive reactivity cycles, find memo/computed performance bottlenecks, and trace causal chains in Angular, Vue, and SolidJS inside VS Code.",
+    "author": {
+      "@type": "Person",
+      "name": "SigTrace Contributors"
+    },
+    "publisher": {
+      "@type": "Organization",
+      "name": "SigTrace",
+      "logo": "https://sigtrace.dev/logo.svg"
+    },
+    "mainEntityOfPage": "https://sigtrace.dev/blog/how-to-debug-reactive-signal-loops-and-performance-hotspots-inside-vs-code.html"
+  }
+  </script>
+
+  <!-- Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+
+  <style>
+    :root {
+      --bg-base: #080c14;
+      --bg-surface: #0d1422;
+      --bg-card: #111827;
+      --border: rgba(255,255,255,0.07);
+      --text-primary: #f1f5f9;
+      --text-secondary: #cbd5e1;
+      --text-muted: #64748b;
+      --accent: #6366f1;
+      --accent-light: #818cf8;
+      --font-sans: 'Inter', sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+      --radius-md: 10px;
+    }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: var(--font-sans);
+      background: var(--bg-base);
+      color: var(--text-primary);
+      line-height: 1.8;
+      font-size: 16px;
+    }
+    .container { max-width: 720px; margin: 0 auto; padding: 0 24px; }
+    
+    /* Nav */
+    nav {
+      height: 64px;
+      display: flex;
+      align-items: center;
+      background: rgba(8,12,20,0.85);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+    .nav-inner {
+      max-width: 720px;
+      width: 100%;
+      margin: 0 auto;
+      padding: 0 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .nav-logo {
+      color: var(--text-primary);
+      text-decoration: none;
+      font-weight: 800;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .nav-logo svg {
+      color: var(--accent-light);
+    }
+    .nav-logo span {
+      background: linear-gradient(135deg, var(--accent-light), #a5b4fc);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .nav-links {
+      display: flex;
+      list-style: none;
+      gap: 20px;
+    }
+    .nav-links a {
+      color: var(--text-secondary);
+      text-decoration: none;
+      font-size: 14px;
+      transition: color 0.2s;
+    }
+    .nav-links a:hover {
+      color: var(--text-primary);
+    }
+
+    header {
+      padding: 56px 0 28px 0;
+      border-bottom: 1px solid var(--border);
+      margin-bottom: 36px;
+    }
+    .post-meta {
+      font-size: 13px;
+      color: var(--accent-light);
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: 12px;
+    }
+    h1 {
+      font-size: 36px;
+      line-height: 1.25;
+      font-weight: 800;
+      color: var(--text-primary);
+      margin-bottom: 16px;
+    }
+    .post-author {
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+
+    main {
+      padding-bottom: 80px;
+    }
+    article p {
+      font-size: 16px;
+      color: var(--text-secondary);
+      margin-bottom: 24px;
+      font-weight: 400;
+    }
+    article h2 {
+      font-size: 22px;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin: 40px 0 16px 0;
+    }
+    article h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin: 28px 0 12px 0;
+    }
+    article code {
+      font-family: var(--font-mono);
+      background: rgba(255,255,255,0.06);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+    article pre {
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      padding: 16px 20px;
+      overflow: auto;
+      margin-bottom: 28px;
+    }
+    article pre code {
+      background: none;
+      padding: 0;
+      font-size: 13px;
+      color: var(--text-primary);
+      line-height: 1.6;
+    }
+    article img {
+      width: 100%;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+      margin: 24px 0;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    }
+    .callout {
+      background: rgba(99, 102, 241, 0.08);
+      border-left: 4px solid var(--accent);
+      border-radius: 4px;
+      padding: 16px 20px;
+      margin: 28px 0;
+    }
+    .callout p {
+      margin: 0;
+      color: var(--text-primary);
+    }
+    footer {
+      border-top: 1px solid var(--border);
+      padding: 32px 0;
+      text-align: center;
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+  </style>
+</head>
+<body>
+
+<nav role="navigation">
+  <div class="nav-inner">
+    <a href="/" class="nav-logo">
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:2px; vertical-align:middle;">
+        <path d="m19 8-6 2-6-2M12 2v8M12 22v-6M19 16l-7-3-7 3"/>
+      </svg>
+      Sig<span>Trace</span>
+    </a>
+    <ul class="nav-links">
+      <li><a href="/#features">Features</a></li>
+      <li><a href="/#quickstart">Quickstart</a></li>
+      <li><a href="/docs">Docs</a></li>
+      <li><a href="/blog">Blog</a></li>
+    </ul>
+  </div>
+</nav>
+
+<div class="container">
+  <header>
+    <div class="post-meta">July 26, 2026 · Tutorials & Releases</div>
+    <h1>How to Debug Reactive Signal Invalidation Loops & Performance Hotspots Inside VS Code</h1>
+    <div class="post-author">By the SigTrace Contributors</div>
+  </header>
+
+  <main role="main">
+    <article>
+      <p>Fine-grained reactivity is the standard state-management system of the modern web. With Angular's native Signals, Vue 3's Refs/Computed APIs, and SolidJS's createSignal, updating the UI has never been faster. However, as reactive graphs grow, developers face a new class of problems: invalidation loops, slow computation updates, and unformatted deep state diagnostics.</p>
+
+      <p>To inspect a complex reactive chain, developers typically rely on print-debugging (<code>console.log()</code>) or browser breakpoints. But switching back and forth between your code and the browser's developer tools creates a context-switching tax that slows you down. That is why we built <strong>SigTrace</strong>—to embed reactivity diagnostics right inside your editor.</p>
+
+      <img src="../sigtrace-preview.jpg" alt="SigTrace running inside VS Code side-by-side with App.tsx and browser preview panel" />
+
+      <h2>1. Analyzing Live Signal Activity with the Collapsible JSON Tree</h2>
+      <p>When you trigger mutations, SigTrace logs every read, write, and effect inside the Activity tab. We recently upgraded the Value Inspector panel to render complex nested objects and arrays as a <strong>line-wise collapsible JSON tree</strong>. It matches the VS Code layout with vertical guidelines and alternating collapse nodes, meaning you can inspect deep, complex payloads without cluttered strings or horizontal overflow.</p>
+
+      <img src="../sigtrace-activity.jpg" alt="SigTrace Activity Tab showing signal mutations, copy-name buttons, and line-wise collapsible JSON Tree inspector" />
+
+      <p>Pasting names into your search bar is also easier. A small copy icon (<code>⧉</code>) appears on hover next to every signal name in the list. More importantly, pinned signals survive <strong>Clears</strong> (using a tombstone strategy) so you can compare states across different application workflows.</p>
+
+      <h2>2. Visualizing Sequenced Updates in the Causal Timeline</h2>
+      <p>Reactivity cascades happen in milliseconds. If user information gets updated multiple times in a row, typical devtools only show the final state. SigTrace's **Timeline view** renders each event as its own chronological card, showing counts (like <code>event 1/7</code>) so you can step through every single state trigger in order.</p>
+
+      <img src="../sigtrace-timeline.jpg" alt="SigTrace Timeline view displaying sequenced causal chain events, loop alerts, and hide/unpin toggles" />
+
+      <p>Additionally, SigTrace features a **Circular Invalidation Safeguard**. If a reactive loop gets triggered recursively (>25 evaluations per second), SigTrace will automatically intercept the loop to prevent your browser tab from freezing, alerting you to the exact file and line number causing the issue.</p>
+
+      <h2>3. Auditing Component Health & Memory Leaks</h2>
+      <p>Dangling computations and unused selectors waste memory and CPU cycles. The **Components Tab** automatically groups reactive state by its parent component. It audits your graph to flag "Dead Signals" (variables declared and registered but never read by any computed memo or rendering template) and computation hotspots taking longer than 2ms.</p>
+
+      <img src="../sigtrace-components.jpg" alt="SigTrace Components & Issues Panel displaying component stats, computation hotspots, and dead signal notifications" />
+
+      <div class="callout">
+        <p><strong>Zero Configuration CLI Startup:</strong> To start tracing your application's reactivity, simply prefix your normal startup command with our wrapper. E.g.: <code>npx sigtrace run <project run command></code> (such as <code>npm run dev</code> or <code>ng serve</code>).</p>
+      </div>
+
+      <h2>Conclusion</h2>
+      <p>SigTrace v1.2.0 is out! The layout updates, verifier fixes, and new line-wise JSON trees are available now for both VS Code and WebStorm. Download the extension package directly to start debugging reactivity where you write code.</p>
+      
+      <p>Check out our <a href="https://github.com/sigtrace-dev/sigtrace" style="color:var(--accent-light)">GitHub Repository</a> to read the code, contribute features, or report issues!</p>
+    </article>
+  </main>
+</div>
+
+<footer>
+  <div class="container">
+    <p>© 2026 SigTrace Contributors. Released under the PolyForm Noncommercial License 1.0.0.</p>
+  </div>
+</footer>
+
+</body>
+</html>
diff --git a/docs/blog/index.html b/docs/blog/index.html
index 40a057d..3816c3f 100644
--- a/docs/blog/index.html
+++ b/docs/blog/index.html
@@ -41,6 +41,17 @@
       "logo": "https://sigtrace.dev/logo.svg"
     },
     "blogPost": [
+      {
+        "@type": "BlogPosting",
+        "headline": "How to Debug Reactive Signal Invalidation Loops & Performance Hotspots Inside VS Code",
+        "url": "https://sigtrace.dev/blog/how-to-debug-reactive-signal-loops-and-performance-hotspots-inside-vs-code.html",
+        "datePublished": "2026-07-26",
+        "description": "Learn how to diagnose recursive reactivity cycles, find memo/computed performance bottlenecks, and trace causal chains in Angular, Vue, and SolidJS inside VS Code.",
+        "author": {
+          "@type": "Person",
+          "name": "SigTrace Contributors"
+        }
+      },
       {
         "@type": "BlogPosting",
         "headline": "Reactivity is Magic (Until You Have to Debug It): Visualizing React & Svelte 5 Signals",
@@ -186,7 +197,12 @@ <h1>SigTrace Blog</h1>
 </header>
 
 <main class="container">
-  <div class="blog-list" role="list">
+    <article class="post-card" onclick="location.href='/blog/how-to-debug-reactive-signal-loops-and-performance-hotspots-inside-vs-code.html'" role="listitem">
+      <div class="post-meta">July 26, 2026 · Tutorials & Releases</div>
+      <h2 class="post-title">How to Debug Reactive Signal Invalidation Loops & Performance Hotspots Inside VS Code</h2>
+      <p class="post-desc">Learn how to inspect deep state variables with the new line-wise JSON tree, track chronological timeline sequences, and catch infinite recursive rendering loops directly inside your editor.</p>
+      <span class="post-readmore">Read Article →</span>
+    </article>
     <article class="post-card" onclick="location.href='/blog/react-svelte-signals-debugging.html'" role="listitem">
       <div class="post-meta">July 18, 2026 · Releases</div>
       <h2 class="post-title">Reactivity is Magic (Until You Have to Debug It): Visualizing React & Svelte 5 Signals</h2>
diff --git a/docs/index.html b/docs/index.html
index 6a92375..f49e8b6 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1273,16 +1273,88 @@
       text-align: right;
     }
 
+    /* ── Showcase layout and Mobile Nav ── */
+    .screenshot-wrap {
+      margin-top: 56px;
+      position: relative;
+      width: 100%;
+      max-width: 1200px;
+      margin-left: auto;
+      margin-right: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 64px;
+    }
+    .showcase-row {
+      display: flex;
+      align-items: center;
+      gap: 48px;
+      text-align: left;
+    }
+    .showcase-row:nth-child(even) {
+      flex-direction: row-reverse;
+    }
+    .showcase-visual {
+      flex: 1.25;
+      min-width: 0;
+    }
+    .showcase-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .nav-toggle {
+      display: none;
+      background: none;
+      border: none;
+      color: var(--text-primary);
+      cursor: pointer;
+      padding: 6px;
+      margin-left: 8px;
+      align-items: center;
+      justify-content: center;
+    }
+    .nav-toggle svg {
+      width: 20px;
+      height: 20px;
+    }
+
     /* ══════════════════════════════════════════════════════════
        RESPONSIVE
     ══════════════════════════════════════════════════════════ */
     @media (max-width: 900px) {
+      .showcase-row, .showcase-row:nth-child(even) {
+        flex-direction: column;
+        gap: 28px;
+      }
+      .screenshot-wrap {
+        gap: 48px;
+      }
       .features-grid { grid-template-columns: repeat(2, 1fr); }
       .quickstart-grid { grid-template-columns: 1fr; }
       .stats-grid { grid-template-columns: repeat(2, 1fr); }
-      .nav-links { display: none; }
+      .nav-links {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: rgba(10, 10, 12, 0.96);
+        backdrop-filter: blur(16px);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        flex-direction: column;
+        padding: 20px 24px;
+        gap: 16px;
+        align-items: flex-start;
+      }
+      .nav-links.mobile-active {
+        display: flex;
+      }
+      .nav-toggle {
+        display: inline-flex;
+      }
       .view-explainer { grid-template-columns: 1fr; }
-      .screenshot-switcher { justify-content: center; }
       .hero-content { max-width: 640px; }
       .hero-description { max-width: 100%; }
     }
@@ -1698,6 +1770,13 @@
       <a href="https://marketplace.visualstudio.com/items?itemName=sigtrace.sigtrace-extension" class="btn btn-primary" target="_blank" rel="noopener" id="nav-install-btn">
         Install Free
       </a>
+      <button class="nav-toggle" aria-label="Toggle menu" onclick="toggleMobileMenu()">
+        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <line x1="3" y1="12" x2="21" y2="12"></line>
+          <line x1="3" y1="6" x2="21" y2="6"></line>
+          <line x1="3" y1="18" x2="21" y2="18"></line>
+        </svg>
+      </button>
     </div>
   </div>
 </nav>
@@ -1758,47 +1837,85 @@ <h1 id="hero-heading" class="fade-up delay-1">
     <div class="screenshot-wrap fade-up delay-4">
       <div class="screenshot-glow" aria-hidden="true"></div>
 
-      <p class="showcase-intro">Choose a view first, then inspect the panel: Activity helps spot noisy updates, Timeline reveals root-cause chains, and Components shows where reactive cost is concentrated.</p>
-
-      <div class="screenshot-switcher" role="tablist" aria-label="Showcase views">
-        <button class="screenshot-switcher-btn active" onclick="switchScreenshot(this, 'activity')" role="tab" aria-selected="true" id="stab-activity">Activity view</button>
-        <button class="screenshot-switcher-btn" onclick="switchScreenshot(this, 'timeline')" role="tab" aria-selected="false" id="stab-timeline">Timeline view</button>
-        <button class="screenshot-switcher-btn" onclick="switchScreenshot(this, 'components')" role="tab" aria-selected="false" id="stab-components">Components view</button>
+      <!-- Feature 1: Activity -->
+      <div class="showcase-row">
+        <div class="showcase-visual">
+          <div class="screenshot-frame" role="img" aria-label="SigTrace Activity View inside VS Code">
+            <div class="screenshot-topbar">
+              <span class="topbar-dot red" aria-hidden="true"></span>
+              <span class="topbar-dot amber" aria-hidden="true"></span>
+              <span class="topbar-dot green" aria-hidden="true"></span>
+              <span class="title">SIGTRACE</span>
+              <span class="connected-badge">Connected</span>
+            </div>
+            <img src="sigtrace-activity.jpg" alt="SigTrace VS Code signal activity table and line-wise JSON Tree viewer" width="1280" height="440" loading="eager" />
+          </div>
+          <p class="screenshot-caption">▲ SigTrace panel — live signal activity inside VS Code</p>
+        </div>
+        <div class="showcase-info">
+          <div class="view-card">
+            <h3>1. Activity: instant reactivity profiling</h3>
+            <p>No more guessing through console.logs. Shows a live, filterable table of signal reads, writes, and effect triggers in real time. Spot which signals are over-triggering and sort by update counts to isolate jitter instantly.</p>
+            <div class="view-kpis">
+              <div class="view-kpi"><strong>Noisy Signal</strong><span>Top update source</span></div>
+              <div class="view-kpi"><strong>Fast Triage</strong><span>Prioritize fixes</span></div>
+            </div>
+          </div>
+        </div>
       </div>
 
-      <div class="screenshot-frame" role="img" aria-label="SigTrace running in VS Code showing live reactive signal activity table">
-        <div class="screenshot-topbar">
-          <span class="topbar-dot red" aria-hidden="true"></span>
-          <span class="topbar-dot amber" aria-hidden="true"></span>
-          <span class="topbar-dot green" aria-hidden="true"></span>
-          <span class="title" style="flex:none">SIGTRACE</span>
-
-          <span class="connected-badge" role="status">Connected</span>
+      <!-- Feature 2: Timeline -->
+      <div class="showcase-row">
+        <div class="showcase-visual">
+          <div class="screenshot-frame" role="img" aria-label="SigTrace Timeline View inside VS Code">
+            <div class="screenshot-topbar">
+              <span class="topbar-dot red" aria-hidden="true"></span>
+              <span class="topbar-dot amber" aria-hidden="true"></span>
+              <span class="topbar-dot green" aria-hidden="true"></span>
+              <span class="title">SIGTRACE</span>
+              <span class="connected-badge">Connected</span>
+            </div>
+            <img src="sigtrace-timeline.jpg" alt="SigTrace VS Code timeline causal update chain logs" width="1280" height="440" loading="lazy" />
+          </div>
+          <p class="screenshot-caption">▲ SigTrace panel — causal propagation timeline of signal events</p>
+        </div>
+        <div class="showcase-info">
+          <div class="view-card">
+            <h3>2. Timeline: trigger-flow causal chains</h3>
+            <p>Trace the exact propagation tree of a signal update. Follow every computed evaluation and effect reaction in order (e.g. event 1/7). Unpin or hide chains to isolate clean causal pathways.</p>
+            <div class="view-kpis">
+              <div class="view-kpi"><strong>Root Cause</strong><span>First trigger</span></div>
+              <div class="view-kpi"><strong>Chain Depth</strong><span>Propagation path</span></div>
+            </div>
+          </div>
         </div>
-        <img
-          id="screenshot-img"
-          src="/sigtrace-activity.jpg"
-          alt="SigTrace VS Code extension panel showing a live signal activity table with signals like searchQuery, filteredResults, autoSyncEffect, selectedTab and userPreferences"
-          width="1280"
-          height="440"
-          loading="eager"
-          decoding="async"
-        />
       </div>
-      <p class="screenshot-caption" id="screenshot-caption">▲ Real SigTrace panel — live signal activity inside VS Code</p>
-
-      <div class="view-explainer" aria-live="polite">
-        <article class="view-card">
-          <h3 id="view-title">Activity: what changed right now</h3>
-          <p id="view-description">Use Activity to catch noisy signals and effect storms instantly. Sort by Most Updates to find the source of jitter or unnecessary reruns in under a minute.</p>
-        </article>
-        <article class="view-card">
-          <h3>What you can answer quickly</h3>
-          <div class="view-kpis">
-            <div class="view-kpi"><strong id="kpi-a">Noisy Signal</strong><span id="kpi-a-label">Top update source</span></div>
-            <div class="view-kpi"><strong id="kpi-b">Fast Triage</strong><span id="kpi-b-label">Prioritize fixes</span></div>
+
+      <!-- Feature 3: Components -->
+      <div class="showcase-row">
+        <div class="showcase-visual">
+          <div class="screenshot-frame" role="img" aria-label="SigTrace Components & Issues view inside VS Code">
+            <div class="screenshot-topbar">
+              <span class="topbar-dot red" aria-hidden="true"></span>
+              <span class="topbar-dot amber" aria-hidden="true"></span>
+              <span class="topbar-dot green" aria-hidden="true"></span>
+              <span class="title">SIGTRACE</span>
+              <span class="connected-badge">Connected</span>
+            </div>
+            <img src="sigtrace-components.jpg" alt="SigTrace VS Code component stats and issue warnings" width="1280" height="440" loading="lazy" />
           </div>
-        </article>
+          <p class="screenshot-caption">▲ SigTrace panel — component signal usage analysis and performance alerts</p>
+        </div>
+        <div class="showcase-info">
+          <div class="view-card">
+            <h3>3. Components & Issues: health audit</h3>
+            <p>Audit your application's reactive health inside the IDE. Spot components with heavy work counts, discover computation hotspots taking >2ms, and clean up dangling dead signals before committing.</p>
+            <div class="view-kpis">
+              <div class="view-kpi"><strong>Hot Component</strong><span>Most reactive work</span></div>
+              <div class="view-kpi"><strong>Cleanup Target</strong><span>Unused/dead signals</span></div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -2436,86 +2553,14 @@ <h2 id="cta-heading">Debug your reactive state<br />in minutes, not hours</h2>
     if (btn) { btn.textContent = '✓ You\'re on the list!'; btn.disabled = true; }
   }
 
-  /* ── Switch Real Screenshots ── */
-  function switchScreenshot(btn, type) {
-    document.querySelectorAll('.screenshot-switcher-btn').forEach(t => {
-      t.classList.remove('active');
-      t.setAttribute('aria-selected', 'false');
-    });
-    btn.classList.add('active');
-    btn.setAttribute('aria-selected', 'true');
-
-    const img = document.getElementById('screenshot-img');
-    const caption = document.getElementById('screenshot-caption');
-    
-    const sources = {
-      activity: {
-        src: '/sigtrace-activity.jpg',
-        alt: 'SigTrace VS Code extension panel showing live signal activity table',
-        cap: '▲ Real SigTrace panel — live signal activity inside VS Code'
-      },
-      timeline: {
-        src: '/sigtrace-timeline.jpg',
-        alt: 'SigTrace VS Code extension panel showing live signal timeline causal chains',
-        cap: '▲ Real SigTrace panel — causal propagation timeline of signal events'
-      },
-      components: {
-        src: '/sigtrace-components.jpg',
-        alt: 'SigTrace VS Code extension panel showing registered component performance analysis and warnings',
-        cap: '▲ Real SigTrace panel — component signal usage analysis and performance alerts'
-      }
-    };
-
-    if (sources[type]) {
-      img.src = sources[type].src;
-      img.alt = sources[type].alt;
-      caption.textContent = sources[type].cap;
-      updateViewDetails(type);
+  /* ── Mobile menu toggle ── */
+  function toggleMobileMenu() {
+    const navLinks = document.querySelector('.nav-links');
+    if (navLinks) {
+      navLinks.classList.toggle('mobile-active');
     }
   }
 
-  function updateViewDetails(type) {
-    const title = document.getElementById('view-title');
-    const desc = document.getElementById('view-description');
-    const kpiA = document.getElementById('kpi-a');
-    const kpiALabel = document.getElementById('kpi-a-label');
-    const kpiB = document.getElementById('kpi-b');
-    const kpiBLabel = document.getElementById('kpi-b-label');
-    const content = {
-      activity: {
-        title: 'Activity: what changed right now',
-        desc: 'Use Activity to catch noisy signals and effect storms instantly. Sort by Most Updates to find the source of jitter or unnecessary reruns in under a minute.',
-        kpiA: 'Noisy Signal',
-        kpiALabel: 'Top update source',
-        kpiB: 'Fast Triage',
-        kpiBLabel: 'Prioritize fixes'
-      },
-      timeline: {
-        title: 'Timeline: what triggered what',
-        desc: 'Timeline turns one bug report into a clear cause-and-effect path. Start from a signal write and follow every computed and effect execution in order.',
-        kpiA: 'Root Cause',
-        kpiALabel: 'First trigger',
-        kpiB: 'Chain Depth',
-        kpiBLabel: 'Propagation path'
-      },
-      components: {
-        title: 'Components: where reactivity cost lives',
-        desc: 'Components view groups updates by component so you can spot heavy zones, stale watchers, and bottlenecks before they become production incidents.',
-        kpiA: 'Hot Component',
-        kpiALabel: 'Most reactive work',
-        kpiB: 'Cleanup Target',
-        kpiBLabel: 'Unused/dead signals'
-      }
-    };
-    const next = content[type] || content.activity;
-    title.textContent = next.title;
-    desc.textContent = next.desc;
-    kpiA.textContent = next.kpiA;
-    kpiALabel.textContent = next.kpiALabel;
-    kpiB.textContent = next.kpiB;
-    kpiBLabel.textContent = next.kpiBLabel;
-  }
-
   /* ── Copy code ── */
   function copyCode() {
     const activeCode = document.querySelector('#code-body [id^="code-"]:not([style*="none"])');
diff --git a/docs/sigtrace-activity.jpg b/docs/sigtrace-activity.jpg
index 2cef214..b925930 100644
Binary files a/docs/sigtrace-activity.jpg and b/docs/sigtrace-activity.jpg differ
diff --git a/docs/sigtrace-components.jpg b/docs/sigtrace-components.jpg
index b5bfa55..257b9a0 100644
Binary files a/docs/sigtrace-components.jpg and b/docs/sigtrace-components.jpg differ
diff --git a/docs/sigtrace-preview.jpg b/docs/sigtrace-preview.jpg
index 56ccb3b..e0ffaf1 100644
Binary files a/docs/sigtrace-preview.jpg and b/docs/sigtrace-preview.jpg differ
diff --git a/docs/sigtrace-timeline.jpg b/docs/sigtrace-timeline.jpg
index 9cb514a..40d4391 100644
Binary files a/docs/sigtrace-timeline.jpg and b/docs/sigtrace-timeline.jpg differ
diff --git a/package-lock.json b/package-lock.json
index 58d1ab4..cb005ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sigtrace-monorepo",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sigtrace-monorepo",
-      "version": "1.0.0",
+      "version": "1.2.0",
       "workspaces": [
         "packages/*",
         "demo"
@@ -18,7 +18,7 @@
     },
     "demo": {
       "name": "sigtrace-demo",
-      "version": "1.0.0",
+      "version": "1.1.6",
       "dependencies": {
         "@sigtrace/core": "*",
         "solid-js": "^1.8.0"
@@ -2190,7 +2190,7 @@
     },
     "packages/core": {
       "name": "@sigtrace/core",
-      "version": "1.1.3",
+      "version": "1.2.0",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.22.0",
@@ -2219,7 +2219,7 @@
     },
     "packages/extension": {
       "name": "sigtrace-extension",
-      "version": "1.1.3",
+      "version": "1.2.0",
       "license": "MIT",
       "dependencies": {
         "ws": "^8.13.0"
@@ -2667,7 +2667,7 @@
     },
     "packages/vite-plugin": {
       "name": "@sigtrace/vite",
-      "version": "1.1.3",
+      "version": "1.2.0",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.22.0",
diff --git a/package.json b/package.json
index 1f0310d..a247981 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sigtrace-monorepo",
   "private": true,
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "Universal Reactive Graph & Signal Lifecycle Tracer",
   "workspaces": [
     "packages/*",
diff --git a/packages/core/README.md b/packages/core/README.md
index b5b78ab..de71cb1 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -38,15 +38,12 @@ yarn add @sigtrace/core --dev
 Instead of rewriting your project's code imports or build configuration files, simply prefix your normal startup command with our CLI wrapper:
 
 ```bash
-# For Angular CLI
-npx sigtrace run ng serve
-
-# For Vite / Vue / SolidJS
-npx sigtrace run yarn develop
-# or
-npx sigtrace run npm run start
+npx sigtrace run <project run command>
 ```
 
+> [!NOTE]
+> Replace `<project run command>` with your actual local project execution command (for example: `npm run dev`, `vite`, `ng serve`, etc.).
+
 ### How it works:
 1. The CLI registers the Node compilation preloader in your local workspace environment.
 2. It compiles the JavaScript/TypeScript code in memory, rewriting imports (e.g. `from '@angular/core'` to `from '@sigtrace/core/angular'`) on the fly.
diff --git a/packages/core/package.json b/packages/core/package.json
index 8eacb73..ac06873 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sigtrace/core",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "type": "module",
   "description": "Client-side runtime tracer for SigTrace",
   "main": "dist/index.js",
diff --git a/packages/extension/README.md b/packages/extension/README.md
index a9c2044..a69a7af 100644
--- a/packages/extension/README.md
+++ b/packages/extension/README.md
@@ -42,8 +42,11 @@ This extension contributes the following settings:
    ```
 4. Start your dev server prefixed with our CLI wrapper:
    ```bash
-   npx sigtrace run ng serve
+   npx sigtrace run <project run command>
    ```
+   > [!NOTE]
+   > Replace `<project run command>` with your actual local project execution command (for example: `npm run dev`, `vite`, `ng serve`, etc.).
+
 5. Open your browser and interact with your app; watch the visualizer map your reactivity live!
 
 ---
diff --git a/packages/extension/package.json b/packages/extension/package.json
index 4ea6a0b..24f76f0 100644
--- a/packages/extension/package.json
+++ b/packages/extension/package.json
@@ -2,7 +2,7 @@
   "name": "sigtrace-extension",
   "displayName": "SigTrace",
   "description": "Angular, Vue, and Solid signals debugger for VS Code",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "publisher": "sigtrace",
   "author": "SigTrace Contributors",
   "license": "MIT",
diff --git a/packages/extension/src/webview/app.js b/packages/extension/src/webview/app.js
index 7f1aaca..c4cede9 100644
--- a/packages/extension/src/webview/app.js
+++ b/packages/extension/src/webview/app.js
@@ -16,11 +16,13 @@
   let sortBy = 'updates';
   let focusedSignalId = null;
   let selectedSignalId = null;
-  const pinnedSignalIds = new Set();
-  const pinnedChainKeys = new Set();
+  const pinnedSignalIds = new Set();   // persists across Clear
+  const pinnedChainKeys = new Set();   // persists across Clear
   const hiddenChainIds = new Set();
   const expandedPinnedKeys = new Set();
   const valueScrollByNodeId = new Map();
+  // JSON tree collapse state: key = nodeId + '::' + jsonPath, value = true (collapsed)
+  const jsonCollapseState = new Map();
   let timelineQuery = '';
   let timelinePinnedOnly = false;
   let timelineShowHidden = false;
@@ -28,10 +30,13 @@
 
   // ── DOM refs ─────────────────────────────────────────────────────────────
   const activityTableBody = document.getElementById('activity-table-body');
+  const activityTableWrap = document.querySelector('.activity-table-wrap');
   const timelineChainList = document.getElementById('timeline-chain-list');
   const timelineSearch    = document.getElementById('timeline-search');
   const timelinePinnedOnlyToggle = document.getElementById('timeline-pinned-only');
   const timelineShowHiddenToggle = document.getElementById('timeline-show-hidden');
+  const labelPinnedOnly   = document.getElementById('label-pinned-only');
+  const labelShowHidden   = document.getElementById('label-show-hidden');
   const valuePanel        = document.getElementById('value-panel');
   const componentsPanel   = document.getElementById('components-panel');
   const alertsSection     = document.getElementById('alerts-section');
@@ -133,10 +138,13 @@
           if (value === resolved) stillReferenced = true;
         });
         if (!stillReferenced) {
-          nodeMap.delete(resolved);
-          nodeSignatureMap.forEach(function(value, key) {
-            if (value === resolved) nodeSignatureMap.delete(key);
-          });
+          // Don't delete pinned nodes
+          if (!pinnedSignalIds.has(resolved)) {
+            nodeMap.delete(resolved);
+            nodeSignatureMap.forEach(function(value, key) {
+              if (value === resolved) nodeSignatureMap.delete(key);
+            });
+          }
         }
         scheduleUiRender();
         break;
@@ -162,7 +170,6 @@
 
   // ── Name cleaning ─────────────────────────────────────────────────────────
   function cleanName(name) {
-    // "computed_line120" -> keep as-is for now; future AST fix will improve this
     return name;
   }
 
@@ -273,7 +280,7 @@
   function finalizeChain() {
     if (!activeChain) return;
     chainLog.unshift(activeChain);
-    if (chainLog.length > 60) chainLog.pop();
+    if (chainLog.length > 200) chainLog.pop();
     activeChain = null;
     var activeTab = document.querySelector('.tab-content.active');
     if (activeTab && activeTab.id === 'tab-timeline') renderTimeline();
@@ -281,11 +288,14 @@
 
   // ── Activity table ────────────────────────────────────────────────────────
   function renderActivityTable() {
+    // Save scroll position before re-render
+    var savedScroll = activityTableWrap ? activityTableWrap.scrollTop : 0;
+
     var query = searchBar.value.trim().toLowerCase();
     var rows = Array.from(nodeMap.values());
 
     if (!showInactive) {
-      rows = rows.filter(function(n) { return n.epoch > 0; });
+      rows = rows.filter(function(n) { return n.epoch > 0 || pinnedSignalIds.has(n.id); });
     }
 
     if (query) {
@@ -300,6 +310,7 @@
     else if (sortBy === 'component') rows.sort(function(a, b) { return a.component.localeCompare(b.component); });
     else if (sortBy === 'recent') rows.sort(function(a, b) { return (b.lastUpdated || 0) - (a.lastUpdated || 0); });
 
+    // Pinned rows float to top
     rows.sort(function(a, b) {
       var pinDelta = Number(pinnedSignalIds.has(b.id)) - Number(pinnedSignalIds.has(a.id));
       return pinDelta;
@@ -309,17 +320,14 @@
       var msg = !showInactive
         ? 'No active signals yet.<br>Interact with your app or enable <strong>Show inactive</strong> to see all registered signals.'
         : 'No signals found' + (query ? ' matching <strong>' + query + '</strong>' : '') + '.';
-      activityTableBody.innerHTML = '<tr class="empty-row"><td colspan="5">' + msg + '</td></tr>';
+      activityTableBody.innerHTML = '<tr class="empty-row"><td colspan="6">' + msg + '</td></tr>';
       return;
     }
 
-    var html = '';
-    for (var i = 0; i < rows.length; i++) {
-      var node = rows[i];
+    function renderRowHtml(node) {
       var valueStr = safeStr(node.value, 60);
       var valueFull = fullStr(node.value);
 
-      var timeStr = node.lastUpdated ? timeSince(node.lastUpdated) : 'never';
       var kindIcon = node.kind === 'signal' ? '&#9679;' : node.kind === 'memo' ? '&#9670;' : '&#9650;';
       var kindClass = 'kind-' + node.kind;
       var isHot = node.epoch > 30;
@@ -334,12 +342,15 @@
         locHtml = '<span class="signal-loc clickable" data-file="' + node.loc.file + '" data-line="' + node.loc.line + '" title="' + node.loc.file + '">' + fileBase + ':' + node.loc.line + '</span>';
       }
 
-      html += '<tr class="signal-row' + (isHot ? ' row-hot' : '') + (isFocused ? ' row-focused' : '') + '" data-id="' + node.id + '">' +
-        '<td class="col-name"><div class="col-name-wrap"><span class="kind-icon ' + kindClass + '">' + kindIcon + '</span><span class="signal-name" title="' + node.name + '">' + node.name + '</span><button class="pin-btn' + (isPinned ? ' active' : '') + '" data-action="toggle-pin" data-id="' + node.id + '" title="' + (isPinned ? 'Unpin signal' : 'Pin signal') + '">&#128204;</button></div>' + (locHtml ? '<div class="loc-wrap">' + locHtml + '</div>' : '') + '</td>' +
+      var rowHtml = '<tr class="signal-row' + (isHot ? ' row-hot' : '') + (isFocused ? ' row-focused' : '') + (isPinned ? ' row-pinned' : '') + '" data-id="' + node.id + '">' +
+        '<td class="col-name"><div class="col-name-wrap"><span class="kind-icon ' + kindClass + '">' + kindIcon + '</span><span class="signal-name" title="' + node.name + '">' + node.name + '</span>' +
+        '<button class="copy-name-btn" data-action="copy-name" data-name="' + escapeHtml(node.name) + '" title="Copy signal name to clipboard">&#10697;</button>' +
+        '</div>' + (locHtml ? '<div class="loc-wrap">' + locHtml + '</div>' : '') + '</td>' +
         '<td class="col-component" title="' + node.component + '">' + compShort + '</td>' +
         '<td class="col-value" title="' + escapeHtml(valueFull) + '">' + escapeHtml(valueStr) + '</td>' +
         '<td class="col-updates' + (isHot ? ' hot-count' : '') + '">' + node.epoch + '</td>' +
         '<td class="col-activity">' + actBar + '</td>' +
+        '<td class="col-pin"><button class="pin-btn' + (isPinned ? ' active' : '') + '" data-action="toggle-pin" data-id="' + node.id + '" title="' + (isPinned ? 'Unpin signal' : 'Pin signal') + '">&#128204;</button></td>' +
         '</tr>';
 
       if (isFocused) {
@@ -347,8 +358,8 @@
           ? '<span class="detail-label">Location:</span> <span class="detail-loc-link clickable" data-file="' + node.loc.file + '" data-line="' + node.loc.line + '">' + node.loc.file + ':' + node.loc.line + '</span>'
           : '<span class="detail-label">Location:</span> <span class="detail-val">Unknown</span>';
 
-        html += '<tr class="details-row">' +
-          '<td colspan="5">' +
+        rowHtml += '<tr class="details-row">' +
+          '<td colspan="6">' +
             '<div class="details-box">' +
               '<div class="details-meta">' +
                 '<div><span class="detail-label">Kind:</span> <span class="detail-val">' + node.kind + '</span></div>' +
@@ -362,8 +373,32 @@
           '</td>' +
           '</tr>';
       }
+      return rowHtml;
+    }
+
+    var html = '';
+    var pinnedRows = rows.filter(function(n) { return pinnedSignalIds.has(n.id); });
+    var unpinnedRows = rows.filter(function(n) { return !pinnedSignalIds.has(n.id); });
+
+    if (pinnedRows.length >= 2) {
+      html += '<tr class="category-header-row"><td colspan="6">Pinned</td></tr>';
+    }
+    for (var i = 0; i < pinnedRows.length; i++) {
+      html += renderRowHtml(pinnedRows[i]);
+    }
+
+    if (pinnedRows.length >= 1 && unpinnedRows.length >= 1) {
+      html += '<tr class="category-header-row"><td colspan="6">Others</td></tr>';
+    }
+    for (var j = 0; j < unpinnedRows.length; j++) {
+      html += renderRowHtml(unpinnedRows[j]);
     }
     activityTableBody.innerHTML = html;
+
+    // Restore scroll position after render
+    if (activityTableWrap) {
+      activityTableWrap.scrollTop = savedScroll;
+    }
   }
 
   function renderSparkBar(sparkline, total) {
@@ -414,8 +449,113 @@
       .replace(/'/g, "&#039;");
   }
 
+  // ── Interactive JSON Tree ─────────────────────────────────────────────────
+  function buildJsonTree(key, val, nodeId, path, isLast) {
+    path = path || 'root';
+    var comma = isLast ? '' : '<span class="json-bracket">,</span>';
+    var keyPart = '';
+    if (key !== null) {
+      if (typeof key === 'number') {
+        keyPart = '<span class="json-key">' + key + '</span><span class="json-colon">:</span> ';
+      } else {
+        keyPart = '<span class="json-key">"' + escapeHtml(key) + '"</span><span class="json-colon">:</span> ';
+      }
+    }
+
+    if (val === null) {
+      return '<div class="json-line">' +
+        '<span class="json-toggle leaf">&#9474;</span>' +
+        keyPart + '<span class="json-null">null</span>' + comma +
+        '</div>';
+    }
+    if (typeof val === 'boolean') {
+      return '<div class="json-line">' +
+        '<span class="json-toggle leaf">&#9474;</span>' +
+        keyPart + '<span class="json-bool">' + val + '</span>' + comma +
+        '</div>';
+    }
+    if (typeof val === 'number') {
+      return '<div class="json-line">' +
+        '<span class="json-toggle leaf">&#9474;</span>' +
+        keyPart + '<span class="json-num">' + val + '</span>' + comma +
+        '</div>';
+    }
+    if (typeof val === 'string') {
+      return '<div class="json-line">' +
+        '<span class="json-toggle leaf">&#9474;</span>' +
+        keyPart + '<span class="json-str">"' + escapeHtml(val) + '"</span>' + comma +
+        '</div>';
+    }
+
+    // Objects and Arrays
+    var isArr = Array.isArray(val);
+    var keys = isArr ? val.map(function(_, idx) { return idx; }) : Object.keys(val);
+    var openBrack = isArr ? '[' : '{';
+    var closeBrack = isArr ? ']' : '}';
+
+    if (keys.length === 0) {
+      return '<div class="json-line">' +
+        '<span class="json-toggle leaf">&#9474;</span>' +
+        keyPart + '<span class="json-bracket">' + openBrack + closeBrack + '</span>' + comma +
+        '</div>';
+    }
+
+    var collapseKey = nodeId + '::' + path;
+    var isCollapsed = jsonCollapseState.get(collapseKey) === true;
+    var preview = isArr
+      ? '[' + val.length + ' items]'
+      : '{' + keys.slice(0, 3).join(', ') + (keys.length > 3 ? ', ...' : '') + '}';
+
+    var innerHtml = '';
+    if (!isCollapsed) {
+      for (var i = 0; i < keys.length; i++) {
+        var k = keys[i];
+        var childVal = val[k];
+        var childPath = isArr ? path + '[' + i + ']' : path + '.' + k;
+        innerHtml += buildJsonTree(k, childVal, nodeId, childPath, i === keys.length - 1);
+      }
+    }
+
+    var toggleIcon = '<span class="json-toggle" data-collapse-key="' + escapeHtml(collapseKey) + '">' + (isCollapsed ? '&#9654;' : '&#9660;') + '</span>';
+
+    return '<div class="json-group">' +
+      '<div class="json-line">' +
+        toggleIcon +
+        keyPart + '<span class="json-bracket">' + openBrack + '</span>' +
+        (isCollapsed ? '<span class="json-preview">' + escapeHtml(preview) + '</span><span class="json-bracket">' + closeBrack + '</span>' + comma : '') +
+      '</div>' +
+      (isCollapsed ? '' : '<div class="json-children">' + innerHtml + '</div>' +
+      '<div class="json-line"><span class="json-toggle leaf">&#9474;</span><span class="json-bracket">' + closeBrack + '</span>' + comma + '</div>') +
+      '</div>';
+  }
+
   // ── Timeline ──────────────────────────────────────────────────────────────
+  function updateTimelineCheckboxStates() {
+    var hasPinned = pinnedChainKeys.size > 0;
+    var hasHidden = hiddenChainIds.size > 0;
+
+    if (timelinePinnedOnlyToggle) {
+      timelinePinnedOnlyToggle.disabled = !hasPinned;
+      if (!hasPinned) {
+        timelinePinnedOnly = false;
+        timelinePinnedOnlyToggle.checked = false;
+      }
+    }
+    if (labelPinnedOnly) labelPinnedOnly.classList.toggle('disabled', !hasPinned);
+
+    if (timelineShowHiddenToggle) {
+      timelineShowHiddenToggle.disabled = !hasHidden;
+      if (!hasHidden) {
+        timelineShowHidden = false;
+        timelineShowHiddenToggle.checked = false;
+      }
+    }
+    if (labelShowHidden) labelShowHidden.classList.toggle('disabled', !hasHidden);
+  }
+
   function renderTimeline() {
+    updateTimelineCheckboxStates();
+
     var grouped = new Map();
     for (var idx = 0; idx < chainLog.length; idx++) {
       var chain = chainLog[idx];
@@ -427,180 +567,196 @@
     var groupedEntries = Array.from(grouped.entries()).map(function(entry) {
       var key = entry[0];
       var chains = entry[1];
-      var renderChains = chains.filter(function(chain) {
+
+      // In "show hidden" mode: show ONLY hidden items
+      // In normal mode: show only non-hidden items
+      var visibleChains = chains.filter(function(chain) {
         return timelineShowHidden ? hiddenChainIds.has(chain.id) : !hiddenChainIds.has(chain.id);
       });
+
       return {
         key: key,
         chains: chains,
-        renderChains: renderChains,
-        latest: renderChains[0] || null,
+        visibleChains: visibleChains,
         pinned: pinnedChainKeys.has(key),
-        hasHidden: chains.some(function(c) { return hiddenChainIds.has(c.id); })
+        hasHidden: chains.some(function(c) { return hiddenChainIds.has(c.id); }),
+        hiddenCount: chains.filter(function(c) { return hiddenChainIds.has(c.id); }).length
       };
     }).filter(function(group) {
       if (timelinePinnedOnly && !group.pinned) return false;
-      if (!group.latest) return false;
+      if (group.visibleChains.length === 0) return false;
+
       if (!timelineQuery) return true;
       var q = timelineQuery;
-      var latest = group.latest;
-      if (latest.trigger.name.toLowerCase().indexOf(q) !== -1) return true;
-      if ((latest.trigger.component || '').toLowerCase().indexOf(q) !== -1) return true;
-      return latest.updates.some(function(u) {
-        return u.name.toLowerCase().indexOf(q) !== -1 ||
-          (u.component || '').toLowerCase().indexOf(q) !== -1 ||
-          (u.kind || '').toLowerCase().indexOf(q) !== -1;
+      // Search across all visible chains in the group
+      return group.visibleChains.some(function(chain) {
+        if (chain.trigger.name.toLowerCase().indexOf(q) !== -1) return true;
+        if ((chain.trigger.component || '').toLowerCase().indexOf(q) !== -1) return true;
+        return chain.updates.some(function(u) {
+          return u.name.toLowerCase().indexOf(q) !== -1 ||
+            (u.component || '').toLowerCase().indexOf(q) !== -1 ||
+            (u.kind || '').toLowerCase().indexOf(q) !== -1;
+        });
       });
     });
 
+    // Sort: pinned groups first, then newest first within groups
     groupedEntries.sort(function(a, b) {
       var pinDelta = Number(b.pinned) - Number(a.pinned);
       if (pinDelta !== 0) return pinDelta;
-      return (b.latest.timestamp || 0) - (a.latest.timestamp || 0);
+      var latestA = a.visibleChains[0] ? a.visibleChains[0].timestamp : 0;
+      var latestB = b.visibleChains[0] ? b.visibleChains[0].timestamp : 0;
+      return latestB - latestA;
     });
 
     if (groupedEntries.length === 0) {
       var emptyMsg = chainLog.length === 0
         ? 'No activity yet.<br>Interact with your app to see causal chains appear here.'
-        : 'No timeline entries match the current filter.';
+        : (timelineShowHidden ? 'No hidden items.' : 'No timeline entries match the current filter.');
       timelineChainList.innerHTML = '<div class="empty-state">' + emptyMsg + '</div>';
       return;
     }
 
     var html = '';
+
     for (var i = 0; i < groupedEntries.length; i++) {
       var group = groupedEntries[i];
-      var chain = group.latest;
-      var d = new Date(chain.timestamp);
-      var timeStr = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()) + '.' + String(d.getMilliseconds()).padStart(3, '0');
-      var totalEffects = chain.updates.filter(function(u) { return u.kind === 'effect'; }).length;
-      var totalMemos   = chain.updates.filter(function(u) { return u.kind === 'memo'; }).length;
-      var totalMs      = chain.updates.reduce(function(s, u) { return s + (u.duration || 0); }, 0);
-      var summaryParts = [];
-      if (totalMemos > 0) summaryParts.push(totalMemos + ' computed');
-      if (totalEffects > 0) summaryParts.push(totalEffects + ' effect' + (totalEffects > 1 ? 's' : ''));
-      if (totalMs > 0.1) summaryParts.push(totalMs.toFixed(1) + 'ms');
-      var summaryStr = summaryParts.join(' &middot; ');
-
-      var prevFull = fullStr(chain.trigger.previousValue);
-      var newFull = fullStr(chain.trigger.value);
-      var prevStr = safeStr(chain.trigger.previousValue, 30);
-      var newStr  = safeStr(chain.trigger.value, 35);
-      var valChange = prevStr ? prevStr + ' &rarr; ' + newStr : newStr;
-      var valChangeTitle = prevFull ? prevFull + ' -> ' + newFull : newFull;
-
-      var updatesHtml = '';
-      for (var j = 0; j < chain.updates.length; j++) {
-        var u = chain.updates[j];
-        var uKindIcon = u.kind === 'memo' ? '&#9670;' : '&#9650;';
-        var uKindLabel = u.kind === 'memo' ? 'computed' : 'effect';
-        var durStr = u.duration > 0 ? '(' + u.duration.toFixed(1) + 'ms)' : '';
-        var isUHot = u.duration > 2;
-        var uValStr = u.value !== undefined ? safeStr(u.value, 30) : '';
-        var uValFull = u.value !== undefined ? fullStr(u.value) : '';
-        
-        var uClickAttr = u.loc ? ' class="chain-node-name clickable" data-file="' + u.loc.file + '" data-line="' + u.loc.line + '"' : ' class="chain-node-name"';
-
-        updatesHtml += '<div class="chain-update' + (isUHot ? ' chain-hot' : '') + '">' +
-          '<span class="chain-indent">&#9492;&#9472;</span>' +
-          '<span class="chain-icon kind-' + u.kind + '">' + uKindIcon + '</span>' +
-          '<span' + uClickAttr + '>' + u.name + '</span>' +
-          '<span class="chain-component">[' + shortComponentName(u.component) + ']</span>' +
-          '<span class="chain-kind">' + uKindLabel + '</span>' +
-          (uValStr ? '<span class="chain-value" title="' + escapeHtml(uValFull) + '">' + escapeHtml(uValStr) + '</span>' : '') +
-          (durStr ? '<span class="chain-duration">' + durStr + '</span>' : '') +
-          '</div>';
-      }
-
-      var trigClickAttr = chain.trigger.loc ? ' class="chain-trigger-name clickable" data-file="' + chain.trigger.loc.file + '" data-line="' + chain.trigger.loc.line + '"' : ' class="chain-trigger-name"';
       var chainPinned = group.pinned;
-      var canExpand = group.renderChains.length > 1;
+
+      // Expand/collapse control: only available when pinned AND multiple visible events
+      var canExpand = chainPinned && group.visibleChains.length > 1;
       var expanded = expandedPinnedKeys.has(group.key);
-      var hiddenLabel = hiddenChainIds.has(chain.id) ? 'Show' : 'Hide';
 
-      var olderHtml = '';
-      if (chainPinned && canExpand && expanded) {
-        for (var k = 1; k < group.renderChains.length; k++) {
-          olderHtml += renderChainCard(group.renderChains[k], group.key);
-        }
+      // Determine which events to render:
+      // - Not pinned: show all visible events
+      // - Pinned + not expanded: show only the latest (first) event
+      // - Pinned + expanded: show all visible events
+      var eventsToRender = group.visibleChains;
+      if (chainPinned && !expanded) {
+        eventsToRender = [group.visibleChains[0]];
       }
 
-      html += '<div class="chain-card' + (chainPinned ? ' chain-pinned' : '') + '">' +
-        '<div class="chain-header">' +
-          '<span class="chain-time">' + timeStr + '</span>' +
-          '<span class="chain-trigger-icon kind-signal">&#9679;</span>' +
-          '<span' + trigClickAttr + '>' + chain.trigger.name + '</span>' +
-          '<span class="chain-component">[' + shortComponentName(chain.trigger.component) + ']</span>' +
-          (valChange ? '<span class="chain-value-change" title="' + escapeHtml(valChangeTitle) + '">' + valChange + '</span>' : '') +
-          (summaryStr ? '<span class="chain-summary">' + summaryStr + '</span>' : '') +
-          '<button class="chain-pin-btn' + (chainPinned ? ' active' : '') + '" data-action="toggle-chain-pin" data-key="' + group.key + '">' + (chainPinned ? 'Pinned' : 'Pin') + '</button>' +
-          '<button class="chain-hide-btn' + (hiddenChainIds.has(chain.id) ? ' active' : '') + '" data-action="toggle-chain-visibility" data-id="' + chain.id + '">' + hiddenLabel + '</button>' +
-          (chainPinned && canExpand ? '<button class="chain-hide-btn" data-action="toggle-pinned-expand" data-key="' + group.key + '">' + (expanded ? 'Collapse older' : 'Expand older (' + (group.renderChains.length - 1) + ')') + '</button>' : '') +
-          (!timelineShowHidden && group.hasHidden ? '<span class="chain-summary">hidden: ' + group.chains.filter(function(c) { return hiddenChainIds.has(c.id); }).length + '</span>' : '') +
-        '</div>' +
-        (chain.updates.length > 0 ? '<div class="chain-updates">' + updatesHtml + '</div>' : '') +
-        '</div>' +
-        olderHtml;
-    }
-    timelineChainList.innerHTML = html;
-  }
+      // Group header wrapper (for pinned groups with multiple events)
+      var groupLabel = group.visibleChains.length > 1
+        ? '<span class="chain-summary">' + group.visibleChains.length + ' events</span>'
+        : '';
+
+      var hiddenBadge = (!timelineShowHidden && group.hasHidden)
+        ? '<span class="chain-summary">hidden: ' + group.hiddenCount + '</span>'
+        : '';
+
+      // Render each event card for this group
+      for (var e = 0; e < eventsToRender.length; e++) {
+        var chain = eventsToRender[e];
+        var isFirstInGroup = (e === 0);
+
+        var d = new Date(chain.timestamp);
+        var timeStr = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()) + '.' + String(d.getMilliseconds()).padStart(3, '0');
+        var totalEffects = chain.updates.filter(function(u) { return u.kind === 'effect'; }).length;
+        var totalMemos   = chain.updates.filter(function(u) { return u.kind === 'memo'; }).length;
+        var totalMs      = chain.updates.reduce(function(s, u) { return s + (u.duration || 0); }, 0);
+        var summaryParts = [];
+        if (totalMemos > 0) summaryParts.push(totalMemos + ' computed');
+        if (totalEffects > 0) summaryParts.push(totalEffects + ' effect' + (totalEffects > 1 ? 's' : ''));
+        if (totalMs > 0.1) summaryParts.push(totalMs.toFixed(1) + 'ms');
+        var summaryStr = summaryParts.join(' &middot; ');
+
+        var prevFull = fullStr(chain.trigger.previousValue);
+        var newFull  = fullStr(chain.trigger.value);
+        var prevStr  = safeStr(chain.trigger.previousValue, 30);
+        var newStr   = safeStr(chain.trigger.value, 35);
+        var valChange = prevStr ? prevStr + ' &rarr; ' + newStr : newStr;
+        var valChangeTitle = prevFull ? prevFull + ' -> ' + newFull : newFull;
+
+        var updatesHtml = '';
+        for (var j = 0; j < chain.updates.length; j++) {
+          var u = chain.updates[j];
+          var uKindIcon  = u.kind === 'memo' ? '&#9670;' : '&#9650;';
+          var uKindLabel = u.kind === 'memo' ? 'computed' : 'effect';
+          var durStr = u.duration > 0 ? '(' + u.duration.toFixed(1) + 'ms)' : '';
+          var isUHot = u.duration > 2;
+          var uValStr  = u.value !== undefined ? safeStr(u.value, 30) : '';
+          var uValFull = u.value !== undefined ? fullStr(u.value) : '';
+          var uClickAttr = u.loc
+            ? ' class="chain-node-name clickable" data-file="' + u.loc.file + '" data-line="' + u.loc.line + '"'
+            : ' class="chain-node-name"';
+
+          updatesHtml += '<div class="chain-update' + (isUHot ? ' chain-hot' : '') + '">' +
+            '<span class="chain-indent">&#9492;&#9472;</span>' +
+            '<span class="chain-icon kind-' + u.kind + '">' + uKindIcon + '</span>' +
+            '<span' + uClickAttr + '>' + u.name + '</span>' +
+            '<span class="chain-component">[' + shortComponentName(u.component) + ']</span>' +
+            '<span class="chain-kind">' + uKindLabel + '</span>' +
+            (uValStr ? '<span class="chain-value" title="' + escapeHtml(uValFull) + '">' + escapeHtml(uValStr) + '</span>' : '') +
+            (durStr ? '<span class="chain-duration">' + durStr + '</span>' : '') +
+            '</div>';
+        }
 
-  function renderChainCard(chain) {
-    var d = new Date(chain.timestamp);
-    var timeStr = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()) + '.' + String(d.getMilliseconds()).padStart(3, '0');
-    var trigClickAttr = chain.trigger.loc ? ' class="chain-trigger-name clickable" data-file="' + chain.trigger.loc.file + '" data-line="' + chain.trigger.loc.line + '"' : ' class="chain-trigger-name"';
-    var updatesHtml = '';
-    for (var j = 0; j < chain.updates.length; j++) {
-      var u = chain.updates[j];
-      var uKindIcon = u.kind === 'memo' ? '&#9670;' : '&#9650;';
-      var uKindLabel = u.kind === 'memo' ? 'computed' : 'effect';
-      var durStr = u.duration > 0 ? '(' + u.duration.toFixed(1) + 'ms)' : '';
-      var uClickAttr = u.loc ? ' class="chain-node-name clickable" data-file="' + u.loc.file + '" data-line="' + u.loc.line + '"' : ' class="chain-node-name"';
-      updatesHtml += '<div class="chain-update">' +
-        '<span class="chain-indent">&#9492;&#9472;</span>' +
-        '<span class="chain-icon kind-' + u.kind + '">' + uKindIcon + '</span>' +
-        '<span' + uClickAttr + '>' + u.name + '</span>' +
-        '<span class="chain-component">[' + shortComponentName(u.component) + ']</span>' +
-        '<span class="chain-kind">' + uKindLabel + '</span>' +
-        (durStr ? '<span class="chain-duration">' + durStr + '</span>' : '') +
-        '</div>';
+        var trigClickAttr = chain.trigger.loc
+          ? ' class="chain-trigger-name clickable" data-file="' + chain.trigger.loc.file + '" data-line="' + chain.trigger.loc.line + '"'
+          : ' class="chain-trigger-name"';
+
+        var isHidden = hiddenChainIds.has(chain.id);
+        var hiddenLabel = isHidden ? 'Show' : 'Hide';
+
+        html += '<div class="chain-card' + (chainPinned ? ' chain-pinned' : '') + '">' +
+          '<div class="chain-header">' +
+            '<span class="chain-time">' + timeStr + '</span>' +
+            '<span class="chain-trigger-icon kind-signal">&#9679;</span>' +
+            '<span' + trigClickAttr + '>' + chain.trigger.name + '</span>' +
+            '<span class="chain-component">[' + shortComponentName(chain.trigger.component) + ']</span>' +
+            (valChange ? '<span class="chain-value-change" title="' + escapeHtml(valChangeTitle) + '">' + valChange + '</span>' : '') +
+            (summaryStr ? '<span class="chain-summary">' + summaryStr + '</span>' : '') +
+            // Show event number if group has multiple events
+            (group.visibleChains.length > 1 ? '<span class="chain-summary">event ' + (e + 1) + '/' + group.visibleChains.length + '</span>' : '') +
+            hiddenBadge +
+            // Pin button only on first card of the group
+            (isFirstInGroup ? '<button class="chain-pin-btn' + (chainPinned ? ' active' : '') + '" data-action="toggle-chain-pin" data-key="' + group.key + '">' + (chainPinned ? 'Pinned' : 'Pin') + '</button>' : '') +
+            // Hide/Show button on each event
+            '<button class="chain-hide-btn' + (isHidden ? ' active' : '') + '" data-action="toggle-chain-visibility" data-id="' + chain.id + '">' + hiddenLabel + '</button>' +
+            // Expand/Collapse button: only on first card of a pinned group with multiple events
+            (isFirstInGroup && canExpand ? '<button class="chain-hide-btn" data-action="toggle-pinned-expand" data-key="' + group.key + '">' + (expanded ? 'Collapse older' : 'Expand older (' + (group.visibleChains.length - 1) + ')') + '</button>' : '') +
+          '</div>' +
+          (chain.updates.length > 0 ? '<div class="chain-updates">' + updatesHtml + '</div>' : '') +
+          '</div>';
+      }
     }
-    var isHidden = hiddenChainIds.has(chain.id);
-    return '<div class="chain-card">' +
-      '<div class="chain-header">' +
-      '<span class="chain-time">' + timeStr + '</span>' +
-      '<span class="chain-trigger-icon kind-signal">&#9679;</span>' +
-      '<span' + trigClickAttr + '>' + chain.trigger.name + '</span>' +
-      '<span class="chain-component">[' + shortComponentName(chain.trigger.component) + ']</span>' +
-      '<span class="chain-summary">older</span>' +
-      '<button class="chain-hide-btn' + (isHidden ? ' active' : '') + '" data-action="toggle-chain-visibility" data-id="' + chain.id + '">' + (isHidden ? 'Show' : 'Hide') + '</button>' +
-      '</div>' +
-      (updatesHtml ? '<div class="chain-updates">' + updatesHtml + '</div>' : '') +
-      '</div>';
+
+    timelineChainList.innerHTML = html;
   }
 
   function pad(n) { return n < 10 ? '0' + n : String(n); }
 
-  // ── Component cards ───────────────────────────────────────────────────────
+  // ── Value Inspector ───────────────────────────────────────────────────────
   function renderValueInspector() {
     var targetId = selectedSignalId || focusedSignalId;
     var node = targetId ? nodeMap.get(targetId) : null;
     if (!node) {
-      if (valuePanel && valuePanel.dataset.nodeId) {
-        valueScrollByNodeId.set(valuePanel.dataset.nodeId, valuePanel.scrollTop);
-      }
       valuePanel.innerHTML = '<div class="empty-state">Select a signal from Activity to inspect the full value.</div>';
       valuePanel.dataset.nodeId = '';
       return;
     }
 
-    if (valuePanel && valuePanel.dataset.nodeId) {
-      valueScrollByNodeId.set(valuePanel.dataset.nodeId, valuePanel.scrollTop);
+    // Save scroll of previous node before switching
+    var prevNodeId = valuePanel.dataset.nodeId;
+    if (prevNodeId && prevNodeId !== node.id) {
+      valueScrollByNodeId.set(prevNodeId, valuePanel.scrollTop);
     }
 
-    var value = fullStr(node.value);
     var locationText = node.loc ? (node.loc.file + ':' + node.loc.line) : 'Unknown';
     var updated = node.lastUpdated ? timeSince(node.lastUpdated) : 'never';
+
+    // Build interactive JSON tree or fallback to primitive display
+    var treeHtml;
+    try {
+      var parsed = (typeof node.value === 'object' && node.value !== null)
+        ? node.value
+        : JSON.parse(JSON.stringify(node.value));
+      treeHtml = buildJsonTree(null, node.value, node.id, 'root', true);
+    } catch(e) {
+      treeHtml = '<span>' + escapeHtml(fullStr(node.value)) + '</span>';
+    }
+
     valuePanel.innerHTML =
       '<div class="value-header">' +
         '<div class="value-title">' + escapeHtml(node.name) + '</div>' +
@@ -613,15 +769,18 @@
         '<span>Last update: <strong>' + escapeHtml(updated) + '</strong></span>' +
       '</div>' +
       '<div class="value-meta"><span>Location: <strong>' + escapeHtml(locationText) + '</strong></span></div>' +
-      '<pre class="value-code"><code>' + escapeHtml(value) + '</code></pre>';
+      '<div class="json-tree">' + treeHtml + '</div>';
 
     valuePanel.dataset.nodeId = node.id;
+
+    // Restore scroll position after setting innerHTML
     var savedScroll = valueScrollByNodeId.get(node.id);
     if (typeof savedScroll === 'number') {
       valuePanel.scrollTop = savedScroll;
     }
   }
 
+  // ── Component cards ───────────────────────────────────────────────────────
   function renderComponentCards() {
     if (componentMap.size === 0) {
       componentsPanel.innerHTML = '<div class="empty-state">No components tracked yet.</div>';
@@ -734,35 +893,87 @@
   // ── Controls ──────────────────────────────────────────────────────────────
   btnRecord.addEventListener('click', function() {
     isRecording = !isRecording;
-    btnRecord.classList.toggle('active', isRecording);
-    btnRecord.innerHTML = isRecording ? '&#9679; Rec' : '&#9675; Paused';
+    if (isRecording) {
+      btnRecord.className = 'btn btn-tracing';
+      btnRecord.innerHTML = '&#9679; Tracing';
+    } else {
+      btnRecord.className = 'btn btn-paused';
+      btnRecord.innerHTML = '&#9646;&#9646; Paused';
+    }
   });
 
   btnClear.addEventListener('click', function() {
+    // Preserve pinned signal nodes — tombstone them (reset data, keep id/name)
+    var pinnedNodesCopy = new Map();
+    pinnedSignalIds.forEach(function(id) {
+      var node = nodeMap.get(id);
+      if (node) {
+        pinnedNodesCopy.set(id, {
+          id: node.id,
+          name: node.name,
+          component: node.component,
+          kind: node.kind,
+          value: node.value,
+          epoch: 0,
+          duration: 0,
+          lastUpdated: null,
+          sparkline: [],
+          loc: node.loc
+        });
+      }
+    });
+
+    // Preserve pinned chain log entries
+    var pinnedChains = chainLog.filter(function(c) {
+      return pinnedChainKeys.has(chainGroupKey(c));
+    });
+
+    // Clear everything
     nodeMap.clear();
     nodeAliasMap.clear();
     nodeSignatureMap.clear();
     componentMap.clear();
     chainLog = [];
-    pinnedSignalIds.clear();
-    pinnedChainKeys.clear();
     hiddenChainIds.clear();
     expandedPinnedKeys.clear();
     selectedSignalId = null;
     timelineQuery = '';
-    timelinePinnedOnly = false;
-    timelineShowHidden = false;
     valueScrollByNodeId.clear();
     if (timelineSearch) timelineSearch.value = '';
-    if (timelinePinnedOnlyToggle) timelinePinnedOnlyToggle.checked = false;
-    if (timelineShowHiddenToggle) timelineShowHiddenToggle.checked = false;
     alerts = [];
     activeChain = null;
     clearTimeout(chainFlushTimer);
-    activityTableBody.innerHTML = '<tr class="empty-row"><td colspan="5">Cleared. Interact with your app to begin tracking.</td></tr>';
-    timelineChainList.innerHTML = '<div class="empty-state">Cleared.</div>';
+
+    // Restore pinned nodes
+    pinnedNodesCopy.forEach(function(node, id) {
+      nodeMap.set(id, node);
+      ensureComponent(node);
+      
+      // Re-populate maps so future events link up to the existing pinned node references
+      nodeAliasMap.set(id, id);
+      var signature = [
+        node.kind,
+        node.component,
+        node.name,
+        toLocKey(node.loc)
+      ].join('|');
+      nodeSignatureMap.set(signature, id);
+    });
+
+    // Restore pinned chains
+    chainLog = pinnedChains;
+
+    // Update checkbox states
+    updateTimelineCheckboxStates();
+
+    // Re-render
+    renderActivityTable();
+    renderTimeline();
     if (componentsPanel) componentsPanel.innerHTML = '<div class="empty-state">No components tracked yet.</div>';
-    if (valuePanel) valuePanel.innerHTML = '<div class="empty-state">Select a signal from Activity to inspect the full value.</div>';
+    if (valuePanel) {
+      valuePanel.innerHTML = '<div class="empty-state">Select a signal from Activity to inspect the full value.</div>';
+      valuePanel.dataset.nodeId = '';
+    }
     alertBadge.style.display = 'none';
     alertsSection.style.display = 'none';
     vscode.postMessage({ command: 'clearMetrics' });
@@ -789,15 +1000,19 @@
 
   if (timelinePinnedOnlyToggle) {
     timelinePinnedOnlyToggle.addEventListener('change', function() {
-      timelinePinnedOnly = timelinePinnedOnlyToggle.checked;
-      renderTimeline();
+      if (!timelinePinnedOnlyToggle.disabled) {
+        timelinePinnedOnly = timelinePinnedOnlyToggle.checked;
+        renderTimeline();
+      }
     });
   }
 
   if (timelineShowHiddenToggle) {
     timelineShowHiddenToggle.addEventListener('change', function() {
-      timelineShowHidden = timelineShowHiddenToggle.checked;
-      renderTimeline();
+      if (!timelineShowHiddenToggle.disabled) {
+        timelineShowHidden = timelineShowHiddenToggle.checked;
+        renderTimeline();
+      }
     });
   }
 
@@ -836,7 +1051,7 @@
     document.body.removeChild(ta);
   }
 
-  // ── Code Navigation Delegation ───────────────────────────────────────────
+  // ── Activity Table Click Delegation ──────────────────────────────────────
   activityTableBody.addEventListener('click', function(e) {
     var pinBtn = e.target.closest('[data-action="toggle-pin"]');
     if (pinBtn) {
@@ -848,6 +1063,13 @@
       return;
     }
 
+    var copyNameBtn = e.target.closest('[data-action="copy-name"]');
+    if (copyNameBtn) {
+      copyToClipboard(copyNameBtn.dataset.name, copyNameBtn);
+      e.stopPropagation();
+      return;
+    }
+
     var actionBtn = e.target.closest('[data-action]');
     if (actionBtn) {
       var action = actionBtn.dataset.action;
@@ -872,12 +1094,7 @@
       var file = target.dataset.file;
       var line = parseInt(target.dataset.line, 10);
       if (file && line) {
-        vscode.postMessage({
-          command: 'openFile',
-          file: file,
-          line: line,
-          column: 0
-        });
+        vscode.postMessage({ command: 'openFile', file: file, line: line, column: 0 });
         e.stopPropagation();
         return;
       }
@@ -887,7 +1104,7 @@
     if (row) {
       var id = row.dataset.id;
       selectedSignalId = id;
-      focusedSignalId = (focusedSignalId === id) ? null : id; // Toggle collapse/expand
+      focusedSignalId = (focusedSignalId === id) ? null : id;
       renderActivityTable();
     }
   });
@@ -898,16 +1115,12 @@
       var id = row.dataset.id;
       var node = nodeMap.get(id);
       if (node && node.loc) {
-        vscode.postMessage({
-          command: 'openFile',
-          file: node.loc.file,
-          line: node.loc.line,
-          column: 0
-        });
+        vscode.postMessage({ command: 'openFile', file: node.loc.file, line: node.loc.line, column: 0 });
       }
     }
   });
 
+  // ── Timeline Click Delegation ─────────────────────────────────────────────
   timelineChainList.addEventListener('click', function(e) {
     var pinBtn = e.target.closest('[data-action="toggle-chain-pin"]');
     if (pinBtn) {
@@ -948,16 +1161,40 @@
       var file = target.dataset.file;
       var line = parseInt(target.dataset.line, 10);
       if (file && line) {
-        vscode.postMessage({
-          command: 'openFile',
-          file: file,
-          line: line,
-          column: 0
-        });
+        vscode.postMessage({ command: 'openFile', file: file, line: line, column: 0 });
       }
     }
   });
 
+  // ── Value Panel Click Delegation ──────────────────────────────────────────
+  if (valuePanel) {
+    valuePanel.addEventListener('click', function(e) {
+      // Copy value button
+      var copyBtn = e.target.closest('[data-action="copy-value"]');
+      if (copyBtn) {
+        var id = copyBtn.dataset.id;
+        var node = id ? nodeMap.get(id) : null;
+        if (!node) return;
+        copyToClipboard(fullStr(node.value), copyBtn);
+        return;
+      }
+
+      // JSON tree toggle
+      var toggle = e.target.closest('[data-collapse-key]');
+      if (toggle) {
+        var collapseKey = toggle.dataset.collapseKey;
+        if (!collapseKey) return;
+        var isCollapsed = jsonCollapseState.get(collapseKey) === true;
+        jsonCollapseState.set(collapseKey, !isCollapsed);
+        // Re-render value inspector preserving scroll
+        var currentScroll = valuePanel.scrollTop;
+        renderValueInspector();
+        valuePanel.scrollTop = currentScroll;
+        return;
+      }
+    });
+  }
+
   // ── VS Code message handler ───────────────────────────────────────────────
   window.addEventListener('message', function(event) {
     var msg = event.data;
@@ -977,17 +1214,6 @@
     processEvent(msg);
   });
 
-  if (valuePanel) {
-    valuePanel.addEventListener('click', function(e) {
-      var btn = e.target.closest('[data-action="copy-value"]');
-      if (!btn) return;
-      var id = btn.dataset.id;
-      var node = id ? nodeMap.get(id) : null;
-      if (!node) return;
-      copyToClipboard(fullStr(node.value), btn);
-    });
-  }
-
   // Periodic refresh for timeSince + diagnostics
   setInterval(function() {
     var activeTab = document.querySelector('.tab-content.active');
diff --git a/packages/extension/src/webview/index.html b/packages/extension/src/webview/index.html
index a4b1627..be3e0cb 100644
--- a/packages/extension/src/webview/index.html
+++ b/packages/extension/src/webview/index.html
@@ -46,7 +46,20 @@
       display:flex; align-items:center; gap:3px; transition:all 0.15s;
     }
     .btn:hover { background:var(--bg3); }
-    .btn.active { background:rgba(239,68,68,0.15); border-color:#ef4444; color:#fca5a5; }
+    /* Tracing state — green */
+    .btn-tracing {
+      background: rgba(16,185,129,0.1);
+      border-color: rgba(16,185,129,0.6);
+      color: #34d399;
+    }
+    .btn-tracing:hover { background: rgba(16,185,129,0.18); }
+    /* Paused state — amber */
+    .btn-paused {
+      background: rgba(251,191,36,0.08);
+      border-color: rgba(251,191,36,0.5);
+      color: #fbbf24;
+    }
+    .btn-paused:hover { background: rgba(251,191,36,0.14); }
     .tabs-header {
       display:flex; border-bottom:1px solid var(--border);
       flex-shrink:0; background:rgba(15,23,42,0.4);
@@ -87,6 +100,8 @@
       color:var(--muted); cursor:pointer; white-space:nowrap; font-size:11px;
     }
     .inactive-label input { accent-color:var(--accent); cursor:pointer; }
+    .inactive-label input:disabled { opacity: 0.4; cursor: not-allowed; }
+    .inactive-label.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
     .controls-note { color: var(--muted); font-size: 10px; }
     .activity-table-wrap { flex:1; overflow-y:auto; overflow-x:hidden; }
     .activity-table { width:100%; border-collapse:collapse; }
@@ -99,27 +114,46 @@
     .signal-row { border-bottom:1px solid rgba(255,255,255,0.025); cursor:pointer; transition:background 0.1s; }
     .signal-row:hover { background:var(--bg2); }
     .signal-row.row-focused { background:rgba(59,130,246,0.09); }
+    .signal-row.row-pinned { background:rgba(251,191,36,0.04); border-left: 2px solid rgba(251,191,36,0.35); }
     .signal-row td { padding:5px 8px; vertical-align:middle; }
-    .col-name { max-width:160px; }
+    .col-name { max-width:150px; }
     .col-component { max-width:120px; color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
     .col-value { max-width:110px; font-family:monospace; font-size:10px; color:#94a3b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
     .col-updates { text-align:center; font-weight:600; font-size:11px; width:60px; }
     .col-updates.hot-count { color:var(--error); }
     .col-activity { width:80px; }
+    .col-pin { width:34px; text-align:center; }
+    /* Pin button — rightmost column */
     .pin-btn {
-      margin-left: 6px;
       border: 1px solid var(--border);
       border-radius: 4px;
       background: transparent;
       color: var(--muted);
       font-size: 10px;
       line-height: 1;
-      padding: 1px 4px;
+      padding: 2px 5px;
       cursor: pointer;
     }
     .pin-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
     .pin-btn.active { color: #fbbf24; border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.08); }
-    .signal-name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width:140px; }
+    /* Copy-name button next to signal name */
+    .copy-name-btn {
+      margin-left: 5px;
+      border: 1px solid transparent;
+      border-radius: 3px;
+      background: transparent;
+      color: var(--muted);
+      font-size: 9px;
+      line-height: 1;
+      padding: 1px 3px;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 0.1s;
+    }
+    .signal-row:hover .copy-name-btn { opacity: 1; }
+    .copy-name-btn:hover { color: var(--accent); border-color: rgba(59,130,246,0.3); opacity: 1; }
+    .copy-name-btn.success { color: var(--green); border-color: rgba(16,185,129,0.4); opacity: 1; }
+    .signal-name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width:130px; }
     .kind-icon { margin-right:4px; font-size:9px; }
     .kind-signal { color:var(--signal); }
     .kind-memo { color:var(--memo); }
@@ -311,6 +345,63 @@
       word-break: break-all;
       line-height: 1.5;
     }
+    /* ── Interactive JSON Tree ─────────────────────────────────────────────── */
+    .json-tree {
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: rgba(0,0,0,0.22);
+      padding: 8px 10px;
+      font-family: monospace;
+      font-size: 11px;
+      line-height: 1.7;
+      overflow: auto;
+      min-height: 120px;
+    }
+    .json-line {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+    }
+    .json-group {
+      display: block;
+    }
+    .json-toggle {
+      cursor: pointer;
+      color: var(--muted);
+      font-size: 9px;
+      user-select: none;
+      width: 14px;
+      flex-shrink: 0;
+      display: inline-block;
+      text-align: center;
+    }
+    .json-toggle:hover { color: var(--accent); }
+    .json-toggle.leaf { cursor: default; color: transparent; }
+    .json-key { color: #93c5fd; }
+    .json-colon { color: var(--muted); margin-right: 4px; }
+    .json-str { color: #86efac; }
+    .json-num { color: #fda4af; }
+    .json-bool { color: #c084fc; }
+    .json-null { color: var(--muted); font-style: italic; }
+    .json-bracket { color: var(--muted); }
+    .json-children {
+      padding-left: 14px;
+      border-left: 1px dashed rgba(255, 255, 255, 0.05);
+      margin-left: 6px;
+    }
+    .json-preview { color: var(--muted); font-size: 10px; margin: 0 4px; }
+    .category-header-row td {
+      background: rgba(255, 255, 255, 0.02);
+      color: var(--muted);
+      font-size: 10px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      padding: 6px 8px;
+      border-bottom: 1px solid var(--border);
+      border-top: 1px solid var(--border);
+      pointer-events: none;
+    }
   </style>
 </head>
 <body>
@@ -320,7 +411,7 @@
       SigTrace
     </div>
     <div class="header-controls">
-      <button id="btn-record" class="btn active">&#9679; Rec</button>
+      <button id="btn-record" class="btn btn-tracing">&#9679; Tracing</button>
       <button id="btn-clear" class="btn">Clear</button>
     </div>
   </header>
@@ -354,11 +445,12 @@
             <th>Value</th>
             <th style="text-align:center">Updates</th>
             <th>Activity</th>
+            <th class="col-pin" title="Pin">&#128204;</th>
           </tr>
         </thead>
         <tbody id="activity-table-body">
           <tr class="empty-row">
-            <td colspan="5">Waiting for signals...<br>Run your app with SigTrace to begin tracking.</td>
+            <td colspan="6">Waiting for signals...<br>Run your app with SigTrace to begin tracking.</td>
           </tr>
         </tbody>
       </table>
@@ -368,13 +460,12 @@
   <div id="tab-timeline" class="tab-content">
     <div class="timeline-controls">
       <input type="text" id="timeline-search" placeholder="Search chains, nodes, components...">
-      <label class="inactive-label">
-        <input type="checkbox" id="timeline-pinned-only"> Pinned only
+      <label class="inactive-label" id="label-pinned-only">
+        <input type="checkbox" id="timeline-pinned-only" disabled> Pinned only
       </label>
-      <label class="inactive-label">
-        <input type="checkbox" id="timeline-show-hidden"> Show hidden
+      <label class="inactive-label" id="label-show-hidden">
+        <input type="checkbox" id="timeline-show-hidden" disabled> Show hidden
       </label>
-      <span class="controls-note">Hide is per timeline item. Hidden items can be restored from Show hidden mode.</span>
     </div>
     <div class="chain-list" id="timeline-chain-list">
       <div class="empty-state">No activity yet.<br>Interact with your app to see causal chains appear here.</div>
diff --git a/packages/jetbrains-plugin/build.gradle.kts b/packages/jetbrains-plugin/build.gradle.kts
index dd7ebf5..cbdea4c 100644
--- a/packages/jetbrains-plugin/build.gradle.kts
+++ b/packages/jetbrains-plugin/build.gradle.kts
@@ -5,7 +5,7 @@ plugins {
 }
 
 group = "dev.sigtrace"
-version = "1.0.0"
+version = "1.2.0"
 
 repositories {
     mavenCentral()
@@ -34,7 +34,6 @@ tasks {
 
     patchPluginXml {
         sinceBuild.set("232")
-        untilBuild.set("241.*")
     }
 
     compileKotlin {
diff --git a/packages/jetbrains-plugin/gradle/wrapper/gradle-wrapper.jar b/packages/jetbrains-plugin/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 0000000..033e24c
Binary files /dev/null and b/packages/jetbrains-plugin/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/packages/jetbrains-plugin/gradlew b/packages/jetbrains-plugin/gradlew
new file mode 100755
index 0000000..cccdd3d
--- /dev/null
+++ b/packages/jetbrains-plugin/gradlew
@@ -0,0 +1,172 @@
+#!/usr/bin/env sh
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"
diff --git a/packages/jetbrains-plugin/src/main/kotlin/dev/sigtrace/plugin/SigTraceInlayProvider.kt b/packages/jetbrains-plugin/src/main/kotlin/dev/sigtrace/plugin/SigTraceInlayProvider.kt
index 902c443..cf29024 100644
--- a/packages/jetbrains-plugin/src/main/kotlin/dev/sigtrace/plugin/SigTraceInlayProvider.kt
+++ b/packages/jetbrains-plugin/src/main/kotlin/dev/sigtrace/plugin/SigTraceInlayProvider.kt
@@ -5,7 +5,6 @@ import com.intellij.openapi.editor.Editor
 import com.intellij.openapi.vfs.VirtualFile
 import com.intellij.psi.PsiElement
 import com.intellij.psi.PsiFile
-import com.intellij.refactoring.suggested.startOffset
 import com.intellij.psi.util.PsiTreeUtil
 
 class SigTraceInlayProvider : InlayHintsProvider {
@@ -27,7 +26,8 @@ class SigTraceInlayProvider : InlayHintsProvider {
                     text.startsWith("createMemo")) {
                     
                     val document = editor.document
-                    val line = document.getLineNumber(element.startOffset) + 1 // 1-indexed
+                    val offset = element.textRange.startOffset
+                    val line = document.getLineNumber(offset) + 1 // 1-indexed
                     val metric = fileMetrics[line]
                     
                     if (metric != null) {
@@ -41,7 +41,7 @@ class SigTraceInlayProvider : InlayHintsProvider {
 
                         // Add inline inlay hint using declarative presentation API
                         sink.addPresentation(
-                            InlineInlayPosition(element.startOffset, relatedToPrevious = true),
+                            InlineInlayPosition(offset, relatedToPrevious = true),
                             hasBackground = true,
                             tooltip = null
                         ) {
diff --git a/packages/jetbrains-plugin/src/main/kotlin/dev/sigtrace/plugin/SigTraceToolWindowFactory.kt b/packages/jetbrains-plugin/src/main/kotlin/dev/sigtrace/plugin/SigTraceToolWindowFactory.kt
index 2ae0da4..40a2e63 100644
--- a/packages/jetbrains-plugin/src/main/kotlin/dev/sigtrace/plugin/SigTraceToolWindowFactory.kt
+++ b/packages/jetbrains-plugin/src/main/kotlin/dev/sigtrace/plugin/SigTraceToolWindowFactory.kt
@@ -156,7 +156,7 @@ class SigTraceToolWindowFactory : ToolWindowFactory {
             var pathString = filePath
             if (pathString.startsWith("http://") || pathString.startsWith("https://")) {
                 try {
-                    val url = java.net.URL(pathString)
+                    val url = java.net.URI.create(pathString).toURL()
                     pathString = url.path
                 } catch (e: Exception) {
                     // ignore
diff --git a/packages/jetbrains-plugin/src/main/resources/META-INF/plugin.xml b/packages/jetbrains-plugin/src/main/resources/META-INF/plugin.xml
index 4376604..db50747 100644
--- a/packages/jetbrains-plugin/src/main/resources/META-INF/plugin.xml
+++ b/packages/jetbrains-plugin/src/main/resources/META-INF/plugin.xml
@@ -10,7 +10,9 @@
 
     <!-- Product compatibility -->
     <depends>com.intellij.modules.platform</depends>
-    <depends>com.intellij.modules.javascript</depends>
+    
+    <!-- Optional JavaScript/TypeScript integration -->
+    <depends optional="true" config-file="sigtrace-js.xml">com.intellij.modules.javascript</depends>
 
     <extensions defaultExtensionNs="com.intellij">
         <!-- Tool Window for the webview visualizer -->
@@ -19,14 +21,6 @@
                     secondary="false"
                     icon="AllIcons.General.Modified"
                     factoryClass="dev.sigtrace.plugin.SigTraceToolWindowFactory"/>
-
-        <!-- Inlay Hints (CodeLens equivalent) for signal update counts -->
-        <codeInsight.declarativeInlayProvider
-                language="TypeScript"
-                implementationClass="dev.sigtrace.plugin.SigTraceInlayProvider"
-                isEnabledByDefault="true"
-                groupId="sigtrace"
-                id="sigtrace.updates"/>
     </extensions>
 
     <actions>
diff --git a/packages/jetbrains-plugin/src/main/resources/META-INF/sigtrace-js.xml b/packages/jetbrains-plugin/src/main/resources/META-INF/sigtrace-js.xml
new file mode 100644
index 0000000..58d282f
--- /dev/null
+++ b/packages/jetbrains-plugin/src/main/resources/META-INF/sigtrace-js.xml
@@ -0,0 +1,11 @@
+<idea-plugin>
+    <extensions defaultExtensionNs="com.intellij">
+        <!-- Inlay Hints (CodeLens equivalent) for signal update counts -->
+        <codeInsight.declarativeInlayProvider
+                language="TypeScript"
+                implementationClass="dev.sigtrace.plugin.SigTraceInlayProvider"
+                isEnabledByDefault="true"
+                groupId="sigtrace"
+                id="sigtrace.updates"/>
+    </extensions>
+</idea-plugin>
diff --git a/packages/jetbrains-plugin/src/main/resources/webview/app.js b/packages/jetbrains-plugin/src/main/resources/webview/app.js
index 7f1aaca..c4cede9 100644
--- a/packages/jetbrains-plugin/src/main/resources/webview/app.js
+++ b/packages/jetbrains-plugin/src/main/resources/webview/app.js
@@ -16,11 +16,13 @@
   let sortBy = 'updates';
   let focusedSignalId = null;
   let selectedSignalId = null;
-  const pinnedSignalIds = new Set();
-  const pinnedChainKeys = new Set();
+  const pinnedSignalIds = new Set();   // persists across Clear
+  const pinnedChainKeys = new Set();   // persists across Clear
   const hiddenChainIds = new Set();
   const expandedPinnedKeys = new Set();
   const valueScrollByNodeId = new Map();
+  // JSON tree collapse state: key = nodeId + '::' + jsonPath, value = true (collapsed)
+  const jsonCollapseState = new Map();
   let timelineQuery = '';
   let timelinePinnedOnly = false;
   let timelineShowHidden = false;
@@ -28,10 +30,13 @@
 
   // ── DOM refs ─────────────────────────────────────────────────────────────
   const activityTableBody = document.getElementById('activity-table-body');
+  const activityTableWrap = document.querySelector('.activity-table-wrap');
   const timelineChainList = document.getElementById('timeline-chain-list');
   const timelineSearch    = document.getElementById('timeline-search');
   const timelinePinnedOnlyToggle = document.getElementById('timeline-pinned-only');
   const timelineShowHiddenToggle = document.getElementById('timeline-show-hidden');
+  const labelPinnedOnly   = document.getElementById('label-pinned-only');
+  const labelShowHidden   = document.getElementById('label-show-hidden');
   const valuePanel        = document.getElementById('value-panel');
   const componentsPanel   = document.getElementById('components-panel');
   const alertsSection     = document.getElementById('alerts-section');
@@ -133,10 +138,13 @@
           if (value === resolved) stillReferenced = true;
         });
         if (!stillReferenced) {
-          nodeMap.delete(resolved);
-          nodeSignatureMap.forEach(function(value, key) {
-            if (value === resolved) nodeSignatureMap.delete(key);
-          });
+          // Don't delete pinned nodes
+          if (!pinnedSignalIds.has(resolved)) {
+            nodeMap.delete(resolved);
+            nodeSignatureMap.forEach(function(value, key) {
+              if (value === resolved) nodeSignatureMap.delete(key);
+            });
+          }
         }
         scheduleUiRender();
         break;
@@ -162,7 +170,6 @@
 
   // ── Name cleaning ─────────────────────────────────────────────────────────
   function cleanName(name) {
-    // "computed_line120" -> keep as-is for now; future AST fix will improve this
     return name;
   }
 
@@ -273,7 +280,7 @@
   function finalizeChain() {
     if (!activeChain) return;
     chainLog.unshift(activeChain);
-    if (chainLog.length > 60) chainLog.pop();
+    if (chainLog.length > 200) chainLog.pop();
     activeChain = null;
     var activeTab = document.querySelector('.tab-content.active');
     if (activeTab && activeTab.id === 'tab-timeline') renderTimeline();
@@ -281,11 +288,14 @@
 
   // ── Activity table ────────────────────────────────────────────────────────
   function renderActivityTable() {
+    // Save scroll position before re-render
+    var savedScroll = activityTableWrap ? activityTableWrap.scrollTop : 0;
+
     var query = searchBar.value.trim().toLowerCase();
     var rows = Array.from(nodeMap.values());
 
     if (!showInactive) {
-      rows = rows.filter(function(n) { return n.epoch > 0; });
+      rows = rows.filter(function(n) { return n.epoch > 0 || pinnedSignalIds.has(n.id); });
     }
 
     if (query) {
@@ -300,6 +310,7 @@
     else if (sortBy === 'component') rows.sort(function(a, b) { return a.component.localeCompare(b.component); });
     else if (sortBy === 'recent') rows.sort(function(a, b) { return (b.lastUpdated || 0) - (a.lastUpdated || 0); });
 
+    // Pinned rows float to top
     rows.sort(function(a, b) {
       var pinDelta = Number(pinnedSignalIds.has(b.id)) - Number(pinnedSignalIds.has(a.id));
       return pinDelta;
@@ -309,17 +320,14 @@
       var msg = !showInactive
         ? 'No active signals yet.<br>Interact with your app or enable <strong>Show inactive</strong> to see all registered signals.'
         : 'No signals found' + (query ? ' matching <strong>' + query + '</strong>' : '') + '.';
-      activityTableBody.innerHTML = '<tr class="empty-row"><td colspan="5">' + msg + '</td></tr>';
+      activityTableBody.innerHTML = '<tr class="empty-row"><td colspan="6">' + msg + '</td></tr>';
       return;
     }
 
-    var html = '';
-    for (var i = 0; i < rows.length; i++) {
-      var node = rows[i];
+    function renderRowHtml(node) {
       var valueStr = safeStr(node.value, 60);
       var valueFull = fullStr(node.value);
 
-      var timeStr = node.lastUpdated ? timeSince(node.lastUpdated) : 'never';
       var kindIcon = node.kind === 'signal' ? '&#9679;' : node.kind === 'memo' ? '&#9670;' : '&#9650;';
       var kindClass = 'kind-' + node.kind;
       var isHot = node.epoch > 30;
@@ -334,12 +342,15 @@
         locHtml = '<span class="signal-loc clickable" data-file="' + node.loc.file + '" data-line="' + node.loc.line + '" title="' + node.loc.file + '">' + fileBase + ':' + node.loc.line + '</span>';
       }
 
-      html += '<tr class="signal-row' + (isHot ? ' row-hot' : '') + (isFocused ? ' row-focused' : '') + '" data-id="' + node.id + '">' +
-        '<td class="col-name"><div class="col-name-wrap"><span class="kind-icon ' + kindClass + '">' + kindIcon + '</span><span class="signal-name" title="' + node.name + '">' + node.name + '</span><button class="pin-btn' + (isPinned ? ' active' : '') + '" data-action="toggle-pin" data-id="' + node.id + '" title="' + (isPinned ? 'Unpin signal' : 'Pin signal') + '">&#128204;</button></div>' + (locHtml ? '<div class="loc-wrap">' + locHtml + '</div>' : '') + '</td>' +
+      var rowHtml = '<tr class="signal-row' + (isHot ? ' row-hot' : '') + (isFocused ? ' row-focused' : '') + (isPinned ? ' row-pinned' : '') + '" data-id="' + node.id + '">' +
+        '<td class="col-name"><div class="col-name-wrap"><span class="kind-icon ' + kindClass + '">' + kindIcon + '</span><span class="signal-name" title="' + node.name + '">' + node.name + '</span>' +
+        '<button class="copy-name-btn" data-action="copy-name" data-name="' + escapeHtml(node.name) + '" title="Copy signal name to clipboard">&#10697;</button>' +
+        '</div>' + (locHtml ? '<div class="loc-wrap">' + locHtml + '</div>' : '') + '</td>' +
         '<td class="col-component" title="' + node.component + '">' + compShort + '</td>' +
         '<td class="col-value" title="' + escapeHtml(valueFull) + '">' + escapeHtml(valueStr) + '</td>' +
         '<td class="col-updates' + (isHot ? ' hot-count' : '') + '">' + node.epoch + '</td>' +
         '<td class="col-activity">' + actBar + '</td>' +
+        '<td class="col-pin"><button class="pin-btn' + (isPinned ? ' active' : '') + '" data-action="toggle-pin" data-id="' + node.id + '" title="' + (isPinned ? 'Unpin signal' : 'Pin signal') + '">&#128204;</button></td>' +
         '</tr>';
 
       if (isFocused) {
@@ -347,8 +358,8 @@
           ? '<span class="detail-label">Location:</span> <span class="detail-loc-link clickable" data-file="' + node.loc.file + '" data-line="' + node.loc.line + '">' + node.loc.file + ':' + node.loc.line + '</span>'
           : '<span class="detail-label">Location:</span> <span class="detail-val">Unknown</span>';
 
-        html += '<tr class="details-row">' +
-          '<td colspan="5">' +
+        rowHtml += '<tr class="details-row">' +
+          '<td colspan="6">' +
             '<div class="details-box">' +
               '<div class="details-meta">' +
                 '<div><span class="detail-label">Kind:</span> <span class="detail-val">' + node.kind + '</span></div>' +
@@ -362,8 +373,32 @@
           '</td>' +
           '</tr>';
       }
+      return rowHtml;
+    }
+
+    var html = '';
+    var pinnedRows = rows.filter(function(n) { return pinnedSignalIds.has(n.id); });
+    var unpinnedRows = rows.filter(function(n) { return !pinnedSignalIds.has(n.id); });
+
+    if (pinnedRows.length >= 2) {
+      html += '<tr class="category-header-row"><td colspan="6">Pinned</td></tr>';
+    }
+    for (var i = 0; i < pinnedRows.length; i++) {
+      html += renderRowHtml(pinnedRows[i]);
+    }
+
+    if (pinnedRows.length >= 1 && unpinnedRows.length >= 1) {
+      html += '<tr class="category-header-row"><td colspan="6">Others</td></tr>';
+    }
+    for (var j = 0; j < unpinnedRows.length; j++) {
+      html += renderRowHtml(unpinnedRows[j]);
     }
     activityTableBody.innerHTML = html;
+
+    // Restore scroll position after render
+    if (activityTableWrap) {
+      activityTableWrap.scrollTop = savedScroll;
+    }
   }
 
   function renderSparkBar(sparkline, total) {
@@ -414,8 +449,113 @@
       .replace(/'/g, "&#039;");
   }
 
+  // ── Interactive JSON Tree ─────────────────────────────────────────────────
+  function buildJsonTree(key, val, nodeId, path, isLast) {
+    path = path || 'root';
+    var comma = isLast ? '' : '<span class="json-bracket">,</span>';
+    var keyPart = '';
+    if (key !== null) {
+      if (typeof key === 'number') {
+        keyPart = '<span class="json-key">' + key + '</span><span class="json-colon">:</span> ';
+      } else {
+        keyPart = '<span class="json-key">"' + escapeHtml(key) + '"</span><span class="json-colon">:</span> ';
+      }
+    }
+
+    if (val === null) {
+      return '<div class="json-line">' +
+        '<span class="json-toggle leaf">&#9474;</span>' +
+        keyPart + '<span class="json-null">null</span>' + comma +
+        '</div>';
+    }
+    if (typeof val === 'boolean') {
+      return '<div class="json-line">' +
+        '<span class="json-toggle leaf">&#9474;</span>' +
+        keyPart + '<span class="json-bool">' + val + '</span>' + comma +
+        '</div>';
+    }
+    if (typeof val === 'number') {
+      return '<div class="json-line">' +
+        '<span class="json-toggle leaf">&#9474;</span>' +
+        keyPart + '<span class="json-num">' + val + '</span>' + comma +
+        '</div>';
+    }
+    if (typeof val === 'string') {
+      return '<div class="json-line">' +
+        '<span class="json-toggle leaf">&#9474;</span>' +
+        keyPart + '<span class="json-str">"' + escapeHtml(val) + '"</span>' + comma +
+        '</div>';
+    }
+
+    // Objects and Arrays
+    var isArr = Array.isArray(val);
+    var keys = isArr ? val.map(function(_, idx) { return idx; }) : Object.keys(val);
+    var openBrack = isArr ? '[' : '{';
+    var closeBrack = isArr ? ']' : '}';
+
+    if (keys.length === 0) {
+      return '<div class="json-line">' +
+        '<span class="json-toggle leaf">&#9474;</span>' +
+        keyPart + '<span class="json-bracket">' + openBrack + closeBrack + '</span>' + comma +
+        '</div>';
+    }
+
+    var collapseKey = nodeId + '::' + path;
+    var isCollapsed = jsonCollapseState.get(collapseKey) === true;
+    var preview = isArr
+      ? '[' + val.length + ' items]'
+      : '{' + keys.slice(0, 3).join(', ') + (keys.length > 3 ? ', ...' : '') + '}';
+
+    var innerHtml = '';
+    if (!isCollapsed) {
+      for (var i = 0; i < keys.length; i++) {
+        var k = keys[i];
+        var childVal = val[k];
+        var childPath = isArr ? path + '[' + i + ']' : path + '.' + k;
+        innerHtml += buildJsonTree(k, childVal, nodeId, childPath, i === keys.length - 1);
+      }
+    }
+
+    var toggleIcon = '<span class="json-toggle" data-collapse-key="' + escapeHtml(collapseKey) + '">' + (isCollapsed ? '&#9654;' : '&#9660;') + '</span>';
+
+    return '<div class="json-group">' +
+      '<div class="json-line">' +
+        toggleIcon +
+        keyPart + '<span class="json-bracket">' + openBrack + '</span>' +
+        (isCollapsed ? '<span class="json-preview">' + escapeHtml(preview) + '</span><span class="json-bracket">' + closeBrack + '</span>' + comma : '') +
+      '</div>' +
+      (isCollapsed ? '' : '<div class="json-children">' + innerHtml + '</div>' +
+      '<div class="json-line"><span class="json-toggle leaf">&#9474;</span><span class="json-bracket">' + closeBrack + '</span>' + comma + '</div>') +
+      '</div>';
+  }
+
   // ── Timeline ──────────────────────────────────────────────────────────────
+  function updateTimelineCheckboxStates() {
+    var hasPinned = pinnedChainKeys.size > 0;
+    var hasHidden = hiddenChainIds.size > 0;
+
+    if (timelinePinnedOnlyToggle) {
+      timelinePinnedOnlyToggle.disabled = !hasPinned;
+      if (!hasPinned) {
+        timelinePinnedOnly = false;
+        timelinePinnedOnlyToggle.checked = false;
+      }
+    }
+    if (labelPinnedOnly) labelPinnedOnly.classList.toggle('disabled', !hasPinned);
+
+    if (timelineShowHiddenToggle) {
+      timelineShowHiddenToggle.disabled = !hasHidden;
+      if (!hasHidden) {
+        timelineShowHidden = false;
+        timelineShowHiddenToggle.checked = false;
+      }
+    }
+    if (labelShowHidden) labelShowHidden.classList.toggle('disabled', !hasHidden);
+  }
+
   function renderTimeline() {
+    updateTimelineCheckboxStates();
+
     var grouped = new Map();
     for (var idx = 0; idx < chainLog.length; idx++) {
       var chain = chainLog[idx];
@@ -427,180 +567,196 @@
     var groupedEntries = Array.from(grouped.entries()).map(function(entry) {
       var key = entry[0];
       var chains = entry[1];
-      var renderChains = chains.filter(function(chain) {
+
+      // In "show hidden" mode: show ONLY hidden items
+      // In normal mode: show only non-hidden items
+      var visibleChains = chains.filter(function(chain) {
         return timelineShowHidden ? hiddenChainIds.has(chain.id) : !hiddenChainIds.has(chain.id);
       });
+
       return {
         key: key,
         chains: chains,
-        renderChains: renderChains,
-        latest: renderChains[0] || null,
+        visibleChains: visibleChains,
         pinned: pinnedChainKeys.has(key),
-        hasHidden: chains.some(function(c) { return hiddenChainIds.has(c.id); })
+        hasHidden: chains.some(function(c) { return hiddenChainIds.has(c.id); }),
+        hiddenCount: chains.filter(function(c) { return hiddenChainIds.has(c.id); }).length
       };
     }).filter(function(group) {
       if (timelinePinnedOnly && !group.pinned) return false;
-      if (!group.latest) return false;
+      if (group.visibleChains.length === 0) return false;
+
       if (!timelineQuery) return true;
       var q = timelineQuery;
-      var latest = group.latest;
-      if (latest.trigger.name.toLowerCase().indexOf(q) !== -1) return true;
-      if ((latest.trigger.component || '').toLowerCase().indexOf(q) !== -1) return true;
-      return latest.updates.some(function(u) {
-        return u.name.toLowerCase().indexOf(q) !== -1 ||
-          (u.component || '').toLowerCase().indexOf(q) !== -1 ||
-          (u.kind || '').toLowerCase().indexOf(q) !== -1;
+      // Search across all visible chains in the group
+      return group.visibleChains.some(function(chain) {
+        if (chain.trigger.name.toLowerCase().indexOf(q) !== -1) return true;
+        if ((chain.trigger.component || '').toLowerCase().indexOf(q) !== -1) return true;
+        return chain.updates.some(function(u) {
+          return u.name.toLowerCase().indexOf(q) !== -1 ||
+            (u.component || '').toLowerCase().indexOf(q) !== -1 ||
+            (u.kind || '').toLowerCase().indexOf(q) !== -1;
+        });
       });
     });
 
+    // Sort: pinned groups first, then newest first within groups
     groupedEntries.sort(function(a, b) {
       var pinDelta = Number(b.pinned) - Number(a.pinned);
       if (pinDelta !== 0) return pinDelta;
-      return (b.latest.timestamp || 0) - (a.latest.timestamp || 0);
+      var latestA = a.visibleChains[0] ? a.visibleChains[0].timestamp : 0;
+      var latestB = b.visibleChains[0] ? b.visibleChains[0].timestamp : 0;
+      return latestB - latestA;
     });
 
     if (groupedEntries.length === 0) {
       var emptyMsg = chainLog.length === 0
         ? 'No activity yet.<br>Interact with your app to see causal chains appear here.'
-        : 'No timeline entries match the current filter.';
+        : (timelineShowHidden ? 'No hidden items.' : 'No timeline entries match the current filter.');
       timelineChainList.innerHTML = '<div class="empty-state">' + emptyMsg + '</div>';
       return;
     }
 
     var html = '';
+
     for (var i = 0; i < groupedEntries.length; i++) {
       var group = groupedEntries[i];
-      var chain = group.latest;
-      var d = new Date(chain.timestamp);
-      var timeStr = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()) + '.' + String(d.getMilliseconds()).padStart(3, '0');
-      var totalEffects = chain.updates.filter(function(u) { return u.kind === 'effect'; }).length;
-      var totalMemos   = chain.updates.filter(function(u) { return u.kind === 'memo'; }).length;
-      var totalMs      = chain.updates.reduce(function(s, u) { return s + (u.duration || 0); }, 0);
-      var summaryParts = [];
-      if (totalMemos > 0) summaryParts.push(totalMemos + ' computed');
-      if (totalEffects > 0) summaryParts.push(totalEffects + ' effect' + (totalEffects > 1 ? 's' : ''));
-      if (totalMs > 0.1) summaryParts.push(totalMs.toFixed(1) + 'ms');
-      var summaryStr = summaryParts.join(' &middot; ');
-
-      var prevFull = fullStr(chain.trigger.previousValue);
-      var newFull = fullStr(chain.trigger.value);
-      var prevStr = safeStr(chain.trigger.previousValue, 30);
-      var newStr  = safeStr(chain.trigger.value, 35);
-      var valChange = prevStr ? prevStr + ' &rarr; ' + newStr : newStr;
-      var valChangeTitle = prevFull ? prevFull + ' -> ' + newFull : newFull;
-
-      var updatesHtml = '';
-      for (var j = 0; j < chain.updates.length; j++) {
-        var u = chain.updates[j];
-        var uKindIcon = u.kind === 'memo' ? '&#9670;' : '&#9650;';
-        var uKindLabel = u.kind === 'memo' ? 'computed' : 'effect';
-        var durStr = u.duration > 0 ? '(' + u.duration.toFixed(1) + 'ms)' : '';
-        var isUHot = u.duration > 2;
-        var uValStr = u.value !== undefined ? safeStr(u.value, 30) : '';
-        var uValFull = u.value !== undefined ? fullStr(u.value) : '';
-        
-        var uClickAttr = u.loc ? ' class="chain-node-name clickable" data-file="' + u.loc.file + '" data-line="' + u.loc.line + '"' : ' class="chain-node-name"';
-
-        updatesHtml += '<div class="chain-update' + (isUHot ? ' chain-hot' : '') + '">' +
-          '<span class="chain-indent">&#9492;&#9472;</span>' +
-          '<span class="chain-icon kind-' + u.kind + '">' + uKindIcon + '</span>' +
-          '<span' + uClickAttr + '>' + u.name + '</span>' +
-          '<span class="chain-component">[' + shortComponentName(u.component) + ']</span>' +
-          '<span class="chain-kind">' + uKindLabel + '</span>' +
-          (uValStr ? '<span class="chain-value" title="' + escapeHtml(uValFull) + '">' + escapeHtml(uValStr) + '</span>' : '') +
-          (durStr ? '<span class="chain-duration">' + durStr + '</span>' : '') +
-          '</div>';
-      }
-
-      var trigClickAttr = chain.trigger.loc ? ' class="chain-trigger-name clickable" data-file="' + chain.trigger.loc.file + '" data-line="' + chain.trigger.loc.line + '"' : ' class="chain-trigger-name"';
       var chainPinned = group.pinned;
-      var canExpand = group.renderChains.length > 1;
+
+      // Expand/collapse control: only available when pinned AND multiple visible events
+      var canExpand = chainPinned && group.visibleChains.length > 1;
       var expanded = expandedPinnedKeys.has(group.key);
-      var hiddenLabel = hiddenChainIds.has(chain.id) ? 'Show' : 'Hide';
 
-      var olderHtml = '';
-      if (chainPinned && canExpand && expanded) {
-        for (var k = 1; k < group.renderChains.length; k++) {
-          olderHtml += renderChainCard(group.renderChains[k], group.key);
-        }
+      // Determine which events to render:
+      // - Not pinned: show all visible events
+      // - Pinned + not expanded: show only the latest (first) event
+      // - Pinned + expanded: show all visible events
+      var eventsToRender = group.visibleChains;
+      if (chainPinned && !expanded) {
+        eventsToRender = [group.visibleChains[0]];
       }
 
-      html += '<div class="chain-card' + (chainPinned ? ' chain-pinned' : '') + '">' +
-        '<div class="chain-header">' +
-          '<span class="chain-time">' + timeStr + '</span>' +
-          '<span class="chain-trigger-icon kind-signal">&#9679;</span>' +
-          '<span' + trigClickAttr + '>' + chain.trigger.name + '</span>' +
-          '<span class="chain-component">[' + shortComponentName(chain.trigger.component) + ']</span>' +
-          (valChange ? '<span class="chain-value-change" title="' + escapeHtml(valChangeTitle) + '">' + valChange + '</span>' : '') +
-          (summaryStr ? '<span class="chain-summary">' + summaryStr + '</span>' : '') +
-          '<button class="chain-pin-btn' + (chainPinned ? ' active' : '') + '" data-action="toggle-chain-pin" data-key="' + group.key + '">' + (chainPinned ? 'Pinned' : 'Pin') + '</button>' +
-          '<button class="chain-hide-btn' + (hiddenChainIds.has(chain.id) ? ' active' : '') + '" data-action="toggle-chain-visibility" data-id="' + chain.id + '">' + hiddenLabel + '</button>' +
-          (chainPinned && canExpand ? '<button class="chain-hide-btn" data-action="toggle-pinned-expand" data-key="' + group.key + '">' + (expanded ? 'Collapse older' : 'Expand older (' + (group.renderChains.length - 1) + ')') + '</button>' : '') +
-          (!timelineShowHidden && group.hasHidden ? '<span class="chain-summary">hidden: ' + group.chains.filter(function(c) { return hiddenChainIds.has(c.id); }).length + '</span>' : '') +
-        '</div>' +
-        (chain.updates.length > 0 ? '<div class="chain-updates">' + updatesHtml + '</div>' : '') +
-        '</div>' +
-        olderHtml;
-    }
-    timelineChainList.innerHTML = html;
-  }
+      // Group header wrapper (for pinned groups with multiple events)
+      var groupLabel = group.visibleChains.length > 1
+        ? '<span class="chain-summary">' + group.visibleChains.length + ' events</span>'
+        : '';
+
+      var hiddenBadge = (!timelineShowHidden && group.hasHidden)
+        ? '<span class="chain-summary">hidden: ' + group.hiddenCount + '</span>'
+        : '';
+
+      // Render each event card for this group
+      for (var e = 0; e < eventsToRender.length; e++) {
+        var chain = eventsToRender[e];
+        var isFirstInGroup = (e === 0);
+
+        var d = new Date(chain.timestamp);
+        var timeStr = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()) + '.' + String(d.getMilliseconds()).padStart(3, '0');
+        var totalEffects = chain.updates.filter(function(u) { return u.kind === 'effect'; }).length;
+        var totalMemos   = chain.updates.filter(function(u) { return u.kind === 'memo'; }).length;
+        var totalMs      = chain.updates.reduce(function(s, u) { return s + (u.duration || 0); }, 0);
+        var summaryParts = [];
+        if (totalMemos > 0) summaryParts.push(totalMemos + ' computed');
+        if (totalEffects > 0) summaryParts.push(totalEffects + ' effect' + (totalEffects > 1 ? 's' : ''));
+        if (totalMs > 0.1) summaryParts.push(totalMs.toFixed(1) + 'ms');
+        var summaryStr = summaryParts.join(' &middot; ');
+
+        var prevFull = fullStr(chain.trigger.previousValue);
+        var newFull  = fullStr(chain.trigger.value);
+        var prevStr  = safeStr(chain.trigger.previousValue, 30);
+        var newStr   = safeStr(chain.trigger.value, 35);
+        var valChange = prevStr ? prevStr + ' &rarr; ' + newStr : newStr;
+        var valChangeTitle = prevFull ? prevFull + ' -> ' + newFull : newFull;
+
+        var updatesHtml = '';
+        for (var j = 0; j < chain.updates.length; j++) {
+          var u = chain.updates[j];
+          var uKindIcon  = u.kind === 'memo' ? '&#9670;' : '&#9650;';
+          var uKindLabel = u.kind === 'memo' ? 'computed' : 'effect';
+          var durStr = u.duration > 0 ? '(' + u.duration.toFixed(1) + 'ms)' : '';
+          var isUHot = u.duration > 2;
+          var uValStr  = u.value !== undefined ? safeStr(u.value, 30) : '';
+          var uValFull = u.value !== undefined ? fullStr(u.value) : '';
+          var uClickAttr = u.loc
+            ? ' class="chain-node-name clickable" data-file="' + u.loc.file + '" data-line="' + u.loc.line + '"'
+            : ' class="chain-node-name"';
+
+          updatesHtml += '<div class="chain-update' + (isUHot ? ' chain-hot' : '') + '">' +
+            '<span class="chain-indent">&#9492;&#9472;</span>' +
+            '<span class="chain-icon kind-' + u.kind + '">' + uKindIcon + '</span>' +
+            '<span' + uClickAttr + '>' + u.name + '</span>' +
+            '<span class="chain-component">[' + shortComponentName(u.component) + ']</span>' +
+            '<span class="chain-kind">' + uKindLabel + '</span>' +
+            (uValStr ? '<span class="chain-value" title="' + escapeHtml(uValFull) + '">' + escapeHtml(uValStr) + '</span>' : '') +
+            (durStr ? '<span class="chain-duration">' + durStr + '</span>' : '') +
+            '</div>';
+        }
 
-  function renderChainCard(chain) {
-    var d = new Date(chain.timestamp);
-    var timeStr = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()) + '.' + String(d.getMilliseconds()).padStart(3, '0');
-    var trigClickAttr = chain.trigger.loc ? ' class="chain-trigger-name clickable" data-file="' + chain.trigger.loc.file + '" data-line="' + chain.trigger.loc.line + '"' : ' class="chain-trigger-name"';
-    var updatesHtml = '';
-    for (var j = 0; j < chain.updates.length; j++) {
-      var u = chain.updates[j];
-      var uKindIcon = u.kind === 'memo' ? '&#9670;' : '&#9650;';
-      var uKindLabel = u.kind === 'memo' ? 'computed' : 'effect';
-      var durStr = u.duration > 0 ? '(' + u.duration.toFixed(1) + 'ms)' : '';
-      var uClickAttr = u.loc ? ' class="chain-node-name clickable" data-file="' + u.loc.file + '" data-line="' + u.loc.line + '"' : ' class="chain-node-name"';
-      updatesHtml += '<div class="chain-update">' +
-        '<span class="chain-indent">&#9492;&#9472;</span>' +
-        '<span class="chain-icon kind-' + u.kind + '">' + uKindIcon + '</span>' +
-        '<span' + uClickAttr + '>' + u.name + '</span>' +
-        '<span class="chain-component">[' + shortComponentName(u.component) + ']</span>' +
-        '<span class="chain-kind">' + uKindLabel + '</span>' +
-        (durStr ? '<span class="chain-duration">' + durStr + '</span>' : '') +
-        '</div>';
+        var trigClickAttr = chain.trigger.loc
+          ? ' class="chain-trigger-name clickable" data-file="' + chain.trigger.loc.file + '" data-line="' + chain.trigger.loc.line + '"'
+          : ' class="chain-trigger-name"';
+
+        var isHidden = hiddenChainIds.has(chain.id);
+        var hiddenLabel = isHidden ? 'Show' : 'Hide';
+
+        html += '<div class="chain-card' + (chainPinned ? ' chain-pinned' : '') + '">' +
+          '<div class="chain-header">' +
+            '<span class="chain-time">' + timeStr + '</span>' +
+            '<span class="chain-trigger-icon kind-signal">&#9679;</span>' +
+            '<span' + trigClickAttr + '>' + chain.trigger.name + '</span>' +
+            '<span class="chain-component">[' + shortComponentName(chain.trigger.component) + ']</span>' +
+            (valChange ? '<span class="chain-value-change" title="' + escapeHtml(valChangeTitle) + '">' + valChange + '</span>' : '') +
+            (summaryStr ? '<span class="chain-summary">' + summaryStr + '</span>' : '') +
+            // Show event number if group has multiple events
+            (group.visibleChains.length > 1 ? '<span class="chain-summary">event ' + (e + 1) + '/' + group.visibleChains.length + '</span>' : '') +
+            hiddenBadge +
+            // Pin button only on first card of the group
+            (isFirstInGroup ? '<button class="chain-pin-btn' + (chainPinned ? ' active' : '') + '" data-action="toggle-chain-pin" data-key="' + group.key + '">' + (chainPinned ? 'Pinned' : 'Pin') + '</button>' : '') +
+            // Hide/Show button on each event
+            '<button class="chain-hide-btn' + (isHidden ? ' active' : '') + '" data-action="toggle-chain-visibility" data-id="' + chain.id + '">' + hiddenLabel + '</button>' +
+            // Expand/Collapse button: only on first card of a pinned group with multiple events
+            (isFirstInGroup && canExpand ? '<button class="chain-hide-btn" data-action="toggle-pinned-expand" data-key="' + group.key + '">' + (expanded ? 'Collapse older' : 'Expand older (' + (group.visibleChains.length - 1) + ')') + '</button>' : '') +
+          '</div>' +
+          (chain.updates.length > 0 ? '<div class="chain-updates">' + updatesHtml + '</div>' : '') +
+          '</div>';
+      }
     }
-    var isHidden = hiddenChainIds.has(chain.id);
-    return '<div class="chain-card">' +
-      '<div class="chain-header">' +
-      '<span class="chain-time">' + timeStr + '</span>' +
-      '<span class="chain-trigger-icon kind-signal">&#9679;</span>' +
-      '<span' + trigClickAttr + '>' + chain.trigger.name + '</span>' +
-      '<span class="chain-component">[' + shortComponentName(chain.trigger.component) + ']</span>' +
-      '<span class="chain-summary">older</span>' +
-      '<button class="chain-hide-btn' + (isHidden ? ' active' : '') + '" data-action="toggle-chain-visibility" data-id="' + chain.id + '">' + (isHidden ? 'Show' : 'Hide') + '</button>' +
-      '</div>' +
-      (updatesHtml ? '<div class="chain-updates">' + updatesHtml + '</div>' : '') +
-      '</div>';
+
+    timelineChainList.innerHTML = html;
   }
 
   function pad(n) { return n < 10 ? '0' + n : String(n); }
 
-  // ── Component cards ───────────────────────────────────────────────────────
+  // ── Value Inspector ───────────────────────────────────────────────────────
   function renderValueInspector() {
     var targetId = selectedSignalId || focusedSignalId;
     var node = targetId ? nodeMap.get(targetId) : null;
     if (!node) {
-      if (valuePanel && valuePanel.dataset.nodeId) {
-        valueScrollByNodeId.set(valuePanel.dataset.nodeId, valuePanel.scrollTop);
-      }
       valuePanel.innerHTML = '<div class="empty-state">Select a signal from Activity to inspect the full value.</div>';
       valuePanel.dataset.nodeId = '';
       return;
     }
 
-    if (valuePanel && valuePanel.dataset.nodeId) {
-      valueScrollByNodeId.set(valuePanel.dataset.nodeId, valuePanel.scrollTop);
+    // Save scroll of previous node before switching
+    var prevNodeId = valuePanel.dataset.nodeId;
+    if (prevNodeId && prevNodeId !== node.id) {
+      valueScrollByNodeId.set(prevNodeId, valuePanel.scrollTop);
     }
 
-    var value = fullStr(node.value);
     var locationText = node.loc ? (node.loc.file + ':' + node.loc.line) : 'Unknown';
     var updated = node.lastUpdated ? timeSince(node.lastUpdated) : 'never';
+
+    // Build interactive JSON tree or fallback to primitive display
+    var treeHtml;
+    try {
+      var parsed = (typeof node.value === 'object' && node.value !== null)
+        ? node.value
+        : JSON.parse(JSON.stringify(node.value));
+      treeHtml = buildJsonTree(null, node.value, node.id, 'root', true);
+    } catch(e) {
+      treeHtml = '<span>' + escapeHtml(fullStr(node.value)) + '</span>';
+    }
+
     valuePanel.innerHTML =
       '<div class="value-header">' +
         '<div class="value-title">' + escapeHtml(node.name) + '</div>' +
@@ -613,15 +769,18 @@
         '<span>Last update: <strong>' + escapeHtml(updated) + '</strong></span>' +
       '</div>' +
       '<div class="value-meta"><span>Location: <strong>' + escapeHtml(locationText) + '</strong></span></div>' +
-      '<pre class="value-code"><code>' + escapeHtml(value) + '</code></pre>';
+      '<div class="json-tree">' + treeHtml + '</div>';
 
     valuePanel.dataset.nodeId = node.id;
+
+    // Restore scroll position after setting innerHTML
     var savedScroll = valueScrollByNodeId.get(node.id);
     if (typeof savedScroll === 'number') {
       valuePanel.scrollTop = savedScroll;
     }
   }
 
+  // ── Component cards ───────────────────────────────────────────────────────
   function renderComponentCards() {
     if (componentMap.size === 0) {
       componentsPanel.innerHTML = '<div class="empty-state">No components tracked yet.</div>';
@@ -734,35 +893,87 @@
   // ── Controls ──────────────────────────────────────────────────────────────
   btnRecord.addEventListener('click', function() {
     isRecording = !isRecording;
-    btnRecord.classList.toggle('active', isRecording);
-    btnRecord.innerHTML = isRecording ? '&#9679; Rec' : '&#9675; Paused';
+    if (isRecording) {
+      btnRecord.className = 'btn btn-tracing';
+      btnRecord.innerHTML = '&#9679; Tracing';
+    } else {
+      btnRecord.className = 'btn btn-paused';
+      btnRecord.innerHTML = '&#9646;&#9646; Paused';
+    }
   });
 
   btnClear.addEventListener('click', function() {
+    // Preserve pinned signal nodes — tombstone them (reset data, keep id/name)
+    var pinnedNodesCopy = new Map();
+    pinnedSignalIds.forEach(function(id) {
+      var node = nodeMap.get(id);
+      if (node) {
+        pinnedNodesCopy.set(id, {
+          id: node.id,
+          name: node.name,
+          component: node.component,
+          kind: node.kind,
+          value: node.value,
+          epoch: 0,
+          duration: 0,
+          lastUpdated: null,
+          sparkline: [],
+          loc: node.loc
+        });
+      }
+    });
+
+    // Preserve pinned chain log entries
+    var pinnedChains = chainLog.filter(function(c) {
+      return pinnedChainKeys.has(chainGroupKey(c));
+    });
+
+    // Clear everything
     nodeMap.clear();
     nodeAliasMap.clear();
     nodeSignatureMap.clear();
     componentMap.clear();
     chainLog = [];
-    pinnedSignalIds.clear();
-    pinnedChainKeys.clear();
     hiddenChainIds.clear();
     expandedPinnedKeys.clear();
     selectedSignalId = null;
     timelineQuery = '';
-    timelinePinnedOnly = false;
-    timelineShowHidden = false;
     valueScrollByNodeId.clear();
     if (timelineSearch) timelineSearch.value = '';
-    if (timelinePinnedOnlyToggle) timelinePinnedOnlyToggle.checked = false;
-    if (timelineShowHiddenToggle) timelineShowHiddenToggle.checked = false;
     alerts = [];
     activeChain = null;
     clearTimeout(chainFlushTimer);
-    activityTableBody.innerHTML = '<tr class="empty-row"><td colspan="5">Cleared. Interact with your app to begin tracking.</td></tr>';
-    timelineChainList.innerHTML = '<div class="empty-state">Cleared.</div>';
+
+    // Restore pinned nodes
+    pinnedNodesCopy.forEach(function(node, id) {
+      nodeMap.set(id, node);
+      ensureComponent(node);
+      
+      // Re-populate maps so future events link up to the existing pinned node references
+      nodeAliasMap.set(id, id);
+      var signature = [
+        node.kind,
+        node.component,
+        node.name,
+        toLocKey(node.loc)
+      ].join('|');
+      nodeSignatureMap.set(signature, id);
+    });
+
+    // Restore pinned chains
+    chainLog = pinnedChains;
+
+    // Update checkbox states
+    updateTimelineCheckboxStates();
+
+    // Re-render
+    renderActivityTable();
+    renderTimeline();
     if (componentsPanel) componentsPanel.innerHTML = '<div class="empty-state">No components tracked yet.</div>';
-    if (valuePanel) valuePanel.innerHTML = '<div class="empty-state">Select a signal from Activity to inspect the full value.</div>';
+    if (valuePanel) {
+      valuePanel.innerHTML = '<div class="empty-state">Select a signal from Activity to inspect the full value.</div>';
+      valuePanel.dataset.nodeId = '';
+    }
     alertBadge.style.display = 'none';
     alertsSection.style.display = 'none';
     vscode.postMessage({ command: 'clearMetrics' });
@@ -789,15 +1000,19 @@
 
   if (timelinePinnedOnlyToggle) {
     timelinePinnedOnlyToggle.addEventListener('change', function() {
-      timelinePinnedOnly = timelinePinnedOnlyToggle.checked;
-      renderTimeline();
+      if (!timelinePinnedOnlyToggle.disabled) {
+        timelinePinnedOnly = timelinePinnedOnlyToggle.checked;
+        renderTimeline();
+      }
     });
   }
 
   if (timelineShowHiddenToggle) {
     timelineShowHiddenToggle.addEventListener('change', function() {
-      timelineShowHidden = timelineShowHiddenToggle.checked;
-      renderTimeline();
+      if (!timelineShowHiddenToggle.disabled) {
+        timelineShowHidden = timelineShowHiddenToggle.checked;
+        renderTimeline();
+      }
     });
   }
 
@@ -836,7 +1051,7 @@
     document.body.removeChild(ta);
   }
 
-  // ── Code Navigation Delegation ───────────────────────────────────────────
+  // ── Activity Table Click Delegation ──────────────────────────────────────
   activityTableBody.addEventListener('click', function(e) {
     var pinBtn = e.target.closest('[data-action="toggle-pin"]');
     if (pinBtn) {
@@ -848,6 +1063,13 @@
       return;
     }
 
+    var copyNameBtn = e.target.closest('[data-action="copy-name"]');
+    if (copyNameBtn) {
+      copyToClipboard(copyNameBtn.dataset.name, copyNameBtn);
+      e.stopPropagation();
+      return;
+    }
+
     var actionBtn = e.target.closest('[data-action]');
     if (actionBtn) {
       var action = actionBtn.dataset.action;
@@ -872,12 +1094,7 @@
       var file = target.dataset.file;
       var line = parseInt(target.dataset.line, 10);
       if (file && line) {
-        vscode.postMessage({
-          command: 'openFile',
-          file: file,
-          line: line,
-          column: 0
-        });
+        vscode.postMessage({ command: 'openFile', file: file, line: line, column: 0 });
         e.stopPropagation();
         return;
       }
@@ -887,7 +1104,7 @@
     if (row) {
       var id = row.dataset.id;
       selectedSignalId = id;
-      focusedSignalId = (focusedSignalId === id) ? null : id; // Toggle collapse/expand
+      focusedSignalId = (focusedSignalId === id) ? null : id;
       renderActivityTable();
     }
   });
@@ -898,16 +1115,12 @@
       var id = row.dataset.id;
       var node = nodeMap.get(id);
       if (node && node.loc) {
-        vscode.postMessage({
-          command: 'openFile',
-          file: node.loc.file,
-          line: node.loc.line,
-          column: 0
-        });
+        vscode.postMessage({ command: 'openFile', file: node.loc.file, line: node.loc.line, column: 0 });
       }
     }
   });
 
+  // ── Timeline Click Delegation ─────────────────────────────────────────────
   timelineChainList.addEventListener('click', function(e) {
     var pinBtn = e.target.closest('[data-action="toggle-chain-pin"]');
     if (pinBtn) {
@@ -948,16 +1161,40 @@
       var file = target.dataset.file;
       var line = parseInt(target.dataset.line, 10);
       if (file && line) {
-        vscode.postMessage({
-          command: 'openFile',
-          file: file,
-          line: line,
-          column: 0
-        });
+        vscode.postMessage({ command: 'openFile', file: file, line: line, column: 0 });
       }
     }
   });
 
+  // ── Value Panel Click Delegation ──────────────────────────────────────────
+  if (valuePanel) {
+    valuePanel.addEventListener('click', function(e) {
+      // Copy value button
+      var copyBtn = e.target.closest('[data-action="copy-value"]');
+      if (copyBtn) {
+        var id = copyBtn.dataset.id;
+        var node = id ? nodeMap.get(id) : null;
+        if (!node) return;
+        copyToClipboard(fullStr(node.value), copyBtn);
+        return;
+      }
+
+      // JSON tree toggle
+      var toggle = e.target.closest('[data-collapse-key]');
+      if (toggle) {
+        var collapseKey = toggle.dataset.collapseKey;
+        if (!collapseKey) return;
+        var isCollapsed = jsonCollapseState.get(collapseKey) === true;
+        jsonCollapseState.set(collapseKey, !isCollapsed);
+        // Re-render value inspector preserving scroll
+        var currentScroll = valuePanel.scrollTop;
+        renderValueInspector();
+        valuePanel.scrollTop = currentScroll;
+        return;
+      }
+    });
+  }
+
   // ── VS Code message handler ───────────────────────────────────────────────
   window.addEventListener('message', function(event) {
     var msg = event.data;
@@ -977,17 +1214,6 @@
     processEvent(msg);
   });
 
-  if (valuePanel) {
-    valuePanel.addEventListener('click', function(e) {
-      var btn = e.target.closest('[data-action="copy-value"]');
-      if (!btn) return;
-      var id = btn.dataset.id;
-      var node = id ? nodeMap.get(id) : null;
-      if (!node) return;
-      copyToClipboard(fullStr(node.value), btn);
-    });
-  }
-
   // Periodic refresh for timeSince + diagnostics
   setInterval(function() {
     var activeTab = document.querySelector('.tab-content.active');
diff --git a/packages/jetbrains-plugin/src/main/resources/webview/index.html b/packages/jetbrains-plugin/src/main/resources/webview/index.html
index a4b1627..be3e0cb 100644
--- a/packages/jetbrains-plugin/src/main/resources/webview/index.html
+++ b/packages/jetbrains-plugin/src/main/resources/webview/index.html
@@ -46,7 +46,20 @@
       display:flex; align-items:center; gap:3px; transition:all 0.15s;
     }
     .btn:hover { background:var(--bg3); }
-    .btn.active { background:rgba(239,68,68,0.15); border-color:#ef4444; color:#fca5a5; }
+    /* Tracing state — green */
+    .btn-tracing {
+      background: rgba(16,185,129,0.1);
+      border-color: rgba(16,185,129,0.6);
+      color: #34d399;
+    }
+    .btn-tracing:hover { background: rgba(16,185,129,0.18); }
+    /* Paused state — amber */
+    .btn-paused {
+      background: rgba(251,191,36,0.08);
+      border-color: rgba(251,191,36,0.5);
+      color: #fbbf24;
+    }
+    .btn-paused:hover { background: rgba(251,191,36,0.14); }
     .tabs-header {
       display:flex; border-bottom:1px solid var(--border);
       flex-shrink:0; background:rgba(15,23,42,0.4);
@@ -87,6 +100,8 @@
       color:var(--muted); cursor:pointer; white-space:nowrap; font-size:11px;
     }
     .inactive-label input { accent-color:var(--accent); cursor:pointer; }
+    .inactive-label input:disabled { opacity: 0.4; cursor: not-allowed; }
+    .inactive-label.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
     .controls-note { color: var(--muted); font-size: 10px; }
     .activity-table-wrap { flex:1; overflow-y:auto; overflow-x:hidden; }
     .activity-table { width:100%; border-collapse:collapse; }
@@ -99,27 +114,46 @@
     .signal-row { border-bottom:1px solid rgba(255,255,255,0.025); cursor:pointer; transition:background 0.1s; }
     .signal-row:hover { background:var(--bg2); }
     .signal-row.row-focused { background:rgba(59,130,246,0.09); }
+    .signal-row.row-pinned { background:rgba(251,191,36,0.04); border-left: 2px solid rgba(251,191,36,0.35); }
     .signal-row td { padding:5px 8px; vertical-align:middle; }
-    .col-name { max-width:160px; }
+    .col-name { max-width:150px; }
     .col-component { max-width:120px; color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
     .col-value { max-width:110px; font-family:monospace; font-size:10px; color:#94a3b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
     .col-updates { text-align:center; font-weight:600; font-size:11px; width:60px; }
     .col-updates.hot-count { color:var(--error); }
     .col-activity { width:80px; }
+    .col-pin { width:34px; text-align:center; }
+    /* Pin button — rightmost column */
     .pin-btn {
-      margin-left: 6px;
       border: 1px solid var(--border);
       border-radius: 4px;
       background: transparent;
       color: var(--muted);
       font-size: 10px;
       line-height: 1;
-      padding: 1px 4px;
+      padding: 2px 5px;
       cursor: pointer;
     }
     .pin-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
     .pin-btn.active { color: #fbbf24; border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.08); }
-    .signal-name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width:140px; }
+    /* Copy-name button next to signal name */
+    .copy-name-btn {
+      margin-left: 5px;
+      border: 1px solid transparent;
+      border-radius: 3px;
+      background: transparent;
+      color: var(--muted);
+      font-size: 9px;
+      line-height: 1;
+      padding: 1px 3px;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 0.1s;
+    }
+    .signal-row:hover .copy-name-btn { opacity: 1; }
+    .copy-name-btn:hover { color: var(--accent); border-color: rgba(59,130,246,0.3); opacity: 1; }
+    .copy-name-btn.success { color: var(--green); border-color: rgba(16,185,129,0.4); opacity: 1; }
+    .signal-name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width:130px; }
     .kind-icon { margin-right:4px; font-size:9px; }
     .kind-signal { color:var(--signal); }
     .kind-memo { color:var(--memo); }
@@ -311,6 +345,63 @@
       word-break: break-all;
       line-height: 1.5;
     }
+    /* ── Interactive JSON Tree ─────────────────────────────────────────────── */
+    .json-tree {
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: rgba(0,0,0,0.22);
+      padding: 8px 10px;
+      font-family: monospace;
+      font-size: 11px;
+      line-height: 1.7;
+      overflow: auto;
+      min-height: 120px;
+    }
+    .json-line {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+    }
+    .json-group {
+      display: block;
+    }
+    .json-toggle {
+      cursor: pointer;
+      color: var(--muted);
+      font-size: 9px;
+      user-select: none;
+      width: 14px;
+      flex-shrink: 0;
+      display: inline-block;
+      text-align: center;
+    }
+    .json-toggle:hover { color: var(--accent); }
+    .json-toggle.leaf { cursor: default; color: transparent; }
+    .json-key { color: #93c5fd; }
+    .json-colon { color: var(--muted); margin-right: 4px; }
+    .json-str { color: #86efac; }
+    .json-num { color: #fda4af; }
+    .json-bool { color: #c084fc; }
+    .json-null { color: var(--muted); font-style: italic; }
+    .json-bracket { color: var(--muted); }
+    .json-children {
+      padding-left: 14px;
+      border-left: 1px dashed rgba(255, 255, 255, 0.05);
+      margin-left: 6px;
+    }
+    .json-preview { color: var(--muted); font-size: 10px; margin: 0 4px; }
+    .category-header-row td {
+      background: rgba(255, 255, 255, 0.02);
+      color: var(--muted);
+      font-size: 10px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      padding: 6px 8px;
+      border-bottom: 1px solid var(--border);
+      border-top: 1px solid var(--border);
+      pointer-events: none;
+    }
   </style>
 </head>
 <body>
@@ -320,7 +411,7 @@
       SigTrace
     </div>
     <div class="header-controls">
-      <button id="btn-record" class="btn active">&#9679; Rec</button>
+      <button id="btn-record" class="btn btn-tracing">&#9679; Tracing</button>
       <button id="btn-clear" class="btn">Clear</button>
     </div>
   </header>
@@ -354,11 +445,12 @@
             <th>Value</th>
             <th style="text-align:center">Updates</th>
             <th>Activity</th>
+            <th class="col-pin" title="Pin">&#128204;</th>
           </tr>
         </thead>
         <tbody id="activity-table-body">
           <tr class="empty-row">
-            <td colspan="5">Waiting for signals...<br>Run your app with SigTrace to begin tracking.</td>
+            <td colspan="6">Waiting for signals...<br>Run your app with SigTrace to begin tracking.</td>
           </tr>
         </tbody>
       </table>
@@ -368,13 +460,12 @@
   <div id="tab-timeline" class="tab-content">
     <div class="timeline-controls">
       <input type="text" id="timeline-search" placeholder="Search chains, nodes, components...">
-      <label class="inactive-label">
-        <input type="checkbox" id="timeline-pinned-only"> Pinned only
+      <label class="inactive-label" id="label-pinned-only">
+        <input type="checkbox" id="timeline-pinned-only" disabled> Pinned only
       </label>
-      <label class="inactive-label">
-        <input type="checkbox" id="timeline-show-hidden"> Show hidden
+      <label class="inactive-label" id="label-show-hidden">
+        <input type="checkbox" id="timeline-show-hidden" disabled> Show hidden
       </label>
-      <span class="controls-note">Hide is per timeline item. Hidden items can be restored from Show hidden mode.</span>
     </div>
     <div class="chain-list" id="timeline-chain-list">
       <div class="empty-state">No activity yet.<br>Interact with your app to see causal chains appear here.</div>
diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json
index ad1315c..93cac8a 100644
--- a/packages/vite-plugin/package.json
+++ b/packages/vite-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sigtrace/vite",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "type": "module",
   "description": "Vite compiler plugin for SigTrace AST instrumentation",
   "main": "dist/index.js",
diff --git a/releases/v1.2.0/sigtrace-extension-1.2.0.vsix b/releases/v1.2.0/sigtrace-extension-1.2.0.vsix
new file mode 100644
index 0000000..032a3ae
Binary files /dev/null and b/releases/v1.2.0/sigtrace-extension-1.2.0.vsix differ
diff --git a/releases/v1.2.0/sigtrace-jetbrains-1.2.0.zip b/releases/v1.2.0/sigtrace-jetbrains-1.2.0.zip
new file mode 100644
index 0000000..85866dc
Binary files /dev/null and b/releases/v1.2.0/sigtrace-jetbrains-1.2.0.zip differ