Update static/index.html

static/index.html

@@ -4,24 +4,105 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sentinel Arbitrage Engine</title>
+    
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
     <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
+
     <style>
-        :root { font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; }
-        body { background-color: #111927; color: #E5E7EB; font-size: 14px; margin: 0; padding: 1rem; }
-        .container { max-width: 1280px; margin: 0 auto; }
-        header { text-align: center; margin-bottom: 1.5rem; }
-        h1 { color: #38BDF8; margin-bottom: 0; }
-        .status-bar { font-size: 12px; color: #9CA3AF; text-align: right; margin-bottom: 1rem; }
-        .status-online { color: #34D399; } .status-offline { color: #F87171; }
-        table { width: 100%; border-collapse: collapse; }
-        th { background-color: #374151; text-align: left; position: sticky; top: 0; }
-        td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; }
-        .buy { color: #34D399; } .sell { color: #F87171; }
-        .risk-low { color: #34D399; } .risk-medium { color: #FBBF24; } .risk-high { color: #F87171; }
-        tbody tr { animation: fadeIn 0.5s ease-out; }
-        @keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); } to { background-color: transparent; } }
-        .asset-logo { width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; }
+        :root {
+            --pico-font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
+            --pico-font-size: 14px;
+            --pico-color-green-400: #34D399;
+            --pico-color-red-400: #F87171;
+            --pico-color-amber-400: #FBBF24;
+        }
+
+        body {
+            background-color: #111927;
+            color: #E5E7EB;
+        }
+
+        .container {
+            max-width: 1280px;
+            margin: 1.5rem auto;
+            padding: 0 1rem;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+
+        h1 {
+            color: #38BDF8;
+            margin-bottom: 0;
+            font-weight: 600;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        th {
+            background-color: #374151;
+            text-align: left;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        td, th {
+            padding: 0.75rem 1rem;
+            border-bottom: 1px solid #374151;
+            vertical-align: middle;
+        }
+
+        tbody tr {
+            animation: fadeIn 0.7s ease-out forwards;
+        }
+
+        .buy { color: var(--pico-color-green-400); }
+        .sell { color: var(--pico-color-red-400); }
+        
+        .risk-low { color: var(--pico-color-green-400); }
+        .risk-medium { color: var(--pico-color-amber-400); }
+        .risk-high { color: var(--pico-color-red-400); }
+
+        .status-bar {
+            font-size: 12px;
+            color: #9CA3AF;
+            text-align: right;
+            margin-bottom: 1rem;
+        }
+        .status-online { color: #34D399; }
+        .status-offline { color: #F87171; }
+        
+        /* --- NEW STYLES FOR THE FIX --- */
+        .asset-cell {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            gap: 12px;
+            align-items: center;
+        }
+        .asset-logo {
+            width: 24px;
+            height: 24px;
+        }
+        .asset-cell a {
+            color: inherit;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        .asset-cell a:hover {
+            text-decoration: underline;
+        }
+        /* --- END NEW STYLES --- */
+
+        @keyframes fadeIn {
+            from { background-color: rgba(52, 211, 153, 0.2); opacity: 0; }
+            to { background-color: transparent; opacity: 1; }
+        }
     </style>
 </head>
 <body>
@@ -29,9 +110,11 @@
         <header>
             <h1>Sentinel Arbitrage Engine</h1>
         </header>
+
         <div class="status-bar">
             Engine Status: <span id="status-light" class="status-offline">OFFLINE</span> | Last Signal: <span id="last-update-time">--:--:--</span>
         </div>
+
         <article>
             <table>
                 <thead>
@@ -50,11 +133,21 @@
             </table>
         </article>
     </main>
+
     <script>
-        const ASSET_LOGOS = {
-            'BTC': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png',
-            'ETH': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png',
-            'SOL': 'https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png'
+        const ASSET_CONFIG = {
+            'BTC': { 
+                logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png',
+                link: 'https://www.coingecko.com/en/coins/bitcoin'
+            },
+            'ETH': {
+                logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png',
+                link: 'https://www.coingecko.com/en/coins/ethereum'
+            },
+            'SOL': {
+                logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png',
+                link: 'https://www.coingecko.com/en/coins/solana'
+            }
         };
 
         const socket = io();
@@ -63,28 +156,37 @@
         const lastUpdateTime = document.getElementById('last-update-time');
 
         socket.on('connect', () => {
+            console.log('✅ Connected to Sentinel Engine.');
             statusLight.textContent = 'ONLINE';
             statusLight.className = 'status-online';
             document.getElementById('placeholder-row').cells[0].textContent = 'Monitoring for oracle dislocations...';
         });
 
         socket.on('disconnect', () => {
+            console.log('🔥 Disconnected from Sentinel Engine.');
             statusLight.textContent = 'OFFLINE';
             statusLight.className = 'status-offline';
         });
 
         socket.on('new_signal', (signal) => {
+            console.log('⚡️ New Signal Received:', signal);
             document.getElementById('placeholder-row')?.remove();
 
             const isPythCheaper = signal.pyth_price < signal.chainlink_price;
             const newRow = opportunitiesTable.insertRow(0);
 
-            const logoUrl = ASSET_LOGOS[signal.asset] || '';
+            const assetInfo = ASSET_CONFIG[signal.asset] || { logo: '', link: '#' };
 
+            // --- THE CRITICAL FIX IS HERE ---
             newRow.innerHTML = `
-                <td><img src="${logoUrl}" class="asset-logo" alt="${signal.asset}"><strong>${signal.asset}/USD</strong></td>
-                <td><span class="${isPythCheaper ? 'buy' : 'sell'}">$${signal.pyth_price.toFixed(2)}</span></td>
-                <td><span class="${!isPythCheaper ? 'buy' : 'sell'}">$${signal.chainlink_price.toFixed(2)}</span></td>
+                <td>
+                    <div class="asset-cell">
+                        <img src="${assetInfo.logo}" class="asset-logo" alt="${signal.asset} logo">
+                        <a href="${assetInfo.link}" target="_blank">${signal.asset}/USD</a>
+                    </div>
+                </td>
+                <td><span class="${isPythCheaper ? 'buy' : 'sell'}">${signal.pyth_price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</span></td>
+                <td><span class="${!isPythCheaper ? 'buy' : 'sell'}">${signal.chainlink_price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</span></td>
                 <td><strong>${signal.spread_pct.toFixed(3)}%</strong></td>
                 <td><span class="risk-${signal.risk.toLowerCase()}">${signal.risk}</span></td>
                 <td>${signal.strategy}</td>