docker deployment

All_weapon.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:47836d3c3a614948197aa4bc8cf95b1e572ba07f10486498d14c67bcab4bb7cf
+size 155664349

Dockerfile

@@ -0,0 +1,35 @@
+# Use Python 3.9
+FROM python:3.9
+
+# Install system dependencies for OpenCV and GLib
+USER root
+RUN apt-get update && apt-get install -y \
+    libgl1 \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create a non-root user matching HF Spaces UID (1000)
+RUN useradd -m -u 1000 user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    YOLO_CONFIG_DIR=/tmp/Ultralytics \
+    MPLCONFIGDIR=/tmp/matplotlib
+
+# Set working directory to user's home/app (Standard for spaces)
+WORKDIR $HOME/app
+
+# Copy only requirements first to cache dependencies
+COPY --chown=user requirements.txt $HOME/app/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Copy the rest of the application with correct ownership
+COPY --chown=user . $HOME/app
+
+# ensure uploads directory exists and is writable
+RUN mkdir -p uploads && chmod 777 uploads
+
+# Run as the user
+USER user
+
+# Command to run the application
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,6 @@
+from sentinel_app_v13 import app
+
+if __name__ == '__main__':
+    # Hugging Face Spaces Docker (and our requirements) expects the app to run on port 7860
+    # Port 8080 is reserved for local, so we won't conflict.
+    app.run(host='0.0.0.0', port=7860, debug=False)

face_mask.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a9e7e8b18cfa8a154eb522f2b68b9ec7234ac48107f3089c71980f3172f0ada7
+size 6240056

packages.txt

@@ -0,0 +1 @@
+libgl1

requirements.txt

@@ -0,0 +1,11 @@
+flask
+opencv-python-headless
+numpy
+ultralytics
+google-generativeai
+filterpy
+scikit-image
+matplotlib
+scipy
+lap
+requests

sentinel_app_v13.py

@@ -0,0 +1,1337 @@
+import os, math, time, datetime, threading, json, uuid
+import requests as http_requests
+from collections import deque
+from flask import Flask, render_template, Response, jsonify, request
+from werkzeug.utils import secure_filename
+import cv2
+import numpy as np
+from ultralytics import YOLO
+from sort import Sort
+import google.generativeai as genai
+from PIL import Image
+import torch
+import torchvision.transforms as T
+from torchvision.models import resnet18, ResNet18_Weights
+
+# Configure Gemini
+GENAI_API_KEY = ''
+genai.configure(api_key=GENAI_API_KEY)
+model_gemini = genai.GenerativeModel('gemini-2.5-flash')
+
+app = Flask(__name__)
+app.config['UPLOAD_FOLDER'] = 'uploads'
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+# Load models
+model_movement = YOLO('yolov8n.pt')
+model_facemask = YOLO('face_mask.pt')
+model_weapon = YOLO('All_weapon.pt')
+
+# Re-ID Embedding Extractor (ResNet18)
+device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
+reid_model = resnet18(weights=ResNet18_Weights.DEFAULT)
+reid_model.fc = torch.nn.Identity()  # Remove classification layer to get embeddings
+reid_model.to(device)
+reid_model.eval()
+
+reid_transform = T.Compose([
+    T.ToPILImage(),
+    T.Resize((128, 64)),
+    T.ToTensor(),
+    T.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225])
+])
+
+print(f"All Models Loaded (V13 - Journey Tracker). Device: {device}")
+
+# ════════════════════════════════════════════════════════════════
+# GLOBAL STATE
+# ════════════════════════════════════════════════════════════════
+# Multi-module system: set of active detection modules
+active_modules = {'movement'}  # Default: movement active
+red_alert = False
+
+# Per-feed video source management
+# feed_id -> filepath (None means no source / webcam for feed 0)
+feed_sources = {}  # e.g. {0: '/path/to/clip1.mp4', 1: '/path/to/clip2.mp4'}
+
+# Multi-camera feed management
+camera_feeds = {}
+feed_versions = {}
+MAX_FEEDS = 4
+
+# Multi-camera tracking
+feed_trackers = {i: Sort() for i in range(MAX_FEEDS)}
+person_history = {}
+object_history = {}
+journey_log = deque(maxlen=500)
+
+class SubjectIdentityManager:
+    def __init__(self, threshold=0.7):
+        self.threshold = threshold
+        self.global_subjects = {} # global_id -> {'embedding': tensor, 'first_seen': timestamp}
+        self.local_to_global = {} # (feed_id, local_id) -> {'global_id': int, 'last_seen': float}
+        self.next_global_id = 100
+        self.lock = threading.Lock()
+
+    def get_embedding(self, face_img):
+        img_t = reid_transform(face_img).unsqueeze(0).to(device)
+        with torch.no_grad():
+            emb = reid_model(img_t)
+        return emb / emb.norm() # Normalize
+
+    def match_or_register(self, feed_id, local_id, frame, bbox):
+        x1, y1, x2, y2 = map(int, bbox)
+        h, w = frame.shape[:2]
+        x1, y1 = max(0, x1), max(0, y1)
+        x2, y2 = min(w, x2), min(h, y2)
+        
+        if x2 <= x1 or y2 <= y1:
+            return None
+
+        crop = frame[y1:y2, x1:x2]
+        if crop.size == 0:
+            return None
+        
+        key = (feed_id, local_id)
+        now = time.time()
+        with self.lock:
+            # Use cached mapping if fresh (< 3 seconds), otherwise re-evaluate
+            if key in self.local_to_global:
+                entry = self.local_to_global[key]
+                if now - entry['last_seen'] < 3.0:
+                    entry['last_seen'] = now
+                    return entry['global_id']
+                # Stale — re-evaluate embedding
+
+            new_emb = self.get_embedding(crop)
+            
+            best_id = None
+            best_sim = -1
+            
+            for gid, data in self.global_subjects.items():
+                sim = torch.mm(new_emb, data['embedding'].t()).item()
+                if sim > best_sim:
+                    best_sim = sim
+                    best_id = gid
+            
+            if best_sim > self.threshold:
+                match_id = best_id
+                # Update embedding (moving average)
+                self.global_subjects[match_id]['embedding'] = (
+                    0.9 * self.global_subjects[match_id]['embedding'] + 0.1 * new_emb
+                )
+            else:
+                match_id = self.next_global_id
+                self.next_global_id += 1
+                self.global_subjects[match_id] = {
+                    'embedding': new_emb,
+                    'first_seen': now
+                }
+            
+            self.local_to_global[key] = {'global_id': match_id, 'last_seen': now}
+            return match_id
+
+    def cleanup_feed(self, feed_id, active_local_ids):
+        """Remove stale local-to-global mappings for tracks no longer active."""
+        with self.lock:
+            stale = [k for k in self.local_to_global if k[0] == feed_id and k[1] not in active_local_ids]
+            for k in stale:
+                del self.local_to_global[k]
+
+    def get_global_id_cached(self, feed_id, local_id):
+        """Get cached global_id without re-evaluating (for re-id check)."""
+        key = (feed_id, local_id)
+        entry = self.local_to_global.get(key)
+        return entry['global_id'] if entry else None
+
+identity_manager = SubjectIdentityManager()
+previous_score = 0.0
+ALPHA = 0.2
+
+# ════════════════════════════════════════════════════════════════
+# OPERATOR AUDIT LOG
+# ════════════════════════════════════════════════════════════════
+audit_log = deque(maxlen=200)
+audit_lock = threading.Lock()
+
+def log_audit(action, details="", severity="INFO"):
+    """Append an event to the operator audit log."""
+    entry = {
+        'timestamp': datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
+        'action': action,
+        'details': details,
+        'severity': severity  # INFO, WARNING, CRITICAL
+    }
+    with audit_lock:
+        audit_log.appendleft(entry)
+    if severity == "CRITICAL":
+        print(f"[AUDIT-CRITICAL] {entry['timestamp']} | {action} | {details}")
+
+log_audit("SYSTEM_BOOT", "Sentinel V14 initializing — Dispatch Integration active.", "INFO")
+
+# ════════════════════════════════════════════════════════════════
+# TELEGRAM DISPATCH ENGINE
+# ════════════════════════════════════════════════════════════════
+
+class TelegramDispatcher:
+    """Sends alert messages via Telegram Bot API using simple HTTP requests."""
+
+    def __init__(self, bot_token='', chat_id=''):
+        self.bot_token = bot_token
+        self.chat_id = chat_id
+        self.base_url = ''
+        if bot_token:
+            self.base_url = f'https://api.telegram.org/bot{bot_token}'
+
+    def configure(self, bot_token, chat_id=''):
+        self.bot_token = bot_token
+        self.chat_id = chat_id
+        self.base_url = f'https://api.telegram.org/bot{bot_token}'
+
+    def is_configured(self):
+        return bool(self.bot_token and self.chat_id)
+
+    def send_message(self, text, parse_mode='HTML'):
+        """Send a text message to the configured chat."""
+        if not self.is_configured():
+            return {'ok': False, 'error': 'Telegram not configured (missing token or chat_id)'}
+        try:
+            resp = http_requests.post(
+                f'{self.base_url}/sendMessage',
+                json={
+                    'chat_id': self.chat_id,
+                    'text': text,
+                    'parse_mode': parse_mode
+                },
+                timeout=10
+            )
+            result = resp.json()
+            if result.get('ok'):
+                log_audit("DISPATCH_SENT", f"Telegram message delivered to chat {self.chat_id}", "INFO")
+            else:
+                log_audit("DISPATCH_FAILED", f"Telegram API error: {result.get('description', 'Unknown')}", "WARNING")
+            return result
+        except Exception as e:
+            log_audit("DISPATCH_ERROR", f"Network error: {str(e)}", "WARNING")
+            return {'ok': False, 'error': str(e)}
+
+    def test_connection(self):
+        """Send a test message to verify the bot is working."""
+        test_msg = (
+            "🛡️ <b>SENTINEL DISPATCH — TEST</b>\n\n"
+            "✅ Connection verified.\n"
+            "This bot is now linked to Project SENTINEL.\n\n"
+            f"{datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n"
+            "<i>Automated threat alerts will be delivered here.</i>"
+        )
+        return self.send_message(test_msg)
+
+    def auto_detect_chat_id(self):
+        """Try to detect chat_id from recent /start messages."""
+        if not self.bot_token:
+            return None
+        try:
+            resp = http_requests.get(f'{self.base_url}/getUpdates', timeout=10)
+            data = resp.json()
+            if data.get('ok') and data.get('result'):
+                for update in reversed(data['result']):
+                    msg = update.get('message', {})
+                    chat = msg.get('chat', {})
+                    if chat.get('id'):
+                        self.chat_id = str(chat['id'])
+                        log_audit("DISPATCH_CONFIG", f"Auto-detected chat ID: {self.chat_id}", "INFO")
+                        return self.chat_id
+        except:
+            pass
+        return None
+
+    def send_threat_alert(self, threat_score, details, active_modules):
+        """Format and send a threat alert message."""
+        modules_str = ', '.join([m.upper() for m in active_modules]) if active_modules else 'NONE'
+        timestamp = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+
+        # Build detail lines
+        detail_lines = []
+        for module, data in details.items():
+            if isinstance(data, dict):
+                for k, v in data.items():
+                    if v and v != 0 and v != False:
+                        label = k.replace('_', ' ').title()
+                        if isinstance(v, bool):
+                            v = '⚠️ YES'
+                        detail_lines.append(f"  • {label}: {v}")
+
+        details_text = '\n'.join(detail_lines) if detail_lines else '  No specific details'
+
+        severity = '🔴 CRITICAL' if threat_score >= 80 else '🟠 ELEVATED' if threat_score >= 50 else '🟡 GUARDED'
+
+        msg = (
+            f"🚨 <b>SENTINEL THREAT ALERT</b>\n\n"
+            f"<b>Threat Level:</b> {severity} ({threat_score}/100)\n"
+            f"<b>Active Modules:</b> {modules_str}\n"
+            f"<b>Time:</b> {timestamp}\n\n"
+            f"<b>Detection Details:</b>\n{details_text}\n\n"
+            f"🏛️ <i>Project SENTINEL — Automated Dispatch</i>"
+        )
+        return self.send_message(msg)
+
+
+# Initialize dispatcher with the bot token
+telegram_dispatcher = TelegramDispatcher(
+    bot_token='8659917680:AAFHai-uliSdnX2zNhKL_-a5fZV_x0DcJ2E',
+    chat_id='8521681859'  # Paulo's Telegram chat ID
+)
+
+# ════════════════════════════════════════════════════════════════
+# DISPATCH STATE MANAGEMENT
+# ════════════════════════════════════════════════════════════════
+
+dispatch_log = deque(maxlen=100)       # History of all dispatch events
+pending_approvals = {}                  # id -> dispatch event awaiting approval
+dispatch_lock = threading.Lock()
+
+# Dispatch settings
+dispatch_settings = {
+    'auto_dispatch': False,             # If True, send alerts immediately; if False, queue for approval
+    'cooldown_seconds': 60,             # Minimum seconds between auto-dispatches
+    'enabled': True,                    # Master switch
+    'last_dispatch_time': 0,            # Timestamp of last sent alert
+}
+
+def create_dispatch_event(threat_score, details, active_modules):
+    """Create a dispatch event and either auto-send or queue for approval."""
+    event_id = str(uuid.uuid4())[:8]
+    now = time.time()
+    event = {
+        'id': event_id,
+        'timestamp': datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
+        'threat_score': threat_score,
+        'details': dict(details) if details else {},
+        'active_modules': list(active_modules),
+        'status': 'pending',  # pending, sent, rejected, failed
+        'created_at': now,
+    }
+
+    if not dispatch_settings['enabled']:
+        return
+
+    if not telegram_dispatcher.is_configured():
+        event['status'] = 'failed'
+        event['error'] = 'Telegram not configured'
+        with dispatch_lock:
+            dispatch_log.appendleft(event)
+        log_audit("DISPATCH_SKIPPED", "Telegram not configured — alert not sent", "WARNING")
+        return
+
+    # Check cooldown
+    if now - dispatch_settings['last_dispatch_time'] < dispatch_settings['cooldown_seconds']:
+        remaining = int(dispatch_settings['cooldown_seconds'] - (now - dispatch_settings['last_dispatch_time']))
+        log_audit("DISPATCH_COOLDOWN", f"Alert suppressed — cooldown active ({remaining}s remaining)", "INFO")
+        return
+
+    if dispatch_settings['auto_dispatch']:
+        # Send immediately
+        result = telegram_dispatcher.send_threat_alert(threat_score, details, active_modules)
+        event['status'] = 'sent' if result.get('ok') else 'failed'
+        if not result.get('ok'):
+            event['error'] = result.get('error', result.get('description', 'Unknown'))
+        dispatch_settings['last_dispatch_time'] = now
+        with dispatch_lock:
+            dispatch_log.appendleft(event)
+        log_audit("AUTO_DISPATCH", f"Threat alert auto-dispatched (score: {threat_score})", "CRITICAL")
+    else:
+        # Queue for human approval
+        with dispatch_lock:
+            pending_approvals[event_id] = event
+        log_audit("DISPATCH_QUEUED", f"Alert queued for operator approval (score: {threat_score})", "WARNING")
+
+def approve_dispatch_event(event_id):
+    """Operator approves a pending dispatch."""
+    with dispatch_lock:
+        event = pending_approvals.pop(event_id, None)
+    if not event:
+        return {'error': 'Event not found or already processed'}
+
+    result = telegram_dispatcher.send_threat_alert(
+        event['threat_score'], event['details'], event['active_modules']
+    )
+    event['status'] = 'sent' if result.get('ok') else 'failed'
+    if not result.get('ok'):
+        event['error'] = result.get('error', result.get('description', 'Unknown'))
+    event['approved_at'] = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+    dispatch_settings['last_dispatch_time'] = time.time()
+
+    with dispatch_lock:
+        dispatch_log.appendleft(event)
+    log_audit("DISPATCH_APPROVED", f"Operator approved alert {event_id} (score: {event['threat_score']})", "CRITICAL")
+    return {'success': True, 'status': event['status']}
+
+def reject_dispatch_event(event_id):
+    """Operator rejects a pending dispatch."""
+    with dispatch_lock:
+        event = pending_approvals.pop(event_id, None)
+    if not event:
+        return {'error': 'Event not found or already processed'}
+
+    event['status'] = 'rejected'
+    event['rejected_at'] = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+    with dispatch_lock:
+        dispatch_log.appendleft(event)
+    log_audit("DISPATCH_REJECTED", f"Operator rejected alert {event_id}", "INFO")
+    return {'success': True}
+
+# ════════════════════════════════════════════════════════════════
+# GIF HANDLER
+# ════════════════════════════════════════════════════════════════
+class GIFReader:
+    """Handles GIF file reading and frame extraction."""
+    def __init__(self, filepath):
+        self.filepath = filepath
+        self.gif = Image.open(filepath)
+        self.frame_count = 0
+        try:
+            while True:
+                self.gif.seek(self.frame_count)
+                self.frame_count += 1
+        except EOFError:
+            pass
+        
+        self.current_frame_idx = 0
+        # Get duration for each frame (in milliseconds)
+        try:
+            self.gif.seek(0)
+            self.frame_duration = self.gif.info.get('duration', 100) / 1000.0  # Convert to seconds
+        except:
+            self.frame_duration = 0.04  # Default ~25 FPS
+    
+    def get_next_frame(self):
+        """Get the next frame from GIF."""
+        try:
+            self.gif.seek(self.current_frame_idx)
+            frame = self.gif.convert('RGB')
+            frame_np = np.array(frame)
+            # Convert RGB to BGR for OpenCV
+            frame_bgr = cv2.cvtColor(frame_np, cv2.COLOR_RGB2BGR)
+            
+            self.current_frame_idx = (self.current_frame_idx + 1) % self.frame_count
+            return True, frame_bgr, self.frame_duration
+        except Exception as e:
+            print(f"[GIF] Error reading frame: {e}")
+            return False, None, 0
+    
+    def close(self):
+        if self.gif:
+            self.gif.close()
+
+# ════════════════════════════════════════════════════════════════
+# THREADED VIDEO CAPTURE (OPTIMIZED FOR LARGE FILES)
+# ════════════════════════════════════════════════════════════════
+class VideoCamera:
+    def __init__(self, src=0, feed_id=0):
+        self.feed_id = feed_id
+        self.src = src
+        self.source_is_file = isinstance(src, str)
+        self.is_gif = False
+        self.gif_reader = None
+        self.stream = None
+        self.lock = threading.Lock()
+        self.frame_buffer = deque(maxlen=2)  # Keep only last 2 frames to reduce memory
+        
+        # Check if source is a GIF
+        if self.source_is_file and src.lower().endswith('.gif'):
+            self.is_gif = True
+            try:
+                self.gif_reader = GIFReader(src)
+                self.grabbed = True
+                success, frame, duration = self.gif_reader.get_next_frame()
+                self.frame = frame
+                self.target_delay = duration
+                self.stopped = False
+                print(f"[V8] GIF loaded: {src} ({self.gif_reader.frame_count} frames)")
+            except Exception as e:
+                print(f"[WARNING] Could not open GIF: {src} - {e}")
+                self.grabbed = False
+                self.frame = None
+                self.stopped = True
+                return
+        else:
+            # Regular video file or camera
+            self.stream = cv2.VideoCapture(src)
+            
+            if not self.stream.isOpened():
+                print(f"[WARNING] Could not open video source: {src}")
+                self.grabbed = False
+                self.frame = None
+                self.stopped = True
+                return
+
+            (self.grabbed, self.frame) = self.stream.read()
+            self.stopped = False
+            
+            # For file sources: read at the file's native FPS to simulate live playback
+            self.target_delay = 0
+            if self.source_is_file:
+                fps = self.stream.get(cv2.CAP_PROP_FPS)
+                if fps and fps > 0:
+                    self.target_delay = 1.0 / fps
+                    print(f"[V8] Video loaded: {src} (FPS: {fps:.2f})")
+                else:
+                    self.target_delay = 1.0 / 25  # fallback 25fps
+
+        self.t = threading.Thread(target=self.update, args=())
+        self.t.daemon = True
+        self.t.start()
+
+    def update(self):
+        while True:
+            if self.stopped:
+                return
+            
+            frame_start = time.time()
+            
+            if self.is_gif:
+                # Handle GIF frames
+                grabbed, frame, delay = self.gif_reader.get_next_frame()
+            else:
+                # Handle video/camera frames
+                (grabbed, frame) = self.stream.read()
+
+                if not grabbed and self.source_is_file:
+                    # End of video file — loop it seamlessly like CCTV
+                    self.stream.set(cv2.CAP_PROP_POS_FRAMES, 0)
+                    (grabbed, frame) = self.stream.read()
+
+            with self.lock:
+                self.grabbed = grabbed
+                if grabbed and frame is not None:
+                    self.frame = frame
+                    # Clear buffer and add only current frame to minimize memory
+                    self.frame_buffer.clear()
+                    self.frame_buffer.append(frame)
+
+            # Throttle to native FPS
+            if self.target_delay > 0:
+                elapsed = time.time() - frame_start
+                sleep_time = max(0, self.target_delay - elapsed)
+                if sleep_time > 0:
+                    time.sleep(sleep_time)
+
+    def get_frame(self):
+        # Handle case where thread wasn't started
+        if self.stopped and self.frame is None:
+             return False, None
+             
+        with self.lock:
+            return self.grabbed, self.frame.copy() if self.frame is not None else (False, None)
+
+    def stop(self):
+        self.stopped = True
+        if hasattr(self, 't') and self.t.is_alive():
+            self.t.join(timeout=2)
+        
+        if self.is_gif and self.gif_reader:
+            self.gif_reader.close()
+        elif self.stream:
+            self.stream.release()
+
+    def set_source(self, src):
+        self.stop()
+        self.__init__(src, self.feed_id)
+        # Note: __init__ starts the new thread if successful
+
+    def is_opened(self):
+        if self.is_gif:
+            return self.gif_reader is not None
+        return self.stream is not None and self.stream.isOpened()
+
+    def get(self, prop):
+        if self.is_gif:
+            if prop == cv2.CAP_PROP_FPS:
+                return 1.0 / self.target_delay if self.target_delay > 0 else 25
+            return 0
+        return self.stream.get(prop) if self.stream else 0
+
+    def set(self, prop, val):
+        if not self.is_gif and self.stream:
+            self.stream.set(prop, val)
+
+
+def get_or_create_feed(feed_id=0, src=None):
+    """Get existing feed or create a new one."""
+    global camera_feeds
+    if feed_id in camera_feeds and camera_feeds[feed_id].is_opened():
+        return camera_feeds[feed_id]
+
+    if src is None:
+        # Check per-feed source first
+        if feed_id in feed_sources and os.path.exists(feed_sources[feed_id]):
+            src = feed_sources[feed_id]
+        elif feed_id == 0:
+            src = 0  # Default webcam for feed 0 only
+        else:
+            return None  # No source for this feed
+
+    cam = VideoCamera(src, feed_id)
+    camera_feeds[feed_id] = cam
+    log_audit("FEED_CREATED", f"Feed #{feed_id} initialized (source: {src})", "INFO")
+    return cam
+
+
+def restart_feed(feed_id=0):
+    """Restart a specific feed and bump the version so generators re-acquire."""
+    global camera_feeds, feed_versions
+    if feed_id in camera_feeds:
+        camera_feeds[feed_id].stop()
+        del camera_feeds[feed_id]
+
+    src = feed_sources.get(feed_id)
+    if src and os.path.exists(src):
+        camera_feeds[feed_id] = VideoCamera(src, feed_id)
+    elif feed_id == 0:
+        camera_feeds[feed_id] = VideoCamera(0, feed_id)
+    # else: no source, feed stays empty
+
+    feed_versions[feed_id] = feed_versions.get(feed_id, 0) + 1
+    log_audit("FEED_RESTART", f"Feed #{feed_id} restarted (v{feed_versions[feed_id]}).", "INFO")
+
+
+# ════════════════════════════════════════════════════════════════
+# SCORING & DETECTION LOGIC
+# ════════════════════════════════════════════════════════════════
+def smooth_score(new_score):
+    global previous_score
+    smoothed = ALPHA * new_score + (1 - ALPHA) * previous_score
+    previous_score = smoothed
+    return int(smoothed)
+
+
+def calculate_threat_score(mode, details):
+    score = 0
+    if mode == 'weapon':
+        score += details.get('guns', 0) * 100
+        score += details.get('knives', 0) * 80
+    elif mode == 'facemask':
+        score += details.get('with_mask', 0) * 60
+        score += details.get('obscured_faces', 0) * 90
+    elif mode == 'movement':
+        score += details.get('long_stays', 0) * 40
+    elif mode == 'public_safety':
+        score += details.get('abandoned_objects', 0) * 70
+        if details.get('crowd_panic', False):
+            score += 85
+    return min(score, 100)
+
+
+# ════════════════════════════════════════════════════════════════
+# FRAME GENERATOR (per-feed) - OPTIMIZED
+# ════════════════════════════════════════════════════════════════
+def generate_frames(feed_id=0):
+    global active_modules, person_history, object_history, previous_score, red_alert
+
+    camera = get_or_create_feed(feed_id)
+    my_version = feed_versions.get(feed_id, 0)
+
+    while True:
+        # Detect if the feed was restarted (e.g. user uploaded a video or switched source)
+        current_version = feed_versions.get(feed_id, 0)
+        if current_version != my_version:
+            # Feed was swapped — re-acquire the new camera
+            my_version = current_version
+            camera = camera_feeds.get(feed_id)
+            if camera is None:
+                time.sleep(0.1)
+                continue
+
+        if not camera.is_opened():
+            time.sleep(0.1)
+            camera = get_or_create_feed(feed_id)
+            my_version = feed_versions.get(feed_id, 0)
+            continue
+
+        success, img = camera.get_frame()
+
+        if not success or img is None:
+            # Generate a "NO SIGNAL" placeholder frame
+            blank_frame = np.zeros((480, 640, 3), dtype=np.uint8)
+            cv2.putText(blank_frame, "NO SIGNAL / CAMERA UNAVAILABLE", (100, 240), 
+                       cv2.FONT_HERSHEY_SIMPLEX, 0.8, (0, 0, 255), 2)
+            cv2.putText(blank_frame, "Please use 'Upload Video' on Server", (120, 280), 
+                       cv2.FONT_HERSHEY_SIMPLEX, 0.6, (200, 200, 200), 1)
+            
+            # Encode and yield
+            ret, buffer = cv2.imencode('.jpg', blank_frame)
+            frame_bytes = buffer.tobytes()
+            yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n' b'X-Score: 0\r\n\r\n' + frame_bytes + b'\r\n')
+            time.sleep(1.0) # Slow update for static error frame
+            continue
+
+        # Resize for performance
+        h, w = img.shape[:2]
+        new_w = 640
+        new_h = int(h * (new_w / w))
+        frame = cv2.resize(img, (new_w, new_h))
+        frame = cv2.GaussianBlur(frame, (3, 3), 0)
+
+        current_time = time.time()
+        current_details = {}
+
+        if 'movement' in active_modules:
+            results = model_movement(frame, stream=True, verbose=False)
+            detections = np.empty((0, 5))
+            for r in results:
+                for box in r.boxes:
+                    if int(box.cls[0]) == 0:
+                        x1, y1, x2, y2 = map(int, box.xyxy[0])
+                        conf = math.ceil(box.conf[0] * 100) / 100
+                        detections = np.vstack((detections, [x1, y1, x2, y2, conf]))
+            # Use feed-specific tracker
+            tracks = feed_trackers[feed_id].update(detections)
+            current_used_ids = []
+            journey_active = 'suspect_journey' in active_modules
+            
+            for tr in tracks:
+                x1, y1, x2, y2, local_id = tr
+                
+                is_reidentified = False
+                display_id = f"L{int(local_id)}"
+                
+                # Only run Re-ID when suspect_journey module is active
+                if journey_active:
+                    global_id = identity_manager.match_or_register(feed_id, local_id, frame, (x1, y1, x2, y2))
+                    if global_id is not None:
+                        # Check if this subject exists on ANY other feed
+                        for key, entry in identity_manager.local_to_global.items():
+                            gid = entry['global_id'] if isinstance(entry, dict) else entry
+                            if gid == global_id and key[0] != feed_id:
+                                is_reidentified = True
+                                break
+                        display_id = global_id
+                else:
+                    display_id = int(local_id)
+                
+                midX = int((x1 + x2) / 2)
+                headX, headY = midX, int(y1)
+                
+                # Track journey (only when journey module is active)
+                if journey_active:
+                    journey_log.append({
+                        'global_id': display_id,
+                        'feed_id': feed_id,
+                        'timestamp': datetime.datetime.now().strftime("%H:%M:%S"),
+                        'local_id': int(local_id)
+                    })
+
+                pid = display_id
+                if pid not in person_history:
+                    person_history[pid] = []
+                person_history[pid].append((headX, headY, current_time))
+                person_history[pid] = [p for p in person_history[pid] if current_time - p[2] < 5.0]
+
+                if len(person_history[pid]) > 1:
+                    pts = np.array([(p[0], p[1]) for p in person_history[pid]], np.int32).reshape((-1, 1, 2))
+                    cv2.polylines(frame, [pts], False, (0, 255, 0), 2)
+
+                target_prev = current_time - 1.0
+                prev_pt = None
+                if len(person_history[pid]) > 2:
+                    diffs = [abs(p[2] - target_prev) for p in person_history[pid]]
+                    min_idx = int(np.argmin(diffs))
+                    if diffs[min_idx] < 0.5:
+                        prev_pt = person_history[pid][min_idx]
+
+                if prev_pt:
+                    dt = current_time - prev_pt[2]
+                    if dt > 0.1:
+                        vx = (headX - prev_pt[0]) / dt
+                        vy = (headY - prev_pt[1]) / dt
+                        predX = int(headX + vx * 4)
+                        predY = int(headY + vy * 4)
+                        cv2.arrowedLine(frame, (headX, headY), (predX, predY), (0, 255, 255), 2, tipLength=0.3)
+
+                # ── Visual markers ──
+                if is_reidentified:
+                    # TRACKED subject: cyan reticle + thick border
+                    cx, cy = int((x1 + x2) / 2), int((y1 + y2) / 2)
+                    r = min(int(x2 - x1), int(y2 - y1)) // 3
+                    cv2.circle(frame, (cx, cy), r, (255, 255, 0), 2)        # Cyan circle
+                    cv2.line(frame, (cx - r - 5, cy), (cx + r + 5, cy), (255, 255, 0), 1)  # H crosshair
+                    cv2.line(frame, (cx, cy - r - 5), (cx, cy + r + 5), (255, 255, 0), 1)  # V crosshair
+                    cv2.rectangle(frame, (int(x1), int(y1)), (int(x2), int(y2)), (255, 255, 0), 3)
+                    cv2.putText(frame, f"TRACKED #{display_id}", (int(x1), int(y1) - 8), cv2.FONT_HERSHEY_SIMPLEX, 0.6, (255, 255, 0), 2)
+                else:
+                    # Normal detection: magenta border
+                    cv2.rectangle(frame, (int(x1), int(y1)), (int(x2), int(y2)), (255, 0, 255), 2)
+                    cv2.putText(frame, f"ID:{display_id}", (int(x1), int(y1) - 5), cv2.FONT_HERSHEY_SIMPLEX, 0.6, (255, 0, 255), 2)
+                current_used_ids.append(display_id)
+
+            # Cleanup stale Re-ID mappings for tracks no longer in this frame
+            if journey_active:
+                active_local_ids = set(int(tr[4]) for tr in tracks)
+                identity_manager.cleanup_feed(feed_id, active_local_ids)
+
+            long_stays = sum(1 for hist in person_history.values() if len(hist) > 30)
+            current_details['movement'] = {'total_people': len(person_history), 'current_people': len(current_used_ids), 'long_stays': long_stays}
+
+        if 'facemask' in active_modules:
+            results_mask = model_facemask(frame, stream=True, verbose=False)
+            with_mask = 0
+            without_mask = 0
+            mask_boxes = []
+
+            for r in results_mask:
+                for box in r.boxes:
+                    cls = int(box.cls[0])
+                    x1, y1, x2, y2 = map(int, box.xyxy[0])
+                    mask_boxes.append((x1, y1, x2, y2))
+
+                    if cls == 0:
+                        with_mask += 1
+                        color = (0, 0, 255)
+                        label = "Mask (THREAT)"
+                    else:
+                        without_mask += 1
+                        color = (0, 255, 0)
+                        label = "No Mask"
+                    cv2.rectangle(frame, (x1, y1), (x2, y2), color, 2)
+                    cv2.putText(frame, label, (x1, y1 - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 2)
+
+            obscured_faces = 0
+            people_res = model_movement(frame, stream=True, verbose=False, classes=[0])
+            people_boxes = []
+            for r in people_res:
+                for box in r.boxes:
+                    people_boxes.append(tuple(map(int, box.xyxy[0])))
+
+            def overlap(person, face):
+                px1, py1, px2, py2 = person
+                fx1, fy1, fx2, fy2 = face
+                upper = py1 + (py2 - py1) // 1.5
+                return fx1 >= px1 and fx2 <= px2 and fy1 >= py1 and fy2 <= upper
+
+            for pbox in people_boxes:
+                if not any(overlap(pbox, mbox) for mbox in mask_boxes):
+                    obscured_faces += 1
+                    cv2.rectangle(frame, (pbox[0], pbox[1]), (pbox[2], pbox[3]), (0, 0, 255), 3)
+                    cv2.putText(frame, "Face Obscured (THREAT)", (pbox[0], pbox[1] - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.6, (0, 0, 255), 2)
+
+            current_details['facemask'] = {'with_mask': with_mask, 'without_mask': without_mask, 'obscured_faces': obscured_faces}
+
+        if 'weapon' in active_modules:
+            h_w, w_w = frame.shape[:2]
+            weapon_w = 416
+            weapon_h = int(h_w * (weapon_w / w_w))
+            weapon_frame = cv2.resize(frame, (weapon_w, weapon_h))
+
+            results = model_weapon(weapon_frame, stream=True, verbose=False, conf=0.5)
+            guns = 0
+            melee = 0
+
+            scale_x = w_w / weapon_w
+            scale_y = h_w / weapon_h
+
+            firearm_keywords = ['gun', 'pistol', 'rifle', 'shotgun', 'sniper', 'machine', 'glock', 'ak47', 'm4', 'awp', 'famas', 'galil', 'mp5', 'p90']
+            melee_keywords = ['knife', 'sword', 'dagger', 'axe', 'bat', 'stick', 'machete', 'blade']
+
+            for r in results:
+                for box in r.boxes:
+                    cls = int(box.cls[0])
+                    conf = float(box.conf[0])
+                    x1, y1, x2, y2 = box.xyxy[0]
+                    x1 = int(x1 * scale_x)
+                    y1 = int(y1 * scale_y)
+                    x2 = int(x2 * scale_x)
+                    y2 = int(y2 * scale_y)
+
+                    class_name = model_weapon.names[cls].lower()
+                    is_firearm = any(k in class_name for k in firearm_keywords)
+                    is_melee = any(k in class_name for k in melee_keywords)
+
+                    if is_firearm:
+                        guns += 1
+                        color = (0, 0, 255)
+                        label = f"{class_name.upper()} {conf:.2f}"
+                    elif is_melee:
+                        melee += 1
+                        color = (0, 165, 255)
+                        label = f"{class_name.upper()} {conf:.2f}"
+                    else:
+                        guns += 1
+                        color = (0, 0, 255)
+                        label = f"{class_name.upper()} {conf:.2f}"
+
+                    cv2.rectangle(frame, (x1, y1), (x2, y2), color, 3)
+                    cv2.putText(frame, label, (x1, y1 - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.6, color, 2)
+                    cv2.rectangle(frame, (0, 0), (new_w, new_h), (0, 255, 0), 5)
+
+            current_details['weapon'] = {'guns': guns, 'knives': melee}
+
+        if 'public_safety' in active_modules:
+            results = model_movement(frame, stream=True, verbose=False, classes=[0, 24, 26, 28])
+            detections = np.empty((0, 5))
+            object_detections = []
+
+            for r in results:
+                for box in r.boxes:
+                    cls = int(box.cls[0])
+                    x1, y1, x2, y2 = map(int, box.xyxy[0])
+                    conf = float(box.conf[0])
+                    if cls == 0:
+                        detections = np.vstack((detections, [x1, y1, x2, y2, conf]))
+                    else:
+                        object_detections.append({'box': [x1, y1, x2, y2], 'cls': cls, 'conf': conf})
+                        cv2.rectangle(frame, (x1, y1), (x2, y2), (255, 200, 0), 1)
+
+            tracks = feed_trackers[feed_id].update(detections)
+            velocities = []
+            for tr in tracks:
+                x1, y1, x2, y2, Id = tr
+                midX, midY = int((x1 + x2) / 2), int((y1 + y2) / 2)
+                if Id not in person_history:
+                    person_history[Id] = []
+                person_history[Id].append((midX, midY, current_time))
+                person_history[Id] = [p for p in person_history[Id] if current_time - p[2] < 2.0]
+
+                if len(person_history[Id]) > 2:
+                    p_start = person_history[Id][0]
+                    p_end = person_history[Id][-1]
+                    dt = p_end[2] - p_start[2]
+                    if dt > 0.5:
+                        dist = math.sqrt((p_end[0] - p_start[0])**2 + (p_end[1] - p_start[1])**2)
+                        speed = dist / dt
+                        velocities.append(speed)
+
+                cv2.rectangle(frame, (int(x1), int(y1)), (int(x2), int(y2)), (0, 255, 0), 1)
+
+            crowd_panic = False
+            avg_speed = 0
+            if len(velocities) > 3:
+                avg_speed = sum(velocities) / len(velocities)
+                if avg_speed > 150:
+                    crowd_panic = True
+                    cv2.putText(frame, f"CROWD ANOMALY: PANIC ({int(avg_speed)} px/s)", (50, 50), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 3)
+
+            active_objects = []
+            for obj in object_detections:
+                box = obj['box']
+                cx, cy = (box[0] + box[2]) // 2, (box[1] + box[3]) // 2
+                matched_id = None
+                for obj_id, history in object_history.items():
+                    last_pos = history['last_pos']
+                    dist = math.sqrt((cx - last_pos[0])**2 + (cy - last_pos[1])**2)
+                    if dist < 50:
+                        matched_id = obj_id
+                        break
+                if matched_id is None:
+                    new_id = str(time.time())
+                    object_history[new_id] = {'start_time': current_time, 'last_seen': current_time, 'last_pos': (cx, cy), 'stationary': True}
+                    matched_id = new_id
+                else:
+                    object_history[matched_id]['last_seen'] = current_time
+                    object_history[matched_id]['last_pos'] = (cx, cy)
+                active_objects.append(matched_id)
+
+            abandoned_count = 0
+            keys_to_remove = []
+            for obj_id, history in object_history.items():
+                if current_time - history['last_seen'] > 2.0:
+                    keys_to_remove.append(obj_id)
+                    continue
+                duration = current_time - history['start_time']
+                if duration > 10.0:
+                    abandoned_count += 1
+                    pos = history['last_pos']
+                    cv2.circle(frame, pos, 30, (0, 0, 255), 2)
+                    cv2.putText(frame, f"ABANDONED {int(duration)}s", (pos[0]-40, pos[1]-40), cv2.FONT_HERSHEY_SIMPLEX, 0.6, (0, 0, 255), 2)
+
+            for k in keys_to_remove:
+                del object_history[k]
+
+            current_details['public_safety'] = {'people_count': len(tracks), 'avg_crowd_speed': int(avg_speed), 'crowd_panic': crowd_panic, 'abandoned_objects': abandoned_count}
+
+        # If no modules active, show idle state
+        if not active_modules:
+            cv2.putText(frame, "NO DETECTION ACTIVE", (new_w // 2 - 140, new_h // 2), 
+                       cv2.FONT_HERSHEY_SIMPLEX, 1.2, (100, 100, 100), 2)
+            current_details = {'status': 'idle', 'active_modules': 0}
+
+        # Store details globally
+        global latest_details
+        latest_details = current_details
+
+        # Aggregated threat scoring from ALL active modules
+        total_score = 0
+        for module, details in current_details.items():
+            if module == 'weapon':
+                total_score += details.get('guns', 0) * 100
+                total_score += details.get('knives', 0) * 80
+            elif module == 'facemask':
+                total_score += details.get('with_mask', 0) * 60
+                total_score += details.get('obscured_faces', 0) * 90
+            elif module == 'movement':
+                total_score += details.get('long_stays', 0) * 40
+            elif module == 'public_safety':
+                total_score += details.get('abandoned_objects', 0) * 70
+                if details.get('crowd_panic', False):
+                    total_score += 85
+        
+        raw_score = min(total_score, 100)
+        smooth = smooth_score(raw_score)
+
+        # Red Alert escalation
+        was_red = red_alert
+        red_alert = smooth >= 80
+        if red_alert and not was_red:
+            active_str = ', '.join([m.upper() for m in active_modules]) if active_modules else 'NONE'
+            log_audit("RED_ALERT_TRIGGERED", f"Threat score escalated to {smooth}. Active: {active_str}", "CRITICAL")
+            # ── Dispatch Integration: trigger alert on RED_ALERT ──
+            threading.Thread(
+                target=create_dispatch_event,
+                args=(smooth, dict(current_details), set(active_modules)),
+                daemon=True
+            ).start()
+        elif not red_alert and was_red:
+            log_audit("RED_ALERT_CLEARED", f"Threat score de-escalated to {smooth}.", "WARNING")
+
+        # Feed label overlay
+        cv2.putText(frame, f"FEED {feed_id} | LIVE", (10, 20), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 255), 1)
+
+        ret, buffer = cv2.imencode('.jpg', frame)
+        frame_bytes = buffer.tobytes()
+        yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n' b'X-Score: ' + str(smooth).encode() + b'\r\n\r\n' + frame_bytes + b'\r\n')
+
+
+# Global to store latest details for stats
+latest_details = {}
+
+
+# ════════════════════════════════════════════════════════════════
+# ROUTES
+# ════════════════════════════════════════════════════════════════
+@app.route('/')
+def index():
+    return render_template('sentinel_dashboard_v13.html')
+
+
+@app.route('/journey_data')
+def get_journey_data():
+    """Return recent subject journey logs for the dashboard."""
+    # Group by global_id and get the last seen location for each
+    unique_journeys = {}
+    for entry in list(journey_log):
+        gid = entry['global_id']
+        if gid not in unique_journeys:
+            unique_journeys[gid] = {
+                'id': gid,
+                'last_feed': entry['feed_id'],
+                'last_seen': entry['timestamp'],
+                'history': []
+            }
+        unique_journeys[gid]['history'].append({
+            'feed': entry['feed_id'],
+            'time': entry['timestamp']
+        })
+    
+    # Sort history and limit to last 5 entries per ID
+    for gid in unique_journeys:
+        unique_journeys[gid]['history'] = unique_journeys[gid]['history'][-5:]
+        unique_journeys[gid]['last_feed'] = unique_journeys[gid]['history'][-1]['feed']
+        unique_journeys[gid]['last_seen'] = unique_journeys[gid]['history'][-1]['time']
+
+    return jsonify(list(unique_journeys.values()))
+
+
+@app.route('/video_feed')
+@app.route('/video_feed/<int:feed_id>')
+def video_feed(feed_id=0):
+    return Response(generate_frames(feed_id), mimetype='multipart/x-mixed-replace; boundary=frame')
+
+
+@app.route('/toggle_module', methods=['POST'])
+def toggle_module():
+    global active_modules
+    data = request.get_json()
+    module = data.get('module')
+    
+    valid_modules = ['movement', 'facemask', 'weapon', 'public_safety', 'suspect_journey']
+    if module not in valid_modules:
+        return jsonify({'error': 'Invalid module'}), 400
+    
+    if module in active_modules:
+        active_modules.remove(module)
+        log_audit("MODULE_DEACTIVATED", f"{module.upper()} detection disabled", "INFO")
+    else:
+        active_modules.add(module)
+        log_audit("MODULE_ACTIVATED", f"{module.upper()} detection enabled", "INFO")
+        
+        # When suspect_journey is activated, ensure movement is also active
+        if module == 'suspect_journey':
+            active_modules.add('movement')
+            log_audit("MODULE_ACTIVATED", "MOVEMENT auto-enabled for journey tracking", "INFO")
+    
+    return jsonify({
+        'success': True,
+        'active_modules': list(active_modules)
+    })
+
+
+@app.route('/set_source', methods=['POST'])
+def set_source():
+    data = request.get_json()
+    source = data.get('source')
+    feed_id = data.get('feed_id', 0)
+    if source == 'camera' and feed_id == 0:
+        feed_sources.pop(feed_id, None)
+        restart_feed(feed_id)
+        log_audit("SOURCE_CHANGE", f"Feed #{feed_id} set to live camera", "INFO")
+        return jsonify({'success': True})
+    return jsonify({'error': 'Invalid source'}), 400
+
+
+@app.route('/upload_video', methods=['POST'])
+@app.route('/upload_video/<int:feed_id>', methods=['POST'])
+def upload_video(feed_id=0):
+    """Upload a video to a specific feed. Default: feed 0."""
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+    
+    if feed_id < 0 or feed_id >= MAX_FEEDS:
+        return jsonify({'error': f'Invalid feed_id. Must be 0-{MAX_FEEDS-1}'}), 400
+    
+    filename = secure_filename(file.filename)
+    
+    allowed_extensions = {'.mp4', '.avi', '.mov', '.mkv', '.wmv', '.flv', '.webm', '.gif'}
+    file_ext = os.path.splitext(filename)[1].lower()
+    if file_ext not in allowed_extensions:
+        return jsonify({'error': f'Unsupported file format. Allowed: {", ".join(allowed_extensions)}'}), 400
+    
+    # Save with feed-specific prefix to avoid collisions
+    save_name = f"feed{feed_id}_{filename}"
+    filepath = os.path.join(app.config['UPLOAD_FOLDER'], save_name)
+    filepath = os.path.abspath(filepath)
+    file.save(filepath)
+    
+    # Register source for this feed and restart it
+    feed_sources[feed_id] = filepath
+    restart_feed(feed_id)
+
+    log_audit("FILE_UPLOAD", f"Feed #{feed_id}: {filename} uploaded", "INFO")
+    return jsonify({
+        'success': True,
+        'message': f'Feed {feed_id}: {filename} loaded',
+        'feed_id': feed_id,
+        'feed_url': f'/video_feed/{feed_id}'
+    })
+
+
+@app.route('/stats')
+def get_stats():
+    return jsonify({
+        'threat_score': int(previous_score),
+        'details': latest_details,
+        'red_alert': red_alert,
+        'active_modules': list(active_modules)
+    })
+
+
+@app.route('/audit_log')
+def get_audit_log():
+    with audit_lock:
+        entries = list(audit_log)
+    return jsonify({'log': entries})
+
+
+@app.route('/generate_report', methods=['POST'])
+def generate_report():
+    timestamp = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+    log_audit("REPORT_GENERATED", f"Operator requested AI incident report at threat score {int(previous_score)}", "INFO")
+
+    prompt = f"""
+    You are the AI Agent for Project SENTINEL, a national security surveillance system.
+    Generate a concise, professional security incident report based on the following real-time data.
+    
+    TIMESTAMP: {timestamp}
+    THREAT SCORE: {int(previous_score)}/100
+    ACTIVE MODULES: {', '.join([m.upper() for m in active_modules])}
+    DETECTION DETAILS: {latest_details}
+    
+    Format the report with these sections:
+    1. INCIDENT SUMMARY (1-2 sentences)
+    2. THREAT ANALYSIS (Bullet points of specific risks)
+    3. RECOMMENDED ACTION (Clear directive for security personnel)
+    
+    Keep it brief and authoritative.
+    """
+
+    try:
+        response = model_gemini.generate_content(prompt)
+        report_text = response.text
+    except Exception as e:
+        print(f"Gemini Error: {e}")
+        import traceback
+        traceback.print_exc()
+        report_text = f"ERROR: Could not generate AI report. System fallback.\n\nDetails: {latest_details}"
+
+    return jsonify({'report': report_text})
+
+
+@app.route('/reset_system', methods=['POST'])
+def reset_system():
+    global active_modules, red_alert, previous_score, feed_sources
+    global person_history, object_history, latest_details
+    
+    active_modules = {'movement'}
+    red_alert = False
+    previous_score = 0.0
+    feed_sources.clear()
+    
+    person_history.clear()
+    object_history.clear()
+    latest_details.clear()
+    journey_log.clear()
+    identity_manager.global_subjects.clear()
+    identity_manager.local_to_global.clear()
+    identity_manager.next_global_id = 100
+    
+    for fid in list(camera_feeds.keys()):
+        restart_feed(fid)
+    
+    log_audit("SYSTEM_RESET", "Operator initiated full system reset. All states cleared.", "WARNING")
+    
+    return jsonify({'success': True})
+
+# ════════════════════════════════════════════════════════════════
+# DISPATCH ROUTES
+# ════════════════════════════════════════════════════════════════
+
+@app.route('/dispatch_log')
+def get_dispatch_log():
+    """Return dispatch history and pending approvals."""
+    with dispatch_lock:
+        log_entries = list(dispatch_log)
+        pending = list(pending_approvals.values())
+    return jsonify({
+        'log': log_entries,
+        'pending': pending,
+        'settings': {
+            'auto_dispatch': dispatch_settings['auto_dispatch'],
+            'cooldown_seconds': dispatch_settings['cooldown_seconds'],
+            'enabled': dispatch_settings['enabled'],
+            'telegram_configured': telegram_dispatcher.is_configured(),
+            'chat_id': telegram_dispatcher.chat_id or '',
+        }
+    })
+
+
+@app.route('/dispatch_settings', methods=['GET', 'POST'])
+def handle_dispatch_settings():
+    if request.method == 'GET':
+        return jsonify({
+            'auto_dispatch': dispatch_settings['auto_dispatch'],
+            'cooldown_seconds': dispatch_settings['cooldown_seconds'],
+            'enabled': dispatch_settings['enabled'],
+            'bot_token': telegram_dispatcher.bot_token[:10] + '...' if telegram_dispatcher.bot_token else '',
+            'chat_id': telegram_dispatcher.chat_id or '',
+            'telegram_configured': telegram_dispatcher.is_configured(),
+        })
+
+    data = request.get_json()
+    if 'auto_dispatch' in data:
+        dispatch_settings['auto_dispatch'] = bool(data['auto_dispatch'])
+        mode = 'AUTO' if dispatch_settings['auto_dispatch'] else 'MANUAL APPROVAL'
+        log_audit("DISPATCH_MODE", f"Dispatch mode set to {mode}", "INFO")
+    if 'cooldown_seconds' in data:
+        dispatch_settings['cooldown_seconds'] = max(10, min(600, int(data['cooldown_seconds'])))
+    if 'enabled' in data:
+        dispatch_settings['enabled'] = bool(data['enabled'])
+        log_audit("DISPATCH_TOGGLE", f"Dispatch {'enabled' if dispatch_settings['enabled'] else 'disabled'}", "INFO")
+    if 'bot_token' in data and data['bot_token']:
+        telegram_dispatcher.configure(data['bot_token'], data.get('chat_id', telegram_dispatcher.chat_id))
+        log_audit("DISPATCH_CONFIG", "Telegram bot token updated", "INFO")
+    if 'chat_id' in data and data['chat_id']:
+        telegram_dispatcher.chat_id = str(data['chat_id'])
+        log_audit("DISPATCH_CONFIG", f"Chat ID set to {telegram_dispatcher.chat_id}", "INFO")
+
+    return jsonify({'success': True})
+
+
+@app.route('/approve_dispatch/<event_id>', methods=['POST'])
+def approve_dispatch(event_id):
+    result = approve_dispatch_event(event_id)
+    return jsonify(result)
+
+
+@app.route('/reject_dispatch/<event_id>', methods=['POST'])
+def reject_dispatch(event_id):
+    result = reject_dispatch_event(event_id)
+    return jsonify(result)
+
+
+@app.route('/test_dispatch', methods=['POST'])
+def test_dispatch():
+    """Send a test message to verify Telegram connection."""
+    # Try auto-detect chat_id if not set
+    if not telegram_dispatcher.chat_id:
+        detected = telegram_dispatcher.auto_detect_chat_id()
+        if detected:
+            log_audit("DISPATCH_CONFIG", f"Auto-detected chat ID: {detected}", "INFO")
+
+    if not telegram_dispatcher.is_configured():
+        return jsonify({
+            'ok': False,
+            'error': 'Telegram not fully configured. Please set bot token and chat ID.'
+        }), 400
+
+    result = telegram_dispatcher.test_connection()
+    return jsonify(result)
+
+
+@app.route('/dispatch_alert', methods=['POST'])
+def manual_dispatch_alert():
+    """Manually trigger a dispatch alert with current threat data."""
+    event_id = str(uuid.uuid4())[:8]
+    now = time.time()
+    event = {
+        'id': event_id,
+        'timestamp': datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
+        'threat_score': int(previous_score),
+        'details': dict(latest_details) if latest_details else {},
+        'active_modules': list(active_modules),
+        'status': 'pending',
+        'created_at': now,
+    }
+
+    if not telegram_dispatcher.is_configured():
+        return jsonify({'ok': False, 'error': 'Telegram not configured'}), 400
+
+    result = telegram_dispatcher.send_threat_alert(
+        event['threat_score'], event['details'], event['active_modules']
+    )
+    event['status'] = 'sent' if result.get('ok') else 'failed'
+    dispatch_settings['last_dispatch_time'] = now
+
+    with dispatch_lock:
+        dispatch_log.appendleft(event)
+    log_audit("MANUAL_DISPATCH", f"Operator manually dispatched alert (score: {event['threat_score']})", "CRITICAL")
+    return jsonify({'success': True, 'telegram_result': result})
+
+
+
+
+# ════════════════════════════════════════════════════════════════
+# ENTRY POINT
+# ════════════════════════════════════════════════════════════════
+if __name__ == '__main__':
+    print("\n" + "═"*60)
+    print("  PROJECT SENTINEL V14 — DISPATCH INTEGRATION")
+    print("═"*60)
+    print("\n  ✨ V14 FEATURES:")
+    print("     • Automated Telegram alert dispatch on RED_ALERT")
+    print("     • Human-in-the-loop approval/rejection queue")
+    print("     • Dispatch Center dashboard with alert history")
+    print("     • Configurable auto-dispatch / manual mode")
+    print("     • All V13 features (Journey Tracker, Multi-Camera, Re-ID)")
+    print("\n  👉  Open your browser: http://localhost:8080\n")
+    app.run(host='0.0.0.0', port=8080, debug=False, threaded=True)

sort.py

@@ -0,0 +1,330 @@
+"""
+    SORT: A Simple, Online and Realtime Tracker
+    Copyright (C) 2016-2020 Alex Bewley alex@bewley.ai
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+"""
+from __future__ import print_function
+
+import os
+import numpy as np
+import matplotlib
+matplotlib.use('Agg')
+import matplotlib.pyplot as plt
+import matplotlib.patches as patches
+from skimage import io
+
+import glob
+import time
+import argparse
+from filterpy.kalman import KalmanFilter
+
+np.random.seed(0)
+
+
+def linear_assignment(cost_matrix):
+  try:
+    import lap
+    _, x, y = lap.lapjv(cost_matrix, extend_cost=True)
+    return np.array([[y[i],i] for i in x if i >= 0]) #
+  except ImportError:
+    from scipy.optimize import linear_sum_assignment
+    x, y = linear_sum_assignment(cost_matrix)
+    return np.array(list(zip(x, y)))
+
+
+def iou_batch(bb_test, bb_gt):
+  """
+  From SORT: Computes IOU between two bboxes in the form [x1,y1,x2,y2]
+  """
+  bb_gt = np.expand_dims(bb_gt, 0)
+  bb_test = np.expand_dims(bb_test, 1)
+  
+  xx1 = np.maximum(bb_test[..., 0], bb_gt[..., 0])
+  yy1 = np.maximum(bb_test[..., 1], bb_gt[..., 1])
+  xx2 = np.minimum(bb_test[..., 2], bb_gt[..., 2])
+  yy2 = np.minimum(bb_test[..., 3], bb_gt[..., 3])
+  w = np.maximum(0., xx2 - xx1)
+  h = np.maximum(0., yy2 - yy1)
+  wh = w * h
+  o = wh / ((bb_test[..., 2] - bb_test[..., 0]) * (bb_test[..., 3] - bb_test[..., 1])                                      
+    + (bb_gt[..., 2] - bb_gt[..., 0]) * (bb_gt[..., 3] - bb_gt[..., 1]) - wh)                                              
+  return(o)  
+
+
+def convert_bbox_to_z(bbox):
+  """
+  Takes a bounding box in the form [x1,y1,x2,y2] and returns z in the form
+    [x,y,s,r] where x,y is the centre of the box and s is the scale/area and r is
+    the aspect ratio
+  """
+  w = bbox[2] - bbox[0]
+  h = bbox[3] - bbox[1]
+  x = bbox[0] + w/2.
+  y = bbox[1] + h/2.
+  s = w * h    #scale is just area
+  r = w / float(h)
+  return np.array([x, y, s, r]).reshape((4, 1))
+
+
+def convert_x_to_bbox(x,score=None):
+  """
+  Takes a bounding box in the centre form [x,y,s,r] and returns it in the form
+    [x1,y1,x2,y2] where x1,y1 is the top left and x2,y2 is the bottom right
+  """
+  w = np.sqrt(x[2] * x[3])
+  h = x[2] / w
+  if(score==None):
+    return np.array([x[0]-w/2.,x[1]-h/2.,x[0]+w/2.,x[1]+h/2.]).reshape((1,4))
+  else:
+    return np.array([x[0]-w/2.,x[1]-h/2.,x[0]+w/2.,x[1]+h/2.,score]).reshape((1,5))
+
+
+class KalmanBoxTracker(object):
+  """
+  This class represents the internal state of individual tracked objects observed as bbox.
+  """
+  count = 0
+  def __init__(self,bbox):
+    """
+    Initialises a tracker using initial bounding box.
+    """
+    #define constant velocity model
+    self.kf = KalmanFilter(dim_x=7, dim_z=4) 
+    self.kf.F = np.array([[1,0,0,0,1,0,0],[0,1,0,0,0,1,0],[0,0,1,0,0,0,1],[0,0,0,1,0,0,0],  [0,0,0,0,1,0,0],[0,0,0,0,0,1,0],[0,0,0,0,0,0,1]])
+    self.kf.H = np.array([[1,0,0,0,0,0,0],[0,1,0,0,0,0,0],[0,0,1,0,0,0,0],[0,0,0,1,0,0,0]])
+
+    self.kf.R[2:,2:] *= 10.
+    self.kf.P[4:,4:] *= 1000. #give high uncertainty to the unobservable initial velocities
+    self.kf.P *= 10.
+    self.kf.Q[-1,-1] *= 0.01
+    self.kf.Q[4:,4:] *= 0.01
+
+    self.kf.x[:4] = convert_bbox_to_z(bbox)
+    self.time_since_update = 0
+    self.id = KalmanBoxTracker.count
+    KalmanBoxTracker.count += 1
+    self.history = []
+    self.hits = 0
+    self.hit_streak = 0
+    self.age = 0
+
+  def update(self,bbox):
+    """
+    Updates the state vector with observed bbox.
+    """
+    self.time_since_update = 0
+    self.history = []
+    self.hits += 1
+    self.hit_streak += 1
+    self.kf.update(convert_bbox_to_z(bbox))
+
+  def predict(self):
+    """
+    Advances the state vector and returns the predicted bounding box estimate.
+    """
+    if((self.kf.x[6]+self.kf.x[2])<=0):
+      self.kf.x[6] *= 0.0
+    self.kf.predict()
+    self.age += 1
+    if(self.time_since_update>0):
+      self.hit_streak = 0
+    self.time_since_update += 1
+    self.history.append(convert_x_to_bbox(self.kf.x))
+    return self.history[-1]
+
+  def get_state(self):
+    """
+    Returns the current bounding box estimate.
+    """
+    return convert_x_to_bbox(self.kf.x)
+
+
+def associate_detections_to_trackers(detections,trackers,iou_threshold = 0.3):
+  """
+  Assigns detections to tracked object (both represented as bounding boxes)
+
+  Returns 3 lists of matches, unmatched_detections and unmatched_trackers
+  """
+  if(len(trackers)==0):
+    return np.empty((0,2),dtype=int), np.arange(len(detections)), np.empty((0,5),dtype=int)
+
+  iou_matrix = iou_batch(detections, trackers)
+
+  if min(iou_matrix.shape) > 0:
+    a = (iou_matrix > iou_threshold).astype(np.int32)
+    if a.sum(1).max() == 1 and a.sum(0).max() == 1:
+        matched_indices = np.stack(np.where(a), axis=1)
+    else:
+      matched_indices = linear_assignment(-iou_matrix)
+  else:
+    matched_indices = np.empty(shape=(0,2))
+
+  unmatched_detections = []
+  for d, det in enumerate(detections):
+    if(d not in matched_indices[:,0]):
+      unmatched_detections.append(d)
+  unmatched_trackers = []
+  for t, trk in enumerate(trackers):
+    if(t not in matched_indices[:,1]):
+      unmatched_trackers.append(t)
+
+  #filter out matched with low IOU
+  matches = []
+  for m in matched_indices:
+    if(iou_matrix[m[0], m[1]]<iou_threshold):
+      unmatched_detections.append(m[0])
+      unmatched_trackers.append(m[1])
+    else:
+      matches.append(m.reshape(1,2))
+  if(len(matches)==0):
+    matches = np.empty((0,2),dtype=int)
+  else:
+    matches = np.concatenate(matches,axis=0)
+
+  return matches, np.array(unmatched_detections), np.array(unmatched_trackers)
+
+
+class Sort(object):
+  def __init__(self, max_age=1, min_hits=3, iou_threshold=0.3):
+    """
+    Sets key parameters for SORT
+    """
+    self.max_age = max_age
+    self.min_hits = min_hits
+    self.iou_threshold = iou_threshold
+    self.trackers = []
+    self.frame_count = 0
+
+  def update(self, dets=np.empty((0, 5))):
+    """
+    Params:
+      dets - a numpy array of detections in the format [[x1,y1,x2,y2,score],[x1,y1,x2,y2,score],...]
+    Requires: this method must be called once for each frame even with empty detections (use np.empty((0, 5)) for frames without detections).
+    Returns the a similar array, where the last column is the object ID.
+
+    NOTE: The number of objects returned may differ from the number of detections provided.
+    """
+    self.frame_count += 1
+    # get predicted locations from existing trackers.
+    trks = np.zeros((len(self.trackers), 5))
+    to_del = []
+    ret = []
+    for t, trk in enumerate(trks):
+      pos = self.trackers[t].predict()[0]
+      trk[:] = [pos[0], pos[1], pos[2], pos[3], 0]
+      if np.any(np.isnan(pos)):
+        to_del.append(t)
+    trks = np.ma.compress_rows(np.ma.masked_invalid(trks))
+    for t in reversed(to_del):
+      self.trackers.pop(t)
+    matched, unmatched_dets, unmatched_trks = associate_detections_to_trackers(dets,trks, self.iou_threshold)
+
+    # update matched trackers with assigned detections
+    for m in matched:
+      self.trackers[m[1]].update(dets[m[0], :])
+
+    # create and initialise new trackers for unmatched detections
+    for i in unmatched_dets:
+        trk = KalmanBoxTracker(dets[i,:])
+        self.trackers.append(trk)
+    i = len(self.trackers)
+    for trk in reversed(self.trackers):
+        d = trk.get_state()[0]
+        if (trk.time_since_update < 1) and (trk.hit_streak >= self.min_hits or self.frame_count <= self.min_hits):
+          ret.append(np.concatenate((d,[trk.id+1])).reshape(1,-1)) # +1 as MOT benchmark requires positive
+        i -= 1
+        # remove dead tracklet
+        if(trk.time_since_update > self.max_age):
+          self.trackers.pop(i)
+    if(len(ret)>0):
+      return np.concatenate(ret)
+    return np.empty((0,5))
+
+def parse_args():
+    """Parse input arguments."""
+    parser = argparse.ArgumentParser(description='SORT demo')
+    parser.add_argument('--display', dest='display', help='Display online tracker output (slow) [False]',action='store_true')
+    parser.add_argument("--seq_path", help="Path to detections.", type=str, default='data')
+    parser.add_argument("--phase", help="Subdirectory in seq_path.", type=str, default='train')
+    parser.add_argument("--max_age", 
+                        help="Maximum number of frames to keep alive a track without associated detections.", 
+                        type=int, default=1)
+    parser.add_argument("--min_hits", 
+                        help="Minimum number of associated detections before track is initialised.", 
+                        type=int, default=3)
+    parser.add_argument("--iou_threshold", help="Minimum IOU for match.", type=float, default=0.3)
+    args = parser.parse_args()
+    return args
+
+if __name__ == '__main__':
+  # all train
+  args = parse_args()
+  display = args.display
+  phase = args.phase
+  total_time = 0.0
+  total_frames = 0
+  colours = np.random.rand(32, 3) #used only for display
+  if(display):
+    if not os.path.exists('mot_benchmark'):
+      print('\n\tERROR: mot_benchmark link not found!\n\n    Create a symbolic link to the MOT benchmark\n    (https://motchallenge.net/data/2D_MOT_2015/#download). E.g.:\n\n    $ ln -s /path/to/MOT2015_challenge/2DMOT2015 mot_benchmark\n\n')
+      exit()
+    plt.ion()
+    fig = plt.figure()
+    ax1 = fig.add_subplot(111, aspect='equal')
+
+  if not os.path.exists('output'):
+    os.makedirs('output')
+  pattern = os.path.join(args.seq_path, phase, '*', 'det', 'det.txt')
+  for seq_dets_fn in glob.glob(pattern):
+    mot_tracker = Sort(max_age=args.max_age, 
+                       min_hits=args.min_hits,
+                       iou_threshold=args.iou_threshold) #create instance of the SORT tracker
+    seq_dets = np.loadtxt(seq_dets_fn, delimiter=',')
+    seq = seq_dets_fn[pattern.find('*'):].split(os.path.sep)[0]
+    
+    with open(os.path.join('output', '%s.txt'%(seq)),'w') as out_file:
+      print("Processing %s."%(seq))
+      for frame in range(int(seq_dets[:,0].max())):
+        frame += 1 #detection and frame numbers begin at 1
+        dets = seq_dets[seq_dets[:, 0]==frame, 2:7]
+        dets[:, 2:4] += dets[:, 0:2] #convert to [x1,y1,w,h] to [x1,y1,x2,y2]
+        total_frames += 1
+
+        if(display):
+          fn = os.path.join('mot_benchmark', phase, seq, 'img1', '%06d.jpg'%(frame))
+          im =io.imread(fn)
+          ax1.imshow(im)
+          plt.title(seq + ' Tracked Targets')
+
+        start_time = time.time()
+        trackers = mot_tracker.update(dets)
+        cycle_time = time.time() - start_time
+        total_time += cycle_time
+
+        for d in trackers:
+          print('%d,%d,%.2f,%.2f,%.2f,%.2f,1,-1,-1,-1'%(frame,d[4],d[0],d[1],d[2]-d[0],d[3]-d[1]),file=out_file)
+          if(display):
+            d = d.astype(np.int32)
+            ax1.add_patch(patches.Rectangle((d[0],d[1]),d[2]-d[0],d[3]-d[1],fill=False,lw=3,ec=colours[d[4]%32,:]))
+
+        if(display):
+          fig.canvas.flush_events()
+          plt.draw()
+          ax1.cla()
+
+  print("Total Tracking took: %.3f seconds for %d frames or %.1f FPS" % (total_time, total_frames, total_frames / total_time))
+
+  if(display):
+    print("Note: to get real runtime results run without the option: --display")

templates/gun_index.html

@@ -0,0 +1,581 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ATM ThreatVision - Gun Detection</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --ios-bg: #F2F2F7;
+            --ios-card: rgba(255, 255, 255, 0.8);
+            --ios-text: #000000;
+            --ios-secondary: #8E8E93;
+            --ios-orange: #FF6B00;
+            --ios-red: #FF3B30;
+            --ios-green: #34C759;
+            --ios-blue: #007AFF;
+            --ios-blur: blur(20px);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            -webkit-font-smoothing: antialiased;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background-color: var(--ios-bg);
+            color: var(--ios-text);
+            min-height: 100vh;
+            padding: 40px 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        /* Header */
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 40px;
+        }
+
+        .logo h1 {
+            font-size: 28px;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+        }
+
+        .logo h1 span {
+            color: var(--ios-orange);
+        }
+
+        .logo p {
+            color: var(--ios-secondary);
+            font-size: 14px;
+            margin-top: 4px;
+        }
+
+        /* Controls */
+        .controls {
+            background: rgba(255, 255, 255, 0.6);
+            backdrop-filter: var(--ios-blur);
+            padding: 6px;
+            border-radius: 999px;
+            display: flex;
+            gap: 5px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+
+        .btn {
+            padding: 10px 20px;
+            border-radius: 999px;
+            border: none;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: transparent;
+            color: var(--ios-secondary);
+            position: relative;
+        }
+
+        .btn.active {
+            background: #fff;
+            color: #000;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn:hover:not(.active) {
+            color: #000;
+            transform: scale(1.02);
+        }
+
+        .btn:active {
+            transform: scale(0.98);
+        }
+
+        #upload-input {
+            display: none;
+        }
+
+        /* Loading Spinner */
+        .spinner {
+            display: none;
+            width: 16px;
+            height: 16px;
+            border: 2px solid var(--ios-secondary);
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin-left: 8px;
+        }
+
+        .btn.loading .spinner {
+            display: inline-block;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        /* Main Grid */
+        .main-grid {
+            display: grid;
+            grid-template-columns: 1fr 320px;
+            gap: 30px;
+        }
+
+        /* Video Feed */
+        .video-card {
+            background: #fff;
+            border-radius: 30px;
+            overflow: hidden;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+            position: relative;
+            aspect-ratio: 16/9;
+            transition: box-shadow 0.3s ease;
+        }
+
+        .video-card:hover {
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
+        }
+
+        #video-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .live-badge {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            padding: 6px 12px;
+            border-radius: 999px;
+            font-size: 12px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            z-index: 10;
+        }
+
+        .dot {
+            width: 8px;
+            height: 8px;
+            background: var(--ios-red);
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.5;
+            }
+
+            100% {
+                opacity: 1;
+            }
+        }
+
+        /* FPS Badge */
+        .fps-badge {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(10px);
+            padding: 6px 12px;
+            border-radius: 999px;
+            font-size: 12px;
+            font-weight: 600;
+            color: #fff;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            z-index: 10;
+        }
+
+        /* Stats Panel */
+        .stats-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .stat-card {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: var(--ios-blur);
+            border-radius: 24px;
+            padding: 24px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .stat-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .stat-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
+        }
+
+        .stat-card:hover::before {
+            opacity: 1;
+        }
+
+        .stat-card h3 {
+            font-size: 13px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--ios-secondary);
+            margin-bottom: 12px;
+            font-weight: 600;
+        }
+
+        .stat-value {
+            font-size: 42px;
+            font-weight: 700;
+            letter-spacing: -1px;
+            line-height: 1;
+            transition: transform 0.3s ease;
+        }
+
+        .stat-card:hover .stat-value {
+            transform: scale(1.05);
+        }
+
+        .stat-card.threat {
+            --accent-color: var(--ios-red);
+        }
+
+        .stat-card.threat .stat-value {
+            color: var(--ios-red);
+        }
+
+        .stat-card.warning {
+            --accent-color: var(--ios-orange);
+        }
+
+        .stat-card.warning .stat-value {
+            color: var(--ios-orange);
+        }
+
+        .stat-card.total {
+            --accent-color: var(--ios-text);
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
+        }
+
+        .stat-card.total .stat-value {
+            color: var(--ios-text);
+        }
+
+        .legend {
+            margin-top: auto;
+            background: #fff;
+            border-radius: 24px;
+            padding: 24px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 12px;
+            transition: transform 0.2s ease;
+        }
+
+        .legend-item:hover {
+            transform: translateX(4px);
+        }
+
+        .legend-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .legend-color {
+            width: 12px;
+            height: 12px;
+            border-radius: 4px;
+            transition: transform 0.2s ease;
+        }
+
+        .legend-item:hover .legend-color {
+            transform: scale(1.2);
+        }
+
+        .legend-text {
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--ios-secondary);
+        }
+
+        /* Toast */
+        .toast {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%) translateY(-100px);
+            background: rgba(0, 0, 0, 0.8);
+            color: #fff;
+            padding: 12px 24px;
+            border-radius: 999px;
+            font-size: 14px;
+            font-weight: 500;
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            z-index: 1000;
+            backdrop-filter: blur(10px);
+        }
+
+        .toast.show {
+            transform: translateX(-50%) translateY(0);
+        }
+
+        .toast.success {
+            background: rgba(52, 199, 89, 0.9);
+        }
+
+        .toast.error {
+            background: rgba(255, 59, 48, 0.9);
+        }
+
+        /* Upload Progress */
+        .upload-progress {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.9);
+            color: #fff;
+            padding: 32px;
+            border-radius: 24px;
+            font-size: 16px;
+            font-weight: 500;
+            z-index: 2000;
+            backdrop-filter: blur(20px);
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .upload-progress.show {
+            display: flex;
+        }
+
+        .upload-spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-top-color: var(--ios-orange);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @media (max-width: 900px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .stats-panel {
+                flex-direction: row;
+                flex-wrap: wrap;
+            }
+
+            .stat-card {
+                flex: 1;
+                min-width: 140px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <header class="header">
+            <div class="logo">
+                <h1>ATM <span>ThreatVision</span></h1>
+                <p>Weapon Detection System</p>
+            </div>
+            <div class="controls">
+                <button class="btn active" id="btn-camera" onclick="setSource('camera')">Camera</button>
+                <button class="btn" id="btn-upload"
+                    onclick="document.getElementById('upload-input').click()">Upload</button>
+                <input type="file" id="upload-input" accept="video/*" onchange="handleFileUpload(this)">
+            </div>
+        </header>
+
+        <div class="main-grid">
+            <div class="video-card">
+                <div class="live-badge">
+                    <span class="dot"></span>
+                    <span id="source-label">LIVE</span>
+                </div>
+                <div class="fps-badge" id="fps-display">FPS: --</div>
+                <img id="video-stream" src="{{ url_for('video_feed') }}" alt="Video Stream">
+            </div>
+
+            <div class="stats-panel">
+                <div class="stat-card threat">
+                    <h3>Guns Detected</h3>
+                    <div class="stat-value" id="guns-count">0</div>
+                </div>
+
+                <div class="stat-card warning">
+                    <h3>Knives Detected</h3>
+                    <div class="stat-value" id="knives-count">0</div>
+                </div>
+
+                <div class="stat-card total">
+                    <h3>Total Threats</h3>
+                    <div class="stat-value" id="total-threats">0</div>
+                </div>
+
+                <div class="legend">
+                    <div class="legend-item">
+                        <div class="legend-color" style="background: var(--ios-red)"></div>
+                        <div class="legend-text">Gun (High Threat)</div>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background: var(--ios-orange)"></div>
+                        <div class="legend-text">Knife (Medium Threat)</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="toast" class="toast">Action Successful</div>
+    <div id="upload-progress" class="upload-progress">
+        <div class="upload-spinner"></div>
+        <div>Uploading video...</div>
+    </div>
+
+    <script>
+        let lastUpdateTime = Date.now();
+        let frameCount = 0;
+
+        function showToast(message, type = 'success') {
+            const toast = document.getElementById('toast');
+            toast.textContent = message;
+            toast.className = 'toast show ' + type;
+            setTimeout(() => toast.classList.remove('show'), 3000);
+        }
+
+        function showUploadProgress() {
+            document.getElementById('upload-progress').classList.add('show');
+        }
+
+        function hideUploadProgress() {
+            document.getElementById('upload-progress').classList.remove('show');
+        }
+
+        function setActiveButton(type) {
+            document.querySelectorAll('.btn').forEach(btn => btn.classList.remove('active'));
+            if (type === 'camera') document.getElementById('btn-camera').classList.add('active');
+            else document.getElementById('btn-upload').classList.add('active');
+        }
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: source }),
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        document.getElementById('source-label').textContent = source === 'camera' ? 'LIVE' : 'PLAYBACK';
+                        setActiveButton(source === 'camera' ? 'camera' : 'upload');
+                        showToast('Switched to ' + source, 'success');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    showToast('Failed to switch source', 'error');
+                });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files && input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+
+                showUploadProgress();
+
+                fetch('/upload_video', {
+                    method: 'POST',
+                    body: formData
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        hideUploadProgress();
+                        if (data.success) {
+                            document.getElementById('source-label').textContent = 'PLAYBACK';
+                            setActiveButton('upload');
+                            showToast('Video uploaded successfully', 'success');
+                        } else {
+                            showToast(data.error || 'Upload failed', 'error');
+                        }
+                    })
+                    .catch(error => {
+                        hideUploadProgress();
+                        console.error('Error:', error);
+                        showToast('Upload failed', 'error');
+                    });
+            }
+        }
+
+        function updateStats() {
+            fetch('/stats')
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('guns-count').textContent = data.guns;
+                    document.getElementById('knives-count').textContent = data.knives;
+                    document.getElementById('total-threats').textContent = data.total_threats;
+
+                    // Calculate approximate FPS from update frequency
+                    frameCount++;
+                    const now = Date.now();
+                    if (now - lastUpdateTime >= 1000) {
+                        const fps = Math.round((frameCount * 1000) / (now - lastUpdateTime));
+                        document.getElementById('fps-display').textContent = `FPS: ${fps}`;
+                        frameCount = 0;
+                        lastUpdateTime = now;
+                    }
+                })
+                .catch(error => console.error('Error fetching stats:', error));
+        }
+
+        setInterval(updateStats, 100); // Update more frequently for smoother FPS display
+    </script>
+</body>
+
+</html>

templates/index.html

@@ -0,0 +1,428 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ATM ThreatVision - Facemask Detection</title>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap"
+        rel="stylesheet">
+    <style>
+        :root {
+            --primary-orange: #FF6B00;
+            --dark-bg: #000000;
+            --card-bg: #111111;
+            --text-white: #FFFFFF;
+            --text-gray: #888888;
+            --border-color: #333333;
+            --success-green: #00FF88;
+            --danger-red: #FF4757;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--dark-bg);
+            color: var(--text-white);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 0;
+            margin-bottom: 40px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .logo-area h1 {
+            font-size: 2rem;
+            font-weight: 800;
+            letter-spacing: -1px;
+        }
+
+        .logo-area h1 span {
+            color: var(--primary-orange);
+        }
+
+        .logo-area p {
+            color: var(--text-gray);
+            font-size: 0.9rem;
+            margin-top: 5px;
+        }
+
+        .controls {
+            display: flex;
+            gap: 15px;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border-radius: 8px;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-family: 'Outfit', sans-serif;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary {
+            background-color: var(--primary-orange);
+            color: var(--text-white);
+        }
+
+        .btn-primary:hover {
+            background-color: #e65a00;
+            transform: translateY(-2px);
+        }
+
+        .btn-outline {
+            background-color: transparent;
+            border: 1px solid var(--border-color);
+            color: var(--text-white);
+        }
+
+        .btn-outline:hover {
+            border-color: var(--primary-orange);
+            color: var(--primary-orange);
+        }
+
+        .main-grid {
+            display: grid;
+            grid-template-columns: 1fr 350px;
+            gap: 30px;
+        }
+
+        .video-container {
+            background-color: var(--card-bg);
+            border-radius: 20px;
+            padding: 20px;
+            border: 1px solid var(--border-color);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .video-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .video-header h2 {
+            font-size: 1.2rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .live-indicator {
+            width: 8px;
+            height: 8px;
+            background-color: var(--primary-orange);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--primary-orange);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.5;
+            }
+
+            100% {
+                opacity: 1;
+            }
+        }
+
+        #video-stream {
+            width: 100%;
+            border-radius: 12px;
+            background-color: #000;
+            min-height: 480px;
+            object-fit: contain;
+        }
+
+        .stats-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .stat-card {
+            background-color: var(--card-bg);
+            border-radius: 16px;
+            padding: 25px;
+            border: 1px solid var(--border-color);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .stat-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 4px;
+            height: 100%;
+        }
+
+        .stat-card.orange::before {
+            background-color: var(--primary-orange);
+        }
+
+        .stat-card.green::before {
+            background-color: var(--success-green);
+        }
+
+        .stat-card.red::before {
+            background-color: var(--danger-red);
+        }
+
+        .stat-card h3 {
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 1.5px;
+            color: var(--text-gray);
+            margin-bottom: 15px;
+        }
+
+        .stat-value {
+            font-size: 3rem;
+            font-weight: 700;
+            line-height: 1;
+            margin-bottom: 5px;
+        }
+
+        .stat-label {
+            font-size: 0.9rem;
+            color: var(--text-gray);
+        }
+
+        .legend-panel {
+            background-color: var(--card-bg);
+            border-radius: 16px;
+            padding: 25px;
+            border: 1px solid var(--border-color);
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 15px;
+            padding: 10px;
+            background-color: rgba(255, 255, 255, 0.03);
+            border-radius: 8px;
+        }
+
+        .legend-color {
+            width: 16px;
+            height: 16px;
+            border-radius: 4px;
+        }
+
+        .legend-text {
+            font-size: 0.95rem;
+            color: var(--text-white);
+        }
+
+        #upload-input {
+            display: none;
+        }
+
+        /* Toast Notification */
+        .toast {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            background-color: var(--card-bg);
+            border: 1px solid var(--primary-orange);
+            color: var(--text-white);
+            padding: 15px 25px;
+            border-radius: 8px;
+            transform: translateY(100px);
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 1000;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+        }
+
+        .toast.show {
+            transform: translateY(0);
+            opacity: 1;
+        }
+
+        @media (max-width: 1024px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .stats-panel {
+                flex-direction: row;
+                flex-wrap: wrap;
+            }
+
+            .stat-card {
+                flex: 1;
+                min-width: 200px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <header class="header">
+            <div class="logo-area">
+                <h1>ATM <span>ThreatVision</span></h1>
+                <p>Advanced Facemask Detection System</p>
+            </div>
+            <div class="controls">
+                <button class="btn btn-primary" onclick="setSource('camera')">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
+                        </path>
+                    </svg>
+                    Live Camera
+                </button>
+                <button class="btn btn-outline" onclick="document.getElementById('upload-input').click()">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
+                    </svg>
+                    Upload Video
+                </button>
+                <input type="file" id="upload-input" accept="video/*" onchange="handleFileUpload(this)">
+            </div>
+        </header>
+
+        <div class="main-grid">
+            <div class="video-container">
+                <div class="video-header">
+                    <h2><span class="live-indicator"></span> Live Feed</h2>
+                    <span style="color: var(--text-gray); font-size: 0.9rem;" id="source-label">Source: Camera</span>
+                </div>
+                <img id="video-stream" src="{{ url_for('video_feed') }}" alt="Video Stream">
+            </div>
+
+            <div class="stats-panel">
+                <div class="stat-card red">
+                    <h3>With Mask</h3>
+                    <div class="stat-value" id="with-mask" style="color: var(--danger-red)">0</div>
+                    <div class="stat-label">Threat</div>
+                </div>
+
+                <div class="stat-card green">
+                    <h3>Without Mask</h3>
+                    <div class="stat-value" id="without-mask" style="color: var(--success-green)">0</div>
+                    <div class="stat-label">Safe</div>
+                </div>
+
+                <div class="stat-card orange">
+                    <h3>Total Detections</h3>
+                    <div class="stat-value" id="total-detections">0</div>
+                    <div class="stat-label">In Current Frame</div>
+                </div>
+
+                <div class="legend-panel">
+                    <div class="legend-item">
+                        <div class="legend-color" style="background: #FF0000"></div>
+                        <div class="legend-text">Mask Detected (Threat)</div>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background: #00FF88"></div>
+                        <div class="legend-text">No Mask (Safe)</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="toast" class="toast">Action Successful</div>
+
+    <script>
+        function showToast(message) {
+            const toast = document.getElementById('toast');
+            toast.textContent = message;
+            toast.classList.add('show');
+            setTimeout(() => toast.classList.remove('show'), 3000);
+        }
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ source: source }),
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        document.getElementById('source-label').textContent = 'Source: ' + (source === 'camera' ? 'Live Camera' : 'Uploaded Video');
+                        showToast('Switched to ' + source);
+                    }
+                });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files && input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+
+                fetch('/upload_video', {
+                    method: 'POST',
+                    body: formData
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            document.getElementById('source-label').textContent = 'Source: Uploaded Video';
+                            showToast('Video uploaded successfully');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        showToast('Upload failed');
+                    });
+            }
+        }
+
+        function updateStats() {
+            fetch('/stats')
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('with-mask').textContent = data.with_mask;
+                    document.getElementById('without-mask').textContent = data.without_mask;
+                    document.getElementById('total-detections').textContent = data.total_detections;
+                })
+                .catch(error => console.error('Error fetching stats:', error));
+        }
+
+        setInterval(updateStats, 500);
+    </script>
+</body>
+
+</html>

templates/movement_index.html

@@ -0,0 +1,429 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ATM ThreatVision - Movement Analysis</title>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap"
+        rel="stylesheet">
+    <style>
+        :root {
+            --primary-orange: #FF6B00;
+            --dark-bg: #000000;
+            --card-bg: #111111;
+            --text-white: #FFFFFF;
+            --text-gray: #888888;
+            --border-color: #333333;
+            --success-green: #00FF88;
+            --danger-red: #FF4757;
+            --info-blue: #0088FF;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--dark-bg);
+            color: var(--text-white);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 0;
+            margin-bottom: 40px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .logo-area h1 {
+            font-size: 2rem;
+            font-weight: 800;
+            letter-spacing: -1px;
+        }
+
+        .logo-area h1 span {
+            color: var(--primary-orange);
+        }
+
+        .logo-area p {
+            color: var(--text-gray);
+            font-size: 0.9rem;
+            margin-top: 5px;
+        }
+
+        .controls {
+            display: flex;
+            gap: 15px;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border-radius: 8px;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-family: 'Outfit', sans-serif;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary {
+            background-color: var(--primary-orange);
+            color: var(--text-white);
+        }
+
+        .btn-primary:hover {
+            background-color: #e65a00;
+            transform: translateY(-2px);
+        }
+
+        .btn-outline {
+            background-color: transparent;
+            border: 1px solid var(--border-color);
+            color: var(--text-white);
+        }
+
+        .btn-outline:hover {
+            border-color: var(--primary-orange);
+            color: var(--primary-orange);
+        }
+
+        .main-grid {
+            display: grid;
+            grid-template-columns: 1fr 350px;
+            gap: 30px;
+        }
+
+        .video-container {
+            background-color: var(--card-bg);
+            border-radius: 20px;
+            padding: 20px;
+            border: 1px solid var(--border-color);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .video-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .video-header h2 {
+            font-size: 1.2rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .live-indicator {
+            width: 8px;
+            height: 8px;
+            background-color: var(--primary-orange);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--primary-orange);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.5;
+            }
+
+            100% {
+                opacity: 1;
+            }
+        }
+
+        #video-stream {
+            width: 100%;
+            border-radius: 12px;
+            background-color: #000;
+            min-height: 480px;
+            object-fit: contain;
+        }
+
+        .stats-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .stat-card {
+            background-color: var(--card-bg);
+            border-radius: 16px;
+            padding: 25px;
+            border: 1px solid var(--border-color);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .stat-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 4px;
+            height: 100%;
+        }
+
+        .stat-card.orange::before {
+            background-color: var(--primary-orange);
+        }
+
+        .stat-card.blue::before {
+            background-color: var(--info-blue);
+        }
+
+        .stat-card.red::before {
+            background-color: var(--danger-red);
+        }
+
+        .stat-card h3 {
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 1.5px;
+            color: var(--text-gray);
+            margin-bottom: 15px;
+        }
+
+        .stat-value {
+            font-size: 3rem;
+            font-weight: 700;
+            line-height: 1;
+            margin-bottom: 5px;
+        }
+
+        .stat-label {
+            font-size: 0.9rem;
+            color: var(--text-gray);
+        }
+
+        .legend-panel {
+            background-color: var(--card-bg);
+            border-radius: 16px;
+            padding: 25px;
+            border: 1px solid var(--border-color);
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 15px;
+            padding: 10px;
+            background-color: rgba(255, 255, 255, 0.03);
+            border-radius: 8px;
+        }
+
+        .legend-color {
+            width: 16px;
+            height: 16px;
+            border-radius: 4px;
+        }
+
+        .legend-text {
+            font-size: 0.95rem;
+            color: var(--text-white);
+        }
+
+        #upload-input {
+            display: none;
+        }
+
+        /* Toast Notification */
+        .toast {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            background-color: var(--card-bg);
+            border: 1px solid var(--primary-orange);
+            color: var(--text-white);
+            padding: 15px 25px;
+            border-radius: 8px;
+            transform: translateY(100px);
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 1000;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+        }
+
+        .toast.show {
+            transform: translateY(0);
+            opacity: 1;
+        }
+
+        @media (max-width: 1024px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .stats-panel {
+                flex-direction: row;
+                flex-wrap: wrap;
+            }
+
+            .stat-card {
+                flex: 1;
+                min-width: 200px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <header class="header">
+            <div class="logo-area">
+                <h1>ATM <span>ThreatVision</span></h1>
+                <p>Advanced Movement Analysis System</p>
+            </div>
+            <div class="controls">
+                <button class="btn btn-primary" onclick="setSource('camera')">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
+                        </path>
+                    </svg>
+                    Live Camera
+                </button>
+                <button class="btn btn-outline" onclick="document.getElementById('upload-input').click()">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
+                    </svg>
+                    Upload Video
+                </button>
+                <input type="file" id="upload-input" accept="video/*" onchange="handleFileUpload(this)">
+            </div>
+        </header>
+
+        <div class="main-grid">
+            <div class="video-container">
+                <div class="video-header">
+                    <h2><span class="live-indicator"></span> Live Feed</h2>
+                    <span style="color: var(--text-gray); font-size: 0.9rem;" id="source-label">Source: Camera</span>
+                </div>
+                <img id="video-stream" src="{{ url_for('video_feed') }}" alt="Video Stream">
+            </div>
+
+            <div class="stats-panel">
+                <div class="stat-card orange">
+                    <h3>Current People</h3>
+                    <div class="stat-value" id="current-people">0</div>
+                    <div class="stat-label">In Frame</div>
+                </div>
+
+                <div class="stat-card blue">
+                    <h3>Total People</h3>
+                    <div class="stat-value" id="total-people" style="color: var(--info-blue)">0</div>
+                    <div class="stat-label">Detected Session</div>
+                </div>
+
+                <div class="stat-card red">
+                    <h3>Long Stays (>10s)</h3>
+                    <div class="stat-value" id="long-stays" style="color: var(--danger-red)">0</div>
+                    <div class="stat-label">Potential Loitering</div>
+                </div>
+
+                <div class="legend-panel">
+                    <div class="legend-item">
+                        <div class="legend-color" style="background: #00FF00"></div>
+                        <div class="legend-text">Past Path (5s)</div>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background: #FFFF00"></div>
+                        <div class="legend-text">Predicted Path (4s)</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="toast" class="toast">Action Successful</div>
+
+    <script>
+        function showToast(message) {
+            const toast = document.getElementById('toast');
+            toast.textContent = message;
+            toast.classList.add('show');
+            setTimeout(() => toast.classList.remove('show'), 3000);
+        }
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ source: source }),
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        document.getElementById('source-label').textContent = 'Source: ' + (source === 'camera' ? 'Live Camera' : 'Uploaded Video');
+                        showToast('Switched to ' + source);
+                    }
+                });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files && input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+
+                fetch('/upload_video', {
+                    method: 'POST',
+                    body: formData
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            document.getElementById('source-label').textContent = 'Source: Uploaded Video';
+                            showToast('Video uploaded successfully');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        showToast('Upload failed');
+                    });
+            }
+        }
+
+        function updateStats() {
+            fetch('/stats')
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('current-people').textContent = data.current_people;
+                    document.getElementById('total-people').textContent = data.total_people;
+                    document.getElementById('long-stays').textContent = data.long_stays;
+                })
+                .catch(error => console.error('Error fetching stats:', error));
+        }
+
+        setInterval(updateStats, 500);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard.html

@@ -0,0 +1,403 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Project SENTINEL - National Security Grid</title>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap"
+        rel="stylesheet">
+    <style>
+        :root {
+            --primary-orange: #FF6B00;
+            --dark-bg: #050505;
+            --panel-bg: #111111;
+            --text-white: #FFFFFF;
+            --text-gray: #888888;
+            --border-color: #333333;
+            --danger-red: #FF4757;
+            --success-green: #00FF88;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--dark-bg);
+            color: var(--text-white);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* Sidebar */
+        .sidebar {
+            width: 250px;
+            background-color: var(--panel-bg);
+            border-right: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 800;
+            margin-bottom: 40px;
+            letter-spacing: -1px;
+        }
+
+        .logo span {
+            color: var(--primary-orange);
+        }
+
+        .nav-item {
+            padding: 15px;
+            margin-bottom: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-gray);
+        }
+
+        .nav-item:hover,
+        .nav-item.active {
+            background-color: rgba(255, 107, 0, 0.1);
+            color: var(--primary-orange);
+        }
+
+        .nav-item.active {
+            border-left: 3px solid var(--primary-orange);
+        }
+
+        /* Main Content */
+        .main-content {
+            flex: 1;
+            padding: 20px;
+            display: grid;
+            grid-template-columns: 1fr 350px;
+            gap: 20px;
+        }
+
+        /* Video Feed */
+        .video-panel {
+            background-color: var(--panel-bg);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .panel-header {
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .live-badge {
+            background-color: var(--danger-red);
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 0.7rem;
+            font-weight: 700;
+            animation: pulse 2s infinite;
+        }
+
+        #video-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: black;
+        }
+
+        /* Intelligence Panel */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .card {
+            background-color: var(--panel-bg);
+            border-radius: 16px;
+            padding: 20px;
+            border: 1px solid var(--border-color);
+        }
+
+        .card h3 {
+            font-size: 0.9rem;
+            color: var(--text-gray);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 15px;
+        }
+
+        .threat-score {
+            text-align: center;
+            padding: 20px 0;
+        }
+
+        .score-value {
+            font-size: 4rem;
+            font-weight: 800;
+            line-height: 1;
+        }
+
+        .score-label {
+            color: var(--text-gray);
+            font-size: 0.9rem;
+            margin-top: 5px;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+        }
+
+        .stat-item {
+            background: rgba(255, 255, 255, 0.05);
+            padding: 10px;
+            border-radius: 8px;
+        }
+
+        .stat-num {
+            font-size: 1.5rem;
+            font-weight: 700;
+        }
+
+        .stat-desc {
+            font-size: 0.8rem;
+            color: var(--text-gray);
+        }
+
+        .btn {
+            width: 100%;
+            padding: 12px;
+            border: none;
+            border-radius: 8px;
+            font-weight: 600;
+            cursor: pointer;
+            margin-top: 10px;
+            font-family: 'Outfit', sans-serif;
+        }
+
+        .btn-primary {
+            background-color: var(--primary-orange);
+            color: white;
+        }
+
+        .btn-outline {
+            background-color: transparent;
+            border: 1px solid var(--border-color);
+            color: var(--text-gray);
+        }
+
+        .btn:hover {
+            opacity: 0.9;
+        }
+
+        /* Report Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .modal-content {
+            background: var(--panel-bg);
+            width: 500px;
+            padding: 30px;
+            border-radius: 16px;
+            border: 1px solid var(--primary-orange);
+        }
+
+        .report-text {
+            white-space: pre-wrap;
+            font-family: monospace;
+            color: #00FF88;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 15px;
+            border-radius: 8px;
+            margin: 20px 0;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+
+        @keyframes pulse {
+            0% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.5;
+            }
+
+            100% {
+                opacity: 1;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="sidebar">
+        <div class="logo">PROJECT <span>SENTINEL</span></div>
+        <div class="nav-item active" onclick="setMode('movement', this)">
+            <span>🏃</span> Movement Analysis
+        </div>
+        <div class="nav-item" onclick="setMode('facemask', this)">
+            <span>😷</span> Facemask Detection
+        </div>
+        <div class="nav-item" onclick="setMode('weapon', this)">
+            <span>🔫</span> Weapon Detection
+        </div>
+
+        <div style="margin-top: auto;">
+            <div class="nav-item" onclick="document.getElementById('upload-input').click()">
+                <span>📤</span> Upload Video
+            </div>
+            <input type="file" id="upload-input" style="display: none" accept="video/*"
+                onchange="handleFileUpload(this)">
+            <div class="nav-item" onclick="setSource('camera')">
+                <span>📷</span> Live Camera
+            </div>
+        </div>
+    </div>
+
+    <div class="main-content">
+        <div class="video-panel">
+            <div class="panel-header">
+                <span id="mode-title">Movement Analysis Feed</span>
+                <span class="live-badge">LIVE</span>
+            </div>
+            <img id="video-stream" src="{{ url_for('video_feed') }}">
+        </div>
+
+        <div class="intel-panel">
+            <div class="card">
+                <h3>Dynamic Threat Score</h3>
+                <div class="threat-score">
+                    <div class="score-value" id="threat-score" style="color: var(--success-green)">0</div>
+                    <div class="score-label">Low Risk</div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h3>Live Intelligence</h3>
+                <div class="stats-grid" id="stats-container">
+                    <!-- Populated by JS -->
+                </div>
+            </div>
+
+            <div class="card">
+                <h3>AI Agent</h3>
+                <p style="font-size: 0.9rem; color: var(--text-gray); margin-bottom: 15px;">
+                    Generate automated incident report based on current threat assessment.
+                </p>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Report</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="report-modal" class="modal">
+        <div class="modal-content">
+            <h2>Incident Report</h2>
+            <div class="report-text" id="report-content">Generating...</div>
+            <button class="btn btn-outline"
+                onclick="document.getElementById('report-modal').style.display='none'">Close</button>
+        </div>
+    </div>
+
+    <script>
+        function setMode(mode, element) {
+            // Update UI
+            document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
+            element.classList.add('active');
+
+            const titles = { 'movement': 'Movement Analysis Feed', 'facemask': 'Facemask Detection Feed', 'weapon': 'Weapon Detection Feed' };
+            document.getElementById('mode-title').textContent = titles[mode];
+
+            // Call Backend
+            fetch('/set_mode', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ mode: mode })
+            });
+        }
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: source })
+            });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+                fetch('/upload_video', { method: 'POST', body: formData });
+            }
+        }
+
+        function generateReport() {
+            document.getElementById('report-modal').style.display = 'flex';
+            document.getElementById('report-content').textContent = "Analyzing data...";
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                });
+        }
+
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    // Update Score
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    scoreEl.textContent = score;
+                    if (score > 75) { scoreEl.style.color = 'var(--danger-red)'; scoreEl.nextElementSibling.textContent = 'CRITICAL'; }
+                    else if (score > 40) { scoreEl.style.color = '#FFA500'; scoreEl.nextElementSibling.textContent = 'ELEVATED'; }
+                    else { scoreEl.style.color = 'var(--success-green)'; scoreEl.nextElementSibling.textContent = 'LOW RISK'; }
+
+                    // Update Stats Grid
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    for (const [key, value] of Object.entries(data.details)) {
+                        const div = document.createElement('div');
+                        div.className = 'stat-item';
+                        div.innerHTML = `<div class="stat-num">${value}</div><div class="stat-desc">${key.replace('_', ' ').toUpperCase()}</div>`;
+                        container.appendChild(div);
+                    }
+                });
+        }
+
+        setInterval(updateStats, 1000);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard_v10.html

@@ -0,0 +1,1385 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SENTINEL V10 — Intelligence Grid</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap"
+        rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        /* ═══════════════════════════════════════════════
+           CSS VARIABLES — SCI-FI PALETTE
+        ═══════════════════════════════════════════════ */
+        :root {
+            --bg-deep: #05080f;
+            --bg-panel: rgba(8, 16, 32, 0.85);
+            --bg-card: rgba(10, 20, 40, 0.7);
+            --border-glow: rgba(0, 200, 255, 0.15);
+            --border-glow-hover: rgba(0, 200, 255, 0.4);
+            --cyan: #00d4ff;
+            --cyan-dim: #0090aa;
+            --neon-green: #00ff88;
+            --neon-red: #ff2040;
+            --neon-amber: #ffaa00;
+            --text-primary: #e0f0ff;
+            --text-secondary: #5a8aaa;
+            --text-dim: #2a4a5a;
+            --scanline-opacity: 0.03;
+            --font-display: 'Orbitron', sans-serif;
+            --font-body: 'Rajdhani', sans-serif;
+            --font-mono: 'Share Tech Mono', monospace;
+        }
+
+        /* ═══════════════════════════════════════════════
+           BASE RESET & BODY
+        ═══════════════════════════════════════════════ */
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-body);
+            background: var(--bg-deep);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* Scanline overlay on body */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: repeating-linear-gradient(0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 4px);
+            pointer-events: none;
+            z-index: 9999;
+        }
+
+        /* ═══════════════════════════════════════════════
+           RED ALERT OVERLAY
+        ═══════════════════════════════════════════════ */
+        .red-alert-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            z-index: 9998;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .red-alert-overlay.active {
+            opacity: 1;
+            animation: red-pulse-border 1s ease-in-out infinite;
+        }
+
+        .red-alert-overlay.active::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 4px solid var(--neon-red);
+            box-shadow: inset 0 0 80px rgba(255, 32, 64, 0.15),
+                0 0 40px rgba(255, 32, 64, 0.3);
+        }
+
+        .red-alert-banner {
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 20, 40, 0.9);
+            color: #fff;
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 4px;
+            padding: 8px 40px;
+            z-index: 10000;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            box-shadow: 0 4px 30px rgba(255, 20, 40, 0.5);
+            display: none;
+            animation: alert-flash 0.8s ease-in-out infinite;
+        }
+
+        .red-alert-banner.active {
+            display: block;
+        }
+
+        @keyframes red-pulse-border {
+
+            0%,
+            100% {
+                opacity: 0.6;
+            }
+
+            50% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes alert-flash {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.6;
+            }
+        }
+
+        /* ═══════════════════════════════════════════════
+           SIDEBAR
+        ═══════════════════════════════════════════════ */
+        .sidebar {
+            width: 260px;
+            min-width: 260px;
+            background: var(--bg-panel);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-right: 1px solid var(--border-glow);
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            z-index: 100;
+            overflow-y: auto;
+        }
+
+        .logo {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--cyan);
+            letter-spacing: 2px;
+        }
+
+        .logo svg {
+            filter: drop-shadow(0 0 6px var(--cyan));
+        }
+
+        .version-tag {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            color: var(--text-dim);
+            margin-bottom: 24px;
+            letter-spacing: 1px;
+        }
+
+        .nav-group {
+            margin-bottom: 20px;
+        }
+
+        .nav-label {
+            font-family: var(--font-display);
+            font-size: 0.6rem;
+            font-weight: 600;
+            color: var(--text-dim);
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .nav-item {
+            padding: 10px 12px;
+            margin-bottom: 3px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.25s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            border: 1px solid transparent;
+        }
+
+        .nav-item:hover {
+            background: rgba(0, 200, 255, 0.05);
+            color: var(--text-primary);
+            border-color: var(--border-glow);
+        }
+
+        .nav-item.active {
+            background: rgba(0, 200, 255, 0.1);
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+            box-shadow: 0 0 15px rgba(0, 200, 255, 0.05);
+        }
+
+        .nav-item svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Audit Log Panel in sidebar */
+        .audit-section {
+            margin-top: auto;
+            flex-shrink: 0;
+        }
+
+        .audit-log-container {
+            max-height: 200px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .audit-log-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .audit-entry {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            padding: 6px 8px;
+            margin-bottom: 2px;
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.3);
+            border-left: 2px solid var(--cyan-dim);
+            line-height: 1.4;
+            color: var(--text-secondary);
+        }
+
+        .audit-entry.severity-WARNING {
+            border-left-color: var(--neon-amber);
+        }
+
+        .audit-entry.severity-CRITICAL {
+            border-left-color: var(--neon-red);
+            color: var(--neon-red);
+        }
+
+        .audit-time {
+            color: var(--text-dim);
+            font-size: 0.6rem;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MAIN CONTENT AREA
+        ═══════════════════════════════════════════════ */
+        .main-content {
+            flex: 1;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: 1fr 320px;
+            gap: 16px;
+            overflow: hidden;
+            background: radial-gradient(ellipse at 20% 0%, rgba(0, 60, 100, 0.15) 0%, transparent 60%),
+                radial-gradient(ellipse at 80% 100%, rgba(0, 40, 80, 0.1) 0%, transparent 60%),
+                var(--bg-deep);
+        }
+
+        /* ══════════════════════════════════════════��════
+           MULTI-CAMERA GRID
+        ═══════════════════════════════════════════════ */
+        .camera-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 8px;
+            height: 100%;
+        }
+
+        .camera-grid.single-view {
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr;
+        }
+
+        .camera-grid.single-view .feed-cell:not(.expanded) {
+            display: none;
+        }
+
+        .feed-cell {
+            background: var(--bg-card);
+            border-radius: 10px;
+            border: 1px solid var(--border-glow);
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .feed-cell:hover {
+            border-color: var(--border-glow-hover);
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.1);
+        }
+
+        .feed-cell.red-alert-active {
+            border-color: var(--neon-red) !important;
+            box-shadow: 0 0 30px rgba(255, 32, 64, 0.3) !important;
+            animation: cell-red-pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes cell-red-pulse {
+
+            0%,
+            100% {
+                box-shadow: 0 0 20px rgba(255, 32, 64, 0.2);
+            }
+
+            50% {
+                box-shadow: 0 0 40px rgba(255, 32, 64, 0.5);
+            }
+        }
+
+        .feed-header {
+            position: absolute;
+            top: 8px;
+            left: 10px;
+            right: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 5;
+            pointer-events: none;
+        }
+
+        .feed-badge {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            font-weight: 400;
+            border: 1px solid var(--border-glow);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--cyan);
+            letter-spacing: 1px;
+        }
+
+        .live-dot {
+            width: 6px;
+            height: 6px;
+            background: var(--neon-red);
+            border-radius: 50%;
+            box-shadow: 0 0 8px var(--neon-red);
+            animation: pulse-dot 2s infinite;
+        }
+
+        @keyframes pulse-dot {
+
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.4;
+                transform: scale(1.3);
+            }
+        }
+
+        .feed-status {
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
+            color: var(--neon-green);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 3px 8px;
+            border-radius: 4px;
+        }
+
+        .feed-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000;
+            display: block;
+        }
+
+        .feed-offline {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--text-dim);
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            letter-spacing: 1px;
+            gap: 8px;
+        }
+
+        .feed-offline svg {
+            width: 24px;
+            height: 24px;
+            color: var(--text-dim);
+        }
+
+        /* Fullscreen expand button */
+        .expand-btn {
+            position: absolute;
+            bottom: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid var(--border-glow);
+            color: var(--cyan);
+            width: 28px;
+            height: 28px;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            z-index: 5;
+            pointer-events: all;
+        }
+
+        .expand-btn:hover {
+            background: rgba(0, 200, 255, 0.15);
+            border-color: var(--cyan);
+        }
+
+        .expand-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        /* ═══════════════════════════════════════════════
+           INTEL PANEL (Right Column)
+        ═══════════════════════════════════════════════ */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .intel-panel::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .intel-panel::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .card {
+            background: var(--bg-card);
+            backdrop-filter: blur(15px);
+            border-radius: 10px;
+            padding: 18px;
+            border: 1px solid var(--border-glow);
+            transition: border-color 0.3s;
+        }
+
+        .card:hover {
+            border-color: var(--border-glow-hover);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 14px;
+        }
+
+        .card-title {
+            font-family: var(--font-display);
+            font-size: 0.65rem;
+            font-weight: 600;
+            color: var(--cyan);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .card-icon {
+            color: var(--text-dim);
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Threat gauge */
+        .threat-gauge {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+        .score-ring {
+            position: relative;
+            width: 130px;
+            height: 130px;
+            margin-bottom: 12px;
+        }
+
+        .score-ring svg {
+            width: 130px;
+            height: 130px;
+            transform: rotate(-90deg);
+        }
+
+        .score-ring-bg {
+            fill: none;
+            stroke: rgba(255, 255, 255, 0.05);
+            stroke-width: 6;
+        }
+
+        .score-ring-fill {
+            fill: none;
+            stroke: var(--neon-green);
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-dasharray: 377;
+            stroke-dashoffset: 377;
+            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+                stroke 0.5s ease;
+            filter: drop-shadow(0 0 8px var(--neon-green));
+        }
+
+        .score-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+        }
+
+        .score-value {
+            font-family: var(--font-display);
+            font-size: 2.2rem;
+            font-weight: 800;
+            line-height: 1;
+            color: var(--text-primary);
+        }
+
+        .score-label {
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            color: var(--text-dim);
+            letter-spacing: 2px;
+            margin-top: 4px;
+        }
+
+        .status-text {
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            color: var(--neon-green);
+            letter-spacing: 3px;
+            text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+            transition: all 0.5s ease;
+        }
+
+        /* Stats */
+        .stats-list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            background: rgba(0, 200, 255, 0.03);
+            border-radius: 6px;
+            border: 1px solid rgba(0, 200, 255, 0.05);
+        }
+
+        .stat-name {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .stat-val {
+            font-family: var(--font-mono);
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        /* Mode indicator */
+        .mode-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 14px;
+            background: rgba(0, 200, 255, 0.05);
+            border-radius: 6px;
+            border: 1px solid var(--border-glow);
+        }
+
+        .mode-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--cyan);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--cyan);
+        }
+
+        .mode-name {
+            font-family: var(--font-display);
+            font-size: 0.7rem;
+            font-weight: 600;
+            letter-spacing: 2px;
+            color: var(--cyan);
+        }
+
+        /* Buttons */
+        .btn {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid var(--border-glow);
+            border-radius: 6px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.25s;
+            font-family: var(--font-display);
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(0, 100, 200, 0.1));
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+        }
+
+        .btn-primary:hover {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.3), rgba(0, 100, 200, 0.2));
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
+            transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.03);
+            color: var(--text-secondary);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.08);
+            color: var(--text-primary);
+        }
+
+        /* ═══════════════════════════════════════════════
+           MODAL
+        ═══════════════════════════════════════════════ */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 11000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-card {
+            background: var(--bg-panel);
+            width: 520px;
+            max-width: 90vw;
+            border-radius: 12px;
+            padding: 28px;
+            border: 1px solid var(--border-glow);
+            box-shadow: 0 0 60px rgba(0, 200, 255, 0.1);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .modal-overlay.show .modal-card {
+            transform: scale(1);
+        }
+
+        .modal-title {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--cyan);
+            letter-spacing: 2px;
+            margin-bottom: 6px;
+        }
+
+        .modal-subtitle {
+            font-family: var(--font-mono);
+            font-size: 0.7rem;
+            color: var(--text-dim);
+            margin-bottom: 16px;
+        }
+
+        .report-content {
+            background: rgba(0, 0, 0, 0.5);
+            padding: 16px;
+            border-radius: 8px;
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            color: var(--neon-green);
+            margin-bottom: 16px;
+            line-height: 1.6;
+            border: 1px solid var(--border-glow);
+            max-height: 300px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MOBILE RESPONSIVE
+        ═══════════════════════════════════════════════ */
+        @media (max-width: 1024px) {
+            .main-content {
+                grid-template-columns: 1fr 280px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            body {
+                flex-direction: column;
+                overflow-y: auto;
+            }
+
+            .sidebar {
+                width: 100%;
+                min-width: 100%;
+                flex-direction: row;
+                flex-wrap: wrap;
+                padding: 10px 16px;
+                gap: 6px;
+                order: 2;
+                border-right: none;
+                border-top: 1px solid var(--border-glow);
+                overflow-y: visible;
+            }
+
+            .logo {
+                width: 100%;
+                margin-bottom: 6px;
+                font-size: 0.85rem;
+            }
+
+            .version-tag {
+                display: none;
+            }
+
+            .nav-group {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 4px;
+                margin-bottom: 0;
+            }
+
+            .nav-label {
+                width: 100%;
+                margin-bottom: 4px;
+            }
+
+            .nav-item {
+                flex: none;
+                padding: 8px 10px;
+                font-size: 0.75rem;
+            }
+
+            .audit-section {
+                display: none;
+            }
+
+            .main-content {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+                order: 1;
+                overflow-y: auto;
+                padding: 10px;
+            }
+
+            .camera-grid {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                min-height: 250px;
+            }
+
+            .feed-cell:not(:first-child) {
+                display: none;
+            }
+
+            .intel-panel {
+                overflow-y: visible;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .sidebar .nav-item {
+                font-size: 0.7rem;
+                padding: 6px 8px;
+                gap: 6px;
+            }
+
+            .sidebar .nav-item svg {
+                width: 14px;
+                height: 14px;
+            }
+
+            .score-ring {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-ring svg {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-value {
+                font-size: 1.6rem;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Red Alert Overlay -->
+    <div class="red-alert-overlay" id="red-alert-overlay"></div>
+    <div class="red-alert-banner" id="red-alert-banner">⚠ RED ALERT — CRITICAL THREAT DETECTED ⚠</div>
+
+    <!-- SIDEBAR -->
+    <div class="sidebar">
+        <div class="logo">
+            <i data-feather="shield"></i>
+            SENTINEL
+        </div>
+        <div class="version-tag">V10.0 // STANDBY FIX</div>
+
+        <div class="nav-group">
+            <div class="nav-label">Detection Modules</div>
+            <div class="nav-item" onclick="setMode('standby', this)" id="nav-standby">
+                <i data-feather="pause-circle"></i> Standby
+            </div>
+            <div class="nav-item active" onclick="setMode('movement', this)" id="nav-movement">
+                <i data-feather="activity"></i> Movement
+            </div>
+            <div class="nav-item" onclick="setMode('facemask', this)" id="nav-facemask">
+                <i data-feather="eye"></i> Facemask
+            </div>
+            <div class="nav-item" onclick="setMode('weapon', this)" id="nav-weapon">
+                <i data-feather="crosshair"></i> Weapon
+            </div>
+            <div class="nav-item" onclick="setMode('public_safety', this)" id="nav-public_safety">
+                <i data-feather="users"></i> Public Safety
+            </div>
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Input Source</div>
+            <div class="nav-item" onclick="setSource('camera')">
+                <i data-feather="video"></i> Live Camera
+            </div>
+            <div class="nav-item" onclick="document.getElementById('upload-input').click()">
+                <i data-feather="upload-cloud"></i> Upload Video
+            </div>
+            <input type="file" id="upload-input" style="display: none" accept="video/*"
+                onchange="handleFileUpload(this)">
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Grid Layout</div>
+            <div class="nav-item" onclick="setGridLayout('quad')">
+                <i data-feather="grid"></i> 2×2 Grid
+            </div>
+            <div class="nav-item" onclick="setGridLayout('single')">
+                <i data-feather="maximize-2"></i> Single View
+            </div>
+        </div>
+
+        <!-- Audit Log -->
+        <div class="audit-section">
+            <div class="nav-label" style="margin-bottom: 8px;">Operator Log</div>
+            <div class="audit-log-container" id="audit-log-container">
+                <div class="audit-entry">
+                    <div class="audit-time">--:--:--</div>
+                    SYSTEM STANDBY
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="main-content">
+        <!-- Multi-Camera Grid -->
+        <div class="camera-grid" id="camera-grid">
+            <!-- Feed 0 — Primary -->
+            <div class="feed-cell expanded" id="feed-0" onclick="expandFeed(0)">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot"></div>
+                        <span>FEED 01 // PRIMARY</span>
+                    </div>
+                    <div class="feed-status" id="feed-0-status">ACTIVE</div>
+                </div>
+                <img class="feed-stream" id="stream-0" src="/video_feed/0" alt="Feed 0">
+                <button class="expand-btn" onclick="event.stopPropagation(); expandFeed(0)" title="Expand">
+                    <i data-feather="maximize-2"></i>
+                </button>
+            </div>
+
+            <!-- Feed 1 -->
+            <div class="feed-cell" id="feed-1">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 02</span>
+                    </div>
+                    <div class="feed-status" id="feed-1-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-1">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 2 -->
+            <div class="feed-cell" id="feed-2">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 03</span>
+                    </div>
+                    <div class="feed-status" id="feed-2-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-2">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 3 -->
+            <div class="feed-cell" id="feed-3">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 04</span>
+                    </div>
+                    <div class="feed-status" id="feed-3-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-3">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+        </div>
+
+        <!-- Intel Panel -->
+        <div class="intel-panel">
+            <!-- Active Mode -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Active Mode</div>
+                </div>
+                <div class="mode-indicator">
+                    <div class="mode-dot"></div>
+                    <div class="mode-name" id="mode-title">MOVEMENT ANALYSIS</div>
+                </div>
+            </div>
+
+            <!-- Threat Assessment -->
+            <div class="card" id="threat-card">
+                <div class="card-header">
+                    <div class="card-title">Threat Assessment</div>
+                    <i data-feather="alert-triangle" class="card-icon"></i>
+                </div>
+                <div class="threat-gauge">
+                    <div class="score-ring">
+                        <svg viewBox="0 0 130 130">
+                            <circle class="score-ring-bg" cx="65" cy="65" r="60"></circle>
+                            <circle class="score-ring-fill" id="score-ring-fill" cx="65" cy="65" r="60"></circle>
+                        </svg>
+                        <div class="score-text">
+                            <div class="score-value" id="threat-score">0</div>
+                            <div class="score-label">THREAT LEVEL</div>
+                        </div>
+                    </div>
+                    <div class="status-text" id="status-text">SECURE</div>
+                </div>
+            </div>
+
+            <!-- Live Metrics -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Live Metrics</div>
+                    <i data-feather="bar-chart-2" class="card-icon"></i>
+                </div>
+                <div class="stats-list" id="stats-container">
+                    <div class="stat-row">
+                        <span class="stat-name">System Status</span>
+                        <span class="stat-val">Initializing</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Actions</div>
+                </div>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Incident Report</button>
+                <button class="btn btn-secondary" onclick="refreshAuditLog()" style="margin-top: 8px;">Refresh Audit
+                    Log</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Report Modal -->
+    <div id="report-modal" class="modal-overlay">
+        <div class="modal-card">
+            <div class="modal-title">Incident Report</div>
+            <div class="modal-subtitle">Generated by Sentinel AI Agent // Gemini 1.5</div>
+            <div class="report-content" id="report-content">Analyzing data stream...</div>
+            <button class="btn btn-secondary" onclick="closeModal()">Dismiss</button>
+        </div>
+    </div>
+
+    <!-- ═══════════════════════════════════════════════
+         JAVASCRIPT
+    ═══════════════════════════════════════════════ -->
+    <script>
+        feather.replace();
+
+        // ─── State ───
+        let currentLayout = 'quad'; // 'quad' or 'single'
+        let expandedFeed = 0;
+        let isRedAlert = false;
+
+        // ─── Mode Switching ───
+        const modeTitles = {
+            'standby': 'SYSTEM STANDBY',
+            'movement': 'MOVEMENT ANALYSIS',
+            'facemask': 'FACEMASK DETECTION',
+            'weapon': 'WEAPON DETECTION',
+            'public_safety': 'PUBLIC SAFETY'
+        };
+
+        function setMode(mode, element) {
+            // Radio-style selection: always activate the clicked mode
+            // Remove active from all module buttons
+            document.querySelectorAll('.nav-group:first-of-type .nav-item').forEach(el => el.classList.remove('active'));
+
+            // Add active to the clicked button
+            element.classList.add('active');
+
+            // Update UI display
+            document.getElementById('mode-title').textContent = modeTitles[mode] || mode.toUpperCase();
+
+            // Send to backend
+            fetch('/set_mode', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ mode: mode })
+            });
+        }
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: source })
+            })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        // Force the browser to reconnect to the restarted MJPEG stream
+                        refreshFeedStream(0);
+                    }
+                });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+
+                // Show uploading state
+                const statusEl = document.getElementById('feed-0-status');
+                if (statusEl) statusEl.textContent = 'UPLOADING...';
+
+                fetch('/upload_video', { method: 'POST', body: formData })
+                    .then(r => r.json())
+                    .then(data => {
+                        if (data.success) {
+                            // Force the browser to reconnect to the restarted MJPEG stream
+                            refreshFeedStream(0);
+                            if (statusEl) statusEl.textContent = 'FILE FEED';
+                        }
+                    })
+                    .catch(() => {
+                        if (statusEl) statusEl.textContent = 'UPLOAD FAILED';
+                    });
+
+                // Reset file input so the same file can be re-uploaded
+                input.value = '';
+            }
+        }
+
+        /**
+         * Force-refresh an MJPEG stream by setting a new src with a cache-buster.
+         * This drops the old HTTP connection and establishes a fresh one.
+         */
+        function refreshFeedStream(feedId) {
+            const img = document.getElementById('stream-' + feedId);
+            if (img) {
+                // Brief blank to visually signal the switch
+                img.src = '';
+                // Small delay lets the backend fully initialize the new feed
+                setTimeout(() => {
+                    img.src = '/video_feed/' + feedId + '?t=' + Date.now();
+                }, 300);
+            }
+        }
+
+        // ─── Grid Layout ───
+        function setGridLayout(layout) {
+            const grid = document.getElementById('camera-grid');
+            currentLayout = layout;
+
+            if (layout === 'single') {
+                grid.classList.add('single-view');
+                // Show only the expanded feed
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === expandedFeed);
+                });
+            } else {
+                grid.classList.remove('single-view');
+                document.querySelectorAll('.feed-cell').forEach(cell => {
+                    cell.classList.remove('expanded');
+                });
+            }
+        }
+
+        function expandFeed(feedId) {
+            expandedFeed = feedId;
+            if (currentLayout === 'single') {
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === feedId);
+                });
+            }
+        }
+
+        // ─── Stats & Red Alert Updates ───
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    const statusEl = document.getElementById('status-text');
+                    const ringFill = document.getElementById('score-ring-fill');
+                    const threatCard = document.getElementById('threat-card');
+
+                    scoreEl.textContent = score;
+
+                    // Compute ring dash offset (circumference = 2 * π * 60 ≈ 377)
+                    const circumference = 377;
+                    const offset = circumference - (circumference * score / 100);
+                    ringFill.style.strokeDashoffset = offset;
+
+                    // Color based on score
+                    let color, status, glow;
+                    if (score >= 80) {
+                        color = '#ff2040';
+                        status = 'CRITICAL';
+                        glow = 'rgba(255, 32, 64, 0.4)';
+                    } else if (score >= 50) {
+                        color = '#ffaa00';
+                        status = 'ELEVATED';
+                        glow = 'rgba(255, 170, 0, 0.3)';
+                    } else if (score >= 25) {
+                        color = '#00d4ff';
+                        status = 'GUARDED';
+                        glow = 'rgba(0, 200, 255, 0.3)';
+                    } else {
+                        color = '#00ff88';
+                        status = 'SECURE';
+                        glow = 'rgba(0, 255, 136, 0.3)';
+                    }
+
+                    statusEl.textContent = status;
+                    statusEl.style.color = color;
+                    statusEl.style.textShadow = `0 0 20px ${glow}`;
+                    ringFill.style.stroke = color;
+                    ringFill.style.filter = `drop-shadow(0 0 8px ${glow})`;
+
+                    // Red Alert state
+                    const alertOverlay = document.getElementById('red-alert-overlay');
+                    const alertBanner = document.getElementById('red-alert-banner');
+                    const feedCells = document.querySelectorAll('.feed-cell');
+
+                    if (data.red_alert) {
+                        alertOverlay.classList.add('active');
+                        alertBanner.classList.add('active');
+                        feedCells.forEach(cell => cell.classList.add('red-alert-active'));
+                        threatCard.style.borderColor = 'rgba(255, 32, 64, 0.5)';
+
+                        if (!isRedAlert) {
+                            playAlertTone();
+                            isRedAlert = true;
+                        }
+                    } else {
+                        alertOverlay.classList.remove('active');
+                        alertBanner.classList.remove('active');
+                        feedCells.forEach(cell => cell.classList.remove('red-alert-active'));
+                        threatCard.style.borderColor = '';
+                        isRedAlert = false;
+                    }
+
+                    // Update mode display
+                    if (data.mode) {
+                        document.getElementById('mode-title').textContent = modeTitles[data.mode] || data.mode.toUpperCase();
+                    }
+
+                    // Update live metrics
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    if (!data.details || Object.keys(data.details).length === 0) {
+                        container.innerHTML = '<div class="stat-row"><span class="stat-name">System Status</span><span class="stat-val">Standby</span></div>';
+                    } else {
+                        for (const [key, value] of Object.entries(data.details)) {
+                            const div = document.createElement('div');
+                            div.className = 'stat-row';
+                            const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            let displayVal = value;
+                            if (typeof value === 'boolean') {
+                                displayVal = value ? '⚠ YES' : 'No';
+                            }
+                            div.innerHTML = `<span class="stat-name">${formattedKey}</span><span class="stat-val">${displayVal}</span>`;
+                            container.appendChild(div);
+                        }
+                    }
+                })
+                .catch(() => { });
+        }
+
+        // ─── Alert Tone (Web Audio API) ───
+        function playAlertTone() {
+            try {
+                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                const oscillator = audioCtx.createOscillator();
+                const gainNode = audioCtx.createGain();
+
+                oscillator.connect(gainNode);
+                gainNode.connect(audioCtx.destination);
+
+                oscillator.type = 'square';
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime);
+                oscillator.frequency.setValueAtTime(660, audioCtx.currentTime + 0.15);
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime + 0.3);
+
+                gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);
+
+                oscillator.start(audioCtx.currentTime);
+                oscillator.stop(audioCtx.currentTime + 0.5);
+            } catch (e) {
+                // Audio not available — silent fallback
+            }
+        }
+
+        // ─── AI Report ───
+        function generateReport() {
+            const modal = document.getElementById('report-modal');
+            modal.classList.add('show');
+            document.getElementById('report-content').textContent = 'ANALYZING DATA STREAM...';
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                })
+                .catch(() => {
+                    document.getElementById('report-content').textContent = 'ERROR: Connection to AI Agent lost.';
+                });
+        }
+
+        function closeModal() {
+            document.getElementById('report-modal').classList.remove('show');
+        }
+
+        // ─── Audit Log Refresh ───
+        function refreshAuditLog() {
+            fetch('/audit_log')
+                .then(r => r.json())
+                .then(data => {
+                    const container = document.getElementById('audit-log-container');
+                    container.innerHTML = '';
+
+                    if (data.log.length === 0) {
+                        container.innerHTML = '<div class="audit-entry"><div class="audit-time">--:--:--</div>NO ENTRIES</div>';
+                        return;
+                    }
+
+                    data.log.slice(0, 30).forEach(entry => {
+                        const div = document.createElement('div');
+                        div.className = `audit-entry severity-${entry.severity}`;
+                        div.innerHTML = `
+                            <div class="audit-time">${entry.timestamp.split(' ')[1] || entry.timestamp}</div>
+                            ${entry.action}: ${entry.details}
+                        `;
+                        container.appendChild(div);
+                    });
+                })
+                .catch(() => { });
+        }
+
+        // ─── Intervals ───
+        setInterval(updateStats, 1000);
+        setInterval(refreshAuditLog, 5000);
+
+        // Initial load
+        setTimeout(refreshAuditLog, 1500);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard_v11.html

@@ -0,0 +1,1413 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SENTINEL V11 — Intelligence Grid</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap"
+        rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        /* ═══════════════════════════════════════════════
+           CSS VARIABLES — SCI-FI PALETTE
+        ═══════════════════════════════════════════════ */
+        :root {
+            --bg-deep: #05080f;
+            --bg-panel: rgba(8, 16, 32, 0.85);
+            --bg-card: rgba(10, 20, 40, 0.7);
+            --border-glow: rgba(0, 200, 255, 0.15);
+            --border-glow-hover: rgba(0, 200, 255, 0.4);
+            --cyan: #00d4ff;
+            --cyan-dim: #0090aa;
+            --neon-green: #00ff88;
+            --neon-red: #ff2040;
+            --neon-amber: #ffaa00;
+            --text-primary: #e0f0ff;
+            --text-secondary: #5a8aaa;
+            --text-dim: #2a4a5a;
+            --scanline-opacity: 0.03;
+            --font-display: 'Orbitron', sans-serif;
+            --font-body: 'Rajdhani', sans-serif;
+            --font-mono: 'Share Tech Mono', monospace;
+        }
+
+        /* ═══════════════════════════════════════════════
+           BASE RESET & BODY
+        ═══════════════════════════════════════════════ */
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-body);
+            background: var(--bg-deep);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* Scanline overlay on body */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: repeating-linear-gradient(0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 4px);
+            pointer-events: none;
+            z-index: 9999;
+        }
+
+        /* ═══════════════════════════════════════════════
+           RED ALERT OVERLAY
+        ═══════════════════════════════════════════════ */
+        .red-alert-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            z-index: 9998;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .red-alert-overlay.active {
+            opacity: 1;
+            animation: red-pulse-border 1s ease-in-out infinite;
+        }
+
+        .red-alert-overlay.active::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 4px solid var(--neon-red);
+            box-shadow: inset 0 0 80px rgba(255, 32, 64, 0.15),
+                0 0 40px rgba(255, 32, 64, 0.3);
+        }
+
+        .red-alert-banner {
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 20, 40, 0.9);
+            color: #fff;
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 4px;
+            padding: 8px 40px;
+            z-index: 10000;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            box-shadow: 0 4px 30px rgba(255, 20, 40, 0.5);
+            display: none;
+            animation: alert-flash 0.8s ease-in-out infinite;
+        }
+
+        .red-alert-banner.active {
+            display: block;
+        }
+
+        @keyframes red-pulse-border {
+
+            0%,
+            100% {
+                opacity: 0.6;
+            }
+
+            50% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes alert-flash {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.6;
+            }
+        }
+
+        /* ═══════════════════════════════════════════════
+           SIDEBAR
+        ═══════════════════════════════════════════════ */
+        .sidebar {
+            width: 260px;
+            min-width: 260px;
+            background: var(--bg-panel);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-right: 1px solid var(--border-glow);
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            z-index: 100;
+            overflow-y: auto;
+        }
+
+        .logo {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--cyan);
+            letter-spacing: 2px;
+        }
+
+        .logo svg {
+            filter: drop-shadow(0 0 6px var(--cyan));
+        }
+
+        .version-tag {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            color: var(--text-dim);
+            margin-bottom: 24px;
+            letter-spacing: 1px;
+        }
+
+        .nav-group {
+            margin-bottom: 20px;
+        }
+
+        .nav-label {
+            font-family: var(--font-display);
+            font-size: 0.6rem;
+            font-weight: 600;
+            color: var(--text-dim);
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .nav-item {
+            padding: 10px 12px;
+            margin-bottom: 3px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.25s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            border: 1px solid transparent;
+        }
+
+        .nav-item:hover {
+            background: rgba(0, 200, 255, 0.05);
+            color: var(--text-primary);
+            border-color: var(--border-glow);
+        }
+
+        .nav-item.active {
+            background: rgba(0, 200, 255, 0.1);
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+            box-shadow: 0 0 15px rgba(0, 200, 255, 0.05);
+        }
+
+        .nav-item svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Audit Log Panel in sidebar */
+        .audit-section {
+            margin-top: auto;
+            flex-shrink: 0;
+        }
+
+        .audit-log-container {
+            max-height: 200px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .audit-log-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .audit-entry {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            padding: 6px 8px;
+            margin-bottom: 2px;
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.3);
+            border-left: 2px solid var(--cyan-dim);
+            line-height: 1.4;
+            color: var(--text-secondary);
+        }
+
+        .audit-entry.severity-WARNING {
+            border-left-color: var(--neon-amber);
+        }
+
+        .audit-entry.severity-CRITICAL {
+            border-left-color: var(--neon-red);
+            color: var(--neon-red);
+        }
+
+        .audit-time {
+            color: var(--text-dim);
+            font-size: 0.6rem;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MAIN CONTENT AREA
+        ═══════════════════════════════════════════════ */
+        .main-content {
+            flex: 1;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: 1fr 320px;
+            gap: 16px;
+            overflow: hidden;
+            background: radial-gradient(ellipse at 20% 0%, rgba(0, 60, 100, 0.15) 0%, transparent 60%),
+                radial-gradient(ellipse at 80% 100%, rgba(0, 40, 80, 0.1) 0%, transparent 60%),
+                var(--bg-deep);
+        }
+
+        /* ══════════════════════════════════════════��════
+           MULTI-CAMERA GRID
+        ═══════════════════════════════════════════════ */
+        .camera-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 8px;
+            height: 100%;
+        }
+
+        .camera-grid.single-view {
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr;
+        }
+
+        .camera-grid.single-view .feed-cell:not(.expanded) {
+            display: none;
+        }
+
+        .feed-cell {
+            background: var(--bg-card);
+            border-radius: 10px;
+            border: 1px solid var(--border-glow);
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .feed-cell:hover {
+            border-color: var(--border-glow-hover);
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.1);
+        }
+
+        .feed-cell.red-alert-active {
+            border-color: var(--neon-red) !important;
+            box-shadow: 0 0 30px rgba(255, 32, 64, 0.3) !important;
+            animation: cell-red-pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes cell-red-pulse {
+
+            0%,
+            100% {
+                box-shadow: 0 0 20px rgba(255, 32, 64, 0.2);
+            }
+
+            50% {
+                box-shadow: 0 0 40px rgba(255, 32, 64, 0.5);
+            }
+        }
+
+        .feed-header {
+            position: absolute;
+            top: 8px;
+            left: 10px;
+            right: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 5;
+            pointer-events: none;
+        }
+
+        .feed-badge {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            font-weight: 400;
+            border: 1px solid var(--border-glow);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--cyan);
+            letter-spacing: 1px;
+        }
+
+        .live-dot {
+            width: 6px;
+            height: 6px;
+            background: var(--neon-red);
+            border-radius: 50%;
+            box-shadow: 0 0 8px var(--neon-red);
+            animation: pulse-dot 2s infinite;
+        }
+
+        @keyframes pulse-dot {
+
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.4;
+                transform: scale(1.3);
+            }
+        }
+
+        .feed-status {
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
+            color: var(--neon-green);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 3px 8px;
+            border-radius: 4px;
+        }
+
+        .feed-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000;
+            display: block;
+        }
+
+        .feed-offline {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--text-dim);
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            letter-spacing: 1px;
+            gap: 8px;
+        }
+
+        .feed-offline svg {
+            width: 24px;
+            height: 24px;
+            color: var(--text-dim);
+        }
+
+        /* Fullscreen expand button */
+        .expand-btn {
+            position: absolute;
+            bottom: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid var(--border-glow);
+            color: var(--cyan);
+            width: 28px;
+            height: 28px;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            z-index: 5;
+            pointer-events: all;
+        }
+
+        .expand-btn:hover {
+            background: rgba(0, 200, 255, 0.15);
+            border-color: var(--cyan);
+        }
+
+        .expand-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        /* ═══════════════════════════════════════════════
+           INTEL PANEL (Right Column)
+        ═══════════════════════════════════════════════ */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .intel-panel::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .intel-panel::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .card {
+            background: var(--bg-card);
+            backdrop-filter: blur(15px);
+            border-radius: 10px;
+            padding: 18px;
+            border: 1px solid var(--border-glow);
+            transition: border-color 0.3s;
+        }
+
+        .card:hover {
+            border-color: var(--border-glow-hover);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 14px;
+        }
+
+        .card-title {
+            font-family: var(--font-display);
+            font-size: 0.65rem;
+            font-weight: 600;
+            color: var(--cyan);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .card-icon {
+            color: var(--text-dim);
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Threat gauge */
+        .threat-gauge {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+        .score-ring {
+            position: relative;
+            width: 130px;
+            height: 130px;
+            margin-bottom: 12px;
+        }
+
+        .score-ring svg {
+            width: 130px;
+            height: 130px;
+            transform: rotate(-90deg);
+        }
+
+        .score-ring-bg {
+            fill: none;
+            stroke: rgba(255, 255, 255, 0.05);
+            stroke-width: 6;
+        }
+
+        .score-ring-fill {
+            fill: none;
+            stroke: var(--neon-green);
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-dasharray: 377;
+            stroke-dashoffset: 377;
+            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+                stroke 0.5s ease;
+            filter: drop-shadow(0 0 8px var(--neon-green));
+        }
+
+        .score-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+        }
+
+        .score-value {
+            font-family: var(--font-display);
+            font-size: 2.2rem;
+            font-weight: 800;
+            line-height: 1;
+            color: var(--text-primary);
+        }
+
+        .score-label {
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            color: var(--text-dim);
+            letter-spacing: 2px;
+            margin-top: 4px;
+        }
+
+        .status-text {
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            color: var(--neon-green);
+            letter-spacing: 3px;
+            text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+            transition: all 0.5s ease;
+        }
+
+        /* Stats */
+        .stats-list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            background: rgba(0, 200, 255, 0.03);
+            border-radius: 6px;
+            border: 1px solid rgba(0, 200, 255, 0.05);
+        }
+
+        .stat-name {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .stat-val {
+            font-family: var(--font-mono);
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        /* Mode indicator */
+        .mode-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 14px;
+            background: rgba(0, 200, 255, 0.05);
+            border-radius: 6px;
+            border: 1px solid var(--border-glow);
+        }
+
+        .mode-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--cyan);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--cyan);
+        }
+
+        .mode-name {
+            font-family: var(--font-display);
+            font-size: 0.7rem;
+            font-weight: 600;
+            letter-spacing: 2px;
+            color: var(--cyan);
+        }
+
+        /* Buttons */
+        .btn {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid var(--border-glow);
+            border-radius: 6px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.25s;
+            font-family: var(--font-display);
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(0, 100, 200, 0.1));
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+        }
+
+        .btn-primary:hover {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.3), rgba(0, 100, 200, 0.2));
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
+            transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.03);
+            color: var(--text-secondary);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.08);
+            color: var(--text-primary);
+        }
+
+        /* ═══════════════════════════════════════════════
+           MODAL
+        ═══════════════════════════════════════════════ */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 11000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-card {
+            background: var(--bg-panel);
+            width: 520px;
+            max-width: 90vw;
+            border-radius: 12px;
+            padding: 28px;
+            border: 1px solid var(--border-glow);
+            box-shadow: 0 0 60px rgba(0, 200, 255, 0.1);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .modal-overlay.show .modal-card {
+            transform: scale(1);
+        }
+
+        .modal-title {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--cyan);
+            letter-spacing: 2px;
+            margin-bottom: 6px;
+        }
+
+        .modal-subtitle {
+            font-family: var(--font-mono);
+            font-size: 0.7rem;
+            color: var(--text-dim);
+            margin-bottom: 16px;
+        }
+
+        .report-content {
+            background: rgba(0, 0, 0, 0.5);
+            padding: 16px;
+            border-radius: 8px;
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            color: var(--neon-green);
+            margin-bottom: 16px;
+            line-height: 1.6;
+            border: 1px solid var(--border-glow);
+            max-height: 300px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MOBILE RESPONSIVE
+        ═══════════════════════════════════════════════ */
+        @media (max-width: 1024px) {
+            .main-content {
+                grid-template-columns: 1fr 280px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            body {
+                flex-direction: column;
+                overflow-y: auto;
+            }
+
+            .sidebar {
+                width: 100%;
+                min-width: 100%;
+                flex-direction: row;
+                flex-wrap: wrap;
+                padding: 10px 16px;
+                gap: 6px;
+                order: 2;
+                border-right: none;
+                border-top: 1px solid var(--border-glow);
+                overflow-y: visible;
+            }
+
+            .logo {
+                width: 100%;
+                margin-bottom: 6px;
+                font-size: 0.85rem;
+            }
+
+            .version-tag {
+                display: none;
+            }
+
+            .nav-group {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 4px;
+                margin-bottom: 0;
+            }
+
+            .nav-label {
+                width: 100%;
+                margin-bottom: 4px;
+            }
+
+            .nav-item {
+                flex: none;
+                padding: 8px 10px;
+                font-size: 0.75rem;
+            }
+
+            .audit-section {
+                display: none;
+            }
+
+            .main-content {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+                order: 1;
+                overflow-y: auto;
+                padding: 10px;
+            }
+
+            .camera-grid {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                min-height: 250px;
+            }
+
+            .feed-cell:not(:first-child) {
+                display: none;
+            }
+
+            .intel-panel {
+                overflow-y: visible;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .sidebar .nav-item {
+                font-size: 0.7rem;
+                padding: 6px 8px;
+                gap: 6px;
+            }
+
+            .sidebar .nav-item svg {
+                width: 14px;
+                height: 14px;
+            }
+
+            .score-ring {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-ring svg {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-value {
+                font-size: 1.6rem;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Red Alert Overlay -->
+    <div class="red-alert-overlay" id="red-alert-overlay"></div>
+    <div class="red-alert-banner" id="red-alert-banner">
+        ⚠ RED ALERT — CRITICAL THREAT DETECTED ⚠
+        <button class="btn btn-secondary" onclick="resetSystem()"
+            style="width: auto; margin-top: 10px; background: rgba(0,0,0,0.5); border: 1px solid #ff2040; color: #ff2040;">RESET
+            SYSTEM</button>
+    </div>
+
+    <!-- SIDEBAR -->
+    <div class="sidebar">
+        <div class="logo">
+            <i data-feather="shield"></i>
+            SENTINEL
+        </div>
+        <div class="version-tag">V11.0 // MULTI-MODULE</div>
+
+        <div class="nav-group">
+            <div class="nav-label">Detection Modules</div>
+            <div class="nav-item active" onclick="toggleModule('movement', this)" id="nav-movement">
+                <i data-feather="activity"></i> Movement
+            </div>
+            <div class="nav-item" onclick="toggleModule('facemask', this)" id="nav-facemask">
+                <i data-feather="eye"></i> Facemask
+            </div>
+            <div class="nav-item" onclick="toggleModule('weapon', this)" id="nav-weapon">
+                <i data-feather="crosshair"></i> Weapon
+            </div>
+            <div class="nav-item" onclick="toggleModule('public_safety', this)" id="nav-public_safety">
+                <i data-feather="users"></i> Public Safety
+            </div>
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Input Source</div>
+            <div class="nav-item" onclick="setSource('camera')">
+                <i data-feather="video"></i> Live Camera
+            </div>
+            <div class="nav-item" onclick="document.getElementById('upload-input').click()">
+                <i data-feather="upload-cloud"></i> Upload Video
+            </div>
+            <input type="file" id="upload-input" style="display: none" accept="video/*"
+                onchange="handleFileUpload(this)">
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Grid Layout</div>
+            <div class="nav-item" onclick="setGridLayout('quad')">
+                <i data-feather="grid"></i> 2×2 Grid
+            </div>
+            <div class="nav-item" onclick="setGridLayout('single')">
+                <i data-feather="maximize-2"></i> Single View
+            </div>
+        </div>
+
+        <!-- Audit Log -->
+        <div class="audit-section">
+            <div class="nav-label" style="margin-bottom: 8px;">Operator Log</div>
+            <div class="audit-log-container" id="audit-log-container">
+                <div class="audit-entry">
+                    <div class="audit-time">--:--:--</div>
+                    SYSTEM STANDBY
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="main-content">
+        <!-- Multi-Camera Grid -->
+        <div class="camera-grid" id="camera-grid">
+            <!-- Feed 0 — Primary -->
+            <div class="feed-cell expanded" id="feed-0" onclick="expandFeed(0)">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot"></div>
+                        <span>FEED 01 // PRIMARY</span>
+                    </div>
+                    <div class="feed-status" id="feed-0-status">ACTIVE</div>
+                </div>
+                <img class="feed-stream" id="stream-0" src="/video_feed/0" alt="Feed 0">
+                <button class="expand-btn" onclick="event.stopPropagation(); expandFeed(0)" title="Expand">
+                    <i data-feather="maximize-2"></i>
+                </button>
+            </div>
+
+            <!-- Feed 1 -->
+            <div class="feed-cell" id="feed-1">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 02</span>
+                    </div>
+                    <div class="feed-status" id="feed-1-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-1">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 2 -->
+            <div class="feed-cell" id="feed-2">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 03</span>
+                    </div>
+                    <div class="feed-status" id="feed-2-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-2">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 3 -->
+            <div class="feed-cell" id="feed-3">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 04</span>
+                    </div>
+                    <div class="feed-status" id="feed-3-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-3">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+        </div>
+
+        <!-- Intel Panel -->
+        <div class="intel-panel">
+            <!-- Active Mode -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Active Mode</div>
+                </div>
+                <div class="mode-indicator">
+                    <div class="mode-dot"></div>
+                    <div class="mode-name" id="mode-title">1 MODULE ACTIVE</div>
+                </div>
+            </div>
+
+            <!-- Threat Assessment -->
+            <div class="card" id="threat-card">
+                <div class="card-header">
+                    <div class="card-title">Threat Assessment</div>
+                    <i data-feather="alert-triangle" class="card-icon"></i>
+                </div>
+                <div class="threat-gauge">
+                    <div class="score-ring">
+                        <svg viewBox="0 0 130 130">
+                            <circle class="score-ring-bg" cx="65" cy="65" r="60"></circle>
+                            <circle class="score-ring-fill" id="score-ring-fill" cx="65" cy="65" r="60"></circle>
+                        </svg>
+                        <div class="score-text">
+                            <div class="score-value" id="threat-score">0</div>
+                            <div class="score-label">THREAT LEVEL</div>
+                        </div>
+                    </div>
+                    <div class="status-text" id="status-text">SECURE</div>
+                </div>
+            </div>
+
+            <!-- Live Metrics -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Live Metrics</div>
+                    <i data-feather="bar-chart-2" class="card-icon"></i>
+                </div>
+                <div class="stats-list" id="stats-container">
+                    <div class="stat-row">
+                        <span class="stat-name">System Status</span>
+                        <span class="stat-val">Initializing</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Actions</div>
+                </div>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Incident Report</button>
+                <button class="btn btn-secondary" onclick="refreshAuditLog()" style="margin-top: 8px;">Refresh Audit
+                    Log</button>
+                <button class="btn btn-secondary" onclick="resetSystem()"
+                    style="margin-top: 8px; border-color: #ff2040; color: #ff2040;">⚠ SYSTEM RESET</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Report Modal -->
+    <div id="report-modal" class="modal-overlay">
+        <div class="modal-card">
+            <div class="modal-title">Incident Report</div>
+            <div class="modal-subtitle">Generated by Sentinel AI Agent // Gemini 1.5</div>
+            <div class="report-content" id="report-content">Analyzing data stream...</div>
+            <button class="btn btn-secondary" onclick="closeModal()">Dismiss</button>
+        </div>
+    </div>
+
+    <!-- ════════════════════���══════════════════════════
+         JAVASCRIPT
+    ═══════════════════════════════════════════════ -->
+    <script>
+        feather.replace();
+
+        // ─── State ───
+        let currentLayout = 'quad'; // 'quad' or 'single'
+        let expandedFeed = 0;
+        let isRedAlert = false;
+
+        // ─── Module Toggling ───
+        const modeTitles = {
+            'movement': 'MOVEMENT ANALYSIS',
+            'facemask': 'FACEMASK DETECTION',
+            'weapon': 'WEAPON DETECTION',
+            'public_safety': 'PUBLIC SAFETY'
+        };
+
+        function toggleModule(module, buttonElement) {
+            buttonElement.classList.toggle('active');
+
+            fetch('/toggle_module', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ module: module })
+            })
+                .then(r => r.json())
+                .then(data => {
+                    updateActiveModulesDisplay(data.active_modules);
+                });
+        }
+
+        function updateActiveModulesDisplay(activeModules) {
+            const modeTitle = document.getElementById('mode-title');
+            const count = activeModules.length;
+
+            if (count === 0) {
+                modeTitle.textContent = 'NO MODULES ACTIVE';
+            } else if (count === 1) {
+                modeTitle.textContent = modeTitles[activeModules[0]] || activeModules[0].toUpperCase();
+            } else {
+                modeTitle.textContent = `${count} MODULES ACTIVE`;
+            }
+        }
+
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: source })
+            })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        // Force the browser to reconnect to the restarted MJPEG stream
+                        refreshFeedStream(0);
+                    }
+                });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+
+                // Show uploading state
+                const statusEl = document.getElementById('feed-0-status');
+                if (statusEl) statusEl.textContent = 'UPLOADING...';
+
+                fetch('/upload_video', { method: 'POST', body: formData })
+                    .then(r => r.json())
+                    .then(data => {
+                        if (data.success) {
+                            // Force the browser to reconnect to the restarted MJPEG stream
+                            refreshFeedStream(0);
+                            if (statusEl) statusEl.textContent = 'FILE FEED';
+                        }
+                    })
+                    .catch(() => {
+                        if (statusEl) statusEl.textContent = 'UPLOAD FAILED';
+                    });
+
+                // Reset file input so the same file can be re-uploaded
+                input.value = '';
+            }
+        }
+
+        /**
+         * Force-refresh an MJPEG stream by setting a new src with a cache-buster.
+         * This drops the old HTTP connection and establishes a fresh one.
+         */
+        function refreshFeedStream(feedId) {
+            const img = document.getElementById('stream-' + feedId);
+            if (img) {
+                // Brief blank to visually signal the switch
+                img.src = '';
+                // Small delay lets the backend fully initialize the new feed
+                setTimeout(() => {
+                    img.src = '/video_feed/' + feedId + '?t=' + Date.now();
+                }, 300);
+            }
+        }
+
+        // ─── Grid Layout ───
+        function setGridLayout(layout) {
+            const grid = document.getElementById('camera-grid');
+            currentLayout = layout;
+
+            if (layout === 'single') {
+                grid.classList.add('single-view');
+                // Show only the expanded feed
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === expandedFeed);
+                });
+            } else {
+                grid.classList.remove('single-view');
+                document.querySelectorAll('.feed-cell').forEach(cell => {
+                    cell.classList.remove('expanded');
+                });
+            }
+        }
+
+        function expandFeed(feedId) {
+            expandedFeed = feedId;
+            if (currentLayout === 'single') {
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === feedId);
+                });
+            }
+        }
+
+        // ─── Stats & Red Alert Updates ───
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    const statusEl = document.getElementById('status-text');
+                    const ringFill = document.getElementById('score-ring-fill');
+                    const threatCard = document.getElementById('threat-card');
+
+                    scoreEl.textContent = score;
+
+                    // Compute ring dash offset (circumference = 2 * π * 60 ≈ 377)
+                    const circumference = 377;
+                    const offset = circumference - (circumference * score / 100);
+                    ringFill.style.strokeDashoffset = offset;
+
+                    // Color based on score
+                    let color, status, glow;
+                    if (score >= 80) {
+                        color = '#ff2040';
+                        status = 'CRITICAL';
+                        glow = 'rgba(255, 32, 64, 0.4)';
+                    } else if (score >= 50) {
+                        color = '#ffaa00';
+                        status = 'ELEVATED';
+                        glow = 'rgba(255, 170, 0, 0.3)';
+                    } else if (score >= 25) {
+                        color = '#00d4ff';
+                        status = 'GUARDED';
+                        glow = 'rgba(0, 200, 255, 0.3)';
+                    } else {
+                        color = '#00ff88';
+                        status = 'SECURE';
+                        glow = 'rgba(0, 255, 136, 0.3)';
+                    }
+
+                    statusEl.textContent = status;
+                    statusEl.style.color = color;
+                    statusEl.style.textShadow = `0 0 20px ${glow}`;
+                    ringFill.style.stroke = color;
+                    ringFill.style.filter = `drop-shadow(0 0 8px ${glow})`;
+
+                    // Red Alert state
+                    const alertOverlay = document.getElementById('red-alert-overlay');
+                    const alertBanner = document.getElementById('red-alert-banner');
+                    const feedCells = document.querySelectorAll('.feed-cell');
+
+                    if (data.red_alert) {
+                        alertOverlay.classList.add('active');
+                        alertBanner.classList.add('active');
+                        feedCells.forEach(cell => cell.classList.add('red-alert-active'));
+                        threatCard.style.borderColor = 'rgba(255, 32, 64, 0.5)';
+
+                        if (!isRedAlert) {
+                            playAlertTone();
+                            isRedAlert = true;
+                        }
+                    } else {
+                        alertOverlay.classList.remove('active');
+                        alertBanner.classList.remove('active');
+                        feedCells.forEach(cell => cell.classList.remove('red-alert-active'));
+                        threatCard.style.borderColor = '';
+                        isRedAlert = false;
+                    }
+
+                    // Update mode display
+                    if (data.active_modules) {
+                        updateActiveModulesDisplay(data.active_modules);
+                    }
+
+                    // Update live metrics
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    if (!data.details || Object.keys(data.details).length === 0) {
+                        container.innerHTML = '<div class="stat-row"><span class="stat-name">System Status</span><span class="stat-val">Standby</span></div>';
+                    } else {
+                        for (const [key, value] of Object.entries(data.details)) {
+                            const div = document.createElement('div');
+                            div.className = 'stat-row';
+                            const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            let displayVal = value;
+                            if (typeof value === 'boolean') {
+                                displayVal = value ? '⚠ YES' : 'No';
+                            }
+                            div.innerHTML = `<span class="stat-name">${formattedKey}</span><span class="stat-val">${displayVal}</span>`;
+                            container.appendChild(div);
+                        }
+                    }
+                })
+                .catch(() => { });
+        }
+
+        // ─── Alert Tone (Web Audio API) ───
+        function playAlertTone() {
+            try {
+                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                const oscillator = audioCtx.createOscillator();
+                const gainNode = audioCtx.createGain();
+
+                oscillator.connect(gainNode);
+                gainNode.connect(audioCtx.destination);
+
+                oscillator.type = 'square';
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime);
+                oscillator.frequency.setValueAtTime(660, audioCtx.currentTime + 0.15);
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime + 0.3);
+
+                gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);
+
+                oscillator.start(audioCtx.currentTime);
+                oscillator.stop(audioCtx.currentTime + 0.5);
+            } catch (e) {
+                // Audio not available — silent fallback
+            }
+        }
+
+        // ─── AI Report ───
+        function generateReport() {
+            const modal = document.getElementById('report-modal');
+            modal.classList.add('show');
+            document.getElementById('report-content').textContent = 'ANALYZING DATA STREAM...';
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                })
+                .catch(() => {
+                    document.getElementById('report-content').textContent = 'ERROR: Connection to AI Agent lost.';
+                });
+        }
+
+        function closeModal() {
+            document.getElementById('report-modal').classList.remove('show');
+        }
+
+        // ─── Audit Log Refresh ───
+        function refreshAuditLog() {
+            fetch('/audit_log')
+                .then(r => r.json())
+                .then(data => {
+                    const container = document.getElementById('audit-log-container');
+                    container.innerHTML = '';
+
+                    if (data.log.length === 0) {
+                        container.innerHTML = '<div class="audit-entry"><div class="audit-time">--:--:--</div>NO ENTRIES</div>';
+                        return;
+                    }
+
+                    data.log.slice(0, 30).forEach(entry => {
+                        const div = document.createElement('div');
+                        div.className = `audit-entry severity-${entry.severity}`;
+                        div.innerHTML = `
+                            <div class="audit-time">${entry.timestamp.split(' ')[1] || entry.timestamp}</div>
+                            ${entry.action}: ${entry.details}
+                        `;
+                        container.appendChild(div);
+                    });
+                })
+                .catch(() => { });
+        }
+
+        // ─── System Reset ───
+        function resetSystem() {
+            if (!confirm("⚠ CONFIRM SYSTEM RESET ⚠\n\nThis will clear all tracking history, threat scores, and active alerts.\nThe system will revert to default state.")) {
+                return;
+            }
+
+            fetch('/reset_system', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        // Reload page to refresh all UI states cleanly
+                        window.location.reload();
+                    }
+                });
+        }
+
+        // ─── Intervals ───
+        setInterval(updateStats, 1000);
+        setInterval(refreshAuditLog, 5000);
+
+        // Initial load
+        setTimeout(refreshAuditLog, 1500);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard_v11_partial.html

@@ -0,0 +1,1382 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SENTINEL V11 — Intelligence Grid</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap"
+        rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        /* ═══════════════════════════════════════════════
+           CSS VARIABLES — SCI-FI PALETTE
+        ═══════════════════════════════════════════════ */
+        :root {
+            --bg-deep: #05080f;
+            --bg-panel: rgba(8, 16, 32, 0.85);
+            --bg-card: rgba(10, 20, 40, 0.7);
+            --border-glow: rgba(0, 200, 255, 0.15);
+            --border-glow-hover: rgba(0, 200, 255, 0.4);
+            --cyan: #00d4ff;
+            --cyan-dim: #0090aa;
+            --neon-green: #00ff88;
+            --neon-red: #ff2040;
+            --neon-amber: #ffaa00;
+            --text-primary: #e0f0ff;
+            --text-secondary: #5a8aaa;
+            --text-dim: #2a4a5a;
+            --scanline-opacity: 0.03;
+            --font-display: 'Orbitron', sans-serif;
+            --font-body: 'Rajdhani', sans-serif;
+            --font-mono: 'Share Tech Mono', monospace;
+        }
+
+        /* ═══════════════════════════════════════════════
+           BASE RESET & BODY
+        ═══════════════════════════════════════════════ */
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-body);
+            background: var(--bg-deep);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* Scanline overlay on body */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: repeating-linear-gradient(0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 4px);
+            pointer-events: none;
+            z-index: 9999;
+        }
+
+        /* ═══════════════════════════════════════════════
+           RED ALERT OVERLAY
+        ═══════════════════════════════════════════════ */
+        .red-alert-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            z-index: 9998;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .red-alert-overlay.active {
+            opacity: 1;
+            animation: red-pulse-border 1s ease-in-out infinite;
+        }
+
+        .red-alert-overlay.active::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 4px solid var(--neon-red);
+            box-shadow: inset 0 0 80px rgba(255, 32, 64, 0.15),
+                0 0 40px rgba(255, 32, 64, 0.3);
+        }
+
+        .red-alert-banner {
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 20, 40, 0.9);
+            color: #fff;
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 4px;
+            padding: 8px 40px;
+            z-index: 10000;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            box-shadow: 0 4px 30px rgba(255, 20, 40, 0.5);
+            display: none;
+            animation: alert-flash 0.8s ease-in-out infinite;
+        }
+
+        .red-alert-banner.active {
+            display: block;
+        }
+
+        @keyframes red-pulse-border {
+
+            0%,
+            100% {
+                opacity: 0.6;
+            }
+
+            50% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes alert-flash {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.6;
+            }
+        }
+
+        /* ═══════════════════════════════════════════════
+           SIDEBAR
+        ═══════════════════════════════════════════════ */
+        .sidebar {
+            width: 260px;
+            min-width: 260px;
+            background: var(--bg-panel);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-right: 1px solid var(--border-glow);
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            z-index: 100;
+            overflow-y: auto;
+        }
+
+        .logo {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--cyan);
+            letter-spacing: 2px;
+        }
+
+        .logo svg {
+            filter: drop-shadow(0 0 6px var(--cyan));
+        }
+
+        .version-tag {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            color: var(--text-dim);
+            margin-bottom: 24px;
+            letter-spacing: 1px;
+        }
+
+        .nav-group {
+            margin-bottom: 20px;
+        }
+
+        .nav-label {
+            font-family: var(--font-display);
+            font-size: 0.6rem;
+            font-weight: 600;
+            color: var(--text-dim);
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .nav-item {
+            padding: 10px 12px;
+            margin-bottom: 3px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.25s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            border: 1px solid transparent;
+        }
+
+        .nav-item:hover {
+            background: rgba(0, 200, 255, 0.05);
+            color: var(--text-primary);
+            border-color: var(--border-glow);
+        }
+
+        .nav-item.active {
+            background: rgba(0, 200, 255, 0.1);
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+            box-shadow: 0 0 15px rgba(0, 200, 255, 0.05);
+        }
+
+        .nav-item svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Audit Log Panel in sidebar */
+        .audit-section {
+            margin-top: auto;
+            flex-shrink: 0;
+        }
+
+        .audit-log-container {
+            max-height: 200px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .audit-log-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .audit-entry {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            padding: 6px 8px;
+            margin-bottom: 2px;
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.3);
+            border-left: 2px solid var(--cyan-dim);
+            line-height: 1.4;
+            color: var(--text-secondary);
+        }
+
+        .audit-entry.severity-WARNING {
+            border-left-color: var(--neon-amber);
+        }
+
+        .audit-entry.severity-CRITICAL {
+            border-left-color: var(--neon-red);
+            color: var(--neon-red);
+        }
+
+        .audit-time {
+            color: var(--text-dim);
+            font-size: 0.6rem;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MAIN CONTENT AREA
+        ═══════════════════════════════════════════════ */
+        .main-content {
+            flex: 1;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: 1fr 320px;
+            gap: 16px;
+            overflow: hidden;
+            background: radial-gradient(ellipse at 20% 0%, rgba(0, 60, 100, 0.15) 0%, transparent 60%),
+                radial-gradient(ellipse at 80% 100%, rgba(0, 40, 80, 0.1) 0%, transparent 60%),
+                var(--bg-deep);
+        }
+
+        /* ══════════════════════════════════════════��════
+           MULTI-CAMERA GRID
+        ═══════════════════════════════════════════════ */
+        .camera-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 8px;
+            height: 100%;
+        }
+
+        .camera-grid.single-view {
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr;
+        }
+
+        .camera-grid.single-view .feed-cell:not(.expanded) {
+            display: none;
+        }
+
+        .feed-cell {
+            background: var(--bg-card);
+            border-radius: 10px;
+            border: 1px solid var(--border-glow);
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .feed-cell:hover {
+            border-color: var(--border-glow-hover);
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.1);
+        }
+
+        .feed-cell.red-alert-active {
+            border-color: var(--neon-red) !important;
+            box-shadow: 0 0 30px rgba(255, 32, 64, 0.3) !important;
+            animation: cell-red-pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes cell-red-pulse {
+
+            0%,
+            100% {
+                box-shadow: 0 0 20px rgba(255, 32, 64, 0.2);
+            }
+
+            50% {
+                box-shadow: 0 0 40px rgba(255, 32, 64, 0.5);
+            }
+        }
+
+        .feed-header {
+            position: absolute;
+            top: 8px;
+            left: 10px;
+            right: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 5;
+            pointer-events: none;
+        }
+
+        .feed-badge {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            font-weight: 400;
+            border: 1px solid var(--border-glow);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--cyan);
+            letter-spacing: 1px;
+        }
+
+        .live-dot {
+            width: 6px;
+            height: 6px;
+            background: var(--neon-red);
+            border-radius: 50%;
+            box-shadow: 0 0 8px var(--neon-red);
+            animation: pulse-dot 2s infinite;
+        }
+
+        @keyframes pulse-dot {
+
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.4;
+                transform: scale(1.3);
+            }
+        }
+
+        .feed-status {
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
+            color: var(--neon-green);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 3px 8px;
+            border-radius: 4px;
+        }
+
+        .feed-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000;
+            display: block;
+        }
+
+        .feed-offline {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--text-dim);
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            letter-spacing: 1px;
+            gap: 8px;
+        }
+
+        .feed-offline svg {
+            width: 24px;
+            height: 24px;
+            color: var(--text-dim);
+        }
+
+        /* Fullscreen expand button */
+        .expand-btn {
+            position: absolute;
+            bottom: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid var(--border-glow);
+            color: var(--cyan);
+            width: 28px;
+            height: 28px;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            z-index: 5;
+            pointer-events: all;
+        }
+
+        .expand-btn:hover {
+            background: rgba(0, 200, 255, 0.15);
+            border-color: var(--cyan);
+        }
+
+        .expand-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        /* ═══════════════════════════════════════════════
+           INTEL PANEL (Right Column)
+        ═══════════════════════════════════════════════ */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .intel-panel::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .intel-panel::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .card {
+            background: var(--bg-card);
+            backdrop-filter: blur(15px);
+            border-radius: 10px;
+            padding: 18px;
+            border: 1px solid var(--border-glow);
+            transition: border-color 0.3s;
+        }
+
+        .card:hover {
+            border-color: var(--border-glow-hover);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 14px;
+        }
+
+        .card-title {
+            font-family: var(--font-display);
+            font-size: 0.65rem;
+            font-weight: 600;
+            color: var(--cyan);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .card-icon {
+            color: var(--text-dim);
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Threat gauge */
+        .threat-gauge {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+        .score-ring {
+            position: relative;
+            width: 130px;
+            height: 130px;
+            margin-bottom: 12px;
+        }
+
+        .score-ring svg {
+            width: 130px;
+            height: 130px;
+            transform: rotate(-90deg);
+        }
+
+        .score-ring-bg {
+            fill: none;
+            stroke: rgba(255, 255, 255, 0.05);
+            stroke-width: 6;
+        }
+
+        .score-ring-fill {
+            fill: none;
+            stroke: var(--neon-green);
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-dasharray: 377;
+            stroke-dashoffset: 377;
+            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+                stroke 0.5s ease;
+            filter: drop-shadow(0 0 8px var(--neon-green));
+        }
+
+        .score-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+        }
+
+        .score-value {
+            font-family: var(--font-display);
+            font-size: 2.2rem;
+            font-weight: 800;
+            line-height: 1;
+            color: var(--text-primary);
+        }
+
+        .score-label {
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            color: var(--text-dim);
+            letter-spacing: 2px;
+            margin-top: 4px;
+        }
+
+        .status-text {
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            color: var(--neon-green);
+            letter-spacing: 3px;
+            text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+            transition: all 0.5s ease;
+        }
+
+        /* Stats */
+        .stats-list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            background: rgba(0, 200, 255, 0.03);
+            border-radius: 6px;
+            border: 1px solid rgba(0, 200, 255, 0.05);
+        }
+
+        .stat-name {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .stat-val {
+            font-family: var(--font-mono);
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        /* Mode indicator */
+        .mode-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 14px;
+            background: rgba(0, 200, 255, 0.05);
+            border-radius: 6px;
+            border: 1px solid var(--border-glow);
+        }
+
+        .mode-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--cyan);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--cyan);
+        }
+
+        .mode-name {
+            font-family: var(--font-display);
+            font-size: 0.7rem;
+            font-weight: 600;
+            letter-spacing: 2px;
+            color: var(--cyan);
+        }
+
+        /* Buttons */
+        .btn {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid var(--border-glow);
+            border-radius: 6px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.25s;
+            font-family: var(--font-display);
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(0, 100, 200, 0.1));
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+        }
+
+        .btn-primary:hover {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.3), rgba(0, 100, 200, 0.2));
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
+            transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.03);
+            color: var(--text-secondary);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.08);
+            color: var(--text-primary);
+        }
+
+        /* ═══════════════════════════════════════════════
+           MODAL
+        ═══════════════════════════════════════════════ */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 11000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-card {
+            background: var(--bg-panel);
+            width: 520px;
+            max-width: 90vw;
+            border-radius: 12px;
+            padding: 28px;
+            border: 1px solid var(--border-glow);
+            box-shadow: 0 0 60px rgba(0, 200, 255, 0.1);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .modal-overlay.show .modal-card {
+            transform: scale(1);
+        }
+
+        .modal-title {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--cyan);
+            letter-spacing: 2px;
+            margin-bottom: 6px;
+        }
+
+        .modal-subtitle {
+            font-family: var(--font-mono);
+            font-size: 0.7rem;
+            color: var(--text-dim);
+            margin-bottom: 16px;
+        }
+
+        .report-content {
+            background: rgba(0, 0, 0, 0.5);
+            padding: 16px;
+            border-radius: 8px;
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            color: var(--neon-green);
+            margin-bottom: 16px;
+            line-height: 1.6;
+            border: 1px solid var(--border-glow);
+            max-height: 300px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MOBILE RESPONSIVE
+        ═══════════════════════════════════════════════ */
+        @media (max-width: 1024px) {
+            .main-content {
+                grid-template-columns: 1fr 280px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            body {
+                flex-direction: column;
+                overflow-y: auto;
+            }
+
+            .sidebar {
+                width: 100%;
+                min-width: 100%;
+                flex-direction: row;
+                flex-wrap: wrap;
+                padding: 10px 16px;
+                gap: 6px;
+                order: 2;
+                border-right: none;
+                border-top: 1px solid var(--border-glow);
+                overflow-y: visible;
+            }
+
+            .logo {
+                width: 100%;
+                margin-bottom: 6px;
+                font-size: 0.85rem;
+            }
+
+            .version-tag {
+                display: none;
+            }
+
+            .nav-group {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 4px;
+                margin-bottom: 0;
+            }
+
+            .nav-label {
+                width: 100%;
+                margin-bottom: 4px;
+            }
+
+            .nav-item {
+                flex: none;
+                padding: 8px 10px;
+                font-size: 0.75rem;
+            }
+
+            .audit-section {
+                display: none;
+            }
+
+            .main-content {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+                order: 1;
+                overflow-y: auto;
+                padding: 10px;
+            }
+
+            .camera-grid {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                min-height: 250px;
+            }
+
+            .feed-cell:not(:first-child) {
+                display: none;
+            }
+
+            .intel-panel {
+                overflow-y: visible;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .sidebar .nav-item {
+                font-size: 0.7rem;
+                padding: 6px 8px;
+                gap: 6px;
+            }
+
+            .sidebar .nav-item svg {
+                width: 14px;
+                height: 14px;
+            }
+
+            .score-ring {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-ring svg {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-value {
+                font-size: 1.6rem;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Red Alert Overlay -->
+    <div class="red-alert-overlay" id="red-alert-overlay"></div>
+    <div class="red-alert-banner" id="red-alert-banner">⚠ RED ALERT — CRITICAL THREAT DETECTED ⚠</div>
+
+    <!-- SIDEBAR -->
+    <div class="sidebar">
+        <div class="logo">
+            <i data-feather="shield"></i>
+            SENTINEL
+        </div>
+        <div class="version-tag">V11.0 // MULTI-MODULE</div>
+
+        <div class="nav-group">
+            <div class="nav-label">Detection Modules</div>
+            <div class="nav-item active" onclick="toggleModule('movement', this)" id="nav-movement">
+                <i data-feather="activity"></i> Movement
+            </div>
+            <div class="nav-item" onclick="toggleModule('facemask', this)" id="nav-facemask">
+                <i data-feather="eye"></i> Facemask
+            </div>
+            <div class="nav-item" onclick="toggleModule('weapon', this)" id="nav-weapon">
+                <i data-feather="crosshair"></i> Weapon
+            </div>
+            <div class="nav-item" onclick="toggleModule('public_safety', this)" id="nav-public_safety">
+                <i data-feather="users"></i> Public Safety
+            </div>
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Input Source</div>
+            <div class="nav-item" onclick="setSource('camera')">
+                <i data-feather="video"></i> Live Camera
+            </div>
+            <div class="nav-item" onclick="document.getElementById('upload-input').click()">
+                <i data-feather="upload-cloud"></i> Upload Video
+            </div>
+            <input type="file" id="upload-input" style="display: none" accept="video/*"
+                onchange="handleFileUpload(this)">
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Grid Layout</div>
+            <div class="nav-item" onclick="setGridLayout('quad')">
+                <i data-feather="grid"></i> 2×2 Grid
+            </div>
+            <div class="nav-item" onclick="setGridLayout('single')">
+                <i data-feather="maximize-2"></i> Single View
+            </div>
+        </div>
+
+        <!-- Audit Log -->
+        <div class="audit-section">
+            <div class="nav-label" style="margin-bottom: 8px;">Operator Log</div>
+            <div class="audit-log-container" id="audit-log-container">
+                <div class="audit-entry">
+                    <div class="audit-time">--:--:--</div>
+                    SYSTEM STANDBY
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="main-content">
+        <!-- Multi-Camera Grid -->
+        <div class="camera-grid" id="camera-grid">
+            <!-- Feed 0 — Primary -->
+            <div class="feed-cell expanded" id="feed-0" onclick="expandFeed(0)">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot"></div>
+                        <span>FEED 01 // PRIMARY</span>
+                    </div>
+                    <div class="feed-status" id="feed-0-status">ACTIVE</div>
+                </div>
+                <img class="feed-stream" id="stream-0" src="/video_feed/0" alt="Feed 0">
+                <button class="expand-btn" onclick="event.stopPropagation(); expandFeed(0)" title="Expand">
+                    <i data-feather="maximize-2"></i>
+                </button>
+            </div>
+
+            <!-- Feed 1 -->
+            <div class="feed-cell" id="feed-1">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 02</span>
+                    </div>
+                    <div class="feed-status" id="feed-1-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-1">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 2 -->
+            <div class="feed-cell" id="feed-2">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 03</span>
+                    </div>
+                    <div class="feed-status" id="feed-2-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-2">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 3 -->
+            <div class="feed-cell" id="feed-3">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 04</span>
+                    </div>
+                    <div class="feed-status" id="feed-3-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-3">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+        </div>
+
+        <!-- Intel Panel -->
+        <div class="intel-panel">
+            <!-- Active Mode -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Active Mode</div>
+                </div>
+                <div class="mode-indicator">
+                    <div class="mode-dot"></div>
+                    <div class="mode-name" id="mode-title">1 MODULE ACTIVE</div>
+                </div>
+            </div>
+
+            <!-- Threat Assessment -->
+            <div class="card" id="threat-card">
+                <div class="card-header">
+                    <div class="card-title">Threat Assessment</div>
+                    <i data-feather="alert-triangle" class="card-icon"></i>
+                </div>
+                <div class="threat-gauge">
+                    <div class="score-ring">
+                        <svg viewBox="0 0 130 130">
+                            <circle class="score-ring-bg" cx="65" cy="65" r="60"></circle>
+                            <circle class="score-ring-fill" id="score-ring-fill" cx="65" cy="65" r="60"></circle>
+                        </svg>
+                        <div class="score-text">
+                            <div class="score-value" id="threat-score">0</div>
+                            <div class="score-label">THREAT LEVEL</div>
+                        </div>
+                    </div>
+                    <div class="status-text" id="status-text">SECURE</div>
+                </div>
+            </div>
+
+            <!-- Live Metrics -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Live Metrics</div>
+                    <i data-feather="bar-chart-2" class="card-icon"></i>
+                </div>
+                <div class="stats-list" id="stats-container">
+                    <div class="stat-row">
+                        <span class="stat-name">System Status</span>
+                        <span class="stat-val">Initializing</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Actions</div>
+                </div>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Incident Report</button>
+                <button class="btn btn-secondary" onclick="refreshAuditLog()" style="margin-top: 8px;">Refresh Audit
+                    Log</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Report Modal -->
+    <div id="report-modal" class="modal-overlay">
+        <div class="modal-card">
+            <div class="modal-title">Incident Report</div>
+            <div class="modal-subtitle">Generated by Sentinel AI Agent // Gemini 1.5</div>
+            <div class="report-content" id="report-content">Analyzing data stream...</div>
+            <button class="btn btn-secondary" onclick="closeModal()">Dismiss</button>
+        </div>
+    </div>
+
+    <!-- ═══════════════════════════════════════════════
+         JAVASCRIPT
+    ═══════════════════════════════════════════════ -->
+    <script>
+        feather.replace();
+
+        // ─── State ───
+        let currentLayout = 'quad'; // 'quad' or 'single'
+        let expandedFeed = 0;
+        let isRedAlert = false;
+
+        // ─── Mode Switching ───
+        const modeTitles = {
+            'standby': 'SYSTEM STANDBY',
+            'movement': 'MOVEMENT ANALYSIS',
+            'facemask': 'FACEMASK DETECTION',
+            'weapon': 'WEAPON DETECTION',
+            'public_safety': 'PUBLIC SAFETY'
+        };
+
+        function setMode(mode, element) {
+            // Radio-style selection: always activate the clicked mode
+            // Remove active from all module buttons
+            document.querySelectorAll('.nav-group:first-of-type .nav-item').forEach(el => el.classList.remove('active'));
+
+            // Add active to the clicked button
+            element.classList.add('active');
+
+            // Update UI display
+            document.getElementById('mode-title').textContent = modeTitles[mode] || mode.toUpperCase();
+
+            // Send to backend
+            fetch('/set_mode', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ mode: mode })
+            });
+        }
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: source })
+            })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        // Force the browser to reconnect to the restarted MJPEG stream
+                        refreshFeedStream(0);
+                    }
+                });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+
+                // Show uploading state
+                const statusEl = document.getElementById('feed-0-status');
+                if (statusEl) statusEl.textContent = 'UPLOADING...';
+
+                fetch('/upload_video', { method: 'POST', body: formData })
+                    .then(r => r.json())
+                    .then(data => {
+                        if (data.success) {
+                            // Force the browser to reconnect to the restarted MJPEG stream
+                            refreshFeedStream(0);
+                            if (statusEl) statusEl.textContent = 'FILE FEED';
+                        }
+                    })
+                    .catch(() => {
+                        if (statusEl) statusEl.textContent = 'UPLOAD FAILED';
+                    });
+
+                // Reset file input so the same file can be re-uploaded
+                input.value = '';
+            }
+        }
+
+        /**
+         * Force-refresh an MJPEG stream by setting a new src with a cache-buster.
+         * This drops the old HTTP connection and establishes a fresh one.
+         */
+        function refreshFeedStream(feedId) {
+            const img = document.getElementById('stream-' + feedId);
+            if (img) {
+                // Brief blank to visually signal the switch
+                img.src = '';
+                // Small delay lets the backend fully initialize the new feed
+                setTimeout(() => {
+                    img.src = '/video_feed/' + feedId + '?t=' + Date.now();
+                }, 300);
+            }
+        }
+
+        // ─── Grid Layout ───
+        function setGridLayout(layout) {
+            const grid = document.getElementById('camera-grid');
+            currentLayout = layout;
+
+            if (layout === 'single') {
+                grid.classList.add('single-view');
+                // Show only the expanded feed
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === expandedFeed);
+                });
+            } else {
+                grid.classList.remove('single-view');
+                document.querySelectorAll('.feed-cell').forEach(cell => {
+                    cell.classList.remove('expanded');
+                });
+            }
+        }
+
+        function expandFeed(feedId) {
+            expandedFeed = feedId;
+            if (currentLayout === 'single') {
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === feedId);
+                });
+            }
+        }
+
+        // ─── Stats & Red Alert Updates ───
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    const statusEl = document.getElementById('status-text');
+                    const ringFill = document.getElementById('score-ring-fill');
+                    const threatCard = document.getElementById('threat-card');
+
+                    scoreEl.textContent = score;
+
+                    // Compute ring dash offset (circumference = 2 * π * 60 ≈ 377)
+                    const circumference = 377;
+                    const offset = circumference - (circumference * score / 100);
+                    ringFill.style.strokeDashoffset = offset;
+
+                    // Color based on score
+                    let color, status, glow;
+                    if (score >= 80) {
+                        color = '#ff2040';
+                        status = 'CRITICAL';
+                        glow = 'rgba(255, 32, 64, 0.4)';
+                    } else if (score >= 50) {
+                        color = '#ffaa00';
+                        status = 'ELEVATED';
+                        glow = 'rgba(255, 170, 0, 0.3)';
+                    } else if (score >= 25) {
+                        color = '#00d4ff';
+                        status = 'GUARDED';
+                        glow = 'rgba(0, 200, 255, 0.3)';
+                    } else {
+                        color = '#00ff88';
+                        status = 'SECURE';
+                        glow = 'rgba(0, 255, 136, 0.3)';
+                    }
+
+                    statusEl.textContent = status;
+                    statusEl.style.color = color;
+                    statusEl.style.textShadow = `0 0 20px ${glow}`;
+                    ringFill.style.stroke = color;
+                    ringFill.style.filter = `drop-shadow(0 0 8px ${glow})`;
+
+                    // Red Alert state
+                    const alertOverlay = document.getElementById('red-alert-overlay');
+                    const alertBanner = document.getElementById('red-alert-banner');
+                    const feedCells = document.querySelectorAll('.feed-cell');
+
+                    if (data.red_alert) {
+                        alertOverlay.classList.add('active');
+                        alertBanner.classList.add('active');
+                        feedCells.forEach(cell => cell.classList.add('red-alert-active'));
+                        threatCard.style.borderColor = 'rgba(255, 32, 64, 0.5)';
+
+                        if (!isRedAlert) {
+                            playAlertTone();
+                            isRedAlert = true;
+                        }
+                    } else {
+                        alertOverlay.classList.remove('active');
+                        alertBanner.classList.remove('active');
+                        feedCells.forEach(cell => cell.classList.remove('red-alert-active'));
+                        threatCard.style.borderColor = '';
+                        isRedAlert = false;
+                    }
+
+                    // Update mode display
+                    if (data.active_modules) {
+                        updateActiveModulesDisplay(data.active_modules);
+                    }
+
+                    // Update live metrics
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    if (!data.details || Object.keys(data.details).length === 0) {
+                        container.innerHTML = '<div class="stat-row"><span class="stat-name">System Status</span><span class="stat-val">Standby</span></div>';
+                    } else {
+                        for (const [key, value] of Object.entries(data.details)) {
+                            const div = document.createElement('div');
+                            div.className = 'stat-row';
+                            const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            let displayVal = value;
+                            if (typeof value === 'boolean') {
+                                displayVal = value ? '⚠ YES' : 'No';
+                            }
+                            div.innerHTML = `<span class="stat-name">${formattedKey}</span><span class="stat-val">${displayVal}</span>`;
+                            container.appendChild(div);
+                        }
+                    }
+                })
+                .catch(() => { });
+        }
+
+        // ─── Alert Tone (Web Audio API) ───
+        function playAlertTone() {
+            try {
+                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                const oscillator = audioCtx.createOscillator();
+                const gainNode = audioCtx.createGain();
+
+                oscillator.connect(gainNode);
+                gainNode.connect(audioCtx.destination);
+
+                oscillator.type = 'square';
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime);
+                oscillator.frequency.setValueAtTime(660, audioCtx.currentTime + 0.15);
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime + 0.3);
+
+                gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);
+
+                oscillator.start(audioCtx.currentTime);
+                oscillator.stop(audioCtx.currentTime + 0.5);
+            } catch (e) {
+                // Audio not available — silent fallback
+            }
+        }
+
+        // ─── AI Report ───
+        function generateReport() {
+            const modal = document.getElementById('report-modal');
+            modal.classList.add('show');
+            document.getElementById('report-content').textContent = 'ANALYZING DATA STREAM...';
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                })
+                .catch(() => {
+                    document.getElementById('report-content').textContent = 'ERROR: Connection to AI Agent lost.';
+                });
+        }
+
+        function closeModal() {
+            document.getElementById('report-modal').classList.remove('show');
+        }
+
+        // ─── Audit Log Refresh ───
+        function refreshAuditLog() {
+            fetch('/audit_log')
+                .then(r => r.json())
+                .then(data => {
+                    const container = document.getElementById('audit-log-container');
+                    container.innerHTML = '';
+
+                    if (data.log.length === 0) {
+                        container.innerHTML = '<div class="audit-entry"><div class="audit-time">--:--:--</div>NO ENTRIES</div>';
+                        return;
+                    }
+
+                    data.log.slice(0, 30).forEach(entry => {
+                        const div = document.createElement('div');
+                        div.className = `audit-entry severity-${entry.severity}`;
+                        div.innerHTML = `
+                            <div class="audit-time">${entry.timestamp.split(' ')[1] || entry.timestamp}</div>
+                            ${entry.action}: ${entry.details}
+                        `;
+                        container.appendChild(div);
+                    });
+                })
+                .catch(() => { });
+        }
+
+        // ─── Intervals ───
+        setInterval(updateStats, 1000);
+        setInterval(refreshAuditLog, 5000);
+
+        // Initial load
+        setTimeout(refreshAuditLog, 1500);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard_v12.html

@@ -0,0 +1,1454 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SENTINEL V11 — Intelligence Grid</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap"
+        rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        /* ═══════════════════════════════════════════════
+           CSS VARIABLES — SCI-FI PALETTE
+        ═══════════════════════════════════════════════ */
+        :root {
+            --bg-deep: #05080f;
+            --bg-panel: rgba(8, 16, 32, 0.85);
+            --bg-card: rgba(10, 20, 40, 0.7);
+            --border-glow: rgba(0, 200, 255, 0.15);
+            --border-glow-hover: rgba(0, 200, 255, 0.4);
+            --cyan: #00d4ff;
+            --cyan-dim: #0090aa;
+            --neon-green: #00ff88;
+            --neon-red: #ff2040;
+            --neon-amber: #ffaa00;
+            --text-primary: #e0f0ff;
+            --text-secondary: #5a8aaa;
+            --text-dim: #2a4a5a;
+            --scanline-opacity: 0.03;
+            --font-display: 'Orbitron', sans-serif;
+            --font-body: 'Rajdhani', sans-serif;
+            --font-mono: 'Share Tech Mono', monospace;
+        }
+
+        /* ═══════════════════════════════════════════════
+           BASE RESET & BODY
+        ═══════════════════════════════════════════════ */
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-body);
+            background: var(--bg-deep);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* Scanline overlay on body */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: repeating-linear-gradient(0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 4px);
+            pointer-events: none;
+            z-index: 9999;
+        }
+
+        /* ═══════════════════════════════════════════════
+           RED ALERT OVERLAY
+        ═══════════════════════════════════════════════ */
+        .red-alert-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            z-index: 9998;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .red-alert-overlay.active {
+            opacity: 1;
+            animation: red-pulse-border 1s ease-in-out infinite;
+        }
+
+        .red-alert-overlay.active::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 4px solid var(--neon-red);
+            box-shadow: inset 0 0 80px rgba(255, 32, 64, 0.15),
+                0 0 40px rgba(255, 32, 64, 0.3);
+        }
+
+        .red-alert-banner {
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 20, 40, 0.9);
+            color: #fff;
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 4px;
+            padding: 8px 40px;
+            z-index: 10000;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            box-shadow: 0 4px 30px rgba(255, 20, 40, 0.5);
+            display: none;
+            animation: alert-flash 0.8s ease-in-out infinite;
+        }
+
+        .red-alert-banner.active {
+            display: block;
+        }
+
+        @keyframes red-pulse-border {
+
+            0%,
+            100% {
+                opacity: 0.6;
+            }
+
+            50% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes alert-flash {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.6;
+            }
+        }
+
+        /* ═══════════════════════════════════════════════
+           SIDEBAR
+        ═══════════════════════════════════════════════ */
+        .sidebar {
+            width: 260px;
+            min-width: 260px;
+            background: var(--bg-panel);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-right: 1px solid var(--border-glow);
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            z-index: 100;
+            overflow-y: auto;
+        }
+
+        .logo {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--cyan);
+            letter-spacing: 2px;
+        }
+
+        .logo svg {
+            filter: drop-shadow(0 0 6px var(--cyan));
+        }
+
+        .version-tag {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            color: var(--text-dim);
+            margin-bottom: 24px;
+            letter-spacing: 1px;
+        }
+
+        .nav-group {
+            margin-bottom: 20px;
+        }
+
+        .nav-label {
+            font-family: var(--font-display);
+            font-size: 0.6rem;
+            font-weight: 600;
+            color: var(--text-dim);
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .nav-item {
+            padding: 10px 12px;
+            margin-bottom: 3px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.25s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            border: 1px solid transparent;
+        }
+
+        .nav-item:hover {
+            background: rgba(0, 200, 255, 0.05);
+            color: var(--text-primary);
+            border-color: var(--border-glow);
+        }
+
+        .nav-item.active {
+            background: rgba(0, 200, 255, 0.1);
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+            box-shadow: 0 0 15px rgba(0, 200, 255, 0.05);
+        }
+
+        .nav-item svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Audit Log Panel in sidebar */
+        .audit-section {
+            margin-top: auto;
+            flex-shrink: 0;
+        }
+
+        .audit-log-container {
+            max-height: 200px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .audit-log-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .audit-entry {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            padding: 6px 8px;
+            margin-bottom: 2px;
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.3);
+            border-left: 2px solid var(--cyan-dim);
+            line-height: 1.4;
+            color: var(--text-secondary);
+        }
+
+        .audit-entry.severity-WARNING {
+            border-left-color: var(--neon-amber);
+        }
+
+        .audit-entry.severity-CRITICAL {
+            border-left-color: var(--neon-red);
+            color: var(--neon-red);
+        }
+
+        .audit-time {
+            color: var(--text-dim);
+            font-size: 0.6rem;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MAIN CONTENT AREA
+        ═══════════════════════════════════════════════ */
+        .main-content {
+            flex: 1;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: 1fr 320px;
+            gap: 16px;
+            overflow: hidden;
+            background: radial-gradient(ellipse at 20% 0%, rgba(0, 60, 100, 0.15) 0%, transparent 60%),
+                radial-gradient(ellipse at 80% 100%, rgba(0, 40, 80, 0.1) 0%, transparent 60%),
+                var(--bg-deep);
+        }
+
+        /* ══════════════════════════════════════════��════
+           MULTI-CAMERA GRID
+        ═══════════════════════════════════════════════ */
+        .camera-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 8px;
+            height: 100%;
+        }
+
+        .camera-grid.single-view {
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr;
+        }
+
+        .camera-grid.single-view .feed-cell:not(.expanded) {
+            display: none;
+        }
+
+        .feed-cell {
+            background: var(--bg-card);
+            border-radius: 10px;
+            border: 1px solid var(--border-glow);
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .feed-cell:hover {
+            border-color: var(--border-glow-hover);
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.1);
+        }
+
+        .feed-cell.red-alert-active {
+            border-color: var(--neon-red) !important;
+            box-shadow: 0 0 30px rgba(255, 32, 64, 0.3) !important;
+            animation: cell-red-pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes cell-red-pulse {
+
+            0%,
+            100% {
+                box-shadow: 0 0 20px rgba(255, 32, 64, 0.2);
+            }
+
+            50% {
+                box-shadow: 0 0 40px rgba(255, 32, 64, 0.5);
+            }
+        }
+
+        .feed-header {
+            position: absolute;
+            top: 8px;
+            left: 10px;
+            right: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 5;
+            pointer-events: none;
+        }
+
+        .feed-badge {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            font-weight: 400;
+            border: 1px solid var(--border-glow);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--cyan);
+            letter-spacing: 1px;
+        }
+
+        .live-dot {
+            width: 6px;
+            height: 6px;
+            background: var(--neon-red);
+            border-radius: 50%;
+            box-shadow: 0 0 8px var(--neon-red);
+            animation: pulse-dot 2s infinite;
+        }
+
+        @keyframes pulse-dot {
+
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.4;
+                transform: scale(1.3);
+            }
+        }
+
+        .feed-status {
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
+            color: var(--neon-green);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 3px 8px;
+            border-radius: 4px;
+        }
+
+        .feed-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000;
+            display: block;
+        }
+
+        .feed-offline {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--text-dim);
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            letter-spacing: 1px;
+            gap: 8px;
+        }
+
+        .feed-offline svg {
+            width: 24px;
+            height: 24px;
+            color: var(--text-dim);
+        }
+
+        /* Fullscreen expand button */
+        .expand-btn {
+            position: absolute;
+            bottom: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid var(--border-glow);
+            color: var(--cyan);
+            width: 28px;
+            height: 28px;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            z-index: 5;
+            pointer-events: all;
+        }
+
+        .expand-btn:hover {
+            background: rgba(0, 200, 255, 0.15);
+            border-color: var(--cyan);
+        }
+
+        .expand-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        /* ═══════════════════════════════════════════════
+           INTEL PANEL (Right Column)
+        ═══════════════════════════════════════════════ */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .intel-panel::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .intel-panel::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .card {
+            background: var(--bg-card);
+            backdrop-filter: blur(15px);
+            border-radius: 10px;
+            padding: 18px;
+            border: 1px solid var(--border-glow);
+            transition: border-color 0.3s;
+        }
+
+        .card:hover {
+            border-color: var(--border-glow-hover);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 14px;
+        }
+
+        .card-title {
+            font-family: var(--font-display);
+            font-size: 0.65rem;
+            font-weight: 600;
+            color: var(--cyan);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .card-icon {
+            color: var(--text-dim);
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Threat gauge */
+        .threat-gauge {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+        .score-ring {
+            position: relative;
+            width: 130px;
+            height: 130px;
+            margin-bottom: 12px;
+        }
+
+        .score-ring svg {
+            width: 130px;
+            height: 130px;
+            transform: rotate(-90deg);
+        }
+
+        .score-ring-bg {
+            fill: none;
+            stroke: rgba(255, 255, 255, 0.05);
+            stroke-width: 6;
+        }
+
+        .score-ring-fill {
+            fill: none;
+            stroke: var(--neon-green);
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-dasharray: 377;
+            stroke-dashoffset: 377;
+            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+                stroke 0.5s ease;
+            filter: drop-shadow(0 0 8px var(--neon-green));
+        }
+
+        .score-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+        }
+
+        .score-value {
+            font-family: var(--font-display);
+            font-size: 2.2rem;
+            font-weight: 800;
+            line-height: 1;
+            color: var(--text-primary);
+        }
+
+        .score-label {
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            color: var(--text-dim);
+            letter-spacing: 2px;
+            margin-top: 4px;
+        }
+
+        .status-text {
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            color: var(--neon-green);
+            letter-spacing: 3px;
+            text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+            transition: all 0.5s ease;
+        }
+
+        /* Stats */
+        .stats-list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            background: rgba(0, 200, 255, 0.03);
+            border-radius: 6px;
+            border: 1px solid rgba(0, 200, 255, 0.05);
+        }
+
+        .stat-name {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .stat-val {
+            font-family: var(--font-mono);
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        /* Mode indicator */
+        .mode-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 14px;
+            background: rgba(0, 200, 255, 0.05);
+            border-radius: 6px;
+            border: 1px solid var(--border-glow);
+        }
+
+        .mode-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--cyan);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--cyan);
+        }
+
+        .mode-name {
+            font-family: var(--font-display);
+            font-size: 0.7rem;
+            font-weight: 600;
+            letter-spacing: 2px;
+            color: var(--cyan);
+        }
+
+        /* Buttons */
+        .btn {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid var(--border-glow);
+            border-radius: 6px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.25s;
+            font-family: var(--font-display);
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(0, 100, 200, 0.1));
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+        }
+
+        .btn-primary:hover {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.3), rgba(0, 100, 200, 0.2));
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
+            transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.03);
+            color: var(--text-secondary);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.08);
+            color: var(--text-primary);
+        }
+
+        /* ═══════════════════════════════════════════════
+           MODAL
+        ═══════════════════════════════════════════════ */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 11000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-card {
+            background: var(--bg-panel);
+            width: 520px;
+            max-width: 90vw;
+            border-radius: 12px;
+            padding: 28px;
+            border: 1px solid var(--border-glow);
+            box-shadow: 0 0 60px rgba(0, 200, 255, 0.1);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .modal-overlay.show .modal-card {
+            transform: scale(1);
+        }
+
+        .modal-title {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--cyan);
+            letter-spacing: 2px;
+            margin-bottom: 6px;
+        }
+
+        .modal-subtitle {
+            font-family: var(--font-mono);
+            font-size: 0.7rem;
+            color: var(--text-dim);
+            margin-bottom: 16px;
+        }
+
+        .report-content {
+            background: rgba(0, 0, 0, 0.5);
+            padding: 16px;
+            border-radius: 8px;
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            color: var(--neon-green);
+            margin-bottom: 16px;
+            line-height: 1.6;
+            border: 1px solid var(--border-glow);
+            max-height: 300px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MOBILE RESPONSIVE
+        ═══════════════════════════════════════════════ */
+        @media (max-width: 1024px) {
+            .main-content {
+                grid-template-columns: 1fr 280px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            body {
+                flex-direction: column;
+                overflow-y: auto;
+            }
+
+            .sidebar {
+                width: 100%;
+                min-width: 100%;
+                flex-direction: row;
+                flex-wrap: wrap;
+                padding: 10px 16px;
+                gap: 6px;
+                order: 2;
+                border-right: none;
+                border-top: 1px solid var(--border-glow);
+                overflow-y: visible;
+            }
+
+            .logo {
+                width: 100%;
+                margin-bottom: 6px;
+                font-size: 0.85rem;
+            }
+
+            .version-tag {
+                display: none;
+            }
+
+            .nav-group {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 4px;
+                margin-bottom: 0;
+            }
+
+            .nav-label {
+                width: 100%;
+                margin-bottom: 4px;
+            }
+
+            .nav-item {
+                flex: none;
+                padding: 8px 10px;
+                font-size: 0.75rem;
+            }
+
+            .audit-section {
+                display: none;
+            }
+
+            .main-content {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+                order: 1;
+                overflow-y: auto;
+                padding: 10px;
+            }
+
+            .camera-grid {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                min-height: 250px;
+            }
+
+            .feed-cell:not(:first-child) {
+                display: none;
+            }
+
+            .intel-panel {
+                overflow-y: visible;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .sidebar .nav-item {
+                font-size: 0.7rem;
+                padding: 6px 8px;
+                gap: 6px;
+            }
+
+            .sidebar .nav-item svg {
+                width: 14px;
+                height: 14px;
+            }
+
+            .score-ring {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-ring svg {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-value {
+                font-size: 1.6rem;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Red Alert Overlay -->
+    <div class="red-alert-overlay" id="red-alert-overlay"></div>
+    <div class="red-alert-banner" id="red-alert-banner">
+        ⚠ RED ALERT — CRITICAL THREAT DETECTED ⚠
+        <button class="btn btn-secondary" onclick="resetSystem()"
+            style="width: auto; margin-top: 10px; background: rgba(0,0,0,0.5); border: 1px solid #ff2040; color: #ff2040;">RESET
+            SYSTEM</button>
+    </div>
+
+    <!-- SIDEBAR -->
+    <div class="sidebar">
+        <div class="logo">
+            <i data-feather="shield"></i>
+            SENTINEL
+        </div>
+        <div class="version-tag">V12.0 // RE-ID INTELLIGENCE</div>
+
+        <div class="nav-group">
+            <div class="nav-label">Detection Modules</div>
+            <div class="nav-item active" onclick="toggleModule('movement', this)" id="nav-movement">
+                <i data-feather="activity"></i> Movement
+            </div>
+            <div class="nav-item" onclick="toggleModule('facemask', this)" id="nav-facemask">
+                <i data-feather="eye"></i> Facemask
+            </div>
+            <div class="nav-item" onclick="toggleModule('weapon', this)" id="nav-weapon">
+                <i data-feather="crosshair"></i> Weapon
+            </div>
+            <div class="nav-item" onclick="toggleModule('public_safety', this)" id="nav-public_safety">
+                <i data-feather="users"></i> Public Safety
+            </div>
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Input Source</div>
+            <div class="nav-item" onclick="setSource('camera')">
+                <i data-feather="video"></i> Live Camera
+            </div>
+            <div class="nav-item" onclick="document.getElementById('upload-input').click()">
+                <i data-feather="upload-cloud"></i> Upload Video
+            </div>
+            <input type="file" id="upload-input" style="display: none" accept="video/*"
+                onchange="handleFileUpload(this)">
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Grid Layout</div>
+            <div class="nav-item" onclick="setGridLayout('quad')">
+                <i data-feather="grid"></i> 2×2 Grid
+            </div>
+            <div class="nav-item" onclick="setGridLayout('single')">
+                <i data-feather="maximize-2"></i> Single View
+            </div>
+        </div>
+
+        <!-- Audit Log -->
+        <div class="audit-section">
+            <div class="nav-label" style="margin-bottom: 8px;">Operator Log</div>
+            <div class="audit-log-container" id="audit-log-container">
+                <div class="audit-entry">
+                    <div class="audit-time">--:--:--</div>
+                    SYSTEM STANDBY
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="main-content">
+        <!-- Multi-Camera Grid -->
+        <div class="camera-grid" id="camera-grid">
+            <!-- Feed 0 — Primary -->
+            <div class="feed-cell expanded" id="feed-0" onclick="expandFeed(0)">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot"></div>
+                        <span>FEED 01 // PRIMARY</span>
+                    </div>
+                    <div class="feed-status" id="feed-0-status">ACTIVE</div>
+                </div>
+                <img class="feed-stream" id="stream-0" src="/video_feed/0" alt="Feed 0">
+                <button class="expand-btn" onclick="event.stopPropagation(); expandFeed(0)" title="Expand">
+                    <i data-feather="maximize-2"></i>
+                </button>
+            </div>
+
+            <!-- Feed 1 -->
+            <div class="feed-cell" id="feed-1">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 02</span>
+                    </div>
+                    <div class="feed-status" id="feed-1-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-1">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 2 -->
+            <div class="feed-cell" id="feed-2">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 03</span>
+                    </div>
+                    <div class="feed-status" id="feed-2-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-2">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 3 -->
+            <div class="feed-cell" id="feed-3">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 04</span>
+                    </div>
+                    <div class="feed-status" id="feed-3-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-3">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+        </div>
+
+        <!-- Intel Panel -->
+        <div class="intel-panel">
+            + <!-- Suspect Journey -->
+            + <div class="card" id="journey-card">
+                + <div class="card-header">
+                    + <div class="card-title">Suspect Journey</div>
+                    + <i data-feather="map" class="card-icon"></i>
+                    + </div>
+                + <div class="audit-log-container" id="journey-container" style="max-height: 250px;">
+                    + <div class="audit-entry">
+                        + <div class="audit-time">--:--:--</div>
+                        + SCANNING FOR SUBJECTS...
+                        + </div>
+                    + </div>
+                + </div>
+            +
+            <!-- Active Mode -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Active Mode</div>
+                </div>
+                <div class="mode-indicator">
+                    <div class="mode-dot"></div>
+                    <div class="mode-name" id="mode-title">1 MODULE ACTIVE</div>
+                </div>
+            </div>
+
+            <!-- Threat Assessment -->
+            <div class="card" id="threat-card">
+                <div class="card-header">
+                    <div class="card-title">Threat Assessment</div>
+                    <i data-feather="alert-triangle" class="card-icon"></i>
+                </div>
+                <div class="threat-gauge">
+                    <div class="score-ring">
+                        <svg viewBox="0 0 130 130">
+                            <circle class="score-ring-bg" cx="65" cy="65" r="60"></circle>
+                            <circle class="score-ring-fill" id="score-ring-fill" cx="65" cy="65" r="60"></circle>
+                        </svg>
+                        <div class="score-text">
+                            <div class="score-value" id="threat-score">0</div>
+                            <div class="score-label">THREAT LEVEL</div>
+                        </div>
+                    </div>
+                    <div class="status-text" id="status-text">SECURE</div>
+                </div>
+            </div>
+
+            <!-- Live Metrics -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Live Metrics</div>
+                    <i data-feather="bar-chart-2" class="card-icon"></i>
+                </div>
+                <div class="stats-list" id="stats-container">
+                    <div class="stat-row">
+                        <span class="stat-name">System Status</span>
+                        <span class="stat-val">Initializing</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Actions</div>
+                </div>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Incident Report</button>
+                <button class="btn btn-secondary" onclick="refreshAuditLog()" style="margin-top: 8px;">Refresh Audit
+                    Log</button>
+                <button class="btn btn-secondary" onclick="resetSystem()"
+                    style="margin-top: 8px; border-color: #ff2040; color: #ff2040;">⚠ SYSTEM RESET</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Report Modal -->
+    <div id="report-modal" class="modal-overlay">
+        <div class="modal-card">
+            <div class="modal-title">Incident Report</div>
+            <div class="modal-subtitle">Generated by Sentinel AI Agent // Gemini 1.5</div>
+            <div class="report-content" id="report-content">Analyzing data stream...</div>
+            <button class="btn btn-secondary" onclick="closeModal()">Dismiss</button>
+        </div>
+    </div>
+
+    <!-- ═══════════════════════════════════════════════
+         JAVASCRIPT
+    ═══════════════════════════════════════════════ -->
+    <script>
+        feather.replace();
+
+        // ─── State ───
+        let currentLayout = 'quad'; // 'quad' or 'single'
+        let expandedFeed = 0;
+        let isRedAlert = false;
+
+        // ─── Module Toggling ───
+        const modeTitles = {
+            'movement': 'MOVEMENT ANALYSIS',
+            'facemask': 'FACEMASK DETECTION',
+            'weapon': 'WEAPON DETECTION',
+            'public_safety': 'PUBLIC SAFETY'
+        };
+
+        function toggleModule(module, buttonElement) {
+            buttonElement.classList.toggle('active');
+
+            fetch('/toggle_module', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ module: module })
+            })
+                .then(r => r.json())
+                .then(data => {
+                    updateActiveModulesDisplay(data.active_modules);
+                });
+        }
+
+        function updateActiveModulesDisplay(activeModules) {
+            const modeTitle = document.getElementById('mode-title');
+            const count = activeModules.length;
+
+            if (count === 0) {
+                modeTitle.textContent = 'NO MODULES ACTIVE';
+            } else if (count === 1) {
+                modeTitle.textContent = modeTitles[activeModules[0]] || activeModules[0].toUpperCase();
+            } else {
+                modeTitle.textContent = `${count} MODULES ACTIVE`;
+            }
+        }
+
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: source })
+            })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        // Force the browser to reconnect to the restarted MJPEG stream
+                        refreshFeedStream(0);
+                    }
+                });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+
+                // Show uploading state
+                const statusEl = document.getElementById('feed-0-status');
+                if (statusEl) statusEl.textContent = 'UPLOADING...';
+
+                fetch('/upload_video', { method: 'POST', body: formData })
+                    .then(r => r.json())
+                    .then(data => {
+                        if (data.success) {
+                            // Force the browser to reconnect to the restarted MJPEG stream
+                            refreshFeedStream(0);
+                            if (statusEl) statusEl.textContent = 'FILE FEED';
+                        }
+                    })
+                    .catch(() => {
+                        if (statusEl) statusEl.textContent = 'UPLOAD FAILED';
+                    });
+
+                // Reset file input so the same file can be re-uploaded
+                input.value = '';
+            }
+        }
+
+        /**
+         * Force-refresh an MJPEG stream by setting a new src with a cache-buster.
+         * This drops the old HTTP connection and establishes a fresh one.
+         */
+        function refreshFeedStream(feedId) {
+            const img = document.getElementById('stream-' + feedId);
+            if (img) {
+                // Brief blank to visually signal the switch
+                img.src = '';
+                // Small delay lets the backend fully initialize the new feed
+                setTimeout(() => {
+                    img.src = '/video_feed/' + feedId + '?t=' + Date.now();
+                }, 300);
+            }
+        }
+
+        // ─── Grid Layout ───
+        function setGridLayout(layout) {
+            const grid = document.getElementById('camera-grid');
+            currentLayout = layout;
+
+            if (layout === 'single') {
+                grid.classList.add('single-view');
+                // Show only the expanded feed
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === expandedFeed);
+                });
+            } else {
+                grid.classList.remove('single-view');
+                document.querySelectorAll('.feed-cell').forEach(cell => {
+                    cell.classList.remove('expanded');
+                });
+            }
+        }
+
+        function expandFeed(feedId) {
+            expandedFeed = feedId;
+            if (currentLayout === 'single') {
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === feedId);
+                });
+            }
+        }
+
+        // ─── Stats & Red Alert Updates ───
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    const statusEl = document.getElementById('status-text');
+                    const ringFill = document.getElementById('score-ring-fill');
+                    const threatCard = document.getElementById('threat-card');
+
+                    scoreEl.textContent = score;
+
+                    // Compute ring dash offset (circumference = 2 * π * 60 ≈ 377)
+                    const circumference = 377;
+                    const offset = circumference - (circumference * score / 100);
+                    ringFill.style.strokeDashoffset = offset;
+
+                    // Color based on score
+                    let color, status, glow;
+                    if (score >= 80) {
+                        color = '#ff2040';
+                        status = 'CRITICAL';
+                        glow = 'rgba(255, 32, 64, 0.4)';
+                    } else if (score >= 50) {
+                        color = '#ffaa00';
+                        status = 'ELEVATED';
+                        glow = 'rgba(255, 170, 0, 0.3)';
+                    } else if (score >= 25) {
+                        color = '#00d4ff';
+                        status = 'GUARDED';
+                        glow = 'rgba(0, 200, 255, 0.3)';
+                    } else {
+                        color = '#00ff88';
+                        status = 'SECURE';
+                        glow = 'rgba(0, 255, 136, 0.3)';
+                    }
+
+                    statusEl.textContent = status;
+                    statusEl.style.color = color;
+                    statusEl.style.textShadow = `0 0 20px ${glow}`;
+                    ringFill.style.stroke = color;
+                    ringFill.style.filter = `drop-shadow(0 0 8px ${glow})`;
+
+                    updateJourneyData();
+
+                    // Red Alert state
+                    const alertOverlay = document.getElementById('red-alert-overlay');
+                    const alertBanner = document.getElementById('red-alert-banner');
+                    const feedCells = document.querySelectorAll('.feed-cell');
+
+                    if (data.red_alert) {
+                        alertOverlay.classList.add('active');
+                        alertBanner.classList.add('active');
+                        feedCells.forEach(cell => cell.classList.add('red-alert-active'));
+                        threatCard.style.borderColor = 'rgba(255, 32, 64, 0.5)';
+
+                        if (!isRedAlert) {
+                            playAlertTone();
+                            isRedAlert = true;
+                        }
+                    } else {
+                        alertOverlay.classList.remove('active');
+                        alertBanner.classList.remove('active');
+                        feedCells.forEach(cell => cell.classList.remove('red-alert-active'));
+                        threatCard.style.borderColor = '';
+                        isRedAlert = false;
+                    }
+
+                    // Update mode display
+                    if (data.active_modules) {
+                        updateActiveModulesDisplay(data.active_modules);
+                    }
+
+                    // Update live metrics
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    if (!data.details || Object.keys(data.details).length === 0) {
+                        container.innerHTML = '<div class="stat-row"><span class="stat-name">System Status</span><span class="stat-val">Standby</span></div>';
+                    } else {
+                        for (const [key, value] of Object.entries(data.details)) {
+                            const div = document.createElement('div');
+                            div.className = 'stat-row';
+                            const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            let displayVal = value;
+                            if (typeof value === 'boolean') {
+                                displayVal = value ? '⚠ YES' : 'No';
+                            }
+                            div.innerHTML = `<span class="stat-name">${formattedKey}</span><span class="stat-val">${displayVal}</span>`;
+                            container.appendChild(div);
+                        }
+                    }
+                })
+                .catch(() => { });
+        }
+
+        // ─── Alert Tone (Web Audio API) ───
+        function playAlertTone() {
+            try {
+                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                const oscillator = audioCtx.createOscillator();
+                const gainNode = audioCtx.createGain();
+
+                oscillator.connect(gainNode);
+                gainNode.connect(audioCtx.destination);
+
+                oscillator.type = 'square';
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime);
+                oscillator.frequency.setValueAtTime(660, audioCtx.currentTime + 0.15);
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime + 0.3);
+
+                gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);
+
+                oscillator.start(audioCtx.currentTime);
+                oscillator.stop(audioCtx.currentTime + 0.5);
+            } catch (e) {
+                // Audio not available — silent fallback
+            }
+        }
+
+        // ─── AI Report ───
+        function generateReport() {
+            const modal = document.getElementById('report-modal');
+            modal.classList.add('show');
+            document.getElementById('report-content').textContent = 'ANALYZING DATA STREAM...';
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                })
+                .catch(() => {
+                    document.getElementById('report-content').textContent = 'ERROR: Connection to AI Agent lost.';
+                });
+        }
+
+        function closeModal() {
+            document.getElementById('report-modal').classList.remove('show');
+        }
+
+        // ─── Audit Log Refresh ───
+        function refreshAuditLog() {
+            fetch('/audit_log')
+                .then(r => r.json())
+                .then(data => {
+                    const container = document.getElementById('audit-log-container');
+                    container.innerHTML = '';
+
+                    if (data.log.length === 0) {
+                        container.innerHTML = '<div class="audit-entry"><div class="audit-time">--:--:--</div>NO ENTRIES</div>';
+                        return;
+                    }
+
+                    data.log.slice(0, 30).forEach(entry => {
+                        const div = document.createElement('div');
+                        div.className = `audit-entry severity-${entry.severity}`;
+                        div.innerHTML = `
+                            <div class="audit-time">${entry.timestamp.split(' ')[1] || entry.timestamp}</div>
+                            ${entry.action}: ${entry.details}
+                        `;
+                        container.appendChild(div);
+                    });
+                })
+                .catch(() => { });
+        }
+
+        // ─── System Reset ───
+        function resetSystem() {
+            if (!confirm("⚠ CONFIRM SYSTEM RESET ⚠\n\nThis will clear all tracking history, threat scores, and active alerts.\nThe system will revert to default state.")) {
+                return;
+            }
+
+            fetch('/reset_system', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        // Reload page to refresh all UI states cleanly
+                        window.location.reload();
+                    }
+                });
+        }
+
+        function updateJourneyData() {
+            fetch('/journey_data')
+                .then(r => r.json())
+                .then(data => {
+                    const container = document.getElementById('journey-container');
+                    if (data.length === 0) {
+                        container.innerHTML = '<div class="audit-entry"><div class="audit-time">--:--:--</div>SCANNING...</div>';
+                        return;
+                    }
+
+                    let html = '';
+                    data.forEach(subject => {
+                        const historyHtml = subject.history.map(h => `F${h.feed}`).join(' → ');
+                        html += `
+                            <div class="audit-entry">
+                                <div class="audit-time">${subject.last_seen}</div>
+                                <span style="color:var(--cyan)">SUBJ #${subject.id}</span> [FEED ${subject.last_feed}]
+                                <div style="font-size: 0.6rem; color: var(--text-dim); margin-top:2px;">${historyHtml}</div>
+                            </div>
+                        `;
+                    });
+                    container.innerHTML = html;
+                });
+        }
+
+        // ─── Intervals ───
+        setInterval(updateStats, 1000);
+        setInterval(refreshAuditLog, 5000);
+
+        // Initial load
+        setTimeout(refreshAuditLog, 1500);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard_v13.html

@@ -0,0 +1,2154 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SENTINEL V14 — Dispatch Integration</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap"
+        rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        /* ═══════════════════════════════════════════════
+           CSS VARIABLES — SCI-FI PALETTE
+        ═══════════════════════════════════════════════ */
+        :root {
+            --bg-deep: #05080f;
+            --bg-panel: rgba(8, 16, 32, 0.85);
+            --bg-card: rgba(10, 20, 40, 0.7);
+            --border-glow: rgba(0, 200, 255, 0.15);
+            --border-glow-hover: rgba(0, 200, 255, 0.4);
+            --cyan: #00d4ff;
+            --cyan-dim: #0090aa;
+            --neon-green: #00ff88;
+            --neon-red: #ff2040;
+            --neon-amber: #ffaa00;
+            --text-primary: #e0f0ff;
+            --text-secondary: #5a8aaa;
+            --text-dim: #2a4a5a;
+            --scanline-opacity: 0.03;
+            --font-display: 'Orbitron', sans-serif;
+            --font-body: 'Rajdhani', sans-serif;
+            --font-mono: 'Share Tech Mono', monospace;
+        }
+
+        /* ═══════════════════════════════════════════════
+           BASE RESET & BODY
+        ═══════════════════════════════════════════════ */
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-body);
+            background: var(--bg-deep);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* Scanline overlay on body */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: repeating-linear-gradient(0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 4px);
+            pointer-events: none;
+            z-index: 9999;
+        }
+
+        /* ═══════════════════════════════════════════════
+           RED ALERT OVERLAY
+        ═══════════════════════════════════════════════ */
+        .red-alert-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            z-index: 9998;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .red-alert-overlay.active {
+            opacity: 1;
+            animation: red-pulse-border 1s ease-in-out infinite;
+        }
+
+        .red-alert-overlay.active::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 4px solid var(--neon-red);
+            box-shadow: inset 0 0 80px rgba(255, 32, 64, 0.15),
+                0 0 40px rgba(255, 32, 64, 0.3);
+        }
+
+        .red-alert-banner {
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 20, 40, 0.9);
+            color: #fff;
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 4px;
+            padding: 8px 40px;
+            z-index: 10000;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            box-shadow: 0 4px 30px rgba(255, 20, 40, 0.5);
+            display: none;
+            animation: alert-flash 0.8s ease-in-out infinite;
+        }
+
+        .red-alert-banner.active {
+            display: block;
+        }
+
+        @keyframes red-pulse-border {
+
+            0%,
+            100% {
+                opacity: 0.6;
+            }
+
+            50% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes alert-flash {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.6;
+            }
+        }
+
+        /* ═══════════════════════════════════════════════
+           SIDEBAR
+        ═══════════════════════════════════════════════ */
+        .sidebar {
+            width: 260px;
+            min-width: 260px;
+            background: var(--bg-panel);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-right: 1px solid var(--border-glow);
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            z-index: 100;
+            overflow-y: auto;
+        }
+
+        .logo {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--cyan);
+            letter-spacing: 2px;
+        }
+
+        .logo svg {
+            filter: drop-shadow(0 0 6px var(--cyan));
+        }
+
+        .version-tag {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            color: var(--text-dim);
+            margin-bottom: 24px;
+            letter-spacing: 1px;
+        }
+
+        .nav-group {
+            margin-bottom: 20px;
+        }
+
+        .nav-label {
+            font-family: var(--font-display);
+            font-size: 0.6rem;
+            font-weight: 600;
+            color: var(--text-dim);
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .nav-item {
+            padding: 10px 12px;
+            margin-bottom: 3px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.25s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            border: 1px solid transparent;
+        }
+
+        .nav-item:hover {
+            background: rgba(0, 200, 255, 0.05);
+            color: var(--text-primary);
+            border-color: var(--border-glow);
+        }
+
+        .nav-item.active {
+            background: rgba(0, 200, 255, 0.1);
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+            box-shadow: 0 0 15px rgba(0, 200, 255, 0.05);
+        }
+
+        .nav-item svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Audit Log Panel in sidebar */
+        .audit-section {
+            margin-top: auto;
+            flex-shrink: 0;
+        }
+
+        .audit-log-container {
+            max-height: 200px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .audit-log-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .audit-entry {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            padding: 6px 8px;
+            margin-bottom: 2px;
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.3);
+            border-left: 2px solid var(--cyan-dim);
+            line-height: 1.4;
+            color: var(--text-secondary);
+        }
+
+        .audit-entry.severity-WARNING {
+            border-left-color: var(--neon-amber);
+        }
+
+        .audit-entry.severity-CRITICAL {
+            border-left-color: var(--neon-red);
+            color: var(--neon-red);
+        }
+
+        .audit-time {
+            color: var(--text-dim);
+            font-size: 0.6rem;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MAIN CONTENT AREA
+        ═══════════════════════════════════════════════ */
+        .main-content {
+            flex: 1;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: 1fr 320px;
+            gap: 16px;
+            overflow: hidden;
+            background: radial-gradient(ellipse at 20% 0%, rgba(0, 60, 100, 0.15) 0%, transparent 60%),
+                radial-gradient(ellipse at 80% 100%, rgba(0, 40, 80, 0.1) 0%, transparent 60%),
+                var(--bg-deep);
+        }
+
+        /* ═════════════════════════════════════════��═════
+           MULTI-CAMERA GRID
+        ═══════════════════════════════════════════════ */
+        .camera-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 8px;
+            height: 100%;
+        }
+
+        .camera-grid.single-view {
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr;
+        }
+
+        .camera-grid.single-view .feed-cell:not(.expanded) {
+            display: none;
+        }
+
+        .feed-cell {
+            background: var(--bg-card);
+            border-radius: 10px;
+            border: 1px solid var(--border-glow);
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .feed-cell:hover {
+            border-color: var(--border-glow-hover);
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.1);
+        }
+
+        .feed-cell.red-alert-active {
+            border-color: var(--neon-red) !important;
+            box-shadow: 0 0 30px rgba(255, 32, 64, 0.3) !important;
+            animation: cell-red-pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes cell-red-pulse {
+
+            0%,
+            100% {
+                box-shadow: 0 0 20px rgba(255, 32, 64, 0.2);
+            }
+
+            50% {
+                box-shadow: 0 0 40px rgba(255, 32, 64, 0.5);
+            }
+        }
+
+        .feed-header {
+            position: absolute;
+            top: 8px;
+            left: 10px;
+            right: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 5;
+            pointer-events: none;
+        }
+
+        .feed-badge {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            font-weight: 400;
+            border: 1px solid var(--border-glow);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--cyan);
+            letter-spacing: 1px;
+        }
+
+        .live-dot {
+            width: 6px;
+            height: 6px;
+            background: var(--neon-red);
+            border-radius: 50%;
+            box-shadow: 0 0 8px var(--neon-red);
+            animation: pulse-dot 2s infinite;
+        }
+
+        @keyframes pulse-dot {
+
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.4;
+                transform: scale(1.3);
+            }
+        }
+
+        .feed-status {
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
+            color: var(--neon-green);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 3px 8px;
+            border-radius: 4px;
+        }
+
+        .feed-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000;
+            display: block;
+        }
+
+        .feed-offline {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--text-dim);
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            letter-spacing: 1px;
+            gap: 8px;
+        }
+
+        .feed-offline svg {
+            width: 24px;
+            height: 24px;
+            color: var(--text-dim);
+        }
+
+        /* Fullscreen expand button */
+        .expand-btn {
+            position: absolute;
+            bottom: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid var(--border-glow);
+            color: var(--cyan);
+            width: 28px;
+            height: 28px;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            z-index: 5;
+            pointer-events: all;
+        }
+
+        .expand-btn:hover {
+            background: rgba(0, 200, 255, 0.15);
+            border-color: var(--cyan);
+        }
+
+        .expand-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        /* ═══════════════════════════════════════════════
+           INTEL PANEL (Right Column)
+        ═══════════════════════════════════════════════ */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .intel-panel::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .intel-panel::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .card {
+            background: var(--bg-card);
+            backdrop-filter: blur(15px);
+            border-radius: 10px;
+            padding: 18px;
+            border: 1px solid var(--border-glow);
+            transition: border-color 0.3s;
+        }
+
+        .card:hover {
+            border-color: var(--border-glow-hover);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 14px;
+        }
+
+        .card-title {
+            font-family: var(--font-display);
+            font-size: 0.65rem;
+            font-weight: 600;
+            color: var(--cyan);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .card-icon {
+            color: var(--text-dim);
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Threat gauge */
+        .threat-gauge {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+        .score-ring {
+            position: relative;
+            width: 130px;
+            height: 130px;
+            margin-bottom: 12px;
+        }
+
+        .score-ring svg {
+            width: 130px;
+            height: 130px;
+            transform: rotate(-90deg);
+        }
+
+        .score-ring-bg {
+            fill: none;
+            stroke: rgba(255, 255, 255, 0.05);
+            stroke-width: 6;
+        }
+
+        .score-ring-fill {
+            fill: none;
+            stroke: var(--neon-green);
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-dasharray: 377;
+            stroke-dashoffset: 377;
+            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+                stroke 0.5s ease;
+            filter: drop-shadow(0 0 8px var(--neon-green));
+        }
+
+        .score-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+        }
+
+        .score-value {
+            font-family: var(--font-display);
+            font-size: 2.2rem;
+            font-weight: 800;
+            line-height: 1;
+            color: var(--text-primary);
+        }
+
+        .score-label {
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            color: var(--text-dim);
+            letter-spacing: 2px;
+            margin-top: 4px;
+        }
+
+        .status-text {
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            color: var(--neon-green);
+            letter-spacing: 3px;
+            text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+            transition: all 0.5s ease;
+        }
+
+        /* Stats */
+        .stats-list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            background: rgba(0, 200, 255, 0.03);
+            border-radius: 6px;
+            border: 1px solid rgba(0, 200, 255, 0.05);
+        }
+
+        .stat-name {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .stat-val {
+            font-family: var(--font-mono);
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        /* Mode indicator */
+        .mode-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 14px;
+            background: rgba(0, 200, 255, 0.05);
+            border-radius: 6px;
+            border: 1px solid var(--border-glow);
+        }
+
+        .mode-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--cyan);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--cyan);
+        }
+
+        .mode-name {
+            font-family: var(--font-display);
+            font-size: 0.7rem;
+            font-weight: 600;
+            letter-spacing: 2px;
+            color: var(--cyan);
+        }
+
+        /* Buttons */
+        .btn {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid var(--border-glow);
+            border-radius: 6px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.25s;
+            font-family: var(--font-display);
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(0, 100, 200, 0.1));
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+        }
+
+        .btn-primary:hover {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.3), rgba(0, 100, 200, 0.2));
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
+            transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.03);
+            color: var(--text-secondary);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.08);
+            color: var(--text-primary);
+        }
+
+        /* ═══════════════════════════════════════════════
+           MODAL
+        ═══════════════════════════════════════════════ */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 11000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-card {
+            background: var(--bg-panel);
+            width: 520px;
+            max-width: 90vw;
+            border-radius: 12px;
+            padding: 28px;
+            border: 1px solid var(--border-glow);
+            box-shadow: 0 0 60px rgba(0, 200, 255, 0.1);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .modal-overlay.show .modal-card {
+            transform: scale(1);
+        }
+
+        .modal-title {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--cyan);
+            letter-spacing: 2px;
+            margin-bottom: 6px;
+        }
+
+        .modal-subtitle {
+            font-family: var(--font-mono);
+            font-size: 0.7rem;
+            color: var(--text-dim);
+            margin-bottom: 16px;
+        }
+
+        .report-content {
+            background: rgba(0, 0, 0, 0.5);
+            padding: 16px;
+            border-radius: 8px;
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            color: var(--neon-green);
+            margin-bottom: 16px;
+            line-height: 1.6;
+            border: 1px solid var(--border-glow);
+            max-height: 300px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MOBILE RESPONSIVE
+        ═══════════════════════════════════════════════ */
+        @media (max-width: 1024px) {
+            .main-content {
+                grid-template-columns: 1fr 280px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            body {
+                flex-direction: column;
+                overflow-y: auto;
+            }
+
+            .sidebar {
+                width: 100%;
+                min-width: 100%;
+                flex-direction: row;
+                flex-wrap: wrap;
+                padding: 10px 16px;
+                gap: 6px;
+                order: 2;
+                border-right: none;
+                border-top: 1px solid var(--border-glow);
+                overflow-y: visible;
+            }
+
+            .logo {
+                width: 100%;
+                margin-bottom: 6px;
+                font-size: 0.85rem;
+            }
+
+            .version-tag {
+                display: none;
+            }
+
+            .nav-group {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 4px;
+                margin-bottom: 0;
+            }
+
+            .nav-label {
+                width: 100%;
+                margin-bottom: 4px;
+            }
+
+            .nav-item {
+                flex: none;
+                padding: 8px 10px;
+                font-size: 0.75rem;
+            }
+
+            .audit-section {
+                display: none;
+            }
+
+            .main-content {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+                order: 1;
+                overflow-y: auto;
+                padding: 10px;
+            }
+
+            .camera-grid {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                min-height: 250px;
+            }
+
+            .feed-cell:not(:first-child) {
+                display: none;
+            }
+
+            .intel-panel {
+                overflow-y: visible;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .sidebar .nav-item {
+                font-size: 0.7rem;
+                padding: 6px 8px;
+                gap: 6px;
+            }
+
+            .sidebar .nav-item svg {
+                width: 14px;
+                height: 14px;
+            }
+
+            .score-ring {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-ring svg {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-value {
+                font-size: 1.6rem;
+            }
+        }
+
+        /* ═══════════════════════════════════════════════
+           DISPATCH CENTER STYLES
+        ═══════════════════════════════════════════════ */
+        .dispatch-badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 3px;
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            font-weight: 600;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .dispatch-badge.sent {
+            background: rgba(0, 255, 136, 0.15);
+            color: var(--neon-green);
+            border: 1px solid rgba(0, 255, 136, 0.3);
+        }
+
+        .dispatch-badge.pending {
+            background: rgba(255, 170, 0, 0.15);
+            color: var(--neon-amber);
+            border: 1px solid rgba(255, 170, 0, 0.3);
+            animation: pulse-dot 2s infinite;
+        }
+
+        .dispatch-badge.rejected {
+            background: rgba(255, 32, 64, 0.15);
+            color: var(--neon-red);
+            border: 1px solid rgba(255, 32, 64, 0.3);
+        }
+
+        .dispatch-badge.failed {
+            background: rgba(255, 32, 64, 0.1);
+            color: #ff6080;
+            border: 1px solid rgba(255, 96, 128, 0.3);
+        }
+
+        .dispatch-entry {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            padding: 8px 10px;
+            margin-bottom: 4px;
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.3);
+            border-left: 2px solid var(--cyan-dim);
+            line-height: 1.5;
+            color: var(--text-secondary);
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            gap: 8px;
+        }
+
+        .dispatch-entry.pending-entry {
+            border-left-color: var(--neon-amber);
+            background: rgba(255, 170, 0, 0.05);
+        }
+
+        .dispatch-entry .dispatch-info {
+            flex: 1;
+        }
+
+        .dispatch-entry .dispatch-score {
+            font-family: var(--font-display);
+            font-size: 0.8rem;
+            font-weight: 700;
+            min-width: 30px;
+            text-align: right;
+        }
+
+        .dispatch-actions {
+            display: flex;
+            gap: 4px;
+            margin-top: 6px;
+        }
+
+        .dispatch-actions button {
+            padding: 4px 12px;
+            border-radius: 4px;
+            font-family: var(--font-display);
+            font-size: 0.6rem;
+            font-weight: 600;
+            letter-spacing: 1px;
+            cursor: pointer;
+            transition: all 0.2s;
+            border: 1px solid;
+        }
+
+        .btn-approve {
+            background: rgba(0, 255, 136, 0.1);
+            border-color: rgba(0, 255, 136, 0.4) !important;
+            color: var(--neon-green);
+        }
+
+        .btn-approve:hover {
+            background: rgba(0, 255, 136, 0.25);
+            box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
+        }
+
+        .btn-reject {
+            background: rgba(255, 32, 64, 0.1);
+            border-color: rgba(255, 32, 64, 0.4) !important;
+            color: var(--neon-red);
+        }
+
+        .btn-reject:hover {
+            background: rgba(255, 32, 64, 0.25);
+            box-shadow: 0 0 12px rgba(255, 32, 64, 0.2);
+        }
+
+        .dispatch-config-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            border-bottom: 1px solid rgba(0, 200, 255, 0.05);
+        }
+
+        .dispatch-config-row:last-child {
+            border-bottom: none;
+        }
+
+        .dispatch-config-label {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .toggle-switch {
+            position: relative;
+            width: 42px;
+            height: 22px;
+            cursor: pointer;
+        }
+
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 22px;
+            transition: 0.3s;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+        }
+
+        .toggle-slider::before {
+            content: '';
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            left: 2px;
+            bottom: 2px;
+            background: var(--text-secondary);
+            border-radius: 50%;
+            transition: 0.3s;
+        }
+
+        .toggle-switch input:checked+.toggle-slider {
+            background: rgba(0, 200, 255, 0.3);
+            border-color: var(--cyan);
+        }
+
+        .toggle-switch input:checked+.toggle-slider::before {
+            transform: translateX(20px);
+            background: var(--cyan);
+        }
+
+        .config-input {
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid var(--border-glow);
+            border-radius: 4px;
+            color: var(--text-primary);
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            padding: 6px 10px;
+            width: 100%;
+            transition: border-color 0.3s;
+        }
+
+        .config-input:focus {
+            outline: none;
+            border-color: var(--cyan);
+            box-shadow: 0 0 8px rgba(0, 200, 255, 0.15);
+        }
+
+        .config-input::placeholder {
+            color: var(--text-dim);
+        }
+
+        .cooldown-slider {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 100%;
+            height: 4px;
+            border-radius: 2px;
+            background: rgba(255, 255, 255, 0.1);
+            outline: none;
+            margin: 8px 0;
+        }
+
+        .cooldown-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: var(--cyan);
+            cursor: pointer;
+            box-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
+        }
+
+        .pending-count-badge {
+            background: var(--neon-amber);
+            color: #000;
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            font-weight: 700;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            margin-left: auto;
+        }
+
+        .pending-count-badge.visible {
+            display: flex;
+        }
+
+        .dispatch-status-bar {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 10px;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
+            margin-bottom: 8px;
+        }
+
+        .dispatch-status-bar.configured {
+            background: rgba(0, 255, 136, 0.05);
+            border: 1px solid rgba(0, 255, 136, 0.15);
+            color: var(--neon-green);
+        }
+
+        .dispatch-status-bar.not-configured {
+            background: rgba(255, 170, 0, 0.05);
+            border: 1px solid rgba(255, 170, 0, 0.15);
+            color: var(--neon-amber);
+        }
+
+        .dispatch-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+        }
+
+        .dispatch-dot.online {
+            background: var(--neon-green);
+            box-shadow: 0 0 6px var(--neon-green);
+        }
+
+        .dispatch-dot.offline {
+            background: var(--neon-amber);
+            box-shadow: 0 0 6px var(--neon-amber);
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Red Alert Overlay -->
+    <div class="red-alert-overlay" id="red-alert-overlay"></div>
+    <div class="red-alert-banner" id="red-alert-banner">
+        ⚠ RED ALERT — CRITICAL THREAT DETECTED ⚠
+        <button class="btn btn-secondary" onclick="resetSystem()"
+            style="width: auto; margin-top: 10px; background: rgba(0,0,0,0.5); border: 1px solid #ff2040; color: #ff2040;">RESET
+            SYSTEM</button>
+    </div>
+
+    <!-- SIDEBAR -->
+    <div class="sidebar">
+        <div class="logo">
+            <i data-feather="shield"></i>
+            SENTINEL
+        </div>
+        <div class="version-tag">V14.0 // DISPATCH INTEGRATION</div>
+
+        <div class="nav-group">
+            <div class="nav-label">Detection Modules</div>
+            <div class="nav-item active" onclick="toggleModule('movement', this)" id="nav-movement">
+                <i data-feather="activity"></i> Movement
+            </div>
+            <div class="nav-item" onclick="toggleModule('facemask', this)" id="nav-facemask">
+                <i data-feather="eye"></i> Facemask
+            </div>
+            <div class="nav-item" onclick="toggleModule('weapon', this)" id="nav-weapon">
+                <i data-feather="crosshair"></i> Weapon
+            </div>
+            <div class="nav-item" onclick="toggleModule('public_safety', this)" id="nav-public_safety">
+                <i data-feather="users"></i> Public Safety
+            </div>
+            <div class="nav-item" onclick="toggleModule('suspect_journey', this)" id="nav-suspect_journey"
+                style="border-color: rgba(255,255,0,0.3);">
+                <i data-feather="map-pin"></i> Suspect Journey
+            </div>
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Dispatch</div>
+            <div class="nav-item" onclick="openDispatchSettings()" id="nav-dispatch">
+                <i data-feather="bell"></i> Dispatch Settings
+                <span class="pending-count-badge" id="pending-badge">0</span>
+            </div>
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Grid Layout</div>
+            <div class="nav-item" onclick="setGridLayout('quad')">
+                <i data-feather="grid"></i> 2×2 Grid
+            </div>
+            <div class="nav-item" onclick="setGridLayout('single')">
+                <i data-feather="maximize-2"></i> Single View
+            </div>
+        </div>
+
+        <!-- Audit Log -->
+        <div class="audit-section">
+            <div class="nav-label" style="margin-bottom: 8px;">Operator Log</div>
+            <div class="audit-log-container" id="audit-log-container">
+                <div class="audit-entry">
+                    <div class="audit-time">--:--:--</div>
+                    SYSTEM STANDBY
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="main-content">
+        <!-- Multi-Camera Grid -->
+        <div class="camera-grid" id="camera-grid">
+            <!-- Feed 0 — Primary -->
+            <div class="feed-cell expanded" id="feed-0" onclick="expandFeed(0)">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot"></div>
+                        <span>FEED 01 // PRIMARY</span>
+                    </div>
+                    <div class="feed-status" id="feed-0-status">ACTIVE</div>
+                </div>
+                <img class="feed-stream" id="stream-0" src="/video_feed/0" alt="Feed 0">
+                <button class="expand-btn" onclick="event.stopPropagation(); expandFeed(0)" title="Expand">
+                    <i data-feather="maximize-2"></i>
+                </button>
+                <button class="expand-btn"
+                    style="right:40px; background: rgba(0,200,255,0.2); border-color: var(--cyan);"
+                    onclick="event.stopPropagation(); triggerFeedUpload(0)" title="Upload to this feed">
+                    <i data-feather="upload-cloud"></i>
+                </button>
+            </div>
+
+            <!-- Feed 1 -->
+            <div class="feed-cell" id="feed-1">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 02</span>
+                    </div>
+                    <div class="feed-status" id="feed-1-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-1">
+                    <i data-feather="video-off"></i>
+                    <span>NO SIGNAL</span>
+                    <button class="btn btn-primary"
+                        style="width:auto; margin-top:10px; padding:8px 16px; font-size:0.7rem;"
+                        onclick="event.stopPropagation(); triggerFeedUpload(1)">
+                        <i data-feather="upload-cloud" style="width:14px;height:14px;"></i> UPLOAD CLIP
+                    </button>
+                </div>
+            </div>
+
+            <!-- Feed 2 -->
+            <div class="feed-cell" id="feed-2">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 03</span>
+                    </div>
+                    <div class="feed-status" id="feed-2-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-2">
+                    <i data-feather="video-off"></i>
+                    <span>NO SIGNAL</span>
+                    <button class="btn btn-primary"
+                        style="width:auto; margin-top:10px; padding:8px 16px; font-size:0.7rem;"
+                        onclick="event.stopPropagation(); triggerFeedUpload(2)">
+                        <i data-feather="upload-cloud" style="width:14px;height:14px;"></i> UPLOAD CLIP
+                    </button>
+                </div>
+            </div>
+
+            <!-- Feed 3 -->
+            <div class="feed-cell" id="feed-3">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 04</span>
+                    </div>
+                    <div class="feed-status" id="feed-3-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-3">
+                    <i data-feather="video-off"></i>
+                    <span>NO SIGNAL</span>
+                    <button class="btn btn-primary"
+                        style="width:auto; margin-top:10px; padding:8px 16px; font-size:0.7rem;"
+                        onclick="event.stopPropagation(); triggerFeedUpload(3)">
+                        <i data-feather="upload-cloud" style="width:14px;height:14px;"></i> UPLOAD CLIP
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Hidden file input for per-feed upload -->
+        <input type="file" id="feed-upload-input" style="display: none" accept="video/*,.gif">
+
+
+        <!-- Intel Panel -->
+        <div class="intel-panel">
+            <!-- Suspect Journey -->
+            <div class="card" id="journey-card">
+                <div class="card-header">
+                    <div class="card-title">Suspect Journey</div>
+                    <i data-feather="map" class="card-icon"></i>
+                </div>
+                <div class="audit-log-container" id="journey-container" style="max-height: 250px;">
+                    <div class="audit-entry">
+                        <div class="audit-time">--:--:--</div>
+                        ACTIVATE 'SUSPECT JOURNEY' MODULE TO BEGIN
+                    </div>
+                </div>
+            </div>
+
+            <!-- Active Mode -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Active Mode</div>
+                </div>
+                <div class="mode-indicator">
+                    <div class="mode-dot"></div>
+                    <div class="mode-name" id="mode-title">1 MODULE ACTIVE</div>
+                </div>
+            </div>
+
+            <!-- Threat Assessment -->
+            <div class="card" id="threat-card">
+                <div class="card-header">
+                    <div class="card-title">Threat Assessment</div>
+                    <i data-feather="alert-triangle" class="card-icon"></i>
+                </div>
+                <div class="threat-gauge">
+                    <div class="score-ring">
+                        <svg viewBox="0 0 130 130">
+                            <circle class="score-ring-bg" cx="65" cy="65" r="60"></circle>
+                            <circle class="score-ring-fill" id="score-ring-fill" cx="65" cy="65" r="60"></circle>
+                        </svg>
+                        <div class="score-text">
+                            <div class="score-value" id="threat-score">0</div>
+                            <div class="score-label">THREAT LEVEL</div>
+                        </div>
+                    </div>
+                    <div class="status-text" id="status-text">SECURE</div>
+                </div>
+            </div>
+
+            <!-- Live Metrics -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Live Metrics</div>
+                    <i data-feather="bar-chart-2" class="card-icon"></i>
+                </div>
+                <div class="stats-list" id="stats-container">
+                    <div class="stat-row">
+                        <span class="stat-name">System Status</span>
+                        <span class="stat-val">Initializing</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Dispatch Center -->
+            <div class="card" id="dispatch-card">
+                <div class="card-header">
+                    <div class="card-title">Dispatch Center</div>
+                    <i data-feather="send" class="card-icon"></i>
+                </div>
+                <div class="dispatch-status-bar not-configured" id="dispatch-status-bar">
+                    <div class="dispatch-dot offline" id="dispatch-dot"></div>
+                    <span id="dispatch-status-text">TELEGRAM NOT CONFIGURED</span>
+                </div>
+
+                <!-- Pending Approvals -->
+                <div id="pending-section" style="display:none; margin-bottom: 10px;">
+                    <div
+                        style="font-family: var(--font-display); font-size: 0.6rem; color: var(--neon-amber); letter-spacing: 1px; margin-bottom: 6px;">
+                        ⏳ PENDING APPROVAL</div>
+                    <div id="pending-container"></div>
+                </div>
+
+                <!-- Dispatch Log -->
+                <div class="audit-log-container" id="dispatch-log-container" style="max-height: 180px;">
+                    <div class="dispatch-entry">
+                        <div class="dispatch-info">
+                            <div class="audit-time">--:--:--</div>
+                            NO DISPATCH HISTORY
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Quick Actions -->
+                <div style="display: flex; gap: 6px; margin-top: 10px;">
+                    <button class="btn btn-primary" onclick="manualDispatch()"
+                        style="font-size: 0.65rem; padding: 8px;">📡 SEND ALERT</button>
+                    <button class="btn btn-secondary" onclick="testDispatch()"
+                        style="font-size: 0.65rem; padding: 8px;">🧪 TEST</button>
+                    <button class="btn btn-secondary" onclick="openDispatchSettings()"
+                        style="font-size: 0.65rem; padding: 8px;">⚙</button>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Actions</div>
+                </div>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Incident Report</button>
+                <button class="btn btn-secondary" onclick="refreshAuditLog()" style="margin-top: 8px;">Refresh Audit
+                    Log</button>
+                <button class="btn btn-secondary" onclick="resetSystem()"
+                    style="margin-top: 8px; border-color: #ff2040; color: #ff2040;">⚠ SYSTEM RESET</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Report Modal -->
+    <div id="report-modal" class="modal-overlay">
+        <div class="modal-card">
+            <div class="modal-title">Incident Report</div>
+            <div class="modal-subtitle">Generated by Sentinel AI Agent // Gemini 1.5</div>
+            <div class="report-content" id="report-content">Analyzing data stream...</div>
+            <button class="btn btn-secondary" onclick="closeModal()">Dismiss</button>
+        </div>
+    </div>
+
+    <!-- Dispatch Settings Modal -->
+    <div id="dispatch-settings-modal" class="modal-overlay">
+        <div class="modal-card" style="width: 480px;">
+            <div class="modal-title">⚙ Dispatch Settings</div>
+            <div class="modal-subtitle">Telegram Bot Integration // Automated Alert System</div>
+
+            <div style="margin-bottom: 16px;">
+                <div class="dispatch-config-row">
+                    <span class="dispatch-config-label">Master Switch</span>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="cfg-enabled" checked onchange="saveDispatchSettings()">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+
+                <div class="dispatch-config-row">
+                    <span class="dispatch-config-label">Auto-Dispatch (skip approval)</span>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="cfg-auto-dispatch" onchange="saveDispatchSettings()">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+
+                <div class="dispatch-config-row" style="flex-direction: column; align-items: flex-start; gap: 6px;">
+                    <span class="dispatch-config-label">Cooldown: <span id="cooldown-display"
+                            style="color: var(--cyan);">60s</span></span>
+                    <input type="range" class="cooldown-slider" id="cfg-cooldown" min="10" max="300" value="60"
+                        oninput="document.getElementById('cooldown-display').textContent = this.value + 's'"
+                        onchange="saveDispatchSettings()">
+                </div>
+            </div>
+
+            <div
+                style="font-family: var(--font-display); font-size: 0.6rem; color: var(--cyan); letter-spacing: 1px; margin-bottom: 10px;">
+                TELEGRAM CONFIGURATION</div>
+
+            <div style="margin-bottom: 10px;">
+                <label style="font-size: 0.7rem; color: var(--text-secondary); display: block; margin-bottom: 4px;">Bot
+                    Token</label>
+                <input type="text" class="config-input" id="cfg-bot-token" placeholder="e.g. 8659917680:AAFHai-..."
+                    style="margin-bottom: 8px;">
+
+                <label style="font-size: 0.7rem; color: var(--text-secondary); display: block; margin-bottom: 4px;">Chat
+                    ID <span style="color: var(--text-dim);">(send /start to your bot, then click
+                        Auto-Detect)</span></label>
+                <div style="display: flex; gap: 6px;">
+                    <input type="text" class="config-input" id="cfg-chat-id" placeholder="e.g. 123456789"
+                        style="flex: 1;">
+                    <button class="btn btn-secondary" onclick="autoDetectChatId()"
+                        style="width: auto; padding: 6px 12px; font-size: 0.65rem;">AUTO-DETECT</button>
+                </div>
+            </div>
+
+            <div style="display: flex; gap: 8px; margin-top: 16px;">
+                <button class="btn btn-primary" onclick="saveTelegramConfig()" style="flex: 1;">SAVE CONFIG</button>
+                <button class="btn btn-primary" onclick="testDispatch()"
+                    style="flex: 1; background: rgba(0, 255, 136, 0.1); border-color: rgba(0, 255, 136, 0.3); color: var(--neon-green);">🧪
+                    SEND TEST</button>
+            </div>
+            <button class="btn btn-secondary" onclick="closeDispatchSettings()" style="margin-top: 8px;">Close</button>
+        </div>
+    </div>
+
+    <!-- ═══════════════════════════════════════════════
+         JAVASCRIPT
+    ═══════════════════════════════════════════════ -->
+    <script>
+        feather.replace();
+
+        // ─── State ───
+        let currentLayout = 'quad'; // 'quad' or 'single'
+        let expandedFeed = 0;
+        let isRedAlert = false;
+
+        // ─── Module Toggling ───
+        const modeTitles = {
+            'movement': 'MOVEMENT ANALYSIS',
+            'facemask': 'FACEMASK DETECTION',
+            'weapon': 'WEAPON DETECTION',
+            'public_safety': 'PUBLIC SAFETY',
+            'suspect_journey': 'SUSPECT JOURNEY'
+        };
+
+        function toggleModule(module, buttonElement) {
+            buttonElement.classList.toggle('active');
+
+            fetch('/toggle_module', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ module: module })
+            })
+                .then(r => r.json())
+                .then(data => {
+                    updateActiveModulesDisplay(data.active_modules);
+                });
+        }
+
+        function updateActiveModulesDisplay(activeModules) {
+            const modeTitle = document.getElementById('mode-title');
+            const count = activeModules.length;
+
+            if (count === 0) {
+                modeTitle.textContent = 'NO MODULES ACTIVE';
+            } else if (count === 1) {
+                modeTitle.textContent = modeTitles[activeModules[0]] || activeModules[0].toUpperCase();
+            } else {
+                modeTitle.textContent = `${count} MODULES ACTIVE`;
+            }
+        }
+
+
+        // ── Per-Feed Upload ──
+        let uploadTargetFeed = 0;
+
+        function triggerFeedUpload(feedId) {
+            uploadTargetFeed = feedId;
+            document.getElementById('feed-upload-input').click();
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
+            const feedInput = document.getElementById('feed-upload-input');
+            if (feedInput) {
+                feedInput.addEventListener('change', function () {
+                    if (this.files[0]) {
+                        const feedId = uploadTargetFeed;
+                        const formData = new FormData();
+                        formData.append('file', this.files[0]);
+
+                        const statusEl = document.getElementById('feed-' + feedId + '-status');
+                        if (statusEl) statusEl.textContent = 'UPLOADING...';
+
+                        fetch('/upload_video/' + feedId, { method: 'POST', body: formData })
+                            .then(r => r.json())
+                            .then(data => {
+                                if (data.success) {
+                                    activateFeedUI(feedId);
+                                    if (statusEl) statusEl.textContent = 'FILE FEED';
+                                }
+                            })
+                            .catch(() => {
+                                if (statusEl) statusEl.textContent = 'UPLOAD FAILED';
+                            });
+
+                        this.value = '';
+                    }
+                });
+            }
+        });
+
+        function activateFeedUI(feedId) {
+            // Hide the "NO SIGNAL" overlay and show the stream
+            const offline = document.getElementById('offline-' + feedId);
+            if (offline) offline.style.display = 'none';
+
+            const cell = document.getElementById('feed-' + feedId);
+            // If no stream img exists yet, create one
+            let img = document.getElementById('stream-' + feedId);
+            if (!img) {
+                img = document.createElement('img');
+                img.className = 'feed-stream';
+                img.id = 'stream-' + feedId;
+                img.alt = 'Feed ' + feedId;
+                cell.appendChild(img);
+            }
+
+            // Force refresh
+            img.src = '';
+            setTimeout(() => {
+                img.src = '/video_feed/' + feedId + '?t=' + Date.now();
+            }, 400);
+
+            // Update the live dot
+            const badge = cell.querySelector('.live-dot');
+            if (badge) {
+                badge.style.background = '';
+                badge.style.boxShadow = '';
+            }
+
+            feather.replace();
+        }
+
+        /**
+         * Force-refresh an MJPEG stream by setting a new src with a cache-buster.
+         * This drops the old HTTP connection and establishes a fresh one.
+         */
+        function refreshFeedStream(feedId) {
+            const img = document.getElementById('stream-' + feedId);
+            if (img) {
+                // Brief blank to visually signal the switch
+                img.src = '';
+                // Small delay lets the backend fully initialize the new feed
+                setTimeout(() => {
+                    img.src = '/video_feed/' + feedId + '?t=' + Date.now();
+                }, 300);
+            }
+        }
+
+        // ─── Grid Layout ───
+        function setGridLayout(layout) {
+            const grid = document.getElementById('camera-grid');
+            currentLayout = layout;
+
+            if (layout === 'single') {
+                grid.classList.add('single-view');
+                // Show only the expanded feed
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === expandedFeed);
+                });
+            } else {
+                grid.classList.remove('single-view');
+                document.querySelectorAll('.feed-cell').forEach(cell => {
+                    cell.classList.remove('expanded');
+                });
+            }
+        }
+
+        function expandFeed(feedId) {
+            expandedFeed = feedId;
+            if (currentLayout === 'single') {
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === feedId);
+                });
+            }
+        }
+
+        // ─── Stats & Red Alert Updates ───
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    const statusEl = document.getElementById('status-text');
+                    const ringFill = document.getElementById('score-ring-fill');
+                    const threatCard = document.getElementById('threat-card');
+
+                    scoreEl.textContent = score;
+
+                    // Compute ring dash offset (circumference = 2 * π * 60 ≈ 377)
+                    const circumference = 377;
+                    const offset = circumference - (circumference * score / 100);
+                    ringFill.style.strokeDashoffset = offset;
+
+                    // Color based on score
+                    let color, status, glow;
+                    if (score >= 80) {
+                        color = '#ff2040';
+                        status = 'CRITICAL';
+                        glow = 'rgba(255, 32, 64, 0.4)';
+                    } else if (score >= 50) {
+                        color = '#ffaa00';
+                        status = 'ELEVATED';
+                        glow = 'rgba(255, 170, 0, 0.3)';
+                    } else if (score >= 25) {
+                        color = '#00d4ff';
+                        status = 'GUARDED';
+                        glow = 'rgba(0, 200, 255, 0.3)';
+                    } else {
+                        color = '#00ff88';
+                        status = 'SECURE';
+                        glow = 'rgba(0, 255, 136, 0.3)';
+                    }
+
+                    statusEl.textContent = status;
+                    statusEl.style.color = color;
+                    statusEl.style.textShadow = `0 0 20px ${glow}`;
+                    ringFill.style.stroke = color;
+                    ringFill.style.filter = `drop-shadow(0 0 8px ${glow})`;
+
+                    updateJourneyData();
+
+                    // Red Alert state
+                    const alertOverlay = document.getElementById('red-alert-overlay');
+                    const alertBanner = document.getElementById('red-alert-banner');
+                    const feedCells = document.querySelectorAll('.feed-cell');
+
+                    if (data.red_alert) {
+                        alertOverlay.classList.add('active');
+                        alertBanner.classList.add('active');
+                        feedCells.forEach(cell => cell.classList.add('red-alert-active'));
+                        threatCard.style.borderColor = 'rgba(255, 32, 64, 0.5)';
+
+                        if (!isRedAlert) {
+                            playAlertTone();
+                            isRedAlert = true;
+                        }
+                    } else {
+                        alertOverlay.classList.remove('active');
+                        alertBanner.classList.remove('active');
+                        feedCells.forEach(cell => cell.classList.remove('red-alert-active'));
+                        threatCard.style.borderColor = '';
+                        isRedAlert = false;
+                    }
+
+                    // Update mode display
+                    if (data.active_modules) {
+                        updateActiveModulesDisplay(data.active_modules);
+                    }
+
+                    // Update live metrics
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    if (!data.details || Object.keys(data.details).length === 0) {
+                        container.innerHTML = '<div class="stat-row"><span class="stat-name">System Status</span><span class="stat-val">Standby</span></div>';
+                    } else {
+                        for (const [key, value] of Object.entries(data.details)) {
+                            const div = document.createElement('div');
+                            div.className = 'stat-row';
+                            const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            let displayVal = value;
+                            if (typeof value === 'boolean') {
+                                displayVal = value ? '⚠ YES' : 'No';
+                            }
+                            div.innerHTML = `<span class="stat-name">${formattedKey}</span><span class="stat-val">${displayVal}</span>`;
+                            container.appendChild(div);
+                        }
+                    }
+                })
+                .catch(() => { });
+        }
+
+        // ─── Alert Tone (Web Audio API) ───
+        function playAlertTone() {
+            try {
+                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                const oscillator = audioCtx.createOscillator();
+                const gainNode = audioCtx.createGain();
+
+                oscillator.connect(gainNode);
+                gainNode.connect(audioCtx.destination);
+
+                oscillator.type = 'square';
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime);
+                oscillator.frequency.setValueAtTime(660, audioCtx.currentTime + 0.15);
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime + 0.3);
+
+                gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);
+
+                oscillator.start(audioCtx.currentTime);
+                oscillator.stop(audioCtx.currentTime + 0.5);
+            } catch (e) {
+                // Audio not available — silent fallback
+            }
+        }
+
+        // ─── AI Report ───
+        function generateReport() {
+            const modal = document.getElementById('report-modal');
+            modal.classList.add('show');
+            document.getElementById('report-content').textContent = 'ANALYZING DATA STREAM...';
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                })
+                .catch(() => {
+                    document.getElementById('report-content').textContent = 'ERROR: Connection to AI Agent lost.';
+                });
+        }
+
+        function closeModal() {
+            document.getElementById('report-modal').classList.remove('show');
+        }
+
+        // ─── Audit Log Refresh ───
+        function refreshAuditLog() {
+            fetch('/audit_log')
+                .then(r => r.json())
+                .then(data => {
+                    const container = document.getElementById('audit-log-container');
+                    container.innerHTML = '';
+
+                    if (data.log.length === 0) {
+                        container.innerHTML = '<div class="audit-entry"><div class="audit-time">--:--:--</div>NO ENTRIES</div>';
+                        return;
+                    }
+
+                    data.log.slice(0, 30).forEach(entry => {
+                        const div = document.createElement('div');
+                        div.className = `audit-entry severity-${entry.severity}`;
+                        div.innerHTML = `
+                            <div class="audit-time">${entry.timestamp.split(' ')[1] || entry.timestamp}</div>
+                            ${entry.action}: ${entry.details}
+                        `;
+                        container.appendChild(div);
+                    });
+                })
+                .catch(() => { });
+        }
+
+        // ─── System Reset ───
+        function resetSystem() {
+            if (!confirm("⚠ CONFIRM SYSTEM RESET ⚠\n\nThis will clear all tracking history, threat scores, and active alerts.\nThe system will revert to default state.")) {
+                return;
+            }
+
+            fetch('/reset_system', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        // Reload page to refresh all UI states cleanly
+                        window.location.reload();
+                    }
+                });
+        }
+
+        function updateJourneyData() {
+            fetch('/journey_data')
+                .then(r => r.json())
+                .then(data => {
+                    const container = document.getElementById('journey-container');
+                    if (data.length === 0) {
+                        container.innerHTML = '<div class="audit-entry"><div class="audit-time">--:--:--</div>SCANNING...</div>';
+                        return;
+                    }
+
+                    let html = '';
+                    data.forEach(subject => {
+                        const historyHtml = subject.history.map(h => `F${h.feed}`).join(' → ');
+                        html += `
+                            <div class="audit-entry">
+                                <div class="audit-time">${subject.last_seen}</div>
+                                <span style="color:var(--cyan)">SUBJ #${subject.id}</span> [FEED ${subject.last_feed}]
+                                <div style="font-size: 0.6rem; color: var(--text-dim); margin-top:2px;">${historyHtml}</div>
+                            </div>
+                        `;
+                    });
+                    container.innerHTML = html;
+                });
+        }
+
+        // ═══════════════════════════════════════════════════
+        // DISPATCH CENTER
+        // ═══════════════════════════════════════════════════
+
+        function updateDispatchCenter() {
+            fetch('/dispatch_log')
+                .then(r => r.json())
+                .then(data => {
+                    // Update status bar
+                    const statusBar = document.getElementById('dispatch-status-bar');
+                    const statusDot = document.getElementById('dispatch-dot');
+                    const statusText = document.getElementById('dispatch-status-text');
+
+                    if (data.settings.telegram_configured) {
+                        statusBar.className = 'dispatch-status-bar configured';
+                        statusDot.className = 'dispatch-dot online';
+                        const mode = data.settings.auto_dispatch ? 'AUTO' : 'MANUAL';
+                        statusText.textContent = `TELEGRAM ONLINE // ${mode} MODE`;
+                    } else {
+                        statusBar.className = 'dispatch-status-bar not-configured';
+                        statusDot.className = 'dispatch-dot offline';
+                        statusText.textContent = 'TELEGRAM NOT CONFIGURED';
+                    }
+
+                    // Update pending approvals
+                    const pendingSection = document.getElementById('pending-section');
+                    const pendingContainer = document.getElementById('pending-container');
+                    const pendingBadge = document.getElementById('pending-badge');
+
+                    if (data.pending && data.pending.length > 0) {
+                        pendingSection.style.display = 'block';
+                        pendingBadge.textContent = data.pending.length;
+                        pendingBadge.classList.add('visible');
+
+                        let pendingHtml = '';
+                        data.pending.forEach(evt => {
+                            const scoreColor = evt.threat_score >= 80 ? 'var(--neon-red)' :
+                                evt.threat_score >= 50 ? 'var(--neon-amber)' : 'var(--cyan)';
+                            pendingHtml += `
+                                <div class="dispatch-entry pending-entry">
+                                    <div class="dispatch-info">
+                                        <div class="audit-time">${evt.timestamp}</div>
+                                        <span class="dispatch-badge pending">PENDING</span>
+                                        Threat Score: ${evt.threat_score} // ${evt.active_modules.join(', ').toUpperCase()}
+                                        <div class="dispatch-actions">
+                                            <button class="btn-approve" onclick="approveDispatch('${evt.id}')">✓ APPROVE</button>
+                                            <button class="btn-reject" onclick="rejectDispatch('${evt.id}')">✗ REJECT</button>
+                                        </div>
+                                    </div>
+                                    <div class="dispatch-score" style="color: ${scoreColor};">${evt.threat_score}</div>
+                                </div>
+                            `;
+                        });
+                        pendingContainer.innerHTML = pendingHtml;
+                    } else {
+                        pendingSection.style.display = 'none';
+                        pendingBadge.classList.remove('visible');
+                    }
+
+                    // Update dispatch log
+                    const logContainer = document.getElementById('dispatch-log-container');
+                    if (data.log.length === 0 && (!data.pending || data.pending.length === 0)) {
+                        logContainer.innerHTML = '<div class="dispatch-entry"><div class="dispatch-info"><div class="audit-time">--:--:--</div>NO DISPATCH HISTORY</div></div>';
+                    } else {
+                        let logHtml = '';
+                        data.log.slice(0, 15).forEach(evt => {
+                            const badgeClass = evt.status;
+                            const statusLabel = evt.status.toUpperCase();
+                            const scoreColor = evt.threat_score >= 80 ? 'var(--neon-red)' :
+                                evt.threat_score >= 50 ? 'var(--neon-amber)' : 'var(--cyan)';
+                            logHtml += `
+                                <div class="dispatch-entry">
+                                    <div class="dispatch-info">
+                                        <div class="audit-time">${evt.timestamp}</div>
+                                        <span class="dispatch-badge ${badgeClass}">${statusLabel}</span>
+                                        Score: ${evt.threat_score} // ${(evt.active_modules || []).join(', ').toUpperCase() || 'N/A'}
+                                    </div>
+                                    <div class="dispatch-score" style="color: ${scoreColor};">${evt.threat_score}</div>
+                                </div>
+                            `;
+                        });
+                        logContainer.innerHTML = logHtml;
+                    }
+                })
+                .catch(() => { });
+        }
+
+        function approveDispatch(eventId) {
+            fetch('/approve_dispatch/' + eventId, { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    updateDispatchCenter();
+                    if (data.status === 'sent') {
+                        showDispatchToast('✅ Alert dispatched via Telegram');
+                    } else {
+                        showDispatchToast('⚠ Dispatch failed — check Telegram config');
+                    }
+                });
+        }
+
+        function rejectDispatch(eventId) {
+            fetch('/reject_dispatch/' + eventId, { method: 'POST' })
+                .then(r => r.json())
+                .then(() => {
+                    updateDispatchCenter();
+                    showDispatchToast('🔴 Alert rejected');
+                });
+        }
+
+        function manualDispatch() {
+            if (!confirm('📡 DISPATCH ALERT NOW?\n\nThis will send the current threat status to Telegram immediately.')) return;
+            fetch('/dispatch_alert', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        showDispatchToast('✅ Alert dispatched via Telegram');
+                    } else {
+                        showDispatchToast('⚠ ' + (data.error || 'Dispatch failed'));
+                    }
+                    updateDispatchCenter();
+                })
+                .catch(() => showDispatchToast('⚠ Network error'));
+        }
+
+        function testDispatch() {
+            showDispatchToast('🧪 Sending test message...');
+            fetch('/test_dispatch', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.ok) {
+                        showDispatchToast('✅ Test message sent to Telegram!');
+                        updateDispatchCenter();
+                    } else {
+                        showDispatchToast('⚠ ' + (data.error || 'Test failed'));
+                    }
+                })
+                .catch(() => showDispatchToast('⚠ Connection error'));
+        }
+
+        // ─── Dispatch Settings Modal ───
+        function openDispatchSettings() {
+            const modal = document.getElementById('dispatch-settings-modal');
+            modal.classList.add('show');
+
+            // Load current settings
+            fetch('/dispatch_settings')
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('cfg-enabled').checked = data.enabled;
+                    document.getElementById('cfg-auto-dispatch').checked = data.auto_dispatch;
+                    document.getElementById('cfg-cooldown').value = data.cooldown_seconds;
+                    document.getElementById('cooldown-display').textContent = data.cooldown_seconds + 's';
+                    if (data.chat_id) document.getElementById('cfg-chat-id').value = data.chat_id;
+                    // Don't populate bot token for security (show masked version in placeholder)
+                    const tokenInput = document.getElementById('cfg-bot-token');
+                    if (data.bot_token) tokenInput.placeholder = data.bot_token;
+                });
+        }
+
+        function closeDispatchSettings() {
+            document.getElementById('dispatch-settings-modal').classList.remove('show');
+        }
+
+        function saveDispatchSettings() {
+            fetch('/dispatch_settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    enabled: document.getElementById('cfg-enabled').checked,
+                    auto_dispatch: document.getElementById('cfg-auto-dispatch').checked,
+                    cooldown_seconds: parseInt(document.getElementById('cfg-cooldown').value)
+                })
+            }).then(() => updateDispatchCenter());
+        }
+
+        function saveTelegramConfig() {
+            const token = document.getElementById('cfg-bot-token').value.trim();
+            const chatId = document.getElementById('cfg-chat-id').value.trim();
+
+            if (!token && !chatId) {
+                showDispatchToast('⚠ Please enter bot token and/or chat ID');
+                return;
+            }
+
+            const payload = {};
+            if (token) payload.bot_token = token;
+            if (chatId) payload.chat_id = chatId;
+
+            fetch('/dispatch_settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            })
+                .then(r => r.json())
+                .then(() => {
+                    showDispatchToast('✅ Telegram config saved!');
+                    updateDispatchCenter();
+                });
+        }
+
+        function autoDetectChatId() {
+            showDispatchToast('🔍 Scanning for chat ID...');
+            // First save any token that was entered
+            const token = document.getElementById('cfg-bot-token').value.trim();
+            const savePromise = token ?
+                fetch('/dispatch_settings', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ bot_token: token })
+                }) : Promise.resolve();
+
+            savePromise.then(() => {
+                return fetch('/test_dispatch', { method: 'POST' });
+            })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.ok) {
+                        showDispatchToast('✅ Chat ID detected & test sent!');
+                        // Reload settings to show detected chat ID
+                        fetch('/dispatch_settings')
+                            .then(r => r.json())
+                            .then(s => {
+                                if (s.chat_id) document.getElementById('cfg-chat-id').value = s.chat_id;
+                            });
+                    } else {
+                        showDispatchToast('⚠ Could not detect chat ID. Send /start to the bot from Telegram, then try again.');
+                    }
+                })
+                .catch(() => showDispatchToast('⚠ Detection failed'));
+        }
+
+        // ─── Toast Notification ───
+        function showDispatchToast(message) {
+            // Remove existing toast
+            const existing = document.getElementById('dispatch-toast');
+            if (existing) existing.remove();
+
+            const toast = document.createElement('div');
+            toast.id = 'dispatch-toast';
+            toast.textContent = message;
+            toast.style.cssText = `
+                position: fixed;
+                bottom: 24px;
+                right: 24px;
+                background: var(--bg-panel);
+                color: var(--text-primary);
+                font-family: var(--font-mono);
+                font-size: 0.75rem;
+                padding: 12px 20px;
+                border-radius: 8px;
+                border: 1px solid var(--border-glow);
+                box-shadow: 0 4px 30px rgba(0, 200, 255, 0.15);
+                z-index: 12000;
+                animation: fadeIn 0.3s ease;
+                backdrop-filter: blur(10px);
+            `;
+            document.body.appendChild(toast);
+            setTimeout(() => {
+                toast.style.opacity = '0';
+                toast.style.transition = 'opacity 0.3s';
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+
+        // ─── Intervals ───
+        setInterval(updateStats, 1000);
+        setInterval(refreshAuditLog, 5000);
+        setInterval(updateDispatchCenter, 3000);
+
+        // Initial load
+        setTimeout(refreshAuditLog, 1500);
+        setTimeout(updateDispatchCenter, 1000);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard_v15.html

@@ -0,0 +1,2253 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SENTINEL V14 — Dispatch Integration</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap"
+        rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        /* ═══════════════════════════════════════════════
+           CSS VARIABLES — SCI-FI PALETTE
+        ═══════════════════════════════════════════════ */
+        :root {
+            --bg-deep: #05080f;
+            --bg-panel: rgba(8, 16, 32, 0.85);
+            --bg-card: rgba(10, 20, 40, 0.7);
+            --border-glow: rgba(0, 200, 255, 0.15);
+            --border-glow-hover: rgba(0, 200, 255, 0.4);
+            --cyan: #00d4ff;
+            --cyan-dim: #0090aa;
+            --neon-green: #00ff88;
+            --neon-red: #ff2040;
+            --neon-amber: #ffaa00;
+            --text-primary: #e0f0ff;
+            --text-secondary: #5a8aaa;
+            --text-dim: #2a4a5a;
+            --scanline-opacity: 0.03;
+            --font-display: 'Orbitron', sans-serif;
+            --font-body: 'Rajdhani', sans-serif;
+            --font-mono: 'Share Tech Mono', monospace;
+        }
+
+        /* ═══════════════════════════════════════════════
+           BASE RESET & BODY
+        ═══════════════════════════════════════════════ */
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-body);
+            background: var(--bg-deep);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* Scanline overlay on body */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: repeating-linear-gradient(0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 4px);
+            pointer-events: none;
+            z-index: 9999;
+        }
+
+        /* ═══════════════════════════════════════════════
+           RED ALERT OVERLAY
+        ═══════════════════════════════════════════════ */
+        .red-alert-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            z-index: 9998;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .red-alert-overlay.active {
+            opacity: 1;
+            animation: red-pulse-border 1s ease-in-out infinite;
+        }
+
+        .red-alert-overlay.active::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 4px solid var(--neon-red);
+            box-shadow: inset 0 0 80px rgba(255, 32, 64, 0.15),
+                0 0 40px rgba(255, 32, 64, 0.3);
+        }
+
+        .red-alert-banner {
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 20, 40, 0.9);
+            color: #fff;
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 4px;
+            padding: 8px 40px;
+            z-index: 10000;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            box-shadow: 0 4px 30px rgba(255, 20, 40, 0.5);
+            display: none;
+            animation: alert-flash 0.8s ease-in-out infinite;
+        }
+
+        .red-alert-banner.active {
+            display: block;
+        }
+
+        @keyframes red-pulse-border {
+
+            0%,
+            100% {
+                opacity: 0.6;
+            }
+
+            50% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes alert-flash {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.6;
+            }
+        }
+
+        /* ═══════════════════════════════════════════════
+           SIDEBAR
+        ═══════════════════════════════════════════════ */
+        .sidebar {
+            width: 260px;
+            min-width: 260px;
+            background: var(--bg-panel);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-right: 1px solid var(--border-glow);
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            z-index: 100;
+            overflow-y: auto;
+        }
+
+        .logo {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--cyan);
+            letter-spacing: 2px;
+        }
+
+        .logo svg {
+            filter: drop-shadow(0 0 6px var(--cyan));
+        }
+
+        .version-tag {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            color: var(--text-dim);
+            margin-bottom: 24px;
+            letter-spacing: 1px;
+        }
+
+        .nav-group {
+            margin-bottom: 20px;
+        }
+
+        .nav-label {
+            font-family: var(--font-display);
+            font-size: 0.6rem;
+            font-weight: 600;
+            color: var(--text-dim);
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .nav-item {
+            padding: 10px 12px;
+            margin-bottom: 3px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.25s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            border: 1px solid transparent;
+        }
+
+        .nav-item:hover {
+            background: rgba(0, 200, 255, 0.05);
+            color: var(--text-primary);
+            border-color: var(--border-glow);
+        }
+
+        .nav-item.active {
+            background: rgba(0, 200, 255, 0.1);
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+            box-shadow: 0 0 15px rgba(0, 200, 255, 0.05);
+        }
+
+        .nav-item svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Audit Log Panel in sidebar */
+        .audit-section {
+            margin-top: auto;
+            flex-shrink: 0;
+        }
+
+        .audit-log-container {
+            max-height: 200px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .audit-log-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .audit-entry {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            padding: 6px 8px;
+            margin-bottom: 2px;
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.3);
+            border-left: 2px solid var(--cyan-dim);
+            line-height: 1.4;
+            color: var(--text-secondary);
+        }
+
+        .audit-entry.severity-WARNING {
+            border-left-color: var(--neon-amber);
+        }
+
+        .audit-entry.severity-CRITICAL {
+            border-left-color: var(--neon-red);
+            color: var(--neon-red);
+        }
+
+        .audit-time {
+            color: var(--text-dim);
+            font-size: 0.6rem;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MAIN CONTENT AREA
+        ═══════════════════════════════════════════════ */
+        .main-content {
+            flex: 1;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: 1fr 320px;
+            gap: 16px;
+            overflow: hidden;
+            background: radial-gradient(ellipse at 20% 0%, rgba(0, 60, 100, 0.15) 0%, transparent 60%),
+                radial-gradient(ellipse at 80% 100%, rgba(0, 40, 80, 0.1) 0%, transparent 60%),
+                var(--bg-deep);
+        }
+
+        /* ═════════════════════════════════════════��═════
+           MULTI-CAMERA GRID
+        ═══════════════════════════════════════════════ */
+        .camera-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 8px;
+            height: 100%;
+        }
+
+        .camera-grid.single-view {
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr;
+        }
+
+        .camera-grid.single-view .feed-cell:not(.expanded) {
+            display: none;
+        }
+
+        .feed-cell {
+            background: var(--bg-card);
+            border-radius: 10px;
+            border: 1px solid var(--border-glow);
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .feed-cell:hover {
+            border-color: var(--border-glow-hover);
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.1);
+        }
+
+        .feed-cell.red-alert-active {
+            border-color: var(--neon-red) !important;
+            box-shadow: 0 0 30px rgba(255, 32, 64, 0.3) !important;
+            animation: cell-red-pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes cell-red-pulse {
+
+            0%,
+            100% {
+                box-shadow: 0 0 20px rgba(255, 32, 64, 0.2);
+            }
+
+            50% {
+                box-shadow: 0 0 40px rgba(255, 32, 64, 0.5);
+            }
+        }
+
+        .feed-header {
+            position: absolute;
+            top: 8px;
+            left: 10px;
+            right: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 5;
+            pointer-events: none;
+        }
+
+        .feed-badge {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            font-weight: 400;
+            border: 1px solid var(--border-glow);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--cyan);
+            letter-spacing: 1px;
+        }
+
+        .live-dot {
+            width: 6px;
+            height: 6px;
+            background: var(--neon-red);
+            border-radius: 50%;
+            box-shadow: 0 0 8px var(--neon-red);
+            animation: pulse-dot 2s infinite;
+        }
+
+        @keyframes pulse-dot {
+
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.4;
+                transform: scale(1.3);
+            }
+        }
+
+        .feed-status {
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
+            color: var(--neon-green);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 3px 8px;
+            border-radius: 4px;
+        }
+
+        .feed-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000;
+            display: block;
+        }
+
+        .feed-offline {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--text-dim);
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            letter-spacing: 1px;
+            gap: 8px;
+        }
+
+        .feed-offline svg {
+            width: 24px;
+            height: 24px;
+            color: var(--text-dim);
+        }
+
+        /* Fullscreen expand button */
+        .expand-btn {
+            position: absolute;
+            bottom: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid var(--border-glow);
+            color: var(--cyan);
+            width: 28px;
+            height: 28px;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            z-index: 5;
+            pointer-events: all;
+        }
+
+        .expand-btn:hover {
+            background: rgba(0, 200, 255, 0.15);
+            border-color: var(--cyan);
+        }
+
+        .expand-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        /* ═══════════════════════════════════════════════
+           INTEL PANEL (Right Column)
+        ═══════════════════════════════════════════════ */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .intel-panel::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .intel-panel::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .card {
+            background: var(--bg-card);
+            backdrop-filter: blur(15px);
+            border-radius: 10px;
+            padding: 18px;
+            border: 1px solid var(--border-glow);
+            transition: border-color 0.3s;
+        }
+
+        .card:hover {
+            border-color: var(--border-glow-hover);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 14px;
+        }
+
+        .card-title {
+            font-family: var(--font-display);
+            font-size: 0.65rem;
+            font-weight: 600;
+            color: var(--cyan);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .card-icon {
+            color: var(--text-dim);
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Threat gauge */
+        .threat-gauge {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+        .score-ring {
+            position: relative;
+            width: 130px;
+            height: 130px;
+            margin-bottom: 12px;
+        }
+
+        .score-ring svg {
+            width: 130px;
+            height: 130px;
+            transform: rotate(-90deg);
+        }
+
+        .score-ring-bg {
+            fill: none;
+            stroke: rgba(255, 255, 255, 0.05);
+            stroke-width: 6;
+        }
+
+        .score-ring-fill {
+            fill: none;
+            stroke: var(--neon-green);
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-dasharray: 377;
+            stroke-dashoffset: 377;
+            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+                stroke 0.5s ease;
+            filter: drop-shadow(0 0 8px var(--neon-green));
+        }
+
+        .score-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+        }
+
+        .score-value {
+            font-family: var(--font-display);
+            font-size: 2.2rem;
+            font-weight: 800;
+            line-height: 1;
+            color: var(--text-primary);
+        }
+
+        .score-label {
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            color: var(--text-dim);
+            letter-spacing: 2px;
+            margin-top: 4px;
+        }
+
+        .status-text {
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            color: var(--neon-green);
+            letter-spacing: 3px;
+            text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+            transition: all 0.5s ease;
+        }
+
+        /* Stats */
+        .stats-list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            background: rgba(0, 200, 255, 0.03);
+            border-radius: 6px;
+            border: 1px solid rgba(0, 200, 255, 0.05);
+        }
+
+        .stat-name {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .stat-val {
+            font-family: var(--font-mono);
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        /* Mode indicator */
+        .mode-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 14px;
+            background: rgba(0, 200, 255, 0.05);
+            border-radius: 6px;
+            border: 1px solid var(--border-glow);
+        }
+
+        .mode-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--cyan);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--cyan);
+        }
+
+        .mode-name {
+            font-family: var(--font-display);
+            font-size: 0.7rem;
+            font-weight: 600;
+            letter-spacing: 2px;
+            color: var(--cyan);
+        }
+
+        /* Buttons */
+        .btn {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid var(--border-glow);
+            border-radius: 6px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.25s;
+            font-family: var(--font-display);
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(0, 100, 200, 0.1));
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+        }
+
+        .btn-primary:hover {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.3), rgba(0, 100, 200, 0.2));
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
+            transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.03);
+            color: var(--text-secondary);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.08);
+            color: var(--text-primary);
+        }
+
+        /* ═══════════════════════════════════════════════
+           MODAL
+        ═══════════════════════════════════════════════ */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 11000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-card {
+            background: var(--bg-panel);
+            width: 520px;
+            max-width: 90vw;
+            border-radius: 12px;
+            padding: 28px;
+            border: 1px solid var(--border-glow);
+            box-shadow: 0 0 60px rgba(0, 200, 255, 0.1);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .modal-overlay.show .modal-card {
+            transform: scale(1);
+        }
+
+        .modal-title {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--cyan);
+            letter-spacing: 2px;
+            margin-bottom: 6px;
+        }
+
+        .modal-subtitle {
+            font-family: var(--font-mono);
+            font-size: 0.7rem;
+            color: var(--text-dim);
+            margin-bottom: 16px;
+        }
+
+        .report-content {
+            background: rgba(0, 0, 0, 0.5);
+            padding: 16px;
+            border-radius: 8px;
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            color: var(--neon-green);
+            margin-bottom: 16px;
+            line-height: 1.6;
+            border: 1px solid var(--border-glow);
+            max-height: 300px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MOBILE RESPONSIVE
+        ═══════════════════════════════════════════════ */
+        @media (max-width: 1024px) {
+            .main-content {
+                grid-template-columns: 1fr 280px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            body {
+                flex-direction: column;
+                overflow-y: auto;
+            }
+
+            .sidebar {
+                width: 100%;
+                min-width: 100%;
+                flex-direction: row;
+                flex-wrap: wrap;
+                padding: 10px 16px;
+                gap: 6px;
+                order: 2;
+                border-right: none;
+                border-top: 1px solid var(--border-glow);
+                overflow-y: visible;
+            }
+
+            .logo {
+                width: 100%;
+                margin-bottom: 6px;
+                font-size: 0.85rem;
+            }
+
+            .version-tag {
+                display: none;
+            }
+
+            .nav-group {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 4px;
+                margin-bottom: 0;
+            }
+
+            .nav-label {
+                width: 100%;
+                margin-bottom: 4px;
+            }
+
+            .nav-item {
+                flex: none;
+                padding: 8px 10px;
+                font-size: 0.75rem;
+            }
+
+            .audit-section {
+                display: none;
+            }
+
+            .main-content {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+                order: 1;
+                overflow-y: auto;
+                padding: 10px;
+            }
+
+            .camera-grid {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                min-height: 250px;
+            }
+
+            .feed-cell:not(:first-child) {
+                display: none;
+            }
+
+            .intel-panel {
+                overflow-y: visible;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .sidebar .nav-item {
+                font-size: 0.7rem;
+                padding: 6px 8px;
+                gap: 6px;
+            }
+
+            .sidebar .nav-item svg {
+                width: 14px;
+                height: 14px;
+            }
+
+            .score-ring {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-ring svg {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-value {
+                font-size: 1.6rem;
+            }
+        }
+
+        /* ═══════════════════════════════════════════════
+           DISPATCH CENTER STYLES
+        ═══════════════════════════════════════════════ */
+        .dispatch-badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 3px;
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            font-weight: 600;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .dispatch-badge.sent {
+            background: rgba(0, 255, 136, 0.15);
+            color: var(--neon-green);
+            border: 1px solid rgba(0, 255, 136, 0.3);
+        }
+
+        .dispatch-badge.pending {
+            background: rgba(255, 170, 0, 0.15);
+            color: var(--neon-amber);
+            border: 1px solid rgba(255, 170, 0, 0.3);
+            animation: pulse-dot 2s infinite;
+        }
+
+        .dispatch-badge.rejected {
+            background: rgba(255, 32, 64, 0.15);
+            color: var(--neon-red);
+            border: 1px solid rgba(255, 32, 64, 0.3);
+        }
+
+        .dispatch-badge.failed {
+            background: rgba(255, 32, 64, 0.1);
+            color: #ff6080;
+            border: 1px solid rgba(255, 96, 128, 0.3);
+        }
+
+        .dispatch-entry {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            padding: 8px 10px;
+            margin-bottom: 4px;
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.3);
+            border-left: 2px solid var(--cyan-dim);
+            line-height: 1.5;
+            color: var(--text-secondary);
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            gap: 8px;
+        }
+
+        .dispatch-entry.pending-entry {
+            border-left-color: var(--neon-amber);
+            background: rgba(255, 170, 0, 0.05);
+        }
+
+        .dispatch-entry .dispatch-info {
+            flex: 1;
+        }
+
+        .dispatch-entry .dispatch-score {
+            font-family: var(--font-display);
+            font-size: 0.8rem;
+            font-weight: 700;
+            min-width: 30px;
+            text-align: right;
+        }
+
+        .dispatch-actions {
+            display: flex;
+            gap: 4px;
+            margin-top: 6px;
+        }
+
+        .dispatch-actions button {
+            padding: 4px 12px;
+            border-radius: 4px;
+            font-family: var(--font-display);
+            font-size: 0.6rem;
+            font-weight: 600;
+            letter-spacing: 1px;
+            cursor: pointer;
+            transition: all 0.2s;
+            border: 1px solid;
+        }
+
+        .btn-approve {
+            background: rgba(0, 255, 136, 0.1);
+            border-color: rgba(0, 255, 136, 0.4) !important;
+            color: var(--neon-green);
+        }
+
+        .btn-approve:hover {
+            background: rgba(0, 255, 136, 0.25);
+            box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
+        }
+
+        .btn-reject {
+            background: rgba(255, 32, 64, 0.1);
+            border-color: rgba(255, 32, 64, 0.4) !important;
+            color: var(--neon-red);
+        }
+
+        .btn-reject:hover {
+            background: rgba(255, 32, 64, 0.25);
+            box-shadow: 0 0 12px rgba(255, 32, 64, 0.2);
+        }
+
+        .dispatch-config-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            border-bottom: 1px solid rgba(0, 200, 255, 0.05);
+        }
+
+        .dispatch-config-row:last-child {
+            border-bottom: none;
+        }
+
+        .dispatch-config-label {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .toggle-switch {
+            position: relative;
+            width: 42px;
+            height: 22px;
+            cursor: pointer;
+        }
+
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 22px;
+            transition: 0.3s;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+        }
+
+        .toggle-slider::before {
+            content: '';
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            left: 2px;
+            bottom: 2px;
+            background: var(--text-secondary);
+            border-radius: 50%;
+            transition: 0.3s;
+        }
+
+        .toggle-switch input:checked+.toggle-slider {
+            background: rgba(0, 200, 255, 0.3);
+            border-color: var(--cyan);
+        }
+
+        .toggle-switch input:checked+.toggle-slider::before {
+            transform: translateX(20px);
+            background: var(--cyan);
+        }
+
+        .config-input {
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid var(--border-glow);
+            border-radius: 4px;
+            color: var(--text-primary);
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            padding: 6px 10px;
+            width: 100%;
+            transition: border-color 0.3s;
+        }
+
+        .config-input:focus {
+            outline: none;
+            border-color: var(--cyan);
+            box-shadow: 0 0 8px rgba(0, 200, 255, 0.15);
+        }
+
+        .config-input::placeholder {
+            color: var(--text-dim);
+        }
+
+        .cooldown-slider {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 100%;
+            height: 4px;
+            border-radius: 2px;
+            background: rgba(255, 255, 255, 0.1);
+            outline: none;
+            margin: 8px 0;
+        }
+
+        .cooldown-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: var(--cyan);
+            cursor: pointer;
+            box-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
+        }
+
+        .pending-count-badge {
+            background: var(--neon-amber);
+            color: #000;
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            font-weight: 700;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            margin-left: auto;
+        }
+
+        .pending-count-badge.visible {
+            display: flex;
+        }
+
+        .dispatch-status-bar {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 10px;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
+            margin-bottom: 8px;
+        }
+
+        .dispatch-status-bar.configured {
+            background: rgba(0, 255, 136, 0.05);
+            border: 1px solid rgba(0, 255, 136, 0.15);
+            color: var(--neon-green);
+        }
+
+        .dispatch-status-bar.not-configured {
+            background: rgba(255, 170, 0, 0.05);
+            border: 1px solid rgba(255, 170, 0, 0.15);
+            color: var(--neon-amber);
+        }
+
+        .dispatch-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+        }
+
+        .dispatch-dot.online {
+            background: var(--neon-green);
+            box-shadow: 0 0 6px var(--neon-green);
+        }
+
+        .dispatch-dot.offline {
+            background: var(--neon-amber);
+            box-shadow: 0 0 6px var(--neon-amber);
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Red Alert Overlay -->
+    <div class="red-alert-overlay" id="red-alert-overlay"></div>
+    <div class="red-alert-banner" id="red-alert-banner">
+        ⚠ RED ALERT — CRITICAL THREAT DETECTED ⚠
+        <button class="btn btn-secondary" onclick="resetSystem()"
+            style="width: auto; margin-top: 10px; background: rgba(0,0,0,0.5); border: 1px solid #ff2040; color: #ff2040;">RESET
+            SYSTEM</button>
+    </div>
+
+    <!-- SIDEBAR -->
+    <div class="sidebar">
+        <div class="logo">
+            <i data-feather="shield"></i>
+            SENTINEL
+        </div>
+        <div class="version-tag">V15.0 // AI + ETHICS INTEGRATION</div>
+
+        <div class="nav-group">
+            <div class="nav-label">Detection Modules</div>
+            <div class="nav-item active" onclick="toggleModule('movement', this)" id="nav-movement">
+                <i data-feather="activity"></i> Movement
+            </div>
+            <div class="nav-item" onclick="toggleModule('facemask', this)" id="nav-facemask">
+                <i data-feather="eye"></i> Facemask
+            </div>
+            <div class="nav-item" onclick="toggleModule('weapon', this)" id="nav-weapon">
+                <i data-feather="crosshair"></i> Weapon
+            </div>
+            <div class="nav-item" onclick="toggleModule('public_safety', this)" id="nav-public_safety">
+                <i data-feather="users"></i> Public Safety
+            </div>
+            <div class="nav-item" onclick="toggleModule('suspect_journey', this)" id="nav-suspect_journey"
+                style="border-color: rgba(255,255,0,0.3);">
+                <i data-feather="map-pin"></i> Suspect Journey
+            </div>
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Dispatch</div>
+            <div class="nav-item" onclick="openDispatchSettings()" id="nav-dispatch">
+                <i data-feather="bell"></i> Dispatch Settings
+                <span class="pending-count-badge" id="pending-badge">0</span>
+            </div>
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Ethics & AI</div>
+            <div class="nav-item" onclick="openPrivacySettings()">
+                <i data-feather="lock"></i> Privacy Controls
+            </div>
+            <div class="nav-item" onclick="openFairnessMetrics()">
+                <i data-feather="pie-chart"></i> Fairness Metrics
+            </div>
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Grid Layout</div>
+            <div class="nav-item" onclick="setGridLayout('quad')">
+                <i data-feather="grid"></i> 2×2 Grid
+            </div>
+            <div class="nav-item" onclick="setGridLayout('single')">
+                <i data-feather="maximize-2"></i> Single View
+            </div>
+        </div>
+
+        <!-- Audit Log -->
+        <div class="audit-section">
+            <div class="nav-label" style="margin-bottom: 8px;">Operator Log</div>
+            <div class="audit-log-container" id="audit-log-container">
+                <div class="audit-entry">
+                    <div class="audit-time">--:--:--</div>
+                    SYSTEM STANDBY
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="main-content">
+        <!-- Multi-Camera Grid -->
+        <div class="camera-grid" id="camera-grid">
+            <!-- Feed 0 — Primary -->
+            <div class="feed-cell expanded" id="feed-0" onclick="expandFeed(0)">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot"></div>
+                        <span>FEED 01 // PRIMARY</span>
+                    </div>
+                    <div class="feed-status" id="feed-0-status">ACTIVE</div>
+                </div>
+                <img class="feed-stream" id="stream-0" src="/video_feed/0" alt="Feed 0">
+                <button class="expand-btn" onclick="event.stopPropagation(); expandFeed(0)" title="Expand">
+                    <i data-feather="maximize-2"></i>
+                </button>
+                <button class="expand-btn"
+                    style="right:40px; background: rgba(0,200,255,0.2); border-color: var(--cyan);"
+                    onclick="event.stopPropagation(); triggerFeedUpload(0)" title="Upload to this feed">
+                    <i data-feather="upload-cloud"></i>
+                </button>
+            </div>
+
+            <!-- Feed 1 -->
+            <div class="feed-cell" id="feed-1">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 02</span>
+                    </div>
+                    <div class="feed-status" id="feed-1-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-1">
+                    <i data-feather="video-off"></i>
+                    <span>NO SIGNAL</span>
+                    <button class="btn btn-primary"
+                        style="width:auto; margin-top:10px; padding:8px 16px; font-size:0.7rem;"
+                        onclick="event.stopPropagation(); triggerFeedUpload(1)">
+                        <i data-feather="upload-cloud" style="width:14px;height:14px;"></i> UPLOAD CLIP
+                    </button>
+                </div>
+            </div>
+
+            <!-- Feed 2 -->
+            <div class="feed-cell" id="feed-2">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 03</span>
+                    </div>
+                    <div class="feed-status" id="feed-2-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-2">
+                    <i data-feather="video-off"></i>
+                    <span>NO SIGNAL</span>
+                    <button class="btn btn-primary"
+                        style="width:auto; margin-top:10px; padding:8px 16px; font-size:0.7rem;"
+                        onclick="event.stopPropagation(); triggerFeedUpload(2)">
+                        <i data-feather="upload-cloud" style="width:14px;height:14px;"></i> UPLOAD CLIP
+                    </button>
+                </div>
+            </div>
+
+            <!-- Feed 3 -->
+            <div class="feed-cell" id="feed-3">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 04</span>
+                    </div>
+                    <div class="feed-status" id="feed-3-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-3">
+                    <i data-feather="video-off"></i>
+                    <span>NO SIGNAL</span>
+                    <button class="btn btn-primary"
+                        style="width:auto; margin-top:10px; padding:8px 16px; font-size:0.7rem;"
+                        onclick="event.stopPropagation(); triggerFeedUpload(3)">
+                        <i data-feather="upload-cloud" style="width:14px;height:14px;"></i> UPLOAD CLIP
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Hidden file input for per-feed upload -->
+        <input type="file" id="feed-upload-input" style="display: none" accept="video/*,.gif">
+
+
+        <!-- Intel Panel -->
+        <div class="intel-panel">
+            <!-- Suspect Journey -->
+            <div class="card" id="journey-card">
+                <div class="card-header">
+                    <div class="card-title">Suspect Journey</div>
+                    <i data-feather="map" class="card-icon"></i>
+                </div>
+                <div class="audit-log-container" id="journey-container" style="max-height: 250px;">
+                    <div class="audit-entry">
+                        <div class="audit-time">--:--:--</div>
+                        ACTIVATE 'SUSPECT JOURNEY' MODULE TO BEGIN
+                    </div>
+                </div>
+            </div>
+
+            <!-- V15 AI Situational Assessment -->
+            <div class="card" id="ai-assessment-card" style="border-color: var(--cyan);">
+                <div class="card-header">
+                    <div class="card-title">AI Assessment <span id="ai-severity" class="dispatch-badge" style="margin-left:8px;">LOW</span></div>
+                    <i data-feather="cpu" class="card-icon" style="color: var(--cyan);"></i>
+                </div>
+                <div style="font-size: 0.8rem; color: var(--text-primary); margin-bottom: 8px;" id="ai-summary">
+                    System initializing — awaiting first AI assessment.
+                </div>
+                <div style="font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); margin-bottom: 8px;">
+                    <div id="ai-patterns"></div>
+                </div>
+                <div style="padding: 6px; background: rgba(0,200,255,0.1); border-left: 2px solid var(--cyan); font-size: 0.75rem; color: var(--text-primary);" id="ai-action">
+                    Monitor feeds and enable detection modules.
+                </div>
+                <div style="font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-dim); text-align: right; margin-top: 6px;" id="ai-metadata">
+                    Confidence: 0% | Last updated: --:--:--
+                </div>
+            </div>
+
+            <!-- Active Mode -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Active Mode</div>
+                </div>
+                <div class="mode-indicator">
+                    <div class="mode-dot"></div>
+                    <div class="mode-name" id="mode-title">1 MODULE ACTIVE</div>
+                </div>
+            </div>
+
+            <!-- Threat Assessment -->
+            <div class="card" id="threat-card">
+                <div class="card-header">
+                    <div class="card-title">Threat Assessment</div>
+                    <i data-feather="alert-triangle" class="card-icon"></i>
+                </div>
+                <div class="threat-gauge">
+                    <div class="score-ring">
+                        <svg viewBox="0 0 130 130">
+                            <circle class="score-ring-bg" cx="65" cy="65" r="60"></circle>
+                            <circle class="score-ring-fill" id="score-ring-fill" cx="65" cy="65" r="60"></circle>
+                        </svg>
+                        <div class="score-text">
+                            <div class="score-value" id="threat-score">0</div>
+                            <div class="score-label">THREAT LEVEL</div>
+                        </div>
+                    </div>
+                    <div class="status-text" id="status-text">SECURE</div>
+                </div>
+            </div>
+
+            <!-- V15 Explainability Panel -->
+            <div class="card" id="explain-card">
+                <div class="card-header">
+                    <div class="card-title">Threat Explanation</div>
+                    <i data-feather="info" class="card-icon"></i>
+                </div>
+                <div class="audit-log-container" id="explain-container" style="max-height: 150px; background: rgba(0,0,0,0.2);">
+                    <div class="audit-entry">
+                        <span style="color:var(--text-dim);">No active threats contributing to score.</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Live Metrics -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Live Metrics</div>
+                    <i data-feather="bar-chart-2" class="card-icon"></i>
+                </div>
+                <div class="stats-list" id="stats-container">
+                    <div class="stat-row">
+                        <span class="stat-name">System Status</span>
+                        <span class="stat-val">Initializing</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Dispatch Center -->
+            <div class="card" id="dispatch-card">
+                <div class="card-header">
+                    <div class="card-title">Dispatch Center</div>
+                    <i data-feather="send" class="card-icon"></i>
+                </div>
+                <div class="dispatch-status-bar not-configured" id="dispatch-status-bar">
+                    <div class="dispatch-dot offline" id="dispatch-dot"></div>
+                    <span id="dispatch-status-text">TELEGRAM NOT CONFIGURED</span>
+                </div>
+
+                <!-- Pending Approvals -->
+                <div id="pending-section" style="display:none; margin-bottom: 10px;">
+                    <div
+                        style="font-family: var(--font-display); font-size: 0.6rem; color: var(--neon-amber); letter-spacing: 1px; margin-bottom: 6px;">
+                        ⏳ PENDING APPROVAL</div>
+                    <div id="pending-container"></div>
+                </div>
+
+                <!-- Dispatch Log -->
+                <div class="audit-log-container" id="dispatch-log-container" style="max-height: 180px;">
+                    <div class="dispatch-entry">
+                        <div class="dispatch-info">
+                            <div class="audit-time">--:--:--</div>
+                            NO DISPATCH HISTORY
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Quick Actions -->
+                <div style="display: flex; gap: 6px; margin-top: 10px;">
+                    <button class="btn btn-primary" onclick="manualDispatch()"
+                        style="font-size: 0.65rem; padding: 8px;">📡 SEND ALERT</button>
+                    <button class="btn btn-secondary" onclick="testDispatch()"
+                        style="font-size: 0.65rem; padding: 8px;">🧪 TEST</button>
+                    <button class="btn btn-secondary" onclick="openDispatchSettings()"
+                        style="font-size: 0.65rem; padding: 8px;">⚙</button>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Actions</div>
+                </div>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Incident Report</button>
+                <button class="btn btn-secondary" onclick="refreshAuditLog()" style="margin-top: 8px;">Refresh Audit
+                    Log</button>
+                <button class="btn btn-secondary" onclick="resetSystem()"
+                    style="margin-top: 8px; border-color: #ff2040; color: #ff2040;">⚠ SYSTEM RESET</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Report Modal -->
+    <div id="report-modal" class="modal-overlay">
+        <div class="modal-card">
+            <div class="modal-title">Incident Report</div>
+            <div class="modal-subtitle">Generated by Sentinel AI Agent // Gemini 1.5</div>
+            <div class="report-content" id="report-content">Analyzing data stream...</div>
+            <button class="btn btn-secondary" onclick="closeModal()">Dismiss</button>
+        </div>
+    </div>
+
+    <!-- V15 Privacy Settings Modal -->
+    <div id="privacy-modal" class="modal-overlay">
+        <div class="modal-card" style="width: 450px;">
+            <div class="modal-title">🛡 Privacy & Security (D1)</div>
+            <div class="modal-subtitle">Data Protection & Retention Controls</div>
+            
+            <div class="dispatch-config-row">
+                <span class="dispatch-config-label">Auto-Redact Faces (Blur)</span>
+                <label class="toggle-switch">
+                    <input type="checkbox" id="priv-redact" onchange="savePrivacySettings()">
+                    <span class="toggle-slider"></span>
+                </label>
+            </div>
+            
+            <div class="dispatch-config-row" style="flex-direction: column; align-items: flex-start; gap: 6px;">
+                <span class="dispatch-config-label">Data Retention: <span id="retention-display" style="color: var(--cyan);">24h</span></span>
+                <input type="range" class="cooldown-slider" id="priv-retention" min="1" max="168" value="24"
+                    oninput="document.getElementById('retention-display').textContent = this.value + 'h'"
+                    onchange="savePrivacySettings()">
+            </div>
+            
+            <div style="margin-top: 15px; padding: 10px; background: rgba(0,255,136,0.05); border-radius: 4px; font-size: 0.65rem; color: var(--text-dim);">
+                <i data-feather="terminal" style="width:12px; height:12px; vertical-align: middle; margin-right:4px;"></i>
+                Encryption: AES-256 enabled for all audit logs.
+                <br>
+                Purge: Background cleanup runs every 5 minutes.
+            </div>
+
+            <button class="btn btn-secondary" onclick="document.getElementById('privacy-modal').classList.remove('show')" style="margin-top: 15px;">Close</button>
+        </div>
+    </div>
+
+    <!-- V15 Fairness Audit Modal -->
+    <div id="fairness-modal" class="modal-overlay">
+        <div class="modal-card" style="width: 500px;">
+            <div class="modal-title">⚖ Fairness & Bias Audit (D3)</div>
+            <div class="modal-subtitle">Systemic Detection Analysis // Threshold Tuning</div>
+            
+            <div id="fairness-stats-container">
+                <!-- Populated by JS -->
+            </div>
+
+            <div style="margin-top: 15px; padding: 10px; background: rgba(0,200,255,0.05); border-radius: 4px; font-size: 0.65rem; color: var(--text-dim);">
+                <i data-feather="info" style="width:12px; height:12px; vertical-align: middle; margin-right:4px;"></i>
+                Thresholds define minimum model confidence required to trigger a detection. 
+                Higher values reduce false positives (Bias Mitigation).
+            </div>
+
+            <button class="btn btn-secondary" onclick="document.getElementById('fairness-modal').classList.remove('show')" style="margin-top: 15px;">Close</button>
+        </div>
+    </div>
+
+    <!-- Dispatch Settings Modal -->
+    <div id="dispatch-settings-modal" class="modal-overlay">
+        <div class="modal-card" style="width: 480px;">
+            <div class="modal-title">⚙ Dispatch Settings</div>
+            <div class="modal-subtitle">Telegram Bot Integration // Automated Alert System</div>
+
+            <div style="margin-bottom: 16px;">
+                <div class="dispatch-config-row">
+                    <span class="dispatch-config-label">Master Switch</span>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="cfg-enabled" checked onchange="saveDispatchSettings()">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+
+                <div class="dispatch-config-row">
+                    <span class="dispatch-config-label">Auto-Dispatch (skip approval)</span>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="cfg-auto-dispatch" onchange="saveDispatchSettings()">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+
+                <div class="dispatch-config-row" style="flex-direction: column; align-items: flex-start; gap: 6px;">
+                    <span class="dispatch-config-label">Cooldown: <span id="cooldown-display"
+                            style="color: var(--cyan);">60s</span></span>
+                    <input type="range" class="cooldown-slider" id="cfg-cooldown" min="10" max="300" value="60"
+                        oninput="document.getElementById('cooldown-display').textContent = this.value + 's'"
+                        onchange="saveDispatchSettings()">
+                </div>
+            </div>
+
+            <div
+                style="font-family: var(--font-display); font-size: 0.6rem; color: var(--cyan); letter-spacing: 1px; margin-bottom: 10px;">
+                TELEGRAM CONFIGURATION</div>
+
+            <div style="margin-bottom: 10px;">
+                <label style="font-size: 0.7rem; color: var(--text-secondary); display: block; margin-bottom: 4px;">Bot
+                    Token</label>
+                <input type="text" class="config-input" id="cfg-bot-token" placeholder="e.g. 8659917680:AAFHai-..."
+                    style="margin-bottom: 8px;">
+
+                <label style="font-size: 0.7rem; color: var(--text-secondary); display: block; margin-bottom: 4px;">Chat
+                    ID <span style="color: var(--text-dim);">(send /start to your bot, then click
+                        Auto-Detect)</span></label>
+                <div style="display: flex; gap: 6px;">
+                    <input type="text" class="config-input" id="cfg-chat-id" placeholder="e.g. 123456789"
+                        style="flex: 1;">
+                    <button class="btn btn-secondary" onclick="autoDetectChatId()"
+                        style="width: auto; padding: 6px 12px; font-size: 0.65rem;">AUTO-DETECT</button>
+                </div>
+            </div>
+
+            <div style="display: flex; gap: 8px; margin-top: 16px;">
+                <button class="btn btn-primary" onclick="saveTelegramConfig()" style="flex: 1;">SAVE CONFIG</button>
+                <button class="btn btn-primary" onclick="testDispatch()"
+                    style="flex: 1; background: rgba(0, 255, 136, 0.1); border-color: rgba(0, 255, 136, 0.3); color: var(--neon-green);">🧪
+                    SEND TEST</button>
+            </div>
+            <button class="btn btn-secondary" onclick="closeDispatchSettings()" style="margin-top: 8px;">Close</button>
+        </div>
+    </div>
+
+    <!-- ═══════════════════════════════════════════════
+         JAVASCRIPT
+    ═══════════════════════════════════════════════ -->
+    <script>
+        feather.replace();
+
+        // ─── State ───
+        let currentLayout = 'quad'; // 'quad' or 'single'
+        let expandedFeed = 0;
+        let isRedAlert = false;
+
+        // ─── Module Toggling ───
+        const modeTitles = {
+            'movement': 'MOVEMENT ANALYSIS',
+            'facemask': 'FACEMASK DETECTION',
+            'weapon': 'WEAPON DETECTION',
+            'public_safety': 'PUBLIC SAFETY',
+            'suspect_journey': 'SUSPECT JOURNEY'
+        };
+
+        function toggleModule(module, buttonElement) {
+            buttonElement.classList.toggle('active');
+
+            fetch('/toggle_module', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ module: module })
+            })
+                .then(r => r.json())
+                .then(data => {
+                    updateActiveModulesDisplay(data.active_modules);
+                });
+        }
+
+        function updateActiveModulesDisplay(activeModules) {
+            const modeTitle = document.getElementById('mode-title');
+            const count = activeModules.length;
+
+            if (count === 0) {
+                modeTitle.textContent = 'NO MODULES ACTIVE';
+            } else if (count === 1) {
+                modeTitle.textContent = modeTitles[activeModules[0]] || activeModules[0].toUpperCase();
+            } else {
+                modeTitle.textContent = `${count} MODULES ACTIVE`;
+            }
+        }
+
+
+        // ── Per-Feed Upload ──
+        let uploadTargetFeed = 0;
+
+        function triggerFeedUpload(feedId) {
+            uploadTargetFeed = feedId;
+            document.getElementById('feed-upload-input').click();
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
+            const feedInput = document.getElementById('feed-upload-input');
+            if (feedInput) {
+                feedInput.addEventListener('change', function () {
+                    if (this.files[0]) {
+                        const feedId = uploadTargetFeed;
+                        const formData = new FormData();
+                        formData.append('file', this.files[0]);
+
+                        const statusEl = document.getElementById('feed-' + feedId + '-status');
+                        if (statusEl) statusEl.textContent = 'UPLOADING...';
+
+                        fetch('/upload_video/' + feedId, { method: 'POST', body: formData })
+                            .then(r => r.json())
+                            .then(data => {
+                                if (data.success) {
+                                    activateFeedUI(feedId);
+                                    if (statusEl) statusEl.textContent = 'FILE FEED';
+                                }
+                            })
+                            .catch(() => {
+                                if (statusEl) statusEl.textContent = 'UPLOAD FAILED';
+                            });
+
+                        this.value = '';
+                    }
+                });
+            }
+        });
+
+        function activateFeedUI(feedId) {
+            // Hide the "NO SIGNAL" overlay and show the stream
+            const offline = document.getElementById('offline-' + feedId);
+            if (offline) offline.style.display = 'none';
+
+            const cell = document.getElementById('feed-' + feedId);
+            // If no stream img exists yet, create one
+            let img = document.getElementById('stream-' + feedId);
+            if (!img) {
+                img = document.createElement('img');
+                img.className = 'feed-stream';
+                img.id = 'stream-' + feedId;
+                img.alt = 'Feed ' + feedId;
+                cell.appendChild(img);
+            }
+
+            // Force refresh
+            img.src = '';
+            setTimeout(() => {
+                img.src = '/video_feed/' + feedId + '?t=' + Date.now();
+            }, 400);
+
+            // Update the live dot
+            const badge = cell.querySelector('.live-dot');
+            if (badge) {
+                badge.style.background = '';
+                badge.style.boxShadow = '';
+            }
+
+            feather.replace();
+        }
+
+        /**
+         * Force-refresh an MJPEG stream by setting a new src with a cache-buster.
+         * This drops the old HTTP connection and establishes a fresh one.
+         */
+        function refreshFeedStream(feedId) {
+            const img = document.getElementById('stream-' + feedId);
+            if (img) {
+                // Brief blank to visually signal the switch
+                img.src = '';
+                // Small delay lets the backend fully initialize the new feed
+                setTimeout(() => {
+                    img.src = '/video_feed/' + feedId + '?t=' + Date.now();
+                }, 300);
+            }
+        }
+
+        // ─── Grid Layout ───
+        function setGridLayout(layout) {
+            const grid = document.getElementById('camera-grid');
+            currentLayout = layout;
+
+            if (layout === 'single') {
+                grid.classList.add('single-view');
+                // Show only the expanded feed
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === expandedFeed);
+                });
+            } else {
+                grid.classList.remove('single-view');
+                document.querySelectorAll('.feed-cell').forEach(cell => {
+                    cell.classList.remove('expanded');
+                });
+            }
+        }
+
+        function expandFeed(feedId) {
+            expandedFeed = feedId;
+            if (currentLayout === 'single') {
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === feedId);
+                });
+            }
+        }
+
+        // ─── Stats & Red Alert Updates ───
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    const statusEl = document.getElementById('status-text');
+                    const ringFill = document.getElementById('score-ring-fill');
+                    const threatCard = document.getElementById('threat-card');
+
+                    scoreEl.textContent = score;
+
+                    // Compute ring dash offset (circumference = 2 * π * 60 ≈ 377)
+                    const circumference = 377;
+                    const offset = circumference - (circumference * score / 100);
+                    ringFill.style.strokeDashoffset = offset;
+
+                    // Color based on score
+                    let color, status, glow;
+                    if (score >= 80) {
+                        color = '#ff2040';
+                        status = 'CRITICAL';
+                        glow = 'rgba(255, 32, 64, 0.4)';
+                    } else if (score >= 50) {
+                        color = '#ffaa00';
+                        status = 'ELEVATED';
+                        glow = 'rgba(255, 170, 0, 0.3)';
+                    } else if (score >= 25) {
+                        color = '#00d4ff';
+                        status = 'GUARDED';
+                        glow = 'rgba(0, 200, 255, 0.3)';
+                    } else {
+                        color = '#00ff88';
+                        status = 'SECURE';
+                        glow = 'rgba(0, 255, 136, 0.3)';
+                    }
+
+                    statusEl.textContent = status;
+                    statusEl.style.color = color;
+                    statusEl.style.textShadow = `0 0 20px ${glow}`;
+                    ringFill.style.stroke = color;
+                    ringFill.style.filter = `drop-shadow(0 0 8px ${glow})`;
+
+                    // V15 Updates
+                    updateAIAssessment();
+                    updateExplainability();
+
+                    updateJourneyData();
+
+                    // Red Alert state
+                    const alertOverlay = document.getElementById('red-alert-overlay');
+                    const alertBanner = document.getElementById('red-alert-banner');
+                    const feedCells = document.querySelectorAll('.feed-cell');
+
+                    if (data.red_alert) {
+                        alertOverlay.classList.add('active');
+                        alertBanner.classList.add('active');
+                        feedCells.forEach(cell => cell.classList.add('red-alert-active'));
+                        threatCard.style.borderColor = 'rgba(255, 32, 64, 0.5)';
+
+                        if (!isRedAlert) {
+                            playAlertTone();
+                            isRedAlert = true;
+                        }
+                    } else {
+                        alertOverlay.classList.remove('active');
+                        alertBanner.classList.remove('active');
+                        feedCells.forEach(cell => cell.classList.remove('red-alert-active'));
+                        threatCard.style.borderColor = '';
+                        isRedAlert = false;
+                    }
+
+                    // Update mode display
+                    if (data.active_modules) {
+                        updateActiveModulesDisplay(data.active_modules);
+                    }
+
+                    // Update live metrics
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    if (!data.details || Object.keys(data.details).length === 0) {
+                        container.innerHTML = '<div class="stat-row"><span class="stat-name">System Status</span><span class="stat-val">Standby</span></div>';
+                    } else {
+                        for (const [key, value] of Object.entries(data.details)) {
+                            const div = document.createElement('div');
+                            div.className = 'stat-row';
+                            const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            let displayVal = value;
+                            if (typeof value === 'boolean') {
+                                displayVal = value ? '⚠ YES' : 'No';
+                            }
+                            div.innerHTML = `<span class="stat-name">${formattedKey}</span><span class="stat-val">${displayVal}</span>`;
+                            container.appendChild(div);
+                        }
+                    }
+                })
+                .catch(() => { });
+        }
+
+        // ─── Alert Tone (Web Audio API) ───
+        function playAlertTone() {
+            try {
+                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                const oscillator = audioCtx.createOscillator();
+                const gainNode = audioCtx.createGain();
+
+                oscillator.connect(gainNode);
+                gainNode.connect(audioCtx.destination);
+
+                oscillator.type = 'square';
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime);
+                oscillator.frequency.setValueAtTime(660, audioCtx.currentTime + 0.15);
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime + 0.3);
+
+                gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);
+
+                oscillator.start(audioCtx.currentTime);
+                oscillator.stop(audioCtx.currentTime + 0.5);
+            } catch (e) {
+                // Audio not available — silent fallback
+            }
+        }
+
+        // ─── AI Report ───
+        function generateReport() {
+            const modal = document.getElementById('report-modal');
+            modal.classList.add('show');
+            document.getElementById('report-content').textContent = 'ANALYZING DATA STREAM...';
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                })
+                .catch(() => {
+                    document.getElementById('report-content').textContent = 'ERROR: Connection to AI Agent lost.';
+                });
+        }
+
+        function closeModal() {
+            document.getElementById('report-modal').classList.remove('show');
+        }
+
+        // ─── Audit Log Refresh ───
+        function refreshAuditLog() {
+            fetch('/audit_log')
+                .then(r => r.json())
+                .then(data => {
+                    const container = document.getElementById('audit-log-container');
+                    container.innerHTML = '';
+
+                    if (data.log.length === 0) {
+                        container.innerHTML = '<div class="audit-entry"><div class="audit-time">--:--:--</div>NO ENTRIES</div>';
+                        return;
+                    }
+
+                    data.log.slice(0, 30).forEach(entry => {
+                        const div = document.createElement('div');
+                        div.className = `audit-entry severity-${entry.severity}`;
+                        div.innerHTML = `
+                            <div class="audit-time">${entry.timestamp.split(' ')[1] || entry.timestamp}</div>
+                            ${entry.action}: ${entry.details}
+                        `;
+                        container.appendChild(div);
+                    });
+                })
+                .catch(() => { });
+        }
+
+        // ─── System Reset ───
+        function resetSystem() {
+            if (!confirm("⚠ CONFIRM SYSTEM RESET ⚠\n\nThis will clear all tracking history, threat scores, and active alerts.\nThe system will revert to default state.")) {
+                return;
+            }
+
+            fetch('/reset_system', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        // Reload page to refresh all UI states cleanly
+                        window.location.reload();
+                    }
+                });
+        }
+
+        function updateJourneyData() {
+            fetch('/journey_data')
+                .then(r => r.json())
+                .then(data => {
+                    const container = document.getElementById('journey-container');
+                    if (data.length === 0) {
+                        container.innerHTML = '<div class="audit-entry"><div class="audit-time">--:--:--</div>SCANNING...</div>';
+                        return;
+                    }
+
+                    let html = '';
+                    data.forEach(subject => {
+                        const historyHtml = subject.history.map(h => `F${h.feed}`).join(' → ');
+                        html += `
+                            <div class="audit-entry">
+                                <div class="audit-time">${subject.last_seen}</div>
+                                <span style="color:var(--cyan)">SUBJ #${subject.id}</span> [FEED ${subject.last_feed}]
+                                <div style="font-size: 0.6rem; color: var(--text-dim); margin-top:2px;">${historyHtml}</div>
+                            </div>
+                        `;
+                    });
+                    container.innerHTML = html;
+                });
+        }
+
+        // ═══════════════════════════════════════════════════
+        // DISPATCH CENTER
+        // ═══════════════════════════════════════════════════
+
+        function updateDispatchCenter() {
+            fetch('/dispatch_log')
+                .then(r => r.json())
+                .then(data => {
+                    // Update status bar
+                    const statusBar = document.getElementById('dispatch-status-bar');
+                    const statusDot = document.getElementById('dispatch-dot');
+                    const statusText = document.getElementById('dispatch-status-text');
+
+                    if (data.settings.telegram_configured) {
+                        statusBar.className = 'dispatch-status-bar configured';
+                        statusDot.className = 'dispatch-dot online';
+                        const mode = data.settings.auto_dispatch ? 'AUTO' : 'MANUAL';
+                        statusText.textContent = `TELEGRAM ONLINE // ${mode} MODE`;
+                    } else {
+                        statusBar.className = 'dispatch-status-bar not-configured';
+                        statusDot.className = 'dispatch-dot offline';
+                        statusText.textContent = 'TELEGRAM NOT CONFIGURED';
+                    }
+
+                    // Update pending approvals
+                    const pendingSection = document.getElementById('pending-section');
+                    const pendingContainer = document.getElementById('pending-container');
+                    const pendingBadge = document.getElementById('pending-badge');
+
+                    if (data.pending && data.pending.length > 0) {
+                        pendingSection.style.display = 'block';
+                        pendingBadge.textContent = data.pending.length;
+                        pendingBadge.classList.add('visible');
+
+                        let pendingHtml = '';
+                        data.pending.forEach(evt => {
+                            const scoreColor = evt.threat_score >= 80 ? 'var(--neon-red)' :
+                                evt.threat_score >= 50 ? 'var(--neon-amber)' : 'var(--cyan)';
+                            pendingHtml += `
+                                <div class="dispatch-entry pending-entry">
+                                    <div class="dispatch-info">
+                                        <div class="audit-time">${evt.timestamp}</div>
+                                        <span class="dispatch-badge pending">PENDING</span>
+                                        Threat Score: ${evt.threat_score} // ${evt.active_modules.join(', ').toUpperCase()}
+                                        <div class="dispatch-actions">
+                                            <button class="btn-approve" onclick="approveDispatch('${evt.id}')">✓ APPROVE</button>
+                                            <button class="btn-reject" onclick="rejectDispatch('${evt.id}')">✗ REJECT</button>
+                                        </div>
+                                    </div>
+                                    <div class="dispatch-score" style="color: ${scoreColor};">${evt.threat_score}</div>
+                                </div>
+                            `;
+                        });
+                        pendingContainer.innerHTML = pendingHtml;
+                    } else {
+                        pendingSection.style.display = 'none';
+                        pendingBadge.classList.remove('visible');
+                    }
+
+                    // Update dispatch log
+                    const logContainer = document.getElementById('dispatch-log-container');
+                    if (data.log.length === 0 && (!data.pending || data.pending.length === 0)) {
+                        logContainer.innerHTML = '<div class="dispatch-entry"><div class="dispatch-info"><div class="audit-time">--:--:--</div>NO DISPATCH HISTORY</div></div>';
+                    } else {
+                        let logHtml = '';
+                        data.log.slice(0, 15).forEach(evt => {
+                            const badgeClass = evt.status;
+                            const statusLabel = evt.status.toUpperCase();
+                            const scoreColor = evt.threat_score >= 80 ? 'var(--neon-red)' :
+                                evt.threat_score >= 50 ? 'var(--neon-amber)' : 'var(--cyan)';
+                            logHtml += `
+                                <div class="dispatch-entry">
+                                    <div class="dispatch-info">
+                                        <div class="audit-time">${evt.timestamp}</div>
+                                        <span class="dispatch-badge ${badgeClass}">${statusLabel}</span>
+                                        Score: ${evt.threat_score} // ${(evt.active_modules || []).join(', ').toUpperCase() || 'N/A'}
+                                    </div>
+                                    <div class="dispatch-score" style="color: ${scoreColor};">${evt.threat_score}</div>
+                                </div>
+                            `;
+                        });
+                        logContainer.innerHTML = logHtml;
+                    }
+                })
+                .catch(() => { });
+        }
+
+        function approveDispatch(eventId) {
+            fetch('/approve_dispatch/' + eventId, { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    updateDispatchCenter();
+                    if (data.status === 'sent') {
+                        showDispatchToast('✅ Alert dispatched via Telegram');
+                    } else {
+                        showDispatchToast('⚠ Dispatch failed — check Telegram config');
+                    }
+                });
+        }
+
+        function rejectDispatch(eventId) {
+            fetch('/reject_dispatch/' + eventId, { method: 'POST' })
+                .then(r => r.json())
+                .then(() => {
+                    updateDispatchCenter();
+                    showDispatchToast('🔴 Alert rejected');
+                });
+        }
+
+        function manualDispatch() {
+            if (!confirm('📡 DISPATCH ALERT NOW?\n\nThis will send the current threat status to Telegram immediately.')) return;
+            fetch('/dispatch_alert', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        showDispatchToast('✅ Alert dispatched via Telegram');
+                    } else {
+                        showDispatchToast('⚠ ' + (data.error || 'Dispatch failed'));
+                    }
+                    updateDispatchCenter();
+                })
+                .catch(() => showDispatchToast('⚠ Network error'));
+        }
+
+        function testDispatch() {
+            showDispatchToast('🧪 Sending test message...');
+            fetch('/test_dispatch', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.ok) {
+                        showDispatchToast('✅ Test message sent to Telegram!');
+                        updateDispatchCenter();
+                    } else {
+                        showDispatchToast('⚠ ' + (data.error || 'Test failed'));
+                    }
+                })
+                .catch(() => showDispatchToast('⚠ Connection error'));
+        }
+
+        // ─── Dispatch Settings Modal ───
+        function openDispatchSettings() {
+            const modal = document.getElementById('dispatch-settings-modal');
+            modal.classList.add('show');
+
+            // Load current settings
+            fetch('/dispatch_settings')
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('cfg-enabled').checked = data.enabled;
+                    document.getElementById('cfg-auto-dispatch').checked = data.auto_dispatch;
+                    document.getElementById('cfg-cooldown').value = data.cooldown_seconds;
+                    document.getElementById('cooldown-display').textContent = data.cooldown_seconds + 's';
+                    if (data.chat_id) document.getElementById('cfg-chat-id').value = data.chat_id;
+                    // Don't populate bot token for security (show masked version in placeholder)
+                    const tokenInput = document.getElementById('cfg-bot-token');
+                    if (data.bot_token) tokenInput.placeholder = data.bot_token;
+                });
+        }
+
+        function closeDispatchSettings() {
+            document.getElementById('dispatch-settings-modal').classList.remove('show');
+        }
+
+        function saveDispatchSettings() {
+            fetch('/dispatch_settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    enabled: document.getElementById('cfg-enabled').checked,
+                    auto_dispatch: document.getElementById('cfg-auto-dispatch').checked,
+                    cooldown_seconds: parseInt(document.getElementById('cfg-cooldown').value)
+                })
+            }).then(() => updateDispatchCenter());
+        }
+
+        function saveTelegramConfig() {
+            const token = document.getElementById('cfg-bot-token').value.trim();
+            const chatId = document.getElementById('cfg-chat-id').value.trim();
+
+            if (!token && !chatId) {
+                showDispatchToast('⚠ Please enter bot token and/or chat ID');
+                return;
+            }
+
+            const payload = {};
+            if (token) payload.bot_token = token;
+            if (chatId) payload.chat_id = chatId;
+
+            fetch('/dispatch_settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            })
+                .then(r => r.json())
+                .then(() => {
+                    showDispatchToast('✅ Telegram config saved!');
+                    updateDispatchCenter();
+                });
+        }
+
+        function autoDetectChatId() {
+            showDispatchToast('🔍 Scanning for chat ID...');
+            // First save any token that was entered
+            const token = document.getElementById('cfg-bot-token').value.trim();
+            const savePromise = token ?
+                fetch('/dispatch_settings', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ bot_token: token })
+                }) : Promise.resolve();
+
+            savePromise.then(() => {
+                return fetch('/test_dispatch', { method: 'POST' });
+            })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.ok) {
+                        showDispatchToast('✅ Chat ID detected & test sent!');
+                        // Reload settings to show detected chat ID
+                        fetch('/dispatch_settings')
+                            .then(r => r.json())
+                            .then(s => {
+                                if (s.chat_id) document.getElementById('cfg-chat-id').value = s.chat_id;
+                            });
+                    } else {
+                        showDispatchToast('⚠ Could not detect chat ID. Send /start to the bot from Telegram, then try again.');
+                    }
+                })
+                .catch(() => showDispatchToast('⚠ Detection failed'));
+        }
+
+        // ─── Toast Notification ───
+        function showDispatchToast(message) {
+            // Remove existing toast
+            const existing = document.getElementById('dispatch-toast');
+            if (existing) existing.remove();
+
+            const toast = document.createElement('div');
+            toast.id = 'dispatch-toast';
+            toast.textContent = message;
+            toast.style.cssText = `
+                position: fixed;
+                bottom: 24px;
+                right: 24px;
+                background: var(--bg-panel);
+                color: var(--text-primary);
+                font-family: var(--font-mono);
+                font-size: 0.75rem;
+                padding: 12px 20px;
+                border-radius: 8px;
+                border: 1px solid var(--border-glow);
+                box-shadow: 0 4px 30px rgba(0, 200, 255, 0.15);
+                z-index: 12000;
+                animation: fadeIn 0.3s ease;
+                backdrop-filter: blur(10px);
+            `;
+            document.body.appendChild(toast);
+            setTimeout(() => {
+                toast.style.opacity = '0';
+                toast.style.transition = 'opacity 0.3s';
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+
+        // ─── Intervals ───
+        setInterval(updateStats, 1000);
+        setInterval(refreshAuditLog, 5000);
+        setInterval(updateDispatchCenter, 3000);
+
+        // Initial load
+        setTimeout(refreshAuditLog, 1500);
+        setTimeout(updateDispatchCenter, 1000);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard_v2.html

@@ -0,0 +1,624 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SENTINEL - Security Intelligence Platform</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary: #007AFF;
+            --primary-hover: #0051D5;
+            --accent: #FF6B00;
+            --bg-primary: #000000;
+            --bg-secondary: #0A0A0A;
+            --bg-tertiary: #161616;
+            --surface: #1C1C1E;
+            --surface-elevated: #2C2C2E;
+            --text-primary: #FFFFFF;
+            --text-secondary: #98989D;
+            --text-tertiary: #636366;
+            --border: rgba(255, 255, 255, 0.08);
+            --border-hover: rgba(255, 255, 255, 0.15);
+            --danger: #FF453A;
+            --warning: #FF9F0A;
+            --success: #30D158;
+            --shadow: rgba(0, 0, 0, 0.5);
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        /* Sidebar */
+        .sidebar {
+            width: 260px;
+            background: var(--bg-secondary);
+            border-right: 1px solid var(--border);
+            display: flex;
+            flex-direction: column;
+            padding: 24px 16px;
+        }
+
+        .logo {
+            font-size: 20px;
+            font-weight: 700;
+            margin-bottom: 36px;
+            padding: 0 12px;
+            letter-spacing: -0.5px;
+            color: var(--text-primary);
+        }
+
+        .logo span {
+            color: var(--accent);
+            font-weight: 800;
+        }
+
+        .nav-section {
+            margin-bottom: 24px;
+        }
+
+        .nav-label {
+            font-size: 11px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.8px;
+            color: var(--text-tertiary);
+            padding: 0 12px;
+            margin-bottom: 8px;
+        }
+
+        .nav-item {
+            padding: 10px 12px;
+            margin-bottom: 2px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-weight: 500;
+            position: relative;
+        }
+
+        .nav-item:hover {
+            background: var(--surface);
+            color: var(--text-primary);
+        }
+
+        .nav-item.active {
+            background: var(--surface);
+            color: var(--primary);
+        }
+
+        .nav-item.active::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 3px;
+            height: 20px;
+            background: var(--primary);
+            border-radius: 0 2px 2px 0;
+        }
+
+        .nav-icon {
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .nav-icon svg {
+            width: 18px;
+            height: 18px;
+            stroke: currentColor;
+            fill: none;
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+        }
+
+        .spacer {
+            flex: 1;
+        }
+
+        /* Main Content */
+        .main-content {
+            flex: 1;
+            padding: 24px;
+            display: grid;
+            grid-template-columns: 1fr 340px;
+            gap: 24px;
+            overflow: hidden;
+        }
+
+        /* Video Panel */
+        .video-container {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            border: 1px solid var(--border);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .panel-header {
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: var(--bg-secondary);
+        }
+
+        .panel-title {
+            font-size: 15px;
+            font-weight: 600;
+            color: var(--text-primary);
+            letter-spacing: -0.2px;
+        }
+
+        .status-badge {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 5px 10px;
+            border-radius: 6px;
+            font-size: 12px;
+            font-weight: 600;
+            background: rgba(255, 69, 58, 0.15);
+            color: var(--danger);
+        }
+
+        .status-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: var(--danger);
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.4; }
+        }
+
+        .video-wrapper {
+            flex: 1;
+            background: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+
+        #video-stream {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }
+
+        /* Sidebar Panel */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            overflow-y: auto;
+        }
+
+        .intel-panel::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .intel-panel::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .intel-panel::-webkit-scrollbar-thumb {
+            background: var(--surface);
+            border-radius: 3px;
+        }
+
+        .card {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            padding: 20px;
+            border: 1px solid var(--border);
+        }
+
+        .card-header {
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-tertiary);
+            margin-bottom: 16px;
+        }
+
+        /* Threat Score */
+        .threat-score {
+            text-align: center;
+            padding: 12px 0;
+        }
+
+        .score-value {
+            font-size: 72px;
+            font-weight: 700;
+            line-height: 1;
+            letter-spacing: -2px;
+            background: linear-gradient(135deg, var(--success), #00C853);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .score-value.warning {
+            background: linear-gradient(135deg, var(--warning), #FF6D00);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .score-value.danger {
+            background: linear-gradient(135deg, var(--danger), #D50000);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .score-label {
+            margin-top: 8px;
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            letter-spacing: 0.5px;
+        }
+
+        /* Stats */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+        }
+
+        .stat-item {
+            background: var(--surface);
+            padding: 14px;
+            border-radius: 8px;
+            transition: all 0.2s ease;
+        }
+
+        .stat-item:hover {
+            background: var(--surface-elevated);
+        }
+
+        .stat-num {
+            font-size: 24px;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+            color: var(--text-primary);
+        }
+
+        .stat-desc {
+            font-size: 11px;
+            font-weight: 500;
+            color: var(--text-secondary);
+            margin-top: 4px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        /* Buttons */
+        .btn {
+            width: 100%;
+            padding: 11px 16px;
+            border: none;
+            border-radius: 8px;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Inter', sans-serif;
+            transition: all 0.2s ease;
+        }
+
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: var(--primary-hover);
+            transform: translateY(-1px);
+        }
+
+        .btn-primary:active {
+            transform: translateY(0);
+        }
+
+        .btn-secondary {
+            background: var(--surface);
+            color: var(--text-primary);
+            border: 1px solid var(--border);
+        }
+
+        .btn-secondary:hover {
+            background: var(--surface-elevated);
+            border-color: var(--border-hover);
+        }
+
+        .card-description {
+            font-size: 13px;
+            line-height: 1.5;
+            color: var(--text-secondary);
+            margin-bottom: 16px;
+        }
+
+        /* Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.75);
+            backdrop-filter: blur(8px);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .modal-content {
+            background: var(--bg-secondary);
+            width: 500px;
+            max-width: 90%;
+            padding: 28px;
+            border-radius: 16px;
+            border: 1px solid var(--border);
+            box-shadow: 0 20px 60px var(--shadow);
+        }
+
+        .modal-title {
+            font-size: 20px;
+            font-weight: 700;
+            margin-bottom: 20px;
+            letter-spacing: -0.5px;
+        }
+
+        .report-text {
+            white-space: pre-wrap;
+            font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
+            font-size: 13px;
+            color: var(--success);
+            background: var(--surface);
+            padding: 16px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            max-height: 300px;
+            overflow-y: auto;
+            line-height: 1.6;
+        }
+
+        .report-text::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .report-text::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .report-text::-webkit-scrollbar-thumb {
+            background: var(--surface-elevated);
+            border-radius: 3px;
+        }
+
+        input[type="file"] {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="sidebar">
+        <div class="logo">PROJECT <span>SENTINEL</span></div>
+
+        <div class="nav-section">
+            <div class="nav-label">Detection Modes</div>
+            <div class="nav-item active" onclick="setMode('movement', this)">
+                <div class="nav-icon">
+                    <svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+                </div>
+                <span>Movement Analysis</span>
+            </div>
+            <div class="nav-item" onclick="setMode('facemask', this)">
+                <div class="nav-icon">
+                    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+                </div>
+                <span>Facemask Detection</span>
+            </div>
+            <div class="nav-item" onclick="setMode('weapon', this)">
+                <div class="nav-icon">
+                    <svg viewBox="0 0 24 24"><path d="M12 2v20M2 12h20"/></svg>
+                </div>
+                <span>Weapon Detection</span>
+            </div>
+        </div>
+
+        <div class="spacer"></div>
+
+        <div class="nav-section">
+            <div class="nav-label">Video Source</div>
+            <div class="nav-item" onclick="document.getElementById('upload-input').click()">
+                <div class="nav-icon">
+                    <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+                </div>
+                <span>Upload Video</span>
+            </div>
+            <input type="file" id="upload-input" accept="video/*" onchange="handleFileUpload(this)">
+            <div class="nav-item" onclick="setSource('camera')">
+                <div class="nav-icon">
+                    <svg viewBox="0 0 24 24"><path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
+                </div>
+                <span>Live Camera</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="main-content">
+        <div class="video-container">
+            <div class="panel-header">
+                <span class="panel-title" id="mode-title">Movement Analysis Feed</span>
+                <div class="status-badge">
+                    <span class="status-dot"></span>
+                    <span>LIVE</span>
+                </div>
+            </div>
+            <div class="video-wrapper">
+                <img id="video-stream" src="{{ url_for('video_feed') }}" alt="Video Feed">
+            </div>
+        </div>
+
+        <div class="intel-panel">
+            <div class="card">
+                <div class="card-header">Threat Assessment</div>
+                <div class="threat-score">
+                    <div class="score-value" id="threat-score">0</div>
+                    <div class="score-label" id="threat-label">Low Risk</div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">Live Intelligence</div>
+                <div class="stats-grid" id="stats-container">
+                    <!-- Populated by JavaScript -->
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">Report Generation</div>
+                <p class="card-description">
+                    Generate an automated incident report based on current threat assessment data.
+                </p>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Report</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="report-modal" class="modal">
+        <div class="modal-content">
+            <h2 class="modal-title">Incident Report</h2>
+            <div class="report-text" id="report-content">Generating...</div>
+            <button class="btn btn-secondary"
+                onclick="document.getElementById('report-modal').style.display='none'">Close</button>
+        </div>
+    </div>
+
+    <script>
+        function setMode(mode, element) {
+            // Update UI
+            document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
+            element.classList.add('active');
+
+            const titles = {
+                'movement': 'Movement Analysis Feed',
+                'facemask': 'Facemask Detection Feed',
+                'weapon': 'Weapon Detection Feed'
+            };
+            document.getElementById('mode-title').textContent = titles[mode];
+
+            // Call Backend
+            fetch('/set_mode', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ mode: mode })
+            });
+        }
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: source })
+            });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+                fetch('/upload_video', { method: 'POST', body: formData });
+            }
+        }
+
+        function generateReport() {
+            document.getElementById('report-modal').style.display = 'flex';
+            document.getElementById('report-content').textContent = "Analyzing data...";
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                });
+        }
+
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    // Update Score
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    const labelEl = document.getElementById('threat-label');
+                    
+                    scoreEl.textContent = score;
+                    scoreEl.className = 'score-value';
+                    
+                    if (score > 75) {
+                        scoreEl.classList.add('danger');
+                        labelEl.textContent = 'Critical';
+                    } else if (score > 40) {
+                        scoreEl.classList.add('warning');
+                        labelEl.textContent = 'Elevated';
+                    } else {
+                        labelEl.textContent = 'Low Risk';
+                    }
+
+                    // Update Stats Grid
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    for (const [key, value] of Object.entries(data.details)) {
+                        const div = document.createElement('div');
+                        div.className = 'stat-item';
+                        const label = key.replace(/_/g, ' ').split(' ').map(w => 
+                            w.charAt(0).toUpperCase() + w.slice(1)
+                        ).join(' ');
+                        div.innerHTML = `<div class="stat-num">${value}</div><div class="stat-desc">${label}</div>`;
+                        container.appendChild(div);
+                    }
+                });
+        }
+
+        setInterval(updateStats, 1000);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard_v3.html

@@ -0,0 +1,573 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sentinel V3</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        :root {
+            --bg-color: #000000;
+            --sidebar-bg: rgba(28, 28, 30, 0.8);
+            --card-bg: rgba(28, 28, 30, 0.6);
+            --border-color: rgba(255, 255, 255, 0.1);
+            --text-primary: #F5F5F7;
+            --text-secondary: #86868B;
+            --accent-blue: #0A84FF;
+            --accent-red: #FF453A;
+            --accent-green: #30D158;
+            --accent-orange: #FF9F0A;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            -webkit-font-smoothing: antialiased;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* Sidebar */
+        .sidebar {
+            width: 260px;
+            background-color: var(--sidebar-bg);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-right: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            padding: 24px;
+            z-index: 10;
+        }
+
+        .logo {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin-bottom: 40px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-primary);
+            letter-spacing: -0.5px;
+        }
+
+        .nav-group {
+            margin-bottom: 30px;
+        }
+
+        .nav-label {
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--text-secondary);
+            margin-bottom: 10px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .nav-item {
+            padding: 10px 12px;
+            margin-bottom: 4px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+
+        .nav-item:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+            color: var(--text-primary);
+        }
+
+        .nav-item.active {
+            background-color: rgba(10, 132, 255, 0.15);
+            color: var(--accent-blue);
+        }
+
+        .nav-item svg {
+            width: 18px;
+            height: 18px;
+        }
+
+        /* Main Content */
+        .main-content {
+            flex: 1;
+            padding: 24px;
+            display: grid;
+            grid-template-columns: 1fr 360px;
+            gap: 24px;
+            background: radial-gradient(circle at top right, #1a1a1a 0%, #000000 100%);
+        }
+
+        /* Video Feed */
+        .video-container {
+            background-color: var(--card-bg);
+            border-radius: 18px;
+            border: 1px solid var(--border-color);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+        }
+
+        .video-header {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            right: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 5;
+        }
+
+        .mode-badge {
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .live-indicator {
+            width: 8px;
+            height: 8px;
+            background-color: var(--accent-red);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--accent-red);
+            animation: pulse 2s infinite;
+        }
+
+        #video-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000;
+        }
+
+        /* Intelligence Panel */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        .card {
+            background-color: var(--card-bg);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-radius: 18px;
+            padding: 24px;
+            border: 1px solid var(--border-color);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .card-title {
+            font-size: 0.95rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        .threat-meter {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+        .score-circle {
+            width: 140px;
+            height: 140px;
+            border-radius: 50%;
+            border: 4px solid rgba(255, 255, 255, 0.1);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 16px;
+            position: relative;
+        }
+
+        .score-circle::after {
+            content: '';
+            position: absolute;
+            top: -4px;
+            left: -4px;
+            right: -4px;
+            bottom: -4px;
+            border-radius: 50%;
+            border: 4px solid var(--accent-green);
+            border-top-color: transparent;
+            border-left-color: transparent;
+            transform: rotate(-45deg);
+            transition: all 0.5s ease;
+            filter: drop-shadow(0 0 8px rgba(48, 209, 88, 0.3));
+        }
+
+        .score-value {
+            font-size: 3rem;
+            font-weight: 700;
+            line-height: 1;
+            letter-spacing: -1px;
+        }
+
+        .score-label {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            margin-top: 4px;
+        }
+
+        .status-text {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--accent-green);
+        }
+
+        .stats-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px;
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: 12px;
+        }
+
+        .stat-name {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+
+        .stat-val {
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        .btn {
+            width: 100%;
+            padding: 14px;
+            border: none;
+            border-radius: 12px;
+            font-size: 0.95rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-family: inherit;
+        }
+
+        .btn-primary {
+            background-color: var(--accent-blue);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background-color: #0071e3;
+            transform: scale(1.02);
+        }
+
+        .btn-secondary {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: var(--text-primary);
+            margin-top: 10px;
+        }
+
+        .btn-secondary:hover {
+            background-color: rgba(255, 255, 255, 0.15);
+        }
+
+        /* Modal */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(5px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-card {
+            background: #1c1c1e;
+            width: 480px;
+            border-radius: 20px;
+            padding: 30px;
+            border: 1px solid var(--border-color);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .modal-overlay.show .modal-card {
+            transform: scale(1);
+        }
+
+        .report-content {
+            background: #000;
+            padding: 16px;
+            border-radius: 12px;
+            font-family: 'SF Mono', 'Menlo', monospace;
+            font-size: 0.85rem;
+            color: var(--accent-green);
+            margin: 20px 0;
+            line-height: 1.5;
+            border: 1px solid var(--border-color);
+        }
+
+        @keyframes pulse {
+            0% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.5;
+                transform: scale(1.2);
+            }
+
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="sidebar">
+        <div class="logo">
+            <i data-feather="shield"></i>
+            SENTINEL V3
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Detection Modes</div>
+            <div class="nav-item active" onclick="setMode('movement', this)">
+                <i data-feather="activity"></i> Movement
+            </div>
+            <div class="nav-item" onclick="setMode('facemask', this)">
+                <i data-feather="user"></i> Facemask
+            </div>
+            <div class="nav-item" onclick="setMode('weapon', this)">
+                <i data-feather="target"></i> Weapon
+            </div>
+            <div class="nav-item" onclick="setMode('public_safety', this)">
+                <i data-feather="users"></i> Public Safety
+            </div>
+        </div>
+
+        <div class="nav-group" style="margin-top: auto;">
+            <div class="nav-label">Input Source</div>
+            <div class="nav-item" onclick="setSource('camera')">
+                <i data-feather="camera"></i> Live Camera
+            </div>
+            <div class="nav-item" onclick="document.getElementById('upload-input').click()">
+                <i data-feather="upload-cloud"></i> Upload Video
+            </div>
+            <input type="file" id="upload-input" style="display: none" accept="video/*"
+                onchange="handleFileUpload(this)">
+        </div>
+    </div>
+
+    <div class="main-content">
+        <div class="video-container">
+            <div class="video-header">
+                <div class="mode-badge">
+                    <div class="live-indicator"></div>
+                    <span id="mode-title">MOVEMENT ANALYSIS</span>
+                </div>
+            </div>
+            <img id="video-stream" src="{{ url_for('video_feed') }}">
+        </div>
+
+        <div class="intel-panel">
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Threat Assessment</div>
+                    <i data-feather="alert-circle" style="width: 18px; color: var(--text-secondary);"></i>
+                </div>
+                <div class="threat-meter">
+                    <div class="score-circle" id="score-circle">
+                        <div class="score-value" id="threat-score">0</div>
+                        <div class="score-label">RISK LEVEL</div>
+                    </div>
+                    <div class="status-text" id="status-text">SECURE</div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Live Metrics</div>
+                    <i data-feather="bar-chart-2" style="width: 18px; color: var(--text-secondary);"></i>
+                </div>
+                <div class="stats-list" id="stats-container">
+                    <!-- Populated by JS -->
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Actions</div>
+                </div>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Incident Report</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="report-modal" class="modal-overlay">
+        <div class="modal-card">
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 10px;">Incident Report</h2>
+            <p style="color: var(--text-secondary); font-size: 0.9rem;">Generated by Sentinel AI Agent</p>
+            <div class="report-content" id="report-content">Analyzing data stream...</div>
+            <button class="btn btn-secondary" onclick="closeModal()">Dismiss</button>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+
+        function setMode(mode, element) {
+            document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
+            element.classList.add('active');
+
+            const titles = { 
+                'movement': 'MOVEMENT ANALYSIS', 
+                'facemask': 'FACEMASK DETECTION', 
+                'weapon': 'WEAPON DETECTION',
+                'public_safety': 'PUBLIC SAFETY MONITORING'
+            };
+            document.getElementById('mode-title').textContent = titles[mode];
+
+            fetch('/set_mode', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ mode: mode })
+            });
+        }
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: source })
+            });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+                fetch('/upload_video', { method: 'POST', body: formData });
+            }
+        }
+
+        function generateReport() {
+            const modal = document.getElementById('report-modal');
+            modal.classList.add('show');
+            document.getElementById('report-content').textContent = "Analyzing data stream...";
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                });
+        }
+
+        function closeModal() {
+            document.getElementById('report-modal').classList.remove('show');
+        }
+
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    const statusEl = document.getElementById('status-text');
+                    const circle = document.getElementById('score-circle');
+
+                    scoreEl.textContent = score;
+
+                    let color = '#30D158'; // Green
+                    let status = 'SECURE';
+
+                    if (score > 75) {
+                        color = '#FF453A'; // Red
+                        status = 'CRITICAL THREAT';
+                    } else if (score > 40) {
+                        color = '#FF9F0A'; // Orange
+                        status = 'ELEVATED RISK';
+                    }
+
+                    statusEl.textContent = status;
+                    statusEl.style.color = color;
+                    circle.style.setProperty('--accent-green', color); // Hack to update pseudo-element color via variable if I used one, but here I need to update the style rule or use a variable.
+                    // Actually, let's fix the CSS to use a variable for the border color
+                    // The CSS uses var(--accent-green) for the pseudo element. So I can just set that variable on the element.
+                    circle.style.setProperty('--accent-green', color);
+
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    if (Object.keys(data.details).length === 0) {
+                        container.innerHTML = '<div class="stat-row"><span class="stat-name">System Status</span><span class="stat-val">Standby</span></div>';
+                    } else {
+                        for (const [key, value] of Object.entries(data.details)) {
+                            const div = document.createElement('div');
+                            div.className = 'stat-row';
+                            // Format key: replace underscores with spaces and capitalize words
+                            const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            div.innerHTML = `<span class="stat-name">${formattedKey}</span><span class="stat-val">${value}</span>`;
+                            container.appendChild(div);
+                        }
+                    }
+                });
+        }
+
+        setInterval(updateStats, 1000);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard_v4.html

@@ -0,0 +1,573 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sentinel V4</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        :root {
+            --bg-color: #000000;
+            --sidebar-bg: rgba(28, 28, 30, 0.8);
+            --card-bg: rgba(28, 28, 30, 0.6);
+            --border-color: rgba(255, 255, 255, 0.1);
+            --text-primary: #F5F5F7;
+            --text-secondary: #86868B;
+            --accent-blue: #0A84FF;
+            --accent-red: #FF453A;
+            --accent-green: #30D158;
+            --accent-orange: #FF9F0A;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            -webkit-font-smoothing: antialiased;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* Sidebar */
+        .sidebar {
+            width: 260px;
+            background-color: var(--sidebar-bg);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-right: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            padding: 24px;
+            z-index: 10;
+        }
+
+        .logo {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin-bottom: 40px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-primary);
+            letter-spacing: -0.5px;
+        }
+
+        .nav-group {
+            margin-bottom: 30px;
+        }
+
+        .nav-label {
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--text-secondary);
+            margin-bottom: 10px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .nav-item {
+            padding: 10px 12px;
+            margin-bottom: 4px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+
+        .nav-item:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+            color: var(--text-primary);
+        }
+
+        .nav-item.active {
+            background-color: rgba(10, 132, 255, 0.15);
+            color: var(--accent-blue);
+        }
+
+        .nav-item svg {
+            width: 18px;
+            height: 18px;
+        }
+
+        /* Main Content */
+        .main-content {
+            flex: 1;
+            padding: 24px;
+            display: grid;
+            grid-template-columns: 1fr 360px;
+            gap: 24px;
+            background: radial-gradient(circle at top right, #1a1a1a 0%, #000000 100%);
+        }
+
+        /* Video Feed */
+        .video-container {
+            background-color: var(--card-bg);
+            border-radius: 18px;
+            border: 1px solid var(--border-color);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+        }
+
+        .video-header {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            right: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 5;
+        }
+
+        .mode-badge {
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .live-indicator {
+            width: 8px;
+            height: 8px;
+            background-color: var(--accent-red);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--accent-red);
+            animation: pulse 2s infinite;
+        }
+
+        #video-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000;
+        }
+
+        /* Intelligence Panel */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        .card {
+            background-color: var(--card-bg);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-radius: 18px;
+            padding: 24px;
+            border: 1px solid var(--border-color);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .card-title {
+            font-size: 0.95rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        .threat-meter {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+        .score-circle {
+            width: 140px;
+            height: 140px;
+            border-radius: 50%;
+            border: 4px solid rgba(255, 255, 255, 0.1);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 16px;
+            position: relative;
+        }
+
+        .score-circle::after {
+            content: '';
+            position: absolute;
+            top: -4px;
+            left: -4px;
+            right: -4px;
+            bottom: -4px;
+            border-radius: 50%;
+            border: 4px solid var(--accent-green);
+            border-top-color: transparent;
+            border-left-color: transparent;
+            transform: rotate(-45deg);
+            transition: all 0.5s ease;
+            filter: drop-shadow(0 0 8px rgba(48, 209, 88, 0.3));
+        }
+
+        .score-value {
+            font-size: 3rem;
+            font-weight: 700;
+            line-height: 1;
+            letter-spacing: -1px;
+        }
+
+        .score-label {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            margin-top: 4px;
+        }
+
+        .status-text {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--accent-green);
+        }
+
+        .stats-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px;
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: 12px;
+        }
+
+        .stat-name {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+
+        .stat-val {
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        .btn {
+            width: 100%;
+            padding: 14px;
+            border: none;
+            border-radius: 12px;
+            font-size: 0.95rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-family: inherit;
+        }
+
+        .btn-primary {
+            background-color: var(--accent-blue);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background-color: #0071e3;
+            transform: scale(1.02);
+        }
+
+        .btn-secondary {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: var(--text-primary);
+            margin-top: 10px;
+        }
+
+        .btn-secondary:hover {
+            background-color: rgba(255, 255, 255, 0.15);
+        }
+
+        /* Modal */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(5px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-card {
+            background: #1c1c1e;
+            width: 480px;
+            border-radius: 20px;
+            padding: 30px;
+            border: 1px solid var(--border-color);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .modal-overlay.show .modal-card {
+            transform: scale(1);
+        }
+
+        .report-content {
+            background: #000;
+            padding: 16px;
+            border-radius: 12px;
+            font-family: 'SF Mono', 'Menlo', monospace;
+            font-size: 0.85rem;
+            color: var(--accent-green);
+            margin: 20px 0;
+            line-height: 1.5;
+            border: 1px solid var(--border-color);
+        }
+
+        @keyframes pulse {
+            0% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.5;
+                transform: scale(1.2);
+            }
+
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="sidebar">
+        <div class="logo">
+            <i data-feather="shield"></i>
+            SENTINEL V4
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Detection Modes</div>
+            <div class="nav-item active" onclick="setMode('movement', this)">
+                <i data-feather="activity"></i> Movement
+            </div>
+            <div class="nav-item" onclick="setMode('facemask', this)">
+                <i data-feather="user"></i> Facemask
+            </div>
+            <div class="nav-item" onclick="setMode('weapon', this)">
+                <i data-feather="target"></i> Weapon
+            </div>
+            <div class="nav-item" onclick="setMode('public_safety', this)">
+                <i data-feather="users"></i> Public Safety
+            </div>
+        </div>
+
+        <div class="nav-group" style="margin-top: auto;">
+            <div class="nav-label">Input Source</div>
+            <div class="nav-item" onclick="setSource('camera')">
+                <i data-feather="camera"></i> Live Camera
+            </div>
+            <div class="nav-item" onclick="document.getElementById('upload-input').click()">
+                <i data-feather="upload-cloud"></i> Upload Video
+            </div>
+            <input type="file" id="upload-input" style="display: none" accept="video/*"
+                onchange="handleFileUpload(this)">
+        </div>
+    </div>
+
+    <div class="main-content">
+        <div class="video-container">
+            <div class="video-header">
+                <div class="mode-badge">
+                    <div class="live-indicator"></div>
+                    <span id="mode-title">MOVEMENT ANALYSIS</span>
+                </div>
+            </div>
+            <img id="video-stream" src="{{ url_for('video_feed') }}">
+        </div>
+
+        <div class="intel-panel">
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Threat Assessment</div>
+                    <i data-feather="alert-circle" style="width: 18px; color: var(--text-secondary);"></i>
+                </div>
+                <div class="threat-meter">
+                    <div class="score-circle" id="score-circle">
+                        <div class="score-value" id="threat-score">0</div>
+                        <div class="score-label">RISK LEVEL</div>
+                    </div>
+                    <div class="status-text" id="status-text">SECURE</div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Live Metrics</div>
+                    <i data-feather="bar-chart-2" style="width: 18px; color: var(--text-secondary);"></i>
+                </div>
+                <div class="stats-list" id="stats-container">
+                    <!-- Populated by JS -->
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Actions</div>
+                </div>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Incident Report</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="report-modal" class="modal-overlay">
+        <div class="modal-card">
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 10px;">Incident Report</h2>
+            <p style="color: var(--text-secondary); font-size: 0.9rem;">Generated by Sentinel AI Agent</p>
+            <div class="report-content" id="report-content">Analyzing data stream...</div>
+            <button class="btn btn-secondary" onclick="closeModal()">Dismiss</button>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+
+        function setMode(mode, element) {
+            document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
+            element.classList.add('active');
+
+            const titles = { 
+                'movement': 'MOVEMENT ANALYSIS', 
+                'facemask': 'FACEMASK DETECTION', 
+                'weapon': 'WEAPON DETECTION',
+                'public_safety': 'PUBLIC SAFETY MONITORING'
+            };
+            document.getElementById('mode-title').textContent = titles[mode];
+
+            fetch('/set_mode', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ mode: mode })
+            });
+        }
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: source })
+            });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+                fetch('/upload_video', { method: 'POST', body: formData });
+            }
+        }
+
+        function generateReport() {
+            const modal = document.getElementById('report-modal');
+            modal.classList.add('show');
+            document.getElementById('report-content').textContent = "Analyzing data stream...";
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                });
+        }
+
+        function closeModal() {
+            document.getElementById('report-modal').classList.remove('show');
+        }
+
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    const statusEl = document.getElementById('status-text');
+                    const circle = document.getElementById('score-circle');
+
+                    scoreEl.textContent = score;
+
+                    let color = '#30D158'; // Green
+                    let status = 'SECURE';
+
+                    if (score > 75) {
+                        color = '#FF453A'; // Red
+                        status = 'CRITICAL THREAT';
+                    } else if (score > 40) {
+                        color = '#FF9F0A'; // Orange
+                        status = 'ELEVATED RISK';
+                    }
+
+                    statusEl.textContent = status;
+                    statusEl.style.color = color;
+                    circle.style.setProperty('--accent-green', color); // Hack to update pseudo-element color via variable if I used one, but here I need to update the style rule or use a variable.
+                    // Actually, let's fix the CSS to use a variable for the border color
+                    // The CSS uses var(--accent-green) for the pseudo element. So I can just set that variable on the element.
+                    circle.style.setProperty('--accent-green', color);
+
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    if (Object.keys(data.details).length === 0) {
+                        container.innerHTML = '<div class="stat-row"><span class="stat-name">System Status</span><span class="stat-val">Standby</span></div>';
+                    } else {
+                        for (const [key, value] of Object.entries(data.details)) {
+                            const div = document.createElement('div');
+                            div.className = 'stat-row';
+                            // Format key: replace underscores with spaces and capitalize words
+                            const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            div.innerHTML = `<span class="stat-name">${formattedKey}</span><span class="stat-val">${value}</span>`;
+                            container.appendChild(div);
+                        }
+                    }
+                });
+        }
+
+        setInterval(updateStats, 1000);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard_v7.html

@@ -0,0 +1,1386 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SENTINEL V7 — Intelligence Grid</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap"
+        rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        /* ═══════════════════════════════════════════════
+           CSS VARIABLES — SCI-FI PALETTE
+        ═══════════════════════════════════════════════ */
+        :root {
+            --bg-deep: #05080f;
+            --bg-panel: rgba(8, 16, 32, 0.85);
+            --bg-card: rgba(10, 20, 40, 0.7);
+            --border-glow: rgba(0, 200, 255, 0.15);
+            --border-glow-hover: rgba(0, 200, 255, 0.4);
+            --cyan: #00d4ff;
+            --cyan-dim: #0090aa;
+            --neon-green: #00ff88;
+            --neon-red: #ff2040;
+            --neon-amber: #ffaa00;
+            --text-primary: #e0f0ff;
+            --text-secondary: #5a8aaa;
+            --text-dim: #2a4a5a;
+            --scanline-opacity: 0.03;
+            --font-display: 'Orbitron', sans-serif;
+            --font-body: 'Rajdhani', sans-serif;
+            --font-mono: 'Share Tech Mono', monospace;
+        }
+
+        /* ═══════════════════════════════════════════════
+           BASE RESET & BODY
+        ═══════════════════════════════════════════════ */
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-body);
+            background: var(--bg-deep);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* Scanline overlay on body */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: repeating-linear-gradient(0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 4px);
+            pointer-events: none;
+            z-index: 9999;
+        }
+
+        /* ═══════════════════════════════════════════════
+           RED ALERT OVERLAY
+        ═══════════════════════════════════════════════ */
+        .red-alert-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            z-index: 9998;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .red-alert-overlay.active {
+            opacity: 1;
+            animation: red-pulse-border 1s ease-in-out infinite;
+        }
+
+        .red-alert-overlay.active::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 4px solid var(--neon-red);
+            box-shadow: inset 0 0 80px rgba(255, 32, 64, 0.15),
+                0 0 40px rgba(255, 32, 64, 0.3);
+        }
+
+        .red-alert-banner {
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 20, 40, 0.9);
+            color: #fff;
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 4px;
+            padding: 8px 40px;
+            z-index: 10000;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            box-shadow: 0 4px 30px rgba(255, 20, 40, 0.5);
+            display: none;
+            animation: alert-flash 0.8s ease-in-out infinite;
+        }
+
+        .red-alert-banner.active {
+            display: block;
+        }
+
+        @keyframes red-pulse-border {
+
+            0%,
+            100% {
+                opacity: 0.6;
+            }
+
+            50% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes alert-flash {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.6;
+            }
+        }
+
+        /* ═══════════════════════════════════════════════
+           SIDEBAR
+        ═══════════════════════════════════════════════ */
+        .sidebar {
+            width: 260px;
+            min-width: 260px;
+            background: var(--bg-panel);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-right: 1px solid var(--border-glow);
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            z-index: 100;
+            overflow-y: auto;
+        }
+
+        .logo {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--cyan);
+            letter-spacing: 2px;
+        }
+
+        .logo svg {
+            filter: drop-shadow(0 0 6px var(--cyan));
+        }
+
+        .version-tag {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            color: var(--text-dim);
+            margin-bottom: 24px;
+            letter-spacing: 1px;
+        }
+
+        .nav-group {
+            margin-bottom: 20px;
+        }
+
+        .nav-label {
+            font-family: var(--font-display);
+            font-size: 0.6rem;
+            font-weight: 600;
+            color: var(--text-dim);
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .nav-item {
+            padding: 10px 12px;
+            margin-bottom: 3px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.25s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            border: 1px solid transparent;
+        }
+
+        .nav-item:hover {
+            background: rgba(0, 200, 255, 0.05);
+            color: var(--text-primary);
+            border-color: var(--border-glow);
+        }
+
+        .nav-item.active {
+            background: rgba(0, 200, 255, 0.1);
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+            box-shadow: 0 0 15px rgba(0, 200, 255, 0.05);
+        }
+
+        .nav-item svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Audit Log Panel in sidebar */
+        .audit-section {
+            margin-top: auto;
+            flex-shrink: 0;
+        }
+
+        .audit-log-container {
+            max-height: 200px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .audit-log-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .audit-entry {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            padding: 6px 8px;
+            margin-bottom: 2px;
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.3);
+            border-left: 2px solid var(--cyan-dim);
+            line-height: 1.4;
+            color: var(--text-secondary);
+        }
+
+        .audit-entry.severity-WARNING {
+            border-left-color: var(--neon-amber);
+        }
+
+        .audit-entry.severity-CRITICAL {
+            border-left-color: var(--neon-red);
+            color: var(--neon-red);
+        }
+
+        .audit-time {
+            color: var(--text-dim);
+            font-size: 0.6rem;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MAIN CONTENT AREA
+        ═══════════════════════════════════════════════ */
+        .main-content {
+            flex: 1;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: 1fr 320px;
+            gap: 16px;
+            overflow: hidden;
+            background: radial-gradient(ellipse at 20% 0%, rgba(0, 60, 100, 0.15) 0%, transparent 60%),
+                radial-gradient(ellipse at 80% 100%, rgba(0, 40, 80, 0.1) 0%, transparent 60%),
+                var(--bg-deep);
+        }
+
+        /* ═══════════════════════════════════════════════
+           MULTI-CAMERA GRID
+        ═══════════════════════════════════════════════ */
+        .camera-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 8px;
+            height: 100%;
+        }
+
+        .camera-grid.single-view {
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr;
+        }
+
+        .camera-grid.single-view .feed-cell:not(.expanded) {
+            display: none;
+        }
+
+        .feed-cell {
+            background: var(--bg-card);
+            border-radius: 10px;
+            border: 1px solid var(--border-glow);
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .feed-cell:hover {
+            border-color: var(--border-glow-hover);
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.1);
+        }
+
+        .feed-cell.red-alert-active {
+            border-color: var(--neon-red) !important;
+            box-shadow: 0 0 30px rgba(255, 32, 64, 0.3) !important;
+            animation: cell-red-pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes cell-red-pulse {
+
+            0%,
+            100% {
+                box-shadow: 0 0 20px rgba(255, 32, 64, 0.2);
+            }
+
+            50% {
+                box-shadow: 0 0 40px rgba(255, 32, 64, 0.5);
+            }
+        }
+
+        .feed-header {
+            position: absolute;
+            top: 8px;
+            left: 10px;
+            right: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 5;
+            pointer-events: none;
+        }
+
+        .feed-badge {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            font-weight: 400;
+            border: 1px solid var(--border-glow);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--cyan);
+            letter-spacing: 1px;
+        }
+
+        .live-dot {
+            width: 6px;
+            height: 6px;
+            background: var(--neon-red);
+            border-radius: 50%;
+            box-shadow: 0 0 8px var(--neon-red);
+            animation: pulse-dot 2s infinite;
+        }
+
+        @keyframes pulse-dot {
+
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.4;
+                transform: scale(1.3);
+            }
+        }
+
+        .feed-status {
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
+            color: var(--neon-green);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 3px 8px;
+            border-radius: 4px;
+        }
+
+        .feed-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000;
+            display: block;
+        }
+
+        .feed-offline {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--text-dim);
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            letter-spacing: 1px;
+            gap: 8px;
+        }
+
+        .feed-offline svg {
+            width: 24px;
+            height: 24px;
+            color: var(--text-dim);
+        }
+
+        /* Fullscreen expand button */
+        .expand-btn {
+            position: absolute;
+            bottom: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid var(--border-glow);
+            color: var(--cyan);
+            width: 28px;
+            height: 28px;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            z-index: 5;
+            pointer-events: all;
+        }
+
+        .expand-btn:hover {
+            background: rgba(0, 200, 255, 0.15);
+            border-color: var(--cyan);
+        }
+
+        .expand-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        /* ═══════════════════════════════════════════════
+           INTEL PANEL (Right Column)
+        ═══════════════════════════════════════════════ */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .intel-panel::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .intel-panel::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .card {
+            background: var(--bg-card);
+            backdrop-filter: blur(15px);
+            border-radius: 10px;
+            padding: 18px;
+            border: 1px solid var(--border-glow);
+            transition: border-color 0.3s;
+        }
+
+        .card:hover {
+            border-color: var(--border-glow-hover);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 14px;
+        }
+
+        .card-title {
+            font-family: var(--font-display);
+            font-size: 0.65rem;
+            font-weight: 600;
+            color: var(--cyan);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .card-icon {
+            color: var(--text-dim);
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Threat gauge */
+        .threat-gauge {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+        .score-ring {
+            position: relative;
+            width: 130px;
+            height: 130px;
+            margin-bottom: 12px;
+        }
+
+        .score-ring svg {
+            width: 130px;
+            height: 130px;
+            transform: rotate(-90deg);
+        }
+
+        .score-ring-bg {
+            fill: none;
+            stroke: rgba(255, 255, 255, 0.05);
+            stroke-width: 6;
+        }
+
+        .score-ring-fill {
+            fill: none;
+            stroke: var(--neon-green);
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-dasharray: 377;
+            stroke-dashoffset: 377;
+            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+                stroke 0.5s ease;
+            filter: drop-shadow(0 0 8px var(--neon-green));
+        }
+
+        .score-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+        }
+
+        .score-value {
+            font-family: var(--font-display);
+            font-size: 2.2rem;
+            font-weight: 800;
+            line-height: 1;
+            color: var(--text-primary);
+        }
+
+        .score-label {
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            color: var(--text-dim);
+            letter-spacing: 2px;
+            margin-top: 4px;
+        }
+
+        .status-text {
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            color: var(--neon-green);
+            letter-spacing: 3px;
+            text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+            transition: all 0.5s ease;
+        }
+
+        /* Stats */
+        .stats-list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            background: rgba(0, 200, 255, 0.03);
+            border-radius: 6px;
+            border: 1px solid rgba(0, 200, 255, 0.05);
+        }
+
+        .stat-name {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .stat-val {
+            font-family: var(--font-mono);
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        /* Mode indicator */
+        .mode-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 14px;
+            background: rgba(0, 200, 255, 0.05);
+            border-radius: 6px;
+            border: 1px solid var(--border-glow);
+        }
+
+        .mode-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--cyan);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--cyan);
+        }
+
+        .mode-name {
+            font-family: var(--font-display);
+            font-size: 0.7rem;
+            font-weight: 600;
+            letter-spacing: 2px;
+            color: var(--cyan);
+        }
+
+        /* Buttons */
+        .btn {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid var(--border-glow);
+            border-radius: 6px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.25s;
+            font-family: var(--font-display);
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(0, 100, 200, 0.1));
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+        }
+
+        .btn-primary:hover {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.3), rgba(0, 100, 200, 0.2));
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
+            transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.03);
+            color: var(--text-secondary);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.08);
+            color: var(--text-primary);
+        }
+
+        /* ═══════════════════════════════════════════════
+           MODAL
+        ═══════════════════════════════════════════════ */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 11000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-card {
+            background: var(--bg-panel);
+            width: 520px;
+            max-width: 90vw;
+            border-radius: 12px;
+            padding: 28px;
+            border: 1px solid var(--border-glow);
+            box-shadow: 0 0 60px rgba(0, 200, 255, 0.1);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .modal-overlay.show .modal-card {
+            transform: scale(1);
+        }
+
+        .modal-title {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--cyan);
+            letter-spacing: 2px;
+            margin-bottom: 6px;
+        }
+
+        .modal-subtitle {
+            font-family: var(--font-mono);
+            font-size: 0.7rem;
+            color: var(--text-dim);
+            margin-bottom: 16px;
+        }
+
+        .report-content {
+            background: rgba(0, 0, 0, 0.5);
+            padding: 16px;
+            border-radius: 8px;
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            color: var(--neon-green);
+            margin-bottom: 16px;
+            line-height: 1.6;
+            border: 1px solid var(--border-glow);
+            max-height: 300px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MOBILE RESPONSIVE
+        ═══════════════════════════════════════════════ */
+        @media (max-width: 1024px) {
+            .main-content {
+                grid-template-columns: 1fr 280px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            body {
+                flex-direction: column;
+                overflow-y: auto;
+            }
+
+            .sidebar {
+                width: 100%;
+                min-width: 100%;
+                flex-direction: row;
+                flex-wrap: wrap;
+                padding: 10px 16px;
+                gap: 6px;
+                order: 2;
+                border-right: none;
+                border-top: 1px solid var(--border-glow);
+                overflow-y: visible;
+            }
+
+            .logo {
+                width: 100%;
+                margin-bottom: 6px;
+                font-size: 0.85rem;
+            }
+
+            .version-tag {
+                display: none;
+            }
+
+            .nav-group {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 4px;
+                margin-bottom: 0;
+            }
+
+            .nav-label {
+                width: 100%;
+                margin-bottom: 4px;
+            }
+
+            .nav-item {
+                flex: none;
+                padding: 8px 10px;
+                font-size: 0.75rem;
+            }
+
+            .audit-section {
+                display: none;
+            }
+
+            .main-content {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+                order: 1;
+                overflow-y: auto;
+                padding: 10px;
+            }
+
+            .camera-grid {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                min-height: 250px;
+            }
+
+            .feed-cell:not(:first-child) {
+                display: none;
+            }
+
+            .intel-panel {
+                overflow-y: visible;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .sidebar .nav-item {
+                font-size: 0.7rem;
+                padding: 6px 8px;
+                gap: 6px;
+            }
+
+            .sidebar .nav-item svg {
+                width: 14px;
+                height: 14px;
+            }
+
+            .score-ring {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-ring svg {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-value {
+                font-size: 1.6rem;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Red Alert Overlay -->
+    <div class="red-alert-overlay" id="red-alert-overlay"></div>
+    <div class="red-alert-banner" id="red-alert-banner">⚠ RED ALERT — CRITICAL THREAT DETECTED ⚠</div>
+
+    <!-- SIDEBAR -->
+    <div class="sidebar">
+        <div class="logo">
+            <i data-feather="shield"></i>
+            SENTINEL
+        </div>
+        <div class="version-tag">V7.0 // MULTI-CAMERA GRID</div>
+
+        <div class="nav-group">
+            <div class="nav-label">Detection Modules</div>
+            <div class="nav-item active" onclick="setMode('movement', this)" id="nav-movement">
+                <i data-feather="activity"></i> Movement
+            </div>
+            <div class="nav-item" onclick="setMode('facemask', this)" id="nav-facemask">
+                <i data-feather="eye"></i> Facemask
+            </div>
+            <div class="nav-item" onclick="setMode('weapon', this)" id="nav-weapon">
+                <i data-feather="crosshair"></i> Weapon
+            </div>
+            <div class="nav-item" onclick="setMode('public_safety', this)" id="nav-public_safety">
+                <i data-feather="users"></i> Public Safety
+            </div>
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Input Source</div>
+            <div class="nav-item" onclick="setSource('camera')">
+                <i data-feather="video"></i> Live Camera
+            </div>
+            <div class="nav-item" onclick="document.getElementById('upload-input').click()">
+                <i data-feather="upload-cloud"></i> Upload Video
+            </div>
+            <input type="file" id="upload-input" style="display: none" accept="video/*"
+                onchange="handleFileUpload(this)">
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Grid Layout</div>
+            <div class="nav-item" onclick="setGridLayout('quad')">
+                <i data-feather="grid"></i> 2×2 Grid
+            </div>
+            <div class="nav-item" onclick="setGridLayout('single')">
+                <i data-feather="maximize-2"></i> Single View
+            </div>
+        </div>
+
+        <!-- Audit Log -->
+        <div class="audit-section">
+            <div class="nav-label" style="margin-bottom: 8px;">Operator Log</div>
+            <div class="audit-log-container" id="audit-log-container">
+                <div class="audit-entry">
+                    <div class="audit-time">--:--:--</div>
+                    SYSTEM STANDBY
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="main-content">
+        <!-- Multi-Camera Grid -->
+        <div class="camera-grid" id="camera-grid">
+            <!-- Feed 0 — Primary -->
+            <div class="feed-cell expanded" id="feed-0" onclick="expandFeed(0)">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot"></div>
+                        <span>FEED 01 // PRIMARY</span>
+                    </div>
+                    <div class="feed-status" id="feed-0-status">ACTIVE</div>
+                </div>
+                <img class="feed-stream" id="stream-0" src="/video_feed/0" alt="Feed 0">
+                <button class="expand-btn" onclick="event.stopPropagation(); expandFeed(0)" title="Expand">
+                    <i data-feather="maximize-2"></i>
+                </button>
+            </div>
+
+            <!-- Feed 1 -->
+            <div class="feed-cell" id="feed-1">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 02</span>
+                    </div>
+                    <div class="feed-status" id="feed-1-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-1">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 2 -->
+            <div class="feed-cell" id="feed-2">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 03</span>
+                    </div>
+                    <div class="feed-status" id="feed-2-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-2">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 3 -->
+            <div class="feed-cell" id="feed-3">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 04</span>
+                    </div>
+                    <div class="feed-status" id="feed-3-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-3">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+        </div>
+
+        <!-- Intel Panel -->
+        <div class="intel-panel">
+            <!-- Active Mode -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Active Mode</div>
+                </div>
+                <div class="mode-indicator">
+                    <div class="mode-dot"></div>
+                    <div class="mode-name" id="mode-title">MOVEMENT ANALYSIS</div>
+                </div>
+            </div>
+
+            <!-- Threat Assessment -->
+            <div class="card" id="threat-card">
+                <div class="card-header">
+                    <div class="card-title">Threat Assessment</div>
+                    <i data-feather="alert-triangle" class="card-icon"></i>
+                </div>
+                <div class="threat-gauge">
+                    <div class="score-ring">
+                        <svg viewBox="0 0 130 130">
+                            <circle class="score-ring-bg" cx="65" cy="65" r="60"></circle>
+                            <circle class="score-ring-fill" id="score-ring-fill" cx="65" cy="65" r="60"></circle>
+                        </svg>
+                        <div class="score-text">
+                            <div class="score-value" id="threat-score">0</div>
+                            <div class="score-label">THREAT LEVEL</div>
+                        </div>
+                    </div>
+                    <div class="status-text" id="status-text">SECURE</div>
+                </div>
+            </div>
+
+            <!-- Live Metrics -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Live Metrics</div>
+                    <i data-feather="bar-chart-2" class="card-icon"></i>
+                </div>
+                <div class="stats-list" id="stats-container">
+                    <div class="stat-row">
+                        <span class="stat-name">System Status</span>
+                        <span class="stat-val">Initializing</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Actions</div>
+                </div>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Incident Report</button>
+                <button class="btn btn-secondary" onclick="refreshAuditLog()" style="margin-top: 8px;">Refresh Audit
+                    Log</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Report Modal -->
+    <div id="report-modal" class="modal-overlay">
+        <div class="modal-card">
+            <div class="modal-title">Incident Report</div>
+            <div class="modal-subtitle">Generated by Sentinel AI Agent // Gemini 1.5</div>
+            <div class="report-content" id="report-content">Analyzing data stream...</div>
+            <button class="btn btn-secondary" onclick="closeModal()">Dismiss</button>
+        </div>
+    </div>
+
+    <!-- ═══════════════════════════════════════════════
+         JAVASCRIPT
+    ═══════════════════════════════════════════════ -->
+    <script>
+        feather.replace();
+
+        // ─── State ───
+        let currentLayout = 'quad'; // 'quad' or 'single'
+        let expandedFeed = 0;
+        let isRedAlert = false;
+
+        // ─── Mode Switching ───
+        const modeTitles = {
+            'movement': 'MOVEMENT ANALYSIS',
+            'facemask': 'FACEMASK DETECTION',
+            'weapon': 'WEAPON DETECTION',
+            'public_safety': 'PUBLIC SAFETY'
+        };
+
+        function setMode(mode, element) {
+            // Check if already active
+            const isActive = element.classList.contains('active');
+            let targetMode = mode;
+
+            if (isActive) {
+                // Toggle off -> Standby
+                targetMode = 'standby';
+                element.classList.remove('active');
+                document.getElementById('mode-title').textContent = 'SYSTEM STANDBY';
+            } else {
+                // Activate new mode
+                document.querySelectorAll('.nav-group:first-of-type .nav-item').forEach(el => el.classList.remove('active'));
+                element.classList.add('active');
+                document.getElementById('mode-title').textContent = modeTitles[mode] || mode.toUpperCase();
+            }
+
+            fetch('/set_mode', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ mode: targetMode })
+            });
+        }
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: source })
+            })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        // Force the browser to reconnect to the restarted MJPEG stream
+                        refreshFeedStream(0);
+                    }
+                });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+
+                // Show uploading state
+                const statusEl = document.getElementById('feed-0-status');
+                if (statusEl) statusEl.textContent = 'UPLOADING...';
+
+                fetch('/upload_video', { method: 'POST', body: formData })
+                    .then(r => r.json())
+                    .then(data => {
+                        if (data.success) {
+                            // Force the browser to reconnect to the restarted MJPEG stream
+                            refreshFeedStream(0);
+                            if (statusEl) statusEl.textContent = 'FILE FEED';
+                        }
+                    })
+                    .catch(() => {
+                        if (statusEl) statusEl.textContent = 'UPLOAD FAILED';
+                    });
+
+                // Reset file input so the same file can be re-uploaded
+                input.value = '';
+            }
+        }
+
+        /**
+         * Force-refresh an MJPEG stream by setting a new src with a cache-buster.
+         * This drops the old HTTP connection and establishes a fresh one.
+         */
+        function refreshFeedStream(feedId) {
+            const img = document.getElementById('stream-' + feedId);
+            if (img) {
+                // Brief blank to visually signal the switch
+                img.src = '';
+                // Small delay lets the backend fully initialize the new feed
+                setTimeout(() => {
+                    img.src = '/video_feed/' + feedId + '?t=' + Date.now();
+                }, 300);
+            }
+        }
+
+        // ─── Grid Layout ───
+        function setGridLayout(layout) {
+            const grid = document.getElementById('camera-grid');
+            currentLayout = layout;
+
+            if (layout === 'single') {
+                grid.classList.add('single-view');
+                // Show only the expanded feed
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === expandedFeed);
+                });
+            } else {
+                grid.classList.remove('single-view');
+                document.querySelectorAll('.feed-cell').forEach(cell => {
+                    cell.classList.remove('expanded');
+                });
+            }
+        }
+
+        function expandFeed(feedId) {
+            expandedFeed = feedId;
+            if (currentLayout === 'single') {
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === feedId);
+                });
+            }
+        }
+
+        // ─── Stats & Red Alert Updates ───
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    const statusEl = document.getElementById('status-text');
+                    const ringFill = document.getElementById('score-ring-fill');
+                    const threatCard = document.getElementById('threat-card');
+
+                    scoreEl.textContent = score;
+
+                    // Compute ring dash offset (circumference = 2 * π * 60 ≈ 377)
+                    const circumference = 377;
+                    const offset = circumference - (circumference * score / 100);
+                    ringFill.style.strokeDashoffset = offset;
+
+                    // Color based on score
+                    let color, status, glow;
+                    if (score >= 80) {
+                        color = '#ff2040';
+                        status = 'CRITICAL';
+                        glow = 'rgba(255, 32, 64, 0.4)';
+                    } else if (score >= 50) {
+                        color = '#ffaa00';
+                        status = 'ELEVATED';
+                        glow = 'rgba(255, 170, 0, 0.3)';
+                    } else if (score >= 25) {
+                        color = '#00d4ff';
+                        status = 'GUARDED';
+                        glow = 'rgba(0, 200, 255, 0.3)';
+                    } else {
+                        color = '#00ff88';
+                        status = 'SECURE';
+                        glow = 'rgba(0, 255, 136, 0.3)';
+                    }
+
+                    statusEl.textContent = status;
+                    statusEl.style.color = color;
+                    statusEl.style.textShadow = `0 0 20px ${glow}`;
+                    ringFill.style.stroke = color;
+                    ringFill.style.filter = `drop-shadow(0 0 8px ${glow})`;
+
+                    // Red Alert state
+                    const alertOverlay = document.getElementById('red-alert-overlay');
+                    const alertBanner = document.getElementById('red-alert-banner');
+                    const feedCells = document.querySelectorAll('.feed-cell');
+
+                    if (data.red_alert) {
+                        alertOverlay.classList.add('active');
+                        alertBanner.classList.add('active');
+                        feedCells.forEach(cell => cell.classList.add('red-alert-active'));
+                        threatCard.style.borderColor = 'rgba(255, 32, 64, 0.5)';
+
+                        if (!isRedAlert) {
+                            playAlertTone();
+                            isRedAlert = true;
+                        }
+                    } else {
+                        alertOverlay.classList.remove('active');
+                        alertBanner.classList.remove('active');
+                        feedCells.forEach(cell => cell.classList.remove('red-alert-active'));
+                        threatCard.style.borderColor = '';
+                        isRedAlert = false;
+                    }
+
+                    // Update mode display
+                    if (data.mode) {
+                        document.getElementById('mode-title').textContent = modeTitles[data.mode] || data.mode.toUpperCase();
+                    }
+
+                    // Update live metrics
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    if (!data.details || Object.keys(data.details).length === 0) {
+                        container.innerHTML = '<div class="stat-row"><span class="stat-name">System Status</span><span class="stat-val">Standby</span></div>';
+                    } else {
+                        for (const [key, value] of Object.entries(data.details)) {
+                            const div = document.createElement('div');
+                            div.className = 'stat-row';
+                            const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            let displayVal = value;
+                            if (typeof value === 'boolean') {
+                                displayVal = value ? '⚠ YES' : 'No';
+                            }
+                            div.innerHTML = `<span class="stat-name">${formattedKey}</span><span class="stat-val">${displayVal}</span>`;
+                            container.appendChild(div);
+                        }
+                    }
+                })
+                .catch(() => { });
+        }
+
+        // ─── Alert Tone (Web Audio API) ───
+        function playAlertTone() {
+            try {
+                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                const oscillator = audioCtx.createOscillator();
+                const gainNode = audioCtx.createGain();
+
+                oscillator.connect(gainNode);
+                gainNode.connect(audioCtx.destination);
+
+                oscillator.type = 'square';
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime);
+                oscillator.frequency.setValueAtTime(660, audioCtx.currentTime + 0.15);
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime + 0.3);
+
+                gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);
+
+                oscillator.start(audioCtx.currentTime);
+                oscillator.stop(audioCtx.currentTime + 0.5);
+            } catch (e) {
+                // Audio not available — silent fallback
+            }
+        }
+
+        // ─── AI Report ───
+        function generateReport() {
+            const modal = document.getElementById('report-modal');
+            modal.classList.add('show');
+            document.getElementById('report-content').textContent = 'ANALYZING DATA STREAM...';
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                })
+                .catch(() => {
+                    document.getElementById('report-content').textContent = 'ERROR: Connection to AI Agent lost.';
+                });
+        }
+
+        function closeModal() {
+            document.getElementById('report-modal').classList.remove('show');
+        }
+
+        // ─── Audit Log Refresh ───
+        function refreshAuditLog() {
+            fetch('/audit_log')
+                .then(r => r.json())
+                .then(data => {
+                    const container = document.getElementById('audit-log-container');
+                    container.innerHTML = '';
+
+                    if (data.log.length === 0) {
+                        container.innerHTML = '<div class="audit-entry"><div class="audit-time">--:--:--</div>NO ENTRIES</div>';
+                        return;
+                    }
+
+                    data.log.slice(0, 30).forEach(entry => {
+                        const div = document.createElement('div');
+                        div.className = `audit-entry severity-${entry.severity}`;
+                        div.innerHTML = `
+                            <div class="audit-time">${entry.timestamp.split(' ')[1] || entry.timestamp}</div>
+                            ${entry.action}: ${entry.details}
+                        `;
+                        container.appendChild(div);
+                    });
+                })
+                .catch(() => { });
+        }
+
+        // ─── Intervals ───
+        setInterval(updateStats, 1000);
+        setInterval(refreshAuditLog, 5000);
+
+        // Initial load
+        setTimeout(refreshAuditLog, 1500);
+    </script>
+</body>
+
+</html>

templates/sentinel_dashboard_v9.html

@@ -0,0 +1,1385 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SENTINEL V9 — Intelligence Grid</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap"
+        rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        /* ═══════════════════════════════════════════════
+           CSS VARIABLES — SCI-FI PALETTE
+        ═══════════════════════════════════════════════ */
+        :root {
+            --bg-deep: #05080f;
+            --bg-panel: rgba(8, 16, 32, 0.85);
+            --bg-card: rgba(10, 20, 40, 0.7);
+            --border-glow: rgba(0, 200, 255, 0.15);
+            --border-glow-hover: rgba(0, 200, 255, 0.4);
+            --cyan: #00d4ff;
+            --cyan-dim: #0090aa;
+            --neon-green: #00ff88;
+            --neon-red: #ff2040;
+            --neon-amber: #ffaa00;
+            --text-primary: #e0f0ff;
+            --text-secondary: #5a8aaa;
+            --text-dim: #2a4a5a;
+            --scanline-opacity: 0.03;
+            --font-display: 'Orbitron', sans-serif;
+            --font-body: 'Rajdhani', sans-serif;
+            --font-mono: 'Share Tech Mono', monospace;
+        }
+
+        /* ═══════════════════════════════════════════════
+           BASE RESET & BODY
+        ═══════════════════════════════════════════════ */
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-body);
+            background: var(--bg-deep);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* Scanline overlay on body */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: repeating-linear-gradient(0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 2px,
+                    rgba(0, 200, 255, var(--scanline-opacity)) 4px);
+            pointer-events: none;
+            z-index: 9999;
+        }
+
+        /* ═══════════════════════════════════════════════
+           RED ALERT OVERLAY
+        ═══════════════════════════════════════════════ */
+        .red-alert-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            z-index: 9998;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .red-alert-overlay.active {
+            opacity: 1;
+            animation: red-pulse-border 1s ease-in-out infinite;
+        }
+
+        .red-alert-overlay.active::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 4px solid var(--neon-red);
+            box-shadow: inset 0 0 80px rgba(255, 32, 64, 0.15),
+                0 0 40px rgba(255, 32, 64, 0.3);
+        }
+
+        .red-alert-banner {
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 20, 40, 0.9);
+            color: #fff;
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 4px;
+            padding: 8px 40px;
+            z-index: 10000;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            box-shadow: 0 4px 30px rgba(255, 20, 40, 0.5);
+            display: none;
+            animation: alert-flash 0.8s ease-in-out infinite;
+        }
+
+        .red-alert-banner.active {
+            display: block;
+        }
+
+        @keyframes red-pulse-border {
+
+            0%,
+            100% {
+                opacity: 0.6;
+            }
+
+            50% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes alert-flash {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.6;
+            }
+        }
+
+        /* ═══════════════════════════════════════════════
+           SIDEBAR
+        ═══════════════════════════════════════════════ */
+        .sidebar {
+            width: 260px;
+            min-width: 260px;
+            background: var(--bg-panel);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-right: 1px solid var(--border-glow);
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            z-index: 100;
+            overflow-y: auto;
+        }
+
+        .logo {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--cyan);
+            letter-spacing: 2px;
+        }
+
+        .logo svg {
+            filter: drop-shadow(0 0 6px var(--cyan));
+        }
+
+        .version-tag {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            color: var(--text-dim);
+            margin-bottom: 24px;
+            letter-spacing: 1px;
+        }
+
+        .nav-group {
+            margin-bottom: 20px;
+        }
+
+        .nav-label {
+            font-family: var(--font-display);
+            font-size: 0.6rem;
+            font-weight: 600;
+            color: var(--text-dim);
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .nav-item {
+            padding: 10px 12px;
+            margin-bottom: 3px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.25s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            border: 1px solid transparent;
+        }
+
+        .nav-item:hover {
+            background: rgba(0, 200, 255, 0.05);
+            color: var(--text-primary);
+            border-color: var(--border-glow);
+        }
+
+        .nav-item.active {
+            background: rgba(0, 200, 255, 0.1);
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+            box-shadow: 0 0 15px rgba(0, 200, 255, 0.05);
+        }
+
+        .nav-item svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Audit Log Panel in sidebar */
+        .audit-section {
+            margin-top: auto;
+            flex-shrink: 0;
+        }
+
+        .audit-log-container {
+            max-height: 200px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .audit-log-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .audit-log-container::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .audit-entry {
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            padding: 6px 8px;
+            margin-bottom: 2px;
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.3);
+            border-left: 2px solid var(--cyan-dim);
+            line-height: 1.4;
+            color: var(--text-secondary);
+        }
+
+        .audit-entry.severity-WARNING {
+            border-left-color: var(--neon-amber);
+        }
+
+        .audit-entry.severity-CRITICAL {
+            border-left-color: var(--neon-red);
+            color: var(--neon-red);
+        }
+
+        .audit-time {
+            color: var(--text-dim);
+            font-size: 0.6rem;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MAIN CONTENT AREA
+        ═══════════════════════════════════════════════ */
+        .main-content {
+            flex: 1;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: 1fr 320px;
+            gap: 16px;
+            overflow: hidden;
+            background: radial-gradient(ellipse at 20% 0%, rgba(0, 60, 100, 0.15) 0%, transparent 60%),
+                radial-gradient(ellipse at 80% 100%, rgba(0, 40, 80, 0.1) 0%, transparent 60%),
+                var(--bg-deep);
+        }
+
+        /* ═══════════════════════════════════════════════
+           MULTI-CAMERA GRID
+        ═══════════════════════════════════════════════ */
+        .camera-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 8px;
+            height: 100%;
+        }
+
+        .camera-grid.single-view {
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr;
+        }
+
+        .camera-grid.single-view .feed-cell:not(.expanded) {
+            display: none;
+        }
+
+        .feed-cell {
+            background: var(--bg-card);
+            border-radius: 10px;
+            border: 1px solid var(--border-glow);
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .feed-cell:hover {
+            border-color: var(--border-glow-hover);
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.1);
+        }
+
+        .feed-cell.red-alert-active {
+            border-color: var(--neon-red) !important;
+            box-shadow: 0 0 30px rgba(255, 32, 64, 0.3) !important;
+            animation: cell-red-pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes cell-red-pulse {
+
+            0%,
+            100% {
+                box-shadow: 0 0 20px rgba(255, 32, 64, 0.2);
+            }
+
+            50% {
+                box-shadow: 0 0 40px rgba(255, 32, 64, 0.5);
+            }
+        }
+
+        .feed-header {
+            position: absolute;
+            top: 8px;
+            left: 10px;
+            right: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 5;
+            pointer-events: none;
+        }
+
+        .feed-badge {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            font-weight: 400;
+            border: 1px solid var(--border-glow);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--cyan);
+            letter-spacing: 1px;
+        }
+
+        .live-dot {
+            width: 6px;
+            height: 6px;
+            background: var(--neon-red);
+            border-radius: 50%;
+            box-shadow: 0 0 8px var(--neon-red);
+            animation: pulse-dot 2s infinite;
+        }
+
+        @keyframes pulse-dot {
+
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.4;
+                transform: scale(1.3);
+            }
+        }
+
+        .feed-status {
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
+            color: var(--neon-green);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 3px 8px;
+            border-radius: 4px;
+        }
+
+        .feed-stream {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000;
+            display: block;
+        }
+
+        .feed-offline {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--text-dim);
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            letter-spacing: 1px;
+            gap: 8px;
+        }
+
+        .feed-offline svg {
+            width: 24px;
+            height: 24px;
+            color: var(--text-dim);
+        }
+
+        /* Fullscreen expand button */
+        .expand-btn {
+            position: absolute;
+            bottom: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid var(--border-glow);
+            color: var(--cyan);
+            width: 28px;
+            height: 28px;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            z-index: 5;
+            pointer-events: all;
+        }
+
+        .expand-btn:hover {
+            background: rgba(0, 200, 255, 0.15);
+            border-color: var(--cyan);
+        }
+
+        .expand-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        /* ═══════════════════════════════════════════════
+           INTEL PANEL (Right Column)
+        ═══════════════════════════════════════════════ */
+        .intel-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--cyan-dim) transparent;
+        }
+
+        .intel-panel::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .intel-panel::-webkit-scrollbar-thumb {
+            background: var(--cyan-dim);
+            border-radius: 2px;
+        }
+
+        .card {
+            background: var(--bg-card);
+            backdrop-filter: blur(15px);
+            border-radius: 10px;
+            padding: 18px;
+            border: 1px solid var(--border-glow);
+            transition: border-color 0.3s;
+        }
+
+        .card:hover {
+            border-color: var(--border-glow-hover);
+        }
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 14px;
+        }
+
+        .card-title {
+            font-family: var(--font-display);
+            font-size: 0.65rem;
+            font-weight: 600;
+            color: var(--cyan);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        .card-icon {
+            color: var(--text-dim);
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Threat gauge */
+        .threat-gauge {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+        .score-ring {
+            position: relative;
+            width: 130px;
+            height: 130px;
+            margin-bottom: 12px;
+        }
+
+        .score-ring svg {
+            width: 130px;
+            height: 130px;
+            transform: rotate(-90deg);
+        }
+
+        .score-ring-bg {
+            fill: none;
+            stroke: rgba(255, 255, 255, 0.05);
+            stroke-width: 6;
+        }
+
+        .score-ring-fill {
+            fill: none;
+            stroke: var(--neon-green);
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-dasharray: 377;
+            stroke-dashoffset: 377;
+            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+                stroke 0.5s ease;
+            filter: drop-shadow(0 0 8px var(--neon-green));
+        }
+
+        .score-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+        }
+
+        .score-value {
+            font-family: var(--font-display);
+            font-size: 2.2rem;
+            font-weight: 800;
+            line-height: 1;
+            color: var(--text-primary);
+        }
+
+        .score-label {
+            font-family: var(--font-mono);
+            font-size: 0.55rem;
+            color: var(--text-dim);
+            letter-spacing: 2px;
+            margin-top: 4px;
+        }
+
+        .status-text {
+            font-family: var(--font-display);
+            font-size: 0.85rem;
+            font-weight: 700;
+            color: var(--neon-green);
+            letter-spacing: 3px;
+            text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+            transition: all 0.5s ease;
+        }
+
+        /* Stats */
+        .stats-list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            background: rgba(0, 200, 255, 0.03);
+            border-radius: 6px;
+            border: 1px solid rgba(0, 200, 255, 0.05);
+        }
+
+        .stat-name {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .stat-val {
+            font-family: var(--font-mono);
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        /* Mode indicator */
+        .mode-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 14px;
+            background: rgba(0, 200, 255, 0.05);
+            border-radius: 6px;
+            border: 1px solid var(--border-glow);
+        }
+
+        .mode-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--cyan);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--cyan);
+        }
+
+        .mode-name {
+            font-family: var(--font-display);
+            font-size: 0.7rem;
+            font-weight: 600;
+            letter-spacing: 2px;
+            color: var(--cyan);
+        }
+
+        /* Buttons */
+        .btn {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid var(--border-glow);
+            border-radius: 6px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.25s;
+            font-family: var(--font-display);
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(0, 100, 200, 0.1));
+            color: var(--cyan);
+            border-color: rgba(0, 200, 255, 0.3);
+        }
+
+        .btn-primary:hover {
+            background: linear-gradient(135deg, rgba(0, 200, 255, 0.3), rgba(0, 100, 200, 0.2));
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
+            transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.03);
+            color: var(--text-secondary);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.08);
+            color: var(--text-primary);
+        }
+
+        /* ═══════════════════════════════════════════════
+           MODAL
+        ═══════════════════════════════════════════════ */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 11000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-card {
+            background: var(--bg-panel);
+            width: 520px;
+            max-width: 90vw;
+            border-radius: 12px;
+            padding: 28px;
+            border: 1px solid var(--border-glow);
+            box-shadow: 0 0 60px rgba(0, 200, 255, 0.1);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .modal-overlay.show .modal-card {
+            transform: scale(1);
+        }
+
+        .modal-title {
+            font-family: var(--font-display);
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--cyan);
+            letter-spacing: 2px;
+            margin-bottom: 6px;
+        }
+
+        .modal-subtitle {
+            font-family: var(--font-mono);
+            font-size: 0.7rem;
+            color: var(--text-dim);
+            margin-bottom: 16px;
+        }
+
+        .report-content {
+            background: rgba(0, 0, 0, 0.5);
+            padding: 16px;
+            border-radius: 8px;
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            color: var(--neon-green);
+            margin-bottom: 16px;
+            line-height: 1.6;
+            border: 1px solid var(--border-glow);
+            max-height: 300px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
+
+        /* ═══════════════════════════════════════════════
+           MOBILE RESPONSIVE
+        ═══════════════════════════════════════════════ */
+        @media (max-width: 1024px) {
+            .main-content {
+                grid-template-columns: 1fr 280px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            body {
+                flex-direction: column;
+                overflow-y: auto;
+            }
+
+            .sidebar {
+                width: 100%;
+                min-width: 100%;
+                flex-direction: row;
+                flex-wrap: wrap;
+                padding: 10px 16px;
+                gap: 6px;
+                order: 2;
+                border-right: none;
+                border-top: 1px solid var(--border-glow);
+                overflow-y: visible;
+            }
+
+            .logo {
+                width: 100%;
+                margin-bottom: 6px;
+                font-size: 0.85rem;
+            }
+
+            .version-tag {
+                display: none;
+            }
+
+            .nav-group {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 4px;
+                margin-bottom: 0;
+            }
+
+            .nav-label {
+                width: 100%;
+                margin-bottom: 4px;
+            }
+
+            .nav-item {
+                flex: none;
+                padding: 8px 10px;
+                font-size: 0.75rem;
+            }
+
+            .audit-section {
+                display: none;
+            }
+
+            .main-content {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+                order: 1;
+                overflow-y: auto;
+                padding: 10px;
+            }
+
+            .camera-grid {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                min-height: 250px;
+            }
+
+            .feed-cell:not(:first-child) {
+                display: none;
+            }
+
+            .intel-panel {
+                overflow-y: visible;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .sidebar .nav-item {
+                font-size: 0.7rem;
+                padding: 6px 8px;
+                gap: 6px;
+            }
+
+            .sidebar .nav-item svg {
+                width: 14px;
+                height: 14px;
+            }
+
+            .score-ring {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-ring svg {
+                width: 100px;
+                height: 100px;
+            }
+
+            .score-value {
+                font-size: 1.6rem;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Red Alert Overlay -->
+    <div class="red-alert-overlay" id="red-alert-overlay"></div>
+    <div class="red-alert-banner" id="red-alert-banner">⚠ RED ALERT — CRITICAL THREAT DETECTED ⚠</div>
+
+    <!-- SIDEBAR -->
+    <div class="sidebar">
+        <div class="logo">
+            <i data-feather="shield"></i>
+            SENTINEL
+        </div>
+        <div class="version-tag">V9.0 // IMPROVED UI</div>
+
+        <div class="nav-group">
+            <div class="nav-label">Detection Modules</div>
+            <div class="nav-item" onclick="setMode('standby', this)" id="nav-standby">
+                <i data-feather="pause-circle"></i> Standby
+            </div>
+            <div class="nav-item active" onclick="setMode('movement', this)" id="nav-movement">
+                <i data-feather="activity"></i> Movement
+            </div>
+            <div class="nav-item" onclick="setMode('facemask', this)" id="nav-facemask">
+                <i data-feather="eye"></i> Facemask
+            </div>
+            <div class="nav-item" onclick="setMode('weapon', this)" id="nav-weapon">
+                <i data-feather="crosshair"></i> Weapon
+            </div>
+            <div class="nav-item" onclick="setMode('public_safety', this)" id="nav-public_safety">
+                <i data-feather="users"></i> Public Safety
+            </div>
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Input Source</div>
+            <div class="nav-item" onclick="setSource('camera')">
+                <i data-feather="video"></i> Live Camera
+            </div>
+            <div class="nav-item" onclick="document.getElementById('upload-input').click()">
+                <i data-feather="upload-cloud"></i> Upload Video
+            </div>
+            <input type="file" id="upload-input" style="display: none" accept="video/*"
+                onchange="handleFileUpload(this)">
+        </div>
+
+        <div class="nav-group">
+            <div class="nav-label">Grid Layout</div>
+            <div class="nav-item" onclick="setGridLayout('quad')">
+                <i data-feather="grid"></i> 2×2 Grid
+            </div>
+            <div class="nav-item" onclick="setGridLayout('single')">
+                <i data-feather="maximize-2"></i> Single View
+            </div>
+        </div>
+
+        <!-- Audit Log -->
+        <div class="audit-section">
+            <div class="nav-label" style="margin-bottom: 8px;">Operator Log</div>
+            <div class="audit-log-container" id="audit-log-container">
+                <div class="audit-entry">
+                    <div class="audit-time">--:--:--</div>
+                    SYSTEM STANDBY
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="main-content">
+        <!-- Multi-Camera Grid -->
+        <div class="camera-grid" id="camera-grid">
+            <!-- Feed 0 — Primary -->
+            <div class="feed-cell expanded" id="feed-0" onclick="expandFeed(0)">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot"></div>
+                        <span>FEED 01 // PRIMARY</span>
+                    </div>
+                    <div class="feed-status" id="feed-0-status">ACTIVE</div>
+                </div>
+                <img class="feed-stream" id="stream-0" src="/video_feed/0" alt="Feed 0">
+                <button class="expand-btn" onclick="event.stopPropagation(); expandFeed(0)" title="Expand">
+                    <i data-feather="maximize-2"></i>
+                </button>
+            </div>
+
+            <!-- Feed 1 -->
+            <div class="feed-cell" id="feed-1">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 02</span>
+                    </div>
+                    <div class="feed-status" id="feed-1-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-1">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 2 -->
+            <div class="feed-cell" id="feed-2">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 03</span>
+                    </div>
+                    <div class="feed-status" id="feed-2-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-2">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+
+            <!-- Feed 3 -->
+            <div class="feed-cell" id="feed-3">
+                <div class="feed-header">
+                    <div class="feed-badge">
+                        <div class="live-dot" style="background: var(--text-dim); box-shadow: none;"></div>
+                        <span>FEED 04</span>
+                    </div>
+                    <div class="feed-status" id="feed-3-status" style="color: var(--text-dim);">STANDBY</div>
+                </div>
+                <div class="feed-offline" id="offline-3">
+                    <i data-feather="video-off"></i>
+                    NO SIGNAL
+                </div>
+            </div>
+        </div>
+
+        <!-- Intel Panel -->
+        <div class="intel-panel">
+            <!-- Active Mode -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Active Mode</div>
+                </div>
+                <div class="mode-indicator">
+                    <div class="mode-dot"></div>
+                    <div class="mode-name" id="mode-title">MOVEMENT ANALYSIS</div>
+                </div>
+            </div>
+
+            <!-- Threat Assessment -->
+            <div class="card" id="threat-card">
+                <div class="card-header">
+                    <div class="card-title">Threat Assessment</div>
+                    <i data-feather="alert-triangle" class="card-icon"></i>
+                </div>
+                <div class="threat-gauge">
+                    <div class="score-ring">
+                        <svg viewBox="0 0 130 130">
+                            <circle class="score-ring-bg" cx="65" cy="65" r="60"></circle>
+                            <circle class="score-ring-fill" id="score-ring-fill" cx="65" cy="65" r="60"></circle>
+                        </svg>
+                        <div class="score-text">
+                            <div class="score-value" id="threat-score">0</div>
+                            <div class="score-label">THREAT LEVEL</div>
+                        </div>
+                    </div>
+                    <div class="status-text" id="status-text">SECURE</div>
+                </div>
+            </div>
+
+            <!-- Live Metrics -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Live Metrics</div>
+                    <i data-feather="bar-chart-2" class="card-icon"></i>
+                </div>
+                <div class="stats-list" id="stats-container">
+                    <div class="stat-row">
+                        <span class="stat-name">System Status</span>
+                        <span class="stat-val">Initializing</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">Actions</div>
+                </div>
+                <button class="btn btn-primary" onclick="generateReport()">Generate Incident Report</button>
+                <button class="btn btn-secondary" onclick="refreshAuditLog()" style="margin-top: 8px;">Refresh Audit
+                    Log</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Report Modal -->
+    <div id="report-modal" class="modal-overlay">
+        <div class="modal-card">
+            <div class="modal-title">Incident Report</div>
+            <div class="modal-subtitle">Generated by Sentinel AI Agent // Gemini 1.5</div>
+            <div class="report-content" id="report-content">Analyzing data stream...</div>
+            <button class="btn btn-secondary" onclick="closeModal()">Dismiss</button>
+        </div>
+    </div>
+
+    <!-- ═══════════════════════════════════════════════
+         JAVASCRIPT
+    ═══════════════════════════════════════════════ -->
+    <script>
+        feather.replace();
+
+        // ─── State ───
+        let currentLayout = 'quad'; // 'quad' or 'single'
+        let expandedFeed = 0;
+        let isRedAlert = false;
+
+        // ─── Mode Switching ───
+        const modeTitles = {
+            'standby': 'SYSTEM STANDBY',
+            'movement': 'MOVEMENT ANALYSIS',
+            'facemask': 'FACEMASK DETECTION',
+            'weapon': 'WEAPON DETECTION',
+            'public_safety': 'PUBLIC SAFETY'
+        };
+
+        function setMode(mode, element) {
+            // Radio-style selection: always activate the clicked mode
+            // Remove active from all module buttons
+            document.querySelectorAll('.nav-group:first-of-type .nav-item').forEach(el => el.classList.remove('active'));
+            
+            // Add active to the clicked button
+            element.classList.add('active');
+            
+            // Update UI display
+            document.getElementById('mode-title').textContent = modeTitles[mode] || mode.toUpperCase();
+            
+            // Send to backend
+            fetch('/set_mode', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ mode: mode })
+            });
+        }
+
+        function setSource(source) {
+            fetch('/set_source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: source })
+            })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        // Force the browser to reconnect to the restarted MJPEG stream
+                        refreshFeedStream(0);
+                    }
+                });
+        }
+
+        function handleFileUpload(input) {
+            if (input.files[0]) {
+                const formData = new FormData();
+                formData.append('file', input.files[0]);
+
+                // Show uploading state
+                const statusEl = document.getElementById('feed-0-status');
+                if (statusEl) statusEl.textContent = 'UPLOADING...';
+
+                fetch('/upload_video', { method: 'POST', body: formData })
+                    .then(r => r.json())
+                    .then(data => {
+                        if (data.success) {
+                            // Force the browser to reconnect to the restarted MJPEG stream
+                            refreshFeedStream(0);
+                            if (statusEl) statusEl.textContent = 'FILE FEED';
+                        }
+                    })
+                    .catch(() => {
+                        if (statusEl) statusEl.textContent = 'UPLOAD FAILED';
+                    });
+
+                // Reset file input so the same file can be re-uploaded
+                input.value = '';
+            }
+        }
+
+        /**
+         * Force-refresh an MJPEG stream by setting a new src with a cache-buster.
+         * This drops the old HTTP connection and establishes a fresh one.
+         */
+        function refreshFeedStream(feedId) {
+            const img = document.getElementById('stream-' + feedId);
+            if (img) {
+                // Brief blank to visually signal the switch
+                img.src = '';
+                // Small delay lets the backend fully initialize the new feed
+                setTimeout(() => {
+                    img.src = '/video_feed/' + feedId + '?t=' + Date.now();
+                }, 300);
+            }
+        }
+
+        // ─── Grid Layout ───
+        function setGridLayout(layout) {
+            const grid = document.getElementById('camera-grid');
+            currentLayout = layout;
+
+            if (layout === 'single') {
+                grid.classList.add('single-view');
+                // Show only the expanded feed
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === expandedFeed);
+                });
+            } else {
+                grid.classList.remove('single-view');
+                document.querySelectorAll('.feed-cell').forEach(cell => {
+                    cell.classList.remove('expanded');
+                });
+            }
+        }
+
+        function expandFeed(feedId) {
+            expandedFeed = feedId;
+            if (currentLayout === 'single') {
+                document.querySelectorAll('.feed-cell').forEach((cell, i) => {
+                    cell.classList.toggle('expanded', i === feedId);
+                });
+            }
+        }
+
+        // ─── Stats & Red Alert Updates ───
+        function updateStats() {
+            fetch('/stats')
+                .then(r => r.json())
+                .then(data => {
+                    const score = data.threat_score;
+                    const scoreEl = document.getElementById('threat-score');
+                    const statusEl = document.getElementById('status-text');
+                    const ringFill = document.getElementById('score-ring-fill');
+                    const threatCard = document.getElementById('threat-card');
+
+                    scoreEl.textContent = score;
+
+                    // Compute ring dash offset (circumference = 2 * π * 60 ≈ 377)
+                    const circumference = 377;
+                    const offset = circumference - (circumference * score / 100);
+                    ringFill.style.strokeDashoffset = offset;
+
+                    // Color based on score
+                    let color, status, glow;
+                    if (score >= 80) {
+                        color = '#ff2040';
+                        status = 'CRITICAL';
+                        glow = 'rgba(255, 32, 64, 0.4)';
+                    } else if (score >= 50) {
+                        color = '#ffaa00';
+                        status = 'ELEVATED';
+                        glow = 'rgba(255, 170, 0, 0.3)';
+                    } else if (score >= 25) {
+                        color = '#00d4ff';
+                        status = 'GUARDED';
+                        glow = 'rgba(0, 200, 255, 0.3)';
+                    } else {
+                        color = '#00ff88';
+                        status = 'SECURE';
+                        glow = 'rgba(0, 255, 136, 0.3)';
+                    }
+
+                    statusEl.textContent = status;
+                    statusEl.style.color = color;
+                    statusEl.style.textShadow = `0 0 20px ${glow}`;
+                    ringFill.style.stroke = color;
+                    ringFill.style.filter = `drop-shadow(0 0 8px ${glow})`;
+
+                    // Red Alert state
+                    const alertOverlay = document.getElementById('red-alert-overlay');
+                    const alertBanner = document.getElementById('red-alert-banner');
+                    const feedCells = document.querySelectorAll('.feed-cell');
+
+                    if (data.red_alert) {
+                        alertOverlay.classList.add('active');
+                        alertBanner.classList.add('active');
+                        feedCells.forEach(cell => cell.classList.add('red-alert-active'));
+                        threatCard.style.borderColor = 'rgba(255, 32, 64, 0.5)';
+
+                        if (!isRedAlert) {
+                            playAlertTone();
+                            isRedAlert = true;
+                        }
+                    } else {
+                        alertOverlay.classList.remove('active');
+                        alertBanner.classList.remove('active');
+                        feedCells.forEach(cell => cell.classList.remove('red-alert-active'));
+                        threatCard.style.borderColor = '';
+                        isRedAlert = false;
+                    }
+
+                    // Update mode display
+                    if (data.mode) {
+                        document.getElementById('mode-title').textContent = modeTitles[data.mode] || data.mode.toUpperCase();
+                    }
+
+                    // Update live metrics
+                    const container = document.getElementById('stats-container');
+                    container.innerHTML = '';
+
+                    if (!data.details || Object.keys(data.details).length === 0) {
+                        container.innerHTML = '<div class="stat-row"><span class="stat-name">System Status</span><span class="stat-val">Standby</span></div>';
+                    } else {
+                        for (const [key, value] of Object.entries(data.details)) {
+                            const div = document.createElement('div');
+                            div.className = 'stat-row';
+                            const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            let displayVal = value;
+                            if (typeof value === 'boolean') {
+                                displayVal = value ? '⚠ YES' : 'No';
+                            }
+                            div.innerHTML = `<span class="stat-name">${formattedKey}</span><span class="stat-val">${displayVal}</span>`;
+                            container.appendChild(div);
+                        }
+                    }
+                })
+                .catch(() => { });
+        }
+
+        // ─── Alert Tone (Web Audio API) ───
+        function playAlertTone() {
+            try {
+                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                const oscillator = audioCtx.createOscillator();
+                const gainNode = audioCtx.createGain();
+
+                oscillator.connect(gainNode);
+                gainNode.connect(audioCtx.destination);
+
+                oscillator.type = 'square';
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime);
+                oscillator.frequency.setValueAtTime(660, audioCtx.currentTime + 0.15);
+                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime + 0.3);
+
+                gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);
+
+                oscillator.start(audioCtx.currentTime);
+                oscillator.stop(audioCtx.currentTime + 0.5);
+            } catch (e) {
+                // Audio not available — silent fallback
+            }
+        }
+
+        // ─── AI Report ───
+        function generateReport() {
+            const modal = document.getElementById('report-modal');
+            modal.classList.add('show');
+            document.getElementById('report-content').textContent = 'ANALYZING DATA STREAM...';
+
+            fetch('/generate_report', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('report-content').textContent = data.report;
+                })
+                .catch(() => {
+                    document.getElementById('report-content').textContent = 'ERROR: Connection to AI Agent lost.';
+                });
+        }
+
+        function closeModal() {
+            document.getElementById('report-modal').classList.remove('show');
+        }
+
+        // ─── Audit Log Refresh ───
+        function refreshAuditLog() {
+            fetch('/audit_log')
+                .then(r => r.json())
+                .then(data => {
+                    const container = document.getElementById('audit-log-container');
+                    container.innerHTML = '';
+
+                    if (data.log.length === 0) {
+                        container.innerHTML = '<div class="audit-entry"><div class="audit-time">--:--:--</div>NO ENTRIES</div>';
+                        return;
+                    }
+
+                    data.log.slice(0, 30).forEach(entry => {
+                        const div = document.createElement('div');
+                        div.className = `audit-entry severity-${entry.severity}`;
+                        div.innerHTML = `
+                            <div class="audit-time">${entry.timestamp.split(' ')[1] || entry.timestamp}</div>
+                            ${entry.action}: ${entry.details}
+                        `;
+                        container.appendChild(div);
+                    });
+                })
+                .catch(() => { });
+        }
+
+        // ─── Intervals ───
+        setInterval(updateStats, 1000);
+        setInterval(refreshAuditLog, 5000);
+
+        // Initial load
+        setTimeout(refreshAuditLog, 1500);
+    </script>
+</body>
+
+</html>

yolov8n.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f59b3d833e2ff32e194b5bb8e08d211dc7c5bdf144b90d2c8412c47ccfc83b36
+size 6549796