npm - reactoradar - Versions diffs - 1.2.3 - Mend

reactoradar 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/LICENSE +21 -0
package/README.md +366 -0
package/app.js +2450 -0
package/assets/icon.svg +54 -0
package/bin/cli.js +79 -0
package/bin/open-debugger.sh +9 -0
package/bin/setup.js +473 -0
package/index.html +82 -0
package/main.js +528 -0
package/package.json +76 -0
package/preload.js +31 -0
package/sdk/RNDebugSDK.js +540 -0
package/src/main/main.js +396 -0
package/src/main/preload.js +28 -0
package/src/renderer/app.js +221 -0
package/src/renderer/components/object-tree.js +245 -0
package/src/renderer/index.html +111 -0
package/src/renderer/panels/console.js +248 -0
package/src/renderer/panels/memory.js +60 -0
package/src/renderer/panels/network.js +559 -0
package/src/renderer/panels/performance.js +144 -0
package/src/renderer/panels/react.js +31 -0
package/src/renderer/panels/redux.js +159 -0
package/src/renderer/panels/settings.js +93 -0
package/src/renderer/panels/sources.js +189 -0
package/src/renderer/panels/storage.js +134 -0
package/src/renderer/state.js +132 -0
package/src/renderer/styles/components.css +145 -0
package/src/renderer/styles/console.css +73 -0
package/src/renderer/styles/main.css +229 -0
package/src/renderer/styles/network.css +242 -0
package/src/renderer/styles/performance.css +45 -0
package/src/renderer/styles/redux.css +77 -0
package/src/renderer/styles/settings.css +63 -0
package/src/renderer/styles/sources.css +48 -0
package/src/renderer/styles/storage.css +28 -0
package/src/renderer/styles/theme-light.css +57 -0
package/styles.css +1308 -0

package/index.html ADDED Viewed

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self' http://localhost:* ws://localhost:*; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com;">
+  <title>ReactoRadar</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Syne:wght@700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div id="app">
+    <!-- ── TITLE BAR (logo + device status + actions in one line) ── -->
+    <header id="titlebar">
+      <div class="titlebar-drag"></div>
+      <div class="logo">Reacto<span>Radar</span></div>
+      <span class="title-sep">—</span>
+      <div id="deviceStatus" class="device-status waiting">
+        <span class="device-dot"></span>
+        <span id="deviceText">Waiting for device...</span>
+      </div>
+      <div class="titlebar-actions">
+        <button class="tb-btn" id="btnClear" title="Clear active tab (⌘K clears all)">Clear</button>
+        <button class="tb-btn primary" id="btnCDP" title="Open JS Debugger (⌘D)">JS Debugger ↗</button>
+      </div>
+    </header>
+    <!-- ── SIDEBAR ── -->
+    <nav id="sidebar">
+      <button class="nav-btn active" data-panel="console" title="Console">
+        <svg viewBox="0 0 20 20"><path d="M3 5h14M3 10h8M3 15h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+        <span>Console</span>
+      </button>
+      <button class="nav-btn" data-panel="network" title="Network">
+        <svg viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M10 3c-2 2.5-2 11.5 0 14M10 3c2 2.5 2 11.5 0 14M3 10h14" stroke="currentColor" stroke-width="1.5"/></svg>
+        <span>Network</span>
+      </button>
+      <button class="nav-btn" data-panel="redux" title="Redux">
+        <svg viewBox="0 0 20 20"><rect x="3" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="1.5" fill="none"/><rect x="11" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="1.5" fill="none"/><rect x="7" y="11" width="6" height="6" rx="1" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>
+        <span>Redux</span>
+      </button>
+      <button class="nav-btn" data-panel="storage" title="Application">
+        <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>
+      </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>
+        <span>Memory</span>
+      </button>
+      <button class="nav-btn" data-panel="performance" title="Performance">
+        <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="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>
+      </button>
+      <div class="nav-spacer"></div>
+      <button class="nav-btn" data-panel="settings" title="Settings">
+        <svg viewBox="0 0 20 20"><path d="M10 13a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M17.4 11c.2-.6.2-1.4 0-2l1.3-1-1.7-3-1.6.5c-.5-.4-1-.7-1.6-.9L13.4 3H10.6l-.4 1.6c-.6.2-1.1.5-1.6.9L7 5 5.3 8l1.3 1c-.2.6-.2 1.4 0 2L5.3 12 7 15l1.6-.5c.5.4 1 .7 1.6.9l.4 1.6h2.8l.4-1.6c.6-.2 1.1-.5 1.6-.9l1.6.5 1.7-3-1.3-1z" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>
+        <span>Settings</span>
+      </button>
+    </nav>
+    <!-- ── PANELS ── -->
+    <main id="content">
+      <div id="panel-console"     class="panel active"></div>
+      <div id="panel-network"     class="panel"></div>
+      <div id="panel-performance" class="panel"></div>
+      <div id="panel-memory"      class="panel"></div>
+      <div id="panel-redux"       class="panel"></div>
+      <div id="panel-storage"     class="panel"></div>
+      <div id="panel-react"       class="panel"></div>
+      <div id="panel-settings"    class="panel"></div>
+    </main>
+  </div>
+  <script src="app.js"></script>
+</body>
+</html>

package/main.js ADDED Viewed

@@ -0,0 +1,528 @@
+'use strict';
+const { app, BrowserWindow, ipcMain, Menu, shell, nativeTheme, nativeImage } = require('electron');
+const path = require('path');
+const http = require('http');
+const https = require('https');
+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';
+  // Set dock icon on macOS
+  if (process.platform === 'darwin') {
+    try {
+      const iconPath = path.join(__dirname, 'ReactoRadar.png');
+      const icon = nativeImage.createFromPath(iconPath);
+      if (!icon.isEmpty()) {
+        app.dock.setIcon(icon);
+      }
+    } catch (e) {
+      console.warn('[Icon] Failed to set dock icon:', e.message);
+    }
+  }
+  await createMainWindow();
+  // Check for updates (non-blocking)
+  checkForUpdates();
+  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: nativeImage.createFromPath(path.join(__dirname, 'ReactoRadar.png')),
+  });
+  mainWindow.loadFile(path.join(__dirname, 'index.html'));
+  // Open the JS Debugger panel (CDP DevTools) in a second window
+  mainWindow.webContents.on('did-finish-load', () => {
+    mainWindow.webContents.send('ports', PORTS);
+  });
+}
+// ─── Update Checker ──────────────────────────────────────────────────────────
+function checkForUpdates() {
+  const currentVersion = require('./package.json').version;
+  https.get('https://registry.npmjs.org/reactoradar/latest', (res) => {
+    let data = '';
+    res.on('data', d => data += d);
+    res.on('end', () => {
+      try {
+        const latest = JSON.parse(data).version;
+        if (latest && latest !== currentVersion) {
+          // Notify the renderer to show an update banner
+          mainWindow?.webContents.send('update-available', { current: currentVersion, latest });
+          console.log(`[Update] New version available: ${latest} (current: ${currentVersion})`);
+        }
+      } catch {}
+    });
+  }).on('error', () => {}); // Silently fail — update check is optional
+}
+// ─── 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: true,
+      sandbox: true,
+    },
+  });
+  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 (e) {
+        console.warn(`[${name}] Failed to parse message:`, e.message);
+      }
+    });
+    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: true, sandbox: true },
+    });
+    // Metro serves the React DevTools frontend at /debugger-ui
+    rdtWin.loadURL(`http://localhost:${PORTS.METRO}/debugger-ui`);
+  });
+  // clear-all is handled by renderer via clear-all-ui IPC from menu
+  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 }));
+      }
+    });
+  });
+  // Track the RN project root — detected from Metro or setup
+  let _rnProjectRoot = null;
+  ipcMain.handle('read-source-file', async (_, filepath) => {
+    const fs = require('fs');
+    try {
+      // Try absolute path first
+      if (path.isAbsolute(filepath) && fs.existsSync(filepath)) {
+        return fs.readFileSync(filepath, 'utf8');
+      }
+      // Find the RN project root by checking where Metro is running
+      if (!_rnProjectRoot) {
+        // Look for common project paths
+        const candidates = [];
+        // Check Metro's cwd by looking at the source map paths
+        const home = process.env.HOME || '';
+        // Scan for directories containing package.json with react-native
+        // Dynamically find RN project directories
+        const searchDirs = [];
+        // Scan home directory for common RN project patterns
+        try {
+          const homeItems = require('fs').readdirSync(home);
+          homeItems.forEach(dir => {
+            const full = path.join(home, dir);
+            try {
+              const sub = require('fs').readdirSync(full);
+              sub.forEach(s => {
+                const projDir = path.join(full, s);
+                if (require('fs').existsSync(path.join(projDir, 'package.json')) &&
+                    require('fs').existsSync(path.join(projDir, 'node_modules', 'react-native'))) {
+                  searchDirs.push(projDir);
+                }
+                // One level deeper (e.g., ~/Company/branch/project)
+                try {
+                  require('fs').readdirSync(projDir).forEach(ss => {
+                    const deep = path.join(projDir, ss);
+                    if (require('fs').existsSync(path.join(deep, 'package.json')) &&
+                        require('fs').existsSync(path.join(deep, 'node_modules', 'react-native'))) {
+                      searchDirs.push(deep);
+                    }
+                  });
+                } catch {}
+              });
+            } catch {}
+          });
+        } catch {}
+        // Also try to detect from Metro's /json endpoint
+        try {
+          const result = require('child_process').execSync(
+            "lsof -i :8081 -t 2>/dev/null | head -1 | xargs -I{} lsof -p {} -Fn 2>/dev/null | grep '^n/' | grep 'node_modules' | head -1 | sed 's|^n||;s|/node_modules.*||'",
+            { encoding: 'utf8', timeout: 3000 }
+          ).trim();
+          if (result && fs.existsSync(result)) candidates.unshift(result);
+        } catch {}
+        candidates.push(...searchDirs);
+        for (const dir of candidates) {
+          const full = path.join(dir, filepath);
+          if (fs.existsSync(full)) {
+            _rnProjectRoot = dir;
+            break;
+          }
+        }
+      }
+      if (_rnProjectRoot) {
+        const full = path.join(_rnProjectRoot, filepath);
+        if (fs.existsSync(full)) return fs.readFileSync(full, 'utf8');
+      }
+      // Last resort: search recursively from home
+      const homeSearch = path.join(process.env.HOME || '', filepath);
+      if (fs.existsSync(homeSearch)) return fs.readFileSync(homeSearch, 'utf8');
+      return null;
+    } catch (e) {
+      return null;
+    }
+  });
+  ipcMain.on('set-stack-trace-capture', (_, enabled) => {
+    networkClients.forEach(ws => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'control', action: 'set-stack-trace', 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('open-external', (_, url) => {
+    if (url && typeof url === 'string' && (url.startsWith('https://') || url.startsWith('http://'))) {
+      shell.openExternal(url);
+    }
+  });
+  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: 'Next Theme',
+          accelerator: 'Cmd+Shift+T',
+          click: () => {
+            const themes = ['dark','light','monokai','dracula','solarized-dark','solarized-light','nord','github-dark','one-dark'];
+            const current = nativeTheme.themeSource || 'dark';
+            const idx = themes.indexOf(current);
+            const next = themes[(idx + 1) % themes.length];
+            nativeTheme.themeSource = next.includes('light') ? 'light' : 'dark';
+            if (mainWindow && !mainWindow.isDestroyed()) {
+              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/package.json ADDED Viewed

@@ -0,0 +1,76 @@
+{
+  "name": "reactoradar",
+  "productName": "ReactoRadar",
+  "version": "1.2.3",
+  "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": {
+    "reactoradar": "./bin/cli.js",
+    "rn-debugger-app": "./bin/cli.js",
+    "rn-debugger-setup": "./bin/setup.js"
+  },
+  "keywords": [
+    "react-native",
+    "debugger",
+    "devtools",
+    "electron",
+    "redux",
+    "network-inspector",
+    "hermes",
+    "flipper-alternative",
+    "react-native-debugger",
+    "macos"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sharanagouda/react-native-debugger.git"
+  },
+  "homepage": "https://github.com/sharanagouda/react-native-debugger#readme",
+  "bugs": {
+    "url": "https://github.com/sharanagouda/react-native-debugger/issues"
+  },
+  "license": "MIT",
+  "author": "sharanagouda",
+  "files": [
+    "main.js",
+    "preload.js",
+    "index.html",
+    "app.js",
+    "styles.css",
+    "sdk/",
+    "bin/",
+    "assets/",
+    "src/"
+  ],
+  "scripts": {
+    "start": "unset ELECTRON_RUN_AS_NODE && electron .",
+    "setup": "node bin/setup.js",
+    "unsetup": "node bin/setup.js --uninstall",
+    "build": "electron-builder --mac",
+    "pack": "electron-builder --mac --dir"
+  },
+  "dependencies": {
+    "react-devtools-core": "^5.3.1",
+    "ws": "^8.17.0"
+  },
+  "devDependencies": {
+    "electron": "^35.7.5",
+    "electron-builder": "^24.13.0",
+    "electron-devtools-installer": "^3.2.0"
+  },
+  "build": {
+    "appId": "com.yourteam.rn-debugger",
+    "productName": "ReactoRadar",
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "icon": "ReactoRadar.icns",
+      "target": [
+        "dmg",
+        "zip"
+      ]
+    },
+    "directories": {
+      "output": "dist"
+    }
+  }
+}