Update index.html

index.html

@@ -702,7 +702,12 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
         <button onclick="loadLiveNews()" style="padding:4px 12px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:var(--text);font-size:12px;cursor:pointer" title="Refresh">🔄</button>
     </div>
     <!-- COUNTERS -->
-    <div class="ln-counters" id="lnCounters"></div>
+    <div class="ln-counters" id="lnCounters">
+        <div class="ln-counter"><div class="ln-counter-val" style="color:var(--accent2)">—</div><div class="ln-counter-lbl">Open Positions</div></div>
+        <div class="ln-counter"><div class="ln-counter-val" style="color:var(--gold)">⚡—</div><div class="ln-counter-lbl">GPU at Risk</div></div>
+        <div class="ln-counter"><div class="ln-counter-val" style="color:var(--red)">💀 —</div><div class="ln-counter-lbl">Liquidations 24h</div></div>
+        <div class="ln-counter"><div class="ln-counter-val" style="color:#ff8a80">🚨 —</div><div class="ln-counter-lbl">SEC Actions 24h</div></div>
+    </div>
     <!-- MVP / VILLAIN -->
     <div class="ln-mvp-row" id="lnMvpRow" style="display:none"></div>
     <!-- MAIN STUDIO (featured story with anchor) -->
@@ -2543,21 +2548,41 @@ const LN_CAT_LABELS = {
 let lnData = null, lnFilter = 'all', lnStudioIdx = 0, lnStudioTimer = null, lnAutoRefresh = null;
 
 async function loadLiveNews(){
+    const feedEl = document.getElementById('lnFeed');
+    const titleEl = document.getElementById('lnFeedTitle');
+    // Immediate visual feedback
+    if(titleEl) titleEl.textContent = '📡 LIVE FEED — Fetching...';
+    let r;
     try{
-        const r = await(await fetch('/api/live-news?hours=24')).json();
-        lnData = r;
-        renderLiveBreaking(r.breaking||[]);
-        renderLiveCounters(r.counters||{});
-        renderLiveMvp(r.mvp, r.villain);
-        renderLiveStudio(r.stories||[]);
-        renderLiveFeed(r.stories||[]);
-        // Auto-refresh every 60s
-        if(lnAutoRefresh) clearInterval(lnAutoRefresh);
-        lnAutoRefresh = setInterval(()=>{if(cTab==='livenews')loadLiveNews();},60000);
+        const resp = await fetch('/api/live-news?hours=24');
+        if(!resp.ok){
+            // API returned error status
+            const errText = await resp.text().catch(()=>'');
+            console.error('Live news API status:', resp.status, errText);
+            if(titleEl) titleEl.textContent = '📡 LIVE FEED — API Error ('+resp.status+')';
+            if(feedEl) feedEl.innerHTML = `<div class="ln-no-stories"><div class="big">⚠️</div><div style="font-size:14px;font-weight:600;color:var(--red)">API Error ${resp.status}</div><div style="font-size:11px;margin-top:6px;color:var(--muted);max-width:400px;word-break:break-all">${esc(errText.substring(0,300))}</div><div style="margin-top:12px"><button class="btn btn-primary" onclick="loadLiveNews()" style="padding:8px 20px;font-size:12px">🔄 Retry</button></div></div>`;
+            renderLiveCounters({});
+            return;
+        }
+        r = await resp.json();
+        console.log('Live news loaded:', r.total_stories||0, 'stories', r.error||'');
     }catch(e){
-        console.error('Live news error:',e);
-        document.getElementById('lnFeed').innerHTML='<div class="ln-no-stories"><div class="big">📡</div><div style="font-size:14px;color:var(--red)">Signal lost. Retrying...</div></div>';
+        console.error('Live news fetch error:', e);
+        if(titleEl) titleEl.textContent = '📡 LIVE FEED — Connection Error';
+        if(feedEl) feedEl.innerHTML = `<div class="ln-no-stories"><div class="big">📡</div><div style="font-size:14px;font-weight:600;color:var(--red)">Failed to connect to Live News API</div><div style="font-size:11px;margin-top:6px;color:var(--muted)">${esc(String(e))}</div><div style="margin-top:12px"><button class="btn btn-primary" onclick="loadLiveNews()" style="padding:8px 20px;font-size:12px">🔄 Retry</button></div></div>`;
+        renderLiveCounters({});
+        return;
     }
+    if(!r){renderLiveCounters({});return;}
+    lnData = r;
+    try{renderLiveBreaking(r.breaking||[]);}catch(e){console.warn('LN Breaking render:',e);}
+    try{renderLiveCounters(r.counters||{});}catch(e){console.warn('LN Counters render:',e);}
+    try{renderLiveMvp(r.mvp||null, r.villain||null);}catch(e){console.warn('LN MVP render:',e);}
+    try{renderLiveStudio(r.stories||[]);}catch(e){console.warn('LN Studio render:',e);}
+    try{renderLiveFeed(r.stories||[]);}catch(e){console.warn('LN Feed render:',e);}
+    // Auto-refresh every 60s
+    if(lnAutoRefresh) clearInterval(lnAutoRefresh);
+    lnAutoRefresh = setInterval(()=>{if(cTab==='livenews')loadLiveNews();},60000);
 }
 
 function renderLiveBreaking(items){
@@ -2574,13 +2599,13 @@ function renderLiveBreaking(items){
 
 function renderLiveCounters(c){
     const el = document.getElementById('lnCounters');
-    if(!c || !c.active_positions){
-        el.innerHTML = `<div class="ln-counter"><div class="ln-counter-val" style="color:var(--muted)">—</div><div class="ln-counter-lbl">Loading...</div></div>`.repeat(4);
-        return;
-    }
-    const longPct = c.long_pct||50;
+    if(!c) c={};
+    const pos = c.active_positions||0;
+    const lc = c.long_count||0;
+    const sc = c.short_count||0;
+    const longPct = c.long_pct||( pos>0 ? Math.round(lc/pos*100) : 50);
     el.innerHTML = `
-        <div class="ln-counter"><div class="ln-counter-val" style="color:var(--accent2)">${c.active_positions||0}</div><div class="ln-counter-lbl">Open Positions</div><div style="font-size:10px;color:var(--muted);margin-top:2px">🟢${c.long_count} / 🔴${c.short_count} (${longPct}%L)</div></div>
+        <div class="ln-counter"><div class="ln-counter-val" style="color:var(--accent2)">${pos}</div><div class="ln-counter-lbl">Open Positions</div><div style="font-size:10px;color:var(--muted);margin-top:2px">🟢${lc} / 🔴${sc} (${longPct}%L)</div></div>
         <div class="ln-counter"><div class="ln-counter-val" style="color:var(--gold)">⚡${(c.total_risk_gpu||0).toLocaleString()}</div><div class="ln-counter-lbl">GPU at Risk</div><div style="font-size:10px;color:var(--muted);margin-top:2px">${c.active_traders||0} active traders</div></div>
         <div class="ln-counter"><div class="ln-counter-val" style="color:var(--red)">💀 ${c.liquidations_24h||0}</div><div class="ln-counter-lbl">Liquidations 24h</div><div style="font-size:10px;color:var(--red);margin-top:2px">${(c.liquidated_gpu_24h||0).toLocaleString()} GPU lost</div></div>
         <div class="ln-counter"><div class="ln-counter-val" style="color:#ff8a80">🚨 ${c.sec_violations_24h||0}</div><div class="ln-counter-lbl">SEC Actions 24h</div><div style="font-size:10px;color:var(--muted);margin-top:2px">⛓️${c.sec_active_suspensions||0} suspended</div></div>