Change settings

src/views/LiveView.vue

@@ -266,7 +266,19 @@ watch(
         const gapUsd = perf.stratLast - perf.bhLast
         const gapPct = perf.bhLast > 0 ? (perf.stratLast / perf.bhLast - 1) : 0
         const profitUsd = (perf.stratLast ?? 0) - 100000
-        return { => {
+        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,
+          profitUsd,
+          isWinner: false
+        }
+      }) => {
         const gapUsd = perf.stratLast - perf.bhLast
         const gapPct = perf.bhLast > 0 ? (perf.stratLast / perf.bhLast - 1) : 0
         return {
@@ -320,17 +332,21 @@ watch(
 /* empty */
 .empty { padding: 14px; border: 1px dashed #D6DAE1; border-radius: 12px; color: #6B7280; font-size: .92rem; }
 
-/* NEW GRID: fluid, auto-fit tiles */
+/* NEW 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 auto; /* rows: top, meta, foot */
-  gap: 14px;
-  padding: 16px;
-  min-height: 200px;
+  grid-template-rows: auto auto; /* header, kpis */
+  gap: 16px;
+  padding: 18px;
+  min-height: 220px;
   border: 1px solid #EEF1F6;
   border-radius: 16px;
   background: #fff;
@@ -340,18 +356,30 @@ watch(
 .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: 10px; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
+.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__row--top {
-  grid-template-columns: 1fr auto; /* info | metrics */
-  column-gap: 12px;
-}
-.card2__row--meta { grid-template-columns: 1fr; }
-.card2__row--foot { grid-template-columns: 1fr auto; font-size: 12px; color: #5B6476; opacity: .9; margin-top: -4px; }
+.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; }
+.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; }