@skyhook-io/radar-app 1.6.1 → 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "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

@@ -542,9 +542,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',
@@ -1608,21 +1610,7 @@ 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}
           />
         )}
 
@@ -1972,8 +1960,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,
   })

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/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 {
@@ -26,6 +33,10 @@ interface HomeViewProps {
 
 export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource }: 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 +84,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 +107,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.
@@ -190,14 +197,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 +227,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 +286,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/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 })
+}