feat: resolve promise racing in sessions UI and build smart background tracking loaders

frontend/src/app/jds/[id]/candidates/[cid]/page.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState, useCallback } from "react";
 import { useParams, useSearchParams } from "next/navigation";
 import Link from "next/link";
+import { Clock, Building2, Wrench, Bot, AlertTriangle, Briefcase, MapPin, Settings, SkipForward, BarChart2, Rocket, ClipboardList } from "lucide-react";
 import { api, type CandidateDetail } from "../../../../../lib/api";
 
 const COMP_LABELS: Record<string, { label: string; color: string }> = {
@@ -13,8 +14,11 @@ const COMP_LABELS: Record<string, { label: string; color: string }> = {
   education: { label: "Education", color: "#34d399" },
 };
 
-const GAP_ICONS: Record<string, string> = {
-  missing_skill: "🔧", yoe_gap: "📅", location_mismatch: "📍", engineer_type_mismatch: "⚙",
+const GAP_ICONS: Record<string, React.ReactNode> = {
+  missing_skill: <Wrench className="w-4 h-4 text-orange-400" />,
+  yoe_gap: <Clock className="w-4 h-4 text-blue-400" />,
+  location_mismatch: <MapPin className="w-4 h-4 text-red-500" />,
+  engineer_type_mismatch: <Settings className="w-4 h-4 text-slate-400" />,
 };
 
 interface CandidateData {
@@ -76,8 +80,8 @@ export default function CandidateDetailPage() {
     <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
       <div className="w-12 h-12 border-2 border-[var(--color-brand)] border-t-transparent rounded-full animate-spin" />
       <div>
-        <div className="font-semibold text-center mb-1">Generating LLM explanation…</div>
-        <div className="text-sm text-[var(--color-muted)] text-center">Groq is analyzing this candidate against the JD</div>
+        <div className="font-semibold text-center mb-1">Retrieving Candidate Profile...</div>
+        <div className="text-sm text-[var(--color-muted)] text-center">Fetching match metrics from the backend database</div>
       </div>
     </div>
   );
@@ -92,9 +96,9 @@ export default function CandidateDetailPage() {
 
   return (
     <div className="max-w-7xl mx-auto px-6 py-10">
-      <Link href={`/jds/${jdId}${sessionId ? `?session_id=${sessionId}` : ""}`}
-        className="text-xs text-[var(--color-dimmer)] hover:text-[var(--color-muted)] mb-6 inline-block transition-colors">
-        ← {jdInfo.title ?? "Job Description"}
+      <Link href={sessionId ? `/sessions/${sessionId}?jd_id=${jdId}` : `/pipeline`}
+        className="text-xs text-[var(--color-dimmer)] hover:text-[var(--color-text)] font-semibold mb-6 inline-block transition-colors">
+        ← Back to {jdInfo.title ?? "Rankings"}
       </Link>
 
       <div className="grid grid-cols-[1fr_300px] gap-6 items-start">
@@ -107,10 +111,10 @@ export default function CandidateDetailPage() {
               </div>
               <div className="flex-1">
                 <div className="font-bold text-xl">{displayName}</div>
-                <div className="text-sm text-[var(--color-muted)] flex gap-3 mt-1 flex-wrap">
-                  {cand.years_of_experience != null && <span>📅 {cand.years_of_experience} yrs exp</span>}
-                  {cand.engineer_type && <span>🔧 {cand.engineer_type}</span>}
-                  {cand.most_recent_company && <span>🏢 {cand.most_recent_company}</span>}
+                <div className="text-sm text-[var(--color-muted)] flex gap-4 mt-1.5 flex-wrap">
+                  {cand.years_of_experience != null && <span className="flex items-center gap-1.5"><Clock className="w-4 h-4 opacity-70" /> {cand.years_of_experience} yrs exp</span>}
+                  {cand.engineer_type && <span className="flex items-center gap-1.5 capitalize"><Wrench className="w-4 h-4 opacity-70" /> {cand.engineer_type}</span>}
+                  {cand.most_recent_company && <span className="flex items-center gap-1.5"><Building2 className="w-4 h-4 opacity-70" /> {cand.most_recent_company}</span>}
                 </div>
               </div>
               <div className="text-center flex-shrink-0 bg-[var(--color-brand-dim)] border border-[var(--color-brand-glow)] rounded-xl px-4 py-3">
@@ -137,10 +141,10 @@ export default function CandidateDetailPage() {
           </div>
 
           {/* LLM Explanation */}
-          {detail.explanation && (
+          {detail.explanation ? (
             <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl p-6">
               <div className="flex items-center justify-between mb-4">
-                <div className="font-semibold">🤖 LLM Analysis</div>
+                <div className="font-semibold flex items-center gap-2"><Bot className="w-5 h-5 text-[var(--color-brand-light)]" /> LLM Analysis</div>
                 <span className="text-[10px] px-2 py-1 rounded-full bg-[var(--color-brand-dim)] border border-[var(--color-brand-glow)] text-[var(--color-brand-light)]">
                   Groq · llama-3.3-70b
                 </span>
@@ -149,12 +153,24 @@ export default function CandidateDetailPage() {
                 <pre className="text-sm text-[var(--color-muted)] leading-relaxed whitespace-pre-wrap font-sans">{detail.explanation}</pre>
               </div>
             </div>
+          ) : (detail.rank ?? 999) <= 20 ? (
+            <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl p-6 flex flex-col items-center justify-center py-10 text-[var(--color-muted)]">
+              <div className="w-8 h-8 border-2 border-[var(--color-brand)] border-t-transparent rounded-full animate-spin mb-4" />
+              <div className="font-semibold mb-1 text-[var(--color-text)]">Passively generating LLM explanation...</div>
+              <div className="text-xs text-center max-w-sm">This candidate is ranked Top-20! Groq is silently generating their deep-dive analysis in the background. Refresh soon.</div>
+            </div>
+          ) : (
+            <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl p-6 flex flex-col items-center justify-center py-8 text-[var(--color-muted)]">
+               <div className="mb-3"><SkipForward className="w-8 h-8 text-[var(--color-border-strong)]" /></div>
+               <div className="font-semibold mb-1 text-[var(--color-text)]">LLM Generation Skipped</div>
+               <div className="text-xs text-center">This candidate lies outside the Top-20 ranking slice. Deep-dive generation was intentionally skipped to conserve pipeline latency.</div>
+            </div>
           )}
 
           {/* Gaps */}
           {detail.gaps.length > 0 && (
             <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl p-6">
-              <div className="font-semibold mb-4">⚠ Identified Gaps</div>
+              <div className="font-semibold mb-4 flex items-center gap-2"><AlertTriangle className="w-4 h-4 text-yellow-500" /> Identified Gaps</div>
               <div className="space-y-3">
                 {detail.gaps.map((g, i) => (
                   <div key={i} className="flex gap-3 p-3 bg-[var(--color-surface-2)] border border-[var(--color-border)] rounded-xl">
@@ -175,7 +191,7 @@ export default function CandidateDetailPage() {
           {/* Work History */}
           {(cand.parsed_work_experience ?? []).length > 0 && (
             <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl p-6">
-              <div className="font-semibold mb-5">💼 Work History</div>
+              <div className="font-semibold mb-5 flex items-center gap-2"><Briefcase className="w-4 h-4 text-blue-400" /> Work History</div>
               <div className="space-y-4">
                 {(cand.parsed_work_experience ?? []).slice(0, 4).map((w, i) => (
                   <div key={i} className="flex gap-4">
@@ -197,7 +213,7 @@ export default function CandidateDetailPage() {
         {/* Sidebar */}
         <div className="space-y-4 sticky top-20">
           <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-xl p-5">
-            <div className="font-semibold text-sm mb-4">📊 Score Breakdown</div>
+            <div className="font-semibold text-sm mb-4 flex items-center gap-2"><BarChart2 className="w-4 h-4 text-purple-400" /> Score Breakdown</div>
             <div className="space-y-3">
               {Object.entries(detail.component_scores).map(([key, val]) => {
                 const info = COMP_LABELS[key] ?? { label: key, color: "#6c63ff" };
@@ -217,7 +233,7 @@ export default function CandidateDetailPage() {
           </div>
 
           <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-xl p-5">
-            <div className="font-semibold text-sm mb-3">🚀 Career Trajectory</div>
+            <div className="font-semibold text-sm mb-3 flex items-center gap-2"><Rocket className="w-4 h-4 text-orange-400" /> Career Trajectory</div>
             <div className="flex items-center gap-2 mb-2">
               <div className="flex-1 h-2 rounded-full bg-[var(--color-surface-2)] overflow-hidden">
                 <div className="h-full rounded-full bg-gradient-to-r from-[var(--color-brand)] to-[var(--color-brand-light)] transition-all duration-700"
@@ -237,7 +253,7 @@ export default function CandidateDetailPage() {
           </div>
 
           <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-xl p-5">
-            <div className="font-semibold text-sm mb-3">📋 Details</div>
+            <div className="font-semibold text-sm mb-3 flex items-center gap-2"><ClipboardList className="w-4 h-4 text-emerald-400" /> Details</div>
             <div className="space-y-2.5">
               {([
                 { label: "Looking for", val: cand.looking_for },

frontend/src/app/jds/[id]/page.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import { useParams, useSearchParams } from "next/navigation";
 import Link from "next/link";
+import { Wrench, Clock, MapPin, AlertTriangle, CheckCircle2 } from "lucide-react";
 import { api, type JD, type MatchResponse, type SessionInfo } from "../../../lib/api";
 
 const DEFAULT_WEIGHTS = { semantic: 0.85, skill: 0.90, yoe: 0.95, company: 0.80, growth: 0.90, education: 0.75 };
@@ -112,18 +113,18 @@ export default function JDDetailPage() {
       <div className="flex items-start justify-between gap-4 mb-6 flex-wrap">
         <div>
           <h1 className="text-3xl font-bold tracking-tight mb-2">{jd.title}</h1>
-          <div className="flex gap-2 flex-wrap">
-            {jd.engineer_type && <span className="text-xs px-2.5 py-1 rounded-full bg-[var(--color-brand-dim)] border border-[var(--color-brand-glow)] text-[var(--color-brand-light)]">🔧 {jd.engineer_type}</span>}
-            {jd.min_yoe && <span className="text-xs px-2.5 py-1 rounded-full bg-[var(--color-brand-dim)] border border-[var(--color-brand-glow)] text-[var(--color-brand-light)]">📅 {jd.min_yoe}+ yrs</span>}
-            {jd.location && <span className="text-xs px-2.5 py-1 rounded-full bg-[var(--color-brand-dim)] border border-[var(--color-brand-glow)] text-[var(--color-brand-light)]">📍 {jd.location}</span>}
-            {quality && <span className={`text-xs px-2.5 py-1 rounded-full border font-medium ${qColor}`}>{quality.overall === "good" ? "✓" : "⚠"} JD {quality.overall}</span>}
+          <div className="flex gap-2 flex-wrap mt-2">
+            {jd.engineer_type && <span className="text-xs px-2.5 py-1 rounded-full bg-[var(--color-brand-dim)] border border-[var(--color-brand-glow)] text-[var(--color-brand-light)] font-medium flex items-center gap-1.5 capitalize"><Wrench className="w-3.5 h-3.5 opacity-80" /> {jd.engineer_type}</span>}
+            {jd.min_yoe && <span className="text-xs px-2.5 py-1 rounded-full bg-[var(--color-brand-dim)] border border-[var(--color-brand-glow)] text-[var(--color-brand-light)] font-medium flex items-center gap-1.5"><Clock className="w-3.5 h-3.5 opacity-80" /> {jd.min_yoe}+ yrs</span>}
+            {jd.location && <span className="text-xs px-2.5 py-1 rounded-full bg-[var(--color-brand-dim)] border border-[var(--color-brand-glow)] text-[var(--color-brand-light)] font-medium flex items-center gap-1.5 capitalize"><MapPin className="w-3.5 h-3.5 opacity-80" /> {jd.location}</span>}
+            {quality && <span className={`text-xs px-2.5 py-1 rounded-full border font-medium flex items-center gap-1.5 ${qColor}`}>{quality.overall === "good" ? <CheckCircle2 className="w-3.5 h-3.5" /> : <AlertTriangle className="w-3.5 h-3.5" />} JD {quality.overall}</span>}
           </div>
         </div>
       </div>
 
       {quality?.warnings?.length > 0 && (
         <div className="mb-6 bg-yellow-500/10 border border-yellow-500/20 rounded-xl px-5 py-4">
-          <div className="text-sm font-semibold text-yellow-400 mb-2">⚠ JD Quality Issues</div>
+          <div className="text-sm font-semibold text-yellow-400 mb-2 flex items-center gap-2"><AlertTriangle className="w-4 h-4" /> JD Quality Issues</div>
           {quality.warnings.map((w, i) => <div key={i} className="text-xs text-[var(--color-muted)] mt-1">• {w}</div>)}
         </div>
       )}

frontend/src/app/jds/new/page.tsx

@@ -1,84 +0,0 @@
-"use client";
-import { useState, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import { api } from "../../../lib/api";
-
-export default function NewJDPage() {
-  const router = useRouter();
-  const [title, setTitle] = useState("");
-  const [text, setText] = useState("");
-  const [creating, setCreating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleCreate = async () => {
-    if (!title.trim() || !text.trim()) return setError("Title and description are both required");
-    setError(null);
-    setCreating(true);
-    try {
-      const jd = await api.createJD(title.trim(), text.trim());
-      router.push(`/jds/${jd.id}`);
-    } catch (e: unknown) {
-      setError((e as Error).message);
-      setCreating(false);
-    }
-  };
-
-  return (
-    <div className="max-w-2xl mx-auto px-6 py-12">
-      <a href="/jds" className="text-sm text-[var(--color-dimmer)] hover:text-[var(--color-muted)] flex items-center gap-1.5 mb-8 transition-colors">
-        ← All Job Descriptions
-      </a>
-
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight mb-2">Post a Job Description</h1>
-        <p className="text-[var(--color-muted)]">Skills, YOE, location, and role type are auto-extracted. Richer JDs yield better matches.</p>
-      </div>
-
-      <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl p-8 space-y-6">
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-[var(--color-muted)]">Job Title *</label>
-          <input
-            id="jd-title"
-            className="w-full bg-[var(--color-surface-2)] border border-[var(--color-border-strong)] rounded-xl px-4 py-3 text-sm outline-none focus:border-[var(--color-brand)] focus:ring-2 focus:ring-[var(--color-brand-dim)] transition-all placeholder:text-[var(--color-dimmer)]"
-            placeholder="e.g. Senior Backend Engineer, AI Engineer"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-          />
-        </div>
-
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-[var(--color-muted)]">Job Description *</label>
-          <textarea
-            id="jd-text"
-            className="w-full bg-[var(--color-surface-2)] border border-[var(--color-border-strong)] rounded-xl px-4 py-3 text-sm outline-none focus:border-[var(--color-brand)] focus:ring-2 focus:ring-[var(--color-brand-dim)] transition-all resize-none placeholder:text-[var(--color-dimmer)] min-h-[280px]"
-            placeholder="Paste the full job description here. Include required skills, years of experience, responsibilities, and tech stack for best match quality..."
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-          />
-          <div className="flex justify-between text-xs text-[var(--color-dimmer)]">
-            <span>Include: required skills, min YOE, role type, location</span>
-            <span>{text.split(/\s+/).filter(Boolean).length} words</span>
-          </div>
-        </div>
-
-        {error && (
-          <div className="text-sm text-[var(--color-danger)] bg-red-500/10 border border-red-500/20 rounded-xl px-4 py-3">
-            ❌ {error}
-          </div>
-        )}
-
-        <button
-          id="post-jd-btn"
-          onClick={handleCreate}
-          disabled={creating}
-          className="w-full py-3 rounded-xl bg-[var(--color-brand)] text-white font-semibold text-sm disabled:opacity-50 hover:brightness-110 transition-all shadow-lg shadow-[var(--color-brand-glow)] flex items-center justify-center gap-2"
-        >
-          {creating
-            ? <><div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> Processing JD…</>
-            : "⚡ Post Job Description"
-          }
-        </button>
-      </div>
-    </div>
-  );
-}

frontend/src/app/jds/page.tsx

@@ -1,79 +0,0 @@
-"use client";
-import { useState, useEffect, useCallback } from "react";
-import Link from "next/link";
-import { api, type JD } from "../../lib/api";
-
-export default function JDsListPage() {
-  const [jds, setJDs] = useState<JD[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  const load = useCallback(async () => {
-    const j = await api.listJDs().catch(() => []);
-    setJDs(j as JD[]);
-    setLoading(false);
-  }, []);
-
-  useEffect(() => { load(); }, [load]);
-
-  const qColor = (q: string) =>
-    q === "good" ? "text-green-400 bg-green-400/10 border-green-400/20"
-    : q === "fair" ? "text-yellow-400 bg-yellow-400/10 border-yellow-400/20"
-    : "text-red-400 bg-red-400/10 border-red-400/20";
-
-  return (
-    <div className="max-w-4xl mx-auto px-6 py-12">
-      <div className="flex items-center justify-between mb-8">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight mb-1">Job Descriptions</h1>
-          <p className="text-[var(--color-muted)] text-sm">Run any JD against any candidate session</p>
-        </div>
-        <Link href="/jds/new" className="px-5 py-2.5 rounded-xl bg-[var(--color-brand)] text-white font-semibold text-sm hover:brightness-110 transition-all shadow-lg shadow-[var(--color-brand-glow)]">
-          + Post JD
-        </Link>
-      </div>
-
-      {loading ? (
-        <div className="space-y-3">{[1, 2, 3].map((i) => <div key={i} className="h-20 rounded-2xl animate-shimmer" />)}</div>
-      ) : jds.length === 0 ? (
-        <div className="bg-[var(--color-card)] border border-dashed border-[var(--color-border-strong)] rounded-2xl p-16 text-center">
-          <div className="text-4xl mb-4">📋</div>
-          <div className="text-lg font-semibold mb-2">No job descriptions yet</div>
-          <div className="text-[var(--color-muted)] mb-6">Post a JD to start matching candidates from your sessions</div>
-          <Link href="/jds/new" className="px-6 py-3 rounded-xl bg-[var(--color-brand)] text-white font-semibold text-sm hover:brightness-110 transition-all">
-            Post first JD
-          </Link>
-        </div>
-      ) : (
-        <div className="space-y-3">
-          {jds.map((jd) => (
-            <Link key={jd.id} href={`/jds/${jd.id}`}
-              className="flex items-center gap-5 p-5 bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl hover:border-[var(--color-brand)] hover:shadow-[0_0_24px_var(--color-brand-dim)] transition-all group">
-              <div className="flex-1 min-w-0">
-                <div className="font-semibold text-base mb-1">{jd.title}</div>
-                <div className="flex gap-3 text-xs text-[var(--color-muted)] flex-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?.slice(0, 4).map((s) => (
-                    <span key={s} className="px-1.5 py-0.5 rounded bg-[var(--color-surface-2)] border border-[var(--color-border)]">{s}</span>
-                  ))}
-                </div>
-              </div>
-              <div className="flex items-center gap-3 flex-shrink-0">
-                {jd.jd_quality?.overall && (
-                  <span className={`text-xs px-2.5 py-1 rounded-full border font-medium ${qColor(jd.jd_quality.overall)}`}>
-                    {jd.jd_quality.overall}
-                  </span>
-                )}
-                <span className={`text-xs px-2.5 py-1 rounded-full border font-medium ${jd.status === "ready" ? "text-green-400 bg-green-400/10 border-green-400/20" : "text-yellow-400 bg-yellow-400/10 border-yellow-400/20"}`}>
-                  {jd.status}
-                </span>
-                <span className="text-[var(--color-dimmer)] group-hover:text-[var(--color-brand-light)] transition-colors">→</span>
-              </div>
-            </Link>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/app/sessions/[id]/page.tsx

@@ -2,6 +2,7 @@
 import { useState, useEffect, useCallback, use } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
+import { Clock, Building2 } from "lucide-react";
 import { api, type SessionInfo, type JD, type MatchResponse, type MatchedCandidate } from "../../../lib/api";
 
 const SCORE_COLORS = ["#6c63ff", "#22c55e", "#3b82f6", "#f59e0b", "#a78bfa"];
@@ -46,13 +47,14 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
           setWeights(jdInfo.custom_weights as typeof DEFAULT_WEIGHTS);
         }
         
-        api.getMatchResults(initialJdId, sessionId).then(r => {
+        try {
+           const r = await api.getMatchResults(initialJdId, sessionId);
            setMatch(r);
            setBaseResults(r.results);
-        }).catch(() => {
+        } catch {
            setMatch(null);
            setBaseResults(null);
-        });
+        }
       }
     } catch (e) {
       console.error(e);
@@ -168,7 +170,7 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
       {/* HEADER */}
       <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl p-6 mb-6 flex justify-between items-center shadow-sm">
         <div>
-          <Link href="/sessions" className="text-xs text-[var(--color-dimmer)] hover:text-[var(--color-text)] transition-colors mb-2 inline-block">← All Sessions</Link>
+          <Link href="/pipeline" className="text-xs text-[var(--color-dimmer)] hover:text-[var(--color-text)] transition-colors mb-2 inline-block">← Back to Pipeline</Link>
           <h1 className="text-3xl font-bold tracking-tight">📁 {session.name}</h1>
           <p className="text-sm text-[var(--color-muted)] mt-1">{session.description || "Generated Session Sandbox"}</p>
         </div>
@@ -283,8 +285,8 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
                       <div>
                         <div className="font-bold text-sm tracking-wide text-[var(--color-text)] mb-1">{c.name || "Anonymous Candidate"}</div>
                         <div className="text-xs text-[var(--color-muted)] flex items-center gap-3">
-                          {c.years_of_experience != null && <span className="flex items-center gap-1">⏱ {c.years_of_experience} yrs</span>}
-                          {c.most_recent_company && <span className="flex items-center gap-1">🏢 {c.most_recent_company}</span>}
+                          {c.years_of_experience != null && <span className="flex items-center gap-1"><Clock className="w-3.5 h-3.5" /> {c.years_of_experience} yrs</span>}
+                          {c.most_recent_company && <span className="flex items-center gap-1"><Building2 className="w-3.5 h-3.5" /> {c.most_recent_company}</span>}
                         </div>
                       </div>
                     </div>

frontend/src/app/sessions/new/page.tsx

@@ -1,142 +0,0 @@
-"use client";
-import { useState, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import { api } from "../../../lib/api";
-
-export default function NewSessionPage() {
-  const router = useRouter();
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [file, setFile] = useState<File | null>(null);
-  const [creating, setCreating] = useState(false);
-  const [uploading, setUploading] = useState(false);
-  const [taskStatus, setTaskStatus] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [dragOver, setDragOver] = useState(false);
-
-  const handleCreate = useCallback(async () => {
-    if (!name.trim()) return setError("Session name is required");
-    setError(null);
-    setCreating(true);
-    try {
-      const session = await api.createSession(name.trim(), description.trim() || undefined);
-      if (file) {
-        setUploading(true);
-        setCreating(false);
-        const res = await api.uploadCandidates(file, session.id);
-        const taskId = res.task_id;
-        setTaskStatus("PENDING");
-        const poll = setInterval(async () => {
-          const s = await api.taskStatus(taskId);
-          setTaskStatus(s.status);
-          if (s.status === "SUCCESS" || s.status === "FAILURE") {
-            clearInterval(poll);
-            router.push(`/sessions/${session.id}`);
-          }
-        }, 2000);
-      } else {
-        router.push(`/sessions/${session.id}`);
-      }
-    } catch (e: unknown) {
-      setError((e as Error).message);
-      setCreating(false);
-      setUploading(false);
-    }
-  }, [name, description, file, router]);
-
-  const handleFileDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setDragOver(false);
-    const f = e.dataTransfer.files[0];
-    if (f) setFile(f);
-  };
-
-  return (
-    <div className="max-w-2xl mx-auto px-6 py-12">
-      <a href="/sessions" className="text-sm text-[var(--color-dimmer)] hover:text-[var(--color-muted)] flex items-center gap-1.5 mb-8 transition-colors">
-        ← All Sessions
-      </a>
-
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight mb-2">Create a Session</h1>
-        <p className="text-[var(--color-muted)]">A session is a named batch of candidates. Multiple JDs can be matched against the same session.</p>
-      </div>
-
-      <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl p-8 space-y-6">
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-[var(--color-muted)]">Session Name *</label>
-          <input
-            id="session-name"
-            className="w-full bg-[var(--color-surface-2)] border border-[var(--color-border-strong)] rounded-xl px-4 py-3 text-sm outline-none focus:border-[var(--color-brand)] focus:ring-2 focus:ring-[var(--color-brand-dim)] transition-all placeholder:text-[var(--color-dimmer)]"
-            placeholder="e.g. Q2 2025 Backend Batch, March Internships"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-        </div>
-
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-[var(--color-muted)]">Description (optional)</label>
-          <textarea
-            id="session-desc"
-            className="w-full bg-[var(--color-surface-2)] border border-[var(--color-border-strong)] rounded-xl px-4 py-3 text-sm outline-none focus:border-[var(--color-brand)] focus:ring-2 focus:ring-[var(--color-brand-dim)] transition-all resize-none placeholder:text-[var(--color-dimmer)] min-h-[80px]"
-            placeholder="Brief description of this candidate batch..."
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-          />
-        </div>
-
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-[var(--color-muted)]">Upload Candidates (CSV / JSON)</label>
-          <div
-            id="drop-zone"
-            className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all ${dragOver || file ? "border-[var(--color-brand)] bg-[var(--color-brand-dim)]" : "border-[var(--color-border-strong)] hover:border-[var(--color-brand)] hover:bg-[var(--color-brand-dim)]"}`}
-            onClick={() => document.getElementById("cand-file")?.click()}
-            onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
-            onDragLeave={() => setDragOver(false)}
-            onDrop={handleFileDrop}
-          >
-            <div className="text-3xl mb-2">{file ? "✅" : "📂"}</div>
-            <div className="font-medium text-sm mb-1">
-              {file ? file.name : "Drop your CSV or JSON file here"}
-            </div>
-            <div className="text-xs text-[var(--color-muted)]">
-              {file ? `${(file.size / 1024).toFixed(0)} KB selected` : "or click to browse — supports any column schema"}
-            </div>
-            <input id="cand-file" type="file" accept=".csv,.json,.jsonl" className="hidden" onChange={(e) => e.target.files?.[0] && setFile(e.target.files[0])} />
-          </div>
-          {file && (
-            <button className="text-xs text-[var(--color-dimmer)] hover:text-[var(--color-danger)] transition-colors" onClick={() => setFile(null)}>
-              ✕ Remove file
-            </button>
-          )}
-        </div>
-
-        {error && (
-          <div className="flex items-center gap-2 text-sm text-[var(--color-danger)] bg-red-500/10 border border-red-500/20 rounded-xl px-4 py-3">
-            ❌ {error}
-          </div>
-        )}
-
-        {uploading && taskStatus && (
-          <div className="flex items-center gap-3 text-sm text-[var(--color-muted)] bg-[var(--color-brand-dim)] border border-[var(--color-brand-glow)] rounded-xl px-4 py-3">
-            <div className="w-4 h-4 border-2 border-[var(--color-brand-light)] border-t-transparent rounded-full animate-spin flex-shrink-0" />
-            Ingesting candidates — embedding + indexing… ({taskStatus})
-          </div>
-        )}
-
-        <button
-          id="create-session-btn"
-          className="w-full py-3 rounded-xl bg-[var(--color-brand)] text-white font-semibold text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:brightness-110 transition-all shadow-lg shadow-[var(--color-brand-glow)] flex items-center justify-center gap-2"
-          onClick={handleCreate}
-          disabled={creating || uploading}
-        >
-          {creating || uploading ? (
-            <><div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> {uploading ? "Uploading…" : "Creating…"}</>
-          ) : (
-            "⚡ Create Session" + (file ? " & Upload" : "")
-          )}
-        </button>
-      </div>
-    </div>
-  );
-}

frontend/src/app/sessions/page.tsx

@@ -1,62 +0,0 @@
-"use client";
-import { useState, useEffect, useCallback } from "react";
-import Link from "next/link";
-import { api, type SessionInfo } from "../../lib/api";
-
-export default function SessionsListPage() {
-  const [sessions, setSessions] = useState<SessionInfo[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  const load = useCallback(async () => {
-    const s = await api.listSessions().catch(() => []);
-    setSessions(s as SessionInfo[]);
-    setLoading(false);
-  }, []);
-
-  useEffect(() => { load(); }, [load]);
-
-  return (
-    <div className="max-w-4xl mx-auto px-6 py-12">
-      <div className="flex items-center justify-between mb-8">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight mb-1">Sessions</h1>
-          <p className="text-[var(--color-muted)] text-sm">Each session is a batch of candidates. Run any JD against any session.</p>
-        </div>
-        <Link href="/sessions/new" className="px-5 py-2.5 rounded-xl bg-[var(--color-brand)] text-white font-semibold text-sm hover:brightness-110 transition-all shadow-lg shadow-[var(--color-brand-glow)]">
-          + New Session
-        </Link>
-      </div>
-
-      {loading ? (
-        <div className="space-y-3">{[1, 2, 3, 4].map((i) => <div key={i} className="h-20 rounded-2xl animate-shimmer" />)}</div>
-      ) : sessions.length === 0 ? (
-        <div className="bg-[var(--color-card)] border border-dashed border-[var(--color-border-strong)] rounded-2xl p-16 text-center">
-          <div className="text-4xl mb-4">📁</div>
-          <div className="text-lg font-semibold mb-2">No sessions yet</div>
-          <div className="text-[var(--color-muted)] mb-6">Create a session to upload and group your candidate batches</div>
-          <Link href="/sessions/new" className="px-6 py-3 rounded-xl bg-[var(--color-brand)] text-white font-semibold text-sm hover:brightness-110 transition-all">
-            Create first session
-          </Link>
-        </div>
-      ) : (
-        <div className="space-y-3">
-          {sessions.map((s) => (
-            <Link key={s.id} href={`/sessions/${s.id}`}
-              className="flex items-center gap-5 p-5 bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl hover:border-[var(--color-brand)] hover:shadow-[0_0_24px_var(--color-brand-dim)] transition-all group">
-              <div className="w-12 h-12 rounded-xl bg-[var(--color-brand-dim)] border border-[var(--color-brand-glow)] flex items-center justify-center text-xl flex-shrink-0">📁</div>
-              <div className="flex-1 min-w-0">
-                <div className="font-semibold text-base">{s.name}</div>
-                {s.description && <div className="text-sm text-[var(--color-muted)] truncate mt-0.5">{s.description}</div>}
-              </div>
-              <div className="text-right flex-shrink-0">
-                <div className="text-lg font-bold text-[var(--color-brand-light)]">{s.candidate_count.toLocaleString()}</div>
-                <div className="text-xs text-[var(--color-dimmer)]">candidates</div>
-              </div>
-              <span className="text-[var(--color-dimmer)] group-hover:text-[var(--color-brand-light)] transition-colors text-lg">→</span>
-            </Link>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}