@skyhook-io/k8s-ui 1.17.0 → 1.17.1

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

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
+
+let root: Root
+const base = { open: true, onClose: vi.fn(), onConfirm: vi.fn(), resourceName: 'web', resourceKind: 'Deployment', namespaceName: 'demo', isLoading: false }
+beforeEach(() => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  document.body.replaceChildren()
+  vi.clearAllMocks()
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+})
+
+describe('Deletion preview states', () => {
+  it('states the namespace-wide deletion consequence without relying on topology', async () => {
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} resourceKind="Namespace" resourceName="demo" namespaceName="" cascadeRootResolved={false} />))
+    expect(document.body.textContent).toContain('delete the namespace "demo" and the resources in it')
+    expect(document.body.textContent).not.toContain("not in Radar's topology")
+  })
+  it('shows one advisory statement for a resolved preview', async () => {
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved cascadeDependents={[{ kind: 'Pod', namespace: 'demo', name: 'web-pod' }]} />))
+    const toggle = [...document.querySelectorAll('button')].find(b => b.textContent?.includes('May affect'))!
+    await act(async () => toggle.click())
+    expect(document.body.textContent).toContain('web-pod')
+    expect(document.body.textContent?.match(/does not predict what will be deleted/g)).toHaveLength(1)
+    expect(document.body.textContent).not.toContain('Other resources may be affected')
+  })
+  it.each([[], undefined])('omits the advisory statement for an empty resolved preview (%j)', async (dependents) => {
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved cascadeDependents={dependents} />))
+    expect(document.body.textContent).not.toContain('May affect')
+    expect(document.body.textContent).not.toContain('does not predict')
+    expect(document.body.textContent).not.toContain('unavailable')
+    expect(document.body.textContent).not.toContain('Other resources may be affected')
+  })
+  it('distinguishes an observed unresolved root from a fetch failure', async () => {
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved={false} />))
+    expect(document.body.textContent).toContain("This resource is not in Radar's topology")
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved={false} cascadePreviewFailed cascadeDependents={[{ kind: 'Pod', namespace: 'demo', name: 'stale' }]} />))
+    expect(document.body.textContent).toContain('Related-resource preview unavailable.')
+    expect(document.body.textContent).not.toContain('This resource is not in')
+    expect(document.body.textContent).not.toContain('Other resources may be affected')
+    expect(document.body.textContent).not.toContain('May affect')
+    const confirm = [...document.querySelectorAll('button')].find(b => b.textContent === 'Delete')!
+    expect(confirm.disabled).toBe(false)
+    await act(async () => confirm.click())
+    expect(base.onConfirm).toHaveBeenCalledWith(false)
+  })
+  it('shows loading without presenting stale failure or success as a result', async () => {
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeLoading cascadePreviewFailed cascadeRootResolved />))
+    expect(document.body.textContent).toContain('Checking related resources')
+    expect(document.body.textContent).not.toContain('unavailable')
+    expect(document.body.textContent).not.toContain('does not predict')
+  })
+})

package/src/components/ui/ForceDeleteConfirmDialog.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react'
-import { AlertTriangle, Loader2 } from 'lucide-react'
+import { Loader2 } from 'lucide-react'
 import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
 import { ConfirmDialog } from './ConfirmDialog'
 import { pluralize } from '../../utils/pluralize'
@@ -22,6 +22,7 @@ interface ForceDeleteConfirmDialogProps {
   cascadeDependents?: CascadeDependent[]
   cascadeLoading?: boolean
   cascadeRootResolved?: boolean
+  cascadePreviewFailed?: boolean
 }
 
 export function ForceDeleteConfirmDialog({
@@ -35,8 +36,10 @@ export function ForceDeleteConfirmDialog({
   cascadeDependents,
   cascadeLoading,
   cascadeRootResolved,
+  cascadePreviewFailed,
 }: ForceDeleteConfirmDialogProps) {
   const [forceDelete, setForceDelete] = useState(false)
+  const isNamespace = resourceKind.toLowerCase() === 'namespace'
 
   function handleClose() {
     onClose()
@@ -54,7 +57,7 @@ export function ForceDeleteConfirmDialog({
       onConfirm={handleConfirm}
       title="Delete Resource"
       message={`Are you sure you want to delete "${resourceName}"?`}
-      details={`This will permanently delete the ${resourceKind} "${resourceName}" from the "${namespaceName}" namespace.`}
+      details={isNamespace ? `This will permanently delete the namespace "${resourceName}" and the resources in it.` : `This will permanently delete the ${resourceKind} "${resourceName}" from the "${namespaceName}" namespace.`}
       confirmLabel={forceDelete ? 'Force Delete' : 'Delete'}
       variant="danger"
       isLoading={isLoading}
@@ -63,21 +66,30 @@ export function ForceDeleteConfirmDialog({
         {cascadeLoading && (
           <div className="flex items-center gap-2 text-xs text-theme-text-tertiary">
             <Loader2 className="w-3.5 h-3.5 animate-spin" />
-            Checking for dependent resources...
+            Checking related resources...
           </div>
         )}
 
-        {!cascadeLoading && cascadeDependents && cascadeDependents.length > 0 && (
+        {!cascadeLoading && !cascadePreviewFailed && cascadeDependents && cascadeDependents.length > 0 && (
           <CascadeDependentsList dependents={cascadeDependents} />
         )}
 
-        {!cascadeLoading && cascadeRootResolved === false && (
-          <div className="flex items-start gap-2 rounded border border-theme-border bg-theme-elevated px-3 py-2 text-xs text-warning-text">
-            <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-            <span>
-              Radar couldn&apos;t verify which dependent resources Kubernetes will also delete. Additional resources may be deleted but aren&apos;t shown here.
-            </span>
-          </div>
+        {!cascadeLoading && cascadePreviewFailed && (
+          <p className="text-xs text-theme-text-tertiary">
+            Related-resource preview unavailable.
+          </p>
+        )}
+
+        {!isNamespace && !cascadeLoading && !cascadePreviewFailed && cascadeRootResolved === false && (
+          <p className="text-xs text-theme-text-tertiary">
+            This resource is not in Radar&apos;s topology, so its related resources cannot be previewed.
+          </p>
+        )}
+
+        {!cascadeLoading && !cascadePreviewFailed && cascadeRootResolved === true && cascadeDependents && cascadeDependents.length > 0 && (
+          <p className="text-xs text-theme-text-secondary">
+            This list shows visible related resources; it does not predict what will be deleted.
+          </p>
         )}
 
         <label className="flex items-center gap-2 text-sm text-theme-text-secondary">
@@ -120,7 +132,7 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
       >
         <CollapseChevron open={expanded} inheritColor className="w-3.5 h-3.5" />
         <span>
-          Will also delete {pluralize(dependents.length, 'dependent resource')}
+          May affect {pluralize(dependents.length, 'related resource')}
         </span>
       </button>
 

package/src/components/ui/RefLink.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+import type { ResourceRef } from '../../types/core'
+
+export type NavigateToRef = (ref: ResourceRef) => void
+
+/** A reference to another object: a link when the host can navigate, plain text otherwise. */
+export function RefLink({ refTo, onNavigate, children, mono }: { refTo: ResourceRef; onNavigate?: NavigateToRef; children?: ReactNode; mono?: boolean }) {
+  const label = children ?? refTo.name
+  if (!onNavigate) return <span className={clsx(mono && 'font-mono')}>{label}</span>
+  return (
+    <button
+      type="button"
+      onClick={() => onNavigate(refTo)}
+      className={clsx('text-accent-text hover:underline text-left break-all', mono && 'font-mono')}
+    >
+      {label}
+    </button>
+  )
+}

package/src/components/ui/RowActionMenu.tsx

@@ -56,14 +56,19 @@ export function RowActionMenu({ items, ariaLabel = 'Row actions', compact = true
     const onDown = (e: MouseEvent) => {
       if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
     }
+    // Capture phase, consumed: Escape that closes the menu must not also run
+    // the page's own Escape (close the drawer, leave the full view).
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpen(false)
+      if (e.key !== 'Escape') return
+      e.preventDefault()
+      e.stopPropagation()
+      setOpen(false)
     }
     document.addEventListener('mousedown', onDown)
-    document.addEventListener('keydown', onKey)
+    document.addEventListener('keydown', onKey, true)
     return () => {
       document.removeEventListener('mousedown', onDown)
-      document.removeEventListener('keydown', onKey)
+      document.removeEventListener('keydown', onKey, true)
     }
   }, [open])
 

package/src/components/ui/crd-definition-navigation.test.tsx

@@ -0,0 +1,160 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, expect, it, vi } from "vitest";
+import { MetadataSection } from "./drawer-components";
+import {
+  customResourceDefinitionRef,
+  initNavigationMap,
+  resetNavigationMap,
+} from "../../utils/navigation";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+afterEach(resetNavigationMap);
+const resources = [
+  {
+    group: "plants.example.io",
+    version: "v1",
+    kind: "Cactus",
+    name: "cacti",
+    definitionName: "cacti.plants.example.io",
+    namespaced: true,
+    isCrd: true,
+    verbs: ["get"],
+  },
+  {
+    group: "other.example.io",
+    version: "v1",
+    kind: "Cactus",
+    name: "cactuses",
+    definitionName: "cactuses.other.example.io",
+    namespaced: false,
+    isCrd: true,
+    verbs: ["get"],
+  },
+  {
+    group: "apps",
+    version: "v1",
+    kind: "Deployment",
+    name: "deployments",
+    namespaced: true,
+    isCrd: false,
+    verbs: ["get"],
+  },
+];
+
+it("uses exact discovered CRD group and plural instead of guessing from the Kind", () => {
+  expect(
+    customResourceDefinitionRef("plants.example.io/v1", "Cactus"),
+  ).toBeNull();
+  initNavigationMap(resources);
+  expect(customResourceDefinitionRef("plants.example.io/v1", "Cactus")).toEqual(
+    {
+      kind: "CustomResourceDefinition",
+      group: "apiextensions.k8s.io",
+      namespace: "",
+      name: "cacti.plants.example.io",
+    },
+  );
+  expect(
+    customResourceDefinitionRef("other.example.io/v1", "Cactus")?.name,
+  ).toBe("cactuses.other.example.io");
+  expect(customResourceDefinitionRef("apps/v1", "Deployment")).toBeNull();
+  initNavigationMap([
+    ...resources,
+    {
+      group: "metrics.k8s.io",
+      version: "v1beta1",
+      kind: "PodMetrics",
+      name: "pods",
+      namespaced: true,
+      isCrd: true,
+      verbs: ["get"],
+    },
+  ]);
+  expect(
+    customResourceDefinitionRef("metrics.k8s.io/v1beta1", "PodMetrics"),
+  ).toBeNull();
+  resetNavigationMap();
+  expect(
+    customResourceDefinitionRef("plants.example.io/v1", "Cactus"),
+  ).toBeNull();
+  initNavigationMap([
+    {
+      ...resources[0],
+      name: "cactuses",
+      definitionName: "cactuses.plants.example.io",
+    },
+  ]);
+  expect(
+    customResourceDefinitionRef("plants.example.io/v1", "Cactus")?.name,
+  ).toBe("cactuses.plants.example.io");
+  expect(
+    customResourceDefinitionRef("unknown.example.io/v1", "Cactus"),
+  ).toBeNull();
+  expect(customResourceDefinitionRef(undefined, "Cactus")).toBeNull();
+  initNavigationMap([]);
+  expect(
+    customResourceDefinitionRef("plants.example.io/v1", "Cactus"),
+  ).toBeNull();
+});
+
+it("navigates from instance metadata to its cluster-scoped definition", async () => {
+  initNavigationMap(resources);
+  const element = document.createElement("div");
+  const root = createRoot(element);
+  const onNavigate = vi.fn();
+  try {
+    await act(async () =>
+      root.render(
+        <MetadataSection
+          data={{
+            apiVersion: "plants.example.io/v1",
+            kind: "Cactus",
+            metadata: { name: "live", namespace: "team" },
+          }}
+          onNavigate={onNavigate}
+        />,
+      ),
+    );
+    const button = [...element.querySelectorAll("button")].find(
+      (b) => b.textContent === "cacti.plants.example.io",
+    );
+    expect(button).toBeDefined();
+    await act(async () => button!.click());
+    expect(onNavigate).toHaveBeenCalledWith({
+      kind: "CustomResourceDefinition",
+      group: "apiextensions.k8s.io",
+      namespace: "",
+      name: "cacti.plants.example.io",
+    });
+  } finally {
+    await act(async () => root.unmount());
+  }
+});
+
+it("keeps exact Kind casing within one API group", () => {
+  initNavigationMap([
+    ...resources,
+    { ...resources[0], kind: "CACTUS", name: "uppercacti", definitionName: "uppercacti.plants.example.io" },
+  ]);
+  expect(customResourceDefinitionRef("plants.example.io/v1", "Cactus")?.name).toBe("cacti.plants.example.io");
+  expect(customResourceDefinitionRef("plants.example.io/v1", "CACTUS")?.name).toBe("uppercacti.plants.example.io");
+  expect(customResourceDefinitionRef("plants.example.io/v1", "cactus")).toBeNull();
+});
+
+it("does not add a guessed definition to built-in or undiscovered metadata", () => {
+  initNavigationMap(resources);
+  const html = renderToStaticMarkup(
+    <MetadataSection
+      data={{
+        apiVersion: "apps/v1",
+        kind: "Deployment",
+        metadata: { name: "live", uid: "native" },
+      }}
+    />,
+  );
+  expect(html).toContain("native");
+  expect(html).not.toContain("Definition");
+});

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

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
-import { EventsSection, ProblemAlerts, OperationalIssuesShownContext, RelatedResourcesSection, defaultConditionTone } from './drawer-components'
+import { AlertBanner, EventsSection, ProblemAlerts, OperationalIssuesShownContext, RelatedResourcesSection, defaultConditionTone } from './drawer-components'
 
 const problems = [
   { color: 'red' as const, message: 'Application is Degraded' },
@@ -127,3 +127,112 @@ describe('namespace deletion condition polarity', () => {
     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,6 +1,7 @@
 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 { formatDuration, formatResources } from '../resources/resource-utils'
@@ -392,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' },
@@ -399,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,
@@ -406,17 +411,19 @@ 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
-  /** Replaces the default bottom margin when the banner sits in a tighter layout. */
+  /** 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, className }: 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
@@ -427,7 +434,14 @@ export function AlertBanner({ variant, icon, title, message, items, children, cl
         <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)}>
@@ -441,6 +455,11 @@ export function AlertBanner({ variant, icon, title, message, items, children, cl
             )}
             {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>
         )}
@@ -527,13 +546,16 @@ 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} />
@@ -739,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',
@@ -828,6 +850,13 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
     (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
@@ -889,6 +918,27 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
         {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} />
         )}
@@ -940,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>
@@ -1003,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',
@@ -1017,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'