codesentry-frontend/README.md

🛡️ CodeSentry Frontend — AI Security Copilot

AMD Developer Hackathon 2026 — Track 1: AI Agents & Agentic Workflows

CodeSentry is an enterprise-grade AI security intelligence platform. Built for the modern agentic workflow, it orchestrates multiple specialized AI agents to scan, analyze, and remediate security threats in real-time.

---

⚡ Why CodeSentry?

In an era of AI-generated code, vulnerabilities move faster than human reviewers. CodeSentry provides:

• Agentic Intelligence: Not just a static scanner. Three specialized agents (Security, Performance, Fix) reason over your code like a senior security team.
• Cinematic Experience: A futuristic SOC-style dashboard designed for high-stakes security monitoring.
• AMD MI300X Live Metrics: Real-time hardware telemetry (GPU Util, VRAM, Temp, Power, Bandwidth) streamed directly to the dashboard.
• CUDA → ROCm Migration Advisor: Scans code for CUDA-specific patterns and provides actionable ROCm migration guidance with an AMD Compatibility Score.
• Privacy-First: Optimized for the AMD ecosystem, ensuring high-performance local inference. Your proprietary code never leaves your network.
• Instant Remediation: Don't just find bugs—fix them. Get PR-ready patches in seconds.

---

✨ Demo Flow

1. Clone this repo
2. Run npm install && npm run dev
3. Open http://localhost:5173
4. Click "Launch Security Scan" — demo runs in mock mode with no backend needed. You will see simulated AMD metrics and migration findings!

---

🏗️ Architecture

Frontend (Vite + React)     Backend (FastAPI + Python)
┌────────────────────┐      ┌──────────────────────────┐
│  Landing Page      │      │  POST /api/scan           │
│  Analysis View  ───┼─SSE──│  GET  /api/scan/stream   │
│  Report Page       │      │                          │
└────────────────────┘      │  Security Agent          │
                            │  Performance Agent       │
                            │  AMD Migration Advisor   │
                            │  Fix Agent               │
                            │  AMD Metrics Collector   │
                            └──────────────────────────┘

🤖 AI Agents & Tools

Component	Responsibilities	Output
Security Agent	SQL injection, hardcoded secrets, unsafe eval, pickle deserialization, weak hashing	CWE-mapped findings with severity
Performance Agent	N+1 queries, memory leaks, GPU inefficiencies, FP32 waste	Optimization suggestions
Fix Agent	Generates before/after patches for all fixable findings	Downloadable diffs
AMD Migration Advisor	Detects CUDA APIs (nvidia-smi, cudnn, etc)	Compatibility score + ROCm fixes
AMD Metrics Collector	Polls rocm-smi every 2s for hardware stats	Real-time GPU telemetry

---

🚀 Quick Start

Frontend Only (Mock Mode — demo-safe)

npm install
npm run dev
# Open http://localhost:5173
# VITE_MOCK_MODE=true by default

Full Stack (Frontend + Backend)

# Terminal 1 — Frontend
npm install && npm run dev

# Terminal 2 — Backend
cd backend
pip install -r requirements.txt
uvicorn main:app --reload --port 8000

# Then set in .env:
# VITE_MOCK_MODE=false

---

🔧 Environment Variables

Variable	Default	Description
VITE_MOCK_MODE	true	Use mock data (no backend needed)
VITE_API_URL	http://localhost:8000	Backend API URL

---

🔒 Privacy-First Design

• Zero data retention — no code stored after session
• Local inference — all analysis on-device via vLLM
• No external API calls — code never leaves your machine
• Session data wiped on completion
• Cryptographic Audit — signed ZDR certificates generated

---

🎨 Tech Stack

Layer	Technology
Frontend	Vite + React 18
Styling	Vanilla CSS with custom design system (index.css)
Charts	Chart.js + react-chartjs-2
Fonts	Syne (headings) + JetBrains Mono (code)
Streaming	Server-Sent Events (SSE)

---

📁 Project Structure

codesentry-frontend/
├── src/
│   ├── components/
│   │   ├── LandingPage.jsx      # Hero + inputs
│   │   ├── AnalysisView.jsx     # Live analysis split-panel
│   │   ├── ReportView.jsx       # Full report + exports
│   │   ├── AgentCard.jsx        # Agent status card
│   │   ├── FindingCard.jsx      # Expandable finding
│   │   ├── SeverityBadge.jsx    # Severity indicator
│   │   ├── SeverityChart.jsx    # Donut chart
│   │   ├── PrivacyCertificate.jsx
│   │   ├── AMDMetricsCard.jsx   # Live GPU telemetry card
│   │   ├── AMDMigrationPanel.jsx # ROCm compatibility report
│   │   └── ParticleBackground.jsx
│   ├── context/
│   │   └── ScanContext.jsx      # Global state + SSE reducers
│   ├── services/
│   │   ├── scanService.js       # SSE client
│   │   └── mockService.js       # Mock replay engine (simulates AMD data)
│   └── index.css                # Cyberpunk design system
├── public/
│   ├── mock_analysis.json       # Demo data payload
│   └── background.png           # Cyberpunk UI background
└── .env                         # Environment config