[feat]:API cors to UI

QUICK_START.md

@@ -0,0 +1,72 @@
+# 🚀 ProcSentinel Web UI - Quick Start
+
+## One-Command Setup
+
+### 1. Start Backend API
+```bash
+python3 api_server.py
+```
+Runs on: http://localhost:5000
+
+### 2. Start Frontend (New Terminal)
+```bash
+cd frontend
+npm run dev
+```
+Runs on: http://localhost:5173
+
+### 3. Login
+- Open: http://localhost:5173
+- Username: `admin`
+- Password: `admin123`
+
+## ✨ Features
+
+- 🎨 Color-coded threats (🟢 Green, 🟡 Yellow, 🔴 Red)
+- 📊 Real-time monitoring dashboard
+- 🔐 JWT authentication
+- 🔄 Auto-refresh (3s/5s/10s/30s)
+- 📱 Responsive design
+
+## 📁 Files Created
+
+```
+procSentinel/
+├── api_server.py           ← Backend Flask API
+├── frontend/               ← React + TypeScript UI
+│   ├── src/
+│   │   ├── App.tsx
+│   │   ├── components/
+│   │   │   ├── Login.tsx
+│   │   │   ├── Dashboard.tsx
+│   │   │   ├── StatsCards.tsx
+│   │   │   ├── ProcessTable.tsx
+│   │   │   └── ProcessDetails.tsx
+│   │   └── ...
+│   └── package.json
+├── WEB_UI_SETUP.md        ← Detailed docs
+└── QUICK_START.md         ← This file
+```
+
+## 🎨 Color Scheme
+
+| Threat Level | Color | Score Range |
+|--------------|-------|-------------|
+| Normal       | 🟢 Green | < 5 |
+| Warning      | 🟡 Yellow | 5-8 |
+| Critical     | 🔴 Red | ≥ 8 |
+
+## 🔧 Customize
+
+**Change API URL**: `frontend/src/components/Dashboard.tsx` (line 43)  
+**Add Users**: `api_server.py` (lines 25-27)  
+**Change Colors**: `frontend/src/App.css`
+
+## 📝 Notes
+
+- Backend MUST be running for frontend to work
+- Default port 5000 (backend) and 5173 (frontend)
+- Data refreshes every 5 seconds by default
+- Uses process monitoring from existing ProcWatch engine
+
+For full documentation, see `WEB_UI_SETUP.md`

README.md

@@ -54,30 +54,7 @@ This will install the `procwatch` command-line tool.
 
 ## Usage
 
-Procwatch has three main commands: `scan`, `train`, and `api`.
-
-### REST API & Web UI
-
-Start the API server for programmatic access and web interface:
-
-```bash
-procwatch api
-```
-
-Then open `webui.html` in your browser for a modern web interface, or access the API directly:
-
-```bash
-# Get system stats
-curl http://localhost:8080/api/stats
-
-# Get suspicious processes
-curl http://localhost:8080/api/suspicious
-
-# Get all processes
-curl http://localhost:8080/api/processes
-```
-
-See [API_README.md](API_README.md) for complete API documentation.
+Procwatch has two main commands: `scan` and `train`.
 
 ### Scanning
 

UI_OVERVIEW.txt

@@ -0,0 +1,170 @@
+╔══════════════════════════════════════════════════════════════════════════════╗
+║                   🎨 ProcSentinel Web UI - Complete!                        ║
+╚══════════════════════════════════════════════════════════════════════════════╝
+
+✅ CREATED FILES:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📁 Backend API:
+   └─ api_server.py (238 lines)
+      • Flask REST API with JWT authentication
+      • Endpoints: /login, /processes, /stats, /health
+      • Integrates with existing ProcWatch engine
+
+📁 Frontend (React + TypeScript):
+   frontend/
+   ├─ src/
+   │  ├─ App.tsx                    (Main app with auth routing)
+   │  ├─ App.css                    (Global styles & color system)
+   │  ├─ index.css                  (Base styles)
+   │  └─ components/
+   │     ├─ Login.tsx               (Authentication page)
+   │     ├─ Login.css               (Login styling)
+   │     ├─ Dashboard.tsx           (Main monitoring dashboard)
+   │     ├─ Dashboard.css           (Dashboard styling)
+   │     ├─ StatsCards.tsx          (Stats overview cards)
+   │     ├─ StatsCards.css          (Stats styling)
+   │     ├─ ProcessTable.tsx        (Process list table)
+   │     ├─ ProcessTable.css        (Table styling)
+   │     ├─ ProcessDetails.tsx      (Detail modal)
+   │     └─ ProcessDetails.css      (Modal styling)
+   └─ package.json                  (Dependencies)
+
+📁 Documentation:
+   ├─ WEB_UI_SETUP.md              (Full setup guide - 180 lines)
+   ├─ QUICK_START.md               (Quick reference)
+   └─ frontend/README.md           (Frontend docs)
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+🎨 UI FEATURES:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                          🔐 LOGIN PAGE                                      │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  • Animated logo with pulse effect                                          │
+│  • Modern glass-morphism design                                             │
+│  • Error handling with red alerts                                           │
+│  • JWT token authentication                                                 │
+│  • Remember me (localStorage)                                               │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                       📊 DASHBOARD - STATS CARDS                            │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  ┏━━━━━━━━━━━━┓  ┏━━━━━━━━━━━━┓  ┏━━━━━━━━━━━━┓  ┏━━━━━━━━━━━━┓          │
+│  ┃ 📊 Total   ┃  ┃ ✅ Normal  ┃  ┃ ⚠️ Warning ┃  ┃ 🚨 Critical┃          │
+│  ┃    142     ┃  ┃    135     ┃  ┃     5      ┃  ┃     2      ┃          │
+│  ┗━━━━━━━━━━━━┛  ┗━━━━━━━━━━━━┛  ┗━━━━━━━━━━━━┛  ┗━━━━━━━━━━━━┛          │
+│   Blue          Green           Yellow           Red (blinking)             │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                      📋 PROCESS MONITORING TABLE                            │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  ┌───────┬──────┬──────────┬────────┬─────────┬──────┬────────┬──────────┐│
+│  │ Score │ PID  │   Name   │  User  │ Parent  │ CPU% │ Memory │  Status  ││
+│  ├───────┼──────┼──────────┼────────┼─────────┼──────┼────────┼──────────┤│
+│  │  8.5  │ 1234 │ malware  │ root   │ systemd │ 45.2 │ 512 MB │ CRITICAL ││
+│  │  6.2  │ 5678 │ suspicious│ user  │ bash    │ 12.1 │ 128 MB │ WARNING  ││
+│  │  4.8  │ 9012 │ normal   │ user   │ init    │  2.5 │  64 MB │ NORMAL   ││
+│  └───────┴──────┴──────────┴────────┴─────────┴──────┴────────┴──────────┘│
+│                                                                              │
+│  Features:                                                                   │
+│  • Click any row to see full details                                        │
+│  • Sort by any column (click header)                                        │
+│  • Color-coded scores (🟢🟡🔴)                                              │
+│  • Hover effects for interactivity                                          │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                      🔍 PROCESS DETAILS MODAL                               │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓  │
+│  ┃  malware (PID: 1234)                                         [X]    ┃  │
+│  ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫  │
+│  ┃  Overview:                                                           ┃  │
+│  ┃  • PID: 1234  • PPID: 1  • User: root  • Parent: systemd            ┃  │
+│  ┃                                                                       ┃  │
+│  ┃  Threat Scores:                                                      ┃  │
+│  ┃  ┌─────────────────┬─────────────────┬─────────────────┐            ┃  │
+│  ┃  │ Total: 8.5 (🔴) │ Heuristic: 6.5  │ ML Score: 2.0   │            ┃  │
+│  ┃  └─────────────────┴─────────────────┴─────────────────┘            ┃  │
+│  ┃                                                                       ┃  │
+│  ┃  Resource Usage:                                                     ┃  │
+│  ┃  CPU:  [████████████████████░░░░░░░░░░] 45.2%  🔴 High              ┃  │
+│  ┃  MEM:  [████████░░░░░░░░░░░░░░░░░░░░░] 512 MB                       ┃  │
+│  ┃                                                                       ┃  │
+│  ┃  Detection Reasons:                                                  ┃  │
+│  ┃  • [3.5] Suspicious network activity                                 ┃  │
+│  ┃  • [2.0] High CPU usage                                              ┃  │
+│  ┃  • [1.0] Unusual parent process                                      ┃  │
+│  ┃                                                                       ┃  │
+│  ┃  Command Line:                                                       ┃  │
+│  ┃  /usr/bin/malware --stealth --persist                                ┃  │
+│  ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛  │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+🎨 COLOR GRADING SYSTEM:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Score Range  │ Color  │ Badge    │ Meaning          │ Action
+━━━━━━━━━━━━━┼━━━━━━━━┼━━━━━━━━━━┼━━━━━━━━━━━━━━━━━━┼━━━━━━━━━━━━━━━━━━━
+< 5.0        │ 🟢     │ Normal   │ Safe process     │ Monitor
+5.0 - 7.9    │ 🟡     │ Warning  │ Suspicious       │ Investigate
+≥ 8.0        │ 🔴     │ Critical │ High threat      │ Take action!
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+🚀 TO RUN:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Terminal 1 (Backend):
+$ python3 api_server.py
+
+Terminal 2 (Frontend):
+$ cd frontend && npm run dev
+
+Browser:
+→ http://localhost:5173
+→ Login: admin / admin123
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✨ TECHNOLOGIES USED:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Frontend:              Backend:              Core:
+• React 18             • Flask               • ProcWatch engine
+• TypeScript           • Flask-CORS          • Heuristics
+• Vite                 • PyJWT               • ML scoring
+• Axios                • Python 3            • Network monitoring
+• CSS3 (animations)
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+🎯 KEY FEATURES IMPLEMENTED:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✅ Clean, modern UI with dark theme
+✅ Color-coded threat levels (green/yellow/red)
+✅ JWT authentication system
+✅ Real-time process monitoring
+✅ Auto-refresh (3s/5s/10s/30s)
+✅ Sortable data table
+✅ Detailed process inspection
+✅ Resource usage visualization
+✅ Responsive design
+✅ No changes to core ProcWatch engine
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📚 Documentation:
+   • QUICK_START.md       - Quick reference guide
+   • WEB_UI_SETUP.md      - Full setup documentation
+   • frontend/README.md   - Frontend-specific docs
+
+Ready to use! 🎉