reactoradar 1.6.11 → 1.6.12

package/app.js

@@ -71,10 +71,25 @@ function syntaxHighlight(json) {
     });
 }
 
+// Sort object keys alphabetically for display (recursive)
+function _sortKeys(obj) {
+  if (Array.isArray(obj)) return obj.map(_sortKeys);
+  if (obj !== null && typeof obj === 'object') {
+    const sorted = {};
+    Object.keys(obj).sort().forEach(k => { sorted[k] = _sortKeys(obj[k]); });
+    return sorted;
+  }
+  return obj;
+}
+
 function renderJSON(val) {
   if (val == null) return '<span style="color:var(--text-dim)">Empty response</span>';
   try {
-    const str = typeof val === 'string' ? val : JSON.stringify(val, null, 2);
+    let data = val;
+    // Parse string JSON so we can sort keys
+    if (typeof data === 'string') { try { data = JSON.parse(data); } catch { return syntaxHighlight(esc(data)); } }
+    const sorted = _sortKeys(data);
+    const str = JSON.stringify(sorted, null, 2);
     if (!str || str === '{}' || str === '""') return '<span style="color:var(--text-dim)">Empty response body</span>';
     return syntaxHighlight(esc(str));
   } catch { try { return esc(JSON.stringify(val)); } catch { return esc('[Unserializable data]'); } }

package/main.js

@@ -739,11 +739,15 @@ function setupIPC() {
     if (platform === 'android') {
       // adb logcat — show only new logs from now (not historical buffer)
       cmd = 'adb';
-      args = ['logcat', '-v', 'threadtime', '-T', '1', '*:W']; // -T 1 = last 1 line then real-time
+      // -T 1 = last 1 line then real-time. Include Firebase tags at Verbose level for GA4 event capture.
+      args = ['logcat', '-v', 'threadtime', '-T', '1', 'FA:V', 'FA-SVC:V', 'FirebaseAnalytics:V', '*:W'];
     } else if (platform === 'ios-sim') {
-      // xcrun simctl for iOS Simulator — use syslog style for parseable output
-      cmd = 'xcrun';
-      args = ['simctl', 'spawn', 'booted', 'log', 'stream', '--style', 'syslog', '--level', 'error'];
+      // Use macOS unified log to capture iOS simulator logs
+      // processImagePath CONTAINS "CoreSimulator" filters to simulator processes only
+      // Captures errors + Firebase/FIRAnalytics events (requires -FIRDebugEnabled in Xcode scheme)
+      cmd = '/usr/bin/log';
+      args = ['stream', '--style', 'syslog', '--predicate',
+        'processImagePath CONTAINS "CoreSimulator" AND (messageType >= error OR composedMessage CONTAINS "firebase" OR composedMessage CONTAINS "FIRAnalytics" OR composedMessage CONTAINS "Logging event" OR composedMessage CONTAINS "GoogleAnalytics" OR composedMessage CONTAINS "[GA4]")'];
     } else if (platform === 'ios-device') {
       // idevicesyslog for real iOS device
       cmd = 'idevicesyslog';
@@ -808,13 +812,50 @@ function setupIPC() {
     if (_nativeLogProcess) { try { _nativeLogProcess.kill(); } catch {} }
   });
 
+  // Firebase/GA tag detection for both Android and iOS
+  const _firebaseTags = new Set(['FA', 'FA-SVC', 'FA:Application', 'FA:Service', 'FirebaseAnalytics', 'FIRAnalytics', 'firebase', 'google.analytics', 'AnalyticsService']);
+  const _firebaseTagRe = /^(FA|FA-SVC|FA:Application|FA:Service|FirebaseAnalytics|FIRAnalytics|firebase|google\.analytics|AnalyticsService)/i;
+
+  function _parseFirebaseEvent(message, tag) {
+    if (!message) return null;
+    // Android FA tag patterns:
+    // "Logging event (FE): session_start(_s), Bundle[{...}]"
+    // "Setting event parameter: engagement_time_msec = 1234"
+    // "Screen exposed: main_screen"
+    let m;
+    if ((m = message.match(/Logging event\s*\(?(\w+)?\)?\s*:\s*(\S+?)(?:\((\w+)\))?\s*,?\s*Bundle\[\{(.*)\}\]/i))) {
+      const params = {};
+      // Parse "key=value, key=value" from Bundle
+      if (m[4]) m[4].split(/,\s*/).forEach(p => { const [k, v] = p.split('='); if (k) params[k.trim()] = v ? v.trim() : ''; });
+      return { eventName: m[2] || m[3] || 'unknown', source: m[1] || 'native', params };
+    }
+    if ((m = message.match(/Logging event\s*\(?(\w+)?\)?\s*:\s*(\S+)/i))) {
+      return { eventName: m[2], source: m[1] || 'native', params: {} };
+    }
+    // iOS FIRAnalytics pattern: "Logging event: origin, name, params: { ... }"
+    if ((m = message.match(/Logging event:\s*(\w+),\s*(\w+),\s*params:\s*(\{.*\})/i))) {
+      let params = {};
+      try { params = JSON.parse(m[3]); } catch {}
+      return { eventName: m[2], source: m[1] || 'native', params };
+    }
+    return null;
+  }
+
   function _parseNativeLog(line, platform) {
     if (platform === 'android') {
       // Android logcat format: "06-05 10:30:45.123  1234  5678 E TAG: message"
       const m = line.match(/^\d{2}-\d{2}\s+(\d{2}:\d{2}:\d{2})\.\d+\s+\d+\s+\d+\s+([VDIWEF])\s+([^:]+):\s*(.*)/);
       if (m) {
         const levelMap = { V: 'verbose', D: 'debug', I: 'info', W: 'warn', E: 'error', F: 'fatal' };
-        return { ts: Date.now(), time: m[1], level: levelMap[m[2]] || 'info', tag: m[3].trim(), message: m[4], raw: line };
+        const tag = m[3].trim();
+        const parsed = { ts: Date.now(), time: m[1], level: levelMap[m[2]] || 'info', tag, message: m[4], raw: line };
+        // Detect Firebase/GA events
+        if (_firebaseTagRe.test(tag)) {
+          parsed.firebase = true;
+          const fe = _parseFirebaseEvent(m[4], tag);
+          if (fe) parsed.firebaseEvent = fe;
+        }
+        return parsed;
       }
       return { ts: Date.now(), level: 'info', message: line, raw: line };
     }
@@ -823,13 +864,25 @@ function setupIPC() {
       const m1 = line.match(/(\d{2}:\d{2}:\d{2})\.\d+[^\s]*\s+\S+\s+(\S+)\[\d+\].*?<(\w+)>:\s*(.*)/);
       if (m1) {
         const levelMap = { Notice: 'info', Info: 'info', Default: 'info', Debug: 'debug', Error: 'error', Fault: 'fatal' };
-        return { ts: Date.now(), time: m1[1], level: levelMap[m1[3]] || 'info', tag: m1[2], message: m1[4], raw: line };
+        const parsed = { ts: Date.now(), time: m1[1], level: levelMap[m1[3]] || 'info', tag: m1[2], message: m1[4], raw: line };
+        if (_firebaseTagRe.test(m1[2]) || /FIRAnalytics|GoogleAnalytics|firebase/i.test(m1[4])) {
+          parsed.firebase = true;
+          const fe = _parseFirebaseEvent(m1[4], m1[2]);
+          if (fe) parsed.firebaseEvent = fe;
+        }
+        return parsed;
       }
       // idevicesyslog format: "Jun  5 10:30:45 iPhone MyApp(libsystem)[123] <Error>: message"
       const m2 = line.match(/\w+\s+\d+\s+(\d{2}:\d{2}:\d{2})\s+\S+\s+(\S+?)[\[(].*?<(\w+)>:\s*(.*)/);
       if (m2) {
         const levelMap = { Notice: 'info', Info: 'info', Debug: 'debug', Warning: 'warn', Error: 'error', Critical: 'fatal' };
-        return { ts: Date.now(), time: m2[1], level: levelMap[m2[3]] || 'info', tag: m2[2], message: m2[4], raw: line };
+        const parsed = { ts: Date.now(), time: m2[1], level: levelMap[m2[3]] || 'info', tag: m2[2], message: m2[4], raw: line };
+        if (_firebaseTagRe.test(m2[2]) || /FIRAnalytics|GoogleAnalytics|firebase/i.test(m2[4])) {
+          parsed.firebase = true;
+          const fe = _parseFirebaseEvent(m2[4], m2[2]);
+          if (fe) parsed.firebaseEvent = fe;
+        }
+        return parsed;
       }
       // Fallback
       const timeMatch = line.match(/(\d{2}:\d{2}:\d{2})/);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.6.11",
+  "version": "1.6.12",
   "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/panels/console.js

@@ -359,7 +359,8 @@ function collectEntries(val) {
     if (!(k in result)) result[k] = val[k];
   }
 
-  return Object.entries(result);
+  // Sort keys alphabetically for consistent, readable display
+  return Object.entries(result).sort((a, b) => String(a[0]).localeCompare(String(b[0])));
 }
 
 function objPreview(val, maxLen) {
@@ -400,14 +401,23 @@ function primitivePreview(val) {
   if (typeof val === 'string') return val.length > 50 ? `"${val.slice(0,50)}..."` : `"${val}"`;
   if (typeof val === 'number' || typeof val === 'boolean') return String(val);
   if (Array.isArray(val)) return `Array(${val.length})`;
-  if (typeof val === 'object') return `{...}`;
+  if (typeof val === 'object') {
+    const keys = Object.keys(val);
+    if (keys.length === 0) return '{}';
+    if (keys.length <= 3) return `{${keys.join(', ')}}`;
+    return `{${keys.slice(0, 3).join(', ')}, +${keys.length - 3}}`;
+  }
   if (typeof val === 'function') return `[Function: ${val.name || 'anonymous'}]`;
   return safeStr(val);
 }
 
-function createTreeNode(key, val, startCollapsed) {
+function createTreeNode(key, val, startCollapsed, parentPath) {
   const isArray = Array.isArray(val);
   const isObj = val !== null && typeof val === 'object';
+  // Build full dot-notation path for "Copy path"
+  const fullPath = key !== null
+    ? (parentPath ? (typeof key === 'number' ? `${parentPath}[${key}]` : `${parentPath}.${key}`) : String(key))
+    : (parentPath || '');
 
   if (!isObj) {
     // Primitive leaf
@@ -420,6 +430,16 @@ function createTreeNode(key, val, startCollapsed) {
       row.appendChild(k);
     }
     row.appendChild(createPrimitiveSpan(val));
+    // Right-click to copy value
+    row.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const items = [];
+      if (key !== null) items.push({ label: `Copy value of "${key}"`, action: () => navigator.clipboard.writeText(safeStr(val)) });
+      items.push({ label: 'Copy as JSON', action: () => { try { navigator.clipboard.writeText(JSON.stringify(val)); } catch { navigator.clipboard.writeText(safeStr(val)); } } });
+      if (fullPath) items.push({ label: 'Copy path', action: () => navigator.clipboard.writeText(fullPath) });
+      showContextMenu(e, items);
+    });
     return row;
   }
 
@@ -460,7 +480,7 @@ function createTreeNode(key, val, startCollapsed) {
     populated = true;
     const entries = collectEntries(val);
     entries.forEach(([k, v]) => {
-      children.appendChild(createTreeNode(k, v, true));
+      children.appendChild(createTreeNode(k, v, true, fullPath));
     });
     // For arrays show length, for objects show prototype hint
     if (isArray) {
@@ -497,6 +517,26 @@ function createTreeNode(key, val, startCollapsed) {
     }
   });
 
+  // Right-click on any node to copy its subtree
+  header.addEventListener('contextmenu', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const items = [];
+    if (key !== null) {
+      items.push({ label: `Copy "${key}" value`, action: () => {
+        try { navigator.clipboard.writeText(JSON.stringify(val, null, 2)); } catch { navigator.clipboard.writeText(safeStr(val)); }
+      }});
+      items.push({ label: `Copy "${key}" key-value`, action: () => {
+        try { navigator.clipboard.writeText(JSON.stringify({ [key]: val }, null, 2)); } catch { navigator.clipboard.writeText(`${key}: ${safeStr(val)}`); }
+      }});
+    }
+    items.push({ label: 'Copy entire object', action: () => {
+      try { navigator.clipboard.writeText(JSON.stringify(val, null, 2)); } catch { navigator.clipboard.writeText(safeStr(val)); }
+    }});
+    if (fullPath) items.push({ label: 'Copy path', action: () => navigator.clipboard.writeText(fullPath) });
+    showContextMenu(e, items);
+  });
+
   container.appendChild(children);
   return container;
 }

package/panels/native.js

@@ -36,6 +36,8 @@ function initNativeLogsPanel() {
               <div class="native-prereq-step">2. Enable <b>USB Debugging</b><br/><span style="color:var(--text-dim);font-size:9px">Settings → Developer Options → USB Debugging → ON</span></div>
               <div class="native-prereq-step">3. Connect device via USB and accept the prompt</div>
               <div class="native-prereq-step">4. Verify: run <code>adb devices</code> in terminal</div>
+              <div class="native-prereq-step" style="margin-top:6px"><b>Firebase events:</b></div>
+              <div class="native-prereq-step"><code>adb shell setprop debug.firebase.analytics.app &lt;pkg&gt;</code></div>
             </div>
             <div id="nativeAndroidStatus" class="native-detect-status"></div>
             <button class="native-connect-btn" id="nativeConnectAndroid">Connect Android</button>
@@ -51,6 +53,8 @@ function initNativeLogsPanel() {
               <div class="native-prereq-step">1. Install: <code>brew install libimobiledevice</code></div>
               <div class="native-prereq-step">2. Connect device, tap <b>Trust</b> on the prompt</div>
               <div class="native-prereq-step">3. Verify: <code>idevice_id -l</code> shows device UDID</div>
+              <div class="native-prereq-step" style="margin-top:6px"><b>Firebase events:</b></div>
+              <div class="native-prereq-step">Add <code>-FIRDebugEnabled</code> to Xcode scheme launch arguments</div>
             </div>
             <div id="nativeIOSStatus" class="native-detect-status"></div>
             <div style="display:flex;gap:6px;margin-top:8px">
@@ -66,6 +70,7 @@ function initNativeLogsPanel() {
         <input id="nativeSearch" class="net-search-input" placeholder="Filter logs..." />
         <div class="native-level-filters" id="nativeLevelFilters">
           <button class="net-status-btn active" data-level="all">All</button>
+          <button class="net-status-btn" data-level="firebase" style="color:var(--yellow)">🔥 Firebase</button>
           <button class="net-status-btn" data-level="fatal">Fatal</button>
           <button class="net-status-btn" data-level="error">Error</button>
           <button class="net-status-btn" data-level="warn">Warn</button>
@@ -197,51 +202,103 @@ function _appendNativeLog(log) {
   if (!list) return;
 
   // Check filters
-  if (_nativeState.levelFilter !== 'all' && log.level !== _nativeState.levelFilter) return;
+  if (_nativeState.levelFilter === 'firebase') {
+    if (!log.firebase) return; // Only show Firebase-tagged logs
+  } else if (_nativeState.levelFilter !== 'all' && log.level !== _nativeState.levelFilter) {
+    return;
+  }
   if (_nativeState.searchFilter && !log.message?.toLowerCase().includes(_nativeState.searchFilter) && !log.tag?.toLowerCase().includes(_nativeState.searchFilter)) return;
 
-  const isExpandable = log.level === 'error' || log.level === 'fatal' || (log.message || '').length > 200;
-  const row = document.createElement('div');
-  row.className = `native-log-row native-${log.level || 'info'}`;
-
   const time = log.time || new Date(log.ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
 
-  // Header line (always visible)
-  const header = document.createElement('div');
-  header.className = 'native-log-header';
-  header.innerHTML = `<span class="native-log-time">${esc(time)}</span>`
-    + `<span class="native-log-level">${esc((log.level || 'info').toUpperCase())}</span>`
-    + (log.tag ? `<span class="native-log-tag">${esc(log.tag)}</span>` : '')
-    + `<span class="native-log-preview">${esc((log.message || '').split('\\n')[0].slice(0, 200))}</span>`;
-  row.appendChild(header);
+  // Firebase events — render GA4-style cards
+  if (log.firebase && log.firebaseEvent && _nativeState.levelFilter === 'firebase') {
+    const fe = log.firebaseEvent;
+    const row = document.createElement('div');
+    row.className = 'native-firebase-card';
+
+    const paramKeys = Object.keys(fe.params || {});
+    const paramHtml = paramKeys.length > 0
+      ? `<div class="native-firebase-params">${paramKeys.map(k =>
+          `<div class="native-firebase-param"><span class="native-firebase-param-key">${esc(k)}</span><span class="native-firebase-param-val">${esc(safeStr(fe.params[k]))}</span></div>`
+        ).join('')}</div>`
+      : '';
+
+    row.innerHTML = `
+      <div class="native-firebase-header">
+        <span class="native-firebase-event">${esc(fe.eventName)}</span>
+        <span class="native-firebase-source">${esc(fe.source)}</span>
+        <span class="native-firebase-time">${esc(time)}</span>
+      </div>
+      ${paramHtml}`;
 
-  // Expandable full message (for errors and long messages)
-  if (isExpandable) {
-    const fullMsg = document.createElement('div');
-    fullMsg.className = 'native-log-full';
-    fullMsg.style.display = 'none';
-    fullMsg.textContent = log.message || '';
-    row.appendChild(fullMsg);
+    // Expand/collapse params
+    const header = row.querySelector('.native-firebase-header');
+    const params = row.querySelector('.native-firebase-params');
+    if (header && params) {
+      params.style.display = 'none';
+      header.style.cursor = 'pointer';
+      header.addEventListener('click', () => {
+        const open = params.style.display !== 'none';
+        params.style.display = open ? 'none' : 'block';
+        row.classList.toggle('expanded', !open);
+      });
+    }
 
-    header.style.cursor = 'pointer';
-    header.addEventListener('click', () => {
-      const open = fullMsg.style.display !== 'none';
-      fullMsg.style.display = open ? 'none' : 'block';
-      row.classList.toggle('expanded', !open);
+    // Right-click
+    row.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      showContextMenu(e, [
+        { label: `Copy Event: ${fe.eventName}`, action: () => navigator.clipboard.writeText(fe.eventName) },
+        { label: 'Copy Params (JSON)', action: () => navigator.clipboard.writeText(JSON.stringify(fe.params, null, 2)) },
+        { label: 'Copy Raw Log', action: () => navigator.clipboard.writeText(log.raw || log.message || '') },
+      ]);
     });
-  }
 
-  // Right-click to copy
-  row.addEventListener('contextmenu', (e) => {
-    e.preventDefault();
-    showContextMenu(e, [
-      { label: 'Copy Message', action: () => navigator.clipboard.writeText(log.message || '') },
-      { label: 'Copy Raw Line', action: () => navigator.clipboard.writeText(log.raw || log.message || '') },
-      ...(log.tag ? [{ label: `Copy Tag (${log.tag})`, action: () => navigator.clipboard.writeText(log.tag) }] : []),
-    ]);
-  });
+    list.appendChild(row);
+  } else {
+    // Standard log row — with Firebase badge if applicable
+    const isExpandable = log.level === 'error' || log.level === 'fatal' || (log.message || '').length > 200;
+    const row = document.createElement('div');
+    row.className = `native-log-row native-${log.level || 'info'}${log.firebase ? ' native-firebase' : ''}`;
 
-  list.appendChild(row);
+    const header = document.createElement('div');
+    header.className = 'native-log-header';
+    header.innerHTML = `<span class="native-log-time">${esc(time)}</span>`
+      + `<span class="native-log-level">${esc((log.level || 'info').toUpperCase())}</span>`
+      + (log.firebase ? '<span class="native-firebase-badge">Firebase</span>' : '')
+      + (log.tag ? `<span class="native-log-tag">${esc(log.tag)}</span>` : '')
+      + `<span class="native-log-preview">${esc((log.message || '').split('\\n')[0].slice(0, 200))}</span>`;
+    row.appendChild(header);
+
+    if (isExpandable) {
+      const fullMsg = document.createElement('div');
+      fullMsg.className = 'native-log-full';
+      fullMsg.style.display = 'none';
+      fullMsg.textContent = log.message || '';
+      row.appendChild(fullMsg);
+
+      header.style.cursor = 'pointer';
+      header.addEventListener('click', () => {
+        const open = fullMsg.style.display !== 'none';
+        fullMsg.style.display = open ? 'none' : 'block';
+        row.classList.toggle('expanded', !open);
+      });
+    }
+
+    row.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      const items = [
+        { label: 'Copy Message', action: () => navigator.clipboard.writeText(log.message || '') },
+        { label: 'Copy Raw Line', action: () => navigator.clipboard.writeText(log.raw || log.message || '') },
+      ];
+      if (log.tag) items.push({ label: `Copy Tag (${log.tag})`, action: () => navigator.clipboard.writeText(log.tag) });
+      if (log.firebaseEvent) items.push({ label: `Copy Event: ${log.firebaseEvent.eventName}`, action: () => navigator.clipboard.writeText(log.firebaseEvent.eventName) });
+      showContextMenu(e, items);
+    });
+
+    list.appendChild(row);
+  }
 
   // Cap DOM rows
   while (list.children.length > 1000) list.firstChild.remove();

package/panels/network.js

@@ -918,6 +918,28 @@ function renderNetDetailContent(r) {
     } else {
       body.innerHTML = renderJSON(r.responseBody);
     }
+    // Right-click to copy response object
+    body.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      const sel = window.getSelection();
+      const items = [];
+      if (sel && sel.toString().length > 0) {
+        items.push({ label: 'Copy Selection', action: () => navigator.clipboard.writeText(sel.toString()) });
+      }
+      items.push({ label: 'Copy Response Object', action: () => {
+        try {
+          const data = typeof r.responseBody === 'string' ? JSON.parse(r.responseBody) : r.responseBody;
+          navigator.clipboard.writeText(JSON.stringify(_sortKeys(data), null, 2));
+        } catch { navigator.clipboard.writeText(safeStr(r.responseBody)); }
+      }});
+      items.push({ label: 'Copy Response (minified)', action: () => {
+        try {
+          const data = typeof r.responseBody === 'string' ? JSON.parse(r.responseBody) : r.responseBody;
+          navigator.clipboard.writeText(JSON.stringify(_sortKeys(data)));
+        } catch { navigator.clipboard.writeText(safeStr(r.responseBody)); }
+      }});
+      showContextMenu(e, items);
+    });
   }
 }
 
@@ -944,7 +966,7 @@ function showNetContextMenu(e, r) {
 
 function showPreviewCopyMenu(e, fullData) {
   const items = [
-    { label: 'Copy Object', action: () => navigator.clipboard.writeText(JSON.stringify(fullData, null, 2)) },
+    { label: 'Copy Object', action: () => navigator.clipboard.writeText(JSON.stringify(_sortKeys(fullData), null, 2)) },
   ];
   const sel = window.getSelection();
   if (sel && sel.toString().length > 0) {

package/panels/redux.js

@@ -82,7 +82,7 @@ function _findLeafChanges(oldVal, newVal, basePath, maxDepth) {
       changes.push({ path, oldVal: a, newVal: b });
       return;
     }
-    const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    const allKeys = [...new Set([...Object.keys(a), ...Object.keys(b)])].sort();
     allKeys.forEach(k => {
       if (!_deepEqual(a[k], b[k])) {
         const childPath = path ? `${path}.${k}` : k;
@@ -169,7 +169,7 @@ function _createHighlightedTree(key, val, changedPaths, currentPath, isOld) {
   function populate() {
     if (populated) return;
     populated = true;
-    const entries = isArray ? val.map((v, i) => [i, v]) : Object.entries(val);
+    const entries = isArray ? val.map((v, i) => [i, v]) : Object.entries(val).sort((a, b) => String(a[0]).localeCompare(String(b[0])));
     entries.forEach(([k, v]) => {
       children.appendChild(_createHighlightedTree(k, v, changedPaths, myPath, isOld));
     });
@@ -197,7 +197,7 @@ function handleReduxEvent(event) {
   const prevState = state.redux.states.length > 0 ? state.redux.states[state.redux.states.length - 1] : null;
   const changedKeys = [];
   if (prevState && nextState && typeof prevState === 'object' && typeof nextState === 'object') {
-    const allKeys = new Set([...Object.keys(prevState), ...Object.keys(nextState)]);
+    const allKeys = [...new Set([...Object.keys(prevState), ...Object.keys(nextState)])].sort();
     allKeys.forEach(k => { if (!_deepEqual(prevState[k], nextState[k])) changedKeys.push(k); });
   }
 

package/styles.css

@@ -1799,6 +1799,78 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 .native-fatal { background: rgba(255,94,114,.08); }
 .native-fatal .native-log-msg { color: var(--red); font-weight: 700; }
 
+/* Firebase event cards (GA4-style in Native Logs) */
+.native-firebase-badge {
+  display: inline-block;
+  background: rgba(255,196,0,.15);
+  color: #ffa500;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-right: 4px;
+  text-transform: uppercase;
+}
+.native-firebase { border-left: 2px solid #ffa500; }
+.native-firebase-card {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  border-left: 3px solid #ffa500;
+  transition: background 0.12s;
+}
+.native-firebase-card:hover { background: var(--bg3); }
+.native-firebase-card.expanded { background: var(--bg3); }
+.native-firebase-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+}
+.native-firebase-event {
+  font-weight: 700;
+  color: var(--accent);
+  font-size: 12px;
+}
+.native-firebase-source {
+  font-size: 9px;
+  color: var(--text-dim);
+  background: var(--bg3);
+  padding: 1px 5px;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+.native-firebase-time {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+}
+.native-firebase-params {
+  margin-top: 6px;
+  padding: 6px 8px;
+  background: var(--bg2);
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+.native-firebase-param {
+  display: flex;
+  gap: 8px;
+  padding: 2px 0;
+  font-size: 10px;
+  border-bottom: 1px solid var(--border);
+}
+.native-firebase-param:last-child { border-bottom: none; }
+.native-firebase-param-key {
+  color: var(--accent);
+  font-weight: 600;
+  min-width: 120px;
+  flex-shrink: 0;
+}
+.native-firebase-param-val {
+  color: var(--text-mid);
+  word-break: break-all;
+}
+
 /* ── Detail Panel Search ───────────────────────────────────────────────────── */
 .detail-search-wrap { display: flex; align-items: center; gap: 4px; margin-left: auto; padding: 0 6px; }
 .detail-search-input { width: 150px; font-size: 10px; padding: 3px 6px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); border-radius: 3px; outline: none; }