Skip to content

🤖 tests: make README screenshots reproducible via Storybook#2035

Open
ibetitsmike wants to merge 10 commits intomainfrom
mike/readme-storybook-states
Open

🤖 tests: make README screenshots reproducible via Storybook#2035
ibetitsmike wants to merge 10 commits intomainfrom
mike/readme-storybook-states

Conversation

@ibetitsmike
Copy link
Contributor

@ibetitsmike ibetitsmike commented Jan 29, 2026

Summary

  • Added a dedicated Storybook module (Docs/README Screenshots) with 8 stories that recreate the exact UI states used in README.md.
  • Extended Storybook ORPC mocks so the “Product hero” story can render a populated terminal snapshot (terminal sessions + seeded screenState).
  • Enriched the “Product hero” story’s left sidebar with additional projects/workspaces and sidebar sections (to better match a lived-in UI).
  • Refreshed docs/img/*.webp from those stories and noted the source-of-truth mapping in the README.

Background

The README screenshots were previously “hand captured” and not easily reproducible, making it hard to review/regress future UI changes. These stories provide a stable, named source for each screenshot state.

Implementation

  • src/browser/stories/App.readmeScreenshots.stories.tsx
    • One story per README image with explicit // README: docs/img/<file>.webp comments.
  • src/browser/stories/mocks/orpc.ts
    • Added terminal session fixtures and screenState support so terminal output is deterministic in Storybook.

Validation

  • make static-check

Risks

  • Low. Changes are Storybook-only (mocks/stories) plus documentation image assets.

Generated with mux • Model: mux-gateway:openai/gpt-5.2 • Thinking: xhigh • Cost: 5.05

Expand MessageWithImages into a 4-message bug-report arc with screenshots,
add MultipleImageFormats story with 3 distinct placeholder image types
(screenshot, diagram, photo), and add SingleLargeImage for non-gallery
layout testing.
…tories

- Enrich WithTitles: 8 workspaces across 3 projects (my-app, backend-api,
  docs-site) with mixed titles/no-titles and varied age timestamps
- Add FuzzySearch: same rich set with 'refac' typed into palette input to
  demonstrate fuzzy filtering behavior
- Add ManyWorkspaces: 14 workspaces across 5 projects (adds infra-tools,
  design-system) to stress-test palette scrolling and grouping
- Extract shared helpers (createRichWorkspaces, setupStory, openPalette)
  to reduce boilerplate across stories
- Enrich MacOSDesktop with 4 workspaces across 2 projects so the
  sidebar shows real content behind the traffic lights
- Extract createPopulatedClient() helper shared by both stories
- Add BrowserMode story showing the non-Electron title bar variant
- Use selectWorkspace + expandProjects + collapseRightSidebar for
  a lived-in app state
…stories

- Expand setupGovernorStory from 1 workspace to 5 across 2 projects
  (my-app + infra-tools) for a lived-in sidebar behind the modal
- Import expandProjects/collapseRightSidebar from storyHelpers
- Add PolicyBlocked story: policyState 'blocked' with no providers,
  no MCP, only local runtime
- Add RichPolicy story: enforced policy with 3 providers (anthropic
  with specific models, openai with forced proxy URL, google with all
  models allowed)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to documentation enhancement New feature or functionality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant