I tried this approach for a service awhile back, and the biggest hurdle was educating the users. Even determining what to call it was a huge challenge, as it’s clearly not a ‘username’.
In what way would the user need to be educated? Social products like IRC, Twitter, and Reddit have accustomed users to seeing opaque, often-nonsensical strings next to every action taken by every user, and the only difference here is that a given user hasn't had the opportunity to select their own opaque and nonsensical string to associate with their actions. They wouldn't even need to remember this string to log in, because sites use email or third-party login services for that (and even if they did need to know their own username to log in, their browser would remember it for them).
New wireframes don't need to be made, because this paradigm already exists in a roundabout way. For many websites that I have signed up for, any attempt to register an already-taken username will present the user with multiple suggested alternative usernames. It's been decades since I signed up for Gmail, but I'm pretty sure that on the sign-up screen you would enter your name, "John Smith", and then your desired email, "johnsmith@gmail", and then when that failed you would be given a list like "john_smith@gmail", "smithj@gmail", "johnsmith2@gmail", etc.
This is the same UI flow as the above, except that it's not based on anything that the user has already entered and it doesn't provide any way for the user to override the suggestions, which actually makes it simpler than the existing flow.
I tried this approach for a service awhile back, and the biggest hurdle was educating the users. Even determining what to call it was a huge challenge, as it’s clearly not a ‘username’.