Change settings

src/views/RequestView.vue

@@ -1,13 +1,12 @@
 <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">Four-up grid • type • 1-month price sparkline • quick stats</p>
+        <p class="section-sub">Live from dataService • B&amp;H sparkline (ECharts LineChart) • 1M change • coverage</p>
       </header>
 
       <div class="grid grid-assets-4">
@@ -29,18 +28,73 @@
             </div>
 
             <div class="asset-stats">
-              
-            </div>
-            
-              <div class="stat-value mono" :class="g.winRate >= 0.5 ? 'pos' : 'neg'">
-                {{ Math.round(g.winRate * 100) }}%
+              <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>
-            
-              <div class="stat-value mono">{{ g.trades }}</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>
+          </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"></i> 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 &amp; 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>
-            
-              <div class="stat-value mono">{{ g.days }}</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>
           </div>
 
@@ -51,7 +105,7 @@
         </article>
       </div>
 
-      <!-- ================= Integration Guide (info-only, no external UI libs) ================= -->
+      <!-- Info-only integration guide -->
       <div class="card integration-guide">
         <h3>Agent Integration Guide</h3>
 
@@ -62,7 +116,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..."},
@@ -85,35 +139,40 @@
 
         <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>
 
-      <!-- ================= 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>
+      <!-- Submit Agent button (Google Form link) -->
+      <div class="cta-row">
+        <a :href="agentFormUrl" target="_blank" rel="noopener" class="btn-cta link-btn">
+          <i class="pi pi-send mr-2"></i> Submit Agent (Google Form)
+        </a>
+      </div>
     </section>
-
   </div>
 </template>
 
 <script>
-/**
- * Minimal inline sparkline component (SVG) — no external deps.
- * NOTE: width/height handled via viewBox for responsive fit.
- */
+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'
+
+/* ---- ECharts (LineChart) ---- */
 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])
 
+/**
+ * Minimal ECharts line spark (B&H equity)
+ */
 const MiniEchart = {
   name: 'MiniEchart',
   props: {
@@ -123,29 +182,37 @@ const MiniEchart = {
   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 }
-      }]
-    })
+    this.render(this.data)
+  },
+  methods: {
+    render(arr) {
+      const d = Array.isArray(arr) ? arr : []
+      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 }] })
+      this._chart.setOption({
+        xAxis: { data: d.map((_, i) => i) },
+        series: [{ data: d }]
+      })
     }
   },
   beforeUnmount() { if (this._chart) { this._chart.dispose(); this._chart = null } },
@@ -158,59 +225,19 @@ export default {
   data() {
     return {
       assetFormUrl: 'https://forms.gle/your-asset-request-form',
-
       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.'
-        },
-      ],
+      // dynamic, filled from dataService
+      assets: [],
 
+      // agents section (no performance)
       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
         },
@@ -218,7 +245,8 @@ 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
         },
@@ -226,7 +254,8 @@ 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
         },
@@ -234,32 +263,147 @@ 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
         }
-      ]
+      ],
+
+      // live state
+      rowsRef: [],
+      allDecisions: [],
+      unsubscribe: null,
+
+      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)
-      const s = v >= 0 ? '+' : '−'
-      return `${s}${Math.abs(v).toLocaleString(undefined, {
-        style: 'currency', currency: 'USD', maximumFractionDigits: 2
-      })}`
-    },
     signedPct(p) {
       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
+
+        // B&H equity as normalized 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.'
+        })
+      }
+
+      // 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
+    }
+  }
 }
 </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;
@@ -267,14 +411,14 @@ export default {
 
 .arena-page{
   max-width:1280px; margin:0 auto;
-  padding:16px 20px 120px; /* leave space for fixed footer */
-  background:#fff;
+  padding:16px 20px 120px; background:#fff;
 }
 
 /* ===== Helpers ===== */
 .truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
 .w-full{ width:100%; }
+.echart-mini{ width:100%; height:90px; }
 
 /* ===== Sections ===== */
 .section{ margin-top:18px; }
@@ -282,29 +426,26 @@ 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; }
 
-/* ===== Grid layouts ===== */
+/* ===== Grids ===== */
 .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:var(--radius);
+  background:#ffffff; border:1px solid #E7ECF3; border-radius:14px;
   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; /* allow children to shrink in grid */
+  min-width:0;
 }
 .card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,24,40,.08); border-color:#D9E2EF; }
 
 /* ===== Assets ===== */
-.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-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-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; }
@@ -312,19 +453,13 @@ 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; max-width:100%;
+  border:1px solid #E7ECF3; background:#F6F8FB; color:#0f172a; white-space:nowrap;
 }
 .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; min-height:0; }
+.asset-body{ display:flex; flex-direction:column; gap:10px; }
 .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; }
-
 .asset-stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
 .stat{ background:#F6F8FB; border:1px solid #E7ECF3; border-radius:10px; padding:8px; min-width:0; }
 .stat-label{ font-size:11px; color:#6b7280; margin-bottom:2px; }
@@ -339,27 +474,21 @@ 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 ===== */
-.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;
-}
+/* ===== 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; }
 .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; }.pos{ color:#0e7a3a; } .neg{ color:#B91C1C; }
-
+.dot{ color:#94a3b8; }
 .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 ===== */
 .integration-guide{ margin-top:12px; padding:16px; }
@@ -368,21 +497,10 @@ export default {
 .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: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; }
-.form-message{ margin-top:10px; padding:8px 10px; border-radius:10px; font-size:14px; }
-.form-message.is-success{ background:#E9F7EF; color:#0e7a3a; border:1px solid #d7f0e0; }
-
 /* ===== Buttons ===== */
 .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; }
+.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; }
 .mr-2{ margin-right:.5rem; }
+.pos{ color:#0e7a3a; } .neg{ color:#B91C1C; }
 </style>