Change settings

src/components/HeaderOpen.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="live">
-    <!-- Toolbar (assets + mode) -->
+    <!-- Toolbar: assets + mode -->
     <header class="toolbar">
       <div class="toolbar__left">
         <AssetTabs v-model="asset" :ordered-assets="orderedAssets" />
@@ -26,7 +26,7 @@
       </div>
     </section>
 
-    <!-- Podium + Cards -->
+    <!-- F1 Scoreboard Cards -->
     <section class="panel panel--cards" v-if="cards.length">
       <div class="cards-grid-f1">
         <article
@@ -43,7 +43,7 @@
           }"
           :style="{ '--bar': (c.barPct ?? 0) + '%'}"
         >
-          <!-- Podium ribbon (no crown) -->
+          <!-- Podium ribbon (rank 1-3 only) -->
           <div v-if="c.rank && c.rank <= 3" class="podium-ribbon" :data-rank="c.rank"></div>
 
           <!-- Header: logo + names -->
@@ -60,7 +60,7 @@
 
           <!-- Net value row -->
           <div class="net">
-            <div class="net__label">Net Value</div>
+            <div class="net__label">Net value</div>
             <div class="net__value">{{ fmtUSD(c.balance) }}</div>
           </div>
 
@@ -101,16 +101,16 @@ import AssetTabs from '../components/AssetTabs.vue'
 import CompareChartE from '../components/CompareChartE.vue'
 import { dataService } from '../lib/dataService'
 
-/* helpers */
+/* --- 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'
 
-/* config */
-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,
@@ -127,22 +127,25 @@ const AGENT_LOGOS = {
 }
 const ASSET_CUTOFF = { BTC: '2025-08-01' }
 
-/* state */
+/* ---------- state ---------- */
 const mode = ref('usd')
 const asset = ref('BTC')
 const rowsRef = ref([])
 let allDecisions = []
 const cards = shallowRef([])
+
 let unsubscribe = null
 
-/* bootstrap */
+/* ---------- bootstrap ---------- */
 onMounted(async () => {
   unsubscribe = dataService.subscribe((state) => {
     rowsRef.value = Array.isArray(state.tableRows) ? state.tableRows : []
   })
 
+  // immediate sync with current state (in case data already loaded)
   rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
 
+  // trigger a load only if nothing is in-flight
   if (!dataService.loaded && !dataService.loading) {
     dataService.load(false).catch(e => console.error('LiveView: load failed', e))
   }
@@ -161,24 +164,24 @@ onBeforeUnmount(() => {
   if (unsubscribe) { unsubscribe(); unsubscribe = null }
 })
 
-/* helpers */
+/* ---------- 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 */
+/* rows for selected asset (exclude vanilla/vinilla) - only show long_only strategy like leaderboard */
 const filteredRows = computed(() =>
   (rowsRef.value || []).filter(r => {
     if (r.asset !== asset.value) return false
-    if (r.strategy !== 'long_only') return false
+    if (r.strategy !== 'long_only') return false  // 只显示 Aggressive Long Only
     const name = (r?.agent_name || '').toLowerCase()
     return !EXCLUDED_AGENT_NAMES.has(name)
   })
 )
 
-/* winners */
+/* winners: best model per agent (by leaderboard balance) */
 const winners = computed(() => {
   const byAgent = new Map()
   for (const r of filteredRows.value) {
@@ -199,12 +202,14 @@ const winnersForChart = computed(() =>
     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 */
+/* ---------- 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 : []
@@ -214,6 +219,7 @@ async function buildSeq(sel) {
 
   seq.sort((a,b) => (a.date > b.date ? 1 : -1))
 
+  // if using decision_ids, data already prefiltered
   if (!ids.length) {
     const isCrypto = assetCode === 'BTC' || assetCode === 'ETH'
     if (!isCrypto) seq = await filterRowsToNyseTradingDays(seq)
@@ -257,6 +263,7 @@ watch(
 
       if (!perfs.length) { cards.value = []; return }
 
+      // Buy & Hold first
       const first = perfs[0]
       const assetCode = first.sel.asset
       const bhCard = {
@@ -274,6 +281,7 @@ watch(
         barPct: 0
       }
 
+      // Agents
       const agentCards = perfs.map(({ sel, perf }) => {
         const gapUsd = perf.stratLast - perf.bhLast
         const gapPct = perf.bhLast > 0 ? (perf.stratLast / perf.bhLast - 1) : 0
@@ -286,15 +294,22 @@ watch(
           balance: perf.stratLast,
           date: perf.date,
           logo: AGENT_LOGOS[sel.agent_name] || null,
-          gapUsd, gapPct, profitUsd,
+          gapUsd, gapPct,
+          profitUsd,
           rank: null,
           barPct: 0
         }
       })
 
+      // Rank by balance (agents only)
       agentCards.sort((a,b) => (b.balance ?? -Infinity) - (a.balance ?? -Infinity))
       agentCards.forEach((c, i) => { c.rank = i + 1 })
 
+      // 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)) })
+
+      // BH first, then top agents
       cards.value = [bhCard, ...agentCards].slice(0,5)
     } finally { computing = false }
   },
@@ -303,75 +318,98 @@ watch(
 </script>
 
 <style scoped>
-:root {
-  --ama-start: 0, 0, 185;
-  --ama-end: 240, 0, 15;
-  --gold: #d4af37;
-  --silver: #c0c0c0;
-  --bronze: #cd7f32;
-}
-
-/* page */
-.live { max-width: 1280px; margin: 0 auto; padding: 16px 24px 64px; background: radial-gradient(ellipse at top, #fdfdfd 0%, #f8f9ff 100%); color: #0f172a; }
+.live { max-width: 1280px; margin: 0 auto; padding: 12px 20px 28px; background: #ffffff; padding-bottom: 56px; }
 
 /* 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 { 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; }
 .toolbar__right { display: flex; align-items: center; gap: 12px; }
 
 /* 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); }
+.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: 16px; margin-top: 16px; }
-.panel--chart { padding: 10px; }
-.panel--cards { padding: 16px; }
+.panel { background: #ffffff; border: 1px solid #E7ECF3; border-radius: 14px; }
+.panel--chart { padding: 10px 10px 2px; }
+.panel--cards { padding: 12px; }
 
 /* empty */
-.empty { padding: 20px; border: 1px dashed #D7DDE7; border-radius: 12px; color: #6B7280; font-size: .95rem; text-align: center; }
-
-/* grid */
-.cards-grid-f1 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
-
-/* 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; }
+.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.bh { border-style: dashed; opacity: 1; }
+
+/* Podium accents for top 3 */
+.card-f1.gold   { border-color: #d4af37; box-shadow: 0 0 0 1px rgba(212,175,55,.25), 0 10px 24px rgba(212,175,55,.12); }
+.card-f1.silver { border-color: #c0c0c0; box-shadow: 0 0 0 1px rgba(192,192,192,.25), 0 10px 24px rgba(192,192,192,.10); }
+.card-f1.bronze { border-color: #cd7f32; box-shadow: 0 0 0 1px rgba(205,127,50,.22), 0 10px 24px rgba(205,127,50,.10); }
+.podium-ribbon { position: absolute; top: 0; left: 0; right: 0; height: 6px; border-top-left-radius: 14px; border-top-right-radius: 14px; }
+.card-f1.gold   .podium-ribbon { background: linear-gradient(90deg, #f7e27a, #d4af37); }
+.card-f1.silver .podium-ribbon { background: linear-gradient(90deg, #eef2f6, #c0c0c0); }
+.card-f1.bronze .podium-ribbon { background: linear-gradient(90deg, #f3c39d, #cd7f32); }
+
+/* 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 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 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 */
 .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; }
+.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; }