v11.13.0

changelog.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 2026-03-30 - 11.13.0 - feat(vpn)
+add VPN server management and route-based VPN access control
+
+- introduces a VPN manager backed by @push.rocks/smartvpn with persisted server keys and client registrations
+- adds ops API handlers and typed request interfaces for VPN client lifecycle, status, config export, and telemetry
+- adds ops dashboard VPN view and application state for managing VPN clients from the web UI
+- supports vpn.required on routes by injecting VPN subnet allowlists into static and programmatic SmartProxy routes
+- configures SmartProxy to accept proxy protocol in VPN socket forwarding mode to preserve client tunnel IPs
+
+## 2026-03-27 - 11.12.4 - fix(acme)
+use X509 certificate expiry when reporting ACME certificate validity
+
+- Parse the actual X509 validTo value from the PEM public certificate and fall back to SmartAcme's stored expiry if parsing fails
+- Update reported certificate expiry data and event communication timestamps to use the verified validity date
+- Bump @push.rocks/smartacme to ^9.3.1 and @push.rocks/smartproxy to ^27.1.0
+
+## 2026-03-27 - 11.12.3 - fix(dcrouter)
+re-trigger auto certificate provisioning after SmartAcme becomes ready
+
+- clear certificate provisioning scheduler state before retrying startup-affected routes
+- use route updates to re-run certificate provisioning for all current auto-cert routes
+- remove the unused single-route domain lookup helper
+
 ## 2026-03-27 - 11.12.2 - fix(dcrouter)
 guard auto certificate reprovisioning against unnamed routes
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@serve.zone/dcrouter",
   "private": false,
-  "version": "11.12.2",
+  "version": "11.13.0",
   "description": "A multifaceted routing service handling mail and SMS delivery functions.",
   "type": "module",
   "exports": {
@@ -40,7 +40,7 @@
     "@push.rocks/lik": "^6.4.0",
     "@push.rocks/projectinfo": "^5.1.0",
     "@push.rocks/qenv": "^6.1.3",
-    "@push.rocks/smartacme": "^9.3.0",
+    "@push.rocks/smartacme": "^9.3.1",
     "@push.rocks/smartdata": "^7.1.3",
     "@push.rocks/smartdb": "^2.0.0",
     "@push.rocks/smartdns": "^7.9.0",
@@ -53,12 +53,13 @@
     "@push.rocks/smartnetwork": "^4.5.2",
     "@push.rocks/smartpath": "^6.0.0",
     "@push.rocks/smartpromise": "^4.2.3",
-    "@push.rocks/smartproxy": "^27.0.0",
+    "@push.rocks/smartproxy": "^27.1.0",
     "@push.rocks/smartradius": "^1.1.1",
     "@push.rocks/smartrequest": "^5.0.1",
     "@push.rocks/smartrx": "^3.0.10",
     "@push.rocks/smartstate": "^2.3.0",
     "@push.rocks/smartunique": "^3.0.9",
+    "@push.rocks/smartvpn": "1.12.0",
     "@push.rocks/taskbuffer": "^8.0.2",
     "@serve.zone/catalog": "^2.9.0",
     "@serve.zone/interfaces": "^5.3.0",

pnpm-lock.yaml

@@ -39,8 +39,8 @@ importers:
         specifier: ^6.1.3
         version: 6.1.3
       '@push.rocks/smartacme':
-        specifier: ^9.3.0
-        version: 9.3.0(socks@2.8.7)
+        specifier: ^9.3.1
+        version: 9.3.1(socks@2.8.7)
       '@push.rocks/smartdata':
         specifier: ^7.1.3
         version: 7.1.3(socks@2.8.7)
@@ -78,8 +78,8 @@ importers:
         specifier: ^4.2.3
         version: 4.2.3
       '@push.rocks/smartproxy':
-        specifier: ^27.0.0
-        version: 27.0.0
+        specifier: ^27.1.0
+        version: 27.1.0
       '@push.rocks/smartradius':
         specifier: ^1.1.1
         version: 1.1.1
@@ -95,6 +95,9 @@ importers:
       '@push.rocks/smartunique':
         specifier: ^3.0.9
         version: 3.0.9
+      '@push.rocks/smartvpn':
+        specifier: 1.12.0
+        version: 1.12.0
       '@push.rocks/taskbuffer':
         specifier: ^8.0.2
         version: 8.0.2
@@ -1048,6 +1051,10 @@ packages:
     resolution: {integrity: sha512-C2Xj8FZ0uHWeCXXqX5B4/gVFQmtSkiuOolzAgutjTfseNOHT3pUjljDZsTSxXFGgio54bCzVFqmEOUrIVk8RDA==}
     engines: {node: '>=20.0.0'}
 
+  '@peculiar/x509@2.0.0':
+    resolution: {integrity: sha512-r10lkuy6BNfRmyYdRAfgu6dq0HOmyIV2OLhXWE3gDEPBdX1b8miztJVyX/UxWhLwemNyDP3CLZHpDxDwSY0xaA==}
+    engines: {node: '>=20.0.0'}
+
   '@pnpm/config.env-replace@1.1.0':
     resolution: {integrity: sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==}
     engines: {node: '>=12.22.0'}
@@ -1092,8 +1099,8 @@ packages:
   '@push.rocks/qenv@6.1.3':
     resolution: {integrity: sha512-+z2hsAU/7CIgpYLFqvda8cn9rUBMHqLdQLjsFfRn5jPoD7dJ5rFlpkbhfM4Ws8mHMniwWaxGKo+q/YBhtzRBLg==}
 
-  '@push.rocks/smartacme@9.3.0':
-    resolution: {integrity: sha512-R6+fBNqlIy3fP2ECmOjBB65tl35w2+2vmSierO6oC9/5DW+khwjvFsT0+5WnfyjejEtWzdAprEseYWmBbyTGtA==}
+  '@push.rocks/smartacme@9.3.1':
+    resolution: {integrity: sha512-Cl1DVQ+rfpaYkk6VVm/KYVeUYzWfXzSfTXybHfCZ5SuiACuTVHZ6jK8TouELaV1RgrdYnIp0MrbiY2Kqi8ayAw==}
 
   '@push.rocks/smartarchive@4.2.4':
     resolution: {integrity: sha512-uiqVAXPxmr8G5rv3uZvZFMOCt8l7cZC3nzvsy4YQqKf/VkPhKIEX+b7LkAeNlxPSYUiBQUkNRoawg9+5BaMcHg==}
@@ -1260,8 +1267,8 @@ packages:
   '@push.rocks/smartpromise@4.2.3':
     resolution: {integrity: sha512-Ycg/TJR+tMt+S3wSFurOpEoW6nXv12QBtKXgBcjMZ4RsdO28geN46U09osPn9N9WuwQy1PkmTV5J/V4F9U8qEw==}
 
-  '@push.rocks/smartproxy@27.0.0':
-    resolution: {integrity: sha512-1scXCoXUM0Ify81une5LldTfbKaBFN8aa5xTiFg2PAS6R4QoGsYuj/aCmErVwBDzCF4G+je4Lh0wxLkMKy7QBA==}
+  '@push.rocks/smartproxy@27.1.0':
+    resolution: {integrity: sha512-uMtmbT6/9Y+lOnSi4w6SRICWJr9q9bHsYAq6xMLmym3zvnEzEwJWF6sw4Jb/uEFEjI2/e4irNSQ9Ba74DhFRlg==}
 
   '@push.rocks/smartpuppeteer@2.0.5':
     resolution: {integrity: sha512-yK/qSeWVHIGWRp3c8S5tfdGP6WCKllZC4DR8d8CQlEjszOSBmHtlTdyyqOMBZ/BA4kd+eU5f3A1r4K2tGYty1g==}
@@ -1323,6 +1330,9 @@ packages:
   '@push.rocks/smartversion@3.0.5':
     resolution: {integrity: sha512-8MZSo1yqyaKxKq0Q5N188l4un++9GFWVbhCAX5mXJwewZHn97ujffTeL+eOQYpWFTEpUhaq1QhL4NhqObBCt1Q==}
 
+  '@push.rocks/smartvpn@1.12.0':
+    resolution: {integrity: sha512-lwZCK8fopkms3c6ZSrUghuVNFi7xOXMSkGDSptQM2K3tu2UbajhpdxlAVMODY8n6caQr5ZXp0kHdtwVU9WKi5Q==}
+
   '@push.rocks/smartwatch@6.4.0':
     resolution: {integrity: sha512-KDswRgE/siBmZRCsRA07MtW5oF4c9uQEBkwTGPIWneHzksbCDsvs/7agKFEL7WnNifLNwo8w1K1qoiVWkX1fvw==}
     engines: {node: '>=20.0.0'}
@@ -1339,9 +1349,6 @@ packages:
   '@push.rocks/taskbuffer@3.5.0':
     resolution: {integrity: sha512-Y9WwIEIyp6oVFdj06j84tfrZIvjhbMb3DF52rYxlTeYLk3W7RPhSg1bGPCbtkXWeKdBrSe37V90BkOG7Qq8Pqg==}
 
-  '@push.rocks/taskbuffer@6.1.2':
-    resolution: {integrity: sha512-sdqKd8N/GidztQ1k3r8A86rLvD8Afyir5FjYCNJXDD9837JLoqzHaOKGltUSBsCGh2gjsZn6GydsY6HhXQgvZQ==}
-
   '@push.rocks/taskbuffer@8.0.2':
     resolution: {integrity: sha512-SRCAzrSHysW5XEjwZ494V60ybdpOo/s96jDD3sn7SkYolzg2Pboh+SW5Q7SVNcdkP4b9wCEizOYe9CB3vj3W6w==}
 
@@ -5746,6 +5753,19 @@ snapshots:
       tslib: 2.8.1
       tsyringe: 4.10.0
 
+  '@peculiar/x509@2.0.0':
+    dependencies:
+      '@peculiar/asn1-cms': 2.6.1
+      '@peculiar/asn1-csr': 2.6.1
+      '@peculiar/asn1-ecc': 2.6.1
+      '@peculiar/asn1-pkcs9': 2.6.1
+      '@peculiar/asn1-rsa': 2.6.1
+      '@peculiar/asn1-schema': 2.6.0
+      '@peculiar/asn1-x509': 2.6.1
+      pvtsutils: 1.3.6
+      tslib: 2.8.1
+      tsyringe: 4.10.0
+
   '@pnpm/config.env-replace@1.1.0': {}
 
   '@pnpm/network.ca-file@1.0.2':
@@ -5853,10 +5873,10 @@ snapshots:
       '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartpath': 6.0.0
 
-  '@push.rocks/smartacme@9.3.0(socks@2.8.7)':
+  '@push.rocks/smartacme@9.3.1(socks@2.8.7)':
     dependencies:
       '@apiclient.xyz/cloudflare': 7.1.0
-      '@peculiar/x509': 1.14.3
+      '@peculiar/x509': 2.0.0
       '@push.rocks/lik': 6.4.0
       '@push.rocks/smartdata': 7.1.3(socks@2.8.7)
       '@push.rocks/smartdelay': 3.0.5
@@ -5866,17 +5886,21 @@ snapshots:
       '@push.rocks/smartstring': 4.1.0
       '@push.rocks/smarttime': 4.2.3
       '@push.rocks/smartunique': 3.0.9
-      '@push.rocks/taskbuffer': 6.1.2
+      '@push.rocks/taskbuffer': 8.0.2
       '@tsclass/tsclass': 9.5.0
+      reflect-metadata: 0.2.2
     transitivePeerDependencies:
       - '@aws-sdk/credential-providers'
       - '@mongodb-js/zstd'
       - '@nuxt/kit'
+      - bare-abort-controller
+      - bare-buffer
       - encoding
       - gcp-metadata
       - kerberos
       - mongodb-client-encryption
       - react
+      - react-native-b4a
       - snappy
       - socks
       - supports-color
@@ -6382,7 +6406,7 @@ snapshots:
 
   '@push.rocks/smartpromise@4.2.3': {}
 
-  '@push.rocks/smartproxy@27.0.0':
+  '@push.rocks/smartproxy@27.1.0':
     dependencies:
       '@push.rocks/smartcrypto': 2.0.4
       '@push.rocks/smartlog': 3.2.1
@@ -6538,6 +6562,11 @@ snapshots:
       '@types/semver': 7.7.1
       semver: 7.7.4
 
+  '@push.rocks/smartvpn@1.12.0':
+    dependencies:
+      '@push.rocks/smartpath': 6.0.0
+      '@push.rocks/smartrust': 1.3.2
+
   '@push.rocks/smartwatch@6.4.0':
     dependencies:
       '@push.rocks/lik': 6.4.0
@@ -6577,22 +6606,6 @@ snapshots:
       - supports-color
       - vue
 
-  '@push.rocks/taskbuffer@6.1.2':
-    dependencies:
-      '@design.estate/dees-element': 2.2.4
-      '@push.rocks/lik': 6.4.0
-      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.1
-      '@push.rocks/smartpromise': 4.2.3
-      '@push.rocks/smartrx': 3.0.10
-      '@push.rocks/smarttime': 4.2.3
-      '@push.rocks/smartunique': 3.0.9
-    transitivePeerDependencies:
-      - '@nuxt/kit'
-      - react
-      - supports-color
-      - vue
-
   '@push.rocks/taskbuffer@8.0.2':
     dependencies:
       '@design.estate/dees-element': 2.2.4

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/dcrouter',
-  version: '11.12.2',
+  version: '11.13.0',
   description: 'A multifaceted routing service handling mail and SMS delivery functions.'
 }

ts/classes.dcrouter.ts

@@ -22,6 +22,7 @@ import { OpsServer } from './opsserver/index.js';
 import { MetricsManager } from './monitoring/index.js';
 import { RadiusServer, type IRadiusServerConfig } from './radius/index.js';
 import { RemoteIngressManager, TunnelManager } from './remoteingress/index.js';
+import { VpnManager, type IVpnManagerConfig } from './vpn/index.js';
 import { RouteConfigManager, ApiTokenManager } from './config/index.js';
 import { SecurityLogger, ContentScanner, IPReputationChecker } from './security/index.js';
 import { type IHttp3Config, augmentRoutesWithHttp3 } from './http3/index.js';
@@ -188,6 +189,26 @@ export interface IDcRouterOptions {
       keyPath?: string;
     };
   };
+
+  /**
+   * VPN server configuration.
+   * Enables VPN-based access control: routes with vpn.required are only
+   * accessible from VPN clients. Supports WireGuard + native (WS/QUIC) transports.
+   */
+  vpnConfig?: {
+    /** Enable VPN server (default: false) */
+    enabled?: boolean;
+    /** VPN subnet CIDR (default: '10.8.0.0/24') */
+    subnet?: string;
+    /** WireGuard UDP listen port (default: 51820) */
+    wgListenPort?: number;
+    /** DNS servers pushed to VPN clients */
+    dns?: string[];
+    /** Server endpoint hostname for client configs (e.g. 'vpn.example.com') */
+    serverEndpoint?: string;
+    /** Override forwarding mode. Default: auto-detect (tun if root, socket otherwise) */
+    forwardingMode?: 'tun' | 'socket';
+  };
 }
 
 /**
@@ -226,6 +247,9 @@ export class DcRouter {
   public remoteIngressManager?: RemoteIngressManager;
   public tunnelManager?: TunnelManager;
 
+  // VPN
+  public vpnManager?: VpnManager;
+
   // Programmatic config API
   public routeConfigManager?: RouteConfigManager;
   public apiTokenManager?: ApiTokenManager;
@@ -389,34 +413,21 @@ export class DcRouter {
               this.smartAcmeReady = true;
               logger.log('info', 'SmartAcme DNS-01 provider is now ready');
 
-              // Re-provision any certificates that failed during the startup window
-              // (before SmartAcme was ready — the certProvisionFunction returned 'http01'
-              // which fails because Rust ACME is disabled when certProvisionFunction is set)
+              // Re-trigger certificate provisioning for all auto-cert routes.
+              // During startup, certProvisionFunction returned 'http01' (SmartAcme not ready),
+              // but Rust ACME is disabled when certProvisionFunction is set — so all domains
+              // failed silently (SmartProxy doesn't emit certificate-failed for this path).
+              // Calling updateRoutes() re-triggers provisionCertificatesViaCallback internally,
+              // which calls certProvisionFunction again — now with smartAcmeReady === true.
               if (this.smartProxy) {
-                const failedDomains = [...this.certificateStatusMap.entries()]
-                  .filter(([_, status]) => status.status === 'failed')
-                  .map(([domain]) => domain);
-
-                if (failedDomains.length > 0) {
-                  logger.log('info', `Re-provisioning ${failedDomains.length} certificates that failed before SmartAcme was ready`);
-                  // Clear backoff and status for failed domains — these failures were from the startup race
-                  for (const domain of failedDomains) {
-                    if (this.certProvisionScheduler) {
-                      await this.certProvisionScheduler.clearBackoff(domain);
-                    }
-                    this.certificateStatusMap.delete(domain);
-                  }
-                  // Re-trigger provisioning for all auto-cert routes
-                  const routes = this.smartProxy.routeManager.getRoutes();
-                  for (const route of routes) {
-                    const tls = (route as any).action?.tls;
-                    if (tls && tls.certificate === 'auto' && route.name) {
-                      this.smartProxy.provisionCertificate(route.name).catch((err: any) => {
-                        logger.log('warn', `Re-provision for route '${route.name}' failed: ${err?.message || err}`);
-                      });
-                    }
-                  }
+                if (this.certProvisionScheduler) {
+                  this.certProvisionScheduler.clear();
                 }
+                const currentRoutes = this.smartProxy.routeManager.getRoutes();
+                logger.log('info', `Re-triggering certificate provisioning for ${currentRoutes.length} routes`);
+                this.smartProxy.updateRoutes(currentRoutes).catch((err: any) => {
+                  logger.log('warn', `Failed to re-trigger cert provisioning: ${err?.message || err}`);
+                });
               }
             }
           })
@@ -442,6 +453,7 @@ export class DcRouter {
             () => this.getConstructorRoutes(),
             () => this.smartProxy,
             () => this.options.http3,
+            () => this.options.vpnConfig?.enabled ? (this.options.vpnConfig.subnet || '10.8.0.0/24') : undefined,
           );
           this.apiTokenManager = new ApiTokenManager(this.storageManager);
           await this.apiTokenManager.initialize();
@@ -546,6 +558,25 @@ export class DcRouter {
       );
     }
 
+    // VPN Server: optional, depends on SmartProxy
+    if (this.options.vpnConfig?.enabled) {
+      this.serviceManager.addService(
+        new plugins.taskbuffer.Service('VpnServer')
+          .optional()
+          .dependsOn('SmartProxy')
+          .withStart(async () => {
+            await this.setupVpnServer();
+          })
+          .withStop(async () => {
+            if (this.vpnManager) {
+              await this.vpnManager.stop();
+              this.vpnManager = undefined;
+            }
+          })
+          .withRetry({ maxRetries: 3, baseDelayMs: 2000, maxDelayMs: 30_000 }),
+      );
+    }
+
     // Wire up aggregated events for logging
     this.serviceSubjectSubscription = this.serviceManager.serviceSubject.subscribe((event) => {
       const level = event.type === 'failed' ? 'error' : event.type === 'retrying' ? 'warn' : 'info';
@@ -629,6 +660,15 @@ export class DcRouter {
       logger.log('info', `RADIUS Service: auth=${this.options.radiusConfig.authPort || 1812}, acct=${this.options.radiusConfig.acctPort || 1813}, clients=${this.options.radiusConfig.clients?.length || 0}, VLANs=${vlanStats.totalMappings}, accounting=${this.options.radiusConfig.accounting?.enabled ? 'enabled' : 'disabled'}`);
     }
 
+    // VPN summary
+    if (this.vpnManager && this.options.vpnConfig?.enabled) {
+      const subnet = this.vpnManager.getSubnet();
+      const wgPort = this.options.vpnConfig.wgListenPort ?? 51820;
+      const mode = this.vpnManager.forwardingMode;
+      const clientCount = this.vpnManager.listClients().length;
+      logger.log('info', `VPN Service: mode=${mode}, subnet=${subnet}, wg=:${wgPort}, clients=${clientCount}`);
+    }
+
     // Remote Ingress summary
     if (this.tunnelManager && this.options.remoteIngressConfig?.enabled) {
       const edgeCount = this.remoteIngressManager?.getAllEdges().length || 0;
@@ -754,6 +794,11 @@ export class DcRouter {
       logger.log('info', 'HTTP/3: Augmented qualifying HTTPS routes with QUIC/H3 configuration');
     }
 
+    // VPN route security injection: restrict vpn.required routes to VPN subnet
+    if (this.options.vpnConfig?.enabled) {
+      routes = this.injectVpnSecurity(routes);
+    }
+
     // Cache constructor routes for RouteConfigManager
     this.constructorRoutes = [...routes];
 
@@ -865,14 +910,22 @@ export class DcRouter {
             const cert = await this.smartAcme!.getCertificateForDomain(domain, {
               includeWildcard: !isWildcardDomain,
             });
-            if (cert.validUntil) {
-              eventComms.setExpiryDate(new Date(cert.validUntil));
+            // Parse real X509 expiry from PEM (defense-in-depth over SmartAcme's estimate)
+            let realValidUntil = cert.validUntil;
+            if (cert.publicKey) {
+              try {
+                const x509 = new plugins.crypto.X509Certificate(cert.publicKey);
+                realValidUntil = new Date(x509.validTo).getTime();
+              } catch { /* fallback to SmartAcme's value */ }
+            }
+            if (realValidUntil) {
+              eventComms.setExpiryDate(new Date(realValidUntil));
             }
             const result = {
               id: cert.id,
               domainName: cert.domainName,
               created: cert.created,
-              validUntil: cert.validUntil,
+              validUntil: realValidUntil,
               privateKey: cert.privateKey,
               publicKey: cert.publicKey,
               csr: cert.csr,
@@ -897,6 +950,22 @@ export class DcRouter {
         smartProxyConfig.proxyIPs = ['127.0.0.1'];
       }
 
+      // When VPN is in socket mode, the userspace NAT engine sends PP v2 headers
+      // on outbound connections to SmartProxy to preserve VPN client tunnel IPs.
+      if (this.options.vpnConfig?.enabled) {
+        const vpnForwardingMode = this.options.vpnConfig.forwardingMode
+          ?? (process.getuid?.() === 0 ? 'tun' : 'socket');
+        if (vpnForwardingMode === 'socket') {
+          smartProxyConfig.acceptProxyProtocol = true;
+          if (!smartProxyConfig.proxyIPs) {
+            smartProxyConfig.proxyIPs = [];
+          }
+          if (!smartProxyConfig.proxyIPs.includes('127.0.0.1')) {
+            smartProxyConfig.proxyIPs.push('127.0.0.1');
+          }
+        }
+      }
+
       // Create SmartProxy instance
       logger.log('info', `Creating SmartProxy instance: routes=${smartProxyConfig.routes?.length}, acme=${smartProxyConfig.acme?.enabled}, certProvisionFunction=${!!smartProxyConfig.certProvisionFunction}`);
       
@@ -1160,23 +1229,6 @@ export class DcRouter {
     return false;
   }
 
-  /**
-   * Find the first route name that matches a given domain
-   */
-  private findRouteNameForDomain(domain: string): string | undefined {
-    if (!this.smartProxy) return undefined;
-    for (const route of this.smartProxy.routeManager.getRoutes()) {
-      if (!route.match.domains || !route.name) continue;
-      const routeDomains = Array.isArray(route.match.domains)
-        ? route.match.domains
-        : [route.match.domains];
-      for (const pattern of routeDomains) {
-        if (this.isDomainMatch(domain, pattern)) return route.name;
-      }
-    }
-    return undefined;
-  }
-
   /**
    * Find ALL route names that match a given domain
    */
@@ -2018,6 +2070,58 @@ export class DcRouter {
     logger.log('info', `Remote Ingress hub started on port ${this.options.remoteIngressConfig.tunnelPort || 8443} with ${edgeCount} registered edge(s)`);
   }
 
+  /**
+   * Set up VPN server for VPN-based route access control.
+   */
+  private async setupVpnServer(): Promise<void> {
+    if (!this.options.vpnConfig?.enabled) {
+      return;
+    }
+
+    logger.log('info', 'Setting up VPN server...');
+
+    this.vpnManager = new VpnManager(this.storageManager, {
+      subnet: this.options.vpnConfig.subnet,
+      wgListenPort: this.options.vpnConfig.wgListenPort,
+      dns: this.options.vpnConfig.dns,
+      serverEndpoint: this.options.vpnConfig.serverEndpoint,
+      forwardingMode: this.options.vpnConfig.forwardingMode,
+    });
+
+    await this.vpnManager.start();
+  }
+
+  /**
+   * Inject VPN security into routes that have vpn.required === true.
+   * Adds the VPN subnet to security.ipAllowList so only VPN clients can access them.
+   */
+  private injectVpnSecurity(routes: plugins.smartproxy.IRouteConfig[]): plugins.smartproxy.IRouteConfig[] {
+    const vpnSubnet = this.options.vpnConfig?.subnet || '10.8.0.0/24';
+    let injectedCount = 0;
+
+    const result = routes.map((route) => {
+      const dcrouterRoute = route as import('../ts_interfaces/data/remoteingress.js').IDcRouterRouteConfig;
+      if (dcrouterRoute.vpn?.required) {
+        injectedCount++;
+        const existing = route.security?.ipAllowList || [];
+        return {
+          ...route,
+          security: {
+            ...route.security,
+            ipAllowList: [...existing, vpnSubnet],
+          },
+        };
+      }
+      return route;
+    });
+
+    if (injectedCount > 0) {
+      logger.log('info', `VPN: Injected ipAllowList (${vpnSubnet}) into ${injectedCount} VPN-protected route(s)`);
+    }
+
+    return result;
+  }
+
   /**
    * Set up RADIUS server for network authentication
    */

ts/config/classes.route-config-manager.ts

@@ -7,6 +7,7 @@ import type {
   IMergedRoute,
   IRouteWarning,
 } from '../../ts_interfaces/data/route-management.js';
+import type { IDcRouterRouteConfig } from '../../ts_interfaces/data/remoteingress.js';
 import { type IHttp3Config, augmentRouteWithHttp3 } from '../http3/index.js';
 
 const ROUTES_PREFIX = '/config-api/routes/';
@@ -22,6 +23,7 @@ export class RouteConfigManager {
     private getHardcodedRoutes: () => plugins.smartproxy.IRouteConfig[],
     private getSmartProxy: () => plugins.smartproxy.SmartProxy | undefined,
     private getHttp3Config?: () => IHttp3Config | undefined,
+    private getVpnSubnet?: () => string | undefined,
   ) {}
 
   /**
@@ -262,13 +264,28 @@ export class RouteConfigManager {
 
     // Add enabled programmatic routes (with HTTP/3 augmentation if enabled)
     const http3Config = this.getHttp3Config?.();
+    const vpnSubnet = this.getVpnSubnet?.();
     for (const stored of this.storedRoutes.values()) {
       if (stored.enabled) {
+        let route = stored.route;
         if (http3Config && http3Config.enabled !== false) {
-          enabledRoutes.push(augmentRouteWithHttp3(stored.route, { enabled: true, ...http3Config }));
-        } else {
-          enabledRoutes.push(stored.route);
+          route = augmentRouteWithHttp3(route, { enabled: true, ...http3Config });
         }
+        // Inject VPN security for programmatic routes with vpn.required
+        if (vpnSubnet) {
+          const dcRoute = route as IDcRouterRouteConfig;
+          if (dcRoute.vpn?.required) {
+            const existing = route.security?.ipAllowList || [];
+            route = {
+              ...route,
+              security: {
+                ...route.security,
+                ipAllowList: [...existing, vpnSubnet],
+              },
+            };
+          }
+        }
+        enabledRoutes.push(route);
       }
     }
 

ts/opsserver/classes.opsserver.ts

@@ -28,6 +28,7 @@ export class OpsServer {
   private remoteIngressHandler!: handlers.RemoteIngressHandler;
   private routeManagementHandler!: handlers.RouteManagementHandler;
   private apiTokenHandler!: handlers.ApiTokenHandler;
+  private vpnHandler!: handlers.VpnHandler;
 
   constructor(dcRouterRefArg: DcRouter) {
     this.dcRouterRef = dcRouterRefArg;
@@ -86,6 +87,7 @@ export class OpsServer {
     this.remoteIngressHandler = new handlers.RemoteIngressHandler(this);
     this.routeManagementHandler = new handlers.RouteManagementHandler(this);
     this.apiTokenHandler = new handlers.ApiTokenHandler(this);
+    this.vpnHandler = new handlers.VpnHandler(this);
 
     console.log('✅ OpsServer TypedRequest handlers initialized');
   }

ts/opsserver/handlers/index.ts

@@ -8,4 +8,5 @@ export * from './email-ops.handler.js';
 export * from './certificate.handler.js';
 export * from './remoteingress.handler.js';
 export * from './route-management.handler.js';
-export * from './api-token.handler.js';
+export * from './api-token.handler.js';
+export * from './vpn.handler.js';

ts/opsserver/handlers/vpn.handler.ts

@@ -0,0 +1,257 @@
+import * as plugins from '../../plugins.js';
+import type { OpsServer } from '../classes.opsserver.js';
+import * as interfaces from '../../../ts_interfaces/index.js';
+
+export class VpnHandler {
+  constructor(private opsServerRef: OpsServer) {
+    this.registerHandlers();
+  }
+
+  private registerHandlers(): void {
+    const viewRouter = this.opsServerRef.viewRouter;
+    const adminRouter = this.opsServerRef.adminRouter;
+
+    // ---- Read endpoints (viewRouter — valid identity required via middleware) ----
+
+    // Get all registered VPN clients
+    viewRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetVpnClients>(
+        'getVpnClients',
+        async (dataArg, toolsArg) => {
+          const manager = this.opsServerRef.dcRouterRef.vpnManager;
+          if (!manager) {
+            return { clients: [] };
+          }
+          const clients = manager.listClients().map((c) => ({
+            clientId: c.clientId,
+            enabled: c.enabled,
+            tags: c.tags,
+            description: c.description,
+            assignedIp: c.assignedIp,
+            createdAt: c.createdAt,
+            updatedAt: c.updatedAt,
+            expiresAt: c.expiresAt,
+          }));
+          return { clients };
+        },
+      ),
+    );
+
+    // Get VPN server status
+    viewRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetVpnStatus>(
+        'getVpnStatus',
+        async (dataArg, toolsArg) => {
+          const manager = this.opsServerRef.dcRouterRef.vpnManager;
+          const vpnConfig = this.opsServerRef.dcRouterRef.options.vpnConfig;
+          if (!manager) {
+            return {
+              status: {
+                running: false,
+                forwardingMode: 'socket' as const,
+                subnet: vpnConfig?.subnet || '10.8.0.0/24',
+                wgListenPort: vpnConfig?.wgListenPort ?? 51820,
+                serverPublicKeys: null,
+                registeredClients: 0,
+                connectedClients: 0,
+              },
+            };
+          }
+
+          const connected = await manager.getConnectedClients();
+          return {
+            status: {
+              running: manager.running,
+              forwardingMode: manager.forwardingMode,
+              subnet: manager.getSubnet(),
+              wgListenPort: vpnConfig?.wgListenPort ?? 51820,
+              serverPublicKeys: manager.getServerPublicKeys(),
+              registeredClients: manager.listClients().length,
+              connectedClients: connected.length,
+            },
+          };
+        },
+      ),
+    );
+
+    // ---- Write endpoints (adminRouter — admin identity required via middleware) ----
+
+    // Create a new VPN client
+    adminRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_CreateVpnClient>(
+        'createVpnClient',
+        async (dataArg, toolsArg) => {
+          const manager = this.opsServerRef.dcRouterRef.vpnManager;
+          if (!manager) {
+            return { success: false, message: 'VPN not configured' };
+          }
+
+          try {
+            const bundle = await manager.createClient({
+              clientId: dataArg.clientId,
+              tags: dataArg.tags,
+              description: dataArg.description,
+            });
+
+            return {
+              success: true,
+              client: {
+                clientId: bundle.entry.clientId,
+                enabled: bundle.entry.enabled ?? true,
+                tags: bundle.entry.tags,
+                description: bundle.entry.description,
+                assignedIp: bundle.entry.assignedIp,
+                createdAt: Date.now(),
+                updatedAt: Date.now(),
+                expiresAt: bundle.entry.expiresAt,
+              },
+              wireguardConfig: bundle.wireguardConfig,
+            };
+          } catch (err: unknown) {
+            return { success: false, message: (err as Error).message };
+          }
+        },
+      ),
+    );
+
+    // Delete a VPN client
+    adminRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_DeleteVpnClient>(
+        'deleteVpnClient',
+        async (dataArg, toolsArg) => {
+          const manager = this.opsServerRef.dcRouterRef.vpnManager;
+          if (!manager) {
+            return { success: false, message: 'VPN not configured' };
+          }
+
+          try {
+            await manager.removeClient(dataArg.clientId);
+            return { success: true };
+          } catch (err: unknown) {
+            return { success: false, message: (err as Error).message };
+          }
+        },
+      ),
+    );
+
+    // Enable a VPN client
+    adminRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_EnableVpnClient>(
+        'enableVpnClient',
+        async (dataArg, toolsArg) => {
+          const manager = this.opsServerRef.dcRouterRef.vpnManager;
+          if (!manager) {
+            return { success: false, message: 'VPN not configured' };
+          }
+
+          try {
+            await manager.enableClient(dataArg.clientId);
+            return { success: true };
+          } catch (err: unknown) {
+            return { success: false, message: (err as Error).message };
+          }
+        },
+      ),
+    );
+
+    // Disable a VPN client
+    adminRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_DisableVpnClient>(
+        'disableVpnClient',
+        async (dataArg, toolsArg) => {
+          const manager = this.opsServerRef.dcRouterRef.vpnManager;
+          if (!manager) {
+            return { success: false, message: 'VPN not configured' };
+          }
+
+          try {
+            await manager.disableClient(dataArg.clientId);
+            return { success: true };
+          } catch (err: unknown) {
+            return { success: false, message: (err as Error).message };
+          }
+        },
+      ),
+    );
+
+    // Rotate a VPN client's keys
+    adminRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_RotateVpnClientKey>(
+        'rotateVpnClientKey',
+        async (dataArg, toolsArg) => {
+          const manager = this.opsServerRef.dcRouterRef.vpnManager;
+          if (!manager) {
+            return { success: false, message: 'VPN not configured' };
+          }
+
+          try {
+            const bundle = await manager.rotateClientKey(dataArg.clientId);
+            return {
+              success: true,
+              wireguardConfig: bundle.wireguardConfig,
+            };
+          } catch (err: unknown) {
+            return { success: false, message: (err as Error).message };
+          }
+        },
+      ),
+    );
+
+    // Export a VPN client config
+    adminRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_ExportVpnClientConfig>(
+        'exportVpnClientConfig',
+        async (dataArg, toolsArg) => {
+          const manager = this.opsServerRef.dcRouterRef.vpnManager;
+          if (!manager) {
+            return { success: false, message: 'VPN not configured' };
+          }
+
+          try {
+            const config = await manager.exportClientConfig(dataArg.clientId, dataArg.format);
+            return { success: true, config };
+          } catch (err: unknown) {
+            return { success: false, message: (err as Error).message };
+          }
+        },
+      ),
+    );
+
+    // Get telemetry for a specific VPN client
+    viewRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetVpnClientTelemetry>(
+        'getVpnClientTelemetry',
+        async (dataArg, toolsArg) => {
+          const manager = this.opsServerRef.dcRouterRef.vpnManager;
+          if (!manager) {
+            return { success: false, message: 'VPN not configured' };
+          }
+
+          try {
+            const telemetry = await manager.getClientTelemetry(dataArg.clientId);
+            if (!telemetry) {
+              return { success: false, message: 'Client not found or not connected' };
+            }
+            return {
+              success: true,
+              telemetry: {
+                clientId: telemetry.clientId,
+                assignedIp: telemetry.assignedIp,
+                bytesSent: telemetry.bytesSent,
+                bytesReceived: telemetry.bytesReceived,
+                packetsDropped: telemetry.packetsDropped,
+                bytesDropped: telemetry.bytesDropped,
+                lastKeepaliveAt: telemetry.lastKeepaliveAt,
+                keepalivesReceived: telemetry.keepalivesReceived,
+                rateLimitBytesPerSec: telemetry.rateLimitBytesPerSec,
+                burstBytes: telemetry.burstBytes,
+              },
+            };
+          } catch (err: unknown) {
+            return { success: false, message: (err as Error).message };
+          }
+        },
+      ),
+    );
+  }
+}

ts/plugins.ts

@@ -58,13 +58,14 @@ import * as smartnetwork from '@push.rocks/smartnetwork';
 import * as smartpath from '@push.rocks/smartpath';
 import * as smartproxy from '@push.rocks/smartproxy';
 import * as smartpromise from '@push.rocks/smartpromise';
+import * as smartvpn from '@push.rocks/smartvpn';
 import * as smartradius from '@push.rocks/smartradius';
 import * as smartrequest from '@push.rocks/smartrequest';
 import * as smartrx from '@push.rocks/smartrx';
 import * as smartunique from '@push.rocks/smartunique';
 import * as taskbuffer from '@push.rocks/taskbuffer';
 
-export { projectinfo, qenv, smartacme, smartdata, smartdns, smartfs, smartguard, smartjwt, smartlog, smartmetrics, smartdb, smartmta, smartnetwork, smartpath, smartproxy, smartpromise, smartradius, smartrequest, smartrx, smartunique, taskbuffer };
+export { projectinfo, qenv, smartacme, smartdata, smartdns, smartfs, smartguard, smartjwt, smartlog, smartmetrics, smartdb, smartmta, smartnetwork, smartpath, smartproxy, smartpromise, smartradius, smartrequest, smartrx, smartunique, smartvpn, taskbuffer };
 
 // Define SmartLog types for use in error handling
 export type TLogLevel = 'error' | 'warn' | 'info' | 'success' | 'debug';

ts/vpn/classes.vpn-manager.ts

@@ -0,0 +1,378 @@
+import * as plugins from '../plugins.js';
+import { logger } from '../logger.js';
+import type { StorageManager } from '../storage/classes.storagemanager.js';
+
+const STORAGE_PREFIX_KEYS = '/vpn/server-keys';
+const STORAGE_PREFIX_CLIENTS = '/vpn/clients/';
+
+export interface IVpnManagerConfig {
+  /** VPN subnet CIDR (default: '10.8.0.0/24') */
+  subnet?: string;
+  /** WireGuard UDP listen port (default: 51820) */
+  wgListenPort?: number;
+  /** DNS servers pushed to VPN clients */
+  dns?: string[];
+  /** Server endpoint hostname for client configs (e.g. 'vpn.example.com') */
+  serverEndpoint?: string;
+  /** Override forwarding mode. Default: auto-detect (tun if root, socket otherwise) */
+  forwardingMode?: 'tun' | 'socket';
+}
+
+interface IPersistedServerKeys {
+  noisePrivateKey: string;
+  noisePublicKey: string;
+  wgPrivateKey: string;
+  wgPublicKey: string;
+}
+
+interface IPersistedClient {
+  clientId: string;
+  enabled: boolean;
+  tags?: string[];
+  description?: string;
+  assignedIp?: string;
+  noisePublicKey: string;
+  wgPublicKey: string;
+  createdAt: number;
+  updatedAt: number;
+  expiresAt?: string;
+}
+
+/**
+ * Manages the SmartVPN server lifecycle and VPN client CRUD.
+ * Persists server keys and client registrations via StorageManager.
+ */
+export class VpnManager {
+  private storageManager: StorageManager;
+  private config: IVpnManagerConfig;
+  private vpnServer?: plugins.smartvpn.VpnServer;
+  private clients: Map<string, IPersistedClient> = new Map();
+  private serverKeys?: IPersistedServerKeys;
+  private _forwardingMode: 'tun' | 'socket';
+
+  constructor(storageManager: StorageManager, config: IVpnManagerConfig) {
+    this.storageManager = storageManager;
+    this.config = config;
+    // Auto-detect forwarding mode: tun if root, socket otherwise
+    this._forwardingMode = config.forwardingMode
+      ?? (process.getuid?.() === 0 ? 'tun' : 'socket');
+  }
+
+  /** The effective forwarding mode (tun or socket). */
+  public get forwardingMode(): 'tun' | 'socket' {
+    return this._forwardingMode;
+  }
+
+  /** The VPN subnet CIDR. */
+  public getSubnet(): string {
+    return this.config.subnet || '10.8.0.0/24';
+  }
+
+  /** Whether the VPN server is running. */
+  public get running(): boolean {
+    return this.vpnServer?.running ?? false;
+  }
+
+  /**
+   * Start the VPN server.
+   * Loads or generates server keys, loads persisted clients, starts VpnServer.
+   */
+  public async start(): Promise<void> {
+    // Load or generate server keys
+    this.serverKeys = await this.loadOrGenerateServerKeys();
+
+    // Load persisted clients
+    await this.loadPersistedClients();
+
+    // Build client entries for the daemon
+    const clientEntries: plugins.smartvpn.IClientEntry[] = [];
+    for (const client of this.clients.values()) {
+      clientEntries.push({
+        clientId: client.clientId,
+        publicKey: client.noisePublicKey,
+        wgPublicKey: client.wgPublicKey,
+        enabled: client.enabled,
+        tags: client.tags,
+        description: client.description,
+        assignedIp: client.assignedIp,
+        expiresAt: client.expiresAt,
+      });
+    }
+
+    const subnet = this.getSubnet();
+    const wgListenPort = this.config.wgListenPort ?? 51820;
+
+    // Create and start VpnServer
+    this.vpnServer = new plugins.smartvpn.VpnServer({
+      transport: { transport: 'stdio' },
+    });
+
+    const serverConfig: plugins.smartvpn.IVpnServerConfig = {
+      listenAddr: '0.0.0.0:0', // WS listener not strictly needed but required field
+      privateKey: this.serverKeys.noisePrivateKey,
+      publicKey: this.serverKeys.noisePublicKey,
+      subnet,
+      dns: this.config.dns,
+      forwardingMode: this._forwardingMode,
+      transportMode: 'all',
+      wgPrivateKey: this.serverKeys.wgPrivateKey,
+      wgListenPort,
+      clients: clientEntries,
+      socketForwardProxyProtocol: this._forwardingMode === 'socket',
+    };
+
+    await this.vpnServer.start(serverConfig);
+    logger.log('info', `VPN server started: mode=${this._forwardingMode}, subnet=${subnet}, wg=:${wgListenPort}, clients=${this.clients.size}`);
+  }
+
+  /**
+   * Stop the VPN server.
+   */
+  public async stop(): Promise<void> {
+    if (this.vpnServer) {
+      try {
+        await this.vpnServer.stopServer();
+      } catch {
+        // Ignore stop errors
+      }
+      this.vpnServer.stop();
+      this.vpnServer = undefined;
+    }
+    logger.log('info', 'VPN server stopped');
+  }
+
+  // ── Client CRUD ────────────────────────────────────────────────────────
+
+  /**
+   * Create a new VPN client. Returns the config bundle (secrets only shown once).
+   */
+  public async createClient(opts: {
+    clientId: string;
+    tags?: string[];
+    description?: string;
+  }): Promise<plugins.smartvpn.IClientConfigBundle> {
+    if (!this.vpnServer) {
+      throw new Error('VPN server not running');
+    }
+
+    const bundle = await this.vpnServer.createClient({
+      clientId: opts.clientId,
+      tags: opts.tags,
+      description: opts.description,
+    });
+
+    // Update WireGuard config endpoint if serverEndpoint is configured
+    if (this.config.serverEndpoint && bundle.wireguardConfig) {
+      const wgPort = this.config.wgListenPort ?? 51820;
+      bundle.wireguardConfig = bundle.wireguardConfig.replace(
+        /Endpoint\s*=\s*.+/,
+        `Endpoint = ${this.config.serverEndpoint}:${wgPort}`,
+      );
+    }
+
+    // Persist client entry (without private keys)
+    const persisted: IPersistedClient = {
+      clientId: bundle.entry.clientId,
+      enabled: bundle.entry.enabled ?? true,
+      tags: bundle.entry.tags,
+      description: bundle.entry.description,
+      assignedIp: bundle.entry.assignedIp,
+      noisePublicKey: bundle.entry.publicKey,
+      wgPublicKey: bundle.entry.wgPublicKey || '',
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      expiresAt: bundle.entry.expiresAt,
+    };
+    this.clients.set(persisted.clientId, persisted);
+    await this.persistClient(persisted);
+
+    return bundle;
+  }
+
+  /**
+   * Remove a VPN client.
+   */
+  public async removeClient(clientId: string): Promise<void> {
+    if (!this.vpnServer) {
+      throw new Error('VPN server not running');
+    }
+    await this.vpnServer.removeClient(clientId);
+    this.clients.delete(clientId);
+    await this.storageManager.delete(`${STORAGE_PREFIX_CLIENTS}${clientId}`);
+  }
+
+  /**
+   * List all registered clients (without secrets).
+   */
+  public listClients(): IPersistedClient[] {
+    return [...this.clients.values()];
+  }
+
+  /**
+   * Enable a client.
+   */
+  public async enableClient(clientId: string): Promise<void> {
+    if (!this.vpnServer) throw new Error('VPN server not running');
+    await this.vpnServer.enableClient(clientId);
+    const client = this.clients.get(clientId);
+    if (client) {
+      client.enabled = true;
+      client.updatedAt = Date.now();
+      await this.persistClient(client);
+    }
+  }
+
+  /**
+   * Disable a client.
+   */
+  public async disableClient(clientId: string): Promise<void> {
+    if (!this.vpnServer) throw new Error('VPN server not running');
+    await this.vpnServer.disableClient(clientId);
+    const client = this.clients.get(clientId);
+    if (client) {
+      client.enabled = false;
+      client.updatedAt = Date.now();
+      await this.persistClient(client);
+    }
+  }
+
+  /**
+   * Rotate a client's keys. Returns the new config bundle.
+   */
+  public async rotateClientKey(clientId: string): Promise<plugins.smartvpn.IClientConfigBundle> {
+    if (!this.vpnServer) throw new Error('VPN server not running');
+    const bundle = await this.vpnServer.rotateClientKey(clientId);
+
+    // Update endpoint in WireGuard config
+    if (this.config.serverEndpoint && bundle.wireguardConfig) {
+      const wgPort = this.config.wgListenPort ?? 51820;
+      bundle.wireguardConfig = bundle.wireguardConfig.replace(
+        /Endpoint\s*=\s*.+/,
+        `Endpoint = ${this.config.serverEndpoint}:${wgPort}`,
+      );
+    }
+
+    // Update persisted entry with new public keys
+    const client = this.clients.get(clientId);
+    if (client) {
+      client.noisePublicKey = bundle.entry.publicKey;
+      client.wgPublicKey = bundle.entry.wgPublicKey || '';
+      client.updatedAt = Date.now();
+      await this.persistClient(client);
+    }
+
+    return bundle;
+  }
+
+  /**
+   * Export a client config (without secrets).
+   */
+  public async exportClientConfig(clientId: string, format: 'smartvpn' | 'wireguard'): Promise<string> {
+    if (!this.vpnServer) throw new Error('VPN server not running');
+    let config = await this.vpnServer.exportClientConfig(clientId, format);
+
+    // Update endpoint in WireGuard config
+    if (format === 'wireguard' && this.config.serverEndpoint) {
+      const wgPort = this.config.wgListenPort ?? 51820;
+      config = config.replace(
+        /Endpoint\s*=\s*.+/,
+        `Endpoint = ${this.config.serverEndpoint}:${wgPort}`,
+      );
+    }
+
+    return config;
+  }
+
+  // ── Status and telemetry ───────────────────────────────────────────────
+
+  /**
+   * Get server status.
+   */
+  public async getStatus(): Promise<plugins.smartvpn.IVpnStatus | null> {
+    if (!this.vpnServer) return null;
+    return this.vpnServer.getStatus();
+  }
+
+  /**
+   * Get server statistics.
+   */
+  public async getStatistics(): Promise<plugins.smartvpn.IVpnServerStatistics | null> {
+    if (!this.vpnServer) return null;
+    return this.vpnServer.getStatistics();
+  }
+
+  /**
+   * List currently connected clients.
+   */
+  public async getConnectedClients(): Promise<plugins.smartvpn.IVpnClientInfo[]> {
+    if (!this.vpnServer) return [];
+    return this.vpnServer.listClients();
+  }
+
+  /**
+   * Get telemetry for a specific client.
+   */
+  public async getClientTelemetry(clientId: string): Promise<plugins.smartvpn.IVpnClientTelemetry | null> {
+    if (!this.vpnServer) return null;
+    return this.vpnServer.getClientTelemetry(clientId);
+  }
+
+  /**
+   * Get server public keys (for display/info).
+   */
+  public getServerPublicKeys(): { noisePublicKey: string; wgPublicKey: string } | null {
+    if (!this.serverKeys) return null;
+    return {
+      noisePublicKey: this.serverKeys.noisePublicKey,
+      wgPublicKey: this.serverKeys.wgPublicKey,
+    };
+  }
+
+  // ── Private helpers ────────────────────────────────────────────────────
+
+  private async loadOrGenerateServerKeys(): Promise<IPersistedServerKeys> {
+    const stored = await this.storageManager.getJSON<IPersistedServerKeys>(STORAGE_PREFIX_KEYS);
+    if (stored?.noisePrivateKey && stored?.wgPrivateKey) {
+      logger.log('info', 'Loaded VPN server keys from storage');
+      return stored;
+    }
+
+    // Generate new keys via the daemon
+    const tempServer = new plugins.smartvpn.VpnServer({
+      transport: { transport: 'stdio' },
+    });
+    await tempServer.start();
+
+    const noiseKeys = await tempServer.generateKeypair();
+    const wgKeys = await tempServer.generateWgKeypair();
+    tempServer.stop();
+
+    const keys: IPersistedServerKeys = {
+      noisePrivateKey: noiseKeys.privateKey,
+      noisePublicKey: noiseKeys.publicKey,
+      wgPrivateKey: wgKeys.privateKey,
+      wgPublicKey: wgKeys.publicKey,
+    };
+
+    await this.storageManager.setJSON(STORAGE_PREFIX_KEYS, keys);
+    logger.log('info', 'Generated and persisted new VPN server keys');
+    return keys;
+  }
+
+  private async loadPersistedClients(): Promise<void> {
+    const keys = await this.storageManager.list(STORAGE_PREFIX_CLIENTS);
+    for (const key of keys) {
+      const client = await this.storageManager.getJSON<IPersistedClient>(key);
+      if (client) {
+        this.clients.set(client.clientId, client);
+      }
+    }
+    if (this.clients.size > 0) {
+      logger.log('info', `Loaded ${this.clients.size} persisted VPN client(s)`);
+    }
+  }
+
+  private async persistClient(client: IPersistedClient): Promise<void> {
+    await this.storageManager.setJSON(`${STORAGE_PREFIX_CLIENTS}${client.clientId}`, client);
+  }
+}

ts/vpn/index.ts

@@ -0,0 +1 @@
+export * from './classes.vpn-manager.js';

ts_interfaces/data/index.ts

@@ -1,4 +1,5 @@
 export * from './auth.js';
 export * from './stats.js';
 export * from './remoteingress.js';
-export * from './route-management.js';
+export * from './route-management.js';
+export * from './vpn.js';

ts_interfaces/data/remoteingress.ts

@@ -51,11 +51,21 @@ export interface IRouteRemoteIngress {
   edgeFilter?: string[];
 }
 
+/**
+ * Route-level VPN access configuration.
+ * When attached to a route, restricts access to VPN clients only.
+ */
+export interface IRouteVpn {
+  /** Whether this route requires VPN access */
+  required: boolean;
+}
+
 /**
  * Extended route config used within dcrouter.
- * Adds the optional `remoteIngress` property to SmartProxy's IRouteConfig.
+ * Adds optional `remoteIngress` and `vpn` properties to SmartProxy's IRouteConfig.
  * SmartProxy ignores unknown properties at runtime.
  */
 export type IDcRouterRouteConfig = IRouteConfig & {
   remoteIngress?: IRouteRemoteIngress;
+  vpn?: IRouteVpn;
 };

ts_interfaces/data/vpn.ts

@@ -0,0 +1,45 @@
+/**
+ * A registered VPN client (secrets excluded from API responses).
+ */
+export interface IVpnClient {
+  clientId: string;
+  enabled: boolean;
+  tags?: string[];
+  description?: string;
+  assignedIp?: string;
+  createdAt: number;
+  updatedAt: number;
+  expiresAt?: string;
+}
+
+/**
+ * VPN server status.
+ */
+export interface IVpnServerStatus {
+  running: boolean;
+  forwardingMode: 'tun' | 'socket';
+  subnet: string;
+  wgListenPort: number;
+  serverPublicKeys: {
+    noisePublicKey: string;
+    wgPublicKey: string;
+  } | null;
+  registeredClients: number;
+  connectedClients: number;
+}
+
+/**
+ * VPN client telemetry data.
+ */
+export interface IVpnClientTelemetry {
+  clientId: string;
+  assignedIp: string;
+  bytesSent: number;
+  bytesReceived: number;
+  packetsDropped: number;
+  bytesDropped: number;
+  lastKeepaliveAt?: string;
+  keepalivesReceived: number;
+  rateLimitBytesPerSec?: number;
+  burstBytes?: number;
+}

ts_interfaces/requests/index.ts

@@ -8,4 +8,5 @@ export * from './email-ops.js';
 export * from './certificate.js';
 export * from './remoteingress.js';
 export * from './route-management.js';
-export * from './api-tokens.js';
+export * from './api-tokens.js';
+export * from './vpn.js';

ts_interfaces/requests/vpn.ts

@@ -0,0 +1,175 @@
+import * as plugins from '../plugins.js';
+import * as authInterfaces from '../data/auth.js';
+import type { IVpnClient, IVpnServerStatus, IVpnClientTelemetry } from '../data/vpn.js';
+
+// ============================================================================
+// VPN Client Management
+// ============================================================================
+
+/**
+ * Get all registered VPN clients.
+ */
+export interface IReq_GetVpnClients extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetVpnClients
+> {
+  method: 'getVpnClients';
+  request: {
+    identity: authInterfaces.IIdentity;
+  };
+  response: {
+    clients: IVpnClient[];
+  };
+}
+
+/**
+ * Get VPN server status.
+ */
+export interface IReq_GetVpnStatus extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetVpnStatus
+> {
+  method: 'getVpnStatus';
+  request: {
+    identity: authInterfaces.IIdentity;
+  };
+  response: {
+    status: IVpnServerStatus;
+  };
+}
+
+/**
+ * Create a new VPN client. Returns the config bundle (secrets only shown once).
+ */
+export interface IReq_CreateVpnClient extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_CreateVpnClient
+> {
+  method: 'createVpnClient';
+  request: {
+    identity: authInterfaces.IIdentity;
+    clientId: string;
+    tags?: string[];
+    description?: string;
+  };
+  response: {
+    success: boolean;
+    client?: IVpnClient;
+    /** WireGuard .conf file content (only returned at creation) */
+    wireguardConfig?: string;
+    message?: string;
+  };
+}
+
+/**
+ * Delete a VPN client.
+ */
+export interface IReq_DeleteVpnClient extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_DeleteVpnClient
+> {
+  method: 'deleteVpnClient';
+  request: {
+    identity: authInterfaces.IIdentity;
+    clientId: string;
+  };
+  response: {
+    success: boolean;
+    message?: string;
+  };
+}
+
+/**
+ * Enable a VPN client.
+ */
+export interface IReq_EnableVpnClient extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_EnableVpnClient
+> {
+  method: 'enableVpnClient';
+  request: {
+    identity: authInterfaces.IIdentity;
+    clientId: string;
+  };
+  response: {
+    success: boolean;
+    message?: string;
+  };
+}
+
+/**
+ * Disable a VPN client.
+ */
+export interface IReq_DisableVpnClient extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_DisableVpnClient
+> {
+  method: 'disableVpnClient';
+  request: {
+    identity: authInterfaces.IIdentity;
+    clientId: string;
+  };
+  response: {
+    success: boolean;
+    message?: string;
+  };
+}
+
+/**
+ * Rotate a VPN client's keys. Returns the new config bundle.
+ */
+export interface IReq_RotateVpnClientKey extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_RotateVpnClientKey
+> {
+  method: 'rotateVpnClientKey';
+  request: {
+    identity: authInterfaces.IIdentity;
+    clientId: string;
+  };
+  response: {
+    success: boolean;
+    /** WireGuard .conf file content with new keys */
+    wireguardConfig?: string;
+    message?: string;
+  };
+}
+
+/**
+ * Export a VPN client config.
+ */
+export interface IReq_ExportVpnClientConfig extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_ExportVpnClientConfig
+> {
+  method: 'exportVpnClientConfig';
+  request: {
+    identity: authInterfaces.IIdentity;
+    clientId: string;
+    format: 'smartvpn' | 'wireguard';
+  };
+  response: {
+    success: boolean;
+    config?: string;
+    message?: string;
+  };
+}
+
+/**
+ * Get telemetry for a specific VPN client.
+ */
+export interface IReq_GetVpnClientTelemetry extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetVpnClientTelemetry
+> {
+  method: 'getVpnClientTelemetry';
+  request: {
+    identity: authInterfaces.IIdentity;
+    clientId: string;
+  };
+  response: {
+    success: boolean;
+    telemetry?: IVpnClientTelemetry;
+    message?: string;
+  };
+}

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/dcrouter',
-  version: '11.12.2',
+  version: '11.13.0',
   description: 'A multifaceted routing service handling mail and SMS delivery functions.'
 }

ts_web/appstate.ts

@@ -905,6 +905,161 @@ export const toggleRemoteIngressAction = remoteIngressStatePart.createAction<{
   }
 });
 
+// ============================================================================
+// VPN State
+// ============================================================================
+
+export interface IVpnState {
+  clients: interfaces.data.IVpnClient[];
+  status: interfaces.data.IVpnServerStatus | null;
+  isLoading: boolean;
+  error: string | null;
+  lastUpdated: number;
+  /** WireGuard config shown after create/rotate (only shown once) */
+  newClientConfig: string | null;
+}
+
+export const vpnStatePart = await appState.getStatePart<IVpnState>(
+  'vpn',
+  {
+    clients: [],
+    status: null,
+    isLoading: false,
+    error: null,
+    lastUpdated: 0,
+    newClientConfig: null,
+  },
+  'soft'
+);
+
+// ============================================================================
+// VPN Actions
+// ============================================================================
+
+export const fetchVpnAction = vpnStatePart.createAction(async (statePartArg): Promise<IVpnState> => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState()!;
+  if (!context.identity) return currentState;
+
+  try {
+    const clientsRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_GetVpnClients
+    >('/typedrequest', 'getVpnClients');
+
+    const statusRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_GetVpnStatus
+    >('/typedrequest', 'getVpnStatus');
+
+    const [clientsResponse, statusResponse] = await Promise.all([
+      clientsRequest.fire({ identity: context.identity }),
+      statusRequest.fire({ identity: context.identity }),
+    ]);
+
+    return {
+      ...currentState,
+      clients: clientsResponse.clients,
+      status: statusResponse.status,
+      isLoading: false,
+      error: null,
+      lastUpdated: Date.now(),
+    };
+  } catch (error) {
+    return {
+      ...currentState,
+      isLoading: false,
+      error: error instanceof Error ? error.message : 'Failed to fetch VPN data',
+    };
+  }
+});
+
+export const createVpnClientAction = vpnStatePart.createAction<{
+  clientId: string;
+  tags?: string[];
+  description?: string;
+}>(async (statePartArg, dataArg, actionContext): Promise<IVpnState> => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState()!;
+
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_CreateVpnClient
+    >('/typedrequest', 'createVpnClient');
+
+    const response = await request.fire({
+      identity: context.identity!,
+      clientId: dataArg.clientId,
+      tags: dataArg.tags,
+      description: dataArg.description,
+    });
+
+    if (!response.success) {
+      return { ...currentState, error: response.message || 'Failed to create client' };
+    }
+
+    const refreshed = await actionContext!.dispatch(fetchVpnAction, null);
+    return {
+      ...refreshed,
+      newClientConfig: response.wireguardConfig || null,
+    };
+  } catch (error: unknown) {
+    return {
+      ...currentState,
+      error: error instanceof Error ? error.message : 'Failed to create VPN client',
+    };
+  }
+});
+
+export const deleteVpnClientAction = vpnStatePart.createAction<string>(
+  async (statePartArg, clientId, actionContext): Promise<IVpnState> => {
+    const context = getActionContext();
+    const currentState = statePartArg.getState()!;
+
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_DeleteVpnClient
+      >('/typedrequest', 'deleteVpnClient');
+
+      await request.fire({ identity: context.identity!, clientId });
+      return await actionContext!.dispatch(fetchVpnAction, null);
+    } catch (error: unknown) {
+      return {
+        ...currentState,
+        error: error instanceof Error ? error.message : 'Failed to delete VPN client',
+      };
+    }
+  },
+);
+
+export const toggleVpnClientAction = vpnStatePart.createAction<{
+  clientId: string;
+  enabled: boolean;
+}>(async (statePartArg, dataArg, actionContext): Promise<IVpnState> => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState()!;
+
+  try {
+    const method = dataArg.enabled ? 'enableVpnClient' : 'disableVpnClient';
+    type TReq = interfaces.requests.IReq_EnableVpnClient | interfaces.requests.IReq_DisableVpnClient;
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<TReq>(
+      '/typedrequest', method,
+    );
+
+    await request.fire({ identity: context.identity!, clientId: dataArg.clientId });
+    return await actionContext!.dispatch(fetchVpnAction, null);
+  } catch (error: unknown) {
+    return {
+      ...currentState,
+      error: error instanceof Error ? error.message : 'Failed to toggle VPN client',
+    };
+  }
+});
+
+export const clearNewClientConfigAction = vpnStatePart.createAction(
+  async (statePartArg): Promise<IVpnState> => {
+    return { ...statePartArg.getState()!, newClientConfig: null };
+  },
+);
+
 // ============================================================================
 // Route Management Actions
 // ============================================================================
@@ -1372,6 +1527,15 @@ async function dispatchCombinedRefreshActionInner() {
         console.error('Remote ingress refresh failed:', error);
       }
     }
+
+    // Refresh VPN data if on vpn view
+    if (currentView === 'vpn') {
+      try {
+        await vpnStatePart.dispatchAction(fetchVpnAction, null);
+      } catch (error) {
+        console.error('VPN refresh failed:', error);
+      }
+    }
   } catch (error) {
     console.error('Combined refresh failed:', error);
     // If the error looks like an auth failure (invalid JWT), force re-login

ts_web/elements/index.ts

@@ -9,4 +9,5 @@ export * from './ops-view-apitokens.js';
 export * from './ops-view-security.js';
 export * from './ops-view-certificates.js';
 export * from './ops-view-remoteingress.js';
+export * from './ops-view-vpn.js';
 export * from './shared/index.js';

ts_web/elements/ops-dashboard.ts

@@ -24,6 +24,7 @@ import { OpsViewApiTokens } from './ops-view-apitokens.js';
 import { OpsViewSecurity } from './ops-view-security.js';
 import { OpsViewCertificates } from './ops-view-certificates.js';
 import { OpsViewRemoteIngress } from './ops-view-remoteingress.js';
+import { OpsViewVpn } from './ops-view-vpn.js';
 
 @customElement('ops-dashboard')
 export class OpsDashboard extends DeesElement {
@@ -92,6 +93,11 @@ export class OpsDashboard extends DeesElement {
       iconName: 'lucide:globe',
       element: OpsViewRemoteIngress,
     },
+    {
+      name: 'VPN',
+      iconName: 'lucide:shield',
+      element: OpsViewVpn,
+    },
   ];
 
   /**

ts_web/elements/ops-view-vpn.ts

@@ -0,0 +1,330 @@
+import {
+  DeesElement,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as appstate from '../appstate.js';
+import * as interfaces from '../../dist_ts_interfaces/index.js';
+import { viewHostCss } from './shared/css.js';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-vpn': OpsViewVpn;
+  }
+}
+
+@customElement('ops-view-vpn')
+export class OpsViewVpn extends DeesElement {
+  @state()
+  accessor vpnState: appstate.IVpnState = appstate.vpnStatePart.getState()!;
+
+  constructor() {
+    super();
+    const sub = appstate.vpnStatePart.select().subscribe((newState) => {
+      this.vpnState = newState;
+    });
+    this.rxSubscriptions.push(sub);
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback();
+    await appstate.vpnStatePart.dispatchAction(appstate.fetchVpnAction, null);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .vpnContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .statusBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 10px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+
+      .statusBadge.enabled {
+        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+      }
+
+      .statusBadge.disabled {
+        background: ${cssManager.bdTheme('#fef2f2', '#450a0a')};
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+      }
+
+      .configDialog {
+        padding: 16px;
+        background: ${cssManager.bdTheme('#fffbeb', '#1c1917')};
+        border: 1px solid ${cssManager.bdTheme('#fbbf24', '#92400e')};
+        border-radius: 8px;
+        margin-bottom: 16px;
+      }
+
+      .configDialog pre {
+        display: block;
+        padding: 12px;
+        background: ${cssManager.bdTheme('#1f2937', '#111827')};
+        color: #10b981;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 12px;
+        white-space: pre-wrap;
+        word-break: break-all;
+        margin: 8px 0;
+        user-select: all;
+        max-height: 300px;
+        overflow-y: auto;
+      }
+
+      .configDialog .warning {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+        margin-top: 8px;
+      }
+
+      .tagBadge {
+        display: inline-flex;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme('#eff6ff', '#172554')};
+        color: ${cssManager.bdTheme('#1e40af', '#60a5fa')};
+        margin-right: 4px;
+      }
+
+      .serverInfo {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 12px;
+        padding: 16px;
+        background: ${cssManager.bdTheme('#f9fafb', '#111827')};
+        border-radius: 8px;
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#1f2937')};
+      }
+
+      .serverInfo .infoItem {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .serverInfo .infoLabel {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+      }
+
+      .serverInfo .infoValue {
+        font-size: 14px;
+        font-family: monospace;
+        color: ${cssManager.bdTheme('#111827', '#f9fafb')};
+      }
+    `,
+  ];
+
+  render(): TemplateResult {
+    const status = this.vpnState.status;
+    const clients = this.vpnState.clients;
+    const connectedCount = status?.connectedClients ?? 0;
+    const totalClients = clients.length;
+    const enabledClients = clients.filter(c => c.enabled).length;
+
+    const statsTiles: IStatsTile[] = [
+      {
+        id: 'totalClients',
+        title: 'Total Clients',
+        type: 'number',
+        value: totalClients,
+        icon: 'lucide:users',
+        description: 'Registered VPN clients',
+        color: '#3b82f6',
+      },
+      {
+        id: 'connectedClients',
+        title: 'Connected',
+        type: 'number',
+        value: connectedCount,
+        icon: 'lucide:link',
+        description: 'Currently connected',
+        color: '#10b981',
+      },
+      {
+        id: 'enabledClients',
+        title: 'Enabled',
+        type: 'number',
+        value: enabledClients,
+        icon: 'lucide:shieldCheck',
+        description: 'Active client registrations',
+        color: '#8b5cf6',
+      },
+      {
+        id: 'serverStatus',
+        title: 'Server',
+        type: 'text',
+        value: status?.running ? 'Running' : 'Stopped',
+        icon: 'lucide:server',
+        description: status?.running ? `${status.forwardingMode} mode` : 'VPN server not running',
+        color: status?.running ? '#10b981' : '#ef4444',
+      },
+    ];
+
+    return html`
+      <ops-sectionheading>VPN</ops-sectionheading>
+
+      ${this.vpnState.newClientConfig ? html`
+        <div class="configDialog">
+          <strong>Client created successfully!</strong>
+          <div class="warning">Copy the WireGuard config now. It contains private keys that won't be shown again.</div>
+          <pre>${this.vpnState.newClientConfig}</pre>
+          <dees-button
+            @click=${async () => {
+              if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+                await navigator.clipboard.writeText(this.vpnState.newClientConfig!);
+              }
+              const { DeesToast } = await import('@design.estate/dees-catalog');
+              DeesToast.createAndShow({ message: 'Config copied to clipboard', type: 'success', duration: 3000 });
+            }}
+          >Copy to Clipboard</dees-button>
+          <dees-button
+            @click=${() => {
+              const blob = new Blob([this.vpnState.newClientConfig!], { type: 'text/plain' });
+              const url = URL.createObjectURL(blob);
+              const a = document.createElement('a');
+              a.href = url;
+              a.download = 'wireguard.conf';
+              a.click();
+              URL.revokeObjectURL(url);
+            }}
+          >Download .conf</dees-button>
+          <dees-button
+            @click=${() => appstate.vpnStatePart.dispatchAction(appstate.clearNewClientConfigAction, null)}
+          >Dismiss</dees-button>
+        </div>
+      ` : ''}
+
+      <dees-statsgrid .statsTiles=${statsTiles}></dees-statsgrid>
+
+      ${status ? html`
+        <div class="serverInfo">
+          <div class="infoItem">
+            <span class="infoLabel">Subnet</span>
+            <span class="infoValue">${status.subnet}</span>
+          </div>
+          <div class="infoItem">
+            <span class="infoLabel">WireGuard Port</span>
+            <span class="infoValue">${status.wgListenPort}</span>
+          </div>
+          <div class="infoItem">
+            <span class="infoLabel">Forwarding Mode</span>
+            <span class="infoValue">${status.forwardingMode}</span>
+          </div>
+          ${status.serverPublicKeys ? html`
+            <div class="infoItem">
+              <span class="infoLabel">WG Public Key</span>
+              <span class="infoValue" style="font-size: 11px; word-break: break-all;">${status.serverPublicKeys.wgPublicKey}</span>
+            </div>
+          ` : ''}
+        </div>
+      ` : ''}
+
+      <dees-table
+        .heading1=${'VPN Clients'}
+        .heading2=${'Manage WireGuard and SmartVPN client registrations'}
+        .data=${clients}
+        .displayFunction=${(client: interfaces.data.IVpnClient) => ({
+          'Client ID': client.clientId,
+          'Status': client.enabled
+            ? html`<span class="statusBadge enabled">enabled</span>`
+            : html`<span class="statusBadge disabled">disabled</span>`,
+          'VPN IP': client.assignedIp || '-',
+          'Tags': client.tags?.length
+            ? html`${client.tags.map(t => html`<span class="tagBadge">${t}</span>`)}`
+            : '-',
+          'Description': client.description || '-',
+          'Created': new Date(client.createdAt).toLocaleDateString(),
+        })}
+        .dataActions=${[
+          {
+            name: 'Toggle',
+            iconName: 'lucide:power',
+            action: async (client: interfaces.data.IVpnClient) => {
+              await appstate.vpnStatePart.dispatchAction(appstate.toggleVpnClientAction, {
+                clientId: client.clientId,
+                enabled: !client.enabled,
+              });
+            },
+          },
+          {
+            name: 'Delete',
+            iconName: 'lucide:trash2',
+            action: async (client: interfaces.data.IVpnClient) => {
+              const { DeesModal } = await import('@design.estate/dees-catalog');
+              DeesModal.createAndShow({
+                heading: 'Delete VPN Client',
+                content: html`<p>Are you sure you want to delete client "${client.clientId}"?</p>`,
+                menuOptions: [
+                  { name: 'Cancel', action: async (modal: any) => modal.destroy() },
+                  {
+                    name: 'Delete',
+                    action: async (modal: any) => {
+                      await appstate.vpnStatePart.dispatchAction(appstate.deleteVpnClientAction, client.clientId);
+                      modal.destroy();
+                    },
+                  },
+                ],
+              });
+            },
+          },
+        ]}
+        .createNewItem=${async () => {
+          const { DeesModal, DeesForm, DeesInputText } = await import('@design.estate/dees-catalog');
+          DeesModal.createAndShow({
+            heading: 'Create VPN Client',
+            content: html`
+              <dees-form>
+                <dees-input-text id="clientId" .label=${'Client ID'} .key=${'clientId'} required></dees-input-text>
+                <dees-input-text id="description" .label=${'Description'} .key=${'description'}></dees-input-text>
+                <dees-input-text id="tags" .label=${'Tags (comma-separated)'} .key=${'tags'}></dees-input-text>
+              </dees-form>
+            `,
+            menuOptions: [
+              { name: 'Cancel', action: async (modal: any) => modal.destroy() },
+              {
+                name: 'Create',
+                action: async (modal: any) => {
+                  const form = modal.shadowRoot!.querySelector('dees-form') as any;
+                  const data = await form.collectFormData();
+                  const tags = data.tags ? data.tags.split(',').map((t: string) => t.trim()).filter(Boolean) : undefined;
+                  await appstate.vpnStatePart.dispatchAction(appstate.createVpnClientAction, {
+                    clientId: data.clientId,
+                    description: data.description || undefined,
+                    tags,
+                  });
+                  modal.destroy();
+                },
+              },
+            ],
+          });
+        }}
+      ></dees-table>
+    `;
+  }
+}