Retake docs screenshots automatically and add 20 more

[wasimxyz]

What this does

The docs site screenshots were taken by hand months ago. This replaces them with a script that retakes them, and adds 20 more.

• make docs-screenshots seeds a separate local database, starts the web app on its own port, and saves each screen as a light and a dark WebP file in docs/site/public/images/.
• A new workflow, .github/workflows/docs-screenshots.yml, runs it on the 1st of every month and opens or updates one pull request into staging. It can also be started from the Actions tab with Run workflow.
• The list of screens is web/scripts/docs-screenshots/shots.ts. Each entry names the page, the clicks needed, and whether it is a full window or a close-up.

Screenshots

• The 13 existing screenshots are retaken automatically.
• 20 new ones are placed on 11 docs pages: tokens (list, create window, one-time reveal), instruments (Pending tab, edit window, retire window), watchers (list, detail), manual uploads, qPCR and Aunty run pages, integrations, feedback (send window, admin review, changelog), the MCP sign-in approval screen, the Comments page, the CSV preview, a deleted run, and the notification bell.
• mcp.png (the Claude desktop app) cannot be captured by a script. It stays as it is and is listed under MANUAL_SHOTS with the date it was taken. The monthly pull request lists how old it is.
• The token shown after creating a token is replaced with a placeholder before the screenshot is taken.

Docs site and README

• The docs site draws a browser frame around full-window screenshots, with datahub.example.com/<page> in the address bar. Close-ups have no frame.
• Each screenshot has a light and a dark image, and the site shows the one that matches the reader's theme. docs/site/src/lib/screenshots.generated.ts is written by the script and tells the site which images exist.
• The README uses the docs images through <picture> tags, so GitHub shows the dark version to dark-mode readers. .github/images/ is removed.
• The 13 old PNGs are removed and every page now points at .webp files.

Things to know

• The script runs next dev, not a production build. The local file mirror that serves the gel images, PDFs, and plate maps is turned off in production builds, so a production run would show no reports.
• It uses its own database (data_hub_screenshots) and its own file mirror under web/.docs-screenshots/, so it does not touch local data or a running make dev. It restores web/tsconfig.json, web/AGENTS.md, and web/next-env.d.ts, which next dev edits, and stops a leftover server from a crashed run.
• The seed steps moved into web/scripts/seed-workspace.ts so db:seed and the screenshot run share them. db:seed behaves as before.
• Dates in the images are the real dates, so every refresh rewrites every image. All 66 files are 6.4 MB together, so each merged refresh adds about that much to the repo.
• If a screen fails, its old images stay. The pull request description lists the failures.
• Pull requests opened with the built-in token do not start other workflows. That is fine here, because staging requires one review and no checks.
• No changelog entry, because this only changes docs and CI.

Testing

• Ran the whole script from a fresh database with a cold dev server cache. It exited cleanly and retook all 33 screens in both themes.
• Looked at every light image and a spread of dark ones. Rendered the docs site and checked the frame, the light/dark switching, and the home page.
• make check passes. Web unit tests pass (683).
• Checked that a normal run and a run after a simulated crash both leave web/tsconfig.json and web/AGENTS.md unchanged.

After merging

The workflow has not run yet, because it only runs from the default branch. After this merges, start it once with Run workflow to confirm it opens a pull request.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
data-hub	Ready	Preview	Oct 16, 2026 5:00pm UTC
data-hub-docs	Ready	Preview	Oct 16, 2026 5:00pm UTC