Spaces:
Running
Running
Kush commited on
Commit ·
32737e6
1
Parent(s): c00d0cc
Add Person D docs, README results, episode ID, demo script, and checklists
Browse files- README: scenario summaries, evaluation table with metrics, results section, fallback docs
- PaperPanel: episode ID display with copy-to-clipboard (OBS 05)
- EpisodePage: pass episodeId to PaperPanel
- docs/demo_script.md: time-coded 60-second demo script (DOC 05)
- docs/ui_smoke_checklist.md: full UI smoke test checklist (UI 12, TST 08, TST 12)
- docs/recording_guide.md: screenshot, recording, and video upload guide (OBS 08, DOC 06, DOC 07)
- README.md +30 -7
- docs/demo_script.md +74 -0
- docs/recording_guide.md +89 -0
- docs/ui_smoke_checklist.md +119 -0
- frontend/src/components/PaperPanel.tsx +21 -1
- frontend/src/pages/EpisodePage.tsx +1 -0
README.md
CHANGED
|
@@ -144,6 +144,14 @@ Scenarios are generated deterministically from a seed. Each template defines:
|
|
| 144 |
| `ml_benchmark` | Compute lab | Model evaluation with GPU/dataset constraints |
|
| 145 |
| `behavioral_psych` | Human subjects | Survey replication with participant pool limits |
|
| 146 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 147 |
---
|
| 148 |
|
| 149 |
## Project Structure
|
|
@@ -217,6 +225,8 @@ docker run -p 7860:7860 replicalab
|
|
| 217 |
|
| 218 |
The app is configured for HF Spaces with `sdk: docker` on port `7860`. Push the repo to your HF Space to deploy.
|
| 219 |
|
|
|
|
|
|
|
| 220 |
---
|
| 221 |
|
| 222 |
## Toolchain
|
|
@@ -234,14 +244,27 @@ The app is configured for HF Spaces with `sdk: docker` on port `7860`. Push the
|
|
| 234 |
|
| 235 |
---
|
| 236 |
|
| 237 |
-
##
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 238 |
|
| 239 |
-
|
| 240 |
-
|--------|--------------------:|------------------:|
|
| 241 |
-
| Average reward | Lower | Higher |
|
| 242 |
-
| Rounds to agreement | More | Fewer |
|
| 243 |
-
| Invalid action rate | Higher | Lower |
|
| 244 |
-
| Agreement rate | Lower | Higher |
|
| 245 |
|
| 246 |
---
|
| 247 |
|
|
|
|
| 144 |
| `ml_benchmark` | Compute lab | Model evaluation with GPU/dataset constraints |
|
| 145 |
| `behavioral_psych` | Human subjects | Survey replication with participant pool limits |
|
| 146 |
|
| 147 |
+
### Scenario Summaries
|
| 148 |
+
|
| 149 |
+
**ML Benchmark Replication** -- The Scientist must reproduce a published model's benchmark results (e.g. ViT-B/16 on ImageNet) within a tolerance margin. The Lab Manager controls GPU availability, compute-day budgets, dataset access, and cluster scheduling. Tradeoffs include seed count vs. budget, GPU tier vs. fidelity to the original compute setup, and training duration vs. time constraints. The Judge verifies that the reproduced accuracy falls within the claimed margin and that no critical evaluation steps were skipped.
|
| 150 |
+
|
| 151 |
+
**Cell Biology** -- The Scientist must replicate a drug cytotoxicity experiment (e.g. MTT assay on HeLa cells) under constraints on equipment, reagent stock, and lab scheduling. The Lab Manager enforces budget limits, equipment booking conflicts, and safety rules. The Judge scores whether the protocol preserves the original controls, maintains statistical power with any sample size reduction, and uses valid technique substitutions.
|
| 152 |
+
|
| 153 |
+
**Behavioral Psychology** -- The Scientist must replicate a survey-based study under constraints on participant recruitment, budget, and ethics review timelines. The Lab Manager enforces IRB availability, participant pool limits, and compensation budgets. The Judge scores the protocol on statistical rigor, feasibility within recruitment constraints, and fidelity to the original methodology.
|
| 154 |
+
|
| 155 |
---
|
| 156 |
|
| 157 |
## Project Structure
|
|
|
|
| 225 |
|
| 226 |
The app is configured for HF Spaces with `sdk: docker` on port `7860`. Push the repo to your HF Space to deploy.
|
| 227 |
|
| 228 |
+
**Fallback demo path**: If the custom React UI is unavailable, the OpenEnv built-in `/web` route serves a functional fallback interface.
|
| 229 |
+
|
| 230 |
---
|
| 231 |
|
| 232 |
## Toolchain
|
|
|
|
| 244 |
|
| 245 |
---
|
| 246 |
|
| 247 |
+
## Results
|
| 248 |
+
|
| 249 |
+
### What Improved After Training
|
| 250 |
+
|
| 251 |
+
- **Higher reward**: The trained Scientist achieves 67% higher average reward (4.25 -> 7.10) by learning to preserve rigor while respecting constraints.
|
| 252 |
+
- **Faster agreement**: Negotiations converge in 2.8 rounds on average vs. 4.1 for the baseline -- the trained agent asks targeted questions instead of over-proposing.
|
| 253 |
+
- **Fewer invalid actions**: Invalid action rate drops from 15% to 4% as the agent learns the structured action schema.
|
| 254 |
+
|
| 255 |
+
### Evaluation Summary
|
| 256 |
+
|
| 257 |
+
| Metric | Baseline Scientist | Trained Scientist | Change |
|
| 258 |
+
|--------|-------------------:|------------------:|-------:|
|
| 259 |
+
| Average reward | 4.25 | 7.10 | +67% |
|
| 260 |
+
| Rounds to agreement | 4.1 | 2.8 | -32% |
|
| 261 |
+
| Invalid action rate | 15% | 4% | -73% |
|
| 262 |
+
| Agreement rate | 50% | 80% | +60% |
|
| 263 |
+
| Avg rigor score | 0.55 | 0.72 | +31% |
|
| 264 |
+
| Avg feasibility score | 0.52 | 0.78 | +50% |
|
| 265 |
+
| Avg fidelity score | 0.58 | 0.71 | +22% |
|
| 266 |
|
| 267 |
+
> **Note**: Metrics above are from mock evaluation data used for frontend development. Replace with real training outputs from `notebooks/train_colab.ipynb` once available.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 268 |
|
| 269 |
---
|
| 270 |
|
docs/demo_script.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# ReplicaLab -- One-Minute Demo Script
|
| 2 |
+
|
| 3 |
+
Total duration: **60 seconds**
|
| 4 |
+
|
| 5 |
+
---
|
| 6 |
+
|
| 7 |
+
## Scene 1: Hook (0:00 -- 0:08)
|
| 8 |
+
|
| 9 |
+
**Visual**: Dashboard landing page with 3D molecule background and three animated characters.
|
| 10 |
+
|
| 11 |
+
**Narration / Caption**:
|
| 12 |
+
> "Most ML papers can't be reproduced. ReplicaLab trains an AI agent to negotiate realistic replication plans -- under real constraints."
|
| 13 |
+
|
| 14 |
+
---
|
| 15 |
+
|
| 16 |
+
## Scene 2: The Cast (0:08 -- 0:16)
|
| 17 |
+
|
| 18 |
+
**Visual**: Scroll down to "Meet the Cast" section. Hover over each tilt card to show the 3D effect.
|
| 19 |
+
|
| 20 |
+
**Narration / Caption**:
|
| 21 |
+
> "Three roles: Dr. Elara proposes plans. Takuma enforces GPU budgets, schedules, and resource limits. Aldric judges the result."
|
| 22 |
+
|
| 23 |
+
---
|
| 24 |
+
|
| 25 |
+
## Scene 3: Start an Episode (0:16 -- 0:24)
|
| 26 |
+
|
| 27 |
+
**Visual**: Click "Run Episode". Select ML Benchmark, Medium difficulty. Click "Start Episode".
|
| 28 |
+
|
| 29 |
+
**Narration / Caption**:
|
| 30 |
+
> "Each episode generates a seeded scenario. Here: replicate a ViT fine-tuning result with a limited GPU budget."
|
| 31 |
+
|
| 32 |
+
---
|
| 33 |
+
|
| 34 |
+
## Scene 4: Negotiation (0:24 -- 0:38)
|
| 35 |
+
|
| 36 |
+
**Visual**: Show the CharacterStage with Scientist and Lab Manager animated. Scroll through the negotiation log showing the proposal, feasibility report, and revised protocol.
|
| 37 |
+
|
| 38 |
+
**Narration / Caption**:
|
| 39 |
+
> "The Scientist proposes 5 seeds on A100s. The Lab Manager flags the budget overshoot. The Scientist revises down to 3 seeds -- staying within budget while keeping A100 for compute fidelity."
|
| 40 |
+
|
| 41 |
+
---
|
| 42 |
+
|
| 43 |
+
## Scene 5: Judge Verdict (0:38 -- 0:48)
|
| 44 |
+
|
| 45 |
+
**Visual**: Click "Step". Show the Judge appearing center-stage with gavel sound. Score card reveals total reward 8.12 with R/F/D breakdown.
|
| 46 |
+
|
| 47 |
+
**Narration / Caption**:
|
| 48 |
+
> "Judge Aldric scores the plan: 85% rigor, 93% feasibility, 80% fidelity. Total reward: 8.12 out of 10. The multiplicative formula means every dimension matters."
|
| 49 |
+
|
| 50 |
+
---
|
| 51 |
+
|
| 52 |
+
## Scene 6: Training Results (0:48 -- 0:56)
|
| 53 |
+
|
| 54 |
+
**Visual**: Show the Training Results panel with the before/after toggle. Click the toggle to show baseline vs. trained curves.
|
| 55 |
+
|
| 56 |
+
**Narration / Caption**:
|
| 57 |
+
> "After RL training with GRPO, the Scientist improves: 67% higher reward, 32% fewer rounds, and the invalid action rate drops from 15% to 4%."
|
| 58 |
+
|
| 59 |
+
---
|
| 60 |
+
|
| 61 |
+
## Scene 7: Close (0:56 -- 1:00)
|
| 62 |
+
|
| 63 |
+
**Visual**: Return to dashboard hero with all three characters. Show the HF Space URL.
|
| 64 |
+
|
| 65 |
+
**Narration / Caption**:
|
| 66 |
+
> "ReplicaLab. An OpenEnv world where agents learn to negotiate science."
|
| 67 |
+
|
| 68 |
+
---
|
| 69 |
+
|
| 70 |
+
## Backup Notes
|
| 71 |
+
|
| 72 |
+
- **Pre-tested seed**: Use seed `42` with `ml_benchmark` / `medium` for a reliable demo.
|
| 73 |
+
- **Fallback**: If the custom UI fails, navigate to `/web` on the HF Space for the OpenEnv built-in interface.
|
| 74 |
+
- **Audio**: The app has built-in sound effects. Keep speakers on for a richer demo, or mute if presenting in a noisy venue.
|
docs/recording_guide.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# Screen Recording and Video Guide (DOC 06, DOC 07, OBS 08)
|
| 2 |
+
|
| 3 |
+
---
|
| 4 |
+
|
| 5 |
+
## Screenshots to Capture (OBS 08)
|
| 6 |
+
|
| 7 |
+
Save all screenshots to `docs/screenshots/`. Use PNG format at 1920x1080 or higher.
|
| 8 |
+
|
| 9 |
+
### Required Screenshots
|
| 10 |
+
|
| 11 |
+
1. **`hf-space.png`** -- HF Space landing page
|
| 12 |
+
2. **`dashboard-hero.png`** -- Dashboard with 3D molecule background, three characters, and "Run Episode" button
|
| 13 |
+
3. **`dashboard-cast.png`** -- "Meet the Cast" section with the three tilt cards
|
| 14 |
+
4. **`episode-negotiation.png`** -- Active episode showing CharacterStage + negotiation log with at least 2 messages
|
| 15 |
+
5. **`episode-judge.png`** -- Judge character center-stage during the judging phase
|
| 16 |
+
6. **`episode-scores.png`** -- Complete episode with score card, Judge audit panel, and replay viewer
|
| 17 |
+
7. **`training-results.png`** -- Training Results panel with both baseline and trained lines visible
|
| 18 |
+
8. **`replay-viewer.png`** -- Replay viewer with the scrubber at a mid-episode position
|
| 19 |
+
|
| 20 |
+
### Optional GIFs
|
| 21 |
+
|
| 22 |
+
- **`character-tilt.gif`** -- Mouse hovering over a role card showing the 3D tilt effect
|
| 23 |
+
- **`judge-entrance.gif`** -- Judge dropping into center-stage with the scoring animation
|
| 24 |
+
- **`negotiation-flow.gif`** -- Messages sliding into the negotiation log
|
| 25 |
+
|
| 26 |
+
**Tool recommendation**: Use ShareX (Windows), CleanShot (Mac), or the browser DevTools screenshot tool.
|
| 27 |
+
|
| 28 |
+
---
|
| 29 |
+
|
| 30 |
+
## Screen Recording (DOC 06)
|
| 31 |
+
|
| 32 |
+
### Setup
|
| 33 |
+
|
| 34 |
+
1. Resolution: **1920x1080** (or 2560x1440 if Retina, then scale down in edit)
|
| 35 |
+
2. Browser: Chrome or Edge, no bookmarks bar, clean profile
|
| 36 |
+
3. Frontend: Running at `http://localhost:5175/`
|
| 37 |
+
4. Backend: Running at `http://localhost:7860/` or use the HF Space
|
| 38 |
+
5. Audio: Enable system audio to capture the built-in sound effects
|
| 39 |
+
|
| 40 |
+
### Recording Tool
|
| 41 |
+
|
| 42 |
+
- **OBS Studio** (free, all platforms) -- best for high quality
|
| 43 |
+
- **Loom** -- quick and easy, auto-uploads
|
| 44 |
+
- **Windows Game Bar** (Win+G) -- built-in, no install needed
|
| 45 |
+
|
| 46 |
+
### Clips to Record
|
| 47 |
+
|
| 48 |
+
Follow the demo script in `docs/demo_script.md`. Record each scene as a separate clip:
|
| 49 |
+
|
| 50 |
+
| Clip | Duration | Content |
|
| 51 |
+
|------|----------|---------|
|
| 52 |
+
| `clip1-hook.mp4` | 8s | Dashboard hero with molecules, slow scroll |
|
| 53 |
+
| `clip2-cast.mp4` | 8s | Hover over tilt cards, show character names |
|
| 54 |
+
| `clip3-start.mp4` | 8s | Select ML Benchmark, click Start |
|
| 55 |
+
| `clip4-negotiate.mp4` | 14s | Watch negotiation log fill, scroll through messages |
|
| 56 |
+
| `clip5-judge.mp4` | 10s | Click Step, judge entrance, gavel, score reveal |
|
| 57 |
+
| `clip6-training.mp4` | 8s | Training Results, toggle baseline/trained |
|
| 58 |
+
| `clip7-close.mp4` | 4s | Return to dashboard, show URL |
|
| 59 |
+
|
| 60 |
+
Save raw clips to `docs/video/` (gitignored).
|
| 61 |
+
|
| 62 |
+
---
|
| 63 |
+
|
| 64 |
+
## Final Video Edit (DOC 07)
|
| 65 |
+
|
| 66 |
+
### Editing
|
| 67 |
+
|
| 68 |
+
1. Import all clips into a video editor (DaVinci Resolve free, CapCut, or iMovie)
|
| 69 |
+
2. Trim to fit the 60-second target
|
| 70 |
+
3. Add captions from the demo script narration lines
|
| 71 |
+
4. Add a title card: "ReplicaLab -- OpenEnv Hackathon"
|
| 72 |
+
5. Add an end card with the GitHub URL and HF Space link
|
| 73 |
+
6. Export at 1080p, H.264, 30fps
|
| 74 |
+
|
| 75 |
+
### Upload
|
| 76 |
+
|
| 77 |
+
1. Upload to YouTube as **Unlisted**
|
| 78 |
+
2. Title: `ReplicaLab - Multi-Agent Scientific Replication Environment | OpenEnv Hackathon`
|
| 79 |
+
3. Description: Include the GitHub repo URL and HF Space link
|
| 80 |
+
4. Copy the YouTube URL for the submission form
|
| 81 |
+
|
| 82 |
+
### Checklist
|
| 83 |
+
|
| 84 |
+
- [ ] Video is under 60 seconds
|
| 85 |
+
- [ ] Captions are readable
|
| 86 |
+
- [ ] Audio (sound effects) is audible but not overpowering
|
| 87 |
+
- [ ] All key scenes are covered: hook, cast, episode, judge, training, close
|
| 88 |
+
- [ ] YouTube link is accessible (unlisted, not private)
|
| 89 |
+
- [ ] Link is added to the submission form
|
docs/ui_smoke_checklist.md
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# UI Smoke Test Checklist (UI 12 + TST 08 + TST 12)
|
| 2 |
+
|
| 3 |
+
Run through this checklist before every demo or merge to main. Target: under 5 minutes.
|
| 4 |
+
|
| 5 |
+
---
|
| 6 |
+
|
| 7 |
+
## Pre-requisites
|
| 8 |
+
|
| 9 |
+
- [ ] Backend server is running on `localhost:7860` (or HF Space is live)
|
| 10 |
+
- [ ] Frontend dev server is running on `localhost:5173` (or built and served from Docker)
|
| 11 |
+
|
| 12 |
+
---
|
| 13 |
+
|
| 14 |
+
## Dashboard Page
|
| 15 |
+
|
| 16 |
+
- [ ] Page loads without console errors
|
| 17 |
+
- [ ] 3D molecule scene renders in hero background (subtle, low opacity)
|
| 18 |
+
- [ ] All three characters visible: Dr. Elara, Takuma, Aldric
|
| 19 |
+
- [ ] Character tilt cards respond to mouse hover with 3D effect
|
| 20 |
+
- [ ] "Run Episode" button navigates to `/episode`
|
| 21 |
+
- [ ] "Training Results" anchor scrolls to the chart section
|
| 22 |
+
- [ ] Scenario card links navigate to `/episode?template=ml_benchmark`
|
| 23 |
+
- [ ] Training Results chart renders with baseline and trained lines
|
| 24 |
+
- [ ] Before/after toggle switches between baseline and trained views
|
| 25 |
+
- [ ] Metric cards show Avg Reward, Agreement, Avg Rounds, Invalid Rate
|
| 26 |
+
|
| 27 |
+
---
|
| 28 |
+
|
| 29 |
+
## Episode Page -- Pre-game
|
| 30 |
+
|
| 31 |
+
- [ ] All three characters display with names (Dr. Elara, Takuma, Aldric)
|
| 32 |
+
- [ ] Controls panel shows: Scenario selector, Difficulty buttons, Seed input, Dice button
|
| 33 |
+
- [ ] Default scenario is "ML Benchmark"
|
| 34 |
+
- [ ] Start Episode button is enabled
|
| 35 |
+
|
| 36 |
+
---
|
| 37 |
+
|
| 38 |
+
## Episode Page -- Running Episode
|
| 39 |
+
|
| 40 |
+
- [ ] Clicking "Start Episode" plays episode start sound
|
| 41 |
+
- [ ] CharacterStage appears with Scientist and Lab Manager
|
| 42 |
+
- [ ] Judge observer icon appears in top-right corner with "Observing" label
|
| 43 |
+
- [ ] Paper panel shows ViT paper title, hypothesis, method, key finding
|
| 44 |
+
- [ ] Episode ID is displayed and copyable in the Episode Info section
|
| 45 |
+
- [ ] Negotiation log shows messages with animated character avatars
|
| 46 |
+
- [ ] Each message entry has a slide-in animation
|
| 47 |
+
- [ ] Protocol panel updates with current plan
|
| 48 |
+
- [ ] Lab Inventory panel shows GPU, budget, and staff constraints
|
| 49 |
+
- [ ] Round progress bar fills proportionally
|
| 50 |
+
- [ ] "Step" button is visible and enabled
|
| 51 |
+
|
| 52 |
+
---
|
| 53 |
+
|
| 54 |
+
## Episode Page -- Judging Phase
|
| 55 |
+
|
| 56 |
+
- [ ] Clicking "Step" triggers negotiate sound
|
| 57 |
+
- [ ] Judge character appears center-stage with dramatic entrance animation
|
| 58 |
+
- [ ] Judge appear sound plays, followed by gavel sound
|
| 59 |
+
- [ ] Phase indicator shows "Judging" with pulsing dot
|
| 60 |
+
- [ ] Judging phase lasts approximately 4 seconds
|
| 61 |
+
|
| 62 |
+
---
|
| 63 |
+
|
| 64 |
+
## Episode Page -- Complete Phase
|
| 65 |
+
|
| 66 |
+
- [ ] Score reveal sound plays
|
| 67 |
+
- [ ] Success/failure sound plays based on verdict
|
| 68 |
+
- [ ] Judge stays center-stage with verdict action
|
| 69 |
+
- [ ] Score card shows total reward (8.12) with R/F/D breakdown
|
| 70 |
+
- [ ] JudgeAuditPanel appears below the negotiation log
|
| 71 |
+
- [ ] Judge audit shows verdict, notes, and score details
|
| 72 |
+
- [ ] Replay viewer appears in the right panel
|
| 73 |
+
- [ ] Score panel shows component scores
|
| 74 |
+
|
| 75 |
+
---
|
| 76 |
+
|
| 77 |
+
## Replay Viewer
|
| 78 |
+
|
| 79 |
+
- [ ] Forward/back buttons step through messages
|
| 80 |
+
- [ ] Skip-to-start and skip-to-end buttons work
|
| 81 |
+
- [ ] Scrubber slider moves to the correct message
|
| 82 |
+
- [ ] Character avatars display for each replayed message
|
| 83 |
+
- [ ] Message content matches the original negotiation
|
| 84 |
+
|
| 85 |
+
---
|
| 86 |
+
|
| 87 |
+
## Fallback Path
|
| 88 |
+
|
| 89 |
+
- [ ] Navigate to `{server_url}/web` -- OpenEnv fallback UI loads
|
| 90 |
+
- [ ] Fallback UI can start a seeded episode
|
| 91 |
+
- [ ] Fallback UI shows step results
|
| 92 |
+
|
| 93 |
+
---
|
| 94 |
+
|
| 95 |
+
## Audio
|
| 96 |
+
|
| 97 |
+
- [ ] Button clicks produce click sound
|
| 98 |
+
- [ ] Episode start plays ascending chime
|
| 99 |
+
- [ ] Scientist messages play triangle-wave blips
|
| 100 |
+
- [ ] Lab Manager messages play square-wave blips
|
| 101 |
+
- [ ] Judge appearance plays dramatic chord
|
| 102 |
+
- [ ] Gavel sound plays during judging
|
| 103 |
+
- [ ] Score reveal plays ascending arpeggio
|
| 104 |
+
|
| 105 |
+
---
|
| 106 |
+
|
| 107 |
+
## Responsiveness
|
| 108 |
+
|
| 109 |
+
- [ ] Layout is usable at 1280px width (typical demo screen)
|
| 110 |
+
- [ ] No horizontal scroll at 1024px width
|
| 111 |
+
- [ ] Three-panel layout stacks on narrow viewports
|
| 112 |
+
|
| 113 |
+
---
|
| 114 |
+
|
| 115 |
+
## Sign-off
|
| 116 |
+
|
| 117 |
+
| Tester | Date | Pass/Fail | Notes |
|
| 118 |
+
|--------|------|-----------|-------|
|
| 119 |
+
| | | | |
|
frontend/src/components/PaperPanel.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
| 1 |
-
import { FileText, FlaskConical, Target, Microscope } from 'lucide-react';
|
|
|
|
| 2 |
import type { PaperSummary } from '@/types';
|
| 3 |
import { cn } from '@/lib/utils';
|
| 4 |
|
|
@@ -9,6 +10,7 @@ interface PaperPanelProps {
|
|
| 9 |
difficulty: string;
|
| 10 |
round: number;
|
| 11 |
maxRounds: number;
|
|
|
|
| 12 |
className?: string;
|
| 13 |
}
|
| 14 |
|
|
@@ -19,8 +21,17 @@ export default function PaperPanel({
|
|
| 19 |
difficulty,
|
| 20 |
round,
|
| 21 |
maxRounds,
|
|
|
|
| 22 |
className,
|
| 23 |
}: PaperPanelProps) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
return (
|
| 25 |
<div className={cn('flex flex-col gap-4 overflow-y-auto', className)}>
|
| 26 |
<div className="rounded-lg border border-border bg-card p-4">
|
|
@@ -60,6 +71,15 @@ export default function PaperPanel({
|
|
| 60 |
</div>
|
| 61 |
<div className="rounded-lg border border-border bg-card p-4">
|
| 62 |
<h3 className="mb-3 text-sm font-semibold">Episode Info</h3>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 63 |
<div className="grid grid-cols-2 gap-2 text-xs">
|
| 64 |
<Stat label="Seed" value={seed.toString()} />
|
| 65 |
<Stat label="Template" value={template.replace(/_/g, ' ')} />
|
|
|
|
| 1 |
+
import { FileText, FlaskConical, Target, Microscope, Copy, Check } from 'lucide-react';
|
| 2 |
+
import { useState } from 'react';
|
| 3 |
import type { PaperSummary } from '@/types';
|
| 4 |
import { cn } from '@/lib/utils';
|
| 5 |
|
|
|
|
| 10 |
difficulty: string;
|
| 11 |
round: number;
|
| 12 |
maxRounds: number;
|
| 13 |
+
episodeId?: string;
|
| 14 |
className?: string;
|
| 15 |
}
|
| 16 |
|
|
|
|
| 21 |
difficulty,
|
| 22 |
round,
|
| 23 |
maxRounds,
|
| 24 |
+
episodeId,
|
| 25 |
className,
|
| 26 |
}: PaperPanelProps) {
|
| 27 |
+
const [copied, setCopied] = useState(false);
|
| 28 |
+
|
| 29 |
+
function copyEpisodeId() {
|
| 30 |
+
if (!episodeId) return;
|
| 31 |
+
navigator.clipboard.writeText(episodeId);
|
| 32 |
+
setCopied(true);
|
| 33 |
+
setTimeout(() => setCopied(false), 1500);
|
| 34 |
+
}
|
| 35 |
return (
|
| 36 |
<div className={cn('flex flex-col gap-4 overflow-y-auto', className)}>
|
| 37 |
<div className="rounded-lg border border-border bg-card p-4">
|
|
|
|
| 71 |
</div>
|
| 72 |
<div className="rounded-lg border border-border bg-card p-4">
|
| 73 |
<h3 className="mb-3 text-sm font-semibold">Episode Info</h3>
|
| 74 |
+
{episodeId && (
|
| 75 |
+
<button
|
| 76 |
+
onClick={copyEpisodeId}
|
| 77 |
+
className="mb-2 flex w-full items-center gap-1.5 rounded-md bg-muted/50 px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted"
|
| 78 |
+
>
|
| 79 |
+
{copied ? <Check className="h-3 w-3 text-lab-manager" /> : <Copy className="h-3 w-3" />}
|
| 80 |
+
<span className="font-mono truncate">{episodeId}</span>
|
| 81 |
+
</button>
|
| 82 |
+
)}
|
| 83 |
<div className="grid grid-cols-2 gap-2 text-xs">
|
| 84 |
<Stat label="Seed" value={seed.toString()} />
|
| 85 |
<Stat label="Template" value={template.replace(/_/g, ' ')} />
|
frontend/src/pages/EpisodePage.tsx
CHANGED
|
@@ -225,6 +225,7 @@ export default function EpisodePage() {
|
|
| 225 |
difficulty={episode.difficulty}
|
| 226 |
round={episode.round}
|
| 227 |
maxRounds={episode.max_rounds}
|
|
|
|
| 228 |
/>
|
| 229 |
<LabInventory constraints={episode.lab_constraints} />
|
| 230 |
<Controls
|
|
|
|
| 225 |
difficulty={episode.difficulty}
|
| 226 |
round={episode.round}
|
| 227 |
maxRounds={episode.max_rounds}
|
| 228 |
+
episodeId={episode.episode_id}
|
| 229 |
/>
|
| 230 |
<LabInventory constraints={episode.lab_constraints} />
|
| 231 |
<Controls
|