Change settings

src/views/LiveView.vue

@@ -36,7 +36,7 @@
       </div>
     </section>
 
-    <!-- Cards: Buy & Hold + top 4 agents = 5 in a row -->
+    <!-- Cards: Buy & Hold + top 4 agents -->
     <section class="panel panel--cards" v-if="cards.length">
       <div class="cards5">
         <div
@@ -66,14 +66,14 @@
               <div class="card__sub" :title="c.subtitle">{{ c.subtitle }}</div>
 
               <template v-if="c.kind==='agent'">
-                <div class="gap pill" :class="{ neg: c.gapUsd < 0 }">
-                  <span>{{ signedMoney(c.gapUsd) }}</span>
-                  <span class="muted"> ({{ signedPct(c.gapPct) }})</span>
+                <div class="pill" :class="{ neg: c.gapUsd < 0 }">
+                  <span v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</span>
+                  <span v-else>{{ signedPct(c.gapPct) }}</span>
                 </div>
               </template>
 
               <template v-else>
-                <div class="bh pill">Buy&nbsp;&amp;&nbsp;Hold</div>
+                <div class="pill">Buy&nbsp;&amp;&nbsp;Hold</div>
               </template>
             </div>
 
@@ -100,11 +100,11 @@ import { readAllRawDecisions } from '../lib/idb'
 import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
 import { computeBuyHoldEquity } from '../lib/perf'
 
-// ------- config -------
+/* ---------- config ---------- */
 const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // MRNA removed
 const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
 
-// Logos (hook up your real paths)
+// Plug in your real logos here
 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,
@@ -119,14 +119,14 @@ const ASSET_ICONS = {
   TSLA: new URL('../assets/images/assets_images/TSLA.png', import.meta.url).href,
 }
 
-// ------- state -------
-const mode = ref('usd')
+/* ---------- state ---------- */
+const mode = ref('usd') // 'usd' | 'pct'
 const asset = ref('BTC')
 const rowsRef = ref([])
-const bhBalance = ref(null)     // baseline Buy & Hold final balance
+const bhBalance = ref(null) // Buy&Hold final balance (100k start)
 const bhDate = ref('')
 
-// load table rows once
+/* ---------- bootstrap ---------- */
 onMounted(async () => {
   try {
     if (!dataService.loaded && !dataService.loading) {
@@ -136,46 +136,19 @@ onMounted(async () => {
     console.error('LiveView: dataService.load failed', e)
   }
   rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+  if (!orderedAssets.includes(asset.value)) asset.value = orderedAssets[0]
 })
 
-// recompute Buy&Hold when asset changes
-watch(asset, async () => { await recomputeBH() }, { immediate: true })
-
-async function recomputeBH(){
-  // Build a clean sequence of decisions for the selected asset, then compute Buy&Hold equity.
-  // We'll reuse the longest sequence among available decisions for that asset.
-  let all = getAllDecisions() || []
-  if (!all.length) {
-    try { const cached = await readAllRawDecisions(); if (cached?.length) all = cached } catch {}
-  }
-  let seq = all.filter(r => r.asset === asset.value)
-  seq.sort((a,b) => (a.date > b.date ? 1 : -1))
-
-  // Filter to trading days (NYSE for equities; pass-through for BTC/ETH)
-  const isCrypto = asset.value === 'BTC' || asset.value === '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 = ''
-  }
-}
-
-// helpers
-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 ? '+' : '')}${Number(p * 100).toFixed(2)}%`
-
+/* ---------- 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)}%`
+
+/* Filter rows: selected asset, exclude “vanilla/vinilla” */
 const filteredRows = computed(() =>
   (rowsRef.value || []).filter(r => {
     if (r.asset !== asset.value) return false
@@ -184,7 +157,7 @@ const filteredRows = computed(() =>
   })
 )
 
-// winners: best per agent (by balance)
+/* Best model per agent (by balance) */
 const winners = computed(() => {
   const byAgent = new Map()
   for (const r of filteredRows.value) {
@@ -195,23 +168,58 @@ const winners = computed(() => {
   return [...byAgent.values()]
 })
 
-// chart selections
+/* Chart selections */
 const winnersForChart = computed(() =>
   winners.value.map(w => ({
-    agent_name: w.agent_name,
-    asset:      w.asset,
-    model:      w.model,
-    strategy:   w.strategy,
+    agent_name:  w.agent_name,
+    asset:       w.asset,
+    model:       w.model,
+    strategy:    w.strategy,
     decision_ids: Array.isArray(w.decision_ids) ? w.decision_ids : undefined
   }))
 )
 
-// build 5 cards: Buy & Hold + top 4 agents
+/* === 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)
   const baseDate = bhDate.value
 
-  // Buy & Hold card
   const bhCard = {
     key: `bh|${asset.value}`,
     kind: 'bh',
@@ -222,7 +230,6 @@ const cards = computed(() => {
     logo: ASSET_ICONS[asset.value] || null,
   }
 
-  // Top 4 agents
   const top = [...winners.value].sort((a,b) => score(b) - score(a)).slice(0, 4)
   const agentCards = top.map(r => {
     const gapUsd = (typeof r.balance === 'number' && Number.isFinite(base))
@@ -231,7 +238,6 @@ const cards = computed(() => {
     const gapPct = (Number.isFinite(base) && base > 0)
       ? (r.balance / base - 1)
       : 0
-
     return {
       key: `agent|${r.agent_name}|${r.model}`,
       kind: 'agent',
@@ -247,13 +253,14 @@ const cards = computed(() => {
   return [bhCard, ...agentCards]
 })
 
-// dynamic font size for long names
+/* Dynamic font size for long names (no clipping) */
 function nameFontSize(name='') {
   const len = name.length
-  if (len <= 14) return '20px'
-  if (len <= 20) return '18px'
-  if (len <= 26) return '16px'
-  return '15px'
+  if (len <= 12) return '20px'
+  if (len <= 16) return '18px'
+  if (len <= 22) return '16px'
+  if (len <= 28) return '15px'
+  return '14px'
 }
 </script>
 
@@ -340,10 +347,12 @@ function nameFontSize(name='') {
 .card__row {
   display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
 }
+
+/* title shrinks (no ellipsis) */
 .card__title {
-  font-weight: 800; color: #0F172A;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-weight: 800; color: #0F172A; white-space: nowrap;
 }
+
 .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; }
@@ -355,7 +364,6 @@ function nameFontSize(name='') {
   background: #EEF2F7; color: #0F172A;
 }
 .pill.neg { background: #FEE2E2; color: #B91C1C; }
-.pill .muted { opacity: .7; }
 
 /* utility */
 .spacer { flex: 1 1 auto; }