Change settings

src/router/index.js

@@ -3,6 +3,7 @@ import Main from '../pages/Main.vue'
 import LeaderboardView from '../views/LeaderboardView.vue'
 import LiveView from '../views/LiveView.vue'
 import AddAssetsView from '../views/AddAssetView.vue'
+import RequestView from '../views/RequestView.vue'
 import AssetRequestsView from '../views/AssetRequestsView.vue'
 import { dataService } from '../lib/dataService.js'
 
@@ -15,7 +16,7 @@ const routes = [
     children: [
       { path: '/leaderboard', name: 'leadboard', component: LeaderboardView },
       { path: '/live', name: 'live', component: LiveView },
-      { path: '/add-asset', name: 'add-asset', component: AddAssetsView },
+      { path: '/add-asset', name: 'add-asset', component: RequestView },
       { path: '/asset-requests', name: 'asset-requests', component: AssetRequestsView },
     ]
   }

src/views/RequestView.vue

@@ -0,0 +1,325 @@
+<template>
+  <div class="arena-page">
+
+    <!-- ====== SECTION 1: ASSETS OVERVIEW ====== -->
+    <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>
+      </header>
+
+      <!-- ASSETS ILLUSTRATION GRID -->
+      <div class="grid grid-assets">
+        <article v-for="a in assets" :key="a.code" class="card asset-card">
+          <div class="asset-head">
+            <div class="asset-logo-wrap">
+              <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-type">{{ a.type }}</div>
+            </div>
+          </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>
+            <div class="stat">
+              <div class="stat-label">Agents</div>
+              <div class="stat-value mono">{{ a.agents }}</div>
+            </div>
+          </div>
+
+          <div class="asset-progress">
+            <div class="asset-bar" :style="{ '--pct': a.coveragePct + '%' }"></div>
+            <div class="asset-foot">
+              <span class="muted">Coverage</span>
+              <span class="mono">{{ Math.round(a.coveragePct) }}%</span>
+            </div>
+          </div>
+        </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
+        </a>
+      </div>
+    </section>
+
+    <!-- ====== SECTION 2: AGENTS OVERVIEW + GUIDE ====== -->
+    <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>
+      </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">
+            <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="agent-title">
+              <div class="agent-name">{{ g.name }}</div>
+              <div class="agent-model mono">{{ g.model }}</div>
+            </div>
+          </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">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>
+
+          <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>
+          </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>
+      </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>
+export default {
+  name: 'RequestView',
+  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
+      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' }
+      ],
+      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 }
+      ]
+    }
+  },
+  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
+      })}`
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* ===== AMA Core ===== */
+.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;
+}
+.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 */
+  background:#fff;
+}
+
+/* ===== Sections ===== */
+.section{ margin-top:18px; }
+.section-head{ margin-bottom:10px; }
+.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{ 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)); }
+
+/* ===== Cards ===== */
+.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;
+}
+.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-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-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 6px; }
+.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; }
+
+.asset-progress{ margin-top:6px; }
+.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; }
+
+/* ===== Agents ===== */
+.agent-card{ padding:12px 12px 10px; }
+.agent-top{ display:grid; grid-template-columns:52px 1fr; 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-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 6px; }
+.pos{ color:#0e7a3a; } .neg{ color:#B91C1C; }
+
+.agent-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
+.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; }
+.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:8px; }
+.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; }
+
+/* ===== 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;
+}
+.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; }
+.wide{ width:100%; }
+
+/* Responsive */
+@media (max-width: 900px){
+  .guide-grid{ grid-template-columns:1fr; }
+}
+</style>