diff --git a/decisions/0010-synopsis-como-landing.md b/decisions/0010-synopsis-como-landing.md new file mode 100644 index 0000000..1bf3bd1 --- /dev/null +++ b/decisions/0010-synopsis-como-landing.md @@ -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.