Overview View

The Overview is the default landing view — the first screen shown after login. It provides a real-time summary of everything happening on the mesh: all nodes, their telemetry, and network health at a glance.

KPI Strip

Four counters across the top of the view, updated on every SSE stats event:

Node Grid

A paginated card grid showing all known nodes. By default 30 nodes per page (window.C2_ITEMS_PER_PAGE). Each card shows:

• Short name + long name
• Node ID (!xxxxxxxx)
• Hardware model
• Last heard time (via fmtTimeAgo())
• Battery percentage ring (colour: green >40%, amber 20–40%, red <20%)
• Signal bars (0–5, derived from SNR)
• SNR and RSSI values
• Telemetry: voltage, channel utilisation, air util TX
• A SNR sparkline — a mini chart of the last 20 SNR readings for this node
• Coordinates (if available) and a reverse-geocoded location name (see Geocoding below)
• Source badge: RF, MQTT, or UNKNOWN (from the packet source detection engine)

Clicking a node card opens the Node Inspector.

Metrics Chart

A Chart.js line chart below the node grid showing average SNR and RSSI over time. Data comes from GET /api/metrics/averages. Updated every 5 minutes by the backend metric saver.

Connection Health Bar

Five animated bars showing the radio connection quality level (0–5), driven by the current meshState.connectionStatus. A full green stack means fully connected; grey bars mean disconnected or reconnecting.

Geocoding

For nodes with GPS coordinates, the overview calls GET /api/geocode?lat=&lon= to get a human-readable location name. Results are cached in window._ov.geoCache (in-memory) and on disk in lat_lon_to_location.json (server-side). Requests are queued and rate-limited to 1/second to respect Nominatim's usage policy.

Node Sort and Filter

The search box above the grid filters nodes by name or node ID in real time. Nodes are sorted by lastHeard (most recently active first) by default. Local nodes are always shown first.

Live Updates

The overview module listens for SSE events. When a node_update event arrives, the corresponding card is updated in-place without re-rendering the whole grid — battery levels, SNR, last-heard time all update smoothly. When a completely new node appears (not yet in the grid), the grid re-renders.

Connection Health Ring

A circular ring graphic shows the current session uptime percentage. The ring colour mirrors the RF dot in the topbar — green when fully connected, amber during reconnect, red when offline. The percentage is calculated from the connection_log history.

Recent Packets Feed

Below the node grid, a live packet feed shows the most recent packets from the in-memory buffer. Each entry shows time, source, destination, channel, packet type, and a decoded payload preview. This feed updates in real time on every SSE packet event. Clicking any entry in the feed opens the full packet detail in MeshShark.

Node Card — Source Badge

Each node card shows a coloured badge in the top-right corner indicating the detected packet source from the most recent packet:

• RF — last packet received over the air with physical SNR/RSSI
• MQTT — last packet relayed via an MQTT internet bridge
• LOCAL — your own node
• UNKNOWN — insufficient evidence to classify

Node Card — Mini Map

If a node has a valid GPS position, a small Leaflet mini-map thumbnail is embedded in its card, centred on its last known coordinates. Clicking it opens the full map view with that node highlighted. Mini-maps are created lazily as the node cards scroll into view to avoid creating too many Leaflet instances at once.

Sidebar Navigation Badges

The Overview module manages unread count badges on the sidebar nav:

• Direct Message nav item — amber badge shows total unread DMs across all contacts (tracked in window.meshState.dmUnread)
• Channels nav item — amber badge shows total unread channel messages (tracked in window.meshState.channelUnread)

Both badges clear when you navigate to the respective view and open the relevant conversation.