Skip to content

test(ui): make Product Storybook baselines production-faithful - #1494

Merged
Astro-Han merged 2 commits into
mainfrom
test/1489-production-faithful-storybook
Jul 26, 2026
Merged

test(ui): make Product Storybook baselines production-faithful#1494
Astro-Han merged 2 commits into
mainfrom
test/1489-production-faithful-storybook

Conversation

@Astro-Han

Copy link
Copy Markdown
Contributor

Summary

  • remove implicit Storybook page geometry from Product/* stories and mount Skills, MCP, Plan reminders, and Daily Review through their production page entries and detail-panel host while preserving representative populated, loading, and failure states
  • add a checked-in Product smoke manifest for Settings and the four module subpages at 1280px, 820px, and 480px real iframe viewports
  • add a fail-closed static Storybook runner that executes render and play, rejects unknown or omitted manifest coverage, and reports empty roots, Storybook failures, uncaught errors, unhandled rejections, and console.error with the story id and viewport
  • add a self-contained CI job that builds the required workspace, installs Chromium, builds Storybook, and runs all 15 manifest checks

Closes #1489.

Root cause

Storybook had two independent fidelity gaps. The global decorator wrapped every story in a padded full-screen frame, while module stories copied selected production classes around inner panels rather than mounting the page entry and shell-owned host. CI then typechecked story source without rendering the built stories, so a present-but-unreachable story, broken bridge, failed play, or console error did not fail the build.

The manifest uses the built Storybook index.json as the story-id authority. It stays intentionally representative rather than running every Product story at every viewport; live Electron remains the authority for final geometry claims.

Verification

  • node --test scripts/storybook-visual-smoke.test.mjs — 12 passed
  • npm --workspace @maka/desktop run typecheck:stories
  • npm run format:check — 1085 files clean
  • npm --workspace @maka/core run build
  • npm --workspace @maka/desktop run build-storybook
  • npm --workspace @maka/desktop run smoke:storybook — 15/15 render/play checks passed
  • npm --workspace @maka/desktop run build:main
  • node --test apps/desktop/dist/main/__tests__/storybook-baseline-contract.test.js apps/desktop/dist/main/__tests__/story-annotation-contract.test.js — 26 passed
  • git diff --check main...HEAD

Review focus

  • The smoke gate is render/interaction governance, not a screenshot or pixel-diff baseline.
  • The initial manifest covers one production-faithful Settings state plus Skills, MCP, Plan reminders, and Daily Review. Future entries are validated and executed automatically rather than silently ignored.
  • AppShellDetailPanel is a pure extraction of the existing production wrapper; it does not introduce a generic module-page framework.

@Astro-Han
Astro-Han merged commit 2536dd9 into main Jul 26, 2026
4 checks passed
@Astro-Han
Astro-Han deleted the test/1489-production-faithful-storybook branch July 26, 2026 00:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

test(ui): make Product Storybook baselines production-faithful and CI-rendered

1 participant