[berry-13]

What & why

The landing-page hero (components/home/Hero.tsx) shows four hand-made screenshots of the app (demo_light, demo_dark, demo_mobile_light, demo_mobile_dark). Keeping them current across desktop/mobile and light/dark on every UI change is a manual chore we keep falling behind on.

This adds an automated pipeline that re-captures those four images from the live demo and opens a PR with the new ones, so the hero stays current without anyone shooting screenshots by hand. Hero.tsx is untouched: the script overwrites the same four files in place.

How it works

• scripts/screenshots/config.ts — the variant matrix (desktop/mobile x light/dark), output-path resolver, and theme helper. Pure and unit-tested (config.test.ts, 6 tests).
• scripts/screenshots/capture.ts — a standalone Playwright script (run via npx tsx, mirroring scripts/translate.ts). Logs into a dedicated demo account once, reuses the session, and captures each variant at 2x with a slight zoom, deterministic theme forcing, animations/caret disabled, and selector-based waits. It hard-fails on any error (including a failed login) so a broken capture never ships, and writes only the four target PNGs.
• .github/workflows/update-screenshots.yml — runs weekly (and on manual dispatch), then opens a PR via peter-evans/create-pull-request scoped to exactly the four images for human review of the diff.

No new dependencies (Playwright and npx tsx are already used). Design and implementation notes live in docs/superpowers/.

Maintainer setup required before the first real run

The capture machinery is complete and reviewed, but it has not been run against the live demo yet, so this PR changes no images. To activate it:

1. Seed the demo account once (LibreChat agent active, a few conversations across different providers, 2 projects, 2-3 pinned models/agents). Checklist in scripts/screenshots/README.md.
2. Verify the login/message selectors in capture.ts and the theme localStorage key in config.ts against the live demo (they are best-known defaults).
3. Add repo secrets DEMO_EMAIL / DEMO_PASSWORD / DEMO_CONVERSATION_ID, and the variable DEMO_BASE_URL (non-sensitive, defaults to https://chat.librechat.ai).
4. Run pnpm screenshots locally (or dispatch the workflow) to generate the first set.

Testing

• pnpm exec vitest run scripts/screenshots/config.test.ts — 6/6 passing.
• Typecheck and lint clean for the new files.
• Live capture is the deferred maintainer step above.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
librechat-ai	Ready	Preview, Comment	Jun 24, 2026 6:56pm

[github-actions]

📦 Next.js Bundle Analysis for librechat.ai

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[github-actions]

📦 Next.js Bundle Analysis for librechat.ai

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[github-actions]

📦 Next.js Bundle Analysis for librechat.ai

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[github-actions]

📦 Next.js Bundle Analysis for librechat.ai

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[github-actions]

📦 Next.js Bundle Analysis for librechat.ai

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[github-actions]

📦 Next.js Bundle Analysis for librechat.ai

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[github-actions]

📦 Next.js Bundle Analysis for librechat.ai

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[berry-13]

@codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. Can't wait for the next one!

Reviewed commit: 8411b2fb41

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".