feat: Phase 7 - Frontend scaffolding and auth (T-023, T-024, T-025)

T-023: Initialize React project - Vite + React 19 + TypeScript scaffold - Tailwind CSS v4 with @tailwindcss/vite plugin - Dependencies: react-router-dom, axios, @tanstack/react-query, lucide-react - Project structure: api/, components/, pages/, context/, types/, hooks/, lib/ T-024: API client and auth context - Axios client with JWT interceptor (auto-attach token, clear on 401) - login() and getMe() API functions - AuthContext: user state, login, logout, isAuthenticated, isLoading - Token persistence via localStorage with hydration on mount - TypeScript types for all backend models T-025: Login page and layout - LoginPage with form, error handling, redirect on success - Layout with sidebar + header + Outlet - Sidebar with role-aware navigation (System only for admin) - ProtectedRoute wrapper with role-based access control - Routes: /login, /dashboard, /techniques, /tests, /system
2026-02-06 16:09:50 +01:00
parent 52d230628d
commit 591b5df250
26 changed files with 3489 additions and 4 deletions
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ Aegis is a comprehensive platform for tracking and managing security coverage ag
 - **Database**: PostgreSQL 15
 - **Object Storage**: MinIO (S3-compatible)
 - **ORM**: SQLAlchemy with Alembic migrations
- **Frontend**: React + TypeScript + Vite (coming soon)
+- **Frontend**: React 19 + TypeScript + Vite + Tailwind CSS v4

 ## Quick Start

@@ -50,11 +50,23 @@ docker exec -w /app aegis-backend-1 alembic upgrade head
 docker exec -w /app aegis-backend-1 python -m app.seed
 ```

-5. Verify the installation:
+5. Start the frontend (requires Node.js 20+ or Docker):
 ```bash
-# Check backend health
+# Option A — with Node.js installed locally
+cd frontend && npm install && npm run dev
+
+# Option B — via Docker
+docker run --rm -v ./frontend:/app -w /app -p 5173:5173 node:20-alpine sh -c "npm run dev"
+```
+
+6. Verify the installation:
+```bash
+# Backend health
 curl http://localhost:8000/health
 # Expected: {"status":"ok"}
+
+# Frontend
+# Open http://localhost:5173 — should show the Aegis login page
 ```

 ### Authentication
@@ -77,6 +89,7 @@ curl http://localhost:8000/api/v1/auth/me \

 | Service  | Port | Description |
 |----------|------|-------------|
+| Frontend | 5173 | React dev server (Vite) |
 | Backend  | 8000 | FastAPI REST API |
 | PostgreSQL | 5433 | Database (mapped to 5433 to avoid conflicts) |
 | MinIO API | 9000 | S3-compatible object storage |
@@ -184,7 +197,34 @@ Aegis/
 │           ├── status_service.py  # Recalculate technique status from tests
 │           ├── mitre_sync_service.py  # MITRE ATT&CK sync via TAXII / GitHub
 │           └── intel_service.py   # Automated intel scan via RSS feeds
-└── frontend/                   # React frontend (coming soon)
+└── frontend/                   # React + TypeScript frontend
+    ├── index.html
+    ├── package.json
+    ├── tsconfig.json
+    ├── vite.config.ts
+    └── src/
+        ├── main.tsx              # App entry point
+        ├── App.tsx               # Route definitions
+        ├── index.css             # Tailwind CSS entry
+        ├── api/                  # Axios clients
+        │   ├── client.ts         # Base axios instance with JWT interceptor
+        │   └── auth.ts           # login(), getMe()
+        ├── context/
+        │   └── AuthContext.tsx    # Auth state: user, login, logout, isLoading
+        ├── components/
+        │   ├── Layout.tsx        # Sidebar + header + <Outlet/>
+        │   ├── Sidebar.tsx       # Nav links (role-aware)
+        │   └── ProtectedRoute.tsx
+        ├── pages/
+        │   ├── LoginPage.tsx
+        │   ├── DashboardPage.tsx
+        │   ├── TechniquesPage.tsx
+        │   ├── TestsPage.tsx
+        │   └── SystemPage.tsx
+        ├── types/
+        │   └── models.ts         # TS interfaces matching backend schemas
+        ├── hooks/
+        └── lib/
 ```

 ## Database Schema
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+*.local
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Aegis — MITRE ATT&CK Coverage</title>
+  </head>
+  <body class="bg-gray-950 text-gray-100">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "aegis-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.20",
+    "axios": "^1.13.4",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.3",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  }
+}
--- a/frontend/public/vite.svg
+++ b/frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFBD4F"></stop><stop offset="100%" stop-color="#FF9640"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,41 @@
+import { Routes, Route, Navigate } from "react-router-dom";
+import LoginPage from "./pages/LoginPage";
+import DashboardPage from "./pages/DashboardPage";
+import TechniquesPage from "./pages/TechniquesPage";
+import TestsPage from "./pages/TestsPage";
+import SystemPage from "./pages/SystemPage";
+import Layout from "./components/Layout";
+import ProtectedRoute from "./components/ProtectedRoute";
+
+export default function App() {
+  return (
+    <Routes>
+      {/* Public */}
+      <Route path="/login" element={<LoginPage />} />
+
+      {/* Protected — wrapped in shared Layout */}
+      <Route
+        element={
+          <ProtectedRoute>
+            <Layout />
+          </ProtectedRoute>
+        }
+      >
+        <Route path="/dashboard" element={<DashboardPage />} />
+        <Route path="/techniques" element={<TechniquesPage />} />
+        <Route path="/tests" element={<TestsPage />} />
+        <Route
+          path="/system"
+          element={
+            <ProtectedRoute roles={["admin"]}>
+              <SystemPage />
+            </ProtectedRoute>
+          }
+        />
+      </Route>
+
+      {/* Catch-all → dashboard */}
+      <Route path="*" element={<Navigate to="/dashboard" replace />} />
+    </Routes>
+  );
+}
--- a/frontend/src/api/auth.ts
+++ b/frontend/src/api/auth.ts
@@ -0,0 +1,29 @@
+import client from "./client";
+import type { User } from "../types/models";
+
+interface TokenResponse {
+  access_token: string;
+  token_type: string;
+}
+
+/** Authenticate and return the access token. */
+export async function login(
+  username: string,
+  password: string,
+): Promise<string> {
+  const params = new URLSearchParams();
+  params.append("username", username);
+  params.append("password", password);
+
+  const { data } = await client.post<TokenResponse>("/auth/login", params, {
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+  });
+
+  return data.access_token;
+}
+
+/** Fetch the currently authenticated user profile. */
+export async function getMe(): Promise<User> {
+  const { data } = await client.get<User>("/auth/me");
+  return data;
+}
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,28 @@
+import axios from "axios";
+
+const client = axios.create({
+  baseURL: "http://localhost:8000/api/v1",
+  headers: { "Content-Type": "application/json" },
+});
+
+// Attach the JWT token on every request (if present)
+client.interceptors.request.use((config) => {
+  const token = localStorage.getItem("token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// On 401, clear token so the UI can redirect to login
+client.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem("token");
+    }
+    return Promise.reject(error);
+  },
+);
+
+export default client;
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -0,0 +1,33 @@
+import { Outlet } from "react-router-dom";
+import { LogOut } from "lucide-react";
+import { useAuth } from "../context/AuthContext";
+import Sidebar from "./Sidebar";
+
+export default function Layout() {
+  const { user, logout } = useAuth();
+
+  return (
+    <div className="flex h-screen bg-gray-950 text-gray-100">
+      <Sidebar />
+
+      <div className="flex flex-1 flex-col overflow-hidden">
+        {/* Header */}
+        <header className="flex h-16 items-center justify-end gap-4 border-b border-gray-800 bg-gray-900 px-6">
+          <span className="text-sm text-gray-300">{user?.username}</span>
+          <button
+            onClick={logout}
+            className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-gray-400 transition-colors hover:bg-gray-800 hover:text-white"
+          >
+            <LogOut className="h-4 w-4" />
+            Logout
+          </button>
+        </header>
+
+        {/* Main content */}
+        <main className="flex-1 overflow-y-auto p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/ProtectedRoute.tsx
+++ b/frontend/src/components/ProtectedRoute.tsx
@@ -0,0 +1,33 @@
+import { Navigate } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+
+interface Props {
+  children: React.ReactNode;
+  roles?: string[];
+}
+
+/**
+ * Wrapper that redirects to `/login` when the user is not authenticated.
+ * Optionally restricts access to specific roles (admins always pass).
+ */
+export default function ProtectedRoute({ children, roles }: Props) {
+  const { isAuthenticated, isLoading, user } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-gray-950">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-cyan-500 border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  if (roles && user && !roles.includes(user.role) && user.role !== "admin") {
+    return <Navigate to="/dashboard" replace />;
+  }
+
+  return <>{children}</>;
+}
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -0,0 +1,64 @@
+import { NavLink } from "react-router-dom";
+import {
+  LayoutDashboard,
+  Shield,
+  FlaskConical,
+  Settings,
+} from "lucide-react";
+import { useAuth } from "../context/AuthContext";
+
+const baseLinks = [
+  { to: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { to: "/techniques", label: "Techniques", icon: Shield },
+  { to: "/tests", label: "Tests", icon: FlaskConical },
+];
+
+const adminLinks = [
+  { to: "/system", label: "System", icon: Settings },
+];
+
+export default function Sidebar() {
+  const { user } = useAuth();
+  const isAdmin = user?.role === "admin";
+
+  const links = isAdmin ? [...baseLinks, ...adminLinks] : baseLinks;
+
+  return (
+    <aside className="flex h-screen w-60 flex-col border-r border-gray-800 bg-gray-900">
+      {/* Logo */}
+      <div className="flex h-16 items-center gap-2 px-5">
+        <Shield className="h-7 w-7 text-cyan-400" />
+        <span className="text-lg font-bold tracking-wide text-white">
+          Aegis
+        </span>
+      </div>
+
+      {/* Nav links */}
+      <nav className="flex-1 space-y-1 px-3 py-4">
+        {links.map(({ to, label, icon: Icon }) => (
+          <NavLink
+            key={to}
+            to={to}
+            className={({ isActive }) =>
+              `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
+                isActive
+                  ? "bg-cyan-500/10 text-cyan-400"
+                  : "text-gray-400 hover:bg-gray-800 hover:text-gray-200"
+              }`
+            }
+          >
+            <Icon className="h-5 w-5" />
+            {label}
+          </NavLink>
+        ))}
+      </nav>
+
+      {/* Footer */}
+      <div className="border-t border-gray-800 px-5 py-4">
+        <p className="truncate text-xs text-gray-500">
+          {user?.role ?? "—"}
+        </p>
+      </div>
+    </aside>
+  );
+}
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -0,0 +1,77 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react";
+import { login as apiLogin, getMe } from "../api/auth";
+import type { User } from "../types/models";
+
+/* ── Context shape ────────────────────────────────────────────────── */
+
+interface AuthState {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  login: (username: string, password: string) => Promise<void>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthState | undefined>(undefined);
+
+/* ── Provider ─────────────────────────────────────────────────────── */
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // On mount — check for a persisted token and hydrate the user
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+      setIsLoading(false);
+      return;
+    }
+
+    getMe()
+      .then(setUser)
+      .catch(() => localStorage.removeItem("token"))
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  const login = useCallback(async (username: string, password: string) => {
+    const token = await apiLogin(username, password);
+    localStorage.setItem("token", token);
+    const me = await getMe();
+    setUser(me);
+  }, []);
+
+  const logout = useCallback(() => {
+    localStorage.removeItem("token");
+    setUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isAuthenticated: user !== null,
+        isLoading,
+        login,
+        logout,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+/* ── Hook ─────────────────────────────────────────────────────────── */
+
+export function useAuth(): AuthState {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used within <AuthProvider>");
+  return ctx;
+}
--- a/frontend/src/hooks/.gitkeep
+++ b/frontend/src/hooks/.gitkeep
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1 @@
+@import "tailwindcss";
--- a/frontend/src/lib/.gitkeep
+++ b/frontend/src/lib/.gitkeep
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,25 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AuthProvider } from "./context/AuthContext";
+import App from "./App";
+import "./index.css";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { retry: 1, refetchOnWindowFocus: false },
+  },
+});
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <AuthProvider>
+          <App />
+        </AuthProvider>
+      </BrowserRouter>
+    </QueryClientProvider>
+  </StrictMode>,
+);
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -0,0 +1,15 @@
+import { Shield } from "lucide-react";
+
+export default function DashboardPage() {
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold text-white">Dashboard</h1>
+      <div className="flex items-center gap-3 rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <Shield className="h-8 w-8 text-cyan-400" />
+        <p className="text-gray-300">
+          Coverage metrics will appear here.
+        </p>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,106 @@
+import { useState, type FormEvent } from "react";
+import { useNavigate } from "react-router-dom";
+import { Shield } from "lucide-react";
+import { useAuth } from "../context/AuthContext";
+
+export default function LoginPage() {
+  const { login, isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // If already logged in, redirect immediately
+  if (isAuthenticated) {
+    navigate("/dashboard", { replace: true });
+    return null;
+  }
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      await login(username, password);
+      navigate("/dashboard", { replace: true });
+    } catch {
+      setError("Invalid username or password");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-950 px-4">
+      <div className="w-full max-w-sm space-y-8">
+        {/* Logo */}
+        <div className="flex flex-col items-center gap-2">
+          <Shield className="h-12 w-12 text-cyan-400" />
+          <h1 className="text-2xl font-bold tracking-wide text-white">
+            Aegis
+          </h1>
+          <p className="text-sm text-gray-400">
+            MITRE ATT&CK Coverage Platform
+          </p>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div>
+            <label
+              htmlFor="username"
+              className="mb-1.5 block text-sm font-medium text-gray-300"
+            >
+              Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              required
+              autoFocus
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
+              placeholder="admin"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="password"
+              className="mb-1.5 block text-sm font-medium text-gray-300"
+            >
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
+              placeholder="••••••••"
+            />
+          </div>
+
+          {error && (
+            <p className="rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-400">
+              {error}
+            </p>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded-lg bg-cyan-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-cyan-500 disabled:opacity-50"
+          >
+            {loading ? "Signing in…" : "Sign in"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/SystemPage.tsx
+++ b/frontend/src/pages/SystemPage.tsx
@@ -0,0 +1,8 @@
+export default function SystemPage() {
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold text-white">System</h1>
+      <p className="text-gray-400">System administration panel coming soon.</p>
+    </div>
+  );
+}
--- a/frontend/src/pages/TechniquesPage.tsx
+++ b/frontend/src/pages/TechniquesPage.tsx
@@ -0,0 +1,8 @@
+export default function TechniquesPage() {
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold text-white">Techniques</h1>
+      <p className="text-gray-400">MITRE ATT&CK technique listing coming soon.</p>
+    </div>
+  );
+}
--- a/frontend/src/pages/TestsPage.tsx
+++ b/frontend/src/pages/TestsPage.tsx
@@ -0,0 +1,8 @@
+export default function TestsPage() {
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold text-white">Tests</h1>
+      <p className="text-gray-400">Security test management coming soon.</p>
+    </div>
+  );
+}
--- a/frontend/src/types/models.ts
+++ b/frontend/src/types/models.ts
@@ -0,0 +1,91 @@
+/* ── Shared TypeScript types matching the backend Pydantic schemas ── */
+
+export interface User {
+  id: string;
+  username: string;
+  role: string;
+}
+
+export interface Technique {
+  id: string;
+  mitre_id: string;
+  name: string;
+  description: string | null;
+  tactic: string | null;
+  platforms: string[];
+  mitre_version: string | null;
+  mitre_last_modified: string | null;
+  is_subtechnique: boolean;
+  parent_mitre_id: string | null;
+  status_global: TechniqueStatus;
+  review_required: boolean;
+  last_review_date: string | null;
+}
+
+export type TechniqueStatus =
+  | "not_evaluated"
+  | "in_progress"
+  | "validated"
+  | "partial"
+  | "not_covered"
+  | "review_required";
+
+export interface Test {
+  id: string;
+  technique_id: string;
+  name: string;
+  description: string | null;
+  platform: string | null;
+  procedure_text: string | null;
+  tool_used: string | null;
+  execution_date: string | null;
+  created_by: string | null;
+  result: TestResult | null;
+  state: TestState;
+  validated_by: string | null;
+  validated_at: string | null;
+  created_at: string;
+}
+
+export type TestState = "draft" | "in_review" | "validated" | "rejected";
+export type TestResult = "detected" | "not_detected" | "partially_detected";
+
+export interface Evidence {
+  id: string;
+  test_id: string;
+  file_name: string;
+  file_path: string;
+  sha256_hash: string;
+  uploaded_by: string | null;
+  uploaded_at: string;
+}
+
+export interface IntelItem {
+  id: string;
+  technique_id: string | null;
+  url: string;
+  title: string | null;
+  source: string | null;
+  detected_at: string;
+  reviewed: boolean;
+}
+
+export interface CoverageSummary {
+  total_techniques: number;
+  validated: number;
+  partial: number;
+  not_covered: number;
+  in_progress: number;
+  not_evaluated: number;
+  coverage_percentage: number;
+}
+
+export interface TacticCoverage {
+  tactic: string;
+  total: number;
+  validated: number;
+  partial: number;
+  not_covered: number;
+  not_evaluated: number;
+  in_progress: number;
+}
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    host: "0.0.0.0",
+    port: 5173,
+  },
+});
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFBD4F"></stop><stop offset="100%" stop-color="#FF9640"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>