Topbar & Diagnostics

The topbar is always visible and contains three main areas: the brand/hamburger, the Web Serial button group, and the unified status widget (rmd-unified). Clicking the status widget opens the full Diagnostics modal.

Status Widget (rmd-unified)

The compact status widget in the topbar displays at a glance:

Clicking the TX/RX area (#rmd-io-trigger) opens C2Diagnostics.openLogModal() — a scrollable log of recent packet activity. Clicking anywhere else on the widget opens C2Diagnostics.openModal() — the full diagnostics panel.

Diagnostics Modal

The full diagnostics modal (opened by clicking the status widget) shows:

• Live local node full info (from /api/local_node/full)
• Connection history chart
• Session statistics breakdown
• Current config summary (non-sensitive keys)
• System version and update status

It polls C2Diagnostics.pollSystem() every 30 seconds to keep the data current.

Node Inspector

The Node Inspector is a slide-in panel triggered by clicking any node name/ID in the overview or other views:

window.openInspector(nodeId, nodeName)
window.closeInspector()

The inspector panel (#inspector) has multiple tabs rendered by window.c2SwitchModalTab(tab, nodeId):

Node Detail Modal (c2OpenNodeDetail)

A richer version of the inspector — triggered from the overview node cards' detail button. Opens via window.c2OpenNodeDetail(nodeId) and is a full-screen overlay modal with the same tabbed structure plus traceroute launch and message send shortcuts.

Toast Notifications

The toast system is self-contained with CSS opacity+transform transitions. It never gets stuck in a visible state:

window.triggerToast('Message sent', 'ok');   // green
window.triggerToast('Radio offline', 'warn'); // amber
window.triggerToast('Send failed', 'err');    // red
window.triggerToast('Node found', 'acc');     // cyan

The toast appears at bottom-right and auto-dismisses after ~3 seconds. It uses .toast-show class toggling with a transition, never display:none toggling, so stacked toasts always animate correctly.

showModal (Generic Confirm Dialog)

window.showModal({
    id: 'confirm-delete',
    icon: '⚠️',
    title: 'Confirm Delete',
    message: 'Are you sure?',
    warning: 'This cannot be undone.',
    showProgress: false,
    buttons: [
        { text: 'Cancel',  class: 'btn',         action: () => {} },
        { text: 'Delete',  class: 'btn btn-err',  action: () => doDelete() }
    ]
});

Creates a self-removing overlay modal appended to document.body. The showProgress option adds an animated progress bar and status text area — used by the update installer to show download progress.

Diagnostics Modal — Full Detail

Clicking the rmd-unified status widget opens a full diagnostics overlay. It is divided into sections:

Local Node

All fields from GET /api/local_node/full: hardware model, firmware, region, hop limit, TX power, battery, GPS, uptime, WiFi SSID, Bluetooth state, node count in radio database.

Connection Timeline

A chart showing the connection health value over the last 60 events from GET /api/system/connection_history. Green areas = connected (value 0.9), amber = transitioning (0.5), red = disconnected (0.1). Useful for diagnosing intermittent drops.

Session Statistics

All counters from GET /api/stats: packets by type, nodes seen, channels seen, elapsed session time.

Version Status

Current version vs remote latest from GET /api/system/version-status. Shows an Update button if a newer version is available.

Traffic Monitor (Log Modal)

Clicking the TX/RX LED area opens the Traffic Monitor — a scrollable, auto-updating log of recent packet events. This shows the raw packet log from the rx.log file (stored server-side with 5 MB rotation) including:

• Timestamp and log type (MSG, POS, TLM, ACK, OTHER)
• Source → destination node IDs
• Payload preview

Unlike MeshShark, this log persists across sessions and shows everything the radio received since the last log rotation.

Mobile Sidebar

On screens narrower than 860px, the sidebar collapses. The hamburger button (☰) in the top-left of the topbar toggles it open. It closes automatically when a view is selected. The topbar status widget is hidden on mobile (hide-mob class) to preserve space — diagnostics are available only on desktop-width screens.