create-walle 0.10.0 → 0.10.2

package/template/coding-task-manager/public/js/core/session-commands.js

@@ -142,6 +142,106 @@ function createSessionModelControl(sessionId) {
   return control;
 }
 
+// ── WP-5 machine chip (docs/remote-machine-hub-sessions-2026-10-22.html §6.6, §8 S-14/S-15) ──
+// The branch badge's sibling: ONE presenter, rendered from the session row's own facts
+// (`machine` / `machineName` / `machineHealth`, served by the hub) and looked up GLOBALLY by
+// data-session-id so every refresh path keeps working after the toolbar reparent (§6.6,
+// S-15 — the same rule as _findSessionModelChip). A local session (`machine === ''`) gets NO
+// chip at all, so local rows render exactly as they did before this work (AC-5b).
+const MACHINE_HEALTH_UNREACHABLE = 'unreachable';
+// Card states that still render in the new-session grid: reachable is selectable, the other two
+// render DISABLED with their reason. `unreachable` machines are ABSENT from the grid (AC-5a).
+const MACHINE_CARD_STATES = ['reachable', 'unknown', 'unhealthy'];
+
+// Machine facts off either a `sessions`-frame row or a client session object (`s.meta`).
+function sessionMachineFacts(row) {
+  const meta = (row && row.meta) || row || {};
+  return {
+    machine: String(meta.machine || '').trim(),
+    name: String(meta.machineName || meta.machine_name || '').trim(),
+    health: String(meta.machineHealth || meta.machine_health || '').trim(),
+  };
+}
+
+// Pure presentation: null for a local session, else the label/title/health the chip renders.
+function machineChipPresentation(row) {
+  const facts = sessionMachineFacts(row);
+  if (!facts.machine) return null;
+  const name = facts.name || facts.machine;
+  const unreachable = facts.health === MACHINE_HEALTH_UNREACHABLE;
+  const title = unreachable
+    ? `Runs on ${name} — unreachable (showing its last known state)`
+    : `Runs on ${name}`;
+  return { name, health: facts.health, unreachable, title, label: (unreachable ? '⚠ ' : '◈ ') + name };
+}
+
+// HTML twin, for the row templates that build markup as strings.
+function machineChipHtml(row) {
+  const view = machineChipPresentation(row);
+  if (!view) return '';
+  const classes = 'machine-chip' + (view.unreachable ? ' unreachable' : '');
+  const id = _machineRowId(row);
+  return `<span class="${classes}" title="${escHtml(view.title)}" aria-label="${escHtml(view.title)}"`
+    + (id ? ` data-session-id="${escHtml(id)}"` : '')
+    + ` data-machine-name="${escHtml(view.name)}" data-machine-health="${escHtml(view.health)}">${escHtml(view.label)}</span>`;
+}
+
+// Node twin, for the tab chrome (built with createElement, like the branch badge).
+function machineSessionChipNode(row, sessionId) {
+  const view = machineChipPresentation(row);
+  if (!view) return null;
+  const chip = document.createElement('span');
+  chip.className = 'machine-chip' + (view.unreachable ? ' unreachable' : '');
+  chip.textContent = view.label;
+  chip.title = view.title;
+  chip.setAttribute('aria-label', view.title);
+  chip.dataset.machineName = view.name;
+  chip.dataset.machineHealth = view.health;
+  const id = String(sessionId || _machineRowId(row) || '');
+  if (id) chip.dataset.sessionId = id;
+  return chip;
+}
+
+function _machineRowId(row) {
+  if (!row) return '';
+  const meta = row.meta || {};
+  return String(row._id || row.sessionId || row.session_id || row.id || meta.id || meta.sessionId || '');
+}
+
+// The global lookup by data-session-id (same rule as the model chip): an active session's toolbar
+// is reparented into #tabbar-session-controls, so its container no longer holds the chip.
+function _findSessionMachineChip(sessionId) {
+  if (!sessionId) return null;
+  const escaped = (window.CSS && CSS.escape) ? CSS.escape(String(sessionId)) : String(sessionId);
+  return document.querySelector('.machine-chip[data-session-id="' + escaped + '"]');
+}
+
+// Repaint an already-mounted chip from fresh facts (health flips reachable -> unreachable without
+// a tab rebuild, since the tab unit's structural hash does not carry machine health).
+function refreshSessionMachineChip(row) {
+  const view = machineChipPresentation(row);
+  if (!view) return false;
+  const chip = _findSessionMachineChip(_machineRowId(row));
+  if (!chip) return false;
+  chip.textContent = view.label;
+  chip.title = view.title;
+  chip.setAttribute('aria-label', view.title);
+  chip.dataset.machineName = view.name;
+  chip.dataset.machineHealth = view.health;
+  chip.classList.toggle('unreachable', view.unreachable);
+  return true;
+}
+
+function refreshSessionMachineChips(rows) {
+  if (!Array.isArray(rows)) return 0;
+  let changed = 0;
+  for (const row of rows) {
+    if (!sessionMachineFacts(row).machine) continue;
+    if (refreshSessionMachineChip(row)) changed += 1;
+  }
+  return changed;
+}
+
 function createSessionsOverviewTab() {
   const tab = document.createElement('div');
   tab.className = `tab pinned-tab sessions-overview-tab ${isSessionsOverviewActive() ? 'active' : ''}`;
@@ -267,6 +367,11 @@ function _createStreamChromeSessionTab(unit) {
     : null;
   if (trackingBadge) tab.appendChild(trackingBadge);
 
+  // WP-5 (S-15/AC-5b): the machine chip sits beside the branch badge, built by the same
+  // presenter the sidebar rows use. Local sessions produce null and the tab is unchanged.
+  const machineChip = machineSessionChipNode(unit.session, id);
+  if (machineChip) tab.appendChild(machineChip);
+
   const lifecycleTemplate = document.createElement('template');
   lifecycleTemplate.innerHTML = lifecycleHtml;
   const lifecycleChip = lifecycleTemplate.content.firstElementChild;
@@ -479,6 +584,9 @@ function createSession() {
   var cwd = document.getElementById('ns-cwd').value || undefined;
   var label = document.getElementById('ns-label').value;
   var useWorktree = document.getElementById('ns-worktree').checked;
+  // WP-5 (S-12/§6.3): the selected machine travels with the create frame as `machine`; '' is this
+  // machine and the field is omitted, so the local create frame is byte-identical to today.
+  var machine = machineSelection();
   // WP-2 (design doc agent-context-budget-claude-codex-2026-09-26.html §5 C-1, §8 WP-2):
   // send the selected MCP profile for every agent (the server only applies it to
   // Claude/Codex, simpler than special-casing here) and remember it per project.
@@ -497,6 +605,7 @@ function createSession() {
 
   function _doCreate(finalCwd) {
     var msg = { type: 'create', cwd: finalCwd, label: label || undefined, mcp_profile: mcpProfile };
+    if (machine) msg.machine = machine;
     if (wantCreateCwd && !useWorktree && finalCwd) msg.createCwd = true;
     // Spawn the PTY at the terminal's real size so the agent's first paint
     // matches the final height (no 120x30→fit reflow that strands Codex's cursor).
@@ -538,6 +647,10 @@ function createSession() {
     }
     var createBtn = document.querySelector('#new-session-modal .btn.primary');
     if (createBtn) { createBtn.disabled = true; createBtn.textContent = 'Creating worktree...'; }
+    // WP-5 (S-12/§6.5): the worktree is created ON the selected machine, so `cwd` is the
+    // box-local path the picker returned and `machine` routes the request (the hub proxies
+    // POST /api/worktrees/create?machine=<id>). No local source field is ever named here —
+    // the box refuses `machine_source_mixed` if one is.
     _wtCreateWithProgress({
         name: wtName,
         cwd: cwd,
@@ -548,6 +661,7 @@ function createSession() {
         branch: wtName,
         subtitle: 'CTM is creating the isolated checkout before launching the session.',
         showAfterMs: 900,
+        machine: machine,
     })
       .then(function(d) {
         if (d.error) {
@@ -922,3 +1036,565 @@ function closeSessionPalette() {
   _sessionPaletteIdx = 0;
   _sessionPaletteItems = [];
 }
+
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+// WP-5 machine surfaces (docs/remote-machine-hub-sessions-2026-10-22.html §6.5, §6.6, D-11)
+//   S-11/S-13/AC-5a  new-session machine cards (agent-grid pattern) + per-machine path truth
+//   §6.5             box picker routing (every request carries ?machine=<id>) and the
+//                    same-repo prefill — plain gitRemoteKey equality, never client-side
+//                    normalization (the server normalizes both ends)
+//   Settings         register / list / remove machines (loopback-only writable, D-11)
+// No feature flag: with zero machines the card grids do not render and the modal is identical
+// to its pre-hub self (AC-5a).
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+
+// `''` is this machine — the default, and the only selection when the hub has no machines.
+// `renderedAt` is the clock the last card render judged D-12 staleness against, so a re-render
+// (a popover pick) cannot move the numbers under the user; `pickerMachine` is the D-1 row picked
+// from the popover, kept for THIS modal session only.
+const _nsMachineState = {
+  machines: [], localRepoKeyPath: null, localKeysRequested: false, localCwd: '',
+  renderedAt: 0, pickerMachine: '',
+};
+
+function machineSelection() {
+  const el = document.getElementById('ns-machine');
+  return el ? String(el.value || '') : '';
+}
+
+function machineSelectionName() {
+  const id = machineSelection();
+  if (!id) return 'This Mac';
+  const machine = _nsMachineState.machines.find(m => m && m.instanceId === id);
+  return (machine && (machine.displayName || machine.url)) || id;
+}
+
+// WP-4 (docs/dgx-spark-coding-readiness-2026-10-24.html): a box can be REACHABLE and still have a
+// coding CLI that is signed out, so a create would open at a login prompt. The hub refuses that
+// create on its own (lib/remote-machine-create.js → machine_agent_signed_out), so the card only
+// has to SAY it: the box stays selectable because shell sessions still work there. `agents` is the
+// hub's last-read verdict ({claude, codex, checkedAt}); a missing field, or any value that is not
+// exactly 'signed_out' (signed_in / unknown), adds nothing — the view is then byte-identical to
+// its pre-WP-4 self.
+// WP-6: the labels themselves are the ONE shared copy, MACHINE_AGENT_LABELS in
+// public/js/machine-pool-shared.js, which public/index.html loads before this file (the phone reads
+// the same pair through public/m/index.html). A second declaration here is exactly what S-18 forbids.
+function machineSignedOutAgents(machine) {
+  const agents = machine && machine.agents;
+  if (!agents || typeof agents !== 'object') return [];
+  return ['claude', 'codex']
+    .filter((key) => agents[key] === 'signed_out')
+    .map((key) => MACHINE_AGENT_LABELS[key]);
+}
+
+// AC-5a: reachable is selectable; unknown/unhealthy render DISABLED carrying their reason;
+// unreachable (and any state the hub may add later) is ABSENT from the grid.
+function machineCardView(machine, now) {
+  const health = String((machine && machine.health) || '').trim();
+  if (MACHINE_CARD_STATES.indexOf(health) === -1) return null;
+  const id = String((machine && machine.instanceId) || '');
+  if (!id) return null;
+  const name = (machine.displayName || machine.url || id);
+  const note = health === 'reachable'
+    ? (machine.url || '')
+    : health === 'unknown'
+      ? 'Health unknown — the box is not answering probes'
+      : 'Unhealthy — the box is up but its hub is degraded';
+  const view = { id, name, health, sub: health === 'reachable' ? 'reachable' : note, disabled: health !== 'reachable', note };
+  // WP-4: only a reachable box can name an agent — a disabled card keeps its single reason.
+  if (health === 'reachable') {
+    const signInNeeded = machineSignedOutAgents(machine);
+    if (signInNeeded.length) view.signInNeeded = signInNeeded;
+  }
+  // D-12: the box's live numbers are the card's third line. A box the hub has never sampled adds
+  // NOTHING (the field is absent, never ''), so today's two-line card stays byte-identical and the
+  // existing "no new field at all" pin keeps holding.
+  const load = machineLoadLine(machine, now);
+  if (load) view.load = load;
+  return view;
+}
+
+function _nsMachineCardNode(view) {
+  const card = document.createElement('div');
+  card.className = 'ns-agent-card ns-machine-card' + (view.disabled ? ' disabled' : '');
+  card.dataset.value = view.id;
+  card.dataset.health = view.health;
+  card.style.setProperty('--ns-card-accent', view.disabled ? 'var(--warning, #e0af68)' : '#7aa2f7');
+  // WP-4: the card stays clickable and keeps its accent — only the sub line and the tooltip name
+  // the signed-out agents. '' here (nothing signed out) reproduces the pre-WP-4 strings exactly.
+  const signIn = !view.disabled && Array.isArray(view.signInNeeded) && view.signInNeeded.length
+    ? view.signInNeeded.join(', ')
+    : '';
+  // WP-3 (docs/remote-agent-sign-in-from-hub-browser-2026-10-25.html §9 S-14): the tooltip points
+  // at the Machines page, which signs in a box's coding agent through the hub's own proxy — the
+  // box's local page ("open <url> → AI Providers → Coding Agents → Sign in") is not reachable from
+  // a phone, and no longer the instruction on either surface.
+  card.title = view.disabled
+    ? view.name + ': ' + view.note
+    : signIn
+      ? 'Create this session on ' + view.name + ' — not signed in there: ' + signIn + ' (Sign in from the Machines page)'
+      : 'Create this session on ' + view.name;
+  const icon = document.createElement('div');
+  icon.className = 'ns-card-icon';
+  icon.style.background = view.disabled ? 'var(--warning, #e0af68)' : '#7aa2f7';
+  icon.textContent = view.id ? '◈' : '⌘';
+  const name = document.createElement('div');
+  name.className = 'ns-card-name';
+  name.textContent = view.name;
+  const sub = document.createElement('div');
+  sub.className = 'ns-card-sub';
+  sub.textContent = view.disabled ? 'unavailable' : (signIn ? 'sign in: ' + signIn : 'ready');
+  card.appendChild(icon);
+  card.appendChild(name);
+  card.appendChild(sub);
+  // D-12: the load line is the card's THIRD line and only exists when the hub holds a sample.
+  if (view.load) {
+    const load = document.createElement('div');
+    load.className = 'ns-card-load';
+    load.textContent = view.load;
+    card.appendChild(load);
+  }
+  if (!view.disabled) card.onclick = function() { _selectMachineCard(view.id); };
+  return card;
+}
+
+// ── WP-4 picker (docs/machine-pool-picker-pairing-dashboard-2026-10-24.html §5 D-1/D-2/D-3/D-12) ──
+// D-1: while N = 1 + the visible (non-hidden) registry rows is at most MACHINE_PICKER_CARD_LIMIT the
+// grid stays the one-click card row it has always been; above the limit it keeps This Mac + the top
+// three and adds a fifth "All machines (N)…" card. That card opens the APG combobox that already
+// ships as window.CtmModelPicker — P4: one combobox, never a fifth copy.
+//
+// WP-6: MACHINE_PICKER_CARD_LIMIT, MACHINE_STATS_STALE_MS, MACHINE_RECENT_MS and the presenters
+// below (machinePickerOrder / machineSearchText / machineLoadLine / machineIsOffline /
+// machineIsFavorite / machinePickerGroupRows / machineHealthLabel / machineLastSeenText) now live in
+// the ONE shared copy, public/js/machine-pool-shared.js, which public/index.html loads before this
+// file and public/m/index.html loads for the phone. This file keeps only the desktop grid/combobox.
+// The sentinel this card's data-value carries. It is never '' — an empty value would make
+// _selectMachineCard paint the "All machines" card as the selected machine.
+const MACHINE_ALL_CARD_VALUE = '__all_machines__';
+// WP-5 (D-14): the machine pool is a first-class page — nav target `machines`, hash `#machines`
+// (js/app/machines-page.js). index.html's router rewrites the old `#setup&tab=machines` deep link
+// onto it, so bookmarks keep working.
+const MACHINE_MANAGE_HREF = '#machines';
+const MACHINE_MANAGE_LABEL = 'Manage machines';
+const MACHINE_MANAGE_ID = 'ns-machine-manage';
+
+// The picker component, or null on a page that never loaded it (an older boot snapshot): the card
+// row still renders, the "All machines" card just does nothing.
+function _machinePickerComponent() {
+  if (typeof window !== 'undefined' && window && window.CtmModelPicker) return window.CtmModelPicker;
+  if (typeof CtmModelPicker !== 'undefined' && CtmModelPicker) return CtmModelPicker;
+  return null;
+}
+
+// D-1: the machine a row picked this modal session, moved into the THIRD top card. Cleared by
+// loadNewSessionMachines, so it can never outlive the modal it was chosen in.
+function _machineTopCardOrder(order) {
+  const forced = String(_nsMachineState.pickerMachine || '');
+  if (!forced) return order;
+  const chosen = order.find((m) => m.instanceId === forced);
+  if (!chosen) return order;
+  const rest = order.filter((m) => m.instanceId !== forced);
+  const head = rest.slice(0, MACHINE_PICKER_CARD_LIMIT - 2);
+  return head.concat([chosen], rest.slice(MACHINE_PICKER_CARD_LIMIT - 2));
+}
+
+// D-1: the top three cards, in order, skipping any row that produces no card at all (an unreachable
+// box stays out of the row — HUB AC-5a — but keeps its place in the popover's Offline group).
+function _nsMachineTopViews(order, now) {
+  const views = [];
+  for (const machine of _machineTopCardOrder(order)) {
+    if (views.length >= MACHINE_PICKER_CARD_LIMIT - 1) break;
+    const view = machineCardView(machine, now);
+    if (view) views.push(view);
+  }
+  return views;
+}
+
+// D-3 groups. Favorites and Recent are filtered views of All (a box may legitimately appear in two
+// groups); Offline carries the rows HUB AC-5a keeps out of the card row, disabled with the reason a
+// "where is my machine" search is looking for. WP-6: the group SET is the shared
+// machinePickerGroupRows (public/js/machine-pool-shared.js), so the phone's sheet lists the same
+// groups in the same order; this function only turns each row into a CtmModelPicker row.
+function _machinePickerGroups(now) {
+  const groups = machinePickerGroupRows(_nsMachineState.machines, now)
+    .map((group) => ({
+      id: group.id,
+      label: group.label,
+      rows: group.rows.map((machine) => _machinePickerRow(machine, group.id, now)),
+    }));
+  return {
+    groups,
+    emptyMessage: 'No machines yet',
+    noMatchMessage: 'No machine matches that search',
+  };
+}
+
+function _machinePickerRow(machine, groupId, now) {
+  const load = machineLoadLine(machine, now);
+  const row = {
+    // Group-scoped key: the same box may be listed in two groups, and only the option with this key
+    // is ever marked selected.
+    key: groupId + ':' + machine.instanceId,
+    label: machine.displayName || machine.hostname || machine.url || machine.instanceId,
+    sublabel: load,
+    search: machineSearchText(machine),
+    current: String(machine.instanceId) === machineSelection(),
+    data: { instanceId: machine.instanceId },
+  };
+  if (machineIsOffline(machine)) {
+    row.disabled = { reason: machineLastSeenText(machine) };
+    row.badges = [{ text: 'offline', tone: 'warn' }];
+  }
+  return row;
+}
+
+function _machinePickerDetail(row, now) {
+  const pane = document.createElement('div');
+  const machine = row && row.data
+    ? _nsMachineState.machines.find((m) => m && m.instanceId === row.data.instanceId)
+    : null;
+  if (!machine) {
+    pane.className = 'walle-model-config-provider';
+    pane.textContent = 'Pick a machine to see where the session will run.';
+    return pane;
+  }
+  const eyebrow = document.createElement('div');
+  eyebrow.className = 'walle-model-config-eyebrow';
+  eyebrow.textContent = 'Machine';
+  const title = document.createElement('div');
+  title.className = 'walle-model-config-title';
+  title.textContent = machine.displayName || machine.hostname || machine.url || machine.instanceId;
+  const meta = document.createElement('div');
+  meta.className = 'walle-model-config-provider';
+  meta.textContent = [
+    machineHealthLabel(machine),
+    machineLastSeenText(machine),
+    machineLoadLine(machine, now),
+    [machine.os, machine.arch].filter(Boolean).join('/'),
+    machine.url,
+  ].filter(Boolean).join(' · ');
+  pane.appendChild(eyebrow);
+  pane.appendChild(title);
+  pane.appendChild(meta);
+  return pane;
+}
+
+// D-1: choosing a row makes it the selected card for this modal session and goes through
+// _selectMachineCard, so the per-machine path truth (S-13) is re-keyed exactly as a card click does.
+function _machinePickerChoose(row) {
+  const id = row && row.data ? String(row.data.instanceId || '') : '';
+  const machine = id ? _nsMachineState.machines.find((m) => m && m.instanceId === id) : null;
+  if (!machine || machineIsOffline(machine)) return false;
+  _nsMachineState.pickerMachine = id;
+  renderNewSessionMachineCards(_nsMachineState.machines, _nsMachineState.renderedAt);
+  _selectMachineCard(id);
+  return true;
+}
+
+// The "All machines (N)…" card. It is a real button (role=button + tabindex + aria-haspopup), so
+// the APG keyboard contract holds: Enter/Space opens the popover and focus lands back here on close.
+function _nsMachineAllCardNode(count) {
+  const card = document.createElement('div');
+  card.className = 'ns-agent-card ns-machine-card ns-machine-all';
+  card.dataset.value = MACHINE_ALL_CARD_VALUE;
+  card.setAttribute('role', 'button');
+  card.setAttribute('tabindex', '0');
+  card.setAttribute('aria-haspopup', 'dialog');
+  card.title = 'Show all ' + count + ' machines';
+  const icon = document.createElement('div');
+  icon.className = 'ns-card-icon';
+  icon.style.background = '#7aa2f7';
+  icon.textContent = '⋯';
+  const name = document.createElement('div');
+  name.className = 'ns-card-name';
+  name.textContent = 'All machines (' + count + ')…';
+  card.appendChild(icon);
+  card.appendChild(name);
+  card.onclick = function() { openAllMachinesPicker(card); };
+  card.addEventListener('keydown', function(event) {
+    const key = String((event && event.key) || '');
+    if (key !== 'Enter' && key !== ' ' && key !== 'Spacebar') return;
+    if (typeof event.preventDefault === 'function') event.preventDefault();
+    openAllMachinesPicker(card);
+  });
+  return card;
+}
+
+// The popover's anchor, re-resolved because choosing a row re-renders the grid (the node we opened
+// from is detached) and focus must land on the live card (APG, AC-4c).
+function _nsMachineAllCardAnchor() {
+  const grid = document.getElementById('ns-machine-grid');
+  if (!grid || typeof grid.querySelectorAll !== 'function') return null;
+  const cards = grid.querySelectorAll('.ns-machine-all');
+  return cards && cards.length ? cards[0] : null;
+}
+
+function openAllMachinesPicker(anchor, now) {
+  const picker = _machinePickerComponent();
+  if (!picker || typeof picker.open !== 'function') return null;
+  const at = Number(now == null ? Date.now() : now);
+  return picker.open({
+    anchor: anchor,
+    title: 'Choose machine',
+    tabs: [{
+      id: 'machines',
+      label: 'Machines',
+      searchPlaceholder: 'Search machines',
+      loadRows: function() { return Promise.resolve(_machinePickerGroups(at)); },
+      detail: function(row) { return _machinePickerDetail(row, at); },
+      actions: [{ id: 'choose', label: 'Choose this machine', primary: true, disabled: (row) => !row || !!row.disabled }],
+      onApply: function(row) {
+        // An offline row can never be committed: the hub would have nowhere to put the session.
+        if (!_machinePickerChoose(row)) return Promise.resolve({ ok: false, message: 'That machine cannot be selected.' });
+        return Promise.resolve({ ok: true });
+      },
+    }],
+    onClose: function(reason) {
+      // APG AC-4c: focus returns to the "All machines" card. CtmModelPicker focuses the anchor it was
+      // given, but a pick has re-rendered the grid, so re-resolve the live card and fall back to it.
+      if (reason === 'replaced') return;
+      const back = _nsMachineAllCardAnchor() || anchor;
+      if (back && typeof back.focus === 'function') back.focus();
+    },
+  });
+}
+
+// Item 7: the "Manage machines" link under the grid. There is no slot in index.html for it (that
+// file is WP-5's), so it is created once and mounted as the grid's next sibling — the modal is its
+// parent, and no markup change is needed to place it.
+function _nsMachineManageLink() {
+  let link = document.getElementById(MACHINE_MANAGE_ID);
+  if (!link) {
+    link = document.createElement('a');
+    link.id = MACHINE_MANAGE_ID;
+    link.className = 'ns-machine-manage';
+    link.href = MACHINE_MANAGE_HREF;
+    link.textContent = MACHINE_MANAGE_LABEL;
+    link.title = 'Open the Machines page';
+  }
+  return link;
+}
+
+function _nsMachineMountManageLink(grid) {
+  const link = _nsMachineManageLink();
+  const parent = grid && grid.parentNode;
+  // Nothing to mount into (a bare DOM stub, or a detached grid): the caller still gets the node so
+  // it can flip its visibility.
+  if (!link || !parent || typeof parent.insertBefore !== 'function') return link;
+  if (link.parentNode !== parent) parent.insertBefore(link, grid.nextSibling || null);
+  return link;
+}
+
+function _nsMachineShowManageLink(link, on) {
+  if (link && link.style) link.style.display = on ? '' : 'none';
+}
+
+// AC-5a: with nothing renderable the block is removed from the DOM entirely (no grid, no
+// hidden input value), which is what keeps the zero-machine modal pixel-identical to today.
+// WP-4 D-1: above MACHINE_PICKER_CARD_LIMIT the grid keeps This Mac + the top three and adds the
+// "All machines (N)…" card, which is the only way to reach a box that never renders a card.
+function renderNewSessionMachineCards(machines, now) {
+  const grid = document.getElementById('ns-machine-grid');
+  const label = document.getElementById('ns-machine-label');
+  const hint = document.getElementById('ns-machine-hint');
+  const hidden = document.getElementById('ns-machine');
+  if (!grid || !label || !hidden) return false;
+  const at = Number(now == null ? Date.now() : now);
+  _nsMachineState.machines = (Array.isArray(machines) ? machines : []).filter(m => m && m.instanceId);
+  _nsMachineState.renderedAt = at;
+  const visible = _nsMachineState.machines.filter(m => !m.hidden);
+  // Registry order, filtered to the rows that render — today's grid, unchanged (AC-4a).
+  const views = visible.map(m => machineCardView(m, at)).filter(Boolean);
+  const manage = _nsMachineMountManageLink(grid);
+  if (!views.length) {
+    grid.textContent = '';
+    grid.style.display = 'none';
+    label.style.display = 'none';
+    hidden.value = '';
+    _nsMachineShowManageLink(manage, false);
+    if (hint) { hint.textContent = ''; hint.style.display = 'none'; }
+    return false;
+  }
+  // D-1: the switch to the "All machines" card counts This Mac plus each row that renders a card — an
+  // unreachable box renders none (HUB AC-5a), so below the limit today's grid is unchanged. The card's
+  // label counts every visible row, offline included, so it matches the popover's All group it opens.
+  const total = 1 + views.length;
+  label.style.display = '';
+  grid.style.display = '';
+  grid.textContent = '';
+  grid.appendChild(_nsMachineCardNode({ id: '', name: 'This Mac', health: 'reachable', sub: 'ready', disabled: false }));
+  if (total > MACHINE_PICKER_CARD_LIMIT) {
+    _nsMachineTopViews(machinePickerOrder(_nsMachineState.machines), at).forEach(view => grid.appendChild(_nsMachineCardNode(view)));
+    grid.appendChild(_nsMachineAllCardNode(1 + visible.length));
+  } else {
+    views.forEach(view => grid.appendChild(_nsMachineCardNode(view)));
+  }
+  _nsMachineShowManageLink(manage, true);
+  hidden.value = '';
+  _selectMachineCard('');
+  _nsMachineSetHint('');
+  return true;
+}
+
+function _nsMachineSetHint(text, warn) {
+  const hint = document.getElementById('ns-machine-hint');
+  if (!hint) return;
+  hint.textContent = String(text || '');
+  hint.style.display = text ? '' : 'none';
+  hint.classList.toggle('warn', !!warn);
+}
+
+function _selectMachineCard(value) {
+  const hidden = document.getElementById('ns-machine');
+  const next = String(value || '');
+  const previous = hidden ? String(hidden.value || '') : '';
+  if (hidden) hidden.value = next;
+  const grid = document.getElementById('ns-machine-grid');
+  if (grid) {
+    grid.querySelectorAll('.ns-machine-card').forEach(function(card) {
+      card.classList.toggle('selected', String(card.dataset.value || '') === next);
+    });
+  }
+  _nsMachineSetHint(next ? 'Sessions will spawn on ' + machineSelectionName() + ' — pick a folder on that box.' : '');
+  // S-13: host-path truth belongs to exactly one machine. Re-run the picker reset on every
+  // change — it rebinds the host probe (which now carries ?machine=) and forgets the previous
+  // machine's project list — so a box answer can never land on a local path field.
+  if (previous !== next && typeof _nsPathReset === 'function') {
+    // The same-repo prefill matches THIS project (the local cwd the user had when they picked
+    // the box), never just any repo both machines happen to share.
+    const cwdInput = document.getElementById('ns-cwd');
+    if (!previous) _nsMachineState.localCwd = cwdInput ? String(cwdInput.value || '').trim() : '';
+    if (typeof _nsPathPickerState !== 'undefined') {
+      _nsPathPickerState.machine = next;
+      _nsPathPickerState.projectsLoaded = false;
+      _nsPathPickerState.projects = [];
+    }
+    _nsPathReset(next ? '' : (typeof getLastSessionCwd === 'function' ? getLastSessionCwd() : ''));
+  }
+  return next;
+}
+
+// The ?machine= fragment the picker routes carry (§6.5). '' produces nothing, so every local
+// request keeps its exact current URL.
+function machineQueryParam() {
+  const id = machineSelection();
+  return id ? '&machine=' + encodeURIComponent(id) : '';
+}
+
+// The header form of the same routing, for POSTs that already own their query string
+// (/api/path-status). A local selection adds nothing (§6.5: routing is by query/header ONLY,
+// so no request body ever carries the machine).
+function machineScopedHeaders(baseHeaders) {
+  const headers = Object.assign({}, baseHeaders || {});
+  const id = machineSelection();
+  if (id) headers['X-CTM-Machine'] = id;
+  return headers;
+}
+
+// The key of the local project that contains `cwd` (the longest project path that is cwd or an
+// ancestor of it), '' when none does. Shared shape with the phone's localProjectKeyFor.
+function localProjectKeyFor(cwd, keyPath) {
+  const target = String(cwd || '').replace(/\/+$/, '');
+  let best = '';
+  let bestLen = -1;
+  Object.keys(keyPath || {}).forEach(function(key) {
+    const root = String(keyPath[key] || '').replace(/\/+$/, '');
+    if (!root || (target !== root && target.indexOf(root + '/') !== 0)) return;
+    if (root.length > bestLen) { best = key; bestLen = root.length; }
+  });
+  return best;
+}
+
+// Local gitRemoteKey -> path, so the same-repo prefill is a plain key equality against the
+// box's own /api/projects rows. Normalization stays server-side (§6.5).
+function loadLocalRepoKeys() {
+  if (_nsMachineState.localKeysRequested) return;
+  _nsMachineState.localKeysRequested = true;
+  const token = (typeof state !== 'undefined' && state.token) || '';
+  fetch('/api/projects?token=' + encodeURIComponent(token))
+    .then(function(r) { return r.ok ? r.json() : null; })
+    .then(function(rows) {
+      const map = Object.create(null);
+      (Array.isArray(rows) ? rows : []).forEach(function(row) {
+        if (row && row.path && row.gitRemoteKey) map[String(row.gitRemoteKey)] = row.path;
+      });
+      _nsMachineState.localRepoKeyPath = map;
+    })
+    .catch(function() { /* expected: without the local key list the picker simply browses */ });
+}
+
+// Called by _nsPathLoadProjects once the SELECTED machine's projects answer arrives.
+function nsMachineAfterProjectsLoaded(pickerState) {
+  const machine = machineSelection();
+  if (!machine) return false;
+  const rows = (pickerState && Array.isArray(pickerState.projects)) ? pickerState.projects : [];
+  const localKey = localProjectKeyFor(_nsMachineState.localCwd, _nsMachineState.localRepoKeyPath);
+  const match = localKey ? rows.find(function(row) {
+    return row && row.path && String(row.gitRemoteKey || '') === localKey;
+  }) : null;
+  const input = document.getElementById('ns-cwd');
+  if (!input) return false;
+  if (!match) {
+    _nsMachineSetHint('No checkout on ' + machineSelectionName() + " carries this project's git remote — browse to a folder on that box.", true);
+    return false;
+  }
+  input.value = match.path;
+  if (pickerState) {
+    pickerState.prefillCwd = match.path;
+    pickerState.autoActivePath = match.path;
+  }
+  _nsMachineSetHint('Same repository found on ' + machineSelectionName() + '.');
+  if (typeof _nsPathRenderSuggestions === 'function') _nsPathRenderSuggestions();
+  if (typeof _nsPathUpdateValidation === 'function') _nsPathUpdateValidation();
+  return true;
+}
+
+// Opened with the modal, so the machine list is fresh every time. A hub-less (older) server
+// answers 404 and the modal stays exactly as it was (AC-5a).
+function loadNewSessionMachines() {
+  // D-1: a fresh modal starts from the plain top three — the popover pick belongs to the session it
+  // was made in, never to the next one.
+  _nsMachineState.pickerMachine = '';
+  renderNewSessionMachineCards([]);
+  const token = (typeof state !== 'undefined' && state.token) || '';
+  fetch('/api/machines?token=' + encodeURIComponent(token))
+    .then(function(r) { return r.ok ? r.json() : null; })
+    .then(function(data) {
+      const shown = renderNewSessionMachineCards(data && data.machines);
+      if (shown) loadLocalRepoKeys();
+    })
+    .catch(function() { /* expected: no /api/machines on this server — nothing to render */ });
+}
+
+// Machine health / last-seen labels — the ONE copy lives in public/js/machine-pool-shared.js
+// (machineHealthLabel / machineLastSeenText), loaded by public/index.html before this file and by
+// public/m/index.html for the phone; the WP-4 picker cards, the WP-5 machines page and the WP-6
+// phone page all read that copy.
+
+// ── AC-6d (client half): "Open on <machine>" on a resume-blocked card ────────────────────────
+// A resume-blocked wire that is parked on another machine MAY carry `openOnMachine`; the action
+// sends this session's normal resume, which WP-6 routes to that machine. Absent the field the
+// card's actions are untouched. The button is appended to the card runtime-20 painted (never a
+// second renderer) and is idempotent across repaints.
+// Called by runtime-20's resume-blocked painter on EVERY paint (first paint and remount both rebuild
+// the actions row from s._resumeBlockedMsg), so the button can never be lost to a repaint.
+function resumeBlockedOpenOnMachineAction(msg, actions, s) {
+  const target = msg && msg.openOnMachine;
+  if (!target || !target.instanceId || !actions || !s) return false;
+  const previous = actions.querySelector('.machine-open-action');
+  if (previous) previous.remove();
+  const name = target.displayName || target.instanceId;
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.className = 'snapshot-loading-btn machine-open-action';
+  btn.textContent = 'Open on ' + name;
+  btn.title = 'Resume this session on ' + name;
+  btn.onclick = function() {
+    if (typeof _retryBlockedResume !== 'function') return;
+    btn.textContent = 'Opening on ' + name + '…';
+    _retryBlockedResume(s);
+  };
+  actions.appendChild(btn);
+  return true;
+}