create-walle 0.10.2 → 0.10.3

package/template/coding-task-manager/public/js/terminal-attachment-draft.js

@@ -44,9 +44,30 @@
     return { revision: 0, attachments: [], submission: null };
   }
 
+  // WP-2 (composer-image-chip-stuck-submission-recovery-2026-10-30.html §5 R-2/R-3b): the
+  // submission's decision point. Enter is forwarded ONLY after markEnterSent, so `enter_sent`
+  // in either phase slot means the provider may already hold the image -- such a submission is
+  // never aborted (2PC blocking caveat) and never re-sent.
+  function enterMayHaveBeenSent(draft) {
+    var submission = draft && draft.submission;
+    return !!(submission && (submission.phase === 'enter_sent' || submission.resumePhase === 'enter_sent'));
+  }
+
+  // R-4: no chip is ever without a working removal. 'dismiss-submitted' is the post-Enter
+  // LOCAL dismissal (no server DELETE, no re-send); 'disabled' survives only for the
+  // transient phases (freezing/awaiting_enter/editing/frozen), where Esc already aborts.
+  // A pre-Enter indeterminate submission falls through to the normal per-status rules, with
+  // an indeterminate chip mapping to 'remove' (its removal aborts the submission first).
   function dismissDisposition(draft, attachment) {
     if (!attachment || !VALID_STATUSES.has(attachment.status)) return 'disabled';
-    if (draft && draft.submission) return 'disabled';
+    var submission = draft && draft.submission;
+    if (submission) {
+      if (submission.phase !== 'indeterminate') return 'disabled';
+      if (enterMayHaveBeenSent(draft)) {
+        return (submission.attachmentIds || []).indexOf(attachment.clientId) !== -1 ? 'dismiss-submitted' : 'disabled';
+      }
+      if (attachment.status === 'indeterminate') return 'remove';
+    }
     if (attachment.status === 'editing' || attachment.status === 'freezing' || attachment.status === 'frozen') {
       return 'disabled';
     }
@@ -670,8 +691,22 @@
     return attachment;
   }
 
+  // R-5 (WP-2): the ONE local removability predicate -- no server DELETE may be issued for a
+  // chip this returns false for. A submission blocks removal only while it is still transient
+  // (freezing/awaiting_enter) or after Enter may have been sent; a pre-Enter indeterminate
+  // submission is aborted by the removal itself (presumed abort, R-2).
+  function canRemoveAttachment(draft, clientId) {
+    if (draft && draft.submission && !(draft.submission.phase === 'indeterminate' && !enterMayHaveBeenSent(draft))) {
+      return false;
+    }
+    return _attachments(draft).some(function (attachment) {
+      return attachment && attachment.clientId === clientId;
+    });
+  }
+
   function removeAttachment(draft, clientId) {
-    if (draft && draft.submission) return false;
+    if (!canRemoveAttachment(draft, clientId)) return false;
+    if (draft.submission) abortSubmission(draft, 'user-removed');
     var list = _attachments(draft);
     var index = list.findIndex(function (attachment) {
       return attachment && attachment.clientId === clientId;
@@ -797,8 +832,11 @@
 
   function abortSubmission(draft, error) {
     if (!draft || !draft.submission) return false;
+    var affected = new Set(draft.submission.attachmentIds || []);
     _attachments(draft).forEach(function (attachment) {
-      if (attachment.status === 'freezing' || attachment.status === 'frozen') {
+      // A hydrated pre-Enter indeterminate submission (R-2) restores its own chips too.
+      if (attachment.status === 'freezing' || attachment.status === 'frozen'
+        || (attachment.status === 'indeterminate' && affected.has(attachment.clientId))) {
         attachment.status = attachment._preSubmissionStatus === 'unconfirmed' ? 'unconfirmed' : 'attached';
         delete attachment._preSubmissionStatus;
       }
@@ -824,15 +862,28 @@
     return true;
   }
 
-  function retryIndeterminate(draft) {
-    if (!draft || !draft.submission || draft.submission.phase !== 'indeterminate') return false;
-    var affected = new Set(draft.submission.attachmentIds || []);
-    _attachments(draft).forEach(function (attachment) {
-      if (affected.has(attachment.clientId) && attachment.status === 'indeterminate') attachment.status = 'attached';
-    });
-    draft.submission = null;
-    draft.revision += 1;
-    return true;
+  // R-2/R-3b (WP-2): the single failure exit for a send/resume. Before Enter nothing was
+  // committed to the provider, so the submission is aborted (presumed abort) and the chips
+  // return to their pre-submission state; after Enter the outcome is unknown, so the
+  // submission stays locked as indeterminate until the user resolves it. Returns the outcome
+  // ('' when there was no submission) so the caller can pick its metric/toast without
+  // re-deriving the decision.
+  function failSubmission(draft, error) {
+    if (!draft || !draft.submission) return '';
+    if (enterMayHaveBeenSent(draft)) {
+      markIndeterminate(draft, error);
+      return 'indeterminate';
+    }
+    abortSubmission(draft, error);
+    return 'aborted';
+  }
+
+  // R-3b: after Enter the chip's removal is a LOCAL dismissal -- the provider may already hold
+  // the image, so the server row is never deleted and Enter is never re-sent.
+  function dismissSubmitted(draft) {
+    if (!draft || !draft.submission) return false;
+    if (draft.submission.phase !== 'indeterminate' || !enterMayHaveBeenSent(draft)) return false;
+    return completeSubmission(draft);
   }
 
   function completeSubmission(draft) {
@@ -948,6 +999,10 @@
     statusText: statusText,
     createDraft: createDraft,
     dismissDisposition: dismissDisposition,
+    enterMayHaveBeenSent: enterMayHaveBeenSent,
+    failSubmission: failSubmission,
+    canRemoveAttachment: canRemoveAttachment,
+    dismissSubmitted: dismissSubmitted,
     addUploading: addUploading,
     markReady: markReady,
     adoptServerSnapshot: adoptServerSnapshot,
@@ -975,7 +1030,6 @@
     markEnterSent: markEnterSent,
     abortSubmission: abortSubmission,
     markIndeterminate: markIndeterminate,
-    retryIndeterminate: retryIndeterminate,
     completeSubmission: completeSubmission,
     serializeDraft: serializeDraft,
     hydrateDraft: hydrateDraft,

package/template/coding-task-manager/public/js/terminal-image-orchestration.js

@@ -142,30 +142,76 @@
     };
   }
 
+  // Observed tokens are `{label, start, end}` objects from the composer scan
+  // (image-composer-scan.js); plain label strings are accepted too.
+  function _observedTokenLabel(token) {
+    return typeof token === 'string' ? token : String(token && token.label || '');
+  }
+
+  // Only the OBSERVED provider label is an identity: `label` is the tray's local staging rank
+  // (_relabel in terminal-attachment-draft.js) and can differ from the agent's own ordinal.
+  function _attachmentLabel(attachment) {
+    return String((attachment && attachment.providerLabel) || '');
+  }
+
+  // A label is only a stable identity for providers that keep their ordinals
+  // across a deletion. Codex renumbers after a deletion (observedProviderLabelUpdates
+  // above), so a Codex chip always falls back to the count rule; a chip with no
+  // label has nothing to match on either.
+  function _labelKeyedAttachment(attachment, sessionProvider) {
+    return _attachmentLabel(attachment) !== '' &&
+      String((attachment && attachment.provider) || sessionProvider || '').toLowerCase() !== 'codex';
+  }
+
   function deriveObservedMembership(options) {
     options = options || {};
     var list = Array.isArray(options.attachments) ? options.attachments : [];
     var scan = options.scan || {};
     var settle = options.settle;
-    var observedCount = Array.isArray(options.observedTokens) ? options.observedTokens.length : 0;
+    var tokens = Array.isArray(options.observedTokens) ? options.observedTokens : [];
+    var observedCount = tokens.length;
     var visible = list.filter(Boolean);
     var detached = [];
     var confirmedDeleted = [];
     var trusted = scan.known === true && scan.active === true && scan.markerFound === true;
-    var attached = visible.filter(function (attachment) { return attachment.status === 'attached'; });
-    if (!trusted || !settle || typeof settle.observe !== 'function' || attached.length <= observedCount) {
+    if (!trusted || !settle || typeof settle.observe !== 'function') {
       if (settle && typeof settle.reset === 'function') settle.reset();
       return { visible: visible, detachedClientIds: detached, confirmedDeletedClientIds: confirmedDeleted };
     }
+    // Multiset of observed labels. A chip that is no longer attached (indeterminate,
+    // failed, submitting) still owns one of these tokens: consume it first, by label, so
+    // that a departed chip cannot make an attached sibling look surplus.
+    var pool = tokens.map(_observedTokenLabel).filter(function (label) { return label !== ''; });
+    visible.forEach(function (attachment) {
+      if (attachment.status === 'attached' || !_labelKeyedAttachment(attachment, options.provider)) return;
+      var consumed = pool.indexOf(_attachmentLabel(attachment));
+      if (consumed >= 0) pool.splice(consumed, 1);
+    });
+    // Missing = a label-keyed attached chip whose label is not in the pool (one token per
+    // chip, in list order). Chips with no label (or a renumbering provider such as Codex)
+    // keep the count rule against the pool's REMAINING size, popped from the end.
+    var candidates = [];
+    var counted = [];
+    visible.forEach(function (attachment) {
+      if (attachment.status !== 'attached') return;
+      if (!_labelKeyedAttachment(attachment, options.provider)) { counted.push(attachment); return; }
+      var consumed = pool.indexOf(_attachmentLabel(attachment));
+      if (consumed >= 0) pool.splice(consumed, 1);
+      else candidates.push(attachment);
+    });
+    while (counted.length > pool.length) candidates.push(counted.pop());
+    if (!candidates.length) {
+      if (typeof settle.reset === 'function') settle.reset();
+      return { visible: visible, detachedClientIds: detached, confirmedDeletedClientIds: confirmedDeleted };
+    }
     if (!settle.observe(observedCount, options.nowMs)) {
       return { visible: visible, detachedClientIds: detached, confirmedDeletedClientIds: confirmedDeleted };
     }
-    while (attached.length > observedCount) {
-      var item = attached.pop();
+    candidates.forEach(function (item) {
       if (options.editWindowActive === true) confirmedDeleted.push(item.clientId);
       else detached.push(item.clientId);
       visible = visible.filter(function (candidate) { return candidate !== item; });
-    }
+    });
     settle.reset();
     return { visible: visible, detachedClientIds: detached, confirmedDeletedClientIds: confirmedDeleted };
   }

package/template/coding-task-manager/public/js/terminal-wheel.js

@@ -97,6 +97,10 @@
     // WP-0 (unified-terminal-history-scroll-2026-09-24 §5 D-3): the history reader is mounted
     // for this pane -- decideWheel checks this FIRST, before every other fact below.
     readerOpen,
+    // WP-1 (wheel-reader-only-where-history-exists-2026-10-28 §5 D-1/D-3): does this session's
+    // provider have a reader history source at all? 'transcript' (claude/codex) -> true; every other
+    // provider has none, so its wheel-up must forward to the app rather than open a reader that exits.
+    historyReader,
   }) {
     return {
       deltaY, wheelStartViewportY,
@@ -106,6 +110,7 @@
       xtermProtocol, xtermEncoding,
       exited: !!exited, agentKind, hasScrollback: !!hasScrollback,
       readerOpen: !!readerOpen,
+      historyReader: historyReader === true,
     };
   }
 
@@ -148,7 +153,7 @@
     const {
       deltaY, wheelStartViewportY, bufferType, baseY, viewportY,
       tuiAltScreen, frameMouse, tuiAppMouse, tuiMouseEnc,
-      xtermProtocol, xtermEncoding, exited, agentKind, hasScrollback,
+      xtermProtocol, xtermEncoding, exited, agentKind, hasScrollback, historyReader,
     } = facts;
     const terminalMouseState = deps.terminalMouseState;
     const terminalWheelRoute = deps.terminalWheelRoute;
@@ -192,7 +197,11 @@
     // D-4 (handoff-seed-keeps-mouse-modes-codex-reader-without-mouse-2026-10-06): a Codex tab owns
     // its transcript in-app and has no local scrollback on the alt screen, so an unproven mouse must
     // not strand it -- a wheel-UP opens the reader, which sends no mouse report and needs no proof.
-    const codexAltReaderUp = agentKind === 'codex' && bufferType === 'alternate' && deltaY < 0
+    // WP-1 (wheel-reader-only-where-history-exists-2026-10-28 §5 D-1, §6): both reader arms require the
+    // capability -- a provider with no reader source must never reach 'reader-enter' (it would exit at
+    // once and lose the wheel). codex is always historyReader:true, so its cells stay byte-identical;
+    // gating it here is only observable for a hypothetical no-source codex (none).
+    const codexAltReaderUp = historyReader && agentKind === 'codex' && bufferType === 'alternate' && deltaY < 0
       && !exited && !parkedInLocalScrollback;
     const mouseUnknown = isAlt && !mouseActive && providerOwnsWheel && !parkedInLocalScrollback
       && !codexAltReaderUp;
@@ -225,7 +234,11 @@
     // screen left to snapshot into a continuous reader for a PTY that has already exited.
     // D-4 of handoff-seed-keeps-mouse-modes-codex-reader-without-mouse-2026-10-06: a Codex alt-screen
     // wheel-UP also opens the reader without a proven mouse (`codexAltReaderUp`).
-    const readerEnterEligible = (shouldForward && isAlt && deltaY < 0 && !exited) || codexAltReaderUp;
+    // WP-1 (wheel-reader-only-where-history-exists-2026-10-28 §5 D-1/D-2): reader entry requires a
+    // reader source. With historyReader false nothing else changes -- the chain falls through to
+    // shouldForward -> 'forward' (the app owns its own wheel), or to mouseUnknown (already outranks it).
+    const readerEnterEligible = historyReader
+      && ((shouldForward && isAlt && deltaY < 0 && !exited) || codexAltReaderUp);
 
     let action = 'noop';
     if (nativeDelegate) action = 'native-delegate';
@@ -254,6 +267,9 @@
       nativeDelegate,
       preventNoScrollbackNativeOrSnapshot,
       mouseUnknown,
+      // WP-1 §5 D-1: the declared capability, echoed so the gesture recorder / tests can prove
+      // which provider branch ran (the readerOpen early return above carries no historyReader).
+      historyReader: historyReader === true,
       codexAltReaderUp,
       shouldForward,
       readerEnterEligible,
@@ -486,6 +502,8 @@
         baseY: null,
         appMouse: null,
         isAlt: null,
+        // WP-1 §5 D-3/S-4: prove which provider branch ran (reader-capable vs not) in the summary.
+        historyReader: null,
         mouseSource: null,
         frameTracking: null,
         sendTimestamps: [],
@@ -547,6 +565,7 @@
           baseY: g.baseY,
           appMouse: g.appMouse,
           isAlt: g.isAlt,
+          historyReader: g.historyReader, // WP-1: does this session's provider have a reader source? (null = no event carried it)
           mouseSource: g.mouseSource || 'unknown', // probe: which evidence path (frame|tui-mode|xterm|unknown) answered
           frameTracking: g.frameTracking == null ? null : g.frameTracking, // probe: raw frame.surface.mouse.tracking
           rttP50: percentile(sorted, 50),
@@ -581,6 +600,7 @@
       if (details.baseY !== undefined) gesture.baseY = details.baseY;
       if (details.appMouse !== undefined) gesture.appMouse = details.appMouse;
       if (details.isAlt !== undefined) gesture.isAlt = details.isAlt;
+      if (details.historyReader !== undefined) gesture.historyReader = details.historyReader;
       if (details.mouseSource !== undefined) gesture.mouseSource = details.mouseSource;
       if (details.frameTracking !== undefined) gesture.frameTracking = details.frameTracking;
       if (details.sessionId !== undefined) gesture.sessionId = details.sessionId;

package/template/coding-task-manager/public/js/walle/chat-conversation.js

@@ -1219,12 +1219,12 @@
   }
 
   // Fetch the active model for the badge (once, then cached in walle.js, which
-  // the service-alert layer also reads).
+  // the service-alert layer also reads). CTM route: read via the panel, never the transport.
   function loadActiveModel() {
-    var api = currentApi();
-    if (!api || typeof api.get !== 'function') return;
+    var fetchStatus = hook('fetchSetupStatus');
+    if (!fetchStatus) return;
     var remember = hook('rememberActiveModel');
-    api.get('/api/setup/status', { signal: currentSignal() }).then(function(d) {
+    fetchStatus({ signal: currentSignal() }).then(function(d) {
       if (!isCurrent()) return;
       if (remember) remember(d || null);
       if (d && (d.walle_model || d.walle_provider)) {

package/template/coding-task-manager/public/js/walle.js

@@ -422,6 +422,12 @@ function _rerenderChatPane() {
 // result is panel state: the service-alert layer filters issues by the active
 // provider, and the provider-test dialog replays its auth_method.
 WE.activeModel = function() { return _cachedActiveModel; };
+// /api/setup/status is CTM's own route, never Wall-E's: the conversation's transport prefixes
+// /api/wall-e and the proxied read 404s (nightly-linux-host-portability-2026-10-27 WP-11), so the
+// panel reads it here, like the pasted-image fetch below. A non-OK status is null, never a throw.
+WE.fetchSetupStatus = function(opts) {
+  return fetch('/api/setup/status', { signal: opts && opts.signal }).then(function(r) { return r.ok ? r.json() : null; });
+};
 WE.rememberActiveModel = function(status) {
   _cachedSetupStatus = status || null;
   if (status && (status.walle_model || status.walle_provider)) {

package/template/coding-task-manager/public/js/ws/live-dispatch.js

@@ -63,6 +63,16 @@
         // delegate chip answer is stale. Same frame on desktop and phone; both call one picker function.
         context.handleDelegatePrefChanged(message);
         return true;
+      case 'hub-bridge-pending':
+      case 'hub-bridge-pending-cleared': {
+        // R-5/R-13 hub-bridge ask fan-out (AC-2g). Not a Wall-E frame; it rides this dispatcher like
+        // lead-model-request. The Machines page owns the session toolbar banner and the Access block,
+        // and publishes itself as globalThis.CtmHubBridgeAccess; the frame is still consumed here when
+        // no page is loaded, so index.html's switch stays net zero.
+        const hubBridge = globalThis.CtmHubBridgeAccess;
+        if (hubBridge && typeof hubBridge.onFrame === 'function') hubBridge.onFrame(message);
+        return true;
+      }
       case 'walle-turn-terminal':
         // Broadcast companion to subscribed progress: inactive or recently
         // unsubscribed Wall-E tabs still learn that the canonical turn ended.

package/template/coding-task-manager/public/m/app.css

@@ -880,6 +880,14 @@ h3 {
   background: rgba(116, 215, 199, 0.10);
   color: #74d7c7;
 }
+
+/* WP-3b: the landing-queue chip (`⇡#2/3 · 23m`) — the phone counterpart of the desktop
+   `.wt-landing` part. */
+.session-diff-chip.landing {
+  border-color: rgba(122, 162, 247, 0.34);
+  background: rgba(122, 162, 247, 0.12);
+  color: #7aa2f7;
+}
 /* Commits exist but merging changes nothing (integrated/superseded) — dim so it reads as
    low-priority/safe-to-clean vs genuine unmerged work. */
 .session-diff-chip.commits.commits-noop {
@@ -7141,6 +7149,14 @@ button.walle-model-effort-note.ctm-route-back {
   line-height: 18px;
 }
 
+/* WP-3b phone parity: the landing-queue mark on the SESSION ROW (`⇡#1/1`), same colors as
+   `.session-diff-chip.landing`. */
+.row-diff-mark.landing {
+  border-color: rgba(122, 162, 247, 0.34);
+  background: rgba(122, 162, 247, 0.12);
+  color: #7aa2f7;
+}
+
 .session-row.home-row .row-actions {
   display: flex;
   flex-direction: row;
@@ -7423,6 +7439,66 @@ html[data-theme="light"] #view-walle {
 #phone-machines-card .mp-btn:active { opacity: 0.82; }
 #phone-machines-card .mp-btn.mp-primary { border-color: var(--accent, #7aa2f7); color: var(--accent, #7aa2f7); }
 #phone-machines-card .mp-btn.mp-danger { border-color: var(--red, #f7768e); color: var(--red, #f7768e); }
+/* hub bridge (R-13 / AC-2g): the same Access block and approval banner as the desktop card. */
+.mp-access { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.12)); font-size: 14px; }
+.mp-access-head { display: flex; align-items: center; gap: 8px; }
+.mp-access-trust { display: flex; align-items: center; gap: 8px; color: var(--fg-dim, #a9b1d6); }
+.mp-access-trust select { min-height: 44px; padding: 0 10px; border: 1px solid var(--border, rgba(255, 255, 255, 0.12)); border-radius: 10px; background: var(--bg-light, #24283b); color: var(--fg); font-size: 14px; }
+.mp-access-trust-all { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fg-dim, #a9b1d6); }
+.mp-access-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
+.mp-access-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.mp-access-pending { color: var(--yellow, #e0af68); }
+.mp-access-audit { color: var(--fg-dim, #a9b1d6); font-size: 13px; }
+.mp-access-text { overflow-wrap: anywhere; }
+.mp-access .mp-btn, .mp-approval-banner .mp-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--border, rgba(255, 255, 255, 0.12)); border-radius: 10px; background: var(--bg-light, #24283b); color: var(--fg); font-size: 14px; }
+.mp-access .mp-btn.mp-danger, .mp-approval-banner .mp-btn.mp-danger { border-color: var(--red, #f7768e); color: var(--red, #f7768e); }
+.mp-approval-banner { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
+/* The approval prompt's own classes (docs/hub-bridge-approval-scopes-2026-11-01.html §6.5). The
+   structural classes are `hbb-*` on both surfaces; this is the phone's dressing: 44 px targets, no
+   type below 12 px (bin/mobile-css-floor-lint.js), one column, and pairs that share the full width.
+   Colours use the PHONE's tokens (--bg-soft, --line-strong, --blue, --ink, --amber): the desktop's
+   --bg-light / --accent / --border are not defined here and would fall back to dark in light mode. */
+.mp-approval-banner .hbb-head, .mp-access .hbb-head { display: flex; gap: 10px; align-items: flex-start; }
+.mp-approval-banner .hbb-icon, .mp-access .hbb-icon {
+  flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
+  background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber);
+}
+.mp-approval-banner .hub-bridge-banner-text, .mp-access .hub-bridge-banner-text {
+  flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 14px;
+}
+.mp-approval-banner .hub-bridge-banner-text b, .mp-access .hub-bridge-banner-text b { font-weight: 600; }
+.mp-approval-banner .hbb-tier, .mp-access .hbb-tier {
+  flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
+  color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent);
+  border-radius: 999px; padding: 4px 10px;
+}
+.mp-approval-banner .hbb-detail, .mp-access .hbb-detail {
+  padding: 6px 8px; border-radius: 8px; background: var(--bg-soft);
+  color: var(--fg-muted); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.mp-approval-banner .hbb-grants, .mp-access .hbb-grants {
+  display: grid; grid-template-columns: 1fr; gap: 6px 10px; align-items: center; margin-left: 0;
+}
+.mp-approval-banner .hbb-label, .mp-access .hbb-label { font-size: 12px; color: var(--fg-muted); }
+.mp-approval-banner .hbb-seg, .mp-access .hbb-seg { display: flex; width: 100%; }
+.mp-approval-banner .hbb-btn, .mp-access .hbb-btn {
+  display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0;
+  min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong);
+  border-radius: 10px; background: var(--bg-soft); color: var(--fg); font-size: 14px;
+}
+.mp-approval-banner .hbb-seg .hbb-btn:first-child, .mp-access .hbb-seg .hbb-btn:first-child { border-radius: 10px 0 0 10px; }
+.mp-approval-banner .hbb-seg .hbb-btn + .hbb-btn, .mp-access .hbb-seg .hbb-btn + .hbb-btn { border-left: 0; border-radius: 0 10px 10px 0; }
+.mp-approval-banner .hbb-btn.hbb-primary, .mp-access .hbb-btn.hbb-primary {
+  background: var(--blue); border-color: var(--blue);
+  color: var(--ink); font-weight: 600;
+}
+.mp-approval-banner .hbb-foot, .mp-access .hbb-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.mp-approval-banner .hbb-note, .mp-access .hbb-note { font-size: 12px; color: var(--fg-dim); }
+.mp-approval-banner .hbb-deny, .mp-access .hbb-deny {
+  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px;
+  border: 1px solid transparent; border-radius: 10px; background: transparent;
+  color: var(--fg-muted); font-size: 14px;
+}
 #phone-machines-card .mp-card {
   margin-top: 10px;
   padding: 10px 12px;
@@ -7465,6 +7541,13 @@ html[data-theme="light"] #view-walle {
   white-space: nowrap;
 }
 #phone-machines-card .mp-meta { margin-top: 2px; color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+/* WP-3: the phone twin of the desktop card's .mpc-fleet — same line, same size as .mp-meta, tone
+   from this page's own theme variables. Dark mode rides the variables like every other row. */
+#phone-machines-card .mp-fleet { margin-top: 2px; color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+#phone-machines-card .mp-fleet[data-fleet-tone="ok"] { color: var(--green, #9ece6a); }
+#phone-machines-card .mp-fleet[data-fleet-tone="pending"] { color: var(--yellow, #e0af68); }
+#phone-machines-card .mp-fleet[data-fleet-tone="warn"] { color: var(--red, #f7768e); }
+#phone-machines-card .mp-fleet[data-fleet-tone="muted"] { color: var(--fg-dim, #7d8590); }
 #phone-machines-card .mp-stale { color: var(--yellow, #e0af68); }
 #phone-machines-card .mp-error { color: var(--red, #f7768e); font-size: 13px; }
 #phone-machines-card .mp-sparks { display: flex; gap: 12px; margin-top: 8px; }
@@ -7546,3 +7629,60 @@ html[data-theme="light"] #view-walle {
 .pool-origin-name { color: var(--fg); font-weight: 600; }
 .pool-origin-state,
 .pool-origin-address { color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+
+/* ── WP-9 (§9 S-9): the row's one Skills line and its Review sheet ────────────────────────────────
+   PHONE = DESKTOP PARITY: the same line, the same three sections, the same actions and wording the
+   desktop page renders in public/js/app/machines-page.js. The fonts stay at or above the phone floor
+   (lint/mobile-css-floor.config.json), and the buttons keep the 44 px tap target. */
+#phone-machines-card .mp-skills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
+#phone-machines-card .mp-skills-line { color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+#phone-machines-card .mp-skills-review { flex: 0 0 auto; }
+/* WP-3 (§8 WP-3): the phone twin of the row's Models line, its /delegate warnings and its Review
+   button. Fonts stay at or above the phone floor (lint/mobile-css-floor.config.json). */
+#phone-machines-card .mp-models { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
+#phone-machines-card .mp-models-line { color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+#phone-machines-card .mp-models-sep { color: var(--fg-dim); font-size: 12px; }
+#phone-machines-card .mp-models-review { flex: 0 0 auto; }
+#phone-machines-card .mp-models-warn { flex-basis: 100%; color: var(--red, #f7768e); font-size: 12px; overflow-wrap: anywhere; }
+.mp-review-sheet { max-height: 88vh; overflow-y: auto; }
+.mp-review-section { margin-top: 14px; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.12)); padding-top: 10px; }
+.mp-review-section h4 { margin: 0 0 6px; color: var(--fg); font-size: 13px; }
+.mp-review-section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+.mp-review-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
+.mp-review-name { color: var(--fg); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
+.mp-review-meta, .mp-review-where, .mp-review-note { color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+.mp-review-note { margin: 6px 0 0; }
+.mp-review-note.bad { color: var(--red, #f7768e); }
+.mp-review-empty { color: var(--fg-dim); font-size: 12px; }
+.mp-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+/* WP-4 (§8 WP-4): the unreachable rows' one control — a 22px tick (the D-19 phone floor), then the
+   44px button under the list. */
+.mp-review-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fg); font-size: 13px; }
+.mp-review-pick input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
+.mp-review-models-remove { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.mp-review-models-remove .mp-btn { font-size: 13px; min-height: 44px; }
+/* WP-5 (§8 WP-5): "From this hub" — a heading level under the Models one, one 44px button per row. */
+.mp-review-from-hub { margin-top: 10px; }
+.mp-review-from-hub h5 { margin: 0 0 6px; color: var(--fg-dim); font-size: 12px; font-weight: 600; }
+.mp-review-from-hub .mp-review-actions .mp-btn { font-size: 13px; min-height: 44px; }
+.mp-review-plugins { display: flex; flex-direction: column; gap: 6px; }
+.mp-review-plugin { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fg); font-size: 13px; }
+.mp-review-plugin input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
+.mp-review-diff {
+  flex: 1 1 100%;
+  max-height: 46vh;
+  overflow: auto;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
+  border-radius: 8px;
+  padding: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.mp-diff { display: flex; flex-direction: column; }
+.mp-diff span { white-space: pre-wrap; overflow-wrap: anywhere; }
+.mp-diff-file { margin: 8px 0 2px; color: var(--fg); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
+.mp-diff-binary { margin: 0 0 4px; color: var(--fg-dim); font-size: 12px; }
+.mp-diff-add { color: var(--green, #9ece6a); }
+.mp-diff-del { color: var(--red, #f7768e); }
+.mp-diff-eq { color: var(--fg-dim); }