ci: replace Chromatic with Pixel (#1041)

Swap visual regression testing from Chromatic to Pixel
(pixel.coder.com), following the setup in coder/coder. The Pixel CI
job installs Chromium, then pixel-storybook builds the Storybook
(buildCommand in pixel.jsonc) and snapshots every story in the light
and dark themes. Mainline builds auto-approve snapshots to avoid
blocking CI after squash merges.

Author: EhabY

.github/workflows/ci.yaml

@@ -81,49 +81,26 @@ jobs:
         run: ${{ runner.os == 'Linux' && 'xvfb-run -a' || '' }} pnpm test:integration --label "VS Code ${{ matrix.vscode-version }}"
         shell: bash
 
-  chromatic:
-    name: Chromatic
+  pixel:
+    name: Pixel
     runs-on: ubuntu-24.04
+    # Forks and Dependabot can't read the PIXEL_KEY secret.
+    if: github.repository_owner == 'coder' && github.actor != 'dependabot[bot]'
     steps:
-      - name: Checkout
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with:
-          fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.ref }}
-          persist-credentials: false
-
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
       - name: Setup pnpm, Node.js, and dependencies
         uses: ./.github/actions/setup
 
-      # PR builds gate on visual review; mainline auto-accepts.
-      - name: Publish to Chromatic (non-mainline)
-        if: github.ref != 'refs/heads/main' && github.repository_owner == 'coder'
-        uses: chromaui/action@4a45535b6910c0b99226ebcb7648faf88fb1ee2e # v18.0.1
-        env:
-          NODE_OPTIONS: "--max_old_space_size=4096"
-          STORYBOOK: true
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          buildScriptName: "storybook:ci"
-          exitOnceUploaded: true
-          exitZeroOnChanges: true
-          skip: "@(renovate/**|dependabot/**)"
-          onlyChanged: true
-          zip: true
-
-      # Auto-accept on mainline to avoid blocking CI after squash merges.
-      - name: Publish to Chromatic (mainline)
-        if: github.ref == 'refs/heads/main' && github.repository_owner == 'coder'
-        uses: chromaui/action@4a45535b6910c0b99226ebcb7648faf88fb1ee2e # v18.0.1
+      - name: Install Chromium
+        run: pnpm exec playwright-core install --with-deps chromium
+
+      # Builds the Storybook (buildCommand in pixel.jsonc) and snapshots it.
+      - name: Snapshot
+        run: pnpm exec pixel-storybook
         env:
-          NODE_OPTIONS: "--max_old_space_size=4096"
-          STORYBOOK: true
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          autoAcceptChanges: true
-          exitZeroOnChanges: true
-          buildScriptName: "storybook:build"
-          zip: true
+          PIXEL_KEY: ${{ secrets.PIXEL_KEY }}
+          # Auto-approve on mainline to avoid blocking CI after squash merges.
+          PIXEL_AUTO_REVIEW: ${{ github.ref == 'refs/heads/main' }}
 
   package:
     name: Package

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+	"overrides": [
+		{
+			"files": "*.jsonc",
+			"options": {
+				"trailingComma": "none"
+			}
+		}
+	]
+}

.storybook/preview.ts

@@ -44,7 +44,7 @@ if (
 
 // VS Code injects --vscode-font-family at runtime, but the upstream
 // vscode-elements theme data omits it. Set a static default so
-// Storybook (and Chromatic) renders with a predictable sans-serif
+// Storybook (and Pixel) renders with a predictable sans-serif
 // stack instead of falling back to the browser default (Times).
 const VSCODE_FONT_FAMILY =
 	'"Segoe WPC", "Segoe UI", system-ui, "Ubuntu", "Droid Sans", sans-serif';

package.json

@@ -21,7 +21,6 @@
 		"build": "concurrently -g -n webviews,extension,compile-tests:integration \"pnpm build:webviews\" \"node esbuild.mjs\" \"pnpm compile-tests:integration\"",
 		"build:production": "cross-env NODE_ENV=production pnpm build",
 		"build:webviews": "pnpm -r --filter \"./packages/*\" --parallel build",
-		"chromatic": "chromatic",
 		"compile-tests:integration": "tsc -p test/integration --outDir out --noCheck",
 		"format": "prettier --write --cache --cache-strategy content .",
 		"format:check": "prettier --check --cache --cache-strategy content .",
@@ -789,6 +788,7 @@
 		"zod": "^4.4.3"
 	},
 	"devDependencies": {
+		"@coder/pixel-storybook": "^0.2.1",
 		"@eslint-react/eslint-plugin": "^5.11.3",
 		"@eslint/js": "^10.0.1",
 		"@eslint/markdown": "^8.0.3",
@@ -821,7 +821,6 @@
 		"@vscode/vsce": "^3.9.2",
 		"babel-plugin-react-compiler": "catalog:",
 		"bufferutil": "^4.1.0",
-		"chromatic": "^18.0.1",
 		"coder": "catalog:",
 		"concurrently": "^10.0.3",
 		"cross-env": "^10.1.0",
@@ -838,6 +837,7 @@
 		"jsdom": "^29.1.1",
 		"jsonc-eslint-parser": "^3.1.0",
 		"memfs": "^4.63.0",
+		"playwright-core": "^1.61.1",
 		"prettier": "^3.9.4",
 		"react": "catalog:",
 		"react-dom": "catalog:",

pixel.jsonc

@@ -0,0 +1,14 @@
+{
+	"platformAccessUrl": "https://pixel.coder.com",
+	"projectId": "019ed223-272f-7e3e-82fc-a8a135e5b4ca",
+	"storybook": {
+		"buildCommand": "pnpm storybook:ci"
+	},
+	"matrix": {
+		// Values of the Storybook "theme" global, defined in
+		// .storybook/preview.ts. Browsers and viewports stay at the default
+		// since the webviews only ever render inside VS Code, which is
+		// Chromium.
+		"themes": ["light", "dark"]
+	}
+}