Change settings

src/views/LiveView.vue

@@ -35,7 +35,7 @@
           class="card"
           :class="{ 'card--bh': c.kind==='bh', 'card--winner': c.isWinner }"
         >
-          <!-- Header: logo | title (trunc) | balance (no-wrap) -->
+          <!-- HEADER (responsive) -->
           <div class="card__header">
             <div class="card__logo">
               <img v-if="c.logo" :src="c.logo" alt="" />
@@ -44,49 +44,49 @@
             </div>
 
             <div class="card__title-wrap">
-              <div class="card__title ellipsize" :title="c.title">{{ c.title }}</div>
-              <div class="card__subtitle ellipsize" :title="c.subtitle">{{ c.subtitle }}</div>
+              <div class="card__title" :title="c.title">{{ c.title }}</div>
+              <div class="card__subtitle" :title="c.subtitle">{{ c.subtitle }}</div>
             </div>
 
             <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
           </div>
 
-          <!-- Meta row: strategy/badge on the left, performance pill on the right -->
+          <!-- META -->
           <div class="card__meta">
             <div class="meta__left">
               <div v-if="c.kind==='bh'" class="pill pill--neutral">Buy&nbsp;&amp;&nbsp;Hold</div>
               <div v-else class="pill pill--outline">Strategy</div>
             </div>
-
             <div class="meta__right" v-if="c.kind==='agent' && c.gapUsd != null">
-              <div class="pill"
-                   :class="{ neg: c.gapUsd < 0 && !c.isWinner, pos: c.gapUsd >= 0 || c.isWinner }">
+              <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>
             </div>
-            <div class="meta__right" v-else>
-              <!-- spacer to keep height consistent -->
-            </div>
+            <div class="meta__right" v-else></div>
           </div>
 
-          <!-- Footer: EOD date -->
+          <!-- FOOTER -->
           <div class="card__footer">
             <div class="card__foot">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
           </div>
         </div>
       </div>
     </section>
+
+    <section v-else class="panel panel--cards">
+      <div class="empty">No card data yet for <strong>{{ asset }}</strong>.</div>
+    </section>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watchEffect } from 'vue'
+import { ref, computed, onMounted, watch, shallowRef } 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 —— */
+/* --- same helpers as chart --- */
 import { getAllDecisions } from '../lib/dataCache'
 import { readAllRawDecisions } from '../lib/idb'
 import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
@@ -97,13 +97,6 @@ import { computeBuyHoldEquity, computeStrategyEquity } from '../lib/perf'
 const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // (MRNA removed)
 const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
 
-// 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,
-  // 'TradeAgent': new URL('../assets/images/agents/trade.png', import.meta.url).href,
-  // 'HedgeFundAgent': new URL('../assets/images/agents/hedge.png', import.meta.url).href,
-}
 const ASSET_ICONS = {
   BTC: new URL('../assets/images/assets_images/BTC.png', import.meta.url).href,
   ETH: new URL('../assets/images/assets_images/ETH.png', import.meta.url).href,
@@ -111,16 +104,18 @@ const ASSET_ICONS = {
   BMRN: new URL('../assets/images/assets_images/BMRN.png', import.meta.url).href,
   TSLA: new URL('../assets/images/assets_images/TSLA.png', import.meta.url).href,
 }
+// optional agent logos (fill if you have them)
+// const AGENT_LOGOS = { DeepFundAgent: new URL('..', import.meta.url).href, ... }
+const AGENT_LOGOS = {}
 
-/* match the chart’s cutoff so numbers align */
-const ASSET_CUTOFF = { BTC: '2025-08-01' }
+const ASSET_CUTOFF = { BTC: '2025-08-01' } // match chart
 
 /* ---------- state ---------- */
 const mode = ref('usd') // 'usd' | 'pct'
 const asset = ref('BTC')
-const rowsRef = ref([])
-
-let allDecisions = [] // in-memory decisions for perf calc
+const rowsRef = ref([])        // leaderboard rows
+let allDecisions = []          // raw decisions for perf (chart parity)
+const cards = shallowRef([])   // rendered cards
 
 /* ---------- bootstrap ---------- */
 onMounted(async () => {
@@ -134,7 +129,6 @@ 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 {
@@ -145,14 +139,12 @@ onMounted(async () => {
 })
 
 /* ---------- helpers ---------- */
-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 signedMoney = (n) => `${n >= 0 ? '+' : '−'}${fmtUSD(Math.abs(n))}`
 const signedPct = (p) => `${(p >= 0 ? '+' : '−')}${Math.abs(p * 100).toFixed(2)}%`
+const score = (row) => (typeof row.balance === 'number' ? row.balance : -Infinity)
 
-/* Selected-asset rows (exclude vanilla/vinilla) */
+/* rows for selected asset (exclude vanilla/vinilla) */
 const filteredRows = computed(() =>
   (rowsRef.value || []).filter(r => {
     if (r.asset !== asset.value) return false
@@ -161,7 +153,7 @@ const filteredRows = computed(() =>
   })
 )
 
-/* Best model per agent (by balance) — still from leaderboard rows for picking winners */
+/* winners: best model per agent (by leaderboard balance) */
 const winners = computed(() => {
   const byAgent = new Map()
   for (const r of filteredRows.value) {
@@ -172,7 +164,7 @@ const winners = computed(() => {
   return [...byAgent.values()]
 })
 
-/* Chart selections built from winners */
+/* chart selections */
 const winnersForChart = computed(() =>
   winners.value.map(w => ({
     agent_name:  w.agent_name,
@@ -183,22 +175,29 @@ const winnersForChart = computed(() =>
   }))
 )
 
-/* ---------- PERF: compute B&H + strategy the same way as the chart ---------- */
+/* stable key to avoid identity churn */
+const winnersKey = computed(() => {
+  const sels = winnersForChart.value || []
+  return sels.map(s => `${s.agent_name}|${s.asset}|${s.model}|${s.strategy}|${(s.decision_ids?.length||0)}`).join('||')
+})
 
-/** build the ordered decision seq for a selection (same logic as chart) */
-function buildSeq(sel) {
-  const { agent_name: agent, asset, model } = sel
+/* ---------- PERF (chart parity) ---------- */
+async function buildSeq(sel) {
+  const { agent_name: agentName, asset: assetCode, 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)
+    : allDecisions.filter(r => r.agent_name === agentName && r.asset === assetCode && r.model === model)
 
-  seq.sort((a, b) => (a.date > b.date ? 1 : -1))
+  seq.sort((a,b) => (a.date > b.date ? 1 : -1))
 
-  const isCrypto = asset === 'BTC' || asset === 'ETH'
-  let filtered = isCrypto ? seq : filterRowsToNyseTradingDays(seq)
+  const isCrypto = assetCode === 'BTC' || assetCode === 'ETH'
+  let filtered = seq
+  if (!isCrypto) {
+    filtered = await filterRowsToNyseTradingDays(seq)
+  }
 
-  const cutoff = ASSET_CUTOFF[asset]
+  const cutoff = ASSET_CUTOFF[assetCode]
   if (cutoff) {
     const t0 = new Date(cutoff + 'T00:00:00Z')
     filtered = filtered.filter(r => new Date(r.date + 'T00:00:00Z') >= t0)
@@ -206,86 +205,82 @@ function buildSeq(sel) {
   return filtered
 }
 
-/** compute final equity & aligned B&H for a selection */
-function computeEquities(sel) {
-  const seq = buildSeq(sel)
+async function computeEquities(sel) {
+  const seq = await 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
-  }
+  return { date: seq[lastIdx].date, stratLast: stratY[lastIdx], bhLast: bhY[lastIdx] }
 }
 
-/* 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|${assetCode}`,
-    kind: 'bh',
-    title: 'Buy & Hold',
-    subtitle: assetCode,
-    balance: first.perf.bhLast,
-    date: first.perf.date,
-    logo: ASSET_ICONS[assetCode] || null,
-    isWinner: false
-  }
-
-  // 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|${sel.agent_name}|${sel.model}`,
-      kind: 'agent',
-      title: sel.agent_name,
-      subtitle: sel.model,
-      balance: perf.stratLast,
-      date: perf.date,
-      logo: AGENT_LOGOS[sel.agent_name] || null,
-      gapUsd, gapPct,
-      isWinner: false // set below
+/* build cards whenever winners/asset change */
+let computing = false
+watch(
+  () => [asset.value, winnersKey.value],
+  async () => {
+    if (computing) return
+    if (!winnersForChart.value.length) { cards.value = []; return }
+    computing = true
+    try {
+      const perfs = (await Promise.all(
+        winnersForChart.value.map(async sel => ({ sel, perf: await computeEquities(sel) }))
+      )).filter(x => x.perf)
+
+      if (!perfs.length) { cards.value = []; return }
+
+      // Buy & Hold card from the asset’s aligned BH series
+      const first = perfs[0]
+      const assetCode = first.sel.asset
+      const bhCard = {
+        key: `bh|${assetCode}`,
+        kind: 'bh',
+        title: 'Buy & Hold',
+        subtitle: assetCode,
+        balance: first.perf.bhLast,
+        date: first.perf.date,
+        logo: ASSET_ICONS[assetCode] || null,
+        isWinner: false
+      }
+
+      // Agent cards (gap vs BH)
+      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|${sel.agent_name}|${sel.model}`,
+          kind: 'agent',
+          title: sel.agent_name,
+          subtitle: sel.model,
+          balance: perf.stratLast,
+          date: perf.date,
+          logo: AGENT_LOGOS[sel.agent_name] || null,
+          gapUsd, gapPct,
+          isWinner: false
+        }
+      })
+
+      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)]
+    } catch (e) {
+      console.error('LiveView: compute cards failed', e)
+      cards.value = []
+    } finally {
+      computing = false
     }
-  })
-
-  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)]
-})
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped>
@@ -310,7 +305,6 @@ watchEffect(() => {
 /* empty */
 .empty { padding: 14px; border: 1px dashed #D6DAE1; border-radius: 12px; color: #6B7280; font-size: .92rem; }
 
-/* 5 cards in a row */
 /* grid of 5 cards */
 .cards5 { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
 @media (max-width: 1280px) { .cards5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@@ -349,7 +343,7 @@ watchEffect(() => {
   .card__header {
     grid-template-areas:
       "logo title balance"
-      "logo .     balance"; /* balance gets its own row when tight */
+      "logo .     balance"; /* lets balance move down, title gets more space */
   }
 }
 
@@ -364,8 +358,7 @@ watchEffect(() => {
 .card__title-wrap { grid-area: title; min-width: 0; display: grid; gap: 2px; }
 .card__title {
   font-weight: 800; color: #0F172A; line-height: 1.15;
-  /* two-line clamp to avoid 'Bu…' / 'Invest…' */
-  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* 2-line clamp */
   overflow: hidden;
   font-size: clamp(16px, 1.6vw, 19px);
 }
@@ -405,3 +398,4 @@ watchEffect(() => {
 .pill.neg { background: #FEE2E2; color: #B91C1C; }
 .pill--neutral { background: #EEF2F7; color: #0F172A; }
 .pill--outline { background: transparent; color: #475569; border: 1px solid #E5E7EB; padding: 3px 8px; }
+</style>