docs(cookbook): revamp docker-compose-quickstart against playbook

[SuhaniNagpal7]

What changed

Area	Before	After
Frontmatter	title + description only	Full kebab-case schema: slug, date, author, products, frameworks, difficulty, time-to-complete, tags, og-image, canonical, last-tested-date, structured last-tested-with, code-repo-url, page-type
What you'll build	Missing	5-bullet artifact list (21 containers, four secrets, first user, smoke-test trace, ops cheatsheet) before the 10-15 min image build investment
First proof moment	At end of Step 5 (~90% into the page)	New "Verify your environment" section right after Prerequisites (~5% into the page). One-liner checks Docker version + RAM and warns if memory is below 8 GB, catching the most common OOM-kill failure before the user commits
Why self-host	159 words across two paragraphs	53 words, one paragraph. Two reasons: compliance (PII/PHI/IP staying in network) and localhost speed. Bridges to the steps
Stack diagram	12 nodes + 4 subgraphs + 11 arrows (every service named)	4 nodes + 3 arrows showing the core write/CDC/read loop. The full 21-container inventory still lives in the per-layer table inside Step 3
Em dashes	Multiple occurrences	0
Troubleshooting	3-column table	4 columns with Verify
Next steps	3 reference cards	4-item technical ladder (pin image tags, durable storage, TLS reverse proxy, Postgres backups) + 1 reference link
Step 5 closer	No screenshot	Real FAGI Tracing dashboard screenshot showing the live support_agent trace (Trace Graph + span detail panel with User Message, Input, and refund-policy Output)

Why this is shaped the way it is

• Verify your environment front-loads the prereq check because the playbook bar wants the first proof at 25-35% of the page. For a 21-container deploy that takes 10-15 min on first build, a docker --version + memory check is the only honest proof we can put that early.
• Diagram simplified because the original tried to teach the system architecture instead of communicating the conceptual flow. The 4-node version answers "what writes go where" in one glance; the existing per-layer table still answers "what's the full container list."
• Step 5 screenshot is real product UI: a real support_agent trace was sent through the cloud API with the same project_name: local-stack-smoke-test so the dashboard view is structurally identical to what a self-hosted user would see at localhost:3000.

Depends on

• #660 for the <Mermaid> component used by the simplified stack diagram in "The self-hosted stack." Merge docs(cookbook): revamp eval-correction-loop + add Mermaid component #660 first.

Test plan

• After docs(cookbook): revamp eval-correction-loop + add Mermaid component #660 merges, pnpm dev and visit /docs/cookbook/self-hosting/docker-compose-quickstart. Confirm:
  • "Verify your environment" section renders with the bash check and expected output
  • Mermaid diagram in "The self-hosted stack" renders as a 4-node flow, not raw code
  • Step 5 screenshot loads from S3 and shows the trace dashboard
• Em-dash check: grep -nE "(-|-)" src/pages/docs/cookbook/self-hosting/docker-compose-quickstart.mdx returns no hits.
• pnpm astro build passes.