---
estimated_steps: 1
estimated_files: 3
skills_used: []
---

# T01: Build DebugPayloadViewer component with copy, export, and collapsible sections

Add the 3 debug text fields to the PipelineEvent TypeScript interface, create a DebugPayloadViewer component with collapsible sections for system prompt / user prompt / response, copy-to-clipboard per section, and export-as-JSON download. Wire it into the EventLog event rows in AdminPipeline.tsx. Add CSS styles following the existing JsonViewer pattern. All colors must use var(--color-*) custom properties per D017.

## Inputs

- ``frontend/src/api/public-client.ts` — PipelineEvent interface at L381, needs 3 new optional fields`
- ``frontend/src/pages/AdminPipeline.tsx` — EventLog component at L100, JsonViewer at L76 (pattern to follow), event row rendering at L161`
- ``frontend/src/App.css` — json-viewer styles at ~L2949 (pattern to follow), CSS custom properties in :root block`

## Expected Output

- ``frontend/src/api/public-client.ts` — PipelineEvent interface extended with system_prompt_text, user_prompt_text, response_text`
- ``frontend/src/pages/AdminPipeline.tsx` — New DebugPayloadViewer component wired into event rows`
- ``frontend/src/App.css` — .debug-viewer styles for collapsible sections, pre blocks, copy/export buttons`

## Verification

ssh ub01 "cd /vmPool/r/repos/xpltdco/chrysopedia && git pull && docker compose build chrysopedia-web-8096 && docker compose up -d chrysopedia-web-8096" && sleep 5 && curl -s http://ub01:8096 | grep -q 'Chrysopedia'
