create-walle 0.10.2 → 0.10.3

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

@@ -123,11 +123,40 @@
     }).join('');
   }
 
+
+  // ── WP-3 models helpers, hoisted to module scope (box-owned sessions WP-3, docs/remote-session-
+  // child-transcript-model-truth-and-restart-2026-10-27.html §5 D-7): pure functions of the registry
+  // row, used by the card/sheet below AND exported as `modelsDelegateWarnings` so the shared
+  // Delegate pane (public/js/session-model-picker.js) words a box's reach verdict with THIS page's
+  // copy on the phone, exactly as it uses machinesPageModelsDelegateWarnings on the desktop.
+  function modelsBlock(machine) {
+    var block = machine && machine.models;
+    return block && typeof block === 'object' ? block : null;
+  }
+
+  function modelsDelegate(machine) {
+    var block = modelsBlock(machine);
+    return block && Array.isArray(block.delegate) ? block.delegate : [];
+  }
+
+  function modelsDelegateWarnings(machine) {
+    return modelsDelegate(machine).filter(function (entry) {
+      var reach = String((entry && entry.reach) || '');
+      return reach === 'unreachable' || reach === 'no_server';
+    }).map(function (entry) {
+      return '/delegate on ' + machineName(machine) + ' uses ' + String((entry && entry.model) || '')
+        + ' through a route ' + machineName(machine) + " can't reach.";
+    });
+  }
+
   function create(deps) {
     var d = deps || {};
     var $ = d.$ || function () { return null; };
     var esc = d.esc || defaultEsc;
     var api = d.api || function () { return Promise.reject(new Error('no api')); };
+    // hub bridge (R-13/AC-4d): the host re-mounts its per-card Access block after EVERY paint, because
+    // render() rebuilds the card markup (a load/refresh would otherwise wipe it).
+    var afterRender = typeof d.afterRender === 'function' ? d.afterRender : null;
     var toast = d.toast || function () {};
     var host = d.document || (typeof document !== 'undefined' ? document : null);
     var openNewSession = d.openNewSessionSheet || function () {};
@@ -209,14 +238,15 @@
         + '</div>';
     }
 
-    function machineFactsHtml(sample, agents) {
+    function machineFactsHtml(sample, agents, history, presence) {
       return ''
         + factRow('Load', sample && sample.load1 != null ? esc(Number(sample.load1).toFixed(2)) : '')
         + factRow('Cores', sample && sample.cores != null ? esc(String(sample.cores)) : '')
         + factRow('Disk free', sample ? esc(machineFormatBytes(sample.diskFreeBytes)) : '')
         + factRow('GPU', esc(machineGpuText(sample && sample.gpu)))
+        + factRow('Power', esc(machinePowerText(sample, machineHistoryRows(history), at())))
         + factRow('Tasks', esc(machineTaskLine(sample && sample.tasks)))
-        + factRow('Agents', esc(machineAgentText(agents)));
+        + factRow('Agents', esc(machineAgentText(agents, presence)));
     }
 
     // ── WP-3 sign-in: a coding agent ON a pooled machine, signed in from this phone ───────────────
@@ -642,6 +672,15 @@
         });
     }
 
+    // WP-3 (§8, docs/fleet-auto-update-pooled-machines-2026-10-26.html): the box's update status line
+    // — the phone twin of the desktop card's "mpc-fleet". The rule is the shared machineFleetLine;
+    // this is only its markup, so PHONE = DESKTOP PARITY holds byte for byte.
+    function fleetHtml(machine) {
+      var fleet = machineFleetLine(machine);
+      if (!fleet) return '';
+      return '<div class="mp-fleet" data-fleet-tone="' + esc(fleet.tone) + '" title="' + esc(fleet.title) + '">' + esc(fleet.text) + '</div>';
+    }
+
     function machineCardHtml(machine, history) {
       var m = machine || {};
       var id = normId(m.instanceId);
@@ -668,9 +707,12 @@
         + '<span class="mp-cred" data-cred="' + esc(badge.cred) + '" title="' + esc(badge.title) + '">' + esc(badge.text) + '</span>'
         + '</div>'
         + '<div class="mp-meta">' + esc(meta) + ' ' + staleNote + '</div>'
+        + fleetHtml(m)
         + sparkBlock(cpuSeries, memSeries, cpuNow, memNow)
-        + '<div class="mp-facts">' + machineFactsHtml(sample, m.agents) + '</div>'
+        + '<div class="mp-facts">' + machineFactsHtml(sample, m.agents, history, m.agentPresence) + '</div>'
         + signInBlockHtml(m)
+        + skillsRowHtml(m)
+        + modelsRowHtml(m)
         + '<div class="mp-actions">'
         + '<button type="button" class="mp-btn mp-fav" aria-pressed="' + (m.favorite ? 'true' : 'false') + '"'
         + ' title="Favorite — shown first in the picker"'
@@ -704,7 +746,7 @@
       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)
+      var facts = machineFactsHtml(latest, null, history)
         + factRow('Memory', latest ? esc(machineFormatBytes(latest.memUsedBytes) + ' / ' + machineFormatBytes(latest.memTotalBytes)) : '');
       return '<article class="mp-card mp-self" data-machine-id="' + esc(id) + '" data-health="reachable">'
         + '<div class="mp-head">'
@@ -780,6 +822,9 @@
       // the old card away) has only state.signInDrafts to be painted from.
       restoreSignInDraftsFromState(card, adoptedKeys);
       bind(card);
+      if (afterRender) {
+        try { afterRender(card); } catch (error) { if (typeof console !== 'undefined') console.warn('[phone-machines] afterRender failed', error); }
+      }
       return card;
     }
 
@@ -1127,6 +1172,715 @@
         });
     }
 
+    // ── WP-9 (§9 S-9, AC-9a..AC-9d): the row's one Skills line and its Review sheet ─────────────
+    // PHONE = DESKTOP PARITY: the same line, the same three sections, the same actions and the same
+    // wording public/js/app/machines-page.js renders. AC-9c: a row with `skills: null` renders exactly
+    // the card it rendered before this work — the line builder returns '' and nothing else moved.
+    var SKILL_REASONS = {
+      platform: 'macOS-only',
+      hub_home_path: 'points at a path that exists only on this laptop',
+      too_large: 'too large to send',
+      unreadable: 'could not be read',
+    };
+    var SKILL_STATES = {
+      new_on_box: 'new on this machine',
+      same: 'same as the hub',
+      shadows_hub: 'this machine’s copy wins',
+      changed_on_box: 'changed on this machine',
+      conflict: 'both sides changed',
+    };
+    var BOX_LOCAL_STATES = ['new_on_box', 'changed_on_box', 'conflict', 'shadows_hub'];
+    var DIFF_LINE_CAP = 400;
+    var review = { instanceId: '', skipped: {}, fromHub: null };
+
+    function skillsBlock(machine) {
+      var block = machine && machine.skills;
+      return block && typeof block === 'object' ? block : null;
+    }
+
+    function skillReasonLabel(reason) {
+      var key = String(reason || '');
+      return SKILL_REASONS[key] || key || 'held back';
+    }
+
+    function skillStateLabel(value) {
+      var key = String(value || '');
+      return SKILL_STATES[key] || key || 'differs';
+    }
+
+    function skillsHeldBack(machine) {
+      var block = skillsBlock(machine);
+      return block && Array.isArray(block.heldBack) ? block.heldBack : [];
+    }
+
+    function skillsOnBox(machine) {
+      var block = skillsBlock(machine);
+      return block && Array.isArray(block.onBox) ? block.onBox : [];
+    }
+
+    function skillsPlugins(machine) {
+      var block = skillsBlock(machine);
+      return block && Array.isArray(block.plugins) ? block.plugins : [];
+    }
+
+    function skillsExcluded(machine) {
+      var block = skillsBlock(machine);
+      return block && Array.isArray(block.excludePlugins) ? block.excludePlugins : [];
+    }
+
+    function skillsBoxLocalCount(machine) {
+      return skillsOnBox(machine).filter(function (item) {
+        return item && BOX_LOCAL_STATES.indexOf(String(item.state)) !== -1;
+      }).length;
+    }
+
+    function skillsLineText(machine) {
+      var block = skillsBlock(machine);
+      if (!block) return '';
+      var parts = [(Number(block.sentCount) || 0) + ' sent'];
+      var heldBack = skillsHeldBack(machine).length;
+      if (heldBack) parts.push(heldBack + ' held back');
+      var local = skillsBoxLocalCount(machine);
+      if (local) parts.push(local + ' new on ' + machineName(machine));
+      var text = 'Skills: ' + parts.join(' · ');
+      var error = block.pushError;
+      if (error && (error.message || error.code)) text += ' · last push failed: ' + String(error.message || error.code);
+      return text;
+    }
+
+    function skillsNeedsReview(machine) {
+      if (!skillsBlock(machine)) return false;
+      if (skillsHeldBack(machine).length) return true;
+      if (skillsBoxLocalCount(machine)) return true;
+      var excluded = skillsExcluded(machine);
+      return skillsPlugins(machine).some(function (plugin) { return excluded.indexOf(plugin) === -1; });
+    }
+
+    function skillsRowHtml(machine) {
+      if (!skillsBlock(machine)) return ''; // AC-9c: no block, no bytes
+      var id = normId(machine && machine.instanceId);
+      return '<div class="mp-skills"><span class="mp-skills-line">' + esc(skillsLineText(machine)) + '</span>'
+        + (skillsNeedsReview(machine)
+          ? '<button type="button" class="mp-btn mp-skills-review" data-machine-review="' + esc(id) + '">Review</button>'
+          : '')
+        + '</div>';
+    }
+
+    // ── WP-3: the Models line + the Review sheet's Models section (§6.2, §8 WP-3) ────────────────
+    // The phone twin of public/js/app/machines-page.js: the same states, the same strings, from the
+    // same row block (lib/machine-registry.js `_modelsBlockFrom`, read on the 60 s probe tick).
+    // `null` = never read, or a box that predates WP-1 — then this card renders exactly the bytes it
+    // rendered before this work (AC-3a), so every builder below returns '' for null.
+
+    function modelsUnreachable(machine) {
+      var block = modelsBlock(machine);
+      return block && Array.isArray(block.unreachable) ? block.unreachable : [];
+    }
+
+    function modelsUnreachableLabel(machine, item) {
+      if (String((item && item.type) || '').toLowerCase() === 'ollama') return 'nothing is running there';
+      return "can't be reached from " + machineName(machine);
+    }
+
+    function modelsReachLabel(machine, reach) {
+      return (String(reach || '') === 'reachable' ? 'can be reached from ' : "can't be reached from ")
+        + machineName(machine);
+    }
+
+    function modelsLineText(machine) {
+      var block = modelsBlock(machine);
+      if (!block) return '';
+      var parts = [(Number(block.usable) || 0) + ' usable'];
+      var unreachable = modelsUnreachable(machine).length;
+      if (unreachable) parts.push(unreachable + " can't be reached from " + machineName(machine));
+      return 'Models: ' + parts.join(' · ');
+    }
+
+    function modelsNeedsReview(machine) {
+      if (!modelsBlock(machine)) return false;
+      if (modelsUnreachable(machine).length) return true;
+      return modelsDelegateWarnings(machine).length > 0;
+    }
+
+    function modelsRowHtml(machine) {
+      if (!modelsBlock(machine)) return ''; // AC-3a: no block, no bytes
+      var id = normId(machine && machine.instanceId);
+      return '<div class="mp-models"><span class="mp-models-line">' + esc(modelsLineText(machine)) + '</span>'
+        + (modelsNeedsReview(machine)
+          ? '<span class="mp-models-sep">—</span>'
+            + '<button type="button" class="mp-btn mp-models-review" data-machine-review="' + esc(id) + '">Review</button>'
+          : '')
+        + modelsDelegateWarnings(machine).map(function (text) {
+          return '<span class="mp-models-warn">' + esc(text) + '</span>';
+        }).join('')
+        + '</div>';
+    }
+
+    /** WP-9 title, extended by WP-3: the sheet names whichever of the two blocks the row has. */
+    function reviewTitle(machine) {
+      var name = machineName(machine);
+      var hasSkills = !!skillsBlock(machine);
+      var hasModels = !!modelsBlock(machine);
+      if (hasSkills && hasModels) return 'Skills and models on ' + name;
+      if (hasModels) return 'Models on ' + name;
+      return 'Skills on ' + name;
+    }
+
+    /** WP-3: a row is reviewable while EITHER block has something to show; an absent block renders
+     *  no section, so a models-only row opens a Models-only sheet. */
+    function reviewOpenable(machine) {
+      return !!skillsBlock(machine) || modelsNeedsReview(machine);
+    }
+
+    /** WP-3 + WP-4 (desktop parity): the sheet's Models section. WP-4 puts ONE control on the
+     *  unreachable rows — a checkbox, because the route ids are the box's own — and the matching
+     *  "Remove from <name>" button under the list; never on the /delegate rows. Nothing unreachable →
+     *  no control at all, and the button stays disabled until a row is ticked. */
+    function reviewModelsHtml(machine) {
+      if (!modelsBlock(machine)) return ''; // no block, no section
+      var name = machineName(machine);
+      var unreachable = modelsUnreachable(machine);
+      var rows = unreachable.map(function (item) {
+        var id = String((item && item.id) || '');
+        return '<li class="mp-review-item" data-route="' + esc(id) + '">'
+          + '<label class="mp-review-pick"><input type="checkbox" data-role="models-pick" value="' + esc(id) + '"'
+          + ' aria-label="' + esc('Remove ' + id + ' from ' + name) + '">'
+          + '<span class="mp-review-name">' + esc(id) + '</span></label>'
+          + '<span class="mp-review-meta">'
+          + esc([String((item && item.type) || ''), String((item && item.origin) || '')].filter(Boolean).join(' · '))
+          + '</span>'
+          + '<span class="mp-review-where">' + esc(modelsUnreachableLabel(machine, item)) + '</span></li>';
+      });
+      if (!rows.length) rows.push('<li class="mp-review-empty">Every route on this machine can be reached.</li>');
+      modelsDelegate(machine).forEach(function (entry) {
+        var route = String((entry && entry.routeId) || '');
+        var meta = [String((entry && entry.model) || ''), route ? 'route ' + route : ''].filter(Boolean).join(' · ');
+        rows.push('<li class="mp-review-item" data-agent="' + esc(String((entry && entry.agent) || '')) + '">'
+          + '<span class="mp-review-name">' + esc(String((entry && entry.agent) || '')) + '</span>'
+          + '<span class="mp-review-meta">' + esc(meta) + '</span>'
+          + '<span class="mp-review-where">' + esc(modelsReachLabel(machine, entry && entry.reach)) + '</span></li>');
+      });
+      var remove = unreachable.length
+        ? '<div class="mp-review-models-remove"><button type="button" class="mp-btn mp-danger" data-role="models-remove"'
+          + ' disabled>Remove from ' + esc(name) + '</button></div>'
+        : '';
+      return '<section class="mp-review-section" data-section="models"><h4>Models on ' + esc(name)
+        + '</h4><ul>' + rows.join('') + '</ul>' + remove + fromHubHtml(machine) + '</section>';
+    }
+
+    /** WP-5 (desktop parity): the "From this hub" subsection — the routes THIS hub holds that the
+     *  machine does not, one row each, each row with its OWN "Use on <name>" button. No checkbox and
+     *  no bulk control (AC-5c: nothing here can copy more than one route). The list is read ONCE per
+     *  open and read again after a copy or a remove. */
+    function fromHubState(machine) {
+      var id = normId(machine && machine.instanceId);
+      var store = review && review.fromHub;
+      if (!store || normId(store.instanceId) !== id) return { status: 'loading' };
+      if (store.error) return { status: 'error', error: String(store.error) };
+      return { status: 'ready', routes: Array.isArray(store.routes) ? store.routes : [] };
+    }
+
+    function fromHubItemsHtml(machine) {
+      if (!modelsBlock(machine)) return ''; // no block, no subsection
+      var name = machineName(machine);
+      var id = normId(machine && machine.instanceId);
+      var view = fromHubState(machine);
+      if (view.status === 'loading') {
+        return '<li class="mp-review-empty">' + esc('Looking for routes this hub has that ' + name + ' lacks…') + '</li>';
+      }
+      if (view.status === 'error') return '<li class="mp-review-note">' + esc(view.error) + '</li>';
+      if (!view.routes.length) {
+        return '<li class="mp-review-empty">' + esc('This hub has no other routes ' + name + ' could use.') + '</li>';
+      }
+      return view.routes.map(function (route) {
+        var routeId = String((route && route.id) || '');
+        var label = String((route && route.name) || '') || routeId;
+        var origin = String((route && route.origin) || '');
+        var meta = [String((route && route.type) || ''), origin].filter(Boolean).join(' · ');
+        return '<li class="mp-review-item" data-hub-route="' + esc(routeId) + '">'
+          + '<span class="mp-review-name">' + esc(label) + '</span>'
+          + '<span class="mp-review-meta">' + esc(meta) + '</span>'
+          + '<span class="mp-review-actions"><button type="button" class="mp-btn mp-primary" data-role="models-copy"'
+          + ' data-route-id="' + esc(routeId) + '" data-origin="' + esc(origin) + '">'
+          + 'Use on ' + esc(name) + '</button></span></li>';
+      }).join('');
+    }
+
+    function fromHubHtml(machine) {
+      if (!modelsBlock(machine)) return '';
+      return '<div class="mp-review-from-hub" data-section="from-hub"><h5>From this hub</h5>'
+        + '<ul class="mp-review-list" data-role="from-hub">' + fromHubItemsHtml(machine) + '</ul></div>';
+    }
+
+    /** Repaint ONLY the list: the rest of the open sheet (and the note an action just wrote) stays. */
+    function fromHubPaint() {
+      var overlay = dialog && dialog.overlay;
+      var machine = reviewMachine();
+      if (!overlay || typeof overlay.querySelector !== 'function' || !modelsBlock(machine)) return false;
+      var node = overlay.querySelector('[data-role="from-hub"]');
+      if (!node) return false;
+      node.innerHTML = fromHubItemsHtml(machine);
+      return true;
+    }
+
+    /** WP-5: ONE read of `models/copyable` per open, stored on the open sheet's own state. A refusal
+     *  is the server's own code and is shown, never retried — there is no timer here. */
+    function fetchFromHub(instanceId) {
+      var id = normId(instanceId);
+      if (!id) return Promise.resolve(false);
+      review.fromHub = { instanceId: id, loading: true };
+      fromHubPaint();
+      return api('/api/machines/' + encodeURIComponent(id) + '/models/copyable')
+        .then(function (payload) {
+          if (normId(review.instanceId) !== id) return false; // the sheet moved on meanwhile
+          review.fromHub = {
+            instanceId: id,
+            routes: (payload && Array.isArray(payload.routes)) ? payload.routes : [],
+          };
+          fromHubPaint();
+          return true;
+        })
+        .catch(function (error) {
+          // REPORT: the subsection says why it is empty; the sheet stays open and nothing is retried.
+          if (normId(review.instanceId) !== id) return false;
+          review.fromHub = { instanceId: id, error: serverError(error) };
+          fromHubPaint();
+          return false;
+        });
+    }
+
+    /** The name a row was painted with — the success note says what travelled, in the user's words. */
+    function fromHubRouteName(routeId) {
+      var routes = (review && review.fromHub && Array.isArray(review.fromHub.routes)) ? review.fromHub.routes : [];
+      var match = routes.filter(function (route) {
+        return String((route && route.id) || '') === String(routeId == null ? '' : routeId);
+      })[0];
+      return String((match && match.name) || '') || String(routeId == null ? '' : routeId);
+    }
+
+    /** WP-5: after a copy or a remove, re-read BOTH the list and what this hub could still offer. */
+    function reloadReview() {
+      var id = normId(review && review.instanceId);
+      return reviewRefresh().then(function () {
+        return fetchFromHub(id);
+      });
+    }
+
+    /** WP-5 / AC-5c (desktop parity): "Use on <name>" — ONE route and its key, and nothing else; the
+     *  confirm says so before anything is sent, and `expectOrigin` is the origin the row was painted
+     *  with, so a route that moved on the hub is refused instead of copied. */
+    function copyModel(instanceId, button) {
+      var id = normId(instanceId);
+      var name = machineName(reviewMachine() || { instanceId: id });
+      var attr = function (key) {
+        return button && typeof button.getAttribute === 'function' ? String(button.getAttribute(key) || '') : '';
+      };
+      var routeId = attr('data-route-id');
+      var origin = attr('data-origin');
+      if (!id || !routeId) return Promise.resolve(false);
+      var label = fromHubRouteName(routeId);
+      if (confirmImpl && !confirmImpl('Copies this route and its key to ' + name + '. Only this route is copied.')) {
+        return Promise.resolve(false);
+      }
+      busy(button, true);
+      return api('/api/machines/' + encodeURIComponent(id) + '/models/copy', {
+        method: 'POST',
+        body: { routeId: routeId, expectOrigin: origin },
+      }).then(function () {
+        busy(button, false);
+        // After the reload, which repaints the sheet (a note set first would be wiped).
+        return reloadReview().then(function (reloaded) {
+          reviewNote('Copied ' + label + ' to ' + name, 'ok');
+          return reloaded;
+        });
+      }).catch(function (error) {
+        // REPORT: the refusal (or the transport fault) stays on the sheet, which is still open.
+        busy(button, false);
+        reviewNote(serverError(error), 'bad');
+        return false;
+      });
+    }
+
+    function reviewItemKey(agent, name) {
+      return String(agent || '') + ':' + String(name || '');
+    }
+
+    function reviewHeldBackHtml(machine) {
+      if (!skillsBlock(machine)) return ''; // no block, no section (§8 WP-3)
+      var items = skillsHeldBack(machine);
+      var body = items.length
+        ? items.map(function (item) {
+          var where = item && item.file
+            ? '<span class="mp-review-where">' + esc(String(item.file) + (item.line ? ':' + item.line : '')) + '</span>'
+            : '';
+          return '<li class="mp-review-item" data-key="' + esc(reviewItemKey(item && item.agent, item && item.name)) + '">'
+            + '<span class="mp-review-name">' + esc(String((item && item.name) || '')) + '</span>'
+            + '<span class="mp-review-meta">' + esc([String((item && item.agent) || ''), skillReasonLabel(item && item.reason)].filter(Boolean).join(' · ')) + '</span>'
+            + where + '</li>';
+        }).join('')
+        : '<li class="mp-review-empty">Nothing was held back.</li>';
+      return '<section class="mp-review-section" data-section="held-back"><h4>Held back</h4><ul>' + body + '</ul></section>';
+    }
+
+    function reviewItemActionsHtml(instanceId, item) {
+      var state = String((item && item.state) || '');
+      var agent = String((item && item.agent) || '');
+      var name = String((item && item.name) || '');
+      var attrs = ' data-review-action data-review-id="' + esc(instanceId) + '" data-review-agent="' + esc(agent)
+        + '" data-review-name="' + esc(name) + '" data-review-box-hash="' + esc(String((item && item.boxHash) || '')) + '"';
+      var out = '';
+      if (state !== 'shadows_hub') out += '<button type="button" class="mp-btn mp-primary"' + attrs + ' data-review-verb="import">Import</button>';
+      if (state !== 'new_on_box') out += '<button type="button" class="mp-btn"' + attrs + ' data-review-verb="retire">Use the laptop’s copy</button>';
+      out += '<button type="button" class="mp-btn"' + attrs + ' data-review-skip>Skip</button>';
+      return out;
+    }
+
+    function reviewOnBoxHtml(machine) {
+      if (!skillsBlock(machine)) return ''; // no block, no section (§8 WP-3)
+      var id = normId(machine && machine.instanceId);
+      var items = skillsOnBox(machine).filter(function (item) { return item && String(item.state) !== 'same'; });
+      var body = items.length
+        ? items.map(function (item) {
+          var name = String((item && item.name) || '');
+          var key = reviewItemKey(item && item.agent, name);
+          return '<li class="mp-review-item" data-key="' + esc(key) + '">'
+            + '<span class="mp-review-name">' + esc(name) + '</span>'
+            + '<span class="mp-review-meta">' + esc([String((item && item.agent) || ''), skillStateLabel(item && item.state)].filter(Boolean).join(' · ')) + '</span>'
+            + '<span class="mp-review-actions">' + reviewItemActionsHtml(id, item)
+            + '<button type="button" class="mp-btn" data-review-diff data-review-id="' + esc(id) + '"'
+            + ' data-review-agent="' + esc(String((item && item.agent) || '')) + '" data-review-name="' + esc(name) + '">Show diff</button>'
+            + '</span><div class="mp-review-diff" hidden></div></li>';
+        }).join('')
+        : '<li class="mp-review-empty">This machine has no skills of its own.</li>';
+      return '<section class="mp-review-section" data-section="on-box"><h4>On ' + esc(machineName(machine)) + '</h4><ul>' + body + '</ul></section>';
+    }
+
+    function reviewPluginsHtml(machine) {
+      if (!skillsBlock(machine)) return ''; // no block, no section (§8 WP-3)
+      var plugins = skillsPlugins(machine);
+      var excluded = skillsExcluded(machine);
+      var body = plugins.length
+        ? plugins.map(function (plugin) {
+          var id = String(plugin);
+          return '<label class="mp-review-plugin"><input type="checkbox" value="' + esc(id) + '"'
+            + (excluded.indexOf(id) !== -1 ? ' checked' : '') + '> ' + esc(id) + '</label>';
+        }).join('')
+        : '<p class="mp-review-empty">The hub sends no plugins to this machine.</p>';
+      return '<section class="mp-review-section" data-section="plugins"><h4>Plugins</h4>'
+        + '<p class="mp-review-note">Checked plugins are not sent to this machine.</p>'
+        + '<div class="mp-review-plugins">' + body + '</div>'
+        + '<div class="mp-review-actions"><button type="button" class="mp-btn mp-primary" data-review-save-plugins'
+        + ' data-review-id="' + esc(normId(machine && machine.instanceId)) + '">Save</button></div></section>';
+    }
+
+    function reviewSheetHtml(machine) {
+      return '<section class="model-picker-sheet mp-modal mp-review-sheet" role="dialog" aria-modal="true" aria-labelledby="mp-review-title">'
+        + '<div class="model-picker-head"><div><h2 id="mp-review-title">' + esc(reviewTitle(machine)) + '</h2>'
+        + '<p>' + esc(skillsLineText(machine) || modelsLineText(machine)) + '</p></div>'
+        + '<button type="button" class="model-picker-close" id="mp-review-close" aria-label="Close">&times;</button></div>'
+        + '<p class="mp-review-note" data-role="review-note" role="status" aria-live="polite"></p>'
+        + reviewHeldBackHtml(machine) + reviewOnBoxHtml(machine) + reviewPluginsHtml(machine)
+        + reviewModelsHtml(machine)
+        + '<div class="mp-modal-actions"><button type="button" class="mp-btn" id="mp-review-done">Close</button></div>'
+        + '</section>';
+    }
+
+    function reviewMachine() {
+      var id = normId(review.instanceId);
+      return state.machines.filter(function (m) { return normId(m && m.instanceId) === id; })[0] || null;
+    }
+
+    function reviewNote(text, kind) {
+      var node = (dialog && dialog.overlay && typeof dialog.overlay.querySelector === 'function')
+        ? dialog.overlay.querySelector('[data-role="review-note"]') : null;
+      if (!node) return;
+      node.textContent = String(text || '');
+      node.className = 'mp-review-note' + (kind === 'bad' ? ' bad' : '');
+    }
+
+    /** Client-only Skip: the item leaves this sheet and stays gone across a repaint — no server call. */
+    function reviewSkip(button) {
+      if (!button || typeof button.getAttribute !== 'function') return false;
+      review.skipped[reviewItemKey(button.getAttribute('data-review-agent'), button.getAttribute('data-review-name'))] = true;
+      var item = typeof button.closest === 'function' ? button.closest('.mp-review-item') : null;
+      if (item) item.hidden = true;
+      return true;
+    }
+
+    function applySkips() {
+      var overlay = dialog && dialog.overlay;
+      if (!overlay || typeof overlay.querySelectorAll !== 'function') return;
+      Array.prototype.slice.call(overlay.querySelectorAll('.mp-review-item[data-key]') || []).forEach(function (item) {
+        var key = typeof item.getAttribute === 'function' ? item.getAttribute('data-key') : null;
+        if (key && review.skipped[key]) item.hidden = true;
+      });
+    }
+
+    /** AC-9a: re-read the list and repaint the OPEN sheet — never a page reload. */
+    function reviewRefresh() {
+      return load({ silent: true }).then(function () {
+        var machine = reviewMachine();
+        if (!(dialog && dialog.overlay && dialog.review)) return true; // the sheet was closed or replaced meanwhile
+        if (machine && reviewOpenable(machine)) {
+          dialog.overlay.innerHTML = reviewSheetHtml(machine);
+          bindSheet();
+          applySkips();
+        } else {
+          closeDialog(); // same as desktop machinesPageReviewPaint: nothing left to review → close
+        }
+        return true;
+      });
+    }
+
+    function openReviewSheet(instanceId) {
+      var id = normId(instanceId);
+      var machine = state.machines.filter(function (m) { return normId(m && m.instanceId) === id; })[0] || null;
+      if (!reviewOpenable(machine)) return null;
+      closeDialog();
+      review = { instanceId: id, skipped: {}, fromHub: null };
+      var overlay = mountDialog(reviewSheetHtml(machine));
+      if (!overlay) return null;
+      dialog = { overlay: overlay, review: true };
+      bindSheet();
+      // WP-5: one read of the hub's copyable routes per open — the sheet is already painted, so the
+      // subsection shows "Looking for…" until this lands.
+      fetchFromHub(id);
+      return dialog;
+    }
+
+    function bindSheet() {
+      var close = $('mp-review-close');
+      if (close && typeof close.addEventListener === 'function') close.addEventListener('click', closeDialog);
+      var done = $('mp-review-done');
+      if (done && typeof done.addEventListener === 'function') done.addEventListener('click', closeDialog);
+      // The sheet mounts on document.body (mountDialog), OUTSIDE the card whose delegated click/change
+      // listeners dispatch every data-review-* control — so a tap inside it never reached them.
+      // Binding the overlay to the same dispatcher (bind() is idempotent per scope) makes the sheet's
+      // Import / Use-the-laptop's-copy / Save / Remove-from-<box> controls work on the phone.
+      if (dialog && dialog.overlay && dialog.overlay.dataset) bind(dialog.overlay);
+    }
+
+    function busy(node, state_) {
+      if (!node || typeof node !== 'object') return;
+      node.disabled = !!state_;
+      if (typeof node.setAttribute === 'function') node.setAttribute('aria-busy', state_ ? 'true' : 'false');
+    }
+
+    function reviewActionFailed(error) {
+      var payload = (error && error.payload) || null;
+      var code = String((payload && (payload.error || payload.code)) || (error && (error.code || error.message)) || '');
+      if (Number(error && error.status) === 409 || code.indexOf('agent_skill_changed') !== -1) {
+        reviewNote('This skill changed on the box since you opened Review — reopen to see the new version.', 'bad');
+        return reviewRefresh();
+      }
+      reviewNote(serverError(error), 'bad');
+      return false;
+    }
+
+    function reviewAction(instanceId, agent, name, boxHash, verb, button) {
+      var action = String(verb) === 'retire' ? 'retire' : 'import';
+      var body = { agent: String(agent || ''), name: String(name || '') };
+      if (boxHash) body.expectBoxHash = String(boxHash);
+      busy(button, true);
+      return api('/api/machines/' + encodeURIComponent(normId(instanceId)) + '/skills/' + action, { method: 'POST', body: body })
+        .then(function () {
+          busy(button, false);
+          setStatus(action === 'import'
+            ? 'Imported ' + String(name || '') + ' from this machine.'
+            : 'This machine now uses the laptop’s copy of ' + String(name || '') + '.');
+          delete review.skipped[reviewItemKey(agent, name)];
+          return reviewRefresh();
+        })
+        .catch(function (error) {
+          // REPORT: the refusal (or the transport fault) stays on the sheet, which is still open.
+          busy(button, false);
+          return reviewActionFailed(error);
+        });
+    }
+
+    function savePlugins(instanceId, button) {
+      var overlay = dialog && dialog.overlay;
+      var excluded = [];
+      if (overlay && typeof overlay.querySelectorAll === 'function') {
+        Array.prototype.slice.call(overlay.querySelectorAll('.mp-review-plugins input') || []).forEach(function (box) {
+          if (box && box.checked) excluded.push(String(box.value == null ? '' : box.value));
+        });
+      }
+      busy(button, true);
+      return api('/api/machines/' + encodeURIComponent(normId(instanceId)) + '/skills/exclude-plugins', {
+        method: 'PUT',
+        body: { plugins: excluded },
+      }).then(function () {
+        busy(button, false);
+        setStatus(excluded.length
+          ? 'Plugins saved — ' + excluded.length + ' not sent to this machine.'
+          : 'Plugins saved — every plugin is sent to this machine.');
+        return reviewRefresh();
+      }).catch(function (error) {
+        busy(button, false);
+        reviewNote(serverError(error), 'bad');
+        return false;
+      });
+    }
+
+    /** WP-4: the route ids ticked in the open sheet — the only truth a Remove POST may be built from. */
+    function modelsChecked() {
+      var overlay = dialog && dialog.overlay;
+      var picked = [];
+      if (overlay && typeof overlay.querySelectorAll === 'function') {
+        Array.prototype.slice.call(overlay.querySelectorAll('[data-role="models-pick"]') || []).forEach(function (box) {
+          if (box && box.checked) picked.push(String(box.value == null ? '' : box.value));
+        });
+      }
+      return picked;
+    }
+
+    /** WP-4: one tick or untick → the button is live exactly while something is ticked. Returns the count. */
+    function modelsPicked() {
+      var overlay = dialog && dialog.overlay;
+      var count = modelsChecked().length;
+      var node = overlay && typeof overlay.querySelector === 'function'
+        ? overlay.querySelector('[data-role="models-remove"]') : null;
+      if (node) node.disabled = count === 0;
+      return count;
+    }
+
+    /** WP-4: "Remove from <name>" — the box deletes these routes and the keys it holds for them; the
+     *  hub keeps its own copies, which is what the confirm says before anything is sent. A cancelled
+     *  confirm is not a request, only the TICKED ids travel, and the sheet is re-read after. */
+    function removeModels(instanceId, button) {
+      var id = normId(instanceId);
+      var name = machineName(reviewMachine() || { instanceId: id });
+      if (!modelsChecked().length) return Promise.resolve(false);
+      if (confirmImpl && !confirmImpl('Deletes these routes and their keys from ' + name + '. This hub keeps its own copies.')) {
+        return Promise.resolve(false);
+      }
+      var routeIds = modelsChecked();
+      busy(button, true);
+      return api('/api/machines/' + encodeURIComponent(id) + '/models/remove', {
+        method: 'POST',
+        body: { routeIds: routeIds },
+      }).then(function (result) {
+        busy(button, false);
+        var data = (result && typeof result === 'object') ? result : {};
+        var removed = Array.isArray(data.removed) ? data.removed.length : routeIds.length;
+        var missing = Array.isArray(data.missing) ? data.missing.length : 0;
+        // The note goes AFTER the reload, which repaints the sheet. WP-5: the removals also change
+        // what this hub can offer, hence the reload of both lists.
+        return reloadReview().then(function (reloaded) {
+          reviewNote('Removed ' + removed + ' from ' + name + (missing ? ' · ' + missing + ' already gone' : ''), 'ok');
+          return reloaded;
+        });
+      }).catch(function (error) {
+        // REPORT: the refusal (or the transport fault) stays on the sheet, which is still open.
+        busy(button, false);
+        reviewNote(serverError(error), 'bad');
+        return false;
+      });
+    }
+
+    // The diff ALGORITHM is public/js/prompt-diff.js — the same module the desktop page loads in
+    // index.html and the phone does not, so the phone pulls the one copy in on first use (never a
+    // second implementation of the LCS).
+    var promptDiffPromise = null;
+
+    function promptDiffModule() {
+      if (root.PromptDiff && typeof root.PromptDiff.diffLines === 'function') return Promise.resolve(root.PromptDiff);
+      if (d.promptDiff && typeof d.promptDiff.diffLines === 'function') return Promise.resolve(d.promptDiff);
+      if (promptDiffPromise) return promptDiffPromise;
+      var doc = host || (typeof document !== 'undefined' ? document : null);
+      if (!doc || typeof doc.createElement !== 'function') return Promise.resolve(null);
+      var src = typeof d.promptDiffSrc === 'string' ? d.promptDiffSrc : '/js/prompt-diff.js';
+      promptDiffPromise = new Promise(function (resolve) {
+        var script = doc.createElement('script');
+        script.src = src;
+        script.onload = function () {
+          resolve(root.PromptDiff && typeof root.PromptDiff.diffLines === 'function' ? root.PromptDiff : null);
+        };
+        script.onerror = function () { resolve(null); };
+        var parent = doc.head || doc.body || doc.documentElement;
+        if (parent && typeof parent.appendChild === 'function') parent.appendChild(script);
+        else resolve(null);
+      });
+      return promptDiffPromise;
+    }
+
+    function diffFileHtml(module, boxFile, hubFile) {
+      var filePath = String((boxFile && boxFile.path) || (hubFile && hubFile.path) || '');
+      var size = Number((boxFile && boxFile.size) || (hubFile && hubFile.size) || 0);
+      var head = '<p class="mp-diff-file">' + esc(filePath) + '</p>';
+      if ((boxFile && boxFile.binary) || (hubFile && hubFile.binary)) {
+        return head + '<p class="mp-diff-binary">' + esc('binary file, ' + machineFormatBytes(size)) + '</p>';
+      }
+      var ops = module ? module.diffLines(hubFile ? String(hubFile.text || '') : '', boxFile ? String(boxFile.text || '') : '') : null;
+      if (!Array.isArray(ops)) return head + '<p class="mp-diff-binary">' + esc('binary file, ' + machineFormatBytes(size)) + '</p>';
+      var shown = ops.slice(0, DIFF_LINE_CAP);
+      return head + '<div class="mp-diff">' + shown.map(function (op) {
+        var cls = op.type === 'add' ? 'mp-diff-add' : (op.type === 'del' ? 'mp-diff-del' : 'mp-diff-eq');
+        var sign = op.type === 'add' ? '+' : (op.type === 'del' ? '-' : ' ');
+        return '<span class="' + cls + '">' + esc(sign + ' ' + op.text) + '</span>';
+      }).join('') + '</div>'
+        + (ops.length > shown.length ? '<p class="mp-review-note">' + esc('… ' + (ops.length - shown.length) + ' more lines') + '</p>' : '');
+    }
+
+    /** A preview payload + a diff module → the per-file markup. Pure, so the sheet is provable. */
+    function diffHtml(module, preview) {
+      var boxFiles = (preview && preview.box && Array.isArray(preview.box.files)) ? preview.box.files : [];
+      var hubFiles = (preview && preview.hub && Array.isArray(preview.hub.files)) ? preview.hub.files : [];
+      var hubByName = {};
+      hubFiles.forEach(function (file) { if (file && file.path) hubByName[String(file.path)] = file; });
+      var seen = {};
+      var out = boxFiles.map(function (file) {
+        var key = String((file && file.path) || '');
+        seen[key] = true;
+        return diffFileHtml(module, file, hubByName[key] || null);
+      });
+      hubFiles.forEach(function (file) {
+        var key = String((file && file.path) || '');
+        if (seen[key]) return;
+        out.push('<p class="mp-diff-file">' + esc(key) + '</p><p class="mp-diff-binary">'
+          + esc('only on this hub — importing replaces it (a backup is kept)') + '</p>');
+      });
+      return out.join('') || '<p class="mp-review-empty">No files on either side.</p>';
+    }
+
+    function diffNode(agent, name) {
+      var overlay = dialog && dialog.overlay;
+      if (!overlay || typeof overlay.querySelector !== 'function') return null;
+      var key = reviewItemKey(agent, name).replace(/"/g, '\\"');
+      var item = overlay.querySelector('.mp-review-item[data-key="' + key + '"]');
+      return item && typeof item.querySelector === 'function' ? item.querySelector('.mp-review-diff') : null;
+    }
+
+    /** AC-9b: the hub's copy vs the box's, through the ONE diff module (lazily loaded on the phone). */
+    function showDiff(instanceId, agent, name, button) {
+      var node = diffNode(agent, name);
+      if (node && !node.hidden) { node.hidden = true; return Promise.resolve(true); }
+      busy(button, true);
+      return api('/api/machines/' + encodeURIComponent(normId(instanceId)) + '/skills/preview?agent='
+        + encodeURIComponent(String(agent || '')) + '&name=' + encodeURIComponent(String(name || '')))
+        .then(function (payload) {
+          return promptDiffModule().then(function (module) {
+            busy(button, false);
+            node = diffNode(agent, name);
+            if (!node) return false;
+            node.hidden = false;
+            node.innerHTML = diffHtml(module, payload);
+            if (!module) node.innerHTML += '<p class="mp-review-note">' + esc('The diff module did not load — the file list above is still the truth.') + '</p>';
+            return true;
+          });
+        })
+        .catch(function (error) {
+          busy(button, false);
+          node = diffNode(agent, name);
+          if (node) {
+            node.hidden = false;
+            node.innerHTML = '<p class="mp-review-note">' + esc(serverError(error)) + '</p>';
+          }
+          return false;
+        });
+    }
+
     // ── wiring ─────────────────────────────────────────────────────────────────────────────────
     // ONE delegated click listener plus one change listener on the page, so a re-render never loses a
     // binding and a rename input only writes on commit (desktop parity: rename on `change`).
@@ -1196,6 +1950,51 @@
         if (join) { event.preventDefault(); openAddDialog({ url: join.getAttribute('data-machine-url') || '' }); return; }
         var signIn = closest('[data-machine-signin]');
         if (signIn) { event.preventDefault(); signInToo(signIn.getAttribute('data-machine-signin')); return; }
+        // WP-9: the Review sheet's own actions (same verbs, same wording as the desktop dialog).
+        var reviewOpen = closest('[data-machine-review]');
+        if (reviewOpen) { event.preventDefault(); openReviewSheet(reviewOpen.getAttribute('data-machine-review')); return; }
+        var skip = closest('[data-review-skip]');
+        if (skip) { event.preventDefault(); reviewSkip(skip); return; }
+        var diff = closest('[data-review-diff]');
+        if (diff) {
+          event.preventDefault();
+          showDiff(diff.getAttribute('data-review-id'), diff.getAttribute('data-review-agent'), diff.getAttribute('data-review-name'), diff);
+          return;
+        }
+        var savePluginsNode = closest('[data-review-save-plugins]');
+        if (savePluginsNode) {
+          event.preventDefault();
+          savePlugins(savePluginsNode.getAttribute('data-review-id'), savePluginsNode);
+          return;
+        }
+        // WP-4: "Remove from <name>" — the instance id is the sheet's own (review.instanceId), never
+        // read back out of the markup.
+        var removeModelsNode = closest('[data-role="models-remove"]');
+        if (removeModelsNode) {
+          event.preventDefault();
+          removeModels(review.instanceId, removeModelsNode);
+          return;
+        }
+        // WP-5: "Use on <name>" — one route per tap, the sheet's own id, the row's own route/origin.
+        var copyModelNode = closest('[data-role="models-copy"]');
+        if (copyModelNode) {
+          event.preventDefault();
+          copyModel(review.instanceId, copyModelNode);
+          return;
+        }
+        var action = closest('[data-review-action]');
+        if (action) {
+          event.preventDefault();
+          reviewAction(
+            action.getAttribute('data-review-id'),
+            action.getAttribute('data-review-agent'),
+            action.getAttribute('data-review-name'),
+            action.getAttribute('data-review-box-hash'),
+            action.getAttribute('data-review-verb'),
+            action,
+          );
+          return;
+        }
         // WP-3: sign a coding agent in ON another machine (the passkey row above is the CTM LOGIN).
         var agentSignIn = closest('[data-machine-sign-in]');
         if (agentSignIn) {
@@ -1228,6 +2027,9 @@
       scope.addEventListener('change', function (event) {
         var target = event.target;
         var closest = target && typeof target.closest === 'function' ? target.closest.bind(target) : null;
+        // WP-4: a tick on a route row is the only thing that arms "Remove from <name>".
+        var pick = closest ? closest('[data-role="models-pick"]') : null;
+        if (pick) { modelsPicked(); return; }
         var input = closest ? closest('[data-machine-rename]') : null;
         if (!input) return;
         rename(input.getAttribute('data-machine-rename'), input.value);
@@ -1286,6 +2088,35 @@
       registerLegacy: registerLegacy,
       openShowCodeDialog: openShowCodeDialog,
       closeDialog: closeDialog,
+      // WP-9 (§9 S-9): the row line + Review sheet, exposed like every other presenter here.
+      skillsRowHtml: skillsRowHtml,
+      skillsLineText: skillsLineText,
+      skillsNeedsReview: skillsNeedsReview,
+      // WP-3 (§8 WP-3): the row line + Review sheet's Models half, exposed like the skills twins.
+      modelsRowHtml: modelsRowHtml,
+      modelsLineText: modelsLineText,
+      modelsNeedsReview: modelsNeedsReview,
+      reviewModelsHtml: reviewModelsHtml,
+      reviewSheetHtml: reviewSheetHtml,
+      reviewHeldBackHtml: reviewHeldBackHtml,
+      reviewOnBoxHtml: reviewOnBoxHtml,
+      reviewPluginsHtml: reviewPluginsHtml,
+      openReviewSheet: openReviewSheet,
+      reviewRefresh: reviewRefresh,
+      reviewAction: reviewAction,
+      reviewSkip: reviewSkip,
+      savePlugins: savePlugins,
+      // WP-4 (§8 WP-4): the Models section's one control — the ids, the arming, and the write.
+      modelsChecked: modelsChecked,
+      modelsPicked: modelsPicked,
+      removeModels: removeModels,
+      // WP-5 (§8 WP-5): the "From this hub" subsection — the rows, the one read, and the write.
+      fromHubHtml: fromHubHtml,
+      fromHubItemsHtml: fromHubItemsHtml,
+      fetchFromHub: fetchFromHub,
+      copyModel: copyModel,
+      showDiff: showDiff,
+      diffHtml: diffHtml,
       preview: function () { return dialog ? previewFields() : null; },
       dialog: function () { return dialog; },
       readOrigins: poolOrigins,
@@ -1307,6 +2138,9 @@
     sheetRowHtml: sheetRowHtml,
     sheetListHtml: sheetListHtml,
     credentialBadge: credentialBadge,
+    // WP-3 (box-owned sessions): the one sentence for a /delegate pick the box cannot reach, read by
+    // the shared Delegate pane on the phone (PHONE = DESKTOP PARITY).
+    modelsDelegateWarnings: modelsDelegateWarnings,
   };
   if (typeof module === 'object' && module.exports) module.exports = out;
   else root.CtmPhoneMachines = out;