fix: Duplicate state Removed from tsx

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

@@ -29,7 +29,6 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
   const [reranking, setReranking] = useState(false);
   const [loading, setLoading] = useState(true);
   const [candidateSearch, setCandidateSearch] = useState("");
-  const [candidateSearch, setCandidateSearch] = useState("");
 
   const debounce = useCallback(<T extends unknown[]>(fn: (...args: T) => void, ms: number) => {
     let t: ReturnType<typeof setTimeout>;
@@ -40,7 +39,7 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
     try {
       const [s, jList] = await Promise.all([api.getSession(sessionId), api.listJDs()]);
       setSession(s);
-      
+
       // Filter JDs to only those created for this specific session
       // The pipeline page stores this mapping in localStorage when it finishes
       let filteredJDs = jList as JD[];
@@ -49,9 +48,9 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
         if (mapping[sessionId] && Array.isArray(mapping[sessionId]) && mapping[sessionId].length > 0) {
           filteredJDs = filteredJDs.filter(jd => mapping[sessionId].includes(jd.id));
         }
-      } catch (e) {}
+      } catch (e) { }
       setJDs(filteredJDs);
-      
+
       // If a JD is selected, load its match info automatically
       if (initialJdId) {
         const jdInfo = (jList as JD[]).find(x => x.id === initialJdId);
@@ -60,20 +59,20 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
           : DEFAULT_WEIGHTS;
 
         if (typeof window !== "undefined") {
-            const stored = localStorage.getItem(`coderound_w_${initialJdId}_${sessionId}`);
-            if (stored) {
-                try { initialW = JSON.parse(stored); } catch (e) {}
-            }
+          const stored = localStorage.getItem(`coderound_w_${initialJdId}_${sessionId}`);
+          if (stored) {
+            try { initialW = JSON.parse(stored); } catch (e) { }
+          }
         }
         setWeights(initialW);
-        
+
         try {
-           const r = await api.getMatchResults(initialJdId, sessionId);
-           setMatch(r);
-           setBaseResults(r.results);
+          const r = await api.getMatchResults(initialJdId, sessionId);
+          setMatch(r);
+          setBaseResults(r.results);
         } catch {
-           setMatch(null);
-           setBaseResults(null);
+          setMatch(null);
+          setBaseResults(null);
         }
       }
     } catch (e) {
@@ -90,7 +89,7 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
     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 {
@@ -113,7 +112,7 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
     if (!selectedJD) return;
     setMatching(true);
     let attempts = 0;
-    
+
     const poll = async () => {
       try {
         const r = await api.triggerMatch(selectedJD, sessionId);
@@ -122,16 +121,16 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
         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);
-           }
+          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);
+          alert("Matching error: " + e.message);
+          setMatching(false);
         }
       }
     };
@@ -158,12 +157,12 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
       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 };
+        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);
@@ -214,11 +213,10 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
                 <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)]" 
+                  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>
@@ -232,118 +230,118 @@ export default function SessionDetailPage({ params }: { params: Promise<{ id: st
         <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 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>
           ) : 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 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="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="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={{ "--thumb-color": SCORE_COLORS[i % SCORE_COLORS.length] } as any}
-                            className="cursor-pointer"
-                            onChange={(e) => {
-                               const nw = { ...weights, [key]: parseFloat(e.target.value) };
-                               if (selectedJD && typeof window !== "undefined") {
-                                 localStorage.setItem(`coderound_w_${selectedJD}_${sessionId}`, JSON.stringify(nw));
-                               }
-                               handleWeightChange(key, parseFloat(e.target.value));
-                            }}
-                          />
+              <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="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>
-                      ))}
-                    </div>
-                 </div>
-               </div>
+                        <input
+                          type="range" min={0} max={1} step={0.01} value={val}
+                          style={{ "--thumb-color": SCORE_COLORS[i % SCORE_COLORS.length] } as any}
+                          className="cursor-pointer"
+                          onChange={(e) => {
+                            const nw = { ...weights, [key]: parseFloat(e.target.value) };
+                            if (selectedJD && typeof window !== "undefined") {
+                              localStorage.setItem(`coderound_w_${selectedJD}_${sessionId}`, JSON.stringify(nw));
+                            }
+                            handleWeightChange(key, parseFloat(e.target.value));
+                          }}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
 
-               <div className="mb-4">
-                 <input
-                   type="text"
-                   placeholder="Search candidate by name..."
-                   value={candidateSearch}
-                   onChange={e => setCandidateSearch(e.target.value)}
-                   className="w-full bg-[var(--color-surface-2)] border border-[var(--color-border-strong)] focus:border-[var(--color-brand)] rounded-xl px-4 py-2.5 text-sm outline-none transition-all"
-                 />
-               </div>
-               <div className="space-y-3">
+              <div className="mb-4">
+                <input
+                  type="text"
+                  placeholder="Search candidate by name..."
+                  value={candidateSearch}
+                  onChange={e => setCandidateSearch(e.target.value)}
+                  className="w-full bg-[var(--color-surface-2)] border border-[var(--color-border-strong)] focus:border-[var(--color-brand)] rounded-xl px-4 py-2.5 text-sm outline-none transition-all"
+                />
+              </div>
+              <div className="space-y-3">
                 {match.results
                   .filter(c => !candidateSearch || (c.name || "").toLowerCase().includes(candidateSearch.toLowerCase()))
                   .map((c) => (
-                  <Link
-                    key={c.candidate_id}
-                    href={`/jds/${selectedJD}/candidates/${c.candidate_id}?batch=${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}
+                    <Link
+                      key={c.candidate_id}
+                      href={`/jds/${selectedJD}/candidates/${c.candidate_id}?batch=${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"><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>
-                      <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"><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 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>
-                    </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>
-                  </Link>
-                ))}
+                    </Link>
+                  ))}
               </div>
             </div>
           )}