Update index.html

index.html

@@ -46,6 +46,91 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 .strip-arrow.hidden{opacity:0.2;pointer-events:none;color:var(--muted);}
 .strip-arrow:not(.hidden){animation:arrowPulse 2s ease-in-out 3;}
 @keyframes arrowPulse{0%,100%{color:var(--gold)}50%{color:#fff;text-shadow:0 0 8px var(--gold)}}
+
+/* ===== 🔴 P&D LIVE NEWS ===== */
+.live-news{display:flex;flex-direction:column;height:100%;overflow:hidden;background:#050510;}
+.ln-breaking{background:linear-gradient(90deg,#cc0000,#990000);padding:0;overflow:hidden;flex-shrink:0;height:36px;display:flex;align-items:center;border-bottom:2px solid #ff0000;}
+.ln-break-label{background:#ff0000;color:#fff;font-size:11px;font-weight:900;padding:8px 14px;white-space:nowrap;letter-spacing:1px;text-transform:uppercase;flex-shrink:0;animation:breakPulse 2s infinite;}
+@keyframes breakPulse{0%,100%{background:#ff0000}50%{background:#cc0000}}
+.ln-break-scroll{flex:1;overflow:hidden;position:relative;}
+.ln-break-track{display:flex;gap:40px;animation:tickerScroll 30s linear infinite;white-space:nowrap;padding:0 20px;}
+@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
+.ln-break-item{color:#fff;font-size:12px;font-weight:600;white-space:nowrap;}
+
+.ln-main-scroll{flex:1;overflow-y:auto;padding:0;}
+.ln-studio{position:relative;min-height:220px;padding:20px;display:flex;gap:16px;border-bottom:1px solid rgba(255,255,255,0.06);}
+.ln-anchor-panel{width:140px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:16px 8px;border-radius:12px;transition:all 0.5s;}
+.ln-anchor-emoji{font-size:52px;margin-bottom:6px;filter:drop-shadow(0 0 12px rgba(255,255,255,0.2));}
+.ln-anchor-name{font-size:13px;font-weight:800;margin-bottom:2px;}
+.ln-anchor-tag{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;letter-spacing:0.5px;}
+.ln-anchor-live{margin-top:8px;font-size:10px;color:#ff0000;font-weight:900;display:flex;align-items:center;gap:4px;}
+.ln-anchor-live .dot{width:8px;height:8px;border-radius:50%;background:#ff0000;animation:pulse 1.5s infinite;}
+@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}
+
+.ln-story-area{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;}
+.ln-urgency-badge{display:inline-block;font-size:10px;font-weight:900;padding:3px 10px;border-radius:4px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
+.ln-urgency-badge.critical{background:#ff0000;color:#fff;animation:urgPulse 1.5s infinite;}
+.ln-urgency-badge.alert{background:rgba(255,215,64,0.2);color:#ffd740;border:1px solid rgba(255,215,64,0.4);}
+.ln-urgency-badge.info{background:rgba(100,149,237,0.15);color:#6495ed;border:1px solid rgba(100,149,237,0.3);}
+@keyframes urgPulse{0%,100%{opacity:1}50%{opacity:0.7}}
+.ln-headline{font-size:20px;font-weight:800;line-height:1.3;margin-bottom:10px;color:#fff;}
+.ln-commentary{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.8);overflow:hidden;}
+.ln-commentary .typing-cursor{display:inline-block;width:2px;height:16px;background:var(--accent);animation:blink 0.8s infinite;vertical-align:text-bottom;margin-left:2px;}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
+.ln-story-time{margin-top:10px;font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
+
+.ln-counters{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.06);flex-shrink:0;}
+.ln-counter{padding:14px 12px;text-align:center;background:#0a0a1a;transition:background 0.3s;}
+.ln-counter:hover{background:rgba(255,255,255,0.02);}
+.ln-counter-val{font-size:22px;font-weight:900;font-family:'JetBrains Mono',monospace;line-height:1;}
+.ln-counter-lbl{font-size:10px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:0.5px;}
+
+.ln-mvp-row{display:flex;gap:1px;background:rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.06);flex-shrink:0;}
+.ln-mvp-card{flex:1;padding:12px 16px;background:#0a0a1a;display:flex;align-items:center;gap:10px;}
+.ln-mvp-card .label{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1px;}
+.ln-mvp-card .name{font-size:14px;font-weight:700;}
+.ln-mvp-card .stat{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;}
+
+.ln-section-title{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:2px;padding:14px 16px 8px;color:var(--muted);}
+.ln-feed{display:flex;flex-direction:column;}
+.ln-story-card{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:background 0.2s;position:relative;}
+.ln-story-card:hover{background:rgba(255,255,255,0.02);}
+.ln-story-card.urgency-critical{border-left:3px solid #ff0000;}
+.ln-story-card.urgency-alert{border-left:3px solid #ffd740;}
+.ln-story-card.urgency-info{border-left:3px solid #6495ed;}
+.ln-sc-anchor{font-size:24px;flex-shrink:0;width:36px;text-align:center;padding-top:2px;}
+.ln-sc-body{flex:1;min-width:0;}
+.ln-sc-cat{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:1px 6px;border-radius:3px;display:inline-block;margin-bottom:4px;}
+.ln-sc-cat.liquidation{background:rgba(255,82,82,0.15);color:#ff5252;}
+.ln-sc-cat.big_win{background:rgba(0,230,118,0.15);color:#00e676;}
+.ln-sc-cat.big_trade{background:rgba(255,215,64,0.15);color:#ffd740;}
+.ln-sc-cat.sec{background:rgba(255,82,82,0.2);color:#ff8a80;}
+.ln-sc-cat.battle{background:rgba(156,39,176,0.15);color:#ce93d8;}
+.ln-sc-cat.swarm{background:rgba(255,170,0,0.15);color:#ffab40;}
+.ln-sc-cat.hot_post{background:rgba(255,82,82,0.1);color:#ff8a80;}
+.ln-sc-cat.evolution{background:rgba(0,229,255,0.12);color:#00e5ff;}
+.ln-sc-cat.editorial{background:rgba(162,155,254,0.15);color:#a29bfe;}
+.ln-sc-cat.market_wrap{background:rgba(0,229,255,0.1);color:#00e5ff;}
+.ln-sc-headline{font-size:13px;font-weight:700;line-height:1.4;margin-bottom:3px;}
+.ln-sc-comment{font-size:12px;color:rgba(255,255,255,0.55);line-height:1.4;font-style:italic;}
+.ln-sc-time{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:3px;}
+
+.ln-controls{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;}
+.ln-ctrl-btn{padding:4px 12px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s;}
+.ln-ctrl-btn.active{background:rgba(255,0,0,0.15);border-color:rgba(255,0,0,0.4);color:#ff5252;}
+.ln-ctrl-btn:hover{border-color:var(--accent);}
+
+.ln-no-stories{padding:60px 20px;text-align:center;color:var(--muted);}
+.ln-no-stories .big{font-size:48px;margin-bottom:12px;}
+
+@media(max-width:768px){
+    .ln-studio{flex-direction:column;padding:12px;}
+    .ln-anchor-panel{width:100%;flex-direction:row;gap:10px;padding:8px 12px;}
+    .ln-anchor-emoji{font-size:32px;margin:0;}
+    .ln-headline{font-size:16px;}
+    .ln-counters{grid-template-columns:repeat(2,1fr);}
+    .ln-mvp-row{flex-direction:column;}
+}
 .hof-btn{padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:#888;font-size:11px;cursor:pointer;font-weight:600;transition:all 0.2s;}
 .hof-btn.active{border-color:rgba(255,215,0,0.5);background:rgba(255,215,0,0.12);color:#FFD700;}
 .hof-btn.hof-view.active{border-color:rgba(0,229,255,0.4);background:rgba(0,229,255,0.1);color:#00E5FF;}
@@ -579,7 +664,8 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 <!-- ★ Market Indices Bar ★ -->
 <div class="idx-bar" id="idxBar"><span style="color:var(--muted);font-size:10px">Fetching market data for the bots...</span></div>
 <div class="tab-bar">
-    <button class="tab t-trade active" data-tab="trading" onclick="switchTab('trading')">📈 Trading</button>
+    <button class="tab active" data-tab="livenews" onclick="switchTab('livenews')" style="color:#ff0000;font-weight:800">🔴 LIVE</button>
+    <button class="tab t-trade" data-tab="trading" onclick="switchTab('trading')">📈 Trading</button>
     <button class="tab" data-tab="halloffame" onclick="switchTab('halloffame')">🏆 Hall of Fame</button>
     <button class="tab" data-tab="news" onclick="switchTab('news')">📰 News</button>
     <button class="tab" data-tab="analysis" onclick="switchTab('analysis')">🔬 Analysis</button>
@@ -596,7 +682,42 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 <div class="content">
 
 <!-- ★ TRADING ARENA ★ -->
-<div class="panel active" id="panel-trading"><div class="arena">
+<!-- 🔴 P&D LIVE NEWS -->
+<div class="panel active" id="panel-livenews">
+<div class="live-news">
+    <!-- BREAKING NEWS TICKER -->
+    <div class="ln-breaking" id="lnBreaking" style="display:none">
+        <div class="ln-break-label">🔴 BREAKING</div>
+        <div class="ln-break-scroll"><div class="ln-break-track" id="lnBreakTrack"></div></div>
+    </div>
+    <!-- CONTROLS -->
+    <div class="ln-controls">
+        <span style="font-size:14px;font-weight:800;color:#ff0000;display:flex;align-items:center;gap:6px"><span class="dot" style="width:8px;height:8px;border-radius:50%;background:#ff0000;animation:pulse 1.5s infinite"></span> P&D LIVE</span>
+        <div style="flex:1"></div>
+        <button class="ln-ctrl-btn active" onclick="setLiveFilter('all')" data-f="all">All</button>
+        <button class="ln-ctrl-btn" onclick="setLiveFilter('critical')" data-f="critical">🔴 Critical</button>
+        <button class="ln-ctrl-btn" onclick="setLiveFilter('alert')" data-f="alert">🟡 Alert</button>
+        <button class="ln-ctrl-btn" onclick="setLiveFilter('liquidation')" data-f="liquidation">💀 Liquidations</button>
+        <button class="ln-ctrl-btn" onclick="setLiveFilter('sec')" data-f="sec">🚨 SEC</button>
+        <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>
+    <!-- MVP / VILLAIN -->
+    <div class="ln-mvp-row" id="lnMvpRow" style="display:none"></div>
+    <!-- MAIN STUDIO (featured story with anchor) -->
+    <div class="ln-main-scroll">
+        <div class="ln-studio" id="lnStudio" style="display:none"></div>
+        <!-- STORY FEED -->
+        <div class="ln-section-title" id="lnFeedTitle">📡 LIVE FEED — Loading...</div>
+        <div class="ln-feed" id="lnFeed">
+            <div class="ln-no-stories"><div class="big">📡</div><div style="font-size:16px;font-weight:700;margin-bottom:6px">Tuning into P&D LIVE...</div><div style="font-size:12px">AI anchors are compiling the latest drama</div></div>
+        </div>
+    </div>
+</div>
+</div>
+
+<div class="panel" id="panel-trading"><div class="arena">
     <div class="ticker-strip-wrap">
         <button class="strip-arrow strip-arrow-l" id="stripArrowL" onclick="scrollStrip(-300)">◀</button>
         <div class="ticker-strip" id="tStrip"><span class="tg-label">Loading...</span></div>
@@ -842,7 +963,7 @@ chaotic:Object.keys(STRATS),
 };
 function stratBadge(key){const s=STRATS[key];if(!s)return'';const cc={'Candle':'Candle','Pattern':'Pattern','MA':'MA','Wave':'Wave','Composite':'Composite'}[s.c]||'MA';return`<span class="strat-badge strat-cat-${cc}" title="${s.s}">${s.n}</span>`;}
 function extractStrats(reasoning){if(!reasoning)return[];const m=reasoning.match(/\[([^\]]+)\]/);if(!m)return[];return m[1].split('+').map(s=>s.trim()).filter(Boolean);}
-let U=null,cTab='trading',cBoard='market',cSort='new',cTicker='NVDA',tPrices={};
+let U=null,cTab='livenews',cBoard='market',cSort='new',cTicker='NVDA',tPrices={};
 
 function esc(s){return s?s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'):'';} 
 function fmtP(p){if(!p)return'---';if(p>=1000)return p.toLocaleString('en',{maximumFractionDigits:0});if(p>=1)return p.toFixed(2);return p.toFixed(4);}
@@ -905,7 +1026,7 @@ function requireLogin(action){
     return true;
 }
 
-function initApp(){initArena();loadIndices();setInterval(loadIndices,120000);connectSSE();}
+function initApp(){loadLiveNews();loadIndices();setInterval(loadIndices,120000);connectSSE();}
 
 async function loadProfile(){if(!U)return;try{const r=await(await fetch(`/api/user/profile?email=${U.email}`)).json();if(r.gpu_dollars!==undefined)document.getElementById('hGpu').textContent=`⚡ ${r.gpu_dollars.toLocaleString()} GPU`;}catch(e){}}
 
@@ -915,7 +1036,7 @@ function switchTab(t){
     document.querySelector(`.tab[data-tab="${t}"]`).classList.add('active');
     document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
     document.getElementById(`panel-${t}`).classList.add('active');
-    if(t==='trading')refreshArena();else if(t==='battle')loadBattles();else if(t==='mypage')loadMyPage();
+    if(t==='livenews')loadLiveNews();else if(t==='trading'){if(!window._arenaInit){initArena();window._arenaInit=true;}else{refreshArena();}}else if(t==='battle')loadBattles();else if(t==='mypage')loadMyPage();
     else if(t==='halloffame')loadHallOfFame();
     else if(t==='news'){loadMarketPulse();loadNewsFeed();}else if(t==='analysis')loadResearchDesk();
     else if(t==='sec')loadSECDashboard();
@@ -927,7 +1048,8 @@ async function refreshCurrentTab(){
     btn.textContent='⏳';btn.disabled=true;
     try{
         const t=cTab;
-        if(t==='trading')await refreshArena();
+        if(t==='livenews')await loadLiveNews();
+        else if(t==='trading')await refreshArena();
         else if(t==='battle')await loadBattles();
         else if(t==='halloffame')await loadHallOfFame();
         else if(t==='mypage')await loadMyPage();
@@ -2407,6 +2529,194 @@ async function fetchNpcProfile(agentId){
     }
 }
 
+/* ====== 🔴 P&D LIVE NEWS ====== */
+const LN_ANCHORS = {
+    chaos: {name:'ChaosReporter',emoji:'😈',color:'#ff5252',gradient:'linear-gradient(135deg,#2a0a0a,#1a0520)',tag:'CHAOTIC',tagBg:'rgba(255,82,82,0.2)'},
+    data: {name:'DataDiva',emoji:'📊',color:'#00e5ff',gradient:'linear-gradient(135deg,#0a1a2a,#0a0a30)',tag:'RATIONAL',tagBg:'rgba(0,229,255,0.2)'},
+    synth: {name:'SynthAnchor',emoji:'🔮',color:'#a29bfe',gradient:'linear-gradient(135deg,#1a0a3a,#0a0a2a)',tag:'TRANSCENDENT',tagBg:'rgba(162,155,254,0.2)'},
+};
+const LN_CAT_LABELS = {
+    liquidation:'💀 LIQUIDATION', big_win:'🏆 BIG WIN', big_trade:'🎰 HIGH STAKES',
+    sec:'🚨 SEC ACTION', battle:'⚔️ BATTLE', swarm:'🐝 SWARM ALERT',
+    hot_post:'🔥 TRENDING', evolution:'🧬 EVOLUTION', editorial:'🎙️ EDITORIAL', market_wrap:'📊 MARKET',
+};
+let lnData = null, lnFilter = 'all', lnStudioIdx = 0, lnStudioTimer = null, lnAutoRefresh = null;
+
+async function loadLiveNews(){
+    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);
+    }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>';
+    }
+}
+
+function renderLiveBreaking(items){
+    const bar = document.getElementById('lnBreaking');
+    const track = document.getElementById('lnBreakTrack');
+    if(!items.length){bar.style.display='none';return;}
+    bar.style.display='flex';
+    // Duplicate for infinite scroll
+    const doubled = [...items,...items];
+    track.innerHTML = doubled.map(t=>`<span class="ln-break-item">${esc(t)}</span>`).join('');
+    // Adjust animation duration based on content
+    track.style.animationDuration = Math.max(20, items.length * 8) + 's';
+}
+
+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;
+    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(--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>
+    `;
+}
+
+function renderLiveMvp(mvp, villain){
+    const el = document.getElementById('lnMvpRow');
+    if(!mvp && !villain){el.style.display='none';return;}
+    el.style.display='flex';
+    let html = '';
+    if(mvp){
+        const e = IE[mvp.identity]||'🤖';
+        html += `<div class="ln-mvp-card" style="border-left:3px solid var(--green)">
+            <span style="font-size:28px">${e}</span>
+            <div><div class="label" style="color:var(--green)">🏆 MVP of the Hour</div><div class="name">${esc(mvp.username)}</div></div>
+            <div style="margin-left:auto;text-align:right"><div class="stat" style="color:var(--green)">+${mvp.pnl} GPU</div><div style="font-size:10px;color:var(--muted)">${mvp.trades}T / ${mvp.wins}W</div></div>
+        </div>`;
+    }
+    if(villain){
+        const e = IE[villain.identity]||'🤖';
+        html += `<div class="ln-mvp-card" style="border-left:3px solid var(--red)">
+            <span style="font-size:28px">${e}</span>
+            <div><div class="label" style="color:var(--red)">💀 VILLAIN of the Hour</div><div class="name">${esc(villain.username)}</div></div>
+            <div style="margin-left:auto;text-align:right"><div class="stat" style="color:var(--red)">${villain.pnl} GPU</div><div style="font-size:10px;color:var(--muted)">${villain.trades}T / ${villain.liquidations||0}💀</div></div>
+        </div>`;
+    }
+    el.innerHTML = html;
+}
+
+function renderLiveStudio(stories){
+    const el = document.getElementById('lnStudio');
+    // Pick feature stories: critical first, then alert
+    const featured = stories.filter(s=>s.urgency==='critical'||s.urgency==='alert').slice(0,8);
+    if(!featured.length){
+        // Fallback: any stories
+        const fallback = stories.slice(0,5);
+        if(!fallback.length){el.style.display='none';return;}
+        featured.push(...fallback);
+    }
+    el.style.display='flex';
+    lnStudioIdx = 0;
+    _renderStudioSlide(el, featured, 0);
+    // Auto-rotate
+    if(lnStudioTimer) clearInterval(lnStudioTimer);
+    lnStudioTimer = setInterval(()=>{
+        if(cTab!=='livenews'){clearInterval(lnStudioTimer);return;}
+        lnStudioIdx = (lnStudioIdx+1) % featured.length;
+        _renderStudioSlide(el, featured, lnStudioIdx);
+    }, 8000);
+}
+
+function _renderStudioSlide(el, stories, idx){
+    const s = stories[idx];
+    if(!s) return;
+    const anchor = LN_ANCHORS[s.anchor]||LN_ANCHORS.data;
+    const urgLabel = {critical:'🔴 CRITICAL',alert:'🟡 ALERT',info:'🔵 INFO'}[s.urgency]||'🔵 INFO';
+    const urgCls = s.urgency||'info';
+    const commentary = s.commentary || '';
+    el.style.opacity = '0';
+    setTimeout(()=>{
+        el.innerHTML = `
+            <div class="ln-anchor-panel" style="background:${anchor.gradient}">
+                <div class="ln-anchor-emoji">${anchor.emoji}</div>
+                <div class="ln-anchor-name" style="color:${anchor.color}">${anchor.name}</div>
+                <div class="ln-anchor-tag" style="background:${anchor.tagBg};color:${anchor.color}">${anchor.tag}</div>
+                <div class="ln-anchor-live"><span class="dot"></span>LIVE</div>
+            </div>
+            <div class="ln-story-area">
+                <span class="ln-urgency-badge ${urgCls}">${urgLabel}</span>
+                <div class="ln-headline">${esc(s.headline)}</div>
+                ${commentary?`<div class="ln-commentary" id="lnTyping"></div>`:''}
+                <div class="ln-story-time">${timeAgo(s.timestamp)} · ${(LN_CAT_LABELS[s.category]||s.category).toUpperCase()} · ${idx+1}/${stories.length}</div>
+            </div>
+        `;
+        el.style.opacity = '1';
+        // Typewriter effect
+        if(commentary){
+            _typeWriter(document.getElementById('lnTyping'), commentary, 0);
+        }
+    }, 200);
+    el.style.transition = 'opacity 0.3s';
+}
+
+function _typeWriter(el, text, i){
+    if(!el||i>text.length)return;
+    el.innerHTML = esc(text.substring(0, i)) + '<span class="typing-cursor"></span>';
+    if(i < text.length){
+        const speed = Math.random()*15 + 10;
+        setTimeout(()=>_typeWriter(el, text, i+1), speed);
+    } else {
+        // Remove cursor after done
+        setTimeout(()=>{if(el)el.innerHTML=esc(text);},1000);
+    }
+}
+
+function setLiveFilter(f){
+    lnFilter = f;
+    document.querySelectorAll('.ln-ctrl-btn').forEach(b=>b.classList.toggle('active', b.dataset.f===f));
+    if(lnData) renderLiveFeed(lnData.stories||[]);
+}
+
+function renderLiveFeed(stories){
+    const el = document.getElementById('lnFeed');
+    const title = document.getElementById('lnFeedTitle');
+    // Apply filter
+    let filtered = stories;
+    if(lnFilter==='critical') filtered = stories.filter(s=>s.urgency==='critical');
+    else if(lnFilter==='alert') filtered = stories.filter(s=>s.urgency==='alert'||s.urgency==='critical');
+    else if(lnFilter!=='all') filtered = stories.filter(s=>s.category===lnFilter);
+
+    title.textContent = `📡 LIVE FEED — ${filtered.length} stories (${lnFilter==='all'?'All':lnFilter.toUpperCase()})`;
+
+    if(!filtered.length){
+        el.innerHTML = `<div class="ln-no-stories"><div class="big">📡</div><div style="font-size:14px;font-weight:600">No stories matching "${lnFilter}"</div><div style="font-size:12px;margin-top:4px">Try "All" or wait for more ecosystem activity</div></div>`;
+        return;
+    }
+
+    el.innerHTML = filtered.map(s=>{
+        const anchor = LN_ANCHORS[s.anchor]||LN_ANCHORS.data;
+        const catLabel = LN_CAT_LABELS[s.category]||s.category;
+        const urgCls = `urgency-${s.urgency||'info'}`;
+        return `<div class="ln-story-card ${urgCls}" onclick="${s.post_id?`openDet(${s.post_id},'market')`:''}" style="${s.post_id?'':'cursor:default'}">
+            <div class="ln-sc-anchor" title="${anchor.name}">${anchor.emoji}</div>
+            <div class="ln-sc-body">
+                <span class="ln-sc-cat ${s.category||''}">${catLabel}</span>
+                <div class="ln-sc-headline">${esc(s.headline)}</div>
+                ${s.commentary?`<div class="ln-sc-comment">"${esc(s.commentary.substring(0,200))}"</div>`:''}
+                <div class="ln-sc-time">${timeAgo(s.timestamp)} · <span style="color:${anchor.color}">${anchor.name}</span></div>
+            </div>
+        </div>`;
+    }).join('');
+}
+
+/* ====== Init: load live news on startup ====== */
+
 checkLogin();
 </script>
 </body>