feat: Redesigned technique page frontend: meta stats line, video filena…
- "frontend/src/api/public-client.ts" - "frontend/src/pages/TechniquePage.tsx" - "frontend/src/App.css" GSD-Task: S03/T02
This commit is contained in:
jlightner
parent
f99ac1b8b9
commit
37426aae77
3 changed files with 120 additions and 1 deletions
|
|
@ -29,7 +29,7 @@
|
|||
- Estimate: 20m
|
||||
- Files: backend/schemas.py, backend/routers/techniques.py
|
||||
- Verify: ssh ub01 'cd /vmPool/r/repos/xpltdco/chrysopedia && docker compose build chrysopedia-api && docker compose up -d chrysopedia-api && sleep 3 && curl -s http://localhost:8096/api/v1/techniques/ | python3 -m json.tool | head -5' && ssh ub01 'curl -s http://localhost:8096/api/v1/techniques/wave-shaping-synthesis-m-wave-shaper | python3 -c "import sys,json; d=json.load(sys.stdin); kms=d.get(\"key_moments\",[]); assert len(kms)>0; assert all(\"video_filename\" in km for km in kms); assert any(km[\"video_filename\"]!=\"\" for km in kms); print(f\"OK: {len(kms)} moments, all have video_filename\")"'
|
||||
- [ ] **T02: Redesign TechniquePage — meta line, video filenames, monospace signal chains** — Redesign the frontend technique page to match the spec layout. Three visual changes: meta stats line, video filename on key moments, and monospace signal chain flow blocks. All CSS must use existing `var(--*)` tokens.
|
||||
- [x] **T02: Redesigned technique page frontend: meta stats line, video filenames on key moments, monospace signal chain flow blocks with arrow separators** — Redesign the frontend technique page to match the spec layout. Three visual changes: meta stats line, video filename on key moments, and monospace signal chain flow blocks. All CSS must use existing `var(--*)` tokens.
|
||||
|
||||
## Steps
|
||||
|
||||
|
|
|
|||
36
.gsd/milestones/M004/slices/S03/tasks/T01-VERIFY.json
Normal file
36
.gsd/milestones/M004/slices/S03/tasks/T01-VERIFY.json
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"schemaVersion": 1,
|
||||
"taskId": "T01",
|
||||
"unitId": "M004/S03/T01",
|
||||
"timestamp": 1774853401784,
|
||||
"passed": false,
|
||||
"discoverySource": "task-plan",
|
||||
"checks": [
|
||||
{
|
||||
"command": "ssh ub01 'cd /vmPool/r/repos/xpltdco/chrysopedia",
|
||||
"exitCode": 2,
|
||||
"durationMs": 6,
|
||||
"verdict": "fail"
|
||||
},
|
||||
{
|
||||
"command": "docker compose build chrysopedia-api",
|
||||
"exitCode": 0,
|
||||
"durationMs": 63488,
|
||||
"verdict": "pass"
|
||||
},
|
||||
{
|
||||
"command": "docker compose up -d chrysopedia-api",
|
||||
"exitCode": 1,
|
||||
"durationMs": 92403,
|
||||
"verdict": "fail"
|
||||
},
|
||||
{
|
||||
"command": "sleep 3",
|
||||
"exitCode": 0,
|
||||
"durationMs": 3014,
|
||||
"verdict": "pass"
|
||||
}
|
||||
],
|
||||
"retryAttempt": 1,
|
||||
"maxRetries": 2
|
||||
}
|
||||
83
.gsd/milestones/M004/slices/S03/tasks/T02-SUMMARY.md
Normal file
83
.gsd/milestones/M004/slices/S03/tasks/T02-SUMMARY.md
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
id: T02
|
||||
parent: S03
|
||||
milestone: M004
|
||||
provides: []
|
||||
requires: []
|
||||
affects: []
|
||||
key_files: ["frontend/src/api/public-client.ts", "frontend/src/pages/TechniquePage.tsx", "frontend/src/App.css"]
|
||||
key_decisions: ["Used text-overflow ellipsis on video filename with max-width 20rem to prevent layout breakage", "Used IIFE in JSX for meta stats computation to keep template readable"]
|
||||
patterns_established: []
|
||||
drill_down_paths: []
|
||||
observability_surfaces: []
|
||||
duration: ""
|
||||
verification_result: "npm run build succeeds with zero errors. No hardcoded hex colors outside :root. Browser verification on ub01:8096 confirms meta stats line, video filenames, and monospace signal chain flow blocks all render correctly."
|
||||
completed_at: 2026-03-30T06:56:54.253Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T02: Redesigned technique page frontend: meta stats line, video filenames on key moments, monospace signal chain flow blocks with arrow separators
|
||||
|
||||
> Redesigned technique page frontend: meta stats line, video filenames on key moments, monospace signal chain flow blocks with arrow separators
|
||||
|
||||
## What Happened
|
||||
---
|
||||
id: T02
|
||||
parent: S03
|
||||
milestone: M004
|
||||
key_files:
|
||||
- frontend/src/api/public-client.ts
|
||||
- frontend/src/pages/TechniquePage.tsx
|
||||
- frontend/src/App.css
|
||||
key_decisions:
|
||||
- Used text-overflow ellipsis on video filename with max-width 20rem to prevent layout breakage
|
||||
- Used IIFE in JSX for meta stats computation to keep template readable
|
||||
duration: ""
|
||||
verification_result: passed
|
||||
completed_at: 2026-03-30T06:56:54.254Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T02: Redesigned technique page frontend: meta stats line, video filenames on key moments, monospace signal chain flow blocks with arrow separators
|
||||
|
||||
**Redesigned technique page frontend: meta stats line, video filenames on key moments, monospace signal chain flow blocks with arrow separators**
|
||||
|
||||
## What Happened
|
||||
|
||||
Added video_filename to the TypeScript KeyMomentSummary interface. In TechniquePage.tsx, inserted a meta stats line below the header (source count, moment count, last updated), added video filename display on each key moment row, and replaced ordered-list signal chains with monospace inline flow blocks using cyan arrow separators. Added 5 new CSS classes using only var(--*) tokens. Deployed to ub01 and verified all three visual changes render correctly.
|
||||
|
||||
## Verification
|
||||
|
||||
npm run build succeeds with zero errors. No hardcoded hex colors outside :root. Browser verification on ub01:8096 confirms meta stats line, video filenames, and monospace signal chain flow blocks all render correctly.
|
||||
|
||||
## Verification Evidence
|
||||
|
||||
| # | Command | Exit Code | Verdict | Duration |
|
||||
|---|---------|-----------|---------|----------|
|
||||
| 1 | `cd frontend && npm run build` | 0 | ✅ pass | 8200ms |
|
||||
| 2 | `grep -cP hardcoded hex colors outside :root` | 0 | ✅ pass | 100ms |
|
||||
| 3 | `ssh -A ub01 docker compose build chrysopedia-web` | 0 | ✅ pass | 4700ms |
|
||||
| 4 | `ssh -A ub01 docker compose up -d chrysopedia-web` | 0 | ✅ pass | 3000ms |
|
||||
| 5 | `browser: visual verification of all 3 layout changes on ub01:8096` | 0 | ✅ pass | 4000ms |
|
||||
|
||||
|
||||
## Deviations
|
||||
|
||||
Docker compose service name is chrysopedia-web not chrysopedia-web-8096. Required ssh -A and stashing ub01 local changes for git pull.
|
||||
|
||||
## Known Issues
|
||||
|
||||
None.
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `frontend/src/api/public-client.ts`
|
||||
- `frontend/src/pages/TechniquePage.tsx`
|
||||
- `frontend/src/App.css`
|
||||
|
||||
|
||||
## Deviations
|
||||
Docker compose service name is chrysopedia-web not chrysopedia-web-8096. Required ssh -A and stashing ub01 local changes for git pull.
|
||||
|
||||
## Known Issues
|
||||
None.
|
||||
Loading…
Add table
Reference in a new issue