docs/context/frontend_spec.md

## visual identity
- **typography:** jetbrains mono for mono font, lato for sanserif
- **componentry:** shadcn ui base.
- **style profile:** maia (radix-maia) — characterized by soft rounding, high-contrast surfaces, and subtle glassmorphism.
- **iconography:** phosphor icons (thin or regular weight).

## layout & components
1. **header:** metadata bar showing filename, session duration, and a global "Export" button (JSON/CSV).
2. **diarized transcript (left panel):** structured list of utterances grouped by speaker. each bubble contains the text and an "emotion chip" that reveals the dominant tags on hover.
3. **analytics dashboard (right panel - "the quad-view"):**
   - **russell’s circumplex:** a 2D coordinate grid with a tracking point moving between valence and arousal axes.
   - **plutchik’s wheel:** a radar chart showing intensities across primary emotions.
   - **prosodic meters:** vertical "V-U" style meters for pitch (Hz), jitter (%), and speech rate (wpm).
   - **pad space:** 3D sliders representing pleasure, arousal, and dominance indices.
4. **emotional timeline (bottom panel):** horizontal waveform view with color-coded sentiment "heatmaps" (e.g., a crimson stretch for stress). includes playback controls and a zoom slider.
5. **recorder hub (center):** circular "record" button with a real-time reactive glow and oscilloscope-style waveform animation.

## interactions
- **diarization selection:** clicking a speaker avatar filters the analytics to only show their emotional profile.
- **segment scrubbing:** clicking a transcript segment syncs the timeline and the quad-view analytics to that specific moment.
- **real-time playback:** users can replay specific chunks of audio with an overlay showing the live-calculated emotion data.

## technical requirements
- **real-time synchronicity:** ensuring the transcription, timeline, and 4-way analytics update in perfect sync with sub-500ms latency.
- **framing:** Next.js with Framer Motion for premium transitions.
- **ui library:** shadcn/ui with maia theme configuration.
- **icons:** @phosphor-icons/react.