@skyhook-io/k8s-ui 1.4.0 → 1.4.1

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

@@ -1,5 +1,5 @@
-import { Shield, ArrowDownToLine, ArrowUpFromLine, Ban } from 'lucide-react'
-import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Shield, ArrowDownToLine, ArrowUpFromLine, Ban, Lock } from 'lucide-react'
+import { Section, LabelSelectorDisplay } from '../../ui/drawer-components'
 
 interface CiliumNetworkPolicyRendererProps {
   data: any
@@ -8,13 +8,12 @@ interface CiliumNetworkPolicyRendererProps {
 export function CiliumNetworkPolicyRenderer({ data }: CiliumNetworkPolicyRendererProps) {
   const spec = data.spec || data.specs || {}
   const endpointSelector = spec.endpointSelector || {}
-  const matchLabels = endpointSelector.matchLabels || {}
-  const hasMatchLabels = Object.keys(matchLabels).length > 0
   const ingress: any[] | undefined = spec.ingress
   const ingressDeny: any[] | undefined = spec.ingressDeny
   const egress: any[] | undefined = spec.egress
   const egressDeny: any[] | undefined = spec.egressDeny
   const description = spec.description || ''
+  const enableDefaultDeny = spec.enableDefaultDeny
 
   return (
     <>
@@ -22,33 +21,30 @@ export function CiliumNetworkPolicyRenderer({ data }: CiliumNetworkPolicyRendere
         {description && (
           <p className="text-xs text-theme-text-secondary mb-2">{description}</p>
         )}
-        <PropertyList>
-          <Property
-            label="Endpoint Selector"
-            value={hasMatchLabels ? undefined : 'All endpoints in namespace'}
-          />
-        </PropertyList>
-        {hasMatchLabels && (
+        <div className="mt-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">Endpoint Selector</div>
+          <LabelSelectorDisplay selector={endpointSelector} emptyText="All endpoints in namespace" />
+        </div>
+        {spec.nodeSelector && (
           <div className="mt-2">
-            <div className="text-xs text-theme-text-tertiary mb-1">Endpoint 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 className="text-xs text-theme-text-tertiary mb-1">Node Selector</div>
+            <LabelSelectorDisplay selector={spec.nodeSelector} emptyText="All nodes" />
           </div>
         )}
-        {spec.nodeSelector && (
+        {enableDefaultDeny && (
           <div className="mt-2">
-            <div className="text-xs text-theme-text-tertiary mb-1">Node Selector</div>
+            <div className="text-xs text-theme-text-tertiary mb-1">Default Deny</div>
             <div className="flex flex-wrap gap-1">
-              {Object.entries(spec.nodeSelector.matchLabels || {}).map(([k, v]) => (
-                <span key={k} className="badge bg-theme-elevated text-theme-text-secondary">
-                  {k}={String(v)}
+              {enableDefaultDeny.ingress !== undefined && (
+                <span className="badge bg-theme-elevated text-theme-text-secondary">
+                  Ingress: {enableDefaultDeny.ingress ? 'Yes' : 'No'}
+                </span>
+              )}
+              {enableDefaultDeny.egress !== undefined && (
+                <span className="badge bg-theme-elevated text-theme-text-secondary">
+                  Egress: {enableDefaultDeny.egress ? 'Yes' : 'No'}
                 </span>
-              ))}
+              )}
             </div>
           </div>
         )}
@@ -102,20 +98,42 @@ function CiliumRuleCard({ rule }: { rule: any }) {
   const fromEntities: string[] = rule.fromEntities || []
   const fromCIDR: string[] = rule.fromCIDR || []
   const fromCIDRSet: any[] = rule.fromCIDRSet || []
+  const fromFQDNs: any[] = rule.fromFQDNs || []
+  const fromNodes: any[] = rule.fromNodes || []
+  const fromGroups: any[] = rule.fromGroups || []
   const toEndpoints: any[] = rule.toEndpoints || []
   const toEntities: string[] = rule.toEntities || []
   const toCIDR: string[] = rule.toCIDR || []
   const toCIDRSet: any[] = rule.toCIDRSet || []
+  const toFQDNs: any[] = rule.toFQDNs || []
+  const toServices: any[] = rule.toServices || []
+  const toNodes: any[] = rule.toNodes || []
+  const toGroups: any[] = rule.toGroups || []
   const toPorts: any[] = rule.toPorts || []
+  const icmps: any[] = rule.icmps || []
+  const authentication = rule.authentication
+
+  const hasFrom = fromEndpoints.length > 0 || fromEntities.length > 0 || fromCIDR.length > 0 ||
+    fromCIDRSet.length > 0 || fromFQDNs.length > 0 || fromNodes.length > 0 || fromGroups.length > 0
+  const hasTo = toEndpoints.length > 0 || toEntities.length > 0 || toCIDR.length > 0 ||
+    toCIDRSet.length > 0 || toFQDNs.length > 0 || toServices.length > 0 || toNodes.length > 0 || toGroups.length > 0
+  const hasRules = hasFrom || hasTo || toPorts.length > 0 || icmps.length > 0
 
   return (
     <div className="card-inner-lg">
+      {authentication && (
+        <div className="mb-2 flex items-center gap-1.5">
+          <Lock className="h-3 w-3 text-yellow-400" />
+          <span className="text-xs text-yellow-400">Authentication: {authentication.mode || 'required'}</span>
+        </div>
+      )}
+
       {fromEndpoints.length > 0 && (
         <div className="mb-2">
           <div className="text-xs text-theme-text-tertiary mb-1">From Endpoints</div>
           <div className="space-y-1">
             {fromEndpoints.map((ep: any, j: number) => (
-              <SelectorEntry key={j} selector={ep} />
+              <LabelSelectorDisplay key={j} selector={ep} emptyText="all endpoints" inline />
             ))}
           </div>
         </div>
@@ -146,12 +164,47 @@ function CiliumRuleCard({ rule }: { rule: any }) {
         </div>
       )}
 
+      {fromFQDNs.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">From FQDNs</div>
+          <div className="flex flex-wrap gap-1">
+            {fromFQDNs.map((fqdn: any, j: number) => (
+              <span key={j} className="badge bg-theme-elevated text-theme-text-secondary">
+                {fqdn.matchName || fqdn.matchPattern || JSON.stringify(fqdn)}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {fromNodes.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">From Nodes</div>
+          <div className="space-y-1">
+            {fromNodes.map((node: any, j: number) => (
+              <LabelSelectorDisplay key={j} selector={node} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {fromGroups.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">From Groups</div>
+          <div className="flex flex-wrap gap-1">
+            {fromGroups.map((g: any, j: number) => (
+              <CloudGroupEntry key={j} group={g} />
+            ))}
+          </div>
+        </div>
+      )}
+
       {toEndpoints.length > 0 && (
         <div className="mb-2">
           <div className="text-xs text-theme-text-tertiary mb-1">To Endpoints</div>
           <div className="space-y-1">
             {toEndpoints.map((ep: any, j: number) => (
-              <SelectorEntry key={j} selector={ep} />
+              <LabelSelectorDisplay key={j} selector={ep} emptyText="all endpoints" inline />
             ))}
           </div>
         </div>
@@ -182,8 +235,71 @@ function CiliumRuleCard({ rule }: { rule: any }) {
         </div>
       )}
 
+      {toFQDNs.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">To FQDNs</div>
+          <div className="flex flex-wrap gap-1">
+            {toFQDNs.map((fqdn: any, j: number) => (
+              <span key={j} className="badge bg-theme-elevated text-theme-text-secondary">
+                {fqdn.matchName || fqdn.matchPattern || JSON.stringify(fqdn)}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {toServices.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">To Services</div>
+          <div className="flex flex-wrap gap-1">
+            {toServices.map((svc: any, j: number) => {
+              const k8s = svc.k8sService
+              const sel = svc.k8sServiceSelector
+              if (k8s) {
+                const ns = k8s.namespace ? `${k8s.namespace}/` : ''
+                return (
+                  <span key={j} className="badge bg-theme-elevated text-theme-text-secondary">
+                    {ns}{k8s.serviceName}
+                  </span>
+                )
+              }
+              if (sel) {
+                return <LabelSelectorDisplay key={j} selector={sel.selector || sel} />
+              }
+              return (
+                <span key={j} className="badge bg-theme-elevated text-theme-text-secondary">
+                  {JSON.stringify(svc)}
+                </span>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {toNodes.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">To Nodes</div>
+          <div className="space-y-1">
+            {toNodes.map((node: any, j: number) => (
+              <LabelSelectorDisplay key={j} selector={node} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {toGroups.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">To Groups</div>
+          <div className="flex flex-wrap gap-1">
+            {toGroups.map((g: any, j: number) => (
+              <CloudGroupEntry key={j} group={g} />
+            ))}
+          </div>
+        </div>
+      )}
+
       {toPorts.length > 0 && (
-        <div>
+        <div className="mb-2">
           <div className="text-xs text-theme-text-tertiary mb-1">Ports</div>
           <div className="flex flex-wrap gap-1">
             {toPorts.map((p: any, j: number) => {
@@ -195,34 +311,135 @@ function CiliumRuleCard({ rule }: { rule: any }) {
               ))
             })}
           </div>
+          {toPorts.some((p: any) => p.rules) && (
+            <div className="mt-2">
+              {toPorts.map((p: any, j: number) => {
+                if (!p.rules) return null
+                return <L7Rules key={j} rules={p.rules} ports={p.ports} />
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {icmps.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">ICMP</div>
+          <div className="flex flex-wrap gap-1">
+            {icmps.map((icmp: any, j: number) => {
+              const fields = icmp.fields || []
+              return fields.map((f: any, k: number) => (
+                <span key={`${j}-${k}`} className="badge bg-theme-elevated text-theme-text-secondary">
+                  {f.family || 'IPv4'} type {f.type}
+                </span>
+              ))
+            })}
+          </div>
         </div>
       )}
 
-      {fromEndpoints.length === 0 && fromEntities.length === 0 && fromCIDR.length === 0 && fromCIDRSet.length === 0 &&
-       toEndpoints.length === 0 && toEntities.length === 0 && toCIDR.length === 0 && toCIDRSet.length === 0 &&
-       toPorts.length === 0 && (
+      {!hasRules && (
         <div className="text-xs text-theme-text-tertiary">Allow all</div>
       )}
     </div>
   )
 }
 
-function SelectorEntry({ selector }: { selector: any }) {
-  const matchLabels = selector.matchLabels || {}
-  const hasLabels = Object.keys(matchLabels).length > 0
+function L7Rules({ rules, ports }: { rules: any; ports?: any[] }) {
+  const portLabel = ports?.map((p: any) => `${p.protocol || 'TCP'}/${p.port}`).join(', ')
+  const httpRules: any[] = rules.http || []
+  const dnsRules: any[] = rules.dns || []
+  const kafkaRules: any[] = rules.kafka || []
+
+  if (httpRules.length === 0 && dnsRules.length === 0 && kafkaRules.length === 0) return null
+
   return (
-    <div className="text-sm">
-      {hasLabels ? (
-        <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>
-      ) : (
-        <span className="text-xs text-theme-text-tertiary">all endpoints</span>
+    <div className="card-inner text-xs space-y-2">
+      {portLabel && (
+        <div className="text-theme-text-tertiary">L7 rules for {portLabel}</div>
+      )}
+      {httpRules.length > 0 && (
+        <div>
+          <div className="text-theme-text-tertiary mb-1">HTTP</div>
+          <div className="space-y-1">
+            {httpRules.map((r: any, i: number) => (
+              <div key={i} className="flex flex-wrap items-center gap-1">
+                {r.method && (
+                  <span className="badge badge-sm bg-blue-500/20 text-blue-400 border-blue-500/30">
+                    {r.method}
+                  </span>
+                )}
+                {r.path && (
+                  <span className="text-theme-text-secondary font-mono">{r.path}</span>
+                )}
+                {r.headers && r.headers.map((h: any, hi: number) => (
+                  <span key={hi} className="badge badge-sm bg-theme-elevated text-theme-text-secondary">
+                    {Object.entries(h).map(([k, v]) => `${k}: ${v}`).join(', ')}
+                  </span>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {dnsRules.length > 0 && (
+        <div>
+          <div className="text-theme-text-tertiary mb-1">DNS</div>
+          <div className="flex flex-wrap gap-1">
+            {dnsRules.map((r: any, i: number) => (
+              <span key={i} className="badge badge-sm bg-theme-elevated text-theme-text-secondary">
+                {r.matchName || r.matchPattern || JSON.stringify(r)}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+      {kafkaRules.length > 0 && (
+        <div>
+          <div className="text-theme-text-tertiary mb-1">Kafka</div>
+          <div className="space-y-1">
+            {kafkaRules.map((r: any, i: number) => (
+              <div key={i} className="flex flex-wrap gap-1">
+                {r.apiKey && (
+                  <span className="badge badge-sm bg-theme-elevated text-theme-text-secondary">
+                    {r.apiKey}
+                  </span>
+                )}
+                {r.topic && (
+                  <span className="badge badge-sm bg-theme-elevated text-theme-text-secondary">
+                    topic: {r.topic}
+                  </span>
+                )}
+                {r.role && (
+                  <span className="badge badge-sm bg-theme-elevated text-theme-text-secondary">
+                    role: {r.role}
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
       )}
     </div>
   )
 }
+
+function CloudGroupEntry({ group }: { group: any }) {
+  const aws = group.aws
+  if (aws) {
+    const parts: string[] = []
+    if (aws.region) parts.push(aws.region)
+    if (aws.securityGroupsIds) parts.push(...aws.securityGroupsIds)
+    if (aws.securityGroupsNames) parts.push(...aws.securityGroupsNames)
+    return (
+      <span className="badge bg-theme-elevated text-theme-text-secondary">
+        AWS: {parts.join(', ') || JSON.stringify(aws)}
+      </span>
+    )
+  }
+  return (
+    <span className="badge bg-theme-elevated text-theme-text-secondary">
+      {JSON.stringify(group)}
+    </span>
+  )
+}

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

@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { ShieldCheck, ChevronDown, ChevronRight, CheckCircle2, XCircle } from 'lucide-react'
+import { useState, useMemo } from 'react'
+import { ShieldCheck, ChevronDown, ChevronRight, CheckCircle2, XCircle, Search } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
@@ -12,6 +12,8 @@ interface ClusterComplianceReportRendererProps {
 export function ClusterComplianceReportRenderer({ data }: ClusterComplianceReportRendererProps) {
   const [expandedSection, setExpandedSection] = useState(true)
   const [expandedControls, setExpandedControls] = useState<Set<string>>(new Set())
+  const [searchTerm, setSearchTerm] = useState('')
+  const [showFailedOnly, setShowFailedOnly] = useState(false)
 
   const compliance = data.spec?.compliance || {}
   const status = data.status || {}
@@ -24,18 +26,40 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
   const total = passCount + failCount
 
   // Build a map of control definitions for descriptions
-  const controlMap = new Map<string, any>()
-  for (const ctrl of controls) {
-    if (ctrl.id) controlMap.set(ctrl.id, ctrl)
-  }
+  const controlMap = useMemo(() => {
+    const map = new Map<string, any>()
+    for (const ctrl of controls) {
+      if (ctrl.id) map.set(ctrl.id, ctrl)
+    }
+    return map
+  }, [controls])
 
   // Sort: failed first by severity, then passed
-  const sortedChecks = [...controlChecks].sort((a: any, b: any) => {
+  const sortedChecks = useMemo(() => [...controlChecks].sort((a: any, b: any) => {
     const aFail = (a.totalFail || 0) > 0
     const bFail = (b.totalFail || 0) > 0
     if (aFail !== bFail) return aFail ? -1 : 1
     return (SEVERITY_ORDER[a.severity] ?? 99) - (SEVERITY_ORDER[b.severity] ?? 99)
-  })
+  }), [controlChecks])
+
+  const filteredChecks = useMemo(() => {
+    let result = sortedChecks
+    if (showFailedOnly) {
+      result = result.filter((c: any) => (c.totalFail || 0) > 0)
+    }
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase()
+      result = result.filter((c: any) => {
+        const def = controlMap.get(c.id)
+        return (c.name || '').toLowerCase().includes(term) ||
+          (c.id || '').toLowerCase().includes(term) ||
+          (def?.description || '').toLowerCase().includes(term)
+      })
+    }
+    return result
+  }, [sortedChecks, searchTerm, showFailedOnly, controlMap])
+
+  const hasActiveFilter = searchTerm !== '' || showFailedOnly
 
   const toggleControl = (id: string) => {
     setExpandedControls(prev => {
@@ -82,6 +106,11 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
             <span className="text-sm font-medium text-red-400">{failCount}</span>
             <span className="text-xs text-theme-text-tertiary">failed</span>
           </div>
+          {total > 0 && (
+            <div className="ml-auto text-sm font-medium text-theme-text-secondary">
+              {Math.round((passCount / total) * 100)}% compliant
+            </div>
+          )}
         </div>
         {total > 0 && (
           <div className="h-3 rounded overflow-hidden flex">
@@ -102,8 +131,45 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
             {sortedChecks.length} controls
           </button>
           {expandedSection && (
+            <>
+            {/* Search and filter */}
+            <div className="flex items-center gap-2 mb-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-theme-text-tertiary" />
+                <input
+                  type="text"
+                  placeholder="Filter by control name or ID..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full pl-6 pr-2 py-1 text-xs bg-theme-bg border border-theme-border rounded text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:ring-1 focus:ring-blue-500/50"
+                />
+              </div>
+              <button
+                onClick={() => setShowFailedOnly(!showFailedOnly)}
+                className={clsx(
+                  'flex items-center gap-1 px-2 py-1 text-xs rounded border transition-colors whitespace-nowrap',
+                  showFailedOnly
+                    ? 'bg-red-500/15 border-red-500/30 text-red-400'
+                    : 'bg-theme-bg border-theme-border text-theme-text-tertiary hover:text-theme-text-secondary'
+                )}
+              >
+                <XCircle className="w-3 h-3" />
+                Failed
+              </button>
+            </div>
+            {hasActiveFilter && (
+              <div className="flex items-center gap-1 mb-2 text-xs text-theme-text-tertiary">
+                Showing {filteredChecks.length} of {sortedChecks.length}
+                <button
+                  onClick={() => { setSearchTerm(''); setShowFailedOnly(false) }}
+                  className="ml-1 text-blue-400 hover:text-blue-300 hover:underline"
+                >
+                  Clear
+                </button>
+              </div>
+            )}
             <div className="space-y-0.5">
-              {sortedChecks.map((check: any) => {
+              {filteredChecks.map((check: any) => {
                 const hasFail = (check.totalFail || 0) > 0
                 const controlDef = controlMap.get(check.id)
                 const isExpanded = expandedControls.has(check.id)
@@ -155,7 +221,13 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
                   </div>
                 )
               })}
+              {filteredChecks.length === 0 && (
+                <div className="py-4 text-center text-xs text-theme-text-tertiary">
+                  No controls match the current filter.
+                </div>
+              )}
             </div>
+            </>
           )}
         </Section>
       )}

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