reactoradar 1.6.7 → 1.6.10

package/bin/setup.js

@@ -181,6 +181,7 @@ function findStoreFile(projectDir) {
   ];
   const storeNames = ['store.ts', 'store.js', 'store.tsx', 'store.jsx', 'index.ts', 'index.js', 'index.tsx'];
 
+  // 1. Check common store file locations
   for (const dir of searchDirs) {
     for (const name of storeNames) {
       const p = path.join(projectDir, dir, name);
@@ -193,18 +194,32 @@ function findStoreFile(projectDir) {
     }
   }
 
-  // Deep search: recursively find any file with configureStore/createStore
+  // 2. Check App.tsx / App.js (common pattern: store created in root component)
+  const rootAppFiles = ['src/App.tsx', 'src/App.js', 'App.tsx', 'App.js', 'app/App.tsx', 'app/App.js'];
+  for (const f of rootAppFiles) {
+    const p = path.join(projectDir, f);
+    if (fileExists(p)) {
+      const content = fs.readFileSync(p, 'utf8');
+      if (content.includes('configureStore') || content.includes('createStore')) {
+        return f;
+      }
+    }
+  }
+
+  // 3. Deep search: recursively find files with actual createStore()/configureStore() calls
+  //    Skip files that merely reference configureStore as a parameter/type name
   try {
     const glob = (dir, depth) => {
       if (depth > 4) return null;
       let entries;
       try { entries = fs.readdirSync(path.join(projectDir, dir), { withFileTypes: true }); } catch { return null; }
       for (const e of entries) {
-        if (e.name === 'node_modules' || e.name.startsWith('.')) continue;
+        if (e.name === 'node_modules' || e.name.startsWith('.') || e.name === 'debug') continue;
         const rel = path.join(dir, e.name);
-        if (e.isFile() && /\.(ts|js|tsx|jsx)$/.test(e.name) && /store/i.test(e.name)) {
+        if (e.isFile() && /\.(ts|js|tsx|jsx)$/.test(e.name)) {
           const content = fs.readFileSync(path.join(projectDir, rel), 'utf8');
-          if (content.includes('configureStore') || content.includes('createStore')) {
+          // Must contain actual call: configureStore({ or createStore( — not just the word as a type/param
+          if (/configureStore\s*\(/.test(content) || /createStore\s*\(/.test(content)) {
             return rel;
           }
         }
@@ -265,12 +280,20 @@ async function install(projectDir) {
     process.exit(1);
   }
 
-  // Read SDK, patch HOST
+  // Read SDK, patch HOST_OVERRIDE for real device support
+  // The SDK auto-detects Android emulator vs iOS simulator at runtime.
+  // For real devices, we set HOST_OVERRIDE to the Mac's LAN IP.
   let sdkContent = fs.readFileSync(sdkSrc, 'utf8');
-  sdkContent = sdkContent.replace(
-    /const HOST = '[^']+';/,
-    `const HOST = '${host}';`
-  );
+  const isRealDevice = reason.includes('device') || reason.includes('LAN IP');
+  if (isRealDevice && host !== '127.0.0.1' && host !== '10.0.2.2') {
+    sdkContent = sdkContent.replace(
+      /const HOST_OVERRIDE = null;/,
+      `const HOST_OVERRIDE = '${host}';`
+    );
+    log('HOST_OVERRIDE set to', C.bold + host + C.reset, '(real device LAN IP)');
+  } else {
+    log('HOST auto-detect enabled', C.dim + '(Android: 10.0.2.2, iOS: 127.0.0.1)' + C.reset);
+  }
   try {
     fs.writeFileSync(sdkDest, sdkContent);
   } catch (e) {
@@ -383,12 +406,51 @@ ${SDK_MARKER_END}
              warn('Could not auto-patch', storeFile, '— wire Redux manually');
            }
          }
-       } else if (storeContent.includes('createStore')) {
-         warn('Legacy createStore found at', C.bold + storeFile + C.reset);
-         console.log(C.dim + '    Add manually:' + C.reset);
-         console.log(C.dim + `      import { reduxEnhancer } from '${relSDK}';` + C.reset);
-         console.log(C.dim + '      const store = createStore(reducer, __DEV__ ? reduxEnhancer : undefined);' + C.reset);
-       }
+        } else if (storeContent.includes('createStore')) {
+          // Legacy createStore — try to auto-patch by adding reduxMiddleware to middleware array
+          let patched = storeContent;
+          let didPatch = false;
+
+          // Pattern 1: middleware array exists — push reduxMiddleware into it
+          // e.g. const middleware = []; or const middleware = [sagaMiddleware];
+          if (/(?:const|let|var)\s+middleware\s*=\s*\[/.test(storeContent) && !storeContent.includes('reduxMiddleware') && !storeContent.includes('RNDebugSDK')) {
+            // Add the require + push after the middleware array declaration
+            patched = patched.replace(
+              /((?:const|let|var)\s+middleware\s*=\s*\[[^\]]*\];?)/,
+              `$1\n  if (__DEV__) { try { const { reduxMiddleware } = require('${relSDK}'); if (reduxMiddleware) middleware.push(reduxMiddleware); } catch {} }`
+            );
+            if (patched !== storeContent) {
+              didPatch = true;
+            }
+          }
+
+          // Pattern 2: applyMiddleware(...middleware) exists but no middleware array — inject inline
+          if (!didPatch && storeContent.includes('applyMiddleware') && !storeContent.includes('reduxMiddleware') && !storeContent.includes('RNDebugSDK')) {
+            // Find the if (__DEV__) block near middleware setup and add there
+            // Or add before the createStore call
+            const createStoreMatch = storeContent.match(/createStore\s*\(/);
+            if (createStoreMatch) {
+              const idx = storeContent.indexOf(createStoreMatch[0]);
+              const insertPoint = storeContent.lastIndexOf('\n', idx);
+              if (insertPoint > 0) {
+                patched = storeContent.slice(0, insertPoint) +
+                  `\n  if (__DEV__) { try { const { reduxMiddleware } = require('${relSDK}'); if (reduxMiddleware) middleware.push(reduxMiddleware); } catch {} }` +
+                  storeContent.slice(insertPoint);
+                if (patched !== storeContent) didPatch = true;
+              }
+            }
+          }
+
+          if (didPatch) {
+            fs.writeFileSync(storePath, patched);
+            log('Patched', C.bold + storeFile + C.reset, '— Redux middleware wired (legacy createStore)');
+          } else {
+            warn('Legacy createStore found at', C.bold + storeFile + C.reset);
+            console.log(C.dim + '    Could not auto-patch. Add manually:' + C.reset);
+            console.log(C.dim + `      if (__DEV__) { try { const { reduxMiddleware } = require('${relSDK}'); middleware.push(reduxMiddleware); } catch {} }` + C.reset);
+            console.log(C.dim + '    Add this BEFORE the createStore() call in your middleware setup.' + C.reset);
+          }
+        }
      } else {
        warn('Redux detected but store file not found automatically');
        console.log(C.dim + '    Add to your store setup:' + C.reset);

package/init.js

@@ -5,7 +5,8 @@
 
 // ─── CDP Button ───────────────────────────────────────────────────────────────
 $('btnCDP')?.addEventListener('click', () => {
-  window.electronAPI?.openCDPTarget(null);
+  // Tell main process to open the CDP DevTools window with the best available target
+  window.electronAPI?.openCDPTarget(null); // null = use latest known target
 });
 
 // ─── Screenshot Button ────────────────────────────────────────────────────────
@@ -37,7 +38,6 @@ if (window.electronAPI) {
   window.electronAPI.on('network-event', handleNetworkEvent);
   window.electronAPI.on('storage-event', handleStorageEvent);
 
-  window.electronAPI.on('console-event', addConsoleLog);
   window.electronAPI.on('ga4-event', handleGA4Event);
 
   window.electronAPI.on('perf-event', event => {
@@ -66,6 +66,7 @@ if (window.electronAPI) {
 
   // Cmd+F — focus the search input for the active panel
   function _handleFind() {
+    // If network detail is open, focus the detail search
     if (state.activePanel === 'network' && state.network.selectedId) {
       const wrap = $('detailSearchWrap');
       const input = $('detailSearchInput');
@@ -88,12 +89,14 @@ if (window.electronAPI) {
       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('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();
@@ -104,6 +107,7 @@ if (window.electronAPI) {
   window.electronAPI.on('app-version', (version, isPackaged) => {
     state._appVersion = version;
     state._isPackaged = !!isPackaged;
+    // Update anywhere the version is displayed
     document.querySelectorAll('#aboutVersion').forEach(el => el.textContent = 'v' + version);
   });
 
@@ -121,21 +125,27 @@ if (window.electronAPI) {
     window.electronAPI?.openCDPTarget(null);
   });
 
+  // Theme toggle from menu shortcut (Cmd+Shift+T)
   window.electronAPI.on('theme-changed', theme => {
     document.documentElement.setAttribute('data-theme', theme);
     setStoredTheme(theme);
     document.querySelectorAll('#themeSwitcher .theme-card')
       .forEach(b => b.classList.toggle('active', b.dataset.theme === theme));
   });
+
+  // Console event IPC
+  window.electronAPI.on('console-event', addConsoleLog);
 }
 
 // ─── Memory Monitor ──────────────────────────────────────────────────────────
+// Check memory usage periodically and warn user before it causes blank screen
 let _memoryWarningShown = false;
 setInterval(() => {
   if (!window.performance || !performance.memory) return;
   const used = performance.memory.usedJSHeapSize;
   const limit = performance.memory.jsHeapSizeLimit;
   const pct = used / limit;
+  // Warn at 70% usage
   if (pct > 0.7 && !_memoryWarningShown) {
     _memoryWarningShown = true;
     const banner = document.createElement('div');
@@ -147,6 +157,7 @@ setInterval(() => {
       + `<button class="memory-warn-btn" id="memWarnDismiss">Dismiss</button>`;
     document.body.prepend(banner);
     $('memWarnClear')?.addEventListener('click', () => {
+      // Clear all panel data
       state.console.logs = []; _consolePending = [];
       _lastLogMsg = ''; _lastLogRow = null; _lastLogCount = 1;
       $('cBadge').textContent = '0'; renderConsole();
@@ -158,17 +169,19 @@ setInterval(() => {
     });
     $('memWarnDismiss')?.addEventListener('click', () => { banner.remove(); });
   }
+  // Reset flag when memory drops
   if (pct < 0.5) _memoryWarningShown = false;
-}, 30000);
+}, 30000); // Check every 30 seconds
+
+// Apply saved theme + font size + font family + app name on load
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Apply saved settings on load
-// ─────────────────────────────────────────────────────────────────────────────
 applyTheme(getStoredTheme());
 applyFontSize(getStoredFontSize());
 applyFontFamily(getStoredFontFamily());
 applyAppName(getStoredAppName());
 applyTabVisibility();
+
+// Send stored metro port to backend
 window.electronAPI?.setMetroPort(getStoredMetroPort());
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -182,6 +195,5 @@ initMemoryPanel();
 initReduxPanel();
 initStoragePanel();
 initReactPanel();
-initSourcesPanel();
 initNativeLogsPanel();
 initSettingsPanel();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.6.7",
+  "version": "1.6.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/panels/console.js

@@ -1,5 +1,4 @@
-// ─── Console Panel ─────────────────────────────────────────────────────────
-
+// ─── Console Panel + Shared Renderers ─────────────────────────────────────
 // Load saved log level filters from localStorage
 function getStoredLogLevels() {
   try {
@@ -14,6 +13,7 @@ function setStoredLogLevels(levels) {
 
 function initConsolePanel() {
   const panel = $('panel-console');
+  if (!panel) return;
   const levels = getStoredLogLevels();
   state.console.levelFilters = levels;
   state.console.showRedux = !!levels.redux;
@@ -321,10 +321,10 @@ function flushConsoleBatch() {
   }
 }
 
-// NOTE: console-event IPC listener is registered in init.js (not here)
-// to keep all IPC registrations in one place and avoid duplicate listener issues.
 
-// ─── Shared Object Tree Renderer (Chrome DevTools-like) ──────────────────────
+// NOTE: console-event IPC listener is registered in init.js
+
+// ─── Object Tree Renderer (Chrome DevTools-like) ─────────────────────────────
 // Builds interactive, collapsible DOM nodes for objects/arrays.
 
 // Collect all entries for an object: own data properties + prototype getter values.
@@ -709,7 +709,7 @@ function buildLogRow(l) {
   return div;
 }
 
-// ─── Shared Context Menu ─────────────────────────────────────────────────────
+// ─── Shared context menu helper ──────────────────────────────────────────────
 function showContextMenu(e, items) {
   document.querySelectorAll('.ctx-menu').forEach(el => el.remove());
   const menu = document.createElement('div');
@@ -786,3 +786,4 @@ function renderConsole() {
   list.appendChild(frag);
   list.scrollTop = list.scrollHeight;
 }
+

package/panels/ga4.js

@@ -1,10 +1,12 @@
+// ─── GA4 Events Panel ──────────────────────────────────────────────────────
 // ─────────────────────────────────────────────────────────────────────────────
-// GA4 EVENT INSPECTOR — extracted from app.js
+// GA4 EVENT INSPECTOR
 // ─────────────────────────────────────────────────────────────────────────────
 const ga4State = { events: [], selected: -1, searchFilter: '', sortDir: 'desc' };
 
 function initGA4Panel() {
   const panel = $('panel-ga4');
+  if (!panel) return;
   panel.innerHTML = `
     <div class="panel-toolbar">
       <span class="panel-label">GA4 Events</span>
@@ -326,3 +328,4 @@ function renderGA4Summary() {
     summary.appendChild(chip);
   });
 }
+

package/panels/native.js

@@ -1,4 +1,7 @@
 // ─── Native Logs Panel ─────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+// NATIVE LOGS PANEL
+// ─────────────────────────────────────────────────────────────────────────────
 const _nativeState = { logs: [], connected: false, platform: null, levelFilter: 'all', searchFilter: '' };
 const MAX_NATIVE_LOGS = 2000;
 
@@ -254,3 +257,4 @@ function _renderNativeLogs() {
   list.innerHTML = '';
   _nativeState.logs.forEach(log => _appendNativeLog(log));
 }
+

package/panels/network.js

@@ -1,5 +1,7 @@
 // ─── Network Panel ─────────────────────────────────────────────────────────
-
+// ─────────────────────────────────────────────────────────────────────────────
+// NETWORK PANEL (Chrome DevTools-style)
+// ─────────────────────────────────────────────────────────────────────────────
 const NET_COLS = [
   { key: 'name',      label: 'Name',      width: 380, min: 150 },
   { key: 'status',    label: 'Status',    width: 60,  min: 40 },
@@ -12,6 +14,7 @@ const NET_COLS = [
 
 function initNetworkPanel() {
   const panel = $('panel-network');
+  if (!panel) return;
   panel.innerHTML = `
     <div class="panel-toolbar">
       <span class="panel-label">Network</span>
@@ -966,3 +969,4 @@ function buildCurlCommand(r) {
   }
   return cmd;
 }
+

package/panels/performance.js

@@ -1,8 +1,12 @@
-// ─── Performance + Memory Panel ────────────────────────────────────────────
+// ─── Performance + Memory Panels ───────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+// PERFORMANCE PANEL — FPS, render timing, JS thread
+// ─────────────────────────────────────────────────────────────────────────────
 const perfState = { fps: [], jsThread: [], uiThread: [], recording: false, data: [] };
 
 function initPerformancePanel() {
   const panel = $('panel-performance');
+  if (!panel) return;
   panel.innerHTML = `
     <div class="panel-toolbar">
       <span class="panel-label">Performance</span>
@@ -130,9 +134,12 @@ function handlePerfEvent(event) {
   }
 }
 
-// ─── Memory Panel ────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+// MEMORY PANEL — Heap snapshot summary via Hermes CDP
+// ─────────────────────────────────────────────────────────────────────────────
 function initMemoryPanel() {
   const panel = $('panel-memory');
+  if (!panel) return;
   panel.innerHTML = `
     <div class="panel-toolbar">
       <span class="panel-label">Memory</span>

package/panels/react.js

@@ -1,6 +1,7 @@
 // ─── React Tree Panel ──────────────────────────────────────────────────────
 function initReactPanel() {
   const panel = $('panel-react');
+  if (!panel) return;
   panel.innerHTML = `
     <div class="panel-toolbar">
       <span class="panel-label">React Tree</span>
@@ -19,3 +20,4 @@ function initReactPanel() {
     window.electronAPI?.openReactDevTools();
   });
 }
+

package/panels/redux.js

@@ -1,8 +1,10 @@
+// ─── Redux Panel ───────────────────────────────────────────────────────────
 // ─────────────────────────────────────────────────────────────────────────────
-// REDUX PANEL — extracted from app.js
+// REDUX PANEL
 // ─────────────────────────────────────────────────────────────────────────────
 function initReduxPanel() {
   const panel = $('panel-redux');
+  if (!panel) return;
   panel.innerHTML = `
     <div class="panel-toolbar">
       <span class="panel-label">Redux</span>
@@ -436,3 +438,4 @@ function renderRedux() {
     selEl.scrollIntoView({ block: 'nearest', behavior: 'auto' });
   }
 }
+

package/panels/settings.js

@@ -1,6 +1,4 @@
-// ─── Settings Panel ────────────────────────────────────────────────────────
-
-// ─── Theme helpers ───────────────────────────────────────────────────────────
+// ─── Settings Panel + Shared Utilities ─────────────────────────────────────
 function getStoredTheme() {
   try { return localStorage.getItem('rn-debug-theme') || 'dark'; } catch { return 'dark'; }
 }
@@ -303,6 +301,7 @@ function applyFontSize(size) {
 
 function initSettingsPanel() {
   const panel = $('panel-settings');
+  if (!panel) return;
   const current = getStoredTheme();
   const currentSize = getStoredFontSize();
    panel.innerHTML = `
@@ -594,13 +593,12 @@ function _loadVersionHistory() {
         } catch { /* skip bad date */ }
       }
 
-      // Build action buttons based on install type
+      // Build action button based on install type
       let actionHtml = '';
       if (isCurrent) {
         actionHtml = '<span class="version-installed">Installed</span>';
       } else if (isPackaged) {
-        // Show download dropdown with .dmg and .zip links
-        actionHtml = '<div class="version-dl-wrap"><button class="version-install-btn" title="Download this version">Download ▾</button></div>';
+        actionHtml = '<button class="version-install-btn" title="Download .dmg for this version">Download</button>';
       } else {
         actionHtml = `<button class="version-npm-btn" title="Copy npm install command">npx @${esc(r.version)}</button>`;
       }
@@ -615,57 +613,14 @@ function _loadVersionHistory() {
           <button class="version-notes-btn" title="View release notes">Notes</button>
         </div>`;
 
-      // DMG/ZIP download dropdown
-      const dlWrap = row.querySelector('.version-dl-wrap');
+      // DMG download button — opens the .dmg asset or release page
       const installBtn = row.querySelector('.version-install-btn');
-      if (installBtn && dlWrap) {
-        installBtn.addEventListener('click', (e) => {
-          e.stopPropagation();
-          // Remove any existing dropdown
-          document.querySelectorAll('.version-dl-menu').forEach(m => m.remove());
-
-          const menu = document.createElement('div');
-          menu.className = 'version-dl-menu';
-
-          // .dmg link
-          if (r.dmgUrl) {
-            const dmgItem = document.createElement('div');
-            dmgItem.className = 'version-dl-item';
-            dmgItem.innerHTML = `<span class="version-dl-icon">💿</span><div><div class="version-dl-name">.dmg Installer</div><div class="version-dl-hint">macOS installer (Apple Silicon)</div></div>`;
-            dmgItem.addEventListener('click', () => { window.electronAPI.openExternal(r.dmgUrl); menu.remove(); });
-            menu.appendChild(dmgItem);
-          }
-
-          // .zip link
-          if (r.zipUrl) {
-            const zipItem = document.createElement('div');
-            zipItem.className = 'version-dl-item';
-            zipItem.innerHTML = `<span class="version-dl-icon">📦</span><div><div class="version-dl-name">.zip Archive</div><div class="version-dl-hint">Portable zip archive</div></div>`;
-            zipItem.addEventListener('click', () => { window.electronAPI.openExternal(r.zipUrl); menu.remove(); });
-            menu.appendChild(zipItem);
-          }
-
-          // GitHub release page fallback
-          if (r.htmlUrl) {
-            const ghItem = document.createElement('div');
-            ghItem.className = 'version-dl-item';
-            ghItem.innerHTML = `<span class="version-dl-icon">🔗</span><div><div class="version-dl-name">GitHub Release</div><div class="version-dl-hint">View all assets on GitHub</div></div>`;
-            ghItem.addEventListener('click', () => { window.electronAPI.openExternal(r.htmlUrl); menu.remove(); });
-            menu.appendChild(ghItem);
-          }
-
-          // No assets fallback
-          if (!r.dmgUrl && !r.zipUrl && !r.htmlUrl) {
-            menu.innerHTML = '<div style="padding:8px 12px;color:var(--text-dim);font-size:10px">No downloads available</div>';
+      if (installBtn) {
+        installBtn.addEventListener('click', () => {
+          const url = r.dmgUrl || r.htmlUrl || '';
+          if (url) {
+            window.electronAPI.openExternal(url);
           }
-
-          dlWrap.appendChild(menu);
-
-          // Close on outside click
-          setTimeout(() => {
-            const close = (ev) => { if (!menu.contains(ev.target) && ev.target !== installBtn) { menu.remove(); document.removeEventListener('click', close); } };
-            document.addEventListener('click', close);
-          }, 0);
         });
       }
 
@@ -707,7 +662,8 @@ function _loadVersionHistory() {
   });
 }
 
-// ─── Update Banner ───────────────────────────────────────────────────────────
+
+// ─── Update Banner & Changelog (shared, used by IPC handlers) ──────────────
 // Reusable — called from IPC handler AND from initSettingsPanel
 function _applyUpdateBanner() {
   const info = state._updateAvailable;
@@ -830,3 +786,6 @@ async function _showChangelog(version) {
     if (body) body.innerHTML = '<div style="color:var(--red);padding:20px;text-align:center">Could not fetch release notes</div>';
   }
 }
+
+
+

package/panels/sources.js

@@ -1,6 +1,10 @@
 // ─── Sources Panel ─────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+// SOURCES PANEL (placeholder — use JS Debugger button for breakpoints)
+// ─────────────────────────────────────────────────────────────────────────────
 function initSourcesPanel() {
   const panel = $('panel-sources');
+  if (!panel) return;
   panel.innerHTML = `
     <div class="panel-toolbar">
       <span class="panel-label">Sources</span>
@@ -280,3 +284,6 @@ async function loadSourceFile(filepath) {
 function updateSourcesPanel(targets) {
   // No-op: file list is populated by fetchSourceFileList from Metro source map
 }
+
+// ─────────────────────────────────────────────────────────────────────────────
+// PERFORMANCE PANEL — FPS, render timing, JS thread

package/panels/storage.js

@@ -1,8 +1,10 @@
+// ─── AsyncStorage Panel ────────────────────────────────────────────────────
 // ─────────────────────────────────────────────────────────────────────────────
-// ASYNC STORAGE PANEL — extracted from app.js
+// ASYNC STORAGE PANEL
 // ─────────────────────────────────────────────────────────────────────────────
 function initStoragePanel() {
   const panel = $('panel-storage');
+  if (!panel) return;
   panel.innerHTML = `
     <div class="panel-toolbar">
       <span class="panel-label">AsyncStorage</span>
@@ -183,3 +185,7 @@ function formatSize(bytes) {
   if (bytes < 1024) return `${bytes}b`;
   return `${(bytes/1024).toFixed(1)}kb`;
 }
+
+// ─────────────────────────────────────────────────────────────────────────────
+// REACT TREE PANEL
+// ─────────────────────────────────────────────────────────────────────────────