@skyhook-io/k8s-ui 1.16.2 → 1.17.0

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { renderToString } from 'react-dom/server'
+import { renderToString, renderToStaticMarkup } from 'react-dom/server'
 import { NodeRenderer } from './NodeRenderer'
 
 const node = {
@@ -101,3 +101,83 @@ describe('NodeRenderer metrics', () => {
     expect(html).toContain('CPU')
   })
 })
+
+describe('NodeRenderer removal advice', () => {
+  const removal = {
+    ...node,
+    spec: { unschedulable: true, taints: [{ key: 'ToBeDeletedByClusterAutoscaler', value: String(Math.floor(Date.now() / 1000) - 60), effect: 'NoSchedule' }] },
+    status: { ...node.status, conditions: [{ type: 'Ready', status: 'Unknown', lastTransitionTime: new Date(Date.now() - 1000).toISOString(), message: 'Kubelet stopped posting' }] },
+  }
+  it('does not give an autoscaler removal an error or uncordon advice', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={removal} />)
+    expect(html).toContain('Removing (cluster autoscaler)')
+    expect(html).not.toContain('Issues Detected')
+    expect(html).not.toContain('Uncordon')
+    expect(html).toContain('Pod and disruption-budget checks are not available')
+  })
+  it('does not assert who caused a bare cordon', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={{ ...node, spec: { unschedulable: true } }} />)
+    expect(html).toContain('Cordoned')
+    expect(html).toContain('who cordoned it is not recorded')
+    expect(html).not.toContain('Uncordon to resume')
+  })
+  it('keeps observed readiness False neutral when it follows the removal start', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={{ ...removal, status: { ...removal.status, conditions: [{ ...removal.status.conditions[0], status: 'False' }] } }} />)
+    expect(html).toContain('Removing (cluster autoscaler)')
+    expect(html).toContain('Kubelet stopped posting')
+    expect(html).not.toContain('1 failing')
+    expect(html).not.toContain('Issues Detected')
+  })
+  it('shows named possible PDB blockers and terminating pods without invented progress', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={removal} removalPlan={{
+      node: 'kind-worker', generatedAt: new Date().toISOString(), estimate: true,
+      options: { ignoreDaemonSets: true, deleteEmptyDirData: true, force: true },
+      summary: { evict: 1, skip: 0, mayBlock: 1 }, pdbsEvaluated: true,
+      pods: [
+        { namespace: 'shop', name: 'web', outcome: 'may-block', reason: 'PodDisruptionBudget shop/web allows no disruptions', pdb: 'shop/web', pdbChecked: true, emptyDir: false, terminating: false },
+        { namespace: 'shop', name: 'old', outcome: 'evict', reason: 'already terminating', pdbChecked: false, emptyDir: false, terminating: true },
+      ],
+    }} />)
+    expect(html).toContain('2 pods in the current snapshot')
+    expect(html).toContain('1 terminating')
+    expect(html).toContain('shop/web')
+    expect(html).toContain('may block removal')
+    expect(html).not.toContain('evicted')
+  })
+  it('uses warning tone for independent network failure during removal', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={{ ...removal, status: { conditions: [
+      ...removal.status.conditions,
+      { type: 'NetworkUnavailable', status: 'True', lastTransitionTime: new Date(Date.now() - 180_000).toISOString() },
+    ] } }} />)
+    expect(html).toContain('Removing (cluster autoscaler) · Network unavailable')
+    expect(html).toContain('bg-amber-50')
+    expect(html).not.toContain('rounded-lg bg-red-50')
+    expect(html).not.toContain('rounded-lg bg-sky-50')
+  })
+  it('describes skip outcomes as drain estimates', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={removal} removalPlan={{
+      node: 'kind-worker', generatedAt: new Date().toISOString(), estimate: true,
+      options: { ignoreDaemonSets: true, deleteEmptyDirData: true, force: true },
+      summary: { evict: 0, skip: 1, mayBlock: 0 }, pdbsEvaluated: true,
+      pods: [{ namespace: 'shop', name: 'daemon', outcome: 'skip', reason: 'DaemonSet', pdbChecked: false, emptyDir: false, terminating: false }],
+    }} />)
+    expect(html).toContain('Skipped by drain estimate')
+    expect(html).toContain('1 skipped by drain estimate')
+    expect(html).not.toContain('Retained')
+  })
+  it('reports unavailable drain evidence as unavailable', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={removal} removalPlanError="forbidden: cannot list pods" />)
+    expect(html).toContain('Drain details unavailable')
+    expect(html).toContain('forbidden: cannot list pods')
+    expect(html).not.toContain('0 pods')
+  })
+  it('does not present a cached snapshot as current after a refresh fails', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={removal} removalPlanError="forbidden: cannot list pods" removalPlan={{
+      node: 'kind-worker', generatedAt: new Date().toISOString(), estimate: true,
+      options: { ignoreDaemonSets: true, deleteEmptyDirData: true, force: true },
+      summary: { evict: 0, skip: 0, mayBlock: 0 }, pdbsEvaluated: true, pods: [],
+    }} />)
+    expect(html).toContain('Drain details unavailable')
+    expect(html).not.toContain('0 pods in the current snapshot')
+  })
+})

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.tsx

@@ -28,6 +28,7 @@ import { getRadarUpgradeRequirement, type RadarUpgradeRequirement } from '../../
 import { MetricsChart } from '../../ui/MetricsChart'
 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 +36,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 } {
@@ -453,6 +448,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

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>
 

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

@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { SecretRenderer } from './SecretRenderer'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+const secret = {
+  apiVersion: 'v1',
+  kind: 'Secret',
+  metadata: { name: 'db', namespace: 'shop', resourceVersion: '7' },
+  type: 'Opaque',
+  data: { password: btoa('old') },
+}
+
+let element: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  element = document.createElement('div')
+  document.body.append(element)
+  root = createRoot(element)
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  element.remove()
+})
+
+async function render(onSaveSecretValue?: (yaml: string) => Promise<void>) {
+  await act(async () => root.render(<SecretRenderer data={secret} resourceData={secret} onSaveSecretValue={onSaveSecretValue} />))
+}
+
+function button(label: string): HTMLButtonElement {
+  const match = [...document.querySelectorAll('button')].find(b => b.textContent?.trim() === label || b.title === label)
+  if (!match) throw new Error(`no button "${label}"`)
+  return match
+}
+
+async function editAndSave(value: string) {
+  await act(async () => button('Reveal').click())
+  await act(async () => button('Edit value').click())
+  const textarea = element.querySelector('textarea')!
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!.call(textarea, value)
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  await act(async () => button('Save').click())
+  await act(async () => button('Update').click())
+}
+
+const httpError = (status: number, message: string) => Object.assign(new Error(message), { status })
+
+describe('SecretRenderer value edit', () => {
+  it('keeps the edit open and says why when the Secret changed since it loaded', async () => {
+    await render(vi.fn().mockRejectedValue(httpError(409, 'resource changed after review')))
+    await editAndSave('new')
+    expect(element.textContent).toContain('Not saved')
+    expect(element.textContent).toContain('This Secret changed after it loaded. Once the view reloads it, save again')
+    expect(element.querySelector('textarea')?.value).toBe('new')
+  })
+
+  it('says the Secret is gone when the save finds it deleted', async () => {
+    await render(vi.fn().mockRejectedValue(httpError(404, 'secrets "db" not found')))
+    await editAndSave('new')
+    expect(element.textContent).toContain('Not saved')
+    expect(element.textContent).toContain('This Secret no longer exists in the cluster.')
+  })
+
+  it('shows the server message for any other failure', async () => {
+    await render(vi.fn().mockRejectedValue(httpError(403, 'secrets "db" is forbidden')))
+    await editAndSave('new')
+    expect(element.textContent).toContain('Not saved')
+    expect(element.textContent).toContain('secrets "db" is forbidden')
+  })
+
+  it('closes the editor once the save handler is taken away', async () => {
+    await render(vi.fn().mockResolvedValue(undefined))
+    await act(async () => button('Reveal').click())
+    await act(async () => button('Edit value').click())
+    expect(element.querySelector('textarea')).not.toBeNull()
+    await render(undefined)
+    expect(element.querySelector('textarea')).toBeNull()
+    expect(element.textContent).not.toContain('Save')
+  })
+})