@skyhook-io/k8s-ui 1.17.0 → 1.18.0

package/src/components/resources/renderers/KnativeReferenceLinks.test.tsx

@@ -0,0 +1,60 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { PingSourceRenderer } from './KnativeSourceRenderer'
+import { DomainMappingRenderer } from './KnativeNetworkingRenderer'
+import { initNavigationMap, resetNavigationMap } from '../../../utils/navigation'
+
+describe('Knative reference links', () => {
+  it('keep the sink reference API group instead of resolving to the core Kind', async () => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    initNavigationMap([
+      { group: '', version: 'v1', kind: 'Service', name: 'services', namespaced: true, isCrd: false, verbs: ['get'] },
+      { group: 'serving.knative.dev', version: 'v1', kind: 'Service', name: 'services', namespaced: true, isCrd: true, verbs: ['get'] },
+      { group: 'relationships.radar.test', version: 'v1', kind: 'Service', name: 'virtualservices', namespaced: true, isCrd: true, verbs: ['get'] },
+    ])
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const onNavigate = vi.fn()
+    const clickSink = async (sinkRef: Record<string, string>) => {
+      await act(async () => root.render(<PingSourceRenderer onNavigate={onNavigate} data={{
+        metadata: { namespace: 'team', name: 'ping' },
+        spec: { schedule: '* * * * *', sink: { ref: sinkRef } },
+      }} />))
+      const link = [...container.querySelectorAll('button')].find(button => button.textContent === sinkRef.name)
+      expect(link).toBeDefined()
+      await act(async () => link!.click())
+    }
+    try {
+      await clickSink({ apiVersion: 'serving.knative.dev/v1', kind: 'Service', name: 'knative-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', group: 'serving.knative.dev', namespace: 'team', name: 'knative-backend' }))
+      await clickSink({ group: 'serving.knative.dev', kind: 'Service', name: 'group-only-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', group: 'serving.knative.dev', name: 'group-only-backend' }))
+      await clickSink({ apiVersion: 'relationships.radar.test/v1', kind: 'Service', name: 'custom-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'virtualservices', group: 'relationships.radar.test', name: 'custom-backend' }))
+      await clickSink({ apiVersion: 'v1', kind: 'Service', name: 'core-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', name: 'core-backend' }))
+      expect(onNavigate.mock.lastCall?.[0].group ?? '').toBe('')
+
+      await act(async () => root.render(<PingSourceRenderer onNavigate={onNavigate} data={{
+        metadata: { namespace: 'team' }, spec: { sink: { ref: { kind: 'Service', name: 'unknown-group' } } },
+      }} />))
+      expect(container.textContent).toContain('unknown-group')
+      expect([...container.querySelectorAll('button')].some(button => button.textContent === 'unknown-group')).toBe(false)
+
+      await act(async () => root.render(<DomainMappingRenderer onNavigate={onNavigate} data={{
+        metadata: { namespace: 'team', name: 'example.com' },
+        spec: { ref: { apiVersion: 'serving.knative.dev/v1', kind: 'Service', name: 'mapped-backend' } },
+      }} />))
+      const target = [...container.querySelectorAll('button')].find(button => button.textContent === 'mapped-backend')
+      expect(target).toBeDefined()
+      await act(async () => target!.click())
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', group: 'serving.knative.dev', name: 'mapped-backend' }))
+    } finally {
+      await act(async () => root.unmount())
+      resetNavigationMap()
+      Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+    }
+  })
+})

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

@@ -1,12 +1,12 @@
+import { KnativeReferenceLink } from './KnativeReferenceLink'
 import { Clock, Server, Container, Link2 } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
-import { kindToPlural } from '../../../utils/navigation'
+import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner } from '../../ui/drawer-components'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }
 
 function SinkProperty({ sink, ns, onNavigate }: { sink: any; ns: string; onNavigate?: RendererProps['onNavigate'] }) {
@@ -15,10 +15,9 @@ function SinkProperty({ sink, ns, onNavigate }: { sink: any; ns: string; onNavig
   if (sink.ref) {
     return (
       <Property label="Sink" value={
-        <ResourceLink
-          name={sink.ref.name}
-          kind={kindToPlural(sink.ref.kind || 'Service')}
-          namespace={sink.ref.namespace || ns}
+        <KnativeReferenceLink
+          reference={sink.ref}
+          namespace={ns}
           onNavigate={onNavigate}
         />
       } />
@@ -194,10 +193,9 @@ export function SinkBindingRenderer({ data, onNavigate }: RendererProps) {
               <Property label="Subject API" value={subjectRef.apiVersion} />
               {subjectRef.name && (
                 <Property label="Subject" value={
-                  <ResourceLink
-                    name={subjectRef.name}
-                    kind={kindToPlural(subjectRef.kind || 'Deployment')}
-                    namespace={subjectRef.namespace || ns}
+                  <KnativeReferenceLink
+                    reference={subjectRef}
+                    namespace={ns}
                     onNavigate={onNavigate}
                   />
                 } />

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

@@ -11,7 +11,7 @@ import {
   isCrossplanePaused,
   getComposingXRRef,
 } from '../resource-utils-crossplane'
-import { kindToPlural } from '../../../utils/navigation'
+import { kindToPluralWithGroup } from '../../../utils/navigation'
 
 interface ManagedResourceRendererProps {
   data: any
@@ -82,7 +82,7 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
               value={
                 <ResourceLink
                   name={composingXR.name}
-                  kind={kindToPlural(composingXR.kind)}
+                  kind={kindToPluralWithGroup(composingXR.kind, extractApiGroup(composingXR.apiVersion))}
                   namespace={namespace}
                   group={extractApiGroup(composingXR.apiVersion) || undefined}
                   onNavigate={onNavigate}

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

@@ -2,16 +2,17 @@ import { Info } from 'lucide-react'
 import { Tooltip } from '../../ui/Tooltip'
 
 interface MetricsUnavailableNoticeProps {
+  noUsageYet?: boolean
   rawError?: string
   diagnosis?: string
 }
 
-export function MetricsUnavailableNotice({ rawError, diagnosis }: MetricsUnavailableNoticeProps) {
+export function MetricsUnavailableNotice({ rawError, diagnosis, noUsageYet }: MetricsUnavailableNoticeProps) {
   return (
     <div className="card-inner-lg text-xs text-theme-text-tertiary">
       <div className="flex items-center gap-1.5">
         <span className="min-w-0 leading-5">
-          Metrics unavailable. Radar cannot read metrics.k8s.io.
+          {noUsageYet ? 'No usage yet: this Pod is not running' : 'Metrics unavailable. Radar cannot read metrics.k8s.io.'}
         </span>
         {rawError && (
           <Tooltip

package/src/components/resources/renderers/PodRenderer.sidecar-terminal.test.tsx

@@ -0,0 +1,200 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { PodRenderer } from './PodRenderer'
+import { getExecContainerNames } from '../resource-utils'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+const running = { running: { startedAt: '2026-10-16T10:00:00Z' } }
+
+const pod = {
+  metadata: { name: 'app-with-sidecar', namespace: 'shop' },
+  spec: {
+    initContainers: [
+      { name: 'migrate', image: 'busybox' },
+      { name: 'log-shipper', image: 'fluent-bit:3', restartPolicy: 'Always' },
+      { name: 'stopped-sidecar', image: 'busybox', restartPolicy: 'Always' },
+    ],
+    containers: [{ name: 'app', image: 'shop/app:1' }],
+  },
+  status: {
+    phase: 'Running',
+    initContainerStatuses: [
+      { name: 'migrate', state: running, restartCount: 0 },
+      { name: 'log-shipper', state: running, restartCount: 0, ready: true },
+      { name: 'stopped-sidecar', state: { waiting: { reason: 'CrashLoopBackOff' } }, restartCount: 3 },
+    ],
+    containerStatuses: [{ name: 'app', state: running, restartCount: 0, ready: true }],
+  },
+}
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+function initCard(name: string): HTMLElement {
+  const label = Array.from(container.querySelectorAll('span')).find((s) => s.textContent === name)
+  if (!label) throw new Error(`no init container card for ${name}`)
+  return label.closest('.rounded-lg') as HTMLElement
+}
+
+const terminalButton = (card: HTMLElement) => card.querySelector('svg.lucide-terminal')?.closest('button') ?? null
+
+describe('PodRenderer native sidecar terminal', () => {
+  it('offers Terminal on a running native sidecar only, and lists sidecars in the terminal', () => {
+    const onOpenTerminal = vi.fn()
+    act(() => {
+      root.render(
+        <PodRenderer data={pod} onCopy={() => undefined} copied={null} canExec canViewLogs onOpenTerminal={onOpenTerminal} />,
+      )
+    })
+
+    expect(terminalButton(initCard('migrate'))).toBeNull()
+    expect(terminalButton(initCard('stopped-sidecar'))).toBeNull()
+
+    const sidecarTerminal = terminalButton(initCard('log-shipper'))
+    expect(sidecarTerminal).not.toBeNull()
+    act(() => sidecarTerminal!.click())
+
+    expect(onOpenTerminal).toHaveBeenCalledWith({
+      namespace: 'shop',
+      podName: 'app-with-sidecar',
+      containerName: 'log-shipper',
+      containers: ['app', 'log-shipper', 'stopped-sidecar'],
+    })
+  })
+
+  it('hides the sidecar Terminal without exec permission', () => {
+    act(() => {
+      root.render(
+        <PodRenderer data={pod} onCopy={() => undefined} copied={null} canViewLogs onOpenTerminal={vi.fn()} />,
+      )
+    })
+    expect(terminalButton(initCard('log-shipper'))).toBeNull()
+  })
+})
+
+describe('PodRenderer sidecar files and image', () => {
+  it('switches between a sidecar\'s files and its image, not the first container\'s', () => {
+    let browser: { containers: string[]; initialContainer: string; onSwitchToImageFiles: (c?: string) => void } | undefined
+    let imageBrowser: { image: string; onSwitchToPodFiles?: () => void } | undefined
+    act(() => {
+      root.render(
+        <PodRenderer
+          data={pod}
+          onCopy={() => undefined}
+          copied={null}
+          canExec
+          renderPodBrowser={(props) => { browser = props; return null }}
+          renderImageBrowser={(props) => { imageBrowser = props; return null }}
+        />,
+      )
+    })
+
+    const card = initCard('log-shipper')
+    act(() => (card.querySelector('svg.lucide-folder-open')!.closest('button') as HTMLButtonElement).click())
+    expect(browser?.initialContainer).toBe('log-shipper')
+    expect(browser?.containers).toEqual(['app', 'log-shipper', 'stopped-sidecar'])
+
+    // The user switched the dialog to app before asking for image files.
+    act(() => browser!.onSwitchToImageFiles('app'))
+    expect(imageBrowser?.image).toBe('shop/app:1')
+  })
+
+  it('opens a sidecar\'s files from its image', () => {
+    let browser: { initialContainer: string; onSwitchToImageFiles: (c?: string) => void } | undefined
+    let imageBrowser: { image: string; onSwitchToPodFiles?: () => void } | undefined
+    act(() => {
+      root.render(
+        <PodRenderer
+          data={pod}
+          onCopy={() => undefined}
+          copied={null}
+          canExec
+          renderPodBrowser={(props) => { browser = props; return null }}
+          renderImageBrowser={(props) => { imageBrowser = props; return null }}
+        />,
+      )
+    })
+    const card = initCard('log-shipper')
+    act(() => (card.querySelector('svg.lucide-folder-open')!.closest('button') as HTMLButtonElement).click())
+    act(() => browser!.onSwitchToImageFiles())
+    expect(imageBrowser?.image).toBe('fluent-bit:3')
+    act(() => imageBrowser!.onSwitchToPodFiles!())
+    expect(browser?.initialContainer).toBe('log-shipper')
+  })
+})
+
+describe('PodRenderer image to live files', () => {
+  function renderWith(data: typeof pod) {
+    let browser: { initialContainer: string } | undefined
+    let imageBrowser: { image: string; onSwitchToPodFiles?: () => void } | undefined
+    act(() => {
+      root.render(
+        <PodRenderer
+          data={data}
+          onCopy={() => undefined}
+          copied={null}
+          canExec
+          renderPodBrowser={(props) => { browser = props; return null }}
+          renderImageBrowser={(props) => { imageBrowser = props; return null }}
+        />,
+      )
+    })
+    return { getBrowser: () => browser, getImageBrowser: () => imageBrowser }
+  }
+
+  const openImage = (name: string) => {
+    const card = initCard(name)
+    const link = Array.from(card.querySelectorAll('button')).find((el) => el.textContent?.startsWith('Image:'))
+    if (!link) throw new Error(`no image link on ${name}`)
+    act(() => (link as HTMLElement).click())
+  }
+
+  it('does not send a stopped sidecar\'s image to its live files', () => {
+    const { getBrowser, getImageBrowser } = renderWith(pod)
+    // stopped-sidecar and migrate share the busybox image; neither is a running exec target.
+    openImage('stopped-sidecar')
+    expect(getImageBrowser()?.image).toBe('busybox')
+    act(() => getImageBrowser()!.onSwitchToPodFiles!())
+    expect(getBrowser()?.initialContainer).toBe('app')
+  })
+
+  it('keeps the live-files link for a running sidecar while the pod is still Pending', () => {
+    const pending = { ...pod, status: { ...pod.status, phase: 'Pending' } }
+    const { getBrowser, getImageBrowser } = renderWith(pending)
+    openImage('log-shipper')
+    expect(getImageBrowser()?.onSwitchToPodFiles).toBeDefined()
+    act(() => getImageBrowser()!.onSwitchToPodFiles!())
+    expect(getBrowser()?.initialContainer).toBe('log-shipper')
+  })
+
+  it('offers no live-files link in a Pending pod when nothing using the image runs', () => {
+    const pending = { ...pod, status: { ...pod.status, phase: 'Pending' } }
+    const { getImageBrowser } = renderWith(pending)
+    openImage('stopped-sidecar')
+    expect(getImageBrowser()?.onSwitchToPodFiles).toBeUndefined()
+  })
+})
+
+describe('getExecContainerNames', () => {
+  it('lists regular containers first, then native sidecars, never one-shot init containers', () => {
+    expect(getExecContainerNames(pod)).toEqual(['app', 'log-shipper', 'stopped-sidecar'])
+  })
+
+  it('handles a pod without init containers', () => {
+    expect(getExecContainerNames({ spec: { containers: [{ name: 'app' }] } })).toEqual(['app'])
+  })
+})

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

@@ -450,3 +450,35 @@ describe('PodRenderer on a Radar without variable sources', () => {
     expect(html).not.toContain('could not be loaded')
   })
 })
+
+describe('PodRenderer pending Pods, including non-CNPG workloads', () => {
+  const pending = { apiVersion: 'v1', kind: 'Pod', metadata: { name: 'nginx-join', namespace: 'default' }, spec: { containers: [{ name: 'nginx', image: 'nginx' }], initContainers: [{ name: 'setup', image: 'busybox' }] }, status: { phase: 'Pending' } }
+  const render = (data: any, metricsHistory: any = { containers: [], metricsAPIReachable: true }) => renderToString(<PodRenderer data={data} onCopy={() => {}} copied={null} metricsUnavailable metricsHistory={metricsHistory} />)
+  it('shows no usage yet only with a successful metrics API collection', () => {
+    expect(render(pending)).toContain('No usage yet: this Pod is not running')
+    expect(render(pending)).not.toContain('Radar cannot read metrics.k8s.io')
+    expect(render(pending, { containers: [], metricsAPIReachable: false })).toContain('Radar cannot read metrics.k8s.io')
+    expect(render(pending, { containers: [], collectionError: 'forbidden' })).toContain('forbidden')
+    expect(render({ ...pending, status: { phase: 'Running' } })).toContain('Radar cannot read metrics.k8s.io')
+    expect(render({ ...pending, status: { phase: 'Pending', initContainerStatuses: [{ name: 'setup', state: { running: {} } }] } })).not.toContain('No usage yet')
+  })
+  it('shows unstarted regular and init containers neutrally', () => {
+    const html = render(pending)
+    expect(html.match(/Not started/g)).toHaveLength(2)
+    expect(html).not.toContain('Not Ready')
+    expect(html).not.toMatch(/>unknown</)
+  })
+  it.each(['ContainerCreating', 'PodInitializing', 'ImagePullBackOff', 'CrashLoopBackOff'])('tones reported waiting reason %s appropriately', (reason) => {
+    const html = render({ ...pending, status: { phase: 'Pending', containerStatuses: [{ name: 'nginx', state: { waiting: { reason } } }] } })
+    const bad = ['ImagePullBackOff', 'CrashLoopBackOff'].includes(reason)
+    expect(html).toContain(bad ? 'bg-red-100' : 'bg-theme-hover/50')
+    if (bad) expect(html).toContain(reason)
+  })
+})
+
+it('shows reported running-but-unready nginx readiness as degraded', () => {
+  const data = { ...pod, status: { phase: 'Running', containerStatuses: [{ name: pod.spec.containers[0].name, ready: false, state: { running: {} } }] } }
+  const html = renderToString(<PodRenderer data={data} onCopy={() => {}} copied={null} />)
+  expect(html).toMatch(/bg-amber-100[^>]*>Not Ready</)
+  expect(html).toMatch(/>running</)
+})

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

@@ -4,8 +4,8 @@ import { clsx } from 'clsx'
 import { PolicySection } from './PolicySection'
 import type { PolicyResourceResponse } from '../../../types/policy'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
-import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR, getDefaultContainerName } from '../resource-utils'
-import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
+import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR, getDefaultContainerName, getExecContainerNames } from '../resource-utils'
+import { getResourceStatusColor, SEVERITY_BORDER } from '../../../utils/badge-colors'
 import {
   rbacVerbBadgeClass,
   rbacResourceBadgeClass,
@@ -26,6 +26,7 @@ import { Tooltip } from '../../ui/Tooltip'
 import { RadarUpgradeNote } from '../../ui/RadarUpgradeNote'
 import { getRadarUpgradeRequirement, type RadarUpgradeRequirement } from '../../../types/fetch-error'
 import { MetricsChart } from '../../ui/MetricsChart'
+import { Badge } from '../../ui/Badge'
 import { MetricsUnavailableNotice } from './MetricsUnavailableNotice'
 import { ContainerEnvironmentSection } from './ContainerEnvironmentSection'
 import { formatRelativeAgeTime } from '../../../utils/format'
@@ -85,12 +86,12 @@ interface PodRendererProps {
   renderPortAction?: (props: { namespace: string; podName: string; port: number; protocol: string; disabled?: boolean }) => ReactNode
   // Metrics data injection
   metrics?: { containers?: any[]; timestamp?: string }
-  metricsHistory?: { containers?: any[]; collectionError?: string; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
+  metricsHistory?: { metricsAPIReachable?: boolean; containers?: any[]; collectionError?: string; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
   metricsUnavailable?: boolean
   hideMetricsServer?: boolean
   // 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
+  renderPodBrowser?: (props: { namespace: string; podName: string; containers: string[]; initialContainer: string; onClose: () => void; onSwitchToImageFiles: (containerName?: string) => void }) => ReactNode
   /**
    * Resolved content for envFrom references.
    * When provided, expands ConfigMap/Secret keys inline instead of showing "(all keys)".
@@ -305,6 +306,7 @@ export function PodRenderer({
   const containerStatuses = data.status?.containerStatuses || []
   const containers = data.spec?.containers || []
   const initContainers = data.spec?.initContainers || []
+  const podResources = data.spec?.resources
   const initContainerStatuses = data.status?.initContainerStatuses || []
   const hasEnvironmentDeclarations = [...initContainers, ...containers].some(
     (container: any) => container.env?.length > 0 || container.envFrom?.length > 0,
@@ -325,7 +327,9 @@ export function PodRenderer({
   const operationalIssuesShown = useOperationalIssuesShown()
   const podProblems = getPodProblems(data)
   const hasProblems = podProblems.length > 0 && !operationalIssuesShown
-  const showMetricsUnavailable = !!metricsUnavailable && !metricsHistory?.collectionError
+  const notRunning = data.status?.phase === 'Pending' && ![...containerStatuses, ...initContainerStatuses].some((s: any) => s.state?.running)
+  const noUsageYet = notRunning && metricsHistory?.metricsAPIReachable === true && !metricsHistory.collectionError && !metricsHistory.containers?.length && !metrics?.containers?.length
+  const showMetricsUnavailable = !!metricsUnavailable && !metricsHistory?.collectionError && !noUsageYet
   const hasMetricsHistory = !!metricsHistory?.containers?.length
   const currentMetrics = metricsUnavailable ? undefined : metrics
 
@@ -336,6 +340,16 @@ export function PodRenderer({
   // Pod filesystem modal state
   const [podFilesContainer, setPodFilesContainer] = useState<string | null>(null)
 
+  // A sidecar can be running while the pod is still Pending, and a stopped
+  // container has no live files, so match the image against running containers.
+  const runningImageContainer = selectedImage
+    ? getExecContainerNames(data).find((name) => {
+        const spec = [...containers, ...initContainers].find((c: any) => c.name === name)
+        const status = [...containerStatuses, ...initContainerStatuses].find((st: any) => st.name === name)
+        return spec?.image === selectedImage && !!status?.state?.running
+      })
+    : undefined
+
   const handleOpenTerminal = (containerName?: string) => {
     const container = containerName || getDefaultContainerName(data)
     if (namespace && podName && container) {
@@ -343,7 +357,7 @@ export function PodRenderer({
         namespace,
         podName,
         containerName: container,
-        containers: containers.map((c: { name: string }) => c.name),
+        containers: getExecContainerNames(data),
       })
     }
   }
@@ -508,6 +522,7 @@ export function PodRenderer({
               const isFailed = stateKey === 'terminated' && exitCode != null && exitCode !== 0
               const isWaiting = stateKey === 'waiting'
               const isInitRunning = stateKey === 'running'
+              const isSidecar = container.restartPolicy === 'Always'
 
               // Status label and color
               let statusLabel: string
@@ -520,10 +535,11 @@ export function PodRenderer({
               } else if (isWaiting) {
                 statusLabel = state?.waiting?.reason || 'Waiting'
               } else {
-                statusLabel = 'Pending'
+                statusLabel = 'Not started'
               }
+              const reportedFailure = isFailed || !!(isWaiting && state?.waiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(state.waiting.reason))
               const statusColor = getResourceStatusColor(
-                isCompleted ? 'succeeded' : isFailed ? 'failed' : isInitRunning ? 'running' : isWaiting ? 'waiting' : 'pending'
+                isCompleted ? 'succeeded' : reportedFailure ? 'failed' : isInitRunning ? 'running' : 'unknown'
               )
 
               // Build command string
@@ -534,10 +550,11 @@ export function PodRenderer({
               return (
                 <div key={container.name} className={clsx(
                   'rounded-lg p-3 border-l-2',
-                  isCompleted ? 'bg-theme-elevated/20 border-green-500/40' :
-                  isFailed ? 'bg-theme-elevated/30 border-red-500/50' :
-                  isInitRunning ? 'bg-theme-elevated/30 border-blue-500/50' :
-                  'bg-theme-elevated/30 border-yellow-500/40'
+                  isCompleted ? 'bg-theme-elevated/20' : 'bg-theme-elevated/30',
+                  isCompleted ? SEVERITY_BORDER.success :
+                  reportedFailure ? 'border-l-semantic-error' :
+                  isInitRunning ? SEVERITY_BORDER.info :
+                  SEVERITY_BORDER.neutral
                 )}>
                   <div className="flex items-center justify-between mb-2">
                     <div className="flex items-center gap-2">
@@ -547,6 +564,26 @@ export function PodRenderer({
                       <span className="text-sm font-medium text-theme-text-primary">{container.name}</span>
                     </div>
                     <div className="flex items-center gap-2">
+                      {isSidecar && isInitRunning && canExec && onOpenTerminal && (
+                        <Tooltip content="Terminal" delay={150}>
+                          <button
+                            onClick={() => handleOpenTerminal(container.name)}
+                            className="p-1 text-slate-400 hover:text-blue-400 hover:bg-slate-600/50 rounded transition-colors"
+                          >
+                            <TerminalIcon className="w-4 h-4" />
+                          </button>
+                        </Tooltip>
+                      )}
+                      {isSidecar && isInitRunning && canExec && renderPodBrowser && (
+                        <Tooltip content="Browse files" delay={150}>
+                          <button
+                            onClick={() => setPodFilesContainer(container.name)}
+                            className="p-1 text-slate-400 hover:text-blue-400 hover:bg-slate-600/50 rounded transition-colors"
+                          >
+                            <FolderOpen className="w-4 h-4" />
+                          </button>
+                        </Tooltip>
+                      )}
                       {canViewLogs && (
                         <Tooltip content="Logs" delay={150}>
                           <button
@@ -575,7 +612,7 @@ export function PodRenderer({
                       </div>
                     )}
                     {/* Waiting reason detail */}
-                    {isWaiting && state?.waiting?.reason && state.waiting.reason !== 'PodInitializing' && (
+                    {isWaiting && state?.waiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(state.waiting.reason) && (
                       <div className="text-red-400 flex items-center gap-1">
                         <span className="font-medium">{state.waiting.reason}</span>
                         {state.waiting.message && (
@@ -623,6 +660,20 @@ export function PodRenderer({
 
       <Section title="Containers" icon={HardDrive} defaultExpanded>
         <div className="space-y-3">
+          {/* Pod-level budget (spec.resources) is shared by all containers, so it
+              stays its own row rather than being merged into the container rows. */}
+          {(podResources?.requests || podResources?.limits) && (
+            <div className="rounded-[10px] border border-dashed border-theme-border p-3">
+              <div className="flex items-baseline justify-between gap-2 mb-2">
+                <span className="text-sm font-medium text-theme-text-primary">Pod (aggregate)</span>
+                <span className="text-xs text-theme-text-tertiary">Shared by all containers</span>
+              </div>
+              <div className="text-xs text-theme-text-secondary space-y-1">
+                {podResources.requests && <div>Requests: {formatResources(podResources.requests)}</div>}
+                {podResources.limits && <div>Limits: {formatResources(podResources.limits)}</div>}
+              </div>
+            </div>
+          )}
           {containers.map((container: any) => {
             const status = containerStatuses.find((s: any) => s.name === container.name)
             const state = status?.state
@@ -638,6 +689,7 @@ export function PodRenderer({
             // failure — tone its badges/text sky, not red, so the drawer agrees
             // with the calm "Completed" table badge instead of screaming red.
             const terminatedOk = currentTerminated?.exitCode === 0
+            const reportedFailure = !!((currentTerminated?.exitCode != null && currentTerminated.exitCode !== 0) || (currentWaiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(currentWaiting.reason)))
 
             return (
               <div key={container.name} className="card-inner-lg">
@@ -674,23 +726,12 @@ export function PodRenderer({
                         </button>
                       </Tooltip>
                     )}
-                    <span className={clsx(
-                      'badge',
-                      isReady ? SEVERITY_BADGE_BORDERED.success :
-                      terminatedOk ? SEVERITY_BADGE_BORDERED.info :
-                      SEVERITY_BADGE_BORDERED.error
-                    )}>
-                      {isReady ? 'Ready' : terminatedOk ? 'Completed' : 'Not Ready'}
-                    </span>
-                    <span className={clsx(
-                      'badge',
-                      stateKey === 'running' ? SEVERITY_BADGE_BORDERED.success :
-                      stateKey === 'waiting' ? SEVERITY_BADGE_BORDERED.warning :
-                      terminatedOk ? SEVERITY_BADGE_BORDERED.info :
-                      SEVERITY_BADGE_BORDERED.error
-                    )}>
+                    <Badge severity={isReady ? 'success' : terminatedOk ? 'info' : reportedFailure ? 'error' : stateKey === 'running' && isReady === false ? 'warning' : 'neutral'}>
+                      {isReady ? 'Ready' : terminatedOk ? 'Completed' : !stateKey || stateKey === 'unknown' ? 'Not started' : 'Not Ready'}
+                    </Badge>
+                    {stateKey !== 'unknown' && <Badge severity={stateKey === 'running' ? 'success' : terminatedOk ? 'info' : reportedFailure ? 'error' : 'neutral'}>
                       {stateKey}
-                    </span>
+                    </Badge>}
                   </div>
                 </div>
                 <div className="text-xs text-theme-text-secondary space-y-1">
@@ -704,7 +745,7 @@ export function PodRenderer({
                     )
                   })()}
                   {/* Show current waiting reason (e.g., CrashLoopBackOff) */}
-                  {currentWaiting?.reason && currentWaiting.reason !== 'ContainerCreating' && (
+                  {currentWaiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(currentWaiting.reason) && (
                     <div className="text-red-400 flex items-center gap-1">
                       <span className="font-medium">{currentWaiting.reason}</span>
                       {currentWaiting.message && (
@@ -831,8 +872,9 @@ export function PodRenderer({
       )}
 
       {/* Resource Usage (from metrics-server) — hidden when Prometheus has CPU/memory data */}
-      {!hideMetricsServer && !!(currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable) && (
+      {!hideMetricsServer && !!(currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable || noUsageYet) && (
         <Section title="Resource Usage" icon={Activity} defaultExpanded>
+          {noUsageYet && <MetricsUnavailableNotice noUsageYet />}
           {showMetricsUnavailable && (
             <MetricsUnavailableNotice rawError={metricsHistory?.metricsUnavailableReason} diagnosis={metricsHistory?.metricsUnavailableDiagnosis} />
           )}
@@ -852,7 +894,8 @@ export function PodRenderer({
                 // fall through to them or their chart shows no limit line.
                 const containerSpec = containers.find((c: any) => c.name === historyContainer.name)
                   || initContainers.find((c: any) => c.name === historyContainer.name && c.restartPolicy === 'Always')
-                const limits = containerSpec?.resources?.limits
+                // A container without its own limit is still bounded by the pod-level one.
+                const limits = { ...podResources?.limits, ...containerSpec?.resources?.limits }
                 const requests = containerSpec?.resources?.requests
 
                 // Get historical data points (from history or empty)
@@ -961,10 +1004,8 @@ export function PodRenderer({
         podName: podName || '',
         pullSecrets: imagePullSecrets,
         onClose: () => setSelectedImage(null),
-        onSwitchToPodFiles: isRunning && canExec && renderPodBrowser ? () => {
-          // Find which container uses this image and open pod files for it
-          const match = containers.find((c: any) => c.image === selectedImage)
-          setPodFilesContainer(match?.name || containers[0]?.name)
+        onSwitchToPodFiles: canExec && renderPodBrowser && (isRunning || runningImageContainer) ? () => {
+          setPodFilesContainer(runningImageContainer || containers[0]?.name)
         } : undefined,
       })}
 
@@ -972,12 +1013,12 @@ export function PodRenderer({
       {podFilesContainer && renderPodBrowser && renderPodBrowser({
         namespace: namespace || '',
         podName: podName || '',
-        containers: containers.map((c: { name: string }) => c.name),
+        containers: getExecContainerNames(data),
         initialContainer: podFilesContainer,
         onClose: () => setPodFilesContainer(null),
-        onSwitchToImageFiles: () => {
-          // Find which image this container uses and open image filesystem
-          const match = containers.find((c: any) => c.name === podFilesContainer)
+        onSwitchToImageFiles: (containerName?: string) => {
+          const selected = containerName || podFilesContainer
+          const match = [...containers, ...initContainers].find((c: any) => c.name === selected)
           if (match?.image) setSelectedImage(match.image)
         },
       })}