@@ -263,6 +267,8 @@
clearTimeout(searchTimeout);
if (searchAbort) { searchAbort.abort(); searchAbort = null; }
if (miniMap) { miniMap.remove(); miniMap = null; }
+ const observersDialog = document.getElementById('homeObserversDialog');
+ if (observersDialog?.open) observersDialog.close();
if (_themeRefreshHandler) { window.removeEventListener('theme-refresh', _themeRefreshHandler); _themeRefreshHandler = null; }
}
@@ -288,12 +294,15 @@
return;
}
+ const observerLists = new Map();
+
const cards = await Promise.all(myNodes.map(async (mn) => {
try {
const h = await api('/nodes/' + encodeURIComponent(mn.pubkey) + '/health', { ttl: CLIENT_TTL.nodeHealth });
const node = h.node || {};
const stats = h.stats || {};
const obs = h.observers || [];
+ observerLists.set(mn.pubkey, obs);
const age = stats.lastHeard ? Date.now() - new Date(stats.lastHeard).getTime() : null;
const status = age === null ? 'silent' : age < HEALTH_THRESHOLDS.nodeDegradedMs ? 'healthy' : age < HEALTH_THRESHOLDS.nodeSilentMs ? 'degraded' : 'silent';
@@ -307,8 +316,19 @@
const snrLabel = snrVal != null ? (snrVal > 10 ? 'Excellent' : snrVal > 0 ? 'Good' : snrVal > -5 ? 'Marginal' : 'Poor') : null;
const snrColor = snrVal != null ? (snrVal > 10 ? 'var(--status-green)' : snrVal > 0 ? 'var(--accent)' : snrVal > -5 ? 'var(--status-yellow)' : 'var(--status-red)') : '#6b7280';
- // Build sparkline from recent packets (packet timestamps → hourly buckets)
- const sparkHtml = buildSparkline(h.recentPackets || []);
+ const sparkHtml = buildSparkline(h.activity24h);
+ const isRepeater = String(node.role || '').toLowerCase() === 'repeater';
+ const preview = isRepeater ? obs.slice(0, 3) : obs;
+ // #351 F2/R1: a name wider than the CSS max-width: 14ch clamp is
+ // clipped with an ellipsis. The full name must stay recoverable on
+ // EVERY card. Each span carries a title (pointer + assistive tech),
+ // and the accessible dialog (keyboard + touch) is offered when the
+ // preview hides names. Otherwise the button starts hidden and
+ // revealClippedObserverButtons() shows it after layout if a name is
+ // actually clipped — glyph width, not character count, decides that.
+ const obsFullName = o => o.observer_name || o.observer_id || 'Unknown';
+ const hiddenObservers = obs.length - preview.length;
+ const observerBtnText = hiddenObservers > 0 ? `View all ${obs.length} →` : 'Full names →';
return `
@@ -365,6 +385,7 @@
}));
grid.innerHTML = cards.join('');
+ revealClippedObserverButtons(grid);
// Wire up remove buttons
grid.querySelectorAll('.mnc-remove').forEach(btn => {
@@ -385,6 +406,7 @@
if (btn.dataset.action === 'node') window.location.hash = '#/nodes/' + encodeURIComponent(btn.dataset.key);
if (btn.dataset.action === 'health') loadHealth(btn.dataset.key);
if (btn.dataset.action === 'packets') window.location.hash = '#/packets/' + btn.dataset.key;
+ if (btn.dataset.action === 'observers') showObservers(btn, observerLists.get(btn.dataset.key) || []);
});
});
@@ -407,23 +429,52 @@
});
}
- function buildSparkline(packets) {
- if (!packets.length) return '';
- // Group into hourly buckets over last 24h
- const now = Date.now();
- const buckets = new Array(24).fill(0);
- packets.forEach(p => {
- const t = new Date(p.timestamp || p.created_at).getTime();
- const hoursAgo = Math.floor((now - t) / 3600000);
- if (hoursAgo >= 0 && hoursAgo < 24) buckets[23 - hoursAgo]++;
+ // #351 R1: measure after layout. scrollWidth > clientWidth is exactly when
+ // the ellipsis is drawn. All reads happen before any write, so the whole
+ // grid costs one layout pass.
+ function revealClippedObserverButtons(grid) {
+ const clipped = [...grid.querySelectorAll('.mnc-view-all[hidden]')].filter(btn =>
+ [...btn.parentElement.querySelectorAll('.mnc-observer-name')].some(el => el.scrollWidth > el.clientWidth));
+ clipped.forEach(btn => { btn.hidden = false; });
+ }
+
+ function showObservers(trigger, observers) {
+ const dialog = document.getElementById('homeObserversDialog');
+ if (!dialog) return;
+ const cardName = trigger.closest('.my-node-card')?.querySelector('.mnc-name')?.textContent || 'Node';
+ dialog.querySelector('#homeObserversTitle').textContent = `${cardName} · ${observers.length} observers`;
+ const list = dialog.querySelector('.mnc-dialog-list');
+ const fragment = document.createDocumentFragment();
+ observers.forEach(observer => {
+ const item = document.createElement('li');
+ item.textContent = observer.observer_name || observer.observer_id || 'Unknown';
+ fragment.appendChild(item);
});
- const max = Math.max(...buckets, 1);
- const bars = buckets.map(v => {
- const h = Math.max(2, Math.round((v / max) * 24));
- const opacity = v > 0 ? 0.4 + (v / max) * 0.6 : 0.1;
- return `
`;
+ list.replaceChildren(fragment);
+ dialog.querySelector('.mnc-dialog-close').onclick = () => dialog.close();
+ dialog.onclick = (event) => {
+ if (event.target !== dialog) return;
+ const rect = dialog.getBoundingClientRect();
+ if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) dialog.close();
+ };
+ dialog.onclose = () => { if (trigger.isConnected) trigger.focus(); };
+ dialog.showModal();
+ }
+
+ function buildSparkline(activity) {
+ const label = '
Node-associated transmissions · last 24h
';
+ const buckets = activity?.buckets;
+ const valid = activity?.complete === true && Array.isArray(buckets) && buckets.length === 24 &&
+ buckets.every(b => Number.isInteger(b.count) && b.count >= 0 && Number.isFinite(Date.parse(b.start)) && Number.isFinite(Date.parse(b.end)));
+ if (!valid) return label + '
Activity unavailable: 24h history incomplete
';
+ const max = Math.max(1, ...buckets.map(b => b.count));
+ const bars = buckets.map(b => {
+ const height = Math.max(2, Math.round((b.count / max) * 24));
+ const opacity = b.count > 0 ? 0.4 + (b.count / max) * 0.6 : 0.1;
+ const range = `${new Date(b.start).toLocaleString()} to ${new Date(b.end).toLocaleString()}`;
+ return `
`;
}).join('');
- return `
24h activity
${bars}
`;
+ return `${label}
${bars}
`;
}
// ==================== STATS ====================
diff --git a/test-issue-304-my-mesh-e2e.js b/test-issue-304-my-mesh-e2e.js
new file mode 100644
index 000000000..cccca3f78
--- /dev/null
+++ b/test-issue-304-my-mesh-e2e.js
@@ -0,0 +1,199 @@
+#!/usr/bin/env node
+'use strict';
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const { chromium } = require('playwright');
+
+const ROOT = path.join(__dirname, 'public');
+const ORIGIN = 'http://127.0.0.1:18740';
+const KEYS = ['a', 'b', 'c', 'd', 'e', 'f', '1', '2'].map(c => c.repeat(64));
+// #351 F2: a name wider than the 14ch clamp. Matches the review's repro name.
+const CLIP = 'Jackrabbit Mountain Relay North';
+// #351 R1: short (≤14 chars) but WIDE names. The clamp is CSS max-width: 14ch
+// (fourteen "0" glyphs), so uppercase/wide glyphs clip well before 14 chars.
+// WIDE clips in any sans font; the others are font-dependent and are checked
+// by the measured invariant below rather than asserted to clip.
+const WIDE = 'WWWWWWWWWWWWWW';
+const SHORT_WIDE = ['MOUNT WOLFHAWK', 'MMMMMMMMMMMMM', 'ØSTERBRO MOLE'];
+// #351 R2: a quote breaks out of an attribute that is not escapeAttr'd.
+const QUOTE = 'x" onmouseover="alert(1)';
+const now = Date.now();
+const end = new Date(now).toISOString();
+const start = new Date(now - 24 * 3600000).toISOString();
+const activity = (complete = true) => ({
+ windowStart: start, windowEnd: end, coverageStart: complete ? start : new Date(now - 8 * 3600000).toISOString(), complete,
+ buckets: Array.from({ length: 24 }, (_, i) => ({
+ start: new Date(now - (24 - i) * 3600000).toISOString(),
+ end: new Date(now - (23 - i) * 3600000).toISOString(),
+ count: i === 3 ? 35 : 0,
+ })),
+});
+
+async function render(page, responses, width, height) {
+ await page.setViewportSize({ width, height });
+ await page.route('**/*', route => {
+ const u = new URL(route.request().url());
+ if (u.origin !== ORIGIN) return route.abort();
+ if (u.pathname === '/icons/phosphor-sprite.svg') return route.fulfill({ contentType: 'image/svg+xml', body: fs.readFileSync(path.join(ROOT, 'icons/phosphor-sprite.svg')) });
+ return route.fulfill({ contentType: 'text/html', body: '
' });
+ });
+ await page.goto(ORIGIN + '/');
+ await page.addStyleTag({ path: path.join(ROOT, 'style.css') });
+ await page.addStyleTag({ path: path.join(ROOT, 'home.css') });
+ for (const file of ['app.js', 'roles.js']) await page.addScriptTag({ path: path.join(ROOT, file) });
+ await page.evaluate((data) => {
+ window.removeEventListener('hashchange', navigate);
+ window.fixturePages = {};
+ registerPage = (name, mod) => { window.fixturePages[name] = mod; };
+ api = async (route) => {
+ if (route === '/stats') return { totalNodes: 3 };
+ if (route in data) return data[route];
+ throw Error('Unexpected API: ' + route);
+ };
+ localStorage.setItem('meshcore-user-level', 'experienced');
+ localStorage.setItem('meshcore-my-nodes', JSON.stringify(Object.keys(data).map(route => ({ pubkey: route.split('/')[2], name: 'Node' }))));
+ }, responses);
+ await page.addScriptTag({ path: path.join(ROOT, 'home.js') });
+ await page.evaluate(() => window.fixturePages.home.init(document.getElementById('fixture')));
+ await page.waitForFunction((n) => document.querySelectorAll('.my-node-card').length === n, Object.keys(responses).length);
+}
+
+(async () => {
+ const browser = await chromium.launch({ headless: true, args: ['--no-sandbox'] });
+ try {
+ for (const [width, height] of [[1280, 900], [375, 812]]) {
+ const context = await browser.newContext({ viewport: { width, height }, hasTouch: width < 500, isMobile: width < 500 });
+ const page = await context.newPage();
+ const errors = [];
+ page.on('pageerror', e => errors.push(e.message));
+ const names = Array.from({ length: 51 }, (_, i) => i === 50 ? '
' : `Observer ${i}`);
+ names[0] = QUOTE;
+ names[1] = 'Very-long-observer-name-'.repeat(25);
+ names[2] = '