feat(tests): containment_result field on blue team evaluation

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

@@ -17,6 +17,7 @@ import {
 import type {
   Test,
   TestResult,
+  ContainmentResult,
   TeamSide,
   Evidence,
   TestTimelineEntry,
@@ -59,6 +60,14 @@ const DETECTION_RESULTS: { value: TestResult; label: string; color: string }[] =
   },
 ];
 
+// ── Containment result options ─────────────────────────────────────
+
+const CONTAINMENT_RESULTS: { value: ContainmentResult; label: string; color: string }[] = [
+  { value: "contained", label: "Contained", color: "border-green-500 bg-green-500/10 text-green-400" },
+  { value: "partially_contained", label: "Partially Contained", color: "border-yellow-500 bg-yellow-500/10 text-yellow-400" },
+  { value: "not_contained", label: "Not Contained", color: "border-red-500 bg-red-500/10 text-red-400" },
+];
+
 // ── Props ──────────────────────────────────────────────────────────
 
 interface TeamTabsProps {
@@ -80,6 +89,7 @@ interface TeamTabsProps {
   onBlueFieldChange: (field: string, value: string) => void;
   blueDraft: {
     detection_result: TestResult | "";
+    containment_result: ContainmentResult | "";
     blue_summary: string;
   };
 
@@ -339,6 +349,53 @@ export default function TeamTabs({
         )}
       </div>
 
+      {/* Containment Result */}
+      <div>
+        <label className="mb-2 block text-sm font-medium text-gray-300">
+          Containment Result
+        </label>
+        {canEditBlue ? (
+          <div className={`flex flex-wrap gap-2 ${blueDraft.detection_result === "not_detected" ? "opacity-40 pointer-events-none" : ""}`}>
+            {CONTAINMENT_RESULTS.map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => onBlueFieldChange("containment_result", opt.value)}
+                className={`rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${
+                  blueDraft.containment_result === opt.value
+                    ? opt.color
+                    : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+            {blueDraft.detection_result === "not_detected" && (
+              <span className="self-center text-xs text-gray-500">N/A — attack not detected</span>
+            )}
+          </div>
+        ) : (
+          <p className="text-sm">
+            {test.containment_result ? (
+              <span
+                className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
+                  test.containment_result === "contained"
+                    ? "border-green-500/30 bg-green-900/50 text-green-400"
+                    : test.containment_result === "not_contained"
+                      ? "border-red-500/30 bg-red-900/50 text-red-400"
+                      : "border-yellow-500/30 bg-yellow-900/50 text-yellow-400"
+                }`}
+              >
+                {test.containment_result.replace(/_/g, " ")}
+              </span>
+            ) : test.detection_result === "not_detected" ? (
+              <span className="text-gray-500">N/A</span>
+            ) : (
+              <span className="text-gray-500">Not evaluated yet</span>
+            )}
+          </p>
+        )}
+      </div>
+
       {/* Blue Summary */}
       <div>
         <label className="mb-1.5 block text-sm font-medium text-gray-300">