clay-server 2.11.0 → 2.12.0

package/lib/public/app.js

@@ -1,7 +1,7 @@
 import { showToast, copyToClipboard, escapeHtml } from './modules/utils.js';
 import { refreshIcons, iconHtml, randomThinkingVerb } from './modules/icons.js';
 import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, closeMermaidModal, parseEmojis } from './modules/markdown.js';
-import { initSidebar, renderSessionList, handleSearchResults, updateSessionPresence, updatePageTitle, getActiveSearchQuery, buildSearchTimeline, removeSearchTimeline, populateCliSessionList, renderIconStrip, renderSidebarPresence, initIconStrip, getEmojiCategories, renderUserStrip, setCurrentDmUser, updateDmBadge, updateSessionBadge, updateProjectBadge, closeDmUserPicker, spawnDustParticles } from './modules/sidebar.js';
+import { initSidebar, renderSessionList, handleSearchResults, handleSearchContentResults, updateSessionPresence, updatePageTitle, getActiveSearchQuery, buildSearchTimeline, removeSearchTimeline, onHistoryPrepended, populateCliSessionList, renderIconStrip, renderSidebarPresence, initIconStrip, getEmojiCategories, renderUserStrip, setCurrentDmUser, updateDmBadge, updateSessionBadge, updateProjectBadge, closeDmUserPicker, spawnDustParticles } from './modules/sidebar.js';
 import { initRewind, setRewindMode, showRewindModal, clearPendingRewindUuid, addRewindButton } from './modules/rewind.js';
 import { initNotifications, showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundEnabled } from './modules/notifications.js';
 import { initInput, clearPendingImages, handleInputSync, autoResize, builtinCommands, sendMessage } from './modules/input.js';
@@ -20,6 +20,8 @@ import { initPlaybook, openPlaybook, getPlaybooks, getPlaybookForTip, isComplete
 import { initSTT } from './modules/stt.js';
 import { initProfile } from './modules/profile.js';
 import { initAdmin, checkAdminAccess } from './modules/admin.js';
+import { initSessionSearch, toggleSearch, closeSearch, isSearchOpen, handleFindInSessionResults, onHistoryPrepended as onSessionSearchHistoryPrepended } from './modules/session-search.js';
+import { initTooltips, registerTooltip } from './modules/tooltip.js';
 
 // --- Base path for multi-project routing ---
   var slugMatch = location.pathname.match(/^\/p\/([a-z0-9_-]+)/);
@@ -32,7 +34,8 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
   var inputEl = $("input");
   var sendBtn = $("send-btn");
   function getStatusDot() {
-    return document.querySelector("#icon-strip-projects .icon-strip-item.active .icon-strip-status");
+    return document.querySelector("#icon-strip-projects .icon-strip-item.active .icon-strip-status") ||
+           document.querySelector("#icon-strip-projects .icon-strip-wt-item.active .icon-strip-status");
   }
   var headerTitleEl = $("header-title");
   var headerRenameBtn = $("header-rename-btn");
@@ -902,7 +905,18 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
   function renderProjectList() {
     // Render icon strip projects
     var iconStripProjects = cachedProjects.map(function (p) {
-      return { slug: p.slug, name: p.title || p.project, icon: p.icon || null, isProcessing: p.isProcessing, onlineUsers: p.onlineUsers || [], unread: p.unread || 0 };
+      return {
+        slug: p.slug,
+        name: p.title || p.project,
+        icon: p.icon || null,
+        isProcessing: p.isProcessing,
+        onlineUsers: p.onlineUsers || [],
+        unread: p.unread || 0,
+        isWorktree: p.isWorktree || false,
+        parentSlug: p.parentSlug || null,
+        branch: p.branch || null,
+        worktreeAccessible: p.worktreeAccessible !== undefined ? p.worktreeAccessible : true,
+      };
     });
     renderIconStrip(iconStripProjects, currentSlug);
     // Update title bar project name and icon if it changed
@@ -1214,6 +1228,9 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
   // --- Theme (module) ---
   initTheme();
 
+  // --- Tooltips ---
+  initTooltips();
+
   // --- Sidebar (module) ---
   var sidebarCtx = {
     $: $,
@@ -1244,6 +1261,7 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     openAddProjectModal: function () { openAddProjectModal(); },
     sendWs: function (msg) { if (ws && ws.readyState === 1) ws.send(JSON.stringify(msg)); },
     onDmRemoveUser: function (userId) { dmRemovedUsers[userId] = true; },
+    getHistoryFrom: function () { return historyFrom; },
   };
   initSidebar(sidebarCtx);
   initIconStrip(sidebarCtx);
@@ -1362,12 +1380,21 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     // Also blink the active session's processing dot in sidebar
     var sessionDot = document.querySelector(".session-item.active .session-processing");
     if (sessionDot) sessionDot.classList.add("io");
+    // If active project is a worktree, also blink the parent project dot
+    var activeWt = document.querySelector("#icon-strip-projects .icon-strip-wt-item.active");
+    var parentDot = null;
+    if (activeWt) {
+      var group = activeWt.closest(".icon-strip-group");
+      if (group) parentDot = group.querySelector(".folder-header .icon-strip-status");
+      if (parentDot) parentDot.classList.add("io");
+    }
     clearTimeout(ioTimer);
     ioTimer = setTimeout(function () {
       var d = getStatusDot();
       if (d) d.classList.remove("io");
       var sd = document.querySelector(".session-item.active .session-processing.io");
       if (sd) sd.classList.remove("io");
+      if (parentDot) parentDot.classList.remove("io");
     }, 80);
   }
 
@@ -1389,7 +1416,7 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
   function updateCrossProjectBlink() {
     if (crossProjectBlinkTimer) { clearTimeout(crossProjectBlinkTimer); crossProjectBlinkTimer = null; }
     function doBlink() {
-      var dots = document.querySelectorAll("#icon-strip-projects .icon-strip-item:not(.active) .icon-strip-status.processing");
+      var dots = document.querySelectorAll("#icon-strip-projects .icon-strip-item:not(.active) .icon-strip-status.processing, #icon-strip-projects .icon-strip-wt-item:not(.active) .icon-strip-status.processing");
       if (dots.length === 0) { crossProjectBlinkTimer = null; return; }
       for (var i = 0; i < dots.length; i++) { dots[i].classList.add("io"); }
       setTimeout(function () {
@@ -2522,6 +2549,16 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
       sessionHint.textContent = "After logging in, start a new session to continue.";
       div.appendChild(sessionHint);
 
+      var loginBtn = document.createElement("button");
+      loginBtn.className = "auth-required-btn";
+      loginBtn.textContent = "Open terminal & log in";
+      loginBtn.addEventListener("click", function () {
+        pendingTermCommand = "claude\n";
+        ws.send(JSON.stringify({ type: "term_create", cols: 80, rows: 24 }));
+        openTerminal();
+      });
+      div.appendChild(loginBtn);
+
       addToMessages(div);
       scrollToBottom();
 
@@ -2734,6 +2771,7 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
   }
 
   function resetClientState() {
+    if (isSearchOpen()) closeSearch();
     messagesEl.innerHTML = "";
     currentMsgEl = null;
     currentFullText = "";
@@ -3164,6 +3202,18 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
           updateSessionPresence(msg.presence || {});
           break;
 
+        case "cursor_move":
+          handleRemoteCursorMove(msg);
+          break;
+
+        case "cursor_leave":
+          handleRemoteCursorLeave(msg);
+          break;
+
+        case "text_select":
+          handleRemoteSelection(msg);
+          break;
+
         case "session_io":
           blinkSessionDot(msg.id);
           break;
@@ -3176,6 +3226,14 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
           handleSearchResults(msg);
           break;
 
+        case "search_content_results":
+          if (msg.source === "find_in_session") {
+            handleFindInSessionResults(msg);
+          } else {
+            handleSearchContentResults(msg);
+          }
+          break;
+
         case "cli_session_list":
           populateCliSessionList(msg.sessions || []);
           break;
@@ -3190,9 +3248,13 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
           }
           activeSessionId = msg.id;
           cliSessionId = msg.cliSessionId || null;
+          clearRemoteCursors();
           resetClientState();
           updateRalphBars();
           updateLoopInputVisibility(msg.loop);
+          // Restore input area visibility (may have been hidden by auth_required)
+          var inputAreaSw = document.getElementById("input-area");
+          if (inputAreaSw) inputAreaSw.classList.remove("hidden");
           // Restore draft for incoming session
           var draft = sessionDrafts[activeSessionId] || "";
           inputEl.value = draft;
@@ -3965,6 +4027,10 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     } else {
       updateHistorySentinel();
     }
+
+    // Notify sidebar search that history was prepended (for pending scroll targets)
+    onHistoryPrepended();
+    onSessionSearchHistoryPrepended();
   }
 
   function scheduleReconnect() {
@@ -4133,6 +4199,7 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     if (d.multiUser) isMultiUserMode = true;
     if (d.user && d.user.id) myUserId = d.user.id;
     if (d.mustChangePin) showForceChangePinOverlay();
+    initCursorToggle();
   }).catch(function () {});
   // Hide server settings and update controls for non-admin users in multi-user mode
   checkAdminAccess().then(function (isAdmin) {
@@ -4213,6 +4280,19 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
   // --- Playbook Engine ---
   initPlaybook();
 
+  // --- In-session search (Cmd+F / Ctrl+F) ---
+  initSessionSearch({
+    messagesEl: messagesEl,
+    get ws() { return ws; },
+    getHistoryFrom: function () { return historyFrom; },
+  });
+  var findInSessionBtn = $("find-in-session-btn");
+  if (findInSessionBtn) {
+    findInSessionBtn.addEventListener("click", function () {
+      toggleSearch();
+    });
+  }
+
   // --- Sticky Notes ---
   initStickyNotes({
     get ws() { return ws; },
@@ -5090,7 +5170,11 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
       showRemoveProjectTaskDialog(slug, name, msg.count);
     } else {
       // No tasks — confirm then particle burst + remove
-      showConfirm('Remove "' + name + '"? You can re-add it later.', function () {
+      var isWt = slug.indexOf("--") !== -1;
+      var confirmMsg = isWt
+        ? 'Delete worktree "' + name + '"? The branch and working directory will be removed from disk.'
+        : 'Remove "' + name + '"? You can re-add it later.';
+      showConfirm(confirmMsg, function () {
         // Find the icon strip item to anchor the particle burst
         var iconEl = document.querySelector('.icon-strip-item[data-slug="' + slug + '"]');
         if (iconEl) {
@@ -5166,26 +5250,33 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
 
   function handleRemoveProjectResult(msg) {
     if (msg.ok) {
-      showToast("Project removed", "success");
-      // If we removed the current project, go to home hub without full reload
+      // If we removed the current project, navigate away
       if (msg.slug === currentSlug) {
+        // Check if this is a worktree: navigate to parent project instead of home hub
+        var isWorktree = msg.slug.indexOf("--") !== -1;
+        var parentSlug = isWorktree ? msg.slug.split("--")[0] : null;
+
+        showToast(isWorktree ? "Worktree removed" : "Project removed", "success");
+
         // Suppress disconnect overlay and reconnect by detaching the WS
         if (ws) { ws.onclose = null; ws.onerror = null; ws.close(); ws = null; }
         if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
         connected = false;
         connectOverlay.classList.add("hidden");
-        // Add to cached removed projects for re-add UI
-        var removedProj = null;
-        for (var ri = 0; ri < cachedProjects.length; ri++) {
-          if (cachedProjects[ri].slug === msg.slug) { removedProj = cachedProjects[ri]; break; }
-        }
-        if (removedProj) {
-          cachedRemovedProjects.push({
-            path: removedProj.path || "",
-            title: removedProj.title || null,
-            icon: removedProj.icon || null,
-            removedAt: Date.now(),
-          });
+        if (!isWorktree) {
+          // Add to cached removed projects for re-add UI
+          var removedProj = null;
+          for (var ri = 0; ri < cachedProjects.length; ri++) {
+            if (cachedProjects[ri].slug === msg.slug) { removedProj = cachedProjects[ri]; break; }
+          }
+          if (removedProj) {
+            cachedRemovedProjects.push({
+              path: removedProj.path || "",
+              title: removedProj.title || null,
+              icon: removedProj.icon || null,
+              removedAt: Date.now(),
+            });
+          }
         }
         // Remove from cached projects and re-render icon strip
         cachedProjects = cachedProjects.filter(function (p) { return p.slug !== msg.slug; });
@@ -5193,7 +5284,14 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
         currentSlug = null;
         renderProjectList();
         resetClientState();
-        showHomeHub();
+
+        if (parentSlug && switchProject) {
+          switchProject(parentSlug);
+        } else {
+          showHomeHub();
+        }
+      } else {
+        showToast(msg.slug.indexOf("--") !== -1 ? "Worktree removed" : "Project removed", "success");
       }
     } else {
       showToast(msg.error || "Failed to remove project", "error");
@@ -5596,6 +5694,455 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     });
   })();
 
+  // --- Remote Cursor Presence ---
+  var cursorSharingEnabled = localStorage.getItem("cursorSharing") !== "off";
+  var remoteCursors = {}; // userId -> { el, timer }
+  var cursorThrottleTimer = null;
+  var CURSOR_THROTTLE_MS = 30;
+  var CURSOR_HIDE_TIMEOUT = 5000;
+
+  // Cursor sharing toggle button in user island (multi-user only)
+  function initCursorToggle() {
+    if (!isMultiUserMode) return;
+    var actionsEl = document.querySelector(".user-island-actions");
+    if (!actionsEl) return;
+    if (document.getElementById("cursor-share-toggle")) return;
+
+    var btn = document.createElement("button");
+    btn.id = "cursor-share-toggle";
+    btn.className = "cursor-share-btn";
+    btn.innerHTML = '<i data-lucide="mouse-pointer-2"></i>';
+    actionsEl.appendChild(btn);
+
+    function updateToggleStyle() {
+      if (cursorSharingEnabled) {
+        btn.classList.remove("off");
+        btn.classList.add("on");
+        registerTooltip(btn, "Cursor sharing on");
+      } else {
+        btn.classList.remove("on");
+        btn.classList.add("off");
+        registerTooltip(btn, "Cursor sharing off");
+      }
+    }
+
+    updateToggleStyle();
+    lucide.createIcons({ nodes: [btn] });
+
+    btn.addEventListener("click", function () {
+      cursorSharingEnabled = !cursorSharingEnabled;
+      localStorage.setItem("cursorSharing", cursorSharingEnabled ? "on" : "off");
+      updateToggleStyle();
+      if (!cursorSharingEnabled && ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "cursor_leave" }));
+        ws.send(JSON.stringify({ type: "text_select", ranges: [] }));
+      }
+    });
+  }
+
+  // Unique colors for remote cursors (Figma-style)
+  var cursorColors = [
+    "#F24822", "#FF7262", "#A259FF", "#1ABCFE",
+    "#0ACF83", "#FF6D00", "#E84393", "#6C5CE7",
+    "#00B894", "#FDCB6E", "#E17055", "#74B9FF",
+  ];
+  var userColorMap = {};
+  var nextColorIdx = 0;
+
+  function getCursorColor(userId) {
+    if (!userColorMap[userId]) {
+      userColorMap[userId] = cursorColors[nextColorIdx % cursorColors.length];
+      nextColorIdx++;
+    }
+    return userColorMap[userId];
+  }
+
+  function createCursorElement(userId, displayName, color, avatarStyle, avatarSeed) {
+    var wrapper = document.createElement("div");
+    wrapper.className = "remote-cursor";
+    wrapper.dataset.userId = userId;
+    wrapper.style.position = "absolute";
+    wrapper.style.zIndex = "9999";
+    wrapper.style.pointerEvents = "none";
+    wrapper.style.display = "none";
+    wrapper.style.transition = "left 30ms linear, top 30ms linear";
+    wrapper.style.willChange = "left, top";
+
+    // SVG cursor arrow
+    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("width", "16");
+    svg.setAttribute("height", "20");
+    svg.setAttribute("viewBox", "0 0 16 20");
+    svg.style.display = "block";
+    svg.style.filter = "drop-shadow(0 1px 2px rgba(0,0,0,0.3))";
+    var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", "M0 0 L0 16 L4.5 12 L8 19 L10.5 18 L7 11 L13 11 Z");
+    path.setAttribute("fill", color);
+    path.setAttribute("stroke", "#fff");
+    path.setAttribute("stroke-width", "1");
+    svg.appendChild(path);
+    wrapper.appendChild(svg);
+
+    // Tag: avatar + name label together
+    var tag = document.createElement("div");
+    tag.className = "remote-cursor-tag";
+    tag.style.cssText = "position:absolute;left:14px;top:14px;display:flex;align-items:center;" +
+      "gap:3px;background:" + color + ";padding:1px 6px 1px 2px;border-radius:10px;" +
+      "pointer-events:none;white-space:nowrap;";
+
+    // Avatar
+    var avatarImg = document.createElement("img");
+    avatarImg.className = "remote-cursor-avatar";
+    var style = avatarStyle || "thumbs";
+    var seed = avatarSeed || userId;
+    avatarImg.src = "https://api.dicebear.com/9.x/" + style + "/svg?seed=" + encodeURIComponent(seed) + "&size=16";
+    avatarImg.style.cssText = "width:14px;height:14px;border-radius:50%;background:#fff;flex-shrink:0;";
+    tag.appendChild(avatarImg);
+
+    // Name label
+    var label = document.createElement("span");
+    label.className = "remote-cursor-label";
+    label.textContent = displayName;
+    label.style.cssText = "color:#fff;font-size:11px;font-weight:500;line-height:16px;font-family:inherit;";
+    tag.appendChild(label);
+
+    wrapper.appendChild(tag);
+
+    return wrapper;
+  }
+
+
+  // Compute cumulative character offset within a container element
+  function getCharOffset(container, targetNode, targetOffset) {
+    var walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null, false);
+    var offset = 0;
+    var node;
+    while ((node = walker.nextNode())) {
+      if (node === targetNode) {
+        return offset + targetOffset;
+      }
+      offset += node.textContent.length;
+    }
+    return offset;
+  }
+
+  // Find text node + local offset for a given cumulative character offset
+  function getNodeAtCharOffset(container, charOffset) {
+    var walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null, false);
+    var consumed = 0;
+    var node;
+    var lastNode = null;
+    while ((node = walker.nextNode())) {
+      lastNode = node;
+      var len = node.textContent.length;
+      if (consumed + len >= charOffset) {
+        return { node: node, offset: Math.min(charOffset - consumed, len) };
+      }
+      consumed += len;
+    }
+    if (lastNode) {
+      return { node: lastNode, offset: lastNode.textContent.length };
+    }
+    return null;
+  }
+
+  // Find parent [data-turn] element from a DOM node
+  function findParentTurn(node) {
+    var el = node.nodeType === 3 ? node.parentElement : node;
+    while (el && el !== messagesEl) {
+      if (el.dataset && el.dataset.turn != null) return el;
+      el = el.parentElement;
+    }
+    return null;
+  }
+
+  // --- Remote Selection Highlight ---
+  var remoteSelections = {}; // userId -> { els: [], timer }
+
+  function clearRemoteSelection(userId) {
+    var sel = remoteSelections[userId];
+    if (!sel) return;
+    for (var i = 0; i < sel.els.length; i++) {
+      if (sel.els[i].parentNode) sel.els[i].parentNode.removeChild(sel.els[i]);
+    }
+    sel.els = [];
+  }
+
+  function handleRemoteSelection(msg) {
+    var userId = msg.userId;
+    var color = getCursorColor(userId);
+
+    if (!remoteSelections[userId]) {
+      remoteSelections[userId] = { els: [], timer: null };
+    }
+
+    // Clear previous highlight
+    clearRemoteSelection(userId);
+
+    // If selection cleared, just remove
+    if (!msg.ranges || msg.ranges.length === 0) return;
+
+    var containerRect = messagesEl.getBoundingClientRect();
+
+    for (var r = 0; r < msg.ranges.length; r++) {
+      var sel = msg.ranges[r];
+      var startTurnEl = messagesEl.querySelector('[data-turn="' + sel.startTurn + '"]');
+      var endTurnEl = messagesEl.querySelector('[data-turn="' + sel.endTurn + '"]');
+      if (!startTurnEl || !endTurnEl) continue;
+
+      var startResult = getNodeAtCharOffset(startTurnEl, sel.startCh);
+      var endResult = getNodeAtCharOffset(endTurnEl, sel.endCh);
+      if (!startResult || !endResult) continue;
+
+      try {
+        var range = document.createRange();
+        range.setStart(startResult.node, startResult.offset);
+        range.setEnd(endResult.node, endResult.offset);
+        var rects = range.getClientRects();
+
+        for (var i = 0; i < rects.length; i++) {
+          var rect = rects[i];
+          if (rect.width === 0 && rect.height === 0) continue;
+          var highlight = document.createElement("div");
+          highlight.className = "remote-selection";
+          highlight.dataset.userId = userId;
+          highlight.style.cssText =
+            "position:absolute;pointer-events:none;z-index:9998;" +
+            "background:" + color + ";" +
+            "opacity:0.2;" +
+            "border-radius:2px;" +
+            "left:" + (rect.left - containerRect.left + messagesEl.scrollLeft) + "px;" +
+            "top:" + (rect.top - containerRect.top + messagesEl.scrollTop) + "px;" +
+            "width:" + rect.width + "px;" +
+            "height:" + rect.height + "px;";
+          messagesEl.appendChild(highlight);
+          remoteSelections[userId].els.push(highlight);
+        }
+      } catch (e) {}
+    }
+
+    // Auto-hide after timeout
+    if (remoteSelections[userId].timer) clearTimeout(remoteSelections[userId].timer);
+    remoteSelections[userId].timer = setTimeout(function () {
+      clearRemoteSelection(userId);
+    }, 10000);
+  }
+
+  function createOffscreenIndicator(userId, displayName, color) {
+    var btn = document.createElement("button");
+    btn.className = "remote-cursor-offscreen";
+    btn.dataset.userId = userId;
+    btn.style.cssText =
+      "position:absolute;left:50%;transform:translateX(-50%);" +
+      "z-index:10000;display:none;cursor:pointer;border:none;outline:none;" +
+      "background:" + color + ";color:#fff;font-size:11px;font-weight:500;" +
+      "padding:3px 10px 3px 8px;border-radius:12px;white-space:nowrap;" +
+      "font-family:inherit;line-height:16px;opacity:0.9;" +
+      "box-shadow:0 2px 8px rgba(0,0,0,0.2);pointer-events:auto;" +
+      "transition:opacity 0.15s;";
+    btn.addEventListener("mouseenter", function () { btn.style.opacity = "1"; });
+    btn.addEventListener("mouseleave", function () { btn.style.opacity = "0.9"; });
+    return btn;
+  }
+
+  function updateCursorVisibility(entry) {
+    var visibleTop = messagesEl.scrollTop;
+    var visibleBottom = visibleTop + messagesEl.clientHeight;
+    var y = entry.lastY || 0;
+
+    if (y < visibleTop) {
+      entry.indicator.style.top = (visibleTop + 6) + "px";
+      entry.indicator.style.display = "";
+    } else if (y > visibleBottom) {
+      entry.indicator.style.top = (visibleBottom - 28) + "px";
+      entry.indicator.style.display = "";
+    } else {
+      entry.indicator.style.display = "none";
+    }
+  }
+
+  function handleRemoteCursorMove(msg) {
+    var userId = msg.userId;
+
+    var entry = remoteCursors[userId];
+    if (!entry) {
+      var color = getCursorColor(userId);
+      var el = createCursorElement(userId, msg.displayName, color, msg.avatarStyle, msg.avatarSeed);
+      messagesEl.appendChild(el);
+      var indicator = createOffscreenIndicator(userId, msg.displayName, color);
+      messagesEl.appendChild(indicator);
+      entry = { el: el, indicator: indicator, timer: null, lastY: 0, active: false };
+      remoteCursors[userId] = entry;
+
+      indicator.addEventListener("click", function () {
+        messagesEl.scrollTo({ top: entry.lastY - messagesEl.clientHeight / 2, behavior: "smooth" });
+      });
+    }
+
+    // Find the same turn element on this screen
+    var anchorEl = null;
+    if (msg.turn != null) {
+      anchorEl = messagesEl.querySelector('[data-turn="' + msg.turn + '"]');
+    }
+
+    if (anchorEl && msg.rx != null && msg.ry != null) {
+      var x = anchorEl.offsetLeft + msg.rx * anchorEl.offsetWidth;
+      var y = anchorEl.offsetTop + msg.ry * anchorEl.offsetHeight;
+      entry.lastY = y;
+      entry.active = true;
+
+      // Update indicator label (direction set by updateCursorVisibility)
+      entry.indicator.textContent = (y < messagesEl.scrollTop ? "▲ " : "▼ ") + (msg.displayName || userId);
+
+      entry.el.style.left = x + "px";
+      entry.el.style.top = y + "px";
+      entry.el.style.display = "";
+
+      updateCursorVisibility(entry);
+    }
+
+    // Reset hide timer
+    if (entry.timer) clearTimeout(entry.timer);
+    entry.timer = setTimeout(function () {
+      entry.el.style.display = "none";
+      entry.indicator.style.display = "none";
+      entry.active = false;
+    }, CURSOR_HIDE_TIMEOUT);
+  }
+
+  function handleRemoteCursorLeave(msg) {
+    var entry = remoteCursors[msg.userId];
+    if (entry) {
+      entry.el.style.display = "none";
+      entry.indicator.style.display = "none";
+      entry.active = false;
+      if (entry.timer) clearTimeout(entry.timer);
+    }
+  }
+
+  // Find the closest [data-turn] element to a given clientY
+  function findClosestTurn(clientY) {
+    var turns = messagesEl.querySelectorAll("[data-turn]");
+    if (!turns.length) return null;
+    // First: exact hit
+    for (var i = 0; i < turns.length; i++) {
+      var r = turns[i].getBoundingClientRect();
+      if (clientY >= r.top && clientY <= r.bottom) return turns[i];
+    }
+    // Second: closest by distance
+    var closest = null;
+    var closestDist = Infinity;
+    for (var j = 0; j < turns.length; j++) {
+      var rect = turns[j].getBoundingClientRect();
+      var mid = (rect.top + rect.bottom) / 2;
+      var dist = Math.abs(clientY - mid);
+      if (dist < closestDist) { closestDist = dist; closest = turns[j]; }
+    }
+    return closest;
+  }
+
+
+  // Track local cursor and send to server
+  messagesEl.addEventListener("mousemove", function (e) {
+    if (!cursorSharingEnabled) return;
+    if (!ws || ws.readyState !== 1) return;
+    if (cursorThrottleTimer) return;
+    cursorThrottleTimer = setTimeout(function () { cursorThrottleTimer = null; }, CURSOR_THROTTLE_MS);
+
+    // Find which turn element the cursor is over
+    var turnEl = findClosestTurn(e.clientY);
+    if (!turnEl) return;
+
+    // Calculate ratio within the turn element
+    var turnRect = turnEl.getBoundingClientRect();
+    var rx = turnRect.width > 0 ? (e.clientX - turnRect.left) / turnRect.width : 0;
+    var ry = turnRect.height > 0 ? (e.clientY - turnRect.top) / turnRect.height : 0;
+
+    ws.send(JSON.stringify({
+      type: "cursor_move",
+      turn: parseInt(turnEl.dataset.turn, 10),
+      rx: Math.max(0, Math.min(1, rx)),
+      ry: Math.max(0, Math.min(1, ry))
+    }));
+  });
+
+  messagesEl.addEventListener("mouseleave", function () {
+    if (!cursorSharingEnabled) return;
+    if (!ws || ws.readyState !== 1) return;
+    ws.send(JSON.stringify({ type: "cursor_leave" }));
+  });
+
+  // Update offscreen indicators on scroll
+  messagesEl.addEventListener("scroll", function () {
+    for (var uid in remoteCursors) {
+      var entry = remoteCursors[uid];
+      if (!entry.active) continue;
+      updateCursorVisibility(entry);
+    }
+  });
+
+  // Track local text selection and send to server
+  var selectionThrottleTimer = null;
+  var lastSelectionKey = "";
+  document.addEventListener("selectionchange", function () {
+    if (!cursorSharingEnabled) return;
+    if (!ws || ws.readyState !== 1) return;
+    if (selectionThrottleTimer) return;
+    selectionThrottleTimer = setTimeout(function () { selectionThrottleTimer = null; }, 100);
+
+    var sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) {
+      // Selection cleared
+      if (lastSelectionKey !== "") {
+        lastSelectionKey = "";
+        ws.send(JSON.stringify({ type: "text_select", ranges: [] }));
+      }
+      return;
+    }
+
+    var ranges = [];
+    for (var i = 0; i < sel.rangeCount; i++) {
+      var range = sel.getRangeAt(i);
+      var startTurn = findParentTurn(range.startContainer);
+      var endTurn = findParentTurn(range.endContainer);
+      if (!startTurn || !endTurn) continue;
+      // Both must be inside messagesEl
+      if (!messagesEl.contains(startTurn)) continue;
+
+      var startCh = getCharOffset(startTurn, range.startContainer, range.startOffset);
+      var endCh = getCharOffset(endTurn, range.endContainer, range.endOffset);
+
+      ranges.push({
+        startTurn: parseInt(startTurn.dataset.turn, 10),
+        startCh: startCh,
+        endTurn: parseInt(endTurn.dataset.turn, 10),
+        endCh: endCh
+      });
+    }
+
+    var key = JSON.stringify(ranges);
+    if (key === lastSelectionKey) return;
+    lastSelectionKey = key;
+
+    ws.send(JSON.stringify({ type: "text_select", ranges: ranges }));
+  });
+
+  // Clean up remote cursors and selections when switching sessions
+  function clearRemoteCursors() {
+    for (var uid in remoteCursors) {
+      var entry = remoteCursors[uid];
+      if (entry.timer) clearTimeout(entry.timer);
+      if (entry.el.parentNode) entry.el.parentNode.removeChild(entry.el);
+      if (entry.indicator && entry.indicator.parentNode) entry.indicator.parentNode.removeChild(entry.indicator);
+    }
+    remoteCursors = {};
+    for (var uid2 in remoteSelections) {
+      clearRemoteSelection(uid2);
+      if (remoteSelections[uid2].timer) clearTimeout(remoteSelections[uid2].timer);
+    }
+    remoteSelections = {};
+  }
+
   // --- Init ---
   lucide.createIcons();
   connect();