@skyhook-io/k8s-ui 1.16.3 → 1.17.1

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 { AlertBanner, 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,169 @@ 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')
+  })
+})
+
+describe('monitors projection', () => {
+  it('renders Monitored By alone and deduplicates by API group', () => {
+    const ref = { kind: 'Widget', group: 'one.example', namespace: 'demo', name: 'shared' }
+    const html = renderToString(<RelatedResourcesSection relationships={{ monitors: [ref, ref, { ...ref, group: 'two.example' }] }} onNavigate={() => {}} />)
+    expect(html).toContain('Related Resources')
+    expect(html).toContain('Monitored By')
+    expect(html.match(/<button/g)).toHaveLength(3)
+  })
+})
+
+
+describe('monitorTargets projection', () => {
+  it('renders Monitors alone and deduplicates by API group', () => {
+    const ref = { kind: 'Widget', group: 'one.example', namespace: 'demo', name: 'shared' }
+    const html = renderToString(<RelatedResourcesSection relationships={{ monitorTargets: [ref, ref, { ...ref, group: 'two.example' }] }} onNavigate={() => {}} />)
+    expect(html).toContain('Related Resources')
+    expect(html).toContain('Monitors')
+    expect(html.match(/<button/g)).toHaveLength(3)
+  })
+})
+
+
+describe('backends projection', () => {
+  it('renders Routes To alone and deduplicates by API group', () => {
+    const ref = { kind: 'Widget', group: 'one.example', namespace: 'demo', name: 'shared' }
+    const html = renderToString(<RelatedResourcesSection relationships={{ backends: [ref, ref, { ...ref, group: 'two.example' }] }} onNavigate={() => {}} />)
+    expect(html).toContain('Related Resources')
+    expect(html).toContain('Routes To')
+    expect(html.match(/<button/g)).toHaveLength(3)
+  })
+})
+
+
+describe('routedFrom projection', () => {
+  it('renders Routed From alone and deduplicates by API group', () => {
+    const ref = { kind: 'Widget', group: 'one.example', namespace: 'demo', name: 'shared' }
+    const html = renderToString(<RelatedResourcesSection relationships={{ routedFrom: [ref, ref, { ...ref, group: 'two.example' }] }} onNavigate={() => {}} />)
+    expect(html).toContain('Related Resources')
+    expect(html).toContain('Routed From')
+    expect(html.match(/<button/g)).toHaveLength(3)
+  })
+})
+
+
+describe('protects projection', () => {
+  it('renders Selects alone and deduplicates by API group', () => {
+    const ref = { kind: 'Widget', group: 'one.example', namespace: 'demo', name: 'shared' }
+    const html = renderToString(<RelatedResourcesSection relationships={{ protects: [ref, ref, { ...ref, group: 'two.example' }] }} onNavigate={() => {}} />)
+    expect(html).toContain('Related Resources')
+    expect(html).toContain('Selects')
+    expect(html.match(/<button/g)).toHaveLength(3)
+  })
+})
+
+
+describe('healthChecks projection', () => {
+  it('renders Health Checks alone and deduplicates by API group', () => {
+    const ref = { kind: 'Widget', group: 'one.example', namespace: 'demo', name: 'shared' }
+    const html = renderToString(<RelatedResourcesSection relationships={{ healthChecks: [ref, ref, { ...ref, group: 'two.example' }] }} onNavigate={() => {}} />)
+    expect(html).toContain('Related Resources')
+    expect(html).toContain('Health Checks')
+    expect(html.match(/<button/g)).toHaveLength(3)
+  })
+})
+
+
+describe('stagedPolicies projection', () => {
+  it('renders Staged Policies alone and deduplicates by API group', () => {
+    const ref = { kind: 'Widget', group: 'one.example', namespace: 'demo', name: 'shared' }
+    const html = renderToString(<RelatedResourcesSection relationships={{ stagedPolicies: [ref, ref, { ...ref, group: 'two.example' }] }} onNavigate={() => {}} />)
+    expect(html).toContain('Related Resources')
+    expect(html).toContain('Staged Policies')
+    expect(html.match(/<button/g)).toHaveLength(3)
+  })
+})
+
+
+describe('routing version skew', () => {
+  it('keeps older Services, Gateways, Routes and Pods fields visible', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{ services: [{kind: 'Service', namespace: 'demo', name: 'web'}], gateways: [{kind: 'HTTPRoute', group: 'gateway.networking.k8s.io', namespace: 'demo', name: 'old-route'}], routes: [{kind: 'IngressRoute', group: 'traefik.io', namespace: 'demo', name: 'route'}], pods: [{kind: 'Deployment', group: 'apps', namespace: 'demo', name: 'old-target'}] }} />)
+    for (const label of ['Services', 'Gateways', 'Routes', 'Pods', 'old-route', 'old-target']) expect(html).toContain(label)
+  })
+})
+
+describe('related resource chips', () => {
+  it('tells a Knative Service apart from a core Service', () => {
+    const html = renderToString(<RelatedResourcesSection relationships={{
+      services: [{ kind: 'Service', namespace: 'team', name: 'web-private' }],
+      routedFrom: [{ kind: 'Service', group: 'serving.knative.dev', namespace: 'team', name: 'web' }],
+    }} onNavigate={() => {}} />)
+    expect(html).toContain('>svc<!-- -->/</span>web-private<')
+    expect(html).toContain('>ksvc<!-- -->/</span>web<')
+  })
+})
+
+
+describe('AlertBanner optional actions', () => {
+  it('retains the title-only default without introducing a layout wrapper', () => {
+    const html = renderToString(<AlertBanner variant="info" title="Paused" />)
+    expect(html).toMatch(/<div class="text-sm font-medium [^"]*">Paused<\/div>/)
+    expect(html).not.toContain('justify-between'); expect(html).not.toContain('flex-1')
+  })
+  it.each([undefined, 'Check connection'])('places the optional action next to the title, retaining the body (%s)', message => {
+    const html = renderToString(<AlertBanner variant="warning" title="Metrics unavailable" message={message} action={<button>Open settings</button>} />)
+    expect(html).toContain('Metrics unavailable'); expect(html).toContain('<button>Open settings</button>')
+    expect(html).toContain('flex-wrap'); if (message) expect(html).toContain(message)
+  })
+})

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

@@ -1,8 +1,10 @@
+import { dedupeResourceRefs, omitResourceRefs } from '../../utils/resource-refs'
+import { customResourceDefinitionRef, getCRDDefinitionsSnapshot, subscribeCRDDefinitions } from '../../utils/navigation'
 import { Disclosure } from './Disclosure'
-import { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useState, useSyncExternalStore } 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 +208,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 +228,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',
@@ -382,6 +393,8 @@ export function ConditionsSection({
 // ============================================================================
 
 const ALERT_COLORS = {
+  alert:   { bg: 'status-alert', border: '', title: '', message: '', list: '', bullet: '' },
+  unknown: { bg: 'status-unknown', border: '', title: '', message: '', list: '', bullet: '' },
   error:   { bg: 'bg-red-50 dark:bg-red-950/30', border: 'border-red-200 dark:border-red-800/30', title: 'text-red-700 dark:text-red-300', message: 'text-red-600/80 dark:text-red-300/70', list: 'text-red-600 dark:text-red-400', bullet: 'text-red-400/60 dark:text-red-400/50' },
   warning: { bg: 'bg-amber-50 dark:bg-amber-950/30', border: 'border-amber-200 dark:border-amber-800/30', title: 'text-amber-700 dark:text-amber-300', message: 'text-amber-600/80 dark:text-amber-300/70', list: 'text-amber-600 dark:text-amber-400', bullet: 'text-amber-400/60 dark:text-amber-400/50' },
   info:    { bg: 'bg-sky-50 dark:bg-sky-950/30', border: 'border-sky-200 dark:border-sky-800/30', title: 'text-sky-700 dark:text-sky-300', message: 'text-sky-600/80 dark:text-sky-300/70', list: 'text-sky-600 dark:text-sky-400', bullet: 'text-sky-400/60 dark:text-sky-400/50' },
@@ -389,6 +402,8 @@ const ALERT_COLORS = {
 } as const
 
 const DEFAULT_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  alert: AlertTriangle,
+  unknown: AlertTriangle,
   error: AlertTriangle,
   warning: AlertTriangle,
   info: AlertTriangle,
@@ -396,26 +411,37 @@ const DEFAULT_ICONS: Record<string, React.ComponentType<{ className?: string }>>
 }
 
 interface AlertBannerProps {
-  variant: 'error' | 'warning' | 'info' | 'success'
+  variant: keyof typeof ALERT_COLORS
   icon?: React.ComponentType<{ className?: string }>
   title: string
   message?: React.ReactNode
   items?: string[]
   children?: React.ReactNode
+  /** A control at the end of the title line, e.g. a link to where the problem is handled. */
+  action?: React.ReactNode
+  /** Replaces the default bottom margin (`mb-4`). */
+  className?: string
 }
 
-export function AlertBanner({ variant, icon, title, message, items, children }: AlertBannerProps) {
+export function AlertBanner({ variant, icon, title, message, items, children, action, 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 ? (
           <div className="flex-1 min-w-0">
-            <div className={clsx('text-sm font-medium', colors.title, items && 'mb-1')}>{title}</div>
+            {action ? (
+              <div className={clsx('flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1', items && 'mb-1')}>
+                <div className={clsx('min-w-0 text-sm font-medium', colors.title)}>{title}</div>
+                <div className="shrink-0">{action}</div>
+              </div>
+            ) : (
+              <div className={clsx('text-sm font-medium', colors.title, items && 'mb-1')}>{title}</div>
+            )}
             {message && <div className={clsx('text-xs mt-1 break-words', colors.message)}>{message}</div>}
             {items && items.length > 0 && (
               <ul className={clsx('text-xs space-y-1', colors.list)}>
@@ -429,6 +455,11 @@ export function AlertBanner({ variant, icon, title, message, items, children }:
             )}
             {children}
           </div>
+        ) : action ? (
+          <div className="flex min-w-0 flex-1 flex-wrap items-center justify-between gap-x-3 gap-y-1">
+            <div className={clsx('min-w-0 text-sm font-medium', colors.title)}>{title}</div>
+            <div className="shrink-0">{action}</div>
+          </div>
         ) : (
           <div className={clsx('text-sm font-medium', colors.title)}>{title}</div>
         )}
@@ -515,19 +546,22 @@ export function AnnotationsSection({ data }: { data: any }) {
   )
 }
 
-export function MetadataSection({ data }: { data: any }) {
+export function MetadataSection({ data, onNavigate }: { data: any; onNavigate?: (ref: ResourceRef) => void }) {
+  useSyncExternalStore(subscribeCRDDefinitions, getCRDDefinitionsSnapshot, getCRDDefinitionsSnapshot)
   const meta = data.metadata
   if (!meta) return null
+  const definition = customResourceDefinitionRef(data.apiVersion, data.kind)
 
   return (
     <Section title="Metadata" defaultExpanded>
       <PropertyList>
+        {definition && <Property label="Definition" value={<ResourceLink {...definition} onNavigate={onNavigate} />} />}
         <Property label="UID" value={meta.uid} />
         <Property label="Resource Version" value={meta.resourceVersion} />
         <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>
@@ -727,7 +761,7 @@ export function formatKindName(kind: string): string {
     pods: 'Pod', deployments: 'Deployment', daemonsets: 'DaemonSet', statefulsets: 'StatefulSet',
     replicasets: 'ReplicaSet', services: 'Service', endpointslices: 'EndpointSlice', ingresses: 'Ingress',
     gateways: 'Gateway', httproutes: 'HTTPRoute', grpcroutes: 'GRPCRoute',
-    tcproutes: 'TCPRoute', tlsroutes: 'TLSRoute', configmaps: 'ConfigMap',
+    tcproutes: 'TCPRoute', tlsroutes: 'TLSRoute', udproutes: 'UDPRoute', configmaps: 'ConfigMap',
     secrets: 'Secret', jobs: 'Job', cronjobs: 'CronJob', hpas: 'HPA',
     horizontalpodautoscalers: 'HPA', nodes: 'Node', namespaces: 'Namespace',
     persistentvolumeclaims: 'PVC', persistentvolumes: 'PV',
@@ -784,25 +818,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 +848,15 @@ 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.monitors && relationships.monitors.length > 0) ||
+    (relationships.monitorTargets && relationships.monitorTargets.length > 0) ||
+    (relationships.backends && relationships.backends.length > 0) ||
+    (relationships.routedFrom && relationships.routedFrom.length > 0) ||
+    (relationships.protects && relationships.protects.length > 0) ||
+    (relationships.healthChecks && relationships.healthChecks.length > 0) ||
+    (relationships.stagedPolicies && relationships.stagedPolicies.length > 0) ||
     relationships.scaleTarget
 
   if (!hasRelationships) return null
@@ -837,43 +874,70 @@ 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.monitors && relationships.monitors.length > 0 && (
+          <RelationshipGroup label="Monitored By" refs={dedupeResourceRefs(relationships.monitors)} onNavigate={onNavigate} />
+        )}
+        {relationships.monitorTargets && relationships.monitorTargets.length > 0 && (
+          <RelationshipGroup label="Monitors" refs={dedupeResourceRefs(relationships.monitorTargets)} onNavigate={onNavigate} />
+        )}
+        {relationships.backends && relationships.backends.length > 0 && (
+          <RelationshipGroup label="Routes To" refs={dedupeResourceRefs(relationships.backends)} onNavigate={onNavigate} />
+        )}
+        {relationships.routedFrom && relationships.routedFrom.length > 0 && (
+          <RelationshipGroup label="Routed From" refs={dedupeResourceRefs(relationships.routedFrom)} onNavigate={onNavigate} />
+        )}
+        {relationships.protects && relationships.protects.length > 0 && (
+          <RelationshipGroup label="Selects" refs={dedupeResourceRefs(relationships.protects)} onNavigate={onNavigate} />
+        )}
+        {relationships.healthChecks && relationships.healthChecks.length > 0 && (
+          <RelationshipGroup label="Health Checks" refs={dedupeResourceRefs(relationships.healthChecks)} onNavigate={onNavigate} />
+        )}
+        {relationships.stagedPolicies && relationships.stagedPolicies.length > 0 && (
+          <RelationshipGroup label="Staged Policies" refs={dedupeResourceRefs(relationships.stagedPolicies)} onNavigate={onNavigate} />
         )}
         {relationships.scaleTarget && (
           <RelationshipGroup label="Scale Target" refs={[relationships.scaleTarget]} onNavigate={onNavigate} />
@@ -926,7 +990,7 @@ export interface ResourceRefBadgeProps {
 /** Reusable chip/badge for showing a related resource with click-to-navigate */
 export function ResourceRefBadge({ resourceRef, onClick, wrapAtSeparator }: ResourceRefBadgeProps) {
   const kindClass = getKindColor(resourceRef.kind)
-  const kindName = formatKindForRef(resourceRef.kind)
+  const kindName = formatKindForRef(resourceRef.kind, resourceRef.group)
   const content = wrapAtSeparator ? (
     <>
       <span className="shrink-0 opacity-60">{kindName}/</span>
@@ -989,8 +1053,10 @@ export function ResourceLink({ name, kind, namespace = '', group, label, onNavig
   )
 }
 
-function formatKindForRef(kind: string): string {
+function formatKindForRef(kind: string, group?: string): string {
   const k = kind.toLowerCase()
+  // A Knative Service shares its kind with core Services; use Knative's own short name.
+  if (k === 'service' && group === 'serving.knative.dev') return 'ksvc'
   const shortNames: Record<string, string> = {
     deployment: 'deploy',
     daemonset: 'ds',
@@ -1003,6 +1069,7 @@ function formatKindForRef(kind: string): string {
     httproute: 'hr',
     grpcroute: 'grpc',
     tcproute: 'tcp',
+    udproute: 'udp',
     tlsroute: 'tls',
     secret: 'secret',
     pod: 'pod',

package/src/components/ui/index.ts

@@ -19,7 +19,9 @@ export type { SelectMenuOption } from './SelectMenu'
 export { Input } from './Input'
 export { FilterPill } from './FilterPill'
 export type { FilterPillTone } from './FilterPill'
-export { StatusDot, mapHealthToTone } from './status-tone'
+export { StatusDot, mapHealthToTone, toneFillClass, toneTextClass, worseTone } from './status-tone'
+export { RefLink, type NavigateToRef } from './RefLink'
+export { FoldSection, SectionHeading, type FoldSummary } from './FoldSection'
 export type { StatusTone, StatusDotProps } from './status-tone'
 export { DialogPortal } from './DialogPortal'
 export { ConfirmDialog } from './ConfirmDialog'

package/src/components/ui/monacoEditorFeatures.ts

@@ -0,0 +1,77 @@
+// Every editor feature monaco-editor's editor.main entry registers (context menu,
+// comments, multi-cursor, line operations, bracket matching, sticky scroll, quick
+// access, ...), without its language definitions and the TS/JSON/CSS/HTML language
+// services, whose workers this runtime does not ship. editor.api alone registers none
+// of these, so dropping this import silently strips them from every editor.
+import 'monaco-editor/editor/contrib/anchorSelect/browser/anchorSelect.js'
+import 'monaco-editor/editor/contrib/bracketMatching/browser/bracketMatching.js'
+import 'monaco-editor/editor/contrib/caretOperations/browser/transpose.js'
+import 'monaco-editor/editor/contrib/clipboard/browser/clipboard.js'
+import 'monaco-editor/editor/contrib/codeAction/browser/codeActionContributions.js'
+import 'monaco-editor/editor/browser/widget/codeEditor/codeEditorWidget.js'
+import 'monaco-editor/editor/contrib/codelens/browser/codelensController.js'
+import 'monaco-editor/editor/contrib/colorPicker/browser/colorPickerContribution.js'
+import 'monaco-editor/editor/contrib/comment/browser/comment.js'
+import 'monaco-editor/editor/contrib/contextmenu/browser/contextmenu.js'
+import 'monaco-editor/editor/contrib/cursorUndo/browser/cursorUndo.js'
+import 'monaco-editor/editor/browser/widget/diffEditor/diffEditor.contribution.js'
+import 'monaco-editor/editor/contrib/diffEditorBreadcrumbs/browser/contribution.js'
+import 'monaco-editor/editor/contrib/dnd/browser/dnd.js'
+import 'monaco-editor/editor/contrib/documentSymbols/browser/documentSymbols.js'
+import 'monaco-editor/editor/contrib/dropOrPasteInto/browser/dropIntoEditorContribution.js'
+import 'monaco-editor/features/find/register.js'
+import 'monaco-editor/editor/contrib/floatingMenu/browser/floatingMenu.contribution.js'
+import 'monaco-editor/editor/contrib/folding/browser/folding.js'
+import 'monaco-editor/editor/contrib/fontZoom/browser/fontZoom.js'
+import 'monaco-editor/editor/contrib/format/browser/formatActions.js'
+import 'monaco-editor/editor/contrib/gotoError/browser/gotoError.js'
+import 'monaco-editor/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js'
+import 'monaco-editor/editor/contrib/gotoSymbol/browser/link/goToDefinitionAtPosition.js'
+import 'monaco-editor/editor/contrib/gpu/browser/gpuActions.js'
+import 'monaco-editor/editor/contrib/hover/browser/hoverContribution.js'
+import 'monaco-editor/editor/contrib/indentation/browser/indentation.js'
+import 'monaco-editor/editor/contrib/inlayHints/browser/inlayHintsContribution.js'
+import 'monaco-editor/editor/contrib/inlineCompletions/browser/inlineCompletions.contribution.js'
+import 'monaco-editor/editor/contrib/inlineProgress/browser/inlineProgress.js'
+import 'monaco-editor/editor/contrib/inPlaceReplace/browser/inPlaceReplace.js'
+import 'monaco-editor/editor/contrib/insertFinalNewLine/browser/insertFinalNewLine.js'
+import 'monaco-editor/editor/standalone/browser/inspectTokens/inspectTokens.js'
+import 'monaco-editor/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js'
+import 'monaco-editor/editor/contrib/lineSelection/browser/lineSelection.js'
+import 'monaco-editor/editor/contrib/linesOperations/browser/linesOperations.js'
+import 'monaco-editor/editor/contrib/linkedEditing/browser/linkedEditing.js'
+import 'monaco-editor/editor/contrib/links/browser/links.js'
+import 'monaco-editor/editor/contrib/longLinesHelper/browser/longLinesHelper.js'
+import 'monaco-editor/editor/contrib/middleScroll/browser/middleScroll.contribution.js'
+import 'monaco-editor/editor/contrib/multicursor/browser/multicursor.js'
+import 'monaco-editor/editor/contrib/parameterHints/browser/parameterHints.js'
+import 'monaco-editor/editor/contrib/placeholderText/browser/placeholderText.contribution.js'
+import 'monaco-editor/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js'
+import 'monaco-editor/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js'
+import 'monaco-editor/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js'
+import 'monaco-editor/editor/contrib/readOnlyMessage/browser/contribution.js'
+import 'monaco-editor/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js'
+import 'monaco-editor/editor/contrib/rename/browser/rename.js'
+import 'monaco-editor/editor/contrib/sectionHeaders/browser/sectionHeaders.js'
+import 'monaco-editor/editor/contrib/semanticTokens/browser/viewportSemanticTokens.js'
+import 'monaco-editor/editor/contrib/smartSelect/browser/smartSelect.js'
+import 'monaco-editor/editor/contrib/snippet/browser/snippetController2.js'
+import 'monaco-editor/editor/contrib/stickyScroll/browser/stickyScrollContribution.js'
+import 'monaco-editor/editor/contrib/suggest/browser/suggestInlineCompletions.js'
+import 'monaco-editor/editor/standalone/browser/toggleHighContrast/toggleHighContrast.js'
+import 'monaco-editor/editor/contrib/toggleTabFocusMode/browser/toggleTabFocusMode.js'
+import 'monaco-editor/editor/contrib/tokenization/browser/tokenization.js'
+import 'monaco-editor/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.js'
+import 'monaco-editor/editor/contrib/unusualLineTerminators/browser/unusualLineTerminators.js'
+import 'monaco-editor/editor/contrib/wordHighlighter/browser/wordHighlighter.js'
+import 'monaco-editor/editor/contrib/wordOperations/browser/wordOperations.js'
+import 'monaco-editor/editor/contrib/wordPartOperations/browser/wordPartOperations.js'
+import 'monaco-editor/editor/browser/coreCommands.js'
+import 'monaco-editor/editor/contrib/caretOperations/browser/caretOperations.js'
+import 'monaco-editor/editor/contrib/dropOrPasteInto/browser/copyPasteContribution.js'
+import 'monaco-editor/editor/contrib/find/browser/findController.js'
+import 'monaco-editor/editor/contrib/gotoSymbol/browser/goToCommands.js'
+import 'monaco-editor/editor/contrib/gotoError/browser/markerSelectionStatus.js'
+import 'monaco-editor/editor/contrib/semanticTokens/browser/documentSemanticTokens.js'
+import 'monaco-editor/editor/contrib/suggest/browser/suggestController.js'
+import 'monaco-editor/editor/common/standaloneStrings.js'

package/src/components/ui/monacoRuntime.ts

@@ -1,28 +1,23 @@
 /// <reference path="../../monaco-deep.d.ts" />
 
 import { loader } from '@monaco-editor/react'
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+import * as monaco from 'monaco-editor/editor/editor.api'
 // Tokenizers only — the set the YAML editor and the pod file viewer hand to
 // Monaco. JSON deliberately absent: its language lives in vs/language/json and
 // spawns a validation worker this runtime does not ship; viewers highlight
 // JSON with the YAML tokenizer, which covers it.
-import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
-import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution'
-import 'monaco-editor/esm/vs/basic-languages/html/html.contribution'
-import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
-import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
-import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
-import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'
-import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution'
-import 'monaco-editor/esm/vs/basic-languages/ini/ini.contribution'
-import 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution'
-import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js'
-import 'monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js'
-import 'monaco-editor/esm/vs/editor/contrib/format/browser/formatActions.js'
-import 'monaco-editor/esm/vs/editor/contrib/gotoError/browser/gotoError.js'
-import 'monaco-editor/esm/vs/editor/contrib/hover/browser/hoverContribution.js'
-import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js'
+import 'monaco-editor/languages/definitions/yaml/register'
+import 'monaco-editor/languages/definitions/xml/register'
+import 'monaco-editor/languages/definitions/html/register'
+import 'monaco-editor/languages/definitions/css/register'
+import 'monaco-editor/languages/definitions/javascript/register'
+import 'monaco-editor/languages/definitions/typescript/register'
+import 'monaco-editor/languages/definitions/python/register'
+import 'monaco-editor/languages/definitions/shell/register'
+import 'monaco-editor/languages/definitions/markdown/register'
+import 'monaco-editor/languages/definitions/ini/register'
+import 'monaco-editor/languages/definitions/dockerfile/register'
+import './monacoEditorFeatures'
 
 type MonacoGlobal = typeof globalThis & {
   MonacoEnvironment?: {
@@ -37,7 +32,7 @@ export async function ensureMonaco() {
     ;(globalThis as MonacoGlobal).MonacoEnvironment = {
       getWorker() {
         return new Worker(
-          new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url),
+          new URL('monaco-editor/editor/editor.worker.js', import.meta.url),
           {
             name: 'radar-monaco-editor',
             type: 'module',