@skyhook-io/k8s-ui 1.8.8 → 1.8.10

package/src/components/issues/issues.test.ts

@@ -1,8 +1,8 @@
-import { describe, it, expect } from 'vitest'
+import { afterEach, describe, it, expect, vi } from 'vitest'
 import { createElement } from 'react'
 import { renderToString } from 'react-dom/server'
 import { compareIssues, subjectRef, memberRef, normalizeImagePullMessage, issueMessageParts, type Issue } from './types'
-import { categoryLabel, groupLabel, groupBadgeClass } from './severity'
+import { categoryLabel, groupBadgeClass, groupLabel } from './severity'
 import { IssueRow } from './IssuesView'
 
 const base: Issue = {
@@ -18,6 +18,10 @@ const base: Issue = {
 }
 const mk = (o: Partial<Issue>): Issue => ({ ...base, ...o })
 
+afterEach(() => {
+  vi.useRealTimers()
+})
+
 describe('compareIssues', () => {
   it('orders critical before warning regardless of observed age', () => {
     const warn = mk({ id: 'w', severity: 'warning', first_seen: '2026-05-01T00:00:00Z' }) // newer
@@ -62,8 +66,45 @@ describe('category/group label fallbacks', () => {
     expect(groupLabel('runtime')).toBe('Runtime')
     expect(groupLabel('some_future_group')).toBe('Some future group')
   })
-  it('groupBadgeClass falls back to a non-empty neutral class for an unknown group', () => {
-    expect(groupBadgeClass('totally_unknown_group')).toBeTruthy()
+  it('keeps ordinary group chips neutral and emphasizes control-plane/unknown groups', () => {
+    expect(groupBadgeClass('runtime')).toContain('text-theme-text-secondary')
+    expect(groupBadgeClass('runtime')).not.toContain('ring-theme-border-light')
+    expect(groupBadgeClass('control_plane')).toContain('text-theme-text-primary')
+    expect(groupBadgeClass('control_plane')).toContain('ring-theme-border-light')
+    expect(groupBadgeClass('unknown')).toContain('ring-theme-border-light')
+    expect(groupBadgeClass('some_future_group')).toContain('text-theme-text-secondary')
+    expect(groupBadgeClass('some_future_group')).not.toContain('ring-theme-border-light')
+  })
+})
+
+describe('IssueRow', () => {
+  it('keeps relative age visible and adds since-deploy as a secondary tag', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-30T12:00:00Z'))
+
+    const html = renderToString(createElement(IssueRow, {
+      issue: mk({
+        id: 'baseline',
+        first_seen: '2026-06-28T12:00:00Z',
+        issue_timing: 'started_at_resource_creation',
+      }),
+      open: false,
+      onToggle: () => undefined,
+    }))
+
+    expect(html).toContain('2d')
+    expect(html).toContain('since deploy')
+  })
+
+  it('uses the category-group chip class in the queue row', () => {
+    const html = renderToString(createElement(IssueRow, {
+      issue: mk({ category_group: 'control_plane' }),
+      open: false,
+      onToggle: () => undefined,
+    }))
+
+    expect(html).toContain('Control plane')
+    expect(html).toContain(groupBadgeClass('control_plane'))
   })
 })
 

package/src/components/issues/severity.ts

@@ -1,11 +1,28 @@
 import type { IssueSeverity } from './types';
 import { BADGE_SEVERITY_COLORS as sev } from '../ui/Badge';
+import { NEUTRAL_CHIP_CLASS } from '../ui/CardSection';
+import {
+  TONE_HEADER_BAND_CLASS,
+  TONE_RAIL_CLASS,
+  TONE_SOLID_CLASS,
+  TONE_TEXT_CLASS,
+  type SeverityTone,
+} from '../ui/severity-tone';
 
 // Visual language for the 2-tier Issues severity. critical = red, warning =
 // amber. Issues and Checks are different severity axes but must read as one
-// product — both pull from the canonical Badge severity tones
-// (BADGE_SEVERITY_COLORS), so their pills match each other and every status
-// badge elsewhere.
+// product, so the color strings are shared via the tone module; here we only map
+// each tier onto its tone. The pill still pulls from the canonical Badge tones
+// so it matches every status badge elsewhere.
+const ISSUE_SEVERITY_TONE: Record<IssueSeverity, SeverityTone> = {
+  critical: 'red',
+  warning: 'amber',
+};
+
+const byTone = <T,>(toneMap: Record<SeverityTone, T>): Record<IssueSeverity, T> => ({
+  critical: toneMap[ISSUE_SEVERITY_TONE.critical],
+  warning: toneMap[ISSUE_SEVERITY_TONE.warning],
+});
 
 export const ISSUE_SEVERITY_LABEL: Record<IssueSeverity, string> = {
   critical: 'Critical',
@@ -18,39 +35,17 @@ export const ISSUE_SEVERITY_BADGE_CLASS: Record<IssueSeverity, string> = {
   warning: sev.warning,
 };
 
-// Solid fill — dots + the proportional distribution bar segments.
-export const ISSUE_SEVERITY_FILL_CLASS: Record<IssueSeverity, string> = {
-  critical: 'bg-red-500',
-  warning: 'bg-amber-500',
-};
+export const ISSUE_SEVERITY_TEXT_CLASS = byTone(TONE_TEXT_CLASS);
+export const ISSUE_SEVERITY_RAIL_CLASS = byTone(TONE_RAIL_CLASS);
+export const ISSUE_SEVERITY_SOLID_CLASS = byTone(TONE_SOLID_CLASS);
+export const ISSUE_SEVERITY_HEADER_BAND_CLASS = byTone(TONE_HEADER_BAND_CLASS);
 
-export const ISSUE_SEVERITY_TEXT_CLASS: Record<IssueSeverity, string> = {
-  critical: 'text-red-600 dark:text-red-400',
-  warning: 'text-amber-600 dark:text-amber-400',
-};
+const GROUP_CHIP_EMPHASIS_CLASS = 'inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-semibold leading-tight bg-theme-elevated text-theme-text-primary ring-1 ring-theme-border-light';
 
-// Left accent rail on a queue row — the scan-down severity cue.
-export const ISSUE_SEVERITY_RAIL_CLASS: Record<IssueSeverity, string> = {
-  critical: 'border-l-red-500 hover:bg-red-50/40 dark:hover:bg-red-950/20',
-  warning: 'border-l-amber-500 hover:bg-amber-50/30 dark:hover:bg-amber-950/15',
-};
-
-// Category-group accent — the quiet classification tag (severity is the loud
-// one). One hue per group; unknown/unmapped falls back to a neutral theme tag.
-const GROUP_BADGE_CLASS: Record<string, string> = {
-  scheduling: 'bg-violet-50 text-violet-700 ring-1 ring-violet-200 dark:bg-violet-950/40 dark:text-violet-300 dark:ring-violet-900',
-  startup: 'bg-sky-50 text-sky-700 ring-1 ring-sky-200 dark:bg-sky-950/40 dark:text-sky-300 dark:ring-sky-900',
-  runtime: 'bg-rose-50 text-rose-700 ring-1 ring-rose-200 dark:bg-rose-950/40 dark:text-rose-300 dark:ring-rose-900',
-  configuration: 'bg-teal-50 text-teal-700 ring-1 ring-teal-200 dark:bg-teal-950/40 dark:text-teal-300 dark:ring-teal-900',
-  networking: 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-950/40 dark:text-indigo-300 dark:ring-indigo-900',
-  storage: 'bg-cyan-50 text-cyan-700 ring-1 ring-cyan-200 dark:bg-cyan-950/40 dark:text-cyan-300 dark:ring-cyan-900',
-  scaling: 'bg-fuchsia-50 text-fuchsia-700 ring-1 ring-fuchsia-200 dark:bg-fuchsia-950/40 dark:text-fuchsia-300 dark:ring-fuchsia-900',
-  security: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:ring-amber-900',
-  control_plane: 'bg-slate-100 text-slate-600 ring-1 ring-slate-200 dark:bg-slate-800/60 dark:text-slate-300 dark:ring-slate-700',
-};
+const EMPHASIZED_GROUPS = new Set(['control_plane', 'unknown']);
 
 export function groupBadgeClass(group: string): string {
-  return GROUP_BADGE_CLASS[group] ?? 'bg-theme-elevated text-theme-text-secondary ring-1 ring-theme-border';
+  return EMPHASIZED_GROUPS.has(group) ? GROUP_CHIP_EMPHASIS_CLASS : NEUTRAL_CHIP_CLASS;
 }
 
 // Display labels. The server emits raw snake_case category/group enums (so a

package/src/components/resources/ResourcesSidebar.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import type { APIResource } from '../../types'
+import { rawCRDGroupTitle, resourceMatchesSidebarFilter, ResourcesSidebar } from './ResourcesSidebar'
+
+const sqlInstance: APIResource = {
+  group: 'sql.cnrm.cloud.google.com',
+  version: 'v1beta1',
+  kind: 'SQLInstance',
+  name: 'sqlinstances',
+  namespaced: true,
+  isCrd: true,
+  verbs: ['list'],
+}
+
+describe('ResourcesSidebar CRD group labels', () => {
+  it('keeps raw API groups available for filtering and hover recovery', () => {
+    expect(resourceMatchesSidebarFilter(sqlInstance, 'cnrm')).toBe(true)
+    expect(resourceMatchesSidebarFilter(sqlInstance, 'google')).toBe(true)
+    expect(rawCRDGroupTitle([sqlInstance])).toBe('API group: sql.cnrm.cloud.google.com')
+  })
+
+  it('renders the raw API group in the category title while keeping the friendly label visible', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[sqlInstance]}
+        resourceCounts={{ 'sql.cnrm.cloud.google.com/SQLInstance': 1 }}
+      />
+    )
+
+    expect(html).toContain('Config Connector')
+    expect(html).toContain('title="API group: sql.cnrm.cloud.google.com"')
+  })
+})

package/src/components/resources/ResourcesSidebar.tsx

@@ -92,6 +92,25 @@ const CORE_RESOURCE_TYPES = [
   { kind: 'hpas', label: 'HPAs' },
 ] as const
 
+export function resourceMatchesSidebarFilter(resource: Pick<APIResource, 'kind' | 'name' | 'group'>, term: string): boolean {
+  const normalized = term.trim().toLowerCase()
+  if (!normalized) return true
+  return resource.kind.toLowerCase().includes(normalized) ||
+    resource.name.toLowerCase().includes(normalized) ||
+    resource.group.toLowerCase().includes(normalized)
+}
+
+export function rawCRDGroupTitle(resources: Pick<APIResource, 'group' | 'isCrd'>[]): string | undefined {
+  const groups = Array.from(new Set(
+    resources
+      .filter(resource => resource.isCrd && resource.group)
+      .map(resource => resource.group)
+  )).sort()
+
+  if (groups.length === 0) return undefined
+  return groups.length === 1 ? `API group: ${groups[0]}` : `API groups: ${groups.join(', ')}`
+}
+
 // Resource type button in sidebar
 interface ResourceTypeButtonProps {
   resource: APIResource
@@ -347,12 +366,10 @@ export function ResourcesSidebar({
     return sortedCategories
       .map(category => {
         const categoryMatches = category.name.toLowerCase().includes(term)
+        const rawGroupMatches = category.resources.some((resource: APIResource) => resource.group.toLowerCase().includes(term))
         // If the group name matches, show all its resources
-        if (categoryMatches) return category
-        const matchingResources = category.visibleResources.filter((resource: any) =>
-          resource.kind.toLowerCase().includes(term) ||
-          resource.name.toLowerCase().includes(term)
-        )
+        if (categoryMatches || rawGroupMatches) return category
+        const matchingResources = category.visibleResources.filter((resource: APIResource) => resourceMatchesSidebarFilter(resource, term))
         if (matchingResources.length === 0) return null
         return {
           ...category,
@@ -550,6 +567,7 @@ export function ResourcesSidebar({
           // Dynamic categories from API
           filteredCategories.map((category) => {
             const isExpanded = effectiveExpandedCategories.has(category.name)
+            const rawGroupTitle = rawCRDGroupTitle(category.resources)
             return (
               <div key={category.name} className="mb-2">
                 <button
@@ -561,7 +579,7 @@ export function ResourcesSidebar({
                   ) : (
                     <ChevronRight className="w-3 h-3" />
                   )}
-                  <span className="flex-1 text-left">{category.name}</span>
+                  <span className="flex-1 text-left truncate" title={rawGroupTitle}>{category.name}</span>
                   {!isExpanded && (
                     <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center font-mono', category.total < 1000 ? 'w-8' : 'w-9')}>
                       {category.total}

package/src/components/resources/ResourcesView.tsx

@@ -1709,8 +1709,16 @@ function isLikelyCrossplaneMRGroup(kind: string, group: string): boolean {
   if (k === 'providerconfig' || k === 'providerconfigs') return false
   if (group.endsWith('.upbound.io')) return true
   if (group === 'kubernetes.crossplane.io' || group === 'helm.crossplane.io') return true
-  // Reserved Crossplane core groups — never MRs.
-  if (group === 'crossplane.io' || group === 'pkg.crossplane.io' || group === 'apiextensions.crossplane.io') {
+  // Reserved Crossplane core groups — never MRs. protection.crossplane.io
+  // (Usage/ClusterUsage) and ops.crossplane.io (Operations) are Crossplane v2's
+  // new core groups: lifecycle/orchestration objects, not provider resources.
+  if (
+    group === 'crossplane.io' ||
+    group === 'pkg.crossplane.io' ||
+    group === 'apiextensions.crossplane.io' ||
+    group === 'protection.crossplane.io' ||
+    group === 'ops.crossplane.io'
+  ) {
     return false
   }
   // Any other *.crossplane.io subgroup is presumed to be a provider's MR group.

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

@@ -0,0 +1,47 @@
+import { Info } from 'lucide-react'
+import { Tooltip } from '../../ui/Tooltip'
+
+interface MetricsUnavailableNoticeProps {
+  rawError?: string
+  diagnosis?: string
+}
+
+export function MetricsUnavailableNotice({ rawError, diagnosis }: MetricsUnavailableNoticeProps) {
+  return (
+    <div className="card-inner-lg text-xs text-theme-text-tertiary">
+      <div className="flex items-center gap-1.5">
+        <span className="min-w-0 leading-5">
+          Metrics unavailable. Radar cannot read metrics.k8s.io.
+        </span>
+        {rawError && (
+          <Tooltip
+            content={(
+              <span className="space-y-1">
+                <span className="block">
+                  This panel uses Kubernetes metrics.k8s.io for live CPU and memory; Prometheus data does not fill it.
+                </span>
+                <span className="block">
+                  {diagnosis || 'Check that metrics-server is installed and healthy, and that the v1beta1.metrics.k8s.io APIService is Available.'}
+                </span>
+                <span className="block">
+                  Raw error: <span className="font-mono break-words">{rawError}</span>
+                </span>
+              </span>
+            )}
+            delay={150}
+            position="left"
+          >
+            <button
+              type="button"
+              className="inline-flex shrink-0 cursor-help items-center gap-1 text-xs font-medium leading-5 text-theme-text-tertiary hover:text-theme-text-secondary"
+              aria-label="Metrics error details"
+            >
+              <Info className="h-3.5 w-3.5" />
+              <span>Details</span>
+            </button>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { NodeRenderer } from './NodeRenderer'
+
+const node = {
+  metadata: { name: 'kind-worker', labels: {} },
+  spec: {},
+  status: {
+    nodeInfo: {
+      osImage: 'Container-Optimized OS',
+      architecture: 'amd64',
+      kernelVersion: '6.1.0',
+      containerRuntimeVersion: 'containerd://1.7',
+      kubeletVersion: 'v1.33.0',
+      kubeProxyVersion: 'v1.33.0',
+    },
+    capacity: { cpu: '4', memory: '8Gi', pods: '110' },
+    allocatable: { cpu: '4', memory: '7Gi', pods: '110' },
+    conditions: [],
+  },
+}
+
+describe('NodeRenderer metrics', () => {
+  it('renders a calm unavailable state when metrics-server is absent', () => {
+    const html = renderToString(
+      <NodeRenderer
+        data={node}
+        metricsUnavailable
+        metricsHistory={{
+          dataPoints: [],
+          metricsUnavailableReason: 'the server could not find the requested resource',
+        }}
+      />,
+    )
+
+    expect(html).toContain('Resource Usage')
+    expect(html).toContain('Metrics unavailable')
+    expect(html).toContain('Radar cannot read metrics.k8s.io')
+    expect(html).toContain('Metrics error details')
+    expect(html).not.toContain('Install or repair metrics-server and its APIService')
+    expect(html).not.toContain('Metrics collection error')
+    expect(html).not.toContain('Collecting metrics data')
+  })
+
+  it('does not let stale live metrics hide an unavailable state', () => {
+    const html = renderToString(
+      <NodeRenderer
+        data={node}
+        metricsUnavailable
+        metrics={{ usage: { cpu: '100m', memory: '256Mi' }, timestamp: '2026-06-30T00:00:00Z' }}
+      />,
+    )
+
+    expect(html).toContain('Metrics unavailable')
+    expect(html).not.toContain('100m')
+    expect(html).not.toContain('Last updated')
+  })
+
+  it('keeps buffered historical charts visible under an unavailable notice', () => {
+    const html = renderToString(
+      <NodeRenderer
+        data={node}
+        metricsUnavailable
+        metricsHistory={{
+          dataPoints: [{ timestamp: '2026-06-30T00:00:00Z', cpu: 100000000, memory: 268435456 }],
+        }}
+      />,
+    )
+
+    expect(html).toContain('Metrics unavailable')
+    expect(html).toContain('CPU')
+    expect(html).toContain('Memory')
+    expect(html).not.toContain('Last updated')
+  })
+
+  it('keeps non-absence collection errors visible', () => {
+    const html = renderToString(
+      <NodeRenderer
+        data={node}
+        metricsHistory={{ dataPoints: [], collectionError: 'forbidden: no access to nodes' }}
+      />,
+    )
+
+    expect(html).toContain('Metrics collection error')
+    expect(html).toContain('forbidden: no access to nodes')
+  })
+
+  it('warns about non-absence collection errors even when historical samples exist', () => {
+    const html = renderToString(
+      <NodeRenderer
+        data={node}
+        metricsHistory={{
+          collectionError: 'forbidden: no access to nodes',
+          dataPoints: [{ timestamp: '2026-06-30T00:00:00Z', cpu: 100000000, memory: 268435456 }],
+        }}
+      />,
+    )
+
+    expect(html).toContain('Metrics collection error')
+    expect(html).toContain('forbidden: no access to nodes')
+    expect(html).toContain('CPU')
+  })
+})

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

@@ -5,13 +5,15 @@ import { MetricsChart } from '../../ui/MetricsChart'
 import { formatMemoryString } from '../../../utils/format'
 import { getExtendedCapacityRows } from '../../../utils/extended-resources'
 import type { MetricsDataPoint } from '../../../types/core'
+import { MetricsUnavailableNotice } from './MetricsUnavailableNotice'
 
 interface NodeRendererProps {
   data: any
   relationships?: { pods?: any[] }
   onViewPods?: () => void
   metrics?: { usage?: { cpu: string; memory: string }; timestamp?: string }
-  metricsHistory?: { dataPoints?: MetricsDataPoint[]; collectionError?: string }
+  metricsHistory?: { dataPoints?: MetricsDataPoint[]; collectionError?: string; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
+  metricsUnavailable?: boolean
   hideMetricsServer?: boolean
 }
 
@@ -59,7 +61,7 @@ function getNodeProblems(data: any): string[] {
   return problems
 }
 
-export function NodeRenderer({ data, relationships, onViewPods, metrics, metricsHistory, hideMetricsServer }: NodeRendererProps) {
+export function NodeRenderer({ data, relationships, onViewPods, metrics, metricsHistory, metricsUnavailable, hideMetricsServer }: NodeRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const metadata = data.metadata || {}
@@ -74,6 +76,9 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
   const problems = getNodeProblems(data)
   const hasProblems = problems.length > 0
   const isCordoned = !!spec.unschedulable
+  const showMetricsUnavailable = !!metricsUnavailable && !metricsHistory?.collectionError
+  const hasMetricsHistory = !!metricsHistory?.dataPoints?.length
+  const currentMetrics = metricsUnavailable ? undefined : metrics
 
   // Extract platform info from labels
   const instanceType = labels['node.kubernetes.io/instance-type']
@@ -122,13 +127,13 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
               label: 'CPU',
               capacity: capacity.cpu,
               allocatable: allocatable.cpu,
-              inUse: metrics?.usage?.cpu,
+              inUse: currentMetrics?.usage?.cpu,
             },
             {
               label: 'Memory',
               capacity: formatMemory(capacity.memory),
               allocatable: formatMemory(allocatable.memory),
-              inUse: metrics?.usage?.memory ? formatMemory(metrics.usage.memory) : undefined,
+              inUse: currentMetrics?.usage?.memory ? formatMemory(currentMetrics.usage.memory) : undefined,
             },
             {
               label: 'Pods',
@@ -182,15 +187,18 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
       </Section>
 
       {/* Resource Usage (from metrics-server) — hidden when Prometheus has CPU/memory data */}
-      {!hideMetricsServer && (metrics?.usage || metricsHistory?.dataPoints?.length || metricsHistory?.collectionError) && (
+      {!hideMetricsServer && (currentMetrics?.usage || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable) && (
         <Section title="Resource Usage" icon={Activity} defaultExpanded>
-          {metricsHistory?.collectionError && !metricsHistory?.dataPoints?.length && (
+          {showMetricsUnavailable && (
+            <MetricsUnavailableNotice rawError={metricsHistory?.metricsUnavailableReason} diagnosis={metricsHistory?.metricsUnavailableDiagnosis} />
+          )}
+          {metricsHistory?.collectionError && (
             <div className="mb-3 rounded-lg border border-yellow-500/30 bg-yellow-500/5 px-3 py-2 text-xs text-yellow-400">
               <span className="font-medium">Metrics collection error:</span>{' '}
               <span className="break-all">{metricsHistory.collectionError}</span>
             </div>
           )}
-          {metricsHistory?.dataPoints && metricsHistory.dataPoints.length > 0 ? (
+          {hasMetricsHistory && metricsHistory?.dataPoints ? (
             <div className="space-y-4">
               {/* CPU Usage with Chart */}
               <div className="card-inner-lg">
@@ -224,7 +232,7 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
                 />
               </div>
             </div>
-          ) : metrics?.usage ? (
+          ) : showMetricsUnavailable ? null : currentMetrics?.usage ? (
             /* Fallback to simple display if no history yet */
             <div className="space-y-3">
               <div className="card-inner-lg">
@@ -232,7 +240,7 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
                   <span className="text-sm font-medium text-theme-text-primary">CPU</span>
                 </div>
                 <div className="flex items-baseline gap-2">
-                  <span className="text-lg font-medium text-blue-400">{metrics.usage.cpu}</span>
+                  <span className="text-lg font-medium text-blue-400">{currentMetrics.usage.cpu}</span>
                   <span className="text-sm text-theme-text-tertiary">
                     / {allocatable.cpu || capacity.cpu || '?'} allocatable
                   </span>
@@ -243,7 +251,7 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
                   <span className="text-sm font-medium text-theme-text-primary">Memory</span>
                 </div>
                 <div className="flex items-baseline gap-2">
-                  <span className="text-lg font-medium text-purple-400">{formatMemory(metrics.usage.memory)}</span>
+                  <span className="text-lg font-medium text-purple-400">{formatMemory(currentMetrics.usage.memory)}</span>
                   <span className="text-sm text-theme-text-tertiary">
                     / {formatMemory(allocatable.memory) || formatMemory(capacity.memory) || '?'} allocatable
                   </span>
@@ -253,9 +261,9 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
           ) : (
             <div className="text-xs text-theme-text-tertiary">Collecting metrics data...</div>
           )}
-          {metrics?.timestamp && (
+          {!showMetricsUnavailable && currentMetrics?.timestamp && (
             <div className="mt-2 text-xs text-theme-text-tertiary">
-              Last updated: {new Date(metrics.timestamp).toLocaleTimeString()}
+              Last updated: {new Date(currentMetrics.timestamp).toLocaleTimeString()}
             </div>
           )}
         </Section>

package/src/components/resources/renderers/PVCRenderer.test.tsx

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { PVCRenderer } from './PVCRenderer'
+
+describe('PVCRenderer', () => {
+  it('does not reassure indefinitely pending PVCs as normal', () => {
+    const html = renderToString(
+      <PVCRenderer
+        data={{
+          metadata: { name: 'data', namespace: 'demo' },
+          spec: { storageClassName: 'standard' },
+          status: { phase: 'Pending' },
+        }}
+      />,
+    )
+
+    expect(html).toContain('Pending')
+    expect(html).toContain('not yet bound')
+    expect(html).toContain('check the StorageClass')
+    expect(html).not.toContain('This is normal')
+    expect(html).not.toContain('expected indefinitely')
+  })
+})

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

@@ -53,8 +53,8 @@ export function PVCRenderer({ data, onNavigate, extraSections }: PVCRendererProp
       {isPending && (
         <AlertBanner
           variant="info"
-          title="Pending — awaiting binding"
-          message="Not yet bound to a volume. This is normal while provisioning, and expected indefinitely for a WaitForFirstConsumer StorageClass until a Pod that mounts this claim is scheduled."
+          title="Pending — not yet bound"
+          message="A PVC stays Pending while its volume is provisioned, or for a WaitForFirstConsumer StorageClass until a Pod that mounts it is scheduled. If it stays Pending, check the StorageClass, its provisioner, and storage quota."
         />
       )}