feat(phase-25): add detection rule associations, checklist UI and evaluation workflow (T-215, T-216)

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

@@ -0,0 +1,321 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Loader2,
+  CheckCircle,
+  XCircle,
+  MinusCircle,
+  ChevronDown,
+  ChevronRight,
+  ExternalLink,
+  Shield,
+} from "lucide-react";
+import {
+  getDetectionRulesForTest,
+  evaluateDetectionRule,
+  type DetectionRuleItem,
+} from "../../api/detection-rules";
+import type { User } from "../../types/models";
+
+const severityColors: Record<string, string> = {
+  critical: "bg-red-900/50 text-red-400 border-red-500/30",
+  high: "bg-orange-900/50 text-orange-400 border-orange-500/30",
+  medium: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
+  low: "bg-blue-900/50 text-blue-400 border-blue-500/30",
+  informational: "bg-gray-800/50 text-gray-400 border-gray-600/30",
+};
+
+const sourceColors: Record<string, string> = {
+  sigma: "bg-purple-900/50 text-purple-400 border-purple-500/30",
+  elastic: "bg-cyan-900/50 text-cyan-400 border-cyan-500/30",
+  splunk: "bg-green-900/50 text-green-400 border-green-500/30",
+  custom: "bg-gray-800/50 text-gray-400 border-gray-600/30",
+};
+
+interface Props {
+  testId: string;
+  user: User | null;
+  canEdit: boolean;
+}
+
+export default function DetectionRuleChecklist({ testId, user, canEdit }: Props) {
+  const queryClient = useQueryClient();
+  const [expandedRules, setExpandedRules] = useState<Set<string>>(new Set());
+  const [editingNotes, setEditingNotes] = useState<Record<string, string>>({});
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["detection-rules-for-test", testId],
+    queryFn: () => getDetectionRulesForTest(testId),
+    enabled: !!testId,
+  });
+
+  const evaluateMutation = useMutation({
+    mutationFn: evaluateDetectionRule,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["detection-rules-for-test", testId] });
+    },
+  });
+
+  const toggleExpanded = (ruleId: string) => {
+    setExpandedRules((prev) => {
+      const next = new Set(prev);
+      if (next.has(ruleId)) next.delete(ruleId);
+      else next.add(ruleId);
+      return next;
+    });
+  };
+
+  const handleEvaluate = (ruleId: string, triggered: boolean | null) => {
+    evaluateMutation.mutate({
+      test_id: testId,
+      detection_rule_id: ruleId,
+      triggered,
+      notes: editingNotes[ruleId],
+    });
+  };
+
+  const handleNotesChange = (ruleId: string, notes: string) => {
+    setEditingNotes((prev) => ({ ...prev, [ruleId]: notes }));
+  };
+
+  const handleNotesSave = (ruleId: string, triggered: boolean | null) => {
+    evaluateMutation.mutate({
+      test_id: testId,
+      detection_rule_id: ruleId,
+      triggered: triggered,
+      notes: editingNotes[ruleId] ?? "",
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-6 w-6 animate-spin text-gray-500" />
+      </div>
+    );
+  }
+
+  if (error || !data) {
+    return null;
+  }
+
+  if (data.rules.length === 0) {
+    return (
+      <div className="rounded-lg border border-gray-700 bg-gray-800/30 p-4 text-center">
+        <Shield className="mx-auto h-8 w-8 text-gray-600" />
+        <p className="mt-2 text-sm text-gray-400">No detection rules available for this technique.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Summary bar */}
+      <div className="flex items-center justify-between rounded-lg border border-gray-700 bg-gray-800/50 p-3">
+        <div className="flex items-center gap-4">
+          <div className="text-sm text-gray-300">
+            <span className="font-semibold text-white">{data.triggered}</span>
+            <span className="text-gray-500"> / </span>
+            <span className="font-semibold text-white">{data.total}</span>
+            <span className="ml-1 text-gray-400">rules triggered</span>
+          </div>
+          {data.evaluated > 0 && (
+            <span className="rounded-full bg-cyan-900/50 border border-cyan-500/30 px-2 py-0.5 text-xs font-medium text-cyan-400">
+              {data.detection_rate}% detection rate
+            </span>
+          )}
+        </div>
+        <div className="text-xs text-gray-500">
+          {data.evaluated} / {data.total} evaluated
+        </div>
+      </div>
+
+      {/* Progress bar */}
+      <div className="h-2 w-full rounded-full bg-gray-800 overflow-hidden">
+        <div className="flex h-full">
+          {data.total > 0 && (
+            <>
+              <div
+                className="bg-green-500 transition-all"
+                style={{ width: `${(data.triggered / data.total) * 100}%` }}
+              />
+              <div
+                className="bg-red-500 transition-all"
+                style={{
+                  width: `${((data.evaluated - data.triggered) / data.total) * 100}%`,
+                }}
+              />
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Rules list */}
+      <div className="space-y-2">
+        {data.rules.map((rule) => {
+          const isExpanded = expandedRules.has(rule.id);
+          const notesDraft = editingNotes[rule.id] ?? rule.notes ?? "";
+
+          return (
+            <div
+              key={rule.id}
+              className="rounded-lg border border-gray-700 bg-gray-800/30 overflow-hidden"
+            >
+              {/* Rule header */}
+              <div className="flex items-center gap-3 p-3">
+                {/* Expand toggle */}
+                <button
+                  onClick={() => toggleExpanded(rule.id)}
+                  className="shrink-0 text-gray-500 hover:text-gray-300"
+                >
+                  {isExpanded ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )}
+                </button>
+
+                {/* Status icon */}
+                {rule.triggered === true && <CheckCircle className="h-4 w-4 shrink-0 text-green-400" />}
+                {rule.triggered === false && <XCircle className="h-4 w-4 shrink-0 text-red-400" />}
+                {rule.triggered == null && <MinusCircle className="h-4 w-4 shrink-0 text-gray-500" />}
+
+                {/* Rule info */}
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-gray-200 truncate">{rule.title}</p>
+                </div>
+
+                {/* Badges */}
+                <div className="flex shrink-0 items-center gap-1.5">
+                  {rule.severity && (
+                    <span
+                      className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium ${
+                        severityColors[rule.severity] || severityColors.informational
+                      }`}
+                    >
+                      {rule.severity}
+                    </span>
+                  )}
+                  <span
+                    className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium ${
+                      sourceColors[rule.source] || sourceColors.custom
+                    }`}
+                  >
+                    {rule.source}
+                  </span>
+                </div>
+
+                {/* Evaluate buttons */}
+                {canEdit && (
+                  <div className="flex shrink-0 items-center gap-1">
+                    <button
+                      onClick={() => handleEvaluate(rule.id, true)}
+                      disabled={evaluateMutation.isPending}
+                      className={`rounded p-1 transition-colors ${
+                        rule.triggered === true
+                          ? "bg-green-900/50 text-green-400"
+                          : "text-gray-500 hover:bg-green-900/30 hover:text-green-400"
+                      }`}
+                      title="Triggered"
+                    >
+                      <CheckCircle className="h-4 w-4" />
+                    </button>
+                    <button
+                      onClick={() => handleEvaluate(rule.id, false)}
+                      disabled={evaluateMutation.isPending}
+                      className={`rounded p-1 transition-colors ${
+                        rule.triggered === false
+                          ? "bg-red-900/50 text-red-400"
+                          : "text-gray-500 hover:bg-red-900/30 hover:text-red-400"
+                      }`}
+                      title="Not Triggered"
+                    >
+                      <XCircle className="h-4 w-4" />
+                    </button>
+                    <button
+                      onClick={() => handleEvaluate(rule.id, null)}
+                      disabled={evaluateMutation.isPending}
+                      className={`rounded p-1 transition-colors ${
+                        rule.triggered === null && rule.result_id
+                          ? "bg-gray-700 text-gray-300"
+                          : "text-gray-500 hover:bg-gray-700 hover:text-gray-300"
+                      }`}
+                      title="Not Applicable"
+                    >
+                      <MinusCircle className="h-4 w-4" />
+                    </button>
+                  </div>
+                )}
+              </div>
+
+              {/* Expanded content */}
+              {isExpanded && (
+                <div className="border-t border-gray-700 p-3 space-y-3">
+                  {rule.description && (
+                    <p className="text-xs text-gray-400">{rule.description}</p>
+                  )}
+
+                  {/* Rule content */}
+                  {rule.rule_content && (
+                    <div>
+                      <p className="mb-1 text-[10px] font-medium uppercase text-gray-500">
+                        Rule Content ({rule.rule_format})
+                      </p>
+                      <pre className="max-h-48 overflow-auto rounded bg-gray-900 p-3 font-mono text-xs text-gray-300">
+                        {rule.rule_content}
+                      </pre>
+                    </div>
+                  )}
+
+                  {/* Source link */}
+                  {rule.source_url && (
+                    <a
+                      href={rule.source_url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-1 text-xs text-cyan-400 hover:underline"
+                    >
+                      View source
+                      <ExternalLink className="h-3 w-3" />
+                    </a>
+                  )}
+
+                  {/* Notes */}
+                  {canEdit ? (
+                    <div>
+                      <label className="mb-1 block text-[10px] font-medium uppercase text-gray-500">
+                        Notes
+                      </label>
+                      <div className="flex gap-2">
+                        <input
+                          value={notesDraft}
+                          onChange={(e) => handleNotesChange(rule.id, e.target.value)}
+                          placeholder="Add evaluation notes..."
+                          className="flex-1 rounded border border-gray-700 bg-gray-900 px-2 py-1.5 text-xs text-gray-200 placeholder-gray-500 focus:border-indigo-500 focus:outline-none"
+                        />
+                        <button
+                          onClick={() => handleNotesSave(rule.id, rule.triggered)}
+                          disabled={evaluateMutation.isPending}
+                          className="shrink-0 rounded bg-indigo-600 px-2 py-1.5 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50"
+                        >
+                          Save
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    rule.notes && (
+                      <div>
+                        <p className="text-[10px] font-medium uppercase text-gray-500">Notes</p>
+                        <p className="mt-0.5 text-xs text-gray-400">{rule.notes}</p>
+                      </div>
+                    )
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -24,6 +24,7 @@ import type {
 } from "../../types/models";
 import { RED_EDITABLE_STATES, BLUE_EDITABLE_STATES } from "../../types/models";
 import { getDefensesForTechnique } from "../../api/d3fend";
+import DetectionRuleChecklist from "./DetectionRuleChecklist";
 import EvidenceUpload from "../EvidenceUpload";
 import EvidenceList from "../EvidenceList";
 
@@ -337,6 +338,19 @@ export default function TeamTabs({
         />
       </div>
 
+      {/* Detection Rule Checklist */}
+      <div>
+        <h3 className="mb-3 flex items-center gap-2 text-sm font-medium text-gray-300">
+          <ShieldCheck className="h-4 w-4 text-indigo-400" />
+          Detection Rule Evaluation
+        </h3>
+        <DetectionRuleChecklist
+          testId={test.id}
+          user={user}
+          canEdit={canEditBlue}
+        />
+      </div>
+
       {/* Recommended Detection Approaches (D3FEND) */}
       {d3fendData && d3fendData.defenses.length > 0 && (
         <div className="rounded-lg border border-emerald-500/20 bg-emerald-900/10 p-4">