@skyhook-io/k8s-ui 1.16.3 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.16.3",
+  "version": "1.17.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/applications/ApplicationDetail.test.tsx

@@ -377,6 +377,21 @@ describe("ApplicationDetail shell", () => {
     expect(local).toContain('ring is full, so the oldest activity is not loaded')
   })
 
+  it('shows the host history-limit note beside the history, and nothing without one', () => {
+    const base = {
+      selectedView: 'history' as const,
+      onSelectView: () => {},
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+      historyMode: 'local' as const,
+      historyRange: 'all' as const,
+      historyRangeOptions: [{ value: 'all' as const, label: 'All observed' }],
+      historyItems: [],
+    }
+    expect(renderDetail({ ...base, historyRetentionNote: <span>Host limit note</span> })).toContain('<span>Host limit note</span>')
+    expect(renderDetail(base)).not.toContain('Host limit note')
+  })
+
   it('shows a single honest error state when runtime history fails without source history', () => {
     const html = renderDetail({
       selectedView: 'history',

package/src/components/applications/ApplicationDetail.tsx

@@ -89,7 +89,7 @@ import {
   overlayProvenance,
 } from "../../utils/applications";
 import { PaneLoader } from "../ui/PaneLoader";
-import { midTruncate } from "../../utils/format";
+import { formatRelativeAgeTime, midTruncate } from "../../utils/format";
 import { VersionTooltip, AppIdentityTooltip, RolloutSummaryTooltip } from "./AppTooltips";
 import {
   ProvenanceBadge,
@@ -253,6 +253,9 @@ export type ApplicationDetailProps = {
   // The retained ring itself was row-capped: the OLDEST part of the retention
   // window is not loaded, independent of the per-query event limit.
   historyRingTruncated?: boolean;
+  // The host's note about how far back history goes, or the stretch before
+  // the limit reads as "no history".
+  historyRetentionNote?: ReactNode;
   onHistoryRangeChange?: (range: ApplicationHistoryRange) => void;
   onOpenTimeline?: (timestamp?: string) => void;
   onOpenSource?: (source: AppSourceRef) => void;
@@ -346,6 +349,7 @@ export function ApplicationDetail({
   historyCoverageRecordCount,
   historyRuntimeLimited,
   historyRingTruncated,
+  historyRetentionNote,
   onHistoryRangeChange,
   onOpenTimeline,
   onOpenSource,
@@ -784,6 +788,7 @@ export function ApplicationDetail({
             historyCoverageRecordCount={historyCoverageRecordCount}
             historyRuntimeLimited={historyRuntimeLimited}
             historyRingTruncated={historyRingTruncated}
+            historyRetentionNote={historyRetentionNote}
             onHistoryRangeChange={onHistoryRangeChange}
             onOpenTimeline={onOpenTimeline}
             onOpenSource={onOpenSource}
@@ -832,6 +837,7 @@ function ApplicationWorkspace({
   historyCoverageRecordCount,
   historyRuntimeLimited,
   historyRingTruncated,
+  historyRetentionNote,
   onHistoryRangeChange,
   onOpenTimeline,
   onOpenSource,
@@ -884,6 +890,9 @@ function ApplicationWorkspace({
   historyCoverageRecordCount?: number;
   historyRuntimeLimited?: boolean;
   historyRingTruncated?: boolean;
+  // The host's note about how far back history goes, or the stretch before
+  // the limit reads as "no history".
+  historyRetentionNote?: ReactNode;
   onHistoryRangeChange?: (range: ApplicationHistoryRange) => void;
   onOpenTimeline?: (timestamp?: string) => void;
   onOpenSource?: (source: AppSourceRef) => void;
@@ -953,6 +962,7 @@ function ApplicationWorkspace({
           coverageRecordCount={historyCoverageRecordCount}
           runtimeLimited={historyRuntimeLimited}
           ringTruncated={historyRingTruncated}
+          retentionNote={historyRetentionNote}
           workloads={workloads}
           onSelectWorkload={onSelectWorkload}
           onNavigateToResource={onNavigateToResource}
@@ -1827,7 +1837,7 @@ function batchOverviewStats(activity: AppBatchActivity[]) {
   return {
     latestValue: latest?.latestRunPhase || latest?.label || "None",
     latestDetail: latest
-      ? `${latest.latestRunName || latest.workload.name}${latestRunTimestamp(latest) ? ` · ${relativeTime(latestRunTimestamp(latest)!)} ` : ""}`.trim()
+      ? `${latest.latestRunName || latest.workload.name}${latestRunTimestamp(latest) ? ` · ${formatRelativeAgeTime(latestRunTimestamp(latest)!)} ` : ""}`.trim()
       : "No retained runs",
     retainedValue:
       retained > 0 ? `${succeeded} succeeded / ${failed} failed` : "0 retained",
@@ -1842,7 +1852,7 @@ function batchOverviewStats(activity: AppBatchActivity[]) {
           : `${schedules.length} schedules`,
     scheduleDetail:
       schedules.length === 1 && latest?.lastSuccessfulAt
-        ? `last success ${relativeTime(latest.lastSuccessfulAt)}`
+        ? `last success ${formatRelativeAgeTime(latest.lastSuccessfulAt)}`
         : undefined,
     scheduleMono: schedules.length === 1,
   };
@@ -1856,17 +1866,6 @@ function activeWorkloadNames(activity: AppBatchActivity[]): string {
   return `${active.slice(0, 2).join(", ")} +${active.length - 2} more`;
 }
 
-function relativeTime(value: string): string {
-  const t = Date.parse(value);
-  if (Number.isNaN(t)) return value;
-  const diff = Date.now() - t;
-  if (diff < 60_000) return "just now";
-  const minutes = Math.floor(diff / 60_000);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 48) return `${hours}h ago`;
-  return `${Math.floor(hours / 24)}d ago`;
-}
 
 function ApplicationLatestHistory({
   history,
@@ -2093,7 +2092,7 @@ function workloadRuntimeDetail(workload: AppWorkload): string {
   const at =
     batch.latestStartedAt || batch.latestFinishedAt || batch.lastScheduledAt;
   if (batch.latestRunName)
-    return `${midTruncate(batch.latestRunName, 28)}${at ? ` · ${relativeTime(at)}` : ""}`;
+    return `${midTruncate(batch.latestRunName, 28)}${at ? ` · ${formatRelativeAgeTime(at)}` : ""}`;
   if (batch.schedule) return `Schedule ${batch.schedule}`;
   return "No retained runs";
 }
@@ -2201,6 +2200,7 @@ function ApplicationHistoryView({
   coverageRecordCount,
   runtimeLimited,
   ringTruncated,
+  retentionNote,
   workloads,
   onSelectWorkload,
   onNavigateToResource,
@@ -2219,6 +2219,7 @@ function ApplicationHistoryView({
   coverageRecordCount?: number;
   runtimeLimited?: boolean;
   ringTruncated?: boolean;
+  retentionNote?: ReactNode;
   workloads: AppWorkload[];
   onSelectWorkload: (workload: AppWorkload) => void;
   onNavigateToResource?: (resource: ResourceRef) => void;
@@ -2428,6 +2429,7 @@ function ApplicationHistoryView({
                 application activity in this range may not be included.
               </div>
             )}
+            {retentionNote && <div>{retentionNote}</div>}
             {ringTruncated && (
               <div>
                 {mode === "retained"

package/src/components/checks/types.ts

@@ -61,19 +61,8 @@ export interface CheckResourceRef {
 /** Built-in (Radar-detected) finding source. The only V1 source. */
 export const SOURCE_RADAR_BUILTIN = 'radar_builtin';
 
-/**
- * resourceKey mirrors Go `audit.ResourceKey(group, kind, namespace, name)`:
- * `group|Kind|namespace|name`. Group first because group and namespace can each
- * independently be empty; `|` is delimiter-safe (K8s API groups follow
- * DNS-subdomain rules and can't contain it).
- */
-export function resourceKey(group: string, kind: string, namespace: string, name: string): string {
-  return `${group}|${kind}|${namespace}|${name}`;
-}
-
-export function resourceRefKey(ref: CheckResourceRef): string {
-  return resourceKey(ref.group, ref.kind, ref.namespace, ref.name);
-}
+// Preserve the Checks import path while sharing exact resource identity.
+export { resourceKey, resourceRefKey } from '../../utils/resource-refs';
 
 /**
  * checkFindingKey is the canonical built-in finding key:

package/src/components/cnpg/primitives.tsx

@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react'
 import { clsx } from 'clsx'
 import type { HealthLevel } from '../resources/resource-utils'
-import { formatAge } from '../resources/resource-utils'
 import { StatusDot } from '../ui/status-tone'
 import { Tooltip } from '../ui/Tooltip'
 import { AlertBanner } from '../ui/drawer-components'
 import { TONE_TEXT_CLASS } from '../ui/severity-tone'
 import type { CNPGFact, CNPGProblem } from './workspace'
+import { formatRelativeAgeTime } from '../../utils/format'
 
 export interface CNPGRef {
   kind: string
@@ -35,11 +35,11 @@ export function toneTextClass(tone: HealthLevel): string {
 }
 
 export function FactValue({ fact, className }: { fact: CNPGFact; className?: string }) {
-  const age = fact.at ? formatAge(fact.at) : null
+  const when = fact.at ? formatRelativeAgeTime(fact.at) : null
   const body = (
     <span className={clsx(toneTextClass(fact.tone), className)}>
       {fact.text}
-      {age && <span className="text-theme-text-secondary">{fact.text ? ' · ' : ''}{age} ago</span>}
+      {when && <span className="text-theme-text-secondary">{fact.text ? ' · ' : ''}{when}</span>}
     </span>
   )
   if (!fact.source && !fact.at) return body

package/src/components/gitops/GitOpsTableView.tsx

@@ -40,6 +40,7 @@ import { isArgoOperationInProgress, isArgoSuspendedByRadar } from '../resources/
 import { toggleSet } from './GitOpsGraphFilterRail'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import { parseContextName } from '../../utils/context-name'
+import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format'
 
 // =============================================================================
 // GitOpsTableView — the canonical GitOps fleet list (Argo + Flux).
@@ -1373,8 +1374,8 @@ function GitOpsTable({
               )}
               <TableCell>
                 {row.terminating
-                  ? <span className="text-orange-400/80">Pending {formatRelativeAge(row.terminationStartedAt ?? '') || 'now'}</span>
-                  : formatRelativeAge(row.lastSync || row.createdAt)}
+                  ? <span className="text-orange-400/80">{pendingFor(row.terminationStartedAt)}</span>
+                  : row.lastSync ? formatRelativeAgeTime(row.lastSync, '') : row.createdAt ? `Created ${formatRelativeAgeTime(row.createdAt, '')}` : ''}
               </TableCell>
               {showActions && onRowAction && (
                 <td
@@ -1603,9 +1604,9 @@ function GitOpsTile({
             <div className="truncate font-mono text-[11px] text-theme-text-tertiary">{shortRevision(revision)}</div>
           )}
           {row.terminating ? (
-            <div className="font-medium text-orange-400/80">Pending {formatRelativeAge(row.terminationStartedAt ?? '') || 'now'}</div>
+            <div className="font-medium text-orange-400/80">{pendingFor(row.terminationStartedAt)}</div>
           ) : (
-            lastSyncRaw && <div className={clsx('font-medium', recencyClass)}>{formatRelativeAge(lastSyncRaw)}</div>
+            lastSyncRaw && <div className={clsx('font-medium', recencyClass)}>{formatRelativeAgeTime(lastSyncRaw, '')}</div>
           )}
         </div>
         {(dest || ns || row.project) && (
@@ -1926,26 +1927,10 @@ function compactClusterURL(dest: string): string {
     .replace(/^kubernetes\.default\.svc(:\d+)?\/?$/, 'in-cluster')
 }
 
-// formatRelativeAge — inline relative-time formatter. Returns "" for unparseable
-// inputs so callers can treat empty as "no timestamp" and skip the time
-// cell gracefully.
-function formatRelativeAge(rfc3339: string): string {
-  if (!rfc3339) return ''
-  const time = Date.parse(rfc3339)
-  if (!Number.isFinite(time)) return ''
-  const diffMs = Date.now() - time
-  const s = Math.max(0, Math.floor(diffMs / 1000))
-  if (s < 60) return `${s}s ago`
-  const m = Math.floor(s / 60)
-  if (m < 60) return `${m}m ago`
-  const h = Math.floor(m / 60)
-  if (h < 24) return `${h}h ago`
-  const d = Math.floor(h / 24)
-  if (d < 30) return `${d}d ago`
-  const mo = Math.floor(d / 30)
-  if (mo < 12) return `${mo}mo ago`
-  const y = Math.floor(d / 365)
-  return `${y}y ago`
+// How long deletion has been pending, not when it started.
+function pendingFor(startedAt?: string): string {
+  const age = formatCompactAge(startedAt)
+  return age ? `Pending for ${age}` : 'Pending'
 }
 
 // =============================================================================

package/src/components/gitops/detail-helpers.ts

@@ -82,7 +82,7 @@ export function describeGitOpsTerminating(summary?: {
   finalizers?: string[]
 }): { chipTooltip: string; actionDisabledTooltip: string } {
   const ageText = formatCompactAge(summary?.terminationStartedAt)
-  const ageSuffix = ageText ? ` ${ageText} ago` : ''
+  const ageSuffix = ageText ? ` for ${ageText}` : ''
   const finalizers = summary?.finalizers ?? []
   const finSuffix = finalizers.length > 0 ? ` Finalizers: ${finalizers.join(', ')}.` : ''
   const ageInline = ageText ? ` (${ageText})` : ''

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -72,7 +72,7 @@ export function GitOpsStatusStrip({ insight, loading, renderRevisionMeta }: GitO
   const revision = summary.lastRevision || summary.targetRevision || ''
   const shortRev = shortRevisionForCommit(revision)
   const commitUrl = revision ? commitURLForRepo(summary.source, revision) : null
-  const reconcileAge = formatRelative(summary.lastReconcile)
+  const reconcileAge = formatRelativeAgeTime(summary.lastReconcile)
   const healthSummary = buildHealthSummary(insight.changes ?? [])
   // STUCK belongs with the operation chip — it's a property of the same
   // state ("failed AND won't self-recover"). Co-locating FAILED + STUCK ·
@@ -257,7 +257,7 @@ function buildHealthSummary(changes: GitOpsChange[]): { text: string; tone: stri
 // disclosure — still available for forensics but not noise during deletion.
 function TerminatingStatusStrip({ summary }: { summary: NonNullable<GitOpsInsight['summary']> }) {
   const [showHistorical, setShowHistorical] = useState(false)
-  const pending = formatRelative(summary.terminationStartedAt) || 'recently'
+  const pending = formatRelativeAgeTime(summary.terminationStartedAt) || 'recently'
   const finalizers = summary.finalizers ?? []
   return (
     <div className="border-b border-orange-500/20 bg-orange-500/[0.04] px-4 py-2">
@@ -282,7 +282,7 @@ function TerminatingStatusStrip({ summary }: { summary: NonNullable<GitOpsInsigh
           {(summary.lastRevision || summary.targetRevision) && (
             <MetaFact label="Revision" value={summary.lastRevision || summary.targetRevision || '-'} mono />
           )}
-          {summary.lastReconcile && <MetaFact label="Last reconcile" value={formatRelative(summary.lastReconcile)} />}
+          {summary.lastReconcile && <MetaFact label="Last reconcile" value={formatRelativeAgeTime(summary.lastReconcile)} />}
           {summary.autoSyncMode && <MetaFact label="Sync mode" value={summary.autoSyncMode} />}
         </div>
       </Collapse>
@@ -1628,7 +1628,7 @@ function RecentEventsPanel({ events }: { events: NonNullable<GitOpsChange['recen
                 {e.count && e.count > 1 && (
                   <span className="text-[10px] text-theme-text-tertiary">×{e.count}</span>
                 )}
-                <span className="ml-auto text-[10px] text-theme-text-tertiary">{formatRelativeTime(e.lastTimestamp)}</span>
+                <span className="ml-auto text-[10px] text-theme-text-tertiary">{formatRelativeAgeTime(e.lastTimestamp, '')}</span>
               </div>
               <p className="mt-0.5 text-theme-text-secondary">{e.message}</p>
             </div>
@@ -1639,10 +1639,6 @@ function RecentEventsPanel({ events }: { events: NonNullable<GitOpsChange['recen
   )
 }
 
-function formatRelativeTime(value: string): string {
-  return formatRelativeAgeTime(value, '')
-}
-
 interface GitOpsActivityInsightViewProps {
   insight?: GitOpsInsight | null
   error?: Error | null
@@ -1729,7 +1725,7 @@ function HistoryRows({
               <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
                 <span className="font-mono text-xs text-theme-text-primary">{item.revision || item.phase || '-'}</span>
                 <PhaseChip phase={item.phase} message={item.message} />
-                <span className="text-[11px] text-theme-text-tertiary">{formatRelative(item.deployedAt)}</span>
+                <span className="text-[11px] text-theme-text-tertiary">{formatRelativeAgeTime(item.deployedAt)}</span>
                 {item.initiatedBy && (
                   <span className="text-[11px] text-theme-text-tertiary">by {item.initiatedBy}</span>
                 )}
@@ -1831,6 +1827,3 @@ function InsightErrorState({ error }: { error: Error }) {
   )
 }
 
-function formatRelative(value?: string) {
-  return formatRelativeAgeTime(value)
-}

package/src/components/gitops/tree/GitOpsTreeGraph.tsx

@@ -752,10 +752,10 @@ function buildChips(node: GitOpsTreeNode): Array<{ label?: string; value: string
   // detail title row and fleet rows.
   if (isNodeTerminating(node)) {
     chips.push({ value: 'Terminating', tone: 'warning' })
-    if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatAge(data.createdAt) })
+    if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatCompactAge(data.createdAt) })
     return chips
   }
-  if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatAge(data.createdAt) })
+  if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatCompactAge(data.createdAt) })
   const revision = stringData(data.revision) || stringData(data.lastSyncRevision)
   if (revision) chips.push({ label: 'rev', value: revision })
   const attempted = stringData(data.attemptedRevision)
@@ -886,6 +886,3 @@ function pluralize(kind: string): string {
   return `${kind}s`
 }
 
-function formatAge(timestamp: string): string {
-  return formatCompactAge(timestamp)
-}

package/src/components/issues/issue-timing.ts

@@ -113,9 +113,9 @@ export function issueTiming(issue: Issue): IssueTimingDisplay | null {
       }
       return {
         kind: 'regression',
-        chip: 'after healthy',
+        chip: issue.kind === 'Node' && issue.reason === 'NotReady' ? 'NotReady' : 'after healthy',
         meta: 'failing evidence followed a healthy period',
-        tooltip: 'A healthy period preceded this failing evidence.',
+        tooltip: issue.kind === 'Node' && issue.reason === 'NotReady' ? 'The Ready condition stopped reporting healthy at this time.' : 'A healthy period preceded this failing evidence.',
       };
     }
     case 'started_at_resource_creation': {

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

@@ -139,7 +139,7 @@ describe('IssueRow', () => {
 
   it('uses the category-group chip class in the queue row', () => {
     const html = renderToString(createElement(IssueRow, {
-      issue: mk({ category_group: 'control_plane' }),
+      issue: mk({ category_group: 'control_plane', kind: 'Node' }),
       open: false,
       onToggle: () => undefined,
     }))

package/src/components/logs/WorkloadLogsViewer.notice.test.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import { ToastProvider } from '../ui/Toast'
+import { WorkloadLogsViewer } from './WorkloadLogsViewer'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+class FakeEventSource extends EventTarget {
+  static last: FakeEventSource | undefined
+  constructor(readonly url: string) {
+    super()
+    FakeEventSource.last = this
+  }
+  close() {}
+  emit(type: string, data: unknown) {
+    this.dispatchEvent(new MessageEvent(type, { data: JSON.stringify(data) }))
+  }
+}
+
+let root: Root
+let element: HTMLDivElement
+beforeEach(() => {
+  vi.stubGlobal('EventSource', FakeEventSource)
+  element = document.createElement('div')
+  document.body.appendChild(element)
+  root = createRoot(element)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  element.remove()
+  vi.unstubAllGlobals()
+})
+
+it('clears the unreadable-sources notice when the stream ends', async () => {
+  const notice = '1 source could not be read: web-0/app: Kubernetes did not return this container\'s logs'
+  await act(async () =>
+    root.render(
+      <ToastProvider>
+        <WorkloadLogsViewer
+          name="web"
+          fetchAll={async () => ({ pods: [], logs: [] })}
+          createStream={() => new EventSource('/stream')}
+          autoStream
+        />
+      </ToastProvider>,
+    ),
+  )
+  const source = FakeEventSource.last
+  if (!source) throw new Error('stream was not opened')
+
+  await act(async () => source.emit('connected', { pods: [{ name: 'web-0', containers: ['app'] }] }))
+  await act(async () => source.emit('notice', { notice }))
+  expect(element.textContent).toContain(notice)
+
+  await act(async () => source.emit('end', { reason: 'no pods found' }))
+  expect(element.textContent).not.toContain(notice)
+})

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -246,7 +246,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             // while new pod logs start flowing in
           }
         },
+        onNotice: (data: unknown) => {
+          const notice = typeof data === 'object' && data !== null && 'notice' in data ? data.notice : ''
+          setNotice(typeof notice === 'string' ? notice : '')
+        },
         onEnd: (data: any) => {
+          setNotice('')
           if (data?.emptyMessage) setEmptyMessage(data.emptyMessage)
           if (data?.command) setEmptyCommand(data.command)
         },

package/src/components/logs/useLogStream.ts

@@ -10,6 +10,8 @@ export interface LogStreamHandlers {
   onPodAdded?: (data: unknown) => void
   /** Called when pods are terminated during streaming (workload logs only) */
   onPodRemoved?: (data: unknown) => void
+  /** Called when the set of sources the stream cannot read changes (workload logs only) */
+  onNotice?: (data: unknown) => void
   /** Called when the server ends the stream cleanly */
   onEnd?: (data: unknown) => void
 }
@@ -92,6 +94,15 @@ export function useLogStream() {
       }
     })
 
+    es.addEventListener('notice', (event) => {
+      if (!isCurrent()) return
+      if (handlers.onNotice) {
+        try { handlers.onNotice(JSON.parse((event as MessageEvent).data)) } catch (e) {
+          console.error('Failed to parse notice event:', e)
+        }
+      }
+    })
+
     es.addEventListener('end', (event) => {
       if (!isCurrent()) return
       endedRef.current = true

package/src/components/resources/ResourcesView.tsx

@@ -147,10 +147,10 @@ import {
   type PrinterColumnDef, type PrinterTable, PRINTER_COLUMN_PREFIX, formatPrinterCell, printerCellSortValue,
   printerCellTone, printerColumnKey, printerColumnWidth, printerTableKey, printerTableMatchesKind, readPrinterCell,
 } from './printer-columns'
-import { SEVERITY_BADGE, EVENT_TYPE_COLORS } from '../../utils/badge-colors'
+import { SEVERITY_BADGE, SEVERITY_TEXT, healthToSeverity, EVENT_TYPE_COLORS } from '../../utils/badge-colors'
 import { pluralize } from '../../utils/pluralize'
 import { getPodGpuCount, getNodeGpuCount } from '../../utils/extended-resources'
-import { parseQuantityToNumber } from '../../utils/format'
+import { formatRelativeAgeTime, parseQuantityToNumber } from '../../utils/format'
 import { type CustomColumnDef, type CustomColumnSource, customColumnKey, readCustomColumnValue, sanitizeCustomColumnDefs } from '../../utils/custom-columns'
 import { isRolloutActivityVisible } from '../../utils/workload-rollout'
 import { FreshnessControl, type FreshnessConnection } from '../ui/FreshnessControl'
@@ -6128,7 +6128,7 @@ export function ResourcesView({
           )}
 
           {/* Column picker */}
-          <div className="relative" ref={columnPickerRef}>
+          <div className="relative flex" ref={columnPickerRef}>
             <Tooltip content="Configure columns">
             <button
               onClick={() => setShowColumnPicker(prev => !prev)}
@@ -8722,7 +8722,7 @@ function NodeCell({ resource, column, majorityNodeMinorVersion }: { resource: an
           </span>
           {problems.length > 0 && (
             <Tooltip content={problems.join(', ')}>
-              <span className="text-red-400">
+              <span className={SEVERITY_TEXT[healthToSeverity(status.level ?? 'unknown')]}>
                 <AlertTriangle className="w-3.5 h-3.5" />
               </span>
             </Tooltip>
@@ -8735,7 +8735,8 @@ function NodeCell({ resource, column, majorityNodeMinorVersion }: { resource: an
       return <span className="text-sm text-theme-text-secondary">{roles}</span>
     }
     case 'conditions': {
-      const { problems, healthy } = getNodeConditions(resource)
+      const { problems, healthy, readinessLabel } = getNodeConditions(resource)
+      if (problems.length === 0 && !healthy) return <span className="text-theme-text-secondary">{readinessLabel}</span>
       if (healthy) {
         return <span className="text-sm text-green-400">Healthy</span>
       }
@@ -9318,9 +9319,7 @@ function LeaseCell({ resource, column }: { resource: any; column: string }) {
       const elapsed = (Date.now() - new Date(renewTime).getTime()) / 1000
       const duration = resource.spec?.leaseDurationSeconds || 0
       const isStale = duration > 0 && elapsed > duration
-      const diff = Date.now() - new Date(renewTime).getTime()
-      const seconds = Math.floor(diff / 1000)
-      const label = seconds < 60 ? `${seconds}s ago` : seconds < 3600 ? `${Math.floor(seconds / 60)}m ago` : seconds < 86400 ? `${Math.floor(seconds / 3600)}h ago` : `${Math.floor(seconds / 86400)}d ago`
+      const label = formatRelativeAgeTime(renewTime)
       return <span className={clsx('text-sm', isStale ? 'text-red-400' : 'text-green-400')} title={new Date(renewTime).toLocaleString()}>{label}</span>
     }
     default:

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

@@ -1,7 +1,7 @@
 import { Activity, BarChart3, Server } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
 import { Badge, type BadgeSeverity } from '../../ui/Badge'
-import { formatAge } from '../resource-utils'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface AnalysisRunRendererProps {
   data: any
@@ -60,8 +60,8 @@ export function AnalysisRunRenderer({ data, onNavigate }: AnalysisRunRendererPro
           <Property label="Phase" value={<Badge severity={phaseSeverity(phase)}>{phase}</Badge>} />
           {labels['rollout-type'] && <Property label="Triggered as" value={labels['rollout-type']} />}
           {labels['step-index'] && <Property label="Canary step" value={labels['step-index']} />}
-          <Property label="Started" value={status.startedAt ? formatAge(status.startedAt) : undefined} />
-          <Property label="Completed" value={status.completedAt ? formatAge(status.completedAt) : undefined} />
+          <Property label="Started" value={status.startedAt ? <TimeValue timestamp={status.startedAt} /> : undefined} />
+          <Property label="Completed" value={status.completedAt ? <TimeValue timestamp={status.completedAt} /> : undefined} />
           <Property label="Message" value={status.message} />
           {ownerRollout && (
             <Property

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

@@ -1,7 +1,6 @@
 import { GitBranch, FolderTree, Settings, Target, XCircle, History, ListChecks, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import { GitOpsStatusBadge, ManagedResourcesList, SyncCountdown } from '../../gitops'
 import {
   argoStatusToGitOpsStatus,
@@ -11,6 +10,8 @@ import {
 } from '../../../types/gitops'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 import { buildRepoBrowseUrl, buildPathBrowseUrl } from '../../../utils/git-provider-urls'
+import { TimeValue } from '../../ui/ScheduleValue'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 const REPO_LINK_CLASS = 'text-blue-400 hover:text-blue-300 hover:underline break-all'
 
@@ -297,10 +298,10 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <Property label="Message" value={operationState.message} />
             )}
             {operationState.startedAt && (
-              <Property label="Started" value={formatAge(operationState.startedAt)} />
+              <Property label="Started" value={<TimeValue timestamp={operationState.startedAt} />} />
             )}
             {operationState.finishedAt && (
-              <Property label="Finished" value={formatAge(operationState.finishedAt)} />
+              <Property label="Finished" value={<TimeValue timestamp={operationState.finishedAt} />} />
             )}
             {operationState.retryCount != null && (
               <Property
@@ -402,7 +403,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
                     </span>
                     {entry.deployedAt && (
                       <span className="text-xs text-theme-text-tertiary">
-                        {formatAge(entry.deployedAt)}
+                        {formatRelativeAgeTime(entry.deployedAt)}
                       </span>
                     )}
                   </div>
@@ -425,7 +426,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <Property label="Current Revision" value={status.sync.revision} />
             )}
             {status.reconciledAt && (
-              <Property label="Last Reconciled" value={formatAge(status.reconciledAt)} />
+              <Property label="Last Reconciled" value={<TimeValue timestamp={status.reconciledAt} />} />
             )}
           </PropertyList>
         </Section>

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

@@ -2,8 +2,8 @@ import { useState } from 'react'
 import { Server, Globe, Network, Layers, Download, CheckCircle, AlertCircle } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
-import { formatAge } from '../resource-utils'
 import { getClusterStatus, getClusterClass, getClusterVersion, getClusterEndpoint, getProviderFromInfraKind, parseCAPIConditionMessage } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -119,7 +119,7 @@ export function CAPIClusterRenderer({ data, onNavigate, apiBase = '', canConnect
           {className !== '-' && <Property label="Cluster Class" value={className} />}
           {endpoint !== '-' && <Property label="Control Plane Endpoint" value={endpoint} />}
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>