# ADR-0010 · SYNOPSIS as the landing view

**Status**: accepted
**Date**: 2026-05

## Context

The original landing view of the operator console was an **OVERVIEW** with four cards (WAN, Cell, Cameras, GitOps) showing key-value pairs, a list of services, and action buttons. It was functional but text-heavy and forgettable.

Two observations:

1. **First impression matters disproportionately**. Demo viewers form their opinion of the product in the first 5 seconds.
2. **LCARS as a visual language is most expressive when used for live system diagrams** — exactly the SCADA pattern of industrial UIs. Star Trek's "Engineering · Warp Core Status" screens were live diagrams, not key-value tables.

A landing view that's a SCADA-style live diagram does two things at once: shows status comprehensively and demonstrates the visual language at full strength.

## Decision

Replace OVERVIEW with **SYNOPSIS** — a SCADA-style live diagram of the entire site.

The view contains:

- **Topology hardware**: cameras (cabled, WiFi, HaLow), router, Cell, optional Core, hub.
- **Topology de red**: VLANs as colored halos around components, links as lines, VPN tunnels distinct.
- **Servicios software**: small chips inside each device showing dnsmasq, mosquitto, tailscaled, frigate, enricher, etc., each with a status pulse.
- **Flujos de datos en tiempo real**: animated dashed lines (CSS `stroke-dashoffset` animation) showing RTSP, MQTT, bridge traffic.
- **Indicadores de capacity / health**: row of 8 gauges at the bottom (CPU R, CPU C, NPU, DISK, ↓WAN, ↑WAN, RTT HUB, FPS Σ).
- **Side panel**: active alerts + quick stats + quick actions to other views.

Pill in the rail: `00 · SYNOPSIS` (replaces the old `10 · OVERVIEW`).

## Consequences

**Good**:
- First impression is "alien tech, this is different from anything else".
- Operator sees system state at a glance, in spatial layout, without reading.
- Animations communicate liveness without the operator having to verify "is this real-time or stale?".

**Bad / trade-offs**:
- More complex to implement than a card grid.
- Animations can be visually busy if not tuned. Mitigated by using sparse, slow animations (1.6s+ per cycle) and no flashy color shifts.
- SVG layout is hand-tuned, harder to make truly responsive than CSS grid.

## Alternatives considered

- **Keep OVERVIEW with cards**: rejected for impact reasons.
- **Animated dashboard with chart.js / d3 grids**: feels like a generic monitoring tool, doesn't carry the brand.
- **Photo-realistic 3D rendering of the rack**: too far in the other direction, hard to maintain.

## See also

- `mockups/index.html` — open the file and the SYNOPSIS view is the default.