ktg-plugin-marketplace/plugins/ms-ai-architect/tests/screenshot/README.md
Kjell Tore Guttormsen e3378e9b9c feat(ms-ai-architect): release v1.10.1 — demo system + screenshot gallery
Adds one-click demo and committed screenshots so forkers see what the plugin
produces without running anything. Plugin contract unchanged.

- Inline <script id="demo-state-v1"> block (37 KB) built by
  scripts/build-demo-state.mjs from playground/test-fixtures/*.md
- "Last inn demo-data" button on onboarding (replaces all state with demo)
- raw_markdown persistence on project.reports[id] with equal-value guard
- rehydratePasteImports() auto-fills textareas + re-renders visualizations
  on project surface mount
- tests/screenshot/ standalone Playwright runner (own package.json)
- 24 committed screenshots in playground/screenshots/v1.10.0/
  (12 surfaces x 2 themes, deviceScaleFactor 2 retina, fullPage)

Tests: 215 + 201 + 70 + 7 = 493 PASS, no regressions.

Docs updated per OBLIGATORISK three-level rule (plugin README, plugin CLAUDE,
marketplace root README, CHANGELOG).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-04 09:24:02 +02:00

1.7 KiB

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).