@skyhook-io/k8s-ui 1.16.3 → 1.17.0

package/src/components/shared/SetImageDialog.tsx

@@ -1,11 +1,5 @@
 import { useEffect, useMemo, useRef, useState, useId } from 'react'
-import {
-  AlertTriangle,
-  ExternalLink,
-  Loader2,
-  RefreshCw,
-  X,
-} from 'lucide-react'
+import { Loader2, RefreshCw, X } from 'lucide-react'
 import { clsx } from 'clsx'
 
 import type {
@@ -16,11 +10,33 @@ import type {
 } from '../../types/core'
 import { DialogPortal } from '../ui/DialogPortal'
 import { Badge } from '../ui/Badge'
+import {
+  canConfirmGitOpsWrite,
+  gitOpsWriteGuardKey,
+  type GitOpsWrite,
+  type GitOpsWriteGuard,
+} from '../../utils/gitops-write-guard'
+import { GitOpsWriteWarning } from './GitOpsWriteWarning'
 
-export interface ManagedImageSource {
-  type: 'GitOps' | 'Helm'
-  label: string
-  onOpen?: () => void
+/** The GitOps write guard for the object whose Pod template the dialog
+ *  writes, evaluated by the host: for {@link SET_IMAGE_WRITES} until the
+ *  containers are known, then for {@link setImageWrites} of the containers
+ *  {@link onSelectionChange} reports. */
+export interface SetImageOwnership {
+  guard: GitOpsWriteGuard
+  onOpenOwner?: () => void
+  /** The containers the dialog lists and the ones being changed, so the
+   *  guard can judge exactly those (null until the containers load). */
+  onSelectionChange?: (selection: SetImageSelection | null) => void
+  /** {@link setImageSelectionKey} of the selection `guard` was evaluated
+   *  for. When set, Update waits until it matches the dialog's current
+   *  selection. */
+  selectionKey?: string
+}
+
+export interface SetImageSelection {
+  containers: Pick<WorkloadContainerImage, 'type' | 'name'>[]
+  changed: Pick<WorkloadContainerImage, 'type' | 'name'>[]
 }
 
 export interface SetImageDialogProps {
@@ -28,7 +44,8 @@ export interface SetImageDialogProps {
   workloadLabel: string
   workloadName: string
   workloadResource: string
-  managedSources?: ManagedImageSource[]
+  /** Undefined while the host can't verify ownership; the dialog then blocks. */
+  ownership?: SetImageOwnership
   pending?: boolean
   onClose: () => void
   onLoad: () => Promise<WorkloadImageInventory>
@@ -83,31 +100,49 @@ export function reconcileRefreshedImageDrafts(
   return { drafts: nextDrafts, changedCurrentKeys }
 }
 
+export function setImageSelectionKey(selection: SetImageSelection | null): string {
+  if (!selection) return ''
+  const rows = (refs: SetImageSelection['containers']) => refs.map((c) => [c.type, c.name])
+  return JSON.stringify([rows(selection.containers), rows(selection.changed)])
+}
+
+/** One write per container, by name: the guard's verdict for exactly the
+ *  images being changed. */
+export function setImageWrites(containers: Pick<WorkloadContainerImage, 'type' | 'name'>[]): GitOpsWrite[] {
+  return containers.map((container) => ({
+    scope: 'spec',
+    paths: [`spec.template.spec.${container.type === 'initContainer' ? 'initContainers' : 'containers'}[name=${container.name}].image`],
+    description: container.name,
+  }))
+}
+
+// Before the containers load, the guard covers every container image.
+export const SET_IMAGE_WRITES: GitOpsWrite[] = [
+  {
+    scope: 'spec',
+    paths: [
+      'spec.template.spec.containers[*].image',
+      'spec.template.spec.initContainers[*].image',
+    ],
+    description: 'Container images',
+  },
+]
+
 export function canSubmitImageUpdates({
   updateCount,
   hasEmptyImage,
-  managed,
-  ownershipResolved,
-  acknowledged,
+  ownershipConfirmable,
   busy,
   loadFailed = false,
 }: {
   updateCount: number
   hasEmptyImage: boolean
-  managed: boolean
-  ownershipResolved: boolean
-  acknowledged: boolean
+  /** Ownership resolved and, when it's managed, acknowledged. */
+  ownershipConfirmable: boolean
   busy: boolean
   loadFailed?: boolean
 }): boolean {
-  return (
-    updateCount > 0 &&
-    !hasEmptyImage &&
-    ownershipResolved &&
-    (!managed || acknowledged) &&
-    !busy &&
-    !loadFailed
-  )
+  return updateCount > 0 && !hasEmptyImage && ownershipConfirmable && !busy && !loadFailed
 }
 
 export function describeImageUpdateBehavior(
@@ -140,7 +175,7 @@ export function SetImageDialog({
   workloadLabel,
   workloadName,
   workloadResource,
-  managedSources,
+  ownership,
   pending = false,
   onClose,
   onLoad,
@@ -155,7 +190,9 @@ export function SetImageDialog({
   const [submitting, setSubmitting] = useState(false)
   const [loadError, setLoadError] = useState<string | null>(null)
   const [submitError, setSubmitError] = useState<string | null>(null)
-  const [acknowledged, setAcknowledged] = useState(false)
+  // The guard key the acknowledgment was given for: a different verdict
+  // (fresh evidence, other containers, a changed policy) asks again.
+  const [ackedKey, setAckedKey] = useState('')
   const [changedCurrentKeys, setChangedCurrentKeys] = useState<string[]>([])
   const onLoadRef = useRef(onLoad)
   const loadRequestRef = useRef(0)
@@ -216,7 +253,7 @@ export function SetImageDialog({
     setDrafts({})
     setChangedCurrentKeys([])
     setSubmitError(null)
-    setAcknowledged(false)
+    setAckedKey('')
     void loadInventory()
   }, [open, workloadLabel, workloadName, workloadResource])
 
@@ -229,13 +266,27 @@ export function SetImageDialog({
       (container) => !(drafts[containerKey(container)] ?? '').trim(),
     ) ?? false
   const busy = pending || submitting
-  const ownershipResolved = managedSources !== undefined
+  const ownershipResolved = ownership !== undefined
+  const onSelectionChange = ownership?.onSelectionChange
+  const selectionKey = setImageSelectionKey(
+    inventory ? { containers: inventory.containers, changed: updates } : null,
+  )
+  useEffect(() => {
+    if (!onSelectionChange) return
+    const [containers, changed] = selectionKey ? (JSON.parse(selectionKey) as [string[][], string[][]]) : [null, null]
+    const toRefs = (rows: string[][]) => rows.map(([type, name]) => ({ type: type as WorkloadContainerImage['type'], name }))
+    onSelectionChange(containers && changed ? { containers: toRefs(containers), changed: toRefs(changed) } : null)
+  }, [onSelectionChange, selectionKey])
+  const guard = ownership?.guard
+  // The host evaluates the guard after it hears of an edit; until then the
+  // verdict on screen is for other containers.
+  const guardCurrent = ownership?.selectionKey === undefined || ownership.selectionKey === selectionKey
+  const guardKey = gitOpsWriteGuardKey(guard)
+  const acknowledged = Boolean(guardKey) && ackedKey === guardKey
   const canSubmit = canSubmitImageUpdates({
     updateCount: updates.length,
     hasEmptyImage,
-    managed: (managedSources?.length ?? 0) > 0,
-    ownershipResolved,
-    acknowledged,
+    ownershipConfirmable: guardCurrent && canConfirmGitOpsWrite(guard, acknowledged),
     busy,
     loadFailed: Boolean(loadError),
   })
@@ -378,57 +429,14 @@ export function SetImageDialog({
               {describeImageUpdateBehavior(inventory.behavior)}
             </div>
 
-            {managedSources && managedSources.length > 0 && (
-              <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-3">
-                <div className="flex items-start gap-2">
-                  <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
-                  <div className="min-w-0 flex-1">
-                    <p className="text-xs font-medium text-amber-800 dark:text-amber-300">
-                      The declared source may overwrite this live change
-                    </p>
-                    <p className="mt-1 text-xs text-theme-text-secondary">
-                      Managed by{' '}
-                      {managedSources
-                        .map((source) => `${source.type} ${source.label}`)
-                        .join(' and ')}
-                      . Update the declared source for a durable change; use
-                      this action only as a break-glass operation.
-                    </p>
-                    <div className="mt-2 flex flex-wrap gap-2">
-                      {managedSources
-                        .filter((source) => source.onOpen)
-                        .map((source) => (
-                          <button
-                            key={`${source.type}-${source.label}`}
-                            type="button"
-                            onClick={source.onOpen}
-                            className="inline-flex items-center gap-1 text-xs font-medium text-skyhook-600 hover:underline dark:text-skyhook-400"
-                          >
-                            {source.type === 'GitOps'
-                              ? 'View GitOps owner'
-                              : 'View Helm release'}
-                            <ExternalLink className="h-3 w-3" />
-                          </button>
-                        ))}
-                    </div>
-                    <label className="mt-3 flex cursor-pointer items-start gap-2 text-xs text-theme-text-primary">
-                      <input
-                        type="checkbox"
-                        checked={acknowledged}
-                        onChange={(event) =>
-                          setAcknowledged(event.target.checked)
-                        }
-                        disabled={busy}
-                        className="mt-0.5 h-3.5 w-3.5 accent-skyhook-500"
-                      />
-                      <span>
-                        I understand the declared source may overwrite this live
-                        change.
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </div>
+            {guard && (
+              <GitOpsWriteWarning
+                guard={guard}
+                acknowledged={acknowledged}
+                onAcknowledgedChange={(value) => setAckedKey(value ? guardKey : '')}
+                onOpenOwner={ownership?.onOpenOwner}
+                disabled={busy}
+              />
             )}
 
             <ContainerImageGroup

package/src/components/shared/index.ts

@@ -5,7 +5,8 @@ export {
   DrainPlanDialog, DrainPlanContent, canConfirmDrain, planMatches, emptyDirPodsAtRisk, DEFAULT_DRAIN_DIALOG_OPTIONS,
   type DrainPlan, type DrainPlanPod, type DrainOutcome, type DrainDialogOptions,
 } from './DrainPlanDialog'
-export { SetImageDialog, type ManagedImageSource, type SetImageDialogProps } from './SetImageDialog'
+export { SetImageDialog, SET_IMAGE_WRITES, setImageWrites, setImageSelectionKey, type SetImageOwnership, type SetImageSelection, type SetImageDialogProps } from './SetImageDialog'
+export { GitOpsWriteWarning, type GitOpsWriteWarningProps } from './GitOpsWriteWarning'
 export { CreateResourceDialog, type CreateResourceDialogProps, type ApplyResult } from './CreateResourceDialog'
 export { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from './ManagedByChip'
 export { DetailShell, type DetailShellProps, type DetailShellTab } from './DetailShell'

package/src/components/timeline/TimelineList.tsx

@@ -35,20 +35,7 @@ import type { NavigateToResource } from '../../utils/navigation'
 import { builtinGroupForKind } from '../../utils/api-resources'
 import { kindToPluralWithGroup, refToSelectedResource, apiVersionToGroup } from '../../utils/navigation'
 import { pluralize } from '../../utils/pluralize'
-
-/** Format resource age (e.g., "3d", "5h", "10m") */
-function formatResourceAge(createdAt: string): string {
-  const diff = Date.now() - new Date(createdAt).getTime()
-  const mins = Math.floor(diff / 60000)
-  if (mins < 1) return '<1m'
-  if (mins < 60) return `${mins}m`
-  const hours = Math.floor(mins / 60)
-  if (hours < 24) return `${hours}h`
-  const days = Math.floor(hours / 24)
-  if (days < 30) return `${days}d`
-  const months = Math.floor(days / 30)
-  return `${months}mo`
-}
+import { formatCompactAge } from '../../utils/format'
 
 export type { ActivityTypeFilter, ActivityFilterKey }
 
@@ -736,7 +723,7 @@ function ActivityCard({ item, expanded, onToggle, onResourceClick, compact, sele
               {item.createdAt && (
                 <Tooltip content={`Created: ${new Date(item.createdAt).toLocaleString()}`}>
                   <span className="text-xs text-theme-text-quaternary">
-                    • {formatResourceAge(item.createdAt)} old
+                    • {formatCompactAge(item.createdAt)} old
                   </span>
                 </Tooltip>
               )}

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -62,6 +62,7 @@ import {
 } from './shared'
 import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
 import { clampLensToSelection, formatLensDuration, MIN_WINDOW_MS, type ScrubberRange } from './scrubber-math'
+import { formatRelativeAgeTime } from '../../utils/format'
 
 // Predefined zoom levels (window widths in hours): 15m, 30m, 1h, 2h, 4h, 8h,
 // 12h, 1d, 2d, 3d, 7d. Hoisted so the controlled-window adapter can size the
@@ -2884,15 +2885,6 @@ function EventMarker({ event, x, selected, onClick, dimmed, small }: EventMarker
   const markerClasses = getMarkerStyle()
 
   // Build tooltip text - focus on what happened, explain the color meaning
-  const getRelativeTime = (timestamp: string) => {
-    const diff = Date.now() - new Date(timestamp).getTime()
-    const mins = Math.floor(diff / 60000)
-    if (mins < 1) return 'just now'
-    if (mins < 60) return `${mins}m ago`
-    const hours = Math.floor(mins / 60)
-    if (hours < 24) return `${hours}h ago`
-    return `${Math.floor(hours / 24)}d ago`
-  }
 
   // Get human-readable operation label with color indicator
   const getOperationLabel = () => {
@@ -2922,7 +2914,7 @@ function EventMarker({ event, x, selected, onClick, dimmed, small }: EventMarker
     const msg = event.message.length > 110 ? event.message.slice(0, 110) + '…' : event.message
     tooltipLines.push(msg)
   }
-  tooltipLines.push(getRelativeTime(event.timestamp))
+  tooltipLines.push(formatRelativeAgeTime(event.timestamp))
   if (isHistoricalEvent(event)) tooltipLines.push('(from metadata)')
 
   const tooltipText = tooltipLines.join(' · ')

package/src/components/topology/TopologyGraph.tsx

@@ -46,7 +46,8 @@ const EDGE_COLORS = {
   'exposes': '#3b82f6',    // Blue for service exposure
   'manages': '#64748b',    // Gray for management relationships
   'configures': '#f59e0b', // Amber for config
-  'uses': '#ec4899',       // Pink for HPA
+  'uses': '#ec4899',       // Pink: autoscalers, mounted claims, dependencies
+  'protects': '#8b5cf6',   // Violet for policies and disruption budgets
 } as const
 
 function getEdgeColor(type: string, isTrafficView: boolean): string {
@@ -59,10 +60,11 @@ function getEdgeColor(type: string, isTrafficView: boolean): string {
 
 // Human-readable edge legend for the resources view (traffic view is all-green).
 const EDGE_LEGEND: { label: string; color: string }[] = [
-  { label: 'owns', color: EDGE_COLORS['manages'] },
+  { label: 'manages', color: EDGE_COLORS['manages'] },
   { label: 'exposes', color: EDGE_COLORS['exposes'] },
   { label: 'configures', color: EDGE_COLORS['configures'] },
-  { label: 'scales', color: EDGE_COLORS['uses'] },
+  { label: 'uses', color: EDGE_COLORS['uses'] },
+  { label: 'protects', color: EDGE_COLORS['protects'] },
   { label: 'routes to', color: EDGE_COLORS['routes-to'] },
 ]
 

package/src/components/ui/ScheduleValue.test.tsx

@@ -74,6 +74,11 @@ describe('TimeValue', () => {
     expect(html).not.toMatch(/\dT\d\d:\d\d:\d\dZ/)
   })
 
+  // A bare "6h" under "Started" or "Finished" reads as a duration.
+  it('says the moment was in the past', () => {
+    expect(render(<TimeValue timestamp={new Date(Date.now() - 6 * 3600_000).toISOString()} />)).toContain('6h ago')
+  })
+
   it('says so when the thing never happened', () => {
     expect(render(<TimeValue timestamp={undefined} fallback="Never" />)).toContain('Never')
   })

package/src/components/ui/ScheduleValue.tsx

@@ -1,5 +1,6 @@
 import { Tooltip } from './Tooltip'
-import { cronToHuman, formatAge } from '../resources/resource-utils'
+import { cronToHuman } from '../resources/resource-utils'
+import { formatRelativeAgeTime } from '../../utils/format'
 
 /**
  * Hover affordance used across the drawer: without it a tooltip is a secret.
@@ -79,7 +80,7 @@ export function TimeValue({ timestamp, fallback = '-' }: TimeValueProps) {
   if (!timestamp) return <>{fallback}</>
   return (
     <Tooltip content={new Date(timestamp).toLocaleString()} position="right">
-      <span className={HOVERABLE}>{formatAge(timestamp)}</span>
+      <span className={HOVERABLE}>{formatRelativeAgeTime(timestamp)}</span>
     </Tooltip>
   )
 }

package/src/components/ui/drawer-components.test.tsx

@@ -1,12 +1,20 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
-import { EventsSection, ProblemAlerts, OperationalIssuesShownContext, RelatedResourcesSection } from './drawer-components'
+import { EventsSection, ProblemAlerts, OperationalIssuesShownContext, RelatedResourcesSection, defaultConditionTone } from './drawer-components'
 
 const problems = [
   { color: 'red' as const, message: 'Application is Degraded' },
   { color: 'yellow' as const, message: 'Application is OutOfSync' },
 ]
 
+describe('GKE node condition polarity', () => {
+  it.each(['StoragePressureRootFileSystem', 'DPv2MigrationUnsupportedCNI', 'UnsupportedEBPFPrograms'])('%s is a problem only when True', type => {
+    expect(defaultConditionTone({ type, status: 'False' })).toBe('ok')
+    expect(defaultConditionTone({ type, status: 'True' })).toBe('fail')
+    expect(defaultConditionTone({ type, status: 'Unknown' })).toBe('unknown')
+  })
+})
+
 describe('ProblemAlerts', () => {
   it('renders every problem', () => {
     const html = renderToString(<ProblemAlerts problems={problems} />)
@@ -62,3 +70,60 @@ describe('Recent Events layout', () => {
     expect(fullscreen).toContain('Reason23')
   })
 })
+
+describe('dependency relationships', () => {
+  it('renders a dependency-only response with the existing navigation control', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ dependencies: [{ kind: 'Issuer', group: 'cert-manager.io', namespace: 'team', name: 'ca' }] }} onNavigate={() => {}} />)
+    expect(html).toContain('Depends On')
+    expect(html).toContain('ca')
+    expect(html).toContain('<button')
+    expect(html).not.toContain('Scale Target')
+  })
+
+  it('renders the reverse dependency without calling it an autoscaler', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ dependents: [{ kind: 'Certificate', group: 'cert-manager.io', namespace: 'team', name: 'tls' }] }} />)
+    expect(html).toContain('Required By')
+    expect(html).toContain('tls')
+    expect(html).not.toContain('Autoscaler')
+  })
+})
+
+describe('versioned dependency projections', () => {
+  const issuer = { kind: 'Issuer', group: 'cert-manager.io', namespace: 'team', name: 'ca' }
+  const certificate = { kind: 'Certificate', group: 'cert-manager.io', namespace: 'team', name: 'tls' }
+
+  it('presents mirrored configuration dependencies once under the specific labels', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ dependencies: [issuer], configRefs: [issuer], dependents: [certificate], consumers: [certificate] }} onNavigate={() => {}} />)
+    expect(html).toContain('Depends On')
+    expect(html).toContain('Required By')
+    expect(html).not.toContain('Configuration')
+    expect(html).not.toContain('Used By')
+    expect(html.match(/<button/g)).toHaveLength(3)
+  })
+
+  it('preserves configuration and consumer groups when dependency fields are absent', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ configRefs: [issuer], consumers: [certificate] }} />)
+    expect(html).toContain('Configuration')
+    expect(html).toContain('Used By')
+    expect(html).not.toContain('Depends On')
+  })
+
+  it('retains navigation controls for identically named resources from distinct API groups', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ dependencies: [issuer, { ...issuer, group: 'other.example.com' }, issuer] }} onNavigate={() => {}} />)
+    expect(html.match(/<button/g)).toHaveLength(3)
+  })
+})
+
+describe('namespace deletion condition polarity', () => {
+  it.each([
+    'NamespaceDeletionDiscoveryFailure',
+    'NamespaceDeletionGroupVersionParsingFailure',
+    'NamespaceDeletionContentFailure',
+    'NamespaceContentRemaining',
+    'NamespaceFinalizersRemaining',
+  ])('%s treats True as a blocker and False as cleared', (type) => {
+    expect(defaultConditionTone({ type, status: 'True' })).toBe('fail')
+    expect(defaultConditionTone({ type, status: 'False' })).toBe('ok')
+    expect(defaultConditionTone({ type, status: 'Unknown' })).toBe('unknown')
+  })
+})

package/src/components/ui/drawer-components.tsx

@@ -1,8 +1,9 @@
+import { dedupeResourceRefs, omitResourceRefs } from '../../utils/resource-refs'
 import { Disclosure } from './Disclosure'
 import { createContext, useContext, useState } from 'react'
 import { Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers, X, Minus } from 'lucide-react'
 import { clsx } from 'clsx'
-import { formatAge, formatDuration, formatResources } from '../resources/resource-utils'
+import { formatDuration, formatResources } from '../resources/resource-utils'
 import { getEffectiveResources } from '../../utils/extended-resources'
 import { Tooltip } from './Tooltip'
 import { getKindColorClass } from '../ui/Badge'
@@ -206,6 +207,12 @@ const NEGATIVE_POLARITY_TYPES = new Set([
   'NetworkUnavailable',
   // Core K8s — Pod
   'DisruptionTarget',
+  // Core K8s — Namespace
+  'NamespaceDeletionDiscoveryFailure',
+  'NamespaceDeletionGroupVersionParsingFailure',
+  'NamespaceDeletionContentFailure',
+  'NamespaceContentRemaining',
+  'NamespaceFinalizersRemaining',
   // Core K8s — workloads
   'ReplicaFailure',
   // NPD — upstream default configs
@@ -220,6 +227,9 @@ const NEGATIVE_POLARITY_TYPES = new Set([
   'ReadOnlyRootFileSystem',
   'ResourceExhausted',
   'Swap',
+  'StoragePressureRootFileSystem',
+  'DPv2MigrationUnsupportedCNI',
+  'UnsupportedEBPFPrograms',
   // NPD — AKS extensions (learn.microsoft.com/azure/aks/node-problem-detector)
   'FilesystemCorruptionProblem',
   'KubeletProblem',
@@ -402,15 +412,17 @@ interface AlertBannerProps {
   message?: React.ReactNode
   items?: string[]
   children?: React.ReactNode
+  /** Replaces the default bottom margin when the banner sits in a tighter layout. */
+  className?: string
 }
 
-export function AlertBanner({ variant, icon, title, message, items, children }: AlertBannerProps) {
+export function AlertBanner({ variant, icon, title, message, items, children, className }: AlertBannerProps) {
   const colors = ALERT_COLORS[variant]
   const Icon = icon || DEFAULT_ICONS[variant]
   const hasBody = message || items || children
 
   return (
-    <div className={clsx('mb-4 p-3 border rounded-lg', colors.bg, colors.border)}>
+    <div className={clsx('p-3 border rounded-lg', className ?? 'mb-4', colors.bg, colors.border)}>
       <div className={clsx('flex gap-2', hasBody ? 'items-start' : 'items-center')}>
         <Icon className={clsx('w-4 h-4 shrink-0', colors.title, hasBody && 'mt-0.5')} />
         {hasBody ? (
@@ -527,7 +539,7 @@ export function MetadataSection({ data }: { data: any }) {
         <Property label="Generation" value={meta.generation} />
         <Property label="Created" value={meta.creationTimestamp ? (
           <Tooltip content={new Date(meta.creationTimestamp).toLocaleString()}>
-            <span className="border-b border-dotted border-theme-text-tertiary cursor-help">{formatAge(meta.creationTimestamp)}</span>
+            <span className="border-b border-dotted border-theme-text-tertiary cursor-help">{formatRelativeAgeTime(meta.creationTimestamp)}</span>
           </Tooltip>
         ) : '-'} />
       </PropertyList>
@@ -784,25 +796,19 @@ export type CopyHandler = (text: string, key: string) => void
 import type { TimelineEvent, Relationships, ResourceRef } from '../../types'
 import { isChangeEvent, isK8sEvent } from '../../types'
 import { Link } from 'lucide-react'
+import { formatRelativeAgeTime } from '../../utils/format'
 
 interface RelatedResourcesSectionProps {
   relationships: Relationships | undefined
   onNavigate?: (ref: ResourceRef) => void
 }
 
-function dedupeRefs(refs: ResourceRef[]): ResourceRef[] {
-  const seen = new Set<string>()
-  return refs.filter(ref => {
-    const key = `${ref.kind}/${ref.namespace}/${ref.name}`
-    if (seen.has(key)) return false
-    seen.add(key)
-    return true
-  })
-}
-
 export function RelatedResourcesSection({ relationships, onNavigate }: RelatedResourcesSectionProps) {
   if (!relationships) return null
 
+  const configRefs = omitResourceRefs(relationships.configRefs ?? [], relationships.dependencies ?? [])
+  const consumers = omitResourceRefs(relationships.consumers ?? [], relationships.dependents ?? [])
+
   const hasRelationships =
     relationships.owner ||
     relationships.deployment ||
@@ -820,6 +826,8 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
     (relationships.pdbs && relationships.pdbs.length > 0) ||
     (relationships.networkPolicies && relationships.networkPolicies.length > 0) ||
     (relationships.resourceClaims && relationships.resourceClaims.length > 0) ||
+    (relationships.dependencies && relationships.dependencies.length > 0) ||
+    (relationships.dependents && relationships.dependents.length > 0) ||
     relationships.scaleTarget
 
   if (!hasRelationships) return null
@@ -837,43 +845,49 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
           <RelationshipGroup label="Node" refs={[relationships.node]} onNavigate={onNavigate} />
         )}
         {relationships.children && relationships.children.length > 0 && (
-          <RelationshipGroup label="Children" refs={dedupeRefs(relationships.children)} onNavigate={onNavigate} />
+          <RelationshipGroup label="Children" refs={dedupeResourceRefs(relationships.children)} onNavigate={onNavigate} />
         )}
         {relationships.services && relationships.services.length > 0 && (
-          <RelationshipGroup label="Services" refs={dedupeRefs(relationships.services)} onNavigate={onNavigate} />
+          <RelationshipGroup label="Services" refs={dedupeResourceRefs(relationships.services)} onNavigate={onNavigate} />
         )}
         {relationships.ingresses && relationships.ingresses.length > 0 && (
-          <RelationshipGroup label="Ingresses" refs={dedupeRefs(relationships.ingresses)} onNavigate={onNavigate} />
+          <RelationshipGroup label="Ingresses" refs={dedupeResourceRefs(relationships.ingresses)} onNavigate={onNavigate} />
         )}
         {relationships.gateways && relationships.gateways.length > 0 && (
-          <RelationshipGroup label="Gateways" refs={dedupeRefs(relationships.gateways)} onNavigate={onNavigate} />
+          <RelationshipGroup label="Gateways" refs={dedupeResourceRefs(relationships.gateways)} onNavigate={onNavigate} />
         )}
         {relationships.routes && relationships.routes.length > 0 && (
-          <RelationshipGroup label="Routes" refs={dedupeRefs(relationships.routes)} onNavigate={onNavigate} />
+          <RelationshipGroup label="Routes" refs={dedupeResourceRefs(relationships.routes)} onNavigate={onNavigate} />
         )}
         {relationships.pods && relationships.pods.length > 0 && (
-          <RelationshipGroup label="Pods" refs={dedupeRefs(relationships.pods)} onNavigate={onNavigate} />
+          <RelationshipGroup label="Pods" refs={dedupeResourceRefs(relationships.pods)} onNavigate={onNavigate} />
         )}
-        {relationships.configRefs && relationships.configRefs.length > 0 && (
-          <RelationshipGroup label="Configuration" refs={dedupeRefs(relationships.configRefs)} onNavigate={onNavigate} />
+        {configRefs.length > 0 && (
+          <RelationshipGroup label="Configuration" refs={dedupeResourceRefs(configRefs)} onNavigate={onNavigate} />
         )}
-        {relationships.consumers && relationships.consumers.length > 0 && (
-          <RelationshipGroup label="Used By" refs={dedupeRefs(relationships.consumers)} onNavigate={onNavigate} />
+        {consumers.length > 0 && (
+          <RelationshipGroup label="Used By" refs={dedupeResourceRefs(consumers)} onNavigate={onNavigate} />
         )}
         {relationships.scalers && relationships.scalers.length > 0 && (
-          <RelationshipGroup label="Autoscaler" refs={dedupeRefs(relationships.scalers)} onNavigate={onNavigate} />
+          <RelationshipGroup label="Autoscaler" refs={dedupeResourceRefs(relationships.scalers)} onNavigate={onNavigate} />
         )}
         {relationships.storageRefs && relationships.storageRefs.length > 0 && (
-          <RelationshipGroup label="Storage" refs={dedupeRefs(relationships.storageRefs)} onNavigate={onNavigate} />
+          <RelationshipGroup label="Storage" refs={dedupeResourceRefs(relationships.storageRefs)} onNavigate={onNavigate} />
         )}
         {relationships.pdbs && relationships.pdbs.length > 0 && (
-          <RelationshipGroup label="Disruption Budget" refs={dedupeRefs(relationships.pdbs)} onNavigate={onNavigate} />
+          <RelationshipGroup label="Disruption Budget" refs={dedupeResourceRefs(relationships.pdbs)} onNavigate={onNavigate} />
         )}
         {relationships.networkPolicies && relationships.networkPolicies.length > 0 && (
-          <RelationshipGroup label="Network Policies" refs={dedupeRefs(relationships.networkPolicies)} onNavigate={onNavigate} />
+          <RelationshipGroup label="Network Policies" refs={dedupeResourceRefs(relationships.networkPolicies)} onNavigate={onNavigate} />
         )}
         {relationships.resourceClaims && relationships.resourceClaims.length > 0 && (
-          <RelationshipGroup label="Resource Claims" refs={dedupeRefs(relationships.resourceClaims)} onNavigate={onNavigate} />
+          <RelationshipGroup label="Resource Claims" refs={dedupeResourceRefs(relationships.resourceClaims)} onNavigate={onNavigate} />
+        )}
+        {relationships.dependencies && relationships.dependencies.length > 0 && (
+          <RelationshipGroup label="Depends On" refs={dedupeResourceRefs(relationships.dependencies)} onNavigate={onNavigate} />
+        )}
+        {relationships.dependents && relationships.dependents.length > 0 && (
+          <RelationshipGroup label="Required By" refs={dedupeResourceRefs(relationships.dependents)} onNavigate={onNavigate} />
         )}
         {relationships.scaleTarget && (
           <RelationshipGroup label="Scale Target" refs={[relationships.scaleTarget]} onNavigate={onNavigate} />