@skyhook-io/k8s-ui 1.18.0 → 1.18.2

package/src/components/resources/curated-column-ownership.test.ts

@@ -108,8 +108,8 @@ describe('curated column ownership', () => {
   // Brace-counting, not parsing: assert the extraction actually saw the whole
   // table, or a silently-missed key would let the guard above pass vacuously.
   it('extracted every curated key', () => {
-    expect(CURATED.length).toBe(240)
-    expect(OWNED.size).toBe(202)
+    expect(CURATED.length).toBe(244)
+    expect(OWNED.size).toBe(206)
     expect(CURATED).toContain('pods')
     expect(CURATED).toContain('crossplanemanagedresources')
     expect([...OWNED]).toContain('awsmanagedcontrolplanes')
@@ -166,7 +166,7 @@ describe('every declaration resolves', () => {
     .map(m => [m[1], m[2].split(',').map(g => g.trim().replace(/'/g, ''))] as const)
 
   it('covers the whole ownership table', () => {
-    expect(DECLARED.length).toBe(202)
+    expect(DECLARED.length).toBe(206)
   })
 
   it.each(DECLARED)('%s is curated under each group it claims', (key, groups) => {

package/src/components/resources/generic-status.ts

@@ -1,3 +1,6 @@
+import { getOpenTelemetryCollectorStatus, getOpenTelemetryInstrumentationStatus } from './resource-utils-opentelemetry'
+import { getFlaggerCanaryStatus } from './resource-utils-flagger'
+import { isApiGroup } from './resource-utils-cnpg'
 import type { HealthLevel } from './resource-utils'
 import { getGatewayPolicyStatus } from './gateway-policy-status'
 
@@ -88,6 +91,18 @@ function fromCondition(cond: any, polarityKnown: boolean): GenericStatus | null
  * callers render their own placeholder rather than inventing one.
  */
 export function getGenericResourceStatus(resource: any): GenericStatus | null {
+  if (isApiGroup(resource?.apiVersion, 'opentelemetry.io')) {
+    const native = resource.kind === 'OpenTelemetryCollector' ? getOpenTelemetryCollectorStatus(resource)
+      : resource.kind === 'Instrumentation' ? getOpenTelemetryInstrumentationStatus(resource) : null
+    if (native) return { text: native.text, tone: native.level }
+  }
+  if (isApiGroup(resource?.apiVersion, 'flagger.app')) {
+    if (resource.kind === 'Canary') {
+      const native = getFlaggerCanaryStatus(resource)
+      return { text: native.text, tone: native.level }
+    }
+    if (resource.kind === 'MetricTemplate') return { text: 'Configured', tone: 'neutral' }
+  }
   const status = resource?.status
   if (!status || typeof status !== 'object') return null
 

package/src/components/resources/printer-columns.test.ts

@@ -296,3 +296,39 @@ describe('printerTableKey collision safety', () => {
   })
 })
 
+
+
+describe('Crossplane condition source provenance', () => {
+  const resource = {
+    metadata: { annotations: { 'crossplane.io/paused': 'true' } },
+    spec: { resourceRefs: [] },
+    status: { conditions: [{ type: 'Synced', status: 'False', reason: 'ReconcilePaused' }, { type: 'Ready', status: 'False', reason: 'Unavailable' }] },
+  }
+  const synced = { name: 'Synced', jsonPath: ".status.conditions[?(@.type=='Synced')].status" }
+  const ready = { name: 'Ready', jsonPath: '.status.conditions[?(@.type=="Ready")].status' }
+
+  it('keeps condition source when sanitizing the table response', () => {
+    const table = sanitizePrinterTable({ columns: [synced, ready], cells: { a: ['False', 'False'] } })
+    expect(table?.columns[0].jsonPath).toBe(synced.jsonPath)
+    expect(table?.cells.a).toEqual(['False', 'False'])
+  })
+
+  it('neutralizes only the actual expected Synced observation and recorded Ready=True', () => {
+    expect(printerCellTone(synced, 'False', resource)).toBe('neutral')
+    expect(printerCellTone(ready, 'True', resource)).toBe('neutral')
+    expect(printerCellTone(ready, 'False', resource)).toBe('unhealthy')
+    expect(printerCellTone(ready, 'Unknown', resource)).toBe('unknown')
+  })
+
+  it.each([undefined, '.status.unrelated', '.spec.synced'])('keeps same-named unrelated or older-server columns conservative: %s', jsonPath => {
+    expect(printerCellTone({ name: 'Synced', jsonPath }, 'False', resource)).toBe('unhealthy')
+    expect(printerCellTone({ name: 'Ready', jsonPath }, 'True', resource)).toBe('healthy')
+  })
+
+  it('retains reconcile errors and missing annotation', () => {
+    const error = { ...resource, status: { conditions: [{ type: 'Synced', status: 'False', reason: 'ReconcileError' }] } }
+    expect(printerCellTone(synced, 'False', error)).toBe('unhealthy')
+    expect(printerCellTone(synced, 'False', { ...resource, metadata: {} })).toBe('unhealthy')
+    expect(printerCellTone(synced, 'False', { ...resource, spec: {} })).toBe('neutral')
+  })
+})

package/src/components/resources/printer-columns.ts

@@ -1,4 +1,5 @@
 import type { HealthLevel } from './resource-utils'
+import { getCrossplanePauseState } from './resource-utils-crossplane'
 import { KNOWN_NEGATIVE_CONDITIONS, KNOWN_POSITIVE_CONDITIONS } from './generic-status'
 
 // Vendor-declared table columns from a CRD's additionalPrinterColumns,
@@ -9,6 +10,8 @@ import { KNOWN_NEGATIVE_CONDITIONS, KNOWN_POSITIVE_CONDITIONS } from './generic-
 /** One column definition, as the CRD declared it. */
 export interface PrinterColumnDef {
   name: string
+  /** Source provenance; absent when a supported older Radar omits it. Never evaluated by the UI. */
+  jsonPath?: string
   type?: string
   format?: string
   /** The vendor's own text. Absent for most CRDs, which declare none. */
@@ -70,6 +73,7 @@ export function sanitizePrinterTable(raw: any): PrinterTable | null {
     columns.push({
       name,
       type: typeof c.type === 'string' ? c.type : undefined,
+      ...(typeof c.jsonPath === 'string' ? { jsonPath: c.jsonPath } : {}),
       format: typeof c.format === 'string' ? c.format : undefined,
       description: typeof c.description === 'string' ? c.description : undefined,
       priority: typeof c.priority === 'number' ? c.priority : 0,
@@ -230,7 +234,7 @@ function truthiness(value: unknown): 'true' | 'false' | 'unknown' | null {
  * fine; rendering that as grey text throws away the only scannable signal on
  * the kinds that have no curated Status column.
  */
-export function printerCellTone(def: PrinterColumnDef, value: unknown): HealthLevel | null {
+export function printerCellTone(def: PrinterColumnDef, value: unknown, resource?: any): HealthLevel | null {
   const state = truthiness(value)
   if (!state) return null
   // The NAME decides whether we say anything at all — including for Unknown.
@@ -241,6 +245,13 @@ export function printerCellTone(def: PrinterColumnDef, value: unknown): HealthLe
   const degraded = DEGRADED_COLUMN_NAMES.has(name)
   const terminal = TERMINAL_COLUMN_NAMES.has(name)
   if (!positive && !degraded && !terminal) return null
+  // A vendor column name alone does not establish which condition it reads.
+  const conditionSource = /^\.status\.conditions\[\?\(@\.type==(['"])(Synced|Ready)\1\)\]\.status$/.exec(def.jsonPath ?? '')?.[2]
+  if (positive && conditionSource
+    && getCrossplanePauseState(resource) === 'acknowledged'
+    && ((conditionSource === 'Synced' && state === 'false') || (conditionSource === 'Ready' && state === 'true'))) {
+    return 'neutral'
+  }
   // Unknown is not a failure — the controller could not evaluate it.
   if (state === 'unknown') return 'unknown'
   if (positive) return state === 'true' ? 'healthy' : 'unhealthy'

package/src/components/resources/readiness-gates.test.ts

@@ -0,0 +1,95 @@
+import clockVectors from '../../../../../pkg/health/testdata/readiness_gate_clock.json'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { getPodPhaseDisplay, getPodStatus, getPodProblems, podMatchesProblemCategory } from './resource-utils'
+afterEach(() => vi.useRealTimers())
+const makePod = (): any => ({ metadata: { creationTimestamp: '2026-10-25T10:00:00Z' }, spec: { readinessGates: [{ conditionType: 'example.com/ready' }] }, status: { phase: 'Running', conditions: [
+ { type: 'Ready', status: 'False', reason: 'ReadinessGatesNotReady', message: 'gate has not reported ready', lastTransitionTime: '2026-10-25T11:50:00Z' },
+ { type: 'ContainersReady', status: 'True', lastTransitionTime: '2026-10-25T11:53:00Z' },
+], containerStatuses: [{ name: 'app', ready: true, state: { running: {} } }] } })
+describe('declared readiness gates', () => {
+ it.each(['missing', 'False', 'True', 'Unknown'])('handles %s gate', status => {
+  vi.useFakeTimers().setSystemTime(new Date('2026-10-25T12:00:00Z'))
+  const p=makePod();if(status!=='missing')p.status.conditions.push({ type:'example.com/ready',status })
+  const blocked=status!=='True'
+  expect(getPodStatus(p).level).toBe(blocked?'degraded':'healthy')
+  expect(getPodPhaseDisplay(p).level).toBe(blocked?'degraded':'healthy')
+  const problems=getPodProblems(p)
+  expect(podMatchesProblemCategory(problems,0,'Not Ready')).toBe(blocked)
+  expect(podMatchesProblemCategory(problems,0,'Other')).toBe(false)
+  if(blocked)expect(getPodPhaseDisplay(p)).toMatchObject({text:'Running — Readiness gate blocked',hint:'gate has not reported ready'})
+ })
+ it.each([0,1])('keeps grace for transition %s', index => {
+  vi.useFakeTimers().setSystemTime(new Date('2026-10-25T12:00:00Z'))
+  const p=makePod();p.status.conditions[index].lastTransitionTime='2026-10-25T11:59:00Z'
+  expect(getPodStatus(p).level).toBe('healthy');expect(getPodPhaseDisplay(p).level).toBe('healthy')
+ })
+ it('leaves graceful termination to the lifecycle overlay',()=>{
+  vi.useFakeTimers().setSystemTime(new Date('2026-10-25T12:00:00Z'))
+  const p=makePod();p.metadata.deletionTimestamp='2026-10-25T11:59:00Z'
+  expect(getPodStatus(p).level).toBe('neutral');expect(getPodPhaseDisplay(p).text).toContain('Terminating')
+  expect(podMatchesProblemCategory(getPodProblems(p),0,'Not Ready')).toBe(false)
+  p.status.containerStatuses[0].state={waiting:{reason:'ImagePullBackOff'}}
+  expect(getPodStatus(p).level).toBe('unhealthy');expect(getPodPhaseDisplay(p).level).toBe('unhealthy')
+ })
+ it('requires a declaration even with an older summary payload',()=>{
+  vi.useFakeTimers().setSystemTime(new Date('2026-10-25T12:00:00Z'))
+  const p=makePod();delete p.spec.readinessGates;expect(getPodStatus(p).level).toBe('healthy')
+ })
+ it('preserves other readiness meanings and fatal failures',()=>{
+  vi.useFakeTimers().setSystemTime(new Date('2026-10-25T12:00:00Z'))
+  const p=makePod();p.status.conditions[0].reason='NodeNotReady';expect(getPodStatus(p).level).toBe('healthy')
+  p.status.conditions[0].reason='ReadinessGatesNotReady';p.status.containerStatuses[0].state={waiting:{reason:'ImagePullBackOff'}}
+  expect(getPodStatus(p).level).toBe('unhealthy');expect(getPodPhaseDisplay(p).level).toBe('unhealthy')
+ })
+ it('keeps recent crash history ahead of gate text',()=>{
+  vi.useFakeTimers().setSystemTime(new Date('2026-10-25T12:00:00Z'))
+  const p=makePod();p.status.containerStatuses[0]={name:'app',ready:true,restartCount:2,state:{running:{startedAt:'2026-10-25T11:59:55Z'}},lastState:{terminated:{reason:'Error',exitCode:1,finishedAt:'2026-10-25T11:59:50Z'}}}
+  expect(getPodStatus(p).text).not.toContain('gate')
+  expect(getPodPhaseDisplay(p).text).not.toContain('gate')
+ })
+
+ it.each([['recent',false,'2026-10-25T11:59:00Z','unhealthy'],['settled',false,'2026-10-25T11:54:00Z','degraded'],['probe passed',true,'2026-10-25T11:59:00Z','degraded']])('keeps %s OOM recovery ahead of gate status',(_name,probe,startedAt,want)=>{
+  vi.useFakeTimers().setSystemTime(new Date('2026-10-25T12:00:00Z'))
+  const p=makePod();p.spec.containers=[{name:'app',...(probe?{readinessProbe:{}}:{})}]
+  p.status.containerStatuses[0]={name:'app',ready:true,restartCount:1,state:{running:{startedAt}},lastState:{terminated:{reason:'OOMKilled',exitCode:137,finishedAt:'2026-10-25T11:58:00Z'}}}
+  expect(getPodStatus(p).level).toBe(want);expect(getPodPhaseDisplay(p).level).toBe(want)
+  if(want==='unhealthy'){expect(getPodStatus(p).text).toBe('OOMKilled');expect(getPodPhaseDisplay(p).text).toContain('OOMKilled')}
+ })
+
+ it.each(['missing', 'recent', 'settled', 'completed'])('handles %s init OOM recovery with a gate', state => {
+  vi.useFakeTimers().setSystemTime(new Date('2026-10-25T12:00:00Z'))
+  const p = makePod()
+  p.status.initContainerStatuses = [{name:'init',lastState:{terminated:{reason:'OOMKilled'}},state:state==='completed'?{terminated:{exitCode:0}}:{running:state==='missing'?{}:{startedAt:state==='recent'?'2026-10-25T11:59:00Z':'2026-10-25T11:54:00Z'}}}]
+  const want = state==='missing'||state==='recent'?'unhealthy':'degraded'
+  expect(getPodStatus(p).level).toBe(want)
+  expect(getPodPhaseDisplay(p).level).toBe(want)
+ })
+
+ it.each([0,1])('does not grant grace for future transition %s', index => {
+  vi.useFakeTimers().setSystemTime(new Date('2026-10-25T12:00:00Z'))
+  const p = makePod()
+  p.status.conditions[index].lastTransitionTime='2026-10-25T13:00:00Z'
+  p.status.conditions[1-index].lastTransitionTime='2026-10-25T11:53:00Z'
+  expect(getPodStatus(p).level).toBe('degraded')
+  expect(getPodPhaseDisplay(p).level).toBe('degraded')
+ })
+ it('uses recent creation only as grace for missing transition times', () => {
+  vi.useFakeTimers().setSystemTime(new Date('2026-10-25T12:00:00Z'))
+  const p = makePod()
+  p.status.conditions.forEach((c:any) => delete c.lastTransitionTime)
+  p.metadata.creationTimestamp='2026-10-25T11:59:00Z'
+  expect(getPodStatus(p).level).toBe('healthy')
+  p.metadata.creationTimestamp='2026-10-25T13:00:00Z'
+  expect(getPodStatus(p).level).toBe('degraded')
+ })
+
+})
+
+describe('readiness-gate clock contract',()=>{
+ it.each(clockVectors.vectors)('$name',v=>{
+  vi.useFakeTimers().setSystemTime(new Date(clockVectors.now))
+  expect(getPodStatus(v.object).level).toBe(v.blocked?'degraded':'healthy')
+  expect(getPodPhaseDisplay(v.object).level).toBe(v.blocked?'degraded':'healthy')
+  expect(podMatchesProblemCategory(getPodProblems(v.object),0,'Not Ready')).toBe(v.blocked)
+ })
+})

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

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx'
-import { Layers, GitBranch, Box, ChevronRight, Pause } from 'lucide-react'
+import { Layers, GitBranch, Box, ChevronRight } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { Tooltip } from '../../ui/Tooltip'
 import {
@@ -11,9 +11,11 @@ import {
   getCrossplaneResourceRefs,
   getBoundXRRef,
   isClaim,
-  isCrossplanePaused,
+  getCrossplaneConditionTone,
+  getCrossplanePauseState,
   type CrossplaneResourceRef,
 } from '../resource-utils-crossplane'
+import { CrossplanePauseNotice, CrossplanePauseChip } from './CrossplanePauseContext'
 import { kindToPluralWithGroup } from '../../../utils/navigation'
 import type { StatusBadge } from '../resource-utils'
 
@@ -33,6 +35,7 @@ export interface ComposedRefStatus {
   ref: CrossplaneResourceRef
   /** undefined means we haven't fetched yet (or the host doesn't support it) */
   status?: StatusBadge
+  pauseState?: ReturnType<typeof getCrossplanePauseState>
   /** true while the fetch is in flight */
   loading?: boolean
   /** 404 — composed resource not created yet (normal during reconciliation) */
@@ -98,20 +101,12 @@ export function CompositeRenderer({ data, onNavigate, composedRefStatuses, compo
   const resourceRefs = composedRefs ?? getCrossplaneResourceRefs(data)
   const claim = isClaim(data)
   const boundXR = claim ? getBoundXRRef(data) : null
-  const paused = isCrossplanePaused(data)
   const alertVariant = status.level === 'unhealthy' || status.level === 'alert' ? status.level : null
   const operationalIssuesShown = useOperationalIssuesShown()
 
   return (
     <>
-      {paused && (
-        <AlertBanner
-          variant="warning"
-          icon={Pause}
-          title="Reconciliation paused"
-          message="The crossplane.io/paused annotation is set. Composed resources will not be reconciled until the annotation is removed."
-        />
-      )}
+      <CrossplanePauseNotice data={data} />
 
       {alertVariant && reason && !operationalIssuesShown && (
         <AlertBanner
@@ -190,7 +185,7 @@ export function CompositeRenderer({ data, onNavigate, composedRefStatuses, compo
         )}
       </Section>
 
-      <ConditionsSection conditions={data?.status?.conditions} />
+      <ConditionsSection conditions={data?.status?.conditions} getConditionTone={condition => getCrossplaneConditionTone(data, condition)} />
     </>
   )
 }
@@ -263,6 +258,7 @@ function ComposedRefRow({
         <span className="text-xs text-theme-text-tertiary truncate max-w-[8rem] shrink-0 text-right">{ref_.namespace}</span>
       )}
       <StatusCellInline statusEntry={statusEntry} />
+      <CrossplanePauseChip state={statusEntry?.pauseState ?? null} compact />
       <ChevronRight className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
     </div>
   )

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

@@ -0,0 +1,153 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi } from 'vitest'
+import { ManagedResourceRenderer } from './ManagedResourceRenderer'
+import { CompositeRenderer } from './CompositeRenderer'
+import { ManagedResourceCell, CompositeResourceCell } from './crossplane-cells'
+import { CrossplanePauseNotice } from './CrossplanePauseContext'
+import { WorkloadView } from '../../workload/WorkloadView'
+import { ResourceRendererDispatch, diagnoseHealthHint, getResourceStatus } from '../../shared/ResourceRendererDispatch'
+import { getCellFilterValue } from '../resource-utils'
+import { getGenericResourceStatus } from '../generic-status'
+import { getCrossplanePauseState, getCrossplaneStatusReason } from '../resource-utils-crossplane'
+
+const pause = { type: 'Synced', status: 'False', reason: 'ReconcilePaused', message: 'controller pause observation' }
+const base = {
+  apiVersion: 'test.crossplane.io/v1', kind: 'Bucket',
+  metadata: { name: 'archive', namespace: 'test', annotations: { 'crossplane.io/paused': 'true' } },
+  spec: { providerConfigRef: { name: 'default' } },
+  status: { conditions: [{ type: 'Ready', status: 'True' }, pause] },
+}
+
+it.each([
+  ['MR', ManagedResourceRenderer, base.spec],
+  ['XR', CompositeRenderer, { resourceRefs: [] }],
+  ['Claim', CompositeRenderer, { resourceRef: { kind: 'Archive', name: 'archive-xr' }, compositionRef: { name: 'archive' } }],
+] as const)('shows one muted own-reconciler explanation for %s, no warning or failing pause', (_kind, Renderer, spec) => {
+  const html = renderToStaticMarkup(<Renderer data={{ ...base, spec }} />)
+  expect(html).toContain("This resource&#x27;s controller last reported reconciliation paused")
+  expect(html).toContain('Readiness and errors are last reported')
+  expect(html).toContain('ReconcilePaused')
+  expect(html).not.toContain('failing')
+  expect(html).not.toContain('text-red-')
+  expect(html).not.toContain('bg-red-')
+  expect(html).not.toContain('status-warning')
+  expect(html).not.toContain('Composed resources will not')
+  expect(html).not.toContain('Their own controllers')
+})
+
+it('retains one independent failing condition and its real banner message', () => {
+  const data = { ...base, status: { conditions: [pause, { type: 'Ready', status: 'False', reason: 'Unavailable', message: 'external API access denied' }] } }
+  const html = renderToStaticMarkup(<ManagedResourceRenderer data={data} />)
+  expect(html).toContain('1 failing')
+  expect(html).toContain('Unavailable')
+  expect(html.match(/external API access denied/g)).toHaveLength(2)
+  expect(html.match(/controller pause observation/g)).toHaveLength(1)
+})
+
+it.each([undefined, 'True', 'Unknown', 'ReconcileError'])('distinguishes requested intent with Synced=%s', synced => {
+  const conditions = synced ? [{ type: 'Synced', status: synced === 'ReconcileError' ? 'False' : synced, reason: synced }] : []
+  const data = { ...base, status: { conditions } }
+  expect(getCrossplanePauseState(data)).toBe('requested')
+  const html = renderToStaticMarkup(<ManagedResourceRenderer data={data} />)
+  expect(html).toContain('the recorded conditions do not confirm the pause')
+  expect(html).not.toContain('controller last reported reconciliation paused')
+})
+
+it('warns specifically about requested deletion without promising a blocker or changing status', () => {
+  const data = { ...base, metadata: { ...base.metadata, deletionTimestamp: '2026-10-26T08:00:00Z' } }
+  const html = renderToStaticMarkup(<CrossplanePauseNotice data={data} />)
+  expect(html).toContain('Deletion has been requested. Paused reconciliation may defer')
+  expect(html).toContain('text-warning-text')
+  expect(getResourceStatus('buckets', data)?.text).toBe('Terminating')
+})
+
+it.each([false, true])('keeps pause context in the %s expanded header', expanded => {
+  const html = renderToStaticMarkup(<WorkloadView kind="buckets" namespace="test" name="archive" expanded={expanded} onBack={vi.fn()} resource={base} />)
+  expect(html).toContain('Reconciliation paused')
+  expect(html).toContain('Ready (reported)')
+})
+
+it.each([
+  [ManagedResourceCell, base.spec],
+  [CompositeResourceCell, { resourceRefs: [] }],
+] as const)('keeps independent primary status in cells and status filters', (Cell, spec) => {
+  const resource = { ...base, spec }
+  const html = renderToStaticMarkup(<Cell resource={resource} column="status" />)
+  expect(html).toContain('Ready (reported)')
+  expect(getCellFilterValue(resource, 'status', 'buckets')).toBe('Ready (reported)')
+  const failed = { ...resource, status: { conditions: [pause, { type: 'Ready', status: 'False', reason: 'Unavailable' }] } }
+  expect(getCellFilterValue(failed, 'status', 'buckets')).toBe('Unavailable')
+  expect(renderToStaticMarkup(<Cell resource={failed} column="status" />)).toContain('Unavailable')
+})
+
+it('gives composed-resource status and Diagnose the same quiet recorded state', () => {
+  expect(getResourceStatus('buckets', base)).toMatchObject({ text: 'Ready (reported)', level: 'neutral' })
+  expect(diagnoseHealthHint('buckets', base)).toBe('unknown')
+})
+
+it('keeps pause context on a composed child beside its independent status', () => {
+  const ref = { apiVersion: base.apiVersion, kind: base.kind, name: 'child', namespace: 'test' }
+  const html = renderToStaticMarkup(<CompositeRenderer
+    data={{ ...base, spec: { resourceRefs: [ref] } }}
+    composedRefStatuses={new Map([[`${ref.apiVersion}/${ref.kind}/${ref.namespace}/${ref.name}`, {
+      ref, status: { text: 'Unavailable', color: 'status-unhealthy', level: 'unhealthy' }, pauseState: 'acknowledged',
+    }]])}
+  />)
+  expect(html).toContain('Unavailable')
+  expect(html).toContain('Paused')
+})
+
+it.each(['EarlyXR', 'EarlyClaim'])('qualifies recorded pause before %s has references without inferring its resource type', kind => {
+  const resource = { ...base, kind, spec: {}, status: { conditions: [pause] } }
+  const html = renderToStaticMarkup(<ResourceRendererDispatch resource={{ kind: 'earlyresources', namespace: 'test', name: 'archive' }} data={resource} onCopy={() => {}} copied={null} showCommonSections={false} />)
+  expect(html).toContain('last reported reconciliation paused')
+  expect(html).toContain('ReconcilePaused')
+  expect(html).toContain('False')
+  expect(html).not.toContain('status-red')
+  expect(html).not.toContain('Managed Resource')
+  expect(html).not.toContain('Composed Resources')
+  expect(getResourceStatus('earlyresources', resource)).toMatchObject({ text: 'Readiness unknown', level: 'neutral' })
+  const header = renderToStaticMarkup(<WorkloadView kind="earlyresources" namespace="test" name="archive" onBack={vi.fn()} resource={resource} />)
+  expect(header).toContain('Reconciliation paused')
+})
+
+it('does not infer Crossplane from an annotation-only request without shape or acknowledgement', () => {
+  const resource = { ...base, kind: 'Unknown', spec: {}, status: { conditions: [] } }
+  const html = renderToStaticMarkup(<WorkloadView kind="unknowns" namespace="test" name="archive" onBack={vi.fn()} resource={resource} />)
+  expect(html).not.toContain('Pause requested')
+})
+
+it('does not infer controller acknowledgement from a non-list condition field on an uncurated object', () => {
+  expect(getCrossplanePauseState({ ...base, spec: {}, status: { conditions: { Synced: 'False' } } })).toBe('requested')
+})
+
+it.each([
+  ['Failed', { phase: 'Failed', message: 'independent phase failure', conditions: [{ type: 'Ready', status: 'True' }, pause] }],
+  ['Not Healthy', { conditions: [{ type: 'Healthy', status: 'False', message: 'independent health failure' }, pause] }],
+] as const)('preserves independent generic %s evidence while qualifying early pause without mutating the resource', (label, reportedStatus) => {
+  const resource = { ...base, kind: 'EarlyXR', spec: {}, status: reportedStatus }
+  const before = structuredClone(resource)
+  Object.freeze(resource.status.conditions)
+  Object.freeze(resource.status)
+  Object.freeze(resource)
+  const html = renderToStaticMarkup(<ResourceRendererDispatch resource={{ kind: 'earlyresources', namespace: 'test', name: 'archive' }} data={resource} onCopy={() => {}} copied={null} showCommonSections={false} />)
+  expect(html).toContain(label)
+  expect(html).toContain('independent')
+  expect(html).toContain('last reported reconciliation paused')
+  expect(getResourceStatus('earlyresources', resource)).toMatchObject({ text: label, level: 'unhealthy' })
+  expect(getCrossplaneStatusReason(resource)).toContain('independent')
+  expect(resource).toEqual(before)
+})
+
+
+it('retains curated Knative revision status ahead of acknowledgement-only pause context', () => {
+  const resource = {
+    apiVersion: 'serving.knative.dev/v1', kind: 'Revision',
+    metadata: { name: 'scaled-down', annotations: { 'crossplane.io/paused': 'true' } },
+    spec: {},
+    status: { conditions: [{ type: 'Ready', status: 'True' }, { type: 'Active', status: 'False', reason: 'NoTraffic' }, pause] },
+  }
+  expect(getResourceStatus('knativerevisions', resource)?.text).toBe('Scaled to Zero')
+  expect(getCellFilterValue(resource, 'status', 'knativerevisions')).toBe(getGenericResourceStatus(resource)?.text)
+  expect(diagnoseHealthHint('knativerevisions', resource)).toBe('unknown')
+})

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

@@ -0,0 +1,39 @@
+import { AlertTriangle, Pause } from 'lucide-react'
+import { Badge } from '../../ui/Badge'
+import { Tooltip } from '../../ui/Tooltip'
+import { getCrossplanePauseState } from '../resource-utils-crossplane'
+
+function pauseDescription(state: 'requested' | 'acknowledged'): string {
+  return state === 'acknowledged'
+    ? "This resource's controller last reported reconciliation paused. Changes are deferred while paused. Readiness and errors are last reported."
+    : "The pause annotation is set for this resource; the recorded conditions do not confirm the pause. Changes may be deferred while paused. Readiness and errors are last reported."
+}
+
+export function CrossplanePauseChip({ state, compact = false }: { state: ReturnType<typeof getCrossplanePauseState>; compact?: boolean }) {
+  if (!state) return null
+  return (
+    <Tooltip content={pauseDescription(state)}>
+      <Badge severity="neutral" size={compact ? 'sm' : 'default'} className="gap-1 whitespace-nowrap shrink-0">
+        <Pause className="w-3 h-3 shrink-0" aria-hidden />
+        {state === 'requested' ? 'Pause requested' : compact ? 'Paused' : 'Reconciliation paused'}
+      </Badge>
+    </Tooltip>
+  )
+}
+
+export function CrossplanePauseNotice({ data }: { data: any }) {
+  const state = getCrossplanePauseState(data)
+  if (!state) return null
+  if (data?.metadata?.deletionTimestamp) {
+    return (
+      <div className="space-y-1">
+        <p className="flex items-start gap-1.5 text-sm text-warning-text">
+          <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" aria-hidden />
+          Deletion has been requested. Paused reconciliation may defer this resource’s controller cleanup.
+        </p>
+        <p className="text-sm text-theme-text-tertiary">{pauseDescription(state)}</p>
+      </div>
+    )
+  }
+  return <p className="text-sm text-theme-text-tertiary">{pauseDescription(state)}</p>
+}

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

@@ -0,0 +1,96 @@
+import { useState } from 'react'
+import { Badge } from '../../ui/Badge'
+import { healthToSeverity } from '../../../utils/badge-colors'
+import { Section, Property, PropertyList, ResourceLink, ConditionsSection, AlertBanner, useOperationalIssuesShown } from '../../ui/drawer-components'
+import type { ResourceRef } from '../../../types'
+import { getFlaggerAnalysis, getFlaggerCanaryStatus, getFlaggerStrategy, getFlaggerTargetRef, getFlaggerAutoscalerRef, getFlaggerMetricTemplateRef } from '../resource-utils-flagger'
+
+interface Props { data: any; onNavigate?: (ref: ResourceRef) => void }
+
+export function FlaggerCanaryRenderer({ data, onNavigate }: Props) {
+  const state = getFlaggerCanaryStatus(data)
+  const analysis = getFlaggerAnalysis(data)
+  const target = getFlaggerTargetRef(data)
+  const scaler = getFlaggerAutoscalerRef(data)
+  const strategy = getFlaggerStrategy(data)
+  const weighted = !(analysis.iterations > 0)
+  const metrics = analysis.metrics ?? []
+  const [showAllMetrics, setShowAllMetrics] = useState(false)
+  const [showAllHooks, setShowAllHooks] = useState(false)
+  const operationalIssuesShown = useOperationalIssuesShown()
+  return <>
+    <Section title="Canary Rollout" defaultExpanded>
+      <PropertyList>
+        <Property label="Rollout state" value={<Badge severity={healthToSeverity(state.level)}>{state.text}</Badge>} />
+        <Property label="Recorded phase" value={data.status?.phase} />
+        <Property label="Suspend requested" value={data.spec?.suspend === true ? 'Yes' : 'No'} />
+        <Property label="Strategy" value={strategy} />
+        <Property label="Canary target" value={target ? <ResourceLink {...target} onNavigate={onNavigate} /> : data.spec?.targetRef?.name} />
+        {data.spec?.autoscalerRef && <Property label="Canary autoscaler" value={scaler ? <ResourceLink {...scaler} onNavigate={onNavigate} /> : data.spec.autoscalerRef.name} />}
+        {weighted && <Property label="Reported canary weight" value={data.status?.canaryWeight != null ? `${data.status.canaryWeight}%` : 'Not reported'} />}
+        <Property label="Reported failed checks" value={data.status?.failedChecks ?? 'Not reported'} />
+      </PropertyList>
+      <p className="mt-2 text-xs text-theme-text-tertiary">Phase and counters describe Flagger’s last reported rollout, not a live traffic measurement or proof that the latest configuration was reconciled.</p>
+      {data.spec?.targetRef?.kind === 'Deployment' && <p className="mt-2 text-xs text-theme-text-tertiary">Flagger normally scales the canary target to zero between analyses. The primary Deployment continues serving; find observed primary resources in Related Resources.</p>}
+      {data.spec?.targetRef?.kind === 'DaemonSet' && <p className="mt-2 text-xs text-theme-text-tertiary">Flagger parks the canary DaemonSet with a node selector between analyses. Inspect the primary DaemonSet in Related Resources.</p>}
+      {data.status?.phase === 'Failed' && !operationalIssuesShown && <AlertBanner variant="warning" title="Canary rollout failed" message="Inspect this Canary’s events for failed metric checks or webhooks; the primary may still be serving the previous version." />}
+    </Section>
+    <Section title="Analysis" defaultExpanded>
+      <PropertyList>
+        <Property label="Interval" value={analysis.interval || '1m (default)'} />
+        <Property label="Failure threshold" value={analysis.threshold > 0 ? analysis.threshold : '1 (default)'} />
+        <Property label="Skip analysis" value={data.spec?.skipAnalysis === true || (!data.spec?.analysis && !data.spec?.canaryAnalysis) ? 'Yes' : 'No'} />
+        {weighted ? <>
+          <Property label="Step weight" value={analysis.stepWeights?.length ? analysis.stepWeights.map((weight: number) => `${weight}%`).join(', ') : analysis.stepWeight != null ? `${analysis.stepWeight}%` : 'Not specified'} />
+          <Property label="Maximum weight" value={analysis.maxWeight != null ? `${analysis.maxWeight}%` : 'Not specified'} />
+        </> : <Property label="Configured iterations" value={analysis.iterations} />}
+        {!weighted && <Property label="Reported iteration" value={data.status?.iterations ?? 'Not reported'} />}
+      </PropertyList>
+    </Section>
+    {metrics.length > 0 && <Section title={`Analysis Metrics (${metrics.length})`} defaultExpanded>
+      <div className="space-y-3">{(showAllMetrics ? metrics : metrics.slice(0, 5)).map((metric: any, index: number) => {
+        const template = getFlaggerMetricTemplateRef(data, metric)
+        return <div key={index} className="card-inner break-words"><PropertyList>
+          <Property label="Metric" value={metric.name} />
+          <Property label="Source" value={template ? <ResourceLink {...template} onNavigate={onNavigate} /> : metric.query ? 'Inline query' : ['request-success-rate', 'request-duration'].includes(metric.name) ? 'Built-in provider metric' : 'No query or template declared'} />
+          <Property label="Query interval" value={metric.interval || '1m (default)'} />
+          {metric.thresholdRange?.min != null && <Property label="Minimum" value={metric.thresholdRange.min} />}
+          {metric.thresholdRange?.max != null && <Property label="Maximum" value={metric.thresholdRange.max} />}
+          {!metric.thresholdRange && metric.threshold != null && <Property label="Threshold (deprecated)" value={metric.threshold} />}
+        </PropertyList>{metric.query && !template && <div className="mt-2"><FlaggerQueryPreview query={metric.query} /></div>}</div>
+      })}</div>
+      {metrics.length > 5 && <button type="button" className="mt-2 text-sm text-accent-text hover:underline" onClick={() => setShowAllMetrics(!showAllMetrics)}>{showAllMetrics ? 'Show fewer metrics' : `Show all ${metrics.length} metrics`}</button>}
+    </Section>}
+    {analysis.webhooks?.length > 0 && <Section title={`Analysis Hooks (${analysis.webhooks.length})`} defaultExpanded={['Waiting', 'WaitingPromotion'].includes(data.status?.phase)}>
+      <PropertyList>{(showAllHooks ? analysis.webhooks : analysis.webhooks.slice(0, 5)).map((hook: any, index: number) => <Property key={index} label={hook.name} value={hook.type || 'rollout'} />)}</PropertyList>
+      {analysis.webhooks.length > 5 && <button type="button" className="mt-2 text-sm text-accent-text hover:underline" onClick={() => setShowAllHooks(!showAllHooks)}>{showAllHooks ? 'Show fewer hooks' : `Show all ${analysis.webhooks.length} hooks`}</button>}
+      {data.spec?.suspend !== true && ['Waiting', 'WaitingPromotion'].includes(data.status?.phase) && <p className="mt-2 text-xs text-theme-text-tertiary">Flagger is waiting for a confirmation hook. Inspect the confirm-rollout or confirm-promotion hook and this Canary’s events.</p>}
+    </Section>}
+    <ConditionsSection conditions={data.status?.conditions} getConditionTone={condition => condition.type === 'Promoted' ? data.status?.phase === 'Failed' ? 'fail' : condition.status === 'True' ? 'ok' : 'neutral' : 'unknown'} />
+  </>
+}
+
+export function FlaggerMetricTemplateRenderer({ data, onNavigate }: Props) {
+  const provider = data.spec?.provider ?? {}
+  const query = data.spec?.query ?? ''
+  return <>
+    <Section title="Metric Provider" defaultExpanded><PropertyList>
+      <Property label="Type" value={provider.type} />
+      {provider.address && <Property label="Address" value={<span className="break-all">{provider.address}</span>} />}
+      {provider.region && <Property label="Region" value={provider.region} />}
+      <Property label="TLS certificate verification" value={provider.insecureSkipVerify ? 'Disabled' : 'Enabled'} />
+      {provider.secretRef?.name && <Property label="Credentials Secret" value={<ResourceLink name={provider.secretRef.name} kind="Secret" group="" namespace={data.metadata?.namespace} onNavigate={onNavigate} />} />}
+    </PropertyList><p className="mt-2 text-xs text-theme-text-tertiary">Declared provider and query configuration. This view does not execute the query or verify provider connectivity.</p></Section>
+    <Section title="Query Template" defaultExpanded>
+      {query ? <FlaggerQueryPreview query={query} /> : <p className="text-sm text-theme-text-tertiary">No query is declared.</p>}
+    </Section>
+    <ConditionsSection conditions={data.status?.conditions} getConditionTone={() => 'unknown'} />
+  </>
+}
+
+function FlaggerQueryPreview({ query }: { query: string }) {
+  const [showFullQuery, setShowFullQuery] = useState(false)
+  return <><pre className="whitespace-pre-wrap break-all text-xs text-theme-text-secondary">{showFullQuery ? query : query.slice(0, 2000)}</pre>
+    {query.length > 2000 && <button type="button" className="mt-2 text-sm text-accent-text hover:underline" onClick={() => setShowFullQuery(!showFullQuery)}>{showFullQuery ? 'Show less' : `Show full query (${query.length} characters)`}</button>}
+  </>
+}