@skyhook-io/k8s-ui 1.8.5 → 1.8.6

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:
@@ -778,7 +880,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 {
@@ -905,7 +1012,7 @@ export function getJobStatus(job: any): StatusBadge {
   }
 
   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 +1043,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 +1117,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) {
@@ -1161,7 +1271,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 +1351,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/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')}

package/src/components/ui/Badge.tsx

@@ -9,11 +9,31 @@ import type { ReactNode } from 'react'
 export type BadgeSeverity = 'success' | 'warning' | 'alert' | 'error' | 'info' | 'neutral'
 export type BadgeSize = 'sm' | 'default'
 
+// Intent tokens beyond severity/kind. Named by PURPOSE, not hue: two tokens may
+// share a color value today yet stay separate names so a future retune moves
+// exactly the right ones. See DESIGN.md "Badge decision tree".
+//
+// - protocol: transport/scheme tags (HTTP/TCP/UDP/…). Its OWN family because it
+//   is a recurring, meaningful axis and must NOT collide with severity hues
+//   (e.g. a green "HTTPS" must not read as "success").
+// - note:     neutral attention/FYI markers (cross-namespace, wildcard, default,
+//   immutable). Distinct from severity-info — it flags "noteworthy", not a status.
+// - accent1/2/3: LOCAL categorical distinction (rw/ro, spot/on-demand,
+//   control-plane/worker) where the hue carries no cross-screen meaning — just
+//   "tell these sibling options apart". The only place sharing is intended.
+// - structural: ports/paths/hosts/weights/names — neutral data fragments, not a
+//   status. Its own name so it can diverge from severity-neutral later.
+export type BadgeTone = 'note' | 'accent1' | 'accent2' | 'accent3' | 'structural'
+
 interface BadgeProps {
   /** Severity-based coloring (status badges) */
   severity?: BadgeSeverity
   /** K8s resource kind coloring (kind badges) */
   kind?: string
+  /** Transport protocol/scheme tag (http/https/tls/tcp/udp/grpc/h2) */
+  protocol?: string
+  /** Categorical/accent intent tone (see BadgeTone) */
+  tone?: BadgeTone
   /** Explicit color class override (bypasses severity/kind lookup) */
   colorClass?: string
   /** Size variant */
@@ -135,12 +155,49 @@ const KIND: Record<string, string> = {
 
 const DEFAULT_KIND_COLOR = 'bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200 dark:bg-fuchsia-950/40 dark:text-fuchsia-400 dark:border-fuchsia-800/40'
 
+// ---------------------------------------------------------------------------
+// PROTOCOL COLORS — transport/scheme tags. Deliberately avoid severity hues
+// (emerald/amber/orange/red/sky) so a protocol never reads as a status.
+// ---------------------------------------------------------------------------
+const PROTOCOL: Record<string, string> = {
+  http:  'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  http2: 'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  h2:    'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  h2c:   'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  https: 'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-400 dark:border-teal-700/40',
+  tls:   'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-400 dark:border-teal-700/40',
+  tcp:   'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  udp:   'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
+  grpc:  'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  'grpc-web': 'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+}
+const DEFAULT_PROTOCOL_COLOR = 'bg-slate-100 text-slate-700 border-slate-300 dark:bg-slate-950/50 dark:text-slate-400 dark:border-slate-700/40'
+
+// ---------------------------------------------------------------------------
+// TONE COLORS — note / local-categorical accents / structural.
+// ---------------------------------------------------------------------------
+const TONE: Record<BadgeTone, string> = {
+  // attention/FYI — distinct from severity so it doesn't read as warning/info
+  note:       'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
+  // three visually-distinct accents for local "tell siblings apart" use
+  accent1:    'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  accent2:    'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  accent3:    'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-400 dark:border-teal-700/40',
+  // neutral data fragment (ports/paths/hosts/names)
+  structural: 'bg-theme-elevated text-theme-text-secondary border-theme-border',
+}
+
 // Structure classes
 const SIZE_CLASSES: Record<BadgeSize, string> = {
   default: 'badge',
   sm: 'badge-sm',
 }
 
+/** Resolve a protocol/scheme label (case-insensitive) to its color class. */
+export function getProtocolColorClass(protocol: string): string {
+  return PROTOCOL[protocol.toLowerCase().trim()] ?? DEFAULT_PROTOCOL_COLOR
+}
+
 /** Resolve kind color with fuzzy matching for plural/lowercase forms */
 export function getKindColorClass(kind: string): string {
   // Direct match
@@ -185,8 +242,14 @@ export function getSeverityColorClass(severity: BadgeSeverity): string {
  * Badge component — the ONE source of truth for badge rendering.
  * Use severity for status badges, kind for resource type badges, or colorClass for custom.
  */
-export function Badge({ severity, kind, colorClass, size = 'default', className, onClick, title, children }: BadgeProps) {
-  const color = colorClass ?? (severity ? SEVERITY[severity] : kind ? getKindColorClass(kind) : '')
+export function Badge({ severity, kind, protocol, tone, colorClass, size = 'default', className, onClick, title, children }: BadgeProps) {
+  const color =
+    colorClass ??
+    (severity ? SEVERITY[severity]
+      : protocol ? getProtocolColorClass(protocol)
+      : tone ? TONE[tone]
+      : kind ? getKindColorClass(kind)
+      : '')
   const cls = clsx(SIZE_CLASSES[size], color, className)
 
   if (onClick) {
@@ -196,4 +259,4 @@ export function Badge({ severity, kind, colorClass, size = 'default', className,
 }
 
 // Re-export the raw color maps for backwards compat (used by badge-colors.ts consumers)
-export { SEVERITY as BADGE_SEVERITY_COLORS, KIND as BADGE_KIND_COLORS }
+export { SEVERITY as BADGE_SEVERITY_COLORS, KIND as BADGE_KIND_COLORS, PROTOCOL as BADGE_PROTOCOL_COLORS, TONE as BADGE_TONE_COLORS }

package/src/components/ui/ClusterName.tsx

@@ -3,10 +3,18 @@ import { MiddleEllipsis } from './MiddleEllipsis'
 import { Tooltip } from './Tooltip'
 import { parseContextName } from '../../utils/context-name'
 import type { ParsedContextName } from '../../utils/context-name'
-import awsLogo from './provider-logos/aws.png'
-import awsLogoDark from './provider-logos/aws-dark.png'
-import gcpLogo from './provider-logos/gcp.png'
-import azureLogo from './provider-logos/azure.svg'
+import { assetUrl } from '../../utils/asset-url'
+import awsLogoAsset from './provider-logos/aws.png'
+import awsLogoDarkAsset from './provider-logos/aws-dark.png'
+import gcpLogoAsset from './provider-logos/gcp.png'
+import azureLogoAsset from './provider-logos/azure.svg'
+
+// assetUrl normalizes the bundler-specific asset-import type (string under Vite,
+// StaticImageData under webpack/Next) to a URL string usable in `<img src>`.
+const awsLogo = assetUrl(awsLogoAsset)
+const awsLogoDark = assetUrl(awsLogoDarkAsset)
+const gcpLogo = assetUrl(gcpLogoAsset)
+const azureLogo = assetUrl(azureLogoAsset)
 
 // ClusterName renders a kubectl context string with the meaningful
 // cluster identity surfaced as primary text and provider/region pushed

package/src/components/ui/PaneLoader.tsx

@@ -1,4 +1,9 @@
-import radarLoadingIcon from '../../assets/radar/radar-icon-loading.svg'
+import { assetUrl } from '../../utils/asset-url'
+import radarLoadingIconAsset from '../../assets/radar/radar-icon-loading.svg'
+
+// assetUrl normalizes the bundler-specific asset-import type (string under Vite,
+// StaticImageData under webpack/Next) to a URL string usable in `<img src>`.
+const radarLoadingIcon = assetUrl(radarLoadingIconAsset)
 
 // PaneLoader — center-of-pane loading state. Animated radar icon stacked
 // above a label so swapping the label across the loading chain doesn't

package/src/types/core.ts

@@ -554,6 +554,8 @@ export interface HelmRelease {
   status: string
   revision: number
   updated: string // ISO date string
+  lastOperation?: HelmOperation
+  operations?: HelmOperation[]
   // Health summary from owned resources
   resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
   healthIssue?: string    // Primary issue if unhealthy (e.g., "OOMKilled")
@@ -574,6 +576,27 @@ export interface HelmRevision {
   updated: string // ISO date string
 }
 
+export type HelmOperationKind = 'release_failed' | 'upgrade_failed' | 'upgrade_rolled_back' | 'rollback' | 'pending'
+export type HelmOperationStatus = 'failed' | 'rolled_back' | 'completed' | 'stuck_pending'
+export type HelmOperationConfidence = 'high' | 'medium' | 'low'
+export type HelmOperationSource = 'helm_status' | 'helm_history'
+
+export interface HelmOperation {
+  kind: HelmOperationKind
+  status: HelmOperationStatus
+  source: HelmOperationSource
+  confidence: HelmOperationConfidence
+  message: string
+  evidence?: string
+  failureDescription?: string
+  revision?: number
+  failedRevision?: number
+  rollbackRevision?: number
+  targetRevision?: number
+  pendingStatus?: string
+  updated?: string
+}
+
 export interface HelmReleaseDetail {
   name: string
   namespace: string
@@ -589,9 +612,14 @@ export interface HelmReleaseDetail {
   notes: string
   history: HelmRevision[]
   resources: HelmOwnedResource[]
+  resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
+  healthIssue?: string
+  healthSummary?: string
   hooks?: HelmHook[]
   readme?: string
   dependencies?: ChartDependency[]
+  lastOperation?: HelmOperation
+  operations?: HelmOperation[]
   // When set, this release was installed by Flux's helm-controller — see
   // HelmRelease.managedByFluxHelmRelease for context. Format: "namespace/name".
   managedByFluxHelmRelease?: string
@@ -649,7 +677,16 @@ export interface UpgradeInfo {
   latestVersion?: string
   updateAvailable: boolean
   repositoryName?: string
+  // 'repository' for classic HTTP-repo matches, 'oci' when discovered via a
+  // registered OCI chart source. Absent when the source couldn't be determined.
+  sourceType?: 'repository' | 'oci'
+  // oci:// chart reference an OCI-sourced upgrade lives at (display only).
+  chartRef?: string
   error?: string
+  // True only when the error is a genuinely untracked source (registering a
+  // chart source could fix it) — NOT for repo-side errors like a stale index or
+  // classic ambiguity. Gates the "track source" affordance.
+  untracked?: boolean
 }
 
 // Batch upgrade info keyed by "storageNamespace/name".

package/src/utils/asset-url.ts

@@ -0,0 +1,13 @@
+// k8s-ui ships TS source, so each consumer's bundler types asset imports
+// differently: Vite resolves `import x from './x.png'` to a URL string, while
+// webpack/Next resolves it to a StaticImageData object. Reading `.src` off the
+// object (vs Vite's bare string) yields the bundler's own emitted URL, which is
+// the one that's correct in both client and SSR output — unlike
+// `new URL(asset, import.meta.url)`, which can produce a `file://` URL under SSR.
+// The structural `{ src: string }` type matches Next's StaticImageData without
+// depending on the Next-only type, so this also type-checks under Vite.
+export type AssetImport = string | { src: string }
+
+export function assetUrl(asset: AssetImport): string {
+  return typeof asset === 'string' ? asset : asset.src
+}