Update static/index.html

static/index.html

@@ -4,10 +4,9 @@
     <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>
-
+    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+    <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
     <style>
         :root {
             --pico-font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
@@ -16,106 +15,37 @@
             --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;
-        }
-
+        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:first-child { 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-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; }
-        }
+        .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; }
+        @keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); opacity: 0; } to { background-color: transparent; opacity: 1; } }
     </style>
 </head>
-<body>
+<body hx-ext="sse" sse-connect="/api/signals/stream">
     <main class="container">
         <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>
+            Engine Status: <span id="status-light" class="status-online">ONLINE</span> | Last Signal: <span id="last-update-time">--:--:--</span>
         </div>
-
-        <article>
+        <article data-theme="dark" style="padding: 0; overflow-x: auto;">
             <table>
                 <thead>
                     <tr>
@@ -128,56 +58,40 @@
                     </tr>
                 </thead>
                 <tbody id="opportunities-table">
-                    <tr id="placeholder-row"><td colspan="6" style="text-align:center; padding: 2rem;">Connecting to engine...</td></tr>
+                    <tr id="placeholder-row"><td colspan="6" style="text-align:center; padding: 2rem;">Monitoring for oracle dislocations across 10 assets...</td></tr>
                 </tbody>
             </table>
         </article>
     </main>
-
     <script>
+        // ====================================================================
+        //              THE "MONEY-SPINNING" UI UPGRADE IS HERE
+        // ====================================================================
         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'
-            }
+            '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' },
+            'XRP': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/52.png', link: 'https://www.coingecko.com/en/coins/ripple' },
+            'DOGE': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/74.png', link: 'https://www.coingecko.com/en/coins/dogecoin' },
+            'ADA': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/2010.png', link: 'https://www.coingecko.com/en/coins/cardano' },
+            'AVAX': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png', link: 'https://www.coingecko.com/en/coins/avalanche' },
+            'LINK': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1975.png', link: 'https://www.coingecko.com/en/coins/chainlink' },
+            'DOT': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/6636.png', link: 'https://www.coingecko.com/en/coins/polkadot' },
+            'MATIC': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/3890.png', link: 'https://www.coingecko.com/en/coins/polygon' }
         };
+        // ====================================================================
 
-        const socket = io();
-        const statusLight = document.getElementById('status-light');
         const opportunitiesTable = document.getElementById('opportunities-table');
         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.body.addEventListener('htmx:sseMessage', function(evt) {
             document.getElementById('placeholder-row')?.remove();
-
+            
+            const signal = JSON.parse(evt.detail.data);
             const isPythCheaper = signal.pyth_price < signal.chainlink_price;
             const newRow = opportunitiesTable.insertRow(0);
-
             const assetInfo = ASSET_CONFIG[signal.asset] || { logo: '', link: '#' };
 
-            // --- THE CRITICAL FIX IS HERE ---
             newRow.innerHTML = `
                 <td>
                     <div class="asset-cell">