# Screenshot pipeline

Captures real WHP screenshots into `src/assets/screenshots/whp/`.

**Local-only. Never runs in CI.** CI builds the static site; it never opens a browser or hits WHP.

## Prerequisites

1. A demo WHP account (prod recommended for accuracy; staging works internally).
2. Network access to that WHP host.
3. Node 20+ and Playwright Chromium installed: `npx playwright install chromium`.

## Configure

Create `tools/screenshots/.env` (gitignored):

```
WHP_BASE=https://whp01.cloud-hosting.io:8443
WHP_USER=demo-kb
WHP_PASS=…
```

The script reads these via `process.env`; pass them in your shell or use a `.env` loader like `dotenv-cli`.

## Run

```bash
# Load .env into your shell (one option):
set -a; source tools/screenshots/.env; set +a
npm run screenshots
```

Outputs one PNG per entry in `shots.config.ts` to `src/assets/screenshots/whp/<id>.png`. Existing files are overwritten.

## Capture rules

- **Viewport: 1440×900.** Locked. No `fullPage`. Playwright's viewport screenshots never include browser chrome — no address bar, no tab strip.
- **Mask list:** defaults (account ID, server hostname, user IP, billing column) plus per-shot additions.
- **No address bar in any image.** Multi-server fleet — we don't want a specific host in any screenshot.
- Use `selector` to clip to a region (e.g., just the sidebar) when the full viewport is noisier than useful.

## Refresh workflow

UI changed? → `npm run screenshots` locally → review the diffs (`git diff --stat` shows changed PNGs) → eyeball them for accidental leakage → commit → push.

## Adding a new shot

1. Add an entry to `shots.config.ts` with a stable `id`.
2. `npm run screenshots`.
3. Reference the new file in your `.mdx`: `![Alt text](~/assets/screenshots/whp/<id>.png)`.