Feat: add agent version display and update button in VpsCard component

vps-monitor/frontend/src/components/VpsCard.jsx

@@ -118,6 +118,58 @@ export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate, onE
         </div>
       )}
 
+      {/* Version de l'agent + bouton mise à jour */}
+      {vps.online && (
+        <div className="px-4 py-2 border-b border-gray-800/60 flex items-center gap-3">
+          <span className="text-xs text-gray-500">Agent&nbsp;:</span>
+          {vps.agent_version ? (
+            <span
+              className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${
+                vps.agent_up_to_date
+                  ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400'
+                  : 'bg-orange-500/10 border-orange-500/30 text-orange-400'
+              }`}
+              title={vps.agent_up_to_date ? 'Agent à jour' : `Mise à jour disponible (attendu : ${vps.expected_agent_version})`}
+            >
+              {vps.agent_up_to_date ? '✓' : '⚠'} v{vps.agent_version}
+            </span>
+          ) : (
+            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border bg-gray-700/30 border-gray-600/30 text-gray-500">
+              inconnu
+            </span>
+          )}
+          {(!vps.agent_up_to_date || vps.agent_version === 'unknown') && (
+            <button
+              onClick={handleUpdateAgent}
+              disabled={updatingAgent}
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-orange-500/10 border border-orange-500/30 text-orange-300 hover:bg-orange-500/30 hover:text-orange-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              title={`Mettre à jour l'agent vers v${vps.expected_agent_version}`}
+            >
+              <CloudDownload size={11} className={updatingAgent ? 'animate-bounce' : ''} />
+              {updatingAgent ? 'Mise à jour...' : 'Mettre à jour l\'agent'}
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Boutons de mise à jour par projet compose */}
+      {vps.online && composeProjects.length > 0 && (
+        <div className="px-4 py-2 border-b border-gray-800/60 flex flex-wrap gap-2">
+          {composeProjects.map(project => (
+            <button
+              key={project}
+              onClick={() => handleUpdate(project)}
+              disabled={!!updatingProject}
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/40 hover:text-indigo-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              title={`docker compose pull && up -d (${project})`}
+            >
+              <RefreshCw size={11} className={updatingProject === project ? 'animate-spin' : ''} />
+              Update {project}
+            </button>
+          ))}
+        </div>
+      )}
+
       {/* Informations système */}
       {vps.online && vps.system && !collapsed && (
         <div className="px-4 py-2 border-b border-gray-800/60 flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-400 bg-gray-900/50">
@@ -174,58 +226,6 @@ export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate, onE
         </div>
       )}
 
-      {/* Boutons de mise à jour par projet compose */}
-      {!collapsed && vps.online && composeProjects.length > 0 && (
-        <div className="px-4 py-2 border-t border-gray-800/60 flex flex-wrap gap-2">
-          {composeProjects.map(project => (
-            <button
-              key={project}
-              onClick={() => handleUpdate(project)}
-              disabled={!!updatingProject}
-              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/40 hover:text-indigo-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              title={`docker compose pull && up -d (${project})`}
-            >
-              <RefreshCw size={11} className={updatingProject === project ? 'animate-spin' : ''} />
-              Update {project}
-            </button>
-          ))}
-        </div>
-      )}
-
-      {/* Version de l'agent + bouton mise à jour */}
-      {!collapsed && vps.online && (
-        <div className="px-4 py-2 border-t border-gray-800/60 flex items-center gap-3">
-          <span className="text-xs text-gray-500">Agent&nbsp;:</span>
-          {vps.agent_version ? (
-            <span
-              className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${
-                vps.agent_up_to_date
-                  ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400'
-                  : 'bg-orange-500/10 border-orange-500/30 text-orange-400'
-              }`}
-              title={vps.agent_up_to_date ? 'Agent à jour' : `Mise à jour disponible (attendu : ${vps.expected_agent_version})`}
-            >
-              {vps.agent_up_to_date ? '✓' : '⚠'} v{vps.agent_version}
-            </span>
-          ) : (
-            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border bg-gray-700/30 border-gray-600/30 text-gray-500">
-              inconnu
-            </span>
-          )}
-          {(!vps.agent_up_to_date || vps.agent_version === 'unknown') && (
-            <button
-              onClick={handleUpdateAgent}
-              disabled={updatingAgent}
-              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-orange-500/10 border border-orange-500/30 text-orange-300 hover:bg-orange-500/30 hover:text-orange-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              title={`Mettre à jour l'agent vers v${vps.expected_agent_version}`}
-            >
-              <CloudDownload size={11} className={updatingAgent ? 'animate-bounce' : ''} />
-              {updatingAgent ? 'Mise à jour...' : 'Mettre à jour l\'agent'}
-            </button>
-          )}
-        </div>
-      )}
-
       {/* Footer stats */}
       {!collapsed && vps.online && total > 0 && (
         <div className="px-4 py-2 border-t border-gray-800/60 flex gap-4 text-xs text-gray-600">