🤖 Add Storybook and Chromatic visual regression testing

[ammario]

Overview

Adds Storybook for component development and Chromatic for automated visual regression testing in CI.

What's Included

🎨 Storybook Setup

• Version: 9.1.10 with React + Vite framework
• Dark Theme: UI chrome, docs, and canvas background matching app
• Global Styles: Colors, fonts, and font smoothing (-webkit-font-smoothing)
• Stories: AssistantMessage with 8 variants (default, streaming, partial, with model, etc.)

📸 Chromatic Visual Regression Testing

• GitHub Actions: Automated workflow on PRs and main
• TurboSnap: Only tests changed stories (~30s builds)
• Auto-baseline: Changes on main auto-accepted as baseline
• Non-blocking: Visual changes won't fail builds

📚 Documentation

• STORYBOOK.md - Usage guide for Storybook and Chromatic
• .github/CHROMATIC_SETUP.md - Complete setup reference

Key Features

Storybook Stories

AssistantMessage (8 variants):

• Default - Basic message with markdown
• WithModel - Shows model name
• LongContent - Multi-paragraph with code blocks
• Streaming - Typewriter effect
• StreamingEmpty - Waiting state
• PartialMessage - Interrupted message
• WithTokenCount - Token usage display
• EmptyContent - Empty state

Chromatic Integration

• ✅ Visual diffs shown in PR comments
• ✅ TurboSnap optimization (only changed stories)
• ✅ Free for open source projects
• ✅ Complements e2e tests (different concerns)

Commands

# Run Storybook dev server
bun run storybook

# Build Storybook
bun run build-storybook

# Run Chromatic locally
bun run chromatic

Files Changed

Created

• .storybook/main.ts - Storybook config
• .storybook/preview.tsx - Dark theme and global styles
• .storybook/manager.ts - UI chrome dark theme
• src/components/Messages/AssistantMessage.stories.tsx - Component stories
• .github/workflows/chromatic.yml - CI workflow
• chromatic.config.json - Chromatic settings
• STORYBOOK.md - Documentation
• .github/CHROMATIC_SETUP.md - Setup guide

Modified

• package.json - Added storybook and chromatic scripts
• .gitignore - Excluded build artifacts and logs

Next Steps

Once merged:

1. Initial baseline will be created on main
2. Future PRs will show visual diffs
3. Review changes at chromatic.com

Chromatic + E2E Tests

They work perfectly together with no overlap:

• Chromatic: Visual regression (appearance, layout, colors)
• E2E tests: Behavioral testing (interactions, state, flows)

Generated with `cmux`

[ammario]

Superseded by 245