From e4f2a1384f274d6470c19048235e2b647a5005b4 Mon Sep 17 00:00:00 2001
From: Saranyadharani <saranyadharani84@gmail.com>
Date: Mon, 1 Jun 2026 19:58:33 +0530
Subject: [PATCH 1/2] feat: add real-time log streaming with anomaly
 highlighting and smart filters

---
 html/dashboard.html  | 106 ++++++++++--
 js/anomalyFilters.js | 170 ++++++++++++++++++
 js/streaming.js      | 245 ++++++++++++++++++++++++++
 logic.py             | 108 +++++++++++-
 main.py              | 154 +++++++++++++----
 styles/streaming.css | 399 +++++++++++++++++++++++++++++++++++++++++++
 test.log             |   9 +
 7 files changed, 1139 insertions(+), 52 deletions(-)
 create mode 100644 js/anomalyFilters.js
 create mode 100644 js/streaming.js
 create mode 100644 styles/streaming.css
 create mode 100644 test.log

diff --git a/html/dashboard.html b/html/dashboard.html
index 6a731ad..6f36688 100644
--- a/html/dashboard.html
+++ b/html/dashboard.html
@@ -11,13 +11,10 @@
     <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
-    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
     <link rel="stylesheet" href="../styles/dashboard.css" />
+    <link rel="stylesheet" href="../styles/streaming.css" />
     <style>
-      /* ── Reactive Scroll-To-Top Button (Dashboard) ───────────────────────── */
       #scrollTopBtn {
         position: fixed;
         bottom: 2rem;
@@ -173,7 +170,8 @@ <h3 id="gapCount" class="text-2xl font-black text-white">0</h3>
           </div>
 
           <div class="grid grid-cols-12 gap-6">
-            <div class="col-span-12 lg:col-span-4 space-y-6">
+            <!-- Left Column - Streaming Section (6 columns) -->
+            <div class="col-span-12 lg:col-span-6 space-y-6">
               <div class="glass-card p-6 border-l-4 border-blue-500">
                 <h4 class="text-[10px] font-bold uppercase text-slate-500 mb-4 tracking-widest">Evidence Ingestion</h4>
                 <div id="dropArea" class="border-2 border-dashed border-slate-800 rounded-xl p-8 text-center hover:border-blue-500 cursor-pointer">
@@ -224,6 +222,90 @@ <h4 class="text-[10px] font-bold uppercase text-blue-500 tracking-widest flex it
                   <pre id="previewContent" class="font-mono text-[10px] text-slate-300 bg-slate-900/50 p-4 rounded-lg overflow-x-auto custom-scroll max-h-64 leading-relaxed"></pre>
                 </div>
               </div>
+
+              <!-- Real-time Streaming Section - Compact Redesign -->
+              <div class="streaming-container">
+                <div class="streaming-header">
+                  <div class="streaming-title">
+                    <i class="fas fa-broadcast-tower"></i>
+                    <div>
+                      <h3>LIVE FORENSIC STREAM</h3>
+                      <p>Real-time anomaly detection</p>
+                    </div>
+                  </div>
+                  <div class="streaming-controls">
+                    <button id="startStreamingBtn" class="streaming-btn streaming-btn-primary">▶ START</button>
+                    <button id="pauseStreamingBtn" class="streaming-btn streaming-btn-warning" disabled>⏸ PAUSE</button>
+                    <button id="stopStreamingBtn" class="streaming-btn streaming-btn-danger" disabled>⏹ STOP</button>
+                    <button id="clearStreamingBtn" class="streaming-btn streaming-btn-secondary">🗑 CLEAR</button>
+                  </div>
+                </div>
+
+                <!-- Compact Filter Row -->
+                <div class="streaming-filter-row">
+                  <div class="filter-group">
+                    <button class="filter-chip active" data-filter="all">ALL</button>
+                    <button class="filter-chip active" data-filter="timeVoid">TIME VOIDS</button>
+                    <button class="filter-chip active" data-filter="logShaving">LOG SHAVING</button>
+                    <button class="filter-chip active" data-filter="critical">CRITICAL</button>
+                  </div>
+                  <div class="stats-mini">
+                    🔍 <span id="visibleLinesCount">0</span> visible
+                  </div>
+                </div>
+
+                <!-- Compact Progress Bar -->
+                <div class="streaming-progress-compact">
+                  <div class="progress-header-compact">
+                    <span id="streamProgressMessage">Ready</span>
+                    <span id="streamProgressPercent">0%</span>
+                  </div>
+                  <div class="progress-bar-bg-compact">
+                    <div id="streamProgressFill" class="progress-bar-fill-compact" style="width: 0%"></div>
+                  </div>
+                </div>
+
+                <!-- Compact Stats Row -->
+                <div class="stats-row">
+                  <div class="stat-item-compact">
+                    <span class="stat-icon">📊</span>
+                    <div>
+                      <span class="stat-label-compact">ANOMALIES</span>
+                      <span id="anomalyCount" class="stat-value-compact">0</span>
+                    </div>
+                  </div>
+                  <div class="stat-item-compact">
+                    <span class="stat-icon">⚠️</span>
+                    <div>
+                      <span class="stat-label-compact">CRITICAL</span>
+                      <span id="stat-critical" class="stat-value-compact critical">0</span>
+                    </div>
+                  </div>
+                  <div class="stat-item-compact">
+                    <span class="stat-icon">⏱️</span>
+                    <div>
+                      <span class="stat-label-compact">TIME VOIDS</span>
+                      <span id="stat-timeVoid" class="stat-value-compact time-void">0</span>
+                    </div>
+                  </div>
+                  <div class="stat-item-compact">
+                    <span class="stat-icon">✂️</span>
+                    <div>
+                      <span class="stat-label-compact">SHAVING</span>
+                      <span id="stat-logShaving" class="stat-value-compact shaving">0</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Log Container -->
+                <div id="streamingLogContainer" class="streaming-log-container">
+                  <div class="streaming-info-message">
+                    <i class="fas fa-microchip"></i>
+                    <span>Select a log file and click START</span>
+                  </div>
+                </div>
+              </div>
+
               <div id="signatureCard" class="hidden glass-card p-6 border-l-4 border-amber-500">
                 <h4 class="text-[10px] font-bold uppercase text-amber-500 mb-4 flex items-center gap-2">
                   <i class="fas fa-crosshairs"></i> Anomaly Signature
@@ -231,8 +313,10 @@ <h4 class="text-[10px] font-bold uppercase text-amber-500 mb-4 flex items-center
                 <div id="tacticalReasoning" class="text-[10px] text-slate-300 leading-relaxed font-mono italic"></div>
               </div>
             </div>
-            <div class="col-span-12 lg:col-span-8">
-              <div class="glass-card p-6 h-[450px]">
+
+            <!-- Right Column - Chart Section (6 columns) -->
+            <div class="col-span-12 lg:col-span-6">
+              <div class="glass-card p-6" style="height: 480px;">
                 <div class="flex justify-between items-center mb-6">
                   <h4 class="text-[10px] font-bold uppercase text-slate-500 tracking-widest">Forensic Data Visualization</h4>
                   <div class="flex gap-2">
@@ -287,7 +371,7 @@ <h2 class="text-4xl font-black text-white uppercase mb-4 tracking-tighter">Expor
             <button onclick="exportForensicJSON()" class="px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white font-black uppercase text-xs rounded transition-all">Download JSON</button>
             <button onclick="exportRegistryCSV()" class="px-8 py-3 bg-slate-800 hover:bg-slate-700 text-white font-black uppercase text-xs rounded border border-white/10 transition-all">Export CSV</button>
             <button onclick="exportForensicPDF()" class="px-8 py-3 bg-red-600 hover:bg-red-500 text-white font-black uppercase text-xs rounded transition-all">
-              <i class="fas fa-file-pdf mr-2"></i> Download PDF 
+              <i class="fas fa-file-pdf mr-2"></i> Download PDF
             </button>
           </div>
         </div>
@@ -322,7 +406,7 @@ <h4 class="text-xs font-bold uppercase text-slate-400">Forensic Case Vault</h4>
       <i class="fas fa-arrow-up arrow-icon"></i>
     </button>
 
-    <!-- Terms of Service Modal - Enhanced -->
+    <!-- Terms of Service Modal -->
     <div id="tosModal" class="fixed inset-0 z-[300] hidden items-center justify-center bg-black/80 backdrop-blur-md transition-all duration-300" style="backdrop-filter: blur(12px);">
       <div class="tos-content relative w-full max-w-2xl max-h-[85vh] overflow-hidden flex flex-col p-0">
         <button onclick="closeTOS()" class="absolute top-5 right-5 w-8 h-8 rounded-full flex items-center justify-center text-slate-500 hover:text-red-400 hover:bg-red-500/10 transition-all duration-200 z-10" aria-label="Close Terms of Service">
@@ -405,6 +489,8 @@ <h2 class="text-white text-lg font-bold mb-4">Are you sure you want to remove yo
 
     <script src="../js/dashboard.js"></script>
     <script src="../js/theme.js"></script>
+    <script src="../js/streaming.js"></script>
+    <script src="../js/anomalyFilters.js"></script>
 
     <!-- Preview Script -->
     <script>
diff --git a/js/anomalyFilters.js b/js/anomalyFilters.js
new file mode 100644
index 0000000..ce4e19a
--- /dev/null
+++ b/js/anomalyFilters.js
@@ -0,0 +1,170 @@
+/**
+ * Anomaly Filters - Real-time filtering for streaming anomalies
+ */
+
+let activeFilters = {
+  timeVoid: true,
+  logShaving: true,
+  hashMismatch: true,
+  critical: true
+};
+
+let filterStats = {
+  timeVoid: 0,
+  logShaving: 0,
+  hashMismatch: 0,
+  critical: 0
+};
+
+function initAnomalyFilters() {
+  const filters = document.querySelectorAll('.filter-chip');
+  filters.forEach(chip => {
+    chip.addEventListener('click', () => {
+      const filterType = chip.dataset.filter;
+      if (filterType === 'all') {
+        resetAllFilters();
+      } else {
+        toggleFilter(filterType);
+      }
+      applyFilters();
+    });
+  });
+}
+
+function toggleFilter(filterType) {
+  if (activeFilters.hasOwnProperty(filterType)) {
+    activeFilters[filterType] = !activeFilters[filterType];
+    updateFilterUI(filterType);
+  }
+}
+
+function resetAllFilters() {
+  activeFilters = {
+    timeVoid: true,
+    logShaving: true,
+    hashMismatch: true,
+    critical: true
+  };
+  
+  document.querySelectorAll('.filter-chip').forEach(chip => {
+    if (chip.dataset.filter !== 'all') {
+      chip.classList.add('active');
+    }
+  });
+  
+  const allChip = document.querySelector('.filter-chip[data-filter="all"]');
+  if (allChip) allChip.classList.add('active');
+}
+
+function updateFilterUI(filterType) {
+  const chip = document.querySelector(`.filter-chip[data-filter="${filterType}"]`);
+  if (chip) {
+    if (activeFilters[filterType]) {
+      chip.classList.add('active');
+    } else {
+      chip.classList.remove('active');
+    }
+  }
+  
+  const allChip = document.querySelector('.filter-chip[data-filter="all"]');
+  const allActive = Object.values(activeFilters).every(v => v === true);
+  if (allChip) {
+    if (allActive) {
+      allChip.classList.add('active');
+    } else {
+      allChip.classList.remove('active');
+    }
+  }
+}
+
+function applyFilters() {
+  const logLines = document.querySelectorAll('.streaming-log-line');
+  let visibleCount = 0;
+  
+  logLines.forEach(line => {
+    let shouldShow = true;
+    
+    if (!activeFilters.timeVoid && line.classList.contains('anomaly-time-void')) {
+      shouldShow = false;
+    }
+    if (!activeFilters.logShaving && line.classList.contains('anomaly-log-shaving')) {
+      shouldShow = false;
+    }
+    if (!activeFilters.hashMismatch && line.classList.contains('anomaly-hash-mismatch')) {
+      shouldShow = false;
+    }
+    if (!activeFilters.critical && line.classList.contains('anomaly-critical')) {
+      shouldShow = false;
+    }
+    
+    if (shouldShow) {
+      line.style.display = 'block';
+      visibleCount++;
+    } else {
+      line.style.display = 'none';
+    }
+  });
+  
+  updateVisibleCount(visibleCount);
+}
+
+function updateVisibleCount(count) {
+  const countEl = document.getElementById('visibleLinesCount');
+  if (countEl) {
+    countEl.textContent = count;
+  }
+}
+
+function updateStats(anomalyType) {
+  if (filterStats.hasOwnProperty(anomalyType)) {
+    filterStats[anomalyType]++;
+    const statEl = document.getElementById(`stat-${anomalyType}`);
+    if (statEl) {
+      statEl.textContent = filterStats[anomalyType];
+    }
+  }
+}
+
+function resetStats() {
+  filterStats = {
+    timeVoid: 0,
+    logShaving: 0,
+    hashMismatch: 0,
+    critical: 0
+  };
+  
+  ['timeVoid', 'logShaving', 'hashMismatch', 'critical'].forEach(type => {
+    const statEl = document.getElementById(`stat-${type}`);
+    if (statEl) {
+      statEl.textContent = '0';
+    }
+  });
+}
+
+function detectAnomalyType(line) {
+  const lowerLine = line.toLowerCase();
+  
+  if (lowerLine.includes('time void') || lowerLine.includes('temporal gap') || lowerLine.includes('blackout')) {
+    return 'timeVoid';
+  }
+  if (lowerLine.includes('log shaving') || lowerLine.includes('truncated') || lowerLine.includes('cut')) {
+    return 'logShaving';
+  }
+  if (lowerLine.includes('hash') || lowerLine.includes('checksum') || lowerLine.includes('integrity')) {
+    return 'hashMismatch';
+  }
+  if (lowerLine.includes('critical') || lowerLine.includes('severe') || lowerLine.includes('tampering')) {
+    return 'critical';
+  }
+  return null;
+}
+
+function getAnomalyClass(anomalyType) {
+  switch(anomalyType) {
+    case 'timeVoid': return 'anomaly-time-void';
+    case 'logShaving': return 'anomaly-log-shaving';
+    case 'hashMismatch': return 'anomaly-hash-mismatch';
+    case 'critical': return 'anomaly-critical';
+    default: return '';
+  }
+}
\ No newline at end of file
diff --git a/js/streaming.js b/js/streaming.js
new file mode 100644
index 0000000..df9d21e
--- /dev/null
+++ b/js/streaming.js
@@ -0,0 +1,245 @@
+/**
+ * Real-time Log Streaming with SSE
+ */
+
+let eventSource = null;
+let isStreaming = false;
+let isPaused = false;
+let logBuffer = [];
+let anomalyCount = 0;
+
+const STREAMING_EVENT_TYPES = {
+  PROGRESS: 'progress',
+  ANOMALY: 'anomaly',
+  COMPLETE: 'complete',
+  ERROR: 'error'
+};
+
+function initStreaming() {
+  const startBtn = document.getElementById('startStreamingBtn');
+  const stopBtn = document.getElementById('stopStreamingBtn');
+  const pauseBtn = document.getElementById('pauseStreamingBtn');
+  const clearBtn = document.getElementById('clearStreamingBtn');
+  
+  if (startBtn) startBtn.addEventListener('click', startStreaming);
+  if (stopBtn) stopBtn.addEventListener('click', stopStreaming);
+  if (pauseBtn) pauseBtn.addEventListener('click', togglePause);
+  if (clearBtn) clearBtn.addEventListener('click', clearStreamingLog);
+  
+  initAnomalyFilters();
+}
+
+async function startStreaming() {
+  if (isStreaming) {
+    showToast('Streaming already active');
+    return;
+  }
+  
+  const fileInput = document.getElementById('logFile');
+  const file = fileInput?.files[0];
+  
+  if (!file) {
+    showToast('Please select a log file first');
+    return;
+  }
+  
+  isStreaming = true;
+  isPaused = false;
+  anomalyCount = 0;
+  logBuffer = [];
+  resetStats();
+  clearStreamingLog();
+  
+  updateStreamingUI();
+  
+  const formData = new FormData();
+  formData.append('file', file);
+  
+  try {
+    const token = localStorage.getItem('access_token');
+    const response = await fetch('http://localhost:8000/stream-analyze', {
+      method: 'POST',
+      headers: token ? { 'Authorization': `Bearer ${token}` } : {},
+      body: formData
+    });
+    
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    
+    while (isStreaming) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      
+      const chunk = decoder.decode(value);
+      const lines = chunk.split('\n');
+      
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const data = JSON.parse(line.slice(6));
+          processStreamEvent(data);
+        }
+      }
+    }
+  } catch (error) {
+    console.error('Streaming error:', error);
+    showToast('Streaming error: ' + error.message);
+    stopStreaming();
+  }
+}
+
+function processStreamEvent(event) {
+  if (isPaused) {
+    logBuffer.push(event);
+    return;
+  }
+  
+  switch(event.type) {
+    case STREAMING_EVENT_TYPES.PROGRESS:
+      updateProgress(event.percent, event.message);
+      break;
+      
+    case STREAMING_EVENT_TYPES.ANOMALY:
+      addAnomalyToLog(event);
+      anomalyCount++;
+      updateAnomalyCount();
+      break;
+      
+    case STREAMING_EVENT_TYPES.COMPLETE:
+      addSystemMessage('Analysis completed successfully', 'success');
+      stopStreaming();
+      break;
+      
+    case STREAMING_EVENT_TYPES.ERROR:
+      addSystemMessage('Error: ' + event.message, 'error');
+      stopStreaming();
+      break;
+  }
+}
+
+function addAnomalyToLog(anomaly) {
+  const container = document.getElementById('streamingLogContainer');
+  if (!container) return;
+  
+  const logLine = document.createElement('div');
+  logLine.className = 'streaming-log-line';
+  
+  const anomalyType = detectAnomalyType(anomaly.details || anomaly.reason || '');
+  const anomalyClass = getAnomalyClass(anomalyType);
+  if (anomalyClass) {
+    logLine.classList.add(anomalyClass);
+    updateStats(anomalyType);
+  }
+  
+  const timestamp = new Date().toLocaleTimeString();
+  const severityBadge = anomaly.severity === 'CRITICAL' 
+    ? '<span style="color:#ef4444; font-weight:bold;">[CRITICAL]</span> '
+    : '<span style="color:#f59e0b;">[WARNING]</span> ';
+  
+  logLine.innerHTML = `
+    <span style="color:#64748b;">[${timestamp}]</span>
+    ${severityBadge}
+    <span style="color:#e2e8f0;">${anomaly.start} → ${anomaly.end}</span>
+    <span style="color:#f59e0b;"> (${anomaly.duration}s gap)</span>
+    <div style="font-size:10px; color:#94a3b8; margin-top:4px;">
+      📍 ${anomaly.details || 'Temporal anomaly detected'}
+    </div>
+  `;
+  
+  container.appendChild(logLine);
+  if (!isPaused) {
+    logLine.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
+  
+  applyFilters();
+}
+
+function addSystemMessage(message, type = 'info') {
+  const container = document.getElementById('streamingLogContainer');
+  if (!container) return;
+  
+  const logLine = document.createElement('div');
+  logLine.className = 'streaming-log-line';
+  logLine.style.background = type === 'error' ? 'rgba(239,68,68,0.1)' : 'rgba(59,130,246,0.1)';
+  
+  const timestamp = new Date().toLocaleTimeString();
+  const icon = type === 'error' ? '❌' : type === 'success' ? '✅' : 'ℹ️';
+  
+  logLine.innerHTML = `
+    <span style="color:#64748b;">[${timestamp}]</span>
+    <span>${icon} ${message}</span>
+  `;
+  
+  container.appendChild(logLine);
+  logLine.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+
+function updateProgress(percent, message) {
+  const progressFill = document.getElementById('streamProgressFill');
+  const progressPercent = document.getElementById('streamProgressPercent');
+  const progressMessage = document.getElementById('streamProgressMessage');
+  
+  if (progressFill) progressFill.style.width = `${percent}%`;
+  if (progressPercent) progressPercent.textContent = `${percent}%`;
+  if (progressMessage) progressMessage.textContent = message;
+}
+
+function updateAnomalyCount() {
+  const countEl = document.getElementById('anomalyCount');
+  if (countEl) {
+    countEl.textContent = anomalyCount;
+  }
+}
+
+function togglePause() {
+  isPaused = !isPaused;
+  const pauseBtn = document.getElementById('pauseStreamingBtn');
+  
+  if (isPaused) {
+    if (pauseBtn) pauseBtn.textContent = 'Resume';
+    addSystemMessage('Streaming paused - new anomalies buffered', 'info');
+  } else {
+    if (pauseBtn) pauseBtn.textContent = 'Pause';
+    addSystemMessage('Streaming resumed', 'info');
+    flushBuffer();
+  }
+}
+
+function flushBuffer() {
+  while (logBuffer.length > 0) {
+    const event = logBuffer.shift();
+    processStreamEvent(event);
+  }
+}
+
+function clearStreamingLog() {
+  const container = document.getElementById('streamingLogContainer');
+  if (container) {
+    container.innerHTML = '';
+  }
+  anomalyCount = 0;
+  updateAnomalyCount();
+  resetStats();
+  updateProgress(0, 'Ready');
+}
+
+function stopStreaming() {
+  isStreaming = false;
+  isPaused = false;
+  updateStreamingUI();
+  addSystemMessage('Streaming stopped', 'info');
+}
+
+function updateStreamingUI() {
+  const startBtn = document.getElementById('startStreamingBtn');
+  const stopBtn = document.getElementById('stopStreamingBtn');
+  const pauseBtn = document.getElementById('pauseStreamingBtn');
+  
+  if (startBtn) startBtn.disabled = isStreaming;
+  if (stopBtn) stopBtn.disabled = !isStreaming;
+  if (pauseBtn) pauseBtn.disabled = !isStreaming;
+}
+
+// Initialize on DOM load
+document.addEventListener('DOMContentLoaded', () => {
+  initStreaming();
+});
\ No newline at end of file
diff --git a/logic.py b/logic.py
index 2bc6a2a..b58f429 100644
--- a/logic.py
+++ b/logic.py
@@ -21,7 +21,7 @@ def parse_any_date(date_str):
     return None
 
 
-def analyze_logs(file_path, threshold_seconds=60, use_24_hour=True,progress_callback=None):
+def analyze_logs(file_path, threshold_seconds=60, use_24_hour=True, progress_callback=None):
     """
     Analyzes log file for temporal gaps and categorizes anomalies.
     Allows toggling between 12-hour and 24-hour time formats.
@@ -29,7 +29,7 @@ def analyze_logs(file_path, threshold_seconds=60, use_24_hour=True,progress_call
 
     #  STEP 1: Decide time format based on toggle
     if progress_callback:
-        progress_callback(10,"step1:deciding time format..")
+        progress_callback(10, "step1:deciding time format..")
     if use_24_hour:
         time_format = '%Y-%m-%d %H:%M:%S'
     else:
@@ -70,7 +70,7 @@ def analyze_logs(file_path, threshold_seconds=60, use_24_hour=True,progress_call
 
                         # STEP 2: Use dynamic format
                         if progress_callback:
-                           progress_callback(60, "step 2 :detecting gaps in logs..")
+                            progress_callback(60, "step 2 :detecting gaps in logs..")
                         incidents.append({
                             "start": last_time.strftime(time_format),
                             "end": current_time.strftime(time_format),
@@ -82,10 +82,10 @@ def analyze_logs(file_path, threshold_seconds=60, use_24_hour=True,progress_call
                 if current_time:
                     last_time = current_time
                 if progress_callback:
-                   progress_callback(80,"step 3 : calculating intergrity score..")
+                    progress_callback(80, "step 3 : calculating integrity score..")
                 score = calculate_integrity_score(incidents)
     if progress_callback:
-        progress_callback(100,"Analysis completed.")
+        progress_callback(100, "Analysis completed.")
     return {
         "total_gaps": len(incidents),
         "integrity_score": round(score, 2),
@@ -93,6 +93,104 @@ def analyze_logs(file_path, threshold_seconds=60, use_24_hour=True,progress_call
     }
 
 
+def analyze_logs_streaming(file_path, threshold_seconds=60):
+    """
+    Streaming version - yields events as anomalies are found in real-time.
+    This is used for the Server-Sent Events (SSE) streaming endpoint.
+    
+    Yields:
+        dict: Progress events, anomaly events, and final summary
+    """
+    incidents = []
+    last_time = None
+    line_count = 0
+    
+    # Ensure threshold is an integer
+    try:
+        threshold_seconds = int(threshold_seconds)
+    except (ValueError, TypeError):
+        threshold_seconds = 60
+    
+    # First, count total lines for progress calculation
+    try:
+        with open(file_path, 'r', encoding='utf-8', errors='ignore') as f:
+            total_lines = sum(1 for _ in f)
+    except Exception:
+        total_lines = 1
+    
+    yield {'type': 'progress', 'percent': 5, 'message': 'Starting forensic stream analysis...'}
+    
+    with open(file_path, 'r', encoding='utf-8', errors='ignore') as f:
+        for line in f:
+            line_count += 1
+            
+            # Update progress every 50 lines or 1% of total
+            if line_count % max(50, total_lines // 100) == 0:
+                percent = min(90, 5 + int((line_count / total_lines) * 85))
+                yield {
+                    'type': 'progress', 
+                    'percent': percent, 
+                    'message': f'Scanning line {line_count} of {total_lines}...'
+                }
+            
+            match = re.search(TIMESTAMP_PATTERN, line)
+            if match:
+                current_time = parse_any_date(match.group(1))
+                
+                if current_time and last_time:
+                    gap = (current_time - last_time).total_seconds()
+                    
+                    if gap > threshold_seconds:
+                        # --- DYNAMIC ANOMALY CATEGORIZATION ---
+                        if gap > 3600:
+                            reason = "Extended System Blackout / High Risk Log Erasure"
+                            severity = "CRITICAL"
+                            anomaly_type = "critical"
+                        elif gap > 600:
+                            reason = "Significant Data Void / Potential Tampering"
+                            severity = "CRITICAL"
+                            anomaly_type = "timeVoid"
+                        elif gap > 300:
+                            reason = "Service Interruption Detected"
+                            severity = "WARNING"
+                            anomaly_type = "logShaving"
+                        else:
+                            reason = "Minor Sequential Lag"
+                            severity = "WARNING"
+                            anomaly_type = "timeVoid"
+                        
+                        incident = {
+                            "type": "anomaly",
+                            "anomalyType": anomaly_type,
+                            "start": last_time.strftime('%Y-%m-%d %H:%M:%S'),
+                            "end": current_time.strftime('%Y-%m-%d %H:%M:%S'),
+                            "duration": int(gap),
+                            "severity": severity,
+                            "details": reason
+                        }
+                        incidents.append(incident)
+                        yield incident
+                
+                if current_time:
+                    last_time = current_time
+    
+    # Calculate final integrity score
+    score = calculate_integrity_score(incidents)
+    
+    yield {
+        'type': 'progress',
+        'percent': 100,
+        'message': 'Analysis complete'
+    }
+    
+    yield {
+        'type': 'summary',
+        'total_gaps': len(incidents),
+        'integrity_score': round(score, 2),
+        'incidents': incidents
+    }
+
+
 def calculate_integrity_score(incidents):
     """
     Weighted integrity scoring model.
diff --git a/main.py b/main.py
index f84a492..111df2b 100644
--- a/main.py
+++ b/main.py
@@ -1,5 +1,5 @@
 from fastapi import FastAPI, UploadFile, File, Form, HTTPException, Depends, Request
-from fastapi.responses import HTMLResponse,StreamingResponse
+from fastapi.responses import HTMLResponse, StreamingResponse
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
 from slowapi import Limiter, _rate_limit_exceeded_handler
@@ -15,7 +15,7 @@
 import sys
 import json
 import logging
-import magic  # python-magic for MIME sniffing
+import magic
 
 load_dotenv()
 
@@ -28,8 +28,6 @@
 logger = logging.getLogger("evidence_protector")
 
 # ─── STARTUP SECRET VALIDATION ───────────────────────────────────────────────
-# Refuse to start if SECRET_KEY is missing or is a known insecure default.
-# This prevents silent JWT forgery when the env var is not configured.
 
 _SECRET_KEY = os.getenv("SECRET_KEY", "")
 _INSECURE_DEFAULTS = {
@@ -60,13 +58,12 @@
     "application/xml",
     "text/xml",
     "text/x-log",
-    "application/octet-stream",  # fallback for .log/.evtx on some systems
+    "application/octet-stream",
 }
-MAX_FILE_SIZE_BYTES = 50 * 1024 * 1024  # 50 MB
+MAX_FILE_SIZE_BYTES = 50 * 1024 * 1024
 
 # ─── AUTH CONFIGURATION ──────────────────────────────────────────────────────
 
-# Reuse the already-validated value — no insecure fallback
 SECRET_KEY = _SECRET_KEY
 ALGORITHM = "HS256"
 ACCESS_TOKEN_EXPIRE_MINUTES = int(os.getenv("ACCESS_TOKEN_EXPIRE_MINUTES", 60))
@@ -79,7 +76,7 @@
 # ─── APP ─────────────────────────────────────────────────────────────────────
 
 try:
-    from logic import analyze_logs
+    from logic import analyze_logs, analyze_logs_streaming
 except ImportError:
     logger.warning("logic.py not found. Ensure it is in the same directory.")
 
@@ -158,7 +155,6 @@ def create_access_token(data: dict) -> str:
 def get_current_user(
     credentials: HTTPAuthorizationCredentials = Depends(bearer_scheme),
 ) -> str:
-    """JWT dependency — validates token and returns username. Raises 401 on failure."""
     token = credentials.credentials
     try:
         payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
@@ -175,11 +171,9 @@ def get_current_user(
 async def root():
     return {"status": "online", "system": "Evidence Protector Pro"}
 
-
 @app.post("/login")
 @limiter.limit("10/minute")
 async def login(request: Request, username: str = Form(...), password: str = Form(...)):
-    """Authenticate operator and return a signed JWT."""
     users = load_users()
     hashed = users.get(username)
     if not hashed or not bcrypt.checkpw(password.encode(), hashed.encode()):
@@ -189,11 +183,9 @@ async def login(request: Request, username: str = Form(...), password: str = For
     logger.info("Successful login: %s from %s", username, request.client.host)
     return {"access_token": token, "token_type": "bearer"}
 
-
 @app.post("/register")
 @limiter.limit("5/minute")
 async def register(request: Request, username: str = Form(...), password: str = Form(...)):
-    """Register a new operator account."""
     users = load_users()
     if username in users:
         raise HTTPException(status_code=400, detail="Operator ID already registered in the system.")
@@ -207,24 +199,17 @@ async def register(request: Request, username: str = Form(...), password: str =
         "token_type": "bearer",
     }
 
-
 @app.post("/analyze")
 @limiter.limit("30/minute")
 async def upload_log(
     request: Request,
     file: UploadFile = File(...),
     threshold: str = Form("60"),
-    current_user: str = Depends(get_current_user),  # 🔒 JWT required
+    current_user: str = Depends(get_current_user),
 ):
-    """
-    Protected forensic analysis endpoint.
-    Requires a valid Bearer token issued by /login or /register.
-    Rate-limited to 30 requests/minute per IP.
-    """
     logger.info("Analyze request from user '%s' | file: %s | ip: %s",
                 current_user, file.filename, request.client.host)
 
-    # ── 1. FILENAME / EXTENSION VALIDATION ──────────────────────────────────
     if not file.filename:
         raise HTTPException(status_code=400, detail="No filename provided.")
 
@@ -235,7 +220,6 @@ async def upload_log(
             detail=f"File type '{ext}' is not allowed. Accepted types: {', '.join(sorted(ALLOWED_EXTENSIONS))}"
         )
 
-    # ── 2. FILE SIZE VALIDATION ──────────────────────────────────────────────
     contents = await file.read()
     if len(contents) == 0:
         raise HTTPException(status_code=400, detail="Uploaded file is empty.")
@@ -245,7 +229,6 @@ async def upload_log(
             detail=f"File exceeds maximum allowed size of {MAX_FILE_SIZE_BYTES // (1024 * 1024)} MB."
         )
 
-    # ── 3. MIME TYPE VALIDATION (magic-byte sniffing) ────────────────────────
     try:
         detected_mime = magic.from_buffer(contents, mime=True)
     except Exception:
@@ -257,11 +240,9 @@ async def upload_log(
             detail=f"File content type '{detected_mime}' is not permitted. Only log/text files are accepted."
         )
 
-    # ── 4. SAFE FILENAME (prevent path traversal) ────────────────────────────
     safe_name = os.path.basename(file.filename).replace("..", "").replace("/", "").replace("\\", "")
     temp_path = os.path.join(UPLOAD_DIR, safe_name)
 
-    # ── 5. WRITE & ANALYZE ───────────────────────────────────────────────────
     try:
         with open(temp_path, "wb") as buffer:
             buffer.write(contents)
@@ -280,19 +261,118 @@ async def upload_log(
     finally:
         if os.path.exists(temp_path):
             os.remove(temp_path)
-@app.get("/analyze-process")
-async def analyze_process():
+
+@app.post("/stream-analyze")
+async def stream_analyze(
+    file: UploadFile = File(...),
+    threshold: str = Form("60"),
+    current_user: str = Depends(get_current_user),
+):
+    # Read file content immediately
+    contents = await file.read()
+    
+    if len(contents) == 0:
+        async def empty_gen():
+            yield f"data: {json.dumps({'type': 'error', 'message': 'File is empty'})}\n\n"
+        return StreamingResponse(empty_gen(), media_type="text/event-stream")
+    
+    # Save to temp file
+    temp_path = os.path.join(UPLOAD_DIR, f"temp_{datetime.now().timestamp()}_{file.filename}")
+    with open(temp_path, "wb") as buffer:
+        buffer.write(contents)
+    
     async def event_generator():
-        yield f"data: {json.dumps({'percent':10, 'message':'Starting analysis...'})}\n\n"
-        await asyncio.sleep(0.5)
-        yield f"data:{json.dumps({'percent':50, 'message': 'analyzing logs..'})}\n\n"
-        await asyncio.sleep(0.5)
-        yield f"data:{json.dumps({'percent':100, 'message': 'Analysis completed.'})}\n\n"
+        try:
+            yield f"data: {json.dumps({'type': 'progress', 'percent': 0, 'message': 'Starting forensic analysis...'})}\n\n"
+            await asyncio.sleep(0.1)
+            
+            numeric_threshold = int(threshold)
+            
+            # Read and process the file
+            with open(temp_path, 'r', encoding='utf-8', errors='ignore') as f:
+                lines = f.readlines()
+            
+            total_lines = len(lines)
+            last_time = None
+            incidents = []
+            
+            for idx, line in enumerate(lines):
+                percent = int((idx + 1) / total_lines * 100)
+                if idx % 20 == 0:
+                    yield f"data: {json.dumps({'type': 'progress', 'percent': percent, 'message': f'Processing line {idx + 1} of {total_lines}...'})}\n\n"
+                
+                # Extract timestamp
+                import re
+                match = re.search(r'(\d{4}[-/.]\d{2}[-/.]\d{2}[T ]\d{2}:\d{2}:\d{2})', line)
+                if match:
+                    try:
+                        date_str = match.group(1).replace('/', '-').replace('.', '-')
+                        if 'T' in date_str:
+                            current_time = datetime.strptime(date_str[:19], '%Y-%m-%dT%H:%M:%S')
+                        else:
+                            current_time = datetime.strptime(date_str[:19], '%Y-%m-%d %H:%M:%S')
+                    except:
+                        continue
+                    
+                    if last_time:
+                        gap = (current_time - last_time).total_seconds()
+                        if gap > numeric_threshold:
+                            if gap > 3600:
+                                reason = "Extended System Blackout / High Risk Log Erasure"
+                                severity = "CRITICAL"
+                                anomaly_type = "critical"
+                            elif gap > 600:
+                                reason = "Significant Data Void / Potential Tampering"
+                                severity = "CRITICAL"
+                                anomaly_type = "timeVoid"
+                            elif gap > 300:
+                                reason = "Service Interruption Detected"
+                                severity = "WARNING"
+                                anomaly_type = "logShaving"
+                            else:
+                                reason = "Minor Sequential Lag"
+                                severity = "WARNING"
+                                anomaly_type = "timeVoid"
+                            
+                            incident = {
+                                "type": "anomaly",
+                                "anomalyType": anomaly_type,
+                                "start": last_time.strftime('%Y-%m-%d %H:%M:%S'),
+                                "end": current_time.strftime('%Y-%m-%d %H:%M:%S'),
+                                "duration": int(gap),
+                                "severity": severity,
+                                "details": reason
+                            }
+                            incidents.append(incident)
+                            yield f"data: {json.dumps(incident)}\n\n"
+                            await asyncio.sleep(0.05)
+                    
+                    last_time = current_time
+            
+            # Calculate score
+            score = 100.0
+            if incidents:
+                total_gap = sum(i['duration'] for i in incidents)
+                score = max(0, 100 - (total_gap / 3600) * 10)
+            
+            yield f"data: {json.dumps({'type': 'progress', 'percent': 100, 'message': 'Analysis complete'})}\n\n"
+            yield f"data: {json.dumps({'type': 'summary', 'total_gaps': len(incidents), 'integrity_score': round(score, 2), 'incidents': incidents})}\n\n"
+            
+        except Exception as e:
+            logger.error(f"Streaming error: {e}")
+            yield f"data: {json.dumps({'type': 'error', 'message': str(e)})}\n\n"
+        finally:
+            if os.path.exists(temp_path):
+                os.remove(temp_path)
+    
     return StreamingResponse(
-            event_generator(),
-            media_type="text/event-stream"
-)
-
+        event_generator(),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+        }
+    )
 if __name__ == "__main__":
     import uvicorn
-    uvicorn.run(app, host="127.0.0.1", port=8000)
+    uvicorn.run(app, host="127.0.0.1", port=8000)
\ No newline at end of file
diff --git a/styles/streaming.css b/styles/streaming.css
new file mode 100644
index 0000000..fab74af
--- /dev/null
+++ b/styles/streaming.css
@@ -0,0 +1,399 @@
+/* Real-time Streaming Styles - Compact & Responsive */
+
+/* CSS Variables */
+:root {
+  --bg-card: rgba(15, 23, 42, 0.6);
+  --border-color: rgba(59, 130, 246, 0.2);
+  --text-primary: #e2e8f0;
+  --text-muted: #64748b;
+  --chip-bg: #1e293b;
+  --chip-border: #334155;
+  --chip-text: #94a3b8;
+  --chip-hover: #334155;
+  --progress-bg: #0f172a;
+  --progress-border: #1e293b;
+  --btn-secondary-bg: #334155;
+  --btn-secondary-text: #94a3b8;
+  --btn-secondary-hover: #475569;
+  --log-bg: #0f172a;
+  --log-border: #1e293b;
+  --log-line-hover: #1e293b;
+  --stat-bg: #1e293b;
+}
+
+html[data-theme="light"] {
+  --bg-card: rgba(248, 250, 252, 0.95);
+  --border-color: #e2e8f0;
+  --text-primary: #1e293b;
+  --text-muted: #64748b;
+  --chip-bg: #f1f5f9;
+  --chip-border: #cbd5e1;
+  --chip-text: #64748b;
+  --chip-hover: #e2e8f0;
+  --progress-bg: #f8fafc;
+  --progress-border: #e2e8f0;
+  --btn-secondary-bg: #e2e8f0;
+  --btn-secondary-text: #475569;
+  --btn-secondary-hover: #cbd5e1;
+  --log-bg: #f8fafc;
+  --log-border: #e2e8f0;
+  --log-line-hover: #f1f5f9;
+  --stat-bg: #f1f5f9;
+}
+
+/* Main Container */
+.streaming-container {
+  background: var(--bg-card);
+  backdrop-filter: blur(8px);
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  padding: 16px;
+  margin-top: 20px;
+}
+
+/* Header */
+.streaming-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.streaming-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.streaming-title i {
+  color: #3b82f6;
+  font-size: 18px;
+}
+
+.streaming-title h3 {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 0;
+}
+
+.streaming-title p {
+  font-size: 9px;
+  color: var(--text-muted);
+  margin: 2px 0 0 0;
+}
+
+/* Buttons */
+.streaming-controls {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.streaming-btn {
+  padding: 5px 14px;
+  border-radius: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.streaming-btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.streaming-btn-primary:hover {
+  background: #2563eb;
+  transform: translateY(-1px);
+}
+
+.streaming-btn-warning {
+  background: #f59e0b;
+  color: white;
+}
+
+.streaming-btn-warning:hover {
+  background: #d97706;
+}
+
+.streaming-btn-danger {
+  background: #ef4444;
+  color: white;
+}
+
+.streaming-btn-danger:hover {
+  background: #dc2626;
+}
+
+.streaming-btn-secondary {
+  background: var(--btn-secondary-bg);
+  color: var(--btn-secondary-text);
+}
+
+.streaming-btn-secondary:hover {
+  background: var(--btn-secondary-hover);
+  color: white;
+}
+
+.streaming-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Filter Row - Compact */
+.streaming-filter-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.filter-group {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.filter-chip {
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 9px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: var(--chip-bg);
+  border: 1px solid var(--chip-border);
+  color: var(--chip-text);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.filter-chip.active {
+  background: #3b82f6;
+  border-color: #3b82f6;
+  color: white;
+}
+
+.filter-chip:hover:not(.active) {
+  background: var(--chip-hover);
+}
+
+.stats-mini {
+  font-size: 9px;
+  color: var(--text-muted);
+  background: var(--chip-bg);
+  padding: 4px 10px;
+  border-radius: 20px;
+}
+
+/* Progress Bar - Compact */
+.streaming-progress-compact {
+  margin-bottom: 12px;
+}
+
+.progress-header-compact {
+  display: flex;
+  justify-content: space-between;
+  font-size: 9px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.progress-bar-bg-compact {
+  background: var(--chip-border);
+  border-radius: 4px;
+  height: 4px;
+  overflow: hidden;
+}
+
+.progress-bar-fill-compact {
+  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+/* Stats Row - Compact Cards */
+.stats-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+
+.stat-item-compact {
+  flex: 1;
+  min-width: 80px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--stat-bg);
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--chip-border);
+}
+
+.stat-icon {
+  font-size: 18px;
+}
+
+.stat-label-compact {
+  font-size: 8px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: block;
+  margin-bottom: 2px;
+}
+
+.stat-value-compact {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.stat-value-compact.critical { color: #ef4444; }
+.stat-value-compact.time-void { color: #f59e0b; }
+.stat-value-compact.shaving { color: #f97316; }
+.stat-value-compact.visible { color: #3b82f6; }
+
+/* Log Container */
+.streaming-log-container {
+  background: var(--log-bg);
+  border-radius: 8px;
+  border: 1px solid var(--log-border);
+  height: 280px;
+  overflow-y: auto;
+  font-family: 'Courier New', 'Fira Code', monospace;
+  font-size: 10px;
+}
+
+.streaming-log-line {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--log-border);
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+  transition: background 0.1s;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.streaming-log-line:hover {
+  background: var(--log-line-hover);
+}
+
+/* Anomaly Color Coding */
+.anomaly-time-void {
+  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), transparent);
+  border-left: 3px solid #f59e0b;
+}
+
+.anomaly-log-shaving {
+  background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), transparent);
+  border-left: 3px solid #ef4444;
+}
+
+.anomaly-critical {
+  background: linear-gradient(90deg, rgba(220, 38, 38, 0.18), transparent);
+  border-left: 3px solid #dc2626;
+  font-weight: 600;
+}
+
+/* Info Message */
+.streaming-info-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 100%;
+  color: var(--text-muted);
+  text-align: center;
+  padding: 20px;
+  font-size: 11px;
+}
+
+.streaming-info-message i {
+  font-size: 28px;
+  color: #3b82f6;
+  opacity: 0.5;
+}
+
+/* Scrollbar */
+.streaming-log-container::-webkit-scrollbar {
+  width: 4px;
+}
+
+.streaming-log-container::-webkit-scrollbar-track {
+  background: var(--progress-bg);
+}
+
+.streaming-log-container::-webkit-scrollbar-thumb {
+  background: var(--chip-border);
+  border-radius: 2px;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .streaming-container {
+    padding: 12px;
+  }
+  
+  .streaming-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .streaming-controls {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  
+  .stats-row {
+    flex-direction: column;
+  }
+  
+  .stat-item-compact {
+    width: 100%;
+  }
+  
+  .filter-group {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  
+  .streaming-filter-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .streaming-log-container {
+    height: 200px;
+  }
+}
+
+/* Tablet Responsive */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .stat-item-compact {
+    min-width: 70px;
+  }
+  
+  .stat-value-compact {
+    font-size: 14px;
+  }
+}
\ No newline at end of file
diff --git a/test.log b/test.log
new file mode 100644
index 0000000..adeecc8
--- /dev/null
+++ b/test.log
@@ -0,0 +1,9 @@
+2026-06-01 10:00:00 [INFO] System started
+2026-06-01 10:05:00 [INFO] Service running
+2026-06-01 10:10:00 [INFO] Health check passed
+2026-06-01 11:30:00 [ERROR] Connection timeout (80 minute gap - ANOMALY!)
+2026-06-01 11:35:00 [WARN] Reconnecting...
+2026-06-01 11:40:00 [INFO] Reconnected
+2026-06-01 14:00:00 [CRITICAL] System blackout detected (140 minute gap - CRITICAL!)
+2026-06-01 14:05:00 [INFO] System recovering
+2026-06-01 16:00:00 [INFO] End of log (115 minute gap - ANOMALY!)
\ No newline at end of file

From 1c807ef184c1022f5d4daf9361de317fe282a1c7 Mon Sep 17 00:00:00 2001
From: Saranyadharani <saranyadharani84@gmail.com>
Date: Mon, 1 Jun 2026 21:23:27 +0530
Subject: [PATCH 2/2] feat: add interactive timeline heatmap with drill-down
 visualization

---
 html/dashboard.html    |  47 +++++-
 js/dashboard.js        |  19 ++-
 js/timelineExplorer.js | 333 +++++++++++++++++++++++++++++++++++++++++
 js/visualization.js    | 306 +++++++++++++++++++++++++++++++++++++
 main.py                |   1 +
 styles/heatmap.css     | 160 ++++++++++++++++++++
 6 files changed, 859 insertions(+), 7 deletions(-)
 create mode 100644 js/timelineExplorer.js
 create mode 100644 js/visualization.js
 create mode 100644 styles/heatmap.css

diff --git a/html/dashboard.html b/html/dashboard.html
index 6f36688..b1937b4 100644
--- a/html/dashboard.html
+++ b/html/dashboard.html
@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
     <link rel="stylesheet" href="../styles/dashboard.css" />
     <link rel="stylesheet" href="../styles/streaming.css" />
+    <link rel="stylesheet" href="../styles/heatmap.css" />
     <style>
       #scrollTopBtn {
         position: fixed;
@@ -223,7 +224,7 @@ <h4 class="text-[10px] font-bold uppercase text-blue-500 tracking-widest flex it
                 </div>
               </div>
 
-              <!-- Real-time Streaming Section - Compact Redesign -->
+              <!-- Real-time Streaming Section -->
               <div class="streaming-container">
                 <div class="streaming-header">
                   <div class="streaming-title">
@@ -241,7 +242,7 @@ <h3>LIVE FORENSIC STREAM</h3>
                   </div>
                 </div>
 
-                <!-- Compact Filter Row -->
+                <!-- Filter Row -->
                 <div class="streaming-filter-row">
                   <div class="filter-group">
                     <button class="filter-chip active" data-filter="all">ALL</button>
@@ -254,7 +255,7 @@ <h3>LIVE FORENSIC STREAM</h3>
                   </div>
                 </div>
 
-                <!-- Compact Progress Bar -->
+                <!-- Progress Bar -->
                 <div class="streaming-progress-compact">
                   <div class="progress-header-compact">
                     <span id="streamProgressMessage">Ready</span>
@@ -265,7 +266,7 @@ <h3>LIVE FORENSIC STREAM</h3>
                   </div>
                 </div>
 
-                <!-- Compact Stats Row -->
+                <!-- Stats Row -->
                 <div class="stats-row">
                   <div class="stat-item-compact">
                     <span class="stat-icon">📊</span>
@@ -328,6 +329,43 @@ <h4 class="text-[10px] font-bold uppercase text-slate-500 tracking-widest">Foren
               </div>
             </div>
           </div>
+
+          <!-- Forensic Heatmap Section -->
+          <div class="forensic-heatmap">
+            <div class="forensic-heatmap-header">
+              <div class="forensic-heatmap-title">
+                <i class="fas fa-chart-line"></i>
+                <div>
+                  <h3>ANOMALY PATTERN ANALYSIS</h3>
+                  <p>Heatmap visualization - click any cell to drill down</p>
+                </div>
+              </div>
+              <div class="heatmap-controls">
+                <button id="heatmapHourlyBtn" class="heatmap-btn active">Hourly</button>
+                <button id="heatmapDailyBtn" class="heatmap-btn">Daily</button>
+                <button id="heatmapWeeklyBtn" class="heatmap-btn">Weekly</button>
+              </div>
+            </div>
+            
+            <div id="hourlyView">
+              <div id="hourlyHeatmap"></div>
+            </div>
+            
+            <div id="dailyView" class="hidden">
+              <div id="dailyHeatmap"></div>
+            </div>
+            
+            <div id="weeklyView" class="hidden">
+              <div id="weeklyHeatmap"></div>
+            </div>
+            
+            <div class="heatmap-legend">
+              <div class="legend-item"><div class="legend-color low"></div><span>Low</span></div>
+              <div class="legend-item"><div class="legend-color medium"></div><span>Medium</span></div>
+              <div class="legend-item"><div class="legend-color high"></div><span>High</span></div>
+              <div class="legend-item"><div class="legend-color critical"></div><span>Critical</span></div>
+            </div>
+          </div>
         </div>
 
         <div id="view-registry" class="tab-view hidden glass-card overflow-hidden">
@@ -491,6 +529,7 @@ <h2 class="text-white text-lg font-bold mb-4">Are you sure you want to remove yo
     <script src="../js/theme.js"></script>
     <script src="../js/streaming.js"></script>
     <script src="../js/anomalyFilters.js"></script>
+    <script src="../js/visualization.js"></script>
 
     <!-- Preview Script -->
     <script>
diff --git a/js/dashboard.js b/js/dashboard.js
index a29d236..730ea12 100644
--- a/js/dashboard.js
+++ b/js/dashboard.js
@@ -397,7 +397,7 @@ function renderCaseHistory() {
                 <button onclick="loadCase('${c.id}')" class="text-blue-500 hover:text-blue-400 mr-4 text-[10px] font-bold uppercase">Load</button>
                 <button onclick="deleteCase('${c.id}')" class="text-slate-600 hover:text-red-500"><i class="fas fa-trash-can"></i></button>
             </td>
-        </tr>`,
+        </td>`,
     )
     .join("");
 }
@@ -742,8 +742,13 @@ function switchTab(tabId) {
   }
 
   if (tabId === "history") renderCaseHistory();
-  if (tabId === "dashboard" && lastScanResults)
+  if (tabId === "dashboard" && lastScanResults) {
     setTimeout(() => updateChart(lastScanResults.incidents), 50);
+    // Initialize heatmap when switching to dashboard
+    if (typeof renderHeatmap === 'function' && lastScanResults.incidents) {
+      setTimeout(() => renderHeatmap(lastScanResults.incidents), 100);
+    }
+  }
 }
 
 function updateCaseBadge() {
@@ -848,6 +853,11 @@ function renderResults(data) {
   document.getElementById("gapCount").innerText = data.total_gaps;
   updateRegistryTable(data.incidents);
   updateChart(data.incidents);
+  
+  // Initialize heatmap after rendering results
+  if (typeof renderHeatmap === 'function' && data.incidents) {
+    setTimeout(() => renderHeatmap(data.incidents), 100);
+  }
 }
 
 function updateRegistryTable(incidents) {
@@ -983,4 +993,7 @@ function setupMobileSidebar() {
       }
     });
   });
-}
\ No newline at end of file
+}
+
+// ─── HEATMAP INITIALIZATION ──────────────────────────────────────────────────
+// This will be called from renderResults after analysis completes
\ No newline at end of file
diff --git a/js/timelineExplorer.js b/js/timelineExplorer.js
new file mode 100644
index 0000000..811ac30
--- /dev/null
+++ b/js/timelineExplorer.js
@@ -0,0 +1,333 @@
+/**
+ * Timeline Explorer - Drill-down heatmap with pattern detection
+ */
+
+let timelineExplorer = {
+    zoomLevel: 'day',
+    selectedDateRange: null,
+    patternDetected: false,
+    heatmapData: null
+};
+
+function initTimelineExplorer(incidents) {
+    timelineExplorer.heatmapData = processHeatmapData(incidents);
+    renderHeatmap(timelineExplorer.heatmapData);
+    setupZoomControls();
+    setupDateRangePicker();
+}
+
+function processHeatmapData(incidents) {
+    if (!incidents || incidents.length === 0) return [];
+    
+    // Group incidents by hour of day
+    const hourlyData = {};
+    const dailyData = {};
+    const weeklyData = {};
+    
+    incidents.forEach(incident => {
+        const date = new Date(incident.start);
+        const hour = date.getHours();
+        const day = date.getDay();
+        const week = getWeekNumber(date);
+        
+        if (!hourlyData[hour]) hourlyData[hour] = { count: 0, totalDuration: 0 };
+        hourlyData[hour].count++;
+        hourlyData[hour].totalDuration += incident.duration;
+        
+        if (!dailyData[day]) dailyData[day] = { count: 0, totalDuration: 0 };
+        dailyData[day].count++;
+        dailyData[day].totalDuration += incident.duration;
+        
+        const weekKey = `${date.getFullYear()}-W${week}`;
+        if (!weeklyData[weekKey]) weeklyData[weekKey] = { count: 0, totalDuration: 0, week: week, year: date.getFullYear() };
+        weeklyData[weekKey].count++;
+        weeklyData[weekKey].totalDuration += incident.duration;
+    });
+    
+    return { hourly: hourlyData, daily: dailyData, weekly: weeklyData };
+}
+
+function renderHeatmap(data) {
+    if (!data) return;
+    
+    // Render hourly heatmap
+    renderHourlyHeatmap(data.hourly);
+    
+    // Render daily heatmap
+    renderDailyHeatmap(data.daily);
+    
+    // Render weekly heatmap
+    renderWeeklyHeatmap(data.weekly);
+}
+
+function renderHourlyHeatmap(hourlyData) {
+    const container = document.getElementById('hourlyHeatmap');
+    if (!container) return;
+    
+    const hours = Array.from({ length: 24 }, (_, i) => i);
+    const maxCount = Math.max(...Object.values(hourlyData).map(d => d.count), 1);
+    
+    let html = '<div class="heatmap-grid" style="display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px;">';
+    
+    hours.forEach(hour => {
+        const data = hourlyData[hour] || { count: 0, totalDuration: 0 };
+        const intensity = Math.min(100, (data.count / maxCount) * 100);
+        const color = getHeatmapColor(intensity);
+        
+        html += `
+            <div class="heatmap-cell" 
+                 data-hour="${hour}"
+                 data-count="${data.count}"
+                 data-duration="${data.totalDuration}"
+                 style="background: ${color}; aspect-ratio: 1; border-radius: 4px; cursor: pointer;"
+                 onmouseenter="showHeatmapTooltip(this, '${hour}:00', ${data.count}, ${data.totalDuration})"
+                 onclick="drillDownByHour(${hour})">
+                <span style="font-size: 8px; color: ${intensity > 50 ? 'white' : '#64748b'}; display: flex; align-items: center; justify-content: center; height: 100%;">
+                    ${data.count > 0 ? data.count : ''}
+                </span>
+            </div>
+        `;
+    });
+    
+    html += '</div><div class="heatmap-labels mt-2" style="display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px;">';
+    hours.forEach(hour => {
+        html += `<div style="font-size: 8px; text-align: center; color: #64748b;">${hour}</div>`;
+    });
+    html += '</div>';
+    
+    container.innerHTML = html;
+}
+
+function renderDailyHeatmap(dailyData) {
+    const container = document.getElementById('dailyHeatmap');
+    if (!container) return;
+    
+    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    const maxCount = Math.max(...Object.values(dailyData).map(d => d.count), 1);
+    
+    let html = '<div class="heatmap-grid" style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;">';
+    
+    days.forEach((day, index) => {
+        const data = dailyData[index] || { count: 0, totalDuration: 0 };
+        const intensity = Math.min(100, (data.count / maxCount) * 100);
+        const color = getHeatmapColor(intensity);
+        
+        html += `
+            <div class="heatmap-cell" 
+                 data-day="${index}"
+                 data-count="${data.count}"
+                 data-duration="${data.totalDuration}"
+                 style="background: ${color}; padding: 8px; border-radius: 6px; text-align: center; cursor: pointer;"
+                 onmouseenter="showHeatmapTooltip(this, '${day}', ${data.count}, ${data.totalDuration})"
+                 onclick="drillDownByDay(${index})">
+                <div style="font-size: 10px; font-weight: 600; color: ${intensity > 50 ? 'white' : '#e2e8f0'};">${day.slice(0, 3)}</div>
+                <div style="font-size: 14px; font-weight: bold; color: ${intensity > 50 ? 'white' : '#e2e8f0'};">${data.count}</div>
+            </div>
+        `;
+    });
+    
+    html += '</div>';
+    container.innerHTML = html;
+}
+
+function renderWeeklyHeatmap(weeklyData) {
+    const container = document.getElementById('weeklyHeatmap');
+    if (!container) return;
+    
+    const weeks = Object.keys(weeklyData).sort();
+    const maxCount = Math.max(...Object.values(weeklyData).map(d => d.count), 1);
+    
+    let html = '<div class="heatmap-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 4px;">';
+    
+    weeks.forEach(weekKey => {
+        const data = weeklyData[weekKey];
+        const intensity = Math.min(100, (data.count / maxCount) * 100);
+        const color = getHeatmapColor(intensity);
+        
+        html += `
+            <div class="heatmap-cell" 
+                 data-week="${weekKey}"
+                 data-count="${data.count}"
+                 data-duration="${data.totalDuration}"
+                 style="background: ${color}; padding: 8px; border-radius: 6px; text-align: center; cursor: pointer;"
+                 onmouseenter="showHeatmapTooltip(this, 'Week ${data.week}, ${data.year}', ${data.count}, ${data.totalDuration})"
+                 onclick="drillDownByWeek('${weekKey}')">
+                <div style="font-size: 10px; font-weight: 600; color: ${intensity > 50 ? 'white' : '#e2e8f0'};">W${data.week}</div>
+                <div style="font-size: 14px; font-weight: bold; color: ${intensity > 50 ? 'white' : '#e2e8f0'};">${data.count}</div>
+            </div>
+        `;
+    });
+    
+    html += '</div>';
+    container.innerHTML = html;
+}
+
+function getHeatmapColor(intensity) {
+    if (intensity < 20) return 'rgba(59, 130, 246, 0.1)';
+    if (intensity < 40) return 'rgba(59, 130, 246, 0.3)';
+    if (intensity < 60) return 'rgba(245, 158, 11, 0.5)';
+    if (intensity < 80) return 'rgba(239, 68, 68, 0.7)';
+    return 'rgba(220, 38, 38, 0.9)';
+}
+
+function showHeatmapTooltip(element, label, count, duration) {
+    // Remove existing tooltip
+    const existingTooltip = document.getElementById('heatmapTooltip');
+    if (existingTooltip) existingTooltip.remove();
+    
+    const tooltip = document.createElement('div');
+    tooltip.id = 'heatmapTooltip';
+    tooltip.className = 'fixed z-50 bg-slate-900 border border-slate-700 rounded-lg p-2 text-xs';
+    tooltip.style.left = (element.getBoundingClientRect().left + window.scrollX) + 'px';
+    tooltip.style.top = (element.getBoundingClientRect().top + window.scrollY - 30) + 'px';
+    tooltip.innerHTML = `
+        <div class="font-bold text-blue-400">${label}</div>
+        <div>Anomalies: ${count}</div>
+        <div>Total Duration: ${Math.floor(duration / 60)}m ${duration % 60}s</div>
+    `;
+    
+    document.body.appendChild(tooltip);
+    
+    element.addEventListener('mouseleave', () => {
+        const t = document.getElementById('heatmapTooltip');
+        if (t) t.remove();
+    }, { once: true });
+}
+
+function drillDownByHour(hour) {
+    if (!window.lastScanResults) return;
+    
+    const filteredIncidents = window.lastScanResults.incidents.filter(incident => {
+        const incHour = new Date(incident.start).getHours();
+        return incHour === hour;
+    });
+    
+    showFilteredResults(filteredIncidents, `Hour: ${hour}:00 - ${hour + 1}:00`);
+}
+
+function drillDownByDay(dayIndex) {
+    if (!window.lastScanResults) return;
+    
+    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    const filteredIncidents = window.lastScanResults.incidents.filter(incident => {
+        const incDay = new Date(incident.start).getDay();
+        return incDay === dayIndex;
+    });
+    
+    showFilteredResults(filteredIncidents, `Day: ${days[dayIndex]}`);
+}
+
+function drillDownByWeek(weekKey) {
+    if (!window.lastScanResults) return;
+    
+    const [year, weekNum] = weekKey.split('-W');
+    const filteredIncidents = window.lastScanResults.incidents.filter(incident => {
+        const incDate = new Date(incident.start);
+        const incWeek = getWeekNumber(incDate);
+        return incWeek === parseInt(weekNum) && incDate.getFullYear() === parseInt(year);
+    });
+    
+    showFilteredResults(filteredIncidents, `Week ${weekNum}, ${year}`);
+}
+
+function getWeekNumber(date) {
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() + 3 - (d.getDay() + 6) % 7);
+    const week1 = new Date(d.getFullYear(), 0, 4);
+    return 1 + Math.round(((d - week1) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
+}
+
+function showFilteredResults(incidents, title) {
+    const modal = document.getElementById('drilldownModal');
+    if (!modal) {
+        createDrilldownModal();
+    }
+    
+    const modalTitle = document.getElementById('drilldownTitle');
+    const modalBody = document.getElementById('drilldownBody');
+    
+    if (modalTitle) modalTitle.textContent = title;
+    
+    if (modalBody) {
+        if (incidents.length === 0) {
+            modalBody.innerHTML = '<div class="text-center text-slate-500 py-8">No anomalies found in this time range</div>';
+        } else {
+            modalBody.innerHTML = `
+                <div class="space-y-2 max-h-96 overflow-y-auto">
+                    ${incidents.map((inc, i) => `
+                        <div class="bg-slate-800 rounded-lg p-3 border-l-4 ${inc.severity === 'CRITICAL' ? 'border-red-500' : 'border-yellow-500'}">
+                            <div class="flex justify-between items-start">
+                                <div>
+                                    <span class="text-xs font-bold ${inc.severity === 'CRITICAL' ? 'text-red-400' : 'text-yellow-400'}">#${i + 1}</span>
+                                    <span class="text-xs text-slate-300 ml-2">${inc.start} → ${inc.end}</span>
+                                </div>
+                                <span class="text-xs font-bold text-white">${inc.duration}s</span>
+                            </div>
+                            <p class="text-[10px] text-slate-400 mt-1">${inc.details || 'No additional details'}</p>
+                        </div>
+                    `).join('')}
+                </div>
+            `;
+        }
+    }
+    
+    const modalEl = document.getElementById('drilldownModal');
+    if (modalEl) {
+        modalEl.classList.remove('hidden');
+        modalEl.classList.add('flex');
+    }
+}
+
+function createDrilldownModal() {
+    const modalHtml = `
+        <div id="drilldownModal" class="fixed inset-0 hidden items-center justify-center bg-black/80 backdrop-blur-md z-[400]" onclick="closeDrilldownModal()">
+            <div class="bg-slate-900 rounded-xl max-w-2xl w-full max-h-[80vh] overflow-hidden border border-slate-700" onclick="event.stopPropagation()">
+                <div class="flex justify-between items-center p-4 border-b border-slate-700">
+                    <h3 id="drilldownTitle" class="text-sm font-bold text-white">Drilldown Results</h3>
+                    <button onclick="closeDrilldownModal()" class="text-slate-400 hover:text-white transition-colors">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div id="drilldownBody" class="p-4 overflow-y-auto" style="max-height: 60vh;">
+                    <div class="text-center text-slate-500 py-8">Loading...</div>
+                </div>
+                <div class="p-4 border-t border-slate-700">
+                    <button onclick="closeDrilldownModal()" class="w-full py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm font-bold transition-colors">Close</button>
+                </div>
+            </div>
+        </div>
+    `;
+    
+    document.body.insertAdjacentHTML('beforeend', modalHtml);
+}
+
+function closeDrilldownModal() {
+    const modal = document.getElementById('drilldownModal');
+    if (modal) {
+        modal.classList.add('hidden');
+        modal.classList.remove('flex');
+    }
+}
+
+function setupZoomControls() {
+    const zoomBtns = document.querySelectorAll('.zoom-btn');
+    zoomBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const level = btn.dataset.zoom;
+            timelineExplorer.zoomLevel = level;
+            renderHeatmap(timelineExplorer.heatmapData);
+        });
+    });
+}
+
+function setupDateRangePicker() {
+    // To be implemented - date range picker for filtering
+}
+
+// Initialize when dashboard loads
+document.addEventListener('DOMContentLoaded', () => {
+    if (window.lastScanResults && window.lastScanResults.incidents) {
+        initTimelineExplorer(window.lastScanResults.incidents);
+    }
+});
\ No newline at end of file
diff --git a/js/visualization.js b/js/visualization.js
new file mode 100644
index 0000000..9baa1fa
--- /dev/null
+++ b/js/visualization.js
@@ -0,0 +1,306 @@
+// Clean Heatmap Visualization
+let currentHeatmapData = null;
+
+function renderHeatmap(incidents) {
+    if (!incidents || incidents.length === 0) return;
+    
+    currentHeatmapData = incidents;
+    
+    // Process data
+    const hourlyData = processHourlyData(incidents);
+    const dailyData = processDailyData(incidents);
+    const weeklyData = processWeeklyData(incidents);
+    
+    // Render hourly view (default)
+    renderHourlyView(hourlyData);
+    
+    // Setup controls
+    setupHeatmapControls(hourlyData, dailyData, weeklyData);
+}
+
+function processHourlyData(incidents) {
+    const hourly = Array(24).fill(0);
+    incidents.forEach(inc => {
+        const hour = new Date(inc.start).getHours();
+        hourly[hour]++;
+    });
+    const maxCount = Math.max(...hourly, 1);
+    return { data: hourly, max: maxCount };
+}
+
+function processDailyData(incidents) {
+    const daily = Array(7).fill(0);
+    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    incidents.forEach(inc => {
+        const day = new Date(inc.start).getDay();
+        daily[day]++;
+    });
+    const maxCount = Math.max(...daily, 1);
+    return { data: daily, labels: days, max: maxCount };
+}
+
+function processWeeklyData(incidents) {
+    const weekly = {};
+    incidents.forEach(inc => {
+        const date = new Date(inc.start);
+        const weekNum = getWeekNumber(date);
+        const year = date.getFullYear();
+        const key = `${year}-W${weekNum}`;
+        weekly[key] = (weekly[key] || 0) + 1;
+    });
+    return weekly;
+}
+
+function getWeekNumber(date) {
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() + 3 - (d.getDay() + 6) % 7);
+    const week1 = new Date(d.getFullYear(), 0, 4);
+    return 1 + Math.round(((d - week1) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
+}
+
+function getHeatmapColor(count, max) {
+    const intensity = count / max;
+    if (intensity === 0) return '#1e293b';
+    if (intensity < 0.25) return '#3b82f6';
+    if (intensity < 0.5) return '#f59e0b';
+    if (intensity < 0.75) return '#ef4444';
+    return '#dc2626';
+}
+
+function getTextColor(count, max) {
+    const intensity = count / max;
+    return intensity > 0.5 ? 'white' : '#94a3b8';
+}
+
+function renderHourlyView(hourlyData) {
+    const container = document.getElementById('hourlyHeatmap');
+    if (!container) return;
+    
+    const hours = Array.from({ length: 24 }, (_, i) => i);
+    let html = '<div class="heatmap-grid heatmap-hourly">';
+    
+    hours.forEach(hour => {
+        const count = hourlyData.data[hour];
+        const bgColor = getHeatmapColor(count, hourlyData.max);
+        const textColor = getTextColor(count, hourlyData.max);
+        html += `
+            <div class="heatmap-cell" 
+                 style="background: ${bgColor}; color: ${textColor};"
+                 onmouseenter="showHeatmapTooltip(this, '${hour}:00', ${count})"
+                 onclick="drillDownByHour(${hour})">
+                ${count > 0 ? count : ''}
+            </div>
+        `;
+    });
+    
+    html += '</div><div class="heatmap-grid heatmap-hourly" style="margin-top: 4px;">';
+    hours.forEach(hour => {
+        html += `<div class="heatmap-label">${hour}</div>`;
+    });
+    html += '</div>';
+    
+    container.innerHTML = html;
+}
+
+function renderDailyView(dailyData) {
+    const container = document.getElementById('dailyHeatmap');
+    if (!container) return;
+    
+    let html = '<div class="heatmap-grid heatmap-daily">';
+    
+    dailyData.labels.forEach((day, index) => {
+        const count = dailyData.data[index];
+        const bgColor = getHeatmapColor(count, dailyData.max);
+        const textColor = getTextColor(count, dailyData.max);
+        html += `
+            <div class="heatmap-cell" 
+                 style="background: ${bgColor}; color: ${textColor}; padding: 12px;"
+                 onmouseenter="showHeatmapTooltip(this, '${day}', ${count})"
+                 onclick="drillDownByDay(${index})">
+                <div style="font-size: 11px; font-weight: 600;">${day}</div>
+                <div style="font-size: 14px; font-weight: 700;">${count}</div>
+            </div>
+        `;
+    });
+    
+    html += '</div>';
+    container.innerHTML = html;
+}
+
+function renderWeeklyView(weeklyData) {
+    const container = document.getElementById('weeklyHeatmap');
+    if (!container) return;
+    
+    const weeks = Object.keys(weeklyData).sort();
+    const maxCount = Math.max(...Object.values(weeklyData), 1);
+    
+    let html = '<div class="heatmap-grid heatmap-weekly">';
+    
+    weeks.forEach(week => {
+        const count = weeklyData[week];
+        const bgColor = getHeatmapColor(count, maxCount);
+        const textColor = getTextColor(count, maxCount);
+        html += `
+            <div class="heatmap-cell" 
+                 style="background: ${bgColor}; color: ${textColor}; padding: 8px;"
+                 onmouseenter="showHeatmapTooltip(this, '${week}', ${count})"
+                 onclick="drillDownByWeek('${week}')">
+                <div style="font-size: 10px; font-weight: 600;">${week}</div>
+                <div style="font-size: 14px; font-weight: 700;">${count}</div>
+            </div>
+        `;
+    });
+    
+    html += '</div>';
+    container.innerHTML = html;
+}
+
+function setupHeatmapControls(hourlyData, dailyData, weeklyData) {
+    const btnHourly = document.getElementById('heatmapHourlyBtn');
+    const btnDaily = document.getElementById('heatmapDailyBtn');
+    const btnWeekly = document.getElementById('heatmapWeeklyBtn');
+    
+    if (btnHourly) {
+        btnHourly.onclick = () => {
+            document.getElementById('hourlyView').classList.remove('hidden');
+            document.getElementById('dailyView').classList.add('hidden');
+            document.getElementById('weeklyView').classList.add('hidden');
+            btnHourly.classList.add('active');
+            btnDaily.classList.remove('active');
+            btnWeekly.classList.remove('active');
+            renderHourlyView(hourlyData);
+        };
+    }
+    
+    if (btnDaily) {
+        btnDaily.onclick = () => {
+            document.getElementById('hourlyView').classList.add('hidden');
+            document.getElementById('dailyView').classList.remove('hidden');
+            document.getElementById('weeklyView').classList.add('hidden');
+            btnDaily.classList.add('active');
+            btnHourly.classList.remove('active');
+            btnWeekly.classList.remove('active');
+            renderDailyView(dailyData);
+        };
+    }
+    
+    if (btnWeekly) {
+        btnWeekly.onclick = () => {
+            document.getElementById('hourlyView').classList.add('hidden');
+            document.getElementById('dailyView').classList.add('hidden');
+            document.getElementById('weeklyView').classList.remove('hidden');
+            btnWeekly.classList.add('active');
+            btnHourly.classList.remove('active');
+            btnDaily.classList.remove('active');
+            renderWeeklyView(weeklyData);
+        };
+    }
+}
+
+function showHeatmapTooltip(element, label, count) {
+    let tooltip = document.getElementById('heatmapTooltip');
+    if (!tooltip) {
+        tooltip = document.createElement('div');
+        tooltip.id = 'heatmapTooltip';
+        tooltip.className = 'fixed z-50 bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-xs';
+        tooltip.style.pointerEvents = 'none';
+        document.body.appendChild(tooltip);
+    }
+    
+    const rect = element.getBoundingClientRect();
+    tooltip.style.left = (rect.left + rect.width / 2 - 50) + 'px';
+    tooltip.style.top = (rect.top - 35) + 'px';
+    tooltip.innerHTML = `<div class="font-bold text-blue-400">${label}</div><div>Anomalies: ${count}</div>`;
+    tooltip.style.display = 'block';
+    
+    element.onmouseleave = () => { tooltip.style.display = 'none'; };
+}
+
+function drillDownByHour(hour) {
+    if (!currentHeatmapData) return;
+    const filtered = currentHeatmapData.filter(inc => new Date(inc.start).getHours() === hour);
+    showDrilldownModal(filtered, `Hour: ${hour}:00 - ${hour + 1}:00`);
+}
+
+function drillDownByDay(dayIndex) {
+    if (!currentHeatmapData) return;
+    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    const filtered = currentHeatmapData.filter(inc => new Date(inc.start).getDay() === dayIndex);
+    showDrilldownModal(filtered, `Day: ${days[dayIndex]}`);
+}
+
+function drillDownByWeek(weekKey) {
+    if (!currentHeatmapData) return;
+    const filtered = currentHeatmapData.filter(inc => {
+        const date = new Date(inc.start);
+        const weekNum = getWeekNumber(date);
+        return `${date.getFullYear()}-W${weekNum}` === weekKey;
+    });
+    showDrilldownModal(filtered, `Week: ${weekKey}`);
+}
+
+function showDrilldownModal(incidents, title) {
+    const modal = document.getElementById('drilldownModal');
+    if (!modal) {
+        createDrilldownModal();
+    }
+    
+    const modalTitle = document.getElementById('drilldownTitle');
+    const modalBody = document.getElementById('drilldownBody');
+    
+    if (modalTitle) modalTitle.textContent = title;
+    
+    if (modalBody) {
+        if (incidents.length === 0) {
+            modalBody.innerHTML = '<div class="text-center text-slate-500 py-8">No anomalies found</div>';
+        } else {
+            modalBody.innerHTML = `
+                <div class="space-y-2 max-h-96 overflow-y-auto">
+                    ${incidents.map((inc, i) => `
+                        <div class="bg-slate-800 rounded-lg p-3 border-l-4 ${inc.severity === 'CRITICAL' ? 'border-red-500' : 'border-yellow-500'}">
+                            <div class="flex justify-between">
+                                <span class="text-xs font-bold ${inc.severity === 'CRITICAL' ? 'text-red-400' : 'text-yellow-400'}">#${i + 1}</span>
+                                <span class="text-xs text-white">${inc.duration}s</span>
+                            </div>
+                            <div class="text-[10px] text-slate-300 mt-1">${inc.start} → ${inc.end}</div>
+                            <p class="text-[9px] text-slate-400 mt-1">${inc.details || 'Temporal anomaly detected'}</p>
+                        </div>
+                    `).join('')}
+                </div>
+            `;
+        }
+    }
+    
+    const modalEl = document.getElementById('drilldownModal');
+    if (modalEl) {
+        modalEl.classList.remove('hidden');
+        modalEl.classList.add('flex');
+    }
+}
+
+function createDrilldownModal() {
+    const modalHtml = `
+        <div id="drilldownModal" class="fixed inset-0 hidden items-center justify-center bg-black/80 z-[400]" onclick="closeDrilldownModal()">
+            <div class="bg-slate-900 rounded-xl max-w-lg w-full mx-4 max-h-[80vh] overflow-hidden border border-slate-700" onclick="event.stopPropagation()">
+                <div class="flex justify-between items-center p-4 border-b border-slate-700">
+                    <h3 id="drilldownTitle" class="text-sm font-bold text-white">Drilldown Results</h3>
+                    <button onclick="closeDrilldownModal()" class="text-slate-400 hover:text-white">✕</button>
+                </div>
+                <div id="drilldownBody" class="p-4 overflow-y-auto" style="max-height: 60vh;"></div>
+                <div class="p-4 border-t border-slate-700">
+                    <button onclick="closeDrilldownModal()" class="w-full py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm font-bold">Close</button>
+                </div>
+            </div>
+        </div>
+    `;
+    document.body.insertAdjacentHTML('beforeend', modalHtml);
+}
+
+function closeDrilldownModal() {
+    const modal = document.getElementById('drilldownModal');
+    if (modal) {
+        modal.classList.add('hidden');
+        modal.classList.remove('flex');
+    }
+}
\ No newline at end of file
diff --git a/main.py b/main.py
index 111df2b..1fb3fb0 100644
--- a/main.py
+++ b/main.py
@@ -373,6 +373,7 @@ async def event_generator():
             "Connection": "keep-alive",
         }
     )
+
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="127.0.0.1", port=8000)
\ No newline at end of file
diff --git a/styles/heatmap.css b/styles/heatmap.css
new file mode 100644
index 0000000..91fd218
--- /dev/null
+++ b/styles/heatmap.css
@@ -0,0 +1,160 @@
+/* Forensic Heatmap Styles */
+.forensic-heatmap {
+    margin-top: 24px;
+    background: #0f172a;
+    border-radius: 12px;
+    border: 1px solid #1e293b;
+    padding: 20px;
+}
+
+.forensic-heatmap-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #1e293b;
+}
+
+.forensic-heatmap-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.forensic-heatmap-title i {
+    color: #3b82f6;
+    font-size: 18px;
+}
+
+.forensic-heatmap-title h3 {
+    font-size: 12px;
+    font-weight: 700;
+    color: #e2e8f0;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: 0;
+}
+
+.forensic-heatmap-title p {
+    font-size: 9px;
+    color: #64748b;
+    margin: 2px 0 0 0;
+}
+
+.heatmap-controls {
+    display: flex;
+    gap: 8px;
+}
+
+.heatmap-btn {
+    padding: 4px 12px;
+    border-radius: 6px;
+    font-size: 10px;
+    font-weight: 600;
+    cursor: pointer;
+    background: #1e293b;
+    border: 1px solid #334155;
+    color: #94a3b8;
+    transition: all 0.2s;
+}
+
+.heatmap-btn.active {
+    background: #3b82f6;
+    border-color: #3b82f6;
+    color: white;
+}
+
+.heatmap-btn:hover:not(.active) {
+    background: #334155;
+    color: #cbd5e1;
+}
+
+.heatmap-grid {
+    display: grid;
+    gap: 6px;
+    margin-bottom: 16px;
+}
+
+.heatmap-hourly {
+    grid-template-columns: repeat(24, 1fr);
+}
+
+.heatmap-daily {
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.heatmap-weekly {
+    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
+}
+
+.heatmap-cell {
+    padding: 8px 4px;
+    text-align: center;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 10px;
+    font-weight: 500;
+}
+
+.heatmap-cell:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 2px #3b82f6;
+}
+
+.heatmap-label {
+    font-size: 8px;
+    color: #64748b;
+    text-align: center;
+    margin-top: 4px;
+}
+
+.heatmap-legend {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid #1e293b;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 9px;
+    color: #64748b;
+}
+
+.legend-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+}
+
+.legend-color.low { background: #3b82f6; opacity: 0.3; }
+.legend-color.medium { background: #f59e0b; opacity: 0.6; }
+.legend-color.high { background: #ef4444; opacity: 0.8; }
+.legend-color.critical { background: #dc2626; }
+
+/* Light theme */
+html[data-theme="light"] .forensic-heatmap {
+    background: #f8fafc;
+    border-color: #e2e8f0;
+}
+
+html[data-theme="light"] .forensic-heatmap-title h3 {
+    color: #1e293b;
+}
+
+html[data-theme="light"] .heatmap-btn {
+    background: #f1f5f9;
+    border-color: #cbd5e1;
+    color: #475569;
+}
+
+html[data-theme="light"] .heatmap-btn.active {
+    background: #3b82f6;
+    color: white;
+}
\ No newline at end of file