feat: install @playwright/test + playwright.config.ts

eslint.config.js

@@ -20,7 +20,15 @@ const nodeGlobals = {
 };
 
 export default [
-  { ignores: ["node_modules/**", "packages/**", "apps/**", "turbo/**"] },
+  {
+    ignores: [
+      "node_modules/**",
+      "packages/**",
+      "apps/**",
+      "turbo/**",
+      "playwright.config.ts",
+    ],
+  },
   js.configs.recommended,
   {
     files: ["scripts/**/*.{mjs,cjs,js}"],

package.json

@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@ai-hero/sandcastle": "*",
+    "@playwright/test": "^1.49.0",
     "@turbo/gen": "^2.4.0",
     "@types/node": "^22.0.0",
     "husky": "^9.0.0",
@@ -31,7 +32,7 @@
   },
   "lint-staged": {
     "*.{ts,tsx,js,mjs,jsx}": [
-      "eslint --fix --max-warnings=0"
+      "eslint --fix --max-warnings=0 --no-warn-ignored"
     ],
     "*.{ts,tsx,js,mjs,jsx,json,md,yml,yaml}": [
       "prettier --write"

playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Playwright config for visual regression against Storybook.
+ *
+ * Expectations:
+ * - Storybook is served at http://localhost:6006 BEFORE running these tests.
+ *   The pnpm test:visual script wraps the start + run + stop dance.
+ * - Screenshot baselines live next to each test file in __snapshots__/.
+ * - One browser (chromium) is enough for v1; multi-browser comes later.
+ */
+export default defineConfig({
+  testDir: "./apps/storybook/tests",
+  testMatch: /.*\.spec\.ts/,
+  fullyParallel: false,
+  reporter: process.env.CI ? "github" : "list",
+  use: {
+    baseURL: "http://localhost:6006",
+    viewport: { width: 1280, height: 720 },
+    screenshot: "only-on-failure",
+  },
+  expect: {
+    toHaveScreenshot: {
+      // Tolerate up to 1% pixel difference. Tune when first real component
+      // lands and the noise floor is measurable.
+      maxDiffPixelRatio: 0.01,
+    },
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+});

pnpm-lock.yaml

@@ -10,6 +10,9 @@ importers:
       "@ai-hero/sandcastle":
         specifier: "*"
         version: 0.5.10(@effect/cluster@0.57.0(@effect/platform@0.95.0(effect@3.21.2))(@effect/rpc@0.74.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/sql@0.50.0(@effect/experimental@0.59.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/workflow@0.17.0(@effect/experimental@0.59.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/platform@0.95.0(effect@3.21.2))(@effect/rpc@0.74.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(effect@3.21.2))(effect@3.21.2))(@effect/rpc@0.74.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/sql@0.50.0(@effect/experimental@0.59.0(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/platform@0.95.0(effect@3.21.2))(effect@3.21.2))(@effect/typeclass@0.39.0(effect@3.21.2))
+      "@playwright/test":
+        specifier: ^1.49.0
+        version: 1.59.1
       "@turbo/gen":
         specifier: ^2.4.0
         version: 2.9.10(@types/node@22.19.17)