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

2026-07-06 12:02:14 +02:00
parent 82033b5037
commit d5e3df00f9
11 changed files with 449 additions and 11 deletions
@@ -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",
@@ -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" },
@@ -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>
+  );
+}
@@ -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>
@@ -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,
-  in_review: 3,
-  validated: 4,
+  red_review: 2,
+  blue_evaluating: 3,
+  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">