reactoradar 1.5.9 → 1.6.0

package/bin/setup.js

@@ -85,23 +85,79 @@ function detectPlatform() {
   const xcrun = tryExec('xcrun simctl list devices booted 2>/dev/null');
   const hasIOSSim = xcrun.includes('Booted');
 
-  return { hasAndroidEmu, hasAndroidDevice, hasIOSSim };
+  // Check if iOS real device is connected via USB
+  let hasIOSDevice = false;
+  // Method 1: idevice_id (from libimobiledevice — brew install libimobiledevice)
+  const idevice = tryExec('idevice_id -l 2>/dev/null');
+  if (idevice && idevice.trim().length > 0) hasIOSDevice = true;
+  // Method 2: system_profiler (slower but always available on macOS)
+  if (!hasIOSDevice) {
+    const profiler = tryExec('system_profiler SPUSBDataType 2>/dev/null');
+    if (profiler && (profiler.includes('iPhone') || profiler.includes('iPad'))) hasIOSDevice = true;
+  }
+
+  return { hasAndroidEmu, hasAndroidDevice, hasIOSSim, hasIOSDevice };
+}
+
+function getLanIP() {
+  // Get the Mac's LAN IP address for real device connections
+  const os = require('os');
+  const interfaces = os.networkInterfaces();
+  for (const name of Object.keys(interfaces)) {
+    for (const iface of interfaces[name]) {
+      // Skip internal/loopback and IPv6
+      if (iface.internal || iface.family !== 'IPv4') continue;
+      // Prefer en0 (Wi-Fi) or en1
+      if (iface.address && iface.address.startsWith('192.168.') || iface.address.startsWith('10.') || iface.address.startsWith('172.')) {
+        return iface.address;
+      }
+    }
+  }
+  return null;
 }
 
 function pickHost(platform) {
-  if (platform.hasIOSSim && !platform.hasAndroidEmu && !platform.hasAndroidDevice) {
+  const hasRealDevice = platform.hasAndroidDevice || platform.hasIOSDevice;
+  const hasSimOrEmu = platform.hasIOSSim || platform.hasAndroidEmu;
+
+  // Real device (iOS or Android) — needs LAN IP or adb reverse
+  if (platform.hasIOSDevice && !hasSimOrEmu) {
+    const lanIP = getLanIP();
+    if (lanIP) return { host: lanIP, reason: `iOS device detected via USB (LAN IP: ${lanIP})` };
+    return { host: '127.0.0.1', reason: 'iOS device detected but LAN IP not found — ensure Mac and device are on same WiFi' };
+  }
+  if (platform.hasAndroidDevice && !hasSimOrEmu) {
+    return { host: '10.0.2.2', reason: 'Android device detected (using adb reverse)' };
+  }
+
+  // Simulator/Emulator only
+  if (platform.hasIOSSim && !platform.hasAndroidEmu && !hasRealDevice) {
     return { host: '127.0.0.1', reason: 'iOS Simulator detected' };
   }
-  if (platform.hasAndroidEmu && !platform.hasIOSSim) {
+  if (platform.hasAndroidEmu && !platform.hasIOSSim && !hasRealDevice) {
     return { host: '10.0.2.2', reason: 'Android Emulator detected' };
   }
-  if (platform.hasAndroidDevice) {
-    return { host: '10.0.2.2', reason: 'Android device detected (using adb reverse)' };
+
+  // Mixed: real device + simulator/emulator
+  if (hasRealDevice && hasSimOrEmu) {
+    // If iOS device + iOS sim: prefer sim (127.0.0.1), user can switch for device
+    if (platform.hasIOSSim) {
+      return { host: '127.0.0.1', reason: 'iOS Sim + real device detected (defaulting to Sim — change HOST for device)' };
+    }
+    // Android device + emu: adb reverse handles both
+    return { host: '10.0.2.2', reason: 'Android Emu + device detected (adb reverse handles both)' };
   }
+
+  // Both sim + emu
   if (platform.hasIOSSim && platform.hasAndroidEmu) {
     return { host: '127.0.0.1', reason: 'Both iOS Sim + Android Emu detected (defaulting to iOS, Android uses adb reverse)' };
   }
-  // Nothing running — default to localhost
+
+  // Nothing running — try to detect LAN IP for real device use later
+  const lanIP = getLanIP();
+  if (lanIP) {
+    return { host: '127.0.0.1', reason: `No running devices (default). For real device use HOST: ${lanIP}` };
+  }
   return { host: '127.0.0.1', reason: 'No running devices detected (default)' };
 }
 
@@ -422,6 +478,26 @@ ${SDK_MARKER_END}
     console.log(C.dim + '    adb reverse tcp:9090 tcp:9090 && adb reverse tcp:9091 tcp:9091 && adb reverse tcp:9092 tcp:9092' + C.reset);
     console.log();
   }
+  if (platform.hasIOSDevice) {
+    const lanIP = getLanIP();
+    console.log(C.bold + '  iOS Real Device:' + C.reset);
+    if (lanIP) {
+      console.log('    HOST is set to ' + C.cyan + lanIP + C.reset + ' (your Mac\'s LAN IP)');
+      console.log('    Ensure your device is on the ' + C.bold + 'same WiFi network' + C.reset + ' as this Mac');
+    } else {
+      console.log(C.yellow + '    Could not detect LAN IP. Manually set HOST in src/debug/RNDebugSDK.js' + C.reset);
+      console.log('    to your Mac\'s IP (e.g., 192.168.1.x). Find it with: ' + C.cyan + 'ifconfig en0' + C.reset);
+    }
+    console.log();
+  }
+  // Show LAN IP tip even when no device is connected (for future reference)
+  if (!platform.hasIOSDevice && !platform.hasAndroidDevice) {
+    const lanIP = getLanIP();
+    if (lanIP) {
+      console.log(C.dim + '  For real device debugging, change HOST in src/debug/RNDebugSDK.js to: ' + C.cyan + lanIP + C.reset);
+      console.log();
+    }
+  }
   console.log(C.dim + '  To remove: npx reactoradar remove' + C.reset);
   console.log();
 }

package/index.html

@@ -21,6 +21,10 @@
         <span id="deviceText">Waiting for device...</span>
       </div>
       <div class="titlebar-actions">
+        <button class="tb-btn" id="btnScreenshot" title="Screenshot (⌘S)">
+          <svg width="14" height="14" viewBox="0 0 20 20" fill="none" style="vertical-align:middle;margin-right:3px"><rect x="2" y="4" width="16" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="10" cy="11" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M7 4V3a1 1 0 011-1h4a1 1 0 011 1v1" stroke="currentColor" stroke-width="1.5"/></svg>
+          Screenshot
+        </button>
         <button class="tb-btn primary" id="btnCDP" title="Open JS Debugger (⌘D)">JS Debugger ↗</button>
       </div>
     </header>

package/main.js

@@ -1,10 +1,12 @@
 'use strict';
 
-const { app, BrowserWindow, ipcMain, Menu, shell, nativeTheme, nativeImage } = require('electron');
+const { app, BrowserWindow, ipcMain, Menu, shell, nativeTheme, nativeImage, dialog } = require('electron');
 const path = require('path');
 const http = require('http');
 const https = require('https');
 const { WebSocketServer, WebSocket } = require('ws');
+let autoUpdater = null;
+try { autoUpdater = require('electron-updater').autoUpdater; } catch {}
 
 // ─── Ports ────────────────────────────────────────────────────────────────────
 const PORTS = {
@@ -154,6 +156,40 @@ function _semverCompare(a, b) {
 
 function checkForUpdates() {
   const currentVersion = require('./package.json').version;
+
+  // ─── Electron Auto-Updater (for .dmg installs) ────────────────────────────
+  // Downloads and installs updates from GitHub Releases automatically.
+  if (autoUpdater && app.isPackaged) {
+    autoUpdater.autoDownload = true;
+    autoUpdater.autoInstallOnAppQuit = true;
+
+    autoUpdater.on('update-available', (info) => {
+      console.log(`[AutoUpdate] New version available: ${info.version}`);
+      const payload = { current: currentVersion, latest: info.version, autoUpdate: true };
+      [500, 2000].forEach(delay => setTimeout(() => _send('update-available', payload), delay));
+    });
+
+    autoUpdater.on('update-downloaded', (info) => {
+      console.log(`[AutoUpdate] Update downloaded: ${info.version}`);
+      _send('update-downloaded', { version: info.version });
+    });
+
+    autoUpdater.on('error', (err) => {
+      console.warn('[AutoUpdate] Error:', err?.message);
+    });
+
+    // Check after a short delay to not block startup
+    setTimeout(() => {
+      try { autoUpdater.checkForUpdates(); } catch {}
+    }, 5000);
+    // Also check periodically (every 2 hours)
+    setInterval(() => {
+      try { autoUpdater.checkForUpdates(); } catch {}
+    }, 2 * 60 * 60 * 1000);
+    return;
+  }
+
+  // ─── Fallback: npm registry check (for npx users) ─────────────────────────
   https.get('https://registry.npmjs.org/reactoradar/latest', (res) => {
     let data = '';
     res.on('data', d => data += d);
@@ -161,20 +197,15 @@ function checkForUpdates() {
       try {
         const latest = JSON.parse(data).version;
         if (latest && _semverCompare(latest, currentVersion) > 0) {
-          // Send with retries to ensure renderer catches it after did-finish-load
-          const payload = { current: currentVersion, latest };
+          const payload = { current: currentVersion, latest, autoUpdate: false };
           [500, 2000, 5000].forEach(delay => {
-            setTimeout(() => {
-              if (mainWindow && !mainWindow.isDestroyed()) {
-                _send('update-available', payload);
-              }
-            }, delay);
+            setTimeout(() => _send('update-available', payload), delay);
           });
           console.log(`[Update] New version available: ${latest} (current: ${currentVersion})`);
         }
       } catch {}
     });
-  }).on('error', () => {}); // Silently fail — update check is optional
+  }).on('error', () => {});
 }
 
 // ─── CDP DevTools Window (JS breakpoints, Sources, Console) ──────────────────
@@ -522,6 +553,27 @@ function setupIPC() {
     }
   });
 
+  ipcMain.on('install-update', () => {
+    if (autoUpdater) {
+      autoUpdater.quitAndInstall(false, true);
+    }
+  });
+
+  ipcMain.on('capture-screenshot', async () => {
+    try {
+      if (!mainWindow || mainWindow.isDestroyed()) return;
+      const image = await mainWindow.webContents.capturePage();
+      const png = image.toPNG();
+      const ts = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+      const filePath = path.join(app.getPath('downloads'), `ReactoRadar-${ts}.png`);
+      require('fs').writeFileSync(filePath, png);
+      shell.showItemInFolder(filePath);
+      console.log(`[Screenshot] Saved to ${filePath}`);
+    } catch (e) {
+      console.error('[Screenshot] Failed:', e.message);
+    }
+  });
+
   ipcMain.on('set-theme', (_, theme) => {
     nativeTheme.themeSource = theme === 'light' ? 'light' : 'dark';
     const bg = theme === 'light' ? '#f5f6f8' : '#0a0b0e';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "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": {
@@ -50,6 +50,7 @@
     "pack": "electron-builder --mac --dir"
   },
   "dependencies": {
+    "electron-updater": "^6.8.3",
     "react-devtools-core": "^5.3.1",
     "ws": "^8.17.0"
   },
@@ -59,8 +60,15 @@
     "electron-devtools-installer": "^3.2.0"
   },
   "build": {
-    "appId": "com.yourteam.rn-debugger",
+    "appId": "com.reactoradar.app",
     "productName": "ReactoRadar",
+    "publish": [
+      {
+        "provider": "github",
+        "owner": "sharanagouda",
+        "repo": "react-native-debugger"
+      }
+    ],
     "mac": {
       "category": "public.app-category.developer-tools",
       "icon": "ReactoRadar.icns",

package/preload.js

@@ -10,7 +10,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
     const allowed = [
       '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', 'app-version', 'focus-search',
+      'react-dt-status', 'trigger-open-cdp', 'clear-all-ui', 'theme-changed', 'update-available', 'update-downloaded', 'app-version', 'focus-search',
     ];
     if (allowed.includes(channel)) {
       ipcRenderer.removeAllListeners(channel);
@@ -29,4 +29,6 @@ contextBridge.exposeInMainWorld('electronAPI', {
   setMetroPort: (port) => ipcRenderer.send('set-metro-port', port),
   readSourceFile: (filepath) => ipcRenderer.invoke('read-source-file', filepath),
   openExternal: (url) => ipcRenderer.send('open-external', url),
+  installUpdate: () => ipcRenderer.send('install-update'),
+  captureScreenshot: () => ipcRenderer.send('capture-screenshot'),
 });

package/styles.css

@@ -180,7 +180,7 @@ html, body, #app { height: 100%; overflow: hidden; }
 body {
   background: var(--bg);
   color: var(--text);
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'SFMono-Regular', 'SF Mono', Menlo, Monaco, monospace;
   font-size: 12px;
   -webkit-font-smoothing: antialiased;
   user-select: text;
@@ -773,7 +773,27 @@ body {
 .net-initiator { color: var(--text-dim); font-size: 10px; }
 .net-size { color: var(--text-dim); font-size: 10px; text-align: right; }
 .net-time { color: var(--text-dim); font-size: 10px; text-align: right; }
-.net-time.slow { color: var(--orange); }
+.net-time.slow { color: var(--orange); font-weight: 700; }
+.net-time.very-slow { color: var(--red); font-weight: 700; }
+.net-row.slow { background: rgba(255,165,0,.04); }
+.net-row.slow:hover { background: rgba(255,165,0,.08); }
+.net-row.very-slow { background: rgba(255,94,114,.04); }
+.net-row.very-slow:hover { background: rgba(255,94,114,.08); }
+.net-row.slow .net-path { color: var(--orange); }
+.net-row.very-slow .net-path { color: var(--red); }
+
+/* Status filter buttons */
+.net-status-filters { display: flex; gap: 4px; margin-left: 8px; }
+.net-status-btn { font-size: 10px; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; }
+.net-status-btn:hover { background: var(--bg3); }
+.net-status-btn.active { background: var(--bg4); color: var(--text); border-color: var(--accent); }
+.net-slow-btn.active { border-color: var(--orange); color: var(--orange); }
+
+/* Stats bar at bottom of network panel */
+.net-stats-bar { display: flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 10px; color: var(--text-dim); background: var(--bg2); border-top: 1px solid var(--border); flex-shrink: 0; user-select: text; }
+.net-stats-sep { color: var(--border); }
+.net-stats-bar .warn { color: var(--orange); font-weight: 700; }
+.net-stats-bar .err { color: var(--red); font-weight: 700; }
 
 /* Waterfall bar */
 .net-waterfall { position: relative; height: 14px; }
@@ -924,7 +944,10 @@ body {
 .rdx-entry-header:hover { background: var(--bg3); }
 .rdx-entry.selected .rdx-entry-header { border-left: 3px solid var(--accent); }
 .rdx-index { font-size: 9px; color: var(--text-dim); min-width: 20px; text-align: right; flex-shrink: 0; }
-.rdx-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-bright); font-weight: 500; }
+.rdx-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-bright); font-weight: 500; }
+.rdx-type-cat { font-weight: 700; }
+.rdx-type-name { color: var(--text-bright); font-weight: 500; }
+.rdx-header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
 .rdx-changes {
   font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 8px;
   background: rgba(255,94,114,.12); color: var(--red); flex-shrink: 0;
@@ -968,12 +991,16 @@ body {
 .rdx-diff-old { color: var(--red); text-decoration: line-through; opacity: 0.8; word-break: break-all; }
 .rdx-diff-arrow { color: var(--text-dim); font-size: 10px; flex-shrink: 0; }
 .rdx-diff-new { color: var(--green); font-weight: 600; word-break: break-all; }
-.rdx-state-label { font-size: 10px; font-weight: 700; padding: 4px 8px 2px; margin-top: 4px; letter-spacing: 0.5px; }
+.rdx-state-label { font-size: 10px; font-weight: 700; padding: 4px 0 2px; letter-spacing: 0.5px; }
 .rdx-state-label.prev { color: var(--red); }
 .rdx-state-label.curr { color: var(--green); }
-.rdx-state-tree { padding: 2px 0 4px 4px; border-left: 2px solid var(--border); margin-left: 4px; }
-.rdx-state-tree.prev { border-left-color: rgba(255,94,114,.3); }
-.rdx-state-tree.curr { border-left-color: rgba(61,214,140,.3); }
+.rdx-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
+.rdx-diff-col { min-width: 0; overflow: auto; max-height: 400px; padding: 4px; border-radius: 4px; font-size: 11px; }
+.rdx-diff-col.prev { background: rgba(255,94,114,.04); border: 1px solid rgba(255,94,114,.12); }
+.rdx-diff-col.curr { background: rgba(61,214,140,.04); border: 1px solid rgba(61,214,140,.12); }
+.rdx-close-btn { position: absolute; top: 6px; right: 8px; background: var(--bg3); border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; }
+.rdx-close-btn:hover { background: var(--bg4); color: var(--text); }
+.rdx-entry-detail { position: relative; }
 .rdx-highlight { font-weight: 600; }
 .rdx-diff-sign { font-weight: 700; font-size: 11px; flex-shrink: 0; width: 14px; text-align: center; }
 .rdx-diff-row.removed .rdx-diff-sign { color: var(--red); }
@@ -1133,6 +1160,23 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
   padding: 24px;
   max-width: 480px;
 }
+.settings-two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  padding: 20px 24px;
+}
+.settings-col-left, .settings-col-right {
+  min-width: 0;
+}
+.settings-shortcut-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 12px;
+  font-size: 11px;
+}
+.sc-key { color: var(--text-mid); font-weight: 600; background: var(--bg3); padding: 2px 6px; border-radius: 3px; text-align: center; font-size: 10px; }
+.sc-label { color: var(--text-dim); }
 .settings-section {
   margin-bottom: 28px;
 }
@@ -1448,9 +1492,9 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 .ga4-row:hover { background: var(--bg3); }
 .ga4-row.selected { background: var(--bg4); border-left: 2px solid var(--accent); }
 
-.ga4-cell { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ga4-time { width: 90px; color: var(--text-dim); font-size: 10px; flex-shrink: 0; }
-.ga4-name { flex: 1; color: var(--text-bright); font-weight: 500; min-width: 0; }
+.ga4-cell { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ga4-time { width: 100px; color: var(--text-dim); font-size: inherit; flex-shrink: 0; padding-right: 12px; }
+.ga4-name { flex: 1; color: var(--text-bright); font-weight: 600; min-width: 0; font-size: 1.1em; }
 
 /* Detail pane */
 .ga4-detail-header {
@@ -1468,7 +1512,7 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 .ga4-detail-info { margin-bottom: 8px; }
 .ga4-detail-row { display: flex; gap: 12px; padding: 3px 0; font-size: 11px; }
 .ga4-detail-key { color: var(--text-dim); min-width: 100px; flex-shrink: 0; }
-.ga4-detail-val { color: var(--text); word-break: break-all; }
+.ga4-detail-val { color: var(--text); word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap; line-height: 1.5; }
 .ga4-detail-sep { height: 1px; background: var(--border); margin: 8px 0; }
 
 .ga4-param-row {
@@ -1481,10 +1525,11 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 }
 .ga4-param-row:last-child { border-bottom: none; }
 .ga4-param-key { color: var(--accent); width: 180px; min-width: 180px; flex-shrink: 0; font-weight: 500; padding-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ga4-param-val { color: var(--text); flex: 1; min-width: 0; }
-.ga4-param-val .ov-node, .ga4-param-val .ov-leaf { white-space: normal; }
+.ga4-param-val { color: var(--text); flex: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap; line-height: 1.5; }
+.ga4-param-val .ov-node, .ga4-param-val .ov-leaf { white-space: pre-wrap; word-break: break-word; }
 .ga4-param-val .ov-key { white-space: nowrap; }
 .ga4-param-val .ov-header { flex-wrap: nowrap; }
+.ga4-param-val .ov-str { word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap; }
 
 /* Summary bar */
 .ga4-summary {
@@ -1562,3 +1607,62 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 [data-theme="light"] .net-cell {
   border-right-color: #bcc1d0;
 }
+
+/* ── Toast Notifications ──────────────────────────────────────────────────── */
+.toast-container { position: fixed; bottom: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 6px; max-width: 360px; pointer-events: none; }
+.toast { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; font-size: 11px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); box-shadow: 0 4px 16px rgba(0,0,0,.3); pointer-events: all; animation: toastIn 0.2s ease-out; }
+.toast-error { border-left: 3px solid var(--red); }
+.toast-warn { border-left: 3px solid var(--orange); }
+.toast-info { border-left: 3px solid var(--accent); }
+.toast-msg { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.toast-action { color: var(--accent); font-weight: 600; cursor: pointer; font-size: 10px; flex-shrink: 0; }
+.toast-action:hover { text-decoration: underline; }
+.toast-close { color: var(--text-dim); cursor: pointer; font-size: 10px; flex-shrink: 0; margin-left: 4px; }
+.toast-close:hover { color: var(--text); }
+@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+/* ── Context Menu Separator ────────────────────────────────────────────────── */
+.ctx-sep { height: 1px; background: var(--border); margin: 4px 6px; }
+
+/* ── Hidden URLs Dropdown ─────────────────────────────────────────────────── */
+.net-hidden-wrap { display: inline-flex; }
+.net-hidden-btn { font-size: 10px !important; color: var(--text-dim) !important; }
+.net-hidden-dropdown { position: absolute; top: 100%; right: 0; z-index: 100; min-width: 320px; max-width: 480px; max-height: 300px; overflow-y: auto; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.3); padding: 6px 0; }
+.net-hidden-title { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 6px; font-size: 10px; font-weight: 600; color: var(--text-dim); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
+.net-hidden-clear { font-size: 9px; background: transparent; border: 1px solid var(--border); color: var(--red); border-radius: 3px; padding: 2px 6px; cursor: pointer; }
+.net-hidden-clear:hover { background: rgba(255,94,114,.1); }
+.net-hidden-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 10px; }
+.net-hidden-row:hover { background: var(--bg3); }
+.net-hidden-url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-mid); }
+.net-hidden-unhide { font-size: 9px; background: transparent; border: 1px solid var(--border); color: var(--accent); border-radius: 3px; padding: 2px 6px; cursor: pointer; flex-shrink: 0; }
+.net-hidden-unhide:hover { background: rgba(61,136,255,.1); }
+
+/* ── 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); }
+.support-btn:active { transform: translateY(0); }
+
+/* ── Tab Visibility Grid (Settings) ────────────────────────────────────────── */
+.tab-visibility-grid { display: flex; flex-direction: column; gap: 3px; max-width: 240px; }
+.tab-vis-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; transition: all 0.12s; user-select: none; }
+.tab-vis-item.active { background: var(--bg3); border-color: var(--accent); }
+.tab-vis-item.inactive { opacity: 0.5; background: transparent; }
+.tab-vis-item:hover { background: var(--bg3); }
+.tab-vis-check { accent-color: var(--accent); cursor: pointer; width: 13px; height: 13px; }
+.tab-vis-icon { font-size: 11px; width: 16px; text-align: center; }
+.tab-vis-label { font-size: 10px; font-weight: 500; color: var(--text); flex: 1; }
+.tab-vis-required { font-size: 7px; color: var(--text-dim); background: var(--bg4); padding: 1px 4px; border-radius: 3px; }
+.tab-vis-item.dragging { opacity: 0.4; border-style: dashed; }
+.tab-vis-item.drag-over { border-color: var(--accent); border-width: 2px; }
+.tab-vis-drag { cursor: grab; color: var(--text-dim); font-size: 10px; padding: 0 2px; }
+.tab-vis-drag:active { cursor: grabbing; }
+
+/* ── Memory Warning Banner ─────────────────────────────────────────────────── */
+.memory-warning { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: rgba(255,165,0,.15); border-bottom: 1px solid rgba(255,165,0,.3); color: var(--orange); font-size: 11px; font-weight: 500; z-index: 9998; }
+.memory-warn-btn { font-size: 10px; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--orange); background: transparent; color: var(--orange); cursor: pointer; font-weight: 600; }
+.memory-warn-btn:hover { background: rgba(255,165,0,.15); }
+.memory-warn-btn:first-of-type { background: var(--orange); color: #000; }
+.memory-warn-btn:first-of-type:hover { opacity: 0.9; }
+
+/* ── Console Log Grouping ─────────────────────────────────────────────────── */
+.log-group-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; flex-shrink: 0; margin-right: 4px; }