@skyhook-io/k8s-ui 1.4.0 → 1.4.2

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

@@ -1,4 +1,4 @@
-import { Server, Settings, Shield, Cpu, Tag } from 'lucide-react'
+import { Server, Settings, Shield, Cpu, Tag, BarChart3 } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import {
@@ -9,6 +9,16 @@ import {
   getNodePoolWeight,
 } from '../resource-utils-karpenter'
 
+function formatCpuCores(value: string): string {
+  // Karpenter status.resources CPU is typically in millicores (e.g. "12000m") or cores (e.g. "12")
+  if (value.endsWith('m')) {
+    const millis = parseInt(value, 10)
+    if (!isNaN(millis)) return String(millis / 1000)
+  }
+  return value
+}
+
+
 interface KarpenterNodePoolRendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
@@ -28,6 +38,9 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
   const templateLabels = spec.template?.metadata?.labels || {}
   const templateExpireAfter = spec.template?.spec?.expireAfter
   const nodeClassRef = spec.template?.spec?.nodeClassRef
+  const templateTaints = spec.template?.spec?.taints || []
+  const templateStartupTaints = spec.template?.spec?.startupTaints || []
+  const statusResources = status.resources || {}
 
   return (
     <>
@@ -77,6 +90,26 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
         </PropertyList>
       </Section>
 
+      {/* Resource Usage — from status.resources vs spec.limits */}
+      {(statusResources.cpu || statusResources.memory) && (
+        <Section title="Resource Usage" icon={BarChart3} defaultExpanded>
+          <PropertyList>
+            {statusResources.cpu && (
+              <Property
+                label="CPU"
+                value={`${formatCpuCores(statusResources.cpu)}${spec.limits?.cpu ? ` / ${formatCpuCores(spec.limits.cpu)}` : ''}`}
+              />
+            )}
+            {statusResources.memory && (
+              <Property
+                label="Memory"
+                value={`${statusResources.memory}${spec.limits?.memory ? ` / ${spec.limits.memory}` : ''}`}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
       {/* Disruption */}
       <Section title="Disruption" icon={Shield}>
         <PropertyList>
@@ -118,6 +151,38 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
         </Section>
       )}
 
+      {/* Template Taints */}
+      {templateTaints.length > 0 && (
+        <Section title={`Template Taints (${templateTaints.length})`} icon={Shield} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {templateTaints.map((taint: any, i: number) => (
+              <span
+                key={i}
+                className="badge-sm bg-theme-hover text-theme-text-secondary"
+              >
+                {taint.key}={taint.value || ''}:{taint.effect || ''}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Template Startup Taints */}
+      {templateStartupTaints.length > 0 && (
+        <Section title={`Startup Taints (${templateStartupTaints.length})`} icon={Shield} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {templateStartupTaints.map((taint: any, i: number) => (
+              <span
+                key={i}
+                className="badge-sm bg-theme-hover text-theme-text-secondary"
+              >
+                {taint.key}={taint.value || ''}:{taint.effect || ''}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
       {/* Requirements */}
       {requirements.length > 0 && (
         <Section title={`Requirements (${requirements.length})`} icon={Settings} defaultExpanded>

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

@@ -46,6 +46,9 @@ export function KedaScaledJobRenderer({ data }: KedaScaledJobRendererProps) {
           {spec.failedJobsHistoryLimit !== undefined && (
             <Property label="Failure History" value={String(spec.failedJobsHistoryLimit)} />
           )}
+          {spec.minReplicaCount !== undefined && (
+            <Property label="Min Replicas" value={String(spec.minReplicaCount)} />
+          )}
           {spec.maxReplicaCount !== undefined && (
             <Property label="Max Replicas" value={String(spec.maxReplicaCount)} />
           )}

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

@@ -1,4 +1,4 @@
-import { Cpu } from 'lucide-react'
+import { Cpu, Settings } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import {
@@ -12,6 +12,16 @@ import {
   getScaledObjectCooldownPeriod,
 } from '../resource-utils-keda'
 
+function summarizeScalingPolicies(policies: any[] | undefined, periodSeconds?: number): string {
+  if (!policies || policies.length === 0) return '-'
+  return policies.map((p: any) => {
+    const value = p.value ?? '?'
+    const type = p.type === 'Percent' ? '%' : ` pod${value !== 1 ? 's' : ''}`
+    const period = p.periodSeconds ?? periodSeconds ?? '?'
+    return `max ${value}${type}/${period}s`
+  }).join(', ')
+}
+
 interface KedaScaledObjectRendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
@@ -131,6 +141,50 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
         </Section>
       )}
 
+      {/* Advanced section */}
+      {data.spec?.advanced && (
+        <Section title="Advanced" icon={Settings} defaultExpanded={false}>
+          <PropertyList>
+            {data.spec.advanced.restoreToOriginalReplicaCount != null && (
+              <Property
+                label="Restore Original Replicas"
+                value={data.spec.advanced.restoreToOriginalReplicaCount ? 'Yes' : 'No'}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleUp && (
+              <Property
+                label="Scale Up"
+                value={summarizeScalingPolicies(
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleUp.policies,
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleUp.stabilizationWindowSeconds
+                )}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleDown && (
+              <Property
+                label="Scale Down"
+                value={summarizeScalingPolicies(
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleDown.policies,
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleDown.stabilizationWindowSeconds
+                )}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleUp?.stabilizationWindowSeconds != null && (
+              <Property
+                label="Scale Up Stabilization"
+                value={`${data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleUp.stabilizationWindowSeconds}s`}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleDown?.stabilizationWindowSeconds != null && (
+              <Property
+                label="Scale Down Stabilization"
+                value={`${data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleDown.stabilizationWindowSeconds}s`}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
       <ConditionsSection conditions={conditions} />
     </>
   )

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

@@ -19,6 +19,7 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
   const vault = spec.hashiCorpVault
   const azureKeyVault = spec.azureKeyVault
   const awsSecretManager = spec.awsSecretManager
+  const gcpSecretManager = spec.gcpSecretManager
   const podIdentity = spec.podIdentity
 
   return (
@@ -145,6 +146,28 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
         </Section>
       )}
 
+      {/* GCP Secret Manager */}
+      {gcpSecretManager && (
+        <Section title="GCP Secret Manager" icon={Cloud}>
+          <PropertyList>
+            {gcpSecretManager.credentials?.clientSecret?.name && (
+              <Property label="Credentials Secret" value={gcpSecretManager.credentials.clientSecret.name} />
+            )}
+          </PropertyList>
+          {gcpSecretManager.secrets && gcpSecretManager.secrets.length > 0 && (
+            <div className="mt-2 space-y-1">
+              <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Secrets</div>
+              {gcpSecretManager.secrets.map((s: any, i: number) => (
+                <div key={i} className="card-inner text-sm">
+                  <span className="text-theme-text-primary font-medium">{s.parameter}</span>
+                  <span className="text-theme-text-secondary ml-2">{s.id}{s.version ? ` (v${s.version})` : ''}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </Section>
+      )}
+
       {conditions.length > 0 && <ConditionsSection conditions={conditions} />}
     </>
   )

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

@@ -1,14 +1,15 @@
-import { Layers, FolderTree } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
+import { Layers, FolderTree, GitBranch } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts, ResourceLink } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { GitOpsStatusBadge, ManagedResourcesList, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, parseFluxInventory, type FluxCondition } from '../../../types/gitops'
 
 interface KustomizationRendererProps {
   data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
-export function KustomizationRenderer({ data }: KustomizationRendererProps) {
+export function KustomizationRenderer({ data, onNavigate }: KustomizationRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const conditions = (status.conditions || []) as FluxCondition[]
@@ -39,6 +40,23 @@ export function KustomizationRenderer({ data }: KustomizationRendererProps) {
     })
   }
 
+  // Revision mismatch detection — only flag when Ready=False to avoid false positives during active reconciliation
+  const isReadyFalse = conditions.find((c: any) => c.type === 'Ready')?.status === 'False'
+  if (
+    isReadyFalse &&
+    status.lastAppliedRevision &&
+    status.lastAttemptedRevision &&
+    status.lastAppliedRevision !== status.lastAttemptedRevision
+  ) {
+    problems.push({
+      color: 'red',
+      message: `Revision mismatch: attempted ${status.lastAttemptedRevision} but applied ${status.lastAppliedRevision} — the latest reconciliation failed.`,
+    })
+  }
+
+  // Dependencies
+  const dependsOn: Array<{ name: string; namespace?: string }> = spec.dependsOn || []
+
   // Source reference
   const sourceRef = spec.sourceRef || {}
 
@@ -94,6 +112,23 @@ export function KustomizationRenderer({ data }: KustomizationRendererProps) {
         </PropertyList>
       </Section>
 
+      {/* Dependencies */}
+      {dependsOn.length > 0 && (
+        <Section title={`Dependencies (${dependsOn.length})`} icon={GitBranch}>
+          <div className="flex flex-wrap gap-1">
+            {dependsOn.map((dep, idx) => (
+              <ResourceLink
+                key={idx}
+                name={dep.name}
+                kind="kustomizations"
+                namespace={dep.namespace || data.metadata?.namespace || ''}
+                onNavigate={onNavigate}
+              />
+            ))}
+          </div>
+        </Section>
+      )}
+
       {/* Health checks */}
       {spec.healthChecks && spec.healthChecks.length > 0 && (
         <Section title={`Health Checks (${spec.healthChecks.length})`} defaultExpanded={false}>

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

@@ -1,6 +1,6 @@
 import { Shield, ArrowDownToLine, ArrowUpFromLine, GitFork } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Section, LabelSelectorDisplay } from '../../ui/drawer-components'
 import { NetworkPolicyDiagram } from './NetworkPolicyDiagram'
 
 interface NetworkPolicyRendererProps {
@@ -14,8 +14,6 @@ export function NetworkPolicyRenderer({ data }: NetworkPolicyRendererProps) {
   const ingress: any[] | undefined = spec.ingress
   const egress: any[] | undefined = spec.egress
 
-  const matchLabels = podSelector.matchLabels || {}
-  const hasMatchLabels = Object.keys(matchLabels).length > 0
   const hasIngress = policyTypes.includes('Ingress')
   const hasEgress = policyTypes.includes('Egress')
 
@@ -30,27 +28,10 @@ export function NetworkPolicyRenderer({ data }: NetworkPolicyRendererProps) {
       )}
 
       <Section title="Target" icon={Shield}>
-        <PropertyList>
-          <Property
-            label="Pod Selector"
-            value={hasMatchLabels ? undefined : 'All pods in namespace'}
-          />
-        </PropertyList>
-        {hasMatchLabels && (
-          <div className="mt-2">
-            <div className="text-xs text-theme-text-tertiary mb-1">Pod Selector</div>
-            <div className="flex flex-wrap gap-1">
-              {Object.entries(matchLabels).map(([k, v]) => (
-                <span
-                  key={k}
-                  className="badge bg-theme-elevated text-theme-text-secondary"
-                >
-                  {k}={String(v)}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
+        <div className="mt-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">Pod Selector</div>
+          <LabelSelectorDisplay selector={podSelector} emptyText="All pods in namespace" />
+        </div>
         {policyTypes.length > 0 && (
           <div className="mt-2">
             <div className="text-xs text-theme-text-tertiary mb-1">Policy Types</div>
@@ -152,49 +133,19 @@ function IngressEgressRuleCard({
 
 function PeerEntry({ peer }: { peer: any }) {
   if (peer.podSelector) {
-    const labels = peer.podSelector.matchLabels || {}
-    const hasLabels = Object.keys(labels).length > 0
     return (
       <div className="text-sm">
         <span className="text-theme-text-secondary text-xs">podSelector: </span>
-        {hasLabels ? (
-          <span className="inline-flex flex-wrap gap-1 align-middle">
-            {Object.entries(labels).map(([k, v]) => (
-              <span
-                key={k}
-                className="badge bg-theme-elevated text-theme-text-secondary"
-              >
-                {k}={String(v)}
-              </span>
-            ))}
-          </span>
-        ) : (
-          <span className="text-xs text-theme-text-tertiary">all pods</span>
-        )}
+        <LabelSelectorDisplay selector={peer.podSelector} emptyText="all pods" inline />
       </div>
     )
   }
 
   if (peer.namespaceSelector) {
-    const labels = peer.namespaceSelector.matchLabels || {}
-    const hasLabels = Object.keys(labels).length > 0
     return (
       <div className="text-sm">
         <span className="text-theme-text-secondary text-xs">namespaceSelector: </span>
-        {hasLabels ? (
-          <span className="inline-flex flex-wrap gap-1 align-middle">
-            {Object.entries(labels).map(([k, v]) => (
-              <span
-                key={k}
-                className="badge bg-theme-elevated text-theme-text-secondary"
-              >
-                {k}={String(v)}
-              </span>
-            ))}
-          </span>
-        ) : (
-          <span className="text-xs text-theme-text-tertiary">all namespaces</span>
-        )}
+        <LabelSelectorDisplay selector={peer.namespaceSelector} emptyText="all namespaces" inline />
       </div>
     )
   }

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

@@ -1,6 +1,5 @@
-import { Package, AlertTriangle, CheckCircle2 } from 'lucide-react'
-import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { Package, CheckCircle2 } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { formatBytes } from '../../../utils/format'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
@@ -36,45 +35,7 @@ export function OCIRepositoryRenderer({ data }: OCIRepositoryRendererProps) {
 
   return (
     <>
-      {/* Problem alerts */}
-      {problems.map((problem, i) => (
-        <div
-          key={i}
-          className={clsx(
-            'mb-4 p-3 border rounded-lg',
-            problem.color === 'red'
-              ? 'bg-red-500/10 border-red-500/30'
-              : 'bg-yellow-500/10 border-yellow-500/30'
-          )}
-        >
-          <div className="flex items-start gap-2">
-            <AlertTriangle
-              className={clsx(
-                'w-4 h-4 mt-0.5 shrink-0',
-                problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-              )}
-            />
-            <div className="flex-1 min-w-0">
-              <div
-                className={clsx(
-                  'text-sm font-medium',
-                  problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-                )}
-              >
-                {problem.color === 'red' ? 'Issue Detected' : 'Warning'}
-              </div>
-              <div
-                className={clsx(
-                  'text-xs mt-1',
-                  problem.color === 'red' ? 'text-red-300/80' : 'text-yellow-300/80'
-                )}
-              >
-                {problem.message}
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
+      <ProblemAlerts problems={problems} />
 
       {/* Status section */}
       <Section title="Status">

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

@@ -1,6 +1,6 @@
 import { Shield, Activity } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, LabelSelectorDisplay, AlertBanner } from '../../ui/drawer-components'
 
 interface PodDisruptionBudgetRendererProps {
   data: any
@@ -9,8 +9,7 @@ interface PodDisruptionBudgetRendererProps {
 export function PodDisruptionBudgetRenderer({ data }: PodDisruptionBudgetRendererProps) {
   const spec = data.spec || {}
   const status = data.status || {}
-  const matchLabels = spec.selector?.matchLabels || {}
-  const hasSelector = Object.keys(matchLabels).length > 0
+  const selector = spec.selector
 
   // Determine budget type
   const hasMaxUnavailable = spec.maxUnavailable !== undefined && spec.maxUnavailable !== null
@@ -113,11 +112,7 @@ export function PodDisruptionBudgetRenderer({ data }: PodDisruptionBudgetRendere
       </Section>
 
       <Section title="Selector">
-        {hasSelector ? (
-          <KeyValueBadgeList items={matchLabels} />
-        ) : (
-          <div className="text-sm text-theme-text-tertiary">All pods in namespace</div>
-        )}
+        <LabelSelectorDisplay selector={selector} emptyText="All pods in namespace" />
       </Section>
 
       <ConditionsSection conditions={status.conditions} />

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

@@ -1,5 +1,5 @@
 import { Radio } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, LabelSelectorDisplay } from '../../ui/drawer-components'
 import {
   getPodMonitorEndpoints,
   getPodMonitorNamespaceSelector,
@@ -11,7 +11,7 @@ interface PodMonitorRendererProps {
 
 export function PodMonitorRenderer({ data }: PodMonitorRendererProps) {
   const endpoints = getPodMonitorEndpoints(data)
-  const selector = data.spec?.selector?.matchLabels
+  const selector = data.spec?.selector
   const conditions = data.status?.conditions
 
   return (
@@ -51,11 +51,9 @@ export function PodMonitorRenderer({ data }: PodMonitorRendererProps) {
         </Section>
       )}
 
-      {selector && Object.keys(selector).length > 0 && (
-        <Section title="Selector">
-          <KeyValueBadgeList items={selector} />
-        </Section>
-      )}
+      <Section title="Selector">
+        <LabelSelectorDisplay selector={selector} emptyText="No selector" />
+      </Section>
 
       <ConditionsSection conditions={conditions} />
     </>

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

@@ -2,7 +2,7 @@ import { useState, type ReactNode, type JSX } from 'react'
 import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen, List, Eye, EyeOff } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink } from '../../ui/drawer-components'
-import { formatResources, formatDuration } from '../resource-utils'
+import { formatResources, formatDuration, getPodProblems, SEVERITY_DOT_COLOR } from '../resource-utils'
 import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
 import type { ResolvedEnvFrom } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
@@ -77,70 +77,6 @@ interface PodRendererProps {
   resolvedEnvFrom?: ResolvedEnvFrom
 }
 
-// Extract problems from pod status and conditions
-function getPodProblems(data: any): string[] {
-  const problems: string[] = []
-  const phase = data.status?.phase
-  const conditions = data.status?.conditions || []
-  const containerStatuses = data.status?.containerStatuses || []
-  const initContainerStatuses = data.status?.initContainerStatuses || []
-
-  // Check phase
-  if (phase === 'Failed' || phase === 'Unknown') {
-    problems.push(`Pod is in ${phase} state`)
-  }
-
-  // Check conditions for scheduling/init issues
-  for (const cond of conditions) {
-    if (cond.status === 'False') {
-      if (cond.type === 'PodScheduled' && cond.reason) {
-        problems.push(`Scheduling: ${cond.reason}${cond.message ? ' - ' + cond.message : ''}`)
-      } else if (cond.type === 'Initialized' && cond.message) {
-        problems.push(`Init failed: ${cond.message}`)
-      } else if (cond.type === 'ContainersReady' && cond.reason === 'ContainersNotReady') {
-        // Will be covered by container status details
-      } else if (cond.message) {
-        problems.push(`${cond.type}: ${cond.message}`)
-      }
-    }
-  }
-
-  // Check init container failures
-  for (const initStatus of initContainerStatuses) {
-    if (initStatus.state?.waiting?.reason && initStatus.state.waiting.reason !== 'PodInitializing') {
-      problems.push(`Init container "${initStatus.name}": ${initStatus.state.waiting.reason}`)
-    }
-    if (initStatus.state?.terminated?.exitCode && initStatus.state.terminated.exitCode !== 0) {
-      problems.push(`Init container "${initStatus.name}" failed with exit code ${initStatus.state.terminated.exitCode}`)
-    }
-  }
-
-  // Check container issues (most important)
-  for (const status of containerStatuses) {
-    const waiting = status.state?.waiting
-    const terminated = status.state?.terminated
-
-    if (waiting?.reason && waiting.reason !== 'ContainerCreating') {
-      const msg = `Container "${status.name}": ${waiting.reason}`
-      if (waiting.reason === 'ImagePullBackOff' || waiting.reason === 'ErrImagePull') {
-        problems.push(msg + (waiting.message ? ` - ${waiting.message.slice(0, 100)}` : ''))
-      } else if (waiting.reason === 'CrashLoopBackOff') {
-        problems.push(msg + ' (container keeps crashing)')
-      } else {
-        problems.push(msg)
-      }
-    }
-
-    if (terminated?.reason === 'OOMKilled') {
-      problems.push(`Container "${status.name}" was OOMKilled - increase memory limit`)
-    } else if (terminated?.exitCode && terminated.exitCode !== 0) {
-      problems.push(`Container "${status.name}" exited with code ${terminated.exitCode}`)
-    }
-  }
-
-  return problems
-}
-
 // ── Env vars section — extracted to use hooks (useState for reveal) ──────────
 
 function SecretValueCell({ value }: { value: string }) {
@@ -189,13 +125,13 @@ function resolveEnvValueNode(env: any): JSX.Element {
   }
   if (env.valueFrom?.configMapKeyRef) {
     const { name, key } = env.valueFrom.configMapKeyRef
-    return <span className="text-blue-400/70 text-[10px] shrink-0 self-center px-1 py-0.5 bg-blue-500/10 rounded">configmap:{name}[{key}]</span>
+    return <span className="text-blue-700 dark:text-blue-400/80 text-[10px] shrink-0 self-center px-1 py-0.5 bg-blue-500/10 rounded">configmap:{name}[{key}]</span>
   }
   if (env.valueFrom?.fieldRef) {
-    return <span className="text-purple-400/70 break-all">field:{env.valueFrom.fieldRef.fieldPath}</span>
+    return <span className="text-purple-700 dark:text-purple-400/80 break-all">field:{env.valueFrom.fieldRef.fieldPath}</span>
   }
   if (env.valueFrom?.resourceFieldRef) {
-    return <span className="text-purple-400/70 break-all">resource:{env.valueFrom.resourceFieldRef.resource}</span>
+    return <span className="text-purple-700 dark:text-purple-400/80 break-all">resource:{env.valueFrom.resourceFieldRef.resource}</span>
   }
   return <span className="text-theme-text-primary break-all min-w-0">{env.value ?? ''}</span>
 }
@@ -218,10 +154,13 @@ function EnvVarsSection({
   resolvedEnvFrom?: ResolvedEnvFrom
 }) {
   const allContainers = [...initContainers, ...containers]
-  const multiContainer = allContainers.filter((c: any) => c.env?.length > 0 || c.envFrom?.length > 0).length > 1
+  const containersWithEnv = allContainers.filter((c: any) => c.env?.length > 0 || c.envFrom?.length > 0)
+  const multiContainer = containersWithEnv.length > 1
+  const totalVars = allContainers.reduce((sum: number, c: any) => sum + (c.env?.length || 0) + (c.envFrom?.length || 0), 0)
+  const subtitle = multiContainer ? `${totalVars} vars across ${containersWithEnv.length} containers` : `${totalVars} vars`
 
   return (
-    <Section title="Environment Variables" icon={List}>
+    <Section title={`Environment Variables  ·  ${subtitle}`} icon={List} defaultExpanded={false}>
       <div className="space-y-4">
         {allContainers.map((container: any) => {
           const envVars: any[] = container.env || []
@@ -247,7 +186,7 @@ function EnvVarsSection({
                       <div className="flex items-center gap-1.5 text-xs font-mono py-0.5">
                         <span className={clsx(
                           'shrink-0 px-1 py-0.5 rounded text-[10px]',
-                          isSecret ? 'bg-amber-500/10 dark:bg-yellow-500/10 text-amber-700 dark:text-yellow-400' : 'bg-blue-500/10 text-blue-400'
+                          isSecret ? 'bg-amber-500/10 dark:bg-yellow-500/10 text-amber-700 dark:text-yellow-400' : 'bg-blue-500/10 text-blue-700 dark:text-blue-400/80'
                         )}>
                           {prefix}
                         </span>
@@ -312,8 +251,8 @@ export function PodRenderer({
   const isRunning = data.status?.phase === 'Running'
 
   // Check for problems
-  const problems = getPodProblems(data)
-  const hasProblems = problems.length > 0
+  const podProblems = getPodProblems(data)
+  const hasProblems = podProblems.length > 0
 
   // Image filesystem modal state
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
@@ -379,7 +318,16 @@ export function PodRenderer({
     <>
       {/* Problems alert - shown at top when there are issues */}
       {hasProblems && (
-        <AlertBanner variant="error" title="Issues Detected" items={problems} />
+        <AlertBanner variant="error" title="Issues Detected">
+          <ul className="text-xs space-y-1">
+            {podProblems.map((p, i) => (
+              <li key={i} className="flex items-center gap-1.5">
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', SEVERITY_DOT_COLOR[p.severity])} />
+                <span className="text-red-600 dark:text-red-400">{p.message}</span>
+              </li>
+            ))}
+          </ul>
+        </AlertBanner>
       )}
 
       {/* Status section */}