Screenshot checklist

Starlight and Astro are open source (MIT). This docs site is minimal on purpose so non-technical writers can edit Markdown files.

How to add a screenshot

1. Capture the UI (PNG, 1400–1600px wide is enough).
2. Save the file under:

apps/docs/src/assets/screenshots/

3. Open the doc page that needs it and replace the gray Screenshot needed block with:

![Short description](../../assets/screenshots/FILENAME.png)

(Adjust the relative path if the page is nested differently.)

4. Run npm run dev -w @cxgear/docs and check the page.

---

Full list (capture in this order)

#	File name	What to capture	Where in the app
01	01-live-ops-home.png	Home / Live Ops with sidebar	Home
02	02-projects-list.png	Projects list	Projects
03	03-login.png	Login screen	Login
04	04-create-project.png	New project drawer (Outreach selected)	Projects → New project
05	05-data-tables.png	Data tables list with one table	Project → Data tables
06	06-metadata-fields.png	Metadata fields picker with selections	Data tables → Metadata
07	07-spinner-builder.png	Spinner builder with steps	Spinners → Create / Edit
08	08-jobs-page.png	Jobs: run list + records pane	Project → Jobs
09	09-records-outcomes.png	Records list + detail panel	Project → Records
10	10-billing-usage.png	Billing usage meters + plans	Billing
11	11-session-replace.png	Login “previous session” / Continue here	Login (conflict state)
12	12-roles-list.png	Roles: Admin, Agent, Supervisor	Manage users → Roles
13	13-invite-user.png	Invite user drawer	Manage users → Invite
14	14-users-online.png	Users online banner + device/IP	Manage users → Users
15	15-project-nav.png	Inside project navigation	Any project
16	16-spinners-list.png	Spinners list	Project → Spinners
17	17-journey-drawer.png	Pipeline journey drawer	Records / Jobs → journey
18	18-log-step.png	Log step with template message	Spinner builder → Log
19	19-ai-providers.png	AI providers LLM list	Integrations → AI providers
20	20-ai-agent-step.png	AI agent step (model dropdown)	Spinner builder → AI agent
21	21-function-tool.png	Function tool code editor	Spinner builder → Function tool
22	22-whatsapp-connect.png	WhatsApp connect UI	Integrations → Channels
23	23-vault.png	Vault secrets list	Secured Vault
24	24-dialler-presence.png	Dialler agent presence	Dialler → Agent desk
25	25-call-floater.png	Inbound call floater (optional)	During a test inbound call
26	26-pca-nav.png	Call Analyzer project nav	PCA project
27	27-pca-setup.png	Analyzer setup providers	PCA → Setup
28	28-pca-qa.png	QA scorecard editor	PCA → QA
29	29-api-keys.png	API keys page	API keys

Optional later: plan limit toast above create-project drawer (30-plan-limit-toast.png).

Tips for clear screenshots

• Use a wide browser window (about 1440px).
• Prefer light theme for print-friendly docs (or capture both if you want).
• Hide personal data; use demo names and numbers.
• Crop to the relevant panel when the full app is noisy.

Local preview

npm install
npm run dev -w @cxgear/docs

Open http://localhost:4321.

Production

Build static files and host on docs.cxgear.ai:

npm run build -w @cxgear/docs

Output is in apps/docs/dist/.