Change settings

src/views/LiveView.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="live">
+    <!-- Toolbar: assets + mode -->
     <header class="toolbar">
       <div class="toolbar__left">
         <AssetTabs v-model="asset" :ordered-assets="orderedAssets" />
@@ -12,46 +13,74 @@
       </div>
     </header>
 
+    <!-- Chart -->
     <section class="panel panel--chart">
-      <CompareChartE v-if="winnersForChart.length" :selected="winnersForChart" :visible="true" :mode="mode" />
-      <div v-else class="empty">No data for <strong>{{ asset }}</strong> yet. Check Supabase runs or try another asset.</div>
+      <CompareChartE
+        v-if="winnersForChart.length"
+        :selected="winnersForChart"
+        :visible="true"
+        :mode="mode"
+      />
+      <div v-else class="empty">
+        No data for <strong>{{ asset }}</strong> yet. Check Supabase runs or try another asset.
+      </div>
     </section>
 
+    <!-- F1 Scoreboard Cards -->
     <section class="panel panel--cards" v-if="cards.length">
-      <div class="cards5">
-        <div v-for="c in cards" :key="c.key" class="card" :class="{ 'card--bh': c.kind==='bh', 'card--winner': c.isWinner }">
-          <div class="card__header">
-            <div class="card__logo">
+      <div class="cards-grid-f1">
+        <article
+          v-for="c in cards"
+          :key="c.key"
+          class="card-f1"
+          :class="{ winner: c.isWinner, bh: c.kind==='bh', neg: (c.gapUsd ?? 0) < 0, pos: (c.gapUsd ?? 0) >= 0 }"
+          :style="{ '--bar': (c.barPct ?? 0) + '%'}"
+        >
+          <!-- Rank / BH badge -->
+          <div v-if="c.rank" class="rank">P{{ c.rank }}</div>
+          <div v-else-if="c.kind==='bh'" class="rank bh-badge">B&H</div>
+          <span v-if="c.isWinner" class="crown" aria-label="Top performer">👑</span>
+
+          <!-- Header: logo + names -->
+          <header class="head">
+            <div class="logo">
               <img v-if="c.logo" :src="c.logo" alt="" />
-              <div v-else class="card__logo-fallback"></div>
-              <span v-if="c.isWinner" class="card__badge" aria-label="Top performer">👑</span>
+              <div v-else class="logo__fallback" aria-hidden="true"></div>
             </div>
-
-            <div class="card__title-wrap">
-              <div class="card__title" :title="c.title">{{ c.title }}</div>
-              <div class="card__subtitle" :title="c.subtitle">{{ c.subtitle }}</div>
+            <div class="names">
+              <div class="agent">{{ c.kind==='bh' ? 'Buy & Hold' : c.title }}</div>
+              <div class="model">{{ c.subtitle }}</div>
             </div>
+          </header>
 
-            <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
+          <!-- Net value row -->
+          <div class="net">
+            <div class="net__label">Net value</div>
+            <div class="net__value">{{ fmtUSD(c.balance) }}</div>
           </div>
 
-          <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 }">
-                <span v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</span>
-                <span v-else>{{ signedPct(c.gapPct) }}</span>
-              </div>
-            </div>
+          <!-- Performance bar (vs B&H) -->
+          <div class="bar" :class="{ neg: (c.gapUsd ?? 0) < 0, pos: (c.gapUsd ?? 0) >= 0 }">
+            <span :style="{ width: (c.barPct ?? 0) + '%' }"></span>
           </div>
 
-          <div class="card__footer">
-            <div class="card__foot">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
+          <!-- Bottom row: chips + EOD -->
+          <div class="bottom">
+            <div class="chips">
+              <span class="chip" :class="{ pos: profitOf(c) >= 0, neg: profitOf(c) < 0 }">
+                {{ signedMoney(profitOf(c)) }}
+              </span>
+              <span class="chip" :class="{ pos: (c.gapUsd ?? 0) >= 0, neg: (c.gapUsd ?? 0) < 0 }">
+                <template v-if="c.kind==='agent'">
+                  <template v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</template>
+                  <template v-else>{{ signedPct(c.gapPct) }}</template>
+                </template>
+                <template v-else>—</template>
+              </span>
+            </div>
+            <div class="eod">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
           </div>
-        </div>
+        </article>
       </div>
     </section>
 
@@ -66,14 +95,17 @@ 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'
+
+/* --- same helpers as chart --- */
 import { getAllDecisions } from '../lib/dataCache'
 import { readAllRawDecisions } from '../lib/idb'
 import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
 import { STRATEGIES } from '../lib/strategies'
 import { computeBuyHoldEquity, computeStrategyEquity } from '../lib/perf'
 
-const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA']
-const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla'])
+/* ---------- config ---------- */
+const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // (MRNA removed)
+const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
 
 const ASSET_ICONS = {
   BTC: new URL('../assets/images/assets_images/BTC.png', import.meta.url).href,
@@ -85,20 +117,20 @@ const ASSET_ICONS = {
 const AGENT_LOGOS = {}
 const ASSET_CUTOFF = { BTC: '2025-08-01' }
 
+/* ---------- state ---------- */
 const mode = ref('usd')
 const asset = ref('BTC')
 const rowsRef = ref([])
 let allDecisions = []
 const cards = shallowRef([])
 
+/* ---------- bootstrap ---------- */
 onMounted(async () => {
   try {
     if (!dataService.loaded && !dataService.loading) {
       await dataService.load(false)
     }
-  } catch (e) {
-    console.error('LiveView: dataService.load failed', e)
-  }
+  } catch (e) { console.error('LiveView: dataService.load failed', e) }
   rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
   if (!orderedAssets.includes(asset.value)) asset.value = orderedAssets[0]
 
@@ -111,11 +143,14 @@ onMounted(async () => {
   }
 })
 
+/* ---------- 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 ? '+' : '−')}${Math.abs(p * 100).toFixed(2)}%`
 const score = (row) => (typeof row.balance === 'number' ? row.balance : -Infinity)
+const profitOf = (c) => (typeof c?.profitUsd === 'number' ? c.profitUsd : ((c?.balance ?? 0) - 100000))
 
+/* rows for selected asset (exclude vanilla/vinilla) */
 const filteredRows = computed(() =>
   (rowsRef.value || []).filter(r => {
     if (r.asset !== asset.value) return false
@@ -124,6 +159,7 @@ const filteredRows = computed(() =>
   })
 )
 
+/* winners: best model per agent (by leaderboard balance) */
 const winners = computed(() => {
   const byAgent = new Map()
   for (const r of filteredRows.value) {
@@ -134,21 +170,24 @@ const winners = computed(() => {
   return [...byAgent.values()]
 })
 
+/* 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
   }))
 )
 
+/* 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('||')
 })
 
+/* ---------- 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 : []
@@ -177,13 +216,14 @@ async function computeEquities(sel) {
   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 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] }
 }
 
+/* build cards whenever winners/asset change */
 let computing = false
 watch(
   () => [asset.value, winnersKey.value],
@@ -198,6 +238,7 @@ watch(
 
       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 = {
@@ -208,12 +249,19 @@ watch(
         balance: first.perf.bhLast,
         date: first.perf.date,
         logo: ASSET_ICONS[assetCode] || null,
-        isWinner: false
+        profitUsd: (first.perf.bhLast ?? 0) - 100000,
+        gapUsd: 0,
+        gapPct: 0,
+        isWinner: false,
+        rank: null,
+        barPct: 0
       }
 
+      // 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
+        const profitUsd = (perf.stratLast ?? 0) - 100000
         return {
           key: `agent|${sel.agent_name}|${sel.model}`,
           kind: 'agent',
@@ -223,52 +271,106 @@ watch(
           date: perf.date,
           logo: AGENT_LOGOS[sel.agent_name] || null,
           gapUsd, gapPct,
-          isWinner: false
+          profitUsd,
+          isWinner: false,
+          rank: null,
+          barPct: 0
         }
       })
 
-      const maxBal = Math.max(...agentCards.map(c => c.balance ?? -Infinity))
-      agentCards.forEach(c => { c.isWinner = c.balance === maxBal })
+      // Rank by balance (agents only)
+      agentCards.sort((a,b) => (b.balance ?? -Infinity) - (a.balance ?? -Infinity))
+      agentCards.forEach((c, i) => { c.rank = i + 1 })
 
-      cards.value = [bhCard, ...agentCards.sort((a,b) => b.balance - a.balance).slice(0,4)]
+      // Winner flag
+      if (agentCards.length) agentCards[0].isWinner = true
+
+      // Perf bar width scaled to max |gapUsd|
+      const maxAbsGap = Math.max(1, ...agentCards.map(c => Math.abs(c.gapUsd ?? 0)))
+      agentCards.forEach(c => { c.barPct = Math.max(3, Math.round((Math.abs(c.gapUsd ?? 0) / maxAbsGap) * 100)) })
+
+      // Build final list: BH first, then agents in rank order
+      cards.value = [bhCard, ...agentCards].slice(0,5)
     } catch (e) {
       console.error('LiveView: compute cards failed', e)
       cards.value = []
-    } finally {
-      computing = false
-    }
+    } finally { computing = false }
   },
   { immediate: true }
 )
 </script>
 
 <style scoped>
-.live { max-width: 1280px; margin: 0 auto; padding: 12px 20px 28px; }
-.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; }
-.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; transition: all .12s ease; }
-.mode__btn:hover { transform: translateY(-1px); }
-.mode__btn.is-active { background: #0F172A; color: #fff; border-color: #0F172A; }
-.panel { background: #fff; border: 1px solid #EDF0F4; border-radius: 14px; }
+.live { max-width: 1280px; margin: 0 auto; padding: 12px 20px 28px; background: #ffffff; }
+
+/* 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: #ffffff; color: #0f172a; border-bottom: 1px solid #E7ECF3; }
+.mode__btn { height: 30px; min-width: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid #D7DDE7; background: #ffffff; font-weight: 700; color: #0f172a; }
+.mode__btn.is-active { background: #0f172a; color: #ffffff; border-color: #0f172a; }
+
+/* panels */
+.panel { background: #ffffff; border: 1px solid #E7ECF3; border-radius: 14px; }
 .panel--chart { padding: 10px 10px 2px; }
 .panel--cards { padding: 12px; }
-.empty { padding: 14px; border: 1px dashed #D6DAE1; border-radius: 12px; color: #6B7280; font-size: .92rem; }
-.cards5 { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
-.card { display: grid; grid-template-rows: auto auto auto; gap: 10px; padding: 12px 14px; border: 1px solid #EEF1F6; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
-.card--bh { outline: 2px dashed rgba(15,23,42,.08); }
-.card--winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
-.card__header { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; column-gap: 12px; }
-.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__badge { position: absolute; right: -6px; top: -6px; font-size: 16px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
-.card__title { font-weight: 800; color: #0F172A; line-height: 1.15; font-size: clamp(16px, 1.6vw, 19px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.card__subtitle { font-size: 12px; color: #5B6476; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.card__balance { white-space: nowrap; font-weight: 900; color: #0F172A; font-size: clamp(18px, 1.9vw, 22px); align-self: start; overflow: hidden; text-overflow: ellipsis; }
-.card__meta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
-.card__footer { font-size: 12px; color: #5B6476; opacity: .85; }
-.pill { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
-.pill.pos { background: #DCFCE7; color: #166534; }
-.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; }
+
+/* empty */
+.empty { padding: 14px; border: 1px dashed #D7DDE7; border-radius: 12px; color: #6B7280; font-size: .92rem; background: #ffffff; }
+
+/* GRID */
+.cards-grid-f1 { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0,1fr)); }
+@media (max-width: 1400px) { .cards-grid-f1 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
+@media (max-width: 1100px) { .cards-grid-f1 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
+@media (max-width: 900px)  { .cards-grid-f1 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
+@media (max-width: 640px)  { .cards-grid-f1 { grid-template-columns: 1fr; } }
+
+/* F1 Card */
+.card-f1 {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto auto auto; /* head, net, bottom */
+  gap: 10px;
+  padding: 16px 16px 18px;
+  min-height: 210px;
+  border-radius: 14px;
+  background: linear-gradient(145deg,#ffffff,#fafbfd 55%,#ffffff 100%);
+  border: 1px solid #E7ECF3;
+  box-shadow: 0 1px 2px rgba(16,24,40,.03), 0 4px 12px rgba(16,24,40,.04);
+  color: #0f172a;
+  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
+}
+.card-f1:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,24,40,.08); border-color: #D9E2EF; }
+.card-f1.winner { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.18), 0 10px 26px rgba(16,24,40,.10); }
+.card-f1.bh { border-style: dashed; opacity: 1; }
+
+/* Rank / Crown */
+.rank { position: absolute; top: 10px; left: 12px; font-weight: 900; font-size: 18px; color: rgba(15,23,42,.30); letter-spacing: .04em; }
+.rank.bh-badge { font-size: 12px; background: rgba(15,23,42,.06); padding: 2px 6px; border-radius: 6px; color: #4b5563; }
+.crown { position: absolute; top: 12px; right: 12px; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); }
+
+/* Head */
+.head { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 10px; }
+.logo { width: 40px; height: 40px; border-radius: 10px; background: #f3f4f6; display: grid; place-items: center; overflow: hidden; border: 1px solid #E7ECF3; }
+.logo img { width: 100%; height: 100%; object-fit: contain; }
+.logo__fallback { width: 60%; height: 60%; border-radius: 6px; background: #e5e7eb; }
+.names { min-width: 0; }
+.agent { font-size: 16px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.model { font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* Net row */
+.net { display: grid; grid-template-columns: 1fr auto; align-items: end; }
+.net__label { font-size: 12px; color: #6b7280; }
+.net__value { font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; letter-spacing: -.01em; color: #0f172a; }
+
+/* Bar vs B&H */
+.bar { height: 6px; border-radius: 999px; background: #F2F4F8; overflow: hidden; border: 1px solid #E7ECF3; }
+.bar span { display: block; height: 100%; background: linear-gradient(90deg,#16a34a,#22c55e); width: var(--bar, 40%); transition: width .5s ease; }
+.bar.neg span { background: linear-gradient(90deg,#ef4444,#dc2626); }
+
+/* Bottom */
+.bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
+.chips { display: inline-flex; gap: 8px; }
+.chip { font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: #F6F8FB; color: #0f172a; border: 1px solid #E7ECF3; }
+.chip.pos { color: #0e7a3a; background: #E9F7EF; border-color: #d7f0e0; }
+.chip.neg { color: #B91C1C; background: #FBEAEA; border-color: #F3DADA; }
+.eod { font-size: 12px; color: #6b7280; }
 </style>