reactoradar 1.5.2 → 1.5.4

package/app.js

@@ -205,15 +205,19 @@ if (window.electronAPI) {
   window.electronAPI.on('ports', ports => { state.ports = ports; });
 
   window.electronAPI.on('cdp-targets', targets => {
-    const hasCDP = targets?.length > 0;
-    $('btnCDP').textContent = hasCDP
-      ? `JS Debugger (${targets.length}) ↗`
-      : 'JS Debugger ↗';
-    $('btnCDP').style.opacity = hasCDP ? '1' : '0.5';
-    if (hasCDP) {
-      $('btnCDP').onclick = () => window.electronAPI.openCDPTarget(targets[0].webSocketDebuggerUrl);
+    state.cdpTargets = targets;
+    const btn = $('btnCDP');
+    if (btn) {
+      const hasCDP = targets?.length > 0;
+      const port = state.ports?.METRO || getStoredMetroPort();
+      btn.textContent = hasCDP
+        ? `JS Debugger (:${port}) [${targets.length}] ↗`
+        : `JS Debugger (:${port}) ↗`;
+      btn.style.opacity = hasCDP ? '1' : '0.5';
+      if (hasCDP) {
+        btn.onclick = () => window.electronAPI.openCDPTarget(targets[0].webSocketDebuggerUrl);
+      }
     }
-
   });
 
   window.electronAPI.on('redux-event', handleReduxEvent);
@@ -264,21 +268,7 @@ if (window.electronAPI) {
   window.electronAPI.on('update-available', ({ current, latest }) => {
     // Show in settings only, not as a banner
     state._updateAvailable = { current, latest };
-    const el = $('aboutVersion');
-    if (el) el.innerHTML = `v${current} <span style="color:var(--green);font-size:10px;margin-left:6px">v${latest} available</span>`;
-    // Add update button in settings if not already there
-    if (!$('updateBtn')) {
-      const aboutEl = document.querySelector('.settings-about');
-      if (aboutEl) {
-        const btn = document.createElement('div');
-        btn.style.cssText = 'margin-top:10px';
-        btn.innerHTML = '<button id="updateBtn" class="tb-btn primary" style="font-size:11px">Download v' + latest + '</button>';
-        aboutEl.appendChild(btn);
-        $('updateBtn')?.addEventListener('click', () => {
-          window.electronAPI?.openExternal('https://github.com/sharanagouda/react-native-debugger/releases');
-        });
-      }
-    }
+    _applyUpdateBanner();
   });
 
   window.electronAPI.on('trigger-open-cdp', () => {
@@ -295,6 +285,31 @@ if (window.electronAPI) {
 }
 
 // ─── Device Connection Status (inline in titlebar) ───────────────────────────
+// Reusable — called from IPC handler AND from initSettingsPanel
+function _applyUpdateBanner() {
+  const info = state._updateAvailable;
+  if (!info) return;
+  const { current, latest } = info;
+  const el = $('aboutVersion');
+  if (el && !el.dataset.updateApplied) {
+    el.innerHTML = `v${current} <span style="color:var(--green);font-size:10px;margin-left:6px">v${latest} available</span>`;
+    el.dataset.updateApplied = '1';
+  }
+  // Add update button in settings if not already there
+  if (!$('updateBtn')) {
+    const aboutEl = document.querySelector('.settings-about');
+    if (aboutEl) {
+      const btn = document.createElement('div');
+      btn.style.cssText = 'margin-top:10px';
+      btn.innerHTML = '<button id="updateBtn" class="tb-btn primary" style="font-size:11px;padding:6px 16px">Download v' + latest + '</button>';
+      aboutEl.appendChild(btn);
+      $('updateBtn')?.addEventListener('click', () => {
+        window.electronAPI?.openExternal('https://github.com/sharanagouda/react-native-debugger/releases');
+      });
+    }
+  }
+}
+
 function updateDeviceBanner(service, connected) {
   state.connections[service] = connected;
   const el = $('deviceStatus');
@@ -1269,9 +1284,13 @@ function renderNetwork() {
   rows.appendChild(frag);
 }
 
+function _isHttpError(r) {
+  return r.phase === 'error' || (r.status && r.status >= 400);
+}
+
 function buildNetRow(r, wfMin, wfRange) {
   const row = document.createElement('div');
-  row.className = 'net-row' + (r.id === state.network.selectedId ? ' selected' : '') + (r.phase === 'error' ? ' error' : '');
+  row.className = 'net-row' + (r.id === state.network.selectedId ? ' selected' : '') + (_isHttpError(r) ? ' error' : '');
   row.dataset.id = r.id;
 
   const urlObj = tryURL(r.url);
@@ -1287,7 +1306,9 @@ function buildNetRow(r, wfMin, wfRange) {
   const method = r.method || '?';
   const mClass = ['GET','POST','PUT','PATCH','DELETE'].includes(method) ? `m-${method}` : 'm-other';
   const fullPath = urlObj ? urlObj.pathname + urlObj.search : r.url || '';
-  nameCell.innerHTML = `<span class="method-badge ${mClass}">${method}</span> <span class="net-path" title="${esc(r.url)}">${esc(fullPath)}</span><span class="net-host">${esc(host)}</span>`;
+  const isErr = _isHttpError(r);
+  const pathCls = isErr ? ' net-path-error' : '';
+  nameCell.innerHTML = `<span class="method-badge ${mClass}">${method}</span> <span class="net-path${pathCls}" title="${esc(r.url)}">${esc(fullPath)}</span><span class="net-host">${esc(host)}</span>`;
   row.appendChild(nameCell);
 
   // Status
@@ -1297,7 +1318,13 @@ function buildNetRow(r, wfMin, wfRange) {
   statusCell.style.width = NET_COLS[1].width + 'px';
   let statusStr = '...', sCls = 's-pending';
   if (r.phase === 'error') { statusStr = 'ERR'; sCls = 's-err'; }
-  else if (r.status) { statusStr = String(r.status); sCls = `s-${Math.floor(r.status/100)}`; }
+  else if (r.status) {
+    statusStr = String(r.status);
+    const group = Math.floor(r.status / 100);
+    // 1xx info, 2xx success, 3xx redirect, 4xx client error, 5xx server error
+    if (group >= 4) sCls = 's-err';
+    else sCls = `s-${group}`;
+  }
   statusCell.className += ` ${sCls}`;
   statusCell.textContent = statusStr;
   row.appendChild(statusCell);
@@ -1346,6 +1373,7 @@ function buildNetRow(r, wfMin, wfRange) {
     const width = Math.max(2, ((r.duration || 50) / wfRange) * 100);
     let barCls = 'pending';
     if (r.phase === 'error') barCls = 'err';
+    else if (r.status && r.status >= 400) barCls = 'err';
     else if (r.status) barCls = `s${Math.floor(r.status/100)}`;
     wfCell.innerHTML = `<div class="wf-bar ${barCls}" style="left:${left}%;width:${width}%"></div>`;
   }
@@ -1412,8 +1440,12 @@ function renderNetDetailTabs(r) {
 }
 
 function renderNetDetailContent(r) {
-  const body = $('netDetailContent');
+  let body = $('netDetailContent');
   if (!body) return;
+  // Clone-replace to remove all stale event listeners (prevents contextmenu leak)
+  const fresh = body.cloneNode(false);
+  body.parentNode.replaceChild(fresh, body);
+  body = fresh;
   const tab = r._tab || 'headers';
 
   if (tab === 'headers') {
@@ -1432,7 +1464,7 @@ function renderNetDetailContent(r) {
       <div class="kv-grid">
         <span class="kv-key">Request URL</span><span class="kv-val">${esc(r.url)}</span>
         <span class="kv-key">Method</span><span class="kv-val">${esc(r.method)}</span>
-        <span class="kv-key">Status</span><span class="kv-val ${r.status ? 's-' + Math.floor(r.status/100) : 's-pending'}">${r.status || 'Pending'} ${r.statusText || ''}</span>
+        <span class="kv-key">Status</span><span class="kv-val ${r.phase === 'error' ? 's-err' : r.status ? (r.status >= 400 ? 's-err' : 's-' + Math.floor(r.status/100)) : 's-pending'}">${r.phase === 'error' ? (r.status || 'ERR') : (r.status || 'Pending')} ${r.statusText || (r.phase === 'error' ? r.error || 'Network Error' : '')}</span>
       </div>
       ${renderH('Response Headers', rsH)}
       ${renderH('Request Headers', rqH)}`;
@@ -1456,16 +1488,27 @@ function renderNetDetailContent(r) {
       }
     }
   } else if (tab === 'preview') {
-    if (r.phase === 'error') { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
+    const isErrStatus = _isHttpError(r);
+    if (r.phase === 'error' && !r.responseBody) { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
     if (!r.responseBody && r.phase !== 'response') { body.innerHTML = '<span style="color:var(--text-dim)">Pending...</span>'; return; }
     // Render as collapsible JSON tree with right-click copy
     const val = r.responseBody;
     let treeData = val;
     if (typeof val === 'string') {
-      try { treeData = JSON.parse(val); } catch { body.textContent = val; return; }
+      try { treeData = JSON.parse(val); } catch {
+        body.innerHTML = `<span style="color:${isErrStatus ? 'var(--red)' : 'inherit'}">${esc(val)}</span>`;
+        return;
+      }
     }
     if (treeData && typeof treeData === 'object') {
       body.innerHTML = '';
+      // Show error status banner above the response body
+      if (isErrStatus) {
+        const errBanner = document.createElement('div');
+        errBanner.style.cssText = 'color:var(--red);font-weight:600;padding:4px 0 8px;font-size:11px;border-bottom:1px solid rgba(255,94,114,.15);margin-bottom:8px';
+        errBanner.textContent = `${r.status || 'ERR'} ${r.statusText || r.error || 'Error'}`;
+        body.appendChild(errBanner);
+      }
       body.appendChild(createTreeNode(null, treeData, false));
       // Right-click on preview to copy the whole object or clicked node value
       body.addEventListener('contextmenu', (e) => {
@@ -1473,12 +1516,27 @@ function renderNetDetailContent(r) {
         showPreviewCopyMenu(e, treeData);
       });
     } else {
-      body.innerHTML = '<span style="color:var(--text-dim)">No preview available</span>';
+      body.innerHTML = isErrStatus
+        ? `<span style="color:var(--red)">${esc(String(r.responseBody))}</span>`
+        : '<span style="color:var(--text-dim)">No preview available</span>';
     }
   } else if (tab === 'response') {
-    if (r.phase === 'error') { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
+    const isErrStatus = _isHttpError(r);
+    if (r.phase === 'error' && !r.responseBody) { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
     if (!r.responseBody && r.phase !== 'response') { body.innerHTML = '<span style="color:var(--text-dim)">Pending...</span>'; return; }
-    body.innerHTML = renderJSON(r.responseBody);
+    if (isErrStatus) {
+      const errBanner = document.createElement('div');
+      errBanner.style.cssText = 'color:var(--red);font-weight:600;padding:4px 0 8px;font-size:11px;border-bottom:1px solid rgba(255,94,114,.15);margin-bottom:8px';
+      errBanner.textContent = `${r.status || 'ERR'} ${r.statusText || r.error || 'Error'}`;
+      body.innerHTML = '';
+      body.appendChild(errBanner);
+      const raw = document.createElement('div');
+      raw.style.color = 'var(--red)';
+      raw.innerHTML = renderJSON(r.responseBody);
+      body.appendChild(raw);
+    } else {
+      body.innerHTML = renderJSON(r.responseBody);
+    }
   }
 }
 
@@ -2149,9 +2207,9 @@ function initReactPanel() {
       <div class="react-connect-hint" id="reactHint">
         <div class="icon" style="font-size:40px;opacity:.2">⚛️</div>
         <div class="label">React DevTools</div>
-        <div class="hint">Launches as a separate window connected to your app</div>
-        <div class="hint">React Native auto-connects on port <code>8097</code> in dev mode</div>
-        <button class="btn-launch" id="btnReactDT">Open React DevTools ↗</button>
+        <div class="hint">Opens as a separate window connected to your app via port 8097</div>
+        <div class="hint" style="margin-top:8px;color:var(--yellow)">Note: The RN inspector overlay won't work while React DevTools is connected. Close the DevTools window to use the built-in inspector.</div>
+        <button class="btn-launch" id="btnReactDT" style="margin-top:12px">Open React DevTools ↗</button>
       </div>
     </div>`;
 
@@ -2182,6 +2240,12 @@ function getStoredAppName() {
 function setStoredAppName(n) {
   try { localStorage.setItem('rn-debug-appname', n); } catch {}
 }
+function getStoredMetroPort() {
+  try { return parseInt(localStorage.getItem('rn-debug-metro-port')) || 8081; } catch { return 8081; }
+}
+function setStoredMetroPort(p) {
+  try { localStorage.setItem('rn-debug-metro-port', String(p)); } catch {}
+}
 function applyAppName(name) {
   const logo = document.querySelector('.logo');
   if (logo) {
@@ -2280,10 +2344,11 @@ function initSettingsPanel() {
             </div>
           </div>
           <div class="settings-row">
-            <div>
-              <div class="settings-label">Metro Bundler</div>
-              <div class="settings-hint">CDP target discovery on :8081</div>
+            <div style="display:flex;flex-direction:column;gap:2px">
+              <div class="settings-label">Metro Bundler Port</div>
+              <div class="settings-hint">Port for CDP target discovery (default: 8081)</div>
             </div>
+            <input id="metroPortInput" type="number" class="net-search-input" style="width:70px;text-align:center" value="${getStoredMetroPort()}" />
           </div>
         </div>
         <div class="settings-section">
@@ -2334,6 +2399,7 @@ function initSettingsPanel() {
             <div class="about-links" style="display:flex;gap:16px;justify-content:center">
               <span class="about-link" id="linkGithub">GitHub</span>
               <span class="about-link" id="linkDocs">Documentation</span>
+              <span class="about-link" id="linkLinkedIn">Developer LinkedIn</span>
             </div>
           </div>
         </div>
@@ -2383,6 +2449,9 @@ function initSettingsPanel() {
   $('linkDocs')?.addEventListener('click', () => {
     window.electronAPI?.openExternal('https://github.com/sharanagouda/react-native-debugger#readme');
   });
+  $('linkLinkedIn')?.addEventListener('click', () => {
+    window.electronAPI?.openExternal('https://www.linkedin.com/in/sharanagoudamk/');
+  });
 
   // App name
   $('appNameInput').addEventListener('change', (e) => {
@@ -2396,6 +2465,15 @@ function initSettingsPanel() {
     applyAppName('ReactoRadar');
   });
 
+  // Metro Port
+  $('metroPortInput')?.addEventListener('change', (e) => {
+    let port = parseInt(e.target.value.trim());
+    if (isNaN(port) || port < 1024 || port > 65535) port = 8081;
+    e.target.value = port;
+    setStoredMetroPort(port);
+    window.electronAPI?.setMetroPort(port);
+  });
+
   // Font size controls
   $('fontSizeDown').addEventListener('click', () => {
     let size = getStoredFontSize();
@@ -2409,6 +2487,9 @@ function initSettingsPanel() {
     setStoredFontSize(size);
     applyFontSize(size);
   });
+
+  // Apply update banner if update info arrived before settings panel was created
+  _applyUpdateBanner();
 }
 
 // Apply saved theme + font size + app name on load
@@ -2416,6 +2497,9 @@ applyTheme(getStoredTheme());
 applyFontSize(getStoredFontSize());
 applyAppName(getStoredAppName());
 
+// Send stored metro port to backend
+window.electronAPI?.setMetroPort(getStoredMetroPort());
+
 // ─────────────────────────────────────────────────────────────────────────────
 // SOURCES PANEL — CDP-based file browser + breakpoints
 // ─────────────────────────────────────────────────────────────────────────────
@@ -2667,7 +2751,8 @@ async function loadSourceFile(filepath) {
   // Strategy 2: Fetch from Metro
   if (!source) {
     try {
-      const resp = await fetch(`http://localhost:8081/${filepath}?platform=ios&dev=true`);
+      const port = getStoredMetroPort();
+      const resp = await fetch(`http://localhost:${port}/${filepath}?platform=ios&dev=true`);
       if (resp.ok) source = await resp.text();
     } catch {}
   }

package/main.js

@@ -55,7 +55,8 @@ app.whenReady().then(async () => {
   // Check for updates (non-blocking)
   checkForUpdates();
   startBridgeServers();
-  startReactDevToolsServer();
+  // React DevTools relay NOT started by default — it blocks RN's built-in inspector.
+  // Started on-demand when user clicks React tab or Cmd+R.
   setupMetroCDPProxy();
   setupIPC();
   buildMenu();
@@ -106,6 +107,18 @@ async function createMainWindow() {
 }
 
 // ─── Update Checker ──────────────────────────────────────────────────────────
+function _semverCompare(a, b) {
+  // Returns 1 if a > b, -1 if a < b, 0 if equal
+  const pa = (a || '').split('.').map(Number);
+  const pb = (b || '').split('.').map(Number);
+  for (let i = 0; i < 3; i++) {
+    const va = pa[i] || 0, vb = pb[i] || 0;
+    if (va > vb) return 1;
+    if (va < vb) return -1;
+  }
+  return 0;
+}
+
 function checkForUpdates() {
   const currentVersion = require('./package.json').version;
   https.get('https://registry.npmjs.org/reactoradar/latest', (res) => {
@@ -114,9 +127,16 @@ function checkForUpdates() {
     res.on('end', () => {
       try {
         const latest = JSON.parse(data).version;
-        if (latest && latest !== currentVersion) {
-          // Notify the renderer to show an update banner
-          mainWindow?.webContents.send('update-available', { current: currentVersion, latest });
+        if (latest && _semverCompare(latest, currentVersion) > 0) {
+          // Send with retries to ensure renderer catches it after did-finish-load
+          const payload = { current: currentVersion, latest };
+          [500, 2000, 5000].forEach(delay => {
+            setTimeout(() => {
+              if (mainWindow && !mainWindow.isDestroyed()) {
+                mainWindow.webContents.send('update-available', payload);
+              }
+            }, delay);
+          });
           console.log(`[Update] New version available: ${latest} (current: ${currentVersion})`);
         }
       } catch {}
@@ -317,6 +337,8 @@ function setupIPC() {
   });
 
   ipcMain.on('open-react-devtools', () => {
+    // Start the relay server if not already running
+    if (!reactDTServer) startReactDevToolsServer();
     // Open standalone react-devtools window
     const rdtWin = new BrowserWindow({
       width: 1100,
@@ -332,6 +354,14 @@ function setupIPC() {
 
   // clear-all is handled by renderer via clear-all-ui IPC from menu
 
+  ipcMain.on('set-metro-port', (_, port) => {
+    const p = parseInt(port);
+    if (isNaN(p) || p < 1024 || p > 65535) return;
+    PORTS.METRO = p;
+    fetchCDPTargets();
+    mainWindow?.webContents.send('ports', PORTS);
+  });
+
   ipcMain.on('set-network-capture', (_, enabled) => {
     // Broadcast to connected RN apps so they can stop/start intercepting
     networkClients.forEach(ws => {
@@ -391,7 +421,7 @@ function setupIPC() {
         // Also try to detect from Metro's /json endpoint
         try {
           const result = require('child_process').execSync(
-            "lsof -i :8081 -t 2>/dev/null | head -1 | xargs -I{} lsof -p {} -Fn 2>/dev/null | grep '^n/' | grep 'node_modules' | head -1 | sed 's|^n||;s|/node_modules.*||'",
+            `lsof -i :${PORTS.METRO} -t 2>/dev/null | head -1 | xargs -I{} lsof -p {} -Fn 2>/dev/null | grep '^n/' | grep 'node_modules' | head -1 | sed 's|^n||;s|/node_modules.*||'`,
             { encoding: 'utf8', timeout: 3000 }
           ).trim();
           if (result && fs.existsSync(result)) candidates.unshift(result);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "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

@@ -26,6 +26,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   setNetworkCapture: (enabled) => ipcRenderer.send('set-network-capture', enabled),
   setStackTraceCapture: (enabled) => ipcRenderer.send('set-stack-trace-capture', enabled),
   setNetworkThrottle: (profile) => ipcRenderer.send('set-network-throttle', profile),
+  setMetroPort: (port) => ipcRenderer.send('set-metro-port', port),
   readSourceFile: (filepath) => ipcRenderer.invoke('read-source-file', filepath),
   openExternal: (url) => ipcRenderer.send('open-external', url),
 });

package/sdk/RNDebugSDK.js

@@ -34,6 +34,49 @@ let _stackTraceEnabled = false; // Disabled by default for performance
 let _throttleProfile = 'none'; // 'none', 'fast3g', 'slow3g', 'offline'
 const THROTTLE_DELAYS = { none: 0, fast3g: 500, slow3g: 2000, offline: -1 };
 
+// ─── SDK Pause/Resume (allows inspector to work without SDK interference) ────
+// When paused, console/fetch/XHR interception is disabled so the RN inspector
+// and CDP debugger can work without conflicts. Controlled via the debugger app.
+let _sdkPaused = false;
+
+function _isSDKActive() {
+  return !_sdkPaused;
+}
+
+// ─── Debugger Detection ──────────────────────────────────────────────────────
+// Detect if a CDP debugger (Chrome DevTools / Hermes inspector) is attached.
+// When detected, we back off our patches to avoid conflicts with the inspector.
+let _debuggerDetected = false;
+let _debuggerCheckInterval = null;
+
+function _checkDebuggerAttached() {
+  // Method 1: Check if Hermes debugger globals are set
+  const hermesDebugger = !!(global.__DEBUGGER_CONNECTED__ || global.__HERMES_DEBUGGER_CONNECTED__);
+  // Method 2: Check React DevTools hook for debugger attachment
+  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);
+
+  const wasDetected = _debuggerDetected;
+  _debuggerDetected = hermesDebugger || rdtDebugger || inspectorConnected;
+
+  if (_debuggerDetected && !wasDetected) {
+    _console.log('[RNDebugSDK] Debugger detected — SDK interception paused to avoid inspector conflicts. Use the ReactoRadar app to resume.');
+  } else if (!_debuggerDetected && wasDetected) {
+    _console.log('[RNDebugSDK] Debugger disconnected — SDK interception resumed.');
+  }
+}
+
+// Check periodically (every 3s) — lightweight, no performance impact
+_debuggerCheckInterval = setInterval(_checkDebuggerAttached, 3000);
+// Also check once immediately after a short delay (debugger may attach during startup)
+setTimeout(_checkDebuggerAttached, 1000);
+
+function _shouldIntercept() {
+  return _isSDKActive() && !_debuggerDetected;
+}
+
 // ─── WebSocket Factory ────────────────────────────────────────────────────────
 function makeChannel(port, name, onMessage) {
   let ws = null, queue = [], connected = false;
@@ -72,6 +115,21 @@ const mainCh    = makeChannel(PORTS.NETWORK_AND_CONSOLE, 'main', (msg) => {
     if (msg.action === 'set-network-capture') _networkCaptureEnabled = !!msg.enabled;
     if (msg.action === 'set-throttle') _throttleProfile = msg.profile || 'none';
     if (msg.action === 'set-stack-trace') _stackTraceEnabled = !!msg.enabled;
+    // Pause/Resume SDK interception (allows inspector to work)
+    if (msg.action === 'pause-sdk') {
+      _sdkPaused = true;
+      _console.log('[RNDebugSDK] SDK paused — inspector/debugger can now inspect the app freely.');
+      mainCh.send({ type: 'control', action: 'sdk-status', paused: true });
+    }
+    if (msg.action === 'resume-sdk') {
+      _sdkPaused = false;
+      _console.log('[RNDebugSDK] SDK resumed — interception re-enabled.');
+      mainCh.send({ type: 'control', action: 'sdk-status', paused: false });
+    }
+    // Query current status
+    if (msg.action === 'query-sdk-status') {
+      mainCh.send({ type: 'control', action: 'sdk-status', paused: _sdkPaused, debuggerDetected: _debuggerDetected });
+    }
   }
 });
 const reduxCh   = makeChannel(PORTS.REDUX,   'redux');
@@ -130,6 +188,9 @@ LEVELS.forEach(level => {
   _console[level] = console[level].bind(console);
   console[level] = (...args) => {
     _console[level](...args);
+    // Skip interception when SDK is paused or debugger is attached
+    // This prevents double-logging and message queue deadlocks with CDP
+    if (!_shouldIntercept()) return;
     const structuredArgs = args.map(serializeArg);
     const message = args.map(a => {
       if (typeof a === 'string') return a;
@@ -167,6 +228,10 @@ function _flattenHeaders(h) {
 // ─── Fetch Intercept ─────────────────────────────────────────────────────────
 const _fetch = global.fetch;
 global.fetch = async (input, init = {}) => {
+  // When SDK is paused or debugger is attached, pass through without interception
+  // This prevents racing with CDP's own Fetch.enable domain
+  if (!_shouldIntercept()) return _fetch(input, init);
+
   // Throttle: simulate slow network or offline
   const delay = THROTTLE_DELAYS[_throttleProfile] || 0;
   if (delay === -1) return Promise.reject(new TypeError('Network request failed (offline throttle)'));
@@ -236,24 +301,24 @@ global.fetch = async (input, init = {}) => {
         return _setHeader.apply(xhr, arguments);
       };
 
-      // Wrap send
-      const _send = xhr.send.bind(xhr);
-      xhr.send = function(body) {
-        if (_networkCaptureEnabled && !meta.sent) {
-          meta.sent = true;
-          let reqBody = null;
-          if (body != null) {
-            try { reqBody = typeof body === 'string' ? body : JSON.parse(JSON.stringify(body)); } catch { reqBody = String(body); }
-          }
-          mainCh.send({ type: 'network', phase: 'request', id: meta.id, url: meta.url,
-            method: meta.method, requestHeaders: meta.headers, requestBody: reqBody });
-        }
-        return _send.apply(xhr, arguments);
-      };
+       // Wrap send
+       const _send = xhr.send.bind(xhr);
+       xhr.send = function(body) {
+         if (_shouldIntercept() && _networkCaptureEnabled && !meta.sent) {
+           meta.sent = true;
+           let reqBody = null;
+           if (body != null) {
+             try { reqBody = typeof body === 'string' ? body : JSON.parse(JSON.stringify(body)); } catch { reqBody = String(body); }
+           }
+           mainCh.send({ type: 'network', phase: 'request', id: meta.id, url: meta.url,
+             method: meta.method, requestHeaders: meta.headers, requestBody: reqBody });
+         }
+         return _send.apply(xhr, arguments);
+       };
 
       // Listen for completion
-      xhr.addEventListener('readystatechange', function() {
-        if (xhr.readyState !== 4 || !meta.sent || !_networkCaptureEnabled) return;
+       xhr.addEventListener('readystatechange', function() {
+         if (xhr.readyState !== 4 || !meta.sent || !_shouldIntercept() || !_networkCaptureEnabled) return;
         try {
           const duration = Date.now() - meta.t0;
           if (xhr.status > 0) {
@@ -310,17 +375,8 @@ global.fetch = async (input, init = {}) => {
     _console.log('[RNDebugSDK] XHR constructor wrapped for network capture');
   }
 
-  // Wrap immediately if available
-  if (global.XMLHttpRequest) wrapXHR();
-
-  // Also wrap after RN polyfills set up (they replace global.XMLHttpRequest)
-  [0, 50, 200, 500].forEach(delay => {
-    setTimeout(() => {
-      if (global.XMLHttpRequest && !global.XMLHttpRequest.__dbgWrapped) {
-        wrapXHR();
-      }
-    }, delay);
-  });
+   // Wrap immediately if available
+   if (global.XMLHttpRequest) wrapXHR();
 })();
 
 // ─── Axios Interceptor (belt-and-suspenders with XHR patch) ──────────────────
@@ -334,8 +390,8 @@ setTimeout(() => {
     function addDbgInterceptors(instance) {
       if (!instance || !instance.interceptors || instance.__dbgInt) return;
       instance.__dbgInt = true;
-      instance.interceptors.request.use(config => {
-        if (!_networkCaptureEnabled) return config;
+       instance.interceptors.request.use(config => {
+         if (!_shouldIntercept() || !_networkCaptureEnabled) return config;
         const id = `ax-${Date.now()}-${Math.random().toString(36).slice(2,6)}`;
         config._dbgId = id;
         config._dbgT0 = Date.now();
@@ -348,9 +404,10 @@ setTimeout(() => {
         mainCh.send({ type:'network', phase:'request', id, url, method:(config.method||'GET').toUpperCase(), requestHeaders:h, requestBody:body });
         return config;
       }, e => Promise.reject(e));
-      instance.interceptors.response.use(resp => {
-        const c = resp.config || {};
-        if (!c._dbgId) return resp;
+       instance.interceptors.response.use(resp => {
+         if (!_shouldIntercept() || !_networkCaptureEnabled) return resp;
+         const c = resp.config || {};
+         if (!c._dbgId) return resp;
         const url = c.baseURL ? c.baseURL.replace(/\/+$/,'') + '/' + (c.url||'').replace(/^\/+/,'') : (c.url||'');
         const dur = c._dbgT0 ? Date.now() - c._dbgT0 : 0;
         const rh = {};
@@ -361,9 +418,10 @@ setTimeout(() => {
         mainCh.send({ type:'network', phase:'response', id:c._dbgId, url, method:(c.method||'GET').toUpperCase(),
           status:resp.status, statusText:resp.statusText, duration:dur, responseHeaders:rh, responseBody:body });
         return resp;
-      }, err => {
-        const c = err?.config || {};
-        if (c._dbgId) {
+       }, err => {
+         if (!_shouldIntercept() || !_networkCaptureEnabled) return Promise.reject(err);
+         const c = err?.config || {};
+         if (c._dbgId) {
           const url = c.baseURL ? c.baseURL.replace(/\/+$/,'') + '/' + (c.url||'').replace(/^\/+/,'') : (c.url||'');
           const dur = c._dbgT0 ? Date.now() - c._dbgT0 : 0;
           const r = err?.response;

package/styles.css

@@ -741,7 +741,11 @@ body {
 }
 .net-row:hover { background: var(--bg3); }
 .net-row.selected { background: var(--bg4); }
-.net-row.error { background: rgba(255,94,114,.04); }
+.net-row.error { background: rgba(255,94,114,.06); border-bottom-color: rgba(255,94,114,.10); }
+.net-row.error:hover { background: rgba(255,94,114,.10); }
+.net-row.error .net-path { color: var(--red); }
+.net-row.error .net-host { color: rgba(255,94,114,.6); }
+.net-path-error { color: var(--red) !important; }
 .net-cell {
   padding: 6px 8px;
   overflow: hidden;
@@ -757,12 +761,13 @@ body {
 .net-cell-name .method-badge { flex-shrink: 0; vertical-align: middle; }
 
 .net-status { font-weight: 700; }
-.s-2 { color: var(--green); }
-.s-3 { color: var(--yellow); }
-.s-4 { color: var(--orange); }
-.s-5 { color: var(--red); }
+.s-1 { color: var(--text-mid); }   /* 1xx informational */
+.s-2 { color: var(--green); }      /* 2xx success */
+.s-3 { color: var(--yellow); }     /* 3xx redirect */
+.s-4 { color: var(--red); }        /* 4xx client error */
+.s-5 { color: var(--red); }        /* 5xx server error */
 .s-pending { color: var(--text-dim); }
-.s-err { color: var(--red); }
+.s-err { color: var(--red); font-weight: 700; }
 
 .net-type { color: var(--text-dim); font-size: 10px; }
 .net-initiator { color: var(--text-dim); font-size: 10px; }