Change settings

src/views/LiveView.vue

@@ -91,20 +91,16 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import AssetTabs from '../components/AssetTabs.vue'
 import CompareChartE from '../components/CompareChartE.vue'
 import { dataService } from '../lib/dataService'
-import { getAllDecisions } from '../lib/dataCache'
-import { readAllRawDecisions } from '../lib/idb'
-import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
-import { computeBuyHoldEquity } from '../lib/perf'
 
 /* ---------- config ---------- */
 const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // MRNA removed
 const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
 
-// Plug in your real logos here
+// Plug in 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,
@@ -123,8 +119,6 @@ const ASSET_ICONS = {
 const mode = ref('usd') // 'usd' | 'pct'
 const asset = ref('BTC')
 const rowsRef = ref([])
-const bhBalance = ref(null) // Buy&Hold final balance (100k start)
-const bhDate = ref('')
 
 /* ---------- bootstrap ---------- */
 onMounted(async () => {
@@ -157,6 +151,27 @@ const filteredRows = computed(() =>
   })
 )
 
+/* Baseline (Buy & Hold) directly from tableRows */
+const baselineRow = computed(() => {
+  const rows = (rowsRef.value || []).filter(r => r.asset === asset.value)
+
+  // heuristics: prefer explicit strategy markers, else name/model contains buy+hold
+  const candidates = rows.filter(r => {
+    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 bhBalance = computed(() => baselineRow.value?.balance ?? null)
+const bhDate    = computed(() => baselineRow.value?.end_date || baselineRow.value?.last_nav_ts || '')
+
 /* Best model per agent (by balance) */
 const winners = computed(() => {
   const byAgent = new Map()
@@ -179,42 +194,6 @@ const winnersForChart = computed(() =>
   }))
 )
 
-/* === Buy&Hold: recompute from the SAME sequence the chart uses === */
-watch(
-  () => winnersForChart.value,
-  async (list) => { await recomputeBHFromSelection(list) },
-  { immediate: true, deep: true }
-)
-
-async function recomputeBHFromSelection(list) {
-  const sel = Array.isArray(list) && list.length ? list[0] : null
-  if (!sel) { bhBalance.value = null; bhDate.value = ''; return }
-
-  // fetch decisions once
-  let all = getAllDecisions() || []
-  if (!all.length) {
-    try { const cached = await readAllRawDecisions(); if (cached?.length) all = cached } catch {}
-  }
-
-  const ids = Array.isArray(sel.decision_ids) ? sel.decision_ids : []
-  let seq = ids.length
-    ? all.filter(r => ids.includes(r.id))
-    : all.filter(r => r.agent_name === sel.agent_name && r.asset === sel.asset && r.model === sel.model)
-  seq.sort((a,b) => (a.date > b.date ? 1 : -1))
-
-  const isCrypto = sel.asset === 'BTC' || sel.asset === 'ETH'
-  if (!isCrypto) seq = await filterRowsToNyseTradingDays(seq)
-
-  const bh = computeBuyHoldEquity(seq, 100000) || []
-  if (bh.length) {
-    bhBalance.value = bh[bh.length - 1]
-    bhDate.value = seq[seq.length - 1]?.date || ''
-  } else {
-    bhBalance.value = null
-    bhDate.value = ''
-  }
-}
-
 /* Build 5 cards: Buy&Hold + top 4 agents */
 const cards = computed(() => {
   const base = Number(bhBalance.value ?? 100000)
@@ -253,7 +232,7 @@ const cards = computed(() => {
   return [bhCard, ...agentCards]
 })
 
-/* Dynamic font size for long names (no clipping) */
+/* Dynamic font size for long names (no clipping). */
 function nameFontSize(name='') {
   const len = name.length
   if (len <= 12) return '20px'
@@ -348,12 +327,20 @@ function nameFontSize(name='') {
   display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
 }
 
-/* title shrinks (no ellipsis) */
+/* title shrinks and never pushes the number off the card */
 .card__title {
-  font-weight: 800; color: #0F172A; white-space: nowrap;
+  flex: 1 1 auto;     /* take available space */
+  min-width: 0;       /* allow shrink */
+  font-weight: 800; color: #0F172A;
+  white-space: nowrap;
+}
+
+.card__balance {
+  flex: 0 0 auto;     /* never shrink */
+  white-space: nowrap;
+  font-weight: 900; color: #0F172A; font-size: 20px;
 }
 
-.card__balance { font-weight: 900; color: #0F172A; font-size: 20px; }
 .card__sub { font-size: 12px; color: #5B6476; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .card__meta { margin-top: 4px; align-items: center; }
 .card__date { margin-top: 2px; }