# Playground screenshot tooling

Standalone Playwright runner that captures playground screenshots for documentation.

## Usage

```bash
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:

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