@skyhook-io/k8s-ui 1.18.1 → 1.19.0

package/src/components/shared/ManagedByChip.tsx

@@ -1,6 +1,11 @@
+import { useEffect, useRef, useState } from 'react'
 import { GitBranch, Package } from 'lucide-react'
 import { clsx } from 'clsx'
-import type { GitOpsOwnerRef, ManagerListing } from '../../utils/gitops-owner'
+import { activeManagerClaims, gitOpsOwnerFromRef, managerCandidates, managerChipPresentation, managerChoices, managerRefLabel, type GitOpsOwnerRef, type ManagerChoice, type ManagerListing } from '../../utils/gitops-owner'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
+import type { ManagerAnswer, ResourceRef } from '../../types/core'
+import { resourceRefKey } from '../../utils/resource-refs'
 import type { GitOpsStatus } from '../../types/gitops'
 import { StatusDot, type StatusTone } from '../ui/status-tone'
 import { Tooltip } from '../ui/Tooltip'
@@ -24,6 +29,7 @@ export type HelmOwnerRef = {
 //   - block: starts a new line with mt-1 spacing, used in WorkloadView title strip
 export function ManagedByChip({
   owner,
+  manager,
   status,
   onOpen,
   verified = true,
@@ -32,7 +38,8 @@ export function ManagedByChip({
   listing,
   variant = 'inline',
 }: {
-  owner: GitOpsOwnerRef
+  owner?: GitOpsOwnerRef | null
+  manager?: ManagerAnswer
   status?: GitOpsStatus | null
   onOpen?: (ref: GitOpsOwnerRef) => void
   verified?: boolean
@@ -41,6 +48,8 @@ export function ManagedByChip({
   listing?: ManagerListing
   variant?: 'inline' | 'block'
 }) {
+  if (manager) return <ManagerAnswerChip manager={manager} status={status} onOpen={onOpen} variant={variant} />
+  if (!owner) return null
   const toolLabel = owner.tool === 'argocd' ? 'ArgoCD' : 'FluxCD'
   const ownerKindLabel = gitOpsOwnerKindLabel(owner)
   const label = owner.namespace ? `${owner.namespace}/${owner.name}` : owner.name
@@ -116,13 +125,136 @@ export function ManagedByChip({
   )
 }
 
+function ManagerAnswerChip({ manager, status, onOpen, variant }: {
+  manager: ManagerAnswer
+  status?: GitOpsStatus | null
+  onOpen?: (ref: GitOpsOwnerRef) => void
+  variant: 'inline' | 'block'
+}) {
+  const [open, setOpen] = useState(false)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('menu'))
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    // Consumed, so the Escape that closes the menu doesn't also close the drawer.
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      e.preventDefault()
+      e.stopPropagation()
+      setOpen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey, true)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey, true)
+    }
+  }, [open])
+
+  const presentation = managerChipPresentation(manager)
+  if (!presentation) return null
+  // Several candidates open a menu naming each, so none is reached only
+  // through the one shown first; one opens directly.
+  // Every candidate is named; only one Radar found links. A label that names
+  // no namespace stays unlinked: Radar doesn't guess it.
+  const choices = managerChoices(manager).map(c => {
+    const owner = gitOpsOwnerFromRef(c.ref)
+    return { ...c, owner: c.found && owner?.namespace ? owner : null }
+  })
+  // A label naming no namespace is unresolved only when its own check says
+  // so; otherwise Applications of that name list the object and it doesn't
+  // say which.
+  const evidence = manager.via ?? manager.direct
+  const unresolved = (ref: ResourceRef) => activeManagerClaims(evidence).some(c => c.check === 'unresolved' && resourceRefKey(c.manager) === resourceRefKey(ref))
+  const several = managerCandidates(manager).length > 1
+  const lead = manager.lead ? gitOpsOwnerFromRef(manager.lead) : null
+  const direct = !several ? choices.find(c => c.owner && lead && c.owner.name === lead.name && c.owner.namespace === lead.namespace)?.owner ?? null : null
+  const menu = Boolean(onOpen) && several && choices.some(c => c.owner)
+  // The manager's own status, shown only when it is confirmed to manage this
+  // resource: beside a list alone, Synced reads as this resource's state.
+  const statusLabel = lead && status && !several && manager.state === 'agree' ? gitOpsStatusLabel(status) : null
+  const chipClass = clsx(
+    'inline-flex min-w-0 items-center gap-1 rounded border border-theme-border bg-theme-elevated px-1.5 py-0.5 text-[11px] text-theme-text-secondary',
+    (menu || direct && onOpen) && 'hover:border-accent hover:text-accent transition-colors',
+  )
+  const content = (
+    <>
+      <GitBranch className="h-3 w-3 shrink-0" />
+      {presentation.warning && <StatusDot tone="degraded" size="xs" />}
+      <span className="shrink-0 text-theme-text-tertiary">{presentation.prefix}</span>
+      <span className="truncate max-w-[180px]">{presentation.label}</span>
+      {presentation.via && <span className="shrink-0 text-theme-text-tertiary">via {presentation.via}</span>}
+      {statusLabel && <><span className="mx-0.5 text-theme-text-disabled">·</span><StatusDot tone={gitOpsStatusTone(status!)} size="xs" /><span>{statusLabel}</span></>}
+    </>
+  )
+  const tooltip = `${presentation.tooltip}${statusLabel ? ` ${statusLabel}${status?.message ? `: ${status.message}` : ''}.` : ''}`
+  const chip = menu ? (
+    <button type="button" aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen(v => !v)} className={chipClass}>{content}</button>
+  ) : direct && onOpen ? (
+    <button type="button" onClick={() => onOpen(direct)} className={chipClass}>{content}</button>
+  ) : (
+    // Focusable, so keyboard users reach the tooltip that explains it.
+    <span tabIndex={0} className={chipClass}>{content}</span>
+  )
+  return (
+    <div ref={ref} className={clsx('relative inline-flex min-w-0', variant === 'block' && 'mt-1')}>
+      <Tooltip content={tooltip} delay={500} position="bottom">{chip}</Tooltip>
+      {menu && shouldRender && (
+        <div
+          role="menu"
+          inert={!open}
+          className={clsx(
+            'absolute left-0 top-full z-50 mt-1 min-w-[220px] origin-top-left rounded-lg border border-theme-border bg-theme-surface py-1 shadow-theme-lg',
+            TRANSITION_MENU,
+            isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
+            !open && 'pointer-events-none',
+          )}
+          style={overlayTransitionStyle(isOpen, 'menu')}
+        >
+          {choices.map(c => (
+            <button
+              key={`${c.ref.group}/${c.ref.kind}/${c.ref.namespace}/${c.ref.name}`}
+              type="button"
+              role="menuitem"
+              disabled={!c.owner}
+              onClick={() => {
+                if (!c.owner) return
+                setOpen(false)
+                onOpen?.(c.owner)
+              }}
+              className={clsx(
+                'flex w-full flex-col items-start px-3 py-1.5 text-left text-xs transition-colors',
+                c.owner ? 'text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary' : 'cursor-default text-theme-text-tertiary',
+              )}
+            >
+              <span className="truncate">{managerRefLabel(c.ref)}</span>
+              <span className="text-[11px] text-theme-text-tertiary">{choiceRole(c)}{c.owner ? '' : !c.ref.namespace ? unresolved(c.ref) ? ` · Radar found no ${c.ref.kind} of this name listing it; it may be managed from another cluster` : ` · its label doesn't say which ${c.ref.kind} of this name` : !c.found ? ' · Radar found no such manager you can view' : ''}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function choiceRole(c: Pick<ManagerChoice, 'listed' | 'claimed' | 'found'>): string {
+  if (c.listed && c.claimed) return 'Its status lists this, and the metadata names it'
+  if (c.listed) return 'Its status lists this'
+  return 'This metadata names it'
+}
+
 export function HelmManagedByChip({
   owner,
+  manager,
   onOpen,
   source,
   variant = 'inline',
 }: {
   owner: HelmOwnerRef
+  manager?: ManagerAnswer
   onOpen?: (ref: HelmOwnerRef) => void
   source?: string | null
   variant?: 'inline' | 'block'
@@ -133,6 +265,7 @@ export function HelmManagedByChip({
       <span>
         Managed by Helm release <TooltipCode>{label}</TooltipCode>.
       </span>
+      {manager && <span>{managerChipPresentation(manager)?.tooltip}</span>}
       {source && (
         <span>
           Inferred from <TooltipCode>{source}</TooltipCode>.

package/src/components/shared/ResourceActionsBar.tsx

@@ -1,4 +1,5 @@
 import { getNodeLifecycle } from '../../utils/node-lifecycle'
+import { resourceRefKey } from '../../utils/resource-refs'
 import { useEffect, useState, useRef, useId } from 'react'
 import {
   RefreshCw,
@@ -21,7 +22,7 @@ import { createTwoFilesPatch } from 'diff'
 import { clsx } from 'clsx'
 import { classifyDiffLine } from './UnifiedDiff'
 import { Tooltip } from '../ui/Tooltip'
-import { ForceDeleteConfirmDialog, type CascadeDependent } from '../ui/ForceDeleteConfirmDialog'
+import { ForceDeleteConfirmDialog, type CascadeDependent, type CascadeDetail } from '../ui/ForceDeleteConfirmDialog'
 import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { AlertBanner } from '../ui/drawer-components'
 import { DialogPortal } from '../ui/DialogPortal'
@@ -85,6 +86,8 @@ interface ResourceActionsBarProps {
   isDeleting?: boolean
   cascadeDependents?: CascadeDependent[]
   cascadeLoading?: boolean
+  onDeletePreviewOpenChange?: (open: boolean) => void
+  cascadeDetail?: CascadeDetail
   cascadeRootResolved?: boolean
   cascadePreviewFailed?: boolean
 
@@ -168,7 +171,7 @@ export function ResourceActionsBar({
   canExec, canViewLogs, canPortForward,
   onOpenTerminal, onOpenLogs: openLogs, onOpenWorkloadLogs: openWorkloadLogs, onCopyCommand,
   renderPortForward,
-  onDelete, isDeleting, cascadeDependents, cascadeLoading, cascadeRootResolved, cascadePreviewFailed,
+  onDelete, isDeleting, onDeletePreviewOpenChange, cascadeDetail, cascadeDependents, cascadeLoading, cascadeRootResolved, cascadePreviewFailed,
   onRestart, isRestarting,
   onLoadImages, onSetImages, isSettingImages, imageOwnership,
   revisions: revisionsList, revisionsLoading, revisionsError, onRollback, isRollingBack,
@@ -205,6 +208,14 @@ export function ResourceActionsBar({
 
   // Delete confirmation state
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const deleteMounted = useRef(true)
+  useEffect(() => {
+    deleteMounted.current = true
+    return () => { deleteMounted.current = false }
+  }, [])
+  const currentDeleteTarget = useRef({ key: resourceRefKey(resource), uid: data?.metadata?.uid })
+  currentDeleteTarget.current = { key: resourceRefKey(resource), uid: data?.metadata?.uid }
+  useEffect(() => { onDeletePreviewOpenChange?.(showDeleteConfirm) }, [showDeleteConfirm, onDeletePreviewOpenChange])
 
   // Node operation confirmation state
   const [showCordonConfirm, setShowCordonConfirm] = useState(false)
@@ -240,12 +251,13 @@ export function ResourceActionsBar({
   const hasMultipleRevisions = (revisionsList?.length ?? 0) > 1
 
   function handleDeleteConfirm(force: boolean) {
+    const target = currentDeleteTarget.current
+    setShowDeleteConfirm(false)
     onDelete?.(
       { kind: resource.kind, group: resource.group, namespace: resource.namespace, name: resource.name, force },
       {
         onSuccess: () => {
-          setShowDeleteConfirm(false)
-          onClose?.()
+          if (deleteMounted.current && currentDeleteTarget.current.key === target.key && currentDeleteTarget.current.uid === target.uid) onClose?.()
         },
       }
     )
@@ -673,12 +685,14 @@ export function ResourceActionsBar({
       )}
 
       {onDelete && !((kind === 'node' || kind === 'nodes') && data?.metadata?.deletionTimestamp) && (
-        <Tooltip content="Delete resource">
+        <Tooltip content={isDeleting ? 'Deleting resource' : 'Delete resource'}>
           <button
+            aria-label={isDeleting ? 'Deleting resource' : 'Delete resource'}
+            disabled={isDeleting}
             onClick={() => setShowDeleteConfirm(true)}
             className="p-1.5 text-theme-text-secondary border border-theme-border-light rounded-lg hover:text-red-400 hover:border-red-400/50 hover:bg-red-500/10 transition-colors"
           >
-            <Trash2 className="w-3.5 h-3.5" />
+            {isDeleting ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Trash2 className="w-3.5 h-3.5" />}
           </button>
         </Tooltip>
       )}
@@ -690,9 +704,11 @@ export function ResourceActionsBar({
         onClose={() => setShowDeleteConfirm(false)}
         onConfirm={handleDeleteConfirm}
         resourceName={resource.name}
+        resourceData={data}
         resourceKind={displayKindName(resource.kind, data?.kind)}
         namespaceName={resource.namespace}
         isLoading={isDeleting ?? false}
+        cascadeDetail={cascadeDetail}
         cascadeDependents={cascadeDependents}
         cascadeLoading={cascadeLoading}
         cascadeRootResolved={cascadeRootResolved}

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -1,3 +1,7 @@
+import { getOpenTelemetryCollectorStatus, getOpenTelemetryInstrumentationStatus } from '../resources/resource-utils-opentelemetry'
+import { OpenTelemetryCollectorRenderer, OpenTelemetryInstrumentationRenderer } from '../resources/renderers/OpenTelemetryRenderers'
+import { FlaggerCanaryRenderer, FlaggerMetricTemplateRenderer } from '../resources/renderers/FlaggerRenderers'
+import { getFlaggerCanaryStatus } from '../resources/resource-utils-flagger'
 import { getGitOpsTool } from '../gitops/detail-helpers'
 import { apiVersionToGroup } from '../../utils/navigation'
 import { hasReflectorDetails } from '../resources/renderers/ReflectorSection'
@@ -295,6 +299,7 @@ import {
 import type { ComposedRefStatus } from '../resources/renderers/CompositeRenderer'
 import {
   getCrossplaneStatus,
+  getCrossplanePauseState,
   getProviderStatus,
   getProviderConfigStatus,
   isManagedResource,
@@ -450,6 +455,8 @@ export interface RendererOverrides {
 
 // Known resource types with specific renderers (module-level to avoid re-allocation)
 const KNOWN_KINDS = new Set([
+  'opentelemetrycollectors', 'instrumentations',
+  'canaries', 'metrictemplates',
   'pods', 'deployments', 'statefulsets', 'daemonsets', 'replicasets',
   'services', 'endpointslices', 'ingresses', 'configmaps', 'secrets', 'jobs', 'cronjobs', 'cronworkflows',
   'jobsets',
@@ -709,6 +716,8 @@ export function ResourceRendererDispatch({
   const isFluxKind = ['gitrepositories', 'ocirepositories', 'helmrepositories', 'kustomizations', 'helmreleases', 'alerts'].includes(kind)
   const isFluxResource = getGitOpsTool(kind, apiVersionToGroup(data?.apiVersion)) === 'flux'
   const isGroupGatedKind =
+    ['opentelemetrycollectors', 'instrumentations'].includes(kind) ||
+    ['canaries', 'metrictemplates'].includes(kind) ||
     isFluxKind || kind === 'applications' || kind === 'services' || kind === 'ingresses' || kind === 'certificates' || kind === 'gateways'
     || kind === 'clusters' || kind === 'backups' || kind === 'scheduledbackups' || kind === 'poolers'
     || kind === 'objectstores' || kind === 'databases' || kind === 'publications'
@@ -718,6 +727,8 @@ export function ResourceRendererDispatch({
     || kind === 'machines' || kind === 'machinesets' || kind === 'workloads' || kind === 'localqueues' || kind === 'clusterqueues'
   const isCNPGApiVersion = isApiGroup(data?.apiVersion, CNPG_GROUP)
   const groupGatedMatched =
+    (['opentelemetrycollectors', 'instrumentations'].includes(kind) && isApiGroup(data?.apiVersion, 'opentelemetry.io')) ||
+    (['canaries', 'metrictemplates'].includes(kind) && isApiGroup(data?.apiVersion, 'flagger.app')) ||
     (isFluxKind && isFluxResource)
     || (kind === 'applications' && isApiGroup(data?.apiVersion, 'argoproj.io'))
     || (kind === 'services' && (data?.apiVersion === 'v1' || isApiGroup(data?.apiVersion, 'serving.knative.dev')))
@@ -1052,6 +1063,11 @@ export function ResourceRendererDispatch({
         {isCrossplaneMR && <ManagedResourceRenderer data={data} onNavigate={onNavigate} />}
         {(isCrossplaneXR || isCrossplaneClaim) && <CompositeComp data={data} onNavigate={onNavigate} />}
 
+        {kind === 'opentelemetrycollectors' && isApiGroup(data?.apiVersion, 'opentelemetry.io') && <OpenTelemetryCollectorRenderer data={data} />}
+        {kind === 'instrumentations' && isApiGroup(data?.apiVersion, 'opentelemetry.io') && <OpenTelemetryInstrumentationRenderer data={data} />}
+        {kind === 'canaries' && isApiGroup(data?.apiVersion, 'flagger.app') && <FlaggerCanaryRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'metrictemplates' && isApiGroup(data?.apiVersion, 'flagger.app') && <FlaggerMetricTemplateRenderer data={data} onNavigate={onNavigate} />}
+
         {/* Generic renderer for CRDs and unknown resource types — also fires
             for known-plural collisions where no apiVersion-gated renderer
             matched (e.g. a Knative Configuration sharing the `configurations`
@@ -1109,6 +1125,11 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (!data) return null
   const k = kind.toLowerCase()
 
+  if (isApiGroup(data.apiVersion, 'opentelemetry.io')) {
+    if (k === 'opentelemetrycollectors') return getOpenTelemetryCollectorStatus(data)
+    if (k === 'instrumentations') return getOpenTelemetryInstrumentationStatus(data)
+  }
+  if (k === 'canaries' && isApiGroup(data.apiVersion, 'flagger.app')) return getFlaggerCanaryStatus(data)
   if (k === 'pods') return getPodStatus(data)
   if (['deployments', 'statefulsets', 'daemonsets', 'rollouts'].includes(k)) {
     return getWorkloadDisplayStatus(data, k).status
@@ -1370,6 +1391,8 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
     return { text: status.text, color: status.color }
   }
 
+  if (getCrossplanePauseState(data) === 'acknowledged') return getCrossplaneStatus(data)
+
   const derived = getGenericResourceStatus(data)
   if (derived) return { text: derived.text, color: HEALTH_BADGE_COLORS[derived.tone] }
 

package/src/components/shared/SetImageDialog.tsx

@@ -17,6 +17,7 @@ import {
   type GitOpsWriteGuard,
 } from '../../utils/gitops-write-guard'
 import { GitOpsWriteWarning } from './GitOpsWriteWarning'
+import type { GitOpsOwnerRef } from '../../utils/gitops-owner'
 
 /** The GitOps write guard for the object whose Pod template the dialog
  *  writes, evaluated by the host: for {@link SET_IMAGE_WRITES} until the
@@ -25,6 +26,7 @@ import { GitOpsWriteWarning } from './GitOpsWriteWarning'
 export interface SetImageOwnership {
   guard: GitOpsWriteGuard
   onOpenOwner?: () => void
+  onOpenManager?: (owner: GitOpsOwnerRef) => void
   /** The containers the dialog lists and the ones being changed, so the
    *  guard can judge exactly those (null until the containers load). */
   onSelectionChange?: (selection: SetImageSelection | null) => void
@@ -435,6 +437,7 @@ export function SetImageDialog({
                 acknowledged={acknowledged}
                 onAcknowledgedChange={(value) => setAckedKey(value ? guardKey : '')}
                 onOpenOwner={ownership?.onOpenOwner}
+                onOpenManager={ownership?.onOpenManager}
                 disabled={busy}
               />
             )}

package/src/components/topology/TopologyControls.tsx

@@ -90,7 +90,7 @@ export function TopologyControls({
   return (
     // Layout-neutral (positioned by the host's overlay bar): `relative` anchors
     // its own dropdowns; `pointer-events-auto` inside the pointer-events-none bar.
-    <div className="relative flex items-center gap-2 pointer-events-auto">
+    <div className="relative flex items-center gap-2 pointer-events-auto phone:flex-wrap phone:gap-1.5">
       {/* Freshness/liveness status — backed for legibility over the canvas but
           borderless + divided off, so it reads as a status, not another control. */}
       {leadingSlot && (

package/src/components/ui/CrossplaneOperationNotice.test.tsx

@@ -0,0 +1,153 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { stringify } from 'yaml'
+import { CrossplaneApplyNotice, CrossplaneDeleteNotice, CrossplaneYamlApplyNotice } from './CrossplaneOperationNotice'
+
+const mr = {
+  apiVersion: 's3.example.test/v1', kind: 'Bucket',
+  metadata: { name: 'archive', annotations: { 'crossplane.io/paused': 'true' }, finalizers: ['finalizer.managedresource.crossplane.io'] },
+  spec: { providerConfigRef: { name: 'default' } },
+}
+const xr = { ...mr, kind: 'Composite', spec: { resourceRefs: [] }, metadata: { ...mr.metadata, finalizers: ['composite.apiextensions.crossplane.io'] } }
+const claim = { ...mr, kind: 'Claim', spec: { resourceRef: { name: 'xr' }, compositionRef: { name: 'composition' } }, metadata: { ...mr.metadata, finalizers: ['finalizer.apiextensions.crossplane.io'] } }
+const html = (element: React.ReactNode) => renderToStaticMarkup(element)
+
+describe('Crossplane operation context', () => {
+  it.each([mr, xr, claim])('identifies its own paused deletion cleanup for $kind', data => {
+    const result = html(<CrossplaneDeleteNotice resources={[data]} />)
+    expect(result).toContain('This resource holds a Crossplane finalizer')
+    expect(result).toContain('Kubernetes can accept the deletion request')
+    expect(result).toContain('defer finalizer cleanup')
+    expect(result).not.toContain('stuck in Terminating')
+    expect(result).toContain('requests resumption')
+    expect(result).not.toContain('will delete external')
+  })
+  it('distinguishes an already requested deletion', () => {
+    const result = html(<CrossplaneDeleteNotice resources={[{ ...mr, metadata: { ...mr.metadata, deletionTimestamp: '2026-10-26T00:00:00Z' } }]} />)
+    expect(result).toContain('Deletion requested while reconciliation is paused')
+    expect(result).toContain('Deletion has already been requested')
+    expect(result).not.toContain('Kubernetes can accept')
+  })
+  it('avoids claiming pause alone blocks deletion without a known finalizer', () => {
+    const result = html(<CrossplaneDeleteNotice resources={[{ ...mr, metadata: { ...mr.metadata, finalizers: ['other.example.test/cleanup'] } }]} />)
+    expect(result).toContain('pause annotation alone does not block Kubernetes deletion')
+    expect(result).not.toContain('cannot complete its finalizer cleanup')
+  })
+  it('explains the existing explicit force choice without promising a cascade', () => {
+    const result = html(<CrossplaneDeleteNotice resources={[mr]} force />)
+    expect(result).toContain('Force delete strips finalizers')
+    expect(result).toContain('can leave external or related resources behind')
+    expect(result).toContain('does not resume reconciliation')
+    expect(result).toContain('This resource has finalizers')
+    expect(result).not.toContain('These resources have finalizers')
+  })
+  it('names only the paused finalizer holders in a mixed blocker warning', () => {
+    const bare = { ...mr, metadata: { ...mr.metadata, name: 'bare', finalizers: [] } }
+    const active = { ...mr, metadata: { ...mr.metadata, name: 'active', annotations: {} } }
+    const result = html(<CrossplaneDeleteNotice resources={[mr, bare, active]} />)
+    expect(result).toContain('Of 3 selected resources, 1 has pause requested and holds')
+    expect(result).toContain('Bucket archive')
+    expect(result).not.toContain('Bucket bare')
+    expect(result).not.toContain('Bucket active')
+    const mixedForce = html(<CrossplaneDeleteNotice resources={[mr, bare, active]} force />)
+    expect(mixedForce).toContain('Of 3 selected resources, 1 has pause requested and finalizers')
+    const forced = html(<CrossplaneDeleteNotice resources={[bare]} force />)
+    expect(forced).toContain('Bucket bare')
+    expect(forced).not.toContain('0 of 1')
+    expect(forced).not.toContain('Force delete bypasses')
+    expect(forced).toContain('pause annotation alone does not block')
+  })
+  it('counts a mixed selection and caps names', () => {
+    const resources = Array.from({ length: 7 }, (_, i) => ({ ...mr, metadata: { ...mr.metadata, name: `paused-${i}` } }))
+    const active = { ...mr, metadata: { ...mr.metadata, name: 'active', annotations: {} } }
+    const result = html(<CrossplaneDeleteNotice resources={[...resources, active]} />)
+    expect(result).toContain('Of 8 selected resources, 7 have pause requested and hold')
+    expect(result).toContain('and 2 more')
+    expect(result).not.toContain('paused-6')
+    expect(result).not.toContain('Bucket active')
+  })
+  it.each([undefined, { metadata: mr.metadata }, { ...mr, metadata: { annotations: { 'crossplane.io/paused': 'false' } } }, { ...mr, metadata: { annotations: { 'crossplane.io/paused': true } } }])('omits context for unrelated or unannotated input %#', data => {
+    expect(html(<CrossplaneDeleteNotice resources={[data]} />)).toBe('')
+    expect(html(<CrossplaneApplyNotice resources={[data]} />)).toBe('')
+  })
+  it('retains own-controller context while independent failures exist', () => {
+    const data = { ...mr, status: { conditions: [{ type: 'Ready', status: 'False', reason: 'Unavailable' }] } }
+    expect(html(<CrossplaneApplyNotice resources={[data]} />)).toContain('Other resources&#x27; controllers may continue independently')
+    expect(data.status.conditions[0].reason).toBe('Unavailable')
+  })
+  it('uses conditional wording when an apply draft omits a pause owned by another manager', () => {
+    const after = { ...mr, metadata: { ...mr.metadata, annotations: {} } }
+    const result = html(<CrossplaneYamlApplyNotice yaml={stringify(after)} baselineYaml={stringify(mr)} />)
+    expect(result).toContain('Kubernetes can accept edits')
+    expect(result).toContain('requests resumption')
+    expect(result).toContain('Omitting the annotation from server-side apply YAML does not guarantee its removal')
+    expect(result).not.toContain('will resume')
+  })
+  it('detects pause added by the submitted or predicted manifest', () => {
+    expect(html(<CrossplaneYamlApplyNotice yaml={stringify(mr)} />)).toContain('Pause affects reconciliation')
+  })
+  it('names unknown live pause state only for apply without a baseline', () => {
+    const unpausedDraft = { ...mr, metadata: { ...mr.metadata, annotations: {} } }
+    const yaml = stringify(unpausedDraft)
+    const result = html(<CrossplaneYamlApplyNotice yaml={yaml} baselineUnavailable />)
+    expect(result).toContain('Existing pause state is unknown')
+    expect(result).toContain('Omitting the annotation from server-side apply YAML does not guarantee its removal')
+    expect(result).not.toContain('Pause affects reconciliation')
+    expect(html(<CrossplaneYamlApplyNotice yaml={yaml} />)).toBe('')
+    expect(html(<CrossplaneYamlApplyNotice yaml="kind: ConfigMap" baselineUnavailable />)).toBe('')
+  })
+  it('retains explicit submitted pause context alongside unknown live state', () => {
+    const result = html(<CrossplaneYamlApplyNotice yaml={stringify(mr)} baselineUnavailable />)
+    expect(result).toContain('Pause affects reconciliation')
+    expect(result).toContain('Live pause state is unverified')
+    expect(result).toContain('requests resumption')
+  })
+  it('recognizes acknowledged ref-less objects without broadening annotation-only detection', () => {
+    const raw = { ...mr, kind: 'Claim', spec: {}, status: { conditions: [{ type: 'Synced', status: 'False', reason: 'ReconcilePaused' }] } }
+    expect(html(<CrossplaneDeleteNotice resources={[raw]} />)).toContain('This resource holds a Crossplane finalizer')
+    const { status: _status, ...clean } = raw
+    expect(html(<CrossplaneYamlApplyNotice yaml={stringify(clean)} baselineUnavailable />)).toBe('')
+    expect(html(<CrossplaneApplyNotice resources={[{ ...raw, metadata: { ...raw.metadata, annotations: {} } }]} />)).toBe('')
+  })
+  it('binds raw acknowledgement to identity across versions without borrowing it for another API group', () => {
+    const raw = { ...mr, kind: 'Claim', spec: {}, status: { conditions: [{ type: 'Synced', status: 'False', reason: 'ReconcilePaused' }] } }
+    const check = (apiVersion: string | number) => {
+      const yaml = stringify({ ...raw, apiVersion, status: undefined })
+      return html(<CrossplaneYamlApplyNotice yaml={yaml} baselineYaml={yaml} resourceData={raw} previewDocuments={[{ index: 0, status: 'accepted', baselineYaml: yaml, predictedYaml: yaml }]} />)
+    }
+    expect(check('another.example.test/v1')).toBe('')
+    expect(check('s3.example.test/v2')).toContain('Server preview keeps the pause request')
+    expect(() => check(42)).not.toThrow()
+  })
+  it('does not borrow old raw acknowledgement through an old baseline when the effective target changes group', () => {
+    const raw = { ...mr, kind: 'Claim', spec: {}, status: { conditions: [{ type: 'Synced', status: 'False', reason: 'ReconcilePaused' }] } }
+    const baselineYaml = stringify({ ...raw, status: undefined })
+    const predictedYaml = stringify({ ...raw, apiVersion: 'another.example.test/v1', status: undefined })
+    const result = html(<CrossplaneYamlApplyNotice yaml={predictedYaml} baselineYaml={baselineYaml} resourceData={raw} previewDocuments={[{ index: 0, status: 'accepted', action: 'update', baselineYaml, predictedYaml }]} />)
+    expect(result).toBe('')
+  })
+  it.each(['direct', 'unavailable'] as const)('does not borrow a paused shape from another group through the original baseline in %s review', mode => {
+    const baselineYaml = stringify(mr)
+    const submittedYaml = stringify({ apiVersion: 'another.example.test/v1', kind: mr.kind, metadata: { name: mr.metadata.name }, spec: {} })
+    const result = html(<CrossplaneYamlApplyNotice yaml={submittedYaml} baselineYaml={baselineYaml} resourceData={mr} previewDocuments={mode === 'unavailable' ? [{ index: 0, status: 'unavailable', action: 'unknown', submittedYaml }] : undefined} />)
+    expect(result).toBe('')
+  })
+  it('retains same-target pause clearing across served versions when the submitted shape changes', () => {
+    const baselineYaml = stringify(mr)
+    const predictedYaml = stringify({ ...mr, apiVersion: 's3.example.test/v2', metadata: { ...mr.metadata, annotations: { 'crossplane.io/paused': 'false' } }, spec: {} })
+    const result = html(<CrossplaneYamlApplyNotice yaml={predictedYaml} baselineYaml={baselineYaml} previewDocuments={[{ index: 0, status: 'accepted', action: 'update', baselineYaml, predictedYaml }]} />)
+    expect(result).toContain('Server preview clears the pause request on Bucket archive')
+    expect(result).toContain('requests resumption')
+  })
+  it('does not use one raw target to classify unrelated documents in a batch', () => {
+    const raw = { ...mr, kind: 'Claim', spec: {}, status: { conditions: [{ type: 'Synced', status: 'False', reason: 'ReconcilePaused' }] } }
+    const clean = { ...raw, status: undefined }
+    const yaml = stringify(clean)
+    const result = html(<CrossplaneYamlApplyNotice yaml={yaml + '\n---\n' + yaml} resourceData={raw} previewDocuments={[{ index: 0, status: 'accepted', baselineYaml: yaml, predictedYaml: yaml }, { index: 1, status: 'accepted', baselineYaml: yaml, predictedYaml: yaml }]} />)
+    expect(result).toBe('')
+  })
+  it('handles invalid or empty YAML without disturbing the editor validation', () => {
+    expect(html(<CrossplaneYamlApplyNotice yaml={'spec: [\n'} />)).toBe('')
+    expect(html(<CrossplaneYamlApplyNotice yaml="" />)).toBe('')
+  })
+})