docs(decisions): ADR 0010 — SYNOPSIS landing view

2026-05-09 12:27:14 +00:00
parent 0d8a1d88f2
commit 34dcf87a64
1 changed files with 52 additions and 0 deletions
@@ -0,0 +1,52 @@
+# 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.