clay-server 2.11.0 → 2.12.0-beta.1

package/lib/public/modules/sidebar.js

@@ -1240,38 +1240,34 @@ export function populateCliSessionList(sessions) {
 // --- Search hit timeline (right-side markers) ---
 var searchTimelineScrollHandler = null;
 var activeSearchQuery = ""; // query active in the timeline
+var pendingSearchScrollTarget = null; // { historyIndex, snippet, query } for scroll after history load
 
 export function getActiveSearchQuery() {
   return searchQuery;
 }
 
+// Request server-side content search for the active session
 export function buildSearchTimeline(query) {
   removeSearchTimeline();
   if (!query) return;
   activeSearchQuery = query;
-
-  var q = query.toLowerCase();
-  var messagesEl = ctx.messagesEl;
-
-  // Collect all message elements that contain the query
-  var allMsgs = messagesEl.querySelectorAll(".msg-user, .msg-assistant");
-  var hits = [];
-  for (var i = 0; i < allMsgs.length; i++) {
-    var msgEl = allMsgs[i];
-    var textEl = msgEl.querySelector(".bubble") || msgEl.querySelector(".md-content");
-    if (!textEl) continue;
-    var text = textEl.textContent || "";
-    if (text.toLowerCase().indexOf(q) === -1) continue;
-
-    // Extract a snippet around the match
-    var idx = text.toLowerCase().indexOf(q);
-    var start = Math.max(0, idx - 10);
-    var end = Math.min(text.length, idx + query.length + 10);
-    var snippet = (start > 0 ? "\u2026" : "") + text.substring(start, end) + (end < text.length ? "\u2026" : "");
-    hits.push({ el: msgEl, snippet: snippet });
+  // Request full-history search from server
+  if (ctx.ws && ctx.connected) {
+    ctx.ws.send(JSON.stringify({ type: "search_session_content", query: query }));
   }
+}
+
+// Handle server response with full-history search results
+export function handleSearchContentResults(msg) {
+  if (msg.query !== activeSearchQuery) return; // stale response
+  var savedQuery = activeSearchQuery;
+  removeSearchTimeline();
+  if (!msg.hits || msg.hits.length === 0) return;
+  activeSearchQuery = savedQuery;
 
-  if (hits.length === 0) return;
+  var hits = msg.hits;
+  var total = msg.total;
+  var messagesEl = ctx.messagesEl;
 
   var timeline = document.createElement("div");
   timeline.className = "search-timeline";
@@ -1279,6 +1275,7 @@ export function buildSearchTimeline(query) {
 
   var track = document.createElement("div");
   track.className = "rewind-timeline-track";
+  track.dataset.historyTotal = total;
 
   var viewport = document.createElement("div");
   viewport.className = "rewind-timeline-viewport";
@@ -1286,7 +1283,8 @@ export function buildSearchTimeline(query) {
 
   for (var i = 0; i < hits.length; i++) {
     var hit = hits[i];
-    var pct = hits.length === 1 ? 50 : 6 + (i / (hits.length - 1)) * 88;
+    // Position based on historyIndex relative to total history length
+    var pct = total <= 1 ? 50 : 6 + (hit.historyIndex / (total - 1)) * 88;
 
     var snippetText = hit.snippet;
     if (snippetText.length > 24) snippetText = snippetText.substring(0, 24) + "\u2026";
@@ -1295,16 +1293,14 @@ export function buildSearchTimeline(query) {
     marker.className = "rewind-timeline-marker search-hit-marker";
     marker.innerHTML = iconHtml("search") + '<span class="marker-text">' + escapeHtml(snippetText) + '</span>';
     marker.style.top = pct + "%";
-    marker.dataset.offsetTop = hit.el.offsetTop;
+    // Store historyIndex for click handling and viewport check
+    marker.dataset.historyIndex = hit.historyIndex;
 
-    (function(targetEl, markerEl) {
+    (function(hitData, markerEl) {
       markerEl.addEventListener("click", function() {
-        targetEl.scrollIntoView({ behavior: "smooth", block: "center" });
-        targetEl.classList.remove("search-blink");
-        void targetEl.offsetWidth; // force reflow
-        targetEl.classList.add("search-blink");
+        scrollToSearchHit(hitData.historyIndex, hitData.snippet, msg.query);
       });
-    })(hit.el, marker);
+    })(hit, marker);
 
     track.appendChild(marker);
   }
@@ -1330,32 +1326,86 @@ export function buildSearchTimeline(query) {
   updateSearchTimelineViewport(track, viewport);
 }
 
+function scrollToSearchHit(historyIndex, snippet, query) {
+  var historyFrom = ctx.getHistoryFrom ? ctx.getHistoryFrom() : 0;
+  if (historyIndex < historyFrom) {
+    // Need to load older history first
+    pendingSearchScrollTarget = { historyIndex: historyIndex, snippet: snippet, query: query };
+    if (ctx.ws && ctx.connected) {
+      ctx.ws.send(JSON.stringify({ type: "load_more_history", before: historyFrom, target: historyIndex }));
+    }
+    return;
+  }
+  // History is loaded, find matching element in DOM
+  findAndScrollToMatch(snippet, query);
+}
+
+function findAndScrollToMatch(snippet, query) {
+  var messagesEl = ctx.messagesEl;
+  var q = query.toLowerCase();
+  var allMsgs = messagesEl.querySelectorAll(".msg-user, .msg-assistant");
+  for (var i = 0; i < allMsgs.length; i++) {
+    var msgEl = allMsgs[i];
+    var textEl = msgEl.querySelector(".bubble") || msgEl.querySelector(".md-content");
+    if (!textEl) continue;
+    var text = textEl.textContent || "";
+    if (text.toLowerCase().indexOf(q) === -1) continue;
+    // Check if the snippet content matches (strip ellipsis for comparison)
+    var cleanSnippet = snippet.replace(/^\u2026/, "").replace(/\u2026$/, "");
+    if (text.indexOf(cleanSnippet) !== -1) {
+      msgEl.scrollIntoView({ behavior: "smooth", block: "center" });
+      msgEl.classList.remove("search-blink");
+      void msgEl.offsetWidth;
+      msgEl.classList.add("search-blink");
+      return;
+    }
+  }
+  // Fallback: scroll to any element containing the query text
+  for (var j = 0; j < allMsgs.length; j++) {
+    var el = allMsgs[j];
+    var tEl = el.querySelector(".bubble") || el.querySelector(".md-content");
+    if (!tEl) continue;
+    if ((tEl.textContent || "").toLowerCase().indexOf(q) !== -1) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+      el.classList.remove("search-blink");
+      void el.offsetWidth;
+      el.classList.add("search-blink");
+      return;
+    }
+  }
+}
+
+// Called after history_prepend completes, to scroll to pending target
+export function onHistoryPrepended() {
+  if (!pendingSearchScrollTarget) return;
+  var target = pendingSearchScrollTarget;
+  pendingSearchScrollTarget = null;
+  requestAnimationFrame(function() {
+    findAndScrollToMatch(target.snippet, target.query);
+  });
+}
+
 function updateSearchTimelineViewport(track, viewport) {
   if (!track) return;
   var messagesEl = ctx.messagesEl;
   var scrollH = messagesEl.scrollHeight;
   var viewH = messagesEl.clientHeight;
-  if (scrollH <= viewH) {
-    viewport.style.top = "0";
-    viewport.style.height = "100%";
-  } else {
-    var viewTop = messagesEl.scrollTop / scrollH;
-    var viewBot = (messagesEl.scrollTop + viewH) / scrollH;
-    viewport.style.top = (viewTop * 100) + "%";
-    viewport.style.height = ((viewBot - viewTop) * 100) + "%";
-  }
 
-  var markers = track.querySelectorAll(".search-hit-marker");
-  var vTop = messagesEl.scrollTop;
-  var vBot = vTop + viewH;
+  // Map the visible scroll area to the timeline range (6% to 94%)
+  var historyFrom = ctx.getHistoryFrom ? ctx.getHistoryFrom() : 0;
+  var total = parseInt(track.dataset.historyTotal || "0", 10) || 1;
+  var timelineStart = 6 + (historyFrom / (total - 1 || 1)) * 88;
+  var timelineEnd = 94;
+  var timelineRange = timelineEnd - timelineStart;
 
-  for (var i = 0; i < markers.length; i++) {
-    var msgTop = parseInt(markers[i].dataset.offsetTop, 10);
-    if (msgTop >= vTop && msgTop <= vBot) {
-      markers[i].classList.add("in-view");
-    } else {
-      markers[i].classList.remove("in-view");
-    }
+  if (scrollH <= viewH) {
+    viewport.style.top = timelineStart + "%";
+    viewport.style.height = timelineRange + "%";
+  } else {
+    var scrollFrac = messagesEl.scrollTop / scrollH;
+    var viewFrac = viewH / scrollH;
+    viewport.style.top = (timelineStart + scrollFrac * timelineRange) + "%";
+    viewport.style.height = (viewFrac * timelineRange) + "%";
   }
 }
 
@@ -1694,33 +1744,62 @@ function showIconCtxMenu(anchorEl, slug, name) {
   var menu = document.createElement("div");
   menu.className = "project-ctx-menu";
 
-  var iconItem = document.createElement("button");
-  iconItem.className = "project-ctx-item";
-  iconItem.innerHTML = iconHtml("smile") + " <span>Set Icon</span>";
-  iconItem.addEventListener("click", function (e) {
-    e.stopPropagation();
-    closeProjectCtxMenu();
-    showEmojiPicker(slug, anchorEl);
-  });
-  menu.appendChild(iconItem);
+  var isWorktree = slug.indexOf("--") !== -1;
 
-  // --- Separator ---
-  var sep = document.createElement("div");
-  sep.className = "project-ctx-separator";
-  menu.appendChild(sep);
+  if (isWorktree) {
+    // Worktree context menu: only "Remove Worktree"
+    var removeWtItem = document.createElement("button");
+    removeWtItem.className = "project-ctx-item project-ctx-delete";
+    removeWtItem.innerHTML = iconHtml("trash-2") + " <span>Remove Worktree</span>";
+    removeWtItem.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeProjectCtxMenu();
+      if (ctx.ws && ctx.connected) {
+        ctx.ws.send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name || slug }));
+      }
+    });
+    menu.appendChild(removeWtItem);
+  } else {
+    // Regular project context menu
+    var iconItem = document.createElement("button");
+    iconItem.className = "project-ctx-item";
+    iconItem.innerHTML = iconHtml("smile") + " <span>Set Icon</span>";
+    iconItem.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeProjectCtxMenu();
+      showEmojiPicker(slug, anchorEl);
+    });
+    menu.appendChild(iconItem);
 
-  // --- Remove Project ---
-  var removeItem = document.createElement("button");
-  removeItem.className = "project-ctx-item project-ctx-delete";
-  removeItem.innerHTML = iconHtml("trash-2") + " <span>Remove Project</span>";
-  removeItem.addEventListener("click", function (e) {
-    e.stopPropagation();
-    closeProjectCtxMenu();
-    if (ctx.ws && ctx.connected) {
-      ctx.ws.send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name || slug }));
-    }
-  });
-  menu.appendChild(removeItem);
+    // --- Add Worktree ---
+    var wtItem = document.createElement("button");
+    wtItem.className = "project-ctx-item";
+    wtItem.innerHTML = iconHtml("git-branch") + " <span>Add Worktree</span>";
+    wtItem.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeProjectCtxMenu();
+      showWorktreeModal(slug, name || slug);
+    });
+    menu.appendChild(wtItem);
+
+    // --- Separator ---
+    var sep = document.createElement("div");
+    sep.className = "project-ctx-separator";
+    menu.appendChild(sep);
+
+    // --- Remove Project ---
+    var removeItem = document.createElement("button");
+    removeItem.className = "project-ctx-item project-ctx-delete";
+    removeItem.innerHTML = iconHtml("trash-2") + " <span>Remove Project</span>";
+    removeItem.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeProjectCtxMenu();
+      if (ctx.ws && ctx.connected) {
+        ctx.ws.send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name || slug }));
+      }
+    });
+    menu.appendChild(removeItem);
+  }
 
   document.body.appendChild(menu);
   projectCtxMenu = menu;
@@ -2176,8 +2255,227 @@ export function renderSidebarPresence(onlineUsers) {
   }
 }
 
+// --- Worktree folder collapse state (persisted in localStorage) ---
+var wtCollapsed = {};
+try {
+  wtCollapsed = JSON.parse(localStorage.getItem("clay-wt-collapsed") || "{}");
+} catch (e) {}
+function setWtCollapsed(slug, collapsed) {
+  wtCollapsed[slug] = collapsed;
+  try { localStorage.setItem("clay-wt-collapsed", JSON.stringify(wtCollapsed)); } catch (e) {}
+}
+
+// Group projects by parent/worktree relationship
+function groupProjects(projects) {
+  var parents = [];
+  var wtByParent = {};
+  for (var i = 0; i < projects.length; i++) {
+    var p = projects[i];
+    if (p.isWorktree && p.parentSlug) {
+      if (!wtByParent[p.parentSlug]) wtByParent[p.parentSlug] = [];
+      wtByParent[p.parentSlug].push(p);
+    } else {
+      parents.push(p);
+    }
+  }
+  return { parents: parents, wtByParent: wtByParent };
+}
+
+// Create a standard icon-strip item element (shared between parent and worktree rendering)
+function createIconItem(p, currentSlug) {
+  var el = document.createElement("a");
+  var isActive = p.slug === currentSlug && !currentDmUserId;
+  el.className = "icon-strip-item" + (isActive ? " active" : "");
+  el.href = "/p/" + p.slug + "/";
+  el.dataset.slug = p.slug;
+
+  if (p.icon) {
+    var emojiSpan = document.createElement("span");
+    emojiSpan.className = "project-emoji";
+    emojiSpan.textContent = p.icon;
+    parseEmojis(emojiSpan);
+    el.appendChild(emojiSpan);
+  } else {
+    el.appendChild(document.createTextNode(getProjectAbbrev(p.name)));
+  }
+
+  var pill = document.createElement("span");
+  pill.className = "icon-strip-pill";
+  el.appendChild(pill);
+
+  var statusDot = document.createElement("span");
+  statusDot.className = "icon-strip-status";
+  if (p.isProcessing) statusDot.classList.add("processing");
+  el.appendChild(statusDot);
+
+  var projectBadge = document.createElement("span");
+  projectBadge.className = "icon-strip-project-badge";
+  if (p.unread > 0 && !isActive) {
+    projectBadge.textContent = p.unread > 99 ? "99+" : String(p.unread);
+    projectBadge.classList.add("has-unread");
+  }
+  el.appendChild(projectBadge);
+
+  (function (name, elem) {
+    elem.addEventListener("mouseenter", function () { showIconTooltip(elem, name); });
+    elem.addEventListener("mouseleave", hideIconTooltip);
+  })(p.name, el);
+
+  (function (slug) {
+    el.addEventListener("click", function (e) {
+      e.preventDefault();
+      if (ctx.switchProject) ctx.switchProject(slug);
+    });
+  })(p.slug);
+
+  return el;
+}
+
+// Worktree creation modal
+function showWorktreeModal(parentSlug, parentName) {
+  // Remove existing modal if any
+  var existing = document.getElementById("wt-modal-container");
+  if (existing) existing.remove();
+
+  var container = document.createElement("div");
+  container.id = "wt-modal-container";
+
+  var overlay = document.createElement("div");
+  overlay.className = "wt-modal-overlay";
+  container.appendChild(overlay);
+
+  var modal = document.createElement("div");
+  modal.className = "wt-modal";
+
+  var title = document.createElement("div");
+  title.className = "wt-modal-title";
+  title.textContent = "Add Worktree \u2014 " + parentName;
+  modal.appendChild(title);
+
+  var branchLabel = document.createElement("label");
+  branchLabel.className = "wt-modal-label";
+  branchLabel.textContent = "Branch name";
+  modal.appendChild(branchLabel);
+
+  var branchInput = document.createElement("input");
+  branchInput.type = "text";
+  branchInput.className = "wt-modal-input";
+  branchInput.placeholder = "feat/my-feature";
+  branchInput.autocomplete = "off";
+  branchInput.spellcheck = false;
+  modal.appendChild(branchInput);
+
+  var baseLabel = document.createElement("label");
+  baseLabel.className = "wt-modal-label";
+  baseLabel.textContent = "Base branch";
+  modal.appendChild(baseLabel);
+
+  var baseSelect = document.createElement("select");
+  baseSelect.className = "wt-modal-input";
+  // Add "main" as default while loading
+  var defaultOpt = document.createElement("option");
+  defaultOpt.value = "main";
+  defaultOpt.textContent = "main";
+  baseSelect.appendChild(defaultOpt);
+  modal.appendChild(baseSelect);
+
+  // Fetch branches from target project via HTTP API
+  fetch("/p/" + parentSlug + "/api/branches")
+    .then(function (res) { return res.json(); })
+    .then(function (data) {
+      baseSelect.innerHTML = "";
+      var branches = data.branches || ["main"];
+      var defBranch = data.defaultBranch || "main";
+      for (var i = 0; i < branches.length; i++) {
+        var opt = document.createElement("option");
+        opt.value = branches[i];
+        opt.textContent = branches[i];
+        if (branches[i] === defBranch) opt.selected = true;
+        baseSelect.appendChild(opt);
+      }
+    })
+    .catch(function () {});
+
+  var errorDiv = document.createElement("div");
+  errorDiv.className = "wt-modal-error";
+  modal.appendChild(errorDiv);
+
+  var actions = document.createElement("div");
+  actions.className = "wt-modal-actions";
+
+  var cancelBtn = document.createElement("button");
+  cancelBtn.className = "wt-modal-btn";
+  cancelBtn.textContent = "Cancel";
+  actions.appendChild(cancelBtn);
+
+  var createBtn = document.createElement("button");
+  createBtn.className = "wt-modal-btn primary";
+  createBtn.textContent = "Create";
+  actions.appendChild(createBtn);
+
+  modal.appendChild(actions);
+  container.appendChild(modal);
+  document.body.appendChild(container);
+  branchInput.focus();
+
+  function closeModal() { container.remove(); }
+
+  function doCreate() {
+    var branch = branchInput.value.trim();
+    var base = baseSelect.value.trim() || null;
+    if (!branch) {
+      errorDiv.textContent = "Branch name is required";
+      errorDiv.classList.add("visible");
+      return;
+    }
+    // Sanitize: replace slashes with dashes for directory name
+    var dirName = branch.replace(/\//g, "-");
+    createBtn.disabled = true;
+    createBtn.textContent = "Creating...";
+    errorDiv.classList.remove("visible");
+
+    if (ctx.ws && ctx.connected) {
+      ctx.ws.send(JSON.stringify({
+        type: "create_worktree",
+        branch: dirName,
+        baseBranch: base
+      }));
+    }
+
+    // Listen for the result
+    var handler = function (event) {
+      var msg;
+      try { msg = JSON.parse(event.data); } catch (e) { return; }
+      if (msg.type === "create_worktree_result") {
+        ctx.ws.removeEventListener("message", handler);
+        if (msg.ok) {
+          closeModal();
+          if (msg.slug && ctx.switchProject) ctx.switchProject(msg.slug);
+        } else {
+          createBtn.disabled = false;
+          createBtn.textContent = "Create";
+          errorDiv.textContent = msg.error || "Failed to create worktree";
+          errorDiv.classList.add("visible");
+        }
+      }
+    };
+    ctx.ws.addEventListener("message", handler);
+  }
+
+  overlay.addEventListener("click", closeModal);
+  cancelBtn.addEventListener("click", closeModal);
+  createBtn.addEventListener("click", doCreate);
+  branchInput.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") doCreate();
+    if (e.key === "Escape") closeModal();
+  });
+  baseSelect.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") doCreate();
+    if (e.key === "Escape") closeModal();
+  });
+}
+
 export function renderIconStrip(projects, currentSlug) {
-  // Cache for mobile sheet
   cachedProjectList = projects;
   cachedCurrentSlug = currentSlug;
 
@@ -2185,71 +2483,154 @@ export function renderIconStrip(projects, currentSlug) {
   if (!container) return;
   container.innerHTML = "";
 
-  for (var i = 0; i < projects.length; i++) {
-    var p = projects[i];
-    var el = document.createElement("a");
-    var isActive = p.slug === currentSlug && !currentDmUserId;
-    el.className = "icon-strip-item" + (isActive ? " active" : "");
-    el.href = "/p/" + p.slug + "/";
-    el.dataset.slug = p.slug;
-
-    // Icon: twemoji or abbreviation
-    if (p.icon) {
-      var emojiSpan = document.createElement("span");
-      emojiSpan.className = "project-emoji";
-      emojiSpan.textContent = p.icon;
-      parseEmojis(emojiSpan);
-      el.appendChild(emojiSpan);
-    } else {
-      el.appendChild(document.createTextNode(getProjectAbbrev(p.name)));
-    }
-
-    var pill = document.createElement("span");
-    pill.className = "icon-strip-pill";
-    el.appendChild(pill);
+  var grouped = groupProjects(projects);
 
-    // Socket status indicator dot (bottom-right)
-    var statusDot = document.createElement("span");
-    statusDot.className = "icon-strip-status";
-    if (p.isProcessing) statusDot.classList.add("processing");
-    el.appendChild(statusDot);
+  for (var i = 0; i < grouped.parents.length; i++) {
+    var p = grouped.parents[i];
+    var worktrees = grouped.wtByParent[p.slug] || [];
+    var hasWorktrees = worktrees.length > 0;
 
-    // Unread badge (top-right)
-    var projectBadge = document.createElement("span");
-    projectBadge.className = "icon-strip-project-badge";
-    if (p.unread > 0 && !isActive) {
-      projectBadge.textContent = p.unread > 99 ? "99+" : String(p.unread);
-      projectBadge.classList.add("has-unread");
+    if (!hasWorktrees) {
+      // Regular project, render as before
+      var el = createIconItem(p, currentSlug);
+      (function (slug, name, elem) {
+        elem.addEventListener("contextmenu", function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          showIconCtxMenu(elem, slug, name);
+        });
+      })(p.slug, p.name || p.slug, el);
+      setupDragHandlers(el, p.slug);
+      container.appendChild(el);
+      continue;
     }
-    el.appendChild(projectBadge);
 
-    // Tooltip on hover
-    (function (name, elem) {
-      elem.addEventListener("mouseenter", function () { showIconTooltip(elem, name); });
-      elem.addEventListener("mouseleave", hideIconTooltip);
-    })(p.name, el);
+    // Folder group for parent + worktrees
+    var folder = document.createElement("div");
+    folder.className = "icon-strip-group";
+    folder.dataset.parentSlug = p.slug;
+    if (wtCollapsed[p.slug]) folder.classList.add("collapsed");
 
-    // Click handler — switch to project (no reload)
-    (function (slug) {
-      el.addEventListener("click", function (e) {
-        e.preventDefault();
-        if (ctx.switchProject) ctx.switchProject(slug);
-      });
-    })(p.slug);
+    // Bubble up worktree processing state to parent
+    if (!p.isProcessing) {
+      for (var wpi = 0; wpi < worktrees.length; wpi++) {
+        if (worktrees[wpi].isProcessing) { p.isProcessing = true; break; }
+      }
+    }
 
-    // Right-click context menu (icon only)
+    // Parent icon as folder header
+    var header = createIconItem(p, currentSlug);
+    header.classList.add("folder-header");
     (function (slug, name, elem) {
       elem.addEventListener("contextmenu", function (e) {
         e.preventDefault();
         e.stopPropagation();
         showIconCtxMenu(elem, slug, name);
       });
-    })(p.slug, p.name || p.slug, el);
+    })(p.slug, p.name || p.slug, header);
+    setupDragHandlers(header, p.slug);
+
+    // Chevron toggle
+    var chevron = document.createElement("span");
+    chevron.className = "icon-strip-group-chevron";
+    chevron.innerHTML = '<i data-lucide="git-branch"></i>';
+    (function (parentSlug, folderEl) {
+      chevron.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var nowCollapsed = folderEl.classList.toggle("collapsed");
+        setWtCollapsed(parentSlug, nowCollapsed);
+      });
+      chevron.addEventListener("contextmenu", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+      });
+    })(p.slug, folder);
+    chevron.setAttribute("data-tip", "Toggle worktrees");
+    header.appendChild(chevron);
+    folder.appendChild(header);
+
+    // Worktree items container
+    var itemsContainer = document.createElement("div");
+    itemsContainer.className = "icon-strip-group-items";
+
+    for (var wi = 0; wi < worktrees.length; wi++) {
+      (function (wt) {
+        var wtEl = document.createElement("a");
+        var isWtActive = wt.slug === currentSlug && !currentDmUserId;
+        var isAccessible = wt.worktreeAccessible !== false;
+        wtEl.className = "icon-strip-wt-item" + (isWtActive ? " active" : "") + (!isAccessible ? " wt-disabled" : "");
+        wtEl.href = "/p/" + wt.slug + "/";
+        wtEl.dataset.slug = wt.slug;
+
+        var abbrev = document.createElement("span");
+        abbrev.className = "wt-branch-abbrev";
+        abbrev.textContent = getProjectAbbrev(wt.name);
+        wtEl.appendChild(abbrev);
+
+        var wtStatus = document.createElement("span");
+        wtStatus.className = "icon-strip-status";
+        if (wt.isProcessing) wtStatus.classList.add("processing");
+        wtEl.appendChild(wtStatus);
+
+        var tooltipText = wt.name;
+        if (!isAccessible) {
+          tooltipText += " (outside project path, cannot be accessed)";
+        }
+        (function (text, elem) {
+          elem.addEventListener("mouseenter", function () { showIconTooltip(elem, text); });
+          elem.addEventListener("mouseleave", hideIconTooltip);
+        })(tooltipText, wtEl);
+
+        if (isAccessible) {
+          (function (slug) {
+            wtEl.addEventListener("click", function (e) {
+              e.preventDefault();
+              if (ctx.switchProject) ctx.switchProject(slug);
+            });
+          })(wt.slug);
+        } else {
+          wtEl.addEventListener("click", function (e) {
+            e.preventDefault();
+          });
+        }
 
-    // Drag-and-drop reordering
-    setupDragHandlers(el, p.slug);
+        if (isAccessible) {
+          (function (slug, name, elem) {
+            elem.addEventListener("contextmenu", function (e) {
+              e.preventDefault();
+              e.stopPropagation();
+              showIconCtxMenu(elem, slug, name);
+            });
+          })(wt.slug, wt.name, wtEl);
+        } else {
+          wtEl.addEventListener("contextmenu", function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+          });
+        }
+
+        itemsContainer.appendChild(wtEl);
+      })(worktrees[wi]);
+    }
+
+    // "+" button to add new worktree
+    var addBtn = document.createElement("button");
+    addBtn.className = "icon-strip-group-add";
+    addBtn.textContent = "+";
+    (function (parentSlug, parentName, btn) {
+      btn.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        showWorktreeModal(parentSlug, parentName);
+      });
+      btn.addEventListener("mouseenter", function () { showIconTooltip(btn, "New worktree"); });
+      btn.addEventListener("mouseleave", hideIconTooltip);
+    })(p.slug, p.name, addBtn);
+    itemsContainer.appendChild(addBtn);
 
-    container.appendChild(el);
+    folder.appendChild(itemsContainer);
+    container.appendChild(folder);
   }
 
   // Update home icon active state
@@ -2262,8 +2643,10 @@ export function renderIconStrip(projects, currentSlug) {
     }
   }
 
-  // Also update mobile project list
   renderProjectList(projects, currentSlug);
+
+  // Render Lucide icons added dynamically (e.g. worktree git-branch icon)
+  try { lucide.createIcons({ nodes: [container] }); } catch (e) {}
 }
 
 function renderProjectList(projects, currentSlug) {
@@ -2271,35 +2654,80 @@ function renderProjectList(projects, currentSlug) {
   if (!list) return;
   list.innerHTML = "";
 
-  for (var i = 0; i < projects.length; i++) {
-    (function (p) {
-      var el = document.createElement("button");
-      el.className = "mobile-project-item" + (p.slug === currentSlug ? " active" : "");
+  var grouped = groupProjects(projects);
 
-      var abbrev = document.createElement("span");
-      abbrev.className = "mobile-project-abbrev";
-      abbrev.textContent = getProjectAbbrev(p.name);
-      el.appendChild(abbrev);
+  for (var i = 0; i < grouped.parents.length; i++) {
+    var p = grouped.parents[i];
+    var worktrees = grouped.wtByParent[p.slug] || [];
 
-      var name = document.createElement("span");
-      name.className = "mobile-project-name";
-      name.textContent = p.name;
-      el.appendChild(name);
+    if (worktrees.length === 0) {
+      // Regular project
+      list.appendChild(createMobileProjectItem(p, currentSlug, false));
+      continue;
+    }
 
-      if (p.isProcessing) {
-        var dot = document.createElement("span");
-        dot.className = "mobile-project-processing";
-        el.appendChild(dot);
+    // Folder for parent + worktrees
+    var folderDiv = document.createElement("div");
+    folderDiv.className = "mobile-project-folder";
+    if (wtCollapsed[p.slug]) folderDiv.classList.add("collapsed");
+
+    var headerEl = createMobileProjectItem(p, currentSlug, false);
+    var chevron = document.createElement("span");
+    chevron.className = "mobile-folder-chevron";
+    chevron.innerHTML = "&#9660;";
+    (function (parentSlug, fDiv) {
+      chevron.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var nowCollapsed = fDiv.classList.toggle("collapsed");
+        setWtCollapsed(parentSlug, nowCollapsed);
+      });
+    })(p.slug, folderDiv);
+    headerEl.appendChild(chevron);
+    folderDiv.appendChild(headerEl);
+
+    var wtList = document.createElement("div");
+    wtList.className = "mobile-folder-items";
+    for (var wi = 0; wi < worktrees.length; wi++) {
+      var isAccessible = worktrees[wi].worktreeAccessible !== false;
+      var wtItem = createMobileProjectItem(worktrees[wi], currentSlug, true);
+      if (!isAccessible) wtItem.classList.add("wt-disabled");
+      if (!isAccessible) {
+        wtItem.addEventListener("click", function (e) { e.preventDefault(); e.stopPropagation(); });
       }
+      wtList.appendChild(wtItem);
+    }
+    folderDiv.appendChild(wtList);
+    list.appendChild(folderDiv);
+  }
+}
 
-      el.addEventListener("click", function () {
-        if (ctx.switchProject) ctx.switchProject(p.slug);
-        closeSidebar();
-      });
+function createMobileProjectItem(p, currentSlug, isWorktree) {
+  var el = document.createElement("button");
+  el.className = "mobile-project-item" + (p.slug === currentSlug ? " active" : "") + (isWorktree ? " wt-item" : "");
+
+  var abbrev = document.createElement("span");
+  abbrev.className = "mobile-project-abbrev";
+  abbrev.textContent = getProjectAbbrev(p.name);
+  el.appendChild(abbrev);
 
-      list.appendChild(el);
-    })(projects[i]);
+  var name = document.createElement("span");
+  name.className = "mobile-project-name";
+  name.textContent = p.name;
+  el.appendChild(name);
+
+  if (p.isProcessing) {
+    var dot = document.createElement("span");
+    dot.className = "mobile-project-processing";
+    el.appendChild(dot);
   }
+
+  el.addEventListener("click", function () {
+    if (ctx.switchProject) ctx.switchProject(p.slug);
+    closeSidebar();
+  });
+
+  return el;
 }
 
 export function getEmojiCategories() { return EMOJI_CATEGORIES; }