@skyhook-io/k8s-ui 1.7.14 → 1.8.0

package/src/components/resources/renderers/HPARenderer.test.tsx

@@ -0,0 +1,91 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { HPARenderer } from './HPARenderer'
+
+const baseHPA = {
+  metadata: { name: 'api-hpa', namespace: 'prod' },
+  spec: {
+    maxReplicas: 10,
+    scaleTargetRef: { apiVersion: 'apps/v1', kind: 'Deployment', name: 'api' },
+  },
+  status: {
+    currentReplicas: 3,
+    desiredReplicas: 3,
+  },
+}
+
+describe('HPARenderer', () => {
+  it('does not count ScalingLimited=False as a failing condition', () => {
+    const html = renderToString(
+      <HPARenderer
+        data={{
+          ...baseHPA,
+          status: {
+            ...baseHPA.status,
+            conditions: [
+              { type: 'ScalingActive', status: 'False', reason: 'FailedGetResourceMetric' },
+              { type: 'AbleToScale', status: 'True', reason: 'SucceededGetScale' },
+              { type: 'ScalingLimited', status: 'False', reason: 'DesiredWithinRange' },
+            ],
+          },
+        }}
+      />,
+    )
+
+    expect(html).toContain('Conditions (3) · 1 failing')
+    expect(html).not.toContain('2 failing')
+  })
+
+  it('renders ScalingLimited=True at max as a warning instead of a healthy condition', () => {
+    const html = renderToString(
+      <HPARenderer
+        data={{
+          ...baseHPA,
+          status: {
+            ...baseHPA.status,
+            conditions: [
+              {
+                type: 'ScalingLimited',
+                status: 'True',
+                reason: 'TooManyReplicas',
+                message: 'the desired replica count is more than the maximum replica count',
+              },
+            ],
+          },
+        }}
+      />,
+    )
+
+    expect(html).toContain('border-amber-400/60')
+    expect(html).toContain('text-amber-600')
+    expect(html).not.toContain('failing')
+  })
+
+  it('does not repeat max-limited controller text as a second diagnosis headline', () => {
+    const html = renderToString(
+      <HPARenderer
+        data={baseHPA}
+        hpaDiagnosis={{
+          state: 'limited_max',
+          summary: 'HPA wants more replicas but is capped at maxReplicas=10',
+          target: { kind: 'Deployment', name: 'api' },
+          bounds: { min: 1, max: 10, current: 10, desired: 10 },
+          reasons: [
+            {
+              id: 'limited_max',
+              message: 'the desired replica count is more than the maximum replica count',
+              conditionType: 'ScalingLimited',
+              conditionReason: 'TooManyReplicas',
+            },
+          ],
+        }}
+      />,
+    )
+
+    expect(html).toContain('HPA wants more replicas but is capped at maxReplicas=10')
+    expect(html).toContain('Evidence')
+    expect(html).toContain('ScalingLimited')
+    expect(html).toContain('TooManyReplicas')
+    expect(html).not.toContain('the desired replica count is more than the maximum replica count')
+  })
+})

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

@@ -1,114 +1,97 @@
 import type { ReactNode } from 'react'
-import { Cpu, AlertTriangle } from 'lucide-react'
+import { Activity, Cpu } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, ResourceLink, type ConditionTone } from '../../ui/drawer-components'
+import { Badge, type BadgeSeverity } from '../../ui/Badge'
 import { kindToPlural } from '../../../utils/navigation'
 import { formatAge } from '../resource-utils'
+import { hpaStateLabel, hpaStateLevel } from '../resource-utils-hpa'
+import type { HPADiagnosis, HPADiagnosisState } from '../../../types'
 
 interface HPARendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  hpaDiagnosis?: HPADiagnosis
   /** Optional host-provided section rendered after Conditions — used to inject Prometheus-backed charts. */
   extraSections?: ReactNode
 }
 
-// Extract problems from HPA conditions
-function getHPAProblems(data: any): string[] {
-  const problems: string[] = []
-  const conditions = data.status?.conditions || []
-  const status = data.status || {}
-  const spec = data.spec || {}
-
-  // Check conditions for issues
-  for (const cond of conditions) {
-    // AbleToScale = False means target not found or can't scale
-    if (cond.type === 'AbleToScale' && cond.status === 'False') {
-      problems.push(`Cannot scale: ${cond.reason}${cond.message ? ' - ' + cond.message : ''}`)
-    }
+function hpaBadgeSeverity(state: HPADiagnosisState): BadgeSeverity {
+  switch (hpaStateLevel(state)) {
+    case 'healthy':
+      return 'success'
+    case 'unhealthy':
+      return 'error'
+    case 'degraded':
+      return 'warning'
+    case 'alert':
+      return 'alert'
+    case 'neutral':
+      return 'info'
+    default:
+      return 'neutral'
+  }
+}
 
-    // ScalingActive = False means metrics unavailable
-    if (cond.type === 'ScalingActive' && cond.status === 'False') {
-      if (cond.reason === 'FailedGetResourceMetric') {
-        problems.push('Metrics unavailable — is metrics-server running?')
-      } else {
-        problems.push(`Scaling inactive: ${cond.reason}${cond.message ? ' - ' + cond.message : ''}`)
-      }
-    }
+function hpaConditionTone(condition: any): ConditionTone | undefined {
+  if (condition?.type !== 'ScalingLimited') return undefined
+  if (condition.status === 'False') return 'ok'
+  if (condition.status !== 'True') return 'unknown'
 
-    // ScalingLimited = True means at min/max bound
-    if (cond.type === 'ScalingLimited' && cond.status === 'True') {
-      if (cond.reason === 'TooFewReplicas') {
-        problems.push(`At minimum replicas (${spec.minReplicas || 1}) — cannot scale down further`)
-      } else if (cond.reason === 'TooManyReplicas') {
-        problems.push(`At maximum replicas (${spec.maxReplicas}) — cannot scale up further`)
-      }
-    }
-  }
+  const reason = String(condition.reason ?? '').toLowerCase()
+  const message = String(condition.message ?? '').toLowerCase()
+  if (reason.includes('toomany') || message.includes('maximum')) return 'warning'
+  if (reason.includes('toofew') || message.includes('minimum')) return 'ok'
+  return 'warning'
+}
 
-  // Check for desired != current (scaling in progress or stuck)
-  if (status.currentReplicas !== undefined && status.desiredReplicas !== undefined) {
-    if (status.currentReplicas !== status.desiredReplicas) {
-      const direction = status.desiredReplicas > status.currentReplicas ? 'up' : 'down'
-      problems.push(`Scaling ${direction}: ${status.currentReplicas} → ${status.desiredReplicas} replicas`)
-    }
-  }
+function formatReasonID(id: string): string {
+  return id.replace(/_/g, ' ')
+}
 
-  return problems
+function isReasonMessageRedundant(state: HPADiagnosisState, reason: NonNullable<HPADiagnosis['reasons']>[number]): boolean {
+  return state === 'limited_max' && reason.id === 'limited_max'
 }
 
-export function HPARenderer({ data, onNavigate, extraSections }: HPARendererProps) {
+export function HPARenderer({ data, onNavigate, hpaDiagnosis, extraSections }: HPARendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const metrics = status.currentMetrics || []
 
-  // Check for problems
-  const problems = getHPAProblems(data)
-  const hasProblems = problems.length > 0
-
-  // Determine if these are errors (red) or warnings (yellow)
-  const hasErrors = problems.some(p =>
-    p.includes('Cannot scale') || p.includes('unavailable') || p.includes('inactive')
-  )
-
   return (
     <>
-      {/* Problems/warnings alert */}
-      {hasProblems && (
-        <div className={clsx(
-          'mb-4 p-3 rounded-lg border',
-          hasErrors
-            ? 'bg-red-500/10 border-red-500/30'
-            : 'bg-yellow-500/10 border-yellow-500/30'
-        )}>
-          <div className="flex items-start gap-2">
-            <AlertTriangle className={clsx(
-              'w-4 h-4 mt-0.5 shrink-0',
-              hasErrors ? 'text-red-400' : 'text-yellow-400'
-            )} />
-            <div className="flex-1 min-w-0">
-              <div className={clsx(
-                'text-sm font-medium mb-1',
-                hasErrors ? 'text-red-400' : 'text-yellow-400'
-              )}>
-                {hasErrors ? 'Scaling Issues' : 'Scaling Status'}
+      {hpaDiagnosis && (
+        <Section title="Diagnosis" icon={Activity}>
+          <div className="card-inner space-y-3">
+            <div className="flex flex-wrap items-start justify-between gap-2">
+              <div className="min-w-0">
+                <div className="text-sm font-medium text-theme-text-primary">{hpaDiagnosis.summary}</div>
+                <div className="mt-1 text-xs text-theme-text-secondary">
+                  {hpaDiagnosis.bounds.current}/{hpaDiagnosis.bounds.desired} replicas, bounds {hpaDiagnosis.bounds.min}-{hpaDiagnosis.bounds.max}
+                </div>
               </div>
-              <ul className={clsx(
-                'text-xs space-y-1',
-                hasErrors ? 'text-red-300' : 'text-yellow-300'
-              )}>
-                {problems.map((problem, i) => (
-                  <li key={i} className="flex items-start gap-1.5">
-                    <span className={clsx(
-                      'mt-0.5',
-                      hasErrors ? 'text-red-400/60' : 'text-yellow-400/60'
-                    )}>•</span>
-                    <span>{problem}</span>
-                  </li>
-                ))}
-              </ul>
+              <Badge severity={hpaBadgeSeverity(hpaDiagnosis.state)}>{hpaStateLabel(hpaDiagnosis.state)}</Badge>
             </div>
+            {hpaDiagnosis.reasons && hpaDiagnosis.reasons.length > 0 && (
+              <div className="space-y-2">
+                {hpaDiagnosis.reasons.map((reason) => (
+                  <div key={`${reason.id}-${reason.message}`} className="rounded border border-theme-border bg-theme-surface p-2">
+                    <div className="flex flex-wrap items-center gap-2 text-xs">
+                      <span className="font-medium text-theme-text-primary">Evidence</span>
+                      <span className="text-theme-text-tertiary">{formatReasonID(reason.id)}</span>
+                      {reason.conditionType && <span className="text-theme-text-tertiary">{reason.conditionType}</span>}
+                      {reason.conditionReason && <span className="text-theme-text-tertiary">{reason.conditionReason}</span>}
+                      {reason.detail && <span className="text-theme-text-tertiary">{reason.detail}</span>}
+                    </div>
+                    {!isReasonMessageRedundant(hpaDiagnosis.state, reason) && (
+                      <div className="mt-1 text-xs text-theme-text-secondary">{reason.message}</div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
-        </div>
+        </Section>
       )}
 
       <Section title="Scaling" icon={Cpu}>
@@ -132,7 +115,31 @@ export function HPARenderer({ data, onNavigate, extraSections }: HPARendererProp
         </PropertyList>
       </Section>
 
-      {metrics.length > 0 && (
+      {hpaDiagnosis?.metrics && hpaDiagnosis.metrics.length > 0 && (
+        <Section title="Metrics" defaultExpanded>
+          <div className="space-y-2">
+            {hpaDiagnosis.metrics.map((metric) => (
+              <div key={`${metric.type}-${metric.name}`} className="card-inner">
+                <div className="flex flex-wrap items-center justify-between gap-2 text-sm">
+                  <div>
+                    <div className="font-medium text-theme-text-primary">{metric.name}</div>
+                    <div className="text-xs text-theme-text-tertiary">{metric.type}</div>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-2 text-xs text-theme-text-secondary">
+                    {metric.current && <span>Current {metric.current}</span>}
+                    {metric.target && <span>Target {metric.target}</span>}
+                    <Badge severity={metric.status === 'ok' ? 'success' : metric.status === 'missing' ? 'warning' : 'neutral'} size="sm">
+                      {metric.status.replace(/_/g, ' ')}
+                    </Badge>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {!hpaDiagnosis?.metrics?.length && metrics.length > 0 && (
         <Section title="Metrics" defaultExpanded>
           <div className="space-y-3">
             {metrics.map((metric: any, i: number) => {
@@ -162,7 +169,7 @@ export function HPARenderer({ data, onNavigate, extraSections }: HPARendererProp
         </Section>
       )}
 
-      <ConditionsSection conditions={status.conditions} />
+      <ConditionsSection conditions={status.conditions} getConditionTone={hpaConditionTone} />
 
       {extraSections}
     </>

package/src/components/resources/renderers/PodRenderer.test.tsx

@@ -51,3 +51,59 @@ describe('PodRenderer envFrom expansion', () => {
     expect(html).not.toContain('PUBLIC_URL<!-- -->=')
   })
 })
+
+describe('PodRenderer issues banner', () => {
+  it('renders pod status messages for evicted pods', () => {
+    const html = renderToString(
+      <PodRenderer
+        data={{
+          metadata: { name: 'nginx', namespace: 'default' },
+          spec: { containers: [{ name: 'nginx', image: 'nginx:latest' }] },
+          status: {
+            phase: 'Failed',
+            reason: 'Evicted',
+            message: 'Usage of EmptyDir volume "logs-nginx" exceeds the limit "2Gi".',
+          },
+        }}
+        onCopy={() => undefined}
+        copied={null}
+      />,
+    )
+
+    expect(html).toContain('Issues Detected')
+    expect(html).toContain('Evicted')
+    expect(html).toContain('Usage of EmptyDir volume')
+    expect(html).toContain('exceeds the limit')
+  })
+
+  it('wraps long issue detail text inside the banner', () => {
+    const html = renderToString(
+      <PodRenderer
+        data={{
+          metadata: { name: 'api', namespace: 'default' },
+          spec: { containers: [{ name: 'api', image: 'registry.example.com/api:missing' }] },
+          status: {
+            phase: 'Pending',
+            containerStatuses: [
+              {
+                name: 'api',
+                restartCount: 0,
+                state: {
+                  waiting: {
+                    reason: 'ImagePullBackOff',
+                    message: `Back-off pulling image "${'a'.repeat(240)}"`,
+                  },
+                },
+              },
+            ],
+          },
+        }}
+        onCopy={() => undefined}
+        copied={null}
+      />,
+    )
+
+    expect(html).toContain('ImagePullBackOff')
+    expect(html).toContain('min-w-0 break-words')
+  })
+})

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

@@ -347,7 +347,7 @@ export function PodRenderer({
             {podProblems.map((p, i) => (
               <li key={i} className="flex items-start gap-1.5">
                 <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0 mt-1', SEVERITY_DOT_COLOR[p.severity])} />
-                <span className="text-red-600 dark:text-red-400">
+                <span className="min-w-0 break-words text-red-600 dark:text-red-400">
                   {p.message}
                   {p.detail && <span className="text-theme-text-secondary">: {p.detail}</span>}
                 </span>

package/src/components/resources/renderers/WorkloadRenderer.test.tsx

@@ -34,8 +34,91 @@ describe('WorkloadRenderer', () => {
 
     expect(html).toContain('disabled=""')
     expect(html).toContain('Manual scaling is disabled')
+    expect(html).not.toContain('title="Manual scaling is disabled')
     expect(html).toContain('Controlled by')
     expect(html).toContain('HorizontalPodAutoscaler prod/api')
     expect(html).toContain('ScaledObject prod/api-queue')
+    expect(html).toContain('flex-wrap')
+    expect(html).toContain('hpa<!-- -->/')
+  })
+
+  it('renders compact HPA diagnosis inline with the state badge first', () => {
+    const html = renderToString(
+      <WorkloadRenderer
+        kind="deployments"
+        data={deployment}
+        onScale={async () => {}}
+        scaleBlockedBy={[{ kind: 'HorizontalPodAutoscaler', namespace: 'prod', name: 'api' }]}
+        scalerDiagnostics={[
+          {
+            ref: { kind: 'HorizontalPodAutoscaler', namespace: 'prod', name: 'api' },
+            diagnosis: {
+              state: 'limited_max',
+              summary: 'HPA wants more replicas but is capped at maxReplicas=5',
+              target: { kind: 'Deployment', name: 'api' },
+              bounds: { min: 2, max: 5, current: 5, desired: 5 },
+            },
+          },
+        ]}
+      />,
+    )
+
+    expect(html.indexOf('Maxed')).toBeLessThan(html.indexOf('Wants more; capped at maxReplicas=5'))
+    expect(html).toContain('Wants more; capped at maxReplicas=5')
+    expect(html).not.toContain('HPA wants more replicas but is capped at maxReplicas=5')
+    expect(html).toContain('px-2 py-1.5')
+  })
+
+  it('uses compact missing-metrics copy in workload autoscaler context', () => {
+    const html = renderToString(
+      <WorkloadRenderer
+        kind="deployments"
+        data={deployment}
+        onScale={async () => {}}
+        scaleBlockedBy={[{ kind: 'HorizontalPodAutoscaler', namespace: 'prod', name: 'api' }]}
+        scalerDiagnostics={[
+          {
+            ref: { kind: 'HorizontalPodAutoscaler', namespace: 'prod', name: 'api' },
+            diagnosis: {
+              state: 'metrics_unavailable',
+              summary: 'Add memory requests to the target pods so HPA can compute replicas',
+              target: { kind: 'Deployment', name: 'api' },
+              bounds: { min: 2, max: 10, current: 3, desired: 3 },
+              metrics: [{ type: 'Resource', name: 'memory', status: 'missing' }],
+            },
+          },
+        ]}
+      />,
+    )
+
+    expect(html).toContain('Metrics unavailable')
+    expect(html).toContain('Add memory requests; HPA cannot compute replicas')
+    expect(html).not.toContain('Add memory requests to the target pods')
+  })
+
+  it('uses compact pinned copy in workload autoscaler context', () => {
+    const html = renderToString(
+      <WorkloadRenderer
+        kind="deployments"
+        data={deployment}
+        onScale={async () => {}}
+        scaleBlockedBy={[{ kind: 'HorizontalPodAutoscaler', namespace: 'prod', name: 'api' }]}
+        scalerDiagnostics={[
+          {
+            ref: { kind: 'HorizontalPodAutoscaler', namespace: 'prod', name: 'api' },
+            diagnosis: {
+              state: 'pinned',
+              summary: 'HPA is configured for a fixed replica count of 3',
+              target: { kind: 'Deployment', name: 'api' },
+              bounds: { min: 3, max: 3, current: 3, desired: 3 },
+            },
+          },
+        ]}
+      />,
+    )
+
+    expect(html).toContain('Pinned')
+    expect(html).toContain('Fixed at 3 replicas')
+    expect(html).not.toContain('fixed replica count')
   })
 })

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

@@ -4,15 +4,24 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink, ResourceRefBadge } from '../../ui/drawer-components'
 import { DialogPortal } from '../../ui/DialogPortal'
 import { Tooltip } from '../../ui/Tooltip'
-import type { RBACSubjectResponse, RBACPolicyRule, ResourceRef } from '../../../types'
+import { Badge, type BadgeSeverity } from '../../ui/Badge'
+import type { RBACSubjectResponse, RBACPolicyRule, ResourceRef, HPADiagnosis } from '../../../types'
 import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
 import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
+import { hpaStateLabel, hpaStateLevel } from '../resource-utils-hpa'
 import {
   rbacVerbBadgeClass,
   rbacResourceBadgeClass,
   rbacApiGroupBadgeClass,
 } from '../../../utils/rbac-badges'
 
+export interface ScalerDiagnosis {
+  ref: ResourceRef
+  diagnosis?: HPADiagnosis
+  loading?: boolean
+  error?: string
+}
+
 interface WorkloadRendererProps {
   kind: string
   data: any
@@ -21,6 +30,7 @@ interface WorkloadRendererProps {
   onScale?: (replicas: number) => Promise<void>
   isScalePending?: boolean
   scaleBlockedBy?: ResourceRef[]
+  scalerDiagnostics?: ScalerDiagnosis[]
   onRequestRefresh?: () => void
   /**
    * RBAC reverse-lookup for the workload's pod-template ServiceAccount.
@@ -110,7 +120,27 @@ function formatScalerLabel(ref: ResourceRef): string {
   return `${ref.kind} ${prefix}${ref.name}`
 }
 
-export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, scaleBlockedBy, onRequestRefresh, rbacData, rbacLoading, rbacError }: WorkloadRendererProps) {
+function compactHPASummary(diagnosis: HPADiagnosis): string {
+  if (diagnosis.state === 'limited_max') {
+    return `Wants more; capped at maxReplicas=${diagnosis.bounds.max}`
+  }
+  if (diagnosis.state === 'pinned') {
+    return `Fixed at ${diagnosis.bounds.current} replicas`
+  }
+  if (diagnosis.state === 'metrics_unavailable' || diagnosis.state === 'metrics_incomplete') {
+    const missingMetric = diagnosis.metrics?.find((metric) => metric.status !== 'ok')
+    if (missingMetric?.type === 'Resource' && missingMetric.name) {
+      return `Add ${missingMetric.name} requests; HPA cannot compute replicas`
+    }
+    if (missingMetric?.name) {
+      return `${missingMetric.name} metric unavailable; HPA cannot compute replicas`
+    }
+    return 'Metrics unavailable; HPA cannot compute replicas'
+  }
+  return diagnosis.summary
+}
+
+export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, scaleBlockedBy, scalerDiagnostics, onRequestRefresh, rbacData, rbacLoading, rbacError }: WorkloadRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const metadata = data.metadata || {}
@@ -226,8 +256,15 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
                   value={
                     <div className="flex flex-wrap gap-1">
                       {scaleBlockedBy.map((ref) => (
-                        <ResourceRefBadge key={`${ref.kind}/${ref.namespace}/${ref.name}`} resourceRef={ref} onClick={onNavigate} />
+                        <ResourceRefBadge key={`${ref.kind}/${ref.namespace}/${ref.name}`} resourceRef={ref} onClick={onNavigate} wrapAtSeparator />
                       ))}
+                      {scalerDiagnostics && scalerDiagnostics.length > 0 && (
+                        <div className="mt-1 w-full space-y-1">
+                          {scalerDiagnostics.map((entry) => (
+                            <ScalerDiagnosisRow key={`${entry.ref.kind}/${entry.ref.namespace}/${entry.ref.name}`} entry={entry} />
+                          ))}
+                        </div>
+                      )}
                     </div>
                   }
                 />
@@ -261,7 +298,6 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
               <button
                 type="button"
                 disabled
-                title={scaleBlockedReason}
                 aria-label={scaleBlockedReason}
                 className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-theme-text-tertiary bg-theme-elevated border border-theme-border rounded cursor-not-allowed"
               >
@@ -384,6 +420,39 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
   )
 }
 
+function ScalerDiagnosisRow({ entry }: { entry: ScalerDiagnosis }) {
+  if (entry.loading) {
+    return <div className="text-xs text-theme-text-tertiary">Loading autoscaler diagnosis...</div>
+  }
+  if (entry.error) {
+    return <div className="text-xs text-theme-text-tertiary">Autoscaler diagnosis unavailable</div>
+  }
+  if (!entry.diagnosis) return null
+  return (
+    <div className="rounded border border-theme-border bg-theme-surface px-2 py-1.5 text-xs leading-6 text-theme-text-secondary whitespace-normal break-normal">
+      <Badge severity={badgeSeverityForHPA(entry.diagnosis)} size="sm" className="mr-1.5 align-middle">{hpaStateLabel(entry.diagnosis.state)}</Badge>
+      <span className="align-middle whitespace-normal break-normal">{compactHPASummary(entry.diagnosis)}</span>
+    </div>
+  )
+}
+
+function badgeSeverityForHPA(diagnosis: HPADiagnosis): BadgeSeverity {
+  switch (hpaStateLevel(diagnosis.state)) {
+    case 'healthy':
+      return 'success'
+    case 'unhealthy':
+      return 'error'
+    case 'degraded':
+      return 'warning'
+    case 'alert':
+      return 'alert'
+    case 'neutral':
+      return 'info'
+    default:
+      return 'neutral'
+  }
+}
+
 // ============================================================================
 // WORKLOAD PERMISSIONS SECTION
 // ============================================================================

package/src/components/resources/resource-utils-hpa.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { getHPATableState, hpaStateLabel } from './resource-utils-hpa'
+import type { HPADiagnosisState } from '../../types'
+
+interface FixtureCase {
+  name: string
+  hpa: unknown
+  expectedTableState: HPADiagnosisState
+}
+
+describe('getHPATableState', () => {
+  for (const tc of loadCases()) {
+    it(`classifies ${tc.name}`, () => {
+      expect(getHPATableState(tc.hpa)).toBe(tc.expectedTableState)
+    })
+  }
+})
+
+describe('hpaStateLabel', () => {
+  it('keeps max-bound wording terse for table cells', () => {
+    expect(hpaStateLabel('limited_max')).toBe('Maxed')
+  })
+})
+
+function loadCases(): FixtureCase[] {
+  const path = resolve(process.cwd(), '../../testdata/hpa-diagnosis/cases.json')
+  return JSON.parse(readFileSync(path, 'utf8')) as FixtureCase[]
+}