@skyhook-io/k8s-ui 1.8.5 → 1.8.7

package/src/components/resources/ResourcesView.tsx

@@ -129,11 +129,12 @@ import {
   podMatchesProblemCategory,
   SEVERITY_DOT_COLOR,
 } from './resource-utils'
-import { SEVERITY_BADGE, EVENT_TYPE_COLORS } from '../../utils/badge-colors'
+import { SEVERITY_BADGE, EVENT_TYPE_COLORS, SEVERITY_TEXT } from '../../utils/badge-colors'
 import { pluralize } from '../../utils/pluralize'
 import { getPodGpuCount, getNodeGpuCount } from '../../utils/extended-resources'
 import { type CustomColumnDef, type CustomColumnSource, customColumnKey, readCustomColumnValue, sanitizeCustomColumnDefs } from '../../utils/custom-columns'
 import { Tooltip } from '../ui/Tooltip'
+import { AuditBadgeTooltip, type AuditBadgeMessage } from '../audit/AuditBadgeTooltip'
 // CRD-specific cell components (extracted)
 import { GitRepositoryCell, OCIRepositoryCell, HelmRepositoryCell, KustomizationCell, FluxHelmReleaseCell, FluxAlertCell } from './renderers/flux-cells'
 import { ArgoApplicationCell, ArgoApplicationSetCell, ArgoAppProjectCell } from './renderers/argo-cells'
@@ -1800,6 +1801,9 @@ interface ResourcesViewData {
   onNavigate?: (path: string, options?: { replace?: boolean }) => void
   certExpiry?: Record<string, { expired?: boolean; daysLeft: number }>
   certExpiryError?: boolean
+  // Cluster Audit findings for the listed kind, keyed by "namespace/name" (the
+  // list shows one kind at a time, so ns/name is unambiguous). Host-injected.
+  auditBadges?: Record<string, { danger: number; warning: number; messages?: AuditBadgeMessage[] }>
   onOpenLogs?: (params: { namespace: string; podName: string; containers: string[]; containerName?: string }) => void
   onOpenWorkloadLogs?: (params: { namespace: string; workloadKind: string; workloadName: string }) => void
 }
@@ -1852,6 +1856,8 @@ interface ResourcesViewProps {
   topNodeMetrics?: TopNodeMetrics[]
   certExpiry?: Record<string, { expired?: boolean; daysLeft: number }>
   certExpiryError?: boolean
+  // Cluster Audit findings for the selected kind, keyed by "namespace/name".
+  auditBadges?: Record<string, { danger: number; warning: number; messages?: AuditBadgeMessage[] }>
   // Pinned kinds
   pinned?: Array<{ name: string; kind: string; group: string }>
   togglePin?: (kind: { name: string; kind: string; group: string }) => void
@@ -2070,6 +2076,7 @@ export function ResourcesView({
   topNodeMetrics,
   certExpiry,
   certExpiryError,
+  auditBadges,
   pinned = [],
   togglePin = () => {},
   isPinned = () => false,
@@ -4014,9 +4021,10 @@ export function ResourcesView({
     onNavigate,
     certExpiry,
     certExpiryError,
+    auditBadges,
     onOpenLogs,
     onOpenWorkloadLogs,
-  }), [onNavigate, certExpiry, certExpiryError, onOpenLogs, onOpenWorkloadLogs])
+  }), [onNavigate, certExpiry, certExpiryError, auditBadges, onOpenLogs, onOpenWorkloadLogs])
 
   return (
     <ResourcesViewDataContext.Provider value={resourcesViewDataContextValue}>
@@ -5155,6 +5163,7 @@ interface CellContentProps {
 }
 
 function CellContent({ resource, kind, column, group, majorityNodeMinorVersion, extraColumn, nameHref }: CellContentProps) {
+  const { auditBadges } = useContext(ResourcesViewDataContext)
   // Parent-injected extra columns short-circuit the built-in switch.
   // Used by hosts that inject leading columns (e.g. a multi-cluster Cluster column).
   if (extraColumn) {
@@ -5167,6 +5176,8 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
   if (column === 'name') {
     const isTerminating = !!meta.deletionTimestamp
     const nameClass = clsx('text-sm font-medium truncate block', isTerminating ? 'text-theme-text-tertiary line-through' : 'text-theme-text-primary')
+    const audit = auditBadges?.[`${meta.namespace || ''}/${meta.name}`]
+    const auditTotal = audit ? audit.danger + audit.warning : 0
     return (
       <div className="flex items-center gap-1.5 min-w-0">
         <Tooltip content={meta.name}>
@@ -5184,6 +5195,16 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
           )}
         </Tooltip>
         <CopyNameButton name={meta.name} />
+        {auditTotal > 0 && audit && (
+          <Tooltip content={audit.messages && audit.messages.length > 0
+            ? <AuditBadgeTooltip messages={audit.messages} />
+            : `${auditTotal} audit ${auditTotal === 1 ? 'finding' : 'findings'}${audit.danger > 0 ? ` · ${audit.danger} danger` : ''}`}>
+            <span className={clsx('shrink-0 inline-flex items-center gap-0.5 text-[10px] font-medium cursor-help', audit.danger > 0 ? SEVERITY_TEXT.error : SEVERITY_TEXT.warning)}>
+              <AlertTriangle className="w-3 h-3" />
+              {auditTotal}
+            </span>
+          </Tooltip>
+        )}
         {isTerminating && (
           <Tooltip content="Resource is being deleted (has deletionTimestamp set). May be stuck due to finalizers.">
             <span className="shrink-0 flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium bg-red-500/15 text-red-600 dark:text-red-400 rounded">
@@ -6022,6 +6043,7 @@ function ReplicaSetCell({ resource, column }: { resource: any; column: string })
 }
 
 function ServiceCell({ resource, column }: { resource: any; column: string }) {
+  const { auditBadges } = useContext(ResourcesViewDataContext)
   switch (column) {
     case 'type': {
       const status = getServiceStatus(resource)
@@ -6042,6 +6064,20 @@ function ServiceCell({ resource, column }: { resource: any; column: string }) {
       )
     }
     case 'endpoints': {
+      // getServiceEndpointsStatus can't see live pods, so it optimistically
+      // reports "Active" for any service with a selector. The audit's
+      // serviceNoMatchingPods check DOES resolve the selector against live pods —
+      // the only badge-worthy finding a Service can carry — so when it fired,
+      // trust it over the guess instead of showing a false-green "Active".
+      const meta = resource.metadata || {}
+      const flagged = auditBadges?.[`${meta.namespace || ''}/${meta.name}`]
+      if (flagged && flagged.danger + flagged.warning > 0) {
+        return (
+          <span className={clsx('badge', flagged.danger > 0 ? 'status-unhealthy' : 'status-degraded')}>
+            No endpoints
+          </span>
+        )
+      }
       const { status, color } = getServiceEndpointsStatus(resource)
       return (
         <span className={clsx('badge', color)}>

package/src/components/resources/cron-to-human.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { cronToHuman } from './resource-utils'
+
+describe('cronToHuman', () => {
+  it.each([
+    // The reported bug: step-minute with a wildcard hour was caught by the
+    // "Every hour at :MM" branch before the interval branch.
+    ['*/5 * * * *', 'Every 5 minutes'],
+    ['*/15 * * * *', 'Every 15 minutes'],
+    ['*/30 * * * *', 'Every 30 minutes'],
+    ['*/1 * * * *', 'Every minute'],
+    // Literal minute must still read as "Every hour at :MM" (not regressed).
+    ['30 * * * *', 'Every hour at :30'],
+    ['0 * * * *', 'Every hour at :00'],
+    ['5 * * * *', 'Every hour at :05'],
+    // Every minute.
+    ['* * * * *', 'Every minute'],
+    // Step-hour (the #952 fix) must still work.
+    ['0 */6 * * *', 'Every 6 hours'],
+    ['0 */1 * * *', 'Every hour'],
+    // Daily patterns.
+    ['0 0 * * *', 'Daily at midnight'],
+    ['0 9 * * *', 'Daily at 9:00'],
+    // Weekdays — only when hour:minute are literal.
+    ['0 9 * * 1-5', 'Weekdays at 9:00'],
+    ['0 9 * * MON-FRI', 'Weekdays at 9:00'],
+    ['30 14 * * 1-5', 'Weekdays at 14:30'],
+    // Constrained step-minute must NOT claim an unconstrained interval — these run
+    // only in a window, so we fall back to the raw cron rather than mislead.
+    ['*/5 9 * * *', '*/5 9 * * *'],
+    ['*/5 * * * 1-5', '*/5 * * * 1-5'],
+    ['*/5 9 * * 1-5', '*/5 9 * * 1-5'],
+    ['*/1 9 * * *', '*/1 9 * * *'],
+    // Falls back to the raw expression for shapes we don't humanize.
+    ['15 14 1 * *', '15 14 1 * *'],
+    ['*/5', '*/5'],
+    ['', '-'],
+  ])('humanizes %s -> %s', (cron, expected) => {
+    expect(cronToHuman(cron)).toBe(expected)
+  })
+})

package/src/components/resources/get-pod-phase-display.test.ts

@@ -1,5 +1,32 @@
 import { describe, it, expect } from 'vitest'
-import { getPodPhaseDisplay } from './resource-utils'
+import { getPodPhaseDisplay, getPodStatus } from './resource-utils'
+
+describe('getPodStatus', () => {
+  it('keeps a Succeeded pod neutral despite a sidecar that OOMed before completion', () => {
+    const succeededWithOomedSidecar = {
+      status: {
+        phase: 'Succeeded',
+        containerStatuses: [
+          { name: 'main', ready: false, state: { terminated: { reason: 'Completed', exitCode: 0 } } },
+          { name: 'sidecar', ready: false, state: { terminated: { reason: 'OOMKilled', exitCode: 137 } } },
+        ],
+      },
+    }
+    const r = getPodStatus(succeededWithOomedSidecar)
+    expect(r.text).toBe('Completed')
+    expect(r.level).toBe('neutral')
+  })
+
+  it('still flags a crash-looping (non-terminal) pod as unhealthy', () => {
+    const crashing = {
+      status: {
+        phase: 'Running',
+        containerStatuses: [{ name: 'app', ready: false, state: { waiting: { reason: 'CrashLoopBackOff' } } }],
+      },
+    }
+    expect(getPodStatus(crashing).level).toBe('unhealthy')
+  })
+})
 
 const podRunningHealthy = {
   status: {
@@ -192,12 +219,59 @@ describe('getPodPhaseDisplay', () => {
     expect(r.level).toBe('unhealthy')
   })
 
-  it('marks pods with deletionTimestamp as Terminating regardless of phase', () => {
+  it('marks a long-terminating pod as Terminating + degraded (stuck shutdown)', () => {
     const r = getPodPhaseDisplay(podTerminating)
     expect(r.text).toBe('Running — Terminating')
     expect(r.level).toBe('degraded')
   })
 
+  it('keeps a recently-terminating pod neutral (graceful shutdown in progress)', () => {
+    const recent = {
+      metadata: { deletionTimestamp: new Date(Date.now() - 30 * 1000).toISOString() },
+      status: { phase: 'Running', containerStatuses: [{ name: 'app', ready: true, restartCount: 0 }] },
+    }
+    const r = getPodPhaseDisplay(recent)
+    expect(r.text).toBe('Running — Terminating')
+    expect(r.level).toBe('neutral')
+  })
+
+  it('treats a completing pod (container exited 0, not ready) as healthy', () => {
+    const completing = {
+      status: {
+        phase: 'Running',
+        containerStatuses: [
+          { name: 'app', ready: false, restartCount: 0, state: { terminated: { reason: 'Completed', exitCode: 0 } } },
+        ],
+      },
+    }
+    const r = getPodPhaseDisplay(completing)
+    expect(r.text).toBe('Running')
+    expect(r.level).toBe('healthy')
+  })
+
+  it('keeps a Failed pod unhealthy even while it is terminating', () => {
+    const failedTerminating = {
+      metadata: { deletionTimestamp: new Date().toISOString() },
+      status: { phase: 'Failed' },
+    }
+    const r = getPodPhaseDisplay(failedTerminating)
+    expect(r.text).toBe('Failed')
+    expect(r.level).toBe('unhealthy')
+  })
+
+  it('surfaces a fatal container failure even while the pod is terminating', () => {
+    const terminatingCrash = {
+      metadata: { deletionTimestamp: new Date().toISOString() },
+      status: {
+        phase: 'Running',
+        containerStatuses: [{ name: 'app', ready: false, state: { waiting: { reason: 'CrashLoopBackOff' } } }],
+      },
+    }
+    const r = getPodPhaseDisplay(terminatingCrash)
+    expect(r.text).toBe('Running — CrashLoopBackOff')
+    expect(r.level).toBe('unhealthy')
+  })
+
   it('falls back to Unknown for missing/unknown phase', () => {
     expect(getPodPhaseDisplay({}).level).toBe('unknown')
     expect(getPodPhaseDisplay({}).phase).toBe('Unknown')
@@ -206,10 +280,48 @@ describe('getPodPhaseDisplay', () => {
 
   it('handles Succeeded/Pending/Failed phases', () => {
     expect(getPodPhaseDisplay({ status: { phase: 'Succeeded' } }).level).toBe('neutral')
-    expect(getPodPhaseDisplay({ status: { phase: 'Pending' } }).level).toBe('degraded')
+    // A freshly-created Pending pod is benign (neutral), not degraded.
+    expect(getPodPhaseDisplay({ status: { phase: 'Pending' } }).level).toBe('neutral')
     expect(getPodPhaseDisplay({ status: { phase: 'Failed' } }).level).toBe('unhealthy')
   })
 
+  it('flags Unschedulable immediately, but gives plain young Pending a grace window', () => {
+    // The scheduler tried and failed — surface it now, no grace (matches backend).
+    const unsched = {
+      status: { phase: 'Pending', conditions: [{ type: 'PodScheduled', status: 'False', reason: 'Unschedulable' }] },
+    }
+    expect(getPodPhaseDisplay(unsched).text).toBe('Pending — Unschedulable')
+    expect(getPodPhaseDisplay(unsched).level).toBe('degraded')
+
+    // Plain Pending (not yet placed) is benign while young, degraded once stuck.
+    expect(getPodPhaseDisplay({ status: { phase: 'Pending' } }).level).toBe('neutral')
+    const stuckPending = {
+      metadata: { creationTimestamp: new Date(Date.now() - 10 * 60 * 1000).toISOString() },
+      status: { phase: 'Pending' },
+    }
+    expect(getPodPhaseDisplay(stuckPending).level).toBe('degraded')
+  })
+
+  it('flags a failing init container immediately, even on a young Pending pod', () => {
+    const initFail = {
+      metadata: { creationTimestamp: new Date().toISOString() },
+      status: {
+        phase: 'Pending',
+        initContainerStatuses: [{ name: 'init', ready: false, state: { waiting: { reason: 'ImagePullBackOff' } } }],
+      },
+    }
+    const r = getPodPhaseDisplay(initFail)
+    expect(r.text).toBe('Pending — ImagePullBackOff')
+    expect(r.level).toBe('unhealthy')
+  })
+
+  it('flags broadened fatal reasons like InvalidImageName', () => {
+    const bad = {
+      status: { phase: 'Pending', containerStatuses: [{ name: 'app', state: { waiting: { reason: 'InvalidImageName' } } }] },
+    }
+    expect(getPodPhaseDisplay(bad).level).toBe('unhealthy')
+  })
+
   it('flags ErrImagePull as unhealthy', () => {
     const r = getPodPhaseDisplay(podErrImagePull)
     expect(r.text).toBe('Pending — ErrImagePull')

package/src/components/resources/get-pod-problems.test.ts

@@ -124,4 +124,22 @@ describe('getPodProblems', () => {
       }),
     ).not.toContainEqual(expect.objectContaining({ message: 'Sandbox Startup Stalled' }))
   })
+
+  it('does not flag a completing Job pod (Running, container exited 0, Ready=false) as Not Ready', () => {
+    expect(
+      getPodProblems({
+        status: {
+          phase: 'Running',
+          containerStatuses: [
+            {
+              name: 'job',
+              ready: false,
+              restartCount: 0,
+              state: { terminated: { reason: 'Completed', exitCode: 0 } },
+            },
+          ],
+        },
+      }),
+    ).not.toContainEqual(expect.objectContaining({ message: 'Not Ready' }))
+  })
 })

package/src/components/resources/health-golden.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+import {
+  getPodStatus,
+  getWorkloadStatus,
+  getJobStatus,
+  getCronJobStatus,
+  getPVCStatus,
+  type HealthLevel,
+} from './resource-utils'
+
+// Cross-language health contract. This loads the SAME fixture as the Go test
+// (pkg/health/golden_crosslang_test.go) and asserts the TS table classifiers
+// produce the level pkg/health recorded. pkg/health is the source of truth; this
+// is the anti-drift gate that keeps the two implementations from diverging.
+//
+// If this fails after a backend health change, the TS classifier in
+// resource-utils.ts must be updated to match — not the other way round.
+
+interface GoldenVector {
+  name: string
+  kind: string
+  level: HealthLevel
+  object: any
+}
+
+const here = dirname(fileURLToPath(import.meta.url))
+// src/components/resources -> repo root is five levels up, then pkg/health/testdata.
+const fixturePath = resolve(here, '../../../../../pkg/health/testdata/golden_vectors.json')
+const vectors: GoldenVector[] = JSON.parse(readFileSync(fixturePath, 'utf8')).vectors
+
+// Map a fixture kind onto the TS classifier that backs its table badge.
+function classify(kind: string, object: any): HealthLevel {
+  switch (kind) {
+    case 'Pod':
+      return getPodStatus(object).level
+    case 'Deployment':
+      return getWorkloadStatus(object, 'deployments').level
+    case 'StatefulSet':
+      return getWorkloadStatus(object, 'statefulsets').level
+    case 'DaemonSet':
+      return getWorkloadStatus(object, 'daemonsets').level
+    case 'Job':
+      return getJobStatus(object).level
+    case 'CronJob':
+      return getCronJobStatus(object).level
+    case 'PersistentVolumeClaim':
+      return getPVCStatus(object).level
+    default:
+      throw new Error(`golden vector kind "${kind}" has no TS classifier mapping`)
+  }
+}
+
+describe('health golden vectors (cross-language contract with pkg/health)', () => {
+  it('loaded a non-empty fixture shared with the Go test', () => {
+    expect(vectors.length).toBeGreaterThan(0)
+  })
+
+  for (const v of vectors) {
+    it(`${v.kind}: ${v.name}`, () => {
+      expect(classify(v.kind, v.object)).toBe(v.level)
+    })
+  }
+})

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

@@ -15,17 +15,24 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
   const isSuspended = spec.suspend === true
   const hasNeverRun = !status.lastScheduleTime
 
-  // Calculate time since last success vs last schedule
-  const lastScheduleAge = status.lastScheduleTime ? new Date().getTime() - new Date(status.lastScheduleTime).getTime() : 0
-  const lastSuccessAge = status.lastSuccessfulTime ? new Date().getTime() - new Date(status.lastSuccessfulTime).getTime() : 0
-  const recentFailures = lastScheduleAge > 0 && lastSuccessAge > lastScheduleAge
+  // "Recent failures" means the latest scheduled run didn't reach success.
+  // Only meaningful once nothing is running — while a job is active the most
+  // recent run is simply still in flight, not failing. With concurrencyPolicy
+  // Allow an older failed run can overlap a new active one; CronJob status only
+  // carries aggregate timestamps, so we accept missing that rare case here (the
+  // failed Job still surfaces in the job list / topology) rather than reviving
+  // the false positive that fired on every normal in-flight run.
+  const activeJobs = status.active?.length || 0
+  const lastSchedule = status.lastScheduleTime ? new Date(status.lastScheduleTime).getTime() : 0
+  const lastSuccess = status.lastSuccessfulTime ? new Date(status.lastSuccessfulTime).getTime() : 0
+  const recentFailures = activeJobs === 0 && lastSchedule > 0 && lastSchedule > lastSuccess
 
   return (
     <>
-      {/* Suspended warning */}
+      {/* Suspended is an intentional operator state, not a fault — keep it informational. */}
       {isSuspended && (
         <AlertBanner
-          variant="warning"
+          variant="info"
           icon={Pause}
           title="CronJob Suspended"
           message="No new jobs will be scheduled until this CronJob is resumed."
@@ -42,7 +49,7 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
       )}
 
       {/* Recent failures warning */}
-      {recentFailures && (
+      {recentFailures && !isSuspended && (
         <AlertBanner
           variant="error"
           title="Recent Jobs Failing"

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

@@ -1,6 +1,7 @@
 import { Radio, Server, Waypoints } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
 interface EndpointSliceRendererProps {
@@ -69,7 +70,7 @@ export function EndpointSliceRenderer({ data, onNavigate }: EndpointSliceRendere
                     )}
                   </div>
                   <div className="flex items-center gap-2 shrink-0">
-                    <span className="badge-sm bg-theme-elevated text-theme-text-secondary border border-theme-border">{port.protocol || 'TCP'}</span>
+                    <Badge size="sm" protocol={port.protocol || 'TCP'}>{port.protocol || 'TCP'}</Badge>
                     <span className="font-mono text-theme-text-secondary">{port.port ?? '-'}</span>
                   </div>
                 </div>
@@ -92,9 +93,9 @@ export function EndpointSliceRenderer({ data, onNavigate }: EndpointSliceRendere
                     <div className="min-w-0 space-y-1">
                       <div className="flex flex-wrap items-center gap-1.5">
                         {(endpoint.addresses || []).map((address: string) => (
-                          <span key={address} className="badge-sm bg-theme-elevated text-theme-text-primary border border-theme-border font-mono">
+                          <Badge key={address} size="sm" tone="structural" className="font-mono">
                             {address}
-                          </span>
+                          </Badge>
                         ))}
                       </div>
                       {targetLabel && (

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

@@ -1,6 +1,6 @@
 import { Globe, ArrowRight, Network, Filter } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
 interface GRPCRouteRendererProps {
@@ -77,7 +77,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
               hostnames.length > 0 ? (
                 <div className="flex flex-wrap gap-1">
                   {hostnames.map((h: string) => (
-                    <span key={h} className="badge bg-theme-elevated text-theme-text-secondary">{h}</span>
+                    <Badge key={h} tone="structural">{h}</Badge>
                   ))}
                 </div>
               ) : (
@@ -150,7 +150,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                       {match.method && (
                         <>
                           {match.method.type && match.method.type !== 'Exact' && (
-                            <span className="px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded text-[10px]">{match.method.type}</span>
+                            <Badge tone="accent1" size="sm">{match.method.type}</Badge>
                           )}
                           {match.method.service && (
                             <span>
@@ -200,9 +200,9 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                     <div className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
                       <Filter className="w-3 h-3 text-theme-text-tertiary" />
                       {filters.map((filter: any, filterIdx: number) => (
-                        <span key={filterIdx} className="px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded">
+                        <Badge key={filterIdx} tone="accent1" size="sm">
                           {filter.type}
-                        </span>
+                        </Badge>
                       ))}
                     </div>
                   </div>
@@ -231,20 +231,14 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                   </div>
                   <div className="flex flex-wrap gap-2">
                     {accepted && (
-                      <span className={clsx(
-                        'badge',
-                        accepted.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
-                      )}>
+                      <Badge severity={accepted.status === 'True' ? 'success' : 'error'}>
                         {accepted.status === 'True' ? 'Accepted' : 'Not Accepted'}
-                      </span>
+                      </Badge>
                     )}
                     {resolved && (
-                      <span className={clsx(
-                        'badge',
-                        resolved.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
-                      )}>
+                      <Badge severity={resolved.status === 'True' ? 'success' : 'warning'}>
                         {resolved.status === 'True' ? 'Refs Resolved' : 'Unresolved Refs'}
-                      </span>
+                      </Badge>
                     )}
                   </div>
                   {accepted?.message && accepted.status === 'False' && (

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

@@ -1,7 +1,6 @@
 import { Cpu } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
-import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { Badge } from '../../ui/Badge'
 
 interface GatewayClassRendererProps {
   data: any
@@ -35,16 +34,9 @@ export function GatewayClassRenderer({ data }: GatewayClassRendererProps) {
           <Property
             label="Accepted"
             value={
-              <span className={clsx(
-                'badge',
-                isAccepted
-                  ? 'bg-green-500/20 text-green-400'
-                  : isNotAccepted
-                    ? 'bg-red-500/20 text-red-400'
-                    : BADGE_INACTIVE
-              )}>
+              <Badge severity={isAccepted ? 'success' : isNotAccepted ? 'error' : 'neutral'}>
                 {isAccepted ? 'True' : isNotAccepted ? 'False' : 'Unknown'}
-              </span>
+              </Badge>
             }
           />
         </PropertyList>

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

@@ -2,14 +2,7 @@ import { Globe, Radio, Lock } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
-
-const protocolColors: Record<string, string> = {
-  HTTP: 'bg-blue-500/20 text-blue-400',
-  HTTPS: 'bg-green-500/20 text-green-400',
-  TLS: 'bg-green-500/20 text-green-400',
-  TCP: 'bg-orange-500/20 text-orange-400',
-  UDP: 'bg-purple-500/20 text-purple-400',
-}
+import { Badge } from '../../ui/Badge'
 
 interface GatewayRendererProps {
   data: any
@@ -68,31 +61,17 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
           <Property
             label="Accepted"
             value={
-              <span className={clsx(
-                'badge',
-                isAccepted
-                  ? 'bg-green-500/20 text-green-400'
-                  : isNotAccepted
-                    ? 'bg-red-500/20 text-red-400'
-                    : BADGE_INACTIVE
-              )}>
+              <Badge severity={isAccepted ? 'success' : isNotAccepted ? 'error' : 'neutral'}>
                 {isAccepted ? 'True' : isNotAccepted ? 'False' : 'Unknown'}
-              </span>
+              </Badge>
             }
           />
           <Property
             label="Programmed"
             value={
-              <span className={clsx(
-                'badge',
-                isProgrammed
-                  ? 'bg-green-500/20 text-green-400'
-                  : isNotProgrammed
-                    ? 'bg-red-500/20 text-red-400'
-                    : BADGE_INACTIVE
-              )}>
+              <Badge severity={isProgrammed ? 'success' : isNotProgrammed ? 'error' : 'neutral'}>
                 {isProgrammed ? 'True' : isNotProgrammed ? 'False' : 'Unknown'}
-              </span>
+              </Badge>
             }
           />
         </PropertyList>
@@ -133,23 +112,20 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
                   <div className="flex items-center gap-2">
                     {isHTTPS && <Lock className="w-3.5 h-3.5 text-green-400" />}
                     <span className="text-sm font-medium text-theme-text-primary">{listener.name}</span>
-                    <span className={clsx(
-                      'px-1.5 py-0.5 rounded text-[10px] font-medium',
-                      protocolColors[listener.protocol] || BADGE_INACTIVE
-                    )}>
+                    <Badge protocol={listener.protocol} size="sm">
                       {listener.protocol}:{listener.port}
-                    </span>
+                    </Badge>
                   </div>
                   <div className="flex items-center gap-1">
                     {isConflicted && (
-                      <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-500/20 text-red-400">
+                      <Badge severity="error" size="sm">
                         Conflicted
-                      </span>
+                      </Badge>
                     )}
                     {hasUnresolvedRefs && (
-                      <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-yellow-500/20 text-yellow-400">
+                      <Badge severity="warning" size="sm">
                         Unresolved Refs
-                      </span>
+                      </Badge>
                     )}
                     {listenerAccepted && (
                       <span className={clsx(