test(visual): add Playwright visual regression screenshot tests

web/e2e/visual-regression.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from "@playwright/test";
+
+/**
+ * Visual regression tests — capture screenshots of key pages.
+ * Run with: npx playwright test visual-regression --update-snapshots  (to create baselines)
+ * Subsequent runs compare against baselines and fail on pixel diff.
+ */
+
+const ROUTES: { path: string; name: string }[] = [{path:"/",name:"dashboard"},{path:"/focus",name:"focus"},{path:"/settings",name:"settings"}];
+
+test.describe("Visual Regression", () => {
+  for (const route of ROUTES) {
+    test(\`\${route.name} matches snapshot\`, async ({ page }) => {
+      await page.goto(route.path);
+      await page.waitForLoadState("networkidle");
+      // Allow animations to settle
+      await page.waitForTimeout(500);
+      await expect(page).toHaveScreenshot(\`\${route.name}.png\`, {
+        fullPage: true,
+        maxDiffPixelRatio: 0.01,
+      });
+    });
+  }
+});
+