@skyhook-io/k8s-ui 1.8.5 → 1.8.7

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

@@ -112,41 +112,122 @@ export function podMatchesProblemCategory(problems: PodProblem[], restarts: numb
   }
 }
 
+// A transient lifecycle state (plain Pending, Terminating, awaiting an address)
+// is not a fault while it's young — it becomes one only once it's stuck past
+// these windows, mirroring the backend health thresholds (ClassifyPodHealth:
+// pending 5m; detect.go: terminating 10m, LB/PVC pending 5m). Two things escalate
+// immediately, regardless of age, because they're definitive failures the backend
+// also flags at once: fatal *container* states (CrashLoopBackOff, ImagePull,
+// InvalidImageName, OOMKilled, …) and Unschedulable (the scheduler tried and
+// could not place the pod).
+const PENDING_STUCK_MINUTES = 5
+const TERMINATING_STUCK_MINUTES = 10
+
+// minutesSince returns minutes elapsed since an ISO timestamp, or 0 when it's
+// missing/invalid — so "unknown age" is treated as not-yet-stuck (benign).
+function minutesSince(timestamp?: string): number {
+  if (!timestamp) return 0
+  const t = new Date(timestamp).getTime()
+  if (Number.isNaN(t)) return 0
+  return (Date.now() - t) / 60000
+}
+
+function podUnschedulable(pod: any): boolean {
+  const conds = pod?.status?.conditions || []
+  return conds.some(
+    (c: any) => c.type === 'PodScheduled' && c.status === 'False' && c.reason === 'Unschedulable'
+  )
+}
+
+// A container that has terminated successfully (exit 0) is done, not "not ready".
+// A completing Job pod (Running phase, container Completed, Ready=false) must not
+// read as degraded just because ready<total — this mirrors ClassifyPodHealth, so
+// the badge agrees with the timeline/Problems verdict.
+function containerSettledOk(cs: any): boolean {
+  return cs?.ready === true || cs?.state?.terminated?.exitCode === 0
+}
+
+// Hard-failure waiting reasons that won't self-resolve — mirrors the backend's
+// isFatalWaitingReason. These escalate immediately regardless of pod age or a
+// Terminating overlay (a bad image / config error is a real failure now, not a
+// benign young-Pending pod).
+const FATAL_WAITING_REASONS = new Set([
+  'CrashLoopBackOff', 'ImagePullBackOff', 'ErrImagePull', 'InvalidImageName',
+  'ImageInspectError', 'CreateContainerConfigError', 'CreateContainerError', 'RunContainerError',
+])
+
+// firstFatalContainer returns the first init- or main-container in a hard-failure
+// state (or null). Init containers are walked first: when init is failing the pod
+// stays Pending and main ContainerStatuses haven't populated yet, so checking main
+// alone would miss it and fall through to a benign "Pending".
+function firstFatalContainer(pod: any): { name: string; reason: string } | null {
+  const init = pod?.status?.initContainerStatuses || []
+  const main = pod?.status?.containerStatuses || []
+  for (const cs of [...init, ...main]) {
+    const w = cs?.state?.waiting?.reason
+    if (w && FATAL_WAITING_REASONS.has(w)) return { name: cs?.name, reason: w }
+    if (cs?.state?.terminated?.reason === 'OOMKilled') return { name: cs?.name, reason: 'OOMKilled' }
+  }
+  return null
+}
+
 export function getPodStatus(pod: any): StatusBadge {
   const phase = pod.status?.phase || 'Unknown'
   const containerStatuses = pod.status?.containerStatuses || []
 
-  // Check for terminating
-  if (pod.metadata?.deletionTimestamp) {
-    return { text: 'Terminating', color: healthColors.degraded, level: 'degraded' }
+  // Fatal init/main container states win over the Pending grace AND a Terminating
+  // overlay — a crash-loop, bad image, or config error is a real failure now,
+  // whatever the pod's age or deletion state. Skip for Succeeded: a terminal
+  // success must not flip unhealthy on a sidecar that OOMed before the main
+  // container finished (matches getPodPhaseDisplay + ClassifyPodHealth).
+  if (phase !== 'Succeeded') {
+    const fatal = firstFatalContainer(pod)
+    if (fatal) {
+      return { text: fatal.reason, color: healthColors.unhealthy, level: 'unhealthy' }
+    }
   }
 
-  // Check container states for issues
-  for (const cs of containerStatuses) {
-    if (cs.state?.waiting?.reason) {
-      const reason = cs.state.waiting.reason
-      if (['CrashLoopBackOff', 'ImagePullBackOff', 'ErrImagePull', 'CreateContainerConfigError'].includes(reason)) {
-        return { text: reason, color: healthColors.unhealthy, level: 'unhealthy' }
-      }
-    }
-    if (cs.state?.terminated?.reason === 'OOMKilled') {
-      return { text: 'OOMKilled', color: healthColors.unhealthy, level: 'unhealthy' }
+  // A terminal failure stays unhealthy even while the pod is being deleted — the
+  // Terminating overlay below must not mask a Failed pod (the Problems panel and
+  // dashboard report it as an error regardless).
+  if (phase === 'Failed') {
+    return { text: 'Failed', color: healthColors.unhealthy, level: 'unhealthy' }
+  }
+
+  // Terminating: neutral while gracefully shutting down, degraded once stuck
+  // (a wedged finalizer / preStop hook holding the pod open).
+  if (pod.metadata?.deletionTimestamp) {
+    if (minutesSince(pod.metadata.deletionTimestamp) >= TERMINATING_STUCK_MINUTES) {
+      return { text: 'Terminating', color: healthColors.degraded, level: 'degraded' }
     }
+    return { text: 'Terminating', color: healthColors.neutral, level: 'neutral' }
   }
 
   switch (phase) {
-    case 'Running':
-      // Check if all containers are ready
+    case 'Running': {
+      // Degrade only on containers that are neither ready nor successfully done —
+      // a completed container (exit 0) on a Running pod is finishing, not a fault.
       const ready = containerStatuses.filter((c: any) => c.ready).length
       const total = containerStatuses.length
-      if (total > 0 && ready < total) {
+      const unsettled = containerStatuses.filter((c: any) => !containerSettledOk(c)).length
+      if (unsettled > 0) {
         return { text: `Running (${ready}/${total})`, color: healthColors.degraded, level: 'degraded' }
       }
       return { text: 'Running', color: healthColors.healthy, level: 'healthy' }
+    }
     case 'Succeeded':
       return { text: 'Completed', color: healthColors.neutral, level: 'neutral' }
     case 'Pending':
-      return { text: 'Pending', color: healthColors.degraded, level: 'degraded' }
+      // Unschedulable = the scheduler tried and failed to place this pod; the
+      // backend flags it immediately (severity ramps with duration), so the badge
+      // does too. Plain Pending (not yet placed) keeps the young-grace window.
+      if (podUnschedulable(pod)) {
+        return { text: 'Unschedulable', color: healthColors.degraded, level: 'degraded' }
+      }
+      if (minutesSince(pod.metadata?.creationTimestamp) >= PENDING_STUCK_MINUTES) {
+        return { text: 'Pending', color: healthColors.degraded, level: 'degraded' }
+      }
+      return { text: 'Pending', color: healthColors.neutral, level: 'neutral' }
     case 'Failed':
       return { text: 'Failed', color: healthColors.unhealthy, level: 'unhealthy' }
     default:
@@ -181,49 +262,51 @@ export function getPodPhaseDisplay(pod: any): PodPhaseDisplay {
     0
   )
 
+  // Container-state failures take precedence over phase AND over a Terminating
+  // overlay: a CrashLoopBackOff pod can still report phase: Running, an init
+  // failure keeps the pod Pending, and a pod crashing while being deleted is
+  // still a failure worth surfacing. Skip for Succeeded — a Job pod whose sidecar
+  // was OOMKilled before the main container completed should not read unhealthy
+  // after terminal success.
+  if (phase !== 'Succeeded') {
+    const fatal = firstFatalContainer(pod)
+    if (fatal) {
+      return {
+        phase,
+        text: `${phase} — ${fatal.reason}`,
+        level: 'unhealthy',
+        hint: fatal.reason === 'OOMKilled'
+          ? `Container "${fatal.name}" was OOMKilled.`
+          : `Container "${fatal.name}" is stuck in ${fatal.reason}.`,
+      }
+    }
+  }
+
+  // A terminal failure stays unhealthy even while the pod is being deleted — don't
+  // let the Terminating overlay mask a Failed pod.
+  if (phase === 'Failed') {
+    return { phase, text: 'Failed', level: 'unhealthy' }
+  }
+
+  // Terminating: neutral while gracefully shutting down, degraded once stuck.
   if (pod?.metadata?.deletionTimestamp) {
+    const stuck = minutesSince(pod.metadata.deletionTimestamp) >= TERMINATING_STUCK_MINUTES
     return {
       phase,
       text: `${phase} — Terminating`,
-      level: 'degraded',
-      hint: 'Pod has a deletionTimestamp set; awaiting graceful termination.',
-    }
-  }
-
-  // Container-state failures take precedence over phase: a CrashLoopBackOff
-  // pod can still report phase: Running. Skip for Succeeded — a Job pod whose
-  // sidecar was OOMKilled before the main container completed should not be
-  // shown as unhealthy after the pod has reached terminal success.
-  if (phase !== 'Succeeded') {
-    for (const cs of containerStatuses) {
-      const waitingReason = cs?.state?.waiting?.reason
-      if (
-        waitingReason === 'CrashLoopBackOff' ||
-        waitingReason === 'ImagePullBackOff' ||
-        waitingReason === 'ErrImagePull' ||
-        waitingReason === 'CreateContainerConfigError'
-      ) {
-        return {
-          phase,
-          text: `${phase} — ${waitingReason}`,
-          level: 'unhealthy',
-          hint: `Container "${cs.name}" is stuck in ${waitingReason}.`,
-        }
-      }
-      if (cs?.state?.terminated?.reason === 'OOMKilled') {
-        return {
-          phase,
-          text: `${phase} — OOMKilled`,
-          level: 'unhealthy',
-          hint: `Container "${cs.name}" was OOMKilled.`,
-        }
-      }
+      level: stuck ? 'degraded' : 'neutral',
+      hint: stuck
+        ? 'Pod has been terminating for a while — a finalizer or preStop hook may be wedged.'
+        : 'Pod has a deletionTimestamp set; awaiting graceful termination.',
     }
   }
 
   switch (phase) {
     case 'Running': {
-      const notReady = totalContainers > 0 && readyContainers < totalContainers
+      // A successfully-completed container (exit 0) is settled, not "not ready" —
+      // don't degrade a completing pod over it (matches getPodStatus / timeline).
+      const unsettled = containerStatuses.filter((c) => !containerSettledOk(c)).length
+      const notReady = totalContainers > 0 && unsettled > 0
       const cycling = restartTotal > RESTART_CYCLING_THRESHOLD
       if (notReady && cycling) {
         return {
@@ -254,7 +337,26 @@ export function getPodPhaseDisplay(pod: any): PodPhaseDisplay {
     case 'Succeeded':
       return { phase, text: 'Completed', level: 'neutral' }
     case 'Pending':
-      return { phase, text: 'Pending', level: 'degraded' }
+      // Unschedulable = the scheduler tried and failed; surface it immediately
+      // (the backend does, with severity ramping by duration). Plain Pending
+      // (not yet placed) keeps the young-grace window.
+      if (podUnschedulable(pod)) {
+        return {
+          phase,
+          text: `${phase} — Unschedulable`,
+          level: 'degraded',
+          hint: 'No node can accept this pod (insufficient resources, taints, affinity, or quota).',
+        }
+      }
+      if (minutesSince(pod?.metadata?.creationTimestamp) >= PENDING_STUCK_MINUTES) {
+        return {
+          phase,
+          text: 'Pending',
+          level: 'degraded',
+          hint: 'Pod has been Pending for several minutes — check scheduling and image pulls.',
+        }
+      }
+      return { phase, text: 'Pending', level: 'neutral' }
     case 'Failed':
       return { phase, text: 'Failed', level: 'unhealthy' }
     default:
@@ -373,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')
@@ -544,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' }
     }
@@ -778,7 +885,12 @@ export function getIngressStatus(ingress: any): StatusBadge {
   if (lbIngress.length > 0) {
     return { text: 'Active', color: healthColors.healthy, level: 'healthy' }
   }
-  return { text: 'Pending', color: healthColors.degraded, level: 'degraded' }
+  // Awaiting an external address is normal right after creation; only flag it
+  // once the ingress/LB controller has had time and still hasn't assigned one.
+  if (minutesSince(ingress.metadata?.creationTimestamp) >= PENDING_STUCK_MINUTES) {
+    return { text: 'Pending', color: healthColors.degraded, level: 'degraded' }
+  }
+  return { text: 'Pending', color: healthColors.neutral, level: 'neutral' }
 }
 
 export function getIngressHosts(ingress: any): string {
@@ -901,11 +1013,13 @@ 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) {
-    return { text: 'Suspended', color: healthColors.degraded, level: 'degraded' }
+    return { text: 'Suspended', color: healthColors.neutral, level: 'neutral' }
   }
 
   if (status.active > 0) {
@@ -936,7 +1050,7 @@ export function getJobDuration(job: any): string | null {
 
 export function getCronJobStatus(cj: any): StatusBadge {
   if (cj.spec?.suspend) {
-    return { text: 'Suspended', color: healthColors.degraded, level: 'degraded' }
+    return { text: 'Suspended', color: healthColors.neutral, level: 'neutral' }
   }
   const activeJobs = cj.status?.active?.length || 0
   if (activeJobs > 0) {
@@ -1010,6 +1124,9 @@ export function getNodeStatus(node: any): StatusBadge {
   const isUnschedulable = node.spec?.unschedulable === true
 
   if (isReady && isUnschedulable) {
+    // Cordon is intentional but consequential — it's lost scheduling capacity, and
+    // a forgotten cordon strands nodes — so it stays on the warning axis (matching
+    // the backend Cordoned issue), unlike no-op intentional states (suspended/idle).
     return { text: 'Ready,SchedulingDisabled', color: healthColors.degraded, level: 'degraded' }
   }
   if (isReady) {
@@ -1134,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')}`
   }
 
@@ -1161,7 +1291,12 @@ export function getPVCStatus(pvc: any): StatusBadge {
     case 'Bound':
       return { text: 'Bound', color: healthColors.healthy, level: 'healthy' }
     case 'Pending':
-      return { text: 'Pending', color: healthColors.degraded, level: 'degraded' }
+      // Pending is benign here: a WaitForFirstConsumer claim stays Pending by
+      // design until a pod needs it (could be forever for a scaled-to-zero
+      // workload). We can't see the StorageClass binding mode from the PVC alone,
+      // so age can't distinguish that from genuinely-stuck — the Problems panel,
+      // which has that context, owns the stuck-PVC alarm.
+      return { text: 'Pending', color: healthColors.neutral, level: 'neutral' }
     case 'Lost':
       return { text: 'Lost', color: healthColors.unhealthy, level: 'unhealthy' }
     default:
@@ -1236,7 +1371,7 @@ export function getWorkflowStatus(workflow: any): StatusBadge {
     case 'Succeeded':
       return { text: 'Succeeded', color: healthColors.healthy, level: 'healthy' }
     case 'Running':
-      return { text: 'Running', color: healthColors.degraded, level: 'degraded' }
+      return { text: 'Running', color: healthColors.neutral, level: 'neutral' }
     case 'Failed':
       return { text: 'Failed', color: healthColors.unhealthy, level: 'unhealthy' }
     case 'Error':

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -181,6 +181,10 @@ import {
   RuntimeClassRenderer,
   LeaseRenderer,
   TraefikIngressRouteRenderer,
+  TraefikMiddlewareRenderer,
+  TraefikServiceRenderer,
+  TraefikTLSOptionRenderer,
+  TraefikServersTransportRenderer,
   ContourHTTPProxyRenderer,
   CAPIClusterRenderer,
   CAPIMachineRenderer,
@@ -348,6 +352,8 @@ const KNOWN_KINDS = new Set([
   'channels', 'inmemorychannels', 'subscriptions', 'sequences', 'parallels',
   'knativeingresses', 'knativecertificates', 'serverlessservices', 'domainmappings',
   'ingressroutes', 'ingressroutetcps', 'ingressrouteudps',
+  'middlewares', 'middlewaretcps', 'traefikservices',
+  'serverstransports', 'serverstransporttcps', 'tlsoptions',
   'httpproxies',
   'machinedeployments', 'machines', 'machinesets', 'machinepools',
   'kubeadmcontrolplanes', 'clusterclasses', 'machinehealthchecks',
@@ -665,6 +671,10 @@ export function ResourceRendererDispatch({
 
         {/* Traefik */}
         {(kind === 'ingressroutes' || kind === 'ingressroutetcps' || kind === 'ingressrouteudps') && <TraefikIngressRouteRenderer data={data} onNavigate={onNavigate} />}
+        {(kind === 'middlewares' || kind === 'middlewaretcps') && <TraefikMiddlewareRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'traefikservices' && <TraefikServiceRenderer data={data} onNavigate={onNavigate} />}
+        {(kind === 'serverstransports' || kind === 'serverstransporttcps') && <TraefikServersTransportRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'tlsoptions' && <TraefikTLSOptionRenderer data={data} />}
 
         {/* Contour */}
         {kind === 'httpproxies' && <ContourHTTPProxyRenderer data={data} onNavigate={onNavigate} />}

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -573,6 +573,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
           <HealthBarLegendItem color="bg-blue-500/60 dark:bg-blue-500/60" label="rolling" description="Expected degradation during deployment rollout" />
           <HealthBarLegendItem color="bg-amber-500/60 dark:bg-[#b8861e]" label="degraded" description="Unexpected partial availability" />
           <HealthBarLegendItem color="bg-red-500/60 dark:bg-red-500/60" label="unhealthy" description="Resource is failing or not ready" />
+          <HealthBarLegendItem color="bg-sky-500/60 dark:bg-sky-500/60" label="idle" description="Intentionally off/resting (completed, suspended, scaled to zero)" />
         </div>
       </div>
 

package/src/components/timeline/shared.tsx

@@ -138,6 +138,10 @@ export function HealthSpanLegend() {
         <span className="w-4 h-2 rounded-sm bg-red-500/60 dark:bg-red-500/60" />
         <span>Unhealthy</span>
       </span>
+      <span className="flex items-center gap-1">
+        <span className="w-4 h-2 rounded-sm bg-sky-500/60 dark:bg-sky-500/60" />
+        <span>Idle</span>
+      </span>
     </div>
   )
 }
@@ -387,7 +391,7 @@ export function TimeAxis({ startTime, endTime, tickCount = 8, labelColumnClass =
  * Health span bar showing a health state over a time range.
  */
 interface HealthSpanProps {
-  health: 'healthy' | 'degraded' | 'unhealthy' | string
+  health: 'healthy' | 'rolling' | 'degraded' | 'unhealthy' | 'neutral' | 'unknown' | string
   left: number // percentage
   width: number // percentage
   title?: string
@@ -408,6 +412,9 @@ export function HealthSpan({ health, left, width, title, createdBefore }: Health
         return 'bg-amber-500/60 dark:bg-[#b8861e]'
       case 'unhealthy':
         return 'bg-red-500/60 dark:bg-red-500/60'
+      case 'neutral':
+        // intentional/idle (suspended, scaled-to-0) — sky, calm
+        return 'bg-sky-500/60 dark:bg-sky-500/60'
       default:
         // Unknown or other states
         return 'bg-gray-400/40'
@@ -569,7 +576,11 @@ export function buildHealthSpans(
   const existsUntil = deleteEvent ? new Date(deleteEvent.timestamp).getTime() : now
 
   const spans: { start: number; end: number; health: string }[] = []
-  let currentHealth = 'unknown'
+  // `null` is the "no health observed yet" sentinel — kept distinct from the
+  // real 'unknown' health value (emitted for node-lost pods). Overloading
+  // 'unknown' as both swallowed genuine-unknown spans and then false-greened
+  // them via the empty-spans fallback below.
+  let currentHealth: string | null = null
   let spanStart = Math.max(existsFrom, startTime)
 
   for (const evt of sorted) {
@@ -586,7 +597,7 @@ export function buildHealthSpans(
       continue
     }
 
-    if (newHealth !== currentHealth && currentHealth !== 'unknown') {
+    if (newHealth !== currentHealth && currentHealth !== null) {
       spans.push({ start: spanStart, end: ts, health: currentHealth })
       spanStart = ts
     }
@@ -594,7 +605,7 @@ export function buildHealthSpans(
   }
 
   // Close final span (only up to when resource existed)
-  if (currentHealth !== 'unknown') {
+  if (currentHealth !== null) {
     spans.push({ start: spanStart, end: Math.min(existsUntil, now), health: currentHealth })
   }
 

package/src/components/topology/K8sResourceNode.tsx

@@ -3,15 +3,17 @@ import { Handle, Position } from '@xyflow/react'
 import {
   ChevronDown,
   ChevronUp,
+  TriangleAlert,
 } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { NodeKind, HealthStatus, PodSummary } from '../../types'
 import { displayKind } from '../../types'
-import { healthToSeverity, SEVERITY_DOT } from '../../utils/badge-colors'
+import { healthToSeverity, SEVERITY_DOT, SEVERITY_TEXT } from '../../utils/badge-colors'
 import { workloadHue } from '../../utils/workload-colors'
 import { ownershipOf } from '../../utils/topology-neighborhood'
 import { midTruncate } from '../../utils/format'
 import { Tooltip } from '../ui/Tooltip'
+import { AuditBadgeTooltip, type AuditBadgeMessage } from '../audit/AuditBadgeTooltip'
 
 // Get actionable tooltip content for health issues
 function getIssueTooltip(issue: string | undefined): React.ReactNode {
@@ -215,6 +217,12 @@ const STATUS_STYLES: Record<HealthStatus, React.CSSProperties> = {
     border: '2px solid rgb(239 68 68 / 0.7)',
     backgroundColor: 'rgb(248 113 113 / 0.15)',
   },
+  // neutral = intentional/idle (suspended, scaled-to-0) — sky outline, calm.
+  // Distinct from `unknown`/`healthy` which carry no outline.
+  neutral: {
+    border: '2px solid rgb(56 189 248 / 0.55)',
+    backgroundColor: 'rgb(56 189 248 / 0.1)',
+  },
   healthy: {},
   unknown: {},
 }
@@ -376,6 +384,15 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   id,
 }: K8sResourceNodeProps) {
   const { kind, name, status, nodeData, selected, dimmed, onExpand, onCollapse, isExpanded } = data
+  // Cluster Audit findings joined onto this node by the host (web/ enriches each
+  // node's data by auditKey). The host only counts "badge-worthy" findings —
+  // reference-integrity / lifecycle, "this resource is actually broken" — not the
+  // posture/best-practice nags that fire near-universally, so the indicator stays
+  // a signal. Colored by worst severity (danger red, else warning amber).
+  const auditDanger = typeof nodeData.auditDanger === 'number' ? nodeData.auditDanger : 0
+  const auditWarning = typeof nodeData.auditWarning === 'number' ? nodeData.auditWarning : 0
+  const auditTotal = auditDanger + auditWarning
+  const auditMessages = Array.isArray(nodeData.auditMessages) ? (nodeData.auditMessages as AuditBadgeMessage[]) : []
   // Workload tint (application graph): a node owned by exactly one workload
   // carries that workload's hue. Only on healthy/unknown cards — degraded/
   // unhealthy already own the card background for health, which must win.
@@ -506,6 +523,16 @@ export const K8sResourceNode = memo(function K8sResourceNode({
                   <ChevronUp className="w-3.5 h-3.5 text-theme-text-secondary" />
                 </button>
               )}
+              {auditTotal > 0 && (
+                <Tooltip
+                  content={auditMessages.length > 0
+                    ? <AuditBadgeTooltip messages={auditMessages} clickHint={false} />
+                    : `${auditTotal} audit ${auditTotal === 1 ? 'finding' : 'findings'}${auditDanger > 0 ? ` · ${auditDanger} danger` : ''}`}
+                  position="right"
+                >
+                  <TriangleAlert className={clsx('w-3 h-3 cursor-help', auditDanger > 0 ? SEVERITY_TEXT.error : SEVERITY_TEXT.warning)} />
+                </Tooltip>
+              )}
               {issueTooltip ? (
                 <Tooltip content={issueTooltip} position="right">
                   <span className={clsx('w-1.5 h-1.5 rounded-full cursor-help', getStatusDotColor(status))} />

package/src/components/topology/TopologyControls.tsx

@@ -1,5 +1,6 @@
 import { FolderTree, ShieldCheck } from 'lucide-react'
 import type { TopologyMode, GroupingMode } from '../../types/core'
+import { Tooltip } from '../ui/Tooltip'
 
 interface TopologyControlsProps {
   viewMode: TopologyMode
@@ -11,6 +12,12 @@ interface TopologyControlsProps {
   onShowPolicyEffectChange?: (show: boolean) => void
   /** Show the "Fleet" button (CAPI cluster management view) */
   showFleetMode?: boolean
+  /**
+   * Navigate to the observed-traffic view. When provided, the "Network Flow"
+   * tooltip offers a link to it — disambiguating the config-derived flow graph
+   * here from the live, observed Traffic view. Omitted by hosts without one.
+   */
+  onNavigateToTraffic?: () => void
 }
 
 export function TopologyControls({
@@ -22,6 +29,7 @@ export function TopologyControls({
   showPolicyEffect = false,
   onShowPolicyEffectChange,
   showFleetMode = false,
+  onNavigateToTraffic,
 }: TopologyControlsProps) {
   return (
     <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
@@ -69,16 +77,40 @@ export function TopologyControls({
         >
           Resources
         </button>
-        <button
-          onClick={() => onViewModeChange('traffic')}
-          className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
-            viewMode === 'traffic'
-              ? 'bg-skyhook-600 text-white'
-              : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
-          }`}
+        <Tooltip
+          position="bottom"
+          content={
+            <div className="space-y-1.5 text-left">
+              <p className="text-theme-text-secondary">
+                How requests <em>should</em> route, derived from Ingress, Services and
+                routing CRDs (Traefik, Gateway API, Istio…) — not observed packets.
+              </p>
+              {onNavigateToTraffic && (
+                <p className="text-theme-text-tertiary">
+                  Looking for observed, measured traffic?{' '}
+                  <button
+                    type="button"
+                    onClick={onNavigateToTraffic}
+                    className="text-skyhook-400 hover:text-skyhook-300 underline underline-offset-2"
+                  >
+                    Open Live Traffic →
+                  </button>
+                </p>
+              )}
+            </div>
+          }
         >
-          Traffic
-        </button>
+          <button
+            onClick={() => onViewModeChange('traffic')}
+            className={`px-2.5 py-1 text-xs rounded-md transition-colors whitespace-nowrap ${
+              viewMode === 'traffic'
+                ? 'bg-skyhook-600 text-white'
+                : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
+            }`}
+          >
+            Network Flow <span className="opacity-70">(config)</span>
+          </button>
+        </Tooltip>
         {showFleetMode && (
           <button
             onClick={() => onViewModeChange('fleet')}