Hub Showcase

July 22, 2026 · View on GitHub

Screenshots of every developer-facing surface, captured on post-shadcn-migration main (ac49216). Re-shoot these whenever the UI moves visibly — they ship in the README so a fresh contributor sees the cockpit before they boot the server.

Tech under the hood (every page below): React 19 SPA + react-router-dom 7

  • shadcn/ui (Radix) primitives + Tailwind CSS 4 + lucide-react icons + sonner toasts + TanStack Query — vendored under src/core/dx/clients/.

Pages

/hub/* — developer cockpit

PageDesktop (1440 × 900)Mobile (390 × 844)
/hub — Cockpit landinghub landing desktophub landing mobile
/hub/features — togglesfeatures desktopfeatures mobile
/hub/coverage — Vitest reportcoverage desktopcoverage mobile
/hub/jobs — queues + jobsjobs desktopjobs mobile
/hub/migrations — Prismamigrations desktopmigrations mobile
/hub/email-builderemail builder desktopemail builder mobile
/hub/email-previewemail preview desktopemail preview mobile

/hub/admin/* — operator surfaces

PageDesktop (1440 × 900)Mobile (390 × 844)
/hub/admin/permissions/testpermission tester desktoppermission tester mobile
/hub/admin/webhooks — 3-colwebhooks desktopwebhooks mobile
/hub/admin/realtime — tabsrealtime desktoprealtime mobile
/hub/admin/auditaudit desktopaudit mobile

Shared JSON viewer

PageDesktop (1440 × 900)Mobile (390 × 844)
/errors — error catalogerrors desktoperrors mobile
/openapi — OpenAPIopenapi desktopopenapi mobile

Reproducing

The capture is opt-in — Playwright + Chromium are heavyweight downloads that we keep out of CI, and the screenshots themselves are binary blobs that don't belong in every PR. Re-run only when the UI has visibly moved.

# 1. first-time (or re-bootstrap DB)
bun run setup --bootstrap

# 2. start the dev server
bun run dev

# 3. one-time Playwright install (Chromium ~150 MB)
bun add -d playwright
bunx playwright install chromium

# 4. point the script at the dev URL the runner printed (skip if 3000)
#    and capture all 13 pages × 2 viewports = 26 PNGs:
BASE_URL=http://localhost:4267 bun run docs:screenshots

The script (scripts/take-showcase-screenshots.ts) signs up a deterministic screenshot-bot@example.com account so the /hub/admin/* surfaces (which require an authenticated session) render correctly. The cookie stays inside the Playwright browser context — nothing is persisted between runs.

Auth and Secure cookies

Better-Auth picks __Secure--prefixed cookies whenever APP_BASE_URL starts with https://. Headless Chromium silently drops those on a plain-http:// connection, which surfaces as a 401 from /hub/admin/*.

For a local screenshot pass, set APP_BASE_URL=http://localhost:<port> in .env (matching whatever port the dev runner announced) before you boot the server. Restore the original https://api.<project>.localhost setting once you're done — it's the right value for everyday work because portless terminates TLS on the loopback host.

Filename contract

SlugSource page
hub-landing/hub dashboard
hub-features/hub/features
hub-coverage/hub/coverage
hub-jobs/hub/jobs
hub-migrations/hub/migrations
hub-email-builder/hub/email-builder gallery
hub-email-preview/hub/email-preview
admin-permissions-test/hub/admin/permissions/test
admin-webhooks/hub/admin/webhooks (3-column inspector)
admin-realtime/hub/admin/realtime (Sockets/Channels/Events tabs)
admin-audit/hub/admin/audit
errors/errors JSON viewer
openapi/openapi JSON viewer

Each slug emits two files: <slug>-desktop.png$ (1440 \times 900) \text{and} $<slug>-mobile.png (390 × 844). Keep these names — the README + the table above embed them by path.