reactoradar 1.6.3 → 1.6.5

package/app.js

@@ -194,23 +194,37 @@ function clearActiveTab() {
       const memHT = $('memHeapTotal'); if (memHT) memHT.textContent = '—';
       const memN = $('memNative'); if (memN) memN.textContent = '—';
       break;
+    case 'native':
+      _nativeState.logs = [];
+      if ($('nativeBadge')) $('nativeBadge').textContent = '0';
+      const nativeList = $('nativeLogList');
+      if (nativeList) nativeList.innerHTML = '';
+      break;
     default:
       break;
   }
 }
 
-// Clear all (used by IPC clear-all-ui from menu Cmd+K)
+// Clear all (used by IPC clear-all-ui from menu Cmd+K, and on device disconnect)
 function clearAll() {
+  // Cancel pending render batches
+  if (_consoleRAF) { cancelAnimationFrame(_consoleRAF); _consoleRAF = null; }
+  if (_netRAF) { cancelAnimationFrame(_netRAF); _netRAF = null; }
+  if (_storageRAF) { cancelAnimationFrame(_storageRAF); _storageRAF = null; }
+  // Console
   state.console.logs = [];
   _consolePending = [];
   _lastLogMsg = ''; _lastLogRow = null; _lastLogCount = 1;
+  // Network
   state.network.requests = {};
   state.network.order = [];
   state.network.selectedId = null;
   closeNetDetail();
+  // Redux
   state.redux.actions = [];
   state.redux.states = [];
   state.redux.selected = -1;
+  // Storage
   state.storage.entries = {};
   state.storage.keys = [];
   state.storage.selected = null;
@@ -226,6 +240,21 @@ function clearAll() {
   _nativeState.logs = [];
   const nativeList = $('nativeLogList');
   if (nativeList) nativeList.innerHTML = '';
+  // Performance
+  perfState.fps = [];
+  perfState.jsThread = [];
+  perfState.uiThread = [];
+  perfState.data = [];
+  const perfFPS = $('perfFPS'); if (perfFPS) perfFPS.textContent = '—';
+  const perfJS = $('perfJS'); if (perfJS) perfJS.textContent = '—';
+  const perfUI = $('perfUI'); if (perfUI) perfUI.textContent = '—';
+  clearPerfCanvas('perfFPSCanvas');
+  clearPerfCanvas('perfJSCanvas');
+  clearPerfCanvas('perfUICanvas');
+  // Memory
+  const memHU = $('memHeapUsed'); if (memHU) memHU.textContent = '—';
+  const memHT = $('memHeapTotal'); if (memHT) memHT.textContent = '—';
+  const memN = $('memNative'); if (memN) memN.textContent = '—';
   // Badges
   $('cBadge').textContent = '0';
   $('nBadge').textContent = '0';
@@ -241,6 +270,42 @@ function clearAll() {
   if (typeof renderGA4List === 'function') { renderGA4List(); renderGA4Summary(); }
 }
 
+// Free heavy in-memory data without clearing the visible UI.
+// Called on device disconnect and app quit to reduce memory footprint
+// while keeping logs/network/redux visible for inspection.
+function freeMemory() {
+  // Drop response/request bodies from network requests (biggest memory hog)
+  for (const id of state.network.order) {
+    const r = state.network.requests[id];
+    if (r) { r.responseBody = null; r.requestBody = null; }
+  }
+  // Trim console logs to a small tail (keep last 200 for reference)
+  if (state.console.logs.length > 200) {
+    state.console.logs = state.console.logs.slice(-200);
+  }
+  // Drop full Redux state snapshots (keep action metadata)
+  state.redux.states = [];
+  // Drop storage values (keep keys for reference)
+  for (const k in state.storage.entries) {
+    state.storage.entries[k] = null;
+  }
+  // Trim GA4 events
+  if (ga4State.events.length > 200) {
+    ga4State.events = ga4State.events.slice(-200);
+  }
+  // Trim native logs
+  if (_nativeState.logs.length > 200) {
+    _nativeState.logs = _nativeState.logs.slice(-200);
+  }
+  // Drop performance timeline data
+  perfState.data = [];
+  perfState.fps = [];
+  perfState.jsThread = [];
+  perfState.uiThread = [];
+  // Flush pending console batch
+  _consolePending = [];
+}
+
 // ─── CDP Button ───────────────────────────────────────────────────────────────
 $('btnCDP')?.addEventListener('click', () => {
   // Tell main process to open the CDP DevTools window with the best available target
@@ -294,15 +359,38 @@ if (window.electronAPI) {
     handleMemoryEvent(event);
   });
 
-  window.electronAPI.on('redux-connected', on => { updateDeviceBanner('redux', on); });
-  window.electronAPI.on('network-connected', on => { updateDeviceBanner('network', on); });
-  window.electronAPI.on('storage-connected', on => { updateDeviceBanner('storage', on); });
-  window.electronAPI.on('react-dt-status', on => { updateDeviceBanner('reactDT', on); });
-
   window.electronAPI.on('clear-all-ui', clearAll);
 
+  // When all device bridges disconnect, release heavy memory but keep logs visible.
+  // Debounced to avoid data loss during hot reloads or flaky connections.
+  let _disconnectTimer = null;
+  window.electronAPI.on('device-all-disconnected', () => {
+    clearTimeout(_disconnectTimer);
+    _disconnectTimer = setTimeout(() => {
+      console.log('[App] All devices disconnected — freeing memory');
+      freeMemory();
+    }, 3000);
+  });
+  // Cancel pending free if a device reconnects
+  const _cancelDisconnectTimer = () => { clearTimeout(_disconnectTimer); _disconnectTimer = null; };
+  window.electronAPI.on('redux-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('redux', on); });
+  window.electronAPI.on('network-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('network', on); });
+  window.electronAPI.on('storage-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('storage', on); });
+  window.electronAPI.on('react-dt-status', on => { updateDeviceBanner('reactDT', on); });
+
   // Cmd+F — focus the search input for the active panel
   function _handleFind() {
+    // If network detail is open, focus the detail search
+    if (state.activePanel === 'network' && state.network.selectedId) {
+      const wrap = $('detailSearchWrap');
+      const input = $('detailSearchInput');
+      if (wrap && input) {
+        wrap.style.display = 'flex';
+        input.focus();
+        input.select();
+        return;
+      }
+    }
     const searchMap = {
       console: 'consoleSearch',
       network: 'netSearchInput',
@@ -330,8 +418,9 @@ if (window.electronAPI) {
     }
   });
 
-  window.electronAPI.on('app-version', (version) => {
+  window.electronAPI.on('app-version', (version, isPackaged) => {
     state._appVersion = version;
+    state._isPackaged = !!isPackaged;
     // Update anywhere the version is displayed
     document.querySelectorAll('#aboutVersion').forEach(el => el.textContent = 'v' + version);
   });
@@ -366,6 +455,7 @@ function _applyUpdateBanner() {
   if (!info) return;
   const { current, latest, autoUpdate } = info;
   const downloaded = state._updateDownloaded;
+  const targetVersion = downloaded || latest;
 
   const el = $('aboutVersion');
   if (el) {
@@ -376,39 +466,94 @@ function _applyUpdateBanner() {
     }
   }
 
-  // Remove old button if state changed
+  // Remove old buttons if state changed
   const oldBtn = $('updateBtn');
   if (oldBtn && downloaded && !oldBtn.dataset.isRestart) oldBtn.parentElement?.remove();
+  const oldChangelog = $('changelogBtn');
+  if (oldChangelog && downloaded && !oldChangelog.dataset.updated) oldChangelog.remove();
+
+  const aboutEl = document.querySelector('.settings-about');
+  if (!aboutEl) return;
+
+  // Add "What's new?" link
+  if (!$('changelogBtn')) {
+    const link = document.createElement('div');
+    link.style.cssText = 'margin-top:6px;text-align:center';
+    link.innerHTML = `<span id="changelogBtn" class="about-link" style="font-size:10px;cursor:pointer" data-updated="${downloaded ? '1' : ''}">What's new in v${targetVersion}?</span>`;
+    aboutEl.appendChild(link);
+    $('changelogBtn')?.addEventListener('click', () => _showChangelog(targetVersion));
+  }
 
-  // Add update button in settings if not already there
+  // Add update button
   if (!$('updateBtn')) {
-    const aboutEl = document.querySelector('.settings-about');
-    if (aboutEl) {
-      const btn = document.createElement('div');
-      btn.style.cssText = 'margin-top:10px';
-      if (downloaded) {
-        // Update is downloaded — show "Restart & Update"
-        btn.innerHTML = '<button id="updateBtn" data-is-restart="1" class="tb-btn primary" style="font-size:11px;padding:6px 16px">Restart & Update to v' + downloaded + '</button>';
-        aboutEl.appendChild(btn);
-        $('updateBtn')?.addEventListener('click', () => {
-          window.electronAPI?.installUpdate();
-        });
-      } else if (autoUpdate) {
-        // Auto-update in progress — show downloading status
-        btn.innerHTML = '<button id="updateBtn" class="tb-btn" style="font-size:11px;padding:6px 16px;opacity:0.7" disabled>Downloading v' + latest + '...</button>';
-        aboutEl.appendChild(btn);
-      } else {
-        // npx/manual — show download link
-        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/reactoradar/releases');
-        });
-      }
+    const btn = document.createElement('div');
+    btn.style.cssText = 'margin-top:8px;text-align:center';
+    if (downloaded) {
+      btn.innerHTML = '<button id="updateBtn" data-is-restart="1" class="tb-btn primary" style="font-size:11px;padding:6px 16px">Restart & Update to v' + downloaded + '</button>';
+      aboutEl.appendChild(btn);
+      $('updateBtn')?.addEventListener('click', () => window.electronAPI?.installUpdate());
+    } else if (autoUpdate) {
+      btn.innerHTML = '<button id="updateBtn" class="tb-btn" style="font-size:11px;padding:6px 16px;opacity:0.7" disabled>Downloading v' + latest + '...</button>';
+      aboutEl.appendChild(btn);
+    } else {
+      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/reactoradar/releases'));
     }
   }
 }
 
+async function _showChangelog(version) {
+  if (!version || typeof version !== 'string') return;
+
+  // Remove existing modal
+  $('changelogModal')?.remove();
+
+  const safeVersion = esc(version);
+  const modal = document.createElement('div');
+  modal.id = 'changelogModal';
+  modal.className = 'changelog-modal-overlay';
+  modal.innerHTML = `
+    <div class="changelog-modal">
+      <div class="changelog-header">
+        <span class="changelog-title">What's New in v${safeVersion}</span>
+        <button class="changelog-close" id="changelogClose">&times;</button>
+      </div>
+      <div class="changelog-body" id="changelogBody">
+        <div style="color:var(--text-dim);padding:20px;text-align:center">Loading release notes...</div>
+      </div>
+    </div>`;
+  document.body.appendChild(modal);
+
+  // Close handlers
+  $('changelogClose')?.addEventListener('click', () => modal.remove());
+  modal.addEventListener('click', (e) => { if (e.target === modal) modal.remove(); });
+
+  // Fetch changelog
+  try {
+    const notes = await window.electronAPI?.fetchChangelog(version);
+    const body = $('changelogBody');
+    if (!body) return;
+    if (!notes || typeof notes !== 'string') {
+      body.innerHTML = '<div style="color:var(--text-dim);padding:20px;text-align:center">No release notes available.</div>';
+      return;
+    }
+    if (body && notes) {
+      // Simple markdown-like rendering
+      body.innerHTML = notes
+        .replace(/^### (.+)$/gm, '<h3 style="color:var(--accent);font-size:12px;font-weight:700;margin:12px 0 6px">$1</h3>')
+        .replace(/^## (.+)$/gm, '<h2 style="color:var(--text);font-size:14px;font-weight:700;margin:16px 0 8px">$1</h2>')
+        .replace(/^- \*\*(.+?)\*\*(.*)$/gm, '<div style="margin:3px 0;font-size:11px;line-height:1.6"><b style="color:var(--text)">$1</b><span style="color:var(--text-dim)">$2</span></div>')
+        .replace(/^- (.+)$/gm, '<div style="margin:3px 0;font-size:11px;line-height:1.6;color:var(--text-mid)">• $1</div>')
+        .replace(/`([^`]+)`/g, '<code style="background:var(--bg3);padding:1px 4px;border-radius:3px;color:var(--accent);font-size:10px">$1</code>')
+        .replace(/\n\n/g, '<br/>');
+    }
+  } catch {
+    const body = $('changelogBody');
+    if (body) body.innerHTML = '<div style="color:var(--red);padding:20px;text-align:center">Could not fetch release notes</div>';
+  }
+}
+
 function updateDeviceBanner(service, connected) {
   state.connections[service] = connected;
   const el = $('deviceStatus');
@@ -755,6 +900,41 @@ window.electronAPI?.on('console-event', addConsoleLog);
 // ─── Object Tree Renderer (Chrome DevTools-like) ─────────────────────────────
 // Builds interactive, collapsible DOM nodes for objects/arrays.
 
+// Collect all entries for an object: own data properties + prototype getter values.
+// Getter-derived keys use the clean name (e.g. "deliveryId") and skip backing
+// fields (e.g. "_deliveryId") so the log output mirrors the model's public API.
+function collectEntries(val) {
+  if (Array.isArray(val)) return val.map((v, i) => [i, v]);
+
+  const result = {};
+  const getterKeys = new Set();
+
+  // 1. Walk prototype chain and invoke getters
+  let proto = Object.getPrototypeOf(val);
+  while (proto && proto !== Object.prototype) {
+    const descs = Object.getOwnPropertyDescriptors(proto);
+    for (const [k, desc] of Object.entries(descs)) {
+      if (k === 'constructor') continue;
+      if (desc.get && !(k in result)) {
+        try { result[k] = desc.get.call(val); } catch { /* skip broken getters */ }
+        getterKeys.add(k);
+      }
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+
+  // 2. Add own data properties, but skip backing fields whose getter is present.
+  //    Convention: getter "foo" backs "_foo"; if "foo" was collected, skip "_foo".
+  const ownKeys = Object.keys(val);
+  for (const k of ownKeys) {
+    const clean = k.startsWith('_') ? k.slice(1) : null;
+    if (clean && getterKeys.has(clean)) continue; // skip _backing field
+    if (!(k in result)) result[k] = val[k];
+  }
+
+  return Object.entries(result);
+}
+
 function objPreview(val, maxLen) {
   maxLen = maxLen || 80;
   if (val === null) return 'null';
@@ -772,16 +952,16 @@ function objPreview(val, maxLen) {
     return `(${val.length}) [${items.join(', ')}${suffix}]`;
   }
   if (typeof val === 'object') {
-    const keys = Object.keys(val);
-    if (keys.length === 0) return '{}';
+    const entries = collectEntries(val);
+    if (entries.length === 0) return '{}';
     const items = [];
     let len = 2;
-    for (let i = 0; i < keys.length && len < maxLen; i++) {
-      const s = `${keys[i]}: ${primitivePreview(val[keys[i]])}`;
+    for (let i = 0; i < entries.length && len < maxLen; i++) {
+      const s = `${entries[i][0]}: ${primitivePreview(entries[i][1])}`;
       len += s.length + 2;
       items.push(s);
     }
-    const suffix = items.length < keys.length ? ', ...' : '';
+    const suffix = items.length < entries.length ? ', ...' : '';
     return `{${items.join(', ')}${suffix}}`;
   }
   return primitivePreview(val);
@@ -850,7 +1030,7 @@ function createTreeNode(key, val, startCollapsed) {
   function populateChildren() {
     if (populated) return;
     populated = true;
-    const entries = isArray ? val.map((v, i) => [i, v]) : Object.entries(val);
+    const entries = collectEntries(val);
     entries.forEach(([k, v]) => {
       children.appendChild(createTreeNode(k, v, true));
     });
@@ -1255,6 +1435,13 @@ function initNetworkPanel() {
       <div class="net-detail-pane" id="netDetailPane">
         <div class="net-detail-bar">
           <div class="detail-tabs" id="netDetailTabs"></div>
+          <div class="detail-search-wrap" id="detailSearchWrap" style="display:none">
+            <input id="detailSearchInput" class="detail-search-input" placeholder="Search key or value..." />
+            <span id="detailSearchCount" class="detail-search-count"></span>
+            <button class="detail-search-nav" id="detailSearchPrev" title="Previous">&#9650;</button>
+            <button class="detail-search-nav" id="detailSearchNext" title="Next">&#9660;</button>
+            <button class="detail-search-close" id="detailSearchClose" title="Close search">&times;</button>
+          </div>
           <button class="detail-close" id="netDetailClose" title="Close">&times;</button>
         </div>
         <div class="detail-content" id="netDetailContent"></div>
@@ -1408,6 +1595,121 @@ function initNetworkPanel() {
   // Close detail button
   $('netDetailClose').addEventListener('click', closeNetDetail);
 
+  // Detail panel search
+  let _detailSearchMatches = [];
+  let _detailSearchIdx = -1;
+
+  function _detailSearch() {
+    const term = $('detailSearchInput')?.value?.trim().toLowerCase();
+    const body = $('netDetailContent');
+    if (!body || !term) { _detailClearSearch(); return; }
+
+    // Remove old highlights
+    body.querySelectorAll('.detail-search-hl').forEach(el => {
+      const parent = el.parentNode;
+      parent.replaceChild(document.createTextNode(el.textContent), el);
+      parent.normalize();
+    });
+
+    _detailSearchMatches = [];
+    _detailSearchIdx = -1;
+
+    // Walk all text nodes and highlight matches
+    const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null);
+    const textNodes = [];
+    while (walker.nextNode()) textNodes.push(walker.currentNode);
+
+    textNodes.forEach(node => {
+      const text = node.textContent;
+      const lower = text.toLowerCase();
+      if (!lower.includes(term)) return;
+
+      const frag = document.createDocumentFragment();
+      let lastIdx = 0;
+      let idx;
+      while ((idx = lower.indexOf(term, lastIdx)) !== -1) {
+        if (idx > lastIdx) frag.appendChild(document.createTextNode(text.slice(lastIdx, idx)));
+        const hl = document.createElement('span');
+        hl.className = 'detail-search-hl';
+        hl.textContent = text.slice(idx, idx + term.length);
+        _detailSearchMatches.push(hl);
+        frag.appendChild(hl);
+        lastIdx = idx + term.length;
+      }
+      if (lastIdx < text.length) frag.appendChild(document.createTextNode(text.slice(lastIdx)));
+      node.parentNode.replaceChild(frag, node);
+    });
+
+    // Update count
+    const countEl = $('detailSearchCount');
+    if (countEl) countEl.textContent = _detailSearchMatches.length ? `${_detailSearchMatches.length} found` : 'No match';
+
+    // Navigate to first match
+    if (_detailSearchMatches.length) _detailNavTo(0);
+  }
+
+  function _detailNavTo(idx) {
+    // Remove active highlight from previous
+    if (_detailSearchIdx >= 0 && _detailSearchMatches[_detailSearchIdx]) {
+      _detailSearchMatches[_detailSearchIdx].classList.remove('active');
+    }
+    _detailSearchIdx = idx;
+    const el = _detailSearchMatches[idx];
+    if (!el) return;
+    el.classList.add('active');
+    el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    // Update count
+    const countEl = $('detailSearchCount');
+    if (countEl) countEl.textContent = `${idx + 1}/${_detailSearchMatches.length}`;
+  }
+
+  function _detailClearSearch() {
+    const body = $('netDetailContent');
+    if (body) {
+      body.querySelectorAll('.detail-search-hl').forEach(el => {
+        const parent = el.parentNode;
+        parent.replaceChild(document.createTextNode(el.textContent), el);
+        parent.normalize();
+      });
+    }
+    _detailSearchMatches = [];
+    _detailSearchIdx = -1;
+    const countEl = $('detailSearchCount');
+    if (countEl) countEl.textContent = '';
+  }
+
+  $('detailSearchInput')?.addEventListener('input', () => {
+    clearTimeout($('detailSearchInput')._debounce);
+    $('detailSearchInput')._debounce = setTimeout(_detailSearch, 200);
+  });
+  $('detailSearchInput')?.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (!_detailSearchMatches.length) return;
+      const next = e.shiftKey
+        ? (_detailSearchIdx - 1 + _detailSearchMatches.length) % _detailSearchMatches.length
+        : (_detailSearchIdx + 1) % _detailSearchMatches.length;
+      _detailNavTo(next);
+    }
+    if (e.key === 'Escape') {
+      _detailClearSearch();
+      $('detailSearchWrap').style.display = 'none';
+    }
+  });
+  $('detailSearchNext')?.addEventListener('click', () => {
+    if (!_detailSearchMatches.length) return;
+    _detailNavTo((_detailSearchIdx + 1) % _detailSearchMatches.length);
+  });
+  $('detailSearchPrev')?.addEventListener('click', () => {
+    if (!_detailSearchMatches.length) return;
+    _detailNavTo((_detailSearchIdx - 1 + _detailSearchMatches.length) % _detailSearchMatches.length);
+  });
+  $('detailSearchClose')?.addEventListener('click', () => {
+    _detailClearSearch();
+    $('detailSearchInput').value = '';
+    $('detailSearchWrap').style.display = 'none';
+  });
+
   buildNetHeader();
 }
 
@@ -1828,14 +2130,38 @@ function closeNetDetail() {
   );
 }
 
+function _estimateSize(val) {
+  if (val == null) return 0;
+  if (typeof val === 'string') return val.length;
+  try { return JSON.stringify(val).length; } catch { return 0; }
+}
+
+function _formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / 1048576).toFixed(1)}MB`;
+}
+
 function renderNetDetailTabs(r) {
   const tabs = $('netDetailTabs');
   tabs.innerHTML = '';
-  ['Headers', 'Request', 'Preview', 'Response'].forEach(label => {
-    const key = label.toLowerCase();
+
+  const tabDefs = [
+    { label: 'Headers', key: 'headers' },
+    { label: 'Request', key: 'request', sizeFrom: 'requestBody' },
+    { label: 'Preview', key: 'preview', sizeFrom: 'responseBody' },
+    { label: 'Response', key: 'response', sizeFrom: 'responseBody' },
+  ];
+
+  tabDefs.forEach(({ label, key, sizeFrom }) => {
     const btn = document.createElement('button');
     btn.className = 'detail-tab' + (r._tab === key ? ' active' : '');
-    btn.textContent = label;
+    let text = label;
+    if (sizeFrom && r[sizeFrom]) {
+      const size = _estimateSize(r[sizeFrom]);
+      if (size > 0) text += ` (${_formatBytes(size)})`;
+    }
+    btn.textContent = text;
     btn.addEventListener('click', () => {
       r._tab = key;
       tabs.querySelectorAll('.detail-tab').forEach(b => b.classList.remove('active'));
@@ -1844,6 +2170,12 @@ function renderNetDetailTabs(r) {
     });
     tabs.appendChild(btn);
   });
+
+  // Show search box for Preview/Response tabs
+  const searchWrap = $('detailSearchWrap');
+  if (searchWrap) {
+    searchWrap.style.display = (r._tab === 'preview' || r._tab === 'response' || r._tab === 'headers') ? 'flex' : 'none';
+  }
 }
 
 function renderNetDetailContent(r) {
@@ -3036,10 +3368,18 @@ function initNativeLogsPanel() {
       <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'));
+  // Connect buttons — auto-enable tab when user clicks connect
+  function _enableNativeTab() {
+    const vis = getTabVisibility();
+    if (!vis['native']) {
+      vis['native'] = true;
+      setTabVisibility(vis);
+      applyTabVisibility();
+    }
+  }
+  $('nativeConnectAndroid')?.addEventListener('click', () => { _enableNativeTab(); window.electronAPI?.startNativeLogs('android'); });
+  $('nativeConnectIOSSim')?.addEventListener('click', () => { _enableNativeTab(); window.electronAPI?.startNativeLogs('ios-sim'); });
+  $('nativeConnectIOSDevice')?.addEventListener('click', () => { _enableNativeTab(); window.electronAPI?.startNativeLogs('ios-device'); });
   $('nativeDisconnect')?.addEventListener('click', () => window.electronAPI?.stopNativeLogs());
 
   // Clear buttons (toolbar + logs area)
@@ -3649,6 +3989,27 @@ function initSettingsPanel() {
               <b style="color:var(--text)">5.</b> <code style="color:var(--accent);background:var(--bg3);padding:1px 5px;border-radius:3px">npx reactoradar remove</code> to uninstall
             </div>
           </div>
+          <div class="settings-section">
+            <div class="settings-section-title">Version History</div>
+            <div class="settings-hint" style="margin-bottom:4px">Roll back to a previous version if you notice issues.</div>
+            <div class="settings-hint rollback-steps" id="rollbackSteps" style="margin-bottom:10px;line-height:1.8;font-size:10px">
+              <b style="color:var(--text)">How to roll back:</b><br/>
+              <span id="rollbackDmgSteps" style="display:none">
+                <b style="color:var(--text)">1.</b> Click <b>Download</b> on the version you want<br/>
+                <b style="color:var(--text)">2.</b> Open the downloaded <code style="color:var(--accent);background:var(--bg3);padding:1px 4px;border-radius:3px">.dmg</code> file<br/>
+                <b style="color:var(--text)">3.</b> Drag the app to Applications (replace existing)<br/>
+                <b style="color:var(--text)">4.</b> Relaunch ReactoRadar
+              </span>
+              <span id="rollbackNpmSteps" style="display:none">
+                <b style="color:var(--text)">1.</b> Run <code style="color:var(--accent);background:var(--bg3);padding:1px 4px;border-radius:3px">npx reactoradar@&lt;version&gt;</code> e.g. <code style="color:var(--accent);background:var(--bg3);padding:1px 4px;border-radius:3px">npx reactoradar@1.6.4</code><br/>
+                <b style="color:var(--text)">2.</b> Or pin globally: <code style="color:var(--accent);background:var(--bg3);padding:1px 4px;border-radius:3px">npm i -g reactoradar@1.6.4</code><br/>
+                <b style="color:var(--text)">3.</b> Run <code style="color:var(--accent);background:var(--bg3);padding:1px 4px;border-radius:3px">reactoradar</code> to launch
+              </span>
+            </div>
+            <div id="versionHistoryList" class="version-history-list">
+              <div style="color:var(--text-dim);font-size:11px;padding:12px;text-align:center">Loading versions...</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>`;
@@ -3755,6 +4116,120 @@ function initSettingsPanel() {
 
   // Apply update banner if update info arrived before settings panel was created
   _applyUpdateBanner();
+
+  // Fetch and render version history for rollback
+  _loadVersionHistory();
+}
+
+function _loadVersionHistory() {
+  const container = $('versionHistoryList');
+  if (!container) return;
+  if (!window.electronAPI || typeof window.electronAPI.fetchReleases !== 'function') {
+    container.innerHTML = '<div style="color:var(--text-dim);font-size:11px;padding:12px;text-align:center">Version history not available.</div>';
+    return;
+  }
+
+  // Show appropriate rollback steps based on install type
+  const isPackaged = !!state._isPackaged;
+  const dmgSteps = $('rollbackDmgSteps');
+  const npmSteps = $('rollbackNpmSteps');
+  if (dmgSteps) dmgSteps.style.display = isPackaged ? '' : 'none';
+  if (npmSteps) npmSteps.style.display = isPackaged ? 'none' : '';
+
+  window.electronAPI.fetchReleases().then(releases => {
+    if (!Array.isArray(releases) || releases.length === 0) {
+      container.innerHTML = '<div style="color:var(--text-dim);font-size:11px;padding:12px;text-align:center">Could not load versions.</div>';
+      return;
+    }
+
+    const currentVersion = state._appVersion || '';
+    container.innerHTML = '';
+
+    releases.forEach(r => {
+      if (!r || !r.version) return; // skip malformed entries
+
+      const isCurrent = r.version === currentVersion;
+      const row = document.createElement('div');
+      row.className = 'version-row' + (isCurrent ? ' version-current' : '');
+
+      // Safe date formatting
+      let dateStr = '';
+      if (r.date) {
+        try {
+          const d = new Date(r.date);
+          if (!isNaN(d.getTime())) {
+            dateStr = d.toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' });
+          }
+        } catch { /* skip bad date */ }
+      }
+
+      // Build action button based on install type
+      let actionHtml = '';
+      if (isCurrent) {
+        actionHtml = '<span class="version-installed">Installed</span>';
+      } else if (isPackaged) {
+        actionHtml = '<button class="version-install-btn" title="Download .dmg for this version">Download</button>';
+      } else {
+        actionHtml = `<button class="version-npm-btn" title="Copy npm install command">npx @${esc(r.version)}</button>`;
+      }
+
+      row.innerHTML = `
+        <div class="version-info">
+          <span class="version-tag">v${esc(r.version)}${r.prerelease ? ' <span class="version-pre">pre</span>' : ''}${isCurrent ? ' <span class="version-badge">current</span>' : ''}</span>
+          <span class="version-date">${esc(dateStr)}</span>
+        </div>
+        <div class="version-actions">
+          ${actionHtml}
+          <button class="version-notes-btn" title="View release notes">Notes</button>
+        </div>`;
+
+      // DMG download button — opens the .dmg asset or release page
+      const installBtn = row.querySelector('.version-install-btn');
+      if (installBtn) {
+        installBtn.addEventListener('click', () => {
+          const url = r.dmgUrl || r.htmlUrl || '';
+          if (url) {
+            window.electronAPI.openExternal(url);
+          }
+        });
+      }
+
+      // NPM copy button — copies the npx command to clipboard
+      const npmBtn = row.querySelector('.version-npm-btn');
+      if (npmBtn) {
+        npmBtn.addEventListener('click', () => {
+          const cmd = `npx reactoradar@${r.version}`;
+          navigator.clipboard.writeText(cmd).then(() => {
+            const orig = npmBtn.textContent;
+            npmBtn.textContent = 'Copied!';
+            npmBtn.style.color = 'var(--green)';
+            setTimeout(() => { npmBtn.textContent = orig; npmBtn.style.color = ''; }, 2000);
+          }).catch(() => {});
+        });
+      }
+
+      // Notes button — show changelog in modal
+      const notesBtn = row.querySelector('.version-notes-btn');
+      if (notesBtn) {
+        notesBtn.addEventListener('click', () => {
+          if (r.version && typeof _showChangelog === 'function') {
+            _showChangelog(r.version);
+          }
+        });
+      }
+
+      container.appendChild(row);
+    });
+
+    // If no rows were rendered (all entries were malformed)
+    if (container.children.length === 0) {
+      container.innerHTML = '<div style="color:var(--text-dim);font-size:11px;padding:12px;text-align:center">No versions found.</div>';
+    }
+  }).catch(() => {
+    if (container) {
+      container.innerHTML = '<div style="color:var(--text-dim);font-size:11px;padding:12px;text-align:center">Could not load versions. Check your internet connection.</div>';
+    }
+  });
 }
 
 // ─── Memory Monitor ──────────────────────────────────────────────────────────

package/main.js

@@ -35,6 +35,7 @@ function _send(channel, ...args) {
 let reduxClients   = new Set();
 let storageClients = new Set();
 let networkClients = new Set();
+const _bridgeServers = [];  // track bridge WSS instances for cleanup on quit
 
 // ─── Set dock icon ASAP (before app ready) ──────────────────────────────────
 const _appIcon = nativeImage.createFromPath(path.join(__dirname, 'ReactoRadar.png'));
@@ -74,15 +75,16 @@ if (gotLock) app.whenReady().then(async () => {
 
   await createMainWindow();
 
-  // Send version to renderer — try package.json, fallback to app.getVersion()
+  // Send version + install type to renderer — try package.json, fallback to app.getVersion()
   let appVersion;
   try { appVersion = require('./package.json').version; } catch { appVersion = app.getVersion(); }
+  const isPackaged = app.isPackaged;
   // Send multiple times to ensure renderer catches it (covers race conditions)
   mainWindow.webContents.on('did-finish-load', () => {
     // Send immediately + retries
-    _send('app-version', appVersion);
+    _send('app-version', appVersion, isPackaged);
     [500, 2000, 5000].forEach(delay => {
-      setTimeout(() => _send('app-version', appVersion), delay);
+      setTimeout(() => _send('app-version', appVersion, isPackaged), delay);
     });
   });
 
@@ -102,12 +104,27 @@ app.on('window-all-closed', () => {
 
 app.on('before-quit', () => {
   _forceQuit = true;
+  // Free renderer memory before shutdown (logs are not cleared — user may still see them briefly)
+  _send('device-all-disconnected');
+  // Close CDP DevTools window if open
+  if (devtoolsWindow && !devtoolsWindow.isDestroyed()) {
+    devtoolsWindow.destroy();
+    devtoolsWindow = null;
+  }
   // Close all WS servers gracefully
   if (reactDTServer) {
     reactDTServer.close();
     reactDTClients.forEach(ws => ws.close());
     reactDTClients.clear();
   }
+  // Close bridge servers and disconnect all clients
+  _bridgeServers.forEach(wss => {
+    wss.clients.forEach(ws => ws.close());
+    wss.close();
+  });
+  reduxClients.clear();
+  storageClients.clear();
+  networkClients.clear();
 });
 
 app.on('activate', () => {
@@ -336,6 +353,10 @@ function startReactDevToolsServer() {
         });
       });
 
+      ws.on('error', (err) => {
+        console.warn(`[ReactDT] Client error:`, err.message);
+      });
+
       ws.on('close', () => {
         reactDTClients.delete(ws);
         console.log(`[ReactDT] Client disconnected (total: ${reactDTClients.size})`);
@@ -380,6 +401,7 @@ function startBridgeServers() {
 function startBridge(port, name, clients, onEvent) {
   try {
     const wss = new WebSocketServer({ port });
+    _bridgeServers.push(wss);
     wss.on('error', (err) => {
       if (err.code === 'EADDRINUSE') {
         console.error(`[${name}] Port ${port} is already in use — another ReactoRadar or debugger may be running.`);
@@ -404,10 +426,19 @@ function startBridge(port, name, clients, onEvent) {
         }
       });
 
+      ws.on('error', (err) => {
+        console.warn(`[${name}] Client error:`, err.message);
+      });
+
       ws.on('close', () => {
         clients.delete(ws);
         if (clients.size === 0) {
           _send(`${name}-connected`, false);
+          // When every bridge has zero clients, tell the renderer to clear old data
+          if (reduxClients.size === 0 && storageClients.size === 0 && networkClients.size === 0) {
+            console.log('[Bridge] All device connections closed — sending clear signal');
+            _send('device-all-disconnected');
+          }
         }
       });
     });
@@ -588,6 +619,62 @@ function setupIPC() {
     }
   });
 
+  ipcMain.handle('fetch-changelog', async (_, version) => {
+    if (!version || typeof version !== 'string' || !/^[\d]+\.[\d]+\.[\d]+/.test(version)) {
+      return 'Invalid version.';
+    }
+    return new Promise((resolve) => {
+      https.get(`https://api.github.com/repos/sharanagouda/reactoradar/releases/tags/v${version}`, {
+        headers: { 'User-Agent': 'ReactoRadar', 'Accept': 'application/vnd.github.v3+json' }
+      }, (res) => {
+        let data = '';
+        res.on('data', d => data += d);
+        res.on('end', () => {
+          try { resolve(JSON.parse(data).body || 'No release notes available.'); }
+          catch { resolve('Could not fetch release notes.'); }
+        });
+      }).on('error', () => resolve('Could not connect to GitHub.'));
+    });
+  });
+
+  // Fetch all releases for version history / rollback
+  ipcMain.handle('fetch-releases', async () => {
+    return new Promise((resolve) => {
+      https.get('https://api.github.com/repos/sharanagouda/reactoradar/releases?per_page=20', {
+        headers: { 'User-Agent': 'ReactoRadar', 'Accept': 'application/vnd.github.v3+json' }
+      }, (res) => {
+        let data = '';
+        res.on('data', d => data += d);
+        res.on('end', () => {
+          try {
+            const releases = JSON.parse(data);
+            if (!Array.isArray(releases)) { resolve([]); return; }
+            const mapped = [];
+            for (const r of releases) {
+              if (!r || typeof r !== 'object') continue;
+              const tag = r.tag_name || '';
+              const version = tag.replace(/^v/, '');
+              if (!version) continue; // skip entries with no version
+              const assets = Array.isArray(r.assets) ? r.assets : [];
+              mapped.push({
+                version,
+                tag,
+                name: r.name || tag || version,
+                date: r.published_at || null,
+                prerelease: !!r.prerelease,
+                body: r.body || '',
+                dmgUrl: (assets.find(a => a && a.name && a.name.endsWith('.dmg')) || {}).browser_download_url || '',
+                zipUrl: (assets.find(a => a && a.name && a.name.endsWith('.zip')) || {}).browser_download_url || '',
+                htmlUrl: r.html_url || '',
+              });
+            }
+            resolve(mapped);
+          } catch { resolve([]); }
+        });
+      }).on('error', () => resolve([]));
+    });
+  });
+
   ipcMain.on('install-update', () => {
     if (autoUpdater) {
       autoUpdater.quitAndInstall(false, true);
@@ -639,10 +726,9 @@ function setupIPC() {
   });
 
   ipcMain.on('start-native-logs', (_, platform) => {
-    // Kill existing process group
+    // Kill existing process
     if (_nativeLogProcess) {
-      try { process.kill(-_nativeLogProcess.pid); } catch {}
-      try { _nativeLogProcess.kill(); } catch {}
+      try { _nativeLogProcess.kill('SIGTERM'); } catch {}
       _nativeLogProcess = null;
     }
 
@@ -650,9 +736,9 @@ function setupIPC() {
     let cmd, args;
 
     if (platform === 'android') {
-      // adb logcat — filter for app-relevant logs
+      // adb logcat — show only new logs from now (not historical buffer)
       cmd = 'adb';
-      args = ['logcat', '-v', 'threadtime', '*:W']; // Warnings and above
+      args = ['logcat', '-v', 'threadtime', '-T', '1', '*:W']; // -T 1 = last 1 line then real-time
     } else if (platform === 'ios-sim') {
       // xcrun simctl for iOS Simulator — use syslog style for parseable output
       cmd = 'xcrun';
@@ -667,9 +753,10 @@ function setupIPC() {
     }
 
     try {
-      _nativeLogProcess = spawn(cmd, args, { stdio: ['ignore', 'pipe', 'pipe'], detached: true });
+      _nativeLogProcess = spawn(cmd, args, { stdio: ['ignore', 'pipe', 'pipe'] });
 
       _send('native-status', { connected: true, platform });
+      console.log(`[NativeLogs] Started ${cmd} ${args.join(' ')} (pid: ${_nativeLogProcess.pid})`);
 
       let buffer = '';
       _nativeLogProcess.stdout.on('data', (chunk) => {
@@ -688,6 +775,10 @@ function setupIPC() {
         if (text) _send('native-log', { level: 'error', message: text, source: 'stderr', ts: Date.now() });
       });
 
+      // Guard against stream errors (broken pipe, etc.)
+      _nativeLogProcess.stdout.on('error', () => {});
+      _nativeLogProcess.stderr.on('error', () => {});
+
       _nativeLogProcess.on('close', (code) => {
         _nativeLogProcess = null;
         _send('native-status', { connected: false, error: code ? `Process exited with code ${code}` : 'Disconnected' });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "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,7 +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',
+      'native-log', 'native-status', 'device-all-disconnected',
     ];
     if (allowed.includes(channel)) {
       ipcRenderer.removeAllListeners(channel);
@@ -35,4 +35,6 @@ contextBridge.exposeInMainWorld('electronAPI', {
   startNativeLogs: (platform) => ipcRenderer.send('start-native-logs', platform),
   stopNativeLogs: () => ipcRenderer.send('stop-native-logs'),
   detectNativePlatform: () => ipcRenderer.invoke('detect-native-platform'),
+  fetchChangelog: (version) => ipcRenderer.invoke('fetch-changelog', version),
+  fetchReleases: () => ipcRenderer.invoke('fetch-releases'),
 });

package/styles.css

@@ -1320,6 +1320,96 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
   text-decoration: underline;
 }
 
+/* Version History */
+.version-history-list {
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg2);
+}
+.version-history-list::-webkit-scrollbar { width: 3px; }
+.version-history-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
+.version-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  font-size: 11px;
+  transition: background 0.15s;
+}
+.version-row:last-child { border-bottom: none; }
+.version-row:hover { background: var(--bg3); }
+.version-row.version-current { background: color-mix(in srgb, var(--accent) 8%, transparent); }
+.version-info { display: flex; flex-direction: column; gap: 2px; }
+.version-tag { color: var(--text); font-weight: 600; font-size: 12px; }
+.version-date { color: var(--text-dim); font-size: 10px; }
+.version-badge {
+  display: inline-block;
+  background: var(--green);
+  color: #000;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-left: 6px;
+  vertical-align: middle;
+  text-transform: uppercase;
+}
+.version-pre {
+  display: inline-block;
+  background: var(--yellow);
+  color: #000;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-left: 4px;
+  vertical-align: middle;
+}
+.version-actions { display: flex; gap: 6px; align-items: center; }
+.version-installed {
+  font-size: 10px;
+  color: var(--green);
+  font-weight: 600;
+}
+.version-install-btn {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 3px 10px;
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.version-install-btn:hover { opacity: 0.85; }
+.version-notes-btn {
+  background: transparent;
+  color: var(--text-mid);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 10px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+.version-npm-btn {
+  background: transparent;
+  color: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 10px;
+  font-family: var(--font-mono, monospace);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.version-npm-btn:hover { background: var(--accent); color: #fff; }
+.version-notes-btn:hover { color: var(--accent); border-color: var(--accent); }
+
 /* ─────────────────────────────────────────────────────────────────────────────
    SOURCES PANEL
 ───────────────────────────────────────────────────────────────────────────── */
@@ -1682,6 +1772,27 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 .native-fatal { background: rgba(255,94,114,.08); }
 .native-fatal .native-log-msg { color: var(--red); font-weight: 700; }
 
+/* ── Detail Panel Search ───────────────────────────────────────────────────── */
+.detail-search-wrap { display: flex; align-items: center; gap: 4px; margin-left: auto; padding: 0 6px; }
+.detail-search-input { width: 150px; font-size: 10px; padding: 3px 6px; border: 1px solid var(--border); background: var(--bg1); color: var(--text); border-radius: 3px; outline: none; }
+.detail-search-input:focus { border-color: var(--accent); }
+.detail-search-count { font-size: 9px; color: var(--text-dim); white-space: nowrap; min-width: 45px; }
+.detail-search-nav { background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-size: 9px; width: 18px; height: 18px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.detail-search-nav:hover { background: var(--bg3); color: var(--text); }
+.detail-search-close { background: transparent; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; padding: 0 2px; }
+.detail-search-close:hover { color: var(--text); }
+.detail-search-hl { background: rgba(255,213,79,.3); border-radius: 2px; padding: 0 1px; }
+.detail-search-hl.active { background: rgba(255,213,79,.7); outline: 1px solid rgba(255,213,79,.9); }
+
+/* ── Changelog Modal ───────────────────────────────────────────────────────── */
+.changelog-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; display: flex; align-items: center; justify-content: center; }
+.changelog-modal { background: var(--bg1); border: 1px solid var(--border); border-radius: 10px; width: 520px; max-width: 90vw; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
+.changelog-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
+.changelog-title { font-size: 13px; font-weight: 700; color: var(--text); }
+.changelog-close { background: transparent; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 0 4px; }
+.changelog-close:hover { color: var(--text); }
+.changelog-body { flex: 1; overflow-y: auto; padding: 16px; font-size: 11px; line-height: 1.6; color: var(--text-mid); }
+
 /* ── 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); }