Function renderHostPanel

web/scripts/ragnar_modern.js:4693–4755

(data)

            }
            return `<div class="glass rounded-xl p-4 ${border}"><div class="font-semibold text-sm mb-1">${title}</div><div class="text-sm text-gray-300">${body}</div><div class="text-[11px] text-gray-500 mt-1">${x.detail || ''}${body.indexOf('wifiPivotFromDefense') >= 0 ? ' <span class="text-gray-600">· click a MAC to inspect it in the Spectrum Analyzer</span>' : ''}</div></div>`;
        }).join('');
    }
    // Counts
    const c = d.counts || {};
    let chips = [['frames', d.frames], ['deauth', c.deauth], ['beacons', c.beacon], ['probe-req', c.probe_req], ['probe-resp', c.probe_resp]]
        .map(([k, v]) => `<span class="px-3 py-1 rounded bg-slate-800 border border-slate-700"><b>${v || 0}</b> <span class="text-gray-400">${k}</span></span>`).join('');
    // Airspace density vs the flood threshold — lets the user calibrate.
    const a = d.airspace;
    if (a) {
        const near = a.ssids >= a.beacon_ssid_threshold;
        chips += `<span class="px-3 py-1 rounded bg-slate-800 border ${near ? 'border-red-600/60 text-red-300' : 'border-slate-700'}" title="Distinct SSIDs / BSSIDs heard this capture, vs the beacon-flood threshold. Raise the threshold above your normal density.">`
            + `<b>${a.ssids}</b> SSIDs · <b>${a.bssids}</b> BSSIDs <span class="text-gray-500">(flood ≥ ${a.beacon_ssid_threshold})</span></span>`;
    }
    document.getElementById('wifidef-counts').innerHTML = chips;
    // AP table
    document.getElementById('wifidef-ap-count').textContent = `(${(d.aps || []).length})`;
    const body = document.getElementById('wifidef-ap-tbody');
    const trusted = null;
    if (!d.aps || !d.aps.length) body.innerHTML = '<tr><td colspan="5" class="py-4 text-center text-gray-500">No beacons captured (wrong channel? try “hop”).</td></tr>';
    else body.innerHTML = d.aps.map(a => `<tr class="border-b border-slate-800/50 cursor-pointer hover:bg-slate-800/40" title="Open in Spectrum Analyzer" onclick="wifiPivotFromDefense('${a.bssid}','${encodeURIComponent(a.ssid || '').replace(/'/g, '%27')}')">
        <td class="py-1 pr-2">${a.ssid || '<span class=\'text-gray-500 italic\'>hidden</span>'}</td>
        <td class="py-1 pr-2 font-mono text-[11px]">${a.bssid}</td>
        <td class="py-1 pr-2">${a.channel == null ? '—' : a.channel}</td>
        <td class="py-1 pr-2">${a.rssi == null ? '—' : a.rssi + ' dBm'}</td>
        <td class="py-1 pr-2">${a.beacons}</td></tr>`).join('');
}

// ============================================================================
// Network diagnostics (Diagnostics / Switch & L2 / Interfaces sub-tabs)
// Backend: /api/net/* (see network_diagnostics.py)
// ============================================================================

// Last-fetched payloads for each net panel, so "Export CSV" has data to dump.
let _ndLastLldp = [], _ndLastArp = null, _ndLastIfaces = [],
    _ndLastMtr = null, _ndLastIdentity = null, _ndLastIsp = [],
    _ndLastMacWatch = null;

// Build a CSV from a header row + rows (arrays of cells) and download it.
function _ndDownloadCsv(nameBase, header, rows) {
    if (!rows || !rows.length) {
        addConsoleMessage('Nothing to export yet — run it first', 'warning');
        return;
    }
    const q = (c) => `"${String(c == null ? '' : c).replace(/"/g, '""')}"`;
    const csv = [header].concat(rows).map(r => r.map(q).join(',')).join('\n');
    const blob = new Blob([csv], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `ragnar_${nameBase}_${new Date().toISOString().slice(0, 10)}.csv`;
    a.click();
    URL.revokeObjectURL(url);
}

function exportLldpCsv() {
    _ndDownloadCsv('switch_neighbors',
        ['Local IF', 'Protocol', 'Switch', 'Switch descr', 'Port', 'VLAN ID', 'VLAN name', 'PoE', 'Mgmt IP'],
        (_ndLastLldp || []).map(n => [n.local_interface, n.protocol, n.switch_name,