reactoradar 1.2.5 → 1.4.1

package/app.js

@@ -6,7 +6,7 @@ const state = {
   activePanel: 'console',
   ports: {},
 
-  console: { logs: [], levelFilter: 'all', searchFilter: '', stackTraceEnabled: false },
+  console: { logs: [], levelFilters: { log: true, info: true, warn: true, error: true, debug: true }, searchFilter: '' },
 
   network: {
     requests: {},
@@ -106,8 +106,7 @@ document.querySelectorAll('.nav-btn').forEach(btn => {
 
 // Global filter removed — each panel has its own search input
 
-// ─── Clear (active tab only) ──────────────────────────────────────────────────
-$('btnClear').addEventListener('click', clearActiveTab);
+// ─── Clear (each panel has its own clear button now) ─────────────────────────
 
 function clearActiveTab() {
   switch (state.activePanel) {
@@ -139,6 +138,13 @@ function clearActiveTab() {
       $('sBadge').textContent = '0';
       renderStorage();
       break;
+    case 'ga4':
+      ga4State.events = [];
+      ga4State.selected = -1;
+      $('ga4Badge').textContent = '0';
+      renderGA4List();
+      renderGA4Summary();
+      break;
     case 'performance':
       perfState.fps = [];
       perfState.jsThread = [];
@@ -213,6 +219,8 @@ if (window.electronAPI) {
   window.electronAPI.on('network-event', handleNetworkEvent);
   window.electronAPI.on('storage-event', handleStorageEvent);
 
+  window.electronAPI.on('ga4-event', handleGA4Event);
+
   window.electronAPI.on('perf-event', event => {
     handlePerfEvent(event);
     handleMemoryEvent(event);
@@ -285,26 +293,40 @@ function updateDeviceBanner(service, connected) {
 // ─────────────────────────────────────────────────────────────────────────────
 // CONSOLE PANEL
 // ─────────────────────────────────────────────────────────────────────────────
+// Load saved log level filters from localStorage
+function getStoredLogLevels() {
+  try {
+    const saved = localStorage.getItem('rn-debug-log-levels');
+    if (saved) return JSON.parse(saved);
+  } catch {}
+  return { log: true, info: true, warn: true, error: true, debug: true };
+}
+function setStoredLogLevels(levels) {
+  try { localStorage.setItem('rn-debug-log-levels', JSON.stringify(levels)); } catch {}
+}
+
 function initConsolePanel() {
   const panel = $('panel-console');
+  const levels = getStoredLogLevels();
+  state.console.levelFilters = levels;
+
   panel.innerHTML = `
     <div class="panel-toolbar">
       <span class="panel-label">Console</span>
       <span class="badge" id="cBadge">0</span>
-      <div class="tab-row" style="margin-left:12px">
-        <button class="tab active" onclick="setConsoleLevel('all',this)">All</button>
-        <button class="tab" onclick="setConsoleLevel('log',this)">Log</button>
-        <button class="tab" onclick="setConsoleLevel('info',this)">Info</button>
-        <button class="tab" onclick="setConsoleLevel('warn',this)">Warn</button>
-        <button class="tab" onclick="setConsoleLevel('error',this)">Error</button>
-      </div>
-      <div class="ml-auto" style="display:flex;align-items:center;gap:8px">
-        <input id="consoleSearch" class="net-search-input" placeholder="Filter logs..." />
-        <label class="toggle-label" for="stackTraceToggle" title="Capture stack trace (caller file:line) — disabled by default for performance">
-          <span class="toggle-text" id="stackTraceText">Stack OFF</span>
-          <input type="checkbox" id="stackTraceToggle" class="toggle-input" />
-          <span class="toggle-slider"></span>
-        </label>
+      <input id="consoleSearch" class="net-search-input" style="margin-left:12px" placeholder="Filter logs..." />
+      <div class="ml-auto" style="display:flex;align-items:center;gap:6px">
+        <button class="panel-clear-btn" id="consoleClear" title="Clear console">Clear</button>
+        <div class="console-level-dropdown" id="consoleLevelDropdown">
+          <button class="console-level-btn" id="consoleLevelBtn">Levels ▾</button>
+          <div class="console-level-menu" id="consoleLevelMenu">
+            <label class="console-level-option"><input type="checkbox" data-level="log" ${levels.log ? 'checked' : ''} /><span class="lvl-dot" style="background:var(--text-mid)"></span>Log</label>
+            <label class="console-level-option"><input type="checkbox" data-level="info" ${levels.info ? 'checked' : ''} /><span class="lvl-dot" style="background:var(--accent)"></span>Info</label>
+            <label class="console-level-option"><input type="checkbox" data-level="warn" ${levels.warn ? 'checked' : ''} /><span class="lvl-dot" style="background:var(--yellow)"></span>Warn</label>
+            <label class="console-level-option"><input type="checkbox" data-level="error" ${levels.error ? 'checked' : ''} /><span class="lvl-dot" style="background:var(--red)"></span>Error</label>
+            <label class="console-level-option"><input type="checkbox" data-level="debug" ${levels.debug ? 'checked' : ''} /><span class="lvl-dot" style="background:var(--accent2)"></span>Debug</label>
+          </div>
+        </div>
       </div>
     </div>
     <div class="scroll-area" id="consoleList">
@@ -315,25 +337,60 @@ function initConsolePanel() {
       </div>
     </div>`;
 
+  // Search filter
   $('consoleSearch').addEventListener('input', (e) => {
     state.console.searchFilter = e.target.value.toLowerCase().trim();
     renderConsole();
   });
 
-  $('stackTraceToggle').addEventListener('change', (e) => {
-    const enabled = e.target.checked;
-    state.console.stackTraceEnabled = enabled;
-    $('stackTraceText').textContent = enabled ? 'Stack ON' : 'Stack OFF';
-    // Tell the SDK to enable/disable stack capture
-    window.electronAPI?.setStackTraceCapture(enabled);
+  // Level dropdown toggle
+  $('consoleLevelBtn').addEventListener('click', (e) => {
+    e.stopPropagation();
+    $('consoleLevelMenu').classList.toggle('open');
+  });
+
+  // Close dropdown when clicking outside
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('#consoleLevelDropdown')) {
+      $('consoleLevelMenu')?.classList.remove('open');
+    }
+  });
+
+  // Level checkbox changes
+  $('consoleLevelMenu').addEventListener('change', (e) => {
+    const checkbox = e.target;
+    const level = checkbox.dataset.level;
+    if (level) {
+      state.console.levelFilters[level] = checkbox.checked;
+      setStoredLogLevels(state.console.levelFilters);
+      updateLevelBtnText();
+      renderConsole();
+    }
+  });
+
+  updateLevelBtnText();
+
+  $('consoleClear').addEventListener('click', () => {
+    state.console.logs = [];
+    _consolePending = [];
+    $('cBadge').textContent = '0';
+    renderConsole();
   });
 }
-window.setConsoleLevel = (level, btn) => {
-  state.console.levelFilter = level;
-  document.querySelectorAll('#panel-console .tab').forEach(b => b.classList.remove('active'));
-  btn.classList.add('active');
-  renderConsole();
-};
+
+function updateLevelBtnText() {
+  const levels = state.console.levelFilters;
+  const allOn = Object.values(levels).every(v => v);
+  const allOff = Object.values(levels).every(v => !v);
+  const btn = $('consoleLevelBtn');
+  if (!btn) return;
+  if (allOn) btn.textContent = 'All Levels ▾';
+  else if (allOff) btn.textContent = 'None ▾';
+  else {
+    const active = Object.entries(levels).filter(([, v]) => v).map(([k]) => k.charAt(0).toUpperCase() + k.slice(1));
+    btn.textContent = active.join(', ') + ' ▾';
+  }
+}
 
 // Console is fed via IPC (network-event handled in IPC section above)
 
@@ -362,12 +419,12 @@ function flushConsoleBatch() {
   const empty = $('consoleEmpty');
   if (!list) return;
 
-  const { levelFilter, searchFilter } = state.console;
+  const { levelFilters, searchFilter } = state.console;
   const frag = document.createDocumentFragment();
   let added = 0;
 
   batch.forEach(l => {
-    if (levelFilter !== 'all' && l.level !== levelFilter) return;
+    if (levelFilters && !levelFilters[l.level]) return;
     if (searchFilter && !l.message?.toLowerCase().includes(searchFilter)) return;
     frag.appendChild(buildLogRow(l));
     added++;
@@ -634,27 +691,23 @@ function buildLogRow(l) {
   lvlSpan.textContent = l.level;
   div.appendChild(lvlSpan);
 
-  // Body wrapper with preview (collapsed) and full (expanded)
+  // Arrow (inline, not inside body-wrap)
+  const arrow = document.createElement('span');
+  arrow.className = 'log-arrow';
+  arrow.textContent = '\u25B6';
+  div.appendChild(arrow);
+
+  // Body wrapper
   const bodyWrap = document.createElement('div');
   bodyWrap.className = 'log-body-wrap';
 
-  // Single-line preview with caller at end
+  // Single-line preview: message text + caller
   const preview = document.createElement('div');
   preview.className = 'log-preview';
   const msgText = (l.message || '').replace(/\n/g, ' ').slice(0, 200);
   const previewText = document.createElement('span');
   previewText.textContent = msgText + ((l.message || '').length > 200 ? '...' : '');
   preview.appendChild(previewText);
-  if (l.caller) {
-    // Extract short filename:line from caller like "at Component (file.js:42:10)"
-    const callerShort = extractCallerShort(l.caller);
-    if (callerShort) {
-      const callerTag = document.createElement('span');
-      callerTag.className = 'log-caller-inline';
-      callerTag.textContent = callerShort;
-      preview.appendChild(callerTag);
-    }
-  }
   bodyWrap.appendChild(preview);
 
   // Full content (hidden by default)
@@ -662,20 +715,8 @@ function buildLogRow(l) {
   full.className = 'log-full';
   full.style.display = 'none';
   full.appendChild(buildLogBody(l));
-  if (l.caller) {
-    const callerSpan = document.createElement('span');
-    callerSpan.className = 'log-caller';
-    callerSpan.textContent = l.caller;
-    full.appendChild(callerSpan);
-  }
   bodyWrap.appendChild(full);
 
-  // Expand/collapse arrow
-  const arrow = document.createElement('span');
-  arrow.className = 'log-arrow';
-  arrow.textContent = '\u25B6';
-  bodyWrap.prepend(arrow);
-
   let expanded = false;
   // Only toggle on click, NOT on text selection drag
   let _mouseDownPos = null;
@@ -774,9 +815,9 @@ function renderConsole() {
   const empty = $('consoleEmpty');
   if (!list) return;
 
-  const { levelFilter, searchFilter } = state.console;
+  const { levelFilters, searchFilter } = state.console;
   const visible = state.console.logs.filter(l => {
-    if (levelFilter !== 'all' && l.level !== levelFilter) return false;
+    if (levelFilters && !levelFilters[l.level]) return false;
     if (searchFilter && !l.message?.toLowerCase().includes(searchFilter)) return false;
     return true;
   });
@@ -805,13 +846,13 @@ function renderConsole() {
 // NETWORK PANEL (Chrome DevTools-style)
 // ─────────────────────────────────────────────────────────────────────────────
 const NET_COLS = [
-  { key: 'name',      label: 'Name',      width: 260, min: 100 },
+  { key: 'name',      label: 'Name',      width: 380, min: 150 },
   { key: 'status',    label: 'Status',    width: 60,  min: 40 },
   { key: 'type',      label: 'Type',      width: 70,  min: 40 },
-  { key: 'initiator', label: 'Initiator', width: 90,  min: 50 },
-  { key: 'size',      label: 'Size',      width: 70,  min: 40 },
-  { key: 'time',      label: 'Time',      width: 70,  min: 40 },
-  { key: 'waterfall', label: 'Waterfall', width: 120, min: 60 },
+  { key: 'initiator', label: 'Initiator', width: 80,  min: 50 },
+  { key: 'size',      label: 'Size',      width: 65,  min: 40 },
+  { key: 'time',      label: 'Time',      width: 65,  min: 40 },
+  { key: 'waterfall', label: 'Waterfall', width: 100, min: 60 },
 ];
 
 function initNetworkPanel() {
@@ -821,6 +862,7 @@ function initNetworkPanel() {
       <span class="panel-label">Network</span>
       <span class="badge" id="nBadge">0</span>
       <div class="ml-auto" style="display:flex;align-items:center;gap:6px">
+        <button class="panel-clear-btn" id="networkClear" title="Clear network">Clear</button>
         <label class="toggle-label" for="netToggle">
           <span class="toggle-text" id="netToggleText">Capture ON</span>
           <input type="checkbox" id="netToggle" class="toggle-input" checked />
@@ -899,6 +941,16 @@ function initNetworkPanel() {
     window.electronAPI?.setNetworkThrottle(state.network.throttle);
   });
 
+  // Clear network
+  $('networkClear').addEventListener('click', () => {
+    state.network.requests = {};
+    state.network.order = [];
+    state.network.selectedId = null;
+    closeNetDetail();
+    $('nBadge').textContent = '0';
+    renderNetwork();
+  });
+
   // Close detail button
   $('netDetailClose').addEventListener('click', closeNetDetail);
 
@@ -1016,13 +1068,15 @@ function matchNetType(r, type) {
   const ct = (r.responseHeaders?.['content-type'] || r.responseHeaders?.['Content-Type'] || '').toLowerCase();
   const url = (r.url || '').toLowerCase();
   switch (type) {
-    case 'fetch': return true; // All XHR/fetch requests pass
-    case 'js':    return ct.includes('javascript') || url.endsWith('.js') || url.endsWith('.bundle');
-    case 'css':   return ct.includes('css') || url.endsWith('.css');
-    case 'img':   return ct.includes('image') || /\.(png|jpg|jpeg|gif|svg|webp|ico)(\?|$)/i.test(url);
-    case 'media':  return ct.includes('video') || ct.includes('audio') || /\.(mp4|mp3|wav|webm)(\?|$)/i.test(url);
-    case 'font':  return ct.includes('font') || /\.(woff2?|ttf|otf|eot)(\?|$)/i.test(url);
-    case 'doc':   return ct.includes('html') || ct.includes('xml');
+    case 'fetch': // Fetch/XHR — show API calls (JSON, text, form data), exclude static assets
+      return !ct.includes('image') && !ct.includes('font') && !ct.includes('video') && !ct.includes('audio')
+        && !/\.(png|jpg|jpeg|gif|svg|webp|ico|woff2?|ttf|otf|eot|mp4|mp3|css)(\?|$)/.test(url);
+    case 'js':    return ct.includes('javascript') || /\.(js|jsx|bundle)(\?|$)/.test(url);
+    case 'css':   return ct.includes('css') || /\.css(\?|$)/.test(url);
+    case 'img':   return ct.includes('image') || /\.(png|jpg|jpeg|gif|svg|webp|ico|avif|bmp)(\?|$)/.test(url);
+    case 'media': return ct.includes('video') || ct.includes('audio') || /\.(mp4|mp3|wav|webm|ogg|m3u8)(\?|$)/.test(url);
+    case 'font':  return ct.includes('font') || /\.(woff2?|ttf|otf|eot)(\?|$)/.test(url);
+    case 'doc':   return ct.includes('html') || ct.includes('xml') || /\.(html?|xml)(\?|$)/.test(url);
     case 'ws':    return url.startsWith('ws://') || url.startsWith('wss://');
     default:      return true;
   }
@@ -1393,6 +1447,273 @@ function buildCurlCommand(r) {
   return cmd;
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// GA4 EVENT INSPECTOR
+// ─────────────────────────────────────────────────────────────────────────────
+const ga4State = { events: [], selected: -1, searchFilter: '', sortDir: 'desc' };
+
+function initGA4Panel() {
+  const panel = $('panel-ga4');
+  panel.innerHTML = `
+    <div class="panel-toolbar">
+      <span class="panel-label">GA4 Events</span>
+      <span class="badge" id="ga4Badge">0</span>
+      <input id="ga4Search" class="net-search-input" style="margin-left:12px" placeholder="Filter events..." />
+      <div class="ml-auto">
+        <button class="panel-clear-btn" id="ga4Clear" title="Clear GA4 events">Clear</button>
+      </div>
+    </div>
+    <div class="ga4-layout">
+      <div class="ga4-list-pane">
+        <div class="ga4-list-header">
+          <span class="ga4-hcell ga4-sort-btn" id="ga4SortBtn" style="width:90px;cursor:pointer" title="Click to toggle sort order">Time <span id="ga4SortIcon">\u25BC</span></span>
+          <span class="ga4-hcell" style="flex:1">Event</span>
+        </div>
+        <div class="scroll-area" id="ga4List">
+          <div class="empty-state" id="ga4Empty">
+            <div class="icon" style="font-size:28px;opacity:.2">📊</div>
+            <div class="label">No GA4 events yet</div>
+            <div class="hint">Events from @react-native-firebase/analytics will appear here</div>
+          </div>
+        </div>
+      </div>
+      <div class="ga4-resize-handle" id="ga4ResizeHandle"></div>
+      <div class="ga4-detail-pane" id="ga4DetailPane">
+        <div class="ga4-detail-header">EVENT DETAIL</div>
+        <div class="scroll-area ga4-detail-content" id="ga4Detail">
+          <span style="color:var(--text-dim);padding:16px;display:block">Click an event to inspect</span>
+        </div>
+      </div>
+    </div>
+    <div class="ga4-summary" id="ga4Summary">
+      <span class="ga4-summary-label">Total: 0</span>
+    </div>`;
+
+  $('ga4Search').addEventListener('input', (e) => {
+    ga4State.searchFilter = e.target.value.toLowerCase().trim();
+    renderGA4List();
+    renderGA4Summary(); // update active chip highlight
+  });
+
+  $('ga4Clear').addEventListener('click', () => {
+    ga4State.events = [];
+    ga4State.selected = -1;
+    $('ga4Badge').textContent = '0';
+    renderGA4List();
+    renderGA4Summary();
+  });
+
+  $('ga4SortBtn').addEventListener('click', () => {
+    ga4State.sortDir = ga4State.sortDir === 'desc' ? 'asc' : 'desc';
+    $('ga4SortIcon').textContent = ga4State.sortDir === 'desc' ? '\u25BC' : '\u25B2';
+    renderGA4List();
+  });
+
+  // Resizable divider between list and detail
+  const resizeHandle = $('ga4ResizeHandle');
+  const detailPane = $('ga4DetailPane');
+  resizeHandle.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startWidth = detailPane.offsetWidth;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    function onMove(ev) {
+      const delta = startX - ev.clientX;
+      detailPane.style.width = Math.max(200, Math.min(window.innerWidth * 0.8, startWidth + delta)) + 'px';
+    }
+    function onUp() {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    }
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+}
+
+function handleGA4Event(event) {
+  ga4State.events.push({
+    name: event.name || '?',
+    params: event.params || {},
+    tag: event.tag || 'GA4',
+    source: event.source || '',
+    ts: event.ts || Date.now(),
+    index: ga4State.events.length,
+  });
+  $('ga4Badge').textContent = ga4State.events.length;
+
+  // Append to list (batched via rAF)
+  if (!ga4State._raf) {
+    ga4State._raf = requestAnimationFrame(() => {
+      ga4State._raf = null;
+      renderGA4List();
+      renderGA4Summary();
+    });
+  }
+}
+
+function renderGA4List() {
+  const list = $('ga4List');
+  const empty = $('ga4Empty');
+  if (!list) return;
+
+  const { searchFilter, sortDir } = ga4State;
+  let visible = ga4State.events.filter(e =>
+    !searchFilter || e.name.toLowerCase().includes(searchFilter)
+  );
+
+  // Sort: newest first (desc) or oldest first (asc)
+  if (sortDir === 'desc') {
+    visible = [...visible].reverse();
+  }
+
+  empty.style.display = visible.length ? 'none' : 'flex';
+  list.querySelectorAll('.ga4-row').forEach(e => e.remove());
+
+  // Cap at 500 rows
+  const MAX = 500;
+  const toRender = visible.length > MAX ? visible.slice(0, MAX) : visible;
+
+  const frag = document.createDocumentFragment();
+  toRender.forEach(e => {
+    const row = document.createElement('div');
+    row.className = 'ga4-row' + (e.index === ga4State.selected ? ' selected' : '');
+
+    const time = new Date(e.ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3 });
+
+    row.innerHTML = `
+      <span class="ga4-cell ga4-time">${time}</span>
+      <span class="ga4-cell ga4-name">${esc(e.name)}</span>`;
+
+    row.addEventListener('click', () => {
+      ga4State.selected = e.index;
+      list.querySelectorAll('.ga4-row').forEach(r => r.classList.remove('selected'));
+      row.classList.add('selected');
+      renderGA4Detail(e);
+    });
+
+    // Right-click to copy
+    row.addEventListener('contextmenu', (ev) => {
+      ev.preventDefault();
+      showContextMenu(ev, [
+        { label: 'Copy Event Name', action: () => navigator.clipboard.writeText(e.name) },
+        { label: 'Copy as JSON', action: () => navigator.clipboard.writeText(JSON.stringify({ event: e.name, params: e.params }, null, 2)) },
+      ]);
+    });
+
+    frag.appendChild(row);
+  });
+  list.appendChild(frag);
+}
+
+function renderGA4Detail(e) {
+  const detail = $('ga4Detail');
+  if (!detail) return;
+
+  const time = new Date(e.ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3 });
+
+  detail.innerHTML = '';
+
+  // Header info
+  const header = document.createElement('div');
+  header.className = 'ga4-detail-info';
+  header.innerHTML = `
+    <div class="ga4-detail-row"><span class="ga4-detail-key">Event Name</span><span class="ga4-detail-val" style="color:var(--accent);font-weight:600">${esc(e.name)}</span></div>
+    <div class="ga4-detail-row"><span class="ga4-detail-key">Timestamp</span><span class="ga4-detail-val">${time}</span></div>
+`;
+  detail.appendChild(header);
+
+  // Separator
+  const sep = document.createElement('div');
+  sep.className = 'ga4-detail-sep';
+  detail.appendChild(sep);
+
+  // Parameters as key-value list with collapsible objects
+  if (e.params && typeof e.params === 'object') {
+    const keys = Object.keys(e.params).sort();
+    keys.forEach(key => {
+      const val = e.params[key];
+      const row = document.createElement('div');
+      row.className = 'ga4-param-row';
+
+      const keyEl = document.createElement('span');
+      keyEl.className = 'ga4-param-key';
+      keyEl.textContent = key;
+      row.appendChild(keyEl);
+
+      if (val && typeof val === 'object') {
+        // Collapsible object tree
+        const treeWrap = document.createElement('span');
+        treeWrap.className = 'ga4-param-val';
+        treeWrap.appendChild(createTreeNode(null, val, true));
+        row.appendChild(treeWrap);
+      } else {
+        const valEl = document.createElement('span');
+        valEl.className = 'ga4-param-val';
+        valEl.textContent = val === null ? 'null' : val === undefined ? 'undefined' : JSON.stringify(val);
+        if (typeof val === 'string') valEl.style.color = 'var(--green)';
+        else if (typeof val === 'number') valEl.style.color = 'var(--orange)';
+        else if (typeof val === 'boolean') valEl.style.color = 'var(--accent2)';
+        row.appendChild(valEl);
+      }
+
+      detail.appendChild(row);
+    });
+  }
+
+  // Right-click on detail
+  detail.addEventListener('contextmenu', (ev) => {
+    ev.preventDefault();
+    showContextMenu(ev, [
+      { label: 'Copy All Parameters', action: () => navigator.clipboard.writeText(JSON.stringify(e.params, null, 2)) },
+      { label: 'Copy Event JSON', action: () => navigator.clipboard.writeText(JSON.stringify({ event: e.name, params: e.params, timestamp: e.ts }, null, 2)) },
+    ]);
+  });
+}
+
+function renderGA4Summary() {
+  const summary = $('ga4Summary');
+  if (!summary) return;
+
+  const counts = {};
+  ga4State.events.forEach(e => {
+    counts[e.name] = (counts[e.name] || 0) + 1;
+  });
+
+  const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]);
+
+  summary.innerHTML = '';
+
+  const totalLabel = document.createElement('span');
+  totalLabel.className = 'ga4-summary-label';
+  totalLabel.textContent = `Total: ${ga4State.events.length}`;
+  summary.appendChild(totalLabel);
+
+  sorted.forEach(([name, count]) => {
+    const chip = document.createElement('span');
+    const isActive = ga4State.searchFilter === name.toLowerCase();
+    chip.className = 'ga4-summary-chip' + (isActive ? ' active' : '');
+    chip.innerHTML = `<b>${esc(name)}</b><span class="chip-count">${count}</span>`;
+    chip.addEventListener('click', () => {
+      const search = $('ga4Search');
+      if (isActive) {
+        // Clear filter
+        ga4State.searchFilter = '';
+        if (search) search.value = '';
+      } else {
+        // Set filter to this event name
+        ga4State.searchFilter = name.toLowerCase();
+        if (search) search.value = name;
+      }
+      renderGA4List();
+      renderGA4Summary();
+    });
+    summary.appendChild(chip);
+  });
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // REDUX PANEL
 // ─────────────────────────────────────────────────────────────────────────────
@@ -1402,8 +1723,9 @@ function initReduxPanel() {
     <div class="panel-toolbar">
       <span class="panel-label">Redux</span>
       <span class="badge" id="rBadge">0</span>
+      <input id="reduxSearch" class="net-search-input" style="margin-left:12px" placeholder="Filter actions..." />
       <div class="ml-auto" style="display:flex;align-items:center;gap:8px">
-        <input id="reduxSearch" class="net-search-input" placeholder="Filter actions..." />
+        <button class="panel-clear-btn" id="reduxClear" title="Clear redux">Clear</button>
         <div class="time-travel-bar" style="border:none;padding:0;margin:0">
           <button class="tt-btn" onclick="reduxJumpTo(state.redux.selected-1)">◀</button>
           <span class="tt-label" id="ttLabel">—/—</span>
@@ -1423,6 +1745,14 @@ function initReduxPanel() {
     state.redux.searchFilter = e.target.value.toLowerCase().trim();
     renderRedux();
   });
+
+  $('reduxClear').addEventListener('click', () => {
+    state.redux.actions = [];
+    state.redux.states = [];
+    state.redux.selected = -1;
+    $('rBadge').textContent = '0';
+    renderRedux();
+  });
 }
 
 window.reduxJumpTo = idx => {
@@ -2455,6 +2785,7 @@ function handleMemoryEvent(event) {
 // ─────────────────────────────────────────────────────────────────────────────
 initConsolePanel();
 initNetworkPanel();
+initGA4Panel();
 initPerformancePanel();
 initMemoryPanel();
 initReduxPanel();