Change settings

src/views/LiveView.vue

@@ -1,16 +1,88 @@
-<!-- src/views/LiveView.vue -->
+<template>
+  <div class="live-view px-4 py-3 space-y-3">
+    <!-- Asset tabs (logos, no prices) -->
+    <AssetTabs v-model="asset" />
+
+    <!-- $ / % mode switch -->
+    <div class="flex items-center gap-2">
+      <button
+        class="switch-btn"
+        :class="mode==='usd' ? 'switch-btn--active' : ''"
+        @click="mode='usd'">
+        $
+      </button>
+      <button
+        class="switch-btn"
+        :class="mode==='pct' ? 'switch-btn--active' : ''"
+        @click="mode='pct'">
+        %
+      </button>
+    </div>
+
+    <!-- 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>
+
+    <!-- Winner cards (best balance per agent) -->
+    <div v-if="winnersSorted.length" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      <div
+        v-for="row in winnersSorted"
+        :key="row.agent_name+'|'+row.asset+'|'+row.model"
+        class="card">
+        <div class="min-w-0">
+          <div class="card-title truncate">{{ row.agent_name }}</div>
+          <div class="card-sub truncate">{{ row.model }}</div>
+        </div>
+        <div class="text-right">
+          <div class="card-balance">{{ fmtUSD(row.balance) }}</div>
+          <div class="card-sub">
+            EOD {{ row.end_date ? new Date(row.end_date).toLocaleDateString() : (row.last_nav_ts ? new Date(row.last_nav_ts).toLocaleDateString() : '-') }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import CompareChartE from '../components/CompareChartE.vue'
 import AssetTabs from '../components/AssetTabs.vue'
-import { dataService } from '../lib/dataService.js'
+import CompareChartE from '../components/CompareChartE.vue'
+import { dataService } from '../lib/dataService'
 
-const ASSETS = ['BTC','ETH','SOL','BNB','DOGE','XRP']
-const asset = ref(ASSETS[0])
+// ---- state ----
+const mode = ref('usd') // 'usd' | 'pct'
+const asset = ref('BTC')
 const agents = ref([])
 
-function score(row){ return typeof row.balance === 'number' ? row.balance : -Infinity }
+// ---- load once, copy rows from dataService ----
+onMounted(async () => {
+  try {
+    if (!dataService.loaded && !dataService.loading) {
+      await dataService.load(false)  // uses existing pipeline; populates tableRows/decisions cache
+    }
+  } catch (e) {
+    console.error('LiveView: dataService.load failed', e)
+  }
+  agents.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+  // if first asset isn’t present, AssetTabs will nudge selection to the first available
+})
+
+// ---- 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 })
 
+// Best model per agent for the selected asset (by balance)
 const winners = computed(() => {
   const rows = (agents.value || []).filter(r => r.asset === asset.value)
   const byAgent = new Map()
@@ -22,6 +94,7 @@ const winners = computed(() => {
   return [...byAgent.values()]
 })
 
+// Series selections for the chart (reuse compare logic in CompareChartE)
 const winnersForChart = computed(() =>
   winners.value.map(w => ({
     agent_name: w.agent_name,
@@ -32,46 +105,59 @@ const winnersForChart = computed(() =>
   }))
 )
 
+// Bottom cards sorted by balance
 const winnersSorted = computed(() => [...winners.value].sort((a,b) => score(b) - score(a)))
-
-const fmtUSD = n => (n ?? 0).toLocaleString(undefined,{ style:'currency', currency:'USD', maximumFractionDigits:2 })
-
-onMounted(async () => {
-  try {
-     // run the service load if needed (this populates tableRows + caches decisions)
-     if (!dataService.loaded) await dataService.load(false)
-   } catch (e) {
-     console.error('LiveView: dataService.load failed', e)
-   }
-   // copy rows to local reactive state
-   agents.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
-   console.log('LiveView: loaded rows =', agents.value.length)
-})
 </script>
 
-<template>
-  <div class="p-4 space-y-4">
-    <AssetTabs v-model="asset" />
+<style scoped>
+.live-view { max-width: 1400px; margin: 0 auto; }
 
-    <CompareChartE v-if="winnersForChart.length" :selected="winnersForChart" :visible="true" />
-    <div v-else class="p-4 text-sm text-gray-500 border rounded-lg">
-      No data for {{ asset }} yet. Make sure Supabase has decisions/runs for this asset and that
-      <code>dataService.load()</code> completes. Check console for “LiveView: loaded rows” count.
-    </div>
+/* toggle buttons */
+.switch-btn {
+  padding: 6px 10px;
+  border: 1px solid #1f2937; /* gray-800 */
+  border-radius: 8px;
+  background: #fff;
+  font-weight: 700;
+  line-height: 1;
+  transition: background .12s ease, color .12s ease, transform .06s ease;
+}
+.switch-btn:hover { transform: translateY(-1px); }
+.switch-btn--active {
+  background: #111827; /* gray-900 */
+  color: #fff;
+  border-color: #111827;
+}
 
+/* empty state */
+.empty {
+  padding: 12px 14px;
+  border: 1px dashed #d1d5db; /* gray-300 */
+  border-radius: 12px;
+  color: #6b7280; /* gray-500 */
+  font-size: 0.9rem;
+}
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-      <div v-for="row in winnersSorted" :key="row.agent_name+'|'+row.asset+'|'+row.model"
-           class="p-4 rounded-2xl border shadow-sm flex justify-between items-center">
-        <div class="min-w-0">
-          <div class="font-semibold truncate">{{ row.agent_name }}</div>
-          <div class="text-xs opacity-70 truncate">{{ row.model }}</div>
-        </div>
-        <div class="text-right">
-          <div class="font-bold text-xl leading-6">{{ fmtUSD(row.balance) }}</div>
-          <div class="text-xs opacity-70">EOD {{ (row.end_date || row.last_nav_ts) ? new Date(row.end_date || row.last_nav_ts).toLocaleDateString() : '-' }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
+/* winner cards */
+.card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid #e5e7eb; /* gray-200 */
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+  background: #fff;
+}
+.card-title { font-weight: 600; }
+.card-sub { font-size: 12px; opacity: 0.65; }
+.card-balance { font-weight: 800; font-size: 18px; line-height: 1.1; }
+
+/* small util */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>