reactoradar 1.2.3 → 1.4.0

package/index.html

@@ -21,7 +21,6 @@
         <span id="deviceText">Waiting for device...</span>
       </div>
       <div class="titlebar-actions">
-        <button class="tb-btn" id="btnClear" title="Clear active tab (⌘K clears all)">Clear</button>
         <button class="tb-btn primary" id="btnCDP" title="Open JS Debugger (⌘D)">JS Debugger ↗</button>
       </div>
     </header>
@@ -40,6 +39,10 @@
         <svg viewBox="0 0 20 20"><rect x="3" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="1.5" fill="none"/><rect x="11" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="1.5" fill="none"/><rect x="7" y="11" width="6" height="6" rx="1" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>
         <span>Redux</span>
       </button>
+      <button class="nav-btn" data-panel="ga4" title="GA4 Events">
+        <svg viewBox="0 0 20 20"><path d="M10 2v16M6 6l4-4 4 4M3 18h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="5" cy="13" r="2" stroke="currentColor" stroke-width="1.2" fill="none"/><circle cx="10" cy="9" r="2" stroke="currentColor" stroke-width="1.2" fill="none"/><circle cx="15" cy="12" r="2" stroke="currentColor" stroke-width="1.2" fill="none"/></svg>
+        <span>GA4</span>
+      </button>
       <button class="nav-btn" data-panel="storage" title="Application">
         <svg viewBox="0 0 20 20"><ellipse cx="10" cy="6" rx="7" ry="3" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M3 6v4c0 1.66 3.13 3 7 3s7-1.34 7-3V6" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M3 10v4c0 1.66 3.13 3 7 3s7-1.34 7-3v-4" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>
         <span>App</span>
@@ -69,6 +72,7 @@
       <div id="panel-network"     class="panel"></div>
       <div id="panel-performance" class="panel"></div>
       <div id="panel-memory"      class="panel"></div>
+      <div id="panel-ga4"         class="panel"></div>
       <div id="panel-redux"       class="panel"></div>
       <div id="panel-storage"     class="panel"></div>
       <div id="panel-react"       class="panel"></div>

package/main.js

@@ -24,26 +24,26 @@ let reduxClients   = new Set();
 let storageClients = new Set();
 let networkClients = new Set();
 
+// ─── Set dock icon ASAP (before app ready) ──────────────────────────────────
+const _appIcon = nativeImage.createFromPath(path.join(__dirname, 'ReactoRadar.png'));
+
 // ─── App lifecycle ────────────────────────────────────────────────────────────
 app.whenReady().then(async () => {
-  // Theme will be set by renderer via IPC once it reads localStorage
   nativeTheme.themeSource = 'dark';
 
   // Set dock icon on macOS
-  if (process.platform === 'darwin') {
-    try {
-      const iconPath = path.join(__dirname, 'ReactoRadar.png');
-      const icon = nativeImage.createFromPath(iconPath);
-      if (!icon.isEmpty()) {
-        app.dock.setIcon(icon);
-      }
-    } catch (e) {
-      console.warn('[Icon] Failed to set dock icon:', e.message);
-    }
+  if (process.platform === 'darwin' && !_appIcon.isEmpty()) {
+    try { app.dock.setIcon(_appIcon); } catch {}
   }
 
   await createMainWindow();
 
+  // Send version to renderer
+  const appVersion = require('./package.json').version;
+  mainWindow?.webContents.on('did-finish-load', () => {
+    mainWindow?.webContents.send('app-version', appVersion);
+  });
+
   // Check for updates (non-blocking)
   checkForUpdates();
   startBridgeServers();
@@ -86,7 +86,7 @@ async function createMainWindow() {
       contextIsolation: true,
       preload: path.join(__dirname, 'preload.js'),
     },
-    icon: nativeImage.createFromPath(path.join(__dirname, 'ReactoRadar.png')),
+    icon: _appIcon,
   });
 
   mainWindow.loadFile(path.join(__dirname, 'index.html'));
@@ -257,6 +257,8 @@ function startBridgeServers() {
       mainWindow?.webContents.send('console-event', event);
     } else if (event.type === 'perf') {
       mainWindow?.webContents.send('perf-event', event);
+    } else if (event.type === 'ga4') {
+      mainWindow?.webContents.send('ga4-event', event);
     } else {
       mainWindow?.webContents.send('network-event', event);
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.2.3",
+  "version": "1.4.0",
   "description": "macOS debugger for React Native — Console, Sources, Network, Performance, Memory, Redux, AsyncStorage, React tree. Supports RN 0.74+ with Hermes and New Architecture.",
   "main": "main.js",
   "bin": {

package/preload.js

@@ -9,8 +9,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
   on: (channel, cb) => {
     const allowed = [
       'ports', 'cdp-targets', 'redux-event', 'storage-event', 'network-event',
-      'console-event', 'perf-event', 'redux-connected', 'storage-connected', 'network-connected',
-      'react-dt-status', 'trigger-open-cdp', 'clear-all-ui', 'theme-changed', 'update-available',
+      'console-event', 'perf-event', 'ga4-event', 'redux-connected', 'storage-connected', 'network-connected',
+      'react-dt-status', 'trigger-open-cdp', 'clear-all-ui', 'theme-changed', 'update-available', 'app-version',
     ];
     if (allowed.includes(channel)) {
       ipcRenderer.removeAllListeners(channel);

package/sdk/RNDebugSDK.js

@@ -529,10 +529,123 @@ try {
   }, 2000);
 })();
 
-// Note: "Open DevTools" in the simulator dev menu opens Chrome/Metro's built-in debugger.
-// To debug JS in the ReactoRadar app instead, press Cmd+D in the debugger app
-// or click the "JS Debugger" button. Both can coexist — they connect to the
-// same Hermes CDP target independently.
+// ─── GA4 / Firebase Analytics Interceptor ────────────────────────────────────
+// Intercepts @react-native-firebase/analytics logEvent calls.
+// The analytics() function returns a new instance each time, so we patch the
+// PROTOTYPE of the analytics module class, not individual instances.
+(function setupGA4Interceptor() {
+  function patchAnalytics() {
+    try {
+      const analyticsModule = require('@react-native-firebase/analytics');
+      if (!analyticsModule) return false;
+
+      // Get the default export (the analytics factory function)
+      const analyticsFn = analyticsModule.default || analyticsModule;
+      if (typeof analyticsFn !== 'function') return false;
+
+      // Create one instance to get access to its prototype
+      const instance = analyticsFn();
+      if (!instance || !instance.logEvent) return false;
+
+      const proto = Object.getPrototypeOf(instance);
+      if (!proto || proto.__reactoRadarPatched) return false;
+      proto.__reactoRadarPatched = true;
+
+      // Helper to safely serialize params
+      function _safeParams(p) {
+        if (!p || typeof p !== 'object') return p || {};
+        try { return JSON.parse(JSON.stringify(p)); } catch { return {}; }
+      }
+
+      // Convert method name to event name: logAddToCart → add_to_cart
+      function _methodToEvent(name) {
+        // Remove 'log' prefix, then convert camelCase to snake_case
+        return name.replace(/^log/, '')
+          .replace(/([A-Z])/g, '_$1')
+          .toLowerCase()
+          .replace(/^_/, '');
+      }
+
+      // Dynamically wrap ALL methods that start with 'log' on the prototype
+      // This catches logEvent, logPurchase, logAddToCart, logScreenView, etc.
+      // Also catches any future methods Firebase adds.
+      Object.getOwnPropertyNames(proto).forEach(methodName => {
+        if (!methodName.startsWith('log') || typeof proto[methodName] !== 'function') return;
+
+        const orig = proto[methodName];
+
+        if (methodName === 'logEvent') {
+          // logEvent has signature: (eventName, params, options?)
+          proto.logEvent = function(eventName, params, options) {
+            try { mainCh.send({ type: 'ga4', name: eventName, params: _safeParams(params), tag: 'GA4' }); } catch {}
+            return orig.call(this, eventName, params, options);
+          };
+        } else {
+          // All other log methods: logPurchase(params), logScreenView(params), etc.
+          const eventName = _methodToEvent(methodName);
+          proto[methodName] = function() {
+            try {
+              // First argument is always the params object (or undefined for logAppOpen, logTutorialBegin, etc.)
+              const params = arguments[0];
+              mainCh.send({ type: 'ga4', name: eventName, params: _safeParams(params), tag: 'GA4' });
+            } catch {}
+            return orig.apply(this, arguments);
+          };
+        }
+      });
+
+      // Also wrap set* methods to track user properties/consent
+      ['setUserId', 'setUserProperty', 'setUserProperties', 'setConsent', 'setDefaultEventParameters', 'setAnalyticsCollectionEnabled'].forEach(methodName => {
+        if (!proto[methodName] || typeof proto[methodName] !== 'function') return;
+        const orig = proto[methodName];
+        proto[methodName] = function() {
+          try {
+            const params = {};
+            // Capture the arguments as key-value
+            if (arguments.length === 1) params.value = _safeParams(arguments[0]);
+            else if (arguments.length >= 2) { params.name = arguments[0]; params.value = arguments[1]; }
+            mainCh.send({ type: 'ga4', name: methodName, params, tag: 'GA4' });
+          } catch {}
+          return orig.apply(this, arguments);
+        };
+      });
+
+      _console.log('[RNDebugSDK] GA4 Analytics prototype interceptor active');
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  // Try immediately, then retry at increasing delays
+  if (!patchAnalytics()) {
+    [100, 500, 2000, 5000].forEach(delay => {
+      setTimeout(() => patchAnalytics(), delay);
+    });
+  }
+
+  // Fallback: also patch the module's default export function to wrap returned instances
+  setTimeout(() => {
+    try {
+      const mod = require('@react-native-firebase/analytics');
+      if (!mod || mod.__reactoRadarWrapped) return;
+      const origDefault = mod.default;
+      if (typeof origDefault !== 'function') return;
+      mod.__reactoRadarWrapped = true;
+      mod.default = function() {
+        const inst = origDefault.apply(this, arguments);
+        // Ensure prototype is patched (in case new prototype was created)
+        if (inst && inst.logEvent) {
+          const p = Object.getPrototypeOf(inst);
+          if (p && !p.__reactoRadarPatched) patchAnalytics();
+        }
+        return inst;
+      };
+      // Copy static properties
+      Object.keys(origDefault).forEach(k => { mod.default[k] = origDefault[k]; });
+    } catch {}
+  }, 50);
+})();
 
 console.log(`[RNDebugSDK] Connected to ${HOST} | Console+Network:${PORTS.NETWORK_AND_CONSOLE} Redux:${PORTS.REDUX} Storage:${PORTS.STORAGE}`);
 

package/styles.css

@@ -369,6 +369,76 @@ body {
 .tab:hover:not(.active) { color: var(--text); }
 .ml-auto { margin-left: auto; }
 
+/* Panel clear button (used in Console, Network, GA4, Redux) */
+.panel-clear-btn {
+  padding: 3px 10px;
+  border: 1px solid var(--border2);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-dim);
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.12s;
+  flex-shrink: 0;
+}
+.panel-clear-btn:hover { border-color: var(--red); color: var(--red); }
+
+/* Console level dropdown */
+.console-level-dropdown { position: relative; }
+.console-level-btn {
+  padding: 3px 10px;
+  border: 1px solid var(--border2);
+  border-radius: 4px;
+  background: var(--bg3);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.console-level-btn:hover { border-color: var(--accent); }
+.console-level-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: var(--bg2);
+  border: 1px solid var(--border2);
+  border-radius: 6px;
+  padding: 6px 0;
+  min-width: 140px;
+  box-shadow: 0 4px 16px rgba(0,0,0,.3);
+  z-index: 100;
+}
+.console-level-menu.open { display: block; }
+.console-level-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 12px;
+  font-size: 11px;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.08s;
+}
+.console-level-option:hover { background: var(--bg3); }
+.console-level-option input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+.lvl-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
 /* ── SCROLL AREA ─────────────────────────────────────────────────────────────── */
 .scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; user-select: text; -webkit-user-select: text; }
 .scroll-area::-webkit-scrollbar { width: 4px; }
@@ -399,22 +469,22 @@ body {
    CONSOLE PANEL
 ───────────────────────────────────────────────────────────────────────────── */
 .log-row {
-  display: grid;
-  grid-template-columns: 58px 44px 1fr;
-  gap: 8px;
-  align-items: baseline;
+  display: flex;
+  align-items: center;
+  gap: 6px;
   padding: 4px 14px;
   border-bottom: 1px solid transparent;
   transition: background 0.08s;
   cursor: default;
+  overflow: hidden;
 }
 .log-row:hover { background: var(--bg3); }
 .log-row.warn  { background: rgba(245,200,66,.03); border-bottom-color: rgba(245,200,66,.06); }
 .log-row.error { background: rgba(255,94,114,.04); border-bottom-color: rgba(255,94,114,.07); }
 
-.log-time { color: var(--text-dim); font-size: 10px; white-space: nowrap; }
+.log-time { color: var(--text-dim); font-size: 10px; white-space: nowrap; flex-shrink: 0; }
 
-.lvl-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
+.lvl-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
 .lvl-log   { background: rgba(200,210,230,.07); color: var(--text-dim); }
 .lvl-info  { background: rgba(79,172,255,.12);  color: var(--accent); }
 .lvl-warn  { background: rgba(245,200,66,.12);  color: var(--yellow); }
@@ -426,25 +496,25 @@ body {
   flex-direction: column;
   cursor: pointer;
   min-width: 0;
+  flex: 1;
 }
 .log-arrow {
   display: inline-block;
-  width: 14px;
+  width: 12px;
   font-size: 8px;
   color: var(--text-dim);
   flex-shrink: 0;
   user-select: none;
   -webkit-user-select: none;
-  margin-bottom: 1px;
 }
 .log-arrow.expanded { color: var(--accent); }
 .log-preview {
   display: flex;
-  align-items: baseline;
-  gap: 8px;
+  align-items: center;
+  gap: 6px;
   color: var(--text);
   font-size: 11px;
-  line-height: 1.5;
+  line-height: 1.4;
   overflow: hidden;
   white-space: nowrap;
   user-select: text;
@@ -759,8 +829,17 @@ body {
 .kv-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
 .kv-key { color: var(--accent); font-size: 11px; }
 .kv-val { color: var(--text); word-break: break-all; font-size: 11px; }
-.section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 6px; margin-top: 10px; }
-.section-label:first-child { margin-top: 0; }
+.section-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-dim);
+  margin-bottom: 4px;
+  margin-top: 0;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+.section-label:first-child { border-top: none; padding-top: 0; }
 
 /* Context menu */
 .ctx-menu {
@@ -1264,6 +1343,130 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 ───────────────────────────────────────────────────────────────────────────── */
 .memory-layout { display: flex; flex-direction: column; height: 100%; }
 
+/* ─────────────────────────────────────────────────────────────────────────────
+   GA4 EVENT INSPECTOR
+───────────────────────────────────────────────────────────────────────────── */
+.ga4-layout { display: flex; flex: 1; overflow: hidden; }
+.ga4-list-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+/* Resize handle between list and detail */
+.ga4-resize-handle {
+  width: 5px;
+  cursor: col-resize;
+  background: var(--border);
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+.ga4-resize-handle:hover { background: var(--accent); opacity: 0.5; }
+
+.ga4-detail-pane {
+  width: 60%;
+  min-width: 350px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.ga4-list-header {
+  display: flex;
+  align-items: center;
+  padding: 4px 10px;
+  background: var(--bg2);
+  border-bottom: 1px solid var(--border);
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+.ga4-hcell { padding: 3px 6px; }
+.ga4-sort-btn:hover { color: var(--accent); }
+.ga4-sort-btn span { font-size: 8px; color: var(--accent); }
+
+.ga4-row {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.08s;
+  font-size: 11px;
+}
+.ga4-row:hover { background: var(--bg3); }
+.ga4-row.selected { background: var(--bg4); border-left: 2px solid var(--accent); }
+
+.ga4-cell { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ga4-time { width: 90px; color: var(--text-dim); font-size: 10px; flex-shrink: 0; }
+.ga4-name { flex: 1; color: var(--text-bright); font-weight: 500; min-width: 0; }
+
+/* Detail pane */
+.ga4-detail-header {
+  padding: 8px 14px;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg2);
+  flex-shrink: 0;
+}
+.ga4-detail-content { flex: 1; overflow-y: auto; padding: 10px 14px; user-select: text; -webkit-user-select: text; }
+.ga4-detail-info { margin-bottom: 8px; }
+.ga4-detail-row { display: flex; gap: 12px; padding: 3px 0; font-size: 11px; }
+.ga4-detail-key { color: var(--text-dim); min-width: 100px; flex-shrink: 0; }
+.ga4-detail-val { color: var(--text); word-break: break-all; }
+.ga4-detail-sep { height: 1px; background: var(--border); margin: 8px 0; }
+
+.ga4-param-row {
+  display: flex;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 11px;
+  border-bottom: 1px solid var(--border);
+  align-items: flex-start;
+}
+.ga4-param-row:last-child { border-bottom: none; }
+.ga4-param-key { color: var(--accent); width: 180px; min-width: 180px; flex-shrink: 0; font-weight: 500; padding-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ga4-param-val { color: var(--text); flex: 1; min-width: 0; }
+.ga4-param-val .ov-node, .ga4-param-val .ov-leaf { white-space: normal; }
+.ga4-param-val .ov-key { white-space: nowrap; }
+.ga4-param-val .ov-header { flex-wrap: nowrap; }
+
+/* Summary bar */
+.ga4-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  background: var(--bg2);
+  border-top: 1px solid var(--border);
+  font-size: 10px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+.ga4-summary::-webkit-scrollbar { height: 3px; }
+.ga4-summary::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
+.ga4-summary-label { font-weight: 600; color: var(--text-mid); flex-shrink: 0; }
+.ga4-summary-chip {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid var(--border2);
+  cursor: pointer;
+  transition: all 0.12s;
+  white-space: nowrap;
+}
+.ga4-summary-chip:hover { border-color: var(--accent); color: var(--accent); }
+.ga4-summary-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+.ga4-summary-chip b { font-weight: 500; color: var(--text); }
+.ga4-summary-chip.active b { color: #fff; }
+.ga4-summary-chip .chip-count { color: var(--text-dim); margin-left: 3px; }
+.ga4-summary-chip.active .chip-count { color: rgba(255,255,255,0.7); }
+
 /* ── LIGHT THEME OVERRIDES ───────────────────────────────────────────────────── */
 [data-theme="light"] .tb-btn.primary {
   background: rgba(9,105,218,.08);