🤖 ci: migrate visual regression testing from Chromatic to Coder Pixel#3736
Conversation
Replaces the Chromatic workflow with @coder/pixel-storybook 0.2.0 uploading to pixel.coder.com. Story-level parameters.chromatic (modes/delay/ disableSnapshot/hasTouch) become parameters.pixel (matrix/exclude), runtime detection switches to window.__PIXEL__, and PR readiness scripts now ignore the Pixel / Review commit status instead of Chromatic statuses. The CI job skips cleanly until the PIXEL_KEY secret and a real platform project ID exist.
Remove redundant migration comments, reuse Pixel's runtime helper, and make snapshot budget estimation cover every matrix axis. Validation: make typecheck; make fmt-check; bun test ./tests/ui/storybook/budget.test.ts ./tests/ui/storybook/coverage.test.ts --- _Generated with `mux` • Model: `openai:gpt-5.6-sol` • Thinking: `high`_ <!-- mux-attribution: model=openai:gpt-5.6-sol thinking=high -->
Inline the window.__PIXEL__ check in ChatPane instead of importing the devDependency's isPixel() helper; stories may import it, shipped code must not.
|
@codex review |
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
Hash taken from the Flake Hash Check CI diff (nix unavailable locally).
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 309d21d33c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
…ssertion The fork guard's job condition excluded workflow_dispatch events (Codex P2). The ToC play used @storybook/test's default 1s waitFor timeout because the preview's asyncUtilTimeout configure() targets the storybook/test module, so the assertion raced the container-query layout settle under Pixel CI load and failed the first Pixel build.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 51e84a43ce
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
The plan ToC play failure reproduced at 11.3s under Pixel CI despite the 10s waitFor, so it is a sizing issue, not a race. Include innerWidth/innerHeight and the transcript container width in the error to identify why the container query does not match in the Pixel capture environment.
Pixel has no 440px named viewport, so the fixed device frame overflowed the 390px phone capture and clipped the right edge (Codex P2).
Addressed in 67e8bb5: Pixel 0.2.1 only supports named viewports (phone 390 / tablet 744 / laptop 1200 / desktop 1900), so a 440px viewport is not expressible. The 17 Pro Max frame now clamps to @codex review |
|
Codex Review: Didn't find any major issues. Swish! Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
3 participants
Summary
Migrates visual regression testing from Chromatic to Coder Pixel (
@coder/pixel-storybook0.2.1 uploading to pixel.coder.com), removing the Chromatic workflow, config, and all story-level Chromatic parameters. The pipeline is verified end-to-end: PR builds upload 331 snapshots to the mux Pixel project and post aPixel / Reviewcommit status.Background
We are moving off Chromatic to the Coder Pixel platform, mirroring what coder/coder did in its CI. One deliberate divergence: coder/coder pins
@coder/pixel-storybook@0.1.3, which has no theme/viewport matrix support. This repo relies heavily on dual-theme smoke modes and pinned mobile/wide viewports, so we target 0.2.x, which supportsparameters.pixel.matrix(themes x named viewports) and maps cleanly onto the previous Chromatic modes.Implementation
chromatic.ymlreplaced bypixel.yml. The job skips the snapshot step whenPIXEL_KEYis unset, only applies the fork guard topull_requestevents (push andworkflow_dispatchalways run), reports the PR head SHA viaPIXEL_COMMITso thePixel / Reviewstatus lands on the PR, and setsPIXEL_AUTO_REVIEW=trueon main pushes so trunk builds become baselines without manual review.pixel.jsoncwith the mux project ID and a default chrome/laptop (1200px) dark-theme matrix; one snapshot per story unless a story opts into more.parameters.chromaticbecomesparameters.pixel. Shared constants collapse toPIXEL_DUAL_THEMEandPIXEL_DISABLEDinsrc/browser/stories/meta.tsx. Chromaticdelayvalues are dropped because Pixel auto-stabilizes (fonts, network, DOM idle) with a 5s budget. Numeric viewports map to Pixel's named widths (phone 390, laptop 1200, desktop 1900); the 440px iPhone 17 Pro Max story frame clamps tomin(100vw, 440px)so the phone capture is not clipped. Snapshot-runtime detection switches from Chromatic UA sniffing to thewindow.__PIXEL__flag the CLI injects; production code inlines the check so the devDependency stays out of the bundle.tests/ui/storybook/budget.test.tsnow estimates Pixel cross-product matrices (rebaselined 293 to 305 because paired dark-desktop/light-mobile Chromatic modes became full theme x viewport grids);coverage.test.tsenforces the same dual-theme smoke contracts againstparameters.pixel.scripts/lib/pr_check_filters.shand the wait/extract scripts now ignore the persistentPixel / Reviewstatus instead of Chromatic statuses.generate-readme-screenshotsskill updated.Validation
status=complete, and thePixel / Reviewstatus appears on the head commit (pending human review in the dashboard, non-blocking).parameters.chromatic.Issues found and fixed during CI iteration
@storybook/test'swaitFordefaults to a 1s timeout (the preview'sconfigure({ asyncUtilTimeout })targets thestorybook/testmodule, not@storybook/test). Now uses an explicit 10s timeout and reports viewport/container widths on failure.workflow_dispatchtrigger was initially skipped by the fork guard (Codex finding); the guard now only applies topull_requestevents.min(100vw, ...).Risks
hasTouch, sopointer: coarsemobile affordances (hidden right sidebar, touch action buttons) are no longer visually captured. Phone-width layout coverage remains; the gap is documented inApp.phoneViewports.stories.tsxand AGENTS.md.Generated with
mux• Model:anthropic:claude-fable-5• Thinking:xhigh• Cost:$116.77