feat(screenshots): Playwright capture pipeline (local-only, viewport-only)

tools/screenshots/README.md

@@ -0,0 +1,50 @@
+# 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)`.