reactoradar 1.6.0 → 1.6.2

package/app.js

@@ -203,6 +203,7 @@ function clearActiveTab() {
 function clearAll() {
   state.console.logs = [];
   _consolePending = [];
+  _lastLogMsg = ''; _lastLogRow = null; _lastLogCount = 1;
   state.network.requests = {};
   state.network.order = [];
   state.network.selectedId = null;
@@ -213,14 +214,31 @@ function clearAll() {
   state.storage.entries = {};
   state.storage.keys = [];
   state.storage.selected = null;
+  // GA4
+  ga4State.events = [];
+  ga4State.selected = -1;
+  ga4State.searchFilter = '';
+  const ga4Search = $('ga4Search');
+  if (ga4Search) ga4Search.value = '';
+  const ga4Detail = $('ga4Detail');
+  if (ga4Detail) ga4Detail.innerHTML = '';
+  // Native logs
+  _nativeState.logs = [];
+  const nativeList = $('nativeLogList');
+  if (nativeList) nativeList.innerHTML = '';
+  // Badges
   $('cBadge').textContent = '0';
   $('nBadge').textContent = '0';
   $('rBadge').textContent = '0';
   $('sBadge').textContent = '0';
+  if ($('ga4Badge')) $('ga4Badge').textContent = '0';
+  if ($('nativeBadge')) $('nativeBadge').textContent = '0';
+  // Re-render all
   renderConsole();
   renderNetwork();
   renderRedux();
   renderStorage();
+  if (typeof renderGA4List === 'function') { renderGA4List(); renderGA4Summary(); }
 }
 
 // ─── CDP Button ───────────────────────────────────────────────────────────────
@@ -658,6 +676,10 @@ const MAX_CONSOLE_LOGS = 5000;
 
 function addConsoleLog(event) {
   state.console.logs.push(event);
+  // Cap in-memory logs to prevent memory leak
+  if (state.console.logs.length > MAX_CONSOLE_LOGS) {
+    state.console.logs = state.console.logs.slice(-MAX_CONSOLE_LOGS);
+  }
   _consolePending.push(event);
 
   // Batch DOM updates via rAF — only one paint per frame
@@ -2038,9 +2060,15 @@ function initGA4Panel() {
   $('ga4Clear').addEventListener('click', () => {
     ga4State.events = [];
     ga4State.selected = -1;
+    ga4State.searchFilter = '';
+    const search = $('ga4Search');
+    if (search) search.value = '';
     $('ga4Badge').textContent = '0';
     renderGA4List();
     renderGA4Summary();
+    // Clear detail pane
+    const detail = $('ga4Detail');
+    if (detail) detail.innerHTML = '<div class="ga4-detail-empty" style="color:var(--text-dim);padding:20px;text-align:center;font-size:11px">Select an event to view details</div>';
   });
 
   $('ga4SortBtn').addEventListener('click', () => {
@@ -2154,7 +2182,7 @@ function renderGA4List() {
     const row = document.createElement('div');
     row.className = 'ga4-row' + (e.index === ga4State.selected ? ' selected' : '');
 
-    const time = new Date(e.ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3 });
+    const time = new Date(e.ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
 
     const evtColor = _ga4EventColor(e.name);
     const colorStyle = evtColor ? `color:${evtColor}` : '';
@@ -2184,12 +2212,15 @@ function renderGA4List() {
 }
 
 function renderGA4Detail(e) {
-  const detail = $('ga4Detail');
+  let detail = $('ga4Detail');
   if (!detail) return;
 
-  const time = new Date(e.ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3 });
+  const time = new Date(e.ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
 
-  detail.innerHTML = '';
+  // Clone-replace to remove stale event listeners
+  const fresh = detail.cloneNode(false);
+  detail.parentNode.replaceChild(fresh, detail);
+  detail = fresh;
 
   // Header info
   const header = document.createElement('div');
@@ -2748,8 +2779,8 @@ function initStoragePanel() {
         <input id="storageSearch" class="net-search-input" placeholder="Filter keys..." />
       </div>
     </div>
-    <div class="storage-layout">
-      <div class="storage-keys">
+    <div class="storage-layout" id="storageLayout">
+      <div class="storage-keys" id="storageKeysPane">
         <div class="panel-toolbar" style="height:32px">
           <span style="font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px">Keys</span>
         </div>
@@ -2757,10 +2788,11 @@ function initStoragePanel() {
           <div class="empty-state" id="storageEmpty">
             <div class="icon">💾</div>
             <div class="label">No storage data</div>
-            <div class="hint">Add storage plugin to RNDebugPlugin</div>
+            <div class="hint">AsyncStorage data will appear here</div>
           </div>
         </div>
       </div>
+      <div class="storage-resize-handle" id="storageResizeHandle"></div>
       <div class="storage-value-view">
         <div class="storage-value-toolbar">
           <span style="font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px">Value</span>
@@ -2776,6 +2808,35 @@ function initStoragePanel() {
     state.storage.searchFilter = e.target.value.toLowerCase().trim();
     renderStorage();
   });
+
+  // Drag resize handle for key list width
+  const handle = $('storageResizeHandle');
+  const layout = $('storageLayout');
+  const keysPane = $('storageKeysPane');
+  if (handle && layout && keysPane) {
+    let dragging = false;
+    let startX = 0;
+    let startW = 0;
+    handle.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      dragging = true;
+      startX = e.clientX;
+      startW = keysPane.offsetWidth;
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    });
+    document.addEventListener('mousemove', (e) => {
+      if (!dragging) return;
+      const newW = Math.max(120, Math.min(600, startW + (e.clientX - startX)));
+      layout.style.gridTemplateColumns = `${newW}px 4px 1fr`;
+    });
+    document.addEventListener('mouseup', () => {
+      if (!dragging) return;
+      dragging = false;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    });
+  }
 }
 
 let _storageRAF = null;
@@ -2851,7 +2912,7 @@ function renderStorage() {
 }
 
 function renderStorageValue() {
-  const body = $('storageValueBody');
+  let body = $('storageValueBody');
   const keyLabel = $('storageSelectedKey');
   if (!body) return;
   const { selected, entries } = state.storage;
@@ -2861,7 +2922,29 @@ function renderStorageValue() {
     return;
   }
   if (keyLabel) keyLabel.textContent = selected;
-  body.innerHTML = renderJSON(entries[selected]);
+  // Clone-replace to remove stale event listeners
+  const fresh = body.cloneNode(false);
+  body.parentNode.replaceChild(fresh, body);
+  body = fresh;
+
+  let val = entries[selected];
+  // Try to parse JSON strings into objects for tree display
+  if (typeof val === 'string') {
+    try { val = JSON.parse(val); } catch {}
+  }
+
+  if (val && typeof val === 'object') {
+    body.appendChild(createTreeNode(null, val, false));
+    body.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      showContextMenu(e, [
+        { label: 'Copy Value', action: () => navigator.clipboard.writeText(JSON.stringify(val, null, 2)) },
+        { label: 'Copy Key', action: () => navigator.clipboard.writeText(selected) },
+      ]);
+    });
+  } else {
+    body.innerHTML = renderJSON(val);
+  }
 }
 
 function formatSize(bytes) {
@@ -2872,6 +2955,257 @@ function formatSize(bytes) {
 // ─────────────────────────────────────────────────────────────────────────────
 // REACT TREE PANEL
 // ─────────────────────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+// NATIVE LOGS PANEL
+// ─────────────────────────────────────────────────────────────────────────────
+const _nativeState = { logs: [], connected: false, platform: null, levelFilter: 'all', searchFilter: '' };
+const MAX_NATIVE_LOGS = 2000;
+
+function initNativeLogsPanel() {
+  const panel = $('panel-native');
+  if (!panel) return;
+  panel.innerHTML = `
+    <div class="panel-toolbar">
+      <span class="panel-label">Native Logs</span>
+      <span class="badge" id="nativeBadge">0</span>
+      <div class="ml-auto" style="display:flex;align-items:center;gap:6px">
+        <span class="native-status" id="nativeStatus">Detecting...</span>
+        <button class="panel-clear-btn" id="nativeClear">Clear</button>
+      </div>
+    </div>
+    <div class="native-connect-panel" id="nativeConnectPanel">
+      <div class="native-hero">
+        <div style="font-size:36px;opacity:0.15;margin-bottom:12px">📱</div>
+        <div style="font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px">Native Logs</div>
+        <div style="font-size:11px;color:var(--text-dim);max-width:420px;line-height:1.7;margin-bottom:20px">
+          Stream native crash logs, errors, and warnings directly in ReactoRadar.<br/>
+          No need to open Android Studio or Xcode.
+        </div>
+        <div class="native-platform-cards">
+          <div class="native-card" id="nativeCardAndroid">
+            <div class="native-card-icon">🤖</div>
+            <div class="native-card-title">Android</div>
+            <div class="native-card-hint">Requires: <code>adb</code> in PATH (Android SDK)</div>
+            <div class="native-card-prereq">
+              <div class="native-prereq-step"><b>Prerequisites:</b></div>
+              <div class="native-prereq-step">1. Enable <b>Developer Options</b> on device<br/><span style="color:var(--text-dim);font-size:9px">Settings → About Phone → Tap Build Number 7 times</span></div>
+              <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>
+            <div id="nativeAndroidStatus" class="native-detect-status"></div>
+            <button class="native-connect-btn" id="nativeConnectAndroid">Connect Android</button>
+          </div>
+          <div class="native-card" id="nativeCardIOS">
+            <div class="native-card-icon">🍎</div>
+            <div class="native-card-title">iOS</div>
+            <div class="native-card-hint">Simulator or USB device</div>
+            <div class="native-card-prereq">
+              <div class="native-prereq-step"><b>Simulator:</b></div>
+              <div class="native-prereq-step">Requires Xcode Command Line Tools<br/><code>xcode-select --install</code></div>
+              <div class="native-prereq-step" style="margin-top:6px"><b>Real Device (USB):</b></div>
+              <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>
+            <div id="nativeIOSStatus" class="native-detect-status"></div>
+            <div style="display:flex;gap:6px;margin-top:8px">
+              <button class="native-connect-btn" id="nativeConnectIOSSim">Simulator</button>
+              <button class="native-connect-btn" id="nativeConnectIOSDevice">USB Device</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="native-logs-area" id="nativeLogsArea" style="display:none">
+      <div class="native-filter-bar">
+        <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="fatal">Fatal</button>
+          <button class="net-status-btn" data-level="error">Error</button>
+          <button class="net-status-btn" data-level="warn">Warn</button>
+          <button class="net-status-btn" data-level="info">Info</button>
+          <button class="net-status-btn" data-level="debug">Debug</button>
+        </div>
+        <div style="margin-left:auto;display:flex;gap:6px;align-items:center">
+          <button class="panel-clear-btn" id="nativeLogsClear">Clear</button>
+          <button class="panel-clear-btn" id="nativeDisconnect" style="color:var(--red)">Disconnect</button>
+        </div>
+      </div>
+      <div class="native-log-list" id="nativeLogList"></div>
+    </div>`;
+
+  // Connect buttons
+  $('nativeConnectAndroid')?.addEventListener('click', () => window.electronAPI?.startNativeLogs('android'));
+  $('nativeConnectIOSSim')?.addEventListener('click', () => window.electronAPI?.startNativeLogs('ios-sim'));
+  $('nativeConnectIOSDevice')?.addEventListener('click', () => window.electronAPI?.startNativeLogs('ios-device'));
+  $('nativeDisconnect')?.addEventListener('click', () => window.electronAPI?.stopNativeLogs());
+
+  // Clear buttons (toolbar + logs area)
+  $('nativeClear')?.addEventListener('click', _clearNativeLogs);
+  $('nativeLogsClear')?.addEventListener('click', _clearNativeLogs);
+
+  // Level filter
+  $('nativeLevelFilters')?.addEventListener('click', (e) => {
+    const btn = e.target.closest('.net-status-btn');
+    if (!btn) return;
+    $('nativeLevelFilters').querySelectorAll('.net-status-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    _nativeState.levelFilter = btn.dataset.level;
+    _renderNativeLogs();
+  });
+
+  // Search
+  $('nativeSearch')?.addEventListener('input', (e) => {
+    _nativeState.searchFilter = e.target.value.toLowerCase().trim();
+    _renderNativeLogs();
+  });
+
+  // IPC: receive native logs
+  window.electronAPI?.on('native-log', (log) => {
+    if (!isTabEnabled('native')) return;
+    _nativeState.logs.push(log);
+    if (_nativeState.logs.length > MAX_NATIVE_LOGS) {
+      _nativeState.logs = _nativeState.logs.slice(-MAX_NATIVE_LOGS);
+    }
+    $('nativeBadge').textContent = _nativeState.logs.length;
+    _appendNativeLog(log);
+  });
+
+  // IPC: connection status
+  window.electronAPI?.on('native-status', (status) => {
+    _nativeState.connected = status.connected;
+    _nativeState.platform = status.platform || null;
+    const statusEl = $('nativeStatus');
+    const connectPanel = $('nativeConnectPanel');
+    const logsArea = $('nativeLogsArea');
+
+    if (status.connected) {
+      if (statusEl) { statusEl.textContent = `Connected (${status.platform})`; statusEl.style.color = 'var(--green)'; }
+      if (connectPanel) connectPanel.style.display = 'none';
+      if (logsArea) logsArea.style.display = 'flex';
+    } else {
+      if (statusEl) {
+        statusEl.textContent = status.error || 'Not connected';
+        statusEl.style.color = status.error ? 'var(--red)' : 'var(--text-dim)';
+      }
+      if (connectPanel) connectPanel.style.display = 'flex';
+      if (logsArea) logsArea.style.display = 'none';
+    }
+  });
+
+  // Auto-detect platform and auto-connect
+  _autoDetectNative();
+}
+
+function _clearNativeLogs() {
+  _nativeState.logs = [];
+  if ($('nativeBadge')) $('nativeBadge').textContent = '0';
+  const list = $('nativeLogList');
+  if (list) list.innerHTML = '';
+}
+
+async function _autoDetectNative() {
+  const statusEl = $('nativeStatus');
+  try {
+    const result = await window.electronAPI?.detectNativePlatform();
+    if (!result) { if (statusEl) { statusEl.textContent = 'Detection unavailable'; statusEl.style.color = 'var(--text-dim)'; } return; }
+
+    // Update card statuses
+    const androidStatus = $('nativeAndroidStatus');
+    const iosStatus = $('nativeIOSStatus');
+    if (androidStatus) {
+      if (result.android) { androidStatus.innerHTML = '<span style="color:var(--green)">Device detected</span>'; }
+      else if (result.adbPath) { androidStatus.innerHTML = '<span style="color:var(--orange)">adb found — no device connected</span>'; }
+      else { androidStatus.innerHTML = '<span style="color:var(--text-dim)">adb not found</span>'; }
+    }
+    if (iosStatus) {
+      const parts = [];
+      if (result.iosSim) parts.push('<span style="color:var(--green)">Simulator running</span>');
+      if (result.iosDevice) parts.push('<span style="color:var(--green)">USB device detected</span>');
+      if (!parts.length) parts.push('<span style="color:var(--text-dim)">No device detected</span>');
+      iosStatus.innerHTML = parts.join(' · ');
+    }
+
+    // Show detection result — user clicks Connect to start
+    if (result.android || result.iosSim || result.iosDevice) {
+      const detected = [result.android ? 'Android' : '', result.iosSim ? 'iOS Sim' : '', result.iosDevice ? 'iOS Device' : ''].filter(Boolean).join(', ');
+      if (statusEl) { statusEl.textContent = `Detected: ${detected} — click Connect to start`; statusEl.style.color = 'var(--accent)'; }
+    } else {
+      if (statusEl) { statusEl.textContent = 'No device detected'; statusEl.style.color = 'var(--text-dim)'; }
+    }
+  } catch {
+    if (statusEl) { statusEl.textContent = 'Detection failed'; statusEl.style.color = 'var(--text-dim)'; }
+  }
+}
+
+function _appendNativeLog(log) {
+  const list = $('nativeLogList');
+  if (!list) return;
+
+  // Check filters
+  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);
+
+  // 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);
+
+    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 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);
+
+  // Cap DOM rows
+  while (list.children.length > 1000) list.firstChild.remove();
+
+  // Auto-scroll if near bottom
+  const atBottom = (list.scrollHeight - list.scrollTop - list.clientHeight) < 150;
+  if (atBottom) list.scrollTop = list.scrollHeight;
+}
+
+function _renderNativeLogs() {
+  const list = $('nativeLogList');
+  if (!list) return;
+  list.innerHTML = '';
+  _nativeState.logs.forEach(log => _appendNativeLog(log));
+}
+
 function initReactPanel() {
   const panel = $('panel-react');
   panel.innerHTML = `
@@ -2969,24 +3303,25 @@ function _updateHiddenBadge() {
 
 // ─── Tab Visibility ──────────────────────────────────────────────────────────
 const TAB_CONFIG = [
-  { id: 'console',     label: 'Console',     icon: '🖥', essential: true },
-  { id: 'network',     label: 'Network',     icon: '📡', essential: true },
-  { id: 'redux',       label: 'Redux',       icon: '🔲', essential: false },
-  { id: 'ga4',         label: 'GA4 Events',  icon: '📊', essential: false },
-  { id: 'storage',     label: 'Storage',     icon: '💾', essential: false },
-  { id: 'memory',      label: 'Memory',      icon: '🧠', essential: false },
-  { id: 'performance', label: 'Performance', icon: '⚡', essential: false },
-  { id: 'react',       label: 'React Tree',  icon: '⚛️', essential: false },
+  { id: 'console',     label: 'Console',      icon: '🖥', essential: true },
+  { id: 'network',     label: 'Network',      icon: '📡', essential: true },
+  { id: 'redux',       label: 'Redux',        icon: '🔲', essential: false },
+  { id: 'ga4',         label: 'GA4 Events',   icon: '📊', essential: false },
+  { id: 'storage',     label: 'AsyncStorage', icon: '💾', essential: false },
+  { id: 'memory',      label: 'Memory',       icon: '🧠', essential: false, defaultHidden: true },
+  { id: 'performance', label: 'Performance',  icon: '⚡', essential: false, defaultHidden: true },
+  { id: 'react',       label: 'React Tree',   icon: '⚛️', essential: false },
+  { id: 'native',      label: 'Native Logs',  icon: '📱', essential: false, defaultHidden: true },
 ];
 function getTabVisibility() {
   try {
     const saved = JSON.parse(localStorage.getItem('rn-debug-tab-visibility') || '{}');
     const result = {};
-    TAB_CONFIG.forEach(t => { result[t.id] = saved[t.id] !== undefined ? saved[t.id] : true; });
+    TAB_CONFIG.forEach(t => { result[t.id] = saved[t.id] !== undefined ? saved[t.id] : !t.defaultHidden; });
     return result;
   } catch {
     const result = {};
-    TAB_CONFIG.forEach(t => { result[t.id] = true; });
+    TAB_CONFIG.forEach(t => { result[t.id] = !t.defaultHidden; });
     return result;
   }
 }
@@ -2996,7 +3331,13 @@ function setTabVisibility(vis) {
 function getTabOrder() {
   try {
     const saved = JSON.parse(localStorage.getItem('rn-debug-tab-order') || '[]');
-    if (saved.length === TAB_CONFIG.length) return saved;
+    if (saved.length) {
+      // Merge: keep saved order, append any new tabs not in saved list
+      const allIds = TAB_CONFIG.map(t => t.id);
+      const merged = saved.filter(id => allIds.includes(id));
+      allIds.forEach(id => { if (!merged.includes(id)) merged.push(id); });
+      return merged;
+    }
   } catch {}
   return TAB_CONFIG.map(t => t.id);
 }
@@ -3463,7 +3804,7 @@ applyTabVisibility();
 window.electronAPI?.setMetroPort(getStoredMetroPort());
 
 // ─────────────────────────────────────────────────────────────────────────────
-// SOURCES PANEL — CDP-based file browser + breakpoints
+// SOURCES PANEL (placeholder — use JS Debugger button for breakpoints)
 // ─────────────────────────────────────────────────────────────────────────────
 function initSourcesPanel() {
   const panel = $('panel-sources');
@@ -3944,4 +4285,5 @@ initMemoryPanel();
 initReduxPanel();
 initStoragePanel();
 initReactPanel();
+initNativeLogsPanel();
 initSettingsPanel();

package/index.html

@@ -47,9 +47,9 @@
         <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">
+      <button class="nav-btn" data-panel="storage" title="AsyncStorage">
         <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>
+        <span>Async<br/>Storage</span>
       </button>
       <button class="nav-btn" data-panel="memory" title="Memory">
         <svg viewBox="0 0 20 20"><rect x="3" y="8" width="3" height="8" rx="0.5" stroke="currentColor" stroke-width="1.2" fill="none"/><rect x="8.5" y="4" width="3" height="12" rx="0.5" stroke="currentColor" stroke-width="1.2" fill="none"/><rect x="14" y="6" width="3" height="10" rx="0.5" stroke="currentColor" stroke-width="1.2" fill="none"/></svg>
@@ -59,6 +59,10 @@
         <svg viewBox="0 0 20 20"><polyline points="2,16 6,10 10,13 14,5 18,8" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
         <span>Perf</span>
       </button>
+      <button class="nav-btn" data-panel="native" title="Native Logs">
+        <svg viewBox="0 0 20 20"><path d="M4 4h12v12H4z" stroke="currentColor" stroke-width="1.5" fill="none" rx="2"/><path d="M7 8h6M7 11h4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><circle cx="14" cy="14" r="3" fill="var(--red)" stroke="currentColor" stroke-width="1"/><path d="M13 13l2 2M15 13l-2 2" stroke="#fff" stroke-width="1" stroke-linecap="round"/></svg>
+        <span>Native</span>
+      </button>
       <button class="nav-btn" data-panel="react" title="React Tree">
         <svg viewBox="0 0 20 20"><circle cx="10" cy="10" r="2" fill="currentColor"/><ellipse cx="10" cy="10" rx="8" ry="3.5" stroke="currentColor" stroke-width="1.5" fill="none"/><ellipse cx="10" cy="10" rx="8" ry="3.5" stroke="currentColor" stroke-width="1.5" fill="none" transform="rotate(60 10 10)"/><ellipse cx="10" cy="10" rx="8" ry="3.5" stroke="currentColor" stroke-width="1.5" fill="none" transform="rotate(120 10 10)"/></svg>
         <span>React</span>
@@ -80,6 +84,7 @@
       <div id="panel-redux"       class="panel"></div>
       <div id="panel-storage"     class="panel"></div>
       <div id="panel-react"       class="panel"></div>
+      <div id="panel-native"      class="panel"></div>
       <div id="panel-settings"    class="panel"></div>
     </main>
 

package/main.js

@@ -20,6 +20,7 @@ const PORTS = {
 // ─── Windows ──────────────────────────────────────────────────────────────────
 let mainWindow = null;
 let devtoolsWindow = null;  // hosts the embedded CDP DevTools frontend
+let _forceQuit = false;
 
 // Safe IPC send — prevents "Object has been destroyed" crash
 function _send(channel, ...args) {
@@ -76,14 +77,12 @@ if (gotLock) app.whenReady().then(async () => {
   // Send version to renderer — try package.json, fallback to app.getVersion()
   let appVersion;
   try { appVersion = require('./package.json').version; } catch { appVersion = app.getVersion(); }
-  // Send multiple times to ensure renderer catches it
+  // Send multiple times to ensure renderer catches it (covers race conditions)
   mainWindow.webContents.on('did-finish-load', () => {
-    [200, 1000, 3000].forEach(delay => {
-      setTimeout(() => {
-        if (mainWindow && !mainWindow.isDestroyed()) {
-          _send('app-version', appVersion);
-        }
-      }, delay);
+    // Send immediately + retries
+    _send('app-version', appVersion);
+    [500, 2000, 5000].forEach(delay => {
+      setTimeout(() => _send('app-version', appVersion), delay);
     });
   });
 
@@ -102,6 +101,7 @@ app.on('window-all-closed', () => {
 });
 
 app.on('before-quit', () => {
+  _forceQuit = true;
   // Close all WS servers gracefully
   if (reactDTServer) {
     reactDTServer.close();
@@ -139,6 +139,26 @@ async function createMainWindow() {
   mainWindow.webContents.on('did-finish-load', () => {
     _send('ports', PORTS);
   });
+
+  // Close confirmation dialog
+  mainWindow.on('close', (e) => {
+    if (_forceQuit) return;
+    e.preventDefault();
+    dialog.showMessageBox(mainWindow, {
+      type: 'question',
+      buttons: ['Quit', 'Cancel'],
+      defaultId: 1,
+      title: 'Close ReactoRadar',
+      message: 'Are you sure you want to quit?',
+      detail: 'Active debug sessions will be disconnected.',
+    }).then(({ response }) => {
+      if (response === 0) {
+        _forceQuit = true;
+        if (mainWindow && !mainWindow.isDestroyed()) mainWindow.close();
+        app.quit();
+      }
+    });
+  });
 }
 
 // ─── Update Checker ──────────────────────────────────────────────────────────
@@ -417,17 +437,32 @@ 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,
-      height: 700,
-      titleBarStyle: 'hiddenInset',
-      backgroundColor: '#0a0b0e',
-      title: 'React DevTools',
-      webPreferences: { nodeIntegration: false, contextIsolation: true, sandbox: true },
-    });
-    // Metro serves the React DevTools frontend at /debugger-ui
-    rdtWin.loadURL(`http://localhost:${PORTS.METRO}/debugger-ui`);
+    // Launch standalone react-devtools via npx in a background process
+    try {
+      const { spawn } = require('child_process');
+      const env = { ...process.env };
+      // Remove ELECTRON_RUN_AS_NODE to prevent npx from running in Electron's Node
+      delete env.ELECTRON_RUN_AS_NODE;
+      const child = spawn('npx', ['react-devtools'], {
+        stdio: 'ignore',
+        detached: true,
+        env,
+      });
+      child.unref();
+      console.log('[ReactDevTools] Launched standalone react-devtools');
+      _send('react-dt-status', 'launched');
+    } catch (e) {
+      console.error('[ReactDevTools] Failed to launch:', e.message);
+      // Fallback: show instructions in a dialog
+      const { dialog } = require('electron');
+      dialog.showMessageBox(mainWindow, {
+        type: 'info',
+        title: 'React DevTools',
+        message: 'Could not launch React DevTools automatically.',
+        detail: 'Run this command in your terminal:\n\nnpx react-devtools\n\nIt will connect to your app on port 8097.',
+        buttons: ['OK'],
+      });
+    }
   });
 
   // clear-all is handled by renderer via clear-all-ui IPC from menu
@@ -574,6 +609,143 @@ function setupIPC() {
     }
   });
 
+  // ─── Native Log Streaming ──────────────────────────────────────────────────
+  let _nativeLogProcess = null;
+
+  // Auto-detect which native platform is available
+  ipcMain.handle('detect-native-platform', () => {
+    const { execSync } = require('child_process');
+    function tryCmd(cmd) { try { return execSync(cmd, { encoding: 'utf8', stdio: ['pipe','pipe','pipe'], timeout: 5000 }).trim(); } catch { return ''; } }
+
+    const result = { android: false, iosSim: false, iosDevice: false, adbPath: false };
+
+    // Check adb
+    const adbCheck = tryCmd('which adb');
+    result.adbPath = !!adbCheck;
+    if (adbCheck) {
+      const devices = tryCmd('adb devices');
+      result.android = devices.includes('emulator') || /\b[A-Z0-9]{6,}\s+device\b/i.test(devices);
+    }
+
+    // Check iOS simulator
+    const simCheck = tryCmd('xcrun simctl list devices booted 2>/dev/null');
+    result.iosSim = simCheck.includes('Booted');
+
+    // Check iOS device
+    const idevice = tryCmd('idevice_id -l 2>/dev/null');
+    result.iosDevice = !!(idevice && idevice.trim().length > 0);
+
+    return result;
+  });
+
+  ipcMain.on('start-native-logs', (_, platform) => {
+    // Kill existing process group
+    if (_nativeLogProcess) {
+      try { process.kill(-_nativeLogProcess.pid); } catch {}
+      try { _nativeLogProcess.kill(); } catch {}
+      _nativeLogProcess = null;
+    }
+
+    const { spawn } = require('child_process');
+    let cmd, args;
+
+    if (platform === 'android') {
+      // adb logcat — filter for app-relevant logs
+      cmd = 'adb';
+      args = ['logcat', '-v', 'threadtime', '*:W']; // Warnings and above
+    } 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'];
+    } else if (platform === 'ios-device') {
+      // idevicesyslog for real iOS device
+      cmd = 'idevicesyslog';
+      args = [];
+    } else {
+      _send('native-status', { connected: false, error: `Unknown platform: ${platform}` });
+      return;
+    }
+
+    try {
+      _nativeLogProcess = spawn(cmd, args, { stdio: ['ignore', 'pipe', 'pipe'], detached: true });
+
+      _send('native-status', { connected: true, platform });
+
+      let buffer = '';
+      _nativeLogProcess.stdout.on('data', (chunk) => {
+        buffer += chunk.toString();
+        const lines = buffer.split('\n');
+        buffer = lines.pop(); // keep incomplete line
+        lines.forEach(line => {
+          if (!line.trim()) return;
+          const parsed = _parseNativeLog(line, platform);
+          if (parsed) _send('native-log', parsed);
+        });
+      });
+
+      _nativeLogProcess.stderr.on('data', (chunk) => {
+        const text = chunk.toString().trim();
+        if (text) _send('native-log', { level: 'error', message: text, source: 'stderr', ts: Date.now() });
+      });
+
+      _nativeLogProcess.on('close', (code) => {
+        _nativeLogProcess = null;
+        _send('native-status', { connected: false, error: code ? `Process exited with code ${code}` : 'Disconnected' });
+      });
+
+      _nativeLogProcess.on('error', (err) => {
+        _nativeLogProcess = null;
+        _send('native-status', { connected: false, error: `Failed to start ${cmd}: ${err.message}. Is it installed?` });
+      });
+
+    } catch (e) {
+      _send('native-status', { connected: false, error: e.message });
+    }
+  });
+
+  ipcMain.on('stop-native-logs', () => {
+    if (_nativeLogProcess) {
+      try { _nativeLogProcess.kill(); } catch {}
+      _nativeLogProcess = null;
+      _send('native-status', { connected: false });
+    }
+  });
+
+  // Clean up on quit
+  app.on('before-quit', () => {
+    if (_nativeLogProcess) { try { _nativeLogProcess.kill(); } catch {} }
+  });
+
+  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 };
+      }
+      return { ts: Date.now(), level: 'info', message: line, raw: line };
+    }
+    if (platform === 'ios-sim' || platform === 'ios-device') {
+      // syslog style: "2026-06-05 10:30:45.123456+0530  localhost process[pid]: (subsystem) [category] <Level>: message"
+      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 };
+      }
+      // 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 };
+      }
+      // Fallback
+      const timeMatch = line.match(/(\d{2}:\d{2}:\d{2})/);
+      return { ts: Date.now(), time: timeMatch ? timeMatch[1] : '', level: 'info', message: line, raw: line };
+    }
+    return { ts: Date.now(), level: 'info', message: line, raw: line };
+  }
+
   ipcMain.on('set-theme', (_, theme) => {
     nativeTheme.themeSource = theme === 'light' ? 'light' : 'dark';
     const bg = theme === 'light' ? '#f5f6f8' : '#0a0b0e';

package/package.json

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

@@ -11,6 +11,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
       'ports', 'cdp-targets', 'redux-event', 'storage-event', 'network-event',
       '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', 'update-downloaded', 'app-version', 'focus-search',
+      'native-log', 'native-status',
     ];
     if (allowed.includes(channel)) {
       ipcRenderer.removeAllListeners(channel);
@@ -31,4 +32,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   openExternal: (url) => ipcRenderer.send('open-external', url),
   installUpdate: () => ipcRenderer.send('install-update'),
   captureScreenshot: () => ipcRenderer.send('capture-screenshot'),
+  startNativeLogs: (platform) => ipcRenderer.send('start-native-logs', platform),
+  stopNativeLogs: () => ipcRenderer.send('stop-native-logs'),
+  detectNativePlatform: () => ipcRenderer.invoke('detect-native-platform'),
 });

package/styles.css

@@ -1039,7 +1039,9 @@ body {
 /* ─────────────────────────────────────────────────────────────────────────────
    ASYNC STORAGE PANEL
 ───────────────────────────────────────────────────────────────────────────── */
-.storage-layout { display: grid; grid-template-columns: 240px 1fr; height: 100%; }
+.storage-layout { display: grid; grid-template-columns: 240px 4px 1fr; height: 100%; }
+.storage-resize-handle { background: var(--border); cursor: col-resize; transition: background 0.1s; }
+.storage-resize-handle:hover { background: var(--accent); }
 .storage-keys { display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow: hidden; }
 .storage-keys-list { flex: 1; overflow-y: auto; }
 .storage-keys-list::-webkit-scrollbar { width: 3px; }
@@ -1637,6 +1639,49 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 .net-hidden-unhide { font-size: 9px; background: transparent; border: 1px solid var(--border); color: var(--accent); border-radius: 3px; padding: 2px 6px; cursor: pointer; flex-shrink: 0; }
 .net-hidden-unhide:hover { background: rgba(61,136,255,.1); }
 
+/* ── Native Logs Panel ─────────────────────────────────────────────────────── */
+.native-connect-panel { flex: 1; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 24px; }
+.native-hero { text-align: center; max-width: 520px; width: 100%; }
+.native-platform-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
+.native-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; text-align: left; display: flex; flex-direction: column; }
+.native-card-icon { font-size: 22px; margin-bottom: 8px; }
+.native-card-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
+.native-card-hint { font-size: 10px; color: var(--text-dim); margin-bottom: 12px; }
+.native-card-hint code { background: var(--bg3); padding: 1px 4px; border-radius: 3px; color: var(--accent); }
+.native-card-prereq { font-size: 10px; color: var(--text-mid); line-height: 1.8; flex: 1; }
+.native-prereq-step { margin-bottom: 3px; padding-left: 4px; }
+.native-prereq-step code { background: var(--bg3); padding: 1px 4px; border-radius: 3px; color: var(--accent); font-size: 10px; }
+.native-connect-btn { margin-top: 12px; padding: 7px 18px; border-radius: 6px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.12s; }
+.native-connect-btn:hover { background: var(--accent); color: #fff; }
+.native-status { font-size: 10px; color: var(--text-dim); }
+.native-logs-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.native-filter-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--bg2); }
+.native-level-filters { display: flex; gap: 4px; }
+.native-log-list { flex: 1; overflow-y: auto; font-size: 11px; line-height: 1.5; }
+.native-log-row { display: flex; gap: 8px; padding: 3px 12px; border-bottom: 1px solid var(--border); font-family: inherit; align-items: baseline; }
+.native-log-row:hover { background: var(--bg3); }
+.native-log-time { color: var(--text-dim); font-size: 10px; flex-shrink: 0; width: 65px; }
+.native-log-level { font-size: 9px; font-weight: 700; flex-shrink: 0; width: 42px; text-align: center; padding: 1px 0; border-radius: 3px; }
+.native-log-tag { color: var(--accent); font-size: 10px; font-weight: 600; flex-shrink: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.native-log-header { display: flex; gap: 8px; align-items: baseline; }
+.native-log-preview { color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.native-log-full { display: none; padding: 6px 12px 8px 85px; font-size: 11px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text); background: var(--bg2); border-top: 1px solid var(--border); user-select: text; -webkit-user-select: text; }
+.native-log-row.expanded { background: var(--bg2); }
+.native-log-row.expanded .native-log-preview { white-space: normal; }
+.native-error .native-log-full, .native-fatal .native-log-full { color: var(--red); }
+.native-detect-status { font-size: 10px; margin: 8px 0 4px; min-height: 14px; }
+.native-verbose .native-log-level { color: var(--text-dim); background: var(--bg3); }
+.native-debug .native-log-level { color: var(--text-mid); background: var(--bg3); }
+.native-info .native-log-level { color: var(--green); background: rgba(61,214,140,.1); }
+.native-warn .native-log-level { color: var(--orange); background: rgba(255,165,0,.1); }
+.native-warn { background: rgba(255,165,0,.03); }
+.native-error .native-log-level { color: var(--red); background: rgba(255,94,114,.1); }
+.native-error { background: rgba(255,94,114,.04); }
+.native-error .native-log-msg { color: var(--red); }
+.native-fatal .native-log-level { color: #fff; background: var(--red); }
+.native-fatal { background: rgba(255,94,114,.08); }
+.native-fatal .native-log-msg { color: var(--red); font-weight: 700; }
+
 /* ── Support Button ────────────────────────────────────────────────────────── */
 .support-btn { background: linear-gradient(135deg, #ff813f, #ff5e72); color: #fff; border: none; padding: 8px 20px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; letter-spacing: 0.3px; }
 .support-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,94,114,.3); }