@skyhook-io/k8s-ui 1.16.2 → 1.17.0

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

@@ -44,6 +44,8 @@ export function CNPGObjectStoreRenderer({
   const credentialSecret = getCNPGObjectStoreCredentialSecret(data)
   const cfg = data?.spec?.configuration ?? {}
   const failing = windows.filter((w) => w.failingSinceLastSuccess)
+  const archiveStopped = failing.filter((w) => archivingFailing?.has(w.server)).map((w) => w.server)
+  const neverSucceeded = failing.filter((w) => !w.lastSuccessfulBackupTime).map((w) => w.server)
 
   return (
     <>
@@ -51,7 +53,13 @@ export function CNPGObjectStoreRenderer({
         <AlertBanner
           variant="error"
           title={`Backups failing for ${failing.length === 1 ? failing[0].server : `${failing.length} servers`}`}
-          message="The most recent backup attempt failed after the last success, so the recoverable range has stopped moving forward."
+          message={
+            neverSucceeded.length > 0
+              ? `No successful base backup is recorded for ${neverSucceeded.join(', ')}, so recoverability is not established.`
+              : archiveStopped.length > 0
+                ? `A base backup failure is recorded after the last recorded success, and WAL archiving has stopped for ${archiveStopped.join(', ')}: nothing written since the last archived WAL can be recovered.`
+                : 'A base backup failure is recorded after the last recorded success. While WAL archiving works, recovery from that backup can still replay archived WAL written since.'
+          }
         />
       )}
 
@@ -60,7 +68,7 @@ export function CNPGObjectStoreRenderer({
           // Configured but empty is NOT the same as healthy. Saying nothing here
           // would read as "backups are fine" on a store holding nothing.
           <div className="text-sm text-theme-text-secondary">
-            No server has reported a backup yet, so there is nothing to restore from this store.
+            No server has recorded a backup in this store's status, so recoverability is not established.
           </div>
         ) : (
           <div className="space-y-2">
@@ -194,10 +202,10 @@ function RecoveryWindowRow({
               ? 'Not advancing'
               : w.lastSuccessfulBackupTime
                 ? 'Recoverable'
-                : 'No backups yet'}
+                : 'No backup recorded'}
         </span>
       </div>
-      {stalled && !w.failingSinceLastSuccess && (
+      {stalled && (
         <div className="text-xs text-warning-text mb-1">
           {/* The timestamps below are real and still describe the last backup that
               worked. What they no longer describe is a window still growing, and
@@ -217,7 +225,7 @@ function RecoveryWindowRow({
         {w.lastSuccessfulBackupTime ? (
           <Property label="Last Successful Backup" value={<RecoveryTime at={w.lastSuccessfulBackupTime} />} />
         ) : (
-          <Property label="Last Successful Backup" value="never" />
+          <Property label="Last Successful Backup" value="none recorded" />
         )}
         {w.lastFailedBackupTime && (
           <Property label="Last Failed Attempt" value={<RecoveryTime at={w.lastFailedBackupTime} />} />
@@ -226,8 +234,9 @@ function RecoveryWindowRow({
       </PropertyList>
       {w.failingSinceLastSuccess && (
         <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-secondary">
-          Every backup since the last success has failed. The oldest restorable point will still age
-          out under the retention policy, so the window is shrinking from both ends.
+          {w.lastSuccessfulBackupTime
+            ? 'A backup failure is recorded after the last recorded success. Restoring from that success replays the WAL archived since, which takes longer the longer this lasts.'
+            : 'No successful backup is recorded for this server, so recoverability is not established.'}
         </div>
       )}
     </div>

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

@@ -1,11 +1,11 @@
 import { Clock, Database } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { CronValue } from '../../ui/ScheduleValue'
+import { TimeValue } from '../../ui/ScheduleValue'
 import {
   getCNPGScheduledBackupCluster,
   getCNPGScheduleCron,
   getCNPGScheduledBackupMethod,
-  getCNPGScheduledBackupLastSchedule,
   getCNPGScheduledBackupNextSchedule,
   getCNPGScheduledBackupIsSuspended,
   getCNPGScheduledBackupIsImmediate,
@@ -39,7 +39,7 @@ export function CNPGScheduledBackupRenderer({ data, onNavigate }: CNPGScheduledB
       <Section title="Schedule" icon={Clock} defaultExpanded>
         <PropertyList>
           <Property label="Cron Expression" value={<CronValue cron={getCNPGScheduleCron(data)} dialect="seconds" />} />
-          <Property label="Last Schedule" value={getCNPGScheduledBackupLastSchedule(data)} />
+          <Property label="Last Schedule" value={<TimeValue timestamp={data.status?.lastScheduleTime} />} />
           <Property label="Next Schedule" value={getCNPGScheduledBackupNextSchedule(data)} />
           <Property label="Suspended" value={isSuspended ? 'Yes' : 'No'} />
           <Property label="Immediate" value={getCNPGScheduledBackupIsImmediate(data) ? 'Yes' : 'No'} />

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

@@ -1,4 +1,4 @@
-import { formatAge } from '../resource-utils'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 /**
  * A recovery point, stated absolutely with the interval beside it.
@@ -21,7 +21,7 @@ export function RecoveryTime({ at }: { at: string }) {
       <span>{d.toISOString().replace('T', ' ').replace(/\.\d+Z$/, ' UTC')}</span>
       {/* One interpolation, so the age and its unit stay a single text node
           rather than being split by a renderer comment marker. */}
-      <span className="text-xs text-theme-text-tertiary shrink-0">{`${formatAge(at)} ago`}</span>
+      <span className="text-xs text-theme-text-tertiary shrink-0">{formatRelativeAgeTime(at)}</span>
     </span>
   )
 }

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

@@ -4,10 +4,10 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
 import { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from '../../ui/Collapse'
 import { Input } from '../../ui/Input'
-import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_ORDER } from './trivy-shared'
 import { pluralize } from '../../../utils/pluralize'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface ClusterComplianceReportRendererProps {
   data: any
@@ -97,7 +97,7 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
           {compliance.description && <Property label="Description" value={compliance.description} />}
           {compliance.version && <Property label="Version" value={compliance.version} />}
           {compliance.platform && <Property label="Platform" value={compliance.platform} />}
-          <Property label="Last Updated" value={status.updateTimestamp ? formatAge(status.updateTimestamp) + ' ago' : '-'} />
+          <Property label="Last Updated" value={<TimeValue timestamp={status.updateTimestamp} />} />
         </PropertyList>
       </Section>
 

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

@@ -3,9 +3,9 @@ import { ShieldCheck, CheckCircle2, XCircle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from '../../ui/Collapse'
-import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_ORDER, TrivyAlertBanner } from './trivy-shared'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface ConfigAuditReportRendererProps {
   data: any
@@ -115,7 +115,7 @@ export function ConfigAuditReportRenderer({ data }: ConfigAuditReportRendererPro
       <Section title="Report Overview" icon={ShieldCheck}>
         <PropertyList>
           <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/CronJobRenderer.tsx

@@ -1,6 +1,8 @@
 import { Clock, Pause } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
-import { formatAge, cronToHuman } from '../resource-utils'
+import { cronToHuman } from '../resource-utils'
+import { TimeValue } from '../../ui/ScheduleValue'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 interface CronJobRendererProps {
   data: any
@@ -53,7 +55,7 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
         <AlertBanner
           variant="error"
           title="Recent Jobs Failing"
-          message={<>Jobs have been scheduled but haven't succeeded recently. Last success: {formatAge(status.lastSuccessfulTime)}. Check job history and pod logs.</>}
+          message={<>Jobs have been scheduled but haven't succeeded recently. Last success: {formatRelativeAgeTime(status.lastSuccessfulTime, 'never')}. Check job history and pod logs.</>}
         />
       )}
 
@@ -62,8 +64,8 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
           <Property label="Schedule" value={spec.schedule} />
           <Property label="Human" value={cronToHuman(spec.schedule)} />
           <Property label="Suspend" value={spec.suspend ? 'Yes' : 'No'} />
-          <Property label="Last Schedule" value={status.lastScheduleTime ? formatAge(status.lastScheduleTime) : 'Never'} />
-          <Property label="Last Success" value={status.lastSuccessfulTime ? formatAge(status.lastSuccessfulTime) : 'Never'} />
+          <Property label="Last Schedule" value={<TimeValue timestamp={status.lastScheduleTime} fallback="Never" />} />
+          <Property label="Last Success" value={<TimeValue timestamp={status.lastSuccessfulTime} fallback="Never" />} />
           <Property label="Active Jobs" value={status.active?.length || 0} />
         </PropertyList>
       </Section>

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

@@ -1,6 +1,7 @@
 import { Clock, Pause } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink, ConditionsSection } from '../../ui/drawer-components'
-import { formatAge, cronToHuman } from '../resource-utils'
+import { cronToHuman } from '../resource-utils'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface CronWorkflowRendererProps {
   data: any
@@ -45,7 +46,7 @@ export function CronWorkflowRenderer({ data, onNavigate }: CronWorkflowRendererP
           <Property label="Timezone" value={spec.timezone || 'Cluster default'} />
           <Property label="Suspend" value={isSuspended ? 'Yes' : 'No'} />
           <Property label="Concurrency" value={spec.concurrencyPolicy || 'Allow'} />
-          <Property label="Last Scheduled" value={status.lastScheduledTime ? formatAge(status.lastScheduledTime) : 'Never'} />
+          <Property label="Last Scheduled" value={<TimeValue timestamp={status.lastScheduledTime} fallback="Never" />} />
           <Property label="Active Workflows" value={active.length} />
         </PropertyList>
       </Section>

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

@@ -0,0 +1,24 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+import { EndpointSliceRenderer } from './EndpointSliceRenderer'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+it('navigates to the labeled Service as a core-group resource', async () => {
+  const onNavigate = vi.fn()
+  const element = document.createElement('div')
+  const root = createRoot(element)
+  const slice = {
+    apiVersion: 'discovery.k8s.io/v1',
+    kind: 'EndpointSlice',
+    metadata: { name: 'web-abc', namespace: 'team', labels: { 'kubernetes.io/service-name': 'web' } },
+  }
+  await act(async () => { root.render(<EndpointSliceRenderer data={slice} onNavigate={onNavigate} />) })
+  const button = [...element.querySelectorAll('button')].find(b => b.textContent === 'web')
+  expect(button).toBeDefined()
+  await act(async () => { button!.click() })
+  expect(onNavigate).toHaveBeenCalledWith({ kind: 'Service', group: '', namespace: 'team', name: 'web' })
+  await act(async () => root.unmount())
+})

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

@@ -47,7 +47,7 @@ export function EndpointSliceRenderer({ data, onNavigate }: EndpointSliceRendere
                 <button
                   type="button"
                   className="text-sm text-accent-text hover:underline font-medium"
-                  onClick={() => onNavigate({ kind: 'Service', namespace: metadata.namespace, name: serviceName })}
+                  onClick={() => onNavigate({ kind: 'Service', group: '', namespace: metadata.namespace, name: serviceName })}
                 >
                   {serviceName}
                 </button>

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

@@ -2,9 +2,9 @@ import { AlertTriangle, Info, Clock, Target, Server, Hash } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Badge } from '../../ui/Badge'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import type { NavigateToResource } from '../../../utils/navigation'
 import { apiVersionToGroup, kindToPluralWithGroup } from '../../../utils/navigation'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface EventRendererProps {
   data: any
@@ -118,10 +118,10 @@ export function EventRenderer({ data, onNavigate }: EventRendererProps) {
         <PropertyList>
           {count > 1 && <Property label="Count" value={count} />}
           {firstTimestamp && (
-            <Property label="First Seen" value={formatAge(firstTimestamp)} />
+            <Property label="First Seen" value={<TimeValue timestamp={firstTimestamp} />} />
           )}
           {lastTimestamp && (
-            <Property label="Last Seen" value={formatAge(lastTimestamp)} />
+            <Property label="Last Seen" value={<TimeValue timestamp={lastTimestamp} />} />
           )}
           {firstTimestamp && lastTimestamp && firstTimestamp !== lastTimestamp && (
             <Property label="Duration" value={calculateDuration(firstTimestamp, lastTimestamp)} />

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

@@ -1,8 +1,8 @@
 import { Activity, Boxes, Server } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner, ConditionsSection } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import { canaryStepTemplateRefs } from './RolloutRenderer'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface ExperimentRendererProps {
   data: any
@@ -72,7 +72,7 @@ export function ExperimentRenderer({ data, onNavigate }: ExperimentRendererProps
           <Property label="Phase" value={<span className={clsx('badge', phaseClass(phase))}>{phase}</span>} />
           <Property label="Duration" value={spec.duration} />
           <Property label="Message" value={status.message} />
-          <Property label="Available At" value={status.availableAt ? formatAge(status.availableAt) : undefined} />
+          <Property label="Available At" value={status.availableAt ? <TimeValue timestamp={status.availableAt} /> : undefined} />
           {ownerRollout && (
             <Property
               label="Rollout"

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

@@ -3,10 +3,10 @@ import { KeyRound } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
-import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, TrivyAlertBanner, formatTrivyImage } from './trivy-shared'
 import { pluralize } from '../../../utils/pluralize'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface ExposedSecretReportRendererProps {
   data: any
@@ -45,7 +45,7 @@ export function ExposedSecretReportRenderer({ data }: ExposedSecretReportRendere
           <Property label="Container" value={containerName} />
           <Property label="Image" value={image} />
           <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/ExternalSecretRenderer.tsx

@@ -1,10 +1,10 @@
 import { KeyRound, RefreshCw, CloudCog } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
+import { TimeValue } from '../../ui/ScheduleValue'
 import {
   getExternalSecretStatus,
   getExternalSecretStore,
   getExternalSecretRefreshInterval,
-  getExternalSecretLastSync,
   getExternalSecretTargetName,
   getExternalSecretTargetCreationPolicy,
   getExternalSecretTargetDeletionPolicy,
@@ -47,7 +47,7 @@ export function ExternalSecretRenderer({ data, onNavigate }: ExternalSecretRende
       <Section title="Sync Status" icon={RefreshCw} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={esStatus.text} />
-          <Property label="Last Sync" value={getExternalSecretLastSync(data)} />
+          <Property label="Last Sync" value={<TimeValue timestamp={data.status?.refreshTime} />} />
           <Property label="Refresh Interval" value={getExternalSecretRefreshInterval(data)} />
           <Property label="Target Secret" value={(() => {
             const targetName = getExternalSecretTargetName(data)

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

@@ -1,9 +1,9 @@
 import { Package, Settings, CheckCircle2, History, FileCode2, GitBranch } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts, ResourceLink } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface FluxHelmReleaseRendererProps {
   data: any
@@ -249,13 +249,13 @@ export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRen
             {lastRelease.firstDeployed && (
               <Property
                 label="First Deployed"
-                value={formatAge(lastRelease.firstDeployed)}
+                value={<TimeValue timestamp={lastRelease.firstDeployed} />}
               />
             )}
             {lastRelease.lastDeployed && (
               <Property
                 label="Last Deployed"
-                value={formatAge(lastRelease.lastDeployed)}
+                value={<TimeValue timestamp={lastRelease.lastDeployed} />}
               />
             )}
           </PropertyList>
@@ -319,7 +319,7 @@ export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRen
             {status.lastHandledReconcileAt && (
               <Property
                 label="Last Reconciled"
-                value={formatAge(status.lastHandledReconcileAt)}
+                value={<TimeValue timestamp={status.lastHandledReconcileAt} />}
               />
             )}
           </PropertyList>

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

@@ -2,6 +2,7 @@ import { Globe, ArrowRight, Network, Filter } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
+import { gatewayBackendResourceRef, gatewayParentResourceRef } from '../../../utils/gateway-references'
 
 interface GRPCRouteRendererProps {
   data: any
@@ -32,22 +33,8 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
     ? parentStatuses[0].conditions
     : undefined
 
-  function toGatewayRef(ref: any): ResourceRef {
-    return {
-      kind: 'Gateway',
-      namespace: ref.namespace || routeNs,
-      name: ref.name,
-      group: 'gateway.networking.k8s.io',
-    }
-  }
-
-  function toServiceRef(backend: any): ResourceRef {
-    return {
-      kind: 'Service',
-      namespace: backend.namespace || routeNs,
-      name: backend.name,
-    }
-  }
+  const toParentRef = (ref: any) => gatewayParentResourceRef(ref, routeNs)
+  const toBackendRef = (ref: any) => gatewayBackendResourceRef(ref, routeNs)
 
   return (
     <>
@@ -59,8 +46,8 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
             const cond = (p.conditions || []).find((c: any) => c.type === 'Accepted' && c.status === 'False')
             const gwName = p.parentRef?.name || 'unknown'
             return cond?.reason
-              ? `Gateway "${gwName}": ${cond.reason}${cond.message ? ' — ' + cond.message : ''}`
-              : `Gateway "${gwName}" has not accepted this route.`
+              ? `Parent "${gwName}": ${cond.reason}${cond.message ? ' — ' + cond.message : ''}`
+              : `Parent "${gwName}" has not accepted this route.`
           }).join('; ')}
         />
       )}
@@ -90,12 +77,12 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
             }
           />
           <Property
-            label="Parent Gateways"
+            label="Parents"
             value={
               parentRefs.length > 0 ? (
                 <div className="flex flex-wrap gap-1">
                   {parentRefs.map((ref: any, i: number) => (
-                    <ResourceRefBadge key={`${ref.namespace || ''}-${ref.name}-${i}`} resourceRef={toGatewayRef(ref)} onClick={onNavigate} />
+                    <ResourceRefBadge key={`${ref.namespace || ''}-${ref.name}-${i}`} resourceRef={toParentRef(ref)} onClick={onNavigate} />
                   ))}
                 </div>
               ) : 'None'
@@ -129,7 +116,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                     <div className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
                       <span className="italic text-theme-text-tertiary">all</span>
                       <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                      <ResourceRefBadge resourceRef={toServiceRef(backendRefs[0])} onClick={onNavigate} />
+                      <ResourceRefBadge resourceRef={toBackendRef(backendRefs[0])} onClick={onNavigate} />
                       {backendRefs[0].port && <span className="text-theme-text-tertiary">:{backendRefs[0].port}</span>}
                     </div>
                   )}
@@ -141,7 +128,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                         return (
                           <div key={bi} className="text-xs text-theme-text-secondary flex items-center gap-1.5 pl-1">
                             <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                            <ResourceRefBadge resourceRef={toServiceRef(b)} onClick={onNavigate} />
+                            <ResourceRefBadge resourceRef={toBackendRef(b)} onClick={onNavigate} />
                             {b.port && <span className="text-theme-text-tertiary">:{b.port}</span>}
                             {pct !== null && <span className="text-theme-text-tertiary text-[10px]">{pct}%</span>}
                           </div>
@@ -176,7 +163,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                       {matchIdx === 0 && backendRefs.length === 1 && (
                         <>
                           <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                          <ResourceRefBadge resourceRef={toServiceRef(backendRefs[0])} onClick={onNavigate} />
+                          <ResourceRefBadge resourceRef={toBackendRef(backendRefs[0])} onClick={onNavigate} />
                           {backendRefs[0].port && <span className="text-theme-text-tertiary">:{backendRefs[0].port}</span>}
                         </>
                       )}
@@ -189,7 +176,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                       return (
                         <div key={bi} className="text-xs text-theme-text-secondary flex items-center gap-1.5 pl-1">
                           <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                          <ResourceRefBadge resourceRef={toServiceRef(b)} onClick={onNavigate} />
+                          <ResourceRefBadge resourceRef={toBackendRef(b)} onClick={onNavigate} />
                           {b.port && <span className="text-theme-text-tertiary">:{b.port}</span>}
                           {pct !== null && <span className="text-theme-text-tertiary text-[10px]">{pct}%</span>}
                         </div>

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

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { HTTPRouteRenderer } from './HTTPRouteRenderer'
+import { GRPCRouteRenderer } from './GRPCRouteRenderer'
+import { SimpleRouteRenderer } from './SimpleRouteRenderer'
+
+const backend = { name: 'custom-backend', kind: 'Widget', group: 'relationships.radar.test', namespace: 'backends' }
+const parent = { name: 'mesh-parent', kind: 'Service', group: '', namespace: 'mesh' }
+
+function routeData(kind: string) {
+  return {
+    metadata: { name: 'route', namespace: 'app' },
+    status: { parents: [{ parentRef: parent, conditions: [{ type: 'Accepted', status: 'False', reason: 'Rejected' }] }] },
+    spec: {
+      parentRefs: [parent],
+      rules: [{
+        backendRefs: [backend, { name: 'default-service', port: 8080 }],
+        ...(kind === 'HTTPRoute' ? { filters: [{ type: 'RequestMirror', requestMirror: { backendRef: { ...backend, name: 'mirror' } } }] } : {}),
+      }],
+    },
+  }
+}
+
+describe('Gateway route reference navigation', () => {
+  it.each(['HTTPRoute', 'GRPCRoute', 'TCPRoute', 'TLSRoute'] as const)('preserves backend and parent identities in %s', async kind => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const onNavigate = vi.fn()
+    const data = routeData(kind)
+    const click = async (name: string) => {
+      const button = [...container.querySelectorAll('button')].find(button => button.textContent?.includes(name))
+      expect(button, `button ${name}`).toBeDefined()
+      await act(async () => button!.click())
+    }
+    try {
+      await act(async () => root.render(
+        kind === 'HTTPRoute' ? <HTTPRouteRenderer data={data} onNavigate={onNavigate} />
+          : kind === 'GRPCRoute' ? <GRPCRouteRenderer data={data} onNavigate={onNavigate} />
+          : <SimpleRouteRenderer kind={kind} data={data} onNavigate={onNavigate} />,
+      ))
+      expect(container.textContent).toContain('Parents')
+      expect(container.textContent).toContain('Parent "mesh-parent"')
+      expect(container.textContent).not.toContain('Gateway "mesh-parent"')
+
+      await click('custom-backend')
+      expect(onNavigate).toHaveBeenLastCalledWith(backend)
+      await click('default-service')
+      expect(onNavigate).toHaveBeenLastCalledWith({ kind: 'Service', group: '', namespace: 'app', name: 'default-service' })
+      await click('mesh-parent')
+      expect(onNavigate).toHaveBeenLastCalledWith(parent)
+      if (kind === 'HTTPRoute') {
+        await click('mirror')
+        expect(onNavigate).toHaveBeenLastCalledWith({ ...backend, name: 'mirror' })
+      }
+    } finally {
+      await act(async () => root.unmount())
+      Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+    }
+  })
+})

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

@@ -1,9 +1,9 @@
 import { GitBranch, FolderGit, 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 GitRepositoryRendererProps {
   data: any
@@ -87,7 +87,7 @@ export function GitRepositoryRenderer({ data }: GitRepositoryRendererProps) {
             <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)} />
@@ -104,7 +104,7 @@ export function GitRepositoryRenderer({ data }: GitRepositoryRendererProps) {
             {status.lastHandledReconcileAt && (
               <Property
                 label="Last Reconciled"
-                value={formatAge(status.lastHandledReconcileAt)}
+                value={<TimeValue timestamp={status.lastHandledReconcileAt} />}
               />
             )}
           </PropertyList>

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

@@ -4,9 +4,9 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ResourceLink, type ConditionTone } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
 import { kindToPlural } from '../../../utils/navigation'
-import { formatAge } from '../resource-utils'
 import { HPADiagnosisSummary } from '../HPADiagnosisSummary'
 import type { HPADiagnosis } from '../../../types'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface HPARendererProps {
   data: any
@@ -63,7 +63,7 @@ export function HPARenderer({ data, onNavigate, hpaDiagnosis, extraSections }: H
           <Property label="Desired" value={status.desiredReplicas} />
           <Property label="Min" value={spec.minReplicas ?? 1} />
           <Property label="Max" value={spec.maxReplicas} />
-          {status.lastScaleTime && <Property label="Last Scale" value={formatAge(status.lastScaleTime)} />}
+          {status.lastScaleTime && <Property label="Last Scale" value={<TimeValue timestamp={status.lastScaleTime} />} />}
         </PropertyList>
       </Section>