# RWL Real-Time Dashboard MVP PRD
*Genesis Command Centre for Ralph Wiggum Loop Orchestration*

**Architect:** Claude Opus 4.5
**Executor:** Gemini Flash 2.0
**Target:** Operational MVP in 6 stories

---

### US-001: Dashboard HTML Shell
**Goal:** Create main dashboard HTML with real-time WebSocket connection structure

**Acceptance Criteria:**
- Dark theme matching Genesis brand
- Header with Genesis RWL Dashboard title
- Main grid layout for story cards
- WebSocket connection placeholder
- Stats bar showing total/success/failed/running counts

**Files to Create:**
- /mnt/e/genesis-system/apps/dashboard/rwl_dashboard.html

**Technical Hints:**
Use CSS grid for layout. Dark theme colors: bg #1a1a2e, card #16213e, success #4CAF50, fail #f44336, running #FF9800. Include mermaid.js CDN for flow visualization. Add socket.io CDN for WebSocket.

**Dependencies:** None

---

### US-002: Story Card Component
**Goal:** Create reusable story card showing individual RWL story status

**Acceptance Criteria:**
- Card shows story ID and title
- Progress indicator with attempt count
- Status badge (pending/running/success/failed)
- Duration timer for running stories
- Expandable log section

**Files to Create:**
- /mnt/e/genesis-system/apps/dashboard/components/story_card.js

**Technical Hints:**
Export StoryCard class. Methods: render(), updateStatus(), showLog(). Use template literals for HTML. CSS classes for status colors. Auto-scroll log container.

**Dependencies:** US-001

---

### US-003: WebSocket Server
**Goal:** Create Python WebSocket server that streams RWL execution events

**Acceptance Criteria:**
- FastAPI with WebSocket endpoint at /ws/rwl
- Broadcasts events: story_start, story_progress, story_complete, story_failed
- Event payload includes story_id, status, attempt, duration, log_line
- Handles multiple dashboard connections

**Files to Create:**
- /mnt/e/genesis-system/apps/dashboard/rwl_server.py

**Technical Hints:**
Use fastapi and websockets. ConnectionManager class for broadcast. Events as JSON. Include CORS for local development. Port 8765.

**Dependencies:** None

---

### US-004: RWL Runner Integration
**Goal:** Modify universal_rwl_runner.py to emit WebSocket events during execution

**Acceptance Criteria:**
- Emits story_start when beginning story
- Emits story_progress on each attempt
- Emits story_complete or story_failed on finish
- Non-blocking event emission
- Graceful fallback if server unavailable

**Files to Create:**
- /mnt/e/genesis-system/core/rwl_event_emitter.py

**Technical Hints:**
Use websocket-client library. Async emission with threading. Event format: type, story_id, title, attempt, max_attempts, status, timestamp. Try/except for connection failures.

**Dependencies:** US-003

---

### US-005: Live Metrics Panel
**Goal:** Create metrics panel showing real-time RWL statistics

**Acceptance Criteria:**
- Total stories executed today
- Success rate percentage with trend arrow
- Average attempts per story
- Total cost spent today
- Estimated remaining budget

**Files to Create:**
- /mnt/e/genesis-system/apps/dashboard/components/metrics_panel.js

**Technical Hints:**
Calculate metrics from story history. Update on each event. Format currency with $ symbol. Use sparkline for trend visualization. Store daily stats in localStorage.

**Dependencies:** US-001

---

### US-006: PRD Queue Viewer
**Goal:** Create panel showing queued PRDs waiting for execution

**Acceptance Criteria:**
- Lists PRDs in RALPH WIGGUM directory
- Shows story count per PRD
- Estimated cost per PRD
- Click to start execution
- Drag to reorder queue

**Files to Create:**
- /mnt/e/genesis-system/apps/dashboard/components/prd_queue.js

**Technical Hints:**
Scan RALPH WIGGUM/*.md for PRDs. Parse story count from US-XXX pattern. Estimate cost at $0.01 per story. Use Sortable.js for drag reorder. POST to /api/execute endpoint.

**Dependencies:** US-001
