feat: chart-led Security overview with sortable Images and History tables (#1364)

* feat: chart-led Security overview with sortable Images and History tables

Refine the Security page around the existing design system and add the
data the dashboard needs.

- Overview leads with four charts (30-day risk trend, severity donut, top
  exposed images, findings by type); the signal-rail counts become a
  secondary summary, and the scanner and deploy-enforcement posture follow.
- Images becomes a recessed table with search, a severity filter, sortable
  columns, a last-scan column, and inline scan actions; the findings cell is
  clickable into the scan sheet, and the per-row cursor tooltip is dropped
  where the columns already carry that information.
- Policies puts deploy-enforcement first, collapses the policy packs into an
  accordion, and uses the standard primary button for Add policy.
- Suppressions and acknowledgements move their titles and Add buttons outside
  the cards, matching the Fleet tab layout.
- History switches from the detail sheet to an inline table (search, sortable
  columns, two-scan compare, pagination); the now-unreachable scan-history
  overlay is removed.
- Add GET /api/security/overview/trend, a node-scoped daily critical/high
  rollup backing the risk-trend chart.
- Extract the shared image-scan hook and the severity classifier, and harden
  the overview data fetch so a malformed non-critical response can never read
  as a clean security state.

* fix: treat malformed Security responses as errors, not empty or clean states

Address an independent review of the data-fetch paths so a 200 with an
unexpected shape can never read as a benign "no findings" view.

- SecurityView: validate that the image-summaries body is a scan-summary map; an
  unexpected shape now sets the error state instead of an empty map. Isolate the
  trend fetch in its own self-catching promise so a transport failure on the
  non-critical chart can no longer poison the overview or summaries error state.
- useImageScan: only a "completed" poll counts as success (a malformed or unknown
  status now throws), and a failed post-scan summaries refresh is logged instead
  of silently dropped.
- HistoryTab: a 200 whose body lacks an items array is treated as an error, not
  an empty "no completed scans" list.

frontend/src/components/settings/MisconfigAckPanel.tsx

@@ -6,9 +6,10 @@ import { Badge } from '@/components/ui/badge';
 import { Skeleton } from '@/components/ui/skeleton';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Modal, ModalHeader, ModalBody, ModalFooter, ConfirmModal } from '@/components/ui/modal';
-import { ChevronLeft, ChevronRight, Plus, ShieldCheck, Trash2 } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Plus, Trash2 } from 'lucide-react';
 import { toast } from '@/components/ui/toast-store';
 import { apiFetch } from '@/lib/api';
+import { FleetTabHeading } from '@/components/fleet/FleetEmptyState';
 import type { MisconfigAcknowledgement } from '@/types/security';
 import { useAuth } from '@/context/AuthContext';
 
@@ -145,54 +146,48 @@ export function MisconfigAckPanel({ isReplica }: MisconfigAckPanelProps) {
   };
 
   return (
-    <div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel p-4 space-y-3">
-      <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2 min-w-0">
-          <ShieldCheck className="w-4 h-4 text-muted-foreground shrink-0" strokeWidth={1.5} />
-          <span className="font-medium text-sm">Misconfig Acknowledgements</span>
-          <Badge variant="outline" className="text-[10px] shrink-0 font-mono tabular-nums">
-            {rows.length}
-          </Badge>
-        </div>
-        <div className="flex items-center gap-1 shrink-0">
-          {needsPagination && (
-            <>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6"
-                onClick={() => setPage(Math.max(0, safePage - 1))}
-                disabled={safePage === 0}
-              >
-                <ChevronLeft className="w-4 h-4" strokeWidth={1.5} />
-              </Button>
-              <span className="text-xs font-mono tabular-nums text-stat-subtitle min-w-[3rem] text-center">
-                {safePage + 1} / {totalPages}
-              </span>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6"
-                onClick={() => setPage(Math.min(totalPages - 1, safePage + 1))}
-                disabled={safePage >= totalPages - 1}
-              >
-                <ChevronRight className="w-4 h-4" strokeWidth={1.5} />
-              </Button>
-            </>
-          )}
-          {isAdmin && !isReplica && (
+    <div className="space-y-4">
+      <FleetTabHeading
+        title="Misconfig acknowledgements"
+        subtitle="Accept known-benign misconfigurations so they stop triggering alerts. Acknowledgements apply at read time across the fleet and never modify stored scan data."
+        action={
+          isAdmin && !isReplica ? (
             <Button size="sm" onClick={openCreate}>
               <Plus className="w-4 h-4 mr-1.5" />
-              Add Acknowledgement
+              Add acknowledgement
             </Button>
-          )}
-        </div>
-      </div>
+          ) : undefined
+        }
+      />
 
-      <p className="text-xs text-muted-foreground">
-        Accept known-benign misconfigurations so they stop triggering alerts. Acknowledgements apply at read time
-        across every instance in the fleet and never modify stored scan data.
-      </p>
+      <div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel p-4 space-y-3">
+      {needsPagination && !loading && rows.length > 0 && (
+        <div className="flex items-center justify-end gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={() => setPage(Math.max(0, safePage - 1))}
+            disabled={safePage === 0}
+            aria-label="Previous page"
+          >
+            <ChevronLeft className="w-4 h-4" strokeWidth={1.5} />
+          </Button>
+          <span className="text-xs font-mono tabular-nums text-stat-subtitle min-w-[3rem] text-center">
+            {safePage + 1} / {totalPages}
+          </span>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={() => setPage(Math.min(totalPages - 1, safePage + 1))}
+            disabled={safePage >= totalPages - 1}
+            aria-label="Next page"
+          >
+            <ChevronRight className="w-4 h-4" strokeWidth={1.5} />
+          </Button>
+        </div>
+      )}
 
       {loading && (
         <div className="space-y-2">
@@ -248,6 +243,7 @@ export function MisconfigAckPanel({ isReplica }: MisconfigAckPanelProps) {
           </ul>
         </ScrollArea>
       )}
+      </div>
 
       <Modal open={dialogOpen} onOpenChange={setDialogOpen} size="md">
         <ModalHeader

frontend/src/components/settings/SuppressionsPanel.tsx

@@ -6,9 +6,10 @@ import { Badge } from '@/components/ui/badge';
 import { Skeleton } from '@/components/ui/skeleton';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Modal, ModalHeader, ModalBody, ModalFooter, ConfirmModal } from '@/components/ui/modal';
-import { ChevronLeft, ChevronRight, Plus, ShieldOff, Trash2 } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Plus, Trash2 } from 'lucide-react';
 import { toast } from '@/components/ui/toast-store';
 import { apiFetch } from '@/lib/api';
+import { FleetTabHeading } from '@/components/fleet/FleetEmptyState';
 import type { CveSuppression } from '@/types/security';
 import { useAuth } from '@/context/AuthContext';
 
@@ -148,54 +149,48 @@ export function SuppressionsPanel({ isReplica }: SuppressionsPanelProps) {
   };
 
   return (
-    <div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel p-4 space-y-3">
-      <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2 min-w-0">
-          <ShieldOff className="w-4 h-4 text-muted-foreground shrink-0" strokeWidth={1.5} />
-          <span className="font-medium text-sm">CVE Suppressions</span>
-          <Badge variant="outline" className="text-[10px] shrink-0 font-mono tabular-nums">
-            {rows.length}
-          </Badge>
-        </div>
-        <div className="flex items-center gap-1 shrink-0">
-          {needsPagination && (
-            <>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6"
-                onClick={() => setPage(Math.max(0, safePage - 1))}
-                disabled={safePage === 0}
-              >
-                <ChevronLeft className="w-4 h-4" strokeWidth={1.5} />
-              </Button>
-              <span className="text-xs font-mono tabular-nums text-stat-subtitle min-w-[3rem] text-center">
-                {safePage + 1} / {totalPages}
-              </span>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6"
-                onClick={() => setPage(Math.min(totalPages - 1, safePage + 1))}
-                disabled={safePage >= totalPages - 1}
-              >
-                <ChevronRight className="w-4 h-4" strokeWidth={1.5} />
-              </Button>
-            </>
-          )}
-          {isAdmin && !isReplica && (
+    <div className="space-y-4">
+      <FleetTabHeading
+        title="CVE suppressions"
+        subtitle="Accept known-benign CVEs so they stop triggering alerts. Suppressions apply at read time across the fleet and never modify stored scan data."
+        action={
+          isAdmin && !isReplica ? (
             <Button size="sm" onClick={openCreate}>
               <Plus className="w-4 h-4 mr-1.5" />
-              Add Suppression
+              Add suppression
             </Button>
-          )}
-        </div>
-      </div>
+          ) : undefined
+        }
+      />
 
-      <p className="text-xs text-muted-foreground">
-        Accept known-benign CVEs so they stop triggering alerts. Suppressions apply at read time across every
-        instance in the fleet and never modify stored scan data.
-      </p>
+      <div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel p-4 space-y-3">
+      {needsPagination && !loading && rows.length > 0 && (
+        <div className="flex items-center justify-end gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={() => setPage(Math.max(0, safePage - 1))}
+            disabled={safePage === 0}
+            aria-label="Previous page"
+          >
+            <ChevronLeft className="w-4 h-4" strokeWidth={1.5} />
+          </Button>
+          <span className="text-xs font-mono tabular-nums text-stat-subtitle min-w-[3rem] text-center">
+            {safePage + 1} / {totalPages}
+          </span>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={() => setPage(Math.min(totalPages - 1, safePage + 1))}
+            disabled={safePage >= totalPages - 1}
+            aria-label="Next page"
+          >
+            <ChevronRight className="w-4 h-4" strokeWidth={1.5} />
+          </Button>
+        </div>
+      )}
 
       {loading && (
         <div className="space-y-2">
@@ -256,6 +251,7 @@ export function SuppressionsPanel({ isReplica }: SuppressionsPanelProps) {
           </ul>
         </ScrollArea>
       )}
+      </div>
 
       <Modal open={dialogOpen} onOpenChange={setDialogOpen} size="md">
         <ModalHeader