@skyhook-io/k8s-ui 1.18.0 → 1.18.2

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -1,3 +1,9 @@
+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'
 import { clsx } from 'clsx'
 import { SEVERITY_BADGE, HEALTH_BADGE_COLORS } from '../../utils/badge-colors'
@@ -293,6 +299,7 @@ import {
 import type { ComposedRefStatus } from '../resources/renderers/CompositeRenderer'
 import {
   getCrossplaneStatus,
+  getCrossplanePauseState,
   getProviderStatus,
   getProviderConfigStatus,
   isManagedResource,
@@ -448,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',
@@ -552,6 +561,8 @@ interface ResourceRendererDispatchProps {
   resource: SelectedResource
   data: any
   relationships?: Relationships
+  /** See RelatedResourcesSection. */
+  trackedBy?: string
   certificateInfo?: SecretCertificateInfo
   hpaDiagnosis?: HPADiagnosis
   scalerDiagnostics?: ScalerDiagnosis[]
@@ -598,6 +609,7 @@ export function ResourceRendererDispatch({
   resource,
   data,
   relationships,
+  trackedBy,
   certificateInfo,
   hpaDiagnosis,
   scalerDiagnostics,
@@ -701,8 +713,13 @@ export function ResourceRendererDispatch({
   // foreign CRD render a BLANK drawer rather than the generic one.
   // CAPI's `machines` and `machinesets` need the same protection because another
   // API group can publish either plural without inheriting CAPI presentation.
+  const isFluxKind = ['gitrepositories', 'ocirepositories', 'helmrepositories', 'kustomizations', 'helmreleases', 'alerts'].includes(kind)
+  const isFluxResource = getGitOpsTool(kind, apiVersionToGroup(data?.apiVersion)) === 'flux'
   const isGroupGatedKind =
-    kind === 'clusters' || kind === 'backups' || kind === 'scheduledbackups' || kind === 'poolers'
+    ['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'
     || kind === 'subscriptions' || kind === 'imagecatalogs' || kind === 'clusterimagecatalogs' || kind === 'databaseroles' || kind === 'jobsets'
     || kind === 'policies' || kind === 'rollouts' || kind === 'experiments'
@@ -710,7 +727,15 @@ export function ResourceRendererDispatch({
     || kind === 'machines' || kind === 'machinesets' || kind === 'workloads' || kind === 'localqueues' || kind === 'clusterqueues'
   const isCNPGApiVersion = isApiGroup(data?.apiVersion, CNPG_GROUP)
   const groupGatedMatched =
-    (kind === 'clusters' && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'cluster.x-k8s.io')))
+    (['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')))
+    || (kind === 'ingresses' && ['networking.k8s.io', 'extensions', 'networking.internal.knative.dev'].some(group => isApiGroup(data?.apiVersion, group)))
+    || (kind === 'certificates' && ['cert-manager.io', 'networking.internal.knative.dev'].some(group => isApiGroup(data?.apiVersion, group)))
+    || (kind === 'gateways' && ['gateway.networking.k8s.io', 'networking.istio.io'].some(group => isApiGroup(data?.apiVersion, group)))
+    || (kind === 'clusters' && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'cluster.x-k8s.io')))
     || (kind === 'backups' && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'velero.io')))
     || ((kind === 'scheduledbackups' || kind === 'poolers') && isCNPGApiVersion)
     || (kind === 'objectstores' && isApiGroup(data?.apiVersion, 'barmancloud.cnpg.io'))
@@ -799,7 +824,7 @@ export function ResourceRendererDispatch({
 
   const sidebarContent = showCommonSections && (
     <>
-      <RelatedResourcesSection relationships={sidebarRelationships} onNavigate={onNavigate} />
+      <RelatedResourcesSection relationships={sidebarRelationships} onNavigate={onNavigate} kind={kind} trackedBy={trackedBy} />
       {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} />
@@ -824,9 +849,9 @@ export function ResourceRendererDispatch({
           />
         )}
         {kind === 'replicasets' && <ReplicaSetRenderer data={data} />}
-        {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && <ServiceComp data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} />}
+        {kind === 'services' && data?.apiVersion === 'v1' && <ServiceComp data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} />}
         {kind === 'endpointslices' && <EndpointSliceRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'ingresses' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <IngressRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'ingresses' && (isApiGroup(data?.apiVersion, 'networking.k8s.io') || isApiGroup(data?.apiVersion, 'extensions')) && <IngressRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'configmaps' && <ConfigMapRenderer data={data} relationships={relationships} onNavigate={onNavigate} />}
         {kind === 'secrets' && <SecretRenderer data={data} relationships={relationships} onNavigate={onNavigate} certificateInfo={certificateInfo} resourceData={data} onSaveSecretValue={onSaveSecretValue} isSaving={isSavingSecret} />}
         {kind === 'jobs' && !nonCoreJobFallthrough && <JobComp data={data} onNavigate={onNavigate} />}
@@ -848,7 +873,7 @@ export function ResourceRendererDispatch({
         {kind === 'analysisruns' && <AnalysisRunRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'analysistemplates' || kind === 'clusteranalysistemplates') && <AnalysisTemplateRenderer data={data} />}
         {kind === 'experiments' && isApiGroup(data?.apiVersion, 'argoproj.io') && <ExperimentRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'certificates' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <CertificateRenderer data={data} />}
+        {kind === 'certificates' && isApiGroup(data?.apiVersion, 'cert-manager.io') && <CertificateRenderer data={data} />}
         {kind === 'workflows' && <WorkflowRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'persistentvolumes' && <PersistentVolumeRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'storageclasses' && <StorageClassRenderer data={data} />}
@@ -857,7 +882,7 @@ export function ResourceRendererDispatch({
         {kind === 'issuers' && <IssuerRenderer data={data} />}
         {kind === 'orders' && <OrderRenderer data={data} />}
         {kind === 'challenges' && <ChallengeRenderer data={data} />}
-        {kind === 'gateways' && (data.apiVersion?.includes('networking.istio.io') ? <IstioGatewayRenderer data={data} /> : <GatewayRenderer data={data} onNavigate={onNavigate} />)}
+        {kind === 'gateways' && groupGatedMatched && (isApiGroup(data.apiVersion, 'networking.istio.io') ? <IstioGatewayRenderer data={data} /> : <GatewayRenderer data={data} onNavigate={onNavigate} />)}
         {kind === 'gatewayclasses' && <GatewayClassRenderer data={data} />}
         {kind === 'httproutes' && <HTTPRouteRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'grpcroutes' && <GRPCRouteRenderer data={data} onNavigate={onNavigate} />}
@@ -877,13 +902,13 @@ export function ResourceRendererDispatch({
         {(kind === 'roles' || kind === 'clusterroles') && <RoleComp data={data} onNavigate={onNavigate} />}
         {(kind === 'rolebindings' || kind === 'clusterrolebindings') && <RoleBindingComp data={data} onNavigate={onNavigate} />}
         {kind === 'events' && <EventRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'gitrepositories' && <GitRepositoryRenderer data={data} />}
-        {kind === 'ocirepositories' && <OCIRepositoryRenderer data={data} />}
-        {kind === 'helmrepositories' && <HelmRepositoryRenderer data={data} />}
-        {kind === 'kustomizations' && <KustomizationRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'helmreleases' && <FluxHelmReleaseComp data={data} onNavigate={onNavigate} />}
-        {kind === 'alerts' && <AlertRenderer data={data} />}
-        {kind === 'applications' && <ArgoApplicationRenderer data={data} />}
+        {kind === 'gitrepositories' && isFluxResource && <GitRepositoryRenderer data={data} />}
+        {kind === 'ocirepositories' && isFluxResource && <OCIRepositoryRenderer data={data} />}
+        {kind === 'helmrepositories' && isFluxResource && <HelmRepositoryRenderer data={data} />}
+        {kind === 'kustomizations' && isFluxResource && <KustomizationRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'helmreleases' && isFluxResource && <FluxHelmReleaseComp data={data} onNavigate={onNavigate} />}
+        {kind === 'alerts' && isFluxResource && <AlertRenderer data={data} />}
+        {kind === 'applications' && isApiGroup(data?.apiVersion, 'argoproj.io') && <ArgoApplicationRenderer data={data} />}
         {kind === 'nodepools' && <KarpenterNodePoolComp data={data} onNavigate={onNavigate} />}
         {kind === 'nodeclaims' && <KarpenterNodeClaimRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'ec2nodeclasses' && <KarpenterEC2NodeClassRenderer data={data} />}
@@ -989,14 +1014,14 @@ export function ResourceRendererDispatch({
         {kind === 'leases' && <LeaseRenderer data={data} />}
         {kind === 'limitranges' && <LimitRangeRenderer data={data} />}
         {/* Knative Serving */}
-        {(kind === 'services' && data?.apiVersion?.includes('serving.knative.dev')) && <KnativeServiceRenderer data={data} onNavigate={onNavigate} />}
+        {(kind === 'services' && isApiGroup(data?.apiVersion, 'serving.knative.dev')) && <KnativeServiceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'knativeservices' && <KnativeServiceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'knativeconfigurations' && <KnativeConfigurationRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'knativerevisions' && <KnativeRevisionRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'knativeroutes' && <KnativeRouteRenderer data={data} onNavigate={onNavigate} />}
-        {(kind === 'ingresses' && data?.apiVersion?.includes('networking.internal.knative.dev')) && <KnativeIngressRenderer data={data} />}
+        {(kind === 'ingresses' && isApiGroup(data?.apiVersion, 'networking.internal.knative.dev')) && <KnativeIngressRenderer data={data} />}
         {kind === 'knativeingresses' && <KnativeIngressRenderer data={data} />}
-        {(kind === 'certificates' && data?.apiVersion?.includes('networking.internal.knative.dev')) && <KnativeCertificateRenderer data={data} />}
+        {(kind === 'certificates' && isApiGroup(data?.apiVersion, 'networking.internal.knative.dev')) && <KnativeCertificateRenderer data={data} />}
         {kind === 'knativecertificates' && <KnativeCertificateRenderer data={data} />}
         {kind === 'serverlessservices' && <ServerlessServiceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'domainmappings' && <DomainMappingRenderer data={data} onNavigate={onNavigate} />}
@@ -1038,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`
@@ -1095,17 +1125,22 @@ 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
   }
   if (k === 'replicasets') return getWorkloadStatus(data, k)
   if (k === 'services') {
-    if (data.apiVersion?.includes('serving.knative.dev')) {
+    if (isApiGroup(data.apiVersion, 'serving.knative.dev')) {
       const status = getKnativeConditionStatus(data)
       return { text: status.text, color: status.color }
     }
-    return getServiceStatus(data)
+    if (data.apiVersion === 'v1') return getServiceStatus(data)
   }
   if (k === 'endpointslices') {
     const endpoints = data.endpoints || []
@@ -1178,11 +1213,11 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'workflows') return getWorkflowStatus(data)
   if (k === 'cronworkflows') return getCronWorkflowStatus(data)
   if (k === 'certificates') {
-    if (data.apiVersion?.includes('networking.internal.knative.dev')) {
+    if (isApiGroup(data.apiVersion, 'networking.internal.knative.dev')) {
       const status = getKnativeConditionStatus(data)
       return { text: status.text, color: status.color }
     }
-    return getCertificateStatus(data)
+    if (isApiGroup(data.apiVersion, 'cert-manager.io')) return getCertificateStatus(data)
   }
   if (k === 'persistentvolumes') return getPVStatus(data)
   if (k === 'certificaterequests') return getCertificateRequestStatus(data)
@@ -1191,20 +1226,21 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'orders') return getOrderState(data)
   if (k === 'challenges') return getChallengeState(data)
   if (k === 'gateways') {
-    if (data.apiVersion?.includes('networking.istio.io')) return getIstioGatewayStatus(data)
-    return getGatewayStatus(data)
+    if (isApiGroup(data.apiVersion, 'networking.istio.io')) return getIstioGatewayStatus(data)
+    if (isApiGroup(data.apiVersion, 'gateway.networking.k8s.io')) return getGatewayStatus(data)
   }
   if (k === 'gatewayclasses') return getGatewayClassStatus(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)
-  if (k === 'ocirepositories') return getOCIRepositoryStatus(data)
-  if (k === 'helmrepositories') return getHelmRepositoryStatus(data)
-  if (k === 'kustomizations') return getKustomizationStatus(data)
-  if (k === 'helmreleases') return getFluxHelmReleaseStatus(data)
-  if (k === 'alerts') return getFluxAlertStatus(data)
-  if (k === 'applications') return getArgoApplicationStatus(data)
+  const isFluxResource = getGitOpsTool(k, apiVersionToGroup(data.apiVersion)) === 'flux'
+  if (k === 'gitrepositories' && isFluxResource) return getGitRepositoryStatus(data)
+  if (k === 'ocirepositories' && isFluxResource) return getOCIRepositoryStatus(data)
+  if (k === 'helmrepositories' && isFluxResource) return getHelmRepositoryStatus(data)
+  if (k === 'kustomizations' && isFluxResource) return getKustomizationStatus(data)
+  if (k === 'helmreleases' && isFluxResource) return getFluxHelmReleaseStatus(data)
+  if (k === 'alerts' && isFluxResource) return getFluxAlertStatus(data)
+  if (k === 'applications' && isApiGroup(data.apiVersion, 'argoproj.io')) return getArgoApplicationStatus(data)
   if (k === 'nodepools') return getNodePoolStatus(data)
   if (k === 'nodeclaims') return getNodeClaimStatus(data)
   if (k === 'ec2nodeclasses') return getEC2NodeClassStatus(data)
@@ -1349,12 +1385,14 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (
     knativeConditionKinds.includes(k)
     || isKnativeSubscription
-    || (k === 'ingresses' && data.apiVersion?.includes('networking.internal.knative.dev'))
+    || (k === 'ingresses' && isApiGroup(data.apiVersion, 'networking.internal.knative.dev'))
   ) {
     const status = getKnativeConditionStatus(data)
     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/timeline/TimelineList.tsx

@@ -216,6 +216,10 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     const singleEvents: TimelineEvent[] = []
 
     for (const item of items) {
+      if (item.id === selectedEventId) {
+        singleEvents.push(item)
+        continue
+      }
       if (foldPerResource?.(item)) {
         const key = `fold:${item.kind}:${item.namespace}:${item.name}`
         const existing = groups.get(key) || []
@@ -344,7 +348,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     if (older.length > 0) groups.push({ label: 'Older', items: aggregateEvents(older) })
 
     return groups
-  }, [filteredActivity, compact, foldPerResource])
+  }, [filteredActivity, compact, foldPerResource, selectedEventId])
 
   // Visible-window reporting: rows carry their time span in data attributes;
   // on scroll (rAF-throttled) and whenever the row set changes, the span of

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('')
+  })
+})

package/src/components/ui/CrossplaneOperationNotice.tsx

@@ -0,0 +1,139 @@
+import { useMemo, type ReactNode } from 'react'
+import type { YamlPreviewResult } from './YamlReview'
+import { parseAllDocuments } from 'yaml'
+import { splitYamlDocuments } from '../../utils/yaml'
+import { apiVersionToGroup } from '../../utils/navigation'
+import { resourceKey } from '../../utils/resource-refs'
+import { getCrossplanePauseState, isComposite, isCrossplanePaused, isManagedResource } from '../resources/resource-utils-crossplane'
+import { AlertBanner } from './drawer-components'
+
+const crossplaneFinalizers = new Set([
+  'finalizer.managedresource.crossplane.io',
+  'composite.apiextensions.crossplane.io',
+  'finalizer.apiextensions.crossplane.io',
+])
+
+function isCrossplaneOperationResource(data: any): boolean {
+  return isManagedResource(data) || isComposite(data) || getCrossplanePauseState(data) === 'acknowledged'
+}
+
+function isAnnotatedCrossplanePause(data: any): boolean {
+  return isCrossplanePaused(data) && isCrossplaneOperationResource(data)
+}
+
+function resourceNames(resources: any[]): string {
+  const names = resources.slice(0, 5).map(data =>
+    `${data.kind ?? 'Resource'} ${data.metadata?.namespace ? `${data.metadata.namespace}/` : ''}${data.metadata?.name ?? 'Unnamed'}`,
+  )
+  if (resources.length > 5) names.push(`and ${resources.length - 5} more`)
+  return names.join(', ')
+}
+
+export function CrossplaneDeleteNotice({ resources, force = false }: { resources: any[]; force?: boolean }) {
+  const paused = resources.filter(isAnnotatedCrossplanePause)
+  if (paused.length === 0) return null
+  const blocked = paused.filter(data =>
+    data.metadata?.finalizers?.some((finalizer: string) => crossplaneFinalizers.has(finalizer)),
+  )
+  const forceTargets = paused.filter(data => data.metadata?.finalizers?.length > 0)
+  const alreadyDeleting = blocked.some(data => data.metadata?.deletionTimestamp)
+  if (force ? forceTargets.length === 0 : blocked.length === 0) {
+    return <p className="text-xs text-theme-text-secondary">
+      Reconciliation pause is requested for {resourceNames(paused)}. The pause annotation alone does not block Kubernetes deletion; remaining finalizers determine whether cleanup must finish first.
+    </p>
+  }
+  return <AlertBanner
+    variant="warning"
+    className="mb-2"
+    title={force ? 'Force delete bypasses controller cleanup' : alreadyDeleting ? 'Deletion requested while reconciliation is paused' : 'Pause can hold deletion in Terminating'}
+    message={<>
+      {force
+        ? resources.length === 1
+          ? <p>Reconciliation pause is requested for {resourceNames(forceTargets)}. This resource has finalizers.</p>
+          : <p>Of {resources.length} selected resources, {forceTargets.length} {forceTargets.length === 1 ? 'has' : 'have'} pause requested and finalizers: {resourceNames(forceTargets)}.</p>
+        : resources.length === 1
+          ? <p>Pause requested on {resourceNames(blocked)}. This resource holds a Crossplane finalizer.</p>
+          : <p>Of {resources.length} selected resources, {blocked.length} {blocked.length === 1 ? 'has' : 'have'} pause requested and {blocked.length === 1 ? 'holds' : 'hold'} a Crossplane finalizer: {resourceNames(blocked)}.</p>}
+      {force ? <p className="mt-1">Force delete strips finalizers and can leave external or related resources behind. It does not resume reconciliation or guarantee what other controllers will delete.</p> : <p className="mt-1">{alreadyDeleting ? resources.length === 1 ? 'Deletion has already been requested.' : 'Some deletions have already been requested.' : 'Kubernetes can accept the deletion request.'} The pause annotation tells {blocked.length === 1 ? 'this resource’s controller' : 'these resources’ controllers'} to defer finalizer cleanup. Removing the pause requests resumption and may allow pending work, including deletion under {blocked.length === 1 ? 'its policies' : 'their policies'}.</p>}
+    </>}
+  />
+}
+
+export function CrossplaneApplyNotice({ resources, unknownResources = [], children }: { resources: any[]; unknownResources?: any[]; children?: ReactNode }) {
+  const paused = resources.filter(isAnnotatedCrossplanePause)
+  if (paused.length === 0 && unknownResources.length === 0) return null
+  return <AlertBanner
+    variant="info"
+    className="mb-2"
+    title={paused.length ? 'Pause affects reconciliation' : 'Existing pause state is unknown'}
+    message={<>
+      {paused.length > 0 && <>
+        <p>{resourceNames(paused)}.</p>
+        <p className="mt-1">Kubernetes can accept edits. While <code>crossplane.io/paused</code> remains <code>&quot;true&quot;</code>, {paused.length === 1 ? 'this resource’s controller will' : 'these resources’ controllers will'} defer reconciliation. Removing the annotation requests resumption and may allow pending work, including deletion. Other resources&apos; controllers may continue independently.</p>
+      </>}
+      {unknownResources.length > 0 && <>
+        <p className="mt-1">Live pause state is unverified for {resourceNames(unknownResources)}.</p>
+        <p className="mt-1">If <code>crossplane.io/paused</code> remains <code>&quot;true&quot;</code> on an existing resource, its controller defers reconciliation. Omitting the annotation from server-side apply YAML does not guarantee its removal.</p>
+      </>}
+      {children}
+    </>}
+  />
+}
+
+function yamlObjects(yaml: string): any[] {
+  try {
+    return parseAllDocuments(yaml).map(document => document.errors.length ? null : document.toJS({ maxAliasCount: 100 }))
+  } catch {
+    return []
+  }
+}
+
+export function CrossplaneYamlApplyNotice({ yaml, baselineYaml = '', baselineUnavailable = false, previewDocuments, mode = 'apply', resourceData }: {
+  yaml: string
+  baselineYaml?: string
+  baselineUnavailable?: boolean
+  previewDocuments?: YamlPreviewResult[]
+  mode?: 'apply' | 'create' | 'update'
+  resourceData?: unknown
+}) {
+  const context = useMemo(() => {
+    const submitted = splitYamlDocuments(yaml).map(document => document.content)
+    const original = splitYamlDocuments(baselineYaml).map(document => document.content)
+    const matchesTarget = (data: any, target: any) => Boolean(data && target
+      && typeof data.apiVersion === 'string' && typeof target.apiVersion === 'string'
+      && resourceKey(apiVersionToGroup(data.apiVersion), data.kind, data.metadata?.namespace ?? '', data.metadata?.name)
+        === resourceKey(apiVersionToGroup(target.apiVersion), target.kind, target.metadata?.namespace ?? '', target.metadata?.name))
+    const pairs = (previewDocuments
+      ? previewDocuments.map(preview => ({
+          after: yamlObjects(preview.predictedYaml || preview.submittedYaml || submitted[preview.index] || '')[0],
+          before: yamlObjects(preview.baselineYaml || original[preview.index] || '')[0],
+          preview,
+        }))
+      : Array.from({ length: Math.max(submitted.length, original.length) }, (_, index) => ({
+          after: yamlObjects(submitted[index] || '')[0],
+          before: yamlObjects(original[index] || '')[0],
+          preview: undefined,
+        }))).map(pair => matchesTarget(pair.before, pair.after) ? pair : { ...pair, before: undefined })
+    const rawSource = pairs.length === 1 && isAnnotatedCrossplanePause(resourceData) ? resourceData as any : undefined
+    const matchesRaw = (data: any) => matchesTarget(data, rawSource)
+    const rawPause = matchesRaw(pairs[0]?.after) ? rawSource : undefined
+    const hasPause = (data: any) => isCrossplanePaused(data) && (isCrossplaneOperationResource(data) || Boolean(rawPause && matchesRaw(data)))
+    const resources = pairs.flatMap(pair => {
+      const source = hasPause(pair.after) ? pair.after : hasPause(pair.before) ? pair.before : undefined
+      return source ? [isAnnotatedCrossplanePause(source) ? source : rawPause] : []
+    })
+    const unknownResources = pairs.filter(pair => mode !== 'create' && (baselineUnavailable || pair.preview?.status === 'unavailable' && !pair.preview.predictedYaml && !pair.preview.baselineYaml && !pair.before && pair.preview.action !== 'create'))
+      .map(pair => pair.after).filter(data => data && (isCrossplaneOperationResource(data) || Boolean(rawPause && matchesRaw(data))))
+    const kept = pairs.filter(pair => pair.preview?.predictedYaml && hasPause(pair.before) && hasPause(pair.after)).map(pair => pair.after)
+    const requested = pairs.filter(pair => pair.preview?.predictedYaml && !hasPause(pair.before) && hasPause(pair.after)).map(pair => pair.after)
+    const cleared = pairs.filter(pair => pair.preview?.predictedYaml && hasPause(pair.before) && !isCrossplanePaused(pair.after)).map(pair => pair.before)
+    const omissionUnverified = pairs.some(pair => !pair.preview?.predictedYaml && hasPause(pair.before) && pair.after?.metadata?.annotations?.['crossplane.io/paused'] === undefined)
+    return { resources, unknownResources, kept, requested, cleared, omissionUnverified }
+  }, [yaml, baselineYaml, baselineUnavailable, previewDocuments, mode, resourceData])
+  return <CrossplaneApplyNotice resources={context.resources} unknownResources={context.unknownResources}>
+    {context.kept.length > 0 && <p className="mt-1">Server preview keeps the pause request on {resourceNames(context.kept)}.</p>}
+    {context.requested.length > 0 && <p className="mt-1">Server preview requests a pause on {resourceNames(context.requested)}.</p>}
+    {context.cleared.length > 0 && <p className="mt-1">Server preview clears the pause request on {resourceNames(context.cleared)}.</p>}
+    {context.omissionUnverified && <p className="mt-1">Omitting the annotation from server-side apply YAML does not guarantee its removal.</p>}
+  </CrossplaneApplyNotice>
+}