wdmUI/decisions/0010-synopsis-como-landing.md

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.