@skyhook-io/k8s-ui 1.14.4 → 1.14.6

package/src/components/resources/ResourcesView.tsx

@@ -3,6 +3,7 @@ import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
 import { useDebouncedValue } from '../../hooks/useDebouncedValue'
 import { PaneLoader } from '../ui/PaneLoader'
 import { RestrictedState } from '../ui/RestrictedState'
+import { FetchResult } from '../ui/FetchResult'
 import { Input } from '../ui/Input'
 import type { TopPodMetrics, TopNodeMetrics, ContainerResourceMetrics } from '../../types'
 import {
@@ -711,6 +712,23 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'metrics', label: 'Metrics', width: 'w-40', tooltip: 'Per-metric verdicts' },
     { key: 'age', label: 'Age', width: 'w-24' },
   ],
+  analysistemplates: [
+    { key: 'name', label: 'Name' },
+    { key: 'namespace', label: 'Namespace', width: 'w-48' },
+    { key: 'metricCount', label: 'Metrics', width: 'w-24' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
+  clusteranalysistemplates: [
+    { key: 'name', label: 'Name' },
+    { key: 'metricCount', label: 'Metrics', width: 'w-24' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
+  experiments: [
+    { key: 'name', label: 'Name' },
+    { key: 'namespace', label: 'Namespace', width: 'w-48' },
+    { key: 'status', label: 'Phase', width: 'w-28' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
   workflows: [
     { key: 'name', label: 'Name' },
     { key: 'namespace', label: 'Namespace', width: 'w-48' },
@@ -2826,6 +2844,9 @@ const CURATED_COLUMN_GROUPS: Record<string, readonly string[]> = {
   sbomreports: ['aquasecurity.github.io'],
   vulnerabilityreports: ['aquasecurity.github.io'],
   analysisruns: ['argoproj.io'],
+  analysistemplates: ['argoproj.io'],
+  clusteranalysistemplates: ['argoproj.io'],
+  experiments: ['argoproj.io'],
   applications: ['argoproj.io'],
   applicationsets: ['argoproj.io'],
   appprojects: ['argoproj.io'],
@@ -4987,11 +5008,13 @@ export function ResourcesView({
   // forbidden/unavailable in counts (e.g. an informer not yet synced at counts
   // time) while the list query has since returned data — show the table, not
   // RestrictedState. A 403 on the list itself never carries rows, so it still
-  // forces the restricted state.
+  // forces the restricted state. A non-403 list error also beats the counts
+  // entry: a kind whose sync deadline fired is reported unavailable by counts,
+  // but the list knows it failed to load — that is not an RBAC answer.
   const selectedHasRows = Array.isArray(resources) && resources.length > 0
   const isSelectedForbidden =
     isForbiddenError(selectedQueryError) ||
-    (!selectedHasRows && forbiddenKinds.has(selectedKindCountKey))
+    (!selectedHasRows && !selectedQueryError && forbiddenKinds.has(selectedKindCountKey))
 
   // Reset sort and filters when kind changes (but not when syncing from URL navigation)
   // Track previous kind to skip on mount (where the effect fires but kind hasn't actually changed)
@@ -6277,6 +6300,15 @@ export function ResourcesView({
                 />
               </div>
             </div>
+          ) : selectedQueryError && !Array.isArray(resources) ? (
+            // A failed fetch with no rows to fall back on must not reach the
+            // empty state below — it would tell the user the cluster has none.
+            <FetchResult
+              loading={false}
+              error={selectedQueryError}
+              onRetry={selectedQuery?.refetch}
+              className="absolute inset-0"
+            />
           ) : largeListGuard ? (
             <div className="absolute inset-0 flex flex-col items-center justify-center text-theme-text-tertiary px-6 text-center">
               <AlertTriangle className="w-8 h-8 text-amber-400 mb-2" />
@@ -7081,6 +7113,11 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
       return <RolloutCell resource={resource} column={column} />
     case 'analysisruns':
       return <AnalysisRunCell resource={resource} column={column} />
+    case 'analysistemplates':
+    case 'clusteranalysistemplates':
+      return <AnalysisTemplateCell resource={resource} column={column} />
+    case 'experiments':
+      return <ExperimentCell resource={resource} column={column} />
     case 'workflows':
       return <WorkflowCell resource={resource} column={column} />
     case 'cronworkflows':
@@ -8746,6 +8783,23 @@ function RolloutCell({ resource, column }: { resource: any; column: string }) {
   }
 }
 
+// An Experiment reports status.phase from the same AnalysisPhase vocabulary
+// as AnalysisRun (Successful/Running/Pending/Inconclusive/Failed/Error), so
+// getAnalysisRunStatus's mapping applies directly — routing here instead of
+// GenericCell avoids the generic phase heuristic's HEALTHY_PHASES set, which
+// doesn't recognize 'Successful' and treats 'Running' as healthy (neither
+// true for this vocabulary).
+function ExperimentCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getAnalysisRunStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
 function AnalysisRunCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status': {
@@ -8784,6 +8838,17 @@ function AnalysisRunCell({ resource, column }: { resource: any; column: string }
   }
 }
 
+function AnalysisTemplateCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'metricCount': {
+      const count = (resource.spec?.metrics || []).length
+      return <span className="text-sm text-theme-text-secondary">{count}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
 function WorkflowCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status': {

package/src/components/resources/curated-column-ownership.test.ts

@@ -63,8 +63,8 @@ describe('curated column ownership', () => {
   // Brace-counting, not parsing: assert the extraction actually saw the whole
   // table, or a silently-missed key would let the guard above pass vacuously.
   it('extracted every curated key', () => {
-    expect(CURATED.length).toBe(236)
-    expect(OWNED.size).toBe(198)
+    expect(CURATED.length).toBe(239)
+    expect(OWNED.size).toBe(201)
     expect(CURATED).toContain('pods')
     expect(CURATED).toContain('crossplanemanagedresources')
     expect([...OWNED]).toContain('awsmanagedcontrolplanes')
@@ -121,7 +121,7 @@ describe('every declaration resolves', () => {
     .map(m => [m[1], m[2].split(',').map(g => g.trim().replace(/'/g, ''))] as const)
 
   it('covers the whole ownership table', () => {
-    expect(DECLARED.length).toBe(198)
+    expect(DECLARED.length).toBe(201)
   })
 
   it.each(DECLARED)('%s is curated under each group it claims', (key, groups) => {

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/AnalysisTemplateRenderer.tsx

@@ -0,0 +1,150 @@
+import { Activity, Server } from 'lucide-react'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
+
+interface AnalysisTemplateRendererProps {
+  data: any
+}
+
+// Every metric.provider Argo Rollouts defines. Order matches the CRD's own
+// AnalysisTemplate reference doc.
+const PROVIDER_KEYS = [
+  'prometheus', 'web', 'kubernetes', 'job', 'wavefront', 'newRelic',
+  'datadog', 'cloudWatch', 'graphite', 'influxdb', 'skywalking', 'plugin',
+] as const
+
+function detectProvider(metric: any): { name: string; details: any } | null {
+  const provider = metric?.provider
+  if (!provider) return null
+  for (const key of PROVIDER_KEYS) {
+    if (provider[key]) return { name: key, details: provider[key] }
+  }
+  const key = Object.keys(provider)[0]
+  return key ? { name: key, details: provider[key] } : null
+}
+
+function providerLabel(name: string): string {
+  switch (name) {
+    case 'web': return 'Web'
+    case 'newRelic': return 'New Relic'
+    case 'cloudWatch': return 'CloudWatch'
+    default: return name.charAt(0).toUpperCase() + name.slice(1)
+  }
+}
+
+// A metric's provider config is unbounded (a full Job PodSpec, a PromQL
+// query, a plugin's arbitrary args) — show the handful of fields an operator
+// actually scans for per provider, not a full dump.
+function ProviderDetails({ name, details }: { name: string; details: any }) {
+  switch (name) {
+    case 'prometheus':
+      return (
+        <>
+          {details.address && <Property label="Address" value={details.address} />}
+          {details.query && <Property label="Query" value={<code className="text-xs">{details.query}</code>} />}
+        </>
+      )
+    case 'web':
+      return (
+        <>
+          {details.url && <Property label="URL" value={details.url} />}
+          {details.jsonPath && <Property label="JSON Path" value={<code className="text-xs">{details.jsonPath}</code>} />}
+          {details.method && <Property label="Method" value={details.method} />}
+        </>
+      )
+    case 'job':
+      return (
+        <Property
+          label="Job Image"
+          value={details.spec?.template?.spec?.containers?.[0]?.image}
+        />
+      )
+    case 'kubernetes':
+      return <Property label="Function" value={details.function} />
+    case 'datadog':
+      return details.query ? <Property label="Query" value={<code className="text-xs">{details.query}</code>} /> : null
+    case 'newRelic':
+      return details.query ? <Property label="Query" value={<code className="text-xs">{details.query}</code>} /> : null
+    case 'graphite':
+      return (
+        <>
+          {details.address && <Property label="Address" value={details.address} />}
+          {details.query && <Property label="Query" value={<code className="text-xs">{details.query}</code>} />}
+        </>
+      )
+    case 'influxdb':
+      return details.query ? <Property label="Query" value={<code className="text-xs">{details.query}</code>} /> : null
+    case 'wavefront':
+      return details.query ? <Property label="Query" value={<code className="text-xs">{details.query}</code>} /> : null
+    case 'plugin':
+      return null
+    default:
+      return null
+  }
+}
+
+// Pure spec renderer for AnalysisTemplate / ClusterAnalysisTemplate — no live
+// status to show (that's the AnalysisRun this template gets instantiated
+// into), just the metric definitions and args an operator configured.
+export function AnalysisTemplateRenderer({ data }: AnalysisTemplateRendererProps) {
+  const spec = data?.spec || {}
+  const metrics: any[] = spec.metrics || []
+  const args: any[] = spec.args || []
+
+  return (
+    <>
+      {metrics.length > 0 && (
+        <Section title={`Metrics (${metrics.length})`} icon={Activity} defaultExpanded>
+          <div className="space-y-2">
+            {metrics.map((metric: any) => {
+              const provider = detectProvider(metric)
+              return (
+                <div key={metric.name} className="card-inner space-y-1.5">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="font-mono text-sm text-theme-text-primary">{metric.name}</span>
+                    {provider && <Badge severity="neutral" size="sm">{providerLabel(provider.name)}</Badge>}
+                  </div>
+                  <PropertyList>
+                    {metric.interval && <Property label="Interval" value={metric.interval} />}
+                    {metric.count != null && <Property label="Count" value={metric.count} />}
+                    {metric.initialDelay && <Property label="Initial Delay" value={metric.initialDelay} />}
+                    {metric.successCondition && (
+                      <Property label="Success if" value={<code className="text-xs">{metric.successCondition}</code>} />
+                    )}
+                    {metric.failureCondition && (
+                      <Property label="Fail if" value={<code className="text-xs">{metric.failureCondition}</code>} />
+                    )}
+                    {metric.failureLimit != null && <Property label="Failure Limit" value={metric.failureLimit} />}
+                    {metric.inconclusiveLimit != null && <Property label="Inconclusive Limit" value={metric.inconclusiveLimit} />}
+                    {metric.consecutiveErrorLimit != null && (
+                      <Property label="Consecutive Error Limit" value={metric.consecutiveErrorLimit} />
+                    )}
+                    {provider && <ProviderDetails name={provider.name} details={provider.details} />}
+                  </PropertyList>
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {args.length > 0 && (
+        <Section title={`Arguments (${args.length})`} icon={Server}>
+          <PropertyList>
+            {args.map((arg: any) => (
+              <Property
+                key={arg.name}
+                label={arg.name}
+                value={arg.value ?? (arg.valueFrom ? 'from reference' : undefined)}
+              />
+            ))}
+          </PropertyList>
+        </Section>
+      )}
+
+      {metrics.length === 0 && args.length === 0 && (
+        <div className="p-4 text-sm text-theme-text-tertiary">This template declares no metrics.</div>
+      )}
+    </>
+  )
+}

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

@@ -2,10 +2,14 @@ import { useState, useRef, useEffect } from 'react'
 import { AlertTriangle, Copy, Check } from 'lucide-react'
 import { Section, ExpandableSection } from '../../ui/drawer-components'
 import { Tooltip } from '../../ui/Tooltip'
+import type { Relationships, ResourceRef } from '../../../types'
+import { ReflectorSummary, ReflectorSection } from './ReflectorSection'
 import { formatBytes } from '../../../utils/format'
 
 interface ConfigMapRendererProps {
   data: any
+  relationships?: Relationships
+  onNavigate?: (ref: ResourceRef) => void
 }
 
 // Short = single-line and under 120 chars — render inline
@@ -46,7 +50,7 @@ function CopyButton({ text }: { text: string }) {
   )
 }
 
-export function ConfigMapRenderer({ data }: ConfigMapRendererProps) {
+export function ConfigMapRenderer({ data, relationships, onNavigate }: ConfigMapRendererProps) {
   const dataEntries = Object.entries((data.data || {}) as Record<string, string>)
   const binaryDataKeys = Object.keys(data.binaryData || {})
 
@@ -62,6 +66,7 @@ export function ConfigMapRenderer({ data }: ConfigMapRendererProps) {
 
   return (
     <>
+      <ReflectorSummary data={data} reflection={relationships?.reflection} onNavigate={onNavigate} />
       <Section title={`Data (${dataEntries.length + binaryDataKeys.length} keys)`} defaultExpanded>
         <div className="space-y-3">
           {/* Short values: compact table */}
@@ -113,6 +118,8 @@ export function ConfigMapRenderer({ data }: ConfigMapRendererProps) {
         </div>
       </Section>
 
+      <ReflectorSection data={data} reflection={relationships?.reflection} onNavigate={onNavigate} />
+
       {data.immutable && (
         <div className="flex items-center gap-2 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded text-yellow-400 text-sm">
           <AlertTriangle className="w-4 h-4" />

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

@@ -0,0 +1,179 @@
+import { Activity, Boxes, Server } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner, ConditionsSection } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { canaryStepTemplateRefs } from './RolloutRenderer'
+
+interface ExperimentRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function phaseClass(phase?: string): string {
+  switch (phase) {
+    case 'Successful':
+      return 'status-healthy'
+    case 'Running':
+    case 'Progressing':
+    case 'Pending':
+      return 'status-degraded'
+    case 'Inconclusive':
+      return 'status-alert'
+    case 'Failed':
+    case 'Error':
+      return 'status-unhealthy'
+    default:
+      return 'status-unknown'
+  }
+}
+
+// Experiments run one or more Deployment-shaped templates side by side
+// (often unweighted "just try it" baselines, not always traffic-split) for
+// spec.duration, optionally gated by the same AnalysisTemplate references a
+// canary analysis step uses. No live demo fixture exists for this CRD (see
+// scripts/rollouts-demo/README.md) — built against the public schema.
+export function ExperimentRenderer({ data, onNavigate }: ExperimentRendererProps) {
+  const spec = data?.spec || {}
+  const status = data?.status || {}
+  const phase = status.phase || 'Unknown'
+  const templates: any[] = spec.templates || []
+  const templateStatuses: any[] = status.templateStatuses || []
+  const analyses: any[] = spec.analyses || []
+  // The controller's real field is analysisRuns (verified live) — each entry
+  // is {name, analysisRun, phase}, not the analysisRunStatuses/status shape
+  // the public docs' examples suggest.
+  const analysisRunStatuses: any[] = status.analysisRuns || []
+
+  const templateStatusByName = new Map(templateStatuses.map((t) => [t.name, t]))
+  const analysisRunStatusByName = new Map(analysisRunStatuses.map((a) => [a.name, a]))
+
+  const ownerRollout = (data?.metadata?.ownerReferences || []).find((ref: any) => ref.kind === 'Rollout')
+
+  return (
+    <>
+      {(phase === 'Failed' || phase === 'Error') && (
+        <AlertBanner
+          variant="error"
+          title={phase === 'Error' ? 'Experiment could not run' : 'Experiment failed'}
+          message={status.message || 'One or more templates or analyses did not succeed.'}
+        />
+      )}
+
+      {phase === 'Inconclusive' && (
+        <AlertBanner
+          variant="warning"
+          title="Experiment inconclusive"
+          message={status.message || 'An analysis matched neither its success nor failure condition.'}
+        />
+      )}
+
+      <Section title="Status" icon={Server}>
+        <PropertyList>
+          <Property label="Phase" value={<span className={clsx('badge', phaseClass(phase))}>{phase}</span>} />
+          <Property label="Duration" value={spec.duration} />
+          <Property label="Message" value={status.message} />
+          <Property label="Available At" value={status.availableAt ? formatAge(status.availableAt) : undefined} />
+          {ownerRollout && (
+            <Property
+              label="Rollout"
+              value={
+                onNavigate ? (
+                  <button
+                    onClick={() => onNavigate({ kind: 'Rollout', namespace: data?.metadata?.namespace ?? '', name: ownerRollout.name })}
+                    className="text-brand hover:underline"
+                  >
+                    {ownerRollout.name}
+                  </button>
+                ) : (
+                  ownerRollout.name
+                )
+              }
+            />
+          )}
+        </PropertyList>
+      </Section>
+
+      {templates.length > 0 && (
+        <Section title={`Templates (${templates.length})`} icon={Boxes} defaultExpanded>
+          <div className="space-y-2">
+            {templates.map((tmpl: any) => {
+              const tmplStatus = templateStatusByName.get(tmpl.name)
+              return (
+                <div key={tmpl.name} className="card-inner space-y-1.5">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="font-mono text-sm text-theme-text-primary">{tmpl.name}</span>
+                    {tmplStatus?.status && <span className={clsx('badge-sm', phaseClass(tmplStatus.status))}>{tmplStatus.status}</span>}
+                  </div>
+                  <PropertyList>
+                    <Property label="Replicas" value={tmpl.replicas} />
+                    {tmpl.weight !== undefined && <Property label="Weight" value={`${tmpl.weight}%`} />}
+                    {tmplStatus && (
+                      <Property
+                        label="Ready"
+                        value={`${tmplStatus.readyReplicas ?? 0}/${tmplStatus.replicas ?? tmpl.replicas ?? 0}`}
+                      />
+                    )}
+                    {tmplStatus?.podTemplateHash && <Property label="Pod Hash" value={tmplStatus.podTemplateHash} />}
+                  </PropertyList>
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {analyses.length > 0 && (
+        <Section title={`Analyses (${analyses.length})`} icon={Activity} defaultExpanded>
+          <PropertyList>
+            {analyses.map((analysis: any) => {
+              const runStatus = analysisRunStatusByName.get(analysis.name)
+              const refs = canaryStepTemplateRefs(analysis)
+              return (
+                <Property
+                  key={analysis.name}
+                  label={analysis.name}
+                  value={
+                    <span className="flex flex-wrap items-center gap-2">
+                      {runStatus?.phase && (
+                        <span className={clsx('badge-sm', phaseClass(runStatus.phase))}>{runStatus.phase}</span>
+                      )}
+                      {refs.map((ref) =>
+                        onNavigate ? (
+                          <button
+                            key={ref.name}
+                            onClick={() =>
+                              onNavigate({
+                                kind: ref.clusterScoped ? 'ClusterAnalysisTemplate' : 'AnalysisTemplate',
+                                namespace: ref.clusterScoped ? '' : data?.metadata?.namespace ?? '',
+                                name: ref.name,
+                              })
+                            }
+                            className="font-mono text-xs text-brand hover:underline"
+                          >
+                            {ref.name}
+                          </button>
+                        ) : (
+                          <span key={ref.name} className="font-mono text-xs text-theme-text-secondary">{ref.name}</span>
+                        )
+                      )}
+                      {runStatus?.analysisRun && onNavigate && (
+                        <button
+                          onClick={() => onNavigate({ kind: 'AnalysisRun', namespace: data?.metadata?.namespace ?? '', name: runStatus.analysisRun })}
+                          className="font-mono text-xs text-theme-text-tertiary hover:underline"
+                        >
+                          run: {runStatus.analysisRun}
+                        </button>
+                      )}
+                    </span>
+                  }
+                />
+              )
+            })}
+          </PropertyList>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={status.conditions} />
+    </>
+  )
+}

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>
       )}