Screenshot feature

.github/workflows/screenshot-on-pr.yml

@@ -0,0 +1,55 @@
+name: GUI Screenshots in PR
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+permissions:
+  pull-requests: write
+
+jobs:
+  capture-screenshots:
+    runs-on: ubuntu-latest
+    timeout-minutes: 3
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install Playwright
+        run: |
+          npm install playwright
+          npx playwright install chromium  # Fix: Install Chromium explicitly
+
+      - name: Create screenshots directory
+        run: mkdir -p screenshots
+
+      - name: Capture screenshots
+        run: node scripts/screenshot.js
+
+      - name: Generate base64 images
+        id: screenshots
+        run: |
+          IMAGES_MARKDOWN=""
+          for file in screenshots/*.jpg; do
+            [ -e "$file" ] || continue
+            base64_data=$(base64 -w0 "$file")
+            IMAGES_MARKDOWN+="![${file##*/}](data:image/jpeg;base64,$base64_data)\n\n"
+          done
+          # Escape newlines for GitHub output
+          IMAGES_MARKDOWN="${IMAGES_MARKDOWN//$'\n'/'%0A'}"
+          echo "images=$IMAGES_MARKDOWN" >> $GITHUB_OUTPUT
+
+      - name: Post images to PR
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          header: gui-screenshots
+          message: |
+            ## 🖼️ Automated UI Preview
+            ${{ steps.screenshots.outputs.images }}

scripts/screenshot.js

@@ -0,0 +1,46 @@
+const { chromium } = require('playwright');
+
+(async () => {
+  let browser;
+  try {
+    // Launch Chromium (explicitly specify)
+    browser = await chromium.launch({ 
+      channel: 'chromium',
+      headless: true
+    });
+
+    const page = await browser.newPage();
+    await page.setViewportSize({ width: 800, height: 600 });
+
+    // Capture homepage
+    await page.goto('https://example.com', { 
+      waitUntil: 'networkidle',
+      timeout: 60000
+    });
+    await page.screenshot({ 
+      path: 'screenshots/home.jpg',
+      type: 'jpeg',
+      quality: 70
+    });
+
+    // Capture about page
+    await page.goto('https://example.com/about', { 
+      waitUntil: 'networkidle',
+      timeout: 60000
+    });
+    await page.screenshot({ 
+      path: 'screenshots/about.jpg',
+      type: 'jpeg',
+      quality: 70
+    });
+
+    console.log('✅ Screenshots captured successfully!');
+  } catch (error) {
+    console.error('❌ Screenshot failed:', error);
+    process.exit(1);
+  } finally {
+    if (browser) {
+      await browser.close();
+    }
+  }
+})();