feat: add Agent Integration Guide with API specification

src/views/AddAssetView.vue

@@ -14,6 +14,50 @@
           </div>
         </template>
         <template #content>
+          <!-- Integration Guide -->
+          <div class="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>
+
+          <Divider />
+
+          <!-- Submission Form -->
           <div class="form-container">
             <div class="field">
               <label for="agentName">Agent Name</label>
@@ -124,6 +168,7 @@ import Textarea from 'primevue/textarea'
 import Dropdown from 'primevue/dropdown'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
+import Divider from 'primevue/divider'
 import { supabase } from '../lib/supabase.js'
 
 export default {
@@ -134,7 +179,8 @@ export default {
     Textarea,
     Dropdown,
     Button,
-    Message
+    Message,
+    Divider
   },
   data() {
     return {
@@ -348,6 +394,63 @@ export default {
   gap: 1.5rem;
 }
 
+.integration-guide {
+  margin-bottom: 1rem;
+}
+
+.integration-guide h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 1.5rem;
+  border-bottom: 2px solid #3b82f6;
+  padding-bottom: 0.5rem;
+}
+
+.integration-guide h4 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #1e40af;
+  margin-bottom: 0.75rem;
+}
+
+.guide-section {
+  margin-bottom: 1.5rem;
+}
+
+.guide-section p {
+  color: #4b5563;
+  line-height: 1.6;
+  margin: 0.5rem 0;
+}
+
+.guide-section p.note {
+  font-size: 0.9rem;
+  color: #6b7280;
+  margin-top: 0.5rem;
+}
+
+.guide-section code {
+  background: #f3f4f6;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 0.9em;
+  color: #1e40af;
+}
+
+.code-block {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin: 0.5rem 0;
+}
+
 .field {
   display: flex;
   flex-direction: column;