@skyhook-io/k8s-ui 1.8.6 → 1.8.7

package/src/components/resources/ResourcesView.tsx

@@ -129,11 +129,12 @@ import {
   podMatchesProblemCategory,
   SEVERITY_DOT_COLOR,
 } from './resource-utils'
-import { SEVERITY_BADGE, EVENT_TYPE_COLORS } from '../../utils/badge-colors'
+import { SEVERITY_BADGE, EVENT_TYPE_COLORS, SEVERITY_TEXT } from '../../utils/badge-colors'
 import { pluralize } from '../../utils/pluralize'
 import { getPodGpuCount, getNodeGpuCount } from '../../utils/extended-resources'
 import { type CustomColumnDef, type CustomColumnSource, customColumnKey, readCustomColumnValue, sanitizeCustomColumnDefs } from '../../utils/custom-columns'
 import { Tooltip } from '../ui/Tooltip'
+import { AuditBadgeTooltip, type AuditBadgeMessage } from '../audit/AuditBadgeTooltip'
 // CRD-specific cell components (extracted)
 import { GitRepositoryCell, OCIRepositoryCell, HelmRepositoryCell, KustomizationCell, FluxHelmReleaseCell, FluxAlertCell } from './renderers/flux-cells'
 import { ArgoApplicationCell, ArgoApplicationSetCell, ArgoAppProjectCell } from './renderers/argo-cells'
@@ -1800,6 +1801,9 @@ interface ResourcesViewData {
   onNavigate?: (path: string, options?: { replace?: boolean }) => void
   certExpiry?: Record<string, { expired?: boolean; daysLeft: number }>
   certExpiryError?: boolean
+  // Cluster Audit findings for the listed kind, keyed by "namespace/name" (the
+  // list shows one kind at a time, so ns/name is unambiguous). Host-injected.
+  auditBadges?: Record<string, { danger: number; warning: number; messages?: AuditBadgeMessage[] }>
   onOpenLogs?: (params: { namespace: string; podName: string; containers: string[]; containerName?: string }) => void
   onOpenWorkloadLogs?: (params: { namespace: string; workloadKind: string; workloadName: string }) => void
 }
@@ -1852,6 +1856,8 @@ interface ResourcesViewProps {
   topNodeMetrics?: TopNodeMetrics[]
   certExpiry?: Record<string, { expired?: boolean; daysLeft: number }>
   certExpiryError?: boolean
+  // Cluster Audit findings for the selected kind, keyed by "namespace/name".
+  auditBadges?: Record<string, { danger: number; warning: number; messages?: AuditBadgeMessage[] }>
   // Pinned kinds
   pinned?: Array<{ name: string; kind: string; group: string }>
   togglePin?: (kind: { name: string; kind: string; group: string }) => void
@@ -2070,6 +2076,7 @@ export function ResourcesView({
   topNodeMetrics,
   certExpiry,
   certExpiryError,
+  auditBadges,
   pinned = [],
   togglePin = () => {},
   isPinned = () => false,
@@ -4014,9 +4021,10 @@ export function ResourcesView({
     onNavigate,
     certExpiry,
     certExpiryError,
+    auditBadges,
     onOpenLogs,
     onOpenWorkloadLogs,
-  }), [onNavigate, certExpiry, certExpiryError, onOpenLogs, onOpenWorkloadLogs])
+  }), [onNavigate, certExpiry, certExpiryError, auditBadges, onOpenLogs, onOpenWorkloadLogs])
 
   return (
     <ResourcesViewDataContext.Provider value={resourcesViewDataContextValue}>
@@ -5155,6 +5163,7 @@ interface CellContentProps {
 }
 
 function CellContent({ resource, kind, column, group, majorityNodeMinorVersion, extraColumn, nameHref }: CellContentProps) {
+  const { auditBadges } = useContext(ResourcesViewDataContext)
   // Parent-injected extra columns short-circuit the built-in switch.
   // Used by hosts that inject leading columns (e.g. a multi-cluster Cluster column).
   if (extraColumn) {
@@ -5167,6 +5176,8 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
   if (column === 'name') {
     const isTerminating = !!meta.deletionTimestamp
     const nameClass = clsx('text-sm font-medium truncate block', isTerminating ? 'text-theme-text-tertiary line-through' : 'text-theme-text-primary')
+    const audit = auditBadges?.[`${meta.namespace || ''}/${meta.name}`]
+    const auditTotal = audit ? audit.danger + audit.warning : 0
     return (
       <div className="flex items-center gap-1.5 min-w-0">
         <Tooltip content={meta.name}>
@@ -5184,6 +5195,16 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
           )}
         </Tooltip>
         <CopyNameButton name={meta.name} />
+        {auditTotal > 0 && audit && (
+          <Tooltip content={audit.messages && audit.messages.length > 0
+            ? <AuditBadgeTooltip messages={audit.messages} />
+            : `${auditTotal} audit ${auditTotal === 1 ? 'finding' : 'findings'}${audit.danger > 0 ? ` · ${audit.danger} danger` : ''}`}>
+            <span className={clsx('shrink-0 inline-flex items-center gap-0.5 text-[10px] font-medium cursor-help', audit.danger > 0 ? SEVERITY_TEXT.error : SEVERITY_TEXT.warning)}>
+              <AlertTriangle className="w-3 h-3" />
+              {auditTotal}
+            </span>
+          </Tooltip>
+        )}
         {isTerminating && (
           <Tooltip content="Resource is being deleted (has deletionTimestamp set). May be stuck due to finalizers.">
             <span className="shrink-0 flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium bg-red-500/15 text-red-600 dark:text-red-400 rounded">
@@ -6022,6 +6043,7 @@ function ReplicaSetCell({ resource, column }: { resource: any; column: string })
 }
 
 function ServiceCell({ resource, column }: { resource: any; column: string }) {
+  const { auditBadges } = useContext(ResourcesViewDataContext)
   switch (column) {
     case 'type': {
       const status = getServiceStatus(resource)
@@ -6042,6 +6064,20 @@ function ServiceCell({ resource, column }: { resource: any; column: string }) {
       )
     }
     case 'endpoints': {
+      // getServiceEndpointsStatus can't see live pods, so it optimistically
+      // reports "Active" for any service with a selector. The audit's
+      // serviceNoMatchingPods check DOES resolve the selector against live pods —
+      // the only badge-worthy finding a Service can carry — so when it fired,
+      // trust it over the guess instead of showing a false-green "Active".
+      const meta = resource.metadata || {}
+      const flagged = auditBadges?.[`${meta.namespace || ''}/${meta.name}`]
+      if (flagged && flagged.danger + flagged.warning > 0) {
+        return (
+          <span className={clsx('badge', flagged.danger > 0 ? 'status-unhealthy' : 'status-degraded')}>
+            No endpoints
+          </span>
+        )
+      }
       const { status, color } = getServiceEndpointsStatus(resource)
       return (
         <span className={clsx('badge', color)}>

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