@skyhook-io/radar-app 1.6.1 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.6.1",
+  "version": "1.7.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",
@@ -75,6 +75,7 @@
     "vite": "^8.0.12"
   },
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./src/monaco-setup.ts"
   ]
 }

package/src/App.tsx

@@ -29,6 +29,7 @@ import { DURATION_DOCK } from '@skyhook-io/k8s-ui/utils/animation'
 import { ContextSwitcher } from './components/ContextSwitcher'
 import { NamespaceSwitcher, type NamespaceSwitcherHandle } from './components/NamespaceSwitcher'
 import { useNavCustomization } from './context/NavCustomization'
+import type { FleetTakeoverTarget } from './context/NavCustomization'
 import { PrimaryNavRail } from './components/nav/PrimaryNavRail'
 import { useNavRailPinned } from './hooks/useNavRailPinned'
 import { useMediaQuery } from './hooks/useMediaQuery'
@@ -276,21 +277,46 @@ 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.
+  // Cloud (embedded) takes over the "fleet-shaped" per-cluster views with its
+  // own fleet pages scoped to this cluster — owned by the host's left rail — so
+  // Radar drops the matching pills (see the nav below) and any route into one
+  // of these views redirects to the host. Entry points that still land on the
+  // view — Home cards, ⌘K, WorkloadView's "view all" findings, bookmarks/deep
+  // links — all funnel through here. The view name doubles as the takeover
+  // target ('issues' | 'gitops' | 'checks'; 'audit' normalizes to 'checks' via
+  // getViewFromPath). `replace` (not assign) keeps the transient /<view> URL
+  // out of history so Back doesn't bounce off the redirect. Standalone OSS (no
+  // fleetTakeoverHref) is unaffected and renders the in-app view as before.
+  // Resolve every takeover target's host URL ONCE per render so the redirect
+  // effect, nav-pill filtering, inline-view gating, and the cert click handler
+  // all close over the SAME value — host callbacks aren't guaranteed idempotent
+  // (scope / flags / signed URLs can shift between calls). undefined = not taken
+  // over → Radar renders the view itself. `clusterChecksHref` is the deprecated
+  // pre-1.7 hook, folded into the 'checks' target for back-compat.
+  const fleetTakeoverHref = navCustomization.fleetTakeoverHref
   const clusterChecksHref = navCustomization.clusterChecksHref
+  const takeover: Record<FleetTakeoverTarget, string | undefined> = {
+    issues: fleetTakeoverHref?.('issues'),
+    gitops: fleetTakeoverHref?.('gitops'),
+    checks: fleetTakeoverHref?.('checks') ?? clusterChecksHref?.(),
+    certs: fleetTakeoverHref?.('certs'),
+  }
+  // Has the host claimed this view? View-shaped targets only ('certs' has no
+  // Radar view — only its Home card consults `takeover`). Used to drop the nav
+  // pill and gate the inline view render in favor of the "Opening…" splash.
+  const isViewTakenOver = (view: ExtendedMainView): boolean =>
+    (view === 'issues' || view === 'gitops' || view === 'checks') && !!takeover[view]
+  // The host's URL for the CURRENT view, if taken over. Drives the redirect
+  // effect and the "Opening…" splash.
+  const viewTakeoverHref =
+    mainView === 'issues' || mainView === 'gitops' || mainView === 'checks'
+      ? takeover[mainView]
+      : undefined
   useEffect(() => {
-    if (clusterChecksHref && mainView === 'checks') {
-      window.location.replace(clusterChecksHref())
+    if (viewTakeoverHref) {
+      window.location.replace(viewTakeoverHref)
     }
-  }, [clusterChecksHref, mainView])
+  }, [viewTakeoverHref])
 
   const [namespaces, setNamespaces] = useState<string[]>(getInitialState().namespaces)
   // For large clusters: force SSE to reconnect with namespace filter
@@ -542,9 +568,11 @@ function AppInner() {
       description: 'Show keyboard shortcuts',
       category: 'General' as const,
       scope: 'global' as const,
-      // Chromeless embeds (Radar Hub) own their own help surface — don't open a
-      // competing Radar overlay.
-      handler: () => { if (!chromeless) setShowHelp(prev => !prev) },
+      // Radar owns the shortcut registry even in a chromeless embed, so its `?`
+      // overlay is the one that actually lists the working shortcuts. The host
+      // (Radar Hub) drives it from its own chrome by dispatching a `?` keydown —
+      // it has no registry of its own to populate a competing overlay with.
+      handler: () => setShowHelp(prev => !prev),
     },
     {
       id: 'command-palette',
@@ -1316,15 +1344,14 @@ function AppInner() {
             // command palette (⌘K). Remove this comment to restore it.
             { view: 'checks' as const, icon: ShieldCheck, label: 'Checks' },
           ] 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 === 'checks' && clusterChecksHref))
+            // In Cloud, fleet-shaped views (Checks, Issues, GitOps) are owned by
+            // the host's left rail; the per-cluster view is just that fleet page
+            // filtered to this cluster, so duplicating it as a peer pill here
+            // would be a second copy that teleports out of the cluster shell.
+            // Drop any pill the host took over — cluster-scoped access stays
+            // available via the Home cards (redirected by the takeover effect
+            // above), ⌘K, and bookmarks. Standalone OSS keeps every pill.
+            .filter(({ view }) => !isViewTakenOver(view))
             .map(({ view, icon: Icon, label }) => (
             <Tooltip key={view} content={label} delay={100} position="bottom">
               <button
@@ -1380,8 +1407,6 @@ function AppInner() {
         <div className="flex items-center gap-3 shrink-0">
           <NamespaceSwitcher
             ref={namespaceSwitcherRef}
-            disabled={mainView === 'helm'}
-            disabledTooltip="Helm view always shows all namespaces"
           />
 
 
@@ -1608,21 +1633,16 @@ function AppInner() {
               console.debug('[filters] App.onNavigateToResourceKind: navigating to', targetURL)
               navigate({ pathname: `/resources/${kind}`, search: newParams.toString() })
             }}
-            onNavigateToResource={(resource) => {
-              // Switch to resources view and open the resource detail drawer
-              setSelectedResource(resource)
-              const newParams = new URLSearchParams(searchParams)
-              newParams.delete('kind') // kind is now in the path
-              newParams.delete('mode')
-              newParams.delete('group')
-              newParams.delete('resource')
-              if (resource.group) {
-                newParams.set('apiGroup', resource.group)
-              } else {
-                newParams.delete('apiGroup')
-              }
-              navigate({ pathname: `/resources/${resource.kind}`, search: newParams.toString() })
-            }}
+            onNavigateToResource={navigateFromIssue}
+            // Certs has no Radar view, so it can't ride the view-redirect effect
+            // above — wire the Certificate Health card straight to the host's
+            // fleet Certs page (scoped to this cluster) when claimed. `assign`
+            // (not replace): the user is navigating forward from a card, so this
+            // belongs in history. Omitted → the card falls back to Radar's own
+            // TLS-secrets resource list.
+            onNavigateToCerts={
+              takeover.certs ? () => window.location.assign(takeover.certs!) : undefined
+            }
           />
         )}
 
@@ -1758,10 +1778,9 @@ function AppInner() {
           />
         )}
 
-        {/* Helm view - always show all namespaces since releases span multiple ns */}
         {mainView === 'helm' && (
           <HelmView
-            namespace=""
+            namespaces={namespaces}
             selectedRelease={selectedHelmRelease}
             onReleaseClick={(ns, name, storageNamespace) => {
               setSelectedHelmRelease({ namespace: ns, name, storageNamespace })
@@ -1777,8 +1796,9 @@ function AppInner() {
           />
         )}
 
-        {/* GitOps view */}
-        {mainView === 'gitops' && (
+        {/* GitOps view (inline only when the host hasn't taken it over — see
+            the takeover splash below). */}
+        {mainView === 'gitops' && !isViewTakenOver('gitops') && (
           <GitOpsView
             namespaces={namespaces}
             onOpenResource={(resource) => {
@@ -1808,17 +1828,21 @@ function AppInner() {
           <CostView onBack={() => setMainView('home')} />
         )}
 
-        {/* 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 === 'checks' && clusterChecksHref && (
+        {/* Takeover splash. When the host claims the current view via
+            fleetTakeoverHref, the redirect effect above is mid-flight — render a
+            brief splash instead of the inline view (which would flash + fire its
+            own fetches) while the cross-document nav lands. Covers checks /
+            issues / gitops with one block since only one view is active. */}
+        {viewTakeoverHref && (
           <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>
+            <p className="text-sm text-theme-text-secondary">Opening…</p>
           </div>
         )}
-        {mainView === 'checks' && !clusterChecksHref && (
+
+        {/* Best practices detail view (inline only when the host hasn't taken
+            Checks over — standalone OSS, or Cloud without a checks takeover). */}
+        {mainView === 'checks' && !isViewTakenOver('checks') && (
           <AuditView
             namespaces={namespaces}
             onNavigateToResource={navigateToResourceList}
@@ -1828,8 +1852,9 @@ function AppInner() {
         {/* Issues — per-cluster live triage queue (hidden route: not yet in the
             nav `views` list; reachable at /issues). Same shared <IssuesView> the
             Hub fleet uses; a GitOps reconciler subject routes to its detail page,
-            other resources open the standard resource view. */}
-        {mainView === 'issues' && (
+            other resources open the standard resource view. Inline only when the
+            host hasn't taken it over. */}
+        {mainView === 'issues' && !isViewTakenOver('issues') && (
           <IssuesPane
             namespaces={namespaces}
             onNavigateToResource={navigateFromIssue}
@@ -1972,8 +1997,9 @@ function AppInner() {
       />
       <MyPermissionsDialog open={showMyPermissions} onClose={() => setShowMyPermissions(false)} />
 
-      {/* Debug overlay - only in dev mode */}
-      {import.meta.env.DEV && <DebugOverlay />}
+      {/* Debug overlay — dev mode, standalone only. Embedded hosts (Radar Hub)
+          own their own dev tooling; ours would collide with theirs bottom-right. */}
+      {import.meta.env.DEV && showNavRail && <DebugOverlay />}
       </div>
     </div>
     </PortForwardProvider>

package/src/api/client.ts

@@ -122,7 +122,7 @@ export interface DashboardProblem {
   namespace: string
   name: string
   group?: string
-  severity: 'critical' | 'high' | 'medium'
+  severity: 'critical' | 'high' | 'medium' | 'warning' | 'info'
   reason: string
   message: string
   age: string
@@ -341,8 +341,9 @@ export function useAudit(namespaces: string[] = []) {
 
 // Live cluster Issues — the grouped triage queue (radar's /api/issues =
 // internal/issues.Compose+Classify+Group). Single-cluster here; the Hub fleet
-// view fans the same shape across clusters. keepPreviousData semantics via
-// placeholderData so the queue doesn't flash empty on the 30s refresh.
+// view fans the same shape across clusters. Do not carry old data across query
+// keys: issues are scope-sensitive, so namespace changes must not show the
+// previous scope's rows while the new scope fetches.
 // total = rows returned (after the cap); total_matched = rows that matched
 // before the cap. total_matched > total means the queue was truncated — surface
 // that honestly rather than presenting a capped list as if it were complete.
@@ -365,7 +366,6 @@ export function useIssues(namespaces: string[] = []) {
     queryFn: () => fetchJSON(`/issues${params}`),
     staleTime: 30000,
     refetchInterval: 30000,
-    placeholderData: (prev) => prev,
   })
 }
 
@@ -1136,6 +1136,7 @@ export function useResourceEvents(kind: string, namespace: string, name: string)
     const p = new URLSearchParams()
     p.set('namespace', namespace)
     p.set('kind', singularKind)
+    p.set('name', name)
     p.set('include_managed', 'true')
     p.set('since', since)
     return p
@@ -1152,8 +1153,7 @@ export function useResourceEvents(kind: string, namespace: string, name: string)
       const params = baseParams()
       params.set('sources', 'k8s_event')
       params.set('limit', '500')
-      const events = await fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
-      return events.filter(e => e.name === name)
+      return fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
     },
     enabled,
     refetchInterval: 15000,
@@ -1167,8 +1167,7 @@ export function useResourceEvents(kind: string, namespace: string, name: string)
       const params = baseParams()
       params.set('sources', 'informer,historical')
       params.set('limit', '50')
-      const events = await fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
-      return events.filter(e => e.name === name)
+      return fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
     },
     enabled,
     refetchInterval: 15000,
@@ -1312,21 +1311,28 @@ export interface TopNodeMetrics {
   memoryAllocatable: number // bytes
 }
 
-// Fetch bulk metrics for all pods (for CPU/Memory columns in resource table)
-export function useTopPodMetrics() {
+// Fetch bulk metrics for pods (for CPU/Memory columns in resource table)
+export function useTopPodMetrics(options?: { enabled?: boolean; namespaces?: string[] }) {
+  const namespacesParam = options?.namespaces?.join(',') ?? ''
+  const params = new URLSearchParams()
+  if (namespacesParam) params.set('namespaces', namespacesParam)
+  const queryString = params.toString()
+
   return useQuery<TopPodMetrics[]>({
-    queryKey: ['top-pod-metrics'],
-    queryFn: () => fetchJSON('/metrics/top/pods'),
+    queryKey: ['top-pod-metrics', namespacesParam],
+    queryFn: () => fetchJSON(`/metrics/top/pods${queryString ? `?${queryString}` : ''}`),
+    enabled: options?.enabled ?? true,
     staleTime: 25000,
     refetchInterval: 30000,
   })
 }
 
 // Fetch bulk metrics for all nodes (for CPU/Memory columns in resource table)
-export function useTopNodeMetrics() {
+export function useTopNodeMetrics(options?: { enabled?: boolean }) {
   return useQuery<TopNodeMetrics[]>({
     queryKey: ['top-node-metrics'],
     queryFn: () => fetchJSON('/metrics/top/nodes'),
+    enabled: options?.enabled ?? true,
     staleTime: 25000,
     refetchInterval: 30000,
   })
@@ -2305,11 +2311,15 @@ export function useDrainNode() {
 // Helm API hooks
 // ============================================================================
 
+function helmNamespaceParams(namespaces: string[] = []) {
+  return namespaces.length > 0 ? `?namespaces=${namespaces.join(',')}` : ''
+}
+
 // List all Helm releases
-export function useHelmReleases(namespace?: string) {
-  const params = namespace ? `?namespace=${namespace}` : ''
+export function useHelmReleases(namespaces: string[] = []) {
+  const params = helmNamespaceParams(namespaces)
   return useQuery<HelmRelease[]>({
-    queryKey: ['helm-releases', namespace],
+    queryKey: ['helm-releases', namespaces],
     queryFn: () => fetchJSON(`/helm/releases${params}`),
     staleTime: 30000, // 30 seconds
   })
@@ -2387,10 +2397,10 @@ export function useHelmUpgradeInfo(namespace: string, name: string, enabled = tr
 }
 
 // Batch check for upgrade availability (for list view)
-export function useHelmBatchUpgradeInfo(namespace?: string, enabled = true) {
-  const params = namespace ? `?namespace=${namespace}` : ''
+export function useHelmBatchUpgradeInfo(namespaces: string[] = [], enabled = true) {
+  const params = helmNamespaceParams(namespaces)
   return useQuery<BatchUpgradeInfo>({
-    queryKey: ['helm-batch-upgrade-info', namespace],
+    queryKey: ['helm-batch-upgrade-info', namespaces],
     queryFn: () => fetchJSON(`/helm/upgrade-check${params}`),
     enabled,
     staleTime: 30000, // 30 seconds - keep in sync with release list

package/src/components/gitops/GitOpsView.tsx

@@ -83,6 +83,7 @@ const KIND_BY_NAME = new Map(GITOPS_KINDS.map((k) => [k.name, k]))
 interface ResourceCountsResponse {
   counts: Record<string, number>
   forbidden?: string[]
+  unavailable?: string[]
 }
 
 interface GitOpsViewProps {
@@ -136,9 +137,15 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
     initNavigationMap([...(apiResources ?? []), ...GITOPS_KINDS])
   }, [apiResources])
 
-  // Counts come from radar's /api/resource-counts, kind-filtered to the
-  // GitOps set. The extracted GitOpsTableView reads them for the
-  // Scope-section mode tabs + the empty-state check.
+  const hasGitOpsRowResource = useMemo(() => (
+    hasAPIResource(apiResources, 'applications', 'argoproj.io') ||
+    hasAPIResource(apiResources, 'kustomizations', 'kustomize.toolkit.fluxcd.io') ||
+    hasAPIResource(apiResources, 'helmreleases', 'helm.toolkit.fluxcd.io')
+  ), [apiResources])
+
+  // Counts come from radar's /api/resource-counts. The extracted
+  // GitOpsTableView reads only the GitOps keys for mode tabs + empty-state
+  // checks.
   const countsQuery = useQuery({
     queryKey: ['gitops-resource-counts', namespacesParam],
     queryFn: async () => {
@@ -217,6 +224,7 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
   const [coldRetrying, setColdRetrying] = useState(false)
   useEffect(() => { coldRetriesRef.current = 0; setColdRetrying(false) }, [apiResources, namespacesParam])
   useEffect(() => {
+    if (!hasGitOpsRowResource || rowsQuery.error) { setColdRetrying(false); return }
     if (apiResourcesLoading || rowsQuery.isFetching) return
     if ((rowsQuery.data?.length ?? 0) > 0) { setColdRetrying(false); return }
     if (coldRetriesRef.current >= 4) { setColdRetrying(false); return }
@@ -224,7 +232,7 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
     const t = window.setTimeout(() => { coldRetriesRef.current += 1; refetchTable() }, 2000)
     return () => window.clearTimeout(t)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowsQuery.data, rowsQuery.isFetching, apiResourcesLoading])
+  }, [rowsQuery.data, rowsQuery.isFetching, rowsQuery.error, apiResourcesLoading, hasGitOpsRowResource])
 
   const handleRowAction = (row: GitOpsRow, action: GitOpsRowAction) => {
     const { kindName: kind, namespace, name, id } = row
@@ -271,6 +279,7 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
         loading={apiResourcesLoading || countsQuery.isLoading || rowsQuery.isLoading || coldRetrying}
         error={(rowsQuery.error as Error | null) ?? null}
         counts={countsQuery.data?.counts ?? {}}
+        countsUnavailable={countsQuery.data?.unavailable}
         onRefresh={() => rowsQuery.refetch()}
         onRowClick={(row) => {
           const ns = row.namespace || '_'
@@ -958,5 +967,3 @@ function TopologyCounts({ tree }: { tree: GitOpsResourceTree }) {
     </div>
   )
 }
-
-

package/src/components/helm/HelmView.tsx

@@ -15,23 +15,23 @@ import { InstallWizard } from './InstallWizard'
 type ViewTab = 'releases' | 'charts'
 
 interface HelmViewProps {
-  namespace: string
+  namespaces: string[]
   selectedRelease?: SelectedHelmRelease | null
   onReleaseClick?: (namespace: string, name: string, storageNamespace?: string) => void
 }
 
-export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmViewProps) {
+export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmViewProps) {
   const [activeTab, setActiveTab] = useState<ViewTab>('releases')
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedChart, setSelectedChart] = useState<{ repo: string; chart: string; version: string; source: ChartSource } | null>(null)
 
-  const { data: releases, isLoading, error: releasesError, refetch: refetchReleases } = useHelmReleases(namespace || undefined)
+  const { data: releases, isLoading, error: releasesError, refetch: refetchReleases } = useHelmReleases(namespaces)
   const isForbidden = isForbiddenError(releasesError)
   const releasesErrorMessage = releasesError instanceof Error ? releasesError.message : 'Failed to load Helm releases'
 
   // Lazy load upgrade info after releases are loaded
   const { data: upgradeInfo, isLoading: upgradeLoading, error: upgradeError, refetch: refetchUpgradeInfo } = useHelmBatchUpgradeInfo(
-    namespace || undefined,
+    namespaces,
     Boolean(releases && releases.length > 0)
   )
   const upgradeErrorMessage = upgradeError instanceof Error ? upgradeError.message : 'Upgrade checks failed'

package/src/components/home/ClusterHealthCard.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import type { DashboardResponse, DashboardMetrics, DashboardCRDCount, DashboardProblem } from '../../api/client'
+import type { DashboardResponse, DashboardMetrics, DashboardCRDCount } from '../../api/client'
 import { HealthRing } from './HealthRing'
 import {
   AlertTriangle, CheckCircle, XCircle,
@@ -23,12 +23,13 @@ interface ClusterHealthCardProps {
   metrics: DashboardMetrics | null
   metricsServerAvailable: boolean
   topCRDs?: DashboardCRDCount[] // Loaded lazily, may be undefined
-  problems: DashboardProblem[]
+  issueCount: number
+  hasCriticalIssues: boolean
   nodeVersionSkew: DashboardResponse['nodeVersionSkew']
   onNavigateToKind: (kind: string, group?: string) => void
   onNavigateToView: () => void
   onWarningEventsClick?: () => void
-  onUnhealthyClick?: () => void
+  onIssuesClick?: () => void
 }
 
 function getMetricsInstallHint(platform: string): string {
@@ -113,12 +114,13 @@ export function ClusterHealthCard({
   metrics,
   metricsServerAvailable,
   topCRDs: _topCRDs,
-  problems,
+  issueCount,
+  hasCriticalIssues,
   nodeVersionSkew,
   onNavigateToKind,
   onNavigateToView,
   onWarningEventsClick,
-  onUnhealthyClick,
+  onIssuesClick,
 }: ClusterHealthCardProps) {
   void _topCRDs // Reserved for future CRD display
 
@@ -450,14 +452,14 @@ export function ClusterHealthCard({
               <span><span className="font-mono">{health.warningEvents}</span> Warning Events</span>
             </button>
           )}
-          {problems.length > 0 && (
+          {issueCount > 0 && (
             <button
-              onClick={onUnhealthyClick}
-              title="View timeline of unhealthy/degraded workload events"
-              className="badge status-unhealthy w-fit gap-1.5 hover:opacity-80 transition-opacity"
+              onClick={onIssuesClick}
+              title="View grouped live operational issues"
+              className={clsx('badge w-fit gap-1.5 hover:opacity-80 transition-opacity', hasCriticalIssues ? 'status-unhealthy' : 'status-degraded')}
             >
               <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
-              <span>View unhealthy workload events</span>
+              <span>{pluralize(issueCount, 'Active Issue')}</span>
             </button>
           )}
         </div>

package/src/components/home/HomeView.tsx

@@ -1,8 +1,6 @@
 import { useMemo, type ReactNode } from 'react'
-import { useDashboard, useDashboardCRDs, useDashboardHelm } from '../../api/client'
-import type { DashboardResponse } from '../../api/client'
+import { useDashboard, useDashboardCRDs, useDashboardHelm, useIssues, type IssuesResponse } from '../../api/client'
 import type { ExtendedMainView, Topology, SelectedResource } from '../../types'
-import { kindToPlural } from '../../utils/navigation'
 import { TopologyPreview } from './TopologyPreview'
 import { HelmSummary } from './HelmSummary'
 import { ActivitySummary } from './ActivitySummary'
@@ -11,9 +9,18 @@ import { CertificateHealthCard } from './CertificateHealthCard'
 import { NetworkPolicyCoverageCard } from './NetworkPolicyCoverageCard'
 import { CostCard } from './CostCard'
 import { GitOpsControllersCard } from './GitOpsControllersCard'
-import { AuditCard, PaneLoader, StatusDot, mapHealthToTone } from '@skyhook-io/k8s-ui'
+import {
+  AuditCard,
+  PaneLoader,
+  StatusDot,
+  categoryLabel,
+  groupLabel,
+  subjectRef,
+  type Issue,
+} from '@skyhook-io/k8s-ui'
+import { formatCompactAge } from '@skyhook-io/k8s-ui/utils/format'
 import { ClusterHealthCard } from './ClusterHealthCard'
-import { AlertTriangle, Loader2, Shield } from 'lucide-react'
+import { AlertTriangle, CheckCircle, Loader2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
 
 interface HomeViewProps {
@@ -22,10 +29,21 @@ interface HomeViewProps {
   onNavigateToView: (view: ExtendedMainView, params?: Record<string, string>) => void
   onNavigateToResourceKind: (kind: string, group?: string, filters?: Record<string, string[]>) => void
   onNavigateToResource: (resource: SelectedResource) => void
+  /**
+   * Optional override for the Certificate Health card's click. When an embedded
+   * host (Radar Cloud) takes Certs over with its own fleet page, it passes this
+   * to route there instead of Radar's TLS-secrets resource list. Omitted in
+   * standalone OSS → the card drills into secrets as before.
+   */
+  onNavigateToCerts?: () => void
 }
 
-export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource }: HomeViewProps) {
+export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource, onNavigateToCerts }: HomeViewProps) {
   const { data, isLoading, error } = useDashboard(namespaces)
+  const { data: issuesData, isLoading: issuesLoading, isFetching: issuesFetching, error: issuesError } = useIssues(namespaces)
+  const issues = issuesData?.issues ?? []
+  const issueCount = issuesData?.total_matched ?? issuesData?.total ?? issues.length
+  const hasCriticalIssues = issues.some((issue) => issue.severity === 'critical')
 
   // SSE is cluster-wide on small/medium clusters; the picker only narrows the
   // dashboard summary, so re-apply the filter here or the legend disagrees.
@@ -73,8 +91,6 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
     )
   }
 
-  const hasProblems = data.problems && data.problems.length > 0
-
   const stillLoading = data.deferredLoading || (data.partialData && data.partialData.length > 0)
 
   return (
@@ -98,19 +114,17 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
           metrics={data.metrics}
           metricsServerAvailable={data.metricsServerAvailable}
           topCRDs={crdsData?.topCRDs}
-          problems={data.problems ?? []}
+          issueCount={issueCount}
+          hasCriticalIssues={hasCriticalIssues}
           nodeVersionSkew={data.nodeVersionSkew}
           onNavigateToKind={onNavigateToResourceKind}
           onNavigateToView={() => onNavigateToView('resources')}
           onWarningEventsClick={() => onNavigateToView('timeline', { view: 'list', filter: 'warnings', time: 'all' })}
-          onUnhealthyClick={() => onNavigateToView('timeline', { view: 'list', filter: 'unhealthy', time: 'all' })}
+          onIssuesClick={() => onNavigateToView('issues')}
         />
 
-        {/* Row 2: Main content columns — teasers left, problems right (if any) */}
-        <div className={clsx(
-          'grid gap-6',
-          hasProblems ? 'grid-cols-1 lg:grid-cols-[1fr_420px]' : 'grid-cols-1'
-        )}>
+        {/* Row 2: Main content columns - teasers left, issues right */}
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_420px]">
           {/* Left column: teaser cards */}
           <div className="flex flex-col gap-6 auto-rows-min">
             {/* Live band — Topology + Timeline always render, so a fixed 2-up never strands.
@@ -158,7 +172,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
                   <BandItem>
                     <CertificateHealthCard
                       data={data.certificateHealth}
-                      onNavigate={() => onNavigateToResourceKind('secrets', undefined, { type: ['TLS'] })}
+                      onNavigate={onNavigateToCerts ?? (() => onNavigateToResourceKind('secrets', undefined, { type: ['TLS'] }))}
                     />
                   </BandItem>
                 )}
@@ -190,14 +204,18 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
             )}
           </div>
 
-          {/* Right column: problems panel */}
-          {hasProblems && (
-            <ProblemsPanel
-              problems={data.problems}
-              onNavigateToIssues={() => onNavigateToView('issues')}
-              onResourceClick={onNavigateToResource}
-            />
-          )}
+          <ProblemsPanel
+            issues={issues}
+            issueCount={issueCount}
+            visibility={issuesData?.visibility}
+            hasData={!!issuesData}
+            isLoading={issuesLoading && !issuesData}
+            isRefreshing={issuesFetching && !!issuesData}
+            error={issuesError}
+            totalReturned={issues.length}
+            onNavigateToIssues={() => onNavigateToView('issues')}
+            onResourceClick={onNavigateToResource}
+          />
         </div>
       </div>
     </div>
@@ -216,19 +234,56 @@ function BandItem({ children }: { children: ReactNode }) {
 // ============================================================================
 
 interface ProblemsPanelProps {
-  problems: DashboardResponse['problems']
+  issues: Issue[]
+  issueCount: number
+  visibility?: IssuesResponse['visibility']
+  hasData: boolean
+  isLoading: boolean
+  isRefreshing: boolean
+  error: unknown
+  totalReturned: number
   onNavigateToIssues: () => void
   onResourceClick: (resource: SelectedResource) => void
 }
 
 
-function ProblemsPanel({ problems, onNavigateToIssues, onResourceClick }: ProblemsPanelProps) {
+function ProblemsPanel({
+  issues,
+  issueCount,
+  visibility,
+  hasData,
+  isLoading,
+  isRefreshing,
+  error,
+  totalReturned,
+  onNavigateToIssues,
+  onResourceClick,
+}: ProblemsPanelProps) {
+  const hasCriticalIssues = issues.some((issue) => issue.severity === 'critical')
+  const hasIssues = issueCount > 0
+  const hasHardError = !!error && !hasData
+  const hasLimitedVisibility = !!visibility?.impact
+  const isTruncated = issueCount > totalReturned
+  const titleClass = hasCriticalIssues
+    ? 'text-red-500'
+    : hasIssues || hasHardError || hasLimitedVisibility
+      ? 'text-amber-500'
+      : 'text-theme-text-secondary'
+  const countClass = hasHardError
+    ? 'status-unknown'
+    : hasCriticalIssues
+      ? 'status-unhealthy'
+      : hasIssues || hasLimitedVisibility
+        ? 'status-degraded'
+        : 'status-healthy'
+  const countLabel = isLoading ? '...' : hasHardError ? 'error' : String(issueCount)
+
   return (
     <div className="rounded-xl bg-theme-surface shadow-theme-sm flex flex-col lg:max-h-[calc(100vh-280px)] lg:sticky lg:top-0">
       <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50 shrink-0">
         <div className="flex items-center gap-2">
-          <AlertTriangle className="w-4 h-4 text-red-500" />
-          <span className="text-xs font-semibold uppercase tracking-wider text-red-500">Active Issues</span>
+          <AlertTriangle className={clsx('w-4 h-4', titleClass)} />
+          <span className={clsx('text-xs font-semibold uppercase tracking-wider', titleClass)}>Active Issues</span>
         </div>
         <div className="flex items-center gap-2">
           <button
@@ -238,41 +293,141 @@ function ProblemsPanel({ problems, onNavigateToIssues, onResourceClick }: Proble
           >
             View all
           </button>
-          <span className="badge status-unhealthy rounded-full">{problems.length}</span>
+          {isRefreshing && !isLoading && (
+            <Loader2 className="h-3.5 w-3.5 animate-spin text-theme-text-tertiary" aria-label="Refreshing issues" />
+          )}
+          <span className={clsx('badge rounded-full', countClass)}>{countLabel}</span>
         </div>
       </div>
       <div className="overflow-y-auto flex-1 min-h-0">
-        <div className="divide-y divide-theme-border">
-          {problems.map((p, i) => (
-            <button
-              key={`${p.kind}-${p.namespace}-${p.name}-${i}`}
-              className="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-theme-hover transition-colors text-left"
-              onClick={() => onResourceClick({
-                kind: kindToPlural(p.kind),
-                namespace: p.namespace,
-                name: p.name,
-                group: p.group,
-              })}
-            >
-              <StatusDot tone={mapHealthToTone(p.severity)} className="shrink-0" />
-              <div className="min-w-0 flex-1">
-                <div className="flex items-center gap-1.5">
-                  <span className="text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 py-0.5 rounded">{p.kind}</span>
-                  <span className="text-xs text-theme-text-primary truncate font-medium">{p.name}</span>
-                  <span className="text-[10px] text-theme-text-tertiary ml-auto shrink-0">{p.duration || p.age}</span>
-                </div>
-                <div className="flex items-center gap-1.5 mt-0.5">
-                  <span className="text-[11px] text-theme-text-secondary truncate">{p.reason}</span>
-                  <span className="text-[10px] text-theme-text-tertiary shrink-0">{p.namespace}</span>
-                </div>
-                {p.message && (
-                  <div className="text-[10px] text-theme-text-tertiary truncate mt-0.5">{p.message}</div>
-                )}
+        {isLoading ? (
+          <ProblemsPanelState
+            icon={<Loader2 className="h-5 w-5 animate-spin text-theme-text-tertiary" />}
+            title="Loading issues"
+            body="Checking live cluster issues for the selected scope."
+          />
+        ) : hasHardError ? (
+          <ProblemsPanelState
+            icon={<AlertTriangle className="h-5 w-5 text-amber-500" />}
+            title="Issues unavailable"
+            body={formatIssueError(error)}
+          />
+        ) : (
+          <>
+            {!!error && (
+              <ProblemsPanelNotice tone="warning">
+                Issue refresh failed. Showing the last successful result.
+              </ProblemsPanelNotice>
+            )}
+            {visibility?.impact && (
+              <ProblemsPanelNotice tone="warning">
+                Limited visibility - {visibility.impact} Results may be incomplete.
+              </ProblemsPanelNotice>
+            )}
+            {isTruncated && (
+              <ProblemsPanelNotice tone="neutral">
+                Showing {totalReturned} of {issueCount} issues. Narrow by namespace to see the rest.
+              </ProblemsPanelNotice>
+            )}
+
+            {issues.length === 0 ? (
+              <ProblemsPanelState
+                icon={
+                  hasLimitedVisibility
+                    ? <AlertTriangle className="h-5 w-5 text-amber-500" />
+                    : <CheckCircle className="h-5 w-5 text-green-500" />
+                }
+                title={hasLimitedVisibility ? 'No visible active issues' : 'No active issues'}
+                body={
+                  hasLimitedVisibility
+                    ? 'Radar could not read every workload source in this scope.'
+                    : 'No critical or warning issues across the selected scope.'
+                }
+              />
+            ) : (
+              <div className="divide-y divide-theme-border">
+                {issues.map((issue) => {
+                  const ref = subjectRef(issue)
+                  const age = issue.first_seen
+                    ? issue.issue_timing === 'started_at_resource_creation'
+                      ? 'since deploy'
+                      : formatCompactAge(issue.first_seen)
+                    : ''
+
+                  return (
+                    <button
+                      key={issue.id}
+                      className="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-theme-hover transition-colors text-left"
+                      onClick={() => onResourceClick({
+                        kind: ref.kind,
+                        namespace: ref.namespace ?? '',
+                        name: ref.name,
+                        group: ref.group ?? '',
+                      })}
+                    >
+                      <StatusDot tone={issue.severity === 'critical' ? 'unhealthy' : 'degraded'} className="shrink-0" />
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 py-0.5 rounded">{issue.kind}</span>
+                          <span className="text-xs text-theme-text-primary truncate font-medium">{issue.name}</span>
+                          {age && <span className="text-[10px] text-theme-text-tertiary ml-auto shrink-0">{age}</span>}
+                        </div>
+                        <div className="flex items-center gap-1.5 mt-0.5">
+                          <span className="text-[11px] text-theme-text-secondary truncate">{categoryLabel(issue.category)}</span>
+                          <span className="text-[10px] text-theme-text-tertiary shrink-0">{groupLabel(issue.category_group)}</span>
+                          {issue.namespace && <span className="text-[10px] text-theme-text-tertiary shrink-0">{issue.namespace}</span>}
+                        </div>
+                        {(issue.reason || issue.message) && (
+                          <div className="text-[10px] text-theme-text-tertiary truncate mt-0.5">
+                            {issue.reason}
+                            {issue.reason && issue.message ? ' - ' : ''}
+                            {issue.message}
+                          </div>
+                        )}
+                      </div>
+                    </button>
+                  )
+                })}
               </div>
-            </button>
-          ))}
-        </div>
+            )}
+          </>
+        )}
       </div>
     </div>
   )
 }
+
+function ProblemsPanelState({ icon, title, body }: { icon: ReactNode; title: string; body: string }) {
+  return (
+    <div className="flex min-h-[220px] flex-col items-center justify-center gap-2 px-6 py-10 text-center">
+      <div className="flex h-9 w-9 items-center justify-center rounded-full bg-theme-elevated">
+        {icon}
+      </div>
+      <p className="text-sm font-medium text-theme-text-primary">{title}</p>
+      <p className="max-w-[280px] text-xs leading-5 text-theme-text-secondary">{body}</p>
+    </div>
+  )
+}
+
+function ProblemsPanelNotice({ tone, children }: { tone: 'warning' | 'neutral'; children: ReactNode }) {
+  return (
+    <div className="px-3 pt-3">
+      <div
+        className={clsx(
+          'rounded-lg border px-3 py-2 text-xs leading-5',
+          tone === 'warning'
+            ? 'border-amber-500/20 bg-amber-500/10 text-theme-text-secondary'
+            : 'border-theme-border bg-theme-elevated text-theme-text-secondary',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function formatIssueError(error: unknown): string {
+  return error instanceof Error && error.message
+    ? error.message
+    : 'Failed to load active issues.'
+}

package/src/components/resources/ResourcesView.tsx

@@ -23,6 +23,7 @@ import { getSkeletonYaml } from '../../utils/skeleton-yaml'
 interface ResourceCountsResponse {
   counts: Record<string, number>
   forbidden?: string[]
+  unavailable?: string[]
 }
 
 interface ResourcesViewProps {
@@ -36,6 +37,14 @@ interface ResourcesViewProps {
 
 type SelectedKindInfo = { name: string; kind: string; group: string } | null
 
+const LARGE_RESOURCE_LIST_LIMIT = 25000
+const LARGE_RESOURCE_LIST_GUARD_KEYS = new Set([
+  'Pod',
+  'Event',
+  'apps/ReplicaSet',
+  'discovery.k8s.io/EndpointSlice',
+])
+
 const deniedWorkloadWrites: WorkloadWritePermissions = {
   deployments: false,
   daemonSets: false,
@@ -43,6 +52,10 @@ const deniedWorkloadWrites: WorkloadWritePermissions = {
   rollouts: false,
 }
 
+function resourceCountKey(kind: NonNullable<SelectedKindInfo>): string {
+  return kind.group ? `${kind.group}/${kind.kind}` : kind.kind
+}
+
 export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange, onClearNamespaces }: ResourcesViewProps) {
   const location = useLocation()
   const navigate = useNavigate()
@@ -93,7 +106,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
 
   // Lightweight resource counts for sidebar badges (~2KB instead of ~608MB)
   const namespacesParam = namespaces.join(',')
-  const { data: countsData } = useQuery({
+  const { data: countsData, isError: countsIsError } = useQuery({
     queryKey: ['resource-counts', namespacesParam],
     queryFn: async () => {
       const params = new URLSearchParams()
@@ -123,6 +136,29 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
     return match?.isCrd ?? (!!selectedKind.group) // default: has group = likely CRD
   }, [selectedKind, apiResources])
 
+  const selectedCountKey = selectedKind ? resourceCountKey(selectedKind) : ''
+  const selectedCount = selectedCountKey ? countsData?.counts[selectedCountKey] : undefined
+  const selectedCountUnavailable = selectedCountKey ? countsData?.unavailable?.includes(selectedCountKey) ?? false : false
+  const isSelectedKindGuarded = selectedCountKey !== '' && LARGE_RESOURCE_LIST_GUARD_KEYS.has(selectedCountKey)
+  const waitingForGuardCount = isSelectedKindGuarded && !countsData && !countsIsError
+  const largeListBlocked = isSelectedKindGuarded && countsData != null && (selectedCountUnavailable || (selectedCount ?? 0) > LARGE_RESOURCE_LIST_LIMIT)
+  const selectedKindQueryBlocked = waitingForGuardCount || largeListBlocked
+  const podCount = countsData?.counts.Pod
+  const podCountUnavailable = countsData?.unavailable?.includes('Pod') ?? false
+  const podCountAllowsBulkMetrics = countsData != null && !podCountUnavailable && (podCount ?? 0) <= LARGE_RESOURCE_LIST_LIMIT
+  const selectedKindName = selectedKind?.name.toLowerCase() ?? ''
+  const topPodMetricsEnabled = selectedKindName === 'pods' && podCountAllowsBulkMetrics
+  const topNodeMetricsEnabled = selectedKindName === 'nodes' && namespaces.length === 0 && podCountAllowsBulkMetrics
+  const largeListGuard = selectedKind && largeListBlocked
+    ? {
+        kind: selectedKind.name,
+        count: selectedCountUnavailable ? undefined : selectedCount,
+        reason: selectedCountUnavailable ? 'count-unavailable' as const : 'too-many' as const,
+        limit: LARGE_RESOURCE_LIST_LIMIT,
+        namespaces,
+      }
+    : null
+
   // Fetch full data only for the selected kind
   const selectedKindQuery = useQuery({
     queryKey: ['resources', selectedKind?.name, isSelectedCrd ? selectedKind?.group : '', namespaces],
@@ -156,7 +192,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       }
       return res.json()
     },
-    enabled: !!selectedKind,
+    enabled: !!selectedKind && !selectedKindQueryBlocked,
     staleTime: 30000,
     refetchInterval: 120000, // Safety net — SSE k8s_event drives near-real-time invalidation
     retry: (failureCount: number, error: Error) => {
@@ -169,17 +205,17 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   const selectedKindQueryResult: ResourceQueryResult | undefined = useMemo(() => {
     if (!selectedKind) return undefined
     return {
-      data: selectedKindQuery.data as any[] | undefined,
-      isLoading: selectedKindQuery.isLoading,
-      error: selectedKindQuery.error,
+      data: selectedKindQueryBlocked ? [] : selectedKindQuery.data as any[] | undefined,
+      isLoading: waitingForGuardCount || selectedKindQuery.isLoading,
+      error: selectedKindQueryBlocked ? undefined : selectedKindQuery.error,
       refetch: selectedKindQuery.refetch,
       dataUpdatedAt: selectedKindQuery.dataUpdatedAt,
     }
-  }, [selectedKind, selectedKindQuery.data, selectedKindQuery.isLoading, selectedKindQuery.error, selectedKindQuery.refetch, selectedKindQuery.dataUpdatedAt])
+  }, [selectedKind, selectedKindQueryBlocked, waitingForGuardCount, selectedKindQuery.data, selectedKindQuery.isLoading, selectedKindQuery.error, selectedKindQuery.refetch, selectedKindQuery.dataUpdatedAt])
 
   // Metrics
-  const { data: topPodMetrics } = useTopPodMetrics()
-  const { data: topNodeMetrics } = useTopNodeMetrics()
+  const { data: topPodMetrics } = useTopPodMetrics({ enabled: topPodMetricsEnabled, namespaces })
+  const { data: topNodeMetrics } = useTopNodeMetrics({ enabled: topNodeMetricsEnabled })
 
   // Certificate expiry
   const { data: certExpiry, isError: certExpiryError } = useSecretCertExpiry()
@@ -248,7 +284,9 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       // Lightweight counts for sidebar (replaces 233 parallel queries)
       resourceCounts={countsData?.counts}
       resourceForbidden={countsData?.forbidden}
+      resourceUnavailable={countsData?.unavailable}
       selectedKindQuery={selectedKindQueryResult}
+      largeListGuard={largeListGuard}
       onSelectedKindChange={setSelectedKind}
       topPodMetrics={topPodMetrics}
       topNodeMetrics={topNodeMetrics}

package/src/context/NavCustomization.tsx

@@ -13,6 +13,14 @@
 import { createContext, useContext } from 'react';
 import type { ReactNode } from 'react';
 
+/**
+ * Per-cluster destinations an embedded host can take over with its own
+ * fleet-scoped pages. See `fleetTakeoverHref`. 'issues' | 'gitops' | 'checks'
+ * are also Radar view names (so route entry redirects too); 'certs' is
+ * card-only (Radar has no certs view).
+ */
+export type FleetTakeoverTarget = 'issues' | 'gitops' | 'checks' | 'certs';
+
 interface NavCustomizationBase {
   /** Replaces Radar's Skyhook/radar logo + wordmark. */
   brandSlot?: ReactNode;
@@ -32,15 +40,32 @@ interface NavCustomizationBase {
     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.
+   * Lets an embedded host (e.g. Radar Cloud) take over selected per-cluster
+   * destinations with its OWN fleet pages scoped to this cluster, instead of
+   * Radar rendering them inline. Given a semantic target the host returns the
+   * URL to navigate to, or `undefined`/omits the hook to let Radar render its
+   * own view as usual (standalone OSS does the latter for everything).
+   *
+   * This is how the Home dashboard's "fleet-shaped" cards reach the host's
+   * canonical surfaces rather than a second, diverging per-cluster copy:
+   *   - 'issues'  → the Active Issues panel + cluster-health issues count
+   *   - 'gitops'  → the GitOps controllers card
+   *   - 'checks'  → the Cluster Audit card (and any route to /audit; legacy
+   *                 `clusterChecksHref` folded in here)
+   *   - 'certs'   → the Certificate Health card
+   *
+   * View-shaped targets (issues / gitops / checks) are also honored for any
+   * entry into that view — ⌘K, bookmarks, deep links — via a redirect effect
+   * in App.tsx, using window.location.replace so the transient /<view> URL
+   * stays out of history. 'certs' has no Radar view, so only the card consults
+   * it (window.location.assign — a real forward navigation the user initiated).
+   */
+  fleetTakeoverHref?: (target: FleetTakeoverTarget) => string | undefined;
+  /**
+   * @deprecated Superseded by `fleetTakeoverHref('checks')`. Kept so consumers
+   * still on the pre-1.7 hook keep working (App.tsx folds it into the 'checks'
+   * target) — this makes adding `fleetTakeoverHref` an additive, non-breaking
+   * change. Remove in a major release once all consumers have migrated.
    */
   clusterChecksHref?: () => string;
   /**

package/src/index.ts

@@ -14,7 +14,7 @@ export {
   getAuthHeaders,
   getCredentialsMode,
 } from './api/config';
-export type { NavCustomization } from './context/NavCustomization';
+export type { NavCustomization, FleetTakeoverTarget } from './context/NavCustomization';
 export { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay';
 
 // Shared cluster-switcher primitive — re-exported from @skyhook-io/k8s-ui so

package/src/main.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import './monaco-setup'
+import { configureBundledMonaco } from './monaco-setup'
 import { RadarApp } from './RadarApp'
 import { openExternal } from './utils/navigation'
 import './index.css'
 
+// Keep this as an explicit call: side-effect-only imports of the Monaco setup can
+// be dropped by production tree-shaking, which makes offline desktop builds fall
+// back to Monaco's CDN loader.
+configureBundledMonaco()
+
 // Intercept external link clicks in the Wails desktop app.
 // <a target="_blank"> is swallowed by WKWebView/WebView2 — route through openExternal()
 // which calls the backend /api/desktop/open-url endpoint to open in the system browser.

package/src/monaco-setup.ts

@@ -3,8 +3,8 @@
 // over the network, so the YAML editor never loads in airgapped / offline
 // deployments. Bundling makes the binary fully self-contained.
 //
-// Imported for side effects from main.tsx (Radar's binary entry) only — library
-// consumers (e.g. Radar Hub) keep the default CDN loader unless they opt in.
+// Called from main.tsx (Radar's binary entry) only — library consumers
+// (e.g. Radar Hub) keep the default CDN loader unless they opt in.
 //
 // Import the editor API + YAML grammar directly rather than the `monaco-editor`
 // barrel: the barrel pulls in the JSON/CSS/HTML/TypeScript language services,
@@ -15,12 +15,19 @@ import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
 import { loader } from '@monaco-editor/react'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 
-// YAML has no dedicated Monaco language worker — the base editor worker covers
-// everything we use, so route every label to it.
-;(self as typeof self & { MonacoEnvironment?: { getWorker(): Worker } }).MonacoEnvironment = {
-  getWorker() {
-    return new EditorWorker()
-  },
-}
+let configured = false
+
+export function configureBundledMonaco() {
+  if (configured) return
+  configured = true
 
-loader.config({ monaco })
+  // YAML has no dedicated Monaco language worker — the base editor worker covers
+  // everything we use, so route every label to it.
+  ;(globalThis as typeof globalThis & { MonacoEnvironment?: { getWorker(): Worker } }).MonacoEnvironment = {
+    getWorker() {
+      return new EditorWorker()
+    },
+  }
+
+  loader.config({ monaco })
+}