Spaces:
Running
Running
File size: 4,386 Bytes
80d8c84 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | # Frontend Map — `frontend/`
> React 19 + TypeScript + Vite UI for ReplicaLab.
>
> **Tasks implemented:** FND 01-10
## Stack
| Technology | Version | Purpose |
|------------|---------|---------|
| React | 19.2.0 | UI framework |
| React Router | 7.13.1 | Client-side routing |
| Three.js | 0.183.2 | 3D molecule scene |
| @react-three/fiber | 9.5.0 | React Three.js bindings |
| @react-three/drei | 10.7.7 | Three.js helpers |
| Framer Motion | 12.35.1 | Animations |
| @xyflow/react | 12.10.1 | Flow diagrams |
| Recharts | 3.8.0 | Charts and graphs |
| Tailwind CSS | 4.2.1 | Utility-first styling |
| Lucide React | 0.577.0 | Icons |
## Routes — `App.tsx`
| Path | Component | Purpose |
|------|-----------|---------|
| `/` | `DashboardPage` | Training overview, scenario selection |
| `/episode` | `EpisodePage` | Live episode viewer (new episode) |
| `/episode/:episodeId` | `EpisodePage` | Replay of completed episode |
## Pages
### `DashboardPage.tsx`
- Scenario selection (family + difficulty)
- Training metrics display
- Episode history list
- Start new episode button
### `EpisodePage.tsx`
- Live negotiation between Scientist and Lab Manager
- Protocol display and evolution
- Score breakdown when episode completes
- Replay controls for completed episodes
## Components (15 files)
### Negotiation & Protocol
| Component | Purpose |
|-----------|---------|
| `NegotiationLog.tsx` | Scrollable conversation between agents |
| `ProtocolPanel.tsx` | Current protocol details display |
| `PaperPanel.tsx` | Paper summary (title, hypothesis, method, finding) |
| `LabInventory.tsx` | Equipment and reagent availability |
| `Controls.tsx` | User controls (start, step, auto-play) |
### Visualization
| Component | Purpose |
|-----------|---------|
| `ScorePanel.tsx` | Rigor/feasibility/fidelity score bars |
| `JudgeAuditPanel.tsx` | Judge reasoning and audit trail |
| `TrainingResults.tsx` | Training metrics charts |
| `ReplayViewer.tsx` | Step-through replay of completed episodes |
### 3D & Animation
| Component | Purpose |
|-----------|---------|
| `CharacterStage.tsx` | 3D stage for agent characters |
| `CharacterAvatar.tsx` | Individual agent avatar |
| `AnimatedCharacter.tsx` | Character with animations |
| `MoleculeScene.tsx` | 3D molecule visualization |
| `TiltCard.tsx` | Tilt-on-hover card component |
### Layout
| Component | Purpose |
|-----------|---------|
| `Header.tsx` | Top navigation bar |
## API Client — `lib/api.ts`
### REST Functions
| Function | Method | Endpoint |
|----------|--------|----------|
| `healthCheck()` | GET | `/health` |
| `getScenarios()` | GET | `/scenarios` |
| `resetEpisode(params)` | POST | `/reset` |
| `stepEpisode(action)` | POST | `/step` |
| `getReplay(episodeId)` | GET | `/replay/{episodeId}` |
### WebSocket
| Function | Purpose |
|----------|---------|
| `createWebSocket(onMessage, onOpen, onClose, onError)` | Connect to `/ws` |
| `sendWsMessage(ws, msg)` | Send typed message |
### Mock Data (for offline development)
| Function | Returns |
|----------|---------|
| `createMockConversation()` | `NegotiationMessage[]` |
| `createMockScores()` | `ScoreBreakdown` |
| `createMockEpisodeState(done)` | `EpisodeState` |
| `createMockProtocol()` | `Protocol` |
| `createMockJudgeAudit()` | `JudgeAudit` |
## TypeScript Types — `types/index.ts`
Mirrors Python models:
| TS Interface | Python Model |
|-------------|--------------|
| `ScientistAction` | `ScientistAction` |
| `LabManagerAction` | `LabManagerAction` |
| `Protocol` | `Protocol` |
| `EpisodeState` | `EpisodeState` |
| `StepResult` | `StepResult` |
| `ScoreBreakdown` | `RewardBreakdown` |
| `FeasibilityReport` | `FeasibilityCheckResult` (partial) |
| `JudgeAudit` | `StepInfo.judge_notes` + `verdict` |
| `NegotiationMessage` | `ConversationEntry` |
Additional frontend-only types:
- `TrainingMetrics` — loss, reward curves
- `TrainingComparison` — baseline vs trained model
- `PaperSummary` — paper details for display
- `LabConstraints` — lab resource summary
- `SuggestedChange` — protocol revision display
## Utility Files
### `lib/utils.ts`
Shared helpers (class merging, formatting, etc.)
### `lib/audio.ts`
Audio feedback utilities for UI interactions.
## Assets
```
frontend/public/characters/
judge.png (~1.2 MB)
lab-manager.png (~900 KB)
scientist.png (~900 KB)
```
|