@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,134 @@
+import { Clock, Archive } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import {
+  getScheduleStatus,
+  getScheduleCron,
+  getScheduleLastBackup,
+  getSchedulePaused,
+  getScheduleTemplate,
+  getScheduleUseOwnerReferences,
+} from '../resource-utils-velero'
+
+interface VeleroScheduleRendererProps {
+  data: any
+}
+
+export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
+  const status = data.status || {}
+  const conditions = status.conditions || []
+
+  const scheduleStatus = getScheduleStatus(data)
+  const isPaused = getSchedulePaused(data)
+  const template = getScheduleTemplate(data)
+
+  const templateIncludedNs = template.includedNamespaces || []
+  const templateExcludedNs = template.excludedNamespaces || []
+  const templateIncludedResources = template.includedResources || []
+  const templateExcludedResources = template.excludedResources || []
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {isPaused && (
+        <AlertBanner
+          variant="warning"
+          title="Schedule Paused"
+          message="This backup schedule is currently paused. No new backups will be created."
+        />
+      )}
+      {scheduleStatus.text === 'FailedValidation' && (
+        <AlertBanner
+          variant="error"
+          title="Validation Failed"
+          message="The schedule spec failed validation and is not active."
+        />
+      )}
+
+      {/* Schedule section */}
+      <Section title="Schedule" icon={Clock} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', scheduleStatus.color)}>
+              {scheduleStatus.text}
+            </span>
+          } />
+          <Property label="Cron Schedule" value={
+            <span className="font-mono text-sm">{getScheduleCron(data)}</span>
+          } />
+          <Property label="Last Backup" value={getScheduleLastBackup(data)} />
+          <Property label="Paused" value={isPaused ? 'Yes' : 'No'} />
+          <Property label="Use Owner References" value={getScheduleUseOwnerReferences(data) ? 'Yes' : 'No'} />
+        </PropertyList>
+      </Section>
+
+      {/* Backup Template section */}
+      <Section title="Backup Template" icon={Archive} defaultExpanded>
+        <PropertyList>
+          {template.storageLocation && (
+            <Property label="Storage Location" value={template.storageLocation} />
+          )}
+          {template.ttl && (
+            <Property label="TTL" value={template.ttl} />
+          )}
+          {templateIncludedNs.length > 0 && (
+            <Property label="Included Namespaces" value={
+              <div className="flex flex-wrap gap-1">
+                {templateIncludedNs.map((ns: string) => (
+                  <span key={ns} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{ns}</span>
+                ))}
+              </div>
+            } />
+          )}
+          {templateIncludedNs.length === 0 && (
+            <Property label="Included Namespaces" value="* (all)" />
+          )}
+          {templateExcludedNs.length > 0 && (
+            <Property label="Excluded Namespaces" value={
+              <div className="flex flex-wrap gap-1">
+                {templateExcludedNs.map((ns: string) => (
+                  <span key={ns} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{ns}</span>
+                ))}
+              </div>
+            } />
+          )}
+          {templateIncludedResources.length > 0 && (
+            <Property label="Included Resources" value={
+              <div className="flex flex-wrap gap-1">
+                {templateIncludedResources.map((r: string) => (
+                  <span key={r} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{r}</span>
+                ))}
+              </div>
+            } />
+          )}
+          {templateExcludedResources.length > 0 && (
+            <Property label="Excluded Resources" value={
+              <div className="flex flex-wrap gap-1">
+                {templateExcludedResources.map((r: string) => (
+                  <span key={r} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{r}</span>
+                ))}
+              </div>
+            } />
+          )}
+          {template.snapshotVolumes !== undefined && (
+            <Property label="Snapshot Volumes" value={template.snapshotVolumes ? 'Yes' : 'No'} />
+          )}
+          {template.defaultVolumesToFsBackup !== undefined && (
+            <Property label="Default FS Backup" value={template.defaultVolumesToFsBackup ? 'Yes' : 'No'} />
+          )}
+          {(template.volumeSnapshotLocations || []).length > 0 && (
+            <Property label="Volume Snapshot Locations" value={
+              <div className="flex flex-wrap gap-1">
+                {template.volumeSnapshotLocations.map((loc: string) => (
+                  <span key={loc} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{loc}</span>
+                ))}
+              </div>
+            } />
+          )}
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { HardDrive } from 'lucide-react'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import {
+  getVSLProvider,
+  getVSLConfig,
+} from '../resource-utils-velero'
+
+interface VeleroVSLRendererProps {
+  data: any
+}
+
+export function VeleroVSLRenderer({ data }: VeleroVSLRendererProps) {
+  const config = getVSLConfig(data)
+
+  return (
+    <>
+      <Section title="Provider" icon={HardDrive} defaultExpanded>
+        <PropertyList>
+          <Property label="Provider" value={getVSLProvider(data)} />
+        </PropertyList>
+        {Object.keys(config).length > 0 && (
+          <div className="mt-2 pt-2 border-t border-theme-border">
+            <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Config</div>
+            <div className="flex flex-wrap gap-1">
+              {Object.entries(config).map(([k, v]) => (
+                <span key={k} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                  {k}: {String(v)}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </Section>
+    </>
+  )
+}

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

@@ -0,0 +1,347 @@
+import { useState, useMemo } from 'react'
+import { Shield, Package, ChevronDown, ChevronRight, ChevronUp, ExternalLink, Search, ArrowUpDown, Wrench } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { SEVERITY_BADGE_COLORS, SEVERITY_BAR_COLORS, SEVERITY_TEXT_COLORS, SEVERITY_ORDER, TrivyAlertBanner, formatTrivyImage } from './trivy-shared'
+
+interface VulnerabilityReportRendererProps {
+  data: any
+}
+
+const INITIAL_SHOW_COUNT = 50
+
+type SortColumn = 'vulnerabilityID' | 'severity' | 'score' | 'resource' | 'installedVersion' | 'fixedVersion'
+type SortDirection = 'asc' | 'desc'
+
+const COLUMNS: { key: SortColumn; label: string }[] = [
+  { key: 'vulnerabilityID', label: 'CVE' },
+  { key: 'severity', label: 'Severity' },
+  { key: 'score', label: 'Score' },
+  { key: 'resource', label: 'Package' },
+  { key: 'installedVersion', label: 'Installed' },
+  { key: 'fixedVersion', label: 'Fixed' },
+]
+
+export function VulnerabilityReportRenderer({ data }: VulnerabilityReportRendererProps) {
+  const [showAll, setShowAll] = useState(false)
+  const [expanded, setExpanded] = useState(true)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [severityFilters, setSeverityFilters] = useState<Set<string>>(new Set())
+  const [fixableOnly, setFixableOnly] = useState(false)
+  const [sortColumn, setSortColumn] = useState<SortColumn | null>(null)
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc')
+
+  const report = data.report || {}
+  const summary = report.summary || {}
+  const vulnerabilities = Array.isArray(report.vulnerabilities) ? report.vulnerabilities : []
+  const scanner = report.scanner || {}
+  const labels = data.metadata?.labels || {}
+
+  const critical = summary.criticalCount || 0
+  const high = summary.highCount || 0
+  const medium = summary.mediumCount || 0
+  const low = summary.lowCount || 0
+  const unknown = summary.unknownCount || 0
+  const total = critical + high + medium + low + unknown
+
+  const containerName = labels['trivy-operator.container.name'] || '-'
+  const image = formatTrivyImage(report)
+  const os = report.os || {}
+  const osDisplay = os.family && os.name
+    ? `${os.family} ${os.name}`
+    : os.family || null
+
+  const toggleSeverityFilter = (severity: string) => {
+    setSeverityFilters(prev => {
+      const next = new Set(prev)
+      if (next.has(severity)) {
+        next.delete(severity)
+      } else {
+        next.add(severity)
+      }
+      return next
+    })
+    setShowAll(false)
+  }
+
+  const handleSort = (column: SortColumn) => {
+    if (sortColumn === column) {
+      if (sortDirection === 'desc') {
+        setSortDirection('asc')
+      } else {
+        // Third click: clear sort
+        setSortColumn(null)
+        setSortDirection('desc')
+      }
+    } else {
+      setSortColumn(column)
+      setSortDirection('desc')
+    }
+  }
+
+  const hasActiveFilters = searchTerm !== '' || severityFilters.size > 0 || fixableOnly
+
+  const processedVulns = useMemo(() => {
+    let result = vulnerabilities
+
+    // Filter by severity
+    if (severityFilters.size > 0) {
+      result = result.filter((v: any) => severityFilters.has(v.severity || 'UNKNOWN'))
+    }
+
+    // Filter by search term
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase()
+      result = result.filter((v: any) =>
+        (v.vulnerabilityID || '').toLowerCase().includes(term) ||
+        (v.resource || '').toLowerCase().includes(term)
+      )
+    }
+
+    // Filter fixable only
+    if (fixableOnly) {
+      result = result.filter((v: any) => v.fixedVersion)
+    }
+
+    // Sort
+    if (sortColumn) {
+      result = [...result].sort((a: any, b: any) => {
+        let cmp = 0
+        switch (sortColumn) {
+          case 'severity': {
+            const aOrder = SEVERITY_ORDER[a.severity] ?? 99
+            const bOrder = SEVERITY_ORDER[b.severity] ?? 99
+            cmp = aOrder - bOrder
+            break
+          }
+          case 'score': {
+            const aScore = a.score ?? 0
+            const bScore = b.score ?? 0
+            cmp = aScore - bScore
+            break
+          }
+          default: {
+            const aVal = (a[sortColumn] || '').toLowerCase()
+            const bVal = (b[sortColumn] || '').toLowerCase()
+            cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0
+          }
+        }
+        return sortDirection === 'asc' ? cmp : -cmp
+      })
+    }
+
+    return result
+  }, [vulnerabilities, severityFilters, searchTerm, fixableOnly, sortColumn, sortDirection])
+
+  const displayedVulns = showAll ? processedVulns : processedVulns.slice(0, INITIAL_SHOW_COUNT)
+
+  return (
+    <>
+      <TrivyAlertBanner critical={critical} high={high} noun="vulnerability" />
+
+      {/* Report Overview */}
+      <Section title="Report Overview" icon={Shield}>
+        <PropertyList>
+          <Property label="Container" value={containerName} />
+          <Property label="Image" value={image} />
+          {osDisplay && (
+            <Property label="OS" value={
+              <span className="flex items-center gap-1.5">
+                {osDisplay}
+                {os.eosl && (
+                  <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-500/20 text-amber-400">
+                    End of Service Life
+                  </span>
+                )}
+              </span>
+            } />
+          )}
+          <Property label="Scanner" value={scanner.name ? `${scanner.name} ${scanner.version || ''}`.trim() : '-'} />
+          <Property label="Scanned" value={report.updateTimestamp ? formatAge(report.updateTimestamp) + ' ago' : '-'} />
+        </PropertyList>
+      </Section>
+
+      {/* Severity Summary */}
+      <Section title="Severity Summary">
+        {total > 0 && (
+          <div className="mb-3">
+            <div className="h-3 rounded overflow-hidden flex">
+              {critical > 0 && <div className={clsx('h-full', SEVERITY_BAR_COLORS.CRITICAL)} style={{ width: `${(critical / total) * 100}%` }} />}
+              {high > 0 && <div className={clsx('h-full', SEVERITY_BAR_COLORS.HIGH)} style={{ width: `${(high / total) * 100}%` }} />}
+              {medium > 0 && <div className={clsx('h-full', SEVERITY_BAR_COLORS.MEDIUM)} style={{ width: `${(medium / total) * 100}%` }} />}
+              {low > 0 && <div className={clsx('h-full', SEVERITY_BAR_COLORS.LOW)} style={{ width: `${(low / total) * 100}%` }} />}
+              {unknown > 0 && <div className={clsx('h-full', SEVERITY_BAR_COLORS.UNKNOWN)} style={{ width: `${(unknown / total) * 100}%` }} />}
+            </div>
+          </div>
+        )}
+        <div className="flex flex-wrap gap-3">
+          {[
+            { label: 'Critical', count: critical, key: 'CRITICAL' },
+            { label: 'High', count: high, key: 'HIGH' },
+            { label: 'Medium', count: medium, key: 'MEDIUM' },
+            { label: 'Low', count: low, key: 'LOW' },
+            { label: 'Unknown', count: unknown, key: 'UNKNOWN' },
+          ].map(({ label, count, key }) => {
+            const isActive = severityFilters.has(key)
+            return (
+              <button
+                key={key}
+                onClick={() => count > 0 && toggleSeverityFilter(key)}
+                className={clsx(
+                  'flex items-center gap-1.5 rounded px-1.5 py-0.5 transition-colors',
+                  count > 0 ? 'cursor-pointer hover:bg-theme-hover' : 'cursor-default',
+                  isActive && 'ring-1 ring-theme-text-secondary bg-theme-hover'
+                )}
+              >
+                <div className={clsx('w-2.5 h-2.5 rounded-sm', SEVERITY_BAR_COLORS[key])} />
+                <span className={clsx('text-sm font-medium', count > 0 ? SEVERITY_TEXT_COLORS[key] : 'text-theme-text-tertiary')}>
+                  {count}
+                </span>
+                <span className="text-xs text-theme-text-tertiary">{label}</span>
+              </button>
+            )
+          })}
+          <div className="text-xs text-theme-text-tertiary self-center ml-auto">{total} total</div>
+        </div>
+      </Section>
+
+      {/* Vulnerabilities Table */}
+      {vulnerabilities.length > 0 && (
+        <Section title="Vulnerabilities" icon={Package}>
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className="flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary mb-2"
+          >
+            {expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+            {vulnerabilities.length} vulnerabilities
+          </button>
+          {expanded && (
+            <div className="overflow-x-auto -mx-1">
+              {/* Search and filter toolbar */}
+              <div className="flex items-center gap-2 mb-2 px-1">
+                <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 CVE or package..."
+                    value={searchTerm}
+                    onChange={(e) => { setSearchTerm(e.target.value); setShowAll(false) }}
+                    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={() => { setFixableOnly(!fixableOnly); setShowAll(false) }}
+                  className={clsx(
+                    'flex items-center gap-1 px-2 py-1 text-xs rounded border transition-colors whitespace-nowrap',
+                    fixableOnly
+                      ? 'bg-green-500/15 border-green-500/30 text-green-400'
+                      : 'bg-theme-bg border-theme-border text-theme-text-tertiary hover:text-theme-text-secondary'
+                  )}
+                  title="Show only vulnerabilities with a fix available"
+                >
+                  <Wrench className="w-3 h-3" />
+                  Fixable
+                </button>
+              </div>
+
+              {/* Active filter summary */}
+              {hasActiveFilters && (
+                <div className="flex items-center gap-1 mb-2 px-1 text-xs text-theme-text-tertiary">
+                  Showing {processedVulns.length} of {vulnerabilities.length}
+                  <button
+                    onClick={() => { setSearchTerm(''); setSeverityFilters(new Set()); setFixableOnly(false); setShowAll(false) }}
+                    className="ml-1 text-blue-400 hover:text-blue-300 hover:underline"
+                  >
+                    Clear filters
+                  </button>
+                </div>
+              )}
+
+              <table className="w-full text-xs">
+                <thead>
+                  <tr className="border-b border-theme-border text-theme-text-tertiary">
+                    {COLUMNS.map(({ key, label }) => {
+                      const isSorted = sortColumn === key
+                      return (
+                        <th
+                          key={key}
+                          className="text-left py-1.5 px-1 font-medium cursor-pointer select-none hover:text-theme-text-secondary"
+                          onClick={() => handleSort(key)}
+                        >
+                          <div className="flex items-center gap-0.5">
+                            {label}
+                            <span className="text-theme-text-tertiary">
+                              {isSorted ? (
+                                sortDirection === 'asc' ? (
+                                  <ChevronUp className="w-3 h-3" />
+                                ) : (
+                                  <ChevronDown className="w-3 h-3" />
+                                )
+                              ) : (
+                                <ArrowUpDown className="w-2.5 h-2.5 opacity-40" />
+                              )}
+                            </span>
+                          </div>
+                        </th>
+                      )
+                    })}
+                  </tr>
+                </thead>
+                <tbody>
+                  {displayedVulns.map((vuln: any, i: number) => (
+                    <tr key={`${vuln.vulnerabilityID || i}-${i}`} className="border-b border-theme-border/50 hover:bg-theme-hover/50">
+                      <td className="py-1.5 px-1">
+                        {vuln.primaryLink ? (
+                          <a
+                            href={vuln.primaryLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-blue-400 hover:text-blue-300 hover:underline inline-flex items-center gap-0.5"
+                          >
+                            {vuln.vulnerabilityID || '-'}
+                            <ExternalLink className="w-2.5 h-2.5" />
+                          </a>
+                        ) : (
+                          <span className="text-theme-text-secondary">{vuln.vulnerabilityID || '-'}</span>
+                        )}
+                      </td>
+                      <td className="py-1.5 px-1">
+                        <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium', SEVERITY_BADGE_COLORS[vuln.severity] || SEVERITY_BADGE_COLORS.UNKNOWN)}>
+                          {vuln.severity || 'UNKNOWN'}
+                        </span>
+                      </td>
+                      <td className="py-1.5 px-1 text-theme-text-secondary">{vuln.score || '-'}</td>
+                      <td className="py-1.5 px-1 text-theme-text-secondary max-w-[120px] truncate" title={vuln.resource || ''}>{vuln.resource || '-'}</td>
+                      <td className="py-1.5 px-1 text-theme-text-secondary max-w-[100px] truncate" title={vuln.installedVersion}>{vuln.installedVersion || '-'}</td>
+                      <td className="py-1.5 px-1 max-w-[100px] truncate" title={vuln.fixedVersion}>
+                        {vuln.fixedVersion ? (
+                          <span className="text-green-400">{vuln.fixedVersion}</span>
+                        ) : (
+                          <span className="text-theme-text-tertiary">-</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              {displayedVulns.length === 0 && (
+                <div className="py-4 text-center text-xs text-theme-text-tertiary">
+                  No vulnerabilities match the current filters.
+                </div>
+              )}
+              {!showAll && processedVulns.length > INITIAL_SHOW_COUNT && (
+                <button
+                  onClick={() => setShowAll(true)}
+                  className="mt-2 text-xs text-blue-400 hover:text-blue-300 hover:underline"
+                >
+                  Show all {processedVulns.length} vulnerabilities
+                </button>
+              )}
+            </div>
+          )}
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,156 @@
+import { Shield } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+
+interface WebhookConfigRendererProps {
+  data: any
+  isMutating?: boolean
+}
+
+function getOperationColor(op: string): string {
+  if (op === 'CREATE') return 'bg-green-500/20 text-green-400'
+  if (op === 'UPDATE') return 'bg-yellow-500/20 text-yellow-400'
+  if (op === 'DELETE') return 'bg-red-500/20 text-red-400'
+  if (op === '*') return 'bg-red-500/20 text-red-400'
+  if (op === 'CONNECT') return 'bg-blue-500/20 text-blue-400'
+  return 'bg-theme-elevated text-theme-text-secondary'
+}
+
+function getSideEffectsColor(se: string): string {
+  if (se === 'None' || se === 'NoneOnDryRun') return 'bg-green-500/20 text-green-400'
+  return 'bg-amber-500/20 text-amber-400'
+}
+
+export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendererProps) {
+  const webhooks = data.webhooks || []
+  const hasFailPolicy = webhooks.some((w: any) => w.failurePolicy === 'Fail')
+  const allIgnore = webhooks.length > 0 && webhooks.every((w: any) => w.failurePolicy === 'Ignore')
+
+  return (
+    <>
+      {hasFailPolicy && (
+        <AlertBanner
+          variant="warning"
+          title="Blocking Webhook"
+          message="One or more webhooks use failurePolicy: Fail. API requests will be rejected if the webhook is unavailable."
+        />
+      )}
+
+      <Section title="Overview" icon={Shield}>
+        <PropertyList>
+          <Property label="Webhooks" value={webhooks.length} />
+          <Property
+            label="Failure Policy"
+            value={
+              hasFailPolicy ? (
+                <span className="px-1.5 py-0.5 rounded text-xs bg-red-500/20 text-red-400">Fail</span>
+              ) : allIgnore ? (
+                <span className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">Ignore</span>
+              ) : (
+                'Mixed'
+              )
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      <Section title={`Webhooks (${webhooks.length})`} icon={Shield} defaultExpanded>
+        <div className="space-y-3">
+          {webhooks.map((wh: any, i: number) => {
+            const svc = wh.clientConfig?.service
+            const url = wh.clientConfig?.url
+            const target = svc
+              ? `Service: ${svc.namespace}/${svc.name}${svc.port ? `:${svc.port}` : ''}${svc.path || ''}`
+              : url
+                ? `URL: ${url}`
+                : 'No target'
+
+            const nsLabels = wh.namespaceSelector?.matchLabels
+            const objLabels = wh.objectSelector?.matchLabels
+
+            return (
+              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                <div className="text-sm font-medium text-theme-text-primary">{wh.name}</div>
+                <div className="text-xs text-theme-text-secondary mt-0.5">{target}</div>
+
+                {/* Policy badges */}
+                <div className="flex flex-wrap gap-1.5 mt-2">
+                  <span className={clsx('px-1.5 py-0.5 rounded text-xs', wh.failurePolicy === 'Fail' ? 'bg-red-500/20 text-red-400' : 'bg-theme-elevated text-theme-text-secondary')}>
+                    {wh.failurePolicy || 'Fail'}
+                  </span>
+                  {wh.sideEffects && (
+                    <span className={clsx('px-1.5 py-0.5 rounded text-xs', getSideEffectsColor(wh.sideEffects))}>
+                      {wh.sideEffects}
+                    </span>
+                  )}
+                  <span className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">
+                    {wh.timeoutSeconds ?? 10}s
+                  </span>
+                  {wh.matchPolicy && (
+                    <span className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">
+                      {wh.matchPolicy}
+                    </span>
+                  )}
+                  {isMutating && wh.reinvocationPolicy && (
+                    <span className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">
+                      {wh.reinvocationPolicy}
+                    </span>
+                  )}
+                </div>
+
+                {/* Rules */}
+                {wh.rules && wh.rules.length > 0 && (
+                  <div className="mt-2 space-y-2">
+                    {wh.rules.map((rule: any, ri: number) => (
+                      <div key={ri} className="flex flex-wrap items-center gap-1 text-xs">
+                        {(rule.operations || []).map((op: string) => (
+                          <span key={op} className={clsx('px-1.5 py-0.5 rounded', getOperationColor(op))}>{op}</span>
+                        ))}
+                        <span className="text-theme-text-tertiary">on</span>
+                        {(rule.resources || []).map((r: string) => (
+                          <span key={r} className="px-1.5 py-0.5 rounded bg-purple-500/20 text-purple-400">{r}</span>
+                        ))}
+                        {(rule.apiGroups || []).map((g: string) => (
+                          <span key={g} className="px-1.5 py-0.5 rounded bg-theme-elevated text-theme-text-secondary">{g === '' ? 'core' : g}</span>
+                        ))}
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {/* Selectors */}
+                {(nsLabels || objLabels) && (
+                  <div className="mt-2 space-y-1">
+                    {nsLabels && Object.keys(nsLabels).length > 0 && (
+                      <div>
+                        <div className="text-xs text-theme-text-tertiary mb-1">Namespace Selector</div>
+                        <div className="flex flex-wrap gap-1">
+                          {Object.entries(nsLabels).map(([k, v]) => (
+                            <span key={k} className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">{k}={String(v)}</span>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                    {objLabels && Object.keys(objLabels).length > 0 && (
+                      <div>
+                        <div className="text-xs text-theme-text-tertiary mb-1">Object Selector</div>
+                        <div className="flex flex-wrap gap-1">
+                          {Object.entries(objLabels).map(([k, v]) => (
+                            <span key={k} className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">{k}={String(v)}</span>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+          {webhooks.length === 0 && (
+            <div className="text-sm text-theme-text-tertiary">No webhooks defined</div>
+          )}
+        </div>
+      </Section>
+    </>
+  )
+}