@skyhook-io/k8s-ui 1.16.2 → 1.17.0

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/timeline/TimelineToolbarState.test.tsx

@@ -86,3 +86,101 @@ describe('TimelineSwimlanes controlled vs fallback', () => {
     expect(html).toContain('>View<')
   })
 })
+
+describe('TimelineList routine activity toggle', () => {
+  const at = (id: string, over: Partial<TimelineEvent>): TimelineEvent => ({
+    ...EVENTS[0], id, timestamp: new Date(NOW).toISOString(), ...over,
+  })
+  const ROUTINE: TimelineEvent[] = [
+    at('pod-started', { kind: 'Pod', name: 'web-1', source: 'k8s_event', eventType: 'Normal', reason: 'Started' }),
+    at('pod-pulled', { kind: 'Pod', name: 'web-2', source: 'k8s_event', eventType: 'Normal', reason: 'Pulled' }),
+    at('rs-scaled', { kind: 'ReplicaSet', name: 'web-5f86', eventType: 'update' }),
+  ]
+
+  it('shows the checkbox with the hidden count and the (i) explanation', () => {
+    const html = renderToString(
+      <TimelineList events={EVENTS} isLoading={false} routineEvents={ROUTINE} onShowRoutineChange={() => {}} />,
+    )
+    expect(html).toContain('Show routine activity')
+    expect(html).toContain('type="checkbox"')
+    expect(html).toContain('· <!-- -->3 hidden')
+    expect(html).toContain('aria-label="About routine activity"')
+  })
+
+  it('counts only hidden rows the active filters would show', () => {
+    const html = renderToString(
+      <TimelineList
+        events={EVENTS}
+        isLoading={false}
+        kindFilter={['Pod']}
+        onKindFilterChange={() => {}}
+        routineEvents={ROUTINE}
+        onShowRoutineChange={() => {}}
+      />,
+    )
+    expect(html).toContain('2 routine events<!-- --> <!-- -->match')
+  })
+
+  it('says none hidden when nothing matching is routine', () => {
+    const html = renderToString(
+      <TimelineList events={EVENTS} isLoading={false} search="web" onSearchChange={() => {}} routineEvents={[]} onShowRoutineChange={() => {}} />,
+    )
+    expect(html).toContain('· <!-- -->none hidden')
+  })
+
+  it('reads shown, with the count, once the user opts in', () => {
+    const html = renderToString(
+      <TimelineList events={[...EVENTS, ...ROUTINE]} isLoading={false} showRoutine routineEvents={ROUTINE} onShowRoutineChange={() => {}} />,
+    )
+    expect(html).toContain('checked=""')
+    expect(html).toContain('· <!-- -->3 shown')
+  })
+
+  it('explains an empty list whose matching rows are all routine', () => {
+    const html = renderToString(
+      <TimelineList events={[]} isLoading={false} routineEvents={ROUTINE} onShowRoutineChange={() => {}} />,
+    )
+    expect(html).toContain('All matching activity is routine')
+    expect(html).toContain('3 routine events<!-- --> <!-- -->match<!-- -->. Warnings and failures would show here.')
+    expect(html).toContain('Show routine activity')
+    expect(html).not.toContain('No activity found')
+  })
+
+  it('has no toggle when the host does not offer it', () => {
+    const html = renderToString(<TimelineList events={EVENTS} isLoading={false} />)
+    expect(html).not.toContain('routine activity')
+  })
+
+  it('folds a resource\'s rows under its newest card, describing the rest', () => {
+    const crash = (id: string, minutesAgo: number, over: Partial<TimelineEvent>) =>
+      at(id, { kind: 'Pod', name: 'api-1', timestamp: new Date(NOW - minutesAgo * 60_000).toISOString(), ...over })
+    const rows = [
+      crash('newest', 0, { eventType: 'update', healthState: 'unhealthy', owner: { kind: 'ReplicaSet', name: 'api-5f86' } }),
+      crash('b1', 1, { source: 'k8s_event', eventType: 'Warning', reason: 'BackOff' }),
+      crash('b2', 2, { source: 'k8s_event', eventType: 'Warning', reason: 'BackOff' }),
+      crash('u1', 3, { eventType: 'update', healthState: 'degraded' }),
+    ]
+    const folded = renderToString(<TimelineList events={rows} isLoading={false} foldPerResource={(e) => e.kind === 'Pod'} />)
+    expect(folded).toContain('3<!-- --> more on this <!-- -->Pod<!-- -->: <!-- -->BackOff ×2, 1 status change')
+    expect(folded).toContain('deploy<!-- -->/</span>api')
+    expect(folded).toContain('data-event-id="newest"')
+    const plain = renderToString(<TimelineList events={rows} isLoading={false} />)
+    expect(plain).not.toContain('more on this')
+  })
+
+  it('counts each event\'s occurrences in the fold summary', () => {
+    const crash = (id: string, minutesAgo: number, over: Partial<TimelineEvent>) =>
+      at(id, { kind: 'Pod', name: 'api-1', timestamp: new Date(NOW - minutesAgo * 60_000).toISOString(), ...over })
+    const rows = [
+      crash('newest', 0, { eventType: 'update', healthState: 'unhealthy' }),
+      crash('backoff', 1, { source: 'k8s_event', eventType: 'Warning', reason: 'BackOff', count: 43 }),
+    ]
+    const html = renderToString(<TimelineList events={rows} isLoading={false} foldPerResource={() => true} />)
+    expect(html).toContain('BackOff ×43')
+  })
+
+  it('keeps the (i) explanation reachable by keyboard', () => {
+    const html = renderToString(<TimelineList events={EVENTS} isLoading={false} routineEvents={[]} onShowRoutineChange={() => {}} />)
+    expect(html).toContain('<button type="button" aria-label="About routine activity"')
+  })
+})

package/src/components/timeline/index.ts

@@ -1,6 +1,7 @@
 export * from './shared'
 export * from './DiffViewer'
 export type { ActivityTypeFilter, ActivityFilterKey } from './timeline-filters'
+export { isTimelineProblem } from './timeline-filters'
 export type { TimelineSort } from './timeline-lane-sort'
 export * from './TimelineList'
 export * from './TimelineSwimlanes'

package/src/components/timeline/timeline-filters.ts

@@ -69,6 +69,13 @@ export function selectionToActivityKeys(sel: ActivitySelection): ActivityFilterK
   return []
 }
 
+// A row the Problems chip counts. Hosts that hide routine activity must never
+// hide these, so the Problems count and the list stay truthful.
+const PROBLEM_KEYS = selectionToActivityKeys({ source: 'all', problemsOnly: true })
+export function isTimelineProblem(event: TimelineEvent): boolean {
+  return matchesActivityFilter(event, PROBLEM_KEYS)
+}
+
 // Inverse of selectionToActivityKeys for the six canonical states. Legacy
 // multi-select key sets (pre-two-axis URLs) fall back to the widest reading —
 // showing more than a stale link intended beats silently hiding activity.

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} />

package/src/components/workload/WorkloadView.deleted.test.tsx

@@ -0,0 +1,58 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+import { WorkloadView } from './WorkloadView'
+
+const pod = {
+  apiVersion: 'v1',
+  kind: 'Pod',
+  metadata: { name: 'web-1', namespace: 'shop' },
+  spec: { containers: [{ name: 'app', image: 'nginx' }] },
+  status: { phase: 'Running', containerStatuses: [{ name: 'app', ready: true, state: { running: {} } }] },
+}
+
+function render(resourceError: unknown) {
+  return renderToStaticMarkup(
+    <WorkloadView
+      kind="pods"
+      namespace="shop"
+      name="web-1"
+      onBack={vi.fn()}
+      resource={pod}
+      resourceError={resourceError}
+      relationships={{ deployment: { kind: 'Deployment', namespace: 'shop', name: 'web' } }}
+      onNavigateToResource={vi.fn()}
+      actionsBarProps={{ canExec: true, canViewLogs: true, onOpenTerminal: vi.fn(), onOpenLogs: vi.fn(), onDelete: vi.fn(), renderDiagnose: () => 'Diagnose' }}
+      hasOperationalIssues
+      renderOverviewLead={() => 'Host issues panel'}
+      renderOverviewExtra={() => 'Host reachability panel'}
+      renderDiagnoseTab={() => 'Host reachability tab'}
+      reachableVia={[{ kind: 'Service', namespace: 'shop', name: 'web' }]}
+    />,
+  )
+}
+
+describe('WorkloadView for an object deleted while open', () => {
+  it('says it is gone, names its owner, and offers nothing that acts on it', () => {
+    const html = render(Object.assign(new Error('pods "web-1" not found'), { status: 404 }))
+    expect(html).toContain('This Pod no longer exists in the cluster')
+    expect(html).toContain('Go to its Deployment web')
+    expect(html).toContain('>Deleted<')
+    expect(html).not.toContain('Terminal')
+    expect(html).not.toContain('Diagnose')
+    expect(html).not.toContain('Host issues panel')
+    expect(html).not.toContain('Host reachability panel')
+    expect(html).not.toContain('Reachability')
+  })
+
+  it('shows the live view when the fetch failed for another reason', () => {
+    const html = render(Object.assign(new Error('boom'), { status: 500 }))
+    expect(html).not.toContain('no longer exists')
+    expect(html).not.toContain('>Deleted<')
+    expect(html).toContain('Terminal')
+    expect(html).toContain('Diagnose')
+    expect(html).toContain('Host issues panel')
+    expect(html).toContain('Host reachability panel')
+    expect(html).toContain('Reachability')
+  })
+})

package/src/components/workload/WorkloadView.deletedDialog.test.tsx

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+
+import { WorkloadView } from './WorkloadView'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+const deployment = {
+  apiVersion: 'apps/v1',
+  kind: 'Deployment',
+  metadata: { name: 'web', namespace: 'shop' },
+  spec: { replicas: 1, template: { spec: { containers: [{ name: 'app', image: 'nginx' }] } } },
+  status: { replicas: 1, readyReplicas: 1, availableReplicas: 1 },
+}
+
+it('closes an open Delete dialog when the object is deleted elsewhere', async () => {
+  const element = document.createElement('div')
+  document.body.append(element)
+  const root = createRoot(element)
+  const render = (resourceError: unknown) =>
+    root.render(
+      <WorkloadView
+        kind="deployments"
+        namespace="shop"
+        name="web"
+        onBack={vi.fn()}
+        resource={deployment}
+        resourceError={resourceError}
+        actionsBarProps={{ onDelete: vi.fn() }}
+      />,
+    )
+  const dialogOpen = () => document.body.textContent?.includes('Are you sure you want to delete') ?? false
+
+  await act(async () => render(null))
+  await act(async () => { element.querySelector<HTMLButtonElement>('button:has(svg.lucide-trash-2)')!.click() })
+  expect(dialogOpen()).toBe(true)
+
+  await act(async () => render(Object.assign(new Error('deployments.apps "web" not found'), { status: 404 })))
+  expect(dialogOpen()).toBe(false)
+
+  await act(async () => root.unmount())
+  element.remove()
+})

package/src/components/workload/WorkloadView.secretSave.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+
+import { WorkloadView } from './WorkloadView'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+const secret = {
+  apiVersion: 'v1',
+  kind: 'Secret',
+  metadata: { name: 'db', namespace: 'shop', resourceVersion: '7' },
+  type: 'Opaque',
+  data: { password: btoa('old') },
+}
+
+function button(label: string): HTMLButtonElement | undefined {
+  return [...document.querySelectorAll('button')].find(b => b.textContent?.trim() === label || b.title === label)
+}
+
+it('saves a Secret value against the version on screen, and offers no edit once the Secret is gone', async () => {
+  const element = document.createElement('div')
+  document.body.append(element)
+  const root = createRoot(element)
+  const onUpdateResource = vi.fn().mockResolvedValue(undefined)
+  const render = (resourceError: unknown) =>
+    root.render(
+      <WorkloadView
+        kind="secrets"
+        namespace="shop"
+        name="db"
+        onBack={vi.fn()}
+        resource={secret}
+        resourceError={resourceError}
+        canUpdateSecrets
+        onUpdateResource={onUpdateResource}
+      />,
+    )
+
+  await act(async () => render(null))
+  await act(async () => button('Reveal')!.click())
+  await act(async () => button('Edit value')!.click())
+  await act(async () => button('Save')!.click())
+  await act(async () => button('Update')!.click())
+  expect(onUpdateResource).toHaveBeenCalledWith(expect.objectContaining({
+    kind: 'secrets',
+    namespace: 'shop',
+    name: 'db',
+    reviewedResourceVersion: '7',
+  }))
+
+  await act(async () => button('Edit value')!.click())
+  expect(element.querySelector('textarea')).not.toBeNull()
+  await act(async () => render(Object.assign(new Error('secrets "db" not found'), { status: 404 })))
+  expect(element.textContent).toContain('This Secret no longer exists in the cluster')
+  expect(element.querySelector('textarea')).toBeNull()
+  expect(button('Edit value')).toBeUndefined()
+
+  await act(async () => root.unmount())
+  element.remove()
+})