Function updateReleaseGateState

web/scripts/ragnar_modern.js:7459–7484

(payload = {})

        let html = `<div class="mb-2 px-3 py-2 rounded border ${cls} text-sm">${label}</div>`;
        html += `<p class="text-xs text-gray-500 mb-2">Interface: ${escapeHtml(d.interface || '—')} · ${d.seconds}s · ${d.packet_count} BPDUs, ${d.bridge_count} bridge(s), ${d.instance_count} instance(s) @ ${d.rate}/s · ${d.tcn_count} TCN${d.learned ? ' · <span class="text-gray-400">baseline learned now</span>' : ''}</p>`;
        if ((d.instances || []).length) {
            html += '<p class="text-xs uppercase text-gray-400 mt-2 mb-1">Root bridge per instance</p>' +
                '<table class="min-w-full text-xs text-gray-300 whitespace-nowrap"><thead>' +
                '<tr class="text-left text-gray-500"><th class="px-2 py-1">Proto</th><th class="px-2 py-1">VLAN/inst</th><th class="px-2 py-1">Advertised root</th><th class="px-2 py-1">By</th><th class="px-2 py-1">Status</th></tr>' +
                '</thead><tbody>' +
                d.instances.map(i => {
                    const bad = (i.status === 'hijacked' || i.status === 'new');
                    const st = bad ? `<span class="text-red-300">${escapeHtml(i.status)}</span>` : `<span class="text-gray-500">${escapeHtml(i.status)}</span>`;
                    return `<tr class="border-t border-slate-800">
                        <td class="px-2 py-1 text-gray-400">${escapeHtml(i.proto)}</td>
                        <td class="px-2 py-1 font-mono">${i.vlan}</td>
                        <td class="px-2 py-1 font-mono ${bad ? 'text-red-300' : ''}">${i.root_prio == null ? '—' : i.root_prio}.${escapeHtml(i.root_mac || '?')}</td>
                        <td class="px-2 py-1 font-mono text-gray-400">${escapeHtml(i.advertised_by || '—')}</td>
                        <td class="px-2 py-1">${st}</td>
                    </tr>`;
                }).join('') +
                '</tbody></table>';
        }
        if ((d.bridges || []).length) {
            html += '<p class="text-xs uppercase text-gray-400 mt-2 mb-1">Bridges seen (' + d.bridges.length + ')</p>' +
                '<table class="min-w-full text-xs text-gray-300 whitespace-nowrap"><thead>' +
                '<tr class="text-left text-gray-500"><th class="px-2 py-1">Bridge MAC</th><th class="px-2 py-1">Proto</th><th class="px-2 py-1">Role(s)</th><th class="px-2 py-1">Status</th></tr>' +
                '</thead><tbody>' +
                d.bridges.map(b => {
                    const badge = b.baseline ? '<span class="text-green-400">✓ known</span>' : '<span class="text-amber-300">? new</span>';
                    return `<tr class="border-t border-slate-800">
                        <td class="px-2 py-1 font-mono ${b.baseline ? '' : 'text-amber-300'}">${escapeHtml(b.mac)}</td>
                        <td class="px-2 py-1 text-gray-400">${escapeHtml(b.proto)}</td>
                        <td class="px-2 py-1 text-gray-400">${escapeHtml((b.roles || []).join(', ') || '—')}</td>