reactoradar 1.5.8 → 1.5.10

package/app.js

@@ -67,7 +67,7 @@ function renderJSON(val) {
   try {
     const str = typeof val === 'string' ? val : JSON.stringify(val, null, 2);
     return syntaxHighlight(esc(str));
-  } catch { return esc(String(val)); }
+  } catch { return esc(typeof val === 'object' ? JSON.stringify(val) : String(val)); }
 }
 
 function tryURL(url) { try { return new URL(url); } catch { return null; } }
@@ -239,7 +239,7 @@ 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', () => {
+  function _handleFind() {
     const searchMap = {
       console: 'consoleSearch',
       network: 'netSearchInput',
@@ -257,6 +257,14 @@ if (window.electronAPI) {
       const bar = $('consoleFindBar');
       if (bar) { bar.style.display = 'flex'; $('consoleFindInput')?.focus(); }
     }
+  }
+  window.electronAPI.on('focus-search', _handleFind);
+  // Direct keyboard fallback — Electron menu accelerators can miss in some contexts
+  document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
+      e.preventDefault();
+      _handleFind();
+    }
   });
 
   window.electronAPI.on('app-version', (version) => {
@@ -688,6 +696,14 @@ function createTreeNode(key, val, startCollapsed) {
   return container;
 }
 
+function _safeStr(val) {
+  if (val === null) return 'null';
+  if (val === undefined) return 'undefined';
+  if (typeof val === 'string') return val;
+  if (typeof val === 'number' || typeof val === 'boolean') return String(val);
+  try { return JSON.stringify(val, null, 2); } catch { return String(val); }
+}
+
 function createPrimitiveSpan(val) {
   const s = document.createElement('span');
   if (val === null) { s.className = 'ov-null'; s.textContent = 'null'; }
@@ -695,7 +711,7 @@ function createPrimitiveSpan(val) {
   else if (typeof val === 'string') { s.className = 'ov-str'; s.textContent = `"${val}"`; }
   else if (typeof val === 'number') { s.className = 'ov-num'; s.textContent = String(val); }
   else if (typeof val === 'boolean') { s.className = 'ov-bool'; s.textContent = String(val); }
-  else { s.textContent = String(val); }
+  else { s.textContent = _safeStr(val); }
   return s;
 }
 
@@ -705,7 +721,7 @@ function renderConsoleArg(arg) {
     // Backward compat: raw string
     const s = document.createElement('span');
     s.className = 'ov-str';
-    s.textContent = String(arg);
+    s.textContent = _safeStr(arg);
     return s;
   }
   const { t, v } = arg;
@@ -723,7 +739,7 @@ function renderConsoleArg(arg) {
     return createTreeNode(null, v, false);
   }
   const s = document.createElement('span');
-  s.textContent = String(v);
+  s.textContent = _safeStr(v);
   return s;
 }
 
@@ -1972,6 +1988,94 @@ function _findLeafChanges(oldVal, newVal, basePath, maxDepth) {
   return changes;
 }
 
+// Create a tree node with changed paths highlighted in a different color
+function _createHighlightedTree(key, val, changedPaths, currentPath, isOld) {
+  const isArray = Array.isArray(val);
+  const isObj = val !== null && typeof val === 'object';
+  const myPath = key !== null ? (currentPath ? `${currentPath}.${key}` : String(key)) : currentPath;
+  const isChanged = changedPaths.has(myPath);
+
+  if (!isObj) {
+    // Leaf value
+    const row = document.createElement('div');
+    row.className = 'ov-leaf' + (isChanged ? ' rdx-highlight' : '');
+    if (isChanged) row.style.cssText = isOld
+      ? 'background:rgba(255,94,114,.12);border-radius:3px;padding:1px 4px;'
+      : 'background:rgba(61,214,140,.12);border-radius:3px;padding:1px 4px;';
+    if (key !== null) {
+      const k = document.createElement('span');
+      k.className = 'ov-key';
+      k.style.color = isChanged ? (isOld ? 'var(--red)' : 'var(--green)') : '';
+      k.textContent = `${key}: `;
+      row.appendChild(k);
+    }
+    const v = document.createElement('span');
+    v.className = 'ov-prim';
+    if (isChanged) v.style.fontWeight = '700';
+    if (val === null) { v.textContent = 'null'; v.style.color = isChanged ? (isOld ? 'var(--red)' : 'var(--green)') : 'var(--text-dim)'; }
+    else if (typeof val === 'string') { v.textContent = `"${val}"`; v.style.color = isChanged ? (isOld ? 'var(--red)' : 'var(--green)') : 'var(--green)'; }
+    else if (typeof val === 'number') { v.textContent = String(val); v.style.color = isChanged ? (isOld ? 'var(--red)' : 'var(--green)') : 'var(--accent2)'; }
+    else if (typeof val === 'boolean') { v.textContent = String(val); v.style.color = isChanged ? (isOld ? 'var(--red)' : 'var(--green)') : 'var(--accent2)'; }
+    else { v.textContent = _safeStr(val); }
+    row.appendChild(v);
+    return row;
+  }
+
+  // Object/Array — check if any descendants changed
+  const hasChangedDescendant = [...changedPaths].some(p => p === myPath || p.startsWith(myPath ? myPath + '.' : ''));
+  const container = document.createElement('div');
+  container.className = 'ov-node';
+
+  const header = document.createElement('div');
+  header.className = 'ov-header';
+
+  const arrow = document.createElement('span');
+  arrow.className = 'ov-arrow';
+  arrow.textContent = '\u25B6';
+  header.appendChild(arrow);
+
+  if (key !== null) {
+    const k = document.createElement('span');
+    k.className = 'ov-key';
+    if (hasChangedDescendant) k.style.color = isOld ? 'var(--red)' : 'var(--green)';
+    k.textContent = `${key}: `;
+    header.appendChild(k);
+  }
+
+  const preview = document.createElement('span');
+  preview.className = 'ov-preview';
+  preview.textContent = isArray ? `Array(${val.length})` : `{${Object.keys(val).length} keys}`;
+  header.appendChild(preview);
+
+  container.appendChild(header);
+
+  const children = document.createElement('div');
+  children.className = 'ov-children';
+  // Always start collapsed — user expands what they need
+  children.style.display = 'none';
+
+  let populated = false;
+  function populate() {
+    if (populated) return;
+    populated = true;
+    const entries = isArray ? val.map((v, i) => [i, v]) : Object.entries(val);
+    entries.forEach(([k, v]) => {
+      children.appendChild(_createHighlightedTree(k, v, changedPaths, myPath, isOld));
+    });
+  }
+
+  header.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const open = children.style.display !== 'none';
+    children.style.display = open ? 'none' : 'block';
+    arrow.textContent = open ? '\u25B6' : '\u25BC';
+    if (!open) populate();
+  });
+
+  container.appendChild(children);
+  return container;
+}
+
 function handleReduxEvent(event) {
   if (event.type !== 'redux') return;
   const { action, nextState } = event;
@@ -2004,6 +2108,29 @@ function handleReduxEvent(event) {
   }
 }
 
+// Assign a consistent color to each Redux action category (e.g. ANALYTICS, CART, USER)
+const _reduxCatColors = {};
+const _reduxColorPalette = [
+  'var(--accent)',   // blue
+  'var(--green)',    // green
+  'var(--orange)',   // orange
+  'var(--accent2)',  // purple
+  '#e06c75',        // coral
+  '#56b6c2',        // teal
+  '#c678dd',        // magenta
+  '#d19a66',        // gold
+  '#98c379',        // lime
+  '#e5c07b',        // yellow
+];
+let _reduxColorIdx = 0;
+function _reduxCategoryColor(category) {
+  if (!_reduxCatColors[category]) {
+    _reduxCatColors[category] = _reduxColorPalette[_reduxColorIdx % _reduxColorPalette.length];
+    _reduxColorIdx++;
+  }
+  return _reduxCatColors[category];
+}
+
 function renderRedux() {
   const content = $('reduxContent');
   const empty = $('reduxEmpty');
@@ -2031,12 +2158,32 @@ function renderRedux() {
     const header = document.createElement('div');
     header.className = 'rdx-entry-header';
     const changesBadge = a.changedKeys?.length ? `<span class="rdx-changes">${a.changedKeys.length} changed</span>` : '';
-    header.innerHTML = `<span class="rdx-index">#${a.index}</span><span class="rdx-type">${esc(a.type)}</span>${changesBadge}<span class="rdx-time">${ts(a.ts)}</span>`;
+    // Color-code action type by category prefix (e.g. ANALYTICS/, CART/, USER/)
+    const typeParts = a.type.split('/');
+    let typeHtml;
+    if (typeParts.length >= 2) {
+      const catColor = _reduxCategoryColor(typeParts[0]);
+      typeHtml = `<span class="rdx-type-cat" style="color:${catColor}">${esc(typeParts[0])}/</span><span class="rdx-type-name">${esc(typeParts.slice(1).join('/'))}</span>`;
+    } else {
+      typeHtml = `<span class="rdx-type">${esc(a.type)}</span>`;
+    }
+    header.innerHTML = `<span class="rdx-index">#${a.index}</span>${typeHtml}<span class="rdx-header-right">${changesBadge}<span class="rdx-time">${ts(a.ts)}</span></span>`;
     // Toggle: click to expand, click again to collapse
     header.addEventListener('click', () => {
       state.redux.selected = isSelected ? -1 : a.index;
       renderRedux();
     });
+    // Right-click to copy action type
+    header.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      showContextMenu(e, [
+        { label: 'Copy Action Type', action: () => navigator.clipboard.writeText(a.type) },
+        { label: 'Copy Action Payload', action: () => navigator.clipboard.writeText(JSON.stringify(a.payload, null, 2)) },
+      ]);
+    });
+    // Allow text selection on the action type
+    header.style.userSelect = 'text';
     entry.appendChild(header);
 
     // Expanded detail — only for explicitly selected action
@@ -2044,6 +2191,18 @@ function renderRedux() {
       const detail = document.createElement('div');
       detail.className = 'rdx-entry-detail';
 
+      // Close button
+      const closeBtn = document.createElement('button');
+      closeBtn.className = 'rdx-close-btn';
+      closeBtn.textContent = '✕';
+      closeBtn.title = 'Close';
+      closeBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        state.redux.selected = -1;
+        renderRedux();
+      });
+      detail.appendChild(closeBtn);
+
       // Changed keys badges
       if (a.changedKeys?.length > 0) {
         const keysEl = document.createElement('div');
@@ -2062,18 +2221,14 @@ function renderRedux() {
         detail.appendChild(createTreeNode(null, a.payload, false));
       }
 
-      // Store changes — show ONLY the changed leaf values, not entire state
+      // Store changes — two-column layout: Previous | Current
       const prevS = a.index > 0 ? states[a.index - 1] : null;
       const currS = states[a.index];
       if (currS && typeof currS === 'object' && a.changedKeys?.length > 0) {
-        const sLabel = document.createElement('div');
-        sLabel.className = 'redux-section-title';
-        sLabel.textContent = 'Store Changes';
-        detail.appendChild(sLabel);
-
         a.changedKeys.forEach(key => {
           const keyWrap = document.createElement('div');
           keyWrap.className = 'rdx-store-diff';
+
           const kLabel = document.createElement('div');
           kLabel.className = 'rdx-store-key-label';
           kLabel.textContent = key;
@@ -2082,29 +2237,67 @@ function renderRedux() {
           const oldVal = prevS ? prevS[key] : undefined;
           const newVal = currS[key];
 
-          // Deep diff: find only the leaf values that actually changed
-          const leafChanges = _findLeafChanges(oldVal, newVal, key);
-          if (leafChanges.length > 0) {
-            leafChanges.forEach(change => {
-              const row = document.createElement('div');
-              row.className = 'rdx-diff-leaf';
-              row.innerHTML = `<span class="rdx-diff-path">${esc(change.path)}</span>`
-                + `<span class="rdx-diff-old">${esc(String(change.oldVal ?? 'undefined'))}</span>`
-                + `<span class="rdx-diff-arrow">→</span>`
-                + `<span class="rdx-diff-new">${esc(String(change.newVal ?? 'undefined'))}</span>`;
-              keyWrap.appendChild(row);
-            });
+          // Find which sub-keys changed (for highlighting)
+          const changedPaths = new Set();
+          _findLeafChanges(oldVal, newVal, '').forEach(c => changedPaths.add(c.path));
+
+          // Two-column grid: Previous | Current
+          const grid = document.createElement('div');
+          grid.className = 'rdx-diff-grid';
+
+          // Previous column
+          const prevCol = document.createElement('div');
+          prevCol.className = 'rdx-diff-col prev';
+          const prevLabel = document.createElement('div');
+          prevLabel.className = 'rdx-state-label prev';
+          prevLabel.textContent = '- Previous';
+          prevCol.appendChild(prevLabel);
+          if (oldVal !== undefined) {
+            prevCol.appendChild(_createHighlightedTree(null, oldVal, changedPaths, '', true));
+          } else {
+            const na = document.createElement('span');
+            na.style.cssText = 'color:var(--text-dim);font-size:10px;font-style:italic';
+            na.textContent = 'undefined';
+            prevCol.appendChild(na);
+          }
+          grid.appendChild(prevCol);
+
+          // Current column
+          const currCol = document.createElement('div');
+          currCol.className = 'rdx-diff-col curr';
+          const currLabel = document.createElement('div');
+          currLabel.className = 'rdx-state-label curr';
+          currLabel.textContent = '+ Current';
+          currCol.appendChild(currLabel);
+          if (newVal !== undefined) {
+            currCol.appendChild(_createHighlightedTree(null, newVal, changedPaths, '', false));
           } else {
-            // Fallback: show old → new for the whole key
-            const row = document.createElement('div');
-            row.className = 'rdx-diff-leaf';
-            const oldStr = oldVal === undefined ? 'undefined' : (typeof oldVal === 'object' ? JSON.stringify(oldVal) : String(oldVal));
-            const newStr = newVal === undefined ? 'undefined' : (typeof newVal === 'object' ? JSON.stringify(newVal) : String(newVal));
-            row.innerHTML = `<span class="rdx-diff-old">${esc(oldStr)}</span>`
-              + `<span class="rdx-diff-arrow">→</span>`
-              + `<span class="rdx-diff-new">${esc(newStr)}</span>`;
-            keyWrap.appendChild(row);
+            const na = document.createElement('span');
+            na.style.cssText = 'color:var(--text-dim);font-size:10px;font-style:italic';
+            na.textContent = 'undefined';
+            currCol.appendChild(na);
           }
+          grid.appendChild(currCol);
+
+          // Right-click to copy on each column
+          prevCol.addEventListener('contextmenu', (e) => {
+            e.preventDefault(); e.stopPropagation();
+            showContextMenu(e, [
+              { label: 'Copy Previous Value', action: () => navigator.clipboard.writeText(JSON.stringify(oldVal, null, 2)) },
+              { label: 'Copy Current Value', action: () => navigator.clipboard.writeText(JSON.stringify(newVal, null, 2)) },
+              { label: `Copy "${key}" key`, action: () => navigator.clipboard.writeText(key) },
+            ]);
+          });
+          currCol.addEventListener('contextmenu', (e) => {
+            e.preventDefault(); e.stopPropagation();
+            showContextMenu(e, [
+              { label: 'Copy Current Value', action: () => navigator.clipboard.writeText(JSON.stringify(newVal, null, 2)) },
+              { label: 'Copy Previous Value', action: () => navigator.clipboard.writeText(JSON.stringify(oldVal, null, 2)) },
+              { label: `Copy "${key}" key`, action: () => navigator.clipboard.writeText(key) },
+            ]);
+          });
+
+          keyWrap.appendChild(grid);
           detail.appendChild(keyWrap);
         });
       }

package/package.json

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

@@ -924,7 +924,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,6 +971,17 @@ 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 0 2px; letter-spacing: 0.5px; }
+.rdx-state-label.prev { color: var(--red); }
+.rdx-state-label.curr { color: var(--green); }
+.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); }
 .rdx-diff-row.added .rdx-diff-sign { color: var(--green); }