reactoradar 1.6.4 → 1.6.6

package/index.html

@@ -90,6 +90,18 @@
 
   </div>
 
+  <!-- Load order: app.js (state/helpers) → panels → init.js (IPC/boot) -->
   <script src="app.js"></script>
+  <script src="panels/settings.js"></script>
+  <script src="panels/console.js"></script>
+  <script src="panels/network.js"></script>
+  <script src="panels/ga4.js"></script>
+  <script src="panels/redux.js"></script>
+  <script src="panels/storage.js"></script>
+  <script src="panels/performance.js"></script>
+  <script src="panels/native.js"></script>
+  <script src="panels/react.js"></script>
+  <script src="panels/sources.js"></script>
+  <script src="init.js"></script>
 </body>
 </html>

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})`);
@@ -354,6 +375,7 @@ function startReactDevToolsServer() {
 function startBridgeServers() {
   // Redux Bridge
   startBridge(PORTS.REDUX_BRIDGE, 'redux', reduxClients, (event) => {
+    // console.log('[REDUX-DEBUG] Event from SDK:', event?.type, event?.action?.type);
     _send('redux-event', event);
   });
 
@@ -380,6 +402,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 +427,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');
+          }
         }
       });
     });
@@ -589,6 +621,9 @@ 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' }
@@ -603,6 +638,44 @@ function setupIPC() {
     });
   });
 
+  // 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);
@@ -654,10 +727,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;
     }
 
@@ -665,9 +737,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';
@@ -682,9 +754,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) => {
@@ -703,6 +776,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.4",
+  "version": "1.6.6",
   "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);
@@ -36,4 +36,5 @@ contextBridge.exposeInMainWorld('electronAPI', {
   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,123 @@ 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-dl-wrap { position: relative; }
+.version-dl-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 100;
+  min-width: 220px;
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.4);
+  padding: 4px 0;
+  margin-top: 4px;
+  animation: changelogSlideIn 0.12s ease-out;
+}
+.version-dl-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.version-dl-item:hover { background: var(--bg3); }
+.version-dl-icon { font-size: 16px; flex-shrink: 0; }
+.version-dl-name { font-size: 11px; font-weight: 600; color: var(--text); }
+.version-dl-hint { font-size: 9px; color: var(--text-dim); margin-top: 1px; }
+.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
 ───────────────────────────────────────────────────────────────────────────── */
@@ -1684,7 +1801,7 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 
 /* ── 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 { width: 150px; font-size: 10px; padding: 3px 6px; border: 1px solid var(--border); background: var(--bg2); 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; }
@@ -1695,13 +1812,19 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 .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-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: changelogFadeIn 0.15s ease-out; }
+@keyframes changelogFadeIn { from { opacity: 0; } to { opacity: 1; } }
+.changelog-modal { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; width: 520px; max-width: 90vw; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset; animation: changelogSlideIn 0.2s ease-out; }
+@keyframes changelogSlideIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
+.changelog-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg3); border-radius: 12px 12px 0 0; }
 .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); }
+.changelog-close { background: transparent; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: background 0.12s, color 0.12s; }
+.changelog-close:hover { color: var(--text); background: var(--bg4); }
+.changelog-body { flex: 1; overflow-y: auto; padding: 18px; font-size: 11px; line-height: 1.7; color: var(--text-mid); }
+.changelog-body::-webkit-scrollbar { width: 4px; }
+.changelog-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
+.changelog-link { color: var(--accent); text-decoration: none; cursor: pointer; border-bottom: 1px dotted var(--accent); transition: opacity 0.12s; }
+.changelog-link:hover { opacity: 0.8; }
 
 /* ── 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; }