@skyhook-io/k8s-ui 1.17.1 → 1.18.0

package/src/components/resources/column-order.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it } from 'vitest'
+import { applyColumnOrder, moveColumn, pinnedColumnCount, sanitizeColumnOrder } from './column-order'
+
+const cols = (...keys: string[]) => keys.map(key => ({ key }))
+const keysOf = (list: { key: string }[]) => list.map(c => c.key)
+
+const PODS = cols('name', 'namespace', 'ready', 'status', 'restarts', 'age', 'node')
+
+describe('applyColumnOrder', () => {
+  it('keeps definition order when no saved order is provided', () => {
+    expect(keysOf(applyColumnOrder(PODS, undefined))).toEqual(keysOf(PODS))
+    expect(keysOf(applyColumnOrder(PODS, null))).toEqual(keysOf(PODS))
+    expect(keysOf(applyColumnOrder(PODS, []))).toEqual(keysOf(PODS))
+  })
+
+  it('applies the saved order and keeps Name first', () => {
+    const order = ['age', 'restarts', 'namespace', 'ready', 'status', 'node']
+    expect(keysOf(applyColumnOrder(PODS, order)))
+      .toEqual(['name', 'age', 'restarts', 'namespace', 'ready', 'status', 'node'])
+  })
+
+  it('ignores a saved Name position', () => {
+    const order = ['age', 'name', 'namespace', 'ready', 'status', 'restarts', 'node']
+    expect(keysOf(applyColumnOrder(PODS, order))[0]).toBe('name')
+  })
+
+  it('keeps host columns that lead Name in front of it', () => {
+    const fleet = cols('cluster', 'name', 'namespace', 'age')
+    expect(keysOf(applyColumnOrder(fleet, ['age', 'cluster', 'namespace'])))
+      .toEqual(['cluster', 'name', 'age', 'namespace'])
+  })
+
+  it('puts a column added after the save in its default position', () => {
+    // 'ip' arrives between status and restarts; the user had moved age up.
+    const next = cols('name', 'namespace', 'ready', 'status', 'ip', 'restarts', 'age', 'node')
+    const order = ['age', 'namespace', 'ready', 'status', 'restarts', 'node']
+    expect(keysOf(applyColumnOrder(next, order)))
+      .toEqual(['name', 'age', 'namespace', 'ready', 'status', 'ip', 'restarts', 'node'])
+  })
+
+  it('appends a new trailing column, such as a label column, at the end', () => {
+    const next = [...PODS, { key: 'label:app' }]
+    const order = ['node', 'age', 'namespace', 'ready', 'status', 'restarts']
+    expect(keysOf(applyColumnOrder(next, order)).at(-1)).toBe('label:app')
+  })
+
+  it('keeps several new adjacent columns in their definition order', () => {
+    const next = cols('name', 'a', 'b', 'namespace', 'age')
+    expect(keysOf(applyColumnOrder(next, ['age', 'namespace'])))
+      .toEqual(['name', 'age', 'a', 'b', 'namespace'])
+  })
+
+  it('keeps a hidden column in place: order is independent of visibility', () => {
+    const order = ['age', 'restarts', 'namespace', 'ready', 'status', 'node']
+    const ordered = applyColumnOrder(PODS, order)
+    const visible = new Set(['name', 'age', 'namespace', 'ready', 'status', 'node'])
+    expect(keysOf(ordered.filter(c => visible.has(c.key))))
+      .toEqual(['name', 'age', 'namespace', 'ready', 'status', 'node'])
+    visible.add('restarts')
+    expect(keysOf(ordered.filter(c => visible.has(c.key))))
+      .toEqual(['name', 'age', 'restarts', 'namespace', 'ready', 'status', 'node'])
+  })
+
+  it('drops saved keys for columns that no longer exist', () => {
+    const order = ['gone', 'age', 'namespace', 'ready', 'status', 'restarts', 'node']
+    expect(keysOf(applyColumnOrder(PODS, order)))
+      .toEqual(['name', 'age', 'namespace', 'ready', 'status', 'restarts', 'node'])
+  })
+})
+
+describe('sanitizeColumnOrder', () => {
+  it('reads anything that is not a key list as no order', () => {
+    expect(sanitizeColumnOrder(undefined)).toBeNull()
+    expect(sanitizeColumnOrder('age')).toBeNull()
+    expect(sanitizeColumnOrder({ 0: 'age' })).toBeNull()
+    expect(sanitizeColumnOrder([1, null])).toBeNull()
+  })
+
+  it('keeps string keys, first occurrence wins', () => {
+    expect(sanitizeColumnOrder(['age', 3, 'node', 'age'])).toEqual(['age', 'node'])
+  })
+})
+
+describe('moveColumn', () => {
+  it('returns the movable keys with the column moved', () => {
+    expect(moveColumn(PODS, 'age', 0)).toEqual(['age', 'namespace', 'ready', 'status', 'restarts', 'node'])
+    expect(moveColumn(PODS, 'namespace', 5)).toEqual(['ready', 'status', 'restarts', 'age', 'node', 'namespace'])
+  })
+
+  it('returns null for a no-op, an out-of-range edge move, or a pinned column', () => {
+    expect(moveColumn(PODS, 'namespace', -1)).toBeNull()
+    expect(moveColumn(PODS, 'node', 99)).toBeNull()
+    expect(moveColumn(PODS, 'name', 2)).toBeNull()
+    expect(moveColumn(PODS, 'missing', 0)).toBeNull()
+  })
+})
+
+describe('pinnedColumnCount', () => {
+  it('pins through Name, and nothing when there is no Name column', () => {
+    expect(pinnedColumnCount(PODS)).toBe(1)
+    expect(pinnedColumnCount(cols('cluster', 'name', 'age'))).toBe(2)
+    expect(pinnedColumnCount(cols('age'))).toBe(0)
+  })
+})

package/src/components/resources/column-order.ts

@@ -0,0 +1,64 @@
+// The user's column order for a resource table, kept apart from visibility: it
+// lists every movable column, hidden ones included, so a column hidden and later
+// re-shown comes back where it was.
+
+interface Keyed {
+  key: string
+}
+
+/** Columns up to and including Name stay where the kind defines them. Name is
+ *  the flexible column and the row link; host-injected leading columns sit in
+ *  front of it by contract. */
+export function pinnedColumnCount(columns: readonly Keyed[]): number {
+  return columns.findIndex(c => c.key === 'name') + 1
+}
+
+/** A saved order read from localStorage: only string keys, first occurrence
+ *  wins. Anything else reads as "no saved order". */
+export function sanitizeColumnOrder(raw: unknown): string[] | null {
+  if (!Array.isArray(raw)) return null
+  const seen = new Set<string>()
+  for (const k of raw) {
+    if (typeof k === 'string' && !seen.has(k)) seen.add(k)
+  }
+  return seen.size ? Array.from(seen) : null
+}
+
+/**
+ * Columns in the user's saved order.
+ *
+ * Saved keys that no longer exist are ignored. A column the saved order does not
+ * name (a built-in, printer, or custom column) goes
+ * where it sits by default: right before the column that follows it in the
+ * definition, or at the end when nothing that follows it is in the saved order.
+ */
+export function applyColumnOrder<T extends Keyed>(columns: readonly T[], order: readonly string[] | null | undefined): T[] {
+  if (!order?.length) return [...columns]
+  const pinned = pinnedColumnCount(columns)
+  const movable = columns.slice(pinned)
+  const rank = new Map(order.map((k, i) => [k, i]))
+  const result = movable
+    .filter(c => rank.has(c.key))
+    .sort((a, b) => rank.get(a.key)! - rank.get(b.key)!)
+  movable.forEach((c, i) => {
+    if (rank.has(c.key)) return
+    const anchor = movable.slice(i + 1).find(n => rank.has(n.key))
+    const at = anchor ? result.indexOf(anchor) : -1
+    if (at === -1) result.push(c)
+    else result.splice(at, 0, c)
+  })
+  return [...columns.slice(0, pinned), ...result]
+}
+
+/** The movable keys of `columns` (already in display order) after moving `key`
+ *  to `toIndex` within them. Returns null when nothing would change. */
+export function moveColumn(columns: readonly Keyed[], key: string, toIndex: number): string[] | null {
+  const keys = columns.slice(pinnedColumnCount(columns)).map(c => c.key)
+  const from = keys.indexOf(key)
+  if (from === -1) return null
+  const to = Math.max(0, Math.min(keys.length - 1, toIndex))
+  if (to === from) return null
+  keys.splice(from, 1)
+  keys.splice(to, 0, key)
+  return keys
+}

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

@@ -0,0 +1,15 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { ArgoApplicationRenderer } from './ArgoApplicationRenderer'
+
+describe('Argo Helm value files', () => {
+  it.each([true, false, undefined])('shows missing-file behavior for single and multiple sources: %s', optional => {
+    const source = { chart: 'cluster', repoURL: 'https://cloudnative-pg.github.io/charts', helm: { valueFiles: ['values.yaml', 'overrides.yaml'], ignoreMissingValueFiles: optional } }
+    for (const spec of [{ source }, { sources: [source] }]) {
+      const html = renderToStaticMarkup(<ArgoApplicationRenderer data={{ metadata: { name: 'app' }, spec }} />)
+      expect(html).toContain('values.yaml, overrides.yaml')
+      expect(html).toContain('If a Value File Is Missing')
+      expect(html).toContain(optional ? 'Skipped' : 'Render fails')
+    }
+  })
+})

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

@@ -81,7 +81,10 @@ function SourceProperties({ source }: { source: any }) {
       )}
       {source.chart && <Property label="Helm Chart" value={source.chart} />}
       {source.helm?.valueFiles && source.helm.valueFiles.length > 0 && (
-        <Property label="Value Files" value={source.helm.valueFiles.join(', ')} />
+        <>
+          <Property label="Value Files" value={source.helm.valueFiles.join(', ')} />
+          <Property label="If a Value File Is Missing" value={source.helm.ignoreMissingValueFiles === true ? 'Skipped' : 'Render fails'} />
+        </>
       )}
       {source.helm?.parameters && source.helm.parameters.length > 0 && (
         <Property

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

@@ -0,0 +1,31 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { CronJobRenderer } from './CronJobRenderer'
+import { getCronJobStatus } from '../resource-utils'
+
+describe('CronJob scheduling and execution evidence', () => {
+  it('does not turn a missing recorded completion into an execution failure', () => {
+    const html = renderToStaticMarkup(<CronJobRenderer data={{
+      spec: { schedule: '0 * * * *', timeZone: 'UTC', startingDeadlineSeconds: 0 },
+      status: { lastScheduleTime: '2026-01-02T12:00:00Z', lastSuccessfulTime: '2026-01-02T11:00:00Z' },
+    }} />)
+    expect(html).toContain('Latest completion not verified')
+    expect(html).not.toContain('Recent Jobs Failing')
+    expect(html).toContain('>UTC<')
+    expect(html).toContain('>0s<')
+  })
+
+  it('shows suspension without claiming an old Job recovered', () => {
+    const html = renderToStaticMarkup(<CronJobRenderer data={{
+      spec: { schedule: '* * * * *', suspend: true },
+      status: { lastScheduleTime: '2026-01-02T12:00:00Z' },
+    }} />)
+    expect(html).toContain('CronJob Suspended')
+    expect(html).not.toContain('Latest completion not verified')
+    expect(html).toContain('Controller local time (zone not reported)')
+  })
+
+  it('does not grade enabled configuration as successful scheduling', () => {
+    expect(getCronJobStatus({ spec: { schedule: '* * * * *' }, status: {} })).toMatchObject({ text: 'Enabled', level: 'neutral' })
+  })
+})

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

@@ -5,7 +5,23 @@ import { TimeValue } from '../../ui/ScheduleValue'
 import { formatRelativeAgeTime } from '../../../utils/format'
 
 interface CronJobRendererProps {
-  data: any
+  data: {
+    metadata?: { namespace?: string }
+    spec?: {
+      schedule?: string
+      timeZone?: string
+      suspend?: boolean
+      concurrencyPolicy?: string
+      startingDeadlineSeconds?: number
+      successfulJobsHistoryLimit?: number
+      failedJobsHistoryLimit?: number
+    }
+    status?: {
+      lastScheduleTime?: string
+      lastSuccessfulTime?: string
+      active?: { name: string; namespace?: string }[]
+    }
+  }
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
@@ -13,21 +29,13 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
 
-  // Check for issues or notable states
   const isSuspended = spec.suspend === true
   const hasNeverRun = !status.lastScheduleTime
 
-  // "Recent failures" means the latest scheduled run didn't reach success.
-  // Only meaningful once nothing is running — while a job is active the most
-  // recent run is simply still in flight, not failing. With concurrencyPolicy
-  // Allow an older failed run can overlap a new active one; CronJob status only
-  // carries aggregate timestamps, so we accept missing that rare case here (the
-  // failed Job still surfaces in the job list / topology) rather than reviving
-  // the false positive that fired on every normal in-flight run.
   const activeJobs = status.active?.length || 0
   const lastSchedule = status.lastScheduleTime ? new Date(status.lastScheduleTime).getTime() : 0
   const lastSuccess = status.lastSuccessfulTime ? new Date(status.lastSuccessfulTime).getTime() : 0
-  const recentFailures = activeJobs === 0 && lastSchedule > 0 && lastSchedule > lastSuccess
+  const completionUnverified = activeJobs === 0 && lastSchedule > 0 && lastSchedule > lastSuccess
 
   return (
     <>
@@ -46,23 +54,23 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
         <AlertBanner
           variant="info"
           title="Never Scheduled"
-          message="This CronJob has never run. Check the schedule and starting deadline settings."
+          message="Kubernetes has not recorded a scheduled run. Check the schedule and controller Events."
         />
       )}
 
-      {/* Recent failures warning */}
-      {recentFailures && !isSuspended && (
+      {completionUnverified && !isSuspended && (
         <AlertBanner
-          variant="error"
-          title="Recent Jobs Failing"
-          message={<>Jobs have been scheduled but haven't succeeded recently. Last success: {formatRelativeAgeTime(status.lastSuccessfulTime, 'never')}. Check job history and pod logs.</>}
+          variant="info"
+          title="Latest completion not verified"
+          message={<>No successful completion is recorded after the latest scheduled run. Last success: {formatRelativeAgeTime(status.lastSuccessfulTime, 'never')}. Inspect the Job history to check the execution outcome.</>}
         />
       )}
 
       <Section title="Schedule" icon={Clock}>
         <PropertyList>
           <Property label="Schedule" value={spec.schedule} />
-          <Property label="Human" value={cronToHuman(spec.schedule)} />
+          <Property label="Human" value={cronToHuman(spec.schedule ?? '')} />
+          <Property label="Time Zone" value={spec.timeZone ?? 'Controller local time (zone not reported)'} />
           <Property label="Suspend" value={spec.suspend ? 'Yes' : 'No'} />
           <Property label="Last Schedule" value={<TimeValue timestamp={status.lastScheduleTime} fallback="Never" />} />
           <Property label="Last Success" value={<TimeValue timestamp={status.lastSuccessfulTime} fallback="Never" />} />
@@ -73,16 +81,16 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
       <Section title="Configuration">
         <PropertyList>
           <Property label="Concurrency" value={spec.concurrencyPolicy || 'Allow'} />
-          <Property label="Starting Deadline" value={spec.startingDeadlineSeconds ? `${spec.startingDeadlineSeconds}s` : 'None'} />
+          <Property label="Starting Deadline" value={spec.startingDeadlineSeconds != null ? `${spec.startingDeadlineSeconds}s` : 'None'} />
           <Property label="Success History" value={spec.successfulJobsHistoryLimit ?? 3} />
           <Property label="Failed History" value={spec.failedJobsHistoryLimit ?? 1} />
         </PropertyList>
       </Section>
 
-      {status.active?.length > 0 && (
+      {status.active && status.active.length > 0 && (
         <Section title="Active Jobs">
           <div className="space-y-1">
-            {status.active.map((job: any) => (
+            {status.active.map((job) => (
               <div key={job.name} className="text-sm">
                 <ResourceLink name={job.name} kind="jobs" namespace={job.namespace || data.metadata?.namespace || ''} onNavigate={onNavigate} />
               </div>

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { Package, Settings, CheckCircle2, History, FileCode2, GitBranch } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts, ResourceLink } from '../../ui/drawer-components'
@@ -5,12 +6,21 @@ import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
 import { TimeValue } from '../../ui/ScheduleValue'
 
+export interface FluxValuesReference {
+  kind?: 'ConfigMap' | 'Secret'
+  name: string
+  optional?: boolean
+  valuesKey?: string
+  targetPath?: string
+}
+
 interface FluxHelmReleaseRendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  renderValuesReference?: (reference: FluxValuesReference) => ReactNode
 }
 
-export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRendererProps) {
+export function FluxHelmReleaseRenderer({ data, onNavigate, renderValuesReference }: FluxHelmReleaseRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const conditions = (status.conditions || []) as FluxCondition[]
@@ -59,7 +69,7 @@ export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRen
   }
 
   // Values info
-  const valuesFrom = spec.valuesFrom || []
+  const valuesFrom: FluxValuesReference[] = spec.valuesFrom || []
   const values = spec.values || {}
   const valueKeys = Object.keys(values)
 
@@ -149,15 +159,18 @@ export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRen
                 Values From
               </div>
               <div className="space-y-1">
-                {valuesFrom.map((ref: any, idx: number) => (
+                {valuesFrom.map((ref, idx) => (
                   <div key={idx} className="card-inner text-sm flex items-center gap-2 flex-wrap">
                     <span className="badge-sm status-neutral">{ref.kind || 'ConfigMap'}</span>
-                    <ResourceLink
-                      name={ref.name}
-                      kind={ref.kind === 'Secret' ? 'secrets' : 'configmaps'}
-                      namespace={data.metadata?.namespace || ''}
-                      onNavigate={onNavigate}
-                    />
+                    {ref.optional && <span className="badge-sm status-neutral">Optional</span>}
+                    {renderValuesReference ? renderValuesReference(ref) : (
+                      <ResourceLink
+                        name={ref.name}
+                        kind={ref.kind === 'Secret' ? 'secrets' : 'configmaps'}
+                        namespace={data.metadata?.namespace || ''}
+                        onNavigate={onNavigate}
+                      />
+                    )}
                     {ref.valuesKey && (
                       <span className="text-theme-text-tertiary text-xs">
                         key: {ref.valuesKey}

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'])
+  })
+})