From 07eaa7f309a33a679fa20a7a37b2c07b4cdd5541 Mon Sep 17 00:00:00 2001 From: jlightner Date: Mon, 30 Mar 2026 19:07:23 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20Added=20DebugPayloadViewer=20component?= =?UTF-8?q?=20with=20collapsible=20System=20Prompt=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - "frontend/src/pages/AdminPipeline.tsx" - "frontend/src/api/public-client.ts" - "frontend/src/App.css" GSD-Task: S02/T01 --- .gsd/milestones/M007/slices/S02/S02-PLAN.md | 2 +- .../M007/slices/S02/tasks/T01-SUMMARY.md | 82 +++++++++++++++++++ 2 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 .gsd/milestones/M007/slices/S02/tasks/T01-SUMMARY.md diff --git a/.gsd/milestones/M007/slices/S02/S02-PLAN.md b/.gsd/milestones/M007/slices/S02/S02-PLAN.md index 09fd196..b79b362 100644 --- a/.gsd/milestones/M007/slices/S02/S02-PLAN.md +++ b/.gsd/milestones/M007/slices/S02/S02-PLAN.md @@ -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' diff --git a/.gsd/milestones/M007/slices/S02/tasks/T01-SUMMARY.md b/.gsd/milestones/M007/slices/S02/tasks/T01-SUMMARY.md new file mode 100644 index 0000000..4877f43 --- /dev/null +++ b/.gsd/milestones/M007/slices/S02/tasks/T01-SUMMARY.md @@ -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.