From 42d0e15fea854d4b6c469ad8f6214245e44e0d50 Mon Sep 17 00:00:00 2001
From: martbost <martybostick@gmail.com>
Date: Mon, 7 Sep 2026 08:38:15 -0500
Subject: [PATCH] Visual downline tree on the Overview

"Your line at a glance": YOU + three levels of member chips with connectors,
your qualified directs highlighted in gold, and "+ open" placeholders on levels
1-2 showing what's next. Loads from /api/my/line.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 public/assets/my.js    | 21 +++++++++++++++++++++
 public/assets/site.css | 13 +++++++++++++
 public/my.html         |  8 ++++++--
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/public/assets/my.js b/public/assets/my.js
index 9697f29..7115c8c 100644
--- a/public/assets/my.js
+++ b/public/assets/my.js
@@ -285,6 +285,26 @@
     if (toast) { IAP.status(toast, kind); if (sound) playSound(sound); liveRefresh(); }
   }
 
+  // visual line tree on the Overview: YOU + three levels, qualified directs in gold
+  async function loadLineTree(buyerCount) {
+    try {
+      const r = await (await fetch('/api/my/line')).json();
+      const el = $('lineTree'); if (!el) return;
+      const levels = r.levels || [];
+      const total = levels.reduce((n, L) => n + L.members.length, 0);
+      if ($('treeSub')) $('treeSub').textContent = total ? total + ' across 3 levels' : 'share your link to grow';
+      const chip = (m, q) => '<span class="lt-node' + (q ? ' qualified' : (m.email ? '' : ' deep')) + '" title="' + esc(m.name || 'member') + (q ? ' · qualified buyer' : '') + '">' + esc(String(m.name || 'M').replace(/^@/, '').slice(0, 12)) + '</span>';
+      const rowFor = lvl => {
+        const L = levels.find(x => x.level === lvl); const members = L ? L.members : [];
+        const qn = lvl === 1 ? (buyerCount || 0) : 0; // highlight your qualified directs
+        let html = members.map((m, i) => chip(m, i < qn)).join('');
+        if (lvl <= 2 && members.length < (lvl === 1 ? 2 : 4)) html += '<span class="lt-node open">+ open</span>';
+        if (!html) html = '<span class="lt-node open">+ open</span>';
+        return '<div class="lt-row"><span class="lt-cap">L' + lvl + '</span><div class="lt-nodes">' + html + '</div></div>';
+      };
+      el.innerHTML = '<div class="lt-top"><span class="lt-you">YOU</span></div><div class="lt-stem"></div>' + rowFor(1) + rowFor(2) + rowFor(3);
+    } catch (e) {}
+  }
   async function loadDashboard() {
     try {
       const d = await (await fetch('/api/my/dashboard')).json();
@@ -321,6 +341,7 @@
       if (d.sponsorMsg) showSponsorModal(d.sponsorMsg);
       renderBadges(d);
       loadFeatured();
+      loadLineTree(d.buyerCount || 0);
       loadCharts(d);
       $('nextMove').textContent = nextMove(d);
       renderSteps(d);
diff --git a/public/assets/site.css b/public/assets/site.css
index e266de0..d12d343 100644
--- a/public/assets/site.css
+++ b/public/assets/site.css
@@ -561,3 +561,16 @@ img{max-width:100%}
 .chat-msg-btn{margin-left:auto;font-size:12px;padding:3px 10px}
 .switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
 .switch input{width:18px;height:18px;accent-color:var(--mint)}
+
+/* ── Overview line tree ── */
+.line-tree{margin-top:6px}
+.lt-top{margin-left:26px}
+.lt-you{display:inline-block;background:var(--mint);color:var(--mint-ink);font-weight:800;padding:6px 18px;border-radius:999px;font-size:13px}
+.lt-stem{height:12px;border-left:2px solid var(--line-strong);width:0;margin:0 0 6px 30px}
+.lt-row{display:flex;align-items:center;gap:10px;margin:7px 0}
+.lt-cap{font:700 11px var(--mono);color:var(--muted);width:22px;flex:0 0 auto}
+.lt-nodes{display:flex;gap:8px;flex-wrap:wrap}
+.lt-node{background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;padding:6px 12px;font-size:13px;font-weight:600;white-space:nowrap}
+.lt-node.deep{color:var(--muted)}
+.lt-node.qualified{border-color:#ffb238;color:#ffd15c;box-shadow:0 0 0 1px rgba(255,177,56,.35)}
+.lt-node.open{border-style:dashed;color:var(--muted);background:transparent}
diff --git a/public/my.html b/public/my.html
index 25a5be9..c6b9d3f 100644
--- a/public/my.html
+++ b/public/my.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Member area | InstantAdPay</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
-<link rel="stylesheet" href="/assets/site.css?v=20260907s">
+<link rel="stylesheet" href="/assets/site.css?v=20260907t">
 </head>
 <body class="bo-body">
 
@@ -217,6 +217,10 @@
           </div>
           <div class="nc-steps" id="ncSteps"></div>
         </div>
+        <div class="card" id="lineTreeCard">
+          <div class="card-head"><h3>Your line at a glance</h3><span class="sub" id="treeSub"></span></div>
+          <div id="lineTree" class="line-tree"><p class="muted small">Loading your line…</p></div>
+        </div>
         <div class="card" id="badgeCard" hidden>
           <div class="card-head"><h3>Your achievements</h3><span class="sub">unlock as you build</span></div>
           <div class="badges" id="badgeStrip"></div>
@@ -666,7 +670,7 @@
 </div>
 <script src="/assets/common.js?v=20260907s"></script>
 <script src="/assets/wallet.js?v=20260907q"></script>
-<script src="/assets/my.js?v=20260907r"></script>
+<script src="/assets/my.js?v=20260907t"></script>
 <script src="/assets/chat.js?v=20260907l"></script>
 </body>
 </html>