Merge remote-tracking branch 'origin/claude/add-visual-regression-and-linter-fixes-011CV49AGiBFQddYG4cXHTFd'

# Conflicts:
#	package-lock.json
#	package.json

Author: Sagyam

.github/workflows/visual-regression-init.yml

@@ -0,0 +1,70 @@
+name: Initialize Visual Regression Baselines
+
+# This workflow generates initial baseline screenshots
+# Run this manually after setting up visual regression testing
+
+on:
+  workflow_dispatch:
+
+jobs:
+  generate-baselines:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Build application
+        run: npm run build
+        env:
+          NODE_ENV: production
+
+      - name: Generate baseline screenshots
+        run: npm run test:e2e:update
+        env:
+          CI: true
+
+      - name: Create Pull Request with baselines
+        uses: peter-evans/create-pull-request@v7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          commit-message: 'chore: add initial visual regression baselines'
+          title: 'Add Visual Regression Test Baselines'
+          body: |
+            ## Visual Regression Test Baselines
+
+            This PR adds the initial baseline screenshots for visual regression testing.
+
+            ### Generated Screenshots:
+            - Homepage (light & dark)
+            - Presets section (light & dark)
+            - General section (light & dark)
+            - Compute section (light & dark)
+            - Storage section (light & dark)
+            - Results display (light & dark)
+            - Theme toggle (light & dark)
+
+            ### Review Checklist:
+            - [ ] Screenshots look correct in light mode
+            - [ ] Screenshots look correct in dark mode
+            - [ ] No sensitive information visible
+            - [ ] All key UI components are captured
+
+            **Note:** These baselines will be used to detect visual regressions in future changes.
+          branch: visual-regression-baselines
+          delete-branch: true

.github/workflows/visual-regression.yml

@@ -0,0 +1,108 @@
+name: Visual Regression Tests
+
+on:
+  push:
+    branches: [main, master, develop]
+  pull_request:
+    branches: [main, master, develop]
+  workflow_dispatch:
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Build application
+        run: npm run build
+        env:
+          NODE_ENV: production
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+        env:
+          CI: true
+
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - name: Upload screenshots
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-screenshots
+          path: test-results/
+          retention-days: 30
+
+      - name: Upload baseline screenshots (on main branch)
+        if: github.ref == 'refs/heads/main' && success()
+        uses: actions/upload-artifact@v4
+        with:
+          name: baseline-screenshots
+          path: e2e/**/*-snapshots/
+          retention-days: 90
+
+  update-baselines:
+    # This job runs only when manually triggered and updates baseline screenshots
+    if: github.event_name == 'workflow_dispatch'
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Build application
+        run: npm run build
+        env:
+          NODE_ENV: production
+
+      - name: Update baseline screenshots
+        run: npm run test:e2e:update
+        env:
+          CI: true
+
+      - name: Commit and push updated baselines
+        run: |
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add e2e/**/*-snapshots/
+          git diff --staged --quiet || git commit -m "chore: update visual regression baselines"
+          git push

.gitignore

@@ -5,6 +5,9 @@
 
 # testing
 /coverage
+/test-results/
+/playwright-report/
+/playwright/.cache/
 
 # next.js
 /.next/