From 734692972acc79d1085bbfe72a59cbdfbe5997bf Mon Sep 17 00:00:00 2001
From: Mariusz Banach <mariusz@outflank.nl>
Date: Wed, 18 Feb 2026 02:59:01 +0100
Subject: [PATCH] MAESTRO: add security appliances summary

---
 ...er-analyzer-Phase-06-Interactive-Report.md |  2 +-
 .../report/SecurityAppliancesSummary.tsx      | 58 +++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/report/SecurityAppliancesSummary.tsx

diff --git a/Auto Run Docs/SpecKit-web-header-analyzer-Phase-06-Interactive-Report.md b/Auto Run Docs/SpecKit-web-header-analyzer-Phase-06-Interactive-Report.md
index a4d822e..1d50b25 100644
--- a/Auto Run Docs/SpecKit-web-header-analyzer-Phase-06-Interactive-Report.md	
+++ b/Auto Run Docs/SpecKit-web-header-analyzer-Phase-06-Interactive-Report.md	
@@ -43,7 +43,7 @@ ReportContainer
 - [x] T032 [P] [US4] Create `frontend/src/components/report/HopChainVisualisation.tsx` — vertical flow diagram of mail server hop chain (FR-08): hostname, IP, timestamp, server version, connecting arrows. FontAwesome server/network icons. Responsive. Verify `HopChainVisualisation.test.tsx` passes (TDD Green)
 - [x] T033 [P] [US4] Create `frontend/src/components/report/ReportSearchBar.tsx` — search/filter bar above report (FR-20). Filters by text match against test name, header name, or analysis text. Highlights matches, shows count. FontAwesome search icon, Escape to clear. Verify `ReportSearchBar.test.tsx` passes (TDD Green)
 - [x] T034 [P] [US4] Create `frontend/src/components/report/ReportExport.tsx` — export as HTML (styled standalone page) or JSON (raw data) per FR-21. FontAwesome download icons, triggers browser download. Verify `ReportExport.test.tsx` passes (TDD Green)
-- [ ] T035 [US4] Create `frontend/src/components/report/SecurityAppliancesSummary.tsx` — summary listing detected email security products as badges/tags with FontAwesome shield icons. Handle empty state (no appliances detected). Verify `SecurityAppliancesSummary.test.tsx` passes (TDD Green)
+- [x] T035 [US4] Create `frontend/src/components/report/SecurityAppliancesSummary.tsx` — summary listing detected email security products as badges/tags with FontAwesome shield icons. Handle empty state (no appliances detected). Verify `SecurityAppliancesSummary.test.tsx` passes (TDD Green)
 - [ ] T036 [US4] Create `frontend/src/components/report/ReportContainer.tsx` — top-level wrapper receiving `AnalysisReport`. Renders: summary stats (total tests, passed, failed, severity breakdown), `TestResultCard` list, `HopChainVisualisation`, `SecurityAppliancesSummary`, `ReportSearchBar`, `ReportExport`. FontAwesome summary icons. Verify `ReportContainer.test.tsx` passes (TDD Green)
 
 ## Completion
diff --git a/frontend/src/components/report/SecurityAppliancesSummary.tsx b/frontend/src/components/report/SecurityAppliancesSummary.tsx
new file mode 100644
index 0000000..b394b80
--- /dev/null
+++ b/frontend/src/components/report/SecurityAppliancesSummary.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faShield } from "@fortawesome/free-solid-svg-icons";
+
+import type { SecurityAppliance } from "../../types/analysis";
+
+type SecurityAppliancesSummaryProps = {
+  appliances: SecurityAppliance[];
+};
+
+export default function SecurityAppliancesSummary({
+  appliances,
+}: SecurityAppliancesSummaryProps) {
+  const hasAppliances = appliances.length > 0;
+
+  return (
+    <section
+      data-testid="security-appliances-summary"
+      className="rounded-2xl border border-info/10 bg-surface/50 p-4 shadow-[0_0_30px_rgba(15,23,42,0.18)]"
+    >
+      <div className="flex items-center gap-2">
+        <span className="flex h-8 w-8 items-center justify-center rounded-xl border border-info/20 bg-info/10 text-info">
+          <FontAwesomeIcon icon={faShield} className="text-xs" />
+        </span>
+        <div>
+          <h3 className="text-sm font-semibold text-text/90">Security Appliances</h3>
+          <p className="text-xs text-text/50">
+            Detected email security vendors in the message path.
+          </p>
+        </div>
+      </div>
+
+      {hasAppliances ? (
+        <div className="mt-4 flex flex-wrap gap-2">
+          {appliances.map((appliance, index) => (
+            <div
+              key={`${appliance.vendor}-${appliance.name}`}
+              data-testid={`security-appliance-${index}`}
+              className="inline-flex items-center gap-2 rounded-full border border-info/20 bg-background/40 px-3 py-1 text-xs text-text/70"
+            >
+              <FontAwesomeIcon icon={faShield} className="text-[10px] text-info" />
+              <span className="font-semibold">{appliance.vendor}</span>
+              <span className="text-text/50">{appliance.name}</span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p
+          data-testid="security-appliances-empty"
+          className="mt-4 text-sm text-text/60"
+        >
+          No security appliances detected.
+        </p>
+      )}
+    </section>
+  );
+}