@skyhook-io/k8s-ui 1.4.0 → 1.4.2

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

@@ -1,15 +1,168 @@
-import { Bell } from 'lucide-react'
+import { useState, useMemo } from 'react'
+import { Bell, Search, ChevronRight } from 'lucide-react'
+import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { BADGE_SEVERITY_COLORS } from '../../ui/Badge'
 import {
   getPrometheusRuleGroups,
   getPrometheusRuleTotalRules,
   getPrometheusRuleGroupCount,
 } from '../resource-utils-prometheus'
+import type { PrometheusRuleGroup, PrometheusRule, PrometheusAlertRule, PrometheusRecordingRule } from '../resource-utils-prometheus'
 
 interface PrometheusRuleRendererProps {
   data: any
 }
 
+// Map Prometheus severity names to centralized badge colors
+const SEVERITY_BADGE: Record<string, string> = {
+  critical: BADGE_SEVERITY_COLORS.error,
+  warning: BADGE_SEVERITY_COLORS.warning,
+  info: BADGE_SEVERITY_COLORS.info,
+}
+
+function matchesSearch(rule: PrometheusRule, term: string): boolean {
+  if (rule.type === 'alert') {
+    return (
+      rule.alert.toLowerCase().includes(term) ||
+      rule.expr.toLowerCase().includes(term) ||
+      (rule.severity || '').toLowerCase().includes(term) ||
+      (rule.summary || '').toLowerCase().includes(term) ||
+      (rule.description || '').toLowerCase().includes(term)
+    )
+  }
+  return (
+    (rule.record || '').toLowerCase().includes(term) ||
+    rule.expr.toLowerCase().includes(term)
+  )
+}
+
+const EXPR_TRUNCATE_LEN = 200
+const SUMMARY_TRUNCATE_LEN = 100
+
+function TruncatedExpr({ expr }: { expr: string }) {
+  const [expanded, setExpanded] = useState(false)
+  const needsTruncation = expr.length > EXPR_TRUNCATE_LEN
+
+  return (
+    <div className="mt-1">
+      <pre className="text-xs font-mono text-theme-text-secondary bg-theme-elevated rounded px-2 py-1.5 whitespace-pre-wrap break-all">
+        {expanded || !needsTruncation ? expr : expr.slice(0, EXPR_TRUNCATE_LEN) + '...'}
+      </pre>
+      {needsTruncation && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-[10px] text-accent-text hover:underline mt-0.5"
+        >
+          {expanded ? 'Show less' : 'Show more'}
+        </button>
+      )}
+    </div>
+  )
+}
+
+function AlertRuleCard({ rule }: { rule: PrometheusAlertRule }) {
+  const severityClass = rule.severity ? SEVERITY_BADGE[rule.severity] : undefined
+  const summaryText = rule.summary || rule.description || ''
+  const truncatedSummary = summaryText.length > SUMMARY_TRUNCATE_LEN
+    ? summaryText.slice(0, SUMMARY_TRUNCATE_LEN) + '...'
+    : summaryText
+
+  return (
+    <div className="card-inner text-sm">
+      <div className="flex items-center gap-2 flex-wrap">
+        <span className="text-theme-text-primary font-medium">{rule.alert}</span>
+        {rule.severity && (
+          <span className={clsx('badge-sm', severityClass || 'bg-theme-hover text-theme-text-secondary')}>
+            {rule.severity}
+          </span>
+        )}
+        {rule.for && (
+          <span className="badge-sm bg-theme-hover text-theme-text-secondary">
+            for: {rule.for}
+          </span>
+        )}
+      </div>
+      {truncatedSummary && (
+        <div className="text-xs text-theme-text-tertiary mt-1">{truncatedSummary}</div>
+      )}
+      <TruncatedExpr expr={rule.expr} />
+    </div>
+  )
+}
+
+function RecordingRuleCard({ rule }: { rule: PrometheusRecordingRule }) {
+  return (
+    <div className="card-inner text-sm">
+      <div className="flex items-center gap-2">
+        <span className="text-theme-text-primary font-medium">{rule.record}</span>
+        <span className="badge-sm bg-theme-hover text-theme-text-tertiary">recording</span>
+      </div>
+      <TruncatedExpr expr={rule.expr} />
+    </div>
+  )
+}
+
+function RuleGroupSection({ group, searchTerm }: { group: PrometheusRuleGroup; searchTerm: string }) {
+  const [manualExpanded, setManualExpanded] = useState(group.ruleCount <= 10)
+
+  const filteredRules = useMemo(() => {
+    if (!searchTerm) return group.rules
+    const term = searchTerm.toLowerCase()
+    return group.rules.filter((rule) => matchesSearch(rule, term))
+  }, [group.rules, searchTerm])
+
+  // Auto-expand when searching so matched rules are visible
+  const expanded = searchTerm ? filteredRules.length > 0 : manualExpanded
+
+  // If searching and no matches, hide the group entirely
+  if (searchTerm && filteredRules.length === 0) return null
+
+  return (
+    <div className="card-inner">
+      <button
+        onClick={() => setManualExpanded(!manualExpanded)}
+        className="flex items-center justify-between w-full text-left"
+      >
+        <div className="flex items-center gap-2">
+          <ChevronRight className={clsx('w-3.5 h-3.5 text-theme-text-tertiary transition-transform duration-200', expanded && 'rotate-90')} />
+          <span className="text-sm text-theme-text-primary font-medium">{group.name}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          {group.interval && (
+            <span className="badge-sm bg-theme-hover text-theme-text-secondary">
+              {group.interval}
+            </span>
+          )}
+          <span className="text-xs text-theme-text-tertiary">
+            {searchTerm ? `${filteredRules.length}/${group.ruleCount}` : group.ruleCount} rule{group.ruleCount !== 1 ? 's' : ''}
+          </span>
+        </div>
+      </button>
+      {!expanded && (
+        <div className="text-xs text-theme-text-secondary mt-1 ml-5.5 flex gap-3">
+          {group.alertCount > 0 && <span>{group.alertCount} alert{group.alertCount !== 1 ? 's' : ''}</span>}
+          {group.recordCount > 0 && <span>{group.recordCount} recording</span>}
+        </div>
+      )}
+      <div
+        className="grid transition-[grid-template-rows] duration-200 ease-out"
+        style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
+      >
+        <div className="overflow-hidden">
+          <div className="mt-2 space-y-2">
+            {filteredRules.map((rule, i) => (
+              rule.type === 'alert'
+                ? <AlertRuleCard key={`alert-${rule.alert}-${i}`} rule={rule} />
+                : <RecordingRuleCard key={`rec-${rule.record}-${i}`} rule={rule} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export function PrometheusRuleRenderer({ data }: PrometheusRuleRendererProps) {
   const groups = getPrometheusRuleGroups(data)
   const totalRules = getPrometheusRuleTotalRules(data)
@@ -17,6 +170,8 @@ export function PrometheusRuleRenderer({ data }: PrometheusRuleRendererProps) {
   const totalRecords = groups.reduce((sum, g) => sum + g.recordCount, 0)
   const conditions = data.status?.conditions
 
+  const [searchTerm, setSearchTerm] = useState('')
+
   return (
     <>
       <Section title="PrometheusRule" icon={Bell}>
@@ -30,28 +185,31 @@ export function PrometheusRuleRenderer({ data }: PrometheusRuleRendererProps) {
 
       {groups.length > 0 && (
         <Section title={`Rule Groups (${groups.length})`} defaultExpanded>
+          {/* Search bar */}
+          {totalRules > 5 && (
+            <div className="relative mb-3">
+              <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
+              <input
+                type="text"
+                placeholder="Filter rules by name or expression..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full pl-7 pr-2 py-1.5 text-xs bg-theme-elevated border border-theme-border rounded-md text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:ring-1 focus:ring-accent/50"
+              />
+            </div>
+          )}
           <div className="space-y-2">
             {groups.map((group, i) => (
-              <div key={i} className="card-inner text-sm">
-                <div className="flex items-center justify-between">
-                  <span className="text-theme-text-primary font-medium">{group.name}</span>
-                  <div className="flex items-center gap-2">
-                    {group.interval && (
-                      <span className="badge-sm bg-theme-hover text-theme-text-secondary">
-                        {group.interval}
-                      </span>
-                    )}
-                    <span className="text-xs text-theme-text-tertiary">
-                      {group.ruleCount} rule{group.ruleCount !== 1 ? 's' : ''}
-                    </span>
-                  </div>
-                </div>
-                <div className="text-xs text-theme-text-secondary mt-1 flex gap-3">
-                  {group.alertCount > 0 && <span>{group.alertCount} alert{group.alertCount !== 1 ? 's' : ''}</span>}
-                  {group.recordCount > 0 && <span>{group.recordCount} recording</span>}
-                </div>
-              </div>
+              <RuleGroupSection key={i} group={group} searchTerm={searchTerm} />
             ))}
+            {searchTerm && groups.every(g => {
+              const term = searchTerm.toLowerCase()
+              return g.rules.every(rule => !matchesSearch(rule, term))
+            }) && (
+              <div className="text-xs text-theme-text-tertiary py-3 text-center">
+                No rules match "{searchTerm}".
+              </div>
+            )}
           </div>
         </Section>
       )}

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

@@ -1,5 +1,5 @@
 import { Server } from 'lucide-react'
-import { Section, PropertyList, Property, KeyValueBadgeList, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, LabelSelectorDisplay, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
 
 interface ReplicaSetRendererProps {
   data: any
@@ -62,7 +62,7 @@ export function ReplicaSetRenderer({ data }: ReplicaSetRendererProps) {
       </Section>
 
       <Section title="Selector">
-        <KeyValueBadgeList items={data.spec?.selector?.matchLabels} />
+        <LabelSelectorDisplay selector={data.spec?.selector} />
       </Section>
 
       <ConditionsSection conditions={data.status?.conditions} />

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

@@ -1,6 +1,7 @@
-import { Server, GitBranch, AlertTriangle } from 'lucide-react'
+import { Server, GitBranch, AlertTriangle, Network } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
 
 interface RolloutRendererProps {
   data: any
@@ -17,10 +18,29 @@ export function RolloutRenderer({ data }: RolloutRendererProps) {
   const isCanary = !!canaryStrategy
   const steps = canaryStrategy?.steps || []
   const currentStepIndex = status.currentStepIndex
+  const trafficRouting = canaryStrategy?.trafficRouting
+
+  // Detect traffic routing provider
+  const trafficProvider = trafficRouting
+    ? (() => {
+        if (trafficRouting.istio) return { name: 'Istio', details: trafficRouting.istio }
+        if (trafficRouting.nginx) return { name: 'Nginx', details: trafficRouting.nginx }
+        if (trafficRouting.alb) return { name: 'ALB', details: trafficRouting.alb }
+        if (trafficRouting.smi) return { name: 'SMI', details: trafficRouting.smi }
+        if (trafficRouting.traefik) return { name: 'Traefik', details: trafficRouting.traefik }
+        if (trafficRouting.ambassador) return { name: 'Ambassador', details: trafficRouting.ambassador }
+        return null
+      })()
+    : null
 
   // Problem detection
   const problems: Array<{ color: 'red' | 'yellow'; message: string }> = []
 
+  // Aborted rollout detection — must come before generic paused check
+  if (status.abort === true) {
+    problems.push({ color: 'red', message: status.message || 'Rollout was aborted' })
+  }
+
   if (phase === 'Degraded') {
     problems.push({ color: 'red', message: status.message || 'Rollout is degraded' })
   }
@@ -39,8 +59,19 @@ export function RolloutRenderer({ data }: RolloutRendererProps) {
     problems.push({ color: 'red', message: invalidSpecCond.message || 'Invalid rollout spec' })
   }
 
-  if (phase === 'Paused') {
-    problems.push({ color: 'yellow', message: 'Rollout is paused' })
+  // Pause conditions — show specific reasons instead of generic "Rollout is paused"
+  const pauseConditions: Array<{ reason: string; startTime?: string }> = status.pauseConditions || []
+  if (phase === 'Paused' && !status.abort) {
+    if (pauseConditions.length > 0) {
+      const reasons = pauseConditions.map((pc: any) => {
+        const reason = pc.reason || 'Unknown'
+        const since = pc.startTime ? ` (since ${formatAge(pc.startTime)})` : ''
+        return `${reason}${since}`
+      })
+      problems.push({ color: 'yellow', message: `Rollout is paused: ${reasons.join('; ')}` })
+    } else {
+      problems.push({ color: 'yellow', message: 'Rollout is paused' })
+    }
   }
 
   // Phase badge color
@@ -153,6 +184,77 @@ export function RolloutRenderer({ data }: RolloutRendererProps) {
         </PropertyList>
       </Section>
 
+      {/* Traffic Routing */}
+      {trafficProvider && (
+        <Section title="Traffic Routing" icon={Network}>
+          <PropertyList>
+            <Property
+              label="Provider"
+              value={
+                <span className="badge-sm status-neutral">{trafficProvider.name}</span>
+              }
+            />
+            {trafficProvider.name === 'Istio' && (
+              <>
+                {trafficProvider.details.virtualService?.name && (
+                  <Property label="VirtualService" value={trafficProvider.details.virtualService.name} />
+                )}
+                {trafficProvider.details.destinationRule?.name && (
+                  <Property label="DestinationRule" value={trafficProvider.details.destinationRule.name} />
+                )}
+              </>
+            )}
+            {trafficProvider.name === 'ALB' && (
+              <>
+                {trafficProvider.details.ingress && (
+                  <Property label="Ingress" value={trafficProvider.details.ingress} />
+                )}
+                {trafficProvider.details.servicePort != null && (
+                  <Property label="Service Port" value={trafficProvider.details.servicePort} />
+                )}
+              </>
+            )}
+            {trafficProvider.name === 'Nginx' && (
+              <>
+                {trafficProvider.details.stableIngress && (
+                  <Property label="Stable Ingress" value={trafficProvider.details.stableIngress} />
+                )}
+                {trafficProvider.details.additionalIngressAnnotations && (
+                  <Property
+                    label="Annotations"
+                    value={Object.keys(trafficProvider.details.additionalIngressAnnotations).length + ' annotations'}
+                  />
+                )}
+              </>
+            )}
+            {trafficProvider.name === 'SMI' && (
+              <>
+                {trafficProvider.details.rootService && (
+                  <Property label="Root Service" value={trafficProvider.details.rootService} />
+                )}
+                {trafficProvider.details.trafficSplitName && (
+                  <Property label="TrafficSplit" value={trafficProvider.details.trafficSplitName} />
+                )}
+              </>
+            )}
+            {trafficProvider.name === 'Traefik' && (
+              <>
+                {trafficProvider.details.weightedTraefikServiceName && (
+                  <Property label="Weighted Service" value={trafficProvider.details.weightedTraefikServiceName} />
+                )}
+              </>
+            )}
+            {trafficProvider.name === 'Ambassador' && (
+              <>
+                {trafficProvider.details.mappings && (
+                  <Property label="Mappings" value={trafficProvider.details.mappings.join(', ')} />
+                )}
+              </>
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
       {/* Canary Steps visual */}
       {isCanary && steps.length > 0 && (
         <Section title={`Canary Steps (${steps.length})`} defaultExpanded>

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

@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { Package, ChevronDown, ChevronRight } from 'lucide-react'
+import { useState, useMemo } from 'react'
+import { Package, ChevronDown, ChevronRight, Search } from 'lucide-react'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { formatTrivyImage } from './trivy-shared'
@@ -13,6 +13,7 @@ const INITIAL_SHOW_COUNT = 100
 export function SbomReportRenderer({ data }: SbomReportRendererProps) {
   const [showAll, setShowAll] = useState(false)
   const [expanded, setExpanded] = useState(true)
+  const [searchTerm, setSearchTerm] = useState('')
 
   const report = data.report || {}
   const scanner = report.scanner || {}
@@ -29,7 +30,18 @@ export function SbomReportRenderer({ data }: SbomReportRendererProps) {
   const bomFormat = components.bomFormat || '-'
   const specVersion = components.specVersion || '-'
 
-  const displayedComponents = showAll ? bom : bom.slice(0, INITIAL_SHOW_COUNT)
+  const filteredBom = useMemo(() => {
+    if (!searchTerm) return bom
+    const term = searchTerm.toLowerCase()
+    return bom.filter((comp: any) =>
+      (comp.name || '').toLowerCase().includes(term) ||
+      (comp.purl || '').toLowerCase().includes(term) ||
+      (comp.type || '').toLowerCase().includes(term)
+    )
+  }, [bom, searchTerm])
+
+  const hasActiveFilter = searchTerm !== ''
+  const displayedComponents = showAll ? filteredBom : filteredBom.slice(0, INITIAL_SHOW_COUNT)
 
   return (
     <>
@@ -58,6 +70,30 @@ export function SbomReportRenderer({ data }: SbomReportRendererProps) {
           </button>
           {expanded && (
             <div className="overflow-x-auto -mx-1">
+              {/* Search */}
+              <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 name, type, or purl..."
+                    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>
+              </div>
+              {hasActiveFilter && (
+                <div className="flex items-center gap-1 mb-2 px-1 text-xs text-theme-text-tertiary">
+                  Showing {filteredBom.length} of {bom.length}
+                  <button
+                    onClick={() => { setSearchTerm(''); setShowAll(false) }}
+                    className="ml-1 text-blue-400 hover:text-blue-300 hover:underline"
+                  >
+                    Clear
+                  </button>
+                </div>
+              )}
               <table className="w-full text-xs">
                 <thead>
                   <tr className="border-b border-theme-border text-theme-text-tertiary">
@@ -81,12 +117,17 @@ export function SbomReportRenderer({ data }: SbomReportRendererProps) {
                   })}
                 </tbody>
               </table>
-              {!showAll && bom.length > INITIAL_SHOW_COUNT && (
+              {displayedComponents.length === 0 && (
+                <div className="py-4 text-center text-xs text-theme-text-tertiary">
+                  No components match the current filter.
+                </div>
+              )}
+              {!showAll && filteredBom.length > INITIAL_SHOW_COUNT && (
                 <button
                   onClick={() => setShowAll(true)}
                   className="mt-2 text-xs text-blue-400 hover:text-blue-300 hover:underline"
                 >
-                  Show all {bom.length} components
+                  Show all {filteredBom.length} components
                 </button>
               )}
             </div>

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

@@ -1,9 +1,10 @@
 import { Lock, Key, FileText } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 
 interface SealedSecretRendererProps {
   data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
 function getScope(annotations: Record<string, string> | undefined): string {
@@ -13,7 +14,7 @@ function getScope(annotations: Record<string, string> | undefined): string {
   return 'strict'
 }
 
-export function SealedSecretRenderer({ data }: SealedSecretRendererProps) {
+export function SealedSecretRenderer({ data, onNavigate }: SealedSecretRendererProps) {
   const spec = data.spec || {}
   const status = data.status || {}
   const conditions = status.conditions || []
@@ -65,6 +66,14 @@ export function SealedSecretRenderer({ data }: SealedSecretRendererProps) {
               </span>
             }
           />
+          <Property label="Target Secret" value={
+            <ResourceLink
+              name={data.spec?.template?.metadata?.name || data.metadata?.name || ''}
+              kind="secrets"
+              namespace={data.metadata?.namespace || ''}
+              onNavigate={onNavigate}
+            />
+          } />
           <Property label="Secret Type" value={secretType} />
           <Property label="Scope" value={scope} />
           <Property label="Observed Gen" value={status.observedGeneration} />

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

@@ -1,5 +1,5 @@
 import { Radio } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, LabelSelectorDisplay } from '../../ui/drawer-components'
 import {
   getServiceMonitorEndpoints,
   getServiceMonitorJobLabel,
@@ -12,7 +12,7 @@ interface ServiceMonitorRendererProps {
 
 export function ServiceMonitorRenderer({ data }: ServiceMonitorRendererProps) {
   const endpoints = getServiceMonitorEndpoints(data)
-  const selector = data.spec?.selector?.matchLabels
+  const selector = data.spec?.selector
   const conditions = data.status?.conditions
 
   return (
@@ -53,11 +53,9 @@ export function ServiceMonitorRenderer({ data }: ServiceMonitorRendererProps) {
         </Section>
       )}
 
-      {selector && Object.keys(selector).length > 0 && (
-        <Section title="Selector">
-          <KeyValueBadgeList items={selector} />
-        </Section>
-      )}
+      <Section title="Selector">
+        <LabelSelectorDisplay selector={selector} emptyText="No selector" />
+      </Section>
 
       <ConditionsSection conditions={conditions} />
     </>

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

@@ -56,7 +56,7 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
         <AlertBanner
           variant="error"
           title={isFailed ? 'Backup Failed' : 'Backup Partially Failed'}
-          message={`${errors} error(s) occurred during backup.`}
+          message={status.failureReason || `${errors} error(s) occurred during backup.`}
           items={validationErrors.length > 0 ? validationErrors : undefined}
         />
       )}
@@ -84,8 +84,16 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
           )}
           <Property label="Duration" value={getBackupDuration(data)} />
           <Property label="Expiration" value={getBackupExpiry(data)} />
-          {errors > 0 && <Property label="Errors" value={String(errors)} />}
-          {warnings > 0 && <Property label="Warnings" value={String(warnings)} />}
+          <Property label="Errors" value={
+            errors > 0
+              ? <span className="text-red-500 dark:text-red-400 font-medium">{errors}</span>
+              : '0'
+          } />
+          <Property label="Warnings" value={
+            warnings > 0
+              ? <span className="text-amber-500 dark:text-amber-400 font-medium">{warnings}</span>
+              : '0'
+          } />
         </PropertyList>
       </Section>
 

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

@@ -49,7 +49,7 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
         <AlertBanner
           variant="error"
           title={isFailed ? 'Restore Failed' : 'Restore Partially Failed'}
-          message={`${errors} error(s) occurred during restore.`}
+          message={status.failureReason || `${errors} error(s) occurred during restore.`}
         />
       )}
       {warnings > 0 && !isFailed && (
@@ -76,8 +76,16 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
             <Property label="Completed" value={formatAge(status.completionTimestamp) + ' ago'} />
           )}
           <Property label="Duration" value={getRestoreDuration(data)} />
-          {errors > 0 && <Property label="Errors" value={String(errors)} />}
-          {warnings > 0 && <Property label="Warnings" value={String(warnings)} />}
+          <Property label="Errors" value={
+            errors > 0
+              ? <span className="text-red-500 dark:text-red-400 font-medium">{errors}</span>
+              : '0'
+          } />
+          <Property label="Warnings" value={
+            warnings > 0
+              ? <span className="text-amber-500 dark:text-amber-400 font-medium">{warnings}</span>
+              : '0'
+          } />
         </PropertyList>
       </Section>
 

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

@@ -1,6 +1,6 @@
 import { Shield } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, AlertBanner, LabelSelectorDisplay } from '../../ui/drawer-components'
 
 interface WebhookConfigRendererProps {
   data: any
@@ -65,8 +65,8 @@ export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendere
                 ? `URL: ${url}`
                 : 'No target'
 
-            const nsLabels = wh.namespaceSelector?.matchLabels
-            const objLabels = wh.objectSelector?.matchLabels
+            const nsSelector = wh.namespaceSelector
+            const objSelector = wh.objectSelector
 
             return (
               <div key={i} className="card-inner-lg">
@@ -119,26 +119,18 @@ export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendere
                 )}
 
                 {/* Selectors */}
-                {(nsLabels || objLabels) && (
+                {(nsSelector || objSelector) && (
                   <div className="mt-2 space-y-1">
-                    {nsLabels && Object.keys(nsLabels).length > 0 && (
+                    {nsSelector && (
                       <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="badge-sm bg-theme-elevated text-theme-text-secondary">{k}={String(v)}</span>
-                          ))}
-                        </div>
+                        <LabelSelectorDisplay selector={nsSelector} />
                       </div>
                     )}
-                    {objLabels && Object.keys(objLabels).length > 0 && (
+                    {objSelector && (
                       <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="badge-sm bg-theme-elevated text-theme-text-secondary">{k}={String(v)}</span>
-                          ))}
-                        </div>
+                        <LabelSelectorDisplay selector={objSelector} />
                       </div>
                     )}
                   </div>