From cea470053fe08472116e3dec1ec56145bf3addeb Mon Sep 17 00:00:00 2001
From: Kitos <marcosluna@me.com>
Date: Mon, 9 Feb 2026 11:14:44 +0100
Subject: [PATCH] feat(phase-14): redesign Test Detail page with Red/Blue tabs
 and dual validation (T-115, T-116, T-117, T-118)

T-115: TestDetailHeader with progress bar, contextual action buttons, and dual validation indicators

T-116: TeamTabs component with Red Team, Blue Team, Summary, and Timeline tabs

T-117: Redesigned TestDetailPage integrating new components with react-query mutations, toast notifications, and role/state-based permissions

T-118: ValidationModal for dual Red Lead / Blue Lead approval with required notes on rejection
---
 .../src/components/test-detail/TeamTabs.tsx   | 582 ++++++++++++++++++
 .../test-detail/TestDetailHeader.tsx          | 329 ++++++++++
 .../test-detail/ValidationModal.tsx           | 196 ++++++
 frontend/src/pages/TestDetailPage.tsx         | 559 ++++++++++-------
 4 files changed, 1434 insertions(+), 232 deletions(-)
 create mode 100644 frontend/src/components/test-detail/TeamTabs.tsx
 create mode 100644 frontend/src/components/test-detail/TestDetailHeader.tsx
 create mode 100644 frontend/src/components/test-detail/ValidationModal.tsx

diff --git a/frontend/src/components/test-detail/TeamTabs.tsx b/frontend/src/components/test-detail/TeamTabs.tsx
new file mode 100644
index 0000000..2589694
--- /dev/null
+++ b/frontend/src/components/test-detail/TeamTabs.tsx
@@ -0,0 +1,582 @@
+import { useState } from "react";
+import {
+  Shield,
+  ShieldCheck,
+  FileText,
+  Clock,
+  Upload,
+  Loader2,
+  CheckCircle,
+  XCircle,
+  AlertTriangle,
+  Trash2,
+} from "lucide-react";
+import type {
+  Test,
+  TestResult,
+  TeamSide,
+  Evidence,
+  TestTimelineEntry,
+  User,
+} from "../../types/models";
+import { RED_EDITABLE_STATES, BLUE_EDITABLE_STATES } from "../../types/models";
+import EvidenceUpload from "../EvidenceUpload";
+import EvidenceList from "../EvidenceList";
+
+// ── Tab definitions ────────────────────────────────────────────────
+
+type TabKey = "red" | "blue" | "summary" | "timeline";
+
+const TABS: { key: TabKey; label: string; icon: React.ReactNode }[] = [
+  { key: "red", label: "Red Team", icon: <Shield className="h-4 w-4" /> },
+  { key: "blue", label: "Blue Team", icon: <ShieldCheck className="h-4 w-4" /> },
+  { key: "summary", label: "Summary", icon: <FileText className="h-4 w-4" /> },
+  { key: "timeline", label: "Timeline", icon: <Clock className="h-4 w-4" /> },
+];
+
+const TAB_COLORS: Record<TabKey, string> = {
+  red: "border-orange-500 text-orange-400",
+  blue: "border-indigo-500 text-indigo-400",
+  summary: "border-cyan-500 text-cyan-400",
+  timeline: "border-gray-500 text-gray-400",
+};
+
+// ── Detection result options ───────────────────────────────────────
+
+const DETECTION_RESULTS: { value: TestResult; label: string; color: string }[] = [
+  { value: "detected", label: "Detected", color: "border-green-500 bg-green-500/10 text-green-400" },
+  { value: "not_detected", label: "Not Detected", color: "border-red-500 bg-red-500/10 text-red-400" },
+  {
+    value: "partially_detected",
+    label: "Partially Detected",
+    color: "border-yellow-500 bg-yellow-500/10 text-yellow-400",
+  },
+];
+
+// ── Props ──────────────────────────────────────────────────────────
+
+interface TeamTabsProps {
+  test: Test;
+  user: User | null;
+  timeline: TestTimelineEntry[];
+  isTimelineLoading: boolean;
+
+  // Red Team field handlers
+  onRedFieldChange: (field: string, value: string | boolean) => void;
+  redDraft: {
+    procedure_text: string;
+    tool_used: string;
+    attack_success: boolean;
+    red_summary: string;
+  };
+
+  // Blue Team field handlers
+  onBlueFieldChange: (field: string, value: string) => void;
+  blueDraft: {
+    detection_result: TestResult | "";
+    blue_summary: string;
+  };
+
+  // Evidence
+  onUploadEvidence: (file: File, team: TeamSide) => Promise<void>;
+  isUploading: boolean;
+  onDownloadEvidence: (evidenceId: string) => void;
+  onDeleteEvidence?: (evidenceId: string) => void;
+  isDeletingEvidence?: boolean;
+}
+
+// ── Component ──────────────────────────────────────────────────────
+
+export default function TeamTabs({
+  test,
+  user,
+  timeline,
+  isTimelineLoading,
+  onRedFieldChange,
+  redDraft,
+  onBlueFieldChange,
+  blueDraft,
+  onUploadEvidence,
+  isUploading,
+  onDownloadEvidence,
+  onDeleteEvidence,
+  isDeletingEvidence,
+}: TeamTabsProps) {
+  const [activeTab, setActiveTab] = useState<TabKey>("red");
+  const role = user?.role ?? "";
+
+  const canEditRed =
+    RED_EDITABLE_STATES.includes(test.state) &&
+    (role === "red_tech" || role === "admin");
+
+  const canEditBlue =
+    BLUE_EDITABLE_STATES.includes(test.state) &&
+    (role === "blue_tech" || role === "admin");
+
+  // ── Red Team Tab ─────────────────────────────────────────────────
+
+  const renderRedTab = () => (
+    <div className="space-y-6">
+      {/* Procedure */}
+      <div>
+        <label className="mb-1.5 block text-sm font-medium text-gray-300">
+          Attack Procedure
+        </label>
+        {canEditRed ? (
+          <textarea
+            value={redDraft.procedure_text}
+            onChange={(e) => onRedFieldChange("procedure_text", e.target.value)}
+            rows={6}
+            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-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500 font-mono"
+            placeholder="Describe the attack procedure..."
+          />
+        ) : (
+          <pre className="whitespace-pre-wrap rounded-lg bg-gray-800 p-4 font-mono text-sm text-gray-300">
+            {test.procedure_text || "No procedure documented."}
+          </pre>
+        )}
+      </div>
+
+      {/* Tool Used */}
+      <div>
+        <label className="mb-1.5 block text-sm font-medium text-gray-300">
+          Tool Used
+        </label>
+        {canEditRed ? (
+          <input
+            value={redDraft.tool_used}
+            onChange={(e) => onRedFieldChange("tool_used", e.target.value)}
+            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-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
+            placeholder="e.g. Atomic Red Team, Cobalt Strike, ..."
+          />
+        ) : (
+          <p className="text-sm text-gray-400">{test.tool_used || "Not specified"}</p>
+        )}
+      </div>
+
+      {/* Attack Success toggle */}
+      <div>
+        <label className="mb-1.5 block text-sm font-medium text-gray-300">
+          Attack Successful?
+        </label>
+        {canEditRed ? (
+          <button
+            onClick={() => onRedFieldChange("attack_success", !redDraft.attack_success)}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+              redDraft.attack_success ? "bg-green-600" : "bg-gray-600"
+            }`}
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                redDraft.attack_success ? "translate-x-6" : "translate-x-1"
+              }`}
+            />
+          </button>
+        ) : (
+          <span className={`text-sm ${test.attack_success ? "text-green-400" : "text-red-400"}`}>
+            {test.attack_success === null ? "Not set" : test.attack_success ? "Yes" : "No"}
+          </span>
+        )}
+      </div>
+
+      {/* Red Summary */}
+      <div>
+        <label className="mb-1.5 block text-sm font-medium text-gray-300">
+          Red Team Summary
+        </label>
+        {canEditRed ? (
+          <textarea
+            value={redDraft.red_summary}
+            onChange={(e) => onRedFieldChange("red_summary", e.target.value)}
+            rows={4}
+            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-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
+            placeholder="Summarize the Red Team findings..."
+          />
+        ) : (
+          <p className="text-sm text-gray-400">{test.red_summary || "No summary yet."}</p>
+        )}
+      </div>
+
+      {/* Red Evidences */}
+      <div>
+        <h3 className="mb-3 text-sm font-medium text-gray-300">Red Team Evidence</h3>
+        {canEditRed && (
+          <div className="mb-4">
+            <EvidenceUpload
+              onUpload={async (file) => await onUploadEvidence(file, "red")}
+              isUploading={isUploading}
+            />
+          </div>
+        )}
+        <EvidenceList
+          evidences={test.red_evidences || []}
+          onDownload={onDownloadEvidence}
+        />
+      </div>
+
+      {/* Red validation status if applicable */}
+      {test.red_validation_status && (
+        <div
+          className={`rounded-lg border p-3 ${
+            test.red_validation_status === "approved"
+              ? "border-green-500/30 bg-green-900/20"
+              : "border-red-500/30 bg-red-900/20"
+          }`}
+        >
+          <div className="flex items-center gap-2">
+            {test.red_validation_status === "approved" ? (
+              <CheckCircle className="h-4 w-4 text-green-400" />
+            ) : (
+              <XCircle className="h-4 w-4 text-red-400" />
+            )}
+            <span
+              className={`text-sm font-medium ${
+                test.red_validation_status === "approved" ? "text-green-400" : "text-red-400"
+              }`}
+            >
+              Red Lead: {test.red_validation_status === "approved" ? "Approved" : "Rejected"}
+            </span>
+          </div>
+          {test.red_validation_notes && (
+            <p className="mt-2 text-sm text-gray-400">{test.red_validation_notes}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
+  // ── Blue Team Tab ────────────────────────────────────────────────
+
+  const renderBlueTab = () => (
+    <div className="space-y-6">
+      {/* Detection Result */}
+      <div>
+        <label className="mb-2 block text-sm font-medium text-gray-300">
+          Detection Result
+        </label>
+        {canEditBlue ? (
+          <div className="flex flex-wrap gap-2">
+            {DETECTION_RESULTS.map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => onBlueFieldChange("detection_result", opt.value)}
+                className={`rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${
+                  blueDraft.detection_result === opt.value
+                    ? opt.color
+                    : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm">
+            {test.detection_result ? (
+              <span
+                className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
+                  test.detection_result === "detected"
+                    ? "border-green-500/30 bg-green-900/50 text-green-400"
+                    : test.detection_result === "not_detected"
+                      ? "border-red-500/30 bg-red-900/50 text-red-400"
+                      : "border-yellow-500/30 bg-yellow-900/50 text-yellow-400"
+                }`}
+              >
+                {test.detection_result.replace(/_/g, " ")}
+              </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">
+          Blue Team Summary
+        </label>
+        {canEditBlue ? (
+          <textarea
+            value={blueDraft.blue_summary}
+            onChange={(e) => onBlueFieldChange("blue_summary", e.target.value)}
+            rows={4}
+            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-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            placeholder="Summarize the Blue Team analysis..."
+          />
+        ) : (
+          <p className="text-sm text-gray-400">{test.blue_summary || "No summary yet."}</p>
+        )}
+      </div>
+
+      {/* Blue Evidences */}
+      <div>
+        <h3 className="mb-3 text-sm font-medium text-gray-300">Blue Team Evidence</h3>
+        {canEditBlue && (
+          <div className="mb-4">
+            <EvidenceUpload
+              onUpload={async (file) => await onUploadEvidence(file, "blue")}
+              isUploading={isUploading}
+            />
+          </div>
+        )}
+        <EvidenceList
+          evidences={test.blue_evidences || []}
+          onDownload={onDownloadEvidence}
+        />
+      </div>
+
+      {/* Blue validation status if applicable */}
+      {test.blue_validation_status && (
+        <div
+          className={`rounded-lg border p-3 ${
+            test.blue_validation_status === "approved"
+              ? "border-green-500/30 bg-green-900/20"
+              : "border-red-500/30 bg-red-900/20"
+          }`}
+        >
+          <div className="flex items-center gap-2">
+            {test.blue_validation_status === "approved" ? (
+              <CheckCircle className="h-4 w-4 text-green-400" />
+            ) : (
+              <XCircle className="h-4 w-4 text-red-400" />
+            )}
+            <span
+              className={`text-sm font-medium ${
+                test.blue_validation_status === "approved" ? "text-green-400" : "text-red-400"
+              }`}
+            >
+              Blue Lead: {test.blue_validation_status === "approved" ? "Approved" : "Rejected"}
+            </span>
+          </div>
+          {test.blue_validation_notes && (
+            <p className="mt-2 text-sm text-gray-400">{test.blue_validation_notes}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
+  // ── Summary Tab ──────────────────────────────────────────────────
+
+  const renderSummaryTab = () => (
+    <div className="space-y-6">
+      {/* Side-by-side comparison */}
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Red Side */}
+        <div className="rounded-lg border border-orange-500/20 bg-orange-900/10 p-4">
+          <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-orange-400">
+            <Shield className="h-4 w-4" /> Red Team (Attack)
+          </h3>
+          <dl className="space-y-3">
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Attack Success</dt>
+              <dd className="mt-0.5 text-sm">
+                {test.attack_success === null ? (
+                  <span className="text-gray-500">Not set</span>
+                ) : test.attack_success ? (
+                  <span className="text-green-400">Yes</span>
+                ) : (
+                  <span className="text-red-400">No</span>
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Tool Used</dt>
+              <dd className="mt-0.5 text-sm text-gray-300">{test.tool_used || "N/A"}</dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Summary</dt>
+              <dd className="mt-0.5 text-sm text-gray-300">{test.red_summary || "N/A"}</dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Evidence Files</dt>
+              <dd className="mt-0.5 text-sm text-gray-400">
+                {(test.red_evidences || []).length} file(s)
+              </dd>
+            </div>
+            {test.red_validation_status && (
+              <div>
+                <dt className="text-xs font-medium uppercase text-gray-500">Red Lead Validation</dt>
+                <dd className="mt-0.5 flex items-center gap-1 text-sm">
+                  {test.red_validation_status === "approved" ? (
+                    <><CheckCircle className="h-3.5 w-3.5 text-green-400" /><span className="text-green-400">Approved</span></>
+                  ) : (
+                    <><XCircle className="h-3.5 w-3.5 text-red-400" /><span className="text-red-400">Rejected</span></>
+                  )}
+                </dd>
+              </div>
+            )}
+          </dl>
+        </div>
+
+        {/* Blue Side */}
+        <div className="rounded-lg border border-indigo-500/20 bg-indigo-900/10 p-4">
+          <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-indigo-400">
+            <ShieldCheck className="h-4 w-4" /> Blue Team (Detection)
+          </h3>
+          <dl className="space-y-3">
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Detection Result</dt>
+              <dd className="mt-0.5 text-sm">
+                {test.detection_result ? (
+                  <span
+                    className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
+                      test.detection_result === "detected"
+                        ? "border-green-500/30 bg-green-900/50 text-green-400"
+                        : test.detection_result === "not_detected"
+                          ? "border-red-500/30 bg-red-900/50 text-red-400"
+                          : "border-yellow-500/30 bg-yellow-900/50 text-yellow-400"
+                    }`}
+                  >
+                    {test.detection_result.replace(/_/g, " ")}
+                  </span>
+                ) : (
+                  <span className="text-gray-500">Not evaluated</span>
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Summary</dt>
+              <dd className="mt-0.5 text-sm text-gray-300">{test.blue_summary || "N/A"}</dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Evidence Files</dt>
+              <dd className="mt-0.5 text-sm text-gray-400">
+                {(test.blue_evidences || []).length} file(s)
+              </dd>
+            </div>
+            {test.blue_validation_status && (
+              <div>
+                <dt className="text-xs font-medium uppercase text-gray-500">Blue Lead Validation</dt>
+                <dd className="mt-0.5 flex items-center gap-1 text-sm">
+                  {test.blue_validation_status === "approved" ? (
+                    <><CheckCircle className="h-3.5 w-3.5 text-green-400" /><span className="text-green-400">Approved</span></>
+                  ) : (
+                    <><XCircle className="h-3.5 w-3.5 text-red-400" /><span className="text-red-400">Rejected</span></>
+                  )}
+                </dd>
+              </div>
+            )}
+          </dl>
+        </div>
+      </div>
+
+      {/* Final Result */}
+      <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4">
+        <h3 className="mb-2 text-sm font-semibold text-gray-300">Final Result</h3>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-gray-500">State:</span>
+            <span className="text-sm font-medium capitalize text-gray-200">
+              {test.state.replace(/_/g, " ")}
+            </span>
+          </div>
+          {test.detection_result && (
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-gray-500">Detection:</span>
+              <span className="text-sm font-medium capitalize text-gray-200">
+                {test.detection_result.replace(/_/g, " ")}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  // ── Timeline Tab ─────────────────────────────────────────────────
+
+  const renderTimelineTab = () => {
+    if (isTimelineLoading) {
+      return (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-6 w-6 animate-spin text-gray-500" />
+        </div>
+      );
+    }
+
+    if (!timeline || timeline.length === 0) {
+      return (
+        <div className="py-12 text-center">
+          <Clock className="mx-auto h-10 w-10 text-gray-600" />
+          <p className="mt-2 text-sm text-gray-400">No timeline events yet</p>
+        </div>
+      );
+    }
+
+    const formatDate = (d: string) =>
+      new Date(d).toLocaleString("en-US", {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      });
+
+    return (
+      <div className="relative space-y-0">
+        {/* Timeline vertical line */}
+        <div className="absolute left-4 top-2 bottom-2 w-px bg-gray-700" />
+
+        {timeline.map((entry, idx) => (
+          <div key={entry.id || idx} className="relative flex gap-4 py-3">
+            {/* Dot */}
+            <div className="z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-gray-700 bg-gray-800">
+              <Clock className="h-3.5 w-3.5 text-gray-400" />
+            </div>
+            {/* Content */}
+            <div className="flex-1 pt-0.5">
+              <p className="text-sm font-medium text-gray-200">{entry.action}</p>
+              <p className="text-xs text-gray-500">
+                {formatDate(entry.timestamp)}
+                {entry.user_id && ` - User: ${entry.user_id}`}
+              </p>
+              {entry.details && Object.keys(entry.details).length > 0 && (
+                <pre className="mt-1 max-h-24 overflow-auto rounded bg-gray-800 p-2 font-mono text-xs text-gray-400">
+                  {JSON.stringify(entry.details, null, 2)}
+                </pre>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // ── Tab content router ───────────────────────────────────────────
+
+  const TAB_CONTENT: Record<TabKey, () => React.ReactNode> = {
+    red: renderRedTab,
+    blue: renderBlueTab,
+    summary: renderSummaryTab,
+    timeline: renderTimelineTab,
+  };
+
+  // ── Render ───────────────────────────────────────────────────────
+
+  return (
+    <div className="rounded-xl border border-gray-800 bg-gray-900">
+      {/* Tab bar */}
+      <div className="flex border-b border-gray-800">
+        {TABS.map((tab) => (
+          <button
+            key={tab.key}
+            onClick={() => setActiveTab(tab.key)}
+            className={`flex items-center gap-2 border-b-2 px-5 py-3 text-sm font-medium transition-colors ${
+              activeTab === tab.key
+                ? TAB_COLORS[tab.key]
+                : "border-transparent text-gray-500 hover:text-gray-300"
+            }`}
+          >
+            {tab.icon}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div className="p-6">{TAB_CONTENT[activeTab]()}</div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/test-detail/TestDetailHeader.tsx b/frontend/src/components/test-detail/TestDetailHeader.tsx
new file mode 100644
index 0000000..055971f
--- /dev/null
+++ b/frontend/src/components/test-detail/TestDetailHeader.tsx
@@ -0,0 +1,329 @@
+import {
+  FlaskConical,
+  Play,
+  Send,
+  CheckCircle,
+  XCircle,
+  RotateCcw,
+  Loader2,
+  Shield,
+  ShieldCheck,
+} from "lucide-react";
+import type { Test, TestState, User } from "../../types/models";
+
+// ── Progress steps ─────────────────────────────────────────────────
+
+const PROGRESS_STEPS: { key: TestState; label: string }[] = [
+  { key: "draft", label: "Draft" },
+  { key: "red_executing", label: "Red Exec" },
+  { key: "blue_evaluating", label: "Blue Eval" },
+  { key: "in_review", label: "Review" },
+  { key: "validated", label: "Validated" },
+];
+
+const STATE_INDEX: Record<TestState, number> = {
+  draft: 0,
+  red_executing: 1,
+  blue_evaluating: 2,
+  in_review: 3,
+  validated: 4,
+  rejected: -1,
+};
+
+// ── Badge colors ───────────────────────────────────────────────────
+
+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",
+  blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-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",
+};
+
+// ── Props ──────────────────────────────────────────────────────────
+
+interface TestDetailHeaderProps {
+  test: Test;
+  user: User | null;
+  isTransitioning: boolean;
+  onStartExecution: () => void;
+  onSubmitRed: () => void;
+  onSubmitBlue: () => void;
+  onOpenValidateModal: (side: "red" | "blue") => void;
+  onReopen: () => void;
+}
+
+// ── Component ──────────────────────────────────────────────────────
+
+export default function TestDetailHeader({
+  test,
+  user,
+  isTransitioning,
+  onStartExecution,
+  onSubmitRed,
+  onSubmitBlue,
+  onOpenValidateModal,
+  onReopen,
+}: TestDetailHeaderProps) {
+  const role = user?.role ?? "";
+  const currentIdx = STATE_INDEX[test.state];
+
+  const formatDate = (d: string | null) => {
+    if (!d) return null;
+    return new Date(d).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  // ── Contextual action buttons ────────────────────────────────────
+
+  const renderActions = () => {
+    const buttons: React.ReactNode[] = [];
+
+    // Red Tech in draft -> Start Execution
+    if (
+      test.state === "draft" &&
+      (role === "red_tech" || role === "admin")
+    ) {
+      buttons.push(
+        <button
+          key="start"
+          onClick={onStartExecution}
+          disabled={isTransitioning}
+          className="flex items-center gap-1.5 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white hover:bg-orange-500 transition-colors disabled:opacity-50"
+        >
+          {isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
+          Start Execution
+        </button>,
+      );
+    }
+
+    // Red Tech in red_executing -> Submit to Blue Team
+    if (
+      test.state === "red_executing" &&
+      (role === "red_tech" || role === "admin")
+    ) {
+      buttons.push(
+        <button
+          key="submit-red"
+          onClick={onSubmitRed}
+          disabled={isTransitioning}
+          className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors disabled:opacity-50"
+        >
+          {isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+          Submit to Blue Team
+        </button>,
+      );
+    }
+
+    // Blue Tech in blue_evaluating -> Submit for Review
+    if (
+      test.state === "blue_evaluating" &&
+      (role === "blue_tech" || role === "admin")
+    ) {
+      buttons.push(
+        <button
+          key="submit-blue"
+          onClick={onSubmitBlue}
+          disabled={isTransitioning}
+          className="flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 transition-colors disabled:opacity-50"
+        >
+          {isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+          Submit for Review
+        </button>,
+      );
+    }
+
+    // Red Lead in in_review -> Validate Red
+    if (
+      test.state === "in_review" &&
+      (role === "red_lead" || role === "admin") &&
+      !test.red_validation_status
+    ) {
+      buttons.push(
+        <button
+          key="validate-red"
+          onClick={() => onOpenValidateModal("red")}
+          className="flex items-center gap-1.5 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white hover:bg-orange-500 transition-colors"
+        >
+          <Shield className="h-4 w-4" />
+          Validate Red Side
+        </button>,
+      );
+    }
+
+    // Blue Lead in in_review -> Validate Blue
+    if (
+      test.state === "in_review" &&
+      (role === "blue_lead" || role === "admin") &&
+      !test.blue_validation_status
+    ) {
+      buttons.push(
+        <button
+          key="validate-blue"
+          onClick={() => onOpenValidateModal("blue")}
+          className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors"
+        >
+          <Shield className="h-4 w-4" />
+          Validate Blue Side
+        </button>,
+      );
+    }
+
+    // Leads/admin on rejected -> Reopen
+    if (
+      test.state === "rejected" &&
+      (role === "red_lead" || role === "blue_lead" || role === "admin")
+    ) {
+      buttons.push(
+        <button
+          key="reopen"
+          onClick={onReopen}
+          disabled={isTransitioning}
+          className="flex items-center gap-1.5 rounded-lg border border-cyan-500/30 bg-cyan-900/20 px-4 py-2 text-sm font-medium text-cyan-400 hover:bg-cyan-900/40 transition-colors disabled:opacity-50"
+        >
+          {isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <RotateCcw className="h-4 w-4" />}
+          Reopen Test
+        </button>,
+      );
+    }
+
+    return buttons.length > 0 ? (
+      <div className="flex flex-wrap items-center gap-2">{buttons}</div>
+    ) : null;
+  };
+
+  // ── Dual validation indicators ───────────────────────────────────
+
+  const renderValidationIndicators = () => {
+    if (test.state !== "in_review" && test.state !== "validated" && test.state !== "rejected") {
+      return null;
+    }
+
+    const redStatus = test.red_validation_status;
+    const blueStatus = test.blue_validation_status;
+
+    const indicator = (label: string, status: string | null) => {
+      if (status === "approved")
+        return (
+          <span className="flex items-center gap-1 text-xs text-green-400">
+            <CheckCircle className="h-3.5 w-3.5" /> {label}: Approved
+          </span>
+        );
+      if (status === "rejected")
+        return (
+          <span className="flex items-center gap-1 text-xs text-red-400">
+            <XCircle className="h-3.5 w-3.5" /> {label}: Rejected
+          </span>
+        );
+      return (
+        <span className="flex items-center gap-1 text-xs text-gray-500">
+          <ShieldCheck className="h-3.5 w-3.5" /> {label}: Pending
+        </span>
+      );
+    };
+
+    return (
+      <div className="flex items-center gap-4">
+        {indicator("Red Lead", redStatus)}
+        {indicator("Blue Lead", blueStatus)}
+      </div>
+    );
+  };
+
+  // ── Render ───────────────────────────────────────────────────────
+
+  return (
+    <div className="rounded-xl border border-gray-800 bg-gray-900 p-6 space-y-4">
+      {/* Top row: name + badge + actions */}
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex items-start gap-4">
+          <div className="rounded-lg bg-cyan-500/10 p-3">
+            <FlaskConical className="h-8 w-8 text-cyan-400" />
+          </div>
+          <div>
+            <div className="flex items-center gap-3">
+              <h1 className="text-2xl font-bold text-white">{test.name}</h1>
+              <span
+                className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${
+                  STATE_BADGE[test.state]
+                }`}
+              >
+                {test.state.replace(/_/g, " ")}
+              </span>
+            </div>
+            <p className="mt-1 text-sm text-gray-400">
+              Created {formatDate(test.created_at)}
+            </p>
+            {renderValidationIndicators()}
+          </div>
+        </div>
+
+        {renderActions()}
+      </div>
+
+      {/* Progress bar */}
+      {test.state !== "rejected" && (
+        <div className="pt-2">
+          <div className="flex items-center gap-1">
+            {PROGRESS_STEPS.map((step, idx) => {
+              const isCompleted = idx < currentIdx;
+              const isCurrent = idx === currentIdx;
+
+              return (
+                <div key={step.key} className="flex flex-1 flex-col items-center gap-1">
+                  <div className="flex w-full items-center">
+                    {/* Connector left */}
+                    {idx > 0 && (
+                      <div
+                        className={`h-0.5 flex-1 ${
+                          isCompleted || isCurrent ? "bg-cyan-500" : "bg-gray-700"
+                        }`}
+                      />
+                    )}
+                    {/* Dot */}
+                    <div
+                      className={`h-3 w-3 shrink-0 rounded-full border-2 ${
+                        isCompleted
+                          ? "border-cyan-500 bg-cyan-500"
+                          : isCurrent
+                            ? "border-cyan-500 bg-gray-900"
+                            : "border-gray-600 bg-gray-900"
+                      }`}
+                    />
+                    {/* Connector right */}
+                    {idx < PROGRESS_STEPS.length - 1 && (
+                      <div
+                        className={`h-0.5 flex-1 ${
+                          isCompleted ? "bg-cyan-500" : "bg-gray-700"
+                        }`}
+                      />
+                    )}
+                  </div>
+                  <span
+                    className={`text-[10px] font-medium ${
+                      isCurrent ? "text-cyan-400" : isCompleted ? "text-gray-400" : "text-gray-600"
+                    }`}
+                  >
+                    {step.label}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Rejected banner */}
+      {test.state === "rejected" && (
+        <div className="rounded-lg border border-red-500/30 bg-red-900/20 p-3 text-sm text-red-400">
+          This test was rejected and needs to be reopened to restart the workflow.
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/test-detail/ValidationModal.tsx b/frontend/src/components/test-detail/ValidationModal.tsx
new file mode 100644
index 0000000..560d21f
--- /dev/null
+++ b/frontend/src/components/test-detail/ValidationModal.tsx
@@ -0,0 +1,196 @@
+import { useState } from "react";
+import {
+  CheckCircle,
+  XCircle,
+  Loader2,
+  Shield,
+  ShieldCheck,
+  FileIcon,
+  X,
+} from "lucide-react";
+import type { Test } from "../../types/models";
+
+// ── Props ──────────────────────────────────────────────────────────
+
+interface ValidationModalProps {
+  side: "red" | "blue";
+  test: Test;
+  isSubmitting: boolean;
+  onSubmit: (status: "approved" | "rejected", notes: string) => void;
+  onClose: () => void;
+}
+
+// ── Component ──────────────────────────────────────────────────────
+
+export default function ValidationModal({
+  side,
+  test,
+  isSubmitting,
+  onSubmit,
+  onClose,
+}: ValidationModalProps) {
+  const [decision, setDecision] = useState<"approved" | "rejected" | null>(null);
+  const [notes, setNotes] = useState("");
+
+  const isRed = side === "red";
+  const title = isRed ? "Validate as Red Lead" : "Validate as Blue Lead";
+  const accent = isRed ? "orange" : "indigo";
+
+  // Evidence from the corresponding team
+  const evidences = isRed ? test.red_evidences || [] : test.blue_evidences || [];
+
+  // Status of the other side's validation
+  const otherStatus = isRed
+    ? test.blue_validation_status
+    : test.red_validation_status;
+  const otherLabel = isRed ? "Blue Lead" : "Red Lead";
+
+  // Can submit?
+  const canSubmit =
+    decision !== null &&
+    !isSubmitting &&
+    (decision === "approved" || notes.trim().length > 0);
+
+  // ── Render ───────────────────────────────────────────────────────
+
+  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>
+
+          {/* Other side status */}
+          <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-3">
+            <span className="text-xs font-medium text-gray-500">{otherLabel} status: </span>
+            {otherStatus === "approved" ? (
+              <span className="inline-flex items-center gap-1 text-xs text-green-400">
+                <CheckCircle className="h-3.5 w-3.5" /> Approved
+              </span>
+            ) : otherStatus === "rejected" ? (
+              <span className="inline-flex items-center gap-1 text-xs text-red-400">
+                <XCircle className="h-3.5 w-3.5" /> Rejected
+              </span>
+            ) : (
+              <span className="text-xs text-gray-400">Pending</span>
+            )}
+          </div>
+
+          {/* Decision */}
+          <div>
+            <h4 className="mb-2 text-sm font-medium text-gray-300">Decision</h4>
+            <div className="flex gap-3">
+              <button
+                onClick={() => setDecision("approved")}
+                className={`flex flex-1 items-center justify-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
+                  decision === "approved"
+                    ? "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("rejected")}
+                className={`flex flex-1 items-center justify-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
+                  decision === "rejected"
+                    ? "border-red-500 bg-red-500/10 text-red-400"
+                    : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
+                }`}
+              >
+                <XCircle className="h-4 w-4" />
+                Reject
+              </button>
+            </div>
+          </div>
+
+          {/* Notes */}
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-gray-300">
+              Notes{decision === "rejected" && <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-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
+              placeholder={
+                decision === "rejected"
+                  ? "Explain why this is being rejected..."
+                  : "Optional notes..."
+              }
+            />
+            {decision === "rejected" && notes.trim().length === 0 && (
+              <p className="mt-1 text-xs text-red-400">
+                Notes are required when rejecting.
+              </p>
+            )}
+          </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={() => decision && onSubmit(decision, notes)}
+            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 === "rejected"
+                ? "bg-red-600 hover:bg-red-500"
+                : "bg-green-600 hover:bg-green-500"
+            }`}
+          >
+            {isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
+            {decision === "approved"
+              ? "Confirm Approval"
+              : decision === "rejected"
+                ? "Confirm Rejection"
+                : "Select a decision"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/TestDetailPage.tsx b/frontend/src/pages/TestDetailPage.tsx
index e4f87e0..9cd6265 100644
--- a/frontend/src/pages/TestDetailPage.tsx
+++ b/frontend/src/pages/TestDetailPage.tsx
@@ -1,43 +1,29 @@
 import { useParams, useNavigate } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState, useEffect, useCallback } from "react";
+import { Loader2, AlertCircle, ArrowLeft } from "lucide-react";
+
 import {
-  Loader2,
-  AlertCircle,
-  ArrowLeft,
-  FlaskConical,
-  CheckCircle,
-  XCircle,
-  Clock,
-  FileText,
-} from "lucide-react";
-import { getTestById, validateTest, rejectTest } from "../api/tests";
+  getTestById,
+  updateTestRed,
+  updateTestBlue,
+  startExecution,
+  submitRedEvidence,
+  submitBlueEvidence,
+  validateAsRedLead,
+  validateAsBlueLead,
+  reopenTest,
+  getTestTimeline,
+} from "../api/tests";
 import { uploadEvidence, getEvidence } from "../api/evidence";
-import EvidenceUpload from "../components/EvidenceUpload";
-import EvidenceList from "../components/EvidenceList";
 import { useAuth } from "../context/AuthContext";
-import type { TestState, TestResult } from "../types/models";
-import { useState } from "react";
+import type { TestResult, TeamSide, TestTimelineEntry } from "../types/models";
 
-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",
-  blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-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",
-};
+import TestDetailHeader from "../components/test-detail/TestDetailHeader";
+import TeamTabs from "../components/test-detail/TeamTabs";
+import ValidationModal from "../components/test-detail/ValidationModal";
 
-const testResultBadgeColors: Record<TestResult, string> = {
-  detected: "bg-green-900/50 text-green-400 border-green-500/30",
-  not_detected: "bg-red-900/50 text-red-400 border-red-500/30",
-  partially_detected: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
-};
-
-const RESULTS: { value: TestResult; label: string }[] = [
-  { value: "detected", label: "Detected" },
-  { value: "not_detected", label: "Not Detected" },
-  { value: "partially_detected", label: "Partially Detected" },
-];
+// ── Page Component ─────────────────────────────────────────────────
 
 export default function TestDetailPage() {
   const { testId } = useParams<{ testId: string }>();
@@ -45,11 +31,31 @@ export default function TestDetailPage() {
   const queryClient = useQueryClient();
   const { user } = useAuth();
 
-  const [showValidateModal, setShowValidateModal] = useState(false);
-  const [selectedResult, setSelectedResult] = useState<TestResult>("detected");
+  // ── State ──────────────────────────────────────────────────────
 
-  const canValidate =
-    user?.role === "admin" || user?.role === "red_lead" || user?.role === "blue_lead";
+  const [validationModal, setValidationModal] = useState<{
+    open: boolean;
+    side: "red" | "blue";
+  }>({ open: false, side: "red" });
+
+  const [redDraft, setRedDraft] = useState({
+    procedure_text: "",
+    tool_used: "",
+    attack_success: false,
+    red_summary: "",
+  });
+
+  const [blueDraft, setBlueDraft] = useState<{
+    detection_result: TestResult | "";
+    blue_summary: string;
+  }>({
+    detection_result: "",
+    blue_summary: "",
+  });
+
+  const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
+
+  // ── Queries ────────────────────────────────────────────────────
 
   const {
     data: test,
@@ -61,40 +67,196 @@ export default function TestDetailPage() {
     enabled: !!testId,
   });
 
+  const {
+    data: timeline = [],
+    isLoading: isTimelineLoading,
+  } = useQuery({
+    queryKey: ["test-timeline", testId],
+    queryFn: () => getTestTimeline(testId!),
+    enabled: !!testId,
+  });
+
+  // Hydrate drafts from test data
+  useEffect(() => {
+    if (test) {
+      setRedDraft({
+        procedure_text: test.procedure_text || "",
+        tool_used: test.tool_used || "",
+        attack_success: test.attack_success ?? false,
+        red_summary: test.red_summary || "",
+      });
+      setBlueDraft({
+        detection_result: test.detection_result || "",
+        blue_summary: test.blue_summary || "",
+      });
+    }
+  }, [test]);
+
+  // ── Toast helper ───────────────────────────────────────────────
+
+  const showToast = useCallback((message: string, type: "success" | "error") => {
+    setToast({ message, type });
+    setTimeout(() => setToast(null), 3500);
+  }, []);
+
+  const invalidateAll = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ["test", testId] });
+    queryClient.invalidateQueries({ queryKey: ["test-timeline", testId] });
+    queryClient.invalidateQueries({ queryKey: ["techniques"] });
+  }, [queryClient, testId]);
+
+  // ── Mutations ──────────────────────────────────────────────────
+
+  // Red field save (auto-save on blur would come later; for now Save button or transitions)
+  const saveRedMutation = useMutation({
+    mutationFn: () =>
+      updateTestRed(testId!, {
+        procedure_text: redDraft.procedure_text || undefined,
+        tool_used: redDraft.tool_used || undefined,
+        attack_success: redDraft.attack_success,
+        red_summary: redDraft.red_summary || undefined,
+      }),
+    onSuccess: () => {
+      invalidateAll();
+      showToast("Red Team fields saved", "success");
+    },
+    onError: (err: Error) => showToast(err.message, "error"),
+  });
+
+  const saveBlueMutation = useMutation({
+    mutationFn: () =>
+      updateTestBlue(testId!, {
+        detection_result: (blueDraft.detection_result as TestResult) || undefined,
+        blue_summary: blueDraft.blue_summary || undefined,
+      }),
+    onSuccess: () => {
+      invalidateAll();
+      showToast("Blue Team fields saved", "success");
+    },
+    onError: (err: Error) => showToast(err.message, "error"),
+  });
+
+  // State transitions
+  const startExecMutation = useMutation({
+    mutationFn: () => startExecution(testId!),
+    onSuccess: () => {
+      invalidateAll();
+      showToast("Test execution started", "success");
+    },
+    onError: (err: Error) => showToast(err.message, "error"),
+  });
+
+  const submitRedMutation = useMutation({
+    mutationFn: () => submitRedEvidence(testId!),
+    onSuccess: () => {
+      invalidateAll();
+      showToast("Submitted to Blue Team", "success");
+    },
+    onError: (err: Error) => showToast(err.message, "error"),
+  });
+
+  const submitBlueMutation = useMutation({
+    mutationFn: () => submitBlueEvidence(testId!),
+    onSuccess: () => {
+      invalidateAll();
+      showToast("Submitted for review", "success");
+    },
+    onError: (err: Error) => showToast(err.message, "error"),
+  });
+
+  const validateRedLeadMutation = useMutation({
+    mutationFn: (payload: { red_validation_status: "approved" | "rejected"; red_validation_notes?: string }) =>
+      validateAsRedLead(testId!, payload),
+    onSuccess: () => {
+      invalidateAll();
+      setValidationModal({ open: false, side: "red" });
+      showToast("Red Lead validation submitted", "success");
+    },
+    onError: (err: Error) => showToast(err.message, "error"),
+  });
+
+  const validateBlueLeadMutation = useMutation({
+    mutationFn: (payload: { blue_validation_status: "approved" | "rejected"; blue_validation_notes?: string }) =>
+      validateAsBlueLead(testId!, payload),
+    onSuccess: () => {
+      invalidateAll();
+      setValidationModal({ open: false, side: "blue" });
+      showToast("Blue Lead validation submitted", "success");
+    },
+    onError: (err: Error) => showToast(err.message, "error"),
+  });
+
+  const reopenMutation = useMutation({
+    mutationFn: () => reopenTest(testId!),
+    onSuccess: () => {
+      invalidateAll();
+      showToast("Test reopened", "success");
+    },
+    onError: (err: Error) => showToast(err.message, "error"),
+  });
+
+  // Evidence upload
   const uploadMutation = useMutation({
-    mutationFn: (file: File) => uploadEvidence(testId!, file, "red"),
+    mutationFn: ({ file, team }: { file: File; team: TeamSide }) =>
+      uploadEvidence(testId!, file, team),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["test", testId] });
+      invalidateAll();
+      showToast("Evidence uploaded", "success");
     },
+    onError: (err: Error) => showToast(err.message, "error"),
   });
 
-  const validateMutation = useMutation({
-    mutationFn: () => validateTest(testId!, { result: selectedResult }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["test", testId] });
-      queryClient.invalidateQueries({ queryKey: ["techniques"] });
-      setShowValidateModal(false);
-    },
-  });
-
-  const rejectMutation = useMutation({
-    mutationFn: () => rejectTest(testId!),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["test", testId] });
-    },
-  });
+  // ── Handlers ───────────────────────────────────────────────────
 
   const handleDownload = async (evidenceId: string) => {
     try {
-      const evidence = await getEvidence(evidenceId);
-      if (evidence.download_url) {
-        window.open(evidence.download_url, "_blank");
+      const ev = await getEvidence(evidenceId);
+      if (ev.download_url) {
+        window.open(ev.download_url, "_blank");
       }
     } catch (err) {
       console.error("Failed to get download URL:", err);
     }
   };
 
+  const handleRedFieldChange = (field: string, value: string | boolean) => {
+    setRedDraft((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleBlueFieldChange = (field: string, value: string) => {
+    setBlueDraft((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleUploadEvidence = async (file: File, team: TeamSide) => {
+    await uploadMutation.mutateAsync({ file, team });
+  };
+
+  const handleValidationSubmit = (
+    side: "red" | "blue",
+    status: "approved" | "rejected",
+    notes: string,
+  ) => {
+    if (side === "red") {
+      validateRedLeadMutation.mutate({
+        red_validation_status: status,
+        red_validation_notes: notes || undefined,
+      });
+    } else {
+      validateBlueLeadMutation.mutate({
+        blue_validation_status: status,
+        blue_validation_notes: notes || undefined,
+      });
+    }
+  };
+
+  const isTransitioning =
+    startExecMutation.isPending ||
+    submitRedMutation.isPending ||
+    submitBlueMutation.isPending ||
+    reopenMutation.isPending;
+
+  // ── Loading / Error states ─────────────────────────────────────
+
   if (isLoading) {
     return (
       <div className="flex h-64 items-center justify-center">
@@ -120,7 +282,7 @@ export default function TestDetailPage() {
   }
 
   const formatDate = (dateStr: string | null) => {
-    if (!dateStr) return "—";
+    if (!dateStr) return "\u2014";
     return new Date(dateStr).toLocaleDateString("en-US", {
       year: "numeric",
       month: "short",
@@ -130,7 +292,15 @@ export default function TestDetailPage() {
     });
   };
 
-  const canEdit = test.state === "draft" || test.state === "rejected";
+  const role = user?.role ?? "";
+  const canSaveRed =
+    (test.state === "draft" || test.state === "red_executing") &&
+    (role === "red_tech" || role === "admin");
+  const canSaveBlue =
+    test.state === "blue_evaluating" &&
+    (role === "blue_tech" || role === "admin");
+
+  // ── Render ─────────────────────────────────────────────────────
 
   return (
     <div className="space-y-6">
@@ -143,135 +313,91 @@ export default function TestDetailPage() {
         Back
       </button>
 
-      {/* Header */}
-      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
-        <div className="flex items-start justify-between">
-          <div className="flex items-start gap-4">
-            <div className="rounded-lg bg-cyan-500/10 p-3">
-              <FlaskConical className="h-8 w-8 text-cyan-400" />
-            </div>
-            <div>
-              <div className="flex items-center gap-3">
-                <h1 className="text-2xl font-bold text-white">{test.name}</h1>
-                <span
-                  className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
-                    testStateBadgeColors[test.state]
-                  }`}
-                >
-                  {test.state.replace(/_/g, " ")}
-                </span>
-                {test.result && (
-                  <span
-                    className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
-                      testResultBadgeColors[test.result]
-                    }`}
-                  >
-                    {test.result.replace(/_/g, " ")}
-                  </span>
-                )}
-              </div>
-              <p className="mt-1 text-sm text-gray-400">
-                Created {formatDate(test.created_at)}
-              </p>
-            </div>
-          </div>
+      {/* Header with progress bar and actions */}
+      <TestDetailHeader
+        test={test}
+        user={user}
+        isTransitioning={isTransitioning}
+        onStartExecution={() => startExecMutation.mutate()}
+        onSubmitRed={() => submitRedMutation.mutate()}
+        onSubmitBlue={() => submitBlueMutation.mutate()}
+        onOpenValidateModal={(side) => setValidationModal({ open: true, side })}
+        onReopen={() => reopenMutation.mutate()}
+      />
 
-          {/* Actions */}
-          {canValidate && canEdit && (
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => setShowValidateModal(true)}
-                className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-500 transition-colors"
-              >
-                <CheckCircle className="h-4 w-4" />
-                Validate
-              </button>
-              <button
-                onClick={() => rejectMutation.mutate()}
-                disabled={rejectMutation.isPending}
-                className="flex items-center gap-1.5 rounded-lg border border-red-500/30 bg-red-900/20 px-4 py-2 text-sm font-medium text-red-400 hover:bg-red-900/40 transition-colors"
-              >
-                {rejectMutation.isPending ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                ) : (
-                  <XCircle className="h-4 w-4" />
-                )}
-                Reject
-              </button>
+      {/* Content: Tabs + Sidebar */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Main: Team Tabs */}
+        <div className="lg:col-span-2 space-y-4">
+          <TeamTabs
+            test={test}
+            user={user}
+            timeline={timeline}
+            isTimelineLoading={isTimelineLoading}
+            onRedFieldChange={handleRedFieldChange}
+            redDraft={redDraft}
+            onBlueFieldChange={handleBlueFieldChange}
+            blueDraft={blueDraft}
+            onUploadEvidence={handleUploadEvidence}
+            isUploading={uploadMutation.isPending}
+            onDownloadEvidence={handleDownload}
+          />
+
+          {/* Save buttons */}
+          {(canSaveRed || canSaveBlue) && (
+            <div className="flex justify-end gap-3">
+              {canSaveRed && (
+                <button
+                  onClick={() => saveRedMutation.mutate()}
+                  disabled={saveRedMutation.isPending}
+                  className="flex items-center gap-1.5 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white hover:bg-orange-500 disabled:opacity-50 transition-colors"
+                >
+                  {saveRedMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" />}
+                  Save Red Team Fields
+                </button>
+              )}
+              {canSaveBlue && (
+                <button
+                  onClick={() => saveBlueMutation.mutate()}
+                  disabled={saveBlueMutation.isPending}
+                  className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-50 transition-colors"
+                >
+                  {saveBlueMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" />}
+                  Save Blue Team Fields
+                </button>
+              )}
             </div>
           )}
         </div>
-      </div>
 
-      {/* Content Grid */}
-      <div className="grid gap-6 lg:grid-cols-3">
-        {/* Main Content */}
-        <div className="lg:col-span-2 space-y-6">
-          {/* Description */}
-          <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
-            <h2 className="mb-3 text-lg font-semibold text-white">Description</h2>
-            <p className="text-sm text-gray-400 leading-relaxed">
-              {test.description || "No description provided."}
-            </p>
-          </div>
-
-          {/* Procedure */}
-          <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
-            <h2 className="mb-3 text-lg font-semibold text-white">Procedure</h2>
-            {test.procedure_text ? (
-              <pre className="whitespace-pre-wrap rounded-lg bg-gray-800 p-4 font-mono text-sm text-gray-300">
-                {test.procedure_text}
-              </pre>
-            ) : (
-              <p className="text-sm text-gray-500">No procedure documented.</p>
-            )}
-          </div>
-
-          {/* Evidence Section */}
-          <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
-            <h2 className="mb-4 text-lg font-semibold text-white">Evidence</h2>
-            
-            {/* Upload */}
-            <EvidenceUpload
-              onUpload={async (file) => {
-                await uploadMutation.mutateAsync(file);
-              }}
-              isUploading={uploadMutation.isPending}
-            />
-
-            {uploadMutation.isError && (
-              <div className="mt-3 rounded-lg border border-red-500/30 bg-red-900/20 p-3">
-                <p className="text-sm text-red-400">
-                  Upload failed: {(uploadMutation.error as Error)?.message}
-                </p>
-              </div>
-            )}
-
-            {/* Evidence List */}
-            <div className="mt-6">
-              <EvidenceList
-                evidences={[...(test.red_evidences || []), ...(test.blue_evidences || [])]}
-                onDownload={handleDownload}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Sidebar */}
+        {/* Sidebar: Metadata */}
         <div className="space-y-6">
-          {/* Metadata */}
           <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
             <h2 className="mb-4 text-lg font-semibold text-white">Details</h2>
             <dl className="space-y-4">
               <div>
-                <dt className="text-xs font-medium uppercase text-gray-500">Platform</dt>
-                <dd className="mt-1 text-sm text-gray-300 capitalize">
-                  {test.platform || "—"}
+                <dt className="text-xs font-medium uppercase text-gray-500">Description</dt>
+                <dd className="mt-1 text-sm text-gray-300">
+                  {test.description || "\u2014"}
                 </dd>
               </div>
               <div>
-                <dt className="text-xs font-medium uppercase text-gray-500">Tool Used</dt>
-                <dd className="mt-1 text-sm text-gray-300">{test.tool_used || "—"}</dd>
+                <dt className="text-xs font-medium uppercase text-gray-500">Platform</dt>
+                <dd className="mt-1 text-sm text-gray-300 capitalize">
+                  {test.platform || "\u2014"}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-xs font-medium uppercase text-gray-500">Creator</dt>
+                <dd className="mt-1 text-sm text-gray-300">
+                  {test.created_by || "\u2014"}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-xs font-medium uppercase text-gray-500">Created</dt>
+                <dd className="mt-1 text-sm text-gray-300">
+                  {formatDate(test.created_at)}
+                </dd>
               </div>
               <div>
                 <dt className="text-xs font-medium uppercase text-gray-500">Execution Date</dt>
@@ -300,64 +426,33 @@ export default function TestDetailPage() {
         </div>
       </div>
 
-      {/* Validate Modal */}
-      {showValidateModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-          <div className="w-full max-w-md rounded-xl border border-gray-800 bg-gray-900 p-6">
-            <h3 className="text-lg font-semibold text-white">Validate Test</h3>
-            <p className="mt-1 text-sm text-gray-400">
-              Select the detection result for this test.
-            </p>
+      {/* Validation Modal */}
+      {validationModal.open && (
+        <ValidationModal
+          side={validationModal.side}
+          test={test}
+          isSubmitting={
+            validationModal.side === "red"
+              ? validateRedLeadMutation.isPending
+              : validateBlueLeadMutation.isPending
+          }
+          onSubmit={(status, notes) =>
+            handleValidationSubmit(validationModal.side, status, notes)
+          }
+          onClose={() => setValidationModal({ open: false, side: "red" })}
+        />
+      )}
 
-            <div className="mt-4 space-y-2">
-              {RESULTS.map((r) => (
-                <label
-                  key={r.value}
-                  className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
-                    selectedResult === r.value
-                      ? "border-cyan-500 bg-cyan-500/10"
-                      : "border-gray-700 bg-gray-800 hover:border-gray-600"
-                  }`}
-                >
-                  <input
-                    type="radio"
-                    name="result"
-                    value={r.value}
-                    checked={selectedResult === r.value}
-                    onChange={(e) => setSelectedResult(e.target.value as TestResult)}
-                    className="sr-only"
-                  />
-                  <div
-                    className={`h-4 w-4 rounded-full border-2 ${
-                      selectedResult === r.value
-                        ? "border-cyan-500 bg-cyan-500"
-                        : "border-gray-600"
-                    }`}
-                  />
-                  <span className="text-sm text-gray-200">{r.label}</span>
-                </label>
-              ))}
-            </div>
-
-            <div className="mt-6 flex justify-end gap-3">
-              <button
-                onClick={() => setShowValidateModal(false)}
-                className="rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-400 hover:bg-gray-800"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={() => validateMutation.mutate()}
-                disabled={validateMutation.isPending}
-                className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-500 disabled:opacity-50"
-              >
-                {validateMutation.isPending && (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                )}
-                Confirm Validation
-              </button>
-            </div>
-          </div>
+      {/* Toast notification */}
+      {toast && (
+        <div
+          className={`fixed bottom-6 right-6 z-50 rounded-lg border px-4 py-3 text-sm shadow-lg backdrop-blur transition-all ${
+            toast.type === "success"
+              ? "border-green-500/30 bg-green-900/90 text-green-300"
+              : "border-red-500/30 bg-red-900/90 text-red-300"
+          }`}
+        >
+          {toast.message}
         </div>
       )}
     </div>