Automate docs screenshot generation

[Kirari04]

Summary

• add a manual Playwright docs screenshot generator that runs the real management server, Vue UI, fixture upstream, fixture agent, seeded proxy config, and public proxy traffic
• refresh existing committed docs screenshots and add new generated workflow screenshots under docs/assets/new
• expand screenshot placement across onboarding, guides, concepts, references, and troubleshooting
• retire backend_agent_healthcheck_logs.png because that UI no longer exists

Verification

• make docs-screenshots
• cd web/management && bun run typecheck
• cd docs && bun run docs:build
• cd web/management && bun run e2e
• checked every referenced PNG exists, every generated PNG is listed in docs/reference/screenshots.md, and no PNG is zero-byte

Summary by CodeRabbit

• Documentation
  • Enhanced guides and concept pages with new screenshots showing UI workflows, including agent label management, TLS configuration, route targeting, cache settings, and proxy listener setup
  • Added visual examples to getting-started guides and troubleshooting sections for improved clarity
  • Updated reference documentation with detailed screenshots of modal dialogs and configuration interfaces

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

The PR introduces a complete infrastructure for automatically generating and committing documentation screenshots. It refactors Playwright configuration to centralize test server setup, adds shared E2E authentication helpers, provides test fixtures that seed application state, and includes a Playwright test that navigates the management UI to capture screenshots, then updates 26 documentation files with those generated images.

Changes

Documentation Screenshots and Test Infrastructure

Layer / File(s)	Summary
Build and Test Server Configuration Makefile, web/management/package.json, web/management/playwright.config.ts, web/management/playwright.shared.ts, web/management/playwright.docs-screenshots.config.ts	Makefile adds docs-screenshots target, shared Playwright module exports createManagementWebServer() and port/path utilities to centralize server startup logic for both main e2e and new docs-screenshot test runners, main config refactored to use shared helper, and new docs-screenshot config wires server with resolved temp directories.
E2E Authentication Helper and Test Refactoring web/management/e2e/helpers/auth.ts, web/management/e2e/agent-label-target.spec.ts, web/management/e2e/environment-switch.spec.ts	New authenticate() helper encapsulates setup/login/session-cookie flow with retry logic for database-locked errors; two existing e2e specs refactored to import and use the helper, eliminating duplicate auth code and reducing boilerplate.
Screenshot Fixture Provisioning and Generation Test web/management/docs-screenshots/fixtures.ts, web/management/docs-screenshots/generate.spec.ts	Fixtures module provides startFixtureUpstream() (deterministic HTTP server), seedDocsFixture() (provisions listeners/agents/routes/templates/WAF/TLS/token/environment via RPC), and sendPublicProxyTraffic() (populates observability) to seed test state; test spec navigates management UI sections, captures screenshots after disabling animations and waiting for settle, and validates output files exist and are non-empty.
Documentation Updates with Screenshots docs/concepts/*, docs/getting-started/*, docs/guides/*, docs/operations/*, docs/reference/*	26 documentation files across concepts, getting-started, guides, operations, and reference updated with new <figure> blocks containing generated screenshot images and captions describing setup admin screen, login page, proxy routes/targets, agent labels, redirect/static response editors, TLS certificate modals, WAF captcha provider, cache settings, traffic tracing, and environment editor.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Kirari04/p2pstream#24: The docs-screenshot fixture provisions management access tokens and remote environments using the environment/token RPCs introduced in that trusted remote management PR, creating a direct API coupling.

Poem

🐰 Screenshots spring forth from fixtures true,
Seeding routes and agents with a brew,
Playwright dances through the UI so bright,
Docs bloom with images, a glorious sight!
One press of make and the gallery takes flight,
Committed and crisp—documentation done right! 📸

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Automate docs screenshot generation' directly and clearly summarizes the main change—adding automated documentation screenshot generation via Playwright.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs/automated-screenshots

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}