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

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}