@skyhook-io/k8s-ui 1.17.0 → 1.18.0

package/src/components/topology/K8sResourceNode.tsx

@@ -200,6 +200,32 @@ export function servicePortsTooltip(ports: ServicePortEntry[]): React.ReactNode
 }
 
 // Default dimensions for unknown CRD kinds
+// A domain-mapped Knative Service shows its custom domain as the subtitle; the
+// tooltip lists every mapped domain, then the Service's own URL when it is
+// public, and its cluster-internal address.
+export function knativeDomainsTooltipLines(nodeData: Record<string, unknown>): { text: string; secondary?: boolean }[] {
+  const mapped = (nodeData.mappedDomains as string[] | undefined) || [];
+  if (mapped.length === 0) return [];
+  const url = nodeData.url as string | undefined;
+  const internalUrl = nodeData.internalUrl as string | undefined;
+  const lines: { text: string; secondary?: boolean }[] = mapped.map((domain) => ({ text: domain }));
+  if (url && url !== internalUrl) lines.push({ text: `Service URL: ${url}`, secondary: true });
+  if (internalUrl) lines.push({ text: `Internal: ${internalUrl}`, secondary: true });
+  return lines;
+}
+
+function knativeDomainsTooltip(nodeData: Record<string, unknown>): React.ReactNode | null {
+  const lines = knativeDomainsTooltipLines(nodeData);
+  if (lines.length === 0) return null;
+  return (
+    <div className="space-y-0.5">
+      {lines.map((line) => (
+        <div key={line.text} className={line.secondary ? 'text-theme-text-tertiary' : undefined}>{line.text}</div>
+      ))}
+    </div>
+  );
+}
+
 export const DEFAULT_NODE_DIMENSIONS = { width: 260, height: 84 };
 
 const NODE_NAME_LENGTH_LIMITS: Partial<Record<NodeKind, number>> = {
@@ -218,6 +244,7 @@ export const NODE_DIMENSIONS: Record<
   HTTPRoute: { width: 300, height: 84 },
   GRPCRoute: { width: 300, height: 84 },
   TCPRoute: { width: 300, height: 84 },
+  UDPRoute: { width: 300, height: 84 },
   TLSRoute: { width: 300, height: 84 },
   Service: { width: 260, height: 84 },
   Deployment: { width: 280, height: 84 },
@@ -440,7 +467,8 @@ export function baseSubtitle(kind: NodeKind, nodeData: Record<string, unknown>):
     case "HTTPRoute":
     case "GRPCRoute":
     case "TCPRoute":
-    case "TLSRoute": {
+    case "TLSRoute":
+    case "UDPRoute": {
       const hostnames = nodeData.hostnames as string[];
       const rulesCount = (nodeData.rulesCount as number) || 0;
       const host = hostnames?.length ? hostnames[0] : "";
@@ -488,6 +516,10 @@ export function baseSubtitle(kind: NodeKind, nodeData: Record<string, unknown>):
       return `${count} pods (${healthy} healthy)`;
     }
     case "KnativeService": {
+      const mapped = (nodeData.mappedDomains as string[] | undefined) || [];
+      if (mapped.length > 0) {
+        return mapped.length > 1 ? `${mapped[0]} +${mapped.length - 1}` : mapped[0];
+      }
       const url = nodeData.url as string;
       if (url) {
         // Show just the hostname from the URL for compactness
@@ -558,7 +590,10 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   const subtitle = getSubtitle(kind, nodeData)
   const portsTooltip = kind === 'Service'
     ? servicePortsTooltip((nodeData.ports as ServicePortEntry[] | undefined) || [])
-    : null
+    : kind === 'KnativeService'
+      ? knativeDomainsTooltip(nodeData)
+      : null
+  const clusterLocal = kind === 'KnativeService' && nodeData.visibility === 'cluster-local'
   const isInternet = kind === 'Internet'
   const isPodGroup = kind === 'PodGroup'
   const isSmallNode = kind === 'ConfigMap' || kind === 'Secret' || kind === 'ServiceAccount' || kind === 'SealedSecret' || kind === 'ServiceMonitor' || kind === 'PodMonitor' || kind === 'HorizontalPodAutoscaler'
@@ -664,6 +699,13 @@ export const K8sResourceNode = memo(function K8sResourceNode({
                   </span>
                 </Tooltip>
               )}
+              {clusterLocal && (
+                <Tooltip content="Reachable only inside the cluster, so it has no Internet edge" position="right">
+                  <Badge tone="note" size="sm" className="!text-[9px] !px-1 !py-0.5 normal-case tracking-normal cursor-help">
+                    Cluster-local
+                  </Badge>
+                </Tooltip>
+              )}
               {trafficRole && (
                 <Badge
                   tone={trafficRole === 'canary' || trafficRole === 'preview' ? 'accent1' : 'accent2'}

package/src/components/topology/TopologyFilterSidebar.tsx

@@ -33,6 +33,7 @@ const RESOURCE_KINDS: {
   { kind: 'GRPCRoute', label: 'GRPCRoute', icon: getTopologyIcon('GRPCRoute'), color: 'text-purple-300', category: 'networking' },
   { kind: 'TCPRoute', label: 'TCPRoute', icon: getTopologyIcon('TCPRoute'), color: 'text-purple-300', category: 'networking' },
   { kind: 'TLSRoute', label: 'TLSRoute', icon: getTopologyIcon('TLSRoute'), color: 'text-purple-300', category: 'networking' },
+  { kind: 'UDPRoute', label: 'UDPRoute', icon: getTopologyIcon('UDPRoute'), color: 'text-purple-300', category: 'networking' },
   { kind: 'Service', label: 'Service', icon: getTopologyIcon('Service'), color: 'text-blue-400', category: 'networking' },
   { kind: 'CalicoNetworkPolicy', label: 'Calico NetworkPolicy', icon: getTopologyIcon('CalicoNetworkPolicy'), color: 'text-teal-400', category: 'custom' },
   { kind: 'CalicoGlobalNetworkPolicy', label: 'Calico GlobalNetworkPolicy', icon: getTopologyIcon('CalicoGlobalNetworkPolicy'), color: 'text-teal-400', category: 'custom' },

package/src/components/topology/TopologyGraph.tsx

@@ -32,6 +32,7 @@ import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
 import { K8sResourceNode } from './K8sResourceNode'
 import { GroupNode } from './GroupNode'
+import { splitInternetByGroup } from './internet-groups'
 import { NEUTRAL_OWNER, type WorkloadFocus } from '../../utils/workload-colors'
 import { ownershipOf } from '../../utils/topology-neighborhood'
 import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, isGroupEffectivelyCollapsed, type GroupDisplayLevel } from './layout'
@@ -548,75 +549,6 @@ export function TopologyGraph({
     return { nodes: newNodes, edges: newEdges }
   }, [])
 
-  // Transform to per-group Internet nodes in traffic view with grouping
-  const createPerGroupInternetNodes = useCallback((
-    nodes: TopologyNode[],
-    edges: TopologyEdge[],
-    groupMode: GroupingMode
-  ): { nodes: TopologyNode[]; edges: TopologyEdge[] } => {
-    if (groupMode === 'none') {
-      return { nodes, edges }
-    }
-
-    // Find the single Internet node
-    const internetNode = nodes.find(n => n.kind === 'Internet')
-    if (!internetNode) {
-      return { nodes, edges }
-    }
-
-    // Find all ingresses/gateways and group them
-    const ingresses = nodes.filter(n => n.kind === 'Ingress' || n.kind === 'Gateway')
-    const groupsWithIngresses = new Map<string, TopologyNode[]>()
-
-    for (const ingress of ingresses) {
-      const groupKey = getGroupKey(ingress, groupMode)
-      if (groupKey) {
-        if (!groupsWithIngresses.has(groupKey)) {
-          groupsWithIngresses.set(groupKey, [])
-        }
-        groupsWithIngresses.get(groupKey)!.push(ingress)
-      }
-    }
-
-    // If no groups with ingresses, keep original
-    if (groupsWithIngresses.size === 0) {
-      return { nodes, edges }
-    }
-
-    // Remove original Internet node and its edges
-    const newNodes = nodes.filter(n => n.id !== internetNode.id)
-    const newEdges = edges.filter(e => e.source !== internetNode.id)
-
-    // Create per-group Internet nodes
-    for (const [groupKey, groupIngresses] of groupsWithIngresses) {
-      const internetId = `internet-${groupMode}-${groupKey}`
-
-      // Add Internet node for this group with group metadata
-      newNodes.push({
-        id: internetId,
-        kind: 'Internet',
-        name: 'Internet',
-        status: 'healthy',
-        data: {
-          // Add group metadata so it gets grouped with its ingresses
-          namespace: groupMode === 'namespace' ? groupKey : groupIngresses[0]?.data?.namespace,
-          labels: groupMode === 'app' ? { 'app.kubernetes.io/name': groupKey } : {},
-        },
-      })
-
-      // Add edges from this Internet node to its ingresses
-      for (const ingress of groupIngresses) {
-        newEdges.push({
-          id: `${internetId}-to-${ingress.id}`,
-          source: internetId,
-          target: ingress.id,
-          type: 'routes-to',
-        })
-      }
-    }
-
-    return { nodes: newNodes, edges: newEdges }
-  }, [])
 
   // Prepare topology data with expanded pod groups
   const { workingNodes, workingEdges } = useMemo(() => {
@@ -636,13 +568,13 @@ export function TopologyGraph({
 
     // In traffic view with grouping, create per-group Internet nodes
     if (isTrafficView && groupingMode !== 'none') {
-      const result = createPerGroupInternetNodes(nodes, edges, groupingMode)
+      const result = splitInternetByGroup(nodes, edges, groupingMode)
       nodes = result.nodes
       edges = result.edges
     }
 
     return { workingNodes: nodes, workingEdges: edges }
-  }, [topology, expandedPodGroups, expandPodGroup, isTrafficView, groupingMode, createPerGroupInternetNodes])
+  }, [topology, expandedPodGroups, expandPodGroup, isTrafficView, groupingMode])
 
   // Handle card click in card-grid view — find the topology node and open drawer
   const handleCardClick = useCallback((nodeId: string) => {

package/src/components/topology/TopologySearch.tsx

@@ -48,6 +48,7 @@ function getKindColor(kind: string): string {
     case 'GRPCRoute':
     case 'TCPRoute':
     case 'TLSRoute':
+    case 'UDPRoute':
       return 'text-purple-300'
     case 'Service':
       return 'text-blue-400'

package/src/components/topology/internet-groups.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import type { TopologyEdge, TopologyNode } from '../../types'
+import { splitInternetByGroup } from './internet-groups'
+
+const node = (id: string, kind: string, namespace?: string): TopologyNode =>
+  ({ id, kind, name: id, status: 'healthy', data: namespace ? { namespace } : {} }) as TopologyNode
+const fromInternet = (target: string): TopologyEdge => ({ id: `internet-to-${target}`, source: 'internet', target, type: 'routes-to' })
+
+describe('splitInternetByGroup', () => {
+  it('keeps every entrypoint connected, not only Ingresses and Gateways', () => {
+    const nodes = [
+      node('internet', 'Internet'),
+      node('ingress/shop/web', 'Ingress', 'shop'),
+      node('knativeservice/shop/api', 'KnativeService', 'shop'),
+      node('ingressroute/edge/dash', 'IngressRoute', 'edge'),
+    ]
+    const edges = nodes.slice(1).map(n => fromInternet(n.id))
+    const out = splitInternetByGroup(nodes, edges, 'namespace')
+
+    const reached = out.edges.filter(e => out.nodes.find(n => n.id === e.source)?.kind === 'Internet').map(e => `${e.source} -> ${e.target}`)
+    expect(reached.sort()).toEqual([
+      'internet-namespace-edge -> ingressroute/edge/dash',
+      'internet-namespace-shop -> ingress/shop/web',
+      'internet-namespace-shop -> knativeservice/shop/api',
+    ])
+    expect(out.nodes.some(n => n.id === 'internet')).toBe(false)
+  })
+
+  it('leaves an ungrouped entrypoint on the original Internet node', () => {
+    const nodes = [node('internet', 'Internet'), node('ingress/shop/web', 'Ingress', 'shop'), node('gateway//shared', 'Gateway')]
+    const out = splitInternetByGroup(nodes, nodes.slice(1).map(n => fromInternet(n.id)), 'namespace')
+    expect(out.edges.some(e => e.source === 'internet' && e.target === 'gateway//shared')).toBe(true)
+    expect(out.nodes.some(n => n.id === 'internet')).toBe(true)
+  })
+})

package/src/components/topology/internet-groups.ts

@@ -0,0 +1,55 @@
+import type { GroupingMode, TopologyEdge, TopologyNode } from '../../types'
+import { getGroupKey } from './layout'
+
+/**
+ * Splits the traffic view's single Internet node into one per group, so each
+ * namespace or app shows its own entry from outside. Every original Internet
+ * edge is kept, whatever kind its entrypoint is (Ingress, Gateway, Istio
+ * Gateway, Knative Service, Traefik route, Contour HTTPProxy); an entrypoint
+ * with no group stays connected to the original Internet node.
+ */
+export function splitInternetByGroup(
+  nodes: TopologyNode[],
+  edges: TopologyEdge[],
+  groupMode: GroupingMode,
+): { nodes: TopologyNode[]; edges: TopologyEdge[] } {
+  if (groupMode === 'none') return { nodes, edges }
+  const internetNode = nodes.find(n => n.kind === 'Internet')
+  if (!internetNode) return { nodes, edges }
+
+  const nodeById = new Map(nodes.map(n => [n.id, n]))
+  const groups = new Map<string, { entry: TopologyNode; edges: TopologyEdge[] }>()
+  const regrouped = new Set<TopologyEdge>()
+  for (const edge of edges) {
+    if (edge.source !== internetNode.id) continue
+    const target = nodeById.get(edge.target)
+    const groupKey = target ? getGroupKey(target, groupMode) : null
+    if (!target || !groupKey) continue
+    if (!groups.has(groupKey)) groups.set(groupKey, { entry: target, edges: [] })
+    groups.get(groupKey)!.edges.push(edge)
+    regrouped.add(edge)
+  }
+  if (groups.size === 0) return { nodes, edges }
+
+  const keepOriginal = edges.some(e => e.source === internetNode.id && !regrouped.has(e))
+  const newNodes = keepOriginal ? [...nodes] : nodes.filter(n => n.id !== internetNode.id)
+  const newEdges = edges.filter(e => !regrouped.has(e))
+  for (const [groupKey, group] of groups) {
+    const internetId = `internet-${groupMode}-${groupKey}`
+    newNodes.push({
+      id: internetId,
+      kind: 'Internet',
+      name: 'Internet',
+      status: 'healthy',
+      data: {
+        // Group metadata so the node lands inside its entrypoints' group.
+        namespace: groupMode === 'namespace' ? groupKey : group.entry.data?.namespace,
+        labels: groupMode === 'app' ? { 'app.kubernetes.io/name': groupKey } : {},
+      },
+    })
+    for (const edge of group.edges) {
+      newEdges.push({ ...edge, id: `${internetId}-to-${edge.target}`, source: internetId })
+    }
+  }
+  return { nodes: newNodes, edges: newEdges }
+}

package/src/components/topology/layout.ts

@@ -864,7 +864,7 @@ function computeWorkloadCards(
 const KIND_PRIORITY: Record<string, number> = {
   'Deployment': 1, 'Rollout': 1, 'StatefulSet': 2, 'DaemonSet': 3,
   'CronJob': 4, 'CronWorkflow': 4, 'Job': 5, 'Workflow': 5, 'Service': 6, 'Gateway': 7,
-  'HTTPRoute': 6, 'GRPCRoute': 6, 'TCPRoute': 6, 'TLSRoute': 6, 'Ingress': 7,
+  'HTTPRoute': 6, 'GRPCRoute': 6, 'TCPRoute': 6, 'TLSRoute': 6, 'UDPRoute': 6, 'Ingress': 7,
   'CalicoNetworkPolicy': 10, 'CalicoGlobalNetworkPolicy': 10,
   'CalicoStagedNetworkPolicy': 10, 'CalicoStagedGlobalNetworkPolicy': 10,
   'CalicoStagedKubernetesNetworkPolicy': 10,

package/src/components/ui/Badge.tsx

@@ -85,6 +85,7 @@ const KIND: Record<string, string> = {
   HTTPRoute:     'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   GRPCRoute:     'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   TCPRoute:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  UDPRoute:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   TLSRoute:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
 
   // Config

package/src/components/ui/FoldSection.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { toneTextClass } from './status-tone'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
+
+/** A folded section's one-line summary, and whether it opens on its own. */
+export interface FoldSummary {
+  text: string
+  /** Something in the section needs a look: it opens itself. */
+  attention: boolean
+}
+
+export function SectionHeading({ children, hint }: { children: ReactNode; hint?: ReactNode }) {
+  return (
+    <div className="mb-2 mt-5 flex items-baseline gap-2 first:mt-0">
+      <h3 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">{children}</h3>
+      {hint && <span className="text-[11px] text-theme-text-tertiary">{hint}</span>}
+    </div>
+  )
+}
+
+/**
+ * A section folded to one summary line. It opens itself when `attention`
+ * turns true (data arriving after the first render included), and stays as
+ * the reader left it otherwise.
+ */
+export function FoldSection({
+  title,
+  hint,
+  summary,
+  attention,
+  children,
+}: {
+  title: ReactNode
+  hint?: ReactNode
+  summary: ReactNode
+  attention: boolean
+  children: ReactNode
+}) {
+  const [open, setOpen] = useState(attention)
+  useEffect(() => {
+    if (attention) setOpen(true)
+  }, [attention])
+  const d = useDisclosure(open)
+  return (
+    <div className="mt-5 first:mt-0">
+      <h3>
+      <button
+        type="button"
+        {...d.buttonProps}
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-start gap-2 rounded text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+      >
+        <CollapseChevron open={open} className="mt-1 h-3 w-3 shrink-0 text-theme-text-tertiary" />
+        {/* Wrapped parts line up under the title, not under the chevron. */}
+        <span className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+          <span className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">{title}</span>
+          {hint && <span className="text-[11px] text-theme-text-tertiary">{hint}</span>}
+          {!open && <span className={clsx('min-w-0 text-sm', attention ? toneTextClass('degraded') : 'text-theme-text-secondary')}>{summary}</span>}
+        </span>
+      </button>
+      </h3>
+      <Collapse open={open} id={d.panelId}>
+        <div className="pt-2">{children}</div>
+      </Collapse>
+    </div>
+  )
+}

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/Toast.tsx

@@ -36,6 +36,7 @@ class ToastManager {
   private static instance: ToastManager
   private showErrorFn: ((message: string, detail?: string) => void) | null = null
   private showSuccessFn: ((message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) => void) | null = null
+  private showToastFn: ToastContextType['showToast'] | null = null
 
   static getInstance(): ToastManager {
     if (!ToastManager.instance) {
@@ -44,14 +45,16 @@ class ToastManager {
     return ToastManager.instance
   }
 
-  register(showError: typeof this.showErrorFn, showSuccess: typeof this.showSuccessFn) {
+  register(showError: typeof this.showErrorFn, showSuccess: typeof this.showSuccessFn, showToast: ToastContextType['showToast']) {
     this.showErrorFn = showError
     this.showSuccessFn = showSuccess
+    this.showToastFn = showToast
   }
 
   unregister() {
     this.showErrorFn = null
     this.showSuccessFn = null
+    this.showToastFn = null
   }
 
   showError(message: string, detail?: string) {
@@ -61,6 +64,10 @@ class ToastManager {
   showSuccess(message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) {
     this.showSuccessFn ? this.showSuccessFn(message, detail, action, onDetailClick) : console.log('[Toast]', message, detail)
   }
+
+  showNotice(message: string, detail: string | undefined, type: 'warning' | 'info') {
+    this.showToastFn ? this.showToastFn(message, { detail, type }) : console.warn('[Toast]', message, detail)
+  }
 }
 
 const toastManager = ToastManager.getInstance()
@@ -73,6 +80,10 @@ export function showApiSuccess(message: string, detail?: string, action?: Toast[
   toastManager.showSuccess(message, detail, action, onDetailClick)
 }
 
+export function showApiNotice(message: string, detail: string | undefined, type: 'warning' | 'info') {
+  toastManager.showNotice(message, detail, type)
+}
+
 export function useToast() {
   const context = useContext(ToastContext)
   if (!context) {
@@ -138,9 +149,9 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 
   // Wire up singleton for use outside React components
   useEffect(() => {
-    toastManager.register(showError, showSuccess)
+    toastManager.register(showError, showSuccess, showToast)
     return () => toastManager.unregister()
-  }, [showError, showSuccess])
+  }, [showError, showSuccess, showToast])
 
   return (
     <ToastContext.Provider value={{ showToast, showCopied, showError, showSuccess }}>
@@ -233,7 +244,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
               {toast.detail}
             </button>
           ) : (
-            <p className={clsx('mt-1 text-xs break-words', isError ? 'text-red-300/80' : isSuccess ? 'text-emerald-300/80' : 'text-theme-text-secondary')}>
+            <p className={clsx('mt-1 text-xs break-words whitespace-pre-line', isError ? 'text-red-300/80' : isSuccess ? 'text-emerald-300/80' : 'text-theme-text-secondary')}>
               {toast.detail}
             </p>
           )