@serve.zone/dcrouter 11.21.4 → 11.22.0

package/ts/opsserver/handlers/vpn.handler.ts

@@ -72,6 +72,31 @@ export class VpnHandler {
       ),
     );
 
+    // Get currently connected VPN clients
+    viewRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetVpnConnectedClients>(
+        'getVpnConnectedClients',
+        async (dataArg, toolsArg) => {
+          const manager = this.opsServerRef.dcRouterRef.vpnManager;
+          if (!manager) {
+            return { connectedClients: [] };
+          }
+
+          const connected = await manager.getConnectedClients();
+          return {
+            connectedClients: connected.map((c) => ({
+              clientId: c.registeredClientId || c.clientId,
+              assignedIp: c.assignedIp,
+              connectedSince: c.connectedSince,
+              bytesSent: c.bytesSent,
+              bytesReceived: c.bytesReceived,
+              transport: c.transportType,
+            })),
+          };
+        },
+      ),
+    );
+
     // ---- Write endpoints (adminRouter — admin identity required via middleware) ----
 
     // Create a new VPN client
@@ -112,6 +137,29 @@ export class VpnHandler {
       ),
     );
 
+    // Update a VPN client's metadata
+    adminRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_UpdateVpnClient>(
+        'updateVpnClient',
+        async (dataArg, toolsArg) => {
+          const manager = this.opsServerRef.dcRouterRef.vpnManager;
+          if (!manager) {
+            return { success: false, message: 'VPN not configured' };
+          }
+
+          try {
+            await manager.updateClient(dataArg.clientId, {
+              description: dataArg.description,
+              serverDefinedClientTags: dataArg.serverDefinedClientTags,
+            });
+            return { success: true };
+          } 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>(

package/ts/vpn/classes.vpn-manager.ts

@@ -275,6 +275,22 @@ export class VpnManager {
     this.config.onClientChanged?.();
   }
 
+  /**
+   * Update a client's metadata (description, tags) without rotating keys.
+   */
+  public async updateClient(clientId: string, update: {
+    description?: string;
+    serverDefinedClientTags?: string[];
+  }): Promise<void> {
+    const client = this.clients.get(clientId);
+    if (!client) throw new Error(`Client not found: ${clientId}`);
+    if (update.description !== undefined) client.description = update.description;
+    if (update.serverDefinedClientTags !== undefined) client.serverDefinedClientTags = update.serverDefinedClientTags;
+    client.updatedAt = Date.now();
+    await this.persistClient(client);
+    this.config.onClientChanged?.();
+  }
+
   /**
    * Rotate a client's keys. Returns the new config bundle.
    */

package/ts_web/00_commitinfo_data.ts

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

package/ts_web/appstate.ts

@@ -911,6 +911,7 @@ export const toggleRemoteIngressAction = remoteIngressStatePart.createAction<{
 
 export interface IVpnState {
   clients: interfaces.data.IVpnClient[];
+  connectedClients: interfaces.data.IVpnConnectedClient[];
   status: interfaces.data.IVpnServerStatus | null;
   isLoading: boolean;
   error: string | null;
@@ -923,6 +924,7 @@ export const vpnStatePart = await appState.getStatePart<IVpnState>(
   'vpn',
   {
     clients: [],
+    connectedClients: [],
     status: null,
     isLoading: false,
     error: null,
@@ -950,14 +952,20 @@ export const fetchVpnAction = vpnStatePart.createAction(async (statePartArg): Pr
       interfaces.requests.IReq_GetVpnStatus
     >('/typedrequest', 'getVpnStatus');
 
-    const [clientsResponse, statusResponse] = await Promise.all([
+    const connectedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_GetVpnConnectedClients
+    >('/typedrequest', 'getVpnConnectedClients');
+
+    const [clientsResponse, statusResponse, connectedResponse] = await Promise.all([
       clientsRequest.fire({ identity: context.identity }),
       statusRequest.fire({ identity: context.identity }),
+      connectedRequest.fire({ identity: context.identity }),
     ]);
 
     return {
       ...currentState,
       clients: clientsResponse.clients,
+      connectedClients: connectedResponse.connectedClients,
       status: statusResponse.status,
       isLoading: false,
       error: null,
@@ -1054,6 +1062,39 @@ export const toggleVpnClientAction = vpnStatePart.createAction<{
   }
 });
 
+export const updateVpnClientAction = vpnStatePart.createAction<{
+  clientId: string;
+  description?: string;
+  serverDefinedClientTags?: 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_UpdateVpnClient
+    >('/typedrequest', 'updateVpnClient');
+
+    const response = await request.fire({
+      identity: context.identity!,
+      clientId: dataArg.clientId,
+      description: dataArg.description,
+      serverDefinedClientTags: dataArg.serverDefinedClientTags,
+    });
+
+    if (!response.success) {
+      return { ...currentState, error: response.message || 'Failed to update client' };
+    }
+
+    return await actionContext!.dispatch(fetchVpnAction, null);
+  } catch (error: unknown) {
+    return {
+      ...currentState,
+      error: error instanceof Error ? error.message : 'Failed to update VPN client',
+    };
+  }
+});
+
 export const clearNewClientConfigAction = vpnStatePart.createAction(
   async (statePartArg): Promise<IVpnState> => {
     return { ...statePartArg.getState()!, newClientConfig: null };

package/ts_web/elements/ops-view-vpn.ts

@@ -141,10 +141,16 @@ export class OpsViewVpn extends DeesElement {
     `,
   ];
 
+  /** Look up connected client info by clientId */
+  private getConnectedInfo(clientId: string): interfaces.data.IVpnConnectedClient | undefined {
+    return this.vpnState.connectedClients?.find(c => c.clientId === clientId);
+  }
+
   render(): TemplateResult {
     const status = this.vpnState.status;
     const clients = this.vpnState.clients;
-    const connectedCount = status?.connectedClients ?? 0;
+    const connectedClients = this.vpnState.connectedClients || [];
+    const connectedCount = connectedClients.length;
     const totalClients = clients.length;
     const enabledClients = clients.filter(c => c.enabled).length;
 
@@ -270,18 +276,28 @@ export class OpsViewVpn extends DeesElement {
         .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.serverDefinedClientTags?.length
-            ? html`${client.serverDefinedClientTags.map(t => html`<span class="tagBadge">${t}</span>`)}`
-            : '-',
-          'Description': client.description || '-',
-          'Created': new Date(client.createdAt).toLocaleDateString(),
-        })}
+        .displayFunction=${(client: interfaces.data.IVpnClient) => {
+          const conn = this.getConnectedInfo(client.clientId);
+          let statusHtml;
+          if (!client.enabled) {
+            statusHtml = html`<span class="statusBadge disabled">disabled</span>`;
+          } else if (conn) {
+            const since = new Date(conn.connectedSince).toLocaleString();
+            statusHtml = html`<span class="statusBadge enabled" title="Since ${since}">connected</span>`;
+          } else {
+            statusHtml = html`<span class="statusBadge enabled" style="background: ${cssManager.bdTheme('#eff6ff', '#172554')}; color: ${cssManager.bdTheme('#1e40af', '#60a5fa')};">offline</span>`;
+          }
+          return {
+            'Client ID': client.clientId,
+            'Status': statusHtml,
+            'VPN IP': client.assignedIp || '-',
+            'Tags': client.serverDefinedClientTags?.length
+              ? html`${client.serverDefinedClientTags.map(t => html`<span class="tagBadge">${t}</span>`)}`
+              : '-',
+            'Description': client.description || '-',
+            'Created': new Date(client.createdAt).toLocaleDateString(),
+          };
+        }}
         .dataActions=${[
           {
             name: 'Create Client',
@@ -328,14 +344,91 @@ export class OpsViewVpn extends DeesElement {
             },
           },
           {
-            name: 'Toggle',
+            name: 'Detail',
+            iconName: 'lucide:info',
+            type: ['doubleClick'],
+            actionFunc: async (actionData: any) => {
+              const client = actionData.item as interfaces.data.IVpnClient;
+              const conn = this.getConnectedInfo(client.clientId);
+              const { DeesModal } = await import('@design.estate/dees-catalog');
+
+              // Fetch telemetry on-demand
+              let telemetryHtml = html`<p style="color: #9ca3af;">Loading telemetry...</p>`;
+              try {
+                const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+                  interfaces.requests.IReq_GetVpnClientTelemetry
+                >('/typedrequest', 'getVpnClientTelemetry');
+                const response = await request.fire({
+                  identity: appstate.loginStatePart.getState()!.identity!,
+                  clientId: client.clientId,
+                });
+                const t = response.telemetry;
+                if (t) {
+                  const formatBytes = (b: number) => b > 1048576 ? `${(b / 1048576).toFixed(1)} MB` : b > 1024 ? `${(b / 1024).toFixed(1)} KB` : `${b} B`;
+                  telemetryHtml = html`
+                    <div class="serverInfo" style="margin-top: 12px;">
+                      <div class="infoItem"><span class="infoLabel">Bytes Sent</span><span class="infoValue">${formatBytes(t.bytesSent)}</span></div>
+                      <div class="infoItem"><span class="infoLabel">Bytes Received</span><span class="infoValue">${formatBytes(t.bytesReceived)}</span></div>
+                      <div class="infoItem"><span class="infoLabel">Keepalives</span><span class="infoValue">${t.keepalivesReceived}</span></div>
+                      <div class="infoItem"><span class="infoLabel">Last Keepalive</span><span class="infoValue">${t.lastKeepaliveAt ? new Date(t.lastKeepaliveAt).toLocaleString() : '-'}</span></div>
+                      <div class="infoItem"><span class="infoLabel">Packets Dropped</span><span class="infoValue">${t.packetsDropped}</span></div>
+                    </div>
+                  `;
+                } else {
+                  telemetryHtml = html`<p style="color: #9ca3af;">No telemetry available (client not connected)</p>`;
+                }
+              } catch {
+                telemetryHtml = html`<p style="color: #9ca3af;">Telemetry unavailable</p>`;
+              }
+
+              DeesModal.createAndShow({
+                heading: `Client: ${client.clientId}`,
+                content: html`
+                  <div class="serverInfo">
+                    <div class="infoItem"><span class="infoLabel">Client ID</span><span class="infoValue">${client.clientId}</span></div>
+                    <div class="infoItem"><span class="infoLabel">VPN IP</span><span class="infoValue">${client.assignedIp || '-'}</span></div>
+                    <div class="infoItem"><span class="infoLabel">Status</span><span class="infoValue">${!client.enabled ? 'Disabled' : conn ? 'Connected' : 'Offline'}</span></div>
+                    ${conn ? html`
+                      <div class="infoItem"><span class="infoLabel">Connected Since</span><span class="infoValue">${new Date(conn.connectedSince).toLocaleString()}</span></div>
+                      <div class="infoItem"><span class="infoLabel">Transport</span><span class="infoValue">${conn.transport}</span></div>
+                    ` : ''}
+                    <div class="infoItem"><span class="infoLabel">Description</span><span class="infoValue">${client.description || '-'}</span></div>
+                    <div class="infoItem"><span class="infoLabel">Tags</span><span class="infoValue">${client.serverDefinedClientTags?.join(', ') || '-'}</span></div>
+                    <div class="infoItem"><span class="infoLabel">Created</span><span class="infoValue">${new Date(client.createdAt).toLocaleString()}</span></div>
+                    <div class="infoItem"><span class="infoLabel">Updated</span><span class="infoValue">${new Date(client.updatedAt).toLocaleString()}</span></div>
+                  </div>
+                  <h3 style="margin: 16px 0 4px; font-size: 14px;">Telemetry</h3>
+                  ${telemetryHtml}
+                `,
+                menuOptions: [
+                  { name: 'Close', iconName: 'lucide:x', action: async (m: any) => await m.destroy() },
+                ],
+              });
+            },
+          },
+          {
+            name: 'Enable',
+            iconName: 'lucide:power',
+            type: ['contextmenu', 'inRow'],
+            actionRelevancyCheckFunc: (actionData: any) => !actionData.item.enabled,
+            actionFunc: async (actionData: any) => {
+              const client = actionData.item as interfaces.data.IVpnClient;
+              await appstate.vpnStatePart.dispatchAction(appstate.toggleVpnClientAction, {
+                clientId: client.clientId,
+                enabled: true,
+              });
+            },
+          },
+          {
+            name: 'Disable',
             iconName: 'lucide:power',
             type: ['contextmenu', 'inRow'],
+            actionRelevancyCheckFunc: (actionData: any) => actionData.item.enabled,
             actionFunc: async (actionData: any) => {
               const client = actionData.item as interfaces.data.IVpnClient;
               await appstate.vpnStatePart.dispatchAction(appstate.toggleVpnClientAction, {
                 clientId: client.clientId,
-                enabled: !client.enabled,
+                enabled: false,
               });
             },
           },
@@ -449,6 +542,47 @@ export class OpsViewVpn extends DeesElement {
               });
             },
           },
+          {
+            name: 'Edit',
+            iconName: 'lucide:pencil',
+            type: ['contextmenu', 'inRow'],
+            actionFunc: async (actionData: any) => {
+              const client = actionData.item as interfaces.data.IVpnClient;
+              const { DeesModal } = await import('@design.estate/dees-catalog');
+              const currentDescription = client.description ?? '';
+              const currentTags = client.serverDefinedClientTags?.join(', ') ?? '';
+              DeesModal.createAndShow({
+                heading: `Edit: ${client.clientId}`,
+                content: html`
+                  <dees-form>
+                    <dees-input-text .key=${'description'} .label=${'Description'} .value=${currentDescription}></dees-input-text>
+                    <dees-input-text .key=${'tags'} .label=${'Server-Defined Tags (comma-separated)'} .value=${currentTags}></dees-input-text>
+                  </dees-form>
+                `,
+                menuOptions: [
+                  { name: 'Cancel', iconName: 'lucide:x', action: async (modalArg: any) => await modalArg.destroy() },
+                  {
+                    name: 'Save',
+                    iconName: 'lucide:check',
+                    action: async (modalArg: any) => {
+                      const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
+                      if (!form) return;
+                      const data = await form.collectFormData();
+                      const serverDefinedClientTags = data.tags
+                        ? data.tags.split(',').map((t: string) => t.trim()).filter(Boolean)
+                        : [];
+                      await appstate.vpnStatePart.dispatchAction(appstate.updateVpnClientAction, {
+                        clientId: client.clientId,
+                        description: data.description || undefined,
+                        serverDefinedClientTags,
+                      });
+                      await modalArg.destroy();
+                    },
+                  },
+                ],
+              });
+            },
+          },
           {
             name: 'Rotate Keys',
             iconName: 'lucide:rotate-cw',

package/ts_web/readme.md

@@ -53,7 +53,8 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 ### 🔐 VPN Management
 - VPN server status with forwarding mode, subnet, and WireGuard port
 - Client registration table with create, enable/disable, and delete actions
-- WireGuard config download and clipboard copy on client creation
+- WireGuard config download, clipboard copy, and **QR code display** on client creation
+- QR code export for existing clients — scan with WireGuard mobile app (iOS/Android)
 - Per-client telemetry (bytes sent/received, keepalives)
 - Server public key display for manual client configuration