@skyhook-io/k8s-ui 1.8.5 → 1.8.7

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

@@ -1,6 +1,6 @@
 import { Globe, ArrowRight, Network, Filter } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
 interface HTTPRouteRendererProps {
@@ -77,7 +77,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
               hostnames.length > 0 ? (
                 <div className="flex flex-wrap gap-1">
                   {hostnames.map((h: string) => (
-                    <span key={h} className="badge bg-theme-elevated text-theme-text-secondary">{h}</span>
+                    <Badge key={h} tone="structural">{h}</Badge>
                   ))}
                 </div>
               ) : (
@@ -148,9 +148,9 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                   {matches.map((match: any, matchIdx: number) => (
                     <div key={matchIdx} className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
                       {match.method && (
-                        <span className="px-1.5 py-0.5 bg-blue-500/20 text-blue-400 rounded font-medium">
+                        <Badge tone="structural" size="sm">
                           {match.method}
-                        </span>
+                        </Badge>
                       )}
                       {match.path && (
                         <span>
@@ -201,9 +201,9 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                       <Filter className="w-3 h-3 text-theme-text-tertiary" />
                       {filters.map((filter: any, filterIdx: number) => (
                         <span key={filterIdx} className="inline-flex items-center gap-1">
-                          <span className="px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded">
+                          <Badge tone="accent1" size="sm">
                             {filter.type}
-                          </span>
+                          </Badge>
                           {filter.type === 'RequestHeaderModifier' && filter.requestHeaderModifier && (
                             <span className="text-theme-text-tertiary">
                               {summarizeHeaderModifier(filter.requestHeaderModifier)}
@@ -263,20 +263,14 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                   </div>
                   <div className="flex flex-wrap gap-2">
                     {accepted && (
-                      <span className={clsx(
-                        'badge',
-                        accepted.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
-                      )}>
+                      <Badge severity={accepted.status === 'True' ? 'success' : 'error'}>
                         {accepted.status === 'True' ? 'Accepted' : 'Not Accepted'}
-                      </span>
+                      </Badge>
                     )}
                     {resolved && (
-                      <span className={clsx(
-                        'badge',
-                        resolved.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
-                      )}>
+                      <Badge severity={resolved.status === 'True' ? 'success' : 'warning'}>
                         {resolved.status === 'True' ? 'Refs Resolved' : 'Unresolved Refs'}
-                      </span>
+                      </Badge>
                     )}
                   </div>
                   {accepted?.message && accepted.status === 'False' && (

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

@@ -1,6 +1,6 @@
 import { Database, CheckCircle2, Shield } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import { formatAge } from '../resource-utils'
 import { formatBytes } from '../../../utils/format'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
@@ -58,12 +58,9 @@ export function HelmRepositoryRenderer({ data }: HelmRepositoryRendererProps) {
           <Property
             label="Type"
             value={
-              <span className={clsx(
-                'badge',
-                isOCI ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'
-              )}>
+              <Badge tone={isOCI ? 'accent2' : 'accent1'}>
                 {isOCI ? 'OCI' : 'HTTP'}
-              </span>
+              </Badge>
             }
           />
           {spec.provider && <Property label="Provider" value={spec.provider} />}

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

@@ -1,18 +1,17 @@
 import { Shield } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, KeyValueBadgeList } from '../../ui/drawer-components'
+import { Badge, type BadgeSeverity } from '../../ui/Badge'
 import {
   getAuthorizationPolicyAction,
   getAuthorizationPolicyRules,
   getAuthorizationPolicySelector,
 } from '../resource-utils-istio'
-import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
-const actionColors: Record<string, string> = {
-  ALLOW: 'bg-green-500/20 text-green-400',
-  DENY: 'bg-red-500/20 text-red-400',
-  CUSTOM: 'bg-blue-500/20 text-blue-400',
-  AUDIT: 'bg-yellow-500/20 text-yellow-400',
+const actionSeverity: Record<string, BadgeSeverity> = {
+  ALLOW: 'success',
+  DENY: 'error',
+  CUSTOM: 'info',
+  AUDIT: 'warning',
 }
 
 interface IstioAuthorizationPolicyRendererProps {
@@ -51,12 +50,9 @@ export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPol
       <Section title="Authorization Policy" icon={Shield} defaultExpanded>
         <PropertyList>
           <Property label="Action" value={
-            <span className={clsx(
-              'badge',
-              actionColors[action] || BADGE_INACTIVE
-            )}>
+            <Badge severity={actionSeverity[action] ?? 'neutral'}>
               {action}
-            </span>
+            </Badge>
           } />
           <Property label="Scope" value={hasSelector ? 'Workload-scoped' : 'Namespace-wide'} />
           <Property label="Rules" value={String(rules.length)} />
@@ -88,24 +84,24 @@ export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPol
                     {rule.from.map((f: any, fi: number) => (
                       <div key={fi} className="flex flex-wrap gap-1 mb-1">
                         {f.source?.principals?.map((p: string, pi: number) => (
-                          <span key={`p-${pi}`} className="badge-sm bg-blue-500/10 text-blue-400">
+                          <Badge key={`p-${pi}`} tone="structural" size="sm">
                             principal: {p}
-                          </span>
+                          </Badge>
                         ))}
                         {f.source?.namespaces?.map((n: string, ni: number) => (
-                          <span key={`n-${ni}`} className="badge-sm bg-purple-500/10 text-purple-400">
+                          <Badge key={`n-${ni}`} tone="structural" size="sm">
                             namespace: {n}
-                          </span>
+                          </Badge>
                         ))}
                         {f.source?.ipBlocks?.map((ip: string, ipi: number) => (
-                          <span key={`ip-${ipi}`} className="badge-sm bg-orange-500/10 text-orange-400">
+                          <Badge key={`ip-${ipi}`} tone="structural" size="sm">
                             IP: {ip}
-                          </span>
+                          </Badge>
                         ))}
                         {f.source?.requestPrincipals?.map((rp: string, rpi: number) => (
-                          <span key={`rp-${rpi}`} className="badge-sm bg-cyan-500/10 text-cyan-400">
+                          <Badge key={`rp-${rpi}`} tone="structural" size="sm">
                             reqPrincipal: {rp}
-                          </span>
+                          </Badge>
                         ))}
                       </div>
                     ))}
@@ -119,24 +115,24 @@ export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPol
                     {rule.to.map((t: any, ti: number) => (
                       <div key={ti} className="flex flex-wrap gap-1 mb-1">
                         {t.operation?.hosts?.map((h: string, hi: number) => (
-                          <span key={`h-${hi}`} className="badge-sm bg-blue-500/10 text-blue-400">
+                          <Badge key={`h-${hi}`} tone="structural" size="sm">
                             host: {h}
-                          </span>
+                          </Badge>
                         ))}
                         {t.operation?.ports?.map((p: string, pi: number) => (
-                          <span key={`p-${pi}`} className="badge-sm bg-orange-500/10 text-orange-400">
+                          <Badge key={`p-${pi}`} tone="structural" size="sm">
                             port: {p}
-                          </span>
+                          </Badge>
                         ))}
                         {t.operation?.methods?.map((m: string, mi: number) => (
-                          <span key={`m-${mi}`} className="badge-sm bg-green-500/10 text-green-400">
+                          <Badge key={`m-${mi}`} tone="structural" size="sm">
                             method: {m}
-                          </span>
+                          </Badge>
                         ))}
                         {t.operation?.paths?.map((p: string, pi: number) => (
-                          <span key={`path-${pi}`} className="badge-sm bg-purple-500/10 text-purple-400">
+                          <Badge key={`path-${pi}`} tone="structural" size="sm">
                             path: {p}
-                          </span>
+                          </Badge>
                         ))}
                       </div>
                     ))}

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

@@ -1,23 +1,12 @@
 import { Globe, Lock } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, KeyValueBadgeList } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import {
   getIstioGatewayStatus,
   getIstioGatewayServers,
   getIstioGatewaySelector,
 } from '../resource-utils-istio'
-import { BADGE_INACTIVE } from '../../../utils/badge-colors'
-
-const protocolColors: Record<string, string> = {
-  HTTP: 'bg-blue-500/20 text-blue-400',
-  HTTPS: 'bg-green-500/20 text-green-400',
-  HTTP2: 'bg-blue-500/20 text-blue-400',
-  GRPC: 'bg-purple-500/20 text-purple-400',
-  TCP: 'bg-orange-500/20 text-orange-400',
-  TLS: 'bg-green-500/20 text-green-400',
-  MONGO: 'bg-emerald-500/20 text-emerald-400',
-  MYSQL: 'bg-cyan-500/20 text-cyan-400',
-}
 
 interface IstioGatewayRendererProps {
   data: any
@@ -72,12 +61,9 @@ export function IstioGatewayRenderer({ data }: IstioGatewayRendererProps) {
                       <span className="text-sm font-medium text-theme-text-primary">
                         {server.port.name || `Port ${server.port.number}`}
                       </span>
-                      <span className={clsx(
-                        'px-1.5 py-0.5 rounded text-[10px] font-medium',
-                        protocolColors[protocol] || BADGE_INACTIVE
-                      )}>
+                      <Badge protocol={protocol} size="sm">
                         {protocol}:{server.port.number}
-                      </span>
+                      </Badge>
                     </div>
                   </div>
 
@@ -93,16 +79,23 @@ export function IstioGatewayRenderer({ data }: IstioGatewayRendererProps) {
                       <>
                         <div>
                           <span className="text-theme-text-tertiary">TLS Mode: </span>
-                          <span className={clsx(
-                            'px-1.5 py-0.5 rounded text-[10px] font-medium',
-                            server.tls.mode === 'SIMPLE' || server.tls.mode === 'MUTUAL'
-                              ? 'bg-green-500/20 text-green-400'
-                              : server.tls.mode === 'PASSTHROUGH'
-                                ? 'bg-blue-500/20 text-blue-400'
-                                : BADGE_INACTIVE
-                          )}>
+                          <Badge
+                            // Every TLS server row already shows a teal HTTPS/TLS protocol pill, so
+                            // a teal mode badge would collide. PASSTHROUGH uses `note` (the mode where
+                            // the gateway does not terminate TLS — the one worth flagging) to stay clear.
+                            tone={
+                              server.tls.mode === 'SIMPLE'
+                                ? 'accent1'
+                                : server.tls.mode === 'MUTUAL' || server.tls.mode === 'ISTIO_MUTUAL'
+                                  ? 'accent2'
+                                  : server.tls.mode === 'PASSTHROUGH' || server.tls.mode === 'AUTO_PASSTHROUGH'
+                                    ? 'note'
+                                    : 'structural'
+                            }
+                            size="sm"
+                          >
                             {server.tls.mode || 'SIMPLE'}
-                          </span>
+                          </Badge>
                         </div>
                         {server.tls.credentialName && (
                           <div>

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

@@ -1,6 +1,7 @@
 import { Network, Route } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import {
   getVirtualServiceStatus,
   getVirtualServiceHostsList,
@@ -62,7 +63,7 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
                 {gateways.map((gw, i) => {
                   // Gateway reference can be "namespace/name" or just "name" or "mesh"
                   if (gw === 'mesh') {
-                    return <span key={i} className="badge-sm bg-theme-hover text-theme-text-secondary">mesh</span>
+                    return <Badge key={i} tone="structural" size="sm">mesh</Badge>
                   }
                   const parts = gw.split('/')
                   const gwNs = parts.length === 2 ? parts[0] : ns
@@ -95,19 +96,19 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
                     {route.name || `Route ${i + 1}`}
                   </span>
                   {route.timeout && (
-                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-[10px] text-theme-text-secondary">
+                    <Badge tone="structural" size="sm">
                       timeout: {route.timeout}
-                    </span>
+                    </Badge>
                   )}
                   {route.fault && (
-                    <span className="px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded text-[10px] font-medium">
+                    <Badge severity="warning" size="sm">
                       fault injection
-                    </span>
+                    </Badge>
                   )}
                   {route.mirror && (
-                    <span className="px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded text-[10px] font-medium">
+                    <Badge tone="note" size="sm">
                       mirroring
-                    </span>
+                    </Badge>
                   )}
                 </div>
 
@@ -119,19 +120,19 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
                       {route.match.map((m: any, mi: number) => (
                         <div key={mi} className="flex flex-wrap gap-1 text-xs">
                           {m.uri && (
-                            <span className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded">
+                            <Badge tone="structural" size="sm">
                               URI {Object.keys(m.uri)[0]}: {Object.values(m.uri)[0] as string}
-                            </span>
+                            </Badge>
                           )}
                           {m.method && (
-                            <span className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded">
+                            <Badge tone="structural" size="sm">
                               Method: {m.method.exact || Object.values(m.method)[0]}
-                            </span>
+                            </Badge>
                           )}
                           {m.headers && Object.entries(m.headers).map(([hk, hv]: [string, any]) => (
-                            <span key={hk} className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded">
+                            <Badge key={hk} tone="structural" size="sm">
                               Header {hk}: {typeof hv === 'object' ? Object.values(hv)[0] as string : String(hv)}
-                            </span>
+                            </Badge>
                           ))}
                         </div>
                       ))}
@@ -174,9 +175,9 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
                               <span className="text-theme-text-tertiary">:{destPort}</span>
                             )}
                             {destSubset && (
-                              <span className="px-1.5 py-0.5 bg-theme-hover rounded text-theme-text-secondary">
+                              <Badge tone="structural" size="sm">
                                 subset: {destSubset}
-                              </span>
+                              </Badge>
                             )}
                           </div>
                         )
@@ -201,16 +202,16 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
                 {route.fault && (
                   <div className="flex flex-wrap gap-2 text-xs">
                     {route.fault.delay && (
-                      <span className="px-1.5 py-0.5 bg-yellow-500/10 text-yellow-400 rounded">
+                      <Badge severity="warning" size="sm">
                         Delay: {route.fault.delay.fixedDelay}
                         {route.fault.delay.percentage?.value && ` (${route.fault.delay.percentage.value}%)`}
-                      </span>
+                      </Badge>
                     )}
                     {route.fault.abort && (
-                      <span className="px-1.5 py-0.5 bg-red-500/10 text-red-400 rounded">
+                      <Badge severity="error" size="sm">
                         Abort: HTTP {route.fault.abort.httpStatus}
                         {route.fault.abort.percentage?.value && ` (${route.fault.abort.percentage.value}%)`}
-                      </span>
+                      </Badge>
                     )}
                   </div>
                 )}

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`)
@@ -35,11 +39,6 @@ function getJobProblems(data: any): string[] {
     }
   }
 
-  // Check for suspended
-  if (spec.suspend) {
-    problems.push('Job is suspended — pods will not be created')
-  }
-
   return problems
 }
 
@@ -62,6 +61,7 @@ export function JobRenderer({ data }: JobRendererProps) {
 
   // Check if job completed successfully
   const isComplete = conditions.some((c: any) => c.type === 'Complete' && c.status === 'True')
+  const isSuspended = spec.suspend === true
 
   return (
     <>
@@ -70,6 +70,11 @@ export function JobRenderer({ data }: JobRendererProps) {
         <AlertBanner variant="error" title="Job Issues" items={problems} />
       )}
 
+      {/* Suspended is an intentional state, not a fault — keep it informational. */}
+      {isSuspended && !hasProblems && (
+        <AlertBanner variant="info" title="Job Suspended" message="Pods will not be created until this Job is resumed." />
+      )}
+
       {/* Success banner */}
       {isComplete && !hasProblems && (
         <AlertBanner variant="success" title="Job Completed Successfully" />

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/KnativeNetworkingRenderer.tsx

@@ -1,6 +1,7 @@
 import { Network, ShieldCheck, Server, Globe } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import { kindToPlural } from '../../../utils/navigation'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
@@ -43,14 +44,14 @@ export function KnativeIngressRenderer({ data }: RendererProps) {
               <div key={i} className="card-inner-lg">
                 <div className="flex flex-wrap gap-1 mb-2">
                   {(rule.hosts || []).map((host: string, hi: number) => (
-                    <span key={hi} className="badge-sm bg-blue-500/10 text-blue-400">
+                    <Badge key={hi} size="sm" tone="structural">
                       {host}
-                    </span>
+                    </Badge>
                   ))}
                   {rule.visibility && (
-                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-[10px] text-theme-text-secondary">
+                    <Badge size="sm" tone="structural">
                       {rule.visibility}
-                    </span>
+                    </Badge>
                   )}
                 </div>
                 {rule.http?.paths && rule.http.paths.length > 0 && (
@@ -117,9 +118,9 @@ export function KnativeCertificateRenderer({ data }: RendererProps) {
         <Section title={`DNS Names (${dnsNames.length})`} defaultExpanded>
           <div className="flex flex-wrap gap-1">
             {dnsNames.map((name: string, i: number) => (
-              <span key={i} className="badge-sm bg-theme-elevated text-theme-text-secondary">
+              <Badge key={i} size="sm" tone="structural">
                 {name}
-              </span>
+              </Badge>
             ))}
           </div>
         </Section>
@@ -157,12 +158,9 @@ export function ServerlessServiceRenderer({ data, onNavigate }: RendererProps) {
             </span>
           } />
           <Property label="Mode" value={mode ? (
-            <span className={clsx(
-              'badge',
-              mode === 'Proxy' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-green-500/20 text-green-400'
-            )}>
+            <Badge tone={mode === 'Proxy' ? 'accent1' : 'accent2'}>
               {mode}
-            </span>
+            </Badge>
           ) : undefined} />
           <Property label="Activators" value={numActivators != null ? String(numActivators) : undefined} />
           <Property label="Protocol" value={protocolType} />

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."
         />
       )}