Next.js 14 (App Router) · TypeScript · Tailwind CSS · Shadcn UI · Zustand
# 1. Copy the example env file and set your backend URL
cp .env.local.example .env.local
# Edit .env.local and set NEXT_PUBLIC_BACKEND_URL to wherever the FastAPI backend is running.
# Default: http://localhost:8000
# 2. Install dependencies
npm install
# 3. Start the dev server
npm run devThe dev server expects the FastAPI backend (BE-2/BE-3) to be running at the configured NEXT_PUBLIC_BACKEND_URL for all /transcript and /generate SSE calls.
frontend/
├── app/
│ ├── layout.tsx # Root layout — dark class applied globally
│ ├── page.tsx # Placeholder homepage (FE-2 adds URLInput + CustomizePanel)
│ └── globals.css # Tailwind v4 + Shadcn CSS variables
├── components/
│ └── ui/ # Shadcn primitives (button, etc.)
├── lib/
│ ├── utils.ts # cn() helper (Shadcn)
│ ├── localStorage.ts # Preferences load/save/clear
│ ├── api.ts # postTranscript client → POST /transcript
│ └── sseClient.ts # runGenerate client → POST /generate (SSE stream)
├── store/
│ └── useStreamsnap.ts # Zustand store — full run lifecycle + per-agent state
└── types/
└── index.ts # Shared TypeScript types (agents, SSE union, preferences)
- Dark theme is applied globally via
className="dark"on<html>— no toggle in scope. - Shadcn primitives live under
components/ui/. - No Vercel AI SDK and no
app/api/route handlers — all backend calls go directly via CORS. - The SSE reader (
sseClient.ts) uses a customfetch+ReadableStreamapproach instead ofEventSourcebecauseEventSourcecannot POST a body.