Change settings

src/views/LiveView.vue

@@ -26,43 +26,38 @@
       </div>
     </section>
 
-    <!-- Cards: Buy & Hold + top 4 agents (computed with perf helpers) -->
+    <!-- Cards: LOGO + title (+ crown), KPIs, EOD bottom-right -->
     <section class="panel panel--cards" v-if="cards.length">
       <div class="cards-grid">
-        <div
+        <article
           v-for="c in cards"
           :key="c.key"
-          class="card2"
-          :class="{ 'is-bh': c.kind==='bh', 'is-winner': c.isWinner }"
+          class="card3"
+          :class="{ 'is-winner': c.isWinner, 'is-bh': c.kind==='bh' }"
         >
-          <!-- Crown -->
-          <div v-if="c.isWinner" class="card2__ribbon" aria-label="Top performer">👑</div>
+          <span v-if="c.isWinner" class="card3__crown" aria-label="Top performer">👑</span>
 
-          <!-- Header: LOGO + title -->
-          <div class="card2__header">
-            <div class="avatar">
+          <header class="card3__head">
+            <div class="logo">
               <img v-if="c.logo" :src="c.logo" alt="" />
-              <div v-else class="avatar__fallback" aria-hidden="true"></div>
+              <div v-else class="logo__fallback" aria-hidden="true"></div>
             </div>
-            <div class="titleblock">
-              <div class="title" :title="c.kind==='bh' ? 'Buy & Hold' : c.title">{{ c.kind==='bh' ? 'Buy & Hold' : c.title }}</div>
-              <div class="subtitle" :title="c.subtitle">{{ c.subtitle }}</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>
-          </div>
+          </header>
 
-          <!-- KPIs: Net value, Profit, Delta Profit -->
-          <div class="card2__kpis">
-            <div class="kpi kpi--net">
+          <div class="card3__kpis">
+            <div class="kpi">
               <div class="kpi__label">Net value</div>
               <div class="kpi__value">{{ fmtUSD(c.balance) }}</div>
             </div>
-
-            <div class="kpi kpi--profit">
+            <div class="kpi">
               <div class="kpi__label">Profit</div>
-              <div class="pill" :class="{ pos: c.profitUsd >= 0, neg: c.profitUsd < 0 }">{{ signedMoney(c.profitUsd) }}</div>
+              <div class="pill" :class="{ pos: profitOf(c) >= 0, neg: profitOf(c) < 0 }">{{ signedMoney(profitOf(c)) }}</div>
             </div>
-
-            <div class="kpi kpi--delta">
+            <div class="kpi">
               <div class="kpi__label">Delta profit</div>
               <div class="pill" :class="{ pos: (c.gapUsd ?? 0) >= 0, neg: (c.gapUsd ?? 0) < 0 }">
                 <template v-if="c.kind==='agent'">
@@ -74,17 +69,14 @@
             </div>
           </div>
 
-          <!-- EOD bottom-right -->
-          <div class="card2__eod">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
-        </div>
+          <footer class="card3__foot">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</footer>
+        </article>
       </div>
     </section>
 
     <section v-else class="panel panel--cards">
       <div class="empty">No card data yet for <strong>{{ asset }}</strong>.</div>
     </section>
-      <div class="empty">No card data yet for <strong>{{ asset }}</strong>.</div>
-    </section>
   </div>
 </template>
 
@@ -151,6 +143,7 @@ const fmtUSD = (n) => (n ?? 0).toLocaleString(undefined, { style: 'currency', cu
 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))
 
 /* rows for selected asset (exclude vanilla/vinilla) */
 const filteredRows = computed(() =>
@@ -278,20 +271,6 @@ watch(
           profitUsd,
           isWinner: false
         }
-      }) => {
-        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))
@@ -332,117 +311,34 @@ watch(
 /* empty */
 .empty { padding: 14px; border: 1px dashed #D6DAE1; border-radius: 12px; color: #6B7280; font-size: .92rem; }
 
-/* NEW GRID: five fixed columns on wide screens */
+/* 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; } }
 
-/* CARD v2 */
-.card2 {
-  position: relative;
-  display: grid;
-  grid-template-rows: auto auto; /* header, kpis */
-  gap: 16px;
-  padding: 18px;
-  min-height: 220px;
-  border: 1px solid #EEF1F6;
-  border-radius: 16px;
-  background: #fff;
-  box-shadow: 0 1px 2px rgba(0,0,0,.04);
-  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
-}
-.card2:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
-.card2.is-bh { outline: 2px dashed rgba(15,23,42,.08); }
-.card2.is-winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
-.card2:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
-.card2.is-bh { outline: 2px dashed rgba(15,23,42,.08); }
-.card2.is-winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
-
-/* ribbon */
-.card2__ribbon { position: absolute; top: 10px; right: 12px; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
-
-/* row layout */
-.card2__row { display: grid; align-items: center; }
-.card2__header { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 12px; }
-.avatar { width: 48px; height: 48px; border-radius: 999px; background: #F3F4F6; display: grid; place-items: center; overflow: hidden; }
-.avatar img { width: 100%; height: 100%; object-fit: contain; }
-.avatar__fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
-.titleblock { min-width: 0; }
-.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; }
-.subtitle { font-size: 13px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.card2__kpis { display: grid; grid-template-columns: 1.3fr .7fr .8fr; align-items: end; gap: 12px; }
-.kpi { min-width: 0; }
+/* CARD v3 */
+.card3 { position: relative; display: grid; grid-template-rows: auto auto; gap: 16px; padding: 18px; min-height: 220px; border: 1px solid #EEF1F6; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
+.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: 10px; 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; }
+.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: 13px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.card3__kpis { display: grid; grid-template-columns: 1.3fr .7fr .8fr; align-items: end; gap: 12px; }
 .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: 13px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; display: inline-block; }
 .pill.pos { background: #DCFCE7; color: #166534; }
 .pill.neg { background: #FEE2E2; color: #B91C1C; }
-.card2__eod { position: absolute; bottom: 12px; right: 14px; font-size: 12px; color: #5B
-
-/* avatar */
-.avatar { width: 56px; height: 56px; border-radius: 999px; background: #F3F4F6; display: grid; place-items: center; overflow: hidden; }
-.avatar img { width: 100%; height: 100%; object-fit: contain; }
-.avatar__fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
-
-/* titles */
-.info { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 12px; min-width: 0; }
-.titles { min-width: 0; display: grid; gap: 4px; }
-.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; }
-.subtitle { font-size: 13px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-/* primary metric */
-.primary { text-align: right; }
-.primary__label { font-size: 12px; letter-spacing: .02em; color: #6B7280; }
-.primary__value { font-weight: 900; color: #0F172A; font-size: clamp(22px, 2.2vw, 28px); white-space: nowrap; }
-
-/* metrics wrapper */
-.metrics { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
-
-/* chips & delta */
-.chips { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.chip { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
-.chip--neutral { background: #EEF2F7; color: #0F172A; }
-.chip--outline { background: transparent; color: #475569; border: 1px solid #E5E7EB; padding: 3px 8px; }
-
-.delta { display: flex; align-items: baseline; gap: 8px; }
-.delta__value { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
-.delta__value.pos { background: #DCFCE7; color: #166534; }
-.delta__value.neg { background: #FEE2E2; color: #B91C1C; }
-.delta__label { font-size: 11px; color: #64748B; }
-.chips { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.chip { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
-.chip--neutral { background: #EEF2F7; color: #0F172A; }
-.chip--outline { background: transparent; color: #475569; border: 1px solid #E5E7EB; padding: 3px 8px; }
-
-.delta { display: flex; align-items: baseline; gap: 8px; }
-.delta__value { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
-.delta__value.pos { background: #DCFCE7; color: #166534; }
-.delta__value.neg { background: #FEE2E2; color: #B91C1C; }
-.delta__label { font-size: 11px; color: #64748B; }
-.chips { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.chip { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
-.chip--neutral { background: #EEF2F7; color: #0F172A; }
-.chip--outline { background: transparent; color: #475569; border: 1px solid #E5E7EB; padding: 3px 8px; }
-
-.delta { display: flex; align-items: baseline; gap: 8px; }
-.delta__value { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
-.delta__value.pos { background: #DCFCE7; color: #166534; }
-.delta__value.neg { background: #FEE2E2; color: #B91C1C; }
-.delta__label { font-size: 11px; color: #64748B; }
-
-/* foot */
-.foot__right { white-space: nowrap; }
-
-/* responsive nits */
-@media (max-width: 1200px) {
-  .card2__row--top { grid-template-columns: 44px minmax(0,1fr) auto; }
-}
-@media (max-width: 960px) {
-  .primary__value { font-size: 20px; }
-}
-@media (max-width: 640px) {
-  .cards-grid { grid-template-columns: 1fr; }
-}
+
+.card3__foot { position: absolute; bottom: 12px; right: 14px; font-size: 12px; color: #5B6476; opacity: .9; }
 </style>