Alpaca live paper trade simulation wording; today's top 10 shortlist

static/index.html

@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Updraft — live quality-trend fund</title>
-<meta name="description" content="Updraft holds the three quality US stocks with the strongest trends and rebalances itself on the first trading day of every month. Live paper portfolio, strategy and backtest.">
+<meta name="description" content="Updraft holds the three quality US stocks with the strongest trends and rebalances itself on the first trading day of every month. An Alpaca live paper trade simulation, with the strategy and its backtest.">
 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%230e2348'/%3E%3Cpath d='M6 25c6-1 11-6 15-14' stroke='%23ea6435' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18.5 9.5 27 6l-3.6 8.4-1.9-3.3z' fill='%23fff'/%3E%3C/svg%3E">
 <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700&display=swap" rel="stylesheet">
@@ -77,6 +77,11 @@ h3{font-size:15px;margin:0 0 4px}
 .rank{display:inline-block;min-width:34px;text-align:center;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--ink-2)}
 .note{font-size:13px;color:var(--ink-2);margin:10px 0 0}
 .empty{color:var(--muted);padding:12px 0}
+.tag{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap;color:var(--ink)}
+.tag.held{background:color-mix(in srgb,var(--updraft) 18%,transparent)}
+.tag.buy{background:color-mix(in srgb,var(--plan) 18%,transparent)}
+.tag.sell{background:var(--chip);color:var(--ink-2)}
+.hold tr.is-held td:first-child{box-shadow:inset 3px 0 0 var(--updraft)}
 .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
 .step{border:1px solid var(--border);border-radius:14px;padding:14px;position:relative;background:var(--surface)}
 .step .n{font-family:var(--brandfont);font-size:28px;font-weight:700;color:var(--updraft);line-height:1}
@@ -117,8 +122,8 @@ footer{color:var(--muted);font-size:12px;padding:0 0 36px}
   </div>
   <div class="wrap hero-copy">
     <h1>Three quality stocks with the strongest trends — rebalanced automatically every month.</h1>
-    <p id="lede">A live paper portfolio run by rules, not opinions. Below: what it is worth right now, how it compares with the
-      S&amp;P 500, and what it holds.</p>
+    <p id="lede">An Alpaca live paper trade simulation, run by rules, not opinions. Below: what it is worth right now, how it
+      compares with the S&amp;P 500, and what it holds.</p>
   </div>
   <nav class="wrap tabs" role="tablist" aria-label="Sections">
     <button role="tab" id="t-live" aria-selected="true" aria-controls="p-live">Live fund</button>
@@ -160,6 +165,14 @@ footer{color:var(--muted);font-size:12px;padding:0 0 36px}
     </tr></thead><tbody><tr><td colspan="6" class="empty">Loading…</td></tr></tbody></table></div>
     <p class="note" id="cash-note"></p>
   </div>
+
+  <div class="card">
+    <div class="chart-head"><div><h2>Today's top 10</h2><p class="sub" id="short-sub">The quality pool ranked by trend — the list the three holdings are picked from.</p></div></div>
+    <div style="overflow-x:auto"><table class="hold" id="shortlist"><thead><tr>
+      <th class="r">#</th><th>Stock</th><th class="r">6 months</th><th class="r hide-s">1 month</th><th class="r hide-s">Quality</th><th>Status</th>
+    </tr></thead><tbody><tr><td colspan="6" class="empty">Loading…</td></tr></tbody></table></div>
+    <p class="note" id="short-note"></p>
+  </div>
 </section>
 
 <!-- ===================================================== THE STRATEGY -->
@@ -272,8 +285,8 @@ function showTab(name) {
     $("t-" + t).setAttribute("aria-selected", String(t === name)); $("p-" + t).hidden = t !== name;
   }
   setText($("lede"), name === "strategy"
-    ? "A live paper portfolio run by rules, not opinions. Below: how it picks its stocks, 27 years of backtest, and what a lump sum or a monthly SIP could grow to."
-    : "A live paper portfolio run by rules, not opinions. Below: what it is worth right now, how it compares with the S&P 500, and what it holds.");
+    ? "An Alpaca live paper trade simulation, run by rules, not opinions. Below: how it picks its stocks, 27 years of backtest, and what a lump sum or a monthly SIP could grow to."
+    : "An Alpaca live paper trade simulation, run by rules, not opinions. Below: what it is worth right now, how it compares with the S&P 500, and what it holds.");
   if (name === "strategy") loadStrategy();
   try { history.replaceState(null, "", name === "strategy" ? "#strategy" : "#"); } catch (e) {}
 }
@@ -409,7 +422,7 @@ async function loadPortfolio() {
     const p = await get("/api/portfolio"); port = p;
     if (perf) { syncLive(); showPerf(); }
     setText($("k-eq"), usd(p.equity));
-    showToday();
+    showToday(); showShortlist();
     const tb = $("holdings").querySelector("tbody"); tb.textContent = "";
     if (!p.positions.length) { const tr = tb.insertRow(); const td = tr.insertCell(); td.colSpan = 6; td.className = "empty"; td.textContent = "No positions yet — the first rebalance buys the top 3."; }
     for (const r of p.positions) {
@@ -428,6 +441,53 @@ async function loadPortfolio() {
     setText($("updated"), "Live · " + new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })); $("dot").style.background = "#3fbf6b";
   } catch (e) { setText($("updated"), "Live data unavailable"); $("dot").style.background = "#f07068"; }
 }
+let rk = null;
+async function loadRanking() {
+  try { rk = await get("/api/ranking"); showShortlist(); }
+  catch (e) { setText($("short-note"), "The ranking is unavailable right now."); }
+}
+function showShortlist() {
+  if (!rk || !rk.ranked || !rk.ranked.length) return;
+  const N = (rk.rule && rk.rule.names) || 3, K = (rk.rule && rk.rule.keep_within) || 6;
+  const order = rk.ranked.map(r => r.ticker), rank = Object.fromEntries(order.map((t, i) => [t, i + 1]));
+  const held = port ? port.positions.map(p => p.symbol) : null;
+  let target = null;                    // the same rule as the rebalance: keep holdings in the top K, refill from the top
+  if (held) {
+    const kept = held.filter(t => (rank[t] || 1e9) <= K).sort((a, b) => rank[a] - rank[b]).slice(0, N);
+    target = kept.concat(order.filter(t => !kept.includes(t)).slice(0, N - kept.length));
+  }
+  const tb = $("shortlist").querySelector("tbody"); tb.textContent = "";
+  for (const r of rk.ranked.slice(0, 10)) {
+    const isHeld = !!held && held.includes(r.ticker), tr = tb.insertRow();
+    if (isHeld) tr.className = "is-held";
+    const n = tr.insertCell(); n.className = "r"; const rc = document.createElement("span"); rc.className = "rank"; rc.textContent = "#" + r.rank; n.append(rc);
+    const a = tr.insertCell(); const t = document.createElement("div"); t.className = "tick"; t.textContent = r.ticker;
+    const co = document.createElement("div"); co.className = "co"; co.textContent = [r.name, r.sector].filter(Boolean).join(" · "); a.append(t, co);
+    const m6 = tr.insertCell(); m6.className = "r"; m6.textContent = pct(r.ret_6m, 0); signCls(m6, r.ret_6m);
+    const m1 = tr.insertCell(); m1.className = "r hide-s"; m1.textContent = pct(r.ret_1m, 0); signCls(m1, r.ret_1m);
+    const q = tr.insertCell(); q.className = "r hide-s"; q.textContent = r.qcd_pct == null ? "—" : "top " + Math.max(1, Math.round((1 - r.qcd_pct) * 100)) + "%";
+    const st = tr.insertCell();
+    if (target) {
+      const tag = document.createElement("span");
+      if (isHeld && target.includes(r.ticker)) { tag.className = "tag held"; tag.textContent = "Held"; }
+      else if (isHeld) { tag.className = "tag sell"; tag.textContent = "Held · would sell"; }
+      else if (target.includes(r.ticker)) { tag.className = "tag buy"; tag.textContent = "Would buy"; }
+      if (tag.className) st.append(tag);
+    }
+  }
+  const asOf = rk.prices_as_of ? new Date(rk.prices_as_of + "T12:00:00").toLocaleDateString([], { day: "numeric", month: "short" }) : null;
+  setText($("short-sub"), `The ${rk.pool || "~250"} stocks in the quality pool, ranked by trend${asOf ? " on closes of " + asOf : ""} and rebuilt every night. The three holdings are picked from this list at each monthly rebalance.`);
+  let note = "";
+  if (held && target) {
+    const sells = held.filter(x => !target.includes(x)), buys = target.filter(x => !held.includes(x));
+    if (!held.length) note = `The first rebalance would buy ${buys.join(", ")}.`;
+    else if (!sells.length) note = `If the rebalance ran today: no change — ${held.join(", ")} ${held.length > 1 ? "are all" : "is"} still in the top ${K}.`;
+    else note = `If the rebalance ran today: sell ${sells.map(x => x + (rank[x] ? ` (now #${rank[x]})` : " (left the pool)")).join(", ")}; buy ${buys.join(", ")}.`;
+    const ahead = order.slice(0, N).filter(x => !held.includes(x) && !buys.includes(x));
+    if (ahead.length) note += ` ${ahead.join(", ")} ${ahead.length > 1 ? "rank" : "ranks"} in today's top ${N} but ${ahead.length > 1 ? "are" : "is"} bought only when a holding drops out of the top ${K} — the buffer avoids trading on small rank changes.`;
+  }
+  setText($("short-note"), (note + ` Quality = percentile on capital discipline among the ${rk.liquid_usd || ""} tradable stocks of the 1,000 largest; the top 30% form the pool.`).replace("among the  ", "among the ").trim());
+}
 async function loadStatus() {
   try {
     const s = await get("/api/status");
@@ -544,8 +604,8 @@ document.querySelectorAll("#scen button").forEach(b => b.onclick = () => { scen
 function redrawAll() { drawLive(true); if (strat) drawStrategy(); }
 
 /* ---------- start */
-loadPortfolio(); loadPerformance(); loadStatus();
-setInterval(loadPortfolio, 30000); setInterval(loadStatus, 60000); setInterval(loadPerformance, 60000);
+loadPortfolio(); loadPerformance(); loadStatus(); loadRanking();
+setInterval(loadPortfolio, 30000); setInterval(loadStatus, 60000); setInterval(loadRanking, 600000); setInterval(loadPerformance, 60000);
 if (location.hash === "#strategy") showTab("strategy");
 </script>
 </body>