From 21c6febd22ac8f2594af822e6ffc1f2f5bc86f64 Mon Sep 17 00:00:00 2001
From: kitos <kitos@aegis.local>
Date: Tue, 7 Jul 2026 16:30:27 +0200
Subject: [PATCH] fix(frontend): render markdown descriptions properly, fix
 tooltip/banner wording
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wrap 8 previously-raw description fields in MarkdownText so imported
  markdown (links, bold, lists, MITRE citations) renders instead of
  showing literal syntax: campaign cards, D3FEND countermeasure
  descriptions, compliance framework/control descriptions, detection
  rule descriptions, threat-actor and technique reference descriptions,
  and the RT-import preview description
- Fix the "Validated" status tooltip claiming a "≥2 tests" threshold
  when the real rule is ≥1 validated test with full detection; reworded
  the adjacent "Partial" tooltip for the same clarity
- Generalize the technique review_required banner text away from
  "MITRE ATT&CK sync" — review can also be triggered by Atomic/Caldera/
  Elastic/Sigma/LOLBAS imports, intel scans, and stale-detection checks
---
 frontend/src/components/StatusBadge.tsx                  | 4 ++--
 frontend/src/components/compliance/ControlsTable.tsx     | 8 +++++---
 .../components/test-detail/DetectionRuleChecklist.tsx    | 3 ++-
 frontend/src/components/test-detail/TeamTabs.tsx         | 5 ++++-
 frontend/src/pages/CampaignsPage.tsx                     | 8 +++++---
 frontend/src/pages/CompliancePage.tsx                    | 6 +++++-
 frontend/src/pages/ImportRTPage.tsx                      | 3 ++-
 frontend/src/pages/TechniqueDetailPage.tsx               | 9 ++++++---
 frontend/src/pages/ThreatActorDetailPage.tsx             | 2 +-
 9 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/StatusBadge.tsx b/frontend/src/components/StatusBadge.tsx
index 215224e..c5259d9 100644
--- a/frontend/src/components/StatusBadge.tsx
+++ b/frontend/src/components/StatusBadge.tsx
@@ -29,14 +29,14 @@ const TOOLTIPS: Record<TechniqueStatus, { heading: string; lines: TooltipLine[]
   validated: {
     heading: "✅ Validated",
     lines: [
-      { label: "Meaning", text: "≥2 tests executed. Blue Team detected the attack in all of them." },
+      { label: "Meaning", text: "≥1 validated test, with Blue Team detecting the attack in all of them." },
       { label: "Action",  text: "Maintain and re-test periodically." },
     ],
   },
   partial: {
     heading: "🟡 Partial",
     lines: [
-      { label: "Meaning", text: "Only 1 validated test, some tests still pending, or detection was not 100%." },
+      { label: "Meaning", text: "Some tests are validated while others are still pending, or detection was not 100% across all validated tests." },
       { label: "Action",  text: "Run more tests and ensure all are validated with 'detected'." },
     ],
   },
diff --git a/frontend/src/components/compliance/ControlsTable.tsx b/frontend/src/components/compliance/ControlsTable.tsx
index d0ce1ce..68fb1f9 100644
--- a/frontend/src/components/compliance/ControlsTable.tsx
+++ b/frontend/src/components/compliance/ControlsTable.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { ChevronDown, ChevronRight, Search, Filter, ExternalLink, Info, ShieldAlert } from "lucide-react";
 import type { ComplianceControlStatus } from "../../api/compliance";
+import MarkdownText from "../MarkdownText";
 
 interface ControlsTableProps {
   controls: ComplianceControlStatus[];
@@ -195,9 +196,10 @@ export default function ControlsTable({ controls }: ControlsTableProps) {
                                 <p className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-blue-400">
                                   What this control requires — and why it matters
                                 </p>
-                                <p className="text-xs leading-relaxed text-gray-300">
-                                  {control.description}
-                                </p>
+                                <MarkdownText
+                                  content={control.description}
+                                  className="text-xs leading-relaxed text-gray-300"
+                                />
                               </div>
                             </div>
                           )}
diff --git a/frontend/src/components/test-detail/DetectionRuleChecklist.tsx b/frontend/src/components/test-detail/DetectionRuleChecklist.tsx
index b402890..3c78766 100644
--- a/frontend/src/components/test-detail/DetectionRuleChecklist.tsx
+++ b/frontend/src/components/test-detail/DetectionRuleChecklist.tsx
@@ -16,6 +16,7 @@ import {
   type DetectionRuleItem,
 } from "../../api/detection-rules";
 import type { User } from "../../types/models";
+import MarkdownText from "../MarkdownText";
 
 const severityColors: Record<string, string> = {
   critical: "bg-red-900/50 text-red-400 border-red-500/30",
@@ -252,7 +253,7 @@ export default function DetectionRuleChecklist({ testId, user, canEdit }: Props)
               {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>
+                    <MarkdownText content={rule.description} className="text-xs text-gray-400" />
                   )}
 
                   {/* Rule content */}
diff --git a/frontend/src/components/test-detail/TeamTabs.tsx b/frontend/src/components/test-detail/TeamTabs.tsx
index a62d950..9ed6679 100644
--- a/frontend/src/components/test-detail/TeamTabs.tsx
+++ b/frontend/src/components/test-detail/TeamTabs.tsx
@@ -629,7 +629,10 @@ export default function TeamTabs({
                     )}
                   </div>
                   {def.description && (
-                    <p className="mt-1 text-xs text-gray-400 line-clamp-2">{def.description}</p>
+                    <MarkdownText
+                      content={def.description}
+                      className="mt-1 text-xs text-gray-400 line-clamp-2"
+                    />
                   )}
                 </div>
                 {def.d3fend_url && (
diff --git a/frontend/src/pages/CampaignsPage.tsx b/frontend/src/pages/CampaignsPage.tsx
index 71719bd..05d5e25 100644
--- a/frontend/src/pages/CampaignsPage.tsx
+++ b/frontend/src/pages/CampaignsPage.tsx
@@ -14,6 +14,7 @@ import {
 import { listCampaigns, createCampaign, generateCampaignFromThreatActor, type CampaignSummary } from "../api/campaigns";
 import { getThreatActors, type ThreatActorSummary } from "../api/threat-actors";
 import { useAuth } from "../context/AuthContext";
+import MarkdownText from "../components/MarkdownText";
 
 const statusColors: Record<string, string> = {
   draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
@@ -378,9 +379,10 @@ export default function CampaignsPage() {
                 {campaign.name}
               </h3>
               {campaign.description && (
-                <p className="mt-1 text-xs text-gray-400 line-clamp-2">
-                  {campaign.description}
-                </p>
+                <MarkdownText
+                  content={campaign.description}
+                  className="mt-1 text-xs text-gray-400 line-clamp-2"
+                />
               )}
 
               {/* Threat Actor */}
diff --git a/frontend/src/pages/CompliancePage.tsx b/frontend/src/pages/CompliancePage.tsx
index e875d81..22ee801 100644
--- a/frontend/src/pages/CompliancePage.tsx
+++ b/frontend/src/pages/CompliancePage.tsx
@@ -15,6 +15,7 @@ import {
 import { useAuth } from "../context/AuthContext";
 import ComplianceGauge from "../components/compliance/ComplianceGauge";
 import ControlsTable from "../components/compliance/ControlsTable";
+import MarkdownText from "../components/MarkdownText";
 
 export default function CompliancePage() {
   const [selectedFrameworkId, setSelectedFrameworkId] = useState<string | null>(null);
@@ -238,7 +239,10 @@ export default function CompliancePage() {
                 </a>
               )}
             </div>
-            <p className="text-xs leading-relaxed text-gray-400">{activeFramework.description}</p>
+            <MarkdownText
+              content={activeFramework.description}
+              className="text-xs leading-relaxed text-gray-400"
+            />
           </div>
         </div>
       )}
diff --git a/frontend/src/pages/ImportRTPage.tsx b/frontend/src/pages/ImportRTPage.tsx
index 43799d9..aa93e3c 100644
--- a/frontend/src/pages/ImportRTPage.tsx
+++ b/frontend/src/pages/ImportRTPage.tsx
@@ -17,6 +17,7 @@ import {
   Braces,
 } from "lucide-react";
 import { importRT, type RTImportPayload, type RTTechniqueEntry, type RTEvidenceEntry } from "../api/tests";
+import MarkdownText from "../components/MarkdownText";
 
 /* ── Template JSON ─────────────────────────────────────────────────── */
 
@@ -324,7 +325,7 @@ export default function ImportRTPage() {
                 <span className="text-amber-400">{preview.techniques.length} techniques</span>
               </p>
               {preview.description && (
-                <p className="mt-1 text-xs text-gray-400">{preview.description}</p>
+                <MarkdownText content={preview.description} className="mt-1 text-xs text-gray-400" />
               )}
             </div>
             <button
diff --git a/frontend/src/pages/TechniqueDetailPage.tsx b/frontend/src/pages/TechniqueDetailPage.tsx
index 2445033..39d9ced 100644
--- a/frontend/src/pages/TechniqueDetailPage.tsx
+++ b/frontend/src/pages/TechniqueDetailPage.tsx
@@ -289,10 +289,10 @@ export default function TechniqueDetailPage() {
           <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-400" />
           <div className="flex-1 min-w-0">
             <p className="text-sm font-medium text-amber-300">
-              This technique has been updated in MITRE ATT&CK
+              This technique needs review
             </p>
             <p className="mt-0.5 text-xs text-amber-400/70">
-              The MITRE ATT&CK sync detected changes to this technique.
+              New intel, detection rules, or a MITRE ATT&CK update were found for this technique.
               {technique.mitre_last_modified && (
                 <> Last modified in ATT&CK: <span className="font-mono">{technique.mitre_last_modified.slice(0, 10)}</span>.</>
               )}
@@ -694,7 +694,10 @@ export default function TechniqueDetailPage() {
                   <div className="min-w-0 flex-1">
                     <p className="text-sm font-medium text-gray-200">{ref.source_name}</p>
                     {ref.description && (
-                      <p className="mt-0.5 line-clamp-2 text-xs text-gray-500">{ref.description}</p>
+                      <MarkdownText
+                        content={ref.description}
+                        className="mt-0.5 line-clamp-2 text-xs text-gray-500"
+                      />
                     )}
                   </div>
                   <a
diff --git a/frontend/src/pages/ThreatActorDetailPage.tsx b/frontend/src/pages/ThreatActorDetailPage.tsx
index b3b0f70..0e5da96 100644
--- a/frontend/src/pages/ThreatActorDetailPage.tsx
+++ b/frontend/src/pages/ThreatActorDetailPage.tsx
@@ -617,7 +617,7 @@ export default function ThreatActorDetailPage() {
                   <span className="text-gray-400">{ref.source}</span>
                 )}
                 {ref.description && (
-                  <span className="ml-2 text-gray-500">{ref.description}</span>
+                  <MarkdownText content={ref.description} className="ml-2 inline text-gray-500 [&_p]:inline" />
                 )}
               </li>
             ))}