AddThisFeature

Presence Indicators

Show who else is on this screen right now.

involved Collaboration

What it adds

Live avatars of the other users currently viewing or editing the same record.

What your agent is told to do

5
  1. 1

    Have each client heartbeat its presence on a short interval and treat presence as expiring state, not as a flag toggled on connect and off on disconnect.

  2. 2

    Expire an entry after a couple of missed heartbeats. Crashed tabs, killed apps, and sleeping laptops never send a disconnect.

  3. 3

    Collapse a user's multiple tabs and devices into one avatar. Three of the same face means the plumbing is leaking, not that three people are here.

  4. 4

    Scope presence to the record and the workspace, and check the viewer's permission before revealing that someone is present.

  5. 5

    Do NOT present presence as a lock. It tells the user someone else is here; it does not prevent a conflicting edit, and implying otherwise causes lost work.

Edge cases it handles

6
  • Tabs in the background should throttle or stop heartbeating, so an idle tab does not report an attentive user.
  • Presence is a privacy surface. Some users and some plans must be able to browse without broadcasting it, and that setting must be honoured.
  • When the realtime transport is down, hide the indicator entirely rather than showing a stale roster that says nobody is here.
  • Cap the visible avatars and roll the rest into a count — a busy record can have dozens.
  • Do not leak identity beyond what the viewer can already see; a name or avatar is still an information disclosure.
  • Viewing and editing are different signals. If you show both, keep them visually distinct.

Definition of done

8
  • Presence is heartbeat-driven and expires without an explicit disconnect.
  • Ghost entries clear within seconds of a crashed or sleeping client.
  • Multiple tabs and devices for one user render as a single avatar.
  • Presence is scoped by record, workspace, and viewer permission.
  • Users can opt out of broadcasting their presence.
  • The indicator hides when realtime is unavailable rather than showing stale data.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.