update frontend spec: incorporate speaker diarization, interactive timeline, and quad-view analytics

.context/frontend_spec.md

@@ -1 +1,24 @@
-# front end specification
+## visual identity
+- **theme:** glassmorphism on a deep dark void background.
+- **accent colors:** dynamic palette that shifts based on primary detected emotion (e.g., crimson for stress, electric blue for high arousal).
+- **typography:** high-precision monospaced fonts for data, with sans-serif headings (e.g., Lato, JetBrains Mono).
+
+## 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.