P4 — Web app (Next.js + shadcn/ui on Vercel)

The dashboard is the product face.

flowchart LR
    NEXT[Next.js + shadcn/ui] --> D[Dashboard - projects + runs]
    NEXT --> BS[Brand studio - tenant config editor]
    NEXT --> H[HITL approval modals]
    NEXT --> ML[Media library - Hetzner OBJ artifacts]
    NEXT --> RB[Recipe builder - capture]
    NEXT --> LP[Landing page - seed for P5]

Steps

1. Next.js app, Tailwind @theme brand tokens (obsidian / alabaster / gold / silentGray)
2. Dashboard: projects, pipeline runs, HITL approval UX, render queue + download
3. Brand studio: per-tenant editor for brand, voice, templates, recipes, models
4. Media library + capture recipe builder
5. Public landing page (seed for P5)

Acceptance criteria

• User runs a full pipeline from the browser
• Approve/reject at checkpoints; download deliverables
• Brand studio changes take effect on the next run without code changes

Full detail + mermaid diagrams: PLAN.md, docs/hld.md

Start by reading PLAN.md and docs/hld.md, including their Mermaid diagrams, to understand the proposed web app boundaries and dependencies. Then locate the Next.js app entry point and assess the dashboard, brand studio, approval flows, media library, recipe builder, and landing page against the stated acceptance criteria: browser pipeline runs, checkpoint approvals, downloads, and brand changes affecting the next run.