@skyhook-io/k8s-ui 1.4.0 → 1.4.2

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

@@ -1,4 +1,4 @@
-import { Shield, Clock, Globe } from 'lucide-react'
+import { Shield, Clock, Globe, Key } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
 
@@ -26,6 +26,10 @@ export function CertificateRenderer({ data }: CertificateRendererProps) {
   const issuerRef = spec.issuerRef || {}
   const usages = spec.usages || []
 
+  const privateKey = spec.privateKey
+  const failedIssuanceAttempts = status.failedIssuanceAttempts
+  const lastFailureTime = status.lastFailureTime
+
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const isReady = readyCond?.status === 'True'
   const isNotReady = readyCond?.status === 'False'
@@ -96,30 +100,53 @@ export function CertificateRenderer({ data }: CertificateRendererProps) {
         />
       )}
 
+      {failedIssuanceAttempts > 0 && (
+        <AlertBanner
+          variant="warning"
+          title={`${failedIssuanceAttempts} failed issuance attempt${failedIssuanceAttempts !== 1 ? 's' : ''}`}
+          message={lastFailureTime ? `Last failure: ${formatDate(lastFailureTime)}` : undefined}
+        />
+      )}
+
       {/* Certificate Info */}
       <Section title="Certificate Info" icon={Shield}>
         <PropertyList>
           <Property
             label="Status"
             value={
-              <span className={clsx(
-                'badge',
-                isReady
-                  ? 'bg-green-500/20 text-green-400'
-                  : 'bg-red-500/20 text-red-400'
-              )}>
-                {isReady ? 'Ready' : 'Not Ready'}
+              <span className="flex items-center gap-2">
+                <span className={clsx(
+                  'badge',
+                  isReady
+                    ? 'bg-green-500/20 text-green-400'
+                    : 'bg-red-500/20 text-red-400'
+                )}>
+                  {isReady ? 'Ready' : 'Not Ready'}
+                </span>
+                {spec.isCA && (
+                  <span className="badge bg-purple-500/20 text-purple-400">
+                    CA Certificate
+                  </span>
+                )}
               </span>
             }
           />
           <Property label="Secret Name" value={spec.secretName} />
           <Property label="Revision" value={status.revision} />
+          {failedIssuanceAttempts > 0 && (
+            <Property label="Failed Issuance Attempts" value={String(failedIssuanceAttempts)} />
+          )}
+          {lastFailureTime && (
+            <Property label="Last Failure Time" value={formatDate(lastFailureTime)} />
+          )}
         </PropertyList>
       </Section>
 
       {/* Validity */}
       <Section title="Validity" icon={Clock}>
         <PropertyList>
+          <Property label="Duration" value={spec.duration} />
+          <Property label="Renew Before" value={spec.renewBefore} />
           <Property label="Not Before" value={notBefore ? formatDate(notBefore) : '-'} />
           <Property
             label="Not After"
@@ -161,6 +188,18 @@ export function CertificateRenderer({ data }: CertificateRendererProps) {
         )}
       </Section>
 
+      {/* Private Key */}
+      {privateKey && (
+        <Section title="Private Key" icon={Key}>
+          <PropertyList>
+            <Property label="Algorithm" value={privateKey.algorithm} />
+            <Property label="Size" value={privateKey.size != null ? String(privateKey.size) : undefined} />
+            <Property label="Encoding" value={privateKey.encoding} />
+            <Property label="Rotation Policy" value={privateKey.rotationPolicy} />
+          </PropertyList>
+        </Section>
+      )}
+
       {/* Domains */}
       {dnsNames.length > 0 && (
         <Section title="Domains" icon={Globe}>

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

@@ -1,4 +1,4 @@
-import { Shield, AlertTriangle, Globe, Key } from 'lucide-react'
+import { Shield, AlertTriangle, Globe, Key, FileText } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
 import { getSolverType } from './ClusterIssuerRenderer'
@@ -68,11 +68,19 @@ export function ChallengeRenderer({ data }: { data: any }) {
               </span>
             }
           />
+          {status.reason && !isError && <Property label="Reason" value={status.reason} />}
           <Property
             label="Type"
             value={
-              <span className="badge bg-theme-elevated text-theme-text-secondary">
-                {challengeType}
+              <span className="flex items-center gap-2">
+                <span className="badge bg-theme-elevated text-theme-text-secondary">
+                  {challengeType}
+                </span>
+                {spec.wildcard && (
+                  <span className="badge bg-purple-500/20 text-purple-400">
+                    Wildcard
+                  </span>
+                )}
               </span>
             }
           />
@@ -84,6 +92,17 @@ export function ChallengeRenderer({ data }: { data: any }) {
         </PropertyList>
       </Section>
 
+      {/* Issuer */}
+      {spec.issuerRef && (
+        <Section title="Issuer" icon={FileText}>
+          <PropertyList>
+            <Property label="Name" value={spec.issuerRef.name} />
+            <Property label="Kind" value={spec.issuerRef.kind} />
+            <Property label="Group" value={spec.issuerRef.group} />
+          </PropertyList>
+        </Section>
+      )}
+
       {/* ACME */}
       {(spec.url || spec.token) && (
         <Section title="ACME" icon={Globe}>

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