create-backlist 10.0.8 → 10.1.0

package/src/qa/qa-engine.js

@@ -1,77 +1,66 @@
 // ═══════════════════════════════════════════════════════════════════════════
-//  Backlist Enterprise AI QA Platform — qa-engine.js  v12.0
-//  Copyright (c) W.A.H.ISHAN — MIT License
-//
-//  REAL RUNTIME TESTING — NO FAKE DATA
-//  Every result is collected from actual browser execution
+//  Backlist Enterprise QA Engine v13.0 — PLAYWRIGHT REAL BROWSER EDITION
+//  100% Real Runtime Testing · Live Playwright Tests · Rich HTML Reports
 // ═══════════════════════════════════════════════════════════════════════════
 
-import * as p           from '@clack/prompts';
-import chalk            from 'chalk';
-import fs               from 'fs-extra';
-import path             from 'node:path';
-import os               from 'node:os';
-import { performance }  from 'node:perf_hooks';
+import * as p          from '@clack/prompts';
+import chalk           from 'chalk';
+import fs              from 'fs-extra';
+import path            from 'node:path';
+import os              from 'node:os';
+import readline        from 'node:readline';
+import { performance } from 'node:perf_hooks';
 import { EventEmitter } from 'node:events';
-import readline         from 'node:readline';
-
-import { SmartCrawler }        from './browser/crawler.js';
-import { BrowserInteractor }   from './browser/interactions.js';
-import { ScreenshotCapture }   from './browser/screenshot.js';
-import { RealAPIValidator }    from './analyzers/api.js';
-import { SecurityScanner }     from './analyzers/security.js';
-import { PerformanceProfiler } from './analyzers/performance.js';
-import { AccessibilityChecker} from './analyzers/accessibility.js';
-import { SEOScanner }          from './analyzers/seo.js';
-import { HTMLReporter }        from './reporters/html.js';
-import { TerminalDashboard }   from './reporters/terminal.js';
-import { JSONReporter }        from './reporters/json.js';
-import { AIClassifier }        from './utils/ai-classifier.js';
 
 // ── Constants ─────────────────────────────────────────────────────────────
-export const VERSION        = '12.0.0';
+export const VERSION        = '13.0.0';
 export const QA_DIR         = path.join(process.cwd(), '.backlist', 'qa');
 export const REPORT_DIR     = path.join(QA_DIR, 'reports');
 export const HISTORY_FILE   = path.join(QA_DIR, 'history.json');
 export const SCREENSHOT_DIR = path.join(REPORT_DIR, 'screenshots');
 
 // ── Utilities ─────────────────────────────────────────────────────────────
-export function timestamp()        { return new Date().toISOString(); }
-export function shortId()          { return Math.random().toString(36).slice(2, 9); }
-export function sleep(ms)          { return new Promise(r => setTimeout(r, ms)); }
-export function formatDuration(ms) {
+export const timestamp      = ()   => new Date().toISOString();
+export const shortId        = ()   => Math.random().toString(36).slice(2, 9);
+export const sleep          = (ms) => new Promise(r => setTimeout(r, ms));
+export const formatDuration = (ms) => {
+  if (!ms || ms < 0) return '0ms';
   if (ms < 1000) return `${Math.round(ms)}ms`;
   return `${(ms / 1000).toFixed(2)}s`;
-}
-export function formatBytes(b) {
-  if (!b || b < 0)      return '0B';
-  if (b < 1024)          return `${b}B`;
-  if (b < 1024 * 1024)   return `${(b / 1024).toFixed(1)}KB`;
+};
+export const formatBytes = (b) => {
+  if (!b || b < 0)    return '0B';
+  if (b < 1024)        return `${b}B`;
+  if (b < 1024 * 1024) return `${(b / 1024).toFixed(1)}KB`;
   return `${(b / 1024 / 1024).toFixed(1)}MB`;
-}
+};
 
-// ── Ask yes/no in terminal without async-inside-Promise issue ─────────────
-function askQuestion(question) {
+// ── readline helper ───────────────────────────────────────────────────────
+function askYesNo(question) {
   return new Promise((resolve) => {
-    const rl = readline.createInterface({
-      input : process.stdin,
-      output: process.stdout,
-    });
-    // Auto-resolve after 10s if no input
-    const timer = setTimeout(() => {
-      rl.close();
-      resolve(false);
-    }, 10_000);
-
-    rl.question(question, (answer) => {
+    const rl    = readline.createInterface({ input: process.stdin, output: process.stdout });
+    const timer = setTimeout(() => { rl.close(); resolve(false); }, 10_000);
+    rl.question(question, (ans) => {
       clearTimeout(timer);
       rl.close();
-      resolve(answer.toLowerCase().trim() === 'y');
+      resolve(ans.toLowerCase().trim() === 'y');
     });
   });
 }
 
-// ── QA Session ────────────────────────────────────────────────────────────
+// ── Playwright availability check ────────────────────────────────────────
+async function getPlaywright() {
+  try {
+    const pw = await import('playwright');
+    return pw.chromium || pw.default?.chromium || null;
+  } catch {
+    return null;
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+//  QA Session
+// ═══════════════════════════════════════════════════════════════════════════
 export class QASession {
   id;
   startedAt;
@@ -87,17 +76,21 @@ export class QASession {
   secFindings   = [];
   a11yResults   = [];
   seoResults    = [];
+  playwrightMode = false;
 
-  constructor(urls) {
-    this.id        = `QA-${shortId()}`;
+  constructor(urls = {}) {
+    this.id        = `QA-${shortId().toUpperCase()}`;
     this.startedAt = timestamp();
     this.urls      = urls;
   }
 
-  addResult(result) { this.results.push(result); }
-
-  addBug(bug) {
-    this.bugs.push({ ...bug, id: `BUG-${shortId()}`, createdAt: timestamp() });
+  addResult(r)  { this.results.push(r); }
+  addBug(bug)   {
+    this.bugs.push({
+      ...bug,
+      id: `BUG-${shortId().toUpperCase()}`,
+      createdAt: timestamp(),
+    });
   }
 
   getSummary() {
@@ -114,639 +107,1637 @@ export class QASession {
   }
 }
 
-// ── Main QA Engine ────────────────────────────────────────────────────────
-export class QAEngine extends EventEmitter {
-  #session;
-  #terminal;
-  #crawler;
-  #interactor;
-  #screenshotter;
-  #apiValidator;
-  #security;
-  #performance;
-  #a11y;
-  #seo;
-  #aiClassifier;
-  #aborted = false;
-
-  constructor(session, options = {}) {
-    super();
-    this.#session       = session;
-    this.#terminal      = new TerminalDashboard(session);
-    this.#screenshotter = new ScreenshotCapture(SCREENSHOT_DIR);
-    this.#aiClassifier  = new AIClassifier();
-  }
-
-  // ── FIX: init() — no await inside non-async callbacks ─────────────────
-  async init() {
-    // Dynamic import Playwright — optional dependency
-    let playwright = null;
-    try {
-      playwright = await import('playwright');
-    } catch {
-      // Will use HTTP fallback throughout — playwright is optional
-    }
+// ═══════════════════════════════════════════════════════════════════════════
+//  HTTP Probe — real HTTP requests
+// ═══════════════════════════════════════════════════════════════════════════
+async function httpProbe(url, { method = 'GET', timeout = 12000, headers = {} } = {}) {
+  const t0 = Date.now();
+  try {
+    const ctrl  = new AbortController();
+    const timer = setTimeout(() => ctrl.abort(), timeout);
+    const res   = await fetch(url, {
+      method,
+      signal  : ctrl.signal,
+      headers : { 'User-Agent': 'Backlist-QA/13.0', Accept: '*/*', ...headers },
+      redirect: 'follow',
+    });
+    clearTimeout(timer);
 
-    // Resolve browser launch options (handles all detection logic)
-    const { getBrowserLaunchOptions, installPlaywrightBrowsers } = await import('./browser/installer.js');
-    const launchOpts = await getBrowserLaunchOptions();
-
-    if (!launchOpts.available) {
-      console.log(chalk.yellow('\n  ⚠  Playwright browser not found.'));
-      console.log(chalk.gray('  The QA engine will run in HTTP-only mode.'));
-      console.log(chalk.gray('  Browser-based tests (JS errors, screenshots, real Web Vitals)'));
-      console.log(chalk.gray('  will be skipped. All HTTP-based tests will still run.\n'));
-      console.log(chalk.dim('  To enable full browser testing:'));
-      console.log(chalk.white('    npx playwright install chromium\n'));
-
-      // ── FIX: use the extracted askQuestion() helper — no await in Promise ──
-      const shouldInstall = await askQuestion(
-        chalk.cyan('  Install Playwright browser now? (y/N): ')
-      );
-
-      if (shouldInstall) {
-        const result = await installPlaywrightBrowsers();
-        if (!result.success) {
-          console.log(chalk.yellow('  Auto-install failed. Continuing in HTTP-only mode.\n'));
-        }
-      }
-    } else {
-      const exeName = launchOpts.executablePath?.split(/[/\\]/).pop() ?? 'chromium';
-      console.log(chalk.gray(`  ✓ Browser ready (${launchOpts.source}: ${exeName})`));
-    }
+    const rt          = Date.now() - t0;
+    const contentType = res.headers.get('content-type') || '';
+    const hdrs        = {};
+    res.headers.forEach((v, k) => { hdrs[k] = v; });
+
+    let body = '', bodySize = 0;
+    try { body = await res.text(); bodySize = new TextEncoder().encode(body).length; } catch {}
 
-    // Initialise all subsystems
-    this.#crawler       = new SmartCrawler(playwright);
-    this.#interactor    = new BrowserInteractor(playwright, this.#session);
-    this.#apiValidator  = new RealAPIValidator(this.#session);
-    this.#security      = new SecurityScanner(this.#session);
-    this.#performance   = new PerformanceProfiler(this.#session);
-    this.#a11y          = new AccessibilityChecker(playwright, this.#session);
-    this.#seo           = new SEOScanner(this.#session);
-    this.#screenshotter = new ScreenshotCapture(SCREENSHOT_DIR);
-    this.#aiClassifier  = new AIClassifier();
+    let parsed = null;
+    if (contentType.includes('json')) { try { parsed = JSON.parse(body); } catch {} }
 
-    await this.#interactor.launch();
-    await this.#screenshotter.init();
+    return {
+      ok: res.status >= 200 && res.status < 400,
+      status: res.status, contentType, headers: hdrs,
+      body: body.slice(0, 3000), parsed, bodySize,
+      responseTime: rt, url, method, error: null,
+    };
+  } catch (err) {
+    return {
+      ok: false, status: 0, contentType: '', headers: {},
+      body: '', parsed: null, bodySize: 0,
+      responseTime: Date.now() - t0, url, method,
+      error: err.message,
+    };
   }
+}
 
-  async run() {
-    this.#terminal.start();
-    this.emit('session:start', this.#session);
+// ═══════════════════════════════════════════════════════════════════════════
+//  PLAYWRIGHT REAL BROWSER ENGINE
+//  - Real browser rendering (Chromium)
+//  - Console error capture
+//  - Network request interception
+//  - Real Web Vitals (LCP, FCP, CLS, TBT)
+//  - Screenshot capture
+//  - DOM interaction tests
+// ═══════════════════════════════════════════════════════════════════════════
+async function runPlaywrightScan(url, session, dash, options = {}) {
+  const chromium = await getPlaywright();
+  if (!chromium) {
+    dash?.log(chalk.yellow('  ⚠ Playwright not found. Run: npm install playwright && npx playwright install chromium'));
+    return null;
+  }
 
-    try {
-      this.#terminal.setPhase('🔍 Phase 1: Route Discovery & Crawling');
-      await this.#phaseDiscovery();
+  dash?.log(chalk.cyan(`  🎭 Playwright browser launching for ${url}...`));
+
+  let browser, context, page;
+  const results = {
+    consoleErrors : [],
+    networkFails  : [],
+    screenshots   : [],
+    vitals        : {},
+    interactions  : [],
+    domChecks     : [],
+    jsErrors      : [],
+    networkRequests: [],
+  };
+
+  try {
+    browser = await chromium.launch({
+      headless: options.headless !== false,
+      args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
+    });
 
-      this.#terminal.setPhase('📡 Phase 2: Real API Validation');
-      await this.#phaseAPIValidation();
+    context = await browser.newContext({
+      viewport: { width: 1280, height: 900 },
+      userAgent: 'Backlist-QA/13.0 (Playwright)',
+      ignoreHTTPSErrors: true,
+      recordVideo: options.recordVideo ? { dir: SCREENSHOT_DIR } : undefined,
+    });
 
-      this.#terminal.setPhase('🖱️  Phase 3: Browser Interaction Testing');
-      await this.#phaseBrowserInteractions();
+    page = await context.newPage();
 
-      this.#terminal.setPhase('🛡️  Phase 4: Security Deep Scan');
-      await this.#phaseSecurityScan();
+    // ── Capture console messages ─────────────────────────────────────────
+    page.on('console', (msg) => {
+      const type = msg.type();
+      const text = msg.text();
+      if (['error', 'warning'].includes(type)) {
+        const entry = { type, text, timestamp: Date.now(), url: page.url() };
+        results.consoleErrors.push(entry);
+        session.consoleErrors.push(entry);
+      }
+    });
 
-      this.#terminal.setPhase('⚡ Phase 5: Performance Profiling');
-      await this.#phasePerformance();
+    // ── Capture JS errors ────────────────────────────────────────────────
+    page.on('pageerror', (err) => {
+      const entry = { message: err.message, stack: err.stack, url: page.url(), timestamp: Date.now() };
+      results.jsErrors.push(entry);
+      session.consoleErrors.push({ type: 'pageerror', text: err.message, url: page.url() });
+    });
 
-      this.#terminal.setPhase('♿ Phase 6: Accessibility Testing');
-      await this.#phaseAccessibility();
+    // ── Network monitoring ───────────────────────────────────────────────
+    const requestTimings = new Map();
+    page.on('request', (req) => {
+      requestTimings.set(req.url(), Date.now());
+    });
+    page.on('requestfailed', (req) => {
+      const entry = {
+        url     : req.url(),
+        method  : req.method(),
+        failure : req.failure()?.errorText || 'unknown',
+        timestamp: Date.now(),
+      };
+      results.networkFails.push(entry);
+      session.networkLog.push(entry);
+    });
+    page.on('response', (res) => {
+      const start    = requestTimings.get(res.url()) || Date.now();
+      const duration = Date.now() - start;
+      const entry    = {
+        url     : res.url(),
+        status  : res.status(),
+        duration,
+        size    : parseInt(res.headers()['content-length'] || '0'),
+        type    : res.headers()['content-type'] || '',
+      };
+      results.networkRequests.push(entry);
+      if (res.status() >= 400) {
+        results.networkFails.push({ url: res.url(), status: res.status(), duration });
+      }
+    });
 
-      this.#terminal.setPhase('🔎 Phase 7: SEO Validation');
-      await this.#phaseSEO();
+    // ── Navigate ─────────────────────────────────────────────────────────
+    const navStart = Date.now();
+    const response = await page.goto(url, {
+      waitUntil: 'networkidle',
+      timeout  : 30000,
+    }).catch(err => ({ error: err.message }));
+    const navDuration = Date.now() - navStart;
+
+    if (response?.error) {
+      dash?.log(chalk.red(`  ✗ Navigation failed: ${response.error}`));
+      return { error: response.error, results };
+    }
 
-      this.#terminal.setPhase('🤖 Phase 8: AI Bug Classification');
-      await this.#phaseAIClassification();
+    // ── Screenshot: Desktop ──────────────────────────────────────────────
+    await fs.ensureDir(SCREENSHOT_DIR);
+    const screenshotName = `${session.id}-desktop-${shortId()}.png`;
+    const screenshotPath = path.join(SCREENSHOT_DIR, screenshotName);
+    await page.screenshot({ path: screenshotPath, fullPage: true });
+    results.screenshots.push({ path: screenshotPath, name: screenshotName, type: 'desktop', url });
+    session.screenshots.push({ path: screenshotPath, name: screenshotName, type: 'desktop', url });
+    dash?.log(chalk.green(`  📸 Desktop screenshot: ${screenshotName}`));
+
+    // ── Screenshot: Mobile (viewport switch) ─────────────────────────────
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.waitForTimeout(500);
+    const mobileScreenshotName = `${session.id}-mobile-${shortId()}.png`;
+    const mobileScreenshotPath = path.join(SCREENSHOT_DIR, mobileScreenshotName);
+    await page.screenshot({ path: mobileScreenshotPath, fullPage: false });
+    results.screenshots.push({ path: mobileScreenshotPath, name: mobileScreenshotName, type: 'mobile', url });
+    session.screenshots.push({ path: mobileScreenshotPath, name: mobileScreenshotName, type: 'mobile', url });
+    dash?.log(chalk.green(`  📸 Mobile screenshot: ${mobileScreenshotName}`));
+    await page.setViewportSize({ width: 1280, height: 900 });
+
+    // ── Real Web Vitals via PerformanceObserver ───────────────────────────
+    dash?.log(chalk.cyan('  ⚡ Measuring real Web Vitals...'));
+    const vitals = await page.evaluate(() => {
+      return new Promise((resolve) => {
+        const v    = { lcp: null, fcp: null, cls: 0, tbt: 0, ttfb: null };
+        let clsVal = 0;
+
+        // Navigation timing (TTFB)
+        const navEntry = performance.getEntriesByType('navigation')[0];
+        if (navEntry) v.ttfb = Math.round(navEntry.responseStart - navEntry.requestStart);
+
+        // FCP
+        const fcpEntry = performance.getEntriesByName('first-contentful-paint')[0];
+        if (fcpEntry) v.fcp = Math.round(fcpEntry.startTime);
+
+        // Paint entries
+        const paintEntries = performance.getEntriesByType('paint');
+        paintEntries.forEach(entry => {
+          if (entry.name === 'first-contentful-paint') v.fcp = Math.round(entry.startTime);
+        });
 
+        // LCP Observer
+        try {
+          new PerformanceObserver((list) => {
+            const entries = list.getEntries();
+            const last    = entries[entries.length - 1];
+            if (last) v.lcp = Math.round(last.startTime);
+          }).observe({ type: 'largest-contentful-paint', buffered: true });
+        } catch {}
+
+        // CLS Observer
+        try {
+          new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+              if (!entry.hadRecentInput) clsVal += entry.value;
+            }
+            v.cls = parseFloat(clsVal.toFixed(4));
+          }).observe({ type: 'layout-shift', buffered: true });
+        } catch {}
+
+        // Long tasks (TBT estimation)
+        try {
+          new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+              if (entry.duration > 50) v.tbt += Math.round(entry.duration - 50);
+            }
+          }).observe({ type: 'longtask', buffered: true });
+        } catch {}
+
+        // Wait for all observers
+        setTimeout(() => {
+          v.cls = parseFloat(clsVal.toFixed(4));
+          resolve(v);
+        }, 2000);
+      });
+    }).catch(() => ({}));
+
+    // Merge with navigation timing
+    const navTiming = await page.evaluate(() => {
+      const nav = performance.getEntriesByType('navigation')[0];
+      if (!nav) return {};
+      return {
+        ttfb        : Math.round(nav.responseStart - nav.requestStart),
+        domLoad     : Math.round(nav.domContentLoadedEventEnd),
+        fullLoad    : Math.round(nav.loadEventEnd),
+        dnsLookup   : Math.round(nav.domainLookupEnd - nav.domainLookupStart),
+        tcpConnect  : Math.round(nav.connectEnd - nav.connectStart),
+        transferSize: nav.transferSize,
+      };
+    }).catch(() => ({}));
+
+    results.vitals = { ...vitals, ...navTiming, navDuration };
+    dash?.log(chalk.green(`  ✓ Vitals: TTFB=${navTiming.ttfb||'?'}ms LCP=${vitals.lcp||'?'}ms FCP=${vitals.fcp||'?'}ms CLS=${vitals.cls??'?'}`));
+
+    // ── DOM Checks ───────────────────────────────────────────────────────
+    dash?.log(chalk.cyan('  🔍 Running DOM checks...'));
+    const domChecks = await page.evaluate(() => {
+      const checks = [];
+
+      // Title
+      const title = document.title;
+      checks.push({ name: 'Page title', pass: !!title && title.length > 0, value: title?.slice(0, 80) });
+
+      // H1
+      const h1s = document.querySelectorAll('h1');
+      checks.push({ name: 'Single H1', pass: h1s.length === 1, value: `${h1s.length} H1 tags` });
+
+      // Images without alt
+      const imgs    = document.querySelectorAll('img');
+      const noAlt   = [...imgs].filter(i => !i.getAttribute('alt')).length;
+      checks.push({ name: 'Images alt text', pass: noAlt === 0, value: `${noAlt}/${imgs.length} missing alt` });
+
+      // Buttons accessible
+      const btns   = document.querySelectorAll('button');
+      const noText = [...btns].filter(b => !b.textContent?.trim() && !b.getAttribute('aria-label')).length;
+      checks.push({ name: 'Buttons accessible', pass: noText === 0, value: `${noText} buttons missing label` });
+
+      // Links with href
+      const links    = document.querySelectorAll('a');
+      const noHref   = [...links].filter(l => !l.href || l.href === '#' || l.href === window.location.href + '#').length;
+      checks.push({ name: 'Links have href', pass: noHref === 0, value: `${noHref}/${links.length} empty links` });
+
+      // Forms with submit
+      const forms    = document.querySelectorAll('form');
+      const noSubmit = [...forms].filter(f => !f.querySelector('[type="submit"], button')).length;
+      checks.push({ name: 'Forms have submit', pass: noSubmit === 0 || forms.length === 0, value: `${forms.length} forms` });
+
+      // Meta viewport
+      const vp = document.querySelector('meta[name="viewport"]');
+      checks.push({ name: 'Viewport meta', pass: !!vp, value: vp?.content || 'missing' });
+
+      // Color contrast check (heuristic)
+      const body = document.body;
+      const bodyStyle = window.getComputedStyle(body);
+      checks.push({ name: 'Body has styles', pass: !!bodyStyle.backgroundColor || !!bodyStyle.color, value: 'CSS applied' });
+
+      // Broken internal links check
+      const internalLinks = [...links].filter(l => {
+        try { return new URL(l.href).origin === window.location.origin; } catch { return false; }
+      });
+      checks.push({ name: 'Internal links count', pass: true, value: `${internalLinks.length} internal links` });
+
+      return checks;
+    }).catch(() => []);
+
+    results.domChecks = domChecks;
+    dash?.log(chalk.green(`  ✓ DOM: ${domChecks.filter(c => c.pass).length}/${domChecks.length} checks passed`));
+
+    // ── Interaction Tests ────────────────────────────────────────────────
+    dash?.log(chalk.cyan('  🖱️  Testing interactions...'));
+    const interactions = [];
+
+    // Test all clickable buttons
+    const buttonCount = await page.locator('button:visible').count().catch(() => 0);
+    interactions.push({ name: 'Visible buttons found', pass: true, value: `${buttonCount} buttons` });
+
+    // Test form inputs exist
+    const inputCount = await page.locator('input:visible').count().catch(() => 0);
+    interactions.push({ name: 'Form inputs found', pass: true, value: `${inputCount} inputs` });
+
+    // Test scroll behavior
+    try {
+      await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+      await page.waitForTimeout(300);
+      await page.evaluate(() => window.scrollTo(0, 0));
+      interactions.push({ name: 'Page scroll', pass: true, value: 'Scroll works' });
     } catch (err) {
-      this.emit('engine:error', err);
-      throw err;
-    } finally {
-      this.#terminal.stop();
-      await this.#interactor.close().catch(() => {});
+      interactions.push({ name: 'Page scroll', pass: false, value: err.message });
     }
 
-    return this.#session;
-  }
+    // Test keyboard navigation (Tab key)
+    try {
+      await page.keyboard.press('Tab');
+      await page.waitForTimeout(100);
+      const focused = await page.evaluate(() => document.activeElement?.tagName || 'none');
+      interactions.push({ name: 'Keyboard navigation', pass: focused !== 'BODY', value: `Focus: ${focused}` });
+    } catch {
+      interactions.push({ name: 'Keyboard navigation', pass: false, value: 'Tab focus failed' });
+    }
 
-  // Run a single named phase (used by manual QA)
-  async runPhase(name) {
-    this.#terminal.start();
+    // Hover test on first link
     try {
-      switch (name) {
-        case 'full-url':
-          await this.#phaseDiscovery();
-          await this.#phaseAPIValidation();
-          await this.#phaseBrowserInteractions();
-          await this.#phaseSecurityScan();
-          await this.#phasePerformance();
-          await this.#phaseAccessibility();
-          await this.#phaseSEO();
-          await this.#phaseAIClassification();
-          break;
-        case 'security':    await this.#phaseSecurityScan();    break;
-        case 'perf':        await this.#phasePerformance();     break;
-        case 'a11y':        await this.#phaseAccessibility();   break;
-        case 'seo':         await this.#phaseSEO();             break;
-        case 'api':         await this.#phaseAPIValidation();   break;
-        default:
-          await this.run();
+      const firstLink = page.locator('a:visible').first();
+      if (await firstLink.count() > 0) {
+        await firstLink.hover();
+        interactions.push({ name: 'Link hover', pass: true, value: 'Hover works' });
       }
-    } finally {
-      this.#terminal.stop();
-      await this.#interactor.close().catch(() => {});
+    } catch {
+      interactions.push({ name: 'Link hover', pass: false, value: 'Hover failed' });
     }
-    return this.#session;
-  }
 
-  abort() {
-    this.#aborted = true;
-    this.#terminal.stop();
-    this.#interactor.close().catch(() => {});
-  }
+    results.interactions = interactions;
+    dash?.log(chalk.green(`  ✓ Interactions: ${interactions.filter(i => i.pass).length}/${interactions.length} passed`));
+
+    // ── Resource Analysis ─────────────────────────────────────────────────
+    const resourceStats = await page.evaluate(() => {
+      const entries = performance.getEntriesByType('resource');
+      const byType  = {};
+      let totalSize = 0;
+      let totalTime = 0;
+
+      for (const e of entries) {
+        const t = e.initiatorType || 'other';
+        if (!byType[t]) byType[t] = { count: 0, size: 0, time: 0, slow: [] };
+        byType[t].count++;
+        byType[t].size += e.transferSize || 0;
+        byType[t].time += e.duration;
+        totalSize += e.transferSize || 0;
+        totalTime += e.duration;
+        if (e.duration > 500) {
+          byType[t].slow.push({ url: e.name.split('/').pop().slice(0, 60), duration: Math.round(e.duration), size: e.transferSize || 0 });
+        }
+      }
+      return { byType, totalSize, totalTime: Math.round(totalTime), count: entries.length };
+    }).catch(() => ({}));
 
-  // ── Phase 1: Discovery ─────────────────────────────────────────────────
-  async #phaseDiscovery() {
-    for (const [label, url] of Object.entries(this.#session.urls)) {
-      if (!url) continue;
-      this.#terminal.log(`Crawling ${label}: ${url}`);
-
-      const routes = await this.#crawler.crawl(url, {
-        maxPages: 60,
-        maxDepth: 4,
-        onRoute : (route) => {
-          this.#session.routeMap.push(route);
-          this.#terminal.log(`  Found: ${route.url} (${route.type})`);
-        },
-      });
+    results.resourceStats = resourceStats;
 
-      this.#addResult({
-        name    : `[${label}] Route Discovery`,
-        type    : 'discovery',
-        category: 'crawl',
-        status  : routes.length > 0 ? 'PASS' : 'FAIL',
-        message : routes.length > 0
-          ? `Discovered ${routes.length} routes`
-          : 'No routes discovered — site may be unreachable',
-        data    : { routeCount: routes.length },
-        url, label,
-      });
-    }
+    return { results, navDuration, error: null };
+
+  } catch (err) {
+    dash?.log(chalk.red(`  ✗ Playwright error: ${err.message}`));
+    return { error: err.message, results };
+  } finally {
+    try { await page?.close(); }    catch {}
+    try { await context?.close(); } catch {}
+    try { await browser?.close(); } catch {}
   }
+}
 
-  // ── Phase 2: API Validation ────────────────────────────────────────────
-  async #phaseAPIValidation() {
-    const apiRoutes = this.#session.routeMap.filter(r =>
-      r.type === 'api' || r.url?.includes('/api/')
-    );
+// ═══════════════════════════════════════════════════════════════════════════
+//  Route Crawler — real HTTP crawl
+// ═══════════════════════════════════════════════════════════════════════════
+async function crawlSite(baseUrl, { maxPages = 50, onRoute } = {}) {
+  const visited = new Set();
+  const queue   = [{ url: baseUrl, depth: 0 }];
+  const routes  = [];
+
+  const norm       = (u) => { try { const x = new URL(u); x.hash = ''; return x.toString(); } catch { return null; } };
+  const sameOrigin = (u) => { try { return new URL(u).origin === new URL(baseUrl).origin; } catch { return false; } };
+
+  while (queue.length > 0 && routes.length < maxPages) {
+    const { url, depth } = queue.shift();
+    const n = norm(url);
+    if (!n || visited.has(n) || !sameOrigin(n) || depth > 3) continue;
+    visited.add(n);
+
+    const r    = await httpProbe(n, { timeout: 10000 });
+    const type = (() => {
+      if (r.status >= 400)                                              return 'error-page';
+      if (r.contentType.includes('json') || n.includes('/api/'))       return 'api';
+      if (n.endsWith('.xml') || n.endsWith('.txt'))                     return 'resource';
+      if (/\/(login|signin|auth)/i.test(n))                            return 'auth';
+      if (/\/(admin)/i.test(n))                                        return 'admin';
+      return 'page';
+    })();
+
+    const links = [];
+    if (r.contentType.includes('text/html')) {
+      const re = /href=["']([^"'#?][^"']*?)["']/gi;
+      let m;
+      while ((m = re.exec(r.body)) !== null) {
+        try { links.push(new URL(m[1], n).toString()); } catch {}
+      }
+    }
 
-    this.#terminal.log(`Validating ${apiRoutes.length} API endpoints...`);
+    const forms  = [];
+    const formRe = /<form([^>]*)>([\s\S]*?)<\/form>/gi;
+    let fm;
+    while ((fm = formRe.exec(r.body)) !== null) {
+      const action = (fm[1].match(/action=["']([^"']+)["']/) || [])[1] || '';
+      const method = (fm[1].match(/method=["']([^"']+)["']/) || [])[1] || 'GET';
+      const fields = [];
+      const ir     = /<input([^>]*)>/gi; let inp;
+      while ((inp = ir.exec(fm[2])) !== null) {
+        const name  = (inp[1].match(/name=["']([^"']+)["']/) || [])[1];
+        const type2 = (inp[1].match(/type=["']([^"']+)["']/) || [])[1] || 'text';
+        if (name) fields.push({ name, type: type2, required: /required/i.test(inp[1]) });
+      }
+      forms.push({ action, method, fields });
+    }
 
-    for (const route of apiRoutes) {
-      if (this.#aborted) break;
-      this.#terminal.setCurrentTest(`API: ${route.url}`);
-
-      const result = await this.#apiValidator.probe(route.url);
-      this.#session.apiLog.push(result);
-
-      this.#addResult({
-        name    : `API: ${route.url}`,
-        type    : 'api',
-        category: 'api-validation',
-        status  : result.pass ? 'PASS' : 'FAIL',
-        message : result.message,
-        data    : {
-          statusCode  : result.statusCode,
-          responseTime: result.responseTime,
-          contentType : result.contentType,
-          body        : result.body?.slice(0, 500),
-          headers     : result.headers,
-        },
-        url     : route.url,
-        duration: result.responseTime,
-      });
+    const route = { id: shortId(), url: n, type, status: r.status, depth, links, forms, contentType: r.contentType, error: r.error };
+    routes.push(route);
+    if (onRoute) onRoute(route);
 
-      if (!result.pass) {
-        this.#session.addBug({
-          title      : `API Failure: ${route.url}`,
-          severity   : result.statusCode >= 500 ? 'P0' : 'P1',
-          type       : 'api',
-          description: result.message,
-          evidence   : result,
-        });
-      }
+    for (const link of links.slice(0, 20)) {
+      const ln = norm(link);
+      if (ln && !visited.has(ln) && sameOrigin(ln)) queue.push({ url: ln, depth: depth + 1 });
     }
+  }
 
-    const discoveredAPIs = await this.#apiValidator.discoverFromNetworkLog(
-      this.#session.networkLog
-    );
-    for (const api of discoveredAPIs) {
-      if (!apiRoutes.find(r => r.url === api.url)) {
-        this.#session.apiLog.push(api);
+  // Common paths probe
+  const commonPaths = ['/api/health','/health','/api/status','/api/v1/health','/api/docs','/robots.txt','/sitemap.xml'];
+  for (const p2 of commonPaths) {
+    try {
+      const u = new URL(p2, baseUrl).toString();
+      const n = norm(u);
+      if (visited.has(n)) continue;
+      visited.add(n);
+      const r = await httpProbe(u, { timeout: 5000 });
+      if (r.status > 0 && r.status < 500) {
+        const route = { id: shortId(), url: u, type: p2.includes('/api') ? 'api' : 'resource', status: r.status, depth: 0, links: [], forms: [] };
+        routes.push(route);
+        if (onRoute) onRoute(route);
       }
-    }
+    } catch {}
   }
 
-  // ── Phase 3: Browser Interactions ─────────────────────────────────────
-  async #phaseBrowserInteractions() {
-    const pageRoutes = this.#session.routeMap.filter(r =>
-      r.type === 'page' || r.type === 'unknown'
-    );
+  return routes;
+}
 
-    for (const route of pageRoutes.slice(0, 25)) {
-      if (this.#aborted) break;
-      this.#terminal.setCurrentTest(`Browser: ${route.url}`);
+// ═══════════════════════════════════════════════════════════════════════════
+//  Security Scanner
+// ═══════════════════════════════════════════════════════════════════════════
+async function runSecurityScan(url) {
+  const findings = [];
+  const r        = await httpProbe(url);
+
+  if (!r.ok && r.status === 0) {
+    return [{
+      check: 'Server reachable', pass: false, severity: 'P0', category: 'connectivity',
+      detail: `Cannot reach ${url}: ${r.error}`, recommendation: 'Ensure server is running',
+    }];
+  }
 
-      const result = await this.#interactor.testPage(route.url, {
-        onConsoleError: (err) => {
-          this.#session.consoleErrors.push({ url: route.url, ...err });
-        },
-        onNetworkEvent: (event) => {
-          this.#session.networkLog.push({ url: route.url, ...event });
-        },
-      });
+  const h = r.headers;
+
+  const headerChecks = [
+    { id: 'csp',    name: 'Content-Security-Policy',  header: 'content-security-policy',    sev: 'P1',
+      validate: v => !!v, rec: 'Add CSP header to prevent XSS' },
+    { id: 'hsts',   name: 'HSTS',                    header: 'strict-transport-security',   sev: 'P1',
+      validate: v => !!v, rec: 'Add HSTS to enforce HTTPS' },
+    { id: 'xframe', name: 'X-Frame-Options',          header: 'x-frame-options',             sev: 'P1',
+      validate: v => v && ['DENY','SAMEORIGIN'].includes(v.toUpperCase()), rec: 'Set X-Frame-Options: DENY' },
+    { id: 'xcto',   name: 'X-Content-Type-Options',   header: 'x-content-type-options',      sev: 'P2',
+      validate: v => v === 'nosniff', rec: 'Set X-Content-Type-Options: nosniff' },
+    { id: 'rp',     name: 'Referrer-Policy',           header: 'referrer-policy',             sev: 'P2',
+      validate: v => !!v, rec: 'Add Referrer-Policy header' },
+    { id: 'server', name: 'Server version hidden',     header: 'server',                      sev: 'P2',
+      validate: v => !v || (!v.includes('/') && !/\d+\.\d+/.test(v)), rec: 'Genericize Server header' },
+    { id: 'xpb',    name: 'X-Powered-By hidden',       header: 'x-powered-by',               sev: 'P2',
+      validate: v => !v, rec: 'Remove X-Powered-By header' },
+  ];
+
+  for (const c of headerChecks) {
+    const val  = h[c.header] || '';
+    const pass = c.validate(val);
+    findings.push({
+      check: c.name, pass, severity: pass ? 'INFO' : c.sev,
+      category: 'headers', detail: pass ? `${c.header}: ${val || '(present)'}` : `Missing: ${c.header}`,
+      recommendation: c.rec, evidence: { header: c.header, value: val || null },
+    });
+  }
 
-      if (!result.pass || result.consoleErrors.length > 0) {
-        const screenshot = await this.#screenshotter.capture(
-          result.page,
-          `fail-${shortId()}`
-        );
-        if (screenshot) {
-          result.screenshotPath = screenshot;
-          this.#session.screenshots.push({
-            url   : route.url,
-            path  : screenshot,
-            reason: result.failReason,
-          });
-        }
-      }
+  const isHTTPS = url.startsWith('https://');
+  findings.push({
+    check: 'HTTPS enforced', pass: isHTTPS, severity: isHTTPS ? 'INFO' : 'P1',
+    category: 'encryption', detail: isHTTPS ? 'HTTPS in use' : 'HTTP — unencrypted',
+    recommendation: 'Use HTTPS with valid SSL', evidence: { protocol: new URL(url).protocol },
+  });
 
-      this.#addResult({
-        name    : `Page: ${route.url}`,
-        type    : 'browser',
-        category: 'interaction',
-        status  : result.pass
-          ? (result.consoleErrors.length > 0 ? 'FLAKY' : 'PASS')
-          : 'FAIL',
-        message : result.message,
-        data    : {
-          loadTime          : result.loadTime,
-          consoleErrors     : result.consoleErrors,
-          networkErrors     : result.networkErrors,
-          interactedElements: result.interactedElements,
-          screenshotPath    : result.screenshotPath,
-          jsErrors          : result.jsErrors,
-          resourcesFailed   : result.resourcesFailed,
-          renderTime        : result.renderTime,
-          domContentLoaded  : result.domContentLoaded,
-        },
-        url          : route.url,
-        duration     : result.loadTime,
-        screenshotPath: result.screenshotPath,
+  const corsOrigin = h['access-control-allow-origin'];
+  const corsCreds  = h['access-control-allow-credentials'];
+  const corsPass   = !(corsOrigin === '*' && corsCreds === 'true');
+  findings.push({
+    check: 'CORS wildcard + credentials', pass: corsPass,
+    severity: corsPass ? 'INFO' : 'P0', category: 'cors',
+    detail: corsPass ? 'CORS config safe' : 'Wildcard CORS + credentials = critical vulnerability',
+    recommendation: 'Never combine CORS * with allow-credentials',
+    evidence: { 'access-control-allow-origin': corsOrigin, 'access-control-allow-credentials': corsCreds },
+  });
+
+  const base      = new URL(url).origin;
+  const sensitives = [
+    { path: '/.env',          name: '.env exposed' },
+    { path: '/.git/config',   name: 'Git config exposed' },
+    { path: '/phpinfo.php',   name: 'phpinfo exposed' },
+    { path: '/server-status', name: 'Apache server-status' },
+    { path: '/actuator',      name: 'Spring actuator exposed' },
+    { path: '/graphql',       name: 'GraphQL introspection' },
+  ];
+  for (const s of sensitives) {
+    try {
+      const ctrl  = new AbortController();
+      const timer = setTimeout(() => ctrl.abort(), 4000);
+      const res   = await fetch(`${base}${s.path}`, { signal: ctrl.signal, redirect: 'manual' });
+      clearTimeout(timer);
+      const exposed = res.status === 200;
+      findings.push({
+        check: s.name, pass: !exposed, severity: exposed ? 'P0' : 'INFO',
+        category: 'information-disclosure',
+        detail: exposed ? `EXPOSED at ${base}${s.path}` : `Not exposed: ${s.path}`,
+        recommendation: exposed ? `Block access to ${s.path} immediately` : null,
+        evidence: { url: `${base}${s.path}`, status: res.status },
       });
+    } catch {}
+  }
 
-      for (const err of (result.consoleErrors || [])) {
-        this.#session.addBug({
-          title      : `JS Error: ${err.text?.slice(0, 80)}`,
-          severity   : err.type === 'error' ? 'P1' : 'P2',
-          type       : 'javascript',
-          description: err.text,
-          url        : route.url,
-          evidence   : err,
-        });
-      }
+  return findings;
+}
 
-      for (const nErr of (result.networkErrors || [])) {
-        this.#session.addBug({
-          title      : `Network Failure: ${nErr.url}`,
-          severity   : 'P2',
-          type       : 'network',
-          description: `${nErr.method} ${nErr.url} → ${nErr.failure}`,
-          url        : route.url,
-          evidence   : nErr,
-        });
-      }
+// ═══════════════════════════════════════════════════════════════════════════
+//  SEO Scanner
+// ═══════════════════════════════════════════════════════════════════════════
+async function runSEOScan(url) {
+  const t0   = Date.now();
+  const r    = await httpProbe(url, { headers: { 'User-Agent': 'Googlebot/2.1 (+http://www.google.com/bot.html)' } });
+  const html = r.body || '';
+  const rt   = Date.now() - t0;
+  const checks = [];
+
+  const has = (p) => p.test(html);
+  const get = (p) => (html.match(p) || [])[1]?.trim() || null;
+
+  const title = get(/<title[^>]*>([^<]+)<\/title>/i);
+  checks.push({ name: 'Title tag', pass: !!title, severity: 'P1', category: 'meta',
+    detail: title ? `"${title.slice(0,60)}"` : 'Missing <title>', data: { title, length: title?.length },
+    recommendation: 'Add unique title (50-60 chars)' });
+
+  if (title) checks.push({ name: 'Title length', pass: title.length >= 30 && title.length <= 60,
+    severity: 'P2', category: 'meta', detail: `${title.length} chars (optimal 30-60)`,
+    recommendation: 'Keep title 30-60 chars' });
+
+  const desc = get(/<meta[^>]+name=["']description["'][^>]+content=["']([^"']+)["']/i)
+            || get(/<meta[^>]+content=["']([^"']+)["'][^>]+name=["']description["']/i);
+  checks.push({ name: 'Meta description', pass: !!desc, severity: 'P1', category: 'meta',
+    detail: desc ? `"${desc.slice(0,80)}"` : 'Missing meta description',
+    recommendation: 'Add meta description (120-160 chars)' });
+
+  const h1Count = (html.match(/<h1[^>]*>/gi) || []).length;
+  checks.push({ name: 'H1 tag', pass: h1Count === 1, severity: 'P1', category: 'structure',
+    detail: h1Count === 0 ? 'No H1' : h1Count > 1 ? `${h1Count} H1 tags (should be 1)` : '1 H1 ✓',
+    recommendation: 'Use exactly one H1 per page' });
+
+  const hasVP = has(/<meta[^>]+name=["']viewport["']/i);
+  checks.push({ name: 'Viewport meta', pass: hasVP, severity: 'P1', category: 'mobile',
+    detail: hasVP ? 'Viewport found' : 'Missing viewport meta',
+    recommendation: 'Add viewport meta tag' });
+
+  const lang = get(/<html[^>]+lang=["']([^"']+)["']/i);
+  checks.push({ name: 'HTML lang', pass: !!lang, severity: 'P1', category: 'accessibility-seo',
+    detail: lang ? `lang="${lang}"` : 'Missing lang attribute', recommendation: 'Add lang to <html>' });
+
+  const canonical = get(/<link[^>]+rel=["']canonical["'][^>]+href=["']([^"']+)["']/i);
+  checks.push({ name: 'Canonical link', pass: !!canonical, severity: 'P2', category: 'technical-seo',
+    detail: canonical ? `Canonical: ${canonical}` : 'Missing canonical',
+    recommendation: 'Add <link rel="canonical">' });
+
+  const ogOk = has(/<meta[^>]+property=["']og:title["']/i) && has(/<meta[^>]+property=["']og:description["']/i);
+  checks.push({ name: 'Open Graph tags', pass: ogOk, severity: 'P2', category: 'social',
+    detail: ogOk ? 'OG tags present' : 'Missing og:title or og:description',
+    recommendation: 'Add og:title, og:description, og:image' });
+
+  const imgTotal = (html.match(/<img[^>]*>/gi) || []).length;
+  const imgNoAlt = (html.match(/<img(?![^>]*\balt=)[^>]*>/gi) || []).length;
+  checks.push({ name: 'Images alt text', pass: imgNoAlt === 0, severity: 'P2', category: 'accessibility-seo',
+    detail: imgNoAlt === 0 ? `All ${imgTotal} images have alt` : `${imgNoAlt}/${imgTotal} missing alt`,
+    recommendation: 'Add alt text to all images' });
+
+  checks.push({ name: 'Server response time', pass: rt < 800, severity: rt > 2000 ? 'P1' : 'P2',
+    category: 'performance-seo', detail: `TTFB: ${rt}ms (Google: <800ms)`,
+    recommendation: 'Optimize TTFB with CDN and caching' });
+
+  const base = new URL(url).origin;
+  for (const [file, name] of [['/robots.txt','robots.txt'],['/sitemap.xml','sitemap.xml']]) {
+    try {
+      const rr = await httpProbe(`${base}${file}`, { timeout: 4000 });
+      checks.push({ name, pass: rr.ok, severity: 'P1', category: 'crawling',
+        detail: rr.ok ? `${name} accessible` : `${name} returned ${rr.status}`,
+        recommendation: `Ensure ${name} exists` });
+    } catch {
+      checks.push({ name, pass: false, severity: 'P2', category: 'crawling', detail: `${name} unreachable` });
+    }
+  }
 
-      if (result.forms?.length > 0) {
-        await this.#testForms(route.url, result.forms, result.page);
-      }
+  return { pass: checks.filter(c => !c.pass && c.severity !== 'P3').length === 0, checks, url, responseTime: rt };
+}
 
-      if (this.#isAuthPage(route.url)) {
-        await this.#testAuthFlow(route.url, result.page);
-      }
+// ═══════════════════════════════════════════════════════════════════════════
+//  Accessibility Scanner — HTML analysis
+// ═══════════════════════════════════════════════════════════════════════════
+async function runA11yScan(url) {
+  const r    = await httpProbe(url, { timeout: 12000 });
+  const html = r.body || '';
+  const violations = [], passes = [];
+
+  const checks = [
+    { id: 'html-lang',      impact: 'serious',  test: () => !/<html[^>]+lang=["'][^"']+["']/i.test(html),     pass: 'HTML lang present',    desc: 'HTML must have lang attribute' },
+    { id: 'img-alt',        impact: 'critical', test: () => /<img(?![^>]*\balt=)[^>]*>/i.test(html),           pass: 'Images have alt text', desc: 'Images must have alternate text' },
+    { id: 'document-title', impact: 'serious',  test: () => !/<title[^>]*>[^<]+<\/title>/i.test(html),        pass: 'Document has title',   desc: 'Document must have title' },
+    { id: 'viewport',       impact: 'critical', test: () => /user-scalable=no|maximum-scale=1/i.test(html),   pass: 'Viewport allows scaling', desc: 'Viewport must not disable scaling' },
+    { id: 'main-landmark',  impact: 'moderate', test: () => !/<main[^>]*>/i.test(html),                        pass: 'Main landmark present', desc: 'Page should have <main>' },
+    { id: 'h1-present',     impact: 'moderate', test: () => !/<h1[^>]*>/i.test(html),                          pass: 'H1 heading present',   desc: 'Page should have H1' },
+    { id: 'link-text',      impact: 'serious',  test: () => /<a[^>]*>\s*<\/a>/i.test(html),                   pass: 'Links have text',      desc: 'Links must have discernible text' },
+    { id: 'form-labels',    impact: 'critical', test: () => /<input(?![^>]*(?:aria-label|aria-labelledby|id=))[^>]*type=(?!"hidden")[^>]*>/i.test(html), pass: 'Form inputs have labels', desc: 'Form elements must have labels' },
+  ];
+
+  for (const c of checks) {
+    if (c.test()) {
+      violations.push({ id: c.id, description: c.desc, help: c.desc, impact: c.impact,
+        tags: ['wcag2a'], category: 'wcag2a', nodes: 1, affectedNodes: [],
+        helpUrl: `https://dequeuniversity.com/rules/axe/4.9/${c.id}` });
+    } else {
+      passes.push({ id: c.id, description: c.pass, nodes: 1 });
     }
   }
 
-  // ── Phase 4: Security ─────────────────────────────────────────────────
-  async #phaseSecurityScan() {
-    for (const [label, url] of Object.entries(this.#session.urls)) {
-      if (!url) continue;
+  const score = passes.length > 0 ? Math.round(passes.length / (passes.length + violations.length) * 100) : 0;
+  return { pass: violations.length === 0, violations, passes, incomplete: [], score, url, mode: 'http-html-analysis' };
+}
 
-      const findings = await this.#security.scan(url);
-      this.#session.secFindings.push(...findings);
-
-      for (const finding of findings) {
-        this.#addResult({
-          name    : `Security: ${finding.check}`,
-          type    : 'security',
-          category: finding.category,
-          status  : finding.pass ? 'PASS' : 'FAIL',
-          message : finding.detail,
-          data    : finding.evidence,
-          url, label,
-          severity: finding.severity,
-        });
+// ═══════════════════════════════════════════════════════════════════════════
+//  AI Bug Classifier
+// ═══════════════════════════════════════════════════════════════════════════
+const SEV_PATTERNS = {
+  P0: [/security|auth.*bypass|sql.inject|xss|rce|exposed.*secret|password.*leak|critical/i, /crash|fatal|500|server.*down|data.*loss/i],
+  P1: [/login.*fail|auth.*error|jwt|token.*invalid|api.*timeout|cors.*error/i, /lcp|performance.*poor|wcag.*critical|a11y.*serious/i],
+  P2: [/console.*error|js.*error|network.*fail|404|missing.*meta|seo.*issue/i],
+  P3: [/warning|minor|style|typo|cosmetic/i],
+};
+const CAT_PATTERNS = {
+  security    : /security|csp|hsts|cors|xss|injection|auth|token/i,
+  performance : /lcp|fcp|cls|ttfb|slow|timeout|render/i,
+  accessibility: /wcag|a11y|aria|alt.*text|contrast|keyboard/i,
+  seo         : /title|meta|description|canonical|sitemap|robots/i,
+  api         : /api|endpoint|status.*code|response|rest/i,
+  javascript  : /js.*error|console.*error|uncaught|undefined|null/i,
+  network     : /network|fetch|connection|request.*fail/i,
+};
+function classifyBug(bug) {
+  const text = `${bug.title} ${bug.description || ''}`;
+  let severity = bug.severity || 'P3', confidence = 0.7;
+  for (const [sev, pats] of Object.entries(SEV_PATTERNS)) {
+    if (pats.some(p => p.test(text))) { severity = sev; confidence = 0.85; break; }
+  }
+  let category = bug.type || 'general';
+  for (const [cat, pat] of Object.entries(CAT_PATTERNS)) {
+    if (pat.test(text)) { category = cat; break; }
+  }
+  const recs = {
+    security     : 'Review security config and run penetration test',
+    performance  : 'Run Lighthouse and optimize assets/server',
+    accessibility: 'Fix WCAG 2.1 AA violations with aXe DevTools',
+    seo          : 'Fix meta tags and submit sitemap to Search Console',
+    api          : 'Check API contract and add proper error handling',
+    javascript   : 'Debug in browser DevTools, add error boundaries',
+    network      : 'Check CDN, server logs, network config',
+  };
+  return { severity, category, recommendation: recs[category] || 'Review error details', confidence };
+}
 
-        if (!finding.pass && (finding.severity === 'P0' || finding.severity === 'P1')) {
-          this.#session.addBug({
-            title         : `Security: ${finding.check}`,
-            severity      : finding.severity,
-            type          : 'security',
-            description   : finding.detail,
-            url,
-            evidence      : finding.evidence,
-            recommendation: finding.recommendation,
-          });
-        }
-      }
-    }
+// ═══════════════════════════════════════════════════════════════════════════
+//  Terminal Dashboard
+// ═══════════════════════════════════════════════════════════════════════════
+class TerminalDashboard {
+  #session; #lines = 0; #active = false; #timer = null;
+  #phase = 'Initializing...'; #currentTest = ''; #log = []; #startTime = Date.now();
+  #pwMode = false;
+
+  constructor(s) { this.#session = s; this.#pwMode = s.playwrightMode; }
+
+  start() {
+    this.#active = true; this.#startTime = Date.now();
+    process.stdout.write('\x1b[?25l');
+    this.#render();
+    this.#timer = setInterval(() => this.#render(), 600);
   }
 
-  // ── Phase 5: Performance ──────────────────────────────────────────────
-  async #phasePerformance() {
-    for (const [label, url] of Object.entries(this.#session.urls)) {
-      if (!url) continue;
+  stop() {
+    this.#active = false;
+    if (this.#timer) { clearInterval(this.#timer); this.#timer = null; }
+    this.#clear();
+    process.stdout.write('\x1b[?25h');
+    this.#printFinal();
+  }
 
-      const metrics = await this.#performance.profile(url);
-      this.#session.perfMetrics[label] = metrics;
-
-      const vitals = [
-        { name: 'LCP',  value: metrics.lcp,  threshold: 2500, unit: 'ms' },
-        { name: 'FID',  value: metrics.fid,  threshold: 100,  unit: 'ms' },
-        { name: 'CLS',  value: metrics.cls,  threshold: 0.1,  unit: ''   },
-        { name: 'FCP',  value: metrics.fcp,  threshold: 1800, unit: 'ms' },
-        { name: 'TTFB', value: metrics.ttfb, threshold: 800,  unit: 'ms' },
-        { name: 'TBT',  value: metrics.tbt,  threshold: 200,  unit: 'ms' },
-      ];
-
-      for (const vital of vitals) {
-        const na   = vital.value === null || vital.value === undefined;
-        const pass = !na && vital.value <= vital.threshold;
-
-        this.#addResult({
-          name    : `[${label}] ${vital.name} — Core Web Vital`,
-          type    : 'performance',
-          category: 'web-vitals',
-          status  : na ? 'SKIP' : (pass ? 'PASS' : 'FAIL'),
-          message : na
-            ? `${vital.name} not measurable (HTTP-only mode)`
-            : `${vital.name}: ${vital.value}${vital.unit} (threshold: ≤${vital.threshold}${vital.unit})`,
-          data    : { value: vital.value, threshold: vital.threshold },
-          url, label,
-          duration: vital.value,
-        });
+  setPhase(p)       { this.#phase = p; this.log(chalk.cyan(p)); }
+  setCurrentTest(t) { this.#currentTest = t; }
+  addResult()       { this.#currentTest = ''; }
+  log(msg) {
+    this.#log.push(`${chalk.gray(new Date().toLocaleTimeString())} ${msg}`);
+    if (this.#log.length > 8) this.#log.shift();
+  }
 
-        if (!na && !pass) {
-          this.#session.addBug({
-            title         : `Poor ${vital.name}: ${vital.value}${vital.unit} (>${vital.threshold}${vital.unit})`,
-            severity      : (vital.name === 'LCP' || vital.name === 'CLS') ? 'P1' : 'P2',
-            type          : 'performance',
-            description   : `${vital.name} exceeds threshold on ${label}`,
-            url,
-            evidence      : { value: vital.value, threshold: vital.threshold },
-            recommendation: `Optimize ${vital.name} — see https://web.dev/vitals`,
-          });
-        }
-      }
+  #render() {
+    if (!this.#active) return;
+    this.#clear();
+    const lines = this.#build();
+    this.#lines  = lines.length;
+    process.stdout.write(lines.join('\n') + '\n');
+  }
 
-      for (const resource of (metrics.slowResources || [])) {
-        this.#addResult({
-          name    : `[${label}] Slow resource: ${resource.url?.split('/').pop()}`,
-          type    : 'performance',
-          category: 'resource',
-          status  : 'FAIL',
-          message : `${resource.url} took ${resource.duration}ms (${formatBytes(resource.size)})`,
-          data    : resource,
-          url, label,
-          duration: resource.duration,
-        });
-      }
+  #clear() {
+    if (this.#lines > 0) {
+      process.stdout.write(`\x1b[${this.#lines}A`);
+      for (let i = 0; i < this.#lines; i++) process.stdout.write('\x1b[2K\n');
+      process.stdout.write(`\x1b[${this.#lines}A`);
     }
+    this.#lines = 0;
   }
 
-  // ── Phase 6: Accessibility ────────────────────────────────────────────
-  async #phaseAccessibility() {
-    const pageRoutes = this.#session.routeMap
-      .filter(r => r.type === 'page' || r.type === 'unknown')
-      .slice(0, 15);
-
-    for (const route of pageRoutes) {
-      if (this.#aborted) break;
-      this.#terminal.setCurrentTest(`A11y: ${route.url}`);
-
-      const result = await this.#a11y.check(route.url);
-      this.#session.a11yResults.push({ url: route.url, ...result });
-
-      for (const violation of (result.violations || [])) {
-        this.#addResult({
-          name    : `A11y [${violation.impact}]: ${violation.description}`,
-          type    : 'accessibility',
-          category: violation.category || 'wcag',
-          status  : 'FAIL',
-          message : `${violation.nodes} element(s) affected — ${violation.help}`,
-          data    : {
-            impact  : violation.impact,
-            wcagTags: violation.tags,
-            nodes   : violation.affectedNodes,
-            helpUrl : violation.helpUrl,
-          },
-          url     : route.url,
-          severity: violation.impact === 'critical' ? 'P0'
-                  : violation.impact === 'serious'  ? 'P1'
-                  : violation.impact === 'moderate' ? 'P2' : 'P3',
-        });
-
-        if (violation.impact === 'critical' || violation.impact === 'serious') {
-          this.#session.addBug({
-            title         : `A11y: ${violation.description}`,
-            severity      : violation.impact === 'critical' ? 'P0' : 'P1',
-            type          : 'accessibility',
-            description   : `${violation.nodes} element(s): ${violation.help}`,
-            url           : route.url,
-            evidence      : violation.affectedNodes,
-            recommendation: violation.helpUrl,
-          });
-        }
-      }
+  #build() {
+    const s       = this.#session;
+    const elapsed = ((Date.now() - this.#startTime) / 1000).toFixed(1);
+    const passed  = s.results.filter(r => r.status === 'PASS' || r.status === 'FLAKY').length;
+    const failed  = s.results.filter(r => r.status === 'FAIL').length;
+    const total   = s.results.length;
+    const rate    = total > 0 ? Math.round(passed / total * 100) : 0;
+    const heapMB  = (process.memoryUsage().heapUsed / 1024 / 1024).toFixed(0);
+    const w       = Math.min(process.stdout.columns || 80, 88);
+    const bar     = '─'.repeat(w - 2);
+    const c1      = chalk.hex('#00F5FF');
+    const c2      = chalk.hex('#BF40FF');
+    const pad     = (s, n = w - 2) => String(s).slice(0, n).padEnd(n);
+    const pwTag   = this.#pwMode ? chalk.hex('#BF40FF')(' 🎭 PLAYWRIGHT') : chalk.gray(' HTTP');
+
+    const pBar = (() => {
+      const f   = Math.min(Math.round(rate / 100 * 26), 26);
+      const col = rate >= 90 ? chalk.green : rate >= 70 ? chalk.yellow : chalk.red;
+      return col('█'.repeat(f)) + chalk.gray('░'.repeat(26 - f));
+    })();
+
+    const out = [
+      c1(`┌${bar}┐`),
+      c1('│') + c2.bold(pad(`  ⚡ BACKLIST QA v${VERSION} — REAL BROWSER TESTING${pwTag}`)) + c1('│'),
+      c1(`├${bar}┤`),
+      c1('│') + pad(`  ${chalk.cyan('Phase:')} ${chalk.white(this.#phase.slice(0, w - 14))}`) + c1('│'),
+      c1(`├${bar}┤`),
+      c1('│') + pad(`  ${chalk.green('✓')} ${chalk.bold(passed)} passed  ${chalk.red('✗')} ${chalk.bold(failed)} failed  ${chalk.cyan('🐛')} ${chalk.bold(s.bugs.length)} bugs  ${chalk.gray('⏱')} ${chalk.white(elapsed + 's')}  ${chalk.gray('Heap')} ${chalk.white(heapMB + 'MB')}`) + c1('│'),
+      c1('│') + pad(`  [${pBar}] ${chalk.bold(rate + '%')} (${total} tests)`) + c1('│'),
+      c1(`├${bar}┤`),
+      c1('│') + pad(this.#currentTest ? `  ${chalk.yellow('⟳')} ${chalk.yellow(this.#currentTest.slice(0, w - 8))}` : `  ${chalk.gray('⊙  Running...')}`) + c1('│'),
+      c1(`├${bar}┤`),
+      c1('│') + pad(`  ${chalk.cyan('Routes:')} ${chalk.white(s.routeMap.length)}  ${chalk.cyan('Screenshots:')} ${chalk.white(s.screenshots.length)}  ${chalk.cyan('Bugs:')} ${chalk.white(s.bugs.length)}  ${chalk.cyan('Net Errors:')} ${chalk.white(s.networkLog.length)}`) + c1('│'),
+      c1(`├${bar}┤`),
+    ];
+
+    const recent = s.results.slice(-5);
+    for (const r of recent) {
+      const icon = r.status === 'PASS' ? chalk.green('✓') : r.status === 'FAIL' ? chalk.red('✗') : chalk.yellow('⚠');
+      out.push(c1('│') + pad(`  ${icon} ${chalk.gray('[' + (r.type||'').padEnd(12) + ']')} ${chalk.white((r.name||'').slice(0, w - 30))}`) + c1('│'));
+    }
+    for (let i = recent.length; i < 5; i++) out.push(c1('│') + pad('') + c1('│'));
 
-      for (const pass of (result.passes || []).slice(0, 5)) {
-        this.#addResult({
-          name    : `A11y Pass: ${pass.description}`,
-          type    : 'accessibility',
-          category: 'wcag',
-          status  : 'PASS',
-          message : `${pass.nodes} element(s) verified`,
-          data    : pass,
-          url     : route.url,
-        });
-      }
+    out.push(c1(`├${bar}┤`));
+    for (const entry of this.#log.slice(-4)) {
+      out.push(c1('│') + ('  ' + entry).slice(0, w - 2).padEnd(w - 2) + c1('│'));
     }
+    for (let i = this.#log.length; i < 4; i++) out.push(c1('│') + pad('') + c1('│'));
+    out.push(c1(`└${bar}┘`));
+    out.push(chalk.dim(`  Real browser data · ${total} tests · ${s.bugs.length} bugs · Ctrl+C to stop`));
+
+    return out;
   }
 
-  // ── Phase 7: SEO ──────────────────────────────────────────────────────
-  async #phaseSEO() {
-    const pageRoutes = this.#session.routeMap
-      .filter(r => r.type === 'page' || r.type === 'unknown')
-      .slice(0, 20);
+  #printFinal() {
+    const s   = this.#session.getSummary();
+    const col = Number(s.passRate) >= 90 ? chalk.green : Number(s.passRate) >= 70 ? chalk.yellow : chalk.red;
+    console.log('');
+    console.log(chalk.hex('#00F5FF').bold('  ── QA Complete ──────────────────────────────────────'));
+    console.log(`  Tests:       ${chalk.white.bold(s.total)}`);
+    console.log(`  Passed:      ${chalk.green.bold(s.passed)}`);
+    console.log(`  Failed:      ${chalk.red.bold(s.failed)}`);
+    console.log(`  Pass rate:   ${col.bold(s.passRate + '%')}`);
+    console.log(`  Bugs found:  ${chalk.cyan.bold(this.#session.bugs.length)}`);
+    console.log(`  Screenshots: ${chalk.white(this.#session.screenshots.length)}`);
+    console.log(`  Duration:    ${chalk.white(formatDuration(s.duration))}`);
+    console.log(`  Mode:        ${this.#pwMode ? chalk.hex('#BF40FF').bold('🎭 Playwright (Real Browser)') : chalk.gray('HTTP-only')}`);
+    console.log('');
+  }
+}
 
-    for (const route of pageRoutes) {
-      if (this.#aborted) break;
-      this.#terminal.setCurrentTest(`SEO: ${route.url}`);
-
-      const result = await this.#seo.scan(route.url);
-      this.#session.seoResults.push({ url: route.url, ...result });
-
-      for (const check of (result.checks || [])) {
-        this.#addResult({
-          name    : `SEO: ${check.name} — ${new URL(route.url).pathname}`,
-          type    : 'seo',
-          category: check.category,
-          status  : check.pass ? 'PASS' : 'FAIL',
-          message : check.detail,
-          data    : check.data,
-          url     : route.url,
-          severity: check.severity,
-        });
+// ═══════════════════════════════════════════════════════════════════════════
+//  HTML Report Builder — v13, Dark Theme, Screenshot Gallery + Vitals
+// ═══════════════════════════════════════════════════════════════════════════
+function buildHTMLReport(session) {
+  const summary   = session.getSummary();
+  const passRate  = Number(summary.passRate);
+  const rateColor = passRate >= 90 ? '#22c55e' : passRate >= 70 ? '#f59e0b' : '#ef4444';
+
+  const sevCounts = { P0: 0, P1: 0, P2: 0, P3: 0 };
+  session.bugs.forEach(b => {
+    const key = b.aiSeverity || b.severity;
+    if (sevCounts[key] !== undefined) sevCounts[key]++;
+  });
 
-        if (!check.pass && (check.severity === 'P0' || check.severity === 'P1')) {
-          this.#session.addBug({
-            title         : `SEO: ${check.name}`,
-            severity      : check.severity,
-            type          : 'seo',
-            description   : check.detail,
-            url           : route.url,
-            recommendation: check.recommendation,
-          });
-        }
-      }
-    }
+  const coverage = {};
+  for (const r of session.results) {
+    if (!coverage[r.type]) coverage[r.type] = { pass: 0, fail: 0 };
+    if (r.status === 'PASS' || r.status === 'FLAKY') coverage[r.type].pass++;
+    else if (r.status === 'FAIL') coverage[r.type].fail++;
   }
 
-  // ── Phase 8: AI Classification ────────────────────────────────────────
-  async #phaseAIClassification() {
-    this.#terminal.log(`AI classifying ${this.#session.bugs.length} bugs...`);
+  const esc = (s) => String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+
+  // ── Screenshot gallery ───────────────────────────────────────────────────
+  const screenshotCards = session.screenshots.length
+    ? session.screenshots.map(sc => {
+        // Embed screenshot as base64 if possible, else show path
+        let imgTag = '';
+        try {
+          const data = fs.readFileSync(sc.path);
+          const b64  = data.toString('base64');
+          imgTag     = `<img src="data:image/png;base64,${b64}" alt="${esc(sc.type)} screenshot" loading="lazy">`;
+        } catch {
+          imgTag = `<div class="no-img">Screenshot: ${esc(sc.name)}</div>`;
+        }
+        return `
+        <div class="screenshot-card">
+          <div class="sc-header">
+            <span class="sc-type">${esc(sc.type)}</span>
+            <span class="sc-url">${esc(sc.url || '')}</span>
+          </div>
+          <div class="sc-img-wrap">${imgTag}</div>
+          <div class="sc-path">${esc(sc.path)}</div>
+        </div>`;
+      }).join('')
+    : '<p class="no-data">No screenshots (Playwright not available)</p>';
+
+  // ── Test rows ─────────────────────────────────────────────────────────────
+  const testRows = session.results.map(r => `
+    <tr class="result-row" data-type="${r.type}" data-status="${r.status}">
+      <td>${esc(r.name)}</td>
+      <td><span class="badge">${r.type}</span></td>
+      <td><span class="status status-${(r.status||'').toLowerCase()}">${r.status}</span></td>
+      <td>${r.severity ? `<span class="sev sev-${(r.severity||'').toLowerCase()}">${r.severity}</span>` : '–'}</td>
+      <td>${r.duration ? formatDuration(r.duration) : '–'}</td>
+      <td class="err-cell">${r.message ? `<details><summary>Details</summary><pre>${esc(String(r.message).slice(0,500))}</pre></details>` : '✓'}</td>
+    </tr>`).join('');
+
+  // ── Bug cards ─────────────────────────────────────────────────────────────
+  const bugCards = session.bugs.length
+    ? session.bugs.map(b => `
+    <div class="bug-card sev-border-${(b.aiSeverity||b.severity||'p3').toLowerCase()}" data-severity="${b.aiSeverity||b.severity}">
+      <div class="bug-header">
+        <span class="bug-id">${esc(b.id)}</span>
+        <span class="sev sev-${(b.aiSeverity||b.severity||'p3').toLowerCase()}">${b.aiSeverity||b.severity}</span>
+        <span class="badge">${b.type||'general'}</span>
+        ${b.aiConfidence ? `<span class="ai-badge">🤖 ${Math.round((b.aiConfidence||0)*100)}%</span>` : ''}
+      </div>
+      <div class="bug-title">${esc(b.title)}</div>
+      ${b.url ? `<div class="bug-url"><a href="${esc(b.url)}" target="_blank">${esc(b.url)}</a></div>` : ''}
+      ${b.aiRecommendation ? `<div class="bug-rec">💡 ${esc(b.aiRecommendation)}</div>` : ''}
+      ${b.evidence ? `<details><summary>Evidence</summary><pre>${esc(JSON.stringify(b.evidence,null,2).slice(0,800))}</pre></details>` : ''}
+    </div>`).join('')
+    : '<p class="no-data">No bugs detected 🎉</p>';
+
+  // ── Route rows ────────────────────────────────────────────────────────────
+  const routeRows = session.routeMap.map(r => `
+    <tr>
+      <td><code class="url">${esc(r.url)}</code></td>
+      <td><span class="badge">${r.type}</span></td>
+      <td class="${r.status >= 400 ? 'fail' : 'pass'}">${r.status || '–'}</td>
+      <td>${r.forms?.length || 0}</td>
+      <td>${r.error ? `<span class="fail">${esc(r.error)}</span>` : '✓'}</td>
+    </tr>`).join('');
+
+  // ── Security rows ─────────────────────────────────────────────────────────
+  const secRows = session.secFindings.map(f => `
+    <tr class="${f.pass ? '' : 'fail-row'}">
+      <td>${esc(f.check)}</td>
+      <td><span class="badge">${f.category}</span></td>
+      <td><span class="status ${f.pass ? 'status-pass' : 'status-fail'}">${f.pass?'PASS':'FAIL'}</span></td>
+      <td>${f.severity !== 'INFO' ? `<span class="sev sev-${(f.severity||'').toLowerCase()}">${f.severity}</span>` : '–'}</td>
+      <td>${esc((f.detail||'').slice(0,120))}</td>
+      <td>${f.recommendation ? `<span class="rec">${esc(f.recommendation)}</span>` : '–'}</td>
+    </tr>`).join('');
+
+  // ── SEO section ───────────────────────────────────────────────────────────
+  const seoSection = session.seoResults.map(r => `
+    <div class="seo-page">
+      <div class="seo-header">
+        <a href="${esc(r.url)}" target="_blank">${esc(r.url)}</a>
+        <span>${r.checks.filter(c=>c.pass).length}/${r.checks.length} passed</span>
+      </div>
+      <table>
+        <thead><tr><th>Check</th><th>Category</th><th>Status</th><th>Detail</th></tr></thead>
+        <tbody>${(r.checks||[]).map(c => `<tr>
+          <td>${esc(c.name)}</td><td>${c.category||'–'}</td>
+          <td><span class="status ${c.pass?'status-pass':'status-fail'}">${c.pass?'PASS':'FAIL'}</span></td>
+          <td>${esc((c.detail||'').slice(0,100))}</td>
+        </tr>`).join('')}</tbody>
+      </table>
+    </div>`).join('') || '<p class="no-data">No SEO scans</p>';
+
+  // ── A11y section ──────────────────────────────────────────────────────────
+  const a11ySection = session.a11yResults.map(r => `
+    <div class="a11y-page">
+      <div class="a11y-header">
+        <a href="${esc(r.url)}" target="_blank">${esc(r.url)}</a>
+        <span>Score: <strong>${r.score??'–'}%</strong></span>
+        <span class="${r.pass?'pass':'fail'}">${r.violations?.length||0} violations</span>
+      </div>
+      ${(r.violations||[]).map(v => `
+        <div class="violation impact-${v.impact}">
+          <div class="violation-header">
+            <span class="impact-badge">${v.impact}</span>
+            <strong>${esc(v.description)}</strong>
+          </div>
+          <p>${esc(v.help)}</p>
+        </div>`).join('') || '<p class="no-data">No violations ✓</p>'}
+    </div>`).join('') || '<p class="no-data">No accessibility scans</p>';
+
+  // ── Performance section ───────────────────────────────────────────────────
+  const vitalCard = (name, value, threshold, unit) => {
+    const na    = value === null || value === undefined;
+    const pass2 = !na && value <= threshold;
+    const cls   = na ? 'vital-na' : pass2 ? 'vital-pass' : 'vital-fail';
+    const color = na ? '#64748b' : pass2 ? '#22c55e' : '#ef4444';
+    const disp  = na ? 'N/A' : `${Number(value).toFixed(name==='CLS'?3:0)}${unit}`;
+    return `<div class="vital-card ${cls}">
+      <div class="vital-label">${name}</div>
+      <div class="vital-value" style="color:${color}">${disp}</div>
+      <div class="vital-threshold">≤${threshold}${unit}</div>
+    </div>`;
+  };
 
-    for (const bug of this.#session.bugs) {
-      const classification = await this.#aiClassifier.classify(bug, this.#session);
-      bug.aiSeverity       = classification.severity;
-      bug.aiCategory       = classification.category;
-      bug.aiRecommendation = classification.recommendation;
-      bug.aiConfidence     = classification.confidence;
-    }
+  const perfSection = Object.entries(session.perfMetrics).map(([label, m]) => {
+    const slowResHtml = (m.slowResources||[]).length ? `
+      <h4 style="color:#f87171;margin-top:1rem">Slow Resources</h4>
+      <table><thead><tr><th>URL</th><th>Time</th><th>Size</th></tr></thead>
+      <tbody>${m.slowResources.map(r => `<tr>
+        <td class="url">${esc((r.url||'').split('/').pop())}</td>
+        <td class="fail">${r.duration}ms</td>
+        <td>${formatBytes(r.size)}</td>
+      </tr>`).join('')}</tbody></table>` : '';
+
+    const resourceTableHtml = m.resourceStats?.byType ? `
+      <h4 style="color:#94a3b8;margin-top:1.5rem">Resource Breakdown</h4>
+      <table><thead><tr><th>Type</th><th>Count</th><th>Total Size</th><th>Total Time</th></tr></thead>
+      <tbody>${Object.entries(m.resourceStats.byType).map(([t, d]) => `<tr>
+        <td><span class="badge">${esc(t)}</span></td>
+        <td>${d.count}</td>
+        <td>${formatBytes(d.size)}</td>
+        <td>${Math.round(d.time)}ms</td>
+      </tr>`).join('')}</tbody></table>` : '';
+
+    const domChecksHtml = m.domChecks?.length ? `
+      <h4 style="color:#94a3b8;margin-top:1.5rem">DOM Checks</h4>
+      <table><thead><tr><th>Check</th><th>Status</th><th>Value</th></tr></thead>
+      <tbody>${m.domChecks.map(c => `<tr>
+        <td>${esc(c.name)}</td>
+        <td><span class="status ${c.pass?'status-pass':'status-fail'}">${c.pass?'PASS':'FAIL'}</span></td>
+        <td>${esc(c.value||'')}</td>
+      </tr>`).join('')}</tbody></table>` : '';
+
+    const interactionsHtml = m.interactions?.length ? `
+      <h4 style="color:#94a3b8;margin-top:1.5rem">Interaction Tests</h4>
+      <table><thead><tr><th>Test</th><th>Status</th><th>Value</th></tr></thead>
+      <tbody>${m.interactions.map(i => `<tr>
+        <td>${esc(i.name)}</td>
+        <td><span class="status ${i.pass?'status-pass':'status-fail'}">${i.pass?'PASS':'FAIL'}</span></td>
+        <td>${esc(i.value||'')}</td>
+      </tr>`).join('')}</tbody></table>` : '';
+
+    return `
+    <div class="perf-card">
+      <h3>${esc(label)} ${m.playwrightMode ? '<span class="pw-badge">🎭 Playwright</span>' : ''}</h3>
+      <div class="vitals-grid">
+        ${vitalCard('TTFB', m.ttfb,    800,  'ms')}
+        ${vitalCard('LCP',  m.lcp,     2500, 'ms')}
+        ${vitalCard('FCP',  m.fcp,     1800, 'ms')}
+        ${vitalCard('CLS',  m.cls,     0.1,  '')}
+        ${vitalCard('TBT',  m.tbt,     200,  'ms')}
+        ${vitalCard('DOM Load', m.domLoad, 3000, 'ms')}
+        ${vitalCard('DNS', m.dnsLookup, 100, 'ms')}
+      </div>
+      ${m.note ? `<p class="perf-note">ℹ️ ${esc(m.note)}</p>` : ''}
+      ${slowResHtml}
+      ${resourceTableHtml}
+      ${domChecksHtml}
+      ${interactionsHtml}
+    </div>`;
+  }).join('') || '<p class="no-data">No performance data</p>';
+
+  // ── Console errors table ──────────────────────────────────────────────────
+  const consoleSection = session.consoleErrors.length
+    ? `<table>
+        <thead><tr><th>Type</th><th>Message</th><th>URL</th></tr></thead>
+        <tbody>${session.consoleErrors.slice(0, 100).map(e => `<tr>
+          <td><span class="badge">${esc(e.type)}</span></td>
+          <td>${esc(e.text?.slice(0, 200) || '')}</td>
+          <td class="url">${esc(e.url || '')}</td>
+        </tr>`).join('')}</tbody>
+      </table>`
+    : '<p class="no-data">No console errors 🎉</p>';
+
+  // ── Network failures table ────────────────────────────────────────────────
+  const networkSection = session.networkLog.length
+    ? `<table>
+        <thead><tr><th>URL</th><th>Method</th><th>Failure</th></tr></thead>
+        <tbody>${session.networkLog.slice(0, 100).map(e => `<tr>
+          <td class="url">${esc(e.url || '')}</td>
+          <td>${esc(e.method || '')}</td>
+          <td class="fail">${esc(e.failure || e.error || `HTTP ${e.status}`)}</td>
+        </tr>`).join('')}</tbody>
+      </table>`
+    : '<p class="no-data">No network failures 🎉</p>';
+
+  const urlsStr    = Object.entries(session.urls).filter(([,v])=>v)
+    .map(([k,v]) => `<div class="url-card"><span class="url-label">${k}</span><a href="${esc(v)}" target="_blank">${esc(v)}</a></div>`).join('');
+
+  const chartTypes  = JSON.stringify(Object.keys(coverage));
+  const chartPass2  = JSON.stringify(Object.values(coverage).map(c=>c.pass));
+  const chartFail2  = JSON.stringify(Object.values(coverage).map(c=>c.fail));
+  const bugSevData  = JSON.stringify([sevCounts.P0, sevCounts.P1, sevCounts.P2, sevCounts.P3]);
+  const pwBadge     = session.playwrightMode
+    ? '<span style="background:#1a1a3b;color:#c084fc;border:1px solid #bf40ff44;padding:3px 10px;border-radius:20px;font-size:.7rem">🎭 Playwright</span>'
+    : '<span style="background:#1e293b;color:#64748b;padding:3px 10px;border-radius:20px;font-size:.7rem">HTTP-only</span>';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Backlist QA Report — ${esc(session.id)}</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap');
+:root{--bg:#060610;--surface:#0f0f1e;--border:#1e1e3a;--text:#e2e8f0;--dim:#4a5568;--cyan:#00f5ff;--purple:#bf40ff;--green:#22c55e;--red:#ef4444;--yellow:#f59e0b}
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:'Syne',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;min-height:100vh}
+a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
+header{background:linear-gradient(135deg,#0a0a1a,#12122a);border-bottom:1px solid #00f5ff22;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:flex-start;position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
+.logo{font-size:1.4rem;font-weight:800;background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
+.header-meta{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--dim);margin-top:.25rem}
+nav{background:var(--surface);border-bottom:1px solid var(--border);padding:0 2rem;display:flex;overflow-x:auto;gap:0}
+.nav-tab{padding:.75rem 1.25rem;border:none;background:none;color:var(--dim);cursor:pointer;font-size:.82rem;border-bottom:2px solid transparent;white-space:nowrap;transition:.2s;font-family:'Syne',sans-serif}
+.nav-tab.active,.nav-tab:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
+.container{max-width:1400px;margin:0 auto;padding:2rem}
+.tab-panel{display:none}.tab-panel.active{display:block}
+.pw-banner{background:rgba(191,64,255,.08);border:1px solid #bf40ff44;border-radius:8px;padding:.75rem 1rem;margin-bottom:1.5rem;font-size:.83rem;color:#c084fc;display:flex;align-items:center;gap:.5rem}
+.real-banner{background:rgba(0,245,255,.06);border:1px solid #00f5ff33;border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.83rem;color:var(--cyan);display:flex;align-items:center;gap:.5rem}
+.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin-bottom:1.5rem}
+.mc{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem;transition:.2s;cursor:default}
+.mc:hover{border-color:var(--cyan);transform:translateY(-2px)}
+.ml{font-size:.65rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
+.mv{font-size:1.8rem;font-weight:800;margin-top:4px;font-family:'JetBrains Mono',monospace}
+.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.5rem;margin-bottom:1rem}
+.card-title{font-size:.9rem;font-weight:700;color:#cbd5e1;border-bottom:1px solid var(--border);padding-bottom:.75rem;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center}
+.chart-wrap{position:relative;height:240px}
+.search-bar{display:flex;gap:.75rem;margin-bottom:1.25rem}
+.search-bar input,.search-bar select{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:.5rem .75rem;border-radius:6px;font-size:.83rem;flex:1;font-family:'Syne',sans-serif}
+table{width:100%;border-collapse:collapse;font-size:.8rem}
+th{text-align:left;color:var(--dim);font-weight:600;padding:.5rem .75rem;border-bottom:1px solid var(--border);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
+td{padding:.45rem .75rem;border-bottom:1px solid #0f0f1e;vertical-align:top;word-break:break-word}
+tr.fail-row td{background:rgba(239,68,68,.04)}
+.pass{color:var(--green)}.fail{color:var(--red)}
+.status{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:700;font-family:'JetBrains Mono',monospace}
+.status-pass{background:#064e3b;color:#34d399}.status-fail{background:#450a0a;color:#f87171}.status-flaky{background:#422006;color:#fbbf24}.status-skip{background:#1e293b;color:#94a3b8}
+.sev{padding:2px 7px;border-radius:3px;font-size:.7rem;font-weight:800}
+.sev-p0{background:#450a0a;color:#f87171}.sev-p1{background:#422006;color:#fbbf24}.sev-p2{background:#1e3a5f;color:#60a5fa}.sev-p3{background:#1e293b;color:#94a3b8}
+.badge{display:inline-block;padding:1px 7px;border-radius:3px;font-size:.7rem;background:#1e293b;color:#94a3b8}
+.pw-badge{display:inline-block;padding:1px 7px;border-radius:3px;font-size:.7rem;background:#1a1a3b;color:#c084fc;border:1px solid #bf40ff44}
+.url{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--cyan);word-break:break-all}
+code{font-family:'JetBrains Mono',monospace;font-size:.75rem;background:#0f1a2e;padding:2px 6px;border-radius:3px;color:#93c5fd}
+pre{white-space:pre-wrap;word-break:break-all;font-size:.73rem;padding:.75rem;background:#080814;border-radius:6px;overflow-x:auto;max-height:300px;font-family:'JetBrains Mono',monospace}
+details summary{cursor:pointer;color:var(--cyan);font-size:.78rem;user-select:none}
+.bug-card{border-radius:8px;padding:1rem 1.25rem;margin-bottom:.75rem;background:var(--surface);border-left:3px solid var(--border);transition:.2s}
+.bug-card:hover{border-left-color:var(--cyan)}
+.sev-border-p0{border-left-color:#ef4444;background:rgba(239,68,68,.05)}
+.sev-border-p1{border-left-color:#f59e0b;background:rgba(245,158,11,.04)}
+.sev-border-p2{border-left-color:#3b82f6;background:rgba(59,130,246,.04)}
+.bug-header{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.5rem}
+.bug-id{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--dim)}
+.bug-title{font-weight:700;margin-bottom:.3rem}
+.bug-url{font-size:.75rem;margin-bottom:.3rem}
+.bug-rec{font-size:.78rem;color:#86efac;padding:.5rem;background:rgba(134,239,172,.06);border-radius:4px;margin-top:.5rem}
+.ai-badge{font-size:.68rem;padding:2px 7px;border-radius:10px;background:#1a1a3b;color:#c084fc;border:1px solid #bf40ff44}
+.rec{font-size:.75rem;color:#86efac}
+.no-data{color:var(--dim);font-style:italic;padding:1.5rem 0;text-align:center}
+.url-card{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#0f0f1e;border-radius:6px;margin-bottom:.5rem}
+.url-label{font-size:.7rem;color:var(--dim);text-transform:uppercase;min-width:90px}
+/* Screenshot gallery */
+.screenshot-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:1.25rem;margin-top:1rem}
+.screenshot-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:.2s}
+.screenshot-card:hover{border-color:var(--purple);transform:translateY(-3px);box-shadow:0 8px 32px rgba(191,64,255,.15)}
+.sc-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
+.sc-type{font-size:.7rem;padding:2px 8px;border-radius:4px;background:#1a1a3b;color:#c084fc;text-transform:uppercase;font-weight:700}
+.sc-url{font-size:.72rem;color:var(--dim);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;max-width:240px}
+.sc-img-wrap{background:#000;min-height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden}
+.sc-img-wrap img{width:100%;height:auto;display:block;max-height:400px;object-fit:cover}
+.no-img{color:var(--dim);font-style:italic;padding:2rem;text-align:center}
+.sc-path{font-family:'JetBrains Mono',monospace;font-size:.67rem;color:var(--dim);padding:.5rem 1rem;background:#080810}
+/* Vitals */
+.vitals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.75rem;margin:.75rem 0}
+.vital-card{border-radius:8px;padding:1rem;text-align:center;border:1px solid var(--border)}
+.vital-value{font-size:1.5rem;font-weight:800;margin:.25rem 0;font-family:'JetBrains Mono',monospace}
+.vital-label{font-size:.65rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
+.vital-threshold{font-size:.68rem;color:var(--dim);margin-top:2px}
+.vital-pass{background:rgba(34,197,94,.08);border-color:#22c55e}
+.vital-fail{background:rgba(239,68,68,.08);border-color:#ef4444}
+.vital-na{background:var(--surface)}
+.perf-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.5rem;margin-bottom:1rem}
+.perf-card h3{color:var(--cyan);margin-bottom:.5rem}
+.perf-note{font-size:.78rem;color:var(--dim);font-style:italic;margin-top:.75rem}
+.seo-page,.a11y-page{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem;margin-bottom:1rem}
+.seo-header,.a11y-header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem;font-size:.85rem}
+.violation{border-radius:6px;padding:.75rem;margin-bottom:.5rem;border-left:3px solid var(--border)}
+.impact-critical{border-left-color:#ef4444;background:rgba(239,68,68,.06)}
+.impact-serious{border-left-color:#f59e0b;background:rgba(245,158,11,.05)}
+.impact-moderate{border-left-color:#3b82f6;background:rgba(59,130,246,.05)}
+.violation-header{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.25rem}
+.impact-badge{font-size:.7rem;padding:2px 6px;border-radius:4px;background:#1e293b;color:#94a3b8}
+.err-cell details{font-size:.78rem}
+footer{text-align:center;color:var(--dim);font-size:.7rem;padding:2rem;border-top:1px solid var(--border);margin-top:2rem;font-family:'JetBrains Mono',monospace}
+@media(max-width:768px){.grid2{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.screenshot-gallery{grid-template-columns:1fr}}
+</style>
+</head>
+<body>
+<header>
+  <div>
+    <div class="logo">⚡ Backlist Enterprise QA</div>
+    <div class="header-meta">
+      Run: ${esc(session.id)} · ${new Date(session.startedAt).toLocaleString()} · ${formatDuration(summary.duration)} · v${VERSION}
+    </div>
+  </div>
+  ${pwBadge}
+</header>
+
+<nav>
+  <button class="nav-tab active" onclick="showTab('overview',this)">📊 Overview</button>
+  <button class="nav-tab" onclick="showTab('screenshots',this)">📸 Screenshots (${session.screenshots.length})</button>
+  <button class="nav-tab" onclick="showTab('tests',this)">🧪 Tests (${summary.total})</button>
+  <button class="nav-tab" onclick="showTab('bugs',this)">🐛 Bugs (${session.bugs.length})</button>
+  <button class="nav-tab" onclick="showTab('routes',this)">🗺️ Routes (${session.routeMap.length})</button>
+  <button class="nav-tab" onclick="showTab('security',this)">🛡️ Security (${session.secFindings.length})</button>
+  <button class="nav-tab" onclick="showTab('performance',this)">⚡ Performance</button>
+  <button class="nav-tab" onclick="showTab('a11y',this)">♿ A11y</button>
+  <button class="nav-tab" onclick="showTab('seo',this)">🔎 SEO</button>
+  <button class="nav-tab" onclick="showTab('console',this)">🖥️ Console (${session.consoleErrors.length})</button>
+  <button class="nav-tab" onclick="showTab('network',this)">📡 Network</button>
+</nav>
+
+<div class="container">
+
+${session.playwrightMode ? '<div class="pw-banner">🎭 <strong>Playwright Real Browser Mode</strong> — Screenshots, Web Vitals, DOM tests, Interaction tests captured from live Chromium browser</div>' : ''}
+<div class="real-banner">✅ <strong>100% Real Runtime Data</strong> — All results from actual HTTP requests and live application testing.</div>
+
+<!-- OVERVIEW -->
+<div id="tab-overview" class="tab-panel active">
+  ${urlsStr ? `<div class="card"><div class="card-title">Target URLs</div>${urlsStr}</div>` : ''}
+  <div class="metrics">
+    <div class="mc"><div class="ml">Pass Rate</div><div class="mv" style="color:${rateColor}">${summary.passRate}%</div></div>
+    <div class="mc"><div class="ml">Total Tests</div><div class="mv">${summary.total}</div></div>
+    <div class="mc"><div class="ml">Passed</div><div class="mv" style="color:var(--green)">${summary.passed}</div></div>
+    <div class="mc"><div class="ml">Failed</div><div class="mv" style="color:var(--red)">${summary.failed}</div></div>
+    <div class="mc"><div class="ml">Bugs Found</div><div class="mv" style="color:#c084fc">${session.bugs.length}</div></div>
+    <div class="mc"><div class="ml">P0 Critical</div><div class="mv" style="color:var(--red)">${sevCounts.P0}</div></div>
+    <div class="mc"><div class="ml">P1 High</div><div class="mv" style="color:var(--yellow)">${sevCounts.P1}</div></div>
+    <div class="mc"><div class="ml">Screenshots</div><div class="mv" style="color:#c084fc">${session.screenshots.length}</div></div>
+    <div class="mc"><div class="ml">Routes Found</div><div class="mv">${session.routeMap.length}</div></div>
+    <div class="mc"><div class="ml">Sec Checks</div><div class="mv">${session.secFindings.length}</div></div>
+    <div class="mc"><div class="ml">Console Errors</div><div class="mv" style="color:${session.consoleErrors.length>0?'var(--yellow)':'var(--green)'}">${session.consoleErrors.length}</div></div>
+    <div class="mc"><div class="ml">Duration</div><div class="mv" style="font-size:1rem;padding-top:.4rem">${formatDuration(summary.duration)}</div></div>
+  </div>
+  <div class="grid2">
+    <div class="card"><div class="card-title">Tests by Category</div><div class="chart-wrap"><canvas id="coverageChart"></canvas></div></div>
+    <div class="card"><div class="card-title">Bug Severity</div><div class="chart-wrap"><canvas id="bugChart"></canvas></div></div>
+  </div>
+</div>
+
+<!-- SCREENSHOTS -->
+<div id="tab-screenshots" class="tab-panel">
+  <div class="card">
+    <div class="card-title">Browser Screenshots <span>${session.screenshots.length} captured</span></div>
+    ${session.playwrightMode ? '' : '<div class="perf-note" style="margin-bottom:1rem">⚠️ Screenshots require Playwright. Install: <code>npm install playwright && npx playwright install chromium</code></div>'}
+    <div class="screenshot-gallery">${screenshotCards}</div>
+  </div>
+</div>
+
+<!-- TESTS -->
+<div id="tab-tests" class="tab-panel">
+  <div class="search-bar">
+    <input type="text" id="testSearch" placeholder="Search tests..." onkeyup="filterTests()">
+    <select id="testStatus" onchange="filterTests()">
+      <option value="">All statuses</option>
+      <option value="FAIL">Failed only</option>
+      <option value="PASS">Passed only</option>
+    </select>
+    <select id="testType" onchange="filterTests()">
+      <option value="">All types</option>
+      ${[...new Set(session.results.map(r=>r.type))].map(t=>`<option value="${esc(t)}">${t}</option>`).join('')}
+    </select>
+  </div>
+  <div class="card">
+    <div class="card-title">All Test Results <span>${summary.total} tests</span></div>
+    <table id="testTable">
+      <thead><tr><th>Name</th><th>Type</th><th>Status</th><th>Severity</th><th>Duration</th><th>Details</th></tr></thead>
+      <tbody>${testRows || '<tr><td colspan="6" class="no-data">No tests run yet</td></tr>'}</tbody>
+    </table>
+  </div>
+</div>
+
+<!-- BUGS -->
+<div id="tab-bugs" class="tab-panel">
+  <div class="search-bar">
+    <input type="text" id="bugSearch" placeholder="Search bugs..." onkeyup="filterBugs()">
+    <select id="bugSev" onchange="filterBugs()">
+      <option value="">All severities</option>
+      <option value="P0">P0 Critical</option><option value="P1">P1 High</option>
+      <option value="P2">P2 Medium</option><option value="P3">P3 Low</option>
+    </select>
+  </div>
+  <div id="bugList">${bugCards}</div>
+</div>
+
+<!-- ROUTES -->
+<div id="tab-routes" class="tab-panel">
+  <div class="card">
+    <div class="card-title">Discovered Routes <span>${session.routeMap.length} pages/APIs</span></div>
+    <table>
+      <thead><tr><th>URL</th><th>Type</th><th>Status</th><th>Forms</th><th>Result</th></tr></thead>
+      <tbody>${routeRows || '<tr><td colspan="5" class="no-data">No routes discovered</td></tr>'}</tbody>
+    </table>
+  </div>
+</div>
+
+<!-- SECURITY -->
+<div id="tab-security" class="tab-panel">
+  <div class="card">
+    <div class="card-title">Security Scan Results <span>${session.secFindings.length} checks</span></div>
+    <table>
+      <thead><tr><th>Check</th><th>Category</th><th>Result</th><th>Severity</th><th>Detail</th><th>Fix</th></tr></thead>
+      <tbody>${secRows || '<tr><td colspan="6" class="no-data">No security scans</td></tr>'}</tbody>
+    </table>
+  </div>
+</div>
+
+<!-- PERFORMANCE -->
+<div id="tab-performance" class="tab-panel">
+  <div class="card-title" style="padding:.5rem 0 1rem">Performance — Real Web Vitals + Resource Analysis</div>
+  ${perfSection}
+</div>
+
+<!-- ACCESSIBILITY -->
+<div id="tab-a11y" class="tab-panel">
+  <div class="card-title" style="padding:.5rem 0 1rem">Accessibility — WCAG HTML Analysis</div>
+  ${a11ySection}
+</div>
+
+<!-- SEO -->
+<div id="tab-seo" class="tab-panel">
+  <div class="card-title" style="padding:.5rem 0 1rem">SEO Analysis — Googlebot User-Agent</div>
+  ${seoSection}
+</div>
+
+<!-- CONSOLE -->
+<div id="tab-console" class="tab-panel">
+  <div class="card">
+    <div class="card-title">Console Errors &amp; Warnings <span>${session.consoleErrors.length} entries</span></div>
+    ${consoleSection}
+  </div>
+</div>
+
+<!-- NETWORK -->
+<div id="tab-network" class="tab-panel">
+  <div class="card">
+    <div class="card-title">Network Failures <span>${session.networkLog.length} failures</span></div>
+    ${networkSection}
+  </div>
+</div>
+
+</div>
+
+<footer>Backlist Enterprise QA v${VERSION} · ${summary.total} tests · ${session.bugs.length} bugs · ${session.routeMap.length} routes · ${session.screenshots.length} screenshots · ${new Date().toLocaleString()}</footer>
+
+<script>
+function showTab(name, el) {
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
+  document.getElementById('tab-' + name)?.classList.add('active');
+  el?.classList.add('active');
+}
+function filterTests() {
+  const s  = (document.getElementById('testSearch')?.value||'').toLowerCase();
+  const st = document.getElementById('testStatus')?.value||'';
+  const ty = document.getElementById('testType')?.value||'';
+  document.querySelectorAll('#testTable tbody .result-row').forEach(row => {
+    row.style.display = (row.textContent.toLowerCase().includes(s) && (!st || row.dataset.status===st) && (!ty || row.dataset.type===ty)) ? '' : 'none';
+  });
+}
+function filterBugs() {
+  const s  = (document.getElementById('bugSearch')?.value||'').toLowerCase();
+  const sv = document.getElementById('bugSev')?.value||'';
+  document.querySelectorAll('#bugList .bug-card').forEach(card => {
+    card.style.display = (card.textContent.toLowerCase().includes(s) && (!sv || card.dataset.severity===sv)) ? '' : 'none';
+  });
+}
+const chartCfg = {
+  plugins:{legend:{labels:{color:'#94a3b8',font:{size:11}}}},
+  scales:{x:{ticks:{color:'#64748b'},grid:{color:'#1e293b'}},y:{ticks:{color:'#64748b',stepSize:1},grid:{color:'#1e293b'},beginAtZero:true}}
+};
+new Chart(document.getElementById('coverageChart'),{type:'bar',data:{labels:${chartTypes},datasets:[
+  {label:'Passed',data:${chartPass2},backgroundColor:'#34d399',borderRadius:3},
+  {label:'Failed',data:${chartFail2},backgroundColor:'#f87171',borderRadius:3}
+]},options:{responsive:true,maintainAspectRatio:false,...chartCfg,scales:{...chartCfg.scales,x:{...chartCfg.scales.x,stacked:true},y:{...chartCfg.scales.y,stacked:true}}}});
+new Chart(document.getElementById('bugChart'),{type:'doughnut',data:{labels:['P0 Critical','P1 High','P2 Medium','P3 Low'],datasets:[{data:${bugSevData},backgroundColor:['#ef4444','#f59e0b','#3b82f6','#64748b'],borderWidth:0}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{labels:{color:'#94a3b8',font:{size:11}}}}}});
+</script>
+</body>
+</html>`;
+}
 
-    this.#session.bugs.sort((a, b) => {
-      const order = { P0: 0, P1: 1, P2: 2, P3: 3 };
-      return (order[a.aiSeverity || a.severity] || 3)
-           - (order[b.aiSeverity || b.severity] || 3);
-    });
-  }
+// ═══════════════════════════════════════════════════════════════════════════
+//  Main QA Runner — v13 with Playwright integration
+// ═══════════════════════════════════════════════════════════════════════════
+async function runQAEngine(session) {
+  const dash = new TerminalDashboard(session);
+  dash.start();
+
+  const addResult = (r) => {
+    const result = { id: shortId(), timestamp: timestamp(), duration: 0, ...r };
+    session.addResult(result);
+    dash.addResult(result);
+    return result;
+  };
 
-  // ── Form Testing ──────────────────────────────────────────────────────
-  async #testForms(url, forms, page) {
-    for (const form of forms.slice(0, 3)) {
-      this.#terminal.setCurrentTest(`Form: ${url} — ${form.action || 'unknown'}`);
-
-      const result = await this.#interactor.testForm(page, form);
-
-      this.#addResult({
-        name    : `Form test: ${url} → ${form.action || 'inline'}`,
-        type    : 'form',
-        category: 'user-flow',
-        status  : result.pass ? 'PASS' : 'FAIL',
-        message : result.message,
-        data    : {
-          fields      : form.fields,
-          action      : form.action,
-          method      : form.method,
-          validationOk: result.validationOk,
-          submissionOk: result.submissionOk,
-          errors      : result.errors,
+  try {
+    // ── Phase 1: Discovery ───────────────────────────────────────────────
+    dash.setPhase('🔍 Phase 1: Route Discovery & Crawling');
+    for (const [label, url] of Object.entries(session.urls)) {
+      if (!url) continue;
+      dash.log(`Crawling ${label}: ${url}`);
+      const t0     = Date.now();
+      const routes = await crawlSite(url, {
+        maxPages: 50,
+        onRoute: (route) => {
+          session.routeMap.push(route);
+          dash.log(`  Found: ${route.url} (${route.type})`);
         },
-        url,
-        duration: result.duration,
       });
+      addResult({ name: `[${label}] Route Discovery`, type: 'discovery', category: 'crawl',
+        status: routes.length > 0 ? 'PASS' : 'FAIL',
+        message: `Discovered ${routes.length} routes in ${Date.now()-t0}ms`, url, label });
+    }
 
-      if (!result.pass) {
-        this.#session.addBug({
-          title      : `Form broken: ${form.action || url}`,
-          severity   : 'P1',
-          type       : 'form',
-          description: result.message,
-          url,
-          evidence   : result.errors,
-        });
+    // ── Phase 2: Playwright Real Browser Tests ───────────────────────────
+    dash.setPhase('🎭 Phase 2: Playwright Real Browser Tests');
+    const chromium = await getPlaywright();
+
+    if (chromium) {
+      session.playwrightMode = true;
+      dash.log(chalk.hex('#BF40FF')('  🎭 Playwright available! Running real browser tests...'));
+
+      for (const [label, url] of Object.entries(session.urls)) {
+        if (!url) continue;
+        dash.setCurrentTest(`🎭 Browser: ${url}`);
+        dash.log(chalk.cyan(`  Launching Chromium for ${label}...`));
+
+        const pwResult = await runPlaywrightScan(url, session, dash);
+
+        if (pwResult && !pwResult.error) {
+          const { results: pw } = pwResult;
+
+          // Store playwright perf data merged with session
+          session.perfMetrics[label] = {
+            ...session.perfMetrics[label],
+            ...pw.vitals,
+            slowResources : pw.networkFails.filter(n => n.duration > 1000),
+            resourceStats : pw.resourceStats,
+            domChecks     : pw.domChecks,
+            interactions  : pw.interactions,
+            playwrightMode: true,
+          };
+
+          // Add DOM check results
+          for (const check of pw.domChecks || []) {
+            addResult({ name: `DOM: ${check.name}`, type: 'browser-dom', category: 'playwright',
+              status: check.pass ? 'PASS' : 'FAIL', message: check.value, url, label });
+          }
+
+          // Add interaction results
+          for (const interaction of pw.interactions || []) {
+            addResult({ name: `Interaction: ${interaction.name}`, type: 'browser-interaction', category: 'playwright',
+              status: interaction.pass ? 'PASS' : 'FAIL', message: interaction.value, url, label });
+            if (!interaction.pass) {
+              session.addBug({ title: `Interaction Failed: ${interaction.name}`,
+                severity: 'P2', type: 'javascript', url, evidence: { value: interaction.value } });
+            }
+          }
+
+          // Add network failure results
+          for (const fail of pw.networkFails || []) {
+            addResult({ name: `Network Fail: ${fail.url?.split('/').pop()?.slice(0,40)}`, type: 'network', category: 'playwright',
+              status: 'FAIL', message: fail.failure || `HTTP ${fail.status}`, url: fail.url, label });
+            session.addBug({ title: `Network Failure: ${fail.url?.split('/').pop()}`,
+              severity: fail.status >= 500 ? 'P1' : 'P2', type: 'network', url: fail.url,
+              evidence: { status: fail.status, failure: fail.failure } });
+          }
+
+          // Add console error results
+          for (const err of pw.jsErrors || []) {
+            addResult({ name: `JS Error: ${err.message?.slice(0,60)}`, type: 'javascript', category: 'playwright',
+              status: 'FAIL', message: err.message, url, label, severity: 'P2' });
+            session.addBug({ title: `JS Error: ${err.message?.slice(0,80)}`,
+              severity: 'P2', type: 'javascript', url, evidence: { message: err.message, stack: err.stack?.slice(0,200) } });
+          }
+
+          // Web vitals results
+          const { lcp, fcp, cls, tbt, ttfb } = pw.vitals || {};
+          if (ttfb !== undefined && ttfb !== null) {
+            addResult({ name: `[${label}] TTFB`, type: 'performance', category: 'web-vitals',
+              status: ttfb <= 800 ? 'PASS' : 'FAIL', message: `TTFB: ${ttfb}ms`, url, label, duration: ttfb });
+          }
+          if (lcp !== undefined && lcp !== null) {
+            addResult({ name: `[${label}] LCP`, type: 'performance', category: 'web-vitals',
+              status: lcp <= 2500 ? 'PASS' : 'FAIL', message: `LCP: ${lcp}ms (≤2500ms)`, url, label });
+            if (lcp > 2500) session.addBug({ title: `Poor LCP: ${lcp}ms`, severity: lcp > 4000 ? 'P1' : 'P2',
+              type: 'performance', url, evidence: { lcp }, recommendation: 'Optimize largest contentful paint' });
+          }
+          if (fcp !== undefined && fcp !== null) {
+            addResult({ name: `[${label}] FCP`, type: 'performance', category: 'web-vitals',
+              status: fcp <= 1800 ? 'PASS' : 'FAIL', message: `FCP: ${fcp}ms (≤1800ms)`, url, label });
+          }
+          if (cls !== undefined && cls !== null) {
+            addResult({ name: `[${label}] CLS`, type: 'performance', category: 'web-vitals',
+              status: cls <= 0.1 ? 'PASS' : 'FAIL', message: `CLS: ${cls} (≤0.1)`, url, label });
+            if (cls > 0.1) session.addBug({ title: `High CLS: ${cls}`, severity: 'P2', type: 'performance',
+              url, evidence: { cls }, recommendation: 'Fix layout shifts — set image dimensions, avoid dynamic content insertion' });
+          }
+          if (tbt !== undefined && tbt !== null) {
+            addResult({ name: `[${label}] TBT`, type: 'performance', category: 'web-vitals',
+              status: tbt <= 200 ? 'PASS' : 'FAIL', message: `TBT: ${tbt}ms (≤200ms)`, url, label });
+          }
+
+          addResult({ name: `[${label}] Playwright Scan`, type: 'browser', category: 'playwright',
+            status: 'PASS', message: `${pw.screenshots?.length || 0} screenshots, ${pw.domChecks?.length || 0} DOM checks`, url, label });
+
+          dash.log(chalk.green(`  ✅ Playwright scan complete for ${label}`));
+        } else {
+          dash.log(chalk.yellow(`  ⚠ Playwright scan failed: ${pwResult?.error || 'unknown error'}`));
+          addResult({ name: `[${label}] Playwright Scan`, type: 'browser', status: 'FAIL',
+            message: pwResult?.error || 'Playwright scan failed', url, label });
+        }
+      }
+    } else {
+      dash.log(chalk.yellow('  ⚠ Playwright not installed. HTTP-only mode.'));
+      dash.log(chalk.gray('  Install: npm install playwright && npx playwright install chromium'));
+      // Fallback: HTTP TTFB
+      for (const [label, url] of Object.entries(session.urls)) {
+        if (!url) continue;
+        const t0   = Date.now();
+        const r    = await httpProbe(url, { timeout: 15000 });
+        const ttfb = Date.now() - t0;
+        session.perfMetrics[label] = { ttfb, bodySize: r.bodySize, statusCode: r.status,
+          slowResources: [], note: 'Install Playwright for real Web Vitals (LCP, FCP, CLS)' };
+        addResult({ name: `[${label}] TTFB`, type: 'performance', category: 'web-vitals',
+          status: ttfb <= 800 ? 'PASS' : 'FAIL',
+          message: `TTFB: ${ttfb}ms (threshold: ≤800ms)`, url, label, duration: ttfb });
+        if (ttfb > 800) session.addBug({ title: `Slow TTFB: ${ttfb}ms`, severity: ttfb > 2000 ? 'P1' : 'P2',
+          type: 'performance', url, evidence: { ttfb }, recommendation: 'Optimize server response time' });
       }
     }
-  }
 
-  // ── Auth Flow Testing ─────────────────────────────────────────────────
-  async #testAuthFlow(url, page) {
-    this.#terminal.setCurrentTest(`Auth flow: ${url}`);
+    // ── Phase 3: API Validation ──────────────────────────────────────────
+    dash.setPhase('📡 Phase 3: API Validation');
+    const apiRoutes = session.routeMap.filter(r => r.type === 'api' || r.url?.includes('/api/'));
+    dash.log(`Validating ${apiRoutes.length} API endpoints...`);
+    for (const route of apiRoutes) {
+      dash.setCurrentTest(`API: ${route.url}`);
+      const r = await httpProbe(route.url);
+      session.apiLog.push({ ...r, id: shortId() });
+      addResult({ name: `API: ${route.url}`, type: 'api', category: 'api',
+        status: r.ok ? 'PASS' : 'FAIL',
+        message: `${r.status} ${r.ok ? 'OK' : 'FAIL'} (${r.responseTime}ms)`,
+        url: route.url, duration: r.responseTime });
+      if (!r.ok) session.addBug({ title: `API Failure: ${route.url}`,
+        severity: r.status >= 500 ? 'P0' : 'P1', type: 'api',
+        description: r.error || `HTTP ${r.status}`, evidence: { status: r.status, error: r.error } });
+    }
+
+    // ── Phase 4: Security ────────────────────────────────────────────────
+    dash.setPhase('🛡️  Phase 4: Security Scan');
+    for (const [label, url] of Object.entries(session.urls)) {
+      if (!url) continue;
+      dash.setCurrentTest(`Security: ${url}`);
+      const findings = await runSecurityScan(url);
+      session.secFindings.push(...findings);
+      for (const f of findings) {
+        addResult({ name: `Security: ${f.check}`, type: 'security', category: f.category,
+          status: f.pass ? 'PASS' : 'FAIL', message: f.detail, severity: f.severity, url, label });
+        if (!f.pass && ['P0','P1'].includes(f.severity)) {
+          session.addBug({ title: `Security: ${f.check}`, severity: f.severity, type: 'security',
+            description: f.detail, url, evidence: f.evidence, recommendation: f.recommendation });
+        }
+      }
+    }
 
-    const result = await this.#interactor.testAuthFlow(page, url, {
-      testCredentials: [
-        { username: 'test@example.com', password: 'wrong-password-test', expectFail: true },
-        { username: 'invalid@test.com', password: 'wrong123',            expectFail: true },
-        { username: '',                 password: '',                    expectFail: true },
-      ],
-    });
+    // ── Phase 5: Accessibility ───────────────────────────────────────────
+    dash.setPhase('♿ Phase 5: Accessibility Check');
+    const pageRoutes = session.routeMap.filter(r => r.type === 'page' || r.type === 'auth').slice(0, 10);
+    for (const route of pageRoutes) {
+      dash.setCurrentTest(`A11y: ${route.url}`);
+      const result = await runA11yScan(route.url);
+      session.a11yResults.push({ url: route.url, ...result });
+      for (const v of result.violations) {
+        addResult({ name: `A11y [${v.impact}]: ${v.description}`, type: 'accessibility', category: 'wcag',
+          status: 'FAIL', message: v.help, severity: v.impact === 'critical' ? 'P0' : v.impact === 'serious' ? 'P1' : 'P2',
+          url: route.url });
+        if (['critical','serious'].includes(v.impact)) session.addBug({
+          title: `A11y: ${v.description}`, severity: v.impact === 'critical' ? 'P0' : 'P1',
+          type: 'accessibility', description: v.help, url: route.url, recommendation: v.helpUrl });
+      }
+      for (const pass of result.passes.slice(0, 3)) {
+        addResult({ name: `A11y ✓: ${pass.description}`, type: 'accessibility', status: 'PASS', url: route.url });
+      }
+    }
 
-    this.#addResult({
-      name    : `Auth flow: ${url}`,
-      type    : 'auth',
-      category: 'authentication',
-      status  : result.pass ? 'PASS' : 'FAIL',
-      message : result.message,
-      data    : result.details,
-      url,
-      duration: result.duration,
-    });
+    // ── Phase 6: SEO ─────────────────────────────────────────────────────
+    dash.setPhase('🔎 Phase 6: SEO Validation');
+    const seoRoutes = session.routeMap.filter(r => r.type === 'page').slice(0, 10);
+    for (const route of seoRoutes) {
+      dash.setCurrentTest(`SEO: ${route.url}`);
+      const result = await runSEOScan(route.url);
+      session.seoResults.push({ url: route.url, ...result });
+      for (const c of result.checks) {
+        addResult({ name: `SEO: ${c.name}`, type: 'seo', category: c.category,
+          status: c.pass ? 'PASS' : 'FAIL', message: c.detail, severity: c.severity, url: route.url });
+        if (!c.pass && ['P0','P1'].includes(c.severity)) session.addBug({
+          title: `SEO: ${c.name}`, severity: c.severity, type: 'seo',
+          description: c.detail, url: route.url, recommendation: c.recommendation });
+      }
+    }
 
-    if (!result.pass) {
-      this.#session.addBug({
-        title      : `Auth flow issue: ${url}`,
-        severity   : 'P0',
-        type       : 'auth',
-        description: result.message,
-        url,
-        evidence   : result.details,
-      });
+    // ── Phase 7: AI Classification ───────────────────────────────────────
+    dash.setPhase('🤖 Phase 7: AI Bug Classification');
+    dash.log(`Classifying ${session.bugs.length} bugs...`);
+    for (const bug of session.bugs) {
+      const cls            = classifyBug(bug);
+      bug.aiSeverity       = cls.severity;
+      bug.aiCategory       = cls.category;
+      bug.aiRecommendation = cls.recommendation;
+      bug.aiConfidence     = cls.confidence;
     }
-  }
+    session.bugs.sort((a, b) => {
+      const o = { P0: 0, P1: 1, P2: 2, P3: 3 };
+      return (o[a.aiSeverity||a.severity]||3) - (o[b.aiSeverity||b.severity]||3);
+    });
 
-  #isAuthPage(url) {
-    return /\/(login|signin|auth|register|signup)/i.test(url);
+  } finally {
+    dash.stop();
   }
 
-  #addResult(result) {
-    const r = {
-      id       : shortId(),
-      timestamp: timestamp(),
-      duration : result.duration || 0,
-      ...result,
-    };
-    this.#session.addResult(r);
-    this.#terminal.addResult(r);
-    this.emit('result', r);
-    return r;
-  }
+  return session;
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-//  Public API — exported functions
+//  Report Generation
 // ═══════════════════════════════════════════════════════════════════════════
+async function generateReports(session) {
+  await fs.ensureDir(REPORT_DIR);
+  const base     = session.id.toLowerCase();
+  const htmlPath = path.join(REPORT_DIR, `${base}.html`);
+  const jsonPath = path.join(REPORT_DIR, `${base}.json`);
+  const summary  = session.getSummary();
+
+  await fs.writeFile(htmlPath, buildHTMLReport(session), 'utf8');
+  await fs.writeJson(jsonPath, {
+    meta: { version: VERSION, runId: session.id, generatedAt: new Date().toISOString(),
+      dataSource: session.playwrightMode ? 'playwright-real-browser' : 'http-only' },
+    urls: session.urls, summary, results: session.results, bugs: session.bugs,
+    routeMap: session.routeMap, apiLog: session.apiLog, secFindings: session.secFindings,
+    perfMetrics: session.perfMetrics, a11yResults: session.a11yResults, seoResults: session.seoResults,
+    screenshots: session.screenshots.map(s => ({ ...s, path: undefined })), // strip paths from JSON
+    playwrightMode: session.playwrightMode,
+    ci: {
+      exitCode: summary.failed > 0 || session.bugs.some(b => b.severity === 'P0') ? 1 : 0,
+      p0Bugs  : session.bugs.filter(b => b.severity === 'P0').length,
+      p1Bugs  : session.bugs.filter(b => b.severity === 'P1').length,
+      passRate: summary.passRate,
+    },
+  }, { spaces: 2 });
+
+  return { htmlPath, jsonPath };
+}
 
+// ═══════════════════════════════════════════════════════════════════════════
+//  History
+// ═══════════════════════════════════════════════════════════════════════════
 export async function initQASystem() {
   await fs.ensureDir(QA_DIR);
   await fs.ensureDir(REPORT_DIR);
@@ -756,189 +1747,193 @@ export async function initQASystem() {
   }
 }
 
-export async function saveSession(session) {
-  const history = await loadHistory();
+async function saveToHistory(session, htmlPath, jsonPath) {
+  let history = { runs: [] };
+  try { history = await fs.readJson(HISTORY_FILE); } catch {}
   const summary = session.getSummary();
   history.runs.unshift({
-    id             : session.id,
-    startedAt      : session.startedAt,
-    urls           : session.urls,
-    summary,
-    version        : VERSION,
-    bugCount       : session.bugs.length,
+    id: session.id, startedAt: session.startedAt, urls: session.urls,
+    summary, version: VERSION, bugCount: session.bugs.length,
     screenshotCount: session.screenshots.length,
+    playwrightMode: session.playwrightMode,
+    htmlPath, jsonPath,
   });
   if (history.runs.length > 100) history.runs = history.runs.slice(0, 100);
   await fs.writeJson(HISTORY_FILE, history, { spaces: 2 });
 }
 
-export async function loadHistory() {
-  try { return await fs.readJson(HISTORY_FILE); }
-  catch { return { runs: [], version: VERSION }; }
-}
-
-// ── URL QA entry point ────────────────────────────────────────────────────
-export async function runUrlQA({ localUrl, stagingUrl, prodUrl, options = {} } = {}) {
+// ═══════════════════════════════════════════════════════════════════════════
+//  Public API — runUrlQA (main entry point)
+// ═══════════════════════════════════════════════════════════════════════════
+export async function runUrlQA({ localUrl, stagingUrl, prodUrl } = {}) {
   const urls = {};
   if (localUrl)   urls.localhost  = localUrl;
   if (stagingUrl) urls.staging    = stagingUrl;
   if (prodUrl)    urls.production = prodUrl;
 
-  if (Object.keys(urls).length === 0) {
-    console.log(chalk.red('  No URLs provided.'));
-    return null;
+  if (!Object.keys(urls).length) { console.log(chalk.red('  No URLs provided.')); return null; }
+
+  // Check Playwright availability and warn
+  const chromium = await getPlaywright();
+  if (chromium) {
+    console.log(chalk.hex('#BF40FF')('  🎭 Playwright detected — Real browser mode ENABLED'));
+    console.log(chalk.gray('     Screenshots, Web Vitals, DOM tests, Interactions will be captured'));
+  } else {
+    console.log(chalk.yellow('  ⚠ Playwright not found — HTTP-only mode'));
+    console.log(chalk.gray('     Install: npm install playwright && npx playwright install chromium'));
+    console.log(chalk.gray('     For real Web Vitals, screenshots, and DOM tests'));
   }
+  console.log('');
 
   const session = new QASession(urls);
-  const engine  = new QAEngine(session, options);
+  await runQAEngine(session);
+  const { htmlPath, jsonPath } = await generateReports(session);
+  await saveToHistory(session, htmlPath, jsonPath);
 
-  await engine.init();
-  await engine.run();
-  await saveSession(session);
+  const summary = session.getSummary();
+  console.log(chalk.hex('#00F5FF').bold(`  ✓ ${session.id} — ${summary.total} tests · ${summary.failed} failed · ${session.bugs.length} bugs · ${session.screenshots.length} screenshots`));
+  console.log(chalk.gray(`  📄 HTML: ${htmlPath}`));
+  console.log(chalk.gray(`  📋 JSON: ${jsonPath}`));
+  if (session.screenshots.length > 0) {
+    console.log(chalk.hex('#BF40FF')(`  📸 Screenshots: ${SCREENSHOT_DIR}`));
+  }
 
-  const htmlPath = await new HTMLReporter(session).generate(REPORT_DIR);
-  const jsonPath = await new JSONReporter(session).generate(REPORT_DIR);
+  try {
+    const { exec } = await import('node:child_process');
+    const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+    exec(`${cmd} "${htmlPath}"`);
+    console.log(chalk.green('  🌐 Report opened in browser!'));
+  } catch {}
 
   return { session, htmlPath, jsonPath };
 }
 
-// ── Automated QA entry point ──────────────────────────────────────────────
-export async function runAutomatedQA({ continuous = false, localUrl, prodUrl, stagingUrl } = {}) {
-  const runOnce = async () => {
+export async function runAutomatedQA({ continuous = false, localUrl, stagingUrl, prodUrl } = {}) {
+  const run = async () => {
     const urls = {};
     if (localUrl)   urls.localhost  = localUrl;
     if (stagingUrl) urls.staging    = stagingUrl;
     if (prodUrl)    urls.production = prodUrl;
-
-    if (Object.keys(urls).length === 0) {
-      console.log(chalk.yellow('  No URLs configured. Skipping URL-based tests.'));
-    }
-
     const session = new QASession(urls);
-    const engine  = new QAEngine(session);
-
-    await engine.init();
-    await engine.run();
-    await saveSession(session);
-
-    const htmlPath = await new HTMLReporter(session).generate(REPORT_DIR);
-    const jsonPath = await new JSONReporter(session).generate(REPORT_DIR);
-
-    const summary = session.getSummary();
-    console.log(chalk.hex('#00F5FF').bold(
-      `\n  ✓ Run ${session.id} — ${summary.total} tests · ${summary.failed} failed · ` +
-      `${session.bugs.length} bugs · ${formatDuration(summary.duration)}`
-    ));
-    if (htmlPath) console.log(chalk.gray(`  📄 Report: ${htmlPath}`));
+    await runQAEngine(session);
+    const { htmlPath, jsonPath } = await generateReports(session);
+    await saveToHistory(session, htmlPath, jsonPath);
+    console.log(chalk.gray(`  📄 Report: ${htmlPath}`));
     return session;
   };
 
-  if (!continuous) return runOnce();
-
-  console.log(chalk.cyan('  ⚡ Continuous mode — re-runs every 60s. Ctrl+C to stop.\n'));
+  if (!continuous) return run();
+  console.log(chalk.cyan('  ⚡ Continuous mode — every 60s. Ctrl+C to stop.\n'));
   let i = 0;
   while (true) {
-    console.log(chalk.gray(`\n  ── Run #${++i} ── ${new Date().toLocaleTimeString()}`));
-    await runOnce();
+    console.log(chalk.gray(`\n  ── Run #${++i} @ ${new Date().toLocaleTimeString()} ──`));
+    await run();
     await sleep(60_000);
   }
 }
 
-// ── Manual QA ─────────────────────────────────────────────────────────────
 export async function runManualQA() {
-  console.log('');
-
   const action = await p.select({
-    message: 'Manual QA — what to run?',
+    message: 'Manual QA mode:',
     options: [
-      { value: 'full-url', label: '🌐 Full URL-Based Real Scan', hint: 'Browser + API + Security + Perf + SEO + A11y' },
-      { value: 'security', label: '🛡️  Security Only',           hint: 'Real HTTP security header + vuln scan'        },
-      { value: 'perf',     label: '⚡ Performance Only',          hint: 'Real Core Web Vitals measurement'            },
-      { value: 'a11y',     label: '♿ Accessibility Only',        hint: 'Real axe-core WCAG scan'                     },
-      { value: 'seo',      label: '🔎 SEO Only',                  hint: 'Real meta, og, robots, sitemap scan'         },
-      { value: 'api',      label: '📡 API Only',                  hint: 'Real endpoint probe + contract validation'   },
+      { value: 'full',     label: '🌐 Full Scan (All phases + Playwright)' },
+      { value: 'browser',  label: '🎭 Browser-only (Playwright: screenshots + vitals)' },
+      { value: 'security', label: '🛡️  Security only' },
+      { value: 'seo',      label: '🔎 SEO only' },
+      { value: 'a11y',     label: '♿ Accessibility only' },
+      { value: 'perf',     label: '⚡ Performance only' },
     ],
   });
   if (p.isCancel(action)) { p.cancel('Cancelled.'); return; }
 
-  const localUrl = await p.text({
-    message    : 'Localhost URL:',
-    placeholder: 'http://localhost:3000',
-  });
+  const localUrl = await p.text({ message: 'URL to test:', placeholder: 'http://localhost:3000' });
   if (p.isCancel(localUrl)) { p.cancel('Cancelled.'); return; }
 
-  const prodUrl = await p.text({
-    message    : 'Production URL (blank to skip):',
-    placeholder: 'https://yoursite.com',
-  });
-
-  const urls = {
-    localhost : String(localUrl).trim() || undefined,
-    production: !p.isCancel(prodUrl) ? String(prodUrl).trim() || undefined : undefined,
-  };
+  const url  = String(localUrl).trim();
+  const sess = new QASession({ localhost: url });
 
-  const session = new QASession(urls);
-  const engine  = new QAEngine(session);
-  await engine.init();
-  await engine.runPhase(action);
-
-  await saveSession(session);
-  const htmlPath = await new HTMLReporter(session).generate(REPORT_DIR);
-  if (htmlPath) {
-    p.outro(chalk.hex('#00F5FF').bold('✓ QA complete'));
-    console.log(chalk.gray(`  📄 Report: ${htmlPath}`));
+  if (action === 'full') {
+    await runQAEngine(sess);
+  } else {
+    const dash = new TerminalDashboard(sess);
+    dash.start();
+    try {
+      if (action === 'browser') {
+        const chromium = await getPlaywright();
+        if (!chromium) { dash.log(chalk.red('Playwright not installed! Run: npm install playwright && npx playwright install chromium')); }
+        else {
+          sess.playwrightMode = true;
+          await runPlaywrightScan(url, sess, dash);
+          sess.perfMetrics.localhost = { ...sess.perfMetrics.localhost, playwrightMode: true };
+        }
+      } else if (action === 'security') {
+        const f = await runSecurityScan(url);
+        sess.secFindings.push(...f);
+        f.forEach(finding => sess.addResult({ id: shortId(), name: `Security: ${finding.check}`, type: 'security',
+          status: finding.pass ? 'PASS' : 'FAIL', message: finding.detail, timestamp: timestamp() }));
+      } else if (action === 'seo') {
+        const r = await runSEOScan(url);
+        sess.seoResults.push({ url, ...r });
+        r.checks.forEach(c => sess.addResult({ id: shortId(), name: `SEO: ${c.name}`, type: 'seo',
+          status: c.pass ? 'PASS' : 'FAIL', message: c.detail, timestamp: timestamp() }));
+      } else if (action === 'a11y') {
+        const r = await runA11yScan(url);
+        sess.a11yResults.push({ url, ...r });
+        r.violations.forEach(v => sess.addResult({ id: shortId(), name: `A11y: ${v.description}`, type: 'accessibility',
+          status: 'FAIL', message: v.help, timestamp: timestamp() }));
+      } else if (action === 'perf') {
+        const chromium2 = await getPlaywright();
+        if (chromium2) {
+          sess.playwrightMode = true;
+          await runPlaywrightScan(url, sess, dash);
+        } else {
+          const m = await (async () => {
+            const t0 = Date.now(); const r = await httpProbe(url, { timeout: 15000 });
+            return { ttfb: Date.now()-t0, bodySize: r.bodySize, statusCode: r.status, slowResources: [],
+              note: 'Install Playwright for real LCP/FCP/CLS metrics' };
+          })();
+          sess.perfMetrics.localhost = m;
+          sess.addResult({ id: shortId(), name: `TTFB: ${m.ttfb}ms`, type: 'performance',
+            status: m.ttfb <= 800 ? 'PASS' : 'FAIL', message: `${m.ttfb}ms`, timestamp: timestamp() });
+        }
+      }
+    } finally { dash.stop(); }
   }
+
+  const { htmlPath } = await generateReports(sess);
+  await saveToHistory(sess, htmlPath, '');
+  p.outro(chalk.hex('#00F5FF').bold('✓ QA complete'));
+  console.log(chalk.gray(`  📄 Report: ${htmlPath}`));
+  try {
+    const { exec } = await import('node:child_process');
+    const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+    exec(`${cmd} "${htmlPath}"`);
+  } catch {}
 }
 
-// ── Post-generation validation ────────────────────────────────────────────
-export async function autoRunPostGeneration(options = {}) {
+export async function autoRunPostGeneration() {
   console.log('');
-  console.log(chalk.hex('#00F5FF').bold(`  ── 🔬 Post-Generation Real QA v${VERSION} ──`));
-  console.log(chalk.gray('  Note: Start your server first, then provide its URL'));
-  console.log('');
-
-  const url = await p.text({
-    message     : 'Server URL to validate:',
-    placeholder : 'http://localhost:3000',
-    defaultValue: 'http://localhost:3000',
-  });
+  console.log(chalk.hex('#00F5FF').bold(`  ── 🔬 Post-Generation QA v${VERSION} ──`));
+  const url = await p.text({ message: 'Server URL:', placeholder: 'http://localhost:3000', defaultValue: 'http://localhost:3000' });
   if (p.isCancel(url)) { p.cancel('Cancelled.'); return; }
-
-  const result = await runUrlQA({ localUrl: String(url).trim() });
-  if (result?.htmlPath) {
-    console.log(chalk.gray(`  📄 Report: ${result.htmlPath}`));
-  }
+  await runUrlQA({ localUrl: String(url).trim() });
 }
 
-// ── View History ──────────────────────────────────────────────────────────
 export async function viewQAHistory() {
-  const history = await loadHistory();
-  if (!history.runs?.length) {
-    console.log(chalk.yellow('\n  No QA history found.\n'));
-    return;
-  }
+  let history = { runs: [] };
+  try { history = await fs.readJson(HISTORY_FILE); } catch {}
 
-  console.log('');
-  console.log(chalk.hex('#00F5FF').bold('  QA History (real runs only)'));
-  console.log(chalk.gray('  ──────────────────────────────────────────────────────'));
+  if (!history.runs?.length) { console.log(chalk.yellow('\n  No QA history found.\n')); return; }
 
+  console.log('');
+  console.log(chalk.hex('#00F5FF').bold('  QA History'));
+  console.log(chalk.gray('  ──────────────────────────────────────────────────'));
   for (const run of history.runs.slice(0, 15)) {
-    const rate   = run.summary?.passRate ?? '–';
-    const color  = Number(rate) >= 90 ? chalk.green
-                 : Number(rate) >= 70 ? chalk.yellow : chalk.red;
-    const bugs   = run.bugCount ?? 0;
-    const shots  = run.screenshotCount ?? 0;
-    const urlStr = Object.values(run.urls || {}).filter(Boolean).join(', ');
-
-    console.log(
-      `  ${chalk.gray(run.id.padEnd(14))} ` +
-      `${chalk.gray(new Date(run.startedAt).toLocaleString().padEnd(24))} ` +
-      `${color(String(rate + '%').padStart(6))} ` +
-      `${chalk.gray(String(run.summary?.total || 0) + ' tests')} ` +
-      `${chalk.cyan(bugs + ' bugs')} ` +
-      `${chalk.gray(shots + ' shots')} ` +
-      `${chalk.dim(urlStr.slice(0, 40))}`
-    );
+    const rate = run.summary?.passRate ?? '–';
+    const col  = Number(rate) >= 90 ? chalk.green : Number(rate) >= 70 ? chalk.yellow : chalk.red;
+    const urls = Object.values(run.urls||{}).filter(Boolean).join(', ');
+    const pwIcon = run.playwrightMode ? chalk.hex('#BF40FF')('🎭') : chalk.gray('⚡');
+    console.log(`  ${chalk.gray(run.id.padEnd(16))} ${chalk.gray(new Date(run.startedAt).toLocaleString().padEnd(22))} ${col((rate+'%').padStart(7))} ${chalk.cyan((run.bugCount||0)+' bugs')} ${pwIcon} ${chalk.dim(urls.slice(0,40))}`);
   }
   console.log('');
 
@@ -946,25 +1941,23 @@ export async function viewQAHistory() {
     message: 'Open a report?',
     options: [
       ...history.runs.slice(0, 8).map(r => ({
-        value: r.id,
-        label: `${r.id} — ${new Date(r.startedAt).toLocaleString()} — ${r.bugCount} bugs`,
+        value: r.htmlPath || r.id,
+        label: `${r.id} — ${new Date(r.startedAt).toLocaleString()} — ${r.bugCount} bugs${r.playwrightMode ? ' 🎭' : ''}`,
       })),
       { value: '__back', label: '↩ Back' },
     ],
   });
   if (p.isCancel(chosen) || chosen === '__back') return;
 
-  const reportPath = path.join(REPORT_DIR, `${chosen.toLowerCase()}.html`);
+  const reportPath = chosen.endsWith('.html') ? chosen : path.join(REPORT_DIR, `${chosen.toLowerCase()}.html`);
   if (await fs.pathExists(reportPath)) {
     console.log(chalk.green(`  📄 Report: ${reportPath}`));
     try {
       const { exec } = await import('node:child_process');
-      const cmd = process.platform === 'darwin' ? 'open'
-                : process.platform === 'win32'  ? 'start'
-                : 'xdg-open';
+      const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
       exec(`${cmd} "${reportPath}"`);
     } catch {}
   } else {
-    console.log(chalk.yellow('  Report file not found — may have been deleted.'));
+    console.log(chalk.yellow('  Report file not found.'));
   }
-}
+}