Change settings

src/views/LiveView.vue

@@ -26,7 +26,7 @@
       </div>
     </section>
 
-    <!-- Cards: Buy & Hold + top 4 agents -->
+    <!-- Cards: Buy & Hold + top 4 agents (computed with perf helpers) -->
     <section class="panel panel--cards" v-if="cards.length">
       <div class="cards5">
         <div
@@ -35,7 +35,6 @@
           class="card"
           :class="{ 'card--bh': c.kind==='bh', 'card--winner': c.isWinner }"
         >
-          <!-- header: logo | title | balance -->
           <div class="card__header">
             <div class="card__logo">
               <img v-if="c.logo" :src="c.logo" alt="" />
@@ -44,11 +43,9 @@
             </div>
 
             <div class="card__title" :title="c.title">{{ c.title }}</div>
-
             <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
           </div>
 
-          <!-- meta row -->
           <div class="card__meta">
             <div class="card__sub ellipsize" :title="c.subtitle">{{ c.subtitle }}</div>
 
@@ -64,7 +61,6 @@
             </template>
           </div>
 
-          <!-- date row -->
           <div class="card__footer">
             <div class="card__sub">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
           </div>
@@ -75,16 +71,23 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watchEffect } from 'vue'
 import AssetTabs from '../components/AssetTabs.vue'
 import CompareChartE from '../components/CompareChartE.vue'
 import { dataService } from '../lib/dataService'
 
+/* —— use the same helpers as the chart —— */
+import { getAllDecisions } from '../lib/dataCache'
+import { readAllRawDecisions } from '../lib/idb'
+import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
+import { STRATEGIES } from '../lib/strategies'
+import { computeBuyHoldEquity, computeStrategyEquity } from '../lib/perf'
+
 /* ---------- config ---------- */
-const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // MRNA removed
+const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // (MRNA removed)
 const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
 
-// Optional: plug real logos if you have them
+// optional logos
 const AGENT_LOGOS = {
   // 'DeepFundAgent': new URL('../assets/images/agents/deepfund.png', import.meta.url).href,
   // 'InvestorAgent': new URL('../assets/images/agents/investor.png', import.meta.url).href,
@@ -99,11 +102,16 @@ const ASSET_ICONS = {
   TSLA: new URL('../assets/images/assets_images/TSLA.png', import.meta.url).href,
 }
 
+/* match the chart’s cutoff so numbers align */
+const ASSET_CUTOFF = { BTC: '2025-08-01' }
+
 /* ---------- state ---------- */
 const mode = ref('usd') // 'usd' | 'pct'
 const asset = ref('BTC')
 const rowsRef = ref([])
 
+let allDecisions = [] // in-memory decisions for perf calc
+
 /* ---------- bootstrap ---------- */
 onMounted(async () => {
   try {
@@ -115,6 +123,15 @@ onMounted(async () => {
   }
   rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
   if (!orderedAssets.includes(asset.value)) asset.value = orderedAssets[0]
+
+  // pull the same decisions cache the chart uses
+  allDecisions = getAllDecisions() || []
+  if (!allDecisions.length) {
+    try {
+      const cached = await readAllRawDecisions()
+      if (cached?.length) allDecisions = cached
+    } catch {}
+  }
 })
 
 /* ---------- helpers ---------- */
@@ -134,45 +151,7 @@ const filteredRows = computed(() =>
   })
 )
 
-/* --- Build an index of Buy&Hold rows: asset -> [{ts, balance, row}] asc --- */
-const bhIndex = computed(() => {
-  const idx = new Map()
-  console.log(rowsRef.value)
-  for (const r of (rowsRef.value || [])) {
-    if (!r?.asset) continue
-    const s  = (r.strategy || '').toLowerCase()
-    const an = (r.agent_name || '').toLowerCase()
-    const m  = (r.model || '').toLowerCase()
-    const isBH = s === 'buy_hold' || s === 'Buy&Hold' || (an.includes('buy') && an.includes('hold')) || (m.includes('buy') && m.includes('hold'))
-    if (!isBH) continue
-    const ts = new Date(r.end_date || r.last_nav_ts || 0).getTime()
-    if (!Number.isFinite(ts)) continue
-    const list = idx.get(r.asset) || []
-    list.push({ ts, balance: r.balance, row: r })
-    idx.set(r.asset, list)
-  }
-  for (const [a, list] of idx) list.sort((x, y) => x.ts - y.ts)
-  return idx
-})
-
-/* Latest B&H for the selected asset (for the B&H card) */
-const bhLatest = computed(() => (bhIndex.value.get(asset.value) || []).at(-1) || null)
-
-/* For an agent date, get the matching (latest ≤ date) B&H balance */
-function getBHBalanceAt(assetCode, iso) {
-  const list = bhIndex.value.get(assetCode)
-  if (!list || !list.length) return null
-  const t = new Date(iso || 0).getTime()
-  if (!Number.isFinite(t)) return list[list.length - 1].balance
-  let lo = 0, hi = list.length - 1, ans = -1
-  while (lo <= hi) {
-    const mid = (lo + hi) >> 1
-    if (list[mid].ts <= t) { ans = mid; lo = mid + 1 } else { hi = mid - 1 }
-  }
-  return ans >= 0 ? list[ans].balance : list[0].balance
-}
-
-/* Best model per agent (by balance) */
+/* Best model per agent (by balance) — still from leaderboard rows for picking winners */
 const winners = computed(() => {
   const byAgent = new Map()
   for (const r of filteredRows.value) {
@@ -183,7 +162,7 @@ const winners = computed(() => {
   return [...byAgent.values()]
 })
 
-/* Chart selections */
+/* Chart selections built from winners */
 const winnersForChart = computed(() =>
   winners.value.map(w => ({
     agent_name:  w.agent_name,
@@ -194,44 +173,108 @@ const winnersForChart = computed(() =>
   }))
 )
 
-/* Cards: B&H + top 4 agents, gaps aligned to same (or latest ≤) EOD */
-const cards = computed(() => {
-  const bhBal = bhLatest.value?.balance ?? 100000
-  const bhDate = bhLatest.value?.row?.end_date || bhLatest.value?.row?.last_nav_ts || ''
+/* ---------- PERF: compute B&H + strategy the same way as the chart ---------- */
+
+/** build the ordered decision seq for a selection (same logic as chart) */
+function buildSeq(sel) {
+  const { agent_name: agent, asset, model } = sel
+  const ids = Array.isArray(sel.decision_ids) ? sel.decision_ids : []
+  let seq = ids.length
+    ? allDecisions.filter(r => ids.includes(r.id))
+    : allDecisions.filter(r => r.agent_name === agent && r.asset === asset && r.model === model)
+
+  seq.sort((a, b) => (a.date > b.date ? 1 : -1))
+
+  const isCrypto = asset === 'BTC' || asset === 'ETH'
+  let filtered = isCrypto ? seq : filterRowsToNyseTradingDays(seq)
+
+  const cutoff = ASSET_CUTOFF[asset]
+  if (cutoff) {
+    const t0 = new Date(cutoff + 'T00:00:00Z')
+    filtered = filtered.filter(r => new Date(r.date + 'T00:00:00Z') >= t0)
+  }
+  return filtered
+}
+
+/** compute final equity & aligned B&H for a selection */
+function computeEquities(sel) {
+  const seq = buildSeq(sel)
+  if (!seq.length) return null
+
+  // strategy params (mirror CompareChartE)
+  const cfg =
+    (STRATEGIES || []).find(s => s.id === sel.strategy) ||
+    { strategy: 'long_only', tradingMode: 'aggressive', fee: 0.0005 }
+
+  const stratY = computeStrategyEquity(seq, 100000, cfg.fee, cfg.strategy, cfg.tradingMode) || []
+  const bhY    = computeBuyHoldEquity(seq, 100000) || []
+
+  const lastIdx = Math.min(stratY.length, bhY.length) - 1
+  if (lastIdx < 0) return null
+
+  return {
+    date: seq[lastIdx].date,
+    stratLast: stratY[lastIdx],
+    bhLast: bhY[lastIdx],
+    seq, stratY, bhY
+  }
+}
+
+/* compute cards from perf (no leaderboard math) */
+const cards = ref([])
+
+watchEffect(() => {
+  if (!winnersForChart.value.length) {
+    cards.value = []
+    return
+  }
+
+  // compute perf for each winner
+  const perfs = winnersForChart.value
+    .map(sel => ({ sel, perf: computeEquities(sel) }))
+    .filter(x => x.perf)
 
+  if (!perfs.length) {
+    cards.value = []
+    return
+  }
+
+  // Buy & Hold card: use the first winner’s BH last for the asset
+  const first = perfs[0]
+  const assetCode = first.sel.asset
   const bhCard = {
-    key: `bh|${asset.value}`,
+    key: `bh|${assetCode}`,
     kind: 'bh',
     title: 'Buy & Hold',
-    subtitle: asset.value,
-    balance: bhBal,
-    date: bhDate,
-    logo: ASSET_ICONS[asset.value] || null,
+    subtitle: assetCode,
+    balance: first.perf.bhLast,
+    date: first.perf.date,
+    logo: ASSET_ICONS[assetCode] || null,
     isWinner: false
   }
 
-  const top = [...winners.value].sort((a,b) => score(b) - score(a)).slice(0, 4)
-  const maxBal = top.length ? Math.max(...top.map(r => r.balance ?? -Infinity)) : -Infinity
-
-  const agentCards = top.map(r => {
-    const date = r.end_date || r.last_nav_ts || ''
-    const base = getBHBalanceAt(r.asset, date) // aligned baseline
-    const gapUsd = (typeof r.balance === 'number' && Number.isFinite(base)) ? (r.balance - base) : null
-    const gapPct = (gapUsd != null && Number.isFinite(base) && base > 0) ? (r.balance / base - 1) : null
+  // agent cards and winner flag
+  const agentCards = perfs.map(({ sel, perf }) => {
+    const gapUsd = perf.stratLast - perf.bhLast
+    const gapPct = perf.bhLast > 0 ? (perf.stratLast / perf.bhLast - 1) : 0
     return {
-      key: `agent|${r.agent_name}|${r.model}`,
+      key: `agent|${sel.agent_name}|${sel.model}`,
       kind: 'agent',
-      title: r.agent_name,
-      subtitle: r.model,
-      balance: r.balance,
-      date,
-      logo: AGENT_LOGOS[r.agent_name] || null,
+      title: sel.agent_name,
+      subtitle: sel.model,
+      balance: perf.stratLast,
+      date: perf.date,
+      logo: AGENT_LOGOS[sel.agent_name] || null,
       gapUsd, gapPct,
-      isWinner: r.balance === maxBal
+      isWinner: false // set below
     }
   })
 
-  return [bhCard, ...agentCards]
+  const maxBal = Math.max(...agentCards.map(c => c.balance ?? -Infinity))
+  agentCards.forEach(c => { c.isWinner = c.balance === maxBal })
+
+  // top 4 agents + BH card
+  cards.value = [bhCard, ...agentCards.sort((a,b) => b.balance - a.balance).slice(0,4)]
 })
 </script>
 
@@ -239,22 +282,13 @@ const cards = computed(() => {
 .live { max-width: 1280px; margin: 0 auto; padding: 12px 20px 28px; }
 
 /* toolbar */
-.toolbar {
-  position: sticky; top: 0; z-index: 10;
-  display: flex; align-items: center; justify-content: space-between;
-  gap: 16px; padding: 8px 0 10px; background: #fff;
-}
+.toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 10px; background: #fff; }
 .toolbar__left { min-width: 0; }
 .toolbar__right { display: flex; align-items: center; gap: 10px; }
 
 /* $/% toggle */
 .mode { display: inline-flex; gap: 8px; }
-.mode__btn {
-  height: 32px; min-width: 40px; padding: 0 12px;
-  border-radius: 10px; border: 1px solid #D6DAE1;
-  background: #fff; font-weight: 700; color: #0F172A;
-  transition: all .12s ease;
-}
+.mode__btn { height: 32px; min-width: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #D6DAE1; background: #fff; font-weight: 700; color: #0F172A; transition: all .12s ease; }
 .mode__btn:hover { transform: translateY(-1px); }
 .mode__btn.is-active { background: #0F172A; color: #fff; border-color: #0F172A; }
 
@@ -269,14 +303,10 @@ const cards = computed(() => {
 /* 5 cards in a row */
 .cards5 { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
 @media (max-width: 1200px) { .cards5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 720px) { .cards5 { grid-template-columns: 1fr; } }
+@media (max-width: 720px)  { .cards5 { grid-template-columns: 1fr; } }
 
 /* card */
-.card {
-  display: grid; grid-template-rows: auto auto auto; gap: 8px;
-  padding: 12px 14px; border: 1px solid #EEF1F6; border-radius: 14px;
-  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); position: relative;
-}
+.card { display: grid; grid-template-rows: auto auto auto; gap: 8px; padding: 12px 14px; border: 1px solid #EEF1F6; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); position: relative; }
 .card--bh { outline: 2px dashed rgba(15,23,42,.08); }
 .card--winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
 
@@ -292,8 +322,7 @@ const cards = computed(() => {
 /* title: clamp to 2 lines so balance never overlaps */
 .card__title {
   min-width: 0; font-weight: 800; color: #0F172A;
-  white-space: normal;
-  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
   overflow: hidden; line-height: 1.15;
 }