clay-server 2.47.0-beta.5 → 2.47.0-beta.6

package/lib/public/modules/branch-switcher.js

@@ -0,0 +1,178 @@
+// Title-bar branch switcher for a project and its worktrees.
+
+import { store } from './store.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { escapeHtml } from './utils.js';
+import { familyOf } from './worktree-family.js';
+import { switchProject, confirmRemoveProject } from './app-projects.js';
+import { showWorktreeModal } from './sidebar-projects.js';
+
+var chip = null;
+var label = null;
+var menu = null;
+var menuOpen = false;
+var defaultBranches = {};
+// slug -> true/false once /api/branches answers; undefined while unknown.
+// Non-git projects hide the chip (no worktrees to manage there).
+var gitRepoBySlug = {};
+
+function projectName(project) {
+  return project ? (project.title || project.project || project.name || project.slug) : "";
+}
+
+function currentProject(projects) {
+  var slug = store.get('currentSlug');
+  for (var i = 0; i < projects.length; i++) {
+    if (projects[i].slug === slug) return projects[i];
+  }
+  return null;
+}
+
+function defaultBranch(parent) {
+  return defaultBranches[parent.slug] || "default";
+}
+
+function requestDefaultBranch(parent) {
+  if (!parent || Object.prototype.hasOwnProperty.call(defaultBranches, parent.slug)) return;
+  defaultBranches[parent.slug] = null;
+  fetch("/p/" + encodeURIComponent(parent.slug) + "/api/branches")
+    .then(function (response) { return response.json(); })
+    .then(function (data) {
+      defaultBranches[parent.slug] = data.defaultBranch || "default";
+      gitRepoBySlug[parent.slug] = data.isGitRepo !== false;
+      renderBranchSwitcher();
+    })
+    .catch(function () {
+      defaultBranches[parent.slug] = "default";
+      renderBranchSwitcher();
+    });
+}
+
+function closeMenu() {
+  menuOpen = false;
+  if (menu) menu.classList.add("hidden");
+  if (chip) {
+    chip.classList.remove("open");
+    chip.setAttribute("aria-expanded", "false");
+  }
+}
+
+function positionMenu() {
+  if (!chip || !menu || !menuOpen) return;
+  var rect = chip.getBoundingClientRect();
+  var left = Math.min(rect.left, window.innerWidth - menu.offsetWidth - 8);
+  var top = rect.bottom + 6;
+  if (top + menu.offsetHeight > window.innerHeight - 8) top = rect.top - menu.offsetHeight - 6;
+  menu.style.left = Math.max(8, left) + "px";
+  menu.style.top = Math.max(8, top) + "px";
+}
+
+function branchLabel(project, parent) {
+  return project.isWorktree ? (project.branch || projectName(project)) : defaultBranch(parent);
+}
+
+function appendProjectRow(container, project, parent, isCurrent) {
+  var row = document.createElement("div");
+  row.className = "branch-chip-row" + (isCurrent ? " current" : "");
+  var inaccessible = project.isWorktree && project.worktreeAccessible === false;
+  var main = document.createElement("button");
+  main.className = "branch-chip-row-main";
+  main.disabled = inaccessible;
+  if (inaccessible) main.title = "Outside project path";
+  main.innerHTML = iconHtml("git-branch") + '<span class="branch-chip-row-label">' +
+    escapeHtml(branchLabel(project, parent)) + "</span>";
+  if (project.isProcessing) {
+    var dot = document.createElement("span");
+    dot.className = "branch-chip-processing";
+    main.appendChild(dot);
+  }
+  if (project.pendingPermissions > 0) {
+    var badge = document.createElement("span");
+    badge.className = "branch-chip-pending";
+    badge.textContent = project.pendingPermissions > 99 ? "99+" : String(project.pendingPermissions);
+    main.appendChild(badge);
+  }
+  if (isCurrent) main.insertAdjacentHTML("beforeend", iconHtml("check"));
+  if (!inaccessible) {
+    main.addEventListener("click", function () { closeMenu(); switchProject(project.slug); });
+  }
+  row.appendChild(main);
+
+  if (project.isWorktree && (!store.get('permissions') || store.get('permissions').deleteProject !== false)) {
+    var remove = document.createElement("button");
+    remove.className = "branch-chip-row-action";
+    remove.title = "Remove worktree";
+    remove.innerHTML = iconHtml("trash-2");
+    remove.addEventListener("click", function (event) {
+      event.stopPropagation();
+      closeMenu();
+      confirmRemoveProject(project.slug, projectName(project));
+    });
+    row.appendChild(remove);
+  }
+  container.appendChild(row);
+}
+
+function renderMenu(family, current) {
+  menu.innerHTML = "";
+  if (family.parent) appendProjectRow(menu, family.parent, family.parent, current.slug === family.parent.slug);
+  for (var i = 0; i < family.worktrees.length; i++) {
+    appendProjectRow(menu, family.worktrees[i], family.parent || family.worktrees[i], current.slug === family.worktrees[i].slug);
+  }
+  if (family.parent) {
+    var footer = document.createElement("button");
+    footer.className = "branch-chip-new";
+    footer.innerHTML = iconHtml("plus") + " <span>New worktree...</span>";
+    footer.addEventListener("click", function () {
+      closeMenu();
+      showWorktreeModal(family.parent.slug, projectName(family.parent));
+    });
+    menu.appendChild(footer);
+  }
+  refreshIcons();
+  positionMenu();
+}
+
+export function renderBranchSwitcher() {
+  if (!chip) return;
+  var projects = store.get('projects') || [];
+  var current = currentProject(projects);
+  var family = current ? familyOf(projects, current.slug) : { parent: null, worktrees: [] };
+  // The chip is the project's worktree management surface, so it shows even
+  // with zero worktrees (the menu then offers the default branch and "New
+  // worktree"). Hidden where there is no project context to manage, and for
+  // non-git projects (optimistically visible until /api/branches answers).
+  var gateSlug = family.parent ? family.parent.slug : (current ? current.slug : null);
+  var hidden = !current || store.get('dmMode') || store.get('mateProjectSlug') ||
+    store.get('homeHubVisible') || (gateSlug && gitRepoBySlug[gateSlug] === false);
+  chip.classList.toggle("hidden", hidden);
+  if (hidden) { closeMenu(); return; }
+  if (family.parent) requestDefaultBranch(family.parent);
+  label.textContent = branchLabel(current, family.parent || current);
+  if (menuOpen) renderMenu(family, current);
+}
+
+export function initBranchSwitcher() {
+  chip = document.getElementById("branch-chip");
+  label = document.getElementById("branch-chip-label");
+  menu = document.getElementById("branch-chip-menu");
+  if (!chip || !label || !menu) return;
+  chip.addEventListener("click", function (event) {
+    event.stopPropagation();
+    menuOpen = !menuOpen;
+    chip.classList.toggle("open", menuOpen);
+    chip.setAttribute("aria-expanded", menuOpen ? "true" : "false");
+    menu.classList.toggle("hidden", !menuOpen);
+    renderBranchSwitcher();
+  });
+  document.addEventListener("click", function (event) {
+    if (menuOpen && !menu.contains(event.target) && !chip.contains(event.target)) closeMenu();
+  });
+  window.addEventListener("resize", positionMenu);
+  store.subscribe(function (state, prev) {
+    if (state.projects !== prev.projects || state.currentSlug !== prev.currentSlug ||
+        state.dmMode !== prev.dmMode || state.mateProjectSlug !== prev.mateProjectSlug ||
+        state.homeHubVisible !== prev.homeHubVisible) renderBranchSwitcher();
+  });
+  renderBranchSwitcher();
+}

package/lib/public/modules/dom-refs.js

@@ -16,6 +16,5 @@ export function getSessionListEl() { return ref("session-list"); }
 
 export function getStatusDot() {
   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") ||
          document.querySelector("#icon-strip-users .icon-strip-mate.active .icon-strip-status");
 }

package/lib/public/modules/project-switcher.js

@@ -19,6 +19,7 @@ import { getCachedProjects, switchProject } from './app-projects.js';
 import { openDm } from './app-dm.js';
 import { mateAvatarUrl } from './avatar.js';
 import { parseEmojis } from './markdown.js';
+import { switcherProjectName } from './worktree-family.js';
 
 var _projectMru = [];   // project slugs, most recent first
 var _mateMru = [];      // mate ids (mate_XXX), most recent first
@@ -263,7 +264,7 @@ function buildProjectEntries() {
     var unreachable = p.isWorktree && p.worktreeAccessible === false;
     return {
       key: p.slug,
-      title: p.title || p.project || p.slug,
+      title: switcherProjectName(projects, p),
       icon: p.icon || null,
       fallbackIcon: 'folder',
       isCurrent: p.slug === store.get('currentSlug'),

package/lib/public/modules/sidebar-mobile.js

@@ -38,6 +38,7 @@ import { showHomeHub } from './app-home-hub.js';
 import { openTerminal } from './terminal.js';
 import { requestKnowledgeList } from './mate-knowledge.js';
 import { loadRootDirectory } from './filebrowser.js';
+import { aggregateFamily, familyOf, parentProjects } from './worktree-family.js';
 
 // --- Mobile state ---
 var mobileChatSheetOpen = false;
@@ -147,10 +148,22 @@ function closeMobileSheet() {
 }
 
 function renderSheetProjects(listEl) {
-  for (var i = 0; i < getCachedProjectList().length; i++) {
+  var projects = getCachedProjectList();
+  var parents = parentProjects(projects);
+  var activeFamily = familyOf(projects, getCachedCurrentSlug());
+  var activeSlug = activeFamily.parent ? activeFamily.parent.slug : getCachedCurrentSlug();
+
+  for (var i = 0; i < parents.length; i++) {
     (function (p) {
+      var family = familyOf(projects, p.slug);
+      var displayProject = aggregateFamily(p, family.worktrees);
+      var hasWorktreeUnread = family.worktrees.some(function (worktree) { return worktree.unread > 0; });
+      var hasWorktreePending = family.worktrees.some(function (worktree) { return worktree.pendingPermissions > 0; });
       var el = document.createElement("button");
-      el.className = "mobile-project-item" + (p.slug === getCachedCurrentSlug() ? " active" : "");
+      el.className = "mobile-project-item" + (p.slug === activeSlug ? " active" : "");
+      if ((displayProject.pendingPermissions > 0 && p.slug !== activeSlug) || hasWorktreePending) {
+        el.classList.add("has-pending-perm");
+      }
 
       var abbrev = document.createElement("span");
       abbrev.className = "mobile-project-abbrev";
@@ -167,16 +180,16 @@ function renderSheetProjects(listEl) {
       name.textContent = p.name;
       el.appendChild(name);
 
-      if (p.isProcessing) {
+      if (displayProject.isProcessing) {
         var dot = document.createElement("span");
         dot.className = "mobile-project-processing";
         el.appendChild(dot);
       }
 
-      if (p.unread > 0 && p.slug !== getCachedCurrentSlug()) {
+      if (displayProject.unread > 0 && (p.slug !== activeSlug || hasWorktreeUnread)) {
         var mBadge = document.createElement("span");
         mBadge.className = "mobile-project-unread";
-        mBadge.textContent = p.unread > 99 ? "99+" : String(p.unread);
+        mBadge.textContent = displayProject.unread > 99 ? "99+" : String(displayProject.unread);
         el.appendChild(mBadge);
       }
 
@@ -186,7 +199,7 @@ function renderSheetProjects(listEl) {
       });
 
       listEl.appendChild(el);
-    })(getCachedProjectList()[i]);
+    })(parents[i]);
   }
 }
 

package/lib/public/modules/sidebar-projects.js

@@ -10,9 +10,10 @@ import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { closeSidebar } from './sidebar.js';
 import { showIconTooltip, hideIconTooltip, closeUserCtxMenu, getCurrentDmUserId } from './sidebar-mates.js';
-import { switchProject, openAddProjectModal, getCachedProjects } from './app-projects.js';
+import { switchProject, openAddProjectModal } from './app-projects.js';
 import { showHomeHub } from './app-home-hub.js';
 import { getPendingTuiAttention } from './app-notifications.js';
+import { aggregateFamily } from './worktree-family.js';
 
 // --- Project state ---
 var cachedProjectList = [];
@@ -31,12 +32,6 @@ var emojiPickerEl = null;
 var draggedSlug = null;
 var draggedEl = null;
 
-// --- Worktree folder collapse state (persisted in localStorage) ---
-var wtCollapsed = {};
-try {
-  wtCollapsed = JSON.parse(localStorage.getItem("clay-wt-collapsed") || "{}");
-} catch (e) {}
-
 var EMOJI_CATEGORIES = [
   { id: "frequent", icon: "🕐", label: "Frequent", emojis: [
     "😀","😎","🤓","🧠","💡","🔥","⚡","🚀",
@@ -524,17 +519,8 @@ function showIconCtxMenu(anchorEl, slug, name) {
       }
     });
     menu.appendChild(removeWtItem);
-  } else {
-    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);
   }
+  // Worktree creation lives in the title-bar branch chip, not here.
 
   document.body.appendChild(menu);
   projectCtxMenu = menu;
@@ -619,20 +605,7 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
     }
   }
 
-  var sep2 = document.createElement("div");
-  sep2.className = "project-ctx-separator";
-  menu.appendChild(sep2);
-
-  // --- 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);
+  // Worktree creation lives in the title-bar branch chip, not here.
 
   if (!store.get('permissions') || store.get('permissions').deleteProject !== false) {
     var sep3 = document.createElement("div");
@@ -953,13 +926,6 @@ function setupDragHandlers(el, slug) {
   });
 }
 
-// --- Worktree folder collapse ---
-
-function setWtCollapsed(slug, collapsed) {
-  wtCollapsed[slug] = collapsed;
-  try { localStorage.setItem("clay-wt-collapsed", JSON.stringify(wtCollapsed)); } catch (e) {}
-}
-
 function groupProjects(projects) {
   var parents = [];
   var wtByParent = {};
@@ -975,6 +941,21 @@ function groupProjects(projects) {
   return { parents: parents, wtByParent: wtByParent };
 }
 
+function aggregateProjectFamily(parent, worktrees) {
+  var aggregate = aggregateFamily(parent, worktrees);
+  aggregate.hasFamilyPendingAttention = getPendingTuiAttention(parent.slug) > 0;
+  aggregate.hasWorktreeUnread = false;
+  aggregate.hasWorktreePending = false;
+  for (var i = 0; i < worktrees.length; i++) {
+    if (getPendingTuiAttention(worktrees[i].slug) > 0) aggregate.hasFamilyPendingAttention = true;
+    if (worktrees[i].unread > 0) aggregate.hasWorktreeUnread = true;
+    if (worktrees[i].pendingPermissions > 0 || getPendingTuiAttention(worktrees[i].slug) > 0) {
+      aggregate.hasWorktreePending = true;
+    }
+  }
+  return aggregate;
+}
+
 // --- Icon item creation ---
 
 function createIconItem(p, currentSlug) {
@@ -1006,7 +987,7 @@ function createIconItem(p, currentSlug) {
 
   var projectBadge = document.createElement("span");
   projectBadge.className = "icon-strip-project-badge";
-  if (p.unread > 0 && !isActive) {
+  if (p.unread > 0 && (!isActive || p.hasWorktreeUnread)) {
     projectBadge.textContent = p.unread > 99 ? "99+" : String(p.unread);
     projectBadge.classList.add("has-unread");
   }
@@ -1016,7 +997,8 @@ function createIconItem(p, currentSlug) {
   // broadcast — they surface via tui_attention notifications. We shake the
   // same icon for either, so the user notices regardless of which engine
   // is asking.
-  if (!isActive && (p.pendingPermissions > 0 || getPendingTuiAttention(p.slug) > 0)) {
+  if ((!isActive && (p.pendingPermissions > 0 || p.hasFamilyPendingAttention || getPendingTuiAttention(p.slug) > 0)) ||
+      p.hasWorktreePending) {
     el.classList.add("has-pending-perm");
   }
 
@@ -1037,7 +1019,7 @@ function createIconItem(p, currentSlug) {
 
 // --- Worktree creation modal ---
 
-function showWorktreeModal(parentSlug, parentName) {
+export function showWorktreeModal(parentSlug, parentName) {
   var existing = document.getElementById("wt-modal-container");
   if (existing) existing.remove();
 
@@ -1192,164 +1174,17 @@ export function renderIconStrip(projects, currentSlug) {
   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;
-
-    if (!hasWorktrees) {
-      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;
-    }
-
-    // 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");
-
-    if (!p.isProcessing) {
-      for (var wpi = 0; wpi < worktrees.length; wpi++) {
-        if (worktrees[wpi].isProcessing) { p.isProcessing = true; break; }
-      }
-    }
-
-    var header = createIconItem(p, currentSlug);
-    header.classList.add("folder-header");
+    var familyProject = aggregateProjectFamily(p, worktrees);
+    var el = createIconItem(familyProject, currentSlug);
     (function (slug, name, elem) {
       elem.addEventListener("contextmenu", function (e) {
         e.preventDefault();
         e.stopPropagation();
         showIconCtxMenu(elem, slug, name);
       });
-    })(p.slug, p.name || p.slug, header);
-    setupDragHandlers(header, p.slug);
-
-    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);
-
-    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;
-
-        if (wt.icon) {
-          var wtEmoji = document.createElement("span");
-          wtEmoji.className = "wt-branch-abbrev project-emoji";
-          wtEmoji.textContent = wt.icon;
-          parseEmojis(wtEmoji);
-          wtEl.appendChild(wtEmoji);
-        } else {
-          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 (switchProject) switchProject(slug);
-            });
-          })(wt.slug);
-        } else {
-          wtEl.addEventListener("click", function (e) {
-            e.preventDefault();
-          });
-        }
-
-        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();
-          });
-        }
-
-        if (!isWtActive && (wt.pendingPermissions > 0 || getPendingTuiAttention(wt.slug) > 0)) {
-          wtEl.classList.add("has-pending-perm");
-        }
-
-        itemsContainer.appendChild(wtEl);
-      })(worktrees[wi]);
-    }
-
-    var hasWtPendingPerm = false;
-    for (var wpi2 = 0; wpi2 < worktrees.length; wpi2++) {
-      if (worktrees[wpi2].pendingPermissions > 0 || getPendingTuiAttention(worktrees[wpi2].slug) > 0) {
-        hasWtPendingPerm = true;
-        break;
-      }
-    }
-    if (hasWtPendingPerm) folder.classList.remove("collapsed");
-
-    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);
-
-    folder.appendChild(itemsContainer);
-    container.appendChild(folder);
+    })(p.slug, p.name || p.slug, el);
+    setupDragHandlers(el, p.slug);
+    container.appendChild(el);
   }
 
   // Update home icon active state
@@ -1377,50 +1212,17 @@ function renderProjectList(projects, currentSlug) {
   for (var i = 0; i < grouped.parents.length; i++) {
     var p = grouped.parents[i];
     var worktrees = grouped.wtByParent[p.slug] || [];
-
-    if (worktrees.length === 0) {
-      list.appendChild(createMobileProjectItem(p, currentSlug, false));
-      continue;
-    }
-
-    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);
+    list.appendChild(createMobileProjectItem(aggregateProjectFamily(p, worktrees), currentSlug));
   }
 }
 
-function createMobileProjectItem(p, currentSlug, isWorktree) {
+function createMobileProjectItem(p, currentSlug) {
   var el = document.createElement("button");
-  el.className = "mobile-project-item" + (p.slug === currentSlug ? " active" : "") + (isWorktree ? " wt-item" : "");
+  var isActive = p.slug === currentSlug;
+  el.className = "mobile-project-item" + (isActive ? " active" : "");
+  if ((!isActive && (p.pendingPermissions > 0 || p.hasFamilyPendingAttention)) || p.hasWorktreePending) {
+    el.classList.add("has-pending-perm");
+  }
 
   var abbrev = document.createElement("span");
   abbrev.className = "mobile-project-abbrev";
@@ -1443,6 +1245,13 @@ function createMobileProjectItem(p, currentSlug, isWorktree) {
     el.appendChild(dot);
   }
 
+  if (p.unread > 0 && (!isActive || p.hasWorktreeUnread)) {
+    var badge = document.createElement("span");
+    badge.className = "mobile-project-unread";
+    badge.textContent = p.unread > 99 ? "99+" : String(p.unread);
+    el.appendChild(badge);
+  }
+
   el.addEventListener("click", function () {
     if (switchProject) switchProject(p.slug);
     if (closeSidebar) closeSidebar();
@@ -1454,12 +1263,30 @@ function createMobileProjectItem(p, currentSlug, isWorktree) {
 export function getEmojiCategories() { return EMOJI_CATEGORIES; }
 
 export function updateProjectBadge(slug, count) {
-  var icon = document.querySelector('.icon-strip-item[data-slug="' + slug + '"]');
+  var targetSlug = slug;
+  for (var i = 0; i < cachedProjectList.length; i++) {
+    if (cachedProjectList[i].slug !== slug) continue;
+    cachedProjectList[i].unread = count;
+    if (cachedProjectList[i].isWorktree && cachedProjectList[i].parentSlug) {
+      targetSlug = cachedProjectList[i].parentSlug;
+    }
+    break;
+  }
+
+  var displayCount = count;
+  var grouped = groupProjects(cachedProjectList);
+  for (var pi = 0; pi < grouped.parents.length; pi++) {
+    if (grouped.parents[pi].slug !== targetSlug) continue;
+    displayCount = aggregateFamily(grouped.parents[pi], grouped.wtByParent[targetSlug] || []).unread;
+    break;
+  }
+
+  var icon = document.querySelector('.icon-strip-item[data-slug="' + targetSlug + '"]');
   if (!icon) return;
   var badge = icon.querySelector(".icon-strip-project-badge");
   if (!badge) return;
-  if (count > 0) {
-    badge.textContent = count > 99 ? "99+" : String(count);
+  if (displayCount > 0) {
+    badge.textContent = displayCount > 99 ? "99+" : String(displayCount);
     badge.classList.add("has-unread");
   } else {
     badge.textContent = "";