# Prompt: One-shot Control Room Dashboard

## Creative brief

Build a single-file HTML mission control dashboard that feels like a live orbital operations centre. The interface must convey genuine operational tension — not every metric should be green. Inject believable subsystem anomalies, drift, and degradation. The dashboard should make the viewer feel they could walk up to this console and make real decisions.

## Panel plan

8-panel grid layout with drill-down slide-out:

1. **System Health Grid** (top-left) — 8 spacecraft subsystems as compact status cards with live metrics, coloured status rings, and last-check timestamps. Subsystems: PROPULSION, LIFE SUPPORT, COMMS, POWER, THERMAL, NAVIGATION, GUIDANCE, PAYLOAD.

2. **Orbital Position Map** (top-centre) — Canvas-rendered orbital track showing the spacecraft position, ground station cones, and orbit path with current telemetry callouts.

3. **Resource Gauges** (top-right) — Radial or bar gauges for O2, fuel, battery, coolant, water, cabin pressure. Include warning and critical thresholds with colour transitions.

4. **Alert Panel** (mid-left) — Chronological alert stream with severity badges (CRITICAL / WARNING / INFO), source system, timestamp, message, and acknowledgment toggle. Alerts should have causes and consequences that relate to the other panels.

5. **Telemetry Live Feed** (mid-right) — Scrolling numeric telemetry for 12+ parameters (velocity, altitude, attitude, temperatures, voltages, rates) with delta indicators and timestamped rows.

6. **Mission Timeline** (bottom-left) — Horizontal timeline with mission phases (PRELAUNCH, ASCENT, ORBITAL INSERTION, NOMINAL OPS, ANOMALY RESPONSE, DEORBIT, LANDING). Current phase highlighted, elapsed/remaining counters, event markers for key milestones.

7. **Comms Log** (bottom-right) — Simulated ground-to-spacecraft message stream with timestamps, sender, priority, and auto-scrolling.

8. **Drill-down Detail** (slide-out overlay) — Click any system card or alert to expand a detail panel with full metrics history, canvas sparklines, resolution notes, and related alerts.

## Interaction model

**Keyboard shortcuts** (visible via `?` help overlay):
- `1`–`8` — focus/expand corresponding panel
- `A` — acknowledge all active alerts
- `D` — toggle dark/light mode (default: dark control-room)
- `F` — toggle fullscreen layout (hide header chrome)
- `M` — mute/unmute alert pulse animations
- `T` — cycle timeline zoom levels (full mission / current phase / last 5 min)
- `Space` — pause/resume all live-state updates
- `Esc` — close drill-down / return to default view
- `?` — show/hide keyboard shortcut reference

**Mouse/touch**:
- Click a system card to open drill-down
- Click an alert to select and see related systems highlighted
- Click timeline event markers to jump the timeline focus
- Swipe between panels on mobile
- Pinch-to-zoom on orbital map canvas
- Long-press any panel header to isolate it full-view

**Mobile mode**: Panels stack vertically as swipeable cards with a sticky mini-status header. The orbital map collapses to a compact strip. Alerts become a pulldown tray. Keyboard shortcuts are replaced with a floating action button.

## Visual direction

- Dark control-room aesthetic: deep blue-black background (#0a0e14), panel surfaces at #111822 with subtle #1e2d3d borders
- Monospace typography throughout (system font stack: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace)
- Status colours: NOMINAL = cyan (#00e5ff), WARNING = amber (#ff9100), CRITICAL = red (#ff1744), OFFLINE = grey (#546e7a)
- Subtle CRT scanline overlay with ~3% opacity and periodic flicker for atmosphere
- Panel headers use uppercase label, status dot, and collapse toggle
- Gauges use Canvas arcs with gradient fills and numeric readouts
- Alert entries animate in with a brief pulse, then settle
- Timers and counters use leading-zero fixed-width digits
- Background ambient star field rendered on a dedicated Canvas layer behind panels
- Subtle panel glow on hover (box-shadow with accent colour at 5-8% opacity)

## Live-state illusion

- `requestAnimationFrame` loop for smooth gauge updates, orbital map rotation, and scanline effect
- `setInterval` at 1 Hz for telemetry updates, 5 Hz for clock
- Random anomaly injection every 15–45 seconds weighted by mission phase — higher anomaly probability during ANOMALY RESPONSE phase
- Anomalies chain: a propulsion warning drives a velocity delta in telemetry, which feeds orbit calculation, which may trigger a ground station handover event in comms
- Alert auto-escalation: unacknowledged WARNING alerts become CRITICAL after 90 seconds
- Resources deplete at mission-phase-dependent rates
- Comms messages arrive every 8–20 seconds with contextual content tied to current mission phase

## Persistence

- Acknowledged alert IDs stored in `localStorage` with 30-minute TTL
- Dark/light mode preference persisted
- Last focused panel stored and restored
- Mute state persisted

## Output

Single `index.html` with embedded CSS and JS. Zero external dependencies. Canvas for orbital map and gauges. SVG for sparklines in drill-down. Hostable on Cloudflare Pages.