@skyhook-io/k8s-ui 1.14.3 → 1.14.5

package/src/components/resources/HPADiagnosisSummary.tsx

@@ -0,0 +1,218 @@
+import type { ReactNode } from "react";
+import { Badge, type BadgeSeverity } from "../ui/Badge";
+import { StatusDot } from "../ui/status-tone";
+import { hpaStateLabel, hpaStateLevel } from "./resource-utils-hpa";
+import type {
+  HPADiagnosisState,
+  HPADiagnosisView,
+  HPAReasonSummary,
+} from "../../types";
+
+export 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";
+  }
+}
+
+/**
+ * A reason that named the state, or repeats the summary verbatim, says the
+ * headline over again — only the controller's own sentence behind it (the
+ * reason's detail) adds anything a reader does not already have.
+ */
+export function isHPAReasonRedundant(
+  diagnosis: HPADiagnosisView,
+  reason: HPAReasonSummary,
+): boolean {
+  return reason.id === diagnosis.state || reason.message === diagnosis.summary;
+}
+
+export interface HPAReasonGroups {
+  /** Reasons whose message restates the headline; render their detail, not their message. */
+  redundant: HPAReasonSummary[];
+  /** Reasons that carry something the headline does not. */
+  additional: HPAReasonSummary[];
+}
+
+export function hpaReasonGroups(diagnosis: HPADiagnosisView): HPAReasonGroups {
+  const reasons = diagnosis.reasons ?? [];
+  const redundant = reasons.filter((reason) =>
+    isHPAReasonRedundant(diagnosis, reason),
+  );
+  return {
+    redundant,
+    additional: reasons.filter((reason) => !redundant.includes(reason)),
+  };
+}
+
+function formatReasonID(id: string): string {
+  return id.replace(/_/g, " ");
+}
+
+export interface HPADiagnosisSummaryProps {
+  diagnosis: HPADiagnosisView;
+  /**
+   * `detail` — the HPA detail page: a boxed Evidence block per reason.
+   * `inline` — an evidence card on the workload the HPA scales: the headline
+   * once, then the controller's condition quoted and attributed.
+   */
+  variant: "detail" | "inline";
+  /**
+   * Host-rendered identity for the `inline` variant (the scaler's name, owner
+   * links) placed before the state indicator. Navigation stays with the host.
+   */
+  header?: ReactNode;
+}
+
+export function HPADiagnosisSummary({
+  diagnosis,
+  variant,
+  header,
+}: HPADiagnosisSummaryProps) {
+  const { redundant, additional } = hpaReasonGroups(diagnosis);
+  const bounds = diagnosis.bounds;
+
+  if (variant === "inline") {
+    return (
+      <div className="space-y-1 text-xs">
+        <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+          {header}
+          <span className="inline-flex items-center gap-1.5 text-theme-text-secondary">
+            <StatusDot
+              tone={hpaStateLevel(diagnosis.state)}
+              className="shrink-0"
+            />
+            {hpaStateLabel(diagnosis.state)}
+          </span>
+          {bounds ? (
+            <span className="font-mono tabular-nums text-theme-text-tertiary">
+              {bounds.current}/{bounds.desired} replicas · bounds {bounds.min}-
+              {bounds.max}
+            </span>
+          ) : null}
+        </div>
+        <p className="text-theme-text-secondary">{diagnosis.summary}</p>
+        {redundant.map((reason) =>
+          reason.detail ? (
+            <p
+              key={`${reason.id}-${reason.detail}`}
+              className="text-theme-text-tertiary"
+            >
+              {/* Same rule as the detail variant: only a condition-built
+                  reason carries the controller's own sentence. */}
+              {reason.conditionType ? (
+                <>
+                  Kubernetes {reason.conditionType}
+                  {reason.conditionReason ? ` · ${reason.conditionReason}` : ""}
+                  : &ldquo;{reason.detail}&rdquo;
+                </>
+              ) : (
+                reason.detail
+              )}
+            </p>
+          ) : null,
+        )}
+        {additional.length > 0 ? (
+          <ul className="list-disc space-y-0.5 pl-4 text-theme-text-secondary marker:text-theme-text-tertiary">
+            {additional.map((reason) => (
+              <li key={`${reason.id}-${reason.message}`}>
+                {reason.message}
+                {reason.detail ? (
+                  <span className="text-theme-text-tertiary">
+                    {" "}
+                    · {reason.detail}
+                  </span>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    );
+  }
+
+  const reasons = diagnosis.reasons ?? [];
+  return (
+    <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">
+            {diagnosis.summary}
+          </div>
+          {bounds ? (
+            <div className="mt-1 text-xs text-theme-text-secondary">
+              {bounds.current}/{bounds.desired} replicas, bounds {bounds.min}-
+              {bounds.max}
+            </div>
+          ) : null}
+        </div>
+        <Badge severity={hpaBadgeSeverity(diagnosis.state)}>
+          {hpaStateLabel(diagnosis.state)}
+        </Badge>
+      </div>
+      {reasons.length > 0 && (
+        <div className="space-y-2">
+          {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>
+                )}
+              </div>
+              {/* Radar's reading leads, as the reason is built to; the
+                  controller's own sentence follows it, quoted and attributed
+                  the same way the inline variant attributes it. Unlabelled
+                  beside the condition chips, it read as Radar's words. */}
+              {!isHPAReasonRedundant(diagnosis, reason) && (
+                <div className="mt-1 text-xs text-theme-text-secondary">
+                  {reason.message}
+                </div>
+              )}
+              {reason.detail &&
+                // `detail` is the controller's own sentence only on a reason
+                // built from a condition, which is the only kind that carries
+                // a condition type. Elsewhere it is Radar's — a list of metric
+                // names, a note about an unobserved generation — and quoting
+                // that as Kubernetes would put words in its mouth.
+                (reason.conditionType ? (
+                  <p className="mt-1 text-xs text-theme-text-tertiary">
+                    Kubernetes: &ldquo;{reason.detail}&rdquo;
+                  </p>
+                ) : (
+                  <p className="mt-1 text-xs text-theme-text-tertiary">
+                    {reason.detail}
+                  </p>
+                ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/resources/ResourcesView.tsx

@@ -1839,6 +1839,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'namespace', label: 'Namespace', width: 'w-36' },
     { key: 'status', label: 'Status', width: 'w-24' },
     { key: 'store', label: 'Store', width: 'w-36' },
+    { key: 'provider', label: 'Provider', width: 'w-48', tooltip: 'Backend the referenced store reads from. A dash means the store could not be read — it may not exist, or may be outside your access; an ellipsis means the stores are still loading.' },
     { key: 'refreshInterval', label: 'Refresh', width: 'w-24', tooltip: 'How often the value is re-pulled from the provider. A zero interval means it is fetched once and not updated afterward.' },
     { key: 'lastSync', label: 'Last Sync', width: 'w-28' },
     { key: 'age', label: 'Age', width: 'w-24' },
@@ -3270,6 +3271,10 @@ interface ResourcesViewData {
   onNavigate?: (path: string, options?: { replace?: boolean }) => void
   certExpiry?: Record<string, { expired?: boolean; daysLeft: number }>
   certExpiryError?: boolean
+  // Provider type per SecretStore, keyed 'ns/name' and 'name' for the
+  // cluster-scoped kind. An ExternalSecret names a store; only the store
+  // knows which backend it reads from.
+  storeProviders?: Record<string, string>
   /** Cluster Audit findings keyed by "namespace/name". Raw compatibility
    *  counts render danger as High and warning as Medium. */
   auditBadges?: Record<string, { danger: number; warning: number; messages?: AuditBadgeMessage[] }>
@@ -3330,6 +3335,10 @@ interface ResourcesViewProps {
   topNodeMetrics?: TopNodeMetrics[]
   certExpiry?: Record<string, { expired?: boolean; daysLeft: number }>
   certExpiryError?: boolean
+  // Provider type per SecretStore, keyed 'ns/name' and 'name' for the
+  // cluster-scoped kind. An ExternalSecret names a store; only the store
+  // knows which backend it reads from.
+  storeProviders?: Record<string, string>
   /** Cluster Audit findings keyed by "namespace/name". Raw compatibility
    *  counts render danger as High and warning as Medium. */
   auditBadges?: Record<string, { danger: number; warning: number; messages?: AuditBadgeMessage[] }>
@@ -3579,6 +3588,7 @@ export function ResourcesView({
   topNodeMetrics,
   certExpiry,
   certExpiryError,
+  storeProviders,
   auditBadges,
   pinned = [],
   togglePin = () => {},
@@ -6621,6 +6631,7 @@ export function ResourcesView({
                     isChecked={checkedResources.has(resourceKey)}
                     showCheckbox={isCheckboxMode}
                     majorityNodeMinorVersion={majorityNodeMinorVersion}
+                    storeProviders={storeProviders}
                     onRowClick={handleRowClick}
                     onRowMouseEnter={handleRowMouseEnter}
                     compareMode={compareMode}
@@ -6776,6 +6787,7 @@ interface ResourceRowCellsProps {
   isChecked?: boolean
   showCheckbox?: boolean
   majorityNodeMinorVersion?: string
+  storeProviders?: Record<string, string>
   // Row callbacks receive the resource so the parent can pass referentially
   // stable handlers — per-row closures would defeat React.memo and re-render
   // every visible row on each SSE-driven refetch.
@@ -6810,7 +6822,7 @@ function rowHighlightClass(
   return 'group-hover/row:bg-theme-surface/50'
 }
 
-const ResourceRowCells = React.memo(function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, hasSpacerColumn, isSelected, isHighlighted, isChecked, showCheckbox, majorityNodeMinorVersion, onRowClick, onRowMouseEnter, compareMode, comparePickIndex = -1, rowHref, onRowCheckToggle }: ResourceRowCellsProps) {
+const ResourceRowCells = React.memo(function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, hasSpacerColumn, isSelected, isHighlighted, isChecked, showCheckbox, majorityNodeMinorVersion, storeProviders, onRowClick, onRowMouseEnter, compareMode, comparePickIndex = -1, rowHref, onRowCheckToggle }: ResourceRowCellsProps) {
   const rowHighlight = rowHighlightClass(compareMode, comparePickIndex, isSelected, isHighlighted, isChecked)
   const pickedSide = comparePickIndex === 0 ? 'a' : comparePickIndex === 1 ? 'b' : null
   const onClick = onRowClick ? () => onRowClick(resource, !!isSelected) : undefined
@@ -6877,6 +6889,7 @@ const ResourceRowCells = React.memo(function ResourceRowCells({ resource, kind,
             group={group}
             column={col.key}
             majorityNodeMinorVersion={majorityNodeMinorVersion}
+            storeProviders={storeProviders}
             extraColumn={extraColumnsByKey?.get(col.key)}
             nameHref={col.key === 'name' ? rowHref : undefined}
           />
@@ -6920,6 +6933,7 @@ interface CellContentProps {
   column: string
   group?: string
   majorityNodeMinorVersion?: string
+  storeProviders?: Record<string, string>
   /** When provided, the parent has injected an ExtraColumn for this
    *  column key. Render via the extra's render() and short-circuit
    *  the built-in cell logic. */
@@ -6929,7 +6943,7 @@ interface CellContentProps {
   nameHref?: string
 }
 
-function CellContent({ resource, kind, column, group, majorityNodeMinorVersion, extraColumn, nameHref }: CellContentProps) {
+function CellContent({ resource, kind, column, group, majorityNodeMinorVersion, storeProviders, extraColumn, nameHref }: CellContentProps) {
   const { auditBadges } = useContext(ResourcesViewDataContext)
   // Parent-injected extra columns short-circuit the built-in switch.
   // Used by hosts that inject leading columns (e.g. a multi-cluster Cluster column).
@@ -7317,7 +7331,7 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
       return <SbomReportCell resource={resource} column={column} />
     // External Secrets Operator
     case 'externalsecrets':
-      return <ExternalSecretCell resource={resource} column={column} />
+      return <ExternalSecretCell resource={resource} column={column} storeProviders={storeProviders} />
     case 'clusterexternalsecrets':
       return <ClusterExternalSecretCell resource={resource} column={column} />
     case 'secretstores':

package/src/components/resources/index.ts

@@ -1,5 +1,12 @@
 export * from './resource-utils'
 export * from './resource-utils-hpa'
+export {
+  HPADiagnosisSummary,
+  hpaBadgeSeverity,
+  hpaReasonGroups,
+  isHPAReasonRedundant,
+} from './HPADiagnosisSummary'
+export type { HPADiagnosisSummaryProps, HPAReasonGroups } from './HPADiagnosisSummary'
 export * from './resource-utils-argo'
 export * from './resource-utils-certmanager'
 export * from './resource-utils-cnpg'

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

@@ -145,9 +145,9 @@ export function AWSManagedControlPlaneRenderer({ data }: Props) {
                   <td className="py-1 text-theme-text-secondary font-mono text-[10px]">{a.statusVersion !== '-' ? a.statusVersion : a.specVersion}</td>
                   <td className="py-1">
                     <span className={`badge badge-sm ${a.status === 'ACTIVE'
-                      ? 'status-healthy'
+                      ? 'status-green'
                       : a.status === 'DEGRADED'
-                      ? 'status-unhealthy'
+                      ? 'status-red'
                       : 'status-neutral'
                     }`}>{a.status}</span>
                   </td>

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

@@ -92,9 +92,9 @@ export function AlertRenderer({ data }: AlertRendererProps) {
             value={
               <span className={clsx(
                 'badge',
-                eventSeverity === 'error' ? 'bg-red-500/20 text-red-400' :
-                eventSeverity === 'warning' ? 'bg-yellow-500/20 text-yellow-400' :
-                'bg-blue-500/20 text-blue-400'
+                eventSeverity === 'error' ? 'status-red' :
+                eventSeverity === 'warning' ? 'status-amber' :
+                'status-blue'
               )}>
                 {eventSeverity}
               </span>

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

@@ -178,7 +178,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <button
                 onClick={() => onTerminate({ namespace, name })}
                 disabled={isTerminating}
-                className="flex items-center gap-1.5 px-2 py-1 rounded text-xs bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors disabled:opacity-50"
+                className="flex items-center gap-1.5 px-2 py-1 rounded text-xs status-red hover:opacity-80 transition-colors disabled:opacity-50"
                 title="Terminate sync"
               >
                 <XCircle className="w-3.5 h-3.5" />
@@ -237,7 +237,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <span
                 className={clsx(
                   'badge',
-                  syncPolicy.automated ? 'bg-green-500/20 text-green-400' : BADGE_INACTIVE
+                  syncPolicy.automated ? 'status-green' : BADGE_INACTIVE
                 )}
               >
                 {syncPolicy.automated ? 'Enabled' : 'Disabled'}
@@ -281,11 +281,11 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
                   className={clsx(
                     'badge',
                     operationState.phase === 'Succeeded'
-                      ? 'bg-green-500/20 text-green-400'
+                      ? 'status-green'
                       : operationState.phase === 'Running'
-                      ? 'bg-blue-500/20 text-blue-400'
+                      ? 'status-blue'
                       : operationState.phase === 'Failed' || operationState.phase === 'Error'
-                      ? 'bg-red-500/20 text-red-400'
+                      ? 'status-red'
                       : BADGE_INACTIVE
                   )}
                 >

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

@@ -287,7 +287,7 @@ export function CNPGClusterRenderer({ data, onNavigate, declared}: CNPGClusterRe
           )}
           {data.spec?.enableSuperuserAccess !== undefined && (
             <Property label="Superuser Access" value={
-              <span className={`badge-sm ${data.spec.enableSuperuserAccess ? 'bg-green-500/20 text-green-400' : 'bg-theme-hover text-theme-text-secondary'}`}>
+              <span className={`badge-sm ${data.spec.enableSuperuserAccess ? 'status-green' : 'bg-theme-hover text-theme-text-secondary'}`}>
                 {data.spec.enableSuperuserAccess ? 'Enabled' : 'Disabled'}
               </span>
             } />

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

@@ -120,13 +120,13 @@ export function CertificateRenderer({ data }: CertificateRendererProps) {
                 <span className={clsx(
                   'badge',
                   isReady
-                    ? 'bg-green-500/20 text-green-400'
-                    : 'bg-red-500/20 text-red-400'
+                    ? 'status-green'
+                    : 'status-red'
                 )}>
                   {isReady ? 'Ready' : 'Not Ready'}
                 </span>
                 {spec.isCA && (
-                  <span className="badge bg-purple-500/20 text-purple-400">
+                  <span className="badge status-purple">
                     CA Certificate
                   </span>
                 )}

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

@@ -54,8 +54,8 @@ export function CertificateRequestRenderer({ data }: CertificateRequestRendererP
               <span className={clsx(
                 'badge',
                 isReady
-                  ? 'bg-green-500/20 text-green-400'
-                  : 'bg-red-500/20 text-red-400'
+                  ? 'status-green'
+                  : 'status-red'
               )}>
                 {isReady ? 'Ready' : 'Not Ready'}
               </span>
@@ -67,10 +67,10 @@ export function CertificateRequestRenderer({ data }: CertificateRequestRendererP
               <span className={clsx(
                 'badge',
                 isApproved
-                  ? 'bg-green-500/20 text-green-400'
+                  ? 'status-green'
                   : isDenied
-                    ? 'bg-red-500/20 text-red-400'
-                    : 'bg-yellow-500/20 text-yellow-400'
+                    ? 'status-red'
+                    : 'status-amber'
               )}>
                 {isApproved ? 'Yes' : isDenied ? 'No' : 'Pending'}
               </span>

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

@@ -7,19 +7,19 @@ import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 function getChallengeStateBadge(state: string): { color: string; text: string } {
   switch (state?.toLowerCase()) {
     case 'valid':
-      return { text: 'Valid', color: 'bg-green-500/20 text-green-400' }
+      return { text: 'Valid', color: 'status-green' }
     case 'ready':
-      return { text: 'Ready', color: 'bg-blue-500/20 text-blue-400' }
+      return { text: 'Ready', color: 'status-blue' }
     case 'pending':
-      return { text: 'Pending', color: 'bg-yellow-500/20 text-yellow-400' }
+      return { text: 'Pending', color: 'status-amber' }
     case 'processing':
-      return { text: 'Processing', color: 'bg-yellow-500/20 text-yellow-400' }
+      return { text: 'Processing', color: 'status-amber' }
     case 'invalid':
-      return { text: 'Invalid', color: 'bg-red-500/20 text-red-400' }
+      return { text: 'Invalid', color: 'status-red' }
     case 'expired':
-      return { text: 'Expired', color: 'bg-red-500/20 text-red-400' }
+      return { text: 'Expired', color: 'status-red' }
     case 'errored':
-      return { text: 'Errored', color: 'bg-red-500/20 text-red-400' }
+      return { text: 'Errored', color: 'status-red' }
     default:
       return { text: state || 'Unknown', color: BADGE_INACTIVE }
   }
@@ -78,7 +78,7 @@ export function ChallengeRenderer({ data }: { data: any }) {
                   {challengeType}
                 </span>
                 {spec.wildcard && (
-                  <span className="badge bg-purple-500/20 text-purple-400">
+                  <span className="badge status-purple">
                     Wildcard
                   </span>
                 )}

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

@@ -144,7 +144,7 @@ function CiliumRuleCard({ rule }: { rule: any }) {
           <div className="text-xs text-theme-text-tertiary mb-1">From Entities</div>
           <div className="flex flex-wrap gap-1">
             {fromEntities.map((e, j) => (
-              <span key={j} className="badge bg-purple-500/20 text-purple-400 border-purple-500/30">{e}</span>
+              <span key={j} className="badge status-purple">{e}</span>
             ))}
           </div>
         </div>
@@ -215,7 +215,7 @@ function CiliumRuleCard({ rule }: { rule: any }) {
           <div className="text-xs text-theme-text-tertiary mb-1">To Entities</div>
           <div className="flex flex-wrap gap-1">
             {toEntities.map((e, j) => (
-              <span key={j} className="badge bg-purple-500/20 text-purple-400 border-purple-500/30">{e}</span>
+              <span key={j} className="badge status-purple">{e}</span>
             ))}
           </div>
         </div>
@@ -365,7 +365,7 @@ function L7Rules({ rules, ports }: { rules: any; ports?: any[] }) {
             {httpRules.map((r: any, i: number) => (
               <div key={i} className="flex flex-wrap items-center gap-1">
                 {r.method && (
-                  <span className="badge badge-sm bg-blue-500/20 text-blue-400 border-blue-500/30">
+                  <span className="badge badge-sm status-blue">
                     {r.method}
                   </span>
                 )}

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

@@ -81,8 +81,8 @@ function IssuerRendererBase({ data, kind }: { data: any; kind: string }) {
               <span className={clsx(
                 'badge',
                 isReady
-                  ? 'bg-green-500/20 text-green-400'
-                  : 'bg-red-500/20 text-red-400'
+                  ? 'status-green'
+                  : 'status-red'
               )}>
                 {isReady ? 'Ready' : 'Not Ready'}
               </span>

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

@@ -76,10 +76,10 @@ function AdminRuleCard({ rule, direction }: { rule: any; direction: 'from' | 'to
   const ports: any[] = rule.ports || []
 
   const actionColor = action === 'Deny'
-    ? 'bg-red-500/20 text-red-400 border-red-500/30'
+    ? 'status-red'
     : action === 'Pass'
-      ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
-      : 'bg-green-500/20 text-green-400 border-green-500/30'
+      ? 'status-amber'
+      : 'status-green'
 
   return (
     <div className="card-inner-lg">

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

@@ -131,9 +131,9 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
                       <span className={clsx(
                         'w-4 h-4 rounded-full flex items-center justify-center text-xs shrink-0',
                         isListenerAccepted
-                          ? 'bg-green-500/20 text-green-400'
+                          ? 'status-green'
                           : isListenerNotAccepted
-                            ? 'bg-red-500/20 text-red-400'
+                            ? 'status-red'
                             : BADGE_INACTIVE
                       )}>
                         {isListenerAccepted ? '\u2713' : isListenerNotAccepted ? '\u2717' : '?'}

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

@@ -364,7 +364,7 @@ function GenericConditionsSection({ conditions }: { conditions: any[] }) {
                   <span className="text-theme-text-primary font-medium">{cond.type}</span>
                   <span className={clsx(
                     'badge-sm',
-                    isTrue ? 'bg-theme-elevated text-theme-text-secondary' : 'bg-red-500/20 text-red-400'
+                    isTrue ? 'bg-theme-elevated text-theme-text-secondary' : 'status-red'
                   )}>
                     {cond.status}
                   </span>

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

@@ -2,11 +2,11 @@ import type { ReactNode } from 'react'
 import { Activity, Cpu } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ResourceLink, type ConditionTone } from '../../ui/drawer-components'
-import { Badge, type BadgeSeverity } from '../../ui/Badge'
+import { Badge } 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'
+import { HPADiagnosisSummary } from '../HPADiagnosisSummary'
+import type { HPADiagnosis } from '../../../types'
 
 interface HPARendererProps {
   data: any
@@ -16,23 +16,6 @@ interface HPARendererProps {
   extraSections?: ReactNode
 }
 
-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'
-  }
-}
-
 function hpaConditionTone(condition: any): ConditionTone | undefined {
   if (condition?.type === 'ScaledToZero') {
     if (condition.status === 'False') return 'ok'
@@ -50,14 +33,6 @@ function hpaConditionTone(condition: any): ConditionTone | undefined {
   return 'warning'
 }
 
-function formatReasonID(id: string): string {
-  return id.replace(/_/g, ' ')
-}
-
-function isReasonMessageRedundant(state: HPADiagnosisState, reason: NonNullable<HPADiagnosis['reasons']>[number]): boolean {
-  return state === 'limited_max' && reason.id === 'limited_max'
-}
-
 export function HPARenderer({ data, onNavigate, hpaDiagnosis, extraSections }: HPARendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
@@ -67,35 +42,7 @@ export function HPARenderer({ data, onNavigate, hpaDiagnosis, extraSections }: H
     <>
       {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>
-              <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>
+          <HPADiagnosisSummary diagnosis={hpaDiagnosis} variant="detail" />
         </Section>
       )}