From 75070453518cc806a9f7525f0a269aac051e397e Mon Sep 17 00:00:00 2001
From: Sentinel-Bluebuilder <Sentinel-Bluebuilder@users.noreply.github.com>
Date: Sun, 21 Jun 2026 13:20:39 -0700
Subject: [PATCH 1/2] feat: optimistic UI updates with chain-truth
 reconciliation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After a mutating action (link/unlink node, add subscriber, register
provider) the operator had to wait out the read-cache TTL plus chain
indexing before the change appeared — "added nodes show after a big
delay", "subscriber count stale", etc.

Frontend: apply the change optimistically, then reconcile against chain
truth on a short delay and on a bounded retry schedule, so the UI is
instant but self-corrects if the chain disagrees.
  - optimisticThenReconcile(url, { mutate, render, page }) — generic
    optimistic-then-refetch wrapper
  - reconcileProviderViews / reconcilePlanNodes / reconcileSubscriberViews
    — view-specific reconcilers with backoff (attempts/baseMs)
  - seedYourNodesWithAdded — show just-linked nodes immediately in Your Nodes

Backend: invalidate the operator-scoped read caches the moment a sub
lands so the reconcile refetch sees fresh data instead of a 30-120s
stale snapshot.
  - invalidateSubscriberCaches(planId) drops planMembers/ownSub/planStats/
    uniqueWallets for the operator
  - called on subscribe, add-subscriber, and add-subscribers success
  - getUniqueWallets wrapped in cached() (120s TTL) so its key exists to
    be invalidated and the up-to-10k subscription query stops re-firing
    on every plan detail view
---
 public/index.html | 320 ++++++++++++++++++++++++++++++++++++++++------
 server.js         |  30 +++++
 2 files changed, 308 insertions(+), 42 deletions(-)

diff --git a/public/index.html b/public/index.html
index 2ac4cde..f46ba0f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5456,7 +5456,7 @@ <h1 class="mobile-gate-title">View on Desktop</h1>
 
       <!-- Privy / email pane -->
       <div id="privyPane" style="display:none">
-        <button class="auth-back" type="button" onclick="backToChooser()">← Back</button>
+        <button class="auth-back" type="button" onclick="backToChooser()">← Back</button>
         <div class="import-form-title">Sign in with email</div>
         <div class="import-form-sub">
           Enter your email. Privy will send a one-time code, then create or unlock an embedded Sentinel wallet for your account. Powered by <a href="https://privy.io" target="_blank" rel="noopener" style="color:var(--accent)">Privy</a>.
@@ -5467,7 +5467,7 @@ <h1 class="mobile-gate-title">View on Desktop</h1>
 
       <!-- Recovery phrase pane (was: Import pane) -->
       <div id="importPane" style="display:none">
-        <button class="auth-back" type="button" onclick="backToChooser()">← Back</button>
+        <button class="auth-back" type="button" onclick="backToChooser()">← Back</button>
         <div class="import-form-title">Sign in with recovery phrase</div>
         <div class="import-form-sub">
           Paste your 12 or 24-word mnemonic. It is encrypted with AES-256-GCM and stored only in an httpOnly cookie scoped to your browser. The server never writes plaintext to disk.
@@ -7024,9 +7024,20 @@ <h3 id="securityFaqTitle">
       toast('Transaction broadcast: ' + (d.txHash || '').slice(0, 16) + '…', 'success');
       $('sendAmt').value = '';
       $('sendMemo').value = '';
-      // Refresh balances.
+      // Refresh balances. The bank balance lags the TX by a block or two, so the
+      // immediate reload may still show the pre-send amount — reconcile after the
+      // indexing window with a second cache-busting reload.
       invalidateCache(/^\/api\/wallet/);
       await loadWallet();
+      (async () => {
+        const epoch = _currentNavEpoch();
+        const startPage = S.page;
+        await new Promise(r => setTimeout(r, 3000));
+        if (!_navStillCurrent(epoch, startPage)) return;
+        invalidateCache(/^\/api\/wallet/);
+        try { await loadWallet(); }
+        catch (e) { console.debug('[wallet send] balance reconcile failed: ' + (e && e.message)); }
+      })();
     } else {
       resultEl.style.display = '';
       resultEl.innerHTML = `<div style="background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.4);border-radius:var(--radius-md);padding:10px 12px;font-size:12px;color:var(--text)">
@@ -8773,6 +8784,25 @@ <h3 id="securityFaqTitle">
 // (the Keplr register path lands it inactive; the auto-chain only fires for a
 // brand-new registration in the same session). Sends MsgUpdateProviderStatus
 // (status=1) through txFetch, which relays the Keplr signature.
+// Provider status (active/inactive) and the providers list lag a register /
+// activate TX by a block or two. The immediate loadWallet+render after the TX
+// reads the pre-mutation status; this waits out the window and re-reads truth.
+async function reconcileProviderViews({ delayMs = 3000 } = {}) {
+  const epoch = _currentNavEpoch();
+  const startPage = S.page;
+  await new Promise(r => setTimeout(r, delayMs));
+  if (!_navStillCurrent(epoch, startPage)) return;
+  invalidateCache('/api/wallet');
+  invalidateCache(/^\/api\/providers/);
+  try { await loadWallet(); }
+  catch (e) { console.debug('[reconcileProviderViews] loadWallet failed: ' + (e && e.message)); }
+  if (!_navStillCurrent(epoch, startPage)) return;
+  try {
+    if (S.page === 'create') renderCreate();
+    renderProvider();
+  } catch (e) { console.debug('[reconcileProviderViews] render failed: ' + (e && e.message)); }
+}
+
 async function activateProvider() {
   const btn = $('btnActivateProvider');
   if (btn) { btn.disabled = true; btn.innerHTML = '<div class="spinner"></div> Activating...'; }
@@ -8789,6 +8819,8 @@ <h3 id="securityFaqTitle">
       invalidateCache(/^\/api\/providers/);
       await loadWallet();
       renderProvider();
+      // Provider status lags the TX a block or two — reconcile after indexing.
+      reconcileProviderViews();
     } else {
       toast('Activation failed: ' + friendlyError(a?.error || a?.rawLog || 'unknown'), 'error');
     }
@@ -8836,6 +8868,8 @@ <h3 id="securityFaqTitle">
       // registered provider appears without a manual refresh.
       if (S.page === 'create') renderCreate();
       renderProvider();
+      // Provider status lags the TX a block or two — reconcile after indexing.
+      reconcileProviderViews();
     } else {
       toast(friendlyError(d.error || d.rawLog || 'Registration failed'), 'error');
     }
@@ -9148,6 +9182,113 @@ <h3 id="securityFaqTitle">
   }
 }
 
+// After a link/unlink TX, QueryNodesForPlan keeps reporting the PRE-change set
+// for a block or two until the chain indexes the new membership. A single
+// immediate refetch races that lag and re-paints the stale (pre-change) list,
+// undoing the optimistic update. Instead, poll the (cache-invalidated)
+// /api/all-nodes endpoint until the chain-reported count reaches the count we
+// optimistically applied — then commit chain truth. `predicate(count)` decides
+// when chain has caught up (>= for adds, <= for removes).
+async function reconcilePlanNodes(planId, predicate, { attempts = 6, baseMs = 1500 } = {}) {
+  const epoch = _currentNavEpoch();
+  const onAddNodes = S.page === 'add-nodes';
+  const onYourNodes = S.page === 'your-nodes';
+  for (let i = 0; i < attempts; i++) {
+    // Stagger the first probe — broadcast just returned, the block isn't in yet.
+    await new Promise(r => setTimeout(r, i === 0 ? baseMs : baseMs * Math.min(i + 1, 4)));
+    if (!_navStillCurrent(epoch, S.page)) return;
+    // Drop every cached /api/all-nodes snapshot so we re-query chain truth.
+    invalidateCache(/^\/api\/all-nodes/);
+    try {
+      // Your Nodes view: the dedicated inPlanOnly list IS the source of truth.
+      if (onYourNodes && String(S.mgrPlanId) === String(planId)) {
+        const url = `/api/all-nodes?page=1&limit=500&planId=${planId}&inPlanOnly=true`;
+        const r = await fetch(url);
+        const d = await r.json();
+        if (d && !d.error) {
+          _dataCache[url] = { data: d, ts: Date.now() };
+          const count = d.planNodesCount != null ? d.planNodesCount : (d.nodes ? d.nodes.length : 0);
+          if (!_navStillCurrent(epoch, 'your-nodes')) return;
+          _lastYourNodesJson = JSON.stringify(d);
+          S._yourNodes = d;
+          coalesceRender('your-nodes', renderYourNodes);
+          if (predicate(count)) return;
+        }
+      }
+      // Add Nodes view: planNodesCount comes back on the excludeInPlan list too.
+      if (onAddNodes && String(S.mgrPlanId) === String(planId)) {
+        loadMgrNodes();
+        // loadMgrNodes drives its own render; read the count it just stored.
+        const count = S.mgrNodes ? (S.mgrNodes.planNodesCount || 0) : 0;
+        if (predicate(count)) return;
+      }
+      // Not on a node page (or different plan selected): nothing to repaint,
+      // the invalidation above already freshens the next visit's first fetch.
+      if (!onAddNodes && !onYourNodes) return;
+    } catch (e) {
+      console.debug('[reconcilePlanNodes] probe failed: ' + (e && e.message));
+    }
+  }
+}
+
+// Generic "optimistic mutate + delayed reconcile" for any cached endpoint whose
+// chain truth lags a TX by a block or two. `mutate(data)` edits the in-memory
+// cached snapshot for instant feedback; we re-render from it, then wait out the
+// indexing window before a single real refetch reconciles. Mirrors why
+// reconcilePlanNodes exists, generalized for grants / own-subscription / wallet.
+//   url:       the cache key + endpoint to refetch
+//   mutate:    (cachedData) => void — mutate the snapshot in place (or no-op)
+//   render:    () => void — re-render from the (now-optimistic) snapshot
+//   page:      page key to epoch-guard against navigation
+//   delayMs:   how long to wait before the reconciling refetch (default 3s)
+async function optimisticThenReconcile(url, { mutate, render, page, delayMs = 3000 } = {}) {
+  const epoch = _currentNavEpoch();
+  const entry = _dataCache[url];
+  if (entry && entry.data && typeof mutate === 'function') {
+    try { mutate(entry.data); }
+    catch (e) { console.debug('[optimisticThenReconcile] mutate failed: ' + (e && e.message)); }
+    // Bump ts so the snapshot isn't treated as instantly-stale by cachedFetch.
+    entry.ts = Date.now();
+  }
+  if (typeof render === 'function' && (!page || _navStillCurrent(epoch, page))) render();
+  await new Promise(r => setTimeout(r, delayMs));
+  if (page && !_navStillCurrent(epoch, page)) return;
+  // Now drop the optimistic snapshot and pull chain truth.
+  invalidateCache(url);
+  try {
+    const r = await fetch(url);
+    const d = await r.json();
+    if (!d || d.error) return;
+    _dataCache[url] = { data: d, ts: Date.now() };
+    if (typeof render === 'function' && (!page || _navStillCurrent(epoch, page))) render();
+  } catch (e) {
+    console.debug('[optimisticThenReconcile] reconcile fetch failed: ' + (e && e.message));
+  }
+}
+
+// After a subscribe / add-subscriber / authorize TX, the chain keeps reporting
+// the PRE-mutation subscription + member + own-subscription state for a block or
+// two. The immediate render right after the TX therefore paints stale data. This
+// waits out the indexing window, drops the relevant caches, and re-renders the
+// subscriber-facing views from chain truth — without blocking the snappy first
+// paint the caller already did.
+async function reconcileSubscriberViews(planId, { delayMs = 3000 } = {}) {
+  if (planId == null) return;
+  const epoch = _currentNavEpoch();
+  const startPage = S.page;
+  await new Promise(r => setTimeout(r, delayMs));
+  if (!_navStillCurrent(epoch, startPage)) return;
+  invalidateCache(new RegExp('^/api/plans/' + planId + '/subscriptions'));
+  invalidateCache(new RegExp('^/api/plans/' + planId + '/members'));
+  invalidateCache(new RegExp('^/api/plans/' + planId + '/own-subscription'));
+  try { renderOwnSubStatus(); }
+  catch (e) { console.debug('[reconcileSubscriberViews] own-sub render failed: ' + (e && e.message)); }
+  if (S.page === 'subscribers') {
+    try { loadSubscribers(); }
+    catch (e) { console.debug('[reconcileSubscriberViews] loadSubscribers failed: ' + (e && e.message)); }
+  }
+}
+
 /** Warm cache for every owned plan so Pricing/Subscribers paint in one frame. */
 function prefetchPerPlan() {
   const now = Date.now();
@@ -9846,6 +9987,32 @@ <h3 id="securityFaqTitle">
 
 // ─── Your Nodes Page ─────────────────────────────────────────────────────────
 let _lastYourNodesJson = '';
+
+// Optimistically merge just-linked nodes into the Your Nodes snapshot so they
+// appear instantly, before chain indexing makes them queryable via inPlanOnly.
+// Pulls the full node objects from the Add Nodes list (S.mgrNodes) the user was
+// just looking at, so country/price/protocol render correctly on first paint.
+function seedYourNodesWithAdded(addrs) {
+  if (!S.mgrNodes || !S.mgrNodes.nodes) return;
+  if (!S._yourNodes || !Array.isArray(S._yourNodes.nodes)) {
+    S._yourNodes = { nodes: [], planNodesCount: 0 };
+  }
+  const existing = new Set(S._yourNodes.nodes.map(n => n.address));
+  let added = 0;
+  for (const addr of addrs) {
+    if (existing.has(addr)) continue;
+    const node = S.mgrNodes.nodes.find(n => n.address === addr);
+    if (!node) continue;
+    S._yourNodes.nodes.push({ ...node, inPlan: true });
+    existing.add(addr);
+    added++;
+  }
+  S._yourNodes.planNodesCount = (S._yourNodes.planNodesCount || 0) + added;
+  // Invalidate the memo so reconcilePlanNodes' fresh fetch is recognized as
+  // changed and replaces this optimistic seed with chain truth.
+  _lastYourNodesJson = '';
+}
+
 async function loadYourNodes() {
   const epoch = _currentNavEpoch();
   if (!S._yourNodes) showLoading('Loading your plans...');
@@ -10248,17 +10415,29 @@ <h3 id="securityFaqTitle">
         if (p) p.totalNodes = (p.totalNodes || 0) + count;
       }
       S.addSet.clear();
+      const targetCount = S.mgrNodes ? (S.mgrNodes.planNodesCount || 0) : null;
       invalidateCache(/^\/api\/all-nodes/);
       if (S.mgrPlanId) invalidateCache('/api/plans/' + S.mgrPlanId);
       invalidateCache('/api/my-plans');
-      // Re-render now (optimistic inPlan flags hide the just-added rows), then
-      // refetch the server-excluded list so chain truth reconciles — covers
-      // added nodes that weren't on the current page / in S.mgrNodes.
-      if (S.page === 'add-nodes') { renderAddNodes(); loadMgrNodes(); }
-      // Your Nodes reads /api/all-nodes?...inPlanOnly — its cache was just
-      // invalidated above, but renderYourNodes() only re-renders the stale
-      // in-memory snapshot. Refetch so the just-added nodes actually appear.
-      if (S.page === 'your-nodes') loadYourNodes();
+      // Re-render now so the optimistic inPlan flags take effect immediately
+      // (added rows drop off Add Nodes; appear on Your Nodes via seed below).
+      if (S.page === 'add-nodes') renderAddNodes();
+      // Optimistically seed Your Nodes with the just-added rows so the page
+      // shows them instantly instead of an empty list while chain indexes.
+      if (S.page === 'your-nodes' && !d.alreadyLinked && S.mgrNodes && S.mgrNodes.nodes) {
+        seedYourNodesWithAdded(addrs);
+        renderYourNodes();
+      } else if (S.page === 'your-nodes') {
+        loadYourNodes();
+      }
+      // Poll chain (not a single immediate refetch) until QueryNodesForPlan
+      // reflects the new membership — beats the block-or-two indexing lag that
+      // would otherwise re-paint the pre-link list and undo the optimism.
+      if (!d.alreadyLinked && S.mgrPlanId && targetCount != null) {
+        reconcilePlanNodes(S.mgrPlanId, (c) => c >= targetCount);
+      } else if (S.page === 'add-nodes') {
+        loadMgrNodes();
+      }
       refetchMyPlans();
     } else {
       toast(friendlyError(d.error || d.rawLog), 'error');
@@ -10305,14 +10484,30 @@ <h3 id="securityFaqTitle">
       // rewrite #app.innerHTML, so that sibling bar survives and stays stuck.
       // Tear it down explicitly (removes by id wherever it lives) before re-render.
       refreshRemoveActionBar();
+      const targetCount = S.mgrNodes ? (S.mgrNodes.planNodesCount || 0) : null;
       invalidateCache(/^\/api\/all-nodes/);
       if (S.mgrPlanId) invalidateCache('/api/plans/' + S.mgrPlanId);
       invalidateCache('/api/my-plans');
       if (S.page === 'add-nodes') renderAddNodes();
-      // Refetch (not just re-render) so the removed node actually drops off
-      // Your Nodes — the cache was invalidated above but the in-memory snapshot
-      // still holds it.
-      if (S.page === 'your-nodes') loadYourNodes();
+      // Optimistically drop the removed rows from Your Nodes so they vanish
+      // instantly, then poll chain until QueryNodesForPlan reflects the removal.
+      if (S.page === 'your-nodes' && S._yourNodes && Array.isArray(S._yourNodes.nodes)) {
+        const removed = new Set(addrs);
+        const before = S._yourNodes.nodes.length;
+        S._yourNodes.nodes = S._yourNodes.nodes.filter(n => !removed.has(n.address));
+        S._yourNodes.planNodesCount = Math.max(0, (S._yourNodes.planNodesCount || before) - (before - S._yourNodes.nodes.length));
+        _lastYourNodesJson = '';
+        renderYourNodes();
+      }
+      // Poll until the chain-reported count drops to the post-unlink target,
+      // beating the indexing lag that would re-show the removed node.
+      if (S.mgrPlanId && targetCount != null) {
+        reconcilePlanNodes(S.mgrPlanId, (c) => c <= targetCount);
+      } else if (S.page === 'your-nodes') {
+        loadYourNodes();
+      } else if (S.page === 'add-nodes') {
+        loadMgrNodes();
+      }
       refetchMyPlans();
     } else {
       toast(friendlyError(d.error || d.rawLog), 'error');
@@ -10327,7 +10522,7 @@ <h3 id="securityFaqTitle">
 // ─── Pricing Page ─────────────────────────────────────────────────────────────
 const DENOM_NAMES = {
   'udvpn': { symbol: 'P2P', name: 'Sentinel P2P', icon: '🔵' },
-  'ibc/A8C2D23A1E6F95DA4E48BA349667E322BD7A6C996D8A4AAE8BA72E190F3D1477': { symbol: 'ATOM', name: 'Cosmos Hub', icon: '⚛️' },
+  'ibc/A8C2D23A1E6F95DA4E48BA349667E322BD7A6C996D8A4AAE8BA72E190F3D1477': { symbol: 'ATOM', name: 'Cosmos Hub', icon: '⚛️' },
   'ibc/ED07A3391A112B175915CD8FAF43A2DA8E4790EDE12566649D0C2F97716B8518': { symbol: 'OSMO', name: 'Osmosis', icon: '🧪' },
   'ibc/1A09D79819407F87DD64E884E5B46349E4A5191A0A9BCBFE1D9B425F4D273CFE': { symbol: 'JUNO', name: 'Juno', icon: '🟠' },
   'ibc/2E4CF68617591638A6CBD7DA3E8CAF8C9C0B34AAB4878775A0B16ADDC56E4389': { symbol: 'AKT', name: 'Akash', icon: '🔴' },
@@ -10379,7 +10574,7 @@ <h3 id="securityFaqTitle">
   // Shared self-subscription status block. EVERY rail delivers bandwidth by
   // sharing an allocation from a subscription the operator holds — so the
   // operator must be subscribed to this plan first. This surfaces the same
-  // ⚠️/✅ indicator + Self-subscribe button the Free tile shows, so the
+  // ⚠️/✅ indicator + Self-subscribe button the Free tile shows, so the
   // operator can see whether the whole flow is even possible and fix it in
   // one click before wiring a single webhook. Filled by renderOwnSubStatus().
   const ownSubBlock = `
@@ -10434,7 +10629,7 @@ <h3 id="securityFaqTitle">
     setTimeout(() => renderOwnSubStatus(), 0);
     return `
       <div class="fiat-detail">
-        <button class="fiat-detail-back" onclick="setFiatTile(null)">← All payment rails</button>
+        <button class="fiat-detail-back" onclick="setFiatTile(null)">← All payment rails</button>
         <div class="fiat-detail-hero">
           <div class="fiat-detail-marks">
             <span class="fiat-rail-mark fiat-rail-mark-light">${RAIL_LOGOS.stripe}</span>
@@ -10461,7 +10656,7 @@ <h3 id="securityFaqTitle">
           <div class="fiat-detail-section-sub">Node + Express. Set <code>STRIPE_SECRET_KEY</code> and <code>STRIPE_WEBHOOK_SECRET</code>, register the URL in your Stripe dashboard, ship.</div>
           ${codeBlock('Stripe webhook · Node.js', stripeCode)}
           <div class="fiat-detail-callout">
-            <span class="fiat-detail-callout-icon">⚠️</span>
+            <span class="fiat-detail-callout-icon">⚠️</span>
             <div class="fiat-detail-callout-body"><strong><code>express.raw()</code> is required.</strong> If a JSON parser touches the body before <code>constructEvent</code>, the signature check will always fail.</div>
           </div>
         </div>
@@ -10521,7 +10716,7 @@ <h3 id="securityFaqTitle">
     setTimeout(() => renderOwnSubStatus(), 0);
     return `
       <div class="fiat-detail">
-        <button class="fiat-detail-back" onclick="setFiatTile(null)">← All payment rails</button>
+        <button class="fiat-detail-back" onclick="setFiatTile(null)">← All payment rails</button>
         <div class="fiat-detail-hero">
           <div class="fiat-detail-marks">
             <span class="fiat-rail-mark fiat-rail-mark-light">${RAIL_LOGOS.paypal}</span>
@@ -10738,7 +10933,7 @@ <h3 id="securityFaqTitle">
           <div class="fiat-detail-section-sub">Zero infrastructure. Public REST. Poll a deposit address every 30s; fire once <code>vout</code> credits the address with the expected sats and the tx has cleared <code>CONFIRMATIONS</code> blocks. Quote each buyer a unique deposit address so you can map the settled payment back to their Sentinel wallet.</div>
           ${codeBlock('mempool.space poller · Node.js', mempoolCode)}
           <div class="fiat-detail-callout">
-            <span class="fiat-detail-callout-icon">⏱</span>
+            <span class="fiat-detail-callout-icon">⏱</span>
             <div class="fiat-detail-callout-body"><strong>Finality.</strong> 3 confirmations ≈ 30 min. Drop to 1 for low-value plans, raise to 6 for high-value.</div>
           </div>
         </div>`;
@@ -10749,7 +10944,7 @@ <h3 id="securityFaqTitle">
           <div class="fiat-detail-section-sub"><code>ethers</code> v6 against any public JSON-RPC (Alchemy, Infura, or <code>ethereum-rpc.publicnode.com</code>). For USDC, filter the <code>Transfer</code> event on the contract by your deposit address. For native ETH, walk every new block. <code>tx.wait(N)</code> blocks until <code>N</code> confirmations land before triggering Plan Manager. Map the depositor to their Sentinel wallet (a unique deposit address per buyer is simplest) before delivering.</div>
           ${codeBlock('ethers v6 · Node.js', ethCode)}
           <div class="fiat-detail-callout">
-            <span class="fiat-detail-callout-icon">⏱</span>
+            <span class="fiat-detail-callout-icon">⏱</span>
             <div class="fiat-detail-callout-body"><strong>Finality.</strong> 3 confirmations ≈ 36 sec. USDC mainnet contract: <code>0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48</code>.</div>
           </div>
         </div>`;
@@ -10760,7 +10955,7 @@ <h3 id="securityFaqTitle">
           <div class="fiat-detail-section-sub"><code>@solana/web3.js</code> v1 against <code>api.mainnet-beta.solana.com</code> at <code>'finalized'</code> — 31 slots, supermajority vote, the strongest guarantee Solana offers. <code>onAccountChange</code> fires on every lamport delta. For USDC, derive the associated token account via <code>@solana/spl-token</code> and watch its logs. Map the payer to their Sentinel wallet (a unique deposit address per buyer is simplest) before delivering.</div>
           ${codeBlock('@solana/web3.js · Node.js', solCode)}
           <div class="fiat-detail-callout">
-            <span class="fiat-detail-callout-icon">⏱</span>
+            <span class="fiat-detail-callout-icon">⏱</span>
             <div class="fiat-detail-callout-body"><strong>Finality.</strong> <code>'finalized'</code> commitment ≈ 13 sec. USDC mainnet mint: <code>EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v</code>.</div>
           </div>
         </div>`;
@@ -10769,7 +10964,7 @@ <h3 id="securityFaqTitle">
     setTimeout(() => renderOwnSubStatus(), 0);
     return `
       <div class="fiat-detail">
-        <button class="fiat-detail-back" onclick="setFiatTile(null)">← All payment rails</button>
+        <button class="fiat-detail-back" onclick="setFiatTile(null)">← All payment rails</button>
         <div class="fiat-detail-hero">
           <div class="fiat-detail-marks">
             <span class="fiat-rail-mark">${RAIL_LOGOS.btc}</span>
@@ -10814,7 +11009,7 @@ <h3 id="securityFaqTitle">
 
     return `
       <div class="fiat-detail">
-        <button class="fiat-detail-back" onclick="setFiatTile(null)">← All payment rails</button>
+        <button class="fiat-detail-back" onclick="setFiatTile(null)">← All payment rails</button>
         <div class="fiat-detail-hero">
           <div class="fiat-detail-marks">
             <span class="fiat-rail-mark">${RAIL_LOGOS.free}</span>
@@ -11265,7 +11460,7 @@ <h3 id="securityFaqTitle">
     return;
   }
   btn.disabled = true;
-  btn.innerHTML = '<span class="trig-test-btn-icon">⏳</span> Broadcasting…';
+  btn.innerHTML = '<span class="trig-test-btn-icon">⏳</span> Broadcasting…';
   out.style.display = 'block';
   out.className = 'trig-test-result trig-test-result-pending';
   out.innerHTML = '<strong>Broadcasting subscribe TX…</strong> Signing with your loaded wallet.';
@@ -11280,6 +11475,10 @@ <h3 id="securityFaqTitle">
       const subId = j.subscriptionId ? '<div>Subscription ID: <code>' + escapeHtml(String(j.subscriptionId)) + '</code></div>' : '';
       const tx = j.txHash ? '<div>tx: <code>' + escapeHtml(j.txHash) + '</code></div>' : '';
       out.innerHTML = '<strong>✓ Subscribe TX broadcast.</strong>' + subId + tx;
+      // This is a real subscribe — its caches were never invalidated before, so
+      // the own-sub banner and subscriber list stayed stale. Reconcile now.
+      invalidateCache('/api/wallet');
+      reconcileSubscriberViews(planId);
     } else {
       out.className = 'trig-test-result trig-test-result-err';
       const errMsg = j.error || j.rawLog || 'Subscribe failed';
@@ -11336,7 +11535,7 @@ <h3 id="securityFaqTitle">
     if (!data?.subscribed) {
       el.innerHTML = `
         <div style="display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.35);border-radius:var(--radius-sm)">
-          <span style="font-size:20px;line-height:1">⚠️</span>
+          <span style="font-size:20px;line-height:1">⚠️</span>
           <div style="flex:1">
             <div style="font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--text)">Not subscribed to plan #${escapeHtml(String(planId))} yet</div>
             <div style="font-family:var(--font-display);font-size:12.5px;color:var(--text-muted);margin-top:3px">You hold no subscription to this plan. You can self-subscribe now to mint a bandwidth allocation, or just add a subscriber below — that self-subscribes you automatically before sharing their allocation.</div>
@@ -11440,6 +11639,9 @@ <h3 id="securityFaqTitle">
     renderOwnSubStatus();
     if (S.page === 'fee-grants') renderFeeGrants();
     if (S.page === 'subscribers') loadSubscribers();
+    // The on-chain subscription/member set lags the TX by a block or two —
+    // reconcile after the indexing window so the views show chain truth.
+    reconcileSubscriberViews(S.mgrPlanId);
   } catch (e) {
     if (status) status.innerHTML = '<span style="color:var(--red)">Failed: ' + escapeHtml(e.message) + '</span>';
   }
@@ -11470,6 +11672,8 @@ <h3 id="securityFaqTitle">
     invalidateCache(new RegExp('^/api/plans/' + S.mgrPlanId + '/own-subscription'));
     invalidateCache(new RegExp('^/api/plans/' + S.mgrPlanId + '/subscriptions'));
     renderOwnSubStatus();
+    // own-subscription lags the TX a block or two — reconcile after indexing.
+    reconcileSubscriberViews(S.mgrPlanId);
   } catch (e) {
     if (status) status.innerHTML = '<span style="color:var(--red)">Failed: ' + escapeHtml(e.message) + '</span>';
     if (btn) { btn.disabled = false; btn.querySelector('span').textContent = 'Self-subscribe to plan #' + S.mgrPlanId; }
@@ -11512,6 +11716,8 @@ <h3 id="securityFaqTitle">
     }
     renderOwnSubStatus();
     if (S.page === 'subscribers') loadSubscribers();
+    // Subscription/member set lags the TX by a block or two — reconcile after.
+    reconcileSubscriberViews(S.mgrPlanId);
   } catch (e) {
     if (status) status.innerHTML = '<span style="color:var(--red)">Failed: ' + escapeHtml(e.message) + '</span>';
   }
@@ -11849,7 +12055,7 @@ <h3 id="securityFaqTitle">
     const focusMarks = railTab === 'onchain' ? onchainMarksHtml : fiatMarksHtml;
     const focusHeroHtml = railTab ? `
       <div class="rail-toggle-bar">
-        <button class="rail-toggle-back" onclick="setRailTab(null)">← Back to options</button>
+        <button class="rail-toggle-back" onclick="setRailTab(null)">← Back to options</button>
         <div class="rail-toggle-switch" role="tablist" aria-label="Payment rail">
           <button class="rail-toggle-option ${railTab === 'onchain' ? 'active' : ''}" onclick="setRailTab('onchain')">On-Chain</button>
           <button class="rail-toggle-option ${railTab === 'fiat' ? 'active' : ''}" onclick="setRailTab('fiat')">Fiat &amp; Non-IBC</button>
@@ -11930,7 +12136,7 @@ <h3 id="securityFaqTitle">
             </div>
           </div>
           <div class="immutable-banner">
-            <span class="immutable-banner-icon">ℹ️</span>
+            <span class="immutable-banner-icon">ℹ️</span>
             <div class="immutable-banner-body">
               <div class="immutable-banner-title">${plans.length > 0 ? 'Select a plan above to see live pricing.' : 'You don’t have a plan yet.'}</div>
               <div class="immutable-banner-sub">${plans.length > 0
@@ -12758,9 +12964,13 @@ <h3 id="securityFaqTitle">
       if (d2.granted > 0) {
         _autoGrantSessionCount += d2.granted;
         toast(`Auto-granted ${d2.granted} new subscriber${d2.granted > 1 ? 's' : ''} (${_autoGrantSessionCount} this session)`, 'success');
-        invalidateCache('/api/feegrant/grants');
         invalidateCache('/api/wallet');
-        renderFeeGrants();
+        // New grants index a block or two later — reconcile after the window.
+        optimisticThenReconcile('/api/feegrant/grants', {
+          mutate: () => {},
+          render: () => { if (S.page === 'fee-grants') renderFeeGrants(); },
+          page: 'fee-grants',
+        });
       }
     }
   } catch (err) {
@@ -13018,10 +13228,17 @@ <h3 id="securityFaqTitle">
     if (d.granted > 0) _autoGrantSessionCount += d.granted;
     toast(`Granted: ${d.granted}, skipped: ${d.skipped || 0}${d.errors ? ', errors: ' + d.errors.length : ''}`, d.errors ? 'error' : 'success');
     if (d.granted > 0) {
-      invalidateCache('/api/feegrant/grants');
       invalidateCache('/api/wallet');
+      // New grants take a block or two to index — reconcile after the window so
+      // the list reflects them instead of showing the pre-grant snapshot.
+      optimisticThenReconcile('/api/feegrant/grants', {
+        mutate: () => {},
+        render: () => { if (S.page === 'fee-grants') renderFeeGrants(); },
+        page: 'fee-grants',
+      });
+    } else if (S.page === 'fee-grants') {
+      renderFeeGrants();
     }
-    if (S.page === 'fee-grants') renderFeeGrants();
   } catch (e) {
     toast('Grant failed: ' + e.message, 'error');
   }
@@ -13041,9 +13258,14 @@ <h3 id="securityFaqTitle">
     if (d.error) throw new Error(d.error);
     toast(`Fee grant issued! TX: ${d.txHash?.slice(0, 12)}...`, 'success');
     document.getElementById('fgSingleAddr').value = '';
-    invalidateCache('/api/feegrant/grants');
     invalidateCache('/api/wallet');
-    if (S.page === 'fee-grants') renderFeeGrants();
+    // New grant indexes a block or two after broadcast — reconcile after the
+    // window rather than refetching immediately into a pre-grant snapshot.
+    optimisticThenReconcile('/api/feegrant/grants', {
+      mutate: () => {},
+      render: () => { if (S.page === 'fee-grants') renderFeeGrants(); },
+      page: 'fee-grants',
+    });
   } catch (e) {
     toast('Grant failed: ' + e.message, 'error');
   }
@@ -13066,9 +13288,14 @@ <h3 id="securityFaqTitle">
     });
     if (d.error) throw new Error(d.error);
     toast(`Grant revoked! TX: ${d.txHash?.slice(0, 12)}...`, 'success');
-    invalidateCache('/api/feegrant/grants');
     invalidateCache('/api/wallet');
-    if (S.page === 'fee-grants') renderFeeGrants();
+    // Optimistically drop the row so it doesn't re-appear (chain still lists the
+    // revoked grant for a block or two); reconcile after the indexing window.
+    optimisticThenReconcile('/api/feegrant/grants', {
+      mutate: (data) => { if (Array.isArray(data.allowances)) data.allowances = data.allowances.filter(g => g.grantee !== grantee); },
+      render: () => { if (S.page === 'fee-grants') renderFeeGrants(); },
+      page: 'fee-grants',
+    });
   } catch (e) {
     toast('Revoke failed: ' + e.message, 'error');
   }
@@ -13092,9 +13319,12 @@ <h3 id="securityFaqTitle">
     });
     if (d.error) throw new Error(d.error);
     toast(`Revoked ${d.revoked} grants${d.errors ? ', errors: ' + d.errors.length : ''}`, d.errors ? 'error' : 'success');
-    invalidateCache('/api/feegrant/grants');
     invalidateCache('/api/wallet');
-    if (S.page === 'fee-grants') renderFeeGrants();
+    optimisticThenReconcile('/api/feegrant/grants', {
+      mutate: (data) => { data.allowances = []; },
+      render: () => { if (S.page === 'fee-grants') renderFeeGrants(); },
+      page: 'fee-grants',
+    });
   } catch (e) {
     toast('Revoke failed: ' + e.message, 'error');
   } finally {
@@ -13130,12 +13360,18 @@ <h3 id="securityFaqTitle">
     if (d.errors && d.errors.length) parts.push(`${d.errors.length} failed`);
     const variant = d.errors && d.errors.length ? 'error' : 'success';
     toast(`Cleanup: ${parts.join(' · ') || 'nothing to do'}`, variant);
+    // Only invalidate/reconcile on success — running this on TX failure wiped a
+    // healthy cache and forced a needless cold refetch (Finding 7 logic bug).
+    invalidateCache('/api/wallet');
+    const revoked = new Set(grantees);
+    optimisticThenReconcile('/api/feegrant/grants', {
+      mutate: (data) => { if (Array.isArray(data.allowances)) data.allowances = data.allowances.filter(g => !revoked.has(g.grantee)); },
+      render: () => { if (S.page === 'fee-grants') renderFeeGrants(); },
+      page: 'fee-grants',
+    });
   } catch (e) {
     toast('Cleanup failed: ' + e.message, 'error');
   }
-  invalidateCache('/api/feegrant/grants');
-  invalidateCache('/api/wallet');
-  if (S.page === 'fee-grants') renderFeeGrants();
 }
 
 // ─── Coming Soon placeholder ─────────────────────────────────────────────────
diff --git a/server.js b/server.js
index ed65331..521c163 100644
--- a/server.js
+++ b/server.js
@@ -99,6 +99,21 @@ function invalidatePlanSubs(planId) {
   _planSubsKeys.delete(id);
 }
 
+// Drop the operator-scoped read caches that derive from a plan's subscriber set
+// (members list, own-subscription banner, plan stats, unique-wallet count) so
+// they reflect a just-committed subscribe / add-subscriber instead of serving a
+// pre-mutation snapshot for up to the 30-120s TTL. Keyed by getAddr() at call
+// time, matching how those caches were written.
+function invalidateSubscriberCaches(planId) {
+  const id = Number(planId);
+  if (!Number.isFinite(id)) return;
+  const op = getAddr() || '_anon';
+  cacheInvalidate(`planMembers:${id}:${op}`);
+  cacheInvalidate(`ownSub:${id}:${op}`);
+  cacheInvalidate(`planStats:${id}:${op}`);
+  cacheInvalidate(`uniqueWallets:${id}`);
+}
+
 // ─── Demo Mode ────────────────────────────────────────────────────────────────
 // Read-only browse: any visitor sees the UI mounted on a watch-only address
 // without supplying a mnemonic. Every TX-broadcasting endpoint returns 403.
@@ -778,7 +793,15 @@ async function discoverPlanIds() {
   return [...ids].sort((a, b) => a - b);
 }
 
+// Cached wrapper — this is hit on every GET /api/plans/:id (card expand / detail)
+// and fires a full up-to-10k subscription query each time. Same data, same churn
+// rate as planStats, so share its 120s TTL. Keyed by plan only (the subscriber
+// set is identical regardless of which operator is viewing).
 async function getUniqueWallets(planId) {
+  return cached(`uniqueWallets:${planId}`, 120_000, () => _getUniqueWalletsImpl(planId));
+}
+
+async function _getUniqueWalletsImpl(planId) {
   const wallets = new Set();
 
   // RPC-first: single protobuf call returns the full set (~912x faster than paginated LCD).
@@ -2804,6 +2827,11 @@ app.post('/api/plan/subscribe', async (req, res) => {
       }
       resp.subscriptionId = subscriptionId;
       console.log(`Subscribed: subscription_id=${subscriptionId} tx=${resp.txHash}`);
+      // Drop the operator-scoped read caches so the own-subscription banner,
+      // members list and subscriber totals reflect the new sub on next fetch
+      // instead of serving the pre-subscribe snapshot for up to 30-120s.
+      invalidatePlanSubs(planId);
+      invalidateSubscriberCaches(planId);
       res.json(resp);
     } else {
       console.log(`Subscribe FAIL: code=${resp.code} ${resp.rawLog}`);
@@ -2971,6 +2999,7 @@ app.post('/api/plan/add-subscriber', async (req, res) => {
     const result = await _addSubscriberViaShare(parseInt(planId), address, { denom, allocBytes });
     console.log(`Added ${address}: sub=${result.subscriptionId} subTx=${result.subTx} shareTx=${result.shareTx}`);
     invalidatePlanSubs(parseInt(planId, 10));
+    invalidateSubscriberCaches(parseInt(planId, 10));
     res.json(result);
   } catch (err) {
     if (relayKeplrSign(err, res)) return;
@@ -3001,6 +3030,7 @@ app.post('/api/plan/add-subscribers', async (req, res) => {
       }
     }
     invalidatePlanSubs(parseInt(planId, 10));
+    invalidateSubscriberCaches(parseInt(planId, 10));
     const added = results.filter(r => r.ok).length;
     res.json({ ok: added > 0, added, failed: results.length - added, results });
   } catch (err) {

From 622c3821e965394046a25f0398bb40b271286c8d Mon Sep 17 00:00:00 2001
From: Sentinel-Bluebuilder <Sentinel-Bluebuilder@users.noreply.github.com>
Date: Sun, 21 Jun 2026 13:45:53 -0700
Subject: [PATCH 2/2] fix(fe): keep optimistic node-count sticky until chain
 reconciles

The plan-card pill (totalNodes) snapped back to the PRE-link count after
adding or removing nodes: the chain indexes a link/unlink 1-6s after the
broadcast, so any /api/my-plans refetch (or background SWR revalidate) in
that window returned the stale count and clobbered the optimistic bump.

Add a per-plan sticky override (S.pendingNodeCount):
- setPendingNodeCount(planId, value, dir) records the optimistic value.
- applyPendingNodeCounts(plans) re-paints that value IN PLACE on every
  fetched plans array until the chain count reconciles (>= for adds,
  <= for removes), with a hard 30s safety timeout so a stuck override can
  never pin a wrong number forever. Returns whether anything is still
  pending so refetchMyPlans keeps polling.

Wire it through:
- refetchMyPlans now waits before the first fetch when an override is
  pending (give the indexer a head start), applies overrides each attempt,
  and keeps polling until reconciled (attempts 4 -> 8).
- _ensurePlansLoaded applies overrides on both the SWR onRefresh path and
  the initial fetch so a background revalidate can't snap the card back.
- linkBatch / unlinkBatch register an 'up' / 'down' override alongside the
  existing optimistic bump.

Complements the existing reconcilePlanNodes() node-list reconciliation;
this fixes the card-pill count specifically.
---
 public/index.html | 71 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 63 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index f46ba0f..a284a55 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5890,6 +5890,10 @@ <h3 id="securityFaqTitle">
   subsPage: 1, fgPage: 1,
   leaseHours: 24, addSet: new Set(), removeSet: new Set(),
   nodePriceCache: {},
+  // Optimistic node-count overrides per plan, sticky across refetch/SWR clobbers
+  // until the chain count reconciles. Keyed by String(planId) →
+  // { value, dir: 'up'|'down', ts }. See applyPendingNodeCounts().
+  pendingNodeCount: {},
   // Create
   creating: false,
   // UI
@@ -9137,6 +9141,9 @@ <h3 id="securityFaqTitle">
     const onRefresh = (fresh) => {
       const freshJson = JSON.stringify(fresh);
       if (freshJson === _lastMyPlansJson) return;
+      // Keep any optimistic node-count painted until the chain reconciles, so a
+      // background SWR revalidate landing mid-index can't snap the card back.
+      applyPendingNodeCounts(fresh.plans || []);
       _lastMyPlansJson = freshJson;
       S.myPlans = fresh.plans || [];
       if (!S.mgrPlanId && S.myPlans.length > 0) selectPlan(S.myPlans[0].planId, { suppressRender: true });
@@ -9147,6 +9154,7 @@ <h3 id="securityFaqTitle">
     };
     const { data: d } = await cachedFetch('/api/my-plans', 120_000, onRefresh);
     if (!_navStillCurrent(epoch, forPage)) { S.myPlansLoading = false; return; }
+    applyPendingNodeCounts(d.plans || []);
     _lastMyPlansJson = JSON.stringify(d);
     S.myPlans = d.plans || [];
   } catch (e) {
@@ -9158,26 +9166,64 @@ <h3 id="securityFaqTitle">
   prefetchPerPlan();
 }
 
+/** Record an optimistic node-count for a plan that must stick through every
+ *  subsequent /api/my-plans read until the chain catches up. The chain indexes
+ *  1-6s after a successful link/unlink broadcast, so any refetch in that window
+ *  returns the PRE-mutation count — without this override it would clobber the
+ *  optimistic value and the card would snap back (the reported bug). */
+function setPendingNodeCount(planId, value, dir) {
+  S.pendingNodeCount[String(planId)] = { value: Number(value), dir, ts: Date.now() };
+}
+
+/** Apply (and self-expire) pending node-count overrides onto a freshly-fetched
+ *  plans array, IN PLACE. An override clears once the chain count reconciles
+ *  (>= the target for adds, <= for removes) or after a hard 30s safety timeout
+ *  so a stuck override can never pin a wrong number forever. Returns true if any
+ *  override is still pending (caller should keep polling). */
+function applyPendingNodeCounts(plans) {
+  let stillPending = false;
+  const now = Date.now();
+  for (const [id, ov] of Object.entries(S.pendingNodeCount)) {
+    const p = (plans || []).find(pl => String(pl.planId) === id);
+    if (!p) { stillPending = true; continue; }
+    const chainVal = Number(p.totalNodes) || 0;
+    const reconciled = ov.dir === 'down' ? chainVal <= ov.value : chainVal >= ov.value;
+    if (reconciled || (now - ov.ts) > 30_000) {
+      delete S.pendingNodeCount[id];
+    } else {
+      p.totalNodes = ov.value; // keep the optimistic number painted
+      stillPending = true;
+    }
+  }
+  return stillPending;
+}
+
 /** Re-pull /api/my-plans (cache already invalidated by the caller) and re-paint
  *  the current page so plan-pill counts (totalNodes, totalSubscriptions) reflect
  *  the post-TX chain state. Retries with backoff because the chain can lag a
- *  beat after a successful broadcast. */
-async function refetchMyPlans({ attempts = 4, baseMs = 1000 } = {}) {
+ *  beat after a successful broadcast. While a node-count override is pending we
+ *  keep polling (and re-applying the optimistic value) until it reconciles. */
+async function refetchMyPlans({ attempts = 8, baseMs = 1000 } = {}) {
   const epoch = _currentNavEpoch();
+  const hasPending = () => Object.keys(S.pendingNodeCount).length > 0;
   for (let i = 0; i < attempts; i++) {
+    // When an override is pending, wait BEFORE the first fetch too — give the
+    // indexer a head start so we don't waste the first attempt on a stale read.
+    if (i > 0 || hasPending()) await new Promise(r => setTimeout(r, baseMs * Math.pow(2, Math.min(i, 3))));
     try {
       const r = await fetch('/api/my-plans');
       const d = await r.json();
       if (!d || d.error) throw new Error(d?.error || 'no data');
       if (!_navStillCurrent(epoch, S.page)) return;
+      const stillPending = applyPendingNodeCounts(d.plans || []);
       _dataCache['/api/my-plans'] = { data: d, ts: Date.now() };
       _lastMyPlansJson = JSON.stringify(d);
       S.myPlans = d.plans || [];
       const handler = { 'add-nodes': loadAddNodes, 'your-nodes': loadYourNodes, pricing: loadPricing, 'your-plans': loadYourPlans, subscribers: loadSubscribers, 'fee-grants': loadFeeGrants };
       if (handler[S.page]) coalesceRender('plans:' + S.page, handler[S.page]);
-      return;
+      if (!stillPending) return; // chain reconciled — done
     } catch (e) {
-      if (i < attempts - 1) await new Promise(r => setTimeout(r, baseMs * Math.pow(2, i)));
+      if (i < attempts - 1) await new Promise(r => setTimeout(r, baseMs * Math.pow(2, Math.min(i, 3))));
     }
   }
 }
@@ -10409,10 +10455,15 @@ <h3 id="securityFaqTitle">
         S.mgrNodes.planNodesCount = (S.mgrNodes.planNodesCount || 0) + count;
       }
       // Optimistic plan-pill bump so the count reflects the new nodes immediately,
-      // then refetch to reconcile with chain truth.
+      // then refetch to reconcile with chain truth. Register a sticky override so
+      // the bumped count survives every refetch/SWR read until the chain (which
+      // indexes 1-6s later) catches up — otherwise the card snaps back.
       if (!d.alreadyLinked && S.myPlans) {
         const p = S.myPlans.find(pl => String(pl.planId) === String(S.mgrPlanId));
-        if (p) p.totalNodes = (p.totalNodes || 0) + count;
+        if (p) {
+          p.totalNodes = (p.totalNodes || 0) + count;
+          setPendingNodeCount(S.mgrPlanId, p.totalNodes, 'up');
+        }
       }
       S.addSet.clear();
       const targetCount = S.mgrNodes ? (S.mgrNodes.planNodesCount || 0) : null;
@@ -10473,10 +10524,14 @@ <h3 id="securityFaqTitle">
         }
         S.mgrNodes.planNodesCount = Math.max(0, (S.mgrNodes.planNodesCount || 0) - addrs.length);
       }
-      // Optimistic plan-pill decrement, then refetch.
+      // Optimistic plan-pill decrement + sticky override so the lower count holds
+      // through every refetch/SWR read until the chain catches up (1-6s index lag).
       if (S.myPlans) {
         const p = S.myPlans.find(pl => String(pl.planId) === String(S.mgrPlanId));
-        if (p) p.totalNodes = Math.max(0, (p.totalNodes || 0) - count);
+        if (p) {
+          p.totalNodes = Math.max(0, (p.totalNodes || 0) - count);
+          setPendingNodeCount(S.mgrPlanId, p.totalNodes, 'down');
+        }
       }
       S.removeSet.clear();
       // The floating bar may have been created by refreshRemoveActionBar() as a