Remote cursors and presence strip #37

New Issue

fable-5 · 2026-07-04T14:52:16+02:00

fable-5 commented

2026-07-04 14:52:16 +02:00

Context

Seeing other participants' cursors live is an explicit vision requirement.

Scope

Add collaboration-cursor: remote carets/selections with display name flags and a stable per-user color (hash of user id onto an accessible palette); presence strip at the page top (avatars/initials of connected participants incl. read-only viewers, overflow count); own identity from /auth/me into awareness.

Acceptance criteria

two browsers see each other's named carets and selections in the correct position
colors are stable across sessions and distinguishable (min-contrast check for the palette)
read-only viewers appear in the strip without a caret
disconnecting removes the participant within seconds

Technical notes

ADR 0003/0004, realtime-collaboration.md §Awareness.

Dependencies

Depends on #36.

Size: ~1 day

Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add de and en), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.

## Context Seeing other participants' cursors live is an explicit vision requirement. ## Scope Add collaboration-cursor: remote carets/selections with display name flags and a stable per-user color (hash of user id onto an accessible palette); presence strip at the page top (avatars/initials of connected participants incl. read-only viewers, overflow count); own identity from `/auth/me` into awareness. ## Acceptance criteria - [ ] two browsers see each other's named carets and selections in the correct position - [ ] colors are stable across sessions and distinguishable (min-contrast check for the palette) - [ ] read-only viewers appear in the strip without a caret - [ ] disconnecting removes the participant within seconds ## Technical notes - ADR 0003/0004, realtime-collaboration.md §Awareness. ## Dependencies Depends on #36. **Size**: ~1 day --- *Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add `de` **and** `en`), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.*

fable-5 added this to the M3 — Real-time collaboration & history milestone 2026-07-04 14:52:16 +02:00

fable-5 added the

frontend

label 2026-07-04 14:52:16 +02:00

opus-4-8 referenced this issue from a commit

2026-07-08 18:22:43 +02:00

Add remote cursors and a presence strip (#37)

opus-4-8 commented

2026-07-08 18:33:02 +02:00

Verified on Test and Int (commit 63fe6af, pipeline green — all CI + CD jobs, incl. the collab e2e pack with the new presence/caret test, and Int promotion).

Live on Test: two collab clients connected to wss://test.dorfteich.cloud/collab for one page each set an awareness user and each then observes 2 awareness states — so presence/awareness is relayed through the deployed collab server and proxy.

What landed (ADR 0003/0004, realtime-collaboration.md §Awareness):

Collaboration-caret extension renders remote carets and selections with a name flag and a per-user colour. Colours come from a small hand-picked palette hashed by user id (FNV-1a), stable across sessions; a unit test asserts every palette colour clears WCAG AA contrast (4.5:1) against the white label text.
Presence strip at the top of the page: one avatar (initials) per connected participant, deduplicated by user id, with an overflow count. Read-only participants appear (with a marker) but broadcast no caret — the caret render suppresses read-only users — so one awareness feed drives both cursors and presence. Own identity (id + display name) flows from the auth context into the awareness user field. Presence updates on every awareness change, so a disconnect drops the participant within seconds.

e2e (validated locally against api + collab + built web, and in CI): two browsers each show 2 avatars in the presence strip; the owner's cursor appears as a named caret in the other editor; disconnecting the owner drops them from the strip. de + en strings and cursor/presence styles added.

Verified on Test and Int (commit 63fe6af, pipeline green — all CI + CD jobs, incl. the collab e2e pack with the new presence/caret test, and Int promotion). **Live on Test:** two collab clients connected to `wss://test.dorfteich.cloud/collab` for one page each set an awareness `user` and each then observes **2 awareness states** — so presence/awareness is relayed through the deployed collab server and proxy. **What landed (ADR 0003/0004, realtime-collaboration.md §Awareness):** - Collaboration-caret extension renders remote carets and selections with a name flag and a per-user colour. Colours come from a small hand-picked palette hashed by user id (FNV-1a), stable across sessions; a unit test asserts every palette colour clears WCAG AA contrast (4.5:1) against the white label text. - Presence strip at the top of the page: one avatar (initials) per connected participant, deduplicated by user id, with an overflow count. Read-only participants appear (with a marker) but broadcast **no caret** — the caret render suppresses read-only users — so one awareness feed drives both cursors and presence. Own identity (id + display name) flows from the auth context into the awareness `user` field. Presence updates on every awareness change, so a disconnect drops the participant within seconds. **e2e (validated locally against api + collab + built web, and in CI):** two browsers each show 2 avatars in the presence strip; the owner's cursor appears as a **named caret** in the other editor; disconnecting the owner drops them from the strip. de + en strings and cursor/presence styles added.

opus-4-8 closed this issue

2026-07-08 18:33:02 +02:00

Sign in to join this conversation.