Deploy SentinelEdge demo to HF Spaces

.gitignore

@@ -0,0 +1,6 @@
+__pycache__/
+*.pyc
+node_modules/
+.env
+*.egg-info/
+dist/

Dockerfile

@@ -0,0 +1,43 @@
+# SentinelEdge Demo - Hugging Face Spaces Deployment
+# Serves React frontend + FastAPI backend from a single container
+
+FROM node:20-slim AS frontend-build
+
+WORKDIR /build
+COPY demo/frontend/package.json demo/frontend/package-lock.json* ./
+RUN npm install --production=false
+COPY demo/frontend/ .
+RUN npm run build
+
+# --- Python runtime ---
+FROM python:3.11-slim
+
+# System deps for PyNaCl (libsodium)
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends libsodium-dev && \
+    rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Install only the deps we actually need for the demo (no whisper/pyaudio/onnx)
+COPY requirements-deploy.txt .
+RUN pip install --no-cache-dir -r requirements-deploy.txt
+
+# Copy project code
+COPY sentinel_edge/ sentinel_edge/
+COPY hub/ hub/
+COPY demo/backend/ demo/backend/
+COPY models/ models/
+COPY federated/ federated/
+
+# Copy built frontend into a static dir the backend will serve
+COPY --from=frontend-build /build/dist /app/static
+
+# Copy the deployment server entrypoint
+COPY deploy_server.py .
+
+# HF Spaces expects port 7860
+ENV PORT=7860
+EXPOSE 7860
+
+CMD ["python", "deploy_server.py"]

README.md

@@ -1,12 +1,15 @@
 ---
 title: SentinelEdge
-emoji: 📊
-colorFrom: red
-colorTo: gray
+emoji: 🛡️
+colorFrom: green
+colorTo: blue
 sdk: docker
+app_port: 7860
 pinned: false
 license: mit
 short_description: Federated Edge AI for Real-Time Phone Call Fraud Detection
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# SentinelEdge Demo
+
+Real-time phone call fraud detection powered by federated edge AI. Try the interactive demo to see how SentinelEdge analyzes phone calls in real-time and detects scam patterns.

demo/backend/audio_streamer.py

@@ -0,0 +1,185 @@
+"""Stream audio files through the detection pipeline.
+
+Reads WAV files and yields fixed-duration chunks of audio samples,
+simulating real-time microphone input for the fraud-detection pipeline.
+"""
+
+from __future__ import annotations
+
+import io
+import wave
+from pathlib import Path
+
+import numpy as np
+
+
+class AudioStreamer:
+    """Reads a WAV file and streams chunks to simulate real-time audio.
+
+    Parameters
+    ----------
+    sample_rate : int
+        Expected sample rate of the input WAV files (default 16 kHz).
+    """
+
+    def __init__(self, sample_rate: int = 16_000) -> None:
+        self.sample_rate = sample_rate
+
+    # ------------------------------------------------------------------
+    # Public API
+    # ------------------------------------------------------------------
+
+    def stream_file(
+        self, wav_path: str, chunk_duration: float = 1.0
+    ):
+        """Generator that yields audio chunks from a WAV file.
+
+        Each chunk is *chunk_duration* seconds of float32 audio normalised
+        to the range ``[-1, 1]``.  The final chunk may be shorter than the
+        requested duration.
+
+        Parameters
+        ----------
+        wav_path : str
+            Path to a 16-bit PCM WAV file.
+        chunk_duration : float
+            Duration of each chunk in seconds.
+
+        Yields
+        ------
+        np.ndarray
+            1-D float32 array of audio samples.
+
+        Raises
+        ------
+        FileNotFoundError
+            If *wav_path* does not exist.
+        ValueError
+            If the WAV file has an unexpected sample rate.
+        """
+        path = Path(wav_path)
+        if not path.exists():
+            raise FileNotFoundError(f"WAV file not found: {wav_path}")
+
+        with wave.open(str(path), "rb") as wf:
+            n_channels = wf.getnchannels()
+            sampwidth = wf.getsampwidth()
+            framerate = wf.getframerate()
+            n_frames = wf.getnframes()
+
+            if framerate != self.sample_rate:
+                raise ValueError(
+                    f"Expected sample rate {self.sample_rate}, "
+                    f"got {framerate} in {wav_path}"
+                )
+
+            chunk_frames = int(chunk_duration * framerate)
+
+            frames_read = 0
+            while frames_read < n_frames:
+                to_read = min(chunk_frames, n_frames - frames_read)
+                raw_bytes = wf.readframes(to_read)
+                frames_read += to_read
+
+                # Convert raw bytes to numpy float32
+                audio = self._bytes_to_float32(
+                    raw_bytes, n_channels=n_channels, sampwidth=sampwidth
+                )
+                yield audio
+
+    def generate_silence(self, duration: float) -> np.ndarray:
+        """Generate silent audio.
+
+        Parameters
+        ----------
+        duration : float
+            Duration in seconds.
+
+        Returns
+        -------
+        np.ndarray
+            1-D float32 zero array.
+        """
+        return np.zeros(int(duration * self.sample_rate), dtype=np.float32)
+
+    def generate_tone(
+        self,
+        frequency: float = 440.0,
+        duration: float = 1.0,
+        amplitude: float = 0.5,
+    ) -> np.ndarray:
+        """Generate a simple sine-wave tone (useful for testing).
+
+        Parameters
+        ----------
+        frequency : float
+            Tone frequency in Hz.
+        duration : float
+            Duration in seconds.
+        amplitude : float
+            Peak amplitude (0.0 -- 1.0).
+
+        Returns
+        -------
+        np.ndarray
+            1-D float32 sine wave.
+        """
+        n_samples = int(duration * self.sample_rate)
+        t = np.linspace(0, duration, n_samples, dtype=np.float32)
+        return np.float32(amplitude) * np.sin(
+            np.float32(2.0 * np.pi * frequency) * t
+        )
+
+    # ------------------------------------------------------------------
+    # Internals
+    # ------------------------------------------------------------------
+
+    @staticmethod
+    def _bytes_to_float32(
+        raw_bytes: bytes,
+        n_channels: int = 1,
+        sampwidth: int = 2,
+    ) -> np.ndarray:
+        """Convert raw WAV bytes to a mono float32 array in ``[-1, 1]``.
+
+        Parameters
+        ----------
+        raw_bytes : bytes
+            Raw PCM bytes from ``wave.readframes()``.
+        n_channels : int
+            Number of audio channels (1 = mono, 2 = stereo).
+        sampwidth : int
+            Sample width in bytes (1, 2, or 4).
+
+        Returns
+        -------
+        np.ndarray
+            1-D float32 array normalised to ``[-1.0, 1.0]``.
+        """
+        if sampwidth == 1:
+            dtype = np.uint8
+            max_val = 128.0
+            offset = 128.0  # unsigned 8-bit
+        elif sampwidth == 2:
+            dtype = np.int16
+            max_val = 32768.0
+            offset = 0.0
+        elif sampwidth == 4:
+            dtype = np.int32
+            max_val = 2_147_483_648.0
+            offset = 0.0
+        else:
+            raise ValueError(f"Unsupported sample width: {sampwidth}")
+
+        samples = np.frombuffer(raw_bytes, dtype=dtype).astype(np.float32)
+
+        if offset != 0.0:
+            samples = samples - offset
+
+        samples = samples / max_val
+
+        # Mix to mono if stereo
+        if n_channels > 1:
+            samples = samples.reshape(-1, n_channels).mean(axis=1)
+
+        return samples

demo/backend/live_mic.py

@@ -0,0 +1,212 @@
+"""Live microphone audio capture for demo.
+
+Provides a thread-safe audio capture interface that reads from the system
+microphone via PyAudio and exposes chunks through a queue.  This allows
+the WebSocket server to ingest live audio without blocking the event loop.
+
+Note: PyAudio (``pip install pyaudio``) is required for live capture.
+It is an optional dependency -- the demo works fine with pre-recorded
+transcripts when PyAudio is not installed.
+"""
+
+from __future__ import annotations
+
+import queue
+import threading
+import time
+from typing import Optional
+
+import numpy as np
+
+
+class LiveMicCapture:
+    """Capture audio from the system microphone.
+
+    Parameters
+    ----------
+    sample_rate : int
+        Audio sample rate in Hz (default 16 kHz for Whisper).
+    chunk_size : int
+        Number of frames per read from the audio device.
+    channels : int
+        Number of audio channels (1 = mono).
+    """
+
+    def __init__(
+        self,
+        sample_rate: int = 16_000,
+        chunk_size: int = 1024,
+        channels: int = 1,
+        input_device: str | int | None = None,
+    ) -> None:
+        self.sample_rate = sample_rate
+        self.chunk_size = chunk_size
+        self.channels = channels
+        self.input_device = input_device
+        self.audio_queue: queue.Queue[np.ndarray] = queue.Queue()
+        self._running = False
+        self._thread: Optional[threading.Thread] = None
+        self._stream = None
+        self._pyaudio_instance = None
+        self._backend: str | None = None
+
+    # ------------------------------------------------------------------
+    # Public API
+    # ------------------------------------------------------------------
+
+    def start(self) -> None:
+        """Start capturing audio in a background thread.
+
+        Uses PyAudio when available, otherwise falls back to sounddevice.
+
+        Raises
+        ------
+        ImportError
+            If neither PyAudio nor sounddevice is installed.
+        RuntimeError
+            If the capture is already running.
+        """
+        if self._running:
+            raise RuntimeError("Capture is already running")
+
+        try:
+            import pyaudio  # noqa: F401
+            self._backend = "pyaudio"
+        except ImportError:
+            try:
+                import sounddevice  # noqa: F401
+                self._backend = "sounddevice"
+            except ImportError as exc:
+                raise ImportError(
+                    "Live microphone capture requires PyAudio or sounddevice. "
+                    "Install one with: pip install pyaudio  OR  pip install sounddevice"
+                ) from exc
+
+        self._running = True
+        self._thread = threading.Thread(
+            target=self._capture_loop, daemon=True, name="mic-capture"
+        )
+        self._thread.start()
+
+    def stop(self) -> None:
+        """Stop capturing and release the audio device."""
+        self._running = False
+        if self._thread is not None:
+            self._thread.join(timeout=3.0)
+            self._thread = None
+
+    def get_chunk(self, timeout: float = 1.0) -> Optional[np.ndarray]:
+        """Get next audio chunk from the queue.
+
+        Parameters
+        ----------
+        timeout : float
+            Maximum seconds to wait for a chunk.
+
+        Returns
+        -------
+        np.ndarray or None
+            Float32 audio chunk, or ``None`` if the timeout expired.
+        """
+        try:
+            return self.audio_queue.get(timeout=timeout)
+        except queue.Empty:
+            return None
+
+    def drain_queue(self) -> None:
+        """Drop any buffered audio chunks currently waiting in the queue."""
+        while True:
+            try:
+                self.audio_queue.get_nowait()
+            except queue.Empty:
+                break
+
+    @property
+    def is_running(self) -> bool:
+        """Whether the capture loop is active."""
+        return self._running
+
+    # ------------------------------------------------------------------
+    # Internals
+    # ------------------------------------------------------------------
+
+    def _capture_loop(self) -> None:
+        """Background thread that reads from the microphone.
+
+        Opens an input stream (PyAudio or sounddevice), reads chunks,
+        and puts float32 audio on the queue for the main application
+        to consume.
+        """
+        if self._backend == "sounddevice":
+            self._capture_loop_sounddevice()
+            return
+
+        import pyaudio
+
+        pa = pyaudio.PyAudio()
+        self._pyaudio_instance = pa
+
+        try:
+            stream = pa.open(
+                format=pyaudio.paInt16,
+                channels=self.channels,
+                rate=self.sample_rate,
+                input=True,
+                frames_per_buffer=self.chunk_size,
+                input_device_index=(self.input_device if isinstance(self.input_device, int) else None),
+            )
+            self._stream = stream
+
+            while self._running:
+                try:
+                    raw_data = stream.read(
+                        self.chunk_size, exception_on_overflow=False
+                    )
+                except OSError:
+                    # Audio device error -- skip this chunk
+                    continue
+
+                # Convert int16 bytes to float32 in [-1, 1]
+                audio = (
+                    np.frombuffer(raw_data, dtype=np.int16).astype(np.float32)
+                    / 32768.0
+                )
+                self.audio_queue.put(audio)
+
+        finally:
+            if self._stream is not None:
+                try:
+                    self._stream.stop_stream()
+                    self._stream.close()
+                except OSError:
+                    pass
+                self._stream = None
+
+            pa.terminate()
+            self._pyaudio_instance = None
+
+    def _capture_loop_sounddevice(self) -> None:
+        """Capture loop implemented with sounddevice InputStream."""
+        import sounddevice as sd
+
+        def _callback(indata, frames, _time_info, status):
+            if status:
+                return
+            # sounddevice already provides float32 in [-1, 1] when dtype=float32
+            audio = np.asarray(indata[:, 0], dtype=np.float32).copy()
+            self.audio_queue.put(audio)
+
+        try:
+            with sd.InputStream(
+                samplerate=self.sample_rate,
+                channels=self.channels,
+                dtype="float32",
+                blocksize=self.chunk_size,
+                device=self.input_device,
+                callback=_callback,
+            ) as stream:
+                self._stream = stream
+                while self._running:
+                    time.sleep(0.05)
+        finally:
+            self._stream = None

demo/backend/main.py

@@ -0,0 +1,1389 @@
+"""SentinelEdge Demo Backend - Real-time fraud detection server."""
+
+import asyncio
+import json
+import re
+import time
+import os
+import sys
+import re
+import urllib.request
+import urllib.error
+import numpy as np
+from pathlib import Path
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi.middleware.cors import CORSMiddleware
+import uvicorn
+
+# Load environment variables from .env file if present
+try:
+    from dotenv import load_dotenv
+    load_dotenv()
+except ImportError:
+    pass  # python-dotenv not installed, use system env vars only
+
+# Add project root to path so sentinel_edge package is importable
+_PROJECT_ROOT = str(Path(__file__).resolve().parent.parent.parent)
+if _PROJECT_ROOT not in sys.path:
+    sys.path.insert(0, _PROJECT_ROOT)
+
+app = FastAPI(title="SentinelEdge Demo", version="0.1.0")
+
+INTERACTIVE_REPLY_TIMEOUT_SECONDS = 15.0
+MIN_SCAMMER_TURNS_FOR_ALERT = 3
+MIN_USER_REPLIES_FOR_ALERT = 2
+MIN_CALL_SECONDS_FOR_ALERT = 20.0
+REPLY_LISTEN_START_DELAY_SECONDS = 0.25
+VOICE_ACTIVITY_RMS_THRESHOLD = 0.0015
+MIN_VOICED_SECONDS_FOR_TRANSCRIBE = 0.3
+END_OF_UTTERANCE_SILENCE_SECONDS = 0.8
+MAX_UTTERANCE_SECONDS = 7.0
+ANTHROPIC_API_URL = "https://api.anthropic.com/v1/messages"
+ANTHROPIC_API_VERSION = "2023-06-01"
+
+
+def _read_anthropic_api_key_from_env() -> str | None:
+    """Read optional Anthropic key from env without hardcoding secrets."""
+    key = os.getenv("SENTINEL_ANTHROPIC_API_KEY") or os.getenv("ANTHROPIC_API_KEY")
+    if key is None:
+        return None
+    key = key.strip()
+    return key if key else None
+
+
+def _extract_anthropic_text(response_json: dict) -> str | None:
+    """Extract first text block from Anthropic messages response."""
+    content = response_json.get("content")
+    if not isinstance(content, list):
+        return None
+
+    for block in content:
+        if isinstance(block, dict) and block.get("type") == "text":
+            text = block.get("text")
+            if isinstance(text, str) and text.strip():
+                return text.strip()
+    return None
+
+
+def _candidate_anthropic_models(configured_model: str) -> list[str]:
+    """Return ordered, de-duplicated Anthropic model candidates."""
+    candidates = [
+        configured_model,
+        "claude-sonnet-4-5-latest",
+        "claude-sonnet-4-0",
+        "claude-3-7-sonnet-latest",
+        "claude-3-5-haiku-latest",
+    ]
+
+    seen: set[str] = set()
+    ordered: list[str] = []
+    for model in candidates:
+        if model and model not in seen:
+            seen.add(model)
+            ordered.append(model)
+    return ordered
+
+
+def _personalize_scammer_line_sync(
+    *,
+    base_sentence: str,
+    call_description: str,
+    recent_user_replies: list[str],
+    recent_scammer_lines: list[str],
+) -> str | None:
+    """Call Anthropic API and return one personalized scammer sentence."""
+    api_key = _read_anthropic_api_key_from_env()
+    if api_key is None:
+        print("[Claude] API key not found in env; personalization disabled.")
+        return None
+
+    # Redact key for logging (show only last 8 chars)
+    key_display = f"...{api_key[-8:]}" if len(api_key) > 8 else "***"
+    print(f"[Claude] API key loaded: {key_display}")
+    
+    configured_model = os.getenv("SENTINEL_ANTHROPIC_MODEL", "claude-sonnet-4-5-latest")
+    model_candidates = _candidate_anthropic_models(configured_model)
+    print(f"[Claude] Attempting personalization with model candidates: {model_candidates}")
+    user_context = " | ".join(recent_user_replies[-3:])
+    scammer_context = " | ".join(recent_scammer_lines[-2:])
+
+    system_prompt = (
+        "You are generating a scam call simulation sentence for cybersecurity training. "
+        "Return exactly one sentence, under 35 words, plain text only. "
+        "Keep it plausible for a phone scam and adapt to the victim reply context. "
+        "Do not include markdown, bullet points, labels, or safety disclaimers."
+    )
+
+    user_prompt = (
+        f"Call scenario: {call_description}. "
+        f"Script baseline sentence: {base_sentence} "
+        f"Recent scammer lines: {scammer_context or 'none'} "
+        f"Recent victim replies: {user_context or 'none'}"
+    )
+
+    payload = {
+        "model": model_candidates[0],
+        "max_tokens": 80,
+        "temperature": 0.7,
+        "system": system_prompt,
+        "messages": [{"role": "user", "content": user_prompt}],
+    }
+
+    headers = {
+        "x-api-key": api_key,
+        "anthropic-version": ANTHROPIC_API_VERSION,
+        "content-type": "application/json",
+    }
+
+    for model in model_candidates:
+        payload["model"] = model
+        body = json.dumps(payload).encode("utf-8")
+        request = urllib.request.Request(
+            ANTHROPIC_API_URL,
+            data=body,
+            headers=headers,
+            method="POST",
+        )
+
+        try:
+            print(f"[Claude] API request to {ANTHROPIC_API_URL} using model: {model}")
+            with urllib.request.urlopen(request, timeout=8) as response:
+                response_json = json.loads(response.read().decode("utf-8"))
+
+            text = _extract_anthropic_text(response_json)
+            if text is None:
+                print(f"[Claude] Model {model} returned empty text block.")
+                continue
+
+            personalized = " ".join(text.split())
+            print(f"[Claude] Personalized sentence ({model}): {personalized[:80]}...")
+            return personalized
+        except urllib.error.HTTPError as e:
+            error_body = e.read().decode("utf-8") if e.fp else ""
+            print(f"[Claude] HTTP Error {e.code} on model {model}: {e.reason}")
+            print(f"[Claude] Response body: {error_body[:200]}")
+
+            is_model_not_found = (
+                e.code == 404
+                and "not_found_error" in error_body
+                and "model:" in error_body
+            )
+            if is_model_not_found:
+                print(f"[Claude] Model not found: {model}. Trying next fallback.")
+                continue
+            return None
+        except urllib.error.URLError as e:
+            print(f"[Claude] URL Error on model {model}: {e.reason}")
+            return None
+        except (TimeoutError, json.JSONDecodeError) as e:
+            print(f"[Claude] Request error on model {model}: {e}")
+            return None
+
+    print("[Claude] No usable Anthropic model found; personalization disabled for this turn.")
+    return None
+
+
+async def _personalize_scammer_line(
+    *,
+    base_sentence: str,
+    call_description: str,
+    recent_user_replies: list[str],
+    recent_scammer_lines: list[str],
+) -> str | None:
+    """Async wrapper for sentence personalization."""
+    return await asyncio.to_thread(
+        _personalize_scammer_line_sync,
+        base_sentence=base_sentence,
+        call_description=call_description,
+        recent_user_replies=recent_user_replies,
+        recent_scammer_lines=recent_scammer_lines,
+    )
+
+
+def _read_input_device_from_env() -> str | int | None:
+    """Read optional microphone input device from SENTINEL_INPUT_DEVICE.
+
+    Supports either an integer device index or a device name string.
+    """
+    value = os.getenv("SENTINEL_INPUT_DEVICE")
+    if value is None or not value.strip():
+        return None
+
+    value = value.strip()
+    if value.isdigit():
+        return int(value)
+    return value
+
+
+def _parse_input_device_query(value: str | None) -> str | int | None:
+    """Parse optional input device from websocket query parameter."""
+    if value is None:
+        return None
+    value = value.strip()
+    if not value:
+        return None
+    if value.isdigit():
+        return int(value)
+    return value
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Track active WebSocket connections
+active_connections: list[WebSocket] = []
+
+# ---------------------------------------------------------------------------
+# Available demo calls
+# ---------------------------------------------------------------------------
+
+SAMPLE_CALLS = {
+    "live_mic": {
+        "file": None,
+        "caller": "Live microphone",
+        "caller_name": "Local Device Input",
+        "description": "Real-time microphone detection",
+    },
+    "irs_scam": {
+        "file": "sample_calls/irs_scam.txt",
+        "caller": "+1 (800) 555-0199",
+        "caller_name": "Unknown Number",
+        "description": "IRS Impersonation Scam",
+    },
+    "tech_support": {
+        "file": "sample_calls/tech_support_scam.txt",
+        "caller": "+1 (888) 555-0147",
+        "caller_name": "Microsoft Support",
+        "description": "Tech Support Scam",
+    },
+    "bank_fraud": {
+        "file": "sample_calls/bank_fraud_scam.txt",
+        "caller": "+1 (800) 555-0123",
+        "caller_name": "Bank Security",
+        "description": "Bank Fraud Scam",
+    },
+    "legitimate": {
+        "file": "sample_calls/legitimate_call.txt",
+        "caller": "+1 (555) 234-5678",
+        "caller_name": "Dr. Smith Office",
+        "description": "Legitimate Appointment Reminder",
+    },
+    "crypto_investment": {
+        "file": "sample_calls/crypto_investment_scam.txt",
+        "caller": "+1 (833) 555-0291",
+        "caller_name": "Digital Asset Partners",
+        "description": "Crypto Investment Scam",
+    },
+    "grandparent": {
+        "file": "sample_calls/grandparent_scam.txt",
+        "caller": "+1 (555) 867-5309",
+        "caller_name": "Unknown Number",
+        "description": "Grandparent Scam",
+    },
+    "amazon_refund": {
+        "file": "sample_calls/amazon_refund_scam.txt",
+        "caller": "+1 (888) 555-0342",
+        "caller_name": "Amazon Support",
+        "description": "Amazon Refund Scam",
+    },
+    "utility_shutoff": {
+        "file": "sample_calls/utility_shutoff_scam.txt",
+        "caller": "+1 (800) 555-0476",
+        "caller_name": "Utility Company",
+        "description": "Utility Shutoff Scam",
+    },
+    "prize_notification": {
+        "file": "sample_calls/prize_notification_scam.txt",
+        "caller": "+1 (877) 555-0188",
+        "caller_name": "National Sweepstakes",
+        "description": "Prize Notification Scam",
+    },
+}
+
+# ---------------------------------------------------------------------------
+# REST endpoints
+# ---------------------------------------------------------------------------
+
+
+@app.get("/api/calls")
+async def list_calls():
+    """List available demo calls."""
+    return {"calls": [{"id": k, **v} for k, v in SAMPLE_CALLS.items()]}
+
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint."""
+    return {"status": "ok", "active_connections": len(active_connections)}
+
+
+@app.get("/api/audio-devices")
+async def list_audio_devices():
+    """List available input audio devices (when sounddevice is installed)."""
+    try:
+        import sounddevice as sd
+
+        devices = []
+        for idx, dev in enumerate(sd.query_devices()):
+            if dev.get("max_input_channels", 0) > 0:
+                devices.append(
+                    {
+                        "index": idx,
+                        "name": dev.get("name", "unknown"),
+                        "max_input_channels": int(dev.get("max_input_channels", 0)),
+                        "default_samplerate": float(dev.get("default_samplerate", 0.0)),
+                    }
+                )
+        return {"devices": devices}
+    except Exception as exc:
+        return {"devices": [], "error": str(exc)}
+
+
+# ---------------------------------------------------------------------------
+# WebSocket: real-time call fraud detection
+# ---------------------------------------------------------------------------
+
+
+@app.websocket("/ws/call/{call_id}")
+async def call_detection(websocket: WebSocket, call_id: str):
+    """WebSocket endpoint for real-time call fraud detection."""
+    await websocket.accept()
+    active_connections.append(websocket)
+
+    try:
+        if call_id not in SAMPLE_CALLS:
+            await websocket.send_json({"error": f"Unknown call: {call_id}"})
+            return
+
+        call_info = SAMPLE_CALLS[call_id]
+
+        await websocket.send_json(
+            {
+                "type": "call_start",
+                "caller": call_info["caller"],
+                "caller_name": call_info["caller_name"],
+                "description": call_info["description"],
+                "timestamp": time.time(),
+            }
+        )
+
+        input_device = _parse_input_device_query(
+            websocket.query_params.get("input_device")
+        )
+
+        if call_id == "live_mic":
+            await run_live_mic_detection(websocket, input_device=input_device)
+            return
+
+        # Load transcript sentences
+        transcript_path = os.path.join(os.path.dirname(__file__), call_info["file"])
+        sentences = load_transcript(transcript_path)
+
+        interactive = websocket.query_params.get("interactive") == "1"
+        if interactive:
+            await run_interactive_scripted_call(
+                websocket,
+                sentences,
+                input_device=input_device,
+            )
+            return
+
+        # Import detection pipeline components
+        from sentinel_edge.features.handcrafted import extract_handcrafted_features
+        from sentinel_edge.features.feature_pipeline import FeaturePipeline
+        from sentinel_edge.classifier.xgb_classifier import FraudClassifier
+        from sentinel_edge.classifier.score_accumulator import ScoreAccumulator
+        from sentinel_edge.classifier.alert_engine import AlertEngine
+
+        accumulator = ScoreAccumulator(alpha=0.3)
+        alert_engine = AlertEngine()
+
+        _model_path = os.path.join(_PROJECT_ROOT, "models", "call_fraud_xgb.json")
+        _tfidf_path = os.path.join(_PROJECT_ROOT, "models", "tfidf_call_vectorizer.pkl")
+        _use_real_model = os.path.exists(_model_path) and os.path.exists(_tfidf_path)
+        if _use_real_model:
+            _classifier = FraudClassifier(_model_path)
+            _pipeline = FeaturePipeline(_tfidf_path)
+        else:
+            _classifier = None
+            _pipeline = None
+
+        call_start_time = time.time()
+
+        for i, sentence in enumerate(sentences):
+            await asyncio.sleep(1.5 + np.random.random() * 1.5)
+
+            features = extract_handcrafted_features(sentence)
+
+            if _use_real_model:
+                t0 = time.perf_counter()
+                feature_vec = _pipeline.extract(sentence)
+                fraud_score = _classifier.predict_proba(feature_vec)
+                _inference_ms = (time.perf_counter() - t0) * 1000
+            else:
+                fraud_score = compute_heuristic_score(features)
+                _inference_ms = np.random.uniform(5, 15)
+
+            ema_score = accumulator.update(fraud_score)
+            alert = alert_engine.evaluate(ema_score, features)
+            elapsed = time.time() - call_start_time
+
+            await websocket.send_json(
+                {
+                    "type": "sentence",
+                    "speaker": "scammer",
+                    "index": i,
+                    "text": sentence,
+                    "raw_score": round(fraud_score, 4),
+                    "ema_score": round(ema_score, 4),
+                    "features": {
+                        k: round(v, 4) if isinstance(v, float) else int(v)
+                        for k, v in features.items()
+                    },
+                    "alert": {
+                        "should_alert": alert.should_alert,
+                        "risk_level": alert.risk_level.value,
+                        "reasons": alert.reasons,
+                    },
+                    "elapsed_seconds": round(elapsed, 1),
+                    "inference_ms": round(_inference_ms, 1),
+                    "timestamp": time.time(),
+                }
+            )
+
+            try:
+                msg = await asyncio.wait_for(
+                    websocket.receive_text(), timeout=0.01
+                )
+                data = json.loads(msg)
+                if data.get("action") == "block":
+                    await websocket.send_json(
+                        {"type": "call_blocked", "timestamp": time.time()}
+                    )
+                    return
+                elif data.get("action") == "dismiss":
+                    pass
+            except asyncio.TimeoutError:
+                pass
+            except json.JSONDecodeError:
+                pass
+
+        await websocket.send_json(
+            {
+                "type": "call_end",
+                "final_score": round(accumulator.current_score, 4),
+                "peak_score": round(accumulator.peak_score, 4),
+                "mean_score": round(accumulator.mean_score, 4),
+                "total_sentences": len(sentences),
+                "duration_seconds": round(time.time() - call_start_time, 1),
+                "timestamp": time.time(),
+            }
+        )
+
+    except WebSocketDisconnect:
+        pass
+    except Exception as exc:
+        try:
+            await websocket.send_json(
+                {"type": "error", "message": str(exc), "timestamp": time.time()}
+            )
+        except Exception:
+            pass
+    finally:
+        if websocket in active_connections:
+            active_connections.remove(websocket)
+
+
+async def run_interactive_scripted_call(
+    websocket: WebSocket,
+    scripted_sentences: list[str],
+    input_device: str | int | None = None,
+) -> None:
+    """Turn-based scripted call: scammer line, wait for user reply, repeat."""
+    from live_mic import LiveMicCapture
+    from sentinel_edge.audio.transcriber import Transcriber
+    from sentinel_edge.engine import SentinelEngine
+
+    engine = SentinelEngine(models_dir=os.path.join(_PROJECT_ROOT, "models"))
+    engine.reset_call_state()
+    mic = LiveMicCapture(
+        sample_rate=16_000,
+        chunk_size=2048,
+        channels=1,
+        input_device=(input_device if input_device is not None else _read_input_device_from_env()),
+    )
+    whisper_model = os.getenv("SENTINEL_WHISPER_MODEL", "base.en")
+    transcriber = Transcriber(model_name=whisper_model)
+
+    call_start_time = time.time()
+    turn_index = 0
+    scammer_turn_count = 0
+    user_reply_count = 0
+    fraud_alert_sent = False
+    user_replies: list[str] = []
+    scammer_history: list[str] = []
+    last_scammer_sentence = ""
+
+    try:
+        mic.start()
+
+        for scam_sentence in scripted_sentences:
+            await asyncio.sleep(1.0)
+
+            line_to_send = scam_sentence
+            if user_replies:
+                print(f"[Main] Attempting personalization (user has {len(user_replies)} replies)")
+                personalized = await _personalize_scammer_line(
+                    base_sentence=scam_sentence,
+                    call_description="Interactive scam call simulation",
+                    recent_user_replies=user_replies,
+                    recent_scammer_lines=scammer_history,
+                )
+                if personalized:
+                    line_to_send = personalized
+            else:
+                print(f"[Main] No user replies yet; skipping personalization")
+
+            t0 = time.perf_counter()
+            fraud_score, features = engine.analyze_sentence(line_to_send)
+            ema_score = engine.accumulator.update(fraud_score)
+            alert = engine.alert_engine.evaluate(ema_score, features)
+            inference_ms = (time.perf_counter() - t0) * 1000.0
+
+            await websocket.send_json(
+                {
+                    "type": "sentence",
+                    "speaker": "scammer",
+                    "index": turn_index,
+                    "text": line_to_send,
+                    "raw_score": round(fraud_score, 4),
+                    "ema_score": round(ema_score, 4),
+                    "features": {
+                        k: round(v, 4) if isinstance(v, float) else int(v)
+                        for k, v in features.items()
+                    },
+                    "alert": {
+                        "should_alert": alert.should_alert,
+                        "risk_level": alert.risk_level.value,
+                        "reasons": alert.reasons,
+                    },
+                    "elapsed_seconds": round(time.time() - call_start_time, 1),
+                    "inference_ms": round(inference_ms, 2),
+                    "timestamp": time.time(),
+                }
+            )
+            turn_index += 1
+            scammer_turn_count += 1
+            last_scammer_sentence = line_to_send
+            scammer_history.append(line_to_send)
+
+            elapsed_seconds = time.time() - call_start_time
+            if (
+                not fraud_alert_sent
+                and alert.should_alert
+                and scammer_turn_count >= MIN_SCAMMER_TURNS_FOR_ALERT
+                and user_reply_count >= MIN_USER_REPLIES_FOR_ALERT
+                and elapsed_seconds >= MIN_CALL_SECONDS_FOR_ALERT
+            ):
+                fraud_alert_sent = True
+                await websocket.send_json(
+                    {
+                        "type": "fraud_detected",
+                        "message": "High scam risk detected. Hang up now.",
+                        "risk_level": alert.risk_level.value,
+                        "ema_score": round(ema_score, 4),
+                        "reasons": alert.reasons,
+                        "timestamp": time.time(),
+                    }
+                )
+
+            await websocket.send_json(
+                {
+                    "type": "waiting_for_reply",
+                    "timeout_seconds": int(INTERACTIVE_REPLY_TIMEOUT_SECONDS),
+                    "timestamp": time.time(),
+                }
+            )
+
+            # Ensure only fresh user turn audio is considered.
+            mic.drain_queue()
+
+            user_sentence, heard_audio = await _capture_user_sentence(
+                websocket=websocket,
+                mic=mic,
+                transcriber=transcriber,
+                timeout_seconds=INTERACTIVE_REPLY_TIMEOUT_SECONDS,
+                listen_start_delay_seconds=REPLY_LISTEN_START_DELAY_SECONDS,
+                voice_activity_rms_threshold=VOICE_ACTIVITY_RMS_THRESHOLD,
+                min_voiced_seconds_for_transcribe=MIN_VOICED_SECONDS_FOR_TRANSCRIBE,
+            )
+
+            if not heard_audio:
+                await websocket.send_json(
+                    {
+                        "type": "error",
+                        "message": (
+                            "No microphone audio detected during reply window. "
+                            "Check OS microphone permission and input device selection."
+                        ),
+                        "timestamp": time.time(),
+                    }
+                )
+                continue
+
+            if user_sentence is None:
+                await websocket.send_json(
+                    {
+                        "type": "user_timeout",
+                        "message": "No reply detected, continuing call.",
+                        "timestamp": time.time(),
+                    }
+                )
+                continue
+
+            if _looks_like_echo(user_sentence, last_scammer_sentence):
+                await websocket.send_json(
+                    {
+                        "type": "user_echo_detected",
+                        "message": "Detected speaker echo. Use headphones or lower volume and repeat.",
+                        "timestamp": time.time(),
+                    }
+                )
+                continue
+
+            # Score user reply for display only. Do not mix into scammer EMA.
+            user_score, user_features = engine.analyze_sentence(user_sentence)
+            user_replies.append(user_sentence)
+            user_reply_count += 1
+            await websocket.send_json(
+                {
+                    "type": "sentence",
+                    "speaker": "you",
+                    "index": turn_index,
+                    "text": user_sentence,
+                    "raw_score": round(user_score, 4),
+                    "ema_score": round(engine.accumulator.current_score, 4),
+                    "features": {
+                        k: round(v, 4) if isinstance(v, float) else int(v)
+                        for k, v in user_features.items()
+                    },
+                    "alert": {
+                        "should_alert": False,
+                        "risk_level": "safe",
+                        "reasons": [],
+                    },
+                    "elapsed_seconds": round(time.time() - call_start_time, 1),
+                    "inference_ms": 0.0,
+                    "timestamp": time.time(),
+                }
+            )
+            turn_index += 1
+
+            # Allow client action such as manual block/hangup.
+            try:
+                msg = await asyncio.wait_for(websocket.receive_text(), timeout=0.01)
+                data = json.loads(msg)
+                if data.get("action") == "block":
+                    await websocket.send_json(
+                        {"type": "call_blocked", "timestamp": time.time()}
+                    )
+                    break
+            except asyncio.TimeoutError:
+                pass
+            except json.JSONDecodeError:
+                pass
+
+        await websocket.send_json(
+            {
+                "type": "call_end",
+                "final_score": round(engine.accumulator.current_score, 4),
+                "peak_score": round(engine.accumulator.peak_score, 4),
+                "mean_score": round(engine.accumulator.mean_score, 4),
+                "total_sentences": turn_index,
+                "duration_seconds": round(time.time() - call_start_time, 1),
+                "timestamp": time.time(),
+            }
+        )
+    finally:
+        mic.stop()
+
+
+async def _capture_user_sentence(
+    websocket: WebSocket,
+    mic,
+    transcriber,
+    timeout_seconds: float,
+    listen_start_delay_seconds: float,
+    voice_activity_rms_threshold: float,
+    min_voiced_seconds_for_transcribe: float,
+) -> tuple[str | None, bool]:
+    """Capture microphone input and return one completed user sentence."""
+    from sentinel_edge.audio.sentence_splitter import SentenceSplitter
+
+    splitter = SentenceSplitter()
+    utterance_chunks: list[np.ndarray] = []
+    utterance_samples = 0
+    min_samples = int(16_000 * min_voiced_seconds_for_transcribe)
+    max_samples = int(16_000 * MAX_UTTERANCE_SECONDS)
+    deadline = time.time() + timeout_seconds
+    listen_start = time.time() + listen_start_delay_seconds
+    heard_audio = False
+    speech_started = False
+    silence_run_seconds = 0.0
+
+    while time.time() < deadline:
+        # Handle immediate client actions while waiting for reply.
+        try:
+            msg = await asyncio.wait_for(websocket.receive_text(), timeout=0.01)
+            data = json.loads(msg)
+            if data.get("action") == "block":
+                return None, heard_audio
+        except asyncio.TimeoutError:
+            pass
+        except json.JSONDecodeError:
+            pass
+
+        chunk = mic.get_chunk(timeout=0.2)
+        if chunk is None:
+            await asyncio.sleep(0.01)
+            continue
+
+        if time.time() < listen_start:
+            # Avoid immediately picking up system TTS bleed-through.
+            continue
+
+        heard_audio = True
+
+        rms = float(np.sqrt(np.mean(np.square(chunk))))
+        chunk_seconds = len(chunk) / 16_000.0
+
+        if rms < voice_activity_rms_threshold:
+            if speech_started:
+                # Keep trailing silence so Whisper captures final words naturally.
+                utterance_chunks.append(chunk)
+                utterance_samples += len(chunk)
+                silence_run_seconds += chunk_seconds
+                if (
+                    utterance_samples >= min_samples
+                    and silence_run_seconds >= END_OF_UTTERANCE_SILENCE_SECONDS
+                ):
+                    break
+            continue
+
+        speech_started = True
+        silence_run_seconds = 0.0
+        utterance_chunks.append(chunk)
+        utterance_samples += len(chunk)
+        if utterance_samples >= max_samples:
+            break
+
+    if utterance_chunks and utterance_samples >= min_samples:
+        audio = np.concatenate(utterance_chunks)
+        transcript = transcriber.transcribe(audio, sample_rate=16_000).strip()
+        if transcript:
+            sentences = splitter.feed(transcript)
+            if sentences:
+                return sentences[0], heard_audio
+
+            # Whisper can return partial text without sentence punctuation.
+            if len(transcript.split()) >= 1:
+                return transcript, heard_audio
+
+    # Fallback: if we heard audio but speech never crossed VAD, try a short best-effort
+    # transcription on what we did capture to handle very quiet microphones.
+    if utterance_chunks and heard_audio:
+        audio = np.concatenate(utterance_chunks)
+        transcript = transcriber.transcribe(audio, sample_rate=16_000).strip()
+        if transcript:
+            return transcript, heard_audio
+
+    leftover = splitter.flush()
+    if leftover:
+        return leftover, heard_audio
+    return None, heard_audio
+
+
+def _looks_like_echo(user_sentence: str, scam_sentence: str) -> bool:
+    """Heuristic guard: detect if user transcript likely matches scammer TTS echo."""
+    def _normalize(text: str) -> list[str]:
+        cleaned = re.sub(r"[^a-z0-9\s]", " ", text.lower())
+        tokens = [t for t in cleaned.split() if len(t) > 2]
+        return tokens
+
+    user_tokens = _normalize(user_sentence)
+    scam_tokens = _normalize(scam_sentence)
+
+    if not user_tokens or not scam_tokens:
+        return False
+
+    user_set = set(user_tokens)
+    scam_set = set(scam_tokens)
+    overlap = len(user_set & scam_set)
+    ratio = overlap / max(len(user_set), 1)
+
+    # Require substantial overlap to reduce false positives on short user replies.
+    return overlap >= 4 and ratio >= 0.85
+
+
+async def run_live_mic_detection(
+    websocket: WebSocket,
+    input_device: str | int | None = None,
+) -> None:
+    """Run live microphone -> transcription -> model scoring pipeline."""
+    from live_mic import LiveMicCapture
+    from sentinel_edge.audio.sentence_splitter import SentenceSplitter
+    from sentinel_edge.audio.transcriber import Transcriber
+    from sentinel_edge.engine import SentinelEngine
+
+    mic = LiveMicCapture(
+        sample_rate=16_000,
+        chunk_size=2048,
+        channels=1,
+        input_device=(input_device if input_device is not None else _read_input_device_from_env()),
+    )
+    splitter = SentenceSplitter()
+    whisper_model = os.getenv("SENTINEL_WHISPER_MODEL", "base.en")
+    transcriber = Transcriber(model_name=whisper_model)
+    engine = SentinelEngine(models_dir=os.path.join(_PROJECT_ROOT, "models"))
+    engine.reset_call_state()
+
+    call_start_time = time.time()
+    sentence_index = 0
+    chunk_accumulator: list[np.ndarray] = []
+    accumulated_samples = 0
+    # Transcribe roughly every 2 seconds for stable Whisper context.
+    target_samples = 16_000 * 2
+
+    try:
+        mic.start()
+
+        while True:
+            # Non-blocking action handling from client.
+            try:
+                msg = await asyncio.wait_for(websocket.receive_text(), timeout=0.01)
+                data = json.loads(msg)
+                if data.get("action") == "block":
+                    await websocket.send_json(
+                        {"type": "call_blocked", "timestamp": time.time()}
+                    )
+                    break
+            except asyncio.TimeoutError:
+                pass
+            except json.JSONDecodeError:
+                pass
+
+            chunk = mic.get_chunk(timeout=0.2)
+            if chunk is None:
+                await asyncio.sleep(0.01)
+                continue
+
+            chunk_accumulator.append(chunk)
+            accumulated_samples += len(chunk)
+
+            if accumulated_samples < target_samples:
+                continue
+
+            audio = np.concatenate(chunk_accumulator)
+            chunk_accumulator = []
+            accumulated_samples = 0
+
+            transcript = transcriber.transcribe(audio, sample_rate=16_000).strip()
+            if not transcript:
+                continue
+
+            for sentence in splitter.feed(transcript):
+                t0 = time.perf_counter()
+                fraud_score, features = engine.analyze_sentence(sentence)
+                ema_score = engine.accumulator.update(fraud_score)
+                alert = engine.alert_engine.evaluate(ema_score, features)
+                inference_ms = (time.perf_counter() - t0) * 1000.0
+
+                await websocket.send_json(
+                    {
+                        "type": "sentence",
+                        "index": sentence_index,
+                        "text": sentence,
+                        "raw_score": round(fraud_score, 4),
+                        "ema_score": round(ema_score, 4),
+                        "features": {
+                            k: round(v, 4) if isinstance(v, float) else int(v)
+                            for k, v in features.items()
+                        },
+                        "alert": {
+                            "should_alert": alert.should_alert,
+                            "risk_level": alert.risk_level.value,
+                            "reasons": alert.reasons,
+                        },
+                        "elapsed_seconds": round(time.time() - call_start_time, 1),
+                        "inference_ms": round(inference_ms, 2),
+                        "timestamp": time.time(),
+                    }
+                )
+                sentence_index += 1
+
+        leftover = splitter.flush()
+        if leftover:
+            t0 = time.perf_counter()
+            fraud_score, features = engine.analyze_sentence(leftover)
+            ema_score = engine.accumulator.update(fraud_score)
+            alert = engine.alert_engine.evaluate(ema_score, features)
+            inference_ms = (time.perf_counter() - t0) * 1000.0
+            await websocket.send_json(
+                {
+                    "type": "sentence",
+                    "index": sentence_index,
+                    "text": leftover,
+                    "raw_score": round(fraud_score, 4),
+                    "ema_score": round(ema_score, 4),
+                    "features": {
+                        k: round(v, 4) if isinstance(v, float) else int(v)
+                        for k, v in features.items()
+                    },
+                    "alert": {
+                        "should_alert": alert.should_alert,
+                        "risk_level": alert.risk_level.value,
+                        "reasons": alert.reasons,
+                    },
+                    "elapsed_seconds": round(time.time() - call_start_time, 1),
+                    "inference_ms": round(inference_ms, 2),
+                    "timestamp": time.time(),
+                }
+            )
+            sentence_index += 1
+
+        await websocket.send_json(
+            {
+                "type": "call_end",
+                "final_score": round(engine.accumulator.current_score, 4),
+                "peak_score": round(engine.accumulator.peak_score, 4),
+                "mean_score": round(engine.accumulator.mean_score, 4),
+                "total_sentences": sentence_index,
+                "duration_seconds": round(time.time() - call_start_time, 1),
+                "timestamp": time.time(),
+            }
+        )
+    finally:
+        mic.stop()
+
+
+# ---------------------------------------------------------------------------
+# WebSocket: live microphone fraud detection
+# ---------------------------------------------------------------------------
+
+_LIVE_MIC_BUFFER_DURATION = 5.0
+
+
+@app.websocket("/ws/call/live")
+async def live_mic_detection(websocket: WebSocket):
+    """WebSocket endpoint for live microphone fraud detection."""
+    await websocket.accept()
+    active_connections.append(websocket)
+
+    mic = None
+    try:
+        try:
+            from demo.backend.live_mic import LiveMicCapture
+        except ImportError as e:
+            await websocket.send_json({
+                "type": "error",
+                "message": f"Missing dependency for live mic: {e}",
+                "timestamp": time.time(),
+            })
+            return
+
+        try:
+            from sentinel_edge.audio.transcriber import Transcriber
+        except ImportError as e:
+            await websocket.send_json({
+                "type": "error",
+                "message": f"Missing dependency for transcription: {e}",
+                "timestamp": time.time(),
+            })
+            return
+
+        mic = LiveMicCapture(sample_rate=16000)
+        transcriber = Transcriber(model_name="tiny.en")
+
+        if not transcriber.is_loaded:
+            await websocket.send_json({
+                "type": "status",
+                "message": "Loading Whisper model (may download on first use)...",
+                "timestamp": time.time(),
+            })
+
+        try:
+            transcriber.load()
+        except Exception as e:
+            await websocket.send_json({
+                "type": "error",
+                "message": (
+                    f"Failed to load Whisper model: {e}. "
+                    "Install with: pip install openai-whisper"
+                ),
+                "timestamp": time.time(),
+            })
+            return
+
+        from sentinel_edge.features.handcrafted import extract_handcrafted_features
+        from sentinel_edge.features.feature_pipeline import FeaturePipeline
+        from sentinel_edge.classifier.xgb_classifier import FraudClassifier as XGBFraudClassifier
+        from sentinel_edge.classifier.score_accumulator import ScoreAccumulator
+        from sentinel_edge.classifier.alert_engine import AlertEngine
+
+        accumulator = ScoreAccumulator(alpha=0.3)
+        alert_engine = AlertEngine()
+
+        _model_path = os.path.join(_PROJECT_ROOT, "models", "call_fraud_xgb.json")
+        _tfidf_path = os.path.join(_PROJECT_ROOT, "models", "tfidf_call_vectorizer.pkl")
+        _use_real_model = os.path.exists(_model_path) and os.path.exists(_tfidf_path)
+        if _use_real_model:
+            _classifier = XGBFraudClassifier(_model_path)
+            _pipeline = FeaturePipeline(_tfidf_path)
+        else:
+            _classifier = None
+            _pipeline = None
+
+        try:
+            mic.start()
+        except ImportError as e:
+            await websocket.send_json({
+                "type": "error",
+                "message": str(e),
+                "timestamp": time.time(),
+            })
+            return
+        except Exception as e:
+            await websocket.send_json({
+                "type": "error",
+                "message": f"Failed to start microphone: {e}",
+                "timestamp": time.time(),
+            })
+            return
+
+        await websocket.send_json({
+            "type": "call_start",
+            "caller": "Live Microphone",
+            "caller_name": "Live Input",
+            "description": "Live Microphone Analysis",
+            "timestamp": time.time(),
+        })
+
+        call_start_time = time.time()
+        sentence_index = 0
+        audio_buffer: list[np.ndarray] = []
+        buffered_seconds = 0.0
+
+        while True:
+            try:
+                msg = await asyncio.wait_for(
+                    websocket.receive_text(), timeout=0.05
+                )
+                data = json.loads(msg)
+                if data.get("action") in ("stop", "block"):
+                    if data.get("action") == "block":
+                        await websocket.send_json({
+                            "type": "call_blocked",
+                            "timestamp": time.time(),
+                        })
+                    break
+            except asyncio.TimeoutError:
+                pass
+            except json.JSONDecodeError:
+                pass
+
+            chunk = await asyncio.get_event_loop().run_in_executor(
+                None, mic.get_chunk, 0.1
+            )
+            if chunk is not None:
+                audio_buffer.append(chunk)
+                buffered_seconds += len(chunk) / mic.sample_rate
+
+            if buffered_seconds >= _LIVE_MIC_BUFFER_DURATION and audio_buffer:
+                audio_segment = np.concatenate(audio_buffer)
+                audio_buffer.clear()
+                buffered_seconds = 0.0
+
+                transcript = await asyncio.get_event_loop().run_in_executor(
+                    None, transcriber.transcribe, audio_segment, 16000
+                )
+
+                if not transcript.strip():
+                    continue
+
+                sentences = _split_sentences(transcript)
+
+                for sentence in sentences:
+                    sentence = sentence.strip()
+                    if not sentence:
+                        continue
+
+                    features = extract_handcrafted_features(sentence)
+
+                    if _use_real_model:
+                        t0 = time.perf_counter()
+                        feature_vec = _pipeline.extract(sentence)
+                        fraud_score = _classifier.predict_proba(feature_vec)
+                        _inference_ms = (time.perf_counter() - t0) * 1000
+                    else:
+                        fraud_score = compute_heuristic_score(features)
+                        _inference_ms = np.random.uniform(5, 15)
+
+                    ema_score = accumulator.update(fraud_score)
+                    alert = alert_engine.evaluate(ema_score, features)
+                    elapsed = time.time() - call_start_time
+
+                    await websocket.send_json({
+                        "type": "sentence",
+                        "index": sentence_index,
+                        "text": sentence,
+                        "raw_score": round(fraud_score, 4),
+                        "ema_score": round(ema_score, 4),
+                        "features": {
+                            k: round(v, 4) if isinstance(v, float) else int(v)
+                            for k, v in features.items()
+                        },
+                        "alert": {
+                            "should_alert": alert.should_alert,
+                            "risk_level": alert.risk_level.value,
+                            "reasons": alert.reasons,
+                        },
+                        "elapsed_seconds": round(elapsed, 1),
+                        "inference_ms": round(_inference_ms, 1),
+                        "timestamp": time.time(),
+                    })
+                    sentence_index += 1
+
+        await websocket.send_json({
+            "type": "call_end",
+            "final_score": round(accumulator.current_score, 4),
+            "peak_score": round(accumulator.peak_score, 4),
+            "mean_score": round(accumulator.mean_score, 4),
+            "total_sentences": sentence_index,
+            "duration_seconds": round(time.time() - call_start_time, 1),
+            "timestamp": time.time(),
+        })
+
+    except WebSocketDisconnect:
+        pass
+    except Exception as exc:
+        try:
+            await websocket.send_json({
+                "type": "error",
+                "message": str(exc),
+                "timestamp": time.time(),
+            })
+        except Exception:
+            pass
+    finally:
+        if mic is not None and mic.is_running:
+            mic.stop()
+        if websocket in active_connections:
+            active_connections.remove(websocket)
+
+
+def _split_sentences(text: str) -> list[str]:
+    """Split transcribed text into individual sentences."""
+    parts = re.split(r'(?<=[.!?])\s+', text.strip())
+    return [p for p in parts if p.strip()]
+
+
+# ---------------------------------------------------------------------------
+# WebSocket: privacy / federated learning demo
+# ---------------------------------------------------------------------------
+
+
+@app.websocket("/ws/privacy-demo")
+async def privacy_demo(websocket: WebSocket):
+    """Show what the hub sees vs what stays on device."""
+    await websocket.accept()
+
+    try:
+        examples = [
+            "This is the IRS calling about your unpaid tax debt of five thousand dollars.",
+            "Your social security number has been suspended due to suspicious activity.",
+            "Press 1 now to speak with an agent or a warrant will be issued for your arrest.",
+            "You need to purchase gift cards and read us the numbers to resolve this matter.",
+        ]
+
+        from sentinel_edge.features.handcrafted import extract_handcrafted_features
+        from sentinel_edge.privacy.dp_noise import DPNoiseInjector
+
+        n_local_samples = 50
+        dp = DPNoiseInjector(epsilon=0.3)
+
+        for idx, sentence in enumerate(examples):
+            await asyncio.sleep(2.0)
+
+            features = extract_handcrafted_features(sentence)
+            feature_vector = np.array(list(features.values()), dtype=np.float64)
+
+            gradient = np.random.randn(len(feature_vector)) * 0.01
+            clipped = dp.clip_gradient(gradient)
+            noised_gradient = dp.add_noise(clipped, n_local_samples=n_local_samples)
+            sensitivity = 1.0 / n_local_samples
+            sigma = dp.compute_sigma(sensitivity)
+
+            await websocket.send_json(
+                {
+                    "type": "privacy_comparison",
+                    "index": idx,
+                    "on_device": {
+                        "transcript": sentence,
+                        "features": {
+                            k: round(v, 4) if isinstance(v, float) else int(v)
+                            for k, v in features.items()
+                        },
+                        "fraud_score": round(
+                            float(np.random.uniform(0.6, 0.95)), 4
+                        ),
+                    },
+                    "hub_sees": {
+                        "gradient_vector": [
+                            round(float(x), 6) for x in noised_gradient[:20]
+                        ],
+                        "gradient_size": len(noised_gradient),
+                        "dp_sigma": round(float(sigma), 6),
+                        "dp_epsilon": 0.3,
+                        "n_samples": n_local_samples,
+                        "model_version": 3,
+                    },
+                    "timestamp": time.time(),
+                }
+            )
+
+        await websocket.send_json({"type": "demo_complete"})
+
+    except WebSocketDisconnect:
+        pass
+    except Exception as exc:
+        try:
+            await websocket.send_json(
+                {"type": "error", "message": str(exc), "timestamp": time.time()}
+            )
+        except Exception:
+            pass
+
+
+# ---------------------------------------------------------------------------
+# Transcript loading helpers
+# ---------------------------------------------------------------------------
+
+
+def load_transcript(file_path: str) -> list[str]:
+    """Load transcript sentences from a text file (one sentence per line)."""
+    if not os.path.exists(file_path):
+        return get_fallback_transcript(file_path)
+
+    with open(file_path) as f:
+        lines = [line.strip() for line in f if line.strip()]
+    return lines
+
+
+def get_fallback_transcript(file_path: str) -> list[str]:
+    """Return a built-in transcript when the text file hasn't been created yet."""
+    name = os.path.basename(file_path)
+
+    if "irs" in name:
+        return [
+            "Hello, this is Agent Williams from the Internal Revenue Service.",
+            "We are calling because there is a problem with your tax return.",
+            "Our records indicate that you owe the IRS three thousand five hundred dollars in back taxes.",
+            "If this amount is not paid immediately, a warrant will be issued for your arrest.",
+            "This is your final notice before legal action is taken against you.",
+            "You can resolve this matter today by making a payment over the phone.",
+            "We accept payment through gift cards, wire transfer, or cryptocurrency.",
+            "Please provide your social security number so we can verify your identity.",
+            "Time is running out. You must act now to avoid criminal prosecution.",
+            "Press 1 to be connected to a payment specialist immediately.",
+        ]
+    elif "tech" in name:
+        return [
+            "Hello, this is the Microsoft Windows technical support department.",
+            "We have detected that your computer has been compromised by malicious software.",
+            "Hackers are currently accessing your personal files and banking information.",
+            "You need to act immediately to prevent further damage to your system.",
+            "I will need you to download our remote access tool so we can fix this problem.",
+            "Please go to this website and enter the access code I give you.",
+            "We need to verify your identity. Can you provide your email password?",
+            "There is a one-time security fee of two hundred and ninety nine dollars.",
+            "You can pay with a credit card or by purchasing Google Play gift cards.",
+            "If you do not resolve this now, your computer will be permanently locked.",
+        ]
+    elif "bank" in name:
+        return [
+            "Good afternoon, this is the fraud prevention department at your bank.",
+            "We have detected suspicious activity on your account ending in four seven eight two.",
+            "Someone attempted to make a large purchase of fifteen hundred dollars.",
+            "For your security, we need to verify your identity immediately.",
+            "Can you please confirm your full account number and routing number?",
+            "We also need the three-digit security code on the back of your card.",
+            "I'm going to send you a verification code. Please read it back to me.",
+            "We need to transfer your funds to a secure account to protect them.",
+            "Please do not hang up or contact your branch directly as this is time-sensitive.",
+            "Your account will be frozen if we cannot complete this verification process.",
+        ]
+    else:
+        return [
+            "Hi, this is Sarah from Doctor Smith's office calling.",
+            "I'm calling to confirm your appointment scheduled for next Tuesday at two thirty.",
+            "Doctor Smith will be performing your annual checkup.",
+            "Please remember to bring your insurance card and photo ID.",
+            "Also, please arrive fifteen minutes early to fill out any updated paperwork.",
+            "If you need to reschedule, please call us back at your convenience.",
+            "We look forward to seeing you. Have a great day!",
+        ]
+
+
+# ---------------------------------------------------------------------------
+# Heuristic fraud scorer (substitutes for XGBoost in demo mode)
+# ---------------------------------------------------------------------------
+
+
+def compute_heuristic_score(features: dict[str, float]) -> float:
+    """Compute a heuristic fraud score from handcrafted features."""
+    score = 0.0
+    weights = {
+        "urgency_count": 0.08,
+        "action_count": 0.06,
+        "financial_count": 0.07,
+        "impersonation_count": 0.10,
+        "has_url": 0.04,
+        "has_shortened_url": 0.06,
+        "has_verify_pattern": 0.04,
+        "has_threat": 0.10,
+        "has_prize": 0.06,
+        "has_account_ref": 0.07,
+        "dollar_sign": 0.03,
+        "has_phone_number": 0.02,
+        "exclamation_count": 0.02,
+        "caps_ratio": 0.03,
+    }
+
+    for feature, weight in weights.items():
+        value = features.get(feature, 0)
+        if isinstance(value, bool):
+            value = 1.0 if value else 0.0
+        score += value * weight
+
+    score = max(0.0, min(1.0, score))
+    score += np.random.normal(0, 0.02)
+    score = max(0.0, min(1.0, score))
+
+    return score
+
+
+# ---------------------------------------------------------------------------
+# Entry point
+# ---------------------------------------------------------------------------
+
+if __name__ == "__main__":
+    uvicorn.run(
+        "main:app",
+        host="0.0.0.0",
+        port=8000,
+        reload=True,
+        reload_dirs=[os.path.dirname(__file__)],
+    )

demo/backend/sample_calls/amazon_refund_scam.txt

@@ -0,0 +1,12 @@
+Hello, this is the Amazon customer service refund department calling.
+We are calling to inform you that a charge of four hundred and ninety nine dollars was made on your Amazon account today.
+This appears to be an unauthorized purchase of an Apple MacBook Pro.
+If you did not make this purchase, we need to process a refund immediately.
+To verify your identity and process the refund, I will need to connect to your computer remotely.
+Please go to the website I'm about to give you and download our secure support tool.
+Once connected, we can access your Amazon account and reverse the charge right away.
+I will also need you to log into your online banking so we can verify the refund was processed correctly.
+It looks like the refund went through but we accidentally sent you forty nine hundred dollars instead of four ninety nine.
+You will need to send back the difference using a wire transfer to our corporate account.
+This needs to be resolved today or your Amazon account will be permanently suspended.
+Can you please stay on the line while we complete this process?

demo/backend/sample_calls/bank_fraud_scam.txt

@@ -0,0 +1,11 @@
+Good afternoon, this is the fraud prevention department at your bank.
+We have detected suspicious activity on your account ending in four seven eight two.
+Someone attempted to make an unauthorized purchase of fifteen hundred dollars.
+For your security, we need to verify your identity immediately.
+Can you please confirm your full account number and routing number.
+We also need the three digit security code on the back of your debit card.
+I am going to send you a verification code and please read it back to me.
+We need to transfer your funds to a secure temporary account to protect them from the fraudster.
+Please do not hang up or contact your branch directly as this is time sensitive.
+Your account will be permanently frozen if we cannot complete this verification process now.
+Remember, do not share this call information with anyone for security purposes.

demo/backend/sample_calls/crypto_investment_scam.txt

@@ -0,0 +1,12 @@
+Hello, my name is David Chen and I'm a senior investment advisor at Digital Asset Partners.
+I'm reaching out to a select group of individuals about an exclusive cryptocurrency opportunity.
+Our proprietary AI trading algorithm has been generating returns of over five hundred percent in just three months.
+We have limited spots available and this opportunity closes at midnight tonight.
+The minimum investment is just two thousand dollars to get started with our managed portfolio.
+Your funds will be placed in a secure digital wallet that our team manages on your behalf.
+I just need your bank account details to initiate the transfer and secure your spot.
+We also accept payment through Bitcoin, wire transfer, or Zelle for faster processing.
+Several of our clients have already turned five thousand dollars into over fifty thousand.
+I can send you a link right now to complete your registration and fund your account.
+Don't miss out on this opportunity, the market conditions are perfect right now.
+Can you confirm your full name and date of birth so I can set up your investor profile?

demo/backend/sample_calls/grandparent_scam.txt

@@ -0,0 +1,12 @@
+Grandma, it's me, please don't hang up.
+I'm in really big trouble and I didn't know who else to call.
+I was in a car accident and the police arrested me because they said it was my fault.
+Please don't tell mom and dad, they would be so upset with me.
+My lawyer says I need to post bail of three thousand dollars to get out of jail today.
+I'm so scared, grandma, I've never been in trouble like this before.
+The lawyer said you can send the money through a wire transfer or gift cards.
+His name is attorney Robert Miller and he's going to call you in a few minutes with the details.
+Please don't tell anyone about this, I'm so embarrassed.
+I need the money as soon as possible or they're going to keep me here overnight.
+Can you go to the store and get Google Play gift cards and read me the numbers on the back?
+I promise I'll pay you back as soon as I get out, I love you grandma.

demo/backend/sample_calls/irs_scam.txt

@@ -0,0 +1,11 @@
+Hello, this is Agent Williams from the Internal Revenue Service.
+We are calling because there is a serious problem with your federal tax return.
+Our records indicate that you owe the IRS three thousand five hundred dollars in unpaid back taxes.
+If this amount is not paid immediately, a warrant will be issued for your arrest today.
+This is your final notice before legal action is taken against you.
+You can resolve this matter today by making a payment over the phone.
+We accept payment through gift cards, wire transfer, or cryptocurrency.
+Please provide your social security number so we can verify your identity.
+Time is running out and you must act now to avoid criminal prosecution.
+Do not hang up this call or your local police department will be notified.
+Press one to be connected to a payment specialist immediately.

demo/backend/sample_calls/legitimate_call.txt

@@ -0,0 +1,7 @@
+Hi, this is Sarah from Doctor Smith's office calling.
+I am calling to confirm your appointment scheduled for next Tuesday at two thirty in the afternoon.
+Doctor Smith will be performing your annual checkup.
+Please remember to bring your insurance card and a photo ID.
+Also, please arrive about fifteen minutes early to fill out any updated paperwork.
+If you have any questions or need to reschedule, please call us back at your earliest convenience.
+We look forward to seeing you next week. Have a great day!

demo/backend/sample_calls/prize_notification_scam.txt

@@ -0,0 +1,12 @@
+Congratulations, you have been selected as our grand prize winner in the National Consumer Sweepstakes.
+You have won a cash prize of two hundred and fifty thousand dollars and a brand new Mercedes Benz.
+This is not a sales call, you have legitimately won and we just need to process your claim.
+Your entry was automatically submitted when you made a purchase at a participating retailer last month.
+To claim your prize, there is a small processing fee of just nine hundred and ninety five dollars.
+This covers the taxes, insurance, and shipping costs for your new vehicle.
+Once we receive the processing fee, your cash prize will be deposited directly into your bank account within 48 hours.
+I will need your full name, date of birth, and bank account information to set up the deposit.
+We also need your social security number for tax reporting purposes as required by federal law.
+This offer expires today, so we need to complete the claim process on this call.
+If you'd like, I can transfer you to our prize verification department to confirm your winnings.
+Shall I go ahead and start the paperwork for your two hundred and fifty thousand dollar prize?

demo/backend/sample_calls/tech_support_scam.txt

@@ -0,0 +1,11 @@
+Hello, this is the Microsoft Windows technical support department.
+We have detected that your computer has been compromised by malicious software.
+Hackers are currently accessing your personal files and banking information.
+You need to act immediately to prevent further damage to your system.
+I will need you to download our remote access tool so we can fix this problem.
+Please go to this website and enter the access code I give you.
+We need to verify your identity so can you please provide your email password.
+There is a one-time security fee of two hundred and ninety nine dollars to clean the infection.
+You can pay with a credit card or by purchasing Google Play gift cards at your nearest store.
+If you do not resolve this right now your computer will be permanently locked by the hackers.
+I urge you to stay on the line because this is extremely urgent.

demo/backend/sample_calls/utility_shutoff_scam.txt

@@ -0,0 +1,12 @@
+This is an urgent notice from your electric utility company's billing department.
+Our records show that your account is severely past due with a balance of eight hundred and forty two dollars.
+If payment is not received within the next two hours, your electricity will be disconnected.
+This is your final warning before we dispatch a technician to your address to shut off service.
+Once disconnected, there will be an additional reconnection fee of three hundred and fifty dollars.
+We understand this may be unexpected, but our system shows multiple missed payments on your account.
+To prevent disconnection, you can make an immediate payment over the phone right now.
+We accept payment through prepaid debit cards, money orders, or cryptocurrency for immediate processing.
+I will need your account number and the last four digits of your social security number to pull up your file.
+If you make the payment now, I can personally ensure your service remains active.
+Please note that our regular customer service line is closed, this is the only way to resolve this today.
+Do you have a pen ready so I can give you the payment instructions?

demo/frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='28' font-size='28'>🛡️</text></svg>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SentinelEdge - Federated Edge AI Fraud Detection</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+  </head>
+  <body class="bg-dark-bg text-white antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

demo/frontend/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "sentineledge-demo",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^2.12.0",
+    "lucide-react": "^0.344.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
+  }
+}

demo/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

demo/frontend/src/App.tsx

@@ -0,0 +1,619 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { Shield, Radio, Lock, GitBranch, Activity } from 'lucide-react'
+import PhoneSimulator from './components/PhoneSimulator'
+import CallScreen from './components/CallScreen'
+import TranscriptPanel from './components/TranscriptPanel'
+import ScoreGauge from './components/ScoreGauge'
+import FeatureBreakdown from './components/FeatureBreakdown'
+import DemoControls from './components/DemoControls'
+import PrivacyDemo from './components/PrivacyDemo'
+import FederatedDashboard from './components/FederatedDashboard'
+import CallHistory from './components/CallHistory'
+import type { CallHistoryEntry } from './components/CallHistory'
+import { useWebSocket } from './hooks/useWebSocket'
+
+// -------- Sample call scripts --------
+interface ScriptLine {
+  text: string
+  score: number
+  features: Record<string, number>
+}
+
+const SAMPLE_CALLS: Record<string, { description: string; lines: ScriptLine[] }> = {
+  irs_scam: {
+    description: 'IRS Scam Call',
+    lines: [
+      { text: "Hello, this is Officer James Wilson from the Internal Revenue Service.", score: 0.15, features: { urgency: 0.1, financial_terms: 0.2, authority_claim: 0.3 } },
+      { text: "We have detected a serious issue with your tax filing for the previous year.", score: 0.25, features: { urgency: 0.2, financial_terms: 0.3, authority_claim: 0.3, threat_language: 0.1 } },
+      { text: "There is an outstanding balance of $4,789 that must be resolved immediately.", score: 0.42, features: { urgency: 0.5, financial_terms: 0.7, specific_amount: 0.6, time_pressure: 0.4 } },
+      { text: "If this is not paid today, a warrant will be issued for your arrest.", score: 0.68, features: { urgency: 0.9, threat_language: 0.8, time_pressure: 0.9, authority_claim: 0.5 } },
+      { text: "You need to purchase Google Play gift cards worth $4,789 and read me the codes.", score: 0.85, features: { urgency: 0.8, financial_terms: 0.9, gift_card_mention: 1.0, unusual_payment: 1.0 } },
+      { text: "This is the only way to avoid criminal prosecution. Do it now.", score: 0.92, features: { urgency: 1.0, threat_language: 0.95, time_pressure: 1.0, coercion: 0.9, unusual_payment: 0.8 } },
+      { text: "Are you at the store yet? You need to hurry, the deadline is in one hour.", score: 0.95, features: { urgency: 1.0, time_pressure: 1.0, coercion: 0.85, unusual_payment: 0.7 } },
+    ],
+  },
+  tech_support: {
+    description: 'Tech Support Scam',
+    lines: [
+      { text: "Hi, this is Mike from Microsoft Technical Support department.", score: 0.12, features: { authority_claim: 0.3, tech_jargon: 0.1 } },
+      { text: "We have detected that your computer has been compromised by a virus.", score: 0.28, features: { urgency: 0.3, tech_jargon: 0.4, fear_induction: 0.3 } },
+      { text: "Hackers are currently stealing your personal information as we speak.", score: 0.45, features: { urgency: 0.6, fear_induction: 0.7, time_pressure: 0.5 } },
+      { text: "I need you to download a remote access tool so I can fix this for you.", score: 0.62, features: { urgency: 0.5, remote_access: 0.9, tech_jargon: 0.5, trust_request: 0.6 } },
+      { text: "Please go to this website and enter your computer password when prompted.", score: 0.78, features: { credential_request: 0.95, remote_access: 0.8, trust_request: 0.7 } },
+      { text: "Now I also need your bank details to process the security deposit of $299.", score: 0.91, features: { financial_terms: 0.9, credential_request: 0.8, specific_amount: 0.7, trust_request: 0.6 } },
+    ],
+  },
+  bank_fraud: {
+    description: 'Bank Fraud Call',
+    lines: [
+      { text: "Good afternoon, this is the fraud prevention department at First National Bank.", score: 0.10, features: { authority_claim: 0.3, financial_terms: 0.2 } },
+      { text: "We noticed some suspicious activity on your account ending in 4821.", score: 0.22, features: { authority_claim: 0.3, financial_terms: 0.4, specific_detail: 0.3 } },
+      { text: "Someone attempted to make a purchase of $2,340 at an electronics store.", score: 0.30, features: { financial_terms: 0.5, urgency: 0.3, specific_amount: 0.4 } },
+      { text: "To verify your identity, I need you to confirm your full Social Security number.", score: 0.65, features: { credential_request: 0.95, authority_claim: 0.4, pii_request: 0.9 } },
+      { text: "I also need your online banking password and the PIN for your debit card.", score: 0.88, features: { credential_request: 1.0, pii_request: 1.0, financial_terms: 0.7 } },
+      { text: "Please also share the verification code that was just sent to your phone.", score: 0.93, features: { credential_request: 0.9, mfa_bypass: 1.0, urgency: 0.6 } },
+    ],
+  },
+  legitimate: {
+    description: 'Legitimate Call',
+    lines: [
+      { text: "Hi, this is Sarah from Dr. Thompson's office calling about your appointment.", score: 0.03, features: { authority_claim: 0.05 } },
+      { text: "We have you scheduled for next Tuesday at 2:30 PM for your annual checkup.", score: 0.02, features: {} },
+      { text: "I wanted to confirm that the time still works for you.", score: 0.01, features: {} },
+      { text: "Also, please remember to bring your insurance card and a photo ID.", score: 0.04, features: { pii_request: 0.05 } },
+      { text: "If you need to reschedule, you can call us back at the number on our website.", score: 0.02, features: {} },
+      { text: "Thank you, and we look forward to seeing you next week. Have a great day!", score: 0.01, features: {} },
+    ],
+  },
+}
+
+const AVAILABLE_CALLS = Object.entries(SAMPLE_CALLS).map(([id, call]) => ({
+  id,
+  description: call.description,
+}))
+
+type AlertLevel = 'safe' | 'low' | 'medium' | 'high' | 'critical'
+
+function getAlertLevel(score: number): AlertLevel {
+  if (score < 0.15) return 'safe'
+  if (score < 0.3) return 'low'
+  if (score < 0.5) return 'medium'
+  if (score < 0.75) return 'high'
+  return 'critical'
+}
+
+type Tab = 'detection' | 'privacy' | 'federated'
+
+interface AudioDevice {
+  index: number
+  name: string
+  max_input_channels: number
+  default_samplerate: number
+}
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState<Tab>('detection')
+  const [isCallActive, setIsCallActive] = useState(false)
+  const [isMicActive, setIsMicActive] = useState(true)
+  const [callDuration, setCallDuration] = useState(0)
+  const [currentCallId, setCurrentCallId] = useState<string | null>(null)
+  const [sentences, setSentences] = useState<Array<{ text: string; score: number; index: number }>>([])
+  const [currentScore, setCurrentScore] = useState(0)
+  const [emaScore, setEmaScore] = useState(0)
+  const [features, setFeatures] = useState<Record<string, number>>({})
+  const [alertDismissed, setAlertDismissed] = useState(false)
+  const [fraudSignalReceived, setFraudSignalReceived] = useState(false)
+  const [privacySentences, setPrivacySentences] = useState<Array<{ text: string; score: number; features: Record<string, number> }>>([])
+  const [gradientVectors, setGradientVectors] = useState<number[][]>([])
+  const [isBackendDriven, setIsBackendDriven] = useState(false)
+  const [audioDevices, setAudioDevices] = useState<AudioDevice[]>([])
+  const [selectedInputDevice, setSelectedInputDevice] = useState<string>('')
+  const [callHistory, setCallHistory] = useState<CallHistoryEntry[]>([])
+
+  const durationRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const speakCallerLine = useCallback((text: string) => {
+    if (!('speechSynthesis' in window)) {
+      return
+    }
+
+    // Keep caller speech readable and avoid queued overlap.
+    window.speechSynthesis.cancel()
+    const utterance = new SpeechSynthesisUtterance(text)
+    utterance.rate = 0.95
+    utterance.pitch = 0.95
+    window.speechSynthesis.speak(utterance)
+  }, [])
+
+  // WebSocket hook for live backend connection
+  const wsUrl = currentCallId
+    ? (() => {
+        const params = new URLSearchParams()
+        const isScriptedCall = currentCallId !== 'live_mic'
+        if (isScriptedCall || isMicActive) {
+          params.set('interactive', '1')
+        }
+        if (selectedInputDevice) {
+          params.set('input_device', selectedInputDevice)
+        }
+        const qs = params.toString()
+        const wsBase = import.meta.env.DEV
+          ? 'ws://localhost:8000'
+          : `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}`
+        return `${wsBase}/ws/call/${currentCallId}${qs ? `?${qs}` : ''}`
+      })()
+    : ''
+
+  const { connect, disconnect, send, isConnected } = useWebSocket({
+    url: wsUrl,
+    onMessage: (data) => {
+      if (data.type === 'call_start') {
+        setIsBackendDriven(true)
+        return
+      }
+
+      if (data.type === 'sentence') {
+        const speaker = data.speaker === 'you' ? 'You' : 'Scammer'
+        const isUser = data.speaker === 'you'
+        const displayScore = isUser
+          ? (data.raw_score ?? 0)
+          : (data.ema_score ?? data.raw_score ?? 0)
+        const newSentence = {
+          text: `[${speaker}] ${data.text}`,
+          score: displayScore,
+          index: data.index ?? 0,
+        }
+        setSentences(prev => [...prev, newSentence])
+        if (!isUser) {
+          setCurrentScore(data.raw_score ?? 0)
+          setEmaScore(data.ema_score ?? data.raw_score ?? 0)
+          if (data.features) setFeatures(data.features)
+        }
+        setPrivacySentences(prev => [
+          ...prev,
+          {
+            text: data.text,
+            score: displayScore,
+            features: data.features ?? {},
+          },
+        ])
+
+        // In scripted call mode, play the caller sentence aloud.
+        if (data.speaker !== 'you' && currentCallId !== 'live_mic') {
+          speakCallerLine(data.text)
+        }
+        return
+      }
+
+      if (data.type === 'fraud_detected') {
+        setFraudSignalReceived(true)
+        setAlertDismissed(false)
+        if (typeof data.ema_score === 'number') {
+          setEmaScore(data.ema_score)
+        }
+        if (Array.isArray(data.reasons) && data.reasons.length > 0) {
+          const mapped: Record<string, number> = {}
+          data.reasons.forEach((reason: string, idx: number) => {
+            mapped[`reason_${idx + 1}_${reason.toLowerCase().replace(/[^a-z0-9]+/g, '_')}`] = 1
+          })
+          setFeatures(mapped)
+        }
+        return
+      }
+
+      if (data.type === 'waiting_for_reply') {
+        setSentences(prev => [
+          ...prev,
+          {
+            text: `[System] Your turn: speak now (window ${data.timeout_seconds ?? 15}s)`,
+            score: 0,
+            index: prev.length,
+          },
+        ])
+        return
+      }
+
+      if (data.type === 'user_timeout') {
+        setSentences(prev => [
+          ...prev,
+          {
+            text: '[System] No reply detected, continuing call flow.',
+            score: 0,
+            index: prev.length,
+          },
+        ])
+        return
+      }
+
+      if (data.type === 'user_echo_detected') {
+        setSentences(prev => [
+          ...prev,
+          {
+            text: `[System] ${data.message}`,
+            score: 0,
+            index: prev.length,
+          },
+        ])
+        return
+      }
+
+      if (data.type === 'call_end' || data.type === 'call_blocked') {
+        setIsCallActive(false)
+        setCurrentCallId(null)
+        setFraudSignalReceived(false)
+        if (durationRef.current) {
+          clearInterval(durationRef.current)
+          durationRef.current = null
+        }
+        if ('speechSynthesis' in window) {
+          window.speechSynthesis.cancel()
+        }
+        return
+      }
+
+      if (data.type === 'error') {
+        console.error('Backend error:', data.message)
+        setSentences(prev => [
+          ...prev,
+          {
+            text: `[System] ${data.message}`,
+            score: 0,
+            index: prev.length,
+          },
+        ])
+      }
+    },
+    onOpen: () => console.log('WebSocket connected'),
+    onClose: () => {
+      console.log('WebSocket disconnected')
+      setIsBackendDriven(false)
+    },
+    autoConnect: false,
+  })
+
+  const startCall = useCallback((callId: string) => {
+    if (!SAMPLE_CALLS[callId]) return
+
+    // Reset state
+    setSentences([])
+    setCurrentScore(0)
+    setEmaScore(0)
+    setFeatures({})
+    setAlertDismissed(false)
+    setFraudSignalReceived(false)
+    setCallDuration(0)
+    setCurrentCallId(callId)
+    setIsCallActive(true)
+    setPrivacySentences([])
+    setGradientVectors([])
+    setIsBackendDriven(false)
+
+    // Start duration timer
+    if (durationRef.current) {
+      clearInterval(durationRef.current)
+    }
+    durationRef.current = setInterval(() => {
+      setCallDuration(prev => prev + 1)
+    }, 1000)
+  }, [])
+
+  useEffect(() => {
+    const loadAudioDevices = async () => {
+      try {
+        const apiBase = import.meta.env.DEV ? 'http://localhost:8000' : ''
+        const resp = await fetch(`${apiBase}/api/audio-devices`)
+        const data = await resp.json()
+        const devices: AudioDevice[] = Array.isArray(data.devices) ? data.devices : []
+        setAudioDevices(devices)
+        if (devices.length > 0) {
+          setSelectedInputDevice(String(devices[0].index))
+        }
+      } catch {
+        setAudioDevices([])
+      }
+    }
+
+    void loadAudioDevices()
+  }, [])
+
+  const localPlaybackRef = useRef<ReturnType<typeof setTimeout>[]>([])
+
+  useEffect(() => {
+    if (!isCallActive || !currentCallId) return
+
+    // Try WebSocket first
+    connect()
+
+    // After a short delay, check if backend connected.
+    // If not, run local playback with built-in scripts.
+    const fallbackTimer = setTimeout(() => {
+      if (!isBackendDriven && currentCallId) {
+        const call = SAMPLE_CALLS[currentCallId]
+        if (!call) return
+
+        let ema = 0
+        const alpha = 0.3
+
+        call.lines.forEach((line, i) => {
+          const timer = setTimeout(() => {
+            ema = i === 0 ? line.score : alpha * line.score + (1 - alpha) * ema
+            setSentences(prev => [...prev, { text: line.text, score: line.score, index: i }])
+            setCurrentScore(line.score)
+            setEmaScore(ema)
+            setFeatures(line.features)
+            setPrivacySentences(prev => [...prev, { text: line.text, score: line.score, features: line.features }])
+            if (ema >= 0.5) setFraudSignalReceived(true)
+          }, (i + 1) * 3000)
+          localPlaybackRef.current.push(timer)
+        })
+      }
+    }, 2000)
+
+    return () => {
+      clearTimeout(fallbackTimer)
+      localPlaybackRef.current.forEach(t => clearTimeout(t))
+      localPlaybackRef.current = []
+    }
+  }, [isCallActive, currentCallId, connect, isBackendDriven])
+
+  // Record a completed call into history
+  const recordCallHistory = useCallback((outcome: 'Blocked' | 'Dismissed' | 'Completed') => {
+    if (!currentCallId) return
+    const call = SAMPLE_CALLS[currentCallId]
+    if (!call) return
+
+    // Gather top features from all sentences seen so far
+    const featureCounts: Record<string, number> = {}
+    privacySentences.forEach(s => {
+      Object.entries(s.features).forEach(([k, v]) => {
+        if (v > 0.3) {
+          featureCounts[k] = Math.max(featureCounts[k] ?? 0, v)
+        }
+      })
+    })
+    const topFeatures = Object.entries(featureCounts)
+      .sort(([, a], [, b]) => b - a)
+      .slice(0, 5)
+      .map(([k]) => k)
+
+    const peakScore = sentences.reduce((max, s) => Math.max(max, s.score), 0)
+
+    const entry: CallHistoryEntry = {
+      id: `${currentCallId}_${Date.now()}`,
+      callType: currentCallId,
+      callLabel: call.description,
+      duration: callDuration,
+      peakScore,
+      finalScore: emaScore,
+      outcome,
+      timestamp: Date.now(),
+      totalSentences: sentences.length,
+      topFeatures,
+    }
+    setCallHistory(prev => [entry, ...prev])
+  }, [currentCallId, callDuration, emaScore, sentences, privacySentences])
+
+  const endCall = useCallback(() => {
+    recordCallHistory('Completed')
+    setIsCallActive(false)
+    setCurrentCallId(null)
+    if (durationRef.current) {
+      clearInterval(durationRef.current)
+      durationRef.current = null
+    }
+    if ('speechSynthesis' in window) {
+      window.speechSynthesis.cancel()
+    }
+    disconnect()
+  }, [disconnect, recordCallHistory])
+
+  const blockCaller = useCallback(() => {
+    send({ action: 'block' })
+    endCall()
+  }, [endCall, send])
+
+  const dismissAlert = useCallback(() => {
+    send({ action: 'dismiss' })
+    setAlertDismissed(true)
+  }, [send])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (durationRef.current) clearInterval(durationRef.current)
+      if ('speechSynthesis' in window) {
+        window.speechSynthesis.cancel()
+      }
+    }
+  }, [])
+
+  const alertLevel = getAlertLevel(emaScore)
+  const effectiveAlertLevel = alertDismissed || !fraudSignalReceived ? 'safe' : alertLevel
+  const callerNames: Record<string, string> = {
+    live_mic: 'Live Microphone',
+    irs_scam: 'Officer James Wilson',
+    tech_support: 'Mike - Microsoft',
+    bank_fraud: 'First National Bank',
+    legitimate: "Dr. Thompson's Office",
+  }
+  const callerNumbers: Record<string, string> = {
+    live_mic: 'On-device audio stream',
+    irs_scam: '+1 (202) 555-0147',
+    tech_support: '+1 (800) 555-0199',
+    bank_fraud: '+1 (312) 555-0183',
+    legitimate: '+1 (415) 555-0126',
+  }
+
+  const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
+    { id: 'detection', label: 'Live Detection', icon: <Radio className="w-4 h-4" /> },
+    { id: 'privacy', label: 'Privacy Demo', icon: <Lock className="w-4 h-4" /> },
+    { id: 'federated', label: 'Federated Learning', icon: <GitBranch className="w-4 h-4" /> },
+  ]
+  const isDetectionLoading = isCallActive && sentences.length === 0
+
+  return (
+    <div className="min-h-screen bg-dark-bg text-gray-100 font-sans">
+      {/* Header */}
+      <header className="border-b border-dark-border/50 bg-dark-card/50 backdrop-blur-xl sticky top-0 z-50">
+        <div className="mx-auto flex max-w-[1440px] flex-col gap-4 px-4 py-4 sm:px-6 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <Shield className="w-8 h-8 text-brand-teal" />
+              <div className="absolute -top-0.5 -right-0.5 w-2.5 h-2.5 bg-safe rounded-full animate-pulse" />
+            </div>
+            <div>
+              <h1 className="text-xl font-bold tracking-tight">
+                <span className="text-brand-teal">Sentinel</span>
+                <span className="text-white">Edge</span>
+              </h1>
+              <p className="text-[10px] text-gray-500 font-medium tracking-widest uppercase">
+                Federated Edge AI Fraud Detection
+              </p>
+            </div>
+          </div>
+
+          {/* Tabs */}
+          <nav className="flex flex-wrap items-center gap-2">
+            {tabs.map(tab => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`control-button px-3 py-2 text-sm font-medium sm:px-4 ${
+                  activeTab === tab.id
+                    ? 'border-brand-teal/30 bg-brand-teal/10 text-brand-teal'
+                    : 'text-gray-400 hover:text-gray-200 hover:bg-white/5'
+                }`}
+              >
+                {tab.icon}
+                {tab.label}
+              </button>
+            ))}
+          </nav>
+
+          {/* Status indicator */}
+          <div className="flex items-center gap-2 text-xs lg:justify-end">
+            <Activity className={`w-3.5 h-3.5 ${isConnected ? 'text-safe' : 'text-gray-500'}`} />
+            <span className={isConnected ? 'text-safe' : 'text-gray-500'}>
+              {isConnected ? 'Backend Connected' : isBackendDriven ? 'Reconnecting...' : 'Backend Disconnected'}
+            </span>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="mx-auto max-w-[1440px] px-4 py-5 sm:px-6 sm:py-6">
+        {activeTab === 'detection' && (
+          <div className="space-y-6">
+            {/* Demo Controls */}
+            <DemoControls
+              onSelectCall={startCall}
+              onToggleMic={() => setIsMicActive(!isMicActive)}
+              onSelectMicDevice={setSelectedInputDevice}
+              isCallActive={isCallActive}
+              isMicActive={isMicActive}
+              selectedMicDevice={selectedInputDevice}
+              micDevices={audioDevices.map(d => ({ value: String(d.index), label: `${d.index}: ${d.name}` }))}
+              availableCalls={AVAILABLE_CALLS}
+            />
+
+            {/* Main detection layout */}
+            <div className="grid grid-cols-1 gap-6 lg:grid-cols-12">
+              {/* Phone Simulator */}
+              <div className="flex justify-center lg:col-span-4 lg:justify-start">
+                <PhoneSimulator>
+                  <CallScreen
+                    callerName={currentCallId ? callerNames[currentCallId] ?? 'Unknown' : 'No Active Call'}
+                    callerNumber={currentCallId ? callerNumbers[currentCallId] ?? '' : ''}
+                    duration={callDuration}
+                    isActive={isCallActive}
+                    onEndCall={endCall}
+                    onBlock={blockCaller}
+                    onDismissAlert={dismissAlert}
+                    alertLevel={effectiveAlertLevel}
+                    alertReasons={
+                      Object.entries(features)
+                        .filter(([, v]) => v > 0.5)
+                        .sort(([, a], [, b]) => b - a)
+                        .map(([k]) => k.replace(/_/g, ' '))
+                    }
+                    fraudScore={emaScore}
+                  />
+                </PhoneSimulator>
+              </div>
+
+              {/* Right side panels */}
+              <div className="space-y-6 lg:col-span-8">
+                {/* Score + Features row */}
+                <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+                  <div className="glass-card p-6 glow-teal">
+                    {isDetectionLoading ? (
+                      <div className="panel-skeleton">
+                        <div className="mx-auto h-48 w-48 rounded-full skeleton-block" />
+                        <div className="mx-auto h-4 w-32 skeleton-block" />
+                        <div className="mx-auto h-3 w-40 skeleton-block" />
+                      </div>
+                    ) : (
+                      <ScoreGauge score={emaScore} label="Fraud Score (EMA)" />
+                    )}
+                  </div>
+                  <div className="glass-card p-6">
+                    {isDetectionLoading ? (
+                      <div className="panel-skeleton">
+                        {[0, 1, 2, 3].map(item => (
+                          <div key={item} className="panel-skeleton-card space-y-2">
+                            <div className="flex items-center justify-between gap-3">
+                              <div className="h-3 w-24 skeleton-block" />
+                              <div className="h-3 w-10 skeleton-block" />
+                            </div>
+                            <div className="h-2 w-full rounded-full skeleton-block" />
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <FeatureBreakdown features={features} />
+                    )}
+                  </div>
+                </div>
+
+                {/* Transcript */}
+                <div className="glass-card p-6">
+                  {isDetectionLoading ? (
+                    <div className="panel-skeleton">
+                      {[0, 1, 2].map(item => (
+                        <div key={item} className="panel-skeleton-card space-y-3">
+                          <div className="h-3 w-20 skeleton-block" />
+                          <div className="h-3 w-full skeleton-block" />
+                          <div className="h-3 w-5/6 skeleton-block" />
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <TranscriptPanel
+                      sentences={sentences}
+                      isStreaming={isCallActive}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Call History - collapsible section below main content */}
+            <CallHistory entries={callHistory} />
+          </div>
+        )}
+
+        {activeTab === 'privacy' && (
+          <PrivacyDemo
+            sentences={privacySentences}
+            gradientVectors={gradientVectors}
+            isCallActive={isCallActive}
+          />
+        )}
+
+        {activeTab === 'federated' && (
+          <FederatedDashboard />
+        )}
+      </main>
+    </div>
+  )
+}

demo/frontend/src/components/CallHistory.tsx

@@ -0,0 +1,240 @@
+import { useState } from 'react'
+import {
+  ChevronDown,
+  ChevronUp,
+  Phone,
+  AlertTriangle,
+  Shield,
+  Clock,
+} from 'lucide-react'
+
+// -------- Types --------
+export interface CallHistoryEntry {
+  id: string
+  callType: string
+  callLabel: string
+  duration: number         // seconds
+  peakScore: number
+  finalScore: number
+  outcome: 'Blocked' | 'Dismissed' | 'Completed'
+  timestamp: number        // Date.now()
+  totalSentences: number
+  topFeatures: string[]
+}
+
+interface CallHistoryProps {
+  entries: CallHistoryEntry[]
+}
+
+// -------- Helpers --------
+function formatDuration(seconds: number): string {
+  const mins = Math.floor(seconds / 60)
+  const secs = seconds % 60
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+function relativeTime(timestamp: number): string {
+  const diff = Math.floor((Date.now() - timestamp) / 1000)
+  if (diff < 5) return 'just now'
+  if (diff < 60) return `${diff}s ago`
+  const mins = Math.floor(diff / 60)
+  if (mins < 60) return `${mins} minute${mins !== 1 ? 's' : ''} ago`
+  const hours = Math.floor(mins / 60)
+  return `${hours} hour${hours !== 1 ? 's' : ''} ago`
+}
+
+function getOutcomeStyle(outcome: string): { bg: string; text: string } {
+  switch (outcome) {
+    case 'Blocked':
+      return { bg: 'bg-alert/10', text: 'text-alert' }
+    case 'Dismissed':
+      return { bg: 'bg-warning/10', text: 'text-warning' }
+    case 'Completed':
+    default:
+      return { bg: 'bg-safe/10', text: 'text-safe' }
+  }
+}
+
+function getScoreColor(score: number): string {
+  if (score < 0.3) return 'text-safe'
+  if (score < 0.5) return 'text-warning'
+  if (score < 0.75) return 'text-orange-400'
+  return 'text-alert'
+}
+
+function getScoreBgColor(score: number): string {
+  if (score < 0.3) return 'bg-safe/10'
+  if (score < 0.5) return 'bg-warning/10'
+  if (score < 0.75) return 'bg-orange-500/10'
+  return 'bg-alert/10'
+}
+
+function getCallIcon(callType: string) {
+  switch (callType) {
+    case 'irs_scam':
+    case 'tech_support':
+    case 'bank_fraud':
+      return <AlertTriangle className="w-4 h-4" />
+    case 'legitimate':
+      return <Shield className="w-4 h-4" />
+    default:
+      return <Phone className="w-4 h-4" />
+  }
+}
+
+function getCallIconColor(callType: string): string {
+  switch (callType) {
+    case 'irs_scam':
+      return 'text-alert bg-alert/10'
+    case 'tech_support':
+      return 'text-orange-400 bg-orange-500/10'
+    case 'bank_fraud':
+      return 'text-warning bg-warning/10'
+    case 'legitimate':
+      return 'text-safe bg-safe/10'
+    default:
+      return 'text-gray-400 bg-gray-700/30'
+  }
+}
+
+// -------- Component --------
+export default function CallHistory({ entries }: CallHistoryProps) {
+  const [isExpanded, setIsExpanded] = useState(true)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const selectedEntry = entries.find(e => e.id === selectedId) ?? null
+
+  return (
+    <div className="glass-card overflow-hidden">
+      {/* Collapsible header */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between px-4 py-4 hover:bg-white/[0.02] transition-colors sm:px-6"
+      >
+        <div className="flex items-center gap-2.5">
+          <Clock className="w-4 h-4 text-brand-teal" />
+          <h3 className="text-sm font-semibold text-gray-200">Recent Calls</h3>
+          {entries.length > 0 && (
+            <span className="text-[10px] px-2 py-0.5 rounded-full bg-brand-teal/10 text-brand-teal font-medium tabular-nums">
+              {entries.length}
+            </span>
+          )}
+        </div>
+        {isExpanded ? (
+          <ChevronUp className="w-4 h-4 text-gray-500" />
+        ) : (
+          <ChevronDown className="w-4 h-4 text-gray-500" />
+        )}
+      </button>
+
+      {/* Body */}
+      {isExpanded && (
+        <div className="border-t border-dark-border/30">
+          {entries.length === 0 ? (
+            /* Empty state */
+            <div className="flex flex-col items-center justify-center py-10 px-6">
+              <Phone className="w-8 h-8 text-gray-700 mb-3" />
+              <p className="text-sm text-gray-500 font-medium">No calls yet.</p>
+              <p className="text-xs text-gray-600 mt-1">Start a sample call to see results here.</p>
+            </div>
+          ) : (
+            <div className="divide-y divide-dark-border/20">
+              {entries.map((entry) => (
+                <div key={entry.id}>
+                  {/* Row */}
+                  <button
+                    onClick={() => setSelectedId(selectedId === entry.id ? null : entry.id)}
+                    className="w-full flex flex-col items-start gap-3 px-4 py-3.5 text-left hover:bg-white/[0.02] transition-colors sm:px-6 lg:flex-row lg:items-center lg:gap-4"
+                  >
+                    {/* Call type icon */}
+                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${getCallIconColor(entry.callType)}`}>
+                      {getCallIcon(entry.callType)}
+                    </div>
+
+                    {/* Call info */}
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-gray-200 truncate">
+                        {entry.callLabel}
+                      </p>
+                      <p className="text-[10px] text-gray-500 mt-0.5">
+                        {relativeTime(entry.timestamp)}
+                      </p>
+                    </div>
+
+                    {/* Duration */}
+                    <div className="flex items-center gap-1.5 text-xs text-gray-400 lg:flex-shrink-0">
+                      <Clock className="w-3 h-3" />
+                      <span className="font-mono tabular-nums">{formatDuration(entry.duration)}</span>
+                    </div>
+
+                    {/* Final score badge */}
+                    <div className={`flex-shrink-0 px-2.5 py-1 rounded-lg ${getScoreBgColor(entry.finalScore)}`}>
+                      <span className={`text-xs font-bold tabular-nums ${getScoreColor(entry.finalScore)}`}>
+                        {(entry.finalScore * 100).toFixed(0)}%
+                      </span>
+                    </div>
+
+                    {/* Outcome badge */}
+                    <div>
+                      <span className={`text-[10px] font-semibold px-2 py-1 rounded-full ${getOutcomeStyle(entry.outcome).bg} ${getOutcomeStyle(entry.outcome).text}`}>
+                        {entry.outcome}
+                      </span>
+                    </div>
+
+                    {/* Expand indicator */}
+                    {selectedId === entry.id ? (
+                      <ChevronUp className="w-3.5 h-3.5 text-gray-600 flex-shrink-0" />
+                    ) : (
+                      <ChevronDown className="w-3.5 h-3.5 text-gray-600 flex-shrink-0" />
+                    )}
+                  </button>
+
+                  {/* Expanded detail */}
+                  {selectedId === entry.id && (
+                    <div className="px-4 pb-4 animate-fade-in sm:px-6">
+                      <div className="rounded-xl border border-dark-border/20 bg-dark-bg/50 p-4 space-y-3 lg:ml-12">
+                        {/* Summary row */}
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                          <div>
+                            <p className="text-[10px] text-gray-600 uppercase tracking-wider mb-1">Total Sentences</p>
+                            <p className="text-sm font-bold text-gray-200 tabular-nums">{entry.totalSentences}</p>
+                          </div>
+                          <div>
+                            <p className="text-[10px] text-gray-600 uppercase tracking-wider mb-1">Peak Score</p>
+                            <p className={`text-sm font-bold tabular-nums ${getScoreColor(entry.peakScore)}`}>
+                              {(entry.peakScore * 100).toFixed(1)}%
+                            </p>
+                          </div>
+                          <div>
+                            <p className="text-[10px] text-gray-600 uppercase tracking-wider mb-1">Final Score</p>
+                            <p className={`text-sm font-bold tabular-nums ${getScoreColor(entry.finalScore)}`}>
+                              {(entry.finalScore * 100).toFixed(1)}%
+                            </p>
+                          </div>
+                        </div>
+
+                        {/* Top features */}
+                        {entry.topFeatures.length > 0 && (
+                          <div>
+                            <p className="text-[10px] text-gray-600 uppercase tracking-wider mb-1.5">Top Features</p>
+                            <div className="flex flex-wrap gap-1.5">
+                              {entry.topFeatures.map((feature) => (
+                                <span key={feature} className="text-[10px] px-2 py-0.5 bg-brand-teal/10 text-brand-teal rounded-full">
+                                  {feature.replace(/_/g, ' ')}
+                                </span>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

demo/frontend/src/components/CallScreen.tsx

@@ -0,0 +1,238 @@
+import { useEffect, useState } from 'react'
+import {
+  Phone,
+  PhoneOff,
+  Mic,
+  MicOff,
+  Volume2,
+  Grid3X3,
+  UserCircle2,
+  Wifi,
+  Battery,
+  Signal,
+  Camera,
+} from 'lucide-react'
+import FraudAlert from './FraudAlert'
+
+interface CallScreenProps {
+  callerName: string
+  callerNumber: string
+  duration: number
+  isActive: boolean
+  onEndCall: () => void
+  onBlock: () => void
+  onDismissAlert: () => void
+  alertLevel: 'safe' | 'low' | 'medium' | 'high' | 'critical'
+  alertReasons: string[]
+  fraudScore: number
+}
+
+function formatDuration(seconds: number): string {
+  const mins = Math.floor(seconds / 60)
+  const secs = seconds % 60
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+function getCurrentTime(): string {
+  const now = new Date()
+  return now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
+}
+
+export default function CallScreen({
+  callerName,
+  callerNumber,
+  duration,
+  isActive,
+  onEndCall,
+  onBlock,
+  onDismissAlert,
+  alertLevel,
+  alertReasons,
+  fraudScore,
+}: CallScreenProps) {
+  const [isMuted, setIsMuted] = useState(false)
+  const [isSpeaker, setIsSpeaker] = useState(false)
+  const [isScreenShaking, setIsScreenShaking] = useState(false)
+
+  const showAlert = isActive && (alertLevel === 'high' || alertLevel === 'critical' || alertLevel === 'medium')
+  const callerInitials = callerName
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(part => part[0]?.toUpperCase())
+    .join('')
+
+  useEffect(() => {
+    if (!showAlert) return
+
+    setIsScreenShaking(true)
+    const timeout = window.setTimeout(() => {
+      setIsScreenShaking(false)
+    }, 480)
+
+    return () => window.clearTimeout(timeout)
+  }, [showAlert, alertLevel])
+
+  return (
+    <div className={`w-full h-full flex flex-col bg-gradient-to-b from-dark-bg via-dark-card to-dark-bg ${isScreenShaking ? 'phone-screen-shake' : ''}`}>
+      {/* Status bar */}
+      <div className="relative z-30 flex items-center justify-between px-7 pt-4 pb-2 text-[11px] text-white/85">
+        <span className="min-w-[52px] font-semibold tracking-[0.01em]">{getCurrentTime()}</span>
+        <div className="w-[126px]" />
+        <div className="flex min-w-[56px] items-center justify-end gap-1.5">
+          <Signal className="h-3.5 w-3.5 stroke-[2.2]" />
+          <Wifi className="h-3.5 w-3.5 stroke-[2.2]" />
+          <Battery className="h-3.5 w-3.5 stroke-[2.2]" />
+        </div>
+      </div>
+
+      {/* Fraud Alert Overlay */}
+      {showAlert && (
+        <div className="absolute inset-0 z-20 pt-[42px]">
+          <FraudAlert
+            riskLevel={alertLevel as 'medium' | 'high' | 'critical'}
+            score={fraudScore}
+            reasons={alertReasons}
+            onBlock={onBlock}
+            onDismiss={onDismissAlert}
+          />
+        </div>
+      )}
+
+      {/* Main call content */}
+      <div className="flex-1 flex flex-col items-center justify-center px-6 relative">
+        {isActive ? (
+          <>
+            {/* Caller avatar */}
+            <div className="relative mb-4">
+              <div className={`relative w-[92px] h-[92px] rounded-full flex items-center justify-center overflow-hidden shadow-[0_20px_45px_rgba(15,23,42,0.38)] ${
+                alertLevel === 'critical' ? 'ring-2 ring-alert/80 animate-pulse-alert' :
+                alertLevel === 'high' ? 'ring-2 ring-warning/80' :
+                'ring-2 ring-brand-teal/50'
+              }`}>
+                <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_28%,rgba(255,255,255,0.28),transparent_28%),linear-gradient(160deg,#8892a6_0%,#646f84_45%,#3b4456_100%)]" />
+                <div className="absolute inset-x-5 bottom-0 h-[44px] rounded-t-[28px] bg-white/18 blur-[1px]" />
+                <div className="absolute left-1/2 top-[18px] h-[26px] w-[26px] -translate-x-1/2 rounded-full bg-white/28" />
+                <div className="absolute left-1/2 top-[38px] h-[34px] w-[54px] -translate-x-1/2 rounded-t-[26px] bg-white/22" />
+                <div className="absolute inset-0 bg-gradient-to-b from-white/5 via-transparent to-black/25" />
+                <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/28 px-2 py-0.5 backdrop-blur-sm">
+                  <span className="text-[10px] font-semibold tracking-[0.2em] text-white/88">{callerInitials || 'CP'}</span>
+                </div>
+              </div>
+
+              <div className="absolute -top-1 -right-1 rounded-full border border-white/10 bg-black/45 p-1.5 shadow-lg backdrop-blur-md">
+                <Camera className="h-3.5 w-3.5 text-white/75" />
+              </div>
+
+              {/* SentinelEdge protection badge */}
+              <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-dark-card border-2 border-brand-teal flex items-center justify-center">
+                <div className="w-2 h-2 rounded-full bg-brand-teal" />
+              </div>
+            </div>
+
+            {/* Caller info */}
+            <h2 className="text-lg font-semibold text-white text-center leading-tight">{callerName}</h2>
+            <p className="text-xs text-gray-400 mt-0.5 font-mono">{callerNumber}</p>
+
+            {/* Call timer */}
+            <div className="mt-3 flex items-center gap-2">
+              <div className={`w-1.5 h-1.5 rounded-full ${
+                alertLevel === 'critical' ? 'bg-alert animate-pulse' :
+                alertLevel === 'high' ? 'bg-warning animate-pulse' :
+                'bg-safe animate-pulse'
+              }`} />
+              <span className="text-sm text-gray-300 font-mono tabular-nums">
+                {formatDuration(duration)}
+              </span>
+            </div>
+
+            {/* SentinelEdge status line */}
+            <div className="mt-2 px-3 py-1 rounded-full bg-dark-card/80 border border-dark-border/50">
+              <p className="text-[9px] text-gray-500 tracking-wider uppercase flex items-center gap-1">
+                <span className={`inline-block w-1 h-1 rounded-full ${
+                  alertLevel === 'critical' || alertLevel === 'high' ? 'bg-alert' : 'bg-safe'
+                }`} />
+                SentinelEdge Active
+              </p>
+            </div>
+
+            {callerName === 'Live Microphone' && (
+              <div className="mt-3 px-3 py-2 rounded-lg bg-brand-teal/10 border border-brand-teal/25">
+                <p className="text-[10px] text-brand-teal text-center tracking-wide uppercase">
+                  Speak now: live mic analysis in progress
+                </p>
+              </div>
+            )}
+          </>
+        ) : (
+          /* Idle state */
+          <div className="text-center">
+            <div className="w-20 h-20 rounded-full bg-dark-card flex items-center justify-center mx-auto mb-4 ring-1 ring-dark-border">
+              <Phone className="w-10 h-10 text-gray-600" />
+            </div>
+            <h2 className="text-lg font-medium text-gray-500">No Active Call</h2>
+            <p className="text-xs text-gray-600 mt-1">Select a sample call to begin</p>
+          </div>
+        )}
+      </div>
+
+      {/* Bottom action buttons */}
+      {isActive && (
+        <div className="pb-10 px-6">
+          {/* Action row */}
+          <div className="grid grid-cols-4 gap-4 mb-6">
+            <button
+              onClick={() => setIsMuted(!isMuted)}
+              className="flex flex-col items-center gap-1"
+            >
+              <div className={`w-11 h-11 rounded-full flex items-center justify-center transition-colors ${
+                isMuted ? 'bg-white text-black' : 'bg-dark-surface/80 text-white'
+              }`}>
+                {isMuted ? <MicOff className="w-5 h-5" /> : <Mic className="w-5 h-5" />}
+              </div>
+              <span className="text-[9px] text-gray-400">
+                {isMuted ? 'unmute' : 'mute'}
+              </span>
+            </button>
+
+            <button className="flex flex-col items-center gap-1">
+              <div className="w-11 h-11 rounded-full bg-dark-surface/80 flex items-center justify-center text-white">
+                <Grid3X3 className="w-5 h-5" />
+              </div>
+              <span className="text-[9px] text-gray-400">keypad</span>
+            </button>
+
+            <button
+              onClick={() => setIsSpeaker(!isSpeaker)}
+              className="flex flex-col items-center gap-1"
+            >
+              <div className={`w-11 h-11 rounded-full flex items-center justify-center transition-colors ${
+                isSpeaker ? 'bg-white text-black' : 'bg-dark-surface/80 text-white'
+              }`}>
+                <Volume2 className="w-5 h-5" />
+              </div>
+              <span className="text-[9px] text-gray-400">speaker</span>
+            </button>
+
+            <button className="flex flex-col items-center gap-1">
+              <div className="w-11 h-11 rounded-full bg-dark-surface/80 flex items-center justify-center text-white">
+                <UserCircle2 className="w-5 h-5" />
+              </div>
+              <span className="text-[9px] text-gray-400">contacts</span>
+            </button>
+          </div>
+
+          {/* End call button */}
+          <div className="flex justify-center">
+            <button
+              onClick={onEndCall}
+              className="w-16 h-16 rounded-full bg-alert flex items-center justify-center hover:bg-alert-dark transition-colors shadow-lg shadow-alert/30 active:scale-95"
+            >
+              <PhoneOff className="w-7 h-7 text-white rotate-[135deg]" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

demo/frontend/src/components/DemoControls.tsx

@@ -0,0 +1,143 @@
+import { Play, Mic, MicOff, AlertTriangle, Phone, Shield } from 'lucide-react'
+
+interface DemoControlsProps {
+  onSelectCall: (callId: string) => void
+  onToggleMic: () => void
+  onSelectMicDevice: (deviceValue: string) => void
+  isCallActive: boolean
+  isMicActive: boolean
+  selectedMicDevice: string
+  micDevices: Array<{ value: string; label: string }>
+  availableCalls: Array<{ id: string; description: string }>
+}
+
+const callIcons: Record<string, { icon: React.ReactNode; color: string }> = {
+  irs_scam: {
+    icon: <AlertTriangle className="w-3.5 h-3.5" />,
+    color: 'hover:bg-alert/10 hover:text-alert hover:border-alert/30',
+  },
+  tech_support: {
+    icon: <AlertTriangle className="w-3.5 h-3.5" />,
+    color: 'hover:bg-orange-500/10 hover:text-orange-400 hover:border-orange-500/30',
+  },
+  bank_fraud: {
+    icon: <AlertTriangle className="w-3.5 h-3.5" />,
+    color: 'hover:bg-warning/10 hover:text-warning hover:border-warning/30',
+  },
+  legitimate: {
+    icon: <Shield className="w-3.5 h-3.5" />,
+    color: 'hover:bg-safe/10 hover:text-safe hover:border-safe/30',
+  },
+}
+
+export default function DemoControls({
+  onSelectCall,
+  onToggleMic,
+  onSelectMicDevice,
+  isCallActive,
+  isMicActive,
+  selectedMicDevice,
+  micDevices,
+  availableCalls,
+}: DemoControlsProps) {
+  return (
+    <div className="glass-card p-4 sm:p-5">
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
+        {/* Left: sample calls */}
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+          <div className="flex items-center gap-2 mr-2">
+            <Phone className="w-4 h-4 text-brand-teal" />
+            <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+              Sample Calls
+            </span>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {availableCalls.map((call) => {
+              const config = callIcons[call.id] || {
+                icon: <Play className="w-3.5 h-3.5" />,
+                color: 'hover:bg-brand-teal/10 hover:text-brand-teal hover:border-brand-teal/30',
+              }
+              return (
+                <button
+                  key={call.id}
+                  onClick={() => onSelectCall(call.id)}
+                  disabled={isCallActive}
+                  className={`
+                    control-button px-3 py-2 text-xs font-medium
+                    ${isCallActive ? '' : config.color}
+                  `}
+                >
+                  <Play className="w-3 h-3" />
+                  {call.description}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Right: mic toggle */}
+        <div className="flex items-center gap-3">
+          <div className="h-6 w-px bg-dark-border/30" />
+          <div className="flex flex-col items-end gap-1">
+            <button
+              onClick={onToggleMic}
+              disabled={isCallActive}
+              className={`
+                flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-medium
+                transition-all duration-200 border
+                ${isMicActive
+                  ? 'bg-brand-teal/10 text-brand-teal border-brand-teal/30'
+                  : isCallActive
+                    ? 'opacity-40 cursor-not-allowed bg-dark-card text-gray-600 border-dark-border/50'
+                    : 'bg-dark-card text-gray-300 border-dark-border/50 hover:bg-brand-teal/10 hover:text-brand-teal hover:border-brand-teal/30'
+                }
+              `}
+            >
+              {isMicActive ? (
+                <Mic className="w-3.5 h-3.5" />
+              ) : (
+                <MicOff className="w-3.5 h-3.5" />
+              )}
+              Live Mic
+            </button>
+
+            {!isCallActive && (
+              <>
+                <span className={`text-[10px] ${isMicActive ? 'text-brand-teal/80' : 'text-gray-500'}`}>
+                  {isMicActive
+                    ? 'Mic is on for your side of role-play'
+                    : 'Scripted caller mode: backend plays sample scam call lines'}
+                </span>
+
+                <select
+                  value={selectedMicDevice}
+                  onChange={(e) => onSelectMicDevice(e.target.value)}
+                  className="px-2 py-1 text-[10px] bg-dark-card text-gray-300 border border-dark-border/50 rounded-md min-w-[260px]"
+                  disabled={isCallActive || micDevices.length === 0}
+                >
+                  {micDevices.length === 0 ? (
+                    <option value="">No input devices found</option>
+                  ) : (
+                    micDevices.map((device) => (
+                      <option key={device.value} value={device.value}>
+                        {device.label}
+                      </option>
+                    ))
+                  )}
+                </select>
+              </>
+            )}
+          </div>
+
+          {/* Status indicator */}
+          {isCallActive && (
+            <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-safe/10 border border-safe/20">
+              <div className="w-1.5 h-1.5 rounded-full bg-safe animate-pulse" />
+              <span className="text-[10px] text-safe font-medium">Call Active</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

demo/frontend/src/components/FeatureBreakdown.tsx

@@ -0,0 +1,165 @@
+import { BarChart3, Info } from 'lucide-react'
+import type { CSSProperties } from 'react'
+
+interface FeatureBreakdownProps {
+  features: Record<string, number>
+}
+
+const FEATURE_EXPLANATIONS: Record<string, string> = {
+  authority_claim: 'The caller is presenting themselves as a trusted institution or official authority.',
+  coercion: 'Language is pressuring the recipient into acting before they can think or verify.',
+  credential_request: 'The conversation is attempting to obtain passwords, PINs, codes, or other secrets.',
+  fear_induction: 'The caller is using fear to reduce skepticism and speed up compliance.',
+  financial_terms: 'Money, payments, balances, or banking language is becoming central to the call.',
+  gift_card_mention: 'Requesting gift cards is a strong scam indicator because they are hard to trace or reverse.',
+  mfa_bypass: 'The caller is trying to capture one-time codes or verification steps meant to protect the user.',
+  pii_request: 'The caller is asking for sensitive personal information that should not be shared casually.',
+  remote_access: 'The caller is steering the user toward remote-control tools or device access.',
+  specific_amount: 'Using a precise dollar amount can make a scam feel more legitimate and urgent.',
+  specific_detail: 'Specific details are being used to create a false sense of credibility.',
+  tech_jargon: 'Technical language may be used to intimidate or confuse the recipient.',
+  threat_language: 'Threats of punishment, loss, or legal action are a major fraud signal.',
+  time_pressure: 'The caller is creating a countdown or deadline to force a rushed decision.',
+  trust_request: 'The caller is explicitly pushing the recipient to trust them or follow instructions without verification.',
+  unusual_payment: 'The requested payment method is uncommon for legitimate businesses or institutions.',
+  urgency: 'The tone suggests immediate action is required, which is common in scam escalation.',
+}
+
+function getSeverity(value: number) {
+  if (value < 0.3) {
+    return {
+      label: 'Low',
+      color: '#14B8A6',
+      glow: 'rgba(20, 184, 166, 0.16)',
+      track: 'rgba(20, 184, 166, 0.12)',
+    }
+  }
+  if (value < 0.5) {
+    return {
+      label: 'Medium',
+      color: '#FBBF24',
+      glow: 'rgba(251, 191, 36, 0.18)',
+      track: 'rgba(251, 191, 36, 0.12)',
+    }
+  }
+  if (value < 0.75) {
+    return {
+      label: 'High',
+      color: '#FB923C',
+      glow: 'rgba(251, 146, 60, 0.2)',
+      track: 'rgba(251, 146, 60, 0.12)',
+    }
+  }
+  return {
+    label: 'Critical',
+    color: '#F87171',
+    glow: 'rgba(248, 113, 113, 0.22)',
+    track: 'rgba(248, 113, 113, 0.12)',
+  }
+}
+
+function formatFeatureName(name: string): string {
+  return name
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, c => c.toUpperCase())
+}
+
+export default function FeatureBreakdown({ features }: FeatureBreakdownProps) {
+  const sortedFeatures = Object.entries(features)
+    .filter(([, value]) => value > 0)
+    .sort(([, a], [, b]) => b - a)
+    .slice(0, 8)
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center gap-2">
+        <BarChart3 className="w-4 h-4 text-brand-teal" />
+        <h3 className="text-sm font-semibold text-gray-200">Feature Breakdown</h3>
+      </div>
+
+      <div className="space-y-2.5">
+        {sortedFeatures.length === 0 ? (
+          <div className="flex items-center justify-center py-12 text-gray-600">
+            <div className="text-center">
+              <BarChart3 className="w-8 h-8 mx-auto mb-2 opacity-30" />
+              <p className="text-sm">No features detected</p>
+              <p className="text-xs mt-1 opacity-60">Analysis data appears during calls</p>
+            </div>
+          </div>
+        ) : (
+          sortedFeatures.map(([name, value], index) => {
+            const severity = getSeverity(value)
+            const description = FEATURE_EXPLANATIONS[name] ?? 'This signal contributes to the overall fraud risk score.'
+
+            return (
+              <div
+                key={name}
+                className="feature-bar-container group relative"
+                style={
+                  {
+                    '--feature-color': severity.color,
+                    '--feature-glow': severity.glow,
+                    '--feature-track': severity.track,
+                    animationDelay: `${index * 70}ms`,
+                  } as CSSProperties
+                }
+              >
+                <div className="mb-1 flex items-center justify-between gap-3">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <span className="truncate text-xs text-gray-400 transition-colors duration-300 group-hover:text-gray-100">
+                      {formatFeatureName(name)}
+                    </span>
+                    <div className="feature-tooltip-trigger relative flex-shrink-0">
+                      <Info className="h-3.5 w-3.5 text-gray-600 transition-colors duration-300 group-hover:text-gray-300" />
+                      <div className="feature-tooltip pointer-events-none absolute left-1/2 top-[calc(100%+10px)] z-20 w-56 -translate-x-1/2 rounded-xl border border-white/10 bg-slate-950/95 p-3 text-[11px] leading-relaxed text-gray-200 shadow-[0_18px_45px_rgba(2,6,23,0.5)] backdrop-blur-md">
+                        <p className="font-semibold text-white">{formatFeatureName(name)}</p>
+                        <p className="mt-1 text-gray-300">{description}</p>
+                        <div className="mt-2 flex items-center gap-1.5 text-[10px] uppercase tracking-[0.18em] text-gray-500">
+                          <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: severity.color }} />
+                          {severity.label} Signal
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <span className="font-mono text-xs tabular-nums text-gray-500">
+                    {(value * 100).toFixed(0)}%
+                  </span>
+                </div>
+
+                <div className="feature-track h-2 overflow-hidden rounded-full bg-dark-bg">
+                  <div
+                    className="feature-bar h-full rounded-full"
+                    style={{ width: `${Math.max(value * 100, 2)}%` }}
+                  />
+                </div>
+              </div>
+            )
+          })
+        )}
+      </div>
+
+      {sortedFeatures.length > 0 && (
+        <div className="mt-4 border-t border-dark-border/30 pt-3">
+          <div className="flex items-center justify-between">
+            <span className="text-[10px] text-gray-600">
+              {sortedFeatures.length} active indicator{sortedFeatures.length !== 1 ? 's' : ''}
+            </span>
+            <div className="flex gap-2">
+              {[
+                { label: 'Low', color: '#14B8A6' },
+                { label: 'Med', color: '#FBBF24' },
+                { label: 'High', color: '#FB923C' },
+                { label: 'Crit', color: '#F87171' },
+              ].map(item => (
+                <div key={item.label} className="flex items-center gap-1">
+                  <div className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: item.color }} />
+                  <span className="text-[9px] text-gray-600">{item.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

demo/frontend/src/components/FederatedDashboard.tsx

@@ -0,0 +1,587 @@
+import { useState, useCallback, useEffect, useRef } from 'react'
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  Area,
+  AreaChart,
+} from 'recharts'
+import {
+  GitBranch,
+  Cpu,
+  Shield,
+  Lock,
+  Play,
+  RefreshCw,
+  TrendingUp,
+  Users,
+  Database,
+  Smartphone,
+  WifiOff,
+} from 'lucide-react'
+
+// -------- Mock data generators (used as fallback when hub is offline) --------
+function generateRoundData(numRounds: number) {
+  const data = []
+  let accuracy = 0.62
+  let f1 = 0.55
+  let loss = 0.82
+
+  for (let i = 1; i <= numRounds; i++) {
+    const accGain = (0.98 - accuracy) * 0.08 + (Math.random() - 0.5) * 0.015
+    const f1Gain = (0.95 - f1) * 0.09 + (Math.random() - 0.5) * 0.02
+    const lossDecay = loss * 0.06 + (Math.random() - 0.5) * 0.02
+
+    accuracy = Math.min(0.98, accuracy + accGain)
+    f1 = Math.min(0.95, f1 + f1Gain)
+    loss = Math.max(0.05, loss - lossDecay)
+
+    data.push({
+      round: i,
+      accuracy: Number(accuracy.toFixed(4)),
+      f1: Number(f1.toFixed(4)),
+      loss: Number(loss.toFixed(4)),
+    })
+  }
+  return data
+}
+
+function generateDeviceData() {
+  const devices = [
+    { name: 'Device A', samples: 342, contribution: 0.23 },
+    { name: 'Device B', samples: 287, contribution: 0.19 },
+    { name: 'Device C', samples: 198, contribution: 0.14 },
+    { name: 'Device D', samples: 456, contribution: 0.31 },
+    { name: 'Device E', samples: 167, contribution: 0.13 },
+  ]
+  return devices
+}
+
+// Generate a random gradient delta for simulated FL submissions
+function generateGradientDelta(size = 64): number[] {
+  return Array.from({ length: size }, () =>
+    Number(((Math.random() - 0.5) * 0.01).toFixed(6))
+  )
+}
+
+const CustomTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-dark-card border border-dark-border rounded-lg px-3 py-2 shadow-xl">
+        <p className="text-xs text-gray-400 mb-1">Round {label}</p>
+        {payload.map((entry: any, idx: number) => (
+          <p key={idx} className="text-xs font-mono" style={{ color: entry.color }}>
+            {entry.name}: {(entry.value * 100).toFixed(1)}%
+          </p>
+        ))}
+      </div>
+    )
+  }
+  return null
+}
+
+export default function FederatedDashboard() {
+  const [roundData, setRoundData] = useState(() => generateRoundData(20))
+  const [deviceData, setDeviceData] = useState(() => generateDeviceData())
+  const [isSimulating, setIsSimulating] = useState(false)
+  const [currentRound, setCurrentRound] = useState(20)
+  const [hubConnected, setHubConnected] = useState(false)
+  const [totalSamples, setTotalSamples] = useState(1450)
+  const [privacyBudget, setPrivacyBudget] = useState('epsilon=1.0')
+
+  const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const isMountedRef = useRef(true)
+
+  // Fetch global metrics from the hub API
+  const fetchGlobalMetrics = useCallback(async () => {
+    try {
+      const response = await fetch(`${import.meta.env.DEV ? 'http://localhost:8080' : '/hub'}/v1/metrics/global`, {
+        signal: AbortSignal.timeout(3000),
+      })
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const data = await response.json()
+
+      if (!isMountedRef.current) return
+
+      // Map hub API response to our local state
+      if (data.accuracy_history && Array.isArray(data.accuracy_history)) {
+        const mapped = data.accuracy_history.map((entry: any, i: number) => ({
+          round: entry.round ?? i + 1,
+          accuracy: entry.accuracy ?? 0,
+          f1: entry.f1 ?? 0,
+          loss: entry.loss ?? 0,
+        }))
+        if (mapped.length > 0) {
+          setRoundData(mapped)
+          setCurrentRound(mapped.length)
+        }
+      }
+      if (data.device_count != null) {
+        // Update device count visually -- keep existing device data shape
+        const count = Number(data.device_count)
+        if (count > 0 && count !== deviceData.length) {
+          const generated = Array.from({ length: count }, (_, i) => ({
+            name: `Device ${String.fromCharCode(65 + i)}`,
+            samples: Math.floor(Math.random() * 400) + 100,
+            contribution: Number((1 / count).toFixed(2)),
+          }))
+          setDeviceData(generated)
+        }
+      }
+      if (data.round_count != null) {
+        setCurrentRound(Number(data.round_count))
+      }
+      if (data.total_samples != null) {
+        setTotalSamples(Number(data.total_samples))
+      }
+      if (data.privacy_budget != null) {
+        setPrivacyBudget(String(data.privacy_budget))
+      }
+
+      setHubConnected(true)
+    } catch {
+      if (isMountedRef.current) {
+        setHubConnected(false)
+      }
+    }
+  }, [deviceData.length])
+
+  // Fetch round status (current round progress)
+  const fetchRoundStatus = useCallback(async () => {
+    try {
+      const response = await fetch(`${import.meta.env.DEV ? 'http://localhost:8080' : '/hub'}/v1/round/status`, {
+        signal: AbortSignal.timeout(3000),
+      })
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const data = await response.json()
+
+      if (!isMountedRef.current) return
+
+      if (data.current_round != null) {
+        setCurrentRound(Number(data.current_round))
+      }
+      if (data.is_aggregating != null) {
+        setIsSimulating(Boolean(data.is_aggregating))
+      }
+    } catch {
+      // Silently fail -- global metrics fetch already handles connection status
+    }
+  }, [])
+
+  // Poll hub API every 5 seconds while tab is active
+  useEffect(() => {
+    isMountedRef.current = true
+
+    // Initial fetch
+    fetchGlobalMetrics()
+    fetchRoundStatus()
+
+    const startPolling = () => {
+      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current)
+      pollIntervalRef.current = setInterval(() => {
+        fetchGlobalMetrics()
+        fetchRoundStatus()
+      }, 5000)
+    }
+
+    const stopPolling = () => {
+      if (pollIntervalRef.current) {
+        clearInterval(pollIntervalRef.current)
+        pollIntervalRef.current = null
+      }
+    }
+
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        stopPolling()
+      } else {
+        fetchGlobalMetrics()
+        fetchRoundStatus()
+        startPolling()
+      }
+    }
+
+    startPolling()
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+
+    return () => {
+      isMountedRef.current = false
+      stopPolling()
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
+  }, [fetchGlobalMetrics, fetchRoundStatus])
+
+  const latestMetrics = roundData[roundData.length - 1]
+
+  // Run FL Round: POST to hub if connected, else simulate locally
+  const runSimulationRound = useCallback(async () => {
+    setIsSimulating(true)
+
+    if (hubConnected) {
+      try {
+        const payload = {
+          device_id: `device_${Math.random().toString(36).slice(2, 8)}`,
+          gradient_delta: generateGradientDelta(),
+          num_samples: Math.floor(Math.random() * 200) + 50,
+          round: currentRound + 1,
+        }
+        const response = await fetch(`${import.meta.env.DEV ? 'http://localhost:8080' : '/hub'}/v1/federated/submit`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+          signal: AbortSignal.timeout(5000),
+        })
+
+        if (response.ok) {
+          // After successful submit, re-fetch to pick up the new round data
+          await fetchGlobalMetrics()
+          await fetchRoundStatus()
+          setIsSimulating(false)
+          return
+        }
+      } catch {
+        // Hub became unreachable during the request -- fall through to local simulation
+        setHubConnected(false)
+      }
+    }
+
+    // Fallback: local simulation
+    const timer = setTimeout(() => {
+      setRoundData(prev => {
+        const last = prev[prev.length - 1]
+        const newRound = {
+          round: last.round + 1,
+          accuracy: Number(Math.min(0.98, last.accuracy + (0.98 - last.accuracy) * 0.08 + (Math.random() - 0.5) * 0.01).toFixed(4)),
+          f1: Number(Math.min(0.95, last.f1 + (0.95 - last.f1) * 0.09 + (Math.random() - 0.5) * 0.015).toFixed(4)),
+          loss: Number(Math.max(0.05, last.loss - last.loss * 0.06 + (Math.random() - 0.5) * 0.01).toFixed(4)),
+        }
+        return [...prev, newRound]
+      })
+      setCurrentRound(prev => prev + 1)
+      setIsSimulating(false)
+    }, 1500)
+
+    return () => clearTimeout(timer)
+  }, [hubConnected, currentRound, fetchGlobalMetrics, fetchRoundStatus])
+
+  const stats = [
+    {
+      label: 'Model Version',
+      value: `v${currentRound}`,
+      icon: <Cpu className="w-4 h-4" />,
+      color: 'text-brand-teal',
+      bgColor: 'bg-brand-teal/10',
+    },
+    {
+      label: 'Active Devices',
+      value: String(deviceData.length),
+      icon: <Users className="w-4 h-4" />,
+      color: 'text-blue-400',
+      bgColor: 'bg-blue-400/10',
+    },
+    {
+      label: 'Total Samples',
+      value: totalSamples.toLocaleString(),
+      icon: <Database className="w-4 h-4" />,
+      color: 'text-purple-400',
+      bgColor: 'bg-purple-400/10',
+    },
+    {
+      label: 'Privacy Budget',
+      value: privacyBudget,
+      icon: <Lock className="w-4 h-4" />,
+      color: 'text-safe',
+      bgColor: 'bg-safe/10',
+    },
+    {
+      label: 'Accuracy',
+      value: `${(latestMetrics.accuracy * 100).toFixed(1)}%`,
+      icon: <TrendingUp className="w-4 h-4" />,
+      color: 'text-brand-teal',
+      bgColor: 'bg-brand-teal/10',
+    },
+    {
+      label: 'F1 Score',
+      value: `${(latestMetrics.f1 * 100).toFixed(1)}%`,
+      icon: <Shield className="w-4 h-4" />,
+      color: 'text-warning',
+      bgColor: 'bg-warning/10',
+    },
+  ]
+
+  return (
+    <div className="space-y-6">
+      {/* Offline banner */}
+      {!hubConnected && (
+        <div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-warning/10 border border-warning/20">
+          <WifiOff className="w-4 h-4 text-warning flex-shrink-0" />
+          <p className="text-xs text-warning font-medium">
+            Hub offline &mdash; showing simulated data
+          </p>
+        </div>
+      )}
+
+      {/* Header with action */}
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-xl bg-brand-teal/10 flex items-center justify-center">
+            <GitBranch className="w-5 h-5 text-brand-teal" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <h2 className="text-lg font-bold text-white">Federated Learning Dashboard</h2>
+              {/* Connection status indicator */}
+              <span
+                className={`inline-block w-2.5 h-2.5 rounded-full ${
+                  hubConnected ? 'bg-safe animate-pulse' : 'bg-gray-500'
+                }`}
+                title={hubConnected ? 'Hub connected' : 'Hub offline'}
+              />
+            </div>
+            <p className="text-xs text-gray-500">Model training across distributed edge devices</p>
+          </div>
+        </div>
+        <button
+          onClick={runSimulationRound}
+          disabled={isSimulating}
+          className={`
+            control-button px-4 py-2 text-sm font-medium
+            ${isSimulating
+              ? 'bg-brand-teal/20 text-brand-teal/50 border-brand-teal/20'
+              : 'border-brand-teal bg-brand-teal text-white hover:bg-brand-teal-light hover:text-white shadow-lg shadow-brand-teal/20'
+            }
+          `}
+        >
+          {isSimulating ? (
+            <RefreshCw className="w-4 h-4 animate-spin" />
+          ) : (
+            <Play className="w-4 h-4" />
+          )}
+          {isSimulating ? 'Aggregating...' : 'Run FL Round'}
+        </button>
+      </div>
+
+      {/* Stats cards */}
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-6">
+        {stats.map((stat) => (
+          <div key={stat.label} className="glass-card p-4">
+            <div className="flex items-center gap-2 mb-2">
+              <div className={`w-7 h-7 rounded-lg ${stat.bgColor} flex items-center justify-center ${stat.color}`}>
+                {stat.icon}
+              </div>
+            </div>
+            <p className={`text-lg font-bold ${stat.color} tabular-nums`}>{stat.value}</p>
+            <p className="text-[10px] text-gray-500 mt-0.5">{stat.label}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Charts */}
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
+        {/* Accuracy & F1 over rounds */}
+        <div className="glass-card p-6">
+          <h3 className="text-sm font-semibold text-gray-200 mb-4 flex items-center gap-2">
+            <TrendingUp className="w-4 h-4 text-brand-teal" />
+            Model Performance Over Rounds
+          </h3>
+          <ResponsiveContainer width="100%" height={280}>
+            <AreaChart data={roundData}>
+              <defs>
+                <linearGradient id="gradAccuracy" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#0D9488" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="#0D9488" stopOpacity={0} />
+                </linearGradient>
+                <linearGradient id="gradF1" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#F59E0B" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="#F59E0B" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
+              <XAxis
+                dataKey="round"
+                tick={{ fontSize: 10, fill: '#64748B' }}
+                axisLine={{ stroke: '#334155' }}
+                tickLine={false}
+              />
+              <YAxis
+                domain={[0.5, 1]}
+                tick={{ fontSize: 10, fill: '#64748B' }}
+                axisLine={{ stroke: '#334155' }}
+                tickLine={false}
+                tickFormatter={(v: number) => `${(v * 100).toFixed(0)}%`}
+              />
+              <Tooltip content={<CustomTooltip />} />
+              <Legend
+                wrapperStyle={{ fontSize: '11px', paddingTop: '8px' }}
+              />
+              <Area
+                type="monotone"
+                dataKey="accuracy"
+                name="Accuracy"
+                stroke="#0D9488"
+                strokeWidth={2}
+                fill="url(#gradAccuracy)"
+                dot={false}
+                activeDot={{ r: 4, strokeWidth: 0, fill: '#0D9488' }}
+              />
+              <Area
+                type="monotone"
+                dataKey="f1"
+                name="F1 Score"
+                stroke="#F59E0B"
+                strokeWidth={2}
+                fill="url(#gradF1)"
+                dot={false}
+                activeDot={{ r: 4, strokeWidth: 0, fill: '#F59E0B' }}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Loss over rounds */}
+        <div className="glass-card p-6">
+          <h3 className="text-sm font-semibold text-gray-200 mb-4 flex items-center gap-2">
+            <TrendingUp className="w-4 h-4 text-alert" />
+            Training Loss
+          </h3>
+          <ResponsiveContainer width="100%" height={280}>
+            <AreaChart data={roundData}>
+              <defs>
+                <linearGradient id="gradLoss" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#EF4444" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="#EF4444" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
+              <XAxis
+                dataKey="round"
+                tick={{ fontSize: 10, fill: '#64748B' }}
+                axisLine={{ stroke: '#334155' }}
+                tickLine={false}
+              />
+              <YAxis
+                tick={{ fontSize: 10, fill: '#64748B' }}
+                axisLine={{ stroke: '#334155' }}
+                tickLine={false}
+                tickFormatter={(v: number) => v.toFixed(2)}
+              />
+              <Tooltip content={<CustomTooltip />} />
+              <Area
+                type="monotone"
+                dataKey="loss"
+                name="Loss"
+                stroke="#EF4444"
+                strokeWidth={2}
+                fill="url(#gradLoss)"
+                dot={false}
+                activeDot={{ r: 4, strokeWidth: 0, fill: '#EF4444' }}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* Device contributions */}
+      <div className="glass-card p-6">
+        <h3 className="text-sm font-semibold text-gray-200 mb-4 flex items-center gap-2">
+          <Users className="w-4 h-4 text-brand-teal" />
+          Per-Device Sample Contributions
+        </h3>
+        <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
+          <ResponsiveContainer width="100%" height={200}>
+            <BarChart data={deviceData} layout="vertical">
+              <CartesianGrid strokeDasharray="3 3" stroke="#1E293B" horizontal={false} />
+              <XAxis
+                type="number"
+                tick={{ fontSize: 10, fill: '#64748B' }}
+                axisLine={{ stroke: '#334155' }}
+                tickLine={false}
+              />
+              <YAxis
+                dataKey="name"
+                type="category"
+                tick={{ fontSize: 11, fill: '#94A3B8' }}
+                axisLine={{ stroke: '#334155' }}
+                tickLine={false}
+                width={70}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: '#1E293B',
+                  border: '1px solid #334155',
+                  borderRadius: '8px',
+                  fontSize: '12px',
+                }}
+              />
+              <Bar
+                dataKey="samples"
+                name="Samples"
+                fill="#0D9488"
+                radius={[0, 4, 4, 0]}
+                barSize={20}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+
+          {/* Device details table */}
+          <div>
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-dark-border/30">
+                  <th className="text-left text-[10px] text-gray-500 font-medium pb-2 uppercase tracking-wider">Device</th>
+                  <th className="text-right text-[10px] text-gray-500 font-medium pb-2 uppercase tracking-wider">Samples</th>
+                  <th className="text-right text-[10px] text-gray-500 font-medium pb-2 uppercase tracking-wider">Contribution</th>
+                  <th className="text-right text-[10px] text-gray-500 font-medium pb-2 uppercase tracking-wider">Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {deviceData.map((device) => (
+                  <tr key={device.name} className="border-b border-dark-border/10">
+                    <td className="py-2.5 text-sm text-gray-300">{device.name}</td>
+                    <td className="py-2.5 text-sm text-gray-400 text-right font-mono tabular-nums">{device.samples}</td>
+                    <td className="py-2.5 text-sm text-brand-teal text-right font-mono tabular-nums">
+                      {(device.contribution * 100).toFixed(0)}%
+                    </td>
+                    <td className="py-2.5 text-right">
+                      <span className="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full bg-safe/10 text-safe">
+                        <div className="w-1 h-1 rounded-full bg-safe animate-pulse" />
+                        Active
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      {/* FL Process explanation */}
+      <div className="glass-card p-6">
+        <h3 className="text-sm font-semibold text-gray-200 mb-4">How Federated Learning Works</h3>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+          {[
+            { step: '1', title: 'Local Training', desc: 'Each device trains on its own call data', icon: <Smartphone className="w-5 h-5" />, color: 'text-brand-teal' },
+            { step: '2', title: 'Add DP Noise', desc: 'Differential privacy noise added to gradients', icon: <Lock className="w-5 h-5" />, color: 'text-safe' },
+            { step: '3', title: 'Aggregate', desc: 'Hub averages noisy gradients from all devices', icon: <GitBranch className="w-5 h-5" />, color: 'text-warning' },
+            { step: '4', title: 'Update Model', desc: 'Improved model pushed back to all devices', icon: <RefreshCw className="w-5 h-5" />, color: 'text-purple-400' },
+          ].map((item) => (
+            <div key={item.step} className="text-center">
+              <div className={`w-12 h-12 rounded-xl bg-dark-bg mx-auto mb-3 flex items-center justify-center ${item.color}`}>
+                {item.icon}
+              </div>
+              <div className="text-[10px] text-gray-600 mb-1">Step {item.step}</div>
+              <h4 className="text-xs font-semibold text-gray-300 mb-1">{item.title}</h4>
+              <p className="text-[10px] text-gray-500 leading-relaxed">{item.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

demo/frontend/src/components/FraudAlert.tsx

@@ -0,0 +1,144 @@
+import { ShieldAlert, AlertTriangle, Info, ShieldX } from 'lucide-react'
+
+interface FraudAlertProps {
+  riskLevel: 'medium' | 'high' | 'critical'
+  score: number
+  reasons: string[]
+  onBlock: () => void
+  onDismiss: () => void
+}
+
+export default function FraudAlert({
+  riskLevel,
+  score,
+  reasons,
+  onBlock,
+  onDismiss,
+}: FraudAlertProps) {
+  const configs = {
+    critical: {
+      bg: 'bg-gradient-to-b from-alert/95 to-alert-dark/95',
+      border: 'border-alert-light',
+      icon: <ShieldX className="w-10 h-10 text-white drop-shadow-lg" />,
+      title: 'FRAUD DETECTED',
+      subtitle: 'This call exhibits strong fraud indicators',
+      containerClass: 'alert-overlay alert-overlay-critical',
+      badgeClass: 'bg-white/20 text-white',
+    },
+    high: {
+      bg: 'bg-gradient-to-b from-warning/95 to-amber-700/95',
+      border: 'border-warning-light',
+      icon: <AlertTriangle className="w-10 h-10 text-white drop-shadow-lg" />,
+      title: 'HIGH RISK CALL',
+      subtitle: 'Suspicious patterns detected',
+      containerClass: 'alert-overlay',
+      badgeClass: 'bg-white/20 text-white',
+    },
+    medium: {
+      bg: 'bg-gradient-to-b from-dark-card/98 to-dark-surface/98',
+      border: 'border-warning/50',
+      icon: <Info className="w-6 h-6 text-warning" />,
+      title: 'Caution',
+      subtitle: 'Some suspicious indicators present',
+      containerClass: 'alert-banner',
+      badgeClass: 'bg-warning/20 text-warning',
+    },
+  }
+
+  const config = configs[riskLevel]
+  const percentage = Math.round(score * 100)
+
+  if (riskLevel === 'medium') {
+    return (
+      <div className={`mx-3 mt-2 ${config.containerClass}`}>
+        <div className={`${config.bg} alert-banner-card backdrop-blur-xl rounded-xl border ${config.border} p-3 shadow-[0_18px_45px_rgba(15,23,42,0.4)]`}>
+          <div className="flex items-center gap-3">
+            {config.icon}
+            <div className="flex-1">
+              <p className="text-xs font-semibold text-warning">{config.title}</p>
+              <p className="text-[10px] text-gray-400">{config.subtitle}</p>
+            </div>
+            <div className={`px-2 py-0.5 rounded-full ${config.badgeClass} text-[10px] font-bold`}>
+              {percentage}%
+            </div>
+          </div>
+          {reasons.length > 0 && (
+            <div className="mt-2 flex flex-wrap gap-1">
+              {reasons.slice(0, 3).map((reason, i) => (
+                <span key={i} className="text-[9px] px-1.5 py-0.5 bg-warning/10 text-warning/80 rounded-full">
+                  {reason}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // Full overlay for high/critical
+  return (
+    <div className={`w-full h-full ${config.containerClass}`}>
+      <div className={`alert-overlay-panel w-full h-full ${config.bg} backdrop-blur-xl border-y ${config.border} flex flex-col items-center justify-center px-6`}>
+        {/* Risk icon */}
+        <div className="relative mb-4">
+          <div className={`w-20 h-20 rounded-full ${
+            riskLevel === 'critical' ? 'bg-white/10' : 'bg-white/10'
+          } flex items-center justify-center`}>
+            {config.icon}
+          </div>
+          {riskLevel === 'critical' && (
+            <div className="absolute inset-0 w-20 h-20 rounded-full border-2 border-white/30 animate-ping" />
+          )}
+        </div>
+
+        {/* Title */}
+        <h3 className="text-xl font-bold text-white tracking-wide mb-1">
+          {config.title}
+        </h3>
+        <p className="text-xs text-white/70 mb-3 text-center">
+          {config.subtitle}
+        </p>
+
+        {/* Confidence score */}
+        <div className={`${config.badgeClass} px-4 py-1.5 rounded-full text-sm font-bold mb-4`}>
+          {percentage}% Confidence
+        </div>
+
+        {/* Reasons */}
+        {reasons.length > 0 && (
+          <div className="w-full max-w-[220px] mb-6 space-y-1.5">
+            {reasons.slice(0, 4).map((reason, i) => (
+              <div key={i} className="flex items-center gap-2 text-[11px] text-white/80">
+                <div className="w-1 h-1 rounded-full bg-white/60 flex-shrink-0" />
+                <span className="capitalize">{reason}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Action buttons */}
+        <div className="w-full max-w-[220px] space-y-2">
+          <button
+            onClick={onBlock}
+            className="w-full py-2.5 rounded-xl bg-white text-alert font-bold text-sm flex items-center justify-center gap-2 hover:bg-gray-100 transition-colors active:scale-[0.98]"
+          >
+            <ShieldAlert className="w-4 h-4" />
+            Block Caller
+          </button>
+          <button
+            onClick={onDismiss}
+            className="w-full py-2.5 rounded-xl bg-white/10 text-white/80 font-medium text-sm hover:bg-white/20 transition-colors active:scale-[0.98]"
+          >
+            Dismiss
+          </button>
+        </div>
+
+        {/* SentinelEdge branding */}
+        <p className="text-[8px] text-white/30 mt-4 tracking-widest uppercase">
+          Protected by SentinelEdge
+        </p>
+      </div>
+    </div>
+  )
+}

demo/frontend/src/components/PhoneSimulator.tsx

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react'
+
+interface PhoneSimulatorProps {
+  children: ReactNode
+}
+
+export default function PhoneSimulator({ children }: PhoneSimulatorProps) {
+  return (
+    <div className="phone-frame">
+      <div className="relative w-[290px] h-[600px] rounded-[46px] bg-[#111215] p-[4px] shadow-2xl shadow-black/60">
+        <div className="pointer-events-none absolute inset-[1px] rounded-[45px] border border-white/10" />
+        <div className="pointer-events-none absolute inset-x-[18px] top-[10px] h-[22px] rounded-full bg-white/5 blur-md" />
+
+        <div className="relative h-full w-full overflow-hidden rounded-[42px] bg-gradient-to-b from-[#2a2b31] via-[#111216] to-[#050608] p-[7px]">
+          <div className="absolute -left-[3px] top-[116px] h-[34px] w-[3px] rounded-l-sm bg-zinc-500/70" />
+          <div className="absolute -left-[3px] top-[172px] h-[58px] w-[3px] rounded-l-sm bg-zinc-500/70" />
+          <div className="absolute -left-[3px] top-[240px] h-[58px] w-[3px] rounded-l-sm bg-zinc-500/70" />
+          <div className="absolute -right-[3px] top-[182px] h-[78px] w-[3px] rounded-r-sm bg-zinc-500/70" />
+
+          <div className="relative h-full w-full overflow-hidden rounded-[35px] border border-black/70 bg-dark-bg shadow-[inset_0_0_0_1px_rgba(255,255,255,0.03)]">
+            <div className="pointer-events-none absolute inset-0 rounded-[35px] shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-18px_40px_rgba(0,0,0,0.32)]" />
+
+            <div className="absolute left-1/2 top-[7px] z-30 h-[34px] w-[124px] -translate-x-1/2 rounded-[20px] bg-black shadow-[0_4px_14px_rgba(0,0,0,0.55)]">
+              <div className="absolute left-[18px] top-1/2 h-[10px] w-[10px] -translate-y-1/2 rounded-full bg-zinc-900 ring-1 ring-white/5" />
+              <div className="absolute left-[35px] top-1/2 h-[7px] w-[7px] -translate-y-1/2 rounded-full bg-zinc-800 ring-1 ring-white/5" />
+              <div className="absolute right-[18px] top-1/2 h-[8px] w-[40px] -translate-y-1/2 rounded-full bg-zinc-950/90" />
+            </div>
+
+            <div className="relative h-full w-full overflow-hidden rounded-[35px]">
+              {children}
+            </div>
+
+            <div className="absolute bottom-1.5 left-0 right-0 z-30 flex justify-center">
+              <div className="h-[4px] w-[118px] rounded-full bg-white/38" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

demo/frontend/src/components/PrivacyDemo.tsx

@@ -0,0 +1,446 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Lock, Smartphone, Server, ArrowRight, Eye, EyeOff, ShieldCheck, RotateCcw, WifiOff, Wifi } from 'lucide-react'
+
+interface DisplayEntry {
+  text: string
+  score: number
+  features: Record<string, number>
+  gradient: number[]
+  sigma: number
+  epsilon: number
+}
+
+// -------- Fallback example data for offline mode --------
+const FALLBACK_EXAMPLES: DisplayEntry[] = [
+  {
+    text: "This is Officer James Wilson from the Internal Revenue Service.",
+    score: 0.15,
+    features: { authority_claim: 0.3, financial_terms: 0.2 } as Record<string, number>,
+    gradient: [-0.003421, 0.001872, -0.000543, 0.004219, -0.002103, 0.000891, -0.001567, 0.003245, 0.000123, -0.002876, 0.001432, -0.000765],
+    sigma: 0.5,
+    epsilon: 1.0,
+  },
+  {
+    text: "There is an outstanding balance of $4,789 that must be resolved immediately.",
+    score: 0.42,
+    features: { urgency: 0.5, financial_terms: 0.7, specific_amount: 0.6, time_pressure: 0.4 } as Record<string, number>,
+    gradient: [0.002156, -0.004312, 0.001098, -0.003567, 0.000432, -0.002789, 0.004101, -0.001234, 0.003456, -0.000876, 0.002345, -0.001678],
+    sigma: 0.5,
+    epsilon: 1.0,
+  },
+  {
+    text: "If this is not paid today, a warrant will be issued for your arrest.",
+    score: 0.68,
+    features: { urgency: 0.9, threat_language: 0.8, time_pressure: 0.9, authority_claim: 0.5 } as Record<string, number>,
+    gradient: [-0.001234, 0.003678, -0.002901, 0.000456, 0.004512, -0.003123, 0.001789, -0.000345, 0.002567, -0.004089, 0.000912, -0.003456],
+    sigma: 0.5,
+    epsilon: 1.0,
+  },
+  {
+    text: "You need to purchase Google Play gift cards worth $4,789 and read me the codes.",
+    score: 0.85,
+    features: { urgency: 0.8, financial_terms: 0.9, gift_card_mention: 1.0, unusual_payment: 1.0 } as Record<string, number>,
+    gradient: [0.004567, -0.001234, 0.002890, -0.003456, 0.000789, -0.004123, 0.001567, 0.003012, -0.002345, 0.000678, -0.001890, 0.004234],
+    sigma: 0.5,
+    epsilon: 1.0,
+  },
+  {
+    text: "This is the only way to avoid criminal prosecution. Do it now.",
+    score: 0.92,
+    features: { urgency: 1.0, threat_language: 0.95, time_pressure: 1.0, coercion: 0.9 } as Record<string, number>,
+    gradient: [-0.002345, 0.004567, -0.000891, 0.003210, -0.001678, 0.002456, -0.004012, 0.000345, 0.001789, -0.003567, 0.002123, -0.000456],
+    sigma: 0.5,
+    epsilon: 1.0,
+  },
+]
+
+interface PrivacyDemoProps {
+  sentences: Array<{
+    text: string
+    score: number
+    features: Record<string, number>
+  }>
+  gradientVectors: number[][]
+  isCallActive: boolean
+}
+
+export default function PrivacyDemo({ sentences, gradientVectors, isCallActive }: PrivacyDemoProps) {
+  const [wsConnected, setWsConnected] = useState(false)
+  const [wsEntries, setWsEntries] = useState<DisplayEntry[]>([])
+  const [fallbackEntries, setFallbackEntries] = useState<DisplayEntry[]>([])
+  const [isReplaying, setIsReplaying] = useState(false)
+
+  const wsRef = useRef<WebSocket | null>(null)
+  const replayTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const isMountedRef = useRef(true)
+
+  // Try connecting to the privacy-demo WebSocket
+  useEffect(() => {
+    isMountedRef.current = true
+    let ws: WebSocket | null = null
+
+    try {
+      const wsBase = import.meta.env.DEV
+        ? 'ws://localhost:8000'
+        : `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}`
+      ws = new WebSocket(`${wsBase}/ws/privacy-demo`)
+      wsRef.current = ws
+
+      ws.onopen = () => {
+        if (isMountedRef.current) {
+          setWsConnected(true)
+        }
+      }
+
+      ws.onmessage = (event) => {
+        if (!isMountedRef.current) return
+        try {
+          const data = JSON.parse(event.data)
+          const entry: DisplayEntry = {
+            text: data.text ?? data.transcript ?? '',
+            score: data.fraud_score ?? data.score ?? 0,
+            features: data.features ?? {},
+            gradient: data.gradient ?? data.noised_gradient ?? [],
+            sigma: data.sigma ?? 0.5,
+            epsilon: data.epsilon ?? 1.0,
+          }
+          setWsEntries(prev => [...prev, entry])
+        } catch {
+          // Ignore malformed messages
+        }
+      }
+
+      ws.onerror = () => {
+        if (isMountedRef.current) {
+          setWsConnected(false)
+        }
+      }
+
+      ws.onclose = () => {
+        if (isMountedRef.current) {
+          setWsConnected(false)
+          wsRef.current = null
+        }
+      }
+    } catch {
+      setWsConnected(false)
+    }
+
+    return () => {
+      isMountedRef.current = false
+      if (ws) {
+        ws.close(1000, 'Component unmount')
+      }
+      wsRef.current = null
+    }
+  }, [])
+
+  // Determine which data to display
+  // Priority: WebSocket data > live call data passed via props > fallback examples
+  const useWebSocketData = wsConnected && wsEntries.length > 0
+  const usePropData = !useWebSocketData && sentences.length > 0
+
+  const displayEntries: DisplayEntry[] = useWebSocketData
+    ? wsEntries
+    : usePropData
+      ? sentences.map((s, i) => ({
+          text: s.text,
+          score: s.score,
+          features: s.features,
+          gradient: gradientVectors[i] ?? Array.from({ length: 12 }, () => Number(((Math.random() - 0.5) * 0.01).toFixed(6))),
+          sigma: 0.5,
+          epsilon: 1.0,
+        }))
+      : fallbackEntries
+
+  // Replay: cycle through fallback examples one by one
+  const startReplay = useCallback(() => {
+    if (isReplaying) return
+    setIsReplaying(true)
+    setFallbackEntries([])
+    setWsEntries([])
+
+    let index = 0
+    const playNext = () => {
+      if (!isMountedRef.current || index >= FALLBACK_EXAMPLES.length) {
+        if (isMountedRef.current) setIsReplaying(false)
+        return
+      }
+      const example = FALLBACK_EXAMPLES[index]
+      setFallbackEntries(prev => [...prev, example])
+      index++
+      replayTimerRef.current = setTimeout(playNext, 1500)
+    }
+
+    replayTimerRef.current = setTimeout(playNext, 500)
+  }, [isReplaying])
+
+  // Cleanup replay timer
+  useEffect(() => {
+    return () => {
+      if (replayTimerRef.current) clearTimeout(replayTimerRef.current)
+    }
+  }, [])
+
+  return (
+    <div className="space-y-6">
+      {/* Intro banner */}
+      <div className="glass-card p-5 sm:p-6 glow-teal">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start">
+          <div className="w-12 h-12 rounded-xl bg-brand-teal/10 flex items-center justify-center flex-shrink-0">
+            <Lock className="w-6 h-6 text-brand-teal" />
+          </div>
+          <div className="flex-1">
+            <h2 className="text-lg font-bold text-white mb-1">Privacy-First Architecture</h2>
+            <p className="text-sm text-gray-400 leading-relaxed max-w-2xl">
+              SentinelEdge processes all sensitive data on your device. The hub server only receives
+              differentially-private gradient updates -- mathematical noise that cannot be reverse-engineered
+              to reconstruct your conversations or personal information.
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-3 lg:flex-shrink-0">
+            {/* Connection status */}
+            <div className="flex items-center gap-1.5 text-xs">
+              {wsConnected ? (
+                <>
+                  <Wifi className="w-3.5 h-3.5 text-safe" />
+                  <span className="text-safe">Live</span>
+                </>
+              ) : (
+                <>
+                  <WifiOff className="w-3.5 h-3.5 text-gray-500" />
+                  <span className="text-gray-500">Offline</span>
+                </>
+              )}
+            </div>
+            {/* Replay button */}
+            <button
+              onClick={startReplay}
+              disabled={isReplaying || isCallActive}
+              className={`
+                control-button px-3 py-1.5 text-xs font-medium
+                ${isReplaying || isCallActive
+                  ? ''
+                  : 'border-brand-teal/20 bg-brand-teal/10 text-brand-teal hover:bg-brand-teal/20'
+                }
+              `}
+            >
+              <RotateCcw className={`w-3.5 h-3.5 ${isReplaying ? 'animate-spin' : ''}`} />
+              {isReplaying ? 'Replaying...' : 'Replay Demo'}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Side by side panels with noise wall */}
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[1fr_auto_1fr] xl:gap-0">
+        {/* Device panel */}
+        <div className="glass-card border-brand-teal/30 overflow-hidden">
+          {/* Header */}
+          <div className="px-6 py-4 bg-brand-teal/5 border-b border-brand-teal/20 flex items-center gap-3">
+            <div className="w-8 h-8 rounded-lg bg-brand-teal/10 flex items-center justify-center">
+              <Smartphone className="w-4 h-4 text-brand-teal" />
+            </div>
+            <div>
+              <h3 className="text-sm font-bold text-brand-teal">Your Device</h3>
+              <p className="text-[10px] text-gray-500 uppercase tracking-wider">Everything stays here</p>
+            </div>
+            <Eye className="w-4 h-4 text-brand-teal ml-auto" />
+          </div>
+
+          {/* Content */}
+          <div className="p-6 space-y-4 max-h-[500px] overflow-y-auto">
+            {displayEntries.length === 0 && !isCallActive ? (
+              <div className="text-center py-12">
+                <Smartphone className="w-10 h-10 text-gray-700 mx-auto mb-3" />
+                <p className="text-sm text-gray-600">Start a call to see device-side data</p>
+                <p className="text-xs text-gray-700 mt-1">Full transcript and analysis visible here</p>
+                <p className="text-xs text-gray-700 mt-2">
+                  Or press <span className="text-brand-teal font-medium">Replay Demo</span> above
+                </p>
+              </div>
+            ) : (
+              displayEntries.map((entry, i) => (
+                <div key={i} className="animate-fade-in space-y-2">
+                  {/* Transcript text */}
+                  <div className="bg-dark-bg/50 rounded-lg p-3 border border-brand-teal/10">
+                    <p className="text-xs text-gray-500 mb-1 font-medium">Transcript #{i + 1}</p>
+                    <p className="text-sm text-gray-200 font-mono leading-relaxed">
+                      {entry.text}
+                    </p>
+                  </div>
+
+                  {/* Features + score */}
+                  <div className="flex gap-2">
+                    <div className="flex-1 bg-dark-bg/30 rounded-lg p-2">
+                      <p className="text-[10px] text-gray-600 mb-1">Fraud Score</p>
+                      <p className={`text-lg font-bold tabular-nums ${
+                        entry.score < 0.3 ? 'text-safe' :
+                        entry.score < 0.5 ? 'text-warning' :
+                        entry.score < 0.75 ? 'text-orange-400' :
+                        'text-alert'
+                      }`}>
+                        {(entry.score * 100).toFixed(1)}%
+                      </p>
+                    </div>
+                    <div className="flex-1 bg-dark-bg/30 rounded-lg p-2">
+                      <p className="text-[10px] text-gray-600 mb-1">Features</p>
+                      <div className="flex flex-wrap gap-1">
+                        {Object.entries(entry.features)
+                          .filter(([, v]) => v > 0.3)
+                          .slice(0, 3)
+                          .map(([k]) => (
+                            <span key={k} className="text-[9px] px-1.5 py-0.5 bg-brand-teal/10 text-brand-teal rounded-full">
+                              {k.replace(/_/g, ' ')}
+                            </span>
+                          ))
+                        }
+                      </div>
+                    </div>
+                  </div>
+
+                  {i < displayEntries.length - 1 && (
+                    <div className="border-b border-dark-border/20" />
+                  )}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* Visual noise wall - dashed vertical privacy boundary */}
+        <div className="flex flex-col items-center justify-center px-4 relative">
+          {/* Top label */}
+          <div className="absolute top-4 bg-dark-bg/80 px-2 py-1 rounded-md z-10">
+            <p className="text-[9px] text-gray-500 uppercase tracking-widest font-bold">Privacy</p>
+          </div>
+
+          {/* Dashed line */}
+          <div className="h-full w-px relative">
+            <div
+              className="absolute inset-0 w-px"
+              style={{
+                backgroundImage: 'repeating-linear-gradient(to bottom, #0D9488 0px, #0D9488 6px, transparent 6px, transparent 14px)',
+                opacity: 0.5,
+              }}
+            />
+            {/* Noise glow effect */}
+            <div
+              className="absolute inset-0 w-6 -left-[11px]"
+              style={{
+                background: 'linear-gradient(to right, transparent, rgba(13, 148, 136, 0.08), transparent)',
+              }}
+            />
+          </div>
+
+          {/* Lock icon in the middle */}
+          <div className="absolute top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-dark-bg border border-brand-teal/30 flex items-center justify-center z-10">
+            <Lock className="w-3.5 h-3.5 text-brand-teal" />
+          </div>
+
+          {/* Bottom label */}
+          <div className="absolute bottom-4 bg-dark-bg/80 px-2 py-1 rounded-md z-10">
+            <p className="text-[9px] text-gray-500 uppercase tracking-widest font-bold">Barrier</p>
+          </div>
+        </div>
+
+        {/* Hub server panel */}
+        <div className="glass-card border-gray-700/30 overflow-hidden">
+          {/* Header */}
+          <div className="px-6 py-4 bg-gray-800/30 border-b border-gray-700/20 flex items-center gap-3">
+            <div className="w-8 h-8 rounded-lg bg-gray-700/30 flex items-center justify-center">
+              <Server className="w-4 h-4 text-gray-400" />
+            </div>
+            <div>
+              <h3 className="text-sm font-bold text-gray-400">Hub Server</h3>
+              <p className="text-[10px] text-gray-600 uppercase tracking-wider">This is all we send</p>
+            </div>
+            <EyeOff className="w-4 h-4 text-gray-600 ml-auto" />
+          </div>
+
+          {/* Content */}
+          <div className="p-6 space-y-4 max-h-[500px] overflow-y-auto">
+            {displayEntries.length === 0 && !isCallActive ? (
+              <div className="text-center py-12">
+                <Server className="w-10 h-10 text-gray-700 mx-auto mb-3" />
+                <p className="text-sm text-gray-600">No data transmitted yet</p>
+                <p className="text-xs text-gray-700 mt-1">Only noisy gradients are sent</p>
+              </div>
+            ) : (
+              displayEntries.map((entry, i) => (
+                <div key={i} className="animate-fade-in">
+                  <div className="bg-dark-bg/50 rounded-lg p-3 border border-gray-700/20">
+                    <div className="flex items-center justify-between mb-2">
+                      <p className="text-xs text-gray-600 font-medium">
+                        Gradient Update #{i + 1}
+                      </p>
+                        <span className="text-[9px] px-1.5 py-0.5 bg-gray-700/30 text-gray-500 rounded-full">
+                        DP-SGD
+                      </span>
+                    </div>
+                    <div className="font-mono text-[10px] text-gray-600 leading-relaxed break-all">
+                      [{entry.gradient.map((v, j) => (
+                        <span key={j}>
+                          <span className={
+                            Math.abs(v) > 0.005 ? 'text-gray-400' : 'text-gray-700'
+                          }>
+                            {v.toFixed(6)}
+                          </span>
+                          {j < entry.gradient.length - 1 ? ', ' : ''}
+                        </span>
+                      ))}]
+                    </div>
+                    <div className="mt-2 flex items-center gap-3">
+                      <div className="flex items-center gap-1.5">
+                        <Lock className="w-2.5 h-2.5 text-gray-600" />
+                        <p className="text-[9px] text-gray-600">
+                          sigma={entry.sigma.toFixed(1)}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        <ShieldCheck className="w-2.5 h-2.5 text-gray-600" />
+                        <p className="text-[9px] text-gray-600">
+                          epsilon={entry.epsilon.toFixed(1)}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom explanation */}
+      <div className="glass-card p-5 sm:p-6">
+        <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:gap-6">
+          <div className="flex items-center gap-3 overflow-x-auto pb-1 lg:flex-shrink-0">
+            <div className="w-10 h-10 rounded-full bg-brand-teal/10 flex items-center justify-center">
+              <Smartphone className="w-5 h-5 text-brand-teal" />
+            </div>
+            <ArrowRight className="w-5 h-5 text-gray-600" />
+            <div className="w-10 h-10 rounded-full bg-gray-700/30 flex items-center justify-center">
+              <Lock className="w-5 h-5 text-gray-400" />
+            </div>
+            <ArrowRight className="w-5 h-5 text-gray-600" />
+            <div className="w-10 h-10 rounded-full bg-gray-700/30 flex items-center justify-center">
+              <Server className="w-5 h-5 text-gray-400" />
+            </div>
+          </div>
+          <div className="flex-1 space-y-2">
+            <div className="flex items-center gap-2">
+              <ShieldCheck className="w-4 h-4 text-safe" />
+              <span className="text-sm font-semibold text-gray-200">Zero-Knowledge Fraud Detection</span>
+            </div>
+            <p className="text-xs text-gray-500 leading-relaxed">
+              Raw audio and transcripts never leave your device. Only differentially-private model gradients
+              are transmitted. Even if the hub server is compromised, your conversation data remains private.
+              Mathematical guarantees ensure no individual call can be reconstructed from gradient updates.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

demo/frontend/src/components/ScoreGauge.tsx

@@ -0,0 +1,260 @@
+import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react'
+import { ShieldCheck, ShieldAlert, ShieldX } from 'lucide-react'
+
+interface ScoreGaugeProps {
+  score: number
+  label?: string
+}
+
+interface ParticleBurst {
+  id: number
+  color: string
+}
+
+const THRESHOLDS = [0.3, 0.5, 0.75]
+const GRADIENT_STOPS = [
+  { score: 0, color: '#10B981' },
+  { score: 0.3, color: '#EAB308' },
+  { score: 0.5, color: '#F59E0B' },
+  { score: 0.75, color: '#F97316' },
+  { score: 1, color: '#EF4444' },
+]
+
+function hexToRgb(hex: string) {
+  const normalized = hex.replace('#', '')
+  const value = Number.parseInt(normalized, 16)
+  return {
+    r: (value >> 16) & 255,
+    g: (value >> 8) & 255,
+    b: value & 255,
+  }
+}
+
+function interpolateColor(score: number): string {
+  const safeScore = Math.max(0, Math.min(1, score))
+
+  for (let index = 1; index < GRADIENT_STOPS.length; index += 1) {
+    const start = GRADIENT_STOPS[index - 1]
+    const end = GRADIENT_STOPS[index]
+
+    if (safeScore <= end.score) {
+      const range = end.score - start.score || 1
+      const progress = (safeScore - start.score) / range
+      const startRgb = hexToRgb(start.color)
+      const endRgb = hexToRgb(end.color)
+
+      const r = Math.round(startRgb.r + (endRgb.r - startRgb.r) * progress)
+      const g = Math.round(startRgb.g + (endRgb.g - startRgb.g) * progress)
+      const b = Math.round(startRgb.b + (endRgb.b - startRgb.b) * progress)
+
+      return `rgb(${r}, ${g}, ${b})`
+    }
+  }
+
+  return GRADIENT_STOPS[GRADIENT_STOPS.length - 1].color
+}
+
+function getLevelText(score: number): string {
+  if (score < 0.15) return 'Safe'
+  if (score < 0.3) return 'Low Risk'
+  if (score < 0.5) return 'Moderate'
+  if (score < 0.75) return 'High Risk'
+  return 'Critical'
+}
+
+function getLevelIcon(score: number) {
+  if (score < 0.3) return <ShieldCheck className="w-5 h-5" />
+  if (score < 0.75) return <ShieldAlert className="w-5 h-5" />
+  return <ShieldX className="w-5 h-5" />
+}
+
+export default function ScoreGauge({ score, label = 'Fraud Score' }: ScoreGaugeProps) {
+  const clampedScore = Math.max(0, Math.min(1, score))
+  const previousScoreRef = useRef(clampedScore)
+  const burstIdRef = useRef(0)
+  const [bursts, setBursts] = useState<ParticleBurst[]>([])
+  const [isThresholdPulseActive, setIsThresholdPulseActive] = useState(false)
+
+  const percentage = Math.round(clampedScore * 100)
+  const color = useMemo(() => interpolateColor(clampedScore), [clampedScore])
+
+  const size = 200
+  const strokeWidth = 12
+  const radius = (size - strokeWidth) / 2
+  const circumference = Math.PI * radius
+  const offset = circumference - clampedScore * circumference
+  const centerX = size / 2
+  const centerY = size / 2
+
+  useEffect(() => {
+    const previousScore = previousScoreRef.current
+    const crossedThreshold = THRESHOLDS.some(
+      threshold =>
+        (previousScore < threshold && clampedScore >= threshold) ||
+        (previousScore > threshold && clampedScore <= threshold)
+    )
+
+    previousScoreRef.current = clampedScore
+
+    if (!crossedThreshold) return
+
+    const burst = {
+      id: burstIdRef.current,
+      color,
+    }
+    burstIdRef.current += 1
+
+    setBursts(current => [...current, burst])
+    setIsThresholdPulseActive(true)
+
+    const pulseTimeout = window.setTimeout(() => {
+      setIsThresholdPulseActive(false)
+    }, 700)
+
+    const cleanupTimeout = window.setTimeout(() => {
+      setBursts(current => current.filter(item => item.id !== burst.id))
+    }, 1300)
+
+    return () => {
+      window.clearTimeout(pulseTimeout)
+      window.clearTimeout(cleanupTimeout)
+    }
+  }, [clampedScore, color])
+
+  return (
+    <div className="flex flex-col items-center">
+      <div
+        className={`score-gauge-shell relative ${isThresholdPulseActive ? 'score-gauge-threshold-pulse' : ''}`}
+        style={
+          {
+            width: size,
+            height: size,
+            '--gauge-color': color,
+          } as CSSProperties
+        }
+      >
+        <div className="score-gauge-glow absolute inset-[24px] rounded-full" />
+
+        {bursts.map(burst => (
+          <div
+            key={burst.id}
+            className="score-gauge-burst pointer-events-none absolute inset-0"
+            style={{ '--burst-color': burst.color } as CSSProperties}
+            aria-hidden="true"
+          >
+            {Array.from({ length: 10 }).map((_, index) => {
+              const angle = (360 / 10) * index
+              const distance = 36 + (index % 3) * 10
+              const delay = `${index * 35}ms`
+              return (
+                <span
+                  key={index}
+                  className="score-gauge-particle absolute left-1/2 top-1/2"
+                  style={
+                    {
+                      '--particle-angle': `${angle}deg`,
+                      '--particle-distance': `${distance}px`,
+                      animationDelay: delay,
+                    } as CSSProperties
+                  }
+                />
+              )
+            })}
+          </div>
+        ))}
+
+        <svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          className="score-gauge-svg transform -rotate-90"
+        >
+          <defs>
+            <linearGradient id="scoreGaugeTrack" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#0f172a" />
+              <stop offset="100%" stopColor="#1e293b" />
+            </linearGradient>
+          </defs>
+
+          <circle
+            cx={centerX}
+            cy={centerY}
+            r={radius}
+            fill="none"
+            stroke="url(#scoreGaugeTrack)"
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={`${circumference} ${circumference * 2}`}
+            transform={`rotate(90, ${centerX}, ${centerY})`}
+          />
+
+          <circle
+            cx={centerX}
+            cy={centerY}
+            r={radius}
+            fill="none"
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={`${circumference} ${circumference * 2}`}
+            strokeDashoffset={offset}
+            transform={`rotate(90, ${centerX}, ${centerY})`}
+            className="gauge-arc"
+          />
+
+          {[0, 0.25, 0.5, 0.75, 1].map(tick => {
+            const angle = (tick * 180 - 90) * (Math.PI / 180)
+            const outerR = radius + strokeWidth / 2 + 4
+            const innerR = radius + strokeWidth / 2 + 10
+            const x1 = centerX + outerR * Math.cos(angle)
+            const y1 = centerY + outerR * Math.sin(angle)
+            const x2 = centerX + innerR * Math.cos(angle)
+            const y2 = centerY + innerR * Math.sin(angle)
+            return (
+              <line
+                key={tick}
+                x1={x1}
+                y1={y1}
+                x2={x2}
+                y2={y2}
+                stroke="#475569"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                transform={`rotate(90, ${centerX}, ${centerY})`}
+              />
+            )
+          })}
+        </svg>
+
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <div className="mb-1 score-gauge-center" style={{ color }}>
+            {getLevelIcon(clampedScore)}
+          </div>
+          <span className="score-gauge-center text-4xl font-bold tabular-nums tracking-tight" style={{ color }}>
+            {percentage}
+            <span className="text-lg font-normal text-gray-500">%</span>
+          </span>
+          <span className="score-gauge-center mt-0.5 text-xs font-semibold uppercase tracking-wide" style={{ color }}>
+            {getLevelText(clampedScore)}
+          </span>
+        </div>
+      </div>
+
+      <p className="text-xs text-gray-500 font-medium mt-2">{label}</p>
+
+      <div className="mt-3 flex items-center gap-3">
+        {[
+          { label: 'Safe', color: '#10B981' },
+          { label: 'Warning', color: '#EAB308' },
+          { label: 'High', color: '#F97316' },
+          { label: 'Critical', color: '#EF4444' },
+        ].map(item => (
+          <div key={item.label} className="flex items-center gap-1">
+            <div className="h-2 w-2 rounded-full" style={{ backgroundColor: item.color }} />
+            <span className="text-[9px] text-gray-500">{item.label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

demo/frontend/src/components/TranscriptPanel.tsx

@@ -0,0 +1,212 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { MessageSquare, Radio } from 'lucide-react'
+
+interface TranscriptPanelProps {
+  sentences: Array<{
+    text: string
+    score: number
+    index: number
+  }>
+  isStreaming: boolean
+}
+
+const KEYWORD_STYLES: Array<{ pattern: RegExp; className: string }> = [
+  { pattern: /\b(immediately|urgent|hurry|deadline|today|now)\b/gi, className: 'transcript-keyword transcript-keyword-urgent' },
+  { pattern: /\b(gift cards?|google play|codes?)\b/gi, className: 'transcript-keyword transcript-keyword-payment' },
+  { pattern: /\b(password|pin|social security|verification code|bank details?|ssn)\b/gi, className: 'transcript-keyword transcript-keyword-credential' },
+  { pattern: /\b(arrest|warrant|prosecution|criminal)\b/gi, className: 'transcript-keyword transcript-keyword-threat' },
+  { pattern: /\b(remote access|download|website|click|login)\b/gi, className: 'transcript-keyword transcript-keyword-action' },
+]
+
+function getScoreColor(score: number): string {
+  if (score < 0.3) return 'border-safe'
+  if (score < 0.5) return 'border-warning'
+  if (score < 0.75) return 'border-orange-500'
+  return 'border-alert'
+}
+
+function getScoreBg(score: number): string {
+  if (score < 0.3) return 'bg-safe/5'
+  if (score < 0.5) return 'bg-warning/5'
+  if (score < 0.75) return 'bg-orange-500/5'
+  return 'bg-alert/5'
+}
+
+function getScoreBadge(score: number): { bg: string; text: string; pulse: boolean } {
+  if (score < 0.3) return { bg: 'bg-safe/10 text-safe', text: 'Safe', pulse: false }
+  if (score < 0.5) return { bg: 'bg-warning/10 text-warning', text: 'Caution', pulse: false }
+  if (score < 0.75) return { bg: 'bg-orange-500/10 text-orange-400', text: 'Suspicious', pulse: true }
+  return { bg: 'bg-alert/10 text-alert', text: 'Danger', pulse: true }
+}
+
+function highlightKeywords(text: string) {
+  if (!text) return null
+
+  const matches: Array<{ start: number; end: number; className: string }> = []
+
+  KEYWORD_STYLES.forEach(({ pattern, className }) => {
+    const regex = new RegExp(pattern.source, pattern.flags)
+    let match = regex.exec(text)
+    while (match) {
+      matches.push({
+        start: match.index,
+        end: match.index + match[0].length,
+        className,
+      })
+      match = regex.exec(text)
+    }
+  })
+
+  matches.sort((a, b) => a.start - b.start || b.end - a.end)
+
+  const segments: Array<{ text: string; className?: string }> = []
+  let cursor = 0
+
+  matches.forEach(match => {
+    if (match.start < cursor) return
+    if (match.start > cursor) {
+      segments.push({ text: text.slice(cursor, match.start) })
+    }
+    segments.push({
+      text: text.slice(match.start, match.end),
+      className: match.className,
+    })
+    cursor = match.end
+  })
+
+  if (cursor < text.length) {
+    segments.push({ text: text.slice(cursor) })
+  }
+
+  return segments.map((segment, index) => (
+    <span key={`${segment.text}-${index}`} className={segment.className}>
+      {segment.text}
+    </span>
+  ))
+}
+
+interface TypewriterSentenceProps {
+  text: string
+  isLatest: boolean
+}
+
+function TypewriterSentence({ text, isLatest }: TypewriterSentenceProps) {
+  const [visibleLength, setVisibleLength] = useState(isLatest ? 0 : text.length)
+
+  useEffect(() => {
+    if (!isLatest) {
+      setVisibleLength(text.length)
+      return
+    }
+
+    setVisibleLength(0)
+    const stepMs = Math.max(16, Math.min(34, 520 / Math.max(text.length, 1)))
+    const interval = window.setInterval(() => {
+      setVisibleLength(current => {
+        if (current >= text.length) {
+          window.clearInterval(interval)
+          return current
+        }
+        return current + 1
+      })
+    }, stepMs)
+
+    return () => window.clearInterval(interval)
+  }, [isLatest, text])
+
+  const visibleText = useMemo(() => text.slice(0, visibleLength), [text, visibleLength])
+  const isTyping = isLatest && visibleLength < text.length
+
+  return (
+    <span className={isTyping ? 'typewriter-cursor' : undefined}>
+      {highlightKeywords(visibleText)}
+    </span>
+  )
+}
+
+export default function TranscriptPanel({ sentences, isStreaming }: TranscriptPanelProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [sentences])
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <MessageSquare className="w-4 h-4 text-brand-teal" />
+          <h3 className="text-sm font-semibold text-gray-200">Live Transcript</h3>
+        </div>
+        {isStreaming && (
+          <div className="flex items-center gap-1.5 text-xs text-safe">
+            <Radio className="w-3 h-3 animate-pulse" />
+            <span className="font-medium">Streaming</span>
+          </div>
+        )}
+      </div>
+
+      <div
+        ref={scrollRef}
+        className="transcript-scroll space-y-2 max-h-[280px] overflow-y-auto pr-2 scroll-smooth"
+      >
+        {sentences.length === 0 ? (
+          <div className="flex items-center justify-center py-12 text-gray-600">
+            <div className="text-center">
+              <MessageSquare className="w-8 h-8 mx-auto mb-2 opacity-30" />
+              <p className="text-sm">Waiting for transcript...</p>
+              <p className="text-xs mt-1 opacity-60">Start a sample call to see real-time analysis</p>
+            </div>
+          </div>
+        ) : (
+          sentences.map((sentence, i) => {
+            const badge = getScoreBadge(sentence.score)
+            const isLatest = i === sentences.length - 1
+
+            return (
+              <div
+                key={sentence.index}
+                className={`
+                  flex items-start gap-3 rounded-lg border-l-[3px] p-3
+                  ${getScoreColor(sentence.score)} ${getScoreBg(sentence.score)}
+                  animate-fade-in
+                `}
+                style={{ animationDelay: `${i * 50}ms` }}
+              >
+                <span className="mt-0.5 w-4 flex-shrink-0 text-right font-mono text-[10px] text-gray-600">
+                  {sentence.index + 1}
+                </span>
+
+                <p className="flex-1 font-mono text-sm leading-relaxed text-gray-300">
+                  <TypewriterSentence text={sentence.text} isLatest={isLatest} />
+                </p>
+
+                <div className="flex flex-shrink-0 flex-col items-end gap-1">
+                  <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded ${badge.bg} ${badge.pulse ? 'transcript-score-badge-pulse' : ''}`}>
+                    {badge.text}
+                  </span>
+                  <span className="text-[10px] text-gray-500 font-mono tabular-nums">
+                    {(sentence.score * 100).toFixed(0)}%
+                  </span>
+                </div>
+              </div>
+            )
+          })
+        )}
+
+        {isStreaming && sentences.length > 0 && (
+          <div className="flex items-center gap-2 px-3 py-2">
+            <div className="flex gap-1">
+              <div className="streaming-dot w-1.5 h-1.5 rounded-full bg-brand-teal" />
+              <div className="streaming-dot w-1.5 h-1.5 rounded-full bg-brand-teal" />
+              <div className="streaming-dot w-1.5 h-1.5 rounded-full bg-brand-teal" />
+            </div>
+            <span className="text-[10px] text-gray-500">Listening...</span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

demo/frontend/src/hooks/useWebSocket.ts

@@ -0,0 +1,112 @@
+import { useRef, useState, useCallback, useEffect } from 'react'
+
+interface UseWebSocketOptions {
+  url: string
+  onMessage: (data: any) => void
+  onOpen?: () => void
+  onClose?: () => void
+  autoConnect?: boolean
+}
+
+interface UseWebSocketReturn {
+  connect: () => void
+  disconnect: () => void
+  send: (data: any) => void
+  isConnected: boolean
+  error: string | null
+}
+
+export function useWebSocket(options: UseWebSocketOptions): UseWebSocketReturn {
+  const { url, onMessage, onOpen, onClose, autoConnect = false } = options
+  const [isConnected, setIsConnected] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const wsRef = useRef<WebSocket | null>(null)
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const onMessageRef = useRef(onMessage)
+  const onOpenRef = useRef(onOpen)
+  const onCloseRef = useRef(onClose)
+
+  // Keep callback refs fresh without causing reconnections
+  useEffect(() => {
+    onMessageRef.current = onMessage
+    onOpenRef.current = onOpen
+    onCloseRef.current = onClose
+  }, [onMessage, onOpen, onClose])
+
+  const disconnect = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current)
+      reconnectTimeoutRef.current = null
+    }
+    if (wsRef.current) {
+      wsRef.current.close(1000, 'Client disconnect')
+      wsRef.current = null
+    }
+    setIsConnected(false)
+  }, [])
+
+  const connect = useCallback(() => {
+    if (!url) return
+    disconnect()
+    setError(null)
+
+    try {
+      const ws = new WebSocket(url)
+      wsRef.current = ws
+
+      ws.onopen = () => {
+        setIsConnected(true)
+        setError(null)
+        onOpenRef.current?.()
+      }
+
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data)
+          onMessageRef.current(data)
+        } catch {
+          // If not JSON, pass raw data
+          onMessageRef.current(event.data)
+        }
+      }
+
+      ws.onerror = () => {
+        setError('WebSocket connection error')
+      }
+
+      ws.onclose = (event) => {
+        setIsConnected(false)
+        wsRef.current = null
+        onCloseRef.current?.()
+
+        // Auto-reconnect on abnormal closure (not manual disconnect)
+        if (event.code !== 1000 && event.code !== 1005) {
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connect()
+          }, 3000)
+        }
+      }
+    } catch (err) {
+      setError(`Failed to connect: ${err}`)
+      setIsConnected(false)
+    }
+  }, [url, disconnect])
+
+  const send = useCallback((data: any) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(typeof data === 'string' ? data : JSON.stringify(data))
+    }
+  }, [])
+
+  // Auto-connect on mount if configured
+  useEffect(() => {
+    if (autoConnect && url) {
+      connect()
+    }
+    return () => {
+      disconnect()
+    }
+  }, [autoConnect, url, connect, disconnect])
+
+  return { connect, disconnect, send, isConnected, error }
+}

demo/frontend/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './styles/index.css'
+import './styles/phone.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

demo/frontend/src/styles/index.css

@@ -0,0 +1,120 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    @apply bg-dark-bg text-gray-100 font-sans;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  button {
+    transition:
+      transform 180ms ease,
+      background-color 180ms ease,
+      border-color 180ms ease,
+      color 180ms ease,
+      box-shadow 180ms ease,
+      opacity 180ms ease;
+  }
+
+  button:hover:not(:disabled) {
+    transform: translateY(-1px);
+  }
+
+  button:active:not(:disabled) {
+    transform: translateY(0) scale(0.98);
+  }
+
+  button:disabled {
+    cursor: not-allowed;
+  }
+
+  button:focus-visible {
+    outline: 2px solid rgba(20, 184, 166, 0.5);
+    outline-offset: 2px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-dark-bg;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-dark-surface rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-dark-border;
+  }
+}
+
+@layer components {
+  .glass-card {
+    @apply bg-dark-card/80 backdrop-blur-xl border border-dark-border/50 rounded-2xl;
+  }
+
+  .control-button {
+    @apply inline-flex items-center justify-center gap-2 rounded-lg border border-dark-border/50 bg-dark-card text-gray-300 shadow-sm shadow-black/10;
+  }
+
+  .control-button:hover:not(:disabled) {
+    @apply border-brand-teal/30 bg-brand-teal/10 text-brand-teal;
+    box-shadow: 0 10px 25px rgba(13, 148, 136, 0.08);
+  }
+
+  .control-button:disabled {
+    @apply bg-dark-card/70 text-gray-600 border-dark-border/40 opacity-50;
+  }
+
+  .skeleton-block {
+    position: relative;
+    overflow: hidden;
+    border-radius: 0.75rem;
+    background: linear-gradient(90deg, rgba(51, 65, 85, 0.55) 0%, rgba(71, 85, 105, 0.75) 50%, rgba(51, 65, 85, 0.55) 100%);
+    background-size: 200% 100%;
+    animation: skeleton-wave 1.6s ease-in-out infinite;
+  }
+
+  .panel-skeleton {
+    @apply space-y-3;
+  }
+
+  .panel-skeleton-card {
+    @apply rounded-2xl border border-dark-border/30 bg-dark-bg/30 p-4;
+  }
+
+  @keyframes skeleton-wave {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  .glow-teal {
+    box-shadow: 0 0 20px rgba(13, 148, 136, 0.15), 0 0 60px rgba(13, 148, 136, 0.05);
+  }
+
+  .glow-red {
+    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2), 0 0 60px rgba(239, 68, 68, 0.1);
+  }
+
+  .tab-active {
+    @apply text-brand-teal border-b-2 border-brand-teal;
+  }
+
+  .tab-inactive {
+    @apply text-gray-400 hover:text-gray-200 border-b-2 border-transparent;
+  }
+}

demo/frontend/src/styles/phone.css

@@ -0,0 +1,535 @@
+/* ===== Phone Frame Styling ===== */
+
+.phone-frame {
+  perspective: 1000px;
+  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5))
+    drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3));
+}
+
+.phone-frame:hover {
+  transform: translateY(-2px);
+  transition: transform 0.3s ease;
+}
+
+.phone-screen-shake {
+  animation: phone-screen-shake 480ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+
+@keyframes phone-screen-shake {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  18% {
+    transform: translate3d(-1.5px, 0, 0);
+  }
+  36% {
+    transform: translate3d(1.25px, 0, 0);
+  }
+  54% {
+    transform: translate3d(-1px, 0.4px, 0);
+  }
+  72% {
+    transform: translate3d(0.8px, -0.4px, 0);
+  }
+}
+
+/* ===== Pulse Animation for Critical Alerts ===== */
+
+@keyframes pulse-border {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6),
+      inset 0 0 20px rgba(239, 68, 68, 0.1);
+  }
+  50% {
+    box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.3),
+      inset 0 0 30px rgba(239, 68, 68, 0.15);
+  }
+}
+
+.pulse-border {
+  animation: pulse-border 1.5s ease-in-out infinite;
+}
+
+/* ===== Typewriter Effect for Transcript ===== */
+
+@keyframes typewriter-cursor {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.typewriter-cursor::after {
+  content: "|";
+  animation: typewriter-cursor 0.8s ease-in-out infinite;
+  color: #0d9488;
+  font-weight: bold;
+  margin-left: 1px;
+}
+
+.transcript-keyword {
+  font-weight: 700;
+  border-radius: 0.35rem;
+  padding: 0 0.12rem;
+}
+
+.transcript-keyword-urgent {
+  color: #fbbf24;
+  background: rgba(245, 158, 11, 0.12);
+}
+
+.transcript-keyword-payment {
+  color: #fb923c;
+  background: rgba(249, 115, 22, 0.12);
+}
+
+.transcript-keyword-credential {
+  color: #f87171;
+  background: rgba(239, 68, 68, 0.12);
+}
+
+.transcript-keyword-threat {
+  color: #ef4444;
+  background: rgba(127, 29, 29, 0.24);
+}
+
+.transcript-keyword-action {
+  color: #2dd4bf;
+  background: rgba(13, 148, 136, 0.12);
+}
+
+.transcript-score-badge-pulse {
+  animation: transcript-badge-pulse 1.25s ease-in-out infinite;
+  box-shadow: 0 0 0 rgba(249, 115, 22, 0);
+}
+
+@keyframes transcript-badge-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
+  }
+  50% {
+    transform: scale(1.06);
+    box-shadow: 0 0 18px 0 rgba(249, 115, 22, 0.18);
+  }
+}
+
+/* ===== Slide Down for Alert Overlay ===== */
+
+.alert-slide-enter {
+  animation: alert-slide 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+}
+
+.alert-overlay {
+  animation: alert-overlay-fade 420ms ease-out both;
+}
+
+.alert-overlay-critical {
+  animation: alert-overlay-fade 420ms ease-out both;
+}
+
+.alert-overlay-panel {
+  transform-origin: top center;
+  animation: alert-overlay-spring 620ms cubic-bezier(0.18, 0.9, 0.22, 1.16) both;
+}
+
+.alert-banner {
+  animation: alert-banner-spring 560ms cubic-bezier(0.22, 0.88, 0.28, 1.14) both;
+}
+
+.alert-banner-card {
+  transform-origin: top center;
+}
+
+@keyframes alert-slide {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes alert-overlay-fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes alert-overlay-spring {
+  0% {
+    transform: translateY(-30px) scale(0.97);
+    opacity: 0;
+  }
+  55% {
+    transform: translateY(8px) scale(1.01);
+    opacity: 1;
+  }
+  78% {
+    transform: translateY(-3px) scale(0.998);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes alert-banner-spring {
+  0% {
+    transform: translateY(-22px) scale(0.96);
+    opacity: 0;
+  }
+  60% {
+    transform: translateY(4px) scale(1.01);
+    opacity: 1;
+  }
+  82% {
+    transform: translateY(-2px) scale(0.998);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+/* ===== Smooth Gauge Transitions ===== */
+
+.gauge-arc {
+  transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1),
+    stroke 0.45s ease,
+    filter 0.45s ease;
+  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gauge-color) 40%, transparent));
+}
+
+.gauge-needle {
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center center;
+}
+
+.score-gauge-shell {
+  isolation: isolate;
+}
+
+.score-gauge-svg {
+  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gauge-color) 28%, transparent));
+  transition: filter 0.45s ease;
+}
+
+.score-gauge-glow {
+  background:
+    radial-gradient(circle at center, color-mix(in srgb, var(--gauge-color) 22%, transparent) 0%, transparent 68%);
+  filter: blur(8px);
+  opacity: 0.95;
+  transition: background 0.45s ease, opacity 0.45s ease, transform 0.7s ease;
+}
+
+.score-gauge-center {
+  transition: color 0.45s ease, transform 0.35s ease, filter 0.45s ease;
+}
+
+.score-gauge-threshold-pulse .score-gauge-glow {
+  animation: score-gauge-threshold-glow 700ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.score-gauge-threshold-pulse .score-gauge-center {
+  animation: score-gauge-center-pop 520ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.score-gauge-burst {
+  overflow: visible;
+}
+
+.score-gauge-particle {
+  width: 6px;
+  height: 6px;
+  margin-left: -3px;
+  margin-top: -3px;
+  border-radius: 9999px;
+  background:
+    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), var(--burst-color) 58%, transparent 72%);
+  box-shadow: 0 0 14px color-mix(in srgb, var(--burst-color) 60%, transparent);
+  opacity: 0;
+  transform: rotate(var(--particle-angle)) translateY(0) scale(0.4);
+  animation: score-gauge-particle-burst 860ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
+}
+
+@keyframes score-gauge-threshold-glow {
+  0% {
+    transform: scale(0.92);
+    opacity: 0.55;
+  }
+  55% {
+    transform: scale(1.08);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.95;
+  }
+}
+
+@keyframes score-gauge-center-pop {
+  0% {
+    transform: scale(0.96);
+  }
+  55% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes score-gauge-particle-burst {
+  0% {
+    opacity: 0;
+    transform: rotate(var(--particle-angle)) translateY(0) scale(0.4);
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(var(--particle-angle)) translateY(calc(-1 * var(--particle-distance))) scale(0.95);
+  }
+}
+
+/* ===== Score Bar Animations ===== */
+
+.score-bar {
+  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.3s ease;
+}
+
+/* ===== Gradient Vector Scroll ===== */
+
+.gradient-scroll {
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 5%,
+    black 95%,
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 5%,
+    black 95%,
+    transparent
+  );
+}
+
+/* ===== Glass Effect Enhancement ===== */
+
+.glass-effect {
+  background: rgba(30, 41, 59, 0.6);
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+}
+
+/* ===== Streaming Dots ===== */
+
+@keyframes streaming-dot {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.streaming-dot:nth-child(1) {
+  animation: streaming-dot 1.4s ease-in-out 0s infinite;
+}
+.streaming-dot:nth-child(2) {
+  animation: streaming-dot 1.4s ease-in-out 0.2s infinite;
+}
+.streaming-dot:nth-child(3) {
+  animation: streaming-dot 1.4s ease-in-out 0.4s infinite;
+}
+
+/* ===== Tab Underline Animation ===== */
+
+.tab-underline {
+  position: relative;
+}
+
+.tab-underline::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #0d9488;
+  transform: scaleX(0);
+  transition: transform 0.2s ease;
+}
+
+.tab-underline.active::after {
+  transform: scaleX(1);
+}
+
+/* ===== Feature Bar Hover ===== */
+
+.feature-bar-container:hover .feature-bar {
+  filter: brightness(1.2);
+}
+
+.feature-bar-container {
+  animation: feature-bar-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.feature-track {
+  background:
+    linear-gradient(90deg, var(--feature-track), rgba(15, 23, 42, 0.26));
+  transition: background 0.35s ease;
+}
+
+.feature-bar {
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--feature-color) 80%, white 8%) 0%, var(--feature-color) 55%, color-mix(in srgb, var(--feature-color) 75%, black 6%) 100%);
+  box-shadow: 0 0 18px var(--feature-glow);
+  transform-origin: left center;
+  animation: feature-bar-fill 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, box-shadow 0.4s ease, filter 0.25s ease;
+}
+
+.feature-tooltip {
+  opacity: 0;
+  transform: translate(-50%, 8px) scale(0.98);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.feature-tooltip::before {
+  content: "";
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(2, 6, 23, 0.95);
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.feature-tooltip-trigger:hover .feature-tooltip {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+}
+
+@keyframes feature-bar-slide-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-18px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes feature-bar-fill {
+  0% {
+    transform: scaleX(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}
+
+/* ===== Ring Pulse for Avatar ===== */
+
+@keyframes ring-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+.ring-pulse {
+  animation: ring-pulse 2s ease-out infinite;
+}
+
+/* ===== Privacy Panel Arrow Animation ===== */
+
+@keyframes flow-arrow {
+  0% {
+    transform: translateX(-4px);
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(4px);
+    opacity: 0.3;
+  }
+}
+
+.flow-arrow {
+  animation: flow-arrow 1.5s ease-in-out infinite;
+}
+
+/* ===== Smooth Number Transition ===== */
+
+.number-transition {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ===== Chart Tooltip Styling ===== */
+
+.recharts-default-tooltip {
+  background-color: #1e293b !important;
+  border: 1px solid #334155 !important;
+  border-radius: 8px !important;
+}
+
+.recharts-tooltip-label {
+  color: #94a3b8 !important;
+}
+
+/* ===== Scrollbar for Transcript ===== */
+
+.transcript-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+
+.transcript-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.transcript-scroll::-webkit-scrollbar-thumb {
+  background: #334155;
+  border-radius: 2px;
+}
+
+.transcript-scroll::-webkit-scrollbar-thumb:hover {
+  background: #475569;
+}

demo/frontend/tailwind.config.js

@@ -0,0 +1,70 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          teal: '#0D9488',
+          'teal-light': '#14B8A6',
+          'teal-dark': '#0F766E',
+        },
+        dark: {
+          bg: '#0F172A',
+          card: '#1E293B',
+          surface: '#334155',
+          border: '#475569',
+        },
+        safe: {
+          DEFAULT: '#10B981',
+          light: '#34D399',
+        },
+        warning: {
+          DEFAULT: '#F59E0B',
+          light: '#FBBF24',
+        },
+        alert: {
+          DEFAULT: '#EF4444',
+          light: '#F87171',
+          dark: '#DC2626',
+        },
+      },
+      fontFamily: {
+        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      animation: {
+        'pulse-alert': 'pulse-alert 1.5s ease-in-out infinite',
+        'slide-down': 'slide-down 0.4s ease-out',
+        'fade-in': 'fade-in 0.3s ease-out',
+        'gauge-fill': 'gauge-fill 1s ease-out',
+        'typewriter': 'typewriter 0.5s ease-out',
+      },
+      keyframes: {
+        'pulse-alert': {
+          '0%, 100%': { opacity: '1', boxShadow: '0 0 0 0 rgba(239, 68, 68, 0.4)' },
+          '50%': { opacity: '0.9', boxShadow: '0 0 20px 10px rgba(239, 68, 68, 0.2)' },
+        },
+        'slide-down': {
+          '0%': { transform: 'translateY(-100%)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        'fade-in': {
+          '0%': { opacity: '0', transform: 'translateY(8px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'gauge-fill': {
+          '0%': { strokeDashoffset: '283' },
+        },
+        'typewriter': {
+          '0%': { opacity: '0', transform: 'translateX(-4px)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}

demo/frontend/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

demo/frontend/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

demo/frontend/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': 'http://localhost:8000',
+      '/ws': {
+        target: 'ws://localhost:8000',
+        ws: true,
+      }
+    }
+  }
+})

deploy_server.py

@@ -0,0 +1,43 @@
+"""
+SentinelEdge deployment server for Hugging Face Spaces.
+Adds static file serving to the demo backend app.
+"""
+
+import os
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parent))
+
+import uvicorn
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+
+# The demo backend app already has /api/* and /ws/* routes
+from demo.backend.main import app
+from hub.server import app as hub_app
+
+# Mount hub server at /hub
+app.mount("/hub", hub_app)
+
+# Serve built React frontend as static files
+static_dir = Path(__file__).parent / "static"
+
+if static_dir.exists():
+    @app.get("/")
+    async def serve_index() -> FileResponse:
+        return FileResponse(str(static_dir / "index.html"))
+
+    # Catch-all for SPA client-side routing (must be after API/WS routes)
+    @app.get("/{path:path}")
+    async def serve_spa(path: str) -> FileResponse:
+        file_path = static_dir / path
+        if file_path.exists() and file_path.is_file():
+            return FileResponse(str(file_path))
+        return FileResponse(str(static_dir / "index.html"))
+
+
+port = int(os.environ.get("PORT", 7860))
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=port)

federated/__init__.py

@@ -0,0 +1 @@
+"""Federated learning simulation."""

federated/dp_injector.py

@@ -0,0 +1,83 @@
+"""Differential privacy noise injection for federated MLP updates."""
+import numpy as np
+
+
+class DPInjector:
+    """Add calibrated Gaussian noise to MLP gradient deltas before transmission.
+
+    Implements the Gaussian mechanism for (epsilon, delta)-differential privacy:
+        1. Clip gradient delta to bounded L2 norm (max_grad_norm)
+        2. Add Gaussian noise calibrated to the sensitivity
+        3. Track cumulative privacy budget across rounds
+    """
+
+    def __init__(self, epsilon: float = 0.3, delta: float = 1e-5,
+                 max_grad_norm: float = 1.0):
+        self.epsilon = epsilon
+        self.delta = delta
+        self.max_grad_norm = max_grad_norm
+        self.rounds_participated = 0
+
+    def clip_gradient(self, gradient: np.ndarray) -> np.ndarray:
+        """Clip gradient delta to max_grad_norm for bounded sensitivity."""
+        norm = np.linalg.norm(gradient)
+        if norm > self.max_grad_norm:
+            gradient = gradient * (self.max_grad_norm / norm)
+        return gradient
+
+    def compute_sigma(self, n_local_samples: int) -> float:
+        """Compute noise standard deviation.
+
+        sensitivity = max_grad_norm / n_local_samples
+        sigma = sensitivity * sqrt(2 * ln(1.25 / delta)) / epsilon
+        """
+        sensitivity = self.max_grad_norm / max(n_local_samples, 1)
+        sigma = sensitivity * np.sqrt(2.0 * np.log(1.25 / self.delta)) / self.epsilon
+        return sigma
+
+    def add_noise(self, gradient_delta: np.ndarray,
+                  n_local_samples: int) -> tuple:
+        """Apply DP to a gradient delta: clip, noise, return.
+
+        Args:
+            gradient_delta: Flat 1D array (MLP weight delta).
+            n_local_samples: Number of local training samples.
+
+        Returns:
+            (noised_delta, sigma_used, epsilon_spent_this_round)
+        """
+        # Step 1: Clip the gradient delta to bounded L2 norm
+        clipped = self.clip_gradient(gradient_delta)
+
+        # Step 2: Compute calibrated noise scale
+        sigma = self.compute_sigma(n_local_samples)
+
+        # Step 3: Add Gaussian noise
+        noise = np.random.normal(0.0, sigma, size=clipped.shape)
+        noised_delta = clipped + noise
+
+        # Track rounds
+        self.rounds_participated += 1
+
+        return noised_delta, sigma, self.epsilon
+
+    def privacy_budget_spent(self, n_rounds: int = None) -> float:
+        """Track cumulative privacy budget using advanced composition theorem.
+
+        Total epsilon after k rounds:
+            eps_total = epsilon * sqrt(2 * k * ln(1/delta)) + k * epsilon * (exp(epsilon) - 1)
+
+        Args:
+            n_rounds: Number of rounds to compute budget for.
+                      If None, uses self.rounds_participated.
+        """
+        k = n_rounds if n_rounds is not None else self.rounds_participated
+        if k == 0:
+            return 0.0
+
+        eps = self.epsilon
+        d = self.delta
+
+        term1 = eps * np.sqrt(2.0 * k * np.log(1.0 / d))
+        term2 = k * eps * (np.exp(eps) - 1.0)
+        return term1 + term2

federated/local_trainer.py

@@ -0,0 +1,211 @@
+"""On-device local training with real MLP backpropagation."""
+import numpy as np
+from dataclasses import dataclass, field
+
+
+@dataclass
+class LocalTrainingBuffer:
+    """Encrypted local label store. Stores feature vectors + labels only."""
+    features: list = field(default_factory=list)
+    labels: list = field(default_factory=list)
+    max_samples: int = 500
+
+    def add(self, feature_vector: np.ndarray, label: int):
+        """Add a training sample. Auto-evicts oldest if at capacity."""
+        if len(self.labels) >= self.max_samples:
+            self.features.pop(0)
+            self.labels.pop(0)
+        self.features.append(feature_vector.copy())
+        self.labels.append(label)
+
+    def size(self) -> int:
+        return len(self.labels)
+
+    def to_arrays(self) -> tuple:
+        """Return (features_array, labels_array) as numpy arrays."""
+        if len(self.features) == 0:
+            return np.array([]).reshape(0, 0), np.array([], dtype=int)
+        X = np.vstack(self.features)
+        y = np.array(self.labels, dtype=int)
+        return X, y
+
+
+class LocalTrainer:
+    """On-device model fine-tuning via real mini-batch SGD on a 3-layer MLP.
+
+    The MLP architecture mirrors MLPClassifier:
+        input -> hidden1 (128, ReLU) -> hidden2 (64, ReLU) -> output (1, Sigmoid)
+
+    Fine-tuning performs real numpy backpropagation through all three layers
+    with BCE loss.
+    """
+
+    # MLP architecture constants (must match MLPClassifier)
+    HIDDEN1_DIM = 128
+    HIDDEN2_DIM = 64
+    OUTPUT_DIM = 1
+
+    def __init__(self, device_id: str, input_dim: int = 402):
+        self.device_id = device_id
+        self.input_dim = input_dim
+        self.buffer = LocalTrainingBuffer()
+        self.current_model_version = 0
+
+    def ingest_call_data(self, features: np.ndarray, label: int):
+        """Store a labeled sample from user feedback."""
+        self.buffer.add(features, label)
+
+    def _unpack_weights(self, flat_weights: np.ndarray) -> dict:
+        """Unpack a flat weight vector into the six MLP parameter arrays."""
+        idx = 0
+        params = {}
+
+        size = self.input_dim * self.HIDDEN1_DIM
+        params['W1'] = flat_weights[idx:idx + size].reshape(self.input_dim, self.HIDDEN1_DIM)
+        idx += size
+
+        size = self.HIDDEN1_DIM
+        params['b1'] = flat_weights[idx:idx + size].copy()
+        idx += size
+
+        size = self.HIDDEN1_DIM * self.HIDDEN2_DIM
+        params['W2'] = flat_weights[idx:idx + size].reshape(self.HIDDEN1_DIM, self.HIDDEN2_DIM)
+        idx += size
+
+        size = self.HIDDEN2_DIM
+        params['b2'] = flat_weights[idx:idx + size].copy()
+        idx += size
+
+        size = self.HIDDEN2_DIM * self.OUTPUT_DIM
+        params['W3'] = flat_weights[idx:idx + size].reshape(self.HIDDEN2_DIM, self.OUTPUT_DIM)
+        idx += size
+
+        size = self.OUTPUT_DIM
+        params['b3'] = flat_weights[idx:idx + size].copy()
+        idx += size
+
+        return params
+
+    def _pack_weights(self, params: dict) -> np.ndarray:
+        """Pack the six MLP parameter arrays into a flat weight vector."""
+        return np.concatenate([
+            params['W1'].ravel(), params['b1'].ravel(),
+            params['W2'].ravel(), params['b2'].ravel(),
+            params['W3'].ravel(), params['b3'].ravel(),
+        ])
+
+    def fine_tune(self, global_model_weights: np.ndarray,
+                  lr: float = 0.01, n_epochs: int = 3,
+                  batch_size: int = 32) -> np.ndarray:
+        """Fine-tune on local buffer using real mini-batch SGD with numpy backprop.
+
+        Steps:
+            1. Load global MLP weights via unpack
+            2. Normalize input features for numerical stability
+            3. Run forward pass on each mini-batch
+            4. Compute BCE loss gradient (backprop through 3-layer MLP)
+            5. Update weights with SGD
+            6. Return gradient delta = local_weights - global_weights
+
+        Args:
+            global_model_weights: Flat 1D array of all MLP parameters.
+            lr: Learning rate for SGD.
+            n_epochs: Number of training epochs over local data.
+            batch_size: Mini-batch size.
+
+        Returns:
+            Gradient delta (flat 1D array): local_weights - global_weights.
+        """
+        X, y = self.buffer.to_arrays()
+        if X.shape[0] == 0:
+            return np.zeros_like(global_model_weights)
+
+        n_samples = X.shape[0]
+
+        # Pad or truncate features to match input_dim
+        if X.shape[1] < self.input_dim:
+            pad = np.zeros((n_samples, self.input_dim - X.shape[1]))
+            X = np.hstack([X, pad])
+        elif X.shape[1] > self.input_dim:
+            X = X[:, :self.input_dim]
+
+        # Cast to float64 for numerical stability
+        X = X.astype(np.float64)
+
+        # Unpack global weights into local parameters
+        params = self._unpack_weights(global_model_weights.astype(np.float64))
+
+        # Mini-batch SGD with real backpropagation
+        for epoch in range(n_epochs):
+            indices = np.arange(n_samples)
+            np.random.shuffle(indices)
+
+            for start in range(0, n_samples, batch_size):
+                end = min(start + batch_size, n_samples)
+                batch_idx = indices[start:end]
+                X_batch = X[batch_idx].astype(np.float64)  # (B, input_dim)
+                y_batch = y[batch_idx].reshape(-1, 1).astype(np.float64)  # (B, 1)
+                B = X_batch.shape[0]
+
+                # ---- Forward pass ----
+                # Layer 1: input -> hidden1
+                z1 = X_batch @ params['W1'] + params['b1']  # (B, 128)
+                z1 = np.nan_to_num(z1, nan=0.0, posinf=50.0, neginf=-50.0)
+                h1 = np.maximum(0, z1)  # ReLU
+
+                # Layer 2: hidden1 -> hidden2
+                z2 = h1 @ params['W2'] + params['b2']  # (B, 64)
+                z2 = np.nan_to_num(z2, nan=0.0, posinf=50.0, neginf=-50.0)
+                h2 = np.maximum(0, z2)  # ReLU
+
+                # Layer 3: hidden2 -> output
+                logit = h2 @ params['W3'] + params['b3']  # (B, 1)
+                logit = np.nan_to_num(logit, nan=0.0, posinf=50.0, neginf=-50.0)
+                logit = np.clip(logit, -50, 50)
+                pred = 1.0 / (1.0 + np.exp(-logit))  # sigmoid
+
+                # ---- Backward pass (BCE loss) ----
+                # d(BCE)/d(logit) = pred - y
+                dlogit = (pred - y_batch) / B  # (B, 1), averaged over batch
+
+                # Layer 3 gradients
+                dW3 = h2.T @ dlogit  # (64, 1)
+                db3 = np.sum(dlogit, axis=0)  # (1,)
+
+                # Backprop into h2
+                dh2 = dlogit @ params['W3'].T  # (B, 64)
+                dh2 = dh2 * (z2 > 0)  # ReLU backward
+
+                # Layer 2 gradients
+                dW2 = h1.T @ dh2  # (128, 64)
+                db2 = np.sum(dh2, axis=0)  # (64,)
+
+                # Backprop into h1
+                dh1 = dh2 @ params['W2'].T  # (B, 128)
+                dh1 = dh1 * (z1 > 0)  # ReLU backward
+
+                # Layer 1 gradients
+                dW1 = X_batch.T @ dh1  # (input_dim, 128)
+                db1 = np.sum(dh1, axis=0)  # (128,)
+
+                # ---- NaN protection and gradient clipping ----
+                max_grad = 10.0
+                for name, grad in [('W1', dW1), ('b1', db1),
+                                   ('W2', dW2), ('b2', db2),
+                                   ('W3', dW3), ('b3', db3)]:
+                    np.nan_to_num(grad, copy=False, nan=0.0,
+                                  posinf=max_grad, neginf=-max_grad)
+                    np.clip(grad, -max_grad, max_grad, out=grad)
+
+                # ---- SGD update ----
+                params['W1'] -= lr * dW1
+                params['b1'] -= lr * db1
+                params['W2'] -= lr * dW2
+                params['b2'] -= lr * db2
+                params['W3'] -= lr * dW3
+                params['b3'] -= lr * db3
+
+        # Return the delta: local_weights - global_weights
+        local_flat = self._pack_weights(params)
+        delta = local_flat - global_model_weights
+        return delta

federated/simulate.py

@@ -0,0 +1,507 @@
+"""Simulate federated learning with N devices over M rounds using a real MLP."""
+import numpy as np
+import json
+import os
+import sys
+import argparse
+from typing import Optional
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+from federated.local_trainer import LocalTrainer, LocalTrainingBuffer
+from federated.dp_injector import DPInjector
+from sentinel_edge.classifier.mlp_classifier import MLPClassifier
+
+
+INPUT_DIM = 402
+
+
+class FederatedSimulation:
+    """Simulate federated learning with a real 3-layer MLP classifier.
+
+    Each round:
+        1. Each device copies global weights, fine-tunes with real numpy backprop
+        2. Computes gradient delta (local_weights - global_weights)
+        3. Applies DP noise (clip + Gaussian)
+        4. Hub aggregates via FedAvg weighted by n_samples
+        5. Global model updated, evaluated on hold-out test set
+    """
+
+    def __init__(self, n_devices: int = 5, n_rounds: int = 10,
+                 epsilon: float = 0.3, use_dp: bool = True):
+        self.n_devices = n_devices
+        self.n_rounds = n_rounds
+        self.use_dp = use_dp
+        self.devices: list = []
+        self.global_model: MLPClassifier = None
+        self.round_results: list = []
+        self.dp_injector = DPInjector(epsilon=epsilon)
+
+        # Hold-out test set
+        self.test_features: np.ndarray = None
+        self.test_labels: np.ndarray = None
+
+    # ------------------------------------------------------------------
+    # Device & data initialisation
+    # ------------------------------------------------------------------
+
+    def initialize(self):
+        """Create N simulated devices with non-IID data distributions.
+
+        Device data profiles:
+            Device 0: Heavy on IRS scams (60% scam rate)
+            Device 1: Heavy on tech support scams (55% scam rate)
+            Device 2: Mixed scam types (50% scam rate)
+            Device 3: Mostly legitimate calls (15% scam rate)
+            Device 4: Heavy on bank fraud (55% scam rate)
+            Device 5+: Random profile
+
+        All data is globally normalized once (z-score) so that all
+        devices and the test set share the same feature scale.
+        """
+        np.random.seed(42)
+
+        # Generate all device data first to compute global normalization
+        all_X = []
+        all_y = []
+        device_splits = []
+        for i in range(self.n_devices):
+            X, y = self._generate_device_data(i, n_samples=100)
+            device_splits.append((len(all_X), len(all_X) + len(X)))
+            all_X.append(X)
+            all_y.append(y)
+
+        # Balanced test set
+        rng = np.random.RandomState(999)
+        X_test, y_test = self._generate_test_set(rng, n_samples=300)
+        all_X.append(X_test)
+
+        # Global z-score normalization
+        all_data = np.vstack(all_X)
+        self._global_mean = all_data.mean(axis=0)
+        self._global_std = all_data.std(axis=0) + 1e-8
+
+        # Create devices with normalized data
+        self.devices = []
+        for i in range(self.n_devices):
+            device = LocalTrainer(device_id=f"device_{i}", input_dim=INPUT_DIM)
+            X = all_X[i]
+            y = all_y[i]
+            X_norm = (X - self._global_mean) / self._global_std
+            for j in range(X_norm.shape[0]):
+                device.ingest_call_data(X_norm[j], int(y[j]))
+            self.devices.append(device)
+
+        # Normalized test set
+        self.test_features = (X_test - self._global_mean) / self._global_std
+        self.test_labels = y_test
+
+    def _generate_device_data(self, device_idx: int,
+                              n_samples: int = 100) -> tuple:
+        """Generate synthetic 402-dim feature vectors for a device.
+
+        Scam vectors: positive bias in the first half of dimensions.
+        Legit vectors: negative bias in the first half.
+        Each device gets different class distributions (non-IID).
+        """
+        rng = np.random.RandomState(42 + device_idx * 1000)
+
+        device_profiles = {
+            0: {"scam_rate": 0.60, "irs": 0.70, "tech": 0.10, "bank": 0.10, "generic": 0.10},
+            1: {"scam_rate": 0.55, "irs": 0.10, "tech": 0.65, "bank": 0.10, "generic": 0.15},
+            2: {"scam_rate": 0.50, "irs": 0.25, "tech": 0.25, "bank": 0.25, "generic": 0.25},
+            3: {"scam_rate": 0.15, "irs": 0.25, "tech": 0.25, "bank": 0.25, "generic": 0.25},
+            4: {"scam_rate": 0.55, "irs": 0.05, "tech": 0.10, "bank": 0.70, "generic": 0.15},
+        }
+        profile = device_profiles.get(device_idx, {
+            "scam_rate": rng.uniform(0.3, 0.6),
+            "irs": 0.25, "tech": 0.25, "bank": 0.25, "generic": 0.25,
+        })
+
+        X = np.zeros((n_samples, INPUT_DIM))
+        y = np.zeros(n_samples, dtype=int)
+
+        for i in range(n_samples):
+            is_scam = rng.random() < profile["scam_rate"]
+            y[i] = 1 if is_scam else 0
+
+            if is_scam:
+                scam_type = rng.choice(
+                    ["irs", "tech", "bank", "generic"],
+                    p=[profile["irs"], profile["tech"],
+                       profile["bank"], profile["generic"]],
+                )
+                X[i] = self._make_scam_vector(rng, scam_type)
+            else:
+                X[i] = self._make_legit_vector(rng)
+
+        return X, y
+
+    # ------------------------------------------------------------------
+    # Synthetic feature vector generators
+    # ------------------------------------------------------------------
+
+    def _make_scam_vector(self, rng: np.random.RandomState,
+                          scam_type: str) -> np.ndarray:
+        """Create a 402-dim feature vector for a scam call.
+
+        The discriminative signal is sparse: only a small subset of
+        features carry class information, embedded in high-dimensional
+        noise.  This makes the classification problem realistically
+        difficult for federated learning with DP.
+        """
+        n = INPUT_DIM
+        v = rng.normal(0.0, 0.5, size=n)  # lower background noise
+
+        # Strong discriminative signal in the first 30 features
+        signal_end = 30
+        v[:signal_end] += rng.normal(2.0, 0.5, size=signal_end)
+
+        # Scam-type-specific sub-patterns
+        type_start = 30
+        type_block = 10
+        offsets = {"irs": 0, "tech": 1, "bank": 2, "generic": 3}
+        idx = offsets.get(scam_type, 3)
+        start = type_start + idx * type_block
+        v[start:start + type_block] += rng.normal(1.5, 0.4, size=type_block)
+
+        return v
+
+    def _make_legit_vector(self, rng: np.random.RandomState) -> np.ndarray:
+        """Create a 402-dim feature vector for a legitimate call.
+
+        Negative bias in the same sparse feature block that scam
+        vectors use, so the MLP must learn to separate in that subspace.
+        """
+        n = INPUT_DIM
+        v = rng.normal(0.0, 0.5, size=n)  # lower background noise
+
+        # Opposite signal in the discriminative block
+        signal_end = 30
+        v[:signal_end] += rng.normal(-2.0, 0.5, size=signal_end)
+
+        return v
+
+    def _generate_test_set(self, rng: np.random.RandomState,
+                           n_samples: int = 300) -> tuple:
+        """Generate a balanced test set (50/50 scam/legit)."""
+        n_half = n_samples // 2
+        X = np.zeros((n_samples, INPUT_DIM))
+        y = np.zeros(n_samples, dtype=int)
+
+        scam_types = ["irs", "tech", "bank", "generic"]
+        for i in range(n_half):
+            stype = rng.choice(scam_types)
+            X[i] = self._make_scam_vector(rng, stype)
+            y[i] = 1
+
+        for i in range(n_half, n_samples):
+            X[i] = self._make_legit_vector(rng)
+            y[i] = 0
+
+        perm = rng.permutation(n_samples)
+        return X[perm], y[perm]
+
+    # ------------------------------------------------------------------
+    # Global model
+    # ------------------------------------------------------------------
+
+    def initialize_global_model(self):
+        """Initialize global MLPClassifier with random weights."""
+        self.global_model = MLPClassifier(input_dim=INPUT_DIM)
+
+    # ------------------------------------------------------------------
+    # Federated round
+    # ------------------------------------------------------------------
+
+    def run_round(self, round_num: int) -> dict:
+        """Execute one federated round.
+
+        1. Each device fine-tunes on its local data (real backprop)
+        2. Compute gradient delta
+        3. Add DP noise (if enabled)
+        4. Hub: FedAvg weighted by n_samples
+        5. Update global model
+        6. Evaluate on test set using real MLP forward pass
+        """
+        global_weights = self.global_model.get_weights()
+        updates = []
+        device_sigmas = []
+
+        for device in self.devices:
+            n_local = device.buffer.size()
+            if n_local == 0:
+                continue
+
+            # Fine-tune locally with aggressive local training --
+            # high lr (0.5) and 20 epochs needed to produce a gradient
+            # delta large enough to survive DP noise and FedAvg averaging
+            delta = device.fine_tune(global_weights, lr=0.5, n_epochs=20)
+
+            if self.use_dp:
+                # DP noise injection
+                noised_delta, sigma, eps_round = self.dp_injector.add_noise(
+                    delta, n_local
+                )
+                device_sigmas.append(sigma)
+                updates.append((noised_delta, n_local))
+            else:
+                updates.append((delta, n_local))
+
+            device.current_model_version = round_num + 1
+
+        if len(updates) == 0:
+            metrics = self._evaluate()
+            metrics.update({
+                "round": round_num,
+                "n_devices": 0,
+                "epsilon_spent": self.dp_injector.privacy_budget_spent(
+                    round_num + 1
+                ) if self.use_dp else 0.0,
+                "avg_sigma": 0.0,
+            })
+            return metrics
+
+        # FedAvg aggregation
+        aggregated_delta = self._fedavg_aggregate(updates)
+
+        # Apply aggregated update to global model (server lr = 1.0, no inflation)
+        new_weights = global_weights + aggregated_delta
+        self.global_model.set_weights(new_weights)
+
+        # Evaluate
+        metrics = self._evaluate()
+        metrics.update({
+            "round": round_num,
+            "n_devices": len(updates),
+            "epsilon_spent": self.dp_injector.privacy_budget_spent(
+                round_num + 1
+            ) if self.use_dp else 0.0,
+            "avg_sigma": float(np.mean(device_sigmas)) if device_sigmas else 0.0,
+        })
+
+        # Inject fresh data each round to simulate ongoing call activity
+        self._add_round_data(round_num)
+
+        return metrics
+
+    def _add_round_data(self, round_num: int):
+        """Add new training samples each round to simulate ongoing calls."""
+        extra = 30 + round_num * 10
+        profiles = {0: 0.60, 1: 0.55, 2: 0.50, 3: 0.15, 4: 0.55}
+        scam_types = ["irs", "tech", "bank", "generic"]
+
+        for i, device in enumerate(self.devices):
+            rng = np.random.RandomState(42 + i * 1000 + (round_num + 1) * 500)
+            scam_rate = profiles.get(i, 0.4)
+
+            for j in range(extra):
+                is_scam = rng.random() < scam_rate
+                if is_scam:
+                    stype = rng.choice(scam_types)
+                    vec = self._make_scam_vector(rng, stype)
+                    label = 1
+                else:
+                    vec = self._make_legit_vector(rng)
+                    label = 0
+                # Apply global normalization
+                vec = (vec - self._global_mean) / self._global_std
+                device.ingest_call_data(vec, label)
+
+    # ------------------------------------------------------------------
+    # FedAvg aggregation
+    # ------------------------------------------------------------------
+
+    def _fedavg_aggregate(self, updates: list) -> np.ndarray:
+        """FedAvg: weighted mean of gradient deltas.
+
+        G_global = sum(n_i * G_i) / sum(n_i)
+        """
+        total_samples = sum(n for _, n in updates)
+        if total_samples == 0:
+            return np.zeros_like(updates[0][0])
+
+        weighted_sum = np.zeros_like(updates[0][0])
+        for delta, n_i in updates:
+            weighted_sum += n_i * delta
+        return weighted_sum / total_samples
+
+    # ------------------------------------------------------------------
+    # Evaluation
+    # ------------------------------------------------------------------
+
+    def _evaluate(self) -> dict:
+        """Evaluate global MLP on test set.
+
+        Uses the real MLP forward pass (not a linear classifier).
+        Returns accuracy, precision, recall, F1.
+        """
+        X = self.test_features  # already globally normalized
+        y = self.test_labels
+
+        # Forward pass through the real MLP
+        probs = self.global_model.forward(X)
+        if isinstance(probs, float):
+            probs = np.array([probs])
+        preds = (probs >= 0.5).astype(int)
+
+        tp = int(np.sum((preds == 1) & (y == 1)))
+        tn = int(np.sum((preds == 0) & (y == 0)))
+        fp = int(np.sum((preds == 1) & (y == 0)))
+        fn = int(np.sum((preds == 0) & (y == 1)))
+
+        accuracy = (tp + tn) / max(tp + tn + fp + fn, 1)
+        precision = tp / max(tp + fp, 1)
+        recall = tp / max(tp + fn, 1)
+        f1 = 2 * precision * recall / max(precision + recall, 1e-8)
+
+        return {
+            "accuracy": float(accuracy),
+            "precision": float(precision),
+            "recall": float(recall),
+            "f1": float(f1),
+        }
+
+    # ------------------------------------------------------------------
+    # Main run loop
+    # ------------------------------------------------------------------
+
+    def run(self) -> list:
+        """Run full simulation: initialize + all rounds."""
+        self.initialize()
+        self.initialize_global_model()
+
+        dp_label = f"epsilon={self.dp_injector.epsilon}" if self.use_dp else "OFF"
+        print(f"\n{'='*60}")
+        print(f"SentinelEdge Federated Learning Simulation (MLP)")
+        print(f"Devices: {self.n_devices} | Rounds: {self.n_rounds}")
+        print(f"Differential Privacy: {dp_label}")
+        print(f"MLP: {INPUT_DIM} -> 128 -> 64 -> 1")
+        print(f"{'='*60}\n")
+
+        for r in range(self.n_rounds):
+            result = self.run_round(r)
+            self.round_results.append(result)
+
+            print(f"Round {r+1}/{self.n_rounds}:")
+            print(f"  Accuracy:  {result['accuracy']:.4f}")
+            print(f"  Precision: {result['precision']:.4f}")
+            print(f"  Recall:    {result['recall']:.4f}")
+            print(f"  F1 Score:  {result['f1']:.4f}")
+            print(f"  Devices:   {result['n_devices']}")
+            if self.use_dp:
+                print(f"  Epsilon:   {result['epsilon_spent']:.4f}")
+                print(f"  Avg sigma: {result['avg_sigma']:.6f}")
+            print()
+
+        return self.round_results
+
+
+def run_dp_comparison(n_devices: int = 5, n_rounds: int = 10) -> dict:
+    """Run the simulation twice: with DP and without DP.
+
+    Returns a dict with keys 'with_dp' and 'without_dp', each containing
+    the list of round results.  Used by visualization.py for comparison plots.
+    """
+    print("=" * 60)
+    print("  RUNNING COMPARISON: WITH DP vs WITHOUT DP")
+    print("=" * 60)
+
+    # Run WITH DP
+    np.random.seed(42)
+    sim_dp = FederatedSimulation(
+        n_devices=n_devices, n_rounds=n_rounds,
+        epsilon=0.3, use_dp=True,
+    )
+    results_dp = sim_dp.run()
+
+    # Run WITHOUT DP
+    np.random.seed(42)
+    sim_no_dp = FederatedSimulation(
+        n_devices=n_devices, n_rounds=n_rounds,
+        epsilon=0.3, use_dp=False,
+    )
+    results_no_dp = sim_no_dp.run()
+
+    return {"with_dp": results_dp, "without_dp": results_no_dp}
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description="Run federated learning simulation with real MLP"
+    )
+    parser.add_argument("--devices", type=int, default=5,
+                        help="Number of simulated devices")
+    parser.add_argument("--rounds", type=int, default=10,
+                        help="Number of federated rounds")
+    parser.add_argument("--compare", action="store_true",
+                        help="Run DP vs no-DP comparison")
+    args = parser.parse_args()
+
+    output_dir = os.path.dirname(os.path.abspath(__file__))
+
+    if args.compare:
+        comparison = run_dp_comparison(
+            n_devices=args.devices, n_rounds=args.rounds
+        )
+        output_path = os.path.join(output_dir, "simulation_results.json")
+        serializable = {
+            "with_dp": _make_serializable(comparison["with_dp"]),
+            "without_dp": _make_serializable(comparison["without_dp"]),
+        }
+        with open(output_path, "w") as f:
+            json.dump(serializable, f, indent=2)
+        print(f"\nSaved comparison results to {output_path}")
+
+        # Also generate plots
+        try:
+            from federated.visualization import (
+                plot_accuracy_over_rounds, plot_dp_comparison,
+            )
+            plot_accuracy_over_rounds(
+                comparison["with_dp"],
+                output_path=os.path.join(output_dir, "federated_results.png"),
+            )
+            plot_dp_comparison(
+                comparison,
+                output_path=os.path.join(output_dir, "dp_comparison.png"),
+            )
+        except ImportError:
+            print("(Skipping plots: matplotlib not available)")
+    else:
+        np.random.seed(42)
+        sim = FederatedSimulation(
+            n_devices=args.devices, n_rounds=args.rounds
+        )
+        results = sim.run()
+
+        output_path = os.path.join(output_dir, "simulation_results.json")
+        serializable = _make_serializable(results)
+        with open(output_path, "w") as f:
+            json.dump(serializable, f, indent=2)
+        print(f"\nSaved results to {output_path}")
+
+        # Generate plot
+        try:
+            from federated.visualization import plot_accuracy_over_rounds
+            plot_accuracy_over_rounds(
+                results,
+                output_path=os.path.join(output_dir, "federated_results.png"),
+            )
+        except ImportError:
+            print("(Skipping plot: matplotlib not available)")
+
+
+def _make_serializable(results: list) -> list:
+    """Convert numpy types to JSON-serializable Python types."""
+    out = []
+    for r in results:
+        out.append({
+            k: float(v) if isinstance(v, (np.floating, float)) else v
+            for k, v in r.items()
+        })
+    return out
+
+
+if __name__ == "__main__":
+    main()

federated/simulation_results.json

@@ -0,0 +1,206 @@
+{
+  "with_dp": [
+    {
+      "accuracy": 0.72,
+      "precision": 0.83,
+      "recall": 0.5533333333333333,
+      "f1": 0.664,
+      "round": 0,
+      "n_devices": 5,
+      "epsilon_spent": 1.5445154159292251,
+      "avg_sigma": 0.16149350875351298
+    },
+    {
+      "accuracy": 0.9633333333333334,
+      "precision": 1.0,
+      "recall": 0.9266666666666666,
+      "f1": 0.9619377162629758,
+      "round": 1,
+      "n_devices": 5,
+      "epsilon_spent": 2.245757411870135,
+      "avg_sigma": 0.12422577596424074
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 2,
+      "n_devices": 5,
+      "epsilon_spent": 2.8082601312220676,
+      "avg_sigma": 0.09499618161971352
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 3,
+      "n_devices": 5,
+      "epsilon_spent": 3.298946116404052,
+      "avg_sigma": 0.0734061403425059
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 4,
+      "n_devices": 5,
+      "epsilon_spent": 3.7437372507980253,
+      "avg_sigma": 0.05767625312625464
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 5,
+      "n_devices": 5,
+      "epsilon_spent": 4.155927854352004,
+      "avg_sigma": 0.046141002501003704
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 6,
+      "n_devices": 5,
+      "epsilon_spent": 4.543415362914315,
+      "avg_sigma": 0.03755662994267744
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 7,
+      "n_devices": 5,
+      "epsilon_spent": 4.911345392831474,
+      "avg_sigma": 0.032298701750702596
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 8,
+      "n_devices": 5,
+      "epsilon_spent": 5.263292101424481,
+      "avg_sigma": 0.032298701750702596
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 9,
+      "n_devices": 5,
+      "epsilon_spent": 5.601857810883448,
+      "avg_sigma": 0.032298701750702596
+    }
+  ],
+  "without_dp": [
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 0,
+      "n_devices": 5,
+      "epsilon_spent": 0.0,
+      "avg_sigma": 0.0
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 1,
+      "n_devices": 5,
+      "epsilon_spent": 0.0,
+      "avg_sigma": 0.0
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 2,
+      "n_devices": 5,
+      "epsilon_spent": 0.0,
+      "avg_sigma": 0.0
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 3,
+      "n_devices": 5,
+      "epsilon_spent": 0.0,
+      "avg_sigma": 0.0
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 4,
+      "n_devices": 5,
+      "epsilon_spent": 0.0,
+      "avg_sigma": 0.0
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 5,
+      "n_devices": 5,
+      "epsilon_spent": 0.0,
+      "avg_sigma": 0.0
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 6,
+      "n_devices": 5,
+      "epsilon_spent": 0.0,
+      "avg_sigma": 0.0
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 7,
+      "n_devices": 5,
+      "epsilon_spent": 0.0,
+      "avg_sigma": 0.0
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 8,
+      "n_devices": 5,
+      "epsilon_spent": 0.0,
+      "avg_sigma": 0.0
+    },
+    {
+      "accuracy": 1.0,
+      "precision": 1.0,
+      "recall": 1.0,
+      "f1": 1.0,
+      "round": 9,
+      "n_devices": 5,
+      "epsilon_spent": 0.0,
+      "avg_sigma": 0.0
+    }
+  ]
+}

federated/visualization.py

@@ -0,0 +1,219 @@
+"""Visualize federated learning results."""
+import json
+import os
+
+
+def plot_accuracy_over_rounds(results: list, output_path: str = "federated_results.png"):
+    """Plot accuracy, F1, precision, recall over federated rounds.
+
+    Shows:
+    - Line chart: accuracy, F1, precision, recall per round
+    - Bar chart: privacy budget consumed
+    """
+    import matplotlib
+    matplotlib.use("Agg")
+    import matplotlib.pyplot as plt
+
+    fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(14, 6))
+
+    rounds = [r["round"] + 1 for r in results]
+    accuracies = [r["accuracy"] for r in results]
+    f1_scores = [r["f1"] for r in results]
+    precisions = [r["precision"] for r in results]
+    recalls = [r["recall"] for r in results]
+
+    # Plot 1: Metrics over rounds
+    ax1.plot(rounds, accuracies, "o-", color="#0D9488", linewidth=2,
+             markersize=6, label="Accuracy")
+    ax1.plot(rounds, f1_scores, "s-", color="#F59E0B", linewidth=2,
+             markersize=6, label="F1 Score")
+    ax1.plot(rounds, precisions, "^-", color="#3B82F6", linewidth=2,
+             markersize=5, label="Precision")
+    ax1.plot(rounds, recalls, "v-", color="#8B5CF6", linewidth=2,
+             markersize=5, label="Recall")
+
+    # Annotate first and last accuracy
+    ax1.annotate(
+        f"{accuracies[0]:.2f}",
+        xy=(rounds[0], accuracies[0]),
+        xytext=(rounds[0] + 0.3, accuracies[0] - 0.04),
+        fontsize=9, color="#0D9488",
+    )
+    ax1.annotate(
+        f"{accuracies[-1]:.2f}",
+        xy=(rounds[-1], accuracies[-1]),
+        xytext=(rounds[-1] - 0.8, accuracies[-1] + 0.03),
+        fontsize=9, color="#0D9488",
+    )
+
+    ax1.set_xlabel("Federated Round")
+    ax1.set_ylabel("Score")
+    ax1.set_title("MLP Model Improvement Over Federated Rounds")
+    ax1.legend(loc="lower right")
+    ax1.grid(True, alpha=0.3)
+    ax1.set_ylim(0.0, 1.05)
+    ax1.set_xticks(rounds)
+
+    # Plot 2: Privacy budget over rounds
+    epsilons = [r.get("epsilon_spent", 0) for r in results]
+    if any(e > 0 for e in epsilons):
+        bars = ax2.bar(rounds, epsilons, color="#EF4444", alpha=0.7)
+        ax2.set_ylabel("Cumulative Privacy Budget (\u03b5)")
+        for bar, eps in zip(bars, epsilons):
+            ax2.text(
+                bar.get_x() + bar.get_width() / 2,
+                bar.get_height() + 0.01,
+                f"{eps:.2f}",
+                ha="center", va="bottom", fontsize=8,
+            )
+    else:
+        ax2.text(0.5, 0.5, "No DP applied", ha="center", va="center",
+                 transform=ax2.transAxes, fontsize=14, color="gray")
+
+    ax2.set_xlabel("Federated Round")
+    ax2.set_title("Privacy Budget Consumption")
+    ax2.grid(True, alpha=0.3)
+    ax2.set_xticks(rounds)
+
+    plt.tight_layout()
+    plt.savefig(output_path, dpi=150, bbox_inches="tight")
+    print(f"Saved plot to {output_path}")
+    plt.close()
+
+
+def plot_dp_comparison(comparison: dict, output_path: str = "dp_comparison.png"):
+    """Plot accuracy with DP vs without DP side by side.
+
+    Args:
+        comparison: dict with keys 'with_dp' and 'without_dp',
+                    each a list of round result dicts.
+        output_path: Where to save the figure.
+    """
+    import matplotlib
+    matplotlib.use("Agg")
+    import matplotlib.pyplot as plt
+
+    results_dp = comparison["with_dp"]
+    results_no_dp = comparison["without_dp"]
+
+    rounds_dp = [r["round"] + 1 for r in results_dp]
+    rounds_no_dp = [r["round"] + 1 for r in results_no_dp]
+
+    fig, axes = plt.subplots(1, 2, figsize=(14, 6))
+
+    # Plot 1: Accuracy comparison
+    ax = axes[0]
+    ax.plot(rounds_dp, [r["accuracy"] for r in results_dp],
+            "o-", color="#EF4444", linewidth=2, markersize=6,
+            label="With DP (\u03b5=0.3)")
+    ax.plot(rounds_no_dp, [r["accuracy"] for r in results_no_dp],
+            "s-", color="#0D9488", linewidth=2, markersize=6,
+            label="Without DP")
+    ax.set_xlabel("Federated Round")
+    ax.set_ylabel("Accuracy")
+    ax.set_title("Accuracy: DP vs No-DP")
+    ax.legend()
+    ax.grid(True, alpha=0.3)
+    ax.set_ylim(0.0, 1.05)
+    ax.set_xticks(rounds_dp)
+
+    # Annotate final values
+    acc_dp_final = results_dp[-1]["accuracy"]
+    acc_no_dp_final = results_no_dp[-1]["accuracy"]
+    ax.annotate(f"{acc_dp_final:.3f}", xy=(rounds_dp[-1], acc_dp_final),
+                xytext=(rounds_dp[-1] - 1.5, acc_dp_final - 0.05),
+                fontsize=9, color="#EF4444")
+    ax.annotate(f"{acc_no_dp_final:.3f}", xy=(rounds_no_dp[-1], acc_no_dp_final),
+                xytext=(rounds_no_dp[-1] - 1.5, acc_no_dp_final + 0.03),
+                fontsize=9, color="#0D9488")
+
+    # Plot 2: F1 comparison
+    ax = axes[1]
+    ax.plot(rounds_dp, [r["f1"] for r in results_dp],
+            "o-", color="#EF4444", linewidth=2, markersize=6,
+            label="With DP (\u03b5=0.3)")
+    ax.plot(rounds_no_dp, [r["f1"] for r in results_no_dp],
+            "s-", color="#0D9488", linewidth=2, markersize=6,
+            label="Without DP")
+    ax.set_xlabel("Federated Round")
+    ax.set_ylabel("F1 Score")
+    ax.set_title("F1 Score: DP vs No-DP")
+    ax.legend()
+    ax.grid(True, alpha=0.3)
+    ax.set_ylim(0.0, 1.05)
+    ax.set_xticks(rounds_dp)
+
+    plt.tight_layout()
+    plt.savefig(output_path, dpi=150, bbox_inches="tight")
+    print(f"Saved DP comparison plot to {output_path}")
+    plt.close()
+
+
+def print_summary(results: list):
+    """Print a text summary of simulation results."""
+    print("\n" + "=" * 60)
+    print("FEDERATED LEARNING SIMULATION SUMMARY")
+    print("=" * 60)
+
+    for r in results:
+        print(f"\nRound {r['round']+1}:")
+        print(f"  Accuracy:   {r['accuracy']:.4f}")
+        print(f"  F1 Score:   {r['f1']:.4f}")
+        print(f"  Precision:  {r.get('precision', 0):.4f}")
+        print(f"  Recall:     {r.get('recall', 0):.4f}")
+        print(f"  Devices:    {r['n_devices']}")
+        eps = r.get('epsilon_spent', 0)
+        if eps > 0:
+            print(f"  \u03b5 spent:    {eps:.4f}")
+
+    first = results[0]
+    last = results[-1]
+    acc_delta = last["accuracy"] - first["accuracy"]
+    f1_delta = last["f1"] - first["f1"]
+    print(
+        f"\nImprovement: accuracy {first['accuracy']:.4f} -> "
+        f"{last['accuracy']:.4f} ({acc_delta:+.4f})"
+    )
+    print(
+        f"             F1      {first['f1']:.4f} -> "
+        f"{last['f1']:.4f} ({f1_delta:+.4f})"
+    )
+
+
+if __name__ == "__main__":
+    results_path = os.path.join(
+        os.path.dirname(os.path.abspath(__file__)), "simulation_results.json"
+    )
+    if os.path.exists(results_path):
+        with open(results_path) as f:
+            data = json.load(f)
+
+        # Handle both formats: list (single run) or dict (comparison)
+        if isinstance(data, list):
+            results = data
+            print_summary(results)
+            plot_accuracy_over_rounds(
+                results,
+                output_path=os.path.join(
+                    os.path.dirname(os.path.abspath(__file__)),
+                    "federated_results.png",
+                ),
+            )
+        elif isinstance(data, dict):
+            # Comparison format
+            if "with_dp" in data:
+                print("\n--- WITH DP ---")
+                print_summary(data["with_dp"])
+                print("\n--- WITHOUT DP ---")
+                print_summary(data["without_dp"])
+                plot_dp_comparison(
+                    data,
+                    output_path=os.path.join(
+                        os.path.dirname(os.path.abspath(__file__)),
+                        "dp_comparison.png",
+                    ),
+                )
+            else:
+                print("Unknown results format.")
+    else:
+        print("No simulation results found. Run simulate.py first.")

hub/__init__.py

@@ -0,0 +1,21 @@
+"""SentinelEdge Hub - Federated aggregation server."""
+
+from .schemas import (
+    FederatedUpdate,
+    AggregationResponse,
+    DeviceRegistration,
+    DeviceRegistrationResponse,
+    ModelVersionInfo,
+    GlobalMetrics,
+    RoundStatus,
+)
+
+__all__ = [
+    "FederatedUpdate",
+    "AggregationResponse",
+    "DeviceRegistration",
+    "DeviceRegistrationResponse",
+    "ModelVersionInfo",
+    "GlobalMetrics",
+    "RoundStatus",
+]

hub/aggregator.py

@@ -0,0 +1,192 @@
+"""Federated Averaging aggregator with Byzantine fault detection."""
+
+import logging
+
+import numpy as np
+
+from .schemas import FederatedUpdate
+
+logger = logging.getLogger(__name__)
+
+
+class FedAvgAggregator:
+    """Federated Averaging: weighted mean of DP-noised gradient deltas.
+
+    Implements the FedAvg algorithm from McMahan et al. (2017) with
+    additional outlier detection for Byzantine fault tolerance.
+    """
+
+    def aggregate(self, updates: list[FederatedUpdate]) -> np.ndarray:
+        """Compute weighted average of gradient deltas.
+
+        Weight = n_samples for each device.
+        G_global = sum(n_i * G_i) / sum(n_i)
+
+        Args:
+            updates: List of federated updates from edge devices.
+
+        Returns:
+            Weighted average gradient delta as a numpy array.
+
+        Raises:
+            ValueError: If updates list is empty or gradient dimensions mismatch.
+        """
+        if not updates:
+            raise ValueError("Cannot aggregate empty updates list")
+
+        dim = len(updates[0].gradient_delta)
+        for i, u in enumerate(updates):
+            if len(u.gradient_delta) != dim:
+                raise ValueError(
+                    f"Gradient dimension mismatch: update 0 has {dim}, "
+                    f"update {i} has {len(u.gradient_delta)}"
+                )
+
+        total_samples = sum(u.n_samples for u in updates)
+        if total_samples == 0:
+            raise ValueError("Total samples across all updates is zero")
+
+        weighted_sum = np.zeros(dim, dtype=np.float64)
+        for update in updates:
+            delta = np.array(update.gradient_delta, dtype=np.float64)
+            weighted_sum += update.n_samples * delta
+
+        global_delta = weighted_sum / total_samples
+
+        logger.info(
+            "Aggregated %d updates (%d total samples), "
+            "delta norm=%.6f",
+            len(updates),
+            total_samples,
+            float(np.linalg.norm(global_delta)),
+        )
+        return global_delta
+
+    def aggregate_feature_importances(
+        self, updates: list[FederatedUpdate]
+    ) -> np.ndarray:
+        """Weighted averaging for feature importances.
+
+        Same weighting scheme as gradient aggregation: weight = n_samples.
+
+        Args:
+            updates: List of federated updates from edge devices.
+
+        Returns:
+            Weighted average feature importances as a numpy array.
+
+        Raises:
+            ValueError: If updates list is empty or dimensions mismatch.
+        """
+        if not updates:
+            raise ValueError("Cannot aggregate empty updates list")
+
+        dim = len(updates[0].feature_importances)
+        for i, u in enumerate(updates):
+            if len(u.feature_importances) != dim:
+                raise ValueError(
+                    f"Feature importance dimension mismatch: update 0 has {dim}, "
+                    f"update {i} has {len(u.feature_importances)}"
+                )
+
+        total_samples = sum(u.n_samples for u in updates)
+        if total_samples == 0:
+            raise ValueError("Total samples across all updates is zero")
+
+        weighted_sum = np.zeros(dim, dtype=np.float64)
+        for update in updates:
+            importances = np.array(update.feature_importances, dtype=np.float64)
+            weighted_sum += update.n_samples * importances
+
+        global_importances = weighted_sum / total_samples
+        return global_importances
+
+    def detect_outliers(
+        self, updates: list[FederatedUpdate], threshold: float = 3.0
+    ) -> list[int]:
+        """Detect potential Byzantine/poisoning updates.
+
+        Flag updates where the gradient L2 norm is more than `threshold`
+        standard deviations from the mean norm across all updates.
+
+        Args:
+            updates: List of federated updates from edge devices.
+            threshold: Number of standard deviations for outlier detection.
+
+        Returns:
+            List of indices of suspicious updates.
+        """
+        if len(updates) < 2:
+            return []
+
+        norms = np.array(
+            [np.linalg.norm(u.gradient_delta) for u in updates], dtype=np.float64
+        )
+
+        mean_norm = float(np.mean(norms))
+        std_norm = float(np.std(norms))
+
+        if std_norm < 1e-10:
+            # All norms are essentially the same -- no outliers
+            return []
+
+        outlier_indices = []
+        for i, norm in enumerate(norms):
+            z_score = abs(norm - mean_norm) / std_norm
+            if z_score > threshold:
+                logger.warning(
+                    "Outlier detected: update %d from device %s, "
+                    "norm=%.4f, z_score=%.2f (threshold=%.2f)",
+                    i,
+                    updates[i].device_id,
+                    norm,
+                    z_score,
+                    threshold,
+                )
+                outlier_indices.append(i)
+
+        return outlier_indices
+
+    def aggregate_safe(
+        self, updates: list[FederatedUpdate], outlier_threshold: float = 3.0
+    ) -> tuple[np.ndarray, np.ndarray, list[int]]:
+        """Aggregate with automatic outlier removal.
+
+        Detects outliers, removes them, then aggregates the remaining
+        updates. If too few updates remain after outlier removal, uses
+        all updates anyway with a warning.
+
+        Args:
+            updates: List of federated updates.
+            outlier_threshold: Z-score threshold for outlier detection.
+
+        Returns:
+            Tuple of (global_delta, feature_importances, outlier_indices).
+        """
+        outlier_indices = self.detect_outliers(updates, outlier_threshold)
+
+        if outlier_indices:
+            clean_updates = [
+                u for i, u in enumerate(updates) if i not in outlier_indices
+            ]
+            if len(clean_updates) < 2:
+                logger.warning(
+                    "Too many outliers (%d/%d) -- using all updates",
+                    len(outlier_indices),
+                    len(updates),
+                )
+                clean_updates = updates
+                outlier_indices = []
+            else:
+                logger.info(
+                    "Removed %d outlier updates, aggregating %d remaining",
+                    len(outlier_indices),
+                    len(clean_updates),
+                )
+        else:
+            clean_updates = updates
+
+        global_delta = self.aggregate(clean_updates)
+        feature_importances = self.aggregate_feature_importances(clean_updates)
+
+        return global_delta, feature_importances, outlier_indices