@skyhook-io/k8s-ui 1.16.3 → 1.17.1

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

@@ -4,6 +4,9 @@ import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from
 import { MetricsChart } from '../../ui/MetricsChart'
 import { formatMemoryString } from '../../../utils/format'
 import { getExtendedCapacityRows } from '../../../utils/extended-resources'
+import { getNodeLifecycle } from '../../../utils/node-lifecycle'
+import { formatRelativeAgeTime } from '../../../utils/format'
+import type { DrainPlan } from '../../shared/DrainPlanDialog'
 import type { MetricsDataPoint } from '../../../types/core'
 import { MetricsUnavailableNotice } from './MetricsUnavailableNotice'
 
@@ -15,6 +18,9 @@ interface NodeRendererProps {
   metricsHistory?: { dataPoints?: MetricsDataPoint[]; collectionError?: string; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
   metricsUnavailable?: boolean
   hideMetricsServer?: boolean
+  removalPlan?: DrainPlan
+  removalPlanLoading?: boolean
+  removalPlanError?: string
 }
 
 // Helper to handle undefined values
@@ -31,18 +37,18 @@ function formatStorage(value: string | undefined): string {
 // Extract genuine problems from node status. Cordoned (unschedulable) is
 // deliberately NOT included here — it's an intentional operator action
 // (cordon/drain), surfaced separately as a calm advisory, not a red error.
-function getNodeProblems(data: any): string[] {
+function getNodeProblems(data: any, lifecycle: ReturnType<typeof getNodeLifecycle>): string[] {
   const problems: string[] = []
   const conditions = data.status?.conditions || []
 
   for (const cond of conditions) {
     // NotReady is a problem when status is not True
-    if (cond.type === 'Ready' && cond.status !== 'True') {
+    if (cond.type === 'Ready' && lifecycle.readinessFailed) {
       problems.push(`Node is NotReady${cond.message ? ': ' + cond.message : ''}`)
     }
 
     // These conditions are problems when True
-    if (cond.status === 'True') {
+    if (cond.status === 'True' && lifecycle.problems.includes(cond.type)) {
       if (cond.type === 'DiskPressure') {
         problems.push(`Disk pressure${cond.message ? ': ' + cond.message : ''}`)
       }
@@ -61,7 +67,7 @@ function getNodeProblems(data: any): string[] {
   return problems
 }
 
-export function NodeRenderer({ data, relationships, onViewPods, metrics, metricsHistory, metricsUnavailable, hideMetricsServer }: NodeRendererProps) {
+export function NodeRenderer({ data, relationships, onViewPods, metrics, metricsHistory, metricsUnavailable, hideMetricsServer, removalPlan, removalPlanLoading, removalPlanError }: NodeRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const metadata = data.metadata || {}
@@ -73,9 +79,14 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
   const taints = spec.taints || []
 
   // Check for problems
-  const problems = getNodeProblems(data)
+  const lifecycle = getNodeLifecycle(data)
+  const problems = getNodeProblems(data, lifecycle)
   const hasProblems = problems.length > 0
   const isCordoned = !!spec.unschedulable
+  const currentPlan = !removalPlanError && removalPlan?.node === metadata.name ? removalPlan : undefined
+  const possibleBlockers = currentPlan?.pods.filter(pod => pod.outcome === 'may-block') ?? []
+  const terminatingPods = currentPlan?.pods.filter(pod => pod.terminating).length
+  const terminationKnown = currentPlan?.pods.every(pod => pod.terminating !== undefined)
   const showMetricsUnavailable = !!metricsUnavailable && !metricsHistory?.collectionError
   const hasMetricsHistory = !!metricsHistory?.dataPoints?.length
   const currentMetrics = metricsUnavailable ? undefined : metrics
@@ -92,20 +103,50 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
     <>
       {/* Problems alert - shown at top when there are genuine issues */}
       {hasProblems && (
-        <AlertBanner variant="error" title="Issues Detected" items={problems} />
+        <AlertBanner variant={lifecycle.level === 'unhealthy' ? 'error' : 'warning'} title="Issues Detected" items={problems} />
       )}
 
-      {/* Cordoned is intentional but consequential — it removes scheduling
-          capacity and a forgotten cordon strands a node. So it's a warning (amber),
-          matching the node table badge + the Cordoned audit check — NOT the calm
-          sky of a no-op intentional state (suspended/idle), and not a red error. */}
-      {isCordoned && (
+      {lifecycle.removing ? (
+        <AlertBanner
+          variant={lifecycle.level === 'unhealthy' ? 'error' : lifecycle.level === 'degraded' ? 'warning' : 'info'}
+          title={lifecycle.delayed ? `${lifecycle.label} — taking longer than expected` : lifecycle.label}
+          message={lifecycle.delayed
+            ? 'Check remaining pods, disruption budgets and controller events. Do not uncordon during removal.'
+            : 'This node is marked for removal. New pods are kept off it while the controller prepares or completes removal.'}
+        >
+          <div className="mt-2 space-y-2 text-xs">
+            <p>{lifecycle.startedAt !== undefined ? `Marked for removal ${formatRelativeAgeTime(new Date(lifecycle.startedAt).toISOString())}.` : 'Removal start time is not reported.'}</p>
+            {removalPlanLoading && <p>Checking remaining pods and disruption budgets…</p>}
+            {removalPlanError && <p>Drain details unavailable: {removalPlanError}</p>}
+            {!removalPlanLoading && !removalPlanError && !currentPlan && <p>Pod and disruption-budget checks are not available from this host.</p>}
+            {currentPlan && (
+              <>
+                <p>{currentPlan.pods.length} pods in the current snapshot · {terminationKnown ? `${terminatingPods} terminating` : 'termination state unavailable from this Radar'} · {currentPlan.summary.skip} skipped by drain estimate (DaemonSet, static or completed).</p>
+                <p className="text-theme-text-secondary">Checked {formatRelativeAgeTime(currentPlan.generatedAt)}. This is a snapshot, not an eviction history. Disruption-budget checks estimate what the Eviction API would allow now.</p>
+                <p className="text-theme-text-secondary">Removal controllers can also hold pods marked karpenter.sh/do-not-disrupt or cluster-autoscaler.kubernetes.io/safe-to-evict=false. Those policies are not evaluated by this drain estimate.</p>
+                <ul className="max-h-48 overflow-y-auto space-y-1">
+                  {currentPlan.pods.map(pod => (
+                    <li key={`${pod.namespace}/${pod.name}`} className="flex justify-between gap-2">
+                      <span className="break-all font-mono">{pod.namespace}/{pod.name}</span>
+                      <span className="shrink-0 text-theme-text-secondary">{pod.terminating ? 'Terminating' : pod.outcome === 'may-block' ? 'Budget may block' : pod.outcome === 'skip' ? 'Skipped by drain estimate' : 'Remaining'}</span>
+                    </li>
+                  ))}
+                </ul>
+                {!currentPlan.pdbsEvaluated && <p>Disruption-budget checks are incomplete: {currentPlan.pdbError}</p>}
+                {possibleBlockers.length > 0 && (
+                  <AlertBanner variant="warning" title="Disruption budgets may block removal" items={possibleBlockers.map(pod => `${pod.namespace}/${pod.name}: ${pod.reason}`)} />
+                )}
+              </>
+            )}
+          </div>
+        </AlertBanner>
+      ) : isCordoned ? (
         <AlertBanner
           variant="warning"
-          title="Cordoned (unschedulable)"
-          message="New pods won't be scheduled here. Uncordon to resume scheduling."
+          title="Cordoned"
+          message="New pods won't be scheduled here. The node may be under maintenance; who cordoned it is not recorded. Resume scheduling only after confirming maintenance has finished."
         />
-      )}
+      ) : null}
 
       {/* Node Info */}
       <Section title="Node Info" icon={Server}>
@@ -314,7 +355,7 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
       )}
 
       {/* Conditions */}
-      <ConditionsSection conditions={status.conditions} />
+      <ConditionsSection conditions={status.conditions} getConditionTone={condition => condition.type === 'Ready' && lifecycle.removing && !lifecycle.readinessFailed && condition.status !== 'True' ? 'unknown' : undefined} />
     </>
   )
 }

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

@@ -1,9 +1,9 @@
 import { Package, CheckCircle2 } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import { formatBytes } from '../../../utils/format'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface OCIRepositoryRendererProps {
   data: any
@@ -80,7 +80,7 @@ export function OCIRepositoryRenderer({ data }: OCIRepositoryRendererProps) {
             <Property label="Digest" value={artifact.digest} />
             <Property
               label="Last Updated"
-              value={artifact.lastUpdateTime ? formatAge(artifact.lastUpdateTime) : '-'}
+              value={<TimeValue timestamp={artifact.lastUpdateTime} />}
             />
             {artifact.size && (
               <Property label="Size" value={formatBytes(artifact.size)} />
@@ -103,7 +103,7 @@ export function OCIRepositoryRenderer({ data }: OCIRepositoryRendererProps) {
             {status.lastHandledReconcileAt && (
               <Property
                 label="Last Reconciled"
-                value={formatAge(status.lastHandledReconcileAt)}
+                value={<TimeValue timestamp={status.lastHandledReconcileAt} />}
               />
             )}
           </PropertyList>

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

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { PodRenderer } from './PodRenderer'
+
+const data = {
+  metadata: { name: 'worker', namespace: 'app' },
+  spec: { containers: [], priority: 1000, priorityClassName: 'urgent', runtimeClassName: 'sandbox' },
+  status: { phase: 'Pending' },
+}
+
+describe('PodRenderer class references', () => {
+  it('links explicit class names with their API groups and cluster scope', async () => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const onNavigate = vi.fn()
+    try {
+      await act(async () => root.render(<PodRenderer data={data} onCopy={() => {}} copied={null} onNavigate={onNavigate} />))
+      for (const [name, kind, group] of [
+        ['urgent', 'priorityclasses', 'scheduling.k8s.io'],
+        ['sandbox', 'runtimeclasses', 'node.k8s.io'],
+      ]) {
+        const button = [...container.querySelectorAll('button')].find(button => button.textContent === name)
+        expect(button).toBeDefined()
+        await act(async () => button!.click())
+        expect(onNavigate).toHaveBeenLastCalledWith({ kind, group, namespace: '', name })
+      }
+    } finally {
+      await act(async () => root.unmount())
+      Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+    }
+  })
+
+  it('does not infer a class from numeric priority alone', () => {
+    const html = renderToStaticMarkup(<PodRenderer data={{ ...data, spec: { containers: [], priority: 1000 } }} onCopy={() => {}} copied={null} />)
+    expect(html).not.toContain('Priority Class')
+    expect(html).not.toContain('Runtime Class')
+  })
+})

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

@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { PodRenderer } from './PodRenderer'
+
+describe('PodRenderer nominated Node', () => {
+  it('links the nominated Node of an unbound Pod', async () => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const onNavigate = vi.fn()
+    try {
+      await act(async () => root.render(
+        <PodRenderer
+          data={{ metadata: { name: 'pending', namespace: 'app' }, spec: { containers: [] }, status: { phase: 'Pending', nominatedNodeName: 'candidate' } }}
+          onCopy={() => {}}
+          copied={null}
+          onNavigate={onNavigate}
+        />,
+      ))
+      expect(container.textContent).toContain('Nominated Node')
+      const button = [...container.querySelectorAll('button')].find(button => button.textContent === 'candidate')
+      expect(button).toBeDefined()
+      await act(async () => button!.click())
+      expect(onNavigate).toHaveBeenCalledWith({ kind: 'nodes', namespace: '', name: 'candidate', group: undefined })
+    } finally {
+      await act(async () => root.unmount())
+      Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+    }
+  })
+
+  it('hides a nomination on a terminal or terminating unbound Pod', () => {
+    for (const data of [
+      { metadata: { name: 'failed', namespace: 'app' }, spec: { containers: [] }, status: { phase: 'Failed', nominatedNodeName: 'stale' } },
+      { metadata: { name: 'deleting', namespace: 'app', deletionTimestamp: '2026-10-07T00:00:00Z' }, spec: { containers: [] }, status: { phase: 'Pending', nominatedNodeName: 'stale' } },
+    ]) {
+      const html = renderToStaticMarkup(<PodRenderer data={data} onCopy={() => {}} copied={null} />)
+      expect(html).not.toContain('Nominated Node')
+      expect(html).not.toContain('stale')
+    }
+  })
+
+  it('hides a nomination once the Pod is bound, even when it names another node', () => {
+    const html = renderToStaticMarkup(
+      <PodRenderer
+        data={{ metadata: { name: 'running', namespace: 'app' }, spec: { nodeName: 'assigned', containers: [] }, status: { phase: 'Running', nominatedNodeName: 'stale' } }}
+        onCopy={() => {}}
+        copied={null}
+      />,
+    )
+    expect(html).not.toContain('Nominated Node')
+    expect(html).not.toContain('stale')
+    expect(html).toContain('assigned')
+  })
+})

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

@@ -450,3 +450,35 @@ describe('PodRenderer on a Radar without variable sources', () => {
     expect(html).not.toContain('could not be loaded')
   })
 })
+
+describe('PodRenderer pending Pods, including non-CNPG workloads', () => {
+  const pending = { apiVersion: 'v1', kind: 'Pod', metadata: { name: 'nginx-join', namespace: 'default' }, spec: { containers: [{ name: 'nginx', image: 'nginx' }], initContainers: [{ name: 'setup', image: 'busybox' }] }, status: { phase: 'Pending' } }
+  const render = (data: any, metricsHistory: any = { containers: [], metricsAPIReachable: true }) => renderToString(<PodRenderer data={data} onCopy={() => {}} copied={null} metricsUnavailable metricsHistory={metricsHistory} />)
+  it('shows no usage yet only with a successful metrics API collection', () => {
+    expect(render(pending)).toContain('No usage yet: this Pod is not running')
+    expect(render(pending)).not.toContain('Radar cannot read metrics.k8s.io')
+    expect(render(pending, { containers: [], metricsAPIReachable: false })).toContain('Radar cannot read metrics.k8s.io')
+    expect(render(pending, { containers: [], collectionError: 'forbidden' })).toContain('forbidden')
+    expect(render({ ...pending, status: { phase: 'Running' } })).toContain('Radar cannot read metrics.k8s.io')
+    expect(render({ ...pending, status: { phase: 'Pending', initContainerStatuses: [{ name: 'setup', state: { running: {} } }] } })).not.toContain('No usage yet')
+  })
+  it('shows unstarted regular and init containers neutrally', () => {
+    const html = render(pending)
+    expect(html.match(/Not started/g)).toHaveLength(2)
+    expect(html).not.toContain('Not Ready')
+    expect(html).not.toMatch(/>unknown</)
+  })
+  it.each(['ContainerCreating', 'PodInitializing', 'ImagePullBackOff', 'CrashLoopBackOff'])('tones reported waiting reason %s appropriately', (reason) => {
+    const html = render({ ...pending, status: { phase: 'Pending', containerStatuses: [{ name: 'nginx', state: { waiting: { reason } } }] } })
+    const bad = ['ImagePullBackOff', 'CrashLoopBackOff'].includes(reason)
+    expect(html).toContain(bad ? 'bg-red-100' : 'bg-theme-hover/50')
+    if (bad) expect(html).toContain(reason)
+  })
+})
+
+it('shows reported running-but-unready nginx readiness as degraded', () => {
+  const data = { ...pod, status: { phase: 'Running', containerStatuses: [{ name: pod.spec.containers[0].name, ready: false, state: { running: {} } }] } }
+  const html = renderToString(<PodRenderer data={data} onCopy={() => {}} copied={null} />)
+  expect(html).toMatch(/bg-amber-100[^>]*>Not Ready</)
+  expect(html).toMatch(/>running</)
+})

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

@@ -5,7 +5,7 @@ import { PolicySection } from './PolicySection'
 import type { PolicyResourceResponse } from '../../../types/policy'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR, getDefaultContainerName } from '../resource-utils'
-import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
+import { getResourceStatusColor, SEVERITY_BORDER } from '../../../utils/badge-colors'
 import {
   rbacVerbBadgeClass,
   rbacResourceBadgeClass,
@@ -26,8 +26,10 @@ import { Tooltip } from '../../ui/Tooltip'
 import { RadarUpgradeNote } from '../../ui/RadarUpgradeNote'
 import { getRadarUpgradeRequirement, type RadarUpgradeRequirement } from '../../../types/fetch-error'
 import { MetricsChart } from '../../ui/MetricsChart'
+import { Badge } from '../../ui/Badge'
 import { MetricsUnavailableNotice } from './MetricsUnavailableNotice'
 import { ContainerEnvironmentSection } from './ContainerEnvironmentSection'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 function parseValidDate(dateStr: string): Date | null {
   const d = new Date(dateStr)
@@ -35,13 +37,7 @@ function parseValidDate(dateStr: string): Date | null {
 }
 
 function formatMsAgo(dateStr: string): string | null {
-  const d = parseValidDate(dateStr)
-  if (!d) return null
-  const ms = Date.now() - d.getTime()
-  if (ms < 60000) return 'just now'
-  if (ms < 3600000) return `${Math.floor(ms / 60000)}m ago`
-  if (ms < 86400000) return `${Math.floor(ms / 3600000)}h ago`
-  return `${Math.floor(ms / 86400000)}d ago`
+  return parseValidDate(dateStr) ? formatRelativeAgeTime(dateStr) : null
 }
 
 function getRestartRecency(finishedAt: string | undefined, restarts: number): { color: string; label: string | null } {
@@ -90,7 +86,7 @@ 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; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
+  metricsHistory?: { metricsAPIReachable?: boolean; containers?: any[]; collectionError?: string; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
   metricsUnavailable?: boolean
   hideMetricsServer?: boolean
   // Filesystem browser render props
@@ -310,6 +306,7 @@ export function PodRenderer({
   const containerStatuses = data.status?.containerStatuses || []
   const containers = data.spec?.containers || []
   const initContainers = data.spec?.initContainers || []
+  const podResources = data.spec?.resources
   const initContainerStatuses = data.status?.initContainerStatuses || []
   const hasEnvironmentDeclarations = [...initContainers, ...containers].some(
     (container: any) => container.env?.length > 0 || container.envFrom?.length > 0,
@@ -330,7 +327,9 @@ export function PodRenderer({
   const operationalIssuesShown = useOperationalIssuesShown()
   const podProblems = getPodProblems(data)
   const hasProblems = podProblems.length > 0 && !operationalIssuesShown
-  const showMetricsUnavailable = !!metricsUnavailable && !metricsHistory?.collectionError
+  const notRunning = data.status?.phase === 'Pending' && ![...containerStatuses, ...initContainerStatuses].some((s: any) => s.state?.running)
+  const noUsageYet = notRunning && metricsHistory?.metricsAPIReachable === true && !metricsHistory.collectionError && !metricsHistory.containers?.length && !metrics?.containers?.length
+  const showMetricsUnavailable = !!metricsUnavailable && !metricsHistory?.collectionError && !noUsageYet
   const hasMetricsHistory = !!metricsHistory?.containers?.length
   const currentMetrics = metricsUnavailable ? undefined : metrics
 
@@ -453,6 +452,25 @@ export function PodRenderer({
           <Property label="Node" value={
             data.spec?.nodeName ? <ResourceLink name={data.spec.nodeName} kind="nodes" onNavigate={onNavigate} /> : undefined
           } copyable onCopy={onCopy} copied={copied} />
+          {/* A nomination outlives its meaning: the API server clears it on binding by
+              default only from Kubernetes 1.35, and pod GC fails a terminating unbound
+              Pod without clearing it. Only a Pending, unbound, live Pod can still use it. */}
+          {data.status?.nominatedNodeName && !data.spec?.nodeName && data.status?.phase === 'Pending' && !data.metadata?.deletionTimestamp && (
+            <Property
+              label={
+                <Tooltip content="The node this Pod is expected to run on, set by the scheduler or another component. It can change before the Pod is bound." position="right">
+                  <span className="border-b border-dotted border-theme-text-tertiary cursor-help">Nominated Node</span>
+                </Tooltip>
+              }
+              value={<ResourceLink name={data.status.nominatedNodeName} kind="nodes" onNavigate={onNavigate} />}
+            />
+          )}
+          {data.spec?.priorityClassName && <Property label="Priority Class" value={
+            <ResourceLink name={data.spec.priorityClassName} kind="priorityclasses" group="scheduling.k8s.io" onNavigate={onNavigate} />
+          } />}
+          {data.spec?.runtimeClassName && <Property label="Runtime Class" value={
+            <ResourceLink name={data.spec.runtimeClassName} kind="runtimeclasses" group="node.k8s.io" onNavigate={onNavigate} />
+          } />}
           <Property label="Pod IP" value={data.status?.podIP} copyable onCopy={onCopy} copied={copied} />
           <Property label="Host IP" value={data.status?.hostIP} />
           <Property
@@ -506,10 +524,11 @@ export function PodRenderer({
               } else if (isWaiting) {
                 statusLabel = state?.waiting?.reason || 'Waiting'
               } else {
-                statusLabel = 'Pending'
+                statusLabel = 'Not started'
               }
+              const reportedFailure = isFailed || !!(isWaiting && state?.waiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(state.waiting.reason))
               const statusColor = getResourceStatusColor(
-                isCompleted ? 'succeeded' : isFailed ? 'failed' : isInitRunning ? 'running' : isWaiting ? 'waiting' : 'pending'
+                isCompleted ? 'succeeded' : reportedFailure ? 'failed' : isInitRunning ? 'running' : 'unknown'
               )
 
               // Build command string
@@ -520,10 +539,11 @@ export function PodRenderer({
               return (
                 <div key={container.name} className={clsx(
                   'rounded-lg p-3 border-l-2',
-                  isCompleted ? 'bg-theme-elevated/20 border-green-500/40' :
-                  isFailed ? 'bg-theme-elevated/30 border-red-500/50' :
-                  isInitRunning ? 'bg-theme-elevated/30 border-blue-500/50' :
-                  'bg-theme-elevated/30 border-yellow-500/40'
+                  isCompleted ? 'bg-theme-elevated/20' : 'bg-theme-elevated/30',
+                  isCompleted ? SEVERITY_BORDER.success :
+                  reportedFailure ? 'border-l-semantic-error' :
+                  isInitRunning ? SEVERITY_BORDER.info :
+                  SEVERITY_BORDER.neutral
                 )}>
                   <div className="flex items-center justify-between mb-2">
                     <div className="flex items-center gap-2">
@@ -561,7 +581,7 @@ export function PodRenderer({
                       </div>
                     )}
                     {/* Waiting reason detail */}
-                    {isWaiting && state?.waiting?.reason && state.waiting.reason !== 'PodInitializing' && (
+                    {isWaiting && state?.waiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(state.waiting.reason) && (
                       <div className="text-red-400 flex items-center gap-1">
                         <span className="font-medium">{state.waiting.reason}</span>
                         {state.waiting.message && (
@@ -609,6 +629,20 @@ export function PodRenderer({
 
       <Section title="Containers" icon={HardDrive} defaultExpanded>
         <div className="space-y-3">
+          {/* Pod-level budget (spec.resources) is shared by all containers, so it
+              stays its own row rather than being merged into the container rows. */}
+          {(podResources?.requests || podResources?.limits) && (
+            <div className="rounded-[10px] border border-dashed border-theme-border p-3">
+              <div className="flex items-baseline justify-between gap-2 mb-2">
+                <span className="text-sm font-medium text-theme-text-primary">Pod (aggregate)</span>
+                <span className="text-xs text-theme-text-tertiary">Shared by all containers</span>
+              </div>
+              <div className="text-xs text-theme-text-secondary space-y-1">
+                {podResources.requests && <div>Requests: {formatResources(podResources.requests)}</div>}
+                {podResources.limits && <div>Limits: {formatResources(podResources.limits)}</div>}
+              </div>
+            </div>
+          )}
           {containers.map((container: any) => {
             const status = containerStatuses.find((s: any) => s.name === container.name)
             const state = status?.state
@@ -624,6 +658,7 @@ export function PodRenderer({
             // failure — tone its badges/text sky, not red, so the drawer agrees
             // with the calm "Completed" table badge instead of screaming red.
             const terminatedOk = currentTerminated?.exitCode === 0
+            const reportedFailure = !!((currentTerminated?.exitCode != null && currentTerminated.exitCode !== 0) || (currentWaiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(currentWaiting.reason)))
 
             return (
               <div key={container.name} className="card-inner-lg">
@@ -660,23 +695,12 @@ export function PodRenderer({
                         </button>
                       </Tooltip>
                     )}
-                    <span className={clsx(
-                      'badge',
-                      isReady ? SEVERITY_BADGE_BORDERED.success :
-                      terminatedOk ? SEVERITY_BADGE_BORDERED.info :
-                      SEVERITY_BADGE_BORDERED.error
-                    )}>
-                      {isReady ? 'Ready' : terminatedOk ? 'Completed' : 'Not Ready'}
-                    </span>
-                    <span className={clsx(
-                      'badge',
-                      stateKey === 'running' ? SEVERITY_BADGE_BORDERED.success :
-                      stateKey === 'waiting' ? SEVERITY_BADGE_BORDERED.warning :
-                      terminatedOk ? SEVERITY_BADGE_BORDERED.info :
-                      SEVERITY_BADGE_BORDERED.error
-                    )}>
+                    <Badge severity={isReady ? 'success' : terminatedOk ? 'info' : reportedFailure ? 'error' : stateKey === 'running' && isReady === false ? 'warning' : 'neutral'}>
+                      {isReady ? 'Ready' : terminatedOk ? 'Completed' : !stateKey || stateKey === 'unknown' ? 'Not started' : 'Not Ready'}
+                    </Badge>
+                    {stateKey !== 'unknown' && <Badge severity={stateKey === 'running' ? 'success' : terminatedOk ? 'info' : reportedFailure ? 'error' : 'neutral'}>
                       {stateKey}
-                    </span>
+                    </Badge>}
                   </div>
                 </div>
                 <div className="text-xs text-theme-text-secondary space-y-1">
@@ -690,7 +714,7 @@ export function PodRenderer({
                     )
                   })()}
                   {/* Show current waiting reason (e.g., CrashLoopBackOff) */}
-                  {currentWaiting?.reason && currentWaiting.reason !== 'ContainerCreating' && (
+                  {currentWaiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(currentWaiting.reason) && (
                     <div className="text-red-400 flex items-center gap-1">
                       <span className="font-medium">{currentWaiting.reason}</span>
                       {currentWaiting.message && (
@@ -817,8 +841,9 @@ export function PodRenderer({
       )}
 
       {/* Resource Usage (from metrics-server) — hidden when Prometheus has CPU/memory data */}
-      {!hideMetricsServer && !!(currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable) && (
+      {!hideMetricsServer && !!(currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable || noUsageYet) && (
         <Section title="Resource Usage" icon={Activity} defaultExpanded>
+          {noUsageYet && <MetricsUnavailableNotice noUsageYet />}
           {showMetricsUnavailable && (
             <MetricsUnavailableNotice rawError={metricsHistory?.metricsUnavailableReason} diagnosis={metricsHistory?.metricsUnavailableDiagnosis} />
           )}
@@ -838,7 +863,8 @@ export function PodRenderer({
                 // fall through to them or their chart shows no limit line.
                 const containerSpec = containers.find((c: any) => c.name === historyContainer.name)
                   || initContainers.find((c: any) => c.name === historyContainer.name && c.restartPolicy === 'Always')
-                const limits = containerSpec?.resources?.limits
+                // A container without its own limit is still bounded by the pod-level one.
+                const limits = { ...podResources?.limits, ...containerSpec?.resources?.limits }
                 const requests = containerSpec?.resources?.requests
 
                 // Get historical data points (from history or empty)

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

@@ -269,7 +269,7 @@ describe('rolloutProblems', () => {
     )
     expect(problems).toHaveLength(1)
     expect(problems[0].color).toBe('yellow')
-    expect(problems[0].message).toMatch(/^Rollout is paused: CanaryPauseStep \(since .+\)$/)
+    expect(problems[0].message).toMatch(/^Rollout is paused: CanaryPauseStep \(for \d+d\)$/)
   })
 
   it('does not report a paused rollout that is actually aborted', () => {

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

@@ -9,6 +9,7 @@ import { CanaryStepTimeline, BlueGreenTimeline } from './rollout/CanaryStepTimel
 import { ReplicaSetProgression } from './rollout/ReplicaSetProgression'
 import { LookupFailureNote } from './LookupFailureNote'
 import type { WorkloadRevision, WorkloadPodInfo } from '../../../types'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 export type RolloutAction = 'abort' | 'retry' | 'promote' | 'promote-full' | 'skip-step'
 
@@ -214,7 +215,7 @@ export function rolloutProblems(data: any): RolloutProblem[] {
 
   if (phase === 'Paused' && !status.abort) {
     const reasons = (status.pauseConditions || []).map((pc: any) => {
-      const since = pc.startTime ? ` (since ${formatAge(pc.startTime)})` : ''
+      const since = pc.startTime ? ` (for ${formatAge(pc.startTime)})` : ''
       return `${pc.reason || 'Unknown'}${since}`
     })
     problems.push({
@@ -741,7 +742,7 @@ export function RolloutRenderer({ data, onNavigate, capabilities, onAction, pend
                   </span>
                 )}
                 <span className={clsx('text-xs text-theme-text-tertiary', run.metricsTotal === 0 && 'ml-auto')}>
-                  {formatAge(run.createdAt)}
+                  {formatRelativeAgeTime(run.createdAt)}
                 </span>
               </div>
             ))}

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

@@ -3,8 +3,8 @@ import { Package, Search } from 'lucide-react'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { Input } from '../../ui/Input'
-import { formatAge } from '../resource-utils'
 import { formatTrivyImage } from './trivy-shared'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface SbomReportRendererProps {
   data: any
@@ -57,7 +57,7 @@ export function SbomReportRenderer({ data }: SbomReportRendererProps) {
           <Property label="Components" value={String(componentsCount)} />
           {depsCount > 0 && <Property label="Dependencies" value={String(depsCount)} />}
           <Property label="Scanner" value={scanner.name ? `${scanner.name} ${scanner.version || ''}`.trim() : '-'} />
-          <Property label="Scanned" value={report.updateTimestamp ? formatAge(report.updateTimestamp) + ' ago' : '-'} />
+          <Property label="Scanned" value={<TimeValue timestamp={report.updateTimestamp} />} />
         </PropertyList>
       </Section>