@skyhook-io/k8s-ui 1.3.2 → 1.4.1

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

@@ -1,4 +1,4 @@
-import { Server, Settings, Shield, Cpu, Tag } from 'lucide-react'
+import { Server, Settings, Shield, Cpu, Tag, BarChart3 } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import {
@@ -9,6 +9,16 @@ import {
   getNodePoolWeight,
 } from '../resource-utils-karpenter'
 
+function formatCpuCores(value: string): string {
+  // Karpenter status.resources CPU is typically in millicores (e.g. "12000m") or cores (e.g. "12")
+  if (value.endsWith('m')) {
+    const millis = parseInt(value, 10)
+    if (!isNaN(millis)) return String(millis / 1000)
+  }
+  return value
+}
+
+
 interface KarpenterNodePoolRendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
@@ -28,6 +38,9 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
   const templateLabels = spec.template?.metadata?.labels || {}
   const templateExpireAfter = spec.template?.spec?.expireAfter
   const nodeClassRef = spec.template?.spec?.nodeClassRef
+  const templateTaints = spec.template?.spec?.taints || []
+  const templateStartupTaints = spec.template?.spec?.startupTaints || []
+  const statusResources = status.resources || {}
 
   return (
     <>
@@ -77,6 +90,26 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
         </PropertyList>
       </Section>
 
+      {/* Resource Usage — from status.resources vs spec.limits */}
+      {(statusResources.cpu || statusResources.memory) && (
+        <Section title="Resource Usage" icon={BarChart3} defaultExpanded>
+          <PropertyList>
+            {statusResources.cpu && (
+              <Property
+                label="CPU"
+                value={`${formatCpuCores(statusResources.cpu)}${spec.limits?.cpu ? ` / ${formatCpuCores(spec.limits.cpu)}` : ''}`}
+              />
+            )}
+            {statusResources.memory && (
+              <Property
+                label="Memory"
+                value={`${statusResources.memory}${spec.limits?.memory ? ` / ${spec.limits.memory}` : ''}`}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
       {/* Disruption */}
       <Section title="Disruption" icon={Shield}>
         <PropertyList>
@@ -118,6 +151,38 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
         </Section>
       )}
 
+      {/* Template Taints */}
+      {templateTaints.length > 0 && (
+        <Section title={`Template Taints (${templateTaints.length})`} icon={Shield} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {templateTaints.map((taint: any, i: number) => (
+              <span
+                key={i}
+                className="badge-sm bg-theme-hover text-theme-text-secondary"
+              >
+                {taint.key}={taint.value || ''}:{taint.effect || ''}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Template Startup Taints */}
+      {templateStartupTaints.length > 0 && (
+        <Section title={`Startup Taints (${templateStartupTaints.length})`} icon={Shield} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {templateStartupTaints.map((taint: any, i: number) => (
+              <span
+                key={i}
+                className="badge-sm bg-theme-hover text-theme-text-secondary"
+              >
+                {taint.key}={taint.value || ''}:{taint.effect || ''}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
       {/* Requirements */}
       {requirements.length > 0 && (
         <Section title={`Requirements (${requirements.length})`} icon={Settings} defaultExpanded>

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

@@ -46,6 +46,9 @@ export function KedaScaledJobRenderer({ data }: KedaScaledJobRendererProps) {
           {spec.failedJobsHistoryLimit !== undefined && (
             <Property label="Failure History" value={String(spec.failedJobsHistoryLimit)} />
           )}
+          {spec.minReplicaCount !== undefined && (
+            <Property label="Min Replicas" value={String(spec.minReplicaCount)} />
+          )}
           {spec.maxReplicaCount !== undefined && (
             <Property label="Max Replicas" value={String(spec.maxReplicaCount)} />
           )}

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

@@ -1,4 +1,4 @@
-import { Cpu } from 'lucide-react'
+import { Cpu, Settings } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import {
@@ -12,6 +12,16 @@ import {
   getScaledObjectCooldownPeriod,
 } from '../resource-utils-keda'
 
+function summarizeScalingPolicies(policies: any[] | undefined, periodSeconds?: number): string {
+  if (!policies || policies.length === 0) return '-'
+  return policies.map((p: any) => {
+    const value = p.value ?? '?'
+    const type = p.type === 'Percent' ? '%' : ` pod${value !== 1 ? 's' : ''}`
+    const period = p.periodSeconds ?? periodSeconds ?? '?'
+    return `max ${value}${type}/${period}s`
+  }).join(', ')
+}
+
 interface KedaScaledObjectRendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
@@ -131,6 +141,50 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
         </Section>
       )}
 
+      {/* Advanced section */}
+      {data.spec?.advanced && (
+        <Section title="Advanced" icon={Settings} defaultExpanded={false}>
+          <PropertyList>
+            {data.spec.advanced.restoreToOriginalReplicaCount != null && (
+              <Property
+                label="Restore Original Replicas"
+                value={data.spec.advanced.restoreToOriginalReplicaCount ? 'Yes' : 'No'}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleUp && (
+              <Property
+                label="Scale Up"
+                value={summarizeScalingPolicies(
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleUp.policies,
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleUp.stabilizationWindowSeconds
+                )}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleDown && (
+              <Property
+                label="Scale Down"
+                value={summarizeScalingPolicies(
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleDown.policies,
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleDown.stabilizationWindowSeconds
+                )}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleUp?.stabilizationWindowSeconds != null && (
+              <Property
+                label="Scale Up Stabilization"
+                value={`${data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleUp.stabilizationWindowSeconds}s`}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleDown?.stabilizationWindowSeconds != null && (
+              <Property
+                label="Scale Down Stabilization"
+                value={`${data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleDown.stabilizationWindowSeconds}s`}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
       <ConditionsSection conditions={conditions} />
     </>
   )

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

@@ -19,6 +19,7 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
   const vault = spec.hashiCorpVault
   const azureKeyVault = spec.azureKeyVault
   const awsSecretManager = spec.awsSecretManager
+  const gcpSecretManager = spec.gcpSecretManager
   const podIdentity = spec.podIdentity
 
   return (
@@ -145,6 +146,28 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
         </Section>
       )}
 
+      {/* GCP Secret Manager */}
+      {gcpSecretManager && (
+        <Section title="GCP Secret Manager" icon={Cloud}>
+          <PropertyList>
+            {gcpSecretManager.credentials?.clientSecret?.name && (
+              <Property label="Credentials Secret" value={gcpSecretManager.credentials.clientSecret.name} />
+            )}
+          </PropertyList>
+          {gcpSecretManager.secrets && gcpSecretManager.secrets.length > 0 && (
+            <div className="mt-2 space-y-1">
+              <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Secrets</div>
+              {gcpSecretManager.secrets.map((s: any, i: number) => (
+                <div key={i} className="card-inner text-sm">
+                  <span className="text-theme-text-primary font-medium">{s.parameter}</span>
+                  <span className="text-theme-text-secondary ml-2">{s.id}{s.version ? ` (v${s.version})` : ''}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </Section>
+      )}
+
       {conditions.length > 0 && <ConditionsSection conditions={conditions} />}
     </>
   )

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

@@ -1,14 +1,15 @@
-import { Layers, FolderTree } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
+import { Layers, FolderTree, GitBranch } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts, ResourceLink } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { GitOpsStatusBadge, ManagedResourcesList, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, parseFluxInventory, type FluxCondition } from '../../../types/gitops'
 
 interface KustomizationRendererProps {
   data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
-export function KustomizationRenderer({ data }: KustomizationRendererProps) {
+export function KustomizationRenderer({ data, onNavigate }: KustomizationRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const conditions = (status.conditions || []) as FluxCondition[]
@@ -39,6 +40,23 @@ export function KustomizationRenderer({ data }: KustomizationRendererProps) {
     })
   }
 
+  // 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.`,
+    })
+  }
+
+  // Dependencies
+  const dependsOn: Array<{ name: string; namespace?: string }> = spec.dependsOn || []
+
   // Source reference
   const sourceRef = spec.sourceRef || {}
 
@@ -94,6 +112,23 @@ export function KustomizationRenderer({ data }: KustomizationRendererProps) {
         </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="kustomizations"
+                namespace={dep.namespace || data.metadata?.namespace || ''}
+                onNavigate={onNavigate}
+              />
+            ))}
+          </div>
+        </Section>
+      )}
+
       {/* Health checks */}
       {spec.healthChecks && spec.healthChecks.length > 0 && (
         <Section title={`Health Checks (${spec.healthChecks.length})`} defaultExpanded={false}>

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

@@ -0,0 +1,277 @@
+import { clsx } from 'clsx'
+import { Tooltip } from '../../ui/Tooltip'
+
+interface NetworkPolicyDiagramProps {
+  spec: any
+}
+
+/**
+ * Visual flow diagram for a NetworkPolicy.
+ * Three-column layout: Sources -> Target -> Destinations
+ * Each rule is a horizontal band. Peers within a rule are OR'd (stacked).
+ * Pure CSS/SVG — no ReactFlow needed for this static diagram.
+ */
+export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
+  const podSelector = spec.podSelector || {}
+  const matchLabels = podSelector.matchLabels || {}
+  const policyTypes: string[] = spec.policyTypes || []
+  const ingress: any[] | undefined = spec.ingress
+  const egress: any[] | undefined = spec.egress
+
+  const hasIngress = policyTypes.includes('Ingress')
+  const hasEgress = policyTypes.includes('Egress')
+  const targetLabel = Object.keys(matchLabels).length > 0
+    ? Object.entries(matchLabels).map(([k, v]) => `${k}=${v}`).join(', ')
+    : 'All pods'
+
+  const ingressDenied = hasIngress && (!ingress || ingress.length === 0)
+  const egressDenied = hasEgress && (!egress || egress.length === 0)
+
+  return (
+    <div className="card-inner-lg space-y-3">
+      {/* Ingress flows */}
+      {hasIngress && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-blue-500" />
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-blue-400">Ingress</span>
+          </div>
+          {ingressDenied ? (
+            <FlowRow
+              sources={[{ label: 'All traffic', type: 'deny' as const }]}
+              target={targetLabel}
+              ports={[]}
+              direction="ingress"
+              denied
+            />
+          ) : (
+            ingress?.map((rule, i) => (
+              <FlowRow
+                key={i}
+                sources={extractPeers(rule.from)}
+                target={targetLabel}
+                ports={extractPorts(rule.ports)}
+                direction="ingress"
+              />
+            ))
+          )}
+        </div>
+      )}
+
+      {/* Egress flows */}
+      {hasEgress && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-purple-500" />
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-purple-400">Egress</span>
+          </div>
+          {egressDenied ? (
+            <FlowRow
+              sources={[{ label: 'All traffic', type: 'deny' as const }]}
+              target={targetLabel}
+              ports={[]}
+              direction="egress"
+              denied
+            />
+          ) : (
+            egress?.map((rule, i) => (
+              <FlowRow
+                key={i}
+                sources={extractPeers(rule.to)}
+                target={targetLabel}
+                ports={extractPorts(rule.ports)}
+                direction="egress"
+              />
+            ))
+          )}
+        </div>
+      )}
+
+      {!hasIngress && !hasEgress && (
+        <div className="text-xs text-theme-text-tertiary text-center py-2">No policy types specified</div>
+      )}
+    </div>
+  )
+}
+
+interface PeerInfo {
+  label: string
+  sublabel?: string
+  type: 'pod' | 'namespace' | 'cidr' | 'all' | 'deny' | 'combined'
+}
+
+function extractPeers(peers: any[] | undefined): PeerInfo[] {
+  if (!peers || peers.length === 0) {
+    return [{ label: 'Any source', type: 'all' }]
+  }
+  return peers.map(peer => {
+    const hasPodSel = peer.podSelector !== undefined
+    const hasNsSel = peer.namespaceSelector !== undefined
+    const hasIpBlock = peer.ipBlock !== undefined
+
+    if (hasPodSel && hasNsSel) {
+      // AND: both must match
+      const podLabels = formatSelector(peer.podSelector)
+      const nsLabels = formatSelector(peer.namespaceSelector)
+      return {
+        label: podLabels,
+        sublabel: `in ${nsLabels === 'all' ? 'any namespace' : nsLabels}`,
+        type: 'combined' as const,
+      }
+    }
+    if (hasPodSel) {
+      return { label: formatSelector(peer.podSelector), type: 'pod' as const }
+    }
+    if (hasNsSel) {
+      const nsLabels = formatSelector(peer.namespaceSelector)
+      return { label: nsLabels === 'all' ? 'All namespaces' : nsLabels, type: 'namespace' as const }
+    }
+    if (hasIpBlock) {
+      const cidr = peer.ipBlock.cidr || '?'
+      const except = peer.ipBlock.except
+      return {
+        label: cidr,
+        sublabel: except?.length ? `except ${except.join(', ')}` : undefined,
+        type: 'cidr' as const,
+      }
+    }
+    return { label: '?', type: 'all' as const }
+  })
+}
+
+function extractPorts(ports: any[] | undefined): string[] {
+  if (!ports || ports.length === 0) return []
+  return ports.map((p: any) => {
+    const proto = p.protocol || 'TCP'
+    const port = p.port || '*'
+    const endPort = p.endPort
+    return endPort ? `${proto}/${port}-${endPort}` : `${proto}/${port}`
+  })
+}
+
+function formatSelector(selector: any): string {
+  const labels = selector?.matchLabels || {}
+  if (Object.keys(labels).length === 0) return 'all'
+  return Object.entries(labels).map(([k, v]) => `${k}=${v}`).join(', ')
+}
+
+// Color coding for peer types
+const PEER_STYLES = {
+  pod: 'border-emerald-500/30 bg-emerald-500/8',
+  namespace: 'border-sky-500/30 bg-sky-500/8',
+  cidr: 'border-amber-500/30 bg-amber-500/8',
+  combined: 'border-emerald-500/30 bg-emerald-500/8',
+  all: 'border-theme-border bg-theme-elevated/50',
+  deny: 'border-red-500/30 bg-red-500/8',
+} as const
+
+const PEER_DOT = {
+  pod: 'bg-emerald-500',
+  namespace: 'bg-sky-500',
+  cidr: 'bg-amber-500',
+  combined: 'bg-emerald-500',
+  all: 'bg-theme-text-tertiary',
+  deny: 'bg-red-500',
+} as const
+
+function FlowRow({
+  sources,
+  target,
+  ports,
+  direction,
+  denied = false,
+}: {
+  sources: PeerInfo[]
+  target: string
+  ports: string[]
+  direction: 'ingress' | 'egress'
+  denied?: boolean
+}) {
+  const isIngress = direction === 'ingress'
+
+  const sourceNodes = (
+    <div className="flex-1 min-w-0 space-y-1">
+      {sources.map((peer, i) => (
+        <div key={i}>
+          {i > 0 && (
+            <div className="text-[9px] text-theme-text-tertiary uppercase tracking-widest text-center my-0.5">or</div>
+          )}
+          <Tooltip content={peer.sublabel ? `${peer.label}\n${peer.sublabel}` : peer.label} position="top">
+            <div
+              className={clsx(
+                'rounded-md border px-2 py-1.5',
+                PEER_STYLES[peer.type],
+              )}
+            >
+              <div className="flex items-center gap-1.5">
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', PEER_DOT[peer.type])} />
+                <span className={clsx('text-[11px] font-medium truncate', denied && 'line-through text-red-400')}>
+                  {peer.label}
+                </span>
+              </div>
+              {peer.sublabel && (
+                <div className="text-[10px] text-theme-text-tertiary ml-3 truncate">{peer.sublabel}</div>
+              )}
+            </div>
+          </Tooltip>
+        </div>
+      ))}
+    </div>
+  )
+
+  const targetNode = (
+    <Tooltip content={target} position="top">
+      <div className="rounded-md border border-indigo-500/30 bg-indigo-500/8 px-2 py-1.5 flex-1 min-w-0">
+        <div className="flex items-center gap-1.5">
+          <span className="w-1.5 h-1.5 rounded-full shrink-0 bg-indigo-500" />
+          <span className="text-[11px] font-medium truncate">{target}</span>
+        </div>
+      </div>
+    </Tooltip>
+  )
+
+  const arrow = (
+    <div className="flex flex-col items-center justify-center shrink-0 w-10">
+      {/* Arrow line with optional port label */}
+      <svg width="40" height="20" viewBox="0 0 40 20" className="overflow-visible">
+        <defs>
+          <marker id={`arrow-${direction}-${denied ? 'denied' : 'ok'}`} markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+            <path d="M0,0 L6,3 L0,6" fill="none" stroke={denied ? '#ef4444' : direction === 'ingress' ? '#3b82f6' : '#a855f7'} strokeWidth="1.5" />
+          </marker>
+        </defs>
+        <line
+          x1="2" y1="10" x2="32" y2="10"
+          stroke={denied ? '#ef4444' : direction === 'ingress' ? '#3b82f6' : '#a855f7'}
+          strokeWidth="1.5"
+          strokeDasharray={denied ? '3 2' : undefined}
+          markerEnd={`url(#arrow-${direction}-${denied ? 'denied' : 'ok'})`}
+        />
+      </svg>
+      {ports.length > 0 && (
+        <div className="flex flex-wrap justify-center gap-0.5 mt-0.5">
+          {ports.map((p, i) => (
+            <span key={i} className="text-[8px] text-theme-text-tertiary font-mono leading-none">{p}</span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <div className="flex items-center gap-1">
+      {isIngress ? (
+        <>
+          {sourceNodes}
+          {arrow}
+          {targetNode}
+        </>
+      ) : (
+        <>
+          {targetNode}
+          {arrow}
+          {sourceNodes}
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -1,6 +1,7 @@
-import { Shield, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react'
+import { Shield, ArrowDownToLine, ArrowUpFromLine, GitFork } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Section, LabelSelectorDisplay } from '../../ui/drawer-components'
+import { NetworkPolicyDiagram } from './NetworkPolicyDiagram'
 
 interface NetworkPolicyRendererProps {
   data: any
@@ -13,35 +14,24 @@ export function NetworkPolicyRenderer({ data }: NetworkPolicyRendererProps) {
   const ingress: any[] | undefined = spec.ingress
   const egress: any[] | undefined = spec.egress
 
-  const matchLabels = podSelector.matchLabels || {}
-  const hasMatchLabels = Object.keys(matchLabels).length > 0
   const hasIngress = policyTypes.includes('Ingress')
   const hasEgress = policyTypes.includes('Egress')
 
+  const hasDiagramContent = hasIngress || hasEgress
+
   return (
     <>
+      {hasDiagramContent && (
+        <Section title="Policy Flow" icon={GitFork} defaultExpanded>
+          <NetworkPolicyDiagram spec={spec} />
+        </Section>
+      )}
+
       <Section title="Target" icon={Shield}>
-        <PropertyList>
-          <Property
-            label="Pod Selector"
-            value={hasMatchLabels ? undefined : 'All pods in namespace'}
-          />
-        </PropertyList>
-        {hasMatchLabels && (
-          <div className="mt-2">
-            <div className="text-xs text-theme-text-tertiary mb-1">Pod Selector</div>
-            <div className="flex flex-wrap gap-1">
-              {Object.entries(matchLabels).map(([k, v]) => (
-                <span
-                  key={k}
-                  className="badge bg-theme-elevated text-theme-text-secondary"
-                >
-                  {k}={String(v)}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
+        <div className="mt-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">Pod Selector</div>
+          <LabelSelectorDisplay selector={podSelector} emptyText="All pods in namespace" />
+        </div>
         {policyTypes.length > 0 && (
           <div className="mt-2">
             <div className="text-xs text-theme-text-tertiary mb-1">Policy Types</div>
@@ -143,49 +133,19 @@ function IngressEgressRuleCard({
 
 function PeerEntry({ peer }: { peer: any }) {
   if (peer.podSelector) {
-    const labels = peer.podSelector.matchLabels || {}
-    const hasLabels = Object.keys(labels).length > 0
     return (
       <div className="text-sm">
         <span className="text-theme-text-secondary text-xs">podSelector: </span>
-        {hasLabels ? (
-          <span className="inline-flex flex-wrap gap-1 align-middle">
-            {Object.entries(labels).map(([k, v]) => (
-              <span
-                key={k}
-                className="badge bg-theme-elevated text-theme-text-secondary"
-              >
-                {k}={String(v)}
-              </span>
-            ))}
-          </span>
-        ) : (
-          <span className="text-xs text-theme-text-tertiary">all pods</span>
-        )}
+        <LabelSelectorDisplay selector={peer.podSelector} emptyText="all pods" inline />
       </div>
     )
   }
 
   if (peer.namespaceSelector) {
-    const labels = peer.namespaceSelector.matchLabels || {}
-    const hasLabels = Object.keys(labels).length > 0
     return (
       <div className="text-sm">
         <span className="text-theme-text-secondary text-xs">namespaceSelector: </span>
-        {hasLabels ? (
-          <span className="inline-flex flex-wrap gap-1 align-middle">
-            {Object.entries(labels).map(([k, v]) => (
-              <span
-                key={k}
-                className="badge bg-theme-elevated text-theme-text-secondary"
-              >
-                {k}={String(v)}
-              </span>
-            ))}
-          </span>
-        ) : (
-          <span className="text-xs text-theme-text-tertiary">all namespaces</span>
-        )}
+        <LabelSelectorDisplay selector={peer.namespaceSelector} emptyText="all namespaces" inline />
       </div>
     )
   }