@skyhook-io/k8s-ui 1.8.6 → 1.8.8

package/src/components/resources/cron-to-human.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { cronToHuman } from './resource-utils'
+
+describe('cronToHuman', () => {
+  it.each([
+    // The reported bug: step-minute with a wildcard hour was caught by the
+    // "Every hour at :MM" branch before the interval branch.
+    ['*/5 * * * *', 'Every 5 minutes'],
+    ['*/15 * * * *', 'Every 15 minutes'],
+    ['*/30 * * * *', 'Every 30 minutes'],
+    ['*/1 * * * *', 'Every minute'],
+    // Literal minute must still read as "Every hour at :MM" (not regressed).
+    ['30 * * * *', 'Every hour at :30'],
+    ['0 * * * *', 'Every hour at :00'],
+    ['5 * * * *', 'Every hour at :05'],
+    // Every minute.
+    ['* * * * *', 'Every minute'],
+    // Step-hour (the #952 fix) must still work.
+    ['0 */6 * * *', 'Every 6 hours'],
+    ['0 */1 * * *', 'Every hour'],
+    // Daily patterns.
+    ['0 0 * * *', 'Daily at midnight'],
+    ['0 9 * * *', 'Daily at 9:00'],
+    // Weekdays — only when hour:minute are literal.
+    ['0 9 * * 1-5', 'Weekdays at 9:00'],
+    ['0 9 * * MON-FRI', 'Weekdays at 9:00'],
+    ['30 14 * * 1-5', 'Weekdays at 14:30'],
+    // Constrained step-minute must NOT claim an unconstrained interval — these run
+    // only in a window, so we fall back to the raw cron rather than mislead.
+    ['*/5 9 * * *', '*/5 9 * * *'],
+    ['*/5 * * * 1-5', '*/5 * * * 1-5'],
+    ['*/5 9 * * 1-5', '*/5 9 * * 1-5'],
+    ['*/1 9 * * *', '*/1 9 * * *'],
+    // Falls back to the raw expression for shapes we don't humanize.
+    ['15 14 1 * *', '15 14 1 * *'],
+    ['*/5', '*/5'],
+    ['', '-'],
+  ])('humanizes %s -> %s', (cron, expected) => {
+    expect(cronToHuman(cron)).toBe(expected)
+  })
+})

package/src/components/resources/get-pod-problems.test.ts

@@ -124,4 +124,22 @@ describe('getPodProblems', () => {
       }),
     ).not.toContainEqual(expect.objectContaining({ message: 'Sandbox Startup Stalled' }))
   })
+
+  it('does not flag a completing Job pod (Running, container exited 0, Ready=false) as Not Ready', () => {
+    expect(
+      getPodProblems({
+        status: {
+          phase: 'Running',
+          containerStatuses: [
+            {
+              name: 'job',
+              ready: false,
+              restartCount: 0,
+              state: { terminated: { reason: 'Completed', exitCode: 0 } },
+            },
+          ],
+        },
+      }),
+    ).not.toContainEqual(expect.objectContaining({ message: 'Not Ready' }))
+  })
 })

package/src/components/resources/health-golden.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+import {
+  getPodStatus,
+  getWorkloadStatus,
+  getJobStatus,
+  getCronJobStatus,
+  getPVCStatus,
+  type HealthLevel,
+} from './resource-utils'
+
+// Cross-language health contract. This loads the SAME fixture as the Go test
+// (pkg/health/golden_crosslang_test.go) and asserts the TS table classifiers
+// produce the level pkg/health recorded. pkg/health is the source of truth; this
+// is the anti-drift gate that keeps the two implementations from diverging.
+//
+// If this fails after a backend health change, the TS classifier in
+// resource-utils.ts must be updated to match — not the other way round.
+
+interface GoldenVector {
+  name: string
+  kind: string
+  level: HealthLevel
+  object: any
+}
+
+const here = dirname(fileURLToPath(import.meta.url))
+// src/components/resources -> repo root is five levels up, then pkg/health/testdata.
+const fixturePath = resolve(here, '../../../../../pkg/health/testdata/golden_vectors.json')
+const vectors: GoldenVector[] = JSON.parse(readFileSync(fixturePath, 'utf8')).vectors
+
+// Map a fixture kind onto the TS classifier that backs its table badge.
+function classify(kind: string, object: any): HealthLevel {
+  switch (kind) {
+    case 'Pod':
+      return getPodStatus(object).level
+    case 'Deployment':
+      return getWorkloadStatus(object, 'deployments').level
+    case 'StatefulSet':
+      return getWorkloadStatus(object, 'statefulsets').level
+    case 'DaemonSet':
+      return getWorkloadStatus(object, 'daemonsets').level
+    case 'Job':
+      return getJobStatus(object).level
+    case 'CronJob':
+      return getCronJobStatus(object).level
+    case 'PersistentVolumeClaim':
+      return getPVCStatus(object).level
+    default:
+      throw new Error(`golden vector kind "${kind}" has no TS classifier mapping`)
+  }
+}
+
+describe('health golden vectors (cross-language contract with pkg/health)', () => {
+  it('loaded a non-empty fixture shared with the Go test', () => {
+    expect(vectors.length).toBeGreaterThan(0)
+  })
+
+  for (const v of vectors) {
+    it(`${v.kind}: ${v.name}`, () => {
+      expect(classify(v.kind, v.object)).toBe(v.level)
+    })
+  }
+})

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

@@ -25,8 +25,12 @@ function getJobProblems(data: any): string[] {
     }
   }
 
-  // Check for pod failures without terminal condition yet
-  if (!failedCondition && status.failed > 0) {
+  // Check for pod failures without terminal condition yet. A Job that already
+  // completed successfully (Complete condition) keeps its earlier failed pod
+  // attempts in status.failed — those are retries, not a problem — so don't flag
+  // them, or the drawer would read red while the table badge is calm neutral.
+  const completeCondition = conditions.find((c: any) => c.type === 'Complete' && c.status === 'True')
+  if (!failedCondition && !completeCondition && status.failed > 0) {
     const remaining = (spec.backoffLimit ?? 6) - status.failed
     if (remaining > 0) {
       problems.push(`${status.failed} pod(s) failed — ${remaining} retries remaining`)

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

@@ -62,9 +62,9 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
       )}
       {isPaused && (
         <AlertBanner
-          variant="warning"
+          variant="info"
           title="Scaling Paused"
-          message="Autoscaling is paused via annotation."
+          message="Autoscaling is paused via annotation. This is intentional — resume by removing the paused annotation."
         />
       )}
 

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

@@ -26,16 +26,12 @@ function formatStorage(value: string | undefined): string {
   return formatMemory(value)
 }
 
-// Extract problems from node status and spec
+// Extract genuine problems from node status. Cordoned (unschedulable) is
+// deliberately NOT included here — it's an intentional operator action
+// (cordon/drain), surfaced separately as a calm advisory, not a red error.
 function getNodeProblems(data: any): string[] {
   const problems: string[] = []
   const conditions = data.status?.conditions || []
-  const spec = data.spec || {}
-
-  // Check if unschedulable
-  if (spec.unschedulable) {
-    problems.push('Node is cordoned (unschedulable)')
-  }
 
   for (const cond of conditions) {
     // NotReady is a problem when status is not True
@@ -77,6 +73,7 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
   // Check for problems
   const problems = getNodeProblems(data)
   const hasProblems = problems.length > 0
+  const isCordoned = !!spec.unschedulable
 
   // Extract platform info from labels
   const instanceType = labels['node.kubernetes.io/instance-type']
@@ -88,11 +85,23 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
 
   return (
     <>
-      {/* Problems alert - shown at top when there are issues */}
+      {/* Problems alert - shown at top when there are genuine issues */}
       {hasProblems && (
         <AlertBanner variant="error" title="Issues Detected" items={problems} />
       )}
 
+      {/* Cordoned is intentional but consequential — it removes scheduling
+          capacity and a forgotten cordon strands a node. So it's a warning (amber),
+          matching the node table badge + the Cordoned audit check — NOT the calm
+          sky of a no-op intentional state (suspended/idle), and not a red error. */}
+      {isCordoned && (
+        <AlertBanner
+          variant="warning"
+          title="Cordoned (unschedulable)"
+          message="New pods won't be scheduled here. Uncordon to resume scheduling."
+        />
+      )}
+
       {/* Node Info */}
       <Section title="Node Info" icon={Server}>
         <PropertyList>

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

@@ -28,10 +28,10 @@ export function PVCRenderer({ data, onNavigate, extraSections }: PVCRendererProp
   const annotations = data.metadata?.annotations || {}
   const phase = status.phase
 
-  // Problem detection
+  // Lost is a genuine failure (bound volume disappeared). Pending is a normal
+  // lifecycle state (provisioning / WaitForFirstConsumer), surfaced calmly below.
   const isLost = phase === 'Lost'
   const isPending = phase === 'Pending'
-  const hasProblems = isLost || isPending
 
   // Provisioner info from annotations
   const provisioner = annotations['volume.kubernetes.io/storage-provisioner']
@@ -42,7 +42,7 @@ export function PVCRenderer({ data, onNavigate, extraSections }: PVCRendererProp
   return (
     <>
       {/* Problem alerts */}
-      {hasProblems && isLost && (
+      {isLost && (
         <AlertBanner
           variant="error"
           title="Issues Detected"
@@ -50,11 +50,11 @@ export function PVCRenderer({ data, onNavigate, extraSections }: PVCRendererProp
         />
       )}
 
-      {hasProblems && isPending && (
+      {isPending && (
         <AlertBanner
-          variant="warning"
-          title="Issues Detected"
-          message="PVC is waiting to be bound to a volume"
+          variant="info"
+          title="Pending — awaiting binding"
+          message="Not yet bound to a volume. This is normal while provisioning, and expected indefinitely for a WaitForFirstConsumer StorageClass until a Pod that mounts this claim is scheduled."
         />
       )}
 

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

@@ -1,7 +1,7 @@
 import { useState, type ReactNode, type JSX } from 'react'
 import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen, List, Eye, EyeOff, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR, getDefaultContainerName } from '../resource-utils'
 import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
 import {
@@ -274,9 +274,12 @@ export function PodRenderer({
   const podName = data.metadata?.name
   const isRunning = data.status?.phase === 'Running'
 
-  // Check for problems
+  // Check for problems. Suppressed when the detail already shows the dedicated
+  // Operational Issues section (the Issues pipeline covers the same pod failures,
+  // richer) — avoids showing the same crashloop twice.
+  const operationalIssuesShown = useOperationalIssuesShown()
   const podProblems = getPodProblems(data)
-  const hasProblems = podProblems.length > 0
+  const hasProblems = podProblems.length > 0 && !operationalIssuesShown
 
   // Image filesystem modal state
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
@@ -548,6 +551,10 @@ export function PodRenderer({
             const lastTermination = status?.lastState?.terminated
             const currentWaiting = status?.state?.waiting
             const currentTerminated = status?.state?.terminated
+            // A container that exited 0 (a completed Job pod) is a success, not a
+            // failure — tone its badges/text sky, not red, so the drawer agrees
+            // with the calm "Completed" table badge instead of screaming red.
+            const terminatedOk = currentTerminated?.exitCode === 0
 
             return (
               <div key={container.name} className="card-inner-lg">
@@ -586,14 +593,17 @@ export function PodRenderer({
                     )}
                     <span className={clsx(
                       'badge',
-                      isReady ? SEVERITY_BADGE_BORDERED.success : SEVERITY_BADGE_BORDERED.error
+                      isReady ? SEVERITY_BADGE_BORDERED.success :
+                      terminatedOk ? SEVERITY_BADGE_BORDERED.info :
+                      SEVERITY_BADGE_BORDERED.error
                     )}>
-                      {isReady ? 'Ready' : 'Not Ready'}
+                      {isReady ? 'Ready' : terminatedOk ? 'Completed' : 'Not Ready'}
                     </span>
                     <span className={clsx(
                       'badge',
                       stateKey === 'running' ? SEVERITY_BADGE_BORDERED.success :
                       stateKey === 'waiting' ? SEVERITY_BADGE_BORDERED.warning :
+                      terminatedOk ? SEVERITY_BADGE_BORDERED.info :
                       SEVERITY_BADGE_BORDERED.error
                     )}>
                       {stateKey}
@@ -621,9 +631,10 @@ export function PodRenderer({
                       )}
                     </div>
                   )}
-                  {/* Show current terminated reason */}
+                  {/* Show current terminated reason — sky for a clean exit-0
+                      completion, red only for a genuine failure. */}
                   {currentTerminated?.reason && (
-                    <div className="text-red-400 flex items-center gap-1">
+                    <div className={clsx('flex items-center gap-1', terminatedOk ? 'text-sky-500 dark:text-sky-400' : 'text-red-400')}>
                       <span className="font-medium">Terminated: {currentTerminated.reason}</span>
                       {currentTerminated.exitCode !== undefined && currentTerminated.exitCode !== 0 && (
                         <span className="text-theme-text-tertiary">(exit code {currentTerminated.exitCode})</span>
@@ -795,8 +806,16 @@ export function PodRenderer({
         </Section>
       )}
 
-      {/* Conditions */}
-      <ConditionsSection conditions={data.status?.conditions} />
+      {/* 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. */}
+      <ConditionsSection
+        conditions={data.status?.conditions}
+        getConditionTone={(cond) =>
+          cond?.status === 'False' && cond?.reason === 'PodCompleted' ? 'unknown' : undefined
+        }
+      />
 
       {/* Permissions (via ServiceAccount) — placed below the diagnostic-
        *  signal sections (status, containers, resource usage, conditions)

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

@@ -10,7 +10,11 @@ interface ServiceRendererProps {
   endpointSlices?: any[]
   endpointSlicesLoading?: boolean
   onNavigate?: (ref: ResourceRef) => void
-  renderPortAction?: (props: { namespace: string; serviceName: string; port: number; protocol: string }) => ReactNode
+  renderPortAction?: (props: { namespace: string; serviceName: string; port: number; protocol: string; name?: string; appProtocol?: string }) => ReactNode
+  /** Optional full-width content rendered inside a port's card, below its header
+   *  (e.g. an inline probe panel). Lets a host attach a port-scoped panel in the
+   *  drawer flow rather than as a separate overlay. */
+  renderPortPanel?: (props: { namespace: string; serviceName: string; port: number; protocol: string; name?: string; appProtocol?: string }) => ReactNode
 }
 
 function endpointSliceAddressCount(slice: any): number {
@@ -28,7 +32,7 @@ function endpointSliceReadyClass(ready: number, total: number): string {
   return 'status-unhealthy'
 }
 
-export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpointSlicesLoading, onNavigate, renderPortAction }: ServiceRendererProps) {
+export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpointSlicesLoading, onNavigate, renderPortAction, renderPortPanel }: ServiceRendererProps) {
   const spec = data.spec || {}
   const ports = spec.ports || []
   const lbIngress = data.status?.loadBalancer?.ingress || []
@@ -95,24 +99,34 @@ export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpoint
           <div className="space-y-2">
             {ports.map((port: any, i: number) => (
               <div key={`${port.port}-${port.protocol || 'TCP'}`} className="card-inner text-sm">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex items-baseline gap-x-2 gap-y-0.5 min-w-0 flex-wrap">
                     <span className="text-theme-text-primary font-medium">{port.name || `port-${i + 1}`}</span>
                     <span className="text-xs text-theme-text-tertiary">{port.protocol || 'TCP'}</span>
+                    <span className="text-xs text-theme-text-secondary font-mono">
+                      {port.port}{port.targetPort != null && port.targetPort !== port.port ? ` → ${port.targetPort}` : ''}
+                      {port.nodePort ? ` (NodePort: ${port.nodePort})` : ''}
+                    </span>
                   </div>
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2 shrink-0">
                     {renderPortAction?.({
                       namespace,
                       serviceName,
                       port: port.port,
                       protocol: port.protocol || 'TCP',
+                      name: port.name,
+                      appProtocol: port.appProtocol,
                     })}
                   </div>
                 </div>
-                <div className="text-xs text-theme-text-secondary mt-1">
-                  {port.port}{port.targetPort != null && port.targetPort !== port.port ? ` → ${port.targetPort}` : ''}
-                  {port.nodePort ? ` (NodePort: ${port.nodePort})` : ''}
-                </div>
+                {renderPortPanel?.({
+                  namespace,
+                  serviceName,
+                  port: port.port,
+                  protocol: port.protocol || 'TCP',
+                  name: port.name,
+                  appProtocol: port.appProtocol,
+                })}
               </div>
             ))}
           </div>

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

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Server, ExternalLink, Scale, Minus, Plus, Loader2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink, ResourceRefBadge } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { DialogPortal } from '../../ui/DialogPortal'
 import { Tooltip } from '../../ui/Tooltip'
 import { Badge, type BadgeSeverity } from '../../ui/Badge'
@@ -165,8 +165,11 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
     }
   }, [spec.replicas, scaledTo])
 
-  // Check for problems and progress
-  const problems = getWorkloadProblems(status, spec, kind)
+  // Check for problems and progress. Suppressed when the dedicated Operational
+  // Issues section is shown — it carries the workload's own issues plus its pods'
+  // (richer, with cause/action), so the workload-status problems would duplicate.
+  const operationalIssuesShown = useOperationalIssuesShown()
+  const problems = operationalIssuesShown ? [] : getWorkloadProblems(status, spec, kind)
   const hasProblems = problems.length > 0
   const progressMessage = getWorkloadProgress(status, spec, kind)
 

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

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { getArgoApplicationStatus } from './resource-utils-argo'
+
+describe('getArgoApplicationStatus', () => {
+  // A Suspended Argo app is intentionally paused — neutral (sky), matching the
+  // backend rollup (mapArgoHealth) + the GitOps badge, so it doesn't read amber
+  // on the resource table while reading Idle in Applications.
+  it('maps health Suspended to neutral (sky), not degraded', () => {
+    const badge = getArgoApplicationStatus({ status: { health: { status: 'Suspended' }, sync: { status: 'Synced' } } })
+    expect(badge.level).toBe('neutral')
+    expect(badge.text).toBe('Suspended')
+  })
+
+  it('still maps a healthy synced app to healthy', () => {
+    const badge = getArgoApplicationStatus({ status: { health: { status: 'Healthy' }, sync: { status: 'Synced' } } })
+    expect(badge.level).toBe('healthy')
+  })
+
+  it('still maps a degraded app to unhealthy', () => {
+    const badge = getArgoApplicationStatus({ status: { health: { status: 'Degraded' }, sync: { status: 'Synced' } } })
+    expect(badge.level).toBe('unhealthy')
+  })
+})

package/src/components/resources/resource-utils-argo.ts

@@ -22,7 +22,11 @@ export function getArgoApplicationStatus(app: any): StatusBadge {
   const annotations = app.metadata?.annotations
   const suspendedByRadar = annotations?.['radarhq.io/suspended-prune'] || annotations?.['skyhook.io/suspended-prune']
   if (health === 'Suspended' || (!hasAutomatedSync && suspendedByRadar)) {
-    return { text: 'Suspended', color: healthColors.degraded, level: 'degraded' }
+    // Suspended = an operator deliberately paused this app — intentional, not a
+    // degradation. Neutral (sky), matching the backend rollup (mapArgoHealth) so a
+    // suspended app reads the same Idle tone in Applications, the resource table,
+    // and GitOps instead of amber in some surfaces and sky in others.
+    return { text: 'Suspended', color: healthColors.neutral, level: 'neutral' }
   }
 
   // Operation in progress

package/src/components/resources/resource-utils-keda.ts

@@ -29,7 +29,9 @@ export function getScaledObjectStatus(resource: any): StatusBadge {
     conditions.some((c: any) => c.type === 'Paused' && c.status === 'True')
 
   if (isPaused) {
-    return { text: 'Paused', color: healthColors.degraded, level: 'degraded' }
+    // Paused = operator deliberately froze autoscaling — intentional, sky/neutral
+    // (like Idle), not amber.
+    return { text: 'Paused', color: healthColors.neutral, level: 'neutral' }
   }
 
   // Check Fallback condition
@@ -128,26 +130,28 @@ export function getScaledJobStatus(resource: any): StatusBadge {
   const conditions = resource.status?.conditions || []
 
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
-  if (readyCond?.status === 'True') {
-    return { text: 'Ready', color: healthColors.healthy, level: 'healthy' }
-  }
   // A non-operational scaler (Ready=False) is unhealthy and must take precedence
-  // over the Idle (Active=False) branch below — otherwise a broken-and-idle
-  // ScaledJob hides as benign "Idle". Mirrors getScaledObjectStatus.
+  // over the Idle branch — otherwise a broken-and-idle ScaledJob hides as benign.
   if (readyCond?.status === 'False') {
     return { text: readyCond.reason || 'NotReady', color: healthColors.unhealthy, level: 'unhealthy' }
   }
 
+  // Check Active BEFORE falling back to Ready=True: an operational scaler with no
+  // jobs running (Active=False) is intentionally idle → sky, not the green of a
+  // busy one. (Ready=True first would make Idle unreachable.) Mirrors
+  // getScaledObjectStatus.
   const activeCond = conditions.find((c: any) => c.type === 'Active')
   if (activeCond?.status === 'True') {
     return { text: 'Active', color: healthColors.healthy, level: 'healthy' }
   }
   if (activeCond?.status === 'False') {
-    // Idle is the normal resting state of a scaler with no triggers firing
-    // (like a CronJob waiting for its next run), not a fault.
     return { text: 'Idle', color: healthColors.neutral, level: 'neutral' }
   }
 
+  if (readyCond?.status === 'True') {
+    return { text: 'Ready', color: healthColors.healthy, level: 'healthy' }
+  }
+
   return { text: 'Unknown', color: healthColors.unknown, level: 'unknown' }
 }
 

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

@@ -475,20 +475,23 @@ export function getPodProblems(pod: any): PodProblem[] {
     problems.push({ severity: 'high', message: 'Evicted', detail: podStatusMessage })
   }
 
-  // Stuck terminating (zombie pod)
+  // Stuck terminating (zombie pod). Use the same threshold as the badge
+  // (TERMINATING_STUCK_MINUTES) so the drawer problem and the table badge flip
+  // together — firing at 60s while the badge stayed calm to 10m was a mismatch.
   if (pod.metadata?.deletionTimestamp) {
-    const deleteTime = new Date(pod.metadata.deletionTimestamp).getTime()
-    const ageSeconds = (Date.now() - deleteTime) / 1000
-    if (ageSeconds > 60) {
+    if (minutesSince(pod.metadata.deletionTimestamp) >= TERMINATING_STUCK_MINUTES) {
       problems.push({ severity: 'medium', message: 'Stuck Terminating' })
     }
   }
 
-  // Not ready (Running but containers not ready)
+  // Not ready (Running but containers not ready). Use the same containerSettledOk
+  // gate as getPodStatus so a completing Job pod (Running, container terminated
+  // exit 0, Ready=false) doesn't raise a drawer problem while the table badge
+  // stays calm — a settled/completed container is not "Not Ready".
   if (phase === 'Running') {
-    const readyContainers = containerStatuses.filter((c: any) => c.ready).length
+    const unsettled = containerStatuses.filter((c: any) => !containerSettledOk(c)).length
     const totalContainers = containerStatuses.length
-    if (totalContainers > 0 && readyContainers < totalContainers) {
+    if (totalContainers > 0 && unsettled > 0) {
       // Only add if we haven't already flagged a more specific issue
       const hasSpecificIssue = problems.some(p =>
         p.message.includes('Probe') || p.message.includes('CrashLoop') || p.message.includes('OOM')
@@ -646,7 +649,9 @@ export function getWorkloadStatus(resource: any, kind: string): StatusBadge {
     const ready = status.numberReady || 0
     const updated = status.updatedNumberScheduled || 0
 
-    if (desired === 0) return { text: '0 nodes', color: healthColors.unknown, level: 'unknown' }
+    // 0 desired = the node selector matches no nodes — intentional/idle, not a
+    // fault and not "unknown" (matches pkg/health.Workload). Sky.
+    if (desired === 0) return { text: '0 nodes', color: healthColors.neutral, level: 'neutral' }
     if (ready === desired && updated === desired) {
       return { text: `${ready}/${desired}`, color: healthColors.healthy, level: 'healthy' }
     }
@@ -1008,7 +1013,9 @@ export function getJobStatus(job: any): StatusBadge {
 
   const completeCond = conditions.find((c: any) => c.type === 'Complete' && c.status === 'True')
   if (completeCond) {
-    return { text: 'Complete', color: healthColors.healthy, level: 'healthy' }
+    // A completed Job is done by design — neutral/idle (sky), not the green of a
+    // serving workload (matches pkg/health.Workload).
+    return { text: 'Complete', color: healthColors.neutral, level: 'neutral' }
   }
 
   if (job.spec?.suspend) {
@@ -1244,17 +1251,30 @@ export function cronToHuman(cron: string): string {
   if (minute === '0' && hour !== '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
     return `Daily at ${hour}:00`
   }
-  if (minute !== '*' && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+  // Exclude step-minute ("*/N") here so it falls through to the interval branch
+  // below — otherwise "*/5 * * * *" rendered as "Every hour at :*/5" instead of
+  // "Every 5 minutes". A literal minute like "30" still reads "Every hour at :30".
+  if (minute !== '*' && !minute.startsWith('*/') && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
     return `Every hour at :${minute.padStart(2, '0')}`
   }
   if (minute === '*' && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
     return 'Every minute'
   }
-  if (minute.startsWith('*/')) {
+  // Only claim a plain "Every N minutes" when nothing else constrains the window;
+  // otherwise "*/5 9 * * *" (only at 09:xx) or "*/5 * * * 1-5" (weekdays only)
+  // would read as an unconstrained interval. Constrained shapes fall through to
+  // the raw cron rather than assert something misleading.
+  if (minute.startsWith('*/') && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
     const interval = minute.slice(2)
-    return `Every ${interval} minutes`
-  }
-  if (dayOfWeek === '1-5' || dayOfWeek === 'MON-FRI') {
+    return interval === '1' ? 'Every minute' : `Every ${interval} minutes`
+  }
+  // Weekday phrasing needs a literal hour:minute — a wildcard/step in either field
+  // (e.g. "*/5 * * * 1-5") would render "Weekdays at *:*/5", so let it fall to raw.
+  if (
+    (dayOfWeek === '1-5' || dayOfWeek === 'MON-FRI') &&
+    hour !== '*' && !hour.startsWith('*/') &&
+    minute !== '*' && !minute.startsWith('*/')
+  ) {
     return `Weekdays at ${hour}:${minute.padStart(2, '0')}`
   }
 

package/src/components/scope-pill/ScopePill.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+
+export interface ScopePillProps {
+  /**
+   * The scope segments — typically a cluster switcher followed by a namespace
+   * picker, each rendered in its `variant="segment"` form (borderless). They're
+   * separated by a divider and read as one "what am I looking at" unit.
+   */
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * ScopePill is the shared bordered shell for the cluster + namespace "scope"
+ * control, used by both OSS Radar's header and Radar Hub's cluster top bar so
+ * the two stay visually identical. It is purely the container: the segments
+ * (ClusterSwitcher / NamespacePicker in segment variant) and their data,
+ * view-awareness, and any layout pinning are the host's concern.
+ *
+ * Deliberately NO `overflow-hidden`: ClusterSwitcher's dropdown renders inline
+ * (absolute, not portaled), so clipping this ancestor would hide it. Instead of
+ * clipping, the outer corners of the first/last segment's TRIGGER button are
+ * rounded (7px = the 8px pill radius minus its 1px border) so each segment's
+ * hover/active fill follows the pill's shape instead of poking square corners
+ * past it. `>button` targets only the trigger, never the dropdown's buttons.
+ */
+export function ScopePill({ children, className = '' }: ScopePillProps) {
+  return (
+    <div
+      className={`flex items-stretch shrink-0 rounded-lg border border-theme-border bg-theme-surface divide-x divide-theme-border [&>*:first-child>button]:rounded-l-[7px] [&>*:last-child>button]:rounded-r-[7px] ${className}`}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/scope-pill/index.ts

@@ -0,0 +1,2 @@
+export { ScopePill } from './ScopePill'
+export type { ScopePillProps } from './ScopePill'