reactoradar 1.6.6 → 1.6.7

package/panels/ga4.js

@@ -0,0 +1,328 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// GA4 EVENT INSPECTOR — extracted from app.js
+// ─────────────────────────────────────────────────────────────────────────────
+const ga4State = { events: [], selected: -1, searchFilter: '', sortDir: 'desc' };
+
+function initGA4Panel() {
+  const panel = $('panel-ga4');
+  panel.innerHTML = `
+    <div class="panel-toolbar">
+      <span class="panel-label">GA4 Events</span>
+      <span class="badge" id="ga4Badge">0</span>
+      <input id="ga4Search" class="net-search-input" style="margin-left:12px" placeholder="Filter events..." />
+      <div class="ml-auto" style="display:flex;align-items:center;gap:6px">
+        <label class="toggle-label" for="ga4ColorToggle" style="font-size:10px;gap:4px">
+          <span style="color:var(--text-dim)">Colors</span>
+          <input type="checkbox" id="ga4ColorToggle" class="toggle-input" ${getGA4ColorsEnabled() ? 'checked' : ''} />
+          <span class="toggle-slider"></span>
+        </label>
+        <button class="panel-clear-btn" id="ga4Clear" title="Clear GA4 events">Clear</button>
+      </div>
+    </div>
+    <div class="ga4-layout">
+      <div class="ga4-list-pane">
+        <div class="ga4-list-header">
+          <span class="ga4-hcell ga4-sort-btn" id="ga4SortBtn" style="width:90px;cursor:pointer" title="Click to toggle sort order">Time <span id="ga4SortIcon">\u25BC</span></span>
+          <span class="ga4-hcell" style="flex:1">Event</span>
+        </div>
+        <div class="scroll-area" id="ga4List">
+          <div class="empty-state" id="ga4Empty">
+            <div class="icon" style="font-size:28px;opacity:.2">📊</div>
+            <div class="label">No GA4 events yet</div>
+            <div class="hint">Events from @react-native-firebase/analytics will appear here</div>
+          </div>
+        </div>
+      </div>
+      <div class="ga4-resize-handle" id="ga4ResizeHandle"></div>
+      <div class="ga4-detail-pane" id="ga4DetailPane">
+        <div class="ga4-detail-header">EVENT DETAIL</div>
+        <div class="scroll-area ga4-detail-content" id="ga4Detail">
+          <span style="color:var(--text-dim);padding:16px;display:block">Click an event to inspect</span>
+        </div>
+      </div>
+    </div>
+    <div class="ga4-summary" id="ga4Summary">
+      <span class="ga4-summary-label">Total: 0</span>
+    </div>`;
+
+  $('ga4Search').addEventListener('input', (e) => {
+    ga4State.searchFilter = e.target.value.toLowerCase().trim();
+    renderGA4List();
+    renderGA4Summary(); // update active chip highlight
+  });
+
+  $('ga4ColorToggle')?.addEventListener('change', (e) => {
+    setGA4ColorsEnabled(e.target.checked);
+    renderGA4List();
+    renderGA4Summary();
+  });
+
+  $('ga4Clear').addEventListener('click', () => {
+    ga4State.events = [];
+    ga4State.selected = -1;
+    ga4State.searchFilter = '';
+    const search = $('ga4Search');
+    if (search) search.value = '';
+    $('ga4Badge').textContent = '0';
+    renderGA4List();
+    renderGA4Summary();
+    // Clear detail pane
+    const detail = $('ga4Detail');
+    if (detail) detail.innerHTML = '<div class="ga4-detail-empty" style="color:var(--text-dim);padding:20px;text-align:center;font-size:11px">Select an event to view details</div>';
+  });
+
+  $('ga4SortBtn').addEventListener('click', () => {
+    ga4State.sortDir = ga4State.sortDir === 'desc' ? 'asc' : 'desc';
+    $('ga4SortIcon').textContent = ga4State.sortDir === 'desc' ? '\u25BC' : '\u25B2';
+    renderGA4List();
+  });
+
+  // Resizable divider between list and detail
+  const resizeHandle = $('ga4ResizeHandle');
+  const detailPane = $('ga4DetailPane');
+  resizeHandle.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startWidth = detailPane.offsetWidth;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    function onMove(ev) {
+      const delta = startX - ev.clientX;
+      detailPane.style.width = Math.max(200, Math.min(window.innerWidth * 0.8, startWidth + delta)) + 'px';
+    }
+    function onUp() {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    }
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+}
+
+function handleGA4Event(event) {
+  if (!isTabEnabled('ga4')) return;
+  ga4State.events.push({
+    name: event.name || '?',
+    params: event.params || {},
+    tag: event.tag || 'GA4',
+    source: event.source || '',
+    ts: event.ts || Date.now(),
+    index: ga4State.events.length,
+  });
+  $('ga4Badge').textContent = ga4State.events.length;
+
+  // Append to list (batched via rAF)
+  if (!ga4State._raf) {
+    ga4State._raf = requestAnimationFrame(() => {
+      ga4State._raf = null;
+      renderGA4List();
+      renderGA4Summary();
+    });
+  }
+}
+
+// Assign consistent color to each GA4 event name
+const _ga4EventColors = {};
+const _ga4ColorPalette = [
+  '#4facff',  // blue
+  '#3dd68c',  // green
+  '#ff813f',  // orange
+  '#c678dd',  // purple
+  '#e06c75',  // coral
+  '#56b6c2',  // teal
+  '#d19a66',  // gold
+  '#98c379',  // lime
+  '#e5c07b',  // yellow
+  '#ff5e72',  // red
+  '#61afef',  // light blue
+  '#be5046',  // rust
+];
+let _ga4ColorIdx = 0;
+function _ga4EventColor(name) {
+  if (!getGA4ColorsEnabled()) return ''; // empty = inherit default text color
+  if (!_ga4EventColors[name]) {
+    _ga4EventColors[name] = _ga4ColorPalette[_ga4ColorIdx % _ga4ColorPalette.length];
+    _ga4ColorIdx++;
+  }
+  return _ga4EventColors[name];
+}
+function getGA4ColorsEnabled() {
+  try { return localStorage.getItem('rn-debug-ga4-colors') === 'true'; } catch { return false; }
+}
+function setGA4ColorsEnabled(v) {
+  try { localStorage.setItem('rn-debug-ga4-colors', v ? 'true' : 'false'); } catch {}
+}
+
+function renderGA4List() {
+  const list = $('ga4List');
+  const empty = $('ga4Empty');
+  if (!list) return;
+
+  const { searchFilter, sortDir } = ga4State;
+  let visible = ga4State.events.filter(e =>
+    !searchFilter || e.name.toLowerCase().includes(searchFilter)
+  );
+
+  // Sort: newest first (desc) or oldest first (asc)
+  if (sortDir === 'desc') {
+    visible = [...visible].reverse();
+  }
+
+  empty.style.display = visible.length ? 'none' : 'flex';
+  list.querySelectorAll('.ga4-row').forEach(e => e.remove());
+
+  // Cap at 500 rows
+  const MAX = 500;
+  const toRender = visible.length > MAX ? visible.slice(0, MAX) : visible;
+
+  const frag = document.createDocumentFragment();
+  toRender.forEach(e => {
+    const row = document.createElement('div');
+    row.className = 'ga4-row' + (e.index === ga4State.selected ? ' selected' : '');
+
+    const time = new Date(e.ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+    const evtColor = _ga4EventColor(e.name);
+    const colorStyle = evtColor ? `color:${evtColor}` : '';
+    row.innerHTML = `
+      <span class="ga4-cell ga4-time">${time}</span>
+      <span class="ga4-cell ga4-name" style="${colorStyle}">${esc(e.name)}</span>`;
+
+    row.addEventListener('click', () => {
+      ga4State.selected = e.index;
+      list.querySelectorAll('.ga4-row').forEach(r => r.classList.remove('selected'));
+      row.classList.add('selected');
+      renderGA4Detail(e);
+    });
+
+    // Right-click to copy
+    row.addEventListener('contextmenu', (ev) => {
+      ev.preventDefault();
+      showContextMenu(ev, [
+        { label: 'Copy Event Name', action: () => navigator.clipboard.writeText(e.name) },
+        { label: 'Copy as JSON', action: () => navigator.clipboard.writeText(JSON.stringify({ event: e.name, params: e.params }, null, 2)) },
+      ]);
+    });
+
+    frag.appendChild(row);
+  });
+  list.appendChild(frag);
+}
+
+function renderGA4Detail(e) {
+  let detail = $('ga4Detail');
+  if (!detail) return;
+
+  const time = new Date(e.ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+  // Clone-replace to remove stale event listeners
+  const fresh = detail.cloneNode(false);
+  detail.parentNode.replaceChild(fresh, detail);
+  detail = fresh;
+
+  // Header info
+  const header = document.createElement('div');
+  header.className = 'ga4-detail-info';
+  header.innerHTML = `
+    <div class="ga4-detail-row"><span class="ga4-detail-key">Event Name</span><span class="ga4-detail-val" style="${_ga4EventColor(e.name) ? 'color:' + _ga4EventColor(e.name) + ';' : ''}font-weight:600;font-size:1.1em">${esc(e.name)}</span></div>
+    <div class="ga4-detail-row"><span class="ga4-detail-key">Timestamp</span><span class="ga4-detail-val">${time}</span></div>
+`;
+  detail.appendChild(header);
+
+  // Separator
+  const sep = document.createElement('div');
+  sep.className = 'ga4-detail-sep';
+  detail.appendChild(sep);
+
+  // Parameters as key-value list with collapsible objects
+  if (e.params && typeof e.params === 'object') {
+    const keys = Object.keys(e.params).sort();
+    keys.forEach(key => {
+      const val = e.params[key];
+      const row = document.createElement('div');
+      row.className = 'ga4-param-row';
+
+      const keyEl = document.createElement('span');
+      keyEl.className = 'ga4-param-key';
+      keyEl.textContent = key;
+      row.appendChild(keyEl);
+
+      if (val && typeof val === 'object') {
+        // Collapsible object tree
+        const treeWrap = document.createElement('span');
+        treeWrap.className = 'ga4-param-val';
+        treeWrap.appendChild(createTreeNode(null, val, true));
+        row.appendChild(treeWrap);
+      } else {
+        const valEl = document.createElement('span');
+        valEl.className = 'ga4-param-val';
+        valEl.textContent = val === null ? 'null' : val === undefined ? 'undefined' : JSON.stringify(val);
+        if (typeof val === 'string') valEl.style.color = 'var(--green)';
+        else if (typeof val === 'number') valEl.style.color = 'var(--orange)';
+        else if (typeof val === 'boolean') valEl.style.color = 'var(--accent2)';
+        row.appendChild(valEl);
+      }
+
+      detail.appendChild(row);
+    });
+  }
+
+  // Right-click on detail
+  detail.addEventListener('contextmenu', (ev) => {
+    ev.preventDefault();
+    showContextMenu(ev, [
+      { label: 'Copy All Parameters', action: () => navigator.clipboard.writeText(JSON.stringify(e.params, null, 2)) },
+      { label: 'Copy Event JSON', action: () => navigator.clipboard.writeText(JSON.stringify({ event: e.name, params: e.params, timestamp: e.ts }, null, 2)) },
+    ]);
+  });
+}
+
+function renderGA4Summary() {
+  const summary = $('ga4Summary');
+  if (!summary) return;
+
+  const counts = {};
+  ga4State.events.forEach(e => {
+    counts[e.name] = (counts[e.name] || 0) + 1;
+  });
+
+  const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]);
+
+  summary.innerHTML = '';
+
+  const totalLabel = document.createElement('span');
+  totalLabel.className = 'ga4-summary-label';
+  totalLabel.textContent = `Total: ${ga4State.events.length}`;
+  summary.appendChild(totalLabel);
+
+  sorted.forEach(([name, count]) => {
+    const chip = document.createElement('span');
+    const isActive = ga4State.searchFilter === name.toLowerCase();
+    const chipColor = _ga4EventColor(name);
+    chip.className = 'ga4-summary-chip' + (isActive ? ' active' : '');
+    if (chipColor) {
+      chip.style.borderColor = chipColor;
+      if (isActive) chip.style.background = chipColor + '22';
+      chip.innerHTML = `<b style="color:${chipColor}">${esc(name)}</b><span class="chip-count">${count}</span>`;
+    } else {
+      chip.innerHTML = `<b>${esc(name)}</b><span class="chip-count">${count}</span>`;
+    }
+    chip.addEventListener('click', () => {
+      const search = $('ga4Search');
+      if (isActive) {
+        // Clear filter
+        ga4State.searchFilter = '';
+        if (search) search.value = '';
+      } else {
+        // Set filter to this event name
+        ga4State.searchFilter = name.toLowerCase();
+        if (search) search.value = name;
+      }
+      renderGA4List();
+      renderGA4Summary();
+    });
+    summary.appendChild(chip);
+  });
+}

package/panels/native.js

@@ -0,0 +1,256 @@
+// ─── Native Logs Panel ─────────────────────────────────────────────────────
+const _nativeState = { logs: [], connected: false, platform: null, levelFilter: 'all', searchFilter: '' };
+const MAX_NATIVE_LOGS = 2000;
+
+function initNativeLogsPanel() {
+  const panel = $('panel-native');
+  if (!panel) return;
+  panel.innerHTML = `
+    <div class="panel-toolbar">
+      <span class="panel-label">Native Logs</span>
+      <span class="badge" id="nativeBadge">0</span>
+      <div class="ml-auto" style="display:flex;align-items:center;gap:6px">
+        <span class="native-status" id="nativeStatus">Detecting...</span>
+        <button class="panel-clear-btn" id="nativeClear">Clear</button>
+      </div>
+    </div>
+    <div class="native-connect-panel" id="nativeConnectPanel">
+      <div class="native-hero">
+        <div style="font-size:36px;opacity:0.15;margin-bottom:12px">📱</div>
+        <div style="font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px">Native Logs</div>
+        <div style="font-size:11px;color:var(--text-dim);max-width:420px;line-height:1.7;margin-bottom:20px">
+          Stream native crash logs, errors, and warnings directly in ReactoRadar.<br/>
+          No need to open Android Studio or Xcode.
+        </div>
+        <div class="native-platform-cards">
+          <div class="native-card" id="nativeCardAndroid">
+            <div class="native-card-icon">🤖</div>
+            <div class="native-card-title">Android</div>
+            <div class="native-card-hint">Requires: <code>adb</code> in PATH (Android SDK)</div>
+            <div class="native-card-prereq">
+              <div class="native-prereq-step"><b>Prerequisites:</b></div>
+              <div class="native-prereq-step">1. Enable <b>Developer Options</b> on device<br/><span style="color:var(--text-dim);font-size:9px">Settings → About Phone → Tap Build Number 7 times</span></div>
+              <div class="native-prereq-step">2. Enable <b>USB Debugging</b><br/><span style="color:var(--text-dim);font-size:9px">Settings → Developer Options → USB Debugging → ON</span></div>
+              <div class="native-prereq-step">3. Connect device via USB and accept the prompt</div>
+              <div class="native-prereq-step">4. Verify: run <code>adb devices</code> in terminal</div>
+            </div>
+            <div id="nativeAndroidStatus" class="native-detect-status"></div>
+            <button class="native-connect-btn" id="nativeConnectAndroid">Connect Android</button>
+          </div>
+          <div class="native-card" id="nativeCardIOS">
+            <div class="native-card-icon">🍎</div>
+            <div class="native-card-title">iOS</div>
+            <div class="native-card-hint">Simulator or USB device</div>
+            <div class="native-card-prereq">
+              <div class="native-prereq-step"><b>Simulator:</b></div>
+              <div class="native-prereq-step">Requires Xcode Command Line Tools<br/><code>xcode-select --install</code></div>
+              <div class="native-prereq-step" style="margin-top:6px"><b>Real Device (USB):</b></div>
+              <div class="native-prereq-step">1. Install: <code>brew install libimobiledevice</code></div>
+              <div class="native-prereq-step">2. Connect device, tap <b>Trust</b> on the prompt</div>
+              <div class="native-prereq-step">3. Verify: <code>idevice_id -l</code> shows device UDID</div>
+            </div>
+            <div id="nativeIOSStatus" class="native-detect-status"></div>
+            <div style="display:flex;gap:6px;margin-top:8px">
+              <button class="native-connect-btn" id="nativeConnectIOSSim">Simulator</button>
+              <button class="native-connect-btn" id="nativeConnectIOSDevice">USB Device</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="native-logs-area" id="nativeLogsArea" style="display:none">
+      <div class="native-filter-bar">
+        <input id="nativeSearch" class="net-search-input" placeholder="Filter logs..." />
+        <div class="native-level-filters" id="nativeLevelFilters">
+          <button class="net-status-btn active" data-level="all">All</button>
+          <button class="net-status-btn" data-level="fatal">Fatal</button>
+          <button class="net-status-btn" data-level="error">Error</button>
+          <button class="net-status-btn" data-level="warn">Warn</button>
+          <button class="net-status-btn" data-level="info">Info</button>
+          <button class="net-status-btn" data-level="debug">Debug</button>
+        </div>
+        <div style="margin-left:auto;display:flex;gap:6px;align-items:center">
+          <button class="panel-clear-btn" id="nativeLogsClear">Clear</button>
+          <button class="panel-clear-btn" id="nativeDisconnect" style="color:var(--red)">Disconnect</button>
+        </div>
+      </div>
+      <div class="native-log-list" id="nativeLogList"></div>
+    </div>`;
+
+  // Connect buttons — auto-enable tab when user clicks connect
+  function _enableNativeTab() {
+    const vis = getTabVisibility();
+    if (!vis['native']) {
+      vis['native'] = true;
+      setTabVisibility(vis);
+      applyTabVisibility();
+    }
+  }
+  $('nativeConnectAndroid')?.addEventListener('click', () => { _enableNativeTab(); window.electronAPI?.startNativeLogs('android'); });
+  $('nativeConnectIOSSim')?.addEventListener('click', () => { _enableNativeTab(); window.electronAPI?.startNativeLogs('ios-sim'); });
+  $('nativeConnectIOSDevice')?.addEventListener('click', () => { _enableNativeTab(); window.electronAPI?.startNativeLogs('ios-device'); });
+  $('nativeDisconnect')?.addEventListener('click', () => window.electronAPI?.stopNativeLogs());
+
+  // Clear buttons (toolbar + logs area)
+  $('nativeClear')?.addEventListener('click', _clearNativeLogs);
+  $('nativeLogsClear')?.addEventListener('click', _clearNativeLogs);
+
+  // Level filter
+  $('nativeLevelFilters')?.addEventListener('click', (e) => {
+    const btn = e.target.closest('.net-status-btn');
+    if (!btn) return;
+    $('nativeLevelFilters').querySelectorAll('.net-status-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    _nativeState.levelFilter = btn.dataset.level;
+    _renderNativeLogs();
+  });
+
+  // Search
+  $('nativeSearch')?.addEventListener('input', (e) => {
+    _nativeState.searchFilter = e.target.value.toLowerCase().trim();
+    _renderNativeLogs();
+  });
+
+  // IPC: receive native logs
+  window.electronAPI?.on('native-log', (log) => {
+    if (!isTabEnabled('native')) return;
+    _nativeState.logs.push(log);
+    if (_nativeState.logs.length > MAX_NATIVE_LOGS) {
+      _nativeState.logs = _nativeState.logs.slice(-MAX_NATIVE_LOGS);
+    }
+    $('nativeBadge').textContent = _nativeState.logs.length;
+    _appendNativeLog(log);
+  });
+
+  // IPC: connection status
+  window.electronAPI?.on('native-status', (status) => {
+    _nativeState.connected = status.connected;
+    _nativeState.platform = status.platform || null;
+    const statusEl = $('nativeStatus');
+    const connectPanel = $('nativeConnectPanel');
+    const logsArea = $('nativeLogsArea');
+
+    if (status.connected) {
+      if (statusEl) { statusEl.textContent = `Connected (${status.platform})`; statusEl.style.color = 'var(--green)'; }
+      if (connectPanel) connectPanel.style.display = 'none';
+      if (logsArea) logsArea.style.display = 'flex';
+    } else {
+      if (statusEl) {
+        statusEl.textContent = status.error || 'Not connected';
+        statusEl.style.color = status.error ? 'var(--red)' : 'var(--text-dim)';
+      }
+      if (connectPanel) connectPanel.style.display = 'flex';
+      if (logsArea) logsArea.style.display = 'none';
+    }
+  });
+
+  // Auto-detect platform and auto-connect
+  _autoDetectNative();
+}
+
+function _clearNativeLogs() {
+  _nativeState.logs = [];
+  if ($('nativeBadge')) $('nativeBadge').textContent = '0';
+  const list = $('nativeLogList');
+  if (list) list.innerHTML = '';
+}
+
+async function _autoDetectNative() {
+  const statusEl = $('nativeStatus');
+  try {
+    const result = await window.electronAPI?.detectNativePlatform();
+    if (!result) { if (statusEl) { statusEl.textContent = 'Detection unavailable'; statusEl.style.color = 'var(--text-dim)'; } return; }
+
+    // Update card statuses
+    const androidStatus = $('nativeAndroidStatus');
+    const iosStatus = $('nativeIOSStatus');
+    if (androidStatus) {
+      if (result.android) { androidStatus.innerHTML = '<span style="color:var(--green)">Device detected</span>'; }
+      else if (result.adbPath) { androidStatus.innerHTML = '<span style="color:var(--orange)">adb found — no device connected</span>'; }
+      else { androidStatus.innerHTML = '<span style="color:var(--text-dim)">adb not found</span>'; }
+    }
+    if (iosStatus) {
+      const parts = [];
+      if (result.iosSim) parts.push('<span style="color:var(--green)">Simulator running</span>');
+      if (result.iosDevice) parts.push('<span style="color:var(--green)">USB device detected</span>');
+      if (!parts.length) parts.push('<span style="color:var(--text-dim)">No device detected</span>');
+      iosStatus.innerHTML = parts.join(' · ');
+    }
+
+    // Show detection result — user clicks Connect to start
+    if (result.android || result.iosSim || result.iosDevice) {
+      const detected = [result.android ? 'Android' : '', result.iosSim ? 'iOS Sim' : '', result.iosDevice ? 'iOS Device' : ''].filter(Boolean).join(', ');
+      if (statusEl) { statusEl.textContent = `Detected: ${detected} — click Connect to start`; statusEl.style.color = 'var(--accent)'; }
+    } else {
+      if (statusEl) { statusEl.textContent = 'No device detected'; statusEl.style.color = 'var(--text-dim)'; }
+    }
+  } catch {
+    if (statusEl) { statusEl.textContent = 'Detection failed'; statusEl.style.color = 'var(--text-dim)'; }
+  }
+}
+
+function _appendNativeLog(log) {
+  const list = $('nativeLogList');
+  if (!list) return;
+
+  // Check filters
+  if (_nativeState.levelFilter !== 'all' && log.level !== _nativeState.levelFilter) return;
+  if (_nativeState.searchFilter && !log.message?.toLowerCase().includes(_nativeState.searchFilter) && !log.tag?.toLowerCase().includes(_nativeState.searchFilter)) return;
+
+  const isExpandable = log.level === 'error' || log.level === 'fatal' || (log.message || '').length > 200;
+  const row = document.createElement('div');
+  row.className = `native-log-row native-${log.level || 'info'}`;
+
+  const time = log.time || new Date(log.ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+  // Header line (always visible)
+  const header = document.createElement('div');
+  header.className = 'native-log-header';
+  header.innerHTML = `<span class="native-log-time">${esc(time)}</span>`
+    + `<span class="native-log-level">${esc((log.level || 'info').toUpperCase())}</span>`
+    + (log.tag ? `<span class="native-log-tag">${esc(log.tag)}</span>` : '')
+    + `<span class="native-log-preview">${esc((log.message || '').split('\\n')[0].slice(0, 200))}</span>`;
+  row.appendChild(header);
+
+  // Expandable full message (for errors and long messages)
+  if (isExpandable) {
+    const fullMsg = document.createElement('div');
+    fullMsg.className = 'native-log-full';
+    fullMsg.style.display = 'none';
+    fullMsg.textContent = log.message || '';
+    row.appendChild(fullMsg);
+
+    header.style.cursor = 'pointer';
+    header.addEventListener('click', () => {
+      const open = fullMsg.style.display !== 'none';
+      fullMsg.style.display = open ? 'none' : 'block';
+      row.classList.toggle('expanded', !open);
+    });
+  }
+
+  // Right-click to copy
+  row.addEventListener('contextmenu', (e) => {
+    e.preventDefault();
+    showContextMenu(e, [
+      { label: 'Copy Message', action: () => navigator.clipboard.writeText(log.message || '') },
+      { label: 'Copy Raw Line', action: () => navigator.clipboard.writeText(log.raw || log.message || '') },
+      ...(log.tag ? [{ label: `Copy Tag (${log.tag})`, action: () => navigator.clipboard.writeText(log.tag) }] : []),
+    ]);
+  });
+
+  list.appendChild(row);
+
+  // Cap DOM rows
+  while (list.children.length > 1000) list.firstChild.remove();
+
+  // Auto-scroll if near bottom
+  const atBottom = (list.scrollHeight - list.scrollTop - list.clientHeight) < 150;
+  if (atBottom) list.scrollTop = list.scrollHeight;
+}
+
+function _renderNativeLogs() {
+  const list = $('nativeLogList');
+  if (!list) return;
+  list.innerHTML = '';
+  _nativeState.logs.forEach(log => _appendNativeLog(log));
+}