multi-agent-collaboration-mcp 0.13.0 → 0.16.0

package/web/index.html

@@ -1205,13 +1205,14 @@
                 id="join-name"
                 placeholder="Your name"
                 aria-label="Your name"
-                maxlength="200"
+                maxlength="177"
                 autocomplete="off"
                 spellcheck="false"
               />
               <button id="join-btn" class="btn-accent">Join room</button>
+              <button id="join-change-btn" class="linkish" hidden>Change name</button>
               <span class="compose-hint"
-                >no password: identity is self-asserted, like the agents</span
+                >no password: human identity is self-asserted</span
               >
               <span id="join-error" class="compose-hint" style="color: var(--danger)"></span>
             </div>
@@ -1242,8 +1243,13 @@
     <script>
       "use strict";
 
-      const ROOM_KEY = "agent-chat.room";
-      const SEEN_KEY = "agent-chat.seen";
+      const ROOM_KEY = "agent-chat.v2.room";
+      const SEEN_KEY = "agent-chat.v2.seen";
+      const SEEN_LOCK = "agent-chat.seen";
+      const IDENT_KEY = "agent-chat.v2.identity";
+      const JOINED_KEY = "agent-chat.v2.joined";
+      const GHOST_KEY = "agent-chat.v2.ghosts";
+      const IDENTITY_VERSION = 2;
       const POLL_MS = 1500;
       const ROOMS_MS = 30000;
       const PAGE = 400;
@@ -1258,7 +1264,7 @@
         "room-head", "room-name", "room-desc", "room-stats",
         "pinned", "pinned-preview", "pinned-body",
         "banner", "stream-wrap", "stream", "older", "markall", "msgs", "jump", "placeholder",
-        "composer", "compose-join", "join-name", "join-btn", "join-error",
+        "composer", "compose-join", "join-name", "join-btn", "join-change-btn", "join-error",
         "compose-box", "reply-target", "compose-text", "send", "compose-ident",
         "ident-btn", "leave-btn", "compose-error",
         "search", "search-bar", "search-info", "search-back", "results",
@@ -1276,7 +1282,8 @@
         // polling cannot walk and rebuild every intervening 400-row page.
         historicalWindow: false,
         failures: 0,
-        loadingMsgs: false,
+        // Truthy for the full lifetime of a message load and awaitable by jumps.
+        msgsLoad: null,
         loadingRooms: false,
         seen: loadSeen(),
         replyTo: null, // { seq, label } the composer is replying to
@@ -1316,16 +1323,14 @@
         roomEpoch: 0,
         searchSeq: 0, // orders concurrent search requests
         searchController: null, // aborts the superseded/abandoned search request
+        changingIdentity: false,
+        changingFrom: null,
         // A rename that lands WHILE search mode hides the stream cannot rebuild
         // the (hidden) rows' identity-derived decoration then; this defers it
         // to exitSearch.
         needsRebuild: false,
       };
 
-      const IDENT_KEY = "agent-chat.identity";
-      const JOINED_KEY = "agent-chat.joined";
-      const GHOST_KEY = "agent-chat.ghosts";
-
       // Cross-tab serialization for EVERY membership mutation (identity,
       // joined map, ghost ledger, and the server calls they mirror). These
       // are read-modify-write sequences over shared localStorage: two tabs
@@ -1342,20 +1347,101 @@
         return navigator.locks.request("agent-chat.membership", fn);
       }
 
+      function emptyIdentityState() {
+        return {
+          version: IDENTITY_VERSION,
+          current: null,
+          pending_allocation: null,
+        };
+      }
+
+      function readIdentityState() {
+        try {
+          const v = JSON.parse(localStorage.getItem(IDENT_KEY));
+          const currentOk =
+            v?.current === null ||
+            (v?.current &&
+              typeof v.current.base_name === "string" &&
+              typeof v.current.agent_id === "string");
+          const p = v?.pending_allocation;
+          const pendingOk =
+            p === null ||
+            (p &&
+              typeof p.operation_id === "string" &&
+              Number.isSafeInteger(p.room) &&
+              p.room > 0 &&
+              typeof p.base_name === "string" &&
+              (p.previous_agent_id === null ||
+                typeof p.previous_agent_id === "string") &&
+              Array.isArray(p.previous_memberships) &&
+              p.previous_memberships.every(
+                (m) =>
+                  m &&
+                  Number.isSafeInteger(m.room) &&
+                  m.room > 0 &&
+                  typeof m.agent_id === "string",
+              ));
+          if (
+            v &&
+            v.version === IDENTITY_VERSION &&
+            currentOk &&
+            pendingOk
+          ) {
+            return v;
+          }
+        } catch {}
+        return emptyIdentityState();
+      }
+
+      let browserIdentity = readIdentityState();
+
+      function reloadIdentityState() {
+        browserIdentity = readIdentityState();
+        return browserIdentity;
+      }
+
+      // The current identity and its pending replacement share one atomic
+      // localStorage value. Update the in-memory view only after persistence
+      // succeeds, so a thrown write cannot make this tab outrun reload.
+      function saveIdentityState(next) {
+        try {
+          localStorage.setItem(IDENT_KEY, JSON.stringify(next));
+          browserIdentity = next;
+          return true;
+        } catch {
+          return false;
+        }
+      }
+
+      function currentIdentity() {
+        return browserIdentity.current;
+      }
+
+      function identity() {
+        return currentIdentity()?.agent_id || "";
+      }
+
       // Memberships whose soft-leave failed (e.g. server briefly down during
       // a rename): tracked so later joins can retry the leave instead of the
       // ghost becoming permanently unaddressable.
       function loadGhosts() {
-        // Type-check, not just parse-check: valid-but-wrong-typed JSON (a
-        // bare number, an object) written by devtools or version skew would
-        // otherwise throw deep inside consumers as an unhandled rejection.
+        // Reject valid JSON with the wrong shape before consumers assume an array.
         try {
           const v = JSON.parse(localStorage.getItem(GHOST_KEY));
           return Array.isArray(v)
-            ? v.filter(
-                (g) =>
-                  g && typeof g.room === "number" && typeof g.name === "string",
-              )
+            ? v
+                .filter(
+                  (g) =>
+                    g &&
+                    Number.isSafeInteger(g.room) &&
+                    g.room > 0 &&
+                    typeof g.agent_id === "string",
+                )
+                .map((g) => ({
+                  room: g.room,
+                  agent_id: g.agent_id,
+                  explicit_leave: g.explicit_leave === true,
+                }))
             : [];
         } catch {
           return [];
@@ -1364,53 +1450,101 @@
       function saveGhosts(g) {
         try {
           localStorage.setItem(GHOST_KEY, JSON.stringify(g));
-        } catch {}
+          return true;
+        } catch {
+          return false;
+        }
+      }
+      // Always filter the current ledger: callers may have awaited network
+      // work since they last loaded it, while another tab added an entry.
+      function removeGhost(room, agentId) {
+        return saveGhosts(
+          loadGhosts().filter(
+            (g) => !(g.room === room && g.agent_id === agentId),
+          ),
+        );
       }
       let ghostRetryActive = false;
       async function retryGhosts() {
         if (ghostRetryActive) return; // overlapping sweeps would race the ledger
         ghostRetryActive = true;
+        let currentMembershipChanged = false;
         try {
           // The membership lock is held ACROSS each leave's round trip: the
           // stale-check below is only race-free if no other tab can re-adopt
-          // the (room, name) while the leave is in flight.
+          // the (room, agent id) while the leave is in flight.
           await withMembershipLock(async () => {
+            reloadIdentityState();
+            // Pending allocation recovery must establish the new current
+            // identity and its cleanup ledger before any old leave can run.
+            if (browserIdentity.pending_allocation) return;
             for (const g of loadGhosts()) {
-              // A ghost whose (room, name) is the CURRENT mapping again is not
-              // stale: the user re-adopted the name and rejoined, and leaving
-              // now would evict that live membership seconds after it was
-              // created. Purge the entry instead of retrying it.
-              if (loadJoined()[String(g.room)] === g.name) {
-                saveGhosts(
-                  loadGhosts().filter(
-                    (x) => !(x.room === g.room && x.name === g.name),
-                  ),
-                );
+              // A cleanup ghost whose (room, agent id) is the CURRENT mapping
+              // again is not stale: the user re-adopted the identity and
+              // rejoined. An explicit-leave ghost is different: the matching
+              // map can be the crash point between recording the leave intent
+              // and deleting that map entry, so it must still be processed.
+              if (
+                !g.explicit_leave &&
+                loadJoined()[String(g.room)] === g.agent_id
+              ) {
+                if (!removeGhost(g.room, g.agent_id)) return;
                 continue;
               }
               try {
-                await postJson("/api/leave", { room: g.room, name: g.name });
-              } catch {
-                continue; // still unreachable; keep the entry for the next sweep
+                await postJson("/api/leave", {
+                  room: g.room,
+                  agent_id: g.agent_id,
+                });
+              } catch (error) {
+                // Generated fields cannot become valid through retry. A 400
+                // means the room or human no longer exists, or stored state is
+                // malformed, so finish local cleanup instead of keeping an
+                // immortal request. Transport and server failures remain
+                // retryable.
+                if (error?.httpStatus !== 400) continue;
               }
-              // Remove exactly this entry from the CURRENT ledger: a wholesale
-              // save of a pre-loop snapshot would erase entries recorded while
-              // these retries were in flight.
-              saveGhosts(
-                loadGhosts().filter(
-                  (x) => !(x.room === g.room && x.name === g.name),
-                ),
-              );
+              if (g.explicit_leave) {
+                const joined = loadJoined();
+                const key = String(g.room);
+                if (joined[key] === g.agent_id) {
+                  delete joined[key];
+                  if (!saveJoined(joined)) {
+                    return;
+                  }
+                  if (
+                    state.current?.id === g.room &&
+                    identity() === g.agent_id
+                  ) {
+                    currentMembershipChanged = true;
+                  }
+                }
+              }
+              if (!removeGhost(g.room, g.agent_id)) return;
             }
           });
+          // localStorage notifies only OTHER tabs. When this tab recovered the
+          // leave, refresh its own UI and invalidate work captured while the
+          // membership still appeared present.
+          if (
+            currentMembershipChanged &&
+            state.current &&
+            !joinedHere()
+          ) {
+            state.roomEpoch += 1;
+            state.lastReadSent = 0;
+            state.marker = -1;
+            state.markerIdent = null;
+            state.gap = false;
+            clearReply();
+            renderComposer();
+            computeGap();
+          }
         } finally {
           ghostRetryActive = false;
         }
       }
 
-      function identity() {
-        return localStorage.getItem(IDENT_KEY) || "";
-      }
       function loadJoined() {
         try {
           const v = JSON.parse(localStorage.getItem(JOINED_KEY));
@@ -1457,7 +1591,11 @@
         try {
           const r = await fetch(url, { ...options, signal: controller.signal });
           const data = await r.json().catch(() => ({}));
-          if (!r.ok) throw new Error(data.error || "HTTP " + r.status);
+          if (!r.ok) {
+            const error = new Error(data.error || "HTTP " + r.status);
+            error.httpStatus = r.status;
+            throw error;
+          }
           return data;
         } finally {
           clearTimeout(timeout);
@@ -1474,18 +1612,68 @@
 
       // ---- utilities ------------------------------------------------------
 
+      function parseSeen(raw) {
+        try {
+          const value = JSON.parse(raw);
+          if (!value || typeof value !== "object" || Array.isArray(value)) {
+            return {};
+          }
+          const out = {};
+          for (const [room, seq] of Object.entries(value)) {
+            const roomId = Number(room);
+            if (
+              Number.isSafeInteger(roomId) &&
+              roomId > 0 &&
+              String(roomId) === room &&
+              Number.isSafeInteger(seq) &&
+              seq > 0
+            ) {
+              out[roomId] = seq;
+            }
+          }
+          return out;
+        } catch {
+          return {};
+        }
+      }
+
       function loadSeen() {
         try {
-          const v = JSON.parse(localStorage.getItem(SEEN_KEY));
-          return v && typeof v === "object" && !Array.isArray(v) ? v : {};
+          return parseSeen(localStorage.getItem(SEEN_KEY));
         } catch {
           return {};
         }
       }
-      function saveSeen() {
+
+      function mergeSeen(target, roomId, seq) {
+        if (seq <= (target[roomId] ?? 0)) return false;
+        target[roomId] = seq;
+        return true;
+      }
+
+      function persistSeen(seen) {
         try {
-          localStorage.setItem(SEEN_KEY, JSON.stringify(state.seen));
-        } catch {}
+          localStorage.setItem(SEEN_KEY, JSON.stringify(seen));
+        } catch {
+          // This tab stays optimistic; another tab or reload may show the dot.
+        }
+      }
+
+      async function saveSeen(roomId, seq) {
+        await navigator.locks.request(SEEN_LOCK, () => {
+          const seen = loadSeen();
+          if (!mergeSeen(seen, roomId, seq)) return;
+          persistSeen(seen);
+        });
+      }
+
+      async function forgetSeen(roomId) {
+        delete state.seen[roomId];
+        await navigator.locks.request(SEEN_LOCK, () => {
+          const seen = loadSeen();
+          delete seen[roomId];
+          persistSeen(seen);
+        });
       }
 
       // Stable per-agent identity in GRAYSCALE: the FNV-1a hash picks a
@@ -1514,10 +1702,21 @@
         return new Date(at.replace(" ", "T") + "Z");
       }
 
+      const TIME_FORMATTER = new Intl.DateTimeFormat([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+      });
+      const DAY_FORMATTER = new Intl.DateTimeFormat([], {
+        weekday: "short",
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+
       function fmtTime(d) {
-        return d.toLocaleTimeString([], {
-          hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false,
-        });
+        return TIME_FORMATTER.format(d);
       }
 
       function fmtDay(d) {
@@ -1527,9 +1726,7 @@
         const days = Math.round((today - that) / 86400000);
         if (days === 0) return "Today";
         if (days === 1) return "Yesterday";
-        return d.toLocaleDateString([], {
-          weekday: "short", year: "numeric", month: "short", day: "numeric",
-        });
+        return DAY_FORMATTER.format(d);
       }
 
       function fmtRel(at) {
@@ -1678,12 +1875,11 @@
             card.append(desc);
           }
 
+          // Use seq because timestamps collide within one second. Compare by
+          // ordering because the rendered tail can be ahead of the cached list.
           const isOpen = state.current && state.current.id === room.id;
-          if (
-            !isOpen &&
-            room.last_activity &&
-            state.seen[room.id] !== room.last_activity
-          ) {
+          const seenSeq = state.seen[room.id];
+          if (!isOpen && room.last_seq && !(seenSeq >= room.last_seq)) {
             const dot = document.createElement("span");
             dot.className = "activity";
             dot.title = "new activity since you last viewed this room";
@@ -1709,7 +1905,9 @@
         } catch {
           return; // server unreachable: keep the room, retry next refresh
         }
-        if (!gone || !sameView(room, epoch)) return;
+        if (!gone) return;
+        await forgetDeletedRoom(room.id);
+        if (!sameView(room, epoch)) return;
         state.current = null;
         state.searchMode = false;
         el.streamWrap.hidden = true;
@@ -1748,8 +1946,7 @@
                 pinned,
                 description: fullDesc ?? cur.description,
               };
-              state.seen[cur.id] = cur.last_activity;
-              saveSeen();
+              // Refreshing metadata does not prove the stream was rendered.
               renderRoomHead();
             } else {
               // The open room is ABSENT from the (capped, most-recently-active)
@@ -1766,7 +1963,7 @@
             // Recovered from "Loading..."/error with no room selected.
             showPlaceholder(
               "Pick a room.",
-              "Rooms are listed on the left; the amber dot marks activity you have not seen.",
+              "Rooms are listed on the left; the activity dot marks messages you have not seen.",
             );
           }
           renderRooms();
@@ -1903,27 +2100,29 @@
         container.append(wrap);
       }
 
-      const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-
-      // Scroll a message into view. If it is outside the bounded DOM window,
-      // fetch a page starting at that seq directly; never walk/rebuild
-      // thousands of intermediate pages.
+      // Fetch one anchored page for an off-window target, never intermediate
+      // pages. Leave the current view alone when the target was pruned.
       async function jumpToSeq(seq) {
         const room = state.current;
         const epoch = state.roomEpoch;
         if (!room || !Number.isSafeInteger(seq) || seq < 1) return;
         let target = el.msgs.querySelector(`[data-seq="${seq}"]`);
         if (!target) {
-          // A search exit may have one ordinary tail refresh in flight. Wait a
-          // short bounded period for its lock, then give up rather than overlap
-          // mutations of the same DOM/state window.
-          for (let i = 0; i < 20 && state.loadingMsgs; i++) await sleep(100);
-          if (!sameView(room, epoch) || state.loadingMsgs) return;
-          state.loadingMsgs = true;
+          // Wait for the real load lifetime, not an unrelated fixed delay.
+          while (state.msgsLoad) await state.msgsLoad;
+          if (!sameView(room, epoch)) return;
+          target = el.msgs.querySelector(`[data-seq="${seq}"]`);
+        }
+        if (!target) {
+          let releaseLoad;
+          state.msgsLoad = new Promise((r) => (releaseLoad = r));
           try {
             const anchor = seq === 1 ? "before=2&limit=1" : `after=${seq - 1}&limit=${PAGE}`;
             const data = await fetchJson(`/api/messages?room=${room.id}&${anchor}`);
             if (!sameView(room, epoch) || data.error || !data.messages) return;
+            // Both anchors put an existing target at row zero. Check before
+            // freezing or replacing the live stream because targets can prune.
+            if (data.messages[0]?.seq !== seq) return;
             state.msgs = data.messages;
             state.historicalWindow = true;
             state.follow = false;
@@ -1938,12 +2137,12 @@
             noteFail();
             return;
           } finally {
-            state.loadingMsgs = false;
+            state.msgsLoad = null;
+            releaseLoad();
           }
           target = el.msgs.querySelector(`[data-seq="${seq}"]`);
         }
-        if (!sameView(room, epoch)) return;
-        if (!target) return;
+        if (!sameView(room, epoch) || !target) return;
         target.scrollIntoView({ block: "center" });
         target.classList.remove("flash");
         void target.offsetWidth; // restart the animation
@@ -1986,11 +2185,13 @@
           const who = document.createElement("span");
           who.className = "who";
           who.textContent = label(m);
+          who.title = m.from;
           head.append(who);
           if (label(m) !== m.from) {
             const id = document.createElement("span");
             id.className = "who-id";
             id.textContent = m.from;
+            id.title = m.from;
             head.append(id);
           }
           if (identity() && m.from === identity()) {
@@ -2166,7 +2367,7 @@
         const epoch = state.roomEpoch;
         if (!room || state.searchMode) return;
         if (state.historicalWindow && !initial) return;
-        if (state.loadingMsgs) {
+        if (state.msgsLoad) {
           if (initial) state.pendingInitial = true;
           return;
         }
@@ -2174,7 +2375,8 @@
           initial = true;
           state.pendingInitial = false;
         }
-        state.loadingMsgs = true;
+        let releaseLoad;
+        state.msgsLoad = new Promise((r) => (releaseLoad = r));
         try {
           const last = state.msgs.length
             ? state.msgs[state.msgs.length - 1].seq
@@ -2220,33 +2422,40 @@
             } else {
               hidePlaceholder();
             }
-            requestAnimationFrame(scrollBottom);
+            requestAnimationFrame(() => {
+              if (!sameView(room, epoch)) return;
+              scrollBottom();
+              noteSeen();
+              maybeMarkRead();
+            });
           } else if (rows.length) {
             hidePlaceholder();
             const stick = state.follow || nearBottom();
             appendMsgs(rows, true);
             if (stick) {
-              requestAnimationFrame(scrollBottom);
+              requestAnimationFrame(() => {
+                if (!sameView(room, epoch)) return;
+                scrollBottom();
+                noteSeen();
+                maybeMarkRead();
+              });
             } else {
               state.newCount += rows.length;
               updateJump();
             }
           }
-          // A transient /api/me failure must not freeze this visit's read
-          // receipt forever. Retry only while the baseline is unknown;
-          // fetchMarker supplies an in-flight guard and five-second backoff.
+          // Retry marker bootstrap only while it is unknown for this identity;
+          // fetchMarker owns the in-flight guard and five-second backoff.
           if (state.marker < 0 || state.markerIdent !== identity()) fetchMarker();
-          maybeMarkRead();
         } catch {
           if (initial) state.pendingInitial = true; // retry with initial semantics
           noteFail();
         } finally {
-          state.loadingMsgs = false;
+          state.msgsLoad = null;
+          releaseLoad();
         }
       }
 
-      // Returns true when it prepended messages (used by jumpToSeq to detect
-      // progress); false on busy, error, or exhausted history.
       async function loadOlder() {
         const room = state.current;
         const epoch = state.roomEpoch;
@@ -2254,12 +2463,12 @@
         if (
           !room ||
           !first ||
-          state.loadingMsgs ||
+          state.msgsLoad ||
           state.msgs.length >= MAX_RENDERED_MESSAGES
-        ) return false;
-        state.loadingMsgs = true;
+        ) return;
+        let releaseLoad;
+        state.msgsLoad = new Promise((r) => (releaseLoad = r));
         el.older.disabled = true;
-        let changed = false;
         try {
           const pageLimit = Math.min(
             PAGE,
@@ -2268,7 +2477,7 @@
           const data = await fetchJson(
             `/api/messages?room=${room.id}&before=${first.seq}&limit=${pageLimit}`,
           );
-          if (!sameView(room, epoch) || data.error || !data.messages) return false;
+          if (!sameView(room, epoch) || data.error || !data.messages) return;
           if (data.messages.length) {
             const prevHeight = el.stream.scrollHeight;
             const prevTop = el.stream.scrollTop;
@@ -2276,13 +2485,13 @@
             rebuildStream();
             el.stream.scrollTop =
               el.stream.scrollHeight - prevHeight + prevTop;
-            changed = true;
           }
-          updateOlderButton();
-          if (!data.messages.length) {
-            el.older.hidden = true;
-            state.noOlderHistory = true; // floor reached: the rest was pruned
+          // A short, untrimmed page proves the history floor immediately;
+          // avoid one more request that must return empty.
+          if (data.messages.length < pageLimit && !data.trimmed) {
+            state.noOlderHistory = true;
           }
+          updateOlderButton();
           const hadGap = state.gap;
           computeGap();
           if (hadGap && !state.gap) maybeMarkRead(); // gap closed by paging
@@ -2290,9 +2499,9 @@
           noteFail();
         } finally {
           el.older.disabled = false;
-          state.loadingMsgs = false;
+          state.msgsLoad = null;
+          releaseLoad();
         }
-        return changed;
       }
 
       // ---- search mode --------------------------------------------------------
@@ -2307,11 +2516,13 @@
         const who = document.createElement("span");
         who.className = "who";
         who.textContent = label(m);
+        who.title = m.from;
         head.append(who);
         if (label(m) !== m.from) {
           const id = document.createElement("span");
           id.className = "who-id";
           id.textContent = m.from;
+          id.title = m.from;
           head.append(id);
         }
         const meta = document.createElement("span");
@@ -2430,19 +2641,159 @@
 
       // ---- participation ------------------------------------------------------
 
+      function recordedMemberships(agentId) {
+        if (!agentId) return [];
+        return Object.entries(loadJoined())
+          .filter(([, storedAgentId]) => storedAgentId === agentId)
+          .map(([room]) => ({ room: Number(room), agent_id: agentId }))
+          .filter((m) => Number.isSafeInteger(m.room) && m.room > 0);
+      }
+
+      async function completePendingAllocationLocked(pending) {
+        let j;
+        try {
+          j = await postJson("/api/join", {
+            room: pending.room,
+            base_name: pending.base_name,
+            operation_id: pending.operation_id,
+          });
+        } catch (error) {
+          // A delivered 4xx is a final rejection, not an uncertain response:
+          // the server's allocation paths commit nothing on these statuses.
+          // Drop only that request so the user can correct it. Transport
+          // failures and 5xx responses keep the UUID for safe replay.
+          if (
+            error?.httpStatus >= 400 &&
+            error.httpStatus < 500
+          ) {
+            saveIdentityState({
+              version: IDENTITY_VERSION,
+              current: browserIdentity.current,
+              pending_allocation: null,
+            });
+          }
+          throw error;
+        }
+        if (
+          typeof j.agent_id !== "string" ||
+          j.base_name !== pending.base_name ||
+          j.room_id !== pending.room ||
+          typeof j.joined !== "boolean"
+        ) {
+          throw new Error("allocation response did not match the pending request");
+        }
+
+        const oldMemberships = pending.previous_memberships.filter(
+          (m) => m.agent_id !== j.agent_id,
+        );
+        if (oldMemberships.length) {
+          const ghosts = loadGhosts();
+          for (const old of oldMemberships) {
+            if (
+              !ghosts.some(
+                (g) =>
+                  g.room === old.room && g.agent_id === old.agent_id,
+              )
+            ) {
+              ghosts.push(old);
+            }
+          }
+          if (!saveGhosts(ghosts)) {
+            throw new Error(
+              "the new identity was allocated, but cleanup state could not be saved; free browser storage and retry",
+            );
+          }
+        }
+
+        // Save the new membership map before switching the atomic identity
+        // object. If this write fails, pending_allocation remains durable and
+        // reload can replay the same server allocation.
+        const joined = loadJoined();
+        for (const old of oldMemberships) {
+          const key = String(old.room);
+          if (joined[key] === old.agent_id) delete joined[key];
+        }
+        if (j.joined) joined[String(pending.room)] = j.agent_id;
+        if (!saveJoined(joined)) {
+          throw new Error(
+            "the new identity was allocated, but room state could not be saved; free browser storage and retry",
+          );
+        }
+
+        const nextIdentity = {
+          version: IDENTITY_VERSION,
+          current: {
+            base_name: j.base_name,
+            agent_id: j.agent_id,
+          },
+          pending_allocation: null,
+        };
+        if (!saveIdentityState(nextIdentity)) {
+          throw new Error(
+            "the new identity was allocated, but identity state could not be saved; free browser storage and retry",
+          );
+        }
+
+        // Only the durable ghost ledger and switched identity make it safe to
+        // leave old memberships. A failed leave stays in the ledger.
+        for (const old of oldMemberships) {
+          try {
+            await postJson("/api/leave", {
+              room: old.room,
+              agent_id: old.agent_id,
+            });
+          } catch {
+            continue;
+          }
+          removeGhost(old.room, old.agent_id);
+        }
+        return j;
+      }
+
+      async function recoverPendingAllocationLocked() {
+        const pending = browserIdentity.pending_allocation;
+        return pending
+          ? completePendingAllocationLocked(pending)
+          : null;
+      }
+
+      async function recoverPendingAllocation() {
+        try {
+          await withMembershipLock(async () => {
+            reloadIdentityState();
+            await recoverPendingAllocationLocked();
+          });
+          return true;
+        } catch {
+          reloadIdentityState();
+          return browserIdentity.pending_allocation === null;
+        }
+      }
+
       function renderComposer() {
         el.composer.hidden = !state.current;
         if (!state.current) return;
         const joined = joinedHere();
-        el.composeJoin.hidden = joined;
-        el.composeBox.hidden = !joined;
+        const current = currentIdentity();
+        const allocationMode = !current || state.changingIdentity;
+        el.composeJoin.hidden = joined && !state.changingIdentity;
+        el.composeBox.hidden = !joined || state.changingIdentity;
         el.joinError.textContent = "";
         el.composeError.textContent = "";
-        if (joined) {
+        if (joined && !state.changingIdentity) {
           el.composeIdent.textContent = identity();
+          el.composeIdent.title = identity();
         } else {
-          if (!el.joinName.value) el.joinName.value = identity();
-          el.joinBtn.textContent = "Join " + state.current.name;
+          el.joinName.hidden = !allocationMode;
+          el.joinChangeBtn.hidden = allocationMode || !current;
+          if (allocationMode) {
+            if (!el.joinName.value && current) {
+              el.joinName.value = current.base_name;
+            }
+            el.joinBtn.textContent = current ? "Change name" : "Join room";
+          } else {
+            el.joinBtn.textContent = "Join as " + current.agent_id;
+          }
         }
         renderReplyTarget();
       }
@@ -2476,109 +2827,140 @@
       }
 
       async function joinCurrent() {
-        // The Enter key in the name field bypasses the button's disabled
-        // state; gate on it here so two rename loops can never interleave
-        // over the shared localStorage maps.
         if (el.joinBtn.disabled) return;
         const room = state.current;
-        const name = el.joinName.value.trim().replace(/^@/, "");
-        if (!room || !name) {
-          el.joinError.textContent = "pick a name first";
-          el.joinName.focus();
-          return;
-        }
+        if (!room) return;
+        const requestedBase = el.joinName.value;
+        const explicitChange = state.changingIdentity;
+        const changingFrom = state.changingFrom;
+        const previousUiIdentity = identity();
         el.joinBtn.disabled = true;
         const epoch = state.roomEpoch;
         try {
-          // The whole join/rename sequence (server calls INCLUDED) runs under
-          // the cross-tab membership lock: its localStorage read-modify-write
-          // steps are only merge-safe against writes that happen strictly
-          // before or after, not interleaved between read and save.
-          const { j, prevIdentity, saved } = await withMembershipLock(async () => {
-          const prevIdentity = identity();
-          // Join FIRST: the server validates the new name, and an invalid
-          // rename must not have already torn down the old memberships.
-          const j = await postJson("/api/join", { room: room.id, name });
-          try {
-            localStorage.setItem(IDENT_KEY, name);
-          } catch {}
-          // Renaming: soft-leave EVERY membership recorded under another name
-          // (else the abandoned identity lingers as a present ghost member,
-          // blocking prune's unread-refusal). Failed leaves go to the ghost
-          // ledger for retry on later joins, INCLUDING the current room's
-          // old name, which the map overwrite below would otherwise orphan.
-          const joinedMap = loadJoined();
-          const newGhosts = [];
-          const removed = [];
-          for (const [rid, storedName] of Object.entries(joinedMap)) {
-            if (!storedName || storedName === name) continue;
-            try {
-              await postJson("/api/leave", { room: Number(rid), name: storedName });
-            } catch {
-              newGhosts.push({ room: Number(rid), name: storedName });
+          const { j, saved, newIdentity } = await withMembershipLock(async () => {
+            // Web Locks serialize same-origin tabs, but the decision must use
+            // the state read INSIDE the lock. Two initially empty tabs should
+            // share the first allocation, not mint one identity each.
+            reloadIdentityState();
+            const recovered = await recoverPendingAllocationLocked();
+            // A recovery satisfies this click only if it joined the visible
+            // room; a foreign-room or joined:false replay falls through below.
+            if (
+              recovered &&
+              recovered.room_id === room.id &&
+              recovered.joined === true
+            ) {
+              return {
+                j: recovered,
+                saved: true,
+                newIdentity: identity(),
+              };
             }
-            removed.push([rid, storedName]);
-          }
-          // Merge the new failures into the CURRENT ledger at save time: a
-          // snapshot-wholesale save would erase entries another tab (or a
-          // concurrent retry sweep) touched since this function started.
-          if (newGhosts.length) {
-            const ledger = loadGhosts();
-            for (const g of newGhosts) {
-              if (!ledger.some((x) => x.room === g.room && x.name === g.name)) {
-                ledger.push(g);
+            const current = currentIdentity();
+
+            // An explicit rename was chosen for one visible identity. If a
+            // different tab replaced it while this form was open, do not turn
+            // the stale click into an unintended second rename.
+            if (
+              explicitChange &&
+              changingFrom &&
+              current?.agent_id !== changingFrom
+            ) {
+              throw new Error(
+                "the identity changed in another tab; review the current name and try again",
+              );
+            }
+
+            let j;
+            let saved = true;
+            if (
+              current &&
+              (!explicitChange || requestedBase === current.base_name)
+            ) {
+              // Journal an uncertain rejoin before the server write. Until the
+              // joined map is durable, recovery may safely undo it with leave.
+              // After the map is saved, this non-explicit ghost is discarded
+              // without touching the live membership.
+              const ghosts = loadGhosts();
+              const existing = ghosts.find(
+                (g) =>
+                  g.room === room.id &&
+                  g.agent_id === current.agent_id,
+              );
+              if (existing) {
+                existing.explicit_leave = false;
+              } else {
+                ghosts.push({
+                  room: room.id,
+                  agent_id: current.agent_id,
+                  explicit_leave: false,
+                });
               }
+              if (!saveGhosts(ghosts)) {
+                throw new Error(
+                  "browser storage is unavailable; the room was not joined",
+                );
+              }
+
+              j = await postJson("/api/join", {
+                room: room.id,
+                agent_id: current.agent_id,
+              });
+              if (j.agent_id !== current.agent_id || j.room_id !== room.id) {
+                throw new Error(
+                  "canonical join response did not match the requested identity",
+                );
+              }
+              const joined = loadJoined();
+              joined[String(room.id)] = current.agent_id;
+              saved = saveJoined(joined);
+              if (saved) {
+                // Safe if this write fails: retryGhosts sees the matching map
+                // and removes the non-explicit record without leaving.
+                removeGhost(room.id, current.agent_id);
+              }
+            } else {
+              if (!requestedBase) {
+                throw new Error("enter a base name first");
+              }
+              const previousAgentId = current?.agent_id || null;
+              const pending = {
+                operation_id: crypto.randomUUID(),
+                room: room.id,
+                base_name: requestedBase,
+                previous_agent_id: previousAgentId,
+                previous_memberships:
+                  recordedMemberships(previousAgentId),
+              };
+              if (
+                !saveIdentityState({
+                  version: IDENTITY_VERSION,
+                  current,
+                  pending_allocation: pending,
+                })
+              ) {
+                throw new Error(
+                  "browser storage is unavailable; no identity was allocated",
+                );
+              }
+              j = await completePendingAllocationLocked(pending);
             }
-            saveGhosts(ledger);
-          }
-          // Same merge discipline for the joined map: re-read it and delete
-          // only the entries we actually left AND that still hold the value
-          // we left under (defense in depth under the lock).
-          const freshMap = loadJoined();
-          for (const [rid, storedName] of removed) {
-            if (freshMap[rid] === storedName) delete freshMap[rid];
-          }
-          freshMap[String(room.id)] = name;
-          const saved = saveJoined(freshMap);
-          // Re-adopting a previously-ghosted (room, name): the mapping above
-          // makes that pair live again, so drop any stale ledger entry for it
-          // before the next sweep can leave the room we just joined.
-          const ledgerNow = loadGhosts();
-          const keptGhosts = ledgerNow.filter(
-            (x) => !(x.room === room.id && x.name === name),
-          );
-          if (keptGhosts.length !== ledgerNow.length) saveGhosts(keptGhosts);
-          return { j, prevIdentity, saved };
+            return { j, saved, newIdentity: identity() };
           });
-          // Fire-and-forget AFTER the lock releases: retryGhosts takes the
-          // same (non-reentrant) lock, so awaiting it here would deadlock.
+          state.changingIdentity = false;
+          state.changingFrom = null;
           retryGhosts();
-          // Local storage write failed (e.g. quota): the server join committed
-          // but the client cannot record it, so joinedHere() will read false
-          // and the composer would silently show "not joined". Surface it
-          // instead of leaving the user confused.
+          renderComposer();
           if (!saved) {
             el.joinError.textContent =
-              "joined on the server, but this browser could not save it locally (storage full?); free space and rejoin";
+              "joined on the server, but this browser could not save the room membership; free browser storage and retry";
           }
-          // The composer reflects the GLOBAL identity for whatever room is
-          // shown now; re-render it even after a room switch so a stale
-          // successful rename cannot leave it showing the old identity.
-          renderComposer();
-          // A rename invalidates identity-derived DECORATION on already-
-          // rendered rows ("you" badges, directed-at-me styling); rebuild
-          // whatever stream is currently shown from its cached rows, or defer
-          // to exitSearch when the stream is hidden behind search results.
-          if (prevIdentity !== name) {
+          if (previousUiIdentity !== newIdentity) {
             if (state.searchMode) state.needsRebuild = true;
             else rebuildStream();
           }
-          // A delayed response must not mutate another visit's marker/UI --
-          // but a RENAME was global, so the room shown now still carries the
-          // old identity's marker state: reset it and re-baseline (fetchMarker
-          // no-ops unless the new identity is joined there).
           if (!sameView(room, epoch)) {
-            if (prevIdentity !== name) {
+            if (previousUiIdentity !== newIdentity) {
               state.lastReadSent = 0;
               state.marker = -1;
               state.markerIdent = null;
@@ -2587,18 +2969,32 @@
             }
             return;
           }
-          // An identity change invalidates every in-flight operation that
-          // was issued under the OLD identity in this same room (their
-          // markers belong to the old name); a first join must not, or it
-          // would drop its own visit's in-flight initial load.
-          if (prevIdentity && prevIdentity !== name) state.roomEpoch += 1;
+          if (
+            previousUiIdentity &&
+            previousUiIdentity !== newIdentity
+          ) {
+            state.roomEpoch += 1;
+          }
           state.lastReadSent = 0;
-          state.marker = j.last_read_seq ?? 0;
-          state.markerIdent = name;
+          state.marker = saved && j.joined ? (j.last_read_seq ?? 0) : -1;
+          state.markerIdent = saved && j.joined ? newIdentity : null;
           computeGap();
           maybeMarkRead();
-          el.composeText.focus();
+          if (joinedHere()) el.composeText.focus();
         } catch (e) {
+          if (previousUiIdentity !== identity()) {
+            state.changingIdentity = false;
+            state.changingFrom = null;
+            state.lastReadSent = 0;
+            state.marker = -1;
+            state.markerIdent = null;
+            state.gap = false;
+            renderComposer();
+            if (state.searchMode) state.needsRebuild = true;
+            else rebuildStream();
+            computeGap();
+            fetchMarker();
+          }
           if (sameView(room, epoch)) el.joinError.textContent = e.message;
         } finally {
           el.joinBtn.disabled = false;
@@ -2608,23 +3004,61 @@
       async function leaveCurrent() {
         const room = state.current;
         const epoch = state.roomEpoch;
-        const name = identity();
-        if (!room || !name) return;
+        const agentId = identity();
+        if (!room || !agentId) return;
         try {
           // Same lock as join/rename: the leave plus its map update must not
           // interleave with another tab's read-modify-write.
           await withMembershipLock(async () => {
-            await postJson("/api/leave", { room: room.id, name });
-            // Drop the mapping only while it still records THIS leave's
-            // identity: a rename in another tab must not lose its mapping.
+            const ghosts = loadGhosts();
+            const existing = ghosts.find(
+              (g) => g.room === room.id && g.agent_id === agentId,
+            );
+            if (existing) {
+              existing.explicit_leave = true;
+            } else {
+              ghosts.push({
+                room: room.id,
+                agent_id: agentId,
+                explicit_leave: true,
+              });
+            }
+            if (!saveGhosts(ghosts)) {
+              throw new Error(
+                "browser storage is unavailable; the room was not left",
+              );
+            }
+
+            // Persist the local leave before the request. If the request or
+            // page dies afterward, the ghost entry retries the server leave.
             const joined = loadJoined();
-            if (joined[String(room.id)] === name) {
+            if (joined[String(room.id)] === agentId) {
               delete joined[String(room.id)];
-              saveJoined(joined);
+              if (!saveJoined(joined)) {
+                throw new Error(
+                  "leave is recorded, but browser room state could not be updated; it will retry",
+                );
+              }
+            }
+
+            await postJson("/api/leave", {
+              room: room.id,
+              agent_id: agentId,
+            });
+
+            if (!removeGhost(room.id, agentId)) {
+              throw new Error(
+                "the room was left, but cleanup state could not be saved; free browser storage and retry",
+              );
             }
           });
         } catch (e) {
-          if (sameView(room, epoch)) el.composeError.textContent = e.message;
+          if (sameView(room, epoch)) {
+            if (!joinedHere()) clearReply();
+            renderComposer();
+            const target = joinedHere() ? el.composeError : el.joinError;
+            target.textContent = e.message;
+          }
           return;
         }
         // Composer/reply belong to whatever room is shown NOW.
@@ -2645,7 +3079,7 @@
         try {
           await postJson("/api/post", {
             room: room.id,
-            name: identity(),
+            agent_id: identity(),
             body,
             reply_to_seq: state.replyTo ? state.replyTo.seq : null,
           });
@@ -2708,9 +3142,9 @@
       async function fetchMarker() {
         const room = state.current;
         const epoch = state.roomEpoch;
-        const name = identity();
-        if (!room || !name || !joinedHere()) return;
-        const retryKey = `${room.id}:${epoch}:${name}`;
+        const agentId = identity();
+        if (!room || !agentId || !joinedHere()) return;
+        const retryKey = `${room.id}:${epoch}:${agentId}`;
         if (state.markerLoading) return;
         if (
           state.markerRetryKey === retryKey &&
@@ -2721,7 +3155,7 @@
         state.markerLoading = true;
         try {
           const me = await fetchJson(
-            `/api/me?room=${room.id}&name=${encodeURIComponent(name)}`,
+            `/api/me?room=${room.id}&agent_id=${encodeURIComponent(agentId)}`,
           );
           if (me.error) throw new Error(me.error);
           if (!sameView(room, epoch)) return;
@@ -2729,23 +3163,23 @@
           // request and this completion; the epoch bump from the storage
           // listener usually catches that, but its event delivery is async,
           // so re-check before baselining the wrong identity's marker.
-          if (identity() !== name) return;
+          if (identity() !== agentId) return;
           // Never LOWER a marker a same-epoch same-identity writer (join,
           // markall) advanced while this response was in flight: the server
           // marker is monotonic, so the max is the truth; a stale value
           // would resurrect a cleared gap and suspend auto-marking.
           state.marker = me.joined
-            ? state.markerIdent === name && state.marker >= 0
+            ? state.markerIdent === agentId && state.marker >= 0
               ? Math.max(state.marker, me.last_read_seq)
               : me.last_read_seq
             : -1;
-          state.markerIdent = name;
+          state.markerIdent = agentId;
           state.markerRetryKey = "";
           state.markerRetryAt = 0;
           computeGap();
           maybeMarkRead();
         } catch {
-          if (sameView(room, epoch) && identity() === name) {
+          if (sameView(room, epoch) && identity() === agentId) {
             state.markerRetryKey = retryKey;
             state.markerRetryAt = Date.now() + 5_000;
           }
@@ -2757,8 +3191,8 @@
       function maybeMarkRead() {
         const room = state.current;
         const epoch = state.roomEpoch;
-        const name = identity();
-        if (!room || !name || !joinedHere()) return;
+        const agentId = identity();
+        if (!room || !agentId || !joinedHere()) return;
         // Search mode hides the live stream: follow/scroll state describes
         // the RESULTS layout, and the stream tail was never on screen, so
         // marking it read here would claim unseen messages (monotonically,
@@ -2768,12 +3202,10 @@
         // tab renames, marker/gap state still describes the old name until
         // fetchMarker re-baselines; posting meanwhile would graft the old
         // identity's read position onto the new name.
-        if (state.markerIdent !== name) return;
+        if (state.markerIdent !== agentId) return;
         if (document.visibilityState !== "visible") return;
-        // Only claim messages as read while pinned to the bottom: arrivals
-        // above the jump pill have not been seen, and agents treat this
-        // marker as a read receipt.
-        if (!state.follow) return;
+        // follow can be stale after an append; the durable marker needs both.
+        if (!state.follow || !nearBottom()) return;
         // Re-derive the gap from current state rather than trusting a stale
         // flag: non-initial appends (including the degraded recovery path
         // after a dropped initial load) never ran computeGap.
@@ -2787,7 +3219,11 @@
           : 0;
         if (last <= state.lastReadSent) return;
         state.lastReadSent = last;
-        postJson("/api/read", { room: room.id, name, seq: last })
+        postJson("/api/read", {
+          room: room.id,
+          agent_id: agentId,
+          seq: last,
+        })
           .then((r) => {
             // A delayed response must not mutate another visit's state.
             if (sameView(room, epoch)) state.marker = r.last_read_seq;
@@ -2797,8 +3233,44 @@
           });
       }
 
+      // Local activity state is independent of membership and server read
+      // gaps. Read-only viewers can clear dots, and only the rendered tail is
+      // recorded. Scroll frames are separately gated to the visit that queued
+      // them.
+      function noteSeen() {
+        const room = state.current;
+        if (!room) return;
+        // A hidden live stream or historical slice is not the current tail.
+        if (state.searchMode || state.historicalWindow) return;
+        if (document.visibilityState !== "visible") return;
+        // follow can be stale until an appended tail is actually scrolled.
+        if (!state.follow || !nearBottom()) return;
+        const last = state.msgs.length
+          ? state.msgs[state.msgs.length - 1].seq
+          : 0;
+        // Never let a shorter rendered window resurrect a cleared dot.
+        if (!last || !mergeSeen(state.seen, room.id, last)) return;
+        // Update before awaiting the lock so scroll events do not queue repeats.
+        void saveSeen(room.id, last);
+      }
+
       // ---- room deletion ------------------------------------------------------
 
+      async function forgetDeletedRoom(roomId) {
+        await withMembershipLock(() => {
+          const joined = loadJoined();
+          delete joined[String(roomId)];
+          saveJoined(joined);
+          saveGhosts(loadGhosts().filter((g) => g.room !== roomId));
+        });
+        await forgetSeen(roomId);
+        delete state.drafts[roomId];
+        try {
+          const saved = JSON.parse(localStorage.getItem(ROOM_KEY));
+          if (saved?.id === roomId) localStorage.removeItem(ROOM_KEY);
+        } catch {}
+      }
+
       function offerDelete() {
         const room = state.current;
         if (!room) return;
@@ -2822,20 +3294,9 @@
           return;
         }
         el.deleteYes.disabled = false;
-        // Forget every local trace of the deleted room regardless of where
-        // the user is now (map edit under the cross-tab lock).
-        await withMembershipLock(() => {
-          const joined = loadJoined();
-          delete joined[String(room.id)];
-          saveJoined(joined);
-        });
-        delete state.seen[room.id];
-        saveSeen();
-        delete state.drafts[room.id];
-        try {
-          const saved = JSON.parse(localStorage.getItem(ROOM_KEY));
-          if (saved && saved.id === room.id) localStorage.removeItem(ROOM_KEY);
-        } catch {}
+        // Forget every local trace even if the user switched rooms while the
+        // delete request was in flight.
+        await forgetDeletedRoom(room.id);
         // Tear down the UI only if the deleted room is still the one shown;
         // after a switch, the current room's view (and draft) must survive.
         if (sameView(room, epoch)) {
@@ -2875,12 +3336,13 @@
         state.gap = false;
         state.noOlderHistory = false;
         state.needsRebuild = false; // a deferred rebuild belongs to the old room
+        state.changingIdentity = false;
+        state.changingFrom = null;
         state.roomEpoch += 1;
         try {
           localStorage.setItem(ROOM_KEY, JSON.stringify({ id: room.id }));
         } catch {}
-        state.seen[room.id] = room.last_activity;
-        saveSeen();
+        // Selecting a room is not proof that its messages rendered.
         el.msgs.textContent = "";
         el.older.hidden = true;
         el.streamWrap.hidden = false;
@@ -2933,6 +3395,8 @@
           updateJump();
         }
         if (!was && state.follow) maybeMarkRead(); // caught up by scrolling
+        // The scroll position is already current, so no frame deferral is needed.
+        noteSeen();
       });
 
       el.jump.addEventListener("click", () => {
@@ -2953,6 +3417,8 @@
         updateJump();
         scrollBottom();
         maybeMarkRead();
+        // Explicit tail navigation has already realized the scroll position.
+        noteSeen();
       });
 
       el.older.addEventListener("click", loadOlder);
@@ -2961,18 +3427,18 @@
         // whole room read (same semantics as an agent's bare mark_read).
         const room = state.current;
         const epoch = state.roomEpoch;
-        const name = identity();
+        const agentId = identity();
         const last = state.msgs.length
           ? state.msgs[state.msgs.length - 1].seq
           : 0;
-        if (!room || !name || !joinedHere() || !last) return;
+        if (!room || !agentId || !joinedHere() || !last) return;
         // Same identity guard as maybeMarkRead: never advance a marker whose
         // baseline was fetched for a different (pre-rename) identity.
-        if (state.markerIdent !== name) return;
+        if (state.markerIdent !== agentId) return;
         try {
           const r = await postJson("/api/read", {
             room: room.id,
-            name,
+            agent_id: agentId,
             seq: last,
           });
           // A delayed response must not mutate another visit's state.
@@ -2995,13 +3461,18 @@
         }
       });
       el.leaveBtn.addEventListener("click", leaveCurrent);
-      el.identBtn.addEventListener("click", () => {
-        el.composeBox.hidden = true;
-        el.composeJoin.hidden = false;
-        el.joinName.value = identity();
+      function startChangingIdentity() {
+        const current = currentIdentity();
+        if (!current) return;
+        state.changingIdentity = true;
+        state.changingFrom = current.agent_id;
+        el.joinName.value = current.base_name;
+        renderComposer();
         el.joinName.focus();
         el.joinName.select();
-      });
+      }
+      el.identBtn.addEventListener("click", startChangingIdentity);
+      el.joinChangeBtn.addEventListener("click", startChangingIdentity);
       el.replyTarget.addEventListener("click", clearReply);
       el.send.addEventListener("click", sendMessage);
       el.composeText.addEventListener("input", autosize);
@@ -3013,8 +3484,11 @@
         if (e.key === "Escape") clearReply();
       });
       el.joinName.addEventListener("keydown", (e) => {
-        // Escape backs out of "Change name" when already joined.
-        if (e.key === "Escape" && joinedHere()) renderComposer();
+        if (e.key === "Escape" && currentIdentity()) {
+          state.changingIdentity = false;
+          state.changingFrom = null;
+          renderComposer();
+        }
       });
       el.search.addEventListener("keydown", (e) => {
         if (e.key === "Enter") {
@@ -3036,7 +3510,11 @@
         if (document.hidden) return;
         loadNew(false);
         loadRooms();
-        maybeMarkRead();
+        // Record hidden arrivals only after the visible frame can paint them.
+        requestAnimationFrame(() => {
+          noteSeen();
+          maybeMarkRead();
+        });
       });
 
       // Another tab changing the identity or the membership map invalidates
@@ -3046,7 +3524,28 @@
       // only for OTHER documents, so same-tab writes never loop through here;
       // a discarded in-flight initial load re-arms via pendingInitial.)
       window.addEventListener("storage", (e) => {
+        if (e.key === SEEN_KEY) {
+          const before = parseSeen(e.oldValue);
+          const after = parseSeen(e.newValue);
+          for (const room of Object.keys(before)) {
+            if (!(room in after)) delete state.seen[room];
+          }
+          for (const [room, seq] of Object.entries(after)) {
+            mergeSeen(state.seen, room, seq);
+          }
+          renderRooms();
+          return;
+        }
+        if (e.key === GHOST_KEY) {
+          retryGhosts();
+          return;
+        }
         if (e.key !== IDENT_KEY && e.key !== JOINED_KEY) return;
+        if (e.key === IDENT_KEY) {
+          reloadIdentityState();
+          state.changingIdentity = false;
+          state.changingFrom = null;
+        }
         state.roomEpoch += 1;
         state.lastReadSent = 0;
         state.marker = -1;
@@ -3064,18 +3563,46 @@
           computeGap();
           fetchMarker();
         }
+        if (e.key === IDENT_KEY) {
+          if (browserIdentity.pending_allocation) {
+            recoverPendingAllocation().then((recovered) => {
+              if (!recovered) return;
+              state.roomEpoch += 1;
+              state.lastReadSent = 0;
+              state.marker = -1;
+              state.markerIdent = null;
+              state.gap = false;
+              renderComposer();
+              if (state.current) {
+                if (state.searchMode) state.needsRebuild = true;
+                else rebuildStream();
+                computeGap();
+                fetchMarker();
+              }
+              retryGhosts();
+            });
+          } else {
+            retryGhosts();
+          }
+        }
       });
 
       setInterval(() => {
         if (!document.hidden) loadNew(false);
       }, POLL_MS);
       setInterval(() => {
-        if (!document.hidden) loadRooms();
+        if (!document.hidden) {
+          loadRooms();
+          // Failed leaves and uncertain rejoins must converge even when the
+          // user keeps this page open and performs no later identity action.
+          if (loadGhosts().length > 0) retryGhosts();
+        }
       }, ROOMS_MS);
 
       (async function init() {
         showPlaceholder("Loading...", "");
-        retryGhosts(); // clean up any leaves that failed in a prior session
+        const recovered = await recoverPendingAllocation();
+        if (recovered) retryGhosts();
         await loadRooms();
         let savedId = null;
         try {
@@ -3088,7 +3615,7 @@
         } else if (state.rooms.length) {
           showPlaceholder(
             "Pick a room.",
-            "Rooms are listed on the left; the amber dot marks activity you have not seen.",
+            "Rooms are listed on the left; the activity dot marks messages you have not seen.",
           );
         }
       })();