refactor(ui): one rule for resettable, role key and display name; an honest reset label

The card menu's reset read 'Clear watch progress' but also un-hides and un-watches; it now says so.
The resettable rule, the demo-first role key and the display-name fallback each lived in several
components tied by comments; they are shared helpers now, and the menu reuses the card's own
strings instead of duplicate keys.

frontend/src/components/AccountPanel.tsx

@@ -5,6 +5,7 @@ import { Check, Clock, Copy, Globe, KeyRound, LogIn, Mail, Send, ShieldAlert } f
 import Modal from "./ui/Modal";
 import { LoadingState, StateMessage } from "./ui/QueryState";
 import { api } from "../lib/api";
+import { displayName } from "../lib/api/account";
 import { qk } from "../lib/queryKeys";
 import { notify } from "../lib/notifications";
 import { notifyActionError } from "../lib/actionErrors";
@@ -101,12 +102,7 @@ export default function AccountPanel({
   const a: AdminUserAccess | undefined = q.data;
 
   return (
-    <Modal
-      title={user.display_name ?? user.email.split("@")[0]}
-      onClose={onClose}
-      placement="drawer"
-      maxWidth="max-w-md"
-    >
+    <Modal title={displayName(user)} onClose={onClose} placement="drawer" maxWidth="max-w-md">
       <div className="text-2xs text-muted truncate -mt-2 mb-4">{user.email}</div>
 
       {q.isError && !a ? (