refactor: unified session view, pipeline polling, db wipe

backend/src/routers/sessions.py

@@ -25,7 +25,6 @@ async def list_sessions(db: AsyncSession = Depends(get_db)):
     result = await db.execute(select(Session).order_by(Session.created_at.desc()).limit(50))
     return result.scalars().all()
 
-
 @router.get("/{session_id}", response_model=SessionResponse)
 async def get_session(session_id: uuid.UUID, db: AsyncSession = Depends(get_db)):
     result = await db.execute(select(Session).where(Session.id == session_id))
@@ -72,3 +71,4 @@ async def delete_session(session_id: uuid.UUID, db: AsyncSession = Depends(get_d
 
     await db.delete(sess)
     await db.commit()
+

backend/wipe.py

@@ -0,0 +1,19 @@
+import asyncio
+import os
+from sqlalchemy.ext.asyncio import create_async_engine
+from sqlalchemy import text
+from dotenv import load_dotenv
+
+load_dotenv()
+url = os.getenv('DATABASE_URL').replace('postgresql:', 'postgresql+asyncpg:').replace('?sslmode=require', '')
+if '?sslmode=require' not in url and 'ep-patient-brook' in url: pass # handle if needed
+
+async def wipe():
+    engine = create_async_engine(url)
+    async with engine.begin() as conn:
+        await conn.execute(text('DROP SCHEMA public CASCADE; CREATE SCHEMA public;'))
+    print('DB wiped')
+
+if __name__ == '__main__':
+    asyncio.run(wipe())
+

backend/wipe_api.py

@@ -0,0 +1,22 @@
+from fastapi import FastAPI
+from sqlalchemy.ext.asyncio import create_async_engine
+from sqlalchemy import text
+from dotenv import load_dotenv
+import asyncio
+import os
+
+load_dotenv()
+url = os.getenv('DATABASE_URL').replace('postgresql:', 'postgresql+asyncpg:').replace('?sslmode=require&channel_binding=require', '')
+if '?sslmode=' not in url: url += '?ssl=require'
+
+engine = create_async_engine(url)
+
+async def main():
+    async with engine.begin() as conn:
+        print('Wiping...')
+        await conn.execute(text('TRUNCATE table job_descriptions, sessions, candidates, match_results CASCADE;'))
+        print('Wiped tables!')
+
+if __name__ == '__main__':
+    asyncio.run(main())
+

frontend/src/app/pipeline/page.tsx

@@ -159,14 +159,37 @@ export default function PipelinePage() {
   };
 
   const runMatches = async (jdIds: string[], sessionId: string, currentState: PipelineState) => {
-    try {
-      // Match each JD against the session in parallel
-      await Promise.all(jdIds.map(jdId => api.triggerMatch(jdId, sessionId)));
-      updateState({ status: "complete" });
-    } catch (e: any) {
-      setError("Matching failed: " + e.message);
-      updateState({ status: "idle" });
-    }
+    let pendingJds = [...jdIds];
+    
+    const pollMatches = async () => {
+      try {
+        const stillPending: string[] = [];
+        
+        for (const jdId of pendingJds) {
+          try {
+            await api.triggerMatch(jdId, sessionId);
+          } catch (e: any) {
+            if (e.message === "202_ACCEPTED") {
+              stillPending.push(jdId);
+            } else {
+              throw e;
+            }
+          }
+        }
+        
+        if (stillPending.length > 0) {
+          pendingJds = stillPending;
+          setTimeout(pollMatches, 3000);
+        } else {
+          updateState({ status: "complete" });
+        }
+      } catch (e: any) {
+        setError("Matching failed: " + e.message);
+        updateState({ status: "idle" });
+      }
+    };
+    
+    pollMatches();
   };
 
   const formatTime = (sec: number) => {
@@ -303,7 +326,7 @@ export default function PipelinePage() {
                 {state.jdsInfo.map((info, idx) => (
                   <Link 
                     key={idx}
-                    href={`/jds/${state.jdIds[idx]}?session_id=${state.sessionId}`}
+                    href={`/sessions/${state.sessionId}?jd_id=${state.jdIds[idx]}`}
                     className="flex justify-between items-center bg-[var(--color-card)] hover:bg-[var(--color-card-hover)] p-3 rounded-lg border border-[var(--color-border-strong)] hover:border-[var(--color-brand)] transition-all group"
                   >
                     <span className="font-semibold text-sm truncate pr-4">{info.title || `Job Description ${idx + 1}`}</span>

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

@@ -1,6 +1,6 @@
 "use client";
-import { useState, useEffect, useCallback } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useState, useEffect, useCallback, use } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { api, type SessionInfo, type JD, type MatchResponse, type MatchedCandidate } from "../../../lib/api";
 
@@ -11,257 +11,305 @@ const WEIGHT_LABELS: Record<string, string> = {
   company: "Company", growth: "Growth", education: "Education",
 };
 
-export default function SessionDetailPage() {
-  const params = useParams<{ id: string }>();
-  const sessionId = params.id;
+export default function SessionDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const unwrappedParams = use(params);
+  const sessionId = unwrappedParams.id;
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const initialJdId = searchParams.get("jd_id");
 
   const [session, setSession] = useState<SessionInfo | null>(null);
   const [jds, setJDs] = useState<JD[]>([]);
-  const [selectedJD, setSelectedJD] = useState<string | null>(null);
+  const [selectedJD, setSelectedJD] = useState<string | null>(initialJdId);
   const [match, setMatch] = useState<MatchResponse | null>(null);
+  const [baseResults, setBaseResults] = useState<MatchResponse["results"] | null>(null);
   const [matching, setMatching] = useState(false);
   const [weights, setWeights] = useState(DEFAULT_WEIGHTS);
   const [reranking, setReranking] = useState(false);
-  const [uploading, setUploading] = useState(false);
-  const [taskStatus, setTaskStatus] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+
   const debounce = useCallback(<T extends unknown[]>(fn: (...args: T) => void, ms: number) => {
     let t: ReturnType<typeof setTimeout>;
     return (...args: T) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
   }, []);
 
   const loadData = useCallback(async () => {
-    const [s, j] = await Promise.all([api.getSession(sessionId), api.listJDs().catch(() => [])]);
-    setSession(s);
-    setJDs(j as JD[]);
-    setLoading(false);
-  }, [sessionId]);
+    try {
+      const [s, jList] = await Promise.all([api.getSession(sessionId), api.listJDs()]);
+      setSession(s);
+      setJDs(jList);
+      
+      // If a JD is selected, load its match info automatically
+      if (initialJdId) {
+        const jdInfo = (jList as JD[]).find(x => x.id === initialJdId);
+        if (jdInfo && jdInfo.custom_weights && Object.keys(jdInfo.custom_weights).length > 0) {
+          setWeights(jdInfo.custom_weights as typeof DEFAULT_WEIGHTS);
+        }
+        
+        api.getMatchResults(initialJdId, sessionId).then(r => {
+           setMatch(r);
+           setBaseResults(r.results);
+        }).catch(() => {
+           setMatch(null);
+           setBaseResults(null);
+        });
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  }, [sessionId, initialJdId]);
 
   useEffect(() => { loadData(); }, [loadData]);
 
-  const handleMatch = async () => {
-    if (!selectedJD) return;
-    setMatching(true);
+  const selectJD = async (jd: JD) => {
+    setSelectedJD(jd.id);
+    router.replace(`/sessions/${sessionId}?jd_id=${jd.id}`, { scroll: false });
+    setMatch(null);
+    setBaseResults(null);
+    
+    if (jd.custom_weights && Object.keys(jd.custom_weights).length > 0) {
+      setWeights(jd.custom_weights as typeof DEFAULT_WEIGHTS);
+    } else {
+      setWeights(DEFAULT_WEIGHTS);
+    }
+
     try {
-      const r = await api.triggerMatch(selectedJD, sessionId);
+      setMatching(true);
+      const r = await api.getMatchResults(jd.id, sessionId);
       setMatch(r);
-    } catch (e: unknown) {
-      alert((e as Error).message);
+      setBaseResults(r.results);
+    } catch {
+      // 404 meaning no results yet
     } finally {
       setMatching(false);
     }
   };
 
-  const handleWeightChange = useCallback(
-    debounce(async (newWeights: typeof DEFAULT_WEIGHTS) => {
-      if (!selectedJD || !match) return;
-      setReranking(true);
-      const r = await api.rerank(selectedJD, newWeights, sessionId).catch(() => null);
-      if (r) setMatch(r);
+  const handleMatch = async () => {
+    if (!selectedJD) return;
+    setMatching(true);
+    let attempts = 0;
+    
+    const poll = async () => {
+      try {
+        const r = await api.triggerMatch(selectedJD, sessionId);
+        setMatch(r);
+        setBaseResults(r.results);
+        setMatching(false);
+      } catch (e: any) {
+        if (e.message === "202_ACCEPTED") {
+           attempts++;
+           if (attempts > 20) {
+              alert("Processing is taking longer than expected. Please check back later.");
+              setMatching(false);
+           } else {
+              setTimeout(poll, 3000);
+           }
+        } else {
+           alert("Matching error: " + e.message);
+           setMatching(false);
+        }
+      }
+    };
+    poll();
+  };
+
+  const saveWeightsToDb = useCallback(
+    debounce((jdId: string, nw: typeof DEFAULT_WEIGHTS) => {
+      api.updateJDWeights(jdId, nw).catch(() => null);
       setReranking(false);
     }, 400),
-    [selectedJD, match, sessionId, debounce]
+    []
   );
 
-  const handleFileUpload = async (file: File) => {
-    setUploading(true);
-    try {
-      const res = await api.uploadCandidates(file, sessionId);
-      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);
-          loadData();
-          setTaskStatus(null);
-        }
-      }, 2000);
-    } finally {
-      setUploading(false);
+  const handleWeightChange = (key: string, val: number) => {
+    if (!selectedJD) return;
+    setReranking(true);
+    const nw = { ...weights, [key]: val };
+    setWeights(nw);
+
+    // Instant local rerank Native O(N log N)
+    if (baseResults && match) {
+      const totalW = Object.values(nw).reduce((a, b) => a + b, 0);
+      const wNorm: Record<string, number> = totalW > 0 ? Object.fromEntries(Object.entries(nw).map(([k, v]) => [k, v / totalW])) : nw;
+
+      const newRes = baseResults.map(c => {
+         let score = 0;
+         const cs = c.component_scores as unknown as Record<string, number>;
+         ["semantic", "skill", "yoe", "company", "growth", "education"].forEach(k => {
+           score += (cs[k] || 0) * (wNorm[k] || 0);
+         });
+         return { ...c, final_score: score };
+      });
+      newRes.sort((a, b) => b.final_score - a.final_score);
+      newRes.forEach((c, idx) => c.rank = idx + 1);
+      setMatch({ ...match, results: newRes });
     }
+
+    saveWeightsToDb(selectedJD, nw);
   };
 
   const scoreColor = (s: number) => s >= 0.7 ? "#22c55e" : s >= 0.45 ? "#eab308" : "#ef4444";
-  const rankClass = (r: number) => r === 1 ? "from-amber-400 to-amber-600" : r === 2 ? "from-slate-400 to-slate-500" : r === 3 ? "from-amber-700 to-amber-800" : null;
+  const rankClass = (r: number) => r <= 3 ? "bg-gradient-to-br from-amber-400 to-amber-600 border border-amber-300/50" : "bg-[var(--color-surface-2)] text-[var(--color-muted)]";
 
   if (loading) return (
-    <div className="flex items-center justify-center min-h-[60vh]">
-      <div className="text-center">
-        <div className="w-10 h-10 border-2 border-[var(--color-brand)] border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-        <div className="text-[var(--color-muted)]">Loading session…</div>
-      </div>
+    <div className="flex justify-center items-center h-[60vh]">
+      <div className="w-10 h-10 border-2 border-[var(--color-brand)] border-t-transparent rounded-full animate-spin" />
     </div>
   );
 
-  if (!session) return <div className="p-8 text-[var(--color-danger)]">Session not found</div>;
+  if (!session) return <div className="p-8 text-red-500">Session not found. It may have been deleted.</div>;
+  const currentJdObj = jds.find(j => j.id === selectedJD);
 
   return (
-    <div className="max-w-7xl mx-auto px-6 py-10">
-      <div className="flex items-start justify-between mb-8 gap-4 flex-wrap">
+    <div className="max-w-[1500px] mx-auto px-6 py-8">
+      {/* 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-muted)] mb-3 inline-block transition-colors">← All Sessions</Link>
-          <h1 className="text-3xl font-bold tracking-tight flex items-center gap-3">
-            <span className="text-2xl">📁</span>
-            {session.name}
-          </h1>
-          {session.description && <p className="text-[var(--color-muted)] mt-1">{session.description}</p>}
-          <div className="flex items-center gap-3 mt-3">
-            <span className="text-2xl font-bold text-[var(--color-brand-light)]">{session.candidate_count.toLocaleString()}</span>
-            <span className="text-sm text-[var(--color-muted)]">candidates indexed</span>
-          </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>
+          <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>
-        <div className="flex gap-2">
-          <button 
-            className="px-4 py-2 rounded-xl border border-red-500/30 text-sm font-medium text-red-500 cursor-pointer hover:bg-red-500/10 transition-all flex items-center gap-2"
-            onClick={async () => {
-              if (confirm("Are you sure? This will delete the session, all candidates inside it, and all related match results perfectly to clear database memory.")) {
-                try {
-                  await api.deleteSession(sessionId);
-                  router.push("/");
-                } catch (e: any) {
-                  alert("Failed to delete session: " + e.message);
-                }
-              }
-            }}
-          >
-            🗑 Delete Session
-          </button>
-          <label className="px-4 py-2 rounded-xl border border-[var(--color-border-strong)] text-sm font-medium cursor-pointer hover:border-[var(--color-brand)] hover:bg-[var(--color-card)] transition-all flex items-center gap-2">
-            {uploading ? <><div className="w-3 h-3 border border-[var(--color-brand)] border-t-transparent rounded-full animate-spin" /> Uploading…</> : "📤 Add Candidates"}
-            <input type="file" accept=".csv,.json,.jsonl" className="hidden" onChange={(e) => e.target.files?.[0] && handleFileUpload(e.target.files[0])} />
-          </label>
+        <div className="text-right">
+          <div className="text-3xl font-bold text-[var(--color-brand-light)]">{session.candidate_count.toLocaleString()}</div>
+          <div className="text-xs text-[var(--color-muted)] uppercase tracking-wider font-semibold">Candidates Uploaded</div>
         </div>
       </div>
 
-      {taskStatus && taskStatus !== "SUCCESS" && (
-        <div className="mb-6 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-5 py-3.5">
-          <div className="w-4 h-4 border-2 border-[var(--color-brand-light)] border-t-transparent rounded-full animate-spin" />
-          Embedding and indexing candidates ({taskStatus})…
-        </div>
-      )}
-
-      <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl p-6 mb-8">
-        <h2 className="text-base font-semibold mb-4">⚡ Run a Job Match Against This Session</h2>
-        <div className="flex gap-3 flex-wrap items-end">
-          <div className="flex-1 min-w-[240px]">
-            <label className="text-xs text-[var(--color-muted)] mb-1.5 block">Select Job Description</label>
-            <select
-              id="jd-select"
-              className="w-full bg-[var(--color-surface-2)] border border-[var(--color-border-strong)] rounded-xl px-4 py-2.5 text-sm outline-none focus:border-[var(--color-brand)] transition-all text-[var(--color-text)]"
-              value={selectedJD || ""}
-              onChange={(e) => setSelectedJD(e.target.value || null)}
-            >
-              <option value="">— Choose a JD —</option>
-              {jds.map((j) => (
-                <option key={j.id} value={j.id}>{j.title}</option>
-              ))}
-            </select>
+      <div className="grid grid-cols-[320px_1fr] gap-6 items-start">
+        {/* LEFT SIDEBAR: JDs */}
+        <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl overflow-hidden sticky top-6 shadow-sm">
+          <div className="px-5 py-4 border-b border-[var(--color-border-strong)] flex justify-between items-center bg-[var(--color-surface-2)]">
+            <h2 className="text-sm font-bold text-[var(--color-text)]">Select JD to View</h2>
+          </div>
+          <div className="max-h-[calc(100vh-250px)] overflow-y-auto p-3 space-y-2">
+            {jds.length === 0 && <div className="p-4 text-xs text-center text-[var(--color-muted)]">No JDs created yet</div>}
+            {jds.map(jd => {
+              const active = jd.id === selectedJD;
+              return (
+                <button
+                  key={jd.id}
+                  onClick={() => selectJD(jd)}
+                  className={`w-full text-left p-4 rounded-xl border transition-all ${
+                    active 
+                      ? "bg-[var(--color-brand-dim)] border-[var(--color-brand-glow)] shadow-[0_0_15px_var(--color-brand-dim)]" 
+                      : "bg-[var(--color-card)] border-[var(--color-border)] hover:border-[var(--color-brand-dim)]"
+                  }`}
+                >
+                  <div className={`font-semibold text-sm ${active ? "text-[var(--color-brand-light)]" : "text-[var(--color-text)]"}`}>{jd.title}</div>
+                  <div className="text-xs text-[var(--color-muted)] mt-1 truncate">Status: {jd.status}</div>
+                </button>
+              );
+            })}
           </div>
-          <Link href="/jds/new" className="px-4 py-2.5 rounded-xl border border-[var(--color-border-strong)] text-sm text-[var(--color-muted)] hover:border-[var(--color-brand)] transition-all whitespace-nowrap">
-            + New JD
-          </Link>
-          <button
-            id="run-match-btn"
-            className="px-6 py-2.5 rounded-xl bg-[var(--color-brand)] text-white font-semibold text-sm disabled:opacity-50 hover:brightness-110 transition-all flex items-center gap-2"
-            onClick={handleMatch}
-            disabled={!selectedJD || matching}
-          >
-            {matching ? <><div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> Matching…</> : "⚡ Run Match"}
-          </button>
         </div>
-      </div>
 
-      {match && (
-        <div className="grid grid-cols-[1fr_300px] gap-6">
-          <div>
-            <div className="flex items-center gap-3 mb-4">
-              <h2 className="text-base font-semibold">Results for <span className="text-[var(--color-brand-light)]">{match.jd_title}</span></h2>
-              <span className="text-xs text-[var(--color-dimmer)] px-2 py-0.5 rounded bg-[var(--color-surface-2)]">{match.total_matched} ranked</span>
-              {reranking && <div className="w-4 h-4 border-2 border-[var(--color-brand)] border-t-transparent rounded-full animate-spin" />}
+        {/* MAIN RANKING AREA */}
+        <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl p-6 min-h-[500px] shadow-sm">
+          {!selectedJD ? (
+            <div className="flex flex-col items-center justify-center h-full text-center opacity-50 py-32">
+               <div className="text-6xl mb-4">👈</div>
+               <h3 className="text-xl font-bold">Select a Job Description</h3>
+               <p className="text-sm mt-2">Filter and rank candidates by choosing a JD from the sidebar.</p>
             </div>
-            <div className="space-y-3">
-              {match.results.map((c) => (
-                <Link
-                  key={c.candidate_id}
-                  href={`/jds/${selectedJD}/candidates/${c.candidate_id}?session_id=${sessionId}`}
-                  className="flex items-center gap-4 p-4 bg-[var(--color-card)] border border-[var(--color-border)] rounded-xl hover:border-[var(--color-brand)] hover:shadow-[0_0_20px_var(--color-brand-dim)] transition-all group"
-                >
-                  <div className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 text-white ${rankClass(c.rank) ? `bg-gradient-to-br ${rankClass(c.rank)}` : "bg-[var(--color-surface-2)] text-[var(--color-muted)]"}`}>
-                    {c.rank}
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium text-sm">{c.name || "Anonymous"}</div>
-                    <div className="text-xs text-[var(--color-muted)] flex gap-2 mt-0.5">
-                      {c.years_of_experience != null && <span>{c.years_of_experience} yrs</span>}
-                      {c.most_recent_company && <span>🏢 {c.most_recent_company}</span>}
+          ) : matching ? (
+            <div className="flex flex-col items-center justify-center h-full text-center py-32 animate-fade-in">
+               <div className="w-12 h-12 border-4 border-[var(--color-brand)] border-t-transparent rounded-full animate-spin mb-4" />
+               <h3 className="font-semibold text-lg">Running Neural Dual-Stage Match...</h3>
+               <p className="text-sm text-[var(--color-muted)] mt-1">Sifting through vector embeddings & generating insights.</p>
+            </div>
+          ) : !match ? (
+             <div className="flex flex-col items-center justify-center h-full text-center py-32 animate-fade-in">
+               <div className="text-5xl mb-4">🎯</div>
+               <h3 className="text-xl font-bold mb-2">No Match Matrix Found</h3>
+               <p className="text-sm text-[var(--color-muted)] mb-6 max-w-sm">
+                 You haven't run the candidates against "{currentJdObj?.title}" yet.
+               </p>
+               <button onClick={handleMatch} className="px-6 py-3 rounded-xl bg-[var(--color-brand)] text-white font-bold tracking-wide shadow-lg hover:brightness-110 active:scale-95 transition-all">
+                 ⚡ Execute Match Pipeline
+               </button>
+             </div>
+          ) : (
+            <div className="animate-fade-in">
+               <div className="flex justify-between items-start mb-8 gap-6 border-b border-[var(--color-border-strong)] pb-6">
+                 <div>
+                   <h2 className="text-2xl font-bold tracking-tight mb-2">Results: {match.jd_title}</h2>
+                   <div className="flex items-center gap-3">
+                     <span className="text-sm text-[var(--color-muted)] px-3 py-1 rounded-full bg-[var(--color-surface-2)] font-medium">
+                        {match.total_matched} candidates ranked
+                     </span>
+                     {reranking && <span className="text-xs text-[var(--color-brand-light)] flex items-center gap-2"><div className="w-3 h-3 border-2 border-[var(--color-brand)] border-t-transparent rounded-full animate-spin" /> Reranking instantly...</span>}
+                   </div>
+                 </div>
+                 
+                 {/* Live Weights */}
+                 <div className="bg-[var(--color-surface-2)] border border-[var(--color-border-strong)] rounded-xl p-4 w-[350px] shadow-inner relative">
+                    <div className="text-[10px] uppercase font-bold text-[var(--color-muted)] mb-3 tracking-wider flex justify-between">
+                       <span>Live Prioritization Weights</span>
+                       <span className="text-[var(--color-brand-light)]">Persists securely</span>
                     </div>
-                    <div className="flex gap-1 mt-1.5 flex-wrap">
-                      {c.programming_languages.slice(0, 4).map((l) => (
-                        <span key={l} className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--color-surface-2)] border border-[var(--color-border)] text-[var(--color-muted)]">{l}</span>
+                    <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                      {Object.entries(weights).map(([key, val], i) => (
+                        <div key={key}>
+                          <div className="flex justify-between text-[10px] mb-1">
+                            <span className="text-[var(--color-muted)]">{WEIGHT_LABELS[key]}</span>
+                            <span className="font-semibold">{(val * 100).toFixed(0)}%</span>
+                          </div>
+                          <input
+                            type="range" min={0} max={1} step={0.01} value={val}
+                            style={{ accentColor: SCORE_COLORS[i % SCORE_COLORS.length] }}
+                            className="w-full h-1.5 focus:outline-none"
+                            onChange={(e) => handleWeightChange(key, parseFloat(e.target.value))}
+                          />
+                        </div>
                       ))}
                     </div>
-                  </div>
-                  <div className="text-center flex-shrink-0">
-                    <div className="text-xl font-bold" style={{ color: scoreColor(c.final_score) }}>
-                      {(c.final_score * 100).toFixed(0)}
-                    </div>
-                    <div className="text-[10px] text-[var(--color-dimmer)]">score</div>
-                  </div>
-                  <span className="text-[var(--color-dimmer)] group-hover:text-[var(--color-brand-light)] transition-colors">→</span>
-                </Link>
-              ))}
-            </div>
-          </div>
+                 </div>
+               </div>
 
-          <div className="space-y-4 sticky top-20 self-start">
-            <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-xl p-5">
-              <div className="text-sm font-semibold mb-1">🎛 Scoring Weights</div>
-              <div className="text-xs text-[var(--color-dimmer)] mb-4">Drag to re-rank instantly</div>
-              <div className="space-y-4">
-                {Object.entries(weights).map(([key, val], i) => (
-                  <div key={key}>
-                    <div className="flex justify-between text-xs mb-1.5">
-                      <span className="text-[var(--color-muted)]">{WEIGHT_LABELS[key]}</span>
-                      <span className="font-semibold text-[var(--color-brand-light)]">{(val * 100).toFixed(0)}%</span>
+               <div className="space-y-3">
+                {match.results.map((c) => (
+                  <Link
+                    key={c.candidate_id}
+                    href={`/jds/${selectedJD}/candidates/${c.candidate_id}?session_id=${sessionId}`}
+                    className="flex items-center justify-between p-4 bg-[var(--color-surface-2)] border border-[var(--color-border)] rounded-xl hover:border-[var(--color-brand-light)] hover:bg-[var(--color-card)] hover:shadow-lg transition-all group"
+                  >
+                    <div className="flex items-center gap-5">
+                      <div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold text-white shadow-sm ${rankClass(c.rank)}`}>
+                        {c.rank}
+                      </div>
+                      <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>}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-8">
+                       <div className="flex gap-1.5">
+                         {c.programming_languages.slice(0, 3).map((l) => (
+                           <span key={l} className="text-[10px] px-2 py-0.5 rounded-full bg-[var(--color-border-strong)] text-[var(--color-text)] border border-[var(--color-border)]">{l}</span>
+                         ))}
+                         {c.programming_languages.length > 3 && <span className="text-[10px] px-2 py-0.5 text-[var(--color-muted)]">+{c.programming_languages.length - 3}</span>}
+                       </div>
+                       
+                       <div className="text-right w-16">
+                         <div className="text-2xl font-bold tracking-tighter" style={{ color: scoreColor(c.final_score) }}>
+                           {(c.final_score * 100).toFixed(0)}
+                         </div>
+                         <div className="text-[9px] uppercase tracking-widest text-[var(--color-dimmer)]">Match</div>
+                       </div>
                     </div>
-                    <input
-                      id={`w-${key}`}
-                      type="range" min={0} max={1} step={0.01} value={val}
-                      style={{ width: "100%", accentColor: SCORE_COLORS[i % SCORE_COLORS.length] }}
-                      onChange={(e) => {
-                        const nw = { ...weights, [key]: parseFloat(e.target.value) };
-                        setWeights(nw);
-                        handleWeightChange(nw);
-                      }}
-                    />
-                  </div>
+                  </Link>
                 ))}
               </div>
             </div>
-
-            {match.jd_quality && (
-              <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-xl p-5">
-                <div className="text-sm font-semibold mb-4">📊 JD Quality</div>
-                {match.jd_quality.warnings?.map((w, i) => (
-                  <div key={i} className="text-xs text-yellow-400 bg-yellow-400/10 border border-yellow-400/20 rounded-lg px-3 py-2 mb-2">⚠ {w}</div>
-                ))}
-                <div className="text-xs text-[var(--color-muted)]">Skills detected: <strong className="text-[var(--color-text)]">{match.jd_quality.skill_count}</strong></div>
-              </div>
-            )}
-          </div>
+          )}
         </div>
-      )}
-
-      {!match && !matching && (
-        <div className="text-center py-20 bg-[var(--color-card)] border border-dashed border-[var(--color-border-strong)] rounded-2xl">
-          <div className="text-4xl mb-3">🎯</div>
-          <div className="font-semibold mb-2">Ready to match</div>
-          <div className="text-sm text-[var(--color-muted)]">Select a JD above and click Run Match to start the pipeline</div>
-        </div>
-      )}
+      </div>
     </div>
   );
 }

frontend/src/lib/api.ts

@@ -10,6 +10,9 @@ async function request<T>(path: string, options?: RequestInit): Promise<T> {
     const err = await res.json().catch(() => ({ detail: res.statusText }));
     throw new Error(err.detail || "Request failed");
   }
+  if (res.status === 202) {
+    throw new Error("202_ACCEPTED");
+  }
   return res.json();
 }