@skyhook-io/k8s-ui 1.4.2 → 1.4.3

package/src/components/resources/renderers/AWSManagedControlPlaneRenderer.tsx

@@ -0,0 +1,174 @@
+import { Globe, Network, Shield, Server, Package } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { getCAPIConditions } from '../resource-utils-capi'
+import {
+  getAWSMCPStatus, getAWSMCPEKSClusterName, getAWSMCPRegion, getAWSMCPVersion,
+  getAWSMCPEndpointAccess, getAWSMCPAddons, getAWSMCPSubnets, getAWSMCPSecurityGroups,
+  getAWSMCPNATGatewayIPs, getAWSMCPFailureDomains, getAWSMCPVPC,
+} from '../resource-utils-aws-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function AWSManagedControlPlaneRenderer({ data }: Props) {
+  const spec = data.spec || {}
+  const conditions = getCAPIConditions(data)
+
+  const mcpStatus = getAWSMCPStatus(data)
+  const isFailed = mcpStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+
+  const vpc = getAWSMCPVPC(data)
+  const subnets = getAWSMCPSubnets(data)
+  const securityGroups = getAWSMCPSecurityGroups(data)
+  const natIPs = getAWSMCPNATGatewayIPs(data)
+  const failureDomains = getAWSMCPFailureDomains(data)
+  const addons = getAWSMCPAddons(data)
+
+  return (
+    <>
+      {isFailed && (
+        <AlertBanner
+          variant="error"
+          title="EKS Control Plane Not Ready"
+          message={readyCond?.message || 'AWSManagedControlPlane is not ready.'}
+        />
+      )}
+
+      <Section title="Overview" icon={Globe}>
+        <PropertyList>
+          <Property label="EKS Cluster" value={getAWSMCPEKSClusterName(data)} />
+          <Property label="Region" value={getAWSMCPRegion(data)} />
+          <Property label="Version" value={getAWSMCPVersion(data)} />
+          <Property label="Endpoint Access" value={getAWSMCPEndpointAccess(data)} />
+          {spec.roleName && <Property label="IAM Role" value={spec.roleName} />}
+          {spec.identityRef?.name && (
+            <Property label="Identity" value={`${spec.identityRef.kind}/${spec.identityRef.name}`} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Network - VPC */}
+      {vpc.id !== '-' && (
+        <Section title="VPC" icon={Network}>
+          <PropertyList>
+            <Property label="VPC ID" value={<span className="font-mono text-[11px]">{vpc.id}</span>} />
+            {vpc.cidrBlock !== '-' && <Property label="CIDR" value={vpc.cidrBlock} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Subnets */}
+      {subnets.length > 0 && (
+        <Section title={`Subnets (${subnets.length})`} icon={Network}>
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-theme-text-tertiary">
+                <th className="text-left font-medium py-1">ID</th>
+                <th className="text-left font-medium py-1">AZ</th>
+                <th className="text-left font-medium py-1">Type</th>
+                <th className="text-left font-medium py-1">CIDR</th>
+              </tr>
+            </thead>
+            <tbody>
+              {subnets.map((s, i) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary font-mono text-[10px]">{s.id}</td>
+                  <td className="py-1 text-theme-text-secondary">{s.az}</td>
+                  <td className="py-1">
+                    <span className={`badge badge-sm ${s.isPublic
+                      ? 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
+                      : 'bg-slate-100 text-slate-600 border-slate-300 dark:bg-slate-900/50 dark:text-slate-400 dark:border-slate-700/40'
+                    }`}>{s.isPublic ? 'Public' : 'Private'}</span>
+                  </td>
+                  <td className="py-1 text-theme-text-secondary font-mono text-[10px]">{s.cidrBlock}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      {/* Security Groups */}
+      {securityGroups.length > 0 && (
+        <Section title="Security Groups" icon={Shield}>
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-theme-text-tertiary">
+                <th className="text-left font-medium py-1">Role</th>
+                <th className="text-left font-medium py-1">ID</th>
+                <th className="text-left font-medium py-1">Name</th>
+              </tr>
+            </thead>
+            <tbody>
+              {securityGroups.map((sg, i) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary font-medium">{sg.role}</td>
+                  <td className="py-1 text-theme-text-secondary font-mono text-[10px]">{sg.id}</td>
+                  <td className="py-1 text-theme-text-secondary text-[10px] break-all">{sg.name}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      {/* NAT Gateways */}
+      {natIPs.length > 0 && (
+        <Section title="NAT Gateways" icon={Network}>
+          <div className="flex flex-wrap gap-1">
+            {natIPs.map((ip, i) => (
+              <span key={i} className="badge badge-sm bg-theme-elevated text-theme-text-secondary border-theme-border font-mono text-[10px]">{ip}</span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Addons */}
+      {addons.length > 0 && (
+        <Section title="EKS Addons" icon={Package}>
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-theme-text-tertiary">
+                <th className="text-left font-medium py-1">Name</th>
+                <th className="text-left font-medium py-1">Version</th>
+                <th className="text-left font-medium py-1">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {addons.map((a, i) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary font-medium">{a.name}</td>
+                  <td className="py-1 text-theme-text-secondary font-mono text-[10px]">{a.statusVersion !== '-' ? a.statusVersion : a.specVersion}</td>
+                  <td className="py-1">
+                    <span className={`badge badge-sm ${a.status === 'ACTIVE'
+                      ? 'status-healthy'
+                      : a.status === 'DEGRADED'
+                      ? 'status-unhealthy'
+                      : 'status-neutral'
+                    }`}>{a.status}</span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      {/* Failure Domains */}
+      {failureDomains.length > 0 && (
+        <Section title="Failure Domains" icon={Server}>
+          <div className="flex flex-wrap gap-1">
+            {failureDomains.map((az) => (
+              <span key={az} className="badge badge-sm bg-theme-elevated text-theme-text-secondary border-theme-border">{az}</span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

package/src/components/resources/renderers/AWSManagedMachinePoolRenderer.tsx

@@ -0,0 +1,89 @@
+import { Server, Settings } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { getCAPIConditions } from '../resource-utils-capi'
+import { getAWSMMPStatus, getAWSMMPInstanceType, getAWSMMPCapacityType, getAWSMMPAMIType, getAWSMMPNodegroupName, getAWSMMPScaling } from '../resource-utils-aws-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function AWSManagedMachinePoolRenderer({ data }: Props) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const conditions = getCAPIConditions(data)
+
+  const mmpStatus = getAWSMMPStatus(data)
+  const isFailed = mmpStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+
+  const scaling = getAWSMMPScaling(data)
+  const capacityType = getAWSMMPCapacityType(data)
+  const labels = spec.labels || {}
+  const subnetIDs = spec.subnetIDs || []
+
+  return (
+    <>
+      {isFailed && (
+        <AlertBanner
+          variant="error"
+          title="Managed Machine Pool Not Ready"
+          message={readyCond?.message || 'AWSManagedMachinePool is not ready.'}
+        />
+      )}
+
+      <Section title="Overview" icon={Server}>
+        <PropertyList>
+          <Property label="Node Group" value={getAWSMMPNodegroupName(data)} />
+          <Property label="Instance Type" value={getAWSMMPInstanceType(data)} />
+          <Property label="AMI Type" value={getAWSMMPAMIType(data)} />
+          <Property label="Capacity Type" value={
+            <span className={clsx('badge badge-sm', capacityType === 'spot'
+              ? 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40'
+              : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
+            )}>{capacityType === 'onDemand' ? 'On-Demand' : capacityType}</span>
+          } />
+          {spec.roleName && <Property label="IAM Role" value={spec.roleName} />}
+        </PropertyList>
+      </Section>
+
+      <Section title="Scaling" icon={Settings}>
+        <PropertyList>
+          <Property label="Min Size" value={String(scaling.min)} />
+          <Property label="Max Size" value={String(scaling.max)} />
+          <Property label="Current Replicas" value={String(status.replicas ?? 0)} />
+          {spec.updateConfig?.maxUnavailable != null && (
+            <Property label="Max Unavailable" value={String(spec.updateConfig.maxUnavailable)} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Subnets */}
+      {subnetIDs.length > 0 && (
+        <Section title="Subnets" icon={Server}>
+          <div className="flex flex-wrap gap-1">
+            {subnetIDs.map((id: string) => (
+              <span key={id} className="badge badge-sm bg-theme-elevated text-theme-text-secondary border-theme-border font-mono text-[10px]">{id}</span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Labels */}
+      {Object.keys(labels).length > 0 && (
+        <Section title="Node Labels" icon={Settings}>
+          <div className="flex flex-wrap gap-1">
+            {Object.entries(labels).map(([k, v]) => (
+              <span key={k} className="badge badge-sm bg-theme-elevated text-theme-text-secondary border-theme-border text-[10px]">
+                {k}={v as string}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

package/src/components/resources/renderers/AzureMachineRenderer.tsx

@@ -0,0 +1,41 @@
+import { Cloud } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { getCAPIConditions } from '../resource-utils-capi'
+import { getAzureMachineStatus, getAzureMachineVMSize, getAzureMachineProviderID } from '../resource-utils-azure-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function AzureMachineRenderer({ data }: Props) {
+  const spec = data.spec || {}
+  const conditions = getCAPIConditions(data)
+  const machineStatus = getAzureMachineStatus(data)
+  const isFailed = machineStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const providerID = getAzureMachineProviderID(data)
+
+  return (
+    <>
+      {isFailed && (
+        <AlertBanner variant="error" title="Azure Machine Not Ready" message={readyCond?.message || 'AzureMachine is not ready.'} />
+      )}
+
+      <Section title="Instance" icon={Cloud}>
+        <PropertyList>
+          <Property label="VM Size" value={getAzureMachineVMSize(data)} />
+          {spec.failureDomain && <Property label="Availability Zone" value={spec.failureDomain} />}
+          {spec.osDisk?.osType && <Property label="OS Type" value={spec.osDisk.osType} />}
+          {spec.osDisk?.diskSizeGB && <Property label="OS Disk" value={`${spec.osDisk.diskSizeGB}GB`} />}
+          {providerID !== '-' && (
+            <Property label="Provider ID" value={<span className="font-mono text-[10px] break-all">{providerID}</span>} />
+          )}
+          {spec.subnetName && <Property label="Subnet" value={spec.subnetName} />}
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

package/src/components/resources/renderers/AzureManagedControlPlaneRenderer.tsx

@@ -0,0 +1,71 @@
+import { Globe, Shield, Settings } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { getCAPIConditions } from '../resource-utils-capi'
+import { getAzureMCPStatus, getAzureMCPLocation, getAzureMCPVersion, getAzureMCPResourceGroup, getAzureMCPSKUTier, getAzureMCPNetworkPlugin, getAzureMCPNetworkPolicy, getAzureMCPDNSPrefix, getAzureMCPUpgradeChannel, getAzureMCPPrivateCluster } from '../resource-utils-azure-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function AzureManagedControlPlaneRenderer({ data }: Props) {
+  const spec = data.spec || {}
+  const conditions = getCAPIConditions(data)
+  const mcpStatus = getAzureMCPStatus(data)
+  const isFailed = mcpStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const apiAccess = spec.apiServerAccessProfile || {}
+  const authorizedRanges = apiAccess.authorizedIPRanges || []
+
+  return (
+    <>
+      {isFailed && (
+        <AlertBanner variant="error" title="AKS Control Plane Not Ready" message={readyCond?.message || 'AzureManagedControlPlane is not ready.'} />
+      )}
+
+      <Section title="Overview" icon={Globe}>
+        <PropertyList>
+          <Property label="Location" value={getAzureMCPLocation(data)} />
+          <Property label="Resource Group" value={getAzureMCPResourceGroup(data)} />
+          <Property label="Version" value={getAzureMCPVersion(data)} />
+          <Property label="SKU Tier" value={getAzureMCPSKUTier(data)} />
+          {spec.dnsPrefix && <Property label="DNS Prefix" value={getAzureMCPDNSPrefix(data)} />}
+          {spec.subscriptionID && <Property label="Subscription" value={<span className="font-mono text-[10px]">{spec.subscriptionID}</span>} />}
+        </PropertyList>
+      </Section>
+
+      {/* Networking */}
+      <Section title="Networking" icon={Shield}>
+        <PropertyList>
+          <Property label="Network Plugin" value={getAzureMCPNetworkPlugin(data)} />
+          <Property label="Network Policy" value={getAzureMCPNetworkPolicy(data)} />
+          <Property label="Private Cluster" value={getAzureMCPPrivateCluster(data) ? 'Yes' : 'No'} />
+          {spec.dnsServiceIP && <Property label="DNS Service IP" value={spec.dnsServiceIP} />}
+          {spec.loadBalancerSKU && <Property label="Load Balancer SKU" value={spec.loadBalancerSKU} />}
+        </PropertyList>
+      </Section>
+
+      {/* Upgrade */}
+      {spec.autoUpgradeProfile && (
+        <Section title="Upgrade" icon={Settings}>
+          <PropertyList>
+            <Property label="Channel" value={getAzureMCPUpgradeChannel(data)} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Authorized IP Ranges */}
+      {authorizedRanges.length > 0 && (
+        <Section title="Authorized IP Ranges" icon={Shield}>
+          <div className="flex flex-wrap gap-1">
+            {authorizedRanges.map((range: string, i: number) => (
+              <span key={i} className="badge badge-sm bg-theme-elevated text-theme-text-secondary border-theme-border font-mono text-[10px]">{range}</span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

package/src/components/resources/renderers/AzureManagedMachinePoolRenderer.tsx

@@ -0,0 +1,106 @@
+import { Server, Settings } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { getCAPIConditions } from '../resource-utils-capi'
+import { getAzureMMPStatus, getAzureMMPSKU, getAzureMMPMode, getAzureMMPOSDiskInfo, getAzureMMPScaling, getAzureMMPScaleSetPriority, getAzureMMPOSType } from '../resource-utils-azure-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function AzureManagedMachinePoolRenderer({ data }: Props) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const conditions = getCAPIConditions(data)
+  const mmpStatus = getAzureMMPStatus(data)
+  const isFailed = mmpStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const scaling = getAzureMMPScaling(data)
+  const mode = getAzureMMPMode(data)
+  const priority = getAzureMMPScaleSetPriority(data)
+  const labels = spec.nodeLabels || {}
+  const taints = spec.taints || []
+  const zones = spec.availabilityZones || []
+
+  return (
+    <>
+      {isFailed && (
+        <AlertBanner variant="error" title="AKS Node Pool Not Ready" message={readyCond?.message || 'AzureManagedMachinePool is not ready.'} />
+      )}
+
+      <Section title="Overview" icon={Server}>
+        <PropertyList>
+          {spec.name && <Property label="Pool Name" value={spec.name} />}
+          <Property label="VM Size" value={getAzureMMPSKU(data)} />
+          <Property label="Mode" value={
+            <span className={clsx('badge badge-sm', mode === 'System'
+              ? 'bg-purple-100 text-purple-800 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40'
+              : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
+            )}>{mode}</span>
+          } />
+          <Property label="OS" value={getAzureMMPOSType(data)} />
+          <Property label="OS Disk" value={getAzureMMPOSDiskInfo(data)} />
+          <Property label="Priority" value={
+            <span className={clsx('badge badge-sm', priority === 'Spot'
+              ? 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40'
+              : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
+            )}>{priority}</span>
+          } />
+          {spec.maxPods != null && <Property label="Max Pods" value={String(spec.maxPods)} />}
+        </PropertyList>
+      </Section>
+
+      <Section title="Scaling" icon={Settings}>
+        <PropertyList>
+          <Property label="Min Size" value={String(scaling.min)} />
+          <Property label="Max Size" value={String(scaling.max)} />
+          <Property label="Current Replicas" value={String(status.replicas ?? 0)} />
+          {spec.scaleDownMode && <Property label="Scale Down Mode" value={spec.scaleDownMode} />}
+        </PropertyList>
+      </Section>
+
+      {/* Availability Zones */}
+      {zones.length > 0 && (
+        <Section title="Availability Zones" icon={Server}>
+          <div className="flex flex-wrap gap-1">
+            {zones.map((z: string) => (
+              <span key={z} className="badge badge-sm bg-theme-elevated text-theme-text-secondary border-theme-border">{z}</span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Labels */}
+      {Object.keys(labels).length > 0 && (
+        <Section title="Node Labels" icon={Settings}>
+          <div className="flex flex-wrap gap-1">
+            {Object.entries(labels).map(([k, v]) => (
+              <span key={k} className="badge badge-sm bg-theme-elevated text-theme-text-secondary border-theme-border text-[10px]">{k}={v as string}</span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Taints */}
+      {taints.length > 0 && (
+        <Section title="Taints" icon={Settings}>
+          <table className="w-full text-xs">
+            <thead><tr className="text-theme-text-tertiary"><th className="text-left font-medium py-1">Key</th><th className="text-left font-medium py-1">Value</th><th className="text-left font-medium py-1">Effect</th></tr></thead>
+            <tbody>
+              {taints.map((t: any, i: number) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary">{t.key}</td>
+                  <td className="py-1 text-theme-text-secondary">{t.value}</td>
+                  <td className="py-1 text-theme-text-secondary">{t.effect}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

package/src/components/resources/renderers/CAPIClusterClassRenderer.tsx

@@ -0,0 +1,156 @@
+import { BookOpen, Server, Settings, Shield } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function CAPIClusterClassRenderer({ data }: Props) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.v1beta2?.conditions || status.conditions || []
+
+  const infraRef = spec.infrastructure?.ref || {}
+  const cpRef = spec.controlPlane?.ref || {}
+  const cpMachineInfraRef = spec.controlPlane?.machineInfrastructure?.ref || {}
+  const variables = spec.variables || []
+  const patches = spec.patches || []
+  const mdClasses = spec.workers?.machineDeployments || []
+  const mpClasses = spec.workers?.machinePools || []
+
+  return (
+    <>
+      {/* Overview */}
+      <Section title="Overview" icon={BookOpen}>
+        <PropertyList>
+          {infraRef.kind && (
+            <Property label="Infrastructure Template" value={`${infraRef.kind}/${infraRef.name}`} />
+          )}
+          {cpRef.kind && (
+            <Property label="Control Plane Template" value={`${cpRef.kind}/${cpRef.name}`} />
+          )}
+          {cpMachineInfraRef.kind && (
+            <Property label="CP Machine Infra" value={`${cpMachineInfraRef.kind}/${cpMachineInfraRef.name}`} />
+          )}
+          <Property label="Variables" value={String(variables.length)} />
+          <Property label="Patches" value={String(patches.length)} />
+        </PropertyList>
+      </Section>
+
+      {/* Control Plane */}
+      {cpRef.kind && (
+        <Section title="Control Plane" icon={Shield}>
+          <PropertyList>
+            <Property label="Template" value={`${cpRef.kind}/${cpRef.name}`} />
+            {spec.controlPlane?.machineHealthCheck && (
+              <Property label="Health Check" value="Configured" />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Worker Topology */}
+      {(mdClasses.length > 0 || mpClasses.length > 0) && (
+        <Section title="Worker Topology" icon={Server}>
+          {mdClasses.length > 0 && (
+            <div className="mb-2">
+              <div className="text-xs font-medium text-theme-text-secondary mb-1">MachineDeployment Classes</div>
+              <table className="w-full text-xs">
+                <thead>
+                  <tr className="text-theme-text-tertiary">
+                    <th className="text-left font-medium py-1">Class</th>
+                    <th className="text-left font-medium py-1">Infra Template</th>
+                    <th className="text-left font-medium py-1">Bootstrap Template</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {mdClasses.map((md: any, i: number) => (
+                    <tr key={i} className="border-t border-theme-border">
+                      <td className="py-1 text-theme-text-secondary font-medium">{md.class}</td>
+                      <td className="py-1 text-theme-text-secondary">{md.template?.infrastructure?.ref?.kind || '-'}</td>
+                      <td className="py-1 text-theme-text-secondary">{md.template?.bootstrap?.ref?.kind || '-'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+          {mpClasses.length > 0 && (
+            <div>
+              <div className="text-xs font-medium text-theme-text-secondary mb-1">MachinePool Classes</div>
+              <table className="w-full text-xs">
+                <thead>
+                  <tr className="text-theme-text-tertiary">
+                    <th className="text-left font-medium py-1">Class</th>
+                    <th className="text-left font-medium py-1">Infra Template</th>
+                    <th className="text-left font-medium py-1">Bootstrap Template</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {mpClasses.map((mp: any, i: number) => (
+                    <tr key={i} className="border-t border-theme-border">
+                      <td className="py-1 text-theme-text-secondary font-medium">{mp.class}</td>
+                      <td className="py-1 text-theme-text-secondary">{mp.template?.infrastructure?.ref?.kind || '-'}</td>
+                      <td className="py-1 text-theme-text-secondary">{mp.template?.bootstrap?.ref?.kind || '-'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </Section>
+      )}
+
+      {/* Variables */}
+      {variables.length > 0 && (
+        <Section title="Variables" icon={Settings}>
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-theme-text-tertiary">
+                <th className="text-left font-medium py-1">Name</th>
+                <th className="text-left font-medium py-1">Required</th>
+                <th className="text-left font-medium py-1">Schema Type</th>
+              </tr>
+            </thead>
+            <tbody>
+              {variables.map((v: any, i: number) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary font-medium">{v.name}</td>
+                  <td className="py-1 text-theme-text-secondary">{v.required ? 'Yes' : 'No'}</td>
+                  <td className="py-1 text-theme-text-secondary">{v.schema?.openAPIV3Schema?.type || '-'}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      {/* Patches */}
+      {patches.length > 0 && (
+        <Section title="Patches" icon={Settings} defaultExpanded={false}>
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-theme-text-tertiary">
+                <th className="text-left font-medium py-1">Name</th>
+                <th className="text-left font-medium py-1">Definitions</th>
+                <th className="text-left font-medium py-1">Enabled If</th>
+              </tr>
+            </thead>
+            <tbody>
+              {patches.map((p: any, i: number) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary font-medium">{p.name}</td>
+                  <td className="py-1 text-theme-text-secondary">{p.definitions?.length ?? 0}</td>
+                  <td className="py-1 text-theme-text-secondary font-mono text-[10px]">{p.enabledIf || '-'}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}