reactoradar 1.4.1 → 1.5.0

package/app.js

@@ -6,13 +6,13 @@ const state = {
   activePanel: 'console',
   ports: {},
 
-  console: { logs: [], levelFilters: { log: true, info: true, warn: true, error: true, debug: true }, searchFilter: '' },
+  console: { logs: [], levelFilters: { log: true, info: true, warn: true, error: true, debug: true }, searchFilter: '', showRedux: false },
 
   network: {
     requests: {},
     order: [],
     statusFilter: 'all',
-    typeFilter: 'all',
+    typeFilter: 'fetch',
     searchFilter: '',
     throttle: 'none',
     enabled: true,
@@ -26,6 +26,7 @@ const state = {
     states: [],
     selected: -1,
     searchFilter: '',
+    sortDir: 'asc',
   },
 
   storage: {
@@ -233,6 +234,27 @@ if (window.electronAPI) {
 
   window.electronAPI.on('clear-all-ui', clearAll);
 
+  // Cmd+F — focus the search input for the active panel
+  window.electronAPI.on('focus-search', () => {
+    const searchMap = {
+      console: 'consoleSearch',
+      network: 'netSearchInput',
+      ga4: 'ga4Search',
+      redux: 'reduxSearch',
+      storage: 'storageSearch',
+    };
+    const inputId = searchMap[state.activePanel];
+    if (inputId) {
+      const el = $(inputId);
+      if (el) { el.focus(); el.select(); }
+    }
+    // Also show/focus Console bottom find bar
+    if (state.activePanel === 'console') {
+      const bar = $('consoleFindBar');
+      if (bar) { bar.style.display = 'flex'; $('consoleFindInput')?.focus(); }
+    }
+  });
+
   window.electronAPI.on('app-version', (version) => {
     state._appVersion = version;
     const el = $('aboutVersion');
@@ -299,7 +321,7 @@ function getStoredLogLevels() {
     const saved = localStorage.getItem('rn-debug-log-levels');
     if (saved) return JSON.parse(saved);
   } catch {}
-  return { log: true, info: true, warn: true, error: true, debug: true };
+  return { log: true, info: true, warn: true, error: true, debug: true, redux: false };
 }
 function setStoredLogLevels(levels) {
   try { localStorage.setItem('rn-debug-log-levels', JSON.stringify(levels)); } catch {}
@@ -309,6 +331,7 @@ function initConsolePanel() {
   const panel = $('panel-console');
   const levels = getStoredLogLevels();
   state.console.levelFilters = levels;
+  state.console.showRedux = !!levels.redux;
 
   panel.innerHTML = `
     <div class="panel-toolbar">
@@ -325,6 +348,8 @@ function initConsolePanel() {
             <label class="console-level-option"><input type="checkbox" data-level="warn" ${levels.warn ? 'checked' : ''} /><span class="lvl-dot" style="background:var(--yellow)"></span>Warn</label>
             <label class="console-level-option"><input type="checkbox" data-level="error" ${levels.error ? 'checked' : ''} /><span class="lvl-dot" style="background:var(--red)"></span>Error</label>
             <label class="console-level-option"><input type="checkbox" data-level="debug" ${levels.debug ? 'checked' : ''} /><span class="lvl-dot" style="background:var(--accent2)"></span>Debug</label>
+            <div style="border-top:1px solid var(--border);margin:4px 0"></div>
+            <label class="console-level-option"><input type="checkbox" data-level="redux" ${levels.redux ? 'checked' : ''} /><span class="lvl-dot" style="background:var(--green)"></span>Redux Actions</label>
           </div>
         </div>
       </div>
@@ -335,6 +360,13 @@ function initConsolePanel() {
         <div class="label">No logs yet</div>
         <div class="hint">Add RNDebugSDK.js to your app</div>
       </div>
+    </div>
+    <div class="console-find-bar" id="consoleFindBar" style="display:none">
+      <input id="consoleFindInput" class="console-find-input" placeholder="Find in logs... (Cmd+F)" />
+      <span id="consoleFindCount" class="console-find-count"></span>
+      <button class="console-find-btn" id="consoleFindPrev" title="Previous">▲</button>
+      <button class="console-find-btn" id="consoleFindNext" title="Next">▼</button>
+      <button class="console-find-btn" id="consoleFindClose" title="Close (Esc)">✕</button>
     </div>`;
 
   // Search filter
@@ -362,6 +394,7 @@ function initConsolePanel() {
     const level = checkbox.dataset.level;
     if (level) {
       state.console.levelFilters[level] = checkbox.checked;
+      if (level === 'redux') state.console.showRedux = checkbox.checked;
       setStoredLogLevels(state.console.levelFilters);
       updateLevelBtnText();
       renderConsole();
@@ -376,20 +409,67 @@ function initConsolePanel() {
     $('cBadge').textContent = '0';
     renderConsole();
   });
+
+  // Find bar (Cmd+F)
+  let _findMatches = [];
+  let _findIdx = -1;
+
+  function doFind(term) {
+    // Clear previous highlights
+    document.querySelectorAll('.console-find-highlight').forEach(el => {
+      el.replaceWith(el.textContent);
+    });
+    _findMatches = [];
+    _findIdx = -1;
+    if (!term) { $('consoleFindCount').textContent = ''; return; }
+
+    const rows = document.querySelectorAll('#consoleList .log-row');
+    rows.forEach(row => {
+      const text = row.textContent.toLowerCase();
+      if (text.includes(term.toLowerCase())) _findMatches.push(row);
+    });
+    $('consoleFindCount').textContent = _findMatches.length ? `${_findMatches.length} found` : 'No matches';
+    if (_findMatches.length) { _findIdx = 0; _findMatches[0].scrollIntoView({ block: 'nearest' }); _findMatches[0].style.outline = '1px solid var(--accent)'; }
+  }
+
+  function findNav(dir) {
+    if (!_findMatches.length) return;
+    if (_findMatches[_findIdx]) _findMatches[_findIdx].style.outline = '';
+    _findIdx = (_findIdx + dir + _findMatches.length) % _findMatches.length;
+    _findMatches[_findIdx].scrollIntoView({ block: 'nearest' });
+    _findMatches[_findIdx].style.outline = '1px solid var(--accent)';
+    $('consoleFindCount').textContent = `${_findIdx + 1}/${_findMatches.length}`;
+  }
+
+  $('consoleFindInput').addEventListener('input', (e) => doFind(e.target.value));
+  $('consoleFindPrev').addEventListener('click', () => findNav(-1));
+  $('consoleFindNext').addEventListener('click', () => findNav(1));
+  $('consoleFindClose').addEventListener('click', () => {
+    $('consoleFindBar').style.display = 'none';
+    if (_findMatches[_findIdx]) _findMatches[_findIdx].style.outline = '';
+    _findMatches = []; _findIdx = -1;
+    $('consoleFindInput').value = '';
+    $('consoleFindCount').textContent = '';
+  });
+  $('consoleFindInput').addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') $('consoleFindClose').click();
+    if (e.key === 'Enter') findNav(e.shiftKey ? -1 : 1);
+  });
 }
 
 function updateLevelBtnText() {
   const levels = state.console.levelFilters;
-  const allOn = Object.values(levels).every(v => v);
-  const allOff = Object.values(levels).every(v => !v);
+  const logLevels = { log: levels.log, info: levels.info, warn: levels.warn, error: levels.error, debug: levels.debug };
+  const allOn = Object.values(logLevels).every(v => v);
+  const allOff = Object.values(logLevels).every(v => !v);
   const btn = $('consoleLevelBtn');
   if (!btn) return;
-  if (allOn) btn.textContent = 'All Levels ▾';
-  else if (allOff) btn.textContent = 'None ▾';
-  else {
-    const active = Object.entries(levels).filter(([, v]) => v).map(([k]) => k.charAt(0).toUpperCase() + k.slice(1));
-    btn.textContent = active.join(', ') + ' ▾';
-  }
+  let text = '';
+  if (allOn) text = 'All Levels';
+  else if (allOff) text = 'None';
+  else text = Object.entries(logLevels).filter(([, v]) => v).map(([k]) => k.charAt(0).toUpperCase() + k.slice(1)).join(', ');
+  if (levels.redux) text += (text ? ' + ' : '') + 'Redux';
+  btn.textContent = text + ' ▾';
 }
 
 // Console is fed via IPC (network-event handled in IPC section above)
@@ -873,8 +953,8 @@ function initNetworkPanel() {
     <div class="net-filter-bar" id="netFilterBar">
       <input id="netSearchInput" class="net-search-input" placeholder="Filter URLs..." />
       <div class="net-type-filters" id="netTypeFilters">
-        <button class="net-type-btn active" data-type="all">All</button>
-        <button class="net-type-btn" data-type="fetch">Fetch/XHR</button>
+        <button class="net-type-btn" data-type="all">All</button>
+        <button class="net-type-btn active" data-type="fetch">Fetch/XHR</button>
         <button class="net-type-btn" data-type="js">JS</button>
         <button class="net-type-btn" data-type="css">CSS</button>
         <button class="net-type-btn" data-type="img">Img</button>
@@ -1726,6 +1806,7 @@ function initReduxPanel() {
       <input id="reduxSearch" class="net-search-input" style="margin-left:12px" placeholder="Filter actions..." />
       <div class="ml-auto" style="display:flex;align-items:center;gap:8px">
         <button class="panel-clear-btn" id="reduxClear" title="Clear redux">Clear</button>
+        <button class="panel-clear-btn" id="reduxSort" title="Toggle sort order">Time ▲</button>
         <div class="time-travel-bar" style="border:none;padding:0;margin:0">
           <button class="tt-btn" onclick="reduxJumpTo(state.redux.selected-1)">◀</button>
           <span class="tt-label" id="ttLabel">—/—</span>
@@ -1753,6 +1834,12 @@ function initReduxPanel() {
     $('rBadge').textContent = '0';
     renderRedux();
   });
+
+  $('reduxSort').addEventListener('click', () => {
+    state.redux.sortDir = state.redux.sortDir === 'desc' ? 'asc' : 'desc';
+    $('reduxSort').textContent = state.redux.sortDir === 'desc' ? 'Time \u25BC' : 'Time \u25B2';
+    renderRedux();
+  });
 }
 
 window.reduxJumpTo = idx => {
@@ -1786,11 +1873,24 @@ function handleReduxEvent(event) {
     allKeys.forEach(k => { if (!_deepEqual(prevState[k], nextState[k])) changedKeys.push(k); });
   }
 
-  state.redux.actions.push({ type: action?.type || '?', payload: action, ts: event.ts, index: idx, changedKeys });
+  const actionEntry = { type: action?.type || '?', payload: action, ts: event.ts, index: idx, changedKeys };
+  state.redux.actions.push(actionEntry);
   state.redux.states.push(nextState);
   state.redux.selected = idx;
   $('rBadge').textContent = state.redux.actions.length;
   renderRedux();
+
+  // Also add to console logs if Redux is enabled in console dropdown
+  if (state.console.showRedux) {
+    const msg = `[Redux] ${actionEntry.type}` + (changedKeys.length ? ` (changed: ${changedKeys.join(', ')})` : '');
+    addConsoleLog({
+      level: 'redux',
+      message: msg,
+      args: [{ t: 'string', v: `[Redux] ${actionEntry.type}` }, { t: 'object', v: action }],
+      ts: event.ts,
+      _isRedux: true,
+    });
+  }
 }
 
 function renderRedux() {
@@ -1798,8 +1898,9 @@ function renderRedux() {
   const empty = $('reduxEmpty');
   if (!content) return;
 
-  const { actions, states, selected, searchFilter } = state.redux;
-  const visible = searchFilter ? actions.filter(a => a.type.toLowerCase().includes(searchFilter)) : actions;
+  const { actions, states, selected, searchFilter, sortDir } = state.redux;
+  let visible = searchFilter ? actions.filter(a => a.type.toLowerCase().includes(searchFilter)) : [...actions];
+  if (sortDir === 'desc') visible = [...visible].reverse();
 
   empty.style.display = visible.length ? 'none' : 'flex';
   content.querySelectorAll('.rdx-entry').forEach(e => e.remove());
@@ -1893,8 +1994,13 @@ function renderRedux() {
   });
 
   content.appendChild(frag);
-  const selEl = content.querySelector('.rdx-entry.selected');
-  if (selEl) selEl.scrollIntoView({ block: 'nearest' });
+  // Auto-scroll: if asc (latest at bottom), scroll to bottom; otherwise scroll selected into view
+  if (state.redux.sortDir === 'asc') {
+    content.scrollTop = content.scrollHeight;
+  } else {
+    const selEl = content.querySelector('.rdx-entry.selected');
+    if (selEl) selEl.scrollIntoView({ block: 'nearest' });
+  }
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

package/assets/generate_icons.py

@@ -0,0 +1,175 @@
+#!/usr/bin/env python3
+"""
+ReactoRadar Icon Generator
+Generates all macOS iconset sizes from icon.svg, then compiles icon.icns.
+
+Requirements:
+    pip install cairosvg pillow
+
+Usage:
+    python3 generate_icons.py
+"""
+
+import os
+import shutil
+import struct
+import subprocess
+import sys
+import zlib
+from pathlib import Path
+
+# ---------------------------------------------------------------------------
+# Config
+# ---------------------------------------------------------------------------
+SCRIPT_DIR = Path(__file__).parent.resolve()
+SVG_SRC    = SCRIPT_DIR / "icon.svg"
+ICONSET    = SCRIPT_DIR / "icon.iconset"
+ICNS_OUT   = SCRIPT_DIR / "icon.icns"
+PNG_OUT    = SCRIPT_DIR / "icon.png"   # 1024×1024, for Electron dev mode
+
+SIZES = [
+    # (filename, pixels)
+    ("icon_16x16.png",         16),
+    ("icon_16x16@2x.png",      32),
+    ("icon_32x32.png",         32),
+    ("icon_32x32@2x.png",      64),
+    ("icon_128x128.png",       128),
+    ("icon_128x128@2x.png",    256),
+    ("icon_256x256.png",       256),
+    ("icon_256x256@2x.png",    512),
+    ("icon_512x512.png",       512),
+    ("icon_512x512@2x.png",    1024),
+]
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+def render_svg_to_png(svg_path: Path, out_path: Path, size: int) -> None:
+    """Render SVG → PNG at the given square pixel size."""
+    try:
+        import cairosvg
+        cairosvg.svg2png(
+            url=str(svg_path),
+            write_to=str(out_path),
+            output_width=size,
+            output_height=size,
+        )
+    except ImportError:
+        # Fallback: Inkscape CLI
+        result = subprocess.run(
+            ["inkscape", "--export-type=png",
+             f"--export-filename={out_path}",
+             f"--export-width={size}",
+             f"--export-height={size}",
+             str(svg_path)],
+            capture_output=True, text=True
+        )
+        if result.returncode != 0:
+            print(f"  inkscape error: {result.stderr}", file=sys.stderr)
+            raise RuntimeError("SVG rendering failed")
+
+
+def build_icns_with_iconutil(iconset_dir: Path, icns_path: Path) -> bool:
+    """Use macOS iconutil if available."""
+    if shutil.which("iconutil"):
+        result = subprocess.run(
+            ["iconutil", "-c", "icns", str(iconset_dir), "-o", str(icns_path)],
+            capture_output=True, text=True
+        )
+        if result.returncode == 0:
+            return True
+        print(f"  iconutil error: {result.stderr}", file=sys.stderr)
+    return False
+
+
+def _png_bytes(path: Path) -> bytes:
+    return path.read_bytes()
+
+
+def _icns_chunk(tag: bytes, data: bytes) -> bytes:
+    """Pack one ICNS chunk: 4-byte OSType + 4-byte length (includes header) + data."""
+    length = 8 + len(data)
+    return tag + struct.pack(">I", length) + data
+
+
+# ICNS OSType tags for each size
+_ICNS_TAGS = {
+    16:   b"icp4",
+    32:   b"icp5",
+    64:   b"icp6",
+    128:  b"ic07",
+    256:  b"ic08",
+    512:  b"ic09",
+    1024: b"ic10",
+}
+
+
+def build_icns_pure_python(iconset_dir: Path, icns_path: Path) -> None:
+    """Pure-Python ICNS writer (fallback when iconutil unavailable)."""
+    chunks = b""
+    # Deduplicate: use only the @2x names (they have the higher-res pixels)
+    # Actually we want one entry per unique pixel size, highest quality first.
+    seen = {}
+    for fname, size in SIZES:
+        if size not in seen:
+            seen[size] = iconset_dir / fname
+
+    for size in sorted(seen):
+        tag = _ICNS_TAGS.get(size)
+        if tag is None:
+            continue
+        png_path = seen[size]
+        if not png_path.exists():
+            print(f"  warning: {png_path.name} missing, skipping")
+            continue
+        chunks += _icns_chunk(tag, _png_bytes(png_path))
+
+    total = 8 + len(chunks)
+    icns_path.write_bytes(b"icns" + struct.pack(">I", total) + chunks)
+
+
+# ---------------------------------------------------------------------------
+# Main
+# ---------------------------------------------------------------------------
+
+def main():
+    print("=== ReactoRadar Icon Generator ===\n")
+
+    if not SVG_SRC.exists():
+        print(f"ERROR: {SVG_SRC} not found.", file=sys.stderr)
+        sys.exit(1)
+
+    # 1. Create iconset directory
+    ICONSET.mkdir(exist_ok=True)
+    print(f"Output directory: {ICONSET}\n")
+
+    # 2. Render each size
+    for fname, size in SIZES:
+        out = ICONSET / fname
+        print(f"  Rendering {fname:30s} ({size:4d}px) ...", end=" ", flush=True)
+        render_svg_to_png(SVG_SRC, out, size)
+        kb = out.stat().st_size // 1024
+        print(f"done  ({kb} KB)")
+
+    # 3. Copy 1024×1024 as icon.png (Electron dev-mode asset)
+    shutil.copy2(ICONSET / "icon_512x512@2x.png", PNG_OUT)
+    print(f"\nCopied icon.png  ({PNG_OUT.stat().st_size // 1024} KB)")
+
+    # 4. Build ICNS
+    print(f"\nBuilding {ICNS_OUT.name} ...")
+    if not build_icns_with_iconutil(ICONSET, ICNS_OUT):
+        print("  iconutil not available – using pure-Python writer")
+        build_icns_pure_python(ICONSET, ICNS_OUT)
+    print(f"  Written: {ICNS_OUT}  ({ICNS_OUT.stat().st_size // 1024} KB)")
+
+    print("\n✅ All done!\n")
+    print("Files generated:")
+    print(f"  {ICONSET}/          ← all PNG sizes")
+    print(f"  {ICNS_OUT}       ← for Electron builder  (assets/icon.icns)")
+    print(f"  {PNG_OUT}        ← for Electron dev mode (assets/icon.png)")
+    print(f"  {SVG_SRC}        ← master source")
+
+
+if __name__ == "__main__":
+    main()

package/main.js

@@ -38,10 +38,10 @@ app.whenReady().then(async () => {
 
   await createMainWindow();
 
-  // Send version to renderer
+  // Send version to renderer (delay to ensure IPC listeners are registered)
   const appVersion = require('./package.json').version;
   mainWindow?.webContents.on('did-finish-load', () => {
-    mainWindow?.webContents.send('app-version', appVersion);
+    setTimeout(() => mainWindow?.webContents.send('app-version', appVersion), 500);
   });
 
   // Check for updates (non-blocking)
@@ -505,6 +505,12 @@ function buildMenu() {
         { role: 'copy' },
         { role: 'paste' },
         { role: 'selectAll' },
+        { type: 'separator' },
+        {
+          label: 'Find',
+          accelerator: 'Cmd+F',
+          click: () => { mainWindow?.webContents.send('focus-search'); },
+        },
       ],
     },
     {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.4.1",
+  "version": "1.5.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": {

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',
+      'react-dt-status', 'trigger-open-cdp', 'clear-all-ui', 'theme-changed', 'update-available', 'app-version', 'focus-search',
     ];
     if (allowed.includes(channel)) {
       ipcRenderer.removeAllListeners(channel);

package/styles.css

@@ -369,6 +369,41 @@ body {
 .tab:hover:not(.active) { color: var(--text); }
 .ml-auto { margin-left: auto; }
 
+/* Console find bar (Cmd+F) */
+.console-find-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: var(--bg2);
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.console-find-input {
+  flex: 1;
+  padding: 3px 8px;
+  border: 1px solid var(--border2);
+  border-radius: 4px;
+  background: var(--bg3);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 11px;
+  outline: none;
+}
+.console-find-input:focus { border-color: var(--accent); }
+.console-find-count { font-size: 10px; color: var(--text-dim); flex-shrink: 0; min-width: 40px; }
+.console-find-btn {
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+.console-find-btn:hover { background: var(--bg3); color: var(--text); }
+.console-find-highlight { background: rgba(245,200,66,.3); border-radius: 2px; }
+
 /* Panel clear button (used in Console, Network, GA4, Redux) */
 .panel-clear-btn {
   padding: 3px 10px;
@@ -490,6 +525,7 @@ body {
 .lvl-warn  { background: rgba(245,200,66,.12);  color: var(--yellow); }
 .lvl-error { background: rgba(255,94,114,.15);  color: var(--red); }
 .lvl-debug { background: rgba(155,127,255,.12); color: var(--accent2); }
+.lvl-redux { background: rgba(61,214,140,.12); color: var(--green); }
 
 .log-body-wrap {
   display: flex;