Change settings

src/components/CompareChartE.vue

@@ -361,7 +361,7 @@ export default defineComponent({
 
       this.option = {
         animation: true,
-        grid: { left: 56, right: 240, top: 16, bottom: 60 },
+        grid: { left: 64, right: 200, top: 8, bottom: 52 },
         tooltip: {
           trigger: 'axis',
           axisPointer: { type: 'line' },
@@ -373,7 +373,7 @@ export default defineComponent({
               : v.toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
           }
         },
-        legend: { type: 'scroll', bottom: 8, icon: 'roundRect', itemGap: 10, data: legend },
+        legend: { show: false },
         xAxis: { type: 'time' },
         yAxis: this.mode === 'pct'
           ? {

src/views/LiveView.vue

@@ -1,53 +1,65 @@
 <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 class="live">
+    <!-- Toolbar: assets + mode -->
+    <header class="toolbar">
+      <div class="toolbar__left">
+        <AssetTabs v-model="asset" />
+      </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 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>
+    </header>
+
+    <!-- Chart panel -->
+    <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>
+
+    <!-- Winner cards -->
+    <section v-if="winnersSorted.length" class="panel panel--cards">
+      <div class="cards">
+        <div
+          v-for="row in winnersSorted"
+          :key="row.agent_name+'|'+row.asset+'|'+row.model"
+          class="card">
+          <div class="card__left">
+            <div class="card__title" :title="row.agent_name">{{ row.agent_name }}</div>
+            <div class="card__sub" :title="row.model">{{ row.model }}</div>
+          </div>
+          <div class="card__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>
+    </section>
   </div>
 </template>
 
@@ -66,13 +78,12 @@ const agents = ref([])
 onMounted(async () => {
   try {
     if (!dataService.loaded && !dataService.loading) {
-      await dataService.load(false)  // uses existing pipeline; populates tableRows/decisions cache
+      await dataService.load(false)
     }
   } 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 ----
@@ -94,7 +105,7 @@ const winners = computed(() => {
   return [...byAgent.values()]
 })
 
-// Series selections for the chart (reuse compare logic in CompareChartE)
+// Series selections for the chart
 const winnersForChart = computed(() =>
   winners.value.map(w => ({
     agent_name: w.agent_name,
@@ -110,54 +121,109 @@ const winnersSorted = computed(() => [...winners.value].sort((a,b) => score(b) -
 </script>
 
 <style scoped>
-.live-view { max-width: 1400px; margin: 0 auto; }
+/* page container */
+.live {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 12px 20px 28px;
+}
 
-/* toggle buttons */
-.switch-btn {
-  padding: 6px 10px;
-  border: 1px solid #1f2937; /* gray-800 */
-  border-radius: 8px;
+/* sticky 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; /* keeps tabs visible while scrolling */
+}
+.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;
-  line-height: 1;
-  transition: background .12s ease, color .12s ease, transform .06s ease;
+  color: #0F172A;
+  transition: all .12s ease;
 }
-.switch-btn:hover { transform: translateY(-1px); }
-.switch-btn--active {
-  background: #111827; /* gray-900 */
+.mode__btn:hover { transform: translateY(-1px); }
+.mode__btn.is-active {
+  background: #0F172A;
   color: #fff;
-  border-color: #111827;
+  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 state */
 .empty {
-  padding: 12px 14px;
-  border: 1px dashed #d1d5db; /* gray-300 */
+  padding: 14px;
+  border: 1px dashed #D6DAE1;
   border-radius: 12px;
-  color: #6b7280; /* gray-500 */
-  font-size: 0.9rem;
+  color: #6B7280;
+  font-size: .92rem;
+}
+
+/* cards grid */
+.cards {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (min-width: 1280px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
 
-/* winner cards */
+/* card */
 .card {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 1fr auto;
   align-items: center;
-  gap: 12px;
+  gap: 10px 12px;
   padding: 14px 16px;
-  border: 1px solid #e5e7eb; /* gray-200 */
-  border-radius: 16px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+  border: 1px solid #EEF1F6;
+  border-radius: 14px;
   background: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,.04);
+}
+.card__title {
+  font-weight: 700;
+  color: #0F172A;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.card__sub {
+  font-size: 12px;
+  color: #5B6476;
+  opacity: .8;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-.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;
+.card__balance {
+  font-weight: 800;
+  font-size: 18px;
+  line-height: 1.1;
+  color: #0F172A;
+  text-align: right;
 }
+.card__left { min-width: 0; }
+.card__right { display: grid; gap: 4px; justify-items: end; }
+
+/* small utility */
+strong { font-weight: 700; }
 </style>