@skyhook-io/k8s-ui 1.16.2 → 1.17.0

package/src/components/resources/ResourcesSidebar.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useRef, useCallback, useId, forwardRef } from 'react'
+import { useState, useMemo, useEffect, useRef, useCallback, useId, forwardRef, type ComponentType } from 'react'
 import {
   Search,
   Eye,
@@ -29,6 +29,28 @@ export interface PinnedItem {
   group: string
 }
 
+/** A task destination shown inside a category, above its exact kinds. */
+export interface SidebarCategoryDestination {
+  id: string
+  label: string
+  icon?: ComponentType<{ className?: string }>
+  /** Problem count. `undefined` renders no badge; `null` renders the unknown dash. */
+  count?: number | null
+  countTitle?: string
+  active?: boolean
+  /** The object currently open under this destination, nested beneath it. */
+  child?: { label: string; title?: string }
+  onSelect: () => void
+}
+
+export interface SidebarCategoryWorkspace {
+  destinations: SidebarCategoryDestination[]
+  /** Kinds start collapsed under a "Resource kinds" disclosure until the user opens them. */
+  defaultKindsCollapsed?: boolean
+  /** Explains what the destination counts are scoped to. */
+  scopeNote?: string
+}
+
 export interface ResourcesSidebarProps {
   selectedKind: SelectedKindInfo | null
   onSelectedKindChange: (kind: SelectedKindInfo) => void
@@ -48,10 +70,15 @@ export interface ResourcesSidebarProps {
   /** Called when a kind is selected via keyboard (Enter in the filter). Parent uses this
    *  to move focus to the next UI level (e.g., the table search input). */
   onKindNavigated?: () => void
+  /** Task destinations keyed by category name (e.g. "CloudNativePG"). A category
+   *  with a workspace stays visible even when it has no resources. */
+  categoryWorkspaces?: Record<string, SidebarCategoryWorkspace>
 }
 
 // Persisted across remounts so collapsed categories survive tab switches
 let persistedExpandedCategories: Set<string> | null = null
+// Per-category "Resource kinds" disclosure, once the user has toggled it.
+const persistedKindsOpen = new Map<string, boolean>()
 const COUNT_UNAVAILABLE_MESSAGE = 'Count unavailable. Open to view resources.'
 
 // Fallback resource types when API resources aren't loaded yet
@@ -102,10 +129,11 @@ interface ResourceTypeButtonProps {
   isPinned?: boolean
   onTogglePin?: () => void
   onClick: () => void
+  indent?: boolean
 }
 
 const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps>(
-  function ResourceTypeButton({ resource, count, isSelected, isHighlighted, isForbidden: forbidden, isPinned, onTogglePin, onClick }, ref) {
+  function ResourceTypeButton({ resource, count, isSelected, isHighlighted, isForbidden: forbidden, isPinned, onTogglePin, onClick, indent }, ref) {
     const Icon = getResourceIcon(resource.kind, resource.group)
     return (
       <button
@@ -113,6 +141,7 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
         onClick={onClick}
         className={clsx(
           'w-full flex items-center gap-2 px-2 xl:px-3 py-1.5 rounded-lg text-sm transition-colors group/kind min-w-0',
+          indent && 'pl-5 xl:pl-6',
           isSelected
             ? 'selection-strong selection-text'
             : isHighlighted
@@ -193,6 +222,7 @@ export function ResourcesSidebar({
   onNavigate,
   basePath,
   onKindNavigated,
+  categoryWorkspaces,
 }: ResourcesSidebarProps) {
   // Wraps kind selection to also navigate when basePath/onNavigate are provided
   const selectKind = (kind: SelectedKindInfo) => {
@@ -229,8 +259,35 @@ export function ResourcesSidebar({
     }
   }, [])
 
-  // Effective selected kind — fall back to a safe default
-  const effectiveSelectedKind = selectedKind ?? { name: 'pods', kind: 'Pod', group: '' }
+  const activeDestinationCategory = useMemo(() => {
+    for (const [name, ws] of Object.entries(categoryWorkspaces ?? {})) {
+      if (ws.destinations.some(d => d.active)) return name
+    }
+    return null
+  }, [categoryWorkspaces])
+
+  // Effective selected kind — fall back to a safe default. While a workspace
+  // destination is active no kind is selected.
+  const effectiveSelectedKind = activeDestinationCategory
+    ? { name: '', kind: '', group: '\u0000' }
+    : selectedKind ?? { name: 'pods', kind: 'Pod', group: '' }
+
+  const [kindsOpenOverrides, setKindsOpenOverrides] = useState<Map<string, boolean>>(() => new Map(persistedKindsOpen))
+  const kindsOpen = (categoryName: string) => {
+    const ws = categoryWorkspaces?.[categoryName]
+    if (!ws) return true
+    const override = kindsOpenOverrides.get(categoryName)
+    if (override !== undefined) return override
+    const selectedHere = !activeDestinationCategory && categories?.find(c => c.name === categoryName)?.resources.some(
+      r => r.name === effectiveSelectedKind.name && r.group === effectiveSelectedKind.group,
+    )
+    return selectedHere || !ws.defaultKindsCollapsed
+  }
+  const toggleKinds = (categoryName: string) => {
+    const next = !kindsOpen(categoryName)
+    persistedKindsOpen.set(categoryName, next)
+    setKindsOpenOverrides(prev => new Map(prev).set(categoryName, next))
+  }
 
   // Categorize resources for sidebar
   const categories = useMemo(() => {
@@ -254,6 +311,12 @@ export function ResourcesSidebar({
     }
   }, [categories, effectiveSelectedKind.kind, effectiveSelectedKind.name]) // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    if (activeDestinationCategory && !expandedCategories.has(activeDestinationCategory)) {
+      setExpandedCategories(prev => new Set([...prev, activeDestinationCategory]))
+    }
+  }, [activeDestinationCategory]) // eslint-disable-line react-hooks/exhaustive-deps
+
   // Derive counts from resourceCounts prop
   const resourcesToCount = useMemo(() => {
     if (categories) {
@@ -333,8 +396,11 @@ export function ResourcesSidebar({
       return { ...category, total, visibleResources }
     })
 
-    // Sort: categories with resources first, empty ones at bottom
+    // Sort: the category whose workspace is open first, then categories with
+    // resources, empty ones at bottom
     const sorted = withTotals.sort((a, b) => {
+      if (a.name === activeDestinationCategory) return -1
+      if (b.name === activeDestinationCategory) return 1
       if (a.total === 0 && b.total > 0) return 1
       if (a.total > 0 && b.total === 0) return -1
       return 0
@@ -342,13 +408,13 @@ export function ResourcesSidebar({
 
     // Filter out empty groups unless they have visible resources or showEmptyKinds is true.
     const visibleCategories = sorted.filter(category => {
-      const shouldShow = category.total > 0 || category.visibleResources.length > 0 || showEmptyKinds
+      const shouldShow = category.total > 0 || category.visibleResources.length > 0 || showEmptyKinds || !!categoryWorkspaces?.[category.name]
       if (!shouldShow) totalHiddenGroups++
       return shouldShow
     })
 
     return { sortedCategories: visibleCategories, hiddenKindsCount: totalHiddenKinds, hiddenGroupsCount: totalHiddenGroups }
-  }, [categories, counts, showEmptyKinds, effectiveSelectedKind.name, effectiveSelectedKind.kind, effectiveSelectedKind.group])
+  }, [categories, counts, showEmptyKinds, effectiveSelectedKind.name, effectiveSelectedKind.kind, effectiveSelectedKind.group, categoryWorkspaces, activeDestinationCategory])
 
   // Filter sidebar categories/kinds by the kind search term
   const filteredCategories = useMemo(() => {
@@ -400,7 +466,7 @@ export function ResourcesSidebar({
     }
     if (filteredCategories) {
       for (const cat of filteredCategories) {
-        if (effectiveExpandedCategories.has(cat.name)) {
+        if (effectiveExpandedCategories.has(cat.name) && (isKindFiltering || kindsOpen(cat.name))) {
           for (const r of cat.visibleResources) {
             kinds.push({ name: r.name, kind: r.kind, group: r.group })
           }
@@ -408,7 +474,7 @@ export function ResourcesSidebar({
       }
     }
     return kinds
-  }, [favoritesExpanded, pinned, filteredCategories, effectiveExpandedCategories])
+  }, [favoritesExpanded, pinned, filteredCategories, effectiveExpandedCategories, kindsOpenOverrides, categoryWorkspaces, activeDestinationCategory]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
   // Reset highlight when the filter or kind list changes
@@ -550,6 +616,8 @@ export function ResourcesSidebar({
           filteredCategories.map((category) => {
             const isExpanded = effectiveExpandedCategories.has(category.name)
             const rawGroupTitle = rawCRDGroupTitle(category.resources)
+            const workspace = categoryWorkspaces?.[category.name]
+            const showKinds = isKindFiltering || kindsOpen(category.name)
             return (
               <div key={category.name} className="mb-2">
                 <button
@@ -567,8 +635,17 @@ export function ResourcesSidebar({
                   )}
                 </button>
                 <Collapse open={isExpanded} id={disclosurePanelId(categoryPanelBase, category.name)}>
+                  {workspace && !isKindFiltering && (
+                    <WorkspaceDestinations
+                      workspace={workspace}
+                      kindsOpen={showKinds}
+                      onToggleKinds={() => toggleKinds(category.name)}
+                      kindsPanelId={disclosurePanelId(categoryPanelBase, `${category.name}-kinds`)}
+                    />
+                  )}
+                  <Collapse open={showKinds} id={disclosurePanelId(categoryPanelBase, `${category.name}-kinds`)}>
                   <div className="space-y-0.5">
-                    {category.visibleResources.map((resource) => {
+                    {(workspace ? sortByGroup(category.visibleResources) : category.visibleResources).map((resource, index, list) => {
                       const resourceIsPinned = isPinned(resource.name, resource.group)
                       const isResourceSelected =
                         (effectiveSelectedKind.name === resource.name && effectiveSelectedKind.group === resource.group) ||
@@ -576,9 +653,13 @@ export function ResourcesSidebar({
                       // If the resource is pinned, let the Favorites section own the highlight
                       const showSelected = isResourceSelected && !resourceIsPinned
                       const highlighted = isKindHighlighted(resource.name, resource.group)
+                      const groupLabel = workspace ? groupHeaderBefore(list, index) : null
                       return (
+                      <div key={`${resource.group}/${resource.name}`}>
+                      {groupLabel && (
+                        <div className="pl-6 pr-2 pt-1.5 pb-0.5 text-[10.5px] font-mono text-theme-text-tertiary truncate" title={groupLabel}>{groupLabel}</div>
+                      )}
                       <ResourceTypeButton
-                        key={resource.name}
                         ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
                         resource={resource}
                         count={counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind] ?? null}
@@ -588,10 +669,13 @@ export function ResourcesSidebar({
                         isPinned={resourceIsPinned}
                         onTogglePin={() => togglePin({ name: resource.name, kind: resource.kind, group: resource.group })}
                         onClick={() => selectKind({ name: resource.name, kind: resource.kind, group: resource.group })}
+                        indent={!!workspace}
                       />
+                      </div>
                       )
                     })}
                   </div>
+                  </Collapse>
                 </Collapse>
               </div>
             )
@@ -673,3 +757,91 @@ export function ResourcesSidebar({
     </div>
   )
 }
+
+function sortByGroup(resources: APIResource[]): APIResource[] {
+  const size = new Map<string, number>()
+  for (const r of resources) size.set(r.group, (size.get(r.group) ?? 0) + 1)
+  return [...resources].sort((a, b) =>
+    a.group === b.group
+      ? a.kind.localeCompare(b.kind)
+      : (size.get(b.group) ?? 0) - (size.get(a.group) ?? 0) || a.group.localeCompare(b.group),
+  )
+}
+
+function groupHeaderBefore(resources: APIResource[], index: number): string | null {
+  const groups = new Set(resources.map(r => r.group))
+  if (groups.size < 2) return null
+  const group = resources[index]?.group
+  if (index > 0 && resources[index - 1]?.group === group) return null
+  return group || 'core'
+}
+
+function WorkspaceDestinations({
+  workspace,
+  kindsOpen,
+  onToggleKinds,
+  kindsPanelId,
+}: {
+  workspace: SidebarCategoryWorkspace
+  kindsOpen: boolean
+  onToggleKinds: () => void
+  kindsPanelId: string
+}) {
+  return (
+    <div className="space-y-0.5">
+      <div className="pl-5 pr-2 pt-0.5 pb-0.5 text-[10.5px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Workspace</div>
+      {workspace.destinations.map((d) => {
+        const Icon = d.icon
+        return (
+          <div key={d.id}>
+            <button
+              onClick={d.onSelect}
+              aria-current={d.active && !d.child ? 'page' : undefined}
+              className={clsx(
+                'w-full flex items-center gap-2 pl-5 xl:pl-6 pr-2 xl:pr-3 py-1.5 rounded-lg text-sm transition-colors min-w-0',
+                d.active && !d.child
+                  ? 'selection-strong selection-text'
+                  : d.active
+                    ? 'text-theme-text-primary font-medium hover:bg-theme-elevated'
+                    : 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary',
+              )}
+            >
+              {Icon && <Icon className="w-4 h-4 shrink-0" />}
+              <span className="flex-1 text-left truncate">{d.label}</span>
+              {d.count === null ? (
+                <Tooltip content={d.countTitle ?? COUNT_UNAVAILABLE_MESSAGE} position="left">
+                  <span className="text-xs py-0.5 rounded text-center font-mono w-8 bg-theme-elevated text-theme-text-disabled">–</span>
+                </Tooltip>
+              ) : d.count !== undefined && d.count > 0 ? (
+                <Tooltip content={d.countTitle ?? `${d.count}`} position="left">
+                  <span className="text-xs py-0.5 rounded text-center font-mono w-8 status-degraded">{d.count}</span>
+                </Tooltip>
+              ) : null}
+            </button>
+            {d.child && (
+              <div
+                className="ml-10 xl:ml-11 mr-1 my-0.5 pl-2 pr-2 py-1 rounded-md text-xs font-medium truncate selection-strong selection-text border-l-2 border-skyhook-500"
+                title={d.child.title ?? d.child.label}
+                aria-current="page"
+              >
+                {d.child.label}
+              </div>
+            )}
+          </div>
+        )
+      })}
+      {workspace.scopeNote && (
+        <div className="pl-6 pr-2 pt-0.5 text-[11px] text-theme-text-tertiary">{workspace.scopeNote}</div>
+      )}
+      <button
+        aria-expanded={kindsOpen}
+        aria-controls={kindsPanelId}
+        onClick={onToggleKinds}
+        className="w-full flex items-center gap-1.5 pl-5 pr-2 pt-2 pb-0.5 text-[10.5px] font-semibold uppercase tracking-wide text-theme-text-tertiary hover:text-theme-text-secondary"
+      >
+        <CollapseChevron open={kindsOpen} className="w-3 h-3" />
+        <span>Resource kinds</span>
+      </button>
+    </div>
+  )
+}

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'
@@ -205,7 +205,7 @@ import { CalicoInfraCell, CalicoPolicyCell } from './renderers/calico-cells'
 import { isCalicoPolicyResource, isCoreNetworkPolicyKind } from './resource-utils-calico'
 import { useRegisterShortcut, useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { ResourcesSidebar } from './ResourcesSidebar'
-import type { SelectedKindInfo } from './ResourcesSidebar'
+import type { SelectedKindInfo, SidebarCategoryWorkspace } from './ResourcesSidebar'
 import { CompareTray, togglePick, pickIndex, refToParam, SIDE_TONES, type CompareTrayPick, type NamespacedRef } from '../compare'
 import { ConfirmDialog } from '../ui/ConfirmDialog'
 
@@ -3411,6 +3411,8 @@ interface ResourcesViewProps {
   onSelectedKindChange?: (kind: { name: string; kind: string; group: string }) => void
   /** When true, the sidebar is not rendered. Useful when a standalone ResourcesSidebar is used externally. */
   hideSidebar?: boolean
+  /** Task destinations rendered inside sidebar categories (see ResourcesSidebar). */
+  sidebarCategoryWorkspaces?: Record<string, SidebarCategoryWorkspace>
   /** Callback when the [+] create button is clicked. Receives the currently selected kind info. */
   onCreateResource?: (kind: { name: string; kind: string; group: string } | null) => void
   /** Default kind when the URL does not include one. */
@@ -3653,6 +3655,7 @@ export function ResourcesView({
   onOpenWorkloadLogs,
   onSelectedKindChange,
   hideSidebar = false,
+  sidebarCategoryWorkspaces,
   onCreateResource,
   defaultKind = DEFAULT_KIND_INFO,
   extraLeadingColumns,
@@ -5867,6 +5870,7 @@ export function ResourcesView({
           pinned={pinned}
           togglePin={togglePin}
           isPinned={isPinned}
+          categoryWorkspaces={sidebarCategoryWorkspaces}
           onKindNavigated={() => {
             // After selecting a kind via keyboard, move focus to the table search
             // so the user can immediately filter within the selected kind.
@@ -6124,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)}
@@ -8718,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>
@@ -8731,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>
       }
@@ -9314,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/index.ts

@@ -54,7 +54,7 @@ export * from './resource-utils-velero'
 export { ResourcesView, ResourcesViewDataContext, hasCuratedColumns } from './ResourcesView'
 export type { ResourceQueryResult, ExtraColumn, LargeListGuardState } from './ResourcesView'
 export { ResourcesSidebar } from './ResourcesSidebar'
-export type { ResourcesSidebarProps, SelectedKindInfo, PinnedItem } from './ResourcesSidebar'
+export type { ResourcesSidebarProps, SelectedKindInfo, PinnedItem, SidebarCategoryDestination, SidebarCategoryWorkspace } from './ResourcesSidebar'
 export {
   sanitizePrinterTable,
   printerTableKey,

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>

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

@@ -1,8 +1,8 @@
 import { Server, Shield, Settings } 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 { getKCPStatus, getKCPVersion, getKCPInitialized, getMachineClusterName } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -50,7 +50,7 @@ export function CAPIKubeadmControlPlaneRenderer({ data, onNavigate }: Props) {
           <Property label="Initialized" value={initialized ? 'Yes' : 'No'} />
           {updateStrategy && <Property label="Update Strategy" value={updateStrategy} />}
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>

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

@@ -1,8 +1,8 @@
 import { Server, Settings } 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 { getMachineDeploymentStatus, getMachineDeploymentVersion, getMachineClusterName } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -56,7 +56,7 @@ export function CAPIMachineDeploymentRenderer({ data, onNavigate }: Props) {
           <Property label="Cluster" value={clusterName} />
           <Property label="Version" value={version} />
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>

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

@@ -1,8 +1,8 @@
 import { Server, Settings } 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 { getMachinePoolStatus } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -44,7 +44,7 @@ export function CAPIMachinePoolRenderer({ data, onNavigate }: Props) {
             <Property label="Min Ready Seconds" value={String(spec.minReadySeconds)} />
           )}
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>

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

@@ -1,8 +1,8 @@
 import { Cpu, Server, Network, Cloud } 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 { getMachineStatus, getMachineRole, getMachineClusterName, getMachineNodeRef, getMachineVersion, getMachineProviderID, parseProviderID, getProviderFromInfraKind, parseCAPIConditionMessage } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -59,7 +59,7 @@ export function CAPIMachineRenderer({ data, onNavigate }: Props) {
           {infraProvider && <Property label="Provider" value={infraProvider} />}
           {spec.failureDomain && <Property label="Failure Domain" value={spec.failureDomain} />}
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>

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

@@ -1,8 +1,8 @@
 import { Server, Settings } 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 { getMachineSetStatus, getMachineClusterName } from '../resource-utils-capi'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface Props {
   data: any
@@ -46,7 +46,7 @@ export function CAPIMachineSetRenderer({ data, onNavigate }: Props) {
             <Property label="Min Ready Seconds" value={String(spec.minReadySeconds)} />
           )}
           {readyCond?.lastTransitionTime && (
-            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+            <Property label="Since" value={<TimeValue timestamp={readyCond.lastTransitionTime} />} />
           )}
         </PropertyList>
       </Section>

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

@@ -28,6 +28,7 @@ import {
 } from '../resource-utils-cnpg'
 import { formatAge } from '../resource-utils'
 import { RecoveryTime } from './CNPGShared'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 interface CNPGClusterRendererProps {
   /** Filled by the host with the Databases, Publications and Subscriptions
@@ -195,7 +196,7 @@ export function CNPGClusterRenderer({ data, onNavigate, declared}: CNPGClusterRe
           variant="warning"
           title="Last backup failed"
           message={
-            `The most recent backup attempt failed${lastBackupFailure.lastTransitionTime ? ` ${formatAge(lastBackupFailure.lastTransitionTime)} ago` : ''}.` +
+            `The most recent backup attempt failed${lastBackupFailure.lastTransitionTime ? ` ${formatRelativeAgeTime(lastBackupFailure.lastTransitionTime)}` : ''}.` +
             (lastBackupFailure.message ? ` Operator reported: ${lastBackupFailure.message}` : '')
           }
         />

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

@@ -97,3 +97,28 @@ describe('a window that has stopped advancing', () => {
     expect(html).not.toContain('WAL archiving has stopped')
   })
 })
+
+describe('ObjectStore failing backups', () => {
+  const failing = {
+    ...store,
+    status: { serverRecoveryWindow: { 'pg-main': { firstRecoverabilityPoint: '2026-08-01T00:00:00Z', lastSuccessfulBackupTime: '2026-08-10T00:00:00Z', lastFailedBackupTime: '2026-08-11T00:00:00Z' } } },
+  }
+  it('does not say recovery still reaches the newest WAL when archiving has stopped too', () => {
+    const html = renderToString(<CNPGObjectStoreRenderer data={failing} archivingFailing={new Set(['pg-main'])} onNavigate={nav} />)
+    expect(html).toContain('WAL archiving has stopped for pg-main')
+    expect(html).not.toContain('can still replay archived WAL')
+    expect(html).toContain('WAL archiving has stopped on the cluster behind this server')
+  })
+  it('keeps recovery replaying archived WAL when only base backups fail', () => {
+    const html = renderToString(<CNPGObjectStoreRenderer data={failing} archivingFailing={new Set()} onNavigate={nav} />)
+    expect(html).toContain('can still replay archived WAL written since')
+    expect(html).not.toContain('retention')
+  })
+  it('claims nothing about recovery when no successful backup is recorded', () => {
+    const never = { ...store, status: { serverRecoveryWindow: { 'pg-main': { lastFailedBackupTime: '2026-08-11T00:00:00Z' } } } }
+    const html = renderToString(<CNPGObjectStoreRenderer data={never} archivingFailing={new Set()} onNavigate={nav} />)
+    expect(html).toContain('No successful base backup is recorded for pg-main')
+    expect(html).not.toContain('nothing to restore')
+    expect(html).not.toContain('replay')
+  })
+})