@skyhook-io/radar-app 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.1.1",
+  "version": "1.2.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",
@@ -31,6 +31,7 @@
     "@fontsource/dm-mono": "^5.2.7",
     "@monaco-editor/react": "^4.7.0",
     "diff": "^9.0.0",
+    "monaco-editor": "^0.55.1",
     "react-markdown": "^10.1.0",
     "react-virtuoso": "^4.18.6",
     "remark-gfm": "^4.0.1",

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(() => {
@@ -509,58 +523,97 @@ function AppInner() {
   // Query client for cache invalidation
   const queryClient = useQueryClient()
 
-  // SSE-driven cache invalidation for resource lists, counts, and detail views.
-  // Uses a 3-second throttle window: first event starts the timer, all events within the
-  // window accumulate, then fire a single batch invalidation. This keeps max latency at 3s
-  // while coalescing burst events (e.g., 100-pod rollout → ~10 invalidations total).
-  const pendingInvalidationRef = useRef<{
-    kinds: Set<string>
-    hasCountChange: boolean
+  // SSE-driven cache invalidation, split into two cadences so constant status
+  // churn on large clusters doesn't force the *expensive* queries (big resource
+  // lists + dashboard) to refetch every 3s. The core distinction: add/delete
+  // changes what rows/counts exist (membership — keep fast); update is mostly
+  // status/restart/health noise that can fire constantly on a 10k-pod cluster
+  // and shouldn't drag a giant list onto a 3s cadence.
+  //
+  //   FAST (3s): detail drawer for any change (one cheap mounted object), and
+  //     on add/delete: the list, counts, and dashboard. GitOps + cert keep
+  //     their existing every-batch behavior — Phase 2 makes GitOps relevance-aware.
+  //   SLOW (15s): list + dashboard for kinds with update churn. A kind that also
+  //     had an add/delete in the window gets refreshed by both tiers (an extra
+  //     refetch per 15s at most) — that's fine and avoids a stale-list bug:
+  //     deduping by "was structural this window" would wrongly suppress an
+  //     update that arrived *after* the fast structural flush already ran.
+  const fastInvalidationRef = useRef<{
+    changedKinds: Set<string>   // every changed kind (any op) → detail drawer
+    structuralKinds: Set<string> // add/delete kinds → list membership + counts + dashboard
+    secretsChanged: boolean
+    timer: number | null
+  }>({ changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null })
+  const slowInvalidationRef = useRef<{
+    updatedKinds: Set<string>    // update-only churn → throttled list + dashboard
     timer: number | null
-  }>({ kinds: new Set(), hasCountChange: false, timer: null })
+  }>({ updatedKinds: new Set(), timer: null })
 
   const handleK8sEvent = useCallback((event: K8sEvent) => {
     // Skip K8s Event kind — informational, not resource mutations
     if (event.kind === 'Event') return
 
-    const pending = pendingInvalidationRef.current
-    pending.kinds.add(kindToPlural(event.kind))
-    if (event.operation === 'add' || event.operation === 'delete') {
-      pending.hasCountChange = true
+    const kind = kindToPlural(event.kind)
+    const structural = event.operation === 'add' || event.operation === 'delete'
+
+    const fast = fastInvalidationRef.current
+    fast.changedKinds.add(kind)
+    if (structural) fast.structuralKinds.add(kind)
+    if (kind === 'secrets') fast.secretsChanged = true
+
+    const slow = slowInvalidationRef.current
+    if (!structural) slow.updatedKinds.add(kind)
+
+    // FAST tier — membership-sensitive + cheap, bounded 3s latency.
+    if (fast.timer === null) {
+      fast.timer = window.setTimeout(() => {
+        const f = fastInvalidationRef.current
+        for (const k of f.changedKinds) {
+          queryClient.invalidateQueries({ queryKey: ['resource', k] }) // open detail drawer stays live
+        }
+        for (const k of f.structuralKinds) {
+          queryClient.invalidateQueries({ queryKey: ['resources', k] }) // list membership changed
+        }
+        if (f.structuralKinds.size > 0) {
+          queryClient.invalidateQueries({ queryKey: ['resource-counts'] })
+          queryClient.invalidateQueries({ queryKey: ['dashboard'] })
+        }
+        if (f.secretsChanged) {
+          queryClient.invalidateQueries({ queryKey: ['secret-cert-expiry'] })
+        }
+        // GitOps behavior unchanged from before — refreshes every batch when a
+        // GitOps view is mounted (Phase 2 will make this relevance-aware).
+        queryClient.invalidateQueries({ queryKey: ['gitops-tree'] })
+        queryClient.invalidateQueries({ queryKey: ['gitops-insights'] })
+        fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+      }, 3000)
     }
 
-    // Start throttle window on first event (don't reset — bounded 3s latency)
-    if (pending.timer !== null) return
-    pending.timer = window.setTimeout(() => {
-      for (const kind of pending.kinds) {
-        // Invalidate list queries (['resources', kind, ...]) and detail queries (['resource', kind, ...])
-        queryClient.invalidateQueries({ queryKey: ['resources', kind] })
-        queryClient.invalidateQueries({ queryKey: ['resource', kind] })
-      }
-      if (pending.hasCountChange) {
-        queryClient.invalidateQueries({ queryKey: ['resource-counts'] })
-      }
-      queryClient.invalidateQueries({ queryKey: ['dashboard'] })
-      if (pending.kinds.has('secrets')) {
-        queryClient.invalidateQueries({ queryKey: ['secret-cert-expiry'] })
-      }
-      // GitOps tree + insights are derived views over the same informer
-      // cache that produced this SSE event — when *anything* changes, the
-      // managed-resource tree and the insights pipeline can have stale
-      // changes/events/drift. Invalidating broadly here is cheap (only the
-      // currently-mounted GitOps view re-fetches; other views have no
-      // matching keys) and is what makes the detail page actually live.
-      // Without this the failure card + topology lag behind the title chips
-      // until window focus or a manual refresh.
-      queryClient.invalidateQueries({ queryKey: ['gitops-tree'] })
-      queryClient.invalidateQueries({ queryKey: ['gitops-insights'] })
-      // Reset accumulator
-      pending.kinds = new Set()
-      pending.hasCountChange = false
-      pending.timer = null
-    }, 3000)
+    // SLOW tier — throttle the expensive queries for status-only churn. Only
+    // updates schedule it; structural changes are fully handled by the fast tier.
+    if (!structural && slow.timer === null) {
+      slow.timer = window.setTimeout(() => {
+        const s = slowInvalidationRef.current
+        for (const k of s.updatedKinds) {
+          queryClient.invalidateQueries({ queryKey: ['resources', k] })
+        }
+        queryClient.invalidateQueries({ queryKey: ['dashboard'] }) // health reflects status updates
+        slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
+      }, 15000)
+    }
   }, [queryClient])
 
+  // Clear pending invalidation timers on unmount. Reset the refs (not just
+  // clearTimeout) so a same-instance remount doesn't inherit a non-null timer
+  // id — handleK8sEvent only schedules when timer === null, so a stale id would
+  // silently wedge all further SSE-driven invalidation.
+  useEffect(() => () => {
+    if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
+    if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
+    fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+    slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
+  }, [])
+
   // SSE connection for real-time updates — no namespace filter for small/medium clusters (frontend filters).
   // forceNamespaceFilter is only set for large clusters that require server-side filtering.
   // Fleet mode uses 'resources' topology on the backend — filtering is client-side
@@ -576,10 +629,10 @@ function AppInner() {
       queryClient.invalidateQueries()
 
       // Cancel any pending SSE-driven invalidation — old cluster's events are irrelevant
-      if (pendingInvalidationRef.current.timer !== null) {
-        clearTimeout(pendingInvalidationRef.current.timer)
-        pendingInvalidationRef.current = { kinds: new Set(), hasCountChange: false, timer: null }
-      }
+      if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
+      if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
+      fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+      slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
 
       // Close any open drawers/overlays — old cluster's resources don't exist on the new one
       setSelectedResource(null)
@@ -943,6 +996,7 @@ function AppInner() {
     })
 
     return {
+      ...displayedTopology,
       nodes: filteredNodes,
       edges: filteredEdges,
     }
@@ -1146,6 +1200,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 +1239,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 +1281,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 +1575,9 @@ function AppInner() {
           />
         )}
 
+        {/* Compare two resources of the same kind side-by-side */}
+        {mainView === 'compare' && <CompareViewRoute />}
+
         </ErrorBoundary>
       </div>}
 
@@ -1584,6 +1686,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'
@@ -139,6 +140,9 @@ export interface WorkloadCount {
 export interface DashboardMetrics {
   cpu?: MetricSummary
   memory?: MetricSummary
+  // When false, only requests/capacity are meaningful — live usage (from
+  // metrics-server) is unavailable and usage fields are zero.
+  usageAvailable: boolean
 }
 
 export interface MetricSummary {
@@ -890,7 +894,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 +903,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 +1224,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 +1253,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 +1323,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 +1459,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
 // ============================================================================
@@ -2873,6 +3029,9 @@ export interface DiagInformerSyncStatus {
   synced: boolean
   syncedAt?: string
   items: number
+  lastError?: string
+  lastErrorAt?: string
+  forbiddenSeen?: boolean
 }
 
 export interface DiagCacheSyncStatus {
@@ -2889,6 +3048,31 @@ export interface DiagCacheSyncStatus {
   promotedKinds?: string[]
 }
 
+export interface DiagSampleWindow {
+  count: number
+  last: number
+  min: number
+  p50: number
+  p95: number
+  p99: number
+  max: number
+}
+
+export interface DiagPerfSnapshot {
+  topology: {
+    totalBuilds: number
+    durationUs: DiagSampleWindow
+    nodeCount: DiagSampleWindow
+    edgeCount: DiagSampleWindow
+    payloadBytes: DiagSampleWindow
+    estimatedNodes: DiagSampleWindow
+  }
+  sse: {
+    totalBroadcasts: number
+    totalDrops: number
+  }
+}
+
 export interface DiagnosticsSnapshot {
   timestamp: string
   radarVersion: string
@@ -2983,6 +3167,7 @@ export interface DiagnosticsSnapshot {
   sse?: {
     connectedClients: number
   }
+  perf?: DiagPerfSnapshot
   runtime?: {
     heapMB: number
     heapObjectsK: number
@@ -2998,6 +3183,7 @@ export interface DiagnosticsSnapshot {
     debugEvents: boolean
     mcpEnabled: boolean
     hasPrometheusURL: boolean
+    hasPrometheusHeaders: boolean
   }
   recentErrors?: DiagErrorEntry[]
   totalErrorsRecorded?: number