@skyhook-io/k8s-ui 1.8.9 → 1.8.11

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

@@ -48,7 +48,9 @@ export function JobRenderer({ data }: JobRendererProps) {
   const conditions = status.conditions || []
 
   const startTime = status.startTime ? new Date(status.startTime) : null
-  const completionTime = status.completionTime ? new Date(status.completionTime) : null
+  const terminalCondition = conditions.find((c: any) => (c.type === 'Complete' || c.type === 'Failed') && c.status === 'True')
+  const finishedAt = status.completionTime || terminalCondition?.lastTransitionTime
+  const completionTime = finishedAt ? new Date(finishedAt) : null
   const duration = startTime && completionTime
     ? formatDuration(completionTime.getTime() - startTime.getTime(), true)
     : startTime

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."
         />
       )}
 

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

@@ -107,3 +107,104 @@ describe('PodRenderer issues banner', () => {
     expect(html).toContain('min-w-0 break-words')
   })
 })
+
+describe('PodRenderer metrics', () => {
+  it('renders a calm unavailable state when metrics-server is absent', () => {
+    const html = renderToString(
+      <PodRenderer
+        data={pod}
+        onCopy={() => undefined}
+        copied={null}
+        metricsUnavailable
+        metricsHistory={{
+          containers: [],
+          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(
+      <PodRenderer
+        data={pod}
+        onCopy={() => undefined}
+        copied={null}
+        metricsUnavailable
+        metrics={{
+          containers: [{ name: 'api', 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(
+      <PodRenderer
+        data={pod}
+        onCopy={() => undefined}
+        copied={null}
+        metricsUnavailable
+        metricsHistory={{
+          containers: [{
+            name: 'api',
+            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(
+      <PodRenderer
+        data={pod}
+        onCopy={() => undefined}
+        copied={null}
+        metricsHistory={{ containers: [], collectionError: 'forbidden: no access to pods.metrics.k8s.io' }}
+      />,
+    )
+
+    expect(html).toContain('Metrics collection error')
+    expect(html).toContain('forbidden: no access to pods.metrics.k8s.io')
+  })
+
+  it('warns about non-absence collection errors even when historical samples exist', () => {
+    const html = renderToString(
+      <PodRenderer
+        data={pod}
+        onCopy={() => undefined}
+        copied={null}
+        metricsHistory={{
+          collectionError: 'forbidden: no access to pods.metrics.k8s.io',
+          containers: [{
+            name: 'api',
+            dataPoints: [{ timestamp: '2026-06-30T00:00:00Z', cpu: 100000000, memory: 268435456 }],
+          }],
+        }}
+      />,
+    )
+
+    expect(html).toContain('Metrics collection error')
+    expect(html).toContain('forbidden: no access to pods.metrics.k8s.io')
+    expect(html).toContain('CPU')
+  })
+})

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

@@ -15,6 +15,7 @@ import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
 import type { ResolvedEnvFrom, RBACSubjectResponse, RBACPolicyRule } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
 import { MetricsChart } from '../../ui/MetricsChart'
+import { MetricsUnavailableNotice } from './MetricsUnavailableNotice'
 
 function parseValidDate(dateStr: string): Date | null {
   const d = new Date(dateStr)
@@ -73,7 +74,8 @@ interface PodRendererProps {
   renderPortAction?: (props: { namespace: string; podName: string; port: number; protocol: string; disabled?: boolean }) => ReactNode
   // Metrics data injection
   metrics?: { containers?: any[]; timestamp?: string }
-  metricsHistory?: { containers?: any[]; collectionError?: string }
+  metricsHistory?: { containers?: any[]; collectionError?: string; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
+  metricsUnavailable?: boolean
   hideMetricsServer?: boolean
   // Filesystem browser render props
   renderImageBrowser?: (props: { image: string; namespace: string; podName: string; pullSecrets: string[]; onClose: () => void; onSwitchToPodFiles?: () => void }) => ReactNode
@@ -257,6 +259,7 @@ export function PodRenderer({
   renderPortAction,
   metrics,
   metricsHistory,
+  metricsUnavailable,
   hideMetricsServer,
   renderImageBrowser,
   renderPodBrowser,
@@ -280,6 +283,9 @@ export function PodRenderer({
   const operationalIssuesShown = useOperationalIssuesShown()
   const podProblems = getPodProblems(data)
   const hasProblems = podProblems.length > 0 && !operationalIssuesShown
+  const showMetricsUnavailable = !!metricsUnavailable && !metricsHistory?.collectionError
+  const hasMetricsHistory = !!metricsHistory?.containers?.length
+  const currentMetrics = metricsUnavailable ? undefined : metrics
 
   // Image filesystem modal state
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
@@ -718,89 +724,94 @@ export function PodRenderer({
       )}
 
       {/* Resource Usage (from metrics-server) — hidden when Prometheus has CPU/memory data */}
-      {!hideMetricsServer && !!(metrics?.containers?.length || metricsHistory?.containers?.length || metricsHistory?.collectionError) && (
+      {!hideMetricsServer && !!(currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable) && (
         <Section title="Resource Usage" icon={Activity} defaultExpanded>
-          {metricsHistory?.collectionError && !metricsHistory?.containers?.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>
           )}
-          <div className="space-y-4">
-            {(metricsHistory?.containers || metrics?.containers || []).map((historyContainer) => {
-              // Find current metrics for this container
-              const currentMetrics = metrics?.containers?.find(c => c.name === historyContainer.name)
-              // Find the container spec to compare against limits
-              const containerSpec = containers.find((c: any) => c.name === historyContainer.name)
-              const limits = containerSpec?.resources?.limits
-              const requests = containerSpec?.resources?.requests
-
-              // Get historical data points (from history or empty)
-              const dataPoints = 'dataPoints' in historyContainer ? historyContainer.dataPoints : []
+          {(hasMetricsHistory || !showMetricsUnavailable) && (
+            <div className="space-y-4">
+              {(metricsHistory?.containers || currentMetrics?.containers || []).map((historyContainer) => {
+                // Find current metrics for this container
+                const currentContainerMetrics = currentMetrics?.containers?.find(c => c.name === historyContainer.name)
+                // Find the container spec to compare against limits
+                const containerSpec = containers.find((c: any) => c.name === historyContainer.name)
+                const limits = containerSpec?.resources?.limits
+                const requests = containerSpec?.resources?.requests
 
-              return (
-                <div key={historyContainer.name} className="card-inner-lg">
-                  <div className="flex items-center justify-between mb-3">
-                    <span className="text-sm font-medium text-theme-text-primary">{historyContainer.name}</span>
-                  </div>
+                // Get historical data points (from history or empty)
+                const dataPoints = 'dataPoints' in historyContainer ? historyContainer.dataPoints : []
 
-                  {dataPoints && dataPoints.length > 0 ? (
-                    <div className="grid grid-cols-2 gap-6">
-                      <div>
-                        <div className="text-xs text-theme-text-tertiary mb-2">CPU</div>
-                        <MetricsChart
-                          dataPoints={dataPoints}
-                          type="cpu"
-                          height={80}
-                          showAxis={true}
-                          limit={limits?.cpu}
-                          request={requests?.cpu}
-                        />
-                      </div>
-                      <div>
-                        <div className="text-xs text-theme-text-tertiary mb-2">Memory</div>
-                        <MetricsChart
-                          dataPoints={dataPoints}
-                          type="memory"
-                          height={80}
-                          showAxis={true}
-                          limit={limits?.memory}
-                          request={requests?.memory}
-                        />
-                      </div>
+                return (
+                  <div key={historyContainer.name} className="card-inner-lg">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-sm font-medium text-theme-text-primary">{historyContainer.name}</span>
                     </div>
-                  ) : currentMetrics ? (
-                    /* Fallback to simple display if no history yet */
-                    <div className="grid grid-cols-2 gap-4 text-xs">
-                      <div>
-                        <div className="text-theme-text-tertiary mb-1">CPU</div>
-                        <div className="flex items-baseline gap-1">
-                          <span className="text-sm font-medium text-blue-400">{currentMetrics.usage.cpu}</span>
-                          {limits?.cpu && (
-                            <span className="text-theme-text-tertiary">/ {limits.cpu} limit</span>
-                          )}
+
+                    {dataPoints && dataPoints.length > 0 ? (
+                      <div className="grid grid-cols-2 gap-6">
+                        <div>
+                          <div className="text-xs text-theme-text-tertiary mb-2">CPU</div>
+                          <MetricsChart
+                            dataPoints={dataPoints}
+                            type="cpu"
+                            height={80}
+                            showAxis={true}
+                            limit={limits?.cpu}
+                            request={requests?.cpu}
+                          />
+                        </div>
+                        <div>
+                          <div className="text-xs text-theme-text-tertiary mb-2">Memory</div>
+                          <MetricsChart
+                            dataPoints={dataPoints}
+                            type="memory"
+                            height={80}
+                            showAxis={true}
+                            limit={limits?.memory}
+                            request={requests?.memory}
+                          />
                         </div>
                       </div>
-                      <div>
-                        <div className="text-theme-text-tertiary mb-1">Memory</div>
-                        <div className="flex items-baseline gap-1">
-                          <span className="text-sm font-medium text-purple-400">{currentMetrics.usage.memory}</span>
-                          {limits?.memory && (
-                            <span className="text-theme-text-tertiary">/ {limits.memory} limit</span>
-                          )}
+                    ) : currentContainerMetrics ? (
+                      /* Fallback to simple display if no history yet */
+                      <div className="grid grid-cols-2 gap-4 text-xs">
+                        <div>
+                          <div className="text-theme-text-tertiary mb-1">CPU</div>
+                          <div className="flex items-baseline gap-1">
+                            <span className="text-sm font-medium text-blue-400">{currentContainerMetrics.usage.cpu}</span>
+                            {limits?.cpu && (
+                              <span className="text-theme-text-tertiary">/ {limits.cpu} limit</span>
+                            )}
+                          </div>
+                        </div>
+                        <div>
+                          <div className="text-theme-text-tertiary mb-1">Memory</div>
+                          <div className="flex items-baseline gap-1">
+                            <span className="text-sm font-medium text-purple-400">{currentContainerMetrics.usage.memory}</span>
+                            {limits?.memory && (
+                              <span className="text-theme-text-tertiary">/ {limits.memory} limit</span>
+                            )}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ) : (
-                    <div className="text-xs text-theme-text-tertiary">Collecting metrics data...</div>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-          {metrics?.timestamp && (
+                    ) : (
+                      <div className="text-xs text-theme-text-tertiary">Collecting metrics data...</div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+          {!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/PrometheusRuleRenderer.tsx

@@ -2,6 +2,7 @@ import { useState, useMemo } from 'react'
 import { Bell, Search, ChevronRight } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { Input } from '../../ui/Input'
 import { BADGE_SEVERITY_COLORS } from '../../ui/Badge'
 import {
   getPrometheusRuleGroups,
@@ -190,8 +191,7 @@ export function PrometheusRuleRenderer({ data }: PrometheusRuleRendererProps) {
           {totalRules > 5 && (
             <div className="relative mb-3">
               <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
-              <input
-                type="text"
+              <Input
                 placeholder="Filter rules by name or expression..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}

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

@@ -1,6 +1,7 @@
 import { useState, useMemo } from 'react'
 import { Package, ChevronDown, ChevronRight, Search } from 'lucide-react'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Input } from '../../ui/Input'
 import { formatAge } from '../resource-utils'
 import { formatTrivyImage } from './trivy-shared'
 
@@ -74,8 +75,7 @@ export function SbomReportRenderer({ data }: SbomReportRendererProps) {
               <div className="flex items-center gap-2 mb-2 px-1">
                 <div className="relative flex-1">
                   <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-theme-text-tertiary" />
-                  <input
-                    type="text"
+                  <Input
                     placeholder="Filter by name, type, or purl..."
                     value={searchTerm}
                     onChange={(e) => { setSearchTerm(e.target.value); setShowAll(false) }}