@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,321 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { AlertTriangle, Copy, Check, Shield, Pencil, Save, XCircle, RefreshCw } from 'lucide-react'
+import { clsx } from 'clsx'
+import { stringify as yamlStringify } from 'yaml'
+import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+import { ConfirmDialog } from '../../ui/ConfirmDialog'
+import type { SecretCertificateInfo, CertificateInfo } from '../../../types'
+
+interface SecretRendererProps {
+  data: any
+  certificateInfo?: SecretCertificateInfo
+  resourceData?: any
+  onSaveSecretValue?: (yaml: string) => Promise<void>
+  isSaving?: boolean
+}
+
+function formatDate(dateStr: string): string {
+  if (!dateStr) return '-'
+  const d = new Date(dateStr)
+  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecretValue, isSaving }: SecretRendererProps) {
+  const [revealed, setRevealed] = useState<Set<string>>(new Set())
+  const [copied, setCopied] = useState<string | null>(null)
+  const [editingKey, setEditingKey] = useState<string | null>(null)
+  const [editValue, setEditValue] = useState('')
+  const [showSaveConfirm, setShowSaveConfirm] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const dataKeys = Object.keys(data.data || {})
+  const isImmutable = data.immutable === true
+
+  function toggleReveal(key: string) {
+    setRevealed(prev => {
+      const next = new Set(prev)
+      next.has(key) ? next.delete(key) : next.add(key)
+      return next
+    })
+  }
+
+  function decodeBase64(value: string): string {
+    try {
+      return decodeURIComponent(escape(atob(value)))
+    } catch {
+      return '[binary data]'
+    }
+  }
+
+  async function copyValue(key: string, decodedValue: string): Promise<void> {
+    try {
+      await navigator.clipboard.writeText(decodedValue)
+      setCopied(key)
+      setTimeout(() => setCopied(null), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
+  function startEdit(key: string, decoded: string) {
+    setEditingKey(key)
+    setEditValue(decoded)
+  }
+
+  function cancelEdit() {
+    setEditingKey(null)
+    setEditValue('')
+    setShowSaveConfirm(false)
+  }
+
+  const handleSave = useCallback(async (key: string, newValue: string) => {
+    if (!onSaveSecretValue || !resourceData) return
+    const cleaned = structuredClone(resourceData)
+    delete cleaned.status
+    if (cleaned.metadata) {
+      delete cleaned.metadata.managedFields
+      delete cleaned.metadata.resourceVersion
+      delete cleaned.metadata.uid
+      delete cleaned.metadata.creationTimestamp
+      delete cleaned.metadata.generation
+    }
+    // Encode with UTF-8 support
+    cleaned.data[key] = btoa(unescape(encodeURIComponent(newValue)))
+    const yaml = yamlStringify(cleaned, { lineWidth: 0, indent: 2 })
+    try {
+      await onSaveSecretValue(yaml)
+      setEditingKey(null)
+      setEditValue('')
+      setShowSaveConfirm(false)
+    } catch {
+      // Error is handled by the mutation (toast)
+      setShowSaveConfirm(false)
+    }
+  }, [onSaveSecretValue, resourceData])
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto'
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'
+    }
+  }, [editValue])
+
+  const certs = certificateInfo?.certificates
+  const leafCert = certs?.[0]
+
+  return (
+    <>
+      <Section title="Secret">
+        <PropertyList>
+          <Property label="Type" value={data.type || 'Opaque'} />
+          <Property label="Keys" value={String(dataKeys.length)} />
+          {data.immutable && <Property label="Immutable" value="Yes" />}
+        </PropertyList>
+      </Section>
+
+      {/* Certificate expiry alerts */}
+      {leafCert && leafCert.expired && (
+        <AlertBanner
+          variant="error"
+          title="Certificate has expired"
+          message={`Expired ${formatDate(leafCert.notAfter)}.${leafCert.daysLeft !== 0 ? ` ${Math.abs(leafCert.daysLeft)}d ago.` : ''}`}
+        />
+      )}
+
+      {leafCert && !leafCert.expired && leafCert.daysLeft <= 7 && (
+        <AlertBanner
+          variant="error"
+          title={`Certificate expires in ${leafCert.daysLeft} day${leafCert.daysLeft !== 1 ? 's' : ''}`}
+          message="Check that cert-manager or your CA is renewing this certificate."
+        />
+      )}
+
+      {leafCert && !leafCert.expired && leafCert.daysLeft > 7 && leafCert.daysLeft <= 30 && (
+        <AlertBanner
+          variant="warning"
+          title={`Certificate expires in ${leafCert.daysLeft} day${leafCert.daysLeft !== 1 ? 's' : ''}`}
+          message="Renewal should happen automatically before expiry."
+        />
+      )}
+
+      {/* Certificate info section */}
+      {certs && certs.length > 0 && (
+        <>
+          {certs.map((cert, i) => (
+            <CertificateInfoSection
+              key={cert.serialNumber}
+              cert={cert}
+              index={i}
+              total={certs.length}
+            />
+          ))}
+        </>
+      )}
+
+      <Section title="Data" defaultExpanded>
+        <div className="space-y-2">
+          {dataKeys.map((key) => {
+            const decoded = decodeBase64(data.data[key])
+            const isBinary = decoded === '[binary data]'
+            const isEditing = editingKey === key
+            const canEdit = onSaveSecretValue && !isImmutable && !isBinary
+
+            return (
+              <div key={key} className="bg-theme-elevated/30 rounded p-2">
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-sm text-theme-text-primary truncate">{key}</span>
+                  <div className="flex items-center gap-1 shrink-0">
+                    {revealed.has(key) && !isBinary && !isEditing && canEdit && (
+                      <button
+                        onClick={() => startEdit(key, decoded)}
+                        className="p-1 text-theme-text-tertiary hover:text-blue-400 transition-colors"
+                        title="Edit value"
+                      >
+                        <Pencil className="w-3.5 h-3.5" />
+                      </button>
+                    )}
+                    {revealed.has(key) && !isBinary && !isEditing && (
+                      <button
+                        onClick={() => copyValue(key, decoded)}
+                        className="p-1 text-theme-text-tertiary hover:text-theme-text-primary transition-colors"
+                        title="Copy value"
+                      >
+                        {copied === key ? (
+                          <Check className="w-3.5 h-3.5 text-green-400" />
+                        ) : (
+                          <Copy className="w-3.5 h-3.5" />
+                        )}
+                      </button>
+                    )}
+                    {!isEditing && (
+                      <button
+                        onClick={() => toggleReveal(key)}
+                        className="text-xs text-theme-text-secondary hover:text-theme-text-primary px-1.5 py-0.5 rounded hover:bg-theme-elevated transition-colors"
+                      >
+                        {revealed.has(key) ? 'Hide' : 'Reveal'}
+                      </button>
+                    )}
+                  </div>
+                </div>
+                {isEditing ? (
+                  <div className="mt-2">
+                    <textarea
+                      ref={textareaRef}
+                      value={editValue}
+                      onChange={(e) => setEditValue(e.target.value)}
+                      className="w-full bg-theme-base rounded p-2 text-xs text-theme-text-secondary font-mono border border-blue-500/50 focus:border-blue-500 focus:outline-none resize-none overflow-hidden whitespace-pre-wrap"
+                      style={{ minHeight: '60px' }}
+                      disabled={isSaving}
+                    />
+                    <div className="flex items-center gap-2 mt-2">
+                      <button
+                        onClick={() => setShowSaveConfirm(true)}
+                        disabled={isSaving}
+                        className="flex items-center gap-1 px-2.5 py-1 text-xs text-white bg-blue-600 hover:bg-blue-700 rounded transition-colors disabled:opacity-50"
+                      >
+                        {isSaving ? (
+                          <RefreshCw className="w-3 h-3 animate-spin" />
+                        ) : (
+                          <Save className="w-3 h-3" />
+                        )}
+                        {isSaving ? 'Saving...' : 'Save'}
+                      </button>
+                      <button
+                        onClick={cancelEdit}
+                        disabled={isSaving}
+                        className="flex items-center gap-1 px-2.5 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary rounded hover:bg-theme-elevated transition-colors disabled:opacity-50"
+                      >
+                        <XCircle className="w-3 h-3" />
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                ) : revealed.has(key) ? (
+                  <pre className="mt-2 bg-theme-base rounded p-2 text-xs text-theme-text-secondary overflow-x-auto max-h-40 whitespace-pre-wrap">
+                    {decoded}
+                  </pre>
+                ) : null}
+              </div>
+            )
+          })}
+          {dataKeys.length === 0 && (
+            <div className="text-sm text-theme-text-tertiary">No data</div>
+          )}
+        </div>
+      </Section>
+
+      <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-sm">
+        <AlertTriangle className="w-4 h-4" />
+        Secret values are sensitive. Be careful when revealing.
+      </div>
+
+      {editingKey && (
+        <ConfirmDialog
+          open={showSaveConfirm}
+          onClose={() => setShowSaveConfirm(false)}
+          onConfirm={() => handleSave(editingKey, editValue)}
+          title="Update Secret"
+          message={`Update key "${editingKey}" in secret "${data.metadata?.name || 'unknown'}"?`}
+          details="This will modify the secret value in the cluster immediately."
+          confirmLabel="Update"
+          variant="warning"
+          isLoading={isSaving}
+        />
+      )}
+    </>
+  )
+}
+
+function CertificateInfoSection({ cert, index, total }: { cert: CertificateInfo; index: number; total: number }) {
+  const expiryTextColor = cert.expired || cert.daysLeft <= 7
+    ? 'text-red-400'
+    : cert.daysLeft <= 30
+      ? 'text-yellow-400'
+      : 'text-green-400'
+
+  const title = total > 1
+    ? `Certificate ${index + 1} of ${total}`
+    : 'Certificate Info'
+
+  return (
+    <Section title={title} icon={Shield} defaultExpanded={index === 0}>
+      <PropertyList>
+        <Property label="Subject (CN)" value={cert.subject} />
+        {cert.sans && cert.sans.length > 0 && (
+          <Property label="SANs" value={
+            <div className="flex flex-wrap gap-1">
+              {cert.sans.map(san => (
+                <span key={san} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">
+                  {san}
+                </span>
+              ))}
+            </div>
+          } />
+        )}
+        <Property label="Issuer" value={
+          <span>
+            {cert.issuer}
+            {cert.selfSigned && (
+              <span className="ml-2 text-[10px] px-1 py-0.5 bg-yellow-500/10 text-yellow-400 rounded">self-signed</span>
+            )}
+          </span>
+        } />
+        <Property label="Key Type" value={cert.keyType} />
+        <Property label="Serial" value={
+          <span className="font-mono text-xs">{cert.serialNumber}</span>
+        } />
+        <Property label="Not Before" value={formatDate(cert.notBefore)} />
+        <Property label="Expires" value={
+          <span>
+            {formatDate(cert.notAfter)}
+            <span className={clsx('ml-2 text-xs', expiryTextColor)}>
+              {cert.expired
+                ? `(expired ${Math.abs(cert.daysLeft)}d ago)`
+                : `(${cert.daysLeft}d remaining)`}
+            </span>
+          </span>
+        } />
+      </PropertyList>
+    </Section>
+  )
+}

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

@@ -0,0 +1,111 @@
+import { ShieldCheck } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import {
+  getSecretStoreStatus,
+  getSecretStoreProviderType,
+  getSecretStoreProviderKey,
+  getSecretStoreProviderDetails,
+  getSecretStoreRetrySettings,
+  getSecretStoreController,
+} from '../resource-utils-eso'
+
+// Provider-specific color for visual distinction
+function getProviderColor(providerKey: string): string {
+  switch (providerKey) {
+    case 'aws': return 'bg-orange-500/15 text-orange-400 border-orange-500/30'
+    case 'azurekv': return 'bg-blue-500/15 text-blue-400 border-blue-500/30'
+    case 'gcpsm': return 'bg-blue-500/15 text-blue-400 border-blue-500/30'
+    case 'vault': return 'bg-purple-500/15 text-purple-400 border-purple-500/30'
+    case 'kubernetes': return 'bg-cyan-500/15 text-cyan-400 border-cyan-500/30'
+    case 'doppler': return 'bg-green-500/15 text-green-400 border-green-500/30'
+    case 'onepassword': return 'bg-blue-500/15 text-blue-400 border-blue-500/30'
+    case 'akeyless': return 'bg-indigo-500/15 text-indigo-400 border-indigo-500/30'
+    default: return 'bg-theme-elevated text-theme-text-secondary border-theme-border'
+  }
+}
+
+interface SecretStoreRendererProps {
+  data: any
+}
+
+export function SecretStoreRenderer({ data }: SecretStoreRendererProps) {
+  const conditions = data.status?.conditions || []
+
+  const storeStatus = getSecretStoreStatus(data)
+  const providerType = getSecretStoreProviderType(data)
+  const providerKey = getSecretStoreProviderKey(data)
+  const providerDetails = getSecretStoreProviderDetails(data)
+  const retrySettings = getSecretStoreRetrySettings(data)
+  const controller = getSecretStoreController(data)
+
+  // Problem detection
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const isNotReady = readyCond?.status === 'False'
+
+  return (
+    <>
+      {/* Alert if not ready */}
+      {isNotReady && (
+        <AlertBanner
+          variant="error"
+          title="Store Not Ready"
+          message={readyCond?.message || 'The SecretStore connection is not ready.'}
+        />
+      )}
+
+      {/* Provider section */}
+      <Section title="Provider" icon={ShieldCheck} defaultExpanded>
+        <div className="mb-3">
+          <span className={`inline-flex items-center px-2.5 py-1 rounded border text-sm font-medium ${getProviderColor(providerKey)}`}>
+            {providerType}
+          </span>
+        </div>
+
+        {providerDetails.length > 0 && (
+          <PropertyList>
+            {providerDetails.map((detail, i) => (
+              <Property key={i} label={detail.label} value={detail.value} />
+            ))}
+          </PropertyList>
+        )}
+
+        {controller && (
+          <div className="mt-2 pt-2 border-t border-theme-border">
+            <PropertyList>
+              <Property label="Controller" value={controller} />
+            </PropertyList>
+          </div>
+        )}
+      </Section>
+
+      {/* Connection Status */}
+      <Section title="Connection" defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={storeStatus.text} />
+          {readyCond?.reason && readyCond.reason !== storeStatus.text && (
+            <Property label="Reason" value={readyCond.reason} />
+          )}
+          {readyCond?.lastTransitionTime && (
+            <Property label="Last Transition" value={new Date(readyCond.lastTransitionTime).toLocaleString()} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Retry Settings */}
+      {retrySettings && (
+        <Section title="Retry Settings" defaultExpanded={false}>
+          <PropertyList>
+            {retrySettings.maxRetries !== undefined && (
+              <Property label="Max Retries" value={String(retrySettings.maxRetries)} />
+            )}
+            {retrySettings.retryInterval && (
+              <Property label="Retry Interval" value={retrySettings.retryInterval} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,81 @@
+import { UserCog, Key, Cloud } from 'lucide-react'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+
+interface ServiceAccountRendererProps {
+  data: any
+}
+
+export function ServiceAccountRenderer({ data }: ServiceAccountRendererProps) {
+  const metadata = data.metadata || {}
+  const annotations = metadata.annotations || {}
+  const secrets = data.secrets || []
+  const imagePullSecrets = data.imagePullSecrets || []
+
+  // automountServiceAccountToken defaults to true if not set
+  const automountToken = data.automountServiceAccountToken !== false
+
+  // Workload identity annotations
+  const gcpServiceAccount = annotations['iam.gke.io/gcp-service-account']
+  const awsRoleArn = annotations['eks.amazonaws.com/role-arn']
+  const azureClientId = annotations['azure.workload.identity/client-id']
+  const hasWorkloadIdentity = gcpServiceAccount || awsRoleArn || azureClientId
+
+  return (
+    <>
+      {/* Configuration */}
+      <Section title="Configuration" icon={UserCog}>
+        <PropertyList>
+          <Property
+            label="Automount Token"
+            value={
+              <span
+                className={automountToken ? 'text-yellow-400' : 'text-green-400'}
+                title={automountToken ? 'Token is automatically mounted in pods' : undefined}
+              >
+                {automountToken ? 'Yes' : 'No'}
+              </span>
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      {/* Workload Identity */}
+      {hasWorkloadIdentity && (
+        <Section title="Workload Identity" icon={Cloud}>
+          <PropertyList>
+            <Property label="GCP Service Account" value={gcpServiceAccount} />
+            <Property label="AWS Role ARN" value={awsRoleArn} />
+            <Property label="Azure Client ID" value={azureClientId} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Secrets */}
+      {secrets.length > 0 && (
+        <Section title={`Secrets (${secrets.length})`} icon={Key}>
+          <PropertyList>
+            {secrets.map((secret: any) => (
+              <Property key={secret.name} label="Secret" value={secret.name} />
+            ))}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Image Pull Secrets */}
+      {imagePullSecrets.length > 0 && (
+        <Section title={`Image Pull Secrets (${imagePullSecrets.length})`}>
+          <div className="flex flex-wrap gap-1">
+            {imagePullSecrets.map((secret: any) => (
+              <span
+                key={secret.name}
+                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+              >
+                {secret.name}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,65 @@
+import { Radio } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList } from '../../ui/drawer-components'
+import {
+  getServiceMonitorEndpoints,
+  getServiceMonitorJobLabel,
+  getServiceMonitorNamespaceSelector,
+} from '../resource-utils-prometheus'
+
+interface ServiceMonitorRendererProps {
+  data: any
+}
+
+export function ServiceMonitorRenderer({ data }: ServiceMonitorRendererProps) {
+  const endpoints = getServiceMonitorEndpoints(data)
+  const selector = data.spec?.selector?.matchLabels
+  const conditions = data.status?.conditions
+
+  return (
+    <>
+      <Section title="ServiceMonitor" icon={Radio}>
+        <PropertyList>
+          <Property label="Job Label" value={getServiceMonitorJobLabel(data)} />
+          <Property label="Endpoints" value={String(endpoints.length)} />
+          <Property label="Namespace Scope" value={getServiceMonitorNamespaceSelector(data)} />
+          <Property label="Sample Limit" value={data.spec?.sampleLimit ? String(data.spec.sampleLimit) : undefined} />
+        </PropertyList>
+      </Section>
+
+      {endpoints.length > 0 && (
+        <Section title={`Scrape Endpoints (${endpoints.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {endpoints.map((ep, i) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                <div className="flex items-center gap-2 flex-wrap">
+                  {ep.port && (
+                    <span className="text-theme-text-primary font-medium">{ep.port}</span>
+                  )}
+                  <span className="text-theme-text-secondary">{ep.path}</span>
+                  {ep.interval && (
+                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      every {ep.interval}
+                    </span>
+                  )}
+                  {ep.scheme && ep.scheme !== 'http' && (
+                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      {ep.scheme}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {selector && Object.keys(selector).length > 0 && (
+        <Section title="Selector">
+          <KeyValueBadgeList items={selector} />
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,98 @@
+import { type ReactNode } from 'react'
+import { Globe, Clock } from 'lucide-react'
+import { Section, PropertyList, Property, KeyValueBadgeList, CopyHandler, AlertBanner } from '../../ui/drawer-components'
+
+interface ServiceRendererProps {
+  data: any
+  onCopy: CopyHandler
+  copied: string | null
+  renderPortAction?: (props: { namespace: string; serviceName: string; port: number; protocol: string }) => ReactNode
+}
+
+export function ServiceRenderer({ data, onCopy, copied, renderPortAction }: ServiceRendererProps) {
+  const spec = data.spec || {}
+  const ports = spec.ports || []
+  const lbIngress = data.status?.loadBalancer?.ingress || []
+  const namespace = data.metadata?.namespace
+  const serviceName = data.metadata?.name
+
+  // Check for issues
+  const isLoadBalancer = spec.type === 'LoadBalancer'
+  const lbPending = isLoadBalancer && lbIngress.length === 0
+  const hasNoSelector = !spec.selector || Object.keys(spec.selector).length === 0
+  const isExternalName = spec.type === 'ExternalName'
+
+  return (
+    <>
+      {/* LoadBalancer pending warning */}
+      {lbPending && (
+        <AlertBanner
+          variant="warning"
+          icon={Clock}
+          title="Load Balancer Pending"
+          message="External IP/hostname has not been assigned yet. This may take a few minutes. Check Events below if provisioning is stuck."
+        />
+      )}
+
+      {/* No selector warning (manual endpoints) */}
+      {hasNoSelector && !isExternalName && (
+        <AlertBanner
+          variant="info"
+          title="No Pod Selector"
+          message="This service has no selector — endpoints must be managed manually or by an external controller."
+        />
+      )}
+
+      <Section title="Service" icon={Globe}>
+        <PropertyList>
+          <Property label="Type" value={spec.type || 'ClusterIP'} />
+          <Property label="Cluster IP" value={spec.clusterIP} copyable onCopy={onCopy} copied={copied} />
+          {spec.externalIPs?.length > 0 && (
+            <Property label="External IPs" value={spec.externalIPs.join(', ')} copyable onCopy={onCopy} copied={copied} />
+          )}
+          {lbIngress.length > 0 && (
+            <Property
+              label="Load Balancer"
+              value={lbIngress[0].ip || lbIngress[0].hostname}
+              copyable
+              onCopy={onCopy}
+              copied={copied}
+            />
+          )}
+          <Property label="Session Affinity" value={spec.sessionAffinity} />
+          <Property label="External Traffic" value={spec.externalTrafficPolicy} />
+        </PropertyList>
+      </Section>
+
+      <Section title="Ports" defaultExpanded>
+        <div className="space-y-2">
+          {ports.map((port: any, i: number) => (
+            <div key={`${port.port}-${port.protocol || 'TCP'}`} className="bg-theme-elevated/30 rounded p-2 text-sm">
+              <div className="flex items-center justify-between">
+                <span className="text-theme-text-primary font-medium">{port.name || `port-${i + 1}`}</span>
+                <div className="flex items-center gap-2">
+                  {renderPortAction?.({
+                    namespace,
+                    serviceName,
+                    port: port.port,
+                    protocol: port.protocol || 'TCP',
+                  })}
+                </div>
+              </div>
+              <div className="text-xs text-theme-text-secondary mt-1">
+                {port.port} {port.targetPort !== port.port && `→ ${port.targetPort}`}
+                {port.nodePort && ` (NodePort: ${port.nodePort})`}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      {spec.selector && (
+        <Section title="Selector">
+          <KeyValueBadgeList items={spec.selector} />
+        </Section>
+      )}
+    </>
+  )
+}