feat(editor): show connected collaborators in the top bar

The collab cursors already render inline next to each peer's
selection, but if no one's actively editing right now you have
no way to see who else is in the room. Surface that in the top
bar as an overlapping row of small avatars (24px circles, -6px
overlap, max 4 visible + "+N" badge for the tail), placed just
before the SyncIndicator.

Data source: the same Y.js awareness states that CollaborationC
ursorV3 already populates with \`{ name, color, avatarUrl }\`
for every client. We listen to awareness "change" events and
re-derive the list on each tick, excluding our own clientID so
the user doesn't show up to themselves (they already see their
own chip on the far right).

Implementation notes:
- Border color of each avatar mirrors the user's collab color
(same hue as their cursor caret in the doc) so it's obvious
at a glance which avatar maps to which inline cursor.
- Fallback to a colored initial when avatarUrl is missing
(Anonymous sessions before HF OAuth resolves).
- Sort by clientId, not by name or last-seen, so avatars don't
reshuffle on every keystroke when peers move their cursors.
- Same "wait for providerRef.current" bootstrap as the
SyncIndicator fix (since the provider is created lazily by
<Editor> after this component mounts) - a useEffect with
[providerRef] alone wouldn't re-fire.
- Hover lifts the avatar 1px + scales 8% so you can tell it's
hoverable, and the tooltip shows the user's full display name.
- "+N" overflow badge tooltips the comma-separated list of the
hidden users.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/ConnectedUsers.tsx

@@ -0,0 +1,134 @@
+// ---------------------------------------------------------------------------
+// ConnectedUsers
+//
+// Tiny presence indicator for the editor top bar - shows the avatars of
+// every OTHER user currently editing the document, overlapping pill
+// style. The local user isn't included (they already see their own
+// chip on the far right).
+//
+// Data source: the Hocuspocus provider's Y.js awareness, populated by
+// CollaborationCursorV3 with `{ name, color, avatarUrl }` per client.
+// We re-read on every awareness "change" event so joins/leaves /
+// rename flips update within a tick.
+//
+// The provider is created lazily by <Editor> and assigned to
+// providerRef AFTER this component mounts, so we use the same
+// "poll until ref populates, then attach listener" pattern as
+// SyncIndicator (which had the exact same latent bug). Without that,
+// the effect would early-return on the first run and never re-fire.
+// ---------------------------------------------------------------------------
+
+import { useEffect, useState } from "react";
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import { Tooltip } from "./Tooltip";
+
+interface AwarenessUser {
+  clientId: number;
+  name: string;
+  color: string;
+  avatarUrl?: string;
+}
+
+interface Props {
+  providerRef: { current: HocuspocusProvider | null };
+}
+
+/** Max avatars shown inline before collapsing the tail into a "+N" badge. */
+const MAX_VISIBLE = 4;
+
+export function ConnectedUsers({ providerRef }: Props) {
+  const [users, setUsers] = useState<AwarenessUser[]>([]);
+
+  useEffect(() => {
+    let cleanup: (() => void) | null = null;
+    let pollId: ReturnType<typeof setInterval> | null = null;
+
+    const attach = (provider: HocuspocusProvider) => {
+      const awareness = (provider as any).awareness;
+      if (!awareness) return () => {};
+
+      const sync = () => {
+        const localClientId = awareness.clientID;
+        const arr: AwarenessUser[] = [];
+        awareness.getStates().forEach((state: any, clientId: number) => {
+          if (clientId === localClientId) return;
+          const user = state?.user;
+          if (!user || !user.name) return;
+          arr.push({
+            clientId,
+            name: String(user.name),
+            color: String(user.color || "#888"),
+            avatarUrl: user.avatarUrl ? String(user.avatarUrl) : undefined,
+          });
+        });
+        // Stable order: by clientId so the avatars don't dance around
+        // every time someone moves their cursor and emits an update.
+        arr.sort((a, b) => a.clientId - b.clientId);
+        setUsers(arr);
+      };
+
+      sync();
+      awareness.on("change", sync);
+      return () => awareness.off("change", sync);
+    };
+
+    if (providerRef.current) {
+      cleanup = attach(providerRef.current);
+    } else {
+      pollId = setInterval(() => {
+        const p = providerRef.current;
+        if (!p) return;
+        if (pollId) {
+          clearInterval(pollId);
+          pollId = null;
+        }
+        cleanup = attach(p);
+      }, 100);
+    }
+
+    return () => {
+      if (pollId) clearInterval(pollId);
+      if (cleanup) cleanup();
+    };
+  }, [providerRef]);
+
+  if (users.length === 0) return null;
+
+  const visible = users.slice(0, MAX_VISIBLE);
+  const overflow = users.length - visible.length;
+  const totalLabel = `${users.length} other ${users.length === 1 ? "user" : "users"} editing`;
+
+  return (
+    <div className="connected-users" aria-label={totalLabel}>
+      {visible.map((u) => (
+        <Tooltip key={u.clientId} title={u.name}>
+          <span
+            className="connected-users__avatar"
+            style={{ borderColor: u.color }}
+          >
+            {u.avatarUrl ? (
+              <img src={u.avatarUrl} alt="" referrerPolicy="no-referrer" />
+            ) : (
+              <span
+                className="connected-users__initials"
+                style={{ background: u.color }}
+              >
+                {u.name.slice(0, 1).toUpperCase()}
+              </span>
+            )}
+          </span>
+        </Tooltip>
+      ))}
+      {overflow > 0 && (
+        <Tooltip
+          title={users
+            .slice(MAX_VISIBLE)
+            .map((u) => u.name)
+            .join(", ")}
+        >
+          <span className="connected-users__more">+{overflow}</span>
+        </Tooltip>
+      )}
+    </div>
+  );
+}

frontend/src/components/TopBar.tsx

@@ -18,6 +18,7 @@ import {
 } from "lucide-react";
 import { Tooltip } from "./Tooltip";
 import { SyncIndicator } from "./SyncIndicator";
+import { ConnectedUsers } from "./ConnectedUsers";
 import type { CollabUser } from "../utils/user";
 
 interface TopBarProps {
@@ -258,6 +259,7 @@ export function TopBar({
           <Upload size={18} />
         </button>
       </Tooltip>
+      <ConnectedUsers providerRef={providerRef} />
       <SyncIndicator editorInstance={editorInstance} providerRef={providerRef} />
       {loginUrl && !isAuthenticated ? (
         <a

frontend/src/main.tsx

@@ -16,6 +16,7 @@ import "./styles/components/_mermaid.css";
 import "./styles/components/_embed.css";
 import "./styles/components/_embed-studio.css";
 import "./styles/components/_hf-user.css";
+import "./styles/components/_connected-users.css";
 import "./styles/components/_hero.css";
 import "./styles/components/_toc.css";
 import "./styles/components/_button.css";

frontend/src/styles/components/_connected-users.css

@@ -0,0 +1,72 @@
+/* ---------------------------------------------------------------------------
+   Connected users pill (editor top bar)
+
+   Small overlapping avatars of everyone else currently editing the
+   document. Each avatar's border matches the user's collab color
+   (same color as their cursor caret in the document), so it's easy
+   to tell at a glance who's behind a given selection.
+   --------------------------------------------------------------------------- */
+
+.connected-users {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 6px 0 4px;
+}
+
+.connected-users__avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid var(--border-color);
+  background: var(--surface-bg);
+  margin-left: -6px;
+  transition: transform 120ms ease, z-index 0s;
+  z-index: 1;
+}
+.connected-users__avatar:first-child {
+  margin-left: 0;
+}
+.connected-users__avatar:hover {
+  transform: translateY(-1px) scale(1.08);
+  z-index: 2;
+}
+
+.connected-users__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.connected-users__initials {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: #fff;
+  text-transform: uppercase;
+  line-height: 1;
+}
+
+.connected-users__more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--surface-bg);
+  color: var(--muted-color);
+  font-size: 11px;
+  font-weight: 700;
+  border: 2px solid var(--border-color);
+  margin-left: -6px;
+}