html/api/ux-overlap-audit.js

// Doctrine 164: Playwright UX overlap audit pour 8 hubs doctrine 60 + WTP
// Screenshots top-right/bot-right zoom + video + Gemini vision
const { chromium } = require('playwright');
const fs = require('fs');
const path = require('path');

const TS = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
const OUTDIR = `/var/www/html/proofs/wevia-ux-overlap-d60-${TS}`;
const SHOTS = `${OUTDIR}/shots`;
const ZOOMS = `${OUTDIR}/zooms`;
const VIDEOS = `${OUTDIR}/videos`;
[OUTDIR, SHOTS, ZOOMS, VIDEOS].forEach(d => fs.mkdirSync(d, { recursive: true }));

const PAGES = [
  { name: 'wtp', url: 'https://weval-consulting.com/weval-technology-platform.html', requires_auth: true },
  { name: 'paperclip-dashboard', url: 'https://weval-consulting.com/paperclip-dashboard.html' },
  { name: 'deerflow-hub', url: 'https://weval-consulting.com/deerflow-hub.html' },
  { name: 'ai-hub', url: 'https://weval-consulting.com/ai-hub.html' },
  { name: 'wevia-multiagent-dashboard', url: 'https://weval-consulting.com/wevia-multiagent-dashboard.html' },
  { name: 'brain-council', url: 'https://weval-consulting.com/brain-council.html' },
  { name: 'agents-hub', url: 'https://weval-consulting.com/agents-hub.html' },
  { name: 'wevia-meeting-rooms', url: 'https://weval-consulting.com/wevia-meeting-rooms.html' },
  { name: 'wevia-meeting', url: 'https://weval-consulting.com/wevia-meeting.php' }
];

(async () => {
  const browser = await chromium.launch({ 
    headless: true,
    args: ['--no-sandbox', '--disable-gpu']
  });
  const context = await browser.newContext({
    viewport: { width: 1440, height: 900 },
    recordVideo: { dir: VIDEOS, size: { width: 1440, height: 900 } },
    extraHTTPHeaders: { 'X-Agent-Token': 'wevia-ux-audit-doctrine164' }
  });
  
  const results = [];
  
  for (const p of PAGES) {
    const pg = await context.newPage();
    const r = { hub: p.name, url: p.url, ok: false, top_right: null, bot_right: null, elements_detected: 0 };
    try {
      await pg.goto(p.url, { waitUntil: 'domcontentloaded', timeout: 15000 });
      await pg.waitForTimeout(2500);
      
      // Full screenshot
      const full = `${SHOTS}/${p.name}-full.png`;
      await pg.screenshot({ path: full, fullPage: false });
      
      // Top-right zoom (last 400x400 of screen)
      const tr = `${ZOOMS}/${p.name}-top-right.png`;
      await pg.screenshot({
        path: tr,
        clip: { x: 1040, y: 0, width: 400, height: 400 }
      });
      r.top_right = tr.replace('/var/www/html', '');
      
      // Bot-right zoom
      const br = `${ZOOMS}/${p.name}-bot-right.png`;
      await pg.screenshot({
        path: br,
        clip: { x: 1040, y: 500, width: 400, height: 400 }
      });
      r.bot_right = br.replace('/var/www/html', '');
      
      // Detect elements in overlap zones (top-right + bot-right)
      const overlaps = await pg.evaluate(() => {
        const findInZone = (x1, y1, x2, y2) => {
          const all = document.querySelectorAll('button, .btn, .toggle, [class*="toggle"], [class*="btn"], .chip, .badge, .fab, [style*="position:fixed"], [style*="position:absolute"]');
          const hits = [];
          for (const el of all) {
            const rect = el.getBoundingClientRect();
            if (rect.width < 2 || rect.height < 2) continue;
            const cx = rect.x + rect.width/2, cy = rect.y + rect.height/2;
            if (cx >= x1 && cx <= x2 && cy >= y1 && cy <= y2) {
              hits.push({
                tag: el.tagName,
                cls: (el.className || '').toString().slice(0, 80),
                text: (el.textContent || '').trim().slice(0, 40),
                x: Math.round(rect.x), y: Math.round(rect.y),
                w: Math.round(rect.width), h: Math.round(rect.height)
              });
            }
          }
          return hits;
        };
        return {
          top_right: findInZone(1040, 0, 1440, 400),
          bot_right: findInZone(1040, 500, 1440, 900)
        };
      });
      
      r.top_right_elements = overlaps.top_right;
      r.bot_right_elements = overlaps.bot_right;
      r.top_right_count = overlaps.top_right.length;
      r.bot_right_count = overlaps.bot_right.length;
      r.elements_detected = overlaps.top_right.length + overlaps.bot_right.length;
      r.has_overlap_top_right = overlaps.top_right.length > 1;
      r.has_overlap_bot_right = overlaps.bot_right.length > 1;
      r.ok = true;
    } catch (e) {
      r.error = e.message.slice(0, 150);
    }
    await pg.close();
    results.push(r);
  }
  
  await context.close();
  await browser.close();
  
  // Summary
  const summary = {
    doctrine: '164',
    ts: new Date().toISOString(),
    pages_count: PAGES.length,
    viewport: '1440x900',
    zones_audited: ['top-right (1040-1440, 0-400)', 'bot-right (1040-1440, 500-900)'],
    results: results,
    overlap_alerts: results.filter(r => r.has_overlap_top_right || r.has_overlap_bot_right).map(r => ({
      hub: r.hub,
      top_right: r.top_right_count,
      bot_right: r.bot_right_count
    }))
  };
  fs.writeFileSync(`${OUTDIR}/summary.json`, JSON.stringify(summary, null, 2));
  
  // Index HTML
  const html = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>UX Overlap Audit ${TS}</title>
<style>body{background:#0a0e1a;color:#e6edf3;font-family:system-ui;padding:20px}
.card{background:#151a26;border:1px solid #2a3444;padding:16px;margin:12px 0;border-radius:8px}
img{max-width:400px;border:1px solid #2a3444;margin:4px;border-radius:4px}
.overlap{color:#f59e0b}.ok{color:#10b981}</style></head><body>
<h1>🎯 UX Overlap Audit Doctrine 164 — ${TS}</h1>
<p>Viewport 1440x900 · Zone analysée: top-right (400x400) + bot-right (400x400)</p>
${results.map(r => `<div class="card">
<h2>${r.hub} <span class="${(r.has_overlap_top_right||r.has_overlap_bot_right)?'overlap':'ok'}">${(r.has_overlap_top_right||r.has_overlap_bot_right)?'⚠ OVERLAP':'✅ OK'}</span></h2>
<p>URL: <a href="${r.url}" style="color:#4ecdc4">${r.url}</a></p>
<p>Top-right elements: <b>${r.top_right_count||0}</b> · Bot-right: <b>${r.bot_right_count||0}</b></p>
<img src="zooms/${r.hub}-top-right.png" alt="TR"> <img src="zooms/${r.hub}-bot-right.png" alt="BR">
</div>`).join('')}
<footer style="opacity:0.6;margin-top:30px">WEVIA · Playwright audit · Published /proofs/ · Auto-discovery Gemini vision</footer>
</body></html>`;
  fs.writeFileSync(`${OUTDIR}/index.html`, html);
  
  console.log(JSON.stringify({
    ok: true,
    doctrine: '164',
    outdir: OUTDIR.replace('/var/www/html', ''),
    url: `https://weval-consulting.com${OUTDIR.replace('/var/www/html', '')}/index.html`,
    summary_url: `https://weval-consulting.com${OUTDIR.replace('/var/www/html', '')}/summary.json`,
    pages: summary.pages_count,
    overlaps_detected: summary.overlap_alerts.length,
    overlap_hubs: summary.overlap_alerts.map(a => a.hub)
  }));
})();