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/Settings.jsx

@@ -287,7 +287,7 @@ function Settings() {
   const { refresh: refreshConfig } = useConfig();
 
   // identity
-  const [identity, setIdentity] = useState({ cell_name: '', domain: '', ip_range: '', wireguard_port: 51820 });
+  const [identity, setIdentity] = useState({ cell_name: '', domain: '', ip_range: '' });
   const [identityDirty, setIdentityDirty] = useState(false);
   const [identitySaving, setIdentitySaving] = useState(false);
 
@@ -315,7 +315,6 @@ function Settings() {
         cell_name: cfg.cell_name || '',
         domain: cfg.domain || '',
         ip_range: cfg.ip_range || '',
-        wireguard_port: cfg.wireguard_port || 51820,
       });
       setServiceConfigs(cfg.service_configs || {});
       setBackups(bkRes.data || []);
@@ -360,6 +359,7 @@ function Settings() {
       const res = await cellAPI.updateConfig({ [key]: serviceConfigs[key] });
       setServiceDirty((d) => ({ ...d, [key]: false }));
       _applyResult(res, key);
+      refreshConfig();
     } catch {
       toast(`Failed to save ${key} config`, 'error');
     } finally {
@@ -482,13 +482,6 @@ function Settings() {
               placeholder="172.20.0.0/16"
             />
           </Field>
-          <Field label="WireGuard Port">
-            <NumberInput
-              value={identity.wireguard_port}
-              onChange={(v) => { setIdentity((i) => ({ ...i, wireguard_port: v })); setIdentityDirty(true); }}
-              min={1} max={65535}
-            />
-          </Field>
         </div>
         <div className="flex justify-end mt-4">
           <button

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>