- )}
-
-
-
-
- }
- >
-
-
-
- ) : (
-
- )}
+
);
}
@@ -280,3 +321,91 @@ const ComplianceOverviewPanel = ({
);
};
+
+/**
+ * Server-side island for the Cross-Provider tab.
+ *
+ * Iterates the hardcoded ``UNIVERSAL_FRAMEWORKS`` catalogue and fetches the
+ * cross-provider roll-up for each one in parallel. The summaries hydrate the
+ * grid of cards so the user sees per-framework totals without an extra
+ * client round-trip. Today there is a single entry (CSA CCM 4.0); when the
+ * SDK ships more universal JSONs, only the catalogue file changes.
+ */
+const SSRCrossProviderGrid = async ({
+ searchParams,
+}: {
+ searchParams: SearchParamsProps;
+}) => {
+ const providerTypes =
+ searchParams["filter[provider_type__in]"]?.toString() || undefined;
+ const regions = searchParams["filter[region__in]"]?.toString() || undefined;
+
+ const responses = await Promise.all(
+ UNIVERSAL_FRAMEWORKS.map((entry) =>
+ getCrossProviderComplianceOverview({
+ complianceId: entry.id,
+ providerTypes,
+ regions,
+ }).then((response) => ({ entry, response })),
+ ),
+ );
+
+ const summaries: CrossProviderFrameworkSummary[] = [];
+ for (const { entry, response } of responses) {
+ if (!response || "redirectTo" in response) continue;
+ const data = (response as { data?: CrossProviderComplianceOverviewData })
+ .data;
+ if (!data) {
+ // Catalogue entry exists but the API returned nothing usable —
+ // surface a zero-card so the user still sees the framework with all
+ // its compatible providers chips dimmed (no scan yet).
+ summaries.push({
+ id: entry.id,
+ title: entry.title,
+ version: entry.version,
+ description: entry.description,
+ requirementsPassed: 0,
+ totalRequirements: 0,
+ contributingProviders: [],
+ compatibleProviders: entry.providers,
+ });
+ continue;
+ }
+ const attrs = data.attributes;
+ // ``compatible_providers`` from the API is authoritative; fall back to
+ // the catalogue entry only if the response omitted it.
+ const compatible =
+ attrs.compatible_providers && attrs.compatible_providers.length > 0
+ ? attrs.compatible_providers
+ : entry.providers;
+ summaries.push({
+ id: entry.id,
+ title: attrs.framework || entry.title,
+ version: attrs.version || entry.version,
+ description: attrs.description || entry.description,
+ requirementsPassed: attrs.requirements_passed,
+ totalRequirements: attrs.total_requirements,
+ contributingProviders: attrs.providers,
+ compatibleProviders: compatible,
+ });
+ }
+
+ if (summaries.length === 0) {
+ return (
+
+
+
+
+ No universal compliance frameworks are available yet.
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+};
diff --git a/ui/components/compliance/compliance-accordion/client-accordion-content.test.ts b/ui/components/compliance/compliance-accordion/client-accordion-content.test.ts
index 7f724e20b7..3de86c09fc 100644
--- a/ui/components/compliance/compliance-accordion/client-accordion-content.test.ts
+++ b/ui/components/compliance/compliance-accordion/client-accordion-content.test.ts
@@ -13,4 +13,27 @@ describe("client accordion content", () => {
expect(source).toContain("getStandaloneFindingColumns");
expect(source).not.toContain("getColumnFindings");
});
+
+ it("activates a cross-provider branch when scan_ids_by_provider is present", () => {
+ // The cross-provider mode is detected by the presence of the
+ // ``scan_ids_by_provider`` augmentation on the requirement. Guarding
+ // this contract in source keeps regressions visible without spinning a
+ // full DOM render. The reads happen through a single ``xprov`` cast
+ // (see ``CrossProviderRequirement``) so we look for both spellings.
+ expect(source).toMatch(/scan_ids_by_provider/);
+ expect(source).toMatch(/check_ids_by_provider/);
+ expect(source).toContain("CrossProviderRequirement");
+ });
+
+ it("fetches findings per contributing scan in parallel when in cross-provider mode", () => {
+ expect(source).toContain("Promise.all");
+ // Each parallel request scopes to a single scan and the
+ // requirement's per-provider check IDs.
+ expect(source).toMatch(/filter\[scan\]/);
+ expect(source).toMatch(/filter\[check_id__in\]/);
+ });
+
+ it("renders a per-provider breakdown table when providers are exposed", () => {
+ expect(source).toContain("Per-Provider Breakdown");
+ });
});
diff --git a/ui/components/compliance/compliance-accordion/client-accordion-content.tsx b/ui/components/compliance/compliance-accordion/client-accordion-content.tsx
index 0ccd793c12..d0e8f4b9a7 100644
--- a/ui/components/compliance/compliance-accordion/client-accordion-content.tsx
+++ b/ui/components/compliance/compliance-accordion/client-accordion-content.tsx
@@ -2,7 +2,7 @@
import { AlertTriangle } from "lucide-react";
import { useSearchParams } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
import { getFindings } from "@/actions/findings/findings";
import {
@@ -12,10 +12,19 @@ import {
import { Alert, AlertDescription } from "@/components/shadcn";
import { Accordion } from "@/components/ui/accordion/Accordion";
import { DataTable } from "@/components/ui/table";
+import { StatusFindingBadge } from "@/components/ui/table/status-finding-badge";
import { createDict, FINDINGS_DEFAULT_SORT, MUTED_FILTER } from "@/lib";
import { INVALID_CONFIG_NOTE } from "@/lib/compliance/commons";
import { getComplianceMapper } from "@/lib/compliance/compliance-mapper";
-import { Requirement } from "@/types/compliance";
+import {
+ getProviderBadge,
+ getProviderLabel,
+} from "@/lib/providers/provider-display";
+import {
+ CrossProviderRequirement,
+ Requirement,
+ RequirementStatus,
+} from "@/types/compliance";
import { FindingProps, FindingsResponse } from "@/types/components";
interface ClientAccordionContentProps {
@@ -25,6 +34,19 @@ interface ClientAccordionContentProps {
disableFindings?: boolean;
}
+// ``included`` is part of the JSON:API envelope but the ``FindingsResponse``
+// interface only models ``data`` + ``meta``. Carry it locally so ``createDict``
+// (which inspects ``data.included`` at runtime) can resolve the
+// provider/scan/resource relationships per row.
+type FindingsResponseLike = FindingsResponse & {
+ included?: { type: string; id: string }[];
+};
+
+const toFindingStatus = (status: RequirementStatus) => {
+ // FindingStatus shares the same wire values for PASS/FAIL/MANUAL.
+ return status === "No findings" ? "MANUAL" : status;
+};
+
export const ClientAccordionContent = ({
requirement,
framework,
@@ -32,7 +54,6 @@ export const ClientAccordionContent = ({
disableFindings = false,
}: ClientAccordionContentProps) => {
const [findings, setFindings] = useState(null);
- const [expandedFindings, setExpandedFindings] = useState([]);
const searchParams = useSearchParams();
const pageNumber = searchParams.get("page") || "1";
const pageSize = searchParams.get("pageSize") || "10";
@@ -50,71 +71,148 @@ export const ClientAccordionContent = ({
// surface in the app (findings page, resource drawer, overview widgets).
const mutedFilter = searchParams.get("filter[muted]") || MUTED_FILTER.EXCLUDE;
+ // Cross-provider requirements carry these augmentation maps; per-scan
+ // requirements leave them undefined. Narrow once at the seam so the
+ // hot paths below don't need repeated casts.
+ const xprov = requirement as CrossProviderRequirement;
+ const scanIdsByProvider = xprov.scan_ids_by_provider;
+ const checkIdsByProvider = xprov.check_ids_by_provider;
+ const providersBreakdown = xprov.providers;
+ const isCrossProvider =
+ !!scanIdsByProvider && Object.keys(scanIdsByProvider).length > 0;
+
useEffect(() => {
+ // Guard against a slower earlier request resolving after a newer one and
+ // clobbering the table (race on fast page/sort/filter changes).
+ let cancelled = false;
+
async function loadFindings() {
+ if (disableFindings || requirement.status === "No findings") return;
if (
- !disableFindings &&
- requirement.check_ids?.length > 0 &&
- requirement.status !== "No findings" &&
- (loadedPageRef.current !== pageNumber ||
- loadedPageSizeRef.current !== pageSize ||
- loadedSortRef.current !== sort ||
- loadedMutedRef.current !== mutedFilter ||
- !isExpandedRef.current)
+ loadedPageRef.current === pageNumber &&
+ loadedPageSizeRef.current === pageSize &&
+ loadedSortRef.current === sort &&
+ loadedMutedRef.current === mutedFilter &&
+ isExpandedRef.current
) {
- loadedPageRef.current = pageNumber;
- loadedPageSizeRef.current = pageSize;
- loadedSortRef.current = sort;
- loadedMutedRef.current = mutedFilter;
- isExpandedRef.current = true;
+ return;
+ }
- try {
- const checkIds = requirement.check_ids;
- const encodedSort = sort.replace(/^\+/, "");
- const findingsData = await getFindings({
- filters: {
- "filter[check_id__in]": checkIds.join(","),
- "filter[scan]": scanId,
- "filter[muted]": mutedFilter,
- ...(region && { "filter[region__in]": region }),
- },
- page: parseInt(pageNumber, 10),
- pageSize: parseInt(pageSize, 10),
- sort: encodedSort,
+ loadedPageRef.current = pageNumber;
+ loadedPageSizeRef.current = pageSize;
+ loadedSortRef.current = sort;
+ loadedMutedRef.current = mutedFilter;
+ isExpandedRef.current = true;
+
+ try {
+ const encodedSort = sort.replace(/^\+/, "");
+
+ if (isCrossProvider) {
+ // Fetch findings scoped to each contributing scan in parallel
+ // and merge the JSON:API ``data`` + ``included`` arrays so
+ // the unified table can resolve the provider/scan/resource
+ // relationships per row. Server-side filters apply per scan
+ // (the API enforces RLS on each query individually).
+ //
+ // ``scanIdsByProvider[providerKey]`` is a list because a
+ // tenant can have N accounts of the same type — fan out one
+ // ``filter[scan]`` request per account, all under the same
+ // provider key.
+ const entries = Object.entries(scanIdsByProvider!);
+ const jobs = entries.flatMap(([providerKey, scanIds]) => {
+ const checks = (checkIdsByProvider?.[providerKey] ?? []).join(",");
+ if (!checks || !Array.isArray(scanIds) || scanIds.length === 0) {
+ return [];
+ }
+ return scanIds.map((scanIdForAccount) => ({
+ providerKey,
+ scanIdForAccount,
+ checks,
+ }));
});
+ const responses = await Promise.all(
+ jobs.map(({ scanIdForAccount, checks }) =>
+ getFindings({
+ filters: {
+ "filter[check_id__in]": checks,
+ "filter[scan]": scanIdForAccount,
+ "filter[muted]": mutedFilter,
+ ...(region && { "filter[region__in]": region }),
+ },
+ page: parseInt(pageNumber, 10),
+ sort: encodedSort,
+ }),
+ ),
+ );
- setFindings(findingsData);
-
- if (findingsData?.data) {
- // Create dictionaries for resources, scans, and providers
- const resourceDict = createDict("resources", findingsData);
- const scanDict = createDict("scans", findingsData);
- const providerDict = createDict("providers", findingsData);
-
- // Expand each finding with its corresponding resource, scan, and provider
- const expandedData = findingsData.data.map(
- (finding: FindingProps) => {
- const scan = scanDict[finding.relationships?.scan?.data?.id];
- const resource =
- resourceDict[finding.relationships?.resources?.data?.[0]?.id];
- const provider =
- providerDict[scan?.relationships?.provider?.data?.id];
-
- return {
- ...finding,
- relationships: { scan, resource, provider },
- };
- },
- );
- setExpandedFindings(expandedData);
+ const allData: FindingProps[] = [];
+ const allIncluded: { type: string; id: string }[] = [];
+ let totalCount = 0;
+ for (const r of responses) {
+ if (!r || !("data" in r)) continue;
+ const typedResponse = r as FindingsResponseLike;
+ allData.push(...(typedResponse.data || []));
+ allIncluded.push(...(typedResponse.included || []));
+ totalCount += typedResponse?.meta?.pagination?.count || 0;
}
- } catch (error) {
- console.error("Error loading findings:", error);
+
+ // Each scan response includes its provider/scan record;
+ // across N responses the same provider object appears N
+ // times. Dedupe by ``(type, id)`` so the subsequent
+ // ``createDict`` passes stop allocating duplicate entries.
+ const dedupedIncluded: typeof allIncluded = [];
+ const seenIncluded = new Set();
+ for (const entry of allIncluded) {
+ const key = `${entry.type}|${entry.id}`;
+ if (seenIncluded.has(key)) continue;
+ seenIncluded.add(key);
+ dedupedIncluded.push(entry);
+ }
+
+ const merged: FindingsResponseLike = {
+ data: allData,
+ included: dedupedIncluded,
+ meta: {
+ pagination: {
+ page: parseInt(pageNumber, 10),
+ pages: 1,
+ count: totalCount,
+ },
+ version: "",
+ },
+ };
+ if (cancelled) return;
+ setFindings(merged);
+ return;
}
+
+ // Per-scan branch (existing behaviour).
+ if (!requirement.check_ids?.length) return;
+ const checkIds = requirement.check_ids;
+ const findingsData = await getFindings({
+ filters: {
+ "filter[check_id__in]": checkIds.join(","),
+ "filter[scan]": scanId,
+ "filter[muted]": mutedFilter,
+ ...(region && { "filter[region__in]": region }),
+ },
+ page: parseInt(pageNumber, 10),
+ pageSize: parseInt(pageSize, 10),
+ sort: encodedSort,
+ });
+
+ if (cancelled) return;
+ setFindings(findingsData);
+ } catch (error) {
+ console.error("Error loading findings:", error);
}
}
loadFindings();
+
+ return () => {
+ cancelled = true;
+ };
}, [
requirement,
scanId,
@@ -124,8 +222,62 @@ export const ClientAccordionContent = ({
region,
mutedFilter,
disableFindings,
+ isCrossProvider,
+ scanIdsByProvider,
+ checkIdsByProvider,
]);
+ // Expand each finding with its resource/scan/provider. Derived from
+ // ``findings`` rather than stored as separate state so the table can never
+ // drift out of sync with the fetched rows.
+ const expandedFindings = useMemo(() => {
+ if (!findings?.data) return [];
+ const resourceDict = createDict("resources", findings);
+ const scanDict = createDict("scans", findings);
+ const providerDict = createDict("providers", findings);
+ return findings.data.map((finding: FindingProps) => {
+ const scan = scanDict[finding.relationships?.scan?.data?.id];
+ const resource =
+ resourceDict[finding.relationships?.resources?.data?.[0]?.id];
+ const provider = providerDict[scan?.relationships?.provider?.data?.id];
+ return {
+ ...finding,
+ relationships: { scan, resource, provider },
+ };
+ }) as unknown as FindingProps[];
+ }, [findings]);
+
+ // Per-provider finding tallies for the cross-provider breakdown. Derived
+ // from the merged ``findings`` (mapping each row to its provider via
+ // ``scan_ids_by_provider``) so the counts always match the unified table.
+ const providerFindingStats = useMemo(() => {
+ const count: Record = {};
+ const pass: Record = {};
+ const fail: Record = {};
+ if (!isCrossProvider || !scanIdsByProvider) {
+ return { count, pass, fail };
+ }
+ const scanToProvider = new Map();
+ for (const [providerKey, scanIds] of Object.entries(scanIdsByProvider)) {
+ count[providerKey] = 0;
+ pass[providerKey] = 0;
+ fail[providerKey] = 0;
+ if (Array.isArray(scanIds)) {
+ for (const sid of scanIds) scanToProvider.set(sid, providerKey);
+ }
+ }
+ for (const row of findings?.data ?? []) {
+ const sid = row.relationships?.scan?.data?.id;
+ const providerKey = sid ? scanToProvider.get(sid) : undefined;
+ if (!providerKey) continue;
+ count[providerKey] += 1;
+ const status = row.attributes?.status;
+ if (status === "PASS") pass[providerKey] += 1;
+ else if (status === "FAIL") fail[providerKey] += 1;
+ }
+ return { count, pass, fail };
+ }, [findings, isCrossProvider, scanIdsByProvider]);
+
const renderDetails = () => {
if (!complianceId) {
return null;
@@ -137,10 +289,104 @@ export const ClientAccordionContent = ({
return
{detailsComponent}
;
};
+ const renderProviderBreakdown = () => {
+ if (!providersBreakdown) return null;
+ const entries = Object.entries(providersBreakdown);
+ if (entries.length === 0) return null;
+ // ``findings`` is null until the lazy fetch resolves; in that case
+ // surface a neutral placeholder so the user does not see ``0`` and
+ // mistake it for "no findings". Once findings load, the count maps
+ // are the authoritative source — they match the unified table below
+ // row-for-row.
+ const findingsLoaded = findings !== null;
+ return (
+
⚠️ This requirement has no checks; therefore, there are no findings.
@@ -149,7 +395,58 @@ export const ClientAccordionContent = ({
}
const checks = requirement.check_ids || [];
- const checksList = (
+ // In cross-provider mode the universal framework declares the same
+ // requirement against multiple providers, often with disjoint check
+ // sets. Show a per-provider grouping so the user can audit which checks
+ // belong to which scan instead of staring at a flattened comma list.
+ // Per-scan mode keeps the original flat layout — there's only one
+ // provider, so a grouping would be visual noise.
+ const checkIdsByProviderEntries = checkIdsByProvider
+ ? Object.entries(checkIdsByProvider).filter(
+ ([, ids]) => Array.isArray(ids) && ids.length > 0,
+ )
+ : [];
+ const showPerProviderChecks =
+ isCrossProvider && checkIdsByProviderEntries.length > 0;
+
+ const checksList = showPerProviderChecks ? (
+
+ );
+};
diff --git a/ui/components/compliance/cross-provider/cross-provider-explorer-card.tsx b/ui/components/compliance/cross-provider/cross-provider-explorer-card.tsx
new file mode 100644
index 0000000000..11745a6865
--- /dev/null
+++ b/ui/components/compliance/cross-provider/cross-provider-explorer-card.tsx
@@ -0,0 +1,352 @@
+"use client";
+
+import { Maximize2, Minimize2, X } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+
+import { ClientAccordionContent } from "@/components/compliance/compliance-accordion/client-accordion-content";
+import { ComplianceAccordionRequirementTitle } from "@/components/compliance/compliance-accordion/compliance-accordion-requeriment-title";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from "@/components/shadcn/accordion";
+import { Button } from "@/components/shadcn/button/button";
+import { Card, CardContent } from "@/components/shadcn/card/card";
+import { EnhancedMultiSelect } from "@/components/shadcn/select/enhanced-multi-select";
+import { DataTableSearch } from "@/components/ui/table/data-table-search";
+import { FindingStatus } from "@/components/ui/table/status-finding-badge";
+import { getComplianceMapper } from "@/lib/compliance/compliance-mapper";
+import { crossProviderToMapperInput } from "@/lib/compliance/cross-provider-adapter";
+import type { CrossProviderInsights } from "@/lib/compliance/cross-provider-insights";
+import { cn } from "@/lib/utils";
+import type {
+ CrossProviderComplianceOverviewAttributes,
+ CrossProviderRequirement,
+ CrossProviderRequirementStatus,
+ Requirement,
+} from "@/types/compliance";
+
+import { CrossProviderDomainTitle } from "./cross-provider-domain-title";
+
+interface CrossProviderExplorerCardProps {
+ attributes: CrossProviderComplianceOverviewAttributes;
+ insights: CrossProviderInsights;
+ /** Section key (``${frameworkName}-${categoryName}``) the orchestrator
+ * wants forced-open. Driven by the "Top Failing Domains" panel so a
+ * click expands and scrolls to the target row. */
+ forcedExpandedSectionKey?: string | null;
+}
+
+const STATUS_OPTIONS: Array<{
+ label: string;
+ value: CrossProviderRequirementStatus;
+}> = [
+ { label: "Failing", value: "FAIL" },
+ { label: "Passing", value: "PASS" },
+ { label: "Manual", value: "MANUAL" },
+];
+
+/**
+ * One-stop explorer panel for a universal compliance framework. Wraps:
+ *
+ * - ``DataTableSearch`` (the same search component used by the per-scan
+ * compliance grid).
+ * - ``EnhancedMultiSelect`` for status quick-filters (no custom toggle
+ * pills — same component as roles/groups/findings forms).
+ * - Expand-all toggle that flips between expanding every section and
+ * collapsing back to user-selected state.
+ * - A shadcn ``Accordion`` (type=multiple) hosting Framework →
+ * Section → Requirement.
+ *
+ * The card owns the controlled state for search/filters/expansion so
+ * the orchestrator only feeds it ``attributes`` + ``insights`` plus an
+ * optional ``forcedExpandedSectionKey`` for the Top Failing Domains
+ * deep-link.
+ */
+export const CrossProviderExplorerCard = ({
+ attributes,
+ insights,
+ forcedExpandedSectionKey,
+}: CrossProviderExplorerCardProps) => {
+ const [searchTerm, setSearchTerm] = useState("");
+ const [searchKey, setSearchKey] = useState(0);
+ const [statusFilters, setStatusFilters] = useState<
+ CrossProviderRequirementStatus[]
+ >([]);
+ const [openSectionKeys, setOpenSectionKeys] = useState([]);
+ const [allSectionsOpen, setAllSectionsOpen] = useState(false);
+
+ // Filtered attributes drive both the match counter and the accordion
+ // content. The unfiltered ``insights`` continue to feed the heatmap
+ // matrix per section so global counts stay stable while the user
+ // narrows their search.
+ const filteredAttributes = useMemo(() => {
+ const lowerTerm = searchTerm.trim().toLowerCase();
+ if (lowerTerm === "" && statusFilters.length === 0) {
+ return attributes;
+ }
+ const statusSet = new Set(statusFilters);
+ const filteredRequirements = attributes.requirements.filter((req) => {
+ if (statusSet.size > 0 && !statusSet.has(req.status)) return false;
+ if (lowerTerm === "") return true;
+ const haystack =
+ `${req.id} ${req.name ?? ""} ${req.description ?? ""}`.toLowerCase();
+ return haystack.includes(lowerTerm);
+ });
+ return { ...attributes, requirements: filteredRequirements };
+ }, [attributes, searchTerm, statusFilters]);
+
+ const matchCount = filteredAttributes.requirements.length;
+ const totalCount = attributes.requirements.length;
+ const hasFilters = searchTerm.length > 0 || statusFilters.length > 0;
+
+ // Frameworks / categories / requirements derived from the mapper. We
+ // run this against the *filtered* attribute set so the list shrinks
+ // as the user types — sections with no surviving requirements
+ // disappear entirely instead of expanding to an empty body.
+ const { sections, allSectionKeys, statsByName } = useMemo(() => {
+ const mapper = getComplianceMapper(filteredAttributes.framework);
+ const { attributesData, requirementsData } =
+ crossProviderToMapperInput(filteredAttributes);
+ const frameworks = mapper.mapComplianceData(
+ attributesData,
+ requirementsData,
+ );
+ const stats = new Map(insights.domainStats.map((d) => [d.name, d]));
+ const allSections = frameworks.flatMap((fw) =>
+ fw.categories.map((category) => {
+ const requirements = category.controls.flatMap(
+ (control) => control.requirements,
+ );
+ return {
+ key: `${fw.name}-${category.name}`,
+ frameworkName: fw.name,
+ categoryName: category.name,
+ requirements,
+ };
+ }),
+ );
+ return {
+ sections: allSections,
+ allSectionKeys: allSections.map((s) => s.key),
+ statsByName: stats,
+ };
+ }, [filteredAttributes, insights]);
+
+ const expandedKeys = useMemo(() => {
+ if (allSectionsOpen) return allSectionKeys;
+ const merged = new Set(openSectionKeys);
+ if (forcedExpandedSectionKey) merged.add(forcedExpandedSectionKey);
+ return Array.from(merged);
+ }, [
+ allSectionsOpen,
+ allSectionKeys,
+ openSectionKeys,
+ forcedExpandedSectionKey,
+ ]);
+
+ const handleAccordionChange = useCallback((next: string[]) => {
+ // Manually expanding/collapsing exits "all open" mode so the
+ // user's last interaction is the source of truth.
+ setAllSectionsOpen(false);
+ setOpenSectionKeys(next);
+ }, []);
+
+ const handleToggleAll = useCallback(() => {
+ setAllSectionsOpen((prev) => {
+ const next = !prev;
+ setOpenSectionKeys(next ? allSectionKeys : []);
+ return next;
+ });
+ }, [allSectionKeys]);
+
+ const handleResetFilters = useCallback(() => {
+ setSearchTerm("");
+ // Cycling the controlled-input key flushes ``DataTableSearch``'s
+ // internal debounce so a stale keystroke doesn't fire on top of
+ // the just-cleared term.
+ setSearchKey((k) => k + 1);
+ setStatusFilters([]);
+ }, []);
+
+ return (
+
+
+ {/*
+ Toolbar: search on the left, filters + expand-all on the right.
+ ``flex-wrap`` keeps every control inside the card on narrow
+ viewports — the "Expand all" button used to overflow because
+ the previous ``flex-row`` had no wrap fallback.
+ */}
+
+
+
+
+ {matchCount}/{totalCount}
+
+
+ {/*
+ Right-hand block stays cohesive: Expand-all sits immediately
+ before the status multiselect so the user reads the action
+ ("expand") next to the data scope it acts on ("statuses").
+ The whole block wraps to a new row as a unit when the
+ viewport is narrow — never the Expand-all on its own.
+
+ ``min-w-0`` + ``max-w-full`` on the inner block make sure
+ the multiselect (which has an intrinsic min-width) stays
+ inside the Card padding instead of bleeding past the
+ right border on intermediate viewports.
+ */}
+
+ );
+};
diff --git a/ui/components/compliance/cross-provider/score-donut.tsx b/ui/components/compliance/cross-provider/score-donut.tsx
new file mode 100644
index 0000000000..bed565da85
--- /dev/null
+++ b/ui/components/compliance/cross-provider/score-donut.tsx
@@ -0,0 +1,166 @@
+interface ScoreDonutProps {
+ /** Integer 0-100. */
+ scorePercent: number;
+ /** Pass count. */
+ pass: number;
+ /** Fail count. */
+ fail: number;
+ /** Manual count. */
+ manual: number;
+ /** Total requirements. */
+ total: number;
+ /** Pixel size of the SVG square. Defaults to 132. */
+ size?: number;
+ /** Stroke thickness. Defaults to 12. */
+ stroke?: number;
+}
+
+/**
+ * Compact circular score with an explicit pass/fail/manual stack bar
+ * underneath. Pure SVG — no extra deps, scales cleanly in dark mode.
+ *
+ * The donut traces three arcs in succession (PASS → FAIL → MANUAL) so
+ * the user reads the breakdown directly off the ring instead of
+ * comparing it to a separate legend. The ring colors mirror the rest of
+ * the compliance UI (``bg-pass`` / ``bg-fail`` / ``bg-warning``).
+ */
+export const ScoreDonut = ({
+ scorePercent,
+ pass,
+ fail,
+ manual,
+ total,
+ size = 132,
+ stroke = 12,
+}: ScoreDonutProps) => {
+ const radius = (size - stroke) / 2;
+ const circumference = 2 * Math.PI * radius;
+ const safeTotal = total > 0 ? total : 1;
+
+ const passLen = (pass / safeTotal) * circumference;
+ const failLen = (fail / safeTotal) * circumference;
+ const manualLen = (manual / safeTotal) * circumference;
+ const passOffset = 0;
+ const failOffset = passLen;
+ const manualOffset = passLen + failLen;
+
+ const cx = size / 2;
+ const cy = size / 2;
+
+ // Pick a contrasting color for the central percent so dark surfaces
+ // never wash it out, while doubling as a quick "how bad is it?"
+ // signal: the central number adopts the dominant ring color.
+ const centerColorClass =
+ scorePercent >= 70
+ ? "fill-bg-pass"
+ : scorePercent >= 40
+ ? "fill-bg-warning"
+ : "fill-bg-fail";
+
+ return (
+
+
+
+
+
+ {pass}
+
+ Pass
+
+
+
+ {fail}
+
+ Fail
+
+
+
+ {manual}
+
+ Manual
+
+
+
+ );
+};
diff --git a/ui/components/compliance/cross-provider/top-failing-domains-panel.tsx b/ui/components/compliance/cross-provider/top-failing-domains-panel.tsx
new file mode 100644
index 0000000000..04d6a7e053
--- /dev/null
+++ b/ui/components/compliance/cross-provider/top-failing-domains-panel.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { AlertTriangle, ChevronRight } from "lucide-react";
+
+import type { DomainStats } from "@/lib/compliance/cross-provider-insights";
+
+interface TopFailingDomainsPanelProps {
+ domains: DomainStats[];
+ /** Max entries to show. Defaults to 3. */
+ limit?: number;
+ /** Click handler that scroll-anchors to the matching domain row. */
+ onSelect?: (domainName: string) => void;
+}
+
+/**
+ * Top-N failing domains as a quick teaser. Each entry is a click
+ * shortcut: anchors the accordion to the corresponding section so the
+ * user does not have to scroll-scan 17 domain rows to find the one
+ * worth investigating first.
+ *
+ * When ``onSelect`` is omitted the entries render as static rows — the
+ * panel is still useful as a read-only summary for screenshots and
+ * exports.
+ */
+export const TopFailingDomainsPanel = ({
+ domains,
+ limit = 3,
+ onSelect,
+}: TopFailingDomainsPanelProps) => {
+ const top = domains.filter((d) => d.fail > 0).slice(0, limit);
+
+ return (
+