Change settings

src/views/LiveView.vue

@@ -3,7 +3,7 @@
     <!-- Toolbar: assets + mode -->
     <header class="toolbar">
       <div class="toolbar__left">
-        <!-- Asset tabs: styled to AMA spec (gradient active, minimal, elegant) -->
+        <!-- Asset tabs styled per AMA -->
         <div class="asset-tabs">
           <button
             v-for="a in orderedAssets"
@@ -55,7 +55,7 @@
       </div>
     </section>
 
-    <!-- Podium + Cards -->
+    <!-- Tournament Cards -->
     <section class="panel panel--cards" v-if="cards.length">
       <div class="cards-grid-f1">
         <article
@@ -87,7 +87,7 @@
             </div>
           </header>
 
-          <!-- KPI row: Net value + (primary) Profit -->
+          <!-- KPI row: Net value + P&L -->
           <div class="kpis">
             <div class="kpi">
               <div class="kpi__label">Net Value</div>
@@ -101,6 +101,25 @@
             </div>
           </div>
 
+          <!-- Quality row: Sharpe / MaxDD -->
+          <div class="quality">
+            <div class="qitem">
+              <span class="qitem__label">Sharpe</span>
+              <span class="qitem__value" :class="{ strong: (c.sharpe ?? 0) >= 2 }">{{ fmtSharpe(c.sharpe) }}</span>
+            </div>
+            <div class="qitem">
+              <span class="qitem__label">MaxDD</span>
+              <span class="qitem__value dd">{{ signedPct(c.maxDrawdown) }}</span>
+            </div>
+          </div>
+
+          <!-- Match stats: Win Rate / Trades / Days -->
+          <div class="stats">
+            <div class="stat"><span class="stat__label">Win Rate</span><span class="stat__val" :class="{ pos: (c.winRate ?? 0) >= 0.5, neg: (c.winRate ?? 0) < 0.5 }">{{ fmtRate(c.winRate) }}</span></div>
+            <div class="stat"><span class="stat__label">Trades</span><span class="stat__val">{{ c.trades ?? '—' }}</span></div>
+            <div class="stat"><span class="stat__label">Days</span><span class="stat__val">{{ c.days ?? '—' }}</span></div>
+          </div>
+
           <!-- Performance bar (vs B&H) -->
           <div
             class="bar"
@@ -138,15 +157,22 @@
 import { ref, computed, onMounted, onBeforeUnmount, watch, shallowRef } from 'vue'
 import CompareChartE from '../components/CompareChartE.vue'
 import { dataService } from '../lib/dataService'
+
+/* helpers & metrics */
 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'
+import {
+  computeBuyHoldEquity,
+  computeStrategyEquity,
+  calculateMetricsFromSeries,
+  computeWinRate
+} from '../lib/perf'
 
 /* ---------- config ---------- */
-const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // (MRNA removed)
-const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
+const orderedAssets = ['BTC','ETH','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,
@@ -178,10 +204,8 @@ onMounted(async () => {
     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))
   }
@@ -203,11 +227,13 @@ onBeforeUnmount(() => {
 /* ---------- 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 signedPct = (p) => (p == null ? '—' : `${(p >= 0 ? '+' : '−')}${Math.abs(p * 100).toFixed(2)}%`)
+const fmtSharpe = (s) => (s == null ? '—' : Number(s).toFixed(2))
+const fmtRate = (r) => (r == null ? '—' : `${(r * 100).toFixed(0)}%`)
 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) - only show long_only strategy */
+/* rows for selected asset (exclude vanilla/vinilla) - only show long_only */
 const filteredRows = computed(() =>
   (rowsRef.value || []).filter(r => {
     if (r.asset !== asset.value) return false
@@ -255,7 +281,7 @@ async function buildSeq(sel) {
 
   seq.sort((a,b) => (a.date > b.date ? 1 : -1))
 
-  // if using decision_ids, data already prefiltered
+  // if using decision_ids, data is already prefiltered
   if (!ids.length) {
     const isCrypto = assetCode === 'BTC' || assetCode === 'ETH'
     if (!isCrypto) seq = await filterRowsToNyseTradingDays(seq)
@@ -281,7 +307,37 @@ async function computeEquities(sel) {
   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] }
+  // quality metrics
+  const isCrypto = sel.asset === 'BTC' || sel.asset === 'ETH'
+  const metrics = calculateMetricsFromSeries(stratY, isCrypto ? 'crypto' : 'stock') || {}
+  const { sharpe_ratio: sharpe, max_drawdown: maxDrawdown, total_return: totalReturnPct } = metrics
+
+  // win rate / trades
+  let winRate = null
+  let trades = null
+  try {
+    const r = computeWinRate(seq, cfg.strategy, cfg.tradingMode) || {}
+    winRate = r.winRate
+    trades = r.trades
+  } catch {}
+
+  // approximate "days" from sequence
+  let days = 0
+  try {
+    const start = new Date(seq[0].date)
+    const end = new Date(seq[lastIdx].date)
+    days = Math.max(1, Math.round((end - start) / 86400000) + 1)
+  } catch {}
+
+  return {
+    date: seq[lastIdx].date,
+    stratLast: stratY[lastIdx],
+    bhLast: bhY[lastIdx],
+    sharpe,
+    maxDrawdown,            // as fraction (e.g., -0.053)
+    winRate, trades, days,
+    totalReturnPct          // for future use if needed
+  }
 }
 
 /* build cards whenever winners/asset change */
@@ -314,7 +370,13 @@ watch(
         gapUsd: 0,
         gapPct: 0,
         rank: null,
-        barPct: 0
+        barPct: 0,
+        // BH quality fields are neutral/na
+        sharpe: null,
+        maxDrawdown: null,
+        winRate: null,
+        trades: null,
+        days: null
       }
 
       // Agents
@@ -332,6 +394,11 @@ watch(
           logo: AGENT_LOGOS[sel.agent_name] || null,
           gapUsd, gapPct,
           profitUsd,
+          sharpe: perf.sharpe,
+          maxDrawdown: perf.maxDrawdown,
+          winRate: perf.winRate,
+          trades: perf.trades,
+          days: perf.days,
           rank: null,
           barPct: 0
         }
@@ -393,7 +460,7 @@ watch(
 }
 .toolbar__right { display: flex; align-items: center; gap: 12px; }
 
-/* Asset tabs (internal replacement to ensure style control) */
+/* Asset tabs */
 .asset-tabs {
   display: inline-flex; gap: 6px; padding: 4px; border-radius: 12px;
   background: #ffffff; border: 1px solid #E1E6F0;
@@ -440,16 +507,16 @@ watch(
 .empty { padding: 20px; border: 1px dashed #D7DDE7; border-radius: 12px; color: #6B7280; font-size: .95rem; background: #ffffff; text-align: center; }
 
 /* grid */
-.cards-grid-f1 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
+.cards-grid-f1 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
 
 /* card base with subtle AMA hue */
 .card-f1 {
   position: relative;
   display: grid;
-  grid-template-rows: auto auto auto;
+  grid-template-rows: auto auto auto auto auto;
   gap: 10px;
   padding: 18px 18px 20px;
-  min-height: 210px;
+  min-height: 230px;
   border-radius: 16px;
   background: linear-gradient(145deg,var(--card-bg-1),var(--card-bg-2) 75%,var(--card-bg-1) 100%);
   border: 1px solid rgba(0,0,0,0.05);
@@ -490,8 +557,30 @@ watch(
 .kpi__pill.neg{ color: var(--neg-fg); background: var(--neg-bg); border-color: var(--neg-br); }
 .align-right{ text-align:right; }
 
+/* Quality row */
+.quality{
+  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
+  padding: 2px 0 0;
+}
+.qitem{ display:flex; align-items:baseline; gap:8px; }
+.qitem__label{ font-size:12px; color:#6b7280; }
+.qitem__value{ font-size:14px; font-weight:800; color:#0f172a; }
+.qitem__value.strong{ color:#0e7a3a; }
+.qitem__value.dd{ color:#B91C1C; }
+
+/* Stats row */
+.stats{
+  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
+  font-size:12px; color:#374151;
+}
+.stat{ display:flex; align-items:center; justify-content:space-between; background:#F8FAFD; border:1px solid #E7ECF3; border-radius:10px; padding:6px 8px; }
+.stat__label{ color:#6b7280; }
+.stat__val{ font-weight:800; }
+.stat__val.pos{ color: var(--pos-fg); }
+.stat__val.neg{ color: var(--neg-fg); }
+
 /* Bar vs B&H */
-.bar { height: 6px; border-radius: 999px; background: #F2F4F8; overflow: hidden; border: 1px solid #E7ECF3; margin: 8px 0; }
+.bar { height: 6px; border-radius: 999px; background: #F2F4F8; overflow: hidden; border: 1px solid #E7ECF3; margin: 2px 0 8px; }
 .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); }