@skyhook-io/k8s-ui 1.3.2 → 1.4.1

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

@@ -1,4 +1,4 @@
-import { Shield, AlertTriangle, Globe, Lock, Key } from 'lucide-react'
+import { Shield, AlertTriangle, Globe, Lock, Key, Server } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
 
@@ -7,6 +7,15 @@ function detectIssuerType(spec: any): string {
   if (spec.ca) return 'CA'
   if (spec.selfSigned !== undefined) return 'SelfSigned'
   if (spec.vault) return 'Vault'
+  if (spec.venafi) return 'Venafi'
+  return 'Unknown'
+}
+
+function getVaultAuthMethod(auth: any): string {
+  if (!auth) return 'Unknown'
+  if (auth.tokenSecretRef) return 'Token'
+  if (auth.appRole) return 'AppRole'
+  if (auth.kubernetes) return 'Kubernetes'
   return 'Unknown'
 }
 
@@ -138,6 +147,55 @@ function IssuerRendererBase({ data, kind }: { data: any; kind: string }) {
         </Section>
       )}
 
+      {/* Vault section */}
+      {spec.vault && (
+        <Section title="Vault Configuration" icon={Server}>
+          <PropertyList>
+            <Property label="Server" value={spec.vault.server} />
+            <Property label="Path" value={spec.vault.path} />
+            <Property label="Auth Method" value={getVaultAuthMethod(spec.vault.auth)} />
+            {spec.vault.auth?.appRole?.roleId && (
+              <Property label="AppRole Role ID" value={spec.vault.auth.appRole.roleId} />
+            )}
+            {spec.vault.auth?.appRole?.secretRef?.name && (
+              <Property label="AppRole Secret Ref" value={spec.vault.auth.appRole.secretRef.name} />
+            )}
+            {spec.vault.auth?.tokenSecretRef?.name && (
+              <Property label="Token Secret Ref" value={spec.vault.auth.tokenSecretRef.name} />
+            )}
+            {spec.vault.auth?.kubernetes?.role && (
+              <Property label="K8s Auth Role" value={spec.vault.auth.kubernetes.role} />
+            )}
+            {spec.vault.auth?.kubernetes?.secretRef?.name && (
+              <Property label="K8s Secret Ref" value={spec.vault.auth.kubernetes.secretRef.name} />
+            )}
+            <Property label="Custom CA" value={spec.vault.caBundle ? 'Yes' : 'No'} />
+            {spec.vault.namespace && (
+              <Property label="Vault Namespace" value={spec.vault.namespace} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Venafi section */}
+      {spec.venafi && (
+        <Section title="Venafi Configuration" icon={Shield}>
+          <PropertyList>
+            <Property label="Zone" value={spec.venafi.zone} />
+            <Property
+              label="Platform"
+              value={spec.venafi.cloud ? 'Cloud' : spec.venafi.tpp ? 'TPP' : '-'}
+            />
+            {spec.venafi.cloud?.url && (
+              <Property label="Cloud URL" value={spec.venafi.cloud.url} />
+            )}
+            {spec.venafi.tpp?.url && (
+              <Property label="TPP URL" value={spec.venafi.tpp.url} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
       {/* Conditions */}
       <ConditionsSection conditions={conditions} />
     </>

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

@@ -0,0 +1,160 @@
+import { Shield, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, LabelSelectorDisplay } from '../../ui/drawer-components'
+
+interface ClusterNetworkPolicyRendererProps {
+  data: any
+}
+
+export function ClusterNetworkPolicyRenderer({ data }: ClusterNetworkPolicyRendererProps) {
+  const spec = data.spec || {}
+  const subject = spec.subject || {}
+  const priority = spec.priority
+  const ingress: any[] | undefined = spec.ingress
+  const egress: any[] | undefined = spec.egress
+
+  return (
+    <>
+      <Section title="Subject" icon={Shield}>
+        <PropertyList>
+          {priority !== undefined && (
+            <Property label="Priority" value={String(priority)} />
+          )}
+        </PropertyList>
+        {subject.namespaces && (
+          <div className="mt-2">
+            <div className="text-xs text-theme-text-tertiary mb-1">Namespace Selector</div>
+            <LabelSelectorDisplay selector={subject.namespaces} />
+          </div>
+        )}
+        {subject.pods && (
+          <div className="mt-2">
+            <div className="text-xs text-theme-text-tertiary mb-1">Pod Selector</div>
+            {subject.pods.namespaceSelector && (
+              <div className="mb-1">
+                <span className="text-xs text-theme-text-secondary">namespaces: </span>
+                <LabelSelectorDisplay selector={subject.pods.namespaceSelector} inline />
+              </div>
+            )}
+            {subject.pods.podSelector && (
+              <div>
+                <span className="text-xs text-theme-text-secondary">pods: </span>
+                <LabelSelectorDisplay selector={subject.pods.podSelector} inline />
+              </div>
+            )}
+          </div>
+        )}
+      </Section>
+
+      {ingress && ingress.length > 0 && (
+        <Section title={`Ingress Rules (${ingress.length})`} icon={ArrowDownToLine} defaultExpanded>
+          <div className="space-y-3">
+            {ingress.map((rule: any, i: number) => (
+              <AdminRuleCard key={i} rule={rule} direction="from" />
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {egress && egress.length > 0 && (
+        <Section title={`Egress Rules (${egress.length})`} icon={ArrowUpFromLine} defaultExpanded>
+          <div className="space-y-3">
+            {egress.map((rule: any, i: number) => (
+              <AdminRuleCard key={i} rule={rule} direction="to" />
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}
+
+function AdminRuleCard({ rule, direction }: { rule: any; direction: 'from' | 'to' }) {
+  const action = rule.action || 'Allow'
+  const name = rule.name || ''
+  const peers: any[] = rule[direction] || []
+  const ports: any[] = rule.ports || []
+
+  const actionColor = action === 'Deny'
+    ? 'bg-red-500/20 text-red-400 border-red-500/30'
+    : action === 'Pass'
+      ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
+      : 'bg-green-500/20 text-green-400 border-green-500/30'
+
+  return (
+    <div className="card-inner-lg">
+      <div className="flex items-center gap-2 mb-2">
+        <span className={clsx('badge', actionColor)}>{action}</span>
+        {name && <span className="text-xs text-theme-text-secondary">{name}</span>}
+      </div>
+
+      {peers.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1 capitalize">{direction}</div>
+          <div className="space-y-1.5">
+            {peers.map((peer: any, j: number) => (
+              <AdminPeerEntry key={j} peer={peer} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {ports.length > 0 && (
+        <div>
+          <div className="text-xs text-theme-text-tertiary mb-1">Ports</div>
+          <div className="flex flex-wrap gap-1">
+            {ports.map((port: any, j: number) => (
+              <span key={j} className="badge bg-theme-elevated text-theme-text-secondary">
+                {port.portNumber?.protocol || 'TCP'}/{port.portNumber?.port || port.portRange?.start || '*'}
+                {port.portRange && `-${port.portRange.end}`}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AdminPeerEntry({ peer }: { peer: any }) {
+  if (peer.namespaces) {
+    return (
+      <div className="text-sm">
+        <span className="text-theme-text-secondary text-xs">namespaces: </span>
+        <LabelSelectorDisplay selector={peer.namespaces} inline />
+      </div>
+    )
+  }
+  if (peer.pods) {
+    return (
+      <div className="text-sm space-y-0.5">
+        {peer.pods.namespaceSelector && (
+          <div>
+            <span className="text-theme-text-secondary text-xs">namespaces: </span>
+            <LabelSelectorDisplay selector={peer.pods.namespaceSelector} inline />
+          </div>
+        )}
+        {peer.pods.podSelector && (
+          <div>
+            <span className="text-theme-text-secondary text-xs">pods: </span>
+            <LabelSelectorDisplay selector={peer.pods.podSelector} inline />
+          </div>
+        )}
+      </div>
+    )
+  }
+  if (peer.networks) {
+    return (
+      <div className="text-sm">
+        <span className="text-theme-text-secondary text-xs">networks: </span>
+        <span className="inline-flex flex-wrap gap-1">
+          {peer.networks.map((n: string, i: number) => (
+            <span key={i} className="badge bg-theme-elevated text-theme-text-secondary">{n}</span>
+          ))}
+        </span>
+      </div>
+    )
+  }
+  return null
+}
+

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

@@ -76,14 +76,12 @@ export function ExternalSecretRenderer({ data, onNavigate }: ExternalSecretRende
         <PropertyList>
           <Property label="Store Name" value={(() => {
             if (store.name && store.name !== '-') {
-              const storeKind = store.kind === 'ClusterSecretStore'
-                ? 'clustersecretstores'
-                : 'secretstores'
+              const storeKindSingular = store.kind || 'SecretStore'
               return (
                 <ResourceLink
                   name={store.name}
-                  kind={storeKind}
-                  namespace={store.kind === 'ClusterSecretStore' ? '' : (data.metadata?.namespace || '')}
+                  kind={storeKindSingular}
+                  namespace={storeKindSingular === 'ClusterSecretStore' ? '' : (data.metadata?.namespace || '')}
                   onNavigate={onNavigate}
                 />
               )

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

@@ -1,15 +1,16 @@
-import { Package, Settings, CheckCircle2, History } from 'lucide-react'
+import { Package, Settings, CheckCircle2, History, FileCode2, GitBranch } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts, ResourceLink } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
 
 interface FluxHelmReleaseRendererProps {
   data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
-export function FluxHelmReleaseRenderer({ data }: FluxHelmReleaseRendererProps) {
+export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const conditions = (status.conditions || []) as FluxCondition[]
@@ -40,6 +41,28 @@ export function FluxHelmReleaseRenderer({ data }: FluxHelmReleaseRendererProps)
     })
   }
 
+  // Revision mismatch detection — only flag when Ready=False to avoid false positives during active reconciliation
+  const isReadyFalse = conditions.find((c: any) => c.type === 'Ready')?.status === 'False'
+  if (
+    isReadyFalse &&
+    status.lastAppliedRevision &&
+    status.lastAttemptedRevision &&
+    status.lastAppliedRevision !== status.lastAttemptedRevision
+  ) {
+    problems.push({
+      color: 'red',
+      message: `Revision mismatch: attempted ${status.lastAttemptedRevision} but applied ${status.lastAppliedRevision} — the latest reconciliation failed.`,
+    })
+  }
+
+  // Values info
+  const valuesFrom = spec.valuesFrom || []
+  const values = spec.values || {}
+  const valueKeys = Object.keys(values)
+
+  // Dependencies
+  const dependsOn: Array<{ name: string; namespace?: string }> = spec.dependsOn || []
+
   // Chart reference
   const chartRef = spec.chart?.spec || {}
   const sourceRef = chartRef.sourceRef || {}
@@ -97,6 +120,71 @@ export function FluxHelmReleaseRenderer({ data }: FluxHelmReleaseRendererProps)
         </PropertyList>
       </Section>
 
+      {/* Dependencies */}
+      {dependsOn.length > 0 && (
+        <Section title={`Dependencies (${dependsOn.length})`} icon={GitBranch}>
+          <div className="flex flex-wrap gap-1">
+            {dependsOn.map((dep, idx) => (
+              <ResourceLink
+                key={idx}
+                name={dep.name}
+                kind="helmreleases"
+                namespace={dep.namespace || data.metadata?.namespace || ''}
+                onNavigate={onNavigate}
+              />
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Values */}
+      {(valuesFrom.length > 0 || valueKeys.length > 0) && (
+        <Section title="Values" icon={FileCode2} defaultExpanded={valuesFrom.length > 0}>
+          {valuesFrom.length > 0 && (
+            <div className="mb-3">
+              <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1.5">
+                Values From
+              </div>
+              <div className="space-y-1">
+                {valuesFrom.map((ref: any, idx: number) => (
+                  <div key={idx} className="card-inner text-sm flex items-center gap-2 flex-wrap">
+                    <span className="badge-sm status-neutral">{ref.kind || 'ConfigMap'}</span>
+                    <ResourceLink
+                      name={ref.name}
+                      kind={ref.kind === 'Secret' ? 'secrets' : 'configmaps'}
+                      namespace={data.metadata?.namespace || ''}
+                      onNavigate={onNavigate}
+                    />
+                    {ref.valuesKey && (
+                      <span className="text-theme-text-tertiary text-xs">
+                        key: {ref.valuesKey}
+                      </span>
+                    )}
+                    {ref.targetPath && (
+                      <span className="text-theme-text-tertiary text-xs">
+                        path: {ref.targetPath}
+                      </span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          {valueKeys.length > 0 && (
+            <div>
+              <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1.5">
+                Inline Overrides ({valueKeys.length} {valueKeys.length === 1 ? 'key' : 'keys'})
+              </div>
+              <Section title={`${valueKeys.length} value ${valueKeys.length === 1 ? 'override' : 'overrides'}`} defaultExpanded={false}>
+                <pre className="text-xs text-theme-text-secondary font-mono bg-theme-elevated rounded-md p-2 overflow-x-auto max-h-48">
+                  {JSON.stringify(values, null, 2)}
+                </pre>
+              </Section>
+            </div>
+          )}
+        </Section>
+      )}
+
       {/* Install/Upgrade settings */}
       {(spec.install || spec.upgrade) && (
         <Section title="Install/Upgrade Settings" defaultExpanded={false}>

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

@@ -358,7 +358,7 @@ function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps)
           <div className="ml-5 mt-1 space-y-1">
             {simpleEntries.map(([k, v]) => (
               <div key={k} className="flex items-start gap-2 text-xs">
-                <span className="text-theme-text-tertiary w-28 shrink-0">{formatFieldName(k)}</span>
+                <span className="text-theme-text-tertiary w-40 shrink-0">{formatFieldName(k)}</span>
                 <span className="text-theme-text-secondary break-all">{formatValue(v)}</span>
               </div>
             ))}

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

@@ -1,6 +1,5 @@
-import { GitBranch, AlertTriangle, FolderGit, CheckCircle2 } from 'lucide-react'
-import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { GitBranch, FolderGit, CheckCircle2 } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { formatBytes } from '../../../utils/format'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
@@ -37,45 +36,7 @@ export function GitRepositoryRenderer({ data }: GitRepositoryRendererProps) {
 
   return (
     <>
-      {/* Problem alerts */}
-      {problems.map((problem, i) => (
-        <div
-          key={i}
-          className={clsx(
-            'mb-4 p-3 border rounded-lg',
-            problem.color === 'red'
-              ? 'bg-red-500/10 border-red-500/30'
-              : 'bg-yellow-500/10 border-yellow-500/30'
-          )}
-        >
-          <div className="flex items-start gap-2">
-            <AlertTriangle
-              className={clsx(
-                'w-4 h-4 mt-0.5 shrink-0',
-                problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-              )}
-            />
-            <div className="flex-1 min-w-0">
-              <div
-                className={clsx(
-                  'text-sm font-medium',
-                  problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-                )}
-              >
-                {problem.color === 'red' ? 'Issue Detected' : 'Warning'}
-              </div>
-              <div
-                className={clsx(
-                  'text-xs mt-1',
-                  problem.color === 'red' ? 'text-red-300/80' : 'text-yellow-300/80'
-                )}
-              >
-                {problem.message}
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
+      <ProblemAlerts problems={problems} />
 
       {/* Status section */}
       <Section title="Status">

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

@@ -1,6 +1,6 @@
-import { Database, AlertTriangle, CheckCircle2, Shield } from 'lucide-react'
+import { Database, CheckCircle2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { formatBytes } from '../../../utils/format'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
@@ -35,45 +35,7 @@ export function HelmRepositoryRenderer({ data }: HelmRepositoryRendererProps) {
 
   return (
     <>
-      {/* Problem alerts */}
-      {problems.map((problem, i) => (
-        <div
-          key={i}
-          className={clsx(
-            'mb-4 p-3 border rounded-lg',
-            problem.color === 'red'
-              ? 'bg-red-500/10 border-red-500/30'
-              : 'bg-yellow-500/10 border-yellow-500/30'
-          )}
-        >
-          <div className="flex items-start gap-2">
-            <AlertTriangle
-              className={clsx(
-                'w-4 h-4 mt-0.5 shrink-0',
-                problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-              )}
-            />
-            <div className="flex-1 min-w-0">
-              <div
-                className={clsx(
-                  'text-sm font-medium',
-                  problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-                )}
-              >
-                {problem.color === 'red' ? 'Issue Detected' : 'Warning'}
-              </div>
-              <div
-                className={clsx(
-                  'text-xs mt-1',
-                  problem.color === 'red' ? 'text-red-300/80' : 'text-yellow-300/80'
-                )}
-              >
-                {problem.message}
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
+      <ProblemAlerts problems={problems} />
 
       {/* Status section */}
       <Section title="Status">

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

@@ -1,5 +1,5 @@
-import { Server, HardDrive, Shield, Network } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Server, HardDrive, Shield, Network, Tag, Image } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, KeyValueBadgeList } from '../../ui/drawer-components'
 import { getEC2NodeClassStatus } from '../resource-utils-karpenter'
 
 interface KarpenterEC2NodeClassRendererProps {
@@ -20,6 +20,11 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
   const subnetTerms = spec.subnetSelectorTerms || []
   const sgTerms = spec.securityGroupSelectorTerms || []
   const metadataOptions = spec.metadataOptions
+  const statusAMIs = status.amis || []
+  const statusSubnets = status.subnets || []
+  const statusSecurityGroups = status.securityGroups || []
+  const specTags = spec.tags || {}
+  const instanceProfile = status.instanceProfile
 
   return (
     <>
@@ -42,6 +47,7 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
             />
           )}
           {spec.amiFamily && <Property label="AMI Family" value={spec.amiFamily} />}
+          {instanceProfile && <Property label="Instance Profile" value={instanceProfile} />}
         </PropertyList>
       </Section>
 
@@ -151,6 +157,64 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
         </Section>
       )}
 
+      {/* Resolved AMIs from status */}
+      {statusAMIs.length > 0 && (
+        <Section title={`Resolved AMIs (${statusAMIs.length})`} icon={Image} defaultExpanded>
+          <div className="space-y-2">
+            {statusAMIs.map((ami: any, i: number) => (
+              <div key={i} className="card-inner">
+                <div className="text-sm font-medium text-theme-text-primary mb-1">{ami.id || '(unknown AMI)'}</div>
+                {ami.name && (
+                  <div className="text-xs text-theme-text-tertiary mb-1">{ami.name}</div>
+                )}
+                {ami.requirements && ami.requirements.length > 0 && (
+                  <div className="flex flex-wrap gap-1">
+                    {ami.requirements.map((req: any, ri: number) => (
+                      <span key={ri} className="badge-sm bg-theme-hover text-theme-text-secondary">
+                        {req.key}: {req.values?.join(', ') || req.operator}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Resolved Subnets from status */}
+      {statusSubnets.length > 0 && (
+        <Section title={`Resolved Subnets (${statusSubnets.length})`} icon={Network} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {statusSubnets.map((subnet: any, i: number) => (
+              <span key={i} className="badge-sm bg-theme-hover text-theme-text-secondary">
+                {subnet.id}{subnet.zone ? ` (${subnet.zone})` : ''}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Resolved Security Groups from status */}
+      {statusSecurityGroups.length > 0 && (
+        <Section title={`Resolved Security Groups (${statusSecurityGroups.length})`} icon={Shield} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {statusSecurityGroups.map((sg: any, i: number) => (
+              <span key={i} className="badge-sm bg-theme-hover text-theme-text-secondary">
+                {sg.id}{sg.name ? ` (${sg.name})` : ''}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* EC2 Tags */}
+      {Object.keys(specTags).length > 0 && (
+        <Section title={`EC2 Tags (${Object.keys(specTags).length})`} icon={Tag} defaultExpanded>
+          <KeyValueBadgeList items={specTags} />
+        </Section>
+      )}
+
       <ConditionsSection conditions={conditions} />
     </>
   )

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

@@ -3,6 +3,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import {
+  CAPACITY_TYPE_BADGE,
   getNodeClaimStatus,
   getNodeClaimInstanceType,
   getNodeClaimNodeName,
@@ -35,6 +36,8 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
   const status = data.status || {}
   const conditions = status.conditions || []
 
+  const labels = data.metadata?.labels || {}
+
   const claimStatus = getNodeClaimStatus(data)
   const isNotReady = claimStatus.level === 'unhealthy'
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
@@ -42,6 +45,10 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
   const requirements = getNodeClaimRequirements(data)
   const nodeClassRef = getNodeClaimNodeClassRef(data)
   const expireAfter = getNodeClaimExpireAfter(data)
+  const capacityType = labels['karpenter.sh/capacity-type'] || ''
+  const zone = labels['topology.kubernetes.io/zone'] || ''
+  const arch = labels['kubernetes.io/arch'] || ''
+  const nodeName = getNodeClaimNodeName(data)
 
   // Provisioning steps for timeline
   const steps = [
@@ -66,7 +73,30 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
       <Section title="Instance" icon={Server}>
         <PropertyList>
           <Property label="Instance Type" value={getNodeClaimInstanceType(data)} />
-          <Property label="Node Name" value={getNodeClaimNodeName(data)} />
+          {capacityType && (
+            <Property
+              label="Capacity Type"
+              value={
+                <span className={clsx('badge-sm', CAPACITY_TYPE_BADGE[capacityType] || '')}>
+                  {capacityType}
+                </span>
+              }
+            />
+          )}
+          <Property
+            label="Node Name"
+            value={nodeName !== '-' ? (
+              <ResourceLink
+                name={nodeName}
+                kind="Node"
+                namespace=""
+                label={nodeName}
+                onNavigate={onNavigate}
+              />
+            ) : '-'}
+          />
+          {zone && <Property label="Zone" value={zone} />}
+          {arch && <Property label="Architecture" value={arch} />}
           <Property label="NodePool" value={getNodeClaimNodePoolRef(data)} />
           {nodeClassRef && (
             <Property