Change settings

src/views/LiveView.vue

@@ -7,18 +7,8 @@
       </div>
       <div class="toolbar__right">
         <div class="mode">
-          <button
-            class="mode__btn"
-            :class="{ 'is-active': mode==='usd' }"
-            @click="mode='usd'">
-            $
-          </button>
-          <button
-            class="mode__btn"
-            :class="{ 'is-active': mode==='pct' }"
-            @click="mode='pct'">
-            %
-          </button>
+          <button class="mode__btn" :class="{ 'is-active': mode==='usd' }" @click="mode='usd'">$</button>
+          <button class="mode__btn" :class="{ 'is-active': mode==='pct' }" @click="mode='pct'">%</button>
         </div>
       </div>
     </header>
@@ -43,10 +33,7 @@
           v-for="c in cards"
           :key="c.key"
           class="card"
-          :class="{
-            'card--bh': c.kind==='bh',
-            'card--winner': c.isWinner
-          }"
+          :class="{ 'card--bh': c.kind==='bh', 'card--winner': c.isWinner }"
         >
           <!-- header: logo | title | balance -->
           <div class="card__header">
@@ -56,13 +43,7 @@
               <span v-if="c.isWinner" class="card__badge" aria-label="Top performer">👑</span>
             </div>
 
-            <div
-              class="card__title"
-              :style="{ fontSize: nameFontSize(c.title) }"
-              :title="c.title"
-            >
-              {{ c.title }}
-            </div>
+            <div class="card__title" :title="c.title">{{ c.title }}</div>
 
             <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
           </div>
@@ -71,14 +52,8 @@
           <div class="card__meta">
             <div class="card__sub ellipsize" :title="c.subtitle">{{ c.subtitle }}</div>
 
-            <template v-if="c.kind==='agent'">
-              <div
-                class="pill"
-                :class="{
-                  neg: c.gapUsd < 0 && !c.isWinner,
-                  pos: c.gapUsd >= 0 || c.isWinner
-                }"
-              >
+            <template v-if="c.kind==='agent' && c.gapUsd != null">
+              <div class="pill" :class="{ neg: c.gapUsd < 0 && !c.isWinner, pos: c.gapUsd >= 0 || c.isWinner }">
                 <span v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</span>
                 <span v-else>{{ signedPct(c.gapPct) }}</span>
               </div>
@@ -109,7 +84,7 @@ import { dataService } from '../lib/dataService'
 const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // MRNA removed
 const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
 
-// Plug in real logos if you have them
+// Optional: plug real logos if you have them
 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,
@@ -146,12 +121,11 @@ onMounted(async () => {
 function score(row) {
   return typeof row.balance === 'number' ? row.balance : -Infinity
 }
-const fmtUSD = (n) =>
-  (n ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
+const fmtUSD = (n) => (n ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
 const signedMoney = (n) => `${n >= 0 ? '+' : '−'}${fmtUSD(Math.abs(n))}`
 const signedPct = (p) => `${(p >= 0 ? '+' : '−')}${Math.abs(p * 100).toFixed(2)}%`
 
-/* Filter rows: selected asset, exclude “vanilla/vinilla” */
+/* Selected-asset rows (exclude vanilla/vinilla) */
 const filteredRows = computed(() =>
   (rowsRef.value || []).filter(r => {
     if (r.asset !== asset.value) return false
@@ -160,23 +134,42 @@ const filteredRows = computed(() =>
   })
 )
 
-/* Baseline (Buy & Hold) directly from tableRows */
-const baselineRow = computed(() => {
-  const rows = (rowsRef.value || []).filter(r => r.asset === asset.value)
-  const candidates = rows.filter(r => {
+/* --- Build an index of Buy&Hold rows: asset -> [{ts, balance, row}] asc --- */
+const bhIndex = computed(() => {
+  const idx = new Map()
+  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()
-    return s === 'buy_hold' || s === 'buy&hold' ||
-           (an.includes('buy') && an.includes('hold')) ||
-           (m.includes('buy') && m.includes('hold'))
-  })
-  if (!candidates.length) return null
-  const ts = (r) => new Date(r.end_date || r.last_nav_ts || 0).getTime()
-  return candidates.sort((a, b) => ts(b) - ts(a))[0]
+    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
 })
-const bhBalance = computed(() => baselineRow.value?.balance ?? 100000)
-const bhDate    = computed(() => baselineRow.value?.end_date || baselineRow.value?.last_nav_ts || '')
+
+/* 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) */
 const winners = computed(() => {
@@ -200,18 +193,18 @@ const winnersForChart = computed(() =>
   }))
 )
 
-/* Build 5 cards: Buy&Hold + top 4 agents and mark the winner */
+/* Cards: B&H + top 4 agents, gaps aligned to same (or latest ≤) EOD */
 const cards = computed(() => {
-  const base = Number(bhBalance.value ?? 100000)
-  const baseDate = bhDate.value
+  const bhBal = bhLatest.value?.balance ?? 100000
+  const bhDate = bhLatest.value?.row?.end_date || bhLatest.value?.row?.last_nav_ts || ''
 
   const bhCard = {
     key: `bh|${asset.value}`,
     kind: 'bh',
     title: 'Buy & Hold',
     subtitle: asset.value,
-    balance: base,
-    date: baseDate,
+    balance: bhBal,
+    date: bhDate,
     logo: ASSET_ICONS[asset.value] || null,
     isWinner: false
   }
@@ -220,19 +213,17 @@ const cards = computed(() => {
   const maxBal = top.length ? Math.max(...top.map(r => r.balance ?? -Infinity)) : -Infinity
 
   const agentCards = top.map(r => {
-    const gapUsd = (typeof r.balance === 'number' && Number.isFinite(base))
-      ? (r.balance - base)
-      : 0
-    const gapPct = (Number.isFinite(base) && base > 0)
-      ? (r.balance / base - 1)
-      : 0
+    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
     return {
       key: `agent|${r.agent_name}|${r.model}`,
       kind: 'agent',
       title: r.agent_name,
       subtitle: r.model,
       balance: r.balance,
-      date: r.end_date || r.last_nav_ts || '',
+      date,
       logo: AGENT_LOGOS[r.agent_name] || null,
       gapUsd, gapPct,
       isWinner: r.balance === maxBal
@@ -241,36 +232,16 @@ const cards = computed(() => {
 
   return [bhCard, ...agentCards]
 })
-
-/* Dynamic font size for long names (no clipping). */
-function nameFontSize(name='') {
-  const len = name.length
-  if (len <= 12) return '20px'
-  if (len <= 16) return '18px'
-  if (len <= 22) return '16px'
-  if (len <= 28) return '15px'
-  return '14px'
-}
 </script>
 
 <style scoped>
-.live {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 12px 20px 28px;
-}
+.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;
+  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; }
@@ -292,94 +263,51 @@ function nameFontSize(name='') {
 .panel--cards { padding: 12px; }
 
 /* empty */
-.empty {
-  padding: 14px; border: 1px dashed #D6DAE1; border-radius: 12px;
-  color: #6B7280; font-size: .92rem;
-}
+.empty { padding: 14px; border: 1px dashed #D6DAE1; border-radius: 12px; color: #6B7280; font-size: .92rem; }
 
 /* 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; }
-}
+.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; } }
 
 /* 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;
+  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;           /* green-600 */
-  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
-}
+.card--winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
 
 /* header layout: logo | title | balance */
-.card__header {
-  display: grid;
-  grid-template-columns: 52px minmax(0,1fr) auto;
-  align-items: center;
-  gap: 12px;
-}
+.card__header { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: start; gap: 12px; }
 
 /* logo */
-.card__logo {
-  width: 44px; height: 44px; border-radius: 999px;
-  background: #F3F4F6; display: grid; place-items: center;
-  overflow: hidden; position: relative;
-}
+.card__logo { width: 44px; height: 44px; border-radius: 999px; background: #F3F4F6; display: grid; place-items: center; overflow: hidden; position: relative; }
 .card__logo img { width: 100%; height: 100%; object-fit: contain; }
 .card__logo-fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
+.card__badge { position: absolute; right: -6px; top: -6px; font-size: 16px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
 
-/* crown badge for winner */
-.card__badge {
-  position: absolute;
-  right: -6px; top: -6px;
-  font-size: 16px;
-  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
-}
-
-/* title shrinks; never pushes number off */
+/* title: clamp to 2 lines so balance never overlaps */
 .card__title {
-  min-width: 0;
-  font-weight: 800; color: #0F172A;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-/* right number never shrinks */
-.card__balance {
-  white-space: nowrap;
-  font-weight: 900; color: #0F172A; font-size: 20px;
+  min-width: 0; font-weight: 800; color: #0F172A;
+  white-space: normal;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden; line-height: 1.15;
 }
 
-/* meta row */
-.card__meta {
-  display: flex; align-items: center; justify-content: space-between; gap: 10px;
-}
+/* right-side balance never shrinks */
+.card__balance { white-space: nowrap; font-weight: 900; color: #0F172A; font-size: 20px; }
+
+/* meta row + footer */
+.card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .card__sub { font-size: 12px; color: #5B6476; opacity: .85; }
 .ellipsize { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-/* footer row */
 .card__footer { margin-top: -2px; }
 
 /* pills */
-.pill {
-  padding: 4px 9px; border-radius: 999px; font-size: 12px;
-  font-weight: 800; line-height: 1; white-space: nowrap;
-  background: #EEF2F7; color: #0F172A;
-}
+.pill { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
 .pill.neg { background: #FEE2E2; color: #B91C1C; }
-.pill.pos { background: #DCFCE7; color: #166534; } /* green for winner/positive */
+.pill.pos { background: #DCFCE7; color: #166534; }
 .pill.pill--neutral { background: #EEF2F7; color: #0F172A; }
 </style>