inspectra-engine 0.0.0-stage → 1.0.2

package/server.js

@@ -0,0 +1,361 @@
+// Local UI: paste a URL, get a WCAG accessibility report. Run: npm run ui
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const { chromium } = require('playwright');
+
+const PORT = process.env.PORT || 3000;
+
+const REVIEWS_FILE = process.env.UI_REVIEWS_FILE || path.join(__dirname, 'visual-reports', 'reviews.json');
+const REVIEW_STATUSES = ['issue', 'accepted', 'ignored'];
+const reviewKey = (ref, tgt) => `${String(ref || '').trim()} -> ${String(tgt || '').trim()}`;
+function readReviews() {
+  try {
+    return JSON.parse(fs.readFileSync(REVIEWS_FILE, 'utf8'));
+  } catch {
+    return {};
+  }
+}
+function writeReviews(all) {
+  fs.mkdirSync(path.dirname(REVIEWS_FILE), { recursive: true });
+  const tmp = `${REVIEWS_FILE}.tmp`;
+  fs.writeFileSync(tmp, JSON.stringify(all, null, 2));
+  fs.renameSync(tmp, REVIEWS_FILE);
+}
+
+// Lighthouse-style scoring: weighted share of applicable rules that pass.
+const WEIGHT = { critical: 10, serious: 7, moderate: 3, minor: 1 };
+const LEVEL_A = ['wcag2a', 'wcag21a'];
+const LEVEL_AA = ['wcag2aa', 'wcag21aa', 'wcag22aa'];
+
+function ruleWeight(rule, failed) {
+  const impact = failed
+    ? rule.impact
+    : rule.nodes.flatMap(n => [...n.any, ...n.all]).map(c => c.impact).find(Boolean);
+  return WEIGHT[impact] || WEIGHT.moderate;
+}
+
+function score(violations, passes, tags) {
+  const hit = r => !tags || r.tags.some(t => tags.includes(t));
+  let pass = 0, total = 0, failed = 0, passed = 0;
+  for (const r of passes.filter(hit)) { const w = ruleWeight(r, false); pass += w; total += w; passed++; }
+  for (const r of violations.filter(hit)) { total += ruleWeight(r, true); failed++; }
+  return { score: total ? Math.round((pass / total) * 100) : null, passed, failed };
+}
+
+// Flatten a Lighthouse table cell into display text.
+function cell(v) {
+  if (v == null) return '';
+  if (typeof v !== 'object') return String(v);
+  if (v.type === 'node') return v.snippet || v.selector || '';
+  if (v.type === 'source-location') return `${v.url}:${(v.line || 0) + 1}`;
+  if (v.type === 'link') return v.url || v.text || '';
+  if (v.type === 'code') return String(v.value);
+  if (v.type === 'numeric') return String(Math.round(v.value * 100) / 100);
+  if (v.url) return v.url;
+  if (v.value != null) return String(v.value);
+  if (v.text != null) return String(v.text);
+  return '';
+}
+
+function auditDetails(d) {
+  if (!d || !['table', 'opportunity', 'list'].includes(d.type)) return null;
+  if (d.type === 'list') return null;
+  const heads = (d.headings || []).filter(h => h.key).map(h => ({ key: h.key, label: cell(h.label) }));
+  const rows = (d.items || []).slice(0, 15).map(it => heads.map(h => cell(it[h.key])));
+  return rows.length ? { headings: heads.map(h => h.label), rows, total: (d.items || []).length } : null;
+}
+
+async function lighthouseScores(url, port) {
+  const { default: lighthouse } = await import('lighthouse');
+  const { default: agenticConfig } = await import('lighthouse/core/config/agentic-browsing-config.js');
+  const { lhr, report } = await lighthouse(
+    url,
+    {
+      port,
+      output: ['json', 'html'],
+      logLevel: 'error',
+      onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo', 'agentic-browsing']
+    },
+    agenticConfig
+  );
+  const scores = {};
+  const categories = [];
+  for (const [k, c] of Object.entries(lhr.categories)) {
+    const audits = c.auditRefs
+      .filter(r => r.weight > 0 || r.group)
+      .map(r => {
+        const a = lhr.audits[r.id];
+        if (!a) return null;
+        const mode = a.scoreDisplayMode;
+        const status =
+          mode === 'notApplicable' ? 'na'
+          : mode === 'manual' ? 'manual'
+          : mode === 'informative' ? 'info'
+          : mode === 'error' ? 'error'
+          : a.score === 1 || a.score >= 0.9 ? 'pass'
+          : 'fail';
+        return {
+          id: a.id,
+          title: a.title,
+          description: a.description,
+          displayValue: a.displayValue || '',
+          score: a.score,
+          status,
+          group: r.group ? (lhr.categoryGroups?.[r.group]?.title || r.group) : '',
+          details: status === 'pass' ? null : auditDetails(a.details)
+        };
+      })
+      .filter(Boolean);
+    if (k === 'agentic-browsing') {
+      // Fraction category: passed / applicable audits.
+      const applicable = audits.filter(a => ['pass', 'fail'].includes(a.status));
+      scores[k] = { passed: applicable.filter(a => a.status === 'pass').length, total: applicable.length };
+    } else {
+      scores[k] = c.score == null ? null : Math.round(c.score * 100);
+    }
+    categories.push({ id: k, title: c.title, audits });
+  }
+  return { scores, categories, report: report[1] };
+}
+
+const reports = new Map(); // id -> full Lighthouse HTML report
+let reportSeq = 0;
+
+async function scan(url, bestPractice) {
+  const port = 9300 + Math.floor(Math.random() * 500);
+  const browser = await chromium.launch({ args: [`--remote-debugging-port=${port}`] });
+  try {
+    let lighthouse = null, lighthouseError = null, lighthouseCategories = null, reportId = null;
+    try {
+      const lh = await lighthouseScores(url, port);
+      lighthouse = lh.scores;
+      lighthouseCategories = lh.categories;
+      reportId = String(++reportSeq);
+      reports.set(reportId, lh.report);
+      if (reports.size > 10) reports.delete(reports.keys().next().value);
+    } catch (e) {
+      lighthouseError = String(e.message).split('\n')[0];
+      console.error('Lighthouse failed:', e.message);
+    }
+    const page = await (await browser.newContext()).newPage();
+    await page.goto(url, { waitUntil: 'load', timeout: 45000 });
+    const { scanAccessibility } = await import('./scanner/accessibility.mjs');
+    const r = await scanAccessibility(page, { bestPractice });
+    return {
+      url: r.url,
+      lighthouse,
+      lighthouseError,
+      lighthouseCategories,
+      reportId,
+      scores: {
+        overall: score(r.violations, r.passes),
+        a: score(r.violations, r.passes, LEVEL_A),
+        aa: score(r.violations, r.passes, LEVEL_AA)
+      },
+      counts: {
+        violations: r.violations.length,
+        incomplete: r.incomplete.length,
+        passes: r.passes.length
+      },
+      violations: r.violations.map(v => ({
+        id: v.id,
+        impact: v.impact,
+        help: v.help,
+        helpUrl: v.helpUrl,
+        tags: v.tags.filter(t => t.startsWith('wcag')),
+        nodes: v.nodes.slice(0, 10).map(n => ({
+          target: n.target.join(' '),
+          html: n.html,
+          fix: n.failureSummary
+        })),
+        totalNodes: v.nodes.length
+      }))
+    };
+  } finally {
+    await browser.close();
+  }
+}
+
+http
+  .createServer(async (req, res) => {
+    const parsedUrl = new URL(req.url, `http://${req.headers.host || 'localhost'}`);
+    const pathname = parsedUrl.pathname;
+
+    if (req.method === 'GET' && pathname === '/') {
+      res.setHeader('Content-Type', 'text/html; charset=utf-8');
+      return res.end(fs.readFileSync(path.join(__dirname, 'ui', 'index.html')));
+    }
+    if (req.method === 'GET' && (pathname === '/compare' || pathname === '/compare.html')) {
+      res.setHeader('Content-Type', 'text/html; charset=utf-8');
+      return res.end(fs.readFileSync(path.join(__dirname, 'ui', 'compare.html')));
+    }
+    if (req.method === 'GET' && (pathname === '/compare-2' || pathname === '/compare-2.html')) {
+      res.setHeader('Content-Type', 'text/html; charset=utf-8');
+      return res.end(fs.readFileSync(path.join(__dirname, 'ui', 'compare-2.html')));
+    }
+    if (req.method === 'GET' && (pathname === '/compare-3' || pathname === '/compare-3.html')) {
+      res.setHeader('Content-Type', 'text/html; charset=utf-8');
+      return res.end(fs.readFileSync(path.join(__dirname, 'ui', 'compare-3.html')));
+    }
+    if (req.method === 'GET' && pathname === '/api/last-compare-result') {
+      const resultPath = path.join(__dirname, 'visual-reports', 'result.json');
+      res.setHeader('Content-Type', 'application/json');
+      if (fs.existsSync(resultPath)) {
+        return res.end(fs.readFileSync(resultPath));
+      }
+      return res.end(JSON.stringify(null));
+    }
+    const reportFileMatch = req.method === 'GET' && pathname.match(/^\/visual-reports\/((?:runs\/[a-zA-Z0-9_-]+\/)?[a-zA-Z0-9_-][a-zA-Z0-9_\-\.]*)$/);
+    if (reportFileMatch) {
+      const filename = reportFileMatch[1];
+      const filePath = path.join(__dirname, 'visual-reports', filename);
+      if (fs.existsSync(filePath)) {
+        const ext = path.extname(filename).toLowerCase();
+        const mimeMap = {
+          '.png': 'image/png',
+          '.json': 'application/json',
+          '.jpg': 'image/jpeg',
+          '.jpeg': 'image/jpeg',
+          '.webp': 'image/webp',
+        };
+        res.setHeader('Content-Type', mimeMap[ext] || 'application/octet-stream');
+        res.setHeader('Cache-Control', 'no-cache');
+        return res.end(fs.readFileSync(filePath));
+      }
+      res.statusCode = 404;
+      return res.end('File not found');
+    }
+    const m = req.method === 'GET' && pathname.match(/^\/report\/(\d+)$/);
+    if (m) {
+      const html = reports.get(m[1]);
+      res.statusCode = html ? 200 : 404;
+      res.setHeader('Content-Type', 'text/html');
+      return res.end(html || 'Report expired. Run the scan again.');
+    }
+    if (req.method === 'POST' && pathname === '/scan') {
+      let body = '';
+      for await (const c of req) body += c;
+      res.setHeader('Content-Type', 'application/json');
+      try {
+        const { url, bestPractice } = JSON.parse(body);
+        if (!/^https?:\/\//i.test(url)) throw new Error('URL must start with http:// or https://');
+        res.end(JSON.stringify(await scan(url, bestPractice)));
+      } catch (e) {
+        res.statusCode = 400;
+        res.end(JSON.stringify({ error: e.message.split('\n')[0] }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && pathname === '/api/compare') {
+      let body = '';
+      for await (const c of req) body += c;
+      res.setHeader('Content-Type', 'application/json');
+      try {
+        const payload = JSON.parse(body);
+        const { compareVisuals } = await import('./compare.js');
+        const result = await compareVisuals(payload);
+        res.end(JSON.stringify(result));
+      } catch (e) {
+        res.statusCode = 400;
+        res.end(JSON.stringify({ error: e.message.split('\n')[0] }));
+      }
+      return;
+    }
+    // Review decisions for UI Check findings, remembered per reference/target URL pair.
+    if (pathname === '/api/reviews') {
+      res.setHeader('Content-Type', 'application/json');
+      try {
+        if (req.method === 'GET') {
+          const key = reviewKey(parsedUrl.searchParams.get('ref'), parsedUrl.searchParams.get('tgt'));
+          return res.end(JSON.stringify(readReviews()[key] || {}));
+        }
+        if (req.method === 'POST') {
+          let body = '';
+          for await (const c of req) body += c;
+          const p = JSON.parse(body);
+          const fp = String(p.fingerprint || '');
+          if (!/^[a-z0-9]{1,32}$/.test(fp)) throw new Error('Invalid fingerprint');
+          const status = p.status == null ? null : String(p.status);
+          if (status !== null && !REVIEW_STATUSES.includes(status)) throw new Error('Invalid status');
+          const all = readReviews();
+          const key = reviewKey(p.referenceUrl, p.targetUrl);
+          const pair = (all[key] = all[key] || {});
+          if (status === null && p.note == null) {
+            delete pair[fp];
+          } else {
+            const prev = pair[fp] || {};
+            pair[fp] = {
+              status: status ?? prev.status ?? null,
+              note: p.note != null ? String(p.note).slice(0, 2000) : prev.note || '',
+              type: String(p.type || prev.type || '').slice(0, 200),
+              at: new Date().toISOString(),
+            };
+          }
+          writeReviews(all);
+          return res.end(JSON.stringify(pair));
+        }
+        res.statusCode = 405;
+        return res.end(JSON.stringify({ error: 'Method not allowed' }));
+      } catch (e) {
+        res.statusCode = 400;
+        return res.end(JSON.stringify({ error: e.message.split('\n')[0] }));
+      }
+    }
+    if (req.method === 'POST' && pathname === '/api/ui-check') {
+      let body = '';
+      for await (const c of req) body += c;
+      res.setHeader('Content-Type', 'application/json');
+      try {
+        const p = JSON.parse(body);
+        const list = (v, sep) => String(v || '').split(sep).map((x) => x.trim()).filter(Boolean);
+        const { runUiCheck } = await import('./ui-check.js');
+        const result = await runUiCheck({
+          referenceUrl: String(p.referenceUrl || '').trim(),
+          targetUrl: String(p.targetUrl || '').trim(),
+          viewports: Array.isArray(p.viewports) && p.viewports.length ? p.viewports : ['desktop'],
+          checklist: list(p.checklist, '\n'),
+          customWords: list(p.customWords, /[\n,]/),
+          ignoreSelectors: list(p.ignoreSelectors, ','),
+          spelling: p.spelling === true,
+          styling: p.styling !== false,
+          pixelDiff: p.pixelDiff === true,
+        });
+        res.end(JSON.stringify(result));
+      } catch (e) {
+        res.statusCode = 400;
+        res.end(JSON.stringify({ error: e.message.split('\n')[0] }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && pathname === '/api/compare-dom') {
+      let body = '';
+      for await (const c of req) body += c;
+      res.setHeader('Content-Type', 'application/json');
+      try {
+        const p = JSON.parse(body);
+        const list = (v, sep) => String(v || '').split(sep).map((x) => x.trim()).filter(Boolean);
+        const referenceUrl = String(p.referenceUrl || '').trim();
+        const targetUrl = String(p.targetUrl || '').trim();
+        if (!referenceUrl || !targetUrl) throw new Error('Reference URL and Target URL are required');
+        const ignoreSelectors = list(p.ignoreSelectors, ',');
+        const viewport = {
+          width: Number(p.viewport?.width) || 1440,
+          height: Number(p.viewport?.height) || 900,
+        };
+        const { compareDom } = await import('./dom-compare.js');
+        const { spellCheckUrl } = await import('./ui-check.js');
+        const dom = await compareDom({ referenceUrl, actualUrl: targetUrl, viewport, tolerance: p.tolerance, ignoreSelectors });
+        const spelling = p.spelling === false ? null
+          : await spellCheckUrl({ url: targetUrl, viewport, customWords: list(p.customWords, /[\n,]/), ignoreSelectors });
+        res.end(JSON.stringify({ dom, spelling, referenceUrl, targetUrl, viewport }));
+      } catch (e) {
+        res.statusCode = 400;
+        res.end(JSON.stringify({ error: e.message.split('\n')[0] }));
+      }
+      return;
+    }
+    res.statusCode = 404;
+    res.end('Not found');
+  })
+  .listen(PORT, '127.0.0.1', () => console.log(`Open http://127.0.0.1:${PORT}`));