Change settings

src/components/CompareChartE.vue

@@ -1,398 +1,343 @@
 <template>
-  <div class="chart-wrap">
-    <v-chart :option="option" autoresize class="h-96 w-full" />
+  <div class="live">
+    <!-- Toolbar: assets + mode -->
+    <header class="toolbar">
+      <div class="toolbar__left">
+        <AssetTabs v-model="asset" :ordered-assets="orderedAssets" />
+      </div>
+      <div class="toolbar__right">
+        <div class="mode">
+          <button class="mode__btn" :class="{ 'is-active': mode==='usd' }" @click="mode='usd'">$</button>
+          <button class="mode__btn" :class="{ 'is-active': mode==='pct' }" @click="mode='pct'">%</button>
+        </div>
+      </div>
+    </header>
+
+    <!-- Chart -->
+    <section class="panel panel--chart">
+      <CompareChartE
+        v-if="winnersForChart.length"
+        :selected="winnersForChart"
+        :visible="true"
+        :mode="mode"
+      />
+      <div v-else class="empty">
+        No data for <strong>{{ asset }}</strong> yet. Check Supabase runs or try another asset.
+      </div>
+    </section>
+
+    <!-- Cards: Buy & Hold + top 4 agents (computed with perf helpers) -->
+    <section class="panel panel--cards" v-if="cards.length">
+      <div class="cards5">
+        <div
+          v-for="c in cards"
+          :key="c.key"
+          class="card"
+          :class="{ 'card--bh': c.kind==='bh', 'card--winner': c.isWinner }"
+        >
+          <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" :title="c.title">{{ c.title }}</div>
+            <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
+          </div>
+
+          <div class="card__meta">
+            <div class="card__sub ellipsize" :title="c.subtitle">{{ c.subtitle }}</div>
+
+            <template v-if="c.kind==='agent' && c.gapUsd != null">
+              <div class="pill" :class="{ neg: c.gapUsd < 0 && !c.isWinner, pos: c.gapUsd >= 0 || c.isWinner }">
+                <span v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</span>
+                <span v-else>{{ signedPct(c.gapPct) }}</span>
+              </div>
+            </template>
+
+            <template v-else>
+              <div class="pill pill--neutral">Buy&nbsp;&amp;&nbsp;Hold</div>
+            </template>
+          </div>
+
+          <div class="card__footer">
+            <div class="card__sub">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
-import VChart from 'vue-echarts'
-import * as echarts from 'echarts/core'
-import { LineChart, ScatterChart } from 'echarts/charts'
-import { GridComponent, LegendComponent, TooltipComponent, DataZoomComponent } from 'echarts/components'
-import { CanvasRenderer } from 'echarts/renderers'
+<script setup>
+import { ref, computed, onMounted, watchEffect } from 'vue'
+import AssetTabs from '../components/AssetTabs.vue'
+import CompareChartE from '../components/CompareChartE.vue'
+import { dataService } from '../lib/dataService'
 
+/* —— use the same helpers as the 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'
-import { getStrategyColor } from '../lib/chartColors'
-
-echarts.use([LineChart, GridComponent, ScatterChart, LegendComponent, TooltipComponent, DataZoomComponent, CanvasRenderer])
-
-const ASSET_CUTOFF = {
-  BTC: '2025-08-01',
-  // ETH: '2025-08-15',
-};
-
-// Stable palette per agent (tweak as you like)
-const AGENT_PALETTE = [
-  '#6D4CFE', // indigo
-  '#FF6B6B', // coral
-  '#10B981', // emerald
-  '#F59E0B', // amber
-  '#06B6D4', // cyan
-  '#A855F7', // violet
-  '#64748B', // slate
-  '#E11D48', // rose
-  '#0EA5E9', // sky
-  '#84CC16', // lime
-]
-
-// pick color by agent name + index (from agentColorIndex map)
-function getAgentColor(agent, idx = 0) {
-  // keep simple + deterministic
-  return AGENT_PALETTE[idx % AGENT_PALETTE.length]
+
+/* ---------- config ---------- */
+const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // (MRNA removed)
+const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
+
+// optional logos
+const AGENT_LOGOS = {
+  // 'DeepFundAgent': new URL('../assets/images/agents/deepfund.png', import.meta.url).href,
+  // 'InvestorAgent': new URL('../assets/images/agents/investor.png', import.meta.url).href,
+  // 'TradeAgent': new URL('../assets/images/agents/trade.png', import.meta.url).href,
+  // 'HedgeFundAgent': new URL('../assets/images/agents/hedge.png', import.meta.url).href,
 }
+const ASSET_ICONS = {
+  BTC: new URL('../assets/images/assets_images/BTC.png', import.meta.url).href,
+  ETH: new URL('../assets/images/assets_images/ETH.png', import.meta.url).href,
+  MSFT: new URL('../assets/images/assets_images/MSFT.png', import.meta.url).href,
+  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,
+}
+
+/* match the chart’s cutoff so numbers align */
+const ASSET_CUTOFF = { BTC: '2025-08-01' }
 
-function drawImageInCircle(ctx, img, cx, cy, radius, { mode = 'contain', padding = 0 } = {}) {
-  if (!img) return;
-  const r = Math.max(0, radius - padding);
-  ctx.save();
-  ctx.beginPath();
-  ctx.arc(cx, cy, r, 0, Math.PI * 2);
-  ctx.clip();
-
-  const iw = img.naturalWidth || img.width;
-  const ih = img.naturalHeight || img.height;
-  if (!iw || !ih) { ctx.restore(); return; }
-
-  // target box (square) that we want to fill with the image
-  const tw = r * 2;
-  const th = r * 2;
-
-  // scale (cover vs contain)
-  const scale = (mode === 'contain')
-    ? Math.min(tw / iw, th / ih)
-    : Math.max(tw / iw, th / ih); // cover (default)
-
-  const dw = iw * scale;
-  const dh = ih * scale;
-
-  // center align
-  const dx = cx - dw / 2;
-  const dy = cy - dh / 2;
-
-  ctx.imageSmoothingEnabled = true;
-  ctx.imageSmoothingQuality = 'high';
-  ctx.drawImage(img, dx, dy, dw, dh);
-  ctx.restore();
+/* ---------- state ---------- */
+const mode = ref('usd') // 'usd' | 'pct'
+const asset = ref('BTC')
+const rowsRef = ref([])
+
+let allDecisions = [] // in-memory decisions for perf calc
+
+/* ---------- bootstrap ---------- */
+onMounted(async () => {
+  try {
+    if (!dataService.loaded && !dataService.loading) {
+      await dataService.load(false)
+    }
+  } 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]
+
+  // pull the same decisions cache the chart uses
+  allDecisions = getAllDecisions() || []
+  if (!allDecisions.length) {
+    try {
+      const cached = await readAllRawDecisions()
+      if (cached?.length) allDecisions = cached
+    } catch {}
+  }
+})
+
+/* ---------- helpers ---------- */
+function score(row) {
+  return typeof row.balance === 'number' ? row.balance : -Infinity
+}
+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)}%`
+
+/* Selected-asset rows (exclude vanilla/vinilla) */
+const filteredRows = computed(() =>
+  (rowsRef.value || []).filter(r => {
+    if (r.asset !== asset.value) return false
+    const name = (r?.agent_name || '').toLowerCase()
+    return !EXCLUDED_AGENT_NAMES.has(name)
+  })
+)
+
+/* Best model per agent (by balance) — still from leaderboard rows for picking winners */
+const winners = computed(() => {
+  const byAgent = new Map()
+  for (const r of filteredRows.value) {
+    const k = r.agent_name
+    const cur = byAgent.get(k)
+    if (!cur || score(r) > score(cur)) byAgent.set(k, r)
+  }
+  return [...byAgent.values()]
+})
+
+/* Chart selections built from winners */
+const winnersForChart = computed(() =>
+  winners.value.map(w => ({
+    agent_name:  w.agent_name,
+    asset:       w.asset,
+    model:       w.model,
+    strategy:    w.strategy,
+    decision_ids: Array.isArray(w.decision_ids) ? w.decision_ids : undefined
+  }))
+)
+
+/* ---------- PERF: compute B&H + strategy the same way as the chart ---------- */
+
+/** build the ordered decision seq for a selection (same logic as chart) */
+function buildSeq(sel) {
+  const { agent_name: agent, asset, model } = sel
+  const ids = Array.isArray(sel.decision_ids) ? sel.decision_ids : []
+  let seq = ids.length
+    ? allDecisions.filter(r => ids.includes(r.id))
+    : allDecisions.filter(r => r.agent_name === agent && r.asset === asset && r.model === model)
+
+  seq.sort((a, b) => (a.date > b.date ? 1 : -1))
+
+  const isCrypto = asset === 'BTC' || asset === 'ETH'
+  let filtered = isCrypto ? seq : filterRowsToNyseTradingDays(seq)
+
+  const cutoff = ASSET_CUTOFF[asset]
+  if (cutoff) {
+    const t0 = new Date(cutoff + 'T00:00:00Z')
+    filtered = filtered.filter(r => new Date(r.date + 'T00:00:00Z') >= t0)
+  }
+  return filtered
 }
 
+/** compute final equity & aligned B&H for a selection */
+function computeEquities(sel) {
+  const seq = buildSeq(sel)
+  if (!seq.length) return null
 
-// helper: convert [ [date, y], ... ] into % since first y
-function toPct(points){
-  if (!Array.isArray(points) || !points.length) return points
-  const y0 = points[0][1]
-  if (typeof y0 !== 'number' || !isFinite(y0) || y0 === 0) return points
-  return points.map(([t, y]) => [t, ((y / y0) - 1) * 100])
+  // strategy params (mirror CompareChartE)
+  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) || []
+
+  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],
+    seq, stratY, bhY
+  }
 }
 
-// --- Agent & Model logo registries (fill with your actual assets)
-const AGENT_LOGOS = {
-  'HedgeFundAgent': new URL('../assets/images/agents_images/hedgefund.png', import.meta.url).href,
-  'DeepFundAgent': new URL('../assets/images/agents_images/deepfund.png', import.meta.url).href,
-  'TradeAgent': new URL('../assets/images/agents_images/trade.png', import.meta.url).href,
-  'InvestorAgent': new URL('../assets/images/agents_images/investor.png', import.meta.url).href,
-  'BTC': new URL('../assets/images/assets_images/BTC.png', import.meta.url).href,
-  'ETH': new URL('../assets/images/assets_images/ETH.png', import.meta.url).href,
-  'MSFT': new URL('../assets/images/assets_images/MSFT.png', import.meta.url).href,
-  'BMRN': new URL('../assets/images/assets_images/BMRN.png', import.meta.url).href,
-  'MRNA': new URL('../assets/images/assets_images/MRNA.png', import.meta.url).href,
-  'TSLA': new URL('../assets/images/assets_images/TSLA.png', import.meta.url).href,
-  // 'InvestorAgent': new URL('../assets/images/agents_images/investor.png', import.meta.url).href,
-};
-const MODEL_LOGOS = {
-  'claude_3_5_haiku_20241022': new URL('../assets/images/models_images/claude.png', import.meta.url).href,
-  'claude_sonnet_4_2025051': new URL('../assets/images/models_images/claude.png', import.meta.url).href,
-  'gpt_4o': new URL('../assets/images/models_images/gpt.png', import.meta.url).href,
-  'gpt_4.1': new URL('../assets/images/models_images/gpt.png', import.meta.url).href,
-  'gemini_2.0_flash': new URL('../assets/images/models_images/gemini.png', import.meta.url).href,
-};
-
-// Canvas badge cache: key = `${agent}|${model}|${color}`
-const BADGE_CACHE = new Map();
-
-const loadImg = (url) => new Promise((resolve, reject) => {
-  if (!url) return resolve(null);
-  const img = new Image();
-  img.crossOrigin = 'anonymous';
-  img.onload = () => resolve(img);
-  img.onerror = () => resolve(null); // fail soft
-  img.src = url;
-});
-
-// Compose a badge: [ colored circle with agent logo ] + [ white rounded square with model logo ]
-async function composeBadge(agent, model, color = '#666') {
-  const key = `circ|${agent}|${model ?? ''}|${color}`;
-  if (BADGE_CACHE.has(key)) return BADGE_CACHE.get(key);
-
-  const aImg = await loadImg(AGENT_LOGOS[agent]);
-  const mImg = await loadImg(MODEL_LOGOS[model]);
-
-  // uniform canvas
-  const S = 30;                   // badge size (px)
-  const R = S / 2;
-  const canvas = document.createElement('canvas');
-  canvas.width = S; canvas.height = S;
-  const ctx = canvas.getContext('2d');
-
-  const ring = 3;           // outer colored ring thickness
-  const padImg = 4;         // extra breathing room for the logo
-
-  // base colored circle (ring)
-  ctx.fillStyle = color;
-  ctx.beginPath(); ctx.arc(R, R, R, 0, Math.PI * 2); ctx.fill();
-
-  // inner white disk
-  ctx.fillStyle = '#fff';
-  ctx.beginPath(); ctx.arc(R, R, R - ring, 0, Math.PI * 2); ctx.fill();
-
-  // agent logo (fit into inner circle)
-  if (aImg) {
-    drawImageInCircle(ctx, aImg, R, R, R - ring, { mode: 'contain', padding: padImg });
+/* compute cards from perf (no leaderboard math) */
+const cards = ref([])
+
+watchEffect(() => {
+  if (!winnersForChart.value.length) {
+    cards.value = []
+    return
   }
 
-  // model puck (bottom-right)
-  if (mImg) {
-    const d = 20, r = d / 2;                  // puck diameter
-    const cx = S - r + 1, cy = S - r + 1;     // slight outside bias
-    // white border
-    ctx.fillStyle = '#fff';
-    ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.fill();
-    // inner image circle
-    ctx.save();
-    ctx.beginPath(); ctx.arc(cx, cy, r - 1.5, 0, Math.PI * 2); ctx.clip();
-    const imgInset = 3;
-    ctx.drawImage(mImg, cx - r + imgInset, cy - r + imgInset, d - imgInset * 2, d - imgInset * 2);
-    ctx.restore();
+  // compute perf for each winner
+  const perfs = winnersForChart.value
+    .map(sel => ({ sel, perf: computeEquities(sel) }))
+    .filter(x => x.perf)
+
+  if (!perfs.length) {
+    cards.value = []
+    return
   }
 
-  const url = canvas.toDataURL('image/png');
-  BADGE_CACHE.set(key, url);
-  return url;
-}
+  // Buy & Hold card: use the first winner’s BH last for the asset
+  const first = perfs[0]
+  const assetCode = first.sel.asset
+  const bhCard = {
+    key: `bh|${assetCode}`,
+    kind: 'bh',
+    title: 'Buy & Hold',
+    subtitle: assetCode,
+    balance: first.perf.bhLast,
+    date: first.perf.date,
+    logo: ASSET_ICONS[assetCode] || null,
+    isWinner: false
+  }
 
-let markerToLine = new Map()
-
-export default defineComponent({
-  name: 'CompareChartE',
-  components: { VChart },
-  props: {
-    selected: { type: Array, default: () => [] },
-    visible: { type: Boolean, default: true },
-    // NEW: $/% toggle
-    mode: { type: String, default: 'usd' } // 'usd' | 'pct'
-  },
-  data(){ return { option: {} } },
-  watch: {
-    selected: { deep: true, handler(){ this.rebuild() } },
-    visible(v){ if (v) this.$nextTick(() => this.rebuild()) },
-    // NEW: rebuild when the toggle changes
-    mode(){ this.rebuild() }
-  },
-  mounted(){ this.$nextTick(() => this.rebuild()) },
-  methods: {
-    async getAll(){
-      let all = getAllDecisions() || []
-      if (!all.length) {
-        try { const cached = await readAllRawDecisions(); if (cached?.length) all = cached } catch {}
-      }
-      return all
-    },
-    async rebuild(){
-      if (!this.visible) return
-      const selected = Array.isArray(this.selected) ? this.selected : []
-      const all = await this.getAll()
-      const groupKeyToSeq = new Map()
-
-      // 1) Build sequences exactly like CompareChart.vue
-      for (const sel of selected) {
-        const { agent_name: agent, asset, model } = sel
-        const ids = Array.isArray(sel.decision_ids) ? sel.decision_ids : []
-        let seq = ids.length ? all.filter(r => ids.includes(r.id))
-                             : all.filter(r => r.agent_name === agent && r.asset === asset && r.model === model)
-        seq.sort((a,b) => (a.date > b.date ? 1 : -1))
-        const isCrypto = asset === 'BTC' || asset === 'ETH'
-        let filtered = isCrypto ? seq : await filterRowsToNyseTradingDays(seq)
-
-        // --- asset-specific cutoff ---
-        const cutoff = ASSET_CUTOFF[asset]
-        if (cutoff) {
-          const t0 = new Date(cutoff + 'T00:00:00Z')
-          filtered = filtered.filter(r => new Date(r.date + 'T00:00:00Z') >= t0)
-        }
-        groupKeyToSeq.set(`${agent}|${asset}|${model}`, { sel, seq: filtered })
-      }
-
-      // 2) Build series using (time,value) pairs
-      const series = []
-      const legend = []
-      const assets = new Set()
-      const agentColorIndex = new Map()
-
-      for (const [_, { sel, seq }] of groupKeyToSeq.entries()) {
-        if (!seq.length) continue
-        const agent = sel.agent_name
-        const asset = sel.asset
-        assets.add(asset)
-
-        const idx = agentColorIndex.get(agent) ?? agentColorIndex.size
-        agentColorIndex.set(agent, idx)
-
-        const cfg = (STRATEGIES || []).find(s => s.id === sel.strategy) || { strategy: 'long_only', tradingMode: 'aggressive', fee: 0.0005, label: 'Selected' }
-        const stratY = computeStrategyEquity(seq, 100000, cfg.fee, cfg.strategy, cfg.tradingMode) || []
-        let points = seq.map((row, i) => [row.date, stratY[i]])
-
-        // NEW: convert to % mode if requested
-        if (this.mode === 'pct') points = toPct(points)
-
-        const name = `${agent} · ${sel.model} · ${cfg.label}`
-        legend.push(name)
-        series.push({
-          name,
-          type: 'line',
-          showSymbol: false,
-          smooth: false,
-          emphasis: {
-            focus: 'series',
-            lineStyle: { width: 3.5 },
-          },
-          lineStyle: { width: 2, color: getAgentColor(agent, idx) },
-          data: points
-        })
-        const lineSeriesIndex = series.length - 1;
-        const last = points?.[points.length - 1];
-        if (last && Number.isFinite(last[1])) {
-          const lineColor = getAgentColor(agent, idx);
-          const badgeUrl = await composeBadge(agent, null, lineColor);  // ← NEW
-          series.push({
-            name: name + ' •badge',
-            type: 'scatter',
-            data: [ last ],
-            symbol: badgeUrl ? `image://${badgeUrl}` : 'circle',
-            symbolSize: 30,
-            z: 20,
-            tooltip: {
-              trigger: 'item',
-              appendToBody: true,
-              formatter: (p) => {
-                const v = p.value?.[1]
-                const val = this.mode === 'pct'
-                  ? `${v >= 0 ? '+' : ''}${Number(v).toFixed(2)}%`
-                  : Number(v ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
-                return [
-                  `<div style="font-weight:600">${sel.agent_name}</div>`,
-                  sel.model ? `<div style="opacity:.8">${sel.model}</div>` : '',
-                  `<div style="opacity:.8">${sel.asset}</div>`,
-                  `<div style="margin-top:4px">${val}</div>`
-                ].join('')
-              }
-            },
-            label: {
-              show: true,
-              position: 'right',
-              padding: [4,8],
-              borderRadius: 10,
-              backgroundColor: lineColor,
-              color: '#fff',
-              fontWeight: 700,
-              formatter: (p) => {
-                const v = p.value?.[1];
-                if (this.mode === 'pct') return (v >= 0 ? '+' : '') + (Number(v).toFixed(2)) + '%';
-                return Number(v ?? 0).toLocaleString(undefined, { style:'currency', currency:'USD', maximumFractionDigits: 2 });
-              }
-            },
-            itemStyle: { color: lineColor }
-          });
-        }
-      }
-
-      // 3) Buy & Hold baseline per asset
-      for (const asset of assets) {
-        const entry = [...groupKeyToSeq.values()].find(v => v.sel.asset === asset)
-        if (!entry) continue
-        const bhY = computeBuyHoldEquity(entry.seq, 100000) || []
-        let bhPoints = entry.seq.map((row, i) => [row.date, bhY[i]])
-
-        // NEW: % mode for baseline too
-        if (this.mode === 'pct') bhPoints = toPct(bhPoints)
-
-        series.push({
-          name: `${asset} · Buy&Hold`,
-          type: 'line',
-          showSymbol: false,
-          lineStyle: { width: 1.5, type: 'dashed' },
-          color: getStrategyColor('', true, 0),
-          data: bhPoints
-        })
-        const lastBH = bhPoints[bhPoints.length - 1]
-        if (lastBH && Number.isFinite(lastBH[1])) {
-          const baseColor = getStrategyColor('', true, 0);
-          const badgeUrl = await composeBadge(asset, null, baseColor);  // ← NEW
-          series.push({
-            name: `${asset} · Buy&Hold •badge`,
-            type: 'scatter',
-            data: [ lastBH ],
-            symbol: badgeUrl ? `image://${badgeUrl}` : 'circle',
-            symbolSize: 30,
-            z: 19,
-            tooltip: { show: false },
-            label: {
-              show: true,
-              position: 'right',
-              padding: [4,8],
-              borderRadius: 10,
-              backgroundColor: baseColor,
-              color: '#fff',
-              fontWeight: 700,
-              formatter: (p) => {
-                const v = p.value?.[1];
-                if (this.mode === 'pct') return (v >= 0 ? '+' : '') + (Number(v).toFixed(2)) + '%';
-                return Number(v ?? 0).toLocaleString(undefined, { style:'currency', currency:'USD', maximumFractionDigits: 2 });
-              }
-            },
-            itemStyle: { color: baseColor }
-          });
-        }
-        legend.push(`${asset} · Buy&Hold`)
-      }
-
-      this.option = {
-        animation: true,
-        grid: { left: 64, right: 200, top: 8, bottom: 52 },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'line' },
-          // NEW: format per mode
-          valueFormatter: v => {
-            if (typeof v !== 'number') return v
-            return this.mode === 'pct'
-              ? `${v.toFixed(2)}%`
-              : v.toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
-          }
-        },
-        legend: { show: false },
-        xAxis: { type: 'time' },
-        yAxis: this.mode === 'pct'
-          ? {
-              type: 'value', scale: true,
-              axisLabel: { formatter: v => `${Number(v).toLocaleString(undefined, { maximumFractionDigits: 0 })}%` }
-            }
-          : {
-              type: 'value', scale: true,
-              axisLabel: { formatter: v => Number(v).toLocaleString(undefined, {style:'currency', currency:'USD', maximumFractionDigits:0 }) }
-            },
-        dataZoom: [{ type: 'inside', throttle: 50 }, { type: 'slider', height: 14, bottom: 36 }],
-        series
-      }
+  // agent cards and winner flag
+  const agentCards = perfs.map(({ sel, perf }) => {
+    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 // set below
     }
-  }
+  })
+
+  const maxBal = Math.max(...agentCards.map(c => c.balance ?? -Infinity))
+  agentCards.forEach(c => { c.isWinner = c.balance === maxBal })
+
+  // top 4 agents + BH card
+  cards.value = [bhCard, ...agentCards.sort((a,b) => b.balance - a.balance).slice(0,4)]
 })
 </script>
 
 <style scoped>
-.chart-wrap { width: 100%; }
-.h-96 { height: 24rem; }
+.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; }
+
+/* panels */
+.panel { background: #fff; border: 1px solid #EDF0F4; 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; }
+
+/* 5 cards in a row */
+.cards5 { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
+@media (max-width: 1200px) { .cards5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 720px)  { .cards5 { grid-template-columns: 1fr; } }
+
+/* card */
+.card { display: grid; 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; 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: start; gap: 12px; }
+
+/* logo */
+.card__logo { width: 44px; height: 44px; border-radius: 999px; background: #F3F4F6; display: grid; place-items: center; 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; }
+.card__badge { position: absolute; right: -6px; top: -6px; font-size: 16px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
+
+/* title: clamp to 2 lines so balance never overlaps */
+.card__title {
+  min-width: 0; font-weight: 800; color: #0F172A;
+  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden; line-height: 1.15;
+}
+
+/* right-side balance never shrinks */
+.card__balance { white-space: nowrap; font-weight: 900; color: #0F172A; font-size: 20px; }
+
+/* meta row + footer */
+.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; }
+.card__footer { margin-top: -2px; }
+
+/* pills */
+.pill { 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; }
+.pill.pos { background: #DCFCE7; color: #166534; }
+.pill.pill--neutral { background: #EEF2F7; color: #0F172A; }
 </style>