<header class="header">
            <div class="header-left">
                <h1>
                    <i class="fas fa-broadcast-tower"></i>
                    <span class="highlight">Rusjp</span> MeshDash
                </h1>
                <div class="status-container">
                    <span class="status-indicator disconnected" id="status-indicator"></span>
                    <span class="status-text" id="status-text">Disconnected</span>
                </div>
            </div>
            <div class="header-right">
                <div id="api-average-display">
                    <div class="average-item average-item-clickable" onclick="showAveragesChartModal()" title="Click to see history">
                        <strong><i class="fas fa-signal"></i> Avg Signal:</strong>
                        <span id="api-avg-rssi"><span class="na">...</span></span>
                    </div>
                    <div class="average-item average-item-clickable" onclick="showAveragesChartModal()" title="Click to see history">
                        <strong><i class="fas fa-wave-square"></i> Avg SNR:</strong>
                        <span id="api-avg-snr"><span class="na">...</span></span>
                    </div>
                    <div class="average-item" style="display: flex; align-items: center; gap: 10px; padding-right: 5px; border-right: 1px solid var(--divider-color);">
                        <div style="display: flex; flex-direction: column; align-items: flex-end; font-size: 0.8em; line-height: 1.1;">
                            <div title="Packets Per Minute (Receive Rate)" style="color: var(--primary-color);">
                                <strong><i class="fas fa-arrow-down"></i> <span id="stat-ppm">0</span></strong> ppm
                            </div>
                            <div title="Channel Airtime Utilization (Transmit Load)" style="color: var(--text-secondary);">
                                <strong><i class="fas fa-wind"></i> <span id="stat-airtime">0.0%</span></strong> air
                            </div>
                        </div>
                        <div style="width: 80px; height: 35px;">
                            <canvas id="headerSparkline"></canvas>
                        </div>
                    </div>
                </div>
                <div class="average-meta" id="api-avg-meta">
                    <i class="fas fa-info-circle"></i> (from <span id="api-avg-nodes">?</span> nodes, updated <span id="api-avg-time">never</span>)
                </div>
                <div id="local-node-info">
                    <i class="fas fa-laptop"></i> Local node: <span class="node-id">N/A</span>
                </div>
                <div class="header-controls" style="margin-left: 15px; display: flex; gap: 10px;">
                    <button id="btn-audio" class="btn-icon" onclick="toggleAudio()" title="Toggle Audio Alerts" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.1em;">
                        <i class="fas fa-volume-mute"></i>
                    </button>
                    <button id="btn-notify" class="btn-icon" onclick="toggleNotifications()" title="Enable Browser Notifications" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.1em;">
                        <i class="fas fa-bell-slash"></i>
                    </button>
                </div>
            </div>
        </header>