Change settings

src/views/LiveView.vue

@@ -43,46 +43,55 @@
           v-for="c in cards"
           :key="c.key"
           class="card"
-          :class="{ 'card--bh': c.kind==='bh' }"
+          :class="{
+            'card--bh': c.kind==='bh',
+            'card--winner': c.isWinner
+          }"
         >
-          <div class="card__logo">
-            <img v-if="c.logo" :src="c.logo" alt="" />
-            <div v-else class="card__logo-fallback"></div>
+          <!-- header: logo | title | balance -->
+          <div class="card__header">
+            <div class="card__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>
+
+            <div
+              class="card__title"
+              :style="{ fontSize: nameFontSize(c.title) }"
+              :title="c.title"
+            >
+              {{ c.title }}
+            </div>
+
+            <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
           </div>
 
-          <div class="card__content">
-            <div class="card__row">
+          <!-- meta row -->
+          <div class="card__meta">
+            <div class="card__sub ellipsize" :title="c.subtitle">{{ c.subtitle }}</div>
+
+            <template v-if="c.kind==='agent'">
               <div
-                class="card__title"
-                :style="{ fontSize: nameFontSize(c.title) }"
-                :title="c.title"
+                class="pill"
+                :class="{
+                  neg: c.gapUsd < 0 && !c.isWinner,
+                  pos: c.gapUsd >= 0 || c.isWinner
+                }"
               >
-                {{ c.title }}
+                <span v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</span>
+                <span v-else>{{ signedPct(c.gapPct) }}</span>
               </div>
-              <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
-            </div>
-
-            <div class="card__row card__meta">
-              <div class="card__sub" :title="c.subtitle">{{ c.subtitle }}</div>
+            </template>
 
-              <template v-if="c.kind==='agent'">
-                <div class="pill" :class="{ neg: c.gapUsd < 0 }">
-                  <span v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</span>
-                  <span v-else>{{ signedPct(c.gapPct) }}</span>
-                </div>
-              </template>
-
-              <template v-else>
-                <div class="pill">Buy&nbsp;&amp;&nbsp;Hold</div>
-              </template>
-            </div>
+            <template v-else>
+              <div class="pill pill--neutral">Buy&nbsp;&amp;&nbsp;Hold</div>
+            </template>
+          </div>
 
-            <div class="card__row card__date">
-              <div class="card__sub">
-                EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '-' }}
-              </div>
-              <div class="spacer"></div>
-            </div>
+          <!-- date row -->
+          <div class="card__footer">
+            <div class="card__sub">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
           </div>
         </div>
       </div>
@@ -154,8 +163,6 @@ const filteredRows = computed(() =>
 /* Baseline (Buy & Hold) directly from tableRows */
 const baselineRow = computed(() => {
   const rows = (rowsRef.value || []).filter(r => r.asset === asset.value)
-
-  // heuristics: prefer explicit strategy markers, else name/model contains buy+hold
   const candidates = rows.filter(r => {
     const s  = (r.strategy || '').toLowerCase()
     const an = (r.agent_name || '').toLowerCase()
@@ -164,12 +171,11 @@ const baselineRow = computed(() => {
            (an.includes('buy') && an.includes('hold')) ||
            (m.includes('buy') && m.includes('hold'))
   })
-
   if (!candidates.length) return null
   const ts = (r) => new Date(r.end_date || r.last_nav_ts || 0).getTime()
   return candidates.sort((a, b) => ts(b) - ts(a))[0]
 })
-const bhBalance = computed(() => baselineRow.value?.balance ?? null)
+const bhBalance = computed(() => baselineRow.value?.balance ?? 100000)
 const bhDate    = computed(() => baselineRow.value?.end_date || baselineRow.value?.last_nav_ts || '')
 
 /* Best model per agent (by balance) */
@@ -194,7 +200,7 @@ const winnersForChart = computed(() =>
   }))
 )
 
-/* Build 5 cards: Buy&Hold + top 4 agents */
+/* Build 5 cards: Buy&Hold + top 4 agents and mark the winner */
 const cards = computed(() => {
   const base = Number(bhBalance.value ?? 100000)
   const baseDate = bhDate.value
@@ -207,9 +213,12 @@ const cards = computed(() => {
     balance: base,
     date: baseDate,
     logo: ASSET_ICONS[asset.value] || null,
+    isWinner: false
   }
 
   const top = [...winners.value].sort((a,b) => score(b) - score(a)).slice(0, 4)
+  const maxBal = top.length ? Math.max(...top.map(r => r.balance ?? -Infinity)) : -Infinity
+
   const agentCards = top.map(r => {
     const gapUsd = (typeof r.balance === 'number' && Number.isFinite(base))
       ? (r.balance - base)
@@ -226,6 +235,7 @@ const cards = computed(() => {
       date: r.end_date || r.last_nav_ts || '',
       logo: AGENT_LOGOS[r.agent_name] || null,
       gapUsd, gapPct,
+      isWinner: r.balance === maxBal
     }
   })
 
@@ -303,56 +313,73 @@ function nameFontSize(name='') {
 /* card */
 .card {
   display: grid;
-  grid-template-columns: 52px 1fr;
-  gap: 10px 12px;
-  align-items: center;
+  grid-template-rows: auto auto auto;
+  gap: 8px;
   padding: 12px 14px;
   border: 1px solid #EEF1F6; border-radius: 14px;
   background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04);
+  position: relative;
 }
 .card--bh { outline: 2px dashed rgba(15,23,42,.08); }
+.card--winner {
+  border-color: #16a34a;           /* green-600 */
+  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
+}
+
+/* header layout: logo | title | balance */
+.card__header {
+  display: grid;
+  grid-template-columns: 52px minmax(0,1fr) auto;
+  align-items: center;
+  gap: 12px;
+}
 
 /* logo */
 .card__logo {
   width: 44px; height: 44px; border-radius: 999px;
   background: #F3F4F6; display: grid; place-items: center;
-  overflow: hidden;
+  overflow: hidden; position: relative;
 }
 .card__logo img { width: 100%; height: 100%; object-fit: contain; }
 .card__logo-fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
 
-/* content */
-.card__content { min-width: 0; }
-.card__row {
-  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
+/* crown badge for winner */
+.card__badge {
+  position: absolute;
+  right: -6px; top: -6px;
+  font-size: 16px;
+  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
 }
 
-/* title shrinks and never pushes the number off the card */
+/* title shrinks; never pushes number off */
 .card__title {
-  flex: 1 1 auto;     /* take available space */
-  min-width: 0;       /* allow shrink */
+  min-width: 0;
   font-weight: 800; color: #0F172A;
-  white-space: nowrap;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-
+/* right number never shrinks */
 .card__balance {
-  flex: 0 0 auto;     /* never shrink */
   white-space: nowrap;
   font-weight: 900; color: #0F172A; font-size: 20px;
 }
 
-.card__sub { font-size: 12px; color: #5B6476; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.card__meta { margin-top: 4px; align-items: center; }
-.card__date { margin-top: 2px; }
+/* meta row */
+.card__meta {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+}
+.card__sub { font-size: 12px; color: #5B6476; opacity: .85; }
+.ellipsize { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* footer row */
+.card__footer { margin-top: -2px; }
 
+/* pills */
 .pill {
-  padding: 3px 8px; border-radius: 999px; font-size: 12px;
-  font-weight: 700; line-height: 1; white-space: nowrap;
+  padding: 4px 9px; border-radius: 999px; font-size: 12px;
+  font-weight: 800; line-height: 1; white-space: nowrap;
   background: #EEF2F7; color: #0F172A;
 }
 .pill.neg { background: #FEE2E2; color: #B91C1C; }
-
-/* utility */
-.spacer { flex: 1 1 auto; }
-strong { font-weight: 700; }
+.pill.pos { background: #DCFCE7; color: #166534; } /* green for winner/positive */
+.pill.pill--neutral { background: #EEF2F7; color: #0F172A; }
 </style>