feat: collab fixes, Cesium OOM mitigation, and frontend precompile

Collaboration (ported from build-small-hackathon/storybook_test):
- AI + journey mutual-exclusion locks (server-authoritative), room
capacity cap, SSE reconnect hardening, live photos_state sync,
activity presence beacon, synced journey playback / darkroom develop.

Cesium memory: cap 3D-tiles cache (cacheBytes) so passed-over tiles are
evicted instead of accumulating across the flythrough, dynamic SSE to
coarsen the horizon, globe tile-cache limits, and coarsen+trim before the
end-of-journey overview (the OOM spike). Adds a webglcontextlost guard.

Frontend first-boot latency: precompile the in-browser JSX with esbuild
(build_frontend.py -> index.build.html) so we no longer ship
@babel /standalone (~0.7 MB gzip) or transpile ~7.5k lines on the client's
main thread before first paint. index.html stays the editable source;
app.py serves index.build.html when present and caches the assembled HTML.

app.py

@@ -2448,6 +2448,21 @@ RELAY_EVENTS = {
     "photo_pinned", "photo_moved", "photo_props", "photos_reset",
     # navigation that collaborators can optionally follow
     "screen_changed", "variant_changed",
+    # LIVE shared image library: the full photo list, relayed on every
+    # add / delete / edit so both people always see the same images instantly.
+    "photos_state",
+    # ambient "what is my collaborator doing / where are they" presence beacon
+    # (navigation, AI activity, etc.) — shown as a floating label by the cursor.
+    "activity",
+    # SYNCED "Play your journey" playback. Only the lock-holding driver emits
+    # these; the peer applies them so both watch the SAME flythrough. The lock
+    # itself (journey_acquire/release/state) is server-owned (NON_RELAY) below.
+    "journey_frame", "journey_transport", "journey_start", "journey_stop",
+    # darkroom develop: which prints have been revealed (shake) so the peer's
+    # darkroom shows the same reveal progress and developed watercolours.
+    "darkroom_reveal", "darkroom_phase", "darkroom_developed",
+    # map fullscreen toggle (optional follow, same as screen/variant)
+    "map_fullscreen",
 }
 
 # Types the server originates or manages itself — these must NEVER be relayed
@@ -2456,8 +2471,20 @@ NON_RELAY_EVENTS = {
     "init", "me", "presence", "presence_update", "status",
     "user_joined", "user_left", "rename", "error",
     "join_request", "join_pending", "join_declined", "admit_join", "decline_join", "cancel_join",
+    # the AI mutual-exclusion lock is server-authoritative: clients REQUEST it,
+    # the server grants/denies and broadcasts the resulting ai_state. Clients
+    # may not forge ai_state directly, so it's non-relay.
+    "ai_acquire", "ai_release", "ai_state",
+    # the journey mutual-exclusion lock is likewise server-authoritative.
+    "journey_acquire", "journey_release", "journey_refresh", "journey_state",
+    # room-full notice is server-originated
+    "room_full",
 }
 
+# A room holds at most this many simultaneous participants. The owner plus one
+# guest = 2. A third connection is rejected with a room_full notice.
+ROOM_CAPACITY = int(os.environ.get("SOZAI_ROOM_CAPACITY", "2"))
+
 
 # NOTE: This transport was a raw WebSocket (/ws/{room_id}). Hugging Face
 # Spaces' router silently drops custom (non-Gradio) WebSocket UPGRADE requests
@@ -2515,6 +2542,114 @@ class Manager:
     def __init__(self):
         self.rooms = {}     # room_id -> {session_id: _Client}  (admitted)
         self.pending = {}   # room_id -> {session_id: info}     (awaiting host)
+        # AI mutual-exclusion lock per room. room_id -> {"session_id","name","action","ts"}
+        # or None when free. Only one participant may run AI at a time.
+        self.ai_lock = {}
+        # Journey mutual-exclusion lock per room. The "Play your journey"
+        # flythrough (and the watercolour "develop" pass) are GPU/memory heavy;
+        # letting BOTH people trigger them at once risks an out-of-memory crash.
+        # So only one participant may drive a journey at a time. The driver's
+        # control frames are relayed to the peer so they watch the SAME playback
+        # (see the journey_* relay events) — the peer's button stays disabled
+        # until the driver finishes or stops. room_id -> {session_id,name,ts}.
+        self.journey_lock = {}
+
+    # ---- capacity --------------------------------------------------------- #
+    def participant_count(self, room_id):
+        """Number of DISTINCT admitted sessions (a person who reconnects with the
+        same session_id counts once, so a refresh doesn't burn a seat)."""
+        return len({sid for sid in self.rooms.get(room_id, {})})
+
+    def has_seat(self, room_id, session_id):
+        """True if this session can occupy/continue a seat: either it's already
+        in the room (reconnect) or the room is below capacity."""
+        peers = self.rooms.get(room_id, {})
+        if session_id in peers:
+            return True
+        return len(peers) < ROOM_CAPACITY
+
+    # ---- AI lock ---------------------------------------------------------- #
+    AI_LOCK_TIMEOUT = 90  # seconds; a stale lock (crashed holder) auto-expires
+
+    def ai_state(self, room_id):
+        """Current AI lock for a room as a JSON-safe dict (or {'holder': None})."""
+        lock = self.ai_lock.get(room_id)
+        if lock and (time.time() - lock["ts"]) > self.AI_LOCK_TIMEOUT:
+            # stale — the holder went away without releasing
+            self.ai_lock.pop(room_id, None)
+            lock = None
+        if not lock:
+            return {"holder": None}
+        return {"holder": {k: lock[k] for k in ("session_id", "name", "action")}}
+
+    def ai_acquire(self, room_id, session_id, name, action):
+        """Try to take the AI lock. Returns True if acquired (or already held by
+        this same session — re-acquire/refresh), False if held by someone else."""
+        lock = self.ai_lock.get(room_id)
+        if lock and (time.time() - lock["ts"]) > self.AI_LOCK_TIMEOUT:
+            lock = None
+        if lock and lock["session_id"] != session_id:
+            return False
+        self.ai_lock[room_id] = {
+            "session_id": session_id, "name": name,
+            "action": action, "ts": time.time(),
+        }
+        return True
+
+    def ai_release(self, room_id, session_id):
+        """Release the lock if this session holds it."""
+        lock = self.ai_lock.get(room_id)
+        if lock and lock["session_id"] == session_id:
+            self.ai_lock.pop(room_id, None)
+            return True
+        return False
+
+    def ai_release_all(self, room_id, session_id):
+        """Drop the lock unconditionally if held by this session (used on
+        disconnect so a vanished holder never blocks the room)."""
+        return self.ai_release(room_id, session_id)
+
+    # ---- Journey lock ----------------------------------------------------- #
+    # The flythrough can run for a while, so its lock lives longer than the AI
+    # one. A crashed driver still auto-expires so the room never gets stuck.
+    JOURNEY_LOCK_TIMEOUT = 600  # seconds
+
+    def journey_state(self, room_id):
+        """Current journey lock for a room as a JSON-safe dict (or {'driver': None})."""
+        lock = self.journey_lock.get(room_id)
+        if lock and (time.time() - lock["ts"]) > self.JOURNEY_LOCK_TIMEOUT:
+            self.journey_lock.pop(room_id, None)
+            lock = None
+        if not lock:
+            return {"driver": None}
+        return {"driver": {k: lock[k] for k in ("session_id", "name")}}
+
+    def journey_acquire(self, room_id, session_id, name):
+        """Try to take the journey lock. True if acquired (or re-acquired by the
+        same session), False if another participant is already driving."""
+        lock = self.journey_lock.get(room_id)
+        if lock and (time.time() - lock["ts"]) > self.JOURNEY_LOCK_TIMEOUT:
+            lock = None
+        if lock and lock["session_id"] != session_id:
+            return False
+        self.journey_lock[room_id] = {"session_id": session_id, "name": name, "ts": time.time()}
+        return True
+
+    def journey_refresh(self, room_id, session_id):
+        """Keep a long-running journey lock alive while the driver streams frames."""
+        lock = self.journey_lock.get(room_id)
+        if lock and lock["session_id"] == session_id:
+            lock["ts"] = time.time()
+            return True
+        return False
+
+    def journey_release(self, room_id, session_id):
+        """Release the journey lock if this session holds it."""
+        lock = self.journey_lock.get(room_id)
+        if lock and lock["session_id"] == session_id:
+            self.journey_lock.pop(room_id, None)
+            return True
+        return False
 
     # ---- admitted participants -------------------------------------------- #
     def add_client(self, room_id, client):
@@ -2609,14 +2744,22 @@ _sse_queues = {}  # (room_id, session_id) -> asyncio.Queue
 
 
 def _sse_queue(room_id, session_id):
+    """Return a FRESH queue for a new SSE connection and mark it as the current
+    one for this (room, session). If the same session reconnects (e.g. a page
+    refresh opens a new stream before the old one's cleanup runs), the newest
+    connection wins: the old generator detects it is no longer current and bows
+    out WITHOUT evicting the live participant. This prevents a reconnect from
+    dropping your own seat or AI lock."""
     key = (room_id, session_id)
-    q = _sse_queues.get(key)
-    if q is None:
-        q = asyncio.Queue()
-        _sse_queues[key] = q
+    q = asyncio.Queue()
+    _sse_queues[key] = q
     return q
 
 
+def _is_current_sse(room_id, session_id, q):
+    return _sse_queues.get((room_id, session_id)) is q
+
+
 async def _relay_incoming(room_id, session_id, data):
     """Apply one client→server event (formerly a WS receive_json). Shared by the
     POST /send endpoint. `data` already has a 'type'."""
@@ -2645,6 +2788,53 @@ async def _relay_incoming(room_id, session_id, data):
             pend.event.set()
         return
 
+    # ---- AI mutual-exclusion lock ----
+    # A client asks to start an AI action; the server grants it only if no one
+    # else holds the lock, then broadcasts the authoritative ai_state to BOTH
+    # people so the other user's AI controls disable. The requester is told
+    # whether it won via a direct ai_state (with a `granted` hint).
+    if t == "ai_acquire" and info is not None:
+        action = str(data.get("action") or "AI")[:40]
+        ok = manager.ai_acquire(room_id, session_id, info["name"], action)
+        # tell the requester the outcome (granted true/false)
+        await manager.send_to(room_id, session_id, {
+            "type": "ai_state", "granted": ok, **manager.ai_state(room_id),
+        })
+        # tell everyone the new state (so the peer disables their buttons)
+        await manager.broadcast(room_id, {"type": "ai_state", **manager.ai_state(room_id)}, exclude=session_id)
+        touch_room(room_id)
+        return
+
+    if t == "ai_release" and info is not None:
+        manager.ai_release(room_id, session_id)
+        await manager.broadcast(room_id, {"type": "ai_state", **manager.ai_state(room_id)})
+        touch_room(room_id)
+        return
+
+    # ---- Journey mutual-exclusion lock ----
+    # Like the AI lock, but for the "Play your journey" flythrough / develop.
+    # The requester is told whether it won; everyone is told the new driver so
+    # the peer's Play button disables. The driver then streams journey_frame
+    # events (relayed normally) so the peer watches the same playback.
+    if t == "journey_acquire" and info is not None:
+        ok = manager.journey_acquire(room_id, session_id, info["name"])
+        await manager.send_to(room_id, session_id, {
+            "type": "journey_state", "granted": ok, **manager.journey_state(room_id),
+        })
+        await manager.broadcast(room_id, {"type": "journey_state", **manager.journey_state(room_id)}, exclude=session_id)
+        touch_room(room_id)
+        return
+
+    if t == "journey_refresh" and info is not None:
+        manager.journey_refresh(room_id, session_id)
+        return
+
+    if t == "journey_release" and info is not None:
+        manager.journey_release(room_id, session_id)
+        await manager.broadcast(room_id, {"type": "journey_state", **manager.journey_state(room_id)})
+        touch_room(room_id)
+        return
+
     # explicitly known (RELAY_EVENTS) or simply not a server-owned type
     # (NON_RELAY_EVENTS) — this way the frontend can introduce new interaction
     # events without the server silently dropping them.
@@ -2653,7 +2843,7 @@ async def _relay_incoming(room_id, session_id, data):
         await manager.broadcast(room_id, data, exclude=session_id)
         # cursors + transient interaction pings are too chatty to keep the room
         # alive on; everything else counts as real activity.
-        if t not in ("cursor_position", "interaction"):
+        if t not in ("cursor_position", "interaction", "activity", "photos_state"):
             touch_room(room_id)
 
 
@@ -2686,6 +2876,17 @@ async def room_stream(room_id: str, request: Request):
     host = manager.host_client(room_id, owner_session)
     needs_approval = (not is_owner) and (host is not None)
 
+    # ---- capacity gate: at most ROOM_CAPACITY (2) people per room ----
+    # The owner is never locked out of their own room. Anyone else is rejected
+    # when the room is already full AND they don't already hold a seat (a plain
+    # reconnect with the same session_id keeps its seat). We emit a room_full
+    # notice, then close the stream so the client can show "Room is full".
+    if not is_owner and not manager.has_seat(room_id, session_id):
+        async def _full():
+            yield f'data: {json.dumps({"type": "room_full", "capacity": ROOM_CAPACITY}, separators=(",", ":"))}\n\n'
+        _sse_queues.pop((room_id, session_id), None)
+        return StreamingResponse(_full(), media_type="text/event-stream", headers={"Cache-Control": "no-cache"})
+
     if needs_approval:
         pend = _PendingJoin(info)
         manager.add_pending(room_id, pend)
@@ -2705,9 +2906,18 @@ async def room_stream(room_id: str, request: Request):
             client = manager.admit(room_id, info)
             client.queue = q  # reuse the queue the SSE stream is already draining
     else:
-        client = _Client(info)
-        client.queue = q
-        manager.add_client(room_id, client)
+        # New connection OR a reconnect by the same session. If the session is
+        # already seated (reconnect), keep its existing _Client but repoint its
+        # queue at this new SSE stream so broadcasts reach the live connection.
+        existing = manager.get_client(room_id, session_id)
+        if existing is not None:
+            existing.queue = q
+            existing.alive = True
+            client = existing
+        else:
+            client = _Client(info)
+            client.queue = q
+            manager.add_client(room_id, client)
 
     if client is not None:
         now = time.time()
@@ -2720,6 +2930,12 @@ async def room_stream(room_id: str, request: Request):
             _conn.commit()
         touch_room(room_id)
         await q.put({"type": "init", "you": _public(info), "participants": manager.presence(room_id)})
+        # seed the current AI-lock state so a late joiner immediately knows if
+        # the other person is mid-AI-action (and disables their own AI buttons).
+        await q.put({"type": "ai_state", **manager.ai_state(room_id)})
+        # likewise seed the journey-lock state, so a late joiner's Play button
+        # is correctly disabled if the other person is already driving a journey.
+        await q.put({"type": "journey_state", **manager.journey_state(room_id)})
         await manager.broadcast(room_id, {"type": "user_joined", "participant": _public(info)}, exclude=session_id)
         await manager.broadcast(room_id, {"type": "presence_update", "participants": manager.presence(room_id)})
 
@@ -2738,11 +2954,27 @@ async def room_stream(room_id: str, request: Request):
         except asyncio.CancelledError:
             pass
         finally:
-            _sse_queues.pop((room_id, session_id), None)
-            if manager.get_client(room_id, session_id) is not None:
+            # Only tear down if THIS connection is still the current one for the
+            # session. If the same session reconnected (refresh), a newer stream
+            # already took over — this superseded generator must NOT evict the
+            # live participant, drop their seat, or free their AI lock.
+            superseded = not _is_current_sse(room_id, session_id, q)
+            if not superseded:
+                _sse_queues.pop((room_id, session_id), None)
+            if not superseded and manager.get_client(room_id, session_id) is not None:
+                # if this person was holding the AI lock, free it so the room
+                # isn't stuck "someone is generating…" forever after they leave.
+                released = manager.ai_release_all(room_id, session_id)
+                # same for the journey lock: a driver who leaves must not block
+                # the peer's Play button forever.
+                journey_released = manager.journey_release(room_id, session_id)
                 manager.disconnect(room_id, session_id)
                 await manager.broadcast(room_id, {"type": "user_left", "participant": _public(info)})
                 await manager.broadcast(room_id, {"type": "presence_update", "participants": manager.presence(room_id)})
+                if released:
+                    await manager.broadcast(room_id, {"type": "ai_state", **manager.ai_state(room_id)})
+                if journey_released:
+                    await manager.broadcast(room_id, {"type": "journey_state", **manager.journey_state(room_id)})
 
     return StreamingResponse(event_gen(), media_type="text/event-stream", headers={
         "Cache-Control": "no-cache",
@@ -2930,8 +3162,32 @@ def _inline_maplibre(html: str) -> str:
     return html.replace(marker, "\n".join(parts), 1)
 
 
+_APP_HTML_CACHE: str | None = None
+
+
 def _app_html() -> str:
-    return _inline_maplibre(_read_html("index.html"))
+    """Assembled app HTML, built once and cached in memory (the file doesn't
+    change at runtime, so re-reading + re-inlining ~500 KB per request is waste).
+
+    Prefers `index.build.html` — the precompiled output of build_frontend.py,
+    which ships plain JS instead of making the browser download @babel/standalone
+    and transpile the whole app on first paint. Falls back to `index.html` (the
+    editable source, which still works via the in-browser Babel fallback) when
+    no build exists, e.g. during local development."""
+    global _APP_HTML_CACHE
+    if _APP_HTML_CACHE is None:
+        built = os.path.join(BASE, "index.build.html")
+        if os.path.exists(built):
+            if os.path.getmtime(os.path.join(BASE, "index.html")) > os.path.getmtime(built):
+                print("[frontend] WARNING: index.html is newer than index.build.html — "
+                      "rerun `python build_frontend.py` before deploying.")
+            name = "index.build.html"
+        else:
+            print("[frontend] no index.build.html — serving un-precompiled index.html "
+                  "(slow first boot). Run `python build_frontend.py`.")
+            name = "index.html"
+        _APP_HTML_CACHE = _inline_maplibre(_read_html(name))
+    return _APP_HTML_CACHE
 
 
 @app.get("/", response_class=HTMLResponse)

build_frontend.py

@@ -0,0 +1,98 @@
+#!/usr/bin/env python3
+"""Precompile the in-browser JSX so first boot doesn't ship @babel/standalone
+(~0.7 MB gzip) and transpile ~7.5k lines of JSX on the client's main thread
+before anything paints.
+
+`index.html` stays the editable source: it still works opened standalone via
+the in-browser Babel fallback. This script reads it and writes
+`index.build.html` with:
+  * the `<script type="text/babel">` block transpiled to plain JS (esbuild),
+  * the `@babel/standalone` CDN <script> removed.
+
+The server (app.py) serves `index.build.html` when present, else falls back to
+`index.html`. So the deploy flow is:
+
+    python build_frontend.py   # before `git push` to the Space
+
+Requires `npx` (esbuild is fetched on demand) or a local `esbuild` on PATH.
+"""
+import os
+import re
+import shutil
+import subprocess
+import sys
+import tempfile
+
+BASE = os.path.dirname(os.path.abspath(__file__))
+SRC = os.path.join(BASE, "index.html")
+OUT = os.path.join(BASE, "index.build.html")
+ESBUILD_VERSION = "0.21.5"
+
+# Match the SINGLE in-browser Babel block. The block contains no nested
+# "</script>" (verified), so the non-greedy match captures all of it.
+BABEL_BLOCK_RE = re.compile(r'<script type="text/babel"[^>]*>(.*?)</script>', re.S)
+BABEL_CDN_RE = re.compile(r'[ \t]*<script[^>]*@babel/standalone[^>]*></script>\s*\n', re.S)
+
+
+def _esbuild_cmd():
+    """Prefer a local esbuild; otherwise go through npx (downloads on demand)."""
+    if shutil.which("esbuild"):
+        return ["esbuild"]
+    if shutil.which("npx"):
+        return ["npx", "--yes", f"esbuild@{ESBUILD_VERSION}"]
+    sys.exit("error: need `esbuild` or `npx` on PATH to precompile the frontend.")
+
+
+def transpile(jsx: str) -> str:
+    with tempfile.TemporaryDirectory() as td:
+        inp = os.path.join(td, "app.jsx")
+        outp = os.path.join(td, "app.js")
+        with open(inp, "w", encoding="utf-8") as fh:
+            fh.write(jsx)
+        # Classic JSX runtime against the global React UMD (no auto-import),
+        # matching the current `data-presets="react"` behaviour. es2020 keeps
+        # broad browser support without down-levelling more than Babel did.
+        cmd = _esbuild_cmd() + [
+            inp,
+            "--jsx-factory=React.createElement",
+            "--jsx-fragment=React.Fragment",
+            "--target=es2020",
+            "--charset=utf8",
+            f"--outfile={outp}",
+        ]
+        res = subprocess.run(cmd, capture_output=True, text=True)
+        if res.returncode != 0:
+            sys.stderr.write(res.stderr)
+            sys.exit("error: esbuild failed to transpile the JSX (see above).")
+        with open(outp, "r", encoding="utf-8") as fh:
+            return fh.read()
+
+
+def main() -> None:
+    with open(SRC, "r", encoding="utf-8") as fh:
+        html = fh.read()
+
+    m = BABEL_BLOCK_RE.search(html)
+    if not m:
+        sys.exit('error: no <script type="text/babel"> block found in index.html')
+
+    js = transpile(m.group(1))
+    # Guard against any "</script>" inside string/template literals closing our tag early.
+    js = js.replace("</script", "<\\/script")
+
+    html = html[: m.start()] + "<script>\n" + js + "\n</script>" + html[m.end():]
+    html, n = BABEL_CDN_RE.subn("", html)
+    if n == 0:
+        print("warning: @babel/standalone CDN <script> not found to remove", file=sys.stderr)
+
+    header = "<!-- GENERATED by build_frontend.py from index.html — do not edit; edit index.html and rerun. -->\n"
+    with open(OUT, "w", encoding="utf-8") as fh:
+        fh.write(header + html)
+
+    print(f"wrote {os.path.relpath(OUT, BASE)} "
+          f"({len(html) / 1024:.0f} KB, JSX → {len(js) / 1024:.0f} KB plain JS, "
+          f"removed {n} babel CDN tag)")
+
+
+if __name__ == "__main__":
+    main()

index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Sozai · Add to Album</title>
+  <title>Sozai · Upload Photos</title>
   <link rel="icon" type="image/svg+xml" href="/assets/icon.svg" />
 
   <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -109,6 +109,21 @@
       * { @apply border-border outline-ring/50; }
       body { @apply bg-background text-foreground; }
       html { @apply font-sans; }
+      /* mobile: never let a stray wide element cause a horizontal scrollbar,
+         and use momentum scrolling + a sane tap target / text size. */
+      html, body {
+        max-width: 100%;
+        overflow-x: hidden;
+        -webkit-text-size-adjust: 100%;
+        scroll-behavior: smooth;
+      }
+      body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; }
+      /* media + canvases should never exceed their column on small screens */
+      img, video, canvas, svg { max-width: 100%; }
+    }
+    /* any element that scrolls internally gets momentum + smoothness on iOS */
+    .overflow-x-auto, .overflow-y-auto, .overflow-auto, [class*="overflow-"] {
+      -webkit-overflow-scrolling: touch;
     }
   </style>
 
@@ -1195,6 +1210,62 @@
       };
     })();
 
+    // ----------------------------------------------------------------- //
+    // LIVE shared image library.                                            //
+    // RoomPersistence above is the DURABLE layer (server JSON, debounced,    //
+    // seeds late joiners). PhotoSync is the LIVE layer: it relays the whole  //
+    // photo list over SSE on every local change so BOTH people see the same  //
+    // images the instant one of them uploads, deletes, or edits — captions   //
+    // and titles included, on every keystroke.                              //
+    //                                                                        //
+    // Echo guard: when we APPLY a list received from the peer, we set        //
+    // __sozaiApplyingRemote so the resulting store change doesn't bounce a   //
+    // photos_state straight back (which would loop forever).                 //
+    // ----------------------------------------------------------------- //
+    window.__sozaiApplyingRemote = false;
+    const PhotoSync = (function () {
+      let unsub = null;
+      let offRecv = null;
+      let lastSent = "";   // de-dupe identical payloads (e.g. no-op re-renders)
+
+      function broadcast(items) {
+        if (window.__sozaiApplyingRemote) return;   // don't echo remote applies
+        if (window.__sozaiSuppressSave) return;      // bulk load in progress
+        if (!Collab.isCollab()) return;
+        let payload;
+        try { payload = JSON.stringify(items); } catch (e) { return; }
+        if (payload === lastSent) return;             // nothing actually changed
+        lastSent = payload;
+        // send the full list every time. Photos are data-URLs, so this is the
+        // simplest correct model for a 2-person room: last-write-wins, always
+        // converging on an identical array. Sent on EVERY change (keystroke).
+        Collab.send("photos_state", { photos: items });
+      }
+
+      function apply(items) {
+        if (!Array.isArray(items)) return;
+        // remember what we're applying so our own broadcast() suppresses it,
+        // and so we don't re-send it as if it were a local edit.
+        lastSent = (function () { try { return JSON.stringify(items); } catch (e) { return ""; } })();
+        window.__sozaiApplyingRemote = true;
+        try { window.SozaiPhotos.replaceAll(items); }
+        finally { window.__sozaiApplyingRemote = false; }
+      }
+
+      return {
+        init() {
+          if (!Collab.isCollab()) return;
+          // local change → broadcast to the peer
+          unsub = window.SozaiPhotos.subscribe((items) => broadcast(items));
+          // peer change → apply locally
+          offRecv = Collab.on("photos_state", (m) => {
+            if (m && Array.isArray(m.photos)) apply(m.photos);
+          });
+        },
+        stop() { if (unsub) unsub(); if (offRecv) offRecv(); },
+      };
+    })();
+
     // Adapt a SozaiPhotos item to the shape that the map-view components expect.
     // x/y are deterministic synthetic percentages used for scrapbook pin positions.
     function storeToMoment(p, i) {
@@ -1246,6 +1317,177 @@
       useEffect(() => Collab.on("me", setM), []);
       return m;
     }
+
+    // ----------------------------------------------------------------- //
+    // AI mutual-exclusion lock (client side of the server's ai_state).      //
+    // Only one collaborator may run AI (auto-caption / title / tags / voice  //
+    // transcription) at a time. When one starts, the server grants them the  //
+    // lock and broadcasts ai_state; the other person's AI controls disable   //
+    // and show "<name> is generating…". Solo mode: always free, never locks. //
+    // ----------------------------------------------------------------- //
+    window.SozaiAI = (function () {
+      let holder = null;           // { session_id, name, action } or null
+      let listeners = [];
+      let pendingResolve = null;   // resolver for an in-flight acquire()
+      function emit() { listeners.forEach((fn) => { try { fn(holder); } catch (e) {} }); }
+      if (typeof window !== "undefined") {
+        Collab.on("ai_state", (m) => {
+          holder = (m && m.holder) ? m.holder : null;
+          // if this message answers OUR acquire request, resolve the promise
+          if (pendingResolve) {
+            const granted = !!(m && m.granted);
+            const r = pendingResolve; pendingResolve = null;
+            r(granted);
+          }
+          emit();
+        });
+      }
+      return {
+        get() { return holder; },
+        subscribe(fn) { listeners.push(fn); return () => { listeners = listeners.filter((f) => f !== fn); }; },
+        heldByOther(mySession) { return !!holder && holder.session_id !== mySession; },
+        // Try to take the lock for `action`. Resolves true if granted.
+        // Solo (not in a room): instantly true, nothing to coordinate.
+        acquire(action) {
+          if (!Collab.isCollab()) return Promise.resolve(true);
+          return new Promise((resolve) => {
+            if (pendingResolve) { const r = pendingResolve; pendingResolve = null; r(false); }
+            pendingResolve = resolve;
+            Collab.send("ai_acquire", { action: String(action || "AI").slice(0, 40) });
+            // safety: if the server never answers, don't hang forever
+            setTimeout(() => { if (pendingResolve === resolve) { pendingResolve = null; resolve(false); } }, 6000);
+          });
+        },
+        release() {
+          if (!Collab.isCollab()) return;
+          Collab.send("ai_release", {});
+        },
+      };
+    })();
+
+    // React hook: live AI-lock holder + whether THIS user's AI controls should
+    // be disabled (because the peer holds the lock).
+    function useAILock() {
+      const me = useMe();
+      const [holder, setHolder] = useState(window.SozaiAI.get());
+      useEffect(() => window.SozaiAI.subscribe(setHolder), []);
+      const mySession = (me && me.session_id) || Collab.sessionId();
+      const lockedByOther = !!holder && holder.session_id !== mySession;
+      return {
+        holder,
+        lockedByOther,
+        lockLabel: lockedByOther ? `${holder.name || "Someone"} is ${holder.action || "using AI"}…` : null,
+        acquire: (action) => window.SozaiAI.acquire(action),
+        release: () => window.SozaiAI.release(),
+      };
+    }
+
+    // ----------------------------------------------------------------- //
+    // Journey mutual-exclusion lock (client side of the server's          //
+    // journey_state). The "Play your journey" flythrough + watercolour     //
+    // "develop" are GPU/memory heavy, so only ONE person may drive at a    //
+    // time (prevents OOM). The driver streams journey_frame events so the  //
+    // peer watches the SAME playback; the peer's Play button stays         //
+    // disabled until the driver finishes or stops. Solo: always free.      //
+    // ----------------------------------------------------------------- //
+    window.SozaiJourney = (function () {
+      let driver = null;          // { session_id, name } or null
+      let listeners = [];
+      let pendingResolve = null;
+      let refreshTimer = null;
+      function emit() { listeners.forEach((fn) => { try { fn(driver); } catch (e) {} }); }
+      if (typeof window !== "undefined") {
+        Collab.on("journey_state", (m) => {
+          driver = (m && m.driver) ? m.driver : null;
+          if (pendingResolve) {
+            const granted = !!(m && m.granted);
+            const r = pendingResolve; pendingResolve = null;
+            r(granted);
+          }
+          emit();
+        });
+      }
+      function startRefresh() {
+        stopRefresh();
+        // keep the long-running lock alive while we drive the playback
+        refreshTimer = setInterval(() => { if (Collab.isCollab()) Collab.send("journey_refresh", {}); }, 30000);
+      }
+      function stopRefresh() { if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; } }
+      return {
+        get() { return driver; },
+        subscribe(fn) { listeners.push(fn); return () => { listeners = listeners.filter((f) => f !== fn); }; },
+        drivenByOther(mySession) { return !!driver && driver.session_id !== mySession; },
+        acquire() {
+          if (!Collab.isCollab()) return Promise.resolve(true);
+          return new Promise((resolve) => {
+            if (pendingResolve) { const r = pendingResolve; pendingResolve = null; r(false); }
+            pendingResolve = resolve;
+            Collab.send("journey_acquire", {});
+            setTimeout(() => { if (pendingResolve === resolve) { pendingResolve = null; resolve(false); } }, 6000);
+          });
+        },
+        beginRefresh() { startRefresh(); },
+        release() {
+          stopRefresh();
+          if (!Collab.isCollab()) return;
+          Collab.send("journey_release", {});
+        },
+        // relay one playback control frame to the peer (driver only)
+        frame(payload) { if (Collab.isCollab()) Collab.send("journey_frame", payload || {}); },
+      };
+    })();
+
+    // React hook: live journey driver + whether THIS user's Play button should
+    // be disabled (because the peer is already driving a journey).
+    function useJourneyLock() {
+      const me = useMe();
+      const [driver, setDriver] = useState(window.SozaiJourney.get());
+      useEffect(() => window.SozaiJourney.subscribe(setDriver), []);
+      const mySession = (me && me.session_id) || Collab.sessionId();
+      const drivenByMe = !!driver && driver.session_id === mySession;
+      const drivenByOther = !!driver && driver.session_id !== mySession;
+      return {
+        driver,
+        drivenByMe,
+        drivenByOther,
+        driverLabel: drivenByOther ? `${driver.name || "Someone"} is playing the journey…` : null,
+        acquire: () => window.SozaiJourney.acquire(),
+        release: () => window.SozaiJourney.release(),
+        beginRefresh: () => window.SozaiJourney.beginRefresh(),
+        frame: (p) => window.SozaiJourney.frame(p),
+      };
+    }
+
+    // React hook: the peer's most recent ambient activity (#4) — "where are
+    // they / what are they doing". Combines navigation beacons (activity) with
+    // the AI-lock state so AI work always shows even mid-action. Returns the
+    // freshest peer activity { name, color, label } or null.
+    function usePeerActivity() {
+      const me = useMe();
+      const [act, setAct] = useState(null);
+      const mySession = (me && me.session_id) || Collab.sessionId();
+      useEffect(() => {
+        const offAct = Collab.on("activity", (m) => {
+          if (!m || !m.from || m.from.session_id === mySession) return;
+          setAct({ name: m.from.name, color: m.from.color, label: m.label || "", t: Date.now() });
+        });
+        // a peer leaving clears their activity
+        const offLeft = Collab.on("user_left", () => setAct(null));
+        return () => { offAct && offAct(); offLeft && offLeft(); };
+      }, [mySession]);
+      // AI activity takes precedence and is derived from the authoritative lock
+      const ai = useAILock();
+      const journey = useJourneyLock();
+      if (ai.holder && ai.holder.session_id !== mySession) {
+        return { name: ai.holder.name, color: (act && act.color) || "#7c5cff", label: ai.holder.action || "using AI", ai: true };
+      }
+      // a peer driving the journey is shown the same way (so you always SEE it)
+      if (journey.drivenByOther) {
+        return { name: journey.driver.name, color: (act && act.color) || "#7c5cff", label: "playing the journey", ai: true };
+      }
+      return act;
+    }
+
     function initials(name) {
       const parts = (name || "Guest").trim().split(/\s+/);
       return ((parts[0]?.[0] || "G") + (parts[1]?.[0] || "")).toUpperCase();
@@ -1277,6 +1519,28 @@
       );
     }
 
+    // ----------------------------------------------------------------- //
+    // Peer activity pill (#4): a compact, live "Alex is exploring the map"   //
+    // indicator. Shows the collaborator's current screen, or their AI action  //
+    // when they're running AI. Hidden in solo mode or when nothing is known.  //
+    // ----------------------------------------------------------------- //
+    function PeerActivityPill() {
+      const act = usePeerActivity();
+      if (!Collab.isCollab() || !act || !act.label) return null;
+      const color = act.color || "#7c5cff";
+      return (
+        <span className="hidden items-center gap-1.5 rounded-full border-2 px-2.5 py-1 font-mono text-[10px] uppercase tracking-wide sm:inline-flex"
+          style={{ borderColor: color, color }}
+          title={`${act.name || "Collaborator"} is ${act.label}`}>
+          <span className="relative flex size-2">
+            <span className="absolute inline-flex size-full animate-ping rounded-full opacity-60" style={{ background: color }} />
+            <span className="relative inline-flex size-2 rounded-full" style={{ background: color }} />
+          </span>
+          <span className="max-w-[14rem] truncate">{act.name || "Collaborator"} · {act.label}</span>
+        </span>
+      );
+    }
+
     // ----------------------------------------------------------------- //
     // Collaboration bar (share code + link, presence, name, chat toggle)
     // ----------------------------------------------------------------- //
@@ -1355,6 +1619,8 @@
           </div>
 
           <div className="flex items-center gap-3">
+            {/* what the other person is doing right now (#4) */}
+            <PeerActivityPill />
             {/* presence */}
             <div className="flex items-center gap-1.5">
               <Users className="size-4 text-primary" />
@@ -1652,7 +1918,10 @@
       }
       return (
         <div className="flex flex-col items-center gap-4">
-          <div className="relative w-full max-w-xs">
+          {/* the backing cards lean down-right (translate-x), which visually
+              pulls the stack off-centre; nudge the whole stack left by half that
+              offset so the polaroid sits centred, especially on mobile. */}
+          <div className="relative w-full max-w-xs" style={{ marginRight: "0.375rem", marginLeft: "-0.375rem" }}>
             <div className="absolute inset-0 translate-x-3 translate-y-3 rotate-2 rounded-md border-2 border-primary/30 bg-card" />
             <div className="absolute inset-0 translate-x-1.5 translate-y-1.5 rotate-1 rounded-md border-2 border-primary/40 bg-card" />
             {/* keyed by index so the slide animation re-triggers on each browse;
@@ -1804,7 +2073,7 @@
             <button type="submit" disabled={busy} className="shrink-0 rounded-md border-2 border-primary bg-primary px-2.5 py-1.5 font-mono text-[11px] uppercase text-primary-foreground disabled:opacity-50">{busy ? "…" : "Go"}</button>
           </form>
           <div ref={elRef} className="h-40 w-full overflow-hidden rounded-md border-2 border-primary/40" />
-          <p className="mt-1.5 font-mono text-[10px] leading-snug text-muted-foreground">Drag the pin or tap the map — this is your photo's general area.</p>
+          <p className="mt-1.5 font-mono text-[10px] leading-snug text-muted-foreground">Drag the pin or tap the map to set your photo's general area.</p>
           <div className="mt-2 flex items-center gap-2">
             <span className="font-mono text-[10px] uppercase tracking-wide text-primary">Radius</span>
             <input type="range" min="100" max="5000" step="100" value={rad} onChange={(e) => onRad(parseInt(e.target.value, 10))} className="min-w-0 flex-1 accent-primary" />
@@ -1837,7 +2106,7 @@
     // ----------------------------------------------------------------- //
     // components/details-form.tsx
     // ----------------------------------------------------------------- //
-    function DetailsForm({ title, onTitleChange, caption, onCaptionChange, date, onDateChange, time, onTimeChange, lat, lon, locationName, radius, onLocationChange, tags, onTagsChange, onSubmit, onAutoCaption, autoBusy, autoStage, autoError, captionPrompt, onCaptionPromptChange, captionModel, onAutoTitle, titleBusy, titleStage, titleError, titlePrompt, onTitlePromptChange, onAutoTags, tagsBusy, tagsStage, tagsError, tagsPrompt, onTagsPromptChange, onCancelGen }) {
+    function DetailsForm({ title, onTitleChange, caption, onCaptionChange, date, onDateChange, time, onTimeChange, lat, lon, locationName, radius, onLocationChange, tags, onTagsChange, onSubmit, onAutoCaption, autoBusy, autoStage, autoError, captionPrompt, onCaptionPromptChange, captionModel, onAutoTitle, titleBusy, titleStage, titleError, titlePrompt, onTitlePromptChange, onAutoTags, tagsBusy, tagsStage, tagsError, tagsPrompt, onTagsPromptChange, onCancelGen, aiLockedByOther, aiLockLabel }) {
       const CancelGen = () => (
         <button type="button" onClick={onCancelGen}
           className="relative shrink-0 rounded-full border-2 border-primary/40 bg-card/85 px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-primary transition-colors hover:bg-accent hover:text-foreground">
@@ -1852,6 +2121,13 @@
       const DEFAULT_TAGS_HINT = "List 3 to 6 short, comma-separated tags for this photo.";
       return (
         <div className="flex flex-col gap-6">
+          {/* peer is running AI → explain why the AI buttons are disabled */}
+          {aiLockedByOther ? (
+            <div role="status" className="flex items-center gap-2 rounded-md border-2 border-primary/40 bg-accent px-3 py-2 text-sm text-accent-foreground">
+              <Wand2 className="size-4 shrink-0 animate-pulse text-primary" />
+              <span>{aiLockLabel || "Your collaborator is using AI…"} You can use AI again when they're done.</span>
+            </div>
+          ) : null}
           {/* title */}
           <div className="space-y-2">
             <div className="flex items-center justify-between gap-2">
@@ -1865,9 +2141,10 @@
                     showTitlePrompt ? "border-primary bg-accent text-foreground" : "border-primary/60 text-primary hover:bg-accent")}>
                   <Settings className="size-3.5" /> Prompt
                 </button>
-                <button type="button" onClick={onAutoTitle} disabled={titleBusy}
-                  className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-2.5 py-1 font-mono text-[11px] uppercase tracking-wide text-primary transition-colors hover:bg-accent disabled:opacity-60">
-                  <Wand2 className={cn("size-3.5", titleBusy && "animate-pulse")} /> {titleBusy ? "Naming…" : "Auto-generate"}
+                <button type="button" onClick={onAutoTitle} disabled={titleBusy || aiLockedByOther}
+                  title={aiLockedByOther ? aiLockLabel : undefined}
+                  className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-2.5 py-1 font-mono text-[11px] uppercase tracking-wide text-primary transition-colors hover:bg-accent disabled:opacity-60 disabled:cursor-not-allowed">
+                  <Wand2 className={cn("size-3.5", titleBusy && "animate-pulse")} /> {titleBusy ? "Naming…" : (aiLockedByOther ? "AI busy" : "Auto-generate")}
                 </button>
               </div>
             </div>
@@ -1937,9 +2214,10 @@
                     showPrompt ? "border-primary bg-accent text-foreground" : "border-primary/60 text-primary hover:bg-accent")}>
                   <Settings className="size-3.5" /> Prompt
                 </button>
-                <button type="button" onClick={onAutoCaption} disabled={autoBusy}
-                  className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-2.5 py-1 font-mono text-[11px] uppercase tracking-wide text-primary transition-colors hover:bg-accent disabled:opacity-60">
-                  <Wand2 className={cn("size-3.5", autoBusy && "animate-pulse")} /> {autoBusy ? "Developing…" : "Auto-generate"}
+                <button type="button" onClick={onAutoCaption} disabled={autoBusy || aiLockedByOther}
+                  title={aiLockedByOther ? aiLockLabel : undefined}
+                  className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-2.5 py-1 font-mono text-[11px] uppercase tracking-wide text-primary transition-colors hover:bg-accent disabled:opacity-60 disabled:cursor-not-allowed">
+                  <Wand2 className={cn("size-3.5", autoBusy && "animate-pulse")} /> {autoBusy ? "Developing…" : (aiLockedByOther ? "AI busy" : "Auto-generate")}
                 </button>
               </div>
             </div>
@@ -2095,12 +2373,22 @@
       const [tagsBusy, setTagsBusy] = useState(false);
       const [tagsError, setTagsError] = useState(null);
       const [tagsStage, setTagsStage] = useState("");
+      const aiLock = useAILock();   // server-coordinated AI mutual exclusion
 
-      // remote field edits from collaborators - apply by photo index onto the
-      // single stackPhotos source of truth.
+      // Remote field edits from collaborators. The full photo list also syncs
+      // via photos_state, but object_updated gives a snappier single-field
+      // update; we apply it to the shared store (by resolving index→id) so it
+      // converges with photos_state instead of fighting a private copy.
       useEffect(() => Collab.on("object_updated", (m) => {
         if (typeof m.index !== "number" || !m.kind) return;
-        setStackPhotos((prev) => prev.map((p, i) => (i === m.index ? { ...p, [m.kind]: m.value } : p)));
+        if (window.__sozaiApplyingRemote) return;   // avoid echo while applying a full list
+        const target = window.SozaiPhotos.all()[m.index];
+        if (!target) return;
+        if (m.kind === "location" && m.value && typeof m.value === "object") {
+          window.SozaiPhotos.upsert(target.id, m.value);
+        } else {
+          window.SozaiPhotos.upsert(target.id, { [m.kind]: m.value });
+        }
       }), []);
 
       // follow a collaborator to the photo they switch to (when follow is on)
@@ -2130,23 +2418,15 @@
       const date = (photo && photo.date != null && photo.date !== "") ? photo.date : DEFAULT_DATE;
       const time = (photo && photo.time != null && photo.time !== "") ? photo.time : DEFAULT_TIME;
 
-      // Seed the shared photo store with the album photos + their fields so the
-      // Map of My Time draft tray can pick and pin them (persisted).
-      useEffect(() => {
-        stackPhotos.forEach((p) => {
-          window.SozaiPhotos.upsert(p.id, {
-            src: p.src, alt: p.alt || "",
-            title: p.title || "", caption: p.caption || "",
-            date: p.date || "", time: p.time || "",
-          });
-        });
-      }, []); // eslint-disable-line
+      // (stackPhotos is now a live view of the shared SozaiPhotos store, so
+      // there's nothing to "seed" — the store IS the source of truth.)
 
-      // Edit a field on the current photo: updates the single source of truth,
-      // broadcasts to collaborators, and mirrors to the shared store.
+      // Edit a field on the current photo. With stackPhotos now mirroring the
+      // shared store (see Page), we write ONCE to the store; the subscription
+      // re-renders us and PhotoSync relays the change to the peer. We still send
+      // object_updated for the lightweight per-field "X is typing" live echo.
       function makeFieldSetter(kind) {
         return (value) => {
-          setStackPhotos((prev) => prev.map((p, i) => (i === safeIndex ? { ...p, [kind]: value } : p)));
           Collab.send("object_updated", { kind, index: safeIndex, value });
           const pid = photo && photo.id;
           if (pid) window.SozaiPhotos.upsert(pid, { [kind]: value });
@@ -2162,17 +2442,15 @@
       const locationName = (photo && photo.locationName) || "";
       const radius = (photo && photo.radius != null) ? photo.radius : null;
       // A location edit touches several fields at once (lat/lon/name/radius +
-      // the pinned flag) - mirror the whole patch to the photo and shared store.
+      // the pinned flag) - write the whole patch to the shared store.
       const setLocation = (patch) => {
-        setStackPhotos((prev) => prev.map((p, i) => (i === safeIndex ? { ...p, ...patch } : p)));
         const pid = photo && photo.id;
         if (pid) window.SozaiPhotos.upsert(pid, patch);
         Collab.send("object_updated", { kind: "location", index: safeIndex, value: patch });
       };
       // reposition the focal point of the current photo (object-position %),
-      // saved on the photo + shared store so it persists.
+      // saved on the shared store so it persists.
       function onReposition(fx, fy) {
-        setStackPhotos((prev) => prev.map((p, i) => (i === safeIndex ? { ...p, focusX: fx, focusY: fy } : p)));
         const pid = photo && photo.id;
         if (pid) window.SozaiPhotos.upsert(pid, { focusX: fx, focusY: fy });
       }
@@ -2218,14 +2496,13 @@
           };
           const id = window.SozaiPhotos.add(newPhoto);
           newPhoto.id = id;
-          setStackPhotos((prev) => [...prev, newPhoto]);
+          // (store subscription re-renders stackPhotos; no separate copy)
           added++;
           // resolve a readable "general area" for the EXIF GPS, in the background
           if (exif.lat != null) {
             reverseGeocode(exif.lat, exif.lon).then((nm) => {
               if (!nm) return;
               window.SozaiPhotos.upsert(id, { locationName: nm });
-              setStackPhotos((prev) => prev.map((p) => (p.id === id ? { ...p, locationName: nm } : p)));
             });
           }
         }
@@ -2244,9 +2521,7 @@
           title: s.title || "", caption: s.caption || "",
           date: DEFAULT_DATE, time: DEFAULT_TIME,
         };
-        const id = window.SozaiPhotos.add(newPhoto);
-        newPhoto.id = id;
-        setStackPhotos((prev) => [...prev, newPhoto]);
+        window.SozaiPhotos.add(newPhoto);
         setPhotoIndex(base);
       }
       // "Try a sample" — load the whole built-in photo set at once (with their
@@ -2263,7 +2538,7 @@
           date: p.date, time: p.time, lat: p.lat, lon: p.lon,
           pinned: p.lat != null && p.lon != null,
         }));
-        setStackPhotos(loaded);
+        // store subscription re-renders stackPhotos
         setPhotoIndex(0);
       }
 
@@ -2303,7 +2578,7 @@
         if (typeof idx !== "number") idx = safeIndex;
         const removedId = stackPhotos[idx] && stackPhotos[idx].id;
         if (removedId) window.SozaiPhotos.remove(removedId);
-        setStackPhotos((prev) => prev.filter((_, i) => i !== idx));
+        // store subscription re-renders stackPhotos (and PhotoSync relays it)
         setPhotoIndex((prev) => {
           const next = prev > idx ? prev - 1 : prev;
           return Math.max(0, next);
@@ -2325,6 +2600,7 @@
         setAutoBusy(false); setAutoStage("");
         setTitleBusy(false); setTitleStage("");
         setTagsBusy(false); setTagsStage("");
+        aiLock.release();   // cancelling ends the AI action → free the shared lock
       }
 
       function changePhoto(delta) {
@@ -2361,6 +2637,9 @@
       async function handleAutoCaption() {
         if (autoBusy) return;
         if (!photo) return;
+        if (aiLock.lockedByOther) return;   // peer holds the AI lock
+        const got = await aiLock.acquire("generating a caption");
+        if (!got) return;                   // peer grabbed it first
         if (window.sozaiPing) window.sozaiPing("✨ auto-generating caption");
         setAutoBusy(true); setAutoError(null);
         const token = { cancelled: false, timers: [] };
@@ -2381,6 +2660,7 @@
             if (token.cancelled) return;          // cancelled mid-flight: drop it
             fn(); setAutoBusy(false); setAutoStage("");
             if (genRef.current === token) genRef.current = null;
+            aiLock.release();                     // free the shared AI lock
           }, wait);
           token.timers.push(t);
         };
@@ -2406,6 +2686,9 @@
       async function handleAutoTitle() {
         if (titleBusy) return;
         if (!photo) return;
+        if (aiLock.lockedByOther) return;
+        const got = await aiLock.acquire("generating a title");
+        if (!got) return;
         if (window.sozaiPing) window.sozaiPing("✨ auto-generating title");
         setTitleBusy(true); setTitleError(null);
         const token = { cancelled: false, timers: [] };
@@ -2425,6 +2708,7 @@
             if (token.cancelled) return;
             fn(); setTitleBusy(false); setTitleStage("");
             if (genRef.current === token) genRef.current = null;
+            aiLock.release();                     // free the shared AI lock
           }, wait);
           token.timers.push(t);
         };
@@ -2477,6 +2761,9 @@
       async function handleAutoTags() {
         if (tagsBusy) return;
         if (!photo) return;
+        if (aiLock.lockedByOther) return;
+        const got = await aiLock.acquire("generating tags");
+        if (!got) return;
         if (window.sozaiPing) window.sozaiPing("🏷️ auto-generating tags");
         setTagsBusy(true); setTagsError(null);
         const token = { cancelled: false, timers: [] };
@@ -2496,6 +2783,7 @@
             if (token.cancelled) return;
             fn(); setTagsBusy(false); setTagsStage("");
             if (genRef.current === token) genRef.current = null;
+            aiLock.release();                     // free the shared AI lock
           }, wait);
           token.timers.push(t);
         };
@@ -2550,10 +2838,9 @@
           return;
         }
         setValidationError(null);
-        // Push the album photos into the shared store so the MAP (and any live
-        // room) actually receives them. stackPhotos and SozaiPhotos are separate,
-        // and joining a room clears the store's seed — without this the next page
-        // shows "0 photos". GPS photos auto-pin onto the globe like the seed does.
+        // stackPhotos is now a live view of the shared store, so these are
+        // self-writes that simply ensure defaults (title/caption/pin) are
+        // materialised before we advance to the map. Harmless + idempotent.
         stackPhotos.forEach((p) => window.SozaiPhotos.upsert(p.id, {
           src: p.src, alt: p.alt || "",
           title: p.title || p.defaultTitle || "",
@@ -2583,7 +2870,7 @@
       return (
         <section className="w-full max-w-6xl rounded-xl border-2 border-primary bg-card shadow-lg">
           <header className="flex items-center justify-between gap-4 border-b-2 border-dashed border-[#f5edd8]/30 bg-[#13294b] px-5 py-4 sm:px-7">
-            <div className="flex items-center gap-2.5"><h1 className="font-display text-2xl text-[#f5edd8]">Develop Photos</h1></div>
+            <div className="flex items-center gap-2.5"><h1 className="font-display text-2xl text-[#f5edd8]">Upload Photos</h1></div>
             <div className="flex items-center gap-2">
               <button type="button" onClick={() => onOpenSettings && onOpenSettings()} aria-label="Settings" className="flex size-9 items-center justify-center rounded-md border-2 border-[#f5edd8]/50 text-[#f5edd8] transition-colors hover:bg-white/10"><Settings className="size-4" /></button>
             </div>
@@ -2642,17 +2929,18 @@
                 titlePrompt={settings.titlePrompt || ""} onTitlePromptChange={setTitlePrompt}
                 onAutoTags={handleAutoTags} tagsBusy={tagsBusy} tagsStage={tagsStage} tagsError={tagsError}
                 tagsPrompt={settings.tagsPrompt || ""} onTagsPromptChange={(v) => update({ tagsPrompt: v })}
-                onCancelGen={cancelGeneration} />
+                onCancelGen={cancelGeneration}
+                aiLockedByOther={aiLock.lockedByOther} aiLockLabel={aiLock.lockLabel} />
 
               {/* choose how the Map of My Time will look once developed */}
               <MapStylePicker variant={mapVariant} onChange={setMapVariant} />
 
               {validationError ? <p role="alert" className="rounded-md border-2 border-[oklch(0.55_0.18_25)]/50 bg-[oklch(0.55_0.18_25)]/10 px-3 py-2 text-center font-mono text-[11px] uppercase tracking-wide text-[oklch(0.5_0.18_25)]">{validationError}</p> : null}
               {confirmation ? <p role="status" className="rounded-md border-2 border-primary/40 bg-accent px-3 py-2 text-center text-sm text-accent-foreground">{confirmation}</p> : null}
-              {/* develop = advance to the darkroom, so an arrow rather than a plus */}
+              {/* advance to the darkroom */}
               <button type="button" onClick={handleSubmit}
                 className="flex w-full items-center justify-center gap-2 rounded-md border-2 border-primary bg-primary px-4 py-3 font-mono text-sm font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90">
-                Develop Photos <ArrowRight className="size-4" />
+                Upload Photos <ArrowRight className="size-4" />
               </button>
             </div>
           </div>
@@ -2701,18 +2989,23 @@
     // components/map/moment-card.tsx
     // ----------------------------------------------------------------- //
     function MomentCard({ moment, selected, onSelect, rotate = "" }) {
+      // We cap albums at a handful of photos, so the scrapbook cards can afford
+      // to be bigger — large enough that the title + caption fit inside the
+      // frame. Text is line-clamped so it can never spill past the card edge,
+      // and the date + time always show at the bottom.
+      const timeLabel = [moment.date, moment.time].filter(Boolean).join(" · ");
       return (
         <button type="button" onClick={() => onSelect && onSelect(moment.id)} style={{ left: `${moment.x}%`, top: `${moment.y}%` }}
-          className={cn("group absolute z-10 w-44 -translate-x-1/2 -translate-y-1/2 rounded-sm border-2 border-primary bg-card p-2 text-left shadow-md transition-transform hover:z-20 hover:scale-105 sm:w-52", rotate, selected && "z-20 ring-4 ring-primary/30")}>
+          className={cn("group absolute z-10 w-52 max-w-[78vw] -translate-x-1/2 -translate-y-1/2 rounded-sm border-2 border-primary bg-card p-2.5 text-left shadow-md transition-transform hover:z-20 hover:scale-105 sm:w-60", rotate, selected && "z-20 ring-4 ring-primary/30")}>
           <span aria-hidden="true" className="absolute -top-2.5 left-1/2 h-4 w-12 -translate-x-1/2 -rotate-2 rounded-sm bg-primary/15" />
-          <div className="relative aspect-square w-full overflow-hidden rounded-sm border border-primary/30"><Img src={moment.src} alt={moment.alt} fill sizes="208px" className="object-cover [filter:saturate(0.85)_contrast(1.05)]" /></div>
+          <div className="relative aspect-square w-full overflow-hidden rounded-sm border border-primary/30"><Img src={moment.src} alt={moment.alt} fill sizes="240px" className="object-cover [filter:saturate(0.85)_contrast(1.05)]" /></div>
           <div className="px-0.5 pb-0.5 pt-2">
             <div className="flex items-start justify-between gap-1">
-              <h3 className="font-serif text-xs font-semibold leading-tight text-foreground">{moment.title}</h3>
+              <h3 className="line-clamp-2 break-words font-serif text-sm font-semibold leading-tight text-foreground">{moment.title}</h3>
               {moment.favorite ? <Star className="mt-0.5 size-3.5 shrink-0 fill-primary text-primary" /> : null}
             </div>
-            <p className="mt-1 font-hand text-[12px] leading-snug text-muted-foreground">{moment.caption}</p>
-            <p className="mt-1.5 font-mono text-[10px] text-primary/70">{moment.date}</p>
+            {moment.caption ? <p className="mt-1 line-clamp-2 break-words font-hand text-[13px] leading-snug text-muted-foreground">{moment.caption}</p> : null}
+            {timeLabel ? <p className="mt-1.5 font-mono text-[10px] text-primary/70">{timeLabel}</p> : null}
           </div>
         </button>
       );
@@ -3292,6 +3585,7 @@
     function MicButton({ field, onText, title }) {
       const { settings, update } = useSettings();
       const asrCfg = useAsrConfig();
+      const aiLock = useAILock();   // voice transcription is AI → same lock
       const [state, setState] = useState("idle"); // idle | recording | working | error
       const [lang, setLang] = useState("");
       const [note, setNote] = useState("");
@@ -3306,12 +3600,16 @@
 
       async function start() {
         setNote(""); setLang("");
+        if (aiLock.lockedByOther) return;   // peer is using AI
         if (asrCfg && asrCfg.osSupported === false) {
           setState("error"); setNote("Nemotron is not supported on this OS."); return;
         }
         if (!navigator.mediaDevices || typeof MediaRecorder === "undefined") {
           setState("error"); setNote("Recording not supported here."); return;
         }
+        // take the AI lock for the whole record→transcribe cycle
+        const got = await aiLock.acquire("dictating");
+        if (!got) { setNote("Collaborator is using AI."); return; }
         try {
           const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
           streamRef.current = stream;
@@ -3326,6 +3624,7 @@
           if (window.sozaiPing) window.sozaiPing("🎤 recording " + field);
         } catch (e) {
           setState("error"); setNote("Microphone blocked.");
+          aiLock.release();   // never acquired audio → free the lock
         }
       }
       function stop() {
@@ -3356,20 +3655,23 @@
           }
         } catch (e) {
           setState("error"); setNote("Transcription failed.");
+        } finally {
+          aiLock.release();   // always free the lock once the cycle ends
         }
       }
 
       const recording = state === "recording";
       const working = state === "working";
       const osBlocked = asrCfg && asrCfg.osSupported === false;
+      const micDisabled = working || osBlocked || (aiLock.lockedByOther && !recording);
       return (
         <span className="relative inline-flex items-center gap-1.5">
           <button type="button"
             onClick={() => (recording ? stop() : start())}
-            disabled={working || osBlocked}
+            disabled={micDisabled}
             aria-pressed={recording}
-            title={osBlocked ? "Nemotron is not supported on this OS" : (title || ("Dictate " + field))}
-            className={cn("flex size-7 items-center justify-center rounded-full border-2 transition-colors disabled:opacity-60",
+            title={osBlocked ? "Nemotron is not supported on this OS" : (aiLock.lockedByOther ? aiLock.lockLabel : (title || ("Dictate " + field)))}
+            className={cn("flex size-7 items-center justify-center rounded-full border-2 transition-colors disabled:opacity-60 disabled:cursor-not-allowed",
               recording ? "border-[oklch(0.55_0.2_25)] bg-[oklch(0.55_0.2_25)] text-white animate-pulse"
                         : "border-primary/60 text-primary hover:bg-accent")}>
             {working ? <Loader2 className="size-3.5 animate-spin" /> : recording ? <Square className="size-3" /> : <Mic className="size-3.5" />}
@@ -4037,6 +4339,18 @@
       ];
       const [transport, setTransport] = useState("car");
       const transportMarkerRef = useRef(null);
+
+      // #3/#5: journey playback is GPU/CPU heavy and must be driven by ONE
+      // person; the peer watches the SAME flythrough. The driver holds the
+      // journey lock and broadcasts journey_start/frame/stop; the viewer mirrors
+      // it. Transport choice is also synced (journey_transport).
+      const journey = useJourneyLock();
+      const viewerFlyRef = useRef({ active: false, idx: -1 });
+      // pick a transport — synced to the peer so the journey looks the same
+      const chooseTransport = useCallback((id) => {
+        setTransport(id);
+        try { Collab.send("journey_transport", { transport: id }); } catch (e) {}
+      }, []);
       // recording the journey to a downloadable clip (item 5)
       const [recording, setRecording] = useState(false);
       const recorderRef = useRef(null);
@@ -4206,7 +4520,7 @@
           el.className = "sozai-polaroid";
           el.style.setProperty("--rot", (p.rot || 0) + "deg");
           el.innerHTML =
-            '<img src="' + p.src + '" alt="">' +
+            '<img src="' + (p.src || "/assets/placeholder.svg").replace(/"/g, "&quot;") + '" alt="" onerror="this.onerror=null;this.src=\'/assets/placeholder.svg\'">' +
             (p.caption ? '<div class="cap">' + p.caption.replace(/</g, "&lt;") + '</div>' : '<div class="cap">&nbsp;</div>');
           const del = document.createElement("button");
           del.className = "pdel"; del.type = "button"; del.title = "Remove"; del.textContent = "×";
@@ -4245,7 +4559,7 @@
           const meta = p.date ? _dmy(p.date) : "";
           const objPos = (p.focusX != null ? p.focusX : 50) + "% " + (p.focusY != null ? p.focusY : 50) + "%";
           el.innerHTML =
-            '<img src="' + p.src + '" alt="" style="object-position:' + objPos + '">' +
+            '<img src="' + (p.src || "/assets/placeholder.svg").replace(/"/g, "&quot;") + '" alt="" style="object-position:' + objPos + '" onerror="this.onerror=null;this.src=\'/assets/placeholder.svg\'">' +
             '<div class="cap">' + ((p.caption || p.title || "&nbsp;").replace(/</g, "&lt;")) +
               (meta ? '<span class="sozai-pin-when">' + meta.replace(/</g, "&lt;") + '</span>' : '') +
             '</div>';
@@ -4292,7 +4606,7 @@
           marker.on("dragend", () => wrap.classList.remove("is-dragging"));
           storeMarkersRef.current[p.id] = { marker, el: wrap };
         });
-      }, [pinnedStore.map((p) => p.id + ":" + p.lon + "," + p.lat + ":" + p.caption + ":" + (p.rot || 0) + ":" + (p.scale || 1) + ":" + (p.focusX != null ? p.focusX : 50) + "," + (p.focusY != null ? p.focusY : 50)).join("|"), ready, styleEpoch]);
+      }, [pinnedStore.map((p) => p.id + ":" + p.lon + "," + p.lat + ":" + p.caption + ":" + (p.rot || 0) + ":" + (p.scale || 1) + ":" + (p.focusX != null ? p.focusX : 50) + "," + (p.focusY != null ? p.focusY : 50) + ":" + (p.src || "").slice(0, 64)).join("|"), ready, styleEpoch]);
 
       // highlight the active stop during a flythrough
       useEffect(() => {
@@ -4331,7 +4645,22 @@
         }, 420));
         return () => { cancelAnimationFrame(raf); ts.forEach(clearTimeout); };
       }, [isFullscreen]);
-      function toggleFullscreen() { setIsFullscreen((v) => !v); }
+      function toggleFullscreen() {
+        setIsFullscreen((v) => {
+          const next = !v;
+          // #5: mirror the fullscreen state to the peer (optional follow). Only
+          // applied by the receiver when "Following" is on, same as screen view.
+          try { Collab.send("map_fullscreen", { full: next }); } catch (e) {}
+          return next;
+        });
+      }
+      // receive a peer's fullscreen toggle (respecting the follow preference)
+      useEffect(() => {
+        const off = Collab.on("map_fullscreen", (m) => {
+          if (window.__sozaiFollow !== false && m && typeof m.full === "boolean") setIsFullscreen(m.full);
+        });
+        return () => off && off();
+      }, []);
 
       async function searchCity() {
         const q = place.trim();
@@ -4415,12 +4744,21 @@
       }
 
       // ---- flythrough ("Map of My Time" video) ---- //
-      function stopFly() {
+      function stopFly(opts) {
+        opts = opts || {};
         flyAbortRef.current.stop = true;
+        viewerFlyRef.current.active = false;
         setFlying(false);
         setFlyIdx(-1);
         if (transportMarkerRef.current) { try { transportMarkerRef.current.remove(); } catch (e) {} transportMarkerRef.current = null; }
         stopRecording();
+        // the driver tells the peer to stop too, and frees the lock so either
+        // person can start the next journey. (A viewer stopping locally does NOT
+        // broadcast — it just leaves the shared playback on its own screen.)
+        if (!opts.fromRemote && journey.drivenByMe) {
+          try { Collab.send("journey_stop", {}); } catch (e) {}
+          journey.release();
+        }
       }
 
       // move the transport emoji marker to a lng/lat (creating it if needed)
@@ -4465,12 +4803,31 @@
 
       async function playFly(opts) {
         opts = opts || {};
+        const asViewer = !!opts.asViewer;   // following the peer's journey
         const map = mapRef.current;
         if (!map || flyStops.length === 0) return;
+
+        // #3: in a room, the journey must be driven by ONE person. A normal
+        // (non-viewer) start acquires the lock; if the peer already holds it we
+        // bail (the button is disabled anyway, this is just belt-and-braces).
+        if (!asViewer && Collab.isCollab()) {
+          const got = await journey.acquire();
+          if (!got) return;
+          journey.beginRefresh();
+          // tell the peer to start watching the same journey
+          try { Collab.send("journey_start", { transport, record: false }); } catch (e) {}
+        }
+        if (asViewer) viewerFlyRef.current = { active: true, idx: -1 };
+
         flyAbortRef.current = { stop: false };
         const token = flyAbortRef.current;
         setFlying(true);
-        if (opts.record) { const ok = startRecording(); setRecording(ok); }
+        // recording stays per-user and only on the driver's explicit request
+        if (opts.record && !asViewer) { const ok = startRecording(); setRecording(ok); }
+
+        // the driver beacons which stop is showing, so the viewer's photo
+        // overlay stays aligned even if animation timing drifts slightly.
+        const beacon = (idx) => { if (!asViewer && journey.drivenByMe) { try { journey.frame({ idx }); } catch (e) {} } };
 
         // draw the route as a line under the journey
         const routeCoords = flyStops.map((s) => [s.lon, s.lat]);
@@ -4486,7 +4843,7 @@
 
         const spd = (TRANSPORTS.find((t) => t.id === transport) || TRANSPORTS[0]).speed;
         // start at the first stop
-        setFlyIdx(0);
+        setFlyIdx(0); beacon(0);
         setTransportAt(flyStops[0].lon, flyStops[0].lat);
         map.flyTo({ center: [flyStops[0].lon, flyStops[0].lat], zoom: 15, pitch: 50, duration: 1400, essential: true });
         await new Promise((r) => setTimeout(r, 1500));
@@ -4513,7 +4870,7 @@
             requestAnimationFrame(step);
           });
           if (token.stop) break;
-          setFlyIdx(i);
+          setFlyIdx(i); beacon(i);
           map.flyTo({ center: [b.lon, b.lat], zoom: 15.5, pitch: 55, duration: 1100, essential: true });
           await new Promise((r) => setTimeout(r, 1300)); // dwell to show the photo
         }
@@ -4529,7 +4886,38 @@
         stopRecording();
         setFlying(false);
         setFlyIdx(-1);
+        viewerFlyRef.current.active = false;
+        // driver finished naturally → tell the peer + free the lock
+        if (!asViewer && !token.stop && journey.drivenByMe) {
+          try { Collab.send("journey_stop", {}); } catch (e) {}
+          journey.release();
+        }
       }
+
+      // viewer side: follow the peer's journey. journey_start runs the same
+      // local flythrough (stops + transport already synced); journey_frame keeps
+      // the photo index aligned; journey_stop ends it.
+      useEffect(() => {
+        const offs = [
+          Collab.on("journey_transport", (m) => { if (m && m.transport) setTransport(m.transport); }),
+          Collab.on("journey_start", (m) => {
+            if (m && m.transport) setTransport(m.transport);
+            // run on the next tick so the transport state is applied first
+            setTimeout(() => { playFly({ asViewer: true }); }, 60);
+          }),
+          // safety net: if the driver disappears (disconnect) mid-flight, the
+          // server broadcasts journey_state with no driver — stop our viewer run
+          // so we don't keep flying a journey nobody is driving.
+          Collab.on("journey_state", (m) => {
+            if (viewerFlyRef.current.active && m && !m.driver) stopFly({ fromRemote: true });
+          }),
+          Collab.on("journey_frame", (m) => {
+            if (m && typeof m.idx === "number" && viewerFlyRef.current.active) setFlyIdx(m.idx);
+          }),
+          Collab.on("journey_stop", () => { stopFly({ fromRemote: true }); }),
+        ];
+        return () => offs.forEach((off) => off && off());
+      }, [flyStops.length]); // eslint-disable-line
       useEffect(() => () => { flyAbortRef.current.stop = true; stopRecording(); }, []);
 
       if (libMissing) {
@@ -4598,8 +4986,8 @@
               </span>
               <div className="flex flex-wrap items-center gap-1.5">
                 {TRANSPORTS.map((t) => (
-                  <button key={t.id} type="button" onClick={() => setTransport(t.id)} aria-pressed={transport === t.id} title={t.label}
-                    disabled={flying}
+                  <button key={t.id} type="button" onClick={() => chooseTransport(t.id)} aria-pressed={transport === t.id} title={t.label}
+                    disabled={flying || journey.drivenByOther}
                     className={cn("flex items-center gap-1 rounded-full border-2 px-2 py-1 font-mono text-[11px] uppercase tracking-wide transition-colors disabled:opacity-50",
                       transport === t.id ? "border-primary bg-accent text-foreground" : "border-primary/40 text-muted-foreground hover:bg-accent/50")}>
                     <span aria-hidden="true">{t.emoji}</span>{t.label}
@@ -4607,11 +4995,13 @@
                 ))}
               </div>
               <button type="button" onClick={() => (flying ? stopFly() : playFly({ record: false }))}
-                className="flex items-center gap-1.5 rounded-md border-2 border-primary bg-primary px-3 py-1.5 font-mono text-[11px] font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90">
-                {flying ? <X className="size-3.5" /> : <FastForward className="size-3.5" />} {flying ? "Stop" : "Play"}
+                disabled={!flying && journey.drivenByOther}
+                title={journey.drivenByOther ? journey.driverLabel : undefined}
+                className="flex items-center gap-1.5 rounded-md border-2 border-primary bg-primary px-3 py-1.5 font-mono text-[11px] font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50">
+                {flying ? <X className="size-3.5" /> : <FastForward className="size-3.5" />} {flying ? "Stop" : (journey.drivenByOther ? "Playing…" : "Play")}
               </button>
-              <button type="button" onClick={() => (flying ? stopFly() : playFly({ record: true }))} disabled={flying}
-                title="Play the journey and save it as a video clip"
+              <button type="button" onClick={() => (flying ? stopFly() : playFly({ record: true }))} disabled={flying || journey.drivenByOther}
+                title={journey.drivenByOther ? journey.driverLabel : "Play the journey and save it as a video clip"}
                 className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-3 py-1.5 font-mono text-[11px] uppercase tracking-wide text-primary transition-colors hover:bg-accent disabled:opacity-50">
                 <span className={cn("size-2.5 rounded-full", recording ? "animate-pulse bg-[oklch(0.55_0.2_25)]" : "bg-primary")} /> {recording ? "Recording…" : "Record clip"}
               </button>
@@ -4621,6 +5011,9 @@
                   <Download className="size-3.5" /> Download clip
                 </a>
               ) : null}
+              {journey.drivenByOther ? (
+                <span className="font-mono text-[10px] uppercase tracking-wide text-primary">{journey.driverLabel}</span>
+              ) : null}
             </div>
           ) : null}
 
@@ -4670,10 +5063,11 @@
             {/* flythrough control (only when there are pinned album photos) */}
             {flyStops.length > 0 ? (
               <button type="button" onClick={() => (flying ? stopFly() : playFly())}
-                title={flying ? "Stop the flythrough" : "Play Your Journey"}
-                className="absolute right-2 top-2 z-10 flex items-center gap-1.5 rounded-md border-2 border-primary bg-card/90 px-2.5 py-2 font-mono text-[10px] font-semibold uppercase tracking-wide text-primary shadow-sm transition-colors hover:bg-accent">
+                disabled={!flying && journey.drivenByOther}
+                title={journey.drivenByOther ? journey.driverLabel : (flying ? "Stop the flythrough" : "Play Your Journey")}
+                className="absolute right-2 top-2 z-10 flex items-center gap-1.5 rounded-md border-2 border-primary bg-card/90 px-2.5 py-2 font-mono text-[10px] font-semibold uppercase tracking-wide text-primary shadow-sm transition-colors hover:bg-accent disabled:opacity-50">
                 {flying ? <X className="size-4" /> : <FastForward className="size-4" />}
-                {flying ? "Stop" : "Play journey"}
+                {flying ? "Stop" : (journey.drivenByOther ? "Playing…" : "Play journey")}
               </button>
             ) : null}
 
@@ -4907,6 +5301,16 @@
       ];
       const [expanded, setExpanded] = useState(false);   // in-page immersive view
       const [dropArmed, setDropArmed] = useState(false);  // drag-from-tray hint
+
+      // #3/#5: same journey lock + sync as the watercolor map. The Cesium globe
+      // (photorealistic 3D tiles) is the heaviest path, so the one-driver gate
+      // matters most here. transport choice is synced; the viewer follows.
+      const journey = useJourneyLock();
+      const viewerFlyRef = useRef({ active: false });
+      const chooseTransport = useCallback((id) => {
+        setTransport(id);
+        try { Collab.send("journey_transport", { transport: id }); } catch (e) {}
+      }, []);
       const [armedId, setArmedId] = useState(null);       // tap-to-pin armed photo
 
       // tap-to-pin: arm a photo, then the next globe click pins it
@@ -4962,6 +5366,26 @@
             });
             viewerRef.current = viewer;
             try { viewer.clock.shouldAnimate = false; } catch (e) {}
+            // ---- memory budget --------------------------------------------- //
+            // The flythrough sweeps the camera across the whole route; with the
+            // default (effectively unbounded) caches Cesium keeps every terrain
+            // and building tile it ever loads, so GPU memory grows the entire
+            // journey and OOMs the tab near the end. Cap the terrain cache and
+            // coarsen distant terrain so passed-over tiles are evicted.
+            try {
+              viewer.scene.globe.tileCacheSize = 60;            // default 100
+              viewer.scene.globe.maximumScreenSpaceError = 3;   // default 2 (coarser = fewer tiles)
+              viewer.scene.globe.preloadSiblings = false;
+              viewer.scene.fog.enabled = true;                  // fog culls distant tiles → less to load
+            } catch (e) {}
+            // Graceful path if the GPU context is still lost despite the caps:
+            // show an error instead of a silent white freeze.
+            try {
+              viewer.scene.canvas.addEventListener("webglcontextlost", (ev) => {
+                ev.preventDefault();
+                if (!cancelled) { setStatus("error"); setErrMsg("The 3D view ran out of GPU memory. Reload to try again."); }
+              }, false);
+            } catch (e) {}
             viewer.scene.camera.setView({
               destination: Cesium.Cartesian3.fromDegrees(-123.1207, 49.2827, 1200),
               orientation: { heading: Cesium.Math.toRadians(10), pitch: Cesium.Math.toRadians(-25) },
@@ -5004,6 +5428,24 @@
               if (cancelled) { viewer.destroy(); return; }
               viewer.scene.primitives.add(tileset);
               tilesetRef.current = tileset;
+              // ---- 3D-tiles memory cap (the OSM buildings are the heaviest
+              // consumer and the real OOM source) -------------------------- //
+              // cacheBytes is a HARD ceiling: once exceeded, tiles outside the
+              // view (e.g. everywhere the flythrough already passed) are
+              // unloaded instead of accumulating. dynamicScreenSpaceError makes
+              // tiles toward the horizon much coarser — the forward-looking
+              // chase camera otherwise floods memory with full-detail distance.
+              try {
+                tileset.cacheBytes = 256 * 1024 * 1024;              // 256 MB hard cap
+                tileset.maximumCacheOverflowBytes = 64 * 1024 * 1024; // small transient overflow only
+                tileset.maximumScreenSpaceError = 16;                 // keep near-camera crisp
+                tileset.dynamicScreenSpaceError = true;
+                tileset.dynamicScreenSpaceErrorDensity = 0.0045;
+                tileset.dynamicScreenSpaceErrorFactor = 4.0;
+                tileset.dynamicScreenSpaceErrorHeightFalloff = 0.25;
+                tileset.preloadWhenHidden = false;
+                tileset.preloadFlightDestinations = false;            // don't pre-load the overview's tiles in a burst
+              } catch (e) {}
               tileset.style = buildCesiumStyle(Cesium, "watercolor", colorway);
             } catch (e) { console.warn("[cesium] OSM buildings failed", e); }
             if (!cancelled) setStatus("ready");
@@ -5089,7 +5531,7 @@
           });
           entitiesRef.current.push(ent);
         });
-      }, [pinnedStore.map((p) => p.id + ":" + p.lon + "," + p.lat + ":" + p.caption).join("|"), status]);
+      }, [pinnedStore.map((p) => p.id + ":" + p.lon + "," + p.lat + ":" + p.caption + ":" + (p.src || "").slice(0, 64)).join("|"), status]);
 
       // tap-to-pin + drag-to-move on the globe.
       const armedRef = useRef(null);
@@ -5158,8 +5600,10 @@
         if (viewer && vehicleRef.current) { try { viewer.entities.remove(vehicleRef.current); } catch (e) {} }
         vehicleRef.current = null;
       }
-      function stopFly() {
+      function stopFly(opts) {
+        opts = opts || {};
         flyAbortRef.current.stop = true;
+        viewerFlyRef.current.active = false;
         setFlying(false); setFlyIdx(-1);
         const viewer = viewerRef.current;
         if (viewer) {
@@ -5169,10 +5613,24 @@
           try { if (viewer.entities.getById("sozai-route")) viewer.entities.removeById("sozai-route"); } catch (e) {}
         }
         removeVehicle();
+        if (!opts.fromRemote && journey.drivenByMe) {
+          try { Collab.send("journey_stop", {}); } catch (e) {}
+          journey.release();
+        }
       }
-      async function playFly() {
+      async function playFly(opts) {
+        opts = opts || {};
+        const asViewer = !!opts.asViewer;
         const viewer = viewerRef.current;
         if (!viewer || !window.Cesium || flyStops.length < 1) return;
+        // #3: one-driver gate (the 3D globe is the heaviest path → highest OOM risk)
+        if (!asViewer && Collab.isCollab()) {
+          const got = await journey.acquire();
+          if (!got) return;
+          journey.beginRefresh();
+          try { Collab.send("journey_start", { transport }); } catch (e) {}
+        }
+        if (asViewer) viewerFlyRef.current = { active: true };
         const Cesium = window.Cesium;
         flyAbortRef.current = { stop: false };
         const token = flyAbortRef.current;
@@ -5275,7 +5733,9 @@
             }
           } catch (e) {}
           if (nextStop < stopTimes.length && t >= stopTimes[nextStop] - 0.2) {
-            setFlyIdx(nextStop); nextStop++;
+            setFlyIdx(nextStop);
+            if (!asViewer && journey.drivenByMe) { try { journey.frame({ idx: nextStop }); } catch (e) {} }
+            nextStop++;
           }
         });
         clockTickRef.current = () => { try { onTick(); } catch (e) {} };
@@ -5293,17 +5753,49 @@
         if (clockTickRef.current) { clockTickRef.current(); clockTickRef.current = null; }
         viewer.clock.shouldAnimate = false;
         if (!token.stop && flyStops.length) {
+          // Pulling back to show the WHOLE route is the single biggest tile
+          // spike (every stop's buildings become visible at once). Coarsen the
+          // 3D tiles hard and trim the cache BEFORE the wide flyTo so it can't
+          // OOM, then restore detail once the camera has settled.
+          const ts0 = tilesetRef.current;
+          try { if (ts0) { ts0.maximumScreenSpaceError = 48; ts0.trimLoadedTiles(); } } catch (e) {}
           const lons = flyStops.map((s) => s.lon), lats = flyStops.map((s) => s.lat);
           const cx = (Math.min(...lons) + Math.max(...lons)) / 2, cy = (Math.min(...lats) + Math.max(...lats)) / 2;
-          viewer.scene.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(cx, cy - 0.02, 2600),
+          viewer.scene.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(cx, cy - 0.02, 2200),
             orientation: { heading: 0, pitch: Cesium.Math.toRadians(-45) }, duration: 2.4 });
           await new Promise((r) => setTimeout(r, 2400));
+          try { if (ts0) ts0.maximumScreenSpaceError = 16; } catch (e) {}   // restore near-camera detail
         }
         removeVehicle();
         try { if (viewer.entities.getById("sozai-route")) viewer.entities.removeById("sozai-route"); } catch (e) {}
         setFlying(false); setFlyIdx(-1);
+        viewerFlyRef.current.active = false;
+        if (!asViewer && !token.stop && journey.drivenByMe) {
+          try { Collab.send("journey_stop", {}); } catch (e) {}
+          journey.release();
+        }
       }
 
+      // viewer side: follow the peer's 3D journey (stops + transport synced).
+      useEffect(() => {
+        const offs = [
+          Collab.on("journey_transport", (m) => { if (m && m.transport) setTransport(m.transport); }),
+          Collab.on("journey_start", (m) => {
+            if (m && m.transport) setTransport(m.transport);
+            setTimeout(() => playFly({ asViewer: true }), 60);
+          }),
+          Collab.on("journey_frame", (m) => {
+            if (m && typeof m.idx === "number" && viewerFlyRef.current.active) setFlyIdx(m.idx);
+          }),
+          Collab.on("journey_stop", () => { stopFly({ fromRemote: true }); }),
+          // driver disconnected mid-flight → stop following
+          Collab.on("journey_state", (m) => {
+            if (viewerFlyRef.current.active && m && !m.driver) stopFly({ fromRemote: true });
+          }),
+        ];
+        return () => offs.forEach((off) => off && off());
+      }, [flyStops.length]); // eslint-disable-line
+
       if (status === "no-token") {
         return (
           <div className="rounded-lg border-2 border-primary/40 bg-accent/30 p-6 text-center">
@@ -5377,13 +5869,16 @@
               </span>
               <div className="flex flex-wrap items-center gap-1.5">
                 {CS_TRANSPORTS.map((t) => (
-                  <button key={t.id} type="button" onClick={() => setTransport(t.id)} aria-pressed={transport === t.id} title={t.label} disabled={flying}
+                  <button key={t.id} type="button" onClick={() => chooseTransport(t.id)} aria-pressed={transport === t.id} title={t.label} disabled={flying || journey.drivenByOther}
                     className={cn("flex items-center gap-1 rounded-full border-2 px-2 py-1 font-mono text-[11px] uppercase tracking-wide transition-colors disabled:opacity-50",
                       transport === t.id ? "border-primary bg-accent text-foreground" : "border-primary/40 text-muted-foreground hover:bg-accent/50")}>
                     <span aria-hidden="true">{t.emoji}</span>{t.label}
                   </button>
                 ))}
               </div>
+              {journey.drivenByOther ? (
+                <span className="font-mono text-[10px] uppercase tracking-wide text-primary">{journey.driverLabel}</span>
+              ) : null}
             </div>
           ) : null}
 
@@ -5428,8 +5923,10 @@
             ) : null}
             {flyStops.length > 0 && status === "ready" ? (
               <button type="button" onClick={() => (flying ? stopFly() : playFly())}
-                className="absolute right-2 top-2 z-10 flex items-center gap-1.5 rounded-md border-2 border-primary bg-card/90 px-2.5 py-2 font-mono text-[10px] font-semibold uppercase tracking-wide text-primary shadow-sm transition-colors hover:bg-accent">
-                {flying ? <X className="size-4" /> : <FastForward className="size-4" />} {flying ? "Stop" : "Play journey"}
+                disabled={!flying && journey.drivenByOther}
+                title={journey.drivenByOther ? journey.driverLabel : undefined}
+                className="absolute right-2 top-2 z-10 flex items-center gap-1.5 rounded-md border-2 border-primary bg-card/90 px-2.5 py-2 font-mono text-[10px] font-semibold uppercase tracking-wide text-primary shadow-sm transition-colors hover:bg-accent disabled:opacity-50">
+                {flying ? <X className="size-4" /> : <FastForward className="size-4" />} {flying ? "Stop" : (journey.drivenByOther ? "Playing…" : "Play journey")}
               </button>
             ) : null}
             {flying && flyStops[flyIdx] ? (
@@ -6195,7 +6692,7 @@
                   <div className="relative w-full overflow-hidden rounded-lg border-2 border-primary/40 bg-[oklch(0.95_0.018_85)]">
                     <img src="/assets/photos/scrapbook-map.png" alt="" aria-hidden="true" className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60 mix-blend-multiply" />
                     <RouteLines moments={liveMoments} />
-                    <div className="relative h-[460px] w-full sm:h-[520px]">
+                    <div className="relative h-[540px] w-full sm:h-[560px]">
                       {liveMoments.map((m, i) => <MomentCard key={m.id} moment={m} rotate={rotations[i % rotations.length]} selected={selectedId === m.id} onSelect={setSelectedId} />)}
                     </div>
                   </div>
@@ -6521,10 +7018,10 @@
 
     // baths kept from the zip (colors + labels), seen from above
     const DR_BATHS = [
-      { id: "developer", label: "Developer", color: "oklch(0.38 0.11 52)",  edge: "oklch(0.24 0.08 50)" },
-      { id: "stop",      label: "Stop Bath", color: "oklch(0.72 0.16 82)",  edge: "oklch(0.54 0.13 80)" },
-      { id: "fixer",     label: "Fixer",     color: "oklch(0.44 0.05 225)", edge: "oklch(0.30 0.04 225)" },
-      { id: "wash",      label: "Wash",      color: "oklch(0.54 0.06 212)", edge: "oklch(0.40 0.04 212)" },
+      { id: "developer", label: "Developer", color: "oklch(0.45 0.14 150)", edge: "oklch(0.32 0.1 150)" },
+      { id: "stop",      label: "Stop Bath", color: "oklch(0.5 0.12 90)",   edge: "oklch(0.36 0.09 90)" },
+      { id: "fixer",     label: "Fixer",     color: "oklch(0.5 0.1 250)",   edge: "oklch(0.36 0.08 250)" },
+      { id: "wash",      label: "Wash",      color: "oklch(0.55 0.08 220)", edge: "oklch(0.4 0.06 220)" },
     ];
     // top-down layout - columns are now driven by flex, not % coordinates
 
@@ -6777,7 +7274,8 @@
     // ---- polaroid print card (shared by both bath phases) --------------- //
     function PrintCard({ sheet }) {
       const bf = drBathFilter(sheet.level);
-      const filt = sheet.submerged ? ("url(#dr-ripple) " + bf) : bf;
+      // (no animated SVG ripple filter — it flashed/repainted badly on mobile)
+      const filt = bf;
       return (
         <div className="w-full" style={{
           transform: "rotate(" + sheet.rot + "deg) scale(" + sheet.scale + ")",
@@ -6885,7 +7383,7 @@
             style={{ background: "radial-gradient(120% 100% at 50% 0%, oklch(0.20 0.04 55), oklch(0.10 0.02 55) 70%)",
               boxShadow: "inset 0 0 70px rgba(0,0,0,0.55)" }}>
 
-            <div className="flex items-end gap-3 px-4 pb-4 pt-10">
+            <div className="flex items-end gap-1.5 px-2 pb-3 pt-8 sm:gap-3 sm:px-4 sm:pb-4 sm:pt-10">
               {DR_BATHS.map((b, i) => {
                 const aboveCards = sheets.filter((s) => s.col === i && s.above);
                 const subCards   = sheets.filter((s) => s.col === i && !s.above);
@@ -6906,11 +7404,11 @@
                       style={{ aspectRatio: "1 / 1.5", background: "oklch(0.12 0.02 55)", boxShadow: "0 6px 16px rgba(0,0,0,0.5)" }}>
                       <div className="relative h-full w-full overflow-hidden rounded-[6px]"
                         style={{ background: "radial-gradient(120% 120% at 50% 0%, " + b.color + ", " + b.edge + ")" }}>
-                        <WaterRippleCanvas baseColor={[0.5, 0.48, 0.44]} scale={5} illumination={0.55}
-                          rippleStyle={{ mixBlendMode: "overlay", opacity: 0.16, zIndex: 1 }} />
-                        <div className="absolute inset-0" style={{ filter: "url(#dr-ripple)",
-                          background: "linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 45%)", zIndex: 2 }} />
-                        <div className="absolute inset-0" style={{ boxShadow: "inset 0 0 24px rgba(0,0,0,0.5)", zIndex: 3 }} />
+                        {/* a single STILL highlight (no animated turbulence / WebGL
+                            shimmer — those flashed green/orange on some phones) */}
+                        <div className="pointer-events-none absolute inset-0" style={{
+                          background: "linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 45%)", zIndex: 2 }} />
+                        <div className="pointer-events-none absolute inset-0" style={{ boxShadow: "inset 0 0 24px rgba(0,0,0,0.5)", zIndex: 3 }} />
                         {/* submerged card lives inside its tray */}
                         {subCards.map((s) => (
                           <div key={s.id} className="absolute" style={{ inset: "10%", zIndex: 4 + s.z }}>
@@ -6959,25 +7457,65 @@
     }
 
     // ---- phase 2: hanging print, shake to reveal (ported) -------------- //
-    const DR_SHAKES_TO_REVEAL = 4;
-    function HangingPrint({ photo, index, swayDelay, onRevealed, widthClass }) {
+    // (shake reveal is now distance-based; see HangingPrint.addTravel)
+    function HangingPrint({ photo, index, swayDelay, onRevealed, widthClass, isDeveloper, onDeveloped }) {
       const [progress, setProgress] = useState(0);
       const [revealed, setRevealed] = useState(false);
       const [dragging, setDragging] = useState(false);
       const [tilt, setTilt] = useState(0);
-      const dragState = useRef({ active: false, lastX: 0, lastDir: 0, offset: 0 });
+      const dragState = useRef({ active: false, lastX: 0, lastY: 0, offset: 0 });
       const progressRef = useRef(0);
+      const revealedRef = useRef(false);
+      useEffect(() => { revealedRef.current = revealed; }, [revealed]);
 
       useEffect(() => { if (revealed) onRevealed(photo.id); }, [revealed, onRevealed, photo.id]);
 
+      // #5: when the peer reveals this print, reveal it here too (mirror the shake)
+      useEffect(() => {
+        const off = Collab.on("darkroom_reveal", (m) => {
+          if (m && m.id === photo.id) { progressRef.current = 1; setProgress(1); revealedRef.current = true; setRevealed(true); }
+        });
+        return () => off && off();
+      }, [photo.id]);
+
       // Kick off the watercolour "develop" (flux.2-klein img2img) the moment the
       // print is hung, so the result is ready by the time it's shaken in. The
       // shake then reveals the DEVELOPED image; if the endpoint is unavailable
       // or fails, we fall back to the original photo (no regression).
+      //
+      // #3 (OOM): the FLUX develop is GPU-heavy. In a room, only ONE person —
+      // the develop-lock holder (isDeveloper) — actually calls /api/img2img. The
+      // developed watercolour is written to the shared SozaiPhotos store, so it
+      // syncs to the peer automatically; the non-developer simply WAITS for that
+      // synced result (photo.src flips to a fresh data URL) instead of hitting
+      // the GPU a second time. Solo: isDeveloper is always true.
       const [developedSrc, setDevelopedSrc] = useState(null);
       const [devStatus, setDevStatus] = useState("queued"); // queued|developing|done|base
       const developRef = useRef(false);
+      const initialSrcRef = useRef(photo.src);
+
+      // Non-developer path: watch for the developed image to arrive via sync.
+      // When the store's src for this photo changes from what we started with,
+      // the watercolour has synced in — treat it as developed + shakeable. Also
+      // listen for the developer's explicit outcome (covers the "develop feature
+      // is off → keep the original" case, where no new src is ever written).
       useEffect(() => {
+        if (isDeveloper) return;
+        setDevStatus((s) => (s === "queued" ? "developing" : s));
+        if (photo.src && photo.src !== initialSrcRef.current) {
+          setDevelopedSrc(photo.src);
+          setDevStatus("done");
+        }
+        const off = Collab.on("darkroom_developed", (m) => {
+          if (!m || m.id !== photo.id) return;
+          if (m.status === "base") setDevStatus("base");
+          else if (m.status === "done") setDevStatus((s) => (s === "done" ? s : "developing"));
+        });
+        return () => off && off();
+      }, [isDeveloper, photo.src, photo.id]);
+
+      useEffect(() => {
+        if (!isDeveloper) return;            // only the developer hits the GPU
         if (developRef.current || !photo.src) return;
         developRef.current = true;
         let alive = true;
@@ -7011,9 +7549,13 @@
                 if (j && j.available && j.image) {
                   if (alive) {
                     setDevelopedSrc(j.image); setDevStatus("done");
+                    // tell the peer this print finished developing (the image
+                    // itself syncs via the store; this covers reveal-gating)
+                    try { Collab.send("darkroom_developed", { id: photo.id, status: "done" }); } catch (e) {}
                     // write the DEVELOPED watercolour + its pin back into the shared
                     // store so the map shows the transformed photo, auto-pinned at
-                    // its GPS location (falls through to the room sync too).
+                    // its GPS location. This also SYNCS the watercolour to the peer
+                    // (PhotoSync), which is how the non-developer gets the result.
                     try {
                       window.SozaiPhotos.upsert(photo.id, {
                         src: j.image,
@@ -7028,47 +7570,72 @@
                   return;
                 }
                 if (j && j.available === false) {  // feature genuinely off
-                  if (alive) setDevStatus("base"); return;
+                  if (alive) { setDevStatus("base"); try { Collab.send("darkroom_developed", { id: photo.id, status: "base" }); } catch (e) {} }
+                  return;
                 }
               }
             } catch (e) { console.warn("[develop] attempt", attempt, "failed", e); }
             await sleep(5000);
           }
-          if (alive) setDevStatus("base"); // gave up → keep the original
+          if (alive) { setDevStatus("base"); try { Collab.send("darkroom_developed", { id: photo.id, status: "base" }); } catch (e) {} } // gave up → keep the original
         })();
         return () => { alive = false; };
-      }, [photo.src, photo.alt, index]);
-
-      const registerShake = useCallback(() => {
-        const next = Math.min(1, progressRef.current + 1 / DR_SHAKES_TO_REVEAL);
+      }, [isDeveloper, photo.src, photo.alt, index]);
+
+      // Progress is driven by TOTAL travel distance (sum of |movement|), not by
+      // counting precise left-right-left reversals. Reversals are hard to land
+      // with a thumb and made the shake feel broken on phones; accumulating
+      // distance means any vigorous wiggle reliably develops the print.
+      const SHAKE_DISTANCE_TO_REVEAL = 520; // px of total travel
+      const addTravel = useCallback((dist) => {
+        const next = Math.min(1, progressRef.current + dist / SHAKE_DISTANCE_TO_REVEAL);
         progressRef.current = next; setProgress(next);
-        if (next >= 1) setRevealed(true);
-      }, []);
+        if (next >= 1 && !revealedRef.current) {
+          revealedRef.current = true;
+          setRevealed(true);
+          try { Collab.send("darkroom_reveal", { id: photo.id }); } catch (e) {}
+        }
+      }, [photo.id]);
 
       // No shaking until the watercolour has actually developed (or the develop
       // feature is off / gave up, where "base" means we reveal the original).
       const canShake = devStatus === "done" || devStatus === "base";
+      // Tell the parent the moment GPU work for this print is finished (done or
+      // base), so it can release the develop lock instantly — the shake/reveal
+      // phase is pure CSS and needs no lock.
+      const reportedRef = useRef(false);
+      useEffect(() => {
+        if (canShake && !reportedRef.current) { reportedRef.current = true; onDeveloped && onDeveloped(photo.id); }
+      }, [canShake, photo.id, onDeveloped]);
+
+      const tiltRafRef = useRef(0);
       function onPointerDown(e) {
         if (revealed || !canShake) return;
         try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) {}
-        dragState.current = { active: true, lastX: e.clientX, lastDir: 0, offset: 0 };
+        dragState.current = { active: true, lastX: e.clientX, lastY: e.clientY, offset: 0 };
         setDragging(true);
       }
       function onPointerMove(e) {
         const s = dragState.current;
         if (!s.active || revealed || !canShake) return;
         const dx = e.clientX - s.lastX;
-        if (Math.abs(dx) < 4) return;
-        const dir = dx > 0 ? 1 : -1;
-        if (s.lastDir !== 0 && dir !== s.lastDir) registerShake();
-        s.lastDir = dir; s.lastX = e.clientX;
+        const dy = e.clientY - s.lastY;
+        const dist = Math.hypot(dx, dy);
+        if (dist < 2) return;                 // ignore micro-jitter
+        addTravel(dist);                       // any movement counts toward reveal
+        s.lastX = e.clientX; s.lastY = e.clientY;
         s.offset = Math.max(-26, Math.min(26, s.offset + dx));
-        setTilt(s.offset);
+        // throttle tilt updates to one per frame so fast shakes stay smooth
+        if (!tiltRafRef.current) {
+          tiltRafRef.current = requestAnimationFrame(() => { tiltRafRef.current = 0; setTilt(dragState.current.offset); });
+        }
       }
       function endDrag(e) {
         dragState.current.active = false; setDragging(false); setTilt(0);
+        if (tiltRafRef.current) { cancelAnimationFrame(tiltRafRef.current); tiltRafRef.current = 0; }
         try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (err) {}
       }
+      useEffect(() => () => { if (tiltRafRef.current) cancelAnimationFrame(tiltRafRef.current); }, []);
 
       const blurPx = (1 - progress) * 14;
       const grayscale = (1 - progress) * 100;
@@ -7082,6 +7649,9 @@
             className={cn("group relative -mt-1.5 select-none rounded-sm bg-[oklch(0.99_0.01_85)] p-3 pb-16 shadow-2xl",
               dragging ? "" : "dr-sway", revealed ? "cursor-default" : (canShake ? "cursor-grab active:cursor-grabbing" : "cursor-progress"))}
             style={{ animationDelay: swayDelay + "s",
+              // touch-action none while shakeable so the phone doesn't scroll the
+              // page out from under the shake gesture (the main cause of jitter)
+              touchAction: (canShake && !revealed) ? "none" : "auto",
               transform: dragging ? "rotate(" + (tilt * 0.3) + "deg) translateX(" + (tilt * 0.4) + "px)" : undefined,
               transition: dragging ? "none" : "transform 0.4s ease" }}
             onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={endDrag} onPointerCancel={endDrag}>
@@ -7123,11 +7693,65 @@
       const [muted, setMuted] = useState(false);
       const sfx = useWaterSfx(muted);
       const allRevealed = revealed.size === list.length;
+      const journey = useJourneyLock();   // reuse the journey lock for the GPU-heavy develop
+
+      // #3: only ONE person runs the FLUX develop (the lock holder). Solo always
+      // wins the lock. The other person is a viewer: they don't hit the GPU and
+      // instead receive each developed watercolour via the shared store. We grab
+      // the lock on mount and — per the requested behaviour — RELEASE IT THE
+      // INSTANT all GPU work is finished (the shake/reveal phase is pure CSS and
+      // needs no lock), rather than holding it until the darkroom closes.
+      const [isDeveloper, setIsDeveloper] = useState(!Collab.isCollab());
+      const heldRef = useRef(false);          // do we currently hold the lock?
+      const developedRef = useRef(new Set()); // ids whose GPU work has finished
+      const releaseLock = useCallback(() => {
+        if (heldRef.current) { heldRef.current = false; journey.release(); }
+      }, []); // eslint-disable-line
+      useEffect(() => {
+        let alive = true;
+        (async () => {
+          if (!Collab.isCollab()) { setIsDeveloper(true); return; }
+          const got = await journey.acquire();
+          if (!alive) { if (got) journey.release(); return; }
+          setIsDeveloper(got);
+          if (got) { heldRef.current = true; journey.beginRefresh(); }
+        })();
+        // safety: always release on unmount in case develop never completed
+        return () => { alive = false; releaseLock(); };
+      }, []); // eslint-disable-line
+
+      // each print reports when its GPU work is done; once every print is
+      // finished, free the lock immediately so the peer can start their journey.
+      const onPrintDeveloped = useCallback((id) => {
+        developedRef.current.add(id);
+        if (list.length > 0 && developedRef.current.size >= list.length) releaseLock();
+      }, [list.length, releaseLock]);
 
       const handleRevealed = useCallback((id) => {
         setRevealed((prev) => { const next = new Set(prev); next.add(id); return next; });
       }, []);
 
+      // #5: sync the darkroom phase (baths → hang) so both move together. The
+      // developer drives the phase; the viewer follows. Either receiving a phase
+      // event applies it locally.
+      useEffect(() => {
+        const off = Collab.on("darkroom_phase", (m) => { if (m && m.phase) setPhase(m.phase); });
+        return () => off && off();
+      }, []);
+      const goPhase = useCallback((p) => {
+        setPhase(p);
+        try { Collab.send("darkroom_phase", { phase: p }); } catch (e) {}
+      }, []);
+
+      // #5: mirror peer reveals at the parent too (so the X/Y "done" counter and
+      // the "View your map" gate advance for both people).
+      useEffect(() => {
+        const off = Collab.on("darkroom_reveal", (m) => {
+          if (m && m.id) handleRevealed(m.id);
+        });
+        return () => off && off();
+      }, [handleRevealed]);
+
       return (
         <div className="fixed inset-0 z-50 flex flex-col overflow-hidden bg-[oklch(0.12_0.022_55)]">
           <style dangerouslySetInnerHTML={{ __html:
@@ -7174,11 +7798,12 @@
             </button>
           </div>
 
-          {/* centred content */}
-          <div className="relative flex flex-1 flex-col items-center justify-center gap-6 px-5 pb-10 sm:px-8">
+          {/* centred content (scrollable on small screens so tall print rows
+              never get clipped by the fixed overlay) */}
+          <div className="relative flex flex-1 flex-col items-center justify-start gap-6 overflow-y-auto px-5 pb-10 pt-2 sm:justify-center sm:px-8">
             <div className="text-center">
-              <h1 className="font-display text-5xl leading-none text-[oklch(0.92_0.04_78)] sm:text-6xl">The Darkroom</h1>
-              <p className="mt-3 font-serif italic text-xl text-[oklch(0.70_0.07_65)]">
+              <h1 className="font-display text-4xl leading-none text-[oklch(0.92_0.04_78)] sm:text-6xl">The Darkroom</h1>
+              <p className="mt-3 font-serif italic text-lg text-[oklch(0.70_0.07_65)] sm:text-xl">
                 {phase === "baths"
                   ? "developing your photos"
                   : allRevealed ? "your photos are ready"
@@ -7187,7 +7812,7 @@
             </div>
 
             {phase === "baths" ? (
-              <TopDownBaths photos={list} sfx={sfx} onComplete={() => setPhase("hang")} />
+              <TopDownBaths photos={list} sfx={sfx} onComplete={() => goPhase("hang")} />
             ) : (
               <div className="flex w-full flex-col items-center">
                 <div className="relative w-full">
@@ -7200,7 +7825,7 @@
                         : list.length <= 4 ? "w-60 sm:w-72"
                         : "w-52 sm:w-60";
                       return (
-                        <HangingPrint key={photo.id} photo={photo} index={i} swayDelay={i * 0.4} onRevealed={handleRevealed} widthClass={heroW} />
+                        <HangingPrint key={photo.id} photo={photo} index={i} swayDelay={i * 0.4} onRevealed={handleRevealed} widthClass={heroW} isDeveloper={isDeveloper} onDeveloped={onPrintDeveloped} />
                       );
                     })}
                   </ul>
@@ -7228,7 +7853,22 @@
     function Page({ onOpenSettings, onOpenPets, onOpenTrace, screen, setScreen, mapVariant, setMapVariant }) {
       // Each photo carries its own title/caption/date/time - a single source of
       // truth so the fields can never desync from the photo list.
-      const [stackPhotos, setStackPhotos] = useState(() => []);  // default: empty
+      //
+      // Upload sync: stackPhotos MUST be a live view of the shared SozaiPhotos
+      // store, not a private copy. The store is what PhotoSync relays to/from
+      // the peer (photos_state). Subscribing here means a peer's upload / edit /
+      // delete — which lands in the store via replaceAll — immediately shows up,
+      // and our own edits get broadcast. setStackPhotos is a thin wrapper that
+      // funnels every local mutation back into the store, so there is exactly
+      // ONE source of truth and uploads always sync both ways.
+      const [stackPhotos, setStackPhotosRaw] = useState(() => window.SozaiPhotos.all());
+      useEffect(() => window.SozaiPhotos.subscribe((items) => setStackPhotosRaw(items.slice())), []);
+      const setStackPhotos = useCallback((next) => {
+        const current = window.SozaiPhotos.all();
+        const resolved = typeof next === "function" ? next(current) : next;
+        if (!Array.isArray(resolved)) return;
+        window.SozaiPhotos.replaceAll(resolved);
+      }, []);
       const developPhotos = stackPhotos.map((p) => ({ id: p.id, src: p.src, alt: p.alt, defaultCaption: p.defaultCaption,
         lat: p.lat, lon: p.lon, date: p.date, time: p.time, title: p.title, caption: p.caption }));
       if (screen === "add")
@@ -7242,6 +7882,51 @@
       return <MapOfMyTime onBack={() => setScreen("add")} onOpenSettings={onOpenSettings} onOpenPets={onOpenPets} variant={mapVariant} onChangeVariant={setMapVariant} />;
     }
 
+    // ----------------------------------------------------------------- //
+    // Join gate (#4): a full-screen loading / status screen shown while a    //
+    // joiner is connecting or awaiting host approval, so they never see or    //
+    // interact with the room before they're actually admitted.               //
+    // ----------------------------------------------------------------- //
+    function JoinGate({ state }) {
+      const joining = state === "joining";
+      const pending = state === "pending";
+      const declined = state === "declined";
+      const full = state === "full";
+      const title = joining ? "Joining the room…"
+        : pending ? "Waiting for the host…"
+        : declined ? "Not admitted"
+        : "This room is full";
+      const blurb = joining ? "Connecting you to the shared album."
+        : pending ? "The host needs to let you in. Hang tight; this screen updates the moment they do."
+        : declined ? "The host didn't admit you to this room."
+        : "This room is at its 2-person limit. Ask them to make space, or start your own room.";
+      const spinning = joining || pending;
+      return (
+        <div className="fixed inset-0 z-[200] flex items-center justify-center bg-background p-6">
+          <div className="w-full max-w-sm rounded-lg border-2 border-primary/40 bg-card p-7 text-center shadow-lg">
+            <div className="mx-auto flex size-12 items-center justify-center rounded-full border-2 border-primary/50 text-primary">
+              {spinning ? <Loader2 className="size-6 animate-spin" />
+                : declined ? <X className="size-6" /> : <Users className="size-6" />}
+            </div>
+            <h1 className="mt-4 font-display text-2xl text-foreground">{title}</h1>
+            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{blurb}</p>
+            {(declined || full) ? (
+              <a href="/"
+                className="mt-5 inline-flex items-center justify-center rounded-md border-2 border-primary bg-primary px-5 py-2.5 font-mono text-xs uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90">
+                Back to start
+              </a>
+            ) : (
+              <div className="mt-5 flex items-center justify-center gap-1" aria-hidden="true">
+                <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "0ms" }} />
+                <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "150ms" }} />
+                <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "300ms" }} />
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    }
+
     function Root() {
       const [chatOpen, setChatOpen] = useState(false);
       const [unread, setUnread] = useState(0);
@@ -7252,14 +7937,23 @@
       });
       const [settings, setSettings] = useState(loadSettings);
 
+      // ---- join gate (#4) ----------------------------------------------- //
+      // When joining a room we must NOT show the live app until we're actually
+      // admitted (init arrives). Otherwise the joiner sees/can touch the room
+      // while still "pending". joinState: "joining" until init; then "in".
+      // "pending" = waiting for host approval; "declined"/"full" = terminal.
+      // Solo (no /room/ path) is "in" immediately — nothing to wait for.
+      const [joinState, setJoinState] = useState(() => (Collab.isCollab() ? "joining" : "in"));
+
       useEffect(() => { Collab.connect(); }, []);
       useEffect(() => {
         // load saved scrapbook for this room (if any) and start auto-saving
         RoomPersistence.init();
+        PhotoSync.init();   // live image relay (instant peer sync)
         const onHide = () => { try { RoomPersistence.flush(); } catch (e) {} };
         window.addEventListener("beforeunload", onHide);
         document.addEventListener("visibilitychange", () => { if (document.visibilityState === "hidden") onHide(); });
-        return () => { window.removeEventListener("beforeunload", onHide); RoomPersistence.stop(); };
+        return () => { window.removeEventListener("beforeunload", onHide); RoomPersistence.stop(); PhotoSync.stop(); };
       }, []);
       useEffect(() => { applySettings(settings); }, []); // eslint-disable-line
       useEffect(() => {
@@ -7284,16 +7978,20 @@
           }),
           Collab.on("join_pending", () => {
             window.__sozaiJoinPending = true;
-            ToastStore.push({ kind: "info", sticky: true, id: "join-wait",
-              text: "Waiting for the host to let you in…" });
+            setJoinState("pending");
           }),
           Collab.on("join_declined", () => {
             ToastStore.dismiss("join-wait");
-            ToastStore.push({ kind: "info", ttl: 8000,
-              text: "The host didn't admit you to this room." });
+            setJoinState("declined");
+          }),
+          // room is at the 2-person cap → explain and offer to go home
+          Collab.on("room_full", (m) => {
+            ToastStore.dismiss("join-wait");
+            window.__sozaiRoomFull = true;
+            setJoinState("full");
           }),
-          // once we're fully in (init arrives), clear any waiting toast
-          Collab.on("me", () => { ToastStore.dismiss("join-wait"); window.__sozaiJoinPending = false; }),
+          // once we're fully in (init arrives), reveal the app
+          Collab.on("me", () => { ToastStore.dismiss("join-wait"); window.__sozaiJoinPending = false; setJoinState("in"); }),
         ];
         return () => offs.forEach((off) => off && off());
       }, []);
@@ -7315,26 +8013,61 @@
       const [followPeer, setFollowPeer] = useState(true);
       const followRef = useRef(followPeer);
       useEffect(() => { followRef.current = followPeer; window.__sozaiFollow = followPeer; }, [followPeer]);
+      // Screens that are PERSONAL — a collaborator entering them should not drag
+      // the other person along. The cat picker ("pets") is explicitly personal:
+      // each person chooses their own cat independently. "trace" (debug/LLM
+      // trace) is likewise private. We neither follow INTO these nor broadcast
+      // our own entry into them.
+      const PRIVATE_SCREENS = React.useRef(new Set(["pets", "trace"])).current;
       useEffect(() => {
         const offs = [
-          Collab.on("screen_changed", (m) => { if (followRef.current && m && m.screen) setScreen(m.screen); }),
+          Collab.on("screen_changed", (m) => {
+            if (!followRef.current || !m || !m.screen) return;
+            if (PRIVATE_SCREENS.has(m.screen)) return;   // don't follow into a private screen
+            setScreen(m.screen);
+          }),
           Collab.on("variant_changed", (m) => { if (followRef.current && m && m.variant) setMapVariant(m.variant); }),
         ];
         return () => offs.forEach((off) => off && off());
       }, []);
-      // broadcast our own screen/variant changes for peers who are following
-      useEffect(() => { Collab.send("screen_changed", { screen }); }, [screen]);
+      // broadcast our own screen/variant changes for peers who are following —
+      // but never announce entry into a private screen (cat picker, trace), so
+      // the other person isn't yanked away while we pick a cat.
+      useEffect(() => {
+        if (PRIVATE_SCREENS.has(screen)) return;
+        Collab.send("screen_changed", { screen });
+      }, [screen]);
       useEffect(() => { Collab.send("variant_changed", { variant: mapVariant }); }, [mapVariant]);
 
+      // Ambient activity beacon (#4): tell the peer WHERE we are / what we're
+      // doing, as a friendly label — even for private screens like the cat
+      // picker (we announce it without dragging them there). This drives the
+      // "Alex is browsing the map" presence indicator in the collab bar.
+      const SCREEN_ACTIVITY = {
+        add: "adding photos", darkroom: "in the darkroom",
+        map: "exploring the Map of My Time", pets: "choosing a cat",
+        trace: "viewing the AI trace",
+      };
+      useEffect(() => {
+        const label = SCREEN_ACTIVITY[screen] || ("on the " + screen + " screen");
+        Collab.send("activity", { label, screen });
+      }, [screen]);
+
       const update = (patch) => setSettings((prev) => ({ ...prev, ...patch }));
       const openPets = () => setScreen("pets");
       const openTrace = () => setScreen("trace");
 
+      // #4: while joining / pending / declined / full, show ONLY the gate — the
+      // joiner must never see or touch the room until they're actually admitted.
+      if (joinState !== "in") {
+        return <JoinGate state={joinState} />;
+      }
+
       return (
         <SettingsContext.Provider value={{ settings, update }}>
           <div className="flex min-h-screen flex-col">
             <CollabBar onToggleChat={() => { setChatOpen((v) => !v); setUnread(0); }} unread={unread} onOpenPets={openPets} onOpenTrace={openTrace} />
-            <main className="flex flex-1 items-center justify-center bg-background p-4 sm:p-8">
+            <main className="flex flex-1 items-start justify-center overflow-y-auto bg-background p-4 sm:items-center sm:p-8">
               <Page onOpenSettings={() => setSettingsOpen(true)} onOpenPets={openPets} onOpenTrace={openTrace}
                 screen={screen} setScreen={setScreen} mapVariant={mapVariant} setMapVariant={setMapVariant} />
             </main>