fix(screenshots): regenerate screenshots from the current demo, remove older sets

tests/screenshot/run.mjs now clears PNGs a previous run left in its output directory and writes playground/screenshots/MANIFEST.json (output directory, sha256 per PNG, sha256 of the demo state rendered). One run produced the 24 PNGs in playground/screenshots/v1.15.0/ (12 surfaces x 2 themes, including the dark onboarding view removed in 1.18.1).

Removed the v1.10.0, v1.11.0, v1.14.0 and v2-mockup sets (77 PNGs) and tests/screenshot/shoot-mockup.local.mjs. Chose regenerate for the set the runner writes and delete for the rest, because the current runner cannot reproduce the older layouts, and the mockup script reads an HTML file that is not in the repository, so its output could never be regenerated from a clone.

README gallery, docs/playground.md and tests/screenshot/README.md now point at v1.15.0 and describe the 12 surfaces the runner captures. The manifest gate goes green: 4/4.

OCR (Apple Vision, local): 0 of 24 PNGs in the tree carry text from the older demo; known positives from 715950b were found (2 of 2).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2026-09-23 14:43:42 +02:00

2.3 KiB

Raw Blame History

Playground screenshot tooling

Standalone Playwright runner that captures playground screenshots for documentation.

Usage

cd tests/screenshot
npm install
npx playwright install chromium   # one-time, ~150 MB
node run.mjs

Output goes to ../../playground/screenshots/v1.15.0/. The runner first deletes PNGs a previous run left in that directory, then writes ../../playground/screenshots/MANIFEST.json: the output directory, the sha256 of every PNG, and the sha256 of the demo state block it rendered. tests/kb-update/test-screenshots-manifest.test.mjs fails when a PNG in the tree is not in the manifest, a PNG changed, the demo state changed after the run, or a doc points at another screenshot directory. Fix: run node run.mjs again.

What it captures

For each theme (dark, light):

#	Surface	View
01	Onboarding	Empty state
02	Project	Overview (no artifact selected)
03-07	Project	Artifacts: classify, security, ros, cost, summary
08	Project	Import modal (viewport only)
09	Project	Sidebar search
10	Home	Project list with the demo project
11	Catalog	Command catalog
12	Onboarding	Prefilled from demo state

= 24 PNGs, captured with deviceScaleFactor: 2 (retina-crisp), fullPage: true except the import modal.

How the demo state works

The screenshot script clicks [data-action="load-demo"] which reads the inline <script type="application/json" id="demo-state-v1"> block from the playground HTML. That block is generated by scripts/build-demo-state.mjs and includes one demo project ("Acme: Kunde-chatbot") with all 17 fixture markdowns pre-loaded as raw_markdown. After load, the project surface re-runs handlePasteImport for each report so the visualizations render automatically.

Regenerating demo state

If playground/test-fixtures/*.md changes:

node scripts/build-demo-state.mjs

This rewrites the <script id="demo-state-v1"> block in the playground HTML. Regenerate the screenshots afterwards; the manifest gate fails until you do.

Commit policy

Commit playground/screenshots/v1.15.0/*.png and MANIFEST.json so forkers see what the plugin looks like without running anything.
Don't commit node_modules/ (gitignored).

2.3 KiB Raw Blame History