reactoradar 1.6.4 → 1.6.6

package/src/renderer/panels/performance.js

@@ -1,144 +0,0 @@
-'use strict';
-
-const state = window.RNDebug.state;
-const $ = window.RNDebug.$;
-
-// ─────────────────────────────────────────────────────────────────────────────
-// PERFORMANCE PANEL — FPS, render timing, JS thread
-// ─────────────────────────────────────────────────────────────────────────────
-const perfState = { fps: [], jsThread: [], uiThread: [], recording: false, data: [] };
-
-function initPerformancePanel() {
-  const panel = $('panel-performance');
-  panel.innerHTML = `
-    <div class="panel-toolbar">
-      <span class="panel-label">Performance</span>
-      <div class="ml-auto" style="display:flex;gap:6px">
-        <button class="tb-btn" id="btnPerfRecord">Record</button>
-        <button class="tb-btn" id="btnPerfClear">Clear</button>
-      </div>
-    </div>
-    <div class="perf-layout">
-      <div class="perf-meters">
-        <div class="perf-meter">
-          <div class="perf-meter-label">FPS</div>
-          <div class="perf-meter-value" id="perfFPS">—</div>
-          <canvas class="perf-canvas" id="perfFPSCanvas" width="200" height="60"></canvas>
-        </div>
-        <div class="perf-meter">
-          <div class="perf-meter-label">JS Thread</div>
-          <div class="perf-meter-value" id="perfJS">—</div>
-          <canvas class="perf-canvas" id="perfJSCanvas" width="200" height="60"></canvas>
-        </div>
-        <div class="perf-meter">
-          <div class="perf-meter-label">UI Thread</div>
-          <div class="perf-meter-value" id="perfUI">—</div>
-          <canvas class="perf-canvas" id="perfUICanvas" width="200" height="60"></canvas>
-        </div>
-      </div>
-      <div class="scroll-area perf-timeline" id="perfTimeline">
-        <div class="empty-state" id="perfEmpty">
-          <div class="icon" style="font-size:28px;opacity:.2">📊</div>
-          <div class="label">No performance data</div>
-          <div class="hint">Click "Record" to start capturing performance metrics</div>
-          <div class="hint">The SDK sends FPS + thread usage automatically when connected</div>
-        </div>
-      </div>
-    </div>`;
-
-  $('btnPerfRecord').addEventListener('click', () => {
-    perfState.recording = !perfState.recording;
-    $('btnPerfRecord').textContent = perfState.recording ? 'Stop' : 'Record';
-    $('btnPerfRecord').classList.toggle('primary', perfState.recording);
-    if (perfState.recording) {
-      // Tell SDK to start sending perf data
-      window.electronAPI?.setNetworkCapture(true); // reuse channel
-    }
-  });
-
-  $('btnPerfClear').addEventListener('click', () => {
-    perfState.fps = [];
-    perfState.jsThread = [];
-    perfState.uiThread = [];
-    perfState.data = [];
-    $('perfFPS').textContent = '—';
-    $('perfJS').textContent = '—';
-    $('perfUI').textContent = '—';
-    clearPerfCanvas('perfFPSCanvas');
-    clearPerfCanvas('perfJSCanvas');
-    clearPerfCanvas('perfUICanvas');
-  });
-}
-
-function clearPerfCanvas(id) {
-  const canvas = $(id);
-  if (!canvas) return;
-  const ctx = canvas.getContext('2d');
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-}
-
-function drawPerfGraph(canvasId, data, maxVal, color) {
-  const canvas = $(canvasId);
-  if (!canvas || !data.length) return;
-  const ctx = canvas.getContext('2d');
-  const w = canvas.width, h = canvas.height;
-  ctx.clearRect(0, 0, w, h);
-
-  // Grid lines
-  ctx.strokeStyle = 'rgba(255,255,255,0.05)';
-  ctx.lineWidth = 1;
-  for (let y = 0; y < h; y += h/4) {
-    ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
-  }
-
-  // Data line
-  ctx.strokeStyle = color;
-  ctx.lineWidth = 1.5;
-  ctx.beginPath();
-  const step = w / Math.max(data.length - 1, 1);
-  data.forEach((v, i) => {
-    const x = i * step;
-    const y = h - (v / maxVal) * h;
-    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
-  });
-  ctx.stroke();
-
-  // Fill under
-  ctx.lineTo(w, h);
-  ctx.lineTo(0, h);
-  ctx.closePath();
-  ctx.fillStyle = color.replace('1)', '0.1)');
-  ctx.fill();
-}
-
-// Handle performance events from SDK (always updates meters, graphs only when recording)
-function handlePerfEvent(event) {
-  if (event.fps != null) {
-    perfState.fps.push(event.fps);
-    if (perfState.fps.length > 100) perfState.fps.shift();
-    const fpsEl = $('perfFPS');
-    if (fpsEl) fpsEl.textContent = event.fps + ' fps';
-    drawPerfGraph('perfFPSCanvas', perfState.fps, 60, 'rgba(61,214,140,1)');
-  }
-  if (event.jsThread != null) {
-    perfState.jsThread.push(event.jsThread);
-    if (perfState.jsThread.length > 100) perfState.jsThread.shift();
-    const jsEl = $('perfJS');
-    if (jsEl) jsEl.textContent = event.jsThread.toFixed(1) + 'ms';
-    drawPerfGraph('perfJSCanvas', perfState.jsThread, 32, 'rgba(79,172,255,1)');
-  }
-  if (event.uiThread != null) {
-    perfState.uiThread.push(event.uiThread);
-    if (perfState.uiThread.length > 100) perfState.uiThread.shift();
-    const uiEl = $('perfUI');
-    if (uiEl) uiEl.textContent = event.uiThread.toFixed(1) + 'ms';
-    drawPerfGraph('perfUICanvas', perfState.uiThread, 32, 'rgba(155,127,255,1)');
-  }
-}
-
-// ─── Export via window.RNDebug ────────────────────────────────────────────────
-window.RNDebug.perfState = perfState;
-window.RNDebug.initPerformancePanel = initPerformancePanel;
-window.RNDebug.clearPerfCanvas = clearPerfCanvas;
-window.RNDebug.drawPerfGraph = drawPerfGraph;
-window.RNDebug.handlePerfEvent = handlePerfEvent;

package/src/renderer/panels/react.js

@@ -1,31 +0,0 @@
-'use strict';
-
-const state = window.RNDebug.state;
-const $ = window.RNDebug.$;
-
-// ─────────────────────────────────────────────────────────────────────────────
-// REACT TREE PANEL
-// ─────────────────────────────────────────────────────────────────────────────
-function initReactPanel() {
-  const panel = $('panel-react');
-  panel.innerHTML = `
-    <div class="panel-toolbar">
-      <span class="panel-label">React Tree</span>
-    </div>
-    <div class="react-panel-inner">
-      <div class="react-connect-hint" id="reactHint">
-        <div class="icon" style="font-size:40px;opacity:.2">⚛️</div>
-        <div class="label">React DevTools</div>
-        <div class="hint">Launches as a separate window connected to your app</div>
-        <div class="hint">React Native auto-connects on port <code>8097</code> in dev mode</div>
-        <button class="btn-launch" id="btnReactDT">Open React DevTools ↗</button>
-      </div>
-    </div>`;
-
-  $('btnReactDT').addEventListener('click', () => {
-    window.electronAPI?.openReactDevTools();
-  });
-}
-
-// ─── Export via window.RNDebug ────────────────────────────────────────────────
-window.RNDebug.initReactPanel = initReactPanel;

package/src/renderer/panels/redux.js

@@ -1,159 +0,0 @@
-'use strict';
-
-const state = window.RNDebug.state;
-const $ = window.RNDebug.$;
-const esc = window.RNDebug.esc;
-const ts = window.RNDebug.ts;
-const renderJSON = window.RNDebug.renderJSON;
-
-// ─────────────────────────────────────────────────────────────────────────────
-// REDUX PANEL
-// ─────────────────────────────────────────────────────────────────────────────
-function initReduxPanel() {
-  const panel = $('panel-redux');
-  panel.innerHTML = `
-    <div class="panel-toolbar">
-      <span class="panel-label">Redux</span>
-      <span class="badge" id="rBadge">0</span>
-      <div class="tab-row ml-auto">
-        <button class="tab" onclick="reduxJumpTo(-1)">⏮ Reset</button>
-      </div>
-    </div>
-    <div class="redux-layout">
-      <div class="redux-actions">
-        <div class="panel-toolbar" style="height:32px">
-          <span style="font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px">Actions</span>
-        </div>
-        <div class="scroll-area redux-actions-list" id="reduxActionList">
-          <div class="empty-state" id="reduxEmpty">
-            <div class="icon">🔲</div>
-            <div class="label">No actions dispatched</div>
-            <div class="hint">Connect Redux store to RNDebugPlugin</div>
-          </div>
-        </div>
-        <div class="time-travel-bar">
-          <button class="tt-btn" onclick="reduxJumpTo(state.redux.selected-1)">◀ Prev</button>
-          <button class="tt-btn" onclick="reduxJumpTo(state.redux.selected+1)">Next ▶</button>
-          <span class="tt-label" id="ttLabel">— / —</span>
-        </div>
-      </div>
-      <div class="redux-state-view">
-        <div class="redux-state-tabs">
-          <button class="tab active" onclick="setReduxTab('state',this)">State</button>
-          <button class="tab" onclick="setReduxTab('diff',this)">Diff</button>
-          <button class="tab" onclick="setReduxTab('action',this)">Action</button>
-        </div>
-        <div class="redux-state-body" id="reduxStateBody">
-          <span style="color:var(--text-dim)">Select an action to inspect state</span>
-        </div>
-      </div>
-    </div>`;
-}
-
-window.setReduxTab = (tab, btn) => {
-  state.redux.stateTab = tab;
-  document.querySelectorAll('#panel-redux .redux-state-tabs .tab').forEach(b=>b.classList.remove('active'));
-  btn.classList.add('active');
-  renderReduxState();
-};
-window.reduxJumpTo = idx => {
-  const { actions } = state.redux;
-  if (!actions.length) return;
-  idx = Math.max(0, Math.min(actions.length - 1, idx));
-  state.redux.selected = idx;
-  renderReduxActions();
-  renderReduxState();
-};
-
-function handleReduxEvent(event) {
-  if (event.type !== 'redux') return;
-  const { action, nextState } = event;
-  const idx = state.redux.actions.length;
-  state.redux.actions.push({ type: action?.type || '?', payload: action, ts: event.ts, index: idx });
-  state.redux.states.push(nextState);
-  state.redux.selected = idx;
-  $('rBadge').textContent = state.redux.actions.length;
-  renderRedux();
-}
-
-function renderRedux() {
-  renderReduxActions();
-  renderReduxState();
-}
-
-function renderReduxActions() {
-  const list = $('reduxActionList');
-  const empty = $('reduxEmpty');
-  if (!list) return;
-
-  const { actions, selected } = state.redux;
-  empty.style.display = actions.length ? 'none' : 'flex';
-  list.querySelectorAll('.action-row').forEach(e => e.remove());
-
-  const frag = document.createDocumentFragment();
-  actions.forEach((a, i) => {
-    const div = document.createElement('div');
-    div.className = 'action-row entry' + (i === selected ? ' selected' : '');
-    div.innerHTML = `
-      <span class="action-index">#${i}</span>
-      <span class="action-type">${esc(a.type)}</span>
-      <span class="action-time-badge">${ts(a.ts)}</span>`;
-    div.onclick = () => { state.redux.selected = i; renderReduxActions(); renderReduxState(); };
-    frag.appendChild(div);
-  });
-  list.appendChild(frag);
-
-  // scroll selected into view
-  const rows = list.querySelectorAll('.action-row');
-  rows[selected]?.scrollIntoView({ block: 'nearest' });
-
-  const ttLabel = $('ttLabel');
-  if (ttLabel) ttLabel.textContent = `${selected + 1} / ${actions.length}`;
-}
-
-function renderReduxState() {
-  const body = $('reduxStateBody');
-  if (!body) return;
-
-  const { selected, states, actions, stateTab } = state.redux;
-  if (selected < 0 || !states.length) {
-    body.innerHTML = '<span style="color:var(--text-dim)">Select an action to inspect state</span>';
-    return;
-  }
-
-  if (stateTab === 'state') {
-    body.innerHTML = renderJSON(states[selected]);
-  } else if (stateTab === 'action') {
-    // Show previous, current, next actions
-    let html = '';
-    if (selected > 0) {
-      html += `<div class="redux-action-ctx"><span class="redux-ctx-label prev">Previous</span><span class="redux-ctx-type">${esc(actions[selected-1]?.type)}</span></div>`;
-      html += `<div class="redux-action-detail prev">${renderJSON(actions[selected-1]?.payload)}</div>`;
-    }
-    html += `<div class="redux-action-ctx"><span class="redux-ctx-label current">Current</span><span class="redux-ctx-type">${esc(actions[selected]?.type)}</span></div>`;
-    html += `<div class="redux-action-detail current">${renderJSON(actions[selected]?.payload)}</div>`;
-    if (selected < actions.length - 1) {
-      html += `<div class="redux-action-ctx"><span class="redux-ctx-label next">Next</span><span class="redux-ctx-type">${esc(actions[selected+1]?.type)}</span></div>`;
-      html += `<div class="redux-action-detail next">${renderJSON(actions[selected+1]?.payload)}</div>`;
-    }
-    body.innerHTML = html;
-  } else if (stateTab === 'diff') {
-    if (selected === 0) { body.innerHTML = '<span style="color:var(--text-dim)">No previous state to diff</span>'; return; }
-    const prev = JSON.stringify(states[selected-1], null, 2).split('\n');
-    const curr = JSON.stringify(states[selected], null, 2).split('\n');
-    const diffLines = curr.map((line, i) => {
-      if (prev[i] !== line) return `<span style="color:var(--green);background:rgba(61,214,140,.06);display:block">${esc(line)}</span>`;
-      return `<span style="color:var(--text-dim)">${esc(line)}</span>`;
-    });
-    body.innerHTML = diffLines.join('');
-  }
-}
-
-// ─── Export via window.RNDebug ────────────────────────────────────────────────
-window.RNDebug.initReduxPanel = initReduxPanel;
-window.RNDebug.setReduxTab = window.setReduxTab;
-window.RNDebug.reduxJumpTo = window.reduxJumpTo;
-window.RNDebug.handleReduxEvent = handleReduxEvent;
-window.RNDebug.renderRedux = renderRedux;
-window.RNDebug.renderReduxActions = renderReduxActions;
-window.RNDebug.renderReduxState = renderReduxState;

package/src/renderer/panels/settings.js

@@ -1,93 +0,0 @@
-'use strict';
-
-const state = window.RNDebug.state;
-const $ = window.RNDebug.$;
-
-// ─────────────────────────────────────────────────────────────────────────────
-// SETTINGS PANEL
-// ─────────────────────────────────────────────────────────────────────────────
-function getStoredTheme() {
-  try { return localStorage.getItem('rn-debug-theme') || 'dark'; } catch { return 'dark'; }
-}
-function setStoredTheme(t) {
-  try { localStorage.setItem('rn-debug-theme', t); } catch {}
-}
-
-function applyTheme(theme) {
-  document.documentElement.setAttribute('data-theme', theme);
-  // Tell main process so it can update nativeTheme + window backgroundColor
-  window.electronAPI?.setTheme(theme);
-}
-
-function initSettingsPanel() {
-  const panel = $('panel-settings');
-  const current = getStoredTheme();
-  panel.innerHTML = `
-    <div class="panel-toolbar">
-      <span class="panel-label">Settings</span>
-    </div>
-    <div class="scroll-area">
-      <div class="settings-content">
-        <div class="settings-section">
-          <div class="settings-section-title">Appearance</div>
-          <div class="settings-row">
-            <div>
-              <div class="settings-label">Theme</div>
-              <div class="settings-hint">Switch between dark and light mode</div>
-            </div>
-            <div class="theme-switcher" id="themeSwitcher">
-              <button class="theme-option${current==='dark'  ?' active':''}" data-theme="dark">Dark</button>
-              <button class="theme-option${current==='light' ?' active':''}" data-theme="light">Light</button>
-            </div>
-          </div>
-        </div>
-        <div class="settings-section">
-          <div class="settings-section-title">Connection</div>
-          <div class="settings-row">
-            <div>
-              <div class="settings-label">Bridge Ports</div>
-              <div class="settings-hint">Redux :9090 &middot; Storage :9091 &middot; Network :9092 &middot; React DT :8097</div>
-            </div>
-          </div>
-          <div class="settings-row">
-            <div>
-              <div class="settings-label">Metro Bundler</div>
-              <div class="settings-hint">CDP target discovery on :8081</div>
-            </div>
-          </div>
-        </div>
-        <div class="settings-section">
-          <div class="settings-section-title">Keyboard Shortcuts</div>
-          <div class="settings-row">
-            <div class="settings-label">Clear All</div>
-            <div class="settings-hint" style="font-size:11px;color:var(--text-mid)">&#8984;K</div>
-          </div>
-          <div class="settings-row">
-            <div class="settings-label">Open JS Debugger</div>
-            <div class="settings-hint" style="font-size:11px;color:var(--text-mid)">&#8984;D</div>
-          </div>
-          <div class="settings-row">
-            <div class="settings-label">Open React DevTools</div>
-            <div class="settings-hint" style="font-size:11px;color:var(--text-mid)">&#8984;R</div>
-          </div>
-        </div>
-      </div>
-    </div>`;
-
-  // Theme switcher clicks
-  $('themeSwitcher').addEventListener('click', (e) => {
-    const btn = e.target.closest('.theme-option');
-    if (!btn) return;
-    const theme = btn.dataset.theme;
-    document.querySelectorAll('#themeSwitcher .theme-option').forEach(b => b.classList.remove('active'));
-    btn.classList.add('active');
-    setStoredTheme(theme);
-    applyTheme(theme);
-  });
-}
-
-// ─── Export via window.RNDebug ────────────────────────────────────────────────
-window.RNDebug.getStoredTheme = getStoredTheme;
-window.RNDebug.setStoredTheme = setStoredTheme;
-window.RNDebug.applyTheme = applyTheme;
-window.RNDebug.initSettingsPanel = initSettingsPanel;

package/src/renderer/panels/sources.js

@@ -1,189 +0,0 @@
-'use strict';
-
-const state = window.RNDebug.state;
-const $ = window.RNDebug.$;
-const esc = window.RNDebug.esc;
-const syntaxHighlight = window.RNDebug.syntaxHighlight;
-
-// ─────────────────────────────────────────────────────────────────────────────
-// SOURCES PANEL — CDP-based file browser + breakpoints
-// ─────────────────────────────────────────────────────────────────────────────
-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 breakpoints in a separate DevTools CDP window (for breakpoints/stepping)
-  $('btnOpenSourcesExt').addEventListener('click', () => {
-    window.electronAPI?.openCDPTarget(null);
-  });
-
-  // Search filter for file list
-  $('sourcesSearch').addEventListener('input', (e) => {
-    const term = e.target.value.toLowerCase().trim();
-    document.querySelectorAll('#sourcesFileList .source-file-row').forEach(row => {
-      const name = row.dataset.file || '';
-      row.style.display = (!term || name.toLowerCase().includes(term)) ? '' : 'none';
-    });
-  });
-
-  // Fetch the source map / bundle modules list from Metro
-  fetchSourceFileList();
-}
-
-function fetchSourceFileList() {
-  // Metro serves source maps at http://localhost:8081/index.map
-  // We fetch the bundle source to extract module file paths
-  fetch('http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false')
-    .then(r => r.text())
-    .then(text => {
-      // Extract file paths from __d(function(...), id, deps, "path") patterns
-      const fileSet = new Set();
-      const re = /__d\(function[^)]*\)[\s\S]*?,\s*\d+\s*,\s*\[[\d,\s]*\]\s*,\s*"([^"]+)"/g;
-      let m;
-      while ((m = re.exec(text)) !== null) {
-        fileSet.add(m[1]);
-      }
-      // Fallback: try to get paths from source map
-      if (fileSet.size === 0) {
-        // Try source map approach
-        fetch('http://localhost:8081/index.map?platform=ios&dev=true')
-          .then(r => r.json())
-          .then(map => {
-            if (map.sources) {
-              map.sources.forEach(s => fileSet.add(s));
-              renderSourceFileList(Array.from(fileSet));
-            }
-          })
-          .catch(() => {});
-        return;
-      }
-      renderSourceFileList(Array.from(fileSet));
-    })
-    .catch(() => {
-      // Metro not running or bundle not ready yet — retry after 5s
-      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('.source-file-row').forEach(e => e.remove());
-
-  // Sort: project files first, then node_modules
-  const sorted = files.sort((a, b) => {
-    const aIsNM = a.includes('node_modules');
-    const bIsNM = b.includes('node_modules');
-    if (aIsNM !== bIsNM) return aIsNM ? 1 : -1;
-    return a.localeCompare(b);
-  });
-
-  const frag = document.createDocumentFragment();
-  sorted.forEach(filepath => {
-    const row = document.createElement('div');
-    row.className = 'source-file-row';
-    row.dataset.file = filepath;
-    const filename = filepath.split('/').pop();
-    const dir = filepath.replace(filename, '');
-    const isNM = filepath.includes('node_modules');
-    row.innerHTML = `<span style="color:${isNM ? 'var(--text-dim)' : 'var(--accent)'};font-size:11px">${esc(filename)}</span>
-      <span style="color:var(--text-dim);font-size:9px;display:block;margin-top:1px;opacity:0.7">${esc(dir)}</span>`;
-    row.addEventListener('click', () => loadSourceFile(filepath));
-    frag.appendChild(row);
-  });
-  list.appendChild(frag);
-}
-
-function loadSourceFile(filepath) {
-  const codeEl = $('sourcesCode');
-  const nameEl = $('sourcesFileName');
-  const lineEl = $('sourcesLineInfo');
-  if (!codeEl) return;
-  if (nameEl) nameEl.textContent = filepath;
-  codeEl.innerHTML = '<span style="color:var(--text-dim)">Loading...</span>';
-
-  // Fetch the individual module source from Metro
-  // Metro serves individual files at their path relative to project root
-  const url = `http://localhost:8081/${filepath}?platform=ios&dev=true`;
-  fetch(url)
-    .then(r => r.text())
-    .then(source => {
-      // Render with line numbers
-      const lines = source.split('\n');
-      if (lineEl) lineEl.textContent = `${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);
-    })
-    .catch(() => {
-      codeEl.innerHTML = `<span style="color:var(--text-dim);padding:20px;display:block">Could not load source for: ${esc(filepath)}</span>`;
-    });
-}
-
-// Called from cdp-targets IPC handler (no longer opens external window)
-
-// Called from cdp-targets IPC handler (shared, no duplicate registration)
-function updateSourcesPanel(targets) {
-  const list = $('sourcesFileList');
-  const empty = $('sourcesEmpty');
-  if (!list) return;
-  if (!targets?.length) { if (empty) empty.style.display = 'flex'; return; }
-  if (empty) empty.style.display = 'none';
-  list.querySelectorAll('.source-file-row').forEach(e => e.remove());
-  targets.forEach(t => {
-    const row = document.createElement('div');
-    row.className = 'source-file-row';
-    row.innerHTML = `<span style="color:var(--accent);font-size:11px">${esc(t.title || 'Unknown')}</span>
-      <span style="color:var(--text-dim);font-size:9px;display:block;margin-top:2px">${esc(t.description || '')}</span>`;
-    row.addEventListener('click', () => {
-      window.electronAPI?.openCDPTarget(t.webSocketDebuggerUrl);
-    });
-    list.appendChild(row);
-  });
-}
-
-// ─── Export via window.RNDebug ────────────────────────────────────────────────
-window.RNDebug.initSourcesPanel = initSourcesPanel;
-window.RNDebug.fetchSourceFileList = fetchSourceFileList;
-window.RNDebug.renderSourceFileList = renderSourceFileList;
-window.RNDebug.loadSourceFile = loadSourceFile;
-window.RNDebug.updateSourcesPanel = updateSourcesPanel;