@skyhook-io/k8s-ui 1.16.3 → 1.17.1

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

@@ -1,13 +1,13 @@
+import { KnativeReferenceLink } from './KnativeReferenceLink'
 import { Network, ShieldCheck, Server, Globe } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
-import { kindToPlural } from '../../../utils/navigation'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }
 
 // ============================================================================
@@ -166,9 +166,8 @@ export function ServerlessServiceRenderer({ data, onNavigate }: RendererProps) {
           <Property label="Protocol" value={protocolType} />
           {objectRef && (
             <Property label="Target" value={
-              <ResourceLink
-                name={objectRef.name}
-                kind={kindToPlural(objectRef.kind || 'Deployment')}
+              <KnativeReferenceLink
+                reference={objectRef}
                 namespace={ns}
                 onNavigate={onNavigate}
               />
@@ -213,9 +212,8 @@ export function DomainMappingRenderer({ data, onNavigate }: RendererProps) {
           ) : undefined} />
           {ref && (
             <Property label="Target" value={
-              <ResourceLink
-                name={ref.name}
-                kind={kindToPlural(ref.kind || 'Service')}
+              <KnativeReferenceLink
+                reference={ref}
                 namespace={ns}
                 onNavigate={onNavigate}
               />

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

@@ -0,0 +1,14 @@
+import { ResourceLink } from '../../ui/drawer-components'
+import type { ResourceRef } from '../../../types/core'
+import { getKnativeReference } from '../resource-utils-knative'
+
+export function KnativeReferenceLink({ reference, namespace, onNavigate }: {
+  reference: any
+  namespace: string
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const resolved = getKnativeReference(reference, namespace)
+  return resolved
+    ? <ResourceLink {...resolved} onNavigate={onNavigate} />
+    : <span className="text-theme-text-primary">{reference?.name || '-'}</span>
+}

package/src/components/resources/renderers/KnativeReferenceLinks.test.tsx

@@ -0,0 +1,60 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { PingSourceRenderer } from './KnativeSourceRenderer'
+import { DomainMappingRenderer } from './KnativeNetworkingRenderer'
+import { initNavigationMap, resetNavigationMap } from '../../../utils/navigation'
+
+describe('Knative reference links', () => {
+  it('keep the sink reference API group instead of resolving to the core Kind', async () => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    initNavigationMap([
+      { group: '', version: 'v1', kind: 'Service', name: 'services', namespaced: true, isCrd: false, verbs: ['get'] },
+      { group: 'serving.knative.dev', version: 'v1', kind: 'Service', name: 'services', namespaced: true, isCrd: true, verbs: ['get'] },
+      { group: 'relationships.radar.test', version: 'v1', kind: 'Service', name: 'virtualservices', namespaced: true, isCrd: true, verbs: ['get'] },
+    ])
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const onNavigate = vi.fn()
+    const clickSink = async (sinkRef: Record<string, string>) => {
+      await act(async () => root.render(<PingSourceRenderer onNavigate={onNavigate} data={{
+        metadata: { namespace: 'team', name: 'ping' },
+        spec: { schedule: '* * * * *', sink: { ref: sinkRef } },
+      }} />))
+      const link = [...container.querySelectorAll('button')].find(button => button.textContent === sinkRef.name)
+      expect(link).toBeDefined()
+      await act(async () => link!.click())
+    }
+    try {
+      await clickSink({ apiVersion: 'serving.knative.dev/v1', kind: 'Service', name: 'knative-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', group: 'serving.knative.dev', namespace: 'team', name: 'knative-backend' }))
+      await clickSink({ group: 'serving.knative.dev', kind: 'Service', name: 'group-only-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', group: 'serving.knative.dev', name: 'group-only-backend' }))
+      await clickSink({ apiVersion: 'relationships.radar.test/v1', kind: 'Service', name: 'custom-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'virtualservices', group: 'relationships.radar.test', name: 'custom-backend' }))
+      await clickSink({ apiVersion: 'v1', kind: 'Service', name: 'core-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', name: 'core-backend' }))
+      expect(onNavigate.mock.lastCall?.[0].group ?? '').toBe('')
+
+      await act(async () => root.render(<PingSourceRenderer onNavigate={onNavigate} data={{
+        metadata: { namespace: 'team' }, spec: { sink: { ref: { kind: 'Service', name: 'unknown-group' } } },
+      }} />))
+      expect(container.textContent).toContain('unknown-group')
+      expect([...container.querySelectorAll('button')].some(button => button.textContent === 'unknown-group')).toBe(false)
+
+      await act(async () => root.render(<DomainMappingRenderer onNavigate={onNavigate} data={{
+        metadata: { namespace: 'team', name: 'example.com' },
+        spec: { ref: { apiVersion: 'serving.knative.dev/v1', kind: 'Service', name: 'mapped-backend' } },
+      }} />))
+      const target = [...container.querySelectorAll('button')].find(button => button.textContent === 'mapped-backend')
+      expect(target).toBeDefined()
+      await act(async () => target!.click())
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', group: 'serving.knative.dev', name: 'mapped-backend' }))
+    } finally {
+      await act(async () => root.unmount())
+      resetNavigationMap()
+      Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+    }
+  })
+})

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

@@ -1,12 +1,12 @@
+import { KnativeReferenceLink } from './KnativeReferenceLink'
 import { Clock, Server, Container, Link2 } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
-import { kindToPlural } from '../../../utils/navigation'
+import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner } from '../../ui/drawer-components'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }
 
 function SinkProperty({ sink, ns, onNavigate }: { sink: any; ns: string; onNavigate?: RendererProps['onNavigate'] }) {
@@ -15,10 +15,9 @@ function SinkProperty({ sink, ns, onNavigate }: { sink: any; ns: string; onNavig
   if (sink.ref) {
     return (
       <Property label="Sink" value={
-        <ResourceLink
-          name={sink.ref.name}
-          kind={kindToPlural(sink.ref.kind || 'Service')}
-          namespace={sink.ref.namespace || ns}
+        <KnativeReferenceLink
+          reference={sink.ref}
+          namespace={ns}
           onNavigate={onNavigate}
         />
       } />
@@ -194,10 +193,9 @@ export function SinkBindingRenderer({ data, onNavigate }: RendererProps) {
               <Property label="Subject API" value={subjectRef.apiVersion} />
               {subjectRef.name && (
                 <Property label="Subject" value={
-                  <ResourceLink
-                    name={subjectRef.name}
-                    kind={kindToPlural(subjectRef.kind || 'Deployment')}
-                    namespace={subjectRef.namespace || ns}
+                  <KnativeReferenceLink
+                    reference={subjectRef}
+                    namespace={ns}
                     onNavigate={onNavigate}
                   />
                 } />

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

@@ -1,8 +1,8 @@
 import { Layers, FolderTree, GitBranch } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts, ResourceLink } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import { GitOpsStatusBadge, ManagedResourcesList, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, parseFluxInventory, type FluxCondition } from '../../../types/gitops'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface KustomizationRendererProps {
   data: any
@@ -175,7 +175,7 @@ export function KustomizationRenderer({ data, onNavigate }: KustomizationRendere
             {status.lastHandledReconcileAt && (
               <Property
                 label="Last Reconciled"
-                value={formatAge(status.lastHandledReconcileAt)}
+                value={<TimeValue timestamp={status.lastHandledReconcileAt} />}
               />
             )}
           </PropertyList>

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

@@ -2,8 +2,9 @@ import { Globe, RefreshCw } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { HEALTH_BADGE_COLORS } from '../../../utils/badge-colors'
-import { formatAge, healthColors } from '../resource-utils'
+import { healthColors } from '../resource-utils'
 import type { StatusBadge } from '../resource-utils'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 type Nav = (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 
@@ -66,7 +67,7 @@ export function KyvernoGlobalContextRenderer({ data, onNavigate }: { data: any;
               </span>
             }
           />
-          {refresh.at && <Property label="Last Refreshed" value={`${formatAge(refresh.at)} ago`} />}
+          {refresh.at && <Property label="Last Refreshed" value={<TimeValue timestamp={refresh.at} />} />}
           {api?.refreshInterval && <Property label="Interval" value={api.refreshInterval} />}
           {api?.retryLimit != null && <Property label="Retry Limit" value={String(api.retryLimit)} />}
         </PropertyList>

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

@@ -3,7 +3,8 @@ import { clsx } from 'clsx'
 import { ListChecks, Workflow, Boxes, FileWarning } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { HEALTH_BADGE_COLORS, SEVERITY_BADGE } from '../../../utils/badge-colors'
-import { formatAge } from '../resource-utils'
+import { TimeValue } from '../../ui/ScheduleValue'
+import { formatRelativeAgeTime } from '../../../utils/format'
 import {
   getKyvernoRequestType,
   getKyvernoRequestTriggers,
@@ -155,7 +156,7 @@ export function KyvernoUpdateRequestRenderer({ data, onNavigate }: { data: any;
             }
           />
           {data?.metadata?.creationTimestamp && (
-            <Property label="Queued" value={`${formatAge(data.metadata.creationTimestamp)} ago`} />
+            <Property label="Queued" value={<TimeValue timestamp={data.metadata.creationTimestamp} />} />
           )}
         </PropertyList>
         {message && state.level !== 'unhealthy' && (
@@ -290,7 +291,7 @@ export function KyvernoEphemeralReportRenderer({ data, onNavigate }: { data: any
                     </span>
                   )}
                   {at && (
-                    <span className="ml-auto shrink-0 text-theme-text-tertiary">{formatAge(at)} ago</span>
+                    <span className="ml-auto shrink-0 text-theme-text-tertiary">{formatRelativeAgeTime(at)}</span>
                   )}
                 </div>
               )

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

@@ -1,24 +1,12 @@
 import { Timer } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 interface LeaseRendererProps {
   data: any
 }
 
-function formatRelativeTime(timestamp: string): string {
-  const diff = Date.now() - new Date(timestamp).getTime()
-  if (diff < 0) return 'just now'
-  const seconds = Math.floor(diff / 1000)
-  if (seconds < 60) return `${seconds}s ago`
-  const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  const days = Math.floor(hours / 24)
-  return `${days}d ago`
-}
-
 export function LeaseRenderer({ data }: LeaseRendererProps) {
   const spec = data.spec || {}
 
@@ -68,7 +56,7 @@ export function LeaseRenderer({ data }: LeaseRendererProps) {
             value={
               spec.acquireTime ? (
                 <span title={new Date(spec.acquireTime).toLocaleString()}>
-                  {formatRelativeTime(spec.acquireTime)}
+                  {formatRelativeAgeTime(spec.acquireTime)}
                 </span>
               ) : undefined
             }
@@ -81,7 +69,7 @@ export function LeaseRenderer({ data }: LeaseRendererProps) {
                   className={clsx(renewColor)}
                   title={new Date(renewTime).toLocaleString()}
                 >
-                  {formatRelativeTime(renewTime)}
+                  {formatRelativeAgeTime(renewTime)}
                 </span>
               ) : undefined
             }

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

@@ -11,7 +11,7 @@ import {
   isCrossplanePaused,
   getComposingXRRef,
 } from '../resource-utils-crossplane'
-import { kindToPlural } from '../../../utils/navigation'
+import { kindToPluralWithGroup } from '../../../utils/navigation'
 
 interface ManagedResourceRendererProps {
   data: any
@@ -82,7 +82,7 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
               value={
                 <ResourceLink
                   name={composingXR.name}
-                  kind={kindToPlural(composingXR.kind)}
+                  kind={kindToPluralWithGroup(composingXR.kind, extractApiGroup(composingXR.apiVersion))}
                   namespace={namespace}
                   group={extractApiGroup(composingXR.apiVersion) || undefined}
                   onNavigate={onNavigate}

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

@@ -2,16 +2,17 @@ import { Info } from 'lucide-react'
 import { Tooltip } from '../../ui/Tooltip'
 
 interface MetricsUnavailableNoticeProps {
+  noUsageYet?: boolean
   rawError?: string
   diagnosis?: string
 }
 
-export function MetricsUnavailableNotice({ rawError, diagnosis }: MetricsUnavailableNoticeProps) {
+export function MetricsUnavailableNotice({ rawError, diagnosis, noUsageYet }: MetricsUnavailableNoticeProps) {
   return (
     <div className="card-inner-lg text-xs text-theme-text-tertiary">
       <div className="flex items-center gap-1.5">
         <span className="min-w-0 leading-5">
-          Metrics unavailable. Radar cannot read metrics.k8s.io.
+          {noUsageYet ? 'No usage yet: this Pod is not running' : 'Metrics unavailable. Radar cannot read metrics.k8s.io.'}
         </span>
         {rawError && (
           <Tooltip

package/src/components/resources/renderers/NamespaceRenderer.test.ts

@@ -1,5 +1,7 @@
-import { describe, expect, it } from 'vitest'
-import { quotaUsageRatio } from './NamespaceRenderer'
+import { createElement } from 'react'
+import { renderToString } from 'react-dom/server'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { NamespaceRenderer, quotaUsageRatio } from './NamespaceRenderer'
 
 describe('quotaUsageRatio', () => {
   // status.used is computed with quantity arithmetic, so a used pod count of
@@ -28,3 +30,68 @@ describe('quotaUsageRatio', () => {
     expect(quotaUsageRatio('pods', '5', 'garbage')).toBeNull()
   })
 })
+
+describe('namespace deletion diagnostics', () => {
+  afterEach(() => vi.useRealTimers())
+
+  it('shows controller blockers, namespace finalizers and time since deletion began', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-10-10T12:00:00Z'))
+    const html = renderToString(createElement(NamespaceRenderer, { data: {
+      metadata: {
+        creationTimestamp: '2023-01-01T00:00:00Z',
+        deletionTimestamp: '2026-10-10T10:00:00Z',
+        finalizers: ['metadata.example.com/not-the-namespace-finalizer'],
+      },
+      spec: { finalizers: ['kubernetes'] },
+      status: { phase: 'Terminating', conditions: [
+        { type: 'NamespaceContentRemaining', status: 'True', reason: 'SomeResourcesRemain', message: 'Some resources are remaining: configmaps. has 1 resource instances' },
+        { type: 'NamespaceFinalizersRemaining', status: 'True', reason: 'SomeFinalizersRemain', message: 'Some content has finalizers remaining: example.com/hold in 1 resource instances' },
+        { type: 'NamespaceDeletionDiscoveryFailure', status: 'False', reason: 'ResourcesDiscovered', message: 'All resources successfully discovered' },
+      ] },
+    } }))
+    expect(html).toContain('Terminating for')
+    expect(html).toContain('>2h<')
+    expect(html).toContain('Namespace finalizers')
+    expect(html).toContain('kubernetes')
+    expect(html).not.toContain('metadata.example.com/not-the-namespace-finalizer')
+    expect(html).toContain('Conditions (3) · 2 failing')
+    expect(html).toContain('SomeResourcesRemain')
+    expect(html).toContain('configmaps. has 1 resource instances')
+    expect(html).toContain('example.com/hold in 1 resource instances')
+  })
+
+  it('omits deletion duration, finalizers and empty conditions for an active namespace', () => {
+    const html = renderToString(createElement(NamespaceRenderer, { data: {
+      metadata: { creationTimestamp: '2023-01-01T00:00:00Z' },
+      spec: { finalizers: ['kubernetes'] },
+      status: { phase: 'Active' },
+    } }))
+    expect(html).toContain('Active')
+    expect(html).not.toContain('Terminating for')
+    expect(html).not.toContain('Conditions (')
+    expect(html).not.toContain('Namespace finalizers')
+  })
+
+  it('does not substitute creation age when a terminating namespace lacks a deletion timestamp', () => {
+    const html = renderToString(createElement(NamespaceRenderer, { data: {
+      metadata: { creationTimestamp: '2023-01-01T00:00:00Z' },
+      status: { phase: 'Terminating', conditions: [] },
+    } }))
+    expect(html).toContain('Terminating')
+    expect(html).not.toContain('Terminating for')
+    expect(html).not.toContain('Conditions (')
+    expect(html).not.toContain('Namespace finalizers')
+  })
+
+  it('retains conditions with unknown status without calling them failures', () => {
+    const html = renderToString(createElement(NamespaceRenderer, { data: {
+      status: { phase: 'Active', conditions: [
+        { type: 'NamespaceDeletionDiscoveryFailure', status: 'Unknown', reason: 'DiscoveryPending', message: 'Waiting for discovery' },
+      ] },
+    } }))
+    expect(html).toContain('Conditions (1)')
+    expect(html).toContain('Waiting for discovery')
+    expect(html).not.toContain('failing')
+  })
+})

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

@@ -1,7 +1,8 @@
 import { Shield, Box, Users, Gauge } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ResourceLink, ConditionsSection } from '../../ui/drawer-components'
 import type { RBACNamespaceResponse, RBACBindingWithSubjects, RBACSubject, ResourceRef } from '../../../types'
+import { formatAge } from '../resource-utils'
 import { rbacKindBadgeClass } from '../../../utils/rbac-badges'
 import { RBACErrorSection } from './RBACErrorSection'
 import { NamespaceLimitRangesSection } from './LimitRangeRenderer'
@@ -70,12 +71,16 @@ export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, quot
               )}>{phase}</span>
             ) : undefined
           } />
+          {metadata.deletionTimestamp && <Property label="Terminating for" value={formatAge(metadata.deletionTimestamp)} />}
+          {metadata.deletionTimestamp && data.spec?.finalizers?.length > 0 && <Property label="Namespace finalizers" value={data.spec.finalizers.join(', ')} />}
           {istioInjection && <Property label="Istio injection" value={istioInjection} />}
           {linkerdInjection && <Property label="Linkerd injection" value={linkerdInjection} />}
           {managedBy && <Property label="Managed by" value={managedBy} />}
         </PropertyList>
       </Section>
 
+      <ConditionsSection conditions={status.conditions} defaultExpanded />
+
       {/* ResourceQuota usage — only when host wired the fetch. */}
       {(quotaError || (quotaData != null && quotaData.length > 0)) && (
         <NamespaceQuotaSection quotas={quotaData ?? []} error={quotaError ?? null} />

package/src/components/resources/renderers/NodeRenderer.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { renderToString } from 'react-dom/server'
+import { renderToString, renderToStaticMarkup } from 'react-dom/server'
 import { NodeRenderer } from './NodeRenderer'
 
 const node = {
@@ -101,3 +101,83 @@ describe('NodeRenderer metrics', () => {
     expect(html).toContain('CPU')
   })
 })
+
+describe('NodeRenderer removal advice', () => {
+  const removal = {
+    ...node,
+    spec: { unschedulable: true, taints: [{ key: 'ToBeDeletedByClusterAutoscaler', value: String(Math.floor(Date.now() / 1000) - 60), effect: 'NoSchedule' }] },
+    status: { ...node.status, conditions: [{ type: 'Ready', status: 'Unknown', lastTransitionTime: new Date(Date.now() - 1000).toISOString(), message: 'Kubelet stopped posting' }] },
+  }
+  it('does not give an autoscaler removal an error or uncordon advice', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={removal} />)
+    expect(html).toContain('Removing (cluster autoscaler)')
+    expect(html).not.toContain('Issues Detected')
+    expect(html).not.toContain('Uncordon')
+    expect(html).toContain('Pod and disruption-budget checks are not available')
+  })
+  it('does not assert who caused a bare cordon', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={{ ...node, spec: { unschedulable: true } }} />)
+    expect(html).toContain('Cordoned')
+    expect(html).toContain('who cordoned it is not recorded')
+    expect(html).not.toContain('Uncordon to resume')
+  })
+  it('keeps observed readiness False neutral when it follows the removal start', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={{ ...removal, status: { ...removal.status, conditions: [{ ...removal.status.conditions[0], status: 'False' }] } }} />)
+    expect(html).toContain('Removing (cluster autoscaler)')
+    expect(html).toContain('Kubelet stopped posting')
+    expect(html).not.toContain('1 failing')
+    expect(html).not.toContain('Issues Detected')
+  })
+  it('shows named possible PDB blockers and terminating pods without invented progress', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={removal} removalPlan={{
+      node: 'kind-worker', generatedAt: new Date().toISOString(), estimate: true,
+      options: { ignoreDaemonSets: true, deleteEmptyDirData: true, force: true },
+      summary: { evict: 1, skip: 0, mayBlock: 1 }, pdbsEvaluated: true,
+      pods: [
+        { namespace: 'shop', name: 'web', outcome: 'may-block', reason: 'PodDisruptionBudget shop/web allows no disruptions', pdb: 'shop/web', pdbChecked: true, emptyDir: false, terminating: false },
+        { namespace: 'shop', name: 'old', outcome: 'evict', reason: 'already terminating', pdbChecked: false, emptyDir: false, terminating: true },
+      ],
+    }} />)
+    expect(html).toContain('2 pods in the current snapshot')
+    expect(html).toContain('1 terminating')
+    expect(html).toContain('shop/web')
+    expect(html).toContain('may block removal')
+    expect(html).not.toContain('evicted')
+  })
+  it('uses warning tone for independent network failure during removal', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={{ ...removal, status: { conditions: [
+      ...removal.status.conditions,
+      { type: 'NetworkUnavailable', status: 'True', lastTransitionTime: new Date(Date.now() - 180_000).toISOString() },
+    ] } }} />)
+    expect(html).toContain('Removing (cluster autoscaler) · Network unavailable')
+    expect(html).toContain('bg-amber-50')
+    expect(html).not.toContain('rounded-lg bg-red-50')
+    expect(html).not.toContain('rounded-lg bg-sky-50')
+  })
+  it('describes skip outcomes as drain estimates', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={removal} removalPlan={{
+      node: 'kind-worker', generatedAt: new Date().toISOString(), estimate: true,
+      options: { ignoreDaemonSets: true, deleteEmptyDirData: true, force: true },
+      summary: { evict: 0, skip: 1, mayBlock: 0 }, pdbsEvaluated: true,
+      pods: [{ namespace: 'shop', name: 'daemon', outcome: 'skip', reason: 'DaemonSet', pdbChecked: false, emptyDir: false, terminating: false }],
+    }} />)
+    expect(html).toContain('Skipped by drain estimate')
+    expect(html).toContain('1 skipped by drain estimate')
+    expect(html).not.toContain('Retained')
+  })
+  it('reports unavailable drain evidence as unavailable', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={removal} removalPlanError="forbidden: cannot list pods" />)
+    expect(html).toContain('Drain details unavailable')
+    expect(html).toContain('forbidden: cannot list pods')
+    expect(html).not.toContain('0 pods')
+  })
+  it('does not present a cached snapshot as current after a refresh fails', () => {
+    const html = renderToStaticMarkup(<NodeRenderer data={removal} removalPlanError="forbidden: cannot list pods" removalPlan={{
+      node: 'kind-worker', generatedAt: new Date().toISOString(), estimate: true,
+      options: { ignoreDaemonSets: true, deleteEmptyDirData: true, force: true },
+      summary: { evict: 0, skip: 0, mayBlock: 0 }, pdbsEvaluated: true, pods: [],
+    }} />)
+    expect(html).toContain('Drain details unavailable')
+    expect(html).not.toContain('0 pods in the current snapshot')
+  })
+})