Repository navigation
test(ui): make Product Storybook baselines production-faithful and CI-rendered #1489
Description
Problem
Product Storybook stories are used as the visual baseline for UI review, but the baseline is not currently fail-closed:
- some stories mount inner panels in hand-built frames instead of the production page host;
- the global Storybook decorator adds geometry to every story, including
layout: 'fullscreen'Product stories; - narrow stories can shrink an inner wrapper without changing the viewport, so viewport media queries are not exercised;
- CI typechecks story source but does not render all Product stories or run their
playfunctions; - there is no manifest showing which product surfaces, states, hosts, and viewports the smoke gate covers.
This leaves a gap between “the story exists” and “the story is a faithful, renderable visual baseline.” It also allows render failures and console.error output to pass CI.
Refs #390, #1433, #1452, and #1303. This issue is governance only; it does not redesign those pages.
Production-faithful hosts
- Make the shared Storybook decorator geometry-neutral for
Product/*stories. - Keep padding or scaffolding explicit for
Primitives/*andDesign System/*. - Mount module stories through their production page entry points instead of mounting inner panels in copied frames.
- Keep Settings and shell stories on the closest production-owned host available; do not copy production class chains into story-only wrappers.
Viewport matrix
Define three named Product-story viewports and use the real iframe viewport:
wide: 1280pxcompact: 820pxfloor: 480px
A surface may opt out only with a reason in the coverage manifest.
Coverage manifest
Add one checked-in manifest for the required Product visual-smoke surface. Each entry identifies:
- story id;
- production host;
- required viewport or viewports;
- user-reachable state represented by the story.
The check must fail when a required entry is missing, references an unknown story, or no longer renders.
CI render/play smoke
After building Storybook, CI visits every manifest entry and:
- waits for the story and its
playfunction to settle; - asserts that the story root rendered non-empty content;
- fails on uncaught page errors, unhandled promise rejections, or
console.error; - runs at every required viewport.
Use the existing Storybook renderer substrate. This is a render and interaction smoke gate, not a pixel snapshot suite.
Acceptance
-
Product/*stories receive no implicit page padding or other global layout geometry. - Skills, MCP, Plan reminders, and Daily Review baseline stories use production page hosts.
- The checked-in manifest includes Settings and all four module subpages, with wide, compact, and floor coverage or an explicit opt-out.
- CI builds Storybook and renders every manifest entry.
- Story
playfunctions run in CI and failures fail the job. - Uncaught errors, unhandled rejections, and
console.errorfail with the story id and viewport in the report. - Negative contracts prove that an unknown story id, missing manifest entry, render exception, and emitted
console.erroreach fail the gate. - Existing typecheck, Electron E2E, and computed-style contracts remain green.
Non-goals
- No page redesign or component-vocabulary changes.
- No screenshot baseline or pixel-diff service.
- No generic module-page framework.
- No replacement of built-app verification for geometry claims.
- No provider-specific E2E expansion.
Activity
Astro-Han commentedon Jul 25, 2026
Claiming this. I’ll first reproduce the current failures against
mainand add focused failing contracts for production-host, real-viewport, and render-smoke behavior, then implement the smallest governance changes. I’ll keep this test/governance-only and will not redesign product pages. Verification will be reported through the implementation PR.