style(rollouts): use the shared Badge/health-tone system instead of ad-hoc classes and a parallel vocabulary

- Metric provider badge (AnalysisTemplate renderer) hand-wrote
  `badge-sm status-neutral` instead of the shared <Badge> component —
  everywhere else in a drawer body (not a table cell, where .status-*
  is the documented exception) uses it directly.

- Arguments, AnalysisRun History, and ReplicaSets sections explicitly
  defaulted to collapsed with real, non-empty, non-low-priority
  content — every other populated section on the same pages already
  relies on Section's own default (expanded). Pod Template stays
  collapsed deliberately — it's not part of this fix; the same raw
  pod-spec dump already collapses by default in the generic
  WorkloadRenderer, a pre-existing, intentional convention.

- CanaryStepTimeline's step-analysis dot/badge used a hand-rolled
  'ok'/'warning'/'fail' vocabulary with hardcoded red/amber Tailwind
  backgrounds, duplicating (and requiring hand-translation back to)
  the canonical HealthLevel tones the badge already used one line
  away. Switched to HealthLevel + the shared healthColors token map
  throughout — same visual states (a failed/inconclusive analysis on
  the current step still gets its own color; a successful one doesn't
  change the dot, matching the original behavior exactly), no parallel
  vocabulary or raw colors left.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: 2 people

packages/k8s-ui/src/components/resources/renderers/AnalysisTemplateRenderer.tsx

@@ -1,5 +1,6 @@
 import { Activity, Server } from 'lucide-react'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 
 interface AnalysisTemplateRendererProps {
   data: any
@@ -101,7 +102,7 @@ export function AnalysisTemplateRenderer({ data }: AnalysisTemplateRendererProps
                 <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 && <span className="badge-sm status-neutral">{providerLabel(provider.name)}</span>}
+                    {provider && <Badge severity="neutral" size="sm">{providerLabel(provider.name)}</Badge>}
                   </div>
                   <PropertyList>
                     {metric.interval && <Property label="Interval" value={metric.interval} />}
@@ -128,7 +129,7 @@ export function AnalysisTemplateRenderer({ data }: AnalysisTemplateRendererProps
       )}
 
       {args.length > 0 && (
-        <Section title={`Arguments (${args.length})`} icon={Server} defaultExpanded={false}>
+        <Section title={`Arguments (${args.length})`} icon={Server}>
           <PropertyList>
             {args.map((arg: any) => (
               <Property

packages/k8s-ui/src/components/resources/renderers/rollout/CanaryStepTimeline.tsx

@@ -1,6 +1,7 @@
 import { Check, X, AlertTriangle, Minus, Clock } from 'lucide-react'
 import { clsx } from 'clsx'
 import { canaryStepLabel, canaryStepTemplateRefs } from '../RolloutRenderer'
+import { healthColors, type HealthLevel } from '../../resource-utils'
 
 export interface StepAnalysisStatus {
   name?: string
@@ -21,26 +22,32 @@ interface CanaryStepTimelineProps {
 
 type StepState = 'completed' | 'current' | 'pending'
 
-function stepDotTone(state: StepState, analysisTone?: 'ok' | 'warning' | 'fail') {
-  if (state === 'current' && analysisTone) {
-    if (analysisTone === 'fail') return 'bg-red-500/25 text-red-500 dark:bg-red-500/35'
-    if (analysisTone === 'warning') return 'bg-amber-500/25 text-amber-600 dark:text-amber-400 dark:bg-amber-500/35'
+// analysisLevel only ever arrives as 'unhealthy' (Failed/Error) or 'alert'
+// (Inconclusive) — a Successful analysis on the current step deliberately
+// gets no special color; the step itself may still be paused/in-progress
+// regardless, so it stays the same "current" tone as any other in-progress
+// step rather than reading as done. Reuses the shared HealthLevel/
+// healthColors vocabulary + theme tokens instead of a parallel ok/warning/
+// fail set and hand-picked Tailwind colors.
+function stepDotTone(state: StepState, analysisLevel?: HealthLevel) {
+  if (state === 'current' && (analysisLevel === 'unhealthy' || analysisLevel === 'alert')) {
+    return healthColors[analysisLevel]
   }
   switch (state) {
     case 'completed':
-      return 'bg-emerald-500/20 text-emerald-500 dark:bg-emerald-500/30'
+      return healthColors.healthy
     case 'current':
-      return 'bg-blue-500/20 text-blue-400 dark:bg-blue-500/30'
+      return healthColors.neutral
     default:
       return 'bg-theme-hover text-theme-text-tertiary'
   }
 }
 
-function StepDot({ state, analysisTone }: { state: StepState; analysisTone?: 'ok' | 'warning' | 'fail' }) {
-  const tone = stepDotTone(state, analysisTone)
+function StepDot({ state, analysisLevel }: { state: StepState; analysisLevel?: HealthLevel }) {
+  const tone = stepDotTone(state, analysisLevel)
   let Icon = Minus
-  if (state === 'current' && analysisTone === 'fail') Icon = X
-  else if (state === 'current' && analysisTone === 'warning') Icon = AlertTriangle
+  if (state === 'current' && analysisLevel === 'unhealthy') Icon = X
+  else if (state === 'current' && analysisLevel === 'alert') Icon = AlertTriangle
   else if (state === 'completed') Icon = Check
   else if (state === 'current') Icon = Clock
   return (
@@ -67,32 +74,27 @@ export function CanaryStepTimeline({ steps, currentStepIndex, stepAnalysisStatus
           const label = canaryStepLabel(step)
           const templateRefs = step.analysis ? canaryStepTemplateRefs(step) : []
           const showAnalysisStatus = isCurrent && step.analysis && stepAnalysisStatus?.status
-          const analysisTone: 'ok' | 'warning' | 'fail' | undefined = showAnalysisStatus
+          const analysisLevel: HealthLevel | undefined = showAnalysisStatus
             ? stepAnalysisStatus!.status === 'Successful'
-              ? 'ok'
+              ? 'healthy'
               : stepAnalysisStatus!.status === 'Failed' || stepAnalysisStatus!.status === 'Error'
-                ? 'fail'
+                ? 'unhealthy'
                 : stepAnalysisStatus!.status === 'Inconclusive'
-                  ? 'warning'
+                  ? 'alert'
                   : undefined
             : undefined
 
           return (
             <div key={index} className="relative flex items-start gap-2 py-1.5 pr-1 text-sm">
-              <StepDot state={state} analysisTone={analysisTone} />
+              <StepDot state={state} analysisLevel={analysisLevel} />
               <div className="min-w-0 flex-1 pl-1">
                 <div className="flex items-center gap-2">
                   <span className="text-[11px] text-theme-text-tertiary">#{index}</span>
                   <span className={clsx(isCurrent ? 'font-medium text-theme-text-primary' : state === 'completed' ? 'text-theme-text-secondary' : 'text-theme-text-tertiary')}>
                     {label}
                   </span>
                   {showAnalysisStatus && (
-                    <span
-                      className={clsx(
-                        'badge-sm',
-                        analysisTone === 'ok' ? 'status-healthy' : analysisTone === 'fail' ? 'status-unhealthy' : 'status-alert'
-                      )}
-                    >
+                    <span className={clsx('badge-sm', healthColors[analysisLevel ?? 'alert'])}>
                       {stepAnalysisStatus!.status}
                     </span>
                   )}