# S03: Technique Page Redesign + Video Source on Moments — UAT

**Milestone:** M004
**Written:** 2026-03-30T06:58:43.577Z

## UAT: Technique Page Redesign + Video Source on Moments

### Preconditions
- Chrysopedia stack running on ub01 (all containers healthy)
- At least one technique page exists with key moments and signal chains (e.g., wave-shaping-synthesis-m-wave-shaper)
- Browser access to http://ub01:8096

### Test 1: API returns video_filename on key moments

1. Run: `curl -s http://ub01:8096/api/v1/techniques/wave-shaping-synthesis-m-wave-shaper | python3 -m json.tool`
2. **Expected:** Each object in `key_moments` array has a `video_filename` field
3. **Expected:** At least one moment has a non-empty `video_filename` value (e.g., "Skope - Understanding Waveshapers (2160p).mp4")
4. **Expected:** All existing fields (title, summary, timestamp_start, etc.) are still present and unchanged

### Test 2: Meta stats line renders below technique title

1. Navigate to http://ub01:8096/techniques/wave-shaping-synthesis-m-wave-shaper
2. **Expected:** Below the technique title, a stats line appears showing: "Compiled from N source(s) · M key moment(s) · Last updated [date]"
3. **Expected:** Source count reflects unique video filenames (should be 1 for this technique — all moments from same video)
4. **Expected:** Moment count matches the API response (13)
5. **Expected:** Date is a readable format, not raw ISO timestamp

### Test 3: Key moments show video filename

1. On the same technique page, scroll to the key moments section
2. **Expected:** Each key moment row displays the source video filename in smaller muted text
3. **Expected:** Long filenames are truncated with ellipsis (not wrapping or overflowing)
4. **Expected:** Moments without a video filename (if any) do not show an empty label

### Test 4: Signal chains render as monospace flow blocks

1. On the same technique page, scroll to the signal chains section
2. **Expected:** Each signal chain renders as a horizontal flow of steps separated by cyan `→` arrows
3. **Expected:** Steps use monospace-style font
4. **Expected:** The flow block has a subtle background (surface color) with padding and rounded corners
5. **Expected:** Steps wrap naturally on narrow viewports without breaking mid-step

### Test 5: No hardcoded colors in CSS

1. Run: `grep -P '#[0-9a-fA-F]{3,8}' frontend/src/App.css` and inspect results
2. **Expected:** All hex color values appear only within the `:root { }` block
3. **Expected:** Zero hex colors in any class definition outside `:root`

### Test 6: Frontend builds with zero errors

1. Run: `cd frontend && npm run build`
2. **Expected:** Build succeeds with exit code 0
3. **Expected:** No TypeScript errors in output

### Edge Cases

- **Technique with no key moments:** Meta stats should show "0 key moments" and "0 sources"
- **Technique with no signal chains:** Signal chains section should not render (or render empty gracefully)
- **Moment with empty video_filename:** Video filename label should not appear for that moment
