# S02: Debug Payload Viewer — Inline View, Copy, and Export in Admin UI — UAT

**Milestone:** M007
**Written:** 2026-03-30T19:10:25.752Z

# S02 UAT: Debug Payload Viewer

## Preconditions
- Chrysopedia running on ub01:8096 with chrysopedia-web-8096 container healthy
- At least one video has been processed with debug mode enabled (S01) so pipeline events contain non-null `system_prompt_text`, `user_prompt_text`, and `response_text` fields

## Test Cases

### TC1: Debug viewer appears on LLM call events
1. Navigate to http://ub01:8096/admin/pipeline
2. Click any video card that shows events (e.g. one with "extracted" status and >10 events)
3. Look for events with the 🤖 emoji and `llm_call` event type
4. **Expected:** Each llm_call event shows a "LLM DEBUG" header with a "↓ JSON" export button
5. **Expected:** Below the header, three collapsible sections: "System Prompt", "User Prompt", "Response" — each with a "Copy" button

### TC2: Debug viewer does NOT appear on non-LLM events
1. In the same expanded video event list, look at `complete`, `start`, or other non-llm_call events
2. **Expected:** No "LLM DEBUG" section appears on these events

### TC3: Collapsible sections expand and collapse
1. Click the "▸ System Prompt" toggle on any llm_call event
2. **Expected:** Section expands showing the full system prompt text in a pre-formatted block with dark background
3. Click the "▾ System Prompt" toggle again
4. **Expected:** Section collapses, hiding the content
5. Repeat for "User Prompt" and "Response" sections
6. **Expected:** Each section expands/collapses independently — expanding one does not affect others

### TC4: Copy to clipboard
1. Expand the "System Prompt" section on any llm_call event
2. Click the "Copy" button next to "System Prompt"
3. Paste into a text editor
4. **Expected:** The full system prompt text is in the clipboard, matching what's displayed in the viewer

### TC5: JSON export download
1. Click the "↓ JSON" button in the debug viewer header
2. **Expected:** Browser downloads a JSON file
3. Open the downloaded file
4. **Expected:** File contains a JSON object with keys `system_prompt`, `user_prompt`, and `response`, each containing the corresponding text (or null if the field was empty)

### TC6: Empty debug fields handling
1. If a video was processed WITHOUT debug mode, expand its events
2. Find an llm_call event
3. **Expected:** Either no debug viewer appears, or the viewer shows with empty/null sections — no crash or rendering error

### Edge Cases

### TC7: Very long prompts
1. Find an llm_call event where the system prompt is very long (stage 3 extraction prompts are typically 2000+ characters)
2. Expand the System Prompt section
3. **Expected:** Text renders in a scrollable pre-formatted block without breaking the page layout
4. **Expected:** The section does not push other events off-screen permanently — collapsing it restores normal layout

### TC8: Multiple viewers on same page
1. Expand a video with multiple llm_call events (3+)
2. **Expected:** Each event has its own independent debug viewer
3. Expand System Prompt on the first event and User Prompt on the second
4. **Expected:** Both sections stay expanded independently — they don't interfere with each other
