@skyhook-io/k8s-ui 1.19.0 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -20,6 +20,13 @@
       "./src/components/resources/*.tsx"
     ],
     "./components/resources/KueueAdmissionSection": "./src/components/resources/KueueAdmissionSection.tsx",
+    "./components/kueue/AdmissionPath": "./src/components/kueue/AdmissionPath.tsx",
+    "./components/kueue/QueueEvidence": "./src/components/kueue/QueueEvidence.tsx",
+    "./components/kueue/*": [
+      "./src/components/kueue/*.ts",
+      "./src/components/kueue/*.tsx"
+    ],
+    "./components/resources/KueuePendingPosition": "./src/components/resources/KueuePendingPosition.tsx",
     "./components/resources/renderers/*": [
       "./src/components/resources/renderers/*.tsx",
       "./src/components/resources/renderers/*.ts"
@@ -89,7 +96,7 @@
     "yaml": ">=2.0.0"
   },
   "devDependencies": {
-    "@types/node": "^26.6.2",
+    "@types/node": "^26.6.6",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@xterm/addon-fit": "^0.11.0",

package/src/components/applications/ApplicationDetail.tsx

@@ -1833,6 +1833,8 @@ function batchOverviewStats(activity: AppBatchActivity[]) {
   );
   const failed = activity.reduce((n, item) => n + item.failedRuns, 0);
   const active = activity.reduce((n, item) => n + item.activeRuns, 0);
+  const rootActivity = activity.filter(item => item.workload.kind === 'JobSet' && item.workload.group === 'jobset.x-k8s.io')
+  const rootStates = [...new Set(rootActivity.map(item => item.latestRunPhase || 'Unknown'))].join(', ')
 
   return {
     latestValue: latest?.latestRunPhase || latest?.label || "None",
@@ -1841,9 +1843,9 @@ function batchOverviewStats(activity: AppBatchActivity[]) {
       : "No retained runs",
     retainedValue:
       retained > 0 ? `${succeeded} succeeded / ${failed} failed` : "0 retained",
-    activeValue: active > 0 ? `${active} running` : "None",
+    activeValue: active > 0 ? `${active} running` : rootStates || "None",
     activeDetail:
-      active > 0 ? activeWorkloadNames(activity) : "No active batch work",
+      active > 0 ? activeWorkloadNames(activity) : rootStates ? "JobSet root lifecycle; running Pods are not inferred." : "No active batch work",
     scheduleValue:
       schedules.length === 0
         ? "None"
@@ -2068,6 +2070,9 @@ function workloadRuntimeStatus(workload: AppWorkload): {
       health: rolloutDisplayHealth(workload.rollout, workload.health),
     }
   }
+  if (workload.kind === 'JobSet' && workload.group === 'jobset.x-k8s.io') {
+    return { label: workload.batch?.latestRunPhase || 'Unknown', health: healthOf(workload.health) }
+  }
   const batch = workload.batch;
   if (!batch) {
     const health = healthOf(workload.health);
@@ -2085,6 +2090,7 @@ function workloadRuntimeStatus(workload: AppWorkload): {
 
 function workloadRuntimeDetail(workload: AppWorkload): string {
   if (workload.rollout && (workload.rollout.active || workload.rollout.phase === 'stalled')) return workload.rollout.detail || `${workload.ready}/${workload.desired} ready`
+  if (workload.kind === 'JobSet' && workload.group === 'jobset.x-k8s.io') return workload.batch?.message || `Root lifecycle: ${workload.batch?.latestRunPhase || 'Unknown'}`
   const batch = workload.batch;
   if (!batch) return `${workload.ready}/${workload.desired} ready`;
   if ((batch.activeRuns ?? 0) > 0)

package/src/components/cluster-switcher/ClusterSwitcher.test.tsx

@@ -0,0 +1,54 @@
+// @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 { ClusterSwitcher, type ClusterSwitcherHandle, type ClusterSwitcherItem } from './ClusterSwitcher'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: Root
+let host: HTMLDivElement
+
+const items: ClusterSwitcherItem[] = [
+  { id: 'prod', name: 'prod' },
+  { id: 'staging', name: 'staging' },
+]
+
+beforeEach(() => {
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+})
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+})
+
+function open(props: { currentSelectable?: boolean }, onSelect: (item: ClusterSwitcherItem) => void) {
+  const ref = { current: null as ClusterSwitcherHandle | null }
+  act(() => root.render(
+    <ClusterSwitcher ref={ref} currentId="prod" currentName="prod" items={items} onSelect={onSelect} searchable={false} {...props} />,
+  ))
+  act(() => ref.current?.open())
+}
+
+function row(name: string) {
+  return [...host.querySelectorAll<HTMLButtonElement>('button[data-highlighted]')].find(b => b.textContent?.includes(name))!
+}
+
+describe('ClusterSwitcher current row', () => {
+  it('is inert by default', () => {
+    const onSelect = vi.fn()
+    open({}, onSelect)
+    expect(row('prod').disabled).toBe(true)
+    act(() => row('prod').click())
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it('can be picked when the host asks for it', () => {
+    const onSelect = vi.fn()
+    open({ currentSelectable: true }, onSelect)
+    expect(row('prod').disabled).toBe(false)
+    act(() => row('prod').click())
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: 'prod' }))
+  })
+})

package/src/components/cluster-switcher/ClusterSwitcher.tsx

@@ -74,6 +74,9 @@ export interface ClusterSwitcherProps {
   variant?: 'chip' | 'segment'
   /** Muted label shown before the value in the 'segment' variant (e.g. "Cluster"). */
   label?: string
+  /** Lets the current row be picked, for hosts that show a screen about
+   *  another cluster on top of the current one (picking it dismisses that). */
+  currentSelectable?: boolean
 }
 
 // Trigger width cap. With middle-truncation kicking in, this is a
@@ -102,6 +105,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
   align = 'left',
   variant = 'chip',
   label,
+  currentSelectable = false,
 }, ref) => {
   const [isOpen, setIsOpen] = useState(false)
   const [search, setSearch] = useState('')
@@ -183,7 +187,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
   }, [isOpen])
 
   const select = (item: ClusterSwitcherItem) => {
-    if (item.disabled || item.id === currentId) return
+    if (item.disabled || (item.id === currentId && !currentSelectable)) return
     setIsOpen(false)
     if (item.href) {
       window.location.href = item.href
@@ -341,12 +345,12 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
                         data-highlighted={idx === highlightedIndex}
                         onClick={() => select(item)}
                         onMouseEnter={() => setHighlightedIndex(idx)}
-                        disabled={isCurrent || item.disabled}
+                        disabled={(isCurrent && !currentSelectable) || item.disabled}
                         title={item.title}
                         className={`
                           w-full flex items-center gap-2 px-3 py-2 text-left transition-colors
                           ${isCurrent
-                            ? 'selection'
+                            ? `selection${currentSelectable ? ' cursor-pointer' : ''}`
                             : idx === highlightedIndex
                               ? 'bg-theme-hover cursor-pointer'
                               : 'hover:bg-theme-hover cursor-pointer'}

package/src/components/compare/ResourceCompareView.test.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { ResourceCompareView, type ResourceCompareViewProps } from './ResourceCompareView'
+
+vi.mock('../ui/YamlEditor', () => ({ YamlDiffEditor: () => null }))
+
+const checkout = { kind: 'Deployment', namespace: 'shop', name: 'checkout' }
+
+function header(props: Partial<ResourceCompareViewProps>) {
+  const html = renderToStaticMarkup(
+    <ResourceCompareView a={checkout} b={checkout} aData={{}} bData={{}} onSwap={() => {}} onClose={() => {}} {...props} />,
+  )
+  // Tags split the name from its namespace, so compare the text a reader sees.
+  const host = document.createElement('div')
+  host.innerHTML = html
+  return host.textContent ?? ''
+}
+
+describe('ResourceCompareView sides', () => {
+  it('names the resource once and tells the sides apart by where they run', () => {
+    const text = header({ aSubtitle: 'payments-eu', bSubtitle: 'payments-us' })
+    expect(text.split('shop/checkout')).toHaveLength(2)
+    expect(text).toContain('payments-eu')
+    expect(text).toContain('payments-us')
+  })
+
+  it('keeps a cut-off location readable on hover', () => {
+    const html = renderToStaticMarkup(
+      <ResourceCompareView a={checkout} b={checkout} aData={{}} bData={{}} onSwap={() => {}} onClose={() => {}} aSubtitle="payments-eu" bSubtitle="payments-us" />,
+    )
+    expect(html).toContain('title="payments-eu"')
+    expect(html).toContain('title="payments-us"')
+  })
+
+  it('names both sides when they are different resources', () => {
+    const text = header({ b: { ...checkout, name: 'billing' }, aSubtitle: 'payments-eu', bSubtitle: 'payments-eu' })
+    expect(text).toContain('shop/checkout')
+    expect(text).toContain('shop/billing')
+  })
+
+  it('keeps names when the same kind and name come from different API groups', () => {
+    const text = header({ a: { ...checkout, group: 'apps' }, b: { ...checkout, group: 'example.com' }, aSubtitle: 'eu', bSubtitle: 'us' })
+    expect(text.split('shop/checkout')).toHaveLength(3)
+  })
+
+  it('keeps names when both sides come from the same place', () => {
+    expect(header({ aSubtitle: 'payments-eu', bSubtitle: 'payments-eu' }).split('shop/checkout')).toHaveLength(3)
+  })
+
+  it('keeps names with no location to show', () => {
+    expect(header({}).split('shop/checkout')).toHaveLength(3)
+  })
+})

package/src/components/compare/ResourceCompareView.tsx

@@ -59,12 +59,15 @@ function ResourcePill({
   error,
   onChange,
   subtitle,
+  subtitleOnly,
 }: {
   resource: CompareResourceRef
   side: CompareSide
   error?: string
   onChange?: () => void
   subtitle?: string
+  /** Both sides are the same resource, so where it runs is all that tells them apart. */
+  subtitleOnly?: boolean
 }) {
   const tones = SIDE_TONES[side]
   const errTone = 'border-red-400/50 bg-red-500/10'
@@ -82,13 +85,19 @@ function ResourcePill({
         {label}
       </span>
       {error && <AlertTriangle className="w-3 h-3 text-red-400 shrink-0" aria-hidden />}
-      <span className={clsx('truncate min-w-0', error ? 'text-red-300' : 'text-theme-text-primary')}>
-        {resource.namespace && <span className="opacity-60">{resource.namespace}/</span>}
-        {resource.name}
-        {subtitle && (
-          <span className="opacity-60 ml-1" aria-label={`Source: ${subtitle}`}>
-            · {subtitle}
-          </span>
+      <span className={clsx('truncate min-w-0', error ? 'text-red-300' : 'text-theme-text-primary')} title={subtitleOnly ? subtitle : undefined}>
+        {subtitleOnly ? (
+          subtitle
+        ) : (
+          <>
+            {resource.namespace && <span className="opacity-60">{resource.namespace}/</span>}
+            {resource.name}
+            {subtitle && (
+              <span className="opacity-60 ml-1" aria-label={`Source: ${subtitle}`}>
+                · {subtitle}
+              </span>
+            )}
+          </>
         )}
       </span>
       {onChange && (
@@ -144,6 +153,10 @@ export function ResourceCompareView({
   // blank the editor. When the A/B identity changes (navigating to a
   // new pair on the same route), the latch resets so the loader shows
   // again until the new fetches settle.
+  // The same resource from two places: say what it is once, up top, so the pills
+  // can show the one thing that differs. Long names no longer push that out of view.
+  const sameResource = a.kind === b.kind && a.group === b.group && a.namespace === b.namespace && a.name === b.name &&
+    Boolean(aSubtitle && bSubtitle) && aSubtitle !== bSubtitle
   const settleKey = `${a.kind}|${a.namespace}|${a.name}|${a.group ?? ''}|${aSubtitle ?? ''}` +
     `|${b.kind}|${b.namespace}|${b.name}|${b.group ?? ''}|${bSubtitle ?? ''}`
   const settleKeyRef = useRef(settleKey)
@@ -160,15 +173,25 @@ export function ResourceCompareView({
     <div className="flex-1 min-w-0 flex flex-col h-full bg-theme-base">
       <div className="h-0.5 w-full bg-gradient-to-r from-blue-400/70 via-skyhook-400/40 to-emerald-400/70" />
 
-      <div className="flex items-center gap-3 px-4 py-2.5 border-b border-theme-border bg-theme-surface">
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2.5 border-b border-theme-border bg-theme-surface">
         <GitCompare className="w-5 h-5 text-skyhook-400 shrink-0" />
-        <h2 className="text-sm font-semibold text-theme-text-primary shrink-0 whitespace-nowrap">
+        <h2 className={clsx('text-sm font-semibold text-theme-text-primary whitespace-nowrap', sameResource ? 'min-w-0 max-w-[30%] truncate' : 'shrink-0')}>
           Compare <span className="text-theme-text-tertiary mx-0.5">·</span>{' '}
           <span className="text-theme-text-secondary font-medium">{kindLabel}</span>
+          {sameResource && (
+            <>
+              <span className="text-theme-text-tertiary mx-0.5">·</span>{' '}
+              <span className="text-theme-text-secondary font-medium" title={`${a.namespace}/${a.name}`}>
+                {a.namespace && <span className="opacity-60">{a.namespace}/</span>}
+                {a.name}
+              </span>
+            </>
+          )}
         </h2>
 
-        <div className="flex items-center gap-2 min-w-0 flex-1">
-          <ResourcePill resource={a} side="a" error={aError} onChange={onChangeA} subtitle={aSubtitle} />
+        {/* The row wraps before the sides get too narrow to tell apart. */}
+        <div className="flex items-center gap-2 min-w-72 flex-1">
+          <ResourcePill resource={a} side="a" error={aError} onChange={onChangeA} subtitle={aSubtitle} subtitleOnly={sameResource} />
           <Tooltip content="Swap A and B">
             <button
               onClick={onSwap}
@@ -177,7 +200,7 @@ export function ResourceCompareView({
               <ArrowLeftRight className="w-3.5 h-3.5" />
             </button>
           </Tooltip>
-          <ResourcePill resource={b} side="b" error={bError} onChange={onChangeB} subtitle={bSubtitle} />
+          <ResourcePill resource={b} side="b" error={bError} onChange={onChangeB} subtitle={bSubtitle} subtitleOnly={sameResource} />
         </div>
 
         <div className="flex items-center gap-1 shrink-0">

package/src/components/gitops/GitOpsDetailLayout.test.tsx

@@ -22,6 +22,21 @@ const shell: Omit<GitOpsDetailLayoutProps, 'identity' | 'isArgoApp'> = {
 }
 
 describe('GitOpsDetailLayout', () => {
+  it.each([false, true])('shows tree limits without insights, including fullscreen=%s', (fullscreen) => {
+    const warning = 'Some generated resources could not be checked; the resource tree may be incomplete.'
+    const html = renderToString(
+      <GitOpsDetailLayout
+        {...shell}
+        identity={{ kind: 'applications', group: 'argoproj.io', namespace: 'shop', name: 'wordpress', kindLabel: 'Application' }}
+        isArgoApp
+        fullscreen={fullscreen}
+        warnings={[warning, warning]}
+      />,
+    )
+    expect(html).toContain('Limited resource view')
+    expect(html.split(warning)).toHaveLength(2)
+  })
+
   it('shows the tool chip, facts and Argo operations for an Argo CD Application', () => {
     const html = renderToString(
       <GitOpsDetailLayout
@@ -39,6 +54,7 @@ describe('GitOpsDetailLayout', () => {
     expect(html).toContain('ArgoCD')
     expect(html).toContain('Project')
     expect(html).toContain('Sync…')
+    expect(html).not.toContain('Limited resource view')
   })
 
   // A root that is not a GitOps resource gets one state: its name and why

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -2,12 +2,28 @@ import { useEffect, type ComponentType, type ReactNode } from 'react'
 import { ArrowDownUp, Clock3, GitBranch, GitCommit, Loader2, Pause, Play, RefreshCw, Settings, Trash2, XCircle, Zap } from 'lucide-react'
 import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
 import { PaneLoader } from '../ui/PaneLoader'
+import { AlertBanner } from '../ui/drawer-components'
 
 import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
 import { GitOpsIssuesBand, GitOpsStatusStrip } from './insights'
 import { GitOpsHealthSourceNotice } from './GitOpsHealthSourceNotice'
 import { Tooltip } from '../ui/Tooltip'
+import { RadarUpgradeNote, radarUpgradeNoteText } from '../ui/RadarUpgradeNote'
 import type { GitOpsHealthStatus, GitOpsInsight, GitOpsIssue, GitOpsRemediation, SyncStatus } from '../../types'
+import type { RadarUpgradeRequirement } from '../../types/fetch-error'
+
+function argoAutoSyncControllerNote(controller: ArgoActionHandlers['autoSyncController']): string {
+  if (!controller) return ''
+  return controller.kind === 'ApplicationSet'
+    ? ` ApplicationSet ${controller.name} can turn it back on; to keep it off, change the ApplicationSet's template.`
+    : ` Application ${controller.name} manages this one from Git and can turn it back on when it syncs; to keep it off, change it in Git.`
+}
+
+function argoResumeDescription(suspended: boolean, settings: ArgoActionHandlers['resumeSettings']): string {
+  if (suspended) return 'Turn auto-sync back on with its current or saved settings.'
+  if (!settings) return 'Turn on automated sync, so Argo applies new commits from Git.'
+  return `Argo applies new commits${settings.selfHeal ? ' and reverts live edits (self-heal)' : ''}. Resources removed from Git are ${settings.prune ? 'deleted (prune on)' : 'kept (prune off)'}.`
+}
 
 // ---------------------------------------------------------------------------
 // Props
@@ -76,11 +92,22 @@ export interface ArgoActionHandlers {
   terminating: boolean
   suspending: boolean
   resuming: boolean
-  // autoSyncEnabled: caller derives from spec.syncPolicy.automated.
+  // autoSyncEnabled: caller derives via isArgoAutoSyncEnabled.
   autoSyncEnabled: boolean
   // isRunning: caller derives from status.operationState.phase === 'Running'.
   isRunning: boolean
   operationInProgress?: boolean
+  // Set when the connected Radar is too old to turn this app's auto-sync back
+  // on (isArgoAutoSyncSwitchedOff): Enable auto-sync renders disabled, with
+  // the upgrade note under the header.
+  resumeUpgrade?: RadarUpgradeRequirement | null
+  // What Enable auto-sync turns on when Radar didn't suspend the app
+  // (argoResumeSettings). Without it the tooltip makes no prune claim.
+  resumeSettings?: { prune: boolean; selfHeal: boolean } | null
+  resumeBlockedReason?: string
+  // The Argo CD object that can turn auto-sync back on after Disable
+  // (argoAutoSyncController); its tooltip names it.
+  autoSyncController?: { kind: 'ApplicationSet' | 'Application'; name: string } | null
 }
 
 export interface FluxActionHandlers {
@@ -125,6 +152,8 @@ export interface GitOpsDetailLayoutProps {
   // Insights — drives StatusStrip + IssuesBand
   insight: GitOpsInsight | null
   insightLoading: boolean
+  // Tree warnings are independent of the insights request's success.
+  warnings?: string[]
   // Issue interactions — caller wires onSelectIssue to jump to Changes tab
   // and highlight the affected resource.
   onSelectIssue?: (issue: GitOpsIssue) => void
@@ -229,6 +258,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
     detail,
     insight,
     insightLoading,
+    warnings,
     onSelectIssue,
     onRemediate,
     remediationPending,
@@ -280,6 +310,9 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
 
   const effectiveSuspended = status?.suspended ?? false
   const argoOperationInProgress = argo?.operationInProgress ?? argo?.isRunning ?? false
+  const argoSyncDisabled = effectiveSuspended || terminating || argoOperationInProgress
+  const resumeUpgrade = isArgoApp && argo && !argo.autoSyncEnabled ? argo.resumeUpgrade ?? null : null
+  const resumeBlockedReason = isArgoApp && argo && !argo.autoSyncEnabled ? argo.resumeBlockedReason : undefined
   // graphFullscreen hides everything chrome-side; the body region expands.
   // Mirrors the OSS GitOpsDetailView shell behavior so the visual chrome
   // class set carries through.
@@ -365,6 +398,8 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                   {detail.autoSyncMode && <AppFact label="Sync mode" value={detail.autoSyncMode} />}
                 </div>
               )}
+              {resumeBlockedReason && <p className="mt-2 text-xs text-theme-text-secondary">{resumeBlockedReason}</p>}
+              {resumeUpgrade && <RadarUpgradeNote requirement={resumeUpgrade} className="mt-2" />}
             </div>
             {/* Action buttons */}
             <div className="flex flex-wrap items-center gap-2">
@@ -376,7 +411,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                     icon={ArrowDownUp}
                     loading={argo.syncing}
                     onClick={argo.onSyncRequested}
-                    disabled={effectiveSuspended || terminating || argoOperationInProgress}
+                    disabled={argoSyncDisabled}
                     disabledReason={terminating
                       ? terminatingActionTooltip
                       : argoOperationInProgress
@@ -411,7 +446,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                   {argo.autoSyncEnabled ? (
                     <ActionButton
                       label="Disable auto-sync"
-                      description="Stop Argo from automatically syncing Git changes. Manual Sync still works."
+                      description={`Stop Argo from automatically syncing Git changes.${argoSyncDisabled ? '' : ' Manual Sync still works.'}${argoAutoSyncControllerNote(argo.autoSyncController)}`}
                       icon={Pause}
                       loading={argo.suspending}
                       onClick={argo.onSuspend}
@@ -421,12 +456,16 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                   ) : (
                     <ActionButton
                       label="Enable auto-sync"
-                      description="Re-enable automatic syncing of Git changes to the cluster."
+                      description={argoResumeDescription(effectiveSuspended, argo.resumeSettings)}
                       icon={Play}
                       loading={argo.resuming}
-                      onClick={argo.onResume}
-                      disabled={terminating}
-                      disabledReason={terminating ? terminatingActionTooltip : undefined}
+                      onClick={() => !resumeBlockedReason && !resumeUpgrade && argo.onResume()}
+                      disabled={terminating || !!resumeUpgrade || !!resumeBlockedReason}
+                      disabledReason={terminating
+                        ? terminatingActionTooltip
+                        : resumeBlockedReason || (resumeUpgrade
+                          ? radarUpgradeNoteText(resumeUpgrade)
+                          : undefined)}
                     />
                   )}
                 </>
@@ -528,6 +567,14 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
         <div className="p-4 text-sm text-red-500">Failed to load GitOps view: {resourceError.message}</div>
       ) : (
         <div className={bodyShellClass}>
+          {((warnings?.length ?? 0) > 0 || (insight?.warnings?.length ?? 0) > 0) && (
+            <AlertBanner
+              variant="warning"
+              title="Limited resource view"
+              items={[...new Set([...(warnings ?? []), ...(insight?.warnings ?? [])])]}
+              className="shrink-0 rounded-none border-x-0 border-t-0"
+            />
+          )}
           <div className="flex shrink-0 items-center justify-between gap-3 border-b border-theme-border bg-theme-base px-4 py-2">
             <div className="flex items-center gap-1 rounded-md border border-theme-border bg-theme-surface p-1">
               <ViewButton active={activeTab === 'topology'} icon={GitBranch} label="Topology" onClick={() => onTabChange('topology')} />

package/src/components/gitops/GitOpsHealthSourceNotice.tsx

@@ -38,7 +38,7 @@ export const APP_TREE_API_ERROR_FINDINGS = 'Meanwhile, rows marked "Found by Rad
 export const APP_TREE_API_ERROR_NO_FINDINGS = "Radar didn't find a problem on its own."
 
 export const REMOTE_DESTINATION_NOTICE =
-  "This application deploys to a different cluster, so its resources aren't visible from here."
+  "The recorded resources aren't confirmed to belong to this cluster, so local health and generated resources aren't shown."
 export const REMOTE_FLUX_TARGET_NOTICE =
   "This applies its resources to a different cluster, so they aren't visible from here."
 

package/src/components/gitops/GitOpsTableView.tsx

@@ -34,9 +34,11 @@ import { FacetSection, FacetButton } from '../ui/Facet'
 import { SortableTh, TH_CLASS, type SortDir } from '../ui/SortableTh'
 import { DistributionBar } from '../ui/DistributionBar'
 import { RowActionMenu, type RowActionItem } from '../ui/RowActionMenu'
+import { radarUpgradeNoteText } from '../ui/RadarUpgradeNote'
+import type { RadarUpgradeRequirement } from '../../types/fetch-error'
 import { BoardTableSkeleton, BoardRailSkeleton } from '../ui/BoardSkeleton'
 import { getGitOpsResourceStatus } from './detail-helpers'
-import { isArgoOperationInProgress, isArgoSuspendedByRadar } from '../resources/resource-utils-argo'
+import { isArgoAutoSyncEnabled, isArgoAutoSyncSwitchedOff, isArgoOperationInProgress, isArgoSuspendedByRadar } from '../resources/resource-utils-argo'
 import { toggleSet } from './GitOpsGraphFilterRail'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import { parseContextName } from '../../utils/context-name'
@@ -288,6 +290,10 @@ export interface GitOpsTableViewProps {
   // In-flight action state, keyed by `row.id`. Drives the per-item
   // spinner so the user can tell which Sync/Refresh is still running.
   pendingRowActions?: Map<string, Set<GitOpsRowAction>>
+  // Set when the connected Radar is too old to turn auto-sync back on for an
+  // Application with automated.enabled: false; its Resume renders disabled.
+  argoResumeUpgrade?: RadarUpgradeRequirement | null
+  argoResumeBlockedReason?: string
 }
 
 // ----- Main component --------------------------------------------------------
@@ -330,6 +336,8 @@ export function GitOpsTableView({
   onClearNamespaces,
   onRowAction,
   pendingRowActions,
+  argoResumeUpgrade,
+  argoResumeBlockedReason,
   filtersSide = 'left',
 }: GitOpsTableViewProps) {
   const searchInputRef = useRef<HTMLInputElement>(null)
@@ -858,6 +866,8 @@ export function GitOpsTableView({
               destinationHrefFor={destinationHrefFor}
               onRowAction={onRowAction}
               pendingRowActions={pendingRowActions}
+              argoResumeUpgrade={argoResumeUpgrade}
+              argoResumeBlockedReason={argoResumeBlockedReason}
             />
           )}
         </div>
@@ -1292,6 +1302,8 @@ function GitOpsTable({
   destinationHrefFor,
   onRowAction,
   pendingRowActions,
+  argoResumeUpgrade,
+  argoResumeBlockedReason,
 }: {
   rows: GitOpsRow[]
   sort: { key: SortKey; dir: SortDir } | null
@@ -1303,6 +1315,8 @@ function GitOpsTable({
   destinationHrefFor?: (row: GitOpsRow, destination: FleetDestinationStamp) => string
   onRowAction?: (row: GitOpsRow, action: GitOpsRowAction) => void
   pendingRowActions?: Map<string, Set<GitOpsRowAction>>
+  argoResumeUpgrade?: RadarUpgradeRequirement | null
+  argoResumeBlockedReason?: string
 }) {
   const showActions = !!onRowAction
   return (
@@ -1409,7 +1423,7 @@ function GitOpsTable({
                   className="overflow-visible border-b border-theme-border px-2 py-2 text-right align-middle"
                   onClick={(e) => e.stopPropagation()}
                 >
-                  <RowActionMenu items={buildRowActionItems(row, onRowAction, pendingRowActions)} />
+                  <RowActionMenu items={buildRowActionItems(row, onRowAction, pendingRowActions, argoResumeUpgrade, argoResumeBlockedReason)} />
                 </td>
               )}
             </tr>
@@ -1424,10 +1438,12 @@ function GitOpsTable({
 // the row's tool (Argo vs Flux), current suspend state, terminating state,
 // and Argo's operationState.phase (used to gate the Terminate entry — only
 // shown while a sync is mid-flight, mirroring the detail-page condition).
-function buildRowActionItems(
+export function buildRowActionItems(
   row: GitOpsRow,
   onAction: (row: GitOpsRow, action: GitOpsRowAction) => void,
   pending?: Map<string, Set<GitOpsRowAction>>,
+  argoResumeUpgrade?: RadarUpgradeRequirement | null,
+  argoResumeBlockedReason?: string,
 ): RowActionItem[] {
   const inFlight = pending?.get(row.id)
   const isPending = (action: GitOpsRowAction) => inFlight?.has(action) ?? false
@@ -1480,13 +1496,16 @@ function buildRowActionItems(
       pending: isPending('hard-refresh'),
     })
     if (suspended) {
+      const resumeBlockedReason = isArgoAutoSyncSwitchedOff(row.raw)
+        ? argoResumeBlockedReason || (argoResumeUpgrade ? radarUpgradeNoteText(argoResumeUpgrade) : undefined)
+        : undefined
       items.push({
         key: 'resume',
         label: 'Resume',
         icon: Play,
-        onClick: () => onAction(row, 'resume'),
-        disabled: terminating,
-        disabledReason: terminating ? terminatingReason : undefined,
+        onClick: () => !resumeBlockedReason && onAction(row, 'resume'),
+        disabled: terminating || !!resumeBlockedReason,
+        disabledReason: terminating ? terminatingReason : resumeBlockedReason,
         pending: isPending('resume'),
         divider: true,
       })
@@ -2007,7 +2026,7 @@ export function normalizeArgoApplication(resource: any): GitOpsRow {
     destinationNamespace: resource.spec?.destination?.namespace ?? '',
     createdAt: resource.metadata?.creationTimestamp ?? '',
     lastSync: argoLastSync ?? '',
-    autoSync: Boolean(resource.spec?.syncPolicy?.automated),
+    autoSync: isArgoAutoSyncEnabled(resource),
     terminating: isTerminating(resource),
     terminationStartedAt: terminationStartedAt(resource),
     raw: resource,