create-walle 0.10.0 → 0.10.2

package/template/coding-task-manager/public/js/app/machines-page.js

@@ -0,0 +1,1252 @@
+// public/js/app/machines-page.js — WP-5 (docs/machine-pool-picker-pairing-dashboard-2026-10-24.html
+// §5 D-4/D-9/D-12/D-14, P-8, §6.4 client block, §8 WP-5, §9 S-18/S-19).
+//
+// The Machines page replaces Settings → Machines in place (D-14): nav target `machines`, hash
+// `#machines`, and index.html's hash router aliases `#setup&tab=machines` onto it. This Mac is the
+// first card; every registry member follows.
+//
+//   * Every setting on a card is MACHINE-OWNED (D-4 rev 2): rename / favorite / hide POST
+//     /api/machine-self on the machine they describe (`?machine=<id>` for a member), never a local
+//     pref — so two primaries and a phone agree. Nothing in this file writes localStorage.
+//   * Live numbers come from the box's own host samples (D-12): one `GET /api/host/stats?since=…`
+//     per reachable row (the response carries `latest` AND the retained history) and one for This
+//     Mac. Each metric is ONE `<path>` whose gaps are `M` moves (AC-5b).
+//   * ONE poll timer (60 s) runs only while the panel is visible. It is cleared when the panel hides
+//     and when document.hidden turns true (AC-5f). `_machinesPageTimers` is the seam a test injects.
+//
+// Plain classic script, like public/js/app/worktrees-panel.js: the top-level statements are function
+// declarations and literal `var`s, and it is deliberately NOT strict mode.
+
+var MACHINES_PAGE_POLL_MS = 60000;
+var MACHINES_PAGE_HISTORY_MS = 24 * 60 * 60 * 1000;
+// D-12: the hub re-reads a box's sample at most once per 60 s, so a sample older than three
+// refreshes is LABELLED, never shown as the box's current number. WP-6: the window itself is the
+// shared MACHINE_STATS_STALE_MS (public/js/machine-pool-shared.js) — one number, every reader.
+// The agent labels ("Claude"/"Codex") are the shared MACHINE_AGENT_LABELS in the same file.
+
+var _machinesPageState = {
+  machines: [],
+  hubNetworkSuspect: false,
+  self: null,               // /api/host/stats for This Mac: { latest, samples }
+  selfSettings: null,       // /api/machine-self: { displayName, favorite, hidden }
+  selfInstanceId: '',
+  histories: Object.create(null),
+  origins: [],              // the P-7 dial cache (ctm.pool.origins) — which members this device reached
+  loading: false,
+  loaded: false,
+  error: '',
+};
+
+// AC-5f's seam: the panel's timer and clock are injectable so a test can prove the timer stops
+// without sleeping. `now` is never called from a hidden path — every caller passes it in or reads it
+// here, so the tested paths are clock-free.
+var _machinesPageTimers = {
+  set: function (fn, ms) { return setTimeout(fn, ms); },
+  clear: function (id) { if (id != null) clearTimeout(id); },
+  now: function () { return Date.now(); },
+};
+var _machinesPagePollTimer = null;
+var _machinesPageVisibilityBound = false;
+// The nodes openAddMachineDialog() built, so the dialog is testable without a real event loop.
+var _machinesPageDialog = null;
+
+function machinesPageSetTimers(next) {
+  if (!next) return _machinesPageTimers;
+  if (typeof next.set === 'function') _machinesPageTimers.set = next.set;
+  if (typeof next.clear === 'function') _machinesPageTimers.clear = next.clear;
+  if (typeof next.now === 'function') _machinesPageTimers.now = next.now;
+  return _machinesPageTimers;
+}
+
+function machinesPageNow() {
+  var value = Number(_machinesPageTimers.now());
+  return Number.isFinite(value) ? value : 0;
+}
+
+// The one escape helper the app ships (public/js/core/01-util.js, loaded before this file). Never a
+// raw innerHTML of server data.
+function mEsc(value) {
+  if (typeof escHtml === 'function') return escHtml(value);
+  return String(value == null ? '' : value)
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+// ── request plumbing ────────────────────────────────────────────────────────────────────────────
+// Moved from public/js/core/session-commands.js with the Settings card (S-18): ONE definition of the
+// machine-write headers, owned by the page that makes the writes.
+function _machinesHeaders() {
+  var headers = { 'Content-Type': 'application/json' };
+  if (typeof state !== 'undefined' && state && state.clientId) headers['X-CTM-Client-Id'] = state.clientId;
+  return headers;
+}
+
+function machinesPageToken() {
+  return (typeof state !== 'undefined' && state && state.token) ? String(state.token) : '';
+}
+
+// The app's convention for a mutating call (see public/js/app/worktrees-panel.js): the token rides
+// the query string, the content type rides the headers.
+function machinesPageUrl(path, extra) {
+  var query = 'token=' + encodeURIComponent(machinesPageToken()) + (extra ? '&' + extra : '');
+  return path + (path.indexOf('?') === -1 ? '?' : '&') + query;
+}
+
+function machinesPageServerError(payload, status) {
+  if (payload && typeof payload === 'object') {
+    if (payload.error) return String(payload.error);
+    if (payload.code) return String(payload.code);
+  }
+  return 'HTTP ' + status;
+}
+
+function machinesPageJson(path, options) {
+  var opts = options || {};
+  return fetch(path, {
+    method: opts.method || 'GET',
+    headers: opts.body ? _machinesHeaders() : undefined,
+    body: opts.body ? JSON.stringify(opts.body) : undefined,
+    cache: 'no-store',
+  }).then(function (res) {
+    return res.json().catch(function () { return null; }).then(function (data) {
+      return { ok: res.ok, status: res.status, data: data };
+    });
+  });
+}
+
+function machinesPageToast(text) {
+  var message = String(text || '');
+  var panel = document.getElementById('machines-panel');
+  var node = panel ? panel.querySelector('.machines-page-toast') : null;
+  if (node) { node.textContent = message; node.classList.toggle('show', !!message); }
+  if (typeof toast === 'function') toast(message);
+  return message;
+}
+
+// ── sparkline (AC-5b) ───────────────────────────────────────────────────────────────────────────
+// WP-6: sparklineSvg and the series/fact formatters below are the ONE shared copy in
+// public/js/machine-pool-shared.js (the phone renders the same sparks and the same facts). Each name
+// stays here as a thin delegate so the page's own call sites, and any spec that names them, keep
+// working.
+function machinesCpuSeries(history) {
+  return machineCpuSeries(history);
+}
+
+function machinesMemSeries(history) {
+  return machineMemSeries(history);
+}
+
+function machinesHistoryRows(history) {
+  return machineHistoryRows(history);
+}
+
+function machinesLastValue(series) {
+  return machineLastValue(series);
+}
+
+// ── formatting ──────────────────────────────────────────────────────────────────────────────────
+// WP-6: the card's "how long ago" line is the shared pair machineHealthLabel / machineLastSeenText
+// (public/js/machine-pool-shared.js), the SAME two functions the phone card calls, so a phone card
+// and a desktop card can never disagree about a box's state or when it was last seen.
+
+function machinesFormatBytes(value) {
+  return machineFormatBytes(value);
+}
+
+function machinesFormatPct(value) {
+  return machineFormatPct(value);
+}
+
+function machinesAgentText(agents) {
+  return machineAgentText(agents);
+}
+
+function machinesTaskLine(tasks) {
+  return machineTaskLine(tasks);
+}
+
+function machinesGpuText(gpu) {
+  return machineGpuText(gpu);
+}
+
+function machinesCredentialBadge(machine, isSelf) {
+  var credential = String((machine && machine.peerCredential) || (isSelf ? 'self' : 'missing'));
+  if (isSelf) return { html: '<span class="mpc-cred" data-cred="self" title="This Mac runs the sessions itself">This Mac</span>', action: '' };
+  if (credential === 'pool') {
+    return { html: '<span class="mpc-cred" data-cred="pool" title="Dialled with the shared pool secret">Pool</span>', action: '' };
+  }
+  if (credential === 'env') {
+    // P-8: an env-token box is a one-way member. "Join pool" runs D-9 against it.
+    return {
+      html: '<span class="mpc-cred" data-cred="env" title="Legacy env token — a one-way member">Env token</span>',
+      action: '<button type="button" class="mpc-btn" onclick="machinesPageJoinPool('
+        + mEsc(JSON.stringify(String((machine && machine.instanceId) || ''))) + ','
+        + mEsc(JSON.stringify(String((machine && machine.url) || ''))) + ')">Join pool</button>',
+    };
+  }
+  return { html: '<span class="mpc-cred" data-cred="missing" title="No credential this hub can dial it with">No credential</span>', action: '' };
+}
+
+function machinesStatBlock(label, value) {
+  if (!value) return '';
+  return '<div class="mpc-fact"><dt>' + mEsc(label) + '</dt><dd>' + value + '</dd></div>';
+}
+
+// ── P-7 "Sign in to <member> too" ───────────────────────────────────────────────────────────────
+// The phone's twin of this row is public/m/machines.js `signInRowHtml`. Passkeys are pinned to an
+// exact hostname (rpId = hostname), so a member can only be signed in from ITS OWN origin; this row
+// is the one-tap way there. `ctm.pool.origins` is the same dial cache public/m/pool-failover.js
+// keeps — the only client-side machine state, never a credential, never a machine setting (D-4).
+function machinesPageReadPoolOrigins() {
+  var raw = null;
+  try {
+    raw = window.localStorage.getItem('ctm.pool.origins');
+  } catch (error) {
+    return []; // HANDLE: private mode / blocked storage — no dial cache means "never reached", which is the safe default
+  }
+  if (!raw) return [];
+  var parsed = null;
+  try {
+    parsed = JSON.parse(raw);
+  } catch (error) {
+    return []; // HANDLE: a corrupted cache is dropped — the page still renders, the row just shows
+  }
+  return Array.isArray(parsed) ? parsed : [];
+}
+
+// '' when the member has no public https origin, or when this device has already reached it.
+function machinesPageSignInRowHtml(machine) {
+  var origin = machinePoolSignInOrigin(machine, _machinesPageState.origins);
+  if (!origin) return '';
+  var name = String((machine && (machine.displayName || machine.hostname || machine.instanceId)) || origin);
+  return '<button type="button" class="mpc-btn mpc-signin-row"'
+    + ' title="Opens ' + mEsc(origin + '/m/') + ' — a passkey is pinned to that hostname, so it signs in there"'
+    + ' onclick="machinesPageSignInToo(' + mEsc(JSON.stringify(origin)) + ')">'
+    + mEsc('Sign in to ' + name + ' too') + '</button>';
+}
+
+// Tapping the row navigates the whole tab: the member's own origin runs its own passkey flow.
+function machinesPageSignInToo(origin) {
+  var target = String(origin || '').trim().replace(/\/+$/, '');
+  if (!/^https:\/\/[^/?#]+$/i.test(target)) {
+    machinesPageToast('sign_in_origin_unavailable');
+    return false;
+  }
+  window.location.assign(target + '/m/');
+  return true;
+}
+
+// ── WP-3 sign-in: a coding agent ON a pooled machine, signed in from HERE ───────────────────────
+// docs/remote-agent-sign-in-from-hub-browser-2026-10-25.html §5 D-7/D-9, §6, §9 S-13/S-14.
+// The three provider routes are forwarded to the box through the existing `?machine=<id>` proxy, so
+// the user never opens the box's own URL (a phone never could). The AI Providers card helper is
+// reused verbatim with `machineId`, which is also why "Show sign-in tab" is never offered here: the
+// sign-in tab lives on the box, and there is no local session for this page to activate.
+var MACHINES_PAGE_AGENTS = ['claude', 'codex'];
+var MACHINES_PAGE_AGENT_PRESETS = {
+  claude: { id: 'claude-code', cli: 'claude', name: 'Claude Code' },
+  codex: { id: 'codex', cli: 'codex', name: 'Codex' },
+};
+
+// Only a `signed_out` verdict earns a sign-in affordance — `signed_in` and `unknown` do not
+// (P3 Unknown != Dead: a box that never answered is never told it is signed out).
+function machinesPageSignedOutAgents(machine) {
+  var agents = machine && machine.agents;
+  if (!agents || typeof agents !== 'object') return [];
+  return MACHINES_PAGE_AGENTS.filter(function (agent) { return String(agents[agent] || '') === 'signed_out'; });
+}
+
+function machinesPageAgentPreset(agent) {
+  return MACHINES_PAGE_AGENT_PRESETS[String(agent || '')] || null;
+}
+
+// The card's own action block for one machine+agent, machine-scoped. '' while no flow is open — the
+// row's own Sign in button is the affordance then (never a second one).
+function machinesPageSignInBlockHtml(instanceId, agent, payload) {
+  if (typeof _modelsProviderLoginActionsHtml !== 'function') return '';
+  var preset = machinesPageAgentPreset(agent);
+  if (!preset || !instanceId) return '';
+  var providerId = String(agent) === 'codex' ? 'codex' : 'claude';
+  var entry = ((payload && payload.providers) || {})[providerId] || null;
+  return _modelsProviderLoginActionsHtml(preset, entry ? entry.flow : null, { machineId: String(instanceId) });
+}
+
+// E (fix round 2): the LAST machine-scoped login-state payload per '<instanceId>-<agent>'. The page's
+// 60 s poll calls renderMachinesPage() twice, which rebuilds every card from scratch — and the page
+// keeps no per-machine login state of its own, so without this cache an open sign-in (the link, the
+// device code, the code box, its draft, and the row button's "Opening..." state) was wiped every
+// minute, mid-sign-in. `machinesPageRenderSignInBlock` fills this on every 2 s tick; the closed-flow
+// branch deletes the key, so the next full render paints the plain row again.
+var _machinesPageSignInPayloads = {};
+
+// One Sign in button plus the block it fills, per signed-out agent, directly under the Agents fact.
+// The block carries `data-machine-agent` as well as its own `<id>-<agent>` key: the delegated
+// handlers read the AGENT off the block and the INSTANCE ID off the card's `data-machine-id`
+// (an instance id is uuid-like and itself contains hyphens, so the key is never split).
+//
+// E.2: when a tick has already delivered this machine+agent's payload, the block is painted from it
+// here instead of staying empty, and an OPEN flow renders the row button as the disabled "Opening..."
+// the POST set (`_modelsProviderLoginStart`'s exact label) — otherwise the 60 s re-render hands back
+// an enabled "Sign in" and a second click races the flow that is already running.
+function machinesPageSignInHtml(machine) {
+  var id = String((machine && machine.instanceId) || '');
+  if (!id) return '';
+  return machinesPageSignedOutAgents(machine).map(function (agent) {
+    var key = id + '-' + agent;
+    var cached = _machinesPageSignInPayloads[key] || null;
+    var entry = cached ? (((cached.providers || {})[machinesPageSignInProviderId(agent)]) || null) : null;
+    var opening = !!(entry && entry.flow && machinesPageSignInFlowIsOpen(entry.flow));
+    return '<div class="mpc-fact mpc-signin" data-machine-signin-for="' + mEsc(key) + '">'
+      + '<button type="button" class="mpc-btn mpc-signin-btn" data-machine-sign-in="' + mEsc(id) + '"'
+      + ' data-machine-agent="' + mEsc(agent) + '"'
+      + (opening ? ' disabled' : '')
+      + ' onclick="machinesPageSignIn(' + mEsc(JSON.stringify(id)) + ',' + mEsc(JSON.stringify(agent)) + ',this)">'
+      + (opening ? 'Opening...' : 'Sign in') + '</button>'
+      + '<div class="mpc-signin-block" data-machine-sign-in-block="' + mEsc(key) + '"'
+      + ' data-machine-agent="' + mEsc(agent) + '">'
+      + (cached ? machinesPageSignInBlockHtml(id, agent, cached) : '')
+      + '</div>'
+      + '</div>';
+  }).join('');
+}
+
+// The provider id a card agent maps to. One spelling, used by the click, the submit and the
+// fallback transport (a second inline copy is how the two drift).
+function machinesPageSignInProviderId(agent) {
+  return String(agent) === 'codex' ? 'codex' : 'claude';
+}
+
+// The statuses that mean "the box is still running this sign-in". The card helper is the authority
+// when this bundle has it; the fallback is the same three the phone module and the broker use, so a
+// unit slice of this page can still tell an open flow from a finished one.
+var MACHINES_PAGE_SIGN_IN_OPEN_STATUSES = ['starting', 'running', 'awaiting_user'];
+function machinesPageSignInFlowIsOpen(flow) {
+  if (typeof _modelsProviderLoginFlowIsOpen === 'function') return !!_modelsProviderLoginFlowIsOpen(flow);
+  return !!flow && MACHINES_PAGE_SIGN_IN_OPEN_STATUSES.indexOf(String(flow.status || '')) >= 0;
+}
+
+// WP-2 fix (A) on the Machines page: what a login-state payload contributes to the block. The card's
+// own fingerprint is used when this bundle has it (it drops `account.checkedAt`, the probe's
+// timestamp, which is not rendered anywhere); the JSON fallback keeps a unit slice honest.
+function machinesPageSignInRenderKey(payload) {
+  if (typeof _modelsProviderLoginRenderKey === 'function') return String(_modelsProviderLoginRenderKey(payload));
+  try { return JSON.stringify(payload === undefined ? null : payload); } catch (e) { return String(payload); }
+}
+
+// The draft the repaint must not destroy: the typed code (with caret and focus) and the refusal copy.
+// This is the defect WP-2 fixed on the card — between two poll ticks only `account.checkedAt` moves,
+// and replacing the input mid-typing drops the value, the caret and the focus.
+function machinesPageCaptureSignInDraft(node) {
+  var code = node && typeof node.querySelector === 'function' ? node.querySelector('[data-sign-in-code]') : null;
+  var error = node && typeof node.querySelector === 'function' ? node.querySelector('[data-sign-in-error]') : null;
+  var doc = (node && node.ownerDocument) || (typeof document !== 'undefined' ? document : null);
+  return {
+    value: code && code.value !== undefined && code.value !== null ? String(code.value) : null,
+    selectionStart: code && typeof code.selectionStart === 'number' ? code.selectionStart : null,
+    selectionEnd: code && typeof code.selectionEnd === 'number' ? code.selectionEnd : null,
+    focused: !!(doc && doc.activeElement && doc.activeElement === code),
+    error: error ? String(error.textContent == null ? '' : error.textContent) : null,
+  };
+}
+
+function machinesPageRestoreSignInDraft(node, draft) {
+  if (!node || !draft || typeof node.querySelector !== 'function') return false;
+  var code = node.querySelector('[data-sign-in-code]');
+  if (code) {
+    if (draft.value !== null && code.value !== undefined) code.value = draft.value;
+    if (draft.focused) {
+      if (typeof code.focus === 'function') code.focus();
+      if (typeof code.setSelectionRange === 'function' && draft.selectionStart !== null && draft.selectionEnd !== null) {
+        code.setSelectionRange(draft.selectionStart, draft.selectionEnd);
+      }
+    }
+  }
+  if (draft.error !== null) {
+    var error = node.querySelector('[data-sign-in-error]');
+    if (error) error.textContent = draft.error;
+  }
+  return true;
+}
+
+// Repaint ONE machine's sign-in block from a machine-scoped login-state payload. Never a full page
+// render: the page's 60 s poll owns the rest of the card.
+//
+// Two gates, both from WP-2: (1) an unchanged fingerprint does not touch the DOM at all, so a tick
+// that only re-stamped `account.checkedAt` leaves the block — and the code being typed into it —
+// alone; (2) when the flow has FINISHED, the card's Agents fact and Sign in row are re-read once
+// (remembered on the node) instead of waiting for the 60 s tick.
+function machinesPageRenderSignInBlock(instanceId, agent, payload) {
+  var panel = document.getElementById('machines-panel');
+  if (!panel || typeof panel.querySelector !== 'function') return false;
+  var node = panel.querySelector('[data-machine-sign-in-block="' + String(instanceId) + '-' + String(agent) + '"]');
+  if (!node) return false;
+  // E.1: remember the payload BEFORE the gate, so the next full page render can paint this block from
+  // it (the page keeps no per-machine login state of its own). Every tick stores the same object.
+  var cacheKey = String(instanceId) + '-' + String(agent);
+  _machinesPageSignInPayloads[cacheKey] = payload;
+  var key = machinesPageSignInRenderKey(payload);
+  var dataset = node.dataset || null;
+  if (dataset && dataset.renderKey === key) return false;
+  var draft = machinesPageCaptureSignInDraft(node);
+  node.innerHTML = machinesPageSignInBlockHtml(instanceId, agent, payload);
+  machinesPageRestoreSignInDraft(node, draft);
+  if (dataset) dataset.renderKey = key;
+
+  var entry = ((payload && payload.providers) || {})[machinesPageSignInProviderId(agent)] || null;
+  var flow = entry && entry.flow;
+  var closedId = flow && !machinesPageSignInFlowIsOpen(flow)
+    ? String(flow.id || flow.sessionId || flow.status || 'closed')
+    : '';
+  if (closedId) {
+    // E.1: the flow is over — drop the cache so the next full render paints the plain, enabled row.
+    delete _machinesPageSignInPayloads[cacheKey];
+    if (!dataset || dataset.closedFlowId !== closedId) {
+      if (dataset) dataset.closedFlowId = closedId;
+      // The row itself (plain, enabled "Sign in"; empty block) is repainted NOW from the page's own
+      // state — machinesPageRefreshSurfaces only re-reads the picker, and the 60 s tick is too late
+      // for a button that still says "Opening..." over a finished flow. The verdict (signed_in) still
+      // arrives with the hub's next agent-auth refresh; until then the row is truthfully signed_out.
+      renderMachinesPage();
+      machinesPageRefreshSurfaces();
+    }
+  }
+  return true;
+}
+
+// E.3: renderMachinesPage() rebuilds the panel from scratch, which would drop every open block's
+// draft, its renderKey (one wasted rewrite on the next tick) and its closedFlowId memo. This pairs a
+// capture-before-paint / adopt-after-paint around the ONE innerHTML write, so the page render stays
+// one statement and no timer is involved.
+function machinesPageCollectSignInBlocks(panel) {
+  var out = [];
+  var walk = function (node) {
+    var kids = node && node.children;
+    if (!kids) return;
+    for (var i = 0; i < kids.length; i += 1) {
+      var child = kids[i];
+      var key = child && typeof child.getAttribute === 'function'
+        ? String(child.getAttribute('data-machine-sign-in-block') || '')
+        : '';
+      if (key) {
+        out.push({
+          key: key,
+          draft: machinesPageCaptureSignInDraft(child),
+          closedFlowId: (child.dataset && child.dataset.closedFlowId) || '',
+        });
+      }
+      walk(child);
+    }
+  };
+  walk(panel);
+  return out;
+}
+
+function machinesPageAdoptSignInBlocks(panel, carried) {
+  if (!carried || !carried.length) return 0;
+  var byKey = {};
+  carried.forEach(function (entry) { byKey[entry.key] = entry; });
+  var adopted = 0;
+  var walk = function (node) {
+    var kids = node && node.children;
+    if (!kids) return;
+    for (var i = 0; i < kids.length; i += 1) {
+      var child = kids[i];
+      var key = child && typeof child.getAttribute === 'function'
+        ? String(child.getAttribute('data-machine-sign-in-block') || '')
+        : '';
+      var carriedEntry = key ? byKey[key] : null;
+      if (carriedEntry) {
+        machinesPageRestoreSignInDraft(child, carriedEntry.draft);
+        if (child.dataset) {
+          if (carriedEntry.closedFlowId) child.dataset.closedFlowId = carriedEntry.closedFlowId;
+          // The content was just rendered from the cached payload, so the next identical tick must be
+          // a no-op rather than a second identical write.
+          var cached = _machinesPageSignInPayloads[key];
+          if (cached) child.dataset.renderKey = machinesPageSignInRenderKey(cached);
+        }
+        adopted += 1;
+      }
+      walk(child);
+    }
+  };
+  walk(panel);
+  return adopted;
+}
+
+function machinesPageCarrySignInBlocks(panel, paint) {
+  var carried = machinesPageCollectSignInBlocks(panel);
+  if (typeof paint === 'function') paint();
+  return machinesPageAdoptSignInBlocks(panel, carried);
+}
+
+// ── delegations: the block's own Submit / Enter / Copy ───────────────────────────────────────────
+// The card's handlers live inside renderModelsCodingAgentRoutes and are scoped to the Coding Agents
+// section, so the Machines page needs its own. ONE delegated listener on #machines-panel (guarded by
+// a dataset flag, the way the phone module's `scope.dataset.mpBound` is): the panel's innerHTML is
+// replaced on every render, the panel element itself is not, so a single binding outlives them all.
+function machinesPageAttr(node, name) {
+  if (!node) return '';
+  if (typeof node.getAttribute === 'function') {
+    var value = node.getAttribute(name);
+    if (value !== null && value !== undefined) return String(value);
+  }
+  if (node.dataset) {
+    var camel = String(name).replace(/^data-/, '').replace(/-([a-z])/g, function (m, ch) { return ch.toUpperCase(); });
+    if (node.dataset[camel] !== null && node.dataset[camel] !== undefined) return String(node.dataset[camel]);
+  }
+  return '';
+}
+
+// What the event's target is inside: the block it belongs to, the machine that owns it, the agent,
+// and the three elements the card helper needs. null when the target is not part of a sign-in block.
+function machinesPageSignInTarget(node) {
+  if (!node || typeof node.closest !== 'function') return null;
+  var submitBtn = node.closest('[data-sign-in-code-submit]');
+  var copyBtn = node.closest('[data-sign-in-copy-code]');
+  var codeInput = node.closest('[data-sign-in-code]');
+  if (!submitBtn && !copyBtn && !codeInput) return null;
+  var block = node.closest('[data-machine-sign-in-block]');
+  if (!block) return null;
+  var card = typeof block.closest === 'function' ? block.closest('[data-machine-id]') : null;
+  var machineId = machinesPageAttr(card, 'data-machine-id');
+  var agent = machinesPageAttr(block, 'data-machine-agent');
+  if (!machineId || !agent) return null;
+  var query = typeof block.querySelector === 'function' ? function (sel) { return block.querySelector(sel); } : function () { return null; };
+  return {
+    kind: copyBtn ? 'copy' : 'submit',
+    block: block,
+    machineId: machineId,
+    agent: agent,
+    inputEl: query('[data-sign-in-code]'),
+    errorEl: query('[data-sign-in-error]'),
+    submitBtn: submitBtn || query('[data-sign-in-code-submit]'),
+    copyBtn: copyBtn,
+    codeEl: query('[data-sign-in-user-code]'),
+  };
+}
+
+// One POST, one meaning: the pasted code goes to the flow's own provider ON that machine.
+function machinesPageSubmitSignInCode(hit) {
+  if (!hit || typeof _modelsProviderLoginSubmitCode !== 'function' || !hit.inputEl) return false;
+  _modelsProviderLoginSubmitCode(
+    machinesPageSignInProviderId(hit.agent),
+    hit.inputEl,
+    hit.errorEl,
+    hit.submitBtn,
+    { machineId: hit.machineId },
+  );
+  return true;
+}
+
+function machinesPageSignInClick(ev) {
+  var hit = machinesPageSignInTarget(ev && ev.target);
+  if (!hit) return false;
+  if (ev && typeof ev.preventDefault === 'function') ev.preventDefault();
+  if (hit.kind === 'copy') {
+    if (hit.codeEl && typeof _modelsProviderLoginCopyCode === 'function') {
+      _modelsProviderLoginCopyCode(hit.codeEl.textContent, hit.copyBtn);
+    }
+    return true;
+  }
+  return machinesPageSubmitSignInCode(hit);
+}
+
+function machinesPageSignInKeydown(ev) {
+  if (!ev || ev.key !== 'Enter') return false;
+  var hit = machinesPageSignInTarget(ev.target);
+  if (!hit || hit.kind !== 'submit' || !hit.inputEl) return false;
+  if (typeof ev.preventDefault === 'function') ev.preventDefault();
+  return machinesPageSubmitSignInCode(hit);
+}
+
+function machinesPageSignInBind(panel) {
+  var node = panel || (typeof document !== 'undefined' ? document.getElementById('machines-panel') : null);
+  if (!node || typeof node.addEventListener !== 'function') return false;
+  if (node.dataset && node.dataset.mpcSignInBound === '1') return false;
+  if (node.dataset) node.dataset.mpcSignInBound = '1';
+  node.addEventListener('click', machinesPageSignInClick);
+  node.addEventListener('keydown', machinesPageSignInKeydown);
+  return true;
+}
+
+// The click on the row's own Sign in button. The AI Providers card's own helper does the POST and
+// then its ONE 2 s poll, scoped to this machine (no second timer family); the page only repaints the
+// block the payload answers for.
+function machinesPageSignIn(instanceId, agent, btn) {
+  var id = String(instanceId || '');
+  var preset = machinesPageAgentPreset(agent);
+  if (!id || !preset) return false;
+  var repaint = function (payload) { machinesPageRenderSignInBlock(id, agent, payload); };
+  if (typeof _modelsProviderLoginStart === 'function') {
+    Promise.resolve(_modelsProviderLoginStart(preset, btn, { machineId: id, onPayload: repaint }))
+      .catch(function () {
+        // HANDLE: the card helper already surfaces its own refusal (toast); the row is left as it was.
+        return null;
+      });
+    return true;
+  }
+  // No AI Providers module on this page (a unit slice, or an older bundle): the page's own transport
+  // on the same route with the same scope, so the click still reaches the box.
+  var providerId = machinesPageSignInProviderId(agent);
+  machinesPageJson(machinesPageUrl('/api/providers/' + providerId + '/login', 'machine=' + encodeURIComponent(id)), { method: 'POST', body: {} })
+    .then(function (result) {
+      if (result.ok) machinesPageToast('Sign-in started on the machine');
+      else machinesPageToast(machinesPageServerError(result.data, result.status));
+      return result;
+    })
+    .catch(function () {
+      // HANDLE: a transport failure is reported, never swallowed; the row stays as it was.
+      machinesPageToast('sign_in_unavailable');
+      return null;
+    });
+  return true;
+}
+
+// ── cards ───────────────────────────────────────────────────────────────────────────────────────
+// `machine` is a /api/machines row; `history` is the box's own host samples (array or {samples}).
+function machineCardHtml(machine, history) {
+  var m = machine || {};
+  var id = String(m.instanceId || '');
+  var name = String(m.displayName || m.hostname || m.url || id || '');
+  var health = String(m.health || 'unknown').toLowerCase();
+  var sample = (m.stats && m.stats.sample) || null;
+  var statsAt = Number((m.stats && m.stats.checkedAt) || 0);
+  var stale = !statsAt || (machinesPageNow() - statsAt) > MACHINE_STATS_STALE_MS;
+  var cpuSeries = machinesCpuSeries(history);
+  var memSeries = machinesMemSeries(history);
+  var cpuNow = sample && sample.cpuPct != null ? Number(sample.cpuPct) : machinesLastValue(cpuSeries);
+  var memNow = machinesLastValue(memSeries);
+  var credential = machinesCredentialBadge(m, false);
+  var agents = machinesAgentText(m.agents);
+  var facts = ''
+    + machinesStatBlock('Load', sample && sample.load1 != null ? mEsc(Number(sample.load1).toFixed(2)) : '')
+    + machinesStatBlock('Cores', sample && sample.cores != null ? mEsc(String(sample.cores)) : '')
+    + machinesStatBlock('Disk free', sample ? mEsc(machinesFormatBytes(sample.diskFreeBytes)) : '')
+    + machinesStatBlock('GPU', mEsc(machinesGpuText(sample && sample.gpu)))
+    + machinesStatBlock('Tasks', mEsc(machinesTaskLine(sample && sample.tasks)))
+    + machinesStatBlock('Agents', mEsc(agents));
+  var staleNote = stale && (sample || statsAt)
+    ? '<span class="mpc-stale" title="The hub re-reads a box at most once a minute; this sample is older than three">stats stale</span>'
+    : '';
+  return '<article class="machine-page-card" data-machine-id="' + mEsc(id) + '" data-health="' + mEsc(health) + '">'
+    + '<div class="mpc-head">'
+    + '<span class="mpc-dot" data-health="' + mEsc(health) + '" title="' + mEsc(health) + '"></span>'
+    + '<input class="mpc-name" type="text" maxlength="80" spellcheck="false" value="' + mEsc(name) + '"'
+    + ' title="' + mEsc(name) + '" aria-label="Machine name"'
+    + ' onchange="machinesPageRename(' + mEsc(JSON.stringify(id)) + ', this.value, this)">'
+    + credential.html
+    + '</div>'
+    + '<div class="mpc-meta">' + mEsc([machineHealthLabel(m), machineLastSeenText(m), [m.os, m.arch].filter(Boolean).join('/')].filter(Boolean).join(' · '))
+    + ' ' + staleNote + '</div>'
+    + '<div class="mpc-sparks">'
+    + '<div class="mpc-spark"><span class="mpc-spark-label">CPU</span>' + sparklineSvg(cpuSeries) + '<span class="mpc-spark-val">' + mEsc(machinesFormatPct(cpuNow)) + '</span></div>'
+    + '<div class="mpc-spark"><span class="mpc-spark-label">MEM</span>' + sparklineSvg(memSeries) + '<span class="mpc-spark-val">' + mEsc(machinesFormatPct(memNow)) + '</span></div>'
+    + '</div>'
+    + '<dl class="mpc-facts">' + facts + '</dl>'
+    + machinesPageSignInHtml(m)
+    + '<div class="mpc-actions">'
+    + '<button type="button" class="mpc-btn mpc-fav" aria-pressed="' + (m.favorite ? 'true' : 'false') + '"'
+    + ' title="Favorite — shown first in the picker" onclick="machinesPageToggle(' + mEsc(JSON.stringify(id)) + ',\'favorite\')">'
+    + (m.favorite ? '★ Favorite' : '☆ Favorite') + '</button>'
+    + '<button type="button" class="mpc-btn" onclick="machinesPageNewSessionHere(' + mEsc(JSON.stringify(id)) + ')">New session here</button>'
+    + '<button type="button" class="mpc-btn" onclick="machinesPageToggle(' + mEsc(JSON.stringify(id)) + ',\'hidden\')">'
+    + (m.hidden ? 'Show in picker' : 'Hide from picker') + '</button>'
+    + credential.action
+    + '<button type="button" class="mpc-btn mpc-danger" onclick="machinesPageConfirmRemove(' + mEsc(JSON.stringify(id)) + ')">Remove</button>'
+    + '</div>'
+    + machinesPageSignInRowHtml(m)
+    + '</article>';
+}
+
+// "This Mac" is not a registry row: its settings are /api/machine-self and its numbers are its own
+// host sample. It renders first (AC-5a) and its actions are the same three settings writes.
+function machinesSelfCardHtml() {
+  var settings = _machinesPageState.selfSettings || {};
+  var latest = (_machinesPageState.self && _machinesPageState.self.latest) || null;
+  var history = _machinesPageState.self || null;
+  var id = String(_machinesPageState.selfInstanceId || '');
+  var name = String(settings.displayName || 'This Mac');
+  var cpuSeries = machinesCpuSeries(history);
+  var memSeries = machinesMemSeries(history);
+  var cpuNow = latest && latest.cpuPct != null ? Number(latest.cpuPct) : machinesLastValue(cpuSeries);
+  var memNow = machinesLastValue(memSeries);
+  var facts = ''
+    + machinesStatBlock('Load', latest && latest.load1 != null ? mEsc(Number(latest.load1).toFixed(2)) : '')
+    + machinesStatBlock('Cores', latest && latest.cores != null ? mEsc(String(latest.cores)) : '')
+    + machinesStatBlock('Disk free', latest ? mEsc(machinesFormatBytes(latest.diskFreeBytes)) : '')
+    + machinesStatBlock('GPU', mEsc(machinesGpuText(latest && latest.gpu)))
+    + machinesStatBlock('Tasks', mEsc(machinesTaskLine(latest && latest.tasks)))
+    + machinesStatBlock('Memory', latest ? mEsc(machinesFormatBytes(latest.memUsedBytes) + ' / ' + machinesFormatBytes(latest.memTotalBytes)) : '');
+  var poolNote = _machinesPageState.machines.length
+    ? 'In a pool with ' + _machinesPageState.machines.length + ' other machine' + (_machinesPageState.machines.length === 1 ? '' : 's')
+    : 'Not in a pool yet';
+  return '<article class="machine-page-card machine-page-self" data-machine-id="' + mEsc(id) + '" data-health="reachable">'
+    + '<div class="mpc-head">'
+    + '<span class="mpc-dot" data-health="reachable" title="reachable"></span>'
+    + '<input class="mpc-name" type="text" maxlength="80" spellcheck="false" value="' + mEsc(name) + '"'
+    + ' title="' + mEsc(name) + '" aria-label="This Mac name"'
+    + ' onchange="machinesPageRename(\'\', this.value, this)">'
+    + '<span class="mpc-cred" data-cred="self" title="This machine runs its own sessions">This Mac</span>'
+    + '</div>'
+    + '<div class="mpc-meta">' + mEsc(poolNote) + (id ? ' · ' + mEsc(id) : '') + '</div>'
+    + '<div class="mpc-sparks">'
+    + '<div class="mpc-spark"><span class="mpc-spark-label">CPU</span>' + sparklineSvg(cpuSeries) + '<span class="mpc-spark-val">' + mEsc(machinesFormatPct(cpuNow)) + '</span></div>'
+    + '<div class="mpc-spark"><span class="mpc-spark-label">MEM</span>' + sparklineSvg(memSeries) + '<span class="mpc-spark-val">' + mEsc(machinesFormatPct(memNow)) + '</span></div>'
+    + '</div>'
+    + '<dl class="mpc-facts">' + facts + '</dl>'
+    + '<div class="mpc-actions">'
+    + '<button type="button" class="mpc-btn mpc-fav" aria-pressed="' + (settings.favorite ? 'true' : 'false') + '"'
+    + ' onclick="machinesPageToggle(\'\',\'favorite\')">' + (settings.favorite ? '★ Favorite' : '☆ Favorite') + '</button>'
+    + '<button type="button" class="mpc-btn" onclick="machinesPageNewSessionHere(\'\')">New session here</button>'
+    + '<button type="button" class="mpc-btn" onclick="machinesPageToggle(\'\',\'hidden\')">'
+    + (settings.hidden ? 'Show in picker' : 'Hide from picker') + '</button>'
+    + '</div>'
+    + '</article>';
+}
+
+function machinesPageHeaderHtml() {
+  var inPool = _machinesPageState.machines.length > 0;
+  return '<div class="machines-page-header">'
+    + '<div>'
+    + '<h2>Machines</h2>'
+    + '<p>Other CTM instances this one can spawn sessions on and read sessions from. '
+    + 'Names, favorites and visibility live on the machine they describe.</p>'
+    + '</div>'
+    + '<div class="machines-page-actions">'
+    + '<button type="button" class="mpc-btn mpc-primary" onclick="openAddMachineDialog()">+ Add machine</button>'
+    + '<button type="button" class="mpc-btn" onclick="openShowCodeDialog()">Show a code for this machine</button>'
+    + (inPool ? '<button type="button" class="mpc-btn mpc-danger" onclick="machinesPageLeavePool()">Leave pool</button>' : '')
+    + '<button type="button" class="mpc-btn" onclick="loadMachinesPanel()" title="Refresh">↻</button>'
+    + '</div>'
+    + '</div>';
+}
+
+function machinesPageBodyHtml() {
+  if (_machinesPageState.error) {
+    return '<div class="machines-page-error" role="status">' + mEsc(_machinesPageState.error) + '</div>';
+  }
+  if (!_machinesPageState.loaded && _machinesPageState.loading) {
+    return '<div class="machines-page-loading">Loading machines…</div>';
+  }
+  var cards = machinesSelfCardHtml();
+  var suspect = _machinesPageState.hubNetworkSuspect
+    ? '<div class="machines-page-note">hub network suspect — a row may be stale</div>'
+    : '';
+  var rows = _machinesPageState.machines.map(function (machine) {
+    return machineCardHtml(machine, _machinesPageState.histories[String(machine && machine.instanceId || '')]);
+  }).join('');
+  if (!rows && !suspect) {
+    rows = '<div class="machines-page-note">No other machines registered yet — use “Add machine”.</div>';
+  }
+  return cards + suspect + rows;
+}
+
+function renderMachinesPage() {
+  var panel = document.getElementById('machines-panel');
+  if (!panel) return false;
+  // WP-3 fix (A): the sign-in block's own Submit / Enter / Copy live on ONE delegated listener on
+  // the panel, bound here — the first render happens before any card's block can be typed into.
+  machinesPageSignInBind(panel);
+  // E.3: the panel's markup is replaced wholesale here; the open sign-in blocks are carried across
+  // the write (draft, renderKey, closedFlowId) so a page render never loses a sign-in in progress.
+  machinesPageCarrySignInBlocks(panel, function () {
+    panel.innerHTML = machinesPageHeaderHtml()
+      + '<div class="machines-page-body" role="status" aria-live="polite">' + machinesPageBodyHtml() + '</div>'
+      + '<div class="machines-page-toast" role="status" aria-live="polite"></div>';
+  });
+  return true;
+}
+
+// ── loading ─────────────────────────────────────────────────────────────────────────────────────
+function machinesPageHistoryQuery(machineId, now) {
+  var since = Math.max(0, Number(now) - MACHINES_PAGE_HISTORY_MS);
+  var query = 'since=' + Math.trunc(since);
+  if (machineId) query += '&machine=' + encodeURIComponent(machineId);
+  return query;
+}
+
+function loadMachinesPanel() {
+  var panel = document.getElementById('machines-panel');
+  if (!panel) return Promise.resolve(false);
+  machinesPageStartPolling();
+  if (!_machinesPageState.loaded) {
+    _machinesPageState.loading = true;
+    renderMachinesPage();
+  }
+  var now = machinesPageNow();
+  return Promise.all([
+    machinesPageJson(machinesPageUrl('/api/machines')),
+    machinesPageJson(machinesPageUrl('/api/machine-self')),
+    machinesPageJson(machinesPageUrl('/api/host/stats', machinesPageHistoryQuery('', now))),
+  ]).then(function (results) {
+    var list = results[0];
+    var self = results[1];
+    var stats = results[2];
+    _machinesPageState.loading = false;
+    if (!list.ok) {
+      _machinesPageState.error = machinesPageServerError(list.data, list.status);
+      renderMachinesPage();
+      return false;
+    }
+    _machinesPageState.error = '';
+    _machinesPageState.machines = (list.data && Array.isArray(list.data.machines)) ? list.data.machines : [];
+    _machinesPageState.hubNetworkSuspect = !!(list.data && list.data.hubNetworkSuspect);
+    _machinesPageState.selfSettings = (self.ok && self.data && self.data.self) || null;
+    _machinesPageState.self = stats.ok ? stats.data : null;
+    _machinesPageState.selfInstanceId = String((stats.ok && stats.data && stats.data.instanceId)
+      || (self.ok && self.data && self.data.instanceId) || '');
+    // P-7: re-read the dial cache on every load, so a member this device has since reached stops
+    // offering the row (and a newly discovered member starts offering it).
+    _machinesPageState.origins = machinesPageReadPoolOrigins();
+    _machinesPageState.loaded = true;
+    renderMachinesPage();
+    return machinesPageLoadHistories(now).then(function () {
+      renderMachinesPage();
+      return true;
+    });
+  }).catch(function (error) {
+    // REPORT: a transport failure is shown on the page, never swallowed into an empty list.
+    _machinesPageState.loading = false;
+    _machinesPageState.error = 'machines_unavailable: ' + ((error && error.message) || 'fetch failed');
+    renderMachinesPage();
+    return false;
+  });
+}
+
+// One history read per REACHABLE row. An unreachable box has nothing to read, and asking would cost
+// one timeout per poll for every off-LAN laptop in the pool.
+function machinesPageLoadHistories(now) {
+  var reachable = _machinesPageState.machines.filter(function (machine) {
+    return machine && machine.instanceId && String(machine.health || '').toLowerCase() === 'reachable';
+  });
+  return Promise.all(reachable.map(function (machine) {
+    var id = String(machine.instanceId);
+    return machinesPageJson(machinesPageUrl('/api/host/stats', machinesPageHistoryQuery(id, now)))
+      .then(function (result) {
+        _machinesPageState.histories[id] = result.ok ? (result.data || null) : null;
+        return null;
+      })
+      .catch(function () {
+        // HANDLE: one box's history is decoration; its card still renders from the hub's cached sample.
+        _machinesPageState.histories[id] = null;
+        return null;
+      });
+  }));
+}
+
+// ── visibility + the one poll timer (AC-5f) ─────────────────────────────────────────────────────
+function machinesPageIsVisible() {
+  var panel = document.getElementById('machines-panel');
+  if (!panel) return false;
+  if (panel.style && panel.style.display === 'none') return false;
+  if (typeof document.hidden === 'boolean' && document.hidden) return false;
+  return true;
+}
+
+function machinesPageStartPolling() {
+  if (_machinesPagePollTimer != null) return false;
+  if (!machinesPageIsVisible()) return false;
+  _machinesPageBindVisibility();
+  var tick = function () {
+    _machinesPagePollTimer = null;
+    if (!machinesPageIsVisible()) return;
+    _machinesPagePollTimer = _machinesPageTimers.set(tick, MACHINES_PAGE_POLL_MS);
+    // Refresh in place: no `loading` flag, so the cards never flash back to "Loading machines…".
+    loadMachinesPanel();
+  };
+  _machinesPagePollTimer = _machinesPageTimers.set(tick, MACHINES_PAGE_POLL_MS);
+  return true;
+}
+
+function machinesPageStopPolling() {
+  if (_machinesPagePollTimer == null) return false;
+  _machinesPageTimers.clear(_machinesPagePollTimer);
+  _machinesPagePollTimer = null;
+  return true;
+}
+
+function machinesPageOnVisibilityChange() {
+  if (typeof document.hidden === 'boolean' && document.hidden) { machinesPageStopPolling(); return; }
+  if (machinesPageIsVisible()) machinesPageStartPolling();
+}
+
+function _machinesPageBindVisibility() {
+  if (_machinesPageVisibilityBound) return;
+  _machinesPageVisibilityBound = true;
+  if (typeof document.addEventListener === 'function') {
+    document.addEventListener('visibilitychange', machinesPageOnVisibilityChange);
+  }
+}
+
+// Called by index.html's panel-hide path (`_commitSurfaceVisibility`) and by anything else that
+// takes the page off screen: the timer stops, the DOM stays so a return is instant.
+function machinesPanelHidden() {
+  return machinesPageStopPolling();
+}
+
+// navTo('machines') entry point (mirrors showWorktreesPanel).
+function showMachinesPanel(opts) {
+  if (typeof activateTab === 'function') activateTab('machines');
+  return loadMachinesPanel();
+}
+
+// ── AC-5d: keep the picker grid and the sidebar chip in step without a reload ───────────────────
+// There is no shared machines cache to patch: session-commands.js owns the picker's own copy
+// (`_nsMachineState.machines`) and the sidebar chip is painted from each SESSION ROW's
+// machine/machineName fields, which the hub serves. So the honest hook is the picker's own loader —
+// it re-fetches /api/machines and rebuilds the grid (and therefore the cache) from the same read the
+// page just made; the chip repaints from the hub's next session frame, which is the only thing that
+// carries a machine's name next to a session.
+function machinesPageRefreshSurfaces() {
+  if (typeof loadNewSessionMachines === 'function') loadNewSessionMachines();
+  return true;
+}
+
+// ── writes (machine-owned settings, D-4) ────────────────────────────────────────────────────────
+function machinesPageSelfPath(instanceId) {
+  var id = String(instanceId || '');
+  return machinesPageUrl('/api/machine-self', id ? 'machine=' + encodeURIComponent(id) : '');
+}
+
+function machinesPageApplySelfPatch(instanceId, patch) {
+  var id = String(instanceId || '');
+  var body = patch || {};
+  return machinesPageJson(machinesPageSelfPath(id), { method: 'POST', body: body })
+    .then(function (result) {
+      if (!result.ok) {
+        machinesPageToast(machinesPageServerError(result.data, result.status));
+        return false;
+      }
+      machinesPageToast('');
+      return loadMachinesPanel().then(function () {
+        machinesPageRefreshSurfaces();
+        return true;
+      });
+    })
+    .catch(function (error) {
+      // REPORT: the server's refusal (or the transport fault) is what the user needs to see.
+      machinesPageToast((error && error.message) || 'machine_self_failed');
+      return false;
+    });
+}
+
+function machinesPageRename(instanceId, value, input) {
+  var name = String(value == null ? '' : value).trim();
+  if (name.length > 80) {
+    machinesPageToast('display_name_too_long');
+    if (input && input.value !== undefined) input.value = name.slice(0, 80);
+    return Promise.resolve(false);
+  }
+  return machinesPageApplySelfPatch(instanceId, { displayName: name });
+}
+
+function machinesPageToggle(instanceId, field) {
+  if (field !== 'favorite' && field !== 'hidden') return Promise.resolve(false);
+  var id = String(instanceId || '');
+  var current = id
+    ? _machinesPageState.machines.find(function (machine) { return String(machine && machine.instanceId) === id; })
+    : _machinesPageState.selfSettings;
+  var next = !(current && (current[field] === 1 || current[field] === true));
+  var patch = {};
+  patch[field] = next ? 1 : 0;
+  return machinesPageApplySelfPatch(id, patch);
+}
+
+function machinesPageConfirmRemove(instanceId) {
+  var id = String(instanceId || '');
+  if (!id) return Promise.resolve(false);
+  var machine = _machinesPageState.machines.find(function (row) { return String(row && row.instanceId) === id; });
+  var name = (machine && (machine.displayName || machine.url)) || id;
+  if (typeof confirm === 'function' && !confirm('Remove ' + name + ' from this machine?')) return Promise.resolve(false);
+  return machinesPageJson(machinesPageUrl('/api/machines/' + encodeURIComponent(id) + '/remove'), { method: 'POST' })
+    .then(function (result) {
+      if (!result.ok) {
+        machinesPageToast(machinesPageServerError(result.data, result.status));
+        return false;
+      }
+      var data = result.data || {};
+      var rotated = Array.isArray(data.rotated) ? data.rotated : [];
+      var unreachable = Array.isArray(data.unreachable) ? data.unreachable : [];
+      var note = 'Removed ' + name + '.';
+      if (rotated.length) note += ' Re-keyed: ' + rotated.join(', ') + '.';
+      if (unreachable.length) note += ' Unreachable (re-pair after the grace): ' + unreachable.join(', ') + '.';
+      machinesPageToast(note);
+      return loadMachinesPanel();
+    })
+    .catch(function (error) {
+      // REPORT: a failed removal must not look like a successful one.
+      machinesPageToast((error && error.message) || 'machine_remove_failed');
+      return false;
+    });
+}
+
+function machinesPageLeavePool() {
+  if (typeof confirm === 'function' && !confirm('Leave the machine pool? This Mac drops the shared secret and its machine list.')) {
+    return Promise.resolve(false);
+  }
+  return machinesPageJson(machinesPageUrl('/api/pool/leave'), { method: 'POST' })
+    .then(function (result) {
+      if (!result.ok) {
+        machinesPageToast(machinesPageServerError(result.data, result.status));
+        return false;
+      }
+      machinesPageToast('Left the pool (' + (Number((result.data || {}).removed) || 0) + ' rows dropped).');
+      machinesPageRefreshSurfaces();
+      return loadMachinesPanel();
+    })
+    .catch(function (error) {
+      // REPORT: an unreachable hub must not read as "you left the pool".
+      machinesPageToast((error && error.message) || 'pool_leave_failed');
+      return false;
+    });
+}
+
+// "New session here" opens the EXISTING new-session modal (no second create path) with this machine
+// selected. showNewSessionModal() re-reads /api/machines and clears the selection when that read
+// lands, so the choice is re-applied once the card exists — bounded, through the same injected timer
+// the poll uses.
+function machinesPageNewSessionHere(instanceId) {
+  if (typeof showNewSessionModal !== 'function') return false;
+  var id = String(instanceId || '');
+  showNewSessionModal();
+  if (!id || typeof _selectMachineCard !== 'function') return true;
+  var tries = 0;
+  var select = function () {
+    var grid = document.getElementById('ns-machine-grid');
+    var card = grid && typeof grid.querySelector === 'function'
+      ? grid.querySelector('.ns-machine-card[data-value="' + id + '"]')
+      : null;
+    if (card) { _selectMachineCard(id); return; }
+    tries += 1;
+    if (tries < 40) _machinesPageTimers.set(select, 100);
+  };
+  select();
+  return true;
+}
+
+// ── D-9 pairing (AC-5c) ─────────────────────────────────────────────────────────────────────────
+// WP-6: the container decoder and the Add-dialog preview are the ONE shared copy in
+// public/js/machine-pool-shared.js (machinesNormalizeCode / machinesFormatCode /
+// machinesBase64UrlDecode / decodePairingStringClient / machinesAddPreview), because the phone's Add
+// sheet redeems exactly the same strings. The desktop name is kept as the thin delegate the WP-5
+// tests read, so there is no second implementation to drift.
+function machinesPageAddDialogPreview(pairingText, codeText, urlText) {
+  return machinesAddPreview(pairingText, codeText, urlText);
+}
+
+var MACHINES_PAGE_ADD_DIALOG_HTML = ''
+  + '<div class="machine-modal" role="dialog" aria-modal="true" aria-labelledby="machine-add-title">'
+  + '<h3 id="machine-add-title">Add a machine</h3>'
+  + '<p class="machine-modal-sub">Paste a pairing string from the other machine, or type its code and address.</p>'
+  + '<label class="machine-modal-label" for="machine-pair-input">Pairing string</label>'
+  + '<textarea id="machine-pair-input" class="machine-modal-input" rows="3" spellcheck="false"'
+  + ' placeholder="ctmpair1:…" aria-describedby="machine-pair-preview"></textarea>'
+  + '<div id="machine-pair-preview" class="machine-pair-preview" role="status" aria-live="polite"></div>'
+  + '<div class="machine-modal-or">or</div>'
+  + '<div class="machine-modal-row">'
+  + '<input id="machine-pair-code" class="machine-modal-input" type="text" autocomplete="off" spellcheck="false"'
+  + ' placeholder="XXXX-XXXX" aria-label="Pairing code" />'
+  + '<input id="machine-pair-url" class="machine-modal-input" type="text" autocomplete="off" spellcheck="false"'
+  + ' placeholder="http://spark.localhost:3556" aria-label="Machine address" />'
+  + '</div>'
+  + '<div id="machine-add-error" class="machine-modal-error" role="status" aria-live="polite"></div>'
+  + '<div class="machine-modal-actions">'
+  + '<button type="button" class="mpc-btn" id="machine-add-cancel">Cancel</button>'
+  + '<button type="button" class="mpc-btn mpc-primary" id="machine-add-confirm" disabled>Add machine</button>'
+  + '</div>'
+  + '<details class="machine-modal-legacy">'
+  + '<summary>Register by URL (legacy)</summary>'
+  + '<p class="machine-modal-sub">An env-token box (P-8) that has not joined the pool. Its identity is pinned '
+  + 'by the manifest it answers.</p>'
+  + '<div class="machine-modal-row">'
+  + '<input id="machine-legacy-url" class="machine-modal-input" type="text" autocomplete="off" spellcheck="false"'
+  + ' placeholder="http://192.168.1.20:3456" aria-label="Legacy machine URL" />'
+  + '<input id="machine-legacy-name" class="machine-modal-input" type="text" autocomplete="off" spellcheck="false"'
+  + ' placeholder="Display name" aria-label="Legacy machine display name" />'
+  + '</div>'
+  + '<div class="machine-modal-actions">'
+  + '<button type="button" class="mpc-btn" id="machine-legacy-submit">Register by URL</button>'
+  + '</div>'
+  + '</details>'
+  + '</div>';
+
+function closeMachinesPageDialog() {
+  if (_machinesPageDialog && _machinesPageDialog.overlay && _machinesPageDialog.overlay.parentNode) {
+    _machinesPageDialog.overlay.parentNode.removeChild(_machinesPageDialog.overlay);
+  }
+  _machinesPageDialog = null;
+  return true;
+}
+
+function _machinesPageMountDialog(html) {
+  var overlay = document.createElement('div');
+  overlay.className = 'machine-modal-overlay';
+  overlay.innerHTML = html;
+  var host = document.body || document.documentElement;
+  if (host && typeof host.appendChild === 'function') host.appendChild(overlay);
+  return overlay;
+}
+
+// The dialog's live state: reads the three fields, paints the preview, and enables Confirm ONLY for
+// a form the server can redeem. Also exposed as a pure function (machinesPageAddDialogPreview) so
+// AC-5c is provable without a DOM.
+function machinesPageAddDialogUpdate() {
+  if (!_machinesPageDialog) return null;
+  var dialog = _machinesPageDialog;
+  var preview = machinesPageAddDialogPreview(
+    dialog.pairInput ? dialog.pairInput.value : '',
+    dialog.codeInput ? dialog.codeInput.value : '',
+    dialog.urlInput ? dialog.urlInput.value : '',
+  );
+  if (dialog.preview) {
+    var text = '';
+    if (preview.message === 'pairing_string_invalid') text = 'pairing_string_invalid — that is not a ctmpair1: string.';
+    else if (preview.message === 'pairing_code_invalid') text = 'pairing_code_invalid — a code is 8 letters (XXXX-XXXX).';
+    else if (preview.message === 'address_required') text = 'Enter the machine address (http://host:port).';
+    else if (preview.ok && preview.name) text = 'Box: ' + preview.name + (preview.url ? ' — ' + preview.url : '');
+    else if (preview.ok) text = 'Box: ' + preview.url;
+    else if (preview.addressOnly) text = preview.url + ' — the name appears after pairing';
+    dialog.preview.textContent = text;
+    dialog.preview.classList.toggle('bad', !!preview.message);
+    dialog.preview.classList.toggle('good', !!preview.ok);
+  }
+  if (dialog.confirm) dialog.confirm.disabled = !preview.ok;
+  return preview;
+}
+
+function openAddMachineDialog(opts) {
+  var options = opts || {};
+  closeMachinesPageDialog();
+  var overlay = _machinesPageMountDialog(MACHINES_PAGE_ADD_DIALOG_HTML);
+  var dialog = {
+    overlay: overlay,
+    pairInput: document.getElementById('machine-pair-input'),
+    codeInput: document.getElementById('machine-pair-code'),
+    urlInput: document.getElementById('machine-pair-url'),
+    preview: document.getElementById('machine-pair-preview'),
+    error: document.getElementById('machine-add-error'),
+    confirm: document.getElementById('machine-add-confirm'),
+    cancel: document.getElementById('machine-add-cancel'),
+  };
+  _machinesPageDialog = dialog;
+  // P-8: the "Join pool" action on an env-token row opens this dialog with its address already in the
+  // manual form — the member still needs the code from the box.
+  if (options.url && dialog.urlInput) dialog.urlInput.value = String(options.url);
+  if (typeof dialog.pairInput.addEventListener === 'function') dialog.pairInput.addEventListener('input', machinesPageAddDialogUpdate);
+  if (typeof dialog.codeInput.addEventListener === 'function') dialog.codeInput.addEventListener('input', machinesPageAddDialogUpdate);
+  if (typeof dialog.urlInput.addEventListener === 'function') dialog.urlInput.addEventListener('input', machinesPageAddDialogUpdate);
+  if (dialog.cancel && typeof dialog.cancel.addEventListener === 'function') dialog.cancel.addEventListener('click', closeMachinesPageDialog);
+  if (dialog.confirm && typeof dialog.confirm.addEventListener === 'function') dialog.confirm.addEventListener('click', machinesPageAddDialogSubmit);
+  var legacy = document.getElementById('machine-legacy-submit');
+  if (legacy && typeof legacy.addEventListener === 'function') legacy.addEventListener('click', machinesPageRegisterLegacy);
+  machinesPageAddDialogUpdate();
+  return dialog;
+}
+
+function machinesPageAddDialogSubmit() {
+  if (!_machinesPageDialog) return Promise.resolve(false);
+  var dialog = _machinesPageDialog;
+  var preview = machinesPageAddDialogPreview(
+    dialog.pairInput ? dialog.pairInput.value : '',
+    dialog.codeInput ? dialog.codeInput.value : '',
+    dialog.urlInput ? dialog.urlInput.value : '',
+  );
+  if (!preview.ok) return Promise.resolve(false);
+  var body = preview.mode === 'string'
+    ? { pairingString: preview.pairingString }
+    : { code: machinesFormatCode(preview.code), url: preview.url };
+  if (dialog.error) dialog.error.textContent = '';
+  return machinesPageJson(machinesPageUrl('/api/machines/pair'), { method: 'POST', body: body })
+    .then(function (result) {
+      if (!result.ok) {
+        // §6.3: the server's code is relayed VERBATIM (pairing_string_invalid, machine_unreachable,
+        // machine_identity_mismatch, pairing_code_invalid, pool_member_exists, rate_limited).
+        if (dialog.error) dialog.error.textContent = machinesPageServerError(result.data, result.status);
+        return false;
+      }
+      closeMachinesPageDialog();
+      machinesPageToast('Machine added.');
+      machinesPageRefreshSurfaces();
+      return loadMachinesPanel();
+    })
+    .catch(function (error) {
+      // REPORT: a transport failure is shown in the dialog, which stays open for a retry.
+      if (dialog.error) dialog.error.textContent = (error && error.message) || 'machine_pair_failed';
+      return false;
+    });
+}
+
+// P-8 legacy path: POST /api/machines { url, displayName } — the pre-pool registration the Settings
+// card used to offer, kept reachable from the Add dialog under "Register by URL (legacy)".
+function machinesPageRegisterLegacy() {
+  var urlInput = document.getElementById('machine-legacy-url');
+  var nameInput = document.getElementById('machine-legacy-name');
+  var url = String((urlInput && urlInput.value) || '').trim();
+  var displayName = String((nameInput && nameInput.value) || '').trim();
+  var errorNode = _machinesPageDialog ? _machinesPageDialog.error : document.getElementById('machine-add-error');
+  if (!url) {
+    if (errorNode) errorNode.textContent = 'Enter the machine URL.';
+    return Promise.resolve(false);
+  }
+  return machinesPageJson(machinesPageUrl('/api/machines'), { method: 'POST', body: { url: url, displayName: displayName } })
+    .then(function (result) {
+      if (!result.ok) {
+        if (errorNode) errorNode.textContent = machinesPageServerError(result.data, result.status);
+        return false;
+      }
+      closeMachinesPageDialog();
+      machinesPageToast('Machine registered.');
+      machinesPageRefreshSurfaces();
+      return loadMachinesPanel();
+    })
+    .catch(function (error) {
+      // REPORT: the register failure is shown verbatim in the dialog.
+      if (errorNode) errorNode.textContent = (error && error.message) || 'machine_register_failed';
+      return false;
+    });
+}
+
+// "Show a code for this machine": mint an offer HERE (D-5/D-6 unchanged — the box still mints the
+// code) and paint it with the pairing string the other machine pastes.
+function openShowCodeDialog() {
+  closeMachinesPageDialog();
+  var overlay = _machinesPageMountDialog('<div class="machine-modal" role="dialog" aria-modal="true" aria-labelledby="machine-code-title">'
+    + '<h3 id="machine-code-title">Show a code for this machine</h3>'
+    + '<p class="machine-modal-sub">On the other machine, choose “Add machine” and paste this string — or type the code.</p>'
+    + '<div id="machine-code-value" class="machine-code-value" role="status" aria-live="polite">…</div>'
+    + '<textarea id="machine-pair-string" class="machine-modal-input" rows="4" readonly spellcheck="false" aria-label="Pairing string"></textarea>'
+    + '<div id="machine-code-error" class="machine-modal-error" role="status" aria-live="polite"></div>'
+    + '<div class="machine-modal-actions"><button type="button" class="mpc-btn" id="machine-code-close">Close</button></div>'
+    + '</div>');
+  _machinesPageDialog = {
+    overlay: overlay,
+    codeValue: document.getElementById('machine-code-value'),
+    pairString: document.getElementById('machine-pair-string'),
+    error: document.getElementById('machine-code-error'),
+    close: document.getElementById('machine-code-close'),
+  };
+  var dialog = _machinesPageDialog;
+  if (dialog.close && typeof dialog.close.addEventListener === 'function') dialog.close.addEventListener('click', closeMachinesPageDialog);
+  return machinesPageJson(machinesPageUrl('/api/machine-pairing/offers'), { method: 'POST', body: {} })
+    .then(function (result) {
+      if (!result.ok) {
+        var code = machinesPageServerError(result.data, result.status);
+        if (dialog.error) dialog.error.textContent = code;
+        return false;
+      }
+      var data = result.data || {};
+      if (dialog.codeValue) dialog.codeValue.textContent = String(data.code || '');
+      if (dialog.pairString) dialog.pairString.value = String(data.pairingString || '');
+      return true;
+    })
+    .catch(function (error) {
+      // REPORT: the offer failure stays in the dialog so the user can retry.
+      if (dialog.error) dialog.error.textContent = (error && error.message) || 'pairing_offer_failed';
+      return false;
+    });
+}
+
+// P-8: the "Join pool" action on an env-token row. It is the same D-9 flow — a code from that box —
+// so the dialog opens with the row's address already filled in.
+function machinesPageJoinPool(instanceId, url) {
+  return openAddMachineDialog({ url: url || '' });
+}