feat: add dedicated Security page and policy-pack foundation (#1362)

* feat: add dedicated Security page and policy-pack foundation

Bring vulnerability scanning, scan history, suppressions, Compose risks,
secrets, policy packs, and scanner setup into one node-scoped Security
command center instead of scattering them across Resources and Settings.

- New top-level Security view with Overview, Images, Compose risks,
  Secrets, Policies, Suppressions, History, and Scanner setup tabs
  (status masthead + signal rail; controlled tabs with deep-link support).
- Backend: GET /security/overview rollup and GET /security/policy-packs
  static catalog (auth-only, Community). DatabaseService gains an uncapped
  scan-status count and a node-eligible block-policy count, and
  getImageScanSummaries now projects secret and misconfig counts.
- Reuse existing surfaces: the scan-history sheet, the control-governed
  suppression and acknowledgement panels, and the scan-detail sheet (now
  with an initial-tab prop so it opens on the matching finding type).
- Extract a shared SeverityBadge (from Resources) and a TrivyManager
  (from Settings) so both surfaces render identical controls.
- Resources "Scan history" now links into the Security page History tab.
- Docs for the new Security surface and tests for the new endpoints,
  helpers, nav wiring, and tabs.

* refactor: consolidate scanner and policy management onto the Security page

Remove the Settings "Vulnerability Scanning" section now that the Security
page covers the same ground, with every option preserved:

- Scanner install / update / uninstall / auto-update live on the Scanner setup
  tab (TrivyManager).
- Scan policies, the honor-suppressions toggle, and the replica
  managed-by-control / demote controls move into a new ScanPolicyManager on the
  Policies tab (paid; Community sees only the policy-pack catalog).
- CVE suppressions and acknowledgements remain on the Suppressions tab.

Wiring removed: the registry section and the now-empty Security settings group,
the SectionId, the SettingsSectionContent case and the isPaid prop it was the
sole consumer of, and SecuritySection itself. The dashboard configuration-status
"Vulnerability scanning" row now navigates to the Security page Policies tab.

Docs that pointed at "Settings -> Security -> Vulnerability Scanning" are swept
to the relevant Security page tabs.

* fix: harden Security page scanner refresh, policy-load errors, and secret-only badges

Address independent-review findings on the Security page:

- Scanner setup now refreshes Trivy state when the active node changes, so the
  displayed scanner status matches the node TrivyManager's actions target (both
  follow x-node-id). Previously, switching nodes on the tab left stale state.
- ScanPolicyManager surfaces an explicit error state on a failed policy fetch
  instead of falling through to a false "No scan policies configured".
- The shared SeverityBadge and the Images findings column no longer label a scan
  "clean" when it has secrets or misconfigurations but no CVE severity
  (highest_severity is derived from vulnerabilities only); they show a "Findings"
  state and the secret/misconfig counts instead.
- The Overview enforcement note points to the Policies tab, not the removed
  Settings section.
- The History tab auto-opens the scan-history sheet only on a deep-link (mount
  with the History tab active), not on every manual tab selection.

Adds tests for the badge secret/misconfig state and the policy-load error state.

frontend/src/components/EditorLayout/ViewRouter.tsx

@@ -13,6 +13,7 @@ import HomeDashboard from '../HomeDashboard';
 import type { NotificationItem } from '../dashboard/types';
 import type { ScheduleTaskPrefill } from '../ScheduledOperationsView';
 import type { ActiveView } from './hooks/useViewNavigationState';
+import type { SecurityTab } from '@/lib/events';
 
 // Paid-tier views and the security-history overlay are loaded on demand.
 // Their internal PaidGate / CapabilityGate wrappers render
@@ -39,6 +40,9 @@ const AuditLogView = lazy(() =>
 );
 const ScheduledOperationsView = lazy(() => import('../ScheduledOperationsView'));
 const AutoUpdateReadinessView = lazy(() => import('../AutoUpdateReadinessView'));
+const SecurityView = lazy(() =>
+    import('../SecurityView').then(m => ({ default: m.SecurityView })),
+);
 
 // Sized for the main workspace area (flex-1 with p-6 padding). Visible
 // only during the brief window between an unlocked view's chunk request
@@ -81,6 +85,8 @@ export interface ViewRouterProps {
     onNavigateToStack: (stackFile: string) => void;
     onOpenSettingsSection: (section: SectionId) => void;
     onClearNotifications: () => void;
+    securityTab: SecurityTab;
+    onSecurityTabChange: (tab: SecurityTab) => void;
     // Render slot for the inline editor view. Kept as a callback so the
     // (large) editor JSX is only allocated when activeView === 'editor',
     // not on every parent render that lands on a different view.
@@ -104,6 +110,8 @@ export function ViewRouter({
     onNavigateToStack,
     onOpenSettingsSection,
     onClearNotifications,
+    securityTab,
+    onSecurityTabChange,
     renderEditor,
 }: ViewRouterProps): ReactNode {
     const { can } = useAuth();
@@ -121,6 +129,16 @@ export function ViewRouter({
     if (activeView === 'resources') {
         return <ResourcesView />;
     }
+    if (activeView === 'security') {
+        // Node-scoped (not hub-only): scan/scanner data follows the active node
+        // like Resources. The page itself is Community; per-tab gates handle
+        // capability-missing nodes and the local-control governance tabs.
+        return (
+            <LazyView>
+                <SecurityView activeTab={securityTab} onTabChange={onSecurityTabChange} />
+            </LazyView>
+        );
+    }
     if (activeView === 'host-console') {
         // Mirror the backend RBAC gate (system:console, admin-only). The nav
         // item is already admin-gated; this stops a non-admin who reaches the

frontend/src/components/EditorLayout/__tests__/useViewNavigationState.test.tsx

@@ -332,4 +332,46 @@ describe('useViewNavigationState', () => {
     expect(result.current.activeView).toBe('resources');
     expect(onNavigateToDashboard).not.toHaveBeenCalled();
   });
+
+  // ── Security view: node-scoped, deep-linkable tab ──────────────────────────
+
+  it('includes the Security nav item for a community user', () => {
+    const { result } = renderHook(() => useViewNavigationState());
+    expect(result.current.navItems.map(i => i.value)).toContain('security');
+  });
+
+  it('keeps Security visible on a remote node (node-scoped, not hub-only)', () => {
+    mockActiveNode('remote');
+    const { result } = renderHook(() => useViewNavigationState());
+    expect(result.current.navItems.map(i => i.value)).toContain('security');
+  });
+
+  it('defaults securityTab to overview', () => {
+    const { result } = renderHook(() => useViewNavigationState());
+    expect(result.current.securityTab).toBe('overview');
+  });
+
+  it('navigate to security with a tab sets securityTab then activeView (deep-link, no race)', () => {
+    const { result } = renderHook(() => useViewNavigationState());
+    act(() => {
+      window.dispatchEvent(
+        new CustomEvent(SENCHO_NAVIGATE_EVENT, { detail: { view: 'security', tab: 'history', nodeId: 4 } }),
+      );
+    });
+    expect(result.current.activeView).toBe('security');
+    expect(result.current.securityTab).toBe('history');
+    expect(result.current.filterNodeId).toBe(4);
+  });
+
+  it('navigate to security without a tab defaults securityTab to overview', () => {
+    const { result } = renderHook(() => useViewNavigationState());
+    act(() => result.current.setSecurityTab('history'));
+    act(() => {
+      window.dispatchEvent(
+        new CustomEvent(SENCHO_NAVIGATE_EVENT, { detail: { view: 'security' } }),
+      );
+    });
+    expect(result.current.activeView).toBe('security');
+    expect(result.current.securityTab).toBe('overview');
+  });
 });

frontend/src/components/EditorLayout/hooks/useViewNavigationState.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import {
   Terminal, CloudDownload, Home, HardDrive, ScrollText,
-  Activity, Radar, RefreshCw, Clock,
+  Activity, Radar, RefreshCw, Clock, ShieldCheck,
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { useAuth } from '@/context/AuthContext';
@@ -9,6 +9,7 @@ import { useLicense } from '@/context/LicenseContext';
 import { useNodes } from '@/context/NodeContext';
 import { SENCHO_NAVIGATE_EVENT } from '@/components/NodeManager';
 import type { SenchoNavigateDetail } from '@/components/NodeManager';
+import type { SecurityTab } from '@/lib/events';
 import type { SectionId } from '@/components/settings/types';
 import type { ScheduleTaskPrefill } from '@/components/ScheduledOperationsView';
 
@@ -20,6 +21,7 @@ export type ActiveView =
   | 'templates'
   | 'global-observability'
   | 'fleet'
+  | 'security'
   | 'audit-log'
   | 'scheduled-ops'
   | 'auto-updates'
@@ -58,6 +60,7 @@ export function useViewNavigationState(options?: UseViewNavigationStateOptions)
 
   const [activeView, setActiveView] = useState<ActiveView>('dashboard');
   const [settingsSection, setSettingsSection] = useState<SectionId>('appearance');
+  const [securityTab, setSecurityTab] = useState<SecurityTab>('overview');
   const [securityHistoryOpen, setSecurityHistoryOpen] = useState(false);
   const [filterNodeId, setFilterNodeId] = useState<number | null>(null);
   const [schedulePrefill, setSchedulePrefill] = useState<ScheduleTaskPrefill | null>(null);
@@ -91,6 +94,14 @@ export function useViewNavigationState(options?: UseViewNavigationStateOptions)
         setFilterNodeId(detail.nodeId ?? null);
         return;
       }
+      if (detail.view === 'security') {
+        // Set the target tab before switching the view so the controlled
+        // SecurityView lands on it deterministically (no mount race).
+        setSecurityTab(detail.tab ?? 'overview');
+        setActiveView('security');
+        setFilterNodeId(detail.nodeId ?? null);
+        return;
+      }
       setActiveView(detail.view as ActiveView);
       setFilterNodeId(detail.nodeId ?? null);
     };
@@ -103,6 +114,9 @@ export function useViewNavigationState(options?: UseViewNavigationStateOptions)
       { value: 'dashboard', label: 'Home', icon: Home },
       { value: 'fleet', label: 'Fleet', icon: Radar },
       { value: 'resources', label: 'Resources', icon: HardDrive },
+      // Security is a Community, node-scoped review surface (not hub-only), so
+      // it shows for every authenticated user and on remote nodes too.
+      { value: 'security', label: 'Security', icon: ShieldCheck },
       { value: 'templates', label: 'App Store', icon: CloudDownload },
     ];
     // The aggregated Logs feed crosses every managed stack, so it is an
@@ -137,6 +151,7 @@ export function useViewNavigationState(options?: UseViewNavigationStateOptions)
   return {
     activeView, setActiveView,
     settingsSection, setSettingsSection,
+    securityTab, setSecurityTab,
     securityHistoryOpen, setSecurityHistoryOpen,
     filterNodeId, setFilterNodeId,
     schedulePrefill, setSchedulePrefill,

frontend/src/components/EditorLayout/mobile-treatments.test.ts

@@ -13,6 +13,10 @@ describe('mobile treatments', () => {
     }
   });
 
+  it('treats the Security view as responsive (reflowed, not bespoke or desktop-only)', () => {
+    expect(MOBILE_TREATMENTS.security).toBe('responsive');
+  });
+
   it('keeps BESPOKE_MOBILE_VIEWS in lockstep with the bespoke treatments', () => {
     const declaredBespoke = Object.entries(MOBILE_TREATMENTS)
       .filter(([, treatment]) => treatment === 'bespoke')

frontend/src/components/EditorLayout/mobile-treatments.ts

@@ -22,6 +22,7 @@ export const MOBILE_TREATMENTS: Record<ActiveView, MobileTreatment> = {
   settings: 'bespoke',
   editor: 'detail',
   resources: 'responsive',
+  security: 'responsive',
   templates: 'responsive',
   'global-observability': 'responsive',
   'auto-updates': 'responsive',