Change settings

src/views/RequestView.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="arena-page">
+
     <!-- ============== ASSETS ============== -->
     <section class="section">
       <header class="section-head">
         <h2 class="section-title">
           <span class="ama-gradient">Assets in the Arena</span>
         </h2>
-        <p class="section-sub">Live from dataService • B&H sparkline • 1M change • coverage</p>
+        <p class="section-sub">Four-up grid • type • 1-month price sparkline • quick stats</p>
       </header>
 
       <div class="grid grid-assets-4">
@@ -24,77 +25,22 @@
 
           <div class="asset-body">
             <div class="spark-wrap">
-              <Sparkline :data="a.month" :color="a.sparkColor" />
+              <MiniEchart :data="a.month" :color="a.sparkColor" />
             </div>
 
             <div class="asset-stats">
-              <div class="stat">
-                <div class="stat-label">1M</div>
-                <div class="stat-value mono" :class="a.change1m >= 0 ? 'pos' : 'neg'">
-                  {{ signedPct(a.change1m) }}
-                </div>
-              </div>
-              <div class="stat">
-                <div class="stat-label">Runs</div>
-                <div class="stat-value mono">{{ a.runs }}</div>
-              </div>
-              <div class="stat">
-                <div class="stat-label">Agents</div>
-                <div class="stat-value mono">{{ a.agents }}</div>
-              </div>
-              <div class="stat">
-                <div class="stat-label">Days</div>
-                <div class="stat-value mono">{{ a.days }}</div>
-              </div>
+              
             </div>
-
-            <p class="asset-desc muted clamp-2" :title="a.desc">{{ a.desc }}</p>
-          </div>
-
-          <div class="asset-foot">
-            <div class="asset-bar" :style="{ '--pct': a.coveragePct + '%' }"></div>
-            <div class="asset-foot-row">
-              <span class="muted">Coverage</span>
-              <span class="mono">{{ Math.round(a.coveragePct) }}%</span>
-            </div>
-            <div class="asset-foot-row">
-              <span class="muted">EOD</span>
-              <span class="mono">{{ a.eod || '—' }}</span>
+            
+              <div class="stat-value mono" :class="g.winRate >= 0.5 ? 'pos' : 'neg'">
+                {{ Math.round(g.winRate * 100) }}%
+              </div>
             </div>
-          </div>
-        </article>
-      </div>
-
-      <div class="cta-row">
-        <a :href="assetFormUrl" target="_blank" rel="noopener" class="btn-cta link-btn">
-          <i class="pi pi-plus mr-2" /> Vote to Add Asset
-        </a>
-      </div>
-    </section>
-
-    <!-- ============== AGENTS (no performance) ============== -->
-    <section class="section">
-      <header class="section-head">
-        <h2 class="section-title">
-          <span class="ama-gradient">Agents in the Arena</span>
-        </h2>
-        <p class="section-sub">Tournament cards • GitHub & arXiv links • no performance</p>
-      </header>
-
-      <div class="grid grid-agents">
-        <article v-for="g in agents" :key="g.name" class="card agent-card">
-          <div class="agent-top">
-            <div class="agent-badge" :style="{ borderColor: g.color }">
-              <div class="agent-ring" :style="{ background: g.color }"></div>
-              <img :src="g.logo" :alt="g.name" class="agent-logo" />
+            
+              <div class="stat-value mono">{{ g.trades }}</div>
             </div>
-            <div class="agent-title">
-              <div class="agent-name truncate" :title="g.name">{{ g.name }}</div>
-              <div class="agent-links">
-                <a :href="g.github" target="_blank" rel="noopener" class="link">GitHub</a>
-                <span class="dot">•</span>
-                <a :href="g.arxiv" target="_blank" rel="noopener" class="link">arXiv</a>
-              </div>
+            
+              <div class="stat-value mono">{{ g.days }}</div>
             </div>
           </div>
 
@@ -105,7 +51,7 @@
         </article>
       </div>
 
-      <!-- ========== Info-only Agent Integration Guide + Form ========== -->
+      <!-- ================= Integration Guide (info-only, no external UI libs) ================= -->
       <div class="card integration-guide">
         <h3>Agent Integration Guide</h3>
 
@@ -116,7 +62,7 @@
 
         <div class="guide-section">
           <h4>Input (What we send to your agent)</h4>
-<pre class="code-block">{
+          <pre class="code-block">{
   "date": "2025-10-24",
   "price": {"BTC": 67890.50},
   "news": {"BTC": "Bitcoin news..."},
@@ -139,114 +85,132 @@
 
         <div class="guide-section">
           <h4>Output (What we expect from your agent)</h4>
-<pre class="code-block">{
+          <pre class="code-block">{
   "recommended_action": "BUY"
 }</pre>
           <p class="note"><strong>Valid actions:</strong> <code>"BUY"</code>, <code>"SELL"</code>, or <code>"HOLD"</code> (uppercase)</p>
         </div>
       </div>
 
-      <div class="card form-container">
-        <h3 class="form-title">Submit Your Agent</h3>
-        <form @submit.prevent="submitAgent">
-          <div class="field">
-            <label for="agentName">Agent Name</label>
-            <input id="agentName" v-model.trim="agentForm.name" placeholder="e.g., MyTradingAgent" />
-          </div>
-          <div class="field">
-            <label for="agentEndpoint">API Endpoint</label>
-            <input id="agentEndpoint" v-model.trim="agentForm.endpoint" placeholder="https://api.example.com/trading-agent" />
-          </div>
-          <div class="field">
-            <label for="agentDescription">Description (Optional)</label>
-            <textarea id="agentDescription" v-model.trim="agentForm.description" placeholder="Brief description of your agent..." rows="3"></textarea>
-          </div>
-          <button type="submit" class="btn-cta w-full" :disabled="!agentForm.name || !agentForm.endpoint">
-            <span class="mr-2">📨</span> Submit Agent
-          </button>
-          <p v-if="agentForm.message" class="form-message is-success">
-            {{ agentForm.message }}
-          </p>
-        </form>
-      </div>
+      <!-- ================= Submit Agent (button only) ================= -->
+<div class="cta-row">
+  <a :href="agentFormUrl" target="_blank" rel="noopener" class="btn-cta link-btn">
+    <i class=\"pi pi-send mr-2\" /> Submit Agent (Google Form)
+  </a>
+</div>
     </section>
+
   </div>
 </template>
 
 <script>
-import { dataService } from '../lib/dataService'
-import { getAllDecisions } from '../lib/dataCache'
-import { readAllRawDecisions } from '../lib/idb'
-import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
-import { computeBuyHoldEquity } from '../lib/perf'
-
 /**
  * Minimal inline sparkline component (SVG) — no external deps.
- * Responsive via viewBox/preserveAspectRatio.
+ * NOTE: width/height handled via viewBox for responsive fit.
  */
-const Sparkline = {
-  name: 'Sparkline',
+import * as echarts from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([LineChart, GridComponent, TooltipComponent, CanvasRenderer])
+
+const MiniEchart = {
+  name: 'MiniEchart',
   props: {
-    data: { type: Array, required: true }, // array of numbers
-    color: { type: String, default: '#22c55e' },
-    width: { type: Number, default: 420 },
-    height: { type: Number, default: 90 },
-    strokeWidth: { type: Number, default: 2 }
+    data: { type: Array, required: true },
+    color: { type: String, default: '#22c55e' }
   },
-  computed: {
-    path() {
-      const d = this.data || []
-      if (!d.length) return ''
-      const w = this.width
-      const h = this.height
-      const min = Math.min(...d), max = Math.max(...d)
-      const range = max - min || 1
-      const step = d.length === 1 ? w : w / (d.length - 1)
-      const points = d.map((v, i) => {
-        const x = i * step
-        const y = h - ((v - min) / range) * h
-        return [x, y]
-      })
-      return points.reduce((acc, [x, y], i) => (i ? acc + ` L ${x},${y}` : `M ${x},${y}`), '')
-    },
-    lastIsUp() {
-      const d = this.data || []
-      return d.length >= 2 ? d[d.length - 1] >= d[0] : true
+  mounted() {
+    const el = this.$refs.c
+    this._chart = echarts.init(el)
+    const d = Array.isArray(this.data) ? this.data : []
+    this._chart.setOption({
+      animation: true,
+      grid: { left: 0, right: 0, top: 0, bottom: 0 },
+      xAxis: { type: 'category', show: false, boundaryGap: false, data: d.map((_, i) => i) },
+      yAxis: { type: 'value', show: false, scale: true },
+      tooltip: { show: false },
+      color: [this.color || '#22c55e'],
+      series: [{
+        type: 'line',
+        data: d,
+        showSymbol: false,
+        smooth: 0.35,
+        lineStyle: { width: 2 },
+        areaStyle: { opacity: 0.15 }
+      }]
+    })
+  },
+  watch: {
+    data(newVal) {
+      if (!this._chart) return
+      const d = Array.isArray(newVal) ? newVal : []
+      this._chart.setOption({ xAxis: { data: d.map((_, i) => i) }, series: [{ data: d }] })
     }
   },
-  template: `
-    <svg :viewBox="\`0 0 \${width} \${height}\`" class="spark-svg" preserveAspectRatio="none">
-      <defs>
-        <linearGradient id="sparkFill" x1="0" y1="0" x2="0" y2="1">
-          <stop :stop-color="color" stop-opacity="0.22" offset="0%"/>
-          <stop :stop-color="color" stop-opacity="0.02" offset="100%"/>
-        </linearGradient>
-      </defs>
-      <path :d="path + ' L ' + width + ',' + height + ' L 0,' + height + ' Z'"
-            fill="url(#sparkFill)" />
-      <path :d="path" :stroke="color" :stroke-width="strokeWidth" fill="none"
-            :class="lastIsUp ? 'spark-up' : 'spark-down'"/>
-    </svg>
-  `
+  beforeUnmount() { if (this._chart) { this._chart.dispose(); this._chart = null } },
+  template: `<div ref="c" class="echart-mini"></div>`
 }
 
 export default {
   name: 'RequestView',
-  components: { Sparkline },
+  components: { MiniEchart },
   data() {
     return {
       assetFormUrl: 'https://forms.gle/your-asset-request-form',
 
-      // dynamic, filled from dataService
-      assets: [],
-      // keep the agent section perf-free
+      agentFormUrl: 'https://forms.gle/your-agent-submit-form',
+
+      // ===== Demo data (replace with live) =====
+      assets: [
+        {
+          code: 'BTC',
+          name: 'Bitcoin',
+          type: 'Crypto',
+          icon: new URL('../assets/images/assets_images/BTC.png', import.meta.url).href,
+          month: [62000, 63500, 62800, 64200, 65000, 66100, 65500, 67000, 67800, 67550, 68220, 69000],
+          sparkColor: '#f59e0b',
+          change1m: 0.112, runs: 86, agents: 4, eod: '10/25/2025',
+          coveragePct: 92, desc: 'Blue-chip crypto asset; 24/7 trading.'
+        },
+        {
+          code: 'ETH',
+          name: 'Ethereum',
+          type: 'Crypto',
+          icon: new URL('../assets/images/assets_images/ETH.png', import.meta.url).href,
+          month: [2500, 2480, 2525, 2600, 2580, 2630, 2680, 2700, 2660, 2720, 2735, 2790],
+          sparkColor: '#6366f1',
+          change1m: 0.116, runs: 84, agents: 3, eod: '10/25/2025',
+          coveragePct: 88, desc: 'Smart-contract platform; high on-chain activity.'
+        },
+        {
+          code: 'MSFT',
+          name: 'Microsoft',
+          type: 'Stock',
+          icon: new URL('../assets/images/assets_images/MSFT.png', import.meta.url).href,
+          month: [406, 409, 404, 415, 420, 422, 418, 425, 430, 432, 429, 435],
+          sparkColor: '#22c55e',
+          change1m: 0.071, runs: 60, agents: 4, eod: '10/25/2025',
+          coveragePct: 77, desc: 'Megacap technology equity; NYSE trading days.'
+        },
+        {
+          code: 'BMRN',
+          name: 'BioMarin',
+          type: 'Stock',
+          icon: new URL('../assets/images/assets_images/BMRN.png', import.meta.url).href,
+          month: [82, 83, 82.5, 84, 85, 84.4, 86.2, 85.8, 87.1, 88, 87.6, 89.2],
+          sparkColor: '#06b6d4',
+          change1m: 0.086, runs: 51, agents: 3, eod: '10/25/2025',
+          coveragePct: 71, desc: 'Biotech equity; catalyst-driven volatility.'
+        },
+      ],
+
       agents: [
         {
           name: 'InvestorAgent',
           github: 'https://github.com/your-org/investor-agent',
           arxiv: 'https://arxiv.org/abs/xxxyyy',
-          strategy: 'Aggressive Long Only',
-          focus: 'BTC, MSFT',
+          strategy: 'Aggressive Long Only', focus: 'BTC, MSFT',
           color: 'linear-gradient(90deg,#ffd700,#eab308)',
           logo: new URL('../assets/images/agents_images/investor.png', import.meta.url).href
         },
@@ -254,8 +218,7 @@ export default {
           name: 'TradeAgent',
           github: 'https://github.com/your-org/trade-agent',
           arxiv: 'https://arxiv.org/abs/aaabbb',
-          strategy: 'Aggressive Long Only',
-          focus: 'BTC, ETH',
+          strategy: 'Aggressive Long Only', focus: 'BTC, ETH',
           color: 'linear-gradient(90deg,#4338ca,#6d28d9)',
           logo: new URL('../assets/images/agents_images/tradeagent.png', import.meta.url).href
         },
@@ -263,8 +226,7 @@ export default {
           name: 'DeepFundAgent',
           github: 'https://github.com/your-org/deepfund-agent',
           arxiv: 'https://arxiv.org/abs/cccdde',
-          strategy: 'Aggressive Long Only',
-          focus: '—',
+          strategy: 'Aggressive Long Only', focus: '—',
           color: 'linear-gradient(90deg,#0ea5e9,#22d3ee)',
           logo: new URL('../assets/images/agents_images/deepfund.png', import.meta.url).href
         },
@@ -272,51 +234,13 @@ export default {
           name: 'HedgeFundAgent',
           github: 'https://github.com/your-org/hedgefund-agent',
           arxiv: 'https://arxiv.org/abs/fffggg',
-          strategy: 'Aggressive Long Only',
-          focus: 'BMRN, TSLA',
+          strategy: 'Aggressive Long Only', focus: 'BMRN, TSLA',
           color: 'linear-gradient(90deg,#f43f5e,#ef4444)',
           logo: new URL('../assets/images/agents_images/hedgefund.png', import.meta.url).href
         }
-      ],
-
-      // internal live state
-      rowsRef: [],
-      allDecisions: [],
-      unsubscribe: null,
-
-      // icon map
-      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,
-      }
+      ]
     }
   },
-
-  mounted() {
-    this.unsubscribe = dataService.subscribe((state) => {
-      this.rowsRef = Array.isArray(state.tableRows) ? state.tableRows : []
-      this.rebuildAssets().catch(() => {})
-    })
-    this.rowsRef = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
-    if (!dataService.loaded && !dataService.loading) {
-      dataService.load(false).catch(e => console.error('RequestView: load failed', e))
-    }
-
-    // warm decision cache
-    this.allDecisions = getAllDecisions() || []
-    if (!this.allDecisions.length) {
-      readAllRawDecisions().then(cached => { if (cached?.length) this.allDecisions = cached })
-    }
-    this.rebuildAssets().catch(() => {})
-  },
-
-  beforeUnmount() {
-    if (this.unsubscribe) { this.unsubscribe(); this.unsubscribe = null }
-  },
-
   methods: {
     signedMoney(n) {
       const v = Number(n || 0)
@@ -329,109 +253,13 @@ export default {
       const v = Number(p || 0) * 100
       const s = v >= 0 ? '+' : '−'
       return `${s}${Math.abs(v).toFixed(2)}%`
-    },
-    fmtUSD(n) {
-      return (n ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
-    },
-
-    /* ===== Dynamic assets built from B&H equity ===== */
-    async buildAssetSeq(assetCode) {
-      let seq = (this.allDecisions || []).filter(r => r.asset === assetCode)
-      seq.sort((a,b) => (a.date > b.date ? 1 : -1))
-      const isCrypto = assetCode === 'BTC' || assetCode === 'ETH'
-      if (!isCrypto) {
-        try { seq = await filterRowsToNyseTradingDays(seq) } catch {}
-      }
-      return seq
-    },
-    sampleSeries(values, n = 12) {
-      if (!Array.isArray(values) || !values.length) return []
-      if (values.length <= n) return values.slice(-n)
-      const step = (values.length - 1) / (n - 1)
-      const out = []
-      for (let i = 0; i < n; i++) out.push(values[Math.round(i * step)])
-      return out
-    },
-    pctChange(a, b) {
-      if (a == null || b == null || a === 0) return 0
-      return (b / a) - 1
-    },
-
-    async rebuildAssets() {
-      const assetsInRows = Array.from(new Set((this.rowsRef || []).map(r => r.asset))).filter(Boolean)
-      if (!assetsInRows.length) { this.assets = []; return }
-
-      const cards = []
-      for (const code of assetsInRows) {
-        const seq = await this.buildAssetSeq(code)
-        if (!seq.length) continue
-
-        // Use B&H equity as the normalized “price/equity” series for spark and change
-        let bh = []
-        try { bh = computeBuyHoldEquity(seq, 100000) || [] } catch { bh = [] }
-        const lastIdx = bh.length - 1
-        if (lastIdx < 0) continue
-
-        const lastDate = seq[lastIdx]?.date || null
-        const spark = this.sampleSeries(bh.map(v => v), 12)
-        const change1m = this.pctChange(spark[0], spark[spark.length - 1])
-
-        // trading day span
-        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 {}
-
-        // runs & agents from rows table
-        const rowsForAsset = (this.rowsRef || []).filter(r => r.asset === code)
-        const runs = rowsForAsset.length
-        const agents = new Set(rowsForAsset.map(r => r.agent_name)).size
-
-        // coverage ~ unique dates present / span
-        const uniqueDates = new Set(seq.map(r => r.date)).size
-        const coveragePct = Math.max(0, Math.min(100, Math.round((uniqueDates / Math.max(1, days)) * 100)))
-
-        cards.push({
-          code,
-          name: code,
-          type: (code === 'BTC' || code === 'ETH') ? 'Crypto' : 'Stock',
-          icon: this.ASSET_ICONS[code] || null,
-          month: spark,
-          sparkColor: (code === 'BTC') ? '#f59e0b' : (code === 'ETH' ? '#6366f1' : '#22c55e'),
-          change1m,
-          runs, agents, days,
-          eod: lastDate,
-          coveragePct,
-          desc: (code === 'BTC') ? 'Blue-chip crypto asset; 24/7 trading.'
-               : (code === 'ETH') ? 'Smart-contract platform; high on-chain activity.'
-               : 'Equity; regular trading days.'
-        })
-      }
-
-      // Prefer a stable display order
-      const order = ['BTC','ETH','MSFT','BMRN','TSLA']
-      cards.sort((a,b) => (order.indexOf(a.code) - order.indexOf(b.code)))
-      this.assets = cards
-    },
-
-    submitAgent() {
-      if (!this.agentForm.name || !this.agentForm.endpoint) return
-      this.agentForm.message = `Thanks, ${this.agentForm.name}! We will review your endpoint: ${this.agentForm.endpoint}`
-      this.agentForm.description = ''
-    }
-  },
-
-  // simple local form state
-  created() {
-    this.agentForm = { name: '', endpoint: '', description: '', message: '' }
-  }
+    }  }
 }
 </script>
 
 <style scoped>
 /* ===== AMA Core ===== */
+:root{ --card-pad:12px; --radius:14px; }
 .ama-gradient{
   background: linear-gradient(90deg, rgb(0,0,185), #7b2cbf, #d946ef, rgb(240,0,15));
   -webkit-background-clip: text; background-clip: text; color: transparent;
@@ -439,7 +267,8 @@ export default {
 
 .arena-page{
   max-width:1280px; margin:0 auto;
-  padding:16px 20px 120px; background:#fff;
+  padding:16px 20px 120px; /* leave space for fixed footer */
+  background:#fff;
 }
 
 /* ===== Helpers ===== */
@@ -453,26 +282,29 @@ export default {
 .section-title{ font-size:clamp(1.2rem, 1.2rem + 0.4vw, 1.6rem); font-weight:800; letter-spacing:-0.02em; display:inline-block; }
 .section-sub{ margin-top:4px; color:#6b7280; }
 
-/* ===== Grids ===== */
+/* ===== Grid layouts ===== */
 .grid{ display:grid; gap:14px; min-width:0; }
 .grid-assets-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
 .grid-agents{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
+
 @media (max-width: 1200px){ .grid-assets-4{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
 @media (max-width: 900px){ .grid-assets-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
 @media (max-width: 620px){ .grid-assets-4{ grid-template-columns: 1fr; } }
 
 /* ===== Card base ===== */
 .card{
-  background:#ffffff; border:1px solid #E7ECF3; border-radius:14px;
+  background:#ffffff; border:1px solid #E7ECF3; border-radius:var(--radius);
   box-shadow:0 1px 2px rgba(16,24,40,.03), 0 4px 12px rgba(16,24,40,.04);
   transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
-  min-width:0;
+  min-width:0; /* allow children to shrink in grid */
 }
 .card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,24,40,.08); border-color:#D9E2EF; }
 
 /* ===== Assets ===== */
-.asset-card{ padding:12px; display:flex; flex-direction:column; gap:10px; }
-.asset-head{ display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; min-width:0; }
+.asset-card{ padding:var(--card-pad); display:flex; flex-direction:column; gap:10px; }
+.asset-head{
+  display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; min-width:0;
+}
 .asset-logo-wrap{ width:44px; height:44px; border-radius:12px; background:#f3f4f6; display:grid; place-items:center; border:1px solid #E7ECF3; overflow:hidden; }
 .asset-logo{ width:70%; height:70%; object-fit:contain; }
 .asset-name{ min-width:0; }
@@ -480,13 +312,15 @@ export default {
 .asset-full{ font-size:12px; color:#64748b; }
 .type-badge{
   border-radius:999px; padding:4px 8px; font-size:12px; font-weight:700;
-  border:1px solid #E7ECF3; background:#F6F8FB; color:#0f172a; white-space:nowrap;
+  border:1px solid #E7ECF3; background:#F6F8FB; color:#0f172a; white-space:nowrap; max-width:100%;
 }
 .type-crypto{ background:#f8fbff; border-color:#e0e7ff; color:#1e3a8a; }
 .type-stock { background:#f6fffb; border-color:#d9fbe6; color:#064e3b; }
+.type-etf   { background:#fff7f7; border-color:#ffe4e6; color:#7f1d1d; }
 
-.asset-body{ display:flex; flex-direction:column; gap:10px; }
+.asset-body{ display:flex; flex-direction:column; gap:10px; min-height:0; }
 .spark-wrap{ width:100%; height:90px; overflow:hidden; border-radius:8px; }
+.echart-mini{ width:100%; height:90px; }
 .spark-svg{ width:100%; height:100%; display:block; }
 .spark-up{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
 .spark-down{ opacity:.95; }
@@ -505,33 +339,42 @@ export default {
 .asset-bar::after{ content:''; position:absolute; left:0; top:0; height:100%; width:var(--pct,0%); background:linear-gradient(90deg,#16a34a,#22c55e); }
 .asset-foot-row{ margin-top:6px; display:flex; align-items:center; justify-content:space-between; color:#6b7280; }
 
-/* ===== Agents (perf-free) ===== */
-.agent-card{ padding:12px; display:flex; flex-direction:column; gap:8px; }
-.agent-top{ display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:center; min-width:0; }
+/* ===== Agents ===== */
+.agent-card{ padding:var(--card-pad); display:flex; flex-direction:column; gap:10px; }
+.agent-top{
+  display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; min-width:0;
+}
 .agent-badge{ width:52px; height:52px; border-radius:16px; border:2px solid #e5e7eb; position:relative; display:grid; place-items:center; overflow:hidden; }
 .agent-ring{ position:absolute; inset:0; opacity:.18; }
 .agent-logo{ width:70%; height:70%; object-fit:contain; position:relative; z-index:1; }
+
 .agent-title{ min-width:0; }
 .agent-name{ font-weight:900; letter-spacing:.02em; color:#0f172a; text-transform:uppercase; }
 .agent-links{ display:flex; align-items:center; gap:8px; color:#64748b; flex-wrap:wrap; min-width:0; }
 .link{ color:#334155; font-weight:600; text-decoration:none; }
 .link:hover{ color:#0f172a; text-decoration:underline; }
-.dot{ color:#94a3b8; }
+.dot{ color:#94a3b8; }.pos{ color:#0e7a3a; } .neg{ color:#B91C1C; }
+
 .agent-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px; }
 .chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; background:#F6F8FB; color:#0f172a; border:1px solid #E7ECF3; white-space:nowrap; }
 .chip-outline{ background:#fff; }
+.chip-pos{ background:#E9F7EF; border-color:#d7f0e0; color:#0e7a3a; }
+.chip-neg{ background:#FBEAEA; border-color:#F3DADA; color:#B91C1C; }
 
-/* ===== Integration Guide / Form ===== */
+/* ===== Integration Guide ===== */
 .integration-guide{ margin-top:12px; padding:16px; }
 .integration-guide h3{ font-weight:800; font-size:1.1rem; color:#0f172a; margin-bottom:8px; }
 .guide-section{ margin:10px 0; }
 .code-block{ background:#0b1020; color:#E6EDF3; border-radius:10px; padding:12px; overflow:auto; font-size:12.5px; line-height:1.5; }
 .note{ color:#334155; margin-top:6px; }
 
+/* ===== Form (info-only) ===== */
 .form-container{ margin-top:12px; padding:16px; }
 .form-title{ font-weight:800; margin-bottom:8px; color:#0f172a; }
 .field{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
-.field input, .field textarea{ border:1px solid #E7ECF3; border-radius:10px; padding:10px 12px; font-size:14px; width:100%; }
+.field input, .field textarea{
+  border:1px solid #E7ECF3; border-radius:10px; padding:10px 12px; font-size:14px; width:100%;
+}
 .field input:focus, .field textarea:focus{ outline:none; border-color:#C7D2FE; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
 .btn-cta{ background:linear-gradient(90deg, rgb(0,0,185), #7b2cbf, #d946ef, rgb(240,0,15)); border:none; color:#fff; font-weight:800; letter-spacing:.02em; padding:10px 16px; border-radius:12px; cursor:pointer; }
 .btn-cta:disabled{ opacity:.5; cursor:not-allowed; }
@@ -542,5 +385,4 @@ export default {
 .cta-row{ margin-top:12px; display:flex; justify-content:center; }
 .link-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; }
 .mr-2{ margin-right:.5rem; }
-.pos{ color:#0e7a3a; } .neg{ color:#B91C1C; }
 </style>