Update frontend/index.html

frontend/index.html

@@ -21,7 +21,6 @@ html{scroll-behavior:smooth}
 body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;overflow-x:hidden}
 body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 60% 40% at 10% 20%,rgba(0,232,122,0.04) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 90% 80%,rgba(0,200,232,0.03) 0%,transparent 60%),repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(0,210,130,0.015) 40px,rgba(0,210,130,0.015) 41px),repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(0,210,130,0.015) 40px,rgba(0,210,130,0.015) 41px)}
 .app{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:0 24px 80px}
-
 header{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--border2);margin-bottom:0;position:relative}
 header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
 .logo{display:flex;align-items:center;gap:14px}
@@ -36,7 +35,6 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
 .dot.green{background:var(--accent);box-shadow:0 0 8px var(--accent)}
 @keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}
 #sessionClock{font-family:var(--mono);font-size:11px;color:var(--muted2);background:var(--surface);padding:6px 12px;border-radius:6px;border:1px solid var(--border)}
-
 .tab-nav{display:flex;border-bottom:1px solid var(--border2);margin-bottom:28px}
 .tab-btn{padding:16px 32px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);background:transparent;border:none;cursor:pointer;transition:color .2s;border-bottom:2px solid transparent;margin-bottom:-1px}
 .tab-btn:hover{color:var(--muted2)}
@@ -45,11 +43,9 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
 .tab-pane{display:none}
 .tab-pane.active{display:block;animation:fadeIn .25s ease}
 @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
-
 .panel{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
 .panel-head{padding:12px 18px;font-family:var(--mono);font-size:10px;color:var(--muted);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;letter-spacing:1.5px;text-transform:uppercase;background:rgba(0,0,0,0.2)}
 .panel-head .accent{color:var(--accent)}.panel-head .red{color:var(--red)}.panel-head .cyan{color:var(--cyan)}.panel-head .amber{color:var(--amber)}
-
 .config-strip{display:flex;gap:10px;align-items:center;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:14px 18px;margin-bottom:22px;flex-wrap:wrap}
 .speed-wrap{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
 .speed-wrap select{background:var(--surface);border:1px solid var(--border2);border-radius:7px;color:var(--cyan);font-family:var(--mono);font-size:11px;padding:7px 12px;outline:none;cursor:pointer}
@@ -66,10 +62,9 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
 #connBadge.real{background:rgba(0,232,122,0.1);color:var(--accent);border:1px solid rgba(0,232,122,0.2)}
 #connBadge.local{background:rgba(255,170,0,0.1);color:var(--amber);border:1px solid rgba(255,170,0,0.2)}
 #connBadge.idle{background:var(--surface);color:var(--muted);border:1px solid var(--border)}
-
 .metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px}
 @media(max-width:1000px){.metrics{grid-template-columns:repeat(3,1fr)}}
-.mc{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 16px;position:relative;overflow:hidden;transition:all .3s}
+.mc{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 16px;position:relative;overflow:hidden;transition:border-color .3s}
 .mc.flash{border-color:var(--accent);animation:mcflash .6s ease-out}
 @keyframes mcflash{0%{box-shadow:0 0 16px rgba(0,232,122,0.5)}100%{box-shadow:none}}
 .mc-label{font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
@@ -78,7 +73,6 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
 .mc-sub{font-size:10px;color:var(--muted);margin-top:6px;font-family:var(--mono)}
 .mc-bar{position:absolute;bottom:0;left:0;height:2px;transition:width .6s ease}
 .mc-bar.green{background:linear-gradient(90deg,var(--accent),transparent)}.mc-bar.red{background:linear-gradient(90deg,var(--red),transparent)}.mc-bar.blue{background:linear-gradient(90deg,var(--cyan),transparent)}.mc-bar.purple{background:linear-gradient(90deg,var(--purple),transparent)}
-
 .main-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;margin-bottom:18px}
 @media(max-width:1100px){.main-grid{grid-template-columns:1fr}}
 .feed-wrap{max-height:480px;overflow-y:auto}
@@ -109,21 +103,20 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
 .bottom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
 @media(max-width:800px){.bottom-grid{grid-template-columns:1fr}}
 .heatmap-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;padding:14px}
-.hm-cell{aspect-ratio:1;border-radius:3px;background:var(--surface);transition:background .5s}
+.hm-cell{aspect-ratio:1;border-radius:3px;background:var(--surface)}
 .summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}
 .sum-item{background:var(--surface);border-radius:10px;padding:14px;border:1px solid var(--border)}
 .sum-label{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
 .sum-val{font-family:var(--mono);font-size:20px;font-weight:700}
-
 /* CSV */
 .upload-zone{border:2px dashed var(--border2);border-radius:20px;padding:70px 40px;text-align:center;cursor:pointer;transition:all .3s;background:var(--bg2);position:relative;overflow:hidden}
-.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:rgba(0,232,122,0.03);box-shadow:0 0 60px rgba(0,232,122,0.06) inset}
+.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:rgba(0,232,122,0.03)}
 .upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
 .upload-icon{font-size:56px;margin-bottom:18px;display:block;opacity:.5}
 .upload-title{font-family:var(--mono);font-size:18px;color:var(--accent);margin-bottom:10px;font-weight:700}
 .upload-sub{font-size:13px;color:var(--muted2)}
 .upload-hint{display:inline-block;margin-top:18px;padding:8px 20px;border-radius:8px;border:1px solid var(--border2);font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:1px;background:var(--surface)}
-.format-banner{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:10px;font-family:var(--mono);font-size:11px;margin-bottom:16px;border:1px solid;animation:fadeIn .3s}
+.format-banner{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:10px;font-family:var(--mono);font-size:11px;margin-bottom:16px;border:1px solid}
 .format-banner.ok{background:rgba(0,232,122,0.06);border-color:rgba(0,232,122,0.2);color:var(--accent)}
 .file-card{background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:18px 22px;margin-bottom:18px;display:flex;align-items:center;gap:18px}
 .file-icon{font-size:32px;flex-shrink:0}
@@ -137,7 +130,7 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
 .progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
 .progress-title{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase}
 .progress-stats{font-family:var(--mono);font-size:13px;color:var(--cyan);font-weight:600}
-.progress-track{background:var(--surface);border-radius:6px;height:10px;overflow:hidden;margin-bottom:14px;position:relative}
+.progress-track{background:var(--surface);border-radius:6px;height:10px;overflow:hidden;margin-bottom:14px}
 .progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:6px;transition:width .4s ease;width:0%}
 .progress-fill.warning{background:linear-gradient(90deg,var(--amber),var(--red))}
 .progress-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap;gap:6px}
@@ -161,14 +154,12 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
 .sev-bar-track{flex:1;background:var(--surface);border-radius:3px;height:7px;overflow:hidden}
 .sev-bar-fill{height:100%;border-radius:3px;transition:width .8s ease}
 .sev-bar-cnt{font-family:var(--mono);font-size:10px;min-width:36px;text-align:right}
-
 /* REPORT */
 .processing-area{display:none}
 .processing-area.visible{display:block}
 .report-section{display:none}
 .report-section.visible{display:block;animation:fadeIn .4s ease}
-.completion-banner{background:linear-gradient(135deg,rgba(0,232,122,0.08),rgba(0,200,232,0.05));border:1px solid rgba(0,232,122,0.3);border-radius:14px;padding:20px 24px;display:flex;align-items:center;gap:18px;margin-bottom:22px;animation:bannerIn .5s ease-out}
-@keyframes bannerIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
+.completion-banner{background:linear-gradient(135deg,rgba(0,232,122,0.08),rgba(0,200,232,0.05));border:1px solid rgba(0,232,122,0.3);border-radius:14px;padding:20px 24px;display:flex;align-items:center;gap:18px;margin-bottom:22px}
 .banner-title{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--accent)}
 .banner-sub{font-family:var(--mono);font-size:10px;color:var(--muted2);margin-top:4px;line-height:1.8}
 .export-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
@@ -205,7 +196,10 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
 .cluster-title{font-family:var(--mono);font-size:11px;font-weight:700;margin-bottom:6px}
 .cluster-count{font-family:var(--mono);font-size:24px;font-weight:700;margin-bottom:4px}
 .cluster-sub{font-family:var(--mono);font-size:9px;color:var(--muted);line-height:1.8}
-.threat-table-wrap{max-height:380px;overflow-y:auto;margin-bottom:22px}
+/* VIRTUAL TABLE */
+.vt-wrap{position:relative;overflow:hidden}
+.vt-scroll{overflow-y:auto;max-height:420px}
+.vt-spacer{width:100%}
 .threat-table{width:100%;border-collapse:collapse;font-size:11px}
 .threat-table th{padding:10px 16px;text-align:left;font-family:var(--mono);font-size:9px;color:var(--muted);background:var(--surface);position:sticky;top:0;letter-spacing:1.5px;z-index:2;border-bottom:1px solid var(--border2)}
 .threat-table td{padding:9px 16px;border-top:1px solid var(--border);font-family:var(--mono);font-size:11px}
@@ -222,6 +216,10 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
 .risk-gauge-wrap{padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}
 .risk-gauge-canvas{width:160px;height:90px;display:block}
 .risk-label{font-family:var(--mono);font-size:11px;color:var(--muted2);text-align:center}
+/* pagination for report table */
+.pager{display:flex;align-items:center;gap:8px;padding:12px 16px;font-family:var(--mono);font-size:11px;color:var(--muted);border-top:1px solid var(--border)}
+.pager-btn{padding:5px 14px;border-radius:6px;background:var(--surface);border:1px solid var(--border2);color:var(--cyan);font-family:var(--mono);font-size:11px;cursor:pointer}
+.pager-btn:disabled{opacity:.4;cursor:not-allowed}
 ::-webkit-scrollbar{width:4px;height:4px}
 ::-webkit-scrollbar-track{background:transparent}
 ::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:2px}
@@ -296,7 +294,7 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
         </div>
         <div class="panel">
           <div class="panel-head"><span>// SYSTEM LOG</span></div>
-          <div class="term-wrap" id="termWrap"><div class="term-line"><span class="ts">[--:--:--]</span> <span class="info">SentinelNet initialized. Backend: 127.0.0.1:7860</span></div></div>
+          <div class="term-wrap" id="termWrap"><div class="term-line"><span class="ts">[--:--:--]</span> <span class="info">SentinelNet initialized.</span></div></div>
         </div>
       </div>
     </div>
@@ -338,7 +336,7 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
       </div>
       <div style="margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
         <div class="panel"><div class="panel-head"><span>// SUPPORTED FORMATS</span></div><div style="padding:16px;font-family:var(--mono);font-size:10px;color:var(--muted2);line-height:2.4">✓ NSL-KDD <span style="color:var(--accent)">with headers</span><br>✓ NSL-KDD <span style="color:var(--accent)">without headers</span><br>✓ KDDTrain+.txt / KDDTest+.txt<br>✓ 42 or 43 columns</div></div>
-        <div class="panel"><div class="panel-head"><span>// BATCH PROCESSING</span></div><div style="padding:16px;font-family:var(--mono);font-size:10px;color:var(--muted2);line-height:2.4">✓ <span style="color:var(--cyan)">100 rows/batch</span> — lightning fast<br>✓ Live feed while processing<br>✓ Auto-downloads CSV on finish<br>✓ Full report: 6 charts + risk gauge</div></div>
+        <div class="panel"><div class="panel-head"><span>// BATCH PROCESSING</span></div><div style="padding:16px;font-family:var(--mono);font-size:10px;color:var(--muted2);line-height:2.4">✓ <span style="color:var(--cyan)">100 rows/batch</span> — fast<br>✓ Live feed while processing<br>✓ Auto-downloads CSV on finish<br>✓ Full report: 6 charts + risk gauge</div></div>
         <div class="panel"><div class="panel-head"><span>// THREAT CLASSES</span></div><div style="padding:16px"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px"><span class="cls-badge cls-normal">normal</span><span style="font-family:var(--mono);font-size:10px;color:var(--muted2)">Clean traffic</span></div><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px"><span class="cls-badge cls-DoS">DoS</span><span style="font-family:var(--mono);font-size:10px;color:var(--muted2)">Denial of service</span></div><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px"><span class="cls-badge cls-Probe">Probe</span><span style="font-family:var(--mono);font-size:10px;color:var(--muted2)">Reconnaissance</span></div><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px"><span class="cls-badge cls-R2L">R2L</span><span style="font-family:var(--mono);font-size:10px;color:var(--muted2)">Remote to local</span></div><div style="display:flex;align-items:center;gap:8px"><span class="cls-badge cls-U2R">U2R</span><span style="font-family:var(--mono);font-size:10px;color:var(--muted2)">Privilege escalation</span></div></div></div>
       </div>
     </div>
@@ -392,7 +390,7 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
             <div class="sev-bar-row"><div class="sev-bar-lbl">Medium</div><div class="sev-bar-track"><div class="sev-bar-fill" style="width:0%;background:var(--cyan)" id="sevbar-Medium"></div></div><div class="sev-bar-cnt" id="sevbc-Medium" style="color:var(--cyan)">0</div></div>
             <div class="sev-bar-row"><div class="sev-bar-lbl">None</div><div class="sev-bar-track"><div class="sev-bar-fill" style="width:0%;background:var(--accent)" id="sevbar-None"></div></div><div class="sev-bar-cnt" id="sevbc-None" style="color:var(--accent)">0</div></div>
           </div>
-          <div class="mini-card"><div class="mini-card-title">Processing Speed</div><div style="font-family:var(--mono);font-size:24px;font-weight:700;color:var(--accent)" id="csvProcRate">—</div><div style="font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:4px">rows / second · batch size: 100</div></div>
+          <div class="mini-card"><div class="mini-card-title">Processing Speed</div><div style="font-family:var(--mono);font-size:24px;font-weight:700;color:var(--accent)" id="csvProcRate">—</div><div style="font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:4px">rows / second</div></div>
         </div>
       </div>
 
@@ -450,14 +448,20 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
           <div class="panel-head"><span>// ATTACK PATTERN CLUSTERS</span><span class="accent" id="clusterCount">0 clusters</span></div>
           <div class="cluster-grid" id="clusterGrid"></div>
         </div>
+        <!-- PAGINATED TABLE — replaces the old all-rows table -->
         <div class="panel">
-          <div class="panel-head"><span>// COMPLETE ANALYSIS — ALL ROWS</span><span id="reportRowCount" class="accent">0 rows</span></div>
-          <div class="threat-table-wrap">
+          <div class="panel-head"><span>// COMPLETE ANALYSIS</span><span id="reportRowCount" class="accent">0 rows</span></div>
+          <div style="overflow-x:auto">
             <table class="threat-table">
               <thead><tr><th>ROW</th><th>PROTOCOL</th><th>SERVICE</th><th>SRC BYTES</th><th>DST BYTES</th><th>CLASS</th><th>CONFIDENCE</th><th>SEVERITY</th><th>TRUE LABEL</th></tr></thead>
               <tbody id="reportTableBody"></tbody>
             </table>
           </div>
+          <div class="pager">
+            <button class="pager-btn" id="pgPrev" onclick="changePage(-1)" disabled>◀ PREV</button>
+            <span id="pgInfo" style="flex:1;text-align:center">Page 1 of 1</span>
+            <button class="pager-btn" id="pgNext" onclick="changePage(1)" disabled>NEXT ▶</button>
+          </div>
         </div>
       </div>
     </div>
@@ -465,56 +469,49 @@ header::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height
 </div>
 
 <script>
-// ════════════════════════════════════════════════
-// HARDCODED BACKEND — not exposed in UI
-// Change this to your deployed URL when ready
-// ════════════════════════════════════════════════
+// ── CONFIG ──────────────────────────────────────
 const BACKEND_URL = '';
 const BATCH_SIZE  = 100;
-
-// ════════════════════════════════════════════════
-// CONSTANTS
-// ════════════════════════════════════════════════
-const NSL_KDD_COLUMNS = ['duration','protocol_type','service','flag','src_bytes','dst_bytes','land','wrong_fragment','urgent','hot','num_failed_logins','logged_in','num_compromised','root_shell','su_attempted','num_root','num_file_creations','num_shells','num_access_files','num_outbound_cmds','is_host_login','is_guest_login','count','srv_count','serror_rate','srv_serror_rate','rerror_rate','srv_rerror_rate','same_srv_rate','diff_srv_rate','srv_diff_host_rate','dst_host_count','dst_host_srv_count','dst_host_same_srv_rate','dst_host_diff_srv_rate','dst_host_same_src_port_rate','dst_host_srv_diff_host_rate','dst_host_serror_rate','dst_host_srv_serror_rate','dst_host_rerror_rate','dst_host_srv_rerror_rate','label','difficulty_level'];
-const STRING_COLS = new Set(['protocol_type','service','flag','label']);
-const ATTACK_MAP = {normal:'normal',back:'DoS',land:'DoS',neptune:'DoS',pod:'DoS',smurf:'DoS',teardrop:'DoS',mailbomb:'DoS',apache2:'DoS',processtable:'DoS',udpstorm:'DoS',satan:'Probe',ipsweep:'Probe',nmap:'Probe',portsweep:'Probe',mscan:'Probe',saint:'Probe',guess_passwd:'R2L',ftp_write:'R2L',imap:'R2L',phf:'R2L',multihop:'R2L',warezmaster:'R2L',warezclient:'R2L',spy:'R2L',xlock:'R2L',xsnoop:'R2L',snmpguess:'R2L',snmpgetattack:'R2L',httptunnel:'R2L',sendmail:'R2L',named:'R2L',buffer_overflow:'U2R',loadmodule:'U2R',perl:'U2R',rootkit:'U2R',ps:'U2R',xterm:'U2R',sqlattack:'U2R'};
-const SEV_MAP   = {normal:'None',DoS:'Critical',Probe:'Medium',R2L:'High',U2R:'Critical'};
-const SEV_COLOR = {None:'#00e87a',Medium:'#00c8e8',High:'#ffaa00',Critical:'#ff3d5a'};
-const CLASS_COLOR = {normal:'#00e87a',DoS:'#ff3d5a',Probe:'#00c8e8',R2L:'#ffaa00',U2R:'#b06fff'};
-const PROTOCOLS = ['tcp','udp','icmp'];
-const SERVICES  = ['http','ftp','smtp','ssh','dns','telnet','pop3','imap4','finger','auth'];
-const LABEL_POOL = [...Array(60).fill('normal'),...Array(12).fill('neptune'),...Array(6).fill('smurf'),...Array(4).fill('back'),...Array(5).fill('ipsweep'),...Array(4).fill('satan'),...Array(3).fill('portsweep'),...Array(2).fill('guess_passwd'),...Array(1).fill('buffer_overflow'),...Array(1).fill('rootkit')];
-
-// ════════════════════════════════════════════════
-// LIVE MONITOR STATE
-// ════════════════════════════════════════════════
+const PAGE_SIZE   = 100; // rows per page in report table — KEY PERF FIX
+
+// ── CONSTANTS ───────────────────────────────────
+const NSL_KDD_COLUMNS=['duration','protocol_type','service','flag','src_bytes','dst_bytes','land','wrong_fragment','urgent','hot','num_failed_logins','logged_in','num_compromised','root_shell','su_attempted','num_root','num_file_creations','num_shells','num_access_files','num_outbound_cmds','is_host_login','is_guest_login','count','srv_count','serror_rate','srv_serror_rate','rerror_rate','srv_rerror_rate','same_srv_rate','diff_srv_rate','srv_diff_host_rate','dst_host_count','dst_host_srv_count','dst_host_same_srv_rate','dst_host_diff_srv_rate','dst_host_same_src_port_rate','dst_host_srv_diff_host_rate','dst_host_serror_rate','dst_host_srv_serror_rate','dst_host_rerror_rate','dst_host_srv_rerror_rate','label','difficulty_level'];
+const STRING_COLS=new Set(['protocol_type','service','flag','label']);
+const ATTACK_MAP={normal:'normal',back:'DoS',land:'DoS',neptune:'DoS',pod:'DoS',smurf:'DoS',teardrop:'DoS',mailbomb:'DoS',apache2:'DoS',processtable:'DoS',udpstorm:'DoS',satan:'Probe',ipsweep:'Probe',nmap:'Probe',portsweep:'Probe',mscan:'Probe',saint:'Probe',guess_passwd:'R2L',ftp_write:'R2L',imap:'R2L',phf:'R2L',multihop:'R2L',warezmaster:'R2L',warezclient:'R2L',spy:'R2L',xlock:'R2L',xsnoop:'R2L',snmpguess:'R2L',snmpgetattack:'R2L',httptunnel:'R2L',sendmail:'R2L',named:'R2L',buffer_overflow:'U2R',loadmodule:'U2R',perl:'U2R',rootkit:'U2R',ps:'U2R',xterm:'U2R',sqlattack:'U2R'};
+const SEV_MAP={normal:'None',DoS:'Critical',Probe:'Medium',R2L:'High',U2R:'Critical'};
+const SEV_COLOR={None:'#00e87a',Medium:'#00c8e8',High:'#ffaa00',Critical:'#ff3d5a'};
+const CLASS_COLOR={normal:'#00e87a',DoS:'#ff3d5a',Probe:'#00c8e8',R2L:'#ffaa00',U2R:'#b06fff'};
+const PROTOCOLS=['tcp','udp','icmp'];
+const SERVICES=['http','ftp','smtp','ssh','dns','telnet','pop3','imap4','finger','auth'];
+const LABEL_POOL=[...Array(60).fill('normal'),...Array(12).fill('neptune'),...Array(6).fill('smurf'),...Array(4).fill('back'),...Array(5).fill('ipsweep'),...Array(4).fill('satan'),...Array(3).fill('portsweep'),...Array(2).fill('guess_passwd'),...Array(1).fill('buffer_overflow'),...Array(1).fill('rootkit')];
+
+// ── LIVE STATE ──────────────────────────────────
 let monitorInterval=null,sessionInterval=null,sessionSeconds=0,isRunning=false,usingRealModel=false,packetId=0;
 const counts={normal:0,DoS:0,Probe:0,R2L:0,U2R:0};
 let totalPackets=0,totalIntrusions=0,confSum=0,peakClass=null;
 let confBuckets={90:0,80:0,70:0,low:0};
 let timelineBuckets=Array(60).fill(0),heatmapCells=Array(60).fill(null);
+// throttle timeline redraws
+let tlDirty=false;
 
-// ════════════════════════════════════════════════
-// CSV STATE
-// ════════════════════════════════════════════════
+// ── CSV STATE ───────────────────────────────────
 let csvRows=[],csvResults=[],csvIndex=0,csvRunning=false,csvStartTime=null;
 let csvCounts={normal:0,DoS:0,Probe:0,R2L:0,U2R:0};
 let csvSevCounts={Critical:0,High:0,Medium:0,None:0};
 let csvConfSum=0,csvIntrusionCount=0,csvConfHistory=[],csvUsingReal=false,csvFormatInfo='';
 let batchNum=0,totalBatches=0;
+// pagination
+let reportPage=0;
 
-// ════════════════════════════════════════════════
-// TAB
-// ════════════════════════════════════════════════
+// ── TAB ──────────────────────────────────────────
 function switchTab(name,btn){
   document.querySelectorAll('.tab-pane').forEach(p=>p.classList.remove('active'));
   document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
-  document.getElementById('tab-'+name).classList.add('active');btn.classList.add('active');
+  document.getElementById('tab-'+name).classList.add('active');
+  btn.classList.add('active');
 }
 
-// ════════════════════════════════════════════════
-// CSV PARSER — auto header detection
-// ════════════════════════════════════════════════
+// ── CSV PARSER ───────────────────────────────────
 function parseCSV(text){
   const lines=text.trim().split('\n').filter(l=>l.trim());
   if(!lines.length)return{rows:[],hasHeader:false,cols:0};
@@ -534,9 +531,7 @@ function parseCSV(text){
   return{rows,hasHeader:looksLikeHeader,cols:headers.length};
 }
 
-// ════════════════════════════════════════════════
-// LOCAL CLASSIFIER — uses real row features + label
-// ════════════════════════════════════════════════
+// ── LOCAL CLASSIFIER ─────────────────────────────
 function classifyLocal(row){
   const rawLabel=(row.label||'').toString().toLowerCase().trim().replace(/\.$/,'');
   if(rawLabel&&rawLabel!=='unknown'){
@@ -545,8 +540,9 @@ function classifyLocal(row){
   }
   const srcBytes=parseFloat(row.src_bytes)||0,flag=(row.flag||'').toUpperCase();
   const serrorRate=parseFloat(row.serror_rate)||0,rerrorRate=parseFloat(row.rerror_rate)||0;
-  const srvCount=parseFloat(row.srv_count)||0,count=parseFloat(row.count)||0;
+  const srvCount=parseFloat(row.srv_count)||0;
   const loggedIn=parseFloat(row.logged_in)||0,numRoot=parseFloat(row.num_root)||0,rootShell=parseFloat(row.root_shell)||0;
+  const count=parseFloat(row.count)||0;
   let cls='normal',conf=0.75+Math.random()*0.15;
   if(['S0','S1','S2','S3','REJ','RSTO','RSTR'].includes(flag)&&count>100){cls='DoS';conf=0.85+Math.random()*0.1;}
   else if(srcBytes>50000&&(parseFloat(row.duration)||0)<5){cls='DoS';conf=0.80+Math.random()*0.12;}
@@ -557,28 +553,25 @@ function classifyLocal(row){
   return{predicted_class:cls,severity:SEV_MAP[cls],confidence:+Math.min(0.99,conf).toFixed(4),is_intrusion:cls!=='normal'};
 }
 
-// ════════════════════════════════════════════════
-// API — sends batch to hardcoded backend
-// ════════════════════════════════════════════════
+// ── API ──────────────────────────────────────────
 async function predictBatch(rows){
   try{
-    const r=await fetch(BACKEND_URL+'/predict',{method:'POST',headers:{'Content-Type':'application/json','ngrok-skip-browser-warning':'true'},body:JSON.stringify({rows}),signal:AbortSignal.timeout(20000)});
-    if(!r.ok)return null;const d=await r.json();
+    const r=await fetch(BACKEND_URL+'/predict',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({rows}),signal:AbortSignal.timeout(20000)});
+    if(!r.ok)return null;
+    const d=await r.json();
     return(d.status==='ok'&&Array.isArray(d.results))?d.results:null;
   }catch{return null;}
 }
-
 async function predictSingle(row){
   try{
-    const r=await fetch(BACKEND_URL+'/predict',{method:'POST',headers:{'Content-Type':'application/json','ngrok-skip-browser-warning':'true'},body:JSON.stringify({rows:[row]}),signal:AbortSignal.timeout(5000)});
-    if(!r.ok)return null;const d=await r.json();
+    const r=await fetch(BACKEND_URL+'/predict',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({rows:[row]}),signal:AbortSignal.timeout(5000)});
+    if(!r.ok)return null;
+    const d=await r.json();
     return(d.status==='ok'&&d.results?.[0])?d.results[0]:null;
   }catch{return null;}
 }
 
-// ════════════════════════════════════════════════
-// FILE UPLOAD
-// ════════════════════════════════════════════════
+// ── FILE UPLOAD ──────────────────────────────────
 const uploadZone=document.getElementById('uploadZone');
 uploadZone.addEventListener('dragover',e=>{e.preventDefault();uploadZone.classList.add('drag-over');});
 uploadZone.addEventListener('dragleave',()=>uploadZone.classList.remove('drag-over'));
@@ -589,27 +582,26 @@ function processFileUpload(file){
   const reader=new FileReader();
   reader.onload=e=>{
     const{rows,hasHeader,cols}=parseCSV(e.target.result);
-    if(!rows.length){alert('Could not parse CSV. Check the format.');return;}
+    if(!rows.length){alert('Could not parse CSV.');return;}
     csvRows=rows;
     csvFormatInfo=hasHeader?`With headers · ${cols} columns`:`Headerless — auto-mapped · ${cols} columns`;
     totalBatches=Math.ceil(rows.length/BATCH_SIZE);
     const banner=document.getElementById('formatBanner');
     banner.style.display='flex';banner.className='format-banner ok';
-    banner.innerHTML=`✓ ${hasHeader?'Headers detected':'Headerless — NSL-KDD auto-mapped'} · ${cols} columns · ${rows.length.toLocaleString()} rows · ${totalBatches} batches of ${BATCH_SIZE}`;
+    banner.innerHTML=`✓ ${hasHeader?'Headers detected':'Headerless — NSL-KDD auto-mapped'} · ${cols} columns · ${rows.length.toLocaleString()} rows · ${totalBatches} batches`;
     document.getElementById('csvUploadSection').style.display='none';
     document.getElementById('csvProcessingArea').classList.add('visible');
     setText('csvFileName',file.name);
-    setText('csvFileMeta',`${rows.length.toLocaleString()} rows · ${(file.size/1024).toFixed(1)} KB · ${csvFormatInfo} · ${totalBatches} batches`);
+    setText('csvFileMeta',`${rows.length.toLocaleString()} rows · ${(file.size/1024).toFixed(1)} KB · ${csvFormatInfo}`);
     csvResults=[];csvIndex=0;csvConfSum=0;csvIntrusionCount=0;csvConfHistory=[];batchNum=0;
-    Object.keys(csvCounts).forEach(k=>csvCounts[k]=0);Object.keys(csvSevCounts).forEach(k=>csvSevCounts[k]=0);
+    Object.keys(csvCounts).forEach(k=>csvCounts[k]=0);
+    Object.keys(csvSevCounts).forEach(k=>csvSevCounts[k]=0);
     csvUsingReal=false;csvStartTime=null;
   };
   reader.readAsText(file);
 }
 
-// ════════════════════════════════════════════════
-// CSV ANALYSIS ENGINE — batch mode
-// ════════════════════════════════════════════════
+// ── CSV ENGINE ───────────────────────────────────
 async function startCsvAnalysis(){
   if(csvRunning||csvIndex>=csvRows.length)return;
   csvRunning=true;csvStartTime=csvStartTime||Date.now();
@@ -618,40 +610,45 @@ async function startCsvAnalysis(){
   document.getElementById('csvProgressBlock').style.display='block';
   document.getElementById('csvLiveGrid').style.display='grid';
   document.getElementById('reportSection').classList.remove('visible');
-  document.getElementById('liveDot').className='dot amber';setText('liveStatus','SCANNING');
+  document.getElementById('liveDot').className='dot amber';
+  setText('liveStatus','SCANNING');
   await processBatches();
 }
 
 async function processBatches(){
-  while(csvRunning && csvIndex<csvRows.length){
+  while(csvRunning&&csvIndex<csvRows.length){
     const bStart=csvIndex,bEnd=Math.min(csvIndex+BATCH_SIZE,csvRows.length);
     const batch=csvRows.slice(bStart,bEnd);
     batchNum++;
-    updateBatchChips(batchNum,totalBatches);
-    setText('csvCurrentRow',`Batch ${batchNum}/${totalBatches} — rows ${(bStart+1).toLocaleString()}–${bEnd.toLocaleString()} · Sending ${batch.length} rows to model…`);
+
+    // Only update chips every 5 batches — PERF FIX
+    if(batchNum===1||batchNum%5===0||batchNum===totalBatches)
+      updateBatchChips(batchNum,totalBatches);
+
+    setText('csvCurrentRow',`Batch ${batchNum}/${totalBatches} — rows ${(bStart+1).toLocaleString()}–${bEnd.toLocaleString()}`);
 
     let results=await predictBatch(batch);
     if(results){
       if(!csvUsingReal){csvUsingReal=true;setConnBadge('real');}
-    } else {
+    }else{
       if(csvUsingReal||batchNum===1){csvUsingReal=false;setConnBadge('local');}
       results=batch.map(r=>classifyLocal(r));
     }
 
-    // Accumulate results
     for(let i=0;i<batch.length;i++){
       const row=batch[i],res=results[i];
       const{predicted_class:cls,confidence:conf,severity:sev,is_intrusion:isI}=res;
-      const rowNum=bStart+i+1;
-      csvResults.push({rowNum,row,cls,conf,sev,isI});
-      csvConfHistory.push(conf);
+      csvResults.push({rowNum:bStart+i+1,row,cls,conf,sev,isI});
+      // Only store sampled conf history to save memory — PERF FIX
+      if(csvResults.length%5===0)csvConfHistory.push(conf);
       csvCounts[cls]=(csvCounts[cls]||0)+1;
       csvSevCounts[sev]=(csvSevCounts[sev]||0)+1;
-      csvConfSum+=conf;if(isI)csvIntrusionCount++;
+      csvConfSum+=conf;
+      if(isI)csvIntrusionCount++;
     }
 
-    // Show sample rows in feed (last 15 of this batch)
-    const feedSlice=batch.slice(-15);
+    // Show only last 5 rows in feed — PERF FIX (was 15)
+    const feedSlice=batch.slice(-5);
     feedSlice.forEach((row,i)=>{
       const ri=bEnd-feedSlice.length+i;
       addCsvFeedRow(ri+1,row,results[batch.length-feedSlice.length+i].predicted_class,results[batch.length-feedSlice.length+i].confidence,results[batch.length-feedSlice.length+i].severity);
@@ -669,12 +666,16 @@ async function processBatches(){
     setText('csvProgressEta',csvIndex<csvRows.length?`ETA: ${formatETA(remaining)}`:'Done!');
     setText('csvSpeedStat',Math.round(rate)+' rows/s');
     document.getElementById('csvProgressFill').style.width=pct+'%';
-    if(csvIntrusionCount/Math.max(csvIndex,1)>0.5)document.getElementById('csvProgressFill').classList.add('warning');
-    updateCsvSidebar(rate);
+    if(csvIntrusionCount/Math.max(csvIndex,1)>0.5)
+      document.getElementById('csvProgressFill').classList.add('warning');
+
+    // Only update sidebar every 3 batches — PERF FIX
+    if(batchNum%3===0||batchNum===totalBatches)updateCsvSidebar(rate);
     setText('csvAlertCount',csvIntrusionCount.toLocaleString()+' THREATS');
-    await new Promise(r=>setTimeout(r,30)); // yield to browser
+
+    await new Promise(r=>setTimeout(r,60)); // more breathing room — PERF FIX
   }
-  if(csvIndex>=csvRows.length) finishCsvAnalysis();
+  if(csvIndex>=csvRows.length)finishCsvAnalysis();
 }
 
 function setConnBadge(type){
@@ -701,7 +702,8 @@ function addCsvFeedRow(rowNum,row,cls,conf,sev){
   if(cls!=='normal')tr.style.background='rgba(255,61,90,0.025)';
   tr.innerHTML=`<td style="color:var(--muted)">${rowNum}</td><td style="color:var(--cyan)">${row.protocol_type||'—'}</td><td>${row.service||'—'}</td><td>${(row.src_bytes||0).toLocaleString()}</td><td><span class="cls-badge cls-${cls}">${cls}</span></td><td style="color:${conf>0.9?'var(--accent)':conf>0.8?'var(--cyan)':'var(--amber)'}">${(conf*100).toFixed(1)}%</td><td style="color:${SEV_COLOR[sev]}">● ${sev}</td>`;
   tbody.insertBefore(tr,tbody.firstChild);
-  while(tbody.children.length>500)tbody.removeChild(tbody.lastChild);
+  // Cap at 100 DOM rows — PERF FIX (was 500)
+  while(tbody.children.length>100)tbody.removeChild(tbody.lastChild);
 }
 
 function updateCsvSidebar(rate){
@@ -717,22 +719,24 @@ function updateCsvSidebar(rate){
 
 function stopCsvAnalysis(){
   csvRunning=false;
-  document.getElementById('csvStartBtn').disabled=false;document.getElementById('csvStopBtn').disabled=true;
-  document.getElementById('liveDot').className='dot red';setText('liveStatus','PAUSED');
+  document.getElementById('csvStartBtn').disabled=false;
+  document.getElementById('csvStopBtn').disabled=true;
+  document.getElementById('liveDot').className='dot red';
+  setText('liveStatus','PAUSED');
 }
 
 function finishCsvAnalysis(){
   csvRunning=false;
-  document.getElementById('csvStartBtn').disabled=true;document.getElementById('csvStopBtn').disabled=true;
-  document.getElementById('liveDot').className='dot green';setText('liveStatus','DONE');
+  document.getElementById('csvStartBtn').disabled=true;
+  document.getElementById('csvStopBtn').disabled=true;
+  document.getElementById('liveDot').className='dot green';
+  setText('liveStatus','DONE');
   setText('csvProgressEta','Done!');
-  setText('csvCurrentRow',`✓ All ${csvRows.length.toLocaleString()} rows processed in ${totalBatches} batches. Building report…`);
-  setTimeout(()=>{exportAnnotatedCSV();buildReport();},500);
+  setText('csvCurrentRow',`✓ All ${csvRows.length.toLocaleString()} rows processed. Building report…`);
+  setTimeout(()=>{exportAnnotatedCSV();buildReport();},300);
 }
 
-// ════════════════════════════════════════════════
-// REPORT BUILDER
-// ════════════════════════════════════════════════
+// ── REPORT BUILDER ───────────────────────────────
 function buildReport(){
   document.getElementById('reportSection').classList.add('visible');
   const elapsed=(Date.now()-csvStartTime)/1000;
@@ -740,12 +744,12 @@ function buildReport(){
   const total=csvResults.length,threats=csvIntrusionCount;
   const avgConf=(csvConfSum/total*100).toFixed(1)+'%';
   const rate=(threats/total*100).toFixed(1)+'%';
-  // Risk score: weighted formula
   const riskScore=Math.min(100,Math.round(((csvCounts.DoS||0)*0.4+(csvCounts.U2R||0)*0.35+(csvCounts.R2L||0)*0.15+(csvCounts.Probe||0)*0.1)/Math.max(total,1)*100*6));
 
-  setText('bannerSub',`${total.toLocaleString()} rows in ${totalBatches} batches · ${formatETA(elapsed)} · ${threats.toLocaleString()} threats · Annotated CSV auto-downloaded`);
+  setText('bannerSub',`${total.toLocaleString()} rows · ${formatETA(elapsed)} · ${threats.toLocaleString()} threats detected`);
   setText('rmFile',fileName);setText('rmRows',total.toLocaleString());setText('rmDate',new Date().toLocaleString());
-  setText('rmModel',csvUsingReal?'Real Random Forest':'Local Simulation');setText('rmDuration',formatETA(elapsed));setText('rmFormat',csvFormatInfo);
+  setText('rmModel',csvUsingReal?'Real Random Forest':'Local Simulation');
+  setText('rmDuration',formatETA(elapsed));setText('rmFormat',csvFormatInfo);
   setText('reportSubtitle',`Generated ${new Date().toUTCString()}`);
   setText('rs-total',total.toLocaleString());setText('rs-threats',threats.toLocaleString());
   setText('rs-rate',rate);setText('rs-conf',avgConf);setText('rs-risk',riskScore+'/100');
@@ -754,13 +758,54 @@ function buildReport(){
   const smx=Math.max(...sevs.map(s=>csvSevCounts[s]||0),1);
   sevs.forEach(s=>{setWidth('rsevbar-'+s,(csvSevCounts[s]||0)/smx*100);setText('rsevbc-'+s,(csvSevCounts[s]||0).toLocaleString());});
 
-  drawBarChart();drawConfWave();drawIntensity();drawProto();drawServices();drawGauge(riskScore);buildClusters();buildTable();
+  // Draw charts using requestAnimationFrame — PERF FIX
+  requestAnimationFrame(()=>{
+    drawBarChart();drawConfWave();drawIntensity();
+    drawProto();drawServices();drawGauge(riskScore);
+    buildClusters();
+    reportPage=0;renderReportPage(); // paginated table — PERF FIX
+  });
+
   setTimeout(()=>document.getElementById('reportSection').scrollIntoView({behavior:'smooth',block:'start'}),300);
 }
 
+// ── PAGINATED TABLE — renders only PAGE_SIZE rows at a time ─────────────────
+function renderReportPage(){
+  const tbody=document.getElementById('reportTableBody');
+  const total=csvResults.length;
+  const totalPages=Math.ceil(total/PAGE_SIZE);
+  const start=reportPage*PAGE_SIZE;
+  const end=Math.min(start+PAGE_SIZE,total);
+
+  // Build fragment — only PAGE_SIZE rows, not all rows — KEY PERF FIX
+  const frag=document.createDocumentFragment();
+  for(let i=start;i<end;i++){
+    const{rowNum,row,cls,conf,sev,isI}=csvResults[i];
+    const tr=document.createElement('tr');
+    if(isI)tr.className='row-intrusion';
+    tr.innerHTML=`<td style="color:var(--muted)">${rowNum}</td><td style="color:var(--cyan)">${row.protocol_type||'—'}</td><td>${row.service||'—'}</td><td>${(row.src_bytes||0).toLocaleString()}</td><td>${(row.dst_bytes||0).toLocaleString()}</td><td><span class="cls-badge cls-${cls}">${cls}</span></td><td style="color:${conf>0.9?'var(--accent)':conf>0.8?'var(--cyan)':'var(--amber)'}">${(conf*100).toFixed(1)}%</td><td style="color:${SEV_COLOR[sev]}">● ${sev}</td><td style="color:var(--muted);font-size:10px">${row.label||'—'}</td>`;
+    frag.appendChild(tr);
+  }
+  tbody.innerHTML='';
+  tbody.appendChild(frag);
+
+  setText('reportRowCount',`${total.toLocaleString()} rows`);
+  setText('pgInfo',`Page ${reportPage+1} of ${totalPages} · rows ${start+1}–${end}`);
+  document.getElementById('pgPrev').disabled=reportPage===0;
+  document.getElementById('pgNext').disabled=reportPage>=totalPages-1;
+}
+
+function changePage(dir){
+  reportPage+=dir;
+  renderReportPage();
+  document.getElementById('reportSection').scrollIntoView({behavior:'smooth',block:'start'});
+}
+
+// ── CHARTS ───────────────────────────────────────
 function drawBarChart(){
   const c=document.getElementById('reportBarCanvas'),ctx=c.getContext('2d');
-  const W=c.offsetWidth||300,H=160;c.width=W*devicePixelRatio;c.height=H*devicePixelRatio;ctx.scale(devicePixelRatio,devicePixelRatio);ctx.clearRect(0,0,W,H);
+  const W=c.offsetWidth||300,H=160;c.width=W*devicePixelRatio;c.height=H*devicePixelRatio;
+  ctx.scale(devicePixelRatio,devicePixelRatio);ctx.clearRect(0,0,W,H);
   const classes=['normal','DoS','Probe','R2L','U2R'],colors=['#00e87a','#ff3d5a','#00c8e8','#ffaa00','#b06fff'];
   const vals=classes.map(c=>csvCounts[c]||0),mx=Math.max(...vals,1);
   const bw=(W-40)/classes.length,pad=bw*0.18;
@@ -768,32 +813,38 @@ function drawBarChart(){
     const x=20+i*bw+pad,bW=bw-pad*2,bH=(vals[i]/mx)*(H-30),y=H-10-bH;
     const g=ctx.createLinearGradient(0,y,0,H-10);g.addColorStop(0,colors[i]);g.addColorStop(1,colors[i]+'33');
     ctx.fillStyle=g;ctx.beginPath();ctx.roundRect(x,y,bW,Math.max(bH,1),4);ctx.fill();
-    ctx.fillStyle='rgba(90,122,153,.9)';ctx.font='9px IBM Plex Mono';ctx.textAlign='center';ctx.fillText(cls,x+bW/2,H-1);
+    ctx.fillStyle='rgba(90,122,153,.9)';ctx.font='9px IBM Plex Mono';ctx.textAlign='center';
+    ctx.fillText(cls,x+bW/2,H-1);
     if(vals[i]>0){ctx.fillStyle=colors[i];ctx.fillText(vals[i].toLocaleString(),x+bW/2,y-4);}
   });
 }
 
 function drawConfWave(){
   const c=document.getElementById('reportConfCanvas'),ctx=c.getContext('2d');
-  const W=c.offsetWidth||300,H=160;c.width=W*devicePixelRatio;c.height=H*devicePixelRatio;ctx.scale(devicePixelRatio,devicePixelRatio);ctx.clearRect(0,0,W,H);
+  const W=c.offsetWidth||300,H=160;c.width=W*devicePixelRatio;c.height=H*devicePixelRatio;
+  ctx.scale(devicePixelRatio,devicePixelRatio);ctx.clearRect(0,0,W,H);
   const data=csvConfHistory;if(data.length<2)return;
-  const step=Math.max(1,Math.ceil(data.length/300));
-  const sampled=data.filter((_,i)=>i%step===0);
-  const xStep=(W-20)/Math.max(sampled.length-1,1),mn=0.5,mx=1;
+  const xStep=(W-20)/Math.max(data.length-1,1),mn=0.5,mx=1;
   ctx.strokeStyle='rgba(0,200,120,.06)';ctx.lineWidth=1;
   [.25,.5,.75,1].forEach(f=>{const y=10+(1-f)*(H-20);ctx.beginPath();ctx.moveTo(10,y);ctx.lineTo(W-10,y);ctx.stroke();});
-  ctx.beginPath();sampled.forEach((v,i)=>{const x=10+i*xStep,y=10+(1-(v-mn)/(mx-mn))*(H-20);i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});
-  ctx.lineTo(10+(sampled.length-1)*xStep,H-10);ctx.lineTo(10,H-10);ctx.closePath();
-  const g=ctx.createLinearGradient(0,0,0,H);g.addColorStop(0,'rgba(0,200,232,.15)');g.addColorStop(1,'rgba(0,200,232,.01)');ctx.fillStyle=g;ctx.fill();
-  ctx.beginPath();ctx.strokeStyle='#00c8e8';ctx.lineWidth=1.5;sampled.forEach((v,i)=>{const x=10+i*xStep,y=10+(1-(v-mn)/(mx-mn))*(H-20);i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});ctx.stroke();
+  ctx.beginPath();data.forEach((v,i)=>{const x=10+i*xStep,y=10+(1-(v-mn)/(mx-mn))*(H-20);i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});
+  ctx.lineTo(10+(data.length-1)*xStep,H-10);ctx.lineTo(10,H-10);ctx.closePath();
+  const g=ctx.createLinearGradient(0,0,0,H);g.addColorStop(0,'rgba(0,200,232,.15)');g.addColorStop(1,'rgba(0,200,232,.01)');
+  ctx.fillStyle=g;ctx.fill();
+  ctx.beginPath();ctx.strokeStyle='#00c8e8';ctx.lineWidth=1.5;
+  data.forEach((v,i)=>{const x=10+i*xStep,y=10+(1-(v-mn)/(mx-mn))*(H-20);i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});
+  ctx.stroke();
   const avg=csvConfSum/csvResults.length,avgY=10+(1-(avg-mn)/(mx-mn))*(H-20);
-  ctx.beginPath();ctx.setLineDash([4,3]);ctx.strokeStyle='rgba(0,232,122,.6)';ctx.lineWidth=1;ctx.moveTo(10,avgY);ctx.lineTo(W-10,avgY);ctx.stroke();ctx.setLineDash([]);
-  ctx.fillStyle='rgba(0,232,122,.8)';ctx.font='9px IBM Plex Mono';ctx.textAlign='left';ctx.fillText(`avg ${(avg*100).toFixed(1)}%`,14,avgY-5);
+  ctx.beginPath();ctx.setLineDash([4,3]);ctx.strokeStyle='rgba(0,232,122,.6)';ctx.lineWidth=1;
+  ctx.moveTo(10,avgY);ctx.lineTo(W-10,avgY);ctx.stroke();ctx.setLineDash([]);
+  ctx.fillStyle='rgba(0,232,122,.8)';ctx.font='9px IBM Plex Mono';ctx.textAlign='left';
+  ctx.fillText(`avg ${(avg*100).toFixed(1)}%`,14,avgY-5);
 }
 
 function drawIntensity(){
   const c=document.getElementById('reportIntensityCanvas'),ctx=c.getContext('2d');
-  const W=c.offsetWidth||300,H=160;c.width=W*devicePixelRatio;c.height=H*devicePixelRatio;ctx.scale(devicePixelRatio,devicePixelRatio);ctx.clearRect(0,0,W,H);
+  const W=c.offsetWidth||300,H=160;c.width=W*devicePixelRatio;c.height=H*devicePixelRatio;
+  ctx.scale(devicePixelRatio,devicePixelRatio);ctx.clearRect(0,0,W,H);
   const wSize=Math.max(5,Math.floor(csvResults.length/60));
   const windows=[];
   for(let i=0;i<csvResults.length;i+=wSize){const sl=csvResults.slice(i,i+wSize);windows.push(sl.filter(r=>r.isI).length/sl.length);}
@@ -803,9 +854,10 @@ function drawIntensity(){
   [.25,.5,.75,1].forEach(f=>{const y=10+(1-f)*(H-20);ctx.beginPath();ctx.moveTo(10,y);ctx.lineTo(W-10,y);ctx.stroke();});
   ctx.beginPath();windows.forEach((v,i)=>{const x=10+i*xStep,y=10+(1-v/mx)*(H-20);i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});
   ctx.lineTo(10+(windows.length-1)*xStep,H-10);ctx.lineTo(10,H-10);ctx.closePath();
-  const g=ctx.createLinearGradient(0,0,0,H);g.addColorStop(0,'rgba(255,61,90,.28)');g.addColorStop(1,'rgba(255,61,90,.02)');ctx.fillStyle=g;ctx.fill();
-  ctx.beginPath();ctx.strokeStyle='#ff3d5a';ctx.lineWidth=2;windows.forEach((v,i)=>{const x=10+i*xStep,y=10+(1-v/mx)*(H-20);i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});ctx.stroke();
-  ctx.fillStyle='rgba(255,61,90,.7)';ctx.font='9px IBM Plex Mono';ctx.textAlign='left';ctx.fillText('threat density over dataset',14,H-3);
+  const g=ctx.createLinearGradient(0,0,0,H);g.addColorStop(0,'rgba(255,61,90,.28)');g.addColorStop(1,'rgba(255,61,90,.02)');
+  ctx.fillStyle=g;ctx.fill();
+  ctx.beginPath();ctx.strokeStyle='#ff3d5a';ctx.lineWidth=2;
+  windows.forEach((v,i)=>{const x=10+i*xStep,y=10+(1-v/mx)*(H-20);i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});ctx.stroke();
 }
 
 function drawProto(){
@@ -814,13 +866,14 @@ function drawProto(){
   csvResults.forEach(({row,isI})=>{const p=row.protocol_type||'unknown';pc[p]=(pc[p]||0)+1;if(isI)pt[p]=(pt[p]||0)+1;});
   const sorted=Object.entries(pc).sort((a,b)=>b[1]-a[1]);
   const mx=Math.max(...sorted.map(([,v])=>v),1);
+  const frag=document.createDocumentFragment();
   sorted.forEach(([proto,cnt])=>{
     const tc=pt[proto]||0,tp=cnt>0?Math.round(tc/cnt*100):0;
     const div=document.createElement('div');div.className='proto-row';
     div.innerHTML=`<div class="proto-lbl">${proto}</div><div class="proto-track"><div class="proto-fill" style="width:${cnt/mx*100}%;background:${tc>0?'var(--red)':'var(--accent)'}"></div></div><div class="proto-cnt">${cnt.toLocaleString()} <span style="color:${tc>0?'var(--red)':'var(--muted)'}">${tp}% threat</span></div>`;
-    el.appendChild(div);
+    frag.appendChild(div);
   });
-  if(!sorted.length)el.innerHTML='<div style="color:var(--muted);font-family:var(--mono);font-size:11px">No data</div>';
+  el.appendChild(frag);
 }
 
 function drawServices(){
@@ -829,23 +882,26 @@ function drawServices(){
   csvResults.forEach(({row,isI})=>{const s=row.service||'unknown';sc[s]=(sc[s]||0)+1;if(isI)st[s]=(st[s]||0)+1;});
   const sorted=Object.entries(sc).sort((a,b)=>b[1]-a[1]).slice(0,8);
   const mx=Math.max(...sorted.map(([,v])=>v),1);
+  const frag=document.createDocumentFragment();
   sorted.forEach(([svc,cnt])=>{
     const hot=(st[svc]||0)>cnt*0.3;
     const div=document.createElement('div');div.className='svc-row';
-    div.innerHTML=`<span class="svc-name" style="color:${hot?'var(--red)':'var(--cyan)'}">${svc}</span><span style="flex:1;margin:0 8px;background:var(--surface);border-radius:2px;height:4px;display:block;overflow:hidden"><span style="display:block;height:100%;width:${Math.round(cnt/mx*100)}%;background:${hot?'var(--red)':'var(--cyan)'};border-radius:2px;transition:width .8s"></span></span><span style="font-family:var(--mono);font-size:10px;color:var(--muted2)">${cnt.toLocaleString()}</span>`;
-    el.appendChild(div);
+    div.innerHTML=`<span class="svc-name" style="color:${hot?'var(--red)':'var(--cyan)'}">${svc}</span><span style="flex:1;margin:0 8px;background:var(--surface);border-radius:2px;height:4px;display:block;overflow:hidden"><span style="display:block;height:100%;width:${Math.round(cnt/mx*100)}%;background:${hot?'var(--red)':'var(--cyan)'};border-radius:2px"></span></span><span style="font-family:var(--mono);font-size:10px;color:var(--muted2)">${cnt.toLocaleString()}</span>`;
+    frag.appendChild(div);
   });
+  el.appendChild(frag);
 }
 
 function drawGauge(score){
   const c=document.getElementById('riskGaugeCanvas'),ctx=c.getContext('2d');
-  const W=160,H=90;c.width=W*devicePixelRatio;c.height=H*devicePixelRatio;ctx.scale(devicePixelRatio,devicePixelRatio);ctx.clearRect(0,0,W,H);
+  const W=160,H=90;c.width=W*devicePixelRatio;c.height=H*devicePixelRatio;
+  ctx.scale(devicePixelRatio,devicePixelRatio);ctx.clearRect(0,0,W,H);
   const cx=W/2,cy=H-8,r=66;
   ctx.beginPath();ctx.arc(cx,cy,r,Math.PI,2*Math.PI);ctx.strokeStyle='rgba(255,255,255,.05)';ctx.lineWidth=14;ctx.lineCap='round';ctx.stroke();
   [[0,.33,'#00e87a'],[.33,.66,'#ffaa00'],[.66,1,'#ff3d5a']].forEach(([from,to,col])=>{ctx.beginPath();ctx.arc(cx,cy,r,Math.PI+from*Math.PI,Math.PI+to*Math.PI);ctx.strokeStyle=col+'55';ctx.lineWidth=14;ctx.stroke();});
-  const scoreColor=score<33?'#00e87a':score<66?'#ffaa00':'#ff3d5a';
-  ctx.beginPath();ctx.arc(cx,cy,r,Math.PI,Math.PI+(score/100)*Math.PI);ctx.strokeStyle=scoreColor;ctx.lineWidth=14;ctx.lineCap='round';ctx.stroke();
-  ctx.fillStyle=scoreColor;ctx.font='bold 22px IBM Plex Mono';ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText(score,cx,cy-16);
+  const sc=score<33?'#00e87a':score<66?'#ffaa00':'#ff3d5a';
+  ctx.beginPath();ctx.arc(cx,cy,r,Math.PI,Math.PI+(score/100)*Math.PI);ctx.strokeStyle=sc;ctx.lineWidth=14;ctx.lineCap='round';ctx.stroke();
+  ctx.fillStyle=sc;ctx.font='bold 22px IBM Plex Mono';ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText(score,cx,cy-16);
   ctx.fillStyle='rgba(90,122,153,.8)';ctx.font='9px IBM Plex Mono';ctx.fillText('/100',cx,cy-2);
   const lbl=score<20?'LOW':score<40?'MODERATE':score<60?'ELEVATED':score<80?'HIGH':'CRITICAL';
   setText('riskLabel',`${lbl} RISK · Score ${score}/100`);
@@ -853,42 +909,35 @@ function drawGauge(score){
 
 function buildClusters(){
   const grid=document.getElementById('clusterGrid');grid.innerHTML='';let cnt=0;
+  const frag=document.createDocumentFragment();
   ['DoS','Probe','R2L','U2R','normal'].forEach(cls=>{
     const c=csvCounts[cls]||0;if(!c)return;cnt++;
     const col=CLASS_COLOR[cls],res=csvResults.filter(r=>r.cls===cls);
     const avgConf=res.reduce((s,r)=>s+r.conf,0)/c;
     const div=document.createElement('div');div.className=`cluster-card ${cls}`;
     div.innerHTML=`<div class="cluster-title" style="color:${col}">${cls} Traffic</div><div class="cluster-count" style="color:${col}">${c.toLocaleString()}</div><div class="cluster-sub">Severity: ${SEV_MAP[cls]}<br>Avg confidence: ${(avgConf*100).toFixed(1)}%<br>${(c/csvResults.length*100).toFixed(1)}% of dataset</div>`;
-    grid.appendChild(div);
+    frag.appendChild(div);
   });
-  if(!cnt)grid.innerHTML='<div style="padding:20px;font-family:var(--mono);font-size:11px;color:var(--accent);grid-column:span 4">✓ No attack clusters detected — clean dataset</div>';
+  grid.appendChild(frag);
+  if(!cnt)grid.innerHTML='<div style="padding:20px;font-family:var(--mono);font-size:11px;color:var(--accent);grid-column:span 4">✓ No attack clusters — clean dataset</div>';
   setText('clusterCount',cnt+' clusters');
 }
 
-function buildTable(){
-  const tbody=document.getElementById('reportTableBody');tbody.innerHTML='';
-  setText('reportRowCount',csvResults.length.toLocaleString()+' rows');
-  csvResults.forEach(({rowNum,row,cls,conf,sev,isI})=>{
-    const tr=document.createElement('tr');if(isI)tr.className='row-intrusion';
-    tr.innerHTML=`<td style="color:var(--muted)">${rowNum}</td><td style="color:var(--cyan)">${row.protocol_type||'—'}</td><td>${row.service||'—'}</td><td>${(row.src_bytes||0).toLocaleString()}</td><td>${(row.dst_bytes||0).toLocaleString()}</td><td><span class="cls-badge cls-${cls}">${cls}</span></td><td style="color:${conf>0.9?'var(--accent)':conf>0.8?'var(--cyan)':'var(--amber)'}">${(conf*100).toFixed(1)}%</td><td style="color:${SEV_COLOR[sev]}">● ${sev}</td><td style="color:var(--muted);font-size:10px">${row.label||'—'}</td>`;
-    tbody.appendChild(tr);
-  });
-}
-
-// ════════════════════════════════════════════════
-// EXPORTS
-// ════════════════════════════════════════════════
+// ── EXPORTS ──────────────────────────────────────
 function exportAnnotatedCSV(){
   if(!csvResults.length)return;
   const headers=Object.keys(csvResults[0].row).concat(['predicted_class','severity','confidence','is_intrusion']);
   const lines=[headers.join(',')];
-  csvResults.forEach(({row,cls,sev,conf,isI})=>{const vals=Object.values(row).map(v=>typeof v==='string'&&v.includes(',')?`"${v}"`:v);vals.push(cls,sev,conf,isI?1:0);lines.push(vals.join(','));});
+  csvResults.forEach(({row,cls,sev,conf,isI})=>{
+    const vals=Object.values(row).map(v=>typeof v==='string'&&v.includes(',')?`"${v}"`:v);
+    vals.push(cls,sev,conf,isI?1:0);lines.push(vals.join(','));
+  });
   downloadFile('sentinelnet_annotated.csv',lines.join('\n'),'text/csv');
 }
 
 function exportJSON(){
   if(!csvResults.length){alert('No results.');return;}
-  const data={meta:{file:document.getElementById('csvFileName').textContent,date:new Date().toISOString(),total:csvResults.length,threats:csvIntrusionCount,threatRate:(csvIntrusionCount/csvResults.length*100).toFixed(1)+'%',model:csvUsingReal?'Real RF':'Local Sim',batchSize:BATCH_SIZE,backend:BACKEND_URL},distribution:csvCounts,severity:csvSevCounts,avgConf:(csvConfSum/csvResults.length*100).toFixed(2)+'%',results:csvResults.map(({rowNum,cls,conf,sev,isI})=>({rowNum,cls,conf,sev,isI}))};
+  const data={meta:{file:document.getElementById('csvFileName').textContent,date:new Date().toISOString(),total:csvResults.length,threats:csvIntrusionCount,threatRate:(csvIntrusionCount/csvResults.length*100).toFixed(1)+'%',model:csvUsingReal?'Real RF':'Local Sim',batchSize:BATCH_SIZE},distribution:csvCounts,severity:csvSevCounts,avgConf:(csvConfSum/csvResults.length*100).toFixed(2)+'%',results:csvResults.map(({rowNum,cls,conf,sev,isI})=>({rowNum,cls,conf,sev,isI}))};
   downloadFile('sentinelnet_results.json',JSON.stringify(data,null,2),'application/json');
 }
 
@@ -904,72 +953,26 @@ function exportPDFReport(){
   const riskLbl=riskScore<20?'LOW':riskScore<40?'MODERATE':riskScore<60?'ELEVATED':riskScore<80?'HIGH':'CRITICAL';
   const colors={normal:'#00e87a',DoS:'#ff3d5a',Probe:'#00c8e8',R2L:'#ffaa00',U2R:'#b06fff'};
   const sevColors={None:'#00e87a',Medium:'#00c8e8',High:'#ffaa00',Critical:'#ff3d5a'};
-
   const distRows=['normal','DoS','Probe','R2L','U2R'].map(c=>`<tr><td style="color:${colors[c]}">${c}</td><td>${(csvCounts[c]||0).toLocaleString()}</td><td>${total>0?((csvCounts[c]||0)/total*100).toFixed(1):'0'}%</td><td style="color:${sevColors[SEV_MAP[c]]}">${SEV_MAP[c]}</td></tr>`).join('');
-
   const pc={};csvResults.forEach(({row})=>{const p=row.protocol_type||'unknown';pc[p]=(pc[p]||0)+1;});
   const protoRows=Object.entries(pc).sort((a,b)=>b[1]-a[1]).map(([p,c])=>`<tr><td>${p}</td><td>${c.toLocaleString()}</td><td>${(c/total*100).toFixed(1)}%</td></tr>`).join('');
-
   const topThreats=csvResults.filter(r=>r.isI).slice(0,100);
   const threatRows=topThreats.map(({rowNum,row,cls,conf,sev})=>`<tr><td>${rowNum}</td><td>${row.protocol_type||'—'}</td><td>${row.service||'—'}</td><td>${(row.src_bytes||0).toLocaleString()}</td><td style="color:${colors[cls]};font-weight:bold">${cls}</td><td>${(conf*100).toFixed(1)}%</td><td style="color:${sevColors[sev]}">${sev}</td></tr>`).join('');
-
   const html=`<!DOCTYPE html><html><head><meta charset="UTF-8"/><title>SentinelNet Report</title>
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap" rel="stylesheet">
-<style>
-*{box-sizing:border-box;margin:0;padding:0}
-body{font-family:'IBM Plex Mono',monospace;background:#04080d;color:#d8eeff;padding:40px;font-size:11px}
-h1{color:#00e87a;font-size:22px;border-bottom:2px solid #00e87a;padding-bottom:12px;margin-bottom:8px}
-h2{color:#00c8e8;font-size:13px;margin:28px 0 12px;letter-spacing:2px;text-transform:uppercase}
-.meta{color:#4a6a88;font-size:10px;margin-bottom:32px;line-height:2.2}
-.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:32px}
-.stat{background:#080e16;border:1px solid rgba(0,210,130,0.15);border-radius:10px;padding:16px;text-align:center}
-.stat-val{font-size:24px;font-weight:700;margin-bottom:5px}
-.stat-lbl{font-size:8px;color:#4a6a88;letter-spacing:2px;text-transform:uppercase}
-table{width:100%;border-collapse:collapse;margin-bottom:28px}
-th{background:#0d1520;padding:9px 12px;text-align:left;color:#4a6a88;font-size:8px;letter-spacing:1.5px;border-bottom:1px solid rgba(0,210,130,0.2)}
-td{padding:7px 12px;border-top:1px solid rgba(0,210,130,0.06)}
-.risk-box{background:#0d1520;border:1px solid rgba(0,210,130,0.2);border-radius:12px;padding:20px;text-align:center;margin-bottom:28px}
-.risk-num{font-size:40px;font-weight:700;color:${riskScore<33?'#00e87a':riskScore<66?'#ffaa00':'#ff3d5a'}}
-.footer{margin-top:40px;padding-top:14px;border-top:1px solid rgba(0,210,130,0.12);color:#4a6a88;font-size:9px;text-align:center}
-@media print{body{background:#04080d!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
-</style></head><body>
+<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'IBM Plex Mono',monospace;background:#04080d;color:#d8eeff;padding:40px;font-size:11px}h1{color:#00e87a;font-size:22px;border-bottom:2px solid #00e87a;padding-bottom:12px;margin-bottom:8px}h2{color:#00c8e8;font-size:13px;margin:28px 0 12px;letter-spacing:2px;text-transform:uppercase}.meta{color:#4a6a88;font-size:10px;margin-bottom:32px;line-height:2.2}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:32px}.stat{background:#080e16;border:1px solid rgba(0,210,130,0.15);border-radius:10px;padding:16px;text-align:center}.stat-val{font-size:24px;font-weight:700;margin-bottom:5px}.stat-lbl{font-size:8px;color:#4a6a88;letter-spacing:2px;text-transform:uppercase}table{width:100%;border-collapse:collapse;margin-bottom:28px}th{background:#0d1520;padding:9px 12px;text-align:left;color:#4a6a88;font-size:8px;letter-spacing:1.5px;border-bottom:1px solid rgba(0,210,130,0.2)}td{padding:7px 12px;border-top:1px solid rgba(0,210,130,0.06)}.risk-box{background:#0d1520;border:1px solid rgba(0,210,130,0.2);border-radius:12px;padding:20px;text-align:center;margin-bottom:28px}.risk-num{font-size:40px;font-weight:700;color:${riskScore<33?'#00e87a':riskScore<66?'#ffaa00':'#ff3d5a'}}.footer{margin-top:40px;padding-top:14px;border-top:1px solid rgba(0,210,130,0.12);color:#4a6a88;font-size:9px;text-align:center}@media print{body{background:#04080d!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}</style></head><body>
 <h1>🛡 SentinelNet — Threat Analysis Report</h1>
-<div class="meta">
-  File: <strong style="color:#d8eeff">${fileName}</strong> &nbsp;|&nbsp;
-  Date: ${dateStr} &nbsp;|&nbsp;
-  Model: ${modelSrc} &nbsp;|&nbsp;
-  Duration: ${formatETA(elapsed)} &nbsp;|&nbsp;
-  Batches: ${totalBatches} × ${BATCH_SIZE} rows &nbsp;|&nbsp;
-  Format: ${csvFormatInfo}
-</div>
-<div class="grid">
-  <div class="stat"><div class="stat-val" style="color:#00c8e8">${total.toLocaleString()}</div><div class="stat-lbl">Total Rows</div></div>
-  <div class="stat"><div class="stat-val" style="color:#ff3d5a">${threats.toLocaleString()}</div><div class="stat-lbl">Threats Found</div></div>
-  <div class="stat"><div class="stat-val" style="color:#ffaa00">${rate}%</div><div class="stat-lbl">Threat Rate</div></div>
-  <div class="stat"><div class="stat-val" style="color:#00e87a">${avgConf}%</div><div class="stat-lbl">Avg Confidence</div></div>
-  <div class="stat"><div class="stat-val" style="color:${riskScore<33?'#00e87a':riskScore<66?'#ffaa00':'#ff3d5a'}">${riskScore}/100</div><div class="stat-lbl">Risk Score</div></div>
-</div>
-<div class="risk-box">
-  <div class="risk-num">${riskScore}</div>
-  <div style="font-size:13px;color:${riskScore<33?'#00e87a':riskScore<66?'#ffaa00':'#ff3d5a'};margin-top:4px">${riskLbl} RISK</div>
-  <div style="color:#4a6a88;font-size:10px;margin-top:8px">Weighted: DoS×0.4 · U2R×0.35 · R2L×0.15 · Probe×0.1</div>
-</div>
-<h2>Attack Class Distribution</h2>
-<table><thead><tr><th>CLASS</th><th>COUNT</th><th>PERCENTAGE</th><th>SEVERITY</th></tr></thead><tbody>${distRows}</tbody></table>
-<h2>Protocol Breakdown</h2>
-<table><thead><tr><th>PROTOCOL</th><th>COUNT</th><th>PERCENTAGE</th></tr></thead><tbody>${protoRows}</tbody></table>
-<h2>Severity Summary</h2>
-<table><thead><tr><th>SEVERITY</th><th>COUNT</th><th>PERCENTAGE</th></tr></thead><tbody>
-  ${['Critical','High','Medium','None'].map(s=>`<tr><td style="color:${sevColors[s]}">${s}</td><td>${(csvSevCounts[s]||0).toLocaleString()}</td><td>${((csvSevCounts[s]||0)/total*100).toFixed(1)}%</td></tr>`).join('')}
-</tbody></table>
-<h2>Detected Threats — Top 100</h2>
-<table><thead><tr><th>ROW</th><th>PROTOCOL</th><th>SERVICE</th><th>SRC BYTES</th><th>CLASS</th><th>CONFIDENCE</th><th>SEVERITY</th></tr></thead>
-<tbody>${threatRows||'<tr><td colspan="7" style="color:#00e87a;text-align:center;padding:20px">No threats detected — clean dataset</td></tr>'}</tbody></table>
-<div class="footer">Generated by SentinelNet v4.0 &nbsp;·&nbsp; ${dateStr} &nbsp;·&nbsp; NSL-KDD Intrusion Detection &nbsp;·&nbsp; Backend: ${BACKEND_URL}</div>
+<div class="meta">File: <strong style="color:#d8eeff">${fileName}</strong> &nbsp;|&nbsp; Date: ${dateStr} &nbsp;|&nbsp; Model: ${modelSrc} &nbsp;|&nbsp; Duration: ${formatETA(elapsed)}</div>
+<div class="grid"><div class="stat"><div class="stat-val" style="color:#00c8e8">${total.toLocaleString()}</div><div class="stat-lbl">Total Rows</div></div><div class="stat"><div class="stat-val" style="color:#ff3d5a">${threats.toLocaleString()}</div><div class="stat-lbl">Threats Found</div></div><div class="stat"><div class="stat-val" style="color:#ffaa00">${rate}%</div><div class="stat-lbl">Threat Rate</div></div><div class="stat"><div class="stat-val" style="color:#00e87a">${avgConf}%</div><div class="stat-lbl">Avg Confidence</div></div><div class="stat"><div class="stat-val" style="color:${riskScore<33?'#00e87a':riskScore<66?'#ffaa00':'#ff3d5a'}">${riskScore}/100</div><div class="stat-lbl">Risk Score</div></div></div>
+<div class="risk-box"><div class="risk-num">${riskScore}</div><div style="font-size:13px;color:${riskScore<33?'#00e87a':riskScore<66?'#ffaa00':'#ff3d5a'};margin-top:4px">${riskLbl} RISK</div><div style="color:#4a6a88;font-size:10px;margin-top:8px">Weighted: DoS×0.4 · U2R×0.35 · R2L×0.15 · Probe×0.1</div></div>
+<h2>Attack Class Distribution</h2><table><thead><tr><th>CLASS</th><th>COUNT</th><th>PERCENTAGE</th><th>SEVERITY</th></tr></thead><tbody>${distRows}</tbody></table>
+<h2>Protocol Breakdown</h2><table><thead><tr><th>PROTOCOL</th><th>COUNT</th><th>PERCENTAGE</th></tr></thead><tbody>${protoRows}</tbody></table>
+<h2>Severity Summary</h2><table><thead><tr><th>SEVERITY</th><th>COUNT</th><th>PERCENTAGE</th></tr></thead><tbody>${['Critical','High','Medium','None'].map(s=>`<tr><td style="color:${sevColors[s]}">${s}</td><td>${(csvSevCounts[s]||0).toLocaleString()}</td><td>${((csvSevCounts[s]||0)/total*100).toFixed(1)}%</td></tr>`).join('')}</tbody></table>
+<h2>Detected Threats — Top 100</h2><table><thead><tr><th>ROW</th><th>PROTOCOL</th><th>SERVICE</th><th>SRC BYTES</th><th>CLASS</th><th>CONFIDENCE</th><th>SEVERITY</th></tr></thead><tbody>${threatRows||'<tr><td colspan="7" style="color:#00e87a;text-align:center;padding:20px">No threats detected</td></tr>'}</tbody></table>
+<div class="footer">Generated by SentinelNet · ${dateStr} · NSL-KDD Intrusion Detection</div>
 </body></html>`;
-
   const win=window.open('','_blank','width=1100,height=900');
-  if(!win){alert('Pop-up blocked. Please allow pop-ups and try again.');return;}
+  if(!win){alert('Pop-up blocked.');return;}
   win.document.write(html);win.document.close();setTimeout(()=>win.print(),900);
 }
 
@@ -979,9 +982,10 @@ function downloadFile(filename,content,type){
 }
 
 function resetCsvTab(){
-  csvRunning=false;
-  csvRows=[];csvResults=[];csvIndex=0;csvConfSum=0;csvIntrusionCount=0;csvConfHistory=[];batchNum=0;
-  Object.keys(csvCounts).forEach(k=>csvCounts[k]=0);Object.keys(csvSevCounts).forEach(k=>csvSevCounts[k]=0);
+  csvRunning=false;csvRows=[];csvResults=[];csvIndex=0;csvConfSum=0;csvIntrusionCount=0;
+  csvConfHistory=[];batchNum=0;reportPage=0;
+  Object.keys(csvCounts).forEach(k=>csvCounts[k]=0);
+  Object.keys(csvSevCounts).forEach(k=>csvSevCounts[k]=0);
   csvStartTime=null;csvUsingReal=false;csvFormatInfo='';totalBatches=0;
   document.getElementById('csvUploadSection').style.display='';
   document.getElementById('csvProcessingArea').classList.remove('visible');
@@ -989,17 +993,18 @@ function resetCsvTab(){
   document.getElementById('csvLiveGrid').style.display='none';
   document.getElementById('reportSection').classList.remove('visible');
   document.getElementById('csvFeedBody').innerHTML='';
+  document.getElementById('reportTableBody').innerHTML='';
   document.getElementById('csvFileInput').value='';
   document.getElementById('formatBanner').style.display='none';
   document.getElementById('liveDot').className='dot';setText('liveStatus','IDLE');
-  document.getElementById('csvStartBtn').disabled=false;document.getElementById('csvStopBtn').disabled=true;
+  document.getElementById('csvStartBtn').disabled=false;
+  document.getElementById('csvStopBtn').disabled=true;
   document.getElementById('batchStatus').innerHTML='';
-  document.getElementById('csvProgressFill').style.width='0%';document.getElementById('csvProgressFill').classList.remove('warning');
+  document.getElementById('csvProgressFill').style.width='0%';
+  document.getElementById('csvProgressFill').classList.remove('warning');
 }
 
-// ════════════════════════════════════════════════
-// LIVE MONITOR
-// ════════════════════════════════════════════════
+// ── LIVE MONITOR ─────────────────────────────────
 function generatePacket(){
   const label=LABEL_POOL[Math.floor(Math.random()*LABEL_POOL.length)];
   const isAtk=label!=='normal';
@@ -1014,7 +1019,7 @@ async function tick(){
   const packet=generatePacket();
   let result;
   const api=await predictSingle(packet);
-  if(api){result=api;if(!usingRealModel){usingRealModel=true;document.getElementById('connBadge').textContent='✓ REAL MODEL';document.getElementById('connBadge').className='real';document.getElementById('sum-model').textContent='REAL RF';termLog('info','Connected to model at '+BACKEND_URL);}}
+  if(api){result=api;if(!usingRealModel){usingRealModel=true;document.getElementById('connBadge').textContent='✓ REAL MODEL';document.getElementById('connBadge').className='real';document.getElementById('sum-model').textContent='REAL RF';termLog('info','Connected to model');}}
   else{result=classifyLocal(packet);if(usingRealModel){usingRealModel=false;document.getElementById('connBadge').textContent='⚠ LOCAL SIM';document.getElementById('connBadge').className='local';document.getElementById('sum-model').textContent='LOCAL';}}
   packetId++;totalPackets++;
   const cls=result.predicted_class,conf=result.confidence,sev=result.severity,isI=result.is_intrusion;
@@ -1027,20 +1032,27 @@ async function tick(){
   heatmapCells.shift();heatmapCells.push(cls);
   addFeedRow(packet,cls,sev,conf);
   if(cls==='U2R')termLog('crit',`U2R ALERT — Privilege escalation! Conf: ${(conf*100).toFixed(1)}%`);
-  else if(cls==='DoS'&&Math.random()<0.15)termLog('warn',`DoS — ${packet.service} flood, ${packet.src_bytes.toLocaleString()} bytes`);
-  else if(cls==='R2L'&&Math.random()<0.2)termLog('warn',`R2L attempt on ${packet.service}`);
-  else if(cls==='normal'&&totalPackets%50===0)termLog('ok',`${totalPackets} packets. Intrusion rate: ${(totalIntrusions/totalPackets*100).toFixed(1)}%`);
-  updateMetrics();updateBars();updateConfBars();updateTimeline();updateHeatmap();updateSummary();flashMetric(cls);
+  else if(cls==='DoS'&&Math.random()<0.15)termLog('warn',`DoS — ${packet.service} flood`);
+  else if(cls==='normal'&&totalPackets%50===0)termLog('ok',`${totalPackets} packets. Rate: ${(totalIntrusions/totalPackets*100).toFixed(1)}%`);
+  updateMetrics();updateBars();updateConfBars();
+  // Throttle timeline — only redraw every 5 ticks — PERF FIX
+  tlDirty=true;
+  updateHeatmap();updateSummary();flashMetric(cls);
 }
 
+// Separate timer for timeline — PERF FIX
+setInterval(()=>{if(tlDirty){updateTimeline();tlDirty=false;}},500);
+
 function addFeedRow(packet,cls,sev,conf){
   const tbody=document.getElementById('feedBody');
   const now=new Date(),ts=`${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
   const tr=document.createElement('tr');tr.className='new-row';
   tr.innerHTML=`<td style="color:var(--muted)">${packetId}</td><td style="color:var(--muted)">${ts}</td><td style="color:var(--cyan)">${packet.protocol_type}</td><td>${packet.src_bytes.toLocaleString()}</td><td><span class="cls-badge cls-${cls}">${cls}</span></td><td style="color:${conf>0.9?'var(--accent)':conf>0.8?'var(--cyan)':'var(--amber)'}">${(conf*100).toFixed(1)}%</td><td style="color:${SEV_COLOR[sev]}">● ${sev}</td>`;
   tbody.insertBefore(tr,tbody.firstChild);
-  while(tbody.children.length>200)tbody.removeChild(tbody.lastChild);
-  document.getElementById('emptyState').style.display='none';document.getElementById('feedTable').style.display='';
+  // Cap at 100 DOM rows — PERF FIX (was 200)
+  while(tbody.children.length>100)tbody.removeChild(tbody.lastChild);
+  document.getElementById('emptyState').style.display='none';
+  document.getElementById('feedTable').style.display='';
   document.getElementById('alertCount').textContent=totalIntrusions+' ALERTS';
 }
 
@@ -1061,23 +1073,35 @@ function updateBars(){
 }
 function updateConfBars(){
   const mx=Math.max(...Object.values(confBuckets),1);
-  setWidth('conf-90',confBuckets[90]/mx*100);setWidth('conf-80',confBuckets[80]/mx*100);setWidth('conf-70',confBuckets[70]/mx*100);setWidth('conf-low',confBuckets.low/mx*100);
+  setWidth('conf-90',confBuckets[90]/mx*100);setWidth('conf-80',confBuckets[80]/mx*100);
+  setWidth('conf-70',confBuckets[70]/mx*100);setWidth('conf-low',confBuckets.low/mx*100);
   setText('cbc-90',confBuckets[90]);setText('cbc-80',confBuckets[80]);setText('cbc-70',confBuckets[70]);setText('cbc-low',confBuckets.low);
   setText('avgConf','avg: '+(totalPackets>0?(confSum/totalPackets*100).toFixed(1)+'%':'—'));
 }
 function updateTimeline(){
   const canvas=document.getElementById('tlCanvas');if(!canvas)return;
   const ctx=canvas.getContext('2d');const W=canvas.offsetWidth;const H=80;
-  canvas.width=W*devicePixelRatio;canvas.height=H*devicePixelRatio;ctx.scale(devicePixelRatio,devicePixelRatio);ctx.clearRect(0,0,W,H);
+  if(!W)return;
+  canvas.width=W*devicePixelRatio;canvas.height=H*devicePixelRatio;
+  ctx.scale(devicePixelRatio,devicePixelRatio);ctx.clearRect(0,0,W,H);
   const data=timelineBuckets;const mx=Math.max(...data,1);const step=W/data.length;
-  ctx.strokeStyle='rgba(0,200,120,.06)';ctx.lineWidth=1;[.25,.5,.75,1].forEach(f=>{ctx.beginPath();ctx.moveTo(0,H*f);ctx.lineTo(W,H*f);ctx.stroke();});
-  ctx.beginPath();ctx.moveTo(0,H);data.forEach((v,i)=>{const x=i*step,y=H-(v/mx*(H-10));ctx.lineTo(x,y);});ctx.lineTo(W,H);ctx.closePath();ctx.fillStyle='rgba(255,61,90,.12)';ctx.fill();
-  ctx.beginPath();ctx.strokeStyle='#ff3d5a';ctx.lineWidth=1.5;data.forEach((v,i)=>{const x=i*step,y=H-(v/mx*(H-10));i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});ctx.stroke();
+  ctx.strokeStyle='rgba(0,200,120,.06)';ctx.lineWidth=1;
+  [.25,.5,.75,1].forEach(f=>{ctx.beginPath();ctx.moveTo(0,H*f);ctx.lineTo(W,H*f);ctx.stroke();});
+  ctx.beginPath();ctx.moveTo(0,H);
+  data.forEach((v,i)=>{const x=i*step,y=H-(v/mx*(H-10));ctx.lineTo(x,y);});
+  ctx.lineTo(W,H);ctx.closePath();ctx.fillStyle='rgba(255,61,90,.12)';ctx.fill();
+  ctx.beginPath();ctx.strokeStyle='#ff3d5a';ctx.lineWidth=1.5;
+  data.forEach((v,i)=>{const x=i*step,y=H-(v/mx*(H-10));i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});
+  ctx.stroke();
 }
 const HM={normal:'rgba(0,232,122,0.4)',DoS:'rgba(255,61,90,0.65)',Probe:'rgba(0,200,232,0.5)',R2L:'rgba(255,170,0,0.55)',U2R:'rgba(176,111,255,0.75)',null:'rgba(255,255,255,0.04)'};
 function updateHeatmap(){
   const grid=document.getElementById('heatmap');
-  if(!grid.children.length){for(let i=0;i<60;i++){const d=document.createElement('div');d.className='hm-cell';grid.appendChild(d);}}
+  if(!grid.children.length){
+    const f=document.createDocumentFragment();
+    for(let i=0;i<60;i++){const d=document.createElement('div');d.className='hm-cell';f.appendChild(d);}
+    grid.appendChild(f);
+  }
   heatmapCells.forEach((cls,i)=>{grid.children[i].style.background=HM[cls]||HM[null];});
 }
 function updateSummary(){
@@ -1091,51 +1115,62 @@ function termLog(type,msg){
   const div=document.createElement('div');div.className='term-line';
   div.innerHTML=`<span class="ts">[${ts}]</span> <span class="${type}">${msg}</span>`;
   wrap.appendChild(div);wrap.scrollTop=wrap.scrollHeight;
-  while(wrap.children.length>80)wrap.removeChild(wrap.firstChild);
+  while(wrap.children.length>50)wrap.removeChild(wrap.firstChild);
 }
 const CLS_TO_MC={DoS:'mc-intrusions',Probe:'mc-probe',R2L:'mc-intrusions',U2R:'mc-u2r',normal:'mc-normal'};
 function flashMetric(cls){const el=document.getElementById(CLS_TO_MC[cls]||'mc-total');if(!el)return;el.classList.remove('flash');void el.offsetWidth;el.classList.add('flash');}
 
 function startMonitor(){
-  if(isRunning)return;isRunning=true;const speed=parseInt(document.getElementById('speedSel').value);
+  if(isRunning)return;isRunning=true;
+  const speed=parseInt(document.getElementById('speedSel').value);
   document.getElementById('startBtn').disabled=true;document.getElementById('stopBtn').disabled=false;
-  document.getElementById('liveStatus').textContent='LIVE';document.getElementById('liveDot').className='dot';
+  setText('liveStatus','LIVE');document.getElementById('liveDot').className='dot';
   document.getElementById('connBadge').textContent='⟳ CONNECTING';document.getElementById('connBadge').className='idle';
-  termLog('info','Monitor started — synthetic NSL-KDD traffic');
-  termLog('info',`Speed: ${(1000/speed).toFixed(1)} pkt/s · Backend: ${BACKEND_URL}`);
+  termLog('info','Monitor started');
   monitorInterval=setInterval(tick,speed);
-  sessionInterval=setInterval(()=>{sessionSeconds++;const m=Math.floor(sessionSeconds/60),s=sessionSeconds%60;setText('sessionClock',`Session: ${pad(m)}:${pad(s)}`);timelineBuckets[sessionSeconds%60]=0;updateTimeline();},1000);
+  sessionInterval=setInterval(()=>{
+    sessionSeconds++;
+    const m=Math.floor(sessionSeconds/60),s=sessionSeconds%60;
+    setText('sessionClock',`Session: ${pad(m)}:${pad(s)}`);
+    timelineBuckets[sessionSeconds%60]=0;
+  },1000);
 }
 function stopMonitor(){
-  if(!isRunning)return;isRunning=false;clearInterval(monitorInterval);clearInterval(sessionInterval);
+  if(!isRunning)return;isRunning=false;
+  clearInterval(monitorInterval);clearInterval(sessionInterval);
   document.getElementById('startBtn').disabled=false;document.getElementById('stopBtn').disabled=true;
-  document.getElementById('liveStatus').textContent='PAUSED';document.getElementById('liveDot').className='dot red';
+  setText('liveStatus','PAUSED');document.getElementById('liveDot').className='dot red';
   document.getElementById('connBadge').textContent='■ STOPPED';document.getElementById('connBadge').className='idle';
-  termLog('warn',`Stopped. ${pad(Math.floor(sessionSeconds/60))}:${pad(sessionSeconds%60)} · ${totalPackets} packets`);
+  termLog('warn',`Stopped. ${totalPackets} packets analyzed.`);
 }
 function clearAll(){
   stopMonitor();Object.keys(counts).forEach(k=>counts[k]=0);
-  totalPackets=0;totalIntrusions=0;confSum=0;packetId=0;confBuckets={90:0,80:0,70:0,low:0};
-  timelineBuckets=Array(60).fill(0);heatmapCells=Array(60).fill(null);peakClass=null;sessionSeconds=0;usingRealModel=false;
+  totalPackets=0;totalIntrusions=0;confSum=0;packetId=0;
+  confBuckets={90:0,80:0,70:0,low:0};
+  timelineBuckets=Array(60).fill(0);heatmapCells=Array(60).fill(null);
+  peakClass=null;sessionSeconds=0;usingRealModel=false;
   setText('sessionClock','Session: 00:00');setText('liveStatus','IDLE');
-  document.getElementById('liveDot').className='dot';document.getElementById('feedBody').innerHTML='';
-  document.getElementById('feedTable').style.display='none';document.getElementById('emptyState').style.display='';
-  document.getElementById('alertCount').textContent='0 ALERTS';document.getElementById('connBadge').className='idle';document.getElementById('connBadge').textContent='— IDLE';
-  document.getElementById('termWrap').innerHTML=`<div class="term-line"><span class="ts">[--:--:--]</span> <span class="info">Reset. Backend: ${BACKEND_URL}</span></div>`;
+  document.getElementById('liveDot').className='dot';
+  document.getElementById('feedBody').innerHTML='';
+  document.getElementById('feedTable').style.display='none';
+  document.getElementById('emptyState').style.display='';
+  document.getElementById('alertCount').textContent='0 ALERTS';
+  document.getElementById('connBadge').className='idle';
+  document.getElementById('connBadge').textContent='— IDLE';
+  document.getElementById('termWrap').innerHTML=`<div class="term-line"><span class="ts">[--:--:--]</span> <span class="info">Reset.</span></div>`;
   updateMetrics();updateBars();updateConfBars();updateHeatmap();
-  ['sum-rate','sum-conf','sum-peak'].forEach(id=>setText(id,'—'));setText('sum-model','LOCAL');
+  ['sum-rate','sum-conf','sum-peak'].forEach(id=>setText(id,'—'));
+  setText('sum-model','LOCAL');
 }
 
-// ════════════════════════════════════════════════
-// UTILS
-// ════════════════════════════════════════════════
+// ── UTILS ────────────────────────────────────────
 function setText(id,v){const el=document.getElementById(id);if(el)el.textContent=v;}
 function setWidth(id,pct){const el=document.getElementById(id);if(el)el.style.width=pct+'%';}
 function pad(n){return String(n).padStart(2,'0');}
 function formatETA(secs){if(secs<60)return secs.toFixed(0)+'s';return`${Math.floor(secs/60)}m ${pad(Math.floor(secs%60))}s`;}
 
-// Init
-updateHeatmap();updateTimeline();
+// Init — deferred to after page load — PERF FIX
+window.addEventListener('load',()=>{updateHeatmap();updateTimeline();});
 </script>
 </body>
 </html>