cyborg-hunter 0.3.0

package/src/cli/renderers/html-index.js

@@ -0,0 +1,329 @@
+// src/cli/renderers/html-index.js
+// Generates the self-contained HTML report page.
+// References linked images in images/ (not base64-embedded).
+//
+// Sections:
+//   - Dashboard header with counts
+//   - Sortable triage table (vanilla JS, no dependencies)
+//   - Per-participant detail sections with image references
+//   - Inline CSS for clean layout
+//   - Works offline when opened from the output folder
+
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+import { VERSION } from '../../shared/constants.js';
+
+export async function renderHtmlIndex(summaries, triage, participants, config, visualsRendered) {
+  const flaggedHard = triage.filter(t => t.hardTriggered).length;
+  const flaggedSoft = triage.filter(t => !t.hardTriggered && t.softFlagged).length;
+  const clean = triage.length - flaggedHard - flaggedSoft;
+
+  const triageRows = triage.map((t, i) => {
+    const hardClass = t.hardTriggered ? 'hard' : t.softFlagged ? 'soft' : 'clean';
+    const s = t.summary || {};
+    const extCount = (s.aiExtensionsFound || []).length;
+    // Soft score from the configured scoring engine. Prefer session-authoritative
+    // (set by the monitor at collection time using the active scoring config);
+    // fall back to the per-trial accumulated sum when the session didn't record one.
+    const softScore = s.authoritativeSoftScore ?? s.totalSoftScore ?? 0;
+    return `<tr class="${hardClass}" onclick="scrollToParticipant('${esc(t.participantId)}')">
+      <td>${i + 1}</td>
+      <td>${esc(t.participantId)}</td>
+      <td>${t.score}</td>
+      <td>${softScore}</td>
+      <td>${t.hardTriggered ? '<strong>YES</strong>' : 'no'}</td>
+      <td class="session-col">${extCount}</td>
+      <td class="session-col">${s.sidebarEventCount ?? 0}</td>
+      <td class="session-col">${s.keyboardShortcutCount ?? 0}</td>
+      <td class="session-col">${(s.layoutShiftCount ?? 0) + (s.zoomChangeCount ?? 0)}</td>
+      <td>${esc(t.reason)}</td>
+    </tr>`;
+  }).join('\n');
+
+  const participantSections = triage.map(t => {
+    const s = t.summary;
+    const pid = sanitize(t.participantId);
+    const pidEsc = esc(t.participantId);
+
+    let images = '';
+    if (visualsRendered) {
+      // P4: Images are wrapped in .zoomable so the lightbox JS can hoist them
+      // to a full-viewport overlay on click. The bare PNG is still reachable
+      // via its href as a graceful fallback if JS is disabled.
+      images = `
+        <div class="images">
+          <a href="images/typing_profile_${pid}.png" class="zoomable" title="Click to enlarge"><img src="images/typing_profile_${pid}.png" alt="Typing profile" onerror="this.parentElement.style.display='none'"></a>
+          <a href="images/tab_timeline_${pid}.png" class="zoomable" title="Click to enlarge"><img src="images/tab_timeline_${pid}.png" alt="Tab timeline" onerror="this.parentElement.style.display='none'"></a>
+          <a href="images/trajectories_${pid}.png" class="zoomable" title="Click to enlarge"><img src="images/trajectories_${pid}.png" alt="Mouse trajectories" onerror="this.parentElement.style.display='none'"></a>
+        </div>`;
+    } else {
+      images = '<p class="note">Visual renderers not available (install canvas package).</p>';
+    }
+
+    // Session-level signal block — surfaces integrity-monitor session metadata
+    // (extensions, sidebars with timestamps, keyboard shortcuts). Only rendered
+    // when the session had at least one such event.
+    const aiExtensions = s.aiExtensionsFound || [];
+    const sidebarEvents = (participants.find(p => p.participantId === t.participantId)?.session?.sidebarEvents) || [];
+    const keyboardShortcuts = (participants.find(p => p.participantId === t.participantId)?.session?.keyboardShortcuts) || [];
+    const hasSessionSignals = aiExtensions.length > 0 || sidebarEvents.length > 0 || keyboardShortcuts.length > 0 ||
+      (s.layoutShiftCount || 0) > 0 || (s.zoomChangeCount || 0) > 0 || (s.devToolsEventCount || 0) > 0;
+
+    let sessionBlock = '';
+    if (hasSessionSignals) {
+      const extLines = aiExtensions.map(e => {
+        const name = typeof e === 'string' ? e : (e.name || 'unknown');
+        const detail = typeof e === 'object' && e.matchedSelector ? ` <span class="muted">(${esc(e.matchedSelector)})</span>` : '';
+        return `<li>${esc(name)}${detail}</li>`;
+      }).join('');
+      const sidebarLines = sidebarEvents.slice(0, 10).map(ev => {
+        const ts = ev.t || ev.timestamp || '';
+        // Both open and close events now carry a signed `deltaIW` (Task P6).
+        // Open emits positive shrinkage (+312px), close emits negative expansion
+        // (-312px). Render both with the same "gap" line; the sign tells the
+        // story. Duration is appended for close events so triage sees how long
+        // the sidebar was visible.
+        const gap = ev.deltaIW ?? ev.gap ?? ev.gapPx ?? ev.sidebarGapPx ?? '?';
+        const gapStr = typeof gap === 'number' ? (gap > 0 ? `+${gap}` : String(gap)) : String(gap);
+        const durSuffix = (ev.type === 'closed' && ev.duration_ms != null)
+          ? ` <span class="muted">(${(ev.duration_ms / 1000).toFixed(1)}s open)</span>` : '';
+        return `<li><code>${esc(String(ts))}</code> — gap ${esc(gapStr)}px${durSuffix}</li>`;
+      }).join('');
+      const kbLines = keyboardShortcuts.slice(0, 10).map(ev => {
+        const key = ev.combo || ev.key || JSON.stringify(ev);
+        return `<li><code>${esc(String(key))}</code></li>`;
+      }).join('');
+      sessionBlock = `
+      <div class="session-signals">
+        <h4>Session-level signals</h4>
+        <div class="session-grid">
+          ${aiExtensions.length > 0 ? `<div><strong>AI extensions (${aiExtensions.length}):</strong><ul>${extLines}</ul></div>` : ''}
+          ${sidebarEvents.length > 0 ? `<div><strong>Sidebar events (${sidebarEvents.length}${sidebarEvents.length > 10 ? ', first 10' : ''}):</strong><ul>${sidebarLines}</ul></div>` : ''}
+          ${keyboardShortcuts.length > 0 ? `<div><strong>Keyboard shortcuts (${keyboardShortcuts.length}${keyboardShortcuts.length > 10 ? ', first 10' : ''}):</strong><ul>${kbLines}</ul></div>` : ''}
+          ${(s.layoutShiftCount || s.zoomChangeCount || s.devToolsEventCount) ? `<div><strong>Other:</strong><ul>
+            ${s.layoutShiftCount ? `<li>${s.layoutShiftCount} layout shifts</li>` : ''}
+            ${s.zoomChangeCount ? `<li>${s.zoomChangeCount} zoom changes</li>` : ''}
+            ${s.devToolsEventCount ? `<li>${s.devToolsEventCount} devtools events</li>` : ''}
+          </ul></div>` : ''}
+        </div>
+      </div>`;
+    }
+
+    const authScore = s.authoritativeSoftScore != null
+      ? `<span>Soft score (session): <strong>${s.authoritativeSoftScore}</strong></span>`
+      : `<span>Soft score: ${s.totalSoftScore}</span>`;
+
+    return `
+    <section class="participant" id="p-${pid}">
+      <h3>${pidEsc}</h3>
+      <div class="stats">
+        <span>Score: <strong>${t.score}</strong></span>
+        <span>Hard: <strong>${t.hardTriggered ? 'YES' : 'no'}</strong></span>
+        <span>Trials: ${s.trialCount}</span>
+        <span>Paste: ${s.totalPasteEvents}</span>
+        <span>Tab-aways: ${formatTabAwayStat(s)}</span>
+        <span>Fast typing: ${s.trialsWithFastTyping}</span>
+        ${authScore}
+        <span>Edge exits: ${t.edgeExitCount}</span>
+        <span>Extensions: ${aiExtensions.length}</span>
+        <span>Sidebar events: ${s.sidebarEventCount ?? 0}</span>
+        <span>Kb shortcuts: ${s.keyboardShortcutCount ?? 0}</span>
+      </div>
+      <p class="reason">${esc(t.reason)}</p>
+      ${sessionBlock}
+      ${images}
+    </section>`;
+  }).join('\n');
+
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Cyborg Hunter Report</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+           max-width: 1200px; margin: 0 auto; padding: 20px; color: #333; background: #fafafa; }
+    h1 { font-size: 24px; margin-bottom: 8px; }
+    h2 { font-size: 18px; margin: 24px 0 12px; border-bottom: 1px solid #ddd; padding-bottom: 6px; }
+    h3 { font-size: 16px; margin-bottom: 8px; }
+    .dashboard { display: flex; gap: 16px; margin: 16px 0; }
+    .card { background: white; border: 1px solid #ddd; border-radius: 8px;
+            padding: 16px; flex: 1; text-align: center; }
+    .card .number { font-size: 32px; font-weight: bold; }
+    .card.hard .number { color: #d32f2f; }
+    .card.soft .number { color: #f57c00; }
+    .card.clean .number { color: #388e3c; }
+    table { width: 100%; border-collapse: collapse; margin: 12px 0; background: white; }
+    th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #eee; }
+    th { background: #f5f5f5; cursor: pointer; user-select: none; }
+    th:hover { background: #e0e0e0; }
+    tr.hard { background: #ffebee; }
+    tr.soft { background: #fff3e0; }
+    tr.clean { background: #e8f5e9; }
+    tr:hover { background: #e3f2fd; cursor: pointer; }
+    .participant { background: white; border: 1px solid #ddd; border-radius: 8px;
+                   padding: 16px; margin: 12px 0; }
+    .stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
+    .stats span { background: #f5f5f5; padding: 4px 8px; border-radius: 4px; font-size: 13px; }
+    .reason { color: #666; font-size: 13px; margin: 8px 0; }
+    .images img { max-width: 100%; height: auto; margin: 8px 0; border: 1px solid #eee; border-radius: 4px; }
+    .zoomable { display: block; }
+    .zoomable img { cursor: zoom-in; transition: opacity 0.1s; }
+    .zoomable:hover img { opacity: 0.9; }
+    .lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000;
+                        display: none; align-items: center; justify-content: center; cursor: zoom-out; padding: 20px; }
+    .lightbox-overlay.open { display: flex; }
+    .lightbox-overlay img { max-width: 100%; max-height: 100%; box-shadow: 0 4px 24px rgba(0,0,0,0.5); border-radius: 4px; }
+    .lightbox-close { position: fixed; top: 16px; right: 24px; color: white; font-size: 32px; cursor: pointer;
+                      background: rgba(0,0,0,0.4); border-radius: 50%; width: 40px; height: 40px;
+                      display: flex; align-items: center; justify-content: center; line-height: 1; }
+    .note { color: #999; font-style: italic; font-size: 13px; }
+    .meta { color: #999; font-size: 12px; margin-top: 24px; }
+    .session-col { text-align: center; font-variant-numeric: tabular-nums; }
+    th.session-col { background: #eef3ff; }
+    .session-signals { background: #fff8e1; border: 1px solid #f0d080; border-radius: 6px;
+                       padding: 12px; margin: 12px 0; font-size: 13px; }
+    .session-signals h4 { font-size: 14px; margin-bottom: 8px; color: #a06000; }
+    .session-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
+    .session-signals ul { margin-left: 16px; font-size: 12px; }
+    .session-signals code { background: #ffeaaa; padding: 1px 4px; border-radius: 3px; }
+    .muted { color: #888; font-size: 12px; }
+    .back-to-top { position: fixed; bottom: 16px; right: 16px; padding: 8px 12px; background: #333; color: #fff; border-radius: 4px; text-decoration: none; opacity: 0.85; font-size: 13px; z-index: 100; }
+    .back-to-top:hover { opacity: 1; }
+  </style>
+</head>
+<body>
+  <a id="top"></a>
+  <h1>Cyborg Hunter Report</h1>
+  <p class="note">v${VERSION} &mdash; ${triage.length} participants</p>
+
+  <div class="dashboard">
+    <div class="card hard">
+      <div class="number">${flaggedHard}</div>
+      <div>Hard signals</div>
+    </div>
+    <div class="card soft">
+      <div class="number">${flaggedSoft}</div>
+      <div>Soft flagged</div>
+    </div>
+    <div class="card clean">
+      <div class="number">${clean}</div>
+      <div>Clean</div>
+    </div>
+  </div>
+
+  <h2>Triage — Ranked by Suspiciousness</h2>
+  <table id="triage-table">
+    <thead>
+      <tr>
+        <th onclick="sortTable(0, 'num')">Rank</th>
+        <th onclick="sortTable(1, 'str')">Participant</th>
+        <th onclick="sortTable(2, 'num')" title="Composite triage score (soft + hard + session signals)">Score</th>
+        <th onclick="sortTable(3, 'num')" title="Soft score for the chosen scoring config (session-authoritative when present, else per-trial sum)">Soft</th>
+        <th onclick="sortTable(4, 'str')">Hard</th>
+        <th class="session-col" onclick="sortTable(5, 'num')" title="AI extensions found">Ext</th>
+        <th class="session-col" onclick="sortTable(6, 'num')" title="Sidebar events (DOM gaps)">Sidebar</th>
+        <th class="session-col" onclick="sortTable(7, 'num')" title="DevTools-ish keyboard shortcuts">Kb</th>
+        <th class="session-col" onclick="sortTable(8, 'num')" title="Layout shifts + zoom changes">Layout</th>
+        <th onclick="sortTable(9, 'str')">Reason</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${triageRows}
+    </tbody>
+  </table>
+
+  <h2>Participant Details</h2>
+  ${participantSections}
+
+  <p class="meta">Generated by cyborg-hunter v${VERSION}</p>
+
+  <script>
+    // Vanilla JS table sorting — no dependencies
+    function sortTable(col, type) {
+      const table = document.getElementById('triage-table');
+      const tbody = table.querySelector('tbody');
+      const rows = Array.from(tbody.querySelectorAll('tr'));
+      const dir = table.dataset.sortCol == col && table.dataset.sortDir == 'asc' ? 'desc' : 'asc';
+      table.dataset.sortCol = col;
+      table.dataset.sortDir = dir;
+
+      rows.sort((a, b) => {
+        let av = a.cells[col].textContent.trim();
+        let bv = b.cells[col].textContent.trim();
+        if (type === 'num') { av = parseFloat(av) || 0; bv = parseFloat(bv) || 0; }
+        if (av < bv) return dir === 'asc' ? -1 : 1;
+        if (av > bv) return dir === 'asc' ? 1 : -1;
+        return 0;
+      });
+
+      rows.forEach(r => tbody.appendChild(r));
+    }
+
+    function scrollToParticipant(id) {
+      const el = document.getElementById('p-' + id.replace(/[^a-zA-Z0-9_-]/g, '_').substring(0, 40));
+      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  </script>
+  <a href="#top" class="back-to-top">↑ Top</a>
+
+  <div id="lightbox" class="lightbox-overlay" role="dialog" aria-label="Enlarged image">
+    <span class="lightbox-close" aria-label="Close">&times;</span>
+    <img id="lightbox-img" alt="">
+  </div>
+
+  <script>
+    // P4 lightbox — intercept clicks on .zoomable anchors; ESC or click-outside closes.
+    (function() {
+      const overlay = document.getElementById('lightbox');
+      const img = document.getElementById('lightbox-img');
+      document.querySelectorAll('a.zoomable').forEach(a => {
+        a.addEventListener('click', e => {
+          e.preventDefault();
+          img.src = a.getAttribute('href');
+          overlay.classList.add('open');
+        });
+      });
+      overlay.addEventListener('click', () => {
+        overlay.classList.remove('open');
+        img.src = '';
+      });
+      document.addEventListener('keydown', e => {
+        if (e.key === 'Escape' && overlay.classList.contains('open')) {
+          overlay.classList.remove('open');
+          img.src = '';
+        }
+      });
+    })();
+  </script>
+</body>
+</html>`;
+
+  writeFileSync(join(config.outputDir, 'index.html'), html);
+  console.log('  index.html — report page');
+}
+
+function esc(str) {
+  return String(str || '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function sanitize(name) {
+  return String(name || '').replace(/[^a-zA-Z0-9_-]/g, '_').substring(0, 40);
+}
+
+// Renders the tab-away stats cell. When the three-way split is available,
+// show ≥10s / 3-10s / <3s (matches the timeline chart legend).
+function formatTabAwayStat(s) {
+  const total = s.totalTabAways ?? 0;
+  const long = s.tabAwayLongCount;
+  const medium = s.tabAwayMediumCount;
+  const flicker = s.tabAwayFlickerCount;
+  if (long == null || medium == null || flicker == null) return String(total);
+  return `${total} (${long} ≥10s, ${medium} 3–10s, ${flicker} &lt;3s)`;
+}

package/src/cli/renderers/summary-csv.js

@@ -0,0 +1,70 @@
+// src/cli/renderers/summary-csv.js
+// Writes summary.csv — one row per participant with columns for every
+// signal aggregate and the triage score/reason.
+
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+
+// CSV columns in output order. Each entry: [header, accessor function].
+const COLUMNS = [
+  ['participantId', (s, t) => s.participantId],
+  ['trialCount', (s, t) => s.trialCount],
+  ['triageScore', (s, t) => t.score],
+  ['hardTriggered', (s, t) => t.hardTriggered ? 'YES' : 'no'],
+  ['triageReason', (s, t) => t.reason],
+  ['totalPasteEvents', (s, t) => s.totalPasteEvents],
+  ['totalCopyEvents', (s, t) => s.totalCopyEvents],
+  ['totalDropEvents', (s, t) => s.totalDropEvents],
+  ['totalTabAways', (s, t) => s.totalTabAways],
+  ['tabAwayLongCount', (s, t) => s.tabAwayLongCount ?? 0],       // ≥10s
+  ['tabAwayMediumCount', (s, t) => s.tabAwayMediumCount ?? 0],   // 3–10s
+  ['tabAwayFlickerCount', (s, t) => s.tabAwayFlickerCount ?? 0], // <3s
+  ['totalTabAwayDuration_ms', (s, t) => s.totalTabAwayDuration_ms],
+  ['trialsWithTabAway', (s, t) => s.trialsWithTabAway],
+  ['meanTypingSpeed', (s, t) => s.meanTypingSpeed.toFixed(2)],
+  ['trialsWithFastTyping', (s, t) => s.trialsWithFastTyping],
+  ['meanMouseEvents', (s, t) => s.meanMouseEvents.toFixed(1)],
+  ['meanPathEfficiency', (s, t) => s.meanPathEfficiency.toFixed(3)],
+  ['totalIdleGaps', (s, t) => s.totalIdleGaps],
+  ['totalSyntheticInsertions', (s, t) => s.totalSyntheticInsertions],
+  ['totalForeignInputEvents', (s, t) => s.totalForeignInputEvents],
+  ['totalSoftScore', (s, t) => s.totalSoftScore],
+  ['edgeExitCount', (s, t) => t.edgeExitCount],
+  // Session-level signals (Task 4) — drop legacy sidebarDetected/extensionsDetected
+  // columns in favour of richer session-authoritative counts.
+  ['sidebar_event_count', (s, t) => s.sidebarEventCount ?? 0],
+  ['ai_extensions', (s, t) => {
+    const ext = s.aiExtensionsFound || [];
+    return ext.map(e => typeof e === 'string' ? e : (e.name || 'unknown')).join('; ');
+  }],
+  ['keyboard_shortcut_count', (s, t) => s.keyboardShortcutCount || 0],
+  ['layout_shift_count', (s, t) => s.layoutShiftCount || 0],
+  ['zoom_change_count', (s, t) => s.zoomChangeCount || 0],
+  ['dev_tools_event_count', (s, t) => s.devToolsEventCount || 0],
+  ['authoritative_soft_score', (s, t) => s.authoritativeSoftScore ?? ''],
+];
+
+export async function renderSummaryCSV(summaries, triage, config) {
+  // Build a lookup from participantId → triage entry
+  const triageMap = new Map(triage.map(t => [t.participantId, t]));
+
+  const header = COLUMNS.map(c => c[0]).join(',');
+  const rows = summaries.map(s => {
+    const t = triageMap.get(s.participantId) || {};
+    return COLUMNS.map(c => escapeCSV(c[1](s, t))).join(',');
+  });
+
+  const csv = [header, ...rows].join('\n') + '\n';
+  const outPath = join(config.outputDir, 'summary.csv');
+  writeFileSync(outPath, csv);
+  console.log(`  summary.csv — ${summaries.length} participants`);
+}
+
+// Escapes a CSV value: wraps in quotes if it contains commas, quotes, or newlines
+function escapeCSV(val) {
+  const str = String(val ?? '');
+  if (str.includes(',') || str.includes('"') || str.includes('\n')) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}

package/src/cli/renderers/tab-timeline.js

@@ -0,0 +1,149 @@
+// src/cli/renderers/tab-timeline.js
+// Renders tab-away timeline images using node-canvas.
+// Produces one PNG per participant showing when tab-aways occurred
+// relative to the experiment timeline.
+//
+// Layout: horizontal bar chart where X-axis = experiment time,
+// each row = a trial, bars = tab-away events colored by duration.
+// Bins match the analyzer split: flicker (<3s), medium (3-10s), long (≥10s).
+// The 3s boundary is the scoring engine's soft-score cutoff.
+
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+
+const ROW_HEIGHT = 25;
+const LABEL_WIDTH = 120;
+const CHART_WIDTH = 600;
+const TOP_PAD = 50;
+const BOTTOM_PAD = 30;
+const LEFT_PAD = 10;
+
+export async function renderTabTimelines(participants, config) {
+  const { createCanvas } = await import('canvas');
+
+  for (const p of participants) {
+    const trials = p.trials;
+    if (trials.length === 0) continue;
+
+    // Check if there are any tab-away events to render
+    const totalTabAways = trials.reduce((s, t) => s + (t.tabAwayEvents || []).length, 0);
+    if (totalTabAways === 0) continue;
+
+    const canvasH = TOP_PAD + trials.length * ROW_HEIGHT + BOTTOM_PAD;
+    const canvasW = LEFT_PAD + LABEL_WIDTH + CHART_WIDTH + 20;
+    const canvas = createCanvas(canvasW, canvasH);
+    const ctx = canvas.getContext('2d');
+
+    // Background
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, canvasW, canvasH);
+
+    // Title
+    ctx.fillStyle = '#333';
+    ctx.font = 'bold 14px sans-serif';
+    ctx.fillText(`Tab-Away Timeline — ${p.participantId}`, LEFT_PAD, 20);
+    ctx.font = '10px sans-serif';
+    ctx.fillStyle = '#666';
+    ctx.fillText(`${totalTabAways} tab-away events across ${trials.length} trials`, LEFT_PAD, 35);
+
+    // Legend (right-aligned under title)
+    const legend = [
+      { label: 'trial duration', color: '#f0f0f0', border: '#ccc' },
+      { label: '<3s flicker', color: '#bdbdbd', border: '#333' },
+      { label: '3–10s', color: '#ff9800', border: '#333' },
+      { label: '≥10s', color: '#f44336', border: '#333' },
+    ];
+    let lx = canvasW - 10;
+    ctx.font = '9px sans-serif';
+    // Draw legend right-to-left
+    for (let k = legend.length - 1; k >= 0; k--) {
+      const item = legend[k];
+      const textW = ctx.measureText(item.label).width;
+      lx -= textW;
+      ctx.fillStyle = '#333';
+      ctx.fillText(item.label, lx, 22);
+      lx -= 4;
+      ctx.fillStyle = item.color;
+      ctx.fillRect(lx - 10, 15, 10, 8);
+      ctx.strokeStyle = item.border;
+      ctx.lineWidth = 0.5;
+      ctx.strokeRect(lx - 10, 15, 10, 8);
+      lx -= 14;
+    }
+
+    // Find the maximum trial duration for X-axis scaling
+    const maxDuration = Math.max(...trials.map(t =>
+      (t.duration_ms || t.responseTime_ms || 30000)));
+    const xScale = CHART_WIDTH / maxDuration;
+
+    for (let i = 0; i < trials.length; i++) {
+      const trial = trials[i];
+      const y = TOP_PAD + i * ROW_HEIGHT;
+      const trialId = trial.trialId || trial.ruleId || `T${i + 1}`;
+      const tabAways = trial.tabAwayEvents || [];
+
+      // Row label
+      ctx.fillStyle = '#333';
+      ctx.font = '10px sans-serif';
+      ctx.fillText(trialId.substring(0, 16), LEFT_PAD, y + ROW_HEIGHT / 2 + 3);
+
+      // Trial duration background (light grey bar)
+      const trialDur = trial.duration_ms || trial.responseTime_ms || 30000;
+      const barX = LEFT_PAD + LABEL_WIDTH;
+      ctx.fillStyle = '#f0f0f0';
+      ctx.fillRect(barX, y + 3, trialDur * xScale, ROW_HEIGHT - 6);
+
+      // Tab-away bars
+      for (const ta of tabAways) {
+        // Use trial-relative timestamp (normalized in ingest). Fall back to
+        // raw `start` only if normalization was unavailable; this will look
+        // wrong (off-canvas) but at least won't crash.
+        const start = (ta.startRel_ms != null) ? ta.startRel_ms : (ta.start || 0);
+        const dur = ta.duration_ms || 0;
+        // Skip tab-aways that fall outside the trial window — they likely
+        // occurred between trials (inter-trial pause) and aren't meaningful here.
+        if (start < -1000 || start > trialDur + 1000) continue;
+        const clamped = Math.max(0, start);
+        const barStart = barX + clamped * xScale;
+        const barWidth = Math.max(2, dur * xScale);
+
+        // Color by duration: flicker (<3s) = grey, medium (3-10s) = orange, long (≥10s) = red.
+        // Matches summary analyzer bins and the scoring engine's 3s cutoff.
+        const durSec = dur / 1000;
+        ctx.fillStyle = durSec < 3 ? '#bdbdbd' : durSec < 10 ? '#ff9800' : '#f44336';
+        ctx.fillRect(barStart, y + 5, barWidth, ROW_HEIGHT - 10);
+        ctx.strokeStyle = '#333';
+        ctx.lineWidth = 0.5;
+        ctx.strokeRect(barStart, y + 5, barWidth, ROW_HEIGHT - 10);
+      }
+
+      // Row separator
+      ctx.strokeStyle = '#e0e0e0';
+      ctx.lineWidth = 0.5;
+      ctx.beginPath();
+      ctx.moveTo(LEFT_PAD, y + ROW_HEIGHT);
+      ctx.lineTo(canvasW - 10, y + ROW_HEIGHT);
+      ctx.stroke();
+    }
+
+    // X-axis labels
+    ctx.fillStyle = '#666';
+    ctx.font = '9px sans-serif';
+    const tickCount = 5;
+    for (let t = 0; t <= tickCount; t++) {
+      const time = (maxDuration / tickCount) * t;
+      const x = LEFT_PAD + LABEL_WIDTH + time * xScale;
+      ctx.fillText(`${(time / 1000).toFixed(0)}s`, x, canvasH - 10);
+    }
+
+    const buf = canvas.toBuffer('image/png');
+    const filename = `tab_timeline_${sanitize(p.participantId)}.png`;
+    writeFileSync(join(config.outputDir, 'images', filename), buf);
+  }
+
+  console.log(`  tab timelines — rendered`);
+}
+
+function sanitize(name) {
+  return name.replace(/[^a-zA-Z0-9_-]/g, '_').substring(0, 40);
+}