From 883c80b3fb56eab00cc3f47d95a3c0b314ff6d89 Mon Sep 17 00:00:00 2001
From: dborup <kontakt@meshview.dk>
Date: Mon, 5 Oct 2026 12:09:29 +0000
Subject: [PATCH 1/3] test: reproduce the Affinity Debug toggle and mobile
 group-row aria-expanded (#254)

test-issue-254-affinity-debug-toggle.js renders the node page's Affinity
Debug card from the real nodes.js and checks for a disclosure button
(aria-expanded, aria-controls on the hidden body, caret-right collapsed,
caret-down expanded) with no inline handler, and that the toggle and the
delegated click handler open and close it. Red on master: the card is
inline in loadFullNode, with a broken inline onclick.

test-packets.js: under the 600 px mobile breakpoint of
mobile-page-actions.js a multi-observation group row is select-hash
without aria-expanded; above it, it stays the #189 toggle. 3 cases red
on master.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 test-all.sh                             |   1 +
 test-issue-254-affinity-debug-toggle.js | 196 ++++++++++++++++++++++++
 test-packets.js                         |  88 +++++++++++
 3 files changed, 285 insertions(+)
 create mode 100644 test-issue-254-affinity-debug-toggle.js

diff --git a/test-all.sh b/test-all.sh
index a505c5a17..9ce3bdbcc 100755
--- a/test-all.sh
+++ b/test-all.sh
@@ -57,6 +57,7 @@ run test-top-routes-overlay.js
 run test-important-links-byte-filter.js
 run test-url-state.js
 run test-node-adverts.js
+run test-issue-254-affinity-debug-toggle.js
 run test-perf-go-runtime.js
 run test-channel-psk-ux.js
 run test-channel-sidebar-layout.js
diff --git a/test-issue-254-affinity-debug-toggle.js b/test-issue-254-affinity-debug-toggle.js
new file mode 100644
index 000000000..17eeb95e2
--- /dev/null
+++ b/test-issue-254-affinity-debug-toggle.js
@@ -0,0 +1,196 @@
+/**
+ * #254: the node page's Affinity Debug card (shown only with debugAffinity, e.g.
+ * localStorage meshcore-affinity-debug=true) folds its body in and out.
+ *
+ * Its heading used to carry an inline onclick whose value held the Phosphor
+ * sprite markup with unescaped double quotes, so the browser cut the attribute
+ * short and the handler was a syntax error: the body could never open. Its
+ * carets were also reversed against the #189 convention (collapsed caret-right,
+ * expanded caret-down).
+ *
+ * Tests the real nodes.js in a vm sandbox:
+ * - the card renders a disclosure <button> (aria-expanded="false",
+ *   aria-controls on the hidden body, caret-right) and no inline handler;
+ * - toggling opens (true, body shown, caret-down) and closes again;
+ * - the delegated click handler toggles from a click inside the button and
+ *   ignores other clicks.
+ *
+ * Usage: node test-issue-254-affinity-debug-toggle.js
+ */
+'use strict';
+const vm = require('vm');
+const fs = require('fs');
+const assert = require('assert');
+
+let passed = 0, failed = 0;
+function test(name, fn) {
+  try { fn(); passed++; console.log('  ✅ ' + name); }
+  catch (e) { failed++; console.log('  ❌ ' + name + ': ' + e.message); }
+}
+
+function loadNodes() {
+  const noop = () => {};
+  const ctx = {
+    window: { addEventListener: noop, removeEventListener: noop, dispatchEvent: noop },
+    document: {
+      readyState: 'complete',
+      createElement: () => ({ id: '', textContent: '', innerHTML: '', style: {} }),
+      head: { appendChild: noop },
+      getElementById: () => null,
+      addEventListener: noop,
+      removeEventListener: noop,
+      querySelectorAll: () => [],
+      querySelector: () => null,
+    },
+    console, Date, Math, Array, Object, String, Number, JSON, RegExp, Error, TypeError,
+    Map, Set, Promise, URLSearchParams, parseInt, parseFloat, isNaN, isFinite,
+    encodeURIComponent, decodeURIComponent,
+    setTimeout: noop, clearTimeout: noop, setInterval: noop, clearInterval: noop,
+    fetch: () => Promise.resolve({ ok: true, json: () => Promise.resolve({}) }),
+    performance: { now: () => Date.now() },
+    localStorage: { getItem: () => null, setItem: noop, removeItem: noop },
+    location: { hash: '' },
+    CustomEvent: class CustomEvent {},
+    requestAnimationFrame: noop,
+    // Globals nodes.js reads at load time.
+    ROLE_COLORS: {}, ROLE_STYLE: {}, TYPE_COLORS: {},
+    getNodeStatus: () => 'active',
+    getHealthThresholds: () => ({ staleMs: 1, degradedMs: 2, silentMs: 3 }),
+    timeAgo: () => '', truncate: (s) => s, escapeHtml: (s) => String(s == null ? '' : s),
+    payloadTypeName: () => '', payloadTypeColor: () => '',
+    registerPage: noop,
+    RegionFilter: { init: noop, onChange: () => noop, getRegionParam: () => '' },
+    debouncedOnWS: () => null, onWS: noop, offWS: noop, debounce: (fn) => fn,
+    api: () => Promise.resolve({}), invalidateApiCache: noop,
+    CLIENT_TTL: { nodeList: 1, nodeDetail: 1, nodeHealth: 1 },
+    initTabBar: noop, getFavorites: () => [], favStar: () => '', bindFavStars: noop,
+    makeColumnsResizable: noop,
+  };
+  vm.createContext(ctx);
+  vm.runInContext(fs.readFileSync('public/nodes.js', 'utf8'), ctx, { filename: 'public/nodes.js' });
+  return ctx.window;
+}
+
+// Attributes of the first start tag in html that matches re.
+function startTag(html, re) {
+  const m = re.exec(html);
+  assert(m, 'no start tag matching ' + re);
+  return m[0];
+}
+function attr(tag, name) {
+  const m = new RegExp('\\s' + name + '(?:="([^"]*)")?(?=[\\s>/])').exec(tag);
+  return m ? (m[1] === undefined ? '' : m[1]) : null;
+}
+function caretsIn(html) {
+  return (html.match(/#ph-caret-[a-z]+/g) || []).map((s) => s.slice(1));
+}
+
+// A minimal DOM for the rendered card: the toggle button, its .toggle-icon and
+// the body it controls, seeded from the rendered markup.
+function cardDom(html) {
+  const btnTag = startTag(html, /<button\b[^>]*class="[^"]*affinity-debug-toggle[^"]*"[^>]*>/);
+  const bodyId = attr(btnTag, 'aria-controls');
+  const bodyTag = startTag(html, new RegExp('<div\\b[^>]*\\sid="' + bodyId + '"[^>]*>'));
+  const iconHtml = /<span class="toggle-icon">([\s\S]*?)<\/span>/.exec(html);
+  assert(iconHtml, 'the button has a .toggle-icon');
+  const body = { id: bodyId, hidden: attr(bodyTag, 'hidden') !== null };
+  const icon = { innerHTML: iconHtml[1] };
+  const doc = { getElementById: (id) => (id === bodyId ? body : null) };
+  const attrs = { 'aria-expanded': attr(btnTag, 'aria-expanded'), 'aria-controls': bodyId };
+  const btn = {
+    ownerDocument: doc,
+    getAttribute: (k) => (k in attrs ? attrs[k] : null),
+    setAttribute: (k, v) => { attrs[k] = String(v); },
+    querySelector: (sel) => (sel === '.toggle-icon' ? icon : null),
+    closest: (sel) => (sel === '.affinity-debug-toggle' ? btn : null),
+  };
+  return { btn, body, icon, attrs };
+}
+
+const w = loadNodes();
+const render = w._nodesRenderAffinityDebugCard;
+const toggle = w._nodesToggleAffinityDebug;
+const onClick = w._nodesOnFullBodyClick;
+
+console.log('\n=== #254 Affinity Debug card: markup ===');
+
+test('nodes.js exposes the card renderer, the toggle and the delegated click handler', () => {
+  assert.strictEqual(typeof render, 'function', '_nodesRenderAffinityDebugCard');
+  assert.strictEqual(typeof toggle, 'function', '_nodesToggleAffinityDebug');
+  assert.strictEqual(typeof onClick, 'function', '_nodesOnFullBodyClick');
+});
+
+const html = typeof render === 'function' ? render() : '';
+
+test('the card is hidden until debugAffinity shows it', () => {
+  const card = startTag(html, /<div\b[^>]*\sid="node-affinity-debug"[^>]*>/);
+  assert(/display:\s*none/.test(attr(card, 'style') || ''), card);
+});
+
+test('no inline event handler anywhere in the card', () => {
+  const handlers = html.match(/\son[a-z]+\s*=/gi);
+  assert(!handlers, 'inline handler(s): ' + JSON.stringify(handlers));
+});
+
+test('the heading holds a disclosure button, collapsed, controlling the hidden body', () => {
+  const h4 = /<h4\b[^>]*>([\s\S]*?)<\/h4>/.exec(html);
+  assert(h4, 'the card has an <h4> heading');
+  const btnTag = startTag(h4[1], /<button\b[^>]*>/);
+  assert.strictEqual(attr(btnTag, 'type'), 'button', btnTag);
+  assert(/\baffinity-debug-toggle\b/.test(attr(btnTag, 'class') || ''), btnTag);
+  assert.strictEqual(attr(btnTag, 'aria-expanded'), 'false', btnTag);
+  const bodyId = attr(btnTag, 'aria-controls');
+  assert(bodyId, 'aria-controls names the body');
+  const bodyTag = startTag(html, new RegExp('<div\\b[^>]*\\sid="' + bodyId + '"[^>]*>'));
+  assert(/\baffinity-debug-body\b/.test(attr(bodyTag, 'class') || ''), bodyTag);
+  assert(attr(bodyTag, 'hidden') !== null, 'the body starts hidden: ' + bodyTag);
+  assert(/Affinity Debug/.test(h4[1]), 'the button is labelled Affinity Debug');
+  assert(/id="affinityDebugContent"/.test(html), 'the body keeps #affinityDebugContent for the loader');
+});
+
+test('collapsed shows exactly one caret, caret-right', () => {
+  const icon = /<span class="toggle-icon">([\s\S]*?)<\/span>/.exec(html);
+  assert(icon, 'the button has a .toggle-icon');
+  assert.deepStrictEqual(caretsIn(icon[1]), ['caret-right']);
+  assert.deepStrictEqual(caretsIn(html), ['caret-right'], 'no other caret in the card');
+});
+
+console.log('\n=== #254 Affinity Debug card: toggle ===');
+
+test('the toggle opens the body: aria-expanded true, caret-down', () => {
+  const d = cardDom(html);
+  assert.strictEqual(toggle(d.btn), true, 'returns the new state');
+  assert.strictEqual(d.attrs['aria-expanded'], 'true');
+  assert.strictEqual(d.body.hidden, false, 'body shown');
+  assert.deepStrictEqual(caretsIn(d.icon.innerHTML), ['caret-down']);
+});
+
+test('a second toggle closes it again: aria-expanded false, caret-right', () => {
+  const d = cardDom(html);
+  toggle(d.btn);
+  assert.strictEqual(toggle(d.btn), false, 'returns the new state');
+  assert.strictEqual(d.attrs['aria-expanded'], 'false');
+  assert.strictEqual(d.body.hidden, true, 'body hidden');
+  assert.deepStrictEqual(caretsIn(d.icon.innerHTML), ['caret-right']);
+});
+
+test('the delegated click handler toggles from a click inside the button', () => {
+  const d = cardDom(html);
+  onClick({ target: { closest: (sel) => d.btn.closest(sel) } });
+  assert.strictEqual(d.attrs['aria-expanded'], 'true');
+  assert.strictEqual(d.body.hidden, false);
+  onClick({ target: { closest: (sel) => d.btn.closest(sel) } });
+  assert.strictEqual(d.attrs['aria-expanded'], 'false');
+  assert.strictEqual(d.body.hidden, true);
+});
+
+test('the delegated click handler ignores clicks elsewhere on the node page', () => {
+  const d = cardDom(html);
+  onClick({ target: { closest: () => null } });
+  onClick({ target: {} });
+  assert.strictEqual(d.attrs['aria-expanded'], 'false');
+  assert.strictEqual(d.body.hidden, true);
+});
+
+console.log(`\n${passed} passed, ${failed} failed`);
+process.exit(failed === 0 ? 0 : 1);
diff --git a/test-packets.js b/test-packets.js
index 19cebc87e..e117c58a0 100644
--- a/test-packets.js
+++ b/test-packets.js
@@ -1198,6 +1198,94 @@ console.log('\n=== packets.js: buildGroupRowHtml ===');
     assert(!html.includes('aria-expanded'), 'a row that cannot expand does not claim a state');
     assert(!/#ph-caret-/.test(expandCell(html)), 'no caret in the expand cell');
   });
+}
+
+// #254: under the mobile breakpoint mobile-page-actions.js (#1461 #7) hides the
+// expand column and turns a click on a group row into select-hash, so the row
+// selects instead of expanding. There the row must not announce aria-expanded,
+// and its action is select-hash for every activation (tap, Enter, Space).
+// Above the breakpoint the row stays the #189 toggle.
+console.log('\n=== packets.js: group row action and aria-expanded by viewport (#254) ===');
+{
+  const ctx = loadPacketsSandbox();
+  loadInCtx(ctx, 'public/mobile-page-actions.js');
+  const api = ctx._packetsTestAPI;
+  const group = {
+    hash: 'mob254', count: 3, latest: '2024-01-01T00:00:00Z',
+    observer_id: null, raw_hex: 'aabbcc', payload_type: 0,
+    route_type: 0, decoded_json: '{}', path_json: '[]',
+    observation_count: 3, observer_count: 2
+  };
+  const header = (html) => /<tr [^>]*>/.exec(html)[0];
+  const atWidth = (w, fn) => {
+    const prev = ctx.window.innerWidth;
+    ctx.window.innerWidth = w;
+    try { return fn(); } finally { ctx.window.innerWidth = prev; }
+  };
+
+  test('#254: at 390 px a group row selects and carries no aria-expanded', () => atWidth(390, () => {
+    const tr = header(api.buildGroupRowHtml(group));
+    assert(tr.includes('data-action="select-hash"'), 'mobile group row selects: ' + tr);
+    assert(!tr.includes('aria-expanded'), 'a row that selects does not announce an expanded state: ' + tr);
+  }));
+
+  test('#254: at 390 px an expanded group row still carries no aria-expanded', () => atWidth(390, () => {
+    api._setExpanded(group.hash, true);
+    try {
+      const tr = header(api.buildGroupRowHtml(group));
+      assert(tr.includes('data-action="select-hash"'), 'mobile group row selects');
+      assert(!tr.includes('aria-expanded'), 'no aria-expanded on mobile, expanded or not');
+    } finally { api._setExpanded(group.hash, false); }
+  }));
+
+  test('#254: at the 600 px breakpoint the row is still the mobile one', () => atWidth(600, () => {
+    const tr = header(api.buildGroupRowHtml(group));
+    assert(tr.includes('data-action="select-hash"') && !tr.includes('aria-expanded'), tr);
+  }));
+
+  test('#254: at 1400 px the group row is the #189 toggle with aria-expanded', () => atWidth(1400, () => {
+    const tr = header(api.buildGroupRowHtml(group));
+    assert(tr.includes('data-action="toggle-select"'), 'desktop group row toggles: ' + tr);
+    assert(tr.includes('aria-expanded="false"'), 'desktop collapsed row: aria-expanded=false');
+    api._setExpanded(group.hash, true);
+    try {
+      assert(header(api.buildGroupRowHtml(group)).includes('aria-expanded="true"'), 'desktop expanded row: aria-expanded=true');
+    } finally { api._setExpanded(group.hash, false); }
+  }));
+
+  test('#254: at 601 px the group row toggles', () => atWidth(601, () => {
+    const tr = header(api.buildGroupRowHtml(group));
+    assert(tr.includes('data-action="toggle-select"') && tr.includes('aria-expanded="false"'), tr);
+  }));
+
+  test('#254: a single-observation row is select-hash without aria-expanded at both widths', () => {
+    const single = Object.assign({}, group, { hash: 'single254', count: 1 });
+    for (const w of [390, 1400]) atWidth(w, () => {
+      const tr = header(api.buildGroupRowHtml(single));
+      assert(tr.includes('data-action="select-hash"') && !tr.includes('aria-expanded'), w + ' px: ' + tr);
+    });
+  });
+}
+
+// Without mobile-page-actions.js there is no #1461 #7 redirect, so a group row
+// toggles at any width.
+console.log('\n=== packets.js: group row without mobile-page-actions.js (#254) ===');
+{
+  const ctx = loadPacketsSandbox();
+  const api = ctx._packetsTestAPI;
+  ctx.window.innerWidth = 390;
+  test('#254: no redirect module loaded, so the row toggles even at 390 px', () => {
+    const tr = /<tr [^>]*>/.exec(api.buildGroupRowHtml({
+      hash: 'nompa', count: 2, latest: '2024-01-01T00:00:00Z', observer_id: null, raw_hex: 'aabb',
+      payload_type: 0, route_type: 0, decoded_json: '{}', path_json: '[]', observation_count: 2, observer_count: 1
+    }))[0];
+    assert(tr.includes('data-action="toggle-select"') && tr.includes('aria-expanded="false"'), tr);
+  });
+}
+
+{
+  const ctx = loadPacketsSandbox();
+  const api = ctx._packetsTestAPI;
 
   test('buildGroupRowHtml shows observation count badge', () => {
     const p = {

From defbefaa8807b8af6957d9632bf01ab1cfb53ef8 Mon Sep 17 00:00:00 2001
From: dborup <kontakt@meshview.dk>
Date: Mon, 5 Oct 2026 12:09:29 +0000
Subject: [PATCH 2/3] test(e2e): Affinity Debug toggle and mobile group-row
 aria-expanded (#254)

Node page with meshcore-affinity-debug=true and /api/debug/affinity
answered by page.route (no request reaches the server, no API key): the
heading button opens and closes the body by click, Enter and Space, with
caret and aria-expanded following. Packets: the seeded #1486 group is
the #189 toggle at 1400 px, select-hash without aria-expanded at 390 px
(tap and Enter open the detail sheet, the group does not expand), and a
1400 -> 390 -> 1400 resize re-renders it. 9 of 12 steps red on master.

Registered in deploy.yml after the #189 caret E2E.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .github/workflows/deploy.yml                  |   1 +
 ...sue-254-affinity-toggle-mobile-aria-e2e.js | 297 ++++++++++++++++++
 2 files changed, 298 insertions(+)
 create mode 100644 test-issue-254-affinity-toggle-mobile-aria-e2e.js

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index e43d15620..954d29a3a 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -444,6 +444,7 @@ jobs:
           BASE_URL=http://localhost:13581 node test-issue-1122-details-row-clamp-e2e.js 2>&1 | tee -a e2e-output.txt
           BASE_URL=http://localhost:13581 node test-issue-1128-packets-layout-e2e.js 2>&1 | tee -a e2e-output.txt
           BASE_URL=http://localhost:13581 node test-issue-189-group-caret-e2e.js 2>&1 | tee -a e2e-output.txt
+          BASE_URL=http://localhost:13581 node test-issue-254-affinity-toggle-mobile-aria-e2e.js 2>&1 | tee -a e2e-output.txt
           BASE_URL=http://localhost:13581 node test-issue-1128-multi-viewport-e2e.js 2>&1 | tee -a e2e-output.txt
           BASE_URL=http://localhost:13581 node test-issue-1136-live-region-e2e.js 2>&1 | tee -a e2e-output.txt
           BASE_URL=http://localhost:13581 node test-live-multibyte-only-e2e.js 2>&1 | tee -a e2e-output.txt
diff --git a/test-issue-254-affinity-toggle-mobile-aria-e2e.js b/test-issue-254-affinity-toggle-mobile-aria-e2e.js
new file mode 100644
index 000000000..b85361ba6
--- /dev/null
+++ b/test-issue-254-affinity-toggle-mobile-aria-e2e.js
@@ -0,0 +1,297 @@
+/**
+ * E2E (#254), follow-up to #248 (#189):
+ *
+ * 1. Node page "Affinity Debug" card (only shown with debugAffinity; here the
+ *    localStorage flag meshcore-affinity-debug=true). Its heading is a
+ *    disclosure button: collapsed it shows caret-right with
+ *    aria-expanded="false" and a hidden body; a click (and Enter / Space)
+ *    opens it (caret-down, "true", body shown) and closes it again.
+ *    /api/debug/affinity is answered by page.route, so no request reaches the
+ *    server and no API key is sent.
+ *
+ * 2. Packets group rows against the fixture's seeded 3-observation group (see
+ *    the "Seed grouped-packet row for #1486" step in deploy.yml):
+ *    - 1400 px: the #189 toggle, data-action="toggle-select" with aria-expanded;
+ *    - 390 px (touch): mobile-page-actions.js (#1461 #7) makes activation
+ *      select, so the row is select-hash without aria-expanded, and a tap or
+ *      Enter opens the detail sheet instead of expanding the group;
+ *    - resizing 1400 → 390 → 1400 re-renders the row for each side.
+ *
+ * Usage: BASE_URL=http://localhost:13581 node test-issue-254-affinity-toggle-mobile-aria-e2e.js
+ * SCREENSHOT_DIR=<dir> also saves screenshots (light, dark, 390 px).
+ */
+'use strict';
+const path = require('path');
+const { chromium } = require('playwright');
+
+const BASE = process.env.BASE_URL || 'http://localhost:13581';
+const SHOTS = process.env.SCREENSHOT_DIR || '';
+const SEED_HASH = 'fae0c9e6d357a814';
+const ROW = `#pktBody tr[data-hash="${SEED_HASH}"]`;
+const CARD = '#node-affinity-debug';
+const BTN = CARD + ' button.affinity-debug-toggle';
+
+// A canned /api/debug/affinity answer, so the test never needs the API key.
+const AFFINITY = {
+  edges: [],
+  resolutions: [],
+  stats: {
+    totalEdges: 0, totalNodes: 0, resolvedCount: 0, ambiguousCount: 0, unresolvedCount: 0,
+    avgConfidence: 0, coldStartCoverage: 0, cacheAge: 'E2E-254 mock', lastRebuild: 'N/A',
+  },
+};
+
+let passed = 0, failed = 0;
+async function step(name, fn) {
+  try { await fn(); passed++; console.log('  ✓ ' + name); }
+  catch (e) { failed++; console.error('  ✗ ' + name + ': ' + e.message); }
+}
+function assert(c, m) { if (!c) throw new Error(m || 'assertion failed'); }
+
+async function shot(page, name, selector) {
+  if (!SHOTS) return;
+  await page.waitForTimeout(500);
+  if (selector) await page.$eval(selector, (el) => el.scrollIntoView({ block: 'center' }));
+  await page.screenshot({ path: path.join(SHOTS, '254-' + name + '.png'), fullPage: false });
+}
+
+// --- 1. Affinity Debug card ------------------------------------------------
+
+async function cardState(page) {
+  return page.evaluate(([card, btnSel]) => {
+    const c = document.querySelector(card);
+    const btn = document.querySelector(btnSel);
+    const body = c && c.querySelector('.affinity-debug-body');
+    const h4 = c && c.querySelector('h4');
+    return {
+      cardVisible: !!c && getComputedStyle(c).display !== 'none',
+      hasButton: !!btn,
+      aria: btn ? btn.getAttribute('aria-expanded') : null,
+      controls: btn ? btn.getAttribute('aria-controls') : null,
+      bodyId: body ? body.id : null,
+      bodyVisible: !!body && body.getClientRects().length > 0,
+      carets: btn ? [...btn.querySelectorAll('.toggle-icon use')].map((u) => (u.getAttribute('href') || '').split('#')[1]) : [],
+      inlineHandlers: c ? [c, ...c.querySelectorAll('*')].filter((el) => [...el.attributes].some((a) => /^on/i.test(a.name))).length : -1,
+      content: (document.getElementById('affinityDebugContent') || { textContent: '' }).textContent,
+      h4Click: h4 ? h4.getAttribute('onclick') : null,
+    };
+  }, [CARD, BTN]);
+}
+
+function assertCard(s, open) {
+  assert(s.cardVisible, 'the card is shown with debugAffinity');
+  assert(s.hasButton, 'the heading holds a button.affinity-debug-toggle');
+  assert(s.inlineHandlers === 0 && s.h4Click === null, 'no inline handlers in the card, got ' + s.inlineHandlers);
+  assert(s.controls && s.controls === s.bodyId, 'aria-controls names the body: ' + s.controls + ' vs ' + s.bodyId);
+  assert(s.aria === String(open), 'aria-expanded should be "' + open + '", got ' + JSON.stringify(s.aria));
+  assert(s.bodyVisible === open, 'body should be ' + (open ? 'shown' : 'hidden'));
+  const caret = open ? 'ph-caret-down' : 'ph-caret-right';
+  assert(s.carets.length === 1 && s.carets[0] === caret, 'toggle should show exactly #' + caret + ', got ' + JSON.stringify(s.carets));
+}
+
+async function affinityCard(browser, theme) {
+  const ctx = await browser.newContext({ viewport: { width: 1400, height: 900 } });
+  await ctx.addInitScript((t) => {
+    localStorage.setItem('meshcore-affinity-debug', 'true');
+    localStorage.setItem('meshcore-theme', t);
+    window.addEventListener('theme-refresh', () => { window.__254ThemeReady = true; }, { once: true });
+  }, theme);
+  const affinityRequests = [];
+  await ctx.route('**/api/debug/affinity**', (route) => {
+    affinityRequests.push({ url: route.request().url(), apiKey: route.request().headers()['x-api-key'] || '' });
+    route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(AFFINITY) });
+  });
+  const page = await ctx.newPage();
+  page.setDefaultTimeout(10000);
+  page.on('pageerror', (e) => console.error('[pageerror]', e.message));
+
+  const res = await page.request.get(BASE + '/api/nodes?limit=1');
+  const pk = ((await res.json()).nodes || [])[0]?.public_key;
+  assert(pk, 'the fixture has a node');
+
+  await page.goto(BASE + '/#/nodes/' + encodeURIComponent(pk), { waitUntil: 'domcontentloaded' });
+  await page.waitForSelector(CARD, { state: 'attached' });
+  // The first theme load re-renders the full node view once (theme-refresh →
+  // loadFullNode), replacing the card. Wait for that, then for the heading to
+  // stay the same element, before clicking.
+  await page.waitForFunction(() => window.__254ThemeReady === true, null, { timeout: 8000 }).catch(() => {});
+  await page.waitForFunction((sel) => {
+    const el = document.querySelector(sel);
+    if (!el) return false;
+    if (window.__254Stable !== el) { window.__254Stable = el; window.__254Since = performance.now(); return false; }
+    return performance.now() - window.__254Since > 500;
+  }, CARD + ' h4', { polling: 100 });
+  return { ctx, page, affinityRequests };
+}
+
+// --- 2. Packets group rows ---------------------------------------------------
+
+async function rowState(page) {
+  return page.evaluate(([sel, hash]) => {
+    const tr = document.querySelector(sel);
+    if (!tr) return null;
+    return {
+      action: tr.getAttribute('data-action'),
+      aria: tr.getAttribute('aria-expanded'),
+      expanded: tr.classList.contains('expanded'),
+      children: document.querySelectorAll('#pktBody tr.group-child[data-parent-hash="' + hash + '"]').length,
+    };
+  }, [ROW, SEED_HASH]);
+}
+
+const isDesktopRow = (s) => !!s && s.action === 'toggle-select' && s.aria === 'false';
+const isMobileRow = (s) => !!s && s.action === 'select-hash' && s.aria === null;
+
+async function waitRow(page, pred, what) {
+  try {
+    await page.waitForFunction(([sel, want]) => {
+      const tr = document.querySelector(sel);
+      if (!tr) return false;
+      const aria = tr.getAttribute('aria-expanded');
+      const action = tr.getAttribute('data-action');
+      return want === 'desktop' ? (action === 'toggle-select' && aria === 'false')
+        : (action === 'select-hash' && aria === null);
+    }, [ROW, what], { timeout: 5000 });
+  } catch (_) { /* reported below with the actual state */ }
+  const s = await rowState(page);
+  assert(pred(s), 'expected the ' + what + ' row, got ' + JSON.stringify(s));
+  return s;
+}
+
+async function openPackets(page) {
+  await page.goto(BASE + '/#/packets?hash=' + SEED_HASH + '&timeWindow=0', { waitUntil: 'domcontentloaded' });
+  await page.waitForSelector(ROW, { timeout: 12000 });
+  await page.waitForTimeout(300);
+}
+
+(async () => {
+  const browser = await chromium.launch({
+    headless: true,
+    executablePath: process.env.CHROMIUM_PATH || undefined,
+    args: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage'],
+  });
+
+  console.log(`\n=== #254 Affinity Debug toggle + mobile group-row aria E2E against ${BASE} ===`);
+
+  {
+    const { ctx, page, affinityRequests } = await affinityCard(browser, 'light');
+
+    await step('Affinity Debug: shown with the flag, collapsed, caret-right, no inline handler', async () => {
+      assertCard(await cardState(page), false);
+      await shot(page, 'affinity-collapsed-light', CARD);
+    });
+
+    await step('Affinity Debug: a click on the heading opens it (caret-down, aria-expanded true)', async () => {
+      await page.click(BTN);
+      const s = await cardState(page);
+      assertCard(s, true);
+      assert(/E2E-254 mock/.test(s.content), 'the body shows the mocked debug data, got ' + JSON.stringify(s.content.slice(0, 120)));
+      await shot(page, 'affinity-expanded-light', CARD);
+    });
+
+    await step('Affinity Debug: a second click closes it (caret-right, aria-expanded false)', async () => {
+      await page.click(BTN);
+      assertCard(await cardState(page), false);
+    });
+
+    await step('Affinity Debug: Enter opens and Space closes it from the keyboard', async () => {
+      await page.focus(BTN);
+      await page.keyboard.press('Enter');
+      assertCard(await cardState(page), true);
+      await page.keyboard.press('Space');
+      assertCard(await cardState(page), false);
+    });
+
+    await step('Affinity Debug: /api/debug/affinity was answered by the mock, without an API key', async () => {
+      assert(affinityRequests.length >= 1, 'the card requested its data');
+      assert(affinityRequests.every((r) => r.apiKey === ''), 'no API key sent: ' + JSON.stringify(affinityRequests));
+    });
+    await ctx.close();
+  }
+
+  {
+    const { ctx, page } = await affinityCard(browser, 'dark');
+    await step('Affinity Debug (dark): toggles the same way', async () => {
+      assertCard(await cardState(page), false);
+      await shot(page, 'affinity-collapsed-dark', CARD);
+      await page.click(BTN);
+      assertCard(await cardState(page), true);
+      await shot(page, 'affinity-expanded-dark', CARD);
+      await page.click(BTN);
+      assertCard(await cardState(page), false);
+    });
+    await ctx.close();
+  }
+
+  {
+    const ctx = await browser.newContext({ viewport: { width: 1400, height: 900 } });
+    const page = await ctx.newPage();
+    page.setDefaultTimeout(10000);
+    page.on('pageerror', (e) => console.error('[pageerror]', e.message));
+
+    await step('1400 px: the group row is the #189 toggle with aria-expanded', async () => {
+      await openPackets(page);
+      await waitRow(page, isDesktopRow, 'desktop');
+      await page.click(ROW + ' td.col-expand');
+      await page.waitForFunction((sel) => document.querySelector(sel).classList.contains('expanded'), ROW, { timeout: 8000 });
+      const s = await rowState(page);
+      assert(s.aria === 'true' && s.children > 0, 'expanded on desktop: ' + JSON.stringify(s));
+      await page.click(ROW + ' td.col-expand');
+      await page.waitForFunction((sel) => !document.querySelector(sel).classList.contains('expanded'), ROW, { timeout: 8000 });
+    });
+
+    await step('resize 1400 → 390: the row becomes select-hash without aria-expanded', async () => {
+      await page.setViewportSize({ width: 390, height: 844 });
+      await waitRow(page, isMobileRow, 'mobile');
+    });
+
+    await step('resize 390 → 1400: the row is the toggle with aria-expanded again', async () => {
+      await page.setViewportSize({ width: 1400, height: 900 });
+      await waitRow(page, isDesktopRow, 'desktop');
+    });
+    await ctx.close();
+  }
+
+  {
+    const ctx = await browser.newContext({ viewport: { width: 390, height: 844 }, isMobile: true, hasTouch: true });
+    const page = await ctx.newPage();
+    page.setDefaultTimeout(10000);
+    page.on('pageerror', (e) => console.error('[pageerror]', e.message));
+
+    await step('390 px: the group row is select-hash and carries no aria-expanded', async () => {
+      await openPackets(page);
+      await waitRow(page, isMobileRow, 'mobile');
+      await shot(page, 'packets-390-row');
+    });
+
+    await step('390 px: a tap opens the detail sheet and does not expand the group', async () => {
+      await page.tap(ROW + ' td.col-time');
+      await page.waitForFunction(() => {
+        const s = document.getElementById('mobileDetailSheet');
+        return !!s && s.classList.contains('open');
+      }, null, { timeout: 8000 });
+      const s = await rowState(page);
+      assert(s && !s.expanded && s.children === 0, 'the group did not expand: ' + JSON.stringify(s));
+      assert(isMobileRow(s), 'still the mobile row after the re-render: ' + JSON.stringify(s));
+      await shot(page, 'packets-390-sheet');
+      await page.click('#mobileSheetClose').catch(() => {});
+    });
+
+    await step('390 px: Enter on the focused row selects too, it does not expand', async () => {
+      await page.evaluate(() => { const s = document.getElementById('mobileDetailSheet'); if (s) s.classList.remove('open'); });
+      await page.focus(ROW);
+      await page.keyboard.press('Enter');
+      await page.waitForFunction(() => {
+        const s = document.getElementById('mobileDetailSheet');
+        return !!s && s.classList.contains('open');
+      }, null, { timeout: 8000 });
+      const s = await rowState(page);
+      assert(s && !s.expanded && s.children === 0, 'Enter did not expand the group: ' + JSON.stringify(s));
+    });
+    await ctx.close();
+  }
+
+  await browser.close();
+  console.log(`\n${passed} passed, ${failed} failed`);
+  process.exit(failed === 0 ? 0 : 1);
+})().catch((e) => { console.error(e); process.exit(1); });

From 6f09368f12ba8942f33937773a5737ad8f29d50a Mon Sep 17 00:00:00 2001
From: dborup <kontakt@meshview.dk>
Date: Mon, 5 Oct 2026 12:12:02 +0000
Subject: [PATCH 3/3] fix(ui): Affinity Debug toggle opens again; mobile group
 rows select without aria-expanded (#254)

nodes.js: the Affinity Debug heading's inline onclick held the Phosphor
sprite markup with unescaped double quotes, so the attribute was cut
short and the handler was a syntax error; the body never opened. The
card now comes from renderAffinityDebugCard(): the heading holds a
<button aria-expanded aria-controls> for the body (hidden attribute),
with caret-right collapsed and caret-down expanded (the #189
convention). One delegated click listener on #nodeFullBody, wired once
in init() because loadFullNode re-renders on theme-refresh. style.css
keeps the h4 look for the button with inherited font and colour; no
new colours.

packets.js: under the mobile breakpoint mobile-page-actions.js (#1461
#7) turns a group-row click into select-hash, but the row still said
aria-expanded, and Enter/Space still expanded it. buildGroupRowHtml now
derives data-action and aria-expanded from one flag: under the
breakpoint the row is select-hash with no aria-expanded, so tap, Enter
and Space all select. mobile-page-actions.js exports isMobile() as
window.MobilePageActions so the breakpoint stays in one place; its
redirect is unchanged. A debounced resize listener re-renders the
visible rows only when the breakpoint is crossed. Desktop rows are
unchanged from #248.

Also fixes the caret helper in test-issue-254-affinity-debug-toggle.js,
which kept the "ph-" prefix.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/mobile-page-actions.js           |  3 ++
 public/nodes.js                         | 45 +++++++++++++++++++++----
 public/packets.js                       | 33 +++++++++++++++++-
 public/style.css                        |  8 +++++
 test-issue-254-affinity-debug-toggle.js |  2 +-
 5 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/public/mobile-page-actions.js b/public/mobile-page-actions.js
index 2f0c08d17..2e23c802a 100644
--- a/public/mobile-page-actions.js
+++ b/public/mobile-page-actions.js
@@ -7,6 +7,9 @@
   const SLOT_ID = 'navPageActions';
 
   function isMobile() { return window.innerWidth <= MOBILE_BP; }
+  // #254: packets.js renders a group row as select-hash under this breakpoint,
+  // where the #1461 #7 redirect below makes activating it select.
+  window.MobilePageActions = { isMobile: isMobile };
 
   function ensureSlot() {
     let slot = document.getElementById(SLOT_ID);
diff --git a/public/nodes.js b/public/nodes.js
index 516220da8..4928620e9 100644
--- a/public/nodes.js
+++ b/public/nodes.js
@@ -548,6 +548,38 @@
 
   // ─── End neighbor helpers ─────────────────────────────────────────────────
 
+  // #254: the Affinity Debug card (only shown with debugAffinity). Its heading is
+  // a disclosure button, with caret-right when collapsed and caret-down when
+  // expanded (#189), and aria-expanded on the button follows the body. The click
+  // is handled by onFullBodyClick, delegated from #nodeFullBody.
+  function affinityDebugCaretHtml(expanded) {
+    return '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-caret-' + (expanded ? 'down' : 'right') + '"/></svg>';
+  }
+
+  function renderAffinityDebugCard() {
+    return `<div class="node-full-card" id="node-affinity-debug" style="display:none">
+          <h4><button type="button" class="affinity-debug-toggle" aria-expanded="false" aria-controls="affinityDebugBody"><span class="toggle-icon">${affinityDebugCaretHtml(false)}</span> <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-magnifying-glass"/></svg> Affinity Debug</button></h4>
+          <div class="affinity-debug-body" id="affinityDebugBody" hidden>
+            <div id="affinityDebugContent"><div class="text-muted" style="padding:8px"><span class="spinner"></span> Loading debug data…</div></div>
+          </div>
+        </div>`;
+  }
+
+  function toggleAffinityDebug(btn) {
+    const expanded = btn.getAttribute('aria-expanded') !== 'true';
+    btn.setAttribute('aria-expanded', String(expanded));
+    const body = btn.ownerDocument.getElementById(btn.getAttribute('aria-controls'));
+    if (body) body.hidden = !expanded;
+    const icon = btn.querySelector('.toggle-icon');
+    if (icon) icon.innerHTML = affinityDebugCaretHtml(expanded);
+    return expanded;
+  }
+
+  function onFullBodyClick(e) {
+    const btn = e.target.closest && e.target.closest('.affinity-debug-toggle');
+    if (btn) toggleAffinityDebug(btn);
+  }
+
   let directNode = null; // set when navigating directly to #/nodes/:pubkey
 
   let regionChangeHandler = null;
@@ -570,6 +602,9 @@
         </div>
       </div>`;
       document.getElementById('nodeBackBtn').addEventListener('click', () => { location.hash = '#/nodes'; });
+      // Wired once here: loadFullNode re-renders the body (theme-refresh) and
+      // would stack listeners.
+      document.getElementById('nodeFullBody').addEventListener('click', onFullBodyClick);
       loadFullNode(directNode);
       // Escape to go back to nodes list
       document.addEventListener('keydown', function nodesEsc(e) {
@@ -916,12 +951,7 @@
           <div id="fullNeighborsContent"><div class="text-muted" style="padding:8px"><span class="spinner"></span> Loading neighbors…</div></div>
         </div>
 
-        <div class="node-full-card" id="node-affinity-debug" style="display:none">
-          <h4 style="cursor:pointer" onclick="var body=this.parentElement.querySelector('.affinity-debug-body'); var hidden=body.style.display==='none'; body.style.display=hidden?'block':'none'; this.querySelector('.toggle-icon').innerHTML=body.style.display==='none'?'<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-caret-down"/></svg>':'<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-caret-up"/></svg>'"><span class="toggle-icon"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-caret-down"/></svg></span> <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-magnifying-glass"/></svg> Affinity Debug</h4>
-          <div class="affinity-debug-body" style="display:none">
-            <div id="affinityDebugContent"><div class="text-muted" style="padding:8px"><span class="spinner"></span> Loading debug data…</div></div>
-          </div>
-        </div>
+        ${renderAffinityDebugCard()}
 
         <div class="node-full-card" id="fullPathsSection">
           <h4>Paths Through This Node</h4>
@@ -2148,6 +2178,9 @@
   window._nodesRenderNodeTimestampText = renderNodeTimestampText;
   window._nodesGetStatusInfo = getStatusInfo;
   window._nodesGetStatusTooltip = getStatusTooltip;
+  window._nodesRenderAffinityDebugCard = renderAffinityDebugCard;
+  window._nodesToggleAffinityDebug = toggleAffinityDebug;
+  window._nodesOnFullBodyClick = onFullBodyClick;
 
   // #862: Expose search filter logic for testing
   window._nodesMatchesSearch = function(node, query) {
diff --git a/public/packets.js b/public/packets.js
index a06d8028d..826c3cd65 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -2404,6 +2404,29 @@
     }
   }
 
+  // #254: mobile-page-actions.js owns the mobile breakpoint and the #1461 #7
+  // redirect of a group-row click to select-hash. Without it nothing redirects.
+  function groupRowSelectsOnActivate() {
+    return !!(window.MobilePageActions && window.MobilePageActions.isMobile());
+  }
+
+  // A group row's action and aria-expanded depend on that breakpoint, so a
+  // resize that crosses it (e.g. a phone rotating) re-renders the visible rows.
+  let _groupRowsSelect = false;
+  let _groupRowModeTimer = null;
+  function _onGroupRowModeResize() {
+    clearTimeout(_groupRowModeTimer);
+    _groupRowModeTimer = setTimeout(() => {
+      const selects = groupRowSelectsOnActivate();
+      if (selects === _groupRowsSelect) return;
+      _groupRowsSelect = selects;
+      if (!_displayGrouped) return;
+      _lastVisibleStart = -1;
+      _lastVisibleEnd = -1;
+      renderVisibleRows();
+    }, 150);
+  }
+
   // Build HTML for a single grouped packet row
   function buildGroupRowHtml(p, entryIdx = -1) {
     const isExpanded = expandedHashes.has(p.hash);
@@ -2440,8 +2463,12 @@
     // channels.js, network-digest.js, analytics.js and route-view.js. The row that
     // toggles reports its state in aria-expanded; a single-observation row cannot
     // expand, so it has neither.
+    // #254: under the mobile breakpoint activating a group row selects it (#1461
+    // #7, the expand column is hidden there), so the row is select-hash and
+    // claims no expanded state.
+    const _grpToggles = !isSingle && !groupRowSelectsOnActivate();
     const _grpCaret = isSingle ? '' : '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-caret-' + (isExpanded ? 'down' : 'right') + '"/></svg>';
-    let html = `<tr class="${isSingle ? '' : 'group-header'} ${isExpanded ? 'expanded' : ''}" data-hash="${p.hash}" data-action="${isSingle ? 'select-hash' : 'toggle-select'}" data-value="${p.hash}" data-entry-idx="${entryIdx}" tabindex="0" role="row"${isSingle ? '' : ' aria-expanded="' + isExpanded + '"'}${_grpStyle ? ' style="' + _grpStyle + '"' : ''}>
+    let html = `<tr class="${isSingle ? '' : 'group-header'} ${isExpanded ? 'expanded' : ''}" data-hash="${p.hash}" data-action="${_grpToggles ? 'toggle-select' : 'select-hash'}" data-value="${p.hash}" data-entry-idx="${entryIdx}" tabindex="0" role="row"${_grpToggles ? ' aria-expanded="' + isExpanded + '"' : ''}${_grpStyle ? ' style="' + _grpStyle + '"' : ''}>
           <td class="col-expand" style="text-align:center;cursor:pointer">${_grpCaret}</td>
           <td class="col-region">${groupRegion ? `<span class="badge-region">${groupRegion}</span>` : '—'}</td>
           <td class="col-time">${renderTimestampCell(p.latest)}</td>
@@ -4257,6 +4284,8 @@
       _themeRefreshHandler = () => { if (typeof renderTableRows === 'function') renderTableRows(); };
       window.addEventListener('theme-refresh', _themeRefreshHandler);
       window.addEventListener('storage', _onStorageChange);
+      _groupRowsSelect = groupRowSelectsOnActivate();
+      window.addEventListener('resize', _onGroupRowModeResize);
       var result = init(app, routeParam);
       // Install channel color picker on packets table (M2, #271)
       if (window.ChannelColorPicker) window.ChannelColorPicker.installPacketsTable();
@@ -4265,6 +4294,8 @@
     destroy: function() {
       if (_themeRefreshHandler) { window.removeEventListener('theme-refresh', _themeRefreshHandler); _themeRefreshHandler = null; }
       window.removeEventListener('storage', _onStorageChange);
+      window.removeEventListener('resize', _onGroupRowModeResize);
+      clearTimeout(_groupRowModeTimer);
       return destroy();
     }
   });
diff --git a/public/style.css b/public/style.css
index 6c2007117..1990f320d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2860,6 +2860,14 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
   margin-bottom: 12px; border: 1px solid var(--border);
 }
 .node-full-card h4 { margin: 0 0 10px; font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
+/* #254: the Affinity Debug heading is a disclosure button. It keeps the h4
+ * look and spans the heading, so the whole row toggles as before. */
+.node-full-card h4 .affinity-debug-toggle {
+  display: flex; align-items: center; gap: 6px; width: 100%;
+  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
+  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: start;
+}
+@media (pointer: coarse) { .node-full-card h4 .affinity-debug-toggle { min-height: 48px; } }
 .node-activity-list { display: flex; flex-direction: column; gap: 6px; }
 .node-activity-item {
   display: flex; gap: 8px; font-size: 13px; padding: 6px 0;
diff --git a/test-issue-254-affinity-debug-toggle.js b/test-issue-254-affinity-debug-toggle.js
index 17eeb95e2..7e388e0ae 100644
--- a/test-issue-254-affinity-debug-toggle.js
+++ b/test-issue-254-affinity-debug-toggle.js
@@ -82,7 +82,7 @@ function attr(tag, name) {
   return m ? (m[1] === undefined ? '' : m[1]) : null;
 }
 function caretsIn(html) {
-  return (html.match(/#ph-caret-[a-z]+/g) || []).map((s) => s.slice(1));
+  return (html.match(/#ph-caret-[a-z]+/g) || []).map((s) => s.slice('#ph-'.length));
 }
 
 // A minimal DOM for the rendered card: the toggle button, its .toggle-icon and