Change settings

src/views/LiveView.vue

@@ -3,7 +3,6 @@
     <!-- Toolbar: assets + mode -->
     <header class="toolbar">
       <div class="toolbar__left">
-        <!-- If AssetTabs supports restricting options, this will remove MRNA from the UI -->
         <AssetTabs v-model="asset" :ordered-assets="orderedAssets" />
       </div>
       <div class="toolbar__right">
@@ -24,7 +23,7 @@
       </div>
     </header>
 
-    <!-- Chart panel -->
+    <!-- Chart -->
     <section class="panel panel--chart">
       <CompareChartE
         v-if="winnersForChart.length"
@@ -37,25 +36,52 @@
       </div>
     </section>
 
-    <!-- Winner cards -->
-    <section v-if="winnersSorted.length" class="panel panel--cards">
-      <div class="cards">
+    <!-- Cards: Buy & Hold + top 4 agents = 5 in a row -->
+    <section class="panel panel--cards" v-if="cards.length">
+      <div class="cards5">
         <div
-          v-for="row in winnersSorted"
-          :key="row.agent_name+'|'+row.asset+'|'+row.model"
-          class="card">
-          <div class="card__left">
-            <div class="card__title" :title="row.agent_name">{{ row.agent_name }}</div>
-            <div class="card__sub" :title="row.model">{{ row.model }}</div>
+          v-for="c in cards"
+          :key="c.key"
+          class="card"
+          :class="{ 'card--bh': c.kind==='bh' }"
+        >
+          <div class="card__logo">
+            <img v-if="c.logo" :src="c.logo" alt="" />
+            <div v-else class="card__logo-fallback"></div>
           </div>
-          <div class="card__right">
-            <div class="card__balance">{{ fmtUSD(row.balance) }}</div>
-            <div class="card__sub">
-              EOD {{
-                row.end_date
-                  ? new Date(row.end_date).toLocaleDateString()
-                  : (row.last_nav_ts ? new Date(row.last_nav_ts).toLocaleDateString() : '-')
-              }}
+
+          <div class="card__content">
+            <div class="card__row">
+              <div
+                class="card__title"
+                :style="{ fontSize: nameFontSize(c.title) }"
+                :title="c.title"
+              >
+                {{ c.title }}
+              </div>
+              <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
+            </div>
+
+            <div class="card__row card__meta">
+              <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>
+              </template>
+
+              <template v-else>
+                <div class="bh pill">Buy&nbsp;&amp;&nbsp;Hold</div>
+              </template>
+            </div>
+
+            <div class="card__row card__date">
+              <div class="card__sub">
+                EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '-' }}
+              </div>
+              <div class="spacer"></div>
             </div>
           </div>
         </div>
@@ -65,21 +91,42 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } 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: hide MRNA in tabs; drop Vanilla/Vinilla agents globally ----
-const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // ← MRNA removed
-const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive match
+// ------- config -------
+const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // MRNA removed
+const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
 
-// ---- state ----
-const mode = ref('usd') // 'usd' | 'pct'
+// Logos (hook up your real paths)
+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,
+  MSFT: new URL('../assets/images/assets_images/MSFT.png', import.meta.url).href,
+  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,
+}
+
+// ------- state -------
+const mode = ref('usd')
 const asset = ref('BTC')
-const agents = ref([])
+const rowsRef = ref([])
+const bhBalance = ref(null)     // baseline Buy & Hold final balance
+const bhDate = ref('')
 
-// ---- load once, copy rows from dataService ----
+// load table rows once
 onMounted(async () => {
   try {
     if (!dataService.loaded && !dataService.loading) {
@@ -88,35 +135,59 @@ onMounted(async () => {
   } catch (e) {
     console.error('LiveView: dataService.load failed', e)
   }
-  // Copy rows; we’ll filter “vanilla/vinilla” in computed getters below
-  agents.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+  rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+})
+
+// recompute Buy&Hold when asset changes
+watch(asset, async () => { await recomputeBH() }, { immediate: true })
 
-  // Safety: if current asset is MRNA (e.g., from persisted state), push to first allowed
-  if (!orderedAssets.includes(asset.value)) {
-    asset.value = orderedAssets[0]
+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 filteredRows = computed(() => {
-  // exclude agents named vanilla/vinilla, case-insensitive
-  return (agents.value || []).filter(r => {
+const filteredRows = computed(() =>
+  (rowsRef.value || []).filter(r => {
+    if (r.asset !== asset.value) return false
     const name = (r?.agent_name || '').toLowerCase()
     return !EXCLUDED_AGENT_NAMES.has(name)
   })
-})
+)
 
-// Best model per agent for the selected asset (by balance)
+// winners: best per agent (by balance)
 const winners = computed(() => {
-  const rows = filteredRows.value.filter(r => r.asset === asset.value)
   const byAgent = new Map()
-  for (const r of rows) {
+  for (const r of filteredRows.value) {
     const k = r.agent_name
     const cur = byAgent.get(k)
     if (!cur || score(r) > score(cur)) byAgent.set(k, r)
@@ -124,7 +195,7 @@ const winners = computed(() => {
   return [...byAgent.values()]
 })
 
-// Series selections for the chart
+// chart selections
 const winnersForChart = computed(() =>
   winners.value.map(w => ({
     agent_name: w.agent_name,
@@ -135,19 +206,65 @@ const winnersForChart = computed(() =>
   }))
 )
 
-// Bottom cards sorted by balance
-const winnersSorted = computed(() => [...winners.value].sort((a,b) => score(b) - score(a)))
+// 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',
+    title: 'Buy & Hold',
+    subtitle: asset.value,
+    balance: base,
+    date: baseDate,
+    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))
+      ? (r.balance - base)
+      : 0
+    const gapPct = (Number.isFinite(base) && base > 0)
+      ? (r.balance / base - 1)
+      : 0
+
+    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 || '',
+      logo: AGENT_LOGOS[r.agent_name] || null,
+      gapUsd, gapPct,
+    }
+  })
+
+  return [bhCard, ...agentCards]
+})
+
+// dynamic font size for long names
+function nameFontSize(name='') {
+  const len = name.length
+  if (len <= 14) return '20px'
+  if (len <= 20) return '18px'
+  if (len <= 26) return '16px'
+  return '15px'
+}
 </script>
 
 <style scoped>
-/* page container */
 .live {
   max-width: 1280px;
   margin: 0 auto;
   padding: 12px 20px 28px;
 }
 
-/* sticky toolbar */
+/* toolbar */
 .toolbar {
   position: sticky;
   top: 0;
@@ -162,84 +279,85 @@ const winnersSorted = computed(() => [...winners.value].sort((a,b) => score(b) -
 .toolbar__left { min-width: 0; }
 .toolbar__right { display: flex; align-items: center; gap: 10px; }
 
-/* $ / % toggle */
+/* $/% 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;
+  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;
-}
+.mode__btn.is-active { background: #0F172A; color: #fff; border-color: #0F172A; }
 
 /* panels */
-.panel {
-  background: #fff;
-  border: 1px solid #EDF0F4;
-  border-radius: 14px;
-}
+.panel { background: #fff; border: 1px solid #EDF0F4; border-radius: 14px; }
 .panel--chart { padding: 10px 10px 2px; }
 .panel--cards { padding: 12px; }
 
-/* empty state */
+/* empty */
 .empty {
-  padding: 14px;
-  border: 1px dashed #D6DAE1;
-  border-radius: 12px;
-  color: #6B7280;
-  font-size: .92rem;
+  padding: 14px; border: 1px dashed #D6DAE1; border-radius: 12px;
+  color: #6B7280; font-size: .92rem;
 }
 
-/* cards grid */
-.cards {
+/* 5 cards in a row */
+.cards5 {
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+  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 (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
-@media (min-width: 1280px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
 
 /* card */
 .card {
   display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
+  grid-template-columns: 52px 1fr;
   gap: 10px 12px;
-  padding: 14px 16px;
-  border: 1px solid #EEF1F6;
-  border-radius: 14px;
-  background: #fff;
-  box-shadow: 0 1px 2px rgba(0,0,0,.04);
+  align-items: center;
+  padding: 12px 14px;
+  border: 1px solid #EEF1F6; border-radius: 14px;
+  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04);
 }
-.card__title {
-  font-weight: 700;
-  color: #0F172A;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+.card--bh { outline: 2px dashed rgba(15,23,42,.08); }
+
+/* logo */
+.card__logo {
+  width: 44px; height: 44px; border-radius: 999px;
+  background: #F3F4F6; display: grid; place-items: center;
+  overflow: hidden;
+}
+.card__logo img { width: 100%; height: 100%; object-fit: contain; }
+.card__logo-fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
+
+/* content */
+.card__content { min-width: 0; }
+.card__row {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
 }
-.card__sub {
-  font-size: 12px;
-  color: #5B6476;
-  opacity: .8;
+.card__title {
+  font-weight: 800; color: #0F172A;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-.card__balance {
-  font-weight: 800;
-  font-size: 18px;
-  line-height: 1.1;
-  color: #0F172A;
-  text-align: right;
+.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; }
+
+.pill {
+  padding: 3px 8px; border-radius: 999px; font-size: 12px;
+  font-weight: 700; line-height: 1; white-space: nowrap;
+  background: #EEF2F7; color: #0F172A;
 }
-.card__left { min-width: 0; }
-.card__right { display: grid; gap: 4px; justify-items: end; }
+.pill.neg { background: #FEE2E2; color: #B91C1C; }
+.pill .muted { opacity: .7; }
+
+/* utility */
+.spacer { flex: 1 1 auto; }
+strong { font-weight: 700; }
 </style>