WordloopApp — Live UI
Slice 3 App.
Slice 3: App — Live Recording UI + Audio Streaming
Owner: App engineer Domain: App Complexity: L Prerequisite: Slice 1 merged and
./dev gen allrun
The user-facing live recording experience.
Tasks
- Add recording controls to Meeting Detail (Record / Stop button, state-aware)
- Implement microphone capture:
MediaRecorder→ binary chunks → WebSocket - Handle
RecordingStartedEvent,RecordingStoppedEvent,RecordingDegradedEvent - Render live transcript, talking points, and tasks
- Task input during recording: optimistic mutation with echo suppression
- Graceful error handling: ML unavailable, session already active
Test cases:
| Test | Location | Assertion |
|---|---|---|
| Start recording → indicator visible | test_app | Recording indicator component renders when session active |
| Live transcript renders final segments | test_app | Final segment appears in transcript list |
| Interim segments visually distinct | test_app | Interim segment has opacity or muted style |
| Task creation is optimistic | test_app | Task appears in list before server response |
| Echo suppression works | test_app | WebSocket event with matching sourceClientId is ignored |
| Degraded mode shows banner | test_app | RecordingDegradedEvent → warning banner visible |
| Full live flow end-to-end | test_system | User starts recording, sees transcript, adds task, stops — all data persisted |