@skyhook-io/k8s-ui 1.17.0 → 1.18.0

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/EditableYamlView.test.tsx

@@ -266,3 +266,10 @@ it("drops a refresh from an apply made before going back to a newer review", asy
     expect.objectContaining({ reviewedResourceVersion: "3" }),
   );
 });
+
+it("uses the accent token for a generic ConfigMap Edit control", () => {
+  render({ onSave: async () => {}, onPreview: async () => reviewed("1") });
+  const edit = [...host.querySelectorAll("button")].find((b) => b.textContent?.trim() === "Edit")!;
+  expect(edit.classList.contains("text-accent-text")).toBe(true);
+  expect(edit.className).not.toContain("text-blue-");
+});

package/src/components/shared/EditableYamlView.tsx

@@ -552,7 +552,7 @@ export function EditableYamlView({
           {!readOnly && (
             <button
               onClick={handleStartEdit}
-              className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:text-blue-300 hover:bg-theme-elevated rounded"
+              className="flex items-center gap-1 px-2 py-1 text-xs text-accent-text hover:text-accent-light hover:bg-theme-elevated rounded"
             >
               <Pencil className="w-3.5 h-3.5" />
               Edit

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'
@@ -42,6 +42,7 @@ import { formatRelativeAgeTime } from '../../utils/format'
 
 interface ResourceActionsBarProps {
   resource: SelectedResource
+  leadingActions?: React.ReactNode
   data: any
   onClose?: () => void
   hideLogs?: boolean
@@ -80,6 +81,7 @@ interface ResourceActionsBarProps {
   cascadeDependents?: CascadeDependent[]
   cascadeLoading?: boolean
   cascadeRootResolved?: boolean
+  cascadePreviewFailed?: boolean
 
   // Workload restart
   onRestart?: (params: { kind: string; namespace: string; name: string }, callbacks?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => void
@@ -155,13 +157,13 @@ interface ResourceActionsBarProps {
 }
 
 export function ResourceActionsBar({
-  resource, data, onClose, hideLogs, showYaml, onToggleYaml,
+  resource, data, leadingActions, onClose, hideLogs, showYaml, onToggleYaml,
   onCompareTo,
   onCompareAcrossClusters,
   canExec, canViewLogs, canPortForward,
   onOpenTerminal, onOpenLogs: openLogs, onOpenWorkloadLogs: openWorkloadLogs, onCopyCommand,
   renderPortForward,
-  onDelete, isDeleting, cascadeDependents, cascadeLoading, cascadeRootResolved,
+  onDelete, isDeleting, cascadeDependents, cascadeLoading, cascadeRootResolved, cascadePreviewFailed,
   onRestart, isRestarting,
   onLoadImages, onSetImages, isSettingImages, imageOwnership,
   revisions: revisionsList, revisionsLoading, revisionsError, onRollback, isRollingBack,
@@ -252,7 +254,7 @@ export function ResourceActionsBar({
         namespace: resource.namespace,
         podName: resource.name,
         containerName: getDefaultContainerName(data) || containers[0],
-        containers,
+        containers: getExecContainerNames(data),
       })
     }
   }
@@ -291,6 +293,8 @@ export function ResourceActionsBar({
 
   return (
     <div className="flex items-center gap-1.5 px-4 py-2 flex-wrap">
+      <div className="flex min-w-0 flex-wrap items-center gap-1.5 empty:hidden" data-action-group="object">
+      {leadingActions}
       {/* Kind-specific actions (left) */}
       {kind === 'pods' && (
         <>
@@ -366,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' : ''}`} />
@@ -586,8 +590,8 @@ export function ResourceActionsBar({
         </button>
       )}
 
-      {/* Spacer pushes universal actions to the right */}
-      <div className="flex-1" />
+      </div>
+      <div className="ml-auto flex flex-wrap items-center gap-1.5" data-action-group="utility">
 
       {/* Universal actions (right-aligned). The AI/Diagnose action is NOT here — it
           lives in the detail header chrome (see WorkloadView), set apart from these
@@ -673,6 +677,8 @@ export function ResourceActionsBar({
         </Tooltip>
       )}
 
+      </div>
+
       <ForceDeleteConfirmDialog
         open={showDeleteConfirm}
         onClose={() => setShowDeleteConfirm(false)}
@@ -684,6 +690,7 @@ export function ResourceActionsBar({
         cascadeDependents={cascadeDependents}
         cascadeLoading={cascadeLoading}
         cascadeRootResolved={cascadeRootResolved}
+        cascadePreviewFailed={cascadePreviewFailed}
       />
 
       {onLoadImages && onSetImages && (

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -193,6 +193,7 @@ import {
   CNPGDatabaseRenderer,
   CNPGPublicationRenderer,
   CNPGSubscriptionRenderer,
+  CNPGDatabaseRoleRenderer,
   CNPGImageCatalogRenderer,
   KyvernoGlobalContextRenderer,
   KyvernoUpdateRequestRenderer,
@@ -313,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 }>
@@ -454,7 +456,7 @@ const KNOWN_KINDS = new Set([
   'rollouts', 'analysisruns', 'analysistemplates', 'clusteranalysistemplates', 'experiments', 'certificates', 'workflows', 'persistentvolumes',
   'storageclasses', 'certificaterequests', 'clusterissuers', 'issuers',
   'orders', 'challenges',
-  'gateways', 'gatewayclasses', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes', 'sealedsecrets', 'workflowtemplates', 'clusterworkflowtemplates',
+  'gateways', 'gatewayclasses', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes', 'udproutes', 'sealedsecrets', 'workflowtemplates', 'clusterworkflowtemplates',
   'networkpolicies', 'networkpolicy',
   'globalnetworkpolicies', 'globalnetworkpolicy',
   'stagednetworkpolicies', 'stagednetworkpolicy',
@@ -494,7 +496,7 @@ const KNOWN_KINDS = new Set([
   'externalsecrets', 'clusterexternalsecrets', 'secretstores', 'clustersecretstores',
   'clusters', 'scheduledbackups', 'poolers', 'objectstores',
   'globalcontextentries', 'updaterequests', 'ephemeralreports', 'clusterephemeralreports',
-  'databases', 'publications', 'imagecatalogs', 'clusterimagecatalogs',
+  'databases', 'publications', 'imagecatalogs', 'clusterimagecatalogs', 'databaseroles',
   'virtualservices', 'destinationrules', 'serviceentries',
   'peerauthentications', 'authorizationpolicies',
   'mutatingwebhookconfigurations', 'validatingwebhookconfigurations',
@@ -702,7 +704,7 @@ export function ResourceRendererDispatch({
   const isGroupGatedKind =
     kind === 'clusters' || kind === 'backups' || kind === 'scheduledbackups' || kind === 'poolers'
     || kind === 'objectstores' || kind === 'databases' || kind === 'publications'
-    || kind === 'subscriptions' || kind === 'imagecatalogs' || kind === 'clusterimagecatalogs' || kind === 'jobsets'
+    || kind === 'subscriptions' || kind === 'imagecatalogs' || kind === 'clusterimagecatalogs' || kind === 'databaseroles' || kind === 'jobsets'
     || kind === 'policies' || kind === 'rollouts' || kind === 'experiments'
     || kind === 'rayjobs' || kind === 'rayclusters' || kind === 'rayservices' || kind === 'admissionchecks' || kind === 'provisioningrequests'
     || kind === 'machines' || kind === 'machinesets' || kind === 'workloads' || kind === 'localqueues' || kind === 'clusterqueues'
@@ -713,7 +715,7 @@ export function ResourceRendererDispatch({
     || ((kind === 'scheduledbackups' || kind === 'poolers') && isCNPGApiVersion)
     || (kind === 'objectstores' && isApiGroup(data?.apiVersion, 'barmancloud.cnpg.io'))
     || ((kind === 'databases' || kind === 'publications' || kind === 'imagecatalogs'
-      || kind === 'clusterimagecatalogs') && isCNPGApiVersion)
+      || kind === 'clusterimagecatalogs' || kind === 'databaseroles') && isCNPGApiVersion)
     || (kind === 'subscriptions'
       && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'messaging.knative.dev')))
     || (kind === 'policies' && isApiGroup(data?.apiVersion, 'kyverno.io'))
@@ -754,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
@@ -800,7 +803,7 @@ export function ResourceRendererDispatch({
       {kind !== 'events' && <EventsSection fullscreen={!!renderSidebar} events={events || []} updates={updates || []} isLoading={eventsLoading ?? false} eventsError={eventsError ?? null} updatesError={updatesError ?? null} hint={eventsHint} />}
       <LabelsSection data={data} />
       <AnnotationsSection data={data} />
-      <MetadataSection data={data} />
+      <MetadataSection data={data} onNavigate={onNavigate} />
     </>
   )
 
@@ -860,6 +863,7 @@ export function ResourceRendererDispatch({
         {kind === 'grpcroutes' && <GRPCRouteRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'tcproutes' && <SimpleRouteRenderer data={data} kind="TCPRoute" onNavigate={onNavigate} />}
         {kind === 'tlsroutes' && <SimpleRouteRenderer data={data} kind="TLSRoute" onNavigate={onNavigate} />}
+        {kind === 'udproutes' && <SimpleRouteRenderer data={data} kind="UDPRoute" onNavigate={onNavigate} />}
         {kind === 'sealedsecrets' && <SealedSecretRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'workflowtemplates' || kind === 'clusterworkflowtemplates') && <WorkflowTemplateRenderer data={data} />}
         {isCoreNetworkPolicy && <NetworkPolicyRenderer data={data} />}
@@ -877,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} />}
@@ -926,6 +930,7 @@ export function ResourceRendererDispatch({
         {kind === 'databases' && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGDatabaseComp data={data} onNavigate={onNavigate} />}
         {kind === 'publications' && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGPublicationComp data={data} onNavigate={onNavigate} />}
         {kind === 'subscriptions' && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGSubscriptionComp data={data} onNavigate={onNavigate} />}
+        {kind === 'databaseroles' && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGDatabaseRoleRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'imagecatalogs' || kind === 'clusterimagecatalogs') && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGImageCatalogComp data={data} onNavigate={onNavigate} />}
         {kind === 'backups' && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGBackupRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'backups' && isApiGroup(data.apiVersion, 'velero.io') && <VeleroBackupComp data={data} onNavigate={onNavigate} />}
@@ -971,8 +976,8 @@ export function ResourceRendererDispatch({
         {kind === 'azuremanagedcontrolplanes' && <AzureManagedControlPlaneRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'azuremanagedmachinepools' && <AzureManagedMachinePoolRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'azuremachines' && <AzureMachineRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'virtualservices' && <IstioVirtualServiceRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'destinationrules' && <IstioDestinationRuleRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'virtualservices' && <IstioVirtualServiceRenderer data={data} onNavigate={onNavigate} serviceDomain={relationships?.istioServiceDomain} />}
+        {kind === 'destinationrules' && <IstioDestinationRuleRenderer data={data} onNavigate={onNavigate} serviceDomain={relationships?.istioServiceDomain} />}
         {kind === 'serviceentries' && <IstioServiceEntryRenderer data={data} />}
         {kind === 'peerauthentications' && <IstioPeerAuthenticationRenderer data={data} />}
         {kind === 'authorizationpolicies' && <IstioAuthorizationPolicyRenderer data={data} />}
@@ -1190,7 +1195,7 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
     return getGatewayStatus(data)
   }
   if (k === 'gatewayclasses') return getGatewayClassStatus(data)
-  if (k === 'httproutes' || k === 'grpcroutes' || k === 'tcproutes' || k === 'tlsroutes') return getRouteStatus(data)
+  if (k === 'httproutes' || k === 'grpcroutes' || k === 'tcproutes' || k === 'tlsroutes' || k === 'udproutes') return getRouteStatus(data)
   if (k === 'sealedsecrets') return getSealedSecretStatus(data)
   if (k === 'poddisruptionbudgets') return getPDBStatus(data)
   if (k === 'gitrepositories') return getGitRepositoryStatus(data)
@@ -1247,7 +1252,7 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   }
   // Group-guarded for the same reason as the renderers: these plurals are
   // generic enough that another operator can serve them.
-  if ((k === 'databases' || k === 'publications' || k === 'subscriptions') && isApiGroup(data.apiVersion, CNPG_GROUP)) {
+  if ((k === 'databases' || k === 'publications' || k === 'subscriptions' || k === 'databaseroles') && isApiGroup(data.apiVersion, CNPG_GROUP)) {
     return getCNPGDeclarativeStatus(data)
   }
   if (k === 'globalcontextentries') return getKyvernoGlobalContextStatus(data)

package/src/components/shared/index.ts

@@ -11,3 +11,5 @@ export { CreateResourceDialog, type CreateResourceDialogProps, type ApplyResult
 export { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from './ManagedByChip'
 export { DetailShell, type DetailShellProps, type DetailShellTab } from './DetailShell'
 export { classifyDiffLine, hasDiffBodyChange, DiffLine } from './UnifiedDiff'
+
+export { ActionConfirmDialog, type ActionConfirmDialogProps, type ActionConfirmResult, type ActionWrite } from './ActionConfirmDialog'

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

@@ -675,7 +675,7 @@ function calculateInterestingnessWithBreakdown(lane: ResourceLane): ScoreBreakdo
     // Core workloads
     Deployment: 50, Rollout: 50, StatefulSet: 50, DaemonSet: 50,
     Service: 45, Ingress: 45, Gateway: 45,
-    HTTPRoute: 42, GRPCRoute: 42, TCPRoute: 42, TLSRoute: 42,
+    HTTPRoute: 42, GRPCRoute: 42, TCPRoute: 42, TLSRoute: 42, UDPRoute: 42,
     Job: 40, CronJob: 40, Workflow: 40, CronWorkflow: 40,
     Pod: 30,
     HorizontalPodAutoscaler: 25,

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/timeline/timeline-filters.ts

@@ -172,6 +172,7 @@ export const TIMELINE_RESOURCE_KINDS = [
   'HTTPRoute',
   'GRPCRoute',
   'TCPRoute',
+  'UDPRoute',
   'TLSRoute',
   'ReplicaSet',
   'DaemonSet',

package/src/components/topology/K8sResourceNode.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { baseSubtitle } from './K8sResourceNode'
+import { baseSubtitle, knativeDomainsTooltipLines } from './K8sResourceNode'
 
 describe('baseSubtitle', () => {
   it('describes workflow templates without dropping newer topology kinds', () => {
@@ -18,6 +18,23 @@ describe('baseSubtitle', () => {
     })).toBe('ClusterIP :80 +2 more')
   })
 
+  it('describes a domain-mapped Knative Service by its custom domain', () => {
+    expect(baseSubtitle('KnativeService', { url: 'http://api.team.svc.cluster.local' })).toBe('api.team.svc.cluster.local')
+    expect(baseSubtitle('KnativeService', { url: 'http://api.team.svc.cluster.local', mappedDomains: ['api.example.com'] })).toBe('api.example.com')
+    expect(baseSubtitle('KnativeService', { mappedDomains: ['a.example.com', 'b.example.com'] })).toBe('a.example.com +1')
+  })
+
+  it('labels a mapped Knative Service URL by what it is', () => {
+    const text = (data: Record<string, unknown>) => knativeDomainsTooltipLines(data).map((l) => l.text)
+    // Private: the Service URL is the internal address, shown once.
+    expect(text({ mappedDomains: ['api.example.com'], url: 'http://api.team.svc.cluster.local', internalUrl: 'http://api.team.svc.cluster.local' }))
+      .toEqual(['api.example.com', 'Internal: http://api.team.svc.cluster.local'])
+    // Public: its own URL isn't internal.
+    expect(text({ mappedDomains: ['shop.example.com'], url: 'https://shop.team.example.org', internalUrl: 'http://shop.team.svc.cluster.local' }))
+      .toEqual(['shop.example.com', 'Service URL: https://shop.team.example.org', 'Internal: http://shop.team.svc.cluster.local'])
+    expect(text({ url: 'https://shop.team.example.org' })).toEqual([])
+  })
+
   it('describes a Calico staged deletion as a removal, not as selecting everything', () => {
     // A staged deletion carries no selector, because the Calico API forbids one.
     // Falling through to the empty-selector default would label the broadest