Spaces:

CodebaseAi
/

ai-nids-backend

Sleeping

App Files Files Community

CodebaseAi commited on Dec 20, 2025

Commit

bf30d02

1 Parent(s): d58a19f

chore: remove frontend folder from backend deployment

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

frontend/.gitignore +0 -24
frontend/README.md +0 -16
frontend/components.json +0 -22
frontend/eslint.config.js +0 -29
frontend/index.html +0 -17
frontend/jsconfig.json +0 -8
frontend/package-lock.json +0 -0
frontend/package.json +0 -65
frontend/postcss.config.js +0 -6
frontend/public/images.ico +0 -0
frontend/public/vite.svg +0 -1
frontend/src/App.jsx +0 -93
frontend/src/api.js +0 -183
frontend/src/assests/Dos-HTTPtest.jpg +0 -0
frontend/src/assests/Dos_Attacks-hulk.jpeg +0 -0
frontend/src/assests/HOIC.jpeg +0 -0
frontend/src/assests/LOic.jpeg +0 -0
frontend/src/assests/heroBlocks.svg +0 -30
frontend/src/assests/sql.jpeg +0 -0
frontend/src/assests/vpn.jpg +0 -0
frontend/src/assests/web.jpeg +0 -0
frontend/src/components/Alerts.jsx +0 -36
frontend/src/components/ConstellationBackground.jsx +0 -85
frontend/src/components/FeatureGuard.jsx +0 -63
frontend/src/components/Header.jsx +0 -16
frontend/src/components/IPInfoModal.jsx +0 -182
frontend/src/components/LoadingOverlay.jsx +0 -12
frontend/src/components/MainLayout.jsx +0 -13
frontend/src/components/Navbar.jsx +0 -128
frontend/src/components/NeonShield.jsx +0 -87
frontend/src/components/ProtectedRoute.jsx +0 -10
frontend/src/components/Sidebar.jsx +0 -324
frontend/src/components/TopStatusBar.jsx +0 -13
frontend/src/components/dashboard/Controls.jsx +0 -55
frontend/src/components/dashboard/LiveDashboard.jsx +0 -254
frontend/src/components/dashboard/LiveTable.jsx +0 -168
frontend/src/components/dashboard/Sparkline.jsx +0 -28
frontend/src/components/dashboard/StatsPanel.jsx +0 -104
frontend/src/components/dashboard/ThreatFeed.jsx +0 -39
frontend/src/components/dashboard/ThreatTimeline.jsx +0 -27
frontend/src/components/dashboard/TopCountries.jsx +0 -26
frontend/src/components/dashboard/TopIPs.jsx +0 -26
frontend/src/components/ui/accordion.jsx +0 -43
frontend/src/components/ui/badge.jsx +0 -34
frontend/src/components/ui/button.jsx +0 -47
frontend/src/components/ui/card.jsx +0 -50
frontend/src/components/ui/input.jsx +0 -19
frontend/src/components/ui/scroll-area.jsx +0 -38
frontend/src/components/ui/separator.jsx +0 -23
frontend/src/components/ui/switch.jsx +0 -24

frontend/.gitignore DELETED Viewed

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-node_modules
-dist
-dist-ssr
-*.local
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

frontend/README.md DELETED Viewed

@@ -1,16 +0,0 @@
-# React + Vite
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-Currently, two official plugins are available:
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-## React Compiler
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-## Expanding the ESLint configuration
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/components.json DELETED Viewed

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": false,
-  "tsx": false,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/index.css",
-    "baseColor": "slate",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {}
-}

frontend/eslint.config.js DELETED Viewed

@@ -1,29 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{js,jsx}'],
-    extends: [
-      js.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
-    },
-  },
-])

frontend/index.html DELETED Viewed

@@ -1,17 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-/>
-<link rel="shortcut icon" href="/images.ico" />
-<title>NIDS Cyber Security</title>
-</head>
-<body>
-<div id="root"></div>
-<script type="module" src="/src/main.jsx"></script>
-</body>
-</html>

frontend/jsconfig.json DELETED Viewed

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "./src",
-    "paths": {
-      "@/*": ["*"]
-    }
-  }
-}

frontend/package-lock.json DELETED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json DELETED Viewed

@@ -1,65 +0,0 @@
-{
-  "name": "frontend",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "tailwind-init": "tailwindcss init -p"
-  },
-  "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@react-three/drei": "^10.7.6",
-    "@react-three/fiber": "^9.4.0",
-    "axios": "^1.13.1",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "firebase": "^12.5.0",
-    "framer-motion": "^12.23.24",
-    "html2canvas": "^1.4.1",
-    "jspdf": "^3.0.3",
-    "leaflet": "^1.9.4",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.552.0",
-    "prop-types": "^15.8.1",
-    "react": "^19.1.1",
-    "react-circular-progressbar": "^2.2.0",
-    "react-dom": "^19.1.1",
-    "react-draggable": "^4.5.0",
-    "react-gauge-chart": "^0.5.1",
-    "react-hot-toast": "^2.6.0",
-    "react-is": "^19.2.0",
-    "react-leaflet": "^5.0.0",
-    "react-parallax-tilt": "^1.7.313",
-    "react-router-dom": "^7.9.5",
-    "react-simple-maps": "^3.0.0",
-    "recharts": "^3.3.0",
-    "socket.io-client": "^4.8.1",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7",
-    "three": "^0.181.1",
-    "xlsx": "^0.18.5"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.36.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.22",
-    "globals": "^16.4.0",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.18",
-    "vite": "^7.1.7"
-  }
-}

frontend/postcss.config.js DELETED Viewed

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

frontend/public/images.ico DELETED Viewed

Binary file (4.29 kB)

frontend/public/vite.svg DELETED Viewed

frontend/src/App.jsx DELETED Viewed

@@ -1,93 +0,0 @@
-import { BrowserRouter as Router, Routes, Route, useLocation, Navigate } from "react-router-dom";
-import { LiveDataProvider } from "./context/DataContext";
-import { AuthProvider } from "./context/AuthContext";
-import ProtectedRoute from "./components/ProtectedRoute";
-import Sidebar from "./components/Sidebar";
-import { useState } from "react";
-// --- IMPORT THE GUARD ---
-import FeatureGuard from "./components/FeatureGuard";
-import AuthPage from "./pages/Login";
-import Dashboard from "./pages/Dashboard";
-import LiveTraffic from "./components/dashboard/LiveDashboard";
-import FlowPage from "./pages/FlowPage";
-import SettingsPage from "./pages/SettingsPage";
-import InfoPage from "./pages/InfoPage";
-import ThreatIntel from "./pages/ThreatIntel";
-import Reports from "./pages/ReportsPage";
-import TrafficPage from "./pages/TrafficPage";
-import IncidentsPage from "./pages/IncidentsPage";
-import SystemPage from "./pages/SystemPage";
-import ResponsePage from "./pages/ResponsePage";
-import MlmodelPage from "./pages/MLModelsPage";
-import ConstellationBackground from "./components/ConstellationBackground";
-import SamplePred from "./pages/MLAttackSamplesPage";
-import Aichat from "./pages/ChatAssistant";
-import MainLayout from "./components/MainLayout";
-function AppLayout() {
-  const location = useLocation();
-  const hideSidebar = location.pathname === "/login";
-  const [collapsed, setCollapsed] = useState(false);
-  // 🛠️ DEFINE LOCAL-ONLY ROUTES HERE
-  const localOnlyRoutes = ["/livetraffic", "/flow", "/system", "/traffic"];
-  const isProtectedFeature = localOnlyRoutes.includes(location.pathname);
-  return (
-    <div className="flex min-h-screen text-slate-100 relative bg-transparent">
-      <ConstellationBackground />
-      {!hideSidebar && (
-        <Sidebar collapsed={collapsed} setCollapsed={setCollapsed} />
-      )}
-      <main
-        className={`flex-1 overflow-y-auto overflow-x-hidden p-6 min-h-0 transition-all duration-300
-          ${collapsed ? "ml-20" : "ml-64"}
-        `}
-      >
-        {/* Wrap the Routes in the FeatureGuard.
-            It will only trigger the popup if the current path is in localOnlyRoutes
-            AND the user is not on localhost.
-        */}
-        <FeatureGuard requireLocal={isProtectedFeature}>
-          <Routes>
-            <Route path="/login" element={<AuthPage />} />
-            <Route path="/" element={<ProtectedRoute><MainLayout><Dashboard /></MainLayout></ProtectedRoute>} />
-            {/* These routes will now trigger the popup if deployed */}
-            <Route path="/livetraffic" element={<ProtectedRoute><MainLayout><LiveTraffic /></MainLayout></ProtectedRoute>} />
-            <Route path="/flow" element={<ProtectedRoute><MainLayout><FlowPage /></MainLayout></ProtectedRoute>} />
-            <Route path="/system" element={<ProtectedRoute><MainLayout><SystemPage /></MainLayout></ProtectedRoute>} />
-            <Route path="/traffic" element={<ProtectedRoute><MainLayout><TrafficPage /></MainLayout></ProtectedRoute>} />
-            {/* These routes work fine in the cloud (Database/AI based) */}
-            <Route path="/settings" element={<ProtectedRoute><MainLayout><SettingsPage /></MainLayout></ProtectedRoute>} />
-            <Route path="/alerts" element={<ProtectedRoute><MainLayout><InfoPage /></MainLayout></ProtectedRoute>} />
-            <Route path="/samplepred" element={<ProtectedRoute><MainLayout><SamplePred /></MainLayout></ProtectedRoute>} />
-            <Route path="/incidents" element={<ProtectedRoute><MainLayout><IncidentsPage /></MainLayout></ProtectedRoute>} />
-            <Route path="/threats" element={<ProtectedRoute><MainLayout><ThreatIntel /></MainLayout></ProtectedRoute>} />
-            <Route path="/reports" element={<ProtectedRoute><MainLayout><Reports /></MainLayout></ProtectedRoute>} />
-            <Route path="/response" element={<ProtectedRoute><MainLayout><ResponsePage /></MainLayout></ProtectedRoute>} />
-            <Route path="/mlmodels" element={<ProtectedRoute><MainLayout><MlmodelPage /></MainLayout></ProtectedRoute>} />
-            <Route path="/chat" element={<ProtectedRoute><Aichat /></ProtectedRoute>} />
-          </Routes>
-        </FeatureGuard>
-      </main>
-    </div>
-  );
-}
-export default function App() {
-  return (
-    <AuthProvider>
-      <LiveDataProvider>
-        <Router>
-          <AppLayout />
-        </Router>
-      </LiveDataProvider>
-    </AuthProvider>
-  );
-}

frontend/src/api.js DELETED Viewed

@@ -1,183 +0,0 @@
-// ===============================================
-// 🔐 API Layer for Adaptive AI NIDS Frontend
-// ===============================================
-const BASE_URL =
- import.meta.env.VITE_API_URL || "http://127.0.0.1:5000";
-// Safe fetch wrapper
-async function safeFetch(url, options = {}, timeout = 10000, retries = 1) {
-    const controller = new AbortController();
-    const id = setTimeout(() => controller.abort(), timeout);
- try {
-     const res = await fetch(url, { ...options, signal: controller.signal });
-    if (!res.ok) {
-     const errText = await res.text();
-     throw new Error(`HTTP ${res.status}: ${errText}`);
-    }
-    return await res.json();
-  } catch (err) {
-    console.error(`❌ API Error [${url}]:`, err.message);
-    if (retries > 0 && url.includes("/geo/")) {
-      await new Promise((r) => setTimeout(r, 1500));
-      return safeFetch(url, options, timeout * 1.5, retries - 1);
-    }
-    return { error: err.message };
-  } finally {
-    clearTimeout(id);
-  }
-}
-// -------------------------------------------------------------
-// 🚀 LIVE CAPTURE
-// -------------------------------------------------------------
-export async function startSniffer(iface = null) {
-  const q = iface ? `?iface=${iface}` : "";
-  return safeFetch(`${BASE_URL}/api/live/start${q}`);
-}
-export async function stopSniffer() {
-  return safeFetch(`${BASE_URL}/api/live/stop`);
-}
-export async function getStatus() {
-  return safeFetch(`${BASE_URL}/api/live/status`);
-}
-// MODEL-AWARE 🎯
-export async function getRecent(model, limit = 300) {
-  const res = await safeFetch(`${BASE_URL}/api/live/recent?model=${model}`);
-  if (res?.events && Array.isArray(res.events)) {
-    res.events = res.events.slice(-limit);
-  }
-  return res;
-}
-// MODEL-AWARE 🎯
-export async function getStats(model) {
-  return safeFetch(`${BASE_URL}/api/live/stats?model=${model}`);
-}
-// -------------------------------------------------------------
-// 🧾 LOGS (MODEL-AWARE)
-// -------------------------------------------------------------
-export function download_logs(model) {
-  window.location.href = `${BASE_URL}/api/logs/download?model=${model}`;
-}
-export async function clearLogs(model, n = 50) {
-  return safeFetch(
-    `${BASE_URL}/api/logs/clear?model=${model}&n=${n}`,
-    { method: "POST" }
-  );
-}
-export async function clearByPrediction(model, pred) {
-  return safeFetch(
-    `${BASE_URL}/api/logs/clear_pred?model=${model}&pred=${pred}`,
-    { method: "POST" }
-  );
-}
-export async function deleteOne(model, index) {
-  return safeFetch(
-    `${BASE_URL}/api/logs/delete_one?model=${model}&index=${index}`,
-    { method: "POST" }
-  );
-}
-// -------------------------------------------------------------
-// 🌍 GEO + ALERTS
-// -------------------------------------------------------------
-export async function getGeoData() {
-  return safeFetch(`${BASE_URL}/api/geo/recent`, {}, 20000, 2);
-}
-export async function getAlerts() {
-  return safeFetch(`${BASE_URL}/api/alerts`);
-}
-// -------------------------------------------------------------
-// 🧩 MODEL CONTROL
-// -------------------------------------------------------------
-export async function getActiveModel() {
-  return safeFetch(`${BASE_URL}/api/model/active`);
-}
-export async function switchModel(model) {
-  return safeFetch(`${BASE_URL}/api/model/select`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ model }),
-  });
-}
-export async function getModelHealth() {
-  return safeFetch(`${BASE_URL}/api/model/health`);
-}
-// -------------------------------------------------------------
-// 🤖 AI HELPERS
-// -------------------------------------------------------------
-export async function explainThreat(event) {
-  return safeFetch(`${BASE_URL}/api/ai/explain`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(event),
-  });
-}
-export async function getAISummary(model, n = 200) {
-  return safeFetch(
-    `${BASE_URL}/api/ai/summary?model=${encodeURIComponent(model)}&n=${n}`
-  );
-}
-export async function sendMessageToAI(message) {
-  try {
-    const res = await fetch(`${BASE_URL}/api/chat`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ message })
-    });
-    if (!res.ok) throw new Error("Chat API failed");
-    return res.json();
-  } catch (err) {
-    console.error("Chat error:", err);
-    return { reply: "⚠ AI Assistant not responding." };
-  }
-}
-// ➤ Offline CSV/PCAP prediction
-export const offlinePredictAPI = async (file, model) => {
-  const formData = new FormData();
-  formData.append("file", file);
-  formData.append("model", model);
-  // FIX: Using BASE_URL for live deployment
-  const res = await fetch(`${BASE_URL}/api/offline/predict`, {
-    method: "POST",
-    body: formData,
-  });
-  return res.json();
-};
-// ➤ Get PDF forensic report download link
-export const downloadOfflineReport = () => {
-// FIX: Using BASE_URL for live deployment
-     window.open(`${BASE_URL}/api/offline/report`, "_blank");
-};
-// -------------------------------------------------------------
-export { BASE_URL };

frontend/src/assests/Dos-HTTPtest.jpg DELETED Viewed

Binary file (65.9 kB)

frontend/src/assests/Dos_Attacks-hulk.jpeg DELETED Viewed

Binary file (10.9 kB)

frontend/src/assests/HOIC.jpeg DELETED Viewed

Binary file (11.1 kB)

frontend/src/assests/LOic.jpeg DELETED Viewed

Binary file (6.24 kB)

frontend/src/assests/heroBlocks.svg DELETED Viewed

frontend/src/assests/sql.jpeg DELETED Viewed

Binary file (7.92 kB)

frontend/src/assests/vpn.jpg DELETED Viewed

Binary file (15.7 kB)

frontend/src/assests/web.jpeg DELETED Viewed

Binary file (10.2 kB)

frontend/src/components/Alerts.jsx DELETED Viewed

@@ -1,36 +0,0 @@
-import React, { useContext } from "react";
-import { AlertTriangle, ShieldAlert, Info } from "lucide-react";
-import { AlertContext } from "../context/AlertContext.jsx";
-export default function Alerts() {
-  const { alerts, removeAlert } = useContext(AlertContext);
-  const COLORS = {
-    info: "border-blue-400/40 bg-blue-500/10 text-blue-300",
-    warn: "border-yellow-400/40 bg-yellow-500/10 text-yellow-300",
-    danger: "border-red-400/40 bg-red-500/10 text-red-300",
-  };
-  const ICONS = {
-    info: <Info size={16} />,
-    warn: <AlertTriangle size={16} />,
-    danger: <ShieldAlert size={16} />,
-  };
-  return (
-    <div className="fixed bottom-4 right-4 z-[9999] space-y-2 w-64 max-h-96 overflow-y-auto pointer-events-none">
-      {alerts.map(a => (
-        <div
-          key={a.id}
-          className={`pointer-events-auto cyber-card flex items-center gap-2 px-3 py-2
-                     border rounded-xl shadow-neon animate-fade
-                     ${COLORS[a.type]}`}
-          onClick={() => removeAlert(a.id)}
-        >
-          {ICONS[a.type]}
-          <span className="text-xs">{a.msg}</span>
-        </div>
-      ))}
-    </div>
-  );
-}

frontend/src/components/ConstellationBackground.jsx DELETED Viewed

@@ -1,85 +0,0 @@
-import { useEffect, useRef } from "react";
-export default function ConstellationBackground() {
-  const canvasRef = useRef(null);
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext("2d");
-    let particles = [];
-    const count = 140; // number of stars
-    // resize canvas
-    function resize() {
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
-    }
-    resize();
-    window.addEventListener("resize", resize);
-    // create particles
-    for (let i = 0; i < count; i++) {
-      particles.push({
-        x: Math.random() * canvas.width,
-        y: Math.random() * canvas.height,
-        vx: (Math.random() - 0.5) * 0.3,
-        vy: (Math.random() - 0.5) * 0.3,
-        size: Math.random() * 2 + 1,
-      });
-    }
-    // animation loop
-    function animate() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      // draw particles
-      particles.forEach((p) => {
-        p.x += p.vx;
-        p.y += p.vy;
-        // soft bounce
-        if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
-        if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-        ctx.fillStyle = "rgba(0, 220, 255, 0.9)";
-        ctx.shadowBlur = 10;
-        ctx.shadowColor = "#66e0ff";
-        ctx.fill();
-      });
-      // draw connecting lines
-      for (let i = 0; i < count; i++) {
-        for (let j = i + 1; j < count; j++) {
-          const a = particles[i];
-          const b = particles[j];
-          const dist = Math.hypot(a.x - b.x, a.y - b.y);
-          if (dist < 140) {
-            ctx.strokeStyle = `rgba(120, 255, 255, ${1 - dist / 140})`;
-            ctx.lineWidth = 0.7;
-            ctx.beginPath();
-            ctx.moveTo(a.x, a.y);
-            ctx.lineTo(b.x, b.y);
-            ctx.stroke();
-          }
-        }
-      }
-      requestAnimationFrame(animate);
-    }
-    animate();
-    return () => window.removeEventListener("resize", resize);
-  }, []);
-  return (
-    <canvas
-      ref={canvasRef}
-      className="fixed inset-0 -z-10 pointer-events-none"
-    />
-  );
-}

frontend/src/components/FeatureGuard.jsx DELETED Viewed

@@ -1,63 +0,0 @@
-// FeatureGuard.jsx
-import React, { useState, useEffect } from "react";
-import { AlertTriangle, Github, Monitor, Terminal } from "lucide-react";
-const FeatureGuard = ({ children, requireLocal = false }) => {
-  const [isLocal, setIsLocal] = useState(true);
-  const [showPopup, setShowPopup] = useState(false);
-  useEffect(() => {
-    // Detect environment
-    const local = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1";
-    setIsLocal(local);
-    // Only show popup if it's required AND we are not local
-    if (requireLocal && !local) {
-      setShowPopup(true);
-    }
-  }, [requireLocal]);
-  // If we are local, or the feature doesn't require local access, show content normally
-  if (isLocal || !requireLocal) return <>{children}</>;
-  return (
-    <div className="relative min-h-screen">
-      {/* Background content is blurred for "Demo" look */}
-      <div className="blur-lg pointer-events-none opacity-50">
-        {children}
-      </div>
-      {showPopup && (
-        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 backdrop-blur-md p-4">
-          <div className="bg-[#0b1120] border-2 border-cyan-500/50 rounded-2xl p-8 max-w-lg w-full shadow-[0_0_50px_rgba(6,182,212,0.4)]">
-            <div className="flex items-center gap-3 text-amber-400 mb-4">
-              <AlertTriangle size={28} />
-              <h2 className="text-2xl font-bold">Local Agent Required</h2>
-            </div>
-            <p className="text-gray-300 mb-6">
-              This page requires <b>Live Network Sniffing</b>. To protect privacy, browsers cannot access your hardware. Please run the project locally.
-            </p>
-            <div className="bg-black/40 rounded-lg p-4 font-mono text-sm border border-cyan-900/50 mb-6">
-              <p className="text-emerald-400">$ git clone [Your-Repo-URL]</p>
-              <p className="text-blue-400">$ cd nids-project</p>
-              <p className="text-purple-400">$ python app.py --mode live</p>
-            </div>
-            <div className="flex gap-3">
-              <button onClick={() => window.open('https://github.com/your-repo', '_blank')} className="flex-1 bg-cyan-600 py-3 rounded-xl font-bold hover:bg-cyan-500 transition-all flex items-center justify-center gap-2">
-                <Github size={18}/> GitHub
-              </button>
-              <button onClick={() => window.history.back()} className="flex-1 bg-gray-800 py-3 rounded-xl font-bold hover:bg-gray-700 transition-all text-gray-400">
-                Go Back
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-export default FeatureGuard;

frontend/src/components/Header.jsx DELETED Viewed

@@ -1,16 +0,0 @@
-// src/components/Header.jsx
-import React from "react";
-import { useAuth } from "../context/AuthContext";
-export default function Header() {
-  const { user, logout } = useAuth();
-  return (
-    <div className="flex items-center justify-between p-3">
-      <div className="text-cyan-300 font-bold">NIDS Cyber Defense</div>
-      <div className="flex items-center gap-3">
-        <div className="text-sm text-slate-300">{user?.email}</div>
-        <button onClick={logout} className="px-3 py-1 bg-rose-500/10 rounded">Logout</button>
-      </div>
-    </div>
-  );
-}

frontend/src/components/IPInfoModal.jsx DELETED Viewed

@@ -1,182 +0,0 @@
-import React, { useEffect, useState } from "react";
-export default function IPInfoModal({ ip, onClose }) {
-  const [info, setInfo] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [risk, setRisk] = useState({
-    level: "Unknown",
-    score: 0,
-    reason: "Unverified",
-  });
-  useEffect(() => {
-    if (!ip) return;
-    // Reset state for new IP
-    setInfo(null);
-    setRisk({ level: "Unknown", score: 0, reason: "Unverified" });
-    setLoading(true);
-    // ✅ Private / Local IP detection
-    const privateRanges = [
-      /^127\./,
-      /^10\./,
-      /^192\.168\./,
-      /^172\.(1[6-9]|2[0-9]|3[0-1])\./,
-      /^239\./, // multicast
-    ];
-    if (privateRanges.some((r) => r.test(ip))) {
-      setInfo({
-        city: "Local Network",
-        region: "Private or Multicast Range",
-        country_name: "N/A",
-        org: "Local Device",
-        asn: "LAN",
-        version: "IPv4",
-        latitude: "-",
-        longitude: "-",
-      });
-      setRisk({
-        level: "Low",
-        score: 5,
-        reason: "Private / local or multicast IP",
-      });
-      setLoading(false);
-      return;
-    }
-    // ✅ Backend lookup (new route)
-fetch(`http://127.0.0.1:5000/api/geo/resolve?ip=${ip}`)
-  .then(async (res) => {
-    if (!res.ok) {
-      const errData = await res.json().catch(() => ({}));
-      throw new Error(errData.error || "Lookup failed");
-    }
-    return res.json();
-  })
-  .then((data) => {
-    setInfo(data);
-    setRisk({
-      level:
-        data.country === "Local"
-          ? "Low"
-          : data.country === "Unknown"
-          ? "Medium"
-          : "Low",
-      score: data.country === "Unknown" ? 40 : 15,
-      reason: `Detected in ${data.country || "Unknown"}`,
-    });
-  })
-  .catch((err) => {
-    console.warn("⚠️ Geo lookup failed:", err.message);
-    setInfo({
-      city: "Unknown",
-      country_name: "Unknown",
-      org: "No data",
-      latitude: "-",
-      longitude: "-",
-    });
-    setRisk({
-      level: "Low",
-      score: 10,
-      reason: "No threat detected / lookup failed",
-    });
-  })
-  .finally(() => setLoading(false));
-  }, [ip]);
-  if (!ip) return null;
-  // ✅ Helper for dynamic color
-  const riskColor =
-    risk.level === "High"
-      ? "text-red-400"
-      : risk.level === "Medium"
-      ? "text-yellow-400"
-      : "text-green-400";
-  const riskBarColor =
-    risk.level === "High"
-      ? "bg-red-500"
-      : risk.level === "Medium"
-      ? "bg-yellow-400"
-      : "bg-green-400";
-  return (
-    <div className="fixed inset-0 bg-black/70 flex justify-center items-center z-50">
-      <div className="bg-cyber-panel/90 border border-cyan-400/30 rounded-xl p-5 w-96 text-slate-200 shadow-lg relative">
-        <h2 className="text-lg font-semibold text-cyan-400 mb-3">
-          🌐 IP Info — {ip}
-        </h2>
-        {loading ? (
-          <p className="text-slate-400 text-sm animate-pulse">
-            Fetching IP intelligence...
-          </p>
-        ) : info ? (
-          <div className="space-y-2 text-sm">
-            <p>
-              <b>City:</b> {info.city || "Unknown"}
-            </p>
-            <p>
-              <b>Region:</b> {info.region || "Unknown"}
-            </p>
-            <p>
-              <b>Country:</b> {info.country_name || "Unknown"}
-            </p>
-            <p>
-              <b>ISP:</b> {info.org || "Unknown"}
-            </p>
-            <p>
-              <b>ASN:</b> {info.asn || "N/A"}
-            </p>
-            <p>
-              <b>IP Type:</b> {info.version}
-            </p>
-            <p>
-              <b>Coordinates:</b> {info.latitude}, {info.longitude}
-            </p>
-          </div>
-        ) : (
-          <p className="text-red-400 text-sm">
-            Could not fetch IP intelligence data.
-          </p>
-        )}
-        {/* Risk / Threat assessment */}
-        {!loading && (
-          <div className="mt-4 border-t border-cyan-400/10 pt-3">
-            <h4 className="text-sm text-slate-300 mb-1">Threat Assessment</h4>
-            <div className="flex items-center justify-between">
-              <span className={`text-sm font-semibold ${riskColor}`}>
-                {risk.level} Risk ({risk.score}%)
-              </span>
-              <span className="text-xs text-slate-400 max-w-[180px] text-right">
-                {risk.reason}
-              </span>
-            </div>
-            {/* Risk Progress Bar */}
-            <div className="w-full bg-slate-700/40 rounded-full mt-2 h-2 overflow-hidden">
-              <div
-                className={`h-2 rounded-full ${riskBarColor}`}
-                style={{ width: `${risk.score}%` }}
-              />
-            </div>
-          </div>
-        )}
-        {/* Close button */}
-        <button
-          onClick={onClose}
-          className="mt-5 px-3 py-2 bg-cyan-500/20 hover:bg-cyan-500/30 rounded-lg border border-cyan-400/30 w-full text-sm"
-        >
-          Close
-        </button>
-      </div>
-    </div>
-  );
-}

frontend/src/components/LoadingOverlay.jsx DELETED Viewed

@@ -1,12 +0,0 @@
-// src/components/LoadingOverlay.jsx
-export default function LoadingOverlay({ show, message = "Processing..." }) {
-  if (!show) return null;
-  return (
-    <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50">
-      <div className="text-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-4 border-cyan-400 mb-3 mx-auto"></div>
-        <p className="text-cyan-300 font-semibold">{message}</p>
-      </div>
-    </div>
-  );
-}

frontend/src/components/MainLayout.jsx DELETED Viewed

@@ -1,13 +0,0 @@
-import React from "react";
-import Navbar from "./Navbar";
-import ChatAssistant from "../pages/ChatAssistant";
-export default function MainLayout({ children }) {
-  return (
-    <div className="relative">
-      <Navbar />
-      {children}
-      <ChatAssistant />
-    </div>
-  );
-}

frontend/src/components/Navbar.jsx DELETED Viewed

@@ -1,128 +0,0 @@
-import React, { useState } from "react";
-import { Shield, Search, User, ChevronDown, RefreshCcw, LogOut, CurrencyIcon } from "lucide-react";
-import { useAuth } from "../context/AuthContext";
-import { useLocation, useNavigate } from "react-router-dom";
-export default function Navbar({ onRefresh }) {
-  const { user, logout } = useAuth();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [searchQuery, setSearchQuery] = useState("");
-  const [profileOpen, setProfileOpen] = useState(false);
-  return (
-    <nav className="relative z-20 border-b border-accent/20  backdrop-blur-xl py-4 shadow-[0_4px_20px_rgba(0,0,0,0.45)]">
-      <div className="container mx-auto px-4 py-3 mb-2 flex items-center gap-6">
-        {/* Brand */}
-        <button onClick={() => navigate("/")} className="flex items-center gap-3 group">
-          <div className="p-2 rounded-xl border border-accent/50 bg-accent/10 shadow-neon group-hover:bg-accent/20 transition">
-            <CurrencyIcon size={20} className="text-accent" />
-          </div>
-          <div className="flex flex-col leading-tight">
-            <span className="text-sm font-semibold text-accent tracking-[0.22em] uppercase">
-              ASTRAGUARD
-            </span>
-            <span className="text-[11px] text-slate-400 uppercase tracking-[0.18em]">
-              AI • NIDS
-            </span>
-          </div>
-        </button>
-        {/* Main Nav */}
-        <div className="hidden lg:flex items-center gap-4 text-sm text-slate-300 ml-4">
-          {[
-            { path: "/", label: "Dashboard" },
-            { path: "/livetraffic", label: "Live Traffic" },
-            { path: "/flow", label: "Flow Analyzer" },
-            { path: "/alerts", label: "Alerts" },
-            { path: "/threats", label: "Threat Intel" },
-            { path: "/reports", label: "Reports" },
-            { path: "/system", label: "System" },
-            { path: "/mlmodels", label: "ML Models" },
-          ].map((item, i) => (
-            <button
-              key={i}
-              onClick={() => navigate(item.path)}
-              className={`px-3 py-1.5 rounded-full transition-all duration-200 ${
-                location.pathname === item.path
-                  ? "text-accent bg-accent/10 shadow-[0_0_10px_rgba(0,229,255,0.35)]"
-                  : "text-slate-300 hover:text-accent hover:bg-accent/10"
-              }`}
-            >
-              {item.label}
-            </button>
-          ))}
-        </div>
-        {/* Right side */}
-        <div className="ml-auto flex items-center gap-4">
-          {/* Search */}
-          <div className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full border border-accent/40 bg-white/5 focus-within:ring-1 focus-within:ring-accent/60 transition">
-            <Search size={16} className="text-accent/80" />
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search dashboard..."
-              className="bg-transparent text-xs text-slate-200 placeholder:text-slate-500 focus:outline-none w-40"
-            />
-          </div>
-          {/* Profile */}
-          <div className="relative">
-            <button
-              onClick={() => setProfileOpen(!profileOpen)}
-              className="flex items-center gap-2 px-2 py-1.5 rounded-full border border-accent/40 bg-white/5 hover:bg-accent/10 transition"
-            >
-              <div className="w-8 h-8 rounded-full border border-accent/40 bg-accent/10 flex items-center justify-center">
-                <User size={16} className="text-accent" />
-              </div>
-              <div className="hidden sm:flex flex-col items-start max-w-[130px]">
-                <span className="text-[10px] text-slate-400 uppercase tracking-[0.16em]">
-                  Operator
-                </span>
-                <span className="text-xs text-accent font-medium truncate">
-                  {user?.displayName || "Analyst"}
-                </span>
-              </div>
-              <ChevronDown size={14} className="text-slate-400" />
-            </button>
-            {profileOpen && (
-              <div className="absolute right-0 mt-2 w-44 rounded-xl border border-accent/30 bg-[#020617]/95 shadow-lg py-1 text-sm z-40">
-                {onRefresh && (
-                  <>
-                    <button
-                      onClick={() => {
-                        onRefresh();
-                        setProfileOpen(false);
-                      }}
-                      className="w-full flex items-center gap-2 px-3 py-2 hover:bg-accent/10 text-slate-200"
-                    >
-                      <RefreshCcw size={14} className="text-accent" />
-                      <span>Reload data</span>
-                    </button>
-                    <div className="border-t border-slate-700/60 my-1" />
-                  </>
-                )}
-                <button
-                  onClick={() => logout()}
-                  className="w-full flex items-center gap-2 px-3 py-2 hover:bg-red-500/15 text-red-300"
-                >
-                  <LogOut size={14} />
-                  <span>Logout</span>
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-}

frontend/src/components/NeonShield.jsx DELETED Viewed

@@ -1,87 +0,0 @@
-import { Canvas, useFrame } from "@react-three/fiber";
-import * as THREE from "three";
-import { useRef } from "react";
-/* ------------- Rotating Packet Ring ------------- */
-function PacketRing() {
-  const ring = useRef();
-  const pulse = useRef();
-  useFrame(({ clock }) => {
-    const t = clock.getElapsedTime();
-    ring.current.rotation.y = t * 0.6;
-    const r = 1.5;
-    pulse.current.position.x = r * Math.cos(t * 1.5);
-    pulse.current.position.y = r * Math.sin(t * 1.5);
-  });
-  return (
-    <group>
-      <mesh ref={ring} rotation={[0.5, 0.4, 0]}>
-        <torusGeometry args={[1.5, 0.07, 32, 100]} />
-        <meshStandardMaterial
-          emissive="#00e5ff"
-          emissiveIntensity={1.7}
-          color="#00e5ff"
-        />
-      </mesh>
-      <mesh ref={pulse}>
-        <sphereGeometry args={[0.13, 32, 32]} />
-        <meshStandardMaterial emissive="#a855f7" emissiveIntensity={2} />
-      </mesh>
-    </group>
-  );
-}
-/* ------------- Floating Network Nodes ------------- */
-function NetworkNodes() {
-  const group = useRef();
-  useFrame(({ clock }) => {
-    group.current.rotation.y = clock.getElapsedTime() * 0.3;
-  });
-  const nodes = Array.from({ length: 12 }).map(() => [
-    (Math.random() - 0.5) * 2,
-    (Math.random() - 0.5) * 1.5,
-    (Math.random() - 0.5) * 1.2,
-  ]);
-  return (
-    <group ref={group}>
-      {nodes.map((pos, i) => (
-        <mesh position={pos} key={i}>
-          <sphereGeometry args={[0.1, 24, 24]} />
-          <meshStandardMaterial
-            emissive="#00e5ff"
-            emissiveIntensity={1.3}
-            color="#00e5ff"
-          />
-        </mesh>
-      ))}
-    </group>
-  );
-}
-/* ------------- Main Scene ------------- */
-export default function NIDS3D() {
-  return (
-    <Canvas
-      style={{ width: "100%", height: "100%" }}
-      camera={{ position: [2.5, 2.5, 5], fov: 30 }}
-    >
-      <ambientLight intensity={0.5} />
-      <pointLight position={[3, 3, 3]} intensity={1} />
-      <group rotation={[0.5, 0.4, 0]}>
-        <PacketRing />
-        <NetworkNodes />
-      </group>
-    </Canvas>
-  );
-}

frontend/src/components/ProtectedRoute.jsx DELETED Viewed

@@ -1,10 +0,0 @@
-// src/components/ProtectedRoute.jsx
-import React from "react";
-import { Navigate } from "react-router-dom";
-import { useAuth } from "../context/AuthContext";
-export default function ProtectedRoute({ children }) {
-  const { user, authLoading } = useAuth();
-  if (authLoading) return null; // or a spinner
-  return user ? children : <Navigate to="/login" replace />;
-}

frontend/src/components/Sidebar.jsx DELETED Viewed

@@ -1,324 +0,0 @@
-// src/components/Sidebar.jsx
-import React, { useEffect, useRef, useState } from "react";
-import { NavLink } from "react-router-dom";
-import {
-  Activity,
-  AlertTriangle,
-  FileText,
-  Info,
-  Settings,
-  TrafficCone,
-  MonitorCog,
-  GitBranchMinus,
-  BrickWallShield,
-  ChevronLeft,
-  ChevronRight,
-  MoonStar,
-  LayoutDashboard,
-} from "lucide-react";
-/**
- * Sidebar with mini-constellation canvas (B3)
- *
- * Props:
- *   - collapsed: boolean
- *   - setCollapsed: function
- */
-export default function Sidebar({ collapsed, setCollapsed }) {
-  const sidebarRef = useRef(null);
-  const canvasRef = useRef(null);
-  const [time, setTime] = useState("");
-  // clock tick
-  useEffect(() => {
-    const tick = () => {
-      const now = new Date();
-      setTime(
-        now.toLocaleTimeString("en-IN", {
-          hour12: true,
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit",
-        })
-      );
-    };
-    tick();
-    const id = setInterval(tick, 1000);
-    return () => clearInterval(id);
-  }, []);
-  // mini-constellation canvas (node+line) - optimized for sidebar
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const sidebar = sidebarRef.current;
-    if (!canvas || !sidebar) return;
-    const ctx = canvas.getContext("2d", { alpha: true });
-    let width = sidebar.clientWidth;
-    let height = sidebar.clientHeight;
-    let rafId = null;
-    let particles = [];
-    const COUNT = Math.max(18, Math.floor((width * height) / 10000)); // scale nodes by size
-    // Resize handler
-    function resize() {
-      width = sidebar.clientWidth;
-      height = sidebar.clientHeight;
-      const dpr = Math.max(1, window.devicePixelRatio || 1);
-      canvas.width = Math.floor(width * dpr);
-      canvas.height = Math.floor(height * dpr);
-      canvas.style.width = `${width}px`;
-      canvas.style.height = `${height}px`;
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-      // recreate particles to adapt density
-      initParticles();
-    }
-    function rand(min, max) {
-      return Math.random() * (max - min) + min;
-    }
-    function initParticles() {
-      particles = [];
-      const n = COUNT;
-      for (let i = 0; i < n; i++) {
-        particles.push({
-          x: rand(10, width - 10),
-          y: rand(10, height - 10),
-          vx: rand(-0.15, 0.15),
-          vy: rand(-0.15, 0.15),
-          size: rand(0.8, 2.2),
-          hue: rand(170, 200), // cyan-ish
-        });
-      }
-    }
-    function step() {
-      ctx.clearRect(0, 0, width, height);
-      // draw lines between close particles
-      for (let i = 0; i < particles.length; i++) {
-        const a = particles[i];
-        for (let j = i + 1; j < particles.length; j++) {
-          const b = particles[j];
-          const dx = a.x - b.x;
-          const dy = a.y - b.y;
-          const dist = Math.sqrt(dx * dx + dy * dy);
-          const MAX = Math.min(120, Math.max(70, (width + height) / 15));
-          if (dist < MAX) {
-            const alpha = 0.12 * (1 - dist / MAX);
-            ctx.beginPath();
-            ctx.moveTo(a.x, a.y);
-            ctx.lineTo(b.x, b.y);
-            ctx.strokeStyle = `rgba(40,220,210, ${alpha.toFixed(3)})`;
-            ctx.lineWidth = 0.6;
-            ctx.stroke();
-          }
-        }
-      }
-      // draw nodes
-      for (let p of particles) {
-        // move
-        p.x += p.vx;
-        p.y += p.vy;
-        // gentle wrap/bounce
-        if (p.x < -6) p.x = width + 6;
-        if (p.x > width + 6) p.x = -6;
-        if (p.y < -6) p.y = height + 6;
-        if (p.y > height + 6) p.y = -6;
-        // glow circle
-        ctx.beginPath();
-        const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size * 6);
-        grad.addColorStop(0, `rgba(0,230,255,0.95)`);
-        grad.addColorStop(0.2, `rgba(0,230,255,0.55)`);
-        grad.addColorStop(1, `rgba(0,230,255,0.02)`);
-        ctx.fillStyle = grad;
-        ctx.arc(p.x, p.y, p.size * 3.2, 0, Math.PI * 2);
-        ctx.fill();
-        // center bright dot
-        ctx.beginPath();
-        ctx.fillStyle = `rgba(220,255,255,0.95)`;
-        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-        ctx.fill();
-      }
-      rafId = requestAnimationFrame(step);
-    }
-    // ResizeObserver to respond to sidebar size changes (collapse/expand)
-    const ro = new ResizeObserver(resize);
-    ro.observe(sidebar);
-    resize();
-    step(); // start animation
-    return () => {
-      if (rafId) cancelAnimationFrame(rafId);
-      ro.disconnect();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sidebarRef, canvasRef, collapsed]);
-  // navigation items
-  const navItems = [
-    { to: "/", label: "Dashboard", icon: <LayoutDashboard size={18} /> },
-    { to: "/livetraffic", label: "Live Traffic", icon: <Activity size={18} /> },
-    { to: "/threats", label: "Threat Intelligence", icon: <Info size={18} /> },
-    { to: "/alerts", label: "Alerts", icon: <AlertTriangle size={18} /> },
-    { to: "/incidents", label: "Offline Detection", icon: <BrickWallShield size={18} /> },
-    { to: "/traffic", label: "Traffic Analysis", icon: <TrafficCone size={18} /> },
-    { to: "/response", label: "Response System", icon: <GitBranchMinus size={18} /> },
-    { to: "/mlmodels", label: "ML Model", icon: <MoonStar size={18} /> },
-    { to: "/reports", label: "Reports", icon: <FileText size={18} /> },
-    { to: "/system", label: "System Info", icon: <MonitorCog size={18} /> },
-    { to: "/settings", label: "Settings", icon: <Settings size={18} /> },
-  ];
-  return (
-    <aside
-      ref={sidebarRef}
-      aria-label="Main navigation"
-      className={`fixed top-0 left-0 h-screen
-        ${collapsed ? "w-20" : "w-64"}
-        bg-[#030b17]/50 backdrop-blur-xl
-        flex flex-col z-50 transition-all duration-300
-        border-r-2 border-[var(--accent)]/14
-        shadow-[inset_0_0_18px_rgba(0,229,255,0.06)]
-      `}
-    >
-      {/* background canvas (mini constellation) */}
-      <canvas
-        ref={canvasRef}
-        className="pointer-events-none absolute inset-0 -z-10"
-        aria-hidden="true"
-      />
-      {/* double neon border / decorative rings */}
-      <div
-        className="absolute inset-0 pointer-events-none -z-5"
-        style={{
-          boxShadow:
-            "inset 0 0 2px rgba(0,230,255,0.06), inset 0 0 30px rgba(0,230,255,0.03)",
-        }}
-      />
-      {/* HEADER */}
-      <div className="p-4 border-b border-[var(--accent)]/12 relative overflow-hidden shrink-0">
-        <div className="relative z-10 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <span className="text-[18px] font-extrabold text-[var(--accent)]">⚡</span>
-            {!collapsed && (
-              <div>
-                <div className="text-xl font-bold text-[var(--accent)] leading-tight">NIDS</div>
-                <div className="text-[11px] text-slate-400">Cyber Defense</div>
-              </div>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            <span
-              className={`w-2.5 h-2.5 rounded-full ${
-                navigator.onLine ? "bg-emerald-400 animate-pulse" : "bg-rose-500 animate-ping"
-              }`}
-            />
-            {!collapsed && (
-              <div className="text-xs text-slate-400">{navigator.onLine ? "LIVE" : "OFFLINE"}</div>
-            )}
-          </div>
-        </div>
-        {!collapsed && (
-          <div className="mt-3 text-xs text-slate-400">
-            <div className="flex justify-between items-center">
-              <span className="text-[var(--accent)]">Host:</span>
-              <span className="font-mono text-[var(--accent)] text-right">{window.location.hostname}</span>
-            </div>
-            <div className="mt-2 relative h-1.5 bg-gradient-to-r from-transparent to-transparent rounded-full overflow-hidden">
-              <div className="absolute inset-0 bg-gradient-to-r from-cyan-400 via-emerald-400 to-cyan-400 opacity-30 blur-sm" />
-              <div className="mt-2 text-[10px] text-slate-500">Monitoring anomalies…</div>
-            </div>
-          </div>
-        )}
-      </div>
-      {/* NAV - scrollable */}
-      <nav className="flex-1 p-3 overflow-y-auto overflow-x-hidden custom-scroll">
-  <div className="space-y-1">
-    {navItems.map(({ to, label, icon }, index) => (
-      <div key={to}>
-        <NavLink
-          to={to}
-          title={collapsed ? label : ""}
-          className={({ isActive }) =>
-            `
-              group flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200 text-sm relative
-              ${isActive
-                ? "bg-[var(--accent)]/18 border border-[var(--accent)]/28 text-[var(--accent)] shadow-[0_0_10px_rgba(0,230,255,0.06)]"
-                : "text-slate-300 hover:bg-[var(--accent)]/6 hover:border hover:border-[var(--accent)]/18"}
-            `
-          }
-        >
-          <div className="w-5 h-5 flex items-center justify-center text-[var(--accent)]">
-            {icon}
-          </div>
-          {!collapsed && <span className="truncate">{label}</span>}
-          {/* Tooltip when collapsed */}
-          {collapsed && (
-            <div className="absolute left-[3.4rem] top-1/2 -translate-y-1/2 opacity-0
-                            group-hover:opacity-100 transition-opacity duration-150 pointer-events-none">
-              <div className="bg-black/75 text-[var(--accent)] border border-[var(--accent)]/30
-                              px-2 py-1 rounded text-xs whitespace-nowrap shadow-md">
-                {label}
-              </div>
-            </div>
-          )}
-        </NavLink>
-        {/* Divider line (between items) */}
-        {index < navItems.length - 1 && (
-          <div className="h-px w-full bg-white/100  my-3"></div>
-        )}
-      </div>
-    ))}
-  </div>
-</nav>
-      {/* FOOTER */}
-      <div className="p-3 border-t border-[var(--accent)]/12 shrink-0">
-        <div className="flex items-center justify-between">
-          {!collapsed ? (
-            <>
-              <div className="text-[10px] text-slate-400">© 2025 Future Lelouch</div>
-              <div className="text-[11px] text-[var(--accent)] font-mono">{time}</div>
-            </>
-          ) : (
-            <div className="text-[10px] text-slate-400 text-center w-full">© 2025</div>
-          )}
-        </div>
-      </div>
-      {/* collapse/expand toggle */}
-      <button
-        aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-        onClick={() => setCollapsed(!collapsed)}
-        className="absolute right-[-12px] bottom-6 w-8 h-8 rounded-full bg-[var(--accent)]/12 border border-[var(--accent)]/30 text-[var(--accent)] shadow-[0_6px_18px_rgba(0,230,255,0.06)] flex items-center justify-center transition-transform hover:scale-110"
-      >
-        {collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
-      </button>
-    </aside>
-  );
-}

frontend/src/components/TopStatusBar.jsx DELETED Viewed

@@ -1,13 +0,0 @@
-// src/components/TopStatusBar.jsx
-export default function TopStatusBar({ running, packetCount, iface, lastUpdate }) {
-  return (
-    <div className="flex items-center justify-between bg-cyan-900/20 px-4 py-2 rounded-lg border border-cyan-400/20 mb-4">
-      <span className="text-sm text-cyan-300">
-        {running ? "🟢 Capturing Packets" : "🔴 Capture Stopped"}
-      </span>
-      <span className="text-sm text-slate-400">
-        Packets: <b className="text-cyan-300">{packetCount}</b> | Interface: {iface || "auto"} | Updated: {lastUpdate || "—"}
-      </span>
-    </div>
-  );
-}

frontend/src/components/dashboard/Controls.jsx DELETED Viewed

@@ -1,55 +0,0 @@
-import React, { useContext, useState, useEffect } from "react";
-import { LiveDataContext } from "../../context/DataContext";
-import { startSniffer, stopSniffer, getStatus } from "../../api";
-export default function Controls() {
-  const { running, setRunning } = useContext(LiveDataContext);
-  const [loading, setLoading] = useState(false);
-  useEffect(() => {
-    (async () => {
-      const res = await getStatus();
-      setRunning(res?.running || false);
-    })();
-  }, []);
-  const handleStart = async () => {
-    setLoading(true);
-    // 🔥 RESET BUFFER on START
-    window.__EVENT_BUFFER_RESET = true;
-    await startSniffer();
-    setRunning(true);
-    setLoading(false);
-  };
-  const handleStop = async () => {
-    setLoading(true);
-    await stopSniffer();
-    setRunning(false);
-    setLoading(false);
-  };
-  return (
-    <div className="flex gap-4">
-      <button
-        onClick={handleStart}
-        disabled={running || loading}
-        className={`px-4 py-2 rounded-lg border transition-all ${
-          running ? "bg-green-600/20 border-green-500 text-green-400" : "border-green-400 text-green-300 hover:bg-green-500/20"
-        }`}
-      >
-        🚀 Start Capture
-      </button>
-      <button
-        onClick={handleStop}
-        disabled={!running || loading}
-        className={`px-4 py-2 rounded-lg border transition-all ${
-          !running ? "bg-red-500/20 border-red-500 text-red-400" : "border-red-400 text-red-300 hover:bg-red-500/30"
-        }`}
-      >
-        🛑 Stop Capture
-      </button>
-    </div>
-  );
-}

frontend/src/components/dashboard/LiveDashboard.jsx DELETED Viewed

@@ -1,254 +0,0 @@
-import React, { useEffect, useState, useContext, useRef } from "react";
-import Controls from "./Controls.jsx";
-import LiveTable from "./LiveTable.jsx";
-import ChatAssistant from "../../pages/ChatAssistant.jsx";
-import StatsPanel from "./StatsPanel.jsx";
-import { Download, Loader2, MessageSquare } from "lucide-react";
-import { socket } from "../../socket.js";
-import {
-  getRecent,
-  getStats,
-  download_logs,
-  switchModel,
-  getActiveModel,
-  getStatus
-} from "../../api.js";
-import { AlertContext } from "../../context/AlertContext.jsx";
-import ThreatFeed from "./ThreatFeed";
-import ThreatTimeline from "./ThreatTimeline";
-import TopIPs from "./TopIPs";
-import TopCountries from "./TopCountries";
-import Sparkline from "./Sparkline";
-export default function LiveDashboard() {
-  const [rows, setRows] = useState([]);
-  const [stats, setStats] = useState({});
-  const [connected, setConnected] = useState(false);
-  const [lastUpdate, setLastUpdate] = useState(null);
-  const [threatCount, setThreatCount] = useState(0);
-  const { pushAlert } = useContext(AlertContext);
-  const [model, setModel] = useState("bcc");
-  const [snifferRunning, setSnifferRunning] = useState(false);
-  const [switching, setSwitching] = useState(false);
-  const [modelReady, setModelReady] = useState(false);
-  const [tableKey, setTableKey] = useState(0);
-  const eventBufferRef = useRef([]);
-  // ============================================================
-  // INIT LOAD: Active model + sniffer status
-  // ============================================================
-  useEffect(() => {
-    (async () => {
-      const res = await getActiveModel();
-      if (res?.model) setModel(res.model);
-      const st = await getStatus();
-      setSnifferRunning(st?.running === true);
-    })();
-  }, []);
-  // ============================================================
-  // MODEL SWITCH (backend + UI reset)
-  // ============================================================
-  useEffect(() => {
-    const doSwitch = async () => {
-      setSwitching(true);
-      setModelReady(false);
-      setRows([]);
-      setStats({});
-      setThreatCount(0);
-      eventBufferRef.current = [];
-      setTableKey((k) => k + 1);
-      const res = await switchModel(model);
-      if (!res?.error) {
-        pushAlert(`${model.toUpperCase()} model activated`, "info");
-        setModelReady(true);
-      } else {
-        pushAlert("Model switch failed!", "danger");
-      }
-      setSwitching(false);
-    };
-    doSwitch();
-  }, [model]);
-  // ============================================================
-  // INITIAL FETCH (after model switch)
-  // ============================================================
-  useEffect(() => {
-    if (!modelReady) return;
-    (async () => {
-      const [r1, r2] = await Promise.all([
-        getRecent(model),
-        getStats(model)
-      ]);
-      setRows(Array.isArray(r1?.events) ? r1.events : []);
-      setStats(r2 || {});
-    })();
-  }, [model, modelReady]);
-  // ============================================================
-  // SOCKET LIVE EVENTS
-  // ============================================================
-  useEffect(() => {
-    socket.on("connect", () => setConnected(true));
-    socket.on("disconnect", () => setConnected(false));
-    socket.on("new_event", (payload) => {
-      if (!modelReady || switching) return;
-      const events = payload?.items ?? [];
-      if (events.length) eventBufferRef.current.push(...events);
-    });
-    return () => {
-      socket.off("connect");
-      socket.off("disconnect");
-      socket.off("new_event");
-    };
-  }, [modelReady, switching]);
-  // ============================================================
-  // BUFFER TO UI processing
-  // ============================================================
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (!modelReady) return;
-      if (!eventBufferRef.current.length) return;
-      const batch = eventBufferRef.current.splice(0, 50);
-      setRows((prev) => [...batch, ...prev].slice(0, 180));
-      setStats((prev) => {
-        const next = { ...prev };
-        batch.forEach((evt) => {
-          const label = (evt.prediction || "UNKNOWN").toUpperCase();
-          next[label] = (next[label] || 0) + 1;
-        });
-        return next;
-      });
-      batch.forEach((evt) => {
-        const label = (evt.prediction || "").toUpperCase();
-        const isThreat = (model === "bcc" && ["TOR","I2P","ZERONET"].includes(label)) ||
-                         (model === "cicids" && label !== "BENIGN");
-        if (isThreat) setThreatCount((c) => c + 1);
-      });
-      setLastUpdate(new Date().toLocaleTimeString());
-    }, 1200);
-    return () => clearInterval(interval);
-  }, [model, modelReady]);
-  // ============================================================
-  // AI Assistant Handler (local popup)
-  // ============================================================
-  const askAISummary = async () => {
-    const dangerous = rows.filter(evt => {
-      const label = (evt.prediction || "").toUpperCase();
-      return (model === "bcc" && ["TOR","I2P","ZERONET"].includes(label)) ||
-             (model === "cicids" && label !== "BENIGN");
-    });
-    alert(`AI Summary:
-Danger Events: ${dangerous.length}
-Recent Threat Types: ${dangerous.slice(0, 5).map(e => e.prediction).join(", ")}`);
-  };
-  // ============================================================
-  // RENDER UI
-  // ============================================================
-  return (
-    <div className="space-y-5">
-      <h2 className="py-6 text-5xl md:text-6xl font-extrabold text-transparent bg-gradient-to-r from-cyan-300 via-purple-400 to-pink-400 bg-clip-text">
-        Live Capture
-      </h2>
-      <div className="p-3 rounded-lg bg-cyan-500/10 border border-cyan-400/30 text-cyan-200">
-        Active Model: {model.toUpperCase()}
-      </div>
-      {/* Model Toggle */}
-      <div className="flex gap-3 mb-4">
-        <button
-          disabled={snifferRunning || switching}
-          className={`px-4 py-2 rounded-lg border ${
-            model === "bcc" ? "bg-cyan-500/20 border-cyan-400/50 text-cyan-300" :
-            "bg-black/20 border-cyan-400/20 text-slate-400"
-          }`}
-          onClick={() => setModel("bcc")}
-        >
-          {switching && model === "bcc" && <Loader2 className="animate-spin" size={16} />}
-          BCC Model
-        </button>
-        <button
-          disabled={snifferRunning || switching}
-          className={`px-4 py-2 rounded-lg border ${
-            model === "cicids" ? "bg-purple-500/20 border-purple-400/50 text-purple-300" :
-            "bg-black/20 border-purple-400/20 text-slate-400"
-          }`}
-          onClick={() => setModel("cicids")}
-        >
-          {switching && model === "cicids" && <Loader2 className="animate-spin" size={16} />}
-          CICIDS Model
-        </button>
-        {/* 🧠 AI Button */}
-        <button
-          onClick={askAISummary}
-          className="px-4 py-2 rounded-lg bg-yellow-500/10 border border-yellow-400/40 text-yellow-300 flex items-center gap-2 hover:bg-yellow-500/20"
-        >
-          <MessageSquare size={16} />
-          AI Assist
-        </button>
-      </div>
-      <Controls />
-      {/* Status + Logs */}
-      <div className="flex justify-between items-center">
-        <h3 className="text-xl text-cyan-400 font-semibold">
-          {model === "bcc" ? "Realtime BCC Monitor" : "Realtime CICIDS Monitor"}
-        </h3>
-        <button
-          onClick={() => download_logs(model)}
-          className="px-3 py-2 rounded-xl bg-emerald-500/20 border border-emerald-400/40 text-emerald-300 flex items-center gap-2"
-        >
-          <Download size={16} /> Logs
-        </button>
-      </div>
-      <StatsPanel stats={stats} />
-      <LiveTable key={tableKey} rows={rows} />
-      <ChatAssistant />
-      {/* VISUAL ANALYTICS BACK ADDED */}
-      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
-        <ThreatFeed key={`${tableKey}-feed`} events={rows} />
-        <ThreatTimeline key={`${tableKey}-timeline`} events={rows} />
-        <Sparkline key={`${tableKey}-spark`} events={rows} />
-        <TopIPs key={`${tableKey}-ips`} events={rows} />
-        <TopCountries key={`${tableKey}-countries`} events={rows} />
-      </div>
-      <p className="text-xs text-slate-400 text-right">
-        Last packet: <span className="text-cyan-300">{lastUpdate || "Waiting…"}</span>
-      </p>
-    </div>
-  );
-}

frontend/src/components/dashboard/LiveTable.jsx DELETED Viewed

@@ -1,168 +0,0 @@
-import React, { useState } from "react";
-import Badge from "../../ui/Badge";
-import { clearLogs, clearByPrediction, deleteOne } from "../../api";
-import { Trash } from "lucide-react";
-import IPInfoModal from "../IPInfoModal";
-export default function LiveTable({ rows, refresh }) {
-  const [clearing, setClearing] = useState(false);
-  const [deleteCount, setDeleteCount] = useState(50);
-  const [selectedIP, setSelectedIP] = useState(null);
-  // ✅ Safely clear last N rows
-  const handleClear = async (n) => {
-    try {
-      setClearing(true);
-      // 🔥 RESET BUFFER on CLEAR
-      window.__EVENT_BUFFER_RESET = true;
-      await clearLogs(n);
-      if (typeof refresh === "function") await refresh();
-    } catch (err) {
-      console.error("Clear logs failed:", err);
-    } finally {
-      setTimeout(() => setClearing(false), 500);
-    }
-  };
-  // ✅ Clear logs by prediction type
-  const handleClearPrediction = async (pred) => {
-    if (!pred) return;
-    try {
-      await clearByPrediction(pred);
-      if (typeof refresh === "function") await refresh();
-    } catch (err) {
-      console.error("Clear by prediction failed:", err);
-    }
-  };
-  // ✅ Delete a single row safely
-  const deleteSingleRow = async (index) => {
-    try {
-      await deleteOne(index);
-      if (typeof refresh === "function") await refresh();
-    } catch (err) {
-      console.error("Delete single row failed:", err);
-    }
-  };
-  return (
-    <div className="cyber-card overflow-hidden transition-all duration-300">
-      {/* HEADER + ACTIONS */}
-      <div className="flex items-center justify-between mb-3">
-        <div>
-          <h3 className="font-semibold text-lg">Live Events</h3>
-          <span className="text-xs text-slate-400">
-            Showing last {rows.length} packets
-          </span>
-        </div>
-        {/* DELETE CONTROLS */}
-        <div className="flex items-center gap-2">
-          {/* DELETE BY PREDICTION */}
-          <select
-            onChange={(e) => handleClearPrediction(e.target.value)}
-            className="bg-cyber-panel/50 border border-cyan-400/20 px-2 py-1 rounded-lg text-xs"
-          >
-            <option value="">Clear by Class</option>
-            <option value="VPN">Clear VPN</option>
-            <option value="TOR">Clear TOR</option>
-            <option value="I2P">Clear I2P</option>
-            <option value="FREENET">Clear FREENET</option>
-            <option value="ZERONET">Clear ZERONET</option>
-          </select>
-          {/* CLEAR LAST N */}
-          <button
-            onClick={() => handleClear(deleteCount)}
-            className="px-3 py-2 bg-red-500/20 hover:bg-red-500/30 border border-red-500/40
-                       rounded-lg text-xs flex items-center gap-1"
-          >
-            <Trash size={14} /> Clear
-          </button>
-          {/* CLEAR ALL */}
-          <button
-            onClick={() => handleClear(99999)}
-            className="px-3 py-2 bg-red-600/30 hover:bg-red-600/40 border border-red-500/50
-                       rounded-lg text-xs"
-          >
-            Clear All
-          </button>
-        </div>
-      </div>
-      {/* TABLE */}
-      <div
-        className={`overflow-auto transition-opacity duration-500 ${
-          clearing ? "opacity-30" : "opacity-100"
-        }`}
-        style={{ maxHeight: "350px" }}
-      >
-        <table className="w-full text-sm">
-          <thead className="text-slate-300/80">
-            <tr className="border-b border-cyan-400/10">
-              <th className="text-left py-2 pr-3">Time</th>
-              <th className="text-left py-2 pr-3">Src → Dst</th>
-              <th className="text-left py-2 pr-3">Ports</th>
-              <th className="text-left py-2 pr-3">Proto</th>
-              <th className="text-left py-2 pr-3">Prediction</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows
-              .slice()
-              .reverse()
-              .map((r, idx) => (
-                <tr
-                  key={idx}
-                  className="border-b border-cyan-400/5 hover:bg-white/5 transition-all"
-                >
-                  <td className="py-2 pr-3 font-mono text-xs">{r.time}</td>
-                  <td className="py-2 pr-3 font-mono text-xs">
-                    <span
-                      className="text-cyan-400 cursor-pointer hover:text-cyan-300"
-                      onClick={() => setSelectedIP(r.src_ip || r.src)}
-                    >
-                      {r.src_ip || r.src}
-                    </span>{" "}
-                    →
-                    <span
-                      className="text-cyan-400 cursor-pointer hover:text-cyan-300"
-                      onClick={() => setSelectedIP(r.dst_ip || r.dst)}
-                    >
-                      {r.dst_ip || r.dst}
-                    </span>
-                  </td>
-                  <td className="py-2 pr-3 font-mono text-xs">
-                    {r.sport} → {r.dport}
-                  </td>
-                  <td className="py-2 pr-3 font-mono text-xs">{r.proto}</td>
-                  <td className="py-2 pr-3 flex items-center gap-2">
-                    <Badge value={r.prediction} />
-                    <Trash
-                      size={14}
-                      className="text-red-400 cursor-pointer hover:text-red-600"
-                      onClick={() =>
-                        deleteSingleRow(rows.length - 1 - idx)
-                      }
-                    />
-                  </td>
-                </tr>
-              ))}
-          </tbody>
-        </table>
-      </div>
-      {/* ✅ IP Lookup Modal */}
-      {selectedIP && (
-        <IPInfoModal
-          ip={selectedIP}
-          onClose={() => setSelectedIP(null)}
-        />
-      )}
-    </div>
-  );
-}

frontend/src/components/dashboard/Sparkline.jsx DELETED Viewed

@@ -1,28 +0,0 @@
-import { LineChart, Line, ResponsiveContainer } from "recharts";
-export default function Sparkline({ events }) {
-  const data = events.slice(-40).map((e, i) => ({
-    index: i,
-    value: (e.prediction || "").toUpperCase() !== "UNKNOWN" ? 1 : 0,
-  }));
-  return (
-    <div className="cyber-card p-4">
-      <h3 className="text-accent mb-2 font-semibold">Threat Activity Trend</h3>
-      <div className="h-24">
-        <ResponsiveContainer>
-          <LineChart data={data}>
-            <Line
-              type="monotone"
-              dataKey="value"
-              stroke="#00e5ff"
-              strokeWidth={2}
-              dot={false}
-            />
-          </LineChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-}

frontend/src/components/dashboard/StatsPanel.jsx DELETED Viewed

@@ -1,104 +0,0 @@
-import React, { useMemo } from "react";
-import {
-  PieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-} from "recharts";
-// 🎨 Neon cyber color palette
-const COLORS = ["#00e5ff", "#ff0059", "#a78bfa", "#fbbf24", "#10b981"];
-export default function StatsPanel({ stats }) {
-  // ✅ Memoized data transformation for performance
-  const data = useMemo(() => {
-    if (!stats || typeof stats !== "object") return [];
-    return Object.entries(stats)
-      .map(([name, value]) => ({
-        name: String(name).toUpperCase(),
-        value: Number(value) || 0,
-      }))
-      .filter((d) => d.value > 0);
-  }, [stats]);
-  const total = data.reduce((sum, d) => sum + d.value, 0);
-  return (
-    <div className="grid md:grid-cols-2 gap-4">
-      {/* ==== PIE CHART ==== */}
-      <div className="cyber-card relative overflow-hidden">
-        <h3 className="font-semibold mb-2 text-cyan-400">
-          Class Distribution (Pie)
-        </h3>
-        <div className="h-64">
-          {data.length > 0 ? (
-            <ResponsiveContainer>
-              <PieChart>
-                <Pie
-                  data={data}
-                  dataKey="value"
-                  nameKey="name"
-                  outerRadius={90}
-                  label={({ name, value }) => `${name}: ${value}`}
-                >
-                  {data.map((entry, index) => (
-                    <Cell key={index} fill={COLORS[index % COLORS.length]} />
-                  ))}
-                </Pie>
-                <Tooltip />
-              </PieChart>
-            </ResponsiveContainer>
-          ) : (
-            <div className="flex items-center justify-center h-full text-slate-400 text-sm">
-              No Data Yet
-            </div>
-          )}
-        </div>
-        {/* Total Packets Indicator */}
-        <p className="text-xs text-slate-400 absolute bottom-2 right-3">
-          Total Packets:{" "}
-          <span className="text-cyan-300 font-semibold">{total}</span>
-        </p>
-      </div>
-      {/* ==== BAR CHART ==== */}
-      <div className="cyber-card relative overflow-hidden">
-        <h3 className="font-semibold mb-2 text-cyan-400">
-          Class Counts (Bar)
-        </h3>
-        <div className="h-64">
-          {data.length > 0 ? (
-            <ResponsiveContainer>
-              <BarChart data={data}>
-                <CartesianGrid strokeDasharray="3 3" strokeOpacity={0.1} />
-                <XAxis dataKey="name" stroke="#94a3b8" />
-                <YAxis stroke="#94a3b8" allowDecimals={false} />
-                <Tooltip />
-                <Bar
-                  dataKey="value"
-                  radius={[6, 6, 0, 0]}
-                  fill="#00e5ff"
-                  opacity={0.8}
-                />
-              </BarChart>
-            </ResponsiveContainer>
-          ) : (
-            <div className="flex items-center justify-center h-full text-slate-400 text-sm">
-              Awaiting Data...
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/src/components/dashboard/ThreatFeed.jsx DELETED Viewed

@@ -1,39 +0,0 @@
-import { AlertTriangle } from "lucide-react";
-export default function ThreatFeed({ events }) {
-  const highRisk = events
-    .filter((e) =>
-      ["TOR", "I2P", "ZERONET"].includes((e.prediction || "").toUpperCase())
-    )
-    .slice(-20)
-    .reverse();
-  return (
-    <div className="cyber-card p-4 border border-red-500/30">
-      <h3 className="text-red-400 font-semibold mb-3 flex items-center gap-2">
-        <AlertTriangle size={18} /> High-Risk Events
-      </h3>
-      {/* Scrollable list */}
-      <div className="max-h-64 overflow-y-auto pr-2 custom-scroll space-y-2">
-        {highRisk.length === 0 ? (
-          <p className="text-slate-400 text-sm">No critical activity detected</p>
-        ) : (
-          highRisk.map((e, i) => (
-            <div
-              key={i}
-              className="p-2 rounded-lg bg-red-500/10 border border-red-500/20
-                         animate-fadeIn"
-              style={{ animationDelay: `${i * 50}ms` }}
-            >
-              <span className="text-red-300 font-semibold">{e.prediction}</span>
-              <span className="text-slate-300"> from </span>
-              <span className="text-cyan-300">{e.src_ip}</span>
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  );
-}

frontend/src/components/dashboard/ThreatTimeline.jsx DELETED Viewed

@@ -1,27 +0,0 @@
-export default function ThreatTimeline({ events }) {
-  const last20 = [...events].slice(-20).reverse();
-  return (
-    <div className="cyber-card p-4">
-      <h3 className="text-accent font-semibold mb-3">Event Timeline</h3>
-      {/* Scrollable container */}
-      <div className="space-y-3 max-h-64 overflow-y-auto pr-2 custom-scroll">
-        {last20.map((e, i) => (
-          <div key={i} className="flex gap-3 items-start">
-            <div className="w-2 h-2 rounded-full bg-accent mt-2 animate-pulse" />
-            <div>
-              <p className="text-sm text-slate-300">
-                <span className="text-cyan-300">{e.prediction}</span>{" "}
-                detected from {e.src_ip}
-              </p>
-              <p className="text-[11px] text-slate-500">
-                {new Date().toLocaleTimeString()}
-              </p>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

frontend/src/components/dashboard/TopCountries.jsx DELETED Viewed

@@ -1,26 +0,0 @@
-export default function TopCountries({ events }) {
-  const map = {};
-  events.forEach((e) => {
-    const c = e.src_country || "Unknown";
-    map[c] = (map[c] || 0) + 1;
-  });
-  const sorted = Object.entries(map)
-    .sort((a, b) => b[1] - a[1])
-    .slice(0, 6);
-  return (
-    <div className="cyber-card p-4">
-      <h3 className="text-accent mb-2 font-semibold">Top Source Countries</h3>
-      <ul className="text-sm space-y-1">
-        {sorted.map(([country, count], i) => (
-          <li key={i} className="flex justify-between">
-            <span>{country}</span>
-            <span className="text-cyan-300">{count}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}

frontend/src/components/dashboard/TopIPs.jsx DELETED Viewed

@@ -1,26 +0,0 @@
-export default function TopIPs({ events }) {
-  const map = {};
-  events.forEach((e) => {
-    const ip = e.src_ip || "Unknown";
-    map[ip] = (map[ip] || 0) + 1;
-  });
-  const sorted = Object.entries(map)
-    .sort((a, b) => b[1] - a[1])
-    .slice(0, 6);
-  return (
-    <div className="cyber-card p-4">
-      <h3 className="text-accent mb-2 font-semibold">Top Source IPs</h3>
-      <ul className="text-sm space-y-1">
-        {sorted.map(([ip, count], i) => (
-          <li key={i} className="flex justify-between">
-            <span className="text-slate-300">{ip}</span>
-            <span className="text-cyan-300">{count}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}

frontend/src/components/ui/accordion.jsx DELETED Viewed

@@ -1,43 +0,0 @@
-"use client"
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-import { cn } from "@/lib/utils"
-const Accordion = AccordionPrimitive.Root
-const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
-))
-AccordionItem.displayName = "AccordionItem"
-const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}>
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}>
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

frontend/src/components/ui/badge.jsx DELETED Viewed

@@ -1,34 +0,0 @@
-import * as React from "react"
-import { cva } from "class-variance-authority";
-import { cn } from "@/lib/utils"
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-function Badge({
-  className,
-  variant,
-  ...props
-}) {
-  return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
-}
-export { Badge, badgeVariants }

frontend/src/components/ui/button.jsx DELETED Viewed

@@ -1,47 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva } from "class-variance-authority";
-import { cn } from "@/lib/utils"
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
-  return (
-    <Comp
-      className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
-      {...props} />
-  );
-})
-Button.displayName = "Button"
-export { Button, buttonVariants }

frontend/src/components/ui/card.jsx DELETED Viewed

@@ -1,50 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-const Card = React.forwardRef(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
-    {...props} />
-))
-Card.displayName = "Card"
-const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props} />
-))
-CardHeader.displayName = "CardHeader"
-const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
-    {...props} />
-))
-CardTitle.displayName = "CardTitle"
-const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props} />
-))
-CardDescription.displayName = "CardDescription"
-const CardContent = React.forwardRef(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props} />
-))
-CardFooter.displayName = "CardFooter"
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

frontend/src/components/ui/input.jsx DELETED Viewed

@@ -1,19 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-const Input = React.forwardRef(({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={cn(
-        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      ref={ref}
-      {...props} />
-  );
-})
-Input.displayName = "Input"
-export { Input }

frontend/src/components/ui/scroll-area.jsx DELETED Viewed

@@ -1,38 +0,0 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-import { cn } from "@/lib/utils"
-const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}>
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
-const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}>
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
-export { ScrollArea, ScrollBar }

frontend/src/components/ui/separator.jsx DELETED Viewed

@@ -1,23 +0,0 @@
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-import { cn } from "@/lib/utils"
-const Separator = React.forwardRef((
-  { className, orientation = "horizontal", decorative = true, ...props },
-  ref
-) => (
-  <SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn(
-      "shrink-0 bg-border",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      className
-    )}
-    {...props} />
-))
-Separator.displayName = SeparatorPrimitive.Root.displayName
-export { Separator }

frontend/src/components/ui/switch.jsx DELETED Viewed

@@ -1,24 +0,0 @@
-"use client"
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
-import { cn } from "@/lib/utils"
-const Switch = React.forwardRef(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    )}
-    {...props}
-    ref={ref}>
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-      )} />
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
-export { Switch }