History

Kjell Tore Guttormsen 69610d46bd chore: roll up in-progress changes across plugins - claude-design: scaffold new plugin (plugin.json, CHANGELOG, README) - llm-security: playground design-system updates (tokens, components, tier3 supplement, new tier4 project-view CSS) - ms-ai-architect: v2 mockup screenshots + local screenshot script - voyage: annotate.mjs update Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>		2026-05-16 21:02:23 +02:00
..
.gitignore	feat(ms-ai-architect): release v1.10.1 — demo system + screenshot gallery	2026-05-04 09:24:02 +02:00
package.json	feat(ms-ai-architect): release v1.10.1 — demo system + screenshot gallery	2026-05-04 09:24:02 +02:00
README.md	feat(ms-ai-architect): release v1.10.1 — demo system + screenshot gallery	2026-05-04 09:24:02 +02:00
run.mjs	feat(ms-ai-architect): v1.15.0 — playground v3 project-view integration	2026-05-16 20:58:51 +02:00
shoot-mockup.local.mjs	chore: roll up in-progress changes across plugins	2026-05-16 21:02:23 +02:00

README.md

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.10.0/.

What it captures

For each theme (dark, light):

#	Surface	Screen / tab
01	Onboarding	Empty state
02	Project	Rapporter / Regulatory (default)
03	Project	Rapporter / each of 4 other tabs
04-06	Project	Oversikt / Kontekst / Eksport
07	Home	Project list with demo-prosjekt
08	Catalog	All 5 expansion-grupper
09	Onboarding	Prefilled from demo-state

= ~18 PNGs, captured with deviceScaleFactor: 2 (retina-crisp), fullPage: true.

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 ("Demo: Innbygger-chatbot for byggesak") 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.

Commit policy

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