feat: build Next.js frontend design system and upload flow

frontend/src/app/globals.css

@@ -1,26 +1,316 @@
-@import "tailwindcss";
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --bg-primary: #0a0a0f;
+  --bg-secondary: #111118;
+  --bg-card: #16161f;
+  --bg-card-hover: #1c1c28;
+  --bg-glass: rgba(22, 22, 31, 0.8);
+  --border: rgba(255, 255, 255, 0.06);
+  --border-strong: rgba(255, 255, 255, 0.12);
+
+  --accent: #6c63ff;
+  --accent-light: #8b85ff;
+  --accent-dim: rgba(108, 99, 255, 0.15);
+  --accent-glow: rgba(108, 99, 255, 0.3);
+
+  --green: #22c55e;
+  --green-dim: rgba(34, 197, 94, 0.15);
+  --yellow: #eab308;
+  --yellow-dim: rgba(234, 179, 8, 0.15);
+  --red: #ef4444;
+  --red-dim: rgba(239, 68, 68, 0.15);
+  --blue: #3b82f6;
+  --blue-dim: rgba(59, 130, 246, 0.15);
+
+  --text-primary: #f0f0f8;
+  --text-secondary: #9494b0;
+  --text-muted: #5c5c78;
+
+  --radius: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.6);
+  --shadow-accent: 0 0 40px rgba(108, 99, 255, 0.15);
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { font-size: 16px; scroll-behavior: smooth; }
+
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+a { color: inherit; text-decoration: none; }
+
+.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
+
+.page { min-height: 100vh; padding: 80px 0 48px; }
+
+/* NAV */
+.nav {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+  background: rgba(10, 10, 15, 0.85);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+  height: 64px;
+}
+.nav-inner {
+  display: flex; align-items: center; justify-content: space-between;
+  height: 64px;
+}
+.nav-logo {
+  font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em;
+  background: linear-gradient(135deg, var(--accent-light), #a78bfa);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
 }
+.nav-links { display: flex; gap: 8px; }
+.nav-link {
+  padding: 6px 14px; border-radius: 8px; font-size: 0.875rem;
+  color: var(--text-secondary); transition: all 0.2s;
+}
+.nav-link:hover { background: var(--bg-card); color: var(--text-primary); }
+.nav-link.active { background: var(--accent-dim); color: var(--accent-light); }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+/* CARDS */
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
+.card-glass {
+  background: var(--bg-glass);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+}
+
+/* BUTTONS */
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 10px 20px; border-radius: 10px; font-size: 0.875rem;
+  font-weight: 500; border: none; cursor: pointer; transition: all 0.2s;
+  font-family: inherit; white-space: nowrap;
+}
+.btn-primary {
+  background: linear-gradient(135deg, var(--accent), #7c3aed);
+  color: #fff;
+  box-shadow: 0 0 20px var(--accent-glow);
+}
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 24px var(--accent-glow); }
+.btn-secondary {
+  background: var(--bg-card); border: 1px solid var(--border-strong);
+  color: var(--text-primary);
+}
+.btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--accent); }
+.btn-ghost { background: transparent; color: var(--text-secondary); }
+.btn-ghost:hover { background: var(--bg-card); color: var(--text-primary); }
+.btn-sm { padding: 6px 12px; font-size: 0.8125rem; }
+.btn-lg { padding: 14px 28px; font-size: 1rem; }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+
+/* BADGES */
+.badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 10px; border-radius: 99px; font-size: 0.75rem; font-weight: 500;
+}
+.badge-green { background: var(--green-dim); color: var(--green); }
+.badge-yellow { background: var(--yellow-dim); color: var(--yellow); }
+.badge-red { background: var(--red-dim); color: var(--red); }
+.badge-blue { background: var(--blue-dim); color: var(--blue); }
+.badge-purple { background: var(--accent-dim); color: var(--accent-light); }
+
+/* INPUTS */
+.input, .textarea {
+  width: 100%; background: var(--bg-secondary); border: 1px solid var(--border-strong);
+  border-radius: 10px; color: var(--text-primary); font-family: inherit;
+  font-size: 0.9rem; padding: 12px 16px; transition: border-color 0.2s, box-shadow 0.2s;
+  outline: none;
+}
+.input:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
+.textarea { resize: vertical; min-height: 120px; }
+.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
+
+/* FORM */
+.form-group { display: flex; flex-direction: column; gap: 6px; }
+.label { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); }
+
+/* SCORE BAR */
+.score-bar-wrap { display: flex; flex-direction: column; gap: 6px; }
+.score-bar-row { display: flex; align-items: center; gap: 10px; }
+.score-bar-label { font-size: 0.75rem; color: var(--text-secondary); width: 70px; flex-shrink: 0; }
+.score-bar-track { flex: 1; height: 6px; background: var(--bg-secondary); border-radius: 99px; overflow: hidden; }
+.score-bar-fill { height: 100%; border-radius: 99px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
+.score-bar-pct { font-size: 0.75rem; color: var(--text-muted); width: 36px; text-align: right; flex-shrink: 0; }
+
+/* SLIDERS */
+.slider { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 99px; background: var(--bg-secondary); outline: none; }
+.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 8px var(--accent-glow); transition: transform 0.2s; }
+.slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
+
+/* CHIP */
+.chip {
+  display: inline-flex; align-items: center; padding: 3px 10px;
+  border-radius: 6px; font-size: 0.7rem; font-weight: 500;
+  background: var(--bg-secondary); border: 1px solid var(--border);
+  color: var(--text-secondary); white-space: nowrap;
+}
+
+/* HERO */
+.hero {
+  text-align: center; padding: 56px 0 40px;
+}
+.hero-eyebrow {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 14px; border-radius: 99px;
+  background: var(--accent-dim); border: 1px solid var(--accent-glow);
+  color: var(--accent-light); font-size: 0.8rem; font-weight: 500; margin-bottom: 20px;
+}
+.hero-title {
+  font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.04em;
+  line-height: 1.1; margin-bottom: 16px;
+}
+.hero-title span {
+  background: linear-gradient(135deg, var(--accent-light), #a78bfa, #38bdf8);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+}
+.hero-sub { font-size: 1.05rem; color: var(--text-secondary); max-width: 540px; margin: 0 auto 32px; }
+
+/* GRID */
+.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+
+/* STAT CARD */
+.stat-card { padding: 20px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); }
+.stat-value { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; }
+.stat-label { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 2px; }
+
+/* UPLOAD ZONE */
+.upload-zone {
+  border: 2px dashed var(--border-strong); border-radius: var(--radius-xl);
+  padding: 40px; text-align: center; cursor: pointer; transition: all 0.25s;
+  background: var(--bg-secondary);
+}
+.upload-zone:hover, .upload-zone.drag-over {
+  border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 32px var(--accent-dim);
+}
+.upload-icon { font-size: 2.5rem; margin-bottom: 12px; }
+.upload-title { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
+.upload-sub { font-size: 0.8125rem; color: var(--text-secondary); }
+
+/* RANK BADGE */
+.rank-badge {
+  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
+  font-size: 0.875rem; font-weight: 700; flex-shrink: 0;
+}
+.rank-1 { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 0 16px rgba(245,158,11,0.4); }
+.rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; }
+.rank-3 { background: linear-gradient(135deg, #cd7c39, #92400e); color: #fff; }
+.rank-other { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); }
+
+/* CANDIDATE CARD */
+.candidate-card {
+  display: flex; flex-direction: column; gap: 14px;
+  padding: 20px; border-radius: var(--radius-lg);
+  background: var(--bg-card); border: 1px solid var(--border);
+  cursor: pointer; transition: all 0.2s;
+}
+.candidate-card:hover { border-color: var(--accent); box-shadow: 0 0 24px var(--accent-dim); transform: translateY(-2px); }
+.candidate-card-top { display: flex; align-items: center; gap: 12px; }
+.candidate-card-info { flex: 1; min-width: 0; }
+.candidate-name { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.candidate-meta { font-size: 0.8rem; color: var(--text-secondary); display: flex; gap: 8px; flex-wrap: wrap; }
+
+/* SCORE PILL */
+.score-pill {
+  display: flex; align-items: center; justify-content: center; flex-direction: column;
+  min-width: 56px; padding: 6px 10px; border-radius: 10px;
+  background: var(--accent-dim); border: 1px solid var(--accent-glow);
+}
+.score-pill-value { font-size: 1.1rem; font-weight: 700; color: var(--accent-light); line-height: 1; }
+.score-pill-label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+
+/* GAP ITEM */
+.gap-item {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 10px 14px; border-radius: 10px;
+  background: var(--bg-secondary); border: 1px solid var(--border);
+}
+.gap-icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
+.gap-type { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+.gap-detail { font-size: 0.8125rem; color: var(--text-secondary); }
+
+/* EXPLANATION BLOCK */
+.explanation-block {
+  padding: 20px; border-radius: var(--radius-lg);
+  background: linear-gradient(135deg, rgba(108,99,255,0.05), rgba(167,139,250,0.05));
+  border: 1px solid var(--accent-glow);
+}
+.explanation-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.75; white-space: pre-wrap; }
+
+/* PAGE HEADER */
+.page-header { margin-bottom: 32px; }
+.page-title { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 6px; }
+.page-subtitle { color: var(--text-secondary); font-size: 0.9rem; }
+
+/* WEIGHT SLIDER PANEL */
+.weight-panel { padding: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
+.weight-row { display: flex; flex-direction: column; gap: 6px; }
+.weight-label-row { display: flex; justify-content: space-between; align-items: center; }
+.weight-key { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); }
+.weight-val { font-size: 0.8125rem; font-weight: 600; color: var(--accent-light); }
+
+/* TABS */
+.tabs { display: flex; gap: 4px; background: var(--bg-secondary); padding: 4px; border-radius: 10px; }
+.tab { padding: 8px 14px; border-radius: 8px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; border: none; background: none; font-family: inherit; }
+.tab.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow); }
+.tab:hover:not(.active) { color: var(--text-primary); }
+
+/* LOADING */
+.spinner { width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.skeleton { background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; }
+@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+
+/* TRAJECTORY */
+.trajectory-bar { display: flex; align-items: center; gap: 10px; }
+.trajectory-track { flex: 1; height: 8px; border-radius: 99px; background: var(--bg-secondary); overflow: hidden; }
+.trajectory-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
+.trajectory-label { font-size: 0.75rem; color: var(--text-secondary); width: 80px; }
+.trajectory-val { font-size: 0.75rem; font-weight: 600; color: var(--accent-light); width: 36px; text-align: right; }
+
+/* DIVIDER */
+.divider { height: 1px; background: var(--border); margin: 24px 0; }
+
+/* TOAST */
+.toast {
+  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
+  padding: 12px 20px; border-radius: 12px; min-width: 280px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  box-shadow: var(--shadow-lg); animation: slide-up 0.3s ease;
+}
+@keyframes slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+.toast-success { border-color: var(--green); }
+.toast-error { border-color: var(--red); }
+
+/* SCROLLBAR */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: var(--bg-primary); }
+::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* RESPONSIVE */
+@media (max-width: 768px) {
+  .grid-2, .grid-3 { grid-template-columns: 1fr; }
+  .hero-title { font-size: 1.875rem; }
 }

frontend/src/app/layout.tsx

@@ -1,33 +1,27 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "TalentPulse — AI Candidate Matching",
+  description: "Two-stage AI pipeline: vector retrieval + cross-encoder reranking + LLM explanations for recruiting at scale.",
+  keywords: ["recruiting", "AI matching", "candidate search", "talent pipeline"],
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="en">
+      <body>
+        <nav className="nav">
+          <div className="container nav-inner">
+            <a href="/" className="nav-logo">⚡ TalentPulse</a>
+            <div className="nav-links">
+              <a href="/" className="nav-link">Dashboard</a>
+              <a href="/jds" className="nav-link">Job Descriptions</a>
+            </div>
+          </div>
+        </nav>
+        {children}
+      </body>
     </html>
   );
 }

frontend/src/app/page.tsx

@@ -1,65 +1,211 @@
-import Image from "next/image";
+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { api, type JD } from "../lib/api";
+
+export default function HomePage() {
+  const [jds, setJDs] = useState<JD[]>([]);
+  const [candidateCount, setCandidateCount] = useState<number | null>(null);
+  const [jdTitle, setJDTitle] = useState("");
+  const [jdText, setJDText] = useState("");
+  const [uploading, setUploading] = useState(false);
+  const [creatingJD, setCreatingJD] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const [toast, setToast] = useState<{ msg: string; type: "success" | "error" } | null>(null);
+  const [taskId, setTaskId] = useState<string | null>(null);
+  const [taskStatus, setTaskStatus] = useState<string | null>(null);
+
+  const showToast = (msg: string, type: "success" | "error" = "success") => {
+    setToast({ msg, type });
+    setTimeout(() => setToast(null), 3500);
+  };
+
+  const loadData = useCallback(async () => {
+    const [jdList, cnt] = await Promise.all([
+      api.listJDs().catch(() => []),
+      api.candidateCount().catch(() => ({ count: 0 })),
+    ]);
+    setJDs(jdList as JD[]);
+    setCandidateCount((cnt as { count: number }).count);
+  }, []);
+
+  useEffect(() => { loadData(); }, [loadData]);
+
+  useEffect(() => {
+    if (!taskId) return;
+    const interval = setInterval(async () => {
+      const s = await api.taskStatus(taskId);
+      setTaskStatus(s.status);
+      if (s.status === "SUCCESS" || s.status === "FAILURE") {
+        clearInterval(interval);
+        loadData();
+        showToast(s.status === "SUCCESS" ? "Candidates ingested successfully!" : "Ingestion failed", s.status === "SUCCESS" ? "success" : "error");
+      }
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [taskId, loadData]);
+
+  const handleFileUpload = async (file: File) => {
+    setUploading(true);
+    try {
+      const res = await api.uploadCandidates(file);
+      setTaskId(res.task_id);
+      setTaskStatus("PENDING");
+      showToast(`Queued ${res.queued} candidates for ingestion`);
+    } catch (e: unknown) {
+      showToast((e as Error).message, "error");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    const file = e.dataTransfer.files[0];
+    if (file) handleFileUpload(file);
+  };
+
+  const handleCreateJD = async () => {
+    if (!jdTitle.trim() || !jdText.trim()) return showToast("Title and description required", "error");
+    setCreatingJD(true);
+    try {
+      await api.createJD(jdTitle.trim(), jdText.trim());
+      setJDTitle(""); setJDText("");
+      loadData();
+      showToast("Job description created and queued for processing!");
+    } catch (e: unknown) {
+      showToast((e as Error).message, "error");
+    } finally {
+      setCreatingJD(false);
+    }
+  };
+
+  const qualityColor = (q: string) => q === "good" ? "badge-green" : q === "fair" ? "badge-yellow" : "badge-red";
 
-export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
+    <main className="page">
+      <div className="container">
+        <div className="hero">
+          <div className="hero-eyebrow">⚡ AI-Powered Recruiting</div>
+          <h1 className="hero-title">
+            Find the <span>perfect candidate</span><br />at any scale
           </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
+          <p className="hero-sub">
+            Two-stage retrieval + cross-encoder reranking + LLM explanations.
+            Upload candidates, post a JD, get ranked matches in seconds.
           </p>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+
+        <div className="grid-3" style={{ marginBottom: 40 }}>
+          <div className="stat-card">
+            <div className="stat-value" style={{ color: "var(--accent-light)" }}>
+              {candidateCount !== null ? candidateCount.toLocaleString() : "—"}
+            </div>
+            <div className="stat-label">Candidates Indexed</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-value" style={{ color: "var(--green)" }}>{jds.length}</div>
+            <div className="stat-label">Job Descriptions</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-value" style={{ color: "var(--yellow)" }}>2-Stage</div>
+            <div className="stat-label">Ranking Pipeline</div>
+          </div>
+        </div>
+
+        <div className="grid-2" style={{ gap: 24, alignItems: "start" }}>
+          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+            <div className="card" style={{ padding: 24 }}>
+              <h2 style={{ fontSize: "1rem", fontWeight: 600, marginBottom: 16 }}>Upload Candidates</h2>
+              <div
+                id="upload-zone"
+                className={`upload-zone${dragOver ? " drag-over" : ""}`}
+                onClick={() => document.getElementById("file-input")?.click()}
+                onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+                onDragLeave={() => setDragOver(false)}
+                onDrop={handleDrop}
+              >
+                <div className="upload-icon">{uploading ? "⏳" : "📂"}</div>
+                <div className="upload-title">
+                  {uploading ? "Uploading…" : taskStatus && taskStatus !== "SUCCESS" ? `Processing… (${taskStatus})` : "Drop CSV or JSON file here"}
+                </div>
+                <div className="upload-sub">Supports any column schema — external_id, name, skills, work experience, etc.</div>
+                <input id="file-input" type="file" accept=".csv,.json,.jsonl" style={{ display: "none" }} onChange={(e) => e.target.files?.[0] && handleFileUpload(e.target.files[0])} />
+              </div>
+              {taskStatus && taskStatus !== "SUCCESS" && taskStatus !== "FAILURE" && (
+                <div style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 10 }}>
+                  <div className="spinner" />
+                  <span style={{ fontSize: "0.8125rem", color: "var(--text-secondary)" }}>
+                    Ingesting candidates — embedding + indexing in background…
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="card" style={{ padding: 24 }}>
+            <h2 style={{ fontSize: "1rem", fontWeight: 600, marginBottom: 16 }}>Post a Job Description</h2>
+            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+              <div className="form-group">
+                <label className="label">Job Title</label>
+                <input id="jd-title" className="input" placeholder="e.g. Senior Backend Engineer" value={jdTitle} onChange={(e) => setJDTitle(e.target.value)} />
+              </div>
+              <div className="form-group">
+                <label className="label">Job Description</label>
+                <textarea id="jd-text" className="textarea" style={{ minHeight: 160 }} placeholder="Paste full JD here. Include required skills, experience, and responsibilities for best match quality." value={jdText} onChange={(e) => setJDText(e.target.value)} />
+              </div>
+              <button id="create-jd-btn" className="btn btn-primary btn-lg" onClick={handleCreateJD} disabled={creatingJD}>
+                {creatingJD ? <><div className="spinner" style={{ width: 16, height: 16 }} /> Processing…</> : "⚡ Create & Match"}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {jds.length > 0 && (
+          <div style={{ marginTop: 40 }}>
+            <div className="page-header">
+              <h2 className="page-title">Recent Job Descriptions</h2>
+              <p className="page-subtitle">Click a JD to view ranked candidates</p>
+            </div>
+            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+              {jds.map((jd) => (
+                <a key={jd.id} href={`/jds/${jd.id}`} id={`jd-${jd.id}`}
+                  style={{ display: "flex", alignItems: "center", gap: 16, padding: "16px 20px", borderRadius: "var(--radius-lg)", background: "var(--bg-card)", border: "1px solid var(--border)", transition: "all 0.2s", textDecoration: "none" }}
+                  onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.borderColor = "var(--accent)"; (e.currentTarget as HTMLElement).style.boxShadow = "0 0 20px var(--accent-dim)"; }}
+                  onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.borderColor = "var(--border)"; (e.currentTarget as HTMLElement).style.boxShadow = "none"; }}
+                >
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontWeight: 600, fontSize: "0.95rem", marginBottom: 4 }}>{jd.title}</div>
+                    <div style={{ fontSize: "0.8rem", color: "var(--text-secondary)", display: "flex", gap: 10, flexWrap: "wrap" }}>
+                      {jd.engineer_type && <span>🔧 {jd.engineer_type}</span>}
+                      {jd.min_yoe && <span>📅 {jd.min_yoe}+ yrs</span>}
+                      {jd.location && <span>📍 {jd.location}</span>}
+                      {jd.required_skills?.length > 0 && <span>🛠 {jd.required_skills.slice(0, 4).join(", ")}</span>}
+                    </div>
+                  </div>
+                  <div style={{ display: "flex", gap: 8, alignItems: "center", flexShrink: 0 }}>
+                    {jd.jd_quality?.overall && (
+                      <span className={`badge ${qualityColor(jd.jd_quality.overall)}`}>
+                        {jd.jd_quality.overall === "good" ? "✓" : "⚠"} {jd.jd_quality.overall}
+                      </span>
+                    )}
+                    <span className={`badge ${jd.status === "ready" ? "badge-green" : "badge-yellow"}`}>
+                      {jd.status}
+                    </span>
+                    <span style={{ color: "var(--text-muted)", fontSize: "1rem" }}>→</span>
+                  </div>
+                </a>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {toast && (
+        <div className={`toast toast-${toast.type}`}>
+          <div style={{ fontSize: "0.875rem" }}>{toast.type === "success" ? "✅" : "❌"} {toast.msg}</div>
         </div>
-      </main>
-    </div>
+      )}
+    </main>
   );
 }

frontend/src/lib/api.ts

@@ -0,0 +1,128 @@
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...options,
+    headers: { "Content-Type": "application/json", ...(options?.headers ?? {}) },
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ detail: res.statusText }));
+    throw new Error(err.detail || "Request failed");
+  }
+  return res.json();
+}
+
+export interface JD {
+  id: string;
+  title: string;
+  raw_text: string;
+  status: string;
+  min_yoe: number | null;
+  role_type: string | null;
+  engineer_type: string | null;
+  location: string | null;
+  required_skills: string[];
+  jd_quality: JDQuality;
+  created_at: string;
+}
+
+export interface JDQuality {
+  overall: "good" | "fair" | "poor";
+  vagueness_score: number;
+  breadth_score: number;
+  skill_count: number;
+  contradictions: string[];
+  warnings: string[];
+}
+
+export interface ComponentScores {
+  semantic: number;
+  skill: number;
+  yoe: number;
+  company: number;
+  growth: number;
+  education: number;
+}
+
+export interface GapItem {
+  type: string;
+  detail: string;
+  mitigated_by_remote?: boolean;
+}
+
+export interface MatchedCandidate {
+  candidate_id: string;
+  rank: number;
+  name: string | null;
+  email: string | null;
+  role_type: string | null;
+  engineer_type: string | null;
+  years_of_experience: number | null;
+  most_recent_company: string | null;
+  parsed_summary: string | null;
+  programming_languages: string[];
+  growth_velocity: number;
+  stage1_score: number;
+  stage2_score: number | null;
+  final_score: number;
+  component_scores: ComponentScores;
+  gaps: GapItem[];
+}
+
+export interface MatchResponse {
+  jd_id: string;
+  jd_title: string;
+  jd_quality: JDQuality;
+  total_matched: number;
+  results: MatchedCandidate[];
+  weights_used: Record<string, number>;
+}
+
+export interface CandidateDetail {
+  jd_id: string;
+  candidate_id: string;
+  rank: number | null;
+  final_score: number;
+  component_scores: ComponentScores;
+  gaps: GapItem[];
+  explanation: string | null;
+  candidate: Record<string, unknown>;
+  jd: Record<string, unknown>;
+}
+
+export const api = {
+  createJD: (title: string, raw_text: string) =>
+    request<JD>("/api/jds", { method: "POST", body: JSON.stringify({ title, raw_text }) }),
+
+  listJDs: () => request<JD[]>("/api/jds"),
+
+  getJD: (id: string) => request<JD>(`/api/jds/${id}`),
+
+  uploadCandidates: (file: File) => {
+    const fd = new FormData();
+    fd.append("file", file);
+    return fetch(`${API_BASE}/api/candidates/upload`, { method: "POST", body: fd })
+      .then((r) => {
+        if (!r.ok) throw new Error("Upload failed");
+        return r.json();
+      });
+  },
+
+  candidateCount: () => request<{ count: number }>("/api/candidates/count"),
+
+  taskStatus: (id: string) => request<{ task_id: string; status: string; result: unknown }>(`/api/candidates/status/${id}`),
+
+  triggerMatch: (jd_id: string) =>
+    request<MatchResponse>(`/api/match/${jd_id}`, { method: "POST" }),
+
+  getMatchResults: (jd_id: string) => request<MatchResponse>(`/api/match/${jd_id}`),
+
+  getCandidateDetail: (jd_id: string, candidate_id: string) =>
+    request<CandidateDetail>(`/api/match/${jd_id}/${candidate_id}`),
+
+  rerank: (jd_id: string, weights: Record<string, number>) =>
+    request<MatchResponse>(`/api/match/${jd_id}/rerank`, {
+      method: "POST",
+      body: JSON.stringify({ weights }),
+    }),
+};