From 130fc42c4556a2089e42ed2959879e3e75f3bc09 Mon Sep 17 00:00:00 2001
From: martbost <martybostick@gmail.com>
Date: Thu, 13 Aug 2026 15:13:22 -0500
Subject: [PATCH] Teach spillover in the matrix views
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tree nodes now carry referrerId, so positions placed by spillover (their
referrer differs from their matrix parent) get a teal "spillover · ref
#N" tag on cards in both the member dashboard and admin matrix, plus a
legend entry. When a member is unqualified but has spillover positions
under them — the classic "why do I have 2 under me but no checkmark?"
state — a callout explains that spillover grows the matrix but only
members joining with their own ID count toward 2/2, and points them at
their share link.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 chain.js          |  2 +-
 public/admin.js   |  4 +++-
 public/my.html    |  2 +-
 public/my.js      | 17 +++++++++++++++--
 public/styles.css |  2 ++
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/chain.js b/chain.js
index 86faafe..b6e6c7d 100644
--- a/chain.js
+++ b/chain.js
@@ -412,7 +412,7 @@ function getSubtree(id, showDepth = 3) {
     const l = node(m.l, depth + 1), r = node(m.r, depth + 1);
     const n = {
       id: nid, tier: m.tier, level: m.level, levelName: levelName(m.level || 1),
-      directCount: m.directCount || 0, earnedPol: m.earnedPol || 0,
+      directCount: m.directCount || 0, earnedPol: m.earnedPol || 0, referrerId: m.referrerId || 0,
       downCount: 0, downPol: 0
     };
     for (const c of [l, r]) if (c) { n.downCount += 1 + c.downCount; n.downPol = +(n.downPol + c.earnedPol + c.downPol).toFixed(2); }
diff --git a/public/admin.js b/public/admin.js
index 87f4a1d..ccb24ea 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -79,7 +79,9 @@ function mtCard(n){
   if(!n)return '<div class="mtp-card mtp-open">open<br>slot</div>';
   const down=n.downCount?`<span class="mtp-down">⬇ ${n.downCount} below · ${mtFmt(n.downPol)} POL</span>`:'<span class="mtp-down mtp-down-none">no downline yet</span>';
   const qmark=n.directCount>=2?'<span class="mtp-qmark" title="Qualified — 2/2 directs">✓</span>':'';
-  return `<button class="mtp-card${n.id===matrixUI.rootId?' mtp-focus':''}" data-mid="${n.id}">${qmark}${mtBadge(n)} <span class="mt-id">#${n.id}</span><span class="mtp-lvl">${esc(n.levelName)}</span><span class="mtp-sub">${n.directCount}/2 · ${mtFmt(n.earnedPol)} POL</span>${down}</button>`;
+  const par=matrixUI.parent[n.id];
+  const spill=par&&n.referrerId&&n.referrerId!==par?`<span class="mtp-spill" title="Placed here by spillover — referred by #${n.referrerId}">↧ spillover · ref #${n.referrerId}</span>`:'';
+  return `<button class="mtp-card${n.id===matrixUI.rootId?' mtp-focus':''}" data-mid="${n.id}">${qmark}${mtBadge(n)} <span class="mt-id">#${n.id}</span><span class="mtp-lvl">${esc(n.levelName)}</span><span class="mtp-sub">${n.directCount}/2 · ${mtFmt(n.earnedPol)} POL</span>${spill}${down}</button>`;
 }
 function renderPyramid(){
   const out=document.getElementById('matrixTree'),nav=document.getElementById('matrixNav');
diff --git a/public/my.html b/public/my.html
index c034720..9005d90 100644
--- a/public/my.html
+++ b/public/my.html
@@ -6,7 +6,7 @@
 <section id="dash" class="hidden">
 <div style="display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px"><div><div class="eyebrow">Member position</div><h1 style="margin:6px 0 0">Position <span class="gold" id="dTitle">#—</span> <span id="dVerified" class="live-badge" style="vertical-align:middle;margin-left:8px"><span class="dot"></span> Verified on-chain</span> <span id="dQualified"></span></h1></div><button id="switchId" class="btn btn-secondary btn-sm">Look up another ID</button></div>
 <div id="dFacts" class="facts" style="grid-template-columns:repeat(3,1fr);margin:18px 0"></div>
-<div class="table-card" style="margin-bottom:18px"><div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap"><div><h2 style="margin:0 0 4px">Your team</h2><p style="color:var(--muted);font-size:13px;margin:0 0 14px">Your position's matrix — the rollup line on each card counts everyone underneath, all the way down. Click a position to drill into that leg. Open slots are where the next placements land.</p></div><button id="dTreeToggle" class="btn btn-secondary btn-sm">List view</button></div><div id="dTreeNav" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px"></div><div id="dTree"></div><p class="micro" style="margin:14px 0 0"><span class="mtp-qmark" style="position:static;display:inline-grid;vertical-align:middle">✓</span> qualified (2/2 directs) · <span class="mt-badge mt-prem">P</span> Premium · <span class="mt-badge">S</span> Standard · ⬇ everyone below that position (all generations) and the POL they've earned</p></div>
+<div class="table-card" style="margin-bottom:18px"><div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap"><div><h2 style="margin:0 0 4px">Your team</h2><p style="color:var(--muted);font-size:13px;margin:0 0 14px">Your position's matrix — the rollup line on each card counts everyone underneath, all the way down. Click a position to drill into that leg. Open slots are where the next placements land.</p></div><button id="dTreeToggle" class="btn btn-secondary btn-sm">List view</button></div><div id="dTreeNav" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px"></div><div id="dTree"></div><p class="micro" style="margin:14px 0 0"><span class="mtp-qmark" style="position:static;display:inline-grid;vertical-align:middle">✓</span> qualified (2/2 directs) · <span class="mt-badge mt-prem">P</span> Premium · <span class="mt-badge">S</span> Standard · ⬇ everyone below that position (all generations) and the POL they've earned · <span style="color:var(--teal)">↧ spillover</span> = placed there by upline activity; only members who join with a position's own ID count toward its 2/2</p><div id="dSpillNote" class="hidden"></div></div>
 <div class="table-card" style="margin-bottom:18px"><h2 style="margin:0 0 4px">Share this position</h2><div id="dShare"></div></div>
 <div class="table-card" style="margin-bottom:18px"><h2 style="margin:0 0 4px">Payments received</h2><p style="color:var(--muted);font-size:13px;margin:0 0 10px">Every payment your position has received, straight from the smart contract.</p><div id="dIncome"></div></div>
 <div class="table-card"><h2 style="margin:0 0 4px">Your lineage</h2><p id="dLineage" style="color:var(--muted);font-size:14px;line-height:1.8;margin:8px 0 0"></p></div>
diff --git a/public/my.js b/public/my.js
index e787d03..ff020fb 100644
--- a/public/my.js
+++ b/public/my.js
@@ -8,12 +8,14 @@
 
   const treeUI={byId:{},parent:{},homeId:0,rootId:0,mode:'pyramid'};
   function indexTree(n,par){if(!n)return;treeUI.byId[n.id]=n;if(par)treeUI.parent[n.id]=par.id;indexTree(n.left,n);indexTree(n.right,n)}
+  function isSpill(n){return !!(n&&treeUI.parent[n.id]&&n.referrerId&&n.referrerId!==treeUI.parent[n.id])}
   function card(n,focus){
     if(!n)return '<div class="mtp-card mtp-open">open<br>slot</div>';
     const badge=n.tier===2?'<span class="mt-badge mt-prem">P</span>':'<span class="mt-badge">S</span>';
     const qmark=n.directCount>=2?'<span class="mtp-qmark" title="Qualified — 2/2 directs">✓</span>':'';
+    const spill=isSpill(n)?`<span class="mtp-spill" title="Placed here by spillover — referred by #${n.referrerId}">↧ spillover · ref #${n.referrerId}</span>`:'';
     const down=n.downCount?`<span class="mtp-down">⬇ ${n.downCount} below · ${fmt(n.downPol)} POL</span>`:'<span class="mtp-down mtp-down-none">no downline yet</span>';
-    return `<button class="mtp-card${focus?' mtp-focus':''}" data-tid="${n.id}">${qmark}${badge} <span class="mt-id">#${n.id}</span><span class="mtp-lvl">${esc(n.levelName)}</span><span class="mtp-sub">${n.directCount}/2 · ${fmt(n.earnedPol)} POL</span>${down}</button>`;
+    return `<button class="mtp-card${focus?' mtp-focus':''}" data-tid="${n.id}">${qmark}${badge} <span class="mt-id">#${n.id}</span><span class="mtp-lvl">${esc(n.levelName)}</span><span class="mtp-sub">${n.directCount}/2 · ${fmt(n.earnedPol)} POL</span>${spill}${down}</button>`;
   }
   function renderPyramid(){
     const out=document.getElementById('dTree'),nav=document.getElementById('dTreeNav');
@@ -39,7 +41,7 @@
       const ch=[n.left,n.right].filter(Boolean);
       const qmark=n.directCount>=2?'<span class="mtp-qmark" style="position:static;display:inline-grid;width:16px;height:16px;font-size:10px;vertical-align:middle">✓</span> ':'';
       const badge=n.tier===2?'<span class="mt-badge mt-prem">P</span>':'<span class="mt-badge">S</span>';
-      const label=`${qmark}${badge} <span class="mt-id">#${n.id}</span> <span class="mt-meta">${esc(n.levelName)} · ${n.directCount}/2 directs · ${fmt(n.earnedPol)} POL${n.downCount?` · ⬇ ${n.downCount} below (${fmt(n.downPol)} POL)`:''}</span>`;
+      const label=`${qmark}${badge} <span class="mt-id">#${n.id}</span> <span class="mt-meta">${esc(n.levelName)} · ${n.directCount}/2 directs · ${fmt(n.earnedPol)} POL${n.downCount?` · ⬇ ${n.downCount} below (${fmt(n.downPol)} POL)`:''}${isSpill(n)?` · <span style="color:var(--teal)">↧ spillover (ref #${n.referrerId})</span>`:''}</span>`;
       const kids=ch.length?`<ul class="mt-kids">${ch.map(c=>node(c,depth+1)).join('')}</ul>`:'';
       return ch.length?`<li class="mt-node"><details${depth<3?' open':''}><summary>${label}</summary>${kids}</details></li>`:`<li class="mt-node mt-leaf">${label}</li>`;
     };
@@ -71,6 +73,17 @@
     treeUI.byId={};treeUI.parent={};treeUI.homeId=d.id;treeUI.rootId=d.id;
     indexTree(d.subtree,null);
     renderTree();
+    // spillover explainer — shown exactly when the confusing state exists:
+    // positions sitting under you while you're not yet qualified
+    const note=document.getElementById('dSpillNote');
+    if(note){
+      const kids=d.subtree?[d.subtree.left,d.subtree.right].filter(Boolean):[];
+      const spills=kids.filter(k=>k.referrerId&&k.referrerId!==d.id).length;
+      if(d.directCount<2&&kids.length&&spills){
+        note.innerHTML=`<div class="callout" style="margin-top:14px"><strong>Why am I not qualified when people sit under me?</strong> ${spills===kids.length?'The positions':'Some positions'} under you arrived by <strong>spillover</strong> — when your upline recruits, the contract fills the next open slot downward, which can land members in your matrix. Spillover grows your team and your future level payments, but qualification only counts your <strong>directs</strong> — people who join using <em>your</em> ID. You have ${d.directCount}/2 directs; share your link above to get ${2-d.directCount===1?'your last one':'your 2'}.</div>`;
+        note.classList.remove('hidden');
+      }else{note.classList.add('hidden');note.innerHTML='';}
+    }
     const inc=d.income||[];
     document.getElementById('dIncome').innerHTML=inc.length
       ?`<div class="table-wrap"><table class="table" style="min-width:520px"><thead><tr><th>When</th><th>From member</th><th>For</th><th>Amount</th></tr></thead><tbody>${inc.map(p=>`<tr><td>${date(p.ts)}</td><td>#${p.fromId}</td><td>${esc(p.desc)}</td><td><strong>${fmt(p.pol)} POL</strong></td></tr>`).join('')}</tbody></table></div>`
diff --git a/public/styles.css b/public/styles.css
index d154b87..8956e3e 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -120,3 +120,5 @@ a{color:inherit}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}.nav{heigh
 img.qr-img{object-fit:contain}
 
 a.brand{text-decoration:none;color:inherit}
+
+.mtp-spill{font-size:10px;color:var(--teal);width:100%;margin-top:3px}