UI Specification: Data Pipeline Integration

> **For Frontend AI**: This document specifies UI components to implement. **DO NOT modify any files in `/lib/`** - the backend data layer is complete. Your job is strictly UI components and visual presentation. ### 1. Play Event Tracking (`/lib/audio/PhrasePlayer.ts`) Every user interaction is automatically tracked to Supabase: - `play_start` - When a phrase begins playing - `play_complete` - When a phrase finishes naturally - `skip` - When user stops before 90% completion - `pause` - When user stops after 90% completion - `crossfade_start` - When transition to next phrase begins - `crossfade_complete` - When transition finishes Each event includes: - `session_id` - Groups events by browser session - `position_seconds` / `position_pct` - Where in the phrase - `playback_duration_seconds` - How long they listened - `tempo_sync_method` - `'exact'` | `'half_time'` | `'double_time'` | `'none'` - `device_type` - `'mobile'` | `'tablet'` | `'desktop'` - `is_auto` - Whether auto-advance triggered the event ### 2. MediaPipe Capture Storage (`/lib/mediapipe/CaptureStorageService.ts`) Motion capture sessions are stored with: - `mediapipe_sessions` - Session metadata, performer name, tracking quality - `mediapipe_captures` - Frame-by-frame landmark data - `mediapipe_feature_sequences` - Aggregated motion features (body_energy, arm_spread, etc.) **Location**: Phrase card in list view (both `/phrases/page.tsx` list and any phrase cards)