@skyhook-io/radar-app 1.8.5 → 1.8.6

package/package.json

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

@@ -1721,6 +1721,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
           {!showNavRail && (
           <button
             onClick={() => setShowCommandPalette(true)}
+            aria-label="Open command palette"
             className="hidden lg:flex items-center gap-2 h-7 px-2.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
           >
             <Search className="w-3.5 h-3.5" />
@@ -1742,6 +1743,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
             <Tooltip content="Open local terminal">
             <button
               onClick={() => openLocalTerminal()}
+              aria-label="Open local terminal"
               className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
             >
               <SquareTerminal className="w-4 h-4" />
@@ -1769,6 +1771,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
               <Tooltip content="Keyboard shortcuts (?)">
               <button
                 onClick={() => setShowHelp(true)}
+                aria-label="Show keyboard shortcuts"
                 className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
               >
                 <HelpCircle className="w-4 h-4" />
@@ -1777,6 +1780,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
               <Tooltip content="Report a bug / Diagnostics">
               <button
                 onClick={() => setShowDiagnostics(true)}
+                aria-label="Open diagnostics"
                 className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
               >
                 <Bug className="w-4 h-4" />
@@ -2406,12 +2410,12 @@ function FloatingButtons({ showHelp, showCommandPalette, showDiagnostics, onHelp
   return (
     <div className={`fixed ${bottom} right-4 z-40 flex items-center gap-1.5`}>
       <Tooltip content="Report bug / Diagnostics" position="top">
-        <button onClick={onBugReport} className={btnClass}>
+        <button onClick={onBugReport} aria-label="Open diagnostics" className={btnClass}>
           <Bug className="w-3.5 h-3.5" />
         </button>
       </Tooltip>
       <Tooltip content="Keyboard shortcuts (?)" position="top">
-        <button onClick={onHelp} className={btnClass}>
+        <button onClick={onHelp} aria-label="Show keyboard shortcuts" className={btnClass}>
           ?
         </button>
       </Tooltip>
@@ -2563,6 +2567,7 @@ function GitHubStarButton() {
         target="_blank"
         rel="noopener noreferrer"
         onClick={handleClick}
+        aria-label={starred ? 'Open Radar on GitHub' : 'Star Radar on GitHub'}
         className="flex items-center gap-1.5 h-7 px-2 rounded-md transition-colors bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary"
       >
         <svg className="w-4 h-4" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
@@ -2618,6 +2623,7 @@ function ThemeToggle() {
     <Tooltip content={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}>
     <button
       onClick={toggleTheme}
+      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
       className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
     >
       {theme === 'dark' ? (

package/src/api/client.metrics.test.ts

@@ -0,0 +1,106 @@
+import { describe, expect, it } from 'vitest'
+import {
+  ApiError,
+  getVisibleLiveMetrics,
+  isMetricsUnavailableError,
+  isLiveMetricsUnavailable,
+  normalizeNodeMetricsHistory,
+  normalizePodMetricsHistory,
+  shouldFetchLiveMetrics,
+} from './client'
+
+describe('metrics unavailable classification', () => {
+  it('only treats metrics-shaped API failures as metrics unavailable', () => {
+    expect(isMetricsUnavailableError(new ApiError('Node metrics not found (metrics-server may not be installed)', 404))).toBe(true)
+    expect(isMetricsUnavailableError(new ApiError('the server could not find the requested resource (get nodes.metrics.k8s.io)', 500))).toBe(true)
+    expect(isMetricsUnavailableError(new ApiError('failed to get node metrics: the server could not find the requested resource', 500))).toBe(true)
+    expect(isMetricsUnavailableError(new ApiError('the server is currently unable to handle the request (get nodes.metrics.k8s.io)', 500))).toBe(true)
+    expect(isMetricsUnavailableError(new ApiError('the server could not find the requested resource', 500))).toBe(false)
+    expect(isMetricsUnavailableError(new ApiError('no access to nodes', 403))).toBe(false)
+    expect(isMetricsUnavailableError(new ApiError('metrics-server forbidden', 500))).toBe(false)
+    expect(isMetricsUnavailableError(new ApiError('database unavailable', 500))).toBe(false)
+  })
+
+  it('uses the server-owned unavailable flag for history responses', () => {
+    const podHistory = normalizePodMetricsHistory({
+      namespace: 'default',
+      name: 'api',
+      containers: [],
+      metricsUnavailable: true,
+      collectionError: 'the server could not find the requested resource (get pods.metrics.k8s.io)',
+      rawCollectionError: 'the server could not find the requested resource',
+      metricsUnavailableDiagnosis: 'The v1beta1.metrics.k8s.io APIService is not registered. Install metrics-server or restore that APIService.',
+    })
+    expect(podHistory.collectionError).toBeUndefined()
+    expect(podHistory.rawCollectionError).toBeUndefined()
+    expect(podHistory.metricsUnavailable).toBe(true)
+    expect(podHistory.metricsUnavailableReason).toBe('the server could not find the requested resource')
+    expect(podHistory.metricsUnavailableDiagnosis).toBe('The v1beta1.metrics.k8s.io APIService is not registered. Install metrics-server or restore that APIService.')
+
+    const nodeHistory = normalizeNodeMetricsHistory({
+      name: 'kind-worker',
+      dataPoints: [],
+      metricsUnavailable: true,
+      collectionError: 'Node metrics not found (metrics-server may not be installed)',
+      rawCollectionError: 'the server could not find the requested resource',
+      metricsUnavailableDiagnosis: 'The v1beta1.metrics.k8s.io APIService is not Available (FailedDiscoveryCheck). Check the metrics-server Service, endpoints, and API aggregation/TLS configuration.',
+    })
+    expect(nodeHistory.collectionError).toBeUndefined()
+    expect(nodeHistory.rawCollectionError).toBeUndefined()
+    expect(nodeHistory.metricsUnavailable).toBe(true)
+    expect(nodeHistory.metricsUnavailableReason).toBe('the server could not find the requested resource')
+    expect(nodeHistory.metricsUnavailableDiagnosis).toBe('The v1beta1.metrics.k8s.io APIService is not Available (FailedDiscoveryCheck). Check the metrics-server Service, endpoints, and API aggregation/TLS configuration.')
+  })
+
+  it('does not infer history unavailability from collection-error copy', () => {
+    const history = normalizeNodeMetricsHistory({
+      name: 'kind-worker',
+      dataPoints: [],
+      collectionError: 'Node metrics not found (metrics-server may not be installed)',
+      rawCollectionError: 'the server could not find the requested resource',
+    })
+    expect(history.collectionError).toBe('Node metrics not found (metrics-server may not be installed)')
+    expect(history.rawCollectionError).toBe('the server could not find the requested resource')
+    expect(history.metricsUnavailable).toBeUndefined()
+    expect(history.metricsUnavailableReason).toBeUndefined()
+  })
+
+  it('keeps non-metrics collection errors visible', () => {
+    const history = normalizeNodeMetricsHistory({
+      name: 'kind-worker',
+      dataPoints: [],
+      collectionError: 'forbidden: no access to nodes',
+    })
+    expect(history.collectionError).toBe('forbidden: no access to nodes')
+    expect(history.metricsUnavailable).toBeUndefined()
+  })
+
+  it('keeps generic not-found collection errors visible without a metrics API signal', () => {
+    const history = normalizeNodeMetricsHistory({
+      name: 'kind-worker',
+      dataPoints: [],
+      collectionError: 'the server could not find the requested resource',
+    })
+    expect(history.collectionError).toBe('the server could not find the requested resource')
+    expect(history.metricsUnavailable).toBeUndefined()
+  })
+
+  it('waits for history classification before live metrics fetches', () => {
+    expect(shouldFetchLiveMetrics(false, false)).toBe(false)
+    expect(shouldFetchLiveMetrics(true, false)).toBe(true)
+    expect(shouldFetchLiveMetrics(true, true)).toBe(false)
+  })
+
+  it('does not expose cached live metrics while the live query is disabled', () => {
+    const cachedMetrics = { usage: { cpu: '10m', memory: '20Mi' } }
+    expect(getVisibleLiveMetrics(false, false, cachedMetrics)).toBeUndefined()
+    expect(getVisibleLiveMetrics(true, true, cachedMetrics)).toBeUndefined()
+    expect(getVisibleLiveMetrics(true, false, cachedMetrics)).toBe(cachedMetrics)
+  })
+
+  it('treats null live metrics as unavailable only after live fetch is enabled', () => {
+    expect(isLiveMetricsUnavailable(false, null)).toBe(false)
+    expect(isLiveMetricsUnavailable(true, null)).toBe(true)
+    expect(isLiveMetricsUnavailable(true, undefined)).toBe(false)
+  })
+})

package/src/api/client.ts

@@ -103,6 +103,47 @@ export function isForbiddenError(error: unknown): boolean {
   return error instanceof ApiError && error.status === 403
 }
 
+const METRICS_API_GROUP_TOKENS = ['metrics', 'k8s', 'io'] as const
+
+function mentionsMetricsAPIGroup(message: string): boolean {
+  const tokens = message.split(/[^a-z0-9]+/).filter(Boolean)
+  return tokens.some((token, index) => (
+    token === METRICS_API_GROUP_TOKENS[0] &&
+    tokens[index + 1] === METRICS_API_GROUP_TOKENS[1] &&
+    tokens[index + 2] === METRICS_API_GROUP_TOKENS[2]
+  ))
+}
+
+function hasMetricsUnavailablePhrase(message: string): boolean {
+  return (
+    message.includes('may not be installed') ||
+    message.includes('not found') ||
+    message.includes('could not find the requested resource') ||
+    message.includes('no matches for kind') ||
+    message.includes('no resource matches') ||
+    message.includes('no metrics known') ||
+    message.includes('not available') ||
+    message.includes('unable to fetch metrics') ||
+    message.includes('currently unable to handle the request')
+  )
+}
+
+export function isMetricsUnavailableError(error: unknown): boolean {
+  if (!(error instanceof ApiError)) return false
+  if (error.status !== 404 && error.status !== 500) return false
+  return [error.message, error.data?.error].some((message) => {
+    if (typeof message !== 'string') return false
+    const normalized = message.toLowerCase()
+    const hasMetricsSignal = (
+      normalized.includes('metrics-server') ||
+      mentionsMetricsAPIGroup(normalized) ||
+      normalized.includes('pod metrics') ||
+      normalized.includes('node metrics')
+    )
+    return hasMetricsSignal && hasMetricsUnavailablePhrase(normalized)
+  })
+}
+
 export async function fetchJSON<T>(path: string, signal?: AbortSignal): Promise<T> {
   const response = await apiFetch(`${getApiBase()}${path}`, signal ? { signal } : undefined)
   if (!response.ok) {
@@ -1253,25 +1294,44 @@ export interface NodeMetrics {
   }
 }
 
+async function fetchMetricsOrNull<T>(path: string): Promise<T | null> {
+  try {
+    return await fetchJSON<T>(path)
+  } catch (error) {
+    if (isMetricsUnavailableError(error)) return null
+    throw error
+  }
+}
+
+function retryMetricsQuery(failureCount: number, error: unknown): boolean {
+  return !isMetricsUnavailableError(error) && failureCount < 1
+}
+
 // Fetch metrics for a specific pod
-export function usePodMetrics(namespace: string, podName: string) {
-  return useQuery<PodMetrics>({
+export function usePodMetrics(namespace: string, podName: string, options?: { enabled?: boolean }) {
+  return useQuery<PodMetrics | null>({
     queryKey: ['pod-metrics', namespace, podName],
-    queryFn: () => fetchJSON(`/metrics/pods/${namespace}/${podName}`),
-    enabled: Boolean(namespace && podName),
-    staleTime: 15000, // Metrics are fresh for 15 seconds
-    refetchInterval: 30000, // Refresh every 30 seconds
+    queryFn: () => fetchMetricsOrNull<PodMetrics>(`/metrics/pods/${namespace}/${podName}`),
+    enabled: Boolean(namespace && podName) && (options?.enabled ?? true),
+    staleTime: 15000,
+    refetchInterval: 30000,
+    refetchOnMount: 'always',
+    refetchOnReconnect: 'always',
+    retry: retryMetricsQuery,
   })
 }
 
 // Fetch metrics for a specific node
-export function useNodeMetrics(nodeName: string) {
-  return useQuery<NodeMetrics>({
+export function useNodeMetrics(nodeName: string, options?: { enabled?: boolean }) {
+  return useQuery<NodeMetrics | null>({
     queryKey: ['node-metrics', nodeName],
-    queryFn: () => fetchJSON(`/metrics/nodes/${nodeName}`),
-    enabled: Boolean(nodeName),
+    queryFn: () => fetchMetricsOrNull<NodeMetrics>(`/metrics/nodes/${nodeName}`),
+    enabled: Boolean(nodeName) && (options?.enabled ?? true),
     staleTime: 15000,
     refetchInterval: 30000,
+    refetchOnMount: 'always',
+    refetchOnReconnect: 'always',
+    retry: retryMetricsQuery,
   })
 }
 
@@ -1295,19 +1355,57 @@ export interface PodMetricsHistory {
   name: string
   containers: ContainerMetricsHistory[]
   collectionError?: string
+  rawCollectionError?: string
+  metricsUnavailableDiagnosis?: string
+  metricsUnavailable?: boolean
+  metricsUnavailableReason?: string
 }
 
 export interface NodeMetricsHistory {
   name: string
   dataPoints: MetricsDataPoint[]
   collectionError?: string
+  rawCollectionError?: string
+  metricsUnavailableDiagnosis?: string
+  metricsUnavailable?: boolean
+  metricsUnavailableReason?: string
+}
+
+function withoutCollectionError<T extends { collectionError?: string; rawCollectionError?: string }>(history: T): T {
+  const next = { ...history }
+  delete next.collectionError
+  delete next.rawCollectionError
+  return next
+}
+
+export function normalizePodMetricsHistory(history: PodMetricsHistory): PodMetricsHistory {
+  if (history.metricsUnavailable !== true) return history
+  return { ...withoutCollectionError(history), metricsUnavailable: true, metricsUnavailableReason: history.rawCollectionError || history.collectionError }
+}
+
+export function normalizeNodeMetricsHistory(history: NodeMetricsHistory): NodeMetricsHistory {
+  if (history.metricsUnavailable !== true) return history
+  return { ...withoutCollectionError(history), metricsUnavailable: true, metricsUnavailableReason: history.rawCollectionError || history.collectionError }
+}
+
+export function shouldFetchLiveMetrics(historySettled: boolean, metricsUnavailable: boolean): boolean {
+  return historySettled && !metricsUnavailable
+}
+
+export function isLiveMetricsUnavailable(liveMetricsEnabled: boolean, metrics: unknown): boolean {
+  return liveMetricsEnabled && metrics === null
+}
+
+export function getVisibleLiveMetrics<T>(liveMetricsEnabled: boolean, metricsUnavailable: boolean, metrics: T | null | undefined): T | undefined {
+  if (!liveMetricsEnabled || metricsUnavailable) return undefined
+  return metrics ?? undefined
 }
 
 // Fetch historical metrics for a pod (last ~1 hour)
 export function usePodMetricsHistory(namespace: string, podName: string) {
   return useQuery<PodMetricsHistory>({
     queryKey: ['pod-metrics-history', namespace, podName],
-    queryFn: () => fetchJSON(`/metrics/pods/${namespace}/${podName}/history`),
+    queryFn: async () => normalizePodMetricsHistory(await fetchJSON<PodMetricsHistory>(`/metrics/pods/${namespace}/${podName}/history`)),
     enabled: Boolean(namespace && podName),
     staleTime: 25000, // Slightly less than poll interval
     refetchInterval: 30000, // Match the backend poll interval
@@ -1318,7 +1416,7 @@ export function usePodMetricsHistory(namespace: string, podName: string) {
 export function useNodeMetricsHistory(nodeName: string) {
   return useQuery<NodeMetricsHistory>({
     queryKey: ['node-metrics-history', nodeName],
-    queryFn: () => fetchJSON(`/metrics/nodes/${nodeName}/history`),
+    queryFn: async () => normalizeNodeMetricsHistory(await fetchJSON<NodeMetricsHistory>(`/metrics/nodes/${nodeName}/history`)),
     enabled: Boolean(nodeName),
     staleTime: 25000,
     refetchInterval: 30000,
@@ -1555,9 +1653,12 @@ export function useAutoPromConnect(): void {
     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 => {
+      apiFetch(`${getApiBase()}/prometheus/connect?optional=true`, { method: 'POST' })
+        .then(async resp => {
           if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+          const nextStatus = await resp.json() as PrometheusStatus
+          queryClient.setQueryData(['prometheus-status'], nextStatus)
+          if (!nextStatus.connected) throw new Error(nextStatus.error || 'Prometheus unavailable')
           queryClient.invalidateQueries({ queryKey: ['prometheus-status'] })
         })
         .catch(() => {

package/src/components/applications/ApplicationsView.tsx

@@ -83,7 +83,14 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
   // the page header from vanishing while loading / on error, the wrapper shows
   // the same header bar above those states. (Keep title + description in sync
   // with ApplicationsList's PageHeader.)
-  if (query.isLoading || query.error) {
+  if (query.isLoading) {
+    return (
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        <ApplicationsList apps={[]} onSelect={selectApp} headerActions={freshness} loading />
+      </div>
+    )
+  }
+  if (query.error) {
     return (
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
         <div className="shrink-0 border-b border-theme-border px-4 py-4">
@@ -93,11 +100,7 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
             description="Deployable software in this cluster — your services, workers, and jobs, grouped by app/release evidence."
           />
         </div>
-        {query.isLoading ? (
-          <CenteredEmpty icon={Boxes} headline="Loading applications…" />
-        ) : (
-          <CenteredEmpty tone="filtered" icon={Boxes} headline="Failed to load applications" body={(query.error as Error).message} />
-        )}
+        <CenteredEmpty tone="filtered" icon={Boxes} headline="Failed to load applications" body={(query.error as Error).message} />
       </div>
     )
   }

package/src/components/home/HomeView.tsx

@@ -359,11 +359,8 @@ function ProblemsPanel({
               <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)
-                    : ''
+                  const age = issue.first_seen ? formatCompactAge(issue.first_seen) : ''
+                  const startedAtDeploy = issue.issue_timing === 'started_at_resource_creation'
 
                   return (
                     <button
@@ -381,7 +378,12 @@ function ProblemsPanel({
                         <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>}
+                          {(age || startedAtDeploy) && (
+                            <span className="ml-auto flex shrink-0 items-center gap-1">
+                              {age && <span className="text-[10px] text-theme-text-tertiary tabular-nums">{age}</span>}
+                              {startedAtDeploy && <span className="badge-sm text-[10px] text-theme-text-secondary">since deploy</span>}
+                            </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>

package/src/components/resources/renderers/NodeRenderer.tsx

@@ -1,6 +1,6 @@
 import { NodeRenderer as BaseNodeRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/NodeRenderer'
 import { useNavigate } from 'react-router-dom'
-import { useNodeMetrics, useNodeMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { getVisibleLiveMetrics, isLiveMetricsUnavailable, shouldFetchLiveMetrics, useNodeMetrics, useNodeMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
 import { serializeColumnFilters } from '../resource-utils'
 
 interface NodeRendererProps {
@@ -13,8 +13,13 @@ export function NodeRenderer({ data, relationships }: NodeRendererProps) {
   const nodeName = data.metadata?.name
 
   // Fetch node metrics
-  const { data: metrics } = useNodeMetrics(nodeName)
-  const { data: metricsHistory } = useNodeMetricsHistory(nodeName)
+  const metricsHistoryQuery = useNodeMetricsHistory(nodeName)
+  const { data: metricsHistory } = metricsHistoryQuery
+  const historyMetricsUnavailable = metricsHistory?.metricsUnavailable === true
+  const liveMetricsEnabled = shouldFetchLiveMetrics(metricsHistoryQuery.isFetched || metricsHistoryQuery.isError, historyMetricsUnavailable)
+  const { data: metrics } = useNodeMetrics(nodeName, { enabled: liveMetricsEnabled })
+  const metricsUnavailable = historyMetricsUnavailable || isLiveMetricsUnavailable(liveMetricsEnabled, metrics)
+  const visibleMetrics = getVisibleLiveMetrics(liveMetricsEnabled, metricsUnavailable, metrics)
 
   // Determine whether to hide metrics-server section (Prometheus has data)
   const { data: prometheusStatus } = usePrometheusStatus()
@@ -36,8 +41,9 @@ export function NodeRenderer({ data, relationships }: NodeRendererProps) {
         params.set('filters', serializeColumnFilters({ node: [nodeName] }))
         navigate(`/resources/pods?${params.toString()}`)
       } : undefined}
-      metrics={metrics}
+      metrics={visibleMetrics}
       metricsHistory={metricsHistory}
+      metricsUnavailable={metricsUnavailable}
       hideMetricsServer={hideMetricsServer}
     />
   )

package/src/components/resources/renderers/PodRenderer.tsx

@@ -3,7 +3,7 @@ import type { CopyHandler } from '@skyhook-io/k8s-ui/components/ui/drawer-compon
 import type { ResolvedEnvFrom } from '@skyhook-io/k8s-ui'
 import { useOpenTerminal, useOpenLogs } from '../../dock'
 import { useNamespacedCapabilities, useIsLocalDeployment } from '../../../contexts/CapabilitiesContext'
-import { usePodMetrics, usePodMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { getVisibleLiveMetrics, isLiveMetricsUnavailable, shouldFetchLiveMetrics, usePodMetrics, usePodMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
 import { useRBACSubject } from '../../../api/rbac'
 import { PortForwardInlineButton } from '../../portforward/PortForwardButton'
 import { ImageFilesystemModal } from '../ImageFilesystemModal'
@@ -34,8 +34,13 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
   const showPortForward = canPortForward || !isLocal
 
   // Metrics
-  const { data: metrics } = usePodMetrics(namespace, podName)
-  const { data: metricsHistory } = usePodMetricsHistory(namespace, podName)
+  const metricsHistoryQuery = usePodMetricsHistory(namespace, podName)
+  const { data: metricsHistory } = metricsHistoryQuery
+  const historyMetricsUnavailable = metricsHistory?.metricsUnavailable === true
+  const liveMetricsEnabled = shouldFetchLiveMetrics(metricsHistoryQuery.isFetched || metricsHistoryQuery.isError, historyMetricsUnavailable)
+  const { data: metrics } = usePodMetrics(namespace, podName, { enabled: liveMetricsEnabled })
+  const metricsUnavailable = historyMetricsUnavailable || isLiveMetricsUnavailable(liveMetricsEnabled, metrics)
+  const visibleMetrics = getVisibleLiveMetrics(liveMetricsEnabled, metricsUnavailable, metrics)
 
   // Hide metrics-server section when Prometheus has CPU data
   const { data: prometheusStatus } = usePrometheusStatus()
@@ -82,8 +87,9 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
           disabled={disabled}
         />
       )}
-      metrics={metrics}
+      metrics={visibleMetrics}
       metricsHistory={metricsHistory}
+      metricsUnavailable={metricsUnavailable}
       hideMetricsServer={hideMetricsServer}
       renderImageBrowser={({ image, namespace: ns, podName: pod, pullSecrets, onClose, onSwitchToPodFiles }) => (
         <ImageFilesystemModal