@skyhook-io/k8s-ui 1.5.10 → 1.5.12

package/src/components/resources/ResourcesView.tsx

@@ -156,7 +156,7 @@ const WORKLOAD_KINDS = new Set(['deployments', 'statefulsets', 'daemonsets'])
 
 // Columns to skip for auto-detected filters (high cardinality, text-like, or non-filterable)
 const SKIP_FILTER_COLUMNS = new Set([
-  'name', 'namespace', 'age', 'keys', 'size', 'images', 'domains', 'hosts', 'rules',
+  'name', 'age', 'keys', 'size', 'images', 'domains', 'hosts', 'rules',
   'ports', 'message', 'url', 'ref', 'revision', 'path', 'selector', 'ready', 'restarts',
   'completions', 'duration', 'schedule', 'lastRun', 'target', 'replicas', 'metrics',
   'capacity', 'accessModes', 'volume', 'step', 'progress', 'template', 'expires',
@@ -3471,7 +3471,7 @@ export function ResourcesView({
           {lastUpdated && (
             <div className="flex items-center gap-1.5 text-xs text-theme-text-tertiary">
               <Clock className="w-3.5 h-3.5" />
-              <span>Updated {formatAge(lastUpdated.toISOString())}</span>
+              <span>Updated <span className="inline-block min-w-[4ch] tabular-nums">{formatAge(lastUpdated.toISOString())}</span></span>
             </div>
           )}
           {/* Column picker */}
@@ -3578,6 +3578,23 @@ export function ResourcesView({
                   <X className="w-3.5 h-3.5" />
                 </button>
               )}
+              {/*
+                The sidebar's count badge shows the cluster-wide
+                total for the selected kind (from resourceCounts) and
+                deliberately stays unfiltered. When a search yields
+                zero results the user can think the badge is lying.
+                Spell out that the badge is the cluster total, not
+                the filtered count.
+              */}
+              {searchTerm && (() => {
+                const totalForKind = counts[selectedKind.group ? `${selectedKind.group}/${selectedKind.kind}` : selectedKind.kind] ?? 0
+                if (totalForKind === 0) return null
+                return (
+                  <p className="text-xs mt-1 text-theme-text-disabled">
+                    The sidebar shows {pluralize(totalForKind, selectedKind.kind)} in the cluster — the count is unfiltered.
+                  </p>
+                )
+              })()}
               {namespaces.length > 0 && <p className="text-sm mt-1 text-theme-text-disabled">Searching in {namespaces.length === 1 ? `namespace: ${namespaces[0]}` : `${namespaces.length} namespaces`}</p>}
               {/* Show active filters as dismissible badges so user can clear them */}
               {(() => {

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/KarpenterNodePoolRenderer.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { KarpenterNodePoolRenderer } from './KarpenterNodePoolRenderer'
+
+describe('KarpenterNodePoolRenderer', () => {
+  it('renders CPU quantities expressed as millicore strings', () => {
+    const html = renderToString(
+      <KarpenterNodePoolRenderer
+        data={{
+          spec: { limits: { cpu: '12000m' } },
+          status: { resources: { cpu: '6000m' } },
+        }}
+      />,
+    )
+
+    expect(html).toContain('6 / 12')
+  })
+
+  it('renders non-string CPU quantities without throwing', () => {
+    expect(() =>
+      renderToString(
+        <KarpenterNodePoolRenderer
+          data={{
+            spec: { limits: { cpu: 16 } },
+            status: { resources: { cpu: 12 } },
+          }}
+        />,
+      ),
+    ).not.toThrow()
+  })
+})

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

@@ -9,13 +9,13 @@ import {
   getNodePoolWeight,
 } from '../resource-utils-karpenter'
 
-function formatCpuCores(value: string): string {
-  // Karpenter status.resources CPU is typically in millicores (e.g. "12000m") or cores (e.g. "12")
-  if (value.endsWith('m')) {
-    const millis = parseInt(value, 10)
+function formatCpuCores(value: unknown): string {
+  const quantity = String(value)
+  if (quantity.endsWith('m')) {
+    const millis = parseInt(quantity, 10)
     if (!isNaN(millis)) return String(millis / 1000)
   }
-  return value
+  return quantity
 }