🤖 Add Chromatic for visual regression testing

[kylecarbs]

Visual diff reviews for Storybook components via Chromatic.

What This Adds

• Chromatic integration for automated visual regression testing
• GitHub Actions workflow that runs on every PR
• Local testing support with make chromatic
• Comprehensive setup guide in CHROMATIC_SETUP.md

How It Works

1. On every PR, Chromatic captures screenshots of all Storybook stories
2. Compares them against the baseline (main branch)
3. Posts a check with visual changes detected
4. Provides a UI to review/accept/reject changes

Setup Required

To activate Chromatic, you need to:

1. Create a Chromatic project: Sign up at chromatic.com with GitHub and add the coder/cmux repo
2. Get your project token: After creating the project, copy the token (looks like chpt_123abc...)
3. Add GitHub Secret: Go to repo Settings → Secrets and variables → Actions, add:
   • Name: CHROMATIC_PROJECT_TOKEN
   • Value: Your token from step 2
4. Update config: Edit chromatic.config.json and replace REPLACE_WITH_YOUR_PROJECT_ID with your actual project ID

See CHROMATIC_SETUP.md for detailed instructions.

Workflow Behavior

• ✅ Non-blocking: Visual changes won't block PRs (informational only)
• 🎯 Smart diffing: Only tests changed stories for speed
• 🔄 Auto-runs: Triggers on every PR automatically
• 📸 Baseline: Compares against main branch

Local Testing

export CHROMATIC_PROJECT_TOKEN=chpt_your_token_here
make chromatic

Generated with cmux

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ 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".