@skyhook-io/k8s-ui 1.4.2 → 1.4.3

package/src/components/resources/resource-utils-gcp-capi.ts

@@ -0,0 +1,130 @@
+// GCP CAPI Infrastructure Provider utility functions
+
+import type { StatusBadge } from './resource-utils'
+import { getCAPIReadyStatus } from './resource-utils-capi'
+
+// ============================================================================
+// GCPManagedControlPlane
+// ============================================================================
+
+export function getGCPMCPStatus(resource: any): StatusBadge {
+  return getCAPIReadyStatus(resource)
+}
+
+export function getGCPMCPClusterName(resource: any): string {
+  return resource.spec?.clusterName || resource.metadata?.name || '-'
+}
+
+export function getGCPMCPProject(resource: any): string {
+  return resource.spec?.project || '-'
+}
+
+export function getGCPMCPLocation(resource: any): string {
+  return resource.spec?.location || '-'
+}
+
+export function getGCPMCPVersion(resource: any): string {
+  return resource.status?.version || resource.spec?.version || '-'
+}
+
+export function getGCPMCPReleaseChannel(resource: any): string {
+  return resource.spec?.releaseChannel || '-'
+}
+
+export function getGCPMCPAutopilot(resource: any): boolean {
+  return !!resource.spec?.enableAutopilot
+}
+
+export function getGCPMCPEndpoint(resource: any): string {
+  const host = resource.spec?.endpoint?.host || resource.spec?.controlPlaneEndpoint?.host
+  const port = resource.spec?.endpoint?.port || resource.spec?.controlPlaneEndpoint?.port
+  if (host) return port && port !== 443 ? `${host}:${port}` : host
+  return '-'
+}
+
+// ============================================================================
+// GCPManagedMachinePool
+// ============================================================================
+
+export function getGCPMMPStatus(resource: any): StatusBadge {
+  return getCAPIReadyStatus(resource)
+}
+
+export function getGCPMMPNodePoolName(resource: any): string {
+  return resource.spec?.nodePoolName || resource.metadata?.name || '-'
+}
+
+export function getGCPMMPMachineType(resource: any): string {
+  return resource.spec?.machineType || resource.spec?.instanceType || 'e2-medium'
+}
+
+export function getGCPMMPDiskInfo(resource: any): string {
+  const diskType = resource.spec?.diskType || 'pd-standard'
+  const diskSize = resource.spec?.diskSizeGb || resource.spec?.diskSizeGB || 100
+  return `${diskType} ${diskSize}GB`
+}
+
+export function getGCPMMPScaling(resource: any): { min: number; max: number; autoscaling: boolean } {
+  const scaling = resource.spec?.scaling || {}
+  return {
+    min: scaling.minCount ?? 0,
+    max: scaling.maxCount ?? 0,
+    autoscaling: scaling.enableAutoscaling !== false,
+  }
+}
+
+export function getGCPMMPReplicas(resource: any): string {
+  const ready = resource.status?.replicas ?? 0
+  return String(ready)
+}
+
+export function getGCPMMPImageType(resource: any): string {
+  return resource.spec?.imageType || '-'
+}
+
+// ============================================================================
+// GCPMachine
+// ============================================================================
+
+export function getGCPMachineStatus(resource: any): StatusBadge {
+  return getCAPIReadyStatus(resource)
+}
+
+export function getGCPMachineInstanceType(resource: any): string {
+  return resource.spec?.instanceType || '-'
+}
+
+export function getGCPMachineZone(resource: any): string {
+  return resource.spec?.zone || resource.spec?.failureDomain || '-'
+}
+
+export function getGCPMachineInstanceID(resource: any): string {
+  return resource.status?.instanceID || resource.spec?.providerID || '-'
+}
+
+// ============================================================================
+// GCPMachineTemplate
+// ============================================================================
+
+export function getGCPMTInstanceType(resource: any): string {
+  return resource.spec?.template?.spec?.instanceType || '-'
+}
+
+// ============================================================================
+// GCPManagedCluster
+// ============================================================================
+
+export function getGCPManagedClusterStatus(resource: any): StatusBadge {
+  return getCAPIReadyStatus(resource)
+}
+
+export function getGCPManagedClusterEndpoint(resource: any): string {
+  const host = resource.spec?.controlPlaneEndpoint?.host
+  const port = resource.spec?.controlPlaneEndpoint?.port
+  if (host) return port && port !== 443 ? `${host}:${port}` : host
+  return '-'
+}
+
+export function getGCPManagedClusterProject(resource: any): string {
+  return resource.spec?.project || '-'
+}

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -66,6 +66,10 @@ import {
   getRevisionStatus,
 } from '../resources/resource-utils-knative'
 import { getHTTPProxyStatus } from '../resources/resource-utils-contour'
+import { getClusterStatus as getCAPIClusterStatus, getMachineStatus, getMachineDeploymentStatus, getMachineSetStatus, getMachinePoolStatus, getKCPStatus, getClusterClassStatus, getMachineHealthCheckStatus } from '../resources/resource-utils-capi'
+import { getAWSMCPStatus, getAWSMMPStatus, getAWSMachineStatus, getAWSManagedClusterStatus } from '../resources/resource-utils-aws-capi'
+import { getGCPMCPStatus, getGCPMMPStatus, getGCPMachineStatus, getGCPManagedClusterStatus } from '../resources/resource-utils-gcp-capi'
+import { getAzureMCPStatus, getAzureMMPStatus, getAzureMachineStatus, getAzureManagedClusterStatus } from '../resources/resource-utils-azure-capi'
 import {
   PodRenderer,
   WorkloadRenderer,
@@ -174,9 +178,31 @@ import {
   LeaseRenderer,
   TraefikIngressRouteRenderer,
   ContourHTTPProxyRenderer,
+  CAPIClusterRenderer,
+  CAPIMachineRenderer,
+  CAPIMachineDeploymentRenderer,
+  CAPIKubeadmControlPlaneRenderer,
+  CAPIMachineSetRenderer,
+  CAPIMachinePoolRenderer,
+  CAPIClusterClassRenderer,
+  CAPIMachineHealthCheckRenderer,
+  CAPIMachineDrainRuleRenderer,
+  CAPIKubeadmConfigRenderer,
+  AWSManagedControlPlaneRenderer,
+  AWSManagedMachinePoolRenderer,
+  AWSMachineRenderer,
+  AWSMachineTemplateRenderer,
+  AWSManagedClusterRenderer,
+  GCPManagedControlPlaneRenderer,
+  GCPManagedMachinePoolRenderer,
+  GCPMachineRenderer,
+  AzureManagedControlPlaneRenderer,
+  AzureManagedMachinePoolRenderer,
+  AzureMachineRenderer,
 } from '../resources/renderers'
 import type { SelectedResource, Relationships, ResourceRef, SecretCertificateInfo, ResolvedEnvFrom } from '../../types'
 import type { CopyHandler } from '../ui/drawer-components'
+import { AlertBanner } from '../ui/drawer-components'
 
 /**
  * Override map letting each platform consumer swap in its own renderer components.
@@ -243,6 +269,19 @@ const KNOWN_KINDS = new Set([
   'knativeingresses', 'knativecertificates', 'serverlessservices', 'domainmappings',
   'ingressroutes', 'ingressroutetcps', 'ingressrouteudps',
   'httpproxies',
+  'machinedeployments', 'machines', 'machinesets', 'machinepools',
+  'kubeadmcontrolplanes', 'clusterclasses', 'machinehealthchecks',
+  'machinedrainrules', 'kubeadmconfigs', 'kubeadmconfigtemplates',
+  'kubeadmcontrolplanetemplates',
+  // AWS CAPI Infrastructure Provider
+  'awsmanagedcontrolplanes', 'awsmanagedmachinepools', 'awsmachines',
+  'awsmachinetemplates', 'awsmanagedclusters',
+  // GCP CAPI Infrastructure Provider
+  'gcpmanagedcontrolplanes', 'gcpmanagedmachinepools', 'gcpmachines',
+  'gcpmachinetemplates', 'gcpmanagedclusters',
+  // Azure CAPI Infrastructure Provider
+  'azuremanagedcontrolplanes', 'azuremanagedmachinepools', 'azuremachines',
+  'azuremachinetemplates', 'azuremanagedclusters',
 ])
 
 // ============================================================================
@@ -397,9 +436,40 @@ export function ResourceRendererDispatch({
         {kind === 'externalsecrets' && <ExternalSecretRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'clusterexternalsecrets' && <ClusterExternalSecretRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'secretstores' || kind === 'clustersecretstores') && <SecretStoreRenderer data={data} />}
-        {kind === 'clusters' && <CNPGClusterRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'clusters' && !data?.apiVersion?.includes('cluster.x-k8s.io') && <CNPGClusterRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'clusters' && data?.apiVersion?.includes('cluster.x-k8s.io') && <CAPIClusterRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'scheduledbackups' && <CNPGScheduledBackupRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'poolers' && <CNPGPoolerRenderer data={data} onNavigate={onNavigate} />}
+        {/* Cluster API (CAPI) */}
+        {'topology.cluster.x-k8s.io/owned' in (data?.metadata?.labels ?? {}) && data?.apiVersion?.includes('cluster.x-k8s.io') && (
+          <AlertBanner
+            variant="warning"
+            title="Topology-controlled — this resource is managed by ClusterClass. Manual changes will be reconciled back."
+          />
+        )}
+        {kind === 'machines' && data?.apiVersion?.includes('cluster.x-k8s.io') && <CAPIMachineRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'machinedeployments' && <CAPIMachineDeploymentRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'machinesets' && data?.apiVersion?.includes('cluster.x-k8s.io') && <CAPIMachineSetRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'machinepools' && <CAPIMachinePoolRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'kubeadmcontrolplanes' && <CAPIKubeadmControlPlaneRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'clusterclasses' && <CAPIClusterClassRenderer data={data} />}
+        {kind === 'machinehealthchecks' && <CAPIMachineHealthCheckRenderer data={data} />}
+        {kind === 'machinedrainrules' && <CAPIMachineDrainRuleRenderer data={data} />}
+        {(kind === 'kubeadmconfigs' || kind === 'kubeadmconfigtemplates') && <CAPIKubeadmConfigRenderer data={data} />}
+        {/* AWS CAPI Infrastructure Provider */}
+        {kind === 'awsmanagedcontrolplanes' && <AWSManagedControlPlaneRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'awsmanagedmachinepools' && <AWSManagedMachinePoolRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'awsmachines' && <AWSMachineRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'awsmachinetemplates' && <AWSMachineTemplateRenderer data={data} />}
+        {kind === 'awsmanagedclusters' && <AWSManagedClusterRenderer data={data} />}
+        {/* GCP CAPI Infrastructure Provider */}
+        {kind === 'gcpmanagedcontrolplanes' && <GCPManagedControlPlaneRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'gcpmanagedmachinepools' && <GCPManagedMachinePoolRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'gcpmachines' && <GCPMachineRenderer data={data} onNavigate={onNavigate} />}
+        {/* Azure CAPI Infrastructure Provider */}
+        {kind === 'azuremanagedcontrolplanes' && <AzureManagedControlPlaneRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'azuremanagedmachinepools' && <AzureManagedMachinePoolRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'azuremachines' && <AzureMachineRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'virtualservices' && <IstioVirtualServiceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'destinationrules' && <IstioDestinationRuleRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'serviceentries' && <IstioServiceEntryRenderer data={data} />}
@@ -546,7 +616,32 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'clusterexternalsecrets') return getClusterExternalSecretStatus(data)
   if (k === 'secretstores') return getSecretStoreStatus(data)
   if (k === 'clustersecretstores') return getClusterSecretStoreStatus(data)
-  if (k === 'clusters') return getCNPGClusterStatus(data)
+  if (k === 'clusters') {
+    if (data.apiVersion?.includes('cluster.x-k8s.io')) return getCAPIClusterStatus(data)
+    return getCNPGClusterStatus(data)
+  }
+  if (k === 'machines' && data.apiVersion?.includes('cluster.x-k8s.io')) return getMachineStatus(data)
+  if (k === 'machinedeployments') return getMachineDeploymentStatus(data)
+  if (k === 'machinesets') return getMachineSetStatus(data)
+  if (k === 'machinepools') return getMachinePoolStatus(data)
+  if (k === 'kubeadmcontrolplanes') return getKCPStatus(data)
+  if (k === 'clusterclasses') return getClusterClassStatus(data)
+  if (k === 'machinehealthchecks') return getMachineHealthCheckStatus(data)
+  // AWS CAPI Infrastructure Provider
+  if (k === 'awsmanagedcontrolplanes') return getAWSMCPStatus(data)
+  if (k === 'awsmanagedmachinepools') return getAWSMMPStatus(data)
+  if (k === 'awsmachines') return getAWSMachineStatus(data)
+  if (k === 'awsmanagedclusters') return getAWSManagedClusterStatus(data)
+  // GCP CAPI Infrastructure Provider
+  if (k === 'gcpmanagedcontrolplanes') return getGCPMCPStatus(data)
+  if (k === 'gcpmanagedmachinepools') return getGCPMMPStatus(data)
+  if (k === 'gcpmachines') return getGCPMachineStatus(data)
+  if (k === 'gcpmanagedclusters') return getGCPManagedClusterStatus(data)
+  // Azure CAPI Infrastructure Provider
+  if (k === 'azuremanagedcontrolplanes') return getAzureMCPStatus(data)
+  if (k === 'azuremanagedmachinepools') return getAzureMMPStatus(data)
+  if (k === 'azuremachines') return getAzureMachineStatus(data)
+  if (k === 'azuremanagedclusters') return getAzureManagedClusterStatus(data)
   if (k === 'scheduledbackups') return getCNPGScheduledBackupStatus(data)
   if (k === 'poolers') return getCNPGPoolerStatus(data)
   if (k === 'virtualservices') return getVirtualServiceStatus(data)

package/src/components/topology/K8sResourceNode.tsx

@@ -135,6 +135,14 @@ export const NODE_DIMENSIONS: Record<NodeKind, { width: number; height: number }
   TLSOption: { width: 280, height: 56 },
   TLSStore: { width: 280, height: 56 },
   HTTPProxy: { width: 280, height: 56 }, // Contour
+  CAPICluster: { width: 280, height: 56 }, // Cluster API
+  MachineDeployment: { width: 300, height: 56 },
+  MachineSet: { width: 280, height: 56 },
+  Machine: { width: 260, height: 56 },
+  MachinePool: { width: 280, height: 56 },
+  KubeadmControlPlane: { width: 300, height: 56 },
+  ClusterClass: { width: 280, height: 56 },
+  MachineHealthCheck: { width: 300, height: 56 },
 }
 
 

package/src/components/topology/TopologyControls.tsx

@@ -9,6 +9,8 @@ interface TopologyControlsProps {
   showNoGrouping?: boolean
   showPolicyEffect?: boolean
   onShowPolicyEffectChange?: (show: boolean) => void
+  /** Show the "Fleet" button (CAPI cluster management view) */
+  showFleetMode?: boolean
 }
 
 export function TopologyControls({
@@ -19,6 +21,7 @@ export function TopologyControls({
   showNoGrouping = true,
   showPolicyEffect = false,
   onShowPolicyEffectChange,
+  showFleetMode = false,
 }: TopologyControlsProps) {
   return (
     <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
@@ -76,6 +79,19 @@ export function TopologyControls({
         >
           Traffic
         </button>
+        {showFleetMode && (
+          <button
+            onClick={() => onViewModeChange('fleet')}
+            className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
+              viewMode === 'fleet'
+                ? 'bg-skyhook-600 text-white'
+                : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
+            }`}
+            title="Cluster API fleet view — shows only CAPI resources and nodes"
+          >
+            Fleet
+          </button>
+        )}
       </div>
     </div>
   )

package/src/components/topology/TopologyFilterSidebar.tsx

@@ -80,6 +80,21 @@ const RESOURCE_KINDS: {
 
   // Contour
   { kind: 'HTTPProxy', label: 'HTTPProxy', icon: getTopologyIcon('HTTPProxy'), color: 'text-violet-400', category: 'networking' },
+
+  // Cluster API
+  { kind: 'CAPICluster', label: 'CAPI Cluster', icon: getTopologyIcon('CAPICluster'), color: 'text-indigo-400', category: 'custom' },
+  { kind: 'MachineDeployment', label: 'Machine Deploy', icon: getTopologyIcon('MachineDeployment'), color: 'text-indigo-400', category: 'custom' },
+  { kind: 'MachineSet', label: 'MachineSet', icon: getTopologyIcon('MachineSet'), color: 'text-indigo-400', category: 'custom' },
+  { kind: 'Machine', label: 'Machine', icon: getTopologyIcon('Machine'), color: 'text-indigo-400', category: 'custom' },
+  { kind: 'MachinePool', label: 'MachinePool', icon: getTopologyIcon('MachinePool'), color: 'text-indigo-400', category: 'custom' },
+  { kind: 'KubeadmControlPlane', label: 'Control Plane', icon: getTopologyIcon('KubeadmControlPlane'), color: 'text-indigo-400', category: 'custom' },
+  { kind: 'ClusterClass', label: 'ClusterClass', icon: getTopologyIcon('ClusterClass'), color: 'text-indigo-400', category: 'custom' },
+  { kind: 'MachineHealthCheck', label: 'Health Check', icon: getTopologyIcon('MachineHealthCheck'), color: 'text-indigo-400', category: 'custom' },
+  // AWS CAPI infrastructure
+  { kind: 'AWSManagedControlPlane', label: 'AWS Control Plane', icon: getTopologyIcon('AWSManagedControlPlane'), color: 'text-amber-400', category: 'custom' },
+  { kind: 'AWSManagedMachinePool', label: 'AWS Machine Pool', icon: getTopologyIcon('AWSManagedMachinePool'), color: 'text-amber-400', category: 'custom' },
+  { kind: 'AWSMachine', label: 'AWS Machine', icon: getTopologyIcon('AWSMachine'), color: 'text-amber-400', category: 'custom' },
+  { kind: 'EKSConfig', label: 'EKS Config', icon: getTopologyIcon('EKSConfig'), color: 'text-amber-400', category: 'custom' },
 ]
 
 const CATEGORIES = [

package/src/components/topology/TopologyGraph.tsx

@@ -484,7 +484,8 @@ export function TopologyGraph({
     // Smart default: start all namespace groups as chips for large clusters.
     // Fires once per topology lifecycle (reset on context switch). Returns early
     // so the re-render with groupLevels set computes the actual layout.
-    if (!hasAppliedSmartDefaultRef.current && groupLevels.size === 0 && groupingMode === 'namespace' && !hideGroupHeader) {
+    // Fleet mode: skip collapse — CAPI resources are already filtered, always show expanded
+    if (!hasAppliedSmartDefaultRef.current && groupLevels.size === 0 && groupingMode === 'namespace' && !hideGroupHeader && viewMode !== 'fleet') {
       const uniqueNamespaces = new Set(workingNodes.map(n => n.data.namespace as string).filter(Boolean))
       if (uniqueNamespaces.size > LARGE_CLUSTER_NS_THRESHOLD) {
         hasAppliedSmartDefaultRef.current = true

package/src/components/topology/layout.ts

@@ -764,6 +764,17 @@ const KIND_PRIORITY: Record<string, number> = {
   'Middleware': 3, 'MiddlewareTCP': 3, 'ServersTransport': 4, 'ServersTransportTCP': 4,
   'TLSOption': 4, 'TLSStore': 4, 'HTTPProxy': 1,
   'Application': 1, 'Kustomization': 1, 'HelmRelease': 1, 'GitRepository': 2,
+  'CAPICluster': 1, 'MachineDeployment': 2, 'MachineSet': 3, 'Machine': 4,
+  'MachinePool': 2, 'KubeadmControlPlane': 1, 'ClusterClass': 1, 'MachineHealthCheck': 5,
+  // AWS CAPI infrastructure provider
+  'AWSManagedControlPlane': 2, 'AWSManagedMachinePool': 3, 'AWSMachine': 5,
+  'AWSMachineTemplate': 5, 'AWSManagedCluster': 2, 'EKSConfig': 5,
+  // GCP CAPI infrastructure provider
+  'GCPManagedControlPlane': 2, 'GCPManagedMachinePool': 3, 'GCPMachine': 5,
+  'GCPMachineTemplate': 5, 'GCPManagedCluster': 2,
+  // Azure CAPI infrastructure provider
+  'AzureManagedControlPlane': 2, 'AzureManagedMachinePool': 3, 'AzureMachine': 5,
+  'AzureMachineTemplate': 5, 'AzureManagedCluster': 2,
 }
 
 // Compute grid dimensions from workload card count

package/src/components/topology/topology.css

@@ -97,6 +97,35 @@
 .topology-icon-nodeclaim { background: #6366f1; }
 .topology-icon-nodeclass { background: #6366f1; }
 .topology-icon-httpproxy { background: #7c3aed; }
+.topology-icon-capicluster { background: #4338ca; }
+.topology-icon-machinedeployment { background: #5b4fcf; }
+.topology-icon-machineset { background: #6d5fd6; }
+.topology-icon-machine { background: #7c6fdd; }
+.topology-icon-machinepool { background: #5b4fcf; }
+.topology-icon-kubeadmcontrolplane { background: #4338ca; }
+.topology-icon-clusterclass { background: #3b2fba; }
+.topology-icon-machinehealthcheck { background: #8b7fe4; }
+/* AWS CAPI infrastructure provider */
+.topology-icon-awsmanagedcontrolplane { background: #d97706; }
+.topology-icon-awsmanagedmachinepool { background: #d97706; }
+.topology-icon-awsmachine { background: #f59e0b; }
+.topology-icon-awsmachinetemplate { background: #f59e0b; }
+.topology-icon-awsmanagedcluster { background: #d97706; }
+.topology-icon-eksconfig { background: #f59e0b; }
+.topology-icon-eksconfigtemplate { background: #f59e0b; }
+
+/* GCP CAPI infrastructure provider */
+.topology-icon-gcpmanagedcontrolplane { background: #0d9488; }
+.topology-icon-gcpmanagedmachinepool { background: #0d9488; }
+.topology-icon-gcpmachine { background: #14b8a6; }
+.topology-icon-gcpmachinetemplate { background: #14b8a6; }
+.topology-icon-gcpmanagedcluster { background: #0d9488; }
+/* Azure CAPI infrastructure provider */
+.topology-icon-azuremanagedcontrolplane { background: #2563eb; }
+.topology-icon-azuremanagedmachinepool { background: #2563eb; }
+.topology-icon-azuremachine { background: #3b82f6; }
+.topology-icon-azuremachinetemplate { background: #3b82f6; }
+.topology-icon-azuremanagedcluster { background: #2563eb; }
 
 /* Background dots - uses CSS variable for theme awareness */
 .react-flow__background pattern circle {

package/src/components/ui/Badge.tsx

@@ -116,6 +116,16 @@ const KIND: Record<string, string> = {
   // Contour
   HTTPProxy:            'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
 
+  // Cluster API
+  CAPICluster:          'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  MachineDeployment:    'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  MachineSet:           'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  Machine:              'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  MachinePool:          'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  KubeadmControlPlane:  'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  ClusterClass:         'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  MachineHealthCheck:   'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+
   // Events
   Event:                'bg-slate-100 text-slate-700 border-slate-300 dark:bg-slate-950/50 dark:text-slate-400 dark:border-slate-700/40',
 }

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

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { ChevronRight, Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers } from 'lucide-react'
 import { clsx } from 'clsx'
-import { formatAge } from '../resources/resource-utils'
+import { formatAge, formatDuration } from '../resources/resource-utils'
 import { Tooltip } from './Tooltip'
 import { getKindColorClass } from '../ui/Badge'
 
@@ -185,23 +185,60 @@ export function Property({ label, value, copyable, onCopy, copied }: PropertyPro
 export function ConditionsSection({ conditions }: { conditions?: any[] }) {
   if (!conditions || conditions.length === 0) return null
 
+  // Sort by lastTransitionTime (most recent first), then alphabetically for ties
+  const sorted = [...conditions].sort((a: any, b: any) => {
+    const tA = a.lastTransitionTime ? new Date(a.lastTransitionTime).getTime() : 0
+    const tB = b.lastTransitionTime ? new Date(b.lastTransitionTime).getTime() : 0
+    if (tA !== tB) return tB - tA
+    return (a.type || '').localeCompare(b.type || '')
+  })
+
+  const failCount = sorted.filter((c: any) => c.status === 'False').length
+
   return (
-    <Section title={`Conditions (${conditions.length})`} defaultExpanded={conditions.length <= 4}>
-      <div className="space-y-2">
-        {conditions.map((cond: any) => (
-          <div key={cond.type} className="flex items-start gap-2 text-sm">
-            <span className={clsx(
-              'w-4 h-4 rounded-full flex items-center justify-center text-xs shrink-0 mt-0.5',
-              cond.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
-            )}>
-              {cond.status === 'True' ? '✓' : '✗'}
-            </span>
-            <div>
-              <div className="text-theme-text-primary">{cond.type}</div>
-              {cond.message && <div className="text-xs text-theme-text-tertiary">{cond.message}</div>}
-            </div>
-          </div>
-        ))}
+    <Section
+      title={`Conditions (${conditions.length})${failCount > 0 ? ` · ${failCount} failing` : ''}`}
+      defaultExpanded={conditions.length <= 6}
+    >
+      <div className="relative">
+        {/* Timeline line — sits between timestamp column and dot */}
+        <div className="absolute left-[52px] top-2 bottom-2 w-px bg-theme-border" />
+
+        <div className="space-y-0.5">
+          {sorted.map((cond: any) => {
+            const isOk = cond.status === 'True'
+            const isUnknown = cond.status === 'Unknown'
+            const isFail = !isOk && !isUnknown
+            return (
+              <div key={cond.type} className={clsx(
+                'flex items-start py-1.5 pr-1 text-sm relative',
+                isFail && 'border-l-2 border-red-400/60 dark:border-red-500/40'
+              )}>
+                {/* Timestamp column — fixed width on the left */}
+                <div className="w-[48px] shrink-0 text-[10px] text-theme-text-tertiary text-right pr-2 pt-0.5">
+                  {cond.lastTransitionTime ? formatDuration(Date.now() - new Date(cond.lastTransitionTime).getTime(), true) : ''}
+                </div>
+                {/* Timeline dot */}
+                <span className={clsx(
+                  'w-[13px] h-[13px] rounded-full flex items-center justify-center text-[8px] shrink-0 mt-[3px] z-10 ring-2 ring-theme-surface',
+                  isOk ? 'bg-emerald-500/20 text-emerald-500 dark:bg-emerald-500/30'
+                    : isUnknown ? 'bg-gray-400/20 text-gray-400 dark:bg-gray-400/30'
+                    : 'bg-red-500/25 text-red-500 dark:bg-red-500/35'
+                )}>
+                  {isOk ? '✓' : isUnknown ? '?' : '✗'}
+                </span>
+                {/* Content */}
+                <div className="min-w-0 flex-1 pl-2">
+                  <span className={clsx('font-medium text-[13px]', isOk ? 'text-theme-text-primary' : isUnknown ? 'text-theme-text-secondary' : 'text-red-600 dark:text-red-400')}>{cond.type}</span>
+                  {cond.reason && cond.reason !== cond.type && (
+                    <div className="text-[10px] text-theme-text-secondary">{cond.reason}</div>
+                  )}
+                  {cond.message && <div className="text-[10.5px] text-theme-text-tertiary break-words leading-relaxed">{cond.message}</div>}
+                </div>
+              </div>
+            )
+          })}
+        </div>
       </div>
     </Section>
   )

package/src/types/core.ts

@@ -100,6 +100,14 @@ export type CoreNodeKind =
   | 'TLSOption'          // Traefik TLSOption
   | 'TLSStore'           // Traefik TLSStore
   | 'HTTPProxy'          // Contour HTTPProxy
+  | 'CAPICluster'        // Cluster API Cluster
+  | 'MachineDeployment'  // Cluster API MachineDeployment
+  | 'MachineSet'         // Cluster API MachineSet
+  | 'Machine'            // Cluster API Machine
+  | 'MachinePool'        // Cluster API MachinePool
+  | 'KubeadmControlPlane' // Cluster API KubeadmControlPlane
+  | 'ClusterClass'       // Cluster API ClusterClass
+  | 'MachineHealthCheck' // Cluster API MachineHealthCheck
 
 // NodeKind can be a core kind or any arbitrary CRD kind string
 export type NodeKind = CoreNodeKind | (string & {})
@@ -122,6 +130,14 @@ export function displayKind(kind: string): string {
     TraefikService: 'Traefik Svc',
     ServersTransport: 'Transport',
     ServersTransportTCP: 'Transport TCP',
+    CAPICluster: 'Cluster',
+    MachineDeployment: 'Machine Deploy',
+    MachineSet: 'MachineSet',
+    Machine: 'Machine',
+    MachinePool: 'MachinePool',
+    KubeadmControlPlane: 'Control Plane',
+    ClusterClass: 'ClusterClass',
+    MachineHealthCheck: 'Health Check',
   }
   return shortNames[kind] || kind
 }
@@ -310,8 +326,8 @@ export type MainView = 'home' | 'topology' | 'resources' | 'timeline' | 'helm'
 
 // Topology view mode (for backwards compatibility, also exported as ViewMode)
 // NOTE: Must match Go backend constants in internal/topology/types.go
-export type TopologyMode = 'resources' | 'traffic'
-export type ViewMode = 'resources' | 'traffic'
+export type TopologyMode = 'resources' | 'traffic' | 'fleet'
+export type ViewMode = 'resources' | 'traffic' | 'fleet'
 
 // Grouping mode
 export type GroupingMode = 'none' | 'namespace' | 'app' | 'label'

package/src/utils/api-resources.ts

@@ -156,6 +156,10 @@ export function formatGroupName(group: string): string {
     'projectcalico.org': 'Calico',
     'crd.projectcalico.org': 'Calico',
     'projectcontour.io': 'Contour',
+    'cluster.x-k8s.io': 'Cluster API',
+    'controlplane.cluster.x-k8s.io': 'Cluster API',
+    'bootstrap.cluster.x-k8s.io': 'Cluster API',
+    'infrastructure.cluster.x-k8s.io': 'Cluster API',
     'ceph.rook.io': 'Rook',
     'kyverno.io': 'Kyverno',
     'k8s.nginx.org': 'NGINX',

package/src/utils/resource-icons.ts

@@ -61,6 +61,10 @@ import {
   Lock,
   ArrowRightLeft,
 
+  // Cluster API
+  HeartPulse,
+  BookOpen,
+
   // Fallback
   Puzzle,
 } from 'lucide-react'
@@ -190,6 +194,37 @@ const KIND_ICON_MAP: Record<string, LucideIcon> = {
   // Contour
   httpproxy: Globe,
 
+  // Cluster API
+  capicluster: Server,
+  machinedeployment: Layers,
+  machineset: Layers,
+  machine: Cpu,
+  machinepool: Layers,
+  kubeadmcontrolplane: Shield,
+  clusterclass: BookOpen,
+  machinehealthcheck: HeartPulse,
+
+  // AWS CAPI Infrastructure Provider
+  awsmanagedcontrolplane: Shield,
+  awsmanagedmachinepool: Layers,
+  awsmachine: Cpu,
+  awsmachinetemplate: Cpu,
+  awsmanagedcluster: Server,
+
+  // GCP CAPI Infrastructure Provider
+  gcpmanagedcontrolplane: Shield,
+  gcpmanagedmachinepool: Layers,
+  gcpmachine: Cpu,
+  gcpmachinetemplate: Cpu,
+  gcpmanagedcluster: Server,
+
+  // Azure CAPI Infrastructure Provider
+  azuremanagedcontrolplane: Shield,
+  azuremanagedmachinepool: Layers,
+  azuremachine: Cpu,
+  azuremachinetemplate: Cpu,
+  azuremanagedcluster: Server,
+
   // Trivy Operator
   vulnerabilityreport: Shield,
   configauditreport: ShieldCheck,