@skyhook-io/k8s-ui 1.1.1 → 1.2.0

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

@@ -0,0 +1,207 @@
+import { Globe, Route, Layers, Lock } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ConditionsSection, ResourceLink } from '../../ui/drawer-components'
+import {
+  getHTTPProxyFQDN,
+  getHTTPProxyRouteCount,
+  getHTTPProxyServiceCount,
+  getHTTPProxyStatus,
+  hasHTTPProxyTLS,
+} from '../resource-utils-contour'
+
+interface ContourHTTPProxyRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; name: string; namespace: string }) => void
+}
+
+export function ContourHTTPProxyRenderer({ data, onNavigate }: ContourHTTPProxyRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const routes = spec.routes || []
+  const includes = spec.includes || []
+  const tls = spec.virtualhost?.tls
+  const tcpproxy = spec.tcpproxy
+  const ns = data.metadata?.namespace || ''
+  const conditions = status.conditions
+
+  const { label: statusLabel } = getHTTPProxyStatus(data)
+  const currentStatus = status.currentStatus?.toLowerCase()
+
+  return (
+    <>
+      {currentStatus === 'invalid' && (
+        <AlertBanner
+          variant="error"
+          title="Invalid HTTPProxy"
+          message={status.description || 'This HTTPProxy has an invalid configuration.'}
+        />
+      )}
+
+      {currentStatus === 'orphaned' && (
+        <AlertBanner
+          variant="warning"
+          title="Orphaned HTTPProxy"
+          message={status.description || 'This HTTPProxy is orphaned — it is not part of any valid delegation chain.'}
+        />
+      )}
+
+      <Section title="HTTPProxy" icon={Globe} defaultExpanded>
+        <PropertyList>
+          <Property label="FQDN" value={getHTTPProxyFQDN(data)} />
+          <Property label="TLS" value={hasHTTPProxyTLS(data) ? 'Enabled' : 'None'} />
+          <Property label="Status" value={statusLabel} />
+          <Property label="Routes" value={`${getHTTPProxyRouteCount(data)}`} />
+          <Property label="Services" value={`${getHTTPProxyServiceCount(data)}`} />
+        </PropertyList>
+      </Section>
+
+      <Section title={`Routes (${routes.length})`} icon={Route} defaultExpanded>
+        <div className="space-y-3">
+          {routes.map((route: any, i: number) => {
+            const services = route.services || []
+            const routeConditions = route.conditions || []
+
+            return (
+              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                {/* Conditions (prefix match, header match, etc.) */}
+                {routeConditions.length > 0 && (
+                  <div className="flex items-start gap-2 mb-2">
+                    <span className="text-sm font-medium text-theme-text-primary break-all">
+                      {routeConditions.map((c: any) => {
+                        if (c.prefix) return `prefix: ${c.prefix}`
+                        if (c.header) return `header: ${c.header.name} ${c.header.contains || c.header.exact || c.header.present ? 'match' : ''}`
+                        return JSON.stringify(c)
+                      }).join(', ')}
+                    </span>
+                  </div>
+                )}
+
+                {routeConditions.length === 0 && (
+                  <div className="flex items-start gap-2 mb-2">
+                    <span className="text-sm font-medium text-theme-text-primary">
+                      (no conditions)
+                    </span>
+                  </div>
+                )}
+
+                {/* Services */}
+                {services.length > 0 && (
+                  <div>
+                    <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">Services</div>
+                    <div className="space-y-1">
+                      {services.map((svc: any, si: number) => {
+                        const svcNs = svc.namespace || ns
+                        const port = svc.port ? `:${svc.port}` : ''
+                        const weight = svc.weight !== undefined ? ` (${svc.weight}%)` : ''
+
+                        return (
+                          <div key={si} className="flex items-center gap-2 text-xs">
+                            <ResourceLink
+                              name={svc.name}
+                              kind="services"
+                              namespace={svcNs}
+                              label={<span className="text-blue-400">{svc.name}{port}{weight}</span>}
+                              onNavigate={onNavigate}
+                            />
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+
+          {routes.length === 0 && (
+            <div className="text-sm text-theme-text-tertiary">No routes configured</div>
+          )}
+        </div>
+      </Section>
+
+      {includes.length > 0 && (
+        <Section title={`Includes (${includes.length})`} icon={Layers} defaultExpanded>
+          <div className="space-y-2">
+            {includes.map((inc: any, i: number) => {
+              const incNs = inc.namespace || ns
+              const incConditions = inc.conditions || []
+
+              return (
+                <div key={i} className="flex items-center gap-2 text-xs">
+                  <ResourceLink
+                    name={inc.name}
+                    kind="httpproxies"
+                    namespace={incNs}
+                    label={
+                      <span className="text-blue-400">
+                        {incNs !== ns ? `${incNs}/` : ''}{inc.name}
+                      </span>
+                    }
+                    onNavigate={onNavigate}
+                  />
+                  {incConditions.length > 0 && (
+                    <span className="text-theme-text-tertiary">
+                      ({incConditions.map((c: any) => c.prefix ? `prefix: ${c.prefix}` : JSON.stringify(c)).join(', ')})
+                    </span>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {tcpproxy && (
+        <Section title="TCP Proxy" icon={Route} defaultExpanded>
+          <div className="space-y-1">
+            {(tcpproxy.services || []).map((svc: any, i: number) => {
+              const port = svc.port ? `:${svc.port}` : ''
+              return (
+                <div key={i} className="flex items-center gap-2 text-xs">
+                  <ResourceLink
+                    name={svc.name}
+                    kind="services"
+                    namespace={svc.namespace || ns}
+                    label={<span className="text-blue-400">{svc.name}{port}</span>}
+                    onNavigate={onNavigate}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {tls && (
+        <Section title="TLS" icon={Lock} defaultExpanded>
+          <PropertyList>
+            {tls.secretName && (
+              <Property label="Secret" value={
+                <ResourceLink
+                  name={tls.secretName}
+                  kind="secrets"
+                  namespace={ns}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+            {tls.minimumProtocolVersion && (
+              <Property label="Min Protocol" value={tls.minimumProtocolVersion} />
+            )}
+            {tls.passthrough !== undefined && (
+              <Property label="Passthrough" value={tls.passthrough ? 'Yes' : 'No'} />
+            )}
+            {!tls.secretName && !tls.passthrough && (
+              <Property label="Mode" value="TLS termination (no explicit secret)" />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {conditions && conditions.length > 0 && (
+        <Section title="Status" defaultExpanded>
+          <ConditionsSection conditions={conditions} />
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -1,8 +1,10 @@
-import { useState, type ReactNode } from 'react'
-import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen } from 'lucide-react'
+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 { getResourceStatusColor } from '../../../utils/badge-colors'
+import type { ResolvedEnvFrom } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
 import { MetricsChart } from '../../ui/MetricsChart'
 
@@ -68,6 +70,11 @@ interface PodRendererProps {
   // Filesystem browser render props
   renderImageBrowser?: (props: { image: string; namespace: string; podName: string; pullSecrets: string[]; onClose: () => void; onSwitchToPodFiles?: () => void }) => ReactNode
   renderPodBrowser?: (props: { namespace: string; podName: string; containers: string[]; initialContainer: string; onClose: () => void; onSwitchToImageFiles: () => void }) => ReactNode
+  /**
+   * Resolved content for envFrom references.
+   * When provided, expands ConfigMap/Secret keys inline instead of showing "(all keys)".
+   */
+  resolvedEnvFrom?: ResolvedEnvFrom
 }
 
 // Extract problems from pod status and conditions
@@ -134,6 +141,148 @@ function getPodProblems(data: any): string[] {
   return problems
 }
 
+// ── Env vars section — extracted to use hooks (useState for reveal) ──────────
+
+function SecretValueCell({ value }: { value: string }) {
+  const [revealed, setRevealed] = useState(false)
+  return (
+    <span className="flex items-center gap-1 min-w-0">
+      <span className={clsx('break-all text-amber-700 dark:text-yellow-400/80', !revealed && 'blur-[3px] select-none')}>
+        {value || '•••'}
+      </span>
+      <button
+        onClick={() => setRevealed(r => !r)}
+        className="shrink-0 text-theme-text-tertiary hover:text-amber-700 dark:hover:text-yellow-400 transition-colors"
+        title={revealed ? 'Hide value' : 'Reveal value'}
+      >
+        {revealed ? <EyeOff className="w-3 h-3" /> : <Eye className="w-3 h-3" />}
+      </button>
+    </span>
+  )
+}
+
+function EnvRowShell({ name, children }: { name: string; children: ReactNode }) {
+  return (
+    <div className="flex items-start gap-1 text-xs font-mono py-0.5 border-b border-theme-border/30 last:border-0">
+      <span className="text-theme-text-secondary shrink-0 break-all">{name}</span>
+      <span className="text-theme-text-tertiary shrink-0">=</span>
+      {children}
+    </div>
+  )
+}
+
+function EnvRow({ name, value, isSecret }: { name: string; value: string; isSecret: boolean }) {
+  return (
+    <EnvRowShell name={name}>
+      {isSecret
+        ? <SecretValueCell value={value} />
+        : <span className="text-theme-text-primary break-all min-w-0">{value}</span>
+      }
+    </EnvRowShell>
+  )
+}
+
+function resolveEnvValueNode(env: any): JSX.Element {
+  if (env.valueFrom?.secretKeyRef) {
+    const { name, key } = env.valueFrom.secretKeyRef
+    return <span className="text-amber-700 dark:text-yellow-400/60 text-[10px] shrink-0 self-center px-1 py-0.5 bg-amber-500/10 dark:bg-yellow-500/10 rounded">secret:{name}[{key}]</span>
+  }
+  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>
+  }
+  if (env.valueFrom?.fieldRef) {
+    return <span className="text-purple-400/70 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-theme-text-primary break-all min-w-0">{env.value ?? ''}</span>
+}
+
+function EnvVarRow({ env }: { env: any }) {
+  return (
+    <EnvRowShell name={env.name}>
+      {resolveEnvValueNode(env)}
+    </EnvRowShell>
+  )
+}
+
+function EnvVarsSection({
+  initContainers,
+  containers,
+  resolvedEnvFrom,
+}: {
+  initContainers: any[]
+  containers: any[]
+  resolvedEnvFrom?: ResolvedEnvFrom
+}) {
+  const allContainers = [...initContainers, ...containers]
+  const multiContainer = allContainers.filter((c: any) => c.env?.length > 0 || c.envFrom?.length > 0).length > 1
+
+  return (
+    <Section title="Environment Variables" icon={List}>
+      <div className="space-y-4">
+        {allContainers.map((container: any) => {
+          const envVars: any[] = container.env || []
+          const envFrom: any[] = container.envFrom || []
+          if (!envVars.length && !envFrom.length) return null
+          return (
+            <div key={container.name}>
+              {/* Only show container name label when there are multiple containers with env vars */}
+              {multiContainer && (
+                <div className="text-xs font-medium text-theme-text-tertiary mb-2 uppercase tracking-wide">
+                  {container.name}
+                </div>
+              )}
+              <div className="space-y-1">
+                {/* envFrom — ConfigMap / Secret bulk injections */}
+                {envFrom.map((ef: any, i: number) => {
+                  const isSecret = !!ef.secretRef
+                  const sourceName = ef.configMapRef?.name ?? ef.secretRef?.name ?? 'unknown'
+                  const prefix = ef.configMapRef ? 'ConfigMap' : ef.secretRef ? 'Secret' : 'Source'
+                  const resolved = resolvedEnvFrom?.[sourceName]
+                  return (
+                    <div key={i} className="mb-1">
+                      <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'
+                        )}>
+                          {prefix}
+                        </span>
+                        <span className="text-theme-text-secondary">{sourceName}</span>
+                        {!resolved && <span className="text-theme-text-tertiary">(all keys)</span>}
+                      </div>
+                      {resolved && resolved.keys.length > 0 && (
+                        <div className="ml-2 mt-0.5">
+                          {resolved.keys.map((key) => (
+                            <EnvRow
+                              key={key}
+                              name={key}
+                              value={resolved.values[key] ?? ''}
+                              isSecret={isSecret}
+                            />
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )
+                })}
+
+                {/* Individual env vars */}
+                {envVars.map((env: any) => (
+                  <EnvVarRow key={env.name} env={env} />
+                ))}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </Section>
+  )
+}
+
 export function PodRenderer({
   data,
   onCopy,
@@ -151,6 +300,7 @@ export function PodRenderer({
   hideMetricsServer,
   renderImageBrowser,
   renderPodBrowser,
+  resolvedEnvFrom,
 }: PodRendererProps) {
   const containerStatuses = data.status?.containerStatuses || []
   const containers = data.spec?.containers || []
@@ -283,23 +433,20 @@ export function PodRenderer({
 
               // Status label and color
               let statusLabel: string
-              let statusColor: string
               if (isCompleted) {
                 statusLabel = 'Completed'
-                statusColor = 'bg-green-500/20 text-green-400'
               } else if (isFailed) {
                 statusLabel = `Exit ${exitCode}`
-                statusColor = 'bg-red-500/20 text-red-400'
               } else if (isInitRunning) {
                 statusLabel = 'Running'
-                statusColor = 'bg-blue-500/20 text-blue-400'
               } else if (isWaiting) {
                 statusLabel = state?.waiting?.reason || 'Waiting'
-                statusColor = 'bg-yellow-500/20 text-yellow-400'
               } else {
                 statusLabel = 'Pending'
-                statusColor = 'bg-gray-500/20 text-gray-400'
               }
+              const statusColor = getResourceStatusColor(
+                isCompleted ? 'succeeded' : isFailed ? 'failed' : isInitRunning ? 'running' : isWaiting ? 'waiting' : 'pending'
+              )
 
               // Build command string
               const command = container.command || container.args
@@ -553,6 +700,15 @@ export function PodRenderer({
         </div>
       </Section>
 
+      {/* Environment Variables */}
+      {[...initContainers, ...containers].some((c: any) => c.env?.length > 0 || c.envFrom?.length > 0) && (
+        <EnvVarsSection
+          initContainers={initContainers}
+          containers={containers}
+          resolvedEnvFrom={resolvedEnvFrom}
+        />
+      )}
+
       {/* Resource Usage (from metrics-server) — hidden when Prometheus has CPU/memory data */}
       {!hideMetricsServer && !!(metrics?.containers?.length || metricsHistory?.containers?.length || metricsHistory?.collectionError) && (
         <Section title="Resource Usage" icon={Activity} defaultExpanded>

package/src/components/resources/renderers/contour-cells.tsx

@@ -0,0 +1,48 @@
+// Contour cell components for ResourcesView table
+
+import { Shield } from 'lucide-react'
+import { Tooltip } from '../../ui/Tooltip'
+import {
+  getHTTPProxyFQDN,
+  getHTTPProxyRouteCount,
+  getHTTPProxyIncludeCount,
+  hasHTTPProxyTLS,
+  getHTTPProxyStatus,
+} from '../resource-utils-contour'
+
+export function HTTPProxyCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'fqdn': {
+      const fqdn = getHTTPProxyFQDN(resource)
+      return <span className="text-sm truncate" title={fqdn}>{fqdn}</span>
+    }
+    case 'routes':
+      return <span className="text-sm">{getHTTPProxyRouteCount(resource) || '-'}</span>
+    case 'includes': {
+      const count = getHTTPProxyIncludeCount(resource)
+      return <span className="text-sm">{count > 0 ? count : '-'}</span>
+    }
+    case 'tls': {
+      const hasTLS = hasHTTPProxyTLS(resource)
+      return hasTLS ? (
+        <Tooltip content="TLS Enabled">
+          <span>
+            <Shield className="w-4 h-4 text-green-400" />
+          </span>
+        </Tooltip>
+      ) : (
+        <span className="text-sm text-theme-text-tertiary">-</span>
+      )
+    }
+    case 'status': {
+      const { label } = getHTTPProxyStatus(resource)
+      const color = label === 'Valid' ? 'text-green-500'
+        : label === 'Invalid' ? 'text-red-500'
+        : label === 'Orphaned' ? 'text-yellow-500'
+        : 'text-theme-text-secondary'
+      return <span className={`text-sm ${color}`}>{label}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

package/src/components/resources/renderers/index.ts

@@ -103,3 +103,5 @@ export * from './WorkflowTemplateRenderer'
 export * from './WorkloadRenderer'
 export * from './TraefikIngressRouteRenderer'
 export * from './traefik-cells'
+export * from './ContourHTTPProxyRenderer'
+export * from './contour-cells'

package/src/components/resources/renderers/trivy-shared.tsx

@@ -1,30 +1,14 @@
 import { AlertBanner } from '../../ui/drawer-components'
+import {
+  VULN_SEVERITY_BADGE,
+  VULN_SEVERITY_BAR,
+  VULN_SEVERITY_TEXT,
+} from '../../../utils/badge-colors'
 
-// Shared severity color maps for all Trivy report renderers
-
-export const SEVERITY_BADGE_COLORS: Record<string, string> = {
-  CRITICAL: 'bg-red-500/20 text-red-400',
-  HIGH: 'bg-orange-500/20 text-orange-400',
-  MEDIUM: 'bg-yellow-500/20 text-yellow-400',
-  LOW: 'bg-blue-500/20 text-blue-400',
-  UNKNOWN: 'bg-gray-500/20 text-gray-400',
-}
-
-export const SEVERITY_BAR_COLORS: Record<string, string> = {
-  CRITICAL: 'bg-red-500',
-  HIGH: 'bg-orange-500',
-  MEDIUM: 'bg-yellow-500',
-  LOW: 'bg-blue-500',
-  UNKNOWN: 'bg-gray-500',
-}
-
-export const SEVERITY_TEXT_COLORS: Record<string, string> = {
-  CRITICAL: 'text-red-400',
-  HIGH: 'text-orange-400',
-  MEDIUM: 'text-yellow-400',
-  LOW: 'text-blue-400',
-  UNKNOWN: 'text-gray-400',
-}
+// Re-export from centralized badge-colors under the legacy names used by Trivy renderers
+export const SEVERITY_BADGE_COLORS = VULN_SEVERITY_BADGE
+export const SEVERITY_BAR_COLORS = VULN_SEVERITY_BAR
+export const SEVERITY_TEXT_COLORS = VULN_SEVERITY_TEXT
 
 export const SEVERITY_ORDER: Record<string, number> = {
   CRITICAL: 0,

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

@@ -0,0 +1,34 @@
+// Contour HTTPProxy CRD utility functions for resource list cells and detail renderers
+
+export function getHTTPProxyFQDN(resource: any): string {
+  return resource.spec?.virtualhost?.fqdn || '-'
+}
+
+export function getHTTPProxyStatus(resource: any): { status: string; label: string } {
+  const currentStatus = resource.status?.currentStatus?.toLowerCase()
+  if (currentStatus === 'valid') return { status: 'healthy', label: 'Valid' }
+  if (currentStatus === 'invalid') return { status: 'unhealthy', label: 'Invalid' }
+  if (currentStatus === 'orphaned') return { status: 'degraded', label: 'Orphaned' }
+  return { status: 'unknown', label: '-' }
+}
+
+export function getHTTPProxyRouteCount(resource: any): number {
+  return resource.spec?.routes?.length || 0
+}
+
+export function getHTTPProxyServiceCount(resource: any): number {
+  let count = 0
+  for (const route of resource.spec?.routes || []) {
+    count += (route.services || []).length
+  }
+  count += (resource.spec?.tcpproxy?.services || []).length
+  return count
+}
+
+export function getHTTPProxyIncludeCount(resource: any): number {
+  return resource.spec?.includes?.length || 0
+}
+
+export function hasHTTPProxyTLS(resource: any): boolean {
+  return !!resource.spec?.virtualhost?.tls
+}

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

@@ -197,6 +197,97 @@ export function getPodRestarts(pod: any): number {
   return containerStatuses.reduce((sum: number, c: any) => sum + (c.restartCount || 0), 0)
 }
 
+export interface ContainerSquareState {
+  name: string
+  status: 'ready' | 'running' | 'waiting' | 'completed' | 'terminated' | 'unknown'
+  restarts: number
+  reason?: string
+  message?: string
+  exitCode?: number
+  startedAt?: string
+  finishedAt?: string
+  isInit?: boolean
+  /** Last termination info — crucial for debugging CrashLoopBackOff */
+  lastTermination?: {
+    reason?: string
+    exitCode?: number
+    startedAt?: string
+    finishedAt?: string
+  }
+}
+
+export function getContainerSquareStates(pod: any): ContainerSquareState[] {
+  const result: ContainerSquareState[] = []
+  const initStatuses = pod.status?.initContainerStatuses || []
+  const containerStatuses = pod.status?.containerStatuses || []
+  const specContainers = pod.spec?.containers || []
+
+  for (const cs of initStatuses) {
+    const stateKey = cs.state ? Object.keys(cs.state)[0] : 'unknown'
+    let status: ContainerSquareState['status'] = 'unknown'
+    if (stateKey === 'terminated' && cs.state?.terminated?.exitCode === 0) {
+      status = 'completed'
+    } else if (stateKey === 'running') {
+      status = cs.ready ? 'ready' : 'running'
+    } else if (stateKey === 'waiting') {
+      status = 'waiting'
+    } else if (stateKey === 'terminated') {
+      status = 'terminated'
+    }
+    const stateDetail = cs.state?.[stateKey]
+    const lastTerm = cs.lastState?.terminated
+    result.push({
+      name: cs.name,
+      status,
+      restarts: cs.restartCount || 0,
+      reason: stateDetail?.reason,
+      message: stateDetail?.message,
+      exitCode: stateDetail?.exitCode,
+      startedAt: stateDetail?.startedAt,
+      finishedAt: stateDetail?.finishedAt,
+      isInit: true,
+      lastTermination: lastTerm ? { reason: lastTerm.reason, exitCode: lastTerm.exitCode, startedAt: lastTerm.startedAt, finishedAt: lastTerm.finishedAt } : undefined,
+    })
+  }
+
+  if (containerStatuses.length > 0) {
+    for (const cs of containerStatuses) {
+      const stateKey = cs.state ? Object.keys(cs.state)[0] : 'unknown'
+      let status: ContainerSquareState['status'] = 'unknown'
+      if (stateKey === 'running' && cs.ready) {
+        status = 'ready'
+      } else if (stateKey === 'running') {
+        status = 'running'
+      } else if (stateKey === 'terminated' && cs.state?.terminated?.exitCode === 0) {
+        status = 'completed'
+      } else if (stateKey === 'terminated') {
+        status = 'terminated'
+      } else if (stateKey === 'waiting') {
+        status = 'waiting'
+      }
+      const stateDetail = cs.state?.[stateKey]
+      const lastTerm = cs.lastState?.terminated
+      result.push({
+        name: cs.name,
+        status,
+        restarts: cs.restartCount || 0,
+        reason: stateDetail?.reason,
+        message: stateDetail?.message,
+        exitCode: stateDetail?.exitCode,
+        startedAt: stateDetail?.startedAt,
+        finishedAt: stateDetail?.finishedAt,
+        lastTermination: lastTerm ? { reason: lastTerm.reason, exitCode: lastTerm.exitCode, startedAt: lastTerm.startedAt, finishedAt: lastTerm.finishedAt } : undefined,
+      })
+    }
+  } else {
+    for (const c of specContainers) {
+      result.push({ name: c.name, status: 'unknown', restarts: 0 })
+    }
+  }
+
+  return result
+}
+
 // ============================================================================
 // WORKLOAD UTILITIES (Deployment, StatefulSet, DaemonSet, ReplicaSet)
 // ============================================================================