docs/ui_smoke_checklist.md

# UI Smoke Test Checklist (UI 12 + TST 08 + TST 12)

Run through this checklist before every demo or merge to main. Target: under 5 minutes.

---

## Pre-requisites

- [ ] Backend server is running on `localhost:7860` (or HF Space is live)
- [ ] Frontend dev server is running on `localhost:5173` (or built and served from Docker)

---

## Dashboard Page

- [ ] Page loads without console errors
- [ ] 3D molecule scene renders in hero background (subtle, low opacity)
- [ ] All three characters visible: Dr. Elara, Takuma, Aldric
- [ ] Character tilt cards respond to mouse hover with 3D effect
- [ ] "Run Episode" button navigates to `/episode`
- [ ] "Training Results" anchor scrolls to the chart section
- [ ] Scenario card links navigate to `/episode?template=ml_benchmark`
- [ ] Training Results chart renders with baseline and trained lines
- [ ] Before/after toggle switches between baseline and trained views
- [ ] Metric cards show Avg Reward, Agreement, Avg Rounds, Invalid Rate

---

## Episode Page -- Pre-game

- [ ] All three characters display with names (Dr. Elara, Takuma, Aldric)
- [ ] Controls panel shows: Scenario selector, Difficulty buttons, Seed input, Dice button
- [ ] Default scenario is "ML Benchmark"
- [ ] Start Episode button is enabled

---

## Episode Page -- Running Episode

- [ ] Clicking "Start Episode" plays episode start sound
- [ ] CharacterStage appears with Scientist and Lab Manager
- [ ] Judge observer icon appears in top-right corner with "Observing" label
- [ ] Paper panel shows ViT paper title, hypothesis, method, key finding
- [ ] Episode ID is displayed and copyable in the Episode Info section
- [ ] Negotiation log shows messages with animated character avatars
- [ ] Each message entry has a slide-in animation
- [ ] Protocol panel updates with current plan
- [ ] Lab Inventory panel shows GPU, budget, and staff constraints
- [ ] Round progress bar fills proportionally
- [ ] "Step" button is visible and enabled

---

## Episode Page -- Judging Phase

- [ ] Clicking "Step" triggers negotiate sound
- [ ] Judge character appears center-stage with dramatic entrance animation
- [ ] Judge appear sound plays, followed by gavel sound
- [ ] Phase indicator shows "Judging" with pulsing dot
- [ ] Judging phase lasts approximately 4 seconds

---

## Episode Page -- Complete Phase

- [ ] Score reveal sound plays
- [ ] Success/failure sound plays based on verdict
- [ ] Judge stays center-stage with verdict action
- [ ] Score card shows total reward (8.12) with R/F/D breakdown
- [ ] JudgeAuditPanel appears below the negotiation log
- [ ] Judge audit shows verdict, notes, and score details
- [ ] Replay viewer appears in the right panel
- [ ] Score panel shows component scores

---

## Replay Viewer

- [ ] Forward/back buttons step through messages
- [ ] Skip-to-start and skip-to-end buttons work
- [ ] Scrubber slider moves to the correct message
- [ ] Character avatars display for each replayed message
- [ ] Message content matches the original negotiation

---

## Fallback Path

- [ ] Navigate to `{server_url}/web` -- OpenEnv fallback UI loads
- [ ] Fallback UI can start a seeded episode
- [ ] Fallback UI shows step results

---

## Audio

- [ ] Button clicks produce click sound
- [ ] Episode start plays ascending chime
- [ ] Scientist messages play triangle-wave blips
- [ ] Lab Manager messages play square-wave blips
- [ ] Judge appearance plays dramatic chord
- [ ] Gavel sound plays during judging
- [ ] Score reveal plays ascending arpeggio

---

## Responsiveness

- [ ] Layout is usable at 1280px width (typical demo screen)
- [ ] No horizontal scroll at 1024px width
- [ ] Three-panel layout stacks on narrow viewports

---

## Sign-off

| Tester | Date | Pass/Fail | Notes |
|--------|------|-----------|-------|
| | | | |