@skyhook-io/k8s-ui 1.7.15 → 1.8.0

package/src/components/issues/severity.ts

@@ -1,23 +1,21 @@
 import type { IssueSeverity } from './types';
+import { BADGE_SEVERITY_COLORS as sev } from '../ui/Badge';
 
-// Visual language for the 2-tier Issues severity, deliberately reusing the
-// SAME class strings as the Checks queue (components/checks/severity.ts):
-// critical = red (= Checks `critical`), warning = amber (= Checks `medium`).
-// Issues and Checks are different severity axes, but the queues must read as
-// one product — sharing the exact hues makes the rails/pills pixel-identical.
-//
-// Class strings are literal so each consuming app's Tailwind @source scan emits
-// them.
+// Visual language for the 2-tier Issues severity. critical = red, warning =
+// amber. Issues and Checks are different severity axes but must read as one
+// product — both pull from the canonical Badge severity tones
+// (BADGE_SEVERITY_COLORS), so their pills match each other and every status
+// badge elsewhere.
 
 export const ISSUE_SEVERITY_LABEL: Record<IssueSeverity, string> = {
   critical: 'Critical',
   warning: 'Warning',
 };
 
-// Pill badge — the loud, explicit severity signal on a row.
+// Pill badge — the loud, explicit severity signal on a row (rendered with `badge-sm`).
 export const ISSUE_SEVERITY_BADGE_CLASS: Record<IssueSeverity, string> = {
-  critical: 'bg-red-50 text-red-700 ring-1 ring-red-200 dark:bg-red-950/50 dark:text-red-300 dark:ring-red-900',
-  warning: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:ring-amber-900',
+  critical: sev.error,
+  warning: sev.warning,
 };
 
 // Solid fill — dots + the proportional distribution bar segments.
@@ -73,12 +71,18 @@ const CATEGORY_LABEL: Record<string, string> = {
   high_restart: 'High restart count',
   missing_config_ref: 'Missing reference',
   pdb_blocks_evictions: 'PDB blocks evictions',
+  secret_sync_failed: 'Secret sync failed',
   service_no_endpoints: 'No endpoints',
   ingress_backend_missing: 'Ingress backend missing',
+  load_balancer_pending: 'Load balancer pending',
+  gateway_not_ready: 'Gateway not ready',
+  gateway_route_invalid: 'Gateway route invalid',
   dns_failure: 'DNS failure',
   network_policy_block: 'Network policy block',
   pvc_pending: 'PVC pending',
   pvc_lost: 'PVC lost',
+  pv_failed: 'PV failed',
+  pvc_resize_failed: 'PVC resize failed',
   volume_mount_failed: 'Volume mount failed',
   volume_access_mode_conflict: 'Volume access conflict',
   job_failed: 'Job failed',
@@ -89,6 +93,10 @@ const CATEGORY_LABEL: Record<string, string> = {
   certificate_not_ready: 'Certificate not ready',
   pod_security_violation: 'Pod Security violation',
   node_not_ready: 'Node not ready',
+  node_provisioning_failed: 'Node provisioning failed',
+  apiservice_unavailable: 'APIService unavailable',
+  crossplane_reconcile_failed: 'Crossplane reconcile failed',
+  termination_stuck: 'Stuck terminating',
   operator_condition_failed: 'Controller condition',
   gitops_sync_failed: 'GitOps sync failed',
   gitops_render_failed: 'GitOps render failed',

package/src/components/resources/ResourcesSidebar.tsx

@@ -464,7 +464,9 @@ export function ResourcesSidebar({
 
   return (
     <div className={clsx('w-56 2xl:w-72 bg-theme-surface dark:bg-theme-base border-r border-theme-border overflow-y-auto overflow-x-hidden shrink-0', className)}>
-      <div className="px-2 py-2 border-b border-theme-border">
+      {/* py-3 matches the table toolbar's vertical padding so the sidebar
+          header and the toolbar align (same band height + border line). */}
+      <div className="px-2 py-3 border-b border-theme-border">
         <div className="relative">
           <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
           <input

package/src/components/resources/ResourcesView.tsx

@@ -2722,6 +2722,19 @@ export function ResourcesView({
       scope: 'resources',
       handler: () => handleSort('status'),
     },
+    {
+      id: 'resources-bulk-select',
+      keys: 'b',
+      description: 'Toggle bulk select',
+      category: 'Table',
+      scope: 'resources',
+      handler: () => {
+        if (bulkMode) { exitBulkMode(); return }
+        if (!canBulkSelect) return
+        exitCompareMode()
+        setBulkMode(true)
+      },
+    },
     {
       id: 'resources-clear-highlight',
       keys: 'Escape',

package/src/components/resources/index.ts

@@ -1,4 +1,5 @@
 export * from './resource-utils'
+export * from './resource-utils-hpa'
 export * from './resource-utils-argo'
 export * from './resource-utils-certmanager'
 export * from './resource-utils-cnpg'

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