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

## Summary

Straightforward frontend feature. The backend already returns `system_prompt_text`, `user_prompt_text`, and `response_text` on every event item from `GET /admin/pipeline/events/{video_id}`. The frontend `PipelineEvent` TypeScript interface is missing these 3 fields. The existing `JsonViewer` component shows the JSONB `payload` but there's no viewer for the debug text fields. No new API endpoints needed.

## Recommendation

Single task or two small tasks:
1. Add the 3 debug fields to the `PipelineEvent` TS interface, build a `DebugPayloadViewer` component (inline expand for system prompt / user prompt / response, copy-to-clipboard button, export-as-JSON download), and wire it into the existing `EventLog` event rows in `AdminPipeline.tsx`.
2. Add CSS for the new viewer.

Natural seam: the type update + component + wiring + CSS can all land in one task since they're tightly coupled and small.

## Implementation Landscape

### What exists

| File | Role |
|------|------|
| `frontend/src/api/public-client.ts` (L381-393) | `PipelineEvent` interface — missing `system_prompt_text`, `user_prompt_text`, `response_text` |
| `frontend/src/pages/AdminPipeline.tsx` | Full pipeline admin page. `EventLog` component renders events, `JsonViewer` shows JSONB payload. Each event row is a `pipeline-event` div. |
| `frontend/src/App.css` (L2949-2985) | `.json-viewer` styles — reusable pattern for the debug viewer |
| `backend/routers/pipeline.py` (L168-185) | Event list endpoint already returns all 3 debug text fields |
| `backend/schemas.py` | `TokenSummaryResponse`, `DebugModeResponse` etc already defined |

### What needs to change

1. **`public-client.ts`** — Add 3 optional string fields to `PipelineEvent` interface: `system_prompt_text: string | null`, `user_prompt_text: string | null`, `response_text: string | null`
2. **`AdminPipeline.tsx`** — New `DebugPayloadViewer` component that:
   - Only renders when at least one debug field is non-null (events without debug data show nothing extra)
   - Shows collapsible sections for System Prompt, User Prompt, Response
   - Each section has a copy-to-clipboard button (`navigator.clipboard.writeText()`)
   - An "Export JSON" button that downloads a JSON file with all 3 fields + event metadata via `URL.createObjectURL(new Blob(...))`
   - Wire into the event row, after the existing `JsonViewer`
3. **`App.css`** — Styles for `.debug-viewer` following the existing `.json-viewer` pattern. Monospace `<pre>` blocks, max-height with scroll, accent-colored toggles.

### Patterns to follow

- **Collapsible sections**: Copy the `JsonViewer` pattern (useState boolean, toggle button, conditional render of `<pre>`)
- **Copy to clipboard**: `navigator.clipboard.writeText(text)` — standard API, no library needed. Show brief "Copied!" feedback via state timeout.
- **Download as JSON**: Create a Blob, `URL.createObjectURL()`, click a hidden `<a>` with download attribute. Standard pattern, no library.
- **CSS custom properties**: All colors must use `var(--color-*)` tokens from the existing `:root` block (D017). Use `--color-bg-transcript` for code blocks, `--color-accent` for interactive elements.

### Constraints

- Debug fields are NULL when debug mode was off during the pipeline run. UI must handle this gracefully — no empty viewers.
- `system_prompt_text` can be very long (7752+ chars observed in S01 verification). Need `max-height` + scroll on the `<pre>` blocks.
- No new API endpoints needed. No backend changes.
- Frontend build must pass with zero TypeScript errors (established pattern).

### Verification

1. `ssh ub01 "cd /vmPool/r/repos/xpltdco/chrysopedia && docker compose build chrysopedia-web-8096 && docker compose up -d chrysopedia-web-8096"` — frontend builds
2. Browse to `http://ub01:8096` → Pipeline Management → expand a video → expand an LLM call event → debug viewer shows prompts and response
3. Copy button copies text to clipboard
4. Export JSON downloads a `.json` file with event metadata + debug fields
5. Events without debug data (debug mode was off) show no debug viewer section
