feat: add JD detail page with ranked candidates and weight sliders

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

@@ -0,0 +1,302 @@
+"use client";
+import { useEffect, useState, useCallback, useRef } from "react";
+import { useParams } from "next/navigation";
+import { api, type JD, type MatchResponse, type MatchedCandidate } from "../../../lib/api";
+
+const DEFAULT_WEIGHTS = {
+  semantic: 0.20, skill: 0.35, yoe: 0.15, company: 0.10, growth: 0.10, education: 0.10,
+};
+
+const WEIGHT_LABELS: Record<string, string> = {
+  semantic: "Semantic Sim", skill: "Skill Overlap", yoe: "Experience",
+  company: "Company Quality", growth: "Career Growth", education: "Education",
+};
+
+const SCORE_COLORS = ["#6c63ff", "#22c55e", "#3b82f6", "#f59e0b", "#a78bfa", "#34d399"];
+
+export default function JDDetailPage() {
+  const params = useParams<{ id: string }>();
+  const jdId = params.id;
+
+  const [jd, setJD] = useState<JD | null>(null);
+  const [match, setMatch] = useState<MatchResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [matching, setMatching] = useState(false);
+  const [weights, setWeights] = useState(DEFAULT_WEIGHTS);
+  const [reranking, setReranking] = useState(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [jdData, matchData] = await Promise.all([
+        api.getJD(jdId),
+        api.getMatchResults(jdId).catch(() => null),
+      ]);
+      setJD(jdData);
+      setMatch(matchData);
+    } finally {
+      setLoading(false);
+    }
+  }, [jdId]);
+
+  useEffect(() => { loadData(); }, [loadData]);
+
+  const handleTriggerMatch = async () => {
+    setMatching(true);
+    try {
+      const result = await api.triggerMatch(jdId);
+      setMatch(result);
+    } finally {
+      setMatching(false);
+    }
+  };
+
+  const handleWeightChange = (key: string, value: number) => {
+    const newWeights = { ...weights, [key]: value };
+    setWeights(newWeights);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(async () => {
+      setReranking(true);
+      const result = await api.rerank(jdId, newWeights).catch(() => null);
+      if (result) setMatch(result);
+      setReranking(false);
+    }, 400);
+  };
+
+  const scoreColor = (score: number) => {
+    if (score >= 0.7) return "var(--green)";
+    if (score >= 0.45) return "var(--yellow)";
+    return "var(--red)";
+  };
+
+  const rankClass = (rank: number) => {
+    if (rank === 1) return "rank-1";
+    if (rank === 2) return "rank-2";
+    if (rank === 3) return "rank-3";
+    return "rank-other";
+  };
+
+  if (loading) {
+    return (
+      <main className="page"><div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "60vh" }}>
+        <div style={{ textAlign: "center" }}>
+          <div className="spinner" style={{ width: 40, height: 40, margin: "0 auto 16px" }} />
+          <div style={{ color: "var(--text-secondary)" }}>Loading…</div>
+        </div>
+      </div></main>
+    );
+  }
+
+  if (!jd) return <main className="page"><div className="container"><p>JD not found</p></div></main>;
+
+  const quality = jd.jd_quality;
+  const qualityColor = quality?.overall === "good" ? "badge-green" : quality?.overall === "fair" ? "badge-yellow" : "badge-red";
+
+  return (
+    <main className="page">
+      <div className="container">
+        <div style={{ marginBottom: 24 }}>
+          <a href="/" style={{ color: "var(--text-muted)", fontSize: "0.8125rem", display: "inline-flex", alignItems: "center", gap: 6, marginBottom: 16 }}>← Dashboard</a>
+          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
+            <div>
+              <h1 className="page-title">{jd.title}</h1>
+              <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 8 }}>
+                {jd.engineer_type && <span className="badge badge-purple">🔧 {jd.engineer_type}</span>}
+                {jd.min_yoe && <span className="badge badge-blue">📅 {jd.min_yoe}+ yrs</span>}
+                {jd.location && <span className="badge badge-blue">📍 {jd.location}</span>}
+                {quality && <span className={`badge ${qualityColor}`}>{quality.overall === "good" ? "✓" : "⚠"} JD {quality.overall}</span>}
+              </div>
+            </div>
+            <button id="trigger-match-btn" className="btn btn-primary" onClick={handleTriggerMatch} disabled={matching || jd.status !== "ready"}>
+              {matching ? <><div className="spinner" style={{ width: 16, height: 16 }} /> Matching…</> : match ? "🔄 Re-run Match" : "⚡ Run Match"}
+            </button>
+          </div>
+        </div>
+
+        {quality?.warnings?.length > 0 && (
+          <div style={{ marginBottom: 24, padding: "14px 18px", borderRadius: 12, background: "rgba(234,179,8,0.08)", border: "1px solid rgba(234,179,8,0.3)" }}>
+            <div style={{ fontWeight: 600, fontSize: "0.875rem", color: "var(--yellow)", marginBottom: 6 }}>⚠ JD Quality Issues</div>
+            {quality.warnings.map((w, i) => (
+              <div key={i} style={{ fontSize: "0.8125rem", color: "var(--text-secondary)", marginTop: 4 }}>• {w}</div>
+            ))}
+          </div>
+        )}
+
+        {jd.required_skills?.length > 0 && (
+          <div style={{ marginBottom: 24, display: "flex", flexWrap: "wrap", gap: 6 }}>
+            {jd.required_skills.map((s) => <span key={s} className="chip">{s}</span>)}
+          </div>
+        )}
+
+        <div className="grid-2" style={{ gap: 24, alignItems: "start" }}>
+          <div>
+            {!match && !matching && (
+              <div style={{ textAlign: "center", padding: "60px 20px", background: "var(--bg-card)", borderRadius: "var(--radius-xl)", border: "1px dashed var(--border)" }}>
+                <div style={{ fontSize: "2.5rem", marginBottom: 12 }}>🎯</div>
+                <div style={{ fontWeight: 600, marginBottom: 8 }}>No results yet</div>
+                <div style={{ color: "var(--text-secondary)", fontSize: "0.875rem", marginBottom: 20 }}>Click Run Match to start the two-stage pipeline</div>
+                <button className="btn btn-primary" onClick={handleTriggerMatch} disabled={jd.status !== "ready"}>
+                  ⚡ Run Match
+                </button>
+              </div>
+            )}
+
+            {matching && (
+              <div style={{ textAlign: "center", padding: "60px 20px", background: "var(--bg-card)", borderRadius: "var(--radius-xl)", border: "1px solid var(--border)" }}>
+                <div className="spinner" style={{ width: 48, height: 48, margin: "0 auto 16px" }} />
+                <div style={{ fontWeight: 600 }}>Running Stage 1 → Stage 2 pipeline…</div>
+                <div style={{ color: "var(--text-secondary)", fontSize: "0.875rem", marginTop: 8 }}>ANN search → feature scoring → cross-encoder reranking</div>
+              </div>
+            )}
+
+            {match && (
+              <div>
+                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
+                  <div style={{ fontWeight: 600, fontSize: "1rem" }}>
+                    Top Matches
+                    <span style={{ marginLeft: 10, fontWeight: 400, color: "var(--text-secondary)", fontSize: "0.875rem" }}>
+                      {match.total_matched} candidates ranked
+                    </span>
+                  </div>
+                  {reranking && <div className="spinner" style={{ width: 18, height: 18 }} />}
+                </div>
+                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+                  {match.results.map((c) => (
+                    <CandidateCard key={c.candidate_id} candidate={c} jdId={jdId} rankClass={rankClass} scoreColor={scoreColor} />
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div style={{ display: "flex", flexDirection: "column", gap: 16, position: "sticky", top: 80 }}>
+            <div className="weight-panel">
+              <div style={{ fontWeight: 600, fontSize: "0.9rem", marginBottom: 4 }}>🎛 Adjust Scoring Weights</div>
+              <div style={{ fontSize: "0.775rem", color: "var(--text-muted)", marginBottom: 16 }}>Drag sliders to re-rank instantly. No re-embedding needed.</div>
+              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+                {Object.entries(weights).map(([key, val], i) => (
+                  <div key={key} className="weight-row">
+                    <div className="weight-label-row">
+                      <span className="weight-key">{WEIGHT_LABELS[key] || key}</span>
+                      <span className="weight-val">{(val * 100).toFixed(0)}%</span>
+                    </div>
+                    <input
+                      id={`weight-${key}`} type="range" className="slider"
+                      min={0} max={1} step={0.01} value={val}
+                      onChange={(e) => handleWeightChange(key, parseFloat(e.target.value))}
+                      style={{ accentColor: SCORE_COLORS[i % SCORE_COLORS.length] }}
+                    />
+                  </div>
+                ))}
+              </div>
+              <button className="btn btn-ghost btn-sm" style={{ marginTop: 16, width: "100%" }}
+                onClick={() => { setWeights(DEFAULT_WEIGHTS); api.rerank(jdId, DEFAULT_WEIGHTS).then((r) => r && setMatch(r)); }}>
+                ↺ Reset to default
+              </button>
+            </div>
+
+            {match?.jd_quality && (
+              <div className="card" style={{ padding: 20 }}>
+                <div style={{ fontWeight: 600, fontSize: "0.9rem", marginBottom: 12 }}>📊 JD Quality Report</div>
+                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+                  {[
+                    { label: "Vagueness", val: match.jd_quality.vagueness_score, invert: true },
+                    { label: "Breadth", val: match.jd_quality.breadth_score, invert: true },
+                  ].map(({ label, val, invert }) => (
+                    <div key={label} className="score-bar-row">
+                      <span className="score-bar-label">{label}</span>
+                      <div className="score-bar-track">
+                        <div className="score-bar-fill" style={{ width: `${val * 100}%`, background: invert ? (val > 0.6 ? "var(--red)" : val > 0.35 ? "var(--yellow)" : "var(--green)") : "var(--accent)" }} />
+                      </div>
+                      <span className="score-bar-pct">{(val * 100).toFixed(0)}%</span>
+                    </div>
+                  ))}
+                  <div style={{ fontSize: "0.775rem", color: "var(--text-secondary)", marginTop: 4 }}>
+                    Skills found: <strong>{match.jd_quality.skill_count}</strong>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+function CandidateCard({ candidate, jdId, rankClass, scoreColor }: {
+  candidate: MatchedCandidate; jdId: string;
+  rankClass: (r: number) => string; scoreColor: (s: number) => string;
+}) {
+  const comp = candidate.component_scores;
+  const bars = [
+    { key: "skill", label: "Skill", val: comp.skill, color: SCORE_COLORS[1] },
+    { key: "semantic", label: "Semantic", val: comp.semantic, color: SCORE_COLORS[0] },
+    { key: "yoe", label: "YOE", val: comp.yoe, color: SCORE_COLORS[2] },
+  ];
+
+  return (
+    <a href={`/jds/${jdId}/candidates/${candidate.candidate_id}`} id={`cand-${candidate.candidate_id}`}
+      style={{ display: "block", textDecoration: "none" }}>
+      <div className="candidate-card">
+        <div className="candidate-card-top">
+          <div className={`rank-badge ${rankClass(candidate.rank)}`}>{candidate.rank}</div>
+          <div className="candidate-card-info">
+            <div className="candidate-name">{candidate.name || "Anonymous Candidate"}</div>
+            <div className="candidate-meta">
+              {candidate.years_of_experience != null && <span>📅 {candidate.years_of_experience} yrs</span>}
+              {candidate.engineer_type && <span>🔧 {candidate.engineer_type}</span>}
+              {candidate.most_recent_company && <span>🏢 {candidate.most_recent_company}</span>}
+            </div>
+          </div>
+          <div className="score-pill">
+            <div className="score-pill-value" style={{ color: scoreColor(candidate.final_score) }}>
+              {(candidate.final_score * 100).toFixed(0)}
+            </div>
+            <div className="score-pill-label">score</div>
+          </div>
+        </div>
+
+        {candidate.parsed_summary && (
+          <div style={{ fontSize: "0.8rem", color: "var(--text-secondary)", lineHeight: 1.5, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" as "vertical", overflow: "hidden" }}>
+            {candidate.parsed_summary}
+          </div>
+        )}
+
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
+          {candidate.programming_languages.slice(0, 5).map((l) => (
+            <span key={l} className="chip">{l}</span>
+          ))}
+          {candidate.programming_languages.length > 5 && (
+            <span className="chip">+{candidate.programming_languages.length - 5}</span>
+          )}
+        </div>
+
+        <div className="score-bar-wrap">
+          {bars.map(({ key, label, val, color }) => (
+            <div key={key} className="score-bar-row">
+              <span className="score-bar-label">{label}</span>
+              <div className="score-bar-track">
+                <div className="score-bar-fill" style={{ width: `${val * 100}%`, background: color }} />
+              </div>
+              <span className="score-bar-pct">{(val * 100).toFixed(0)}%</span>
+            </div>
+          ))}
+        </div>
+
+        {candidate.gaps.length > 0 && (
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
+            {candidate.gaps.slice(0, 3).map((g, i) => (
+              <span key={i} style={{ fontSize: "0.72rem", padding: "2px 8px", borderRadius: 6, background: "var(--red-dim)", color: "var(--red)", border: "1px solid rgba(239,68,68,0.2)" }}>
+                ⚠ {g.type.replace("_", " ")}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </a>
+  );
+}
+
+const SCORE_COLORS = ["#6c63ff", "#22c55e", "#3b82f6", "#f59e0b", "#a78bfa", "#34d399"];