fix: consolidate WireGuard port config and propagate port changes to UI

- docker-compose: fix WireGuard port mapping to ${WG_PORT}:${WG_PORT} so
  the daemon ListenPort matches the Docker host-to-container binding
- app.py: sync wireguard.port ↔ identity.wireguard_port in both directions
  so changing either keeps them consistent; identity path now also updates
  wg0.conf via wireguard_manager.update_config
- Settings.jsx: remove duplicate wireguard_port from Cell Identity section
  (port is configurable under WireGuard VPN service config); add
  refreshConfig() after saveService so other pages see new values immediately
- WireGuard.jsx: import useConfig() and use service_configs.wireguard.port
  as the reactive port source for endpoint display and port-open warnings

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

webui/src/pages/WireGuard.jsx

@@ -1,9 +1,12 @@
 import { useState, useEffect } from 'react';
 import { Shield, Key, Users, Activity, Wifi, Download, Copy, RefreshCw, Play, Pause, AlertCircle, Eye, Globe, CheckCircle, XCircle } from 'lucide-react';
 import { wireguardAPI, peerAPI } from '../services/api';
+import { useConfig } from '../contexts/ConfigContext';
 import QRCode from 'qrcode';
 
 function WireGuard() {
+  const { service_configs = {} } = useConfig();
+  const configPort = service_configs?.wireguard?.port ?? null;
   const [status, setStatus] = useState(null);
   const [serverConfig, setServerConfig] = useState(null);
   const [isRefreshingIp, setIsRefreshingIp] = useState(false);
@@ -381,11 +384,11 @@ PersistentKeepalive = ${peer.persistent_keepalive || 25}`;
           <div>
             <p className="text-sm text-gray-500">WireGuard Endpoint</p>
             <p className="font-mono font-semibold text-gray-900">
-              {serverConfig?.endpoint || `<SERVER_IP>:${serverConfig?.port || 51820}`}
+              {serverConfig?.endpoint || `<SERVER_IP>:${configPort ?? serverConfig?.port ?? 51820}`}
             </p>
           </div>
           <div>
-            <p className="text-sm text-gray-500">UDP Port {serverConfig?.port || 51820}</p>
+            <p className="text-sm text-gray-500">UDP Port {configPort ?? serverConfig?.port ?? 51820}</p>
             {serverConfig ? (
               <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                 serverConfig.port_open === true ? 'bg-green-100 text-green-800' :
@@ -419,7 +422,7 @@ PersistentKeepalive = ${peer.persistent_keepalive || 25}`;
         {serverConfig && serverConfig.port_open === false && (
           <div className="mt-3 flex items-center text-red-700 bg-red-50 rounded p-2 text-sm">
             <AlertCircle className="h-4 w-4 mr-2 flex-shrink-0" />
-            UDP port {serverConfig.port || 51820} appears closed. Check your router/firewall and forward this port to this machine.
+            UDP port {configPort ?? serverConfig.port ?? 51820} appears closed. Check your router/firewall and forward this port to this machine.
           </div>
         )}
       </div>