reactoradar 1.6.6 → 1.6.7

package/panels/sources.js

@@ -0,0 +1,282 @@
+// ─── Sources Panel ─────────────────────────────────────────────────────────
+function initSourcesPanel() {
+  const panel = $('panel-sources');
+  panel.innerHTML = `
+    <div class="panel-toolbar">
+      <span class="panel-label">Sources</span>
+      <div class="ml-auto" style="display:flex;gap:6px">
+        <button class="tb-btn" id="btnOpenSourcesExt" title="Open in separate DevTools window">Breakpoints ↗</button>
+      </div>
+    </div>
+    <div class="sources-layout">
+      <div class="sources-sidebar" id="sourcesSidebar">
+        <div class="panel-toolbar" style="height:32px">
+          <input id="sourcesSearch" class="net-search-input" style="width:100%" placeholder="Search files..." />
+        </div>
+        <div class="scroll-area sources-file-list" id="sourcesFileList">
+          <div class="empty-state" id="sourcesEmpty">
+            <div class="icon" style="font-size:28px;opacity:.2">&lt;/&gt;</div>
+            <div class="label">Waiting for Metro...</div>
+            <div class="hint">Source files will load when Metro is running</div>
+          </div>
+        </div>
+      </div>
+      <div class="sources-editor" id="sourcesEditor">
+        <div class="panel-toolbar" style="height:32px">
+          <span id="sourcesFileName" style="font-size:10px;color:var(--accent)"></span>
+          <span id="sourcesLineInfo" style="font-size:10px;color:var(--text-dim);margin-left:auto"></span>
+        </div>
+        <div class="scroll-area sources-code" id="sourcesCode">
+          <span style="color:var(--text-dim);padding:20px;display:block">Select a file to view its source</span>
+        </div>
+      </div>
+    </div>`;
+
+  // Open JS Debugger for breakpoints
+  $('btnOpenSourcesExt').addEventListener('click', () => {
+    window.electronAPI?.openCDPTarget(null);
+  });
+
+  // Search filter for file tree
+  $('sourcesSearch').addEventListener('input', (e) => {
+    const term = e.target.value.toLowerCase().trim();
+    document.querySelectorAll('#sourcesFileList .src-tree-file').forEach(row => {
+      const filepath = row.dataset.file || '';
+      const match = !term || filepath.toLowerCase().includes(term);
+      row.style.display = match ? '' : 'none';
+    });
+    // Show/hide folder nodes based on whether they have visible children
+    document.querySelectorAll('#sourcesFileList .src-tree-folder').forEach(folder => {
+      const visibleFiles = folder.querySelectorAll('.src-tree-file:not([style*="display: none"])');
+      folder.style.display = (!term || visibleFiles.length > 0) ? '' : 'none';
+      // Auto-expand folders when searching
+      if (term && visibleFiles.length > 0) {
+        const children = folder.querySelector('.src-tree-children');
+        const arrow = folder.querySelector('.src-tree-arrow');
+        if (children) children.style.display = 'block';
+        if (arrow) { arrow.textContent = '\u25BC'; arrow.classList.add('expanded'); }
+      }
+    });
+  });
+
+  // Fetch the source map / bundle modules list from Metro
+  fetchSourceFileList();
+}
+
+async function fetchSourceFileList() {
+  if (!window.electronAPI?.getSourceFileList) {
+    console.log('[Sources] electronAPI.getSourceFileList not available, retrying...');
+    setTimeout(fetchSourceFileList, 5000);
+    return;
+  }
+  try {
+    console.log('[Sources] Fetching file list from Metro...');
+    const result = await window.electronAPI.getSourceFileList();
+    console.log('[Sources] Got result:', result?.files?.length, 'files, root:', result?.root?.slice(-30));
+    if (result?.files && result.files.length > 0) {
+      state._sourcesRoot = result.root;
+      // Limit to 500 files max to avoid DOM overload
+      const files = result.files.length > 500 ? result.files.slice(0, 500) : result.files;
+      renderSourceFileList(files);
+      console.log('[Sources] Rendered', files.length, 'files');
+    } else {
+      console.log('[Sources] No files, retrying in 5s...');
+      setTimeout(fetchSourceFileList, 5000);
+    }
+  } catch (e) {
+    console.log('[Sources] Error:', e?.message || e);
+    setTimeout(fetchSourceFileList, 5000);
+  }
+}
+
+function renderSourceFileList(files) {
+  const list = $('sourcesFileList');
+  const empty = $('sourcesEmpty');
+  if (!list) return;
+  if (!files.length) return;
+  if (empty) empty.style.display = 'none';
+  list.querySelectorAll('.src-tree-node').forEach(e => e.remove());
+
+  // Build folder tree from file paths
+  const tree = {};
+  files.forEach(filepath => {
+    const parts = filepath.split('/').filter(Boolean);
+    let node = tree;
+    parts.forEach((part, i) => {
+      if (i === parts.length - 1) {
+        // File leaf
+        node[part] = filepath; // string = file
+      } else {
+        // Folder
+        if (!node[part] || typeof node[part] === 'string') node[part] = {};
+        node = node[part];
+      }
+    });
+  });
+
+  // Render tree recursively
+  const frag = document.createDocumentFragment();
+
+  // Project folders first, node_modules last
+  const topKeys = Object.keys(tree).sort((a, b) => {
+    if (a === 'node_modules') return 1;
+    if (b === 'node_modules') return -1;
+    return a.localeCompare(b);
+  });
+
+  topKeys.forEach(key => {
+    frag.appendChild(buildSourceTreeNode(key, tree[key], 0));
+  });
+  list.appendChild(frag);
+}
+
+function buildSourceTreeNode(name, value, depth) {
+  if (typeof value === 'string') {
+    // File leaf
+    const row = document.createElement('div');
+    row.className = 'src-tree-node src-tree-file';
+    row.dataset.file = value;
+    row.style.paddingLeft = (12 + depth * 16) + 'px';
+    const isNM = value.includes('node_modules');
+    const ext = name.split('.').pop();
+    const iconColor = ext === 'tsx' || ext === 'ts' ? '#3178c6'
+      : ext === 'jsx' || ext === 'js' ? '#f0db4f'
+      : ext === 'json' ? '#a0a0a0'
+      : ext === 'css' ? '#264de4'
+      : 'var(--text-dim)';
+    row.innerHTML = `<span class="src-file-icon" style="color:${iconColor}">●</span><span class="src-file-name" style="color:${isNM ? 'var(--text-dim)' : 'var(--text-bright)'}">${esc(name)}</span>`;
+    row.addEventListener('click', () => {
+      const fileList = $('sourcesFileList');
+      fileList.querySelectorAll('.src-tree-file').forEach(el => el.classList.remove('selected'));
+      row.classList.add('selected');
+      loadSourceFile(value);
+    });
+    // Search filter support
+    const searchInput = $('sourcesSearch');
+    if (searchInput && searchInput.value) {
+      const term = searchInput.value.toLowerCase();
+      if (!name.toLowerCase().includes(term) && !value.toLowerCase().includes(term)) {
+        row.style.display = 'none';
+      }
+    }
+    return row;
+  }
+
+  // Folder node
+  const container = document.createElement('div');
+  container.className = 'src-tree-node src-tree-folder';
+
+  const header = document.createElement('div');
+  header.className = 'src-tree-folder-header';
+  header.style.paddingLeft = (8 + depth * 16) + 'px';
+
+  const arrow = document.createElement('span');
+  arrow.className = 'src-tree-arrow';
+  arrow.textContent = '\u25B6';
+
+  const folderName = document.createElement('span');
+  folderName.className = 'src-folder-name';
+  const isNM = name === 'node_modules';
+  folderName.style.color = isNM ? 'var(--text-dim)' : 'var(--text)';
+  folderName.textContent = name;
+
+  header.appendChild(arrow);
+  header.appendChild(folderName);
+  container.appendChild(header);
+
+  const children = document.createElement('div');
+  children.className = 'src-tree-children';
+  // Start all folders collapsed
+  children.style.display = 'none';
+
+  // Sort: folders first, then files
+  const entries = Object.entries(value).sort((a, b) => {
+    const aIsFolder = typeof a[1] === 'object';
+    const bIsFolder = typeof b[1] === 'object';
+    if (aIsFolder !== bIsFolder) return aIsFolder ? -1 : 1;
+    return a[0].localeCompare(b[0]);
+  });
+
+  let populated = false;
+  function populate() {
+    if (populated) return;
+    populated = true;
+    entries.forEach(([childName, childValue]) => {
+      children.appendChild(buildSourceTreeNode(childName, childValue, depth + 1));
+    });
+  }
+
+  // Folders start collapsed — populate lazily on first expand
+  header.addEventListener('click', () => {
+    const isOpen = children.style.display !== 'none';
+    if (!isOpen) {
+      populate();
+      children.style.display = 'block';
+      arrow.textContent = '\u25BC';
+      arrow.classList.add('expanded');
+    } else {
+      children.style.display = 'none';
+      arrow.textContent = '\u25B6';
+      arrow.classList.remove('expanded');
+    }
+  });
+
+  container.appendChild(children);
+  return container;
+}
+
+async function loadSourceFile(filepath) {
+  const codeEl = $('sourcesCode');
+  const nameEl = $('sourcesFileName');
+  const lineEl = $('sourcesLineInfo');
+  if (!codeEl) return;
+  if (nameEl) nameEl.textContent = filepath.split('/').pop();
+  if (lineEl) lineEl.textContent = filepath;
+  codeEl.innerHTML = '<span style="color:var(--text-dim)">Loading...</span>';
+
+  let source = null;
+  const root = state._sourcesRoot || '';
+  const fullPath = root ? `${root}/${filepath}` : filepath;
+
+  // Strategy 1: Read from disk via IPC (most reliable)
+  if (window.electronAPI?.readSourceFile) {
+    source = await window.electronAPI.readSourceFile(fullPath);
+  }
+
+  // Strategy 2: Fetch from Metro
+  if (!source) {
+    try {
+      const port = getStoredMetroPort();
+      const resp = await fetch(`http://localhost:${port}/${filepath}?platform=ios&dev=true`);
+      if (resp.ok) source = await resp.text();
+    } catch {}
+  }
+
+  if (!source) {
+    codeEl.innerHTML = `<span style="color:var(--text-dim);padding:20px;display:block">Could not load: ${esc(filepath)}</span>`;
+    return;
+  }
+
+  // Render with line numbers
+  const lines = source.split('\n');
+  if (lineEl) lineEl.textContent = `${filepath}  (${lines.length} lines)`;
+  codeEl.innerHTML = '';
+  const pre = document.createElement('pre');
+  pre.className = 'source-pre';
+  lines.forEach((line, i) => {
+    const lineDiv = document.createElement('div');
+    lineDiv.className = 'source-line';
+    lineDiv.innerHTML = `<span class="source-line-num">${i + 1}</span><span class="source-line-code">${syntaxHighlight(esc(line))}</span>`;
+    pre.appendChild(lineDiv);
+  });
+  codeEl.appendChild(pre);
+}
+
+// Called from cdp-targets IPC handler (no longer opens external window)
+
+// Called from cdp-targets IPC handler (shared, no duplicate registration)
+// Sources panel uses Metro source map for file tree — CDP targets are only
+// used for the "Breakpoints" button, not for the file list.
+function updateSourcesPanel(targets) {
+  // No-op: file list is populated by fetchSourceFileList from Metro source map
+}

package/panels/storage.js

@@ -0,0 +1,185 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// ASYNC STORAGE PANEL — extracted from app.js
+// ─────────────────────────────────────────────────────────────────────────────
+function initStoragePanel() {
+  const panel = $('panel-storage');
+  panel.innerHTML = `
+    <div class="panel-toolbar">
+      <span class="panel-label">AsyncStorage</span>
+      <span class="badge" id="sBadge">0</span>
+      <div class="ml-auto">
+        <input id="storageSearch" class="net-search-input" placeholder="Filter keys..." />
+      </div>
+    </div>
+    <div class="storage-layout" id="storageLayout">
+      <div class="storage-keys" id="storageKeysPane">
+        <div class="panel-toolbar" style="height:32px">
+          <span style="font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px">Keys</span>
+        </div>
+        <div class="scroll-area storage-keys-list" id="storageKeyList">
+          <div class="empty-state" id="storageEmpty">
+            <div class="icon">💾</div>
+            <div class="label">No storage data</div>
+            <div class="hint">AsyncStorage data will appear here</div>
+          </div>
+        </div>
+      </div>
+      <div class="storage-resize-handle" id="storageResizeHandle"></div>
+      <div class="storage-value-view">
+        <div class="storage-value-toolbar">
+          <span style="font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px">Value</span>
+          <span id="storageSelectedKey" style="font-size:11px;color:var(--accent);margin-left:8px"></span>
+        </div>
+        <div class="storage-value-body" id="storageValueBody">
+          <span style="color:var(--text-dim)">Select a key to view its value</span>
+        </div>
+      </div>
+     </div>`;
+
+  $('storageSearch').addEventListener('input', (e) => {
+    state.storage.searchFilter = e.target.value.toLowerCase().trim();
+    renderStorage();
+  });
+
+  // Drag resize handle for key list width
+  const handle = $('storageResizeHandle');
+  const layout = $('storageLayout');
+  const keysPane = $('storageKeysPane');
+  if (handle && layout && keysPane) {
+    let dragging = false;
+    let startX = 0;
+    let startW = 0;
+    handle.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      dragging = true;
+      startX = e.clientX;
+      startW = keysPane.offsetWidth;
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    });
+    document.addEventListener('mousemove', (e) => {
+      if (!dragging) return;
+      const newW = Math.max(120, Math.min(600, startW + (e.clientX - startX)));
+      layout.style.gridTemplateColumns = `${newW}px 4px 1fr`;
+    });
+    document.addEventListener('mouseup', () => {
+      if (!dragging) return;
+      dragging = false;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    });
+  }
+}
+
+let _storageRAF = null;
+
+function handleStorageEvent(event) {
+  if (event.type !== 'storage') return;
+  if (!isTabEnabled('storage')) return;
+  const { key, value, action } = event;
+  if (action === 'set' || action === 'snapshot') {
+    if (action === 'snapshot' && typeof key === 'object') {
+      // Skip if data hasn't changed
+      const newKeys = Object.keys(key).slice().sort().join(',');
+      const oldKeys = state.storage.keys.slice().sort().join(',');
+      if (newKeys === oldKeys) {
+        // Check if values changed
+        let same = true;
+        for (const [k, v] of Object.entries(key)) {
+          if (state.storage.entries[k] !== v) { same = false; break; }
+        }
+        if (same) return; // No changes, skip re-render
+      }
+      Object.entries(key).forEach(([k, v]) => {
+        state.storage.entries[k] = v;
+        if (!state.storage.keys.includes(k)) state.storage.keys.push(k);
+      });
+    } else {
+      if (state.storage.entries[key] === value) return; // No change
+      state.storage.entries[key] = value;
+      if (!state.storage.keys.includes(key)) state.storage.keys.push(key);
+    }
+  } else if (action === 'remove') {
+    if (!(key in state.storage.entries)) return; // Already removed
+    delete state.storage.entries[key];
+    state.storage.keys = state.storage.keys.filter(k => k !== key);
+    if (state.storage.selected === key) state.storage.selected = null;
+  }
+  $('sBadge').textContent = state.storage.keys.length;
+  // Debounce render via rAF
+  if (!_storageRAF) {
+    _storageRAF = requestAnimationFrame(() => {
+      _storageRAF = null;
+      renderStorage();
+    });
+  }
+}
+
+function renderStorage() {
+  const list = $('storageKeyList');
+  const empty = $('storageEmpty');
+  if (!list) return;
+
+  const { searchFilter } = state.storage;
+  const visible = state.storage.keys.filter(k =>
+    !searchFilter || k.toLowerCase().includes(searchFilter)
+  );
+
+  empty.style.display = visible.length ? 'none' : 'flex';
+  list.querySelectorAll('.storage-key-row').forEach(e => e.remove());
+
+  const frag = document.createDocumentFragment();
+  visible.forEach(k => {
+    const div = document.createElement('div');
+    const val = state.storage.entries[k] || '';
+    div.className = 'storage-key-row entry' + (k === state.storage.selected ? ' selected' : '');
+    div.innerHTML = `
+      <span class="key-name">${highlight(esc(k), searchFilter)}</span>
+      <span class="key-size">${formatSize(val.length)}</span>`;
+    div.onclick = () => { state.storage.selected = k; renderStorage(); renderStorageValue(); };
+    frag.appendChild(div);
+  });
+  list.appendChild(frag);
+  renderStorageValue();
+}
+
+function renderStorageValue() {
+  let body = $('storageValueBody');
+  const keyLabel = $('storageSelectedKey');
+  if (!body) return;
+  const { selected, entries } = state.storage;
+  if (!selected) {
+    body.innerHTML = '<span style="color:var(--text-dim)">Select a key</span>';
+    if (keyLabel) keyLabel.textContent = '';
+    return;
+  }
+  if (keyLabel) keyLabel.textContent = selected;
+  // Clone-replace to remove stale event listeners
+  const fresh = body.cloneNode(false);
+  body.parentNode.replaceChild(fresh, body);
+  body = fresh;
+
+  let val = entries[selected];
+  // Try to parse JSON strings into objects for tree display
+  if (typeof val === 'string') {
+    try { val = JSON.parse(val); } catch {}
+  }
+
+  if (val && typeof val === 'object') {
+    body.appendChild(createTreeNode(null, val, false));
+    body.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      showContextMenu(e, [
+        { label: 'Copy Value', action: () => navigator.clipboard.writeText(JSON.stringify(val, null, 2)) },
+        { label: 'Copy Key', action: () => navigator.clipboard.writeText(selected) },
+      ]);
+    });
+  } else {
+    body.innerHTML = renderJSON(val);
+  }
+}
+
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes}b`;
+  return `${(bytes/1024).toFixed(1)}kb`;
+}