chore: implement chromatic

.github/workflows/ci.yaml

@@ -77,6 +77,50 @@ jobs:
         run: ${{ runner.os == 'Linux' && 'xvfb-run -a' || '' }} pnpm test:integration --label "VS Code ${{ matrix.vscode-version }}"
         shell: bash
 
+  chromatic:
+    name: Chromatic
+    runs-on: ubuntu-24.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.ref }}
+          persist-credentials: false
+
+      - 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@5c6ec06f45a2117a25f07b1bf2b2f3009233fac8 # v16.3.0
+        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@5c6ec06f45a2117a25f07b1bf2b2f3009233fac8 # v16.3.0
+        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
+
   package:
     name: Package
     runs-on: ubuntu-24.04

package.json

@@ -21,6 +21,7 @@
 		"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 .",
@@ -30,6 +31,7 @@
 		"package:prerelease": "pnpm build:production && vsce package --pre-release --no-dependencies",
 		"storybook": "storybook dev -p 6006 --config-dir .storybook",
 		"storybook:build": "storybook build --config-dir .storybook",
+			"storybook:ci": "storybook build --test --config-dir .storybook",
 		"test": "cross-env CI=true ELECTRON_RUN_AS_NODE=1 electron node_modules/vitest/vitest.mjs",
 		"test:extension": "cross-env ELECTRON_RUN_AS_NODE=1 electron node_modules/vitest/vitest.mjs --project extension",
 		"test:integration": "pnpm compile-tests:integration && node esbuild.mjs && vscode-test",
@@ -724,6 +726,7 @@
 		"@vscode/vsce": "^3.9.1",
 		"babel-plugin-react-compiler": "catalog:",
 		"bufferutil": "^4.1.0",
+		"chromatic": "^16.9.1",
 		"coder": "catalog:",
 		"concurrently": "^9.2.1",
 		"cross-env": "^10.1.0",