# Mobile Review App — Implementation Plan

## Context

Full consultation at `consultations/mobile_review_app/opus_round_1.md` and `SYNTHESIS.md`.

PWA served from the existing `review_server.py` at `/m`. Vanilla JS, same design system as desktop Production Console. No frameworks, no build step.

## Architecture

- **Same server** — `editors/review_server.py` on port 8430, new `/m` route
- **Same API** — all existing `/api/*` endpoints, zero backend changes for Phase 1
- **PWA** — Add to Home Screen, standalone display, service worker for offline
- **Vanilla JS** — matches `console_app.js` pattern (module registration, morphdom diffing)
- **Custom gesture handler** — ~150 lines, swipe/pinch/long-press

## File Layout

```
editors/mobile/
├── mobile-console.html      # PWA shell (viewport meta, manifest, SW registration)
├── mobile-app.js            # Router (hash-based), state, API helpers
├── manifest.json            # PWA manifest for Add to Home Screen
├── sw.js                    # Service worker (stale-while-revalidate)
├── views/
│   ├── dashboard.js         # Progress rings, episode list, pipeline status
│   ├── previz-grid.js       # 2-column shot grid (9:16 natural)
│   ├── frame-viewer.js      # Full-screen 9:16 viewer with gestures
│   ├── dailies-queue.js     # Priority queue review
│   └── take-compare.js      # Side-by-side / swipeable takes
├── styles/
│   └── mobile.css           # Extends console.css variables for mobile
├── lib/
│   ├── gestures.js          # Touch/swipe handler
│   └── haptics.js           # Vibration API wrapper
└── icons/
    ├── icon-192.png
    └── icon-512.png
```

## Design System

**Inherited from desktop:** Dark theme (#0a0a0f), Orbitron/JetBrains/Inter fonts, cyan/amber/green/red accents, all CSS custom properties.

**Mobile adaptations:**
- Body text 16px (iOS minimum), mono 12px
- 44x44pt minimum touch targets (Apple HIG)
- Safe area insets (notch, home indicator)
- Haptic feedback (vibrate API)

## Screens

### 1. Dashboard (Investor "Wow" Screen)
- Project selector
- 2x2 stat grid: progress rings (% locked, $ spent), dailies count, failed count
- Episode list with progress bars + per-episode cost
- Pipeline Status: live generation indicators (pulsing cyan dots)

### 2. Previz Grid
- 2-column 9:16 thumbnail grid, grouped by scene
- Green overlay on locked shots, take count badges
- Long-press for multi-select, tap to open Frame Viewer

### 3. Frame Viewer (Core Experience)
- Full-screen 9:16 frame
- Swipe left/right = next/prev shot
- Swipe up = approve (green flash + haptic)
- Swipe down = reject (reveal tag sheet)
- Pinch to zoom, tap for info overlay, double-tap fit/fill
- Take thumbnail strip + KEEP/PASS/REDO buttons

### 4. Rejection Flow
- Tag pills: ANATOMY, CONTINUITY, CAMERA, STYLE, PROP, EXPRESSION
- Optional notes field
- Confirm Reject button

### 5. Take Comparison
- Mode A: Swipeable full-screen takes
- Mode B: Side-by-side split with draggable divider

### 6. Dailies Queue
- Priority-grouped cards (P1 at top)
- Swipe right = quick-approve, swipe left = quick-reject
- Thumbnail strip per card

## Implementation Phases

### Phase 1: Core Review Loop
1. Create `editors/mobile/mobile-console.html` — PWA shell
2. Create `manifest.json` — PWA manifest
3. Create `mobile.css` — mobile design system
4. Create `mobile-app.js` — router + state + API helpers
5. Create `views/previz-grid.js` — 2-column shot grid
6. Create `views/frame-viewer.js` — full-screen viewer + KEEP/PASS buttons
7. Add `/m` route to `review_server.py`
8. Test on iPhone Safari

### Phase 2: Dailies + Gestures
1. Create `views/dailies-queue.js`
2. Create `views/take-compare.js`
3. Create `lib/gestures.js` — touch handler
4. Wire swipe-up approve, swipe-down reject in Frame Viewer
5. Add pull-to-refresh on all lists
6. Create rejection tag sheet (slide-up panel)

### Phase 3: Dashboard + Polish
1. Create `views/dashboard.js` — progress rings, episode list
2. SVG progress ring component
3. Live polling with visual updates
4. Page transitions (slide-in/out 250ms)
5. Haptic feedback
6. "Add to Home Screen" prompt

### Phase 4: Investor Demo
1. Cost tracking in dashboard
2. Real-time generation indicator
3. Filmstrip mode (horizontal scroll storyboard)
4. Session stats ("12 shots reviewed in 4 minutes")
5. Service worker for offline

## Key Design References

Read these files for patterns to match:
- `editors/console_app.js` — App framework, tab registration, state management
- `editors/styles/console.css` — Full design system (CSS variables, component styles)
- `editors/tabs/previz.js` — Desktop previz grid pattern
- `editors/tabs/dailies.js` — Desktop dailies queue + morphdom diffing
- `editors/production-console.html` — Desktop HTML shell

## Working Directory

```
cd ~/Dropbox/CLAUDE_PROJECTS/starsend
```

## Start Command

```bash
# Start the review server to test mobile app
python3 editors/review_server.py --project tartarus
# Then open http://127.0.0.1:8430/m on phone (same network or Tailscale)
```