@skyhook-io/radar-app 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -33,13 +33,13 @@
     "diff": "^9.0.0",
     "monaco-editor": "^0.55.1",
     "react-markdown": "^10.1.0",
-    "react-virtuoso": "^4.18.6",
+    "react-virtuoso": "^4.18.7",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.0.1",
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.5.0",
+    "@skyhook-io/k8s-ui": ">=1.7.3",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",
@@ -55,22 +55,22 @@
     "@skyhook-io/k8s-ui": "*",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.3.0",
-    "@tanstack/react-query": "^5.100.9",
+    "@tanstack/react-query": "^5.100.14",
     "@types/diff": "^8.0.0",
     "@types/node": "^25.7.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react": "^6.0.2",
     "@xyflow/react": "^12.10.2",
     "clsx": "^2.1.1",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.12.0",
+    "lucide-react": "^1.16.0",
     "postcss": "^8.5.14",
     "prettier": "^3.8.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-router-dom": "^7.15.0",
-    "tailwind-merge": "^3.5.0",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.2.4",
     "typescript": "^6.0.2",
     "vite": "^8.0.12"

package/src/App.tsx

@@ -273,6 +273,22 @@ function AppInner() {
     navigate({ pathname: path, search: newParams.toString() })
   }, [navigate, searchParams])
 
+  // Cloud (embedded) makes the host's fleet Checks queue the one canonical
+  // surface — owned by the host's left rail — so Radar drops its own Audit
+  // pill (see the nav below) and any route to /audit redirects to the fleet
+  // Checks queue scoped to this cluster. Entry points that still land on
+  // /audit — the Home "Cluster Audit" card, ⌘K, WorkloadView's "view all"
+  // findings, bookmarks/deep links — all funnel through here. `replace` (not
+  // assign) keeps the transient /audit URL out of history so Back doesn't
+  // bounce off the redirect. Standalone OSS (no clusterChecksHref) is
+  // unaffected and renders the in-app audit view as before.
+  const clusterChecksHref = navCustomization.clusterChecksHref
+  useEffect(() => {
+    if (clusterChecksHref && mainView === 'audit') {
+      window.location.replace(clusterChecksHref())
+    }
+  }, [clusterChecksHref, mainView])
+
   const [namespaces, setNamespaces] = useState<string[]>(getInitialState().namespaces)
   // For large clusters: force SSE to reconnect with namespace filter
   const [forceNamespaceFilter, setForceNamespaceFilter] = useState<string[] | undefined>(undefined)
@@ -769,6 +785,25 @@ function AppInner() {
   // lists) stay in lockstep with the picker. The dedicated URL-write effect
   // below propagates the mirrored state to `?namespaces=`.
   const setActiveNamespace = useSetActiveNamespace()
+  // Defer the state flip to onSuccess. Setting namespaces to [] before the
+  // server-side pref has actually been cleared makes React Query refetch
+  // under the new empty key while the server still returns the previous
+  // pick's scope, caching stale data under the new key with no later
+  // invalidation. onSettled would do the same on errors, leaving the UI
+  // showing "All namespaces" while data is still namespace-scoped — onSuccess
+  // keeps state aligned with the server.
+  //
+  // Don't touch the URL here either: setSearchParams on a still-set state
+  // trips the URL→state sync into firing setNamespaces([]) and a duplicate
+  // mutation immediately, which re-introduces the same race. The state→URL
+  // effect propagates state=[] → URL on its own after onSuccess flips state.
+  const clearAllNamespaces = useCallback(() => {
+    if (namespaces.length === 0) return
+    setActiveNamespace.mutate(
+      { namespaces: [] },
+      { onSuccess: () => setNamespaces([]) },
+    )
+  }, [namespaces.length, setActiveNamespace])
   const initialBookmarkReconciledRef = useRef(false)
   const scopeActives = useMemo(() => namespaceScope?.actives ?? [], [namespaceScope?.actives])
   const namespaceScopeKey = useMemo(() => namespaceScope ? [...scopeActives].sort().join(',') : null, [namespaceScope, scopeActives])
@@ -1113,7 +1148,17 @@ function AppInner() {
             // exists and is reachable via /cost, the Home dashboard card, and the
             // command palette (⌘K). Remove this comment to restore it.
             { view: 'audit' as const, icon: ShieldCheck, label: 'Audit' },
-          ] as const).map(({ view, icon: Icon, label }) => (
+          ] as const)
+            // In Cloud, Checks is a fleet-scoped feature owned by the host's
+            // left rail; the per-cluster view is just that fleet queue filtered
+            // to this cluster, so duplicating it as a peer pill here would be a
+            // second "Checks" that teleports out of the cluster shell. Drop the
+            // Audit tab when embedded — cluster-scoped access stays available
+            // via the Home "Cluster Audit" card (→ /audit, redirected to the
+            // scoped fleet Checks by the clusterChecksHref effect above), ⌘K,
+            // and bookmarks. Standalone OSS keeps the Audit tab.
+            .filter(({ view }) => !(view === 'audit' && clusterChecksHref))
+            .map(({ view, icon: Icon, label }) => (
             <Tooltip key={view} content={label} delay={100} position="bottom">
               <button
                 onClick={() => setMainView(view)}
@@ -1490,6 +1535,7 @@ function AppInner() {
             onResourceClick={(res) => res ? navigateToResource(res) : setSelectedResource(null)}
             onResourceClickYaml={(res) => navigateToResource(res, 'yaml')}
             onKindChange={() => setSelectedResource(null)}
+            onClearNamespaces={clearAllNamespaces}
           />
         )}
 
@@ -1538,6 +1584,7 @@ function AppInner() {
             onOpenResource={(resource) => {
               setSelectedResource(resource)
             }}
+            onClearNamespaces={clearAllNamespaces}
           />
         )}
 
@@ -1551,8 +1598,17 @@ function AppInner() {
           <CostView onBack={() => setMainView('home')} />
         )}
 
-        {/* Best practices detail view */}
-        {mainView === 'audit' && (
+        {/* Best practices detail view. In Cloud this redirects to the host's
+            fleet Checks queue (clusterChecksHref effect above) — render a brief
+            splash instead of the single-cluster view while the cross-document
+            nav lands. */}
+        {mainView === 'audit' && clusterChecksHref && (
+          <div className="flex-1 flex flex-col items-center justify-center gap-3 bg-theme-base">
+            <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
+            <p className="text-sm text-theme-text-secondary">Opening Checks…</p>
+          </div>
+        )}
+        {mainView === 'audit' && !clusterChecksHref && (
           <AuditView
             namespaces={namespaces}
             onBack={() => setMainView('home')}

package/src/api/client.ts

@@ -237,15 +237,19 @@ export interface DashboardCRDCount {
 }
 
 // Re-export shared types from k8s-ui — single source of truth
-import type { AuditCardData, AuditFinding, ResourceGroup, CheckMeta } from '@skyhook-io/k8s-ui'
+import type { AuditCardData, AuditFinding, ResourceGroup, CheckMeta, Check } from '@skyhook-io/k8s-ui'
 export type DashboardAudit = AuditCardData
-export type { AuditFinding, ResourceGroup, CheckMeta }
+export type { AuditFinding, ResourceGroup, CheckMeta, Check }
 
 export interface AuditResponse {
   summary: DashboardAudit
   findings: AuditFinding[]
   groups: ResourceGroup[]
   checks: Record<string, CheckMeta>
+  // Remediation-queue rollup: findings grouped by check, prioritized. Present
+  // on the non-raw scan (standalone + embedded per-cluster views); the Checks
+  // queue renders this.
+  groupedChecks?: Check[]
 }
 
 export interface DashboardCertificateHealth {

package/src/components/audit/AuditView.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react'
 import { useAudit, useAuditSettings, useUpdateAuditSettings } from '../../api/client'
 import type { SelectedResource } from '../../types'
-import { AuditFindingsTable, PaneLoader } from '@skyhook-io/k8s-ui'
+import { ChecksView, PaneLoader, type CheckResourceRef } from '@skyhook-io/k8s-ui'
 import { ArrowLeft, ClipboardCheck, Settings } from 'lucide-react'
 import { AuditSettingsDialog } from './AuditSettingsDialog'
 
@@ -11,6 +11,12 @@ interface AuditViewProps {
   onNavigateToResource: (resource: SelectedResource) => void
 }
 
+// The per-cluster Checks surface. Renders the same shared remediation queue
+// (ChecksView) the Hub fleet view uses — single cluster here, so no cluster
+// label and in-app (client-side) resource navigation. The rollup + priority
+// come pre-computed from radar's /api/audit (pkg/audit.BuildChecks); local
+// ~/.radar settings are this cluster's "policy" and the row hide-menu writes to
+// them.
 export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditViewProps) {
   const { data, isLoading, error } = useAudit(namespaces)
   const { data: auditSettings } = useAuditSettings()
@@ -19,7 +25,7 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
 
   const ignoredCount = auditSettings?.ignoredNamespaces?.length ?? 0
 
-  // Inline hide actions — persist to settings immediately
+  // Inline hide actions — persist to local settings immediately.
   const hideCheck = useCallback((checkID: string) => {
     if (!auditSettings) return
     const current = auditSettings.disabledChecks || []
@@ -29,31 +35,23 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
 
   const hideCategory = useCallback((category: string) => {
     if (!auditSettings || !data?.checks) return
-    const checksInCategory = Object.values(data.checks).filter(c => {
-      // Match checks whose findings are in this category
-      return data.findings.some(f => f.checkID === c.id && f.category === category)
-    }).map(c => c.id)
+    const checksInCategory = Object.values(data.checks)
+      .filter((c) => data.findings.some((f) => f.checkID === c.id && f.category === category))
+      .map((c) => c.id)
     const current = auditSettings.disabledChecks || []
-    const toAdd = checksInCategory.filter(id => !current.includes(id))
+    const toAdd = checksInCategory.filter((id) => !current.includes(id))
     if (toAdd.length === 0) return
     updateSettings.mutate({ ...auditSettings, disabledChecks: [...current, ...toAdd] })
   }, [auditSettings, data, updateSettings])
 
-  const hideNamespace = useCallback((ns: string) => {
-    if (!auditSettings) return
-    const current = auditSettings.ignoredNamespaces || []
-    if (current.includes(ns)) return
-    updateSettings.mutate({ ...auditSettings, ignoredNamespaces: [...current, ns] })
-  }, [auditSettings, updateSettings])
-
   if (isLoading) {
-    return <PaneLoader label="Loading audit data…" className="flex-1" />
+    return <PaneLoader label="Loading checks…" className="flex-1" />
   }
 
   if (error) {
     return (
       <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
-        <p>Failed to load audit data</p>
+        <p>Failed to load checks</p>
       </div>
     )
   }
@@ -61,11 +59,14 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
   if (!data) {
     return (
       <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
-        <p>No audit data available</p>
+        <p>No check data available</p>
       </div>
     )
   }
 
+  const onResourceClick = (ref: CheckResourceRef) =>
+    onNavigateToResource({ kind: ref.kind, namespace: ref.namespace, name: ref.name, group: ref.group })
+
   return (
     <div className="flex-1 flex flex-col min-h-0 p-6 gap-6 overflow-auto">
       {/* Header */}
@@ -79,10 +80,10 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
         <div className="flex-1">
           <div className="flex items-center gap-2">
             <ClipboardCheck className="w-5 h-5 text-theme-text-secondary" />
-            <h1 className="text-lg font-semibold text-theme-text-primary">Cluster Audit</h1>
+            <h1 className="text-lg font-semibold text-theme-text-primary">Checks</h1>
           </div>
           <p className="text-sm text-theme-text-tertiary mt-1 ml-7">
-            Security, reliability, and efficiency checks based on Kubernetes best practices from NSA/CISA guidelines, CIS benchmarks, and industry tools like Polaris and Kubescape.
+            Security, reliability, and efficiency best practices (NSA/CISA, CIS, Polaris, Kubescape), grouped into a remediation queue.
           </p>
         </div>
         <div className="flex items-center gap-2 shrink-0">
@@ -92,22 +93,20 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
           <button
             onClick={() => setShowSettings(true)}
             className="p-2 rounded-lg hover:bg-theme-hover text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
-            title="Audit settings"
+            title="Checks settings"
           >
             <Settings className="w-4 h-4" />
           </button>
         </div>
       </div>
 
-      <AuditFindingsTable
-        groups={data.groups}
-        checks={data.checks}
-        onResourceClick={(kind, namespace, name) =>
-          onNavigateToResource({ kind, namespace, name })
-        }
+      <ChecksView
+        checks={data.groupedChecks ?? []}
+        catalog={data.checks ?? {}}
+        anyData
+        onResourceClick={onResourceClick}
         onHideCheck={hideCheck}
         onHideCategory={hideCategory}
-        onHideNamespace={hideNamespace}
       />
 
       {showSettings && <AuditSettingsDialog namespaces={namespaces} onClose={() => setShowSettings(false)} />}

package/src/components/gitops/GitOpsView.tsx

@@ -86,17 +86,18 @@ interface ResourceCountsResponse {
 interface GitOpsViewProps {
   namespaces: string[]
   onOpenResource: (resource: SelectedResource) => void
+  onClearNamespaces?: () => void
 }
 
-export function GitOpsView({ namespaces, onOpenResource }: GitOpsViewProps) {
+export function GitOpsView({ namespaces, onOpenResource, onClearNamespaces }: GitOpsViewProps) {
   const location = useLocation()
   if (location.pathname.startsWith('/gitops/detail/')) {
     return <GitOpsDetailView namespaces={namespaces} onOpenResource={onOpenResource} />
   }
-  return <GitOpsTableView namespaces={namespaces} />
+  return <GitOpsTableView namespaces={namespaces} onClearNamespaces={onClearNamespaces} />
 }
 
-function GitOpsTableView({ namespaces }: { namespaces: string[] }) {
+function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string[]; onClearNamespaces?: () => void }) {
   const navigate = useNavigate()
   const namespacesParam = namespaces.join(',')
   const { data: apiResources, isLoading: apiResourcesLoading } = useAPIResources()
@@ -170,6 +171,8 @@ function GitOpsTableView({ namespaces }: { namespaces: string[] }) {
         navigate({ pathname: gitOpsDetailPath(row.kindName, ns, row.name), search: params.toString() })
       }}
       searchHotkey
+      globalNamespaces={namespaces}
+      onClearNamespaces={onClearNamespaces}
     />
   )
 }

package/src/components/resources/ResourcesView.tsx

@@ -28,9 +28,10 @@ interface ResourcesViewProps {
   onResourceClick?: (resource: SelectedResource | null) => void
   onResourceClickYaml?: NavigateToResource
   onKindChange?: () => void
+  onClearNamespaces?: () => void
 }
 
-export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange }: ResourcesViewProps) {
+export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange, onClearNamespaces }: ResourcesViewProps) {
   const location = useLocation()
   const navigate = useNavigate()
 
@@ -191,6 +192,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       onResourceClick={onResourceClick}
       onResourceClickYaml={onResourceClickYaml}
       onKindChange={onKindChange}
+      onClearNamespaces={onClearNamespaces}
       // Injected data
       apiResources={apiResources}
       // Lightweight counts for sidebar (replaces 233 parallel queries)

package/src/context/NavCustomization.tsx

@@ -31,6 +31,18 @@ interface NavCustomizationBase {
     name: string;
     group?: string;
   }) => string;
+  /**
+   * When set, Radar treats the host's fleet Checks page as the one canonical
+   * Checks surface in Cloud: it removes its own per-cluster Audit tab and
+   * redirects any route to /audit (the Home "Cluster Audit" card, ⌘K,
+   * bookmarks) to the URL returned here — the host's fleet Checks page scoped
+   * to this cluster. Navigated via window.location.replace (a cross-document
+   * hop into the host's router) so the transient /audit URL stays out of
+   * history. This keeps the per-cluster view and the host's fleet nav from
+   * presenting two diverging Checks surfaces. Standalone Radar omits this and
+   * keeps its single-cluster Audit tab.
+   */
+  clusterChecksHref?: () => string;
 }
 
 /**