create-walle 0.10.1 → 0.10.3

package/template/coding-task-manager/public/m/machines.js

@@ -0,0 +1,2147 @@
+/* ===================================================================
+   CtmPhoneMachines — the phone's machine pool surfaces (WP-6).
+
+   Design: docs/machine-pool-picker-pairing-dashboard-2026-10-24.html §5 D-1/D-2/D-3/D-4/D-9/D-12,
+   P-7, P-8; §6.4 client block; §8 WP-6. Ruling in force: PHONE = DESKTOP PARITY.
+
+   Two surfaces, both the phone twin of a desktop one:
+     1. the Machines page inside More — twin of public/js/app/machines-page.js (This Mac + every
+        registry member: same groups, same badges, same sparklines, same actions, same Add dialog,
+        Show a code, Leave pool, Join pool, New session here, "Sign in to <member> too");
+     2. the picker search sheet for N > 4 — twin of the desktop "All machines (N)…" search card
+        (D-1/D-2/D-3: Favorites / Recent / All / Offline, search over displayName/hostname/os/arch/
+        url/gpu.name, offline rows disabled with "last seen …", hidden rows never rendered).
+
+   One copy, not two: every DOM-free presenter (order, search text, groups, load line, sparkline,
+   pairing container, card facts) comes from public/js/machine-pool-shared.js, which the phone loads
+   before this file. Settings are MACHINE-OWNED (D-4 rev 2): rename / favorite / hide POST
+   /api/machine-self on the machine they describe (`?machine=<id>` for a member). Nothing here writes
+   localStorage — the only client-side machine state is the P-7 dial cache (public/m/pool-failover.js),
+   plus the code being typed into an open sign-in's box, which is held in this module's own memory
+   (state.signInDrafts, per machine+agent) because the More page rebuilds the card under it.
+
+   Classic script, like public/m/model-sheet.js: the app creates it with DOM/transport/clock/timer
+   injected, so every presenter is provable in a vm without a browser. It owns exactly ONE timer: the
+   bounded sign-in re-read (SIGN_IN_POLL_MS, at most SIGN_IN_POLL_MAX_TICKS ticks) started by a
+   sign-in on a machine, which stops as soon as that flow closes, its block leaves the page, or the
+   ten-minute cap is reached. Nothing else here schedules work.
+   =================================================================== */
+(function (root) {
+  'use strict';
+
+  var STALE_NOTE = 'stats stale';
+  var STATUS_ID = 'phone-machines-status';
+  // D-12: the same 24 h window the desktop page asks for, so a spark is the same spark on both.
+  var HISTORY_MS = 24 * 60 * 60 * 1000;
+  // WP-3 fix (C): the box prints its sign-in link ~1 s AFTER the POST answers, so one read is not
+  // enough — the block would sit on "Waiting for the sign-in page…" forever. One bounded re-read.
+  var SIGN_IN_POLL_MS = 2000;
+  var SIGN_IN_POLL_MAX_TICKS = 300;
+  var SIGN_IN_OPEN_STATUSES = ['starting', 'running', 'awaiting_user'];
+
+  function defaultEsc(value) {
+    return String(value == null ? '' : value).replace(/[&<>"']/g, function (ch) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch];
+    });
+  }
+
+  function normId(value) {
+    return String(value == null ? '' : value).trim();
+  }
+
+  function machineName(machine) {
+    var m = machine || {};
+    return String(m.displayName || m.hostname || m.url || m.instanceId || '');
+  }
+
+  // P-8: the credential the hub dialled the row with. `env` rows are one-way members and carry the
+  // "Join pool" action, exactly as on the desktop page.
+  function credentialBadge(machine, isSelf) {
+    var credential = String((machine && machine.peerCredential) || (isSelf ? 'self' : 'missing'));
+    if (isSelf) return { text: 'This Mac', cred: 'self', title: 'This machine runs its own sessions', action: '' };
+    if (credential === 'pool') return { text: 'Pool', cred: 'pool', title: 'Dialled with the shared pool secret', action: '' };
+    if (credential === 'env') return { text: 'Env token', cred: 'env', title: 'Legacy env token — a one-way member', action: 'join-pool' };
+    return { text: 'No credential', cred: 'missing', title: 'No credential this hub can dial it with', action: '' };
+  }
+
+
+  // ── D-1 picker: <select> at N <= 4, search sheet above it ──────────────────────────────────────
+  // D-1 counts N = 1 (This Mac) + the visible registry rows. At or below MACHINE_PICKER_CARD_LIMIT the
+  // phone keeps the one-tap <select>; above it the picker is the search sheet.
+  function pickerMode(machines, selfIncluded) {
+    var visible = (Array.isArray(machines) ? machines : []).filter(function (m) {
+      return m && m.instanceId && !machineIsHidden(m);
+    });
+    var n = visible.length + (selfIncluded === false ? 0 : 1);
+    return n > MACHINE_PICKER_CARD_LIMIT ? 'search' : 'select';
+  }
+
+  // D-2/D-3 for the search sheet: the grouped rows a query leaves, in the shared order, with `hidden`
+  // rows already dropped by machinePickerGroupRows (so a hidden box can never surface here).
+  function sheetGroups(machines, query, now) {
+    var needle = String(query == null ? '' : query).trim().toLowerCase();
+    var groups = machinePickerGroupRows(machines, now);
+    if (!needle) return groups;
+    return groups.map(function (group) {
+      return {
+        id: group.id,
+        label: group.label,
+        rows: group.rows.filter(function (machine) { return machineSearchText(machine).indexOf(needle) !== -1; }),
+      };
+    }).filter(function (group) { return group.rows.length > 0; });
+  }
+
+  // A sheet row. D-3: the sheet lists EVERY row, including the unreachable ones HUB AC-5a keeps out
+  // of the picker CARD row — "where is my machine" is exactly the question a search answers, so the
+  // offline group is the point of the group set, not an afterthought. A non-reachable row is DISABLED
+  // and says so with its last-seen stamp; a reachable one is tappable and carries the D-12 load line.
+  // `now` is passed in, so staleness is never judged inside a tested path.
+  function sheetRowHtml(machine, selectedId, now) {
+    var id = normId(machine && machine.instanceId);
+    if (!id) return '';
+    var disabled = machineIsOffline(machine);
+    var meta = disabled
+      ? [machineHealthLabel(machine).toLowerCase(), machineLastSeenText(machine)].join(' · ')
+      : machineLoadLine(machine, now);
+    var selected = id === selectedId;
+    return '<button type="button" class="model-picker-option machine-sheet-row' + (selected ? ' is-selected' : '') + '"'
+      + ' role="option" aria-selected="' + (selected ? 'true' : 'false') + '"'
+      + ' data-machine-pick="' + defaultEsc(id) + '"' + (disabled ? ' disabled aria-disabled="true"' : '') + '>'
+      + '<span class="machine-sheet-row-name">' + defaultEsc(machineName(machine)) + '</span>'
+      + (meta ? '<span class="machine-sheet-row-meta">' + defaultEsc(meta) + '</span>' : '')
+      + '</button>';
+  }
+
+  function sheetListHtml(machines, query, selectedId, now) {
+    var groups = sheetGroups(machines, query, now);
+    if (!groups.length) return '<p class="machine-sheet-empty">No machine matches that search.</p>';
+    return groups.map(function (group) {
+      return '<div class="machine-sheet-group" data-group="' + defaultEsc(group.id) + '">'
+        + '<p class="machine-sheet-group-label">' + defaultEsc(group.label) + '</p>'
+        + group.rows.map(function (machine) { return sheetRowHtml(machine, selectedId, now); }).join('')
+        + '</div>';
+    }).join('');
+  }
+
+
+  // ── WP-3 models helpers, hoisted to module scope (box-owned sessions WP-3, docs/remote-session-
+  // child-transcript-model-truth-and-restart-2026-10-27.html §5 D-7): pure functions of the registry
+  // row, used by the card/sheet below AND exported as `modelsDelegateWarnings` so the shared
+  // Delegate pane (public/js/session-model-picker.js) words a box's reach verdict with THIS page's
+  // copy on the phone, exactly as it uses machinesPageModelsDelegateWarnings on the desktop.
+  function modelsBlock(machine) {
+    var block = machine && machine.models;
+    return block && typeof block === 'object' ? block : null;
+  }
+
+  function modelsDelegate(machine) {
+    var block = modelsBlock(machine);
+    return block && Array.isArray(block.delegate) ? block.delegate : [];
+  }
+
+  function modelsDelegateWarnings(machine) {
+    return modelsDelegate(machine).filter(function (entry) {
+      var reach = String((entry && entry.reach) || '');
+      return reach === 'unreachable' || reach === 'no_server';
+    }).map(function (entry) {
+      return '/delegate on ' + machineName(machine) + ' uses ' + String((entry && entry.model) || '')
+        + ' through a route ' + machineName(machine) + " can't reach.";
+    });
+  }
+
+  function create(deps) {
+    var d = deps || {};
+    var $ = d.$ || function () { return null; };
+    var esc = d.esc || defaultEsc;
+    var api = d.api || function () { return Promise.reject(new Error('no api')); };
+    // hub bridge (R-13/AC-4d): the host re-mounts its per-card Access block after EVERY paint, because
+    // render() rebuilds the card markup (a load/refresh would otherwise wipe it).
+    var afterRender = typeof d.afterRender === 'function' ? d.afterRender : null;
+    var toast = d.toast || function () {};
+    var host = d.document || (typeof document !== 'undefined' ? document : null);
+    var openNewSession = d.openNewSessionSheet || function () {};
+    var confirmImpl = d.confirm || (typeof confirm === 'function' ? confirm : null);
+    var clock = d.now || function () { return Date.now(); };
+    var at = function () { var value = Number(clock()); return Number.isFinite(value) ? value : 0; };
+    // The ONE timer seam (WP-3 fix C). Injected like every other dependency, so a vm spec drives the
+    // sign-in re-read tick by tick instead of waiting on a real clock.
+    var timers = d.timers || {
+      set: function (fn, ms) { return setTimeout(fn, ms); },
+      clear: function (id) { if (id != null) clearTimeout(id); },
+    };
+
+    var state = {
+      machines: [],
+      histories: {},
+      self: null,             // /api/host/stats for This Mac: { latest, samples, instanceId, urls }
+      selfSettings: null,     // /api/machine-self: { displayName, favorite, hidden }
+      selfInstanceId: '',
+      origins: [],            // the P-7 dial cache, read through the failover module
+      // WP-3: the last machine-scoped login-state entry per '<instanceId>-<agent>', so an open
+      // sign-in survives the app's re-renders.
+      signIn: {},
+      // WP-3 fix round 3 (G): the draft the user has typed into a block's own code box, per the same
+      // '<instanceId>-<agent>' key — kept HERE, not only in the block, because the More page rewrites
+      // #more-content wholesale BEFORE this module renders into it, so by then the old input (and its
+      // draft) is gone; this state is the only record the new card can be painted from.
+      signInDrafts: {},
+      // WP-3 fix (C): at most ONE re-read handle per '<instanceId>-<agent>'.
+      signInTimers: {},
+      loading: false,
+      loaded: false,
+      error: '',
+    };
+    var dialog = null;
+
+    function failoverModule() {
+      return root.CtmPoolFailover || null;
+    }
+
+    // The P-7 dial cache is the ONLY client-side machine state. A blocked or corrupted cache reads as
+    // "this device has reached nothing", which is exactly the safe default for the sign-in row.
+    function poolOrigins() {
+      var failover = failoverModule();
+      if (!failover || typeof failover.readPoolOrigins !== 'function') return [];
+      try {
+        return failover.readPoolOrigins(d.storage);
+      } catch (error) {
+        return []; // HANDLE: a blocked dial cache is an empty roster; the page still renders
+      }
+    }
+
+    // ── Machines page markup ───────────────────────────────────────────────────────────────────
+    // P-7: a member whose public https origin this device has never reached offers the one-tap
+    // sign-in — passkeys are pinned to the exact hostname, so the member's own /m/ runs its flow.
+    function signInRowHtml(machine) {
+      var origin = machinePoolSignInOrigin(machine, state.origins);
+      if (!origin) return '';
+      return '<button type="button" class="mp-btn mp-signin-row"'
+        + ' title="' + esc('Opens ' + origin + '/m/ — a passkey is pinned to that hostname') + '"'
+        + ' data-machine-signin="' + esc(origin) + '">'
+        + esc('Sign in to ' + machineName(machine) + ' too')
+        + '<span class="mp-signin-hint">' + esc(origin + '/m/') + '</span>'
+        + '</button>';
+    }
+
+    function factRow(label, value) {
+      if (!value) return '';
+      return '<div class="mp-fact"><span class="mp-fact-label">' + esc(label) + '</span>'
+        + '<span class="mp-fact-value">' + value + '</span></div>';
+    }
+
+    function sparkBlock(cpuSeries, memSeries, cpuNow, memNow) {
+      return '<div class="mp-sparks">'
+        + '<div class="mp-spark"><span class="mp-spark-label">CPU</span>' + sparklineSvg(cpuSeries)
+        + '<span class="mp-spark-val">' + esc(machineFormatPct(cpuNow)) + '</span></div>'
+        + '<div class="mp-spark"><span class="mp-spark-label">MEM</span>' + sparklineSvg(memSeries)
+        + '<span class="mp-spark-val">' + esc(machineFormatPct(memNow)) + '</span></div>'
+        + '</div>';
+    }
+
+    function machineFactsHtml(sample, agents, history, presence) {
+      return ''
+        + factRow('Load', sample && sample.load1 != null ? esc(Number(sample.load1).toFixed(2)) : '')
+        + factRow('Cores', sample && sample.cores != null ? esc(String(sample.cores)) : '')
+        + factRow('Disk free', sample ? esc(machineFormatBytes(sample.diskFreeBytes)) : '')
+        + factRow('GPU', esc(machineGpuText(sample && sample.gpu)))
+        + factRow('Power', esc(machinePowerText(sample, machineHistoryRows(history), at())))
+        + factRow('Tasks', esc(machineTaskLine(sample && sample.tasks)))
+        + factRow('Agents', esc(machineAgentText(agents, presence)));
+    }
+
+    // ── WP-3 sign-in: a coding agent ON a pooled machine, signed in from this phone ───────────────
+    // docs/remote-agent-sign-in-from-hub-browser-2026-10-25.html §5 D-7/D-9, §6, §9 S-13 — PHONE =
+    // DESKTOP PARITY, so the markup carries the SAME `data-*` names as the desktop card
+    // (data-machine-sign-in / data-machine-agent / data-machine-sign-in-block /
+    // data-open-sign-in-page / data-sign-in-code / data-sign-in-code-submit) and the three provider
+    // routes ride the same `?machine=<id>` proxy. Fix (C): the POST's own follow-up read is NOT
+    // enough — the box prints its link about a second later — so one bounded re-read per machine (see
+    // SIGN_IN_POLL_MS) runs until the flow closes; the entry also persists in `state.signIn` across
+    // the app's re-renders, so a repaint never loses the flow it already has.
+    var SIGN_IN_AGENTS = ['claude', 'codex'];
+
+    // The desktop's mapped copy, verbatim (models-tab.js `_modelsProviderLoginErrorText`): the phone
+    // must not print a raw refusal id where the card prints what the user can do about it.
+    function signInErrorText(errorId) {
+      var id = String(errorId === null || errorId === undefined ? '' : errorId);
+      if (id === 'code_format_invalid') return "That doesn't look like a sign-in code. Paste the code, or the page address, from the sign-in page.";
+      if (id === 'code_state_mismatch') return 'That code is from a different sign-in. Use the link above and try again.';
+      if (id === 'code_from_loopback_redirect') return 'That page came from a localhost link. Use the Open sign-in page link above.';
+      if (id === 'login_tab_gone' || id === 'provider_login_not_open') return 'The sign-in tab closed. Start Sign in again.';
+      if (id === 'code_entry_not_supported') return 'This sign-in does not take a code here.';
+      return 'Could not send the code (' + id + ').';
+    }
+
+    // The clipboard is the browser's, and its refusal is a label, never an exception escaping to the
+    // console (the desktop card's own rule). No timer: the label holds until the next render.
+    function copySignInCode(code, btn) {
+      var label = function (text) { if (btn) btn.textContent = text; };
+      try {
+        navigator.clipboard.writeText(String(code || '')).then(
+          function () { label('Copied'); },
+          function () { label('Copy failed'); },
+        );
+      } catch (error) {
+        // HANDLE: no clipboard (or no navigator) on this surface — the button says so and stops.
+        label('Copy failed');
+      }
+    }
+
+    // `signed_out` only — never `signed_in`, never `unknown` (P3: a box that never answered is not
+    // told it is signed out).
+    function signedOutAgents(machine) {
+      var agents = machine && machine.agents;
+      if (!agents || typeof agents !== 'object') return [];
+      return SIGN_IN_AGENTS.filter(function (agent) { return String(agents[agent] || '') === 'signed_out'; });
+    }
+
+    // The Sign in button plus the block it fills, per signed-out agent, under the Agents fact.
+    // F.1 (fix round 2): while an entry is open, the row button renders as the disabled "Opening…"
+    // the POST set — a More-page re-render runs after every render of the container, and an enabled
+    // "Sign in" there invites a second tap that just gets the 409.
+    function signInBlockHtml(machine) {
+      var id = normId(machine && machine.instanceId);
+      if (!id) return '';
+      return signedOutAgents(machine).map(function (agent) {
+        var key = id + '-' + agent;
+        var opening = signInEntryOpen(state.signIn[key]);
+        return '<div class="mp-fact mp-signin" data-machine-signin-for="' + esc(key) + '">'
+          + '<button type="button" class="mp-btn mp-signin-btn" data-machine-sign-in="' + esc(id) + '"'
+          + ' data-machine-agent="' + esc(agent) + '"'
+          + (opening ? ' disabled' : '') + '>'
+          + (opening ? 'Opening…' : 'Sign in') + '</button>'
+          + '<div class="mp-signin-block" data-machine-agent="' + esc(agent) + '"'
+          + ' data-machine-sign-in-block="' + esc(key) + '">'
+          + signInFlowHtml(agent, state.signIn[key]) + '</div>'
+          + '</div>';
+      }).join('');
+    }
+
+    // D-1 defence in depth, the same rule the card applies: only an https URL whose host (and whose
+    // redirect_uri host) is NOT loopback may become a link — a loopback link is the BOX's own URL,
+    // which a phone is not on.
+    function signInUrl(value) {
+      var loopback = ['localhost', '127.0.0.1', '::1', '[::1]'];
+      var parsed = null;
+      try { parsed = new URL(String(value || '')); } catch (error) { return ''; }
+      if (parsed.protocol !== 'https:') return '';
+      if (loopback.indexOf(String(parsed.hostname).toLowerCase()) >= 0) return '';
+      var redirect = parsed.searchParams.get('redirect_uri');
+      if (redirect) {
+        var host = '';
+        try { host = new URL(redirect).hostname; } catch (error) { host = ''; }
+        if (loopback.indexOf(String(host).toLowerCase()) >= 0) return '';
+      }
+      return parsed.href;
+    }
+
+    function providerIdForAgent(agent) {
+      return String(agent) === 'codex' ? 'codex' : 'claude';
+    }
+
+    // The flow's block, in the card's own markup and labels (desktop parity). 'Show sign-in tab' is
+    // deliberately absent: the sign-in tab lives on the box, not on this phone.
+    function signInFlowHtml(agent, entry) {
+      var flow = entry && entry.flow;
+      if (!flow || ['starting', 'running', 'awaiting_user'].indexOf(String(flow.status || '')) === -1) return '';
+      var url = signInUrl(flow.verificationUrl);
+      var parts = [];
+      if (url) {
+        parts.push('<a class="mp-btn" data-open-sign-in-page href="' + esc(url) + '" target="_blank" rel="noopener">Open sign-in page</a>');
+      }
+      if (String(flow.codeEntry || '') === 'browser') {
+        parts.push('<code data-sign-in-user-code>' + esc(flow.userCode || '') + '</code>');
+        parts.push('<span data-sign-in-hint>Enter this code on the sign-in page.</span>');
+      } else if (String(flow.codeEntry || '') === 'paste') {
+        parts.push('<input data-sign-in-code type="text" inputmode="text" autocomplete="off" spellcheck="false"'
+          + ' aria-label="Sign-in code" placeholder="Paste the code from the sign-in page" />');
+        parts.push('<button type="button" class="mp-btn" data-sign-in-code-submit>Submit code</button>');
+        parts.push('<span data-sign-in-hint>After you sign in, the page shows a code. Paste it here.</span>');
+        parts.push('<span data-sign-in-error></span>');
+      } else {
+        parts.push('<span data-sign-in-hint>Waiting for the sign-in page…</span>');
+      }
+      return parts.join('');
+    }
+
+    function signInBlockNode(instanceId, agent) {
+      var doc = host || (typeof document !== 'undefined' ? document : null);
+      if (!doc || typeof doc.querySelector !== 'function') return null;
+      return doc.querySelector('[data-machine-sign-in-block="' + normId(instanceId) + '-' + String(agent) + '"]');
+    }
+
+    function signInKey(instanceId, agent) {
+      return normId(instanceId) + '-' + String(agent);
+    }
+
+    function signInEntryOpen(entry) {
+      var flow = entry && entry.flow;
+      return !!flow && SIGN_IN_OPEN_STATUSES.indexOf(String(flow.status || '')) >= 0;
+    }
+
+    // The desktop's render key, over ONE machine-scoped entry: everything the block renders, with the
+    // probe's own timestamp dropped (it moves between ticks and is painted nowhere). Same defect as
+    // WP-2 on the card — a repaint on every tick replaces the code box mid-typing.
+    function signInRenderKey(entry) {
+      if (!entry || typeof entry !== 'object') return JSON.stringify(entry === undefined ? null : entry);
+      var copy = {};
+      Object.keys(entry).forEach(function (k) { copy[k] = entry[k]; });
+      if (copy.account && typeof copy.account === 'object') {
+        var account = {};
+        Object.keys(copy.account).forEach(function (k) { if (k !== 'checkedAt') account[k] = copy.account[k]; });
+        copy.account = account;
+      }
+      return JSON.stringify(copy);
+    }
+
+    // The draft a repaint must not destroy: the typed code (caret and focus included) and the refusal.
+    function captureSignInDraft(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 = host || (typeof document !== 'undefined' ? document : null);
+      var draft = {
+        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,
+      };
+      // Fix round 3 (G): the carry (signInBlocksIn → adoptSignInBlocks) can only reach a block that is
+      // still on the page, and a More-page rebuild has already thrown that one away — so the same
+      // capture is kept in state as well, and the carry and the state can never disagree.
+      var key = node && typeof node.getAttribute === 'function'
+        ? String(node.getAttribute('data-machine-sign-in-block') || '')
+        : '';
+      if (key && code) state.signInDrafts[key] = draftFromSignInInput(code, draft.focused);
+      return draft;
+    }
+
+    // The draft of ONE code input, in the shape state.signInDrafts holds it.
+    function draftFromSignInInput(code, focused) {
+      return {
+        value: code && code.value !== undefined && code.value !== null ? String(code.value) : null,
+        // Guarded like captureSignInDraft: a fake or exotic node has no numeric caret at all.
+        selectionStart: code && typeof code.selectionStart === 'number' ? code.selectionStart : null,
+        selectionEnd: code && typeof code.selectionEnd === 'number' ? code.selectionEnd : null,
+        focused: !!focused,
+      };
+    }
+
+    function restoreSignInDraft(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);
+          }
+        }
+      }
+      // `undefined` is "this draft says nothing about the refusal" — a state draft carries no copy, and
+      // writing undefined into the node would print the word "undefined" in the block.
+      if (draft.error !== null && draft.error !== undefined) {
+        var error = node.querySelector('[data-sign-in-error]');
+        if (error) error.textContent = draft.error;
+      }
+      return true;
+    }
+
+    // F.2 (fix round 2): render() replaces the card's markup wholesale on every More-page render, so
+    // an open block would lose its draft (the value being typed, the caret, the focus, the refusal
+    // copy) and its renderKey (one wasted write on the next tick). Capture before the write, adopt the
+    // same-keyed new node after it. No timer: the phone's ONE bounded re-read is unaffected.
+    function signInBlocksIn(root) {
+      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: captureSignInDraft(child) });
+          walk(child);
+        }
+      };
+      walk(root);
+      return out;
+    }
+
+    function adoptSignInBlocks(root, carried, adoptedKeys) {
+      if (!carried || !carried.length) return 0;
+      var byKey = {};
+      carried.forEach(function (item) { byKey[item.key] = item; });
+      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 item = key ? byKey[key] : null;
+          if (item) {
+            restoreSignInDraft(child, item.draft);
+            // The content was just painted from state.signIn[key], so the next identical tick must
+            // write nothing.
+            if (child.dataset && state.signIn[key] !== undefined) {
+              child.dataset.renderKey = signInRenderKey(state.signIn[key]);
+            }
+            if (adoptedKeys) adoptedKeys[key] = true;
+            adopted += 1;
+          }
+          walk(child);
+        }
+      };
+      walk(root);
+      return adopted;
+    }
+
+    // Fix round 3 (G): the More page rebuilds #more-content wholesale and only THEN calls render(),
+    // so the block that was on the page is gone before the carry can look at it — the draft the code
+    // box reported into state.signInDrafts is the only record left. Every block the new card paints
+    // gets that draft back here; a block that WAS carried keeps its own (never overwritten).
+    function restoreSignInDraftsFromState(card, adoptedKeys) {
+      var restored = 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') || '')
+            : '';
+          if (key && !(adoptedKeys && adoptedKeys[key]) && state.signInDrafts[key]) {
+            restoreSignInDraft(child, state.signInDrafts[key]);
+            restored += 1;
+          }
+          walk(child);
+        }
+      };
+      walk(card);
+      return restored;
+    }
+
+    // Fill ONE machine's block from a machine-scoped login-state payload, and remember the entry so
+    // the next page render paints the same flow. Gated on the fingerprint (see signInRenderKey), so a
+    // checkedAt-only tick leaves the DOM — and the code being typed into it — untouched.
+    // false = the block is not on the page (the caller stops that machine's re-read).
+    function renderSignInBlock(instanceId, agent, payload) {
+      var id = normId(instanceId);
+      var key = signInKey(id, agent);
+      var entry = ((payload && payload.providers) || {})[providerIdForAgent(agent)] || null;
+      state.signIn[key] = entry;
+      var node = signInBlockNode(id, agent);
+      if (!node) return false;
+      var nextKey = signInRenderKey(entry);
+      if (node.dataset && node.dataset.renderKey === nextKey) return true;
+      var draft = captureSignInDraft(node);
+      node.innerHTML = signInFlowHtml(agent, entry);
+      restoreSignInDraft(node, draft);
+      if (node.dataset) node.dataset.renderKey = nextKey;
+      // Fix round 3 (G): a closed entry has no box to type into, so the draft kept for it is stale —
+      // dropped AFTER the capture above, which would otherwise just have written it back.
+      if (!signInEntryOpen(entry)) delete state.signInDrafts[key];
+      return true;
+    }
+
+    // ── the ONE bounded re-read (fix C) ─────────────────────────────────────────────────────────
+    // One handle per '<id>-<agent>', never two. It stops when the flow is no longer open (then it
+    // re-reads the page once, silently), when the block has left the page, or at the tick cap.
+    function stopSignInPoll(key) {
+      var handle = state.signInTimers[key];
+      if (!handle) return false;
+      if (handle.id != null) timers.clear(handle.id);
+      delete state.signInTimers[key];
+      return true;
+    }
+
+    function stopSignInPolls() {
+      Object.keys(state.signInTimers).forEach(stopSignInPoll);
+      return true;
+    }
+
+    function armSignInPoll(key, id, agent) {
+      var handle = state.signInTimers[key];
+      if (!handle) return false;
+      handle.id = timers.set(function () {
+        handle.id = null;
+        if (!state.signInTimers[key]) return;                 // stopped while we waited
+        handle.ticks += 1;
+        if (handle.ticks > SIGN_IN_POLL_MAX_TICKS) { stopSignInPoll(key); return; }
+        readSignInState(id, agent).then(function () {
+          if (!state.signInTimers[key]) return;
+          if (!signInEntryOpen(state.signIn[key])) { stopSignInPoll(key); load({ silent: true }); return; }
+          armSignInPoll(key, id, agent);
+        });
+      }, SIGN_IN_POLL_MS);
+      return true;
+    }
+
+    function startSignInPoll(instanceId, agent) {
+      var id = normId(instanceId);
+      if (!id) return false;
+      var key = signInKey(id, agent);
+      if (state.signInTimers[key]) return false;               // one handle per machine+agent
+      state.signInTimers[key] = { id: null, ticks: 0 };
+      return armSignInPoll(key, id, agent);
+    }
+
+    function readSignInState(instanceId, agent) {
+      var id = normId(instanceId);
+      return api('/api/providers/login-state?machine=' + encodeURIComponent(id))
+        .then(function (payload) {
+          // No block on the page any more: the row is gone, so is the reason to re-read.
+          if (!renderSignInBlock(id, agent, payload)) stopSignInPoll(signInKey(id, agent));
+          return payload;
+        })
+        .catch(function () {
+          // HANDLE: a box that does not answer leaves the block empty; the button stays tappable.
+          return null;
+        });
+    }
+
+    // The server's refusal id, read the way serverError reads it.
+    function errorIdOf(failure) {
+      var payload = failure && failure.payload;
+      if (payload && typeof payload === 'object') {
+        if (payload.error) return String(payload.error);
+        if (payload.code) return String(payload.code);
+      }
+      return String((failure && (failure.code || failure.message)) || '');
+    }
+
+    // The click: POST the box's login route through the proxy, read that box's state, then keep
+    // re-reading until the flow closes (see the block's header).
+    function machineSignIn(instanceId, agent, btn) {
+      var id = normId(instanceId);
+      if (!id) return Promise.resolve(false);
+      if (btn) { btn.disabled = true; btn.textContent = 'Opening…'; }
+      return api('/api/providers/' + providerIdForAgent(agent) + '/login?machine=' + encodeURIComponent(id), { method: 'POST', body: {} })
+        .then(function () { return readSignInState(id, agent); })
+        .then(function (payload) { startSignInPoll(id, agent); return payload; })
+        .catch(function (error) {
+          // A second tap while the box is already opening this flow is NOT an error: adopt the flow
+          // the box already has and keep reading it (the alternative is a dead-end 409 on the row).
+          if (errorIdOf(error) === 'provider_login_already_running') {
+            return readSignInState(id, agent).then(function (payload) { startSignInPoll(id, agent); return payload; });
+          }
+          // REPORT: the server's own code is the message; the button is restored for a retry.
+          if (btn) { btn.disabled = false; btn.textContent = 'Sign in'; }
+          setStatus(serverError(error));
+          return null;
+        });
+    }
+
+    // The code the user pasted goes to the flow's own tab on the box (one POST, one meaning), then
+    // the block re-reads that box's state and keeps re-reading while the flow is open.
+    function submitSignInCode(instanceId, agent, node) {
+      var id = normId(instanceId);
+      var block = node && typeof node.closest === 'function' ? node.closest('[data-machine-sign-in-block]') : null;
+      var input = node && node.hasAttribute && node.hasAttribute('data-sign-in-code')
+        ? node
+        : (block && typeof block.querySelector === 'function' ? block.querySelector('[data-sign-in-code]') : null);
+      var error = block && typeof block.querySelector === 'function' ? block.querySelector('[data-sign-in-error]') : null;
+      var submitBtn = node && node.hasAttribute && node.hasAttribute('data-sign-in-code-submit')
+        ? node
+        : (block && typeof block.querySelector === 'function' ? block.querySelector('[data-sign-in-code-submit]') : null);
+      if (!id || !input) return Promise.resolve(false);
+      return api('/api/providers/' + providerIdForAgent(agent) + '/login/code?machine=' + encodeURIComponent(id), {
+        method: 'POST',
+        body: { code: String(input.value || '') },
+      })
+        .then(function () {
+          if (error) error.textContent = '';
+          input.value = '';
+          // The code is the box's now: the draft is spent, so a later re-render must not paint it back
+          // into an empty box. A refused send never reaches here — its typed code stays (see catch).
+          delete state.signInDrafts[signInKey(id, agent)];
+          setStatus('Code sent to the sign-in tab');
+          return readSignInState(id, agent).then(function (payload) { startSignInPoll(id, agent); return payload; });
+        })
+        .catch(function (failure) {
+          // REPORT: the server classifies its own refusal — shown in the card's own words, with the
+          // typed code kept and the button re-armed, so the user can fix it and send again.
+          if (error) error.textContent = signInErrorText(errorIdOf(failure) || 'unknown_error');
+          if (submitBtn) submitBtn.disabled = false;
+          return null;
+        });
+    }
+
+    // WP-3 (§8, docs/fleet-auto-update-pooled-machines-2026-10-26.html): the box's update status line
+    // — the phone twin of the desktop card's "mpc-fleet". The rule is the shared machineFleetLine;
+    // this is only its markup, so PHONE = DESKTOP PARITY holds byte for byte.
+    function fleetHtml(machine) {
+      var fleet = machineFleetLine(machine);
+      if (!fleet) return '';
+      return '<div class="mp-fleet" data-fleet-tone="' + esc(fleet.tone) + '" title="' + esc(fleet.title) + '">' + esc(fleet.text) + '</div>';
+    }
+
+    function machineCardHtml(machine, history) {
+      var m = machine || {};
+      var id = normId(m.instanceId);
+      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 || (at() - statsAt) > MACHINE_STATS_STALE_MS;
+      var cpuSeries = machineCpuSeries(history);
+      var memSeries = machineMemSeries(history);
+      var cpuNow = sample && sample.cpuPct != null ? Number(sample.cpuPct) : machineLastValue(cpuSeries);
+      var memNow = machineLastValue(memSeries);
+      var badge = credentialBadge(m, false);
+      var staleNote = stale && (sample || statsAt)
+        ? '<span class="mp-stale" title="The hub re-reads a box at most once a minute; this sample is older than three">'
+          + esc(STALE_NOTE) + '</span>'
+        : '';
+      var meta = [machineHealthLabel(m), machineLastSeenText(m), [m.os, m.arch].filter(Boolean).join('/')]
+        .filter(Boolean).join(' · ');
+      return '<article class="mp-card" data-machine-id="' + esc(id) + '" data-health="' + esc(health) + '">'
+        + '<div class="mp-head">'
+        + '<span class="mp-dot" data-health="' + esc(health) + '" title="' + esc(health) + '"></span>'
+        + '<input class="mp-name" type="text" maxlength="80" spellcheck="false" value="' + esc(machineName(m)) + '"'
+        + ' title="' + esc(machineName(m)) + '" aria-label="Machine name" data-machine-rename="' + esc(id) + '">'
+        + '<span class="mp-cred" data-cred="' + esc(badge.cred) + '" title="' + esc(badge.title) + '">' + esc(badge.text) + '</span>'
+        + '</div>'
+        + '<div class="mp-meta">' + esc(meta) + ' ' + staleNote + '</div>'
+        + fleetHtml(m)
+        + sparkBlock(cpuSeries, memSeries, cpuNow, memNow)
+        + '<div class="mp-facts">' + machineFactsHtml(sample, m.agents, history, m.agentPresence) + '</div>'
+        + signInBlockHtml(m)
+        + skillsRowHtml(m)
+        + modelsRowHtml(m)
+        + '<div class="mp-actions">'
+        + '<button type="button" class="mp-btn mp-fav" aria-pressed="' + (m.favorite ? 'true' : 'false') + '"'
+        + ' title="Favorite — shown first in the picker"'
+        + ' data-machine-toggle="' + esc(id) + '" data-machine-field="favorite">'
+        + esc(m.favorite ? '★ Favorite' : '☆ Favorite') + '</button>'
+        + '<button type="button" class="mp-btn" data-machine-new-session="' + esc(id) + '">New session here</button>'
+        + '<button type="button" class="mp-btn" data-machine-toggle="' + esc(id) + '" data-machine-field="hidden">'
+        + esc(m.hidden ? 'Show in picker' : 'Hide from picker') + '</button>'
+        + (badge.action === 'join-pool'
+          ? '<button type="button" class="mp-btn" data-machine-join="' + esc(id) + '"'
+            + ' data-machine-url="' + esc(m.url || '') + '">Join pool</button>'
+          : '')
+        + '<button type="button" class="mp-btn mp-danger" data-machine-remove="' + esc(id) + '">Remove</button>'
+        + '</div>'
+        + signInRowHtml(m)
+        + '</article>';
+    }
+
+    // This Mac is not a registry row: its settings are /api/machine-self and its numbers are its own
+    // host samples. Same three settings writes as a member, with an empty machine id.
+    function selfCardHtml() {
+      var settings = state.selfSettings || {};
+      var latest = (state.self && state.self.latest) || null;
+      var history = state.self || null;
+      var id = normId(state.selfInstanceId);
+      var name = String(settings.displayName || 'This Mac');
+      var cpuSeries = machineCpuSeries(history);
+      var memSeries = machineMemSeries(history);
+      var cpuNow = latest && latest.cpuPct != null ? Number(latest.cpuPct) : machineLastValue(cpuSeries);
+      var memNow = machineLastValue(memSeries);
+      var poolNote = state.machines.length
+        ? 'In a pool with ' + state.machines.length + ' other machine' + (state.machines.length === 1 ? '' : 's')
+        : 'Not in a pool yet';
+      var facts = machineFactsHtml(latest, null, history)
+        + factRow('Memory', latest ? esc(machineFormatBytes(latest.memUsedBytes) + ' / ' + machineFormatBytes(latest.memTotalBytes)) : '');
+      return '<article class="mp-card mp-self" data-machine-id="' + esc(id) + '" data-health="reachable">'
+        + '<div class="mp-head">'
+        + '<span class="mp-dot" data-health="reachable" title="reachable"></span>'
+        + '<input class="mp-name" type="text" maxlength="80" spellcheck="false" value="' + esc(name) + '"'
+        + ' title="' + esc(name) + '" aria-label="This Mac name" data-machine-rename="">'
+        + '<span class="mp-cred" data-cred="self" title="This machine runs its own sessions">This Mac</span>'
+        + '</div>'
+        + '<div class="mp-meta">' + esc(poolNote + (id ? ' · ' + id : '')) + '</div>'
+        + sparkBlock(cpuSeries, memSeries, cpuNow, memNow)
+        + '<div class="mp-facts">' + facts + '</div>'
+        + '<div class="mp-actions">'
+        + '<button type="button" class="mp-btn mp-fav" aria-pressed="' + (settings.favorite ? 'true' : 'false') + '"'
+        + ' title="Favorite — shown first in the picker" data-machine-toggle="" data-machine-field="favorite">'
+        + esc(settings.favorite ? '★ Favorite' : '☆ Favorite') + '</button>'
+        + '<button type="button" class="mp-btn" data-machine-new-session="">New session here</button>'
+        + '<button type="button" class="mp-btn" data-machine-toggle="" data-machine-field="hidden">'
+        + esc(settings.hidden ? 'Show in picker' : 'Hide from picker') + '</button>'
+        + '</div>'
+        + '</article>';
+    }
+
+    function headerHtml() {
+      var inPool = state.machines.length > 0;
+      return '<div class="more-section-head">'
+        + '<span>'
+        + '<span class="more-kicker">Machines</span>'
+        + '<h3 id="phone-machines-title">Other CTM instances</h3>'
+        + '</span>'
+        + '<button class="row-action" type="button" data-machines-refresh>Refresh</button>'
+        + '</div>'
+        + '<div class="mp-toolbar">'
+        + '<button type="button" class="mp-btn mp-primary" data-machine-add>+ Add machine</button>'
+        + '<button type="button" class="mp-btn" data-machine-show-code>Show a code for this machine</button>'
+        + (inPool ? '<button type="button" class="mp-btn mp-danger" data-pool-leave>Leave pool</button>' : '')
+        + '</div>';
+    }
+
+    function listHtml() {
+      if (state.error) return '<p class="mp-error" role="status">' + esc(state.error) + '</p>';
+      var cards = selfCardHtml();
+      var rows = state.machines.map(function (machine) {
+        return machineCardHtml(machine, state.histories[normId(machine && machine.instanceId)]);
+      }).join('');
+      var note = rows ? '' : '<p class="more-section-copy">No other machines registered yet — use “Add machine”.</p>';
+      return cards + rows + note;
+    }
+
+    function bodyHtml() {
+      return headerHtml() + '<div class="mp-body">' + listHtml() + '</div>';
+    }
+
+    // Renders inside #more-content. more.js rewrites that container on every More render, so app.js
+    // calls this again after each of its renders and the section node is reused (never duplicated).
+    function render(container) {
+      var target = container || $('more-content');
+      if (!target) return null;
+      var card = typeof target.querySelector === 'function' ? target.querySelector('#phone-machines-card') : null;
+      var doc = host || (typeof document !== 'undefined' ? document : null);
+      if (!card) {
+        if (!doc || typeof doc.createElement !== 'function') return null;
+        card = doc.createElement('section');
+        card.id = 'phone-machines-card';
+        card.className = 'more-section-card';
+        card.setAttribute('aria-labelledby', 'phone-machines-title');
+        target.appendChild(card);
+      }
+      var carried = signInBlocksIn(card);
+      card.innerHTML = bodyHtml() + '<p class="mp-status" id="' + STATUS_ID + '" role="status" aria-live="polite"></p>';
+      var adoptedKeys = {};
+      adoptSignInBlocks(card, carried, adoptedKeys);
+      // The carried blocks are already whole; a block the write just REBUILT (a More-page render threw
+      // the old card away) has only state.signInDrafts to be painted from.
+      restoreSignInDraftsFromState(card, adoptedKeys);
+      bind(card);
+      if (afterRender) {
+        try { afterRender(card); } catch (error) { if (typeof console !== 'undefined') console.warn('[phone-machines] afterRender failed', error); }
+      }
+      return card;
+    }
+
+    function setStatus(text) {
+      var message = String(text || '');
+      var node = $(STATUS_ID);
+      if (node) node.textContent = message;
+      if (message) toast(message);
+      return message;
+    }
+
+    // The server's error code is shown VERBATIM (machine_identity_mismatch, machine_unreachable, …).
+    function serverError(err) {
+      var payload = err && err.payload;
+      if (payload && typeof payload === 'object') {
+        if (payload.error) return String(payload.error);
+        if (payload.code) return String(payload.code);
+      }
+      return (err && (err.code || err.message)) || 'machine_request_failed';
+    }
+
+    // ── loading ────────────────────────────────────────────────────────────────────────────────
+    function historyQuery(machineId, now) {
+      return 'since=' + Math.trunc(Math.max(0, Number(now) - HISTORY_MS))
+        + (machineId ? '&machine=' + encodeURIComponent(machineId) : '');
+    }
+
+    function loadHistories(now) {
+      var reachable = state.machines.filter(function (machine) {
+        return machine && machine.instanceId && String(machine.health || '').toLowerCase() === 'reachable';
+      });
+      return Promise.all(reachable.map(function (machine) {
+        var id = normId(machine.instanceId);
+        return api('/api/host/stats?' + historyQuery(id, now))
+          .then(function (payload) { state.histories[id] = payload || null; return null; })
+          .catch(function () {
+            // HANDLE: one box's sparkline is decoration; its card still renders from the hub's sample.
+            state.histories[id] = null;
+            return null;
+          });
+      }));
+    }
+
+    // P-7: after every successful /api/machines load, remember who this phone has reached. `self` is
+    // this origin; members keep whatever lastSeenAt they already had.
+    function rememberOrigins() {
+      var failover = failoverModule();
+      if (!failover || typeof failover.rememberPoolOrigins !== 'function') return null;
+      var selfOrigin = String((root.location && root.location.origin) || '');
+      var self = {
+        instanceId: state.selfInstanceId,
+        displayName: (state.selfSettings && state.selfSettings.displayName) || '',
+        urls: (state.self && state.self.urls) || (selfOrigin ? [selfOrigin] : []),
+        health: 'reachable',
+      };
+      try {
+        return failover.rememberPoolOrigins(state.machines, self, { storage: d.storage, now: clock });
+      } catch (error) {
+        return null; // HANDLE: a blocked dial cache must never break the Machines page
+      }
+    }
+
+    function load(options) {
+      var opts = options || {};
+      if (!opts.silent) state.loading = true;
+      var now = at();
+      return Promise.all([
+        api('/api/machines'),
+        api('/api/machine-self'),
+        api('/api/host/stats?' + historyQuery('', now)),
+      ]).then(function (results) {
+        var list = results[0] || {};
+        var self = results[1] || {};
+        state.loading = false;
+        state.error = '';
+        state.machines = Array.isArray(list.machines) ? list.machines.filter(function (m) { return m && m.instanceId; }) : [];
+        state.selfSettings = self.self || null;
+        state.self = results[2] || null;
+        state.selfInstanceId = normId((state.self && state.self.instanceId) || self.instanceId);
+        state.loaded = true;
+        rememberOrigins();
+        state.origins = poolOrigins();
+        return loadHistories(now).then(function () {
+          render();
+          return true;
+        });
+      }).catch(function (error) {
+        // REPORT: a transport failure is shown on the page, never swallowed into an empty list.
+        state.loading = false;
+        state.error = 'machines_unavailable: ' + ((error && error.message) || 'fetch failed');
+        render();
+        return false;
+      });
+    }
+
+    // ── writes (machine-owned settings, D-4 rev 2) ─────────────────────────────────────────────
+    function selfPath(instanceId) {
+      var id = normId(instanceId);
+      return '/api/machine-self' + (id ? '?machine=' + encodeURIComponent(id) : '');
+    }
+
+    function applySelfPatch(instanceId, patch) {
+      return api(selfPath(instanceId), { method: 'POST', body: patch || {} })
+        .then(function () { setStatus(''); return load({ silent: true }); })
+        .catch(function (error) {
+          // REPORT: the server's refusal (or the transport fault) is what the user needs to see.
+          setStatus(serverError(error));
+          return false;
+        });
+    }
+
+    function toggle(instanceId, field) {
+      if (field !== 'favorite' && field !== 'hidden') return Promise.resolve(false);
+      var id = normId(instanceId);
+      var current = id
+        ? state.machines.filter(function (m) { return normId(m && m.instanceId) === id; })[0]
+        : state.selfSettings;
+      var patch = {};
+      patch[field] = (current && (current[field] === 1 || current[field] === true)) ? 0 : 1;
+      return applySelfPatch(id, patch);
+    }
+
+    function rename(instanceId, value) {
+      var name = String(value == null ? '' : value).trim();
+      if (name.length > 80) {
+        setStatus('display_name_too_long');
+        return Promise.resolve(false);
+      }
+      return applySelfPatch(normId(instanceId), { displayName: name });
+    }
+
+    function removeMachine(instanceId) {
+      var id = normId(instanceId);
+      if (!id) return Promise.resolve(false);
+      var machine = state.machines.filter(function (row) { return normId(row && row.instanceId) === id; })[0];
+      var name = machineName(machine) || id;
+      if (confirmImpl && !confirmImpl('Remove ' + name + ' from this machine?')) return Promise.resolve(false);
+      return api('/api/machines/' + encodeURIComponent(id) + '/remove', { method: 'POST' })
+        .then(function (data) {
+          var payload = data || {};
+          var rotated = Array.isArray(payload.rotated) ? payload.rotated : [];
+          var unreachable = Array.isArray(payload.unreachable) ? payload.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(', ') + '.';
+          setStatus(note);
+          return load({ silent: true });
+        })
+        .catch(function (error) {
+          // REPORT: a failed removal must never look like a successful one.
+          setStatus(serverError(error));
+          return false;
+        });
+    }
+
+    function leavePool() {
+      if (confirmImpl && !confirmImpl('Leave the machine pool? This phone drops the shared secret and its machine list.')) {
+        return Promise.resolve(false);
+      }
+      return api('/api/pool/leave', { method: 'POST', body: {} })
+        .then(function (data) {
+          setStatus('Left the pool (' + (Number((data || {}).removed) || 0) + ' rows dropped).');
+          return load({ silent: true });
+        })
+        .catch(function (error) {
+          // REPORT: an unreachable hub must not read as "you left the pool".
+          setStatus(serverError(error));
+          return false;
+        });
+    }
+
+    // "New session here": the EXISTING new-session sheet with this machine selected. app.js owns that
+    // modal, so there is no second create path.
+    function newSessionHere(instanceId) {
+      return Promise.resolve(openNewSession(normId(instanceId)));
+    }
+
+    function signInToo(origin) {
+      var target = String(origin || '').trim().replace(/\/+$/, '');
+      if (!/^https:\/\/[^/?#]+$/i.test(target)) {
+        setStatus('sign_in_origin_unavailable');
+        return false;
+      }
+      if (root.location && typeof root.location.assign === 'function') {
+        root.location.assign(target + '/m/');
+        return true;
+      }
+      return false;
+    }
+
+    // ── dialogs (Add machine, Show a code) ─────────────────────────────────────────────────────
+    function mountDialog(html) {
+      var doc = host || (typeof document !== 'undefined' ? document : null);
+      if (!doc || typeof doc.createElement !== 'function') return null;
+      var overlay = doc.createElement('div');
+      overlay.className = 'modal-backdrop';
+      overlay.innerHTML = html;
+      var parent = doc.body || doc.documentElement;
+      if (parent && typeof parent.appendChild === 'function') parent.appendChild(overlay);
+      return overlay;
+    }
+
+    function closeDialog() {
+      if (dialog && dialog.overlay && dialog.overlay.parentNode) dialog.overlay.parentNode.removeChild(dialog.overlay);
+      dialog = null;
+      return true;
+    }
+
+    function previewFields() {
+      return machinesAddPreview(
+        dialog && dialog.pairInput ? dialog.pairInput.value : '',
+        dialog && dialog.codeInput ? dialog.codeInput.value : '',
+        dialog && dialog.urlInput ? dialog.urlInput.value : '',
+      );
+    }
+
+    // RFC 8628 §5.4 parity with the desktop dialog: the box's OWN name is shown BEFORE Confirm is
+    // enabled, and a string that does not decode is refused with the server's own wording.
+    function paintPreview() {
+      if (!dialog) return null;
+      var preview = previewFields();
+      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 (https://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;
+      }
+      if (dialog.confirm) dialog.confirm.disabled = !preview.ok;
+      return preview;
+    }
+
+    function openAddDialog(options) {
+      var opts = options || {};
+      closeDialog();
+      var overlay = mountDialog('<section class="model-picker-sheet mp-modal" role="dialog" aria-modal="true" aria-labelledby="mp-add-title">'
+        + '<div class="model-picker-head"><div><h2 id="mp-add-title">Add a machine</h2>'
+        + '<p>Paste a pairing string from the other machine, or type its code and address.</p></div>'
+        + '<button type="button" class="model-picker-close" id="mp-add-cancel" aria-label="Close">&times;</button></div>'
+        + '<label class="mp-modal-label" for="mp-pair-input">Pairing string</label>'
+        + '<textarea id="mp-pair-input" class="mp-modal-input" rows="3" spellcheck="false" placeholder="ctmpair1:…"></textarea>'
+        + '<div id="mp-pair-preview" class="mp-pair-preview" role="status" aria-live="polite"></div>'
+        + '<p class="mp-modal-or">or</p>'
+        + '<input id="mp-pair-code" class="mp-modal-input" type="text" autocomplete="off" spellcheck="false" placeholder="XXXX-XXXX" aria-label="Pairing code">'
+        + '<input id="mp-pair-url" class="mp-modal-input" type="text" autocapitalize="off" autocomplete="off" spellcheck="false" placeholder="https://spark.r.walle.sh" aria-label="Machine address">'
+        + '<p id="mp-add-error" class="mp-modal-error" role="status" aria-live="polite"></p>'
+        + '<div class="mp-modal-actions">'
+        + '<button type="button" class="mp-btn mp-primary" id="mp-add-confirm" disabled>Add machine</button>'
+        + '</div>'
+        + '<details class="mp-modal-legacy"><summary>Register by URL (legacy)</summary>'
+        + '<p class="mp-modal-sub">An env-token box (P-8) that has not joined the pool. Its identity is pinned by the manifest it answers.</p>'
+        + '<input id="mp-legacy-url" class="mp-modal-input" type="text" autocomplete="off" spellcheck="false" placeholder="http://192.168.1.20:3456" aria-label="Legacy machine URL">'
+        + '<input id="mp-legacy-name" class="mp-modal-input" type="text" autocomplete="off" spellcheck="false" placeholder="Display name" aria-label="Legacy machine display name">'
+        + '<div class="mp-modal-actions"><button type="button" class="mp-btn" id="mp-legacy-submit">Register by URL</button></div>'
+        + '</details></section>');
+      if (!overlay) return null;
+      dialog = {
+        overlay: overlay,
+        pairInput: $('mp-pair-input'),
+        codeInput: $('mp-pair-code'),
+        urlInput: $('mp-pair-url'),
+        preview: $('mp-pair-preview'),
+        error: $('mp-add-error'),
+        confirm: $('mp-add-confirm'),
+      };
+      // P-8: "Join pool" on an env-token row opens this dialog with the row's address already filled.
+      if (opts.url && dialog.urlInput) dialog.urlInput.value = String(opts.url);
+      ['pairInput', 'codeInput', 'urlInput'].forEach(function (key) {
+        var node = dialog[key];
+        if (node && typeof node.addEventListener === 'function') node.addEventListener('input', paintPreview);
+      });
+      var cancel = $('mp-add-cancel');
+      if (cancel && typeof cancel.addEventListener === 'function') cancel.addEventListener('click', closeDialog);
+      if (dialog.confirm && typeof dialog.confirm.addEventListener === 'function') dialog.confirm.addEventListener('click', submitAddDialog);
+      var legacy = $('mp-legacy-submit');
+      if (legacy && typeof legacy.addEventListener === 'function') legacy.addEventListener('click', registerLegacy);
+      paintPreview();
+      return dialog;
+    }
+
+    function submitAddDialog() {
+      if (!dialog) return Promise.resolve(false);
+      var preview = previewFields();
+      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 api('/api/machines/pair', { method: 'POST', body: body })
+        .then(function () { closeDialog(); setStatus('Machine added.'); return load({ silent: true }); })
+        .catch(function (error) {
+          // REPORT: the server's code is relayed VERBATIM and the dialog stays open for a retry.
+          if (dialog && dialog.error) dialog.error.textContent = serverError(error);
+          return false;
+        });
+    }
+
+    function registerLegacy() {
+      var urlNode = $('mp-legacy-url');
+      var nameNode = $('mp-legacy-name');
+      var url = String((urlNode && urlNode.value) || '').trim();
+      var displayName = String((nameNode && nameNode.value) || '').trim();
+      var errorNode = (dialog && dialog.error) || $('mp-add-error');
+      if (!url) {
+        if (errorNode) errorNode.textContent = 'Enter the machine URL.';
+        return Promise.resolve(false);
+      }
+      return api('/api/machines', { method: 'POST', body: { url: url, displayName: displayName } })
+        .then(function () { closeDialog(); setStatus('Machine registered.'); return load({ silent: true }); })
+        .catch(function (error) {
+          // REPORT: the register refusal is shown verbatim in the dialog.
+          if (errorNode) errorNode.textContent = serverError(error);
+          return false;
+        });
+    }
+
+    function openShowCodeDialog() {
+      closeDialog();
+      var overlay = mountDialog('<section class="model-picker-sheet mp-modal" role="dialog" aria-modal="true" aria-labelledby="mp-code-title">'
+        + '<div class="model-picker-head"><div><h2 id="mp-code-title">Show a code for this machine</h2>'
+        + '<p>On the other machine, choose “Add machine” and paste this string — or type the code.</p></div>'
+        + '<button type="button" class="model-picker-close" id="mp-code-close" aria-label="Close">&times;</button></div>'
+        + '<div id="mp-code-value" class="mp-code-value" role="status" aria-live="polite">…</div>'
+        + '<textarea id="mp-pair-string" class="mp-modal-input" rows="4" readonly spellcheck="false" aria-label="Pairing string"></textarea>'
+        + '<p id="mp-code-error" class="mp-modal-error" role="status" aria-live="polite"></p>'
+        + '</section>');
+      if (!overlay) return null;
+      dialog = { overlay: overlay, codeValue: $('mp-code-value'), pairString: $('mp-pair-string'), error: $('mp-code-error') };
+      var close = $('mp-code-close');
+      if (close && typeof close.addEventListener === 'function') close.addEventListener('click', closeDialog);
+      return api('/api/machine-pairing/offers', { method: 'POST', body: {} })
+        .then(function (data) {
+          var payload = data || {};
+          if (dialog && dialog.codeValue) dialog.codeValue.textContent = String(payload.code || '');
+          if (dialog && dialog.pairString) dialog.pairString.value = String(payload.pairingString || '');
+          return true;
+        })
+        .catch(function (error) {
+          // REPORT: the offer failure stays in the dialog so the user can retry.
+          if (dialog && dialog.error) dialog.error.textContent = serverError(error);
+          return false;
+        });
+    }
+
+    // ── WP-9 (§9 S-9, AC-9a..AC-9d): the row's one Skills line and its Review sheet ─────────────
+    // PHONE = DESKTOP PARITY: the same line, the same three sections, the same actions and the same
+    // wording public/js/app/machines-page.js renders. AC-9c: a row with `skills: null` renders exactly
+    // the card it rendered before this work — the line builder returns '' and nothing else moved.
+    var SKILL_REASONS = {
+      platform: 'macOS-only',
+      hub_home_path: 'points at a path that exists only on this laptop',
+      too_large: 'too large to send',
+      unreadable: 'could not be read',
+    };
+    var SKILL_STATES = {
+      new_on_box: 'new on this machine',
+      same: 'same as the hub',
+      shadows_hub: 'this machine’s copy wins',
+      changed_on_box: 'changed on this machine',
+      conflict: 'both sides changed',
+    };
+    var BOX_LOCAL_STATES = ['new_on_box', 'changed_on_box', 'conflict', 'shadows_hub'];
+    var DIFF_LINE_CAP = 400;
+    var review = { instanceId: '', skipped: {}, fromHub: null };
+
+    function skillsBlock(machine) {
+      var block = machine && machine.skills;
+      return block && typeof block === 'object' ? block : null;
+    }
+
+    function skillReasonLabel(reason) {
+      var key = String(reason || '');
+      return SKILL_REASONS[key] || key || 'held back';
+    }
+
+    function skillStateLabel(value) {
+      var key = String(value || '');
+      return SKILL_STATES[key] || key || 'differs';
+    }
+
+    function skillsHeldBack(machine) {
+      var block = skillsBlock(machine);
+      return block && Array.isArray(block.heldBack) ? block.heldBack : [];
+    }
+
+    function skillsOnBox(machine) {
+      var block = skillsBlock(machine);
+      return block && Array.isArray(block.onBox) ? block.onBox : [];
+    }
+
+    function skillsPlugins(machine) {
+      var block = skillsBlock(machine);
+      return block && Array.isArray(block.plugins) ? block.plugins : [];
+    }
+
+    function skillsExcluded(machine) {
+      var block = skillsBlock(machine);
+      return block && Array.isArray(block.excludePlugins) ? block.excludePlugins : [];
+    }
+
+    function skillsBoxLocalCount(machine) {
+      return skillsOnBox(machine).filter(function (item) {
+        return item && BOX_LOCAL_STATES.indexOf(String(item.state)) !== -1;
+      }).length;
+    }
+
+    function skillsLineText(machine) {
+      var block = skillsBlock(machine);
+      if (!block) return '';
+      var parts = [(Number(block.sentCount) || 0) + ' sent'];
+      var heldBack = skillsHeldBack(machine).length;
+      if (heldBack) parts.push(heldBack + ' held back');
+      var local = skillsBoxLocalCount(machine);
+      if (local) parts.push(local + ' new on ' + machineName(machine));
+      var text = 'Skills: ' + parts.join(' · ');
+      var error = block.pushError;
+      if (error && (error.message || error.code)) text += ' · last push failed: ' + String(error.message || error.code);
+      return text;
+    }
+
+    function skillsNeedsReview(machine) {
+      if (!skillsBlock(machine)) return false;
+      if (skillsHeldBack(machine).length) return true;
+      if (skillsBoxLocalCount(machine)) return true;
+      var excluded = skillsExcluded(machine);
+      return skillsPlugins(machine).some(function (plugin) { return excluded.indexOf(plugin) === -1; });
+    }
+
+    function skillsRowHtml(machine) {
+      if (!skillsBlock(machine)) return ''; // AC-9c: no block, no bytes
+      var id = normId(machine && machine.instanceId);
+      return '<div class="mp-skills"><span class="mp-skills-line">' + esc(skillsLineText(machine)) + '</span>'
+        + (skillsNeedsReview(machine)
+          ? '<button type="button" class="mp-btn mp-skills-review" data-machine-review="' + esc(id) + '">Review</button>'
+          : '')
+        + '</div>';
+    }
+
+    // ── WP-3: the Models line + the Review sheet's Models section (§6.2, §8 WP-3) ────────────────
+    // The phone twin of public/js/app/machines-page.js: the same states, the same strings, from the
+    // same row block (lib/machine-registry.js `_modelsBlockFrom`, read on the 60 s probe tick).
+    // `null` = never read, or a box that predates WP-1 — then this card renders exactly the bytes it
+    // rendered before this work (AC-3a), so every builder below returns '' for null.
+
+    function modelsUnreachable(machine) {
+      var block = modelsBlock(machine);
+      return block && Array.isArray(block.unreachable) ? block.unreachable : [];
+    }
+
+    function modelsUnreachableLabel(machine, item) {
+      if (String((item && item.type) || '').toLowerCase() === 'ollama') return 'nothing is running there';
+      return "can't be reached from " + machineName(machine);
+    }
+
+    function modelsReachLabel(machine, reach) {
+      return (String(reach || '') === 'reachable' ? 'can be reached from ' : "can't be reached from ")
+        + machineName(machine);
+    }
+
+    function modelsLineText(machine) {
+      var block = modelsBlock(machine);
+      if (!block) return '';
+      var parts = [(Number(block.usable) || 0) + ' usable'];
+      var unreachable = modelsUnreachable(machine).length;
+      if (unreachable) parts.push(unreachable + " can't be reached from " + machineName(machine));
+      return 'Models: ' + parts.join(' · ');
+    }
+
+    function modelsNeedsReview(machine) {
+      if (!modelsBlock(machine)) return false;
+      if (modelsUnreachable(machine).length) return true;
+      return modelsDelegateWarnings(machine).length > 0;
+    }
+
+    function modelsRowHtml(machine) {
+      if (!modelsBlock(machine)) return ''; // AC-3a: no block, no bytes
+      var id = normId(machine && machine.instanceId);
+      return '<div class="mp-models"><span class="mp-models-line">' + esc(modelsLineText(machine)) + '</span>'
+        + (modelsNeedsReview(machine)
+          ? '<span class="mp-models-sep">—</span>'
+            + '<button type="button" class="mp-btn mp-models-review" data-machine-review="' + esc(id) + '">Review</button>'
+          : '')
+        + modelsDelegateWarnings(machine).map(function (text) {
+          return '<span class="mp-models-warn">' + esc(text) + '</span>';
+        }).join('')
+        + '</div>';
+    }
+
+    /** WP-9 title, extended by WP-3: the sheet names whichever of the two blocks the row has. */
+    function reviewTitle(machine) {
+      var name = machineName(machine);
+      var hasSkills = !!skillsBlock(machine);
+      var hasModels = !!modelsBlock(machine);
+      if (hasSkills && hasModels) return 'Skills and models on ' + name;
+      if (hasModels) return 'Models on ' + name;
+      return 'Skills on ' + name;
+    }
+
+    /** WP-3: a row is reviewable while EITHER block has something to show; an absent block renders
+     *  no section, so a models-only row opens a Models-only sheet. */
+    function reviewOpenable(machine) {
+      return !!skillsBlock(machine) || modelsNeedsReview(machine);
+    }
+
+    /** WP-3 + WP-4 (desktop parity): the sheet's Models section. WP-4 puts ONE control on the
+     *  unreachable rows — a checkbox, because the route ids are the box's own — and the matching
+     *  "Remove from <name>" button under the list; never on the /delegate rows. Nothing unreachable →
+     *  no control at all, and the button stays disabled until a row is ticked. */
+    function reviewModelsHtml(machine) {
+      if (!modelsBlock(machine)) return ''; // no block, no section
+      var name = machineName(machine);
+      var unreachable = modelsUnreachable(machine);
+      var rows = unreachable.map(function (item) {
+        var id = String((item && item.id) || '');
+        return '<li class="mp-review-item" data-route="' + esc(id) + '">'
+          + '<label class="mp-review-pick"><input type="checkbox" data-role="models-pick" value="' + esc(id) + '"'
+          + ' aria-label="' + esc('Remove ' + id + ' from ' + name) + '">'
+          + '<span class="mp-review-name">' + esc(id) + '</span></label>'
+          + '<span class="mp-review-meta">'
+          + esc([String((item && item.type) || ''), String((item && item.origin) || '')].filter(Boolean).join(' · '))
+          + '</span>'
+          + '<span class="mp-review-where">' + esc(modelsUnreachableLabel(machine, item)) + '</span></li>';
+      });
+      if (!rows.length) rows.push('<li class="mp-review-empty">Every route on this machine can be reached.</li>');
+      modelsDelegate(machine).forEach(function (entry) {
+        var route = String((entry && entry.routeId) || '');
+        var meta = [String((entry && entry.model) || ''), route ? 'route ' + route : ''].filter(Boolean).join(' · ');
+        rows.push('<li class="mp-review-item" data-agent="' + esc(String((entry && entry.agent) || '')) + '">'
+          + '<span class="mp-review-name">' + esc(String((entry && entry.agent) || '')) + '</span>'
+          + '<span class="mp-review-meta">' + esc(meta) + '</span>'
+          + '<span class="mp-review-where">' + esc(modelsReachLabel(machine, entry && entry.reach)) + '</span></li>');
+      });
+      var remove = unreachable.length
+        ? '<div class="mp-review-models-remove"><button type="button" class="mp-btn mp-danger" data-role="models-remove"'
+          + ' disabled>Remove from ' + esc(name) + '</button></div>'
+        : '';
+      return '<section class="mp-review-section" data-section="models"><h4>Models on ' + esc(name)
+        + '</h4><ul>' + rows.join('') + '</ul>' + remove + fromHubHtml(machine) + '</section>';
+    }
+
+    /** WP-5 (desktop parity): the "From this hub" subsection — the routes THIS hub holds that the
+     *  machine does not, one row each, each row with its OWN "Use on <name>" button. No checkbox and
+     *  no bulk control (AC-5c: nothing here can copy more than one route). The list is read ONCE per
+     *  open and read again after a copy or a remove. */
+    function fromHubState(machine) {
+      var id = normId(machine && machine.instanceId);
+      var store = review && review.fromHub;
+      if (!store || normId(store.instanceId) !== id) return { status: 'loading' };
+      if (store.error) return { status: 'error', error: String(store.error) };
+      return { status: 'ready', routes: Array.isArray(store.routes) ? store.routes : [] };
+    }
+
+    function fromHubItemsHtml(machine) {
+      if (!modelsBlock(machine)) return ''; // no block, no subsection
+      var name = machineName(machine);
+      var id = normId(machine && machine.instanceId);
+      var view = fromHubState(machine);
+      if (view.status === 'loading') {
+        return '<li class="mp-review-empty">' + esc('Looking for routes this hub has that ' + name + ' lacks…') + '</li>';
+      }
+      if (view.status === 'error') return '<li class="mp-review-note">' + esc(view.error) + '</li>';
+      if (!view.routes.length) {
+        return '<li class="mp-review-empty">' + esc('This hub has no other routes ' + name + ' could use.') + '</li>';
+      }
+      return view.routes.map(function (route) {
+        var routeId = String((route && route.id) || '');
+        var label = String((route && route.name) || '') || routeId;
+        var origin = String((route && route.origin) || '');
+        var meta = [String((route && route.type) || ''), origin].filter(Boolean).join(' · ');
+        return '<li class="mp-review-item" data-hub-route="' + esc(routeId) + '">'
+          + '<span class="mp-review-name">' + esc(label) + '</span>'
+          + '<span class="mp-review-meta">' + esc(meta) + '</span>'
+          + '<span class="mp-review-actions"><button type="button" class="mp-btn mp-primary" data-role="models-copy"'
+          + ' data-route-id="' + esc(routeId) + '" data-origin="' + esc(origin) + '">'
+          + 'Use on ' + esc(name) + '</button></span></li>';
+      }).join('');
+    }
+
+    function fromHubHtml(machine) {
+      if (!modelsBlock(machine)) return '';
+      return '<div class="mp-review-from-hub" data-section="from-hub"><h5>From this hub</h5>'
+        + '<ul class="mp-review-list" data-role="from-hub">' + fromHubItemsHtml(machine) + '</ul></div>';
+    }
+
+    /** Repaint ONLY the list: the rest of the open sheet (and the note an action just wrote) stays. */
+    function fromHubPaint() {
+      var overlay = dialog && dialog.overlay;
+      var machine = reviewMachine();
+      if (!overlay || typeof overlay.querySelector !== 'function' || !modelsBlock(machine)) return false;
+      var node = overlay.querySelector('[data-role="from-hub"]');
+      if (!node) return false;
+      node.innerHTML = fromHubItemsHtml(machine);
+      return true;
+    }
+
+    /** WP-5: ONE read of `models/copyable` per open, stored on the open sheet's own state. A refusal
+     *  is the server's own code and is shown, never retried — there is no timer here. */
+    function fetchFromHub(instanceId) {
+      var id = normId(instanceId);
+      if (!id) return Promise.resolve(false);
+      review.fromHub = { instanceId: id, loading: true };
+      fromHubPaint();
+      return api('/api/machines/' + encodeURIComponent(id) + '/models/copyable')
+        .then(function (payload) {
+          if (normId(review.instanceId) !== id) return false; // the sheet moved on meanwhile
+          review.fromHub = {
+            instanceId: id,
+            routes: (payload && Array.isArray(payload.routes)) ? payload.routes : [],
+          };
+          fromHubPaint();
+          return true;
+        })
+        .catch(function (error) {
+          // REPORT: the subsection says why it is empty; the sheet stays open and nothing is retried.
+          if (normId(review.instanceId) !== id) return false;
+          review.fromHub = { instanceId: id, error: serverError(error) };
+          fromHubPaint();
+          return false;
+        });
+    }
+
+    /** The name a row was painted with — the success note says what travelled, in the user's words. */
+    function fromHubRouteName(routeId) {
+      var routes = (review && review.fromHub && Array.isArray(review.fromHub.routes)) ? review.fromHub.routes : [];
+      var match = routes.filter(function (route) {
+        return String((route && route.id) || '') === String(routeId == null ? '' : routeId);
+      })[0];
+      return String((match && match.name) || '') || String(routeId == null ? '' : routeId);
+    }
+
+    /** WP-5: after a copy or a remove, re-read BOTH the list and what this hub could still offer. */
+    function reloadReview() {
+      var id = normId(review && review.instanceId);
+      return reviewRefresh().then(function () {
+        return fetchFromHub(id);
+      });
+    }
+
+    /** WP-5 / AC-5c (desktop parity): "Use on <name>" — ONE route and its key, and nothing else; the
+     *  confirm says so before anything is sent, and `expectOrigin` is the origin the row was painted
+     *  with, so a route that moved on the hub is refused instead of copied. */
+    function copyModel(instanceId, button) {
+      var id = normId(instanceId);
+      var name = machineName(reviewMachine() || { instanceId: id });
+      var attr = function (key) {
+        return button && typeof button.getAttribute === 'function' ? String(button.getAttribute(key) || '') : '';
+      };
+      var routeId = attr('data-route-id');
+      var origin = attr('data-origin');
+      if (!id || !routeId) return Promise.resolve(false);
+      var label = fromHubRouteName(routeId);
+      if (confirmImpl && !confirmImpl('Copies this route and its key to ' + name + '. Only this route is copied.')) {
+        return Promise.resolve(false);
+      }
+      busy(button, true);
+      return api('/api/machines/' + encodeURIComponent(id) + '/models/copy', {
+        method: 'POST',
+        body: { routeId: routeId, expectOrigin: origin },
+      }).then(function () {
+        busy(button, false);
+        // After the reload, which repaints the sheet (a note set first would be wiped).
+        return reloadReview().then(function (reloaded) {
+          reviewNote('Copied ' + label + ' to ' + name, 'ok');
+          return reloaded;
+        });
+      }).catch(function (error) {
+        // REPORT: the refusal (or the transport fault) stays on the sheet, which is still open.
+        busy(button, false);
+        reviewNote(serverError(error), 'bad');
+        return false;
+      });
+    }
+
+    function reviewItemKey(agent, name) {
+      return String(agent || '') + ':' + String(name || '');
+    }
+
+    function reviewHeldBackHtml(machine) {
+      if (!skillsBlock(machine)) return ''; // no block, no section (§8 WP-3)
+      var items = skillsHeldBack(machine);
+      var body = items.length
+        ? items.map(function (item) {
+          var where = item && item.file
+            ? '<span class="mp-review-where">' + esc(String(item.file) + (item.line ? ':' + item.line : '')) + '</span>'
+            : '';
+          return '<li class="mp-review-item" data-key="' + esc(reviewItemKey(item && item.agent, item && item.name)) + '">'
+            + '<span class="mp-review-name">' + esc(String((item && item.name) || '')) + '</span>'
+            + '<span class="mp-review-meta">' + esc([String((item && item.agent) || ''), skillReasonLabel(item && item.reason)].filter(Boolean).join(' · ')) + '</span>'
+            + where + '</li>';
+        }).join('')
+        : '<li class="mp-review-empty">Nothing was held back.</li>';
+      return '<section class="mp-review-section" data-section="held-back"><h4>Held back</h4><ul>' + body + '</ul></section>';
+    }
+
+    function reviewItemActionsHtml(instanceId, item) {
+      var state = String((item && item.state) || '');
+      var agent = String((item && item.agent) || '');
+      var name = String((item && item.name) || '');
+      var attrs = ' data-review-action data-review-id="' + esc(instanceId) + '" data-review-agent="' + esc(agent)
+        + '" data-review-name="' + esc(name) + '" data-review-box-hash="' + esc(String((item && item.boxHash) || '')) + '"';
+      var out = '';
+      if (state !== 'shadows_hub') out += '<button type="button" class="mp-btn mp-primary"' + attrs + ' data-review-verb="import">Import</button>';
+      if (state !== 'new_on_box') out += '<button type="button" class="mp-btn"' + attrs + ' data-review-verb="retire">Use the laptop’s copy</button>';
+      out += '<button type="button" class="mp-btn"' + attrs + ' data-review-skip>Skip</button>';
+      return out;
+    }
+
+    function reviewOnBoxHtml(machine) {
+      if (!skillsBlock(machine)) return ''; // no block, no section (§8 WP-3)
+      var id = normId(machine && machine.instanceId);
+      var items = skillsOnBox(machine).filter(function (item) { return item && String(item.state) !== 'same'; });
+      var body = items.length
+        ? items.map(function (item) {
+          var name = String((item && item.name) || '');
+          var key = reviewItemKey(item && item.agent, name);
+          return '<li class="mp-review-item" data-key="' + esc(key) + '">'
+            + '<span class="mp-review-name">' + esc(name) + '</span>'
+            + '<span class="mp-review-meta">' + esc([String((item && item.agent) || ''), skillStateLabel(item && item.state)].filter(Boolean).join(' · ')) + '</span>'
+            + '<span class="mp-review-actions">' + reviewItemActionsHtml(id, item)
+            + '<button type="button" class="mp-btn" data-review-diff data-review-id="' + esc(id) + '"'
+            + ' data-review-agent="' + esc(String((item && item.agent) || '')) + '" data-review-name="' + esc(name) + '">Show diff</button>'
+            + '</span><div class="mp-review-diff" hidden></div></li>';
+        }).join('')
+        : '<li class="mp-review-empty">This machine has no skills of its own.</li>';
+      return '<section class="mp-review-section" data-section="on-box"><h4>On ' + esc(machineName(machine)) + '</h4><ul>' + body + '</ul></section>';
+    }
+
+    function reviewPluginsHtml(machine) {
+      if (!skillsBlock(machine)) return ''; // no block, no section (§8 WP-3)
+      var plugins = skillsPlugins(machine);
+      var excluded = skillsExcluded(machine);
+      var body = plugins.length
+        ? plugins.map(function (plugin) {
+          var id = String(plugin);
+          return '<label class="mp-review-plugin"><input type="checkbox" value="' + esc(id) + '"'
+            + (excluded.indexOf(id) !== -1 ? ' checked' : '') + '> ' + esc(id) + '</label>';
+        }).join('')
+        : '<p class="mp-review-empty">The hub sends no plugins to this machine.</p>';
+      return '<section class="mp-review-section" data-section="plugins"><h4>Plugins</h4>'
+        + '<p class="mp-review-note">Checked plugins are not sent to this machine.</p>'
+        + '<div class="mp-review-plugins">' + body + '</div>'
+        + '<div class="mp-review-actions"><button type="button" class="mp-btn mp-primary" data-review-save-plugins'
+        + ' data-review-id="' + esc(normId(machine && machine.instanceId)) + '">Save</button></div></section>';
+    }
+
+    function reviewSheetHtml(machine) {
+      return '<section class="model-picker-sheet mp-modal mp-review-sheet" role="dialog" aria-modal="true" aria-labelledby="mp-review-title">'
+        + '<div class="model-picker-head"><div><h2 id="mp-review-title">' + esc(reviewTitle(machine)) + '</h2>'
+        + '<p>' + esc(skillsLineText(machine) || modelsLineText(machine)) + '</p></div>'
+        + '<button type="button" class="model-picker-close" id="mp-review-close" aria-label="Close">&times;</button></div>'
+        + '<p class="mp-review-note" data-role="review-note" role="status" aria-live="polite"></p>'
+        + reviewHeldBackHtml(machine) + reviewOnBoxHtml(machine) + reviewPluginsHtml(machine)
+        + reviewModelsHtml(machine)
+        + '<div class="mp-modal-actions"><button type="button" class="mp-btn" id="mp-review-done">Close</button></div>'
+        + '</section>';
+    }
+
+    function reviewMachine() {
+      var id = normId(review.instanceId);
+      return state.machines.filter(function (m) { return normId(m && m.instanceId) === id; })[0] || null;
+    }
+
+    function reviewNote(text, kind) {
+      var node = (dialog && dialog.overlay && typeof dialog.overlay.querySelector === 'function')
+        ? dialog.overlay.querySelector('[data-role="review-note"]') : null;
+      if (!node) return;
+      node.textContent = String(text || '');
+      node.className = 'mp-review-note' + (kind === 'bad' ? ' bad' : '');
+    }
+
+    /** Client-only Skip: the item leaves this sheet and stays gone across a repaint — no server call. */
+    function reviewSkip(button) {
+      if (!button || typeof button.getAttribute !== 'function') return false;
+      review.skipped[reviewItemKey(button.getAttribute('data-review-agent'), button.getAttribute('data-review-name'))] = true;
+      var item = typeof button.closest === 'function' ? button.closest('.mp-review-item') : null;
+      if (item) item.hidden = true;
+      return true;
+    }
+
+    function applySkips() {
+      var overlay = dialog && dialog.overlay;
+      if (!overlay || typeof overlay.querySelectorAll !== 'function') return;
+      Array.prototype.slice.call(overlay.querySelectorAll('.mp-review-item[data-key]') || []).forEach(function (item) {
+        var key = typeof item.getAttribute === 'function' ? item.getAttribute('data-key') : null;
+        if (key && review.skipped[key]) item.hidden = true;
+      });
+    }
+
+    /** AC-9a: re-read the list and repaint the OPEN sheet — never a page reload. */
+    function reviewRefresh() {
+      return load({ silent: true }).then(function () {
+        var machine = reviewMachine();
+        if (!(dialog && dialog.overlay && dialog.review)) return true; // the sheet was closed or replaced meanwhile
+        if (machine && reviewOpenable(machine)) {
+          dialog.overlay.innerHTML = reviewSheetHtml(machine);
+          bindSheet();
+          applySkips();
+        } else {
+          closeDialog(); // same as desktop machinesPageReviewPaint: nothing left to review → close
+        }
+        return true;
+      });
+    }
+
+    function openReviewSheet(instanceId) {
+      var id = normId(instanceId);
+      var machine = state.machines.filter(function (m) { return normId(m && m.instanceId) === id; })[0] || null;
+      if (!reviewOpenable(machine)) return null;
+      closeDialog();
+      review = { instanceId: id, skipped: {}, fromHub: null };
+      var overlay = mountDialog(reviewSheetHtml(machine));
+      if (!overlay) return null;
+      dialog = { overlay: overlay, review: true };
+      bindSheet();
+      // WP-5: one read of the hub's copyable routes per open — the sheet is already painted, so the
+      // subsection shows "Looking for…" until this lands.
+      fetchFromHub(id);
+      return dialog;
+    }
+
+    function bindSheet() {
+      var close = $('mp-review-close');
+      if (close && typeof close.addEventListener === 'function') close.addEventListener('click', closeDialog);
+      var done = $('mp-review-done');
+      if (done && typeof done.addEventListener === 'function') done.addEventListener('click', closeDialog);
+      // The sheet mounts on document.body (mountDialog), OUTSIDE the card whose delegated click/change
+      // listeners dispatch every data-review-* control — so a tap inside it never reached them.
+      // Binding the overlay to the same dispatcher (bind() is idempotent per scope) makes the sheet's
+      // Import / Use-the-laptop's-copy / Save / Remove-from-<box> controls work on the phone.
+      if (dialog && dialog.overlay && dialog.overlay.dataset) bind(dialog.overlay);
+    }
+
+    function busy(node, state_) {
+      if (!node || typeof node !== 'object') return;
+      node.disabled = !!state_;
+      if (typeof node.setAttribute === 'function') node.setAttribute('aria-busy', state_ ? 'true' : 'false');
+    }
+
+    function reviewActionFailed(error) {
+      var payload = (error && error.payload) || null;
+      var code = String((payload && (payload.error || payload.code)) || (error && (error.code || error.message)) || '');
+      if (Number(error && error.status) === 409 || code.indexOf('agent_skill_changed') !== -1) {
+        reviewNote('This skill changed on the box since you opened Review — reopen to see the new version.', 'bad');
+        return reviewRefresh();
+      }
+      reviewNote(serverError(error), 'bad');
+      return false;
+    }
+
+    function reviewAction(instanceId, agent, name, boxHash, verb, button) {
+      var action = String(verb) === 'retire' ? 'retire' : 'import';
+      var body = { agent: String(agent || ''), name: String(name || '') };
+      if (boxHash) body.expectBoxHash = String(boxHash);
+      busy(button, true);
+      return api('/api/machines/' + encodeURIComponent(normId(instanceId)) + '/skills/' + action, { method: 'POST', body: body })
+        .then(function () {
+          busy(button, false);
+          setStatus(action === 'import'
+            ? 'Imported ' + String(name || '') + ' from this machine.'
+            : 'This machine now uses the laptop’s copy of ' + String(name || '') + '.');
+          delete review.skipped[reviewItemKey(agent, name)];
+          return reviewRefresh();
+        })
+        .catch(function (error) {
+          // REPORT: the refusal (or the transport fault) stays on the sheet, which is still open.
+          busy(button, false);
+          return reviewActionFailed(error);
+        });
+    }
+
+    function savePlugins(instanceId, button) {
+      var overlay = dialog && dialog.overlay;
+      var excluded = [];
+      if (overlay && typeof overlay.querySelectorAll === 'function') {
+        Array.prototype.slice.call(overlay.querySelectorAll('.mp-review-plugins input') || []).forEach(function (box) {
+          if (box && box.checked) excluded.push(String(box.value == null ? '' : box.value));
+        });
+      }
+      busy(button, true);
+      return api('/api/machines/' + encodeURIComponent(normId(instanceId)) + '/skills/exclude-plugins', {
+        method: 'PUT',
+        body: { plugins: excluded },
+      }).then(function () {
+        busy(button, false);
+        setStatus(excluded.length
+          ? 'Plugins saved — ' + excluded.length + ' not sent to this machine.'
+          : 'Plugins saved — every plugin is sent to this machine.');
+        return reviewRefresh();
+      }).catch(function (error) {
+        busy(button, false);
+        reviewNote(serverError(error), 'bad');
+        return false;
+      });
+    }
+
+    /** WP-4: the route ids ticked in the open sheet — the only truth a Remove POST may be built from. */
+    function modelsChecked() {
+      var overlay = dialog && dialog.overlay;
+      var picked = [];
+      if (overlay && typeof overlay.querySelectorAll === 'function') {
+        Array.prototype.slice.call(overlay.querySelectorAll('[data-role="models-pick"]') || []).forEach(function (box) {
+          if (box && box.checked) picked.push(String(box.value == null ? '' : box.value));
+        });
+      }
+      return picked;
+    }
+
+    /** WP-4: one tick or untick → the button is live exactly while something is ticked. Returns the count. */
+    function modelsPicked() {
+      var overlay = dialog && dialog.overlay;
+      var count = modelsChecked().length;
+      var node = overlay && typeof overlay.querySelector === 'function'
+        ? overlay.querySelector('[data-role="models-remove"]') : null;
+      if (node) node.disabled = count === 0;
+      return count;
+    }
+
+    /** WP-4: "Remove from <name>" — the box deletes these routes and the keys it holds for them; the
+     *  hub keeps its own copies, which is what the confirm says before anything is sent. A cancelled
+     *  confirm is not a request, only the TICKED ids travel, and the sheet is re-read after. */
+    function removeModels(instanceId, button) {
+      var id = normId(instanceId);
+      var name = machineName(reviewMachine() || { instanceId: id });
+      if (!modelsChecked().length) return Promise.resolve(false);
+      if (confirmImpl && !confirmImpl('Deletes these routes and their keys from ' + name + '. This hub keeps its own copies.')) {
+        return Promise.resolve(false);
+      }
+      var routeIds = modelsChecked();
+      busy(button, true);
+      return api('/api/machines/' + encodeURIComponent(id) + '/models/remove', {
+        method: 'POST',
+        body: { routeIds: routeIds },
+      }).then(function (result) {
+        busy(button, false);
+        var data = (result && typeof result === 'object') ? result : {};
+        var removed = Array.isArray(data.removed) ? data.removed.length : routeIds.length;
+        var missing = Array.isArray(data.missing) ? data.missing.length : 0;
+        // The note goes AFTER the reload, which repaints the sheet. WP-5: the removals also change
+        // what this hub can offer, hence the reload of both lists.
+        return reloadReview().then(function (reloaded) {
+          reviewNote('Removed ' + removed + ' from ' + name + (missing ? ' · ' + missing + ' already gone' : ''), 'ok');
+          return reloaded;
+        });
+      }).catch(function (error) {
+        // REPORT: the refusal (or the transport fault) stays on the sheet, which is still open.
+        busy(button, false);
+        reviewNote(serverError(error), 'bad');
+        return false;
+      });
+    }
+
+    // The diff ALGORITHM is public/js/prompt-diff.js — the same module the desktop page loads in
+    // index.html and the phone does not, so the phone pulls the one copy in on first use (never a
+    // second implementation of the LCS).
+    var promptDiffPromise = null;
+
+    function promptDiffModule() {
+      if (root.PromptDiff && typeof root.PromptDiff.diffLines === 'function') return Promise.resolve(root.PromptDiff);
+      if (d.promptDiff && typeof d.promptDiff.diffLines === 'function') return Promise.resolve(d.promptDiff);
+      if (promptDiffPromise) return promptDiffPromise;
+      var doc = host || (typeof document !== 'undefined' ? document : null);
+      if (!doc || typeof doc.createElement !== 'function') return Promise.resolve(null);
+      var src = typeof d.promptDiffSrc === 'string' ? d.promptDiffSrc : '/js/prompt-diff.js';
+      promptDiffPromise = new Promise(function (resolve) {
+        var script = doc.createElement('script');
+        script.src = src;
+        script.onload = function () {
+          resolve(root.PromptDiff && typeof root.PromptDiff.diffLines === 'function' ? root.PromptDiff : null);
+        };
+        script.onerror = function () { resolve(null); };
+        var parent = doc.head || doc.body || doc.documentElement;
+        if (parent && typeof parent.appendChild === 'function') parent.appendChild(script);
+        else resolve(null);
+      });
+      return promptDiffPromise;
+    }
+
+    function diffFileHtml(module, boxFile, hubFile) {
+      var filePath = String((boxFile && boxFile.path) || (hubFile && hubFile.path) || '');
+      var size = Number((boxFile && boxFile.size) || (hubFile && hubFile.size) || 0);
+      var head = '<p class="mp-diff-file">' + esc(filePath) + '</p>';
+      if ((boxFile && boxFile.binary) || (hubFile && hubFile.binary)) {
+        return head + '<p class="mp-diff-binary">' + esc('binary file, ' + machineFormatBytes(size)) + '</p>';
+      }
+      var ops = module ? module.diffLines(hubFile ? String(hubFile.text || '') : '', boxFile ? String(boxFile.text || '') : '') : null;
+      if (!Array.isArray(ops)) return head + '<p class="mp-diff-binary">' + esc('binary file, ' + machineFormatBytes(size)) + '</p>';
+      var shown = ops.slice(0, DIFF_LINE_CAP);
+      return head + '<div class="mp-diff">' + shown.map(function (op) {
+        var cls = op.type === 'add' ? 'mp-diff-add' : (op.type === 'del' ? 'mp-diff-del' : 'mp-diff-eq');
+        var sign = op.type === 'add' ? '+' : (op.type === 'del' ? '-' : ' ');
+        return '<span class="' + cls + '">' + esc(sign + ' ' + op.text) + '</span>';
+      }).join('') + '</div>'
+        + (ops.length > shown.length ? '<p class="mp-review-note">' + esc('… ' + (ops.length - shown.length) + ' more lines') + '</p>' : '');
+    }
+
+    /** A preview payload + a diff module → the per-file markup. Pure, so the sheet is provable. */
+    function diffHtml(module, preview) {
+      var boxFiles = (preview && preview.box && Array.isArray(preview.box.files)) ? preview.box.files : [];
+      var hubFiles = (preview && preview.hub && Array.isArray(preview.hub.files)) ? preview.hub.files : [];
+      var hubByName = {};
+      hubFiles.forEach(function (file) { if (file && file.path) hubByName[String(file.path)] = file; });
+      var seen = {};
+      var out = boxFiles.map(function (file) {
+        var key = String((file && file.path) || '');
+        seen[key] = true;
+        return diffFileHtml(module, file, hubByName[key] || null);
+      });
+      hubFiles.forEach(function (file) {
+        var key = String((file && file.path) || '');
+        if (seen[key]) return;
+        out.push('<p class="mp-diff-file">' + esc(key) + '</p><p class="mp-diff-binary">'
+          + esc('only on this hub — importing replaces it (a backup is kept)') + '</p>');
+      });
+      return out.join('') || '<p class="mp-review-empty">No files on either side.</p>';
+    }
+
+    function diffNode(agent, name) {
+      var overlay = dialog && dialog.overlay;
+      if (!overlay || typeof overlay.querySelector !== 'function') return null;
+      var key = reviewItemKey(agent, name).replace(/"/g, '\\"');
+      var item = overlay.querySelector('.mp-review-item[data-key="' + key + '"]');
+      return item && typeof item.querySelector === 'function' ? item.querySelector('.mp-review-diff') : null;
+    }
+
+    /** AC-9b: the hub's copy vs the box's, through the ONE diff module (lazily loaded on the phone). */
+    function showDiff(instanceId, agent, name, button) {
+      var node = diffNode(agent, name);
+      if (node && !node.hidden) { node.hidden = true; return Promise.resolve(true); }
+      busy(button, true);
+      return api('/api/machines/' + encodeURIComponent(normId(instanceId)) + '/skills/preview?agent='
+        + encodeURIComponent(String(agent || '')) + '&name=' + encodeURIComponent(String(name || '')))
+        .then(function (payload) {
+          return promptDiffModule().then(function (module) {
+            busy(button, false);
+            node = diffNode(agent, name);
+            if (!node) return false;
+            node.hidden = false;
+            node.innerHTML = diffHtml(module, payload);
+            if (!module) node.innerHTML += '<p class="mp-review-note">' + esc('The diff module did not load — the file list above is still the truth.') + '</p>';
+            return true;
+          });
+        })
+        .catch(function (error) {
+          busy(button, false);
+          node = diffNode(agent, name);
+          if (node) {
+            node.hidden = false;
+            node.innerHTML = '<p class="mp-review-note">' + esc(serverError(error)) + '</p>';
+          }
+          return false;
+        });
+    }
+
+    // ── wiring ─────────────────────────────────────────────────────────────────────────────────
+    // ONE delegated click listener plus one change listener on the page, so a re-render never loses a
+    // binding and a rename input only writes on commit (desktop parity: rename on `change`).
+    // Fix round 3 (G): the code box reports itself the same way — the draft is kept in
+    // state.signInDrafts as the user types (and as focus moves), because the More page may replace the
+    // whole card between two keystrokes and the input's own value goes with it.
+    function bind(scope) {
+      if (!scope || typeof scope.addEventListener !== 'function' || scope.dataset.mpBound === '1') return false;
+      scope.dataset.mpBound = '1';
+      // The event's code input and its block key. The key is READ from the block's own attribute,
+      // never rebuilt by splitting: an instance id is uuid-like and contains hyphens itself.
+      function draftTargetOf(event) {
+        var target = event && event.target;
+        var code = target && typeof target.closest === 'function' ? target.closest('[data-sign-in-code]') : null;
+        if (!code) return null;
+        var block = typeof code.closest === 'function' ? code.closest('[data-machine-sign-in-block]') : null;
+        var key = block && typeof block.getAttribute === 'function'
+          ? String(block.getAttribute('data-machine-sign-in-block') || '')
+          : '';
+        return key ? { code: code, key: key } : null;
+      }
+      scope.addEventListener('input', function (event) {
+        var hit = draftTargetOf(event);
+        if (!hit) return;
+        state.signInDrafts[hit.key] = draftFromSignInInput(hit.code, true);
+      });
+      scope.addEventListener('focusin', function (event) {
+        var hit = draftTargetOf(event);
+        if (!hit) return;
+        state.signInDrafts[hit.key] = draftFromSignInInput(hit.code, true);
+      });
+      scope.addEventListener('focusout', function (event) {
+        var hit = draftTargetOf(event);
+        if (!hit) return;
+        // Fix round 3b (H): NOT `focused: false` outright. Chrome dispatches focusout on the input
+        // DURING the removal the More page performs, and at dispatch time a removal blur and a genuine
+        // one are indistinguishable — the user's next keystrokes would go to <body>. The value and the
+        // caret are stored now; the flag is decided one microtask later, when "was this input thrown
+        // away?" has an answer. A microtask, not a timer: this module still owns exactly one timer.
+        var entry = draftFromSignInInput(hit.code, true);
+        state.signInDrafts[hit.key] = entry;
+        Promise.resolve().then(function () {
+          // The input is gone, so the blur was the removal itself — keep `focused`, and the card the
+          // rebuild paints takes the focus back. (`=== false` strictly: a node without the property is
+          // treated as connected, i.e. as a real blur.)
+          if (hit.code.isConnected === false) return;
+          // Only the flag of THIS write is settled: a later input/focusin write has already replaced
+          // the entry and owns the truth about where the user is typing.
+          if (state.signInDrafts[hit.key] === entry) entry.focused = false;
+        });
+      });
+      scope.addEventListener('click', function (event) {
+        var target = event.target;
+        var closest = target && typeof target.closest === 'function' ? target.closest.bind(target) : null;
+        if (!closest) return;
+        var toggleNode = closest('[data-machine-toggle]');
+        if (toggleNode) {
+          event.preventDefault();
+          toggle(toggleNode.getAttribute('data-machine-toggle'), toggleNode.getAttribute('data-machine-field'));
+          return;
+        }
+        var newSession = closest('[data-machine-new-session]');
+        if (newSession) { event.preventDefault(); newSessionHere(newSession.getAttribute('data-machine-new-session')); return; }
+        var remove = closest('[data-machine-remove]');
+        if (remove) { event.preventDefault(); removeMachine(remove.getAttribute('data-machine-remove')); return; }
+        var join = closest('[data-machine-join]');
+        if (join) { event.preventDefault(); openAddDialog({ url: join.getAttribute('data-machine-url') || '' }); return; }
+        var signIn = closest('[data-machine-signin]');
+        if (signIn) { event.preventDefault(); signInToo(signIn.getAttribute('data-machine-signin')); return; }
+        // WP-9: the Review sheet's own actions (same verbs, same wording as the desktop dialog).
+        var reviewOpen = closest('[data-machine-review]');
+        if (reviewOpen) { event.preventDefault(); openReviewSheet(reviewOpen.getAttribute('data-machine-review')); return; }
+        var skip = closest('[data-review-skip]');
+        if (skip) { event.preventDefault(); reviewSkip(skip); return; }
+        var diff = closest('[data-review-diff]');
+        if (diff) {
+          event.preventDefault();
+          showDiff(diff.getAttribute('data-review-id'), diff.getAttribute('data-review-agent'), diff.getAttribute('data-review-name'), diff);
+          return;
+        }
+        var savePluginsNode = closest('[data-review-save-plugins]');
+        if (savePluginsNode) {
+          event.preventDefault();
+          savePlugins(savePluginsNode.getAttribute('data-review-id'), savePluginsNode);
+          return;
+        }
+        // WP-4: "Remove from <name>" — the instance id is the sheet's own (review.instanceId), never
+        // read back out of the markup.
+        var removeModelsNode = closest('[data-role="models-remove"]');
+        if (removeModelsNode) {
+          event.preventDefault();
+          removeModels(review.instanceId, removeModelsNode);
+          return;
+        }
+        // WP-5: "Use on <name>" — one route per tap, the sheet's own id, the row's own route/origin.
+        var copyModelNode = closest('[data-role="models-copy"]');
+        if (copyModelNode) {
+          event.preventDefault();
+          copyModel(review.instanceId, copyModelNode);
+          return;
+        }
+        var action = closest('[data-review-action]');
+        if (action) {
+          event.preventDefault();
+          reviewAction(
+            action.getAttribute('data-review-id'),
+            action.getAttribute('data-review-agent'),
+            action.getAttribute('data-review-name'),
+            action.getAttribute('data-review-box-hash'),
+            action.getAttribute('data-review-verb'),
+            action,
+          );
+          return;
+        }
+        // WP-3: sign a coding agent in ON another machine (the passkey row above is the CTM LOGIN).
+        var agentSignIn = closest('[data-machine-sign-in]');
+        if (agentSignIn) {
+          event.preventDefault();
+          machineSignIn(agentSignIn.getAttribute('data-machine-sign-in'), agentSignIn.getAttribute('data-machine-agent'), agentSignIn);
+          return;
+        }
+        var codeSubmit = closest('[data-sign-in-code-submit]');
+        var copyCode = closest('[data-sign-in-copy-code]');
+        if (codeSubmit || copyCode) {
+          event.preventDefault();
+          var block = closest('[data-machine-sign-in-block]');
+          // The instance id is a uuid-like string that itself contains hyphens, so it is read from
+          // the card (never by splitting the block's own key), and the agent from the block.
+          var card = block && typeof block.closest === 'function' ? block.closest('[data-machine-id]') : null;
+          var machineId = card ? card.getAttribute('data-machine-id') : '';
+          if (copyCode) {
+            var codeEl = block && typeof block.querySelector === 'function' ? block.querySelector('[data-sign-in-user-code]') : null;
+            copySignInCode(codeEl ? codeEl.textContent : '', copyCode);
+            return;
+          }
+          submitSignInCode(machineId, block ? block.getAttribute('data-machine-agent') : '', codeSubmit);
+          return;
+        }
+        if (closest('[data-machine-add]')) { event.preventDefault(); openAddDialog(); return; }
+        if (closest('[data-machine-show-code]')) { event.preventDefault(); openShowCodeDialog(); return; }
+        if (closest('[data-pool-leave]')) { event.preventDefault(); leavePool(); return; }
+        if (closest('[data-machines-refresh]')) { event.preventDefault(); load({ silent: true }); }
+      });
+      scope.addEventListener('change', function (event) {
+        var target = event.target;
+        var closest = target && typeof target.closest === 'function' ? target.closest.bind(target) : null;
+        // WP-4: a tick on a route row is the only thing that arms "Remove from <name>".
+        var pick = closest ? closest('[data-role="models-pick"]') : null;
+        if (pick) { modelsPicked(); return; }
+        var input = closest ? closest('[data-machine-rename]') : null;
+        if (!input) return;
+        rename(input.getAttribute('data-machine-rename'), input.value);
+      });
+      // Enter in the code box means the same thing as tapping Submit (desktop parity).
+      scope.addEventListener('keydown', function (event) {
+        if (!event || event.key !== 'Enter') return;
+        var target = event.target;
+        var closest = target && typeof target.closest === 'function' ? target.closest.bind(target) : null;
+        var input = closest ? closest('[data-sign-in-code]') : null;
+        if (!input) return;
+        event.preventDefault();
+        var block = closest('[data-machine-sign-in-block]');
+        var card = block && typeof block.closest === 'function' ? block.closest('[data-machine-id]') : null;
+        submitSignInCode(
+          card ? card.getAttribute('data-machine-id') : '',
+          block ? block.getAttribute('data-machine-agent') : '',
+          input,
+        );
+      });
+      return true;
+    }
+
+    return {
+      state: state,
+      render: render,
+      bind: bind,
+      load: load,
+      loadHistories: loadHistories,
+      headerHtml: headerHtml,
+      listHtml: listHtml,
+      bodyHtml: bodyHtml,
+      machineCardHtml: machineCardHtml,
+      selfCardHtml: selfCardHtml,
+      signInRowHtml: signInRowHtml,
+      // WP-3: the agent sign-in block (desktop parity) — presenters plus the two writes.
+      signInBlockHtml: signInBlockHtml,
+      signedOutAgents: signedOutAgents,
+      renderSignInBlock: renderSignInBlock,
+      machineSignIn: machineSignIn,
+      submitSignInCode: submitSignInCode,
+      // WP-3 fix (C)/(D): the bounded re-read and the card's own refusal copy.
+      signInErrorText: signInErrorText,
+      startSignInPoll: startSignInPoll,
+      stopSignInPoll: stopSignInPoll,
+      stopSignInPolls: stopSignInPolls,
+      credentialBadge: credentialBadge,
+      toggle: toggle,
+      rename: rename,
+      removeMachine: removeMachine,
+      leavePool: leavePool,
+      newSessionHere: newSessionHere,
+      signInToo: signInToo,
+      openAddDialog: openAddDialog,
+      submitAddDialog: submitAddDialog,
+      registerLegacy: registerLegacy,
+      openShowCodeDialog: openShowCodeDialog,
+      closeDialog: closeDialog,
+      // WP-9 (§9 S-9): the row line + Review sheet, exposed like every other presenter here.
+      skillsRowHtml: skillsRowHtml,
+      skillsLineText: skillsLineText,
+      skillsNeedsReview: skillsNeedsReview,
+      // WP-3 (§8 WP-3): the row line + Review sheet's Models half, exposed like the skills twins.
+      modelsRowHtml: modelsRowHtml,
+      modelsLineText: modelsLineText,
+      modelsNeedsReview: modelsNeedsReview,
+      reviewModelsHtml: reviewModelsHtml,
+      reviewSheetHtml: reviewSheetHtml,
+      reviewHeldBackHtml: reviewHeldBackHtml,
+      reviewOnBoxHtml: reviewOnBoxHtml,
+      reviewPluginsHtml: reviewPluginsHtml,
+      openReviewSheet: openReviewSheet,
+      reviewRefresh: reviewRefresh,
+      reviewAction: reviewAction,
+      reviewSkip: reviewSkip,
+      savePlugins: savePlugins,
+      // WP-4 (§8 WP-4): the Models section's one control — the ids, the arming, and the write.
+      modelsChecked: modelsChecked,
+      modelsPicked: modelsPicked,
+      removeModels: removeModels,
+      // WP-5 (§8 WP-5): the "From this hub" subsection — the rows, the one read, and the write.
+      fromHubHtml: fromHubHtml,
+      fromHubItemsHtml: fromHubItemsHtml,
+      fetchFromHub: fetchFromHub,
+      copyModel: copyModel,
+      showDiff: showDiff,
+      diffHtml: diffHtml,
+      preview: function () { return dialog ? previewFields() : null; },
+      dialog: function () { return dialog; },
+      readOrigins: poolOrigins,
+      rememberOrigins: rememberOrigins,
+    };
+  }
+
+  var out = {
+    create: create,
+    STALE_NOTE: STALE_NOTE,
+    HISTORY_MS: HISTORY_MS,
+    STATUS_ID: STATUS_ID,
+    // WP-3 fix (C): the bounded re-read's cadence and cap, so a spec asserts them instead of guessing.
+    SIGN_IN_POLL_MS: SIGN_IN_POLL_MS,
+    SIGN_IN_POLL_MAX_TICKS: SIGN_IN_POLL_MAX_TICKS,
+    // picker helpers (D-1/D-2/D-3), used by the phone new-session picker and provable on their own.
+    pickerMode: pickerMode,
+    sheetGroups: sheetGroups,
+    sheetRowHtml: sheetRowHtml,
+    sheetListHtml: sheetListHtml,
+    credentialBadge: credentialBadge,
+    // WP-3 (box-owned sessions): the one sentence for a /delegate pick the box cannot reach, read by
+    // the shared Delegate pane on the phone (PHONE = DESKTOP PARITY).
+    modelsDelegateWarnings: modelsDelegateWarnings,
+  };
+  if (typeof module === 'object' && module.exports) module.exports = out;
+  else root.CtmPhoneMachines = out;
+})(typeof window !== 'undefined' ? window : this);