diff --git a/html/dashboard.html b/html/dashboard.html
index 8293125..3b45ded 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;
@@ -188,7 +185,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">
@@ -239,6 +237,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
@@ -246,8 +328,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">
@@ -305,7 +389,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>
@@ -340,7 +424,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">
@@ -423,6 +507,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 bb24c61..4a22321 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,10 +15,11 @@
 import sys
 import json
 import logging
+import magic
 import uuid
-import magic  # python-magic for MIME sniffing
 import io
 import zipfile
+
 load_dotenv()
 
 # ─── LOGGING ─────────────────────────────────────────────────────────────────
@@ -30,8 +31,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 = {
@@ -39,7 +38,6 @@
     "fallback-secret-change-me",
     "fallback-secret-change-me-in-production",
     "change-this-to-a-long-random-secret-in-production",
-    "change-this-to-a-long-random-secret-in-production",
     "REPLACE_WITH_A_STRONG_RANDOM_SECRET",
 }
 if _SECRET_KEY in _INSECURE_DEFAULTS:
@@ -63,13 +61,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))
@@ -82,7 +79,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.")
 
@@ -161,7 +158,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])
@@ -178,11 +174,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()):
@@ -192,11 +186,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.")
@@ -210,24 +202,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.")
 
@@ -238,7 +223,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.")
@@ -248,7 +232,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:
@@ -260,12 +243,9 @@ async def upload_log(
             detail=f"File content type '{detected_mime}' is not permitted. Only log/text files are accepted."
         )
 
-    # ── 4. SAFE + UNIQUE FILENAME (prevent path traversal and collisions) ─────────
     safe_name = os.path.basename(file.filename).replace("..", "").replace("/", "").replace("\\", "")
-    unique_name = f"{uuid.uuid4().hex}_{safe_name}"
-    temp_path = os.path.join(UPLOAD_DIR, unique_name)
+    temp_path = os.path.join(UPLOAD_DIR, safe_name)
 
-    # ── 5. WRITE & ANALYZE ───────────────────────────────────────────────────
     try:
         with open(temp_path, "wb") as buffer:
             buffer.write(contents)
@@ -285,201 +265,117 @@ async def upload_log(
         if os.path.exists(temp_path):
             os.remove(temp_path)
 
-
-@app.get("/analyze-process")
-async def analyze_process(
-    file_path: str,
-    threshold: int = 60,
+@app.post("/stream-analyze")
+async def stream_analyze(
+    file: UploadFile = File(...),
+    threshold: str = Form("60"),
     current_user: str = Depends(get_current_user),
 ):
-    """
-    SSE endpoint streaming real analysis progress from analyze_logs().
-    Fixes hardcoded progress messages by wiring progress_callback to the stream.
-    """
-    queue: asyncio.Queue = asyncio.Queue()
-
-    def progress_callback(percent: int, message: str):
-        queue.put_nowait({"percent": percent, "message": message})
-
+    # 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():
-        loop = asyncio.get_event_loop()
-        analysis_task = loop.run_in_executor(
-            None,
-            lambda: analyze_logs(
-                file_path,
-                threshold_seconds=threshold,
-                progress_callback=progress_callback,
-            ),
-        )
-
-        while True:
-            try:
-                event = await asyncio.wait_for(queue.get(), timeout=0.5)
-                yield f"data: {json.dumps(event)}\n\n"
-                if event.get("percent") == 100:
-                    break
-            except asyncio.TimeoutError:
-                if analysis_task.done():
-                    break
-
         try:
-            result = await analysis_task
-            yield f"data: {json.dumps({'percent': 100, 'message': 'Analysis completed.', 'result': result})}\n\n"
+            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("SSE analysis error: %s", e)
-            yield f"data: {json.dumps({'percent': 100, 'message': f'Error: {str(e)}'})}\n\n"
-
+            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",
-        headers={"Cache-Control": "no-cache", "X-Accel-Buffering": "no"},
-    )
-
-
-@app.post("/verify-chain")
-#@limiter.limit("30/minute")
-async def verify_chain_manifest(
-    request: Request,
-    manifest: list = None,
-    current_user: str = Depends(get_current_user),
-):
-    """
-    Optional backend verification endpoint for chain of custody manifest.
-    Accepts a chain manifest (array of session entries) from frontend and validates integrity.
-    """
-    try:
-        from chain_of_custody import verify_chain_manifest
-    except ImportError:
-        raise HTTPException(
-            status_code=501,
-            detail="Chain of custody module not available. Ensure chain_of_custody.py exists."
-        )
-    
-    if manifest is None or not isinstance(manifest, list):
-        raise HTTPException(
-            status_code=400,
-            detail="Manifest must be a non-empty list of session entries."
-        )
-    
-    if len(manifest) == 0:
-        return {
-            "is_intact": True,
-            "broken_index": None,
-            "verified_entries": 0,
-            "verification_details": [],
-            "message": "Empty manifest — no entries to verify."
-        }
-    
-    try:
-        is_intact, broken_index = verify_chain_manifest(manifest)
-        
-        verification_details = []
-        for i, entry in enumerate(manifest):
-            entry_detail = {
-                "entry_index": i,
-                "session_id": entry.get("session_id", "unknown"),
-                "timestamp": entry.get("timestamp", "unknown"),
-                "valid": i < broken_index if broken_index is not None else True,
-            }
-            
-            if i == 0:
-                entry_detail["notes"] = "Genesis entry (first session)"
-            elif broken_index is not None and i == broken_index:
-                entry_detail["notes"] = "❌ Chain broken at this entry — previous link failed"
-            elif broken_index is not None and i > broken_index:
-                entry_detail["notes"] = "❌ Invalid (downstream of broken link)"
-            else:
-                entry_detail["notes"] = "✓ Valid — linked to previous session"
-            
-            verification_details.append(entry_detail)
-        
-        logger.info(
-            "Chain verification for user '%s': is_intact=%s, broken_index=%s",
-            current_user, is_intact, broken_index
-        )
-        
-        return {
-            "is_intact": is_intact,
-            "broken_index": broken_index,
-            "verified_entries": len(manifest),
-            "verification_details": verification_details,
-            "message": (
-                "✓ Chain integrity verified" if is_intact 
-                else f"❌ Chain broken at entry #{broken_index}"
-            )
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
         }
-    
-    except Exception as e:
-        logger.error(
-            "Chain verification error for user '%s': %s",
-            current_user, e
-        )
-        raise HTTPException(
-            status_code=500,
-            detail=f"Verification failed: {str(e)}"
-        )
-
-
-@app.get("/chain-status")
-@limiter.limit("30/minute")
-async def get_chain_status(
-    request: Request,
-    current_user: str = Depends(get_current_user),
-):
-    """
-    Optional endpoint to retrieve chain manifest storage instructions.
-    Useful for documentation and debugging chain setup.
-    """
-    return {
-        "storage_location": "Browser localStorage['analysis_chain_manifest']",
-        "chain_type": "SHA-256 hash chaining",
-        "features": [
-            "File integrity (SHA-256 of uploaded log)",
-            "Findings integrity (SHA-256 of analysis output)",
-            "Session linking (cryptographic chain)",
-            "Tampering detection (broken chain indicates modification)",
-            "Export integration (PDF/JSON include manifest)"
-        ],
-        "endpoints": {
-            "verify": "POST /verify-chain",
-            "info": "GET /chain-status"
-        },
-        "documentation": "See CHAIN_OF_CUSTODY.md for full details"
-    }
-
-
-@app.post("/export/zip")
-async def export_zip(
-    request: Request,
-    pdf_file: UploadFile = File(...),
-    csv_file: UploadFile = File(...),
-    json_file: UploadFile = File(...),
-    current_user: str = Depends(get_current_user),
-):
-    """
-    Creates an in-memory ZIP archive containing the generated PDF, CSV, and JSON reports.
-    Streams the ZIP file back to the client.
-    """
-    try:
-        zip_buffer = io.BytesIO()
-        with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zip_file:
-            zip_file.writestr("report.pdf", await pdf_file.read())
-            zip_file.writestr("registry.csv", await csv_file.read())
-            zip_file.writestr("report.json", await json_file.read())
-            
-        zip_buffer.seek(0)
-        
-        return StreamingResponse(
-            iter([zip_buffer.getvalue()]),
-            media_type="application/zip",
-            headers={
-                "Content-Disposition": "attachment; filename=Evidence_Package.zip"
-            }
-        )
-    except Exception as e:
-        logger.error("ZIP export failed for user '%s': %s", current_user, str(e))
-        raise HTTPException(status_code=500, detail="Failed to generate ZIP archive.")
-
+    )
 
 if __name__ == "__main__":
     import uvicorn
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