xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

feat: Added DebugPayloadViewer component with collapsible System Prompt…

Browse source 
- "frontend/src/pages/AdminPipeline.tsx"
- "frontend/src/api/public-client.ts"
- "frontend/src/App.css"

GSD-Task: S02/T01
This commit is contained in:
jlightner 2026-03-30 19:07:23 +00:00
parent 653c927845
commit 07eaa7f309
2 changed files with 83 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gsd/milestones/M007/slices/S02/S02-PLAN.md
View file

@ -4,7 +4,7 @@
**Demo:** After this: Admin clicks an LLM call event, sees full prompt and response in a readable viewer, copies to clipboard, or downloads as JSON
## Tasks
- [ ] **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.
- [x] **T01: Added DebugPayloadViewer component with collapsible System Prompt / User Prompt / Response sections, per-section copy-to-clipboard, and JSON export — wired into LLM call event rows** — 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.
- Estimate: 45m
- Files: frontend/src/api/public-client.ts, frontend/src/pages/AdminPipeline.tsx, frontend/src/App.css
- Verify: 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'

82
.gsd/milestones/M007/slices/S02/tasks/T01-SUMMARY.md Normal file
View file

@ -0,0 +1,82 @@
---
id: T01
parent: S02
milestone: M007
provides: []
requires: []
affects: []
key_files: ["frontend/src/pages/AdminPipeline.tsx", "frontend/src/api/public-client.ts", "frontend/src/App.css"]
key_decisions: ["Used clipboard API with execCommand fallback for non-HTTPS admin tool context", "DebugPayloadViewer renders only when at least one debug text field is non-null"]
patterns_established: []
drill_down_paths: []
observability_surfaces: []
duration: ""
verification_result: "TypeScript compiled clean on ub01. Docker build succeeded (48 modules, 886ms). Site reachable at ub01:8096. Browser assertions 8/8 passed — debug-viewer selectors visible, all text labels present. Collapsible section expand confirmed visually with full system prompt rendering in pre block."
completed_at: 2026-03-30T19:07:11.157Z
blocker_discovered: false
---
# T01: Added DebugPayloadViewer component with collapsible System Prompt / User Prompt / Response sections, per-section copy-to-clipboard, and JSON export — wired into LLM call event rows
> Added DebugPayloadViewer component with collapsible System Prompt / User Prompt / Response sections, per-section copy-to-clipboard, and JSON export — wired into LLM call event rows
## What Happened
---
id: T01
parent: S02
milestone: M007
key_files:
- frontend/src/pages/AdminPipeline.tsx
- frontend/src/api/public-client.ts
- frontend/src/App.css
key_decisions:
- Used clipboard API with execCommand fallback for non-HTTPS admin tool context
- DebugPayloadViewer renders only when at least one debug text field is non-null
duration: ""
verification_result: passed
completed_at: 2026-03-30T19:07:11.158Z
blocker_discovered: false
---
# T01: Added DebugPayloadViewer component with collapsible System Prompt / User Prompt / Response sections, per-section copy-to-clipboard, and JSON export — wired into LLM call event rows
**Added DebugPayloadViewer component with collapsible System Prompt / User Prompt / Response sections, per-section copy-to-clipboard, and JSON export — wired into LLM call event rows**
## What Happened
Extended PipelineEvent TypeScript interface with three optional string fields. Built DebugPayloadViewer component with independently collapsible sections, clipboard copy with execCommand fallback, and JSON file export. Added 100 lines of CSS following the existing JsonViewer BEM pattern with var(--color-*) custom properties per D017. Deployed to ub01 and verified live in browser — component renders on all llm_call events, sections expand/collapse correctly, all UI elements present.
## Verification
TypeScript compiled clean on ub01. Docker build succeeded (48 modules, 886ms). Site reachable at ub01:8096. Browser assertions 8/8 passed — debug-viewer selectors visible, all text labels present. Collapsible section expand confirmed visually with full system prompt rendering in pre block.
## Verification Evidence
| # | Command | Exit Code | Verdict | Duration |
|---|---------|-----------|---------|----------|
| 1 | `npx tsc --noEmit (ub01)` | 0 | ✅ pass | 4000ms |
| 2 | `docker compose build chrysopedia-web` | 0 | ✅ pass | 6600ms |
| 3 | `curl -s http://ub01:8096 | grep -q Chrysopedia` | 0 | ✅ pass | 500ms |
| 4 | `browser_assert (8 checks: selectors + text)` | 0 | ✅ pass | 2000ms |
## Deviations
Applied changes directly on ub01 (canonical dev directory) instead of pushing through git due to diverged branches. Fixed unicode escape issue in export button requiring second build. Service name is chrysopedia-web not chrysopedia-web-8096 as in plan verification command.
## Known Issues
Local dev01 copy is out of sync with ub01 — changes were applied and verified on ub01 only.
## Files Created/Modified
- `frontend/src/pages/AdminPipeline.tsx`
- `frontend/src/api/public-client.ts`
- `frontend/src/App.css`
## Deviations
Applied changes directly on ub01 (canonical dev directory) instead of pushing through git due to diverged branches. Fixed unicode escape issue in export button requiring second build. Service name is chrysopedia-web not chrysopedia-web-8096 as in plan verification command.
## Known Issues
Local dev01 copy is out of sync with ub01 — changes were applied and verified on ub01 only.