Function loadTrafficPortActivity

web/scripts/ragnar_modern.js:16338–16485

()

                            <span class="text-[10px] px-2 py-0.5 rounded ${roleClass}">${formatInterfaceRole(entry.role)}</span>
                            ${focusChip}
                        </div>
                        <div class="text-[11px] text-gray-400">${connectionLabel}</div>
                    </div>
                    <button type="button" class="${buttonClasses}" data-interface="${escapeHtml(entry.name || '')}" data-scan-state="${scanning ? 'enabled' : 'disabled'}">${buttonLabel}</button>
                </div>
                <div class="text-[11px] ${scanClass}">${scanNote}${ipLabel}</div>
            </div>
        `;
    }).join('');

    listEl.querySelectorAll('button[data-interface]').forEach(button => {
        button.addEventListener('click', handleScanControlToggle);
    });

    updateMultiInterfaceModeControls(state);
}

function updateMultiInterfaceModeControls(state) {
    const buttonsContainer = document.getElementById('wifi-multi-mode-buttons');
    const focusWrapper = document.getElementById('wifi-multi-focus-controls');
    const focusSelect = document.getElementById('wifi-multi-focus-select');
    if (!buttonsContainer || !focusWrapper || !focusSelect) {
        return;
    }

    const activeMode = (state && state.scan_mode) ? state.scan_mode.toLowerCase() : 'single';
    const focusInterface = state && state.focus_interface ? state.focus_interface : '';
    const interfaces = state && Array.isArray(state.interfaces) ? state.interfaces : [];

    const buttons = buttonsContainer.querySelectorAll('button[data-mode]');
    buttons.forEach(button => {
        const mode = button.dataset.mode;
        if (!mode) {
            return;
        }
        const isActive = mode === activeMode;
        button.classList.toggle('bg-Ragnar-500', isActive);
        button.classList.toggle('border-Ragnar-400', isActive);
        button.classList.toggle('text-white', isActive);
        button.classList.toggle('shadow-md', isActive);
        button.classList.toggle('bg-slate-800', !isActive);
        button.classList.toggle('border-slate-600', !isActive);
        button.classList.toggle('text-gray-300', !isActive);
        button.onclick = async () => {
            if (button.dataset.busy === 'true' || mode === activeMode) {
                return;
            }
            await setMultiInterfaceMode(mode, button);
        };
    });

    const shouldShowFocus = activeMode === 'single';
    focusWrapper.classList.toggle('hidden', !shouldShowFocus);

    const uniqueOptions = interfaces
        .filter(entry => entry && entry.name)
        .map(entry => ({
            name: entry.name,