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

.gsd/milestones/M004/slices/S03/S03-PLAN.md

@@ -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
 

.gsd/milestones/M004/slices/S03/tasks/T01-VERIFY.json

@@ -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
+}

.gsd/milestones/M004/slices/S03/tasks/T02-SUMMARY.md

@@ -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.