@skyhook-io/k8s-ui 1.8.4 → 1.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -85,7 +85,7 @@
     "yaml": ">=2.0.0"
   },
   "devDependencies": {
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@xterm/addon-fit": "^0.11.0",

package/src/components/charts/PrometheusChartsView.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx'
 import { BarChart3, Wifi, WifiOff, Loader2 } from 'lucide-react'
 import { AreaChart } from './AreaChart'
+import { PaneLoader } from '../ui/PaneLoader'
 import { MetricsSummary } from './MetricsSummary'
 import { SeriesLegend } from './SeriesLegend'
 import type { TimeSeries, ReferenceLine } from './types'
@@ -108,10 +109,7 @@ export function PrometheusChartsView({
   if (statusLoading) {
     if (!showEmptyState) return null
     return (
-      <div className="flex items-center justify-center py-12 text-theme-text-tertiary">
-        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-        Checking Prometheus availability...
-      </div>
+      <PaneLoader label="Checking Prometheus availability…" className="py-12" />
     )
   }
 
@@ -181,10 +179,7 @@ export function PrometheusChartsView({
       {/* Chart area */}
       <div className="min-h-[280px] flex-1 p-4">
         {metricsLoading ? (
-          <div className="flex min-h-[240px] items-center justify-center text-theme-text-tertiary">
-            <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-            Loading metrics...
-          </div>
+          <PaneLoader label="Loading metrics…" className="min-h-[240px]" />
         ) : metricsError ? (
           <div className="flex h-full items-center justify-center text-sm text-red-400">
             Failed to load metrics: {(metricsError as Error).message}

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -1,5 +1,6 @@
 import { useEffect, type ComponentType, type ReactNode } from 'react'
 import { ArrowDownUp, ChevronDown, ChevronRight, Clock3, GitBranch, GitCommit, Loader2, Pause, Play, RefreshCw, Settings, Trash2, XCircle, Zap } from 'lucide-react'
+import { PaneLoader } from '../ui/PaneLoader'
 
 import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
 import { GitOpsIssuesBand, GitOpsStatusStrip } from './insights'
@@ -487,9 +488,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
       )}
 
       {resourceLoading ? (
-        <div className="flex flex-1 items-center justify-center text-theme-text-secondary">
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading GitOps resource…
-        </div>
+        <PaneLoader label="Loading GitOps resource…" className="flex-1" />
       ) : resourceError ? (
         <div className="p-4 text-sm text-red-500">Failed to load resource: {resourceError.message}</div>
       ) : (

package/src/components/gitops/GitOpsTableView.tsx

@@ -12,7 +12,6 @@ import {
   HeartPulse,
   LayoutGrid,
   List,
-  Loader2,
   Pause,
   Play,
   RefreshCw,
@@ -33,6 +32,7 @@ import { FacetSection, FacetButton } from '../ui/Facet'
 import { SortableTh, TH_CLASS, type SortDir } from '../ui/SortableTh'
 import { DistributionBar } from '../ui/DistributionBar'
 import { RowActionMenu, type RowActionItem } from '../ui/RowActionMenu'
+import { PaneLoader } from '../ui/PaneLoader'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { getGitOpsResourceStatus } from './detail-helpers'
 import { isArgoSuspendedByRadar } from '../resources/resource-utils-argo'
@@ -754,9 +754,7 @@ export function GitOpsTableView({
               {modeLabel(mode)} view is queued behind the application list.
             </div>
           ) : loading && filteredRows.length === 0 ? (
-            <div className="flex h-full items-center justify-center text-sm text-theme-text-secondary">
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading GitOps applications...
-            </div>
+            <PaneLoader label="Loading GitOps applications…" className="h-full" />
           ) : error ? (
             <div className="p-4 text-sm text-red-500">Failed to load GitOps applications: {error.message}</div>
           ) : filteredRows.length === 0 ? (

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -1,4 +1,5 @@
 import { AlertTriangle, ChevronDown, ChevronRight, CircleAlert, Clock3, GitBranch, GitCommit, Info, Loader2, Plus, Trash2 } from 'lucide-react'
+import { PaneLoader } from '../../ui/PaneLoader'
 import { clsx } from 'clsx'
 import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react'
 import type { GitOpsChange, GitOpsHistoryItem, GitOpsInsight, GitOpsInsightRef, GitOpsIssue, GitOpsPlanItem, GitOpsRemediation, GitOpsResourceTree, GitOpsTreeNode } from '../../../types'
@@ -725,7 +726,7 @@ export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tr
     return <InsightErrorState error={error} />
   }
   if (!insight) {
-    return <CenteredText>Loading GitOps resources...</CenteredText>
+    return <PaneLoader label="Loading GitOps resources…" className="h-full" />
   }
   // Build plan metadata maps keyed by ref so each Change row can advertise
   // its sync step, hook phase, and wave assignment. The plan and changes
@@ -1274,7 +1275,7 @@ interface GitOpsActivityInsightViewProps {
 
 export function GitOpsActivityInsightView({ insight, error, onRollback }: GitOpsActivityInsightViewProps) {
   if (error && !insight) return <InsightErrorState error={error} />
-  if (!insight) return <CenteredText>Loading GitOps activity...</CenteredText>
+  if (!insight) return <PaneLoader label="Loading GitOps activity…" className="h-full" />
   const canRollback = !!insight.capabilities?.rollback && !!onRollback
   // Auto-sync makes rollback futile — the controller would re-sync to HEAD
   // immediately. Argo's own Web UI disables the button in this state. Detect
@@ -1429,10 +1430,6 @@ function SectionHeader({ icon: Icon, title, hint }: { icon: typeof GitBranch; ti
   )
 }
 
-function CenteredText({ children }: { children: ReactNode }) {
-  return <div className="flex h-full items-center justify-center text-sm text-theme-text-secondary">{children}</div>
-}
-
 // Surfaced when the insights endpoint errors. Without this the subviews
 // would render their "Loading…" placeholder forever, hiding the failure
 // from the user and from the operator looking at logs.

package/src/components/gitops/tree/GitOpsTreeGraph.tsx

@@ -15,7 +15,8 @@ import {
   type NodeTypes,
 } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
-import { AlertTriangle, ChevronRight, Loader2, Maximize, Search, X } from 'lucide-react'
+import { AlertTriangle, ChevronRight, Maximize, Search, X } from 'lucide-react'
+import { PaneLoader } from '../../ui/PaneLoader'
 import { clsx } from 'clsx'
 
 import type { GitOpsResourceTree, GitOpsTreeNode, GitOpsTreeRef, HealthStatus } from '../../../types'
@@ -127,12 +128,7 @@ function GitOpsTreeGraphInner({
   }, [onNodeClick])
 
   if (loading) {
-    return (
-      <div className="flex h-full items-center justify-center text-theme-text-secondary">
-        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-        Loading GitOps resource tree...
-      </div>
-    )
+    return <PaneLoader label="Loading GitOps resource tree…" className="h-full" />
   }
 
   if (error) {

package/src/components/logs/LogCore.tsx

@@ -796,7 +796,7 @@ export function LogCore({
         <div className={`flex-1 flex items-center justify-center ${palette.textTertiary}`}>
           <div className="flex items-center gap-2">
             <RotateCcw className="w-4 h-4 animate-spin" />
-            <span>Loading logs...</span>
+            <span>Loading logs…</span>
           </div>
         </div>
       ) : errorMessage ? (

package/src/components/resources/ResourcesView.tsx

@@ -2,6 +2,7 @@ import React, { useState, useMemo, useEffect, useCallback, useRef, useContext, u
 import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { PaneLoader } from '../ui/PaneLoader'
+import { RestrictedState } from '../ui/RestrictedState'
 import type { TopPodMetrics, TopNodeMetrics } from '../../types'
 import {
   Search,
@@ -1840,6 +1841,9 @@ interface ResourcesViewProps {
   // Lightweight counts for sidebar badges (from /api/resource-counts)
   resourceCounts?: Record<string, number>
   resourceForbidden?: string[]
+  /** Per-kind reason a forbidden kind is hidden ("rbac_denied" | "unavailable"),
+   *  keyed by the same count key as resourceForbidden. Drives RestrictedState copy. */
+  resourceReasons?: Record<string, string>
   resourceUnavailable?: string[]
   // Single query for the currently selected kind's full data
   selectedKindQuery?: ResourceQueryResult
@@ -2058,6 +2062,7 @@ export function ResourcesView({
   resourceQueries: resourceQueriesProp,
   resourceCounts: resourceCountsProp,
   resourceForbidden: resourceForbiddenProp,
+  resourceReasons,
   resourceUnavailable: resourceUnavailableProp,
   selectedKindQuery: selectedKindQueryProp,
   largeListGuard,
@@ -3232,7 +3237,6 @@ export function ResourcesView({
   }, [resources])
   const isLoading = selectedQuery?.isLoading ?? true
   const selectedQueryError = selectedQuery?.error
-  const isSelectedForbidden = isForbiddenError(selectedQueryError)
   const refetchFn = selectedQuery?.refetch
   const dataUpdatedAt = selectedQuery?.dataUpdatedAt
 
@@ -3294,6 +3298,23 @@ export function ResourcesView({
     return result
   }, [useNewCountsMode, resourceForbiddenProp, resourcesToCount, resourceQueries])
 
+  // Render the restricted state when EITHER the list query 403s (namespaced
+  // denials) OR the selected kind is in the counts `forbidden` set. Denied
+  // cluster-scoped kinds return 200 with `[]` from the list endpoint, so the
+  // 403 signal alone misses them — they'd fall through to "No <kind> found".
+  const selectedKindCountKey = selectedKind.group
+    ? `${selectedKind.group}/${selectedKind.kind}`
+    : selectedKind.kind
+  // Actual rows win over a stale counts `forbidden` entry: a kind can be marked
+  // forbidden/unavailable in counts (e.g. an informer not yet synced at counts
+  // time) while the list query has since returned data — show the table, not
+  // RestrictedState. A 403 on the list itself never carries rows, so it still
+  // forces the restricted state.
+  const selectedHasRows = Array.isArray(resources) && resources.length > 0
+  const isSelectedForbidden =
+    isForbiddenError(selectedQueryError) ||
+    (!selectedHasRows && forbiddenKinds.has(selectedKindCountKey))
+
   // Reset sort and filters when kind changes (but not when syncing from URL navigation)
   // Track previous kind to skip on mount (where the effect fires but kind hasn't actually changed)
   const prevKindRef = useRef(selectedKind.name)
@@ -4505,10 +4526,18 @@ export function ResourcesView({
           {isLoading ? (
             <PaneLoader className="absolute inset-0" />
           ) : isSelectedForbidden ? (
-            <div className="absolute inset-0 flex flex-col items-center justify-center text-theme-text-tertiary">
-              <Shield className="w-8 h-8 text-amber-400 mb-2" />
-              <p className="text-theme-text-secondary font-medium">Access Restricted</p>
-              <p className="text-sm mt-1">Insufficient permissions to list {selectedKind.kind} resources</p>
+            // overflow-y-auto + min-h-full: centered when the panel is short
+            // (collapsed), scrollable (no top clip) when the RBAC snippet is
+            // expanded on a shorter pane.
+            <div className="absolute inset-0 overflow-y-auto">
+              <div className="min-h-full flex items-center justify-center">
+                <RestrictedState
+                  kindLabel={selectedKind.kind}
+                  group={selectedKind.group}
+                  resource={selectedKind.name}
+                  reason={resourceReasons?.[selectedKindCountKey]}
+                />
+              </div>
             </div>
           ) : largeListGuard ? (
             <div className="absolute inset-0 flex flex-col items-center justify-center text-theme-text-tertiary px-6 text-center">

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/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(