@skyhook-io/k8s-ui 1.3.2 → 1.4.1

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

@@ -1,6 +1,5 @@
-import { Package, AlertTriangle, CheckCircle2 } from 'lucide-react'
-import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { Package, CheckCircle2 } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { formatBytes } from '../../../utils/format'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
@@ -36,45 +35,7 @@ export function OCIRepositoryRenderer({ data }: OCIRepositoryRendererProps) {
 
   return (
     <>
-      {/* Problem alerts */}
-      {problems.map((problem, i) => (
-        <div
-          key={i}
-          className={clsx(
-            'mb-4 p-3 border rounded-lg',
-            problem.color === 'red'
-              ? 'bg-red-500/10 border-red-500/30'
-              : 'bg-yellow-500/10 border-yellow-500/30'
-          )}
-        >
-          <div className="flex items-start gap-2">
-            <AlertTriangle
-              className={clsx(
-                'w-4 h-4 mt-0.5 shrink-0',
-                problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-              )}
-            />
-            <div className="flex-1 min-w-0">
-              <div
-                className={clsx(
-                  'text-sm font-medium',
-                  problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-                )}
-              >
-                {problem.color === 'red' ? 'Issue Detected' : 'Warning'}
-              </div>
-              <div
-                className={clsx(
-                  'text-xs mt-1',
-                  problem.color === 'red' ? 'text-red-300/80' : 'text-yellow-300/80'
-                )}
-              >
-                {problem.message}
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
+      <ProblemAlerts problems={problems} />
 
       {/* Status section */}
       <Section title="Status">

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

@@ -1,6 +1,6 @@
 import { Shield, Activity } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, LabelSelectorDisplay, AlertBanner } from '../../ui/drawer-components'
 
 interface PodDisruptionBudgetRendererProps {
   data: any
@@ -9,8 +9,7 @@ interface PodDisruptionBudgetRendererProps {
 export function PodDisruptionBudgetRenderer({ data }: PodDisruptionBudgetRendererProps) {
   const spec = data.spec || {}
   const status = data.status || {}
-  const matchLabels = spec.selector?.matchLabels || {}
-  const hasSelector = Object.keys(matchLabels).length > 0
+  const selector = spec.selector
 
   // Determine budget type
   const hasMaxUnavailable = spec.maxUnavailable !== undefined && spec.maxUnavailable !== null
@@ -113,11 +112,7 @@ export function PodDisruptionBudgetRenderer({ data }: PodDisruptionBudgetRendere
       </Section>
 
       <Section title="Selector">
-        {hasSelector ? (
-          <KeyValueBadgeList items={matchLabels} />
-        ) : (
-          <div className="text-sm text-theme-text-tertiary">All pods in namespace</div>
-        )}
+        <LabelSelectorDisplay selector={selector} emptyText="All pods in namespace" />
       </Section>
 
       <ConditionsSection conditions={status.conditions} />

package/src/components/resources/renderers/PodMonitorRenderer.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 {
   getPodMonitorEndpoints,
   getPodMonitorNamespaceSelector,
@@ -11,7 +11,7 @@ interface PodMonitorRendererProps {
 
 export function PodMonitorRenderer({ data }: PodMonitorRendererProps) {
   const endpoints = getPodMonitorEndpoints(data)
-  const selector = data.spec?.selector?.matchLabels
+  const selector = data.spec?.selector
   const conditions = data.status?.conditions
 
   return (
@@ -51,11 +51,9 @@ export function PodMonitorRenderer({ data }: PodMonitorRendererProps) {
         </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/PodRenderer.tsx

@@ -2,7 +2,7 @@ import { useState, type ReactNode, type JSX } from 'react'
 import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen, List, Eye, EyeOff } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink } from '../../ui/drawer-components'
-import { formatResources, formatDuration } from '../resource-utils'
+import { formatResources, formatDuration, getPodProblems, SEVERITY_DOT_COLOR } from '../resource-utils'
 import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
 import type { ResolvedEnvFrom } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
@@ -77,70 +77,6 @@ interface PodRendererProps {
   resolvedEnvFrom?: ResolvedEnvFrom
 }
 
-// Extract problems from pod status and conditions
-function getPodProblems(data: any): string[] {
-  const problems: string[] = []
-  const phase = data.status?.phase
-  const conditions = data.status?.conditions || []
-  const containerStatuses = data.status?.containerStatuses || []
-  const initContainerStatuses = data.status?.initContainerStatuses || []
-
-  // Check phase
-  if (phase === 'Failed' || phase === 'Unknown') {
-    problems.push(`Pod is in ${phase} state`)
-  }
-
-  // Check conditions for scheduling/init issues
-  for (const cond of conditions) {
-    if (cond.status === 'False') {
-      if (cond.type === 'PodScheduled' && cond.reason) {
-        problems.push(`Scheduling: ${cond.reason}${cond.message ? ' - ' + cond.message : ''}`)
-      } else if (cond.type === 'Initialized' && cond.message) {
-        problems.push(`Init failed: ${cond.message}`)
-      } else if (cond.type === 'ContainersReady' && cond.reason === 'ContainersNotReady') {
-        // Will be covered by container status details
-      } else if (cond.message) {
-        problems.push(`${cond.type}: ${cond.message}`)
-      }
-    }
-  }
-
-  // Check init container failures
-  for (const initStatus of initContainerStatuses) {
-    if (initStatus.state?.waiting?.reason && initStatus.state.waiting.reason !== 'PodInitializing') {
-      problems.push(`Init container "${initStatus.name}": ${initStatus.state.waiting.reason}`)
-    }
-    if (initStatus.state?.terminated?.exitCode && initStatus.state.terminated.exitCode !== 0) {
-      problems.push(`Init container "${initStatus.name}" failed with exit code ${initStatus.state.terminated.exitCode}`)
-    }
-  }
-
-  // Check container issues (most important)
-  for (const status of containerStatuses) {
-    const waiting = status.state?.waiting
-    const terminated = status.state?.terminated
-
-    if (waiting?.reason && waiting.reason !== 'ContainerCreating') {
-      const msg = `Container "${status.name}": ${waiting.reason}`
-      if (waiting.reason === 'ImagePullBackOff' || waiting.reason === 'ErrImagePull') {
-        problems.push(msg + (waiting.message ? ` - ${waiting.message.slice(0, 100)}` : ''))
-      } else if (waiting.reason === 'CrashLoopBackOff') {
-        problems.push(msg + ' (container keeps crashing)')
-      } else {
-        problems.push(msg)
-      }
-    }
-
-    if (terminated?.reason === 'OOMKilled') {
-      problems.push(`Container "${status.name}" was OOMKilled - increase memory limit`)
-    } else if (terminated?.exitCode && terminated.exitCode !== 0) {
-      problems.push(`Container "${status.name}" exited with code ${terminated.exitCode}`)
-    }
-  }
-
-  return problems
-}
-
 // ── Env vars section — extracted to use hooks (useState for reveal) ──────────
 
 function SecretValueCell({ value }: { value: string }) {
@@ -189,13 +125,13 @@ function resolveEnvValueNode(env: any): JSX.Element {
   }
   if (env.valueFrom?.configMapKeyRef) {
     const { name, key } = env.valueFrom.configMapKeyRef
-    return <span className="text-blue-400/70 text-[10px] shrink-0 self-center px-1 py-0.5 bg-blue-500/10 rounded">configmap:{name}[{key}]</span>
+    return <span className="text-blue-700 dark:text-blue-400/80 text-[10px] shrink-0 self-center px-1 py-0.5 bg-blue-500/10 rounded">configmap:{name}[{key}]</span>
   }
   if (env.valueFrom?.fieldRef) {
-    return <span className="text-purple-400/70 break-all">field:{env.valueFrom.fieldRef.fieldPath}</span>
+    return <span className="text-purple-700 dark:text-purple-400/80 break-all">field:{env.valueFrom.fieldRef.fieldPath}</span>
   }
   if (env.valueFrom?.resourceFieldRef) {
-    return <span className="text-purple-400/70 break-all">resource:{env.valueFrom.resourceFieldRef.resource}</span>
+    return <span className="text-purple-700 dark:text-purple-400/80 break-all">resource:{env.valueFrom.resourceFieldRef.resource}</span>
   }
   return <span className="text-theme-text-primary break-all min-w-0">{env.value ?? ''}</span>
 }
@@ -218,10 +154,13 @@ function EnvVarsSection({
   resolvedEnvFrom?: ResolvedEnvFrom
 }) {
   const allContainers = [...initContainers, ...containers]
-  const multiContainer = allContainers.filter((c: any) => c.env?.length > 0 || c.envFrom?.length > 0).length > 1
+  const containersWithEnv = allContainers.filter((c: any) => c.env?.length > 0 || c.envFrom?.length > 0)
+  const multiContainer = containersWithEnv.length > 1
+  const totalVars = allContainers.reduce((sum: number, c: any) => sum + (c.env?.length || 0) + (c.envFrom?.length || 0), 0)
+  const subtitle = multiContainer ? `${totalVars} vars across ${containersWithEnv.length} containers` : `${totalVars} vars`
 
   return (
-    <Section title="Environment Variables" icon={List}>
+    <Section title={`Environment Variables  ·  ${subtitle}`} icon={List} defaultExpanded={false}>
       <div className="space-y-4">
         {allContainers.map((container: any) => {
           const envVars: any[] = container.env || []
@@ -247,7 +186,7 @@ function EnvVarsSection({
                       <div className="flex items-center gap-1.5 text-xs font-mono py-0.5">
                         <span className={clsx(
                           'shrink-0 px-1 py-0.5 rounded text-[10px]',
-                          isSecret ? 'bg-amber-500/10 dark:bg-yellow-500/10 text-amber-700 dark:text-yellow-400' : 'bg-blue-500/10 text-blue-400'
+                          isSecret ? 'bg-amber-500/10 dark:bg-yellow-500/10 text-amber-700 dark:text-yellow-400' : 'bg-blue-500/10 text-blue-700 dark:text-blue-400/80'
                         )}>
                           {prefix}
                         </span>
@@ -312,8 +251,8 @@ export function PodRenderer({
   const isRunning = data.status?.phase === 'Running'
 
   // Check for problems
-  const problems = getPodProblems(data)
-  const hasProblems = problems.length > 0
+  const podProblems = getPodProblems(data)
+  const hasProblems = podProblems.length > 0
 
   // Image filesystem modal state
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
@@ -379,7 +318,16 @@ export function PodRenderer({
     <>
       {/* Problems alert - shown at top when there are issues */}
       {hasProblems && (
-        <AlertBanner variant="error" title="Issues Detected" items={problems} />
+        <AlertBanner variant="error" title="Issues Detected">
+          <ul className="text-xs space-y-1">
+            {podProblems.map((p, i) => (
+              <li key={i} className="flex items-center gap-1.5">
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', SEVERITY_DOT_COLOR[p.severity])} />
+                <span className="text-red-600 dark:text-red-400">{p.message}</span>
+              </li>
+            ))}
+          </ul>
+        </AlertBanner>
       )}
 
       {/* Status section */}

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>