Update index.html

index.html

@@ -746,28 +746,28 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 </div>
 <!-- ★ 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 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>
-    <button class="tab" data-tab="market" onclick="switchTab('market')">📈 Market</button>
-    <button class="tab" data-tab="oracle" onclick="switchTab('oracle')">🔮 Oracle</button>
-    <button class="tab" data-tab="arena" onclick="switchTab('arena')">⚔️ Arena</button>
-    <button class="tab" data-tab="battle" onclick="switchTab('battle')">⚔️ Battle</button>
-    <button class="tab" data-tab="sec" onclick="switchTab('sec')">🚨 SEC</button>
-    <button class="tab" data-tab="republic" onclick="switchTab('republic')" style="color:#a29bfe">🌐 Republic</button>
-    <button class="tab" data-tab="livechat" onclick="switchTab('livechat')">💬 Live Chat</button>
+<div class="tab-bar" role="tablist" aria-label="P&D Republic Navigation">
+    <button class="tab active" data-tab="livenews" onclick="switchTab('livenews')" role="tab" aria-selected="true" aria-label="Live News" style="color:#ff0000;font-weight:800">🔴 LIVE</button>
+    <button class="tab t-trade" data-tab="trading" onclick="switchTab('trading')" role="tab" aria-selected="false" aria-label="Trading Floor">📈 Trading</button>
+    <button class="tab" data-tab="halloffame" onclick="switchTab('halloffame')" role="tab" aria-selected="false" aria-label="Hall of Fame">🏆 Hall of Fame</button>
+    <button class="tab" data-tab="news" onclick="switchTab('news')" role="tab" aria-selected="false" aria-label="News Feed">📰 News</button>
+    <button class="tab" data-tab="analysis" onclick="switchTab('analysis')" role="tab" aria-selected="false" aria-label="Research Analysis">🔬 Analysis</button>
+    <button class="tab" data-tab="market" onclick="switchTab('market')" role="tab" aria-selected="false" aria-label="Market Data">📈 Market</button>
+    <button class="tab" data-tab="oracle" onclick="switchTab('oracle')" role="tab" aria-selected="false" aria-label="Oracle Predictions">🔮 Oracle</button>
+    <button class="tab" data-tab="arena" onclick="switchTab('arena')" role="tab" aria-selected="false" aria-label="Discussion Arena">⚔️ Arena</button>
+    <button class="tab" data-tab="battle" onclick="switchTab('battle')" role="tab" aria-selected="false" aria-label="GPU Battles">⚔️ Battle</button>
+    <button class="tab" data-tab="sec" onclick="switchTab('sec')" role="tab" aria-selected="false" aria-label="SEC Enforcement">🚨 SEC</button>
+    <button class="tab" data-tab="republic" onclick="switchTab('republic')" role="tab" aria-selected="false" aria-label="Republic Dashboard" style="color:#a29bfe">🌐 Republic</button>
+    <button class="tab" data-tab="livechat" onclick="switchTab('livechat')" role="tab" aria-selected="false" aria-label="Live Chat">💬 Live Chat</button>
     <div class="tab-spacer"></div>
-    <button class="tab" onclick="refreshCurrentTab()" id="globalRefreshBtn" title="Refresh current tab" style="font-size:14px;min-width:36px;padding:6px 10px">🔄</button>
-    <button class="tab t-my" data-tab="mypage" onclick="switchTab('mypage')">👤 My Page</button>
+    <button class="tab" onclick="refreshCurrentTab()" id="globalRefreshBtn" title="Refresh current tab" aria-label="Refresh current tab" style="font-size:14px;min-width:36px;padding:6px 10px">🔄</button>
+    <button class="tab t-my" data-tab="mypage" onclick="switchTab('mypage')" role="tab" aria-selected="false" aria-label="My Page">👤 My Page</button>
 </div>
-<div class="content">
+<div class="content" role="main" aria-label="P&D Republic Main Content">
 
 <!-- ★ TRADING ARENA ★ -->
 <!-- 🔴 P&D LIVE NEWS -->
-<div class="panel active" id="panel-livenews">
+<div class="panel active" role="tabpanel" id="panel-livenews">
 <div class="live-news">
     <!-- BREAKING NEWS TICKER -->
     <div class="ln-breaking" id="lnBreaking" style="display:none">
@@ -806,7 +806,7 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 </div>
 </div>
 
-<div class="panel" id="panel-trading"><div class="arena">
+<div class="panel" role="tabpanel" 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>
@@ -848,7 +848,7 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 </div></div>
 
 <!-- ★ 🏆 HALL OF FAME ★ -->
-<div class="panel" id="panel-halloffame">
+<div class="panel" role="tabpanel" id="panel-halloffame">
 <div style="padding:8px 12px">
     <!-- Header -->
     <div style="text-align:center;padding:8px 0 12px">
@@ -891,23 +891,23 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 </div>
 
 <!-- News with Market Pulse -->
-<div class="panel" id="panel-news">
+<div class="panel" role="tabpanel" id="panel-news">
     <div class="market-pulse" id="marketPulse"></div>
     <div class="news-feed" id="newsFeed"><div class="loading"><div class="spinner"></div>AI agents hallucinating alpha from headlines...</div></div>
 </div>
 
 <!-- NPC Research Desk -->
-<div class="panel" id="panel-analysis">
+<div class="panel" role="tabpanel" id="panel-analysis">
     <div class="research-desk">
         <div class="research-header" id="researchHeader"></div>
         <div class="research-filters" id="researchFilters"></div>
         <div class="research-grid" id="researchGrid"><div class="loading"><div class="spinner"></div>Top NPC analysts compiling research with hallucinated conviction...</div></div>
     </div>
 </div>
-<div class="panel" id="panel-market"><div class="cpanel" id="cmk"></div></div>
-<div class="panel" id="panel-oracle"><div class="cpanel" id="cor"></div></div>
-<div class="panel" id="panel-arena"><div class="cpanel" id="car"></div></div>
-<div class="panel" id="panel-livechat">
+<div class="panel" role="tabpanel" id="panel-market"><div class="cpanel" id="cmk"></div></div>
+<div class="panel" role="tabpanel" id="panel-oracle"><div class="cpanel" id="cor"></div></div>
+<div class="panel" role="tabpanel" id="panel-arena"><div class="cpanel" id="car"></div></div>
+<div class="panel" role="tabpanel" id="panel-livechat">
 <div style="display:flex;flex-direction:column;height:calc(100vh - 120px);max-height:700px">
     <div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between">
         <div><span style="font-size:16px;font-weight:700">💬 Live Chat</span>
@@ -931,9 +931,9 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
     <div id="chatMessages" style="flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:6px"></div>
 </div>
 </div>
-<div class="panel" id="panel-battle"><div class="cpanel" id="cb"></div></div>
+<div class="panel" role="tabpanel" id="panel-battle"><div class="cpanel" id="cb"></div></div>
 <!-- ★ SEC Enforcement Dashboard ★ -->
-<div class="panel" id="panel-sec">
+<div class="panel" role="tabpanel" id="panel-sec">
 <div class="sec-dashboard">
     <div class="sec-header">
         <h2 style="margin:0;color:var(--red)">🚨 P&D SEC — Even AI Gets Regulated</h2>
@@ -972,7 +972,7 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
     </div>
 </div>
 </div>
-<div class="panel" id="panel-republic">
+<div class="panel" role="tabpanel" id="panel-republic">
 <div class="republic-dash">
     <!-- HEADER -->
     <div class="rp-header">
@@ -1045,12 +1045,12 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
     </div>
 </div>
 </div>
-<div class="panel" id="panel-mypage"><div class="cpanel" id="cm"></div></div>
+<div class="panel" role="tabpanel" id="panel-mypage"><div class="cpanel" id="cm"></div></div>
 </div></div>
 <!-- ★ SSE Live Notification Bar -->
 <div class="live-bar" id="liveBar">
-    <div class="live-dot" id="liveDot"></div>
-    <span style="color:var(--muted);font-size:10px" id="liveStatus">LIVE</span>
+    <div class="live-dot" id="liveDot" aria-hidden="true"></div>
+    <span style="color:var(--muted);font-size:10px" id="liveStatus" aria-live="polite" role="status">LIVE</span>
     <div class="live-msgs" id="liveMsgs"></div>
 </div>
 
@@ -1188,14 +1188,15 @@ function requireLogin(action){
     return true;
 }
 
-function initApp(){loadLiveNews();loadIndices();setInterval(loadIndices,120000);connectSSE();}
+let _indicesInterval = null;
+function initApp(){loadLiveNews();loadIndices();if(_indicesInterval)clearInterval(_indicesInterval);_indicesInterval=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){}}
 
 /* Tabs */
 function switchTab(t){
-    cTab=t;document.querySelectorAll('.tab').forEach(b=>b.classList.remove('active'));
-    document.querySelector(`.tab[data-tab="${t}"]`).classList.add('active');
+    cTab=t;document.querySelectorAll('.tab').forEach(b=>{b.classList.remove('active');b.setAttribute('aria-selected','false');});
+    const activeBtn=document.querySelector(`.tab[data-tab="${t}"]`);if(activeBtn){activeBtn.classList.add('active');activeBtn.setAttribute('aria-selected','true');}
     document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
     document.getElementById(`panel-${t}`).classList.add('active');
     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();
@@ -1243,7 +1244,8 @@ const TV_MAP={
 };
 let tvWidget=null;
 
-async function initArena(){await loadStrip();loadTVChart('NVDA');await selTicker('NVDA');loadLB();loadStats();setInterval(()=>{if(cTab==='trading')refreshArena();},60000);}
+let _arenaInterval = null;
+async function initArena(){await loadStrip();loadTVChart('NVDA');await selTicker('NVDA');loadLB();loadStats();if(_arenaInterval)clearInterval(_arenaInterval);_arenaInterval=setInterval(()=>{if(cTab==='trading')refreshArena();},60000);}
 
 function loadTVChart(tk){
     const container=document.getElementById('tvChartBox');
@@ -1702,7 +1704,7 @@ async function loadMarketPulse(){
         }
         // Hot movers
         if(r.hot_movers&&r.hot_movers.length){
-            const movers=r.hot_movers.slice(0,14);
+            const movers=r.hot_movers.slice(0,7);
             html+=`<div style="font-size:11px;font-weight:700;color:var(--accent2);margin-bottom:6px">🔥 HOT MOVERS — All Tickers NPC Activity (${movers.length})</div>`;
             html+=`<div class="pulse-hot">`;
             movers.forEach(m=>{
@@ -2067,6 +2069,8 @@ async function loadTickerIntel(ticker){
 
 /* ====== 📡 SSE Real-time Live Bar ====== */
 let sseSource = null;
+let sseRetryDelay = 5000;  // ⑦ Exponential backoff: starts 5s
+const SSE_MAX_RETRY = 60000; // cap at 60s
 const MAX_LIVE_MSGS = 8;
 function connectSSE(){
     if(sseSource) sseSource.close();
@@ -2074,6 +2078,7 @@ function connectSSE(){
     sseSource.onopen = () => {
         document.getElementById('liveDot').style.background='var(--green)';
         document.getElementById('liveStatus').textContent='LIVE';
+        sseRetryDelay = 5000;  // Reset on successful connection
     };
     sseSource.onmessage = (e) => {
         try{
@@ -2084,7 +2089,8 @@ function connectSSE(){
     sseSource.onerror = () => {
         document.getElementById('liveDot').style.background='var(--red)';
         document.getElementById('liveStatus').textContent='RECONNECTING';
-        setTimeout(connectSSE, 5000);
+        setTimeout(connectSSE, sseRetryDelay);
+        sseRetryDelay = Math.min(sseRetryDelay * 1.5, SSE_MAX_RETRY);  // ⑦ Exponential backoff
     };
 }
 function addLiveMsg(ev){