feat(vpn): add VPN client editing and connected client visibility in ops server

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 };