Change settings

src/views/LiveView.vue

@@ -26,41 +26,51 @@
       </div>
     </section>
 
-    <!-- Cards: LOGO + title (+ crown), KPIs, EOD bottom-right -->
+    <!-- F1 Scoreboard Cards -->
     <section class="panel panel--cards" v-if="cards.length">
-      <div class="cards-grid">
+      <div class="cards-grid-f1">
         <article
           v-for="c in cards"
           :key="c.key"
-          class="card3"
-          :class="{ 'is-winner': c.isWinner, 'is-bh': c.kind==='bh' }"
+          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) + '%'}"
         >
-          <span v-if="c.isWinner" class="card3__crown" aria-label="Top performer">👑</span>
+          <!-- 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 class="card3__head">
+          <!-- 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="head__text">
-              <h3 class="head__title">{{ c.kind==='bh' ? 'Buy & Hold' : c.title }}</h3>
-              <p class="head__subtitle">{{ c.subtitle }}</p>
+            <div class="names">
+              <div class="agent">{{ c.kind==='bh' ? 'Buy & Hold' : c.title }}</div>
+              <div class="model">{{ c.subtitle }}</div>
             </div>
           </header>
 
-          <div class="card3__kpis">
-            <!-- Modern body: single, strong Net value row -->
-            <div class="kpi kpi--net">
-              <span class="kpi__label">Net value</span>
-              <span class="kpi__value">{{ fmtUSD(c.balance) }}</span>
-            </div>
+          <!-- 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 bar: Profit / Delta chips on the left, EOD on the right -->
-          <div class="card3__bottom">
+          <!-- Bottom row: chips + EOD -->
+          <div class="bottom">
             <div class="chips">
-              <span class="pill" :class="{ pos: profitOf(c) >= 0, neg: profitOf(c) < 0 }">{{ signedMoney(profitOf(c)) }}</span>
-              <span class="pill" :class="{ pos: (c.gapUsd ?? 0) >= 0, neg: (c.gapUsd ?? 0) < 0 }">
+              <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>
@@ -68,7 +78,7 @@
                 <template v-else>—</template>
               </span>
             </div>
-            <footer class="card3__foot">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</footer>
+            <div class="eod">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
           </div>
         </article>
       </div>
@@ -104,18 +114,15 @@ 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,
 }
-// optional agent logos (fill if you have them)
-// const AGENT_LOGOS = { DeepFundAgent: new URL('..', import.meta.url).href, ... }
 const AGENT_LOGOS = {}
-
-const ASSET_CUTOFF = { BTC: '2025-08-01' } // match chart
+const ASSET_CUTOFF = { BTC: '2025-08-01' }
 
 /* ---------- state ---------- */
-const mode = ref('usd') // 'usd' | 'pct'
+const mode = ref('usd')
 const asset = ref('BTC')
-const rowsRef = ref([])        // leaderboard rows
-let allDecisions = []          // raw decisions for perf (chart parity)
-const cards = shallowRef([])   // rendered cards
+const rowsRef = ref([])
+let allDecisions = []
+const cards = shallowRef([])
 
 /* ---------- bootstrap ---------- */
 onMounted(async () => {
@@ -123,9 +130,7 @@ onMounted(async () => {
     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]
 
@@ -194,9 +199,7 @@ async function buildSeq(sel) {
 
   const isCrypto = assetCode === 'BTC' || assetCode === 'ETH'
   let filtered = seq
-  if (!isCrypto) {
-    filtered = await filterRowsToNyseTradingDays(seq)
-  }
+  if (!isCrypto) filtered = await filterRowsToNyseTradingDays(seq)
 
   const cutoff = ASSET_CUTOFF[assetCode]
   if (cutoff) {
@@ -210,9 +213,7 @@ 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 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) || []
@@ -251,7 +252,9 @@ watch(
         profitUsd: (first.perf.bhLast ?? 0) - 100000,
         gapUsd: 0,
         gapPct: 0,
-        isWinner: false
+        isWinner: false,
+        rank: null,
+        barPct: 0
       }
 
       // Agent cards (gap vs BH)
@@ -269,21 +272,29 @@ watch(
           logo: AGENT_LOGOS[sel.agent_name] || null,
           gapUsd, gapPct,
           profitUsd,
-          isWinner: false
+          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 })
 
-      // top 4 agents + BH card
-      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 }
 )
@@ -293,74 +304,73 @@ watch(
 .live { max-width: 1280px; margin: 0 auto; padding: 12px 20px 28px; }
 
 /* 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: #fff; }
-.toolbar__left { min-width: 0; }
-.toolbar__right { display: flex; align-items: center; gap: 10px; }
-
-/* $/% 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; transition: all .12s ease; }
-.mode__btn:hover { transform: translateY(-1px); }
-.mode__btn.is-active { background: #0F172A; color: #fff; border-color: #0F172A; }
+.toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 10px; background: #0b0e14; color: #f0f3f9; border-bottom: 1px solid #1a1f2b; }
+.mode__btn { height: 30px; min-width: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid #2a3344; background: #101521; font-weight: 700; color: #d9e2f2; }
+.mode__btn.is-active { background: #1b2333; color: #fff; border-color: #3a4865; }
 
 /* panels */
-.panel { background: #fff; border: 1px solid #EDF0F4; border-radius: 14px; }
+.panel { background: #0e141f; border: 1px solid #151c2a; border-radius: 14px; }
 .panel--chart { padding: 10px 10px 2px; }
 .panel--cards { padding: 12px; }
 
 /* empty */
-.empty { padding: 14px; border: 1px dashed #D6DAE1; border-radius: 12px; color: #6B7280; font-size: .92rem; }
+.empty { padding: 14px; border: 1px dashed #2b3447; border-radius: 12px; color: #9aa4b2; font-size: .92rem; background: #0f1624; }
 
-/* GRID: five fixed columns on wide screens */
-.cards-grid { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
-@media (max-width: 1400px) { .cards-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
-@media (max-width: 1100px) { .cards-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
-@media (max-width: 900px)  { .cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
-@media (max-width: 640px)  { .cards-grid { grid-template-columns: 1fr; } }
+/* 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; } }
 
-/* CARD v3 */
-.card3 {
+/* F1 Card */
+.card-f1 {
   position: relative;
   display: grid;
-  grid-template-rows: auto auto auto; /* head, kpis, bottom */
-  gap: 14px;
-  padding: 18px;
-  min-height: 228px;
-  border-radius: 18px;
-  border: 1px solid #E8ECF3;
-  background: radial-gradient(120% 140% at 0% 0%, #FFFFFF 0%, #FBFCFE 100%);
-  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(15,23,42,.04);
-  transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
+  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,#0f1421,#121826 55%,#0f1421 100%);
+  border: 1px solid #20283a;
+  box-shadow: inset 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35);
+  color: #e9eef7;
+  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
 }
-.card3:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.08); border-color: #D9E2F0; }
-.card3.is-winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.14); }
-.card3.is-bh { outline: 2px dashed rgba(15,23,42,.08); background: radial-gradient(120% 140% at 0% 0%, #FFFFFF 0%, #F9FBFF 100%); }
-.card3:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
-.card3.is-winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
-.card3.is-bh { outline: 2px dashed rgba(15,23,42,.08); }
-
-.card3__crown { position: absolute; top: 12px; right: 12px; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
-
-.card3__head { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 12px; }
-.logo { width: 48px; height: 48px; border-radius: 999px; background: #F3F4F6; display: grid; place-items: center; overflow: hidden; }
+.card-f1:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.5); border-color: #2b3650; }
+.card-f1.winner { border-color: #ffd54a; box-shadow: 0 0 0 2px rgba(255,213,74,.25), 0 10px 26px rgba(0,0,0,.6); }
+.card-f1.bh { border-style: dashed; opacity: .96; }
+
+/* Rank / Crown */
+.rank { position: absolute; top: 10px; left: 12px; font-weight: 900; font-size: 18px; color: rgba(255,255,255,.35); letter-spacing: .04em; }
+.rank.bh-badge { font-size: 12px; background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 6px; color: #c9d2e3; }
+.crown { position: absolute; top: 12px; right: 12px; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
+
+/* 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: #1b2333; display: grid; place-items: center; overflow: hidden; border: 1px solid #2a3344; }
 .logo img { width: 100%; height: 100%; object-fit: contain; }
-.logo__fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
-.head__title { font-weight: 900; color: #0F172A; line-height: 1.1; font-size: clamp(18px, 1.6vw, 22px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.head__subtitle { font-size: 12px; color: #8A94A7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-.card3__kpis { display: grid; grid-template-columns: 1fr; align-items: center; }
-.kpi--net { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
-.kpi__label { font-size: 12px; color: #6B7280; margin: 0; }
-.kpi__value { font-weight: 900; color: #0B1220; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.01em; white-space: nowrap; }
-.kpi__label { font-size: 12px; color: #6B7280; margin-bottom: 4px; }
-.kpi__value { font-weight: 900; color: #0F172A; font-size: clamp(22px, 2.2vw, 28px); white-space: nowrap; }
-.pill { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #F1F5FB; color: #0F172A; display: inline-block; box-shadow: inset 0 -1px 0 rgba(15,23,42,.04); }
-.pill.pos { background: #E6F7ED; color: #0E7A3A; }
-.pill.neg { background: #FBE9E9; color: #B91C1C; }
-.pill.pos { background: #DCFCE7; color: #166534; }
-.pill.neg { background: #FEE2E2; color: #B91C1C; }
-
-.card3__foot { font-size: 12px; color: #5B6476; opacity: .9; }
-.card3__bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 4px; }
-.card3__bottom .chips { display: inline-flex; gap: 8px; align-items: center; }
+.logo__fallback { width: 60%; height: 60%; border-radius: 6px; background: #2a3344; }
+.names { min-width: 0; }
+.agent { font-size: 16px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #f4f7ff; 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: #9aa4b2; 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: #9aa4b2; }
+.net__value { font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; letter-spacing: -.01em; color: #fff; }
+
+/* Bar vs B&H */
+.bar { height: 6px; border-radius: 999px; background: #1b2333; overflow: hidden; border: 1px solid #2a3344; }
+.bar span { display: block; height: 100%; background: linear-gradient(90deg,#00ff88,#00c864); width: var(--bar, 40%); transition: width .5s ease; }
+.bar.neg span { background: linear-gradient(90deg,#ff7474,#d83a3a); }
+
+/* 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: rgba(255,255,255,.08); backdrop-filter: blur(2px); }
+.chip.pos { color: #00ff88; }
+.chip.neg { color: #ff6b6b; }
+.eod { font-size: 12px; color: #9aa4b2; }
 </style>