reactoradar 1.5.7 → 1.5.9

package/app.js

@@ -67,7 +67,7 @@ function renderJSON(val) {
   try {
     const str = typeof val === 'string' ? val : JSON.stringify(val, null, 2);
     return syntaxHighlight(esc(str));
-  } catch { return esc(String(val)); }
+  } catch { return esc(typeof val === 'object' ? JSON.stringify(val) : String(val)); }
 }
 
 function tryURL(url) { try { return new URL(url); } catch { return null; } }
@@ -239,7 +239,7 @@ if (window.electronAPI) {
   window.electronAPI.on('clear-all-ui', clearAll);
 
   // Cmd+F — focus the search input for the active panel
-  window.electronAPI.on('focus-search', () => {
+  function _handleFind() {
     const searchMap = {
       console: 'consoleSearch',
       network: 'netSearchInput',
@@ -257,6 +257,14 @@ if (window.electronAPI) {
       const bar = $('consoleFindBar');
       if (bar) { bar.style.display = 'flex'; $('consoleFindInput')?.focus(); }
     }
+  }
+  window.electronAPI.on('focus-search', _handleFind);
+  // Direct keyboard fallback — Electron menu accelerators can miss in some contexts
+  document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
+      e.preventDefault();
+      _handleFind();
+    }
   });
 
   window.electronAPI.on('app-version', (version) => {
@@ -373,7 +381,7 @@ function initConsolePanel() {
       <div class="empty-state" id="consoleEmpty">
         <div class="icon">⬛</div>
         <div class="label">No logs yet</div>
-        <div class="hint">Add RNDebugSDK.js to your app</div>
+        <div class="hint">Logs will appear here automatically</div>
       </div>
     </div>
     <div class="console-find-bar" id="consoleFindBar" style="display:none">
@@ -519,23 +527,29 @@ function flushConsoleBatch() {
   let added = 0;
 
   batch.forEach(l => {
-    if (levelFilters && !levelFilters[l.level]) return;
+    // Redux logs use showRedux flag; regular logs use levelFilters
+    if (l.level === 'redux') {
+      if (!state.console.showRedux) return;
+    } else if (levelFilters && !levelFilters[l.level]) return;
     if (searchFilter && !l.message?.toLowerCase().includes(searchFilter)) return;
     frag.appendChild(buildLogRow(l));
     added++;
   });
 
   if (added > 0) {
-    empty.style.display = 'none';
+    // Hide empty state as soon as we have visible rows
+    if (empty) empty.style.display = 'none';
+    // Auto-scroll only if user is already near the bottom (within 150px)
+    const wasAtBottom = (list.scrollHeight - list.scrollTop - list.clientHeight) < 150;
     list.appendChild(frag);
-    // Keep DOM size manageable — remove oldest rows if over 500
+    // Keep DOM size manageable — remove oldest rows if over limit
     const rows = list.querySelectorAll('.log-row');
-    const MAX_DOM_ROWS = 500;
+    const MAX_DOM_ROWS = 5000;
     if (rows.length > MAX_DOM_ROWS) {
       const toRemove = rows.length - MAX_DOM_ROWS;
       for (let i = 0; i < toRemove; i++) rows[i].remove();
     }
-    list.scrollTop = list.scrollHeight;
+    if (wasAtBottom) list.scrollTop = list.scrollHeight;
   }
 }
 
@@ -682,6 +696,14 @@ function createTreeNode(key, val, startCollapsed) {
   return container;
 }
 
+function _safeStr(val) {
+  if (val === null) return 'null';
+  if (val === undefined) return 'undefined';
+  if (typeof val === 'string') return val;
+  if (typeof val === 'number' || typeof val === 'boolean') return String(val);
+  try { return JSON.stringify(val, null, 2); } catch { return String(val); }
+}
+
 function createPrimitiveSpan(val) {
   const s = document.createElement('span');
   if (val === null) { s.className = 'ov-null'; s.textContent = 'null'; }
@@ -689,7 +711,7 @@ function createPrimitiveSpan(val) {
   else if (typeof val === 'string') { s.className = 'ov-str'; s.textContent = `"${val}"`; }
   else if (typeof val === 'number') { s.className = 'ov-num'; s.textContent = String(val); }
   else if (typeof val === 'boolean') { s.className = 'ov-bool'; s.textContent = String(val); }
-  else { s.textContent = String(val); }
+  else { s.textContent = _safeStr(val); }
   return s;
 }
 
@@ -699,7 +721,7 @@ function renderConsoleArg(arg) {
     // Backward compat: raw string
     const s = document.createElement('span');
     s.className = 'ov-str';
-    s.textContent = String(arg);
+    s.textContent = _safeStr(arg);
     return s;
   }
   const { t, v } = arg;
@@ -717,7 +739,7 @@ function renderConsoleArg(arg) {
     return createTreeNode(null, v, false);
   }
   const s = document.createElement('span');
-  s.textContent = String(v);
+  s.textContent = _safeStr(v);
   return s;
 }
 
@@ -912,16 +934,31 @@ function renderConsole() {
 
   const { levelFilters, searchFilter } = state.console;
   const visible = state.console.logs.filter(l => {
-    if (levelFilters && !levelFilters[l.level]) return false;
+    // Redux logs use showRedux flag; regular logs use levelFilters
+    if (l.level === 'redux') {
+      if (!state.console.showRedux) return false;
+    } else if (levelFilters && !levelFilters[l.level]) return false;
     if (searchFilter && !l.message?.toLowerCase().includes(searchFilter)) return false;
     return true;
   });
 
   list.querySelectorAll('.log-row').forEach(e => e.remove());
-  empty.style.display = visible.length ? 'none' : 'flex';
+  if (visible.length > 0) {
+    empty.style.display = 'none';
+  } else if (state.console.logs.length > 0) {
+    // Logs exist but are all filtered out
+    empty.querySelector('.label').textContent = 'No matching logs';
+    empty.querySelector('.hint').textContent = 'Adjust level filters or clear search to see logs';
+    empty.style.display = 'flex';
+  } else {
+    // No logs at all
+    empty.querySelector('.label').textContent = 'No logs yet';
+    empty.querySelector('.hint').textContent = 'Logs will appear here automatically';
+    empty.style.display = 'flex';
+  }
 
-  // Render only the last 500 visible rows for performance
-  const MAX_RENDER = 500;
+  // Render only the last N visible rows for performance
+  const MAX_RENDER = 5000;
   const toRender = visible.length > MAX_RENDER ? visible.slice(-MAX_RENDER) : visible;
   if (visible.length > MAX_RENDER) {
     const info = document.createElement('div');
@@ -1919,6 +1956,130 @@ function _deepEqual(a, b) {
   } catch { return false; }
 }
 
+// Find leaf-level changes between two values (for Redux store diff)
+function _findLeafChanges(oldVal, newVal, basePath, maxDepth) {
+  const changes = [];
+  if (maxDepth === undefined) maxDepth = 5;
+
+  function walk(a, b, path, depth) {
+    if (depth > maxDepth) {
+      if (!_deepEqual(a, b)) changes.push({ path, oldVal: a, newVal: b });
+      return;
+    }
+    if (a === b) return;
+    if (a == null || b == null || typeof a !== 'object' || typeof b !== 'object' || Array.isArray(a) !== Array.isArray(b)) {
+      changes.push({ path, oldVal: a, newVal: b });
+      return;
+    }
+    const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    allKeys.forEach(k => {
+      if (!_deepEqual(a[k], b[k])) {
+        const childPath = path ? `${path}.${k}` : k;
+        if (a[k] != null && b[k] != null && typeof a[k] === 'object' && typeof b[k] === 'object' && !Array.isArray(a[k])) {
+          walk(a[k], b[k], childPath, depth + 1);
+        } else {
+          changes.push({ path: childPath, oldVal: a[k], newVal: b[k] });
+        }
+      }
+    });
+  }
+
+  walk(oldVal, newVal, '', 0);
+  return changes;
+}
+
+// Create a tree node with changed paths highlighted in a different color
+function _createHighlightedTree(key, val, changedPaths, currentPath, isOld) {
+  const isArray = Array.isArray(val);
+  const isObj = val !== null && typeof val === 'object';
+  const myPath = key !== null ? (currentPath ? `${currentPath}.${key}` : String(key)) : currentPath;
+  const isChanged = changedPaths.has(myPath);
+
+  if (!isObj) {
+    // Leaf value
+    const row = document.createElement('div');
+    row.className = 'ov-leaf' + (isChanged ? ' rdx-highlight' : '');
+    if (isChanged) row.style.cssText = isOld
+      ? 'background:rgba(255,94,114,.12);border-radius:3px;padding:1px 4px;'
+      : 'background:rgba(61,214,140,.12);border-radius:3px;padding:1px 4px;';
+    if (key !== null) {
+      const k = document.createElement('span');
+      k.className = 'ov-key';
+      k.style.color = isChanged ? (isOld ? 'var(--red)' : 'var(--green)') : '';
+      k.textContent = `${key}: `;
+      row.appendChild(k);
+    }
+    const v = document.createElement('span');
+    v.className = 'ov-prim';
+    if (isChanged) v.style.fontWeight = '700';
+    if (val === null) { v.textContent = 'null'; v.style.color = isChanged ? (isOld ? 'var(--red)' : 'var(--green)') : 'var(--text-dim)'; }
+    else if (typeof val === 'string') { v.textContent = `"${val}"`; v.style.color = isChanged ? (isOld ? 'var(--red)' : 'var(--green)') : 'var(--green)'; }
+    else if (typeof val === 'number') { v.textContent = String(val); v.style.color = isChanged ? (isOld ? 'var(--red)' : 'var(--green)') : 'var(--accent2)'; }
+    else if (typeof val === 'boolean') { v.textContent = String(val); v.style.color = isChanged ? (isOld ? 'var(--red)' : 'var(--green)') : 'var(--accent2)'; }
+    else { v.textContent = _safeStr(val); }
+    row.appendChild(v);
+    return row;
+  }
+
+  // Object/Array — check if any descendants changed
+  const hasChangedDescendant = [...changedPaths].some(p => p === myPath || p.startsWith(myPath ? myPath + '.' : ''));
+  const container = document.createElement('div');
+  container.className = 'ov-node';
+
+  const header = document.createElement('div');
+  header.className = 'ov-header';
+
+  const arrow = document.createElement('span');
+  arrow.className = 'ov-arrow';
+  arrow.textContent = '\u25B6';
+  header.appendChild(arrow);
+
+  if (key !== null) {
+    const k = document.createElement('span');
+    k.className = 'ov-key';
+    if (hasChangedDescendant) k.style.color = isOld ? 'var(--red)' : 'var(--green)';
+    k.textContent = `${key}: `;
+    header.appendChild(k);
+  }
+
+  const preview = document.createElement('span');
+  preview.className = 'ov-preview';
+  preview.textContent = isArray ? `Array(${val.length})` : `{${Object.keys(val).length} keys}`;
+  header.appendChild(preview);
+
+  container.appendChild(header);
+
+  const children = document.createElement('div');
+  children.className = 'ov-children';
+  // Auto-expand if this node has changed descendants, otherwise collapse
+  children.style.display = hasChangedDescendant ? 'block' : 'none';
+  if (hasChangedDescendant) { arrow.textContent = '\u25BC'; arrow.classList.add('open'); }
+
+  let populated = false;
+  function populate() {
+    if (populated) return;
+    populated = true;
+    const entries = isArray ? val.map((v, i) => [i, v]) : Object.entries(val);
+    entries.forEach(([k, v]) => {
+      children.appendChild(_createHighlightedTree(k, v, changedPaths, myPath, isOld));
+    });
+  }
+
+  // Populate immediately if expanded, otherwise lazy
+  if (hasChangedDescendant) populate();
+
+  header.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const open = children.style.display !== 'none';
+    children.style.display = open ? 'none' : 'block';
+    arrow.textContent = open ? '\u25B6' : '\u25BC';
+    if (!open) populate();
+  });
+
+  container.appendChild(children);
+  return container;
+}
+
 function handleReduxEvent(event) {
   if (event.type !== 'redux') return;
   const { action, nextState } = event;
@@ -1934,12 +2095,12 @@ function handleReduxEvent(event) {
   const actionEntry = { type: action?.type || '?', payload: action, ts: event.ts, index: idx, changedKeys };
   state.redux.actions.push(actionEntry);
   state.redux.states.push(nextState);
-  state.redux.selected = idx;
+  // Don't auto-select — keep all collapsed until user clicks
   $('rBadge').textContent = state.redux.actions.length;
   renderRedux();
 
-  // Also add to console logs if Redux is enabled in console dropdown
-  if (state.console.showRedux) {
+  // Always add Redux actions to console logs — visibility controlled by showRedux filter
+  {
     const msg = `[Redux] ${actionEntry.type}` + (changedKeys.length ? ` (changed: ${changedKeys.join(', ')})` : '');
     addConsoleLog({
       level: 'redux',
@@ -1951,6 +2112,29 @@ function handleReduxEvent(event) {
   }
 }
 
+// Assign a consistent color to each Redux action category (e.g. ANALYTICS, CART, USER)
+const _reduxCatColors = {};
+const _reduxColorPalette = [
+  'var(--accent)',   // blue
+  'var(--green)',    // green
+  'var(--orange)',   // orange
+  'var(--accent2)',  // purple
+  '#e06c75',        // coral
+  '#56b6c2',        // teal
+  '#c678dd',        // magenta
+  '#d19a66',        // gold
+  '#98c379',        // lime
+  '#e5c07b',        // yellow
+];
+let _reduxColorIdx = 0;
+function _reduxCategoryColor(category) {
+  if (!_reduxCatColors[category]) {
+    _reduxCatColors[category] = _reduxColorPalette[_reduxColorIdx % _reduxColorPalette.length];
+    _reduxColorIdx++;
+  }
+  return _reduxCatColors[category];
+}
+
 function renderRedux() {
   const content = $('reduxContent');
   const empty = $('reduxEmpty');
@@ -1965,28 +2149,49 @@ function renderRedux() {
   if (!visible.length) return;
 
   const ttLabel = $('ttLabel');
-  if (ttLabel) ttLabel.textContent = `${selected + 1}/${actions.length}`;
+  if (ttLabel) ttLabel.textContent = selected >= 0 ? `${selected + 1}/${actions.length}` : `—/${actions.length}`;
 
   const frag = document.createDocumentFragment();
   visible.forEach(a => {
     const isSelected = a.index === selected;
-    const isPrev = a.index === selected - 1;
-    const isNext = a.index === selected + 1;
 
     const entry = document.createElement('div');
-    entry.className = 'rdx-entry' + (isSelected ? ' selected' : '') + (isPrev ? ' is-prev' : '') + (isNext ? ' is-next' : '');
+    entry.className = 'rdx-entry' + (isSelected ? ' selected' : '');
 
     // Row header — always visible
     const header = document.createElement('div');
     header.className = 'rdx-entry-header';
-    const changesBadge = a.changedKeys?.length ? `<span class="rdx-changes">${a.changedKeys.length}</span>` : '';
-    const roleTag = isPrev ? '<span class="rdx-role prev">PREV</span>' : isNext ? '<span class="rdx-role next">NEXT</span>' : isSelected ? '<span class="rdx-role current">CURRENT</span>' : '';
-    header.innerHTML = `<span class="rdx-index">#${a.index}</span>${roleTag}<span class="rdx-type">${esc(a.type)}</span>${changesBadge}<span class="rdx-time">${ts(a.ts)}</span>`;
-    header.addEventListener('click', () => { state.redux.selected = a.index; renderRedux(); });
+    const changesBadge = a.changedKeys?.length ? `<span class="rdx-changes">${a.changedKeys.length} changed</span>` : '';
+    // Color-code action type by category prefix (e.g. ANALYTICS/, CART/, USER/)
+    const typeParts = a.type.split('/');
+    let typeHtml;
+    if (typeParts.length >= 2) {
+      const catColor = _reduxCategoryColor(typeParts[0]);
+      typeHtml = `<span class="rdx-type-cat" style="color:${catColor}">${esc(typeParts[0])}/</span><span class="rdx-type-name">${esc(typeParts.slice(1).join('/'))}</span>`;
+    } else {
+      typeHtml = `<span class="rdx-type">${esc(a.type)}</span>`;
+    }
+    header.innerHTML = `<span class="rdx-index">#${a.index}</span>${typeHtml}${changesBadge}<span class="rdx-time">${ts(a.ts)}</span>`;
+    // Toggle: click to expand, click again to collapse
+    header.addEventListener('click', () => {
+      state.redux.selected = isSelected ? -1 : a.index;
+      renderRedux();
+    });
+    // Right-click to copy action type
+    header.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      showContextMenu(e, [
+        { label: 'Copy Action Type', action: () => navigator.clipboard.writeText(a.type) },
+        { label: 'Copy Action Payload', action: () => navigator.clipboard.writeText(JSON.stringify(a.payload, null, 2)) },
+      ]);
+    });
+    // Allow text selection on the action type
+    header.style.userSelect = 'text';
     entry.appendChild(header);
 
-    // Expanded detail for selected / prev / next
-    if (isSelected || isPrev || isNext) {
+    // Expanded detail — only for explicitly selected action
+    if (isSelected) {
       const detail = document.createElement('div');
       detail.className = 'rdx-entry-detail';
 
@@ -2003,46 +2208,58 @@ function renderRedux() {
       if (a.payload) {
         const pLabel = document.createElement('div');
         pLabel.className = 'redux-section-title';
-        pLabel.textContent = 'Payload';
+        pLabel.textContent = 'Action Payload';
         detail.appendChild(pLabel);
-        detail.appendChild(createTreeNode(null, a.payload, !isSelected));
+        detail.appendChild(createTreeNode(null, a.payload, false));
       }
 
-      // Store changes (only for selected)
-      if (isSelected) {
-        const prevS = a.index > 0 ? states[a.index - 1] : null;
-        const currS = states[a.index];
-        if (currS && typeof currS === 'object' && a.changedKeys?.length > 0) {
-          const sLabel = document.createElement('div');
-          sLabel.className = 'redux-section-title';
-          sLabel.textContent = 'Store Changes';
-          detail.appendChild(sLabel);
-
-          a.changedKeys.forEach(key => {
-            const keyWrap = document.createElement('div');
-            keyWrap.className = 'rdx-store-diff';
-            const kLabel = document.createElement('div');
-            kLabel.className = 'rdx-store-key-label';
-            kLabel.textContent = key;
-            keyWrap.appendChild(kLabel);
-
-            if (prevS && prevS[key] !== undefined) {
-              const prevRow = document.createElement('div');
-              prevRow.className = 'rdx-diff-row removed';
-              prevRow.innerHTML = '<span class="rdx-diff-sign">-</span>';
-              prevRow.appendChild(createTreeNode(null, prevS[key], true));
-              keyWrap.appendChild(prevRow);
-            }
-            if (currS[key] !== undefined) {
-              const newRow = document.createElement('div');
-              newRow.className = 'rdx-diff-row added';
-              newRow.innerHTML = '<span class="rdx-diff-sign">+</span>';
-              newRow.appendChild(createTreeNode(null, currS[key], true));
-              keyWrap.appendChild(newRow);
-            }
-            detail.appendChild(keyWrap);
-          });
-        }
+      // Store changes — show full Previous and Current state for each changed key
+      // with changed sub-keys highlighted
+      const prevS = a.index > 0 ? states[a.index - 1] : null;
+      const currS = states[a.index];
+      if (currS && typeof currS === 'object' && a.changedKeys?.length > 0) {
+        a.changedKeys.forEach(key => {
+          const keyWrap = document.createElement('div');
+          keyWrap.className = 'rdx-store-diff';
+
+          const kLabel = document.createElement('div');
+          kLabel.className = 'rdx-store-key-label';
+          kLabel.textContent = key;
+          keyWrap.appendChild(kLabel);
+
+          const oldVal = prevS ? prevS[key] : undefined;
+          const newVal = currS[key];
+
+          // Find which sub-keys changed (for highlighting)
+          const changedPaths = new Set();
+          _findLeafChanges(oldVal, newVal, '').forEach(c => changedPaths.add(c.path));
+
+          // Previous state
+          if (oldVal !== undefined) {
+            const prevLabel = document.createElement('div');
+            prevLabel.className = 'rdx-state-label prev';
+            prevLabel.textContent = '- Previous';
+            keyWrap.appendChild(prevLabel);
+            const prevTree = document.createElement('div');
+            prevTree.className = 'rdx-state-tree prev';
+            prevTree.appendChild(_createHighlightedTree(null, oldVal, changedPaths, '', true));
+            keyWrap.appendChild(prevTree);
+          }
+
+          // Current state
+          if (newVal !== undefined) {
+            const currLabel = document.createElement('div');
+            currLabel.className = 'rdx-state-label curr';
+            currLabel.textContent = '+ Current';
+            keyWrap.appendChild(currLabel);
+            const currTree = document.createElement('div');
+            currTree.className = 'rdx-state-tree curr';
+            currTree.appendChild(_createHighlightedTree(null, newVal, changedPaths, '', false));
+            keyWrap.appendChild(currTree);
+          }
+
+          detail.appendChild(keyWrap);
+        });
       }
 
       entry.appendChild(detail);
@@ -2052,12 +2269,10 @@ function renderRedux() {
   });
 
   content.appendChild(frag);
-  // Auto-scroll: if asc (latest at bottom), scroll to bottom; otherwise scroll selected into view
-  if (state.redux.sortDir === 'asc') {
-    content.scrollTop = content.scrollHeight;
-  } else {
-    const selEl = content.querySelector('.rdx-entry.selected');
-    if (selEl) selEl.scrollIntoView({ block: 'nearest' });
+  // Scroll selected entry into view
+  const selEl = content.querySelector('.rdx-entry.selected');
+  if (selEl) {
+    selEl.scrollIntoView({ block: 'nearest', behavior: 'auto' });
   }
 }
 

package/bin/setup.js

@@ -116,8 +116,14 @@ function findEntryFile(projectDir) {
 
 // ─── Find Redux store file ───────────────────────────────────────────────────
 function findStoreFile(projectDir) {
-  const searchDirs = ['src', 'app', 'store', 'redux', 'src/store', 'src/redux', 'app/store', 'app/redux', 'src/app/store'];
-  const storeNames = ['store.ts', 'store.js', 'store.tsx', 'index.ts', 'index.js'];
+  const searchDirs = [
+    'src', 'app', 'store', 'redux', 'state',
+    'src/store', 'src/redux', 'src/state', 'src/app', 'src/app/store',
+    'app/store', 'app/redux', 'app/state',
+    'src/features', 'src/lib', 'src/config', 'src/core',
+    'src/services', 'src/utils',
+  ];
+  const storeNames = ['store.ts', 'store.js', 'store.tsx', 'store.jsx', 'index.ts', 'index.js', 'index.tsx'];
 
   for (const dir of searchDirs) {
     for (const name of storeNames) {
@@ -130,7 +136,31 @@ function findStoreFile(projectDir) {
       }
     }
   }
-  return null;
+
+  // Deep search: recursively find any file with configureStore/createStore
+  try {
+    const glob = (dir, depth) => {
+      if (depth > 4) return null;
+      let entries;
+      try { entries = fs.readdirSync(path.join(projectDir, dir), { withFileTypes: true }); } catch { return null; }
+      for (const e of entries) {
+        if (e.name === 'node_modules' || e.name.startsWith('.')) continue;
+        const rel = path.join(dir, e.name);
+        if (e.isFile() && /\.(ts|js|tsx|jsx)$/.test(e.name) && /store/i.test(e.name)) {
+          const content = fs.readFileSync(path.join(projectDir, rel), 'utf8');
+          if (content.includes('configureStore') || content.includes('createStore')) {
+            return rel;
+          }
+        }
+        if (e.isDirectory()) {
+          const found = glob(rel, depth + 1);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+    return glob('src', 0) || glob('app', 0) || glob('.', 1);
+  } catch { return null; }
 }
 
 // ─── Install ─────────────────────────────────────────────────────────────────

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "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/sdk/RNDebugSDK.js

@@ -50,16 +50,17 @@ let _debuggerDetected = false;
 let _debuggerCheckInterval = null;
 
 function _checkDebuggerAttached() {
-  // Method 1: Check if Hermes debugger globals are set
+  // Method 1: Check if Hermes debugger globals are set (only when actively connected)
   const hermesDebugger = !!(global.__DEBUGGER_CONNECTED__ || global.__HERMES_DEBUGGER_CONNECTED__);
-  // Method 2: Check React DevTools hook for debugger attachment
+  // Method 2: Check React DevTools hook for active debugger session
   const rdtHook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
   const rdtDebugger = !!(rdtHook && rdtHook._debuggerAttached);
-  // Method 3: Check if CDP is connected via the inspector agent
-  const inspectorConnected = !!(global.__inspectorGlobalObject || global.__inspector);
+  // Note: global.__inspector and global.__inspectorGlobalObject are always present
+  // on Hermes as part of the built-in inspector infrastructure. They do NOT indicate
+  // that a debugger is actively connected. Only check explicit connection flags.
 
   const wasDetected = _debuggerDetected;
-  _debuggerDetected = hermesDebugger || rdtDebugger || inspectorConnected;
+  _debuggerDetected = hermesDebugger || rdtDebugger;
 
   if (_debuggerDetected && !wasDetected) {
     _console.log('[RNDebugSDK] Debugger detected — SDK interception paused to avoid inspector conflicts. Use the ReactoRadar app to resume.');

package/styles.css

@@ -963,6 +963,18 @@ body {
 .rdx-diff-row { display: flex; align-items: flex-start; gap: 6px; padding: 2px 6px; border-radius: 3px; margin: 2px 0; }
 .rdx-diff-row.removed { background: rgba(255,94,114,.06); }
 .rdx-diff-row.added { background: rgba(61,214,140,.06); }
+.rdx-diff-leaf { display: flex; align-items: baseline; gap: 6px; padding: 3px 8px; margin: 2px 0; font-size: 11px; border-radius: 3px; background: var(--bg3); flex-wrap: wrap; }
+.rdx-diff-path { color: var(--accent); font-weight: 600; font-size: 10px; min-width: 60px; }
+.rdx-diff-old { color: var(--red); text-decoration: line-through; opacity: 0.8; word-break: break-all; }
+.rdx-diff-arrow { color: var(--text-dim); font-size: 10px; flex-shrink: 0; }
+.rdx-diff-new { color: var(--green); font-weight: 600; word-break: break-all; }
+.rdx-state-label { font-size: 10px; font-weight: 700; padding: 4px 8px 2px; margin-top: 4px; letter-spacing: 0.5px; }
+.rdx-state-label.prev { color: var(--red); }
+.rdx-state-label.curr { color: var(--green); }
+.rdx-state-tree { padding: 2px 0 4px 4px; border-left: 2px solid var(--border); margin-left: 4px; }
+.rdx-state-tree.prev { border-left-color: rgba(255,94,114,.3); }
+.rdx-state-tree.curr { border-left-color: rgba(61,214,140,.3); }
+.rdx-highlight { font-weight: 600; }
 .rdx-diff-sign { font-weight: 700; font-size: 11px; flex-shrink: 0; width: 14px; text-align: center; }
 .rdx-diff-row.removed .rdx-diff-sign { color: var(--red); }
 .rdx-diff-row.added .rdx-diff-sign { color: var(--green); }