@skyhook-io/k8s-ui 1.18.0 → 1.18.2

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

@@ -1,9 +1,11 @@
 import { useState } from 'react'
-import { Info, CheckCircle, XCircle, AlertCircle, FileCode, AlertTriangle, Layers } from 'lucide-react'
+import { Info, CheckCircle, XCircle, AlertCircle, FileCode, AlertTriangle, Layers, Minus } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { getGenericResourceStatus } from '../generic-status'
+import { getCrossplanePauseState, getCrossplaneIndependentStatus, getCrossplaneConditionTone } from '../resource-utils-crossplane'
+import { CrossplanePauseNotice } from './CrossplanePauseContext'
 import type { HealthLevel } from '../resource-utils'
 
 interface GenericRendererProps {
@@ -16,6 +18,7 @@ export function GenericRenderer({ data }: GenericRendererProps) {
   const conditions = status.conditions
 
   // Determine health status from conditions or status fields
+  const acknowledgedPause = getCrossplanePauseState(data) === 'acknowledged'
   const healthStatus = getHealthStatus(data)
 
   // Extract important fields from spec and status
@@ -32,6 +35,7 @@ export function GenericRenderer({ data }: GenericRendererProps) {
 
   return (
     <>
+      {acknowledgedPause && <CrossplanePauseNotice data={data} />}
       {/* Health Status Banner (if determinable) */}
       {healthStatus && (
         <div className={clsx(
@@ -90,7 +94,7 @@ export function GenericRenderer({ data }: GenericRendererProps) {
 
       {/* Conditions (common in CRDs) */}
       {conditions && Array.isArray(conditions) && conditions.length > 0 && (
-        <GenericConditionsSection conditions={conditions} />
+        <GenericConditionsSection conditions={conditions} resource={data} />
       )}
 
       {/* Nested Status Objects */}
@@ -154,8 +158,9 @@ const BANNER_TYPE: Record<HealthLevel, HealthType> = {
 }
 
 function getHealthStatus(resource: any): HealthStatusResult | null {
-  const derived = getGenericResourceStatus(resource)
-  if (!derived) return null
+  const acknowledgedPause = getCrossplanePauseState(resource) === 'acknowledged'
+  const derived = acknowledgedPause ? getCrossplaneIndependentStatus(resource) : getGenericResourceStatus(resource)
+  if (!derived || (acknowledgedPause && derived.tone === 'healthy')) return null
   return { type: BANNER_TYPE[derived.tone], label: derived.text, message: derived.reason }
 }
 
@@ -323,11 +328,11 @@ function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps)
 // CONDITIONS SECTION
 // ============================================================================
 
-function GenericConditionsSection({ conditions }: { conditions: any[] }) {
+function GenericConditionsSection({ conditions, resource }: { conditions: any[]; resource: any }) {
   // Sort conditions: problematic first, then alphabetically
   const sortedConditions = [...conditions].sort((a, b) => {
-    const aProblematic = a.status === 'False' || (a.status === 'True' && ['Degraded', 'Warning'].includes(a.type))
-    const bProblematic = b.status === 'False' || (b.status === 'True' && ['Degraded', 'Warning'].includes(b.type))
+    const aProblematic = getCrossplaneConditionTone(resource, a) !== 'neutral' && (a.status === 'False' || (a.status === 'True' && ['Degraded', 'Warning'].includes(a.type)))
+    const bProblematic = getCrossplaneConditionTone(resource, b) !== 'neutral' && (b.status === 'False' || (b.status === 'True' && ['Degraded', 'Warning'].includes(b.type)))
     if (aProblematic && !bProblematic) return -1
     if (!aProblematic && bProblematic) return 1
     return (a.type || '').localeCompare(b.type || '')
@@ -335,13 +340,14 @@ function GenericConditionsSection({ conditions }: { conditions: any[] }) {
 
   // Check for any problems
   const hasProblems = sortedConditions.some(c =>
-    c.status === 'False' || (c.status === 'True' && ['Degraded', 'Warning'].includes(c.type))
+    getCrossplaneConditionTone(resource, c) !== 'neutral' && (c.status === 'False' || (c.status === 'True' && ['Degraded', 'Warning'].includes(c.type)))
   )
 
   return (
     <Section title={`Conditions (${conditions.length})`} defaultExpanded={hasProblems || conditions.length <= 5}>
       <div className="space-y-2">
         {sortedConditions.map((cond: any, index: number) => {
+          const isNeutral = getCrossplaneConditionTone(resource, cond) === 'neutral'
           const isTrue = cond.status === 'True'
           const isFalse = cond.status === 'False'
           const isWarningType = ['Degraded', 'Warning', 'ScalingLimited'].includes(cond.type)
@@ -349,7 +355,8 @@ function GenericConditionsSection({ conditions }: { conditions: any[] }) {
 
           // Determine icon color based on condition semantics
           let iconColor = 'text-yellow-400'
-          if (isTrue && isPositiveType) iconColor = 'text-green-400'
+          if (isNeutral) iconColor = 'text-theme-text-tertiary'
+          else if (isTrue && isPositiveType) iconColor = 'text-green-400'
           else if (isTrue && isWarningType) iconColor = 'text-yellow-400'
           else if (isTrue) iconColor = 'text-green-400'
           else if (isFalse && isPositiveType) iconColor = 'text-red-400'
@@ -358,7 +365,8 @@ function GenericConditionsSection({ conditions }: { conditions: any[] }) {
           return (
             <div key={`${cond.type}-${index}`} className="flex items-start gap-2 text-sm">
               <span className={clsx('w-5 h-5 rounded-full flex items-center justify-center shrink-0 mt-0.5', iconColor)}>
-                {isTrue && isPositiveType ? <CheckCircle className="w-4 h-4" /> :
+                {isNeutral ? <Minus className="w-4 h-4" /> :
+                 isTrue && isPositiveType ? <CheckCircle className="w-4 h-4" /> :
                  isTrue && isWarningType ? <AlertTriangle className="w-4 h-4" /> :
                  isTrue ? <CheckCircle className="w-4 h-4" /> :
                  isFalse && isPositiveType ? <XCircle className="w-4 h-4" /> :
@@ -370,7 +378,7 @@ function GenericConditionsSection({ conditions }: { conditions: any[] }) {
                   <span className="text-theme-text-primary font-medium">{cond.type}</span>
                   <span className={clsx(
                     'badge-sm',
-                    isTrue ? 'bg-theme-elevated text-theme-text-secondary' : 'status-red'
+                    isTrue || isNeutral ? 'bg-theme-elevated text-theme-text-secondary' : 'status-red'
                   )}>
                     {cond.status}
                   </span>

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

@@ -1,4 +1,4 @@
-import { Box, Settings, Cloud, ScrollText, Pause, Layers } from 'lucide-react'
+import { Box, Settings, Cloud, ScrollText, Layers } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { CodeViewer } from '../../ui/CodeViewer'
 import {
@@ -8,9 +8,10 @@ import {
   getExternalName,
   getManagementPolicies,
   getDeletionPolicy,
-  isCrossplanePaused,
+  getCrossplaneConditionTone,
   getComposingXRRef,
 } from '../resource-utils-crossplane'
+import { CrossplanePauseNotice } from './CrossplanePauseContext'
 import { kindToPluralWithGroup } from '../../../utils/navigation'
 
 interface ManagedResourceRendererProps {
@@ -34,7 +35,6 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
   const deletionPolicy = getDeletionPolicy(data)
   const apiGroup = extractApiGroup(data?.apiVersion)
   const namespace = data?.metadata?.namespace || ''
-  const paused = isCrossplanePaused(data)
   const composingXR = getComposingXRRef(data)
 
   const forProvider = data?.spec?.forProvider
@@ -45,14 +45,7 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
 
   return (
     <>
-      {paused && (
-        <AlertBanner
-          variant="warning"
-          icon={Pause}
-          title="Reconciliation paused"
-          message="The crossplane.io/paused annotation is set. The provider will not reconcile this resource until the annotation is removed."
-        />
-      )}
+      <CrossplanePauseNotice data={data} />
 
       {alertVariant && statusReason && !operationalIssuesShown && (
         <AlertBanner
@@ -126,7 +119,7 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
         </Section>
       )}
 
-      <ConditionsSection conditions={data?.status?.conditions} />
+      <ConditionsSection conditions={data?.status?.conditions} getConditionTone={condition => getCrossplaneConditionTone(data, condition)} />
     </>
   )
 }

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

@@ -0,0 +1,73 @@
+import { useMemo, useState } from 'react'
+import { Badge } from '../../ui/Badge'
+import { healthToSeverity } from '../../../utils/badge-colors'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { getCollectorPipelines, getOpenTelemetryCollectorStatus, getOpenTelemetryInstrumentationStatus } from '../resource-utils-opentelemetry'
+
+export function OpenTelemetryCollectorRenderer({ data }: { data: any }) {
+  const state = getOpenTelemetryCollectorStatus(data)
+  const preview = useMemo(() => getCollectorPipelines(data), [data])
+  const [showAll, setShowAll] = useState(false)
+  const ready = data.status?.conditions?.find((c: any) => c.type === 'Ready')
+  const components = (names: string[], separator = ', ') => names.slice(0, 10).map(name => `${name}${preview.connectors.includes(name) ? ' (connector)' : ''}`).join(separator) + (names.length > 10 ? `; ${names.length - 10} more in YAML` : '') || 'None'
+  return <>
+    <Section title="Collector" defaultExpanded>
+      <PropertyList>
+        <Property label="Reconciliation" value={<Badge severity={healthToSeverity(state.level)}>{state.text}</Badge>} />
+        <Property label="Mode" value={data.spec?.mode} />
+        <Property label="Management" value={data.spec?.managementState} />
+        <Property label={data.spec?.mode === 'daemonset' ? 'Reported ready / scheduled Pods' : 'Reported ready / observed Pods'} value={data.status?.scale?.statusReplicas} />
+        <Property label="Version" value={data.status?.version} />
+        {data.status?.image && <Property label="Image" value={<span className="break-all">{data.status.image}</span>} />}
+      </PropertyList>
+      <p className="mt-2 text-xs text-theme-text-tertiary">Reconciled means the operator applied its configuration. Pod counts are its last reported snapshot. Inspect owned workloads for current readiness; neither proves telemetry delivery.</p>
+      {state.text === 'Status stale' && <p className="mt-2 text-sm text-theme-text-secondary">The reported reconciliation describes an earlier configuration generation.</p>}
+      {ready?.message && <p className="mt-2 whitespace-pre-wrap break-words text-sm text-theme-text-secondary">{ready.message}</p>}
+    </Section>
+    <Section title={preview.error ? 'Configured Pipelines' : `Configured Pipelines (${preview.pipelines.length})`} defaultExpanded>
+      {preview.error ? <p className="text-sm text-theme-text-secondary">{preview.error}</p> : preview.pipelines.length === 0 ? <p className="text-sm text-theme-text-tertiary">No pipelines are declared in this configuration.</p> : <>
+        <div className="space-y-3">
+          {(showAll ? preview.pipelines : preview.pipelines.slice(0, 5)).map(pipeline => <div key={pipeline.name} className="card-inner min-w-0 break-words">
+            <div className="mb-2 text-sm font-medium text-theme-text-primary">{pipeline.name}</div>
+            <PropertyList>
+              <Property label="Receivers" value={components(pipeline.receivers)} />
+              <Property label="Processors" value={components(pipeline.processors, ' → ')} />
+              <Property label="Exporters" value={components(pipeline.exporters)} />
+            </PropertyList>
+          </div>)}
+        </div>
+        {preview.pipelines.length > 5 && <button type="button" className="mt-2 text-sm text-accent-text hover:underline" onClick={() => setShowAll(!showAll)}>{showAll ? 'Show fewer pipelines' : `Show all ${preview.pipelines.length} pipelines`}</button>}
+        <p className="mt-2 text-xs text-theme-text-tertiary">Declared component names, not observed data flow. Connectors pass data between pipelines within the collector.</p>
+      </>}
+    </Section>
+    <ConditionsSection conditions={data.status?.conditions} getConditionTone={condition => ['Status stale', 'Unmanaged'].includes(state.text) ? 'unknown' : condition.type === 'Ready' && condition.status === 'False' ? condition.reason === 'StatusUpdateFailed' ? 'unknown' : 'fail' : 'neutral'} />
+  </>
+}
+
+export function OpenTelemetryInstrumentationRenderer({ data }: { data: any }) {
+  const spec = data.spec ?? {}
+  const state = getOpenTelemetryInstrumentationStatus(data)
+  const blocked = Object.keys(data.status?.upgradeBlockedVersions ?? {})
+  const runtimeImages = ['java', 'nodejs', 'python', 'dotnet', 'go', 'apacheHttpd', 'nginx', 'php', 'ruby'].filter(language => spec[language]?.image)
+  return <>
+    <Section title="Auto-instrumentation Configuration" defaultExpanded>
+      <PropertyList>
+        <Property label="Configuration" value={<Badge severity={healthToSeverity(state.level)}>{state.text}</Badge>} />
+        {spec.exporter?.endpoint && <Property label="OTLP endpoint" value={<span className="break-all">{spec.exporter.endpoint}</span>} />}
+        <Property label="Propagators" value={spec.propagators?.join(', ')} />
+        <Property label="Sampler" value={spec.sampler?.type} />
+        <Property label="Sampler argument" value={spec.sampler?.argument} />
+        {blocked.length > 0 && <Property label="Blocked image upgrades" value={blocked.join(', ')} />}
+      </PropertyList>
+      <p className="mt-2 text-xs text-theme-text-tertiary">These settings configure injection into annotated workloads. This resource does not report which Pods were injected or whether telemetry reaches the endpoint.</p>
+      {blocked.length > 0 && <p className="mt-2 text-sm text-theme-text-secondary">The operator could not automatically upgrade the listed runtime images. Inspect status in YAML and the operator logs before choosing a supported image.</p>}
+    </Section>
+    {blocked.length > 0 && <Section title="Blocked Image Upgrades" defaultExpanded>
+      <PropertyList>{blocked.map(language => <Property key={language} label={language} value={<span className="whitespace-pre-wrap break-words">{String(data.status.upgradeBlockedVersions[language]).slice(0, 1000)}{String(data.status.upgradeBlockedVersions[language]).length > 1000 ? '… Inspect YAML for the full explanation.' : ''}</span>} />)}</PropertyList>
+    </Section>}
+    {/* Runtime image defaults are secondary to endpoint/sampler and upgrade failures. */}
+    {runtimeImages.length > 0 && <Section title="Runtime Images" defaultExpanded={false}><PropertyList>
+      {runtimeImages.map(language => <Property key={language} label={language} value={<span className="break-all">{spec[language].image}</span>} />)}
+    </PropertyList></Section>}
+  </>
+}

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

@@ -21,6 +21,70 @@ const pod = {
   status: { phase: 'Running' },
 }
 
+describe('PodRenderer completed readiness conditions', () => {
+  const completionConditions = [
+    { type: 'PodReadyToStartContainers', status: 'False' },
+    { type: 'Initialized', status: 'True', reason: 'PodCompleted' },
+    { type: 'Ready', status: 'False', reason: 'PodCompleted' },
+    { type: 'ContainersReady', status: 'False', reason: 'PodCompleted' },
+    { type: 'PodScheduled', status: 'True' },
+  ]
+  const renderConditions = (phase: string | undefined, conditions = completionConditions) => renderToString(
+    <PodRenderer
+      data={{ ...pod, status: { phase, conditions } }}
+      onCopy={() => undefined}
+      copied={null}
+    />,
+  )
+
+  it('keeps completed readiness observations visible without counting them as failing', () => {
+    const html = renderConditions('Succeeded')
+
+    expect(html).toContain('Conditions (5)')
+    expect(html).not.toContain('failing')
+    expect(html).toContain('PodReadyToStartContainers')
+    expect(html).toContain('ContainersReady')
+    expect(html).toContain('PodCompleted')
+  })
+
+  it('uses successful completion even when readiness reasons are stale or absent', () => {
+    const html = renderConditions('Succeeded', [
+      { type: 'PodReadyToStartContainers', status: 'False' },
+      { type: 'Ready', status: 'False', reason: 'ContainersNotReady' },
+      { type: 'ContainersReady', status: 'False' },
+    ])
+
+    expect(html).toContain('Conditions (3)')
+    expect(html).not.toContain('failing')
+    expect(html).toContain('ContainersNotReady')
+  })
+
+  it.each(['Running', 'Failed', undefined])('retains readiness failures when phase is %s', (phase) => {
+    const html = renderConditions(phase, [
+      { type: 'PodReadyToStartContainers', status: 'False' },
+      { type: 'Ready', status: 'False', reason: 'PodFailed' },
+      { type: 'ContainersReady', status: 'False' },
+    ])
+
+    expect(html).toContain('Conditions (3) · 3 failing')
+  })
+
+  it('does not let a completion reason hide readiness failures on a failed Pod', () => {
+    expect(renderConditions('Failed')).toContain('Conditions (5) · 3 failing')
+  })
+
+  it('retains unrelated false conditions after successful completion', () => {
+    const html = renderConditions('Succeeded', [
+      ...completionConditions,
+      { type: 'example.com/controller-ready', status: 'False', reason: 'ControllerFailed' },
+    ])
+
+    expect(html).toContain('Conditions (6) · 1 failing')
+    expect(html).toContain('example.com/controller-ready')
+    expect(html).toContain('ControllerFailed')
+  })
+})
+
 describe('PodRenderer envFrom expansion', () => {
   it('keeps same-name ConfigMap and Secret values separate', () => {
     const resolvedEnvFrom: ResolvedEnvFrom = {
@@ -482,3 +546,54 @@ it('shows reported running-but-unready nginx readiness as degraded', () => {
   expect(html).toMatch(/bg-amber-100[^>]*>Not Ready</)
   expect(html).toMatch(/>running</)
 })
+
+describe('finished Pod resource usage',()=>{
+ it.each(['Succeeded','Failed'])('explains ended live usage for %s without cluster repair advice',phase=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase}}} onCopy={()=>{}} copied={null} metricsUnavailable metricsHistory={{containers:[],metricsUnavailableReason:'not found'}} />)
+  expect(html).toContain('Live resource usage has ended for this Pod')
+  expect(html).toContain('No recorded usage is available.')
+  expect(html).not.toContain('Metrics collection error:')
+  expect(html).not.toContain('Radar cannot read metrics.k8s.io')
+  expect(html).not.toContain('No usage yet: this Pod is not running')
+ })
+ it('keeps a genuine collector error qualified as current on a finished Pod',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Succeeded'}}} onCopy={()=>{}} copied={null} metricsHistory={{containers:[],collectionError:'forbidden: list pods.metrics.k8s.io'}} />)
+  expect(html).toContain('Current cluster metrics collection error:')
+  expect(html).toContain('forbidden: list pods.metrics.k8s.io')
+  expect(html).toContain('Live resource usage has ended for this Pod')
+ })
+ it('keeps recorded history and hides cached live usage after completion',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Succeeded'}}} onCopy={()=>{}} copied={null}
+   metrics={{timestamp:'2026-10-25T12:00:00Z',containers:[{name:'cached-live',usage:{cpu:'100m',memory:'1Mi'}}]}}
+   metricsHistory={{containers:[{name:'recorded-history',dataPoints:[{timestamp:'2026-10-25T11:59:00Z',cpu:100,memory:1024}]}]}} />)
+  expect(html).toContain('recorded-history')
+  expect(html).not.toContain('cached-live')
+  expect(html).not.toContain('Last updated:')
+ })
+ it('distinguishes loading from a loaded empty terminal history',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Succeeded'}}} onCopy={()=>{}} copied={null} metricsHistoryLoading />)
+  expect(html).toContain('Loading recorded usage...')
+  expect(html).not.toContain('No recorded usage is available.')
+ })
+ it('shows a failed terminal history fetch without claiming empty history',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Failed'}}} onCopy={()=>{}} copied={null} metricsHistoryError={new Error('Metrics history not available')} />)
+  expect(html).toContain('Recorded usage could not be loaded')
+  expect(html).toContain('Metrics history not available')
+  expect(html).not.toContain('No recorded usage is available.')
+ })
+ it('retains cached history when its refresh fails',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Succeeded'}}} onCopy={()=>{}} copied={null}
+   metricsHistory={{containers:[{name:'recorded-history',dataPoints:[{timestamp:'2026-10-25T11:59:00Z',cpu:100,memory:1024}]}]}}
+   metricsHistoryError={new Error('Network request failed')} />)
+  expect(html).toContain('Recorded usage could not be refreshed')
+  expect(html).toContain('recorded-history')
+  expect(html).not.toContain('No recorded usage is available.')
+ })
+
+ it('keeps usage absent when the host wires no metrics state',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Succeeded'}}} onCopy={()=>{}} copied={null} />)
+  expect(html).not.toContain('Resource Usage')
+  expect(html).not.toContain('Live resource usage has ended')
+ })
+
+})

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

@@ -87,6 +87,8 @@ interface PodRendererProps {
   // Metrics data injection
   metrics?: { containers?: any[]; timestamp?: string }
   metricsHistory?: { metricsAPIReachable?: boolean; containers?: any[]; collectionError?: string; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
+  metricsHistoryLoading?: boolean
+  metricsHistoryError?: Error | null
   metricsUnavailable?: boolean
   hideMetricsServer?: boolean
   // Filesystem browser render props
@@ -286,6 +288,8 @@ export function PodRenderer({
   renderPortAction,
   metrics,
   metricsHistory,
+  metricsHistoryLoading,
+  metricsHistoryError,
   metricsUnavailable,
   hideMetricsServer,
   renderImageBrowser,
@@ -320,6 +324,7 @@ export function PodRenderer({
   const namespace = data.metadata?.namespace
   const podName = data.metadata?.name
   const isRunning = data.status?.phase === 'Running'
+  const isTerminal = data.status?.phase === 'Succeeded' || data.status?.phase === 'Failed'
 
   // Check for problems. Suppressed when the detail already shows the dedicated
   // Operational Issues section (the Issues pipeline covers the same pod failures,
@@ -329,9 +334,10 @@ export function PodRenderer({
   const hasProblems = podProblems.length > 0 && !operationalIssuesShown
   const notRunning = data.status?.phase === 'Pending' && ![...containerStatuses, ...initContainerStatuses].some((s: any) => s.state?.running)
   const noUsageYet = notRunning && metricsHistory?.metricsAPIReachable === true && !metricsHistory.collectionError && !metricsHistory.containers?.length && !metrics?.containers?.length
-  const showMetricsUnavailable = !!metricsUnavailable && !metricsHistory?.collectionError && !noUsageYet
+  const showMetricsUnavailable = !isTerminal && !!metricsUnavailable && !metricsHistory?.collectionError && !noUsageYet
   const hasMetricsHistory = !!metricsHistory?.containers?.length
-  const currentMetrics = metricsUnavailable ? undefined : metrics
+  const showTerminalUsage = isTerminal && (metricsHistory !== undefined || metricsHistoryLoading || !!metricsHistoryError || !!metrics || metricsUnavailable)
+  const currentMetrics = isTerminal || metricsUnavailable ? undefined : metrics
 
   // Image filesystem modal state
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
@@ -872,15 +878,30 @@ export function PodRenderer({
       )}
 
       {/* Resource Usage (from metrics-server) — hidden when Prometheus has CPU/memory data */}
-      {!hideMetricsServer && !!(currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable || noUsageYet) && (
+      {!hideMetricsServer && !!(showTerminalUsage || currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable || noUsageYet) && (
         <Section title="Resource Usage" icon={Activity} defaultExpanded>
+          {isTerminal && (
+            <div className="mb-3 text-sm text-theme-text-tertiary">
+              Live resource usage has ended for this Pod.{metricsHistory && !hasMetricsHistory && !metricsHistoryLoading && !metricsHistoryError && ' No recorded usage is available.'}
+            </div>
+          )}
+          {isTerminal && metricsHistoryLoading && (
+            <p className="mb-3 text-sm text-theme-text-tertiary">Loading recorded usage...</p>
+          )}
+          {isTerminal && metricsHistoryError && (
+            <AlertBanner
+              variant="warning"
+              title={metricsHistory ? 'Recorded usage could not be refreshed' : 'Recorded usage could not be loaded'}
+              message={metricsHistoryError.message}
+            />
+          )}
           {noUsageYet && <MetricsUnavailableNotice noUsageYet />}
           {showMetricsUnavailable && (
             <MetricsUnavailableNotice rawError={metricsHistory?.metricsUnavailableReason} diagnosis={metricsHistory?.metricsUnavailableDiagnosis} />
           )}
           {metricsHistory?.collectionError && (
             <div className="mb-3 rounded-lg border border-yellow-500/30 bg-yellow-500/5 px-3 py-2 text-xs text-yellow-400">
-              <span className="font-medium">Metrics collection error:</span>{' '}
+              <span className="font-medium">{isTerminal ? 'Current cluster metrics collection error:' : 'Metrics collection error:'}</span>{' '}
               <span className="break-all">{metricsHistory.collectionError}</span>
             </div>
           )}
@@ -970,14 +991,16 @@ export function PodRenderer({
         </Section>
       )}
 
-      {/* Conditions. A completed pod's Ready/ContainersReady flip to False with
-          reason "PodCompleted" — that's expected for a finished pod, not a failure,
-          so tone it neutral (gray) instead of red. Gated on the PodCompleted reason
-          so a genuinely not-ready pod (any other reason) still reads red. */}
+      {/* Sandbox teardown and lost serving readiness are expected after success;
+          custom conditions retain their own meaning. */}
       <ConditionsSection
         conditions={data.status?.conditions}
         getConditionTone={(cond) =>
-          cond?.status === 'False' && cond?.reason === 'PodCompleted' ? 'unknown' : undefined
+          data.status?.phase === 'Succeeded'
+            && cond?.status === 'False'
+            && ['Ready', 'ContainersReady', 'PodReadyToStartContainers'].includes(cond?.type)
+            ? 'unknown'
+            : undefined
         }
       />
 

package/src/components/resources/renderers/crossplane-cells.tsx

@@ -21,7 +21,7 @@ import {
   getXRDKind,
 } from '../resource-utils-crossplane'
 
-function StatusBadge({ resource, getStatus }: { resource: any; getStatus: (r: any) => { text: string; color: string } }) {
+export function CrossplaneStatusCell({ resource, getStatus = getCrossplaneStatus }: { resource: any; getStatus?: (r: any) => { text: string; color: string } }) {
   const status = getStatus(resource)
   const reason = getCrossplaneStatusReason(resource)
   const badge = (
@@ -35,7 +35,7 @@ function StatusBadge({ resource, getStatus }: { resource: any; getStatus: (r: an
 export function ManagedResourceCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status':
-      return <StatusBadge resource={resource} getStatus={getCrossplaneStatus} />
+      return <CrossplaneStatusCell resource={resource} getStatus={getCrossplaneStatus} />
     case 'external': {
       const name = getExternalName(resource)
       if (!name) return <span className="text-sm text-theme-text-tertiary">-</span>
@@ -60,7 +60,7 @@ export function ManagedResourceCell({ resource, column }: { resource: any; colum
 export function CompositeResourceCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status':
-      return <StatusBadge resource={resource} getStatus={getCrossplaneStatus} />
+      return <CrossplaneStatusCell resource={resource} getStatus={getCrossplaneStatus} />
     case 'composition': {
       const ref = getCompositionRef(resource)
       if (!ref) return <span className="text-sm text-theme-text-tertiary">-</span>
@@ -82,7 +82,7 @@ export function CompositeResourceCell({ resource, column }: { resource: any; col
 export function CrossplaneProviderCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status':
-      return <StatusBadge resource={resource} getStatus={getProviderStatus} />
+      return <CrossplaneStatusCell resource={resource} getStatus={getProviderStatus} />
     case 'package': {
       const pkg = getProviderPackage(resource)
       return (
@@ -108,7 +108,7 @@ export function CrossplaneProviderCell({ resource, column }: { resource: any; co
 export function CrossplaneProviderConfigCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status':
-      return <StatusBadge resource={resource} getStatus={getProviderConfigStatus} />
+      return <CrossplaneStatusCell resource={resource} getStatus={getProviderConfigStatus} />
     case 'credentials':
       return <span className="text-sm text-theme-text-secondary">{getProviderConfigCredentialsSource(resource)}</span>
     default:

package/src/components/resources/renderers/index.ts

@@ -192,3 +192,6 @@ export { RayServiceRenderer } from './RayServiceRenderer'
 export { RayClusterRenderer } from './RayClusterRenderer'
 
 export { RayJobRenderer } from './RayJobRenderer'
+
+export { OpenTelemetryCollectorRenderer, OpenTelemetryInstrumentationRenderer } from './OpenTelemetryRenderers'
+export { FlaggerCanaryRenderer, FlaggerMetricTemplateRenderer } from './FlaggerRenderers'

package/src/components/resources/resource-utils-crossplane.test.ts

@@ -675,3 +675,48 @@ describe('isCrossplanePaused', () => {
 
 // Pluralization moved to the shared kindToPlural in utils/navigation.ts
 // (discovery-aware, handles provider-defined irregular plurals).
+
+describe('Crossplane pause and independent status evidence', () => {
+  function paused(conditions: any[], annotation = 'true') {
+    return {
+      metadata: { generation: 9, annotations: { 'crossplane.io/paused': annotation } },
+      spec: { providerConfigRef: { name: 'default' } },
+      status: { conditions },
+    }
+  }
+  const pause = { type: 'Synced', status: 'False', reason: 'ReconcilePaused', message: 'pause observation', observedGeneration: 1 }
+
+  it('keeps acknowledged pause neutral with recorded availability despite generation changes', () => {
+    const resource = paused([{ type: 'Ready', status: 'True' }, pause])
+    expect(getCrossplaneStatus(resource)).toMatchObject({ text: 'Ready (reported)', level: 'neutral' })
+    expect(getCrossplaneStatusReason(resource)).toBeNull()
+  })
+
+  it.each([undefined, 'Unknown'])('does not invent provisioning or readiness when acknowledged pause has Ready=%s', status => {
+    const resource = paused([...(status ? [{ type: 'Ready', status }] : []), pause])
+    expect(getCrossplaneStatus(resource)).toMatchObject({ text: 'Readiness unknown', level: 'neutral' })
+  })
+
+  it('preserves the independent Ready failure and its message over the pause observation', () => {
+    const resource = paused([pause, { type: 'Ready', status: 'False', reason: 'Unavailable', message: 'external API access denied' }])
+    expect(getCrossplaneStatus(resource)).toMatchObject({ text: 'Unavailable', level: 'unhealthy' })
+    expect(getCrossplaneStatusReason(resource)).toBe('external API access denied')
+  })
+
+  it('does not mask a reconcile error with requested pause', () => {
+    const resource = paused([{ type: 'Ready', status: 'True' }, { ...pause, reason: 'ReconcileError', message: 'credentials rejected' }])
+    expect(getCrossplaneStatus(resource)).toMatchObject({ text: 'Out of sync', level: 'alert' })
+    expect(getCrossplaneStatusReason(resource)).toBe('credentials rejected')
+  })
+
+  it('keeps uncorroborated controller pause as an alert without inventing a failed resume', () => {
+    const resource = paused([pause], 'false')
+    expect(getCrossplaneStatus(resource)).toMatchObject({ text: 'ReconcilePaused', level: 'alert' })
+    expect(getCrossplaneStatusReason(resource)).toBe('pause observation')
+  })
+
+  it('preserves terminating over pause and recorded readiness', () => {
+    const resource = paused([{ type: 'Ready', status: 'True' }, pause])
+    expect(getCrossplaneStatus({ ...resource, metadata: { ...resource.metadata, deletionTimestamp: '2026-10-26T08:00:00Z' } })).toMatchObject({ text: 'Terminating', level: 'degraded' })
+  })
+})