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&H sparkline • 1M change • coverage</p>
       </header>
 
       <div class="grid grid-assets-4">
@@ -17,8 +16,8 @@
               <img :src="a.icon" :alt="a.code" class="asset-logo" />
             </div>
             <div class="asset-name">
-              <div class="asset-code">{{ a.code }}</div>
-              <div class="asset-full">{{ a.name }}</div>
+              <div class="asset-code truncate">{{ a.code }}</div>
+              <div class="asset-full truncate" :title="a.name">{{ a.name }}</div>
             </div>
             <span class="type-badge" :class="'type-' + a.type.toLowerCase()">{{ a.type }}</span>
           </div>
@@ -44,12 +43,12 @@
                 <div class="stat-value mono">{{ a.agents }}</div>
               </div>
               <div class="stat">
-                <div class="stat-label">EOD</div>
-                <div class="stat-value mono">{{ a.eod }}</div>
+                <div class="stat-label">Days</div>
+                <div class="stat-value mono">{{ a.days }}</div>
               </div>
             </div>
 
-            <p class="asset-desc muted">{{ a.desc }}</p>
+            <p class="asset-desc muted clamp-2" :title="a.desc">{{ a.desc }}</p>
           </div>
 
           <div class="asset-foot">
@@ -58,6 +57,10 @@
               <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>
@@ -69,13 +72,13 @@
       </div>
     </section>
 
-    <!-- ============== AGENTS ============== -->
+    <!-- ============== 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 • performance • GitHub & arXiv links</p>
+        <p class="section-sub">Tournament cards • GitHub & arXiv links • no performance</p>
       </header>
 
       <div class="grid grid-agents">
@@ -86,41 +89,13 @@
               <img :src="g.logo" :alt="g.name" class="agent-logo" />
             </div>
             <div class="agent-title">
-              <div class="agent-name">{{ g.name }}</div>
+              <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">
-                  <i class="pi pi-github"></i> GitHub
-                </a>
+                <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">
-                  <i class="pi pi-external-link"></i> arXiv
-                </a>
+                <a :href="g.arxiv" target="_blank" rel="noopener" class="link">arXiv</a>
               </div>
             </div>
-            <span class="chip" :class="g.pnl >= 0 ? 'chip-pos' : 'chip-neg'">
-              P&L <b class="mono">{{ signedMoney(g.pnl) }}</b>
-            </span>
-          </div>
-
-          <div class="agent-stats">
-            <div class="stat">
-              <div class="stat-label">Sharpe</div>
-              <div class="stat-value mono">{{ g.sharpe }}</div>
-            </div>
-            <div class="stat">
-              <div class="stat-label">Win Rate</div>
-              <div class="stat-value mono" :class="g.winRate >= 0.5 ? 'pos' : 'neg'">
-                {{ Math.round(g.winRate * 100) }}%
-              </div>
-            </div>
-            <div class="stat">
-              <div class="stat-label">Trades</div>
-              <div class="stat-value mono">{{ g.trades }}</div>
-            </div>
-            <div class="stat">
-              <div class="stat-label">Days</div>
-              <div class="stat-value mono">{{ g.days }}</div>
-            </div>
           </div>
 
           <div class="agent-foot">
@@ -130,27 +105,84 @@
         </article>
       </div>
 
-      <div class="guide-card card">
-        <div class="guide-title"><i class="pi pi-bolt"></i><span>How to Join</span></div>
-        <ol class="guide-steps">
-          <li>Expose an HTTPS endpoint that returns a trading decision <code>BUY | SELL | HOLD</code>.</li>
-          <li>We send the current snapshot (prices, recent history, news) as JSON.</li>
-          <li>Keep latency reasonable (&lt; 5s). We’ll handle retries/timeouts.</li>
-        </ol>
-        <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>
+      <!-- ========== Info-only Agent Integration Guide + Form ========== -->
+      <div class="card integration-guide">
+        <h3>Agent Integration Guide</h3>
+
+        <div class="guide-section">
+          <h4>Quick Summary</h4>
+          <p><strong>What you need:</strong> Create an API that receives market data and returns trading decisions.</p>
+        </div>
+
+        <div class="guide-section">
+          <h4>Input (What we send to your agent)</h4>
+<pre class="code-block">{
+  "date": "2025-10-24",
+  "price": {"BTC": 67890.50},
+  "news": {"BTC": "Bitcoin news..."},
+  "model": "gpt-4o",
+  "history_price": {
+    "BTC": [
+      {"date": "2025-10-14", "price": 65000.00},
+      {"date": "2025-10-15", "price": 65500.00},
+      {"date": "2025-10-16", "price": 66000.00},
+      {"date": "2025-10-17", "price": 66200.00},
+      {"date": "2025-10-18", "price": 66500.00},
+      {"date": "2025-10-21", "price": 66800.00},
+      {"date": "2025-10-22", "price": 67000.00},
+      {"date": "2025-10-23", "price": 67500.00}
+    ]
+  }
+}</pre>
+          <p class="note"><strong>Note:</strong> <code>history_price</code> contains the last 10 days of price data (if available).</p>
+        </div>
+
+        <div class="guide-section">
+          <h4>Output (What we expect from your agent)</h4>
+<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>
-    </section>
 
+      <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>
+    </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.
  */
 const Sparkline = {
   name: 'Sparkline',
@@ -183,7 +215,7 @@ const Sparkline = {
     }
   },
   template: `
-    <svg :viewBox="\`0 0 \${width} \${height}\`" class="spark-svg">
+    <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%"/>
@@ -204,60 +236,17 @@ 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.'
-        },
-        // If you add more, the grid will wrap to next row.
-      ],
 
+      // dynamic, filled from dataService
+      assets: [],
+      // keep the agent section perf-free
       agents: [
         {
           name: 'InvestorAgent',
           github: 'https://github.com/your-org/investor-agent',
           arxiv: 'https://arxiv.org/abs/xxxyyy',
-          sharpe: '0.75', winRate: 0.58, trades: 12, days: 86,
-          pnl: 3191.97, 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
         },
@@ -265,8 +254,8 @@ export default {
           name: 'TradeAgent',
           github: 'https://github.com/your-org/trade-agent',
           arxiv: 'https://arxiv.org/abs/aaabbb',
-          sharpe: '0.45', winRate: 0.52, trades: 23, days: 86,
-          pnl: 1698.83, 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
         },
@@ -274,8 +263,8 @@ export default {
           name: 'DeepFundAgent',
           github: 'https://github.com/your-org/deepfund-agent',
           arxiv: 'https://arxiv.org/abs/cccdde',
-          sharpe: '0.00', winRate: 0.0, trades: 0, days: 86,
-          pnl: 0.00, 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
         },
@@ -283,14 +272,51 @@ export default {
           name: 'HedgeFundAgent',
           github: 'https://github.com/your-org/hedgefund-agent',
           arxiv: 'https://arxiv.org/abs/fffggg',
-          sharpe: '-1.32', winRate: 0.50, trades: 11, days: 86,
-          pnl: -5375.91, 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)
@@ -303,7 +329,103 @@ 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>
@@ -317,67 +439,62 @@ 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%; }
+
 /* ===== Sections ===== */
 .section{ margin-top:18px; }
 .section-head{ margin-bottom:8px; }
-.section-title{ font-size:1.6rem; font-weight:800; letter-spacing:-0.02em; display:inline-block; }
+.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 ===== */
-.grid{ display:grid; gap:14px; }
+/* ===== 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; }
-}
+@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;
   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;
 }
 .card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,24,40,.08); border-color:#D9E2EF; }
 
 /* ===== Assets ===== */
-.asset-card{ padding:12px 12px 12px; display:flex; flex-direction:column; gap:8px; }
-.asset-head{
-  display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center;
-}
-.asset-logo-wrap{ width:44px; height:44px; border-radius:12px; background:#f3f4f6; display:grid; place-items:center; border:1px solid #E7ECF3; }
+.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; }
 .asset-code{ font-weight:900; color:#0f172a; letter-spacing:.02em; }
 .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;
+  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; }
-.spark-wrap{ width:100%; height:90px; }
-.spark-svg{ width:100%; height:100%; }
+.spark-wrap{ width:100%; height:90px; overflow:hidden; border-radius:8px; }
+.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,1fr); gap:10px; }
-.stat{ background:#F6F8FB; border:1px solid #E7ECF3; border-radius:10px; padding:8px; }
+.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; }
-.stat-value{ font-weight:800; color:#0f172a; }
+.stat-value{ font-weight:800; color:#0f172a; overflow:hidden; text-overflow:ellipsis; }
 .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
 .muted{ color:#6b7280; }
 
@@ -388,47 +505,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 ===== */
-.agent-card{ padding:12px 12px 12px; display:flex; flex-direction:column; gap:8px; }
-.agent-top{
-  display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center;
-}
+/* ===== 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; }
+.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; }
-
-.agent-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
-.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; }
+.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; }
 
-/* ===== Guide ===== */
-.guide-card{ margin-top:12px; padding:14px; }
-.guide-title{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; color:#0f172a; margin-bottom:6px; }
-.guide-title i{ color:#4338ca; }
-.guide-steps{ margin:6px 0 0 18px; color:#334155; }
-.guide-steps li{ margin:6px 0; }
-.code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
+/* ===== Integration Guide / Form ===== */
+.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-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;
-}
-.btn-cta:hover{ filter:brightness(1.02); transform:translateY(-1px); }
 .mr-2{ margin-right:.5rem; }
+.pos{ color:#0e7a3a; } .neg{ color:#B91C1C; }
 </style>