create-walle 0.10.0 → 0.10.2

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

@@ -0,0 +1,1313 @@
+/* ===================================================================
+   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('');
+  }
+
+  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')); };
+    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) {
+      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('Tasks', esc(machineTaskLine(sample && sample.tasks)))
+        + factRow('Agents', esc(machineAgentText(agents)));
+    }
+
+    // ── 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;
+        });
+    }
+
+    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>'
+        + sparkBlock(cpuSeries, memSeries, cpuNow, memNow)
+        + '<div class="mp-facts">' + machineFactsHtml(sample, m.agents) + '</div>'
+        + signInBlockHtml(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)
+        + 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);
+      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;
+        });
+    }
+
+    // ── 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-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;
+        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,
+      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,
+  };
+  if (typeof module === 'object' && module.exports) module.exports = out;
+  else root.CtmPhoneMachines = out;
+})(typeof window !== 'undefined' ? window : this);