diff --git a/html/dashboard.html b/html/dashboard.html
index 8293125..8ea7314 100644
--- a/html/dashboard.html
+++ b/html/dashboard.html
@@ -11,13 +11,12 @@
     <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" />
+    <link rel="stylesheet" href="../styles/heatmap.css" />
+    <link rel="stylesheet" href="../styles/custody.css" />
     <style>
-      /* ── Reactive Scroll-To-Top Button (Dashboard) ───────────────────────── */
       #scrollTopBtn {
         position: fixed;
         bottom: 2rem;
@@ -188,7 +187,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 +239,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 -->
+              <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>
+
+                <!-- 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>
+
+                <!-- 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>
+
+                <!-- 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 +330,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">
@@ -259,6 +345,111 @@ <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>
+
+          <!-- Chain of Custody Visualizer -->
+          <div class="custody-container">
+            <div class="custody-header">
+              <div class="custody-title">
+                <i class="fas fa-link"></i>
+                <div>
+                  <h3>CHAIN OF CUSTODY VISUALIZER</h3>
+                  <p>Interactive directed graph - click nodes for details</p>
+                </div>
+              </div>
+              <div class="custody-stats">
+                <div class="custody-stat">
+                  <div class="label">Total Steps</div>
+                  <div id="custodyTotalNodes" class="value">0</div>
+                </div>
+                <div class="custody-stat">
+                  <div class="label">Verified</div>
+                  <div id="custodyVerifiedNodes" class="value">0</div>
+                </div>
+                <div class="custody-stat">
+                  <div class="label">Gaps</div>
+                  <div id="custodyGapCount" class="value">0</div>
+                </div>
+              </div>
+            </div>
+            
+            <div class="custody-graph-container">
+              <canvas id="custodyCanvas"></canvas>
+              <div class="custody-controls-hint">
+                <i class="fas fa-mouse-pointer"></i> Drag to pan · Scroll to zoom
+              </div>
+            </div>
+            
+            <!-- Details Panel -->
+            <div id="custodyDetailsPanel" class="custody-details-panel hidden">
+              <div class="details-header">
+                <h4>EVIDENCE DETAILS</h4>
+                <button class="details-close" onclick="closeDetailsPanel()">✕</button>
+              </div>
+              <div class="details-grid">
+                <div class="detail-item">
+                  <span class="detail-label">Step</span>
+                  <span id="detailNodeLabel" class="detail-value">-</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Timestamp</span>
+                  <span id="detailTimestamp" class="detail-value">-</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Handler</span>
+                  <span id="detailHandler" class="detail-value">-</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Action</span>
+                  <span id="detailAction" class="detail-value">-</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Hash Fingerprint</span>
+                  <span id="detailHash" class="hash-fingerprint">-</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Status</span>
+                  <span id="detailStatus" class="detail-value">-</span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
 
         <div id="view-registry" class="tab-view hidden glass-card overflow-hidden">
@@ -305,7 +496,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 +531,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 +614,11 @@ <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>
+    <script src="../js/visualization.js"></script>
+    <script src="../js/custodyGraph.js"></script>
+    <script src="../js/hashVerification.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/custodyGraph.js b/js/custodyGraph.js
new file mode 100644
index 0000000..d027759
--- /dev/null
+++ b/js/custodyGraph.js
@@ -0,0 +1,333 @@
+/**
+ * Chain of Custody Visualizer - Interactive Directed Graph
+ */
+
+let custodyGraph = {
+    nodes: [],
+    edges: [],
+    canvas: null,
+    ctx: null,
+    selectedNode: null,
+    zoom: 1,
+    offsetX: 0,
+    offsetY: 0,
+    isDragging: false,
+    dragStartX: 0,
+    dragStartY: 0
+};
+
+function initCustodyGraph(custodyData) {
+    custodyGraph.canvas = document.getElementById('custodyCanvas');
+    if (!custodyGraph.canvas) return;
+    
+    custodyGraph.ctx = custodyGraph.canvas.getContext('2d');
+    
+    // Process custody data into nodes and edges
+    processCustodyData(custodyData);
+    
+    // Set canvas size
+    resizeCanvas();
+    
+    // Draw graph
+    drawGraph();
+    
+    // Setup event listeners
+    setupGraphEvents();
+    
+    // Update stats
+    updateCustodyStats();
+}
+
+function processCustodyData(data) {
+    custodyGraph.nodes = [];
+    custodyGraph.edges = [];
+    
+    if (!data || data.length === 0) {
+        // Sample data for demonstration
+        custodyGraph.nodes = [
+            { id: 0, label: 'Evidence Seized', timestamp: '2026-06-01 09:00:00', handler: 'Detective Smith', action: 'Seizure', hash: 'a3f2c1...', status: 'verified' },
+            { id: 1, label: 'Logged in System', timestamp: '2026-06-01 10:30:00', handler: 'Forensic Analyst', action: 'Registration', hash: 'b4e3d2...', status: 'verified' },
+            { id: 2, label: 'Hash Verified', timestamp: '2026-06-01 11:15:00', handler: 'System', action: 'Verification', hash: 'c5f4e3...', status: 'verified' },
+            { id: 3, label: 'Analysis Started', timestamp: '2026-06-01 13:00:00', handler: 'AI Engine', action: 'Processing', hash: 'd6g5f4...', status: 'warning' },
+            { id: 4, label: 'Report Generated', timestamp: '2026-06-01 15:30:00', handler: 'System', action: 'Export', hash: 'e7h6g5...', status: 'verified' }
+        ];
+        
+        custodyGraph.edges = [
+            { from: 0, to: 1, delta: '1h 30m' },
+            { from: 1, to: 2, delta: '45m' },
+            { from: 2, to: 3, delta: '1h 45m' },
+            { from: 3, to: 4, delta: '2h 30m' }
+        ];
+    } else {
+        // Process real data
+        for (let i = 0; i < data.length; i++) {
+            custodyGraph.nodes.push({
+                id: i,
+                label: data[i].action || `Step ${i + 1}`,
+                timestamp: data[i].timestamp,
+                handler: data[i].handler,
+                action: data[i].action,
+                hash: data[i].hash,
+                status: data[i].status || 'verified'
+            });
+            
+            if (i > 0) {
+                custodyGraph.edges.push({
+                    from: i - 1,
+                    to: i,
+                    delta: calculateTimeDelta(data[i-1].timestamp, data[i].timestamp)
+                });
+            }
+        }
+    }
+}
+
+function calculateTimeDelta(start, end) {
+    const startTime = new Date(start);
+    const endTime = new Date(end);
+    const diffMs = endTime - startTime;
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffMins = Math.floor((diffMs % (3600000)) / 60000);
+    
+    if (diffHours > 0) {
+        return `${diffHours}h ${diffMins}m`;
+    }
+    return `${diffMins}m`;
+}
+
+function drawGraph() {
+    if (!custodyGraph.ctx) return;
+    
+    const ctx = custodyGraph.ctx;
+    const width = custodyGraph.canvas.width;
+    const height = custodyGraph.canvas.height;
+    
+    ctx.clearRect(0, 0, width, height);
+    ctx.save();
+    ctx.translate(custodyGraph.offsetX, custodyGraph.offsetY);
+    ctx.scale(custodyGraph.zoom, custodyGraph.zoom);
+    
+    // Calculate node positions (vertical layout)
+    const nodeCount = custodyGraph.nodes.length;
+    const startY = 100;
+    const stepY = (height / custodyGraph.zoom - 200) / Math.max(1, nodeCount - 1);
+    
+    custodyGraph.nodes.forEach((node, index) => {
+        node.x = width / 2 / custodyGraph.zoom;
+        node.y = startY + index * stepY;
+    });
+    
+    // Draw edges first
+    custodyGraph.edges.forEach(edge => {
+        const fromNode = custodyGraph.nodes[edge.from];
+        const toNode = custodyGraph.nodes[edge.to];
+        
+        if (fromNode && toNode) {
+            drawEdge(fromNode, toNode, edge.delta);
+        }
+    });
+    
+    // Draw nodes
+    custodyGraph.nodes.forEach(node => {
+        drawNode(node);
+    });
+    
+    ctx.restore();
+}
+
+function drawEdge(from, to, label) {
+    const ctx = custodyGraph.ctx;
+    
+    ctx.beginPath();
+    ctx.moveTo(from.x, from.y);
+    ctx.lineTo(to.x, to.y);
+    
+    // Check for gaps (> 4 hours)
+    const isGap = label && (parseInt(label) > 4 || label.includes('h') && parseInt(label) > 4);
+    ctx.strokeStyle = isGap ? '#ef4444' : '#3b82f6';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    
+    // Draw arrow
+    const angle = Math.atan2(to.y - from.y, to.x - from.x);
+    const arrowSize = 10;
+    const arrowX = to.x - arrowSize * Math.cos(angle);
+    const arrowY = to.y - arrowSize * Math.sin(angle);
+    
+    ctx.beginPath();
+    ctx.moveTo(arrowX, arrowY);
+    ctx.lineTo(arrowX - 5 * Math.sin(angle), arrowY + 5 * Math.cos(angle));
+    ctx.lineTo(arrowX + 5 * Math.sin(angle), arrowY - 5 * Math.cos(angle));
+    ctx.fillStyle = isGap ? '#ef4444' : '#3b82f6';
+    ctx.fill();
+    
+    // Draw label
+    const midX = (from.x + to.x) / 2;
+    const midY = (from.y + to.y) / 2 - 10;
+    ctx.font = '10px monospace';
+    ctx.fillStyle = isGap ? '#ef4444' : '#64748b';
+    ctx.fillText(label, midX, midY);
+}
+
+function drawNode(node) {
+    const ctx = custodyGraph.ctx;
+    const radius = 30;
+    
+    // Node circle
+    ctx.beginPath();
+    ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+    
+    // Status-based colors
+    if (node.status === 'warning') {
+        ctx.fillStyle = 'rgba(245, 158, 11, 0.2)';
+        ctx.strokeStyle = '#f59e0b';
+    } else if (node.status === 'critical') {
+        ctx.fillStyle = 'rgba(239, 68, 68, 0.2)';
+        ctx.strokeStyle = '#ef4444';
+    } else {
+        ctx.fillStyle = 'rgba(59, 130, 246, 0.15)';
+        ctx.strokeStyle = '#3b82f6';
+    }
+    
+    ctx.fill();
+    ctx.stroke();
+    
+    // Node label
+    ctx.font = '10px monospace';
+    ctx.fillStyle = '#e2e8f0';
+    ctx.textAlign = 'center';
+    ctx.fillText(node.label, node.x, node.y - 15);
+    
+    // Timestamp
+    ctx.font = '8px monospace';
+    ctx.fillStyle = '#64748b';
+    ctx.fillText(node.timestamp?.split(' ')[1] || '', node.x, node.y + 5);
+    
+    // Handler
+    ctx.font = '8px monospace';
+    ctx.fillStyle = '#10b981';
+    ctx.fillText(node.handler?.substring(0, 12) || '', node.x, node.y + 20);
+    
+    // Warning indicator for gaps
+    if (node.status === 'warning') {
+        ctx.beginPath();
+        ctx.arc(node.x + 25, node.y - 25, 8, 0, 2 * Math.PI);
+        ctx.fillStyle = '#f59e0b';
+        ctx.fill();
+        ctx.fillStyle = 'white';
+        ctx.font = 'bold 10px monospace';
+        ctx.fillText('!', node.x + 25, node.y - 22);
+    }
+}
+
+function setupGraphEvents() {
+    if (!custodyGraph.canvas) return;
+    
+    custodyGraph.canvas.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? 0.9 : 1.1;
+        custodyGraph.zoom = Math.min(2, Math.max(0.5, custodyGraph.zoom * delta));
+        drawGraph();
+    });
+    
+    custodyGraph.canvas.addEventListener('mousedown', (e) => {
+        custodyGraph.isDragging = true;
+        custodyGraph.dragStartX = e.clientX - custodyGraph.offsetX;
+        custodyGraph.dragStartY = e.clientY - custodyGraph.offsetY;
+        custodyGraph.canvas.style.cursor = 'grabbing';
+    });
+    
+    window.addEventListener('mousemove', (e) => {
+        if (custodyGraph.isDragging) {
+            custodyGraph.offsetX = e.clientX - custodyGraph.dragStartX;
+            custodyGraph.offsetY = e.clientY - custodyGraph.dragStartY;
+            drawGraph();
+        }
+    });
+    
+    window.addEventListener('mouseup', () => {
+        custodyGraph.isDragging = false;
+        if (custodyGraph.canvas) {
+            custodyGraph.canvas.style.cursor = 'grab';
+        }
+    });
+    
+    custodyGraph.canvas.addEventListener('click', (e) => {
+        const rect = custodyGraph.canvas.getBoundingClientRect();
+        const mouseX = (e.clientX - rect.left - custodyGraph.offsetX) / custodyGraph.zoom;
+        const mouseY = (e.clientY - rect.top - custodyGraph.offsetY) / custodyGraph.zoom;
+        
+        // Find clicked node
+        let clickedNode = null;
+        for (const node of custodyGraph.nodes) {
+            const dx = mouseX - node.x;
+            const dy = mouseY - node.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance <= 30) {
+                clickedNode = node;
+                break;
+            }
+        }
+        
+        if (clickedNode) {
+            showNodeDetails(clickedNode);
+        }
+    });
+}
+
+function showNodeDetails(node) {
+    const panel = document.getElementById('custodyDetailsPanel');
+    const nodeLabel = document.getElementById('detailNodeLabel');
+    const nodeTimestamp = document.getElementById('detailTimestamp');
+    const nodeHandler = document.getElementById('detailHandler');
+    const nodeAction = document.getElementById('detailAction');
+    const nodeHash = document.getElementById('detailHash');
+    const nodeStatus = document.getElementById('detailStatus');
+    
+    if (panel) panel.classList.remove('hidden');
+    if (nodeLabel) nodeLabel.textContent = node.label;
+    if (nodeTimestamp) nodeTimestamp.textContent = node.timestamp;
+    if (nodeHandler) nodeHandler.textContent = node.handler;
+    if (nodeAction) nodeAction.textContent = node.action;
+    if (nodeHash) nodeHash.textContent = node.hash;
+    if (nodeStatus) {
+        nodeStatus.textContent = node.status === 'warning' ? '⚠️ Gap Detected' : '✓ Verified';
+        nodeStatus.className = node.status === 'warning' ? 'warning-badge' : 'detail-value';
+    }
+}
+
+function closeDetailsPanel() {
+    const panel = document.getElementById('custodyDetailsPanel');
+    if (panel) panel.classList.add('hidden');
+}
+
+function updateCustodyStats() {
+    const totalNodes = document.getElementById('custodyTotalNodes');
+    const verifiedNodes = document.getElementById('custodyVerifiedNodes');
+    const gapCount = document.getElementById('custodyGapCount');
+    
+    if (totalNodes) totalNodes.textContent = custodyGraph.nodes.length;
+    if (verifiedNodes) {
+        const verified = custodyGraph.nodes.filter(n => n.status === 'verified').length;
+        verifiedNodes.textContent = verified;
+    }
+    if (gapCount) {
+        const gaps = custodyGraph.edges.filter(e => {
+            const delta = e.delta;
+            return delta && (parseInt(delta) > 4 || (delta.includes('h') && parseInt(delta) > 4));
+        }).length;
+        gapCount.textContent = gaps;
+    }
+}
+
+function resizeCanvas() {
+    if (!custodyGraph.canvas) return;
+    const container = custodyGraph.canvas.parentElement;
+    custodyGraph.canvas.width = container.clientWidth;
+    custodyGraph.canvas.height = container.clientHeight;
+    drawGraph();
+}
+
+window.addEventListener('resize', () => {
+    resizeCanvas();
+});
\ No newline at end of file
diff --git a/js/dashboard.js b/js/dashboard.js
index 20305e0..e43f6fa 100644
--- a/js/dashboard.js
+++ b/js/dashboard.js
@@ -594,7 +594,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("");
 }
@@ -1022,8 +1022,17 @@ 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);
+    }
+    // Initialize chain of custody graph when switching to dashboard
+    if (typeof initCustodyGraph === 'function' && lastScanResults.incidents) {
+      setTimeout(() => initCustodyGraph(lastScanResults.incidents), 150);
+    }
+  }
 }
 
 function updateCaseBadge() {
@@ -1136,6 +1145,16 @@ 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);
+  }
+  
+  // Initialize chain of custody graph after rendering results
+  if (typeof initCustodyGraph === 'function' && data.incidents) {
+    setTimeout(() => initCustodyGraph(data.incidents), 200);
+  }
 }
 
 function updateRegistryTable(incidents) {
@@ -1271,4 +1290,7 @@ function setupMobileSidebar() {
       }
     });
   });
-}
\ No newline at end of file
+}
+
+// ─── HEATMAP & CUSTODY GRAPH INITIALIZATION ──────────────────────────────────
+// These will be called from renderResults after analysis completes
\ No newline at end of file
diff --git a/js/hashVerification.js b/js/hashVerification.js
new file mode 100644
index 0000000..059b96f
--- /dev/null
+++ b/js/hashVerification.js
@@ -0,0 +1,59 @@
+/**
+ * Hash Verification Utilities for Chain of Custody
+ */
+
+function verifyHashIntegrity(hash1, hash2) {
+    if (!hash1 || !hash2) return { verified: false, reason: 'Missing hash data' };
+    return {
+        verified: hash1 === hash2,
+        reason: hash1 === hash2 ? 'Hash matches' : 'Hash mismatch - potential tampering'
+    };
+}
+
+function generateHashPreview(hash) {
+    if (!hash) return 'N/A';
+    if (hash.length <= 16) return hash;
+    return `${hash.substring(0, 8)}...${hash.substring(hash.length - 8)}`;
+}
+
+function validateCustodyChain(nodes) {
+    const warnings = [];
+    let previousHash = null;
+    
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        
+        // Check for hash continuity
+        if (previousHash && node.hash && previousHash !== node.hash) {
+            warnings.push({
+                index: i,
+                node: node.label,
+                message: 'Hash changed between steps',
+                severity: 'warning'
+            });
+        }
+        
+        previousHash = node.hash;
+    }
+    
+    return warnings;
+}
+
+function calculateChainIntegrity(nodes) {
+    let verifiedCount = 0;
+    let warningCount = 0;
+    
+    for (const node of nodes) {
+        if (node.status === 'verified') verifiedCount++;
+        if (node.status === 'warning') warningCount++;
+    }
+    
+    const integrityScore = nodes.length > 0 ? (verifiedCount / nodes.length) * 100 : 100;
+    
+    return {
+        score: Math.round(integrityScore),
+        verifiedCount,
+        warningCount,
+        totalNodes: nodes.length
+    };
+}
\ 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/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/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..f11a8c0 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
@@ -16,9 +16,10 @@
 import json
 import logging
 import uuid
-import magic  # python-magic for MIME sniffing
+import magic
 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/custody.css b/styles/custody.css
new file mode 100644
index 0000000..0f259d1
--- /dev/null
+++ b/styles/custody.css
@@ -0,0 +1,326 @@
+/* Chain of Custody Visualizer Styles - Forensic Theme */
+
+.custody-container {
+    background: #0f172a;
+    border-radius: 12px;
+    border: 1px solid #1e293b;
+    padding: 20px;
+    margin-top: 24px;
+}
+
+.custody-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #1e293b;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.custody-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.custody-title i {
+    color: #3b82f6;
+    font-size: 20px;
+}
+
+.custody-title h3 {
+    font-size: 12px;
+    font-weight: 700;
+    color: #e2e8f0;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: 0;
+}
+
+.custody-title p {
+    font-size: 9px;
+    color: #64748b;
+    margin: 2px 0 0 0;
+}
+
+.custody-stats {
+    display: flex;
+    gap: 16px;
+}
+
+.custody-stat {
+    text-align: center;
+    padding: 6px 14px;
+    background: #1e293b;
+    border-radius: 8px;
+    min-width: 70px;
+}
+
+.custody-stat .label {
+    font-size: 8px;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.custody-stat .value {
+    font-size: 16px;
+    font-weight: bold;
+    color: #3b82f6;
+}
+
+/* Graph Canvas Container */
+.custody-graph-container {
+    background: #0a0f1a;
+    border-radius: 12px;
+    border: 1px solid #1e293b;
+    height: 450px;
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 16px;
+}
+
+#custodyCanvas {
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+}
+
+#custodyCanvas:active {
+    cursor: grabbing;
+}
+
+/* Zoom/Pan Instructions */
+.custody-controls-hint {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    background: rgba(15, 23, 42, 0.9);
+    padding: 6px 12px;
+    border-radius: 8px;
+    font-size: 8px;
+    color: #64748b;
+    font-family: monospace;
+    z-index: 10;
+    pointer-events: none;
+    border: 1px solid #1e293b;
+}
+
+/* Node Details Panel */
+.custody-details-panel {
+    background: #1e293b;
+    border-radius: 12px;
+    padding: 16px;
+    margin-top: 16px;
+    border-left: 3px solid #3b82f6;
+    transition: all 0.2s ease;
+}
+
+.custody-details-panel.hidden {
+    display: none;
+}
+
+.details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 14px;
+}
+
+.details-header h4 {
+    font-size: 10px;
+    font-weight: bold;
+    color: #3b82f6;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: 0;
+}
+
+.details-close {
+    background: none;
+    border: none;
+    color: #64748b;
+    cursor: pointer;
+    font-size: 14px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.details-close:hover {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.1);
+}
+
+.details-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 12px;
+}
+
+.detail-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.detail-label {
+    font-size: 9px;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.detail-value {
+    font-size: 11px;
+    color: #e2e8f0;
+    font-family: 'Courier New', monospace;
+    word-break: break-all;
+}
+
+.hash-fingerprint {
+    font-family: 'Courier New', monospace;
+    font-size: 10px;
+    color: #10b981;
+    background: #0f172a;
+    padding: 4px 8px;
+    border-radius: 6px;
+    display: inline-block;
+}
+
+.warning-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: #f59e0b;
+    color: white;
+    padding: 2px 10px;
+    border-radius: 12px;
+    font-size: 9px;
+    font-weight: bold;
+}
+
+.critical-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: #ef4444;
+    color: white;
+    padding: 2px 10px;
+    border-radius: 12px;
+    font-size: 9px;
+    font-weight: bold;
+}
+
+.verified-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: #10b981;
+    color: white;
+    padding: 2px 10px;
+    border-radius: 12px;
+    font-size: 9px;
+    font-weight: bold;
+}
+
+/* Light Theme Support */
+html[data-theme="light"] .custody-container {
+    background: #f8fafc;
+    border-color: #e2e8f0;
+}
+
+html[data-theme="light"] .custody-title h3 {
+    color: #1e293b;
+}
+
+html[data-theme="light"] .custody-graph-container {
+    background: #f1f5f9;
+    border-color: #e2e8f0;
+}
+
+html[data-theme="light"] .custody-stat {
+    background: #f1f5f9;
+    border: 1px solid #e2e8f0;
+}
+
+html[data-theme="light"] .custody-stat .value {
+    color: #2563eb;
+}
+
+html[data-theme="light"] .custody-details-panel {
+    background: #f1f5f9;
+    border-left-color: #2563eb;
+}
+
+html[data-theme="light"] .detail-value {
+    color: #1e293b;
+}
+
+html[data-theme="light"] .hash-fingerprint {
+    background: #e2e8f0;
+    color: #059669;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .custody-container {
+        padding: 12px;
+    }
+    
+    .custody-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .custody-stats {
+        width: 100%;
+        justify-content: space-between;
+    }
+    
+    .custody-stat {
+        flex: 1;
+        text-align: center;
+    }
+    
+    .custody-graph-container {
+        height: 350px;
+    }
+    
+    .details-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Scrollbar Styling */
+.custody-details-panel::-webkit-scrollbar {
+    width: 4px;
+}
+
+.custody-details-panel::-webkit-scrollbar-track {
+    background: #1e293b;
+    border-radius: 2px;
+}
+
+.custody-details-panel::-webkit-scrollbar-thumb {
+    background: #3b82f6;
+    border-radius: 2px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.custody-details-panel:not(.hidden) {
+    animation: fadeIn 0.3s ease;
+}
\ 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
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