[FEATURE] Add real-time collaborative cursor tracking — show teammate cursor positions and selections in shared rooms

[Abhushan187]

Problem

Users in collaborative rooms cannot see where their teammates are typing or what they have selected. This creates confusion when multiple people edit simultaneously — users overwrite each other's work unknowingly, leading to merge conflicts and frustration.

---

Proposed Improvement

Add real-time cursor tracking that displays each collaborator's cursor position and text selection with a unique color and username label. The feature should:

• Sync cursor position and selection range via Firebase Realtime Database (or existing Firestore room sync)
• Render remote cursors as colored vertical bars with floating username tags
• Highlight remote selections with semi-transparent colored backgrounds
• Assign consistent colors per user (hash-based from UID)
• Hide cursors for users who are idle >30 seconds
• Work across all supported languages in Monaco Editor

---

Expected Impact

• Better user experience through visual awareness of teammate activity
• Reduced accidental overwrites and editing conflicts
• Improved accessibility for remote pair programming
• Higher engagement in collaborative coding sessions

---

Possible Implementation

• Extend useRoom.js hook to publish local cursor position (cursorLine, cursorColumn, selectionStart, selectionEnd) to Firestore rooms/{roomId}/cursors/{userId}
• Subscribe to peer cursor documents and render via Monaco Editor deltaDecorations API
• Create RemoteCursor component for username tooltip rendering
• Add cursorColors utility (consistent color mapping from UID hash)
• Debounce cursor updates at 50ms to reduce Firestore write volume
• Clean up cursor documents on user disconnect/room exit

---

I'm GSSoC'26 contributor, Please assign this task to me!

[aayushprsingh]

Hi, I am a GSSoC 2026 contributor and would like to work on this. I'm quite comfortable with this project. Please assign it to me if it's available!

[Abhushan187]

Problem

Users in collaborative rooms cannot see where their teammates are typing or what they have selected. This creates confusion when multiple people edit simultaneously — users overwrite each other's work unknowingly, leading to merge conflicts and frustration.

---

Proposed Improvement

Add real-time cursor tracking that displays each collaborator's cursor position and text selection with a unique color and username label. The feature should:

• Sync cursor position and selection range via Firebase Realtime Database (or existing Firestore room sync)
• Render remote cursors as colored vertical bars with floating username tags
• Highlight remote selections with semi-transparent colored backgrounds
• Assign consistent colors per user (hash-based from UID)
• Hide cursors for users who are idle >30 seconds
• Work across all supported languages in Monaco Editor

---

Expected Impact

• Better user experience through visual awareness of teammate activity
• Reduced accidental overwrites and editing conflicts
• Improved accessibility for remote pair programming
• Higher engagement in collaborative coding sessions

---

Possible Implementation

• Extend useRoom.js hook to publish local cursor position (cursorLine, cursorColumn, selectionStart, selectionEnd) to Firestore rooms/{roomId}/cursors/{userId}
• Subscribe to peer cursor documents and render via Monaco Editor deltaDecorations API
• Create RemoteCursor component for username tooltip rendering
• Add cursorColors utility (consistent color mapping from UID hash)
• Debounce cursor updates at 50ms to reduce Firestore write volume
• Clean up cursor documents on user disconnect/room exit

---

I'm GSSoC'26 contributor, Please assign this task to me!

/assign