Change settings

src/components/HeaderOpen.vue

@@ -1,138 +1,378 @@
 <template>
-  <header class="arena-header">
-    <div class="bar">
-      <!-- Title (left) -->
-      <button class="arena-title" aria-label="Asset Market Arena" @click="navigateTo('/')">
-        Asset Market Arena
-      </button>
-
-      <!-- Tabs (right) -->
-      <nav class="menu" aria-label="Primary">
-        <span
-          class="menu-item"
-          :class="{ active: isActive('/live') }"
-          @click="navigateTo('/live')"
-        >Live Arena</span>
-
-        <span
-          class="menu-item"
-          :class="{ active: isActive('/leaderboard') }"
-          @click="navigateTo('/leaderboard')"
-        >Leaderboard</span>
-
-        <span
-          class="menu-item"
-          :class="{ active: isActive('/add-asset') }"
-          @click="navigateTo('/add-asset')"
-        >Agent Arena</span>
-      </nav>
-    </div>
-
-    <!-- AMA gradient hairline -->
-    <div class="ama-gradient-rule" />
-  </header>
+  <div class="live">
+    <!-- Toolbar (assets + mode) -->
+    <header class="toolbar">
+      <div class="toolbar__left">
+        <AssetTabs v-model="asset" :ordered-assets="orderedAssets" />
+      </div>
+      <div class="toolbar__right">
+        <div class="mode">
+          <button class="mode__btn" :class="{ 'is-active': mode==='usd' }" @click="mode='usd'">$</button>
+          <button class="mode__btn" :class="{ 'is-active': mode==='pct' }" @click="mode='pct'">%</button>
+        </div>
+      </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>
+    </section>
+
+    <!-- Podium + Cards -->
+    <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="{
+            bh: c.kind==='bh',
+            neg: (c.gapUsd ?? 0) < 0,
+            pos: (c.gapUsd ?? 0) >= 0,
+            gold: c.rank === 1,
+            silver: c.rank === 2,
+            bronze: c.rank === 3
+          }"
+          :style="{ '--bar': (c.barPct ?? 0) + '%'}"
+        >
+          <!-- Podium ribbon (no crown) -->
+          <div v-if="c.rank && c.rank <= 3" class="podium-ribbon" :data-rank="c.rank"></div>
+
+          <!-- Header: logo + names -->
+          <header class="head">
+            <div class="logo">
+              <img v-if="c.logo" :src="c.logo" alt="" />
+              <div v-else class="logo__fallback" aria-hidden="true"></div>
+            </div>
+            <div class="names">
+              <div class="agent">{{ c.kind==='bh' ? 'Buy & Hold' : c.title }}</div>
+              <div class="model">{{ c.subtitle }}</div>
+            </div>
+          </header>
+
+          <!-- Net value row -->
+          <div class="net">
+            <div class="net__label">Net Value</div>
+            <div class="net__value">{{ fmtUSD(c.balance) }}</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>
+
+          <!-- 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>
+        </article>
+      </div>
+    </section>
+
+    <section v-else class="panel panel--cards">
+      <div class="empty">No card data yet for <strong>{{ asset }}</strong>.</div>
+    </section>
+  </div>
 </template>
 
-<script>
-export default {
-  name: 'ArenaHeader',
-  methods: {
-    navigateTo(path) { this.$router.push(path) },
-    isActive(path)    { return this.$route?.path?.startsWith(path) }
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch, shallowRef } from 'vue'
+import AssetTabs from '../components/AssetTabs.vue'
+import CompareChartE from '../components/CompareChartE.vue'
+import { dataService } from '../lib/dataService'
+
+/* helpers */
+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'
+
+/* config */
+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,
+  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,
+}
+const AGENT_LOGOS = {
+  'TradeAgent': new URL('../assets/images/agents_images/tradeagent.png', import.meta.url).href,
+  'HedgeFundAgent': new URL('../assets/images/agents_images/hedgefund.png', import.meta.url).href,
+  'DeepFundAgent': new URL('../assets/images/agents_images/deepfund.png', import.meta.url).href,
+  'InvestorAgent': new URL('../assets/images/agents_images/investor.png', import.meta.url).href,
+}
+const ASSET_CUTOFF = { BTC: '2025-08-01' }
+
+/* state */
+const mode = ref('usd')
+const asset = ref('BTC')
+const rowsRef = ref([])
+let allDecisions = []
+const cards = shallowRef([])
+let unsubscribe = null
+
+/* bootstrap */
+onMounted(async () => {
+  unsubscribe = dataService.subscribe((state) => {
+    rowsRef.value = Array.isArray(state.tableRows) ? state.tableRows : []
+  })
+
+  rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+
+  if (!dataService.loaded && !dataService.loading) {
+    dataService.load(false).catch(e => console.error('LiveView: load failed', e))
+  }
+  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 {}
+  }
+})
+
+onBeforeUnmount(() => {
+  if (unsubscribe) { unsubscribe(); unsubscribe = null }
+})
+
+/* 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))
+
+/* filters */
+const filteredRows = computed(() =>
+  (rowsRef.value || []).filter(r => {
+    if (r.asset !== asset.value) return false
+    if (r.strategy !== 'long_only') return false
+    const name = (r?.agent_name || '').toLowerCase()
+    return !EXCLUDED_AGENT_NAMES.has(name)
+  })
+)
+
+/* winners */
+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()]
+})
+
+/* chart selections */
+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('||')
+})
+
+/* perf */
+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))
+
+  if (!ids.length) {
+    const isCrypto = assetCode === 'BTC' || assetCode === 'ETH'
+    if (!isCrypto) seq = await filterRowsToNyseTradingDays(seq)
+
+    const cutoff = ASSET_CUTOFF[assetCode]
+    if (cutoff) {
+      const t0 = new Date(cutoff + 'T00:00:00Z')
+      seq = seq.filter(r => new Date(r.date + 'T00:00:00Z') >= t0)
+    }
   }
+
+  return seq
 }
-</script>
 
-<!-- GLOBAL (UNSCOPED) — brand tokens must NOT be scoped -->
-<style>
-:root{
-  /* AMA brand gradient: rgb(0,0,185) → rgb(240,0,15) */
-  --ama-start: 0, 0, 185;
-  --ama-end:   240, 0, 15;
+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 }
 
-  /* Podium palette (kept for future use) */
-  --gold:   #D4AF37;
-  --silver: #C0C0C0;
-  --bronze: #CD7F32;
+  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] }
 }
-</style>
 
-<!-- COMPONENT STYLES -->
+/* build cards whenever winners/asset change */
+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,
+        profitUsd: (first.perf.bhLast ?? 0) - 100000,
+        gapUsd: 0,
+        gapPct: 0,
+        rank: null,
+        barPct: 0
+      }
+
+      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',
+          title: sel.agent_name,
+          subtitle: sel.model,
+          balance: perf.stratLast,
+          date: perf.date,
+          logo: AGENT_LOGOS[sel.agent_name] || null,
+          gapUsd, gapPct, profitUsd,
+          rank: null,
+          barPct: 0
+        }
+      })
+
+      agentCards.sort((a,b) => (b.balance ?? -Infinity) - (a.balance ?? -Infinity))
+      agentCards.forEach((c, i) => { c.rank = i + 1 })
+
+      cards.value = [bhCard, ...agentCards].slice(0,5)
+    } finally { computing = false }
+  },
+  { immediate: true }
+)
+</script>
+
 <style scoped>
-.arena-header{
-  position: sticky; top: 0; z-index: 50;
-  background: linear-gradient(135deg,#fbfcff 0%,#ffffff 100%);
-  border-bottom: 1px solid #e5e7eb;
-  backdrop-filter: blur(8px);
+:root {
+  --ama-start: 0, 0, 185;
+  --ama-end: 240, 0, 15;
+  --gold: #d4af37;
+  --silver: #c0c0c0;
+  --bronze: #cd7f32;
 }
 
-.bar{
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 16px 16px 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
+/* page */
+.live { max-width: 1280px; margin: 0 auto; padding: 16px 24px 64px; background: radial-gradient(ellipse at top, #fdfdfd 0%, #f8f9ff 100%); color: #0f172a; }
 
-/* Title (left) with AMA gradient text */
-.arena-title{
-  all: unset;
-  cursor: pointer;
-  font-size: 26px;
-  font-weight: 900;
-  letter-spacing: -0.01em;
-  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
+/* toolbar */
+.toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0 12px; background: #ffffff; border-bottom: 2px solid rgba(var(--ama-end), .15); backdrop-filter: blur(10px); }
+.toolbar__right { display: flex; align-items: center; gap: 12px; }
 
-/* Tabs (right) */
-.menu{
-  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
-}
+/* mode buttons */
+.mode__btn { height: 32px; min-width: 42px; padding: 0 10px; border-radius: 10px; border: 1px solid #CDD3E1; background: #ffffff; font-weight: 700; color: #0f172a; transition: all 0.2s ease; }
+.mode__btn.is-active { background: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end))); color: #ffffff; border: none; box-shadow: 0 0 6px rgba(var(--ama-end), .3); }
 
-.menu-item{
-  cursor: pointer; position: relative;
-  font-size: 22px; font-weight: 700; color: #1f2937;
-  padding-bottom: 4px; transition: color .2s ease;
-}
+/* panels */
+.panel { background: #ffffff; border: 1px solid #E7ECF3; border-radius: 16px; margin-top: 16px; }
+.panel--chart { padding: 10px; }
+.panel--cards { padding: 16px; }
 
-/* hover color + underline */
-.menu-item:hover{ color: rgb(var(--ama-end)); }
-.menu-item::after{
-  content:''; position:absolute; left:0; bottom:0; height:2px; width:0%;
-  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
-  transition: width .25s ease;
-}
-.menu-item:hover::after{ width:100%; }
+/* empty */
+.empty { padding: 20px; border: 1px dashed #D7DDE7; border-radius: 12px; color: #6B7280; font-size: .95rem; text-align: center; }
 
-/* active = gradient text + full underline */
-.menu-item.active{
-  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
-  -webkit-background-clip:text; background-clip:text; color:transparent;
-}
-.menu-item.active::after{ width:100%; }
-
-/* bottom hairline */
-.ama-gradient-rule{
-  width:100%; height:3px; border-radius:2px;
-  background-image: linear-gradient(
-    90deg,
-    rgba(var(--ama-start),0),
-    rgb(var(--ama-start)),
-    rgb(var(--ama-end)),
-    rgba(var(--ama-end),0)
-  );
-}
+/* grid */
+.cards-grid-f1 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
 
-/* responsive */
-@media (max-width: 720px){
-  .bar{ flex-direction: column; align-items: stretch; }
-  .menu{ justify-content: center; gap: 18px; }
-  .arena-title{ text-align: center; font-size: 22px; }
-  .menu-item{ font-size: 18px; }
-}
+/* F1 card base */
+.card-f1 { position: relative; display: grid; grid-template-rows: auto auto auto; gap: 10px; padding: 18px 18px 20px; min-height: 210px; border-radius: 16px; background: linear-gradient(145deg,#ffffff,#f8faff 80%,#ffffff 100%); border: 1px solid #E6E8F0; box-shadow: 0 2px 12px rgba(0,0,0,.04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
+.card-f1:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,0,0,.08); }
+.card-f1.bh { border-style: dashed; }
+
+/* podium styles */
+.card-f1.gold   { border-color: var(--gold);   box-shadow: 0 0 0 1px rgba(212,175,55,.25), 0 8px 26px rgba(212,175,55,.18); }
+.card-f1.silver { border-color: var(--silver); box-shadow: 0 0 0 1px rgba(192,192,192,.25), 0 8px 26px rgba(192,192,192,.16); }
+.card-f1.bronze { border-color: var(--bronze); box-shadow: 0 0 0 1px rgba(205,127,50,.22), 0 8px 26px rgba(205,127,50,.14); }
+
+/* small podium ribbon at top */
+.podium-ribbon { position: absolute; top: 0; left: 0; right: 0; height: 6px; border-top-left-radius: 16px; border-top-right-radius: 16px; }
+.card-f1.gold   .podium-ribbon { background: linear-gradient(90deg, #f6e27a, var(--gold)); }
+.card-f1.silver .podium-ribbon { background: linear-gradient(90deg, #e9eef2, var(--silver)); }
+.card-f1.bronze .podium-ribbon { background: linear-gradient(90deg, #f0c6a1, var(--bronze)); }
+
+/* head */
+.head { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 12px; }
+.logo { width: 44px; height: 44px; border-radius: 12px; background: #f3f4f6; display: grid; place-items: center; overflow: hidden; border: 1px solid #E5E7EB; }
+.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(18px, 2.2vw, 25px); font-weight: 700; 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; grid-template-rows: auto auto; align-items: end; gap: 8px; }
+.chips{ grid-column:1 / -1; grid-row:1; display:inline-flex; gap:8px; flex-wrap:wrap; }
+.eod{ grid-column:2; grid-row:2; justify-self:end; font-size:12px; color:#6b7280; }
+.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; }
 </style>