Real-time Transcript Viewer

[mathaix]

User Story

As a manager
I want to watch an interview transcript in real-time
So that I can observe interview quality and content as it happens

Acceptance Criteria

Transcript Display

• Messages appear as they're exchanged
• Clear visual distinction: interviewee vs agent messages
• Timestamps on each message
• Typing indicator when agent is generating response
• Smooth auto-scroll to latest message

Real-time Streaming

• Connect to interview via AG-UI SSE stream
• Handle AG-UI events:
  • TextMessageStartEvent: New message beginning
  • TextMessageContentEvent: Streaming content chunks
  • TextMessageEndEvent: Message complete
  • StateSnapshotEvent: Full state sync
  • StateDeltaEvent: Incremental state updates
• Graceful reconnection on connection loss

Viewer Modes

• Live mode: Auto-scroll, follow latest messages
• Review mode: Scroll freely, pause auto-scroll
• Toggle between modes
• "Jump to latest" button when in review mode

Read-only Observation

• Manager cannot type in transcript (observation only)
• Intervention via separate controls (see intervention story)
• Multiple managers can watch same interview

UI Features

• Full-screen mode for focused viewing
• Side-by-side with entity feed
• Copy message text
• Highlight/annotate for later review
• Export transcript to file

Latency Requirements

• Messages appear within 500ms of being sent
• Typing indicator shows immediately
• No visible lag in streaming text

Technical Notes

• Use AG-UI React hooks: useAGUIEvents, useAGUIState
• Implement reconnection with exponential backoff
• Buffer messages during reconnection
• Consider WebSocket upgrade for lower latency

Definition of Done

• Streaming transcript working
• All AG-UI events handled
• Reconnection working
• UI modes working
• Latency < 500ms verified
• Code reviewed and merged

Requirement ID

LM-02

---

🤖 Generated with Claude Code