@skyhook-io/k8s-ui 1.17.1 → 1.18.0

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

@@ -4,7 +4,7 @@ import { clsx } from 'clsx'
 import { PolicySection } from './PolicySection'
 import type { PolicyResourceResponse } from '../../../types/policy'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
-import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR, getDefaultContainerName } from '../resource-utils'
+import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR, getDefaultContainerName, getExecContainerNames } from '../resource-utils'
 import { getResourceStatusColor, SEVERITY_BORDER } from '../../../utils/badge-colors'
 import {
   rbacVerbBadgeClass,
@@ -91,7 +91,7 @@ interface PodRendererProps {
   hideMetricsServer?: boolean
   // Filesystem browser render props
   renderImageBrowser?: (props: { image: string; namespace: string; podName: string; pullSecrets: string[]; onClose: () => void; onSwitchToPodFiles?: () => void }) => ReactNode
-  renderPodBrowser?: (props: { namespace: string; podName: string; containers: string[]; initialContainer: string; onClose: () => void; onSwitchToImageFiles: () => void }) => ReactNode
+  renderPodBrowser?: (props: { namespace: string; podName: string; containers: string[]; initialContainer: string; onClose: () => void; onSwitchToImageFiles: (containerName?: string) => void }) => ReactNode
   /**
    * Resolved content for envFrom references.
    * When provided, expands ConfigMap/Secret keys inline instead of showing "(all keys)".
@@ -340,6 +340,16 @@ export function PodRenderer({
   // Pod filesystem modal state
   const [podFilesContainer, setPodFilesContainer] = useState<string | null>(null)
 
+  // A sidecar can be running while the pod is still Pending, and a stopped
+  // container has no live files, so match the image against running containers.
+  const runningImageContainer = selectedImage
+    ? getExecContainerNames(data).find((name) => {
+        const spec = [...containers, ...initContainers].find((c: any) => c.name === name)
+        const status = [...containerStatuses, ...initContainerStatuses].find((st: any) => st.name === name)
+        return spec?.image === selectedImage && !!status?.state?.running
+      })
+    : undefined
+
   const handleOpenTerminal = (containerName?: string) => {
     const container = containerName || getDefaultContainerName(data)
     if (namespace && podName && container) {
@@ -347,7 +357,7 @@ export function PodRenderer({
         namespace,
         podName,
         containerName: container,
-        containers: containers.map((c: { name: string }) => c.name),
+        containers: getExecContainerNames(data),
       })
     }
   }
@@ -512,6 +522,7 @@ export function PodRenderer({
               const isFailed = stateKey === 'terminated' && exitCode != null && exitCode !== 0
               const isWaiting = stateKey === 'waiting'
               const isInitRunning = stateKey === 'running'
+              const isSidecar = container.restartPolicy === 'Always'
 
               // Status label and color
               let statusLabel: string
@@ -553,6 +564,26 @@ export function PodRenderer({
                       <span className="text-sm font-medium text-theme-text-primary">{container.name}</span>
                     </div>
                     <div className="flex items-center gap-2">
+                      {isSidecar && isInitRunning && canExec && onOpenTerminal && (
+                        <Tooltip content="Terminal" delay={150}>
+                          <button
+                            onClick={() => handleOpenTerminal(container.name)}
+                            className="p-1 text-slate-400 hover:text-blue-400 hover:bg-slate-600/50 rounded transition-colors"
+                          >
+                            <TerminalIcon className="w-4 h-4" />
+                          </button>
+                        </Tooltip>
+                      )}
+                      {isSidecar && isInitRunning && canExec && renderPodBrowser && (
+                        <Tooltip content="Browse files" delay={150}>
+                          <button
+                            onClick={() => setPodFilesContainer(container.name)}
+                            className="p-1 text-slate-400 hover:text-blue-400 hover:bg-slate-600/50 rounded transition-colors"
+                          >
+                            <FolderOpen className="w-4 h-4" />
+                          </button>
+                        </Tooltip>
+                      )}
                       {canViewLogs && (
                         <Tooltip content="Logs" delay={150}>
                           <button
@@ -973,10 +1004,8 @@ export function PodRenderer({
         podName: podName || '',
         pullSecrets: imagePullSecrets,
         onClose: () => setSelectedImage(null),
-        onSwitchToPodFiles: isRunning && canExec && renderPodBrowser ? () => {
-          // Find which container uses this image and open pod files for it
-          const match = containers.find((c: any) => c.image === selectedImage)
-          setPodFilesContainer(match?.name || containers[0]?.name)
+        onSwitchToPodFiles: canExec && renderPodBrowser && (isRunning || runningImageContainer) ? () => {
+          setPodFilesContainer(runningImageContainer || containers[0]?.name)
         } : undefined,
       })}
 
@@ -984,12 +1013,12 @@ export function PodRenderer({
       {podFilesContainer && renderPodBrowser && renderPodBrowser({
         namespace: namespace || '',
         podName: podName || '',
-        containers: containers.map((c: { name: string }) => c.name),
+        containers: getExecContainerNames(data),
         initialContainer: podFilesContainer,
         onClose: () => setPodFilesContainer(null),
-        onSwitchToImageFiles: () => {
-          // Find which image this container uses and open image filesystem
-          const match = containers.find((c: any) => c.name === podFilesContainer)
+        onSwitchToImageFiles: (containerName?: string) => {
+          const selected = containerName || podFilesContainer
+          const match = [...containers, ...initContainers].find((c: any) => c.name === selected)
           if (match?.image) setSelectedImage(match.image)
         },
       })}

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

@@ -106,7 +106,7 @@ export function summarizeSchedulerMessage(message?: string, options: { plain?: b
     [/^(\d+) (?:node\(s\) )?Insufficient memory(?: \(0\/\d+ nodes available\))?$/i, 'do not have enough memory'],
     [/^(\d+) node\(s\) (?:didn.t match Pod.s node affinity\/selector|node affinity\/selector mismatch)(?: \(0\/\d+ nodes available\))?$/i, 'do not match the Pod’s node affinity or selector'],
     [/^(\d+) node\(s\) (?:had )?untolerated taint(?:\(s\))?(?: \{[^}]*\}| [^\s]+)?(?: \(0\/\d+ nodes available\))?$/i, 'have taints the Pod does not tolerate'],
-    [/^(\d+) node\(s\) (?:had )?volume node[- ]affinity conflict(?: \(0\/\d+ nodes available\))?$/i, 'do not match the volume’s node affinity'],
+    [/^(\d+) node\(s\) (?:(?:had )?volume node[- ]affinity conflict|didn.t match PersistentVolume.s node affinity)(?: \(0\/\d+ nodes available\))?$/i, 'do not match the volume’s node affinity'],
   ]
   return splitSchedulerClauses(m).filter((part) => part.trim()).map((part) => {
     const clause = part.trim()
@@ -738,6 +738,19 @@ export function getDefaultContainerName(pod: any): string | undefined {
   return containers[0]?.name
 }
 
+/**
+ * The containers a terminal can target: the regular containers, then native
+ * sidecars (init containers with restartPolicy: Always, Kubernetes 1.29+),
+ * which keep running for the pod's lifetime like regular containers.
+ */
+export function getExecContainerNames(pod: any): string[] {
+  const regular = (pod?.spec?.containers || []).map((c: any) => c.name)
+  const sidecars = (pod?.spec?.initContainers || [])
+    .filter((c: any) => c.restartPolicy === 'Always')
+    .map((c: any) => c.name)
+  return [...regular, ...sidecars].filter(Boolean)
+}
+
 export function getContainerSquareStates(pod: any): ContainerSquareState[] {
   const result: ContainerSquareState[] = []
   const initStatuses = pod.status?.initContainerStatuses || []
@@ -1314,7 +1327,7 @@ export function getCronJobStatus(cj: any): StatusBadge {
   if (activeJobs > 0) {
     return { text: `Active (${activeJobs})`, color: healthColors.neutral, level: 'neutral' }
   }
-  return { text: 'Scheduled', color: healthColors.healthy, level: 'healthy' }
+  return { text: 'Enabled', color: healthColors.neutral, level: 'neutral' }
 }
 
 export function getCronJobSchedule(cj: any): { cron: string; readable: string } {

package/src/components/resources/summarize-scheduler-message.test.ts

@@ -44,6 +44,7 @@ it.each([
   ['2 node(s) node affinity/selector mismatch (0/2 nodes available)', 'both nodes do not match the Pod’s node affinity or selector'],
   ['unbound PersistentVolumeClaim, 1 node(s) volume node-affinity conflict (0/2 nodes available)', 'a required volume claim is not bound; 1 node does not match the volume’s node affinity'],
   ['0/2 nodes are available: 1 node(s) had volume node affinity conflict, 1 Insufficient memory.', '1 node does not match the volume’s node affinity; 1 node does not have enough memory'],
+  ["0/3 nodes are available: 1 node(s) didn't satisfy existing pods anti-affinity rules, 2 node(s) didn't match PersistentVolume's node affinity.", "1 node(s) didn't satisfy existing pods anti-affinity rules; 2 nodes do not match the volume’s node affinity"],
   ['no node has kubernetes.io/arch=arm64 — 2 node(s) carry kubernetes.io/arch: [amd64]; 1 node(s) insufficient cpu (0/3 nodes available)', 'no node has kubernetes.io/arch=arm64 — 2 node(s) carry kubernetes.io/arch: [amd64]; 1 node does not have enough CPU'],
   ['custom scheduler says 2 Insufficient cpu, 1 Insufficient memory', 'custom scheduler says 2 Insufficient cpu; 1 node does not have enough memory'],
   ['1 node(s) pod anti-affinity conflict, 1 node(s) insufficient memory, no node has zone=west — 2 node(s) carry zone: [east, north]', '1 node(s) pod anti-affinity conflict; 1 node does not have enough memory; no node has zone=west — 2 node(s) carry zone: [east, north]'],

package/src/components/shared/DrainPlanDialog.test.tsx

@@ -108,6 +108,13 @@ describe('DrainPlanContent', () => {
     expect(html).toContain('About this estimate')
   })
 
+  it('distinguishes expected exclusions from protected workloads before draining', () => {
+    const html = render({ plan: plan([pod('agent', 'skip', { expectedSkip: true }), pod('bare', 'skip', { expectedSkip: false })]) })
+    expect(html).toContain('left by design')
+    expect(html).toContain('requires attention')
+    expect(html).toContain('bare reason')
+  })
+
   it('offers a refresh only when the host can recompute the plan', () => {
     const p = plan([pod('web', 'evict')])
     expect(render({ plan: p, onRefreshPlan: noop })).toContain('Recompute the plan')

package/src/components/shared/DrainPlanDialog.tsx

@@ -19,6 +19,7 @@ export interface DrainPlanPod {
   pdb?: string
   pdbChecked: boolean
   terminating?: boolean
+  expectedSkip?: boolean
 }
 
 export interface DrainPlan {
@@ -95,7 +96,8 @@ const OUTCOME_LABEL: Record<DrainOutcome, string> = {
 
 const ESTIMATE_CAVEAT =
   'An estimate, not a guarantee: the drain re-lists live state when it runs, and pods, budgets and permissions can change until then. ' +
-  'Evictions a budget refuses are retried until the drain deadline (60 seconds, shared by all evictions); a pod covered by more than one budget is refused outright.'
+  'Drain normally waits up to 2 minutes for evictions and pod deletion, retrying when a disruption budget temporarily blocks eviction. ' +
+  'Older Radar versions may return before pods are deleted. A pod covered by more than one budget is refused outright.'
 
 interface DrainPlanContentProps {
   nodeName: string
@@ -217,7 +219,9 @@ export function DrainPlanContent({
                 {current.pods.map((p) => (
                   <tr key={`${p.namespace}/${p.name}`} className="border-b border-theme-border last:border-b-0 align-top">
                     <td className="px-2 py-1.5 whitespace-nowrap">
-                      <Badge severity={OUTCOME_SEVERITY[p.outcome]} size="sm">{OUTCOME_LABEL[p.outcome]}</Badge>
+                      <Badge severity={p.outcome === 'skip' && p.expectedSkip === false ? 'warning' : OUTCOME_SEVERITY[p.outcome]} size="sm">
+                        {p.outcome === 'skip' && p.expectedSkip !== undefined ? p.expectedSkip ? 'left by design' : 'requires attention' : OUTCOME_LABEL[p.outcome]}
+                      </Badge>
                     </td>
                     <td className="px-2 py-1.5 font-mono whitespace-nowrap text-theme-text-primary">
                       {p.namespace}/{p.name}

package/src/components/shared/ResourceActionsBar.tsx

@@ -28,7 +28,7 @@ import { DialogPortal } from '../ui/DialogPortal'
 import type { SelectedResource, WorkloadRevision } from '../../types'
 import type { RadarUpgradeRequirement } from '../../types/fetch-error'
 import { displayKindName } from '../ui/drawer-components'
-import { getDefaultContainerName } from '../resources/resource-utils'
+import { getDefaultContainerName, getExecContainerNames } from '../resources/resource-utils'
 import { SetImageDialog, type SetImageOwnership } from './SetImageDialog'
 import { DrainPlanDialog, DEFAULT_DRAIN_DIALOG_OPTIONS, type DrainDialogOptions, type DrainPlan } from './DrainPlanDialog'
 import type { WorkloadImageInventory, WorkloadImageUpdate } from '../../types/core'
@@ -254,7 +254,7 @@ export function ResourceActionsBar({
         namespace: resource.namespace,
         podName: resource.name,
         containerName: getDefaultContainerName(data) || containers[0],
-        containers,
+        containers: getExecContainerNames(data),
       })
     }
   }
@@ -370,7 +370,7 @@ export function ResourceActionsBar({
                 onUncordonNode && (
                   <button
                     onClick={() => onUncordonNode({ name: resource.name })}
-                    disabled={isUncordoningNode}
+                    disabled={isUncordoningNode || isDrainingNode}
                     className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-emerald-600 hover:bg-emerald-700 rounded-lg transition-colors disabled:opacity-50"
                   >
                     <Play className={`w-3.5 h-3.5 ${isUncordoningNode ? 'animate-pulse' : ''}`} />

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -314,6 +314,7 @@ import type { ScalerDiagnosis } from '../resources/renderers/WorkloadRenderer'
  * When an override is not provided, the base (shared) renderer is used.
  */
 export interface RendererOverrides {
+  FluxHelmReleaseRenderer?: React.ComponentType<React.ComponentProps<typeof FluxHelmReleaseRenderer>>
   JobRenderer?: React.ComponentType<{ data: any; onNavigate?: (ref: ResourceRef) => void }>
   JobSetRenderer?: React.ComponentType<{ data: any; onNavigate?: (ref: ResourceRef) => void }>
   RayJobRenderer?: React.ComponentType<{ data: any; onNavigate?: (ref: ResourceRef) => void }>
@@ -755,6 +756,7 @@ export function ResourceRendererDispatch({
   const isKnownKind = KNOWN_KINDS.has(kind) || isCrossplaneMR || isCrossplaneClaim || isCrossplaneXR
 
   const JobComp = rendererOverrides?.JobRenderer ?? JobRenderer
+  const FluxHelmReleaseComp = rendererOverrides?.FluxHelmReleaseRenderer ?? FluxHelmReleaseRenderer
   const JobSetComp = rendererOverrides?.JobSetRenderer ?? JobSetRenderer
   const RayJobComp = rendererOverrides?.RayJobRenderer ?? RayJobRenderer
   const RayClusterComp = rendererOverrides?.RayClusterRenderer ?? RayClusterRenderer
@@ -879,7 +881,7 @@ export function ResourceRendererDispatch({
         {kind === 'ocirepositories' && <OCIRepositoryRenderer data={data} />}
         {kind === 'helmrepositories' && <HelmRepositoryRenderer data={data} />}
         {kind === 'kustomizations' && <KustomizationRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'helmreleases' && <FluxHelmReleaseRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'helmreleases' && <FluxHelmReleaseComp data={data} onNavigate={onNavigate} />}
         {kind === 'alerts' && <AlertRenderer data={data} />}
         {kind === 'applications' && <ArgoApplicationRenderer data={data} />}
         {kind === 'nodepools' && <KarpenterNodePoolComp data={data} onNavigate={onNavigate} />}

package/src/components/timeline/DiffViewer.test.tsx

@@ -23,4 +23,73 @@ describe("DiffViewer", () => {
     expect(html).toContain("Old value:");
     expect(html).toContain("New value:");
   });
+
+  it("renders values kept out of the feed as a badge, not as struck-through text", () => {
+    const html = renderToStaticMarkup(
+      <DiffViewer
+        diff={{
+          summary: "pod template annotation checksum/config changed",
+          fields: [
+            { path: "spec.template.metadata.annotations[checksum/config]", oldValue: "(value hidden)", newValue: "(value hidden)" },
+            { path: "spec.template.metadata.annotations[example.com/new]", oldValue: null, newValue: "(set)" },
+            { path: "spec.template.metadata.annotations[example.com/old]", oldValue: "(set)", newValue: null },
+            { path: "spec.template.spec.affinity", oldValue: "changed", newValue: "changed" },
+          ],
+        }}
+      />,
+    );
+
+    expect(html).not.toContain("line-through");
+    expect(html).not.toContain("(value hidden)");
+    expect(html).not.toContain("(set)");
+    expect(html.match(/value hidden/g)).toHaveLength(4);
+    expect(html).toContain("Set");
+    expect(html).toContain("Removed");
+  });
+
+  it("names key changes instead of striking through an unchanged key list", () => {
+    const html = renderToStaticMarkup(
+      <DiffViewer
+        diff={{
+          summary: "data modified keys: [password]",
+          fields: [{ path: "data (modified keys)", oldValue: ["password"], newValue: ["password"] }],
+        }}
+      />,
+    );
+    expect(html).toContain("keys changed: <span class=\"font-mono\">password</span>");
+    expect(html).not.toContain("line-through");
+    expect(html).not.toContain("Old value:");
+  });
+
+  it("merges added, removed and modified key lists of one field into one row", () => {
+    const html = renderToStaticMarkup(
+      <DiffViewer
+        diff={{
+          summary: "",
+          fields: [
+            { path: "data (added keys)", oldValue: null, newValue: ["token"] },
+            { path: "data (removed keys)", oldValue: ["old"], newValue: null },
+            { path: "data (modified keys)", oldValue: ["a", "b"], newValue: ["a", "b"] },
+            { path: "stringData (added keys)", oldValue: null, newValue: ["extra"] },
+            { path: "type", oldValue: "Opaque", newValue: "kubernetes.io/tls" },
+          ],
+        }}
+      />,
+    );
+    expect(html.match(/>data</g)).toHaveLength(1);
+    expect(html).toMatch(/keys changed: <span[^>]*>a, b<\/span>.*added: <span[^>]*>token<\/span>.*removed: <span[^>]*>old<\/span>/);
+    expect(html).toContain(">stringData<");
+    expect(html).toContain("added: <span class=\"font-mono\">extra</span>");
+    // Ordinary fields keep the old→new rendering.
+    expect(html).toContain("Old value:");
+    expect(html).toContain("kubernetes.io/tls");
+  });
+
+  it("keeps the old→new rendering when a key-list path does not carry a list", () => {
+    const html = renderToStaticMarkup(
+      <DiffViewer diff={{ summary: "", fields: [{ path: "data (modified keys)", oldValue: "x", newValue: "y" }] }} />,
+    );
+    expect(html).toContain("Old value:");
+    expect(html).not.toContain("keys changed");
+  });
 });

package/src/components/timeline/DiffViewer.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { clsx } from 'clsx'
-import { ArrowRight, Plus, Minus, RefreshCw } from 'lucide-react'
+import { ArrowRight, EyeOff, Plus, Minus, RefreshCw } from 'lucide-react'
 import type { DiffInfo, FieldChange } from '../../types'
 
 interface DiffViewerProps {
@@ -34,19 +34,128 @@ export const DiffViewer = memo(function DiffViewer({ diff, compact = false }: Di
 
       {/* Field changes */}
       <div className="space-y-1.5">
-        {diff.fields.map((field, idx) => (
-          <FieldChangeRow key={`${field.path}-${idx}`} field={field} />
-        ))}
+        {diffRows(diff.fields).map((row, idx) =>
+          row.kind === 'keys' ? (
+            <KeyListRow key={`${row.field}-${idx}`} row={row} />
+          ) : (
+            <FieldChangeRow key={`${row.field.path}-${idx}`} field={row.field} />
+          ),
+        )}
       </div>
     </div>
   )
 })
 
+// Secret and ConfigMap diffs report which keys changed as name lists, under
+// paths like "data (modified keys)", never values. Rendered as an old→new
+// pair, a modified key reads as removed and re-added, so key lists of one
+// field are merged into a single row that names what happened to each key.
+const KEY_LIST_PATH = /^(.+) \((added|removed|modified) keys\)$/
+
+type KeyChange = 'added' | 'removed' | 'modified'
+
+interface KeyListDiffRow {
+  kind: 'keys'
+  field: string
+  keys: Record<KeyChange, string[]>
+}
+
+type DiffRow = KeyListDiffRow | { kind: 'field'; field: FieldChange }
+
+function keyNames(value: unknown): string[] | null {
+  if (value === null || value === undefined) return []
+  return Array.isArray(value) && value.every((item) => typeof item === 'string') ? value : null
+}
+
+function diffRows(fields: FieldChange[]): DiffRow[] {
+  const rows: DiffRow[] = []
+  const byField = new Map<string, KeyListDiffRow>()
+  for (const field of fields) {
+    const match = KEY_LIST_PATH.exec(field.path)
+    const oldKeys = keyNames(field.oldValue)
+    const newKeys = keyNames(field.newValue)
+    if (!match || !oldKeys || !newKeys) {
+      rows.push({ kind: 'field', field })
+      continue
+    }
+    const [, base, change] = match
+    let row = byField.get(base)
+    if (!row) {
+      row = { kind: 'keys', field: base, keys: { added: [], removed: [], modified: [] } }
+      byField.set(base, row)
+      rows.push(row)
+    }
+    const list = row.keys[change as KeyChange]
+    for (const key of [...oldKeys, ...newKeys]) {
+      if (!list.includes(key)) list.push(key)
+    }
+  }
+  return rows
+}
+
+const KEY_CHANGE_LABEL: Record<KeyChange, string> = {
+  modified: 'keys changed',
+  added: 'added',
+  removed: 'removed',
+}
+
+function KeyListRow({ row }: { row: KeyListDiffRow }) {
+  const parts = (['modified', 'added', 'removed'] as const).filter((change) => row.keys[change].length > 0)
+  return (
+    <div className="rounded bg-theme-surface/50 border border-theme-border px-3 py-2">
+      <div className="text-xs font-mono text-theme-text-tertiary mb-1 break-words [overflow-wrap:anywhere]">{row.field}</div>
+      <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-sm text-theme-text-secondary">
+        {parts.map((change, idx) => (
+          <span key={change} className="min-w-0 [overflow-wrap:anywhere]">
+            {idx > 0 ? <span aria-hidden className="mr-2 text-theme-text-tertiary">·</span> : null}
+            {KEY_CHANGE_LABEL[change]}: <span className="font-mono">{row.keys[change].join(', ')}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 interface FieldChangeRowProps {
   field: FieldChange
 }
 
+// The backend never sends values it keeps out of the feed (secrets, config
+// blobs, large structures); it sends one of these markers instead. Older
+// events carry a bare "changed" on both sides.
+const HIDDEN_VALUE = '(value hidden)'
+const HIDDEN_SET = '(set)'
+
+function hiddenChange(field: FieldChange): 'changed' | 'set' | 'removed' | null {
+  const { oldValue, newValue } = field
+  const absent = (v: unknown) => v === null || v === undefined
+  if ((oldValue === HIDDEN_VALUE && newValue === HIDDEN_VALUE) || (oldValue === 'changed' && newValue === 'changed')) {
+    return 'changed'
+  }
+  if (absent(oldValue) && newValue === HIDDEN_SET) return 'set'
+  if (oldValue === HIDDEN_SET && absent(newValue)) return 'removed'
+  return null
+}
+
 function FieldChangeRow({ field }: FieldChangeRowProps) {
+  const hidden = hiddenChange(field)
+  if (hidden) {
+    const Icon = hidden === 'set' ? Plus : hidden === 'removed' ? Minus : RefreshCw
+    return (
+      <div className="rounded bg-theme-surface/50 border border-theme-border px-3 py-2">
+        <div className="text-xs font-mono text-theme-text-tertiary mb-1 break-words [overflow-wrap:anywhere]">{field.path}</div>
+        <div className="flex flex-wrap items-center gap-2 text-sm text-theme-text-secondary">
+          <Icon className="w-3.5 h-3.5 shrink-0" aria-hidden />
+          <span>{hidden === 'set' ? 'Set' : hidden === 'removed' ? 'Removed' : 'Changed'}</span>
+          <span className="inline-flex items-center gap-1 rounded-full bg-theme-elevated px-2 py-0.5 text-xs text-theme-text-tertiary">
+            <EyeOff className="w-3 h-3" aria-hidden />
+            value hidden
+          </span>
+        </div>
+      </div>
+    )
+  }
+
   const isAdded = field.oldValue === null || field.oldValue === undefined
   const isRemoved = field.newValue === null || field.newValue === undefined
   const isModified = !isAdded && !isRemoved

package/src/components/timeline/shared.test.tsx

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import {
+  isRolloutEvent,
   buildHealthSpans,
   sweepAggregateHealth,
   formatAggregateHealthTooltip,
@@ -217,3 +218,50 @@ describe('buildLaneMemberSpans (leaf gathering)', () => {
     expect(members.map((m) => m.name)).toEqual(['web'])
   })
 })
+
+describe('isRolloutEvent', () => {
+  type F = { path: string; oldValue?: unknown; newValue?: unknown }
+  const ev = (kind: string, fields: F[], summary = '') => ({
+    id: 'e', source: 'informer', eventType: 'update', kind, namespace: 'shop', name: 'web',
+    timestamp: new Date(0).toISOString(),
+    diff: { summary, fields: fields.map((f) => ({ oldValue: 1, newValue: 2, ...f })) },
+  }) as any
+
+  it('does not treat a pod-template edit alone as a rollout (OnDelete and paused workloads do not roll)', () => {
+    expect(isRolloutEvent(ev('Deployment', [{ path: 'spec.template.metadata.annotations[kubectl.kubernetes.io/restartedAt]' }], 'pod template annotation kubectl.kubernetes.io/restartedAt added (new pod template revision)'))).toBe(false)
+    expect(isRolloutEvent(ev('DaemonSet', [{ path: 'spec.template.metadata.annotations[checksum/config]' }]))).toBe(false)
+    expect(isRolloutEvent(ev('Rollout', [{ path: 'spec.template.spec.containers[].image' }], 'image: web:2'))).toBe(false)
+  })
+
+  it('treats updated-count movement with steady readiness as a rollout', () => {
+    expect(isRolloutEvent(ev('Deployment', [{ path: 'status.updatedReplicas', oldValue: 1, newValue: 2 }]))).toBe(true)
+    expect(isRolloutEvent(ev('DaemonSet', [{ path: 'status.updatedNumberScheduled', oldValue: 1, newValue: 2 }]))).toBe(true)
+  })
+
+  it('keeps degraded health visible when readiness moves in the same update', () => {
+    // A pod swap, a lost pod and a scale-up under failing readiness are
+    // indistinguishable from the counts alone.
+    expect(isRolloutEvent(ev('DaemonSet', [
+      { path: 'status.numberReady', oldValue: 4, newValue: 3 },
+      { path: 'status.updatedNumberScheduled', oldValue: 1, newValue: 2 },
+    ]))).toBe(false)
+    expect(isRolloutEvent(ev('Deployment', [
+      { path: 'status.readyReplicas', oldValue: 3, newValue: 2 },
+      { path: 'status.updatedReplicas', oldValue: 3, newValue: 5 },
+    ]))).toBe(false)
+  })
+
+  it('treats the reset at the start of a rollout as a rollout', () => {
+    expect(isRolloutEvent(ev('Deployment', [{ path: 'status.updatedReplicas', oldValue: 3, newValue: 0 }], 'updated: 3→0'))).toBe(true)
+  })
+
+  it('does not treat a lost pod or unrelated changes as a rollout', () => {
+    expect(isRolloutEvent(ev('Deployment', [
+      { path: 'status.readyReplicas', oldValue: 3, newValue: 2 },
+      { path: 'status.updatedReplicas', oldValue: 3, newValue: 2 },
+    ]))).toBe(false)
+    expect(isRolloutEvent(ev('Deployment', [{ path: 'status.readyReplicas', oldValue: 3, newValue: 1 }]))).toBe(false)
+    expect(isRolloutEvent(ev('Deployment', [{ path: 'spec.strategy.rollingUpdate.maxUnavailable' }], 'updated: wording without the field'))).toBe(false)
+    expect(isRolloutEvent(ev('Service', [{ path: 'status.updatedReplicas', oldValue: 1, newValue: 2 }]))).toBe(false)
+  })
+})

package/src/components/timeline/shared.tsx

@@ -57,28 +57,23 @@ export interface HealthSpanResult {
 }
 
 /**
- * Check if an event indicates a rollout is in progress (expected degradation).
- * Rollout signals include:
- * - Diff summary contains "updated:" (indicating replica count or image changes)
- * - Diff summary mentions image changes
- * - Event is for a deployment-like workload with degraded health
+ * Check if an event shows a rollout in progress (expected degradation): a
+ * deployment-like workload whose updated-replica count moved while its ready
+ * count held. Decided from the diff's field paths, not from summary wording.
+ *
+ * The rule errs toward keeping degraded health visible. A pod-template edit
+ * alone does not count (OnDelete and paused workloads take it without
+ * rolling), and an update that also moves the ready count does not count
+ * either: a lost pod and a scale-up under failing readiness look the same as
+ * a pod swap from the counts alone.
  */
-function isRolloutEvent(event: TimelineEvent): boolean {
+export function isRolloutEvent(event: TimelineEvent): boolean {
   // Only deployment-like workload controllers can have rollout transitions.
   if (!isDeploymentLikeWorkloadKind(event.kind)) return false
-
-  // Check diff summary for rollout signals
-  if (event.diff?.summary) {
-    const summary = event.diff.summary.toLowerCase()
-    // "updated:" typically indicates replica count changes during rollout
-    if (summary.includes('updated:')) return true
-    // Image changes trigger rollouts
-    if (summary.includes('image(') || summary.includes('image:')) return true
-    // Spec template changes often indicate rollout
-    if (summary.includes('template')) return true
-  }
-
-  return false
+  const paths = new Set((event.diff?.fields ?? []).map((field) => field.path))
+  const updatedMoved = paths.has('status.updatedReplicas') || paths.has('status.updatedNumberScheduled')
+  const readyMoved = paths.has('status.readyReplicas') || paths.has('status.numberReady')
+  return updatedMoved && !readyMoved
 }
 
 /**

package/src/components/ui/Toast.tsx

@@ -36,6 +36,7 @@ class ToastManager {
   private static instance: ToastManager
   private showErrorFn: ((message: string, detail?: string) => void) | null = null
   private showSuccessFn: ((message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) => void) | null = null
+  private showToastFn: ToastContextType['showToast'] | null = null
 
   static getInstance(): ToastManager {
     if (!ToastManager.instance) {
@@ -44,14 +45,16 @@ class ToastManager {
     return ToastManager.instance
   }
 
-  register(showError: typeof this.showErrorFn, showSuccess: typeof this.showSuccessFn) {
+  register(showError: typeof this.showErrorFn, showSuccess: typeof this.showSuccessFn, showToast: ToastContextType['showToast']) {
     this.showErrorFn = showError
     this.showSuccessFn = showSuccess
+    this.showToastFn = showToast
   }
 
   unregister() {
     this.showErrorFn = null
     this.showSuccessFn = null
+    this.showToastFn = null
   }
 
   showError(message: string, detail?: string) {
@@ -61,6 +64,10 @@ class ToastManager {
   showSuccess(message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) {
     this.showSuccessFn ? this.showSuccessFn(message, detail, action, onDetailClick) : console.log('[Toast]', message, detail)
   }
+
+  showNotice(message: string, detail: string | undefined, type: 'warning' | 'info') {
+    this.showToastFn ? this.showToastFn(message, { detail, type }) : console.warn('[Toast]', message, detail)
+  }
 }
 
 const toastManager = ToastManager.getInstance()
@@ -73,6 +80,10 @@ export function showApiSuccess(message: string, detail?: string, action?: Toast[
   toastManager.showSuccess(message, detail, action, onDetailClick)
 }
 
+export function showApiNotice(message: string, detail: string | undefined, type: 'warning' | 'info') {
+  toastManager.showNotice(message, detail, type)
+}
+
 export function useToast() {
   const context = useContext(ToastContext)
   if (!context) {
@@ -138,9 +149,9 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 
   // Wire up singleton for use outside React components
   useEffect(() => {
-    toastManager.register(showError, showSuccess)
+    toastManager.register(showError, showSuccess, showToast)
     return () => toastManager.unregister()
-  }, [showError, showSuccess])
+  }, [showError, showSuccess, showToast])
 
   return (
     <ToastContext.Provider value={{ showToast, showCopied, showError, showSuccess }}>
@@ -233,7 +244,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
               {toast.detail}
             </button>
           ) : (
-            <p className={clsx('mt-1 text-xs break-words', isError ? 'text-red-300/80' : isSuccess ? 'text-emerald-300/80' : 'text-theme-text-secondary')}>
+            <p className={clsx('mt-1 text-xs break-words whitespace-pre-line', isError ? 'text-red-300/80' : isSuccess ? 'text-emerald-300/80' : 'text-theme-text-secondary')}>
               {toast.detail}
             </p>
           )

package/src/components/ui/index.ts

@@ -33,7 +33,7 @@ export { Disclosure } from './Disclosure'
 export { ResourceBar } from './ResourceBar'
 export { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
 export { InClusterConsentDialog } from './InClusterConsentDialog'
-export { ToastProvider, useToast, showApiError, showApiSuccess } from './Toast'
+export { ToastProvider, useToast, showApiError, showApiSuccess, showApiNotice } from './Toast'
 export { CodeViewer } from './CodeViewer'
 export { YamlEditor, YamlDiffEditor } from './YamlEditor'
 // Boots the self-hosted Monaco runtime (bundled editor, local workers) without