create-backlist 10.0.9 → 10.1.0

package/src/qa/qa-engine.js

@@ -1,6 +1,6 @@
 // ═══════════════════════════════════════════════════════════════════════════
-//  Backlist Enterprise QA Engine v12.0 — FIXED COMPLETE EDITION
-//  100% Real Runtime Testing · No Fake Data · Live Demo Support
+//  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';
@@ -13,32 +13,32 @@ import { performance } from 'node:perf_hooks';
 import { EventEmitter } from 'node:events';
 
 // ── 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 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 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 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`;
+  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`;
 };
 
-// ── Safe readline prompt (fixes: await inside non-async Promise) ──────────
+// ── readline helper ───────────────────────────────────────────────────────
 function askYesNo(question) {
   return new Promise((resolve) => {
-    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    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);
@@ -48,8 +48,18 @@ function askYesNo(question) {
   });
 }
 
+// ── Playwright availability check ────────────────────────────────────────
+async function getPlaywright() {
+  try {
+    const pw = await import('playwright');
+    return pw.chromium || pw.default?.chromium || null;
+  } catch {
+    return null;
+  }
+}
+
 // ═══════════════════════════════════════════════════════════════════════════
-//  QA Session — stores ALL real runtime data
+//  QA Session
 // ═══════════════════════════════════════════════════════════════════════════
 export class QASession {
   id;
@@ -66,6 +76,7 @@ export class QASession {
   secFindings   = [];
   a11yResults   = [];
   seoResults    = [];
+  playwrightMode = false;
 
   constructor(urls = {}) {
     this.id        = `QA-${shortId().toUpperCase()}`;
@@ -74,7 +85,13 @@ export class QASession {
   }
 
   addResult(r)  { this.results.push(r); }
-  addBug(bug)   { this.bugs.push({ ...bug, id: `BUG-${shortId().toUpperCase()}`, createdAt: timestamp() }); }
+  addBug(bug)   {
+    this.bugs.push({
+      ...bug,
+      id: `BUG-${shortId().toUpperCase()}`,
+      createdAt: timestamp(),
+    });
+  }
 
   getSummary() {
     const passed  = this.results.filter(r => r.status === 'PASS').length;
@@ -91,7 +108,7 @@ export class QASession {
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-//  HTTP Probe — real HTTP requests, no mocking
+//  HTTP Probe — real HTTP requests
 // ═══════════════════════════════════════════════════════════════════════════
 async function httpProbe(url, { method = 'GET', timeout = 12000, headers = {} } = {}) {
   const t0 = Date.now();
@@ -101,7 +118,7 @@ async function httpProbe(url, { method = 'GET', timeout = 12000, headers = {} }
     const res   = await fetch(url, {
       method,
       signal  : ctrl.signal,
-      headers : { 'User-Agent': 'Backlist-QA/12.0', Accept: '*/*', ...headers },
+      headers : { 'User-Agent': 'Backlist-QA/13.0', Accept: '*/*', ...headers },
       redirect: 'follow',
     });
     clearTimeout(timer);
@@ -121,8 +138,7 @@ async function httpProbe(url, { method = 'GET', timeout = 12000, headers = {} }
       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,
+      responseTime: rt, url, method, error: null,
     };
   } catch (err) {
     return {
@@ -135,14 +151,351 @@ async function httpProbe(url, { method = 'GET', timeout = 12000, headers = {} }
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-//  Route Crawler — real HTTP crawl, discovers all pages & APIs
+//  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;
+  }
+
+  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'],
+    });
+
+    context = await browser.newContext({
+      viewport: { width: 1280, height: 900 },
+      userAgent: 'Backlist-QA/13.0 (Playwright)',
+      ignoreHTTPSErrors: true,
+      recordVideo: options.recordVideo ? { dir: SCREENSHOT_DIR } : undefined,
+    });
+
+    page = await context.newPage();
+
+    // ── 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);
+      }
+    });
+
+    // ── 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() });
+    });
+
+    // ── 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 });
+      }
+    });
+
+    // ── 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 };
+    }
+
+    // ── 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) {
+      interactions.push({ name: 'Page scroll', pass: false, value: err.message });
+    }
+
+    // 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' });
+    }
+
+    // Hover test on first link
+    try {
+      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' });
+      }
+    } catch {
+      interactions.push({ name: 'Link hover', pass: false, value: 'Hover failed' });
+    }
+
+    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(() => ({}));
+
+    results.resourceStats = resourceStats;
+
+    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 {}
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+//  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 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) {
@@ -151,17 +504,16 @@ async function crawlSite(baseUrl, { maxPages = 50, onRoute } = {}) {
     if (!n || visited.has(n) || !sameOrigin(n) || depth > 3) continue;
     visited.add(n);
 
-    const r = await httpProbe(n, { timeout: 10000 });
+    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';
+      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';
     })();
 
-    // Extract links from HTML
     const links = [];
     if (r.contentType.includes('text/html')) {
       const re = /href=["']([^"'#?][^"']*?)["']/gi;
@@ -171,17 +523,16 @@ async function crawlSite(baseUrl, { maxPages = 50, onRoute } = {}) {
       }
     }
 
-    // Extract forms
-    const forms = [];
+    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;
+      const ir     = /<input([^>]*)>/gi; let inp;
       while ((inp = ir.exec(fm[2])) !== null) {
-        const name = (inp[1].match(/name=["']([^"']+)["']/) || [])[1];
+        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]) });
       }
@@ -198,7 +549,7 @@ async function crawlSite(baseUrl, { maxPages = 50, onRoute } = {}) {
     }
   }
 
-  // Probe common API endpoints
+  // 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 {
@@ -219,62 +570,67 @@ async function crawlSite(baseUrl, { maxPages = 50, onRoute } = {}) {
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-//  Security Scanner — real HTTP header analysis
+//  Security Scanner
 // ═══════════════════════════════════════════════════════════════════════════
 async function runSecurityScan(url) {
   const findings = [];
-  const r = await httpProbe(url);
+  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' }];
+    return [{
+      check: 'Server reachable', pass: false, severity: 'P0', category: 'connectivity',
+      detail: `Cannot reach ${url}: ${r.error}`, recommendation: 'Ensure server is running',
+    }];
   }
 
   const h = r.headers;
 
   const headerChecks = [
-    { id: 'csp',    name: 'Content-Security-Policy',  header: 'content-security-policy', sev: 'P1',
+    { 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',
+    { 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',
+    { 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',
+    { 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',
+    { 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',
+    { 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 (app.disable("x-powered-by"))' },
+    { 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,
+    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 } });
+      recommendation: c.rec, evidence: { header: c.header, value: val || null },
+    });
   }
 
-  // HTTPS check
   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 traffic',
-    recommendation: 'Use HTTPS with valid SSL', evidence: { protocol: new URL(url).protocol } });
+  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 },
+  });
 
-  // CORS wildcard check
   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,
+  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 } });
+    evidence: { 'access-control-allow-origin': corsOrigin, 'access-control-allow-credentials': corsCreds },
+  });
 
-  // Probe sensitive paths
-  const base = new URL(url).origin;
+  const base      = new URL(url).origin;
   const sensitives = [
     { path: '/.env',          name: '.env exposed' },
     { path: '/.git/config',   name: 'Git config exposed' },
@@ -290,11 +646,13 @@ async function runSecurityScan(url) {
       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',
+      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 } });
+        evidence: { url: `${base}${s.path}`, status: res.status },
+      });
     } catch {}
   }
 
@@ -302,13 +660,13 @@ async function runSecurityScan(url) {
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-//  SEO Scanner — real HTML parsing with Googlebot UA
+//  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 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 rt   = Date.now() - t0;
   const checks = [];
 
   const has = (p) => p.test(html);
@@ -337,7 +695,7 @@ async function runSEOScan(url) {
   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 <meta name="viewport" content="width=device-width,initial-scale=1">' });
+    recommendation: 'Add viewport meta tag' });
 
   const lang = get(/<html[^>]+lang=["']([^"']+)["']/i);
   checks.push({ name: 'HTML lang', pass: !!lang, severity: 'P1', category: 'accessibility-seo',
@@ -353,8 +711,8 @@ async function runSEOScan(url) {
     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;
+  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' });
@@ -363,7 +721,6 @@ async function runSEOScan(url) {
     category: 'performance-seo', detail: `TTFB: ${rt}ms (Google: <800ms)`,
     recommendation: 'Optimize TTFB with CDN and caching' });
 
-  // robots.txt & sitemap
   const base = new URL(url).origin;
   for (const [file, name] of [['/robots.txt','robots.txt'],['/sitemap.xml','sitemap.xml']]) {
     try {
@@ -376,48 +733,11 @@ async function runSEOScan(url) {
     }
   }
 
-  return { pass: checks.filter(c=>!c.pass && c.severity !== 'P3').length === 0, checks, url, responseTime: rt };
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-//  Performance Profiler — real HTTP TTFB + resource timing
-// ═══════════════════════════════════════════════════════════════════════════
-async function runPerfProfile(url) {
-  const t0  = Date.now();
-  const r   = await httpProbe(url, { timeout: 15000 });
-  const ttfb = Date.now() - t0;
-
-  const slowResources = [];
-  if (ttfb > 3000) slowResources.push({ url, duration: ttfb, size: r.bodySize, type: 'document' });
-
-  // Parse resource hints from HTML
-  const resourceUrls = [];
-  if (r.contentType.includes('text/html')) {
-    const scriptRe = /src=["']([^"']+\.(?:js|css))["']/gi;
-    let m;
-    while ((m = scriptRe.exec(r.body)) !== null) {
-      try { resourceUrls.push(new URL(m[1], url).toString()); } catch {}
-    }
-    for (const ru of resourceUrls.slice(0, 5)) {
-      const t1  = Date.now();
-      const rr  = await httpProbe(ru, { timeout: 8000 });
-      const dur = Date.now() - t1;
-      if (dur > 1000) slowResources.push({ url: ru, duration: dur, size: rr.bodySize, type: ru.endsWith('.css') ? 'stylesheet' : 'script' });
-    }
-  }
-
-  return {
-    ttfb, totalTime: ttfb, bodySize: r.bodySize,
-    statusCode: r.status, slowResources,
-    lcp: null, fcp: null, cls: null, fid: null, tbt: null,
-    resourceTimings: [],
-    url, mode: 'http',
-    note: 'LCP/FCP/CLS require Playwright — run: npx playwright install chromium',
-  };
+  return { pass: checks.filter(c => !c.pass && c.severity !== 'P3').length === 0, checks, url, responseTime: rt };
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-//  Accessibility Scanner — real HTML analysis + axe-core hint
+//  Accessibility Scanner — HTML analysis
 // ═══════════════════════════════════════════════════════════════════════════
 async function runA11yScan(url) {
   const r    = await httpProbe(url, { timeout: 12000 });
@@ -425,13 +745,13 @@ async function runA11yScan(url) {
   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: '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' },
   ];
 
@@ -450,7 +770,7 @@ async function runA11yScan(url) {
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-//  AI Bug Classifier — local pattern matching (no external API needed)
+//  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],
@@ -459,13 +779,13 @@ const SEV_PATTERNS = {
   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,
+  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,
+  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 || ''}`;
@@ -478,25 +798,26 @@ function classifyBug(bug) {
     if (pat.test(text)) { category = cat; break; }
   }
   const recs = {
-    security: 'Review security config and run penetration test',
-    performance: 'Run Lighthouse and optimize assets/server',
+    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',
+    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 };
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-//  Terminal Dashboard — live real-time display
+//  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; }
+  constructor(s) { this.#session = s; this.#pwMode = s.playwrightMode; }
 
   start() {
     this.#active = true; this.#startTime = Date.now();
@@ -513,9 +834,9 @@ class TerminalDashboard {
     this.#printFinal();
   }
 
-  setPhase(p)      { this.#phase = p; this.log(chalk.cyan(p)); }
+  setPhase(p)       { this.#phase = p; this.log(chalk.cyan(p)); }
   setCurrentTest(t) { this.#currentTest = t; }
-  addResult()      { this.#currentTest = ''; }
+  addResult()       { this.#currentTest = ''; }
   log(msg) {
     this.#log.push(`${chalk.gray(new Date().toLocaleTimeString())} ${msg}`);
     if (this.#log.length > 8) this.#log.shift();
@@ -525,7 +846,7 @@ class TerminalDashboard {
     if (!this.#active) return;
     this.#clear();
     const lines = this.#build();
-    this.#lines = lines.length;
+    this.#lines  = lines.length;
     process.stdout.write(lines.join('\n') + '\n');
   }
 
@@ -551,16 +872,17 @@ class TerminalDashboard {
     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 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 ENTERPRISE QA v${VERSION} — REAL RUNTIME TESTING`)) + c1('│'),
+      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}┤`),
@@ -569,7 +891,7 @@ class TerminalDashboard {
       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('APIs:')} ${chalk.white(s.apiLog.length)}  ${chalk.cyan('Bugs:')} ${chalk.white(s.bugs.length)}  ${chalk.cyan('Screenshots:')} ${chalk.white(s.screenshots.length)}`) + c1('│'),
+      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}┤`),
     ];
 
@@ -586,37 +908,41 @@ class TerminalDashboard {
     }
     for (let i = this.#log.length; i < 4; i++) out.push(c1('│') + pad('') + c1('│'));
     out.push(c1(`└${bar}┘`));
-    out.push(chalk.dim(`  Real runtime data · ${total} tests · ${s.bugs.length} bugs · Ctrl+C to stop`));
+    out.push(chalk.dim(`  Real browser data · ${total} tests · ${s.bugs.length} bugs · Ctrl+C to stop`));
 
     return out;
   }
 
   #printFinal() {
-    const s = this.#session.getSummary();
+    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(`  Duration:   ${chalk.white(formatDuration(s.duration))}`);
-    console.log(`  Routes:     ${chalk.white(this.#session.routeMap.length)} discovered`);
+    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('');
   }
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-//  HTML Report Builder — stunning dark theme, 100% real data
+//  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 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 => { if (sevCounts[(b.aiSeverity||b.severity)] !== undefined) sevCounts[b.aiSeverity||b.severity]++; });
+  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]++;
+  });
 
   const coverage = {};
   for (const r of session.results) {
@@ -627,6 +953,31 @@ function buildHTMLReport(session) {
 
   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>
@@ -637,8 +988,10 @@ function buildHTMLReport(session) {
       <td class="err-cell">${r.message ? `<details><summary>Details</summary><pre>${esc(String(r.message).slice(0,500))}</pre></details>` : '✓'}</td>
     </tr>`).join('');
 
-  const bugCards = session.bugs.length ? session.bugs.map(b => `
-    <div class="bug-card sev-border-${(b.aiSeverity||b.severity||'p3').toLowerCase()}">
+  // ── 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>
@@ -649,8 +1002,10 @@ function buildHTMLReport(session) {
       ${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>';
+    </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>
@@ -660,6 +1015,7 @@ function buildHTMLReport(session) {
       <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>
@@ -670,52 +1026,43 @@ function buildHTMLReport(session) {
       <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>
+      <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>
+        <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>
+          <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>
+      <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>
+        <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>
+          <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>';
 
-  const perfSection = Object.entries(session.perfMetrics).map(([label, m]) => `
-    <div class="perf-card">
-      <h3>${esc(label)}</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')}
-      </div>
-      ${m.note ? `<p class="perf-note">ℹ️ ${esc(m.note)}</p>` : ''}
-      ${(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>` : ''}
-    </div>`).join('') || '<p class="no-data">No performance data</p>';
-
-  function vitalCard(name, value, threshold, unit) {
+  // ── 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';
@@ -726,15 +1073,100 @@ function buildHTMLReport(session) {
       <div class="vital-value" style="color:${color}">${disp}</div>
       <div class="vital-threshold">≤${threshold}${unit}</div>
     </div>`;
-  }
+  };
 
-  const urlsStr = Object.entries(session.urls).filter(([,v])=>v)
+  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 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">
@@ -752,13 +1184,13 @@ 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}
-.version-badge{font-size:.7rem;padding:3px 10px;border-radius:20px;border:1px solid var(--purple);color:var(--purple)}
 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}
-.real-banner{background:rgba(0,245,255,.06);border:1px solid #00f5ff33;border-radius:8px;padding:.75rem 1rem;margin-bottom:1.5rem;font-size:.83rem;color:var(--cyan);display:flex;align-items:center;gap:.5rem}
+.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)}
@@ -780,6 +1212,7 @@ tr.fail-row td{background:rgba(239,68,68,.04)}
 .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}
@@ -799,6 +1232,18 @@ details summary{cursor:pointer;color:var(--cyan);font-size:.78rem;user-select:no
 .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}
@@ -820,7 +1265,7 @@ details summary{cursor:pointer;color:var(--cyan);font-size:.78rem;user-select:no
 .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)}}
+@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>
@@ -831,11 +1276,12 @@ footer{text-align:center;color:var(--dim);font-size:.7rem;padding:2rem;border-to
       Run: ${esc(session.id)} · ${new Date(session.startedAt).toLocaleString()} · ${formatDuration(summary.duration)} · v${VERSION}
     </div>
   </div>
-  <span class="version-badge">v${VERSION}</span>
+  ${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>
@@ -843,10 +1289,14 @@ footer{text-align:center;color:var(--dim);font-size:.7rem;padding:2rem;border-to
   <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">
-<div class="real-banner">✅ <strong>100% Real Runtime Data</strong> — All results from actual HTTP requests and live application testing. No mocked or simulated values.</div>
+
+${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">
@@ -859,10 +1309,10 @@ footer{text-align:center;color:var(--dim);font-size:.7rem;padding:2rem;border-to
     <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">APIs Tested</div><div class="mv">${session.apiLog.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">SEO Checks</div><div class="mv">${session.seoResults.reduce((a,r)=>a+(r.checks?.length||0),0)}</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">
@@ -871,6 +1321,15 @@ footer{text-align:center;color:var(--dim);font-size:.7rem;padding:2rem;border-to
   </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">
@@ -910,7 +1369,7 @@ footer{text-align:center;color:var(--dim);font-size:.7rem;padding:2rem;border-to
 <!-- ROUTES -->
 <div id="tab-routes" class="tab-panel">
   <div class="card">
-    <div class="card-title">Discovered Routes <span>${session.routeMap.length} real pages/APIs</span></div>
+    <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>
@@ -931,25 +1390,41 @@ footer{text-align:center;color:var(--dim);font-size:.7rem;padding:2rem;border-to
 
 <!-- PERFORMANCE -->
 <div id="tab-performance" class="tab-panel">
-  <div class="card-title" style="padding:.5rem 0 1rem">Real Performance Metrics — HTTP TTFB + Resource Analysis</div>
+  <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 Analysis — Real HTML WCAG Checks</div>
+  <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 — Fetched with Googlebot User-Agent</div>
+  <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 · ${new Date().toLocaleString()}</footer>
+<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) {
@@ -959,23 +1434,18 @@ function showTab(name, el) {
   el?.classList.add('active');
 }
 function filterTests() {
-  const s = (document.getElementById('testSearch')?.value||'').toLowerCase();
+  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 => {
-    const show = row.textContent.toLowerCase().includes(s)
-              && (!st || row.dataset.status === st)
-              && (!ty || row.dataset.type === ty);
-    row.style.display = show ? '' : 'none';
+    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 => {
-    const show = card.textContent.toLowerCase().includes(s)
-              && (!sv || card.dataset.severity === sv);
-    card.style.display = show ? '' : 'none';
+    card.style.display = (card.textContent.toLowerCase().includes(s) && (!sv || card.dataset.severity===sv)) ? '' : 'none';
   });
 }
 const chartCfg = {
@@ -993,7 +1463,7 @@ new Chart(document.getElementById('bugChart'),{type:'doughnut',data:{labels:['P0
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-//  Main QA Runner
+//  Main QA Runner — v13 with Playwright integration
 // ═══════════════════════════════════════════════════════════════════════════
 async function runQAEngine(session) {
   const dash = new TerminalDashboard(session);
@@ -1012,7 +1482,7 @@ async function runQAEngine(session) {
     for (const [label, url] of Object.entries(session.urls)) {
       if (!url) continue;
       dash.log(`Crawling ${label}: ${url}`);
-      const t0 = Date.now();
+      const t0     = Date.now();
       const routes = await crawlSite(url, {
         maxPages: 50,
         onRoute: (route) => {
@@ -1025,8 +1495,126 @@ async function runQAEngine(session) {
         message: `Discovered ${routes.length} routes in ${Date.now()-t0}ms`, url, label });
     }
 
-    // ── Phase 2: API Validation ──────────────────────────────────────────
-    dash.setPhase('📡 Phase 2: API Validation');
+    // ── 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' });
+      }
+    }
+
+    // ── 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) {
@@ -1042,8 +1630,8 @@ async function runQAEngine(session) {
         description: r.error || `HTTP ${r.status}`, evidence: { status: r.status, error: r.error } });
     }
 
-    // ── Phase 3: Security ────────────────────────────────────────────────
-    dash.setPhase('🛡️  Phase 3: Security Scan');
+    // ── 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}`);
@@ -1059,24 +1647,6 @@ async function runQAEngine(session) {
       }
     }
 
-    // ── Phase 4: Performance ─────────────────────────────────────────────
-    dash.setPhase('⚡ Phase 4: Performance Profiling');
-    for (const [label, url] of Object.entries(session.urls)) {
-      if (!url) continue;
-      dash.setCurrentTest(`Perf: ${url}`);
-      const m = await runPerfProfile(url);
-      session.perfMetrics[label] = m;
-      addResult({ name: `[${label}] TTFB`, type: 'performance', category: 'web-vitals',
-        status: m.ttfb <= 800 ? 'PASS' : 'FAIL',
-        message: `TTFB: ${m.ttfb}ms (threshold: ≤800ms)`, url, label, duration: m.ttfb });
-      if (m.ttfb > 800) session.addBug({ title: `Slow TTFB: ${m.ttfb}ms`, severity: m.ttfb > 2000 ? 'P1' : 'P2',
-        type: 'performance', url, evidence: { ttfb: m.ttfb }, recommendation: 'Optimize server response time' });
-      for (const res of (m.slowResources || [])) {
-        addResult({ name: `Slow resource: ${res.url?.split('/').pop()}`, type: 'performance',
-          category: 'resource', status: 'FAIL', message: `${res.duration}ms (${formatBytes(res.size)})`, url, label });
-      }
-    }
-
     // ── Phase 5: Accessibility ───────────────────────────────────────────
     dash.setPhase('♿ Phase 5: Accessibility Check');
     const pageRoutes = session.routeMap.filter(r => r.type === 'page' || r.type === 'auth').slice(0, 10);
@@ -1090,8 +1660,7 @@ async function runQAEngine(session) {
           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 });
+          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 });
@@ -1118,11 +1687,11 @@ async function runQAEngine(session) {
     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;
+      const cls            = classifyBug(bug);
+      bug.aiSeverity       = cls.severity;
+      bug.aiCategory       = cls.category;
       bug.aiRecommendation = cls.recommendation;
-      bug.aiConfidence    = cls.confidence;
+      bug.aiConfidence     = cls.confidence;
     }
     session.bugs.sort((a, b) => {
       const o = { P0: 0, P1: 1, P2: 2, P3: 3 };
@@ -1141,22 +1710,25 @@ async function runQAEngine(session) {
 // ═══════════════════════════════════════════════════════════════════════════
 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();
+  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: 'real-runtime' },
+    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,
+      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 });
 
@@ -1182,6 +1754,8 @@ async function saveToHistory(session, htmlPath, jsonPath) {
   history.runs.unshift({
     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);
@@ -1189,9 +1763,8 @@ async function saveToHistory(session, htmlPath, jsonPath) {
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-//  Public API
+//  Public API — runUrlQA (main entry point)
 // ═══════════════════════════════════════════════════════════════════════════
-
 export async function runUrlQA({ localUrl, stagingUrl, prodUrl } = {}) {
   const urls = {};
   if (localUrl)   urls.localhost  = localUrl;
@@ -1200,17 +1773,31 @@ export async function runUrlQA({ localUrl, stagingUrl, prodUrl } = {}) {
 
   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);
   await runQAEngine(session);
   const { htmlPath, jsonPath } = await generateReports(session);
   await saveToHistory(session, htmlPath, jsonPath);
 
   const summary = session.getSummary();
-  console.log(chalk.hex('#00F5FF').bold(`  ✓ ${session.id} — ${summary.total} tests · ${summary.failed} failed · ${session.bugs.length} bugs`));
+  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}`));
+  }
 
-  // Auto-open report
   try {
     const { exec } = await import('node:child_process');
     const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
@@ -1249,7 +1836,8 @@ export async function runManualQA() {
   const action = await p.select({
     message: 'Manual QA mode:',
     options: [
-      { value: 'full',     label: '🌐 Full Scan (All phases)' },
+      { 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' },
@@ -1270,7 +1858,15 @@ export async function runManualQA() {
     const dash = new TerminalDashboard(sess);
     dash.start();
     try {
-      if (action === 'security') {
+      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',
@@ -1286,10 +1882,20 @@ export async function runManualQA() {
         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 m = await runPerfProfile(url);
-        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() });
+        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(); }
   }
@@ -1326,7 +1932,8 @@ export async function viewQAHistory() {
     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(', ');
-    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')} ${chalk.dim(urls.slice(0,40))}`);
+    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('');
 
@@ -1335,7 +1942,7 @@ export async function viewQAHistory() {
     options: [
       ...history.runs.slice(0, 8).map(r => ({
         value: r.htmlPath || r.id,
-        label: `${r.id} — ${new Date(r.startedAt).toLocaleString()} — ${r.bugCount} bugs`,
+        label: `${r.id} — ${new Date(r.startedAt).toLocaleString()} — ${r.bugCount} bugs${r.playwrightMode ? ' 🎭' : ''}`,
       })),
       { value: '__back', label: '↩ Back' },
     ],
@@ -1353,4 +1960,4 @@ export async function viewQAHistory() {
   } else {
     console.log(chalk.yellow('  Report file not found.'));
   }
-}
+}