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.

backend/src/__tests__/database-security-overview-helpers.test.ts

@@ -58,6 +58,40 @@ function seedFailed(imageRef: string): void {
   });
 }
 
+/** Midnight (UTC) `daysAgo` days back, so seeded times stay within one calendar day. */
+function dayStartMs(daysAgo: number): number {
+  const d = new Date(Date.now() - daysAgo * 24 * 60 * 60 * 1000);
+  d.setUTCHours(0, 0, 0, 0);
+  return d.getTime();
+}
+
+function seedCompleted(o: { imageRef: string; scannedAt: number; critical: number; high: number; nodeId?: number; status?: 'completed' | 'failed' }): void {
+  db().createVulnerabilityScan({
+    node_id: o.nodeId ?? 1,
+    image_ref: o.imageRef,
+    image_digest: `sha256:${o.imageRef}-${Math.random().toString(16).slice(2)}`,
+    scanned_at: o.scannedAt,
+    total_vulnerabilities: o.critical + o.high,
+    critical_count: o.critical,
+    high_count: o.high,
+    medium_count: 0,
+    low_count: 0,
+    unknown_count: 0,
+    fixable_count: 0,
+    secret_count: 0,
+    misconfig_count: 0,
+    scanners_used: 'vuln',
+    highest_severity: o.critical > 0 ? 'CRITICAL' : o.high > 0 ? 'HIGH' : null,
+    os_info: null,
+    trivy_version: null,
+    scan_duration_ms: null,
+    triggered_by: 'manual',
+    status: o.status ?? 'completed',
+    error: o.status === 'failed' ? 'boom' : null,
+    stack_context: null,
+  });
+}
+
 function seedPolicy(overrides: Partial<Omit<ScanPolicy, 'id' | 'created_at' | 'updated_at'>>): void {
   db().createScanPolicy({
     name: overrides.name ?? 'p',
@@ -116,3 +150,33 @@ describe('countEligibleBlockPolicies (replica)', () => {
     expect(db().countEligibleBlockPolicies(1, 'replica', 'self-id')).toBe(1);
   });
 });
+
+describe('getDailyRiskTrend', () => {
+  it('sums latest-per-image critical/high per day and orders days ascending', () => {
+    const day1 = dayStartMs(3);
+    const day2 = dayStartMs(2);
+    // Day 1: imageA scanned twice; the later scan replaces the earlier one.
+    seedCompleted({ imageRef: 'a:1', scannedAt: day1 + 3_600_000, critical: 5, high: 2 });
+    seedCompleted({ imageRef: 'a:1', scannedAt: day1 + 7_200_000, critical: 3, high: 1 });
+    seedCompleted({ imageRef: 'b:1', scannedAt: day1 + 3_600_000, critical: 1, high: 1 });
+    // Day 2: a single image.
+    seedCompleted({ imageRef: 'a:1', scannedAt: day2 + 3_600_000, critical: 0, high: 4 });
+
+    const trend = db().getDailyRiskTrend(1, 30);
+    expect(trend).toHaveLength(2);
+    expect(trend[0]).toMatchObject({ critical: 4, high: 2 }); // latest a (3,1) + b (1,1)
+    expect(trend[1]).toMatchObject({ critical: 0, high: 4 });
+    expect(trend[0].date < trend[1].date).toBe(true);
+  });
+
+  it('excludes other nodes and non-completed scans', () => {
+    const day = dayStartMs(1);
+    seedCompleted({ imageRef: 'a:1', scannedAt: day + 3_600_000, critical: 2, high: 1 });
+    seedCompleted({ imageRef: 'other:1', scannedAt: day + 3_600_000, critical: 9, high: 9, nodeId: 2 });
+    seedCompleted({ imageRef: 'failed:1', scannedAt: day + 3_600_000, critical: 7, high: 7, status: 'failed' });
+
+    const trend = db().getDailyRiskTrend(1, 30);
+    expect(trend).toHaveLength(1);
+    expect(trend[0]).toMatchObject({ critical: 2, high: 1 });
+  });
+});

backend/src/__tests__/security-overview-route.test.ts

@@ -139,6 +139,38 @@ describe('GET /api/security/overview', () => {
   });
 });
 
+describe('GET /api/security/overview/trend', () => {
+  beforeEach(() => resetSecurity());
+
+  const dayStart = (daysAgo: number): number => {
+    const d = new Date(Date.now() - daysAgo * DAY);
+    d.setUTCHours(0, 0, 0, 0);
+    return d.getTime();
+  };
+
+  it('returns ascending daily critical/high points, node-scoped and completed only', async () => {
+    const d1 = dayStart(3);
+    const d2 = dayStart(2);
+    seedScan({ image_ref: 'a:1', scanned_at: d1 + 3_600_000, critical: 4, high: 2 });
+    seedScan({ image_ref: 'a:1', scanned_at: d2 + 3_600_000, critical: 1, high: 5 });
+    seedScan({ node_id: 2, image_ref: 'x:1', scanned_at: d2 + 3_600_000, critical: 9, high: 9 }); // other node
+    seedScan({ image_ref: 'f:1', scanned_at: d2 + 3_600_000, critical: 7, high: 7, status: 'failed' }); // failed
+
+    const res = await request(app).get('/api/security/overview/trend').set('Cookie', adminCookie);
+    expect(res.status).toBe(200);
+    expect(Array.isArray(res.body)).toBe(true);
+    expect(res.body).toHaveLength(2);
+    expect(res.body[0]).toMatchObject({ critical: 4, high: 2 });
+    expect(res.body[1]).toMatchObject({ critical: 1, high: 5 });
+    expect(res.body[0].date < res.body[1].date).toBe(true);
+  });
+
+  it('requires authentication', async () => {
+    const res = await request(app).get('/api/security/overview/trend');
+    expect(res.status).toBe(401);
+  });
+});
+
 describe('GET /api/security/policy-packs', () => {
   it('returns the 5 default packs with fully-formed rules (auth-only)', async () => {
     const res = await request(app).get('/api/security/policy-packs').set('Cookie', adminCookie);