@skyhook-io/k8s-ui 1.5.10 → 1.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.5.10",
+  "version": "1.5.11",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/dock/BottomDock.tsx

@@ -3,7 +3,7 @@ import { DURATION_DOCK } from '../../utils/animation'
 import { X, ChevronDown, ChevronUp, Terminal, FileText, Trash2, Layers, Maximize2, Minimize2, Activity } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useDock, DockTab } from './DockContext'
-import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
+import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
 const MIN_HEIGHT = 200
 const DEFAULT_HEIGHT = 400
@@ -80,15 +80,26 @@ export function BottomDock({ renderTabContent, renderTabHeaderExtra, leftOffset:
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [isMaximized])
 
-  useRegisterShortcut({
-    id: 'dock-toggle',
-    keys: 'Ctrl+`',
-    description: 'Toggle dock',
-    category: 'Dock',
-    scope: 'global',
-    handler: () => toggleExpanded(),
-    enabled: tabs.length > 0,
-  })
+  useRegisterShortcuts([
+    {
+      id: 'dock-toggle-backtick',
+      keys: 'Ctrl+`',
+      description: 'Toggle dock',
+      category: 'Dock',
+      scope: 'global',
+      handler: () => toggleExpanded(),
+      enabled: tabs.length > 0,
+    },
+    {
+      id: 'dock-toggle-j',
+      keys: 'Cmd+J',
+      description: 'Toggle dock',
+      category: 'Dock',
+      scope: 'global',
+      handler: () => toggleExpanded(),
+      enabled: tabs.length > 0,
+    },
+  ])
 
   if (tabs.length === 0) {
     return null

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

@@ -0,0 +1,254 @@
+import { describe, it, expect } from 'vitest'
+import { getPodPhaseDisplay } from './resource-utils'
+
+const podRunningHealthy = {
+  status: {
+    phase: 'Running',
+    containerStatuses: [{ name: 'app', ready: true, restartCount: 0 }],
+  },
+}
+
+const podRunningNotReady = {
+  status: {
+    phase: 'Running',
+    containerStatuses: [{ name: 'app', ready: false, restartCount: 0 }],
+  },
+}
+
+const podRunningCycling = {
+  status: {
+    phase: 'Running',
+    containerStatuses: [{ name: 'app', ready: true, restartCount: 6301 }],
+  },
+}
+
+const podRunningNotReadyAndCycling = {
+  status: {
+    phase: 'Running',
+    containerStatuses: [{ name: 'app', ready: false, restartCount: 6301 }],
+  },
+}
+
+const podCrashLooping = {
+  status: {
+    phase: 'Running',
+    containerStatuses: [
+      {
+        name: 'app',
+        ready: false,
+        restartCount: 12,
+        state: { waiting: { reason: 'CrashLoopBackOff' } },
+      },
+    ],
+  },
+}
+
+const podImagePullBackOff = {
+  status: {
+    phase: 'Pending',
+    containerStatuses: [
+      {
+        name: 'app',
+        ready: false,
+        restartCount: 0,
+        state: { waiting: { reason: 'ImagePullBackOff' } },
+      },
+    ],
+  },
+}
+
+const podOOMKilled = {
+  status: {
+    phase: 'Running',
+    containerStatuses: [
+      {
+        name: 'app',
+        ready: false,
+        restartCount: 3,
+        state: { terminated: { reason: 'OOMKilled', exitCode: 137 } },
+      },
+    ],
+  },
+}
+
+const podTerminating = {
+  metadata: { deletionTimestamp: '2026-04-29T10:00:00Z' },
+  status: {
+    phase: 'Running',
+    containerStatuses: [{ name: 'app', ready: true, restartCount: 0 }],
+  },
+}
+
+const podErrImagePull = {
+  status: {
+    phase: 'Pending',
+    containerStatuses: [
+      {
+        name: 'app',
+        ready: false,
+        restartCount: 0,
+        state: { waiting: { reason: 'ErrImagePull' } },
+      },
+    ],
+  },
+}
+
+const podCreateContainerConfigError = {
+  status: {
+    phase: 'Pending',
+    containerStatuses: [
+      {
+        name: 'app',
+        ready: false,
+        restartCount: 0,
+        state: { waiting: { reason: 'CreateContainerConfigError' } },
+      },
+    ],
+  },
+}
+
+const podMultiContainerPartiallyReady = {
+  status: {
+    phase: 'Running',
+    containerStatuses: [
+      { name: 'app', ready: true, restartCount: 0 },
+      { name: 'sidecar', ready: false, restartCount: 0 },
+      { name: 'proxy', ready: true, restartCount: 0 },
+    ],
+  },
+}
+
+const podMultiContainerCyclingAcrossContainers = {
+  status: {
+    phase: 'Running',
+    containerStatuses: [
+      { name: 'app', ready: true, restartCount: 3 },
+      { name: 'sidecar', ready: true, restartCount: 4 },
+    ],
+  },
+}
+
+const podSucceededWithOOMKilledSidecar = {
+  status: {
+    phase: 'Succeeded',
+    containerStatuses: [
+      { name: 'main', ready: false, restartCount: 0, state: { terminated: { reason: 'Completed', exitCode: 0 } } },
+      { name: 'sidecar', ready: false, restartCount: 1, state: { terminated: { reason: 'OOMKilled', exitCode: 137 } } },
+    ],
+  },
+}
+
+describe('getPodPhaseDisplay', () => {
+  it('returns Running, healthy for a fully-ready pod with no restarts', () => {
+    const r = getPodPhaseDisplay(podRunningHealthy)
+    expect(r.phase).toBe('Running')
+    expect(r.text).toBe('Running')
+    expect(r.level).toBe('healthy')
+    expect(r.hint).toBeUndefined()
+  })
+
+  it('downgrades a Running pod that is not ready (the "0/1" case)', () => {
+    const r = getPodPhaseDisplay(podRunningNotReady)
+    expect(r.phase).toBe('Running')
+    expect(r.text).toBe('Running — Not Ready (0/1)')
+    expect(r.level).toBe('degraded')
+    expect(r.hint).toMatch(/not ready/i)
+  })
+
+  it('downgrades a Running pod with high restarts even if currently ready', () => {
+    const r = getPodPhaseDisplay(podRunningCycling)
+    expect(r.text).toBe('Running — Restarting (6301 restarts)')
+    expect(r.level).toBe('degraded')
+  })
+
+  it('marks a Running + Not Ready + cycling pod as unhealthy', () => {
+    const r = getPodPhaseDisplay(podRunningNotReadyAndCycling)
+    expect(r.text).toContain('Not Ready (0/1)')
+    expect(r.text).toContain('6301 restarts')
+    expect(r.level).toBe('unhealthy')
+  })
+
+  it('always preserves the raw phase field so kubectl users can correlate', () => {
+    expect(getPodPhaseDisplay(podRunningNotReady).phase).toBe('Running')
+    expect(getPodPhaseDisplay(podCrashLooping).phase).toBe('Running')
+    expect(getPodPhaseDisplay(podImagePullBackOff).phase).toBe('Pending')
+  })
+
+  it('flags CrashLoopBackOff as unhealthy with phase preserved', () => {
+    const r = getPodPhaseDisplay(podCrashLooping)
+    expect(r.text).toBe('Running — CrashLoopBackOff')
+    expect(r.level).toBe('unhealthy')
+  })
+
+  it('flags ImagePullBackOff as unhealthy on a Pending pod', () => {
+    const r = getPodPhaseDisplay(podImagePullBackOff)
+    expect(r.text).toBe('Pending — ImagePullBackOff')
+    expect(r.level).toBe('unhealthy')
+  })
+
+  it('flags OOMKilled even when phase is Running', () => {
+    const r = getPodPhaseDisplay(podOOMKilled)
+    expect(r.text).toBe('Running — OOMKilled')
+    expect(r.level).toBe('unhealthy')
+  })
+
+  it('marks pods with deletionTimestamp as Terminating regardless of phase', () => {
+    const r = getPodPhaseDisplay(podTerminating)
+    expect(r.text).toBe('Running — Terminating')
+    expect(r.level).toBe('degraded')
+  })
+
+  it('falls back to Unknown for missing/unknown phase', () => {
+    expect(getPodPhaseDisplay({}).level).toBe('unknown')
+    expect(getPodPhaseDisplay({}).phase).toBe('Unknown')
+    expect(getPodPhaseDisplay({ status: { phase: 'Banana' } }).level).toBe('unknown')
+  })
+
+  it('handles Succeeded/Pending/Failed phases', () => {
+    expect(getPodPhaseDisplay({ status: { phase: 'Succeeded' } }).level).toBe('neutral')
+    expect(getPodPhaseDisplay({ status: { phase: 'Pending' } }).level).toBe('degraded')
+    expect(getPodPhaseDisplay({ status: { phase: 'Failed' } }).level).toBe('unhealthy')
+  })
+
+  it('flags ErrImagePull as unhealthy', () => {
+    const r = getPodPhaseDisplay(podErrImagePull)
+    expect(r.text).toBe('Pending — ErrImagePull')
+    expect(r.level).toBe('unhealthy')
+  })
+
+  it('flags CreateContainerConfigError as unhealthy', () => {
+    const r = getPodPhaseDisplay(podCreateContainerConfigError)
+    expect(r.text).toBe('Pending — CreateContainerConfigError')
+    expect(r.level).toBe('unhealthy')
+  })
+
+  it('reports the correct readiness ratio for multi-container pods', () => {
+    const r = getPodPhaseDisplay(podMultiContainerPartiallyReady)
+    expect(r.text).toBe('Running — Not Ready (2/3)')
+    expect(r.level).toBe('degraded')
+  })
+
+  it('sums restartCount across containers when deciding cycling', () => {
+    const r = getPodPhaseDisplay(podMultiContainerCyclingAcrossContainers)
+    expect(r.text).toBe('Running — Restarting (7 restarts)')
+    expect(r.level).toBe('degraded')
+  })
+
+  it('does not flag a Succeeded Job pod as unhealthy when a sidecar OOMed', () => {
+    const r = getPodPhaseDisplay(podSucceededWithOOMKilledSidecar)
+    expect(r.phase).toBe('Succeeded')
+    expect(r.text).toBe('Completed')
+    expect(r.level).toBe('neutral')
+  })
+
+  it('does not mistake exactly-RESTART_CYCLING_THRESHOLD restarts for cycling (boundary)', () => {
+    const r = getPodPhaseDisplay({
+      status: {
+        phase: 'Running',
+        containerStatuses: [{ name: 'app', ready: true, restartCount: 5 }],
+      },
+    })
+    expect(r.text).toBe('Running')
+    expect(r.level).toBe('healthy')
+  })
+})

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

@@ -3,6 +3,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import { getAWSMMPStatus, getAWSMMPInstanceType, getAWSMMPCapacityType, getAWSMMPAMIType, getAWSMMPNodegroupName, getAWSMMPScaling } from '../resource-utils-aws-capi'
+import { CAPACITY_TYPE_BADGE } from '../../../utils/badge-colors'
 
 interface Props {
   data: any
@@ -39,10 +40,7 @@ export function AWSManagedMachinePoolRenderer({ data }: Props) {
           <Property label="Instance Type" value={getAWSMMPInstanceType(data)} />
           <Property label="AMI Type" value={getAWSMMPAMIType(data)} />
           <Property label="Capacity Type" value={
-            <span className={clsx('badge badge-sm', capacityType === 'spot'
-              ? 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40'
-              : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
-            )}>{capacityType === 'onDemand' ? 'On-Demand' : capacityType}</span>
+            <span className={clsx('badge badge-sm', capacityType === 'spot' ? CAPACITY_TYPE_BADGE.spot : CAPACITY_TYPE_BADGE.onDemand)}>{capacityType === 'onDemand' ? 'On-Demand' : capacityType}</span>
           } />
           {spec.roleName && <Property label="IAM Role" value={spec.roleName} />}
         </PropertyList>

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

@@ -9,6 +9,7 @@ import {
   type ArgoAppStatus,
   type ArgoResource,
 } from '../../../types/gitops'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 interface ArgoApplicationRendererProps {
   data: any
@@ -192,7 +193,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <span
                 className={clsx(
                   'badge',
-                  syncPolicy.automated ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'
+                  syncPolicy.automated ? 'bg-green-500/20 text-green-400' : BADGE_INACTIVE
                 )}
               >
                 {syncPolicy.automated ? 'Enabled' : 'Disabled'}
@@ -241,7 +242,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
                       ? 'bg-blue-500/20 text-blue-400'
                       : operationState.phase === 'Failed' || operationState.phase === 'Error'
                       ? 'bg-red-500/20 text-red-400'
-                      : 'bg-gray-500/20 text-gray-400'
+                      : BADGE_INACTIVE
                   )}
                 >
                   {operationState.phase}

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

@@ -3,6 +3,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
 import { getCAPIConditions } from '../resource-utils-capi'
 import { getAzureMMPStatus, getAzureMMPSKU, getAzureMMPMode, getAzureMMPOSDiskInfo, getAzureMMPScaling, getAzureMMPScaleSetPriority, getAzureMMPOSType } from '../resource-utils-azure-capi'
+import { CAPACITY_TYPE_BADGE, NODEPOOL_MODE_BADGE } from '../../../utils/badge-colors'
 
 interface Props {
   data: any
@@ -34,18 +35,12 @@ export function AzureManagedMachinePoolRenderer({ data }: Props) {
           {spec.name && <Property label="Pool Name" value={spec.name} />}
           <Property label="VM Size" value={getAzureMMPSKU(data)} />
           <Property label="Mode" value={
-            <span className={clsx('badge badge-sm', mode === 'System'
-              ? 'bg-purple-100 text-purple-800 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40'
-              : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
-            )}>{mode}</span>
+            <span className={clsx('badge badge-sm', NODEPOOL_MODE_BADGE[mode] || NODEPOOL_MODE_BADGE.User)}>{mode}</span>
           } />
           <Property label="OS" value={getAzureMMPOSType(data)} />
           <Property label="OS Disk" value={getAzureMMPOSDiskInfo(data)} />
           <Property label="Priority" value={
-            <span className={clsx('badge badge-sm', priority === 'Spot'
-              ? 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40'
-              : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
-            )}>{priority}</span>
+            <span className={clsx('badge badge-sm', priority === 'Spot' ? CAPACITY_TYPE_BADGE.spot : CAPACITY_TYPE_BADGE.regular)}>{priority}</span>
           } />
           {spec.maxPods != null && <Property label="Max Pods" value={String(spec.maxPods)} />}
         </PropertyList>

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

@@ -2,6 +2,7 @@ import { Shield, AlertTriangle, Globe, Key, FileText } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
 import { getSolverType } from './ClusterIssuerRenderer'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 function getChallengeStateBadge(state: string): { color: string; text: string } {
   switch (state?.toLowerCase()) {
@@ -20,7 +21,7 @@ function getChallengeStateBadge(state: string): { color: string; text: string }
     case 'errored':
       return { text: 'Errored', color: 'bg-red-500/20 text-red-400' }
     default:
-      return { text: state || 'Unknown', color: 'bg-gray-500/20 text-gray-400' }
+      return { text: state || 'Unknown', color: BADGE_INACTIVE }
   }
 }
 

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

@@ -5,6 +5,7 @@ import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-co
 import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_ORDER } from './trivy-shared'
 import { pluralize } from '../../../utils/pluralize'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 interface ClusterComplianceReportRendererProps {
   data: any
@@ -185,7 +186,7 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
                       ) : (
                         <CheckCircle2 className="w-3.5 h-3.5 text-green-400 shrink-0" />
                       )}
-                      <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0', SEVERITY_BADGE_COLORS[check.severity] || 'bg-gray-500/20 text-gray-400')}>
+                      <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0', SEVERITY_BADGE_COLORS[check.severity] || BADGE_INACTIVE)}>
                         {check.severity || '-'}
                       </span>
                       <span className="text-xs text-theme-text-secondary truncate flex-1">{check.name || check.id}</span>

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

@@ -4,6 +4,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_ORDER, TrivyAlertBanner } from './trivy-shared'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 interface ConfigAuditReportRendererProps {
   data: any
@@ -169,7 +170,7 @@ export function ConfigAuditReportRenderer({ data }: ConfigAuditReportRendererPro
                       ) : (
                         <XCircle className="w-3.5 h-3.5 text-red-400 shrink-0" />
                       )}
-                      <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0', SEVERITY_BADGE_COLORS[group.severity] || 'bg-gray-500/20 text-gray-400')}>
+                      <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0', SEVERITY_BADGE_COLORS[group.severity] || BADGE_INACTIVE)}>
                         {group.severity}
                       </span>
                       <span className="text-xs text-theme-text-secondary truncate flex-1">{group.title}</span>

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

@@ -5,6 +5,7 @@ import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, TrivyAlertBanner, formatTrivyImage } from './trivy-shared'
 import { pluralize } from '../../../utils/pluralize'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 interface ExposedSecretReportRendererProps {
   data: any
@@ -92,7 +93,7 @@ export function ExposedSecretReportRenderer({ data }: ExposedSecretReportRendere
                     <tr key={`${secret.ruleID || i}-${i}`} className="border-b border-theme-border/50 hover:bg-theme-hover/50">
                       <td className="py-1.5 px-1 text-theme-text-secondary font-mono">{secret.ruleID || '-'}</td>
                       <td className="py-1.5 px-1">
-                        <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium', SEVERITY_BADGE_COLORS[secret.severity] || 'bg-gray-500/20 text-gray-400')}>
+                        <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium', SEVERITY_BADGE_COLORS[secret.severity] || BADGE_INACTIVE)}>
                           {secret.severity || '-'}
                         </span>
                       </td>

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

@@ -1,6 +1,7 @@
 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'
 
 interface GatewayClassRendererProps {
   data: any
@@ -40,7 +41,7 @@ export function GatewayClassRenderer({ data }: GatewayClassRendererProps) {
                   ? 'bg-green-500/20 text-green-400'
                   : isNotAccepted
                     ? 'bg-red-500/20 text-red-400'
-                    : 'bg-gray-500/20 text-gray-400'
+                    : BADGE_INACTIVE
               )}>
                 {isAccepted ? 'True' : isNotAccepted ? 'False' : 'Unknown'}
               </span>

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

@@ -1,6 +1,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',
@@ -73,7 +74,7 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
                   ? 'bg-green-500/20 text-green-400'
                   : isNotAccepted
                     ? 'bg-red-500/20 text-red-400'
-                    : 'bg-gray-500/20 text-gray-400'
+                    : BADGE_INACTIVE
               )}>
                 {isAccepted ? 'True' : isNotAccepted ? 'False' : 'Unknown'}
               </span>
@@ -88,7 +89,7 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
                   ? 'bg-green-500/20 text-green-400'
                   : isNotProgrammed
                     ? 'bg-red-500/20 text-red-400'
-                    : 'bg-gray-500/20 text-gray-400'
+                    : BADGE_INACTIVE
               )}>
                 {isProgrammed ? 'True' : isNotProgrammed ? 'False' : 'Unknown'}
               </span>
@@ -134,7 +135,7 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
                     <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] || 'bg-gray-500/20 text-gray-400'
+                      protocolColors[listener.protocol] || BADGE_INACTIVE
                     )}>
                       {listener.protocol}:{listener.port}
                     </span>
@@ -157,7 +158,7 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
                           ? 'bg-green-500/20 text-green-400'
                           : isListenerNotAccepted
                             ? 'bg-red-500/20 text-red-400'
-                            : 'bg-gray-500/20 text-gray-400'
+                            : BADGE_INACTIVE
                       )}>
                         {isListenerAccepted ? '\u2713' : isListenerNotAccepted ? '\u2717' : '?'}
                       </span>

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

@@ -1,6 +1,7 @@
 import { Globe } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 interface IngressClassRendererProps {
   data: any
@@ -24,7 +25,7 @@ export function IngressClassRenderer({ data }: IngressClassRendererProps) {
                 'badge',
                 isDefault
                   ? 'bg-green-500/20 text-green-400'
-                  : 'bg-gray-500/20 text-gray-400'
+                  : BADGE_INACTIVE
               )}>
                 {isDefault ? 'Yes' : 'No'}
               </span>

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

@@ -6,6 +6,7 @@ import {
   getAuthorizationPolicyRules,
   getAuthorizationPolicySelector,
 } from '../resource-utils-istio'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 const actionColors: Record<string, string> = {
   ALLOW: 'bg-green-500/20 text-green-400',
@@ -52,7 +53,7 @@ export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPol
           <Property label="Action" value={
             <span className={clsx(
               'badge',
-              actionColors[action] || 'bg-gray-500/20 text-gray-400'
+              actionColors[action] || BADGE_INACTIVE
             )}>
               {action}
             </span>

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

@@ -6,6 +6,7 @@ import {
   getIstioGatewayServers,
   getIstioGatewaySelector,
 } from '../resource-utils-istio'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 const protocolColors: Record<string, string> = {
   HTTP: 'bg-blue-500/20 text-blue-400',
@@ -73,7 +74,7 @@ export function IstioGatewayRenderer({ data }: IstioGatewayRendererProps) {
                       </span>
                       <span className={clsx(
                         'px-1.5 py-0.5 rounded text-[10px] font-medium',
-                        protocolColors[protocol] || 'bg-gray-500/20 text-gray-400'
+                        protocolColors[protocol] || BADGE_INACTIVE
                       )}>
                         {protocol}:{server.port.number}
                       </span>
@@ -98,7 +99,7 @@ export function IstioGatewayRenderer({ data }: IstioGatewayRendererProps) {
                               ? 'bg-green-500/20 text-green-400'
                               : server.tls.mode === 'PASSTHROUGH'
                                 ? 'bg-blue-500/20 text-blue-400'
-                                : 'bg-gray-500/20 text-gray-400'
+                                : BADGE_INACTIVE
                           )}>
                             {server.tls.mode || 'SIMPLE'}
                           </span>

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

@@ -6,12 +6,13 @@ import {
   getPeerAuthenticationSelector,
   getPeerAuthenticationPortLevelMtls,
 } from '../resource-utils-istio'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 const modeColors: Record<string, string> = {
   STRICT: 'bg-green-500/20 text-green-400',
   PERMISSIVE: 'bg-yellow-500/20 text-yellow-400',
   DISABLE: 'bg-red-500/20 text-red-400',
-  UNSET: 'bg-gray-500/20 text-gray-400',
+  UNSET: BADGE_INACTIVE,
 }
 
 interface IstioPeerAuthenticationRendererProps {

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

@@ -2,8 +2,8 @@ import { Server, Cpu, Settings } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
+import { CAPACITY_TYPE_BADGE, BADGE_INACTIVE } from '../../../utils/badge-colors'
 import {
-  CAPACITY_TYPE_BADGE,
   getNodeClaimStatus,
   getNodeClaimInstanceType,
   getNodeClaimNodeName,
@@ -188,7 +188,7 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
                     isComplete && 'bg-green-500/20 text-green-400',
                     isCurrent && 'bg-blue-500/20 text-blue-400',
                     isFailed && 'bg-red-500/20 text-red-400',
-                    isPending && !isCurrent && 'bg-gray-500/20 text-gray-400'
+                    isPending && !isCurrent && BADGE_INACTIVE
                   )}
                 >
                   {isComplete ? '\u2713' : isFailed ? '\u2717' : isCurrent ? '\u25CF' : '\u25CB'}

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

@@ -1,6 +1,7 @@
 import { ShoppingCart, AlertTriangle, Globe, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 function getOrderStateBadge(state: string): { color: string; text: string } {
   switch (state?.toLowerCase()) {
@@ -17,7 +18,7 @@ function getOrderStateBadge(state: string): { color: string; text: string } {
     case 'errored':
       return { text: 'Errored', color: 'bg-red-500/20 text-red-400' }
     default:
-      return { text: state || 'Unknown', color: 'bg-gray-500/20 text-gray-400' }
+      return { text: state || 'Unknown', color: BADGE_INACTIVE }
   }
 }