Change settings

src/views/RequestView.vue

@@ -1,17 +1,16 @@
 <template>
   <div class="arena-page">
 
-    <!-- ====== SECTION 1: ASSETS OVERVIEW ====== -->
+    <!-- ============== 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">Currently tracked assets and their quick stats.</p>
+        <p class="section-sub">Four-up grid • type • 1-month price sparkline • quick stats</p>
       </header>
 
-      <!-- ASSETS ILLUSTRATION GRID -->
-      <div class="grid grid-assets">
+      <div class="grid grid-assets-4">
         <article v-for="a in assets" :key="a.code" class="card asset-card">
           <div class="asset-head">
             <div class="asset-logo-wrap">
@@ -19,28 +18,43 @@
             </div>
             <div class="asset-name">
               <div class="asset-code">{{ a.code }}</div>
-              <div class="asset-type">{{ a.type }}</div>
+              <div class="asset-full">{{ a.name }}</div>
             </div>
+            <span class="type-badge" :class="'type-' + a.type.toLowerCase()">{{ a.type }}</span>
           </div>
 
-          <div class="asset-stats">
-            <div class="stat">
-              <div class="stat-label">EOD</div>
-              <div class="stat-value mono">{{ a.eod || '—' }}</div>
-            </div>
-            <div class="stat">
-              <div class="stat-label">Runs</div>
-              <div class="stat-value mono">{{ a.runs }}</div>
+          <div class="asset-body">
+            <div class="spark-wrap">
+              <Sparkline :data="a.month" :color="a.sparkColor" />
             </div>
-            <div class="stat">
-              <div class="stat-label">Agents</div>
-              <div class="stat-value mono">{{ a.agents }}</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">EOD</div>
+                <div class="stat-value mono">{{ a.eod }}</div>
+              </div>
             </div>
+
+            <p class="asset-desc muted">{{ a.desc }}</p>
           </div>
 
-          <div class="asset-progress">
+          <div class="asset-foot">
             <div class="asset-bar" :style="{ '--pct': a.coveragePct + '%' }"></div>
-            <div class="asset-foot">
+            <div class="asset-foot-row">
               <span class="muted">Coverage</span>
               <span class="mono">{{ Math.round(a.coveragePct) }}%</span>
             </div>
@@ -48,24 +62,22 @@
         </article>
       </div>
 
-      <!-- CTA: GOOGLE FORM (VOTE TO ADD ASSET) -->
       <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
+          <i class="pi pi-plus mr-2" /> Vote to Add Asset
         </a>
       </div>
     </section>
 
-    <!-- ====== SECTION 2: AGENTS OVERVIEW + GUIDE ====== -->
+    <!-- ============== AGENTS ============== -->
     <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">Current competitors and how to join with your agent.</p>
+        <p class="section-sub">Tournament cards • performance • GitHub & arXiv links</p>
       </header>
 
-      <!-- AGENTS ILLUSTRATION GRID -->
       <div class="grid grid-agents">
         <article v-for="g in agents" :key="g.name" class="card agent-card">
           <div class="agent-top">
@@ -75,8 +87,19 @@
             </div>
             <div class="agent-title">
               <div class="agent-name">{{ g.name }}</div>
-              <div class="agent-model mono">{{ g.model }}</div>
+              <div class="agent-links">
+                <a :href="g.github" target="_blank" rel="noopener" class="link">
+                  <i class="pi pi-github"></i> 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>
+              </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">
@@ -84,113 +107,187 @@
               <div class="stat-label">Sharpe</div>
               <div class="stat-value mono">{{ g.sharpe }}</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">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">
             <span class="chip chip-outline">Strategy: <b class="mono">{{ g.strategy }}</b></span>
-            <span class="chip" :class="g.pnl >= 0 ? 'chip-pos' : 'chip-neg'">
-              P&L: <b class="mono">{{ signedMoney(g.pnl) }}</b>
-            </span>
+            <span class="chip chip-outline">Asset Focus: <b class="mono">{{ g.focus }}</b></span>
           </div>
         </article>
       </div>
 
-      <!-- GUIDE -->
-      <div class="card guide-card">
-        <div class="guide-title"><i class="pi pi-bolt"></i><span>Agent Integration Guide</span></div>
-        <div class="guide-grid">
-          <div>
-            <h4 class="guide-h4">Quick Summary</h4>
-            <p class="muted">Create an API that receives market data and returns trading decisions.</p>
-
-            <h4 class="guide-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">
-              <b>Note:</b> <code>history_price</code> includes up to 10 prior days when available.
-            </p>
-
-            <h4 class="guide-h4">Output (What we expect)</h4>
-            <pre class="code-block">{
-  "recommended_action": "BUY"
-}</pre>
-            <p class="note"><b>Valid actions:</b> <code>BUY</code>, <code>SELL</code>, <code>HOLD</code> (uppercase)</p>
-          </div>
-
-          <div class="guide-cta">
-            <div class="guide-callout">
-              <div class="callout-title">Ready to compete?</div>
-              <p class="muted">
-                Submit your agent endpoint and join the
-                <span class="ama-gradient-compact">Agent Market Arena</span>.
-              </p>
-              <a :href="agentFormUrl" target="_blank" rel="noopener" class="btn-cta link-btn wide">
-                <i class="pi pi-send mr-2"></i> Submit Agent (Google Form)
-              </a>
-            </div>
-          </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>
         </div>
       </div>
-
-      <!-- CTA: GOOGLE FORM (SECOND BUTTON) -->
-      <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
-        </a>
-      </div>
     </section>
+
   </div>
 </template>
 
 <script>
+/**
+ * Minimal inline sparkline component (SVG) — no external deps.
+ */
+const Sparkline = {
+  name: 'Sparkline',
+  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 }
+  },
+  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
+    }
+  },
+  template: `
+    <svg :viewBox="\`0 0 \${width} \${height}\`" class="spark-svg">
+      <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>
+  `
+}
+
 export default {
   name: 'RequestView',
+  components: { Sparkline },
   data() {
     return {
-      // Replace these URLs with your actual Google Form links
       assetFormUrl: 'https://forms.gle/your-asset-request-form',
       agentFormUrl: 'https://forms.gle/your-agent-submit-form',
 
-      // Demo/placeholder data; wire to real sources when available
+      // ===== Demo data (replace with live) =====
       assets: [
-        { code: 'BTC', type: 'Crypto', icon: new URL('../assets/images/assets_images/BTC.png', import.meta.url).href, runs: 86, agents: 4, coveragePct: 92, eod: '10/25/2025' },
-        { code: 'ETH', type: 'Crypto', icon: new URL('../assets/images/assets_images/ETH.png', import.meta.url).href, runs: 84, agents: 3, coveragePct: 88, eod: '10/25/2025' },
-        { code: 'MSFT', type: 'Stock',  icon: new URL('../assets/images/assets_images/MSFT.png', import.meta.url).href, runs: 60, agents: 4, coveragePct: 77, eod: '10/25/2025' },
-        { code: 'BMRN', type: 'Stock',  icon: new URL('../assets/images/assets_images/BMRN.png', import.meta.url).href, runs: 51, agents: 3, coveragePct: 71, eod: '10/25/2025' },
-        { code: 'TSLA', type: 'Stock',  icon: new URL('../assets/images/assets_images/TSLA.png', import.meta.url).href, runs: 66, agents: 4, coveragePct: 80, eod: '10/25/2025' }
+        {
+          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.
       ],
+
       agents: [
-        { name: 'InvestorAgent',   model: 'claude_sonnet_4_20250514', strategy: 'long_only', sharpe: '0.75', trades: 12, winRate: 0.58, pnl:  3191.97, color: 'linear-gradient(90deg,#ffd700,#eab308)', logo: new URL('../assets/images/agents_images/investor.png', import.meta.url).href },
-        { name: 'TradeAgent',      model: 'gemini_2.0_flash',         strategy: 'long_only', sharpe: '0.45', trades: 23, winRate: 0.52, pnl:  1698.83, color: 'linear-gradient(90deg,#4338ca,#6d28d9)', logo: new URL('../assets/images/agents_images/tradeagent.png', import.meta.url).href },
-        { name: 'DeepFundAgent',   model: 'gpt_4.1',                  strategy: 'long_only', sharpe: '0.00', trades:  0, winRate: 0.00, pnl:     0.00, color: 'linear-gradient(90deg,#0ea5e9,#22d3ee)', logo: new URL('../assets/images/agents_images/deepfund.png', import.meta.url).href },
-        { name: 'HedgeFundAgent',  model: 'claude_sonnet_4_20250514', strategy: 'long_only', sharpe: '-1.32',trades: 11, winRate: 0.50, pnl: -5375.91, color: 'linear-gradient(90deg,#f43f5e,#ef4444)', logo: new URL('../assets/images/agents_images/hedgefund.png', import.meta.url).href }
+        {
+          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',
+          color: 'linear-gradient(90deg,#ffd700,#eab308)',
+          logo: new URL('../assets/images/agents_images/investor.png', import.meta.url).href
+        },
+        {
+          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',
+          color: 'linear-gradient(90deg,#4338ca,#6d28d9)',
+          logo: new URL('../assets/images/agents_images/tradeagent.png', import.meta.url).href
+        },
+        {
+          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: '—',
+          color: 'linear-gradient(90deg,#0ea5e9,#22d3ee)',
+          logo: new URL('../assets/images/agents_images/deepfund.png', import.meta.url).href
+        },
+        {
+          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',
+          color: 'linear-gradient(90deg,#f43f5e,#ef4444)',
+          logo: new URL('../assets/images/agents_images/hedgefund.png', import.meta.url).href
+        }
       ]
     }
   },
@@ -199,10 +296,13 @@ export default {
       const v = Number(n || 0)
       const s = v >= 0 ? '+' : '−'
       return `${s}${Math.abs(v).toLocaleString(undefined, {
-        style: 'currency',
-        currency: 'USD',
-        maximumFractionDigits: 2
+        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)}%`
     }
   }
 }
@@ -214,29 +314,35 @@ export default {
   background: linear-gradient(90deg, rgb(0,0,185), #7b2cbf, #d946ef, rgb(240,0,15));
   -webkit-background-clip: text; background-clip: text; color: transparent;
 }
-.ama-gradient-compact{
-  background: linear-gradient(90deg, rgb(0,0,185), #d946ef, rgb(240,0,15));
-  -webkit-background-clip: text; background-clip: text; color: transparent;
-}
 
 .arena-page{
   max-width:1280px; margin:0 auto;
-  padding:16px 20px 120px; /* bottom space for fixed footer */
+  padding:16px 20px 120px; /* leave space for fixed footer */
   background:#fff;
 }
 
 /* ===== Sections ===== */
 .section{ margin-top:18px; }
-.section-head{ margin-bottom:10px; }
+.section-head{ margin-bottom:8px; }
 .section-title{ font-size: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; }
-.grid-assets{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
-.grid-agents{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
+.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; }
+}
 
-/* ===== Cards ===== */
+/* ===== 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);
@@ -245,40 +351,63 @@ export default {
 .card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,24,40,.08); border-color:#D9E2EF; }
 
 /* ===== Assets ===== */
-.asset-card{ padding:12px 12px 10px; }
-.asset-head{ display:grid; grid-template-columns:44px 1fr; gap:10px; align-items:center; }
+.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-logo{ width:70%; height:70%; object-fit:contain; }
 .asset-name{ min-width:0; }
-.asset-code{ font-weight:800; color:#0f172a; letter-spacing:.02em; }
-.asset-type{ font-size:12px; color:#64748b; }
+.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;
+}
+.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-up{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
+.spark-down{ opacity:.95; }
 
-.asset-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 6px; }
+.asset-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
 .stat{ background:#F6F8FB; border:1px solid #E7ECF3; border-radius:10px; padding:8px; }
 .stat-label{ font-size:11px; color:#6b7280; margin-bottom:2px; }
 .stat-value{ font-weight:800; color:#0f172a; }
 .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
+.muted{ color:#6b7280; }
+
+.asset-desc{ margin-top:2px; font-size:12.5px; line-height:1.45; }
 
-.asset-progress{ margin-top:6px; }
+.asset-foot{ margin-top:4px; }
 .asset-bar{ height:6px; border-radius:999px; border:1px solid #E7ECF3; background:#F2F4F8; position:relative; overflow:hidden; }
 .asset-bar::after{ content:''; position:absolute; left:0; top:0; height:100%; width:var(--pct,0%); background:linear-gradient(90deg,#16a34a,#22c55e); }
-.asset-foot{ margin-top:6px; display:flex; align-items:center; justify-content:space-between; color:#6b7280; }
+.asset-foot-row{ margin-top:6px; display:flex; align-items:center; justify-content:space-between; color:#6b7280; }
 
 /* ===== Agents ===== */
-.agent-card{ padding:12px 12px 10px; }
-.agent-top{ display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:center; }
+.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;
+}
 .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-model{ font-size:12px; color:#64748b; }
+.agent-links{ display:flex; align-items:center; gap:8px; color:#64748b; flex-wrap:wrap; }
+.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(3,1fr); gap:10px; margin:10px 0 6px; }
+.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:4px; }
+.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-outline{ background:#fff; }
 .chip-pos{ background:#E9F7EF; border-color:#d7f0e0; color:#0e7a3a; }
@@ -286,29 +415,15 @@ export default {
 
 /* ===== 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:8px; }
+.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-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
-.guide-h4{ margin:10px 0 6px; font-weight:800; color:#0f172a; }
-.code-block{
-  background:#0b1220; color:#e2e8f0; border-radius:10px; padding:12px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  font-size:12.5px; overflow-x:auto; border:1px solid #1e293b;
-}
-.note{ color:#6b7280; margin-top:6px; }
-.muted{ color:#6b7280; }
-.guide-callout{
-  background:linear-gradient(180deg,#ffffff,#fafbff);
-  border:1px dashed #d8def0; border-radius:14px; padding:14px;
-}
-.callout-title{ font-weight:900; margin-bottom:4px; }
+.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; }
 
-/* ===== Buttons (as links) ===== */
-.cta-row{ margin-top:10px; display:flex; justify-content:center; }
-.link-btn{
-  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
-  text-decoration:none;
-}
+/* ===== 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;
@@ -316,10 +431,4 @@ export default {
 }
 .btn-cta:hover{ filter:brightness(1.02); transform:translateY(-1px); }
 .mr-2{ margin-right:.5rem; }
-.wide{ width:100%; }
-
-/* Responsive */
-@media (max-width: 900px){
-  .guide-grid{ grid-template-columns:1fr; }
-}
 </style>