From 23cc5a887b81d49c0a99d7c5857be9753fb96c0e Mon Sep 17 00:00:00 2001
From: Josh <jknapp85@gmail.com>
Date: Thu, 11 Jun 2026 15:00:14 -0700
Subject: [PATCH 1/2] docs(screenshots): document section capture scripts +
 refresh workflow

The README only covered the shots.config.ts/run.ts path. Add a Section
capture scripts table (capture-admin/site-builder/dns) and a refresh
note distinguishing static pages (npm run screenshots) from interactive
states (npx tsx capture-<section>.ts), since reworked sections need the
latter.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 tools/screenshots/README.md | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/tools/screenshots/README.md b/tools/screenshots/README.md
index 2221ae4..40630b6 100644
--- a/tools/screenshots/README.md
+++ b/tools/screenshots/README.md
@@ -41,10 +41,32 @@ Outputs one PNG per entry in `shots.config.ts` to `src/assets/screenshots/whp/<i
 
 ## Refresh workflow
 
-UI changed? → `npm run screenshots` locally → review the diffs (`git diff --stat` shows changed PNGs) → eyeball them for accidental leakage → commit → push.
+UI changed? → run the capture (see below) locally → review the diffs (`git diff --stat` shows changed PNGs) → **open each changed PNG and eyeball it for accidental leakage** (server hostname, IP, account ID, customer domains/usernames) → commit → push.
+
+- **A page covered by `shots.config.ts`** (a plain navigate-and-shoot page): `npm run screenshots`.
+- **A page that needs interaction** — opening a modal, ticking checkboxes, switching tabs — lives in a **section capture script** (see below). Re-run that script instead.
+
+When a section is *reworked* (not just restyled), also: re-walk the new UI to find every state worth a screenshot, update the section script's steps, add/rename the `whp-<section>-*` ids, then refresh the `.mdx` references and run `npm run build` to confirm links and images resolve.
+
+## Section capture scripts
+
+`shots.config.ts` + `run.ts` only do navigate → redact → screenshot. Anything that needs **interaction or per-section redaction** gets its own `capture-<section>.ts`, run directly with `tsx`:
+
+```bash
+set -a; source tools/screenshots/.env; set +a
+npx tsx tools/screenshots/capture-dns.ts
+```
+
+| Script | Covers | Auth |
+| --- | --- | --- |
+| `capture-admin.ts` | Server Settings tabs, admin pages | `WHP_ADMIN_USER` |
+| `capture-site-builder.ts` | Site Builder editor states | `WHP_USER` |
+| `capture-dns.ts` | Domains & DNS list, Add Domain modal, records editor, bulk toolbar | `WHP_USER` |
+
+Each script carries its own `redact()` (text-node + input-value swaps) so fleet hostnames, IPs, and customer data become neutral placeholders while brand/demo domains stay visible. Copy the closest existing script when adding a new section — match its viewport (1440×900), `deviceScaleFactor: 2`, and **read-only** discipline (open modals and tick boxes for the shot, but never save/delete/submit).
 
 ## Adding a new shot
 
-1. Add an entry to `shots.config.ts` with a stable `id`.
-2. `npm run screenshots`.
+1. **Static page?** Add an entry to `shots.config.ts` with a stable `id`, then `npm run screenshots`.
+2. **Interactive state?** Add the step to the relevant `capture-<section>.ts` (or copy one for a new section), then `npx tsx tools/screenshots/capture-<section>.ts`.
 3. Reference the new file in your `.mdx`: `![Alt text](~/assets/screenshots/whp/<id>.png)`.

From 8f42adc799ffe1f8ea7442ae44da26a752dd2a10 Mon Sep 17 00:00:00 2001
From: Josh <jknapp85@gmail.com>
Date: Mon, 22 Jun 2026 08:41:06 -0700
Subject: [PATCH 2/2] docs(screenshots): list capture-email.ts in the
 section-scripts table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Completes the section-capture docs after merging main — capture-email.ts
(Email page "Mail Client Setup") now appears alongside the other scripts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 tools/screenshots/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tools/screenshots/README.md b/tools/screenshots/README.md
index 40630b6..fee78d5 100644
--- a/tools/screenshots/README.md
+++ b/tools/screenshots/README.md
@@ -62,6 +62,7 @@ npx tsx tools/screenshots/capture-dns.ts
 | `capture-admin.ts` | Server Settings tabs, admin pages | `WHP_ADMIN_USER` |
 | `capture-site-builder.ts` | Site Builder editor states | `WHP_USER` |
 | `capture-dns.ts` | Domains & DNS list, Add Domain modal, records editor, bulk toolbar | `WHP_USER` |
+| `capture-email.ts` | Email page "Mail Client Setup" section (autodiscovery DNS records) | `WHP_USER` |
 
 Each script carries its own `redact()` (text-node + input-value swaps) so fleet hostnames, IPs, and customer data become neutral placeholders while brand/demo domains stay visible. Copy the closest existing script when adding a new section — match its viewport (1440×900), `deviceScaleFactor: 2`, and **read-only** discipline (open modals and tick boxes for the shot, but never save/delete/submit).