';
el.appendChild(widget);
})
.catch(function () {});
}
}
function renderPayloadPie(types) {
const total = types.reduce((s, t) => s + t.count, 0);
const colors = ['#ef4444','#f59e0b','#22c55e','#3b82f6','#8b5cf6','#ec4899','#14b8a6','#64748b','#f97316','#06b6d4','#84cc16'];
let html = '
';
types.forEach((t, i) => {
const pct = (t.count / total * 100).toFixed(1);
const w = Math.max(t.count / total * 100, 1);
html += `
${escapeHtml(t.name)}
${t.count} (${pct}%)
`;
});
return html + '
';
}
// === Relay Airtime Share — dumbbell chart (#1359) ===
// Two dots per payload_type row: gray = count %, colored = airtime %.
// Connector line between them = the divergence. Shared 0–100% axis.
// Sorted desc by airtime (server-side) so count dots visibly scatter
// out of rank order — that visible disorder IS the headline.
function renderRelayAirtimeDumbbell(data) {
var rows = (data && Array.isArray(data.rows)) ? data.rows : [];
if (!rows.length) {
return '
';
}
function renderBestPath(nodes) {
if (!nodes.length) return '
No data
';
// Group by distance for a cleaner view
const byDist = {};
nodes.forEach(n => {
if (!byDist[n.minDist]) byDist[n.minDist] = [];
byDist[n.minDist].push(n);
});
let html = '
';
}
// ===================== CHANNELS =====================
var _channelSortState = null;
var _channelData = null;
var _channelRenderGen = 0;
var CHANNEL_SORT_KEY = 'meshcore-channel-sort';
function loadChannelSort() {
try {
var s = localStorage.getItem(CHANNEL_SORT_KEY);
if (s) { var p = JSON.parse(s); if (p.col && p.dir) return p; }
} catch (e) {}
return { col: 'lastActivity', dir: 'desc' };
}
// True when the user has explicitly chosen a sort (saved in localStorage).
// Used by the grouped analytics view to decide whether to apply its own
// default ("messages desc") instead of the global flat-list default.
function hasSavedChannelSort() {
try {
var s = localStorage.getItem(CHANNEL_SORT_KEY);
if (!s) return false;
var p = JSON.parse(s);
return !!(p && p.col && p.dir);
} catch (e) { return false; }
}
function saveChannelSort(state) {
try { localStorage.setItem(CHANNEL_SORT_KEY, JSON.stringify(state)); } catch (e) {}
}
function sortChannels(channels, col, dir) {
var sorted = channels.slice();
var mult = dir === 'asc' ? 1 : -1;
sorted.sort(function (a, b) {
var av, bv;
switch (col) {
case 'name':
av = (a.name || '').toLowerCase(); bv = (b.name || '').toLowerCase();
return av < bv ? -1 * mult : av > bv ? 1 * mult : 0;
case 'hash':
av = typeof a.hash === 'number' ? a.hash : String(a.hash);
bv = typeof b.hash === 'number' ? b.hash : String(b.hash);
if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * mult;
av = String(av).toLowerCase(); bv = String(bv).toLowerCase();
return av < bv ? -1 * mult : av > bv ? 1 * mult : 0;
case 'messages': return (a.messages - b.messages) * mult;
case 'senders': return (a.senders - b.senders) * mult;
case 'lastActivity':
av = a.lastActivity || ''; bv = b.lastActivity || '';
return av < bv ? -1 * mult : av > bv ? 1 * mult : 0;
case 'encrypted':
av = a.encrypted ? 1 : 0; bv = b.encrypted ? 1 : 0;
return (av - bv) * mult;
default: return 0;
}
});
return sorted;
}
function channelRowHtml(c) {
// displayNameHtml: app-controlled raw HTML (e.g. the encrypted
// placeholder which carries a Phosphor sprite — set by
// decorateAnalyticsChannels for unknown encrypted rows). Same pattern
// as the section-header row: sprite-bearing labels must NOT be
// HTML-escaped (#1657 class of bug). For any other input we still
// go through esc() — never trust c.name / c.displayName as HTML.
var nameHtml = c.displayNameHtml
? c.displayNameHtml
: esc(c.displayName || c.name || 'Unknown');
return '
';
}
// ── PSK-aware decoration ──────────────────────────────────────────────────
// Server returns raw "chNNN" placeholder names for encrypted channels it
// doesn't know. Decorate so the UI shows a useful display name and a
// group bucket: mine / network / encrypted. Pure function for testability.
function decorateAnalyticsChannels(channels, hashByteToKeyName, labels) {
var keyMap = hashByteToKeyName || {};
var lab = labels || {};
var out = [];
for (var i = 0; i < (channels || []).length; i++) {
var c = channels[i];
var copy = Object.assign({}, c);
var hashNum = typeof c.hash === 'number' ? c.hash : parseInt(c.hash, 10);
var rawName = String(c.name || '');
var isPlaceholder = /^ch(\d+|\?)$/.test(rawName);
if (c.encrypted) {
var keyName = !isNaN(hashNum) ? keyMap[hashNum] : null;
if (keyName) {
copy.displayName = lab[keyName] || keyName;
copy.group = 'mine';
} else if (isPlaceholder || !rawName) {
// Placeholder ("chNNN") or empty name → render as opaque encrypted.
// Empty-name encrypted rows would otherwise leak through with an
// empty in the row; force the placeholder rendering.
//
// displayName carries a clean text label (no emoji, no markup) for
// screen readers / sort comparison / tests. displayNameHtml carries
// the rendered HTML with a Phosphor ph-lock sprite — consumed by
// channelRowHtml(). Two fields, one source of truth, no escaping
// surprises (v384-12.18 follow-up to #1648/#1657).
var hex = !isNaN(hashNum)
? ' (0x' + hashNum.toString(16).toUpperCase().padStart(2, '0') + ')'
: '';
copy.displayName = 'Encrypted' + hex;
copy.displayNameHtml =
' Encrypted' + hex;
copy.group = 'encrypted';
} else {
// Server gave us a real name (rainbow table hit) for an encrypted ch.
copy.displayName = rawName;
copy.group = 'network';
}
} else {
copy.displayName = rawName || 'Unknown';
copy.group = 'network';
}
out.push(copy);
}
return out;
}
// Build the (hash byte → key name) map from ChannelDecrypt's stored keys.
// Async because computeChannelHash uses subtle.digest. Returns {} if the
// module or its keys are unavailable (graceful fallback).
async function buildHashKeyMap() {
if (typeof ChannelDecrypt === 'undefined' || !ChannelDecrypt.getStoredKeys) return {};
var keys = ChannelDecrypt.getStoredKeys();
var map = {};
var names = Object.keys(keys || {});
for (var ni = 0; ni < names.length; ni++) {
var name = names[ni];
try {
var bytes = ChannelDecrypt.hexToBytes(keys[name]);
var hb = await ChannelDecrypt.computeChannelHash(bytes);
if (typeof hb === 'number') map[hb] = name;
} catch (e) { /* skip bad key */ }
}
return map;
}
function channelTbodyHtml(channels, col, dir, opts) {
var sorted = sortChannels(channels, col, dir);
var parts = [];
if (opts && opts.grouped) {
// Group by .group: mine → network → encrypted. Inside each group keep
// the active sort (caller passes col/dir; for the integration we sort
// by messages desc by default).
var groups = { mine: [], network: [], encrypted: [] };
for (var gi = 0; gi < sorted.length; gi++) {
var g = sorted[gi].group || (sorted[gi].encrypted ? 'encrypted' : 'network');
(groups[g] || (groups[g] = [])).push(sorted[gi]);
}
var sections = [
{ key: 'mine', label: ' My Channels' },
{ key: 'network', label: ' Network' },
{ key: 'encrypted', label: ' Encrypted' },
];
for (var si = 0; si < sections.length; si++) {
var rows = groups[sections[si].key] || [];
if (!rows.length) continue;
parts.push(
'
' +
// sections[].label is a hardcoded sprite-bearing string (no user
// input) — must be inserted raw so the
'
);
for (var ri = 0; ri < rows.length; ri++) parts.push(channelRowHtml(rows[ri]));
}
} else {
for (var i = 0; i < sorted.length; i++) parts.push(channelRowHtml(sorted[i]));
}
return parts.join('');
}
function channelSortArrow(col, activeCol, dir) {
if (col !== activeCol) return '⇅';
return '' + (dir === 'asc' ? '↑' : '↓') + '';
}
function channelTheadHtml(activeCol, dir) {
var cols = [
{ key: 'name', label: 'Channel' },
{ key: 'hash', label: 'Hash' },
{ key: 'messages', label: 'Messages' },
{ key: 'senders', label: 'Unique Senders' },
{ key: 'lastActivity', label: 'Last Activity' },
{ key: 'encrypted', label: 'Decrypted' },
];
var ths = '';
for (var i = 0; i < cols.length; i++) {
var c = cols[i];
ths += '
';
}
function updateChannelTable() {
var tbody = document.getElementById('channelsTbody');
var thead = document.querySelector('#channelsTable thead');
if (!tbody || !_channelData) return;
tbody.innerHTML = channelTbodyHtml(_channelData, _channelSortState.col, _channelSortState.dir, { grouped: true });
if (thead) thead.outerHTML = channelTheadHtml(_channelSortState.col, _channelSortState.dir);
}
function renderChannels(el, ch) {
// Decorate first so grouping/display name reflect locally-stored PSK keys.
// buildHashKeyMap is async; render once with a sync best-effort empty map,
// then upgrade once keys resolve. That keeps first paint fast and avoids
// blocking on subtle.digest in environments where it's slow.
var rawChannels = ch.channels || [];
// Resolve the persisted sort first so the default-fallback below doesn't
// shadow what the user previously chose. Default for the grouped view is
// messages desc (matches the PR description); only used when nothing saved.
if (!_channelSortState) {
_channelSortState = hasSavedChannelSort()
? loadChannelSort()
: { col: 'messages', dir: 'desc' };
}
var ranOnce = false;
// Generation token: if renderChannels is called again before
// buildHashKeyMap() resolves, the older promise must not clobber the
// newer rawChannels / decoration with stale-key data.
var myGen = ++_channelRenderGen;
function applyDecorate(map) {
if (myGen !== _channelRenderGen) return; // superseded
var labels = (typeof ChannelDecrypt !== 'undefined' && ChannelDecrypt.getLabels)
? ChannelDecrypt.getLabels() : {};
_channelData = decorateAnalyticsChannels(rawChannels, map, labels);
if (ranOnce) updateChannelTable();
}
applyDecorate({});
ranOnce = true;
buildHashKeyMap().then(applyDecorate).catch(function () { /* graceful */ });
var timelineHtml = renderChannelTimeline(ch.channelTimeline);
var topSendersHtml = renderTopSenders(ch.topSenders);
var histoHtml = ch.msgLengths.length ? histogram(ch.msgLengths, 20, '#8b5cf6').svg : '
Nodes advertising with 2+ byte hash paths. ' +
'Confirmed = seen advertising with multi-byte hash. ' +
'Suspected = prefix appeared in a multi-byte path. ' +
'Unknown = no multi-byte evidence yet.
' +
'
' +
'
' +
'' +
'' +
'' +
'' +
'
' +
'
' +
'
' + buildTableContent(rows, 'all') + '
' +
'
';
// Use setTimeout for event delegation on the stable section container
setTimeout(function() {
var section = document.getElementById('mbAdoptersSection');
if (!section) return;
var currentFilter = 'all';
section.addEventListener('click', function handler(e) {
var btn = e.target.closest('[data-mb-filter]');
if (btn) {
currentFilter = btn.dataset.mbFilter;
// Update active state on buttons (no DOM replacement needed)
var buttons = section.querySelectorAll('[data-mb-filter]');
buttons.forEach(function(b) { b.classList.toggle('active', b.dataset.mbFilter === currentFilter); });
// Replace only the table content, not the whole section
var wrap = section.querySelector('#mbAdoptersTableWrap');
if (wrap) wrap.innerHTML = buildTableContent(rows, currentFilter);
return;
}
var th = e.target.closest('[data-sort]');
if (th) {
var tbody = section.querySelector('tbody');
if (!tbody) return;
var sortRows = Array.from(tbody.querySelectorAll('tr'));
var col = th.dataset.sort;
var colIdx = { name: 0, status: 1, hashSize: 2, packets: 3, lastSeen: 4 };
var statusWeight = { 'confirmed': 0, 'suspected': 1, 'unknown': 2 };
sortRows.sort(function(a, b) {
var va = a.children[colIdx[col]] ? a.children[colIdx[col]].textContent.trim() : '';
var vb = b.children[colIdx[col]] ? b.children[colIdx[col]].textContent.trim() : '';
if (col === 'status') {
va = statusWeight[va.toLowerCase().split(' ').pop()] !== undefined ? statusWeight[va.toLowerCase().split(' ').pop()] : 2;
vb = statusWeight[vb.toLowerCase().split(' ').pop()] !== undefined ? statusWeight[vb.toLowerCase().split(' ').pop()] : 2;
}
if (col === 'hashSize' || col === 'packets') { va = parseInt(va) || 0; vb = parseInt(vb) || 0; }
if (va < vb) return -1;
if (va > vb) return 1;
return 0;
});
sortRows.forEach(function(r) { tbody.appendChild(r); });
}
});
}, 100);
return html;
}
// Legacy alias for tests — delegates to renderMultiByteAdopters with empty nodes
function renderMultiByteCapability(caps) {
if (!caps.length) return '';
// Convert caps to adopter-style rows for backward compat
var fakeNodes = caps.map(function(c) {
return { name: c.name, pubkey: c.pubkey, role: c.role, hashSize: c.maxHashSize, packets: 0, lastSeen: c.lastSeen };
});
return renderMultiByteAdopters(fakeNodes, caps);
}
async function renderCollisionTab(el, data, collisionData) {
el.innerHTML = `
Collisions actually observed in packet traffic — among repeaters grouped by their configured hash size. For theoretical address conflicts that would occur if all repeaters used a given hash size, see the Prefix Tool tab.
Repeaters and room servers sending adverts with varying hash sizes in the last 7 days. Originally caused by a firmware bug where automatic adverts ignored the configured multibyte path setting, fixed in repeater v1.14.1. Companion nodes are excluded.
${inconsistent.length} node${inconsistent.length > 1 ? 's' : ''} affected. Click a node name to see which adverts have different hash sizes.
`;
}
}
// Repeaters and routing nodes no longer needed — collision data is server-computed
let currentBytes = 1;
function refreshHashViews(bytes) {
currentBytes = bytes;
hideMatrixTip();
// Update selector button states
document.querySelectorAll('.hash-byte-btn').forEach(b => {
b.classList.toggle('active', Number(b.dataset.bytes) === bytes);
});
// Update titles and description
const matrixTitle = document.getElementById('hashMatrixTitle');
const matrixDesc = document.getElementById('hashMatrixDesc');
const riskTitle = document.getElementById('collisionRiskTitle');
if (matrixTitle) matrixTitle.innerHTML = bytes === 3 ? ' Hash Usage Matrix' : ` ${bytes}-Byte Hash Usage Matrix`;
if (riskTitle) riskTitle.innerHTML = ` ${bytes}-Byte Collision Risk`;
if (matrixDesc) {
if (bytes === 1) matrixDesc.textContent = 'Cells include the first byte of all repeaters — including those using 2- or 3-byte prefixes — so this reflects real conflicts in the 1-byte hash space. Click a cell to see the nodes.';
else if (bytes === 2) matrixDesc.textContent = 'Each cell = first-byte group. Color shows worst 2-byte collision within. Click a cell to see the breakdown.';
else matrixDesc.textContent = '3-byte prefix space is too large to visualize as a matrix — collision table is shown below.';
}
renderHashMatrixFromServer(cData.by_size[String(bytes)], bytes);
// Show collision risk section for all byte sizes
const riskCard = document.getElementById('collisionRiskSection');
if (riskCard) riskCard.style.display = '';
renderCollisionsFromServer(cData.by_size[String(bytes)], bytes);
}
// Wire up selector
document.getElementById('hashByteSelector')?.querySelectorAll('.hash-byte-btn').forEach(btn => {
btn.addEventListener('click', () => refreshHashViews(Number(btn.dataset.bytes)));
});
refreshHashViews(1);
}
function renderHashTimeline(hourly) {
if (!hourly.length) return '
`;
return svg;
}
// Shared hover tooltip for hash matrix cells.
// Called once per container — reads content from data-tip on each
.
// Single shared tooltip element for the entire hash matrix — avoids DOM accumulation on mode switch
let _matrixTip = null;
function getMatrixTip() {
if (!_matrixTip) {
_matrixTip = document.createElement('div');
_matrixTip.className = 'hash-matrix-tooltip';
_matrixTip.style.display = 'none';
document.body.appendChild(_matrixTip);
}
return _matrixTip;
}
function hideMatrixTip() { if (_matrixTip) _matrixTip.style.display = 'none'; }
// SECURITY (ANL-1, PR #1539 round 2): rebuild tooltip body via DOM APIs.
// The previous round-1 fix used `tip.textContent = td.dataset.tip`, which
// defeated the mutation-XSS but also broke the rendered tooltip — the
// payload had been a structured HTML string from hashTooltipHtml(), so
// users saw literal `
…
` text. The correct fix is
// to stop carrying HTML through the dataset round-trip entirely: each
// tooltip field rides as its own data-tip-* attribute (entity-decoded by
// the browser on read = plain text), and we materialize the three styled
// child
s via createElement + textContent. No innerHTML on any
// node-controlled field path.
function buildMatrixTipChildren(tip, td) {
while (tip.firstChild) tip.removeChild(tip.firstChild);
const ds = td.dataset || {};
if (ds.tipHex) {
const h = document.createElement('div');
h.className = 'hash-matrix-tooltip-hex';
h.textContent = ds.tipHex;
tip.appendChild(h);
}
if (ds.tipStatus) {
const s = document.createElement('div');
s.className = 'hash-matrix-tooltip-status';
s.textContent = ds.tipStatus;
tip.appendChild(s);
}
if (ds.tipLines) {
const wrap = document.createElement('div');
wrap.className = 'hash-matrix-tooltip-nodes';
const lines = ds.tipLines.split('\u001f');
for (let i = 0; i < lines.length; i++) {
const row = document.createElement('div');
row.style.fontSize = '11px';
row.textContent = lines[i];
wrap.appendChild(row);
}
tip.appendChild(wrap);
}
}
function initMatrixTooltip(el) {
if (el._matrixTipInit) return;
el._matrixTipInit = true;
el.addEventListener('mouseover', e => {
const td = e.target.closest('td[data-tip-hex]');
if (!td) return;
const tip = getMatrixTip();
buildMatrixTipChildren(tip, td);
tip.style.display = 'block';
});
el.addEventListener('mousemove', e => {
if (!_matrixTip || _matrixTip.style.display === 'none') return;
const x = e.clientX + 14, y = e.clientY + 14;
_matrixTip.style.left = Math.min(x, window.innerWidth - _matrixTip.offsetWidth - 8) + 'px';
_matrixTip.style.top = Math.min(y, window.innerHeight - _matrixTip.offsetHeight - 8) + 'px';
});
el.addEventListener('mouseout', e => {
if (e.target.closest('td[data-tip-hex]') && !e.relatedTarget?.closest('td[data-tip-hex]')) hideMatrixTip();
});
el.addEventListener('mouseleave', hideMatrixTip);
}
// --- Shared helpers for hash matrix rendering ---
function hashStatCardsHtml(totalNodes, usingCount, sizeLabel, spaceSize, usedCount, collisionCount) {
const pct = spaceSize > 0 && usedCount > 0 ? ((usedCount / spaceSize) * 100) : 0;
const pctStr = spaceSize > 65536 ? pct.toFixed(6) : spaceSize > 256 ? pct.toFixed(3) : pct.toFixed(1);
const spaceLabel = spaceSize >= 1e6 ? (spaceSize / 1e6).toFixed(1) + 'M' : spaceSize.toLocaleString();
return `
Nodes tracked
${totalNodes.toLocaleString()}
Using ${sizeLabel} ID
${usingCount.toLocaleString()}
Prefix space used
${pctStr}%
${usedCount > 256 ? usedCount + ' of ' : 'of '}${spaceLabel} possible
0 ? 'onclick="document.getElementById(\'collisionRiskSection\')?.scrollIntoView({behavior:\'smooth\',block:\'start\'})"' : ''} ${collisionCount > 0 ? 'title="Click to see collision details"' : ''}>
Prefix collisions
${collisionCount}${collisionCount > 0 ? ' ' : ''}
`;
}
function hashMatrixGridHtml(nibbles, cellSize, headerSize, cellDataFn) {
let html = `
`;
html += `
`;
for (const n of nibbles) html += `
${n}
`;
html += '
';
for (let hi = 0; hi < 16; hi++) {
html += `
${nibbles[hi]}
`;
for (let lo = 0; lo < 16; lo++) {
html += cellDataFn(nibbles[hi] + nibbles[lo], cellSize);
}
html += '
';
}
html += '
';
return html;
}
function hashMatrixLegendHtml(labels) {
return `
${labels.map(l => ` ${l.text}`).join('\n')}
`;
}
// --- Shared cell classification for hash matrix ---
function classifyHashCell(count, isConfirmedCollision, isPossibleConflict) {
if (count === 0) return { cls: 'hash-cell-empty', bg: '' };
if (!isConfirmedCollision && !isPossibleConflict) return { cls: 'hash-cell-taken', bg: '' };
if (isPossibleConflict) return { cls: 'hash-cell-possible', bg: '' };
const t = Math.min((count - 2) / 4, 1);
return { cls: 'hash-cell-collision', bg: `background:rgb(${Math.round(220+35*t)},${Math.round(120*(1-t))},30);` };
}
// hashCellTd — emits a hash-matrix
. Tooltip data rides as separate
// data-tip-* attributes (plain text per field); buildMatrixTipChildren()
// materializes the styled DOM on mouseover. NEVER carry HTML through
// data-tip-* — see ANL-1 (PR #1539).
function hashCellTd(hex, cellSize, cls, bg, count, tipSpec, fontWeight) {
// tipSpec: { hex: string, status?: string, lines?: string[] }
const spec = tipSpec || {};
const hexAttr = ' data-tip-hex="' + esc(spec.hex || '') + '"';
const statusAttr = spec.status
? ' data-tip-status="' + esc(spec.status) + '"'
: '';
// Join row lines with U+001F (Unit Separator) — a control char that
// never appears in node names, so we can split safely on the read side.
const linesAttr = (spec.lines && spec.lines.length)
? ' data-tip-lines="' + esc(spec.lines.join('\u001f')) + '"'
: '';
return `
${hex}
`;
}
// hashTooltipSpec — returns a plain-data tooltip descriptor consumed by
// hashCellTd and rendered by buildMatrixTipChildren. Plain text only;
// no HTML, no markup. `lines` is an array of pre-formatted row strings.
function hashTooltipSpec(hexLabel, statusText, lines) {
const spec = { hex: hexLabel, status: statusText };
if (lines && lines.length) spec.lines = lines;
return spec;
}
function renderHashMatrixPanel(el, statCardsHtml, cellRendererFn, detailMaxWidth, legendLabels, clickHandlerFn) {
const nibbles = '0123456789ABCDEF'.split('');
const cellSize = 36;
const headerSize = 24;
let html = statCardsHtml;
html += hashMatrixGridHtml(nibbles, cellSize, headerSize, cellRendererFn);
html += `
`;
html += hashMatrixLegendHtml(legendLabels);
el.innerHTML = html;
initMatrixTooltip(el);
// #1473 — Grey out cells whose first byte the MeshCore firmware keygen
// routine avoids (pub_key[0] in {0x00, 0xFF}). This is a keygen
// CONVENTION, not a protocol-level rejection — see firmware
// examples/simple_repeater/main.cpp:83 (HEAD 8ede7641). Must run BEFORE
// we wire click handlers so .hash-active is stripped first.
if (typeof PrefixReserved !== 'undefined' && PrefixReserved && typeof PrefixReserved.markReservedCells === 'function') {
PrefixReserved.markReservedCells(el);
}
el.querySelectorAll('.hash-active').forEach(td => {
td.addEventListener('click', () => {
clickHandlerFn(td);
el.querySelectorAll('.hash-selected').forEach(c => c.classList.remove('hash-selected'));
td.classList.add('hash-selected');
});
});
}
function renderHashMatrixFromServer(sizeData, bytes) {
const el = document.getElementById('hashMatrix');
if (!sizeData) { el.innerHTML = '
No data
'; return; }
const stats = sizeData.stats || {};
const totalNodes = stats.total_nodes || 0;
// 3-byte: show a summary panel instead of a matrix
if (bytes === 3) {
el.innerHTML = hashStatCardsHtml(totalNodes, stats.using_this_size || 0, '3-byte', 16777216, stats.unique_prefixes || 0, stats.collision_count || 0) +
`
The 3-byte prefix space (16.7M values) is too large to visualize as a grid.${(stats.collision_count || 0) > 0 ? ' See collision details below.' : ''}
` +
`
ℹ️ This tab only counts collisions among repeaters configured for this hash size. The Prefix Tool checks all repeaters regardless of configured hash size.
Local <${t50}: true prefix collision, same mesh area
Regional ${t50}–${t200}: edge of LoRa range, possible atmospheric propagation
Distant >${t200}: beyond 915MHz range — internet bridge, MQTT gateway, or separate networks
`;
}
async function renderSubpaths(el) {
el.innerHTML = '
Analyzing route patterns…
';
try {
const rq = RegionFilter.regionQueryString();
// Issue #1217: thread the Time window picker into the Route Patterns
// request so the chart actually reflects the user's selection.
const twEl = document.getElementById('analyticsTimeWindow');
const twVal = twEl ? twEl.value : '';
const tws = twVal ? '&window=' + encodeURIComponent(twVal) : '';
const bulk = await api('/analytics/subpaths-bulk?groups=2-2:50,3-3:30,4-4:20,5-8:15' + rq + tws, { ttl: CLIENT_TTL.analyticsRF });
const [d2, d3, d4, d5] = bulk.results;
function renderTable(data, title) {
if (!data.subpaths.length) return `
';
listEl.innerHTML = html;
}
function startGraphRenderer() {
if (!_ngState) return;
// Node count guard: skip force simulation for very large graphs
var NODE_LIMIT = 1000;
if (_ngState.allNodes.length > NODE_LIMIT) {
var el = document.getElementById('ngCanvas');
if (el) {
el.style.display = 'none';
var msg = document.createElement('div');
msg.className = 'analytics-card';
msg.innerHTML = '
Graph has ' + _ngState.allNodes.length + ' nodes (limit: ' + NODE_LIMIT + '). Force simulation skipped for performance. Use filters to reduce the node count.
';
el.parentNode.insertBefore(msg, el);
}
return;
}
const canvas = document.getElementById('ngCanvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;
ctx.scale(dpr, dpr);
const W = canvas.clientWidth, H = canvas.clientHeight;
// Interaction
let hoverNode = null;
function canvasToGraph(cx, cy) {
return { x: (cx - _ngState.panX) / _ngState.zoom, y: (cy - _ngState.panY) / _ngState.zoom };
}
function findNode(cx, cy) {
const gp = canvasToGraph(cx, cy);
for (let i = _ngState.nodes.length - 1; i >= 0; i--) {
const n = _ngState.nodes[i];
const dx = gp.x - n.x, dy = gp.y - n.y;
if (dx * dx + dy * dy <= n.radius * n.radius) return n;
}
return null;
}
canvas.addEventListener('mousedown', function(e) {
const rect = canvas.getBoundingClientRect();
const cx = e.clientX - rect.left, cy = e.clientY - rect.top;
const n = findNode(cx, cy);
if (n) {
_ngState.dragging = n;
n._pinned = true;
canvas.style.cursor = 'grabbing';
} else {
_ngState.panning = true;
canvas.style.cursor = 'grabbing';
}
_ngState.lastMouseX = e.clientX;
_ngState.lastMouseY = e.clientY;
});
canvas.addEventListener('mousemove', function(e) {
const rect = canvas.getBoundingClientRect();
const cx = e.clientX - rect.left, cy = e.clientY - rect.top;
if (_ngState.dragging) {
const dx = (e.clientX - _ngState.lastMouseX) / _ngState.zoom;
const dy = (e.clientY - _ngState.lastMouseY) / _ngState.zoom;
_ngState.dragging.x += dx;
_ngState.dragging.y += dy;
_ngState.lastMouseX = e.clientX;
_ngState.lastMouseY = e.clientY;
_ngState.cooling = Math.max(_ngState.cooling, 0.3);
} else if (_ngState.panning) {
_ngState.panX += e.clientX - _ngState.lastMouseX;
_ngState.panY += e.clientY - _ngState.lastMouseY;
_ngState.lastMouseX = e.clientX;
_ngState.lastMouseY = e.clientY;
} else {
const n = findNode(cx, cy);
if (n !== hoverNode) {
hoverNode = n;
canvas.style.cursor = n ? 'pointer' : 'grab';
const tip = document.getElementById('ngTooltip');
if (n && tip) {
tip.style.display = 'block';
tip.style.left = (cx + 12) + 'px';
tip.style.top = (cy - 8) + 'px';
tip.innerHTML = `${escapeHtml(n.name || n.pubkey.slice(0, 12) + '…')} Role: ${escapeHtml(n.role || 'unknown')} Neighbors: ${n.neighbor_count || 0}`;
} else if (tip) {
tip.style.display = 'none';
}
} else if (hoverNode) {
const tip = document.getElementById('ngTooltip');
if (tip) { tip.style.left = (cx + 12) + 'px'; tip.style.top = (cy - 8) + 'px'; }
}
}
});
canvas.addEventListener('mouseup', function() {
if (_ngState.dragging) {
_ngState.dragging._pinned = false;
_ngState._wasDragging = true;
}
_ngState.dragging = null;
_ngState.panning = false;
canvas.style.cursor = hoverNode ? 'pointer' : 'grab';
});
canvas.addEventListener('mouseleave', function() {
_ngState.dragging = null;
_ngState.panning = false;
_ngState._wasDragging = false;
const tip = document.getElementById('ngTooltip');
if (tip) tip.style.display = 'none';
hoverNode = null;
});
canvas.addEventListener('click', function(e) {
if (_ngState._wasDragging) { _ngState._wasDragging = false; return; }
if (_ngState.dragging) return;
const rect = canvas.getBoundingClientRect();
const n = findNode(e.clientX - rect.left, e.clientY - rect.top);
if (n) location.hash = '#/nodes/' + n.pubkey;
});
canvas.addEventListener('keydown', function(e) {
const PAN_STEP = 30, ZOOM_STEP = 1.15;
switch (e.key) {
case 'ArrowLeft': _ngState.panX += PAN_STEP; e.preventDefault(); break;
case 'ArrowRight': _ngState.panX -= PAN_STEP; e.preventDefault(); break;
case 'ArrowUp': _ngState.panY += PAN_STEP; e.preventDefault(); break;
case 'ArrowDown': _ngState.panY -= PAN_STEP; e.preventDefault(); break;
case '+': case '=': _ngState.zoom = Math.min(10, _ngState.zoom * ZOOM_STEP); e.preventDefault(); break;
case '-': case '_': _ngState.zoom = Math.max(0.1, _ngState.zoom / ZOOM_STEP); e.preventDefault(); break;
case '0': _ngState.zoom = 1; _ngState.panX = 0; _ngState.panY = 0; e.preventDefault(); break;
}
});
canvas.addEventListener('wheel', function(e) {
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const cx = e.clientX - rect.left, cy = e.clientY - rect.top;
const factor = e.deltaY < 0 ? 1.1 : 0.9;
const newZoom = Math.max(0.1, Math.min(10, _ngState.zoom * factor));
// Zoom towards mouse position
_ngState.panX = cx - (cx - _ngState.panX) * (newZoom / _ngState.zoom);
_ngState.panY = cy - (cy - _ngState.panY) * (newZoom / _ngState.zoom);
_ngState.zoom = newZoom;
}, { passive: false });
// Cache text color to avoid getComputedStyle every frame
const _labelColor = cssVar('--text-primary') || '#e0e0e0';
// Force simulation + render loop
// Performance: 500 nodes brute-force repulsion: avg ~4ms/frame = 250fps headroom (measured Chrome 120, M1)
var _perfFrameTimes = [], _perfLastTime = 0;
function tick() {
if (!document.getElementById('ngCanvas')) { _ngState.animId = null; return; }
var now = performance.now();
if (_perfLastTime) _perfFrameTimes.push(now - _perfLastTime);
_perfLastTime = now;
if (_perfFrameTimes.length === 100) {
var avg = _perfFrameTimes.reduce(function(a, b) { return a + b; }, 0) / 100;
console.log('[NeighborGraph perf] avg frame time over 100 frames: ' + avg.toFixed(2) + 'ms (' + (1000 / avg).toFixed(0) + ' fps)');
_perfFrameTimes = [];
}
const st = _ngState;
const nodes = st.nodes, edges = st.edges, idx = st.nodeIdx;
if (st.cooling > 0.001) {
// Repulsion (all pairs — use grid for large sets, brute force for small)
const k = 80; // repulsion constant
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
let dx = nodes[j].x - nodes[i].x;
let dy = nodes[j].y - nodes[i].y;
let d2 = dx * dx + dy * dy;
if (d2 < 1) { dx = Math.random() - 0.5; dy = Math.random() - 0.5; d2 = 1; }
const f = k * k / d2;
const fx = dx / Math.sqrt(d2) * f;
const fy = dy / Math.sqrt(d2) * f;
nodes[i].vx -= fx; nodes[i].vy -= fy;
nodes[j].vx += fx; nodes[j].vy += fy;
}
}
// Attraction along edges
const idealLen = 120;
for (const e of edges) {
const si = idx[e.source], ti = idx[e.target];
if (si === undefined || ti === undefined) continue;
const a = nodes[si], b = nodes[ti];
let dx = b.x - a.x, dy = b.y - a.y;
const d = Math.sqrt(dx * dx + dy * dy) || 1;
const f = (d - idealLen) * 0.05 * (0.5 + e.score * 0.5);
const fx = dx / d * f, fy = dy / d * f;
a.vx += fx; a.vy += fy;
b.vx -= fx; b.vy -= fy;
}
// Center gravity
for (const n of nodes) {
n.vx += (W / 2 - n.x) * 0.001;
n.vy += (H / 2 - n.y) * 0.001;
}
// Apply velocities with damping
const damping = 0.85;
for (const n of nodes) {
if (n._pinned) { n.vx = 0; n.vy = 0; continue; }
n.vx *= damping * st.cooling;
n.vy *= damping * st.cooling;
const speed = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
if (speed > 10) { n.vx *= 10 / speed; n.vy *= 10 / speed; }
n.x += n.vx;
n.y += n.vy;
}
st.cooling *= 0.995;
}
// Render
ctx.save();
ctx.clearRect(0, 0, W, H);
ctx.translate(st.panX, st.panY);
ctx.scale(st.zoom, st.zoom);
// Edges
for (const e of edges) {
const si = idx[e.source], ti = idx[e.target];
if (si === undefined || ti === undefined) continue;
const a = nodes[si], b = nodes[ti];
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.strokeStyle = e.ambiguous ? 'rgba(255,200,0,0.4)' : 'rgba(150,150,150,0.35)';
ctx.lineWidth = Math.max(0.5, e.score * 4);
if (e.ambiguous) { ctx.setLineDash([4, 4]); } else { ctx.setLineDash([]); }
ctx.stroke();
ctx.setLineDash([]);
}
// Nodes
const roleColors = window.ROLE_COLORS || {};
for (const n of nodes) {
const color = roleColors[(n.role || '').toLowerCase()] || '#6b7280';
ctx.beginPath();
ctx.arc(n.x, n.y, n.radius, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
if (n === hoverNode) {
ctx.strokeStyle = '#fff';
ctx.lineWidth = 2;
ctx.stroke();
}
// Label
const label = n.name || (n.pubkey ? n.pubkey.slice(0, 8) + '…' : '');
if (label && st.zoom > 0.4) {
ctx.fillStyle = _labelColor;
ctx.font = '10px sans-serif';
ctx.textAlign = 'center';
ctx.fillText(label, n.x, n.y + n.radius + 12);
}
}
ctx.restore();
st.animId = requestAnimationFrame(tick);
}
_ngState.animId = requestAnimationFrame(tick);
}
// --- Prefix Tool ---
async function renderPrefixTool(el) {
el.innerHTML = '
Loading prefix data…
';
const rq = RegionFilter.regionQueryString() + AreaFilter.areaQueryString();
const regionLabel = rq ? (new URLSearchParams(rq.slice(1)).get('region') || '') : '';
let nodesResp, hashSizesResp;
try {
[nodesResp, hashSizesResp] = await Promise.all([
fetchAllNodes('&sortBy=lastSeen' + rq, { ttl: CLIENT_TTL.nodeList }),
// #1270: fetch CONFIGURED-hash-size counts so the Network Overview
// tells the operational story (matching Hash Stats "By Repeaters"),
// not just a math-only count of unique pubkey slices.
api('/analytics/hash-sizes' + rq, { ttl: CLIENT_TTL.analyticsRF }).catch(() => null),
]);
} catch (e) {
el.innerHTML = `
Failed to load: ${esc(e.message)}
`;
return;
}
// Deduplicate by public_key, require at least 6 hex chars to build all 3 tiers
const nodeMap = new Map();
(nodesResp.nodes || nodesResp).forEach(n => {
if (n.public_key && n.public_key.length >= 6 && !nodeMap.has(n.public_key)) {
nodeMap.set(n.public_key, n);
}
});
const allNodes = [...nodeMap.values()];
// Only repeaters matter for prefix collisions — they relay packets using hash prefixes.
// Companions, rooms, and sensors don't route, so their prefix collisions are harmless.
const nodes = allNodes.filter(n => n.role === 'repeater');
if (nodes.length === 0) {
el.innerHTML = `
No repeaters in the network yet. Any prefix is available!
`;
return;
}
// Build 3-tier prefix indexes: prefix (uppercase hex) -> [nodes]
const idx = { 1: new Map(), 2: new Map(), 3: new Map() };
nodes.forEach(n => {
const pk = n.public_key.toUpperCase();
[1, 2, 3].forEach(b => {
const p = pk.slice(0, b * 2);
if (!idx[b].has(p)) idx[b].set(p, []);
idx[b].get(p).push(n);
});
});
// Network overview stats
const spaceSizes = { 1: 256, 2: 65536, 3: 16777216 };
const stats = {};
[1, 2, 3].forEach(b => {
stats[b] = {
usedPrefixes: idx[b].size,
collidingPrefixes: [...idx[b].values()].filter(arr => arr.length > 1).length,
};
});
// #1270: CONFIGURED-hash-size counts (operational truth) from
// /api/analytics/hash-sizes — same source the Hash Stats tab uses.
// distributionByRepeaters keys are stringified ints ("1","2","3").
// "0" = no adverts observed yet, so the configured size is unknown
// and that node doesn't count for any tier.
const distByRepeaters = (hashSizesResp && hashSizesResp.distributionByRepeaters) || {};
const configuredCount = {
1: Number(distByRepeaters['1'] || 0),
2: Number(distByRepeaters['2'] || 0),
3: Number(distByRepeaters['3'] || 0),
};
const totalConfigured = configuredCount[1] + configuredCount[2] + configuredCount[3];
// Operational collisions per tier: only consider repeaters CONFIGURED
// for this hash size — same definition the Hash Issues tab uses.
// n.hash_size is enriched on the /nodes payload from GetNodeHashSizeInfo.
// #1306: keep the per-tier *node lists* per colliding slice so we can
// surface WHICH prefixes/nodes collide (not just an aggregate count).
const opCollisions = { 1: 0, 2: 0, 3: 0 };
const opIdx = { 1: new Map(), 2: new Map(), 3: new Map() };
[1, 2, 3].forEach(b => {
nodes.forEach(n => {
if (n.hash_size !== b) return;
const p = n.public_key.toUpperCase().slice(0, b * 2);
if (!opIdx[b].has(p)) opIdx[b].set(p, []);
opIdx[b].get(p).push(n);
});
opCollisions[b] = [...opIdx[b].values()].filter(arr => arr.length > 1).length;
});
// #1306: precompute colliding slices per tier (entries with >1 node) for
// the "Show N colliding slices →" expandable lists. THEORETICAL = across
// every repeater's pubkey prefix (math fact). OPERATIONAL = only among
// repeaters configured for this hash size (matches Hash Issues tab math).
const collEntries = { theoretical: { 1: [], 2: [], 3: [] }, operational: { 1: [], 2: [], 3: [] } };
[1, 2, 3].forEach(b => {
collEntries.theoretical[b] = [...idx[b].entries()]
.filter(([, arr]) => arr.length > 1)
.sort((a, b2) => b2[1].length - a[1].length || a[0].localeCompare(b2[0]));
collEntries.operational[b] = [...opIdx[b].entries()]
.filter(([, arr]) => arr.length > 1)
.sort((a, b2) => b2[1].length - a[1].length || a[0].localeCompare(b2[0]));
});
// #1306: render a "Prefix · Nodes sharing" table for a list of
// colliding entries `[ [prefix, [node, ...]], ... ]`.
function renderCollideTable(entries) {
if (!entries || !entries.length) {
return '
${cfg.toLocaleString()}
of ${totalNodes.toLocaleString()} repeaters configured
${opLine}
${opToggle}
Theoretical: ${stats[b].usedPrefixes.toLocaleString()} unique ${b}-byte slice${stats[b].usedPrefixes !== 1 ? 's' : ''}
across all repeater pubkeys (of ${spaceSizes[b].toLocaleString()} possible)${theoC > 0 ? ` — ${theoC} would-collide if every repeater used ${b}-byte` : ''}
${theoToggle}
`;
}).join('')}
ℹ️ Theoretical vs observed: These are theoretical address conflicts that would occur IF all repeaters used this hash size (would-collide-if-used). For collisions actually observed in packet traffic, see the Hash Issues tab.
Recommendation: ${rec} prefixes — ${recDetail}
Hash size is configured per-node in firmware. Changing requires reflashing.
ℹ️ About these numbers: The primary count is how many repeaters are configured for each hash size (their advertised path hash byte length), matching the
Hash Stats tab. Address conflicts (would-collide-if-used) count colliding slices among repeaters configured for the same hash size — same definition the
Hash Issues tab uses, except Hash Issues counts collisions actually observed in packet traffic rather than theoretical. The theoretical line shows the math fact: how many distinct slices appear when every repeater pubkey is truncated to N bytes, regardless of configured hash size.
Check a Prefix
Enter a 1-byte (2 hex chars), 2-byte (4 hex chars), or 3-byte (6 hex chars) prefix — or paste a full public key.
Generate Available Prefix
Find a prefix with zero current collisions.
0x00 and 0xFF excluded as a first byte — the MeshCore firmware keygen routine re-rolls identities whose pub_key[0] is 00 or FF, so by convention you should not see those prefixes on real nodes (see
simple_repeater/main.cpp:83).
Prefix must be 2, 4, or 6 hex characters. For a full public key, use 64 characters.
';
return;
}
const isFullKey = input.length >= 8;
const tiers = isFullKey
? [{ b: 1, prefix: input.slice(0, 2) }, { b: 2, prefix: input.slice(0, 4) }, { b: 3, prefix: input.slice(0, 6) }]
: [{ b: input.length / 2, prefix: input }];
let html = '';
// #1473 — Warn when the user pastes a prefix or full pubkey whose
// first byte is one the MeshCore firmware keygen routine avoids
// (pub_key[0] in {0x00, 0xFF}). Firmware keygen CONVENTION, not a
// protocol-level rejection — see simple_repeater/main.cpp:83.
if (typeof PrefixReserved !== 'undefined' && PrefixReserved &&
PrefixReserved.isReservedPrefix(input)) {
html += `
Firmware avoids this first byte
${input.slice(0,2)} as the first byte of a node pubkey is avoided by the MeshCore firmware keygen convention (the standard repeater re-rolls identities whose pub_key[0] is 00 or FF). You generally shouldn't see this on real nodes.
`;
}
if (isFullKey) {
const inNetwork = nodes.some(n => n.public_key.toUpperCase() === input);
html += `
Derived prefixes: ${input.slice(0,2)} / ${input.slice(0,4)} / ${input.slice(0,6)}${!inNetwork ? ' — this node is not yet in the network' : ''}
' +
'';
// Attach window-button click listeners (once)
el.querySelectorAll('[data-win]').forEach(function(btn) {
btn.addEventListener('click', function() {
selectedWindow = btn.dataset.win;
if (typeof sessionStorage !== 'undefined') sessionStorage.setItem(winKey, selectedWindow);
el.querySelectorAll('[data-win]').forEach(function(b) { b.classList.toggle('active', b.dataset.win === selectedWindow); });
load(selectedWindow);
});
});
}
function pct(n, total) {
if (!total) return '—';
return (n / total * 100).toFixed(1) + '%';
}
async function load(w) {
var loadingEl = document.getElementById('scopes-loading');
if (loadingEl) loadingEl.style.display = '';
try {
// Fix 4: use api() instead of raw fetch()
var data = await api('/scope-stats?window=' + encodeURIComponent(w), { ttl: 30000 });
if (loadingEl) loadingEl.style.display = 'none';
if (data.error) {
var cardsEl2 = document.getElementById('scopes-cards');
if (cardsEl2) cardsEl2.innerHTML = '
' + esc(data.error) + '
';
return;
}
updateData(data, w);
} catch (err) {
if (loadingEl) loadingEl.style.display = 'none';
var cardsEl3 = document.getElementById('scopes-cards');
if (cardsEl3) cardsEl3.innerHTML = '
Failed to load scope stats: ' + esc(String(err)) + '
';
}
}
function updateData(d, w) {
var s = d.summary;
var total = s.transportTotal || 0;
// Summary cards
var cardsEl = document.getElementById('scopes-cards');
if (cardsEl) {
cardsEl.innerHTML = [
{ label: 'Transport Total', value: total.toLocaleString(), note: '' },
{ label: 'Scoped', value: s.scoped.toLocaleString(), note: pct(s.scoped, total) },
{ label: 'Unscoped', value: s.unscoped.toLocaleString(), note: pct(s.unscoped, total) },
{ label: 'Unknown Scope', value: s.unknownScope.toLocaleString(), note: pct(s.unknownScope, s.scoped) + ' of scoped' },
].map(function(c) {
return '
' + c.value + '
' +
'
' + c.label + '
' +
(c.note ? '
' + c.note + '
' : '') +
'
';
}).join('');
}
// Per-region table
var tbodyEl = document.getElementById('scopes-tbody');
if (tbodyEl) {
var tableBody = '';
if (d.byRegion && d.byRegion.length) {
tableBody = d.byRegion.map(function(r) {
return '
' + esc(r.name) + '
' +
'
' + r.count.toLocaleString() + '
' +
'
' + pct(r.count, s.scoped) + '
';
}).join('');
if (s.unknownScope > 0) {
tableBody += '
Unknown scope
' +
'
' + s.unknownScope.toLocaleString() + '
' +
'
' + pct(s.unknownScope, s.scoped) + '
';
}
} else if (s.scoped === 0) {
tableBody = '
No scoped messages in this window
';
} else {
tableBody = '
No regions configured — add hashRegions to your config
';
}
tbodyEl.innerHTML = tableBody;
}
// Time-series chart (two-line SVG)
var chartEl = document.getElementById('scopes-chart');
if (chartEl) {
var chartHtml = '';
if (d.timeSeries && d.timeSeries.length > 1) {
var scopedVals = d.timeSeries.map(function(p) { return p.scoped; });
var unscopedVals = d.timeSeries.map(function(p) { return p.unscoped; });
var maxVal = Math.max(1, Math.max.apply(null, scopedVals.concat(unscopedVals)));
var W = 800, H = 180, padL = 44, padT = 10, padR = 10;
var plotW = W - padL - padR, plotH = H - 24 - padT;
var n = d.timeSeries.length;
function pts(vals) {
return vals.map(function(v, i) {
var x = padL + i * plotW / Math.max(n - 1, 1);
var y = padT + plotH - (v / maxVal) * plotH;
return x.toFixed(1) + ',' + y.toFixed(1);
}).join(' ');
}
var grid = '';
for (var gi = 0; gi <= 4; gi++) {
var gy = padT + plotH * gi / 4;
var gv = Math.round(maxVal * (4 - gi) / 4);
grid += '';
grid += '' + gv + '';
}
var legendX = padL + plotW - 120;
chartHtml = '
' +
'
';
} else {
chartHtml = '
Insufficient data points to render chart — wait for more observations in this window.
';
}
chartEl.innerHTML = chartHtml;
}
}
load(selectedWindow);
// Fix 6: auto-refresh every 60s
_stopScopesRefresh();
_scopesRefreshTimer = setInterval(function() {
if (_currentTab !== 'scopes') { _stopScopesRefresh(); return; }
var cur = document.getElementById('analyticsContent');
if (!cur) { _stopScopesRefresh(); return; }
load(selectedWindow);
}, 60000);
}
// #1085 — Roles tab (folded in from former /#/roles page).
// Renders distribution of node roles + per-role clock-skew posture.
// Auto-refreshes every 60s while the Roles tab is active (matches the
// behavior of the former standalone roles-page.js).
async function renderRolesTab(el) {
el.innerHTML = '
Loading roles…
';
await _renderRolesTabBody(el);
// (Re)start the 60s auto-refresh.
_stopRolesRefresh();
_rolesRefreshTimer = setInterval(function () {
// Bail if the user navigated away from the Roles tab.
if (_currentTab !== 'roles') { _stopRolesRefresh(); return; }
var cur = document.getElementById('analyticsContent');
if (!cur) { _stopRolesRefresh(); return; }
_renderRolesTabBody(cur);
}, 60000);
}
async function _renderRolesTabBody(el) {
try {
var data = await api('/analytics/roles', { ttl: CLIENT_TTL.analyticsRF });
var roles = (data && data.roles) || [];
var total = (data && data.totalNodes) || 0;
if (!roles.length) {
el.innerHTML = '