@skyhook-io/k8s-ui 1.18.0 → 1.18.1

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

@@ -21,6 +21,70 @@ const pod = {
   status: { phase: 'Running' },
 }
 
+describe('PodRenderer completed readiness conditions', () => {
+  const completionConditions = [
+    { type: 'PodReadyToStartContainers', status: 'False' },
+    { type: 'Initialized', status: 'True', reason: 'PodCompleted' },
+    { type: 'Ready', status: 'False', reason: 'PodCompleted' },
+    { type: 'ContainersReady', status: 'False', reason: 'PodCompleted' },
+    { type: 'PodScheduled', status: 'True' },
+  ]
+  const renderConditions = (phase: string | undefined, conditions = completionConditions) => renderToString(
+    <PodRenderer
+      data={{ ...pod, status: { phase, conditions } }}
+      onCopy={() => undefined}
+      copied={null}
+    />,
+  )
+
+  it('keeps completed readiness observations visible without counting them as failing', () => {
+    const html = renderConditions('Succeeded')
+
+    expect(html).toContain('Conditions (5)')
+    expect(html).not.toContain('failing')
+    expect(html).toContain('PodReadyToStartContainers')
+    expect(html).toContain('ContainersReady')
+    expect(html).toContain('PodCompleted')
+  })
+
+  it('uses successful completion even when readiness reasons are stale or absent', () => {
+    const html = renderConditions('Succeeded', [
+      { type: 'PodReadyToStartContainers', status: 'False' },
+      { type: 'Ready', status: 'False', reason: 'ContainersNotReady' },
+      { type: 'ContainersReady', status: 'False' },
+    ])
+
+    expect(html).toContain('Conditions (3)')
+    expect(html).not.toContain('failing')
+    expect(html).toContain('ContainersNotReady')
+  })
+
+  it.each(['Running', 'Failed', undefined])('retains readiness failures when phase is %s', (phase) => {
+    const html = renderConditions(phase, [
+      { type: 'PodReadyToStartContainers', status: 'False' },
+      { type: 'Ready', status: 'False', reason: 'PodFailed' },
+      { type: 'ContainersReady', status: 'False' },
+    ])
+
+    expect(html).toContain('Conditions (3) · 3 failing')
+  })
+
+  it('does not let a completion reason hide readiness failures on a failed Pod', () => {
+    expect(renderConditions('Failed')).toContain('Conditions (5) · 3 failing')
+  })
+
+  it('retains unrelated false conditions after successful completion', () => {
+    const html = renderConditions('Succeeded', [
+      ...completionConditions,
+      { type: 'example.com/controller-ready', status: 'False', reason: 'ControllerFailed' },
+    ])
+
+    expect(html).toContain('Conditions (6) · 1 failing')
+    expect(html).toContain('example.com/controller-ready')
+    expect(html).toContain('ControllerFailed')
+  })
+})
+
 describe('PodRenderer envFrom expansion', () => {
   it('keeps same-name ConfigMap and Secret values separate', () => {
     const resolvedEnvFrom: ResolvedEnvFrom = {
@@ -482,3 +546,54 @@ it('shows reported running-but-unready nginx readiness as degraded', () => {
   expect(html).toMatch(/bg-amber-100[^>]*>Not Ready</)
   expect(html).toMatch(/>running</)
 })
+
+describe('finished Pod resource usage',()=>{
+ it.each(['Succeeded','Failed'])('explains ended live usage for %s without cluster repair advice',phase=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase}}} onCopy={()=>{}} copied={null} metricsUnavailable metricsHistory={{containers:[],metricsUnavailableReason:'not found'}} />)
+  expect(html).toContain('Live resource usage has ended for this Pod')
+  expect(html).toContain('No recorded usage is available.')
+  expect(html).not.toContain('Metrics collection error:')
+  expect(html).not.toContain('Radar cannot read metrics.k8s.io')
+  expect(html).not.toContain('No usage yet: this Pod is not running')
+ })
+ it('keeps a genuine collector error qualified as current on a finished Pod',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Succeeded'}}} onCopy={()=>{}} copied={null} metricsHistory={{containers:[],collectionError:'forbidden: list pods.metrics.k8s.io'}} />)
+  expect(html).toContain('Current cluster metrics collection error:')
+  expect(html).toContain('forbidden: list pods.metrics.k8s.io')
+  expect(html).toContain('Live resource usage has ended for this Pod')
+ })
+ it('keeps recorded history and hides cached live usage after completion',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Succeeded'}}} onCopy={()=>{}} copied={null}
+   metrics={{timestamp:'2026-10-25T12:00:00Z',containers:[{name:'cached-live',usage:{cpu:'100m',memory:'1Mi'}}]}}
+   metricsHistory={{containers:[{name:'recorded-history',dataPoints:[{timestamp:'2026-10-25T11:59:00Z',cpu:100,memory:1024}]}]}} />)
+  expect(html).toContain('recorded-history')
+  expect(html).not.toContain('cached-live')
+  expect(html).not.toContain('Last updated:')
+ })
+ it('distinguishes loading from a loaded empty terminal history',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Succeeded'}}} onCopy={()=>{}} copied={null} metricsHistoryLoading />)
+  expect(html).toContain('Loading recorded usage...')
+  expect(html).not.toContain('No recorded usage is available.')
+ })
+ it('shows a failed terminal history fetch without claiming empty history',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Failed'}}} onCopy={()=>{}} copied={null} metricsHistoryError={new Error('Metrics history not available')} />)
+  expect(html).toContain('Recorded usage could not be loaded')
+  expect(html).toContain('Metrics history not available')
+  expect(html).not.toContain('No recorded usage is available.')
+ })
+ it('retains cached history when its refresh fails',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Succeeded'}}} onCopy={()=>{}} copied={null}
+   metricsHistory={{containers:[{name:'recorded-history',dataPoints:[{timestamp:'2026-10-25T11:59:00Z',cpu:100,memory:1024}]}]}}
+   metricsHistoryError={new Error('Network request failed')} />)
+  expect(html).toContain('Recorded usage could not be refreshed')
+  expect(html).toContain('recorded-history')
+  expect(html).not.toContain('No recorded usage is available.')
+ })
+
+ it('keeps usage absent when the host wires no metrics state',()=>{
+  const html=renderToString(<PodRenderer data={{...pod,status:{phase:'Succeeded'}}} onCopy={()=>{}} copied={null} />)
+  expect(html).not.toContain('Resource Usage')
+  expect(html).not.toContain('Live resource usage has ended')
+ })
+
+})

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

@@ -87,6 +87,8 @@ interface PodRendererProps {
   // Metrics data injection
   metrics?: { containers?: any[]; timestamp?: string }
   metricsHistory?: { metricsAPIReachable?: boolean; containers?: any[]; collectionError?: string; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
+  metricsHistoryLoading?: boolean
+  metricsHistoryError?: Error | null
   metricsUnavailable?: boolean
   hideMetricsServer?: boolean
   // Filesystem browser render props
@@ -286,6 +288,8 @@ export function PodRenderer({
   renderPortAction,
   metrics,
   metricsHistory,
+  metricsHistoryLoading,
+  metricsHistoryError,
   metricsUnavailable,
   hideMetricsServer,
   renderImageBrowser,
@@ -320,6 +324,7 @@ export function PodRenderer({
   const namespace = data.metadata?.namespace
   const podName = data.metadata?.name
   const isRunning = data.status?.phase === 'Running'
+  const isTerminal = data.status?.phase === 'Succeeded' || data.status?.phase === 'Failed'
 
   // Check for problems. Suppressed when the detail already shows the dedicated
   // Operational Issues section (the Issues pipeline covers the same pod failures,
@@ -329,9 +334,10 @@ export function PodRenderer({
   const hasProblems = podProblems.length > 0 && !operationalIssuesShown
   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 showMetricsUnavailable = !isTerminal && !!metricsUnavailable && !metricsHistory?.collectionError && !noUsageYet
   const hasMetricsHistory = !!metricsHistory?.containers?.length
-  const currentMetrics = metricsUnavailable ? undefined : metrics
+  const showTerminalUsage = isTerminal && (metricsHistory !== undefined || metricsHistoryLoading || !!metricsHistoryError || !!metrics || metricsUnavailable)
+  const currentMetrics = isTerminal || metricsUnavailable ? undefined : metrics
 
   // Image filesystem modal state
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
@@ -872,15 +878,30 @@ export function PodRenderer({
       )}
 
       {/* Resource Usage (from metrics-server) — hidden when Prometheus has CPU/memory data */}
-      {!hideMetricsServer && !!(currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable || noUsageYet) && (
+      {!hideMetricsServer && !!(showTerminalUsage || currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable || noUsageYet) && (
         <Section title="Resource Usage" icon={Activity} defaultExpanded>
+          {isTerminal && (
+            <div className="mb-3 text-sm text-theme-text-tertiary">
+              Live resource usage has ended for this Pod.{metricsHistory && !hasMetricsHistory && !metricsHistoryLoading && !metricsHistoryError && ' No recorded usage is available.'}
+            </div>
+          )}
+          {isTerminal && metricsHistoryLoading && (
+            <p className="mb-3 text-sm text-theme-text-tertiary">Loading recorded usage...</p>
+          )}
+          {isTerminal && metricsHistoryError && (
+            <AlertBanner
+              variant="warning"
+              title={metricsHistory ? 'Recorded usage could not be refreshed' : 'Recorded usage could not be loaded'}
+              message={metricsHistoryError.message}
+            />
+          )}
           {noUsageYet && <MetricsUnavailableNotice noUsageYet />}
           {showMetricsUnavailable && (
             <MetricsUnavailableNotice rawError={metricsHistory?.metricsUnavailableReason} diagnosis={metricsHistory?.metricsUnavailableDiagnosis} />
           )}
           {metricsHistory?.collectionError && (
             <div className="mb-3 rounded-lg border border-yellow-500/30 bg-yellow-500/5 px-3 py-2 text-xs text-yellow-400">
-              <span className="font-medium">Metrics collection error:</span>{' '}
+              <span className="font-medium">{isTerminal ? 'Current cluster metrics collection error:' : 'Metrics collection error:'}</span>{' '}
               <span className="break-all">{metricsHistory.collectionError}</span>
             </div>
           )}
@@ -970,14 +991,16 @@ export function PodRenderer({
         </Section>
       )}
 
-      {/* Conditions. A completed pod's Ready/ContainersReady flip to False with
-          reason "PodCompleted" — that's expected for a finished pod, not a failure,
-          so tone it neutral (gray) instead of red. Gated on the PodCompleted reason
-          so a genuinely not-ready pod (any other reason) still reads red. */}
+      {/* Sandbox teardown and lost serving readiness are expected after success;
+          custom conditions retain their own meaning. */}
       <ConditionsSection
         conditions={data.status?.conditions}
         getConditionTone={(cond) =>
-          cond?.status === 'False' && cond?.reason === 'PodCompleted' ? 'unknown' : undefined
+          data.status?.phase === 'Succeeded'
+            && cond?.status === 'False'
+            && ['Ready', 'ContainersReady', 'PodReadyToStartContainers'].includes(cond?.type)
+            ? 'unknown'
+            : undefined
         }
       />
 

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

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest'
+import { searchTrivyFindings, trivyReportImageRef } from './resource-utils-trivy'
+
+const vuln = {
+  metadata: { name: 'replicaset-billing-5cfccf7776-php-nginx', namespace: 'legacy' },
+  report: {
+    registry: { server: 'index.docker.io' },
+    artifact: { repository: 'trafex/php-nginx', tag: '3.6.0', digest: 'sha256:abc' },
+    vulnerabilities: [
+      { vulnerabilityID: 'CVE-2025-0001', resource: 'libssl3', installedVersion: '3.3.2-r0', fixedVersion: '3.3.3-r0' },
+      { vulnerabilityID: 'CVE-2026-109618', resource: 'php83', installedVersion: '8.3.20-r0', fixedVersion: '8.3.36-r0' },
+      { vulnerabilityID: 'CVE-2026-0002', resource: 'busybox', installedVersion: '1.36.1-r29' },
+    ],
+  },
+}
+const secrets = {
+  metadata: { name: 'replicaset-billing-secrets', namespace: 'legacy' },
+  report: { secrets: [{ ruleID: 'aws-access-key-id', target: '/var/www/html/.env', match: 'AWS_ACCESS_KEY_ID=AKIAREVIEWFIXTURE01' }] },
+}
+const audit = {
+  metadata: { name: 'replicaset-api-8467889d75', namespace: 'team-b' },
+  report: { checks: [{ checkID: 'KSV012', success: false }, { checkID: 'KSV001', success: true }] },
+}
+const sbom = {
+  metadata: { name: 'replicaset-web-sbom', namespace: 'shop' },
+  report: { components: { components: [{ name: 'guzzlehttp/guzzle', version: '7.8.1' }] } },
+}
+
+describe('searchTrivyFindings', () => {
+  it('matches a CVE and names the finding with its versions', () => {
+    const { matches, truncated } = searchTrivyFindings([vuln, secrets], 'cve-2026-109618')
+    expect(truncated).toBe(false)
+    expect([...matches.keys()]).toEqual([vuln])
+    expect(matches.get(vuln)).toEqual({ site: 'finding', text: 'CVE-2026-109618 php83 8.3.20-r0 → 8.3.36-r0' })
+  })
+
+  it('matches packages, unfixed findings, SBOM components and failed checks', () => {
+    const text = (r: any, term: string) => searchTrivyFindings([r], term).matches.get(r)?.text
+    expect(text(vuln, 'php83')).toContain('php83')
+    expect(text(vuln, 'busybox')).toBe('CVE-2026-0002 busybox 1.36.1-r29 → unfixed')
+    expect(text(sbom, 'guzzle')).toBe('guzzlehttp/guzzle 7.8.1')
+    expect(text(audit, 'ksv012')).toBe('KSV012')
+  })
+
+  it('tells an image match apart from a finding', () => {
+    expect(searchTrivyFindings([vuln], 'sha256:abc').matches.get(vuln)).toEqual({ site: 'image', text: 'index.docker.io/trafex/php-nginx:3.6.0@sha256:abc' })
+  })
+
+  it('treats the term as text, not a pattern', () => {
+    expect(searchTrivyFindings([vuln], '8.3.20-r0 →').matches.has(vuln)).toBe(true)
+    expect(searchTrivyFindings([vuln], 'php8.').matches.size).toBe(0)
+  })
+
+  it('caps a finding at 256 UTF-8 bytes for phrases, like server search', () => {
+    const wide = { metadata: { name: 'r', namespace: 'n' }, report: { components: { components: [{ name: 'é'.repeat(128), version: 'needle' }] } } }
+    expect(searchTrivyFindings([wide], 'é needle').matches.size).toBe(0)
+    expect(searchTrivyFindings([wide], 'needle').matches.size).toBe(1)
+  })
+
+  it('matches a phrase across one finding, never across findings', () => {
+    expect(searchTrivyFindings([vuln], 'php83 8.3.20').matches.has(vuln)).toBe(true)
+    expect(searchTrivyFindings([vuln], 'libssl3 8.3.20').matches.has(vuln)).toBe(false)
+  })
+
+  it('never searches a passing check or a secret finding\'s matched text', () => {
+    expect(searchTrivyFindings([audit], 'ksv001').matches.size).toBe(0)
+    expect(searchTrivyFindings([secrets], 'akiareview').matches.size).toBe(0)
+    expect(searchTrivyFindings([secrets], 'aws-access-key-id').matches.get(secrets)?.text).toBe('aws-access-key-id /var/www/html/.env')
+  })
+
+  it('skips rows whose name or namespace already match', () => {
+    expect(searchTrivyFindings([vuln], 'legacy').matches.size).toBe(0)
+  })
+
+  it('stops at the findings limit and says the search was cut short', () => {
+    const { matches, truncated } = searchTrivyFindings([vuln, vuln], 'cve-2026-0002', 4)
+    expect(truncated).toBe(true)
+    expect(matches.size).toBe(1)
+  })
+})
+
+describe('trivyReportImageRef', () => {
+  it('renders registry/repository:tag@digest like server search', () => {
+    expect(trivyReportImageRef(vuln)).toBe('index.docker.io/trafex/php-nginx:3.6.0@sha256:abc')
+    expect(trivyReportImageRef({ report: {} })).toBe('')
+  })
+})

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

@@ -55,6 +55,128 @@ export function getVulnerabilityReportContainer(report: any): string {
   return report.metadata?.labels?.['trivy-operator.container.name'] || '-'
 }
 
+// ============================================================================
+// TRIVY OPERATOR — TABLE SEARCH OVER FINDINGS
+// ============================================================================
+
+export const TRIVY_GROUP = 'aquasecurity.github.io'
+
+// Bounds one table search over findings. The filter runs on the main thread,
+// and a cluster can hold thousands of reports with hundreds of findings each.
+const MAX_TABLE_FINDINGS = 200_000
+
+// Server search caps one indexed finding at 256 bytes (internal/search/trivy.go).
+const MAX_FINDING_LABEL = 256
+
+export interface TrivyFindingMatch {
+  site: 'finding' | 'image'
+  text: string
+}
+
+export interface TrivyFindingsSearch {
+  // Rows that matched only through a finding or the scanned image.
+  matches: Map<object, TrivyFindingMatch>
+  truncated: boolean
+}
+
+function str(v: unknown): string {
+  return typeof v === 'string' ? v : ''
+}
+
+function asArray(v: unknown): any[] {
+  return Array.isArray(v) ? v : []
+}
+
+// findingLabel joins a finding's parts and caps it at MAX_FINDING_LABEL
+// UTF-8 bytes on a character boundary, as server search does, so a phrase
+// that falls past the cap matches in neither place.
+function findingLabel(...parts: string[]): string {
+  const label = parts.filter(Boolean).join(' ')
+  // A UTF-16 unit is at most 3 UTF-8 bytes, so short labels need no count.
+  if (label.length * 3 <= MAX_FINDING_LABEL) return label
+  let bytes = 0
+  let end = 0
+  for (const ch of label) {
+    const cp = ch.codePointAt(0) ?? 0
+    const size = cp < 0x80 ? 1 : cp < 0x800 ? 2 : cp < 0x10000 ? 3 : 4
+    if (bytes + size > MAX_FINDING_LABEL) break
+    bytes += size
+    end += ch.length
+  }
+  return label.slice(0, end)
+}
+
+// trivyReportImageRef renders a report's scanned image the way search
+// indexes it: registry/repository:tag@digest.
+export function trivyReportImageRef(resource: any): string {
+  const report = resource?.report
+  const repo = str(report?.artifact?.repository)
+  if (!repo) return ''
+  const registry = str(report?.registry?.server)
+  let ref = registry ? `${registry}/${repo}` : repo
+  const tag = str(report?.artifact?.tag)
+  if (tag) ref += `:${tag}`
+  const digest = str(report?.artifact?.digest)
+  if (digest) ref += `@${digest}`
+  return ref
+}
+
+// searchTrivyFindings finds reports whose findings contain term, over the
+// entries server search indexes (internal/search/trivy.go): CVE IDs with
+// package and versions, SBOM components, failed check IDs, secret rule IDs
+// and targets, plus the scanned image. A secret finding's `match` is the
+// matched line itself and is never searched. A term with a space matches
+// within one finding, never across two. Rows whose name or namespace already
+// contain term are skipped, since they match without a finding.
+export function searchTrivyFindings(resources: readonly any[], term: string, limit = MAX_TABLE_FINDINGS): TrivyFindingsSearch {
+  const matches = new Map<object, TrivyFindingMatch>()
+  const re = new RegExp(term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i')
+  const spaced = term.includes(' ')
+  const hit = (...parts: string[]): boolean =>
+    spaced ? re.test(findingLabel(...parts)) : parts.some((p) => p !== '' && re.test(p))
+  let left = limit
+  for (const r of resources) {
+    const meta = r?.metadata
+    if (re.test(str(meta?.name)) || re.test(str(meta?.namespace))) continue
+    const report = r?.report
+    if (!report || typeof report !== 'object') continue
+    const image = trivyReportImageRef(r)
+    if (image && re.test(image)) {
+      matches.set(r, { site: 'image', text: image })
+      continue
+    }
+    let found = ''
+    let truncated = false
+    scan: {
+      for (const v of asArray(report.vulnerabilities)) {
+        if (--left < 0) { truncated = true; break scan }
+        const id = str(v?.vulnerabilityID)
+        if (!id) continue
+        const parts = [id, str(v.resource), str(v.installedVersion), '→', str(v.fixedVersion) || 'unfixed']
+        if (hit(...parts)) { found = findingLabel(...parts); break scan }
+      }
+      for (const c of asArray(report.components?.components)) {
+        if (--left < 0) { truncated = true; break scan }
+        const parts = [str(c?.name), str(c?.version)]
+        if (hit(...parts)) { found = findingLabel(...parts); break scan }
+      }
+      for (const c of asArray(report.checks)) {
+        if (--left < 0) { truncated = true; break scan }
+        if (c?.success !== false) continue
+        if (hit(str(c.checkID))) { found = findingLabel(str(c.checkID)); break scan }
+      }
+      for (const sec of asArray(report.secrets)) {
+        if (--left < 0) { truncated = true; break scan }
+        const parts = [str(sec?.ruleID), str(sec?.target)]
+        if (hit(...parts)) { found = findingLabel(...parts); break scan }
+      }
+    }
+    if (found) matches.set(r, { site: 'finding', text: found })
+    if (truncated) return { matches, truncated: true }
+  }
+  return { matches, truncated: false }
+}
+
 // ============================================================================
 // TRIVY OPERATOR — CONFIG AUDIT REPORT UTILITIES
 // ============================================================================

package/src/components/shared/DetailShell.tsx

@@ -77,22 +77,24 @@ export function DetailShell<TId extends string = string>({
       <div className="shrink-0 border-b border-theme-border bg-theme-base">
         {!compactHeader && (
           <>
-            {breadcrumb && <div className="px-6 pt-2.5">{breadcrumb}</div>}
-            <div className={clsx('px-6 flex items-start gap-4', wrapHeader && 'flex-wrap gap-y-2', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
+            {breadcrumb && <div className="px-6 pt-2.5 phone:px-4">{breadcrumb}</div>}
+            {/* Phones always wrap: the identity takes the row beside the back
+                button and the actions drop below it. */}
+            <div className={clsx('px-6 flex items-start gap-4 phone:px-4 phone:flex-wrap phone:gap-x-3 phone:gap-y-2', wrapHeader && 'flex-wrap gap-y-2', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
               {nav}
               {/* Wrapping on, the identity's basis is its one-line width, so the
                   actions move below whenever the whole title line would not fit
                   beside them — never squeezing the name to keep them up. */}
-              <div className={clsx('min-w-0', wrapHeader ? 'flex-auto' : 'flex-1')}>{identity}</div>
+              <div className={clsx('min-w-0 phone:basis-[calc(100%-3rem)]', wrapHeader ? 'flex-auto' : 'flex-1')}>{identity}</div>
               {wrapHeader ? <div className="ml-auto flex shrink-0 items-start gap-4">{headerActions}</div> : headerActions}
             </div>
-            {subheader && <div className="-mt-1 px-6 pb-3">{subheader}</div>}
+            {subheader && <div className="-mt-1 px-6 pb-3 phone:px-4">{subheader}</div>}
           </>
         )}
 
         {/* Tabs (left) + scope controls / actions (right) */}
-        <div className={clsx('flex items-center', compactHeader ? 'px-0' : 'border-t border-theme-border px-6')}>
-          <div ref={stripRef} className={clsx('flex min-w-0 flex-auto overflow-x-auto', compact ? 'gap-0' : 'gap-1')} role="tablist">
+        <div className={clsx('flex items-center phone:flex-wrap', compactHeader ? 'px-0' : 'border-t border-theme-border px-6 phone:px-4')}>
+          <div ref={stripRef} className={clsx('flex min-w-0 flex-auto overflow-x-auto phone:basis-full', compact ? 'gap-0' : 'gap-1')} role="tablist">
             {visibleTabs.map((t) => (
               <DetailShellTabButton key={t.id} active={activeTab === t.id} compact={compact} onClick={() => onTabChange(t.id)}>
                 {!compact && t.icon}
@@ -102,7 +104,7 @@ export function DetailShell<TId extends string = string>({
             ))}
           </div>
           {(scopeControls || tabStripEnd) && (
-            <div className="ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2 pl-2">
+            <div className="ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2 pl-2 phone:py-2">
               {scopeControls}
               {tabStripEnd}
             </div>

package/src/components/shared/ManagedByChip.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+
+import { ManagedByChip } from './ManagedByChip'
+
+const owner = { tool: 'argocd' as const, kind: 'applications' as const, namespace: 'argocd', name: 'billing' }
+
+describe('ManagedByChip', () => {
+  it('says Managed by for a verified owner its status confirms', () => {
+    const html = renderToString(<ManagedByChip owner={owner} verified listing={{ state: 'confirmed' }} />)
+    expect(html).toContain('Managed by')
+  })
+
+  it('says Tracked by, with a warning, for an owner whose status does not list the resource while another does', () => {
+    const html = renderToString(
+      <ManagedByChip owner={owner} verified listing={{ state: 'conflict', listedBy: [{ tool: 'argocd', kind: 'applications', namespace: 'argocd', name: 'hub' }] }} />,
+    )
+    expect(html).toContain('Tracked by')
+    expect(html).not.toContain('Managed by')
+    expect(html).toMatch(/rounded-full[^"]*bg-amber/)
+  })
+})

package/src/components/shared/ManagedByChip.tsx

@@ -1,6 +1,6 @@
 import { GitBranch, Package } from 'lucide-react'
 import { clsx } from 'clsx'
-import type { GitOpsOwnerRef } from '../../utils/gitops-owner'
+import type { GitOpsOwnerRef, ManagerListing } from '../../utils/gitops-owner'
 import type { GitOpsStatus } from '../../types/gitops'
 import { StatusDot, type StatusTone } from '../ui/status-tone'
 import { Tooltip } from '../ui/Tooltip'
@@ -11,7 +11,10 @@ export type HelmOwnerRef = {
 }
 
 // ManagedByChip renders the "Managed by <ArgoCD/FluxCD app>" affordance for
-// resources detected (via labels/annotations) to be GitOps-managed. The chip
+// resources detected (via labels/annotations) to be GitOps-managed. `listing`
+// compares that claim with the managers whose status lists the resource: a
+// manager that doesn't list it while another does is shown as "Tracked by"
+// with a warning, since the claim is all that names it. The chip
 // is clickable when the host wires `onOpen`; integrators that don't surface
 // a GitOps tab can omit the handler and the chip degrades to a passive badge
 // so the relationship is still visible.
@@ -26,6 +29,7 @@ export function ManagedByChip({
   verified = true,
   pending = false,
   source,
+  listing,
   variant = 'inline',
 }: {
   owner: GitOpsOwnerRef
@@ -34,13 +38,15 @@ export function ManagedByChip({
   verified?: boolean
   pending?: boolean
   source?: string | null
+  listing?: ManagerListing
   variant?: 'inline' | 'block'
 }) {
   const toolLabel = owner.tool === 'argocd' ? 'ArgoCD' : 'FluxCD'
   const ownerKindLabel = gitOpsOwnerKindLabel(owner)
   const label = owner.namespace ? `${owner.namespace}/${owner.name}` : owner.name
   const statusLabel = status ? gitOpsStatusLabel(status) : null
-  const prefix = pending ? 'Resolving' : verified ? 'Managed by' : 'Tracked by'
+  const conflict = listing?.state === 'conflict' ? listing.listedBy : null
+  const prefix = pending ? 'Resolving' : verified && !conflict ? 'Managed by' : 'Tracked by'
   const tooltipContent = (
     <span className="flex flex-col gap-1">
       <span>
@@ -48,10 +54,23 @@ export function ManagedByChip({
           <>
             Looking up matching {ownerKindLabel} <TooltipCode>{label}</TooltipCode> in this cluster.
           </>
+        ) : conflict ? (
+          <>
+            This resource's {toolLabel} tracking metadata names <TooltipCode>{label}</TooltipCode>, but that {ownerKindLabel}'s status doesn't list it.{' '}
+            {conflict.length === 1 ? 'The status of ' : 'The statuses of '}
+            {conflict.map((m, i) => (
+              <span key={`${m.namespace}/${m.name}`}>
+                {i > 0 && ', '}
+                <TooltipCode>{m.namespace ? `${m.namespace}/${m.name}` : m.name}</TooltipCode>
+              </span>
+            ))}{' '}
+            {conflict.length === 1 ? 'does.' : 'do.'}
+          </>
         ) : verified ? (
           <>
             Managed by {toolLabel} · <TooltipCode>{label}</TooltipCode>
             {statusLabel && <> · {statusLabel}{status?.message ? `: ${status.message}` : ''}</>}
+            {listing?.state === 'confirmed' && <>. Its status lists this resource too.</>}
           </>
         ) : (
           <>
@@ -80,6 +99,7 @@ export function ManagedByChip({
         )}
       >
         <GitBranch className="h-3 w-3 shrink-0" />
+        {conflict && <StatusDot tone="degraded" size="xs" />}
         <span className="shrink-0 text-theme-text-tertiary">{prefix}</span>
         <span className="truncate max-w-[180px]">{label}</span>
         {statusLabel && (
@@ -141,7 +161,7 @@ export function HelmManagedByChip({
   )
 }
 
-function gitOpsOwnerKindLabel(owner: GitOpsOwnerRef): string {
+export function gitOpsOwnerKindLabel(owner: GitOpsOwnerRef): string {
   if (owner.tool === 'argocd') return 'Application'
   if (owner.kind === 'helmreleases') return 'HelmRelease'
   if (owner.kind === 'kustomizations') return 'Kustomization'

package/src/components/shared/ResourceActionsBar.identity.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { ResourceActionsBar } from './ResourceActionsBar'
+
+const noop = () => {}
+
+function actions(kind: string, apiVersion: string) {
+  return renderToString(
+    <ResourceActionsBar
+      resource={{ kind, name: 'example', namespace: 'test' }}
+      data={{ apiVersion, metadata: { name: 'example', namespace: 'test' } }}
+      onFluxReconcile={noop}
+      onFluxSuspend={noop}
+      onFluxResume={noop}
+      onArgoSync={noop}
+      onArgoRefresh={noop}
+      onArgoSuspend={noop}
+      onArgoResume={noop}
+      canPortForward
+      renderPortForward={() => <button>Port forward</button>}
+    />,
+  )
+}
+
+describe('resource actions use the loaded API group', () => {
+  it.each(['app.k8s.io/v1beta1', 'notargoproj.io/v1alpha1', ''])('does not offer Argo actions for Application in %s', (apiVersion) => {
+    const html = actions('applications', apiVersion)
+    expect(html).not.toContain('>Sync<')
+    expect(html).not.toContain('>Refresh<')
+    expect(html).not.toContain('Enable Auto-Sync')
+  })
+
+  it('retains Argo actions for its exact Application group', () => {
+    const html = actions('applications', 'argoproj.io/v1alpha1')
+    expect(html).toContain('>Sync<')
+    expect(html).toContain('>Refresh<')
+    expect(html).toContain('Enable Auto-Sync')
+  })
+
+  it.each(['serving.knative.dev/v1', 'vendor.serving.knative.dev/v1', 'vendor.io/v1', ''])('does not port-forward a non-core Service in %s', (apiVersion) => {
+    expect(actions('services', apiVersion)).not.toContain('Port forward')
+  })
+
+  it('retains port forwarding for core Service', () => {
+    expect(actions('services', 'v1')).toContain('Port forward')
+  })
+  it.each([
+    ['gitrepositories', 'source.toolkit.fluxcd.io'],
+    ['ocirepositories', 'source.toolkit.fluxcd.io'],
+    ['helmrepositories', 'source.toolkit.fluxcd.io'],
+    ['kustomizations', 'kustomize.toolkit.fluxcd.io'],
+    ['helmreleases', 'helm.toolkit.fluxcd.io'],
+    ['alerts', 'notification.toolkit.fluxcd.io'],
+  ])('only offers Flux actions for %s in its exact group', (kind, group) => {
+    expect(actions(kind, `${group}/v1`)).toContain('>Reconcile<')
+    for (const apiVersion of ['', 'vendor.io/v1', `foreign.${group}/v1`, 'argoproj.io/v1alpha1']) {
+      const html = actions(kind, apiVersion)
+      expect(html).not.toContain('>Reconcile<')
+      expect(html).not.toContain('>Suspend<')
+      expect(html).not.toContain('>Resume<')
+    }
+  })
+
+})