#!/usr/bin/env node /** * Playwright Visual Snapshot Review Gallery Packager * * Scans docs/screenshots//*.png, generates an interactive, * responsive HTML review gallery with viewport filters, comparison matrices, * and high-DPI lightbox inspection. */ import fs from 'fs'; import path from 'path'; const screenshotsDir = path.resolve(process.cwd(), 'docs/screenshots'); const outputHtml = path.join(screenshotsDir, 'index.html'); if (!fs.existsSync(screenshotsDir)) { console.log(`[Snapshot Gallery] No screenshots directory found at ${screenshotsDir}. Skipping gallery build.`); process.exit(0); } const entries = []; const viewports = fs.readdirSync(screenshotsDir, { withFileTypes: true }) .filter(d => d.isDirectory()) .map(d => d.name); for (const vp of viewports) { const vpDir = path.join(screenshotsDir, vp); const files = fs.readdirSync(vpDir).filter(f => f.endsWith('.png')); for (const file of files) { const filePath = path.join(vpDir, file); const relPath = `${vp}/${file}`; const stats = fs.statSync(filePath); entries.push({ viewport: vp, fileName: file, title: file.replace(/^\d+-/, '').replace(/\.png$/, '').replace(/-/g, ' ').toUpperCase(), relPath, sizeKb: Math.round(stats.size / 1024) }); } } entries.sort((a, b) => a.fileName.localeCompare(b.fileName)); const htmlContent = ` Cognitive Clarity — Playwright Visual Snapshot Gallery

Cognitive Clarity — Visual Snapshot Gallery

${entries.length} snapshots across ${viewports.length} viewports (${viewports.join(', ')})

${viewports.map(vp => ``).join('')}
`; fs.writeFileSync(outputHtml, htmlContent, 'utf-8'); console.log(`[Snapshot Gallery] Successfully generated review gallery at ${outputHtml} with ${entries.length} snapshots.`);