Add Playwright doc-screenshot tooling

AGENTS.md

@@ -91,6 +91,8 @@ just types  # Generate frontend/api.d.ts from OpenAPI schema
 | `just format-frontend` | Format frontend code with Prettier |
 | `just dev` | Run Datasette on port 8004 |
 | `just dev-with-hmr` | Run Datasette with HMR + auto-restart on file changes |
+| `just shots-fixture` | (Re)build the demo FEC database used for doc screenshots |
+| `just shots [names...]` | Regenerate committed doc screenshots → `docs/screenshots/*.png` (Playwright drives a throwaway Datasette against the fixture db) |
 
 ## Key Files
 

Justfile

@@ -41,6 +41,20 @@ format:
     just format-backend
     just format-frontend
 
+# (Re)build the small demo FEC database the doc screenshots run against.
+shots-fixture:
+    bash frontend/scripts/build-fixture.sh
+
+# Regenerate committed doc screenshots → docs/screenshots/*.png. Self-contained:
+# builds the frontend, boots a throwaway datasette against the fixture db, drives
+# Playwright, then tears it down. Run all, or a subset by name:
+#   `just shots`  /  `just shots index contest`.
+shots *names:
+    just frontend
+    npm --prefix frontend install
+    npm --prefix frontend exec -- playwright install chromium
+    node frontend/scripts/screenshots.mjs {{names}}
+
 format-check:
     just format-backend-check
     just format-frontend-check

frontend/.gitignore

@@ -24,4 +24,7 @@ dist-ssr
 *.sw?
 
 # Vite
-.vite
+.vite
+
+# Generated screenshot fixture database (rebuild with `just shots-fixture`)
+scripts/shot-data/

frontend/package.json

@@ -12,6 +12,7 @@
     "format:check": "prettier --check 'src/**/*.{ts,svelte}'"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tsconfig/svelte": "^5.0.6",
     "@types/d3": "^7.4.3",

frontend/scripts/build-fixture.sh

@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+# Build the deterministic demo database the doc screenshots run against.
+#
+# Unlike the other plugins in the screenshot family (which seed via internal
+# plugin APIs), datasette-libfec browses real FEC data, so the "seed" is a small
+# fixed SQLite file produced by `libfec export`. We pin a marquee 2024 race plus
+# a couple of big PACs, cover-only (no itemizations) so it stays small and fast.
+#
+# Network + the libfec cache are used the first time; subsequent runs are quick.
+# Output is NOT committed (see frontend/.gitignore); regenerate with `just shots-fixture`.
+set -euo pipefail
+
+HERE="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+OUT="${1:-$HERE/shot-data/libfec.db}"
+mkdir -p "$(dirname "$OUT")"
+
+# Keep downloaded .fec files around so re-runs don't re-fetch.
+export LIBFEC_CACHE_DIRECTORY="${LIBFEC_CACHE_DIRECTORY:-$HOME/.cache/libfec}"
+mkdir -p "$LIBFEC_CACHE_DIRECTORY"
+
+echo "Building fixture → $OUT"
+
+# 2024 Ohio Senate: Sherrod Brown (D, incumbent) vs Bernie Moreno (R) and the
+# rest of the field — gives candidate, contest, and filing pages real content.
+echo "  • OH-S 2024 (candidates + committees + F3 covers)"
+libfec export OH-S --cycle 2024 --cover-only --clobber -o "$OUT"
+
+# Big 2024 PACs — committee pages with F3X covers.
+echo "  • Fairshake (C00835959) — crypto super PAC"
+libfec export C00835959 --cycle 2024 --cover-only -o "$OUT"
+echo "  • Senate Majority PAC (C00484642)"
+libfec export C00484642 --cycle 2024 --cover-only -o "$OUT"
+
+echo "Done. Tables:"
+sqlite3 "$OUT" "SELECT '  ' || name FROM sqlite_master WHERE type='table' AND name LIKE 'libfec%';"