chore: implement chromatic

.github/workflows/ci.yaml

@@ -77,6 +77,73 @@ jobs:
         run: ${{ runner.os == 'Linux' && 'xvfb-run -a' || '' }} pnpm test:integration --label "VS Code ${{ matrix.vscode-version }}"
         shell: bash
 
+  # Reference guide:
+  # https://www.chromatic.com/docs/turbosnap-best-practices/#run-with-caution-when-using-the-pull_request-event
+  chromatic:
+    name: Chromatic
+    runs-on: ubuntu-24.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+        with:
+          # 👇 Ensures Chromatic can read your full git history
+          fetch-depth: 0
+          # 👇 Tells the checkout which commit hash to reference
+          ref: ${{ github.event.pull_request.head.ref }}
+          persist-credentials: false
+
+      - name: Setup pnpm, Node.js, and dependencies
+        uses: ./.github/actions/setup
+
+      # This step is not meant for mainline because any detected changes to
+      # storybook snapshots will require manual approval/review in order for
+      # the check to pass. This is desired in PRs, but not in mainline.
+      - name: Publish to Chromatic (non-mainline)
+        if: github.ref != 'refs/heads/main' && github.repository_owner == 'coder'
+        uses: chromaui/action@latest
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+          STORYBOOK: true
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          # Do a fast, testing build for change previews
+          buildScriptName: "storybook:ci"
+          exitOnceUploaded: true
+          # This will prevent CI from failing when Chromatic detects visual changes
+          exitZeroOnChanges: true
+          # Prevent excessive build runs on minor version changes
+          skip: "@(renovate/**|dependabot/**)"
+          # Run TurboSnap to trace file dependencies to related stories
+          # and tell chromatic to only take snapshots of relevant stories
+          onlyChanged: true
+          # Avoid uploading single files, because that's very slow
+          zip: true
+
+      # This is a separate step for mainline only that auto accepts and changes
+      # instead of holding CI up. Since we squash/merge, this is defensive to
+      # avoid the same changeset from requiring review once squashed into
+      # main. Chromatic is supposed to be able to detect that we use squash
+      # commits, but it's good to be defensive in case, otherwise CI remains
+      # infinitely "in progress" in mainline unless we re-review each build.
+      - name: Publish to Chromatic (mainline)
+        if: github.ref == 'refs/heads/main' && github.repository_owner == 'coder'
+        uses: chromaui/action@latest
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+          STORYBOOK: true
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          autoAcceptChanges: true
+          # This will prevent CI from failing when Chromatic detects visual changes
+          exitZeroOnChanges: true
+          # Do a full build with documentation for mainline builds
+          buildScriptName: "storybook:build"
+          # Run TurboSnap to trace file dependencies to related stories
+          # and tell chromatic to only take snapshots of relevant stories
+          onlyChanged: true
+          # Avoid uploading single files, because that's very slow
+          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",
@@ -647,6 +649,7 @@
 		"@vscode/vsce": "^3.9.1",
 		"babel-plugin-react-compiler": "catalog:",
 		"bufferutil": "^4.1.0",
+		"chromatic": "catalog:",
 		"coder": "catalog:",
 		"concurrently": "^9.2.1",
 		"cross-env": "^10.1.0",

pnpm-workspace.yaml

@@ -11,6 +11,7 @@ catalog:
   "@vscode-elements/react-elements": ^2.4.0
   "@vscode/codicons": ^0.0.45
   babel-plugin-react-compiler: ^1.0.0
+  chromatic: ^16.7.0
   coder: github:coder/coder#main
   date-fns: ^4.1.0
   react: ^19.2.5