@skyhook-io/k8s-ui 1.4.0 → 1.4.2

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

@@ -1,5 +1,5 @@
 import { Globe, AlertTriangle } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import {
   getClusterExternalSecretStatus,
   getClusterExternalSecretProvisionedNamespaces,
@@ -10,9 +10,10 @@ import {
 
 interface ClusterExternalSecretRendererProps {
   data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
-export function ClusterExternalSecretRenderer({ data }: ClusterExternalSecretRendererProps) {
+export function ClusterExternalSecretRenderer({ data, onNavigate }: ClusterExternalSecretRendererProps) {
   const status = data.status || {}
   const conditions = status.conditions || []
 
@@ -26,6 +27,8 @@ export function ClusterExternalSecretRenderer({ data }: ClusterExternalSecretRen
   const esSpec = data.spec?.externalSecretSpec
   const refreshInterval = esSpec?.refreshInterval || '-'
   const storeRef = esSpec?.secretStoreRef
+  const storeName = storeRef?.name
+  const storeKindSingular = storeRef?.kind || 'SecretStore'
   const dataCount = (esSpec?.data || []).length
   const dataFromCount = (esSpec?.dataFrom || []).length
 
@@ -119,7 +122,11 @@ export function ClusterExternalSecretRenderer({ data }: ClusterExternalSecretRen
           <Property label="Refresh Interval" value={refreshInterval} />
           {storeRef && (
             <>
-              <Property label="Store Name" value={storeRef.name || '-'} />
+              <Property label="Store Name" value={
+                storeName && storeKindSingular === 'ClusterSecretStore'
+                  ? <ResourceLink name={storeName} kind={storeKindSingular} namespace="" onNavigate={onNavigate} />
+                  : storeName || '-'
+              } />
               <Property label="Store Kind" value={storeRef.kind || 'SecretStore'} />
             </>
           )}

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

@@ -1,6 +1,6 @@
 import { Shield, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, LabelSelectorDisplay } from '../../ui/drawer-components'
 
 interface ClusterNetworkPolicyRendererProps {
   data: any
@@ -24,7 +24,7 @@ export function ClusterNetworkPolicyRenderer({ data }: ClusterNetworkPolicyRende
         {subject.namespaces && (
           <div className="mt-2">
             <div className="text-xs text-theme-text-tertiary mb-1">Namespace Selector</div>
-            <SelectorBadges selector={subject.namespaces} />
+            <LabelSelectorDisplay selector={subject.namespaces} />
           </div>
         )}
         {subject.pods && (
@@ -33,13 +33,13 @@ export function ClusterNetworkPolicyRenderer({ data }: ClusterNetworkPolicyRende
             {subject.pods.namespaceSelector && (
               <div className="mb-1">
                 <span className="text-xs text-theme-text-secondary">namespaces: </span>
-                <SelectorBadges selector={subject.pods.namespaceSelector} />
+                <LabelSelectorDisplay selector={subject.pods.namespaceSelector} inline />
               </div>
             )}
             {subject.pods.podSelector && (
               <div>
                 <span className="text-xs text-theme-text-secondary">pods: </span>
-                <SelectorBadges selector={subject.pods.podSelector} />
+                <LabelSelectorDisplay selector={subject.pods.podSelector} inline />
               </div>
             )}
           </div>
@@ -121,7 +121,7 @@ function AdminPeerEntry({ peer }: { peer: any }) {
     return (
       <div className="text-sm">
         <span className="text-theme-text-secondary text-xs">namespaces: </span>
-        <SelectorBadges selector={peer.namespaces} />
+        <LabelSelectorDisplay selector={peer.namespaces} inline />
       </div>
     )
   }
@@ -131,13 +131,13 @@ function AdminPeerEntry({ peer }: { peer: any }) {
         {peer.pods.namespaceSelector && (
           <div>
             <span className="text-theme-text-secondary text-xs">namespaces: </span>
-            <SelectorBadges selector={peer.pods.namespaceSelector} />
+            <LabelSelectorDisplay selector={peer.pods.namespaceSelector} inline />
           </div>
         )}
         {peer.pods.podSelector && (
           <div>
             <span className="text-theme-text-secondary text-xs">pods: </span>
-            <SelectorBadges selector={peer.pods.podSelector} />
+            <LabelSelectorDisplay selector={peer.pods.podSelector} inline />
           </div>
         )}
       </div>
@@ -158,17 +158,3 @@ function AdminPeerEntry({ peer }: { peer: any }) {
   return null
 }
 
-function SelectorBadges({ selector }: { selector: any }) {
-  const matchLabels = selector?.matchLabels || {}
-  const hasLabels = Object.keys(matchLabels).length > 0
-  if (!hasLabels) return <span className="text-xs text-theme-text-tertiary">all</span>
-  return (
-    <span className="inline-flex flex-wrap gap-1 align-middle">
-      {Object.entries(matchLabels).map(([k, v]) => (
-        <span key={k} className="badge bg-theme-elevated text-theme-text-secondary">
-          {k}={String(v)}
-        </span>
-      ))}
-    </span>
-  )
-}

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/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