reactoradar 1.6.5 → 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

@@ -375,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);
   });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.6.5",
+  "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/styles.css

@@ -1396,6 +1396,33 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
   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);
@@ -1774,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; }
@@ -1785,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; }

package/src/main/main.js

@@ -1,396 +0,0 @@
-'use strict';
-
-const { app, BrowserWindow, ipcMain, Menu, shell, nativeTheme } = require('electron');
-const path = require('path');
-const http = require('http');
-const { WebSocketServer, WebSocket } = require('ws');
-
-// ─── Ports ────────────────────────────────────────────────────────────────────
-const PORTS = {
-  METRO:         8081,   // Metro bundler (CDP proxy lives here)
-  REACT_DT:      8097,   // react-devtools-core server port
-  REDUX_BRIDGE:  9090,   // our custom Redux WS bridge
-  STORAGE_BRIDGE:9091,   // AsyncStorage WS bridge
-  NETWORK_BRIDGE:9092,   // Network intercept WS bridge
-};
-
-// ─── Windows ──────────────────────────────────────────────────────────────────
-let mainWindow = null;
-let devtoolsWindow = null;  // hosts the embedded CDP DevTools frontend
-
-// ─── State ────────────────────────────────────────────────────────────────────
-let reduxClients   = new Set();
-let storageClients = new Set();
-let networkClients = new Set();
-
-// ─── App lifecycle ────────────────────────────────────────────────────────────
-app.whenReady().then(async () => {
-  // Theme will be set by renderer via IPC once it reads localStorage
-  nativeTheme.themeSource = 'dark';
-
-  await createMainWindow();
-  startBridgeServers();
-  startReactDevToolsServer();
-  setupMetroCDPProxy();
-  setupIPC();
-  buildMenu();
-});
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') app.quit();
-});
-
-app.on('before-quit', () => {
-  // Close all WS servers gracefully
-  if (reactDTServer) {
-    reactDTServer.close();
-    reactDTClients.forEach(ws => ws.close());
-    reactDTClients.clear();
-  }
-});
-
-app.on('activate', () => {
-  if (BrowserWindow.getAllWindows().length === 0) createMainWindow();
-});
-
-// ─── Main Window ──────────────────────────────────────────────────────────────
-async function createMainWindow() {
-  mainWindow = new BrowserWindow({
-    width: 1400,
-    height: 900,
-    minWidth: 900,
-    minHeight: 600,
-    titleBarStyle: 'hiddenInset',
-    backgroundColor: '#0a0b0e',
-    vibrancy: 'under-window',
-    visualEffectState: 'active',
-    webPreferences: {
-      nodeIntegration: false,
-      contextIsolation: true,
-      preload: path.join(__dirname, 'preload.js'),
-    },
-    icon: path.join(__dirname, '../../assets/icon.png'),
-  });
-
-  mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'));
-
-  // Open the JS Debugger panel (CDP DevTools) in a second window
-  mainWindow.webContents.on('did-finish-load', () => {
-    mainWindow.webContents.send('ports', PORTS);
-  });
-}
-
-// ─── CDP DevTools Window (JS breakpoints, Sources, Console) ──────────────────
-let lastKnownTargets = [];
-
-function openCDPWindow(target) {
-  if (devtoolsWindow && !devtoolsWindow.isDestroyed()) {
-    devtoolsWindow.focus();
-    return;
-  }
-
-  // Build the frontend URL from Metro's provided devtoolsFrontendUrl
-  // Metro /json/list returns: { devtoolsFrontendUrl: "/debugger-frontend/rn_fusebox.html?ws=...", ... }
-  let frontendUrl;
-  if (target.devtoolsFrontendUrl) {
-    // Metro provides the exact path — use it
-    frontendUrl = `http://localhost:${PORTS.METRO}${target.devtoolsFrontendUrl}`;
-  } else if (target.webSocketDebuggerUrl) {
-    // Fallback: construct URL manually with rn_fusebox (RN 0.76+) or rn_inspector (older)
-    const wsUrl = target.webSocketDebuggerUrl;
-    frontendUrl = `http://localhost:${PORTS.METRO}/debugger-frontend/rn_fusebox.html?ws=${encodeURIComponent(wsUrl)}&sources.hide_add_folder=true`;
-  } else {
-    console.warn('[CDP] No usable target URL');
-    return;
-  }
-
-  const titleSuffix = target.deviceName ? ` — ${target.deviceName}` : '';
-  devtoolsWindow = new BrowserWindow({
-    width: 1200,
-    height: 800,
-    titleBarStyle: 'hiddenInset',
-    backgroundColor: '#0a0b0e',
-    title: `JS Debugger${titleSuffix}`,
-    webPreferences: {
-      nodeIntegration: false,
-      contextIsolation: false,
-    },
-  });
-
-  console.log(`[CDP] Loading DevTools: ${frontendUrl}`);
-  devtoolsWindow.loadURL(frontendUrl);
-
-  devtoolsWindow.on('closed', () => { devtoolsWindow = null; });
-}
-
-// ─── Metro CDP — fetch targets on demand (no continuous polling) ──────────────
-// Continuous polling causes Metro's dev-middleware WebSocket to crash with
-// "readyState 3 (CLOSED)" when connections are opened/closed rapidly.
-// Instead, we fetch targets only when the user needs them.
-function fetchCDPTargets(callback) {
-  http.get(`http://localhost:${PORTS.METRO}/json/list`, (res) => {
-    let data = '';
-    res.on('data', d => data += d);
-    res.on('end', () => {
-      try {
-        const targets = JSON.parse(data);
-        const rnTargets = targets.filter(t =>
-          t.type === 'node' || t.devtoolsFrontendUrl
-        );
-        lastKnownTargets = rnTargets;
-        mainWindow?.webContents.send('cdp-targets', rnTargets);
-        if (callback) callback(rnTargets);
-      } catch (_) {
-        if (callback) callback([]);
-      }
-    });
-  }).on('error', () => {
-    lastKnownTargets = [];
-    mainWindow?.webContents.send('cdp-targets', []);
-    if (callback) callback([]);
-  });
-}
-
-function setupMetroCDPProxy() {
-  // Single fetch after app starts (not continuous polling)
-  setTimeout(() => fetchCDPTargets(), 3000);
-}
-
-// ─── React DevTools Relay Server (Component Tree + Profiler) ─────────────────
-// React Native automatically connects to ws://localhost:8097 in dev mode.
-// We run a simple WS relay on that port. When a standalone react-devtools
-// window connects (via `npx react-devtools`) or when the RN app connects,
-// we track the connection and relay messages between frontend ↔ backend.
-let reactDTServer = null;
-let reactDTClients = new Set();
-
-function startReactDevToolsServer() {
-  try {
-    reactDTServer = new WebSocketServer({ port: PORTS.REACT_DT });
-    reactDTServer.on('error', (err) => {
-      console.warn(`[ReactDT] Server error: ${err.message}`);
-      if (err.code === 'EADDRINUSE') {
-        mainWindow?.webContents.send('react-dt-status', false);
-      }
-    });
-    reactDTServer.on('connection', (ws) => {
-      reactDTClients.add(ws);
-      console.log(`[ReactDT] Client connected (total: ${reactDTClients.size})`);
-      mainWindow?.webContents.send('react-dt-status', true);
-
-      // Relay messages between all connected clients (frontend ↔ backend)
-      ws.on('message', (data) => {
-        reactDTClients.forEach((client) => {
-          if (client !== ws && client.readyState === WebSocket.OPEN) {
-            client.send(data);
-          }
-        });
-      });
-
-      ws.on('close', () => {
-        reactDTClients.delete(ws);
-        console.log(`[ReactDT] Client disconnected (total: ${reactDTClients.size})`);
-        if (reactDTClients.size === 0) {
-          mainWindow?.webContents.send('react-dt-status', false);
-        }
-      });
-    });
-    console.log(`[ReactDT] Relay server on :${PORTS.REACT_DT}`);
-  } catch (e) {
-    console.warn('[ReactDT] Failed to start relay server:', e.message);
-  }
-}
-
-// ─── Bridge Servers (Redux, Storage, Network) ─────────────────────────────────
-function startBridgeServers() {
-  // Redux Bridge
-  startBridge(PORTS.REDUX_BRIDGE, 'redux', reduxClients, (event) => {
-    mainWindow?.webContents.send('redux-event', event);
-  });
-
-  // AsyncStorage Bridge
-  startBridge(PORTS.STORAGE_BRIDGE, 'storage', storageClients, (event) => {
-    mainWindow?.webContents.send('storage-event', event);
-  });
-
-  // Network + Console + Perf Bridge (port 9092 carries all types from RNDebugSDK)
-  startBridge(PORTS.NETWORK_BRIDGE, 'network', networkClients, (event) => {
-    if (event.type === 'control') return;
-    if (event.type === 'console') {
-      mainWindow?.webContents.send('console-event', event);
-    } else if (event.type === 'perf') {
-      mainWindow?.webContents.send('perf-event', event);
-    } else {
-      mainWindow?.webContents.send('network-event', event);
-    }
-  });
-}
-
-function startBridge(port, name, clients, onEvent) {
-  const wss = new WebSocketServer({ port });
-  wss.on('connection', (ws) => {
-    clients.add(ws);
-    console.log(`[${name}] RN app connected`);
-    mainWindow?.webContents.send(`${name}-connected`, true);
-
-    ws.on('message', (raw) => {
-      try {
-        const event = JSON.parse(raw.toString());
-        onEvent(event);
-      } catch (_) {}
-    });
-
-    ws.on('close', () => {
-      clients.delete(ws);
-      if (clients.size === 0) {
-        mainWindow?.webContents.send(`${name}-connected`, false);
-      }
-    });
-  });
-  console.log(`[${name}] Bridge on :${port}`);
-}
-
-// ─── IPC from Renderer ────────────────────────────────────────────────────────
-function setupIPC() {
-  ipcMain.on('open-cdp-target', (_, wsUrl) => {
-    // Always fetch fresh targets, then open
-    fetchCDPTargets((targets) => {
-      if (wsUrl && targets.length > 0) {
-        const target = targets.find(t => t.webSocketDebuggerUrl === wsUrl) || targets[0];
-        openCDPWindow(target);
-      } else if (targets.length > 0) {
-        const target = targets.find(t =>
-          t.reactNative?.capabilities?.prefersFuseboxFrontend
-        ) || targets[0];
-        openCDPWindow(target);
-      }
-    });
-  });
-
-  ipcMain.on('open-react-devtools', () => {
-    // Open standalone react-devtools window
-    const rdtWin = new BrowserWindow({
-      width: 1100,
-      height: 700,
-      titleBarStyle: 'hiddenInset',
-      backgroundColor: '#0a0b0e',
-      title: 'React DevTools',
-      webPreferences: { nodeIntegration: false, contextIsolation: false },
-    });
-    // Metro serves the React DevTools frontend at /debugger-ui
-    rdtWin.loadURL(`http://localhost:${PORTS.METRO}/debugger-ui`);
-  });
-
-  ipcMain.on('clear-all', () => {
-    // Broadcast clear to all bridges
-    // (renderer handles local state clearing; no bridge action needed)
-  });
-
-  ipcMain.on('set-network-capture', (_, enabled) => {
-    // Broadcast to connected RN apps so they can stop/start intercepting
-    networkClients.forEach(ws => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: 'control', action: 'set-network-capture', enabled }));
-      }
-    });
-  });
-
-  ipcMain.on('set-network-throttle', (_, profile) => {
-    // Broadcast throttle config to connected RN apps
-    networkClients.forEach(ws => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: 'control', action: 'set-throttle', profile }));
-      }
-    });
-  });
-
-  ipcMain.on('set-theme', (_, theme) => {
-    nativeTheme.themeSource = theme === 'light' ? 'light' : 'dark';
-    const bg = theme === 'light' ? '#f5f6f8' : '#0a0b0e';
-    if (mainWindow && !mainWindow.isDestroyed()) {
-      mainWindow.setBackgroundColor(bg);
-    }
-  });
-}
-
-// ─── macOS App Menu ───────────────────────────────────────────────────────────
-function buildMenu() {
-  const template = [
-    {
-      label: app.name,
-      submenu: [
-        { role: 'about' },
-        { type: 'separator' },
-        { role: 'hide' }, { role: 'hideOthers' }, { role: 'unhide' },
-        { type: 'separator' },
-        { role: 'quit' },
-      ],
-    },
-    {
-      label: 'Debugger',
-      submenu: [
-        {
-          label: 'Open JS Debugger (CDP)',
-          accelerator: 'Cmd+D',
-          click: () => { mainWindow?.webContents.send('trigger-open-cdp'); },
-        },
-        {
-          label: 'Open React DevTools',
-          accelerator: 'Cmd+R',
-          click: () => { ipcMain.emit('open-react-devtools'); },
-        },
-        { type: 'separator' },
-        {
-          label: 'Clear All',
-          accelerator: 'Cmd+K',
-          click: () => { mainWindow?.webContents.send('clear-all-ui'); },
-        },
-        { type: 'separator' },
-        {
-          label: 'Toggle Dark/Light Mode',
-          accelerator: 'Cmd+Shift+T',
-          click: () => {
-            const next = nativeTheme.themeSource === 'dark' ? 'light' : 'dark';
-            nativeTheme.themeSource = next;
-            const bg = next === 'light' ? '#f5f6f8' : '#0a0b0e';
-            if (mainWindow && !mainWindow.isDestroyed()) {
-              mainWindow.setBackgroundColor(bg);
-              mainWindow.webContents.send('theme-changed', next);
-            }
-          },
-        },
-      ],
-    },
-    {
-      label: 'Edit',
-      submenu: [
-        { role: 'undo' },
-        { role: 'redo' },
-        { type: 'separator' },
-        { role: 'cut' },
-        { role: 'copy' },
-        { role: 'paste' },
-        { role: 'selectAll' },
-      ],
-    },
-    {
-      label: 'View',
-      submenu: [
-        { role: 'reload' }, { role: 'forceReload' },
-        { type: 'separator' },
-        { role: 'resetZoom' }, { role: 'zoomIn' }, { role: 'zoomOut' },
-        { type: 'separator' },
-        { role: 'togglefullscreen' },
-      ],
-    },
-    {
-      label: 'Window',
-      submenu: [
-        { role: 'minimize' }, { role: 'zoom' },
-        { type: 'separator' },
-        { role: 'front' },
-      ],
-    },
-  ];
-  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
-}

package/src/main/preload.js

@@ -1,28 +0,0 @@
-'use strict';
-
-const { contextBridge, ipcRenderer } = require('electron');
-
-const registeredChannels = new Set();
-
-contextBridge.exposeInMainWorld('electronAPI', {
-  // Listen from main (idempotent — only one listener per channel)
-  on: (channel, cb) => {
-    const allowed = [
-      'ports', 'cdp-targets', 'redux-event', 'storage-event', 'network-event',
-      'console-event', 'perf-event', 'redux-connected', 'storage-connected', 'network-connected',
-      'react-dt-status', 'trigger-open-cdp', 'clear-all-ui', 'theme-changed',
-    ];
-    if (allowed.includes(channel)) {
-      ipcRenderer.removeAllListeners(channel);
-      registeredChannels.add(channel);
-      ipcRenderer.on(channel, (_, ...args) => cb(...args));
-    }
-  },
-  // Send to main
-  openCDPTarget: (wsUrl) => ipcRenderer.send('open-cdp-target', wsUrl),
-  openReactDevTools: () => ipcRenderer.send('open-react-devtools'),
-  clearAll: () => ipcRenderer.send('clear-all'),
-  setTheme: (theme) => ipcRenderer.send('set-theme', theme),
-  setNetworkCapture: (enabled) => ipcRenderer.send('set-network-capture', enabled),
-  setNetworkThrottle: (profile) => ipcRenderer.send('set-network-throttle', profile),
-});