@skyhook-io/k8s-ui 1.6.1 → 1.7.0

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -105,6 +105,7 @@ import {
   ClusterNetworkPolicyRenderer,
   PodDisruptionBudgetRenderer,
   ServiceAccountRenderer,
+  NamespaceRenderer,
   RoleRenderer,
   RoleBindingRenderer,
   WebhookConfigRenderer,
@@ -199,7 +200,23 @@ import {
   AzureManagedControlPlaneRenderer,
   AzureManagedMachinePoolRenderer,
   AzureMachineRenderer,
+  ManagedResourceRenderer,
+  CompositeRenderer,
+  CrossplanePackageRenderer,
+  CrossplaneProviderConfigRenderer,
+  CompositionRenderer,
+  CompositionRevisionRenderer,
+  XRDRenderer,
 } from '../resources/renderers'
+import type { ComposedRefStatus } from '../resources/renderers/CompositeRenderer'
+import {
+  getCrossplaneStatus,
+  getProviderStatus,
+  getProviderConfigStatus,
+  isManagedResource,
+  isComposite,
+  isClaim,
+} from '../resources/resource-utils-crossplane'
 import type { SelectedResource, Relationships, ResourceRef, SecretCertificateInfo, ResolvedEnvFrom, TimelineEvent } from '../../types'
 import type { CopyHandler } from '../ui/drawer-components'
 import { AlertBanner } from '../ui/drawer-components'
@@ -229,6 +246,51 @@ export interface RendererOverrides {
     kind: string; data: any
     onNavigate?: (ref: ResourceRef) => void
   }>
+  // Optional override for Crossplane Composite / Claim — host wraps the
+  // package renderer to fan out per-composed-ref status fetches via React Query.
+  CompositeRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+    composedRefStatuses?: Map<string, ComposedRefStatus>
+  }>
+  // ServiceAccount reverse-lookup: the host fetches /api/rbac/subject/... and
+  // feeds the result into the base renderer via this wrapper.
+  ServiceAccountRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
+  // Role / ClusterRole reverse-lookup: host fetches /api/rbac/role/... so the
+  // detail page can show "who is bound to this role".
+  RoleRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
+  // RoleBinding inline rules preview: host fetches the referenced Role/
+  // ClusterRole's rules so the binding view can show what's granted without
+  // a navigation step.
+  RoleBindingRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
+  // Namespace RBAC summary: host fetches /api/rbac/namespace/{ns} so the
+  // namespace page can show bindings configured here without falling
+  // through to GenericRenderer.
+  NamespaceRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
+  // HPA: host wraps the base renderer to add Prometheus-backed replicas /
+  // metric charts below the static spec data.
+  HPARenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
+  // PVC: host wraps the base renderer to add a kubelet-derived usage gauge
+  // when Prometheus is scraping kubelet endpoints.
+  PVCRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
 }
 
 // Known resource types with specific renderers (module-level to avoid re-allocation)
@@ -243,7 +305,7 @@ const KNOWN_KINDS = new Set([
   'networkpolicies', 'networkpolicy',
   'ciliumnetworkpolicies', 'ciliumnetworkpolicy', 'ciliumclusterwidenetworkpolicies', 'ciliumclusterwidenetworkpolicy',
   'clusternetworkpolicies', 'clusternetworkpolicy',
-  'poddisruptionbudgets', 'serviceaccounts',
+  'poddisruptionbudgets', 'serviceaccounts', 'namespaces',
   'roles', 'clusterroles', 'rolebindings', 'clusterrolebindings',
   'events', 'gitrepositories', 'ocirepositories', 'helmrepositories',
   'kustomizations', 'helmreleases', 'alerts', 'applications',
@@ -282,6 +344,12 @@ const KNOWN_KINDS = new Set([
   // Azure CAPI Infrastructure Provider
   'azuremanagedcontrolplanes', 'azuremanagedmachinepools', 'azuremachines',
   'azuremachinetemplates', 'azuremanagedclusters',
+  // Crossplane core (Managed Resources, Composites, and Claims are detected
+  // dynamically by spec shape — their plurals are unbounded so they're handled
+  // via fall-through, not enumerated in KNOWN_KINDS).
+  'providers', 'providerconfigs',
+  'compositeresourcedefinitions', 'compositions', 'compositionrevisions',
+  'functions', 'configurations',
 ])
 
 // ============================================================================
@@ -355,12 +423,47 @@ export function ResourceRendererDispatch({
 }: ResourceRendererDispatchProps) {
   const kind = resource.kind.toLowerCase()
 
-  const isKnownKind = KNOWN_KINDS.has(kind)
+  // Crossplane Managed Resources / Composites / Claims are detected by spec
+  // shape because their plurals are unbounded (one CRD kind per provider
+  // service). These flags suppress the GenericRenderer fall-through and route
+  // to the right Crossplane renderer below.
+  const isCrossplaneMR = isManagedResource(data)
+  const isCrossplaneClaim = !isCrossplaneMR && isClaim(data)
+  const isCrossplaneXR = !isCrossplaneMR && !isCrossplaneClaim && isComposite(data)
+
+  // Crossplane plurals that collide with foreign CRDs — `configurations`
+  // overlaps Knative serving.knative.dev/Configuration, `functions` could
+  // collide with OpenFaaS, `compositions` is in this list because its
+  // render line is apiVersion-gated. We add these to KNOWN_KINDS so the
+  // Crossplane renderer wins on apiVersion match, but a foreign CR with
+  // the same plural needs to fall through to GenericRenderer — otherwise
+  // it renders blank (no Crossplane match + isKnownKind suppresses
+  // generic). Only kinds whose render lines are apiVersion-gated belong
+  // here; `providerconfigs`/`compositionrevisions`/`compositeresource-
+  // definitions` are Crossplane-specific plurals with no realistic
+  // collision and unguarded render lines, so including them would risk
+  // double-render for foreign CRDs we'll never see.
+  const isCollisionGatedKind =
+    kind === 'providers' || kind === 'functions' || kind === 'configurations' || kind === 'compositions'
+  const crossplaneApiVersionMatched = isCollisionGatedKind && (
+    data?.apiVersion?.startsWith('pkg.crossplane.io/')
+    || data?.apiVersion?.startsWith('apiextensions.crossplane.io/')
+  )
+  const crossplaneCollisionFallthrough = isCollisionGatedKind && !crossplaneApiVersionMatched
+
+  const isKnownKind = KNOWN_KINDS.has(kind) || isCrossplaneMR || isCrossplaneClaim || isCrossplaneXR
 
   const PodComp = rendererOverrides?.PodRenderer ?? PodRenderer
   const WorkloadComp = rendererOverrides?.WorkloadRenderer ?? WorkloadRenderer
   const NodeComp = rendererOverrides?.NodeRenderer ?? NodeRenderer
   const ServiceComp = rendererOverrides?.ServiceRenderer ?? ServiceRenderer
+  const CompositeComp = rendererOverrides?.CompositeRenderer ?? CompositeRenderer
+  const ServiceAccountComp = rendererOverrides?.ServiceAccountRenderer ?? ServiceAccountRenderer
+  const RoleComp = rendererOverrides?.RoleRenderer ?? RoleRenderer
+  const RoleBindingComp = rendererOverrides?.RoleBindingRenderer ?? RoleBindingRenderer
+  const NamespaceComp = rendererOverrides?.NamespaceRenderer ?? NamespaceRenderer
+  const HPAComp = rendererOverrides?.HPARenderer ?? HPARenderer
+  const PVCComp = rendererOverrides?.PVCRenderer ?? PVCRenderer
 
   const sidebarContent = showCommonSections && (
     <>
@@ -385,9 +488,9 @@ export function ResourceRendererDispatch({
         {kind === 'secrets' && <SecretRenderer data={data} certificateInfo={certificateInfo} resourceData={data} onSaveSecretValue={onSaveSecretValue} isSaving={isSavingSecret} />}
         {kind === 'jobs' && <JobRenderer data={data} />}
         {kind === 'cronjobs' && <CronJobRenderer data={data} onNavigate={onNavigate} />}
-        {(kind === 'hpas' || kind === 'horizontalpodautoscalers') && <HPARenderer data={data} onNavigate={onNavigate} />}
+        {(kind === 'hpas' || kind === 'horizontalpodautoscalers') && <HPAComp data={data} onNavigate={onNavigate} />}
         {kind === 'nodes' && <NodeComp data={data} relationships={relationships} />}
-        {kind === 'persistentvolumeclaims' && <PVCRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'persistentvolumeclaims' && <PVCComp data={data} onNavigate={onNavigate} />}
         {kind === 'rollouts' && <RolloutRenderer data={data} />}
         {kind === 'certificates' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <CertificateRenderer data={data} />}
         {kind === 'workflows' && <WorkflowRenderer data={data} />}
@@ -410,9 +513,10 @@ export function ResourceRendererDispatch({
         {(kind === 'ciliumnetworkpolicies' || kind === 'ciliumnetworkpolicy' || kind === 'ciliumclusterwidenetworkpolicies' || kind === 'ciliumclusterwidenetworkpolicy') && <CiliumNetworkPolicyRenderer data={data} />}
         {(kind === 'clusternetworkpolicies' || kind === 'clusternetworkpolicy') && <ClusterNetworkPolicyRenderer data={data} />}
         {kind === 'poddisruptionbudgets' && <PodDisruptionBudgetRenderer data={data} />}
-        {kind === 'serviceaccounts' && <ServiceAccountRenderer data={data} />}
-        {(kind === 'roles' || kind === 'clusterroles') && <RoleRenderer data={data} />}
-        {(kind === 'rolebindings' || kind === 'clusterrolebindings') && <RoleBindingRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'serviceaccounts' && <ServiceAccountComp data={data} onNavigate={onNavigate} />}
+        {kind === 'namespaces' && <NamespaceComp data={data} onNavigate={onNavigate} />}
+        {(kind === 'roles' || kind === 'clusterroles') && <RoleComp data={data} onNavigate={onNavigate} />}
+        {(kind === 'rolebindings' || kind === 'clusterrolebindings') && <RoleBindingComp data={data} onNavigate={onNavigate} />}
         {kind === 'events' && <EventRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'gitrepositories' && <GitRepositoryRenderer data={data} />}
         {kind === 'ocirepositories' && <OCIRepositoryRenderer data={data} />}
@@ -525,8 +629,23 @@ export function ResourceRendererDispatch({
         {/* Contour */}
         {kind === 'httpproxies' && <ContourHTTPProxyRenderer data={data} onNavigate={onNavigate} />}
 
-        {/* Generic renderer for CRDs and unknown resource types */}
-        {!isKnownKind && <GenericRenderer data={data} />}
+        {/* Crossplane — kind-dispatched for the static package/config kinds, spec-shape
+            detected for MR/XR/Claim (their plurals are unbounded). */}
+        {kind === 'providers' && data?.apiVersion?.startsWith('pkg.crossplane.io/') && <CrossplanePackageRenderer data={data} kindLabel="Provider" onNavigate={onNavigate} />}
+        {kind === 'functions' && data?.apiVersion?.startsWith('pkg.crossplane.io/') && <CrossplanePackageRenderer data={data} kindLabel="Function" onNavigate={onNavigate} />}
+        {kind === 'configurations' && data?.apiVersion?.startsWith('pkg.crossplane.io/') && <CrossplanePackageRenderer data={data} kindLabel="Configuration" onNavigate={onNavigate} />}
+        {kind === 'providerconfigs' && <CrossplaneProviderConfigRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'compositeresourcedefinitions' && <XRDRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'compositions' && data?.apiVersion?.startsWith('apiextensions.crossplane.io/') && <CompositionRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'compositionrevisions' && <CompositionRevisionRenderer data={data} onNavigate={onNavigate} />}
+        {isCrossplaneMR && <ManagedResourceRenderer data={data} onNavigate={onNavigate} />}
+        {(isCrossplaneXR || isCrossplaneClaim) && <CompositeComp data={data} onNavigate={onNavigate} />}
+
+        {/* Generic renderer for CRDs and unknown resource types — also fires
+            for known-plural collisions where no apiVersion-gated renderer
+            matched (e.g. a Knative Configuration sharing the `configurations`
+            plural with Crossplane Configuration). */}
+        {(!isKnownKind || crossplaneCollisionFallthrough) && <GenericRenderer data={data} />}
 
         {/* Common sections - can be disabled when parent handles them separately */}
         {showCommonSections && (
@@ -662,6 +781,16 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'peerauthentications') return getPeerAuthenticationStatus(data)
   if (k === 'authorizationpolicies') return getAuthorizationPolicyStatus(data)
 
+  // Crossplane — Provider/Function/Configuration share package conditions;
+  // ProviderConfig has its own; MR/XR/Claim detected by spec shape.
+  if ((k === 'providers' || k === 'functions' || k === 'configurations') && data?.apiVersion?.startsWith('pkg.crossplane.io/')) {
+    return getProviderStatus(data)
+  }
+  if (k === 'providerconfigs') return getProviderConfigStatus(data)
+  if (isManagedResource(data) || isComposite(data) || isClaim(data)) {
+    return getCrossplaneStatus(data)
+  }
+
   // Contour HTTPProxy
   if (k === 'httpproxies') {
     const s = getHTTPProxyStatus(data)

package/src/components/topology/K8sResourceNode.tsx

@@ -5,7 +5,7 @@ import {
   ChevronUp,
 } from 'lucide-react'
 import { clsx } from 'clsx'
-import type { NodeKind, HealthStatus } from '../../types'
+import type { NodeKind, HealthStatus, PodSummary } from '../../types'
 import { displayKind } from '../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../utils/badge-colors'
 import { Tooltip } from '../ui/Tooltip'
@@ -171,8 +171,27 @@ function getStatusStyle(status: HealthStatus): React.CSSProperties {
 }
 
 
-// Format subtitle based on node kind
+// Format subtitle based on node kind. In summary mode the pod tier is
+// collapsed, so workload/service nodes carry a podSummary — append it so the
+// count of pods (and any unhealthy/pending) is still visible without children.
 function getSubtitle(kind: NodeKind, nodeData: Record<string, unknown>): string {
+  const base = baseSubtitle(kind, nodeData)
+  const ps = nodeData.podSummary as PodSummary | undefined
+  if (ps && SUMMARY_POD_KINDS.has(kind)) {
+    let suffix = `${ps.total} pods`
+    if (ps.unhealthy > 0) suffix += ` (${ps.unhealthy} unhealthy)`
+    else if (ps.degraded > 0) suffix += ` (${ps.degraded} pending)`
+    return base ? `${base} • ${suffix}` : suffix
+  }
+  return base
+}
+
+// Kinds that own pods and therefore carry a podSummary in summary mode.
+const SUMMARY_POD_KINDS = new Set<NodeKind>([
+  'Deployment', 'StatefulSet', 'DaemonSet', 'Rollout', 'Job', 'Service',
+])
+
+function baseSubtitle(kind: NodeKind, nodeData: Record<string, unknown>): string {
   switch (kind) {
     case 'Deployment':
     case 'Rollout':

package/src/components/topology/TopologyGraph.tsx

@@ -20,7 +20,7 @@ import {
 import '@xyflow/react/dist/style.css'
 import { toCanvas } from 'html-to-image'
 
-import { AlertTriangle, Download, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield, Workflow } from 'lucide-react'
+import { AlertTriangle, Download, Layers, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield, Workflow } from 'lucide-react'
 import { PaneLoader } from '../ui/PaneLoader'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
@@ -31,6 +31,8 @@ import { GroupNode } from './GroupNode'
 import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, type GroupDisplayLevel } from './layout'
 import type { Topology, TopologyNode, TopologyEdge, ViewMode, GroupingMode } from '../../types'
 import { pluralize } from '../../utils/pluralize'
+import { foldHash } from '../../utils/structure-hash'
+import { recordLayoutDuration, recordLayoutSkipped, recordStructureKeyDuration } from '../../perf'
 
 // Edge colors by type
 const EDGE_COLORS = {
@@ -442,13 +444,29 @@ export function TopologyGraph({
     if (topoNode) onNodeClick(topoNode)
   }, [topology, workingNodes, onNodeClick])
 
-  // Structure key for change detection — includes groupLevels so chip↔cardGrid triggers relayout
+  // Structure key for change detection — includes groupLevels so chip↔cardGrid triggers relayout.
+  //
+  // Uses an order-independent fold of per-ID hashes (see foldHash) instead of
+  // sort+join. At thousands of nodes the join allocated tens of KB of string
+  // every render (and the sort dominated for short ID arrays); the fold is
+  // O(n) with constant memory and detects the same structural changes
+  // (add/remove/rename) — combined with the element count in the key. Pure
+  // reorders no longer trigger a layout, which is correct: ELK relayouts on
+  // reorder were wasted work.
   const structureKey = useMemo(() => {
-    const nodeIds = workingNodes.map(n => n.id).sort().join(',')
-    const edgeIds = workingEdges.map(e => `${e.source}->${e.target}:${e.type}`).sort().join(',')
-    const levels = Array.from(groupLevels.entries()).sort().map(([k, v]) => `${k}:${v}`).join(',')
-    const expanded = Array.from(expandedPodGroups).sort().join(',')
-    return `${viewMode}|${nodeIds}|${edgeIds}|${levels}|${expanded}|${groupingMode}|${layoutRetryCount}`
+    const t0 = performance.now()
+    const nodeHash = foldHash(workingNodes, n => n.id)
+    const edgeHash = foldHash(workingEdges, e => `${e.source}->${e.target}:${e.type}`)
+    const levelsHash = foldHash(Array.from(groupLevels.entries()), ([k, v]) => `${k}:${v}`)
+    const expandedHash = foldHash(Array.from(expandedPodGroups), s => s)
+    const key =
+      `${viewMode}|${groupingMode}|${layoutRetryCount}` +
+      `|n${workingNodes.length}:${nodeHash}` +
+      `|e${workingEdges.length}:${edgeHash}` +
+      `|l${groupLevels.size}:${levelsHash}` +
+      `|x${expandedPodGroups.size}:${expandedHash}`
+    recordStructureKeyDuration((performance.now() - t0) * 1000)
+    return key
   }, [viewMode, workingNodes, workingEdges, groupLevels, expandedPodGroups, groupingMode, layoutRetryCount])
 
   // Layout when structure changes - use hierarchical ELK layout
@@ -465,6 +483,7 @@ export function TopologyGraph({
     const structureChanged = structureKey !== prevStructureRef.current
 
     if (!structureChanged) {
+      recordLayoutSkipped()
       return
     }
 
@@ -517,6 +536,7 @@ export function TopologyGraph({
     groupMapRef.current = groupMap
 
     // Apply layout and get positioned nodes
+    const layoutStartMs = performance.now()
     applyHierarchicalLayout(
       elkGraph,
       workingNodes,
@@ -540,6 +560,7 @@ export function TopologyGraph({
         return
       }
       setLayoutError(null)
+      recordLayoutDuration(performance.now() - layoutStartMs, workingNodes.length, workingEdges.length)
 
       // Preserve positions for nodes that already have a saved position (i.e. were
       // present in a previous layout). New nodes use the ELK-computed position.
@@ -562,19 +583,25 @@ export function TopologyGraph({
         savedPositionsRef.current.set(node.id, node.position)
       }
 
-      // Add expand/collapse handlers to pod-related nodes
+      // Add expand/collapse handlers to pod-related nodes. Only PodGroups that
+      // actually carry a per-pod array are expandable — summary-only orphan
+      // nodes (summary mode) hold counts only, so they get no expand affordance.
       const nodesWithHandlers = positionedNodes.map(node => {
         const isPodGroup = node.data?.kind === 'PodGroup'
         const nodeData = node.data?.nodeData as Record<string, unknown> | undefined
+        // The per-pod array lives on the backend node data (nodeData.pods).
+        // Summary-only orphan nodes omit it, so they get no expand affordance.
+        const podsArray = nodeData?.pods
+        const isExpandablePodGroup = isPodGroup && Array.isArray(podsArray) && podsArray.length > 0
         const expandedFromGroup = nodeData?.expandedFromGroup as string | undefined
 
         return {
           ...node,
           data: {
             ...node.data,
-            onExpand: isPodGroup ? handleExpandPodGroup : undefined,
+            onExpand: isExpandablePodGroup ? handleExpandPodGroup : undefined,
             onCollapse: expandedFromGroup ? handleCollapsePodGroup : undefined,
-            isExpanded: isPodGroup ? expandedPodGroups.has(node.id) : undefined,
+            isExpanded: isExpandablePodGroup ? expandedPodGroups.has(node.id) : undefined,
           },
         }
       })
@@ -780,6 +807,15 @@ export function TopologyGraph({
           </div>
         </div>
       )}
+      {/* Summary-mode pill — pod tier collapsed to per-workload/service counts */}
+      {topology?.summaryMode && (
+        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/30 rounded-full px-3 py-1 backdrop-blur-sm">
+          <Layers className="w-3.5 h-3.5 text-blue-400 shrink-0" />
+          <span className="text-xs text-theme-text-secondary">
+            Summary view — pods collapsed to counts. Filter to a smaller namespace to see individual pods.
+          </span>
+        </div>
+      )}
       <ReactFlow
         nodes={nodes}
         edges={edges}

package/src/components/topology/layout.ts

@@ -164,7 +164,24 @@ async function runLayoutOnMainThread(
 
   const groupLayouts: LayoutResult['groupLayouts'] = []
   const ungroupedNodes: LayoutResult['ungroupedNodes'] = []
-  const groupNodeIds = new Map<string, Set<string>>()
+  // Map each node to its group once. Serves both the intra-group edge bucketing
+  // here (filtering all edges per group would be O(groups × edges)) and the
+  // node→group lookup for Phase 2's inter-group edges below.
+  const nodeToGroup = new Map<string, string>()
+  for (const child of elkGraph.children) {
+    if (child.id.startsWith('group-') && child.children) {
+      for (const c of child.children) nodeToGroup.set(c.id, child.id)
+    }
+  }
+  const intraEdgesByGroup = new Map<string, ElkEdge[]>()
+  for (const e of elkGraph.edges) {
+    const sg = nodeToGroup.get(e.sources[0])
+    if (sg && sg === nodeToGroup.get(e.targets[0])) {
+      const arr = intraEdgesByGroup.get(sg)
+      if (arr) arr.push(e)
+      else intraEdgesByGroup.set(sg, [e])
+    }
+  }
 
   // Phase 1: Layout each group independently
   for (const child of elkGraph.children) {
@@ -173,12 +190,8 @@ async function runLayoutOnMainThread(
     if (isGroup && child.children && child.children.length > 0) {
       const groupKey = child.id.replace(`group-${groupingMode}-`, '')
       const minWidth = hideGroupHeader ? 300 : Math.max(500, groupKey.length * 16 + 200)
-      const nodeIds = new Set(child.children.map(c => c.id))
-      groupNodeIds.set(child.id, nodeIds)
 
-      const intraGroupEdges = elkGraph.edges.filter(e =>
-        nodeIds.has(e.sources[0]) && nodeIds.has(e.targets[0])
-      )
+      const intraGroupEdges = intraEdgesByGroup.get(child.id) ?? []
 
       const layoutResult = await elk.layout({
         id: child.id,
@@ -217,11 +230,7 @@ async function runLayoutOnMainThread(
   }
 
   // Phase 2: Build meta-graph and position groups based on inter-group edges
-  const nodeToGroup = new Map<string, string>()
-  for (const [groupId, nodeIds] of groupNodeIds) {
-    for (const nodeId of nodeIds) nodeToGroup.set(nodeId, groupId)
-  }
-
+  // (nodeToGroup was built once above).
   const interGroupEdges: ElkEdge[] = []
   const seen = new Set<string>()
   for (const edge of elkGraph.edges) {

package/src/components/topology/layout.worker.ts

@@ -116,8 +116,25 @@ self.onmessage = async (e: MessageEvent<LayoutRequest>) => {
     const groupLayouts: GroupLayoutResult[] = []
     const ungroupedNodes: UngroupedNodeResult[] = []
 
-    // Build a set of node IDs in each group for edge filtering
-    const groupNodeIds = new Map<string, Set<string>>()
+    // Map each node to its group once. Serves both the intra-group edge
+    // bucketing here (filtering all edges per group would be O(groups × edges))
+    // and the node→group lookup for Phase 2's inter-group edges. This is the
+    // default (worker) layout path, so the win actually lands here.
+    const nodeToGroup = new Map<string, string>()
+    for (const child of elkGraph.children) {
+      if (child.id.startsWith('group-') && child.children) {
+        for (const c of child.children) nodeToGroup.set(c.id, child.id)
+      }
+    }
+    const intraEdgesByGroup = new Map<string, ElkEdge[]>()
+    for (const e of elkGraph.edges) {
+      const sg = nodeToGroup.get(e.sources[0])
+      if (sg && sg === nodeToGroup.get(e.targets[0])) {
+        const arr = intraEdgesByGroup.get(sg)
+        if (arr) arr.push(e)
+        else intraEdgesByGroup.set(sg, [e])
+      }
+    }
 
     // Phase 1: Layout each group independently
     for (const child of elkGraph.children) {
@@ -127,14 +144,8 @@ self.onmessage = async (e: MessageEvent<LayoutRequest>) => {
         const groupKey = child.id.replace(`group-${groupingMode}-`, '')
         const minWidth = hideGroupHeader ? 300 : Math.max(500, groupKey.length * 16 + 200)
 
-        // Track node IDs in this group
-        const nodeIds = new Set(child.children.map(c => c.id))
-        groupNodeIds.set(child.id, nodeIds)
-
         // Layout this group independently with only intra-group edges
-        const intraGroupEdges = elkGraph.edges.filter(e =>
-          nodeIds.has(e.sources[0]) && nodeIds.has(e.targets[0])
-        )
+        const intraGroupEdges = intraEdgesByGroup.get(child.id) ?? []
 
         const groupGraph: ElkGraph = {
           id: child.id,
@@ -186,14 +197,7 @@ self.onmessage = async (e: MessageEvent<LayoutRequest>) => {
       }
     }
 
-    // Phase 2: Build meta-graph and position groups
-    const nodeToGroup = new Map<string, string>()
-    for (const [groupId, nodeIds] of groupNodeIds) {
-      for (const nodeId of nodeIds) {
-        nodeToGroup.set(nodeId, groupId)
-      }
-    }
-
+    // Phase 2: Build meta-graph and position groups (nodeToGroup built once above).
     // Find inter-group edges
     const interGroupEdges: ElkEdge[] = []
     const seenInterGroupEdges = new Set<string>()

package/src/components/ui/YamlEditor.tsx

@@ -1,5 +1,6 @@
 import { useRef, useCallback, useEffect } from 'react'
-import Editor, { OnMount, OnChange, type Monaco } from '@monaco-editor/react'
+import Editor, { DiffEditor, OnMount, OnChange, type Monaco } from '@monaco-editor/react'
+import { PaneLoader } from './PaneLoader'
 import type { editor } from 'monaco-editor'
 
 interface YamlEditorProps {
@@ -240,40 +241,52 @@ export function YamlEditor({
   )
 }
 
-// Diff editor for showing changes before apply
 interface YamlDiffEditorProps {
   original: string
   modified: string
   height?: string | number
+  /** When true, render unified (single column) instead of side-by-side. */
+  unified?: boolean
+  /** When true, only diff regions stay rendered — unchanged sections collapse. */
+  hideUnchanged?: boolean
+  /** Caller-controlled theme. Defaults to dark to match YamlEditor. */
+  theme?: 'vs-dark' | 'vs'
+  /** When true, drops the rounded border so the editor reaches its container's edges. */
+  bleed?: boolean
 }
 
 export function YamlDiffEditor({
-  original: _original,
+  original,
   modified,
   height = '100%',
+  unified = false,
+  hideUnchanged = false,
+  theme = 'vs-dark',
+  bleed = false,
 }: YamlDiffEditorProps) {
-  // TODO: Use Monaco DiffEditor to show actual diff
-  void _original
   return (
-    <div className="rounded-lg overflow-hidden border border-theme-border" style={{ height }}>
-      <Editor
-        defaultLanguage="yaml"
-        value={modified}
-        theme="vs-dark"
+    <div className={bleed ? 'overflow-hidden' : 'rounded-lg overflow-hidden border border-theme-border'} style={{ height }}>
+      <DiffEditor
+        original={original}
+        modified={modified}
+        language="yaml"
+        theme={theme}
         options={{
           readOnly: true,
+          renderSideBySide: !unified,
+          hideUnchangedRegions: { enabled: hideUnchanged },
           minimap: { enabled: false },
           lineNumbers: 'on',
           scrollBeyondLastLine: false,
+          wordWrap: 'on',
           fontSize: 13,
           fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
           padding: { top: 12, bottom: 12 },
+          renderOverviewRuler: true,
+          ignoreTrimWhitespace: false,
+          automaticLayout: true,
         }}
-        loading={
-          <div className="flex items-center justify-center h-full bg-theme-surface text-theme-text-secondary">
-            Loading diff...
-          </div>
-        }
+        loading={<PaneLoader label="Loading resources…" className="h-full" />}
       />
     </div>
   )

package/src/components/workload/ResourceDetailDrawer.tsx

@@ -37,7 +37,7 @@ interface ResourceDetailDrawerProps {
   }) => ReactNode
 }
 
-const MIN_WIDTH = 400
+const MIN_WIDTH = 520
 const MAX_WIDTH_PERCENT = 0.7
 const DEFAULT_WIDTH = 550
 const WIDE_WIDTH = 750

package/src/index.ts

@@ -42,3 +42,9 @@ export * from './components/audit'
 
 // Cluster switcher (shared trigger+dropdown for OSS Radar and Radar Hub)
 export * from './components/cluster-switcher'
+
+// Compare (ResourceCompareView, CompareResourcePicker, normalize utilities)
+export * from './components/compare'
+
+// Perf instrumentation (ELK + structureKey timers, surfaced in diagnostics overlay)
+export * from './perf'

package/src/perf/index.ts

@@ -0,0 +1 @@
+export * from './store'