cyborg-hunter 0.3.0

package/src/cli/renderers/typing-profile.js

@@ -0,0 +1,200 @@
+// src/cli/renderers/typing-profile.js
+// Renders per-participant typing speed bar chart using node-canvas.
+// Each bar = one trial's chars/sec. A horizontal threshold line shows
+// the configured CPS threshold. Bars above threshold are colored red.
+
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+
+const BAR_WIDTH = 30;
+const BAR_GAP = 8;
+const CHART_HEIGHT = 200;
+const TOP_PAD = 50;
+const BOTTOM_PAD = 50;
+const LEFT_PAD = 60;
+
+export async function renderTypingProfiles(participants, config) {
+  const { createCanvas } = await import('canvas');
+  const threshold = config.typingSpeedThreshold_cps || 10;
+
+  for (const p of participants) {
+    const trials = p.trials;
+    if (trials.length === 0) continue;
+
+    // Per-trial state. We distinguish three cases:
+    //   "typed"       — charsPerSec is a real number, draw a normal bar
+    //   "paste-only"  — charsPerSec is null but there's a paste event; draw a
+    //                   grey hatched marker so the absence is legible. Single
+    //                   paste fires one input event → editTimestamps.length < 2
+    //                   → computeTypingSpeed returns null. Without this, a
+    //                   pasted response looks identical to a very slow one.
+    //   "no-data"     — neither, leave blank
+    const kinds = trials.map(t => {
+      if (typeof t.charsPerSec === 'number') return 'typed';
+      if ((t.pasteEvents || []).length > 0) return 'paste-only';
+      return 'no-data';
+    });
+    const speeds = trials.map(t => (typeof t.charsPerSec === 'number' ? t.charsPerSec : 0));
+    if (kinds.every(k => k === 'no-data')) continue;
+
+    const canvasW = LEFT_PAD + trials.length * (BAR_WIDTH + BAR_GAP) + 20;
+    const canvasH = TOP_PAD + CHART_HEIGHT + BOTTOM_PAD;
+    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(`Typing Speed Profile — ${p.participantId}`, LEFT_PAD, 20);
+    ctx.font = '10px sans-serif';
+    ctx.fillStyle = '#666';
+    ctx.fillText(`Threshold: ${threshold} chars/sec`, LEFT_PAD, 35);
+
+    // Legend — three states documented in the `kinds` comment above.
+    const legendY = 35;
+    const legendX0 = LEFT_PAD + 180;
+    ctx.fillStyle = '#2196F3';
+    ctx.fillRect(legendX0, legendY - 8, 12, 10);
+    ctx.fillStyle = '#666';
+    ctx.fillText('typed', legendX0 + 16, legendY);
+    ctx.fillStyle = '#f44336';
+    ctx.fillRect(legendX0 + 60, legendY - 8, 12, 10);
+    ctx.fillStyle = '#666';
+    ctx.fillText('> threshold', legendX0 + 76, legendY);
+    // Hatched swatch for paste-only
+    drawHatchedRect(ctx, legendX0 + 150, legendY - 8, 12, 10);
+    ctx.fillStyle = '#666';
+    ctx.fillText('paste (P)', legendX0 + 166, legendY);
+
+    // Y-axis scaling
+    const maxSpeed = Math.max(...speeds, threshold * 1.5);
+    const yScale = CHART_HEIGHT / maxSpeed;
+
+    // Y-axis labels
+    ctx.fillStyle = '#666';
+    ctx.font = '9px sans-serif';
+    const yTicks = 5;
+    for (let t = 0; t <= yTicks; t++) {
+      const val = (maxSpeed / yTicks) * t;
+      const y = TOP_PAD + CHART_HEIGHT - val * yScale;
+      ctx.fillText(`${val.toFixed(1)}`, 5, y + 3);
+      // Grid line
+      ctx.strokeStyle = '#eee';
+      ctx.lineWidth = 0.5;
+      ctx.beginPath();
+      ctx.moveTo(LEFT_PAD, y);
+      ctx.lineTo(canvasW - 10, y);
+      ctx.stroke();
+    }
+
+    // Threshold line
+    const threshY = TOP_PAD + CHART_HEIGHT - threshold * yScale;
+    ctx.strokeStyle = '#ff0000';
+    ctx.lineWidth = 1.5;
+    ctx.setLineDash([5, 3]);
+    ctx.beginPath();
+    ctx.moveTo(LEFT_PAD, threshY);
+    ctx.lineTo(canvasW - 10, threshY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+
+    // Bars
+    const PASTE_BAR_H = CHART_HEIGHT * 0.2; // Paste-only marker height: fixed 20% of chart.
+    for (let i = 0; i < trials.length; i++) {
+      const kind = kinds[i];
+      const speed = speeds[i];
+      const x = LEFT_PAD + i * (BAR_WIDTH + BAR_GAP);
+
+      if (kind === 'paste-only') {
+        // Fixed-height hatched grey bar + "P" marker. The height is arbitrary
+        // — the point is visible presence, not magnitude (we have no CPS to
+        // show). Sits at the bottom like a normal bar.
+        const y = TOP_PAD + CHART_HEIGHT - PASTE_BAR_H;
+        drawHatchedRect(ctx, x, y, BAR_WIDTH, PASTE_BAR_H);
+        ctx.strokeStyle = '#888';
+        ctx.lineWidth = 0.5;
+        ctx.strokeRect(x, y, BAR_WIDTH, PASTE_BAR_H);
+        // "P" marker above the bar
+        ctx.fillStyle = '#555';
+        ctx.font = 'bold 11px sans-serif';
+        ctx.fillText('P', x + BAR_WIDTH / 2 - 3, y - 3);
+      } else if (kind === 'typed') {
+        const barH = speed * yScale;
+        const y = TOP_PAD + CHART_HEIGHT - barH;
+        ctx.fillStyle = speed > threshold ? '#f44336' : '#2196F3';
+        ctx.fillRect(x, y, BAR_WIDTH, barH);
+        ctx.strokeStyle = '#333';
+        ctx.lineWidth = 0.5;
+        ctx.strokeRect(x, y, BAR_WIDTH, barH);
+        if (speed > 0) {
+          ctx.fillStyle = '#fff';
+          ctx.font = 'bold 9px sans-serif';
+          ctx.fillText(speed.toFixed(1), x + 3, y + 12);
+        }
+        // Mixed: typed AND pasted in the same trial. The bar shows the typing
+        // rate (legitimate signal); the "P" glyph above it flags that *some*
+        // of the response came in via paste. Distinct from pure paste-only
+        // (which is a hatched bar, no colored fill).
+        if ((trials[i].pasteEvents || []).length > 0) {
+          ctx.fillStyle = '#555';
+          ctx.font = 'bold 11px sans-serif';
+          ctx.fillText('P', x + BAR_WIDTH / 2 - 3, y - 3);
+        }
+      }
+      // 'no-data' → render nothing (blank column)
+
+      // Trial label (always drawn, even for blank columns)
+      const trialId = trials[i].trialId || trials[i].ruleId || `T${i + 1}`;
+      ctx.fillStyle = '#333';
+      ctx.font = '8px sans-serif';
+      ctx.save();
+      ctx.translate(x + BAR_WIDTH / 2, TOP_PAD + CHART_HEIGHT + 10);
+      ctx.rotate(Math.PI / 4);
+      ctx.fillText(trialId.substring(0, 12), 0, 0);
+      ctx.restore();
+    }
+
+    // Baseline
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(LEFT_PAD, TOP_PAD + CHART_HEIGHT);
+    ctx.lineTo(canvasW - 10, TOP_PAD + CHART_HEIGHT);
+    ctx.stroke();
+
+    const buf = canvas.toBuffer('image/png');
+    const filename = `typing_profile_${sanitize(p.participantId)}.png`;
+    writeFileSync(join(config.outputDir, 'images', filename), buf);
+  }
+
+  console.log(`  typing profiles — rendered`);
+}
+
+function sanitize(name) {
+  return name.replace(/[^a-zA-Z0-9_-]/g, '_').substring(0, 40);
+}
+
+// Cross-hatched fill for paste-only markers. Uses a light grey background
+// with diagonal strokes so the bar reads as "distinct category, not zero".
+function drawHatchedRect(ctx, x, y, w, h) {
+  ctx.save();
+  ctx.fillStyle = '#e8e8e8';
+  ctx.fillRect(x, y, w, h);
+  ctx.beginPath();
+  ctx.rect(x, y, w, h);
+  ctx.clip();
+  ctx.strokeStyle = '#888';
+  ctx.lineWidth = 0.8;
+  const step = 5;
+  for (let d = -h; d < w + h; d += step) {
+    ctx.beginPath();
+    ctx.moveTo(x + d, y);
+    ctx.lineTo(x + d + h, y + h);
+    ctx.stroke();
+  }
+  ctx.restore();
+}

package/src/cli/report.js

@@ -0,0 +1,100 @@
+// src/cli/report.js
+// CLI report pipeline orchestrator.
+// Runs: config → ingest → analyze → render → output
+//
+// This is the main pipeline that ties all CLI modules together.
+// Each stage is imported lazily where possible so partial runs
+// (e.g., missing canvas) degrade gracefully.
+
+import { join } from 'path';
+import { loadConfig } from './config.js';
+import { ingest } from './ingest.js';
+import { computeSummary } from './analyzers/summary.js';
+import { detectEdgeExits } from './analyzers/edge-exit.js';
+import { rankTriage } from './analyzers/triage.js';
+import { VERSION } from '../shared/constants.js';
+
+export async function run(args) {
+  console.log(`cyborg-hunter report v${VERSION}\n`);
+
+  // 1. Load and merge config (defaults ← file ← CLI flags)
+  const config = loadConfig(args);
+
+  // 2. Ingest participant data files
+  const { participants, warnings } = await ingest(config);
+  console.log(`Found ${participants.length} participants` +
+    (warnings.length ? ` (${warnings.length} files had warnings)` : ''));
+
+  if (participants.length === 0) {
+    console.error('No valid participant data found. Check dataDir and filePattern.');
+    process.exit(1);
+  }
+
+  // 3. Analyze — compute summaries, detect edge exits, rank by triage priority
+  const summaries = computeSummary(participants, config);
+  const edgeExits = detectEdgeExits(participants, config);
+  const triage = rankTriage(summaries, edgeExits, config);
+
+  const flaggedHard = triage.filter(t => t.hardTriggered).length;
+  const flaggedSoft = triage.filter(t => !t.hardTriggered && t.softFlagged).length;
+  const clean = triage.length - flaggedHard - flaggedSoft;
+
+  console.log(`\nAnalyzing...`);
+  console.log(`  Participants flagged (hard signals): ${flaggedHard}`);
+  console.log(`  Participants flagged (soft score): ${flaggedSoft}`);
+  console.log(`  Participants clean: ${clean}`);
+
+  // 4. Render outputs
+  console.log(`\nRendering...`);
+  const { mkdirSync } = await import('fs');
+  mkdirSync(config.outputDir, { recursive: true });
+
+  // Text-based renderers (always available, no native dependencies)
+  const { renderSummaryCSV } = await import('./renderers/summary-csv.js');
+  const { renderTriage } = await import('./renderers/triage-md.js');
+  const { renderEventLog } = await import('./renderers/event-log.js');
+  const { renderExtensions } = await import('./renderers/extensions.js');
+
+  await renderSummaryCSV(summaries, triage, config);
+  await renderTriage(triage, config);
+  await renderEventLog(participants, config);
+  await renderExtensions(participants, config);
+
+  // Visual renderers require node-canvas (optional dependency).
+  // If canvas is unavailable, skip with a helpful install message.
+  let visualsRendered = false;
+  if (!config.noVisuals) {
+    let canvas;
+    try {
+      canvas = await import('canvas');
+    } catch {
+      console.log(`\n  Trajectory images require the 'canvas' package, which needs Cairo.\n`);
+      console.log(`    macOS:    brew install pkg-config cairo pango libpng jpeg giflib librsvg`);
+      console.log(`    Ubuntu:   sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev`);
+      console.log(`    Windows:  https://github.com/nicktacik/node-canvas#compiling\n`);
+      console.log(`  Then run: npm install canvas`);
+      console.log(`  Continuing without visuals.\n`);
+    }
+
+    if (canvas) {
+      const { renderTrajectories } = await import('./renderers/trajectories.js');
+      const { renderTabTimelines } = await import('./renderers/tab-timeline.js');
+      const { renderTypingProfiles } = await import('./renderers/typing-profile.js');
+
+      // Create images/ subdirectory for visual outputs
+      mkdirSync(join(config.outputDir, 'images'), { recursive: true });
+
+      await renderTrajectories(participants, triage, config);
+      await renderTabTimelines(participants, config);
+      await renderTypingProfiles(participants, config);
+      visualsRendered = true;
+    }
+  }
+
+  // HTML index page — references images/ folder (not base64-embedded)
+  const { renderHtmlIndex } = await import('./renderers/html-index.js');
+  await renderHtmlIndex(summaries, triage, participants, config, visualsRendered);
+
+  console.log(`\nReport written to ${config.outputDir}/`);
+  console.log(`  Open ${config.outputDir}/index.html to review`);
+}

package/src/core/index.js

@@ -0,0 +1,13 @@
+// src/core/index.js
+// Package entry point. Exports init() and static utilities.
+//
+// IMPORTANT: Do NOT manually assign window.CyborgHunter here.
+// esbuild's globalName: 'CyborgHunter' handles the IIFE global assignment,
+// and the build footer adds window.IntegrityMonitor = CyborgHunter.
+// Manual assignment would create a second object, causing state divergence.
+
+import { init } from './monitor.js';
+import { VERSION } from '../shared/constants.js';
+import { preventTextSelection, addHoneypot, setAltText } from './signals/dom-protection.js';
+
+export { init, VERSION, preventTextSelection, addHoneypot, setAltText };