@skyhook-io/k8s-ui 1.18.1 → 1.18.2

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>
+}

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

@@ -22,15 +22,15 @@ afterEach(async () => {
 describe('Deletion preview states', () => {
   it('states the namespace-wide deletion consequence without relying on topology', async () => {
     await act(async () => root.render(<ForceDeleteConfirmDialog {...base} resourceKind="Namespace" resourceName="demo" namespaceName="" cascadeRootResolved={false} />))
-    expect(document.body.textContent).toContain('delete the namespace "demo" and the resources in it')
+    expect(document.body.textContent).toContain('delete the namespace "demo" and all resources in it')
     expect(document.body.textContent).not.toContain("not in Radar's topology")
   })
   it('shows one advisory statement for a resolved preview', async () => {
     await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved cascadeDependents={[{ kind: 'Pod', namespace: 'demo', name: 'web-pod' }]} />))
-    const toggle = [...document.querySelectorAll('button')].find(b => b.textContent?.includes('May affect'))!
+    const toggle = [...document.querySelectorAll('button')].find(b => b.textContent?.includes('May also delete'))!
     await act(async () => toggle.click())
     expect(document.body.textContent).toContain('web-pod')
-    expect(document.body.textContent?.match(/does not predict what will be deleted/g)).toHaveLength(1)
+    expect(document.body.textContent).toContain("Kubernetes deletes only those that name this one as their owner")
     expect(document.body.textContent).not.toContain('Other resources may be affected')
   })
   it.each([[], undefined])('omits the advisory statement for an empty resolved preview (%j)', async (dependents) => {
@@ -42,9 +42,10 @@ describe('Deletion preview states', () => {
   })
   it('distinguishes an observed unresolved root from a fetch failure', async () => {
     await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved={false} />))
-    expect(document.body.textContent).toContain("This resource is not in Radar's topology")
+    expect(document.body.textContent).toContain("Radar couldn't verify which dependent resources")
     await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved={false} cascadePreviewFailed cascadeDependents={[{ kind: 'Pod', namespace: 'demo', name: 'stale' }]} />))
-    expect(document.body.textContent).toContain('Related-resource preview unavailable.')
+    expect(document.body.textContent).toContain('Deletion preview unavailable')
+    expect(document.body.textContent).toContain('Additional resources may be deleted.')
     expect(document.body.textContent).not.toContain('This resource is not in')
     expect(document.body.textContent).not.toContain('Other resources may be affected')
     expect(document.body.textContent).not.toContain('May affect')
@@ -55,8 +56,56 @@ describe('Deletion preview states', () => {
   })
   it('shows loading without presenting stale failure or success as a result', async () => {
     await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeLoading cascadePreviewFailed cascadeRootResolved />))
-    expect(document.body.textContent).toContain('Checking related resources')
+    expect(document.body.textContent).toContain('Checking for dependent resources')
+    const confirm = Array.from(document.body.querySelectorAll('button')).find(button => button.textContent === 'Delete')!
+    expect(confirm.disabled).toBe(true)
     expect(document.body.textContent).not.toContain('unavailable')
     expect(document.body.textContent).not.toContain('does not predict')
   })
 })
+
+ it('separates observed collection, uncertainty and partial coverage', async () => {
+  await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved cascadeDependents={[{kind:'Pod', namespace:'demo', name:'certain'}]} cascadeDetail={{basis:'ownerReferences', possibleDependents:[{kind:'ConfigMap', namespace:'demo', name:'possible'}], coverage:{complete:false,narrowed:true}}} />))
+  expect(document.body.textContent).toContain('Garbage collection is expected to delete 1 dependent resource')
+  expect(document.body.textContent).toContain('May also delete 1 resource')
+  expect(document.body.textContent).toContain('This preview is partial')
+ })
+ it('does not promise force deletion can undo controller cleanup', async () => {
+  await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeDetail={{controllerTeardown:{controller:'Argo CD', action:'prune', destination:'remote'}}} />))
+  const force = document.querySelector('input[type="checkbox"]') as HTMLInputElement
+  await act(async () => force.click())
+  expect(document.body.textContent).toContain('remaining cleanup may be skipped')
+  expect(document.body.textContent).toContain('cannot undo it')
+  expect(document.body.textContent).not.toContain('Resources stay')
+ })
+
+ it('changes the pending-orphan warning when force is selected', async () => {
+  await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved cascadeDependents={[{kind:'Pod', namespace:'demo', name:'child'}]} cascadeDetail={{basis:'ownerReferences', propagation:'Orphan'}} />))
+  expect(document.body.textContent).toContain('dependents are orphaned')
+  expect(document.body.textContent).not.toContain('Garbage collection is expected')
+  await act(async () => (document.querySelector('input[type="checkbox"]') as HTMLInputElement).click())
+  expect(document.body.textContent).not.toContain('dependents are orphaned')
+  expect(document.body.textContent).toContain('Force delete removes the orphan finalizer')
+  expect(document.body.textContent).toContain('Garbage collection is expected')
+ })
+
+describe('paused Crossplane deletion confirmation', () => {
+  it('keeps context and permissions while changing only the explicit force selection', async () => {
+    const resourceData = { metadata: { name: 'bucket', annotations: { 'crossplane.io/paused': 'true' }, finalizers: ['finalizer.managedresource.crossplane.io'] }, spec: { providerConfigRef: { name: 'default' } } }
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} resourceData={resourceData} />))
+    expect(document.body.textContent).toContain('Pause can hold deletion in Terminating')
+    const confirm = [...document.querySelectorAll('button')].find(b => b.textContent === 'Delete')!
+    expect(confirm.disabled).toBe(false)
+    await act(async () => confirm.click())
+    expect(base.onConfirm).toHaveBeenLastCalledWith(false)
+    expect(document.body.textContent).toContain('Kubernetes can accept the deletion request')
+    const force = document.querySelector('input[type="checkbox"]') as HTMLInputElement
+    await act(async () => force.click())
+    expect(document.body.textContent).toContain('Force delete bypasses controller cleanup')
+    const forceConfirm = [...document.querySelectorAll('button')].find(b => b.textContent === 'Force Delete')!
+    await act(async () => forceConfirm.click())
+    expect(base.onConfirm).toHaveBeenLastCalledWith(true)
+    expect(resourceData.metadata.finalizers).toEqual(['finalizer.managedresource.crossplane.io'])
+    expect(resourceData.metadata.annotations['crossplane.io/paused']).toBe('true')
+  })
+})

package/src/components/ui/ForceDeleteConfirmDialog.tsx

@@ -2,6 +2,8 @@ import { useState, useMemo } from 'react'
 import { Loader2 } from 'lucide-react'
 import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
 import { ConfirmDialog } from './ConfirmDialog'
+import { AlertBanner } from './drawer-components'
+import { CrossplaneDeleteNotice } from './CrossplaneOperationNotice'
 import { pluralize } from '../../utils/pluralize'
 
 export interface CascadeDependent {
@@ -11,6 +13,27 @@ export interface CascadeDependent {
   group?: string
 }
 
+/** Cached deletion evidence; all lists are observations, not completion guarantees. */
+export interface CascadeDetail {
+  propagation?: string
+  coverage?: { complete: boolean; narrowed?: boolean; truncated?: boolean; notChecked?: unknown[] }
+  unavailableReason?: string
+  notEnumerated?: string[]
+  /** "ownerReferences" when dependents are garbage-collection results; absent from older servers. */
+  basis?: string
+  /** Deleted unless another owner Radar can't see is still live. */
+  possibleDependents?: CascadeDependent[]
+  /** What Argo CD or Flux deletes through its finalizer. */
+  controllerTeardown?: {
+    controller: string
+    action: 'prune' | 'uninstall' | string
+    destination: 'local' | 'remote' | 'unknown'
+    resources?: CascadeDependent[]
+    /** Already being deleted: the teardown may be underway. */
+    terminating?: boolean
+  }
+}
+
 interface ForceDeleteConfirmDialogProps {
   open: boolean
   onClose: () => void
@@ -23,6 +46,8 @@ interface ForceDeleteConfirmDialogProps {
   cascadeLoading?: boolean
   cascadeRootResolved?: boolean
   cascadePreviewFailed?: boolean
+  cascadeDetail?: CascadeDetail
+  resourceData?: unknown
 }
 
 export function ForceDeleteConfirmDialog({
@@ -36,10 +61,14 @@ export function ForceDeleteConfirmDialog({
   cascadeDependents,
   cascadeLoading,
   cascadeRootResolved,
+  cascadeDetail,
   cascadePreviewFailed,
+  resourceData,
 }: ForceDeleteConfirmDialogProps) {
   const [forceDelete, setForceDelete] = useState(false)
+  const orphaning = cascadeDetail?.propagation === 'Orphan' && !forceDelete
   const isNamespace = resourceKind.toLowerCase() === 'namespace'
+  const isCRD = ['customresourcedefinition', 'customresourcedefinitions'].includes(resourceKind.toLowerCase())
 
   function handleClose() {
     onClose()
@@ -57,41 +86,69 @@ export function ForceDeleteConfirmDialog({
       onConfirm={handleConfirm}
       title="Delete Resource"
       message={`Are you sure you want to delete "${resourceName}"?`}
-      details={isNamespace ? `This will permanently delete the namespace "${resourceName}" and the resources in it.` : `This will permanently delete the ${resourceKind} "${resourceName}" from the "${namespaceName}" namespace.`}
+      details={isNamespace ? `This will permanently delete the namespace "${resourceName}" and all resources in it.` : isCRD ? `This deletes the CRD and ALL its instances across the cluster, including those not shown here.` : namespaceName
+        ? `This will permanently delete the ${resourceKind} "${resourceName}" from the "${namespaceName}" namespace.`
+        : `This will permanently delete the cluster-scoped ${resourceKind} "${resourceName}".`}
       confirmLabel={forceDelete ? 'Force Delete' : 'Delete'}
       variant="danger"
       isLoading={isLoading}
+      confirmDisabled={cascadeLoading}
     >
       <div className="flex flex-col gap-3 pb-1">
         {cascadeLoading && (
           <div className="flex items-center gap-2 text-xs text-theme-text-tertiary">
             <Loader2 className="w-3.5 h-3.5 animate-spin" />
-            Checking related resources...
+            Checking for dependent resources...
           </div>
         )}
 
-        {!cascadeLoading && !cascadePreviewFailed && cascadeDependents && cascadeDependents.length > 0 && (
-          <CascadeDependentsList dependents={cascadeDependents} />
+        {!cascadeLoading && !cascadePreviewFailed && !orphaning && cascadeDependents && cascadeDependents.length > 0 && (
+          cascadeDetail?.basis === 'ownerReferences' ? (
+            <CascadeDependentsList
+              dependents={cascadeDependents}
+              title={`Garbage collection is expected to delete ${pluralize(cascadeDependents.length, 'dependent resource')}`}
+              note="Kubernetes deletes these through their owner references. Finalizers may delay deletion. This is an observation of the current cache, not a guarantee of completion."
+            />
+          ) : (
+            <CascadeDependentsList
+              dependents={cascadeDependents}
+              title={`May also delete ${pluralize(cascadeDependents.length, 'related resource')}`}
+              note="This Radar version can't tell owned resources from other links. Kubernetes deletes only those that name this one as their owner."
+            />
+          )
         )}
 
-        {!cascadeLoading && cascadePreviewFailed && (
-          <p className="text-xs text-theme-text-tertiary">
-            Related-resource preview unavailable.
-          </p>
+        {!cascadeLoading && !cascadePreviewFailed && !orphaning && cascadeDetail?.possibleDependents && cascadeDetail.possibleDependents.length > 0 && (
+          <CascadeDependentsList
+            dependents={cascadeDetail.possibleDependents}
+            title={`May also delete ${pluralize(cascadeDetail.possibleDependents.length, 'resource')}`}
+            note="Another owner or a chain of owners could not be resolved. Kubernetes deletes these only if no live owner remains."
+          />
         )}
 
-        {!isNamespace && !cascadeLoading && !cascadePreviewFailed && cascadeRootResolved === false && (
-          <p className="text-xs text-theme-text-tertiary">
-            This resource is not in Radar&apos;s topology, so its related resources cannot be previewed.
-          </p>
+        {!cascadeLoading && !cascadePreviewFailed && cascadeDetail?.coverage && !orphaning && !cascadeDetail.coverage.complete ? (
+          <p className="text-xs text-theme-text-secondary">This preview is partial: Radar may not collect or you may not be allowed to read all dependents. Additional resources may be deleted.</p>
+        ) : null}
+        {!cascadeLoading && !cascadePreviewFailed && cascadeDetail?.controllerTeardown && (
+          <ControllerTeardownNotice teardown={cascadeDetail.controllerTeardown} force={forceDelete} />
         )}
 
-        {!cascadeLoading && !cascadePreviewFailed && cascadeRootResolved === true && cascadeDependents && cascadeDependents.length > 0 && (
-          <p className="text-xs text-theme-text-secondary">
-            This list shows visible related resources; it does not predict what will be deleted.
-          </p>
+        {!cascadeLoading && !cascadePreviewFailed && cascadeRootResolved === false && (
+          <AlertBanner
+            variant="warning"
+            title="Dependent resources unverified"
+            message="Radar couldn't verify which dependent resources Kubernetes will also delete. Additional resources may be deleted but aren't shown here."
+            className="mb-0"
+          />
         )}
 
+        {!cascadeLoading && !cascadePreviewFailed && orphaning && <p className="text-xs text-theme-text-secondary">Keeping the pending orphan policy: owner-reference dependents are orphaned. Controller cleanup may still delete resources.</p>}
+        {!cascadeLoading && !cascadePreviewFailed && forceDelete && cascadeDetail?.propagation === 'Orphan' && <p className="text-xs text-warning-text">Force delete removes the orphan finalizer and uses Background propagation. Owner-reference dependents may now be garbage collected.</p>}
+        {!cascadeLoading && !cascadePreviewFailed && !orphaning && cascadeDetail?.coverage?.complete && cascadeDetail.coverage.narrowed && <p className="text-xs text-theme-text-secondary">Only resources Radar observes and you can read are listed.</p>}
+        {!cascadeLoading && cascadePreviewFailed && <AlertBanner variant="warning" title="Deletion preview unavailable" message="Additional resources may be deleted." className="mb-0" />}
+        {!cascadeLoading && !cascadePreviewFailed && cascadeDetail?.notEnumerated?.map(item => <p key={item} className="text-xs text-theme-text-secondary">Not enumerated: {item}.</p>)}
+        <CrossplaneDeleteNotice resources={[resourceData]} force={forceDelete} />
+
         <label className="flex items-center gap-2 text-sm text-theme-text-secondary">
           <input
             type="checkbox"
@@ -108,16 +165,64 @@ export function ForceDeleteConfirmDialog({
 
 const MAX_NAMES_PER_KIND = 8
 
-function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[] }) {
+// How a managed resource opts out of its controller's teardown. A Helm
+// uninstall keeps resources by Helm's own annotation, not Flux's.
+function optOut(teardown: NonNullable<CascadeDetail['controllerTeardown']>): string | undefined {
+  if (teardown.action === 'uninstall') return 'helm.sh/resource-policy: keep'
+  if (teardown.controller === 'Argo CD') return 'argocd.argoproj.io/sync-options: Delete=false'
+  if (teardown.controller === 'Flux') return 'kustomize.toolkit.fluxcd.io/prune: disabled'
+  return undefined
+}
+
+function ControllerTeardownNotice({ teardown, force }: { teardown: NonNullable<CascadeDetail['controllerTeardown']>; force: boolean }) {
+  const resources = teardown.resources ?? []
+  const destinationNotice = teardown.destination === 'remote'
+    ? 'This controller targets a destination Radar cannot confirm is this cluster. Radar cannot list what it will delete there.'
+    : teardown.destination === 'unknown'
+      ? 'The destination cluster is unknown. Radar cannot show where controller cleanup will run.'
+      : ''
+  const what = teardown.action === 'uninstall' ? 'uninstall the Helm release' : 'delete the resources it manages'
+  if (force) {
+    return (
+      <AlertBanner
+        variant="warning"
+        title="Controller cleanup may be skipped"
+        message={<>
+          {destinationNotice && <>{destinationNotice} </>}
+          {teardown.terminating
+            ? `This is already being deleted, so ${teardown.controller} may already be working to ${what}. Force delete removes its finalizer but can't undo that.`
+            : `Force delete removes ${teardown.controller}'s finalizer, so ${teardown.controller}'s remaining cleanup may be skipped. Cleanup may already have started; removing the finalizer cannot undo it.`}
+        </>}
+        className="mb-0"
+      />
+    )
+  }
+  const title = teardown.destination === 'unknown'
+    ? `${teardown.controller} has a cleanup finalizer`
+    : teardown.action === 'uninstall'
+    ? `${teardown.controller} is configured to uninstall the Helm release`
+    : `${teardown.controller} is configured to prune managed resources`
+  return (
+    <CascadeDependentsList
+      dependents={resources}
+      title={resources.length > 0 ? `${title} (${resources.length} shown)` : title}
+      summary={`${destinationNotice ? destinationNotice + ' ' : ''}${teardown.action === 'uninstall' ? 'Helm uninstalls resources in its stored release manifest' : `${teardown.controller} deletes what its own inventory records`}, which can include resources Radar doesn't show.${optOut(teardown) ? ` Resources marked ${optOut(teardown)} stay.` : ''}`}
+    />
+  )
+}
+
+// `note` explains the expanded list; `summary` is a caveat that must read
+// without expanding it.
+function CascadeDependentsList({ dependents, title, note, summary }: { dependents: CascadeDependent[]; title: string; note?: string; summary?: string }) {
   const [expanded, setExpanded] = useState(false)
   const { panelId, buttonProps } = useDisclosure(expanded)
 
   const grouped = useMemo(() => {
     const map = new Map<string, string[]>()
     for (const dep of dependents) {
-      const kind = dep.kind
+      const kind = dep.group ? `${dep.kind} (${dep.group})` : dep.kind
       if (!map.has(kind)) map.set(kind, [])
-      map.get(kind)!.push(dep.name)
+      map.get(kind)!.push(dep.namespace ? `${dep.namespace}/${dep.name}` : dep.name)
     }
     return Array.from(map.entries()).sort((a, b) => a[0].localeCompare(b[0]))
   }, [dependents])
@@ -131,10 +236,9 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
         className="flex items-center gap-2 w-full px-3 py-2 text-left text-xs font-medium text-amber-400 hover:bg-amber-500/10 transition-colors"
       >
         <CollapseChevron open={expanded} inheritColor className="w-3.5 h-3.5" />
-        <span>
-          May affect {pluralize(dependents.length, 'related resource')}
-        </span>
+        <span>{title}</span>
       </button>
+      {summary && <p className="px-3 pb-2 text-xs text-theme-text-secondary">{summary}</p>}
 
       <Collapse open={expanded} id={panelId}>
         <div className="px-3 pb-2.5 space-y-1.5">
@@ -150,6 +254,7 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
               </div>
             </div>
           ))}
+          {note && <p className="text-xs text-theme-text-tertiary">{note}</p>}
         </div>
       </Collapse>
     </div>

package/src/components/ui/PageHeader.tsx

@@ -19,7 +19,8 @@ interface PageHeaderProps {
 export function PageHeader({ icon: Icon, title, description, onBack, actions }: PageHeaderProps) {
   return (
     // Phones: actions (freshness, summary tiles) wrap under the title
-    // instead of squeezing it to nothing.
+    // instead of squeezing it to nothing, and take the full row so summary
+    // tiles can grow into it.
     <div className="flex items-center gap-4 phone:flex-wrap phone:gap-y-3">
       {onBack && (
         <button
@@ -39,7 +40,7 @@ export function PageHeader({ icon: Icon, title, description, onBack, actions }:
           <p className="text-sm text-theme-text-tertiary mt-1 ml-7 truncate phone:whitespace-normal phone:line-clamp-2">{description}</p>
         )}
       </div>
-      {actions && <div className="flex flex-wrap items-center justify-end gap-2 shrink-0 phone:shrink phone:justify-start">{actions}</div>}
+      {actions && <div className="flex flex-wrap items-center justify-end gap-2 shrink-0 phone:shrink phone:basis-full phone:justify-start">{actions}</div>}
     </div>
   )
 }

package/src/components/ui/SummaryTile.tsx

@@ -8,6 +8,7 @@ export type SummaryTone = 'neutral' | 'success' | 'warning' | 'error' | 'info'
 // Applications both surface their status rollup as a row of these in the header.
 export function SummaryTile({
   label,
+  phoneLabel,
   value,
   tone = 'neutral',
   onClick,
@@ -15,6 +16,8 @@ export function SummaryTile({
   loading = false,
 }: {
   label: string
+  /** Shorter label for phones, where a row of tiles has to fit 360px. */
+  phoneLabel?: string
   value: number
   tone?: SummaryTone
   onClick?: () => void
@@ -42,10 +45,17 @@ export function SummaryTile({
   ) : (
     <div className={`text-sm font-semibold ${toneClass}`}>{value}</div>
   )
-  const label$ = <div className="text-xs text-theme-text-tertiary">{label}</div>
+  const label$ = phoneLabel ? (
+    <div className="text-xs text-theme-text-tertiary">
+      <span className="phone:hidden">{label}</span>
+      <span className="hidden phone:inline">{phoneLabel}</span>
+    </div>
+  ) : (
+    <div className="text-xs text-theme-text-tertiary">{label}</div>
+  )
   if (!onClick) {
     return (
-      <div className="rounded-md border border-theme-border bg-theme-base px-3 py-2">
+      <div className="rounded-md border border-theme-border bg-theme-base px-3 py-2 phone:flex-1 phone:basis-0 phone:whitespace-nowrap phone:px-2 phone:py-1.5">
         {value$}
         {label$}
       </div>
@@ -57,7 +67,7 @@ export function SummaryTile({
       onClick={onClick}
       aria-pressed={active}
       className={clsx(
-        'cursor-pointer rounded-md border bg-theme-base px-3 py-2 text-left transition-colors hover:bg-theme-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-skyhook-500',
+        'cursor-pointer rounded-md border bg-theme-base px-3 py-2 phone:flex-1 phone:basis-0 phone:whitespace-nowrap phone:px-2 phone:py-1.5 text-left transition-colors hover:bg-theme-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-skyhook-500',
         active ? activeBorderClass : 'border-theme-border',
       )}
     >

package/src/components/ui/Tooltip.touch.test.tsx

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+//
+// A tap fires mouseenter and focus. On an enabled control the tooltip must not
+// pop over what the tap opens; on a disabled control the tap is how a touch
+// user reads why it's disabled.
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { Tooltip } from './Tooltip'
+
+let root: Root | undefined
+let host: HTMLDivElement | undefined
+afterEach(() => {
+  act(() => root?.unmount())
+  host?.remove()
+  vi.useRealTimers()
+  // The last touch time is module state; a key press clears it for the next file.
+  document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+})
+
+function render(child: React.ReactNode) {
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+  act(() => root!.render(<Tooltip content="Why" delay={0}>{child}</Tooltip>))
+  return host.querySelector('span')!
+}
+
+function touchPress() {
+  const e = new Event('pointerdown', { bubbles: true }) as Event & { pointerType: string }
+  Object.defineProperty(e, 'pointerType', { value: 'touch' })
+  document.body.dispatchEvent(e)
+}
+
+function hover(trigger: Element) {
+  vi.useFakeTimers()
+  act(() => { trigger.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, relatedTarget: document.body })) })
+  act(() => { vi.advanceTimersByTime(10) })
+}
+
+const tooltipShown = () => document.body.textContent?.includes('Why') ?? false
+
+it('stays closed when a tap activates an enabled control', () => {
+  const trigger = render(<button type="button">Open</button>)
+  touchPress()
+  hover(trigger)
+  expect(tooltipShown()).toBe(false)
+})
+
+it('still explains a disabled control on tap', () => {
+  const trigger = render(<button type="button" disabled>Restart</button>)
+  touchPress()
+  hover(trigger)
+  expect(tooltipShown()).toBe(true)
+})

package/src/components/ui/Tooltip.tsx

@@ -2,6 +2,9 @@ import { ReactNode, useState, useRef, useEffect, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
 import { computeTooltipPosition } from './tooltip-position'
+import { isTouchIntent } from '../../utils/touch-intent'
+
+const ENABLED_CONTROL = 'button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [role="button"]:not([aria-disabled="true"])'
 
 // Module-level singleton coordinator: only one Tooltip can be visible
 // at a time across the whole app. Without this, two Tooltip instances
@@ -221,6 +224,8 @@ export function Tooltip({
     }
   }, [isVisible])
 
+  const tapActivatesControl = () => isTouchIntent() && !!triggerRef.current?.querySelector(ENABLED_CONTROL)
+
   if ((disabled && !preserveWrapperWhenDisabled) || !content) {
     return <>{children}</>
   }
@@ -231,9 +236,13 @@ export function Tooltip({
         ref={triggerRef}
         className={clsx('inline-flex max-w-full', wrapperClassName)}
         style={wrapperStyle}
-        onMouseEnter={showTooltip}
+        // A tap fires mouseenter and focus too. On an enabled control the
+        // tap has its own action (often opening a menu), and the tooltip
+        // would pop over it; on disabled or plain content the tap is the
+        // only way a touch user can read the explanation, so it still shows.
+        onMouseEnter={() => { if (!tapActivatesControl()) showTooltip() }}
         onMouseLeave={scheduleHideTooltip}
-        onFocus={showTooltip}
+        onFocus={() => { if (!tapActivatesControl()) showTooltip() }}
         onBlur={hideTooltip}
         // pointerdown fires before click, so the tooltip is gone before
         // the trigger's action runs. Required when the child handles