feat: show real HF username and avatar for connected users

- Fetch /api/auth/status on mount to get HF user info (name, avatar)
- Replace random names with actual HF fullName and profile picture
- Update collaboration cursor to display avatar next to username
- Update top bar Chip with avatar component
- Sync awareness when user data arrives after initial render
- Use deterministic color from username hash instead of random

Made-with: Cursor

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import { UndoManager } from "yjs";
 import type * as Y from "yjs";
 import { ThemeProvider } from "@mui/material/styles";
 import {
+  Avatar,
   Box,
   Chip,
   IconButton,
@@ -44,20 +45,41 @@ const COLORS = [
   "#70CFF8", "#94FADB", "#B9F18D", "#C4B5FD",
 ];
 
-function randomColor() {
-  return COLORS[Math.floor(Math.random() * COLORS.length)];
+function colorFromName(name: string): string {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) | 0;
+  return COLORS[Math.abs(hash) % COLORS.length];
 }
 
-function randomName() {
+function randomFallbackUser(): CollabUser {
   const names = ["Alice", "Bob", "Carol", "Dave", "Eve", "Frank", "Grace", "Heidi"];
-  return names[Math.floor(Math.random() * names.length)];
+  const name = names[Math.floor(Math.random() * names.length)];
+  return { name, color: colorFromName(name) };
+}
+
+export interface CollabUser {
+  name: string;
+  color: string;
+  avatarUrl?: string;
 }
 
 export default function App() {
-  const [user] = useState(() => ({
-    name: randomName(),
-    color: randomColor(),
-  }));
+  const [user, setUser] = useState<CollabUser>(randomFallbackUser);
+
+  useEffect(() => {
+    fetch("/api/auth/status", { credentials: "include" })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.authenticated && data.user) {
+          setUser({
+            name: data.user.fullName || data.user.name,
+            color: colorFromName(data.user.name),
+            avatarUrl: data.user.avatarUrl || undefined,
+          });
+        }
+      })
+      .catch(() => {});
+  }, []);
 
   const docName = "default";
 
@@ -250,6 +272,11 @@ export default function App() {
           </IconButton>
         </Tooltip>
         <Chip
+          avatar={
+            user.avatarUrl
+              ? <Avatar src={user.avatarUrl} sx={{ width: 18, height: 18 }} />
+              : undefined
+          }
           label={user.name}
           size="small"
           sx={{

frontend/src/components/CommentsSidebar.tsx

@@ -16,7 +16,7 @@ import type { CommentStore, CommentData } from "../editor/comments";
 interface CommentsSidebarProps {
   editor: Editor | null;
   commentStore: CommentStore | null;
-  user: { name: string; color: string };
+  user: { name: string; color: string; avatarUrl?: string };
   editorContainer: HTMLElement | null;
 }
 

frontend/src/editor/Editor.tsx

@@ -41,7 +41,7 @@ const lowlight = createLowlight(all);
 
 interface EditorProps {
   docName: string;
-  user: { name: string; color: string };
+  user: { name: string; color: string; avatarUrl?: string };
   editorRef: MutableRefObject<TiptapEditor | null>;
   onCommentStoreReady: (store: CommentStore) => void;
   onFrontmatterStoreReady: (store: FrontmatterStore) => void;
@@ -239,6 +239,11 @@ export function Editor({
     };
   }, [editor, provider, ydoc, frontmatterStore]);
 
+  useEffect(() => {
+    if (!editor) return;
+    (editor.commands as any).updateUser(user);
+  }, [editor, user]);
+
   useEffect(() => {
     if (!editor) return;
     if (!editor.storage.citation) {

frontend/src/editor/extensions/collaboration-cursor-v3.ts

@@ -1,10 +1,16 @@
 import { Extension } from "@tiptap/core";
 import { yCursorPlugin, defaultCursorBuilder, defaultSelectionBuilder } from "@tiptap/y-tiptap";
 
+export interface CursorUser {
+  name: string;
+  color: string;
+  avatarUrl?: string;
+}
+
 export interface CollaborationCursorOptions {
   provider: any;
-  user: { name: string; color: string };
-  render?: (user: { name: string; color: string }) => HTMLElement;
+  user: CursorUser;
+  render?: (user: CursorUser) => HTMLElement;
   selectionRender?: typeof defaultSelectionBuilder;
 }
 
@@ -22,16 +28,24 @@ export const CollaborationCursorV3 = Extension.create<CollaborationCursorOptions
   addOptions() {
     return {
       provider: null,
-      user: { name: "Anonymous", color: "#aaaaaa" },
-      render: (user: { name: string; color: string }) => {
+      user: { name: "Anonymous", color: "#aaaaaa" } as CursorUser,
+      render: (user: CursorUser) => {
         const cursor = document.createElement("span");
         cursor.classList.add("collaboration-cursor__caret");
         cursor.setAttribute("style", `border-color: ${user.color}`);
         const label = document.createElement("div");
         label.classList.add("collaboration-cursor__label");
         label.setAttribute("style", `background-color: ${user.color}`);
-        label.insertBefore(document.createTextNode(user.name), null);
-        cursor.insertBefore(label, null);
+
+        if (user.avatarUrl) {
+          const avatar = document.createElement("img");
+          avatar.src = user.avatarUrl;
+          avatar.classList.add("collaboration-cursor__avatar");
+          label.appendChild(avatar);
+        }
+
+        label.appendChild(document.createTextNode(user.name));
+        cursor.appendChild(label);
         return cursor;
       },
       selectionRender: defaultSelectionBuilder,

frontend/src/styles/editing.css

@@ -114,6 +114,9 @@
   position: absolute;
   top: -1.4em;
   left: -1px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
   font-size: 0.65rem;
   font-weight: 600;
@@ -125,6 +128,14 @@
   pointer-events: none;
 }
 
+.collaboration-cursor__avatar {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
 /* Placeholder */
 .tiptap p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);