@skyhook-io/radar-app 1.1.1 → 1.1.2

package/package.json

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

package/src/App.tsx

@@ -12,6 +12,7 @@ import { ResourcesView } from './components/resources/ResourcesView'
 import { serializeColumnFilters } from './components/resources/resource-utils'
 import { ResourceDetailDrawer } from './components/resources/ResourceDetailDrawer'
 import { WorkloadViewRoute } from './components/workload/WorkloadView'
+import { CompareViewRoute } from './components/compare/CompareViewRoute'
 import { HelmView } from './components/helm/HelmView'
 import { TrafficView } from './components/traffic/TrafficView'
 import { CostView } from './components/cost/CostView'
@@ -40,11 +41,12 @@ import { routePath, apiUrl, getAuthHeaders, getCredentialsMode } from './api/con
 import { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts } from './hooks/useKeyboardShortcuts'
 import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
 import radarLoadingIcon from '@skyhook-io/k8s-ui/assets/radar/radar-icon-loading.svg'
-import { RefreshCw, Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, Settings, SquareTerminal, ShieldCheck, GitBranch } from 'lucide-react'
+import { RefreshCw, Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, Settings, SquareTerminal, ShieldCheck, GitBranch, Shield as ShieldIcon } from 'lucide-react'
 import { useTheme } from './context/ThemeContext'
 import { Tooltip } from './components/ui/Tooltip'
 import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNamespacePicker'
 import { SettingsDialog } from './components/settings/SettingsDialog'
+import { MyPermissionsDialog } from './components/settings/MyPermissionsDialog'
 import type { TopologyNode, GroupingMode, MainView, SelectedResource, SelectedHelmRelease, NodeKind, TopologyMode, Topology, K8sEvent } from './types'
 import { kindToPlural, openExternal, apiVersionToGroup, buildWorkloadPath } from './utils/navigation'
 import type { ContextSwitcherHandle } from './components/ContextSwitcher'
@@ -116,7 +118,7 @@ function apiResourceToNodeIdPrefix(apiResource: string): string {
 }
 
 // Extended MainView type that includes traffic and cost
-type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'audit' | 'gitops'
+type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'audit' | 'gitops' | 'compare'
 
 // Extract view from URL path
 function getViewFromPath(pathname: string): ExtendedMainView {
@@ -131,6 +133,7 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   if (path === 'workload') return 'workload'
   if (path === 'audit') return 'audit'
   if (path === 'gitops') return 'gitops'
+  if (path === 'compare') return 'compare'
   return 'home'
 }
 
@@ -143,10 +146,20 @@ function AuthBarrier({ authMode }: { authMode: string }) {
 
   if (authMode === 'oidc') {
     return (
-      <div className="flex-1 flex items-center justify-center bg-theme-base">
-        <div className="flex flex-col items-center gap-4">
-          <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
-          <p className="text-sm text-theme-text-secondary">Redirecting to login…</p>
+      <div className="flex-1 relative bg-theme-base">
+        <div className="fixed inset-0 pointer-events-none">
+          <img
+            src={radarLoadingIcon}
+            alt=""
+            aria-hidden
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-11 h-11"
+          />
+          <p
+            className="absolute left-1/2 -translate-x-1/2 whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary"
+            style={{ top: 'calc(50% + 34px)' }}
+          >
+            Redirecting to login…
+          </p>
         </div>
       </div>
     )
@@ -288,6 +301,7 @@ function AppInner() {
 
   // Settings dialog state
   const [showSettings, setShowSettings] = useState(false)
+  const [showMyPermissions, setShowMyPermissions] = useState(false)
 
   // Listen for desktop "open-settings" event from native menu
   useEffect(() => {
@@ -1146,6 +1160,18 @@ function AppInner() {
             </button>
           )}
 
+          {/* My Permissions — what the current user can do in the cluster,
+              computed live by the apiserver via SelfSubjectRulesReview.
+              Available in embedded mode too — Radar Hub users still benefit
+              from "why can't I do X" debugging. */}
+          <button
+            onClick={() => setShowMyPermissions(true)}
+            className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+            title="My permissions in this cluster"
+          >
+            <ShieldIcon className="w-4 h-4" />
+          </button>
+
           {/* User menu (when auth enabled) — hidden in embedded mode;
               host app typically provides its own via rightExtras. */}
           {!navCustomization.embedded && <UserMenu />}
@@ -1173,13 +1199,35 @@ function AppInner() {
         />
       )}
 
-      {/* Connecting view - show during initial connection or retry */}
+      {/* Connecting view — shown during initial connection or retry.
+          Icon is viewport-anchored so its screen position matches the
+          host hub splash across cross-document transitions. */}
       {!isSwitching && !(authMe?.authEnabled && !authMe?.username) && connection.state === 'connecting' && (
-        <div className="flex-1 flex items-center justify-center bg-theme-base">
-          <div className="flex flex-col items-center gap-4 text-theme-text-secondary">
-            <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
-            <div className="text-center">
-              <p className="font-medium text-theme-text-primary">Connecting to cluster</p>
+        <div className="flex-1 relative bg-theme-base">
+          {/* Icon absolutely anchored to viewport-center. The label block
+              sits at a fixed offset below — independent of label height
+              so multi-line messages (context + progress) don't shift the
+              icon's screen position. */}
+          <div className="fixed inset-0 pointer-events-none">
+            <img
+              src={radarLoadingIcon}
+              alt=""
+              aria-hidden
+              // Integer offset (vw/2 − 22) — avoids sub-pixel jitter from
+              // `translate(-50%, -50%)` on odd-width viewports.
+              className="absolute w-11 h-11"
+              style={{ left: 'calc(50% - 22px)', top: 'calc(50% - 22px)' }}
+            />
+            <div
+              className="absolute left-1/2 -translate-x-1/2 text-center"
+              style={{ top: 'calc(50% + 34px)' }}
+            >
+              {/* 17px semibold matches the other splash surfaces so font
+                  weight doesn't visibly swap during hub → cluster
+                  transitions. Subtitles below stay smaller/dimmer. */}
+              <p className="whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">
+                Connecting to cluster
+              </p>
               {connection.context && (
                 <p className="text-sm text-theme-text-secondary mt-1">{connection.context}</p>
               )}
@@ -1193,13 +1241,24 @@ function AppInner() {
         </div>
       )}
 
-      {/* Context switching overlay */}
+      {/* Context switching overlay — icon viewport-anchored, label below. */}
       {isSwitching && (
-        <div className="flex-1 flex items-center justify-center bg-theme-base">
-          <div className="flex flex-col items-center gap-4 text-theme-text-secondary">
-            <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
-            <div className="text-center">
-              <div className="text-sm font-medium text-theme-text-primary">Switching context</div>
+        <div className="flex-1 relative bg-theme-base">
+          <div className="fixed inset-0 pointer-events-none">
+            <img
+              src={radarLoadingIcon}
+              alt=""
+              aria-hidden
+              // Integer offset (vw/2 − 22) — avoids sub-pixel jitter from
+              // `translate(-50%, -50%)` on odd-width viewports.
+              className="absolute w-11 h-11"
+              style={{ left: 'calc(50% - 22px)', top: 'calc(50% - 22px)' }}
+            />
+            <div
+              className="absolute left-1/2 -translate-x-1/2 text-center"
+              style={{ top: 'calc(50% + 34px)' }}
+            >
+              <div className="whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">Switching context</div>
               {targetContext && (
                 <div className="text-xs mt-2 text-theme-text-tertiary">
                   {targetContext.provider ? (
@@ -1476,6 +1535,9 @@ function AppInner() {
           />
         )}
 
+        {/* Compare two resources of the same kind side-by-side */}
+        {mainView === 'compare' && <CompareViewRoute />}
+
         </ErrorBoundary>
       </div>}
 
@@ -1584,6 +1646,7 @@ function AppInner() {
 
       {/* Settings dialog */}
       <SettingsDialog open={showSettings} onClose={() => setShowSettings(false)} />
+      <MyPermissionsDialog open={showMyPermissions} onClose={() => setShowMyPermissions(false)} />
 
       {/* Debug overlay - only in dev mode */}
       {import.meta.env.DEV && <DebugOverlay />}

package/src/api/client.ts

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react'
 import { useQuery, useMutation, useQueryClient, skipToken } from '@tanstack/react-query'
 import { showApiError, showApiSuccess } from '../components/ui/Toast'
 import { useCanHelmWrite } from '../contexts/CapabilitiesContext'
@@ -890,7 +891,7 @@ export function useResourceWithRelationships<T>(kind: string, namespace: string,
 }
 
 // List resources - queryKey includes group for cache sharing with ResourcesView
-export function useResources<T>(kind: string, namespace?: string, group?: string) {
+export function useResources<T>(kind: string, namespace?: string, group?: string, options?: { enabled?: boolean }) {
   const params = new URLSearchParams()
   if (namespace) params.set('namespace', namespace)
   if (group) params.set('group', group)
@@ -899,6 +900,7 @@ export function useResources<T>(kind: string, namespace?: string, group?: string
   return useQuery<T[]>({
     queryKey: ['resources', kind, group, namespace],
     queryFn: () => fetchJSON(`/resources/${kind}${queryString ? `?${queryString}` : ''}`),
+    enabled: (options?.enabled ?? true) && Boolean(kind),
     staleTime: 30000, // 30 seconds - matches refetchInterval in ResourcesView
   })
 }
@@ -1219,19 +1221,21 @@ export interface PrometheusStatus {
   error?: string
 }
 
-export interface PrometheusDataPoint {
-  timestamp: number
-  value: number
-}
+// Time-series sample types live in @skyhook-io/k8s-ui (shared with library
+// consumers). Re-export here so radar-app callers keep their existing import
+// paths; the Prom-prefixed names are deprecated aliases.
+export type {
+  TimeSeriesPoint,
+  TimeSeries,
+  PrometheusDataPoint,
+  PrometheusSeries,
+} from '@skyhook-io/k8s-ui/components/charts'
 
-export interface PrometheusSeries {
-  labels: Record<string, string>
-  dataPoints: PrometheusDataPoint[]
-}
+import type { TimeSeries as ChartTimeSeries } from '@skyhook-io/k8s-ui/components/charts'
 
 export interface PrometheusQueryResult {
   resultType: string
-  series: PrometheusSeries[]
+  series: ChartTimeSeries[]
 }
 
 export interface PrometheusResourceMetrics {
@@ -1246,9 +1250,44 @@ export interface PrometheusResourceMetrics {
   hint?: string  // Contextual hint when results are empty (e.g. cri-docker label issues)
 }
 
-export type PrometheusMetricCategory = 'cpu' | 'memory' | 'network_rx' | 'network_tx' | 'filesystem'
+export type PrometheusMetricCategory = 'cpu' | 'memory' | 'network_rx' | 'network_tx' | 'filesystem' | 'restarts'
 export type PrometheusTimeRange = '10m' | '30m' | '1h' | '3h' | '6h' | '12h' | '24h' | '48h' | '7d' | '14d'
 
+// PVC usage at a moment in time, derived from kubelet_volume_stats_*.
+// HasData=false silently indicates the CSI driver doesn't report or Prom
+// isn't scraping kubelet endpoints — UI should hide the gauge in that case.
+export interface PrometheusPVCUsage {
+  namespace: string
+  name: string
+  used: number
+  capacity: number
+  ratio: number
+  hasData: boolean
+}
+
+export type RightsizingTone = 'ok' | 'info' | 'warning' | 'alert' | 'critical'
+
+export interface RightsizingRow {
+  container: string
+  resource: 'cpu' | 'memory'
+  currentRequest?: string
+  currentLimit?: string
+  p95?: string
+  recommendedRequest?: string
+  tone: RightsizingTone
+  message: string
+}
+
+export interface PrometheusRightsizing {
+  kind: string
+  namespace: string
+  name: string
+  window: string
+  sampleAvailable: boolean
+  rows: RightsizingRow[]
+  reason?: string
+}
+
 // Check Prometheus availability
 export function usePrometheusStatus() {
   return useQuery<PrometheusStatus>({
@@ -1281,6 +1320,86 @@ export function usePrometheusConnect() {
   })
 }
 
+// Auto-discover Prometheus on first mount of any Prom-backed view, and
+// auto-reconnect across radar restarts on subsequent mounts.
+//
+// Two paths through this hook, both running once per cluster context per
+// component-instance:
+//   1. Cached path — localStorage flag means "Prom was discovered before on
+//      this context". Probe fires immediately on mount; the user sees
+//      charts populate without manual interaction.
+//   2. First-time path — no flag yet. Probe fires after a small delay so the
+//      initial workload-view render lands before we hit the cluster network.
+//      Behavior matches Lens / Headlamp defaults; the trade-off is one
+//      cluster probe per session per fresh kubeconfig context.
+//
+// On success either way we set the flag, so subsequent mounts take path 1.
+// On failure we clear the flag (path 1) or leave it cleared (path 2) and
+// reset attemptedRef, so the existing "Discover Prometheus" CTA renders
+// once status refreshes. Manual interaction stays available as the fallback.
+//
+// localStorage is the right surface: connection intent is browser-local,
+// not a server-side preference, and we want it to persist across radar
+// restarts on the same port.
+const PROM_AUTOCONNECT_PREFIX = 'radar.prometheus.autoConnect:'
+// First-mount delay before probing the cluster. Chosen short enough that the
+// CTA → charts transition feels prompt, long enough that the probe doesn't
+// race the initial workload-view render.
+const PROM_FIRSTLAUNCH_PROBE_DELAY_MS = 500
+
+function promAutoConnectKey(contextName: string): string {
+  return `${PROM_AUTOCONNECT_PREFIX}${contextName}`
+}
+
+export function useAutoPromConnect(): void {
+  const queryClient = useQueryClient()
+  const { data: clusterInfo } = useClusterInfo()
+  const { data: status, isLoading: statusLoading } = usePrometheusStatus()
+  const attemptedRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const context = clusterInfo?.context
+    if (!context || statusLoading) return
+
+    // Persist the "we've connected here before" signal once a connection lands.
+    if (status?.connected) {
+      try { window.localStorage.setItem(promAutoConnectKey(context), '1') } catch {
+        // localStorage can throw in some restricted browser modes — fail open.
+      }
+      return
+    }
+
+    if (attemptedRef.current === context) return
+    let cached: string | null = null
+    try { cached = window.localStorage.getItem(promAutoConnectKey(context)) } catch {
+      cached = null
+    }
+
+    attemptedRef.current = context
+
+    // Cached path probes immediately; first-time path defers briefly so the
+    // initial UI render isn't competing with the cluster network call.
+    const delay = cached === '1' ? 0 : PROM_FIRSTLAUNCH_PROBE_DELAY_MS
+    const timeout = window.setTimeout(() => {
+      // Direct apiFetch (not via the usePrometheusConnect mutation) so the
+      // meta-driven toast handler stays silent — the user didn't click anything.
+      apiFetch(`${getApiBase()}/prometheus/connect`, { method: 'POST' })
+        .then(resp => {
+          if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+          queryClient.invalidateQueries({ queryKey: ['prometheus-status'] })
+        })
+        .catch(() => {
+          try { window.localStorage.removeItem(promAutoConnectKey(context)) } catch {
+            // ignore — manual CTA will render once status refreshes
+          }
+          attemptedRef.current = null
+        })
+    }, delay)
+    return () => window.clearTimeout(timeout)
+  }, [clusterInfo?.context, status?.connected, statusLoading, queryClient])
+}
+
 // Fetch Prometheus metrics for a resource
 export function usePrometheusResourceMetrics(
   kind: string,
@@ -1337,6 +1456,40 @@ export function usePrometheusClusterMetrics(
   })
 }
 
+// Fetch PVC usage. hasData=false when no series — UI should hide the gauge.
+export function usePrometheusPVCUsage(namespace: string, name: string, enabled = true) {
+  return useQuery<PrometheusPVCUsage>({
+    queryKey: ['prometheus-pvc-usage', namespace, name],
+    queryFn: () => fetchJSON(`/prometheus/pvc/${namespace}/${name}`),
+    enabled: enabled && Boolean(namespace && name),
+    staleTime: 60000,
+    refetchInterval: 120000,
+  })
+}
+
+// Fetch rightsizing recommendations for a workload (Deployment / StatefulSet / DaemonSet).
+export function usePrometheusRightsizing(kind: string, namespace: string, name: string, enabled = true) {
+  return useQuery<PrometheusRightsizing>({
+    queryKey: ['prometheus-rightsizing', kind, namespace, name],
+    queryFn: () => fetchJSON(`/prometheus/rightsizing/${kind}/${namespace}/${name}`),
+    enabled: enabled && Boolean(kind && namespace && name),
+    staleTime: 5 * 60 * 1000, // P95 over 24h is slow to shift; cache aggressively
+    refetchInterval: 10 * 60 * 1000,
+  })
+}
+
+// Raw PromQL query (range). Used by HPA charts for status_current_replicas etc.
+export function usePromQLRange(query: string, range: PrometheusTimeRange = '1h', enabled = true) {
+  return useQuery<PrometheusQueryResult>({
+    queryKey: ['promql-range', query, range],
+    queryFn: () =>
+      fetchJSON(`/prometheus/query?query=${encodeURIComponent(query)}&range=${range}`),
+    enabled: enabled && Boolean(query),
+    staleTime: 30000,
+    refetchInterval: 60000,
+  })
+}
+
 // ============================================================================
 // Pod Logs
 // ============================================================================
@@ -2998,6 +3151,7 @@ export interface DiagnosticsSnapshot {
     debugEvents: boolean
     mcpEnabled: boolean
     hasPrometheusURL: boolean
+    hasPrometheusHeaders: boolean
   }
   recentErrors?: DiagErrorEntry[]
   totalErrorsRecorded?: number

package/src/api/rbac.ts

@@ -0,0 +1,57 @@
+import { useQuery } from '@tanstack/react-query'
+import type {
+  RBACSubjectResponse,
+  RBACRoleResponse,
+  RBACWhoamiResponse,
+  RBACNamespaceResponse,
+} from '@skyhook-io/k8s-ui'
+import { fetchJSON } from './client'
+
+// /api/rbac/subject/{kind}/{namespace}/{name}   (ServiceAccount)
+// /api/rbac/subject/{kind}/{name}               (User/Group — no namespace)
+export function useRBACSubject(kind: 'ServiceAccount' | 'User' | 'Group', namespace: string, name: string, enabled = true) {
+  // Subject lookups depend on cluster-wide RBAC. They don't change often,
+  // and operators bouncing between Pod/SA pages re-hit the same SA. Use a
+  // 15s stale window so cross-page navigation is instant.
+  const path =
+    kind === 'ServiceAccount'
+      ? `/rbac/subject/${kind}/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}`
+      : `/rbac/subject/${kind}/${encodeURIComponent(name)}`
+  return useQuery<RBACSubjectResponse>({
+    queryKey: ['rbac', 'subject', kind, namespace, name],
+    queryFn: () => fetchJSON<RBACSubjectResponse>(path),
+    enabled: enabled && !!name && (kind !== 'ServiceAccount' || !!namespace),
+    staleTime: 15000,
+  })
+}
+
+// /api/rbac/role/{kind}/{namespace}/{name}  (use "_" for ClusterRole's empty namespace)
+export function useRBACRole(kind: 'Role' | 'ClusterRole', namespace: string, name: string, enabled = true) {
+  const nsSegment = kind === 'ClusterRole' ? '_' : encodeURIComponent(namespace)
+  return useQuery<RBACRoleResponse>({
+    queryKey: ['rbac', 'role', kind, namespace, name],
+    queryFn: () => fetchJSON<RBACRoleResponse>(`/rbac/role/${kind}/${nsSegment}/${encodeURIComponent(name)}`),
+    enabled: enabled && !!name && (kind !== 'Role' || !!namespace),
+    staleTime: 15000,
+  })
+}
+
+// /api/rbac/namespace/{namespace}
+export function useRBACNamespace(namespace: string, enabled = true) {
+  return useQuery<RBACNamespaceResponse>({
+    queryKey: ['rbac', 'namespace', namespace],
+    queryFn: () => fetchJSON<RBACNamespaceResponse>(`/rbac/namespace/${encodeURIComponent(namespace)}`),
+    enabled: enabled && !!namespace,
+    staleTime: 15000,
+  })
+}
+
+// /api/rbac/whoami?namespace=<ns>
+export function useRBACWhoami(namespace: string, enabled = true) {
+  return useQuery<RBACWhoamiResponse>({
+    queryKey: ['rbac', 'whoami', namespace],
+    queryFn: () => fetchJSON<RBACWhoamiResponse>(`/rbac/whoami?namespace=${encodeURIComponent(namespace)}`),
+    enabled: enabled && !!namespace,
+    staleTime: 30000,
+  })
+}

package/src/components/compare/CompareViewRoute.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useState } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import {
+  ResourceCompareView,
+  CompareResourcePicker,
+  parseRef,
+  refToParam,
+  type CompareResourceRef,
+  type CompareSide,
+  type CompareSideError,
+} from '@skyhook-io/k8s-ui'
+import { useResource } from '../../api/client'
+import { useTheme } from '../../context/ThemeContext'
+import { useCompareCandidates } from './useCompareCandidates'
+
+export function CompareViewRoute() {
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { theme } = useTheme()
+
+  const kind = (searchParams.get('kind') ?? '').toLowerCase()
+  // Matches Radar's repo-wide URL convention. The bare `group` param is
+  // reserved for topology grouping mode and gets stripped by App.tsx's URL
+  // sync on every non-topology view.
+  const group = searchParams.get('apiGroup') ?? undefined
+  const aParsed = parseRef(searchParams.get('a'))
+  const bParsed = parseRef(searchParams.get('b'))
+
+  const [pickerOpen, setPickerOpen] = useState<CompareSide | null>(null)
+
+  const a: CompareResourceRef | null = aParsed ? { kind, namespace: aParsed.namespace, name: aParsed.name, group } : null
+  const b: CompareResourceRef | null = bParsed ? { kind, namespace: bParsed.namespace, name: bParsed.name, group } : null
+
+  const aQuery = useResource<unknown>(a?.kind ?? '', a?.namespace ?? '', a?.name ?? '', a?.group)
+  const bQuery = useResource<unknown>(b?.kind ?? '', b?.namespace ?? '', b?.name ?? '', b?.group)
+
+  const { candidates, isPending: candidatesPending, error: candidatesError } = useCompareCandidates(kind, group, !!pickerOpen)
+
+  const updateParam = useCallback(
+    (next: Record<string, string>) => {
+      const params = new URLSearchParams(searchParams)
+      for (const [k, v] of Object.entries(next)) params.set(k, v)
+      setSearchParams(params, { replace: true })
+    },
+    [searchParams, setSearchParams],
+  )
+
+  const handleSwap = useCallback(() => {
+    if (!a || !b) return
+    updateParam({ a: refToParam(b), b: refToParam(a) })
+  }, [a, b, updateParam])
+
+  const handleClose = useCallback(() => {
+    navigate(-1)
+  }, [navigate])
+
+  const handlePick = useCallback(
+    (picked: CompareResourceRef) => {
+      if (!pickerOpen) return
+      updateParam({ [pickerOpen]: refToParam({ namespace: picked.namespace, name: picked.name }) })
+      setPickerOpen(null)
+    },
+    [pickerOpen, updateParam],
+  )
+
+  if (!kind || !a || !b) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-theme-text-secondary gap-3 p-8">
+        <p className="text-sm">This compare link is missing required parameters.</p>
+        <button
+          onClick={() => navigate('/resources')}
+          className="px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
+        >
+          Back to resources
+        </button>
+      </div>
+    )
+  }
+
+  // A refetch failure with cached data is not worth shouting about — show the
+  // stale data instead of blanking the side with a misleading "failed" banner.
+  const errors: CompareSideError[] = []
+  if (aQuery.error && !aQuery.data) errors.push({ side: 'a', message: aQuery.error instanceof Error ? aQuery.error.message : String(aQuery.error) })
+  if (bQuery.error && !bQuery.data) errors.push({ side: 'b', message: bQuery.error instanceof Error ? bQuery.error.message : String(bQuery.error) })
+
+  const source = pickerOpen === 'a' ? a : pickerOpen === 'b' ? b : null
+
+  return (
+    <>
+      <ResourceCompareView
+        a={a}
+        b={b}
+        aData={aQuery.data}
+        bData={bQuery.data}
+        errors={errors}
+        editorTheme={theme === 'dark' ? 'vs-dark' : 'vs'}
+        onSwap={handleSwap}
+        onClose={handleClose}
+        onChangeA={() => setPickerOpen('a')}
+        onChangeB={() => setPickerOpen('b')}
+      />
+      {source && pickerOpen && (
+        <CompareResourcePicker
+          open={true}
+          onClose={() => setPickerOpen(null)}
+          source={source}
+          sourceSide={pickerOpen}
+          candidates={candidates}
+          loading={candidatesPending}
+          error={candidatesError}
+          onPick={handlePick}
+        />
+      )}
+    </>
+  )
+}

package/src/components/compare/useCompareCandidates.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import type { CompareResourceRef } from '@skyhook-io/k8s-ui'
+import { useResources } from '../../api/client'
+
+/**
+ * Fetch candidates for the compare picker — same kind as the source.
+ * Pass `enabled=false` when the picker is closed to avoid hitting the API.
+ */
+export function useCompareCandidates(kind: string, group: string | undefined, enabled: boolean) {
+  const query = useResources<{ metadata?: { name?: string; namespace?: string } }>(
+    enabled ? kind : '',
+    undefined,
+    group,
+  )
+  const candidates: CompareResourceRef[] = useMemo(() => {
+    if (!query.data) return []
+    return query.data
+      .filter(r => r?.metadata?.name)
+      .map(r => ({
+        kind,
+        namespace: r.metadata?.namespace ?? '',
+        name: r.metadata!.name!,
+        group,
+      }))
+  }, [query.data, kind, group])
+  return { candidates, isPending: query.isPending, error: query.error }
+}