Change settings

src/views/LiveView.vue

@@ -14,52 +14,44 @@
 
     <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.</div>
+      <div v-else class="empty">No data for <strong>{{ asset }}</strong> yet. Check Supabase runs or try another asset.</div>
     </section>
 
     <section class="panel panel--cards" v-if="cards.length">
-      <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' }" :style="{ '--bar': (c.barPct ?? 0) + '%' }">
-          <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">👑</span>
-
-          <header class="head">
-            <div class="logo">
+      <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">
               <img v-if="c.logo" :src="c.logo" alt="" />
-              <div v-else class="logo__fallback"></div>
+              <div v-else class="card__logo-fallback"></div>
+              <span v-if="c.isWinner" class="card__badge" aria-label="Top performer">👑</span>
             </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="net">
-            <div class="net__label">Net value</div>
-            <div class="net__value">{{ fmtUSD(c.balance) }}</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>
 
-          <div class="bar" :class="{ neg: (c.gapUsd ?? 0) < 0, pos: (c.gapUsd ?? 0) >= 0 }">
-            <span :style="{ width: (c.barPct ?? 0) + '%' }"></span>
+            <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
           </div>
 
-          <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 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="footer-row">
-              <div class="eod">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</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>
           </div>
-        </article>
+
+          <div class="card__footer">
+            <div class="card__foot">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
+          </div>
+        </div>
       </div>
     </section>
 
@@ -81,6 +73,8 @@ 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'])
+
 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,
@@ -88,6 +82,9 @@ 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,
 }
+const AGENT_LOGOS = {}
+const ASSET_CUTOFF = { BTC: '2025-08-01' }
+
 const mode = ref('usd')
 const asset = ref('BTC')
 const rowsRef = ref([])
@@ -96,39 +93,182 @@ const cards = shallowRef([])
 
 onMounted(async () => {
   try {
-    if (!dataService.loaded && !dataService.loading) await dataService.load(false)
-  } catch (e) { console.error(e) }
-  rowsRef.value = dataService.tableRows || []
+    if (!dataService.loaded && !dataService.loading) {
+      await dataService.load(false)
+    }
+  } 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]
+
+  allDecisions = getAllDecisions() || []
+  if (!allDecisions.length) {
+    try {
+      const cached = await readAllRawDecisions()
+      if (cached?.length) allDecisions = cached
+    } catch {}
+  }
 })
 
 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 profitOf = (c) => (typeof c?.profitUsd === 'number' ? c.profitUsd : ((c?.balance ?? 0) - 100000))
+const signedPct = (p) => `${(p >= 0 ? '+' : '−')}${Math.abs(p * 100).toFixed(2)}%`
+const score = (row) => (typeof row.balance === 'number' ? row.balance : -Infinity)
+
+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)
+  })
+)
+
+const winners = computed(() => {
+  const byAgent = new Map()
+  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)
+  }
+  return [...byAgent.values()]
+})
+
+const winnersForChart = computed(() =>
+  winners.value.map(w => ({
+    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
+  }))
+)
+
+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('||')
+})
+
+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 === agentName && r.asset === assetCode && r.model === model)
+
+  seq.sort((a,b) => (a.date > b.date ? 1 : -1))
+
+  const isCrypto = assetCode === 'BTC' || assetCode === 'ETH'
+  let filtered = seq
+  if (!isCrypto) filtered = await filterRowsToNyseTradingDays(seq)
+
+  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)
+  }
+  return filtered
+}
+
+async function computeEquities(sel) {
+  const seq = await buildSeq(sel)
+  if (!seq.length) return null
+
+  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] }
+}
+
+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 }
+
+      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
+      }
+
+      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 })
+
+      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
+    }
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped>
-.live { background: #ffffff; max-width: 1280px; margin: 0 auto; padding: 12px 20px 28px; }
-.toolbar { background: #ffffff; }
-.cards-grid-f1 { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0,1fr)); }
-.card-f1 { background: #fff; border: 1px solid #E7ECF3; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.05); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
-.net__value { font-size: clamp(18px, 2vw, 26px); font-weight: 900; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.bottom { display: flex; flex-direction: column; gap: 6px; }
-.footer-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #6b7280; margin-top: 4px; }
-/* Greyed B&H to de-emphasize */
-.card-f1.bh {
-  opacity: .58;
-  filter: grayscale(1) saturate(.2);
-  border-style: dashed;
-  border-color: #E5E7EB;
-  box-shadow: none;
-}
-.card-f1.bh .agent,
-.card-f1.bh .model,
-.card-f1.bh .net__label,
-.card-f1.bh .net__value,
-.card-f1.bh .chip,
-.card-f1.bh .eod { color: #9AA4B2; }
-.card-f1.bh .chip { background: #F1F5F9; border-color: #E2E8F0; }
-.card-f1.bh .logo { background: #F5F7FA; border-color: #E5E7EB; }
+.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; }
+.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; }
 </style>