feat(tests): review panels, blind visibility UX, red_review/blue_review badges

frontend/src/components/AddTestToCampaignModal.tsx

@@ -22,7 +22,9 @@ import type { Test, TestState, TestTemplateSummary } from "../types/models";
 const stateBadge: Record<TestState, string> = {
   draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
   red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
+  red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
   blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
+  blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
   in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
   validated: "bg-green-900/50 text-green-400 border-green-500/30",
   rejected: "bg-red-900/50 text-red-400 border-red-500/30",

frontend/src/components/CampaignTimeline.tsx

@@ -22,7 +22,9 @@ const PHASES = [
 const stateColors: Record<string, { bg: string; text: string; border: string }> = {
   draft: { bg: "bg-gray-800", text: "text-gray-400", border: "border-gray-600" },
   red_executing: { bg: "bg-orange-900/50", text: "text-orange-400", border: "border-orange-500/50" },
+  red_review: { bg: "bg-amber-900/50", text: "text-amber-400", border: "border-amber-500/50" },
   blue_evaluating: { bg: "bg-indigo-900/50", text: "text-indigo-400", border: "border-indigo-500/50" },
+  blue_review: { bg: "bg-purple-900/50", text: "text-purple-400", border: "border-purple-500/50" },
   in_review: { bg: "bg-blue-900/50", text: "text-blue-400", border: "border-blue-500/50" },
   validated: { bg: "bg-green-900/50", text: "text-green-400", border: "border-green-500/50" },
   rejected: { bg: "bg-red-900/50", text: "text-red-400", border: "border-red-500/50" },

frontend/src/components/test-detail/ReviewModal.tsx

@@ -0,0 +1,252 @@
+import { useState } from "react";
+import {
+  CheckCircle,
+  RotateCcw,
+  AlertTriangle,
+  Loader2,
+  Shield,
+  ShieldCheck,
+  FileIcon,
+  X,
+} from "lucide-react";
+import type { Test } from "../../types/models";
+
+// ── Props ──────────────────────────────────────────────────────────
+
+type RedDecision = "approve" | "reopen";
+type BlueDecision = "approve" | "reopen" | "gap";
+
+interface ReviewModalProps {
+  side: "red" | "blue";
+  test: Test;
+  isSubmitting: boolean;
+  onSubmitRed?: (decision: RedDecision, notes: string) => void;
+  onSubmitBlue?: (decision: BlueDecision, notes: string, systemGaps: string) => void;
+  onClose: () => void;
+}
+
+// ── Component ──────────────────────────────────────────────────────
+
+export default function ReviewModal({
+  side,
+  test,
+  isSubmitting,
+  onSubmitRed,
+  onSubmitBlue,
+  onClose,
+}: ReviewModalProps) {
+  const isRed = side === "red";
+  const [decision, setDecision] = useState<RedDecision | BlueDecision | null>(null);
+  const [notes, setNotes] = useState("");
+  const [systemGaps, setSystemGaps] = useState("");
+
+  const title = isRed ? "Review Red Team Submission" : "Review Blue Team Submission";
+  const accent = isRed ? "orange" : "indigo";
+  const evidences = isRed ? test.red_evidences || [] : test.blue_evidences || [];
+
+  const requiresNotes = decision === "reopen" && notes.trim().length === 0;
+  const requiresGaps = decision === "gap" && systemGaps.trim().length === 0;
+
+  const canSubmit = decision !== null && !isSubmitting && !requiresNotes && !requiresGaps;
+
+  const handleSubmit = () => {
+    if (!decision) return;
+    if (isRed) {
+      onSubmitRed?.(decision as RedDecision, notes);
+    } else {
+      onSubmitBlue?.(decision as BlueDecision, notes, systemGaps);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div className="w-full max-w-lg rounded-xl border border-gray-800 bg-gray-900 shadow-xl">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-gray-800 px-6 py-4">
+          <div className="flex items-center gap-2">
+            {isRed ? (
+              <Shield className={`h-5 w-5 text-${accent}-400`} />
+            ) : (
+              <ShieldCheck className={`h-5 w-5 text-${accent}-400`} />
+            )}
+            <h3 className="text-lg font-semibold text-white">{title}</h3>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-white"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="space-y-5 px-6 py-5">
+          {/* Evidence summary */}
+          <div>
+            <h4 className="mb-2 text-sm font-medium text-gray-300">
+              {isRed ? "Red" : "Blue"} Team Evidence ({evidences.length})
+            </h4>
+            {evidences.length > 0 ? (
+              <div className="max-h-32 space-y-1 overflow-y-auto rounded-lg border border-gray-700 bg-gray-800/50 p-2">
+                {evidences.map((ev) => (
+                  <div key={ev.id} className="flex items-center gap-2 text-xs text-gray-400">
+                    <FileIcon className="h-3.5 w-3.5 text-gray-500" />
+                    <span className="truncate">{ev.file_name}</span>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-xs text-gray-500">No evidence files uploaded.</p>
+            )}
+          </div>
+
+          {/* Decision */}
+          <div>
+            <h4 className="mb-2 text-sm font-medium text-gray-300">Decision</h4>
+            <div className="flex gap-3">
+              <button
+                onClick={() => setDecision("approve")}
+                className={`flex flex-1 items-center justify-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
+                  decision === "approve"
+                    ? "border-green-500 bg-green-500/10 text-green-400"
+                    : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
+                }`}
+              >
+                <CheckCircle className="h-4 w-4" />
+                Approve
+              </button>
+              <button
+                onClick={() => setDecision("reopen")}
+                className={`flex flex-1 items-center justify-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
+                  decision === "reopen"
+                    ? "border-amber-500 bg-amber-500/10 text-amber-400"
+                    : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
+                }`}
+              >
+                <RotateCcw className="h-4 w-4" />
+                Reopen
+              </button>
+              {!isRed && (
+                <button
+                  onClick={() => setDecision("gap")}
+                  className={`flex flex-1 items-center justify-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
+                    decision === "gap"
+                      ? "border-purple-500 bg-purple-500/10 text-purple-400"
+                      : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
+                  }`}
+                >
+                  <AlertTriangle className="h-4 w-4" />
+                  System Gap
+                </button>
+              )}
+            </div>
+            {decision === "gap" && (
+              <p className="mt-2 text-xs text-gray-500">
+                Use this when the operator did everything right but Blue Team is missing a
+                capability (tooling, visibility) needed to detect/block this technique. The test
+                still proceeds to cross-validation.
+              </p>
+            )}
+          </div>
+
+          {/* Notes (reopen) */}
+          {decision === "reopen" && (
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-gray-300">
+                Notes <span className="text-red-400">(required)</span>
+              </label>
+              <textarea
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                rows={3}
+                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500"
+                placeholder="Explain what needs to be redone..."
+              />
+              {requiresNotes && (
+                <p className="mt-1 text-xs text-red-400">Notes are required when reopening.</p>
+              )}
+            </div>
+          )}
+
+          {/* System gaps (blue gap only) */}
+          {decision === "gap" && (
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-gray-300">
+                System Gaps <span className="text-red-400">(required)</span>
+              </label>
+              <textarea
+                value={systemGaps}
+                onChange={(e) => setSystemGaps(e.target.value)}
+                rows={3}
+                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
+                placeholder="What's missing to properly detect/block this technique?"
+              />
+              {requiresGaps && (
+                <p className="mt-1 text-xs text-red-400">
+                  Describe the gap before flagging it.
+                </p>
+              )}
+              <label className="mb-1.5 mt-3 block text-sm font-medium text-gray-300">
+                Notes (optional)
+              </label>
+              <textarea
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                rows={2}
+                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
+                placeholder="Optional notes..."
+              />
+            </div>
+          )}
+
+          {/* Notes (approve, optional) */}
+          {decision === "approve" && (
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-gray-300">
+                Notes (optional)
+              </label>
+              <textarea
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                rows={2}
+                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500"
+                placeholder="Optional notes..."
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-end gap-3 border-t border-gray-800 px-6 py-4">
+          <button
+            onClick={onClose}
+            disabled={isSubmitting}
+            className="rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-400 hover:bg-gray-800 disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={!canSubmit}
+            className={`flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50 ${
+              decision === "reopen"
+                ? "bg-amber-600 hover:bg-amber-500"
+                : decision === "gap"
+                  ? "bg-purple-600 hover:bg-purple-500"
+                  : "bg-green-600 hover:bg-green-500"
+            }`}
+          >
+            {isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
+            {decision === "approve"
+              ? "Confirm Approval"
+              : decision === "reopen"
+                ? "Confirm Reopen"
+                : decision === "gap"
+                  ? "Confirm System Gap"
+                  : "Select a decision"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/test-detail/TeamTabs.tsx

@@ -148,6 +148,13 @@ export default function TeamTabs({
     ((role === "blue_lead" || role === "admin") ||
       (role === "blue_tech" && !!test.blue_work_started_at));
 
+  // Blind visibility: neither side sees the other's data until both reviews
+  // pass (matches the backend's field-masking on GET /tests/{id}).
+  const BLIND_STATES = ["draft", "red_executing", "red_review", "blue_evaluating", "blue_review"];
+  const isBlind = BLIND_STATES.includes(test.state) && role !== "admin" && role !== "viewer";
+  const hideBlueFromMe = isBlind && (role === "red_tech" || role === "red_lead");
+  const hideRedFromMe = isBlind && (role === "blue_tech" || role === "blue_lead");
+
   // Containment fields only visible when attack was detected (draft or saved value)
   const isDetected = canEditBlue
     ? blueDraft.detection_result === "detected" || blueDraft.detection_result === "partially_detected"
@@ -168,7 +175,19 @@ export default function TeamTabs({
 
   // ── Red Team Tab ─────────────────────────────────────────────────
 
-  const renderRedTab = () => (
+  const renderRedTab = () => {
+    if (hideRedFromMe) {
+      return (
+        <div className="py-12 text-center">
+          <Shield className="mx-auto h-10 w-10 text-gray-600" />
+          <p className="mt-2 text-sm text-gray-400">
+            Red Team work is hidden until both teams' reviews are complete — this keeps
+            detection testing blind.
+          </p>
+        </div>
+      );
+    }
+    return (
     <div className="space-y-6">
       {/* Locked hint for red_tech in draft state */}
       {redLockedHint && (
@@ -343,11 +362,24 @@ export default function TeamTabs({
         </div>
       )}
     </div>
-  );
+    );
+  };
 
   // ── Blue Team Tab ────────────────────────────────────────────────
 
-  const renderBlueTab = () => (
+  const renderBlueTab = () => {
+    if (hideBlueFromMe) {
+      return (
+        <div className="py-12 text-center">
+          <ShieldCheck className="mx-auto h-10 w-10 text-gray-600" />
+          <p className="mt-2 text-sm text-gray-400">
+            Blue Team work is hidden until both teams' reviews are complete — this keeps
+            detection testing blind.
+          </p>
+        </div>
+      );
+    }
+    return (
     <div className="space-y-6">
       {/* Locked hint for blue_tech before Start Evaluation */}
       {blueLockedHint && (
@@ -610,7 +642,8 @@ export default function TeamTabs({
         </div>
       )}
     </div>
-  );
+    );
+  };
 
   // ── Summary Tab ──────────────────────────────────────────────────
 
@@ -713,6 +746,12 @@ export default function TeamTabs({
                 </dd>
               </div>
             )}
+            {test.system_gaps && (
+              <div>
+                <dt className="text-xs font-medium uppercase text-gray-500">System Gaps Flagged</dt>
+                <dd className="mt-0.5 text-sm text-purple-300">{test.system_gaps}</dd>
+              </div>
+            )}
           </dl>
         </div>
       </div>

frontend/src/components/test-detail/TestDetailHeader.tsx

@@ -26,7 +26,9 @@ import LiveTimer from "./LiveTimer";
 const PROGRESS_STEPS: { key: TestState; label: string }[] = [
   { key: "draft", label: "Draft" },
   { key: "red_executing", label: "Red Exec" },
+  { key: "red_review", label: "Red Review" },
   { key: "blue_evaluating", label: "Blue Eval" },
+  { key: "blue_review", label: "Blue Review" },
   { key: "in_review", label: "Review" },
   { key: "validated", label: "Validated" },
 ];
@@ -34,11 +36,13 @@ const PROGRESS_STEPS: { key: TestState; label: string }[] = [
 const STATE_INDEX: Record<TestState, number> = {
   draft: 0,
   red_executing: 1,
-  blue_evaluating: 2,
+  red_review: 2,
-  in_review: 3,
+  blue_evaluating: 3,
-  validated: 4,
+  blue_review: 4,
+  in_review: 5,
+  validated: 6,
   rejected: -1,
-  disputed: 3,   // same step as in_review (still in validation phase)
+  disputed: 5,   // same step as in_review (still in validation phase)
 };
 
 // ── Badge colors ───────────────────────────────────────────────────
@@ -46,13 +50,23 @@ const STATE_INDEX: Record<TestState, number> = {
 const STATE_BADGE: Record<TestState, string> = {
   draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
   red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
+  red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
   blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
+  blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
   in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
   validated: "bg-green-900/50 text-green-400 border-green-500/30",
   rejected: "bg-red-900/50 text-red-400 border-red-500/30",
   disputed: "bg-amber-900/50 text-amber-400 border-amber-500/30",
 };
 
+/** "Queued Blue Team" is a display-only label for blue_evaluating + unassigned. */
+function getStateLabel(test: Test): string {
+  if (test.state === "blue_evaluating" && !test.blue_work_started_at) {
+    return "Queued Blue Team";
+  }
+  return test.state.replace(/_/g, " ");
+}
+
 // ── Props ──────────────────────────────────────────────────────────
 
 interface TestDetailHeaderProps {
@@ -64,6 +78,7 @@ interface TestDetailHeaderProps {
   onSubmitBlue: () => void;
   onStartBlueWork: () => void;
   onOpenValidateModal: (side: "red" | "blue") => void;
+  onOpenReviewModal: (side: "red" | "blue") => void;
   onReopen: () => void;
   onPauseTimer: () => void;
   onResumeTimer: () => void;
@@ -84,6 +99,7 @@ export default function TestDetailHeader({
   onSubmitBlue,
   onStartBlueWork,
   onOpenValidateModal,
+  onOpenReviewModal,
   onReopen,
   onPauseTimer,
   onResumeTimer,
@@ -190,6 +206,40 @@ export default function TestDetailHeader({
       );
     }
 
+    // Red Lead assigned to review this submission -> Review Red Submission
+    if (
+      test.state === "red_review" &&
+      (role === "admin" || (role === "red_lead" && test.red_reviewer_assignee === user?.id))
+    ) {
+      buttons.push(
+        <button
+          key="review-red"
+          onClick={() => onOpenReviewModal("red")}
+          className="flex items-center gap-1.5 rounded-lg bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-500 transition-colors"
+        >
+          <Shield className="h-4 w-4" />
+          Review Red Submission
+        </button>,
+      );
+    }
+
+    // Blue Lead assigned to review this submission -> Review Blue Submission
+    if (
+      test.state === "blue_review" &&
+      (role === "admin" || (role === "blue_lead" && test.blue_reviewer_assignee === user?.id))
+    ) {
+      buttons.push(
+        <button
+          key="review-blue"
+          onClick={() => onOpenReviewModal("blue")}
+          className="flex items-center gap-1.5 rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white hover:bg-purple-500 transition-colors"
+        >
+          <ShieldCheck className="h-4 w-4" />
+          Review Blue Submission
+        </button>,
+      );
+    }
+
     // Blue Team in blue_evaluating:
     //   - if not picked up yet: show "Start Evaluation" button
     //   - if already picked up: show "Submit for Review" button
@@ -472,7 +522,7 @@ export default function TestDetailHeader({
                   STATE_BADGE[test.state]
                 }`}
               >
-                {test.state.replace(/_/g, " ")}
+                {getStateLabel(test)}
               </span>
             </div>
             <p className="mt-1 text-sm text-gray-400">

frontend/src/pages/CampaignDetailPage.tsx

@@ -59,7 +59,9 @@ const typeLabels: Record<string, string> = {
 const testStateColors: Record<string, string> = {
   draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
   red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
+  red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
   blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
+  blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
   in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
   validated: "bg-green-900/50 text-green-400 border-green-500/30",
   rejected: "bg-red-900/50 text-red-400 border-red-500/30",

frontend/src/pages/DashboardPage.tsx

@@ -50,7 +50,9 @@ import type { TestState } from "../types/models";
 const testStateBadgeColors: Record<string, string> = {
   draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
   red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
+  red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
   blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
+  blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
   in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
   validated: "bg-green-900/50 text-green-400 border-green-500/30",
   rejected: "bg-red-900/50 text-red-400 border-red-500/30",
@@ -60,7 +62,9 @@ const testStateBadgeColors: Record<string, string> = {
 const testStateLabels: Record<string, string> = {
   draft: "Draft",
   red_executing: "Red Executing",
+  red_review: "Red Review",
   blue_evaluating: "Blue Evaluating",
+  blue_review: "Blue Review",
   in_review: "In Review",
   validated: "Validated",
   rejected: "Rejected",

frontend/src/pages/ReportsPage.tsx

@@ -213,7 +213,9 @@ export default function ReportsPage() {
                       <option value="">All states</option>
                       <option value="draft">Draft</option>
                       <option value="red_executing">Red Executing</option>
+                      <option value="red_review">Red Review</option>
                       <option value="blue_evaluating">Blue Evaluating</option>
+                      <option value="blue_review">Blue Review</option>
                       <option value="in_review">In Review</option>
                       <option value="validated">Validated</option>
                       <option value="rejected">Rejected</option>
@@ -452,7 +454,9 @@ const statusColors: Record<string, string> = {
   not_evaluated: "bg-gray-500/10 text-gray-400 border-gray-500/30",
   draft: "bg-gray-500/10 text-gray-400 border-gray-500/30",
   red_executing: "bg-orange-500/10 text-orange-400 border-orange-500/30",
+  red_review: "bg-amber-500/10 text-amber-400 border-amber-500/30",
   blue_evaluating: "bg-indigo-500/10 text-indigo-400 border-indigo-500/30",
+  blue_review: "bg-purple-500/10 text-purple-400 border-purple-500/30",
   in_review: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
   rejected: "bg-red-500/10 text-red-400 border-red-500/30",
 };

frontend/src/pages/TechniqueDetailPage.tsx

@@ -42,7 +42,9 @@ const statusBadgeColors: Record<TechniqueStatus, string> = {
 const testStateBadgeColors: Record<TestState, string> = {
   draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
   red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
+  red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
   blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
+  blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
   in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
   validated: "bg-green-900/50 text-green-400 border-green-500/30",
   rejected: "bg-red-900/50 text-red-400 border-red-500/30",
@@ -493,7 +495,7 @@ export default function TechniqueDetailPage() {
 
               // Any test currently in a non-terminal state
               const ACTIVE_STATES: TestState[] = [
-                "draft", "red_executing", "blue_evaluating", "in_review",
+                "draft", "red_executing", "red_review", "blue_evaluating", "blue_review", "in_review",
               ];
               const activeTest = allTests.find(
                 (t: { state: TestState }) => ACTIVE_STATES.includes(t.state)
@@ -520,7 +522,9 @@ export default function TechniqueDetailPage() {
               const ACTIVE_LABEL: Partial<Record<TestState, string>> = {
                 draft:           "Draft",
                 red_executing:   "Executing",
+                red_review:      "Red Review",
                 blue_evaluating: "Evaluating",
+                blue_review:     "Blue Review",
                 in_review:       "In Review",
               };
 

frontend/src/pages/TestDetailPage.tsx

@@ -14,6 +14,8 @@ import {
   startBlueWork,
   validateAsRedLead,
   validateAsBlueLead,
+  reviewAsRedLead,
+  reviewAsBlueLead,
   reopenTest,
   pauseTimer,
   resumeTimer,
@@ -29,6 +31,7 @@ import type { TestResult, ContainmentResult, TeamSide, TestTimelineEntry } from
 import TestDetailHeader from "../components/test-detail/TestDetailHeader";
 import TeamTabs from "../components/test-detail/TeamTabs";
 import ValidationModal from "../components/test-detail/ValidationModal";
+import ReviewModal from "../components/test-detail/ReviewModal";
 import ConfirmDialog from "../components/ConfirmDialog";
 import JiraLinkPanel from "../components/JiraLinkPanel";
 import TestPhaseTimeline from "../components/TestPhaseTimeline";
@@ -56,6 +59,11 @@ export default function TestDetailPage() {
     side: "red" | "blue";
   }>({ open: false, side: "red" });
 
+  const [reviewModal, setReviewModal] = useState<{
+    open: boolean;
+    side: "red" | "blue";
+  }>({ open: false, side: "red" });
+
   const [confirmReopen, setConfirmReopen] = useState(false);
   const [holdModal, setHoldModal] = useState(false);
   const [holdReason, setHoldReason] = useState("");
@@ -254,6 +262,28 @@ export default function TestDetailPage() {
     onError: (err: unknown) => showToast(extractError(err), "error"),
   });
 
+  const reviewRedMutation = useMutation({
+    mutationFn: (payload: { decision: "approve" | "reopen"; notes?: string }) =>
+      reviewAsRedLead(testId!, payload),
+    onSuccess: () => {
+      invalidateAll();
+      setReviewModal({ open: false, side: "red" });
+      showToast("Red review submitted", "success");
+    },
+    onError: (err: unknown) => showToast(extractError(err), "error"),
+  });
+
+  const reviewBlueMutation = useMutation({
+    mutationFn: (payload: { decision: "approve" | "reopen" | "gap"; notes?: string; system_gaps?: string }) =>
+      reviewAsBlueLead(testId!, payload),
+    onSuccess: () => {
+      invalidateAll();
+      setReviewModal({ open: false, side: "blue" });
+      showToast("Blue review submitted", "success");
+    },
+    onError: (err: unknown) => showToast(extractError(err), "error"),
+  });
+
   const reopenMutation = useMutation({
     mutationFn: () => reopenTest(testId!),
     onSuccess: () => {
@@ -360,6 +390,22 @@ export default function TestDetailPage() {
     }
   };
 
+  const handleReviewRedSubmit = (decision: "approve" | "reopen", notes: string) => {
+    reviewRedMutation.mutate({ decision, notes: notes || undefined });
+  };
+
+  const handleReviewBlueSubmit = (
+    decision: "approve" | "reopen" | "gap",
+    notes: string,
+    systemGaps: string,
+  ) => {
+    reviewBlueMutation.mutate({
+      decision,
+      notes: notes || undefined,
+      system_gaps: decision === "gap" ? systemGaps : undefined,
+    });
+  };
+
   const isTransitioning =
     startExecMutation.isPending ||
     submitRedMutation.isPending ||
@@ -439,6 +485,7 @@ export default function TestDetailPage() {
         onSubmitBlue={() => submitBlueMutation.mutate()}
         onStartBlueWork={() => startBlueWorkMutation.mutate()}
         onOpenValidateModal={(side) => setValidationModal({ open: true, side })}
+        onOpenReviewModal={(side) => setReviewModal({ open: true, side })}
         onReopen={() => setConfirmReopen(true)}
         onPauseTimer={() => pauseTimerMutation.mutate()}
         onResumeTimer={() => resumeTimerMutation.mutate()}
@@ -717,6 +764,22 @@ export default function TestDetailPage() {
         />
       )}
 
+      {/* Review Modal (red_review / blue_review lead gate) */}
+      {reviewModal.open && (
+        <ReviewModal
+          side={reviewModal.side}
+          test={test}
+          isSubmitting={
+            reviewModal.side === "red"
+              ? reviewRedMutation.isPending
+              : reviewBlueMutation.isPending
+          }
+          onSubmitRed={reviewModal.side === "red" ? handleReviewRedSubmit : undefined}
+          onSubmitBlue={reviewModal.side === "blue" ? handleReviewBlueSubmit : undefined}
+          onClose={() => setReviewModal({ open: false, side: "red" })}
+        />
+      )}
+
       {/* Save as Template Modal */}
       {showTemplateModal && (
         <SaveAsTemplateModal

frontend/src/pages/TestsPage.tsx

@@ -29,7 +29,9 @@ import { useAuth } from "../context/AuthContext";
 const testStateBadgeColors: Record<TestState, string> = {
   draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
   red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
+  red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
   blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
+  blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
   in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
   validated: "bg-green-900/50 text-green-400 border-green-500/30",
   rejected: "bg-red-900/50 text-red-400 border-red-500/30",
@@ -39,7 +41,9 @@ const testStateBadgeColors: Record<TestState, string> = {
 const testStateLabels: Record<TestState, string> = {
   draft: "Draft",
   red_executing: "Red Executing",
+  red_review: "Red Review",
   blue_evaluating: "Blue Evaluating",
+  blue_review: "Blue Review",
   in_review: "In Review",
   validated: "Validated",
   rejected: "Rejected",
@@ -49,7 +53,9 @@ const testStateLabels: Record<TestState, string> = {
 const ALL_STATES: TestState[] = [
   "draft",
   "red_executing",
+  "red_review",
   "blue_evaluating",
+  "blue_review",
   "in_review",
   "validated",
   "rejected",
@@ -63,8 +69,12 @@ function currentTeamForState(state: TestState): string {
     case "draft":
     case "red_executing":
       return "Red Team";
+    case "red_review":
+      return "Red Lead";
     case "blue_evaluating":
       return "Blue Team";
+    case "blue_review":
+      return "Blue Lead";
     case "in_review":
       return "Managers";
     case "validated":
@@ -429,7 +439,9 @@ export default function TestsPage() {
           const icons: Record<TestState, React.ReactNode> = {
             draft: <Clock className="h-5 w-5 text-gray-400" />,
             red_executing: <Play className="h-5 w-5 text-orange-400" />,
+            red_review: <Shield className="h-5 w-5 text-amber-400" />,
             blue_evaluating: <Shield className="h-5 w-5 text-indigo-400" />,
+            blue_review: <Shield className="h-5 w-5 text-purple-400" />,
             in_review: <Eye className="h-5 w-5 text-blue-400" />,
             validated: <CheckCircle className="h-5 w-5 text-green-400" />,
             rejected: <XCircle className="h-5 w-5 text-red-400" />,
@@ -438,7 +450,9 @@ export default function TestsPage() {
           const colorMap: Record<TestState, string> = {
             draft: "text-gray-400",
             red_executing: "text-orange-400",
+            red_review: "text-amber-400",
             blue_evaluating: "text-indigo-400",
+            blue_review: "text-purple-400",
             in_review: "text-blue-400",
             validated: "text-green-400",
             rejected: "text-red-400",
@@ -708,7 +722,9 @@ function TestTable({
                     testStateBadgeColors[test.state]
                   }`}
                 >
-                  {testStateLabels[test.state]}
+                  {test.state === "blue_evaluating" && !test.blue_work_started_at
+                    ? "Queued Blue Team"
+                    : testStateLabels[test.state]}
                 </span>
               </td>
               <td className="py-3 px-4 text-gray-400 text-xs">