feat: updated pipeline to support matching against multiple JDs sequentially

frontend/src/app/pipeline/page.tsx

@@ -4,18 +4,23 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { api } from "../../lib/api";
 
+interface JDInput {
+  title: string;
+  desc: string;
+}
+
 interface PipelineState {
   status: "idle" | "uploading" | "embedding" | "matching" | "complete";
   sessionName: string;
-  jdTitle: string;
-  jdId?: string;
+  jdsInfo: JDInput[];
+  jdIds: string[];
   sessionId?: string;
   taskId?: string;
   startTime?: number;
   elapsedTime: number;
 }
 
-const DEFAULT_STATE: PipelineState = { status: "idle", sessionName: "", jdTitle: "", elapsedTime: 0 };
+const DEFAULT_STATE: PipelineState = { status: "idle", sessionName: "", jdsInfo: [], jdIds: [], elapsedTime: 0 };
 
 export default function PipelinePage() {
   const router = useRouter();
@@ -31,8 +36,7 @@ export default function PipelinePage() {
 
   // Inputs
   const [sessionName, setSessionName] = useState("");
-  const [jdTitle, setJdTitle] = useState("");
-  const [jdDesc, setJdDesc] = useState("");
+  const [jds, setJds] = useState<JDInput[]>([{ title: "", desc: "" }]);
   const [file, setFile] = useState<File | null>(null);
 
   // Architecture state
@@ -51,7 +55,7 @@ export default function PipelinePage() {
           setState(p);
           // Resume pipeline loop
           if (p.status === "embedding" && p.taskId) pollEmbedding(p.taskId, p);
-          if (p.status === "matching" && p.jdId && p.sessionId) runMatch(p.jdId, p.sessionId, p);
+          if (p.status === "matching" && p.jdIds.length > 0 && p.sessionId) runMatches(p.jdIds, p.sessionId, p);
         }
       } catch (e) {}
     }
@@ -85,31 +89,49 @@ export default function PipelinePage() {
     });
   };
 
+  const addJd = () => setJds([...jds, { title: "", desc: "" }]);
+  const removeJd = (idx: number) => {
+    if (jds.length === 1) return;
+    const newJds = [...jds];
+    newJds.splice(idx, 1);
+    setJds(newJds);
+  };
+  const updateJd = (idx: number, field: keyof JDInput, val: string) => {
+    const newJds = [...jds];
+    newJds[idx][field] = val;
+    setJds(newJds);
+  };
+
   const startPipeline = async () => {
-    if (!sessionName || !jdTitle || !jdDesc || !file) {
-      setError("Please fill out all fields and select a file.");
+    if (!sessionName || !file) {
+      setError("Please provide a Session Name and select a file.");
+      return;
+    }
+    if (jds.some(jd => !jd.title || !jd.desc)) {
+      setError("Please fill out both Title and Description for all Job Descriptions.");
       return;
     }
     setError(null);
     const start = Date.now();
-    updateState({ status: "uploading", sessionName, jdTitle, startTime: start, elapsedTime: 0 });
+    updateState({ status: "uploading", sessionName, jdsInfo: jds, startTime: start, elapsedTime: 0 });
 
     try {
-      // 1. Create Session & JD parallel
-      const [session, jd] = await Promise.all([
-        api.createSession(sessionName, "Generated by Auto-Pipeline"),
-        api.createJD(jdTitle, jdDesc)
-      ]);
+      // 1. Create Session & JDs parallel
+      const sessionPromise = api.createSession(sessionName, "Generated by Auto-Pipeline");
+      const jdPromises = jds.map(jd => api.createJD(jd.title, jd.desc));
+
+      const [session, ...createdJDs] = await Promise.all([sessionPromise, ...jdPromises]);
+      const jdIds = createdJDs.map(j => (j as any).id);
       
-      updateState({ sessionId: session.id, jdId: jd.id });
+      updateState({ sessionId: (session as any).id, jdIds });
 
       // 2. Upload file
-      const uploadRes = await api.uploadCandidates(file, session.id);
+      const uploadRes = await api.uploadCandidates(file, (session as any).id);
       
       updateState({ status: "embedding", taskId: uploadRes.task_id });
       
       // 3. Poll embedding
-      pollEmbedding(uploadRes.task_id, { ...state, status: "embedding", sessionId: session.id, jdId: jd.id, startTime: start });
+      pollEmbedding(uploadRes.task_id, { ...state, status: "embedding", sessionId: (session as any).id, jdIds, startTime: start });
 
     } catch (e: any) {
       setError("Pipeline failed: " + e.message);
@@ -124,7 +146,7 @@ export default function PipelinePage() {
         if (s.status === "SUCCESS") {
           clearInterval(poll);
           updateState({ status: "matching" });
-          runMatch(currentState.jdId!, currentState.sessionId!, currentState);
+          runMatches(currentState.jdIds, currentState.sessionId!, currentState);
         } else if (s.status === "FAILURE") {
           clearInterval(poll);
           setError("Vector embedding failed.");
@@ -136,9 +158,10 @@ export default function PipelinePage() {
     }, 3000);
   };
 
-  const runMatch = async (jdId: string, sessionId: string, currentState: PipelineState) => {
+  const runMatches = async (jdIds: string[], sessionId: string, currentState: PipelineState) => {
     try {
-      await api.triggerMatch(jdId, sessionId);
+      // 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);
@@ -158,7 +181,7 @@ export default function PipelinePage() {
     <div className="max-w-4xl mx-auto px-6 py-12">
       <div className="text-center mb-10">
         <h1 className="text-3xl font-extrabold tracking-tight mb-3">Universal Run Pipeline</h1>
-        <p className="text-[var(--color-muted)] text-sm">One-way sequential ingestion, mapping, and reranking hook.</p>
+        <p className="text-[var(--color-muted)] text-sm">One-way sequential ingestion, mapping, and reranking hook for multiple JDs.</p>
       </div>
 
       {/* STEPPER UI */}
@@ -208,26 +231,11 @@ export default function PipelinePage() {
 
       {state.status === "idle" ? (
         <div className="bg-[var(--color-card)] border border-[var(--color-border)] rounded-2xl p-8 shadow-xl shadow-black/5">
-          <div className="grid grid-cols-2 gap-6 mb-6">
-            <div>
-              <label className="block text-xs font-medium text-[var(--color-muted)] mb-2">Session Name</label>
-              <input type="text" placeholder="e.g. Q3 Engineering Batch (100k)" 
-                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)] transition-all"
-                value={sessionName} onChange={e => setSessionName(e.target.value)} />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-[var(--color-muted)] mb-2">Job Title</label>
-              <input type="text" placeholder="e.g. Senior Backend Engineer" 
-                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)] transition-all"
-                value={jdTitle} onChange={e => setJdTitle(e.target.value)} />
-            </div>
-          </div>
-          
           <div className="mb-6">
-             <label className="block text-xs font-medium text-[var(--color-muted)] mb-2">Job Description</label>
-             <textarea placeholder="Paste the full job description here..." rows={4}
-               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)] transition-all resize-none"
-               value={jdDesc} onChange={e => setJdDesc(e.target.value)} />
+            <label className="block text-xs font-medium text-[var(--color-muted)] mb-2">Session Name</label>
+            <input type="text" placeholder="e.g. Q3 Engineering Batch (100k)" 
+              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)] transition-all"
+              value={sessionName} onChange={e => setSessionName(e.target.value)} />
           </div>
 
           <div className="mb-8">
@@ -237,6 +245,45 @@ export default function PipelinePage() {
                onChange={e => setFile(e.target.files?.[0] || null)} />
           </div>
 
+          <div className="mb-6 border-t border-[var(--color-border-strong)] pt-6">
+            <div className="flex items-center justify-between mb-4">
+              <label className="block text-sm font-bold text-[var(--color-text)]">Job Descriptions to Match</label>
+              <button 
+                onClick={addJd}
+                className="text-xs px-3 py-1.5 rounded-lg bg-[var(--color-surface-2)] border border-[var(--color-border)] text-[var(--color-muted)] hover:text-[var(--color-text)] transition-colors"
+              >
+                + Add Another JD
+              </button>
+            </div>
+            
+            <div className="space-y-6">
+              {jds.map((jd, idx) => (
+                <div key={idx} className="bg-[var(--color-surface-2)] p-4 rounded-xl border border-[var(--color-border)] relative group">
+                  {jds.length > 1 && (
+                    <button 
+                      onClick={() => removeJd(idx)}
+                      className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-[var(--color-card)] border border-[var(--color-border-strong)] text-[var(--color-muted)] hover:text-red-400 hover:border-red-400 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-all z-10"
+                    >
+                      ×
+                    </button>
+                  )}
+                  <div className="mb-3">
+                    <label className="block text-xs font-medium text-[var(--color-muted)] mb-2">JD {idx + 1} Title</label>
+                    <input type="text" placeholder="e.g. Senior Backend Engineer" 
+                      className="w-full bg-[var(--color-card)] border border-[var(--color-border-strong)] rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-brand)] transition-all"
+                      value={jd.title} onChange={e => updateJd(idx, "title", e.target.value)} />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-[var(--color-muted)] mb-2">JD {idx + 1} Description</label>
+                    <textarea placeholder="Paste the full job description here..." rows={3}
+                      className="w-full bg-[var(--color-card)] border border-[var(--color-border-strong)] rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-brand)] transition-all resize-none"
+                      value={jd.desc} onChange={e => updateJd(idx, "desc", e.target.value)} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
           <button onClick={startPipeline}
             className="w-full py-4 rounded-xl bg-[var(--color-brand)] text-white font-bold tracking-wide shadow-lg shadow-[var(--color-brand-glow)] hover:brightness-110 transition-all active:scale-[0.98]">
             START AUTOMATED PIPELINE
@@ -247,11 +294,30 @@ export default function PipelinePage() {
            <div className="text-6xl mb-4">🎉</div>
            <h2 className="text-2xl font-bold mb-2">Automated Inference Complete!</h2>
            <p className="text-[var(--color-muted)] mb-8 max-w-sm mx-auto">
-             100% of candidate logic calculated safely. The background worker is aggressively pulling LLM explanations for the top 60 right now.
+             100% of candidate logic calculated safely for <strong>{state.jdIds.length}</strong> Job Descriptions. The background worker is aggressively pulling LLM explanations for the top 60 right now.
            </p>
-           <button onClick={() => router.push(`/jds/${state.jdId}?session_id=${state.sessionId}`)}
-             className="px-8 py-3 rounded-xl bg-[var(--color-brand)] text-white font-semibold hover:brightness-110 transition-all shadow-lg shadow-[var(--color-brand-glow)]">
-             View Ranked Candidates →
+           
+           <div className="max-w-md mx-auto bg-[var(--color-surface-2)] rounded-xl border border-[var(--color-border)] p-4 mb-6">
+              <div className="text-xs font-bold text-[var(--color-muted)] uppercase tracking-wider mb-3 text-left">View Matches By JD:</div>
+              <div className="space-y-2">
+                {state.jdsInfo.map((info, idx) => (
+                  <Link 
+                    key={idx}
+                    href={`/jds/${state.jdIds[idx]}?session_id=${state.sessionId}`}
+                    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>
+                    <span className="text-[10px] px-2 py-1 bg-[var(--color-brand-dim)] text-[var(--color-brand-light)] border border-[var(--color-brand-glow)] rounded-full flex-shrink-0">
+                      View Ranking →
+                    </span>
+                  </Link>
+                ))}
+              </div>
+           </div>
+           
+           <button onClick={() => updateState({ status: "idle", jdsInfo: [{ title: "", desc: "" }], jdIds: [], sessionName: "", startTime: undefined })}
+             className="text-xs text-[var(--color-muted)] hover:text-[var(--color-text)] underline underline-offset-2">
+             Start a new pipeline run
            </button>
         </div>
       ) : (
@@ -260,7 +326,7 @@ export default function PipelinePage() {
            <h2 className="text-xl font-semibold mb-2">
              {state.status === "uploading" ? "Broadcasting to Postgres DB..." 
                : state.status === "embedding" ? "Running Core CPU Vector Space Projection..." 
-               : "Executing Dual-Stage Neural Match..."}
+               : `Executing Dual-Stage Neural Match for ${state.jdIds.length} JDs...`}
            </h2>
            <p className="text-[var(--color-dimmer)] text-sm">
              Do not close this tab. The timer will automatically pause and redirect upon completion.